สารบัญ
บทที่ ๑ บทเริ่มต้น
บทที่ ๒ ภาษา HTML
บทที่ ๓ เริ่มสร้าง HTMLและการตัดบันทัดใหม่
บทที่ ๔ การกำหนดชื่อ
บทที่ ๕ การกำหนดพื้นที่เนื้อเรื่อง
บทที่ ๖ การกำหนดขนาดตัวอักษร
บทที่ ๗ ตัวอย่างสีที่ใช้งานได้บนอินเตอร์เน็ต
บทที่ ๘ การกำหนดสีของตัวอักษรโดยคำสั่ง
บทที่ ๙ การกำหนดรูปแบบอักษร
บทที่ ๑๐ การกำหนดรูปแบบอักษร
บทที่ ๑๑ การตีเส้นแบ่งหน้ากระดาษ
บทที่ ๑๒ การกำหนดย่อหน้า
บทที่ ๑๓ เครื่องหมายพิเศษ
บทที่ ๑๔ การใช้คำสั่ง ...<./pre>
บทที่ ๑๕ การกำหนดเครื่องหมายนำหน้าข้อความ (list)
บทที่ ๑๖ การสร้างตาราง-๑
บทที่ ๑๗ การสร้างตาราง-๒
บทที่ ๑๘ คำสั่งลูกเล่นแต่งเพจ
บทที่ ๑ บทเริ่มต้น
ทั่วไป
Internet
เป็นเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลก
และไม่มีขอบเขตใดๆ
ที่จะกำหนดขีดความสามารถของ
Internet ได้
แฟ้มเอกสารบน
Internet จะเรียกว่า Homepage หรือ
Webpage และถ้า Webpage หลายๆ Webpage
ที่เป็นเนื้อเรื่องที่เกี่ยวข้องกัน
หรือเนื้อเรื่องเดียวกัน
และเก็บในที่เก็บเดียวกัน
จะเรียกว่า Website
Webpage แต่ละWebpage จะประกอบด้วย
- ข้อความ คือ
ส่วนที่เป็นตัวอักษร
และข่าวสาร
หรือสาระของ Webpage
- รูปภาพ คือ
ส่วนที่เป็นภาพ
ซึ่งรูปภาพนี้อาจะเป็นสาระของ
Webpage หรือ
มีไว้เพื่อความสวยงามของ
Webpage
- พื้นพลัง คือ
ส่วนที่เป็นพื้นหลังของ
Webpage
และมีไว้เพื่อความสวยงามของ
Webpage เท่านั้น
เปรียบเทียบ
Webpage กับแฟ้มเอกสารทั่วๆ
ไป
แฟ้ม Webpage
จะแตกต่างกับแฟ้มเอกสารทั่วไป
กรณีที่มีรูปภาพเข้ามาเกี่ยวข้องกับแฟ้มงาน
โดยแฟ้ม Webpage
จะเก็บรูปภาพและข้อความรวมอยู่ในแฟ้มเดียวกัน
แต่แฟ้ม Webpage
จะเก็บสร้างแฟ้ม ๒ แฟ้ม
คือ
- แฟ้มข้อความ
- แฟ้มรูปภาพ
แฟ้มข้อความจะมีคำสั่งเชื่อมโยงนำรูปภาพจากแฟ้มรูปภาพมาแสดงในแฟ้มข้อความได้
ดังนั้น ถ้าผู้สร้างหรือใช้แฟ้มงาน
สามารถแก้ไขรูปภาพได้ง่าย
เพียงแต่กำหนดชื่อแฟ้มรูปภาพให้คงเดิมไว้เท่านั้น
และนอกจากนี้ Webpage
อาจจะส่วนประกอบอื่นๆ
เช่น
- Multimedia คือ
รูปภาพที่มีเสียงประกอบกัน
ซึ่งจะเรียกว่า Audio
และ Video
- Counter
คือ
จำนวนคนที่เข้ามาเยี่ยม
Webpage
- Cool Links
คือ
การเชื่อมโยงไปยัง
Webpage อื่นๆ
หรือการเชื่อมโยงไปยังส่วนอื่นๆ
ของ Webpage เดียวกัน
- Forms
คือ
แบบฟอร์มที่ผู้เข้าเยี่ยมชม
และส่งกลับไปยัง Webpage
ต้นทาง
- Frames
คือ
การแบ่งหน้าจอเป็นส่วนๆ
แต่ละส่วนจะแสดงข้อมูลที่แตกต่างกันและอิสระกัน
- Image Maps
คือ
รูปภาพขนาดใหญ่ที่กำหนดให้ส่วนต่างๆ
ของภาพของรูปภาพสามารถเชื่อมโยงไปยัง
Webpage อื่นๆ
- Java Applets
คือ
โปรแกรมสำเร็จรูปเล็กๆ
ที่นำมาใช้งานบน Webpage
และทำให้ Webpage มีประสิทธิภาพสูงขึ้น
up
บทที่ ๒ ภาษา
HTML
แฟ้ม Webpage
เป็นแฟ้มที่สร้างโดยภาษา
HyperText Matkup Language
เรียกย่อๆ ว่า HTML ซึ่งเป็นภาษาเขียนโปรแกรมแบบง่ายๆ
และสามารถสร้างโดยโปรแกรมสร้างเอกสารง่าย
เช่น NodePad หรือ
โปรแกรมอื่นๆ
ที่สามารถบันทึกแฟ้มงานในรูปของ
ASCII หรือ Text เท่านั้น
ลักษณะภาษา
HTML
ภาษา
HTML จะเป็นคำสั่งง่ายๆ
และมีข้อกำหนดง่ายๆ
ดังนี้
- คำสั่งจะอยู่ในเครื่องหมาย
<...>
เรียกว่า
Tag (Tag-Open , Tag-Close ตามลำดับ)
- คำสั่งของภาษา
html
จะใช้อักษรตัวเล็กหรือตัวใหญ่ก็ได้
- อักษรตัวแรกของคำสั่ง
และเครื่องหมาย <
จะต้องพิมพ์ติดกัน
จะเว้นวรรคไม่ได้
เช่น <html> จะพิมพ์เป็น < html>
(มีเว้นวรรคระหว่าง <
และอักษร h ) ไม่ได้
- คำสั่งแต่ละคำสั่ง
จะมีคำสั่ง "เริ่มทำงาน"
และ "สิ้นสุดการทำงาน"
โดยคำสั่งสิ้นสุดการทำงานจะเป็นคำสั่งเดียวกับคำสั่ง
"เริ่มการทำงาน"
โดยคำสั่ง "สิ้นสุดการทำงาน"
จะมีเครื่องหมาย / หลังเครื่องหมาย
< เช่น
<html>
เป็นคำสั่งเริ่มการสร้างแฟ้ม html
</html>
เป็นคำสั่งสิ้นสุดการสร้างแฟ้ม html
up
บทที่ ๓ เริ่มสร้าง HTMLและการตัดบันทัดใหม่
การเริ่มสร้าง
Webpage หรือแฟ้ม html จะเริ่ม
ดังนี้
<html>
เป็นการเริ่มต้นการสร้างแฟ้ม
html
</html>
เป็นการสิ้นสุดการสร้างแฟ้ม
html
ตัวอย่าง
<html>
........เนื้อเรื่อง........
........เนื้อเรื่อง.......
</html>
ผลที่แสดงออกทางหน้าจอแสดงผล
...เนื้อเรื่อง.....เนื้อเรื่อง...
|
คำสั่งตัดบันทัดใหม่
<br>
จากตัวอย่างจะเห็นความแตกตางระหว่างการพิมพ์ข้อความและการแสดงผลที่
Browser โดยการพิมพ์งานจะมีการเคาะแป้น
Enter เพื่อตัดบันทัดใหม่ แต่การกดแป้น Enter
นี้จะไม่ผลต่อ Browser การตัดบันทัดใหม่จะต้องใช้คำสั่ง
<br> เท่านั้น (คำสั่ง <br> นี้ มีแต่ tag เปิดเท่านั้น)
ตัวอย่าง
<html>
........เนื้อเรื่อง........<br>
........เนื้อเรื่อง.......<br>
</html>
ผลที่แสดงออกทางหน้าจอแสดงผล
...เนื้อเรื่อง...
..เนื้อเรื่อง...
|
up
บทที่ ๔ การกำหนดชื่อ homepage
<head>..</head>
เป็นคำสั่งกำหนดชื่อของแฟ้ม
html
โดยข้อความที่อยู่ในช่วงคำสั่งนี้จะไม่แสดงออกที่พื้นที่งานของจอแสดงผล
ตัวอย่าง
<html>
<head>การสร้าง
Homepage</head>
.......เนื้องเรื่อง......<br>
.......เนื้องเรื่อง.......<br>
</html>
ผลที่ได้จากจอแสดงผล
...เนื้อเรื่อง...
...เนื้อเรื่อง... |
<title>..</title>
เป็นคำสั่งกำหนดชื่อของแฟ้ม
html ให้แสดงชื่อที่กำหนด
ณ Title Bar ของโปรแกรม Browser
ซี่งเป็นมาตรฐานของโปรแกรม
MsWindows
ตัวอย่าง
<html>
<head><title>การสร้าง
Homepage</title></head>
.......เนื้องเรื่อง.......<br>
.......เนื้องเรื่อง.......<br>
</html>
โดยมีข้อสังเกตุว่าการปิดคำสั่งนั้นจะปิดจากคำสั่งในออกไปสู่คำสั่งนอก
ผลที่ได้จากจอแสดงผล
...เนื้อเรื่อง...
...เนื้อเรื่อง... |
และจะได้ชื่อที่กำหนดจะอยู่ที่
Title Bar ดังรูปภาพ
up
บทที่ ๕ การกำหนดพื้นที่เนื้อเรื่อง
<body>..</body>
เป็นคำสั่งกำหนดพื้นที่ส่วนที่เป็นเนื้อเรื่องและลำดับขั้นตอนของการทำงานของโปรแกรมโดยถือว่า
ขั้นตอนต่างๆ จะอยู่ในช่วง
<body>.....</body>
ตัวอย่าง
<html>
<head><title>
การสร้าง Homepage
</title></head>
<body>
คำสั่ง
<body>....</body>
เป็นคำสั่งกำหนดพื้นที่ส่วนที่เป็นเนื้อเรื่อง
<br>
และลำดับขั้นตอนของการทำงานของโปรแกรม
<br>
</body>
</html>
ผลที่ได้จากจอแสดงผล
คำสั่ง
<body>....</body>
เป็นคำสั่งกำหนดพื้นที่ส่วนที่เป็นเนื้อเรื่อง
และลำดับขั้นตอนของการทำงานของโปรแกรม
|
up
บทที่ ๖ การกำหนดขนาดตัวอักษร
ขนาดตัวอักษรบนอินเตอร์เน็ตจะกำหนดได้
๒ ด้าน คือ
คำสั่งกำหนดขนาดอักษร
<font size=n>..........</font>
โดย n คือ
ขนาดของอักษรที่ต้องการ
ตัวอย่าง
<html>
<head><title>การกำหนดขนาดตัวอักษร</title></head>
<body>
<font size=1>อักษรขนาดที่
๑</font><br>
<font size=2>อักษรขนาดที่
๒</font><br>
<font size=3>อักษรขนาดที่
๓</font><br>
<font size=4>อักษรขนาดที่
๔</font><br>
<font size=5>อักษรขนาดที่
๕</font><br>
<font size=6>อักษรขนาดที่
๖</font><br>
<font size=7>อักษรขนาดที่
๗</font><br>
</body>
</html>
ผลที่ได้จากจอแสดงผล
อักษรขนาดที่
๑
อักษรขนาดที่
๒
อักษรขนาดที่
๓
อักษรขนาดที่
๔
อักษรขนาดที่
๕
อักษรขนาดที่
๖
อักษรขนาดที่
๗ |
คำสั่งกำหนดขนาดอักษร
นอกจากนั้น
เราจะสามารผสมอักษรหลายขนาดในบันทัดเดียวกันได้
ตัวอย่าง
<html>
<head><title>การกำหนดขนาดตัวอักษร</title></head>
<body>
<font size=3>อักษรขนาดที่
๓</font>
<font size=4>อักษรขนาดที่
๔</font>
<font size=5>อักษรขนาดที่
๕</font>
</body>
</html>
ผลที่ได้จากจอแสดงผล
อักษรขนาดที่
๓ อักษรขนาดที่
๔ อักษรขนาดที่
๕ |
up
บทที่ ๗ ตัวอย่างสีที่ใช้งานได้บนอินเตอร์เน็ต
บทที่ ๗ ตัวอย่างสีที่ใช้งานได้บนอินเตอร์เน็ต Internet color example คอมพิวเตอร์จะต้องแสดงได้ 256 สี |
1 |
blue #0000ff |
blue violet #9f5f9f |
cadet blue #5f9f9f |
comflower blue #42426f |
dark state blue #6b238e |
2 |
light blue #c0d9d9 |
blue violet #8f8fbd |
lifht steel blue #3232cd |
medium state blue #7f00ff |
midnight blue #2f2f4f |
3 |
navy blue #23238e |
neon blue #4d4dff |
new midnight blue #00009c |
rich blue #5959ab |
sky blue #3299cc |
4 |
state blue #007fff |
steel blue #236e6b |
cool copper #9d7819 |
copper #b98333 |
dark green #2f4f2f |
5 |
dark green copper #4a766e |
dark olive green #4f4f2f |
forest green #238e23 |
green #00ff00 |
green copper #527f76 |
6 |
green yellow #93db70 |
hunter green #215e21 |
lime green #32cd32 |
medium forest green #3b8e23 |
Medium sea green #426f42 |
7 |
Medium sea green #7fff00 |
pale green #8fbc8f |
sea green #238e68 |
spring green #00ff7f |
yellow green #99cc32 |
8 |
indian red #4e2f2f |
midium violet red #db7093 |
orange red #ff2400 |
red #ff0000 |
violet red #cc3299 |
9 |
aquanmarine #70db93 |
baker's chocolate #5C3317 |
back #000000 |
brass #b5a642 |
bright gold #d9d919 |
10 |
brozne #8e7853 |
bronze2 #a67d3d |
brown #a62a2a |
coral #ff7f00 |
cyan #000fff |
11 |
dark brown #5c4033f |
dark orchid #9932cd |
dark puple #871f78 |
dark state gray #2f4f4f |
dark tan #97694f |
12 |
dark turquoise #7093dbf |
dark wood #855e42 |
dim gray 545454 |
dusty rose #586363 |
feldspar #d19275 |
13 |
firebrick #8e2323 |
gold #cd7f32 |
golden rod #dbdb32 |
gray #c0c0c0 |
khaki #9f9f5f |
14 |
light gray #8a8a8a |
light wood #e9c2a6 |
magenta #ff00ff |
madarin orange #e47833 |
maroon #8e236b |
15 |
medium aquamrine #32cd99 |
medium goldenrod #eaeaea |
medium orchid #9370db |
medium turquoise #70dbdb |
medium wood #a68064 |
16 |
neon pink #ff6ec7 |
new tan #ebc79e |
old gold #cfb53b |
orange #ff7f00 |
orchid #db70db |
17 |
pink #bc8f8f |
plum #eaadea |
quatz #d9d9f3 |
salmon #6f4242 |
scarlet #8c1717 |
18 |
semi sweet choc. #6b4226 |
siema #8e6b23 |
silver #e3e8fa |
spicy pink #ff1cae |
summary sky #38b0de |
19 |
tan #db9370 |
thistle #d8bfd8 |
turquoise #adeaea |
very dark brown #5c4033 |
very light gray #cdcdcd |
20 |
violet #4f2f4f |
wheat #d8d8bf |
white #ffffff |
yellow #ffff00 |
white #ffffff |
up
บทที่ ๘ การกำหนดสีของตัวอักษรโดยคำสั่ง
<body>
สีของตัวอักษร
เป็นคุณลักษณะสำคัญของสร้าง
Homepage
และไม่ปัญหาสำหรับการโหลด
Homepage แต่อย่างไร
สีของตัวอักษรจะแบ่งเป็นกรณีต่างๆ
ดังนี้
- สีของตัวอักษรทั่วไป
โดยสามารถกำหนดได้จากคำสั่ง
<body text="color">.....</body>
- สีของข้อความที่เข้าคำสั่ง
Hyperlink (link)
โดยสามารถกำหนดได้จากคำสั่ง
<body link="color">.....</body>
- สีของข้อความที่เข้าคำสั่ง
Hyperlink และได้ถูก Link แล้ว (Visited
Link)
โดยสามารถกำหนดได้จากคำสั่ง
<body vlink="color">.....</body>
- สีของข้อความที่เข้าคำสั่ง
Hyperlink
และมีเม้าท์ไปวางทับ
(Active Link)
ซึ่งสีของข้อความจะเปลี่ยนไปชั่วขณะ
โดยสามารถกำหนดได้จากคำสั่ง
<body
alink="color">.....</body>
- ถ้ารวมคำสั่งทั้งหมดเข้าด้วยกัน
จะได้คำสั่ง ดังนี้
<body
bgcolor="#ffffff" text="#000000" link="#ff0000"
vlink="#0000ff" alink="#ffff00">....</body>
up
บทที่ ๙ การกำหนดสีตัวอักษรด้วยคำสั่ง color
การกำหนดสีของตัวอักษร นอกจากจะกำหนดใน
<body text="#000000">
....
</body>
แล้วยังสามารถกำหนดสีได้ในคำสั่ง
<font color="#000000">
....
</font>
ตัวอย่าง
<html>
<body>
<font>
ข้อความต่างๆ ถ้าไม่กำหนดสีของตัวอักษร โปรแกรมจะถือว่าสีของอักษรเป็นสีดำ
ยกเว้นจะกำหนดเป็นสีอื่นๆ ซึ่งกำหนดได้ ดังนี้
-
<font color=red>
ข้อความอักษรสีแดง
</font>
-
<font color=green>
ข้อความอักษรสีเขียว
</font>
-
<font color=blue>
ข้อความอักษรสีน้ำเงิน
</font>
-
ข้อความในบันทัดเดียวกัน สามารถผสมสีหลายสีได้ เช่น
<font color=red>
สีแดง
</font> <font color=green>
สีเขียว
</font>
</font>
</body>
</html>
ผลที่ได้บนหน้าจอคอมพิวเตอร์
ข้อความต่างๆ ถ้าไม่กำหนดสีของตัวอักษร โปรแกรมจะถือว่าสีของอักษรเป็นสีดำ
ยกเว้นจะกำหนดเป็นสีอื่นๆ ซึ่งกำหนดได้ ดังนี้
- ข้อความอักษรสีแดง
- ข้อความอักษรสีเขียว
- ข้อความอักษรสีน้ำเงิน
- ข้อความในบันทัดเดียวกัน สามารถผสมสีหลายสีได้ เช่น
สีแดง
สีเขียว
|
up
<บทที่ ๑๐ การกำหนดรูปแบบอักษร
ข้อความบนอินเตอร์เน็ตจะเหมือนกับข้อความในเอกสารทั่วๆไป คือ สามารถกำหนดรูปแบบอักษรตัวหนา เอียง
และขีดเส้นใต้เหมือนกับการสร้างเอกสารในโปรแกรมสร้างเอกสารทั่วๆไป
<b>............</b> สำหรับอักษรตัวหนา
<i>.............</i> สำหรับอักษรตัวเอียง
<ีu>............</u> สำหรับอักษรตัวขีดเส้นใต้
ตัวอย่าง
<html>
<head><titile>
การกำหนดรูปแบบอักษร
</titler></head>
<body>
ตัวอย่างรูปแบบอักษร
<b>
อักษรตัวหนา
</b>
<i>
อักษรตัวเอียง
</i>
<ีu>
อักษรตัวขีดเส้นใต้
</u>
<b><i><ีu>
อักษรตัวหนาผสมตัวเอียงผสมตัวขีดเส้นใต้
</u</i></b>
</body>
</html>
ผลที่แสดงออกทางหน้าจอภาพ
ตัวอย่างรูปแบบอักษร
อักษรตัวหนา
อักษรตัวเอียง
อักษรตัวขีดเส้นใต้
อักษรตัวหนาผสมตัวเอียงผสมตัวขีดเส้นใต้
|
up
บทที่ ๑๑ การตีเส้นแบ่งหน้ากระดาษ
การตีเส้นแบ่งหน้ากระดาษเป็นการสร้างความสวยงามอย่างหนึ่งของhomepage
โดยใช้คำสั่ง <ht> โดยคำสั่งนี้มีแต่ tag เปิด ไม่ tag ปิด
และมีตัวประกอบ ดังนี้
-
size คือ ความหนาของเส้น กำหนดได้หลายขยาด
-
width คือ ความยาวของเส้น ควรกำหนดเเป็น % โดย width="100%"
จะเป็นเส้นตรงจะเท่ากับความกว้างของหน้ากว้างโปรแกรม
-
color คือ การกำหนดสีของเส้น
-
align คือ การกำหนดตำแหน่งของเส้น ซึ่งมี left, center และ right
ตัวอย่าง
<html>
<head><title>การตีเส้นแบ่งหน้ากระดาษ
</head></title>
<body>
<hr color=red size=6 width=center align=center>
</body>
</html>
ผลที่ได้
up
บทที่
๑๒ การกำหนดย่อหน้า <p>..</p>
สำหรับการพิมพ์เอกสารทั่วๆ
ไป การย่อหน้า คือ
การพิมพ์งานไปเรื่อยๆ
ถึงแม้สุดบันทัดแล้ว
ก็ยังคงพิมพ์งานต่อไปโดยไม่ต้องกดแป้น
Enter
แต่โปรแกรมคอมพิวเตอร์ที่กำลังใช้งานจะขึ้นบันทัดใหม่ให้เอง
แต่ถ้ามีการกดแป้น Enter
เมื่อใด
จะเป็นขึ้นย่อหน้าใหม่ทันที
ใน Homepage
การขึ้นย่อหน้าใหม่จะใช้คำสั่ง
<p>.......</p>
ตัวอย่าง
<html>
<head><title>การกำหนดย่อหน้า</head></title>
<body>
<p>
สำหรับการพิมพ์เอกสารทั่วๆ
ไป การย่อหน้า คือ
การพิมพ์งานไปเรื่อยๆ
ถึงแม้สุดบันทัดแล้ว
ก็ยังคงพิมพ์งานต่อไปโดยไม่ต้องกดแป้น
Enter
แต่โปรแกรมคอมพิวเตอร์ที่กำลังใช้งานจะขึ้นบันทัดใหม่ให้เอง
แต่ถ้ามีการกดแป้น Enter
เมื่อใด
จะเป็นขึ้นย่อหน้าใหม่ทันที
</p>
<p>ใน Homepage
การขึ้นย่อหน้าใหม่จะใช้คำสั่ง
<p>.......</p></p>
</body>
<html>
ผลที่ได้
สำหรับการพิมพ์เอกสารทั่วๆ
ไป การย่อหน้า คือ
การพิมพ์งานไปเรื่อยๆ
ถึงแม้สุดบันทัดแล้ว
ก็ยังคงพิมพ์งานต่อไปโดยไม่ต้องกดแป้น
Enter
แต่โปรแกรมคอมพิวเตอร์ที่กำลังใช้งานจะขึ้นบันทัดใหม่ให้เอง
แต่ถ้ามีการกดแป้น Enter
เมื่อใด
จะเป็นขึ้นย่อหน้าใหม่ทันที ใน Homepage
การขึ้นย่อหน้าใหม่จะใช้คำสั่ง
<p>.......</p>
|
up
บทที่ 13 เครื่องหมายพิเศษ
การสร้าง homepage
จะมีเครื่องหมายบางตัวไม่สามารถพิมพ์โดยตรงได้
เพราะจะกลายเป็นการพิมพ์เป็รคำสั่ง
ซึ่งจะแก้ไขโดยการใช้รหัสของเครื่องนั้นๆแทน
เครื่องหมายมากกว่าและน้อยกว่า
< เครื่องหมายน้อยกว่า ใช้รหัส <
> เครื่องหมายมากกว่า ใช้รหัส >
การเว้นวรรคในภาษา HTML
ในพิมพ์ภาษา HTML ไม่ว่าจะเคาะแป้น spacebar กี่ครั้ง แต่ใน HTML จะมีเพียง 1 spacebar
เท่านั้นดังนั้น ถ้าต้องการให้มี spacebar มากกว่า 1 ครั้ง จะต้องพิมพ์เป็นรหัส คือ
up
บทที่ 14 การใช้คำสั่ง <pre>...</pre>
คำสั่ง <pre>...</pre> เป็นคำสั่งที่ทำให้ homepage แสดงผลตามการเคาะแป้น
keyboard เช่น เคาะแป้น enter จะเป็นการขึ้นบันทัดใหม่ สามารถใช้แป้น tab ได้ รวมทั้ง
สามารถใช้แป้น spacebar กี่ครั้งก็ได้
แต่คำสั่งนี้จะไม่นิยมใช้ เพราะทำให้ข้อความไม่สามารถปรับความกว้างตามความกว้างของ
browser ได้อย่างอัตโนมัติ
up
บทที่ 15 การกำหนดเครื่องหมายนำหน้าข้อความ (list)
เครื่องหมายนำหน้าข้อความจะมีให้เลือก ดังนี้
เครื่องหมายนำหน้าข้อความแบบเครื่องหมาย
<ul type="??">
<li>........</li>
<li>........</li>
</ul>
type คือ รูปแบบของเครื่องหมายซึ่งมี ดังนี้
- disc แบบจุดกลม
- square แบบจุดสี่เหลี่ยม
- circle แบบวงกลม
<li>........</li> หมายถึง ข้อความที่ถูกนำด้วยเครื่องหมาย list
เครื่องหมายนำหน้าข้อความแบบตัวเลข
<ol type="??" start="??">
<li>........</li>
<li>........</li>
</ol>
type คือ รูปแบบของตังเลข ซึ่งมี ดังนี้
- ไม่กำหนด type จะเป็นการกำหนดแบบตังเลขธรรมดา
- I แบบเลขโรมันใหญ่
- A แบบอักษรตัวใหญ่
- a แบบอักษรตัวเล็ก
- i แบบเลขโรมันเล็ก
start คือ ค่าเริ่มต้นที่ต้องการ
up
บทที่ ๑๖ การสร้างตาราง-๑
ตาราง
ในHomeapge เป็นเทคนิคการสร้างงานที่สวยงาม ได้หลายรูปแบบ เช่น
- สร้างตารางจริงๆ
- จัดข้อความเป็นคอลัมภ์
- ตีกรอบการแบ่งส่วนข้อความตามที่ต้องการ
- จัดเรียงรูปภาพให้เป็นระเบียบ โดยรูปภาพเหล่านั้นมีขนาดไม่เท่ากัน
ความรู้เรื่องตารางในบทเรียนนี้จะประกอบด้วย
การสร้างตารางขั้นพื้นฐาน
การกำหนดเส้นขอบตาราง
การกำหนดเส้นขอบนอกตาราง
การกำหนดการวางตำแหน่งตาราง
การกำหนดความกว้างของตาราง
การกำหนดตำแหน่งข้อความในตาราง
การกำหนดหัวตาราง
(มีต่อ บทที่ ๑๗)
<table border="1">
<tr>
<td>...ข้อความหรือรูปภาพ...</td>
<td>...ข้อความหรือรูปภาพ...</td>
<td>...ข้อความหรือรูปภาพ...</td>
</tr>
<td>
<td>...ข้อความหรือรูปภาพ...</td>
<td>...ข้อความหรือรูปภาพ...</td>
<td>...ข้อความหรือรูปภาพ...</td>
</tr>
</table>
ความหมายของคำสั่งต่างๆ
มีดังนี้
- <table>.........</table> คำสั่ง เริ่ม
สร้างตาราง และ สิ้นสุด
การสร้างตาราง
- <tr>.........</tr> คำสั่งสร้าง
แถวแนวนอน (row)
- <td>.........</td> คำสั่งสร้าง
ช่องตาราง (cell)
ในแถวแนวนอน
- border="1" หรือ "0" เป็นคำสั่งกำหนดให้มีหรือไม่มีเส้นตาราง
จากตัวอย่างข้างบน
จะได้รูปแบบของตารางดังนี้
|
...ข้อความหรือรูปภาพ... |
...ข้อความหรือรูปภาพ... |
...ข้อความหรือรูปภาพ... |
...ข้อความหรือรูปภาพ... |
...ข้อความหรือรูปภาพ... |
...ข้อความหรือรูปภาพ... |
|
|
up
การกำหนดเส้นขอบตาราง เป็นวิธีหนึ่งที่ทำให้เกิดความสวยงามของการสร้าง Homepage
โดยการกำหนดกรอบตารางจะมีคำสั่งช่วยดังนี้
<table
border="4" bordercolor="#FF0000"
> <tr>
<td>ข้อความ
</td> <td>ข้อความ
</td> </tr>
</table>
border คือ คำสั่งย่อยสำหรับกำหนดความหนาของเส้นขอบนอกและขอบในตาราง
โดยถ้า border=0 หมายถึง การกำหนดให้ ไม่มีเส้นตาราง
bordercolor คือคำสั่งย่อยสำหรับสีของเส้นขอบตาราง
ตัวอย่างที่ได้
up
การกำหนดเส้นขอบตาราง เป็นวิธีหนึ่งที่ทำให้เกิดความสวยงามของการสร้าง
Homepage โดยการกำหนดกรอบตารางจะมีคำสั่งช่วย ดังนี้
<table border="4" bordercolordark="#0000FF"
bordercolorlight="#00FF00">
<tr>
<td>ข้อความ</td>
<td>ข้อความ</td>
</tr>
</table>
border คือ
คำสั่งย่อยสำหรับกำหนดความหนาของเส้นขอบนอกและขอบในตาราง
โดยถ้า border=0 หมายถึง
การกำหนดให้ ไม่มีเส้นตาราง
bordercolor คือ คำสั่งย่อยสำหรับสีของเส้นขอบตาราง
bordercolordark คือ คำสั่งย่อยเส้นขอบตารางด้านสีมืด
bordercolorlight คือ คำสั่งย่อยเส้นขอบตารางด้านสีสว่าง
ตัวอย่างที่ได้
up
การกำหนดการวางตำแหน่งตาราง จะกำหนดตำแหน่งได้ ๓ ตำแหน่ง ดังนี้
-
กำหนดให้ตาราง ชิดซ้าย ของ homepage
-
กำหนดให้ตาราง อยู่ตรงกลาง ของ homepage
-
กำหนดให้ตาราง ชิดขวา ของ homepage
ตัวอย่างการกำหนดการวางตำแหน่งตาราง
การวางตำแหน่งตาราง ชิดซ้าย
<table border="1" align="left">
<tr>
<td>ตาราง ชิดซ้าย
ของ homepage
</td> <td>
ตาราง ชิดซ้าย ของ homepage
</td>
</tr>
</table>
การวางตำแหน่งตารางอยู่กลาง
<table border="1" align="left">
<tr> <td>
ตารางอยู่กลาง ของ homepage
</td>
<td>ตาราง
อยู่กลาง ของ homepage
</td>
</tr>
</table>
การวางตำแหน่งตาราง ชิดขวา
<table border="1" align="left">
<tr> <td>
ตาราง ชิดขวา ของ homepage
</td> <td>
ตาราง ชิดขวา ของ homepage
</td>
</tr>
</table>
ผลที่ได้จากตัวอย่าง
|
ตาราง ชิดซ้าย ของ homepage
|
ตาราง ชิดซ้าย ของ homepage
|
|
|
ตาราง อยู่กลาง ของ homepage
|
ตารางอยู่กลาง ของ homepage
|
|
|
ตาราง ชิดขวา ของ homepage
|
ตาราง ชิดขวา ของ homepage
|
|
|
up
ความรู้การกำหนดความกว้างของตาราง
ความรู้การกำหนด ความกว้าง ของตาราง
จะมีกำหนดได้ ๒ วิธี ดังนี้
- กำหนดโดย ความยาวข้อความ
ซึ่งความกว้างของเซลจะปรับความกว้างโดยอัตโนมัติ ตามความยาวของข้อความ
- กำหนดเป็น % ของความกว้างของ Browser
ตัวอย่าง "กำหนดโดยความยาวข้อความ"
<table border=1>
<tr>
<td>ความกว้างตารางปรับตามความข้อความ
</td>
<td>ข้อความ.....01
</td>
<td>ข้อความ...........02
</td>
</tr>
</table>
ผลที่ได้
|
ความกว้างตารางปรับตามความข้อความ |
ข้อความ.....01 |
ข้อความ...................02 |
|
|
ตัวอย่าง "กำหนดเป็น %
ของความกว้างของ Browser"
<table width=75%>
<tr>
<td> width=75%
</td>
<td> width=75%
</td>
</tr>
<table>
ผลที่ได้
up
ข้อความในช่อง cell สามารถจัดวางได้เหมือนกับการจัดวางข้อความทั่วๆ ไป ดังนี้
- ข้อความ ชิดซ้าย ของช่องเซล
- ข้อความ จัดกลาง ของช่องเซล
- ข้อความ ชิดขวา ของช่องเซล
ตัวอย่างการจัดข้อความในช่อง cell
<table width=75%>
<tr>
<td align="left"
>
ข้อความ ชิดซ้าย ของช่องเซล
</td>
<td
align="center
>
ข้อความ จัดกลาง
ของช่องเซล</td>
<td align="right"
>
ข้อความ ชิดขวา ของช่องเซล
</td>
</tr>
<table>
ผลที่ได้
|
ข้อความ ชิดซ้าย ของช่องเซล |
ข้อความ
จัดกลาง ของช่องเซล |
ข้อความ
ชิดขวา ของช่องเซล |
|
|
up
การสร้าง หัวตาราง
สามารภใช้คำสั่ง <th>.....</th>
แทนคำสั่ง <td>.....</td>
ซึ่งจะทำให้ข้อความในคำสั่งดังกล่าว มีคุณสมบัติ ดังนี้
- เป็นอักษรตัวหนา
- ข้อความจัดกลาง
ตัวอย่างการสร้างหัวตาราง
<table width=75% border="1">
<tr>
<th>ลำดับที่
</th>
<th>รายการ
</th>
<th>จำนวน
</th>
<th>หน่วย
</th>
</tr>
<tr>
<td>๑</td>
<td>กระดาษอัดสำเนา</td>
<td>45</td>
<td>รีม</td>
</tr>
<td>๒</td>
<td>กระดาษถ่ายเอกสาร</td>
<td>120</td>
<td>รีม</td>
</tr>
</table>
ผลที่ได้
|
ลำดับที่ |
รายการ |
จำนวน |
หน่วย |
๑ |
กระดาษอัดสำเนา |
45 |
รีม |
๑ |
กระดาษถ่ายเอกสาร |
120 |
รีม |
|
|
up
up
บทที่ ๑๗ การสร้างตาราง-๒
การใช้คำสั่ง cellpadding และ cellspacing
การกำหนดสีต่างๆ ของตาราง
การกำหนดข้อความกำกับตาราง
การนำภาพเป็นพื้นหลังของตาราง
การรวมเซลหลายๆ เซล ให้เป็น ๑ เซล
การนำภาพเข้าตาราง
การสร้าง thumbnails ในตาราง (ภาพเล็กที่ link ไปหาภาพใหญ่)
การสร้างตารางซ้อนตาราง
การจัดข้อความในตาราง
cellpadding
คือ ระยะห่างทั้ง ๔ ด้าน ระหว่างข้อความภายในเซลและขอบในของเซล
cellspacing
คือ ระยะห่างระหว่างเซล และมีผลให้กรอบระหว่างเซลกว้างมากขึ้น
ตัวอย่างการใช้
cellpadding และ cellspacing
<table border="1"
cellpadding="5"
cellspacing="10"
bordercolor=red>
<tr>
<td>cellpadding=5
</td>
<td>cellpadding=5
</td>
</tr>
<tr>
<td>cellpadding=5
</td>
<td>cellpadding=5
</td>
</tr>
</table>
ผลที่ได้
|
cellpadding=5 |
cellpadding=5 |
cellpadding=5 |
cellpadding=5 |
|
|
up
การกำหนดสีของข้อความในตารางจะเหมือนกับการกำหนดสีข้อความทั่วๆไป
โดยการใช้คำสั่ง
<font color="
ชื่อสีที่ต้องการ">
.........
</font>
การกำหนดสีของเส้นขอบ จะเป็นคำสั่งย่อยในคำสั่ง ตาราง ดังนี้
<table border=1
bordercolor="
ชื่อสีที่ต้องการ
">
.........
</table>
สีพื้นหลังตารางเป็นการกำหนดสีพื้นทั้งหมดทุกช่องเซล โดยกำหนดเป็นคำสั่งย่อยในคำสั่งตาราง
<table border=1
bgcolor="
ชื่อสีที่ต้องการ
">
.........
</table>
การกำหนดสีพื้นหลังเซลจะทำให้ homepageมีความสวยงานดังนี้
- เป็นการเน้นให้เซลนั้นมีความโดดเด่นจากเซลอื่นๆ
- กรณีที่กำหนดให้ border=0 colspcaing=0
แถบสีของแต่ละสดมภ์จะแยกสดมภ์ออกจากกันได้ดีกว่าการใช้เส้นตาราง
การกำหนดสีพื้นทั้งหมดทุกช่องเซลโดยกำหนดเป็นคำสั่งย่อยในคำสั่งตาราง
<td bgcolor="
ชื่อสีที่ต้องการ"
.........
</table>
ตัวอย่าง
<table border="1"
cellpadding="5" cellspacing="0"
bgcolor="#ffff00"
bordercolor="#ff0000"
>
<tr>
<td>ตารางนี้กำหนดให้เส้นตารางเป็นสีแดง
</td>
<td>
<font color="#0000ff">
แต่ตัวอักษรเฉพาะเซลนี้เป็นสีนำเงิน
</font>
</td>
</tr> <tr> <td>
พื้นหลังของตารางเป็นสีเหลือง
</td> <td
bgcolor="#00ff00"
>
ยกเว้นเซลนี้มีพื้นหลังเป็นสีเขียวอ่อน
</td>
</tr>
</table>
ผลที่ได้
  |
