HTML 1

เรียนรู้ HTML ผ่าน Youtube จาก Thenewboston

ในวีดีโอนี้จะเห็นหน้าเว็บเพจของ Yahoo และโค้ดที่อยู่เบื้องหลังเว็บเพจที่สวยงามนี้ โดยส่วนใหญ่ของโค้ดที่ใช้เขียนคือ HTML ใช้เขียนกำกับเนื้อหา (Content) ที่ปรากฏอยู่บนหน้าเบราว์เซอร์ และบางส่วนเป็นโค้ด CSS ใช้สำหรับกำหนดรูปแบบและการจัดวางเนื้อหาบนหน้าเบราว์เซอร์

การเขียนโปรแกรมบนเว็บ ต้องอาศัยโปรแกรมพิมพ์เอกสาร เช่นในกรณีนี้ใช้Notepad++ เป็นโปรแกรมฟรีและดี มีคุณสมบัติหลายอย่างที่เหมาะสมในการเขียนโค้ดเว็บเพจ (และภาษาอื่นๆ ด้วย) สามารถดาวน์โหลดโปรแกรมจากเว็บไซต์ Notepad++ เลือก Notepad++ Installer แล้วติดตั้งโปรแกรม (ส่วนใหญ่กด Next, สุดท้าย กด Finish)

เริ่มต้นในวีดีโอตอนนี้ด้วยการเปิดไฟล์ใหม่ใน โปรแกรม Notepad++  เริ่มเขียนเว็บเพจแรกด้วยภาษา HTML ซึ่งประกอบไปด้วยแทค (Tag) ต่างๆ ใช้กำกับรูปแบบเนื้อหาที่จะปรากฏในเบราว์เซอร์ โครงสร้างของ Tag มี 2 แบบ

  1. <ชื่อของ Tag> ข้อความ หรือ แทคอื่นๆ </ชื่อของ Tag> เช่น <p> Hello world </p> เป็นแทคพารากราฟ (paragraph) ใช้บอกลักษณะของข้อความว่าอยู่ในรูปแบบของบทความย่อหน้า
  2. <ชื่อของ 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:/… ตำแหน่งที่อยู่ของไฟล์ในเครื่อง) ดังนั้นสามารถทดสอบดูได้ว่าหน้าตาเว็บเพจที่เขียนขึ้นมามีหน้าเป็นอย่างไร

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s