» Vorstellung
      เรื่องราวส่วนตัว
 Biographie
    ประวัติส่วนตัว
 Husband คุณสามี
 Sons ลูกชาย
 Job อาชีพ
» Preiverleihung
     รางวัลการประกวด
 Hilfsbereite Thai 2005
    คนไทยน้ำใจดี
 MISS E-TECH
    ธิดาราตรีฟ้า-ขาว
» Schrifstellerin
    ผลงานเขียน
1. Zwiebel
      เจ้าหัวหอม
2. POGSAG
      เพจเจอร์
3. D-STAR
      วิทยุสื่อสารดิจิทัล
4. Sputnik 50
      ดาวเที่ยมสปุตนิก 50
5. Steuererklaerung
      ขอลดหย่อนภาษี
6. HTML
      การเขียนเพจ
7. Ueberweissung
       ส่งเงินไปเมืองไทย
8. Bundespräsidenten
      ประธานาธิบดี
9. Bundeskanzler
      นายกรัฐมนตรี
10. Bundeskabinett
        คณะรัฐบาล
11. Partei
        พรรคการเมือง
12. Ministerpräsidenten
        นายกรัฐมนตรีมลรัฐ
13. Wappen der Bundesländer
          เครื่องหมายประจำมลรัฐ
14. Bundesländ
         มลรัฐ
15. Bundesliga
        ฟุตบอลลีก้าเยอรมัน
16. Ostern Fest
         เทศกาลอีสเตอร์
17. Holocaust
» ART งานศิลป์
DRAWING
   ภาพวานดินสอดำ
WATERCOLOUR
   ภาพวาดสีน้ำ
ACRILIC
   ภาพวาดสีอคริลิท
ARTS
   งานศิลปะอื่น
» งานอดิเรกอื่นๆ
 Amateurfunk
    วิทยุสมัครเล่น
 Eintrachkt Frankfurt
    แฟนฟุตบอล Eintrachkt
 Reise
    ท่องเที่ยว
 Forum Diary
    ห้องสนทนา
 Astronomie
    กิจกรรมดูดาว
 Dolmetscherin
    ล่ามกิตติมศักดิ์
» Back Home
      กลับไปหน้าแรก
ท่านผู้เยี่ยมชมที่
Web Counters
[aktuelle Uhrzeit]
email an Benji, DO6BEN
ʁش?肁
Thank you
ความรู้ทั่วไปในการเขียน HTML
สารบัญ
บทที่ ๑ บทเริ่มต้น
บทที่ ๒ ภาษา HTML
บทที่ ๓ เริ่มสร้าง HTMLและการตัดบันทัดใหม่
บทที่ ๔ การกำหนดชื่อ
บทที่ ๕ การกำหนดพื้นที่เนื้อเรื่อง
บทที่ ๖ การกำหนดขนาดตัวอักษร
บทที่ ๗ ตัวอย่างสีที่ใช้งานได้บนอินเตอร์เน็ต
บทที่ ๘ การกำหนดสีของตัวอักษรโดยคำสั่ง
บทที่ ๙ การกำหนดรูปแบบอักษร
บทที่ ๑๐ การกำหนดรูปแบบอักษร
บทที่ ๑๑ การตีเส้นแบ่งหน้ากระดาษ
บทที่ ๑๒ การกำหนดย่อหน้า
บทที่ ๑๓ เครื่องหมายพิเศษ
บทที่ ๑๔ การใช้คำสั่ง ...<./pre>
บทที่ ๑๕ การกำหนดเครื่องหมายนำหน้าข้อความ (list)
บทที่ ๑๖ การสร้างตาราง-๑
บทที่ ๑๗ การสร้างตาราง-๒
บทที่ ๑๘ คำสั่งลูกเล่นแต่งเพจ

บทที่ ๑ บทเริ่มต้น


ทั่วไป

           Internet เป็นเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลก และไม่มีขอบเขตใดๆ ที่จะกำหนดขีดความสามารถของ Internet ได้

           แฟ้มเอกสารบน Internet จะเรียกว่า Homepage หรือ Webpage และถ้า Webpage หลายๆ Webpage ที่เป็นเนื้อเรื่องที่เกี่ยวข้องกัน หรือเนื้อเรื่องเดียวกัน และเก็บในที่เก็บเดียวกัน จะเรียกว่า Website

           Webpage แต่ละWebpage จะประกอบด้วย

  • ข้อความ     คือ ส่วนที่เป็นตัวอักษร และข่าวสาร หรือสาระของ Webpage
  • รูปภาพ      คือ ส่วนที่เป็นภาพ ซึ่งรูปภาพนี้อาจะเป็นสาระของ Webpage หรือ มีไว้เพื่อความสวยงามของ Webpage
  • พื้นพลัง     คือ ส่วนที่เป็นพื้นหลังของ Webpage และมีไว้เพื่อความสวยงามของ Webpage เท่านั้น

