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

การแสดงไฟล์ avi ในเอกสารเว็บจะต้องใช้แท็ก <EMBED>..</EMBED> โดยจะทำกาผนึกไฟล์ avi เข้ากับเอกสารเว็บ แล้วแสดงผลผ่านเบราเซอร์ อย่างไรก็ตามเบราเซอร์นั้นจะต้องทำการติดตั้งโปรแกรม Plug-in เรียบร้อยแล้ว

รูปแบบคำสั่ง <EMBED>..</EMBED>

AutoStart ควบคุมให้แสดงผลทันที หรือให้รอการคลิกเลือก
Loop ควบคุมให้วนรอบเมื่อจบหรือไม่

ตัวอย่างการแสดงผลไฟล์ AVI

ติดอันดับการสืบค้น

หากคุณต้องการทำให้เว็บของคุณ อยู่ในกลุ่มของการค้นหาข้อมูลจากผู้ให้บริการสืบค้นข้อมูลอัตโนมัติ (Search Engine) อย่าลืมกำหนด Title ของเอกสารเว็บนั้นๆ โดยควรเป็นข้อความภาษาอังกฤษ มีความหมายกระซับถึงเรื่องที่นำเสนอ แต่มีความยาวไม่เกิน 64 ตัวอักษร (ปัจจุบันสามารถใช้ภาษาไทยได้ แต่แนะนำให้ใช้ร่วมกัน หรือผสมกัน) ซึ่งข้อความในส่วนนี้จะปรากฏในส่วนบนสุดของหน้าต่างเบราเซอร์ (Title Bar)

<HEAD>
<TITLE>Introduction to HTML</TITLE>
</HEAD>

นอกจากนี้ สามารถกำหนดค่าเพิ่มเติมเกี่ยวกับคำสำคัญ หรือ Keyword ของเอกสารเว็บ เพื่อช่วยให้การสืบค้นได้ผลดีขึ้น อาศัยแท็กคำสั่ง <META NAME="Keywords" CONTENT="คำที่ 1, คำที่ 2, …"> ซึ่งกำหนดแท็กนี้ในส่วน Head Section ของเอกสารเว็บ

<HEAD>
<TITLE>Introduction to HTML</TITLE>
<META NAME="Keywords" CONTENT="Introduction, HTML, HyperText Markup Language">
</HEAD>

ตัวอย่างการลงรหัสเพื่อกำหนด TITLE และ META Tag

ทั้งนี้ยังมีแท็ก Meta อีก 2 รูปแบบที่ควรนำมาประกอบด้วย คือ

<META NAME="Description" CONTENT="ข้อความอธิบายเว็บไซต์"> และ
<META NAME="Robots" CONTENT="all/none/index/noindex/follow/nofollow">

โดย Description จะเป็นการใส่คำอธิบายให้กับเว็บไซต์ และ Robots เป็นการบอกให้กับ Spider หรือ Robot (โปรแกรมของ Search Engine ที่ทำหน้าที่ค้นหาข้อมูลของเว็บไซต์ต่างๆ) ว่าควรจัดการหน้าเว็บต่างๆ ในเว็บไซต์อย่างไร เช่น ถ้าต้องการให้เก็บข้อมูลทุกหน้า ก็กำหนด Contect="All" หรือไม่ต้องการให้เก็บข้อมูลหน้าใด ก็กำหนด Contect="noindex" หรือให้เก็บเฉพาะหน้าที่ระบุ ไม่ต้องเก็บหน้าอื่นๆ ก็ใช้ Contect="NoFollow" เป็นต้น อย่างไรก็ตามแท็กชุดนี้ไม่ใช่แท็กมาตรฐาน ดังนั้นผู้พัฒนาเว็บ ควรให้ความสำคัญของ Title มากที่สุด

<HEAD>
    <TITLE>Introduction to HTML</TITLE>
    <META NAME="Keywords" CONTENT="Introduction, HTML, HyperText Markup Language">
    <META NAME="Description" CONTENT="Introduction to HTML and Web Design for All">
    <META NAME="Robots" CONTENT="All">
</HEAD>

