การสร้าง HTML นั้นจำเป็นต้องมีรายละเอียดต่างๆ ตามดังนี้
<HTML> เป็น tag สำหรับบอกจุดเริ่มต้นของเอกสาร HTMl ซึ่งจะวางไว้บรรทัดแรก
</HTML> เป็น tag สำหรับบอกจุดจบของเอกสาร HTML ซึ่งจะวางไว้บรรทัดสุดท้ายเสมอ
<HEAD> คือส่วนของหัวเรื่องในเอกสาร ซึ่งจะประกอบด้วย <TITLE>
<TITLE> ข้อความในบรรทัดนี้จะไปปราฏฎที่ Title bar บน Web broser
<BODY> คือส่วนของเนื้อหาในเอกสารไปจบที่ </BODY> ซึ่งจะมีรายละเอียดต่างๆ
แล้วแต่เราจะกำหนดให้ สามารถดู รายละเอียดปลีกย่อยในส่วนของ <BODY> ได้ที่นี่
<H1> คือ Header tag ใช้สำหรับกำหนดขนาดของตัวอักษร ดู ตัวอย่างขนาดของตัวอักษร ได้ที่นี่
ตัวอย่าง
<HTML>
<HEAD>
<TITLE> My First Homepage </TITLE>
<BODY>
<H1> This is my Homepage </H1>
ตรงนี้สามารถเพิ่มเติมได้ โดยดูจาก
รายละเอียดปลีกย่อยของ BODY
</BODY>
</HTML> |
** เอกสารที่เขียนด้วย HTML จะต้องบันทึกเก็บลงไฟล์ที่มีนามสกุลเป็น .html หรือ .htm เสมอ
** tag สามารถเขียนเป็นตัวเล็๋กหรือตัวใหญ่ก็ได้ ในที่นี้ใช้ตัวใหญ่ เพื่อให้ผู้ชมสามารถแยกออก
ระหว่าง tag กับ สิ่งที่ต้องกำหนด
** เมื่อมี tag เริ่มต้นก็จะต้องมี tag จบ เช่น <H1>...</H1> ถ้ามีเฉพาะ tag เริ่มต้นไม่มี tag จบ
เอกสาร HTML จะถือว่าใช้ tag ตลอดเอกสาร
 กำหนด Background ให้เป็นรูปภาพ กำหนด Background ให้เป็นสี