ตารางนี้กำหนดให้เส้นตารางเป็นสีแดง |
แต่ตัวอักษรเฉพาะเซลนี้เป็นสีนำเงิน |
พื้นหลังของตารางเป็นสีเหลือง |
ยกเว้นเซลนี้มีพื้นหลังเป็นสีเขียวอ่อน |
|
  |
up
ข้อความกำกับตาราง
ถือว่าเป็นส่วนหนึ่งของตาราง แต่ข้อความดังกล่าวจะอยู่
นอกตาราง
และกำหนดตำแหน่งข้อความดังกล่าวได้ ๒ ตำแหน่ง คือ
- ข้อความอยู่ เหนือตาราง
- ข้อความอยู่ ใต้ตาราง
ตัวอย่าง
<table border="1"
cellpadding="5" cellspacing="0">
<caption align="top">
ข้อความกำกับตาราง
</caption>
<tr> <td>
การกำหนดข้อความกำกับตาราง
</td> <td>
จะมีให้เลือกได้ ๒ แบบ คือ
</tr>
<tr>
<td>
1. ข้อความอยูเหนือตาราง
</td> <td>
2. ข้อความอยู่ใต้ตาราง
</td>
</tr> </table>
ผลที่ได้
  |
ข้อความกำกับตาราง
การกำหนดข้อความกำกับตาราง |
จะมีให้เลือกได้ ๒
แบบ คือ |
1.
ข้อความอยูเหนือตาราง |
2
ข้อความอยู่ใต้ตาราง |
|
  |
