วิธีการ หัดเขียนเว็บด้วย HTML

HTML นั้นย่อมาจาก Hyper Text Markup Language เป็นโค้ดหรือ ภาษา สำหรับออกแบบหน้าตาของเว็บขั้นพื้นฐาน ไม่ซับซ้อนมาก ถ้าใครเป็นมือใหม่หัดเขียนโค้ด อาจจะดูมึนๆ หน่อย แต่จริงๆ แล้วเวลาพิมพ์หรือปรับแก้ ก็ใช้โปรแกรม text editor หรือเบราว์เซอร์ธรรมดานี่แหละ คุณอาจจะเคยเห็น HTML บางโค้ด สำหรับเปลี่ยนแปลงตัวอักษร ผ่านตามาแล้วก็ได้ เช่น ตามเว็บบอร์ดต่างๆ, หน้าโปรไฟล์แบบ custom หรือกระทั่งบางบทความวิกิฮาวของเรานี่แหละ HTML ถือเป็นเครื่องมือสารพัดประโยชน์ ใครท่องเน็ตเป็นชีวิตจิตใจควรหัดใช้ไว้ บอกเลยว่าเข้าใจง่ายและเร็วกว่าที่คิด

ส่วน 1

ส่วน 1 ของ 2:

รู้จัก HTML พื้นฐาน

ดาวน์โหลดบทความ

1
เปิดเอกสาร HTML. คุณสร้างไฟล์/เอกสาร HTML ได้ด้วยโปรแกรม text editor ส่วนใหญ่ เช่น Notepad หรือ Notepad++ (Windows), TextEdit (Mac) และ gedit (GNU/Linux) ให้คุณเปิดเอกสารใหม่ขึ้นมาโดยเข้า File → Save As ในเมนูด้านบน แล้วเซฟเป็น "Web Page" หรือเปลี่ยนนามสกุลไฟล์ (file extension) จาก ".doc", ".rtf" หรือ extension อื่นๆ เป็น ".html"
- อาจจะมีขึ้นเตือนบ้าง ว่าเอกสารนี้จะถูกเปลี่ยนเป็น "plain text" ไม่ใช่ "rich text" หรือถ้ากำหนดฟอร์แมตพิเศษไว้หรือใส่รูป ก็จะเซฟไม่ได้ ซึ่งก็ไม่เป็นไร เพราะเอกสาร HTML ไม่ต้องใช้อะไรพวกนี้
2
เปิดไฟล์ในเบราว์เซอร์. เซฟเอกสารเปล่าที่เพิ่งสร้าง แล้วมองหาไอคอนของไฟล์นี้ในคอม จากนั้นดับเบิลคลิกเพื่อเปิด จะเห็นหน้าเว็บเปล่าโผล่มาในเบราว์เซอร์ ถ้าไม่เป็นแบบนั้น ต้องลากไอคอนของไฟล์มาใส่ในแถบ URL (address) ของเบราว์เซอร์ แล้วระหว่างแก้ไขเอกสาร HTML ตามขั้นตอนในบทความนี้ ก็ให้กลับไปเช็คเป็นระยะ ว่าหน้าเว็บนั้นเปลี่ยนไปยังไงบ้าง
- แต่แค่นี้ไม่ได้แปลว่าเว็บคุณออนไลน์แล้วนะ ตอนนี้คนอื่นจะยังเข้าเว็บคุณไม่ได้ และระหว่างเขียน/ทดสอบโค้ดก็ยังไม่ต้องต่อเน็ต เบราว์เซอร์นี้ใช้ "อ่าน" เอกสาร HTML ให้เห็นภาพเวลาเป็นเว็บจริงเท่านั้น
3
รู้จัก markup tag. markup tag จะไม่โผล่มาในหน้าเว็บเหมือนข้อความทั่วไป แต่ใช้บอกเบราว์เซอร์ว่าจะแสดงหน้าเว็บและเนื้อหาออกมายังไง โดยคำสั่งจะอยู่ใน "start tag" หรือแท็กเปิด เช่น ใช้บอกเบราว์เซอร์ให้แสดงข้อความเป็น ตัวหนา (bold) จากนั้นก็ต้องมี "end tag" หรือแท็กปิดด้วย เบราว์เซอร์ถึงจะรู้ว่าต้องใช้งานคำสั่งนั้นตรงไหน ในตัวอย่างของเรา ข้อความทั้งหมดที่อยู่กลาง start tag กับ end tag จะกลายเป็นตัวหนา end tag ก็ต้องอยู่ในวงเล็บสามเหลี่ยม (angle brackets) แต่มีเครื่องหมายทับ (slash) ต่อท้ายวงเล็บเปิดด้วย
- พิมพ์ start tag กลางวงเล็บสามเหลี่ยม <พิมพ์ start tag ตรงนี้>
- พิมพ์ end tags กลางวงเล็บสามเหลี่ยม แต่ต้องมีเครื่องหมายทับหรือ slash ต่อท้ายวงเล็บเปิด </พิมพ์ end tag ตรงนี้>
- เดี๋ยวอ่านต่อไปเรื่อยๆ จะรู้เองว่าต้องพิมพ์ markup tag ยังไง ใช้ทำอะไรได้บ้าง แต่ตอนนี้คุณก็รู้จักฟอร์แมตเบื้องต้น (แต่สำคัญ) อย่าง < > กับ </ > แล้ว
- ถ้าศึกษาวิธีเขียนโค้ด HTML จากแหล่งอื่นไปพร้อมๆ กัน จะเห็นว่าบางที่เรียกแท็กต่างๆ ว่า "elements" ก็มี ส่วนข้อความกลาง start tag กับ end tag บางทีก็เรียก "element content"
4
พิมพ์แท็ก <html> แรก. เอกสาร html ทุกไฟล์ต้องเริ่มด้วยแท็ก <html> แล้วปิดท้ายด้วยแท็ก </html> เพื่อบอกเบราว์เซอร์ว่า ทุกอย่างกลางแท็กเป็นโค้ด HTML ให้คุณพิมพ์แท็กต่อไปนี้ในเอกสารของคุณ
- ปกติบรรทัดแรกของไฟล์ HTML จะเป็น <!DOCTYPE html> ใช้บอกเบราว์เซอร์ว่าทั้งไฟล์นี้เป็นไฟล์ HTML จะไม่มีก็ได้ แต่ถ้ามีก็หมดปัญหาเปิดในเบราว์เซอร์นั้นนี้ไม่ได้
- พิมพ์ <html> ที่หัวเอกสาร
- กด enter หรือ return หลายๆ ครั้งหน่อยเพื่อเว้นบรรทัด แล้วพิมพ์ </html>
- ย้ำอีกทีว่า ทุกอย่าง ที่จะพิมพ์ต่อไปในบทความนี้ ต้องอยู่ตรงกลางระหว่าง 2 แท็กนี้
5
ใส่ <head> ของเอกสาร. กลางแท็ก <html> กับ </html> ให้พิมพ์แท็กเปิด <head> และแท็กปิด </head> แล้วเว้นที่ว่างไว้พิมพ์เพิ่ม อะไรก็ตามที่พิมพ์ไว้ตรงกลางระหว่าง 2 head tag จะไม่แสดงในหน้าเว็บ ลองพิมพ์ตามขั้นตอนข้างล่างดู แล้วเช็คว่าข้อความไปโผล่ที่ไหนแทน
- กลางแท็ก <head> กับ </head> ให้พิมพ์ <title> กับ </title>
- กลางแท็ก <title> กับ </title> ให้พิมพ์ หัดเขียนเว็บด้วย HTML - วิกิฮาว
- เซฟไฟล์แล้วเปิดในเบราว์เซอร์ (หรือเซฟไฟล์แล้ว refresh หน้าเบราว์เซอร์ ถ้าเปิดอยู่) จะเห็นข้อความที่เพิ่งพิมพ์ อยู่ด้านบนของเบราว์เซอร์ เหนือแถบ address
6
สร้างส่วนของ <body>. ข้อความนอกเหนือจากที่ว่ามา ของไฟล์หัดเขียนโค้ดนี้ จะอยู่ใน body หรือส่วนของเนื้อหา ส่วนนี้แหละที่จะแสดงในเว็บ ให้พิมพ์ <body> กับ </body> หลัง แท็กปิด </head> แต่ ก่อน แท็ก </html> ต่อจากนี้ไปไม่ว่าให้พิมพ์อะไรในบทความนี้ ก็จะต้องอยู่ระหว่าง 2 body tag เท่านี้ก็จะได้เอกสารหน้าตาประมาณนี้ (ไม่รวม bullet points)
- <html>
- <head>
- <title>หัดเขียนเว็บด้วย HTML - วิกิฮาว</title>
- </head>
- <body>
- </body>
- </html>
7
ใส่ข้อความแบบต่างๆ. คราวนี้เราจะมาพิมพ์เนื้อหาเว็บ หรือข้อมูลที่จะแสดงในเบราว์เซอร์กัน! อะไรที่พิมพ์ไว้ตรงกลาง body tag จะไปโผล่ในเบราว์เซอร์หลังเซฟไฟล์ HTML และ refresh หน้าเบราว์เซอร์นั้นแล้ว แต่ ห้าม พิมพ์อะไรที่มีสัญลักษณ์ < หรือ > เพราะเบราว์เซอร์จะแปลเป็นคำสั่ง HTML หมด ไม่มองเป็นข้อความที่ต้องแสดง ขั้นต้นให้ลองพิมพ์ สวัสดีชาวโลก! (หรืออะไรก็ตามใจ) ดู จากนั้นใส่แท็กใหม่ครอบไว้ แล้วดูว่าข้อความเปลี่ยนไปยังไงบ้าง
- พิมพ์ <em>สวัสดีชาวโลก!</em> เพื่อ "เน้นข้อความ" สวัสดีชาวโลก!
- พิมพ์ <strong>สวัสดีชาวโลก!</strong> จะได้ "ข้อความตัวหนา" สวัสดีชาวโลก!
- พิมพ์ <s>สวัสดีชาวโลก!</s> เพื่อขีดฆ่าข้อความ ~~สวัสดีชาวโลก!~~
- พิมพ์ <sup>สวัสดีชาวโลก!</sup> จะได้ superscript (ตัวยก) ^{สวัสดีชาวโลก!}
- พิมพ์ <sub>สวัสดีชาวโลก!</sub> จะได้ subscript (ตัวห้อย) _{สวัสดีชาวโลก!}
- ลองใช้ผสมกัน เช่น พิมพ์ <em><strong>สวัสดีชาวโลก!</strong></em> แล้วดูว่าจะออกมายังไง
8
แบ่งข้อความเป็นย่อหน้า. ถ้าพิมพ์ไปหลายบรรทัดในเอกสาร HTML จะเห็นว่าข้อความไม่ขึ้นบรรทัดใหม่ในเบราว์เซอร์ คุณต้องเขียนโค้ดเอง
- <p>นี่คือย่อหน้าใหม่</p>
- ประโยคนี้ตามด้วย line break<br>ก่อนจะเริ่มประโยค
  ตั้งแต่อ่านบทความนี้มา นี่คือแท็กแรกที่ไม่ต้องมี end tag! เราเรียกแท็กนี้ว่า "empty tag" หรือแท็กว่าง
- กำหนดให้แสดง header (หัวเรื่อง) ของแต่ละส่วน (section)
  <h1>ข้อความที่จะใช้เป็น header</h1> header ใหญ่สุด
  <h2>ข้อความที่จะใช้เป็น header</h2> (header ระดับ 2)
  <h3>ข้อความที่จะใช้เป็น header</h3> (header ระดับ 3)
  <h4>ข้อความที่จะใช้เป็น header</h4> (header ระดับ 4)
  <h5>ข้อความที่จะใช้เป็น header</h5> (header เล็กสุด)
9
รู้จักวิธีสร้างรายการ. คุณสร้างรายการในหน้าเว็บได้หลายวิธีด้วยกัน ลองใช้โค้ดชนิดต่างๆ ต่อไปนี้ดูว่าแบบไหนตรงใจที่สุด จุดสำคัญคือต้องครอบทั้งรายการด้วยแท็ก 1 คู่ (เช่น แท็ก <ul> กับ </ul> ที่ใช้สร้าง "รายการแบบไม่เรียงลำดับ") และแต่ละข้อในรายการ ก็จะมีแท็กคู่อื่นครอบไว้อีกที เช่น <li> กับ </li>
- ใช้โค้ดต่อไปนี้สร้างรายการแบบมี bullet points
  <ul><li>รายการ</li><li>อีกรายการ</li><li>อีกรายการ</li></ul>
- หรือใช้โค้ดนี้สร้างรายการแบบมีตัวเลขกำกับ
  <ol><li>รายการที่ 1</li><li>รายการที่ 2</li><li>รายการที่ 3</li></ol>
- หรือใช้โค้ดนี้สร้างรายการแบบระบุประเภท (defining terms)
  <dl><dt>กาแฟ</dt><dd>- เครื่องดื่มร้อน</dd><dt>นม</dt><dd>- เครื่องดื่มเย็น</dd></dl>
10
ปรับแต่งหน้าเว็บให้ยิ่งเนี้ยบสวย ด้วย line breaks, เส้นคั่น และรูปภาพ. คราวนี้เราจะมาเพิ่มเติมรายละเอียดอื่นๆ นอกจากข้อความหรือเนื้อหาที่มีในหน้าเว็บอยู่แล้ว ลองใช้แท็กต่อไปนี้ดู หรือคลิกลิงค์อ่านรายละเอียดเพิ่มเติม ให้คุณไปฝากรูปในเว็บอื่น (image hosting) ซะก่อน ถึงจะได้ URL มาใช้เชื่อมต่อกับแท็กรูป (image tag)
- ใส่เส้นตรงใน HTML: <br> หรือ <hr>
- ใส่รูป: <img src="your_image_url">
11
ใส่ลิงค์ไปยังจุดอื่นของหน้าเว็บ. จริงๆ คุณใช้โค้ดนี้เชื่อมต่อไปยังหน้าอื่นหรือเว็บอื่นได้ด้วย แต่ถ้าคุณอ่านบทความนี้ แสดงว่ายังไม่มีเว็บของตัวเอง เพราะงั้นเราจะเน้นการสร้าง "anchor" (สมอ) คือระบุจุดที่จะใช้เชื่อมต่อไปยังตำแหน่งอื่นในหน้าเว็บเดียวกันก่อน
- ก่อนอื่นให้ทำการ "ทอดสมอ" (anchor) โดยใช้แท็ก <a> ตรงจุดของหน้าที่อยากเชื่อมต่อไป แล้วตั้งชื่อที่เข้าใจและจำง่าย
  
  <a name="เคล็ดลับ">พิมพ์ข้อความที่จะทำเป็น anchor</a>
- ใช้ <href> เพื่อเชื่อมต่อไปยัง anchor ต่างๆ หรือหน้าเว็บอื่น
  
  <a href="url ของหน้าเว็บ หรือชื่อ anchor ในหน้าเดียวกัน">พิมพ์ข้อความหรือใส่รูปที่จะใช้แสดงเป็นลิงค์เชื่อมต่อตรงนี้</a>
- ถ้าอยากเชื่อมต่อไปยัง anchor ของหน้าเว็บอื่น ให้เติมเครื่องหมาย # ต่อท้าย URL แล้วตามด้วยชื่อ anchor เช่น https://th.wikihow.com/หัดเขียนเว็บด้วย-HTML#เคล็ดลับ ใช้เชื่อมต่อไปยังส่วน "เคล็ดลับ" ของบทความนี้
โฆษณา

ส่วน 2

ส่วน 2 ของ 2:

รู้จัก HTML ขั้นสูง

ดาวน์โหลดบทความ

1
รู้จัก attribute. attribute จะอยู่ในแท็กอีกที ใช้ปรับเปลี่ยน "element content" ที่อยู่ระหว่าง start tag กับ end tag จะอยู่เดี่ยวๆ ไม่ได้ ต้องเขียนเป็นฟอร์แมต name="value" โดย name คือชื่อ attribute (เช่น "color" (สี)) ส่วน value จะเป็นค่าที่คุณกำหนด (เช่น "red" (แดง))
- ถ้าย้อนกลับไปดู จะเห็น attribute ผ่านตามาบ้างแล้ว ในส่วนของ HTML พื้นฐาน โดยแท็ก <img> ใช้ attribute src, anchor ใช้ attribute name และลิงค์ใช้ attribute href จะเห็นว่าทั้งหมดนี้อยู่ในฟอร์แมต ___="___" ทั้งนั้น
2
ลองสร้างตารางใน HTML. ถ้าจะสร้างตารางหรือแผนผัง ต้องใช้หลายแท็กที่แตกต่างกัน จะลองผิดลองถูกดูเอง หรือจะศึกษาเรื่องตาราง HTML เพิ่มเติมก็ได้
- เริ่มจากพิมพ์ table tag (แท็กตาราง) ครอบทั้งตาราง <table></table>
- ใส่ row tag (แท็กแถว) ครอบเนื้อหาของแต่ละแถว <tr>
- ใส่ column header (ชื่อคอลัมน์) ที่แถวแรก <th>
- เพิ่มเซลล์ต่างๆ ในแถวถัดมา <td>
- ข้างล่างคือตัวอย่างโค้ดหลังประกอบร่าง
  
  <table><tr><th>คอลัมน์ 1: เดือน</th><th>คอลัมน์ 2: เงินเก็บ</th></tr><tr><td>มกราคม</td><td>3,000 บาท</td></tr></table>