กำหนดสีของจุด Link กำหนดขนาดอักษรด้วย Header Tag
กำหนดขนาด, ชนิด, สี ของ Font ตัวอักษรกระพริบ
แสดงตัวอักษร ลากเส้น
Link ข้อความภายในเอกสาร ใส่ภาพใน HTML
Link ด้วยภาพ Link E-mail
การกำหนด Background ให้แสดงเป็นรูปภาพ ทำได้ดังนี้
<BODY BACKGROUND= "image.gif">
|
"image.gif" ให้ใส่ชื่อรูปภาพที่เราต้องการให้เป็น Background
ต้องเป็นไฟล์นามสกุล .GIF หรือ .JPG
การกำหนด Background ให้เป็นสี ทำได้ดังนี้
<BODY BGCOLOR= "#rrggbb">
|
"#rrggbb" เป็นการกำหนดค่าของสี rr หมายถึงสีแดง, gg หมายถึงสีเขียว,
bb หมายถึงสีฟ้า เป็นเลขฐาน 16
สามารถเข้าไปดูตารางสีได้ที่นี่ Hex Color Code
การกำหนดสีของจุด Link
Hyperlink คือส่วนบริเวณที่เป็นจุดเชื่อมโยงไปยัง Homepage อื่นๆ
<BODY LINK= "#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
|
LINK="#rrggbb" กำหนดสีบริเวณที่เป็นจุด Link
VLINK="#rrggbb" กำหนดสีบริเวณจุด Link ที่เคยเข้าไปมาแล้ว
ALINK="#rrggbb" กำหนดสีขณะที่กำลังคลิ๊กจุด Link
สามารถเข้าไปดูตารางสีได้ที่นี่ Hex Color Code
การกำหนดขนาดของตัวอักษรด้วย Header tag
Header สำหรับกำหนดขนาดของตัวอักษรที่อยู่ใน tab นี้
<H1>...</H1> ขนาดใหญ่สุด
<H6>...</H6> มีขนาดเล็กสุด
ตัวอย่าง
<H1> Heading 1 </H1>
<H6> Heading 6 </H6> |
ผลที่ออกมา --> Heading 1
Heading 6
** บริเวณ ... หมายถึงข้อความที่เราพิมพ์ลงไปให้แสดงออกมา
การกำหนด Font
ความสวยงามของเอกสาร HTML นอกจากขึ้นอยู่กับรูปภาพแล้วยังขึ้นอยู่กับตัวอักษรอีกด้วย
1. กำหนดขนาดของ Font
no คือค่าตัวเลข 1,2... ตัวเลขมากขนาดใหญ่ มีค่าตั้งแต่ 1-7
2. กำหนดสีของตัวอักษร
เช่นเดียวกับการกำหนดสีของ Background
สามารถเข้าไปดูตารางสีได้ที่นี่ Hex Color Code
3. การกำหนดชนิดของ Font
เพื่อให้มีรูปแบบสวยงามยิ่งขึ้น และให้ผู้ที่เข้ามาชมสามารถอ่านได้
ควรกำหนด Font เพื่อให้สามารถอ่านภาษาไทยได้
"type" หมายถึงชนิดของตัวอักษรที่ต้องการให้แสดงออกมา
เช่น Homepage นี้ใช้ชนิด "MS Sans Serif" ก็เป็น
<FONT FACE="MS Sans Serif">
การพิมพ์ตัวอักษรกระพริบ
ข้อความส่วนใดที่ต้องการให้กระพริบเพื่อดึงดูดความสนใจ
<BLINK>....</BLINK>
ตัวอย่าง
การแสดงตัวอักษร
<B>....</B> แสดงตัวอักษรเป็นตัวหนา
ตัวอย่าง Bold
<i>....</i> แสดงตัวอักษรเป็นตัวเอียง
ตัวอย่าง Intalic
<U>....</U> แสดงตัวอักษรเป็นตัวขีดเส้นใต้
ตัวอย่าง Underline
การลากเส้น
ในเอกสารบางส่วน เพื่อความสวยงามจึงต้องมีเส้นแบ่ง เพื่อแบ่งเอกสารเป็นส่วนๆ
ให้ผู้ที่เข้ามาชมเข้าใจได้ง่าย
no คือค่าตัวเลข อาจจคิดเป็น % หรือตัวเลขธรรมดาก็ได้ แต่ขนาดจะไม่เท่ากัน
<SIZE> หมายถึงขนาดของเส้น แล้วแต่จะกำหนดให้มีความหนาเท่าไร
<WIDTH> หมายถึงความยาวของเส้น ถ้าเป็นตัวเลขธรรมดาจะมีหน่วยเป็น pixel
ถ้าเป็น % จะมีขนาดตามความกว้างของหน้าจอ
เป็นส่วนที่ link ไปยังที่ต่างๆ
การลิงค์ข้อความภายในเอกสาร
เป็นการกระโดดข้ามจากข้อความหนึ่งไปยังอีกข้อความหนึ่งภายในเอกสาร
สามารถทำได้ดังนี้
1. กำหนดตำแหน่งเป้าหมายของข้อความ (targets) โดยใช้ <A> tag
เช่น ข้อความเป้าหมายในเอกสารมีดังนี้ การกำหนดขนาดของตัวอักษรด้วย Header tag
เมื่อกำหนด tag เป้าหมายจะได้ดังนี้
<A NAME="header"> การกำหนดขนาดของตัวอักษรด้วย Header tag </A>
ในที่นี่ "header" คือชื่อเป้าหมายที่ใช้อ้างอิงในการลิงค์
2. กำหนดข้อความที่ชี้ไปยังเป้าหมาย
เช่น ข้อความในเอกสารส่วนที่จะใช้สำหรับชี้ไปยังเป้าหมาย คือ ขนาดของตัวอักษร
สามารถำหนด <A> tag ได้ดังนี้ <A HREF="#header"> ขนาดของตัวอักษร </A>
ลองคลิ๊กดู --> ขนาดของตัวอักษร
การใส่ภาพในเอกสาร HTML
เอกสารจะสวยงามขึ้นเมื่อมีรูปภาพประกอบ ซึ่งรูปภาพนั้นจะต้องบันทึกในไฟล์สกุล .GIF
หรือ .JPG หรือ .JPEG การแทรกภาพสามารถทำได้ดังนี้
<IMG SRC="image.gif" ALIGN="position"
WIDTH=no HEIGHT=no BORDER=no> |
"image" หมายถึงชื่อไฟล์รูปภาพ
"position" หมายถึงตำแหน่งที่ต้องการให้รูปแสดง มี Right, Left หรือ Center
<WIDTH> กำหนดความยาวของรูปภาพ
<HEIGHT> กำหนดความกว้างของรูปภาพ
<BORDER> กำหนดความหนาของกรอบของรูปภาพ
ตัวอย่าง <IMG SRC= "ppp-icon.gif" ALIGN="Center"> 
การ Link ด้วยภาพ
นอกจากจะใช้รูปภาพประกอบเอกสารแล้ว ยังสามารถใช้รูปภาพในการ Link ก็ได้
ตัวอย่าง <A HREF="http://geocities.datacellar.net/Tokyo/Bay/9293/">
<IMG SRC= "ppp-icon.gif" ALIGN="Center">
</A>
ลองคลิ๊กดู -->
การ Link E-mail
บางครั้งเราต้องการจะให้ผู้อื่นส่ง E-mail ไปยัง E-mail Address เป้าหมายที่กำหนด
ก็สามารถสร้าง Link แบบ E-mail ได้
1. Link โดยใช้ข้อความ
ตัวอย่าง ต้องการจะส่ง E-mail ไปยัง E-mail Address ต่อไปนี้คือ
ppp-@geocities.com สามารถ Link ได้ดังนี้
<A HREF="mailto:ppp-@geocities.com">
Send to me ppp-@geocities.com </A>
ลองคลิ๊กดู --> Sent to me ppp-@geocities.com
2. Link โดยใช้รูปภาพ
ตัวอย่าง ต้องการส่ง E-mail ไปยัง ppp-@geocities.com
ppp-@geocities.com สามารถ Link ได้ดังนี้
<A HREF="mailto:ppp-@geocities.com">
<IMG SRC="ppp-icon.gif"> </A>
ลองคลิ๊กดู -->
หลังจากที่คุณสามารถสร้าง Homepage ของตัวคุณเองได้แล้ว มาเริ่มขั้นต่อไปเลยดีกว่า
สร้างตาราง สร้าง Frame สร้างแบบฟอร์ม
ถ้ายังทำไม่ได้ กลับไปเริ่มใหม่ ล่ะกัน
|
