ตัวอย่าง HTML

ตัวอย่างตัวองค์ประกอบ HTML ฐาน

แบบเอกสาร HTML ที่เรียบง่าย

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

ประกายที่เรียบง่าย

ตัวอย่างนี้แสดงว่า ข้อความในตัวองค์ประกอบประกายจะถูกแสดงออกโดยบราวเซอร์。

เพิ่มเติมเกี่ยวกับประกาย

ตัวอย่างนี้แสดงบางพฤติกรรมปริยายของตัวองค์ประกอบประกาย。

ปัญหา "ทำนอง"

ตัวอย่างนี้แสดงบางปัญหาเกี่ยวกับการรู้จักฟอร์แมต HTML。

การย่อรวม

ตัวอย่างนี้แสดงวิธีการใช้งานการย่อรวมในเอกสาร HTML。

ข้อความหัวใจ

ตัวอย่างแสดงแท็กของข้อความหัวใจในเอกสาร HTML

ข้อความที่จัดตั้งให้ศูนย์

ตัวอย่างของข้อความที่จัดตั้งให้ศูนย์

เส้นน้ำตาล

ตัวอย่างการใส่เส้นน้ำตาลนอกเนื้อหา

หมายเหตุซ่อน

ตัวอย่างการใส่หมายเหตุซ่อนในโค้ด HTML

สีพื้นหลัง

ตัวอย่างการเพิ่มสีพื้นหลังให้กับหน้า HTML

การอธิบายตัวอย่าง

ตัวอย่างจัดรูปแบบข้อความ HTML

จัดรูปแบบข้อความ

ตัวอย่างการจัดรูปแบบข้อความในไฟล์ HTML

ข้อความที่เปิดรูปแบบ

ตัวอย่างการควบคุมช่องว่างและช่องว่างในข้อความด้วยแท็ก pre

แท็ก "คอมพิวเตอร์ออกที่อยู่"

ตัวอย่างการแสดงตัวอย่างของแท็ก "คอมพิวเตอร์ออกที่อยู่"

ที่อยู่

ตัวอย่างการเขียนที่อยู่ในไฟล์ HTML

คำย่อและชื่อย่อ

ตัวอย่างการทำคำย่อหรือชื่อย่อ

ทิศทางข้อความ

ตัวอย่างการเปลี่ยนทิศทางของข้อความ

ออกอากาศบล็อค

ตัวอย่างการทำข้อความออกอากาศที่มีความยาวต่างกัน

ข้อความที่ถูกลบและข้อความที่ถูกใส่

ตัวอย่างการทำตารางแสดงข้อความที่ถูกลบและข้อความที่ถูกใส่

การอธิบายตัวอย่าง

ตัวอย่าง HTML ลิงก์

สร้างลิงก์แฮม

ตัวอย่างวิธีการสร้างลิงก์ในเอกสาร HTML

ใช้ภาพเป็นลิงก์

ตัวอย่างวิธีการใช้ภาพเป็นลิงก์

เปิดลิงก์ในหน้าต่างเบราวเซอร์ใหม่

ตัวอย่างวิธีการเปิดหน้าในหน้าต่างนอกโดยไม่ต้องออกจากเว็บไซต์ของคุณ

ลิงก์ไปยังส่วนอื่นของหน้าเดียวกัน

ตัวอย่างวิธีการลิงก์ไปยังส่วนอื่นของเอกสาร

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

ตัวอย่างวิธีการออกจากโครงสร้างหากหน้าของคุณถูกจัดวางในโครงสร้าง

สร้างลิงก์อีเมล

ตัวอย่างวิธีการลิงก์ไปยังอีเมล จะทำงานได้เมื่อได้ติดตั้งโปรแกรมรับอีเมล

สร้างลิงก์อีเมล 2

ตัวอย่างการสร้างลิงก์อีเมลที่ซับซ้อนขึ้น

การอธิบายตัวอย่าง

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

โครงสร้างระดับตั้ง