up
การนำภาพเป็นพิ้นหลังของตารางจะมีวิธีการเหมือนกับการนำภาพเป็นพื้นหลังของ
Homepage โดยสามารถนำภาพเป็นพื้นหลังในตารางได้ ๒ คำสั่ง คือ
-
พื้นหลังในคำสั่งตาราง
<table
background="
ชื่อภาพที่นำมาใช้เป็นพื้นหลัง
"
>
......
</table>
-
พื้นหลังในคำสั่งเซล
<td
background="
ชื่อภาพที่นำมาใช้เป็นพื้นหลัง
"
>
......
</td>
การนำภาพเป็นพื้นหลังของตาราง ภาพจะกระจายเรียงตัวเต็มตาราง และถ้าตารางมีขนาดเล็กกว่าภาพ
จะมองเห็นเพียงบางส่วนของภาพเท่านั้น
ตัวอย่าง
<table border="1"cellpadding="5" cellspacing="0"
background="pic/002.jpg"
bordercolor="#ff0000" align=center> <tr>
<td>
ภาพที่ใช้พื้นหลังชื่อ 002.jpg
</td> <td>
ถ้าตารางเล็กจะเห็นภาพ
</td> </tr> <tr> <td>
เพียงบางส่วนเท่านั้น
</td> <td
background="pic/003.jpg
">
ยกเว้นเซลนี้ภาพพื้นหลังชื่อ 003.jpg
</td> </tr> </table>
ผลที่ได้
  |
