HTML Basics ประกอบด้วยกฎพื้นฐานของภาษา HTML คำอธิบายโครงสร้างของหน้า HTML และความสัมพันธ์ในโครงสร้างของเอกสาร HTML ระหว่างองค์ประกอบ HTML

เอกสาร HTML เป็นเอกสารข้อความปกติที่สามารถสร้างได้ในโปรแกรมแก้ไขข้อความทั่วไป (Notepad) หรือในเอกสารเฉพาะที่มีการเน้นโค้ด (Notepad++, Visual Studio Code ฯลฯ) เอกสาร HTML มีนามสกุล .html

เอกสาร HTML ประกอบด้วยโครงสร้างองค์ประกอบ HTML และข้อความ แต่ละองค์ประกอบจะถูกระบุในเอกสารต้นฉบับด้วยแท็กเริ่มต้น (เปิด) และแท็กสิ้นสุด (ปิด) (โดยมีข้อยกเว้นที่หายาก)

แท็กเริ่มต้นจะแสดงตำแหน่งเริ่มต้นขององค์ประกอบ แท็กปิดท้ายจะแสดงตำแหน่งสิ้นสุด แท็กปิดเกิดจากการเพิ่มเครื่องหมายทับ / หน้าชื่อแท็ก: .... ระหว่างแท็กเริ่มต้นและแท็กปิดคือเนื้อหาของแท็ก - เนื้อหา

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

แท็กสามารถซ้อนกันภายในได้ เช่น

ข้อความ

- เมื่อลงทุน คุณควรปฏิบัติตามลำดับที่ปิด (หลักการ "matryoshka") ตัวอย่างเช่น รายการต่อไปนี้จะไม่ถูกต้อง:

ข้อความ

.

องค์ประกอบ HTML สามารถมีแอตทริบิวต์ได้ (ทั่วโลก นำไปใช้กับองค์ประกอบ HTML ทั้งหมด และของตนเอง) แอตทริบิวต์จะถูกเขียนในแท็กเปิดขององค์ประกอบ และมีชื่อและค่าที่ระบุในรูปแบบแอตทริบิวต์ name="value" แอตทริบิวต์ช่วยให้คุณเปลี่ยนคุณสมบัติและการทำงานขององค์ประกอบที่ตั้งค่าไว้ได้

แต่ละองค์ประกอบสามารถกำหนดค่าคลาสได้หลายค่าและค่ารหัสเดียวเท่านั้น ค่าคลาสหลายค่าถูกเขียนโดยคั่นด้วยช่องว่าง ค่าคลาสและรหัสต้องประกอบด้วยตัวอักษร ตัวเลข ขีดกลาง และขีดล่างเท่านั้น และต้องขึ้นต้นด้วยตัวอักษรหรือตัวเลขเท่านั้น

เบราว์เซอร์จะดู (ตีความ) เอกสาร HTML สร้างโครงสร้าง (DOM) และแสดงผลตามคำแนะนำที่อยู่ในไฟล์นี้ (สไตล์ชีท สคริปต์) หากมาร์กอัปถูกต้อง หน้าต่างเบราว์เซอร์จะแสดงหน้า HTML ที่มีองค์ประกอบ HTML - ส่วนหัว ตาราง รูปภาพ ฯลฯ

กระบวนการตีความ (การแยกวิเคราะห์) เริ่มต้นก่อนที่หน้าเว็บจะโหลดเข้าสู่เบราว์เซอร์โดยสมบูรณ์ เบราว์เซอร์ประมวลผลเอกสาร HTML ตามลำดับตั้งแต่เริ่มต้น ในขณะที่ประมวลผล CSS และสไตล์ชีทที่เกี่ยวข้องกับองค์ประกอบของหน้า

เอกสาร HTML ประกอบด้วยสองส่วน - ส่วนหัว - ระหว่างแท็ก ... และส่วนเนื้อหา - ระหว่างแท็ก ....

โครงสร้างเว็บเพจ 1. โครงสร้างเอกสาร HTML

HTML เป็นไปตามกฎที่มีอยู่ในไฟล์ประกาศประเภทเอกสาร (คำจำกัดความประเภทเอกสารหรือ DTD)- DTD เป็นเอกสาร XML ที่กำหนดแท็ก คุณลักษณะ และค่าที่ถูกต้องสำหรับประเภท HTML เฉพาะ HTML แต่ละเวอร์ชันมี DTD ของตัวเอง

DOCTYPE มีหน้าที่รับผิดชอบในการแสดงหน้าเว็บที่ถูกต้องโดยเบราว์เซอร์ DOCTYPE ไม่เพียงระบุเวอร์ชัน HTML (เช่น html) เท่านั้น แต่ยังระบุไฟล์ DTD ที่เกี่ยวข้องบนอินเทอร์เน็ตด้วย

...

องค์ประกอบภายในแท็กจะสร้างแผนผังเอกสาร ซึ่งเรียกว่าโมเดลออบเจ็กต์เอกสาร DOM (โมเดลออบเจ็กต์เอกสาร) ในกรณีนี้ องค์ประกอบคือองค์ประกอบราก

ข้าว. 1. โครงสร้างที่ง่ายที่สุดของหน้าเว็บ

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

บรรพบุรุษคือองค์ประกอบที่มีองค์ประกอบอื่นๆ ในรูปที่ 1 บรรพบุรุษขององค์ประกอบทั้งหมดคือ ในเวลาเดียวกัน องค์ประกอบนี้เป็นบรรพบุรุษของแท็กทั้งหมดที่มี: ,

. ฯลฯ

ผู้สืบทอดคือองค์ประกอบที่อยู่ภายในองค์ประกอบหนึ่งประเภทขึ้นไป ตัวอย่างเช่น เป็นผู้สืบทอดของ และองค์ประกอบ

เป็นทายาทของทั้งสอง และ

องค์ประกอบหลักคือองค์ประกอบที่เกี่ยวข้องกับองค์ประกอบอื่นๆ ในระดับที่ต่ำกว่าและอยู่เหนือองค์ประกอบเหล่านั้นในแผนผัง ในรูปที่ 1 และ. แท็ก

เป็นพาเรนต์เท่านั้นถึง

องค์ประกอบลูกคือองค์ประกอบที่อยู่รองโดยตรงกับองค์ประกอบอื่นในระดับที่สูงกว่า ในรูปที่ 1 มีเพียงองค์ประกอบ , ,

และเป็นลูกของ

องค์ประกอบน้องสาวคือองค์ประกอบที่มีองค์ประกอบหลักร่วมกับองค์ประกอบที่เป็นปัญหา ซึ่งเรียกว่าองค์ประกอบในระดับเดียวกัน ในรูปที่ 1 และ เป็นองค์ประกอบในระดับเดียวกัน เช่นเดียวกับองค์ประกอบ และ

พวกเขาเป็นพี่น้องกัน

1.1. องค์ประกอบ 1.2 องค์ประกอบ

ส่วน ... มีข้อมูลทางเทคนิคเกี่ยวกับหน้า: ชื่อ คำอธิบาย คำสำคัญสำหรับเครื่องมือค้นหา การเข้ารหัส ฯลฯ ข้อมูลที่คุณป้อนจะไม่แสดงในหน้าต่างเบราว์เซอร์ แต่มีข้อมูลที่บอกเบราว์เซอร์ถึงวิธีการประมวลผลหน้าเว็บ

1.2.1. องค์ประกอบ

แท็กส่วนที่ต้องการคือ . ข้อความที่อยู่ภายในแท็กนี้จะปรากฏในแถบชื่อเรื่องของเว็บเบราว์เซอร์ ชื่อเรื่องควรมีความยาวไม่เกิน 60 ตัวอักษรจึงจะพอดีกับชื่อเรื่อง ข้อความชื่อเรื่องควรมีคำอธิบายที่สมบูรณ์ที่สุดของเนื้อหาของหน้าเว็บ

1.2.2. องค์ประกอบ

แท็กส่วนเสริมคือแท็กเดียว ด้วยความช่วยเหลือ คุณสามารถตั้งค่าคำอธิบายเนื้อหาของหน้าและคำสำคัญสำหรับเครื่องมือค้นหา ผู้เขียนเอกสาร HTML และคุณสมบัติเมทาดาทาอื่น ๆ องค์ประกอบสามารถมีหลายองค์ประกอบได้เนื่องจากมีข้อมูลที่แตกต่างกันขึ้นอยู่กับคุณลักษณะที่ใช้

คำอธิบายของเนื้อหาหน้าและคำหลักสามารถระบุได้หลายภาษาพร้อมกันเช่นในภาษารัสเซียและอังกฤษ:

การใช้แท็ก คุณสามารถบล็อกหรืออนุญาตการจัดทำดัชนีหน้าเว็บโดยเครื่องมือค้นหา:

หากต้องการโหลดเพจซ้ำโดยอัตโนมัติหลังจากระยะเวลาที่กำหนด คุณต้องใช้ค่ารีเฟรช:

หน้านี้จะถูกโหลดซ้ำหลังจากผ่านไป 30 วินาที หากต้องการเปลี่ยนเส้นทางผู้เยี่ยมชมไปยังหน้าอื่น คุณต้องระบุ URL ในพารามิเตอร์ url:

