สอนทำเว็บ ด้วย HTML

บทนำ
ความหมายของ htm
โครงสร้างเอกสาร htm
เริ่มสร้างเว็บเพจ
สีสันและข้อความ
สีของพื้นหลังของตัวอักษร
สีของตัวอักษรทั้งเอกสาร
ข้อความลักษณะหัวเรื่อง
การตกแต่งข้อความ
ตัวอักษรให้มีความหนา
ตัวอักษรให้ขีดเส้นใต้
ตัวอักษรให้มีการเอน
ตัวอักษรกระพริบ
รูปแบบของตัวอักษร
สีของตัวอักษร
ขนาดของตัวอักษร
ลดขนาดตัวอักษรลง 1 ระดับ
เพิ่มขนาดของตัวอักษร 1 ระดับ
ตัวอักษรยกระดับ
ตัวอักษรพ่วงท้าย (ตัวห้อย)
ตัวอักษรเคลื่อนที่
การแสดงผล
ขึ้นบรรทัดใหม่
การย่อหน้าใหม่
จัดตำแหน่งการแสดงผล
แสดงข้อความ ตามที่จัดรูปแบบไว้ในไฟล์ต้นฉบับ
ข้อความระบุสถานที่ติดต่อโดยเฉพาะ
คำสั่งกั้นระยะซ้าย/ขวา (ย่อหน้า)
เส้นคั่นทางแนวนอน
เว้นวรรค
< SPAN > และ < DIV >
แท็ก < INS > และ < DEL >
รูปภาพและเสียง
ภาพที่เหมาะสมกับการใช้งาน
นำเสนอไฟล์รูปภาพ
นำรูปภาพมาเป็นพื้นหลัง
ไฟล์วิดีโอ
ไฟล์เสียง
ภาพกับการรอคอย
การเชื่อมโยง
การเชื่องโยง (ลิงค์)
เชื่อมโยงข้อมูลต่างแฟ้มเอกสาร
เชื่อมโยงข้อมูลภายในแฟ้มเอกสาร
เชื่อมโยงนอกเว็บไซต์
เชื่อมโยงแบบอีเมล์
เชื่อมโยงแบบ Download
เชื่อมโยงไฟล์ด้วยรูปภาพ
รายการ
การแสดงผลแบบรายการ
รายการแบบมีหมายเลขกำกับ
รายการแบบมีสัญลักษณ์กำกับ
รายการแบบใช้นิยาม
รายการแบบใช้รูปภาพกำกับ
แท็ก < MENU > และ < DIR >

ตาราง
การสร้างตาราง
เส้นของตาราง
ความกว้าง/ความสูงของตาราง
ระยะเว้นขอบภายในเซลล์ข้อมูล
ฟอร์ม
ฟอร์ม
ป้อนข้อความแบบหลายบรรทัด
ตัวเลือก
กรอบป้อนข้อมูลแบบ Text box
การแสดงผลแบบ Password
การแสดงผลแบบ Checkbox
การแสดงผลแบบ Radio
การส่งแบบฟอร์มแบบ Submit
การส่งแบบฟอร์มแบบ Reset
กลุ่มฟิลด์ป้อนข้อมูล
เฟรม
การแบ่งพื้นที่ของจอภาพ
การแบ่งพื้นที่ตามแนวนอน
การกำหนดเส้นแบ่งเฟรม
แสดงผลแถบสกอลบาร์
ปรับขนาดของเฟรม
เฟรมแบบ Inline
การกำหนดระบุวินโดว์ส์
Tips
การใส่ไฟล์ avi
ติดอันดับการสืบค้น
สีพื้นเอกสารเว็บ กับภาพแบ็คกราวน์
ย้าย Server
สร้าง Tooltips
สร้างเว็บแบบนำเสนออัตโนมัติ
สร้างปุ่มได้ง่ายๆ ด้วย Button Tag
สร้าง Effect ให้กับ Button Tag
Effect ตอนเปลี่ยนหน้าเว็บ
ใส่ไอคอนให้กับเว็บไซต์
ข้อความอธิบายรูปภาพ
คลิกโดยไม่ต้องใช้แท็ก <A>
เปลี่ยนรูปร่างของ Cursor
ตรวจสอบค่ารหัสสีฐาน 16
Effect หิมะตก
Effect น้ำกระเพื่อม
รหัสของ chmod