ภาพที่ใช้พื้นหลังชื่อ 002.jpg |
ถ้าตารางเล็กจะเห็นภาพ |
เพียงบางส่วนเท่านั้น |
ยกเว้นเซลนี้ภาพพื้นหลังชื่อ 003.jpg |
|   |
up
การรวมช่องเซลหลายๆเซล ให้เป็น ๑ เซล ปกติจะไม่ใช้กันมากนัก
ยกเว้นกรณีที่ต้องการออกแบบ homepage เป็นพิเศษบางกรณีเท่านั้น
ซึ่งการรวมเซลหลายๆ เซล ให้เป็น ๑ เซล
จะมีรูปแบบ ดังนี้
-
รวมเซลติดๆกัน ในแนวนอนให้เป็น ๑ เซล
<td colspan=
"จำนวนเซลติดกันแนวนอนที่ต้องการรวมเป็น๑เซล"
>
....................
</td>
- รวมเซลติดๆกัน ในแนวตั้งให้เป็น ๑ เซล
<td rowspan=
"จำนวนเซลติดกันแนวตั้งที่ต้องการรวมเป็น๑เซล"
>
....................
</td>
- รวมเซลติดๆกัน ในแนวนอนและแนวตั้งให้เป็น ๑ เซล
<td
rowspan="จำนวนเซลติดกันแนวตั้งที่ต้องการรวมเป็น๑เซล"
colspan="จำนวนเซลติดกันแนวนอนที่ต้องการรวมเป็น๑เซล"
>
....................
</td>
ตัวอย่าง
<table border="1" cellpadding="5" cellspacing="0" align=center>
<tr>
<td
colspan="2"> ๒
ช่องแนวนอนรวมเป็น ๑ ช่อง</td>
<td>ช่องเซลปกติ</td>
<td rowspan="2">
๒ ช่องแนวตั้งรวมเป็น ๑ ช่อง
</td>
</tr>
<tr>
<td>ช่องเซลปกติ</td>
<td>ช่องเซลปกติ</td>
<td>ช่องเซลปกติ</td>
</tr>
<tr>
<td rowspan="2" colspan="2">
๒ ช่องแนวนอนและแนวตั้งรวมเป็น ๑ ช่อง</td>
<td>ช่องเซลปกติ</td>
</td>
<td>ช่องเซลปกติ</td>
</tr>
<tr>
<td>ช่องเซลปกติ</td>
<td>ช่องเซลปกติ</td>
</tr>
</table>
ผลที่ได้
  |