ตารางที่ 2. แอ็ตทริบิวต์แท็ก คุณลักษณะ

ชุดอักขระ	ระบุการเข้ารหัสอักขระสำหรับเอกสาร HTML ปัจจุบัน:
เนื้อหา	ประกอบด้วยข้อความที่กำหนดเองซึ่งระบุค่าที่เกี่ยวข้องกับแอตทริบิวต์ http-equiv หรือ name ขึ้นอยู่กับค่า
http-เทียบเท่า	ควบคุมการทำงานของเบราว์เซอร์บนหน้าเว็บที่กำหนด (เทียบเท่ากับส่วนหัว HTTP) เมื่อแสดงผลเพจ เบราว์เซอร์จะปฏิบัติตามคำแนะนำที่ระบุไว้ในแอตทริบิวต์: default-style ระบุสไตล์ที่ต้องการใช้บนเพจ แอตทริบิวต์เนื้อหาต้องมีรหัสขององค์ประกอบที่อ้างอิงถึงสไตล์ชีต CSS หรือรหัสขององค์ประกอบที่มีสไตล์ชีต รีเฟรช ระบุเวลาเป็นวินาทีก่อนที่เพจจะถูกโหลดซ้ำ หรือเวลาก่อนที่จะเปลี่ยนเส้นทางไปยังเพจอื่น หากแอตทริบิวต์เนื้อหามีบรรทัด "url=page_address" หลังเวลาดังกล่าว โหลดหน้าเว็บซ้ำโดยอัตโนมัติหลังจากระยะเวลาที่กำหนด ในตัวอย่างนี้ หลังจาก 30 วินาที: หากคุณต้องการโอนผู้เข้าชมไปยังหน้าอื่นทันที คุณสามารถระบุ URL ในพารามิเตอร์ url:
ชื่อ	เชื่อมโยงกับค่าที่มีอยู่ในแอตทริบิวต์เนื้อหา ไม่ควรใช้หากองค์ประกอบมีชุดแอตทริบิวต์ http-equiv , charset หรือ itemprop อยู่แล้ว application-name ระบุชื่อของเว็บแอปพลิเคชันที่ใช้ในเพจ ผู้เขียนระบุชื่อผู้เขียนเอกสารในรูปแบบอิสระ description กำหนดคำอธิบายสั้น ๆ ของเนื้อหาของหน้า เช่น: ตัวสร้างระบุหนึ่งในแพ็คเกจซอฟต์แวร์ที่ใช้ในการสร้างเอกสาร ตัวอย่างเช่น: . คำหลักประกอบด้วยรายการคำหลักที่คั่นด้วยเครื่องหมายจุลภาคซึ่งตรงกับเนื้อหาของหน้า ตัวอย่างเช่น: . นอกจากนี้ แอตทริบิวต์ name ยังสามารถรับค่าต่อไปนี้จากข้อกำหนดเพิ่มเติม เช่น creator, googlebot, ผู้เผยแพร่, robots, slurp, viewport แม้ว่าจะยังไม่มีการนำค่าเหล่านี้ไปใช้อย่างเป็นทางการก็ตาม

1.2.3. องค์ประกอบ

ภายในองค์ประกอบนี้มีการตั้งค่าสไตล์ที่ใช้ในเพจ CSS ใช้เพื่อกำหนดสไตล์ในเอกสาร HTML อาจมีองค์ประกอบดังกล่าวหลายรายการในหนึ่งหน้า

ภายในองค์ประกอบนี้ คุณสามารถเขียนโค้ดการจัดรูปแบบสำหรับทั้งองค์ประกอบของหน้าเว็บและหน้าเว็บทั้งหมดได้