เปรียบเทียบ Webpage กับแฟ้มเอกสารทั่วๆ ไป

          แฟ้ม Webpage จะแตกต่างกับแฟ้มเอกสารทั่วไป กรณีที่มีรูปภาพเข้ามาเกี่ยวข้องกับแฟ้มงาน โดยแฟ้ม Webpage จะเก็บรูปภาพและข้อความรวมอยู่ในแฟ้มเดียวกัน แต่แฟ้ม Webpage จะเก็บสร้างแฟ้ม ๒ แฟ้ม คือ

  1. แฟ้มข้อความ
  2. แฟ้มรูปภาพ

           แฟ้มข้อความจะมีคำสั่งเชื่อมโยงนำรูปภาพจากแฟ้มรูปภาพมาแสดงในแฟ้มข้อความได้ ดังนั้น ถ้าผู้สร้างหรือใช้แฟ้มงาน สามารถแก้ไขรูปภาพได้ง่าย เพียงแต่กำหนดชื่อแฟ้มรูปภาพให้คงเดิมไว้เท่านั้น และนอกจากนี้ Webpage อาจจะส่วนประกอบอื่นๆ เช่น

  1. Multimedia      คือ รูปภาพที่มีเสียงประกอบกัน ซึ่งจะเรียกว่า Audio และ Video
  2. Counter          คือ จำนวนคนที่เข้ามาเยี่ยม Webpage
  3. Cool Links      คือ การเชื่อมโยงไปยัง Webpage อื่นๆ หรือการเชื่อมโยงไปยังส่วนอื่นๆ ของ Webpage เดียวกัน
  4. Forms             คือ แบบฟอร์มที่ผู้เข้าเยี่ยมชม และส่งกลับไปยัง Webpage ต้นทาง
  5. Frames           คือ การแบ่งหน้าจอเป็นส่วนๆ แต่ละส่วนจะแสดงข้อมูลที่แตกต่างกันและอิสระกัน
  6. Image Maps    คือ รูปภาพขนาดใหญ่ที่กำหนดให้ส่วนต่างๆ ของภาพของรูปภาพสามารถเชื่อมโยงไปยัง Webpage อื่นๆ
  7. Java Applets   คือ โปรแกรมสำเร็จรูปเล็กๆ ที่นำมาใช้งานบน Webpage และทำให้ Webpage มีประสิทธิภาพสูงขึ้น
up

บทที่ ๒ ภาษา HTML



         แฟ้ม Webpage เป็นแฟ้มที่สร้างโดยภาษา HyperText Matkup Language เรียกย่อๆ ว่า HTML ซึ่งเป็นภาษาเขียนโปรแกรมแบบง่ายๆ และสามารถสร้างโดยโปรแกรมสร้างเอกสารง่าย เช่น NodePad หรือ โปรแกรมอื่นๆ ที่สามารถบันทึกแฟ้มงานในรูปของ ASCII หรือ Text เท่านั้น

ลักษณะภาษา HTML

        ภาษา HTML จะเป็นคำสั่งง่ายๆ และมีข้อกำหนดง่ายๆ ดังนี้

  1. คำสั่งจะอยู่ในเครื่องหมาย          <...>          เรียกว่า Tag (Tag-Open , Tag-Close ตามลำดับ)
  2. คำสั่งของภาษา html จะใช้อักษรตัวเล็กหรือตัวใหญ่ก็ได้
  3. อักษรตัวแรกของคำสั่ง และเครื่องหมาย < จะต้องพิมพ์ติดกัน จะเว้นวรรคไม่ได้ เช่น <html> จะพิมพ์เป็น < html> (มีเว้นวรรคระหว่าง < และอักษร h ) ไม่ได้
  4. คำสั่งแต่ละคำสั่ง จะมีคำสั่ง "เริ่มทำงาน" และ "สิ้นสุดการทำงาน" โดยคำสั่งสิ้นสุดการทำงานจะเป็นคำสั่งเดียวกับคำสั่ง "เริ่มการทำงาน" โดยคำสั่ง "สิ้นสุดการทำงาน" จะมีเครื่องหมาย / หลังเครื่องหมาย < เช่น

         <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

บทที่ ๖ การกำหนดขนาดตัวอักษร



