เรียนรู้ภาษามาร์กอัป HTML พื้นฐาน HTML สำหรับผู้เริ่มต้น หัวเรื่องของหน้า h1 h2 h3

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:

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

< title >

องค์ประกอบสำหรับการวางชื่อเรื่องของเว็บเพจ บรรทัดข้อความที่อยู่ภายในองค์ประกอบนี้จะไม่แสดงในเอกสาร แต่อยู่ในแถบชื่อเรื่องของหน้าต่างเบราว์เซอร์ องค์ประกอบนี้มีอิทธิพลอย่างมากในการโปรโมตในเครื่องมือค้นหาเพราะว่า เครื่องมือค้นหาให้ความสนใจเป็นพิเศษกับแท็ก TITLE คำแนะนำของฉัน: อย่าสร้างข้อความที่ยาวมากในแท็กนี้ ( 65 ตัวอักษรก็เพียงพอแล้ว).

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

< body >

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

คุณลักษณะที่มีประโยชน์ที่สุดประการหนึ่งของแท็กนี้ ซึ่งส่งผลต่อการออกแบบหน้าเว็บก็คือ

พื้นหลัง = "เส้นทางไปยังไฟล์พื้นหลัง"

การออกแบบพื้นหลังที่เรียบง่ายนั้นขึ้นอยู่กับการตั้งค่าสี

bgcolor=”#FFFFFF”

สีพื้นหลังระบุด้วยเลขฐานสิบหกสองหลักสามตัวที่กำหนดความเข้มของสีแดง เขียว และน้ำเงิน (rbg)

เนื่องจากคุณสามารถเปลี่ยนพื้นหลังของหน้าได้ คุณจึงสามารถเปลี่ยนสีข้อความได้เช่นกัน เพื่อจุดประสงค์นี้มีคุณลักษณะดังต่อไปนี้

text="#RRGGBB"

หากต้องการตั้งค่าสีข้อความของไฮเปอร์ลิงก์ ให้ใช้แอตทริบิวต์ต่อไปนี้

ลิงค์ =”#RRGGBB”

คุณยังสามารถระบุการเปลี่ยนสีสำหรับไฮเปอร์ลิงก์ที่เลือกล่าสุดของผู้ใช้ได้

องค์ประกอบส่วนหัว หัวข้อมี 6 ระดับ ซึ่งกำหนดไว้ดังนี้
หัวเรื่อง
หัวเรื่อง
หัวเรื่อง
หัวเรื่อง
หัวเรื่อง
หัวเรื่อง

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

align=”ซ้าย” align=”center” align=”right”

หากต้องการสร้างย่อหน้าใหม่ ให้ใช้แท็ก

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

องค์ประกอบ ALIGN ซึ่งสามารถตั้งค่าการจัดตำแหน่งย่อหน้าได้:

ซ้าย

อยู่ตรงกลาง

ขวา

ข้อความระหว่างองค์ประกอบเหล่านี้จะจัดแนวตามความกว้าง

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

  • จัด = "ซ้าย"
  • จัด = "ศูนย์"
  • จัด =”ขวา”
  • align=”จัดชิดขอบ”

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

ข้อความฟรี

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

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

รายการ

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