.paper ( กว้าง: 200px; ความสูง: 300px; สีพื้นหลัง: #ef4444; สี: #666666; )

หากต้องการแนบสไตล์ที่กำหนดให้กับองค์ประกอบ คุณจะต้องกำหนดชื่อที่เหมาะสมให้กับองค์ประกอบโดยใช้แอตทริบิวต์คลาส (หรือ id):

...

โค้ด CSS สามารถฝังลงในองค์ประกอบมาร์กอัปได้โดยตรงเป็นค่าของแอตทริบิวต์ style ตัวอย่างเช่น:

1.2.4. องค์ประกอบ

คุณยังสามารถกำหนดสไตล์สำหรับเอกสารโดยใช้วิธีอื่น - เขียนเป็นไฟล์แยกต่างหากโดยใช้นามสกุล .css เช่น style.css

มีสองวิธีในการเชื่อมต่อไฟล์ที่มีสไตล์กับเว็บเพจ:
ผ่านคำสั่ง @import url

@นำเข้า URL(style.css);

โดยใช้องค์ประกอบ องค์ประกอบไม่จำเป็นต้องมีแท็กปิด องค์ประกอบนี้กำหนดความสัมพันธ์ระหว่างหน้าปัจจุบันและเอกสารอื่นๆ อาจมีองค์ประกอบดังกล่าวหลายรายการในหนึ่งหน้า รายการจะมีลักษณะดังนี้:

ตารางที่ 4. แอ็ตทริบิวต์แท็ก คำอธิบายแอตทริบิวต์ ค่าที่ยอมรับ

ครอสออริจิ้น	ระบุว่าควรใช้ CORS (เทคโนโลยีเบราว์เซอร์ที่อนุญาตให้หน้าเว็บเข้าถึงทรัพยากรจากโดเมนอื่น) เมื่อดึงรูปภาพจากไซต์หรือไม่ ไม่ระบุชื่อ — เบราว์เซอร์จะเพิ่มส่วนหัว Origin ให้กับคำขอข้ามโดเมนโดยอัตโนมัติ โดยมีชื่อของโดเมนที่ใช้ส่งคำขอ หากเซิร์ฟเวอร์ไม่ตอบสนองด้วยส่วนหัว CORS Access-Control-Allow-Origin: * (หรือชื่อโดเมนแทนเครื่องหมายดอกจัน) การโหลดรูปภาพจะถูกบล็อก use-credentials - หากเซิร์ฟเวอร์ไม่ได้ให้ข้อมูลประจำตัวโดยใช้ Access-Control-Allow-Credentials: true การโหลดรูปภาพจะถูกบล็อก
href	คุณลักษณะหลักของแท็ก ค่าคือเส้นทางไปยังไฟล์ที่มีสไตล์
hreflang	กำหนดภาษาของข้อความในเอกสารอ้างอิง
สื่อ	ระบุประเภทของอุปกรณ์ที่ควรใช้ทรัพยากรลิงก์
ไม่มีเลย	ตัวแปรสตริงที่สร้างขึ้นแบบสุ่มบนเซิร์ฟเวอร์ซึ่งกำหนดกฎสำหรับการใช้สไตล์อินไลน์เพื่อปกป้องเนื้อหา ค่าแอตทริบิวต์เป็นสตริงข้อความ
ญาติ	แอตทริบิวต์กำหนดความสัมพันธ์ระหว่างเอกสารปัจจุบันและเอกสารที่กำลังอ้างอิง ทางเลือก - ลิงก์ไปยังเอกสารเดียวกัน แต่อยู่ในรูปแบบอื่น (เช่น หน้าสำหรับการพิมพ์ การแปล มิเรอร์ ฟีดในรูปแบบ RSS หรือ Atom) . ไฟล์เก็บถาวร - ระบุว่าเอกสารที่เชื่อมโยงนั้นน่าสนใจในอดีต ลิงก์อาจชี้ไปที่คอลเลกชันของบันทึก เอกสาร หรือเอกสารอื่นๆ ลิงก์ผู้เขียนไปยังหน้าเกี่ยวกับผู้เขียนเอกสารหรือไปยังหน้าที่มีข้อมูลติดต่อของผู้เขียน คั่นหน้าการอ้างอิงถึงบรรพบุรุษที่ใกล้เคียงที่สุดของบทความนั่นคือลิงก์ หรือไปยังส่วนของบทความที่เกี่ยวข้องกับองค์ประกอบอย่างใกล้ชิดที่สุดหากไม่มีบรรพบุรุษ ภายนอกใช้เพื่อระบุว่าหน้าที่เชื่อมโยงไปไม่ได้เป็นส่วนหนึ่งของไซต์นี้ ขั้นแรกระบุลิงก์ที่ชี้ไปยังเอกสารแรกในลำดับของเอกสาร ลิงก์วิธีใช้ไปยังเอกสารวิธีใช้ ไอคอนระบุเส้นทางไปยังไอคอนที่จะใช้สำหรับเอกสารปัจจุบัน Last ระบุลิงก์ที่ชี้ไปยังเอกสารสุดท้ายตามลำดับเอกสาร ใบอนุญาต ลิงก์ไปยังข้อมูลลิขสิทธิ์ของเอกสาร ถัดไป บ่งชี้ว่าเอกสารนี้เป็นส่วนหนึ่งของชุดข้อมูล และลิงก์ไปยังเอกสารถัดไปในชุดนั้น nofollow ระบุว่าลิงก์ไม่ได้รับการรับรองโดยผู้เขียนเพจ หรือลิงก์ดังกล่าวมีลักษณะทางการค้า noreferrer ระบุว่าไม่ควรส่งส่วนหัวคำขอไคลเอ็นต์ที่มี URL ของแหล่งคำขอเมื่อติดตามลิงก์ pingback ระบุที่อยู่ของเซิร์ฟเวอร์ pingback ซึ่งช่วยให้บล็อกสามารถแจ้งไซต์ที่เชื่อมโยงไปถึงได้โดยอัตโนมัติ การดึงข้อมูลล่วงหน้าระบุว่าไฟล์อ้างอิงควรถูกแคชไว้ล่วงหน้า prev บ่งชี้ว่าเอกสารนี้เป็นส่วนหนึ่งของชุดข้อมูลและลิงก์ไปยังเอกสารก่อนหน้าในชุดนั้น การค้นหาบ่งชี้ว่าเอกสารอ้างอิงมีส่วนต่อประสานสำหรับการค้นหาและทรัพยากรที่เกี่ยวข้อง แถบด้านข้างระบุว่าเอกสารที่เชื่อมโยงจะแสดงในบริบทของเบราว์เซอร์เพิ่มเติม หากเป็นไปได้ และบางเบราว์เซอร์เมื่อคุณคลิกไฮเปอร์ลิงก์ ให้เปิดหน้าต่างเพื่อเพิ่มลิงก์ลงในแถบบุ๊กมาร์กของคุณ สไตล์ชีตคือลิงก์ไปยังไฟล์ภายนอกที่จะใช้เป็นสไตล์ชีตสำหรับเอกสารนี้ แท็ก ระบุว่าแท็กไฮเปอร์ลิงก์ใช้กับเอกสารนี้ up บ่งชี้ว่าเพจเป็นส่วนหนึ่งของโครงสร้างแบบลำดับชั้น และไฮเปอร์ลิงก์นำไปสู่ทรัพยากรในระดับที่สูงกว่าในโครงสร้าง
ขนาด	ระบุขนาดของไอคอนสำหรับการแสดงภาพ แอตทริบิวต์ขนาดใช้ร่วมกับ rel="icon" เท่านั้น และสามารถรับค่าต่อไปนี้ได้ widths-height - กำหนดรายการขนาดที่คั่นด้วยช่องว่าง แต่ละขนาดต้องอยู่ในรูปแบบ - widths-height (ขนาดไอคอนระบุเป็นพิกเซล) เช่น: ; ใด ๆ - ไอคอนสามารถปรับขนาดได้ทุกขนาด
ชื่อ	กำหนดชื่อเรื่องของลิงก์หรือชื่อของชุดสไตล์ชีตทางเลือก ค่าแอตทริบิวต์เป็นข้อความ
พิมพ์	ระบุประเภท MIME ของเอกสารที่กำลังอ้างอิง ในกรณีนี้จะใช้ค่า "text/css"

1.2.5. องค์ประกอบ ตารางที่ 5. แอ็ตทริบิวต์แท็ก คำอธิบายแอตทริบิวต์ ค่าที่ยอมรับ

อะซิงโครนัส	แอ็ตทริบิวต์ระบุว่าสคริปต์จะทำงานไม่พร้อมกันกับส่วนที่เหลือของเพจ (สคริปต์จะเริ่มทำงานพร้อมกันกับที่เพจโหลด)
ชุดอักขระ	กำหนดการเข้ารหัสอักขระ
ครอสออริจิ้น	กำหนดว่าจะใช้ CORS เมื่อโหลดสคริปต์ภายนอกหรือไม่ (โดยใช้แอตทริบิวต์ src) ไม่ระบุชื่อ — ก่อนที่จะโหลดสคริปต์ลงในคำขอข้ามโดเมน เบราว์เซอร์จะเพิ่มส่วนหัว Origin โดยอัตโนมัติ โดยไม่ต้องผ่านพารามิเตอร์การเข้าถึง (คุกกี้, ใบรับรอง X.509, การเข้าสู่ระบบ/รหัสผ่านสำหรับการตรวจสอบสิทธิ์ขั้นพื้นฐานผ่าน HTTP) หากการตอบสนองของเซิร์ฟเวอร์ไม่มีส่วนหัว Access-Control-Allow-Origin: ชื่อโดเมน สคริปต์จะไม่ถูกโหลด use-credentials — ก่อนที่จะโหลดสคริปต์ลงในคำขอข้ามโดเมน เบราว์เซอร์จะเพิ่มส่วนหัว Origin ที่ระบุพารามิเตอร์การเข้าถึงโดยอัตโนมัติ (คุกกี้, ใบรับรอง SSL หรือคู่ล็อกอิน/รหัสผ่าน) หากการตอบสนองของเซิร์ฟเวอร์ไม่มีส่วนหัว Access-Control-Allow-Credentials: true สคริปต์จะไม่ถูกโหลด
เลื่อนออกไป	การตีความสคริปต์จะล่าช้าจนกว่าเอกสารจะแสดงผลบนอุปกรณ์ของผู้ใช้
ไม่มีเลย	มอบความปลอดภัยโดยการป้องกันการโจมตีแบบ Cross-site Scripting (XSS) ตั้งกฎสำหรับการใช้สคริปต์ในตัวโดยใช้ค่า nonce และแฮช ในระหว่างการแสดงหน้าเว็บ เบราว์เซอร์จะคำนวณแฮชสำหรับสคริปต์อินไลน์แต่ละตัวและเปรียบเทียบกับสคริปต์ที่ระบุไว้ใน CSP การดาวน์โหลดจากแหล่งข้อมูลที่ไม่รวมอยู่ใน "ไวท์ลิสต์" จะถูกบล็อก
src	ระบุตำแหน่งของไฟล์ด้วยสคริปต์ ค่าแอ็ตทริบิวต์คือ url ของไฟล์ที่มีโปรแกรม JavaScript
พิมพ์	ใช้เพื่อประกาศภาษาสคริปต์ที่ใช้ในการเขียนเนื้อหาของแท็ก

1.3. องค์ประกอบ

ส่วนนี้ประกอบด้วยเนื้อหาทั้งหมดของเอกสาร มีให้สำหรับองค์ประกอบ

ตารางที่ 5. แอ็ตทริบิวต์แท็ก คำอธิบายแอตทริบิวต์ ค่าที่ยอมรับ

หลังจากพิมพ์	เหตุการณ์ที่เกิดขึ้นเมื่อเพจถูกส่งไปพิมพ์หรือหลังจากปิดหน้าต่างการพิมพ์
ก่อนพิมพ์	เหตุการณ์ที่เริ่มทำงานก่อนที่จะส่งเพจไปพิมพ์
ก่อนยกเลิกการโหลด	เหตุการณ์จะเกิดขึ้นเมื่อผู้เยี่ยมชมเริ่มต้นการเปลี่ยนไปยังหน้าอื่นหรือคลิก "ปิดหน้าต่าง" ช่วยให้คุณแสดงข้อความในกล่องโต้ตอบการยืนยันเพื่อแจ้งให้ผู้ใช้ทราบว่าพวกเขาต้องการอยู่หรือออกจากหน้าปัจจุบัน
นะแฮชเชนจ์	เหตุการณ์จะเกิดขึ้นเมื่อส่วนแฮชของ URL เปลี่ยนแปลง เช่น เมื่อผู้ใช้เปลี่ยนจาก example.domain/test.aspx#page1 ไปเป็น example.domain/test.aspx#page2
ส่งข้อความ	เหตุการณ์เกิดขึ้นเมื่อได้รับข้อความผ่านแหล่งเหตุการณ์
เปิดออฟไลน์	เหตุการณ์จะถูกทริกเกอร์โดยเบราว์เซอร์เมื่อเบราว์เซอร์พิจารณาว่าการเชื่อมต่ออินเทอร์เน็ตขาดหายไป
ออนไลน์	เหตุการณ์จะถูกทริกเกอร์โดยเบราว์เซอร์เมื่อการเชื่อมต่ออินเทอร์เน็ตได้รับการกู้คืนแล้ว
บนหน้าซ่อน	เหตุการณ์เกิดขึ้นเมื่อผู้ใช้ออกจากเพจผ่านการนำทาง เช่น คลิกลิงก์ รีเฟรชเพจ กรอกแบบฟอร์ม เป็นต้น
บนเพจโชว์	เหตุการณ์เกิดขึ้นเมื่อผู้ใช้นำทางไปยังหน้าเว็บ หลังจากเหตุการณ์ onload
ยกเลิกการโหลด	เหตุการณ์จะเกิดขึ้นหากเพจไม่โหลดด้วยเหตุผลบางประการ หรือเมื่อปิดหน้าต่างเบราว์เซอร์

HTML เป็นภาษามาร์กอัปของเว็บไซต์ หลายคนคิดว่ามันเป็นการเขียนโปรแกรม แต่ไม่ใช่ HTML ไม่มีตัวแปร การคำนวณ อาร์เรย์ และองค์ประกอบอื่นๆ ที่พบในภาษาการเขียนโปรแกรมใดๆ

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

การสร้างเอกสาร HTML

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

ตามกฎแล้ว Notepad จะใช้เฉพาะในกรณีที่ไม่มีเครื่องมืออื่นอยู่ในมือเท่านั้น ขั้นแรก สร้างเอกสารข้อความแล้วบันทึกในรูปแบบ html หน้าเว็บไซต์ทั้งหมดจะต้องมีนามสกุล html

ภาษา HTML มีลำดับชั้น นั่นคือมีโครงสร้างพิเศษของเอกสาร HTML มันคืออะไร? ลองดูด้านล่างเพื่อความชัดเจน

โครงสร้างเอกสาร HTML ตัวอย่าง

โครงสร้างจะเหมือนกันเสมอ หากคุณต้องการเปลี่ยนแปลงบางสิ่ง เบราว์เซอร์จะไม่สามารถดำเนินการได้ เป็นผลให้คุณจะไม่ได้รับสิ่งที่คุณตั้งใจ

รูปด้านบนแสดงโครงสร้างของไฟล์ html ใดๆ รายการแรกระบุประเภทไฟล์ แท็กนี้ถูกระบุเพียงครั้งเดียว หากคุณใช้โปรแกรมแก้ไขพิเศษ โครงสร้างทั้งหมดจะถูกสร้างขึ้นโดยอัตโนมัติ คุณจะต้องปรับค่าเริ่มต้น

โครงสร้างเอกสาร HTML - แท็กหลัก:

เฟรมเวิร์กของทั้งไซต์ประกอบด้วยแท็กทั้งสามนี้ ให้ความสนใจกับภาพ แท็กเหล่านี้ทั้งหมดมีแท็กปิดพร้อมเครื่องหมาย “/” หากคุณเขียนด้วยมือ ให้คุ้นเคยกับการใส่ทั้งสองแท็กพร้อมกัน ทั้งการเปิดและปิด

กล่าวไว้ข้างต้นว่าหน้าเว็บไซต์มีนามสกุล .html นั่นคือถ้าคุณสร้างเอกสารข้อความ แต่เขียนโค้ดที่ถูกต้อง เบราว์เซอร์จะยังคงแสดงเฉพาะข้อความให้คุณ จะไม่มีการแปลงรหัส

ส่วนหัว

รูปด้านล่างจุดที่ 3 แสดงส่วนหัว ส่วนนี้มีข้อมูลการบริการ ตัวอย่างเช่น คุณสามารถระบุการเข้ารหัส (รายการที่ 4) และชื่อหน้า (รายการที่ 5)

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

โครงสร้างของเอกสาร html ระบุไว้ในส่วนหัวเท่านั้น หากมีการระบุแท็กในส่วนเนื้อหาหรือหลังจากนั้น ตัวจัดการจะไม่สนใจแท็กนั้น

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

การเชื่อมต่อสไตล์

โครงสร้างของเอกสาร HTML ช่วยให้คุณสามารถเชื่อมต่อสไตล์ได้หลายวิธี นอกจากนี้ยังสามารถเขียนแยกกันในแต่ละองค์ประกอบได้ แต่ไม่แนะนำวิธีนี้เนื่องจากโค้ดมีขนาดใหญ่เกินไปและไม่สะดวก

เชื่อมต่อไฟล์ดังนี้

แอตทริบิวต์ href ระบุเส้นทางไปยังไฟล์ หากมีข้อผิดพลาดในเส้นทาง สไตล์จะไม่โหลด จำเป็นต้องมีแอตทริบิวต์ type ซึ่งระบุว่านี่คือไฟล์ css

อีกทางเลือกหนึ่งคือการกำหนดสไตล์โดยตรงในส่วนหัว

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

หากคลาสที่คุณกำลังสร้างจะใช้ในหน้าเดียวเท่านั้น ตัวเลือกนี้จึงเหมาะสำหรับคุณ

การเชื่อมต่อสคริปต์

สคริปต์เชื่อมต่อดังนี้

จำเป็นต้องมีแอตทริบิวต์สองรายการที่นี่: type และ src ในตอนแรกเราระบุว่านี่คือไฟล์ Javascript และอย่างที่สอง - ตำแหน่งของไฟล์ หากคุณพิมพ์ผิดก็จะไม่มีอะไรทำงาน

ส่วนของร่างกาย

โครงสร้างของเอกสาร html นั้นคุณต้องวางเนื้อหาที่ผู้ใช้จะมองเห็นได้เฉพาะในส่วนเนื้อหาเท่านั้น ชื่อของแท็กพูดเพื่อตัวเอง

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

มาดูแท็กพื้นฐานที่สุดที่สามารถใช้ได้ในบริเวณส่วนเนื้อหา หลักๆก็มีไม่มาก คุณจะได้เรียนรู้ทุกสิ่งทุกอย่างเมื่อความรู้และการฝึกฝนของคุณเติบโตขึ้น

แท็กหลัก

โครงสร้างของเอกสาร HTML ต้องมีคำสั่งบังคับในการเขียนองค์ประกอบ แท็กควรล้อมรอบด้วยวงเล็บที่ขอบเสมอ หากไม่มีสิ่งนี้ เบราว์เซอร์จะไม่เข้าใจว่านี่คือแท็ก วงเล็บเปิดจะตามด้วยชื่อขององค์ประกอบ (แท็ก) เสมอ หากเว้นช่องว่างระหว่าง< и именем, то браузер посчитает это текстом.

ลองดูตัวอย่างแท็กรูปภาพ โปรดทราบว่าแท็กนี้ไม่ใช่แท็กปิด ไม่เหมือนลิงก์ ย่อหน้า และอื่นๆ อีกมากมาย

ลำดับของคุณลักษณะไม่สำคัญ แต่การเขียน (การออกแบบ) ของพวกเขามีความสำคัญมาก ชื่อแอตทริบิวต์มาก่อนเสมอ ตามด้วยเครื่องหมายเท่ากับ จากนั้นค่าแอตทริบิวต์จะเขียนด้วยเครื่องหมายคำพูด ค่าอาจแตกต่างกัน - ดิจิทัลหรือข้อความ

คุณลักษณะ src ในแท็กทั้งหมดระบุเส้นทางของไฟล์ที่ต้องการโหลด แอตทริบิวต์ Alt ในทุกองค์ประกอบระบุคำอธิบายสั้นๆ ในกรณีนี้ รูปภาพ bird.jpg จะเต็มไปด้วยคำอธิบาย - ภาพถ่ายนก

นอกจากนี้ คุณสามารถระบุขนาด ความกว้างหรือความสูงเท่านั้น ชื่อ การจัดตำแหน่ง คลาสสไตล์ หรือเส้นขอบ

ลองดูแท็กหลักอื่นๆ ที่ระบุไว้ในส่วนเนื้อหา

	วัตถุประสงค์
	รูปภาพ
	ตัดข้อความขึ้นบรรทัดใหม่
…	ข้อความตัวหนา
	ข้อความที่ถูกขีดฆ่า
	ข้อความที่ขีดเส้นใต้

คุณจะจินตนาการเรื่องทั้งหมดนี้ในหัวของคุณได้อย่างไร?

นักพัฒนามือใหม่ไม่สามารถจินตนาการทั้งหมดนี้โดยคาดเดาได้ในทันที ดูตัวอย่างโครงสร้างหน้าเว็บบางส่วนแล้วคุณจะเข้าใจอย่างแน่นอน

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

โครงสร้างเอกสาร HTML

มาดูโครงสร้างของเอกสาร html เพื่อทำความเข้าใจว่าทุกอย่างทำงานอย่างไร คุณจะพบว่าต้องมีเฟรมใดปรากฏบนเพจจึงจะถือว่าเฟรมนั้นถูกต้อง ( ถูกต้อง).

หากต้องการสร้างหน้าเว็บใด ๆ จะต้องมีชุดแท็กขั้นต่ำ ตั้งอยู่ในตัวอย่างด้านล่าง

วิธีสร้างเว็บไซต์บนอินเทอร์เน็ต

เบราว์เซอร์จะตีความแท็กเหล่านี้ทั้งหมดและแสดงในรูปแบบข้อมูลเดียวสำหรับผู้ใช้ คุณเองสังเกตเห็นว่าเมื่อคุณไปที่ไซต์องค์ประกอบเหล่านี้จะไม่ปรากฏบนหน้าจอ คุณจะเห็นเฉพาะกระดาษห่อสวย ๆ ที่เบราว์เซอร์แสดงเท่านั้น

ตัวอย่างภาพของแท็ก DOCTYPE ของหน้า html

แท็ก DOCTYPE จะอยู่ตอนต้นของหน้าเว็บเสมอ จำเป็นต้องระบุประเภทของเอกสารปัจจุบัน นอกจากนี้เบราว์เซอร์ยังเข้าใจว่าใช้ html เวอร์ชันใด

ในเวอร์ชันล่าสุด 5 ดูเหมือนว่านี้:

แท็ก HTML

เป็นคอนเทนเนอร์ที่บรรจุเนื้อหาทั้งหมดของหน้าเว็บ องค์ประกอบการเปิดและปิดในเอกสารเป็นทางเลือก อย่างไรก็ตาม สไตล์ที่ดีต้องอาศัยการใช้งาน

โดยทั่วไปแล้ว แท็กเปิด html จะมาเป็นอันดับสองหลังจากกำหนดเอกสารโดยใช้ doctype ยิ่งใกล้ชิดจะอยู่ท้ายหน้าเสมอ

แท็กนี้จะบอกเบราว์เซอร์ว่าเอกสาร html ของเราเริ่มต้นและสิ้นสุดที่ใด ดังนั้น องค์ประกอบอื่นๆ ทั้งหมด ( ยกเว้นประเภทเอกสาร) จะต้องซ้อนอยู่ในคอนเทนเนอร์นี้

แท็กหัว

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

เนื้อหาส่วนหัวไม่ได้แสดงโดยตรงบนหน้าเว็บ นอกเหนือจากแท็กชื่อ เขาเป็นผู้รับผิดชอบชื่อหน้า

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

แท็กชื่อ

หัวมีองค์ประกอบที่จำเป็นอย่างหนึ่ง นี่คือแท็กชื่อ เขามีหน้าที่รับผิดชอบว่าชื่อหน้า html จะมีลักษณะอย่างไร สิ่งที่คุณเขียนที่นี่จะปรากฏในแท็บเบราว์เซอร์

จริงจังกับเรื่องนี้!

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

การสร้างเว็บไซต์บนอินเทอร์เน็ตอย่างมืออาชีพพร้อมตัวอย่าง

แน่นอนคุณต้องใส่คำสำคัญและทำให้ชื่อของคุณน่าสนใจยิ่งขึ้น มิฉะนั้น คุณก็จะเสี่ยงต่อการสูญเสียปริมาณการค้นหา

เมตาแท็ก

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

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

ให้ฉันเพิ่มพารามิเตอร์ชุดอักขระให้กับองค์ประกอบและระบุการเข้ารหัสเอกสารที่ต้องการ

การสร้างเว็บไซต์บนอินเทอร์เน็ตอย่างมืออาชีพพร้อมตัวอย่าง

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

อย่าลืมระบุในเอกสารของคุณ มิฉะนั้นอักษรอียิปต์โบราณที่น่าเกลียดจะปรากฏบนเว็บไซต์ของคุณแทนที่จะเป็นข้อความ ( คราโคซซาบรี).

แท็กร่างกาย

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

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

จะต้องมีแท็ก h1 อยู่ภายในร่างกาย นี่คือชื่อของวัสดุ นั่นคือสิ่งที่บทความของคุณจะถูกเรียกว่า ฉันแนะนำให้ตั้งชื่อให้มีความยาวไม่เกิน 55 ตัวอักษรรวมการเว้นวรรค

ไวยากรณ์ HTML

เป็นเรื่องที่ควรกล่าวถึงเล็กน้อยเกี่ยวกับไวยากรณ์ html ลองจัดเรียงแท็กในรูปแบบที่สะดวกทันทีตามตัวอย่างด้านบน แน่นอนคุณสามารถจัดเรียงพวกมันตามลำดับที่ไม่เป็นระเบียบได้

การสร้างเว็บไซต์บนอินเทอร์เน็ตอย่างมืออาชีพพร้อมตัวอย่าง

เนื้อหาของเอกสารจะอยู่ที่นี่และผู้ใช้ทุกคนจะมองเห็นได้

เบราว์เซอร์จะไม่สนใจ

ก็จะแสดงหน้าได้อย่างถูกต้องอยู่ดี แต่จะไม่สะดวกมากหากคุณแก้ไขโค้ด html ของเพจ ดังนั้นจึงไม่แนะนำให้ปั้นและทำอย่างระมัดระวัง

วางแต่ละแท็กบนบรรทัดแยกกันเสมอ และปฏิบัติตามกฎการทำรัง เยื้องแท็กที่ซ้อนกันทั้งหมดหนึ่งแท็บจากองค์ประกอบหลัก

ชื่อเอกสาร ชื่อวัสดุ

ข้อความหลัก

กล่าวคือ แท็ก head ควรเยื้องด้วยแท็บเดียวที่เกี่ยวข้องกับแท็ก html เนื้อความจะอยู่ในระดับที่มีส่วนหัวเนื่องจากมันซ้อนกันอยู่ในคอนเทนเนอร์ html

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

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

ชื่อเอกสาร

ข้อความหลัก

หากมีการซ้อนจำนวนมากวิธีนี้จะช่วยประหยัดพื้นที่และไม่หลงไปกับโครงสร้าง html

ดังที่คุณทราบ แท็กสามารถซ้อนอยู่ภายในกันได้ ตัวอย่างเช่น ข้อความและรูปภาพอยู่ในแท็กที่แตกต่างกัน อย่างไรก็ตาม ยังคงมีองค์ประกอบหลักที่เหมือนกัน

หากแท็กเปิดขึ้นมา จะต้องปิดแท็กนั้น หากว่างเปล่าและไม่มีส่วนฝัง จะไม่สามารถแทรกสิ่งใดลงในแท็กดังกล่าวได้

สิ่งสำคัญคือต้องปฏิบัติตามคำสั่งอย่างเคร่งครัด!

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

ตัวอย่างที่ถูกต้อง:

เนื้อหาของเอกสารจะอยู่ที่นี่และผู้ใช้ทุกคนจะมองเห็นได้

ตัวอย่างที่ไม่ถูกต้อง:

เนื้อหาของเอกสารจะอยู่ที่นี่และผู้ใช้ทุกคนจะมองเห็นได้

นอกจากนี้ องค์ประกอบหลายรายการสามารถซ้อนกันภายในแท็กเดียวได้ แต่หลักการที่นี่เหมือนกัน ก่อนอื่นเราเปิดมัน จากนั้นเราก็ใส่แท็กไว้ตรงนั้นแล้วปิดมัน

เพื่อความสะดวกสูงสุด คุณสามารถใช้ความคิดเห็น html เพิ่มเติมในโค้ดได้ ตัวอย่างเช่น จดบันทึกว่าโค้ดชิ้นนี้รับผิดชอบอะไร สิ่งนี้มีประโยชน์มากในระหว่างการพัฒนา

ความคิดเห็นอาจเป็นบรรทัดเดียวหรือหลายบรรทัดก็ได้

ชื่อเอกสาร

ข้อความหลัก

มันถูกเขียนไว้ระหว่างโครงสร้าง

วิธีสร้างไฟล์ html

บางทีบางท่านไม่ทราบวิธีสร้างไฟล์ html มีโปรแกรมพิเศษมากมายสำหรับงานนี้:

• วงเล็บ
• โน๊ตบุ๊ค
• กระดาษจดบันทึก++
• ข้อความประเสริฐ
• อะตอมและอื่น ๆ

หากคุณมี Windows Notepad จะพร้อมใช้งานตามค่าเริ่มต้นอยู่แล้ว แต่ไม่สะดวกในการใช้งาน อันดับแรก ฉันแนะนำให้ใช้โปรแกรมแก้ไขหน้า HTML ฟรี Notepad++ มีคุณสมบัติมากมายเพื่อความสะดวกในการทำงานกับโค้ด

เมื่อคุณเปิดตัวแก้ไข คุณจะมีไฟล์ว่างใหม่อยู่ตรงหน้าคุณแล้ว เขียนโครงกระดูกของหน้า html ลงไป ( กรอบ) ซึ่งเราได้กล่าวถึงข้างต้น เขาจะต้องอยู่ด้วยเสมอ

การสร้างเว็บไซต์บนอินเทอร์เน็ตอย่างมืออาชีพพร้อมตัวอย่างวิธีสร้างเว็บไซต์บนอินเทอร์เน็ต

เนื้อหาของเอกสารจะอยู่ที่นี่และผู้ใช้ทุกคนจะมองเห็นได้

คุณสามารถเปลี่ยนข้อความให้เหมาะกับคุณได้ โดยทั่วไป นี่จะเป็นหน้า html ที่ง่ายที่สุด

การเข้ารหัส HTML

เมื่อสร้างเพจ ให้รวมการเข้ารหัสไว้ในเมตาแท็กเสมอ นี่คือแท็กบริการที่แทรกอยู่ใน head

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

ตอนนี้สำหรับเรามันมีบทบาทเป็นตัวชี้การเข้ารหัส มีรายการพิเศษที่นี่ มันบอกเบราว์เซอร์ว่าเอกสารถูกสร้างขึ้นในการเข้ารหัส utf-8

ทำไมคุณต้องมีการเข้ารหัสเลย?

ไม่เป็นความลับเลยที่มีการเขียนและพูดภาษาต่างๆ ทั่วโลก ถ้าเราสร้างเพจและเขียนเป็นภาษารัสเซีย จากนั้นในเยอรมนี พวกเขาก็จะสร้างและเขียนเป็นภาษาเยอรมัน ประเทศอื่นๆก็มีภาษาของตัวเองอยู่แล้ว

ก่อนหน้านี้เมื่อสร้างหน้า html จำเป็นต้องระบุการเข้ารหัสซึ่งเราเขียนเป็นภาษารัสเซีย ชาวเยอรมันต้องระบุว่าตนเขียนเป็นภาษาเยอรมันเป็นต้น

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

น่าเสียดายที่สิ่งนี้ไม่ได้ผลเสมอไป

หากเราเยี่ยมชมเว็บไซต์ของจีน เราอาจเห็นสี่เหลี่ยมสีดำหรือเครื่องหมายคำถามแทนสัญลักษณ์ นั่นคือเบราว์เซอร์ไม่เข้าใจว่าอักขระเหล่านี้คืออะไร

การเข้ารหัส html ถูกตั้งค่าไม่ถูกต้อง

เพื่อเป็นการแก้ปัญหานี้ จึงมีการสร้างการเข้ารหัส universal utf-8 ขึ้นมา

เมื่อกลายมาเป็นมาตรฐาน ไม่จำเป็นต้องระบุการเข้ารหัสเฉพาะสำหรับภาษาใดภาษาหนึ่งอีกต่อไป เพียงระบุ universal utf-8 ก็เพียงพอแล้ว และเว็บไซต์ของคุณจะแสดงได้ตามปกติในทุกเบราว์เซอร์

ในขณะเดียวกัน การทำงานกับฐานข้อมูลก็ง่ายขึ้นเช่นกัน ดังนั้น โปรดทราบว่าเราจะระบุการเข้ารหัสเป็น utf-8 เสมอ แต่ที่นี่คุณต้องใส่ใจกับอีกสิ่งหนึ่ง

บันทึก html utf-8

เพื่อให้ทุกอย่างทำงานได้และเบราว์เซอร์จะแสดงเพจ แนะนำให้บันทึกเอกสาร HTML ในรูปแบบ utf-8 โปรแกรม Notepad++ ช่วยเราได้ดีมากในเรื่องนี้

มีรายการ "การเข้ารหัส" ที่นี่ หากการเข้ารหัสของคุณไม่ถูกต้องในขณะนี้ ( เหมือนของฉันในภาพด้านล่าง) จากนั้นคลิกที่รายการ “แปลงเป็น UTF-8 โดยไม่มี BOM”

ในกรณีนี้ ไฟล์ html ของคุณจะถูกแปลงเป็นการเข้ารหัส utf-8 บันทึกการเปลี่ยนแปลงของคุณ

ที่มุมขวาล่างคุณจะพบข้อความว่า “Dos\Windows ANSI as UTF-8” ซึ่งหมายความว่าเอกสารถูกสร้างขึ้นในโหมด utf-8 และการแสดงผลจะเป็นปกติ

และคำแนะนำดังกล่าวทันที!

ไปที่ "ตัวเลือก" -> "การตั้งค่า" มีแท็บเอกสารใหม่อยู่ที่นี่ ทำเครื่องหมายที่ช่อง "UTF-8 โดยไม่มีแท็ก BOM" ทันที ด้วยวิธีนี้ เอกสารใหม่ทั้งหมดจะถูกสร้างขึ้นทันทีด้วยการเข้ารหัสนี้

วิธีบันทึกหน้า html

ชื่อไฟล์สามารถเป็นอะไรก็ได้ แต่โดยค่าเริ่มต้น และโดยเฉพาะอย่างยิ่งหากนี่คือหน้าหลักของเว็บไซต์ ให้บันทึกเป็น index.html

เมื่อเราพิมพ์ที่อยู่ไซต์โดยไม่ระบุหน้าเฉพาะ หมายความว่าเรากำลังขอหน้า index.html นั่นคือเมื่อเราติดต่อกับเซิร์ฟเวอร์ มันจะขยายหน้าดัชนีอย่างแน่นอน

หากเราระบุหน้าใดหน้าหนึ่ง ในที่สุดหน้านั้นก็จะปรากฏขึ้น แต่หากไม่ได้ระบุที่อยู่ก็จะส่งคืนหน้าดัชนี ดังนั้นตามค่าเริ่มต้น เราจะตั้งชื่อเพจนี้ว่า index.html

และอย่างที่คุณควรสังเกตแล้วว่านามสกุลไฟล์จะต้องเป็น html นั่นคือในประเภทไฟล์ให้เลือก "Hyper Text Markup Language" แล้วคลิก "บันทึก"

วิธีการเปิดไฟล์ html

วิธีเปิดไฟล์ html เพื่อดูการแสดงภาพของเพจ ในการดำเนินการนี้ เราใช้เบราว์เซอร์ใดก็ได้: Google Chrome, Opera, Edge, Mozilla Firefox, Safari และอื่น ๆ

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

โดยทั่วไปให้คลิกขวาที่ไฟล์

ในเมนู ชี้ไปที่ "เปิดด้วย" แล้วเลือกตัวเลือกเบราว์เซอร์ที่ต้องการ หากไม่ปรากฏขึ้นให้คลิกที่ "เลือกแอปพลิเคชันอื่น" จากรายการให้เลือกโปรแกรมที่ต้องการสำหรับอ่านหน้า html

หากคุณต้องการแก้ไขโค้ด ให้เลือกโปรแกรมแก้ไขที่เหมาะสม ฉันแนะนำให้ใช้ Notepad++

วิธีดูโค้ด html ของเพจ

ฉันอยากจะบอกคุณด้วยว่าคุณสามารถดูโค้ด html ของเพจได้โดยตรงในเบราว์เซอร์ของคุณได้อย่างไร สิ่งนี้มีประโยชน์มากในทางปฏิบัติ ตัวอย่างเช่น ค้นหาว่าไซต์หนึ่งๆ ใช้โครงสร้างของโค้ด html ใด

การดูโค้ดนั้นง่ายมาก เพียงกดคีย์ผสม Ctrl + U ซอร์สโค้ดของหน้าเว็บไซต์จะเปิดขึ้นในแท็บใหม่

ซอร์สโค้ดของไซต์

คุณยังสามารถเขียนลงในแถบที่อยู่ด้านหน้าที่อยู่หน้าได้:

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

เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์

ในแท็บ "องค์ประกอบ" จะมีโค้ด html ทางด้านซ้าย และ . เครื่องมือนี้สะดวกเพราะคุณสามารถแก้ไขโค้ดและเห็นผลลัพธ์ได้ทันที คำแนะนำอาจแสดงขึ้นระหว่างการแก้ไข สิ่งนี้ก็มีประโยชน์เช่นกัน

นั่นคือทั้งหมด!

ตอนนี้คุณรู้วิธีสร้างหน้า html แล้ว เมื่อต้องการทำเช่นนี้ เราได้ตรวจสอบโครงสร้างของเอกสารเอง ฉันยังให้เครื่องมือบางอย่างแก่คุณเพื่อให้ทำงานกับโค้ดได้อย่างง่ายดาย นอกจากนี้ยังมีกฎสำคัญสำหรับการเข้ารหัสและการทำงานกับไฟล์ อย่าลืมติดตามพวกเขา!

โครงสร้างเอกสาร HTML มาเริ่มงานกันเลย

HTML เริ่มต้นที่ไหน?

เพื่อให้ไฟล์ข้อความกลายเป็นไฟล์ HTML การเปลี่ยนนามสกุลจาก ".txt" เป็น ".html" นั้นไม่เพียงพอ เราต้องปฏิบัติตาม "กฎบรรทัดแรก":

เอกสาร HTML ทุกฉบับที่เป็นไปตามข้อกำหนด HTML ทุกเวอร์ชันจะต้องขึ้นต้นด้วยบรรทัดประกาศเวอร์ชัน HTML !DOCTYPE ซึ่งโดยทั่วไปจะมีลักษณะดังนี้:

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

ตัวอย่างเอกสาร HTML ที่สั้นที่สุด:

งานเริ่มต้นที่ไหน?

จริงๆ แล้วมันไม่สามารถทำได้ด้วยบรรทัดเดียว หลังจากประกาศเวอร์ชันและประเภทของเอกสารแล้ว คุณจะต้องระบุจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร ทำได้โดยใช้แท็กคอนเทนเนอร์ ควรสังเกตว่าเอกสาร HTML ใด ๆ ที่ถูกเปิดด้วยแท็กและปิดด้วย

จากนั้น ระหว่างแท็ก และ คุณควรวางชื่อเรื่องและเนื้อหาของเอกสาร แค่นั้นแหละ! เริ่มต้นแล้ว - คุณได้รับการเตรียมตัวที่ยอดเยี่ยม ไฟล์ HTML พื้นฐานของคุณควรมีลักษณะดังนี้ก่อนที่จะเริ่มต้น:

เคี้ยว?

หากอธิบายตัวอย่างข้างต้นเป็นแผนผัง จะมีลักษณะดังนี้:

แผนภาพแสดงให้เห็นว่าเอกสารประกอบด้วยสองช่วงตึกหลัก - "ส่วนหัว" และ "เนื้อหาเอกสาร" ชื่อถูกกำหนดโดยใช้องค์ประกอบ ศีรษะและร่างกายก็เป็นธาตุ ร่างกาย.

ชื่อเรื่องประกอบด้วยข้อมูล "ทางเทคนิค" เกี่ยวกับเอกสาร แม้ว่าส่วนใหญ่มักจะใช้เพื่อระบุชื่อเรื่องเท่านั้น (ดูองค์ประกอบ ชื่อ).

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

(HTML 1.0) – ความคิดเห็น()

ใช้เพื่อสร้างความคิดเห็นในส่วนใดส่วนหนึ่งของเอกสาร ทุกสิ่งที่อยู่ภายใน ไม่ว่าจะเป็นองค์ประกอบหรือข้อความ จะถูกละเว้นโดยเบราว์เซอร์ (จะไม่ถูกประมวลผลและแสดงบนหน้าจอ)

หมายเหตุ:

	ความคิดเห็นที่อยู่ภายในองค์ประกอบ ชื่อ(เช่นเดียวกับแท็กอื่นๆ) จะถูกตีความว่าเป็นข้อความและจะมองเห็นได้ในส่วนหัวของเอกสาร กล่าวอีกนัยหนึ่ง แท็กภายใน TITLE ไม่มีผลใดๆ
	อย่าขี้เกียจที่จะแสดงความคิดเห็นในทุกสิ่งที่คุณเขียน กฎมหัศจรรย์นี้จะช่วยคุณประหยัดเวลาได้มากเมื่อพยายามค้นหาผลงานของคุณเองในอีกไม่กี่เดือนต่อมา

ชื่อเอกสาร HTML

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

องค์ประกอบที่เกี่ยวข้องกับส่วนหัวของเอกสาร:

		กำหนดจุดเริ่มต้นและจุดสิ้นสุดของชื่อเอกสาร
		กำหนดชื่อของเอกสารทั้งหมด ซึ่งจะแสดงในแถบชื่อเรื่องของหน้าต่างเบราว์เซอร์
		กำหนดที่อยู่ฐานที่ใช้คำนวณลิงก์ที่เกี่ยวข้องภายในเอกสาร
		ใช้เพื่อแทรกสไตล์ชีต CSS ลงในเอกสาร
		อธิบายความสัมพันธ์ของเอกสารกับอ็อบเจ็กต์อื่น
		ใช้เพื่อแทรกข้อมูลเมตา

(HTML 1.0) – หัวหน้า

กำหนดจุดเริ่มต้นและจุดสิ้นสุดของชื่อเอกสาร เป็นคอนเทนเนอร์สำหรับองค์ประกอบที่มีข้อมูลทางเทคนิคเกี่ยวกับเอกสาร - ชื่อ,ฐาน,สไตล์,ลิงค์,เมตา).