ขนาดตัวอักษรบนอินเตอร์เน็ตจะกำหนดได้ ๒ ด้าน คือ

  • ด้าน Browser จะกำหนดขนาดอักษรได้ ๕ ขนาด คือ

    • Largest
    • Larger
    • Medium
    • Smaller
    • Smallest
  • ด้านโปรแกรม ซึ่งกำหนดโดยผู้เขียนโปรแกรม จะกำหนดขนาดได้ตั้งแต่ขนาด ๑ ซึ่งเป็นขนาดที่เล็กที่สุดไปจนถึงขนาดที่ ๗

คำสั่งกำหนดขนาดอักษร

<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 แต่อย่างไร
สีของตัวอักษรจะแบ่งเป็นกรณีต่างๆ ดังนี้

  1. สีของตัวอักษรทั่วไป โดยสามารถกำหนดได้จากคำสั่ง
    <body text="color">
    .....</body>
  2. สีของข้อความที่เข้าคำสั่ง Hyperlink (link) โดยสามารถกำหนดได้จากคำสั่ง
    <body link="color">
    .....</body>
  3. สีของข้อความที่เข้าคำสั่ง Hyperlink และได้ถูก Link แล้ว (Visited Link) โดยสามารถกำหนดได้จากคำสั่ง
    <body vlink="color">
    .....</body>
  4. สีของข้อความที่เข้าคำสั่ง Hyperlink และมีเม้าท์ไปวางทับ (Active Link) ซึ่งสีของข้อความจะเปลี่ยนไปชั่วขณะ
    โดยสามารถกำหนดได้จากคำสั่ง
    <body alink="color">.....</body>
  5. ถ้ารวมคำสั่งทั้งหมดเข้าด้วยกัน จะได้คำสั่ง ดังนี้
    <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>
ข้อความต่างๆ ถ้าไม่กำหนดสีของตัวอักษร โปรแกรมจะถือว่าสีของอักษรเป็นสีดำ ยกเว้นจะกำหนดเป็นสีอื่นๆ ซึ่งกำหนดได้ ดังนี้

  1. <font color=red> ข้อความอักษรสีแดง </font>
  2. <font color=green> ข้อความอักษรสีเขียว </font>
  3. <font color=blue> ข้อความอักษรสีน้ำเงิน </font>
  4. ข้อความในบันทัดเดียวกัน สามารถผสมสีหลายสีได้ เช่น <font color=red> สีแดง </font> <font color=green> สีเขียว </font>
</font>
</body>
</html>

ผลที่ได้บนหน้าจอคอมพิวเตอร์

ข้อความต่างๆ ถ้าไม่กำหนดสีของตัวอักษร โปรแกรมจะถือว่าสีของอักษรเป็นสีดำ ยกเว้นจะกำหนดเป็นสีอื่นๆ ซึ่งกำหนดได้ ดังนี้
  1. ข้อความอักษรสีแดง
  2. ข้อความอักษรสีเขียว
  3. ข้อความอักษรสีน้ำเงิน
  4. ข้อความในบันทัดเดียวกัน สามารถผสมสีหลายสีได้ เช่น สีแดง สีเขียว

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 ปิด และมีตัวประกอบ ดังนี้
  1. size คือ ความหนาของเส้น กำหนดได้หลายขยาด
  2. width คือ ความยาวของเส้น ควรกำหนดเเป็น % โดย width="100%" จะเป็นเส้นตรงจะเท่ากับความกว้างของหน้ากว้างโปรแกรม
  3. color คือ การกำหนดสีของเส้น
  4. 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 จะมีเครื่องหมายบางตัวไม่สามารถพิมพ์โดยตรงได้ เพราะจะกลายเป็นการพิมพ์เป็รคำสั่ง ซึ่งจะแก้ไขโดยการใช้รหัสของเครื่องนั้นๆแทน

เครื่องหมายมากกว่าและน้อยกว่า

< เครื่องหมายน้อยกว่า ใช้รหัส &lt;
> เครื่องหมายมากกว่า ใช้รหัส &gt;

การเว้นวรรคในภาษา HTML

           ในพิมพ์ภาษา HTML ไม่ว่าจะเคาะแป้น spacebar กี่ครั้ง แต่ใน HTML จะมีเพียง 1 spacebar เท่านั้นดังนั้น ถ้าต้องการให้มี spacebar มากกว่า 1 ครั้ง จะต้องพิมพ์เป็นรหัส คือ &nbsp;
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 คือ รูปแบบของตังเลข ซึ่งมี ดังนี้

  1. ไม่กำหนด type จะเป็นการกำหนดแบบตังเลขธรรมดา
  2. I แบบเลขโรมันใหญ่
  3. A แบบอักษรตัวใหญ่
  4. a แบบอักษรตัวเล็ก
  5. 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

