ตัวอย่าง HTML

ตัวอย่างแบบของแบบแฟรมวาร์ค HTML

ไฟล์ HTML ที่เรียบง่าย

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

ปริยายที่เรียบง่าย

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

เพิ่มเติมปริยาย

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

ปัญหา“ความรู้”

นิยายนี้แสดงปัญหาบางอย่างของการรู้เคยแบบ HTML。

การเรียงบรรทัด

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

หัวหน้า

ตัวอย่างการแสดงตารางหัวหน้าในบันทึก HTML

หัวหน้าที่ตั้งกลาง

ตัวอย่างการจัดวางหัวหน้าที่ตั้งกลาง

รูปแบบทางน้ำ

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

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

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

สีพื้นหลัง

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

ชี้แจงตัวอย่าง

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

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

ตัวอย่างการรูปแบบข้อความในบันทึก HTML

ข้อความที่แบ่งชุด

ตัวอย่างการควบคุมช่องว่างและอย่างที่ใช้ตัวอักษรหลักที่ใช้ตัวอักษร pre

แบบภาพ "คอมพิวเตอร์ออกแบบ"

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

ที่อยู่

ตัวอย่างการเขียนที่อยู่ในบันทึก HTML

คำสั้นๆ และอักษรย่อ

ตัวอย่างการสร้างคำสั้นๆ หรืออักษรย่อ

แนวของข้อความ

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

คำอ้างอิง

ตัวอย่างการสร้างคำสั้นๆ หรืออักษรย่อ

สีของตัวอักษรที่ลดลงและตัวอักษรที่ถูกบันทึก

ตัวอย่างการทำตัวอักษรด้วยสีที่ลดลงและตัวอักษรที่ถูกบันทึก

ชี้แจงตัวอย่าง

ตัวอย่างตัวอักษรที่ใช้ลิงก์เสริม HTML

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

สร้างลิงก์เสริมในบันทึก HTML

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

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

เปิดลิงก์ด้วยบราวเซอร์ตัวเดียว

ข้ามไปยังหน้าอื่นด้วยบราวเซอร์ตัวเดียว ให้ผู้เข้าชมไม่จำเป็นต้องออกจากเว็บไซต์ของคุณ

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

ตัวอย่างการใช้ลิงก์เพื่อข้ามไปยังส่วนอื่นของบันทึก

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

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

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

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

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

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

ชี้แจงตัวอย่าง

ตัวอย่างตัวอักษรที่ใช้โครงสร้างทางฮ์ท็อป

โครงสร้างตรงตั้ง

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

โครงสร้างตรงนอก

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

วิธีการใช้สัญญาณ <noframes>

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

โครงสร้างแบบมิกซ์

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

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

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

โครงสร้างเน้นแนวทาง

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

framework ภายใน

ตัวอย่างนี้แสดงวิธีการสร้าง framework ภายใน (inline framework) ของเว็บเพจ HTML

กระโดดไปยังเส้นทางที่กำหนดในเส้นทางของ framework

ตัวอย่างนี้แสดงการใช้งาน framework สองตัว ซึ่งหนึ่ง framework มีลิงก์ที่นำไปยังเส้นทางที่กำหนดในเอกสารอื่น

กระโดดไปยังเส้นทางที่กำหนดใน framework

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

ชี้แจงตัวอย่าง

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

ตาราง

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

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

ตัวอย่างนี้แสดงรูปแบบเส้นขอบตารางต่างๆ

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

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

หัวตารางในตาราง

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

หน่วยข้อมูลตารางว่าง

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

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

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

หน่วยข้อมูลตารางที่ข้างหลังหรือข้างไปข้างหน้า

ตัวอย่างนี้แสดงวิธีการกำหนดหน่วยข้อมูลตารางที่ข้างหลังหรือข้างไปข้างหน้า

แท็กในตาราง

แสดงองค์ประกอบในช่องว่างขององค์ประกอบต่างๆ

ช่องว่างระหว่างหน่วยข้อมูลตาราง (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

ลิงก์ที่ไม่มีขีดใต้

ตัวอย่างแสดงว่าจะใช้คุณสมบัติ style ทำให้ลิงก์ไม่มีขีดใต้

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

ตัวอย่างนี้แสดงว่าจะใช้แอลบั้ม link ลิงก์ไปยังสไตล์ภายนอก

ชี้แจงตัวอย่าง

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

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

ข้อมูลของหัวข้อภายในแอลบั้ม head จะไม่แสดงในหน้าต่างเบราเซอร์

หน้าต่างที่มี target ทุกลิงก์

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

ชี้แจงตัวอย่าง

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

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

ข้อมูลของแอลบั้ม Meta สามารถบรรยายว่าด้วยเอกสาร HTML

คำสำคัญของเอกสาร

ข้อมูลของแอลบั้ม Meta สามารถบรรยายว่าด้วยคำสำคัญของเอกสาร

การกลับที่

ตัวอย่างนี้แสดงว่าเมื่อที่ด้วย URL ได้เปลี่ยนแปลงแล้ว จะนำผู้ใช้ไปยังที่อยู่อื่น

ชี้แจงตัวอย่าง

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

ใส่สคริปต์หนึ่งบท

ตัวอย่างแสดงว่าจะใส่สคริปต์เข้าไปในเอกสาร HTML

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

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

ชี้แจงตัวอย่าง