(HTML 2.0) – ชื่อเรื่อง

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

(HTML 3.2) – URL ฐาน

ระบุที่อยู่ฐานของเอกสารปัจจุบัน (URL) ซึ่งจะเป็นจุดเริ่มต้นสำหรับการคำนวณ URL ที่เกี่ยวข้องภายในเอกสาร องค์ประกอบไม่มีแท็กปิดท้าย ต้องมีแอตทริบิวต์อย่างน้อยหนึ่งรายการ

คุณสมบัติ:

HREF – ระบุที่อยู่ฐาน (URL) ของเอกสารปัจจุบัน

เป้าหมาย – ระบุชื่อเฟรมที่จะใช้ในไฮเปอร์ลิงก์ตามค่าเริ่มต้น วิธีนี้อาจมีประโยชน์ถ้าคุณต้องการเปิดลิงก์ทั้งหมดในเอกสารในเฟรมอื่น

(HTML 3.2) – สไตล์

ใช้เพื่อแทรกสไตล์ชีต (CSS – Cascade Style Sheet) ลงในเอกสาร

คุณสมบัติ:

TYPE เป็นแอตทริบิวต์ที่จำเป็น ระบุประเภท MIME ของบล็อกสไตล์ที่กำลังแทรก โดยทั่วไป ค่าของแอตทริบิวต์นี้คือ "text/css"