นอกจากแท็กที่ได้แนะนำ ก็กำหนดข้อความอธิบายรูปภาพด้วย Attribute ALT ของแท็ก IMG ก็เป็นจุดที่น่าสนใจ โดย Spider บาง Search Engine จะสนใจคำอธิบายชุดนี้ด้วยเช่นกัน อย่างไรก็ตามคำอธิบายชุดนี้ก็มีประโยชน์มากสำหรับคนพิการทางสายตา เพราะสามารถรู้ความหมายของรูปภาพที่มองไม่เห็นได้จากคำอธิบาย ที่อ่านด้วยเบราเซอร์เฉพาะของคนพิการทางตา ดังนั้นผู้พัฒนา ควรให้ความสำคัญของการใส่คำอธิบายรูปภาพกับรูปภาพทุกภาพด้วย

<IMG SRC="test.jpg" ALT"ทดสอบการใส่คำอธิบาย">

สีพื้นเอกสารเว็บ กับภาพแบ็คกราวน์

คงมีหลายท่าน มีปัญหากับการเลือกสี หรือผสมสี เพื่อให้ดูกลมกลืนกับภาพที่นำมาใช้เป็นแบ็คกราวน์ (Background) ต่อไปนี้ไม่ใช่เรื่องยากอีกแล้ว

เริ่มจากเรียกโปรแกรม Adobe Photoshop อันเป็นโปรแกรมตกแต่งกราฟิกยอดฮิตติดอันดับ
จากนั้นเปิดไฟล์ภาพที่จะนำมาใช้เป็นแบ็คกราวน์ของเอกสารเว็บ
เลือกเครื่องมือ Eyedropper Tool
บัตรรายการ Info... ใช้คำสั่ง Window, Show Info…
นำเมาส์ซึ่งมีรูปร่างเป็นหลอดดูดสี ไปชี้ยังพื้นที่ที่จะตรวจสอบค่าสี สังเกตในบัตรรายการ Info…
จะปรากฏค่าตัวเลขต่างๆ โดยมีจุดที่ต้องสนใจ คือ ค่าตัวเลขที่ปรากฏจากรายการ R: , G: และ B: เท่านั้น อันได้แค่ ค่าสีของสีแดง (Red) สีเขียว (Green) และสีน้ำเงิน (Blue) บันทึกค่าไว้เพื่อนำไปคำนวณ
เมื่อบันทึกค่าจากรายการ R: , G: และ B: แล้ว
ให้เปิดโปรแกรมเครื่องคิดเลข (Start, Program, Accessories, Calculator)
กำหนดให้เครื่องคิดเลขแสดงผลแบบวิทยาศาสตร์ (Scientific) ด้วยคำสั่ง View, Scientific
จากนั้นตรวจสอบโหมดการคำนวณ ต้องเป็นโหมด Dec คือการคำนวณค่าเลขฐาน 10
ป้อนค่า R: จากนั้นคลิกที่ปุ่มเปลี่ยนโหมดการคำนวณเป็นโหมดเลขฐาน 16 คือ ปุ่ม Hex บันทึกค่าที่ได้
จากนั้นคลิกปุ่ม Dec เพื่อกลับมาสู่โหมดเลขฐาน 10 ป้อนค่า G: เสร็จแล้วคลิกปุ่ม Hex เพื่อหาค่าเลขฐาน 16 ของค่า G: ที่ป้อน จดบันทึกค่าที่ได้
สำหรับค่า B: ก็ใช้วิธีเดียวกัน

ตัวอย่าง ถ้าได้ค่า R: เป็น 101 ค่า G: เป็น 77 ค่า B: เป็น 255 จะแปลงเป็นเลขฐาน 16 คือ 65, 4D, FF ตามลำดับ ดังนั้นค่าสีสำหรับใช้กำหนดเป็นสีพื้นของเอกสารเว็บ (Background Color) คือ #654DFF เห็นไหมครับว่าไม่ยากเลย ในการคำนวณหาค่าสีเลขฐาน 16 เพื่อนำมาใช้ในเอกสารเว็บ

ย้าย Server

