เรียนรู้และเข้าใจ HTML อย่างง่าย วราวรรณ บัวคำ ศูนย์เอกสารประเทศไทย สถาบันวิทยบริการ จุฬาลงกรณ์มหาวิทยาลัย
HTML (Hyper Text Markup Language) HTML เป็นภาษาคอมพิวเตอร์เพื่อใช้สร้างเอกสารแสดงข้อมูลบนเว็บ โดยมี Tag เป็นคำสั่งให้ Web Browser ทำงาน HTML ได้รวมเอาคุณสมบัติของความเป็นไฮเปอร์เท็กซ์ (Hyper Text) เข้าไว้ด้วยกัน ซึ่งมีความสามารถในการเชื่อมโยง (Link) ไปยังที่ต่างๆ ได้ และเป็นหัวใจหลักประการหนึ่งของ HTML HTML รองรับระบบมัลติมีเดีย (Multimedia) ได้ นั่นคือสิ่งที่ ทำให้เว็บมีความแตกต่างจากสื่ออื่นๆ
เครื่องมือที่ต้องใช้ Text Editor เช่น Notepad, Wordpad Web Browser เช่น Netscape Navigator หรือ Internet Explorer
องค์ประกอบ ข้อมูล ได้แก่ ตัวอักษร ภาพ เสียง ฯลฯ คำสั่ง (Tags)่ Comment เพื่อบันทึก / อธิบายบางอย่าง
รูปแบบพื้นฐานของ HTML File <HEAD> <TITLE> ข้อความที่จะให้แสดงบน Title Bar และ Bookmark </TITLE> </HEAD> <BODY> ตัวอักษร ไฮเปอร์ลิงก์ ภาพกราฟิก แบบฟอร์ม ตาราง ฯลฯ </BODY> </HTML>
การตั้งหัวข้อ (Heading) กำหนดขนาดตัวอักษรได้ 6 ระดับ (ตั้งแต่ H1-H6) <H1> หัวข้อระดับ 1</H1> หัวข้อระดับ 1
การตั้งหัวข้อ (Heading) กำหนดขนาดตัวอักษรได้ 6 ระดับ (ตั้งแต่ H1-H6) <H6> หัวข้อระดับ 6</H6> หัวข้อระดับ 6
การกำหนดสีและขนาดตัวอักษร กำหนดขนาดตัวอักษรได้ 7 ระดับ (ตั้งแต่ 1 ถึง 7) เพิ่ม / ลดขนาดได้ ตั้งแต่ -4 ถึง + 4 <FONT FACE=AngsanaUpc COLOR=RED SIZE=5 >อักษรสีแดง ขนาด 5</FONT> อักษรสีแดง ขนาด 5
<B> ตัวหนา (Bold)</B>
<I> ตัวเอียง (Italic) </I>
ตัวอักษรกะพริบ (Blink) ใช้ได้เฉพาะ Netscape Navigator เท่านั้น <BLINK> ตัวอักษรกะพริบ (Blink)</BLINK> ตัวอักษรกะพริบ (Blink)
ตัวอักษรวิ่ง (Marquee) ใช้ได้เฉพาะ Internet Explorer เท่านั้น <MARQUEE> ตัวอักษรวิ่ง (Marquee)</MARQUEE> ตัวอักษรวิ่ง (Marquee)
ขีดเส้นใต้ตัวอักษร (Underline) <U> ขีดเส้นใต้ตัวอักษร (Underline) </U> ขีดเส้นใต้ตัวอักษร (Underline)
ขึ้นย่อหน้าใหม่ (Paragraph) เว้น 1 บรรทัดก่อนขึ้นย่อหน้าใหม่เสมอ มี tag ปิดหรือไม่ก็ได้ <P>ขึ้นย่อหน้าใหม่ (Paragraph)</P> ขึ้นย่อหน้าใหม่ (Paragraph)
บรรทัดที่ 1<BR>ขึ้นบรรทัดใหม่ ไม่มี tag ปิด (เป็น Empty Tag) บรรทัดที่ 1<BR>ขึ้นบรรทัดใหม่ บรรทัดที่ 1 ขึ้นบรรทัดใหม่
แสดงข้อความเป็นบล็อก เว้นระยะขอบซ้าย / ขวา ด้านละเท่ากัน เว้นบรรทัดบน / ล่าง ด้าน <BLOCKQUOTE>แสดงข้อความเป็นบล็อก </BLOCKQUOTE> โปรดติดตามตอนต่อไป
จัดกึ่งกลางหน้า (Center) <CENTER> จัดกึ่งกลางหน้า (Center) </CENTER> จัดกึ่งกลางหน้า (Center)
ขีดเส้นคั่นแนวนอน (Horizontal Line) ไม่มี tag ปิด (เป็น Empty Tag) ขีดเส้นคั่นแนวนอน<HR> ขีดเส้นคั่นแนวนอน
<IMG SRC=art.jpg> การใส่รูปภาพ (Image) <IMG SRC=art.jpg>
การเชื่อมโยงเอกสาร (Link) การเชื่อมโยงภายใน Web Page การเชื่อมโยงระหว่าง Web Page หรือ ระหว่าง Web Site <A NAME=ชื่อที่ใช้อ้างอิง>จุดที่จะ Link ไป</A> <A HREF=#ชื่อที่ใช้อ้างอิง หรือ URL>ข้อความที่จะใช้เป็น Link</A> รอก่อนนะคะ
ขอขอบคุณ Http://www.Kidsquare.com จิตเกษม พัฒนาศิริ และคนอื่นๆ. เริ่มสร้างโฮมเพจด้วย HTML. กรุงเทพมหานคร : วิตตี้กรุ๊ป, 2539. ปิยวิท เจนกิจจาไพบูลย์. เรียนรู้การสร้างโฮมเพจด้วย HTML. กรุงเทพมหานคร : วิศาสตร์, 2540. มนู แก้วแหวน. การสร้างเว็บเพจด้วย HTML 4. ฉบับเร่งด่วน. กรุงเทพมหานคร : เดอะไลบรารีพับลิชชิ่ง, 2541.
แหล่งเพิ่มพูนความรู้ http://come.to/learn-html http://members.xoom.com/htmleasy http://www.med.cmu.ac.th/webs/ http://www.siambuilder.com