เกี่ยวกับการสอน HTML 5
HTML
ภาษาสำหรับสร้างหน้าเว็บ
HTML บทนำ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> ประกอบด้วยข้อมูล meta เกี่ยวกับเอกสาร
- องค์ประกอบ <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
ขั้นที่ 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>)
องค์ประกอบ <body> กำหนดเนื้อหาของเอกสาร
มีแท็กเริ่มต้น <body> และแท็กสิ้นสุด </ body>
เนื้อหาขององค์ประกอบเป็นอีกสององค์ประกอบ HTML (<h1> และ <p>)
องค์ประกอบ <h1> กำหนดหัวเรื่อง
มีแท็กเริ่มต้น <h1> และแท็กสิ้นสุด </ h1>
เนื้อหาขององค์ประกอบคือ: หัวเรื่องแรกของฉัน
องค์ประกอบ <p> กำหนดย่อหน้า
มีแท็กเริ่มต้น <p> และแท็กสิ้นสุด </ p>
เนื้อหาขององค์ประกอบคือ: ย่อหน้าแรกของฉัน
อย่าลืมแท็กสิ้นสุด
องค์ประกอบ HTML บางอย่างจะแสดงอย่างถูกต้องแม้ว่าคุณจะลืมแท็กสิ้นสุด:
ลองทำด้วยตัวเอง
คลิกที่ปุ่ม "ลองทำด้วยตัวเอง" เพื่อดูวิธีการทำงาน
ตัวอย่างข้างต้นทำงานได้ในทุกเบราว์เซอร์เนื่องจากแท็กปิดถือว่าเป็นอุปกรณ์เสริม
อย่าพึ่งพาเรื่องนี้ อาจทำให้เกิดผลลัพธ์ที่ไม่คาดคิดและ / หรือข้อผิดพลาดหากคุณลืมแท็กสิ้นสุด
องค์ประกอบ HTML ที่ว่างเปล่า
องค์ประกอบ HTML ที่ไม่มีเนื้อหาเรียกว่าองค์ประกอบว่างเปล่า
<br> เป็นองค์ประกอบว่างเปล่าโดยไม่มีแท็กปิด (แท็ก <br> กำหนดตัวแบ่งบรรทัด)
องค์ประกอบที่ว่างเปล่าสามารถ "ปิด" ในแท็กเปิดดังนี้: <br />
HTML5 ไม่ต้องการให้องค์ประกอบว่างเปล่าถูกปิด แต่ ถ้าคุณต้องการตรวจสอบเข้มงวดหรือถ้าคุณต้องการให้เอกสารของคุณสามารถอ่านได้ โดย XML parsers คุณต้องปิดองค์ประกอบ HTML ทั้งหมดอย่างถูกต้อง ใช้แท็กตัวพิมพ์เล็ก
แท็ก HTML ไม่สำคัญต่อกรณี: <P> หมายถึงเช่นเดียวกับ <p>
มาตรฐาน HTML5 ไม่จำเป็นต้องมีแท็กตัวพิมพ์เล็ก แต่ W3C แนะนำให้ใช้อักษรตัวพิมพ์เล็กใน HTML และต้องการพิมพ์เล็กสำหรับประเภทเอกสารที่เข้มงวดมากขึ้นเช่น XHTML
เราใช้แท็กตัวพิมพ์เล็กเสมอ
แอตทริบิวต์ HTML
แอตทริบิวต์ให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ HTML
แอตทริบิวต์ HTML
- องค์ประกอบ HTML ทั้งหมดสามารถมีแอตทริบิวต์ได้
- แอตทริบิวต์ให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ
- ระบุแอตทริบิวต์ในแท็กเริ่มต้นเสมอ
- แอตทริบิวต์มักจะมาในชื่อ / ค่าคู่เช่น: name = "value"
แอตทริบิวต์ lang
ภาษาของเอกสารสามารถประกาศได้ในแท็ก <html>
ภาษาถูกประกาศด้วยแอตทริบิวต์ lang
การประกาศภาษาเป็นสิ่งสำคัญสำหรับแอปพลิเคชันการเข้าถึง (โปรแกรมอ่านหน้าจอ) และเครื่องมือค้นหา:
ตัวอักษรสองตัวแรกระบุภาษา (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 แต่สามารถใช้เครื่องหมายคำพูดเดี่ยวได้
ในบางกรณีเมื่อค่าแอ็ตทริบิวต์มีเครื่องหมายคำพูดคู่ก็จำเป็นต้องใช้เครื่องหมายคำพูดเดี่ยว:
บทสรุป
- องค์ประกอบ HTML ทั้งหมดสามารถมีแอตทริบิวต์ได้
- แอตทริบิวต์ title ให้ข้อมูล "tool-tip" เพิ่มเติม
- แอตทริบิวต์ href ให้ข้อมูลที่อยู่สำหรับลิงก์
- แอตทริบิวต์ความกว้างและความสูงให้ข้อมูลขนาดสำหรับรูปภาพ
- แอตทริบิวต์ alt ให้ข้อความสำหรับโปรแกรมอ่านหน้าจอ
- ที่ W3Schools เราใช้ชื่อแอตทริบิวต์ตัวพิมพ์เล็กเสมอ
- ที่ W3Schools เราจะระบุค่าแอตทริบิวต์ด้วยเครื่องหมายคำพูดคู่เสมอ
แบบฝึกหัดที่1 แบบฝึกหัดที่2 แบบฝึกหัดที่3 แบบฝึกหัดที่4 แบบฝึกหัดที่5
แอตทริบิวต์ HTML
ด้านล่างนี้เป็นรายการตามตัวอักษรของคุณลักษณะบางอย่างที่มักใช้ใน HTML:
รายการแอตทริบิวต์ทั้งหมดสำหรับแต่ละองค์ประกอบ HTML มีอยู่ในรายการของเรา:การอ้างอิงแอตทริบิวต์ HTML
ส่วนหัว HTML
ส่วนหัวมีความสำคัญในเอกสาร HTML
ส่วนหัว 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
การอ้างอิงแท็ก W3Schools 'มีข้อมูลเพิ่มเติมเกี่ยวกับแท็กเหล่านี้และแอตทริบิวต์ของพวกเขา
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับแท็กและแอตทริบิวต์ HTML ในบทต่อไปของบทแนะนำนี้
ย่อหน้า HTML
องค์ประกอบ HTML <p> กำหนดย่อหน้า:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
หมายเหตุ: เบราเซอร์จะเพิ่มพื้นที่สีขาวบางส่วน (ขอบ) ก่อนและหลังย่อหน้า
การแสดงผล HTML
คุณไม่แน่ใจว่า HTML จะแสดงอย่างไร
หน้าจอขนาดใหญ่หรือเล็กและหน้าต่างที่ปรับขนาดจะสร้างผลลัพธ์ที่แตกต่างกัน
ด้วย HTML คุณจะไม่สามารถเปลี่ยนเอาต์พุตโดยการเพิ่มช่องว่างหรือบรรทัดพิเศษในโค้ด HTML ของคุณ
เบราเซอร์จะลบช่องว่างและบรรทัดพิเศษออกเมื่อหน้าแสดง:
Example
<p>
This paragraph
contains a lot of lines
in the source code,
but
the browser
ignores it.
</p>
<p>
This paragraph
contains
a lot of spaces
in the source
code,
but the browser
ignores
it.
</p>
อย่าลืมแท็กสิ้นสุดเบราเซอร์ส่วนใหญ่จะแสดง HTML อย่างถูกต้องแม้ว่าคุณจะลืมแท็กสิ้นสุด:
Example
<p>This is a paragraph.
<p>This is another paragraph.
ตัวอย่างข้างต้นจะทำงานได้ในเบราว์เซอร์ส่วนใหญ่ แต่อย่าพึ่งพา
หมายเหตุ: การวางแท็กสิ้นสุดอาจทำให้เกิดผลลัพธ์หรือข้อผิดพลาดที่ไม่คาดคิด
การแบ่งบรรทัด HTML
องค์ประกอบ HTML <br> กำหนดเส้นแบ่ง
ใช้ <br> ถ้าคุณต้องการแบ่งบรรทัด (บรรทัดใหม่) โดยไม่ต้องเริ่มย่อหน้าใหม่:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
ลองทำด้วยตัวเอง
แท็ก 2 เป็นแท็กว่างเปล่าซึ่งหมายความว่าแท็กไม่มีแท็กสิ้นสุด
ปัญหาบทกวี
บทกวีนี้จะแสดงในบรรทัดเดียว:
Example
<p>
My Bonnie lies over
the ocean.
My Bonnie lies over the sea.
My Bonnie
lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
ลองทำด้วยตัวเอง
องค์ประกอบ <pre> HTML
องค์ประกอบ HTML <pre> กำหนดข้อความที่จัดรูปแบบไว้ล่วงหน้า
ข้อความภายในองค์ประกอบ <pre> จะปรากฏขึ้นในแบบอักษรความกว้างคงที่ (โดยปกติจะเป็น Courier) และจะเก็บรักษาทั้งช่องว่างและตัวแบ่งบรรทัด:
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the
ocean.
Oh, bring back my Bonnie to me.
</pre>
ลองทำด้วยตัวเอง
การอ้างอิงแท็ก HTML
การอ้างอิงแท็ก W3Schools 'ประกอบด้วยข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ HTML และแอตทริบิวต์
ลักษณะ HTML
การกำหนดลักษณะขององค์ประกอบ HTML สามารถทำได้ด้วยแอตทริบิวต์ style
แอตทริบิวต์สไตล์ HTML มีไวยากรณ์ต่อไปนี้:
<tagname style="property:value;">
พร็อพเพอร์ตี้เป็นคุณสมบัติ CSS ค่านี้เป็นค่า CSS
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ CSS ในบทแนะนำนี้ในภายหลัง
สีพื้นหลัง HTML
คุณสมบัติพื้นหลังสีกำหนดสีพื้นหลังสำหรับองค์ประกอบ HTML
ตัวอย่างนี้กำหนดสีพื้นหลังของหน้าเว็บให้เป็นผงแป้ง:
Example
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
ลองทำด้วยตัวเอง
สีข้อความ HTML
คุณสมบัติสีกำหนดสีข้อความสำหรับองค์ประกอบ HTML:
Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
ลองทำด้วยตัวเอง
แบบอักษร HTML
คุณสมบัติ font-family กำหนดแบบอักษรที่จะใช้สำหรับองค์ประกอบ HTML:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
ขนาดข้อความ HTML
คุณสมบัติ font-size กำหนดขนาดตัวอักษรสำหรับอิลิเมนต์ HTML:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p
style="font-size:160%;">This is a paragraph.</p>
ลองทำด้วยตัวเอง
การจัดตำแหน่งข้อความ HTML
คุณสมบัติการจัดตำแหน่งข้อความกำหนดการจัดแนวข้อความในแนวนอนสำหรับองค์ประกอบ HTML:
Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
ลองทำด้วยตัวเอง
บทสรุป
- ใช้แอตทริบิวต์ style สำหรับการจัดองค์ประกอบองค์ประกอบ HTML
- ใช้สีพื้นหลังสำหรับสีพื้นหลัง
- ใช้สีสำหรับสีข้อความ
- ใช้แบบอักษรครอบครัวสำหรับแบบอักษรข้อความ
- ใช้แบบอักษรขนาดสำหรับขนาดตัวอักษร
- ใช้ text-align สำหรับจัดตำแหน่งข้อความ
การจัดรูปแบบข้อความ HTML
Text Formatting
This text is bold
This text is italic
This is subscript and superscript
This text is italic
This is subscript and superscript
ลองทำด้วยตัวเอง
องค์ประกอบการจัดรูปแบบ HTML
ในบทก่อนหน้าคุณได้เรียนรู้เกี่ยวกับแอตทริบิวต์ HTML style
HTML ยังกำหนดองค์ประกอบพิเศษสำหรับการกำหนดข้อความที่มีความหมายพิเศษ
HTML ใช้องค์ประกอบเช่น <b> และ <i> ในการจัดรูปแบบเอาต์พุตเช่นข้อความตัวหนาหรือตัวเอียง
องค์ประกอบการจัดรูปแบบถูกออกแบบมาเพื่อแสดงข้อความประเภทพิเศษ:
- <b> - ข้อความที่เป็นตัวหนา
- <strong> - ข้อความสำคัญ
- <i> - ตัวเอียง
- <em> - เน้นข้อความ
- <mark> - ทำเครื่องหมายข้อความแล้ว
- <small> - ข้อความขนาดเล็ก
- <del> - ลบข้อความแล้ว
- <ins> - แทรกข้อความ
- <sub> - ข้อความบริบท
- <sup> - ข้อความแทนที่
HTML <b> และ <strong> องค์ประกอบ
องค์ประกอบ HTML <b> กำหนดข้อความเป็นตัวหนาโดยไม่มีความสำคัญเป็นพิเศษ
Example
<b>This text is bold</b>
ลองทำด้วยตัวเอง
องค์ประกอบ HTML <strong> กำหนดข้อความที่มีความเข้มและมีความหมาย "strong" ที่เพิ่มขึ้น
Example
<strong>This text is strong</strong>
ลองทำด้วยตัวเอง
HTML <i> และ <em> องค์ประกอบ
องค์ประกอบ HTML <i> จะกำหนดข้อความตัวเอียงโดยไม่มีความสำคัญเป็นพิเศษ
Example
<i>This text is italic</i>
ลองทำด้วยตัวเอง
องค์ประกอบ HTML <em> กำหนดข้อความที่เน้นย้ำโดยมีความหมายเพิ่มขึ้น
Example
<em>This text is
emphasized</em>
ลองทำด้วยตัวเอง
หมายเหตุ: เบราว์เซอร์แสดง <strong> เป็น <b> และ <em> เป็น <i> อย่างไรก็ตามมีความแตกต่างในความหมายของแท็กเหล่านี้: <b> และ <i> กำหนดข้อความเป็นตัวเอียงและตัวเอียง แต่ <strong> และ <em> หมายความว่าข้อความเป็น "สำคัญ"
องค์ประกอบ HTML <small>
องค์ประกอบ HTML <small> กำหนดข้อความขนาดเล็ก:
Example
<h2>HTML <small>Small</small> Formatting</h2>ลองทำด้วยตัวเอง
องค์ประกอบ HTML <mark>
องค์ประกอบ HTML <mark> กำหนดข้อความที่ทำเครื่องหมายหรือเน้น:
Example
<h2>HTML <mark>Marked</mark> Formatting</h2>ลองทำด้วยตัวเอง
องค์ประกอบ HTML <del>
องค์ประกอบ HTML <del> กำหนดข้อความที่ถูก
Example
<p>My favorite color is <del>blue</del> red.</p>ลองทำด้วยตัวเอง
องค์ประกอบ HTML <ins>
องค์ประกอบ HTML <ins> กำหนดข้อความแทรก (เพิ่ม)
Example
<p>My favorite <ins>color</ins> is red.</p>ลองทำด้วยตัวเอง
องค์ประกอบ HTML <sub>
องค์ประกอบ HTML <sub> กำหนดข้อความ subscripted
Example
<p>This is <sub>subscripted</sub> text.</p>ลองทำด้วยตัวเอง
องค์ประกอบ HTML <sup>
องค์ประกอบ HTML <sup> กำหนดข้อความที่มีส่วนหัว
Example
<p>This is <sup>superscripted</sup> text.</p>ลองทำด้วยตัวเอง
องค์ประกอบการจัดรูปแบบ HTML
HTML Quotation และ Citation Elements
Quotation
Here is a quote from WWF's website:
ลองทำด้วยตัวเองFor 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
HTML <q> สำหรับใบเสนอราคาแบบสั้น
องค์ประกอบ HTML <q> กำหนดคำพูดสั้น ๆ
เบราเซอร์มักแทรกเครื่องหมายคำพูดรอบ ๆ องค์ประกอบ <q>
Example
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
ลองทำด้วยตัวเอง
HTML <blockquote> สำหรับใบเสนอราคา
องค์ประกอบ HTML <blockquote> กำหนดส่วนที่ยกมาจากแหล่งอื่น
เบราว์เซอร์มักเยื้อง <blockquote> องค์ประกอบ
Example
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's
leading conservation organization,
WWF works in 100 countries and is
supported by
1.2 million members in the United States and
close to 5
million globally.
</blockquote>
ลองทำด้วยตัวเอง
HTML <abbr> สำหรับคำย่อ
องค์ประกอบ HTML <abbr> กำหนดคำย่อหรือคำย่อ
เครื่องหมายย่อที่ทำเครื่องหมายสามารถให้ข้อมูลที่เป็นประโยชน์แก่เบราว์เซอร์ระบบแปลภาษาและเครื่องมือค้นหา
Example
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
ลองทำด้วยตัวเอง
HTML <address> สำหรับข้อมูลการติดต่อ
องค์ประกอบ HTML <address> กำหนดข้อมูลผู้ติดต่อ (ผู้เขียน / เจ้าของ) ของเอกสารหรือบทความ
ส่วน <address> มักจะแสดงเป็นตัวเอียง เบราว์เซอร์ส่วนใหญ่จะเพิ่มตัวแบ่งบรรทัดก่อนและหลังองค์ประกอบ
Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
ลองทำด้วยตัวเอง
HTML <cite> สำหรับชื่องาน
องค์ประกอบ HTML <cite> กำหนดชื่องาน
เบราเซอร์มักแสดง <cite> องค์ประกอบในตัวเอียง
Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
ลองทำด้วยตัวเอง
HTML <bdo> สำหรับการแทนที่แบบสองทิศทาง
องค์ประกอบ HTML <bdo> กำหนดการทับสองทิศทาง
องค์ประกอบ <bdo> ถูกใช้เพื่อแทนที่ทิศทางข้อความปัจจุบัน:
Example
<bdo dir="rtl">This text will be written from right to left</bdo>
ลองทำด้วยตัวเอง
ความคิดเห็น HTML
ใช้แท็กความคิดเห็นเพื่อแทรกความคิดเห็นในซอร์สโค้ด HTML
แท็กความคิดเห็น HTML
คุณสามารถเพิ่มความคิดเห็นไปยังซอร์สโค้ด HTML ของคุณโดยใช้ไวยากรณ์ต่อไปนี้:
<!-- Write your comments here -->
สังเกตว่ามีเครื่องหมายอัศเจรีย์ (!) อยู่ในแท็กเปิด แต่ไม่อยู่ในแท็กปิด
หมายเหตุ: เบราเซอร์จะไม่แสดงความคิดเห็น แต่สามารถช่วยในการจัดทำเอกสารซอร์สโค้ด HTML ของคุณได้
ด้วยความคิดเห็นคุณสามารถวางคำเตือนและการแจ้งเตือนไว้ใน HTML ของคุณ:
Example
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
ข้อคิดเห็นยังดีสำหรับการดีบัก HTML เพราะคุณสามารถแสดงความคิดเห็นออกบรรทัด HTML ของโค้ดทีละรายการเพื่อค้นหาข้อผิดพลาด:
Example
<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg"
alt="Mountain">
-->
ข้อคิดเห็นตามเงื่อนไขคุณอาจสะดุดเมื่อมีข้อคิดเห็นตามเงื่อนไขใน HTML:
<!--[if IE 9]>
.... some HTML here ....
<![endif]-->
ความคิดเห็นที่มีเงื่อนไขระบุแท็ก HTML บางอย่างที่จะเรียกใช้โดย Internet Explorer เท่านั้น
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น