คงมีหลายๆ คนเจอปัญหาเกี่ยวกับการย้าย Server เช่นเดิมเก็บข้อมูล HTML ไว้ที่ Geocities ต่อมาได้พื้นที่ถาวรของหน่วยงาน จึงย้ายข้อมูลกลับไปยังพื้นที่ใหม่ แต่ปัญหาก็ตามมาคือ หลายๆ คน รู้จัก URL ของ Geocities ไปแล้ว หากต้องไล่บอก ก็คงเป็นเรื่องลำบาก วิธีที่สะดวกที่สุด คือ ทำ HTML File ใส่ใน Geocities แล้วหน่วงเวลาเพื่อย้ายลิงก์ไปยัง URL ใหม่ โดยอัตโนมัติ ซึ่งใช้แท็กเพียงแท็กเดียว คือ <META HTTP-EQUIV="REFRESH" CONTENT="n; URL=url"> โดยระบุไว้ในส่วน Head Section และระบุค่า n ในรายการ CONTENT เป็นเวลา (หน่วยเป็นวินาที) ค่าในรายการ URL คือ ลิงก์ใหม่ที่จะให้ชี้ไปหา

<HEAD>
     <TITLE>Title</TITLE>
     <META NAME="Keywords" CONTENT="คำที่ 1, คำที่ 2, คำที่ …">
     <META HTTP-EQUIV="REFRESH" CONTENT="ค่าเวลา; URL=url ของลิงก์ใหม่">
</HEAD>

สร้าง Tooltips

หลายๆ คนคงชอบเวลานำเมาส์ไปชี้บนไอคอนของ Windows แล้วปรากฏคำอธิบายในกรอบสีเหลือง ที่เรียกว่า Tooltip เอกสารเว็บก็สามารถทำได้ โดยอาศัย Attribute ชื่อ Title แต่จะแสดงผลได้เฉพาะบน IE4 ขึ้นไปน่ะครับ

การสร้าง Tooltip สำหรับลิงก์แบบข้อความ

<a href="ลิงก์" title="คำอธิบายลิงก์">ข้อความ</a>

การสร้าง Tooltip สำหรับ Text box ในฟอร์ม

การสร้าง Tooltip ให้กับข้อความ

การทำลิงก์ให้กับข้อความ สามารถใช้ Attribute ชื่อ Title ได้เช่นกัน โดยใช้ร่วมกับแท็กควบคุมการแสดงผลทั่วไป เช่น แท็กควบคุมตัวหนา

<b title="คำอธิบายลิงก์">ข้อความ</b>

สร้างเว็บแบบนำเสนออัตโนมัติ (Web Presentation)

อยากให้หน้าเว็บแสดงผลแบบสไลด์อัตโนมัติ ทำได้ไม่ยากเลยครับ ด้วยความสามารถของ Meta Tag ก็สามารถทำได้ ด้วยคำสั่ง

โดยให้เติม Meta Tag ดังกล่าวไว้ใน <Head>...</Head> ของไฟล์เว็บทุกไฟล์ ตามลำดับของการนำเสนอ เช่น มีไฟล์เว็บที่ต้องการนำเสนอ คือ page1.html, page2.html, page3.html โดยกำหนดช่วงเวลาแสดงผล 3 วินาที ดังนั้น

ในไฟล์ page1.html จะต้องระบุคำสั่ง เป็น
<META HTTP-EQUIV="refresh" CONTENT="5;URL=page2.html">
ในไฟล์ page2.html จะต้องระบุคำสั่ง เป็น
<META HTTP-EQUIV="refresh" CONTENT="5;URL=page3.html">
ในไฟล์ page3.html จะต้องระบุคำสั่ง เป็น
<META HTTP-EQUIV="refresh" CONTENT="5;URL=page1.html">

สร้างปุ่มได้ง่ายๆ ด้วย Button Tag

IE4+ ได้เพิ่ม Button Tag สำหรับขยายความสามารถการทำงาน ดังตัวอย่าง

แสดงผลข้อความที่ระบุแบบปุ่มกด

<button>ข้อความ</button>

ตัวอย่าง <button>ปุ่มแบบข้อความ</button>

สามารถควบคุมข้อความในปุ่มด้วยแท็กต่างๆ เช่น

ตัวอย่าง <button><big>ปุ่มแบบข้อความ</big></button>

แสดงผลรูปแบบแบบปุ่มกด

ตัวอย่าง

การเพิ่มฟังก์ชันให้ปุ่ม
- คลิกเพื่อลิงก์
  <button onClick="window.location='http://เว็บไซต์'">ข้อความ</button>