ตัวอย่างนี้แสดงวิธีการสร้างโครงสร้างระดับตั้งโดยใช้เอกสารที่แตกต่างกันสามชิ้น

โครงสร้างระดับนอก

ตัวอย่างนี้แสดงวิธีการสร้างโครงสร้างระดับนอกโดยใช้เอกสารที่แตกต่างกันสามชิ้น

วิธีการใช้แท็ก <noframes>

ตัวอย่างนี้แสดงวิธีการใช้แท็ก <noframes>

โครงสร้างที่สอบไคร้

ตัวอย่างนี้แสดงวิธีการสร้างโครงสร้างที่มีสองเอกสารและใช้สอบไคร้วิธีในแถวและคอลัมน์

โครงสร้างโครงสร้างที่มีคุณสมบัติ noresize="noresize"

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

โครงสร้างแนวทางการนำทาง

ตัวอย่างนี้แสดงวิธีการสร้างโครงสร้างแนวทางการนำทาง。โครงสร้างแนวทางการนำทางประกอบด้วยรายการลิงก์ที่มีเป้าหมายเป็นโครงสร้างที่สอง。ไฟล์ที่มีชื่อ "contents.htm" มีลิงก์สามรายการ。

framework ภายใน

แสดงวิธีการสร้าง framework ภายใน (inline framework) ในหน้า HTML

เลื่อนไปยังหมวดหมู่ที่กำหนดด้วย framework ภายในไฟล์

เลื่อนไปยังหมวดหมู่ที่กำหนดด้วย framework ภายในไฟล์

เลื่อนไปยังหมวดหมู่ที่กำหนดด้วย framework

ตัวอย่างนี้แสดงวิธีการใช้ framework สองแบบ ซึ่งฝั่งซ้ายเป็น framework นำทางที่มีรายการลิงก์ และลิงก์นี้จะนำไปยัง framework ที่สอง ซึ่งแสดงเอกสารที่ถูกลิงก์

การอธิบายตัวอย่าง

ตัวอย่างของตาราง HTML

ตาราง

ตัวอย่างนี้แสดงวิธีการสร้างตารางในเอกสาร HTML

เส้นขอบตาราง

แสดงวิธีการใช้เส้นขอบตารางต่างๆ

ตารางที่ไม่มีเส้นขอบ

ตารางที่ไม่มีเส้นขอบ

หัวข้อของตาราง (Heading)

แสดงวิธีการแสดงหัวข้อของตาราง

เซลล์ว่าง

แสดงวิธีการจัดการเซลล์ที่ไม่มีเนื้อหาด้วย " "

ตารางที่มีข้อความหัว

ตารางที่มีข้อความหัว

เซลล์ที่ข้างหลังหรือข้างขนาน

แสดงวิธีการกำหนดเซลล์ที่ข้างหลังหรือข้างขนาน

แท็กซ์ในตาราง

แสดงองค์ประกอบภายในตาราง

ช่องว่างระหว่างเซลล์ (Cell padding)

เพิ่มช่องว่างระหว่างเนื้อหาเซลล์และเส้นขอบด้วยคุณสมบัติ Cell padding

ระยะห่างระหว่างเซลล์ (Cell spacing)

เพิ่มระยะห่างระหว่างเซลล์ด้วยคุณสมบัติ Cell spacing

เพิ่มสีหลังหรือรูปภาพสีหลังในตาราง

เพิ่มสีหลังหรือรูปภาพสีหลังในตาราง

เพิ่มสีหลังหรือรูปภาพสีหลังในตาราง

เพิ่มสีหลังหรือรูปภาพสีหลังในแถวของตาราง

จัดลำดับเนื้อหาในแถวของตาราง

ตัวอย่างนี้แสดงวิธีการจัดลำดับเนื้อหาในแถวของตารางเพื่อที่จะสร้างตารางที่มีสวยงาม

คุณสมบัติ framework (frame)

ตัวอย่างนี้แสดงวิธีการใช้คุณสมบัติ "frame" ในการควบคุมเส้นขอบรอบตาราง

