การสร้างเวบ็ เพจด้วยภาษา
HTML
ค ว า ม รู ้เ บ้ ื อ ง ต ้น
ใบความรู้ท่ี 1
HTML เบื้องต้น
ความหมายของ HTML
HTML ยอ่ มาจาก Hypertext Markup Language
โครงสร้างของ HTML
โครงสร้างของภาษา HTML แบ่งเป็น 2 ส่วน คือ
1. ส่วนท่ีเป็นขอ้ ความ จะเป็นลกั ษณะของขอ้ ความทวั่ ๆ ไป
2. ส่วนที่เป็นคาสง่ั จะเป็นส่วนที่ใชใ้ นการกาหนดรูปแบบของขอ้ ความซ่ึงจะเรียกวา่ Tag หรือ แทก็
โดยจะอยใู่ นเคร่ืองหมาย < และ >
รูปแบบโครงสร้าง HTML
โครงสร้างของเอกสาร HTML จะประกอบไดด้ ว้ ย Tag เปิ ด และ Tag ปิ ด ต่าง ๆ ดงั น้ี
Tag เปิ ด
<html>
<head>
<title>….</title> ส่วนหวั ของโปรแกรม
จุดเร่ิมตน้ และส้ินสุด </head>
ของเอกสาร HTML <body>
….
ส่วนเน้ือหาของโปรแกรม
</body>
</html>
Tag ปิ ด
คาสั่งเร่ิมต้น
<html> ……. </html>
คาสงั่ <html> เป็นคาสงั่ เริ่มตน้ ในการเขียนโปรแกรม และคาสงั่ </html> เป็นการส้ินสุด
ของโปรแกรม
ส่ วนหัวของโปรแกรม
<head> …….. </head>
คาสง่ั <head> เป็นคาสงั่ ท่ีใชก้ าหนดขอ้ ความในส่วนท่ีเป็นช่ือเร่ืองของไฟล์ HTML และ
ภายในคาสง่ั จะมคี าสง่ั ยอ่ ยอีกคาสงั่ หน่ึง คือ <title> …… </title>
กาหนดข้อความในส่วนหัวของโปรแกรมหรือไตเติล้ บาร์
<title> …… </title>
คาสงั่ <title> เป็ นคาสัง่ ที่แสดงช่ือของเอกสาร หรือชื่อเร่ืองของไฟล์ HTML ซ่ึงขอ้ ความ
ภายในคาสงั่ จะปรากฎหรือแสดงผลในส่วนของไตเต้ิลบาร์ (Title Bar) ของโปรแกรมเวบ็ เบราเซอร์
ส่ วนเนื้อหาของโปรแกรม
<body> …… </body>
ส่วน <body> เป็ นส่วนท่ีสาคญั ในการแสดงผลในเว็บเบราเซอร์ ซ่ึงจะประกอบไปดว้ ย
ตวั อกั ษร รูปภาพกราฟิ กต่าง ๆ
ข้นั ตอนการสร้างไฟล์ HTML ด้วย Notepad
ไปท่ีเมนู Start Program Accessories Notepad
การบนั ทกึ ข้อมูล
1. ไปท่ี File แลว้ เลือก Save as
2. จะปรากฎไดอะลอ็ กบ็อกซ์ Save ข้ึนมา จากน้ันไปที่ Save as type ทาการคลิกที่หัวลูกศรและ
ทาการเลอื กที่ตวั เลือกใหเ้ ป็น All File (*.*)
3. จากน้นั ทาการบนั ทึกชื่อไฟลล์ งในช่อง File name : โดยบนั ทึกช่ือไฟลเ์ อกสารภาษา HTML โดย
จะตอ้ งมกี ารใส่นามสกุล .html ต่อทา้ ยชื่อที่ไดท้ าการต้งั ก่อนหนา้ น้ีดว้ ย
4. คลกิ Save
ใบความรทู้ ่ี 2
การจัดรูปแบบตัวอักษร
1. การใสข่ อ้ ความ
สาหรับการใส่ข้อความลงในเวบ็ เพจ ดว้ ยภาษา HTML นนั้ ขอ้ ความท่ีตอ้ งการจะ
ใหป้ รากฎบนจอภาพ จะต้องใส่ขอ้ ความมาในส่วนของ <body>… </body> รวมถึง
การจัดรปู แบบขอ้ ความ ตวั อักษร รูปแบบต่าง ๆ
การใสข่ อ้ ความ สามารถพิมพ์ตัวอกั ษรหรือข้อความท่ตี ้องการใส่ในหนา้ เว็บเพจใน
ส่วน <body>… </body> ดงั ตัวอย่างต่อไป
2. การทาตัวอักษรหนา เอยี ง ขดี เสน้ ใต้
หลงั จากท่ีเราได้ทาการใส่ขอ้ ความแลว้ จะเห็นว่าข้อความทใี่ สไ่ ปนน้ั ยังไม่มีการ
จดั รปู แบบของข้อความแต่อยา่ งได้ ในการจัดรปู แบบตัวอักษรหรอื ข้อความใน
ภาษา HTML น้ันจะต้องมี Tag คาสั่งสาหรบั การจดั รูปแบบตวั อักษร หรอื ขอ้ ความ
โดยเฉพาะ
การจัดรูปแบบตัวอักษร รูปแบบแรก คอื การเน้นข้อความในเวบ็ เพจ เชน่ การเนน้
ข้อความทส่ี าคญั หรอื ตอ้ งการแสดงว่าขอ้ ความนัน้ เป็นสว่ นหวั ขอ้ หรอื หวั เรื่อง ของ
เอกสาร จะใชค้ าสง่ั ดังนี้
ตวั หนา = ใชก้ าหนดข้อความท่ีอยภู่ ายในคาส่ัง ใหแ้ สดงผลดว้ ยตัวอักษรแบบ
ตัวหนา (bold) มจี ดุ ประสงค์เพื่อเนน้ ขอ้ ความในประโยคน้นั ใช้ Tag <b>...</b>
ตัวเอียง = ใชก้ าหนดข้อความทีอ่ ยู่ภายในคาสง่ั ใหแ้ สดงผลดว้ ยตัวอักษรแบบเอน
(Italic) มีจุดประสงคเ์ พ่อื เนน้ ขอ้ ความในประโยคน้นั ใช้ Tag <i>...</i>
ขีดเส้นใต้ = ใชก้ าหนดข้อความทอี่ ยู่ภายในคาสั่ง ใหแ้ สดงผลดว้ ยตัวอกั ษรขีดเส้น
ใต้ (underline) มจี ุดประสงคเ์ พ่ือเนน้ ขอ้ ความในประโยคน้ัน ใช้ Tag <u>...</u>
ทดสอบการจัดรูปแบบขอ้ ความดว้ ยการเนน้ ข้อความ
3. การกาหนดขนาดตัวอกั ษร
การจัดรปู แบบตัวอักษรหรือข้อความ ในเว็บเพจด้วยภาษา HTML น้ัน เรา
สามารถกาหนดขนาดของตัวอักษรตามความตอ้ งการและเหมาะสมกับแต่ละลักษณะ
ของเว็บเพจ และการกาหนดขนาดของตวั อกั ษร ขอ้ ความสามารถกาหนดได้หลายขนาด
ขนาดของตวั อักษร จะกาหนดโดยใชต้ ัวเลขทม่ี ีค่า 1 - 7 เป็นตวั กาหนด โดยค่า
ตัวเลข 1 และ 2 จะเปน็ การย่อขนาดของตัวอักษร ค่าตวั เลข 3 ตวั อักษรจะอยใู่ นระดบั
มาตราฐาน และค่าตวั เลข 4 ถงึ 7 จะเปน็ ตัวอักษรใหญ่ขนึ้ ตามลาดบั
คาสง่ั ทีใ่ ช้ คำส่งั จดั รูปแบบ (font) ตำมดว้ ย คุณสมบัตขิ องรูปแบบ (attribute) ซง่ึ
ในการกาหนดขนาดตัวอกั ษร จะใช้ attribute ช่ือ size
<font size="ค่าตัวเลขกาหนดขนาดของตวั อักษร">...ขอ้ ความ...</font>
นอกจากจะกาหนดขนาดของตัวอกั ษร ขอ้ ความ ด้วยคาสงั่ font size แลว้ ใน
ภาษา HTML ยังสามารถกาหนดขนาดของข้อความให้มลี ักษณะเป็นหัวเรือ่ ง โดยเรยี ง
ต้ังแต่หัวเรือ่ งใหญ่ ไลล่ งมาถึงหัวเร่อื งทีเ่ ล็กสุดได้
การกาหนดหัวเรอ่ื ง สามารถกาหนดได้ โดยใช้คาส่งั ดังนี้
<h1>หัวเร่อื งขนาดใหญ่ 1</h1>
<h2>หวั เรอ่ื งขนาดใหญ่ 2</h2>
<h3>หัวเร่อื งขนาดใหญ่ 3</h3>
<h4>หัวเร่อื งขนาดใหญ่ 4</h4>
<h5>หัวเรือ่ งขนาดใหญ่ 5</h5>
<h6>หัวเรอื่ งขนาดใหญ่ 6</h6>
โดยที่ <h1> นนั้ จะมขี นาดใหญ่ท่ีสดุ ส่วน <h6> จะมีขนาดเลก็ ท่สี ุด
ทดสอบคาส่ังกาหนดขนาดตัวอักษร และกาหนดหวั เรอื่ ง
<html><head><title> โฮมเพจของขา้ พเจา้ </title>
</head>
<body>
<font size=5>กาหนดขนาดข้อความหของหนา้ เวบ็ เพจเทา่ กับ 5</font><br>
<font size=3>การจัดรปู แบบตัวอักษรหรือข้อความ (font) ในหนา้ เวบ็ เพจของเรา โดยใชภ้ าษา HTML
นั้นเราสามารถขนาดของตัวอกั ษรตามความต้องการและเหมาะสมกบั แตล่ ะลกั ษณะของเว็บ เพจ และการ
กาหนดขนาดของตวั อักษร ขอ้ ความ นนั้ กาหนดได้ขนาดของตัวอักษรหลายแบบ
ในการกาหนดขนาดจะใช้ตวั เลขซึ่งจะมีคา่ 1 - 7 เปน็ ตวั กาหนด โดยค่าตัวเลข 1 และ 2 จะเป็นการ
ยอ่ ขนาดของตวั อกั ษร คา่ ตวั เลข 3 ตวั อกั ษรจะอย่ใู นระดับมาตราฐาน และค่าตวั เลข 4 ถงึ 7 นั้นจะเปน็
การขยายขนาด</font> <br>
<font size=4>การกาหนดขนาดของข้อความให้มลี กั ษณะเปน็ หวั เร่ือง </font>
สามารถกาหนดได้ โดยใช้คาสงั่ ดังน<้ี br>
<h1>หัวเรอื่ งขนาดใหญ่ 1</h1><br>
<h2>หัวเรอ่ื งขนาดใหญ่ 2</h2> <br>
<h3>หัวเรอื่ งขนาดใหญ่ 3</h3> <br>
<h4>หัวเรอื่ งขนาดใหญ่ 4</h4> <br>
<h5>หัวเรอ่ื งขนาดใหญ่ 5</h5> <br>
<h6>หัวเรอ่ื งขนาดใหญ่ 6</h6>
</body>
</html>
4. การกาหนดรปู แบบและสีของตัวอักษร
ในการจัดรูปแบบของข้อความหรือตัวอกั ษรนัน้ การใช้สีกเ็ ป็นสว่ นสาคัญเชน่ กนั ใน
การจัดรปู แบบ ซ่งึ ในการกาหนดรปู แบบสามารถกาหนดได้ ดงั น้ี
การกาหนดรูปแบบ
ในการกาหนดรปู แบบของตวั อักษร หรอื ขอ้ ความ สามารถกาหนดได้ด้วย
คณุ สมบตั ิ(attribute) ชอื่ face แลว้ ตามดว้ ยชื่อ font ท่ีเราตอ้ งการ เอกสารเว็บ
กาหนดฟอนต์ ไดห้ ลายฟอนต์ โดยโปรแกรมเบราเซอรจ์ ะมีการตรวจสอบการใช้ฟอนตใ์ ห้
อตั โนมตั ิ
เราสามารถการกาหนดรปู แบบของตวั อกั ษร ได้โดยใช้คาสง่ั
<font face="ชอ่ื font">..ขอ้ ความต้องการกาหนด font..</font>
font สาหรับข้อความภาษาไทย/อังกฤษ ทเี่ หมาะสมได้แก่ MS Sans Serif,
Microsoft Sans Serif, Thonburi และ font สาหรับข้อความภาษาองั กฤษทเี่ หมาะสม
คือ Arial, Helvetica, sans-serif ชนดิ ของ font ปกติ = MS Sans Serif
การกาหนดสี
การกาหนดสขี องตัวอกั ษร หรอื ข้อความที่ตอ้ งการนั้น คาสง่ั ในภาษา HTML จะ
ใชค้ ณุ สมบัติ (attribute) สาหลบั กาหนดสีท่ชี อ่ื color
การกาหนดสีของตวั อักษรหรอื ข้อความ นัน้ จะสามารถกาหนดได้ 2 แบบ ดังน้ี
1. กาหนดโดยใชช้ อ่ื สี เชน่ red, yellow, blue หรอื pink เป็นตน้
2. การกาหนดสีโดยระบุชือ่ สีแบบนี้จะมีข้อจากดั มาก เพราะไมส่ ามารถใชโ้ ทนสี
ได้มากเทา่ ที่ใจตอ้ งการ (จะใช้ได้ประมาณ 16 สี) ถา้ ต้องการใหม้ ีสมี ากกว่านี้จะต้องใช้
การกาหนดเปน็ รหสั คา่ สดี ว้ ยระบบตวั เลขฐานสิบหก กาหนดค่าสขี องแสง (RGB)
เลขฐานสบิ หกประกอบดว้ ยตวั เลข 0 1 2 3 4 5 6 7 8 9 และตัวอักษร a b c d
e f ซึง่ จะแทนคา่ สตี ง้ั แต่มดื สดุ (คา่ เป็น 0) จนถึงสว่างสดุ (ค่าเป็น f) ค่าสีตวั เลขฐานสิบ
หกจะประกอบดว้ ยกลมุ่ ตวั เลข 2 ตวั 3 ชุด แทนค่าสี RR GG BB และมเี คร่อื งหมาย #
กากบั หน้าตัวเลขดังตัวอยา่ งสี #RRGGBB (code สีเพิ่มเติม)
คาสงั่ ทีใ่ ช้คอื
<font color="ชอ่ื สี หรือ code สี ทีต่ ้องการ">..........</font>
ทดสอบการกาหนด font และสตี ัวอกั ษร
แหล่งท่ีมาของข้อมลู : https://pirun.ku.ac.th
ใบความรู้ท่ี 3
การจัดรปู แบบเอกสาร
การจัดรูปแบบของเอกสาร HTML โดยโปรแกรม notepad จะไม่เหมือนกบั การจัดในเอก
สารน่ื เชน่ เอกสาร Microsoft word คือ เม่ือต้องการขึน้ บรรทัดใหม่ ในเอกสาร Microsoft
word จะใช้ ปมุ่ Enter แตใ่ นเอกสาร HTML การใช้โปรแกรม notepad เมอื่ ใชป้ มุ่ Enter
ข้อความในเอกสารกจ็ ะเรยี งต่อกันไปเร่อื ย ๆ ไมท่ าการขึ้นบรรทดั ใหม่ให้ เนอื่ งจากภาษา
HTML ไม่สามารถรับรูไ้ ด้ว่าจะมีการข้นึ บรรทัดใหม่ ดังนน้ั จงึ ต้องมคี าส่งั สาหรบั สงั่ การให้ขึ้น
บรรทัดใหม่ จะใหผ้ ลเสมือนการกด Enter บนคยี ์บอรด์ ของเอกสาร Microsoft word ทงั่ ไป
ในการจัดย่อหนา้ และการเว้นวรรคก็ตามในภาษา HTML เช่นเดียวกัน จาเป็นตอ้ งมีคาสั่ง
สาหรบั การจัดรูปแบบเอกสาร HTML ดว้ ย เช่น การส่งั ให้มกี ารเว้นวรรคของข้อความ ภาษา
HTML จะสามารถรับรกู้ ารเวน้ วรรคไดเพียง 1 วรรคเทา่ นั้นเพือ่ ให้การจัดรูปแบบเอกสาร
HTML เรียบรอ้ ย เป็นระเบยี บและสวยงาม จึงจาเปน็ ในการเรยี นรู้คาสัง่ สาหรับการจดั รูปแบบ
หนา้ เอกสาร
1. การขึ้นบรรทัดใหม่ (Break)
คาส่ังแรกในการจดั รปู แบบเอกสาร ในภาษา HTML คือ การขน้ึ บรรทัดใหม่ จะใช้
คาสั่ง <br> จะให้ผลเสมอื นการกด Enter บนคยี ์บอรด์
คาสง่ั <br> ส่วนใหญ่มกั นิยมจะวางไวใ้ นตาแหน่งสุดทา้ ยของประโยค โดยตอ้ งการให้
แสดงผลประโยคใหมใ่ นบรรทดั ตอ่ มา คาส่ัง <br> จะเปน็ คาสัง่ ทไ่ี ม่ตอ้ งมคี าส่งั ปดิ (Single Tag)
ทดสอบการใช้คาสั่งขน้ึ บรรทัดใหม่ ด้วยคาสั่ง <br>
2. การจดั ย่อหนา้
การจัดย่อหนา้ ในเอกสาร HTML จะใชค้ าสัง่ <p> เป็นคาสั่งทส่ี ง่ั ใหโ้ ปรแกรมเวบ็ เบรา
เซอรข์ ึน้ ยอ่ หน้าใหม่ (paragraph)
คาส่ัง <p> จะเป็นการจัดเอกสารขึน้ บรรทดั ใหมเ่ ช่นเดียวกับการใช้คาสัง่ <br> แต่จะ
แตกต่างทช่ี อ่ งวา่ งระหว่างบรรทัดมากกว่าคาส่ัง <br>
และสามารถกาหนดหารเยื้องของขอ้ ความในบรรทัดโดยใช้คาสั่ง <dd> วางหนา้ ข้อความ
ท่ีต้องการใหเ้ ย้ืองหน้า หรือใชร้ ว่ มกับและมีการจดั ย่อหน้า คาส่งั <br> หรอื คาสงั่ <p> ได้
ทดสอบการจัดย่อหน้า
<html>
<head><title> โฮมเพจของขา้ พเจา้ </title>
</head>
<body>
<font face=angsananew size=5 color=blue>การจดั รูปแบบเอกสาร</font><br>
<font size=3 color=9900ff>คาสง่ั ทใ่ี ชส้ าหรบั ขึ้นบรรทดั ใหม่ จะใช้คาส่ัง br <br>
คาสง่ั br สว่ นใหญม่ กั นยิ มจะวางไวใ้ นตาแหนง่ สุดท้ายของประโยค โดยตอ้ งการใหแ้ สดงผล
ประโยคใหมใ่ นบรรทัดตอ่ มา
</font>
<p> <font size=4 color=6600ff>การจดั ย่อหนา้ ในเอกสาร HTML จะคาสงั่ ที่ ซง่ึ เปน็ คาสง่ั ที่
ส่ังใหโ้ ปรแกรมเว็บเบราเซอร์ข้ึนย่อหนา้ ใหม่ (paragraph) โดยใชคาสัง่ p </FONT>
<p><dd><FONT size=3>ในการจดั ย่อหนา้ นัน้ จะมคี าส่งั ที่กาหนดใหข้ อ้ ความมีการเยือ้ งของ
บรรทัด จะใช้คาสัง่ dd จะใชร้ ว่ มกบั คาส่งั br หรอื p ก็ได้ (--> ใช้คาสั่ง dd ตอ่ ทา้ ยคาส่งั p)
</FONT>
</body>
</html>
3. การจดั ตาแหน่งในหนา้ เอกสาร
การใสข่ อ้ ความ หรอื รปู ภาพในหนา้ เอกสาร HTML นน้ั หากไม่มกี ารจัดหนา้ เอกสาร
ขอ้ ความหรอื รปู ภาพต่าง ๆ จะชดิ ดา้ นซ้ายตลอด ดังนั้น เพื่อความเป็นระเบยี บและความ
สวยงามของเอกสารจึงตอ้ งจัดตาแน่งของข้อความ หรอื รูปภาพตามความเหมาะสม
การจดั ตาแหน่งของเอกสารเพื่อการแสดงผลทางจอภาพ จะใชค้ าสัง่ <p> และตามด้วย
คุณสมบตั ิ (attribute) align ดังนี้
<p align="left/right/center"> ขอ้ ความ/รปู ภาพ </p>
การท่ีจะให้ข้อความหรอื รูปภาพอยชู่ ดิ ซ้าย กง่ึ กลางและชดิ ขวาน้ัน จะตอ้ งมี
คุณสมบัติ (attribute) การจัดตาแหนง่ ของการแสดงผล ดังนี้
align = "left" การกาหนดค่าของการจดั ตาแหน่งการแสดงผลอย่ทู างซ้าย
align = "right" การกาหนดคา่ ของการจัดตาแหน่งการแสดงผลอยู่ทางขวา
align = "center" การกาหนดคา่ ของการจัดตาแหน่งการแสดงผลอยู่ตรงกลาง
ทดสอบการจดั ตาแหน่ง
<html>
<head><title> โฮมเพจของข้าพเจา้ </title></head>
<body>
<font face=angsananew size=5 color=blue>การจัดตาแหน่งในหน้าเอกสาร</font><br>
<font size=3 color=9966ff>คาส่งั ท่ใี ช้จัดตาแหน่งของเอกสารเพ่อื การแสดงผลทางจอภาพ จะ
ใช้คาสั่ง p และจะตามด้วยคณุ สมบัติ (attribute) align <br>
ตาแหน่งท่จี ะทาการแสดงผล คอื <p></font>
<font size=4color=6600ff>
<p align=left>การกาหนดค่าของการจดั ตาแหนง่ การแสดงผลอยู่ทางซ้าย</p>
<p align=center>การกาหนดคา่ ของการจดั ตาแหน่งการแสดงผลอยูต่ รงกลาง</p>
<p align=right>การกาหนดค่าของการจดั ตาแหน่งการแสดงผลอยู่ทางขวา</p>
</font>
</body>
</html>
ในการจัดตาแหน่งการแสดงผลข้อความหรอื รูปภาพให้อย่กู ึ่งกลางของจอภาพ สามารถ
กาหนดด้วยคาส่ัง center ได้ จะแสดงผลเชน่ เดียวกบั คาสง่ั <p align="center"> เขยี นคาส่งั
ดังน้ี
<center>..ข้อความ/รูปภาพ..</center>
หมายเหตุ ใน tag คาส่งั ไม่ตอ้ งใส่ เครอื่ งหมาย "...." กไ็ ด้
4. การเวน้ วรรค
เป็นคาสั่งชว่ ยใหเ้ วน้ วรรคระหวา่ งข้อความ เพราะปกติเบราเซอรจ์ ะแสดงชอ่ งวา่ งจากการ
เคาะ Space Bar เพียงชอ่ งเดียวแม้ว่าจะเคาะหลายคร้ัง ก็ตาม คาสัง่ ทใ่ี ช้ในการเว้นวรรค
คือ
คาสั่ง ซึ่งเป็นหนง่ึ ในจานวนรหัสใช้แทนอกั ษรพเิ ศษ ในภาษา HTML ใช้
ประโยชนส์ าหรับแทนตัวอกั ษรท่ีมีความหมายพิเศษ เช่น <, > อักษรพวกนี้จะไมส่ ามารถเขยี น
ลงไปตรงๆ เพ่ือให้ browser แสดง ท้ังนีเ้ พราะ browser จะรบั รู้วา่ เปน็ Tag ซงึ่ อาจทาใหก้ าร
แปลผิดพลาดได้
ตัวอยา่ ง รหสั ใชแ้ ทนอักษรพเิ ศษอืน่ ๆ เชน่
< ใช้แทนตวั < (less than)
> ใชแ้ ทนตัว > (greater than)
& ใช้แทนตวั & (ampersand)
ทดสอบการใช้คาสั่งเว้นวรรค
หมายเหตุ ใน tag คาสั่ง ไมต่ อ้ งใส่ เครอื่ งหมาย "...." กไ็ ด้
5. เสน้ ค่ันในแนวนอน
ในการจัดรปู แบบเอกสาร น้นั เรายังสามารถนาเส้นมาชว่ ยตกแตง่ เอกสารไดโ้ ยกาหนดให้
เป็นเส้นคน่ั ในหน้าเอกสาร HTML เส้นทีจ่ ะใช้คอื เสน้ ขดี คน่ั แนวนอน (Horizontal rule) ซงึ่
อาจใช้เป็นเส้นแบ่งเนอ้ื หาระหวา่ งบท หรือเป็นเสน้ ขีดคัน่ เพ่อื ความสวยงามและเป็นระเบยี บของ
เนื้อหา ได้
คาสง่ั ท่ใี ช้กาหนดเสน้ ค่นั จะเป็นคาสัง่ ท่ีไม่ต้องมคี าส่ังปิด (Single Tag) คอื คาสงั่ <hr>
โดยคาสัง่ <hr> จะมคี ุณสมบัตขิ องคาส่งั (Attribute) หลายตัว ดงั นี้
width เป็นการกาหนดความยาวของเส้น มหี น่วยเปน็ Pixel หรอื % ก็ได้
align เปน็ การจัดวางตาแหน่งของเสน้
size เปน็ การกาหนดขนาดความหนาของเส้นกาหนดเป็น pixel
noshade ไม่ต้องแสดงเปน็ แบบ 3 มิติ
color เปน็ การระบสุ ขี องเสน้
ตัวอย่าง
<hr width="60 %">
<hr width="80">
<hr width="n" align="left/right/center" size="ขนาด (n)" noshade color="สี">
ทดสอบการใส่เส้นค่ันแนวนอน
<html>
<head><title> โฮมเพจของข้าพเจา้ </title>
</head>
<body><p align=center>
<font face=angsananew size=6 color=660066>เส้นค่นั ในแนวนอน</font></p><br>
<font size=3 color=9900ff>การจัดรูปแบบเอกสารทผ่ี า่ นมาแล้วน้ัน การใช้เสน้ คั่นหน้าเอกสาร
HTML สามารถชว่ ยในการตกแตง่ เอกสารได้
สาหรับเสน้ ขีดค่นั ทางแนวนอน (Horizontal rule) อาจใช้เป็นเส้นแบง่ เนื้อหาระหว่างบท หรอื เป็น
เสน้ ขดี คั่นเพือ่ ความสวยงามและเปน็ ระเบียบของเน้ือหา ตวั อยา่ งเสน้ คน่ั แนวนอน
<p> <hr><br>เสน้ คัน่ ไม่ได้กาหนดคณุ สมบัติ<br>
<hr width=80% size=3> <br>เส้นค่นั กาหนดคุณสมบัติ กวา้ ง 80% ขนาด 3<br>
<hr width=50% size=5 color=770088> <br>เส้นค่ันกาหนดคณุ สมบตั ิ กวา้ ง 50% ขนาด 5
สี 770088<br> แหลง่ ที่มาของขอ้ มูล : https://pirun.ku.ac.th
<hr width=50% size=10 color=ff0088> <br>เสน้ คัน่ กาหนดคุณสมบัติ กว้าง 50% ขนาด 10
สี ff0088<br>
</body>
</html>
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
E-book การสร้างเว็บเพจด้วยภาษา HTML
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
E-book การสร้างเว็บเพจด้วยภาษา HTML
- 1 - 17
Pages: