เรียนรู้ HTML ผ่าน Youtube จาก Thenewboston
ในวีดีโอนี้จะเห็นหน้าเว็บเพจของ Yahoo และโค้ดที่อยู่เบื้องหลังเว็บเพจที่สวยงามนี้ โดยส่วนใหญ่ของโค้ดที่ใช้เขียนคือ HTML ใช้เขียนกำกับเนื้อหา (Content) ที่ปรากฏอยู่บนหน้าเบราว์เซอร์ และบางส่วนเป็นโค้ด CSS ใช้สำหรับกำหนดรูปแบบและการจัดวางเนื้อหาบนหน้าเบราว์เซอร์
การเขียนโปรแกรมบนเว็บ ต้องอาศัยโปรแกรมพิมพ์เอกสาร เช่นในกรณีนี้ใช้Notepad++ เป็นโปรแกรมฟรีและดี มีคุณสมบัติหลายอย่างที่เหมาะสมในการเขียนโค้ดเว็บเพจ (และภาษาอื่นๆ ด้วย) สามารถดาวน์โหลดโปรแกรมจากเว็บไซต์ Notepad++ เลือก Notepad++ Installer แล้วติดตั้งโปรแกรม (ส่วนใหญ่กด Next, สุดท้าย กด Finish)
เริ่มต้นในวีดีโอตอนนี้ด้วยการเปิดไฟล์ใหม่ใน โปรแกรม Notepad++ เริ่มเขียนเว็บเพจแรกด้วยภาษา HTML ซึ่งประกอบไปด้วยแทค (Tag) ต่างๆ ใช้กำกับรูปแบบเนื้อหาที่จะปรากฏในเบราว์เซอร์ โครงสร้างของ Tag มี 2 แบบ
- <ชื่อของ Tag> ข้อความ หรือ แทคอื่นๆ </ชื่อของ Tag> เช่น <p> Hello world </p> เป็นแทคพารากราฟ (paragraph) ใช้บอกลักษณะของข้อความว่าอยู่ในรูปแบบของบทความย่อหน้า
- <ชื่อของ Tag /> เช่น <br /> เป็นแทคบอกให้ขึ้นบรรทัดใหม่
แทคแรกของเว็บเพจ จะเริ่มด้วยแทค Doctype เป็นแทคบอกตัวเบราว์เซอร์ว่าเอกสารนี้เป็นชนิดอะไร เช่น <!doctype html> บอกว่าเอกสารนี้เป็นไฟล์ html
โครงสร้างหลักของเว็บเพจจะอยู่ภายในแทค html ซึ่งประกอบด้วย 2 ส่วนหลักๆ คือ แทค head เป็นส่วนบอกข้อมูลให้กับเบราว์เซอร์ ไม่เกี่ยวกับเนื้อหา เช่นชื่อ title ที่ปรากฏบนส่วนหัวของเบราว์เซอร์ อีกส่วนคือแทค body เป็นส่วนเนื้อหา ที่จะปรากฏอยู่ในพื้นตรงกลางของเบราว์เซอร์ รูปแบบโครงสร้างพื้นฐานของเว็บเพจทั่วไปมีดังนี้
<html>
<head> ข้อมูลสำหรับเบราว์เซอร์ </head>
<body> เนื้อหาของเว็บเพจ </body>
</html>
เมื่อทดลองเขียนเว็บเพจแรกแล้ว ก็ทำการบันทึก ในชื่อ index.html ชื่อนี้เป็นชื่อหลักของหน้าโฮมเพจ โดยปกติถ้าเราพิมพ์ชื่อเว็บไซต์ เช่น http://www.bbc.co.uk เท่านั้น ไฟล์ที่จะเปิดคือ index.html (บางครั้งอาจใช้นามสกุลอื่น ถ้าพัฒนาด้วยภาษาอื่น เช่น PHP ก็จะได้ไฟล์ index.php แทน)
ไฟล์ที่บันทึกไว้ที่เครื่องสามารถเปิดผ่านเบราว์เซอร์ได้ด้วย (สังเกตที่อยู่จะเป็น file:///c:/… ตำแหน่งที่อยู่ของไฟล์ในเครื่อง) ดังนั้นสามารถทดสอบดูได้ว่าหน้าตาเว็บเพจที่เขียนขึ้นมามีหน้าเป็นอย่างไร
คิดสร้างสรรค์ 