รายการที่พบบ่อยที่สุดคือรายการที่ไม่มีหมายเลข ( รายการที่ไม่เรียงลำดับ- มันถูกนำเสนอด้านล่าง:

  • รายการ 1
  • รายการ 2
  • รายการ 3

องค์ประกอบ ul เป็นการเน้นรายการ ช่วยให้คุณสามารถแยกรายการหนึ่งออกจากรายการอื่นได้ องค์ประกอบ li แสดงถึงแต่ละรายการ

ตาราง

เป็นหนึ่งในวิธีที่จำเป็นที่สุดในการจัดรูปแบบข้อมูลบนเว็บเพจ ความสะดวกหลักคือเบราว์เซอร์จะดูแลการวาดทั้งตาราง ขนาดของเฟรมสามารถปรับให้เข้ากับขนาดของหน้าต่างเบราว์เซอร์ได้โดยอัตโนมัติ และแน่นอนว่าเป็นขนาดของบรรทัดข้อความและรูปภาพในเซลล์ตารางด้วย นอกเหนือจากทุกสิ่งทุกอย่างแล้ว ตารางยังช่วยให้คุณแก้ปัญหาการออกแบบได้หลายอย่าง เช่น จัดแนวส่วนของหน้าให้สัมพันธ์กัน วางรูปภาพและข้อความไว้ติดกัน จัดการการออกแบบสี และอื่นๆ เมื่อสร้างตาราง หลักการของการซ้อนจะถูกใช้: ภายในองค์ประกอบตารางหลัก (TABLE) จะมีการสร้างองค์ประกอบจำนวนหนึ่งซึ่งกำหนดแถว (TR) และภายในองค์ประกอบเหล่านี้จะมีองค์ประกอบเพื่ออธิบายแต่ละเซลล์ในแถว (TD, ไทย).

เพื่อให้เข้าใจโครงสร้างของตารางที่มีอยู่หรือพัฒนาตารางใหม่ มีกฎข้อหนึ่งที่ลำดับขององค์ประกอบจะอธิบายตารางจากบนลงล่างและจากขวาไปซ้าย ตัวอย่างเช่น หากองค์ประกอบ TABLE ตามด้วยองค์ประกอบ TR นี่แสดงว่ามีการกำหนดแถวตารางใหม่ ทุกอย่างที่อยู่ด้านหลังองค์ประกอบนี้จะอยู่ในบรรทัดเดียว (จากขวาไปซ้าย) นี่อาจเป็นลำดับขององค์ประกอบ TD ( เซลล์) ตารางอื่นและอื่นๆ หลังจากที่องค์ประกอบ TR ใหม่ปรากฏขึ้น คำอธิบายของบรรทัดถัดไปจะเริ่มต้นขึ้น ไปเรื่อยๆ จนถึงจุดสิ้นสุดของตาราง (tag).
ตารางสามารถจัดตำแหน่งในแนวนอนโดยใช้แอตทริบิวต์ align:

  • align="ซ้าย" - ซ้าย;
  • align="center" - ตรงกลาง;
  • align="right" - ไปทางขวา

ความกว้างของตารางสามารถตั้งค่าเป็นพิกเซลหรือเป็นเปอร์เซ็นต์ของความกว้างของหน้าในหน้าต่างเบราว์เซอร์ได้ ตัวอย่างเช่น: width=400 หรือ width=50%

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

สถานการณ์

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

สคริปต์คือโค้ดโปรแกรมที่รวมไว้เป็นข้อความต้นฉบับในเพจและดำเนินการโดยเบราว์เซอร์เมื่อมีการดูเพจ สคริปต์สามารถเขียนด้วย JavaScript พัฒนาโดย Netscape หรือใน Visual Basic Script ( วีบีสคริปต์) พัฒนาโดยไมโครซอฟต์

แท็กนี้อนุญาตให้คุณแยกข้อความโปรแกรมสคริปต์ออกจากข้อมูลหน้าอื่น แท็ก SCRIPT ต้องมีแอตทริบิวต์ภาษา ซึ่งระบุภาษาและสามารถรับค่าต่อไปนี้:

  • จาวาสคริปต์ - โค้ดใน JavaScript;
  • vbscript - รหัสในภาษา VBScript

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

ประเภท = "ข้อความ / จาวาสคริปต์"

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

จากคุณลักษณะมาตรฐาน คุณสามารถใช้แอตทริบิวต์ชุดอักขระได้

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

—
—
—

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

—
—
—
- แค่สคริปต์
—
- alert("คุณได้เขียนสคริปต์แรกของคุณแล้ว!")
—
—
—
—

เป็นหน้าเรียบง่าย แต่มีสคริปต์บรรทัดเดียว เมื่อใช้วิธีการแจ้งเตือน ข้อความจะแสดงก่อนโหลด และจะค้างจนกว่าผู้ใช้จะคลิกปุ่ม OK การดาวน์โหลดจะไม่ดำเนินต่อไป
เป็นไปได้ว่าเพจนั้นจะถูกดูในเบราว์เซอร์ที่ไม่รองรับการเขียนสคริปต์ มีการระบุองค์ประกอบ NOSCRIPT สำหรับสิ่งนี้ โปรแกรมรับชมสมัยใหม่ไม่สนใจเนื้อหา องค์ประกอบนี้สามารถใช้ได้หลายวิธี ขั้นแรก คุณสามารถแสดงโฆษณาภายในได้ดังนี้: “ เบราว์เซอร์ของคุณไม่สามารถรันสคริปต์ที่จำเป็นสำหรับการดูหน้าเว็บนี้ได้!»ประการที่สอง ภายในองค์ประกอบ คุณสามารถพัฒนาเพจเวอร์ชันที่เรียบง่ายได้โดยไม่ต้องใช้สคริปต์ ประการที่สาม คุณสามารถสร้างลิงก์ไปยังเอกสาร HTML อื่นได้ องค์ประกอบ NOSCRIPT ต้องมีแท็กปิดท้าย

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

HTML เป็นภาษามาร์กอัปไฮเปอร์เท็กซ์ที่ทำให้อินเทอร์เน็ตเป็นสิ่งที่เรารู้จักและชื่นชอบ ต้องขอบคุณเครื่องมือที่ยอดเยี่ยมนี้ที่ทำให้เว็บไซต์ดูสวยงามและทันสมัย ​​และยังช่วยให้ใช้งานได้ง่ายอีกด้วย HTML เพียงจัดองค์ประกอบของหน้าเว็บให้อยู่ในรูปแบบที่ใช้งานง่าย งานของมันเทียบได้กับสิ่งที่คนอย่าง MS Word หรือ OpenOffice ทำ พวกเขาเปลี่ยนตัวอักษรจำนวนมากที่ไม่มีรูปแบบให้เป็นเอกสารที่มีย่อหน้า ข้อความตัวหนา ตัวเอียง ตาราง และแม้แต่รูปภาพ ภาษา HTML ทำสิ่งเดียวกันโดยประมาณ โดยมีข้อแตกต่างเพียงอย่างเดียวคือเอกสารจะแสดงในเบราว์เซอร์ และความสามารถของเครื่องมือนี้กว้างกว่าความสามารถของโปรแกรมแก้ไขข้อความมาก แท็กใช้สำหรับมาร์กอัป - คำสั่งพิเศษที่อธิบายโครงสร้างของหน้าเว็บ พวกเขาจะอยู่ในวงเล็บมุม - เพื่อให้เบราว์เซอร์สามารถแยกความแตกต่างจากข้อความจำนวนมากได้ ต่อไป เราจะพูดถึงพื้นฐานของ HTML สำหรับผู้เริ่มต้น

บรรณาธิการภาพ

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

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

แท็ก

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

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

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

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

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

ศีรษะ

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

ลิงค์

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

ร่างกาย

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

บทความที่เกี่ยวข้อง