การกำหนดการวางตำแหน่งตาราง

         การกำหนดการวางตำแหน่งตาราง จะกำหนดตำแหน่งได้ ๓ ตำแหน่ง ดังนี้

  1. กำหนดให้ตาราง ชิดซ้าย ของ homepage
  2. กำหนดให้ตาราง อยู่ตรงกลาง ของ homepage
  3. กำหนดให้ตาราง ชิดขวา ของ 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

ความรู้การกำหนดความกว้างของตาราง

ความรู้การกำหนด ความกว้าง ของตาราง จะมีกำหนดได้ ๒ วิธี ดังนี้

  1. กำหนดโดย ความยาวข้อความ ซึ่งความกว้างของเซลจะปรับความกว้างโดยอัตโนมัติ ตามความยาวของข้อความ
  2. กำหนดเป็น % ของความกว้างของ 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>

ผลที่ได้

 
width=75% width=75%
 

up

การกำหนดตำแหน่งข้อความในตาราง

ข้อความในช่อง cell สามารถจัดวางได้เหมือนกับการจัดวางข้อความทั่วๆ ไป ดังนี้

  1. ข้อความ ชิดซ้าย ของช่องเซล
  2. ข้อความ จัดกลาง ของช่องเซล
  3. ข้อความ ชิดขวา ของช่องเซล

ตัวอย่างการจัดข้อความในช่อง 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 คือ ระยะห่างระหว่างเซล และมีผลให้กรอบระหว่างเซลกว้างมากขึ้น

ตัวอย่างการใช้ 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

การกำหนดข้อความกำกับตาราง

    ข้อความกำกับตาราง ถือว่าเป็นส่วนหนึ่งของตาราง แต่ข้อความดังกล่าวจะอยู่ นอกตาราง และกำหนดตำแหน่งข้อความดังกล่าวได้ ๒ ตำแหน่ง คือ
    1. ข้อความอยู่ เหนือตาราง
    2. ข้อความอยู่ ใต้ตาราง

ตัวอย่าง

    <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 โดยสามารถนำภาพเป็นพื้นหลังในตารางได้ ๒ คำสั่ง คือ
  1. พื้นหลังในคำสั่งตาราง <table background=" ชื่อภาพที่นำมาใช้เป็นพื้นหลัง " > ...... </table>
  2. พื้นหลังในคำสั่งเซล <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 เป็นพิเศษบางกรณีเท่านั้น ซึ่งการรวมเซลหลายๆ เซล ให้เป็น ๑ เซล จะมีรูปแบบ ดังนี้
  1. รวมเซลติดๆกัน ในแนวนอนให้เป็น ๑ เซล
    <td colspan= "จำนวนเซลติดกันแนวนอนที่ต้องการรวมเป็น๑เซล" > .................... </td>
  2. รวมเซลติดๆกัน ในแนวตั้งให้เป็น ๑ เซล
    <td rowspan= "จำนวนเซลติดกันแนวตั้งที่ต้องการรวมเป็น๑เซล" > .................... </td>
  3. รวมเซลติดๆกัน ในแนวนอนและแนวตั้งให้เป็น ๑ เซล
    <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

การนำภาพเข้าตาราง

       การนำภาพมาใส่ลงในตาราง คือ การนำภาพมาใส่ลงในช่องเซลโดยมีหลักการง่ายๆ ดังนี้
  1. ไม่ต้องกำหนดความกว้างของตาราง width= ลงใน<table>.........</table>
  2. กำหนดขนาดของเป็น pixel แทน % และกำหนดเฉพาะด้านใดด้านหนึ่งเท่านั้น และ browser จะคำนวณด้านที่เหลือเอง
  3. กำหนด cellpadding ให้เหมาะสม ถ้า cellpadding=0 จะได้ภาพเต็มช่องเซล
  4. เนื่องจากตารางจะปรับความกว้างให้พอดีกับ ความกว้างของ 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 ในตาราง (ภาพเล็กที่ link ไปหาภาพใหญ่)

       การสร้าง thumbnails คือ การนำภาพขนาดใหญ่ที่ ถูกย่อขนาดให้เล็ก และนำมาแสดงใน homepage และ มีการเชื่อมโยงจากภาพเล็กไปสู่ภาพขนาดใหญ่ ซึ่งจะให้ผู้ใช้อินเตอร์เน็ตจะได้ดูภาพตัวอย่างขนาดเล็ก และถ้าพอใจที่จะดูภาพขนาดใหญ่ภาพใด ก็สามารถเรียกคำสั่งเชื่อมโยงไปยังภาพใหญ่ได้ตามต้องการ
       การสร้าง thumbnails จะมีหลักการดังนี้
  1. ไม่ต้องกำหนด width ของตาราง
  2. กำหนด width ของภาพทุกภาพจะต้องกำหนดให้เท่ากัน และภาพที่ได้จะเป็นภาพตัวอย่างแสดงออกทาง homepage
  3. กำหนด คำสั่งเชื่อมโยง จาก ภาพตัวอย่าง ไปยังภาพจริง
  4. สามารถกำหนดข้อความใต้ภาพ โดยพิมพ์ข้อความตามปกติ และใช้คำสั่ง <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 คือ มีการ จัดกลางด้านซ้าย-ขวา และ บน-ล่าง
       การจัดข้อความในช่องเซล จะมี ๒ กรณี คือ
  1. การจัดกลางในแนวนอน
  2. การจัดกลางในแนวตั้ง
           การจัดกลางทั้งสองแนว จะเป็นคำสั่งช่วยในคำสั่ง <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>