TITLE – ระบุชื่อของสไตล์ชีตที่จะสร้าง จำเป็นหากคุณจะใช้องค์ประกอบ STYLE หลายรายการในเอกสารเดียว ในกรณีนี้ เบราว์เซอร์จะต้องถามผู้ใช้ว่าจะใช้สไตล์ที่แนะนำแบบใดกับเอกสาร

(HTML 2.0) – ลิงก์

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

คุณสมบัติ:

HREF – กำหนด URL ของวัตถุ

REL – กำหนดประเภทของความสัมพันธ์ระหว่างเอกสารปัจจุบันและวัตถุที่กำหนดโดยแอตทริบิวต์ HREF ค่าที่เป็นไปได้:

สไตล์ชีต - ชี้ไปที่ไฟล์ที่มีสไตล์ชีต (CSS) สำหรับเอกสารปัจจุบัน เบราว์เซอร์จะโหลดไฟล์ css จากที่อยู่ที่ระบุในแอตทริบิวต์ HREF และนำไปใช้กับเอกสารปัจจุบัน (ดูองค์ประกอบเพิ่มเติม สไตล์) หน้าแรก – ชี้ไปที่หน้าหลักของไซต์ toc ของคุณ เนื้อหา – ชี้ไปที่ไฟล์ที่มีสารบัญของเอกสารนี้ ดัชนี – ชี้ไปที่ไฟล์ที่มีข้อมูลสำหรับการค้นหาดัชนีของเอกสารปัจจุบัน อภิธานศัพท์ – ชี้ไปที่ไฟล์ที่มีรายการคำศัพท์ที่เกี่ยวข้องกับเอกสารปัจจุบัน ลิขสิทธิ์ – ชี้ไปที่หน้าบนเว็บไซต์ที่พูดถึงผู้สร้าง ลิขสิทธิ์ ฯลฯ ขึ้น ผู้ปกครอง – ​​ชี้ไปที่หน้า "ผู้ปกครอง" (เอกสารที่สูงกว่าหนึ่งขั้นตอนในโครงสร้างลำดับชั้นของไซต์ของคุณ) เด็ก – ชี้ไปที่หน้า “ลูก” (เอกสารที่ต่ำกว่าหนึ่งขั้นในโครงสร้างลำดับชั้นของเว็บไซต์ของคุณ) ถัดไป – ชี้ไปที่หน้าถัดไปตามลำดับเอกสาร (เช่น หน้าถัดไปของแคตตาล็อกอิเล็กทรอนิกส์ เอกสารประกอบ หรือพจนานุกรม) ก่อนหน้า – ชี้ไปที่หน้าก่อนหน้าในลำดับเอกสาร สุดท้าย สิ้นสุด – ชี้ไปที่หน้าสุดท้ายของลำดับเอกสาร แรก – ชี้ไปที่หน้าแรกในลำดับเอกสาร ความช่วยเหลือ – ชี้ไปยังหน้าที่มีความช่วยเหลือ (เช่น สำหรับการนำทางไซต์ของคุณ)