๒ ช่องแนวนอนรวมเป็น ๑ ช่อง |
ช่องเซลปกติ |
๒ ช่องแนวตั้งรวมเป็น ๑ ช่อง |
ช่องเซลปกติ |
ช่องเซลปกติ |
ช่องเซลปกติ |
๒ ช่องแนวนอนและแนวตั้งรวมเป็น ๑ ช่อง |
ช่องเซลปกติ |
ช่องเซลปกติ |
ช่องเซลปกติ |
ช่องเซลปกติ |
|   |
up
การนำภาพมาใส่ลงในตาราง คือ การนำภาพมาใส่ลงในช่องเซลโดยมีหลักการง่ายๆ ดังนี้
-
ไม่ต้องกำหนดความกว้างของตาราง
width=
ลงใน<table>.........</table>
-
กำหนดขนาดของเป็น
pixel
แทน % และกำหนดเฉพาะด้านใดด้านหนึ่งเท่านั้น
และ browser จะคำนวณด้านที่เหลือเอง
-
กำหนด cellpadding ให้เหมาะสม ถ้า
cellpadding=0
จะได้ภาพเต็มช่องเซล
-
เนื่องจากตารางจะปรับความกว้างให้พอดีกับ
ความกว้างของ broswer
โดยอัตโนมัติ ดังนั้น การแสดงภาพขนาดใหญ่ จะมีผลให้ช่องเซลอื่นๆ
มีขนาดเล็กลง ให้แก้ไขปัญหาโดยใช้คำสั่ง
colspan rowspan
เพื่อขยายช่องเซลให้กว้างขึ้น
ตัวอย่าง
<table border="1"
cellpadding="5" cellspacing="0">
<tr>
<!ในคำสั่ง table นี้ ไม่ต้องกำหนด width>
<td rowspan="2">
<img src="pic/002.jpg" width=200>
<!กำหนดความกว้างของภาพเป็น pixel แทน %>
</td>
<td>ข้อความปกติ</td>
</tr>
<tr>
<td>ข้อความปกติ</td>
</tr>
</table>
ผลที่ได้
  |
