[วันที่ 3] HTML5 หน้าแรก(กว่าจะขึ้นแรกได้ - -")
posted on 17 Feb 2012 00:29 by simplybenz in HTML5 directory Tech, Diaryอาาร์หายไปนาน...(บอกแล้วว่าเดี๋ยวมันก็ดอง = =")
เอาเถอะแต่ยังไงก็กลับมาแล้วอย่าอะไรกันให้มากความเข้าเรื่องเลยดีเกว๋อ
หลังจากคราวที่แล้วที่แนะนำ text editor สำหรับใช้เขียน HTML5 กันแล้ว หวังว่าทุกคนคงเลือกกันได้แล้ว
และถ้าไม่ลืมกัน...ซึ่งจริงๆ ผมก็เกือบลืมไปแล้ว ... (อ้าวไอ้นี่) สำหรับ tag ตัวแรกของสำหรับใช้ในการเขียน HTML5 คือ
<!doctype html>
สำหรับ tag <!doctype html>ตัวนี้ที่เคยบอกว่ามันใช้ระบุชนิดของเอกสารซึ่งรวมไปถึง version ของ HTML ที่เรากำลังเขียนอยู่ด้วย
เอาหล่ะเรามาใส่ที่เหลือต่อกันเต๊อะ
<!doctype html>
<html>
<head>
<title>หน้าแรกของเว็บฉัน</title>
<meta charset="UTF-8" />
</head>
<body>
สวัสดีจ๊ะชาวโลก
</body>
</html>
คร่าวๆ รูปแบบการเขียน HTML คือ มีเปิดย่อมมีปิด อย่างเช่น เปิดด้วย <html> ย่อมต้องปิดด้วย </html>
อ่ะ มาถึงตรงนี้บางคนอาจจะสงสัยว่าอ้าวแล้วทำไม <!doctyle html> ไม่เห็นต้องมีปิดอะไรเลย
คือผมก็จะบอกว่า ก็เค้าให้ใช้กันมาอย่างงี้ก็ใช้ไปเถอะครัฟ!! .......... แหมมมมม แบบนั้นมันก็เกรียนเกิ๊น
จริงๆที่ <!doctype> ไม่ต้องมี tag ปิดเป็นเพราะว่ามันไม่ใช่ HTML ครับตัว tag <!doctype> เองคือ SGML หรือ Standard Generalized Markup Language แปลเป็นไทยง่ายๆ คือ ภาษาที่ใช้สำหรับบอกมาตรฐานของภาษา markup ในเอกสาร หรือ tag ที่ใช้เขียนในเอกสาร
จุดสังเกตอีกจุดที่หากสังเกตดีๆ ก็จะรู้ว่า มันไม่ใช่ HTML คือมันถูกวางตำแหน่งไว้ก่อน tag <html> อีก นะฮ๊าร์ฟ (เออง่ายดีหว่ะ = =")
เอาหละ ต่อมาก็คือ tag <html>......</html> ไม่ต้องบอกก็คงรู้ว่า tag นี้เอาไว้ระบุว่าต่อจากนี้ในตั้งแต่เปิด ไปจนถึงปิด เนื้อหาระหว่างนี้คือภาษา HTML นะครัฟ
tag ต่อไปขอพูดไปพร้อมกันเลยนะครัฟ คือ <head>....</head> กับ <body>...</body>
ไม่ต้องบอกมั้งว่าอะไรอยู่บนอะไรอยู่ล่าง....
ซึ่งคือถ้าไม่ได้ทำหกสูงเนี้ยทุกคนก็ควรจะเข้าใจว่า หัว ก็จะอยู่บนและ ตัว ก็จะอยู่ล่างนะฮ๊าร์ฟ
สำหรับ tag <head> นั่นเอาไว้ใส่ tag ที่จะบอกหัวของ HTML นั้นฮะ เหมือนหัวของเอกสารที่จะบอก
ว่าเอกสารแผ่นนั้นมีรายละเอียดเกี่ยวกับอะไร ชื่อเรื่องอะไรบ้าง
ยกตัวอย่างเช่น <title>, <meta> อะไรแบบนี้เป็นต้นซึ่งจริงๆ ยังมีอีกหลายตัวครับ
เดี๋ยวค่อยๆ เพิ่มให้ดูใน วันถัดๆ ไปนะฮะ
ส่วน tag ถัดมาคือ <body> ตัวนี้เอาไว้สำหรับบอกว่าตัวเนื้อหาต่างๆ ของหน้า HTML นั่นมีอะไรมั้งครัฟ
มีอะไรจะนำเสนอต่างๆ นานา ที่อยากให้ไปโผล่ในเว็บ ก็ใส่ไว้ใน tag นี้โลด
เอาหล่ะเหลืออีก 2 tag ที่ยังไม่ได้อธิบายคือ <title>...</title> กับ <meta>...</meta>
ที่อยู่ระหว่าง tag <head>...</head> นะครัฟ
tag <title> ประโยชน์ของ tag นี้มีด้วยกัลล์ 3 อย่างตามเค้าว่าไว้คือ หนึ่งเอาไว้โชว์ในตัว tool bar ของ web browser ว่าเว็บนี้ชื่อะไรมีเนื้อหาเกี่ยวกับอะไร... สองคือเวลาที่คนกด fav เว็บไซต์ของเราไปใส่ไว้ใน bookmark ของเค้าตัวนี้ก็จะไปโผล่ในนั้นด้วย ส่วนประโยชน์อันดับสุดท้ายอันดับที่สาม ก็คือเวลา search engine (พวก google, yahoo) ค้นหาเว็บไซต์ที่เราทำก็จะเอาส่วนนี้ไปโชว์หล่ะครับ
ประโยชน์อีกอย่างนึงคือเวลา search engine ค้นหาต่างๆ ก็ใช้ข้อมูลในส่วน <title> นี่ไปเป็นส่วนประกอบในการหาด้วยฮะ
ถัดมาคือ <meta> ตัวนี้เป็น tag ที่ผมเคยคิดว่าแง่งไม่มีประโยชน์อะไรเลยแต่จริงๆ
ประโยชน์ของมันมีอยู่แยะเหมือนกันฮะ คือ ไอ้ตัว tag <meta> เนี้ยมันเป็น ข้อมูลทีเอาไว้ให้ web browser (IE, Firefox, Chrome) รู้ว่า ในเว็บเราเนี้ย เกี่ยวกับอะไรบ้าง
จริงๆ มันยังทำอะไรได้อีกมากมายนอกจากตัว charset อีกนะ....ห๊ะ เริ่มงงม่ะ...งง
อ่ะไม่เป็นตอนนี้เอาแค่นี้ก่อนว่า ตัว
<meta charset="utf-8" />
คือ <meta> ที่มี attribute ที่ชื่อ charset ตัวเนี้ยมีเอาไว้บอกว่า
ไอ้หน้า HTML ของเราเนี้ยจะต้องใช้การถอดรหัสแบบไหนในการเปิดซึ่งในที่นี่ก็คือ utf-8 นั่นเองครัฟ
ซึ่งตัว charset ตัวนี้เป็นสิ่งที่มาใหม่ใน HTML5 เพราะก่อนหน้านี้ถ้าใครเคยเขียน
จะรู้ว่าการระบุไอ้ตัว charset เนี้ย เราเขียนกันถึงขนาดนี้
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
โฮฮฮฮ โลกของ HTML เวอร์ชั่นก่อนหน้านี้มันช่างโหดร้าย
เอาหล่ะลองพิมพ์ตามตัว code เต็มๆ ด้านบนลงใน web editor แล้วก็ลอง save เป็น .html แล้วลองเอาไปเปิดใน web browser กันดูได้เลยจ๊ะ
ใครมีอะไรสงสัยถามไว้ได้เลย...ซึ่งจะตอบได้รึเปล่านั้นก็อีกเรื่อง (อ้าวเฮ้ย = =")
และถ้าตอบไม่ได้ก็จะพยายามจะไปค้นหาคำตอบมาให้ละกัน
edit @ 22 Feb 2012 19:48:23 by เบนซ์เอง
Tags: first page, html511 Comments
