เกี่ยวกับการสอน HTML5
ด้วย HTML คุณสามารถสร้างเว็บไซต์ของคุณเองได้บทแนะนำนี้สอนคุณทุกอย่างเกี่ยวกับ HTML เป็นเรื่องง่ายที่จะเรียนรู้ - คุณจะสนุกกับมัน
ตัวอย่างในทุกบท
บทแนะนำ HTML นี้ประกอบด้วยตัวอย่าง HTML หลายร้อยฉบับด้วยตัวแก้ไข HTML ออนไลน์ของเราคุณสามารถแก้ไข HTML และคลิกที่ปุ่มเพื่อดูผลลัพธ์
ทดลองกดตรงนี้
บทนำ HTML
HTML คืออะไร?
HTML เป็นภาษามาร์คอัปมาตรฐานสำหรับการสร้างเว็บเพจ
HTML เป็นภาษามาร์คอัปมาตรฐานสำหรับการสร้างเว็บเพจ
- HTML ย่อมาจาก Hyper Text Markup Language
- HTML อธิบายโครงสร้างของเว็บเพจโดยใช้มาร์กอัพ
- องค์ประกอบ HTML เป็นส่วนสร้างของหน้า HTML
- องค์ประกอบ HTML จะแสดงโดยแท็ก
- แท็ก HTML จะติดป้ายเนื้อหาบางส่วนเช่น "หัวเรื่อง", "ย่อหน้า", "ตาราง" เป็นต้น
- เบราว์เซอร์ไม่แสดงแท็ก HTML แต่ใช้เพื่อสร้างเนื้อหาของเพจ
เอกสาร HTML แบบง่าย
ตัวอย่างอธิบาย
- คำประกาศ <! DOCTYPE html> กำหนดให้เอกสารนี้เป็น HTML5
- องค์ประกอบ <html> เป็นองค์ประกอบรากของหน้า HTML
- องค์ประกอบ <head> ประกอบด้วยข้อมูลเมตาเกี่ยวกับเอกสาร
- องค์ประกอบ <title> ระบุชื่อเรื่องของเอกสาร
- อิลิเมนต์ <body> มีเนื้อหาเพจที่มองเห็นได้
- องค์ประกอบ <h1> กำหนดหัวข้อใหญ่
- องค์ประกอบ <p> กำหนดย่อหน้า
แท็ก HTML
แท็ก HTML เป็นชื่อองค์ประกอบล้อมรอบด้วยวงเล็บมุม:
<tagname>ใส่เนื้อหาที่นี่...</tagname>
- แท็ก HTML มักมาเป็นคู่เช่น <p> และ </ p>
- แท็กแรกในคู่คือแท็กเริ่มต้นแท็กที่สองคือแท็กสิ้นสุด
- แท็กสิ้นสุดถูกเขียนขึ้นเช่นเดียวกับแท็กเริ่มต้น แต่มีเครื่องหมายทับเพื่อแทรกก่อนชื่อแท็ก
เคล็ดลับ: แท็กเริ่มต้นเรียกอีกอย่างว่าแท็กเปิดและแท็กสิ้นสุดแท็กปิด
เว็บเบราเซอร์
วัตถุประสงค์ของเว็บเบราเซอร์ (Chrome, IE, Firefox, Safari) คือการอ่านเอกสาร HTML และแสดงข้อมูลเหล่านั้น
เบราว์เซอร์ไม่แสดงแท็ก HTML แต่จะใช้เพื่อกำหนดวิธีการแสดงเอกสาร:
โครงสร้างเพจ HTML
ด้านล่างคือการแสดงโครงสร้าง HTML page:
หมายเหตุ: เฉพาะเนื้อหาภายในส่วน <body> (พื้นที่สีขาวด้านบน) จะปรากฏขึ้นในเบราเซอร์
ปฏิญญา <! DOCTYPE>
คำประกาศ <! DOCTYPE> แสดงถึงประเภทเอกสารและช่วยให้เบราว์เซอร์แสดงหน้าเว็บอย่างถูกต้อง
ต้องปรากฏเพียงครั้งเดียวที่ด้านบนของหน้า (ก่อนแท็ก HTML)
การประกาศ <! DOCTYPE> ไม่คำนึงถึงตัวพิมพ์เล็กและใหญ่
การประกาศ <! DOCTYPE> สำหรับ HTML คือ:
เวอร์ชัน HTML
ตั้งแต่วันแรก ๆ ของเว็บมี HTML เวอร์ชันหลายแบบ:
บรรณาธิการ HTML
เขียน HTML โดยใช้ Notepad หรือ
TextEditเว็บเพจสามารถสร้างและแก้ไขได้โดยใช้โปรแกรมแก้ไข HTML
แบบมืออาชีพอย่างไรก็ตามสำหรับการเรียนรู้ HTML
เราขอแนะนำให้ใช้โปรแกรมแก้ไขข้อความแบบง่ายๆเช่น Notepad (PC) หรือ
TextEdit (Mac)เราเชื่อว่าการใช้โปรแกรมแก้ไขข้อความแบบง่ายๆเป็นวิธีที่ดีในการเรียนรู้ HTMLทำตามสี่ขั้นตอนด้านล่างเพื่อสร้างหน้าเว็บแรกของคุณด้วย Notepad หรือ TextEdit
ขั้นตอนที่ 1: เปิด Notepad (พีซี)
Windows 8 หรือใหม่กว่า:
เปิดหน้าจอเริ่มต้น (สัญลักษณ์หน้าต่างที่ด้านล่างซ้ายบนหน้าจอ) พิมพ์ Notepad
Windows 7 หรือเก่ากว่า:
เปิดเริ่ม> โปรแกรม> อุปกรณ์เสริม> Notepad
ขั้นที่ 1: เปิด TextEdit (Mac)
เปิด Finder> Applications> TextEdit
นอกจากนี้เปลี่ยนการตั้งค่าบางอย่างเพื่อให้แอพพลิเคชันสามารถบันทึกไฟล์ได้อย่างถูกต้อง ใน Preferences> Format> เลือก "Plain Text"
จากนั้นภายใต้ "Open and Save" เลือกช่องทำเครื่องหมายว่า "Ignore rich text commands ในไฟล์ HTML"
จากนั้นเปิดเอกสารใหม่เพื่อวางโค้ด
ขั้นตอนที่ 2: เขียน HTML บางส่วน
เขียนหรือคัดลอก HTML บางส่วนลงใน Notepad
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
ขั้นที่ 3: บันทึกเพจ HTML
บันทึกไฟล์ในคอมพิวเตอร์ของคุณ เลือก File> Save as ในเมนู Notepad
ตั้งชื่อไฟล์ "index.htm" และตั้งค่าการเข้ารหัสเป็น UTF-8 (ซึ่งเป็นรหัสที่ต้องการสำหรับไฟล์ HTML)
คุณสามารถใช้. htm หรือ. html เป็นส่วนขยายของไฟล์ ไม่มีความแตกต่างกันขึ้นอยู่กับคุณ
ขั้นตอนที่ 4: ดูหน้า HTML ในเบราเซอร์ของคุณ
เปิดไฟล์ HTML ที่บันทึกไว้ในเบราว์เซอร์ที่คุณชื่นชอบ (ดับเบิลคลิกที่ไฟล์หรือคลิกขวา - และเลือก "เปิดด้วย")
ผลลัพธ์จะมีลักษณะดังนี้:
ตัวอย่างพื้นฐาน HTML
อย่ากังวลหากตัวอย่างเหล่านี้ใช้แท็กที่คุณไม่ได้เรียนรู้คุณจะได้เรียนรู้เกี่ยวกับพวกเขาในบทต่อไป
เอกสาร HTML
เอกสาร HTML ทั้งหมดต้องเริ่มต้นด้วยการประกาศประเภทเอกสาร: <! DOCTYPE html>.
เอกสาร HTML เองเริ่มต้นด้วย <html> และลงท้ายด้วย </ html>
ส่วนที่มองเห็นได้ของเอกสาร HTML อยู่ระหว่าง <body> และ </ body>
ส่วนหัว HTML
ส่วนหัว HTML ถูกกำหนดด้วยแท็ก <h1> ถึง <h6>
<h1> กำหนดส่วนหัวที่สำคัญที่สุด <h6> กำหนดหัวเรื่องที่สำคัญน้อยที่สุด:
ทดลองกดตรงนี้
ย่อหน้า HTML
ย่อหน้า HTML ถูกกำหนดด้วยแท็ก <p>:
ทดลองกดตรงนี้
ลิงก์ HTML
ลิงก์ HTML ถูกกำหนดด้วย <a> tag:
ปลายทางของลิงก์ถูกระบุไว้ในแอตทริบิวต์ href
ใช้แอตทริบิวต์เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ HTML
รูปภาพ HTML
ภาพ HTML ถูกกำหนดด้วยแท็ก <img>
ไฟล์ต้นฉบับ (src) ข้อความทดแทน (alt) ความกว้างและความสูงจะมีให้เป็นแอตทริบิวต์:
ทดลองกดตรงนี้
องค์ประกอบ HTML
องค์ประกอบ HTML ประกอบด้วยแท็กเริ่มต้นและแท็กสิ้นสุดโดยมีเนื้อหาแทรกอยู่ระหว่าง:
<tagname> เนื้อหาไปที่นี่ </ tagname>
องค์ประกอบ HTML คือทุกอย่างตั้งแต่แท็กเริ่มต้นไปจนถึงแท็กสิ้นสุด:
<p> วรรคแรกของฉัน </ p>
องค์ประกอบ HTML ที่ไม่มีเนื้อหาเรียกว่าองค์ประกอบว่างเปล่า อิลิเมนต์ว่างเปล่าไม่มีแท็กสิ้นสุดเช่นองค์ประกอบ <br> (ซึ่งระบุว่ามีตัวแบ่งบรรทัด)
องค์ประกอบ HTML ที่ซ้อนกัน
องค์ประกอบ HTML สามารถซ้อนกันได้ (องค์ประกอบสามารถมีองค์ประกอบได้)
เอกสาร HTML ทั้งหมดประกอบด้วยองค์ประกอบ HTML ที่ซ้อนกันอยู่
ตัวอย่างนี้ประกอบด้วยองค์ประกอบ HTML สี่รายการ:
ทดลองกดตรงนี้
ตัวอย่างอธิบาย
องค์ประกอบ <html> กำหนดเอกสารทั้งหมด
มีแท็กเริ่มต้น <html> และแท็กสิ้นสุด </ html>
เนื้อหาขององค์ประกอบเป็นอีกหนึ่งองค์ประกอบ HTML (องค์ประกอบ <body>)
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
องค์ประกอบ <body> กำหนดเนื้อหาของเอกสาร
มีแท็กเริ่มต้น <body> และแท็กสิ้นสุด </ body>
เนื้อหาขององค์ประกอบเป็นอีกสององค์ประกอบ HTML (<h1> และ <p>)
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
องค์ประกอบ <h1> กำหนดหัวเรื่อง
มีแท็กเริ่มต้น <h1> และแท็กสิ้นสุด </ h1>
เนื้อหาขององค์ประกอบคือ: หัวเรื่องแรกของฉัน
<h1>My First Heading</h1>
องค์ประกอบ <p> กำหนดย่อหน้า
มีแท็กเริ่มต้น <p> และแท็กสิ้นสุด </ p>
เนื้อหาขององค์ประกอบคือ: ย่อหน้าแรกของฉัน
<p>My first paragraph.</p>
อย่าลืมแท็กสิ้นสุด
องค์ประกอบ HTML บางอย่างจะแสดงอย่างถูกต้องแม้ว่าคุณจะลืมแท็กสิ้นสุด:
ตัวอย่างข้างต้นทำงานได้ในทุกเบราว์เซอร์เนื่องจากแท็กปิดถือว่าเป็นอุปกรณ์เสริม
อย่าพึ่งพาเรื่องนี้ อาจทำให้เกิดผลลัพธ์ที่ไม่คาดคิดและ / หรือข้อผิดพลาดหากคุณลืมแท็กสิ้นสุด
องค์ประกอบ HTML ที่ว่างเปล่า
องค์ประกอบ HTML ที่ไม่มีเนื้อหาเรียกว่าองค์ประกอบว่างเปล่า
<br> เป็นองค์ประกอบว่างเปล่าโดยไม่มีแท็กปิด (แท็ก <br> กำหนดตัวแบ่งบรรทัด)
องค์ประกอบที่ว่างเปล่าสามารถ "ปิด" ในแท็กเปิดดังนี้: <br />
HTML5 ไม่ต้องการให้องค์ประกอบว่างเปล่าถูกปิด แต่ถ้าคุณต้องการตรวจสอบเข้มงวดหรือถ้าคุณต้องการให้เอกสารของคุณสามารถอ่านได้โดย
XML parsers คุณต้องปิดองค์ประกอบ HTML ทั้งหมดอย่างถูกต้อง
ใช้แท็กตัวพิมพ์เล็ก
แท็ก HTML ไม่สำคัญต่อกรณี: <P> หมายถึงเช่นเดียวกับ <p>
มาตรฐาน
HTML5 ไม่จำเป็นต้องมีแท็กตัวพิมพ์เล็ก แต่ W3C
แนะนำให้ใช้อักษรตัวพิมพ์เล็กใน HTML
และต้องการพิมพ์เล็กสำหรับประเภทเอกสารที่เข้มงวดมากขึ้นเช่น XHTML
ที่ W3Schools เราใช้แท็กตัวพิมพ์เล็กเสมอ
แอตทริบิวต์ HTML
- องค์ประกอบ HTML ทั้งหมดสามารถมีแอตทริบิวต์ได้
- แอตทริบิวต์ให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ
- ระบุแอตทริบิวต์ในแท็กเริ่มต้นเสมอ
- แอตทริบิวต์มักจะมาในชื่อ / ค่าคู่เช่น: name = "value"
แอตทริบิวต์ lang
ภาษาของเอกสารสามารถประกาศได้ในแท็ก <html>
ภาษาถูกประกาศด้วยแอตทริบิวต์ lang
การประกาศภาษาเป็นสิ่งสำคัญสำหรับแอปพลิเคชันการเข้าถึง (โปรแกรมอ่านหน้าจอ) และเครื่องมือค้นหา:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
ตัวอักษรสองตัวแรกระบุภาษา (en) หากมีภาษาให้ใช้ตัวอักษรอีกสองตัว (สหรัฐฯ)
แอตทริบิวต์ชื่อ
ที่นี่มีการเพิ่มแอตทริบิวต์ title ลงในองค์ประกอบ <p> ค่าของแอตทริบิวต์ title จะแสดงเป็นเคล็ดลับเครื่องมือเมื่อคุณเลื่อนเมาส์ไปวางเหนือย่อหน้า:
ทดลองกดตรงนี้
แอตทริบิวต์ href
ลิงก์ HTML ถูกกำหนดด้วยแท็ก <a> มีการระบุที่อยู่ลิงก์ในแอตทริบิวต์ href:
ทดลองกดตรงนี้
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับลิงก์และแท็ก <a> ในบทแนะนำนี้ในภายหลัง
คุณสมบัติขนาด
ภาพ HTML ถูกกำหนดด้วยแท็ก <img>
ชื่อไฟล์ของแหล่งที่มา (src) และขนาดของภาพ (ความกว้างและความสูง) ทั้งหมดมีให้เป็นแอตทริบิวต์:
ทดลองกดตรงนี้
ขนาดภาพถูกระบุเป็นพิกเซล: width = "104" หมายถึง 104 พิกเซลของหน้าจอกว้าง
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับภาพและแท็ก <img> ในบทแนะนำนี้ในภายหลัง
แอ็ตทริบิวต์ alt
แอตทริบิวต์ alt จะระบุข้อความทางเลือกที่จะใช้เมื่อไม่สามารถแสดงรูปภาพได้
คุณสามารถอ่านค่าของแอตทริบิวต์ได้โดยโปรแกรมอ่านหน้าจอ ด้วยวิธีนี้ผู้ที่ "กำลังฟัง" ไปยังหน้าเว็บเช่น คนตาบอดสามารถ "ได้ยิน" องค์ประกอบ
ทดลองกดตรงนี้
เราขอแนะนำ: ใช้แอตทริบิวต์ตัวพิมพ์เล็ก
มาตรฐาน HTML5 ไม่จำเป็นต้องมีชื่อแอตทริบิวต์ตัวพิมพ์เล็ก
แอตทริบิวต์ title สามารถเขียนด้วยตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กเช่นชื่อเรื่องหรือ TITLE
W3C แนะนำให้ใช้อักษรตัวพิมพ์เล็กใน HTML และต้องการพิมพ์เล็กสำหรับประเภทเอกสารที่เข้มงวดมากขึ้นเช่น XHTML
ที่ W3Schools เราใช้ชื่อแอตทริบิวต์ตัวพิมพ์เล็กเสมอ
เราแนะนำ: ค่าแอตทริบิวต์ที่อ้างถึง
มาตรฐาน HTML5 ไม่จำเป็นต้องมีคำพูดรอบ ๆ ค่าแอตทริบิวต์
แอตทริบิวต์ href ที่แสดงไว้ข้างต้นสามารถเขียนเป็น:
ทดลองกดตรงนี้
W3C แนะนำคำพูดในรูปแบบ HTML และเรียกร้องคำพูดสำหรับประเภทเอกสารที่เข้มงวดมากขึ้นเช่น XHTML
บางครั้งก็จำเป็นต้องใช้คำพูด ตัวอย่างนี้จะไม่แสดงแอตทริบิวต์ title อย่างถูกต้องเนื่องจากมีช่องว่าง:
การใช้คำพูดเป็นเรื่องปกติมากที่สุด การใส่เครื่องหมายคำพูดอาจทำให้เกิดข้อผิดพลาด
ที่ W3Schools เรามักใช้คำพูดรอบ ๆ ค่าแอตทริบิวต์
คำพูดแบบเดี่ยวหรือแบบคู่?
เครื่องหมายคำพูดคู่รอบค่าแอตทริบิวต์เป็นคำที่ใช้กันทั่วไปใน HTML แต่สามารถใช้เครื่องหมายคำพูดเดี่ยวได้
ในบางกรณีเมื่อค่าแอ็ตทริบิวต์มีเครื่องหมายคำพูดคู่ก็จำเป็นต้องใช้เครื่องหมายคำพูดเดี่ยว:
<p title='John "ShotGun" Nelson'>
หรือในทางกลับกัน:
<p title="John 'ShotGun' Nelson">
บทสรุปบท
- องค์ประกอบ HTML ทั้งหมดสามารถมีแอตทริบิวต์ได้
- แอตทริบิวต์ title ให้ข้อมูล "tool-tip" เพิ่มเติม
- แอตทริบิวต์ href ให้ข้อมูลที่อยู่สำหรับลิงก์
- แอตทริบิวต์ความกว้างและความสูงให้ข้อมูลขนาดสำหรับรูปภาพ
- แอตทริบิวต์ alt ให้ข้อความสำหรับโปรแกรมอ่านหน้าจอ
- ที่ W3Schools เราใช้ชื่อแอตทริบิวต์ตัวพิมพ์เล็กเสมอ
- ที่ W3Schools เราจะระบุค่าแอตทริบิวต์ด้วยเครื่องหมายคำพูดคู่เสมอ
________________________________________________________________________
แอตทริบิวต์ HTML
ด้านล่างนี้เป็นรายการตามตัวอักษรของคุณลักษณะบางอย่างที่มักใช้ใน HTML:
รายการแอตทริบิวต์ทั้งหมดสำหรับแต่ละองค์ประกอบ HTML มีอยู่ใน: HTML Attribute Reference
ส่วนหัว HTML
หัวเรื่องถูกกำหนดด้วยแท็ก <h1> ถึง <h6>
<h1> กำหนดส่วนหัวที่สำคัญที่สุด <h6> กำหนดหัวเรื่องที่สำคัญน้อยที่สุด
ทดลองกดตรงนี้
หมายเหตุ: เบราเซอร์จะเพิ่มพื้นที่สีขาวบางส่วน (ขอบ) ก่อนและหลังหัวเรื่อง
หัวเรื่องมีความสำคัญ
เครื่องมือค้นหาใช้หัวข้อเพื่อสร้างดัชนีโครงสร้างและเนื้อหาของหน้าเว็บของคุณ
ผู้ใช้กวาดหน้าเว็บของคุณไปตามหัวเรื่อง สิ่งสำคัญคือต้องใช้ส่วนหัวเพื่อแสดงโครงสร้างเอกสาร
<h1> ควรใช้หัวเรื่องสำหรับหัวเรื่องหลักตามด้วย <h2> หัวเรื่องแล้วสำคัญที่ไม่สำคัญ <h3> เป็นต้น
หมายเหตุ: ใช้หัวเรื่อง HTML สำหรับหัวเรื่องเท่านั้น อย่าใช้หัวเรื่องเพื่อทำให้ข้อความใหญ่หรือเป็นตัวหนา
กฎแนวนอน HTML
แท็ก <hr> กำหนดการแบ่งหัวข้อตามหน้า HTML และมักแสดงเป็นกฎแนวนอน
องค์ประกอบ <hr> ใช้เพื่อแยกเนื้อหา (หรือกำหนดการเปลี่ยนแปลง) ในหน้า HTML:
ทดลองกดตรงนี้
องค์ประกอบ HTML <head>
องค์ประกอบ HTML <head> ไม่มีส่วนเกี่ยวข้องกับหัวเรื่อง HTML
องค์ประกอบ <head> เป็นคอนเทนเนอร์สำหรับข้อมูลเมตา ข้อมูลเมตา HTML เป็นข้อมูลเกี่ยวกับเอกสาร HTML ข้อมูลเมตาไม่ปรากฏขึ้น
องค์ประกอบ <head> ถูกวางไว้ระหว่างแท็ก <html> และ <body> แท็ก:
ทดลองกดตรงนี้
หมายเหตุ: ข้อมูลเมตามักจะกำหนดชื่อเอกสารชุดอักขระรูปแบบลิงก์สคริปต์และข้อมูลเมตาอื่น ๆ
วิธีการดูที่มา HTML?
คุณเคยเห็นหน้าเว็บและสงสัยว่า "เฮ้พวกเขาทำอย่างนั้นได้อย่างไร?"
ดูรหัสแหล่งที่มา HTML:
หากต้องการค้นหาให้คลิกขวาที่หน้าเว็บและเลือก
"ดูแหล่งที่มาของหน้าเว็บ" (ใน Chrome) หรือ "ดูแหล่งที่มา" (ใน IE)
หรือคล้ายกันในเบราว์เซอร์อื่น ๆ ซึ่งจะเปิดหน้าต่างที่มีซอร์สโค้ด HTML ของหน้า
ตรวจสอบองค์ประกอบ HTML:
คลิกขวาที่องค์ประกอบ
(หรือพื้นที่ว่าง) แล้วเลือก "ตรวจสอบ" หรือ "ตรวจสอบองค์ประกอบ"
เพื่อดูองค์ประกอบต่างๆที่ประกอบขึ้นจาก (คุณจะเห็นทั้ง HTML และ CSS) นอกจากนี้คุณยังสามารถแก้ไข HTML หรือ CSS ได้ทันทีในแผงควบคุมองค์ประกอบหรือลักษณะที่เปิดขึ้น
ย่อหน้า HTML
องค์ประกอบ HTML <p> กำหนดย่อหน้า:
ทดลองกดตรงนี้
หมายเหตุ: เบราเซอร์จะเพิ่มพื้นที่สีขาวบางส่วน (ขอบ) ก่อนและหลังย่อหน้า
การแสดงผล HTML
คุณไม่แน่ใจว่า HTML จะแสดงอย่างไร
หน้าจอขนาดใหญ่หรือเล็กและหน้าต่างที่ปรับขนาดจะสร้างผลลัพธ์ที่แตกต่างกัน
ด้วย HTML คุณจะไม่สามารถเปลี่ยนเอาต์พุตโดยการเพิ่มช่องว่างหรือบรรทัดพิเศษในโค้ด HTML ของคุณ
เบราเซอร์จะลบช่องว่างและบรรทัดพิเศษออกเมื่อหน้าแสดง:
ทดลองกดตรงนี้
อย่าลืมแท็กสิ้นสุด
เบราเซอร์ส่วนใหญ่จะแสดง HTML อย่างถูกต้องแม้ว่าคุณจะลืมแท็กสิ้นสุด:
ทดลองกดตรงนี้
ตัวอย่างข้างต้นจะทำงานได้ในเบราว์เซอร์ส่วนใหญ่ แต่อย่าพึ่งพา
หมายเหตุ: การวางแท็กสิ้นสุดอาจทำให้เกิดผลลัพธ์หรือข้อผิดพลาดที่ไม่คาดคิด
การแบ่งบรรทัด HTML
องค์ประกอบ HTML <br> กำหนดเส้นแบ่ง
ใช้ <br> ถ้าคุณต้องการแบ่งบรรทัด (บรรทัดใหม่) โดยไม่ต้องเริ่มย่อหน้าใหม่:
ทดลองกดตรงนี้
แท็ก 2 เป็นแท็กว่างเปล่าซึ่งหมายความว่าแท็กไม่มีแท็กสิ้นสุด
ปัญหาบทกวี
บทกวีนี้จะแสดงในบรรทัดเดียว:
ทดลองกดตรงนี้
องค์ประกอบ <pre> HTML <
องค์ประกอบ HTML <pre> กำหนดข้อความที่จัดรูปแบบไว้ล่วงหน้า
ข้อความภายในองค์ประกอบ
<pre> จะปรากฏขึ้นในแบบอักษรความกว้างคงที่ (โดยปกติจะเป็น Courier)
และจะเก็บรักษาทั้งช่องว่างและตัวแบ่งบรรทัด:
ทดลองกดตรงนี้
การอ้างอิงแท็ก HTML
การอ้างอิงแท็ก W3Schools 'ประกอบด้วยข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ HTML และแอตทริบิวต์
ลักษณะ HTML
ทดลองกดตรงนี้
แอตทริบิวต์สไตล์ HTML
การกำหนดลักษณะขององค์ประกอบ HTML สามารถทำได้ด้วยแอตทริบิวต์ style
แอตทริบิวต์สไตล์ HTML มีไวยากรณ์ต่อไปนี้:
<tagname
style="property:value;">
พร็อพเพอร์ตี้เป็นคุณสมบัติ CSS ค่านี้เป็นค่า CSS
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ CSS ในบทแนะนำนี้ในภายหลัง
สีพื้นหลัง HTML
คุณสมบัติพื้นหลังสีกำหนดสีพื้นหลังสำหรับองค์ประกอบ HTML
ตัวอย่างนี้กำหนดสีพื้นหลังของหน้าเป็นสีน้ำเงิน:
ทดลองกดตรงนี้
สีข้อความ HTML
คุณสมบัติสีกำหนดสีข้อความสำหรับองค์ประกอบ HTML:
ทดลองกดตรงนี้
แบบอักษร HTML
คุณสมบัติ font-family กำหนดแบบอักษรที่จะใช้สำหรับองค์ประกอบ HTML:
ทดลองกดตรงนี้
ขนาดข้อความ HTML
คุณสมบัติ font-size กำหนดขนาดตัวอักษรสำหรับอิลิเมนต์ HTML:
ทดลองกดตรงนี้
การจัดตำแหน่งข้อความ HTML
คุณสมบัติการจัดตำแหน่งข้อความกำหนดการจัดแนวข้อความในแนวนอนสำหรับองค์ประกอบ HTML:
ทดลองกดตรงนี้
บทสรุปบท
- ใช้แอตทริบิวต์ style สำหรับการจัดองค์ประกอบองค์ประกอบ HTML
- ใช้สีพื้นหลังสำหรับสีพื้นหลัง
- ใช้สีสำหรับสีข้อความ
- ใช้แบบอักษรครอบครัวสำหรับแบบอักษรข้อความ
- ใช้แบบอักษรขนาดสำหรับขนาดตัวอักษร
- ใช้ text-align สำหรับจัดตำแหน่งข้อความ
การจัดรูปแบบข้อความ HTML
ทดลองกดตรงนี้
องค์ประกอบการจัดรูปแบบ HTML
ในบทก่อนหน้าคุณได้เรียนรู้เกี่ยวกับแอตทริบิวต์ HTML style
HTML ยังกำหนดองค์ประกอบพิเศษสำหรับการกำหนดข้อความที่มีความหมายพิเศษ
HTML ใช้องค์ประกอบเช่น <b> และ <i> ในการจัดรูปแบบเอาต์พุตเช่นข้อความตัวหนาหรือตัวเอียง
องค์ประกอบการจัดรูปแบบถูกออกแบบมาเพื่อแสดงข้อความประเภทพิเศษ:
- <b> - ข้อความที่เป็นตัวหนา
- <strong> - ข้อความสำคัญ
- <i> - ตัวเอียง
- <em> - เน้นข้อความ
- <mark> - ทำเครื่องหมายข้อความแล้ว
- <small> - ข้อความขนาดเล็ก
- <del> - ลบข้อความแล้ว
- <ins> - แทรกข้อความ
- <sub> - ข้อความบริบท
- <sup> - ข้อความแทนที่
HTML <b> และ <strong> องค์ประกอบ
องค์ประกอบ HTML <b> กำหนดข้อความเป็นตัวหนาโดยไม่มีความสำคัญเป็นพิเศษ
ทดลองกดตรงนี้
องค์ประกอบ HTML <strong> กำหนดข้อความที่มีความเข้มและมีความหมาย "strong" ที่เพิ่มขึ้น
ทดลองกดตรงนี้
HTML <i> และ <em> องค์ประกอบ
องค์ประกอบ HTML <i> จะกำหนดข้อความตัวเอียงโดยไม่มีความสำคัญเป็นพิเศษ
ทดลองกดตรงนี้
องค์ประกอบ HTML <em> กำหนดข้อความที่เน้นย้ำโดยมีความหมายเพิ่มขึ้น
ทดลองกดตรงนี้
หมายเหตุ:
เบราว์เซอร์แสดง <strong> เป็น <b> และ <em> เป็น
<i> อย่างไรก็ตามมีความแตกต่างในความหมายของแท็กเหล่านี้: <b>
และ <i> กำหนดข้อความเป็นตัวเอียงและตัวเอียง แต่ <strong> และ
<em> หมายความว่าข้อความเป็น "สำคัญ"
________________________________________________________________________
องค์ประกอบ HTML <small>
องค์ประกอบ HTML <small> กำหนดข้อความขนาดเล็ก:
ทดลองกดตรงนี้
องค์ประกอบ HTML <mark>
องค์ประกอบ HTML <mark> กำหนดข้อความที่มีเครื่องหมายหรือเน้น:
ทดลองกดตรงนี้
องค์ประกอบ HTML <del>
องค์ประกอบ HTML <del> กำหนดข้อความที่ถูกลบ (ลบ)
ทดลองกดตรงนี้
องค์ประกอบ HTML <ins>
องค์ประกอบ HTML <ins> กำหนดข้อความแทรก (เพิ่ม)
ทดลองกดตรงนี้
องค์ประกอบ HTML <sub>
องค์ประกอบ HTML <sub> กำหนดข้อความ subscripted
ทดลองกดตรงนี้
องค์ประกอบ HTML <sup>
องค์ประกอบ HTML <sup> กำหนดข้อความที่มีส่วนหัว
ทดลองกดตรงนี้
องค์ประกอบการจัดรูปแบบ HTML
HTML การอ้าง และ องค์ประกอบการอ้างอิง
การอ้าง
HTML <q> สำหรับใบเสนอราคาแบบสั้น
องค์ประกอบ HTML <q> กำหนดคำพูดสั้น ๆ
เบราเซอร์มักแทรกเครื่องหมายคำพูดรอบ ๆ องค์ประกอบ <q>
HTML <blockquote> สำหรับใบเสนอราคา
องค์ประกอบ HTML <blockquote> กำหนดส่วนที่ยกมาจากแหล่งอื่น
เบราว์เซอร์มักเยื้อง <blockquote> องค์ประกอบ
HTML <abbr> สำหรับคำย่อ
องค์ประกอบ HTML <abbr> กำหนดคำย่อหรือคำย่อ
เครื่องหมายย่อที่ทำเครื่องหมายสามารถให้ข้อมูลที่เป็นประโยชน์แก่เบราว์เซอร์ระบบแปลภาษาและเครื่องมือค้นหา
HTML <address> สำหรับข้อมูลการติดต่อ
องค์ประกอบ HTML <address> กำหนดข้อมูลผู้ติดต่อ (ผู้เขียน / เจ้าของ) ของเอกสารหรือบทความ
ส่วน <address> มักจะแสดงเป็นตัวเอียง เบราว์เซอร์ส่วนใหญ่จะเพิ่มตัวแบ่งบรรทัดก่อนและหลังองค์ประกอบ
HTML <cite> สำหรับชื่องาน
องค์ประกอบ HTML <cite> กำหนดชื่องาน
เบราเซอร์มักแสดง <cite> องค์ประกอบในตัวเอียง
HTML <bdo> สำหรับการแทนที่แบบสองทิศทาง
องค์ประกอบ HTML <bdo> กำหนดการทับสองทิศทาง
องค์ประกอบ <bdo> ถูกใช้เพื่อแทนที่ทิศทางข้อความปัจจุบัน:
HTML การอ้าง และ องค์ประกอบการอ้างอิง
ความคิดเห็น HTML
ใช้แท็กความคิดเห็นเพื่อแทรกความคิดเห็นในซอร์สโค้ด HTML
<!-- Write your comments here -->
สังเกตว่ามีเครื่องหมายอัศเจรีย์ (!) อยู่ในแท็กเปิด แต่ไม่อยู่ในแท็กปิด
หมายเหตุ: เบราเซอร์จะไม่แสดงความคิดเห็น แต่สามารถช่วยในการจัดทำเอกสารซอร์สโค้ด HTML ของคุณได้
ด้วยความคิดเห็นคุณสามารถวางคำเตือนและการแจ้งเตือนไว้ใน HTML ของคุณ:
ข้อคิดเห็นยังดีสำหรับการดีบัก HTML เพราะคุณสามารถแสดงความคิดเห็นออกบรรทัด HTML ของโค้ดทีละรายการเพื่อค้นหาข้อผิดพลาด:
ข้อคิดเห็นตามเงื่อนไข
คุณอาจสะดุดเมื่อมีข้อคิดเห็นตามเงื่อนไขใน HTML:
<!--[if IE 9]>
.... some HTML here ....
<![endif]-->
ความคิดเห็นที่มีเงื่อนไขระบุแท็ก HTML บางอย่างที่จะเรียกใช้โดย Internet Explorer เท่านั้น
เว็บเบราเซอร์
วัตถุประสงค์ของเว็บเบราเซอร์ (Chrome, IE, Firefox, Safari) คือการอ่านเอกสาร HTML และแสดงข้อมูลเหล่านั้น
เบราว์เซอร์ไม่แสดงแท็ก HTML แต่จะใช้เพื่อกำหนดวิธีการแสดงเอกสาร:
เบราว์เซอร์ไม่แสดงแท็ก HTML แต่จะใช้เพื่อกำหนดวิธีการแสดงเอกสาร:
โครงสร้างเพจ HTML
ด้านล่างคือการแสดงโครงสร้าง HTML page:
หมายเหตุ: เฉพาะเนื้อหาภายในส่วน <body> (พื้นที่สีขาวด้านบน) จะปรากฏขึ้นในเบราเซอร์
ปฏิญญา <! DOCTYPE>
คำประกาศ <! DOCTYPE> แสดงถึงประเภทเอกสารและช่วยให้เบราว์เซอร์แสดงหน้าเว็บอย่างถูกต้อง
ต้องปรากฏเพียงครั้งเดียวที่ด้านบนของหน้า (ก่อนแท็ก HTML)
การประกาศ <! DOCTYPE> ไม่คำนึงถึงตัวพิมพ์เล็กและใหญ่
การประกาศ <! DOCTYPE> สำหรับ HTML คือ:
เวอร์ชัน HTML
ตั้งแต่วันแรก ๆ ของเว็บมี HTML เวอร์ชันหลายแบบ:
บรรณาธิการ HTML
เขียน HTML โดยใช้ Notepad หรือ
TextEditเว็บเพจสามารถสร้างและแก้ไขได้โดยใช้โปรแกรมแก้ไข HTML
แบบมืออาชีพอย่างไรก็ตามสำหรับการเรียนรู้ HTML
เราขอแนะนำให้ใช้โปรแกรมแก้ไขข้อความแบบง่ายๆเช่น Notepad (PC) หรือ
TextEdit (Mac)เราเชื่อว่าการใช้โปรแกรมแก้ไขข้อความแบบง่ายๆเป็นวิธีที่ดีในการเรียนรู้ HTMLทำตามสี่ขั้นตอนด้านล่างเพื่อสร้างหน้าเว็บแรกของคุณด้วย Notepad หรือ TextEdit
ขั้นตอนที่ 1: เปิด Notepad (พีซี)
Windows 8 หรือใหม่กว่า:
เปิดหน้าจอเริ่มต้น (สัญลักษณ์หน้าต่างที่ด้านล่างซ้ายบนหน้าจอ) พิมพ์ Notepad
Windows 7 หรือเก่ากว่า:
เปิดเริ่ม> โปรแกรม> อุปกรณ์เสริม> Notepad
ขั้นที่ 1: เปิด TextEdit (Mac)
เปิด Finder> Applications> TextEdit
นอกจากนี้เปลี่ยนการตั้งค่าบางอย่างเพื่อให้แอพพลิเคชันสามารถบันทึกไฟล์ได้อย่างถูกต้อง ใน Preferences> Format> เลือก "Plain Text"
จากนั้นภายใต้ "Open and Save" เลือกช่องทำเครื่องหมายว่า "Ignore rich text commands ในไฟล์ HTML"
จากนั้นเปิดเอกสารใหม่เพื่อวางโค้ด
ขั้นตอนที่ 2: เขียน HTML บางส่วน
เขียนหรือคัดลอก HTML บางส่วนลงใน Notepad
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
ขั้นที่ 3: บันทึกเพจ HTML
บันทึกไฟล์ในคอมพิวเตอร์ของคุณ เลือก File> Save as ในเมนู Notepad
ตั้งชื่อไฟล์ "index.htm" และตั้งค่าการเข้ารหัสเป็น UTF-8 (ซึ่งเป็นรหัสที่ต้องการสำหรับไฟล์ HTML)
คุณสามารถใช้. htm หรือ. html เป็นส่วนขยายของไฟล์ ไม่มีความแตกต่างกันขึ้นอยู่กับคุณ
ขั้นตอนที่ 4: ดูหน้า HTML ในเบราเซอร์ของคุณ
เปิดไฟล์ HTML ที่บันทึกไว้ในเบราว์เซอร์ที่คุณชื่นชอบ (ดับเบิลคลิกที่ไฟล์หรือคลิกขวา - และเลือก "เปิดด้วย")
ผลลัพธ์จะมีลักษณะดังนี้:
ตัวอย่างพื้นฐาน HTML
อย่ากังวลหากตัวอย่างเหล่านี้ใช้แท็กที่คุณไม่ได้เรียนรู้คุณจะได้เรียนรู้เกี่ยวกับพวกเขาในบทต่อไป
เอกสาร HTML
เอกสาร HTML ทั้งหมดต้องเริ่มต้นด้วยการประกาศประเภทเอกสาร: <! DOCTYPE html>.
เอกสาร HTML เองเริ่มต้นด้วย <html> และลงท้ายด้วย </ html>
ส่วนที่มองเห็นได้ของเอกสาร HTML อยู่ระหว่าง <body> และ </ body>
ส่วนหัว HTML
ส่วนหัว HTML ถูกกำหนดด้วยแท็ก <h1> ถึง <h6>
<h1> กำหนดส่วนหัวที่สำคัญที่สุด <h6> กำหนดหัวเรื่องที่สำคัญน้อยที่สุด:
ทดลองกดตรงนี้
ย่อหน้า HTML
ย่อหน้า HTML ถูกกำหนดด้วยแท็ก <p>:
ทดลองกดตรงนี้
ลิงก์ HTML
ลิงก์ HTML ถูกกำหนดด้วย <a> tag:
ปลายทางของลิงก์ถูกระบุไว้ในแอตทริบิวต์ href
ใช้แอตทริบิวต์เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ HTML
รูปภาพ HTML
ภาพ HTML ถูกกำหนดด้วยแท็ก <img>
ไฟล์ต้นฉบับ (src) ข้อความทดแทน (alt) ความกว้างและความสูงจะมีให้เป็นแอตทริบิวต์:
ทดลองกดตรงนี้
องค์ประกอบ HTML
องค์ประกอบ HTML ประกอบด้วยแท็กเริ่มต้นและแท็กสิ้นสุดโดยมีเนื้อหาแทรกอยู่ระหว่าง:
<tagname> เนื้อหาไปที่นี่ </ tagname>
องค์ประกอบ HTML คือทุกอย่างตั้งแต่แท็กเริ่มต้นไปจนถึงแท็กสิ้นสุด:
<p> วรรคแรกของฉัน </ p>
องค์ประกอบ HTML ที่ไม่มีเนื้อหาเรียกว่าองค์ประกอบว่างเปล่า อิลิเมนต์ว่างเปล่าไม่มีแท็กสิ้นสุดเช่นองค์ประกอบ <br> (ซึ่งระบุว่ามีตัวแบ่งบรรทัด)
องค์ประกอบ HTML ที่ซ้อนกัน
องค์ประกอบ HTML สามารถซ้อนกันได้ (องค์ประกอบสามารถมีองค์ประกอบได้)
เอกสาร HTML ทั้งหมดประกอบด้วยองค์ประกอบ HTML ที่ซ้อนกันอยู่
ตัวอย่างนี้ประกอบด้วยองค์ประกอบ HTML สี่รายการ:
ทดลองกดตรงนี้
ตัวอย่างอธิบาย
องค์ประกอบ <html> กำหนดเอกสารทั้งหมด
มีแท็กเริ่มต้น <html> และแท็กสิ้นสุด </ html>
เนื้อหาขององค์ประกอบเป็นอีกหนึ่งองค์ประกอบ HTML (องค์ประกอบ <body>)
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
องค์ประกอบ <body> กำหนดเนื้อหาของเอกสาร
มีแท็กเริ่มต้น <body> และแท็กสิ้นสุด </ body>
เนื้อหาขององค์ประกอบเป็นอีกสององค์ประกอบ HTML (<h1> และ <p>)
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
องค์ประกอบ <h1> กำหนดหัวเรื่อง
มีแท็กเริ่มต้น <h1> และแท็กสิ้นสุด </ h1>
เนื้อหาขององค์ประกอบคือ: หัวเรื่องแรกของฉัน
<h1>My First Heading</h1>
องค์ประกอบ <p> กำหนดย่อหน้า
มีแท็กเริ่มต้น <p> และแท็กสิ้นสุด </ p>
เนื้อหาขององค์ประกอบคือ: ย่อหน้าแรกของฉัน
<p>My first paragraph.</p>
อย่าลืมแท็กสิ้นสุด
องค์ประกอบ HTML บางอย่างจะแสดงอย่างถูกต้องแม้ว่าคุณจะลืมแท็กสิ้นสุด:
ตัวอย่างข้างต้นทำงานได้ในทุกเบราว์เซอร์เนื่องจากแท็กปิดถือว่าเป็นอุปกรณ์เสริม
อย่าพึ่งพาเรื่องนี้ อาจทำให้เกิดผลลัพธ์ที่ไม่คาดคิดและ / หรือข้อผิดพลาดหากคุณลืมแท็กสิ้นสุด
องค์ประกอบ HTML ที่ว่างเปล่า
องค์ประกอบ HTML ที่ไม่มีเนื้อหาเรียกว่าองค์ประกอบว่างเปล่า
<br> เป็นองค์ประกอบว่างเปล่าโดยไม่มีแท็กปิด (แท็ก <br> กำหนดตัวแบ่งบรรทัด)
องค์ประกอบที่ว่างเปล่าสามารถ "ปิด" ในแท็กเปิดดังนี้: <br />
HTML5 ไม่ต้องการให้องค์ประกอบว่างเปล่าถูกปิด แต่ถ้าคุณต้องการตรวจสอบเข้มงวดหรือถ้าคุณต้องการให้เอกสารของคุณสามารถอ่านได้โดย
XML parsers คุณต้องปิดองค์ประกอบ HTML ทั้งหมดอย่างถูกต้อง
ใช้แท็กตัวพิมพ์เล็ก
แท็ก HTML ไม่สำคัญต่อกรณี: <P> หมายถึงเช่นเดียวกับ <p>
มาตรฐาน
HTML5 ไม่จำเป็นต้องมีแท็กตัวพิมพ์เล็ก แต่ W3C
แนะนำให้ใช้อักษรตัวพิมพ์เล็กใน HTML
และต้องการพิมพ์เล็กสำหรับประเภทเอกสารที่เข้มงวดมากขึ้นเช่น XHTML
ที่ W3Schools เราใช้แท็กตัวพิมพ์เล็กเสมอ
แอตทริบิวต์ HTML
- องค์ประกอบ HTML ทั้งหมดสามารถมีแอตทริบิวต์ได้
- แอตทริบิวต์ให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ
- ระบุแอตทริบิวต์ในแท็กเริ่มต้นเสมอ
- แอตทริบิวต์มักจะมาในชื่อ / ค่าคู่เช่น: name = "value"
แอตทริบิวต์ lang
ภาษาของเอกสารสามารถประกาศได้ในแท็ก <html>
ภาษาถูกประกาศด้วยแอตทริบิวต์ lang
การประกาศภาษาเป็นสิ่งสำคัญสำหรับแอปพลิเคชันการเข้าถึง (โปรแกรมอ่านหน้าจอ) และเครื่องมือค้นหา:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
ตัวอักษรสองตัวแรกระบุภาษา (en) หากมีภาษาให้ใช้ตัวอักษรอีกสองตัว (สหรัฐฯ)
แอตทริบิวต์ชื่อ
ที่นี่มีการเพิ่มแอตทริบิวต์ title ลงในองค์ประกอบ <p> ค่าของแอตทริบิวต์ title จะแสดงเป็นเคล็ดลับเครื่องมือเมื่อคุณเลื่อนเมาส์ไปวางเหนือย่อหน้า:
ทดลองกดตรงนี้
แอตทริบิวต์ href
ลิงก์ HTML ถูกกำหนดด้วยแท็ก <a> มีการระบุที่อยู่ลิงก์ในแอตทริบิวต์ href:
ทดลองกดตรงนี้
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับลิงก์และแท็ก <a> ในบทแนะนำนี้ในภายหลัง
คุณสมบัติขนาด
ภาพ HTML ถูกกำหนดด้วยแท็ก <img>
ชื่อไฟล์ของแหล่งที่มา (src) และขนาดของภาพ (ความกว้างและความสูง) ทั้งหมดมีให้เป็นแอตทริบิวต์:
ทดลองกดตรงนี้
ขนาดภาพถูกระบุเป็นพิกเซล: width = "104" หมายถึง 104 พิกเซลของหน้าจอกว้าง
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับภาพและแท็ก <img> ในบทแนะนำนี้ในภายหลัง
แอ็ตทริบิวต์ alt
แอตทริบิวต์ alt จะระบุข้อความทางเลือกที่จะใช้เมื่อไม่สามารถแสดงรูปภาพได้
คุณสามารถอ่านค่าของแอตทริบิวต์ได้โดยโปรแกรมอ่านหน้าจอ ด้วยวิธีนี้ผู้ที่ "กำลังฟัง" ไปยังหน้าเว็บเช่น คนตาบอดสามารถ "ได้ยิน" องค์ประกอบ
ทดลองกดตรงนี้
เราขอแนะนำ: ใช้แอตทริบิวต์ตัวพิมพ์เล็ก
มาตรฐาน HTML5 ไม่จำเป็นต้องมีชื่อแอตทริบิวต์ตัวพิมพ์เล็ก
แอตทริบิวต์ title สามารถเขียนด้วยตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กเช่นชื่อเรื่องหรือ TITLE
W3C แนะนำให้ใช้อักษรตัวพิมพ์เล็กใน HTML และต้องการพิมพ์เล็กสำหรับประเภทเอกสารที่เข้มงวดมากขึ้นเช่น XHTML
ที่ W3Schools เราใช้ชื่อแอตทริบิวต์ตัวพิมพ์เล็กเสมอ
เราแนะนำ: ค่าแอตทริบิวต์ที่อ้างถึง
มาตรฐาน HTML5 ไม่จำเป็นต้องมีคำพูดรอบ ๆ ค่าแอตทริบิวต์
แอตทริบิวต์ href ที่แสดงไว้ข้างต้นสามารถเขียนเป็น:
ทดลองกดตรงนี้
W3C แนะนำคำพูดในรูปแบบ HTML และเรียกร้องคำพูดสำหรับประเภทเอกสารที่เข้มงวดมากขึ้นเช่น XHTML
บางครั้งก็จำเป็นต้องใช้คำพูด ตัวอย่างนี้จะไม่แสดงแอตทริบิวต์ title อย่างถูกต้องเนื่องจากมีช่องว่าง:
การใช้คำพูดเป็นเรื่องปกติมากที่สุด การใส่เครื่องหมายคำพูดอาจทำให้เกิดข้อผิดพลาด
ที่ W3Schools เรามักใช้คำพูดรอบ ๆ ค่าแอตทริบิวต์
คำพูดแบบเดี่ยวหรือแบบคู่?
เครื่องหมายคำพูดคู่รอบค่าแอตทริบิวต์เป็นคำที่ใช้กันทั่วไปใน HTML แต่สามารถใช้เครื่องหมายคำพูดเดี่ยวได้
ในบางกรณีเมื่อค่าแอ็ตทริบิวต์มีเครื่องหมายคำพูดคู่ก็จำเป็นต้องใช้เครื่องหมายคำพูดเดี่ยว:
<p title='John "ShotGun" Nelson'>
หรือในทางกลับกัน:
<p title="John 'ShotGun' Nelson">
บทสรุปบท
- องค์ประกอบ HTML ทั้งหมดสามารถมีแอตทริบิวต์ได้
- แอตทริบิวต์ title ให้ข้อมูล "tool-tip" เพิ่มเติม
- แอตทริบิวต์ href ให้ข้อมูลที่อยู่สำหรับลิงก์
- แอตทริบิวต์ความกว้างและความสูงให้ข้อมูลขนาดสำหรับรูปภาพ
- แอตทริบิวต์ alt ให้ข้อความสำหรับโปรแกรมอ่านหน้าจอ
- ที่ W3Schools เราใช้ชื่อแอตทริบิวต์ตัวพิมพ์เล็กเสมอ
- ที่ W3Schools เราจะระบุค่าแอตทริบิวต์ด้วยเครื่องหมายคำพูดคู่เสมอ
________________________________________________________________________
แอตทริบิวต์ HTML
ด้านล่างนี้เป็นรายการตามตัวอักษรของคุณลักษณะบางอย่างที่มักใช้ใน HTML:
รายการแอตทริบิวต์ทั้งหมดสำหรับแต่ละองค์ประกอบ HTML มีอยู่ใน: HTML Attribute Reference
ส่วนหัว HTML
หัวเรื่องถูกกำหนดด้วยแท็ก <h1> ถึง <h6>
<h1> กำหนดส่วนหัวที่สำคัญที่สุด <h6> กำหนดหัวเรื่องที่สำคัญน้อยที่สุด
ทดลองกดตรงนี้
หมายเหตุ: เบราเซอร์จะเพิ่มพื้นที่สีขาวบางส่วน (ขอบ) ก่อนและหลังหัวเรื่อง
หัวเรื่องมีความสำคัญ
เครื่องมือค้นหาใช้หัวข้อเพื่อสร้างดัชนีโครงสร้างและเนื้อหาของหน้าเว็บของคุณ
ผู้ใช้กวาดหน้าเว็บของคุณไปตามหัวเรื่อง สิ่งสำคัญคือต้องใช้ส่วนหัวเพื่อแสดงโครงสร้างเอกสาร
<h1> ควรใช้หัวเรื่องสำหรับหัวเรื่องหลักตามด้วย <h2> หัวเรื่องแล้วสำคัญที่ไม่สำคัญ <h3> เป็นต้น
หมายเหตุ: ใช้หัวเรื่อง HTML สำหรับหัวเรื่องเท่านั้น อย่าใช้หัวเรื่องเพื่อทำให้ข้อความใหญ่หรือเป็นตัวหนา
กฎแนวนอน HTML
แท็ก <hr> กำหนดการแบ่งหัวข้อตามหน้า HTML และมักแสดงเป็นกฎแนวนอน
องค์ประกอบ <hr> ใช้เพื่อแยกเนื้อหา (หรือกำหนดการเปลี่ยนแปลง) ในหน้า HTML:
ทดลองกดตรงนี้
องค์ประกอบ HTML <head>
องค์ประกอบ HTML <head> ไม่มีส่วนเกี่ยวข้องกับหัวเรื่อง HTML
องค์ประกอบ <head> เป็นคอนเทนเนอร์สำหรับข้อมูลเมตา ข้อมูลเมตา HTML เป็นข้อมูลเกี่ยวกับเอกสาร HTML ข้อมูลเมตาไม่ปรากฏขึ้น
องค์ประกอบ <head> ถูกวางไว้ระหว่างแท็ก <html> และ <body> แท็ก:
ทดลองกดตรงนี้
หมายเหตุ: ข้อมูลเมตามักจะกำหนดชื่อเอกสารชุดอักขระรูปแบบลิงก์สคริปต์และข้อมูลเมตาอื่น ๆ
วิธีการดูที่มา HTML?
คุณเคยเห็นหน้าเว็บและสงสัยว่า "เฮ้พวกเขาทำอย่างนั้นได้อย่างไร?"
ดูรหัสแหล่งที่มา HTML:
หากต้องการค้นหาให้คลิกขวาที่หน้าเว็บและเลือก
"ดูแหล่งที่มาของหน้าเว็บ" (ใน Chrome) หรือ "ดูแหล่งที่มา" (ใน IE)
หรือคล้ายกันในเบราว์เซอร์อื่น ๆ ซึ่งจะเปิดหน้าต่างที่มีซอร์สโค้ด HTML ของหน้า
ตรวจสอบองค์ประกอบ HTML:
คลิกขวาที่องค์ประกอบ
(หรือพื้นที่ว่าง) แล้วเลือก "ตรวจสอบ" หรือ "ตรวจสอบองค์ประกอบ"
เพื่อดูองค์ประกอบต่างๆที่ประกอบขึ้นจาก (คุณจะเห็นทั้ง HTML และ CSS) นอกจากนี้คุณยังสามารถแก้ไข HTML หรือ CSS ได้ทันทีในแผงควบคุมองค์ประกอบหรือลักษณะที่เปิดขึ้น
ย่อหน้า HTML
องค์ประกอบ HTML <p> กำหนดย่อหน้า:
ทดลองกดตรงนี้
หมายเหตุ: เบราเซอร์จะเพิ่มพื้นที่สีขาวบางส่วน (ขอบ) ก่อนและหลังย่อหน้า
การแสดงผล HTML
คุณไม่แน่ใจว่า HTML จะแสดงอย่างไร
หน้าจอขนาดใหญ่หรือเล็กและหน้าต่างที่ปรับขนาดจะสร้างผลลัพธ์ที่แตกต่างกัน
ด้วย HTML คุณจะไม่สามารถเปลี่ยนเอาต์พุตโดยการเพิ่มช่องว่างหรือบรรทัดพิเศษในโค้ด HTML ของคุณ
เบราเซอร์จะลบช่องว่างและบรรทัดพิเศษออกเมื่อหน้าแสดง:
ทดลองกดตรงนี้
อย่าลืมแท็กสิ้นสุด
เบราเซอร์ส่วนใหญ่จะแสดง HTML อย่างถูกต้องแม้ว่าคุณจะลืมแท็กสิ้นสุด:
ทดลองกดตรงนี้
ตัวอย่างข้างต้นจะทำงานได้ในเบราว์เซอร์ส่วนใหญ่ แต่อย่าพึ่งพา
หมายเหตุ: การวางแท็กสิ้นสุดอาจทำให้เกิดผลลัพธ์หรือข้อผิดพลาดที่ไม่คาดคิด
การแบ่งบรรทัด HTML
องค์ประกอบ HTML <br> กำหนดเส้นแบ่ง
ใช้ <br> ถ้าคุณต้องการแบ่งบรรทัด (บรรทัดใหม่) โดยไม่ต้องเริ่มย่อหน้าใหม่:
ทดลองกดตรงนี้
แท็ก 2 เป็นแท็กว่างเปล่าซึ่งหมายความว่าแท็กไม่มีแท็กสิ้นสุด
ปัญหาบทกวี
บทกวีนี้จะแสดงในบรรทัดเดียว:
ทดลองกดตรงนี้
องค์ประกอบ <pre> HTML <
องค์ประกอบ HTML <pre> กำหนดข้อความที่จัดรูปแบบไว้ล่วงหน้า
ข้อความภายในองค์ประกอบ
<pre> จะปรากฏขึ้นในแบบอักษรความกว้างคงที่ (โดยปกติจะเป็น Courier)
และจะเก็บรักษาทั้งช่องว่างและตัวแบ่งบรรทัด:
ทดลองกดตรงนี้
การอ้างอิงแท็ก HTML
การอ้างอิงแท็ก W3Schools 'ประกอบด้วยข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ HTML และแอตทริบิวต์
ลักษณะ HTML
ทดลองกดตรงนี้
แอตทริบิวต์สไตล์ HTML
การกำหนดลักษณะขององค์ประกอบ HTML สามารถทำได้ด้วยแอตทริบิวต์ style
แอตทริบิวต์สไตล์ HTML มีไวยากรณ์ต่อไปนี้:
<tagname
style="property:value;">
พร็อพเพอร์ตี้เป็นคุณสมบัติ CSS ค่านี้เป็นค่า CSS
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ CSS ในบทแนะนำนี้ในภายหลัง
สีพื้นหลัง HTML
คุณสมบัติพื้นหลังสีกำหนดสีพื้นหลังสำหรับองค์ประกอบ HTML
ตัวอย่างนี้กำหนดสีพื้นหลังของหน้าเป็นสีน้ำเงิน:
ทดลองกดตรงนี้
สีข้อความ HTML
คุณสมบัติสีกำหนดสีข้อความสำหรับองค์ประกอบ HTML:
ทดลองกดตรงนี้
แบบอักษร HTML
คุณสมบัติ font-family กำหนดแบบอักษรที่จะใช้สำหรับองค์ประกอบ HTML:
ทดลองกดตรงนี้
ขนาดข้อความ HTML
คุณสมบัติ font-size กำหนดขนาดตัวอักษรสำหรับอิลิเมนต์ HTML:
ทดลองกดตรงนี้
การจัดตำแหน่งข้อความ HTML
คุณสมบัติการจัดตำแหน่งข้อความกำหนดการจัดแนวข้อความในแนวนอนสำหรับองค์ประกอบ HTML:
ทดลองกดตรงนี้
บทสรุปบท
- ใช้แอตทริบิวต์ style สำหรับการจัดองค์ประกอบองค์ประกอบ HTML
- ใช้สีพื้นหลังสำหรับสีพื้นหลัง
- ใช้สีสำหรับสีข้อความ
- ใช้แบบอักษรครอบครัวสำหรับแบบอักษรข้อความ
- ใช้แบบอักษรขนาดสำหรับขนาดตัวอักษร
- ใช้ text-align สำหรับจัดตำแหน่งข้อความ
การจัดรูปแบบข้อความ HTML
ทดลองกดตรงนี้
องค์ประกอบการจัดรูปแบบ HTML
ในบทก่อนหน้าคุณได้เรียนรู้เกี่ยวกับแอตทริบิวต์ HTML style
HTML ยังกำหนดองค์ประกอบพิเศษสำหรับการกำหนดข้อความที่มีความหมายพิเศษ
HTML ใช้องค์ประกอบเช่น <b> และ <i> ในการจัดรูปแบบเอาต์พุตเช่นข้อความตัวหนาหรือตัวเอียง
องค์ประกอบการจัดรูปแบบถูกออกแบบมาเพื่อแสดงข้อความประเภทพิเศษ:
- <b> - ข้อความที่เป็นตัวหนา
- <strong> - ข้อความสำคัญ
- <i> - ตัวเอียง
- <em> - เน้นข้อความ
- <mark> - ทำเครื่องหมายข้อความแล้ว
- <small> - ข้อความขนาดเล็ก
- <del> - ลบข้อความแล้ว
- <ins> - แทรกข้อความ
- <sub> - ข้อความบริบท
- <sup> - ข้อความแทนที่
HTML <b> และ <strong> องค์ประกอบ
องค์ประกอบ HTML <b> กำหนดข้อความเป็นตัวหนาโดยไม่มีความสำคัญเป็นพิเศษ
ทดลองกดตรงนี้
องค์ประกอบ HTML <strong> กำหนดข้อความที่มีความเข้มและมีความหมาย "strong" ที่เพิ่มขึ้น
ทดลองกดตรงนี้
HTML <i> และ <em> องค์ประกอบ
องค์ประกอบ HTML <i> จะกำหนดข้อความตัวเอียงโดยไม่มีความสำคัญเป็นพิเศษ
ทดลองกดตรงนี้
องค์ประกอบ HTML <em> กำหนดข้อความที่เน้นย้ำโดยมีความหมายเพิ่มขึ้น
ทดลองกดตรงนี้
หมายเหตุ:
เบราว์เซอร์แสดง <strong> เป็น <b> และ <em> เป็น
<i> อย่างไรก็ตามมีความแตกต่างในความหมายของแท็กเหล่านี้: <b>
และ <i> กำหนดข้อความเป็นตัวเอียงและตัวเอียง แต่ <strong> และ
<em> หมายความว่าข้อความเป็น "สำคัญ"
________________________________________________________________________
องค์ประกอบ HTML <small>
องค์ประกอบ HTML <small> กำหนดข้อความขนาดเล็ก:
ทดลองกดตรงนี้
องค์ประกอบ HTML <mark>
องค์ประกอบ HTML <mark> กำหนดข้อความที่มีเครื่องหมายหรือเน้น:
ทดลองกดตรงนี้
องค์ประกอบ HTML <del>
องค์ประกอบ HTML <del> กำหนดข้อความที่ถูกลบ (ลบ)
ทดลองกดตรงนี้
องค์ประกอบ HTML <ins>
องค์ประกอบ HTML <ins> กำหนดข้อความแทรก (เพิ่ม)
ทดลองกดตรงนี้
องค์ประกอบ HTML <sub>
องค์ประกอบ HTML <sub> กำหนดข้อความ subscripted
ทดลองกดตรงนี้
องค์ประกอบ HTML <sup>
องค์ประกอบ HTML <sup> กำหนดข้อความที่มีส่วนหัว
ทดลองกดตรงนี้
องค์ประกอบการจัดรูปแบบ HTML
HTML การอ้าง และ องค์ประกอบการอ้างอิง
การอ้าง
HTML <q> สำหรับใบเสนอราคาแบบสั้น
องค์ประกอบ HTML <q> กำหนดคำพูดสั้น ๆ
เบราเซอร์มักแทรกเครื่องหมายคำพูดรอบ ๆ องค์ประกอบ <q>
HTML <blockquote> สำหรับใบเสนอราคา
องค์ประกอบ HTML <blockquote> กำหนดส่วนที่ยกมาจากแหล่งอื่น
เบราว์เซอร์มักเยื้อง <blockquote> องค์ประกอบ
HTML <abbr> สำหรับคำย่อ
องค์ประกอบ HTML <abbr> กำหนดคำย่อหรือคำย่อ
เครื่องหมายย่อที่ทำเครื่องหมายสามารถให้ข้อมูลที่เป็นประโยชน์แก่เบราว์เซอร์ระบบแปลภาษาและเครื่องมือค้นหา
HTML <address> สำหรับข้อมูลการติดต่อ
องค์ประกอบ HTML <address> กำหนดข้อมูลผู้ติดต่อ (ผู้เขียน / เจ้าของ) ของเอกสารหรือบทความ
ส่วน <address> มักจะแสดงเป็นตัวเอียง เบราว์เซอร์ส่วนใหญ่จะเพิ่มตัวแบ่งบรรทัดก่อนและหลังองค์ประกอบ
HTML <cite> สำหรับชื่องาน
องค์ประกอบ HTML <cite> กำหนดชื่องาน
เบราเซอร์มักแสดง <cite> องค์ประกอบในตัวเอียง
HTML <bdo> สำหรับการแทนที่แบบสองทิศทาง
องค์ประกอบ HTML <bdo> กำหนดการทับสองทิศทาง
องค์ประกอบ <bdo> ถูกใช้เพื่อแทนที่ทิศทางข้อความปัจจุบัน:
HTML การอ้าง และ องค์ประกอบการอ้างอิง
ความคิดเห็น HTML
ใช้แท็กความคิดเห็นเพื่อแทรกความคิดเห็นในซอร์สโค้ด HTML
<!-- Write your comments here -->
สังเกตว่ามีเครื่องหมายอัศเจรีย์ (!) อยู่ในแท็กเปิด แต่ไม่อยู่ในแท็กปิด
หมายเหตุ: เบราเซอร์จะไม่แสดงความคิดเห็น แต่สามารถช่วยในการจัดทำเอกสารซอร์สโค้ด HTML ของคุณได้
ด้วยความคิดเห็นคุณสามารถวางคำเตือนและการแจ้งเตือนไว้ใน HTML ของคุณ:
ข้อคิดเห็นยังดีสำหรับการดีบัก HTML เพราะคุณสามารถแสดงความคิดเห็นออกบรรทัด HTML ของโค้ดทีละรายการเพื่อค้นหาข้อผิดพลาด:
ข้อคิดเห็นตามเงื่อนไข
คุณอาจสะดุดเมื่อมีข้อคิดเห็นตามเงื่อนไขใน HTML:
<!--[if IE 9]>
.... some HTML here ....
<![endif]-->
ความคิดเห็นที่มีเงื่อนไขระบุแท็ก HTML บางอย่างที่จะเรียกใช้โดย Internet Explorer เท่านั้น
บรรณาธิการ HTML
เขียน HTML โดยใช้ Notepad หรือ
TextEditเว็บเพจสามารถสร้างและแก้ไขได้โดยใช้โปรแกรมแก้ไข HTML
แบบมืออาชีพอย่างไรก็ตามสำหรับการเรียนรู้ HTML
เราขอแนะนำให้ใช้โปรแกรมแก้ไขข้อความแบบง่ายๆเช่น Notepad (PC) หรือ
TextEdit (Mac)เราเชื่อว่าการใช้โปรแกรมแก้ไขข้อความแบบง่ายๆเป็นวิธีที่ดีในการเรียนรู้ HTMLทำตามสี่ขั้นตอนด้านล่างเพื่อสร้างหน้าเว็บแรกของคุณด้วย Notepad หรือ TextEdit
ขั้นตอนที่ 1: เปิด Notepad (พีซี)
Windows 8 หรือใหม่กว่า:
เปิดหน้าจอเริ่มต้น (สัญลักษณ์หน้าต่างที่ด้านล่างซ้ายบนหน้าจอ) พิมพ์ Notepad
Windows 7 หรือเก่ากว่า:
เปิดเริ่ม> โปรแกรม> อุปกรณ์เสริม> Notepad
ขั้นที่ 1: เปิด TextEdit (Mac)
เปิด Finder> Applications> TextEdit
นอกจากนี้เปลี่ยนการตั้งค่าบางอย่างเพื่อให้แอพพลิเคชันสามารถบันทึกไฟล์ได้อย่างถูกต้อง ใน Preferences> Format> เลือก "Plain Text"
จากนั้นภายใต้ "Open and Save" เลือกช่องทำเครื่องหมายว่า "Ignore rich text commands ในไฟล์ HTML"
จากนั้นเปิดเอกสารใหม่เพื่อวางโค้ด
ขั้นตอนที่ 2: เขียน HTML บางส่วน
เขียนหรือคัดลอก HTML บางส่วนลงใน Notepad
เขียนหรือคัดลอก HTML บางส่วนลงใน Notepad
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
ขั้นที่ 3: บันทึกเพจ HTML
บันทึกไฟล์ในคอมพิวเตอร์ของคุณ เลือก File> Save as ในเมนู Notepad
ตั้งชื่อไฟล์ "index.htm" และตั้งค่าการเข้ารหัสเป็น UTF-8 (ซึ่งเป็นรหัสที่ต้องการสำหรับไฟล์ HTML)
คุณสามารถใช้. htm หรือ. html เป็นส่วนขยายของไฟล์ ไม่มีความแตกต่างกันขึ้นอยู่กับคุณ
ขั้นตอนที่ 4: ดูหน้า HTML ในเบราเซอร์ของคุณ
เปิดไฟล์ HTML ที่บันทึกไว้ในเบราว์เซอร์ที่คุณชื่นชอบ (ดับเบิลคลิกที่ไฟล์หรือคลิกขวา - และเลือก "เปิดด้วย")
ผลลัพธ์จะมีลักษณะดังนี้:
เปิดไฟล์ HTML ที่บันทึกไว้ในเบราว์เซอร์ที่คุณชื่นชอบ (ดับเบิลคลิกที่ไฟล์หรือคลิกขวา - และเลือก "เปิดด้วย")
ผลลัพธ์จะมีลักษณะดังนี้:
ตัวอย่างพื้นฐาน HTML
อย่ากังวลหากตัวอย่างเหล่านี้ใช้แท็กที่คุณไม่ได้เรียนรู้คุณจะได้เรียนรู้เกี่ยวกับพวกเขาในบทต่อไป
เอกสาร HTML
เอกสาร HTML ทั้งหมดต้องเริ่มต้นด้วยการประกาศประเภทเอกสาร: <! DOCTYPE html>.
เอกสาร HTML เองเริ่มต้นด้วย <html> และลงท้ายด้วย </ html>
ส่วนที่มองเห็นได้ของเอกสาร HTML อยู่ระหว่าง <body> และ </ body>
ส่วนหัว HTML
ส่วนหัว HTML ถูกกำหนดด้วยแท็ก <h1> ถึง <h6>
<h1> กำหนดส่วนหัวที่สำคัญที่สุด <h6> กำหนดหัวเรื่องที่สำคัญน้อยที่สุด:
ทดลองกดตรงนี้
ย่อหน้า HTML
ย่อหน้า HTML ถูกกำหนดด้วยแท็ก <p>:
ทดลองกดตรงนี้
ลิงก์ HTML
ลิงก์ HTML ถูกกำหนดด้วย <a> tag:
ปลายทางของลิงก์ถูกระบุไว้ในแอตทริบิวต์ href
ใช้แอตทริบิวต์เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ HTML
รูปภาพ HTML
ภาพ HTML ถูกกำหนดด้วยแท็ก <img>
ไฟล์ต้นฉบับ (src) ข้อความทดแทน (alt) ความกว้างและความสูงจะมีให้เป็นแอตทริบิวต์:
ทดลองกดตรงนี้
องค์ประกอบ HTML
องค์ประกอบ HTML ประกอบด้วยแท็กเริ่มต้นและแท็กสิ้นสุดโดยมีเนื้อหาแทรกอยู่ระหว่าง:
<tagname> เนื้อหาไปที่นี่ </ tagname>
องค์ประกอบ HTML คือทุกอย่างตั้งแต่แท็กเริ่มต้นไปจนถึงแท็กสิ้นสุด:
<p> วรรคแรกของฉัน </ p>
องค์ประกอบ HTML ที่ไม่มีเนื้อหาเรียกว่าองค์ประกอบว่างเปล่า อิลิเมนต์ว่างเปล่าไม่มีแท็กสิ้นสุดเช่นองค์ประกอบ <br> (ซึ่งระบุว่ามีตัวแบ่งบรรทัด)
องค์ประกอบ HTML ที่ซ้อนกัน
องค์ประกอบ HTML สามารถซ้อนกันได้ (องค์ประกอบสามารถมีองค์ประกอบได้)
เอกสาร HTML ทั้งหมดประกอบด้วยองค์ประกอบ HTML ที่ซ้อนกันอยู่
ตัวอย่างนี้ประกอบด้วยองค์ประกอบ HTML สี่รายการ:
ทดลองกดตรงนี้
ตัวอย่างอธิบาย
องค์ประกอบ <html> กำหนดเอกสารทั้งหมด
มีแท็กเริ่มต้น <html> และแท็กสิ้นสุด </ html>
เนื้อหาขององค์ประกอบเป็นอีกหนึ่งองค์ประกอบ HTML (องค์ประกอบ <body>)
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
องค์ประกอบ <body> กำหนดเนื้อหาของเอกสาร
มีแท็กเริ่มต้น <body> และแท็กสิ้นสุด </ body>
เนื้อหาขององค์ประกอบเป็นอีกสององค์ประกอบ HTML (<h1> และ <p>)
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
องค์ประกอบ <h1> กำหนดหัวเรื่อง
มีแท็กเริ่มต้น <h1> และแท็กสิ้นสุด </ h1>
เนื้อหาขององค์ประกอบคือ: หัวเรื่องแรกของฉัน
<h1>My First Heading</h1>
องค์ประกอบ <p> กำหนดย่อหน้า
มีแท็กเริ่มต้น <p> และแท็กสิ้นสุด </ p>
เนื้อหาขององค์ประกอบคือ: ย่อหน้าแรกของฉัน
<p>My first paragraph.</p>
อย่าลืมแท็กสิ้นสุด
องค์ประกอบ HTML บางอย่างจะแสดงอย่างถูกต้องแม้ว่าคุณจะลืมแท็กสิ้นสุด:
ตัวอย่างข้างต้นทำงานได้ในทุกเบราว์เซอร์เนื่องจากแท็กปิดถือว่าเป็นอุปกรณ์เสริม
อย่าพึ่งพาเรื่องนี้ อาจทำให้เกิดผลลัพธ์ที่ไม่คาดคิดและ / หรือข้อผิดพลาดหากคุณลืมแท็กสิ้นสุด
องค์ประกอบ HTML ที่ว่างเปล่า
องค์ประกอบ HTML ที่ไม่มีเนื้อหาเรียกว่าองค์ประกอบว่างเปล่า
<br> เป็นองค์ประกอบว่างเปล่าโดยไม่มีแท็กปิด (แท็ก <br> กำหนดตัวแบ่งบรรทัด)
องค์ประกอบที่ว่างเปล่าสามารถ "ปิด" ในแท็กเปิดดังนี้: <br />
HTML5 ไม่ต้องการให้องค์ประกอบว่างเปล่าถูกปิด แต่ถ้าคุณต้องการตรวจสอบเข้มงวดหรือถ้าคุณต้องการให้เอกสารของคุณสามารถอ่านได้โดย
XML parsers คุณต้องปิดองค์ประกอบ HTML ทั้งหมดอย่างถูกต้อง
ใช้แท็กตัวพิมพ์เล็ก
แท็ก HTML ไม่สำคัญต่อกรณี: <P> หมายถึงเช่นเดียวกับ <p>
มาตรฐาน
HTML5 ไม่จำเป็นต้องมีแท็กตัวพิมพ์เล็ก แต่ W3C
แนะนำให้ใช้อักษรตัวพิมพ์เล็กใน HTML
และต้องการพิมพ์เล็กสำหรับประเภทเอกสารที่เข้มงวดมากขึ้นเช่น XHTML
ที่ W3Schools เราใช้แท็กตัวพิมพ์เล็กเสมอ
แอตทริบิวต์ HTML
- องค์ประกอบ HTML ทั้งหมดสามารถมีแอตทริบิวต์ได้
- แอตทริบิวต์ให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ
- ระบุแอตทริบิวต์ในแท็กเริ่มต้นเสมอ
- แอตทริบิวต์มักจะมาในชื่อ / ค่าคู่เช่น: name = "value"
แอตทริบิวต์ lang
ภาษาของเอกสารสามารถประกาศได้ในแท็ก <html>
ภาษาถูกประกาศด้วยแอตทริบิวต์ lang
การประกาศภาษาเป็นสิ่งสำคัญสำหรับแอปพลิเคชันการเข้าถึง (โปรแกรมอ่านหน้าจอ) และเครื่องมือค้นหา:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
ตัวอักษรสองตัวแรกระบุภาษา (en) หากมีภาษาให้ใช้ตัวอักษรอีกสองตัว (สหรัฐฯ)
แอตทริบิวต์ชื่อ
ที่นี่มีการเพิ่มแอตทริบิวต์ title ลงในองค์ประกอบ <p> ค่าของแอตทริบิวต์ title จะแสดงเป็นเคล็ดลับเครื่องมือเมื่อคุณเลื่อนเมาส์ไปวางเหนือย่อหน้า:
ทดลองกดตรงนี้
แอตทริบิวต์ href
ลิงก์ HTML ถูกกำหนดด้วยแท็ก <a> มีการระบุที่อยู่ลิงก์ในแอตทริบิวต์ href:
ทดลองกดตรงนี้
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับลิงก์และแท็ก <a> ในบทแนะนำนี้ในภายหลัง
คุณสมบัติขนาด
ภาพ HTML ถูกกำหนดด้วยแท็ก <img>
ชื่อไฟล์ของแหล่งที่มา (src) และขนาดของภาพ (ความกว้างและความสูง) ทั้งหมดมีให้เป็นแอตทริบิวต์:
ทดลองกดตรงนี้
ขนาดภาพถูกระบุเป็นพิกเซล: width = "104" หมายถึง 104 พิกเซลของหน้าจอกว้าง
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับภาพและแท็ก <img> ในบทแนะนำนี้ในภายหลัง
แอ็ตทริบิวต์ alt
แอตทริบิวต์ alt จะระบุข้อความทางเลือกที่จะใช้เมื่อไม่สามารถแสดงรูปภาพได้
คุณสามารถอ่านค่าของแอตทริบิวต์ได้โดยโปรแกรมอ่านหน้าจอ ด้วยวิธีนี้ผู้ที่ "กำลังฟัง" ไปยังหน้าเว็บเช่น คนตาบอดสามารถ "ได้ยิน" องค์ประกอบ
ทดลองกดตรงนี้
เราขอแนะนำ: ใช้แอตทริบิวต์ตัวพิมพ์เล็ก
มาตรฐาน HTML5 ไม่จำเป็นต้องมีชื่อแอตทริบิวต์ตัวพิมพ์เล็ก
แอตทริบิวต์ title สามารถเขียนด้วยตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กเช่นชื่อเรื่องหรือ TITLE
W3C แนะนำให้ใช้อักษรตัวพิมพ์เล็กใน HTML และต้องการพิมพ์เล็กสำหรับประเภทเอกสารที่เข้มงวดมากขึ้นเช่น XHTML
ที่ W3Schools เราใช้ชื่อแอตทริบิวต์ตัวพิมพ์เล็กเสมอ
เราแนะนำ: ค่าแอตทริบิวต์ที่อ้างถึง
มาตรฐาน HTML5 ไม่จำเป็นต้องมีคำพูดรอบ ๆ ค่าแอตทริบิวต์
แอตทริบิวต์ href ที่แสดงไว้ข้างต้นสามารถเขียนเป็น:
ทดลองกดตรงนี้
W3C แนะนำคำพูดในรูปแบบ HTML และเรียกร้องคำพูดสำหรับประเภทเอกสารที่เข้มงวดมากขึ้นเช่น XHTML
บางครั้งก็จำเป็นต้องใช้คำพูด ตัวอย่างนี้จะไม่แสดงแอตทริบิวต์ title อย่างถูกต้องเนื่องจากมีช่องว่าง:
การใช้คำพูดเป็นเรื่องปกติมากที่สุด การใส่เครื่องหมายคำพูดอาจทำให้เกิดข้อผิดพลาด
ที่ W3Schools เรามักใช้คำพูดรอบ ๆ ค่าแอตทริบิวต์
คำพูดแบบเดี่ยวหรือแบบคู่?
เครื่องหมายคำพูดคู่รอบค่าแอตทริบิวต์เป็นคำที่ใช้กันทั่วไปใน HTML แต่สามารถใช้เครื่องหมายคำพูดเดี่ยวได้
ในบางกรณีเมื่อค่าแอ็ตทริบิวต์มีเครื่องหมายคำพูดคู่ก็จำเป็นต้องใช้เครื่องหมายคำพูดเดี่ยว:
<p title='John "ShotGun" Nelson'>
หรือในทางกลับกัน:
<p title="John 'ShotGun' Nelson">
บทสรุปบท
- องค์ประกอบ HTML ทั้งหมดสามารถมีแอตทริบิวต์ได้
- แอตทริบิวต์ title ให้ข้อมูล "tool-tip" เพิ่มเติม
- แอตทริบิวต์ href ให้ข้อมูลที่อยู่สำหรับลิงก์
- แอตทริบิวต์ความกว้างและความสูงให้ข้อมูลขนาดสำหรับรูปภาพ
- แอตทริบิวต์ alt ให้ข้อความสำหรับโปรแกรมอ่านหน้าจอ
- ที่ W3Schools เราใช้ชื่อแอตทริบิวต์ตัวพิมพ์เล็กเสมอ
- ที่ W3Schools เราจะระบุค่าแอตทริบิวต์ด้วยเครื่องหมายคำพูดคู่เสมอ
________________________________________________________________________
แอตทริบิวต์ HTML
ด้านล่างนี้เป็นรายการตามตัวอักษรของคุณลักษณะบางอย่างที่มักใช้ใน HTML:
รายการแอตทริบิวต์ทั้งหมดสำหรับแต่ละองค์ประกอบ HTML มีอยู่ใน: HTML Attribute Reference
ส่วนหัว HTML
หัวเรื่องถูกกำหนดด้วยแท็ก <h1> ถึง <h6>
<h1> กำหนดส่วนหัวที่สำคัญที่สุด <h6> กำหนดหัวเรื่องที่สำคัญน้อยที่สุด
ทดลองกดตรงนี้
หมายเหตุ: เบราเซอร์จะเพิ่มพื้นที่สีขาวบางส่วน (ขอบ) ก่อนและหลังหัวเรื่อง
หัวเรื่องมีความสำคัญ
เครื่องมือค้นหาใช้หัวข้อเพื่อสร้างดัชนีโครงสร้างและเนื้อหาของหน้าเว็บของคุณ
ผู้ใช้กวาดหน้าเว็บของคุณไปตามหัวเรื่อง สิ่งสำคัญคือต้องใช้ส่วนหัวเพื่อแสดงโครงสร้างเอกสาร
<h1> ควรใช้หัวเรื่องสำหรับหัวเรื่องหลักตามด้วย <h2> หัวเรื่องแล้วสำคัญที่ไม่สำคัญ <h3> เป็นต้น
หมายเหตุ: ใช้หัวเรื่อง HTML สำหรับหัวเรื่องเท่านั้น อย่าใช้หัวเรื่องเพื่อทำให้ข้อความใหญ่หรือเป็นตัวหนา
กฎแนวนอน HTML
แท็ก <hr> กำหนดการแบ่งหัวข้อตามหน้า HTML และมักแสดงเป็นกฎแนวนอน
องค์ประกอบ <hr> ใช้เพื่อแยกเนื้อหา (หรือกำหนดการเปลี่ยนแปลง) ในหน้า HTML:
ทดลองกดตรงนี้
องค์ประกอบ HTML <head>
องค์ประกอบ HTML <head> ไม่มีส่วนเกี่ยวข้องกับหัวเรื่อง HTML
องค์ประกอบ <head> เป็นคอนเทนเนอร์สำหรับข้อมูลเมตา ข้อมูลเมตา HTML เป็นข้อมูลเกี่ยวกับเอกสาร HTML ข้อมูลเมตาไม่ปรากฏขึ้น
องค์ประกอบ <head> ถูกวางไว้ระหว่างแท็ก <html> และ <body> แท็ก:
ทดลองกดตรงนี้
หมายเหตุ: ข้อมูลเมตามักจะกำหนดชื่อเอกสารชุดอักขระรูปแบบลิงก์สคริปต์และข้อมูลเมตาอื่น ๆ
วิธีการดูที่มา HTML?
คุณเคยเห็นหน้าเว็บและสงสัยว่า "เฮ้พวกเขาทำอย่างนั้นได้อย่างไร?"
ดูรหัสแหล่งที่มา HTML:
หากต้องการค้นหาให้คลิกขวาที่หน้าเว็บและเลือก
"ดูแหล่งที่มาของหน้าเว็บ" (ใน Chrome) หรือ "ดูแหล่งที่มา" (ใน IE)
หรือคล้ายกันในเบราว์เซอร์อื่น ๆ ซึ่งจะเปิดหน้าต่างที่มีซอร์สโค้ด HTML ของหน้า
ตรวจสอบองค์ประกอบ HTML:
คลิกขวาที่องค์ประกอบ
(หรือพื้นที่ว่าง) แล้วเลือก "ตรวจสอบ" หรือ "ตรวจสอบองค์ประกอบ"
เพื่อดูองค์ประกอบต่างๆที่ประกอบขึ้นจาก (คุณจะเห็นทั้ง HTML และ CSS) นอกจากนี้คุณยังสามารถแก้ไข HTML หรือ CSS ได้ทันทีในแผงควบคุมองค์ประกอบหรือลักษณะที่เปิดขึ้น
ย่อหน้า HTML
องค์ประกอบ HTML <p> กำหนดย่อหน้า:
ทดลองกดตรงนี้
หมายเหตุ: เบราเซอร์จะเพิ่มพื้นที่สีขาวบางส่วน (ขอบ) ก่อนและหลังย่อหน้า
การแสดงผล HTML
คุณไม่แน่ใจว่า HTML จะแสดงอย่างไร
หน้าจอขนาดใหญ่หรือเล็กและหน้าต่างที่ปรับขนาดจะสร้างผลลัพธ์ที่แตกต่างกัน
ด้วย HTML คุณจะไม่สามารถเปลี่ยนเอาต์พุตโดยการเพิ่มช่องว่างหรือบรรทัดพิเศษในโค้ด HTML ของคุณ
เบราเซอร์จะลบช่องว่างและบรรทัดพิเศษออกเมื่อหน้าแสดง:
ทดลองกดตรงนี้
อย่าลืมแท็กสิ้นสุด
เบราเซอร์ส่วนใหญ่จะแสดง HTML อย่างถูกต้องแม้ว่าคุณจะลืมแท็กสิ้นสุด:
ทดลองกดตรงนี้
ตัวอย่างข้างต้นจะทำงานได้ในเบราว์เซอร์ส่วนใหญ่ แต่อย่าพึ่งพา
หมายเหตุ: การวางแท็กสิ้นสุดอาจทำให้เกิดผลลัพธ์หรือข้อผิดพลาดที่ไม่คาดคิด
การแบ่งบรรทัด HTML
องค์ประกอบ HTML <br> กำหนดเส้นแบ่ง
ใช้ <br> ถ้าคุณต้องการแบ่งบรรทัด (บรรทัดใหม่) โดยไม่ต้องเริ่มย่อหน้าใหม่:
ทดลองกดตรงนี้
แท็ก 2 เป็นแท็กว่างเปล่าซึ่งหมายความว่าแท็กไม่มีแท็กสิ้นสุด
ปัญหาบทกวี
บทกวีนี้จะแสดงในบรรทัดเดียว:
ทดลองกดตรงนี้
องค์ประกอบ <pre> HTML <
องค์ประกอบ HTML <pre> กำหนดข้อความที่จัดรูปแบบไว้ล่วงหน้า
ข้อความภายในองค์ประกอบ
<pre> จะปรากฏขึ้นในแบบอักษรความกว้างคงที่ (โดยปกติจะเป็น Courier)
และจะเก็บรักษาทั้งช่องว่างและตัวแบ่งบรรทัด:
ทดลองกดตรงนี้
การอ้างอิงแท็ก HTML
การอ้างอิงแท็ก W3Schools 'ประกอบด้วยข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ HTML และแอตทริบิวต์
ลักษณะ HTML
ทดลองกดตรงนี้
แอตทริบิวต์สไตล์ HTML
การกำหนดลักษณะขององค์ประกอบ HTML สามารถทำได้ด้วยแอตทริบิวต์ style
แอตทริบิวต์สไตล์ HTML มีไวยากรณ์ต่อไปนี้:
<tagname
style="property:value;">
พร็อพเพอร์ตี้เป็นคุณสมบัติ CSS ค่านี้เป็นค่า CSS
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ CSS ในบทแนะนำนี้ในภายหลัง
สีพื้นหลัง HTML
คุณสมบัติพื้นหลังสีกำหนดสีพื้นหลังสำหรับองค์ประกอบ HTML
ตัวอย่างนี้กำหนดสีพื้นหลังของหน้าเป็นสีน้ำเงิน:
ทดลองกดตรงนี้
สีข้อความ HTML
คุณสมบัติสีกำหนดสีข้อความสำหรับองค์ประกอบ HTML:
ทดลองกดตรงนี้
แบบอักษร HTML
คุณสมบัติ font-family กำหนดแบบอักษรที่จะใช้สำหรับองค์ประกอบ HTML:
ทดลองกดตรงนี้
ขนาดข้อความ HTML
คุณสมบัติ font-size กำหนดขนาดตัวอักษรสำหรับอิลิเมนต์ HTML:
ทดลองกดตรงนี้
การจัดตำแหน่งข้อความ HTML
คุณสมบัติการจัดตำแหน่งข้อความกำหนดการจัดแนวข้อความในแนวนอนสำหรับองค์ประกอบ HTML:
ทดลองกดตรงนี้
บทสรุปบท
- ใช้แอตทริบิวต์ style สำหรับการจัดองค์ประกอบองค์ประกอบ HTML
- ใช้สีพื้นหลังสำหรับสีพื้นหลัง
- ใช้สีสำหรับสีข้อความ
- ใช้แบบอักษรครอบครัวสำหรับแบบอักษรข้อความ
- ใช้แบบอักษรขนาดสำหรับขนาดตัวอักษร
- ใช้ text-align สำหรับจัดตำแหน่งข้อความ
การจัดรูปแบบข้อความ HTML
ทดลองกดตรงนี้
องค์ประกอบการจัดรูปแบบ HTML
ในบทก่อนหน้าคุณได้เรียนรู้เกี่ยวกับแอตทริบิวต์ HTML style
HTML ยังกำหนดองค์ประกอบพิเศษสำหรับการกำหนดข้อความที่มีความหมายพิเศษ
HTML ใช้องค์ประกอบเช่น <b> และ <i> ในการจัดรูปแบบเอาต์พุตเช่นข้อความตัวหนาหรือตัวเอียง
องค์ประกอบการจัดรูปแบบถูกออกแบบมาเพื่อแสดงข้อความประเภทพิเศษ:
- <b> - ข้อความที่เป็นตัวหนา
- <strong> - ข้อความสำคัญ
- <i> - ตัวเอียง
- <em> - เน้นข้อความ
- <mark> - ทำเครื่องหมายข้อความแล้ว
- <small> - ข้อความขนาดเล็ก
- <del> - ลบข้อความแล้ว
- <ins> - แทรกข้อความ
- <sub> - ข้อความบริบท
- <sup> - ข้อความแทนที่
HTML <b> และ <strong> องค์ประกอบ
องค์ประกอบ HTML <b> กำหนดข้อความเป็นตัวหนาโดยไม่มีความสำคัญเป็นพิเศษ
ทดลองกดตรงนี้
องค์ประกอบ HTML <strong> กำหนดข้อความที่มีความเข้มและมีความหมาย "strong" ที่เพิ่มขึ้น
ทดลองกดตรงนี้
HTML <i> และ <em> องค์ประกอบ
องค์ประกอบ HTML <i> จะกำหนดข้อความตัวเอียงโดยไม่มีความสำคัญเป็นพิเศษ
ทดลองกดตรงนี้
องค์ประกอบ HTML <em> กำหนดข้อความที่เน้นย้ำโดยมีความหมายเพิ่มขึ้น
ทดลองกดตรงนี้
หมายเหตุ:
เบราว์เซอร์แสดง <strong> เป็น <b> และ <em> เป็น
<i> อย่างไรก็ตามมีความแตกต่างในความหมายของแท็กเหล่านี้: <b>
และ <i> กำหนดข้อความเป็นตัวเอียงและตัวเอียง แต่ <strong> และ
<em> หมายความว่าข้อความเป็น "สำคัญ"
________________________________________________________________________
องค์ประกอบ HTML <small>
องค์ประกอบ HTML <small> กำหนดข้อความขนาดเล็ก:
ทดลองกดตรงนี้
องค์ประกอบ HTML <mark>
องค์ประกอบ HTML <mark> กำหนดข้อความที่มีเครื่องหมายหรือเน้น:
ทดลองกดตรงนี้
องค์ประกอบ HTML <del>
องค์ประกอบ HTML <del> กำหนดข้อความที่ถูกลบ (ลบ)
ทดลองกดตรงนี้
องค์ประกอบ HTML <ins>
องค์ประกอบ HTML <ins> กำหนดข้อความแทรก (เพิ่ม)
ทดลองกดตรงนี้
องค์ประกอบ HTML <sub>
องค์ประกอบ HTML <sub> กำหนดข้อความ subscripted
ทดลองกดตรงนี้
องค์ประกอบ HTML <sup>
องค์ประกอบ HTML <sup> กำหนดข้อความที่มีส่วนหัว
ทดลองกดตรงนี้
องค์ประกอบการจัดรูปแบบ HTML
HTML การอ้าง และ องค์ประกอบการอ้างอิง
การอ้าง
HTML <q> สำหรับใบเสนอราคาแบบสั้น
องค์ประกอบ HTML <q> กำหนดคำพูดสั้น ๆ
เบราเซอร์มักแทรกเครื่องหมายคำพูดรอบ ๆ องค์ประกอบ <q>
HTML <blockquote> สำหรับใบเสนอราคา
องค์ประกอบ HTML <blockquote> กำหนดส่วนที่ยกมาจากแหล่งอื่น
เบราว์เซอร์มักเยื้อง <blockquote> องค์ประกอบ
HTML <abbr> สำหรับคำย่อ
องค์ประกอบ HTML <abbr> กำหนดคำย่อหรือคำย่อ
เครื่องหมายย่อที่ทำเครื่องหมายสามารถให้ข้อมูลที่เป็นประโยชน์แก่เบราว์เซอร์ระบบแปลภาษาและเครื่องมือค้นหา
HTML <address> สำหรับข้อมูลการติดต่อ
องค์ประกอบ HTML <address> กำหนดข้อมูลผู้ติดต่อ (ผู้เขียน / เจ้าของ) ของเอกสารหรือบทความ
ส่วน <address> มักจะแสดงเป็นตัวเอียง เบราว์เซอร์ส่วนใหญ่จะเพิ่มตัวแบ่งบรรทัดก่อนและหลังองค์ประกอบ
HTML <cite> สำหรับชื่องาน
องค์ประกอบ HTML <cite> กำหนดชื่องาน
เบราเซอร์มักแสดง <cite> องค์ประกอบในตัวเอียง
HTML <bdo> สำหรับการแทนที่แบบสองทิศทาง
องค์ประกอบ HTML <bdo> กำหนดการทับสองทิศทาง
องค์ประกอบ <bdo> ถูกใช้เพื่อแทนที่ทิศทางข้อความปัจจุบัน:
HTML การอ้าง และ องค์ประกอบการอ้างอิง
ความคิดเห็น HTML
ใช้แท็กความคิดเห็นเพื่อแทรกความคิดเห็นในซอร์สโค้ด HTML
<!-- Write your comments here -->
สังเกตว่ามีเครื่องหมายอัศเจรีย์ (!) อยู่ในแท็กเปิด แต่ไม่อยู่ในแท็กปิด
หมายเหตุ: เบราเซอร์จะไม่แสดงความคิดเห็น แต่สามารถช่วยในการจัดทำเอกสารซอร์สโค้ด HTML ของคุณได้
ด้วยความคิดเห็นคุณสามารถวางคำเตือนและการแจ้งเตือนไว้ใน HTML ของคุณ:
ข้อคิดเห็นยังดีสำหรับการดีบัก HTML เพราะคุณสามารถแสดงความคิดเห็นออกบรรทัด HTML ของโค้ดทีละรายการเพื่อค้นหาข้อผิดพลาด:
ข้อคิดเห็นตามเงื่อนไข
คุณอาจสะดุดเมื่อมีข้อคิดเห็นตามเงื่อนไขใน HTML:
<!--[if IE 9]>
.... some HTML here ....
<![endif]-->
ความคิดเห็นที่มีเงื่อนไขระบุแท็ก HTML บางอย่างที่จะเรียกใช้โดย Internet Explorer เท่านั้น
เอกสาร HTML ทั้งหมดต้องเริ่มต้นด้วยการประกาศประเภทเอกสาร: <! DOCTYPE html>.
เอกสาร HTML เองเริ่มต้นด้วย <html> และลงท้ายด้วย </ html>
ส่วนที่มองเห็นได้ของเอกสาร HTML อยู่ระหว่าง <body> และ </ body>
ส่วนหัว HTML ถูกกำหนดด้วยแท็ก <h1> ถึง <h6>
<h1> กำหนดส่วนหัวที่สำคัญที่สุด <h6> กำหนดหัวเรื่องที่สำคัญน้อยที่สุด:
ทดลองกดตรงนี้
ย่อหน้า HTML
ย่อหน้า HTML ถูกกำหนดด้วยแท็ก <p>:
ทดลองกดตรงนี้
ลิงก์ HTML
ลิงก์ HTML ถูกกำหนดด้วย <a> tag:
ใช้แอตทริบิวต์เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ HTML
รูปภาพ HTML
ภาพ HTML ถูกกำหนดด้วยแท็ก <img>
ไฟล์ต้นฉบับ (src) ข้อความทดแทน (alt) ความกว้างและความสูงจะมีให้เป็นแอตทริบิวต์:
ทดลองกดตรงนี้
องค์ประกอบ HTML
องค์ประกอบ HTML ประกอบด้วยแท็กเริ่มต้นและแท็กสิ้นสุดโดยมีเนื้อหาแทรกอยู่ระหว่าง:<tagname> เนื้อหาไปที่นี่ </ tagname>
องค์ประกอบ HTML คือทุกอย่างตั้งแต่แท็กเริ่มต้นไปจนถึงแท็กสิ้นสุด:
<p> วรรคแรกของฉัน </ p>
องค์ประกอบ HTML ที่ไม่มีเนื้อหาเรียกว่าองค์ประกอบว่างเปล่า อิลิเมนต์ว่างเปล่าไม่มีแท็กสิ้นสุดเช่นองค์ประกอบ <br> (ซึ่งระบุว่ามีตัวแบ่งบรรทัด)
องค์ประกอบ HTML ที่ซ้อนกัน
องค์ประกอบ HTML สามารถซ้อนกันได้ (องค์ประกอบสามารถมีองค์ประกอบได้)
เอกสาร HTML ทั้งหมดประกอบด้วยองค์ประกอบ HTML ที่ซ้อนกันอยู่
ตัวอย่างนี้ประกอบด้วยองค์ประกอบ HTML สี่รายการ:
ทดลองกดตรงนี้
ตัวอย่างอธิบาย
องค์ประกอบ <html> กำหนดเอกสารทั้งหมด
มีแท็กเริ่มต้น <html> และแท็กสิ้นสุด </ html>
เนื้อหาขององค์ประกอบเป็นอีกหนึ่งองค์ประกอบ HTML (องค์ประกอบ <body>)
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
องค์ประกอบ <body> กำหนดเนื้อหาของเอกสาร
มีแท็กเริ่มต้น <body> และแท็กสิ้นสุด </ body>
เนื้อหาขององค์ประกอบเป็นอีกสององค์ประกอบ HTML (<h1> และ <p>)
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
องค์ประกอบ <h1> กำหนดหัวเรื่อง
มีแท็กเริ่มต้น <h1> และแท็กสิ้นสุด </ h1>
เนื้อหาขององค์ประกอบคือ: หัวเรื่องแรกของฉัน
<h1>My First Heading</h1>
องค์ประกอบ <p> กำหนดย่อหน้า
มีแท็กเริ่มต้น <p> และแท็กสิ้นสุด </ p>
เนื้อหาขององค์ประกอบคือ: ย่อหน้าแรกของฉัน
<p>My first paragraph.</p>
อย่าลืมแท็กสิ้นสุด
องค์ประกอบ HTML บางอย่างจะแสดงอย่างถูกต้องแม้ว่าคุณจะลืมแท็กสิ้นสุด:
ตัวอย่างข้างต้นทำงานได้ในทุกเบราว์เซอร์เนื่องจากแท็กปิดถือว่าเป็นอุปกรณ์เสริม
อย่าพึ่งพาเรื่องนี้ อาจทำให้เกิดผลลัพธ์ที่ไม่คาดคิดและ / หรือข้อผิดพลาดหากคุณลืมแท็กสิ้นสุด
องค์ประกอบ HTML ที่ว่างเปล่า
องค์ประกอบ HTML ที่ไม่มีเนื้อหาเรียกว่าองค์ประกอบว่างเปล่า
<br> เป็นองค์ประกอบว่างเปล่าโดยไม่มีแท็กปิด (แท็ก <br> กำหนดตัวแบ่งบรรทัด)
องค์ประกอบที่ว่างเปล่าสามารถ "ปิด" ในแท็กเปิดดังนี้: <br />
HTML5 ไม่ต้องการให้องค์ประกอบว่างเปล่าถูกปิด แต่ถ้าคุณต้องการตรวจสอบเข้มงวดหรือถ้าคุณต้องการให้เอกสารของคุณสามารถอ่านได้โดย XML parsers คุณต้องปิดองค์ประกอบ HTML ทั้งหมดอย่างถูกต้อง
ใช้แท็กตัวพิมพ์เล็ก
แท็ก HTML ไม่สำคัญต่อกรณี: <P> หมายถึงเช่นเดียวกับ <p>
มาตรฐาน HTML5 ไม่จำเป็นต้องมีแท็กตัวพิมพ์เล็ก แต่ W3C แนะนำให้ใช้อักษรตัวพิมพ์เล็กใน HTML และต้องการพิมพ์เล็กสำหรับประเภทเอกสารที่เข้มงวดมากขึ้นเช่น XHTML
แอตทริบิวต์ HTML
- องค์ประกอบ HTML ทั้งหมดสามารถมีแอตทริบิวต์ได้
- แอตทริบิวต์ให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ
- ระบุแอตทริบิวต์ในแท็กเริ่มต้นเสมอ
- แอตทริบิวต์มักจะมาในชื่อ / ค่าคู่เช่น: name = "value"
แอตทริบิวต์ lang
ภาษาของเอกสารสามารถประกาศได้ในแท็ก <html>
ภาษาถูกประกาศด้วยแอตทริบิวต์ lang
การประกาศภาษาเป็นสิ่งสำคัญสำหรับแอปพลิเคชันการเข้าถึง (โปรแกรมอ่านหน้าจอ) และเครื่องมือค้นหา:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
ตัวอักษรสองตัวแรกระบุภาษา (en) หากมีภาษาให้ใช้ตัวอักษรอีกสองตัว (สหรัฐฯ)
แอตทริบิวต์ชื่อ
ที่นี่มีการเพิ่มแอตทริบิวต์ title ลงในองค์ประกอบ <p> ค่าของแอตทริบิวต์ title จะแสดงเป็นเคล็ดลับเครื่องมือเมื่อคุณเลื่อนเมาส์ไปวางเหนือย่อหน้า:
ทดลองกดตรงนี้
แอตทริบิวต์ href
ลิงก์ HTML ถูกกำหนดด้วยแท็ก <a> มีการระบุที่อยู่ลิงก์ในแอตทริบิวต์ href:
ทดลองกดตรงนี้
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับลิงก์และแท็ก <a> ในบทแนะนำนี้ในภายหลัง
คุณสมบัติขนาด
ภาพ HTML ถูกกำหนดด้วยแท็ก <img>
ชื่อไฟล์ของแหล่งที่มา (src) และขนาดของภาพ (ความกว้างและความสูง) ทั้งหมดมีให้เป็นแอตทริบิวต์:
ทดลองกดตรงนี้
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับภาพและแท็ก <img> ในบทแนะนำนี้ในภายหลัง
แอ็ตทริบิวต์ alt
แอตทริบิวต์ alt จะระบุข้อความทางเลือกที่จะใช้เมื่อไม่สามารถแสดงรูปภาพได้
คุณสามารถอ่านค่าของแอตทริบิวต์ได้โดยโปรแกรมอ่านหน้าจอ ด้วยวิธีนี้ผู้ที่ "กำลังฟัง" ไปยังหน้าเว็บเช่น คนตาบอดสามารถ "ได้ยิน" องค์ประกอบ
เราขอแนะนำ: ใช้แอตทริบิวต์ตัวพิมพ์เล็ก
มาตรฐาน HTML5 ไม่จำเป็นต้องมีชื่อแอตทริบิวต์ตัวพิมพ์เล็ก
แอตทริบิวต์ title สามารถเขียนด้วยตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กเช่นชื่อเรื่องหรือ TITLE
W3C แนะนำให้ใช้อักษรตัวพิมพ์เล็กใน HTML และต้องการพิมพ์เล็กสำหรับประเภทเอกสารที่เข้มงวดมากขึ้นเช่น XHTML
ที่ W3Schools เราใช้ชื่อแอตทริบิวต์ตัวพิมพ์เล็กเสมอ
เราแนะนำ: ค่าแอตทริบิวต์ที่อ้างถึง
มาตรฐาน HTML5 ไม่จำเป็นต้องมีคำพูดรอบ ๆ ค่าแอตทริบิวต์
แอตทริบิวต์ href ที่แสดงไว้ข้างต้นสามารถเขียนเป็น:
W3C แนะนำคำพูดในรูปแบบ HTML และเรียกร้องคำพูดสำหรับประเภทเอกสารที่เข้มงวดมากขึ้นเช่น XHTML
บางครั้งก็จำเป็นต้องใช้คำพูด ตัวอย่างนี้จะไม่แสดงแอตทริบิวต์ title อย่างถูกต้องเนื่องจากมีช่องว่าง:
ที่ W3Schools เรามักใช้คำพูดรอบ ๆ ค่าแอตทริบิวต์
คำพูดแบบเดี่ยวหรือแบบคู่?
เครื่องหมายคำพูดคู่รอบค่าแอตทริบิวต์เป็นคำที่ใช้กันทั่วไปใน HTML แต่สามารถใช้เครื่องหมายคำพูดเดี่ยวได้
ในบางกรณีเมื่อค่าแอ็ตทริบิวต์มีเครื่องหมายคำพูดคู่ก็จำเป็นต้องใช้เครื่องหมายคำพูดเดี่ยว:
<p title='John "ShotGun" Nelson'>
<p title="John 'ShotGun' Nelson">
บทสรุปบท
- องค์ประกอบ HTML ทั้งหมดสามารถมีแอตทริบิวต์ได้
- แอตทริบิวต์ title ให้ข้อมูล "tool-tip" เพิ่มเติม
- แอตทริบิวต์ href ให้ข้อมูลที่อยู่สำหรับลิงก์
- แอตทริบิวต์ความกว้างและความสูงให้ข้อมูลขนาดสำหรับรูปภาพ
- แอตทริบิวต์ alt ให้ข้อความสำหรับโปรแกรมอ่านหน้าจอ
- ที่ W3Schools เราใช้ชื่อแอตทริบิวต์ตัวพิมพ์เล็กเสมอ
- ที่ W3Schools เราจะระบุค่าแอตทริบิวต์ด้วยเครื่องหมายคำพูดคู่เสมอ
การแบ่งบรรทัด HTML
องค์ประกอบ HTML <br> กำหนดเส้นแบ่ง
ใช้ <br> ถ้าคุณต้องการแบ่งบรรทัด (บรรทัดใหม่) โดยไม่ต้องเริ่มย่อหน้าใหม่:
ทดลองกดตรงนี้
แท็ก 2 เป็นแท็กว่างเปล่าซึ่งหมายความว่าแท็กไม่มีแท็กสิ้นสุด
ปัญหาบทกวี
บทกวีนี้จะแสดงในบรรทัดเดียว:
ทดลองกดตรงนี้
องค์ประกอบ <pre> HTML <
องค์ประกอบ HTML <pre> กำหนดข้อความที่จัดรูปแบบไว้ล่วงหน้า
ข้อความภายในองค์ประกอบ <pre> จะปรากฏขึ้นในแบบอักษรความกว้างคงที่ (โดยปกติจะเป็น Courier) และจะเก็บรักษาทั้งช่องว่างและตัวแบ่งบรรทัด:
ทดลองกดตรงนี้
การอ้างอิงแท็ก HTML
การอ้างอิงแท็ก W3Schools 'ประกอบด้วยข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ HTML และแอตทริบิวต์
ลักษณะ HTML
ทดลองกดตรงนี้แอตทริบิวต์สไตล์ HTML
การกำหนดลักษณะขององค์ประกอบ HTML สามารถทำได้ด้วยแอตทริบิวต์ style
แอตทริบิวต์สไตล์ HTML มีไวยากรณ์ต่อไปนี้:
<tagname style="property:value;">
พร็อพเพอร์ตี้เป็นคุณสมบัติ CSS ค่านี้เป็นค่า CSS
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ CSS ในบทแนะนำนี้ในภายหลัง
สีพื้นหลัง HTML
คุณสมบัติพื้นหลังสีกำหนดสีพื้นหลังสำหรับองค์ประกอบ HTML
ตัวอย่างนี้กำหนดสีพื้นหลังของหน้าเป็นสีน้ำเงิน:
ทดลองกดตรงนี้
สีข้อความ HTML
คุณสมบัติสีกำหนดสีข้อความสำหรับองค์ประกอบ HTML:
ทดลองกดตรงนี้
แบบอักษร HTML
คุณสมบัติ font-family กำหนดแบบอักษรที่จะใช้สำหรับองค์ประกอบ HTML:
ทดลองกดตรงนี้
ขนาดข้อความ HTML
คุณสมบัติ font-size กำหนดขนาดตัวอักษรสำหรับอิลิเมนต์ HTML:
ทดลองกดตรงนี้
การจัดตำแหน่งข้อความ HTML
คุณสมบัติการจัดตำแหน่งข้อความกำหนดการจัดแนวข้อความในแนวนอนสำหรับองค์ประกอบ HTML:
ทดลองกดตรงนี้
บทสรุปบท
- ใช้แอตทริบิวต์ style สำหรับการจัดองค์ประกอบองค์ประกอบ HTML
- ใช้สีพื้นหลังสำหรับสีพื้นหลัง
- ใช้สีสำหรับสีข้อความ
- ใช้แบบอักษรครอบครัวสำหรับแบบอักษรข้อความ
- ใช้แบบอักษรขนาดสำหรับขนาดตัวอักษร
- ใช้ text-align สำหรับจัดตำแหน่งข้อความ
การจัดรูปแบบข้อความ HTML
ทดลองกดตรงนี้
องค์ประกอบการจัดรูปแบบ HTML
ในบทก่อนหน้าคุณได้เรียนรู้เกี่ยวกับแอตทริบิวต์ HTML style
HTML ยังกำหนดองค์ประกอบพิเศษสำหรับการกำหนดข้อความที่มีความหมายพิเศษ
HTML ใช้องค์ประกอบเช่น <b> และ <i> ในการจัดรูปแบบเอาต์พุตเช่นข้อความตัวหนาหรือตัวเอียง
องค์ประกอบการจัดรูปแบบถูกออกแบบมาเพื่อแสดงข้อความประเภทพิเศษ:
- <b> - ข้อความที่เป็นตัวหนา
- <strong> - ข้อความสำคัญ
- <i> - ตัวเอียง
- <em> - เน้นข้อความ
- <mark> - ทำเครื่องหมายข้อความแล้ว
- <small> - ข้อความขนาดเล็ก
- <del> - ลบข้อความแล้ว
- <ins> - แทรกข้อความ
- <sub> - ข้อความบริบท
- <sup> - ข้อความแทนที่
HTML <b> และ <strong> องค์ประกอบ
องค์ประกอบ HTML <b> กำหนดข้อความเป็นตัวหนาโดยไม่มีความสำคัญเป็นพิเศษ
ทดลองกดตรงนี้
องค์ประกอบ HTML <strong> กำหนดข้อความที่มีความเข้มและมีความหมาย "strong" ที่เพิ่มขึ้น
ทดลองกดตรงนี้
HTML <i> และ <em> องค์ประกอบ
องค์ประกอบ HTML <i> จะกำหนดข้อความตัวเอียงโดยไม่มีความสำคัญเป็นพิเศษ
ทดลองกดตรงนี้
องค์ประกอบ HTML <em> กำหนดข้อความที่เน้นย้ำโดยมีความหมายเพิ่มขึ้น
ทดลองกดตรงนี้
หมายเหตุ:
เบราว์เซอร์แสดง <strong> เป็น <b> และ <em> เป็น
<i> อย่างไรก็ตามมีความแตกต่างในความหมายของแท็กเหล่านี้: <b>
และ <i> กำหนดข้อความเป็นตัวเอียงและตัวเอียง แต่ <strong> และ
<em> หมายความว่าข้อความเป็น "สำคัญ"
________________________________________________________________________
องค์ประกอบ HTML <small>
องค์ประกอบ HTML <small> กำหนดข้อความขนาดเล็ก:
ทดลองกดตรงนี้
องค์ประกอบ HTML <mark>
องค์ประกอบ HTML <mark> กำหนดข้อความที่มีเครื่องหมายหรือเน้น:
ทดลองกดตรงนี้
องค์ประกอบ HTML <del>
องค์ประกอบ HTML <del> กำหนดข้อความที่ถูกลบ (ลบ)
ทดลองกดตรงนี้
องค์ประกอบ HTML <ins>
องค์ประกอบ HTML <ins> กำหนดข้อความแทรก (เพิ่ม)
ทดลองกดตรงนี้
องค์ประกอบ HTML <sub>
องค์ประกอบ HTML <sub> กำหนดข้อความ subscripted
ทดลองกดตรงนี้
องค์ประกอบ HTML <sup>
องค์ประกอบ HTML <sup> กำหนดข้อความที่มีส่วนหัว
ทดลองกดตรงนี้
องค์ประกอบการจัดรูปแบบ HTML
HTML การอ้าง และ องค์ประกอบการอ้างอิง
การอ้าง
HTML <q> สำหรับใบเสนอราคาแบบสั้น
องค์ประกอบ HTML <q> กำหนดคำพูดสั้น ๆ
เบราเซอร์มักแทรกเครื่องหมายคำพูดรอบ ๆ องค์ประกอบ <q>
HTML <blockquote> สำหรับใบเสนอราคา
องค์ประกอบ HTML <blockquote> กำหนดส่วนที่ยกมาจากแหล่งอื่น
เบราว์เซอร์มักเยื้อง <blockquote> องค์ประกอบ
HTML <abbr> สำหรับคำย่อ
องค์ประกอบ HTML <abbr> กำหนดคำย่อหรือคำย่อ
เครื่องหมายย่อที่ทำเครื่องหมายสามารถให้ข้อมูลที่เป็นประโยชน์แก่เบราว์เซอร์ระบบแปลภาษาและเครื่องมือค้นหา
HTML <address> สำหรับข้อมูลการติดต่อ
องค์ประกอบ HTML <address> กำหนดข้อมูลผู้ติดต่อ (ผู้เขียน / เจ้าของ) ของเอกสารหรือบทความ
ส่วน <address> มักจะแสดงเป็นตัวเอียง เบราว์เซอร์ส่วนใหญ่จะเพิ่มตัวแบ่งบรรทัดก่อนและหลังองค์ประกอบ
HTML <cite> สำหรับชื่องาน
องค์ประกอบ HTML <cite> กำหนดชื่องาน
เบราเซอร์มักแสดง <cite> องค์ประกอบในตัวเอียง
HTML <bdo> สำหรับการแทนที่แบบสองทิศทาง
องค์ประกอบ HTML <bdo> กำหนดการทับสองทิศทาง
องค์ประกอบ <bdo> ถูกใช้เพื่อแทนที่ทิศทางข้อความปัจจุบัน:
HTML การอ้าง และ องค์ประกอบการอ้างอิง
ความคิดเห็น HTML
ใช้แท็กความคิดเห็นเพื่อแทรกความคิดเห็นในซอร์สโค้ด HTML
<!-- Write your comments here -->
สังเกตว่ามีเครื่องหมายอัศเจรีย์ (!) อยู่ในแท็กเปิด แต่ไม่อยู่ในแท็กปิด
หมายเหตุ: เบราเซอร์จะไม่แสดงความคิดเห็น แต่สามารถช่วยในการจัดทำเอกสารซอร์สโค้ด HTML ของคุณได้
ด้วยความคิดเห็นคุณสามารถวางคำเตือนและการแจ้งเตือนไว้ใน HTML ของคุณ:
ข้อคิดเห็นยังดีสำหรับการดีบัก HTML เพราะคุณสามารถแสดงความคิดเห็นออกบรรทัด HTML ของโค้ดทีละรายการเพื่อค้นหาข้อผิดพลาด:
ข้อคิดเห็นตามเงื่อนไข
คุณอาจสะดุดเมื่อมีข้อคิดเห็นตามเงื่อนไขใน HTML:
<!--[if IE 9]>
.... some HTML here ....
<![endif]-->
ความคิดเห็นที่มีเงื่อนไขระบุแท็ก HTML บางอย่างที่จะเรียกใช้โดย Internet Explorer เท่านั้น
________________________________________________________________________
HTML <q> สำหรับใบเสนอราคาแบบสั้น
องค์ประกอบ HTML <q> กำหนดคำพูดสั้น ๆ
เบราเซอร์มักแทรกเครื่องหมายคำพูดรอบ ๆ องค์ประกอบ <q>
HTML <blockquote> สำหรับใบเสนอราคา
องค์ประกอบ HTML <blockquote> กำหนดส่วนที่ยกมาจากแหล่งอื่น
เบราว์เซอร์มักเยื้อง <blockquote> องค์ประกอบ
HTML <abbr> สำหรับคำย่อ
องค์ประกอบ HTML <abbr> กำหนดคำย่อหรือคำย่อ
เครื่องหมายย่อที่ทำเครื่องหมายสามารถให้ข้อมูลที่เป็นประโยชน์แก่เบราว์เซอร์ระบบแปลภาษาและเครื่องมือค้นหา
HTML <address> สำหรับข้อมูลการติดต่อ
องค์ประกอบ HTML <address> กำหนดข้อมูลผู้ติดต่อ (ผู้เขียน / เจ้าของ) ของเอกสารหรือบทความ
ส่วน <address> มักจะแสดงเป็นตัวเอียง เบราว์เซอร์ส่วนใหญ่จะเพิ่มตัวแบ่งบรรทัดก่อนและหลังองค์ประกอบ
HTML <cite> สำหรับชื่องาน
องค์ประกอบ HTML <cite> กำหนดชื่องาน
เบราเซอร์มักแสดง <cite> องค์ประกอบในตัวเอียง
HTML <bdo> สำหรับการแทนที่แบบสองทิศทาง
องค์ประกอบ HTML <bdo> กำหนดการทับสองทิศทาง
องค์ประกอบ <bdo> ถูกใช้เพื่อแทนที่ทิศทางข้อความปัจจุบัน:
HTML การอ้าง และ องค์ประกอบการอ้างอิง
ข้อคิดเห็นตามเงื่อนไข
คุณอาจสะดุดเมื่อมีข้อคิดเห็นตามเงื่อนไขใน HTML:
<!--[if IE 9]>
.... some HTML here ....
<![endif]-->
<![endif]-->
ความคิดเห็นที่มีเงื่อนไขระบุแท็ก HTML บางอย่างที่จะเรียกใช้โดย Internet Explorer เท่านั้น
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น