|
ข้อความปกติ |
ข้อความปกติ |
|   |
up
การสร้าง thumbnails คือ
การนำภาพขนาดใหญ่ที่ ถูกย่อขนาดให้เล็ก
และนำมาแสดงใน homepage และ
มีการเชื่อมโยงจากภาพเล็กไปสู่ภาพขนาดใหญ่
ซึ่งจะให้ผู้ใช้อินเตอร์เน็ตจะได้ดูภาพตัวอย่างขนาดเล็ก
และถ้าพอใจที่จะดูภาพขนาดใหญ่ภาพใด
ก็สามารถเรียกคำสั่งเชื่อมโยงไปยังภาพใหญ่ได้ตามต้องการ
การสร้าง thumbnails จะมีหลักการดังนี้
- ไม่ต้องกำหนด width ของตาราง
- กำหนด width
ของภาพทุกภาพจะต้องกำหนดให้เท่ากัน และภาพที่ได้จะเป็นภาพตัวอย่างแสดงออกทาง
homepage
- กำหนด คำสั่งเชื่อมโยง จาก ภาพตัวอย่าง
ไปยังภาพจริง
- สามารถกำหนดข้อความใต้ภาพ โดยพิมพ์ข้อความตามปกติ และใช้คำสั่ง
<br> คั่นระหว่างคำสั่งภาพและข้อความ
ตัวอย่าง
<table border="1"
cellpadding="5" cellspacing="0" align=center>
<tr>
<td align=center valign=bottom><a
href="pic/002.jpg">
<img src="pic/002.jpg"
width=75></a><br>ภาพที่ ๑</td>
<td align=center valign=bottom><a
href="pic/003.jpg">
<img src="pic/003.jpg"
width=75></a><br>ภาพที่ ๒</td>
<td align=center valign=bottom><a
href="pic/004.jpg">
<img src="pic/004.jpg"
width=75></a><br>ภาพที่ ๓</td>
<td align=center valign=bottom><a
href="pic/005.jpg">
<img src="pic/005.jpg"
width=75></a><br>ภาพที่ ๔</td>
</tr>
<tr>
<td align=center valign=bottom><a
href="pic/006.jpg">
<img src="pic/006.jpg"
width=75></a><br>ภาพที่ ๕</td>
<td align=center valign=bottom><a
href="pic/007.jpg">
<img src="pic/007.jpg"
width=75></a><br>ภาพที่ ๖</td>
<td align=center valign=bottom><a
href="pic/008.jpg">
<img src="pic/008.jpg"
width=75></a><br>ภาพที่ ๗</td>
<td align=center valign=bottom><a
href="pic/009.jpg">
<img src="pic/009.jpg"
width=75></a><br>ภาพที่ ๘</td>
</tr>
</table>
ในขั้นตอนของคำสั่ง จะอธิบายได้ ดังนี้
-
<td align=center valign=bottom>......</td>
กำหนดให้ภาพเล็กในตาราง จัดกลางในแนวนอน และชิดขอบล่าง
-
<a href="ปลายทางที่ต้องการ">.....</a>
เป็นคำสั่งเชื่อมโยงไปยังปลายทางที่ต้องการ
-
<img src="" width=75>
เป็นคำสั่งนำภาพเข้าตาราง โดยกำหนดความกว้าง 75 หน่วย
ผลที่ได้
  |