- คลิกเพื่อปิดหน้าต่าง
  <button onClick="window.close()">ข้อความ</button>
- คลิกเพื่อเปิดหน้าต่าง
  <button onClick="window.open('ไฟล์.htm')">ข้อความ</button>
- คลิกเพื่อย้อนกลับ
  <button onClick="history.go(-1)">ข้อความ</button>
- คลิกเพื่อเดินหน้า
  <button onClick="history.go(1)">ข้อความ</button>
- คลิกเพื่อ Reload
  <button onClick="window.location.reload()">ข้อความ</button>

สร้าง Effect ให้กับ Button Tag

เติมสีพื้นให้กับปุ่ม

<button style="background-color:รหัสสี/ชื่อสี">ข้อความ</button>

ตัวอย่าง <button style="background-color:lightgreen">ปุ่มแบบข้อความ</button>

เติมรูปภาพเป็นพื้นของปุ่ม

ตัวอย่าง

เติมสีพื้นให้กับปุ่ม

<button style="background-color:transparent">ข้อความ</button>

ตัวอย่าง

ควบคุมความกว้างและความสูงของปุ่ม

<button style="width:ค่าความกว้าง;height:ค่าความสูง">ข้อความ</button>

ทำ effect ตอนเปลี่ยนหน้า

อยากได้ Effect แปลกคล้ายๆ PowerPoint เวลาเปลี่ยนหน้าเว็บ ไม่ยากเลยครับ ลองใส่ชุดคำสั่งนี้ในส่วน Head Section ดูสิครับ

ค่าตัวเลขของ Duration และ Transition ลองปรับเปลี่ยนเล่นๆ ดูน่ะครับ

สร้างไอคอนให้กับเว็บไซต์

หลายท่านคงเคยเห็นเว็บไซต์บางเว็บไซต์จะมีไอคอนพิเศษเฉพาะของตนเองปรากฏนำหน้า Title และเมื่อมีการ Bookmark ก็จะปรากฏไอคอนนี้ในรายการ Bookmark ด้วย ถ้าท่านต้องการให้เว็บไซต์ของท่านมีไอคอนกำกับ ก็ลองทำตามวิธีต่อไปนี้ดูน่ะครับ

ขั้นตอนที่ 1 เตรียมไอคอน

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

http://virtualgraphicsworld.freeservers.com/icons.htm

หรือจะเลือกการสร้างเองโดยดาวน์โหลดโปรแกรมที่สนใจได้จากเว็บไซต์ http://www.allthesoft.com/desktop/icon-maker/โดยจะต้องสร้างไอคอนขนาด 16 * 16 pixels

จากนั้นคัดลอกไฟล์ไอคอนที่เตรียมไว้ในโฟลเดอร์ของเว็บไซต์ แล้วโอนเข้าสู่เว็บไซต์

ขั้นตอนที่ 2 ลงรหัส HTML

เปิดไฟล์ index.html หรือไฟล์แรกของเว็บไซต์
เข้าสู่โหมด HTML ป้อนคำสั่งใน Head Section ดังนี้

<HEAD>
<LINK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/myicon.ico">
<TITLE>My Title</TITLE>
</HEAD>

แก้ไขรายการส่วนสีแดงให้ตรงกับชื่อไอคอนที่เตรียมไว้ แล้วโอนไฟล์เข้าสู่ Server เพื่อตรวจสอบ

ข้อความอธิบายรูปภาพเมื่อเมาส์อยู่เหนือภาพ

ข้อความอธิบายรูปภาพ เมื่อนำเมาส์ไปชี้เหนือรูปภาพ สามารถกระทำได้โดยเพิ่ม Attribute ชื่อ Title ในแท็ก IMG

ข้อแตกต่างระหว่าง Attribute ALT และ TITLE

ALT จะช่วยแสดงข้อความอธิบายระหว่างดาวน์โหลดภาพ มาแสดงบนเบราเซอร์ และช่วยให้ข้อความสำหรับ Search Engine จึงเหมาะกับการกำกับด้วยข้อความสั้นๆ และมีลักษณะเป็นคีย์เวิร์ด (Keyword)