TYPE—ระบุประเภท MIME สำหรับออบเจ็กต์ที่ระบุในแอตทริบิวต์ HREF

หมายเหตุ:

(HTML 2.0) – เมตาดาต้า

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

คุณสมบัติ:

NAME – กำหนดชื่อของเมตาโพสต์ มีชื่อที่กำหนดไว้ล่วงหน้ามากมาย ซึ่งบางชื่อคุณสามารถดูได้ในตัวอย่างด้านล่าง

HTTP-EQUIV – กำหนดชื่อของรายการเมตา เกือบจะคล้ายกับแอตทริบิวต์ NAME แต่ใช้เฉพาะเมื่อจำเป็นต้องส่งข้อมูลเพิ่มเติมในส่วนหัว HTTP

เนื้อหา – กำหนดค่าให้กับรายการเมตาที่กำหนดในแอตทริบิวต์ NAME (หรือ HTTP-EQUIV)

เฟรมใช้เพื่อแบ่งหน้าต่างเบราว์เซอร์ออกเป็นหลายส่วน โดยแต่ละส่วนแสดงถึงเอกสาร HTML (เฟรม) ที่แยกจากกัน ตามกฎแล้ว เฟรมจะถูกใช้เพื่ออำนวยความสะดวกในการนำทางไซต์และสร้างเมนูการนำทาง อย่างไรก็ตาม นักพัฒนาส่วนใหญ่หลีกเลี่ยงการใช้เฟรมและด้วยเหตุผลที่ดี พยายามใช้เฟรมเมื่อจำเป็นจริงๆ เท่านั้น

