บทที่ 1 ทำความรู้จักกับ HTML

HTML คืออะไร

HTML (HyperText Markup Language) คือ ภาษามาตรฐานที่ใช้ในการสร้างเว็บเพจ เพื่อนำเสนอข้อมูลข่าวสารบนระบบเครือข่ายอินเทอร์เน็ต ที่เป็นลักษณะเหมือนใยแมงมุม ที่เชื่อมต่อกันทั่วโลก โครงสร้างการเขียนภาษานั้นจะอาศัยตัวกำกับเรียกว่า แท็ก (Tag) หรือป้ายระบุการแสดงผล เป็นตัวควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่นที่แสดงผลผ่านทาง โปรแกรมเว็บเบราว์เซอร์ (Web Browser) เอกสารเว็บเพจจะมีนามสกุลเป็น .htm หรือ .html

Web browser คือ

โปรแกรมสำหรับเรียกดูเว็บเพจ โดยจะแปลคำสั่ง HTML แล้วประมวลผลเพื่อแสดงผลออกมาเป็น Web page เช่น

1.Internet Explorer (IE)

2.Mozilla Firefox, Safari

3.Opera

4.Netscape Navigator

เป็นต้น

Internet คือ

ระบบเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลก เกิดจากการเชื่อมโยงของคอมพิวเตอร์หลายล้านเครื่องที่กระจายอยู่ตามที่ต่างๆ ในโลก อินเตอร์เน็ตเป็นแหล่งที่รวมของข้อมูลมหาศาล และเป็นช่องทางติดต่อสื่อสารเพื่อแลกเปลี่ยนข้อมูลที่สะดวกและรวดเร็ว บริการยอดนิยมบนอินเตอร์เน็ต ได้แก่ เว็บเพจ (www) อีเมล์ และ Social network ต่าง ๆ เป็นต้น

www

www (World Wide Web) เป็นบริการข้อมูล โดยข้อมูลของ www จะอยู่ในรูปเอกสารแบบ Hypertext ซึ่งภายในเอกสารจะมีจุดเชื่อมโยง (link) ไปยังเอกสารอื่นๆ ที่เกี่ยวข้อง เอกสารต่างๆ ที่เชื่อมโยงกันเหมือนใยแมงมุม เป็นที่มาของคำว่า Web.

HTTP

เป็นโปรโตคอลสำหรับเปิดดูข้อมูลจาก www เรียกใช้งานได้โดยระบุ http:// และตามด้วย URL ในช่องกรอก Address ด้านบนของโปรแกรมเว็บบราวเซอร์

URL

URL (Uniform Resource Locator) คือ ข้อความที่บอกตำแหน่งของข้อมูลใน Internet ไม่ว่าจะเป็น Web page, File ประเภทต่างๆ เช่น รูปภาพ เสียง

Domain name

ชื่อเว็บไซต์ (ที่ไม่มีการซ้ำกันกับเว็บไซต์อื่นๆ) เช่น google.com, enjoyday.net ประเภทของโดเมน แบ่งได้ 2 ประเภท คือ โดเมนระดับ 2 และ โดเมนระดับ 3

1.โดเมนระดับ 2 ได้แก่

.com กลุ่มองค์กรการค้า
.edu กลุ่มการศึกษา
.gov กลุ่มองค์กรรัฐบาล
.mit กลุ่มองค์กรการทหาร
.net กลุ่มองค์กรเครือข่าย
.org กลุ่มองค์กรอื่น

2.โดเมนระดับ 3 โดนเมนลักษณะนี้จะประกอบด้วยชื่อโดเมน ตัวย่อที่อยู่หลังเครื่องหมายจุดใช้ระบบประเภทองค์กร และตัวย่อประเทศนั้น ๆ เช่น most.go.th ,nu.ac.th

.go หน่วยงานรัฐบาล
.ac สถาบันการศึกษา
.co องค์กรธุรกิจ
.or องค์กรอื่น ๆ

Webpage

หน้าเอกสารของบริการ www ที่อยู่ในรูปแบบ HTML ภายในประกอบด้วยข้อความ ภาพ ลิงค์ Web page แต่ละหน้าจะเชื่อมโยงกัน เพื่อให้เราเรียกดูเอกสารหน้าอื่นๆ ที่เกี่ยวข้องได้อย่างสะดวก ไม่ต้องระบุ URL เองทุกครั้ง

Homepage

Web page หน้าแรกที่ผู้ใช้เห็นเมื่อเข้ามายัง Web site มักถูกออกแบบให้โดดเด่น น่าสนใจ และมีลิงค์เชื่อมโยงไปเว็บเพจหน้าอื่นๆ

Website

คือ Web page หลายๆ หน้าที่มีเนื้อหาเกี่ยวข้องกัน ประกอบเข้าด้วยกัน