3
รู้จัก head tag อื่นๆ. เราพูดถึงแท็ก <head> กันไปแล้ว เพราะอยู่ต้นเอกสาร HTML ทุกไฟล์ นอกจากแท็ก <title> แล้วยังมีแท็กชนิดอื่นๆ ดังต่อไปนี้
- Meta tag คือแท็กสำหรับป้อนข้อมูล metadata ของหน้าเว็บนั้น ซึ่งเป็นข้อมูลที่ search engine ต่างๆ ใช้ค้นหาและจัดเรียงเว็บไซต์ ถ้าอยากให้เว็บคุณติดอันดับตอนคนค้นหา ก็ต้องใส่แท็กเปิด <meta> มากกว่า 1 จุด (ไม่ต้องมีแท็กปิด) แต่ละจุดให้มี 1 name attribute และ 1 content attribute เช่น <meta name="คำอธิบาย" content="เขียนคำอธิบายตรงนี้"> หรือ <meta name="คีย์เวิร์ด" content="เขียนรายชื่อคีย์เวิร์ด คั่นแต่ละคำด้วยลูกน้ำ">
- แท็ก <link> ใช้เชื่อมต่อไฟล์อื่นๆ กับหน้าเว็บนั้น โดยทั่วไปคือเชื่อมต่อกับ CSS stylesheet ที่ประกอบด้วยโค้ดประเภทต่างๆ ใช้ปรับแต่งหน้าเว็บ HTML ของคุณ เช่น เปลี่ยนสี, วางแนวข้อความ และอื่นๆ
- แท็ก <script> ใช้เชื่อมต่อหน้าเว็บกับไฟล์ JavaScript ทำให้หน้าเว็บเปลี่ยนแปลงได้เมื่อผู้ใช้คลิกหรือทำอะไรลงไป
4
เอาโค้ด HTML ของเว็บอื่นมาลองผิดลองถูก. วิธีเรียนรู้และฝึกฝนการเขียนเว็บที่ดีที่สุด คือศึกษาจากโค้ด HTML ของเว็บอื่นๆ โดยคลิกขวาหน้าเว็บนั้น แล้วเลือก "View Source", "View Page Source" หรือตัวเลือกอื่นที่ใกล้เคียง ไม่ก็เลือก View ในเมนูด้านบนของเบราว์เซอร์แทน ถ้าเจอแท็ก HTML ที่ไม่คุ้นเคย ให้ search หาคำตอบเพิ่มเติม
- คุณจะไปแก้ไขโค้ดของเว็บคนอื่นไม่ได้ แต่ copy โค้ด HTML ที่เจอแล้วเซฟลงเอกสารใหม่ได้ จากนั้นก็ลองผิดลองถูกตามใจชอบ จะได้เห็นว่าตัวเลือกต่างๆ ใช้ทำอะไร แต่ถ้าไม่มี CSS stylesheet ที่เว็บนั้นเชื่อมต่อและใช้งานอยู่ ก็อาจจะไม่เห็นสีหรือฟอร์แมตของเว็บอย่างที่ควรจะเป็น
ศึกษาเรื่องการออกแบบเว็บไซต์ขั้นสูงเพิ่มเติมจากบทความที่ครอบคลุม. ในเน็ตมีหลายเว็บมากที่ลงรายละเอียดเรื่องแท็ก HTML เช่น W3Schools และ Codecademy นอกจากนี้ก็ยังมีหนังสือสอนเขียนเว็บด้วย HTML ให้เลือกอ่านเยอะแยะ แต่ถ้าเป็นหนังสือต้องเลือกฉบับพิมพ์ใหม่ภายใน 1 - 2 ปี เพราะเรื่องไอทีต้องอัพเดทตลอดเวลา ที่เสริมได้แล้วยิ่งดีคือการใช้ CSS เพราะจะปรับแต่งหน้าตาและความสวยงามให้เว็บได้อีกเยอะ พอเชี่ยวชาญ CSS พอตัวแล้ว ขั้นต่อไปก็คือศึกษา Javascript ที่สำคัญมากถ้าคิดจะเป็นนักพัฒนาเว็บ
โฆษณา