ภาพที่ ๑ |
ภาพที่ ๒ |
ภาพที่ ๓ |
ภาพที่ ๔ |
ภาพที่ ๕ |
ภาพที่ ๖ |
ภาพที่ ๗ |
ภาพที่ ๘ |
|   |
up
การสร้างตารางซ้อน ตาราง คือ
การตารางเล็กๆ ลงในช่องเซล ๑ ช่อง ของตารางใหญ่ ๑ ตาราง
และการสร้างตารางเล็กจะเหมือนกับการสร้างตารางทั่วๆไป
ตัวอย่าง
<table width=75% bgcolor=yellow border=1 bordercolor=red cellpadding=5 cellspacing=0>
<tr>
<td>ตารางใหญ่</td>
<td>ตารางใหญ่</td>
<td>ตารางใหญ่</td>
<td>ตารางใหญ่</td>
</tr>
<tr>
<td>ตารางใหญ่</td>
<td>
<!เริ่มต้นตารางเล็ก>
<table bgcolor="#7ff00" border=1 bordercolor=blue align=center>
<tr>
<td>ตารางเล็ก</td>
<td>ตารางเล็ก</td>
</tr>
<tr>
<td>ตารางเล็ก</td>
<td>ตารางเล็ก</td>
</tr>
</table>
</td>
<td>ตารางใหญ่</td>
<td>ตารางใหญ่</td>
</tr>
</table>
ผลที่ได้
  |
