HTML คืออะไร?
- HTML ย่อมาจาก “Hyper Text Markup Language”
- HTML เป็น Markup Language ชนิดหนึ่ง
- Markup Language คือภาษาที่ใช้ Tags ในการอธิบายความหมายของเนื้อหา
- HTML เป็นภาษาที่ใช้ในการสร้างเว็บเพจ
- เว็บเพจคือหน้าแต่ละหน้าของเว็บไซต์
HTML Tags
- HTML ใช้ Tags ในการอธิบายความหมายของเนื้อหา
- ในการสร้าง HTML Tags ให้เราครอบ “ชื่อ Tag” ด้วยเครื่องหมาย ‘<>’ แบบนี้ <ชื่อ Tag>
- โดยปกติแล้ว เราจะใช้ HTML Tags เป็นคู่ เช่น <header> กับ </header> เนื้อหาอะไรก็ตามที่อยู่ระหว่าง HTML tags คู่นี้จะถือเป็น “header”
- เราจะเรียก HTML Tag ตัวแรกว่า “Tag เปิด” และจะเรียก HTML Tag ตัวหลังว่า “Tag ปิด”
- “Tag ปิด” จะมีหน้าตาคล้ายกับ “Tag เปิด” แต่จะมี ‘/’ เพิ่มมาที่หน้า “ชื่อ Tag”
- อย่างไรก็ตาม HTML Tag บางตัวจะมีแค่ “Tag เปิด” เท่านั้น เช่น <br> ที่หมายถึงการขึ้นบรรทัดใหม่ จะเห็นว่า <br> มีความหมายสมบูรณ์ในตัวอยู่แล้ว ไม่ต้องเอามันไปครอบเนื้อหาอะไรอีก
HTML Elements
- เราจะเรียก “Tag เปิด”, เนื้อหาที่อยู่ภายใน และ “Tag ปิด” รวม 3 อย่างนี้ว่า “HTML Elements”
- “HTML Elements” ก็คือสิ่งที่ “HTML Tag” สร้างขึ้นมา ซึ่งมันก็คือเนื้อหาที่มีความหมายนั่นเอง
HTML Attributes
- HTML Elements ต่างๆ สามารถใส่ “Attributes(ลักษณะ)” เพิ่มได้ โดยเราจะใส่ Attributes หากต้องการระบุลักษณะเพิ่มเติมเกี่ยวกับ HTML Elements นั้นๆ
- Attributes ของ HTML Elements จะใส่ไว้ที่ “Tag เปิด” เสมอ
- Attributes จะประกอบไปด้วย “ชื่อของ Attribute” และ “ค่าของ Attribute”
- Attributes ของแต่ละ HTML Elements จะแตกต่างกันออกไป
- ลองดูตัวอย่างนี้ <คน เพศ=”ชาย” อายุ=”56″>Steve Jobs</คน> จะได้ว่า HTML Elements นี้มีชื่อว่า “คน” และมี Attributes เป็น “เพศ” และ “อายุ” จะเห็นว่า Attributes ช่วยทำให้ความหมายของ HTML Elements มีความชัดเจนยิ่งขึ้น
โครงสร้างของเว็บเพจ
มาถึงตรงนี้ เรารู้แล้วว่าเราจะต้องใช้ HTML ในการสร้างเว็บเพจ ทีนี้เราลองมาดูกันว่าโครงสร้างของเว็บเพจนั้นประกอบไปด้วยอะไรบ้าง
- <!DOCTYPE html>ส่วนนี้จะเป็นการระบุ version ของ html ที่เราจะเขียน โดยเราจะต้องใส่ส่วนนี้เอาไว้ที่บนสุดของเว็บเพจเสมอ
- <html>ส่วนนี้จะอยู่ต่อจาก <!DOCTYPE html> เราจะต้องใส่ HTML Elements ต่างๆ ไว้ในส่วนนี้
- <head>ส่วนนี้จะอยู่ภายใน <html> อีกที เราจะต้องใส่ HTML Elements ที่ใช้บอกรายละเอียดเพิ่มเติมเกี่ยวกับเว็บเพจไว้ในส่วนนี้
- <body>ส่วนนี้จะอยู่ต่อจาก <head> เราจะต้องใส่ HTML Elements ที่เราอยากให้มันแสดงผลออกมาไว้ในส่วนนี้
Workshop – สร้างเว็บเพจแรกของคุณ!
ตอนนี้เรารู้แล้วว่าโครงสร้างของเว็บเพจประกอบด้วยอะไรบ้าง ให้เราจำโครงสร้างนี้เอาไว้ให้ดี เพราะถ้าเราจำได้แล้ว สิ่งที่เหลือก็แค่เลือก HTML Elements มาใส่ในช่อง <head> และ <body> เท่านั้นเอง ลองมาดูสิว่า HTML Elements ที่เราต้องใช้บ่อยๆ มีอะไรบ้าง
Title
อย่างแรกเรามาดูการใส่ Title ของเว็บเพจกันเลยครับ ให้เราครอบชื่อ Title ของเราด้วย <title></title> แล้วเอาไปใส่ไว้ใน <head></head> ลองดูตัวอย่างนี้ครับ
เมื่อลองพรีวิวดู เนื้อหาที่เราใส่ไปทั้งในส่วนของ <title> และในส่วนของ <body> กลับอ่านไม่ออก ทั้งนี้เป็นเพราะเรายังไม่ได้กำหนดการเข้ารหัสของตัวอักษรให้เป็นแบบ UTF-8 นั่นเอง
Meta
ในการทำให้ web browsers อ่านภาษาไทยออก เราจะต้องกำหนด “Character Sets” ให้เป็น UTF-8 ก่อน ให้เราใส่ “<meta charset=”UTF-8″ >” เข้าไปใน <head></head> แบบนี้ครับ
เมื่อลองพรีวิวดูอีกครั้ง เราก็จะพบว่าภาษาไทยสามารถแสดงผลได้อย่างถูกต้องแล้ว
Headings
ทีนี้เราลองมาดูการใส่ “heading (หัวข้อ)” ให้กับเนื้อหากันบ้างครับ heading นั้นจะแบ่งระดับความสำคัญออกเป็น 6 ระดับ ด้วยกัน ได้แก่ <h1>, <h2>, <h3> ไล่ไปจนถึง <h6> ให้เราลองเอา Tags เหล่านี้ไปครอบหัวข้อของเราดูครับ
เมื่อลองพรีวิวดู เราจะเห็นว่าหัวข้อของเรามีขนาดที่แตกต่างกัน โดยหัวข้อที่ครอบด้วย <h1> นั้นจะมีขนาดใหญ่สุด ส่วนหัวข้ออื่นๆ ก็จะมีขนาดเล็กลงมาเรื่อยๆ จนมาเล็กสุดที่หัวข้อที่ครอบด้วย <h6> ครับ
Paragraphs
เมื่อได้หัวข้อแล้ว เรามาต่อกันที่การสร้าง “Paragraph (ย่อหน้า)” ครับ ให้เราครอบเนื้อหาที่เป็น Paragraph ด้วย <p></p> ลองดูตัวอย่างนี้
เมื่อลองพรีวิวดู จะเห็นว่าการครอบเนื้อหาด้วย <p></p> ทำให้ช่องว่างด้านบนและด้านล่างของเนื้อหาเพิ่มขึ้น ซึ่งจะเหมาะมากในการใช้แบ่งเนื้อหาออกเป็นพารากราฟ เพื่อให้อ่านได้ง่ายขึ้น
Links
สิ่งที่ขาดไม่ได้เลยสำหรับการทำเว็บก็คือการสร้าง “Link” นั่นเองครับ โดยเราจะใช้ <a></a> มาครอบข้อความที่ต้องการให้เป็น Link แล้วใส่ Attribute ที่ชื่อว่า “href” เพิ่มเข้าไปที่ <a> แล้วระบุค่าของ “href” ให้เป็น “URL” ที่เราต้องการจะให้ Link ไป ลองดูตัวอย่างนี้ครับ
เมื่อลองพรีวิวดู เราจะเห็นว่าข้อความ “SiamHTML.com” กลายเป็น Link ไปแล้วครับ เมื่อลองกดดู มันก็จะ Link ไปยัง “URL” ที่เราได้กำหนดไว้ด้วย Attribute “href” ครับ
Images
สิ่งสำคัญอีกอย่างหนึ่งในการทำเว็บก็คือ “รูปภาพ” ครับ ในการใส่รูปในหน้าเว็บ เราจะใช้ “<img>” ซึ่งเป็น HTML Tag ที่มีแต่ “Tag เปิด” เพียงอย่างเดียว ส่วนรายละเอียดต่างๆ ไม่ว่าจะเป็น URL รวมไปถึงความกว้างและความสูงของรูป ให้เรากำหนดโดยใช้ Attributes ครับ ในส่วนของ URL ให้เราใช้ “src” ส่วนความกว้างและความสูงของรูปให้เราใช้ “width” และ “height” ตามลำดับ ลองดูตัวอย่างนี้ครับ
เมื่อลองพรีวิวดู เราก็จะเห็นรูปที่เราใส่ไปแล้วล่ะครับ
ทำเว็บเป็นแล้ว แต่ทำไมไม่สวยเลย?
มาถึงตอนนี้ คาดว่าหลายๆ คน คงจะบ่นว่าทำไมเว็บของเราไม่เห็นสวยเหมือนชาวบ้านเลย ไม่ต้องน้อยใจไปครับ สำหรับวันแรกของการทำเว็บไซต์ ได้ขนาดนี้ก็ถือว่าโอเคมากๆ แล้ว ในวันพรุ่งนี้ เราจะมาพูดถึงการตกแต่งหน้าเว็บให้สวยงามโดยใช้ CSS กัน อย่าลืมติดตามให้ได้นะครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น