องค์ประกอบสำหรับการสร้างเฟรมและใช้งาน:

หมายเหตุ:

เฟรมเซ็ต

(HTML 4.0) – ชุดเฟรม

กำหนดโครงสร้างเฟรม (หน้าต่าง) ของเอกสาร: ขนาดและตำแหน่งของเฟรมบนเพจ สร้าง แทนเนื้อความของเอกสาร (นั่นคือองค์ประกอบ ร่างกายไม่ได้ใช้ในเอกสาร) เปิดและปิดรายการเฟรมที่กำหนดโดยองค์ประกอบ กรอบ- ระหว่างแท็กเริ่มต้นและแท็กสิ้นสุด ยกเว้น FRAME และ โนเฟรมอาจมีองค์ประกอบ FRAMESET อื่น ๆ นั่นคือองค์ประกอบ FRAMESET รองรับโครงสร้างเฟรมที่ซ้อนกัน

คุณสมบัติ:

ROWS – กำหนดจำนวนและขนาดของเฟรมแนวนอน (เฟรมแถว) ในหน้าต่างเบราว์เซอร์ ค่านี้เป็นรายการขนาดเฟรมที่คั่นด้วยเครื่องหมายจุลภาค วิธีการตั้งค่าขนาด:

เป็นเปอร์เซ็นต์ของความสูงของพื้นที่ไคลเอ็นต์ของหน้าต่างเบราว์เซอร์ ตัวอย่างเช่น: "30%,30%,40%";