ตัวอย่าง

ลิงค์ส่งอีเมล์
<a href="mailto:ที่อยู่อีเมล์">ข้อความหรือรูปภาพ</a>

คำสั่งเพิ่มเติมกำหนดตำแหน่งให้รูปภาพที่ผสมอยู่กับข้อความ
align="left" หรือ align="right"
<img src="รูปภาพ"align="left">
ตัวอย่าง

การเฉลิมฉลองของชาวคริสต์ในเทศกาลอีสเตอร์นั้น เกิดจากการนำเอาหลายประพณีมารวมกันซึ่งโดยรวมแล้วมีความเกี่ยวข้องกันระหว่างเทศกาลอีสเตอร์ จากตำนานต่างๆซึ่งมาจากที่มาทางศาสนาที่แตกต่างกัน และไม่ได้เกี่ยวข้องกับความเชื่อทางศาสนาคริสต์ด้วย

มีการกล่าวว่าเทศกาลเฉลิมฉลองอีสเตอร์ เป็นการแสดงความระลึกต่อเทพธิดา อีสเทร (Eastre / Ostara) เทพธิดาแห่งฤดูใบไม้ผลิดของชาวเผ่า แซคซันโบราณ (Saxon / Altsaechsisch) ซึ่งในอดีตอาศัยอยู่ทางตอนเหนือของประเทศเยอรมัน จนในศตวรรษที่ 2 ได้มีคณะผู้สอนศาสนาคริสต์ เข้ามาในเขตแคว้นแห่งนี้เพื่อจะเผยแผ่คริสต์ศาสนา แต่ถ้าจะเปลี่ยนพิธีกรรม และความเชื่อดั่งเดิมของชาวเผ่านี้โดยทันทีคงเป็นไปไม่ได้ และคงจะถูกฆ่าตายเสียก่อน เฉพาะฉะนั้นผู้สอนศาสนาเหล่านั้นจึงต้องใช้ความอดทน ความประนีประนอม ความรอบคอบ และความเฉลี่ยวฉลาด นำมาผสมผสานกับพิธีฉลองการฟื้นคืนชีพของพระเยซูคริสต์ ในการชักจูงอย่างค่อยเป็นค่อยไปจนกว่าพวกเขาจะนับถือ และเชื่อในพระผู้เป็นเจ้าของคริสต์ศาสนา โดยที่ยังคงรักษาเทศกาลอีสเตอร์ดั่งเดิมอยู่ แล้วด้วยความพอเหมาะพอเจาะที่วันแห่งการฟื้นคืนชีพของพระเยซู อยู่ในช่วงเวลาใกล้เคียงกับเทศกาลอีสเตอร์นั้น จึงเป็นโอกาสให้ผู้สอนศาสนาเหล่านั้นค่อยๆพยายามปรับเปลี่ยน และรวมความเป็นคริสต์ศาสนาในเทศกาลอีสเตอร์ จนในที่สุดก็เป็นผลสำเร็จ เมื่อชนเผ่าแซคซันอพยมออกไปทั่วยุโรป ก็นำทั้งศาสนาคริสต์ และเทศกาลอีสเตอร์นี้ เผยแผ่ออกไปด้วย

up

ปล.หน้าเพจข้อมูลนี้ไม่ได้เขียนเองหลอกไปลอกจากอินเตอร์เน็จมา แต่นำมาเปะและแต่งเติมเพื่อเพือนๆ ไว้เรียนเขียนเพจจากเบญนะ

คลิก ตามมาเรียนกันเลยจ๊ะ