1. รู้เบื้องต้นเกี่ยวกับ HTML
HTML (Hyper Text Markup Language) เป็นภาษามาร์กอัปไฮเปอร์เท็กซ์ โดยเชื่อมโยงข้อความ กราฟิก ภาพเคลื่อนไหว เสียง ตาราง ลิงก์ ฯลฯ บนอินเทอร์เน็ตเข้าด้วยกันผ่านชุดแท็ก ข้อมูลที่จำเป็นต้องแสดงจะถูกเขียนลงในไฟล์ HTML ตามกฎบางอย่าง ซึ่งเบราว์เซอร์เฉพาะรู้จัก และไฟล์ HTML เหล่านี้ "แปล" เป็นข้อมูลที่สามารถระบุตัวตนได้ นั่นคือหน้าเว็บที่คุณเห็นในขณะนี้ ให้ความสะดวกแก่ประชาชนในการค้นหาและเรียกค้นข้อมูล
2. การแบ่งประเภทของหน้าเว็บ
แบ่งออกเป็นหน้าเว็บแบบคงที่และหน้าเว็บแบบไดนามิก
(1) หน้าเว็บแบบคงที่: หน้าเว็บในรูปแบบ HTML ล้วนสามารถเรียกดูได้เท่านั้น ไม่ว่าจะเปิดดูที่ไหนและเมื่อใด หน้าเว็บเหล่านี้จะแสดงรูปแบบและเนื้อหาเดียวกัน ซึ่งหมายความว่าไม่สามารถโต้ตอบกับเว็บไซต์ได้ ในหน้าเว็บแบบคงที่ โครงสร้างหลักของหน้าเว็บทั้งหมดและการควบคุมการแสดงผลของหน้าเว็บจะถูกนำมาใช้โดยใช้ HTML ส่วนขยายของเพจแบบคงที่โดยทั่วไปคือ .htm, .html, .shtml และ .xml
หน้าเว็บแบบคงที่สามารถแสดงเฉพาะข้อความและรูปภาพบนหน้าเว็บเท่านั้น อาจฟังดูเรียบง่ายในการใช้งาน แต่เป็นองค์ประกอบพื้นฐานของหน้าเว็บทั้งหมด และความสำคัญของมันก็ชัดเจนในตัวเอง
บนหน้าเว็บแบบคงที่ เอฟเฟกต์ไดนามิกต่างๆ สามารถปรากฏขึ้นได้ เช่น ภาพเคลื่อนไหวในรูปแบบ .gif แฟลช ตัวอักษรเลื่อน เป็นต้น "เอฟเฟกต์ไดนามิก" เหล่านี้เป็นเพียงภาพเท่านั้น และเป็นแนวคิดที่แตกต่างจากหน้าเว็บไดนามิก
(2) หน้าเว็บแบบไดนามิก: หน้าเว็บที่ใช้เทคโนโลยีแบบไดนามิก เนื้อหาของหน้าเว็บสามารถเปลี่ยนแปลงได้โดยอัตโนมัติตามการเปลี่ยนแปลงในบางเงื่อนไข แตกต่างจากส่วนขยายของหน้าเว็บแบบคงที่ ส่วนขยายของหน้าเว็บแบบไดนามิกคือ .asp, .jsp, .php, .perl, .cgi ฯลฯ และมีสัญลักษณ์สัญลักษณ์ "?" ใน URL ของหน้าเว็บแบบไดนามิก
3. มาร์ค
สัญลักษณ์ที่ใช้ใน HTML เพื่ออธิบายการทำงาน
แท็กต้องอยู่ในวงเล็บมุม "<>" เมื่อใช้งาน เบราว์เซอร์จะตีความมาร์กอัปภายในวงเล็บมุม แท็กที่ใช้กันทั่วไปใน HTML ได้แก่ <html>, <head>, <title> และ <body>
เครื่องหมายแบ่งออกเป็นเครื่องหมายเดี่ยวและเครื่องหมายคู่:
(1) แท็กเดี่ยว: เพียงป้อนชื่อแท็กในวงเล็บมุม แท็กเดียวแสดงถึงฟังก์ชันและไม่มีขอบเขต
รูปแบบ: <แท็ก>
เช่น เครื่องหมายตัวแบ่งบรรทัด: <br>
(2) เครื่องหมายคู่: เครื่องหมายมีจุดเริ่มต้นและส่วนท้ายและเครื่องหมายด้านหน้าสอดคล้องกับเครื่องหมายต่อไปนี้ แต่มีเครื่องหมายทับก่อนเครื่องหมายหลัง
รูปแบบ: <mark>จิงรุ่ย โหย่วจือ</mark>
เช่นเครื่องหมายย่อหน้า; <p> </p>
4. องค์ประกอบมาร์กอัป HTML
<html><head><title>เครือข่ายภาษา C</title></head><body><h1>จะใช้งานเครือข่ายภาษา C ให้เกิดประโยชน์ได้อย่างไร </h1><p>มีคำถามมากมายเกี่ยวกับเครือข่ายภาษา C</p></body></html>
จริงๆ แล้วหน้า HTML ที่สมบูรณ์ประกอบด้วยแท็กคู่กัน (แน่นอนว่ามีข้อยกเว้นอยู่ด้วย)
(1) <html></html>: แท็กเปิดและปิดของหน้าเว็บ
(2) <head>< /head>: แท็กเริ่มต้นและแท็กสิ้นสุดของข้อมูลส่วนหัวของหน้าเว็บ
(3) <body>< /body>: แท็กเริ่มต้นและสิ้นสุดของเนื้อหาหลักของหน้าเว็บ
(4) <title>< /title>: แท็กเปิดและปิดธีมของหน้าเว็บ
(5) < p>< /p>: แท็กเริ่มต้นและสิ้นสุดของย่อหน้าของหน้าเว็บ
5. เทคโนโลยีการจัดวางหน้าเว็บ
(1) เทคโนโลยีเค้าโครงตาราง: เค้าโครงตารางเป็นเรื่องปกติมากขึ้นในอดีต ซึ่งคือการใส่ข้อความ รูปภาพ และอื่นๆ ที่จำเป็นลงในตารางแบบไร้ขอบ ข้อดีคือสามารถประมวลผลวัตถุต่างๆ ได้โดยไม่ต้องกังวลถึงความแตกต่างระหว่างวัตถุต่างๆ ข้อเสียคือการใช้ตารางมากเกินไปจะทำให้ปริมาณข้อมูลหน้าเว็บเพิ่มขึ้นและส่งผลต่อความเร็วในการดาวน์โหลดหน้าเว็บ
(2) เทคโนโลยี CSS (Cascading Style Sheet): หรือที่รู้จักในชื่อเทคโนโลยีเค้าโครง DIV+CSS ซึ่งสามารถวางตำแหน่งข้อความและรูปภาพได้อย่างแม่นยำ แยกข้อมูลและรูปแบบ และลดปริมาณข้อมูลบนหน้าเว็บได้อย่างมาก CSS อาจยากเล็กน้อยสำหรับผู้เริ่มต้น แต่เป็นวิธีการจัดวางที่ดีจริงๆ และปัจจุบันเป็นเทคโนโลยีการจัดวางหน้าเว็บที่ใช้กันมากที่สุด