Web Design by HTML

การเชื่องโยง (ลิงค์)

เป็นที่ทราบกันดีอยู่แล้วว่าการที่อินเทอร์เน็ตได้รับความนิยมอย่างกว้างขวางอยู่ทั่วโลกนั่น เป็นผลมาจากความสามรถในการเชื่อมโยงข้อมูล (Links) จากข้อมูลหนึ่งไปยังอีกข้อมูลหนึ่งได้อย่างรวดเร็ว โดยสามารถเชื่อมโยงข้อความได้ทั้งจากภายในแฟ้มเอกสารข้อมูลของตัวเอง และแฟ้มเอกสารข้อมูลภายนอกที่อยู่ต่างเว็บไซต์กัน

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

ประเภทของการเชื่อมโยง

HTML แบ่งการเชื่อมโยงออกเป็น 2 ประเภท ดังนี้

  • การเชื่อมโยงภายในเว็บไซต์
  • การเชื่อมโยงนอกเว็บไซต์

การเชื่อมโยงทั้ง 2 ประเภทนี้ ยังแบ่งออกได้เป็นอีก 2 ชนิด คือ การเชื่อมโยงข้อมูลภายในแฟ้มเอกสาร และการเชื่อมโยงข้อมูลต่างแฟ้มเอกสาร

Web Design by HTML

การเชื่อมโยงข้อมูลแฟ้มเอกสารต่างแฟ้มเอกสาร
<a href="ไฟล์ที่จะทำการเชื่อมโยงที่มีนามสกุล .html หรือ .htm">ข้อความ</a>

Web Design by HTML

การเชื่อมโยงข้อมูลภายในแฟ้มเอกสาร

<a href="#ทำการตั้งชื่อตามความต้องการ">ข้อความ</a>

<a name="ชื่อที่ตั้งไว้เพื่อที่จะทำการเชื่อมโยงมาหา">ข้อความ</a>


Web Design by HTML

การเชื่อมโยงนอกเว็บไซต์
<a href="http://URLที่ต้องการจะเชื่อมโยงไป">ข้อความ</a>

Web Design by HTML

การเชื่อมโยงแบบอีเมล์

ในการสร้างเว็บเพจ ถ้าเราต้องการให้ผู้เยี่ยมชมสามารถติดต่กับผู้สร้างเว็บเพจโดยที่ผู้ชมเว็บเพจไม่รู้จะติดต่อได้อย่างไร เราก็สามารถให้ผู้เยี่ยมชมสามารถติดต่อกับเราได้โดยการส่งอีเมล์

<a href="mailto:ชื่อ E-mail address ของผู้ที่จะให้ส่ง E-mail กลับคืนมา">ข้อความ</a>

Web Design by HTML

การเชื่อมโยงแบบ Download

ในเว็บเพจในปัจจุบันนี้มักจะนิยมนำเอาข้อมูลต่าง ๆ ลงสู่เว็บเพจ เพื่อจะทำให้เนื้อหาของเว็บเพจนั้นมีประโยชน์แก่ผู้เข้าเยี่ยมชม จึงทำให้มีการนำข้อมูลต่างที่จะทำการเผยแพร่ ไม่ว่าจะเป็น ข้อมูลที่เป็นไฟล์ Word ไฟล์ Power Point และไฟล์อื่นๆ อีกมากมาย ในการที่จะนำไฟล์ต่างๆ นี้ลงสู่เว็บเพจนั้นเราจะต้องทำการ zip ไฟล์ข้อมูลนั้น เพื่อเป็นการง่ายต่อการจะนำไฟล์ไปใช้โดยการ Download ไฟล์นั้น

<a href="ไฟล์พร้อมระบุนามสกุล">ข้อความ</a>

Web Design by HTML

การเชื่อมโยงไฟล์ด้วยรูปภาพ

ในการเชื่อมโยงข้อมูลโดยใช้ตัวอักษรนั้น อาจจะทำให้เว็บเพจของเรานั้นไม่น่าสนใจ เราสามารถใช้รูปภาพมาทดแทนการเชื่อมโยงข้อมูลด้วยตัวอักษร

<a href="ไฟล์ที่มีนามสกุล .html"><img src="ชื่อไฟล์รูปภาพ .gif หรือ .jpg" alt="การเชื่อมโยงโดยรูปภาพ"></a>