ตัวอย่าง

ตัวอย่าง code ภาษา HTML เพื่อสร้างหน้าเว็บเพจ

<html>
<body>
<h1>My website</h1>
<p>นี่เป็นการเขียนเว็บเพจครั้งแรกของฉัน</p>
</body>
</html>

เว็บเพจ

เว็บเพจ คือ เอกสารที่ใช้ในการเผยแพร่ข้อมูลข่าวสาร ซึ่งประกอบด้วย ข้อความ ภาพ เสียง และภาพยนตร์ผ่านทางเครือข่ายอินเทอร์เน็ต เว็บเพราะจะถูกนำมาใช้ประโยชน์ในการประชาสัมพันธ์และนำเสนอข้อมูลความรู้ต่างๆ

ประโยชน์ของเว็บเพจ

เนื่องจากเว็บเพจสามารถเผยแพร่ข้อมูลได้ด้วยข้อความ ภาพ เสียง แลพภาพยนตร์ ดังนั้นเราจึงพบเห็นการนำเว็บเพจไปสร้างและพัฒนา เพื่อนำเสนอข้อมูล และข่าวสารในรูปแบบต่างๆ ได้อย่างมากมายดังนี้

1. ข่าวและเหตุการณ์ในปัจจุบัน

2.ข้อมูลความรู้และห้องสมุด

3.ความบันเทิง

4.การเงิน การลงทุน

5.ซื้อ-ขายสินค้า และบริการ

เว็บเพจทำงานได้อย่างไร

นอกจากเราจะทราบประโยชน์ของเว็บเพจว่าทำอะไรได้บ้างแล้ว สิ่งที่สำคัญก่อนที่เราจะไปสร้างเว้บเพจ นั่นก็คือ การเข้าใจการทำงาน และแสดงผลของเว็บเพจกัน เพื่อเราจะสามารถวางแผนการสร้างเว็บเพจได้อย่างถูกต้อง

จากรูปจะเห็นการทำงานเป็นขั้นตอนต่างๆ ดังนี้

ขั้นตอนที่ 1 ผู้ใช้พิมพ์ตำแหน่งเว็บเพจในโปรแกรมบราวเซอร์ก็จะมีการร้องขอข้อมูลไฟล์ เว็บเพจหน้านั้นไป ยังเครื่องเซิร์ฟเวอร์ (Server) คือ เครื่องที่เก็บและเผยแพร่เว็บเพจ

ขั้นตอนที่ 2 ฝั่นเซิร์ฟเวอร์จะทำการค้นหาไฟล์เว็บเพจตัวที่ถูกร้องขอ

ขั้นตอนที่ 3 เว็บเซิร์ฟเวอร์ส่งข้อมูลไปยังเครื่องผู้ใช้แสดงผลบนบราวเซอร์

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

โดเมนเนม (Domain Name)

การติดต่อกันบนอินเทอร์เน็ตนั้นจะใช้ไอพีแอดเดรสในการทำงาน แต่เป็นตัวเลขที่ยาวทำให้ผู้ใช้จำยาก จึงได้มีการใช้โดเมนเนม (Domain Name) หรืออินเทอร์เน็ตแอดเดรส (Internet Address) มาใช้ ซึ่งเป็นการนำตัวอักษรที่จำง่ายมาใช้แทนไอพีแอดเดรส โดเมนจะไม่ซ้ำกัน และมักถูกตั้งให้สอดคล้องกับชื่อบริษท หรือองค์กรผู้เป็นเจ้าของ เพื่อสะดวกในการจดจำชื่อ เช่น บริษัท ซัคเซส มีเดียมีโดเมนเนม successmedia.com

206.215.211.28 successmedia.com

(ไอพีแอดเดรส) (โดเมนเนม)

ศึกษาด้วยวีดีโอ

ทำความรู้จักกับ HTML

วีดีโอนี้เกี่ยวกับเนื้อหาเรื่อง HTML เช่น โปรแกรมที่ใช่สำหรับการเขียน HTML แนะนำการเปิดโปรแกรม และทำความรู้จักกับคำสั่งและโครงสร้างของ HTML

คำถาม : จากที่ได้ชมวีดีโอนี้แล้ว โครงสร้าง HTML มีอะไรบ้าง

ขอขอบคุณ : ช่อง youtube CodingThailand.com

คำสั่ง HTML

วีดีโอนี้เกี่ยวกับเนื้อหาเรื่อง HTML ทำความรู้จักกับคำสั่ง HTML และโครงสร้างของ HTML

คำถาม : จากที่ได้ชมวีดีโอนี้แล้ว บอกคำสั่งที่ตัวเราจำได้สัก 3 คำสั่ง