ในรูปของเครื่องหมาย “*” (เครื่องหมายดอกจัน) ระบุว่าเฟรมนั้นใช้พื้นที่ว่างทั้งหมดของหน้าต่างเบราว์เซอร์ที่ไม่ถูกครอบครองโดยเฟรมอื่นที่มีขนาดระบุอย่างชัดเจน ตัวอย่างเช่น เครื่องหมายดอกจันในรายการ "25%,25%,*" จะเท่ากับ 50%

COLS – กำหนดจำนวนและขนาดของเฟรมแนวตั้ง (เฟรมคอลัมน์) ในหน้าต่างเบราว์เซอร์ ค่านี้เป็นรายการขนาดเฟรมที่คั่นด้วยเครื่องหมายจุลภาค มิติข้อมูลได้รับการตั้งค่าในลักษณะเดียวกับในแอตทริบิวต์ ROWS ก่อนหน้า

BORDER – กำหนดความกว้างของเส้นขอบเฟรมเป็นพิกเซล คุณลักษณะนี้ใช้งานได้ในเบราว์เซอร์ Netscape เท่านั้น

FRAMEBORDER – กำหนดว่าเฟรมที่อยู่ภายใน FRAMESET มีเส้นขอบหรือไม่ ค่าที่เป็นไปได้:

ใช่ – กรอบแสดงผล; ไม่หรือ 0 – ไม่แสดงเฟรม

เบราว์เซอร์ Netscape ไม่รองรับคุณลักษณะนี้อย่างสมบูรณ์ และใช้แอตทริบิวต์ BORDER เพื่อกำหนดความกว้างของเส้นขอบโดยรวม

FRAMESPACING – กำหนดระยะห่าง (ที่เรียกว่า “พื้นที่สีเทา”) ระหว่างเฟรมในหน่วยพิกเซล แอ็ตทริบิวต์นี้จำเป็นสำหรับการสร้างเฟรมไร้ขอบ

บันทึก:

(HTML 4.0) – Frame กำหนดเฟรมและคุณสมบัติภายในโครงสร้าง FRAMESET (ดูรายการ เฟรมเซ็ต) คุณสมบัติ:

SRC เป็นแอตทริบิวต์ที่จำเป็น ระบุที่อยู่ (URL) ของไฟล์ HTML ที่แสดงในเฟรมนี้

NAME – กำหนดชื่อของเฟรมนี้ ซึ่งจะถูกใช้เพื่อเชื่อมโยงจากเอกสารอื่น ๆ โดยใช้แอตทริบิวต์ TARGET ในภายหลัง (ดูองค์ประกอบ ก- ค่าต้องเป็นชื่อใดๆ ที่ไม่มีการเว้นวรรคโดยใช้อักขระละตินและตัวเลข ชื่อต้องไม่ขึ้นต้นด้วยตัวเลขหรืออักขระพิเศษ

MARGINWIDTH – กำหนดความกว้าง (เป็นพิกเซล) ของระยะขอบซ้ายและขวาของเฟรม หากไม่ได้ระบุแอตทริบิวต์ เบราว์เซอร์จะกำหนดขนาดการเยื้องที่เหมาะสมที่สุดโดยอัตโนมัติ

MARGINHEIGHT – กำหนดความกว้าง (เป็นพิกเซล) ของระยะขอบด้านบนและด้านล่างของเฟรม หากไม่ได้ระบุแอตทริบิวต์ เบราว์เซอร์จะกำหนดขนาดการเยื้องที่เหมาะสมที่สุดโดยอัตโนมัติ

SCROLLING – กำหนดสถานะของแถบเลื่อนสำหรับเนื้อหาของเฟรม ค่าที่เป็นไปได้:

ใช่ – แสดงแถบเลื่อน ไม่ – ไม่แสดงแถบเลื่อน อัตโนมัติ – แสดงแถบเลื่อนหากจำเป็น (หากเอกสารที่ระบุในแอตทริบิวต์ SRC ไม่พอดีกับกรอบ)

NORESIZE – ไม่อนุญาตให้ปรับขนาดเฟรม คุณลักษณะนี้เป็นแฟล็กและไม่จำเป็นต้องมีค่า

FRAMEBORDER – กำหนดว่าเฟรมมีเฟรมหรือไม่ ค่าที่เป็นไปได้:

ใช่ – กรอบแสดงผล; ไม่หรือ 0 – ไม่แสดงเฟรม

เบราว์เซอร์ Netscape ไม่สนับสนุนแอตทริบิวต์นี้อย่างสมบูรณ์ และใช้แอตทริบิวต์ BORDER ขององค์ประกอบ FRAMESET เพื่อกำหนดความกว้างของเฟรมทั่วโลก

ตัวอย่าง (ไฟล์index.html):
	...เบราว์เซอร์ของคุณไม่รองรับเฟรม...

การดำเนินการนี้จะแบ่งหน้าต่างเบราว์เซอร์ออกเป็นสามเฟรมดังที่แสดงด้านล่าง นอกจากนี้ frame1.html จะมีความกว้าง 265 พิกเซล และ frame2.html จะมีความสูง 165 พิกเซล

โนเฟรม

(HTML 4.0) – ไม่มีเฟรม

สิ่งใดก็ตามระหว่างแท็กเริ่มต้นและแท็กสิ้นสุดขององค์ประกอบที่กำหนดจะถูกแสดงผลโดยเบราว์เซอร์ เว้นแต่จะรองรับเฟรม องค์ประกอบ NOFRAMES ไม่มีแอตทริบิวต์และต้องอยู่ภายในองค์ประกอบ เฟรมเซ็ต.

ตัวอย่าง:
	เบราว์เซอร์ของคุณไม่รองรับเฟรม

ธรรมดาใช่ไหม?

ถึงเวลาดูเอกสาร HTML ธรรมดาเป็นตัวอย่าง เราจะเขียนโค้ดที่ส่งผลให้มีการแสดงวลี “Hello, world!” ในหน้าต่างเบราว์เซอร์ (แปลตามตัวอักษรจากภาษาอังกฤษ -“ สวัสดีชาวโลก!”) การฝึกเขียนโค้ดประเภทนี้มักเป็นประสบการณ์ครั้งแรกในการเรียนรู้ภาษาใหม่ การกำหนดปัญหานี้ดึงดูดความสนใจของนักเรียนไปยังแง่มุมสำคัญหลายประการของภาษาการเขียนโปรแกรม (ในกรณีของเราคือภาษามาร์กอัป) สิ่งสำคัญประการหนึ่งคือโครงสร้างพื้นฐานของโปรแกรม (ในกรณีของเราคือหน้าเว็บ)

ประเภทเอกสาร

องค์ประกอบนี้เรียกอีกอย่างว่าองค์ประกอบรูทเนื่องจากองค์ประกอบอื่นๆ ทั้งหมดของเอกสารอยู่ในนั้น องค์ประกอบรูทสามารถมีลูกได้เพียงสองคนเท่านั้น: และ

องค์ประกอบส่วนหัว

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

องค์ประกอบจะต้องเป็นลูกแรกขององค์ประกอบ ไม่มีเนื้อหาหรือองค์ประกอบต้องอยู่ข้างหน้า:

องค์ประกอบชื่อ

องค์ประกอบจัดเตรียมชื่อข้อความสำหรับเอกสาร เอกสาร HTML ทุกฉบับต้องมีองค์ประกอบเดียวเท่านั้น ซึ่งจะต้องอยู่ภายในองค์ประกอบ:

ชื่อหน้าต่าง

เบราว์เซอร์จะแสดงเนื้อหาขององค์ประกอบเป็นชื่อ (ชื่อ) ของเอกสาร ซึ่งโดยทั่วไปจะปรากฏที่ด้านบนของหน้าต่างเบราว์เซอร์หรือในชื่อของแท็บ:

องค์ประกอบของร่างกาย

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

แค่นั้นแหละ! เริ่มต้นแล้ว - คุณได้รับการเตรียมตัวที่ยอดเยี่ยม นี่คือลักษณะของโครงสร้างเอกสารที่เสร็จสมบูรณ์พร้อมกับวลี “Hello, world!” ที่แสดงในหน้าต่างเบราว์เซอร์:

ชื่อหน้าต่าง สวัสดีชาวโลก!