อินเทอร์เน็ตทำงานอย่างไร ตั้งแต่ TCP/IP, IP address, port, DNS ไปจนถึง WWW และ URL แล้วต่อด้วยภาษา HTML ตั้งแต่โครงสร้างเอกสาร กฎของ tag ไปจนถึง heading, link, list, รูปภาพ, character entity และตาราง
อินเทอร์เน็ต (Internet) คือระบบเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลก คอมพิวเตอร์จำนวนมหาศาลที่ต่ออยู่ในระบบนี้สามารถคุยกันรู้เรื่องได้ เพราะทุกเครื่องใช้มาตรฐานและกฎเกณฑ์ในการสื่อสารชุดเดียวกัน ซึ่งก็คือ TCP/IP อินเทอร์เน็ตไม่ได้เกิดขึ้นมาในทันที แต่กำเนิดขึ้นจากงานวิจัยด้านการทหารและวิชาการของสหรัฐอเมริกา (the American research and defense work) ในช่วงทศวรรษ 1970 และ 1980
Internet = ระบบเครือข่ายที่ใหญ่ที่สุดในโลก ซึ่งทุกเครื่องใช้มาตรฐานการสื่อสารเดียวกันคือ TCP/IP
เส้นเวลาด้านล่างสรุปเหตุการณ์สำคัญตามสไลด์ สังเกตว่าหลายสิ่งที่เราจะเรียนต่อในบทนี้ ทั้ง TCP, DNS และ World Wide Web ล้วนเกิดขึ้นในช่วงเวลานี้
ในชีวิตจริง สไลด์แบ่งตัวอย่างการใช้งานอินเทอร์เน็ตออกเป็น 3 กลุ่มใหญ่ ได้แก่
การสื่อสารและเครือข่ายสังคม
แหล่งความรู้
ธุรกิจและบริการ
เมื่อเราเปิดเว็บไซต์ ข้อมูลที่รับส่งกันไม่ได้เดินทางเป็นก้อนใหญ่ก้อนเดียว แต่ถูกแบ่งออกเป็นชิ้นเล็กๆ ที่เรียกว่า packet แล้วเดินทางผ่าน network หลายวงที่เชื่อมต่อกัน จนไปถึงเครื่องปลายทาง ทุกจุดที่ packet ผ่านคุยกันด้วย TCP/IP เหมือนกันหมด เครื่องปลายทางแต่ละเครื่องมี IP address ของตัวเอง เช่น 216.33.156.119 หรือ 74.125.71.102 ซึ่งกระจายอยู่ตาม network ต่างๆ
ภาพในสไลด์แสดงลำดับเหตุการณ์ว่า ผู้ใช้พิมพ์ชื่อ google.com แล้วได้หมายเลข IP 74.125.71.102 กลับมา จากนั้นข้อมูลจึงถูกส่งออกไปเป็น packet ผ่าน network หลายวงจนถึงเครื่องที่มี IP นั้นซึ่งเก็บข้อมูล (Data) ไว้
องค์ประกอบหลักของอินเทอร์เน็ต (Internet Components) แบ่งได้เป็น 3 ส่วน โดยส่วน Network ยังมีอุปกรณ์สำคัญอยู่ภายในอีก 2 ชนิด
TCP/IP protocol คือมาตรฐานและกฎเกณฑ์ในการสื่อสารของระบบอินเทอร์เน็ต ชื่อของมันมาจากโปรโตคอล 2 ตัวที่แบ่งหน้าที่กันชัดเจน ตัวหนึ่งดูแลเรื่อง "หั่นและประกอบข้อมูล" อีกตัวดูแลเรื่อง "ส่งข้อมูลให้ถึงที่หมาย"
อย่าสลับหน้าที่กัน — TCP แบ่งและประกอบ packet ส่วน IP ส่ง/routing packet (ทั้งสองข้อเป็นคำถามคนละข้อในแบบฝึกหัด)
IP Address คือชุดตัวเลขที่ทำหน้าที่ระบุที่อยู่ของอุปกรณ์ใน network ปัจจุบันมี 2 เวอร์ชันคือ IPv4 และ IPv6 โดย IPv4 เป็นแบบที่ใช้งานเป็นหลัก
IPv4 กำหนดให้ที่อยู่บนอินเทอร์เน็ตอยู่ในรูป ###.###.###.### คือตัวเลข 4 ชุดคั่นด้วยจุด และแต่ละชุด (###) มีค่าได้ตั้งแต่ 0 ถึง 255 ตัวเลขนี้มาจาก 28 ตามที่สไลด์ระบุ กล่าวคือแต่ละชุดมีค่าที่เป็นไปได้ทั้งหมด 28 = 256 ค่า เมื่อเริ่มนับจาก 0 ค่าสูงสุดจึงเป็น 255
IPv4 = ###.###.###.### · แต่ละ ### มีได้ 2⁸ = 256 ค่า → 0 ถึง 255
| IP address (ตัวอย่างในสไลด์) | เว็บไซต์ |
|---|---|
64.236.16.116 | cnn |
64.58.76.179 | yahoo |
216.33.156.119 | ebay |
ช่วงค่าคือ 0–255 ไม่ใช่ 1–256 หรือ 0–999 — ถ้าเจอชุดตัวเลขที่เกิน 255 แสดงว่าไม่ใช่ IPv4 ที่ถูกต้องตามรูปแบบนี้
คอมพิวเตอร์เครื่องเดียวอาจให้บริการได้หลายอย่าง IP address อย่างเดียวจึงยังไม่พอจะบอกว่าผู้ใช้ต้องการบริการไหน TCP/IP จึงมีการระบุ port เพื่อบอกถึง service ที่ผู้ใช้ต้องการ
ถ้าเทียบ IP Address เป็นที่อยู่ที่ทำให้เราไปถึงตึกหลังนั้นได้ port ก็ทำหน้าที่เหมือนหมายเลขห้อง ที่พาเราไปสู่จุดหมายบริการที่ต้องการภายในตึก
บริการทุกอย่างบนอินเทอร์เน็ต (All Internet services) ทำงานอยู่บน TCP/IP protocol และแต่ละบริการมี port number และ protocol เฉพาะของตัวเอง ตัวอย่างในสไลด์ ได้แก่
| Service / Protocol | Port |
|---|---|
| HTTP | 80 |
| FTP | 21 |
| Telnet | 23 |
| SMTP | 25 |
ตัวเลข IP อย่าง 74.125.71.102 จำยากสำหรับมนุษย์ Domain name (ชื่อโดเมน) จึงทำหน้าที่เหมือน IP Address แต่อยู่ในรูปแบบของชื่อหรือข้อความ ที่อ่านและจำได้ง่ายกว่า
Domain name มีโครงสร้างแบบลำดับชั้น (Hierarchy) เริ่มจากจุดบนสุดคือ root (.) แล้วแตกออกเป็นโดเมนระดับบน ซึ่งสไลด์ยกตัวอย่างความหมายไว้ดังนี้ .com (commercial), .edu (education), .gov (government), .org (organization), .th (Thailand) นอกจากนี้ยังมี .uk และ .jp ในแผนภาพ จากนั้นแต่ละโดเมนแตกย่อยลงไปเรื่อยๆ เช่น .th → .ac → .mahidol → www หรือ student
Domain Name Server (DNS) ทำหน้าที่จับคู่ระหว่าง IP Address กับ Domain name เช่น www.google.com. = 66.249.89.104
สรุปความสัมพันธ์ของ 3 หัวข้อนี้ได้ว่า ผู้ใช้จำชื่อโดเมน → DNS แปลงเป็น IP address เพื่อหาเครื่อง → port บอกว่าต้องการบริการไหนบนเครื่องนั้น
WWW ย่อมาจาก World Wide Web หรือเรียกสั้นๆ ว่า "the Web" เปิดตัวในปี 1992 โดย Tim Berners-Lee WWW เป็นบริการข้อมูลรูปแบบหนึ่งบนอินเทอร์เน็ต (ไม่ใช่ตัวอินเทอร์เน็ตเอง) ที่ผู้ใช้สามารถเลือกอ่านข้อมูลซึ่งประกอบด้วยข้อความ รูปภาพ และสื่ออื่นๆ รวมถึงเชื่อมโยงไปยังข้อมูลอื่น (navigation) ได้ด้วย hyperlinks และ WWW ใช้ HTTP protocol ในการสื่อสารและแลกเปลี่ยนข้อมูล
สไลด์มีปีของ WWW 2 จุด — เส้นเวลาประวัติอินเทอร์เน็ตเขียนว่าปี 1990 "World Wide Web (WWW) has been created" ส่วนสไลด์ "What is the WWW?" เขียนว่า Introduced in 1992 by Tim Berners-Lee ถ้าโจทย์ถามว่า เปิดตัว (introduced) ปีใดและโดยใคร คำตอบคือ 1992 โดย Tim Berners-Lee
การทำงานของเว็บคือการคุยกันระหว่าง 2 ฝั่งผ่านอินเทอร์เน็ต สไลด์นิยามคำศัพท์ที่เกี่ยวข้องไว้ 4 คำ
เมื่อผู้ใช้ต้องการเปิดหน้าเว็บ browser จะส่ง HTTP request ไปยัง Web Server ภายใน HTTP request นั้นจะมี URL (Uniform Resource Locator) ซึ่งเป็นตัวระบุ resource หรือ service ที่ต้องการ URL แบบเต็มประกอบด้วยหลายส่วนที่นำความรู้จากหัวข้อก่อนหน้ามาใช้ทั้งหมด ลองคลิกแต่ละส่วนของ URL ตัวอย่างจากสไลด์ด้านล่างเพื่อดูคำอธิบาย
://@:
httpjohn:secretwww.example.com8080/demo/index.htmlเมื่อได้หน้าเว็บกลับมาแล้ว browser มีหน้าที่แปลชุดคำสั่งในหน้า Web page เพราะแต่ละหน้าไม่ได้มีแค่เนื้อหา แต่ประกอบด้วยชุดคำสั่งที่บอกลักษณะการแสดงผล (how content to be displayed) เช่น การทำย่อหน้า หรือการจัด layout ของหน้าเว็บ ชุดคำสั่งหลักที่ใช้คือภาษา HTML และอาจเพิ่มความสวยงามด้วย CSS
งานพัฒนาเว็บแบ่งได้ตามส่วนของระบบที่ลงมือทำ สไลด์อ้างอิงแผนผังจาก roadmap.sh ดังนี้
HTML, CSS, JavaScript — ส่วนที่ผู้ใช้เห็นและโต้ตอบด้วยโดยตรง
Database, API, Framework — ส่วนที่ทำงานอยู่เบื้องหลัง
ทำได้ทั้ง Front-end และ Back-end
หัวข้อในวิชานี้ (course roadmap) — Front-end: HTML, CSS, JavaScript (Core) · Back-end: Node.JS, Web Service (API), Connection to DB · Other trends + framework: React
HTML ย่อมาจาก HyperText Markup Language เป็นภาษาหลักในการเขียนเว็บแอปพลิเคชัน HTML ประกอบด้วย markup tags ซึ่งเป็นตัวบอก browser ว่าให้แสดงผลเนื้อหาอย่างไร ไฟล์ HTML 1 ไฟล์เรียกว่า HTML Document และใช้นามสกุล .html หรือ .htm
ตัวอย่างเอกสาร HTML จากสไลด์ ในที่นี้ <p> ทำให้เนื้อหาแสดงผลเป็นย่อหน้า (paragraph)
<!DOCTYPE html>
<html lang="en">
<body>
<section>
<p>This is an example of
Markup language.</p>
<p>Tags tell browsers how
to show the contents</p>
</section>
</body>
</html>สไลด์บอกว่า HTML เรียนรู้ได้ง่าย สิ่งที่ต้องรู้คือวิธีใช้ tag ต่างๆ และต้องมี text editor ธรรมดาสำหรับเขียนเอกสาร เช่น Visual Studio Code, Notepad, Notepad++ เมื่อเขียนเสร็จก็เปิดไฟล์ด้วย browser ได้ทันที (Easy to code, Run on Browsers)
ถ้าอยากเป็น web developer ที่เก่ง ควรใช้ plain text editor ในการฝึกเขียน HTML
ประวัติของ HTML
เอกสาร HTML ประกอบด้วย 2 สิ่ง คือ Content ซึ่งเป็นเนื้อหาของหน้านั้นๆ เช่น ข้อความ และ Tag (Element) ซึ่งเป็นชุดคำสั่งที่บอกลักษณะการแสดงผลของเนื้อหา รูปแบบทั่วไปคือมี tag เปิด (opening tag) อยู่หน้าเนื้อหา และ tag ปิด (closing tag) ที่มีเครื่องหมาย / อยู่หลังเนื้อหา
<tag-name>Content to be displayed</tag-name>
<!-- ↑ Opening tag ↑ Closing tag -->HTML tags เป็น case insensitive คือจะเขียนชื่อ tag ด้วยตัวอักษรภาษาอังกฤษพิมพ์ใหญ่หรือพิมพ์เล็กก็ได้ (<P> กับ <p> ให้ผลเหมือนกัน) แต่นิยมใช้ตัวพิมพ์เล็ก
tag เปิดและ tag ปิดกำหนดขอบเขต (region) ที่ tag นั้นมีผล ขอบเขตเหล่านี้ซ้อนกันได้ (nested) แต่ห้ามเหลื่อมกัน (not overlap) กล่าวคือถ้าเปิด tag1 แล้วเปิด tag2 ข้างใน ต้องปิด tag2 ให้เรียบร้อยก่อนจึงจะปิด tag1 ได้ เหมือนกล่องเล็กต้องอยู่ในกล่องใหญ่ทั้งใบ จะโผล่ครึ่งหนึ่งออกนอกกล่องใหญ่ไม่ได้
ลำดับการปิดต้องย้อนกลับจากลำดับการเปิด: เปิด tag1 → tag2 ต้องปิด tag2 → tag1 เสมอ
tag ไม่จำเป็นต้องมี tag ปิดเสมอไป ตัวอย่างเช่น <br> (line break) ซึ่งเป็นเพียงการบอกตำแหน่งให้ขึ้นบรรทัดใหม่ ไม่ได้ครอบเนื้อหาใดๆ จึงไม่มี tag ปิด
อีกกฎที่สำคัญคือ Unknown tags are ignored — ถ้าเขียนชื่อ tag ผิด หรือสร้าง tag ขึ้นมาเอง browser ก็ยังทำงานต่อได้โดยไม่แสดง error แต่จะข้ามการแปลความหมายของ tag ที่ไม่ได้บัญญัติไว้ไป
สไลด์ให้เหตุผลว่า เพื่อให้สะดวกต่อการเพิ่ม tag ใหม่ๆ ในอนาคต
พิมพ์ชื่อ tag ผิด browser ก็ไม่แสดง error ให้เห็น — อย่าคิดว่าไม่มี error แปลว่าเขียนถูก
ภายใน opening tag อาจมี attributes ซึ่งเป็นส่วนเก็บข้อมูลหรือ option เพิ่มเติมของ tag นั้นๆ เช่น attribute lang ใน <html> ใช้ระบุภาษาของหน้าเพจ attributes เขียนในรูปแบบ name="value" (สามารถค้น "HTML reference" ออนไลน์ได้ที่ W3Schools)
<html lang="en">เรื่องเครื่องหมายคำพูด (Quote styles): ค่าของ attribute ควรอยู่ในเครื่องหมายคำพูดเสมอ แบบ double quote (") เป็นแบบที่ใช้บ่อยที่สุด แต่ single quote (') ก็ใช้ได้เช่นกัน
ถ้าค่าของ attribute มีเครื่องหมาย double quote อยู่ในตัวเอง ต้องใช้ single quote ครอบแทน เพื่อไม่ให้ quote ข้างในไปปิดค่า attribute ก่อนเวลา
value='John "ShotGun" Nelson' → ค่าที่ได้คือ John "ShotGun" Nelson
| Tag | คำอธิบาย |
|---|---|
<!DOCTYPE html> | การประกาศชนิดเอกสาร HTML ต้องอยู่เป็นสิ่งแรกสุดของเอกสาร ก่อน tag <html> |
<html> | กำหนดเอกสาร HTML เป็น container ที่ครอบ element อื่นทั้งหมด (ยกเว้น <!DOCTYPE>) |
<head> | ส่วนหัวของเอกสาร ใส่ title ของเอกสาร, scripts, styles, meta information และอื่นๆ |
<body> | ส่วนเนื้อหาของเอกสาร เช่น ข้อความ, hyperlinks, รูปภาพ, ตาราง, ลิสต์ |
<title> | ชื่อเรื่องของเอกสาร ที่แสดงบน browser toolbar |
เมื่อนำ tag ทั้ง 5 ตัวมารวมกัน จะได้เอกสาร HTML ที่สมบูรณ์ตามตัวอย่างในสไลด์ ข้อความ "I Love HTML" จะไปแสดงบนแถบของ browser ไม่ได้อยู่ในตัวหน้าเว็บ ส่วนสิ่งที่อยู่ใน <body> คือทุกอย่างที่แสดงบนหน้า
<!DOCTYPE html>
<html lang="en">
<head>
<title>I Love HTML</title>
</head>
<body>
Everything displayed on your page
will be in here.
</body>
</html>เริ่มทุกไฟล์ด้วย tag พื้นฐานเหล่านี้เสมอ: <!DOCTYPE>, <html>, <head>, <title>, <body>
เยื้อง (indent) element ที่ซ้อนกัน เพื่อให้อ่านโค้ดง่ายขึ้น — สไลด์ 32 กับ 33 แสดงโค้ดชุดเดียวกันที่เยื้องไม่สม่ำเสมอกับที่เยื้องเป็นระเบียบ ซึ่งแบบหลังเห็นได้ทันทีว่า tag ไหนอยู่ข้างในอะไร
ถ้าต้องการเขียนหมายเหตุไว้ในซอร์สโค้ด HTML ให้ใช้รูปแบบด้านล่าง browser จะไม่แสดงผล comment ออกมาบนหน้าเว็บ
<!-- This is a comment -->ต้องมีเครื่องหมายตกใจ (!) หลังวงเล็บเปิดเท่านั้น (<!--) แต่ไม่ต้องมีก่อนวงเล็บปิด (-->)
สไลด์ยกคำกล่าวจาก validator.w3.org ว่า "เช่นเดียวกับทุกภาษา ภาษาเหล่านี้มีไวยากรณ์ คำศัพท์ และ syntax ของตัวเอง และเอกสารทุกฉบับที่เขียนด้วยภาษาคอมพิวเตอร์เหล่านี้ควรทำตามกฎนั้น" สำหรับการเขียน HTML ให้ถูกหลักการ โดยเฉพาะมือใหม่ ควรนำโค้ดไปตรวจสอบกับเครื่องมืออย่าง https://validator.w3.org/ สไลด์แสดงภาพเปรียบเทียบผลตรวจของ Valid HTML กับ HTML with some errors
<h1> ถึง <h6>หัวข้อ (headings) ใช้ tag <h1> ถึง <h6> โดย <h1> สร้างหัวข้อขนาดใหญ่ที่สุด และ <h6> สร้างหัวข้อขนาดเล็กที่สุด เมื่อใช้ tag กลุ่มนี้ browser จะเพิ่มบรรทัดว่างทั้งก่อนและหลังข้อความให้อัตโนมัติ ไม่ต้องใส่เอง
<h1>This is a heading h1</h1>
<h2>This is a heading h2</h2>
<h3>This is a heading h3</h3>
<h4>This is a heading h4</h4>
<h5>This is a heading h5</h5>
<h6>This is a heading h6</h6><p><p> ใช้สร้าง paragraph หรือย่อหน้า browser จะจัดย่อหน้าให้โดยอัตโนมัติ มีพฤติกรรมสำคัญ 2 อย่างที่ต้องจำ
<p> จะมีการเพิ่มบรรทัดใหม่หลังย่อหน้าให้อัตโนมัติในตัวอย่างจากสไลด์ ย่อหน้าที่สองมีช่องว่างหลายช่องและขึ้นบรรทัดใหม่ในโค้ด แต่ผลลัพธ์ใน browser ยังเป็นบรรทัดเดียวที่มีเว้นวรรคปกติ
<p>This is a paragraph</p>
<p>This is another
paragraph</p><br>ถ้าข้อความยาวเกินความกว้างของหน้าต่าง browser จะปรับให้ขึ้นบรรทัดใหม่เองอัตโนมัติ แต่ในทางกลับกัน ถึงแม้ในชุดคำสั่งจะกด Enter ขึ้นบรรทัดใหม่หลายครั้ง browser ก็ไม่ได้ขึ้นบรรทัดใหม่ตาม ดังผลลัพธ์ของตัวอย่างจากสไลด์ด้านล่างที่ข้อความต่อกันเป็นบรรทัดเดียว
<p> Hello,
I want
a new line.</p>ถ้าต้องการขึ้นบรรทัดใหม่ ณ ตำแหน่งที่ต้องการจริงๆ ต้องใช้ <br> ซึ่งไม่ต้องมี closing tag
<p>This <br> is a para <br> graph with line breaks</p>การกด Enter ในซอร์สโค้ดไม่มีผลต่อการแสดงผล — ต้องใช้ <br> เท่านั้นจึงจะขึ้นบรรทัดใหม่บนหน้าเว็บ ถ้าเขียนแยกบรรทัดในโค้ดโดยไม่มี <br> ข้อความจะต่อกันเป็นบรรทัดเดียว
<a>Hyperlinks หรือ tag <a> (Anchor) ใช้เชื่อมโยงจากส่วนหนึ่งในหน้าเว็บ หรือเชื่อมระหว่างหน้าเว็บ ปลายทางของลิงก์ระบุด้วย attribute href ส่วนข้อความที่อยู่ระหว่าง tag เปิดและปิดจะกลายเป็นสิ่งที่ผู้ใช้คลิกได้
<a>[text here will be a link]</a>ตัวอย่างลิงก์ไปยัง MyCourses ในสไลด์ แสดงว่าสิ่งที่อยู่ใน <a> ไม่จำเป็นต้องเป็นข้อความธรรมดา สามารถเป็น tag อื่นอย่าง heading ได้
<a href="https://mycourses.ict.mahidol.ac.th/"><h1>MyCourses</h1></a>href ยังใช้เชื่อมหน้าเว็บที่อยู่ใน directory เดียวกันได้ด้วย relative path ในตัวอย่างนี้ หน้าปัจจุบันชื่อ 4_hyperlink.html ลิงก์ไปยัง 1_headings.html ซึ่งอยู่ในโฟลเดอร์เดียวกัน (สังเกตการใช้ comment อธิบายโค้ดด้วย)
<!DOCTYPE html>
<html lang="en">
<head>
<title>HyperLink</title>
</head>
<body>
<!-- This link goes to another HTML using relative path -->
<a href="1_headings.html">Link to Heading</a>
</body>
</html>URL แบบเต็ม ใช้เมื่อต้องการอ้างอิงที่อยู่ของ resource ที่เข้าถึงได้ผ่านอินเทอร์เน็ต
<a href="http://www.google.com">Google</a>การอ้างอิงที่อยู่ของ resource ที่เข้าถึงได้จาก document ปัจจุบัน เช่น อยู่ใน directory เดียวกัน
<a href="filename.html">click here</a>Email link: ใช้ <a> ระบุที่อยู่ email ได้ โดยใส่คำว่า mailto: ตามด้วย email ใน attribute href
<a href="mailto:abc@example.com">Send Email</a>Ordered list (ลิสต์แบบมีลำดับ) เริ่มต้นด้วย <ol> และแต่ละรายการเริ่มด้วย <li> browser จะใส่ตัวเลขลำดับให้อัตโนมัติ
<ol>
<li>Google</li>
<li>Bing</li>
<li>Baidu</li>
<li>Yahoo!</li>
<li>Yandex</li>
</ol>Unordered list (ลิสต์แบบไม่มีลำดับ) เริ่มต้นด้วย <ul> และแต่ละรายการเริ่มด้วย <li> เช่นกัน แต่จะแสดงเป็นจุด (bullet point) แทนตัวเลข
<ul>
<li>Cooking</li>
<li>Cross stitching</li>
<li>Gaming</li>
<li>Gardening</li>
<li>Shooting</li>
</ul>Nested list คือการใส่ลิสต์ซ้อนลงไปภายใน <li> ของลิสต์แม่ สังเกตว่า <ul> ตัวในอยู่ก่อน </li> ของรายการนั้น ซึ่งเป็นไปตามกฎการ nesting
<ul>
<li> A few New England states:
<ul>
<li>Vermont</li>
<li>New Hampshire</li>
<li>Maine</li>
</ul>
</li>
<li> Two Midwestern states:
<ul>
<li>Michigan</li>
<li>Indiana</li>
</ul>
</li>
</ul>Definition list เริ่มต้นด้วย <dl> แต่ละรายการประกอบด้วยคู่ของ <dt> (คำ) ตามด้วย <dd> (คำอธิบาย/คำนิยาม)
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>ภายใน <dt> สามารถใส่ <a> เพื่อทำเป็น list with link ได้
<dl>
<dt><a href="https://www.w3schools.com/html/">HTML</a></dt>
<dd>Hypertext Markup Language</dd>
<dt><a href="https://www.w3schools.com/css/">CSS</a></dt>
<dd>Cascading Style Sheets</dd>
</dl>tag ส่วนใหญ่ใน HTML สามารถซ้อน (nest) กันเพื่อสร้างเนื้อหาใหม่ได้ — เช่น ลิสต์ในลิสต์ หรือลิงก์ใน definition list
<img>การใส่รูปภาพในเอกสาร HTML ทำได้โดยใช้ <img src="URL"> ซึ่ง attribute src ระบุ URL หรือ path ไปยังไฟล์รูปภาพ และ <img> ไม่มี closing tag รูปแบบไฟล์รูปภาพที่นิยมใช้บนเว็บมากที่สุด ได้แก่
| รูปแบบ | ชื่อเต็ม |
|---|---|
| GIF | Graphic Interchange Format |
| JPEG | Joint Photographic Experts Group |
| PNG | Portable Network Graphics |
| SVG | Scalable Vector Graphics |
เพื่อให้เว็บเข้าถึงได้ (accessible) กับกลุ่มผู้ใช้มากขึ้น เช่น ผู้ใช้ที่มีปัญหาในการเข้าถึงรูปภาพ หรือผู้ใช้ที่พิการทางสายตาและต้องใช้ screen reader เราสามารถใช้ attribute alt เพิ่มคำอธิบายของรูปภาพ
<!-- Use URL or path to give the src of an image -->
<img src="Images/Usagi_Clap.gif" alt="A Rabbit is clapping">ผู้ใช้ที่มองไม่เห็นรูปจะรับรู้เนื้อหาของรูปผ่านข้อความใน alt — ไม่มี alt ก็เท่ากับไม่มีข้อมูลว่ารูปนั้นคืออะไร
เนื่องจาก tag ซ้อนกันได้ ถ้านำ <img> ไปไว้ภายใน <a href="..."> รูปภาพนั้นจะกลายเป็นลิงก์ที่คลิกได้ (Graphic Elements: Clickable Images)
<a href="http://www.kanahei.com/">
<img src="Images/Usagi_Clap.gif" alt="Rabbit with Penguin">
</a>ตัวอักษรพิเศษบางตัวเป็นสัญลักษณ์ที่ต้องใช้ชุดคำสั่งพิเศษเรียกว่า character entities ตัวอย่างที่ชัดที่สุดคือเครื่องหมาย < ถ้าพิมพ์ลงไปตรงๆ browser อาจเข้าใจว่าเป็นจุดเริ่มต้นของ tag character entity ประกอบด้วย 3 ส่วนเรียงกัน
&# ตามด้วย entity number;ตัวอย่างเช่น ถ้าต้องการแสดงเครื่องหมายน้อยกว่า (<) บน browser ใช้ได้ทั้ง < (ชื่อ) หรือ < (หมายเลข)
<p>5 < 10 และ 10 > 5</p>
<p>© Tom & Jerry</p>character entities เป็น case sensitive — ต่างจากชื่อ tag ที่เป็น case insensitive (เช่น ต้องเขียน < ตามตาราง)
| ผลลัพธ์ | คำอธิบาย | Entity | Entity Number |
|---|---|---|---|
| (เว้นวรรค) | non-breaking space | |   |
| < | less than | < | < |
| > | greater than | > | > |
| & | ampersand | & | & |
| " | quotation mark | " | " |
| ' | apostrophe | ' | ' |
| ¢ | cent | ¢ | ¢ |
| £ | pound | £ | £ |
| ¥ | yen | ¥ | ¥ |
| § | section | § | § |
| © | copyright | © | © |
| ® | trademark | ® | ® |
| × | multiplication | × | × |
| ÷ | division | ÷ | ÷ |
การใส่ข้อมูลในรูปแบบตารางใช้ <table> … </table> ภายในตารางประกอบด้วยแถว (row) <tr>…</tr> และในแต่ละแถวมีหลัก (column) <td>…</td> ข้อมูลในเซลล์จะเป็นข้อความ รูปภาพ หรือ tag อื่นๆ ก็ได้ แต่ต้องอยู่ระหว่าง <td> กับ </td> เท่านั้น
โดยค่าเริ่มต้น (by default) ตารางจะไม่มีเส้นขอบ ต้องกำหนด border เองจึงจะเห็นเส้น — สไลด์ใช้ style ด้านล่างใน <head> ซึ่งรายละเอียดของ CSS จะได้เรียนในอีก 2 สัปดาห์
<head>
<style>
table, tr, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>States</th>
<th>Abbr.</th>
<th>Capital</th>
</tr>
<tr>
<td>Pennsylvania</td>
<td>PA</td>
<td>Harrisburg</td>
</tr>
<tr>
<td>New York</td>
<td>NY</td>
<td>Albany</td>
</tr>
</table>
</body>Heading cells: เซลล์หัวตารางกำหนดด้วย <th></th> แทน <td> ข้อความใน <th> จะถูกตั้งเป็นตัวหนาและจัดกึ่งกลางอัตโนมัติ ส่วนข้อความใน <td> เป็นตัวปกติและชิดซ้าย (เห็นความต่างได้ในผลลัพธ์ด้านบน)
Empty cell (เซลล์ว่าง): ใช้ ใส่ไว้ในเซลล์
<td> </td>Spanning cells: เซลล์หนึ่งสามารถขยาย (span) ให้ครอบคลุมหลายแถวหรือหลายหลักได้ด้วย attribute 2 ตัว
colspanขยายเซลล์ให้ครอบคลุมหลายหลัก — <td colspan="3"> ขยายกว้างไปทางขวา 3 หลักนับจากเซลล์ปัจจุบัน
rowspanขยายเซลล์ให้ครอบคลุมหลายแถว — <td rowspan="2"> ขยายลงไปด้านล่าง 2 แถวนับจากเซลล์ปัจจุบัน
ตัวอย่างในสไลด์ใช้ทั้งสองแบบพร้อมกัน: เซลล์รูปภาพใช้ rowspan="3" ให้สูงเท่า 3 แถว และเซลล์หัวข้อ "Character: Usagi" ใช้ colspan="3" ให้กว้างเท่า 3 หลัก ภายในเซลล์ยังใส่ <img>, <h1> และ <p> ได้ เพราะเนื้อหาอยู่ระหว่าง tag ของเซลล์
<table>
<tr>
<td rowspan = "3">
<img src="Usagi_Tired.gif" alt = "Picture of a Usagi" />
</td>
<th colspan = "3">
<h1>Character: Usagi</h1>
<p>Illustrator: Kanahei (カナヘイ) </p>
</th>
</tr>
<tr>
<th>Color</th>
<th>Type</th>
<th>Best friends</th>
</tr>
<tr>
<td>Light Pink</td>
<td>Rabbit</td>
<td>Piske</td>
</tr>
</table>จำคู่ให้แม่น: colspan = column = กว้างขึ้นทางแนวนอน · rowspan = row = สูงขึ้นทางแนวตั้ง แถวที่ 2 และ 3 ของตัวอย่างนี้จึงมีแค่ 3 เซลล์ เพราะหลักแรกถูกเซลล์รูปภาพจองไว้แล้ว
นอกจากเขียนให้ browser แสดงผลได้แล้ว ควรเขียนให้เป็นระเบียบตามแนวทางต่อไปนี้ (อ้างอิง W3Schools HTML5 syntax)
<!DOCTYPE html>= ให้เหมาะสม (ปกติไม่เว้น)<a href="https://www.google.com/">Google</a>ปี port URL tag หลัก entity และกฎที่มักออกสอบของบทที่ 1 รวมไว้ในหน้าเดียว
IP = ที่อยู่ตึก · port = หมายเลขห้อง · TCP แบ่ง/ประกอบ packet · IP ส่ง/routing · IPv4 แต่ละชุด 0–255 · DNS จับคู่ชื่อโดเมน ↔ IP
http://john:secret@www.example.com:8080/demo/index.html
| ผลลัพธ์ | Entity | Number | ผลลัพธ์ | Entity | Number |
|---|---|---|---|---|---|
| space | |   | ¢ | ¢ | ¢ |
| < | < | < | £ | £ | £ |
| > | > | > | ¥ | ¥ | ¥ |
| & | & | & | § | § | § |
| " | " | " | © | © | © |
| ' | ' | ' | ® | ® | ® |
| × | × | × | ÷ | ÷ | ÷ |
รูปแบบ: & + ชื่อ (หรือ # + หมายเลข) + ; · entity เป็น case sensitive
name="value" ใน opening tag · ค่ามี " อยู่ข้างใน → ครอบด้วย 'เลือกคำตอบให้ครบแล้วกด "ตรวจคำตอบ" ด้านล่าง ระบบจะเฉลยพร้อมคำอธิบายทุกข้อ
เขียน HTML จริงในช่องแก้ไข ดูผลลัพธ์ใน browser ทันที แล้วกด "ตรวจคำตอบ" ให้ระบบตรวจโครงสร้างให้อัตโนมัติ (Ctrl + Enter ก็ตรวจได้) · โค้ดและความคืบหน้าบันทึกไว้ใน browser นี้
แบบฝึกหัดเขียนโค้ดต้องเปิด JavaScript ใน browser