การอธิบายตัวอย่าง

ตัวอย่างของรายการ HTML

รายการไม่มีลำดับ

ตัวอย่างนี้แสดงรายการไม่มีลำดับ

รายการลำดับ

ตัวอย่างนี้แสดงรายการลำดับ

รายการไม่มีลำดับที่มีรูปแบบต่างๆ

ตัวอย่างนี้แสดงรายการไม่มีลำดับ

รายการลำดับที่มีรูปแบบต่างๆ

ตัวอย่างนี้แสดงรายการลำดับที่มีรูปแบบต่างๆ

รายการนิยาม

ตัวอย่างนี้แสดงวิธีการเข้ารหัสรายการนิยาม

รายการนิยาม 2

ตัวอย่างนี้แสดงรายการนิยามที่มีความซับซ้อน

รายการนิยาม

ตัวอย่างนี้แสดงวิธีการใช้งานรายการนิยาม

การอธิบายตัวอย่าง

HTML ฟอร์มและตัวอย่างของอินพุท

โดเมนต์ข้อความ(Text fields)

ตัวอย่างแสดงว่าจะสร้างโดเมนต์ข้อความในหน้าเว็บ HTML ผู้ใช้สามารถเขียนข้อความในโดเมนต์ต่างๆ

ช่องใส่รหัสผ่าน

ตัวอย่างแสดงว่าจะสร้างช่องใส่รหัสผ่านใน HTML

ตัวกรองตัวเลือก

ตัวอย่างแสดงว่าจะสร้างตัวกรองตัวเลือกใน HTML หรือหน้าเว็บ ผู้ใช้สามารถเลือกหรือปิดเลือกตัวกรองนี้

ปุ่มเลือกเดียวกัน

ตัวอย่างแสดงว่าจะสร้างปุ่มเลือกเดียวกันใน HTML

ตัวกรองลงทะเบียนเรียบเรียงเรียบร้อย

ตัวอย่างแสดงว่าจะสร้างตัวกรองลงทะเบียนเรียบเรียงเรียบร้อยในหน้าเว็บ HTML

รายการลงทะเบียนอื่น

ตัวอย่างแสดงว่าจะสร้างรายการลงทะเบียนที่มีค่าเลือกเก่า

โดเมนต์ข้อความ(Textarea)

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

สร้างปุ่ม

ตัวอย่างแสดงว่าจะสร้างปุ่ม คุณสามารถปรับข้อความบนปุ่มได้

Fieldset around data

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

ตัวอย่างฟอร์ม

ฟอร์มที่มีช่องว่างและปุ่มยืนยัน

ตัวอย่างแสดงว่าจะเพิ่มฟอร์มในหน้าเว็บ ฟอร์มนี้มีช่องว่างใส่ข้อมูลสองช่องและปุ่มยืนยัน

ฟอร์มที่มีตัวเลือกหลายกัน

ฟอร์มที่มีตัวเลือกหลายกันสองตัวและปุ่มยืนยัน

ฟอร์มที่มีปุ่มเลือกเดียวกัน

ฟอร์มนี้มีตัวเลือกเดียวกันสองตัวและปุ่มยืนยัน

ส่งอีเมลทางฟอร์ม

ตัวอย่างแสดงว่าจะส่งอีเมลโดยส่งทางฟอร์ม

การอธิบายตัวอย่าง

ตัวอย่าง HTML ภาพ

ใส่ภาพ

ตัวอย่างแสดงว่าจะแสดงภาพในเว็บ

ใส่ภาพจากที่สำคัญ

ตัวอย่างแสดงว่าจะแสดงภาพที่อยู่ในไฟล์แหล่งอื่น หรือเซิร์ฟเวอร์อื่นในเว็บ

ภาพหลังพื้น

ตัวอย่างแสดงว่าจะเพิ่มภาพหลังพื้นในหน้าเว็บ

จัดการภาพ

ตัวอย่างแสดงว่าจะจัดการภาพในข้อความ

หล่อภาพ