เคล็ดลับ

Notepad++ เป็นโปรแกรมฟรีแต่ดี คล้ายๆ notepad ปกตินั่นแหละ แต่เซฟและทดสอบโค้ดที่เขียนไปในเบราว์เซอร์ได้แบบสดๆ (นอกจากนี้คุณยังเขียนโค้ดภาษาไหนก็ได้ ทั้ง HTML, CSS, python, Javascript และอื่นๆ)
ลองหาหน้าเว็บง่ายๆ ในเน็ต แล้วเอามาปรับแก้โค้ดดู เช่น ย้ายข้อความ เปลี่ยนฟอนต์ เปลี่ยนรูป และอื่นๆ ตามชอบ!
เดี๋ยวนี้เว็บใหม่ๆ นิยมใช้ XML กับ RSS กันแพร่หลาย อาจจะเป็นโค้ดที่อ่านยากเข้าใจยากสักหน่อย (พูดง่ายๆ คือไม่เป็นภาษามนุษย์) โดยเฉพาะตอนเปิดไฟล์ source code ของ HTML ดู แต่ก็มีข้อเด่นข้อดีของตัวเอง
หาสมุดสักเล่มไว้ใช้จดโค้ดทั้งหมด เผื่อหลงลืมตรงไหนจะได้เปิดสมุดเตือนความจำได้ทันที หรือจะพริ้นท์บทความนี้เอาไว้อ่านอ้างอิงซะเลย
พยายามเขียนโค้ดให้เนี้ยบ เป็นระเบียบ จะได้อ่านสะดวกทั้งคุณและคนอื่นๆ ลองใช้  ดู ถ้าจะพิมพ์ความคิดเห็นแทรกไว้ในโค้ด HTML ความเห็นที่ว่าจะได้ไม่ไปโผล่ในหน้าเว็บ มีเฉพาะในโค้ด
markup tag ในโค้ด HTML จะพิมพ์ตัวเล็กหรือตัวใหญ่ก็ได้ แต่แนะนำให้พิมพ์เป็นตัวเล็กทั้งหมด (เหมือนตัวอย่างในบทความนี้) เพื่อให้สวยงาม เป็นระเบียบ ได้มาตรฐาน และใช้กับ XHTML ได้ ^{[1]Xแหล่งข้อมูลอ้างอิง}

โฆษณา

คำเตือน

2 - 3 ปีที่ผ่านมา มีหลายแท็กเหมือนกันที่คนเขาเลิกใช้ไป แล้วมีแท็กใหม่มาแทนที่ โดยบางแท็กก็ทำหน้าที่เดิม แต่บางแท็กก็แสดงผลต่างออกไป อันนี้ต้องลองศึกษาดู
ถ้าสนใจอยาก validate เว็บของตัวเอง หรือเอาไปทดสอบว่าผ่านเกณฑ์ไหม ให้เข้าเว็บ W3 แล้วศึกษาโค้ด HTML ที่ถูกต้องและอัพเดทซะ! อย่าลืมว่าโค้ด HTML ที่คนนิยมใช้เปลี่ยนแปลงได้ตามเวลา (เหมือนเทคโนโลยีทั่วไป) บางแท็กเลยมักถูกแทนที่ด้วยแท็กอื่นๆ ที่ใหม่กว่าและแสดงผลได้ดีกว่าในเบราว์เซอร์รุ่นใหม่ๆ

โฆษณา

สิ่งของที่ใช้

โปรแกรม text editor เช่น Notepad (Windows) และ TextEdit (Mac)
กระดาษ หรือสมุดโน้ต (ไม่จำเป็น)
โปรแกรมที่ใช้แก้ไขโค้ด HTML ได้ เช่น Notepad++ (Windows) หรือ TextWrangler (Mac) (ไม่จำเป็น)