ตารางใหญ่ |
ตารางใหญ่ |
ตารางใหญ่ |
ตารางใหญ่ |
ตารางใหญ่ |
ตารางเล็ก |
ตารางเล็ก |
ตารางเล็ก |
ตารางเล็ก |
|
ตารางใหญ่ |
ตารางใหญ่ |
|   |
up
การจัดข้อความในเซลของตารางของ homepage จะเหมือนกับ การจัดข้อความในตารางของโปรแกรม Ms-Word และ Ms-Excel
คือ มีการ จัดกลางด้านซ้าย-ขวา และ
บน-ล่าง
การจัดข้อความในช่องเซล จะมี ๒ กรณี คือ
- การจัดกลางในแนวนอน
- การจัดกลางในแนวตั้ง
การจัดกลางทั้งสองแนว จะเป็นคำสั่งช่วยในคำสั่ง <td>.......</td> ดังนี้
<td valign="top">จัดข้อความชิดแนวตั้งชิดขอบบน</td>
<td valign="middle">จัดกลางแนวตั้ง</td>
<td valign="bottom">จัดข้อความชิดแนวตั้งชิดขอบล่าง</td>
<td align="left">จัดข้อความชิดแนวนอนชิดขอบซ้าย</td>
<td align="center">จัดกลางแนวตั้ง</td>
<td align="right">จัดข้อความชิดแนวนอนชิดขอบขวา</td>
ตัวอย่าง
<table border="1" cellpadding="5" cellspacing="0"
width="75%" bordercolor="#ff0000">
<tr>
<td colspan="3">ข้อความปกติจะชิดซ้าย</td>
<td align="center">ข้อความจัดกลาง</td>
</tr>
<tr>
<td>ข้อความชิดซ้าย</td>
<td align="center" valign="top">ข้อความจัดกลาง</td>
<td align="right">ข้อความชิดขวา</td>
<td align="center" rowspan="3">จัดกลางแนวนอนและแนวตั้ง</td>
</tr>
<tr>
<td valign="bottom"
rowspan="2" colspan="2">ข้อความจัดกลางแนวนอนแต่ชิดด้านล่าง
</td>
<td>ข้อความปกติ-ข้อความปกติ</td>
</tr>
<tr>
<td>ข้อความปกติ-ข้อความปกติ</td>
</tr>
</table>
ผลที่ได้
  |
ข้อความปกติจะชิดซ้าย |
ข้อความจัดกลาง |
ข้อความชิดซ้าย |
ข้อความจัดกลาง |
ข้อความชิดขวา |
จัดกลางแนวนอนและแนวตั้ง |
ข้อความจัดกลางแนวนอนแต่ชิดด้านล่าง |
ข้อความปกติ-ข้อความปกติ |
ข้อความปกติ-ข้อความปกติ |
|   |
up
กำหนดความกว้าง
width="ขนาดที่ต้องการ"
กำหนดความยาว
height="ขนาดที่ต้องการ"
คำสั่งเชื่อมโยงไปยังปลายทางที่ต้องการด้วยข้อความ
<a href="ปลายทางที่ต้องการ">..ข้อความ...</a>
คำสั่งเชื่อมโยงไปยังปลายทางที่ต้องการด้วยรูปภาพ
<a href="ปลายทางที่ต้องการ"><img src="รูปภาพ"> </a>
คำสั่งลิงค์ชุดแรกเมื่อคลิกลิงค์หน้าเพจเดิมจะเปลี่ยนไปในหน้าที่ต้องการ
แต่ถ้าต้องการให้ลิงค์แล้วไปเปิดหน้าใหม่ให้ใส่คำสั่ง target="_blank"
ตัวอย่าง
<a href="ปลายทางที่ต้องการ" target="_blank">..ข้อความ...</a>
คำสั่งตัวอักษรวิ่ง
<marquee>สิ่งที่ต้องการให้วิ่ง</marquee>
ตัวอย่าง
คำสั่งทำให้เส้นใต้ข้อความลิงค์ หรือรอบรูปที่ลิงค์หายไป
<STYLE TYPE="text/css">A {text-decoration: none;}--></STYLE>
คำสั่งขึ้นบรรทัดใหม่
<br>
คำสั่งย่อหน้า
<p>
ใส่เพลงพร้อมชุดเปิดปิด
<embed src="เพลง" loop="-1" controls="smallconsole" width=160 height=20>
ตัวอย่าง
|