ตัวอย่างแสดงว่าจะหล่อนภาพไปที่ด้านซ้ายหรือขวาของ段落

ปรับขนาดภาพ

ตัวอย่างแสดงว่าจะปรับขนาดภาพ

แสดงข้อความทดแทนให้กับภาพ

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

สร้างลิงก์ภาพ

ตัวอย่างแสดงว่าจะใช้ภาพเป็นลิงก์

สร้างแผนที่แบบภาพ

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

แปลงภาพเป็นแผนที่แบบภาพ

ตัวอย่างแสดงว่าจะแปลงภาพที่ปกติเป็นแผนที่แบบภาพ

การอธิบายตัวอย่าง

ตัวอย่าง HTML สีหลัง

สีหลังและสีที่ปรับเปรองกันดี

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

เอาสีหลังและสีประกอบกันไม่ดี

ตัวอย่างที่มีสีหลังและสีข้อความที่ผสมงามไม่ดี ทำให้ข้อความในหน้าเว็บยากต่อการอ่าน

รูปภาพที่ง่ายต่อการอ่าน

ตัวอย่างที่สามารถอ่านข้อความในรูปแบบที่มีรูปภาพและสีของข้อความที่ง่ายต่อการอ่าน

รูปภาพที่ง่ายต่อการอ่าน 2

ตัวอย่างที่สามารถอ่านข้อความในรูปแบบที่มีรูปภาพและสีของข้อความที่ง่ายต่อการอ่าน

รูปภาพที่มีความชอบงามต่อการอ่าน

ตัวอย่างที่สามารถอ่านข้อความในรูปแบบที่มีรูปภาพที่มีความชอบงามต่อการอ่าน

การอธิบายตัวอย่าง

ตัวอย่าง HTML สไตล์ (style)

สไตล์ใน HTML

ตัวอย่างแสดงวิธีการใช้ข้อมูลสไตล์ที่เพิ่มเข้าสู่ส่วน head เพื่อจัดรูปแบบ HTML

ลิงก์ที่ไม่มีขีดขวาง

ตัวอย่างแสดงวิธีการใช้ตาก property สไตล์เพื่อทำลิงก์ที่ไม่มีขีดขวาง

ลิงก์ไปยังไฟล์สไตล์นอก

ตัวอย่างแสดงวิธีการใช้ตาก link ลิงก์ไปยังไฟล์สไตล์นอก

การอธิบายตัวอย่าง

ตัวอย่าง HTML หัวข้อ (head)

หัวข้อของเอกสาร

ข้อมูลหัวข้อภายในตากหัวข้อจะไม่แสดงที่หน้าตรงในหน้าตูดนอก

target ทุกลิงก์

ตัวอย่างแสดงวิธีการใช้ตาก base ให้ทุกตากในหน้าแนวใหม่

การอธิบายตัวอย่าง

ตัวอย่าง HTML ข้อมูลหลัก (meta)

การบรรยายเอกสาร

ข้อมูลในแอลบั้ม Meta สามารถบรรยายเอกสาร HTML

วลีกุญาณของเอกสาร

ข้อมูลในแอลบั้ม Meta สามารถบรรยายวลีกุญาณของเอกสาร

การกระโดด

ตัวอย่างนี้แสดงว่าในกรณีที่ที่อยู่ของทางลิงก์เปลี่ยนแปลงแล้ว ให้ผู้ใช้กระโดดไปยังที่อยู่อื่น

การอธิบายตัวอย่าง

ตัวอย่าง HTML สคริปต์ (Script)

แทรกสคริปต์เข้าสู่

ตัวอย่างแสดงวิธีการแทรกสคริปต์เข้าสู่เอกสาร HTML

ปฏิบัติการในเว็บบราวเซอร์ที่ไม่สนับสนุนสคริปต์

ตัวอย่างนี้แสดงว่าวิธีดำเนินการกับเว็บบราวเซอร์ที่ไม่สนับสนุนสคริปต์

การอธิบายตัวอย่าง