TITLE เป็น Attribute ที่เพิ่มใน HTML 4.0 สำหรับการอธิบายภาพด้วยข้อความยาวๆ

Internet ตัวอย่างของคำสั่งและการแสดงผล

ลองนำเมาส์เลื่อนชี้ที่ภาพแล้วค้างไว้สักครู่ เพื่อรอดูผลลัพธ์ที่ปรากฏ

คลิกโดยไม่ต้องใช้แท็ก <A>

การทำจุดเชื่อมโดยไม่ต้องใช้แท็กจุดเชื่อม <A>..</A> สามารถกระทำได้โดยใช้ Attribute ชื่อ onClick กับแท็ก <P>...</P> ซึ่งเป็นคำสั่งเพิ่มเติมใน HTML 4.0 โดยมีรูปแบบคำสั่งดังนี้

เปลี่ยนรูปร่างของ Cursor

ลองเลื่อนเมาส์มาชี้ แล้วเปรียบเทียบ 2 ตำแหน่งนี้ดูสิครับ ว่าแตกต่างกันอย่างไร

Hotmail.com

ลิงก์แรกจะแสดง Cursor ด้วยรูปร่างมาตรฐานคือ รูปมือ ในขณะนี้ลิงก์ที่สอง จะแสดงด้วยรูปร่างนาฬิกาทราย

การเปลี่ยนรูปร่างของ Cursor สามารถกระทำได้โดยใช้ Attribute ชื่อ style โดยมีรูปแบบคือ

หรือ

Default
Crosshair
hand
move
text
wait
help

หารหัสสีระบบเลขฐาน 16

แสดงภาพด้วย Effect หิมะ

ถ้าท่านต้องการแสดงภาพ โดยมี "หิมะ" กำลังตก เป็นฉากประกอบ ดังตัวอย่าง

สามารถทำได้ง่ายๆ ครับ

จัดหาภาพที่ต้องการ
ดาวน์โหลด Class ของโปรแกรมควบคุม Effect หิมะ < คลิกเพื่อดาวน์โหลด >
สร้างเอกสาร HTML ด้วยแล้วป้อนคำสั่งดังตัวอย่าง ทั้งนี้ให้เปลี่ยนรายการที่เป็นสีแดงได้ตามต้องการ
<applet code="alcsnow.class" align="baseline" width=320 height=252>
<param name="grph" value="home.jpg">
<param name="snows" value="700">
<param name="threadsleep" value="50">
</applet>

คำอธิบายคำสั่ง

สร้าง Applet สำหรับแสดง Effect หิมะ โดยท่านสามารถกำหนดขนาดของภาพได้จากค่า Width และ Height

ระบุไฟล์ภาพที่ต้องการแสดง

ระบุจำนวนหิมะที่ต้องการให้ตกลงมา

แสดงภาพด้วย Effect น้ำกระเพื่อม

ถ้าท่านต้องการแสดงภาพ โดยมี "ฉากประกอบคล้ายๆ เงาในน้ำ และมีการกระเพื่อม" ดังตัวอย่าง

สามารถทำได้ง่ายๆ ครับ

จัดหาภาพที่ต้องการ
ดาวน์โหลด Class ของโปรแกรมควบคุม Effect น้ำกระเพื่อม < คลิกเพื่อดาวน์โหลด >
สร้างเอกสาร HTML ด้วยแล้วป้อนคำสั่งดังตัวอย่าง ทั้งนี้ให้เปลี่ยนรายการที่เป็นสีแดงได้ตามต้องการ
<applet code="Lake.class" width=320 height=350>
<param name="image" value="home.jpg">
</applet>

คำอธิบายคำสั่ง

สร้าง Applet สำหรับแสดง Effect น้ำกระเพื่อม โดยท่านสามารถกำหนดขนาดของภาพได้จากค่า Width และ Height ทั้งนี้ค่า Height ควรมีค่ามากกว่าความสูงปกติของรูปภาพ เช่นจากตัวอย่างภาพจะมีความสูงประมาณ 254 pixels ก็กำหนดให้เป็น 350 เป็นต้น

ระบุไฟล์ภาพที่ต้องการแสดง

ตรวจสอบค่าคำสั่ง chmod

Mode	User	Group	World
Read
Write
Execute
Permission