HTML - ไอ แอ ม สัญญา

Download Report

Transcript HTML - ไอ แอ ม สัญญา 

1
่ าและหลักการทางานของ World Wide
• เพื่อให้ ทราบถึงทีม
Web
• เพื่อให้ ทราบถึงประโยชน์ ของการทางานแบบ Client-Server
• เพื่อให้ ทราบถึงโพรโทคอลทีเ่ กี่ยวข้ องกับการโปรแกรมบน
อินเทอร์ เน็ต
• เพื่อให้ ทราบประเภทการเขียนโปรแกรมแบบ Static
Programming และ Dynamic Programming
2
• บรรยายโดยผู้สอนและใช้ เอกสารประกอบการสอนของ
ผู้สอน
• สอนโดยใช้ ส่ือคอมพิวเตอร์ ผ่านเครื่ องฉาย
• อภิปรายในชั้นเรี ยนร่ วมกัน
่ เติมจากตาราและเอกสารทีเ่ กี่ยวข้ อง
• ให้ นิสิตค้ นคว้ าเพิม
• ทาแบบฝึ กหัดท้ ายบท
3
• ประเมินผลจากการตอบคาถามและอภิปรายในชั้นเรี ยน
• ทาแบบฝึ กหัดท้ ายบท
• ทารายงานส่ ง
4
• ภาษามาร์ กอัป (อังกฤษ: Markup Language) คือประเภท
ภาษาคอมพิวเตอร์ ท่ แี สดงทัง้ ข้ อมูล และข้ อมูลรู ปแบบเข้ า
ด้ วยกัน
• โดยข้ อมูลรู ปแบบอธิบายถึงโครงสร้ างหรื อการแสดงผลซึ่งส่ วนนี ้
เรี ยกว่ า มาร์ กอัป
• โดยจะอยู่รวมกับข้ อมูลปกติ ภาษามาร์ กอัปที่ร้ ู จักกันดีท่ ส
ี ุดคือ
HTML ตามความเป็ นมาแล้ ว ภาษารู ปแบบนีไ้ ด้ มีการใช้ ใน
อุตสาหกรรมการพิมพ์ ในการติดต่ อสื่อสารงานพิมพ์ ระหว่ าง
ผู้เขียน บรรณาธิการ และเครื่ องพิมพ์ เป็ นต้ น
5
• เริ่ มพัฒนาโดย ทิม เบอร์ เนอรส์ ลี (Tim Berners Lee) สาหรั บภาษา
SGML
• เป็ นภาษาที่ถก
ู พัฒนาโดย World Wide Web Consortium (W3C) จาก
แม่ แบบของภาษา SGML (Standard Generalized Markup Language)
โดยตัดความสามารถบางส่ วนออกไป เพื่อให้ สามารถทาความเข้ าใจ
และเรี ยนรู้ ได้ ง่าย
• ในปั จจุบัน ทาง W3C ผลักดัน รู ปแบบของ HTML แบบใหม่ ที่
เรียกว่ า XHTML ซึ่งเป็ นลักษณะของโครงสร้ าง XML แบบหนึ่งที่มี
หลักเกณฑ์ ในการกาหนดโครงสร้ างของโปรแกรมที่มีรูปแบบที่
มาตรฐานกว่ า มาทดแทนใช้ HTML รุ่ น 4.01 ที่ใช้ กันอยู่ในปั จจุบัน
6
• เป็ นมาตรฐานตัวต่ อไปของ HTML โดยได้ มีการออกดราฟต์ มาเสนอ
เมื่อวันที่ 22 มกราคม 2551 [7] มีลักษณะเหมือนมาตรฐานตัวก่ อน
หน้ าทัง้ HTML 4.01 และ XHTML 1.1
มาตรฐานใหม่ จะมีคุณลักษณะเด่ นที่สาคัญได้ แก่
• การใช้ งานวิดโี อ การแสดงตาแหน่ งทางภูมศ
ิ าสตร์ การเก็บไฟล์ ในลักษณะ
ออฟไลน์ การแสดงกราฟิ กส์
• Input types แบบใหม่ เช่ น search, number, range, color, tel, url, email, date,
month, week, time, datetime และ datetime-local เป็ นต้ น
• คุณสมบัตเิ ด่ นหลายอย่ างไม่ จาเป็ นต้ องติดตัง้ ซอฟต์ แวร์ เพิ่ม เช่ น เกียรส์ แฟลช
หรื อ ซิลเวอร์ ไลต์ เหมือนที่ผ่านมาในการใช้ งาน HTML4
7
• HTML เป็ นภาษาคอมพิวเตอร์ รูปแบบหนึ่ง ที่มีโครงสร้ างการ
เขียนโดยอาศัยตัวกากับ (Tag) ควบคุมการแสดงผลข้ อความ,
รู ปภาพ หรื อวัตถุอ่ ืนๆ ผ่ านโปรแกรมเบราเซอร์
• แต่ ละ Tag อาจจะมีส่วนขยายที่เรี ยกว่ า Attribute สาหรั บระบุ
หรื อควบคุมการแสดงผล ของเว็บได้ ด้วย
• คาสั่งในภาษา HTML เรี ยกว่ า แท็ก (Tag) ซึ่งแท็กหนึ่งๆ
ประกอบด้ วย 3 ส่ วนได้ แก่ เครื่ องหมายน้ อยกว่ า (<) ชื่อคาสั่ง
หรื อชื่อแท็ก (Tag name) เครื่ องหมายมากกว่ า (>) เช่ น <B>
<P> <HR>
8
• โดยที่ Tag HTML แบ่ งได้ 2 ลักษณะ คือ
• แท็กเดี่ยว (Single Tag) เป็ นแท็กที่ไม่ ต้องมีการปิ ดรหัส เช่ น <HR>, <BR>
เป็ นต้ น
• แท็กเปิ ด/ปิ ด เป็ นแท็กที่ประกอบด้ วย แท็กเปิ ด (Opening Tag) และ แท็ก
ปิ ด (Closing Tag) โดยแท็กปิ ดจะมีเครื่ องหมายแสลช ( / ) นาหน้ าคาสั่ง
ใน Tag นัน้ ๆ เช่ น <B>…</B>, <a>…</a> เป็ นต้ น
9
• (1) Tag <HTML> และ </HTML> จะอยู่บรรทัดแรก และ บรรทัด
สุดท้ าย ในไฟล์ HTML เสมอ เป็ น Tag ที่บอกให้ ร้ ู ว่า ข้ อความ
หรือ Tag ที่อยู่ระหว่ าง 2 Tag นี ้ เป็ นแบบ HTML
• (2) Tag <HEAD> และ </HEAD> ส่ วนนีจ้ ะไว้ ใส่ รายละเอียดต่ าง
ๆ เช่ น Tag<TITLE>iamsanya.com</TITLE> ไว้ ใส่ ข้อความที่
ต้ องการให้ ปรากฎอยู่บน ไตเติล้ บาร์ เป็ นต้ น
• (3) <BODY ....... > ข้ อความที่ปรากฎอยู่ตรงช่ วงไข่ ปลา เรี ยกว่ า
"แอตทริบวิ ต์ ของ Tag <BODY>"
• (4) Tag <BODY> และ </BODY> ข้ อความ หรื อ Tag ที่อยู่
ระหว่ าง 2 Tag นี ้ เป็ นส่ วนของเนือ้ หา
10
• Head Section เป็ นส่ วนที่ใช้ อธิบายเกี่ยวกับข้ อมูลเฉพาะ
ของหน้ าเว็บนัน้ ๆ เช่ น ชื่อเรื่องของหน้ าเว็บ (Title), ชื่อ
ผู้จัดทาเว็บ (Author), คีย์เวิร์ดสาหรับการค้ นหา (Keyword)
โดยมี Tag สาคัญ คือ
<HEAD>
<TITLE>ข้ อความอธิบายชื่อเรื่ องของเว็บ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=TIS-620">
<META NAME="Author" CONTENT="ชื่อผู้พฒ
ั นาเว็บ">
<META NAME="KeyWords" CONTENT="ข้ อความ 1, ข้ อความ 2, …">
</HEAD>
11
• Body Section เป็ นส่ วนเนือ้ หาหลักของหน้ าเว็บ ซึ่งการแสดงผลจะต้ องใช้ Tag จานวน
มาก ขึน้ อยู่กับลักษณะของข้ อมูล เช่ น ข้ อความ, รูปภาพ, เสียง, วีดโิ อ หรือไฟล์ ต่างๆ
• ส่ วนเนือ้ หาเอกสารเว็บ เป็ นส่ วนการทางานหลักของหน้ าเว็บ ประกอบด้ วย Tag มากมาย
ตามลักษณะของข้ อมูล ที่ต้องการนาเสนอ ภายใต้ Tag <BODY> … </BODY> และ
แบ่ งกลุ่มคาสั่งได้ ดังนี ้
• กลุ่มคาสั่งเกี่ยวกับการจัดการพารากราฟ
• กลุ่มคาสั่งจัดแต่ ง/ควบคุมรู ปแบบตัวอักษร
• กลุ่มคาสั่งการทาเอกสารแบบรายการ (List)
• กลุ่มคาสั่งเกี่ยวกับการทาลิงค์
• กลุ่มคาสั่งจัดการรู ปภาพ
การพิมพ์ชดุ คาสัง่ HTML สามารถพิมพ์ได้ ทงตั
ั ้ วพิมพ์เล็ก
ตัวพิมพ์ใหญ่ หรื อผสม การย่อหน้ า เว้ นบรรทัด หรื อช่องว่าง
สามารถกระทาได้ อิสระ โปรแกรมเบราเซอร์ จะไม่สนใจ
เกี่ยวกับระยะเว้ นบรรทัดหรื อย่อหน้ า
• กลุ่มคาสั่งจัดการตาราง (Table)
• กลุ่มคาสั่งควบคุมเฟรม
• กลุ่มคาสั่งอื่นๆ
12
• การสร้ างเว็บเพจนัน
้ เราสามารถใช้ โปรแกรม Text Editor
อะไรก็ได้ เช่ น Notepad, EditPlus จากนัน้ ให้ บันทึกเป็ นไฟล์
ชื่อ Test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Welcome to PHP Chapter</TITLE>
Test.html
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<h1>Hello World</h1>
</BODY>
</HTML>
13
• ในไฟล์ Test.html จะเห็นว่ าแท็กหรื อ Element แรกในเว็บ
เพจคือ <!DOCTYPE...> ซึ่งเป็ นคาสั่งที่บอกให้ เว็บ
บราวเซอร์ ทราบเกี่ยวกับเวอร์ ช่ ันของภาษา HTML ที่ใช้
ตลอดเว็บเพจนี ้
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
14
• แอตทริ บวิ ต์ (ATTRIBUTE) คือ ส่ วนขยายคุณสมบัตเิ พิ่มเติมของ
แท็ก เช่ น สีตวั อักษร สีของพืน้ หลัง การจัดระยะข้ อความ ซึ่งใน
แต่ ละแท็กก็จะมีแอตทริบวิ ต์ แตกต่ างกันไปตามรู ปแบบที่กาหนดไว้
โดยมีรูปแบบการกาหนดดังนีค้ ือ
<ELEMENT ATTRIBUTE VALUE>
• ELEMENT ส่ วนที่บอกชื่อของแท็ก ที่ใช้ บ่อยๆ เช่ น แท็ก BODY
• ATTRIBUTE คือ ชื่อคุณสมบัตท
ิ ่ ตี ้ องการ เช่ น สีตวั อักษร สีพนื ้
หลัง เป็ นต้ น
• VALUE ค่ าที่ต้องการ
15
• ตัวอย่ าง การกาหนด ATTRIBUTE ให้ กับ BODY เช่ น
Ex1.html
<HTML>
<Body Bgcolor ="Yellow" Text="Blue">
Hello World
</Body>
</HTML>
• ตัวอย่ างคือการกาหนดแอตทริบวิ ต์ Bgcolor ให้ กับแท็ก <body>
โดยกาหนดให้ มีค่าเท่ ากับ “Yellow” และแอตทริบวิ ต์ Text เป็ น
“Blue” ผลก็คือพืน้ หลังของเว็บเพจจะกลายเป็ นสีเหลือง
ตัวหนังสือเป็ นสีนา้ เงิน
16
• นอกจากใช้ ค่าสีตามชื่อสีได้ เช่ น red, blue, green, yellow, cyan, magenta แล้ ว สีในภาษา
HTML กาหนดโดยเลขฐานสิบหกจานวน 6 หลัก ได้ มาจากการนาค่ าของแม่ สี 3 สีคือ แดง
เขียว และนา้ เงิน (Red Green Blue: RGB) มาผสมกัน
• แม่ สีแต่ ละสีจะมีค่าเป็ นเลขฐานสิบหกได้ ตัง้ แต่ 00 ไปจนถึง ff (เท่ ากับ 0 ถึง 255 ในระบบ
เลขฐานสิบ) การระบุค่าสีให้ นาค่ าในรู ปฐานสิบหกของแม่ สีทงั ้ สามมาเขียนต่ อกัน
ตามลาดับจากแดงไปเขียวและนา้ เงิน แล้ วใส่ เครื่องหมาย # นาหน้ า เช่ น
• #000000 หมายถึง สีดา (แดง 0 , เขียว 0 , นา้ เงิน 0)
• #FFFFFF หมายถึง ขาว (แดง 255 , เขียว 255 , นา้ เงิน 255)
• #0000FF หมายถึงสีนา้ เงิน (แดง 0, เขียว 0, นา้ เงิน 255)
• #FFFF00 หมายถึงสีเหลือง (แดง 255 , เขียว 255 , นา้ เงิน 0)
17
18
19
• คาสั่งที่ใช้ ในการขึน้ บรรทัดใหม่ มีดงั นีค้ ือ
<BR> เป็ นคาสั่งให้ ข้อความขึน้ บรรทัดใหม่
<P> เป็ นคาสั่งให้ ข้อความขึน้ บรรทัดใหม่ และเว้ น
อีก 1 บรรทัด
<P>&nbsp;</P> เป็ นคาสั่งให้ ข้อความขึน้ บรรทัดใหม่ และเว้ น
อีกหลายบรรทัด
20
• การจัดตาแหน่ งของข้ อความสามารถกาหนดโดยใช้ แท็ก <P> หรื อ
<DIV> ให้ ข้อความปรากฏในตาแหน่ งชิดซ้ าย ชิดขวา หรื อตรง
กลาง ดังตัวอย่ างต่ อไปนี ้
<P ALIGN=”CENTER”> จัดตาแหน่ งข้ อความกึ่งกลาง</P>
<P ALIGN=”LEFT”>
จัดตาแหน่ งข้ อความชิดซ้ าย</P>
<P ALIGN=”RIGHT”>
จัดตาแหน่ งข้ อความชิดขวา</P>
<DIV ALIGN=”CENTER”> จัดตาแหน่ งข้ อความกึ่งกลาง</DIV>
<DIV ALIGN=”LEFT”>
จัดตาแหน่ งข้ อความชิดซ้ าย</DIV>
<DIV ALIGN=”RIGHT”> จัดตาแหน่ งข้ อความชิดขวา</DIV>
21
• ตัวอย่ าง Ex2.html
<HTML>
<HEAD><TITLE> การจัดตาแหน่งข้ อความ </TITLE></HEAD>
<BODY >
<P ALIGN=”CENTER”>จัดตาแหน่งข้ อความกึ่งกลาง</P>
<DIV ALIGN=”LEFT”>จัดตาแหน่งข้ อความชิดซ้ าย</DIV>
<P ALIGN=”RIGHT”>จัดตาแหน่งข้ อความชิดขวา</P>
ไม่ได้ จดั ตาแหน่งข้ อความ
</BODY>
<HTML>
22
• การย่ อหน้ าจะใช้ แท็ก <DD> ส่ วนการเยือ้ งจะใช้ แท็ก
<BLOCKQUOTE> ให้ ทดลองพิมพ์ โปรแกรมตามตัวอย่ าง
เพื่อทาการศึกษาผลการรันโปรแกรม
<HTML>
Ex3.html
<HEAD><TITLE> การย่อหน้ าและการเยื ้อง</TITLE></HEAD>
<BODY>
<BLOCKQUOTE> <DD> ตัวอย่างต่อไปนี ้ เป็ นการแสดงข้ อความการพิมพ์แล้ วมีการย่อหน้ า
โดยการใช้ แท็ก DD ในการย่อหน้ าและมีการใช้ แท็ก BLOCKQUOTE ในการทาการเยื ้อง
</DD></BLOCKQUOTE>
ข้ อควาส่วนนี ้ไม่ได้ ใช้ แท็ก DD และ BLOCKQUOTE ในการควบคุม
</BODY>
</HTML>
23
• การทาเส้ นคั่นแนวนอนจะใช้ แท็ก <HR> เป็ นตัวควบคุมให้
แสดงผลต่ างๆ ตามต้ องการ
เช่ น <HR WIDTH=“50%”>
<HR WIDTH=“400PX” ALIGN=”RIGHT”>
<HR SIZE=“5PX” COLOR=“RED”>
24
• ตัวอย่ าง EX4.html
<HTML>
<HEAD> <TITLE>การทาส้ นคัน่ แนวนอนด้ วยแท็ก <HR> </TITLE> </HEAD>
<BODY>
การทาเส้ นคัว่ แนวนอนโดยไม่ใช้ แอตทริบิวต์ <HR>
การทาเส้ นคัน่ แนวนอนความหนาด้ วยแอตทริบิวต์ SIZE=”3PX” ทาให้ เป็ นเส้ นทึบด้ วยแอตทริ
บิวต์
NOSHADE>
<HR SIZE=”3PX” NOSHADE>
การทาเส้ นคัน่ แนวนอนกาหนดความกว้ างด้ วยแอตทริบิวต์
WIDTH=”50%”
<HR WIDTH=”50%”>
การทาเส้ นคันแนวนอนกาหนดความกว้ างด้ วยแอตทริบิวต์
บิวต์
WIDTH=”400PX” และจัดชิดขวาด้ วยแอตทริ
ALIGN=”RIGHT”
<HR WIDTH=”400PX” ALIGN=”RIGHT”>
</BODY>
</HTML>
25
• การกาหนดให้ ข้อความอยู่บรรทัดเดียวกันสามารถกาหนด
ด้ วยแท็ก <NOBR>…</NOBR> โดยมีจุดประสงค์ เพื่อให้
ข้ อความต่ อเนื่องและได้ ใจความสมบูรณ์ สามารถกาหนด
ได้ ตามตัวอย่ างนี ้
26
• ตัวอย่ าง Ex5.html
<HTML>
<HEAD><TITLE>
กาหนดให้ ข้อความอยูบ่ รรทัดเดียวกันด้ วยแท็ก <NOBR></TITLE></HEAD>
<BODY>
<DO> การกาหนดให้ ข้อความอยูบ่ รรทัดเดียวกัน <NOBR> ต้ องใช้ แท็ก NOBR เพื่อให้ ข้อความ
ต่อเนื่อง <NOBR> ได้ ใจความสมบูรณ์ เพราะฉะนันจะท
้ าให้ ไม่มีปัญหาเรื่ องความสมบูรณ์ของข้ อความ
</BODY>
</HTML>
27
• การจัดเอกสารโดยใช้ แท็ก <PRE>…..</PRE> ตัวอักษร
จะเล็กลงมาหนึ่งระดังแต่ เราสามารถเว้ นวรรค <!-วรรค> ได้ มากว่ าหนึ่งครัง้ และข้ อความจะไม่ อยู่ร่วมบรรทัด
เดียวกันแท็กอื่นส่ วนการใส่ เครื่องหมายตกใจแล้ วตามด้ วย
ข้ อความเป็ นการ Comment <!-หมายเหตุ-> หรือหมาย
เหตุเพื่อกันลืมเวลาแก้ ไขโปรแกรมในภายหลังจากมีความ
สะดวกมากขึน้
28
• ตัวอย่ าง Ex6.html
<HTML>
<HEAD><TITLE> การจัดเอกสารโดยใช้แท็ก PRE</TITLE></HEAD>
<BODY>
<PRE>
รายงาน
รายรับ
ค้างจ่าย
ค่าน้า
100
0
ค่าไฟ
500
200
ค่าโทรศัพท์
350
150
<!-หมายเหตุ ประจาเดือนธันวาคม->
</PRE>
</BODY>
</HTML>
29
• เป็ นแท็กทื่ใช้ กาหนดตัวอักษรและข้ อความ ซึ่งเราสามารถแสดงได้ หลายรู ปแบบ โดยทั่วไปมี
รู ปแบบในการกาหนดดังต่ อไปนี ้
<FONT ATTRIBUTE =VALUE>
<FONT>
ส่ วนที่บอกชื่อแท็กที่ใช้ กาหนดตัวอักษรและข้ อความในที่นีค้ ือ FONT
<ATTRIBUTE>
ส่ วนที่บอกคุณสมบัตติ ่ างๆ เช่ น สี ขนาด และชื่อรู ปแบบตัวอักษร
<VALUE>
ค่ าที่ต้องการกาหนด
• ดังตัวอย่ างต่ อไปนี ้
<FONT COLOR = “BLUE’’>
กาหนดตัวอักษรเป็ นสีนา้ เงิน
<FONT SIZE = “5’’>
กาหนดขนาดตัวอักษรเป็ น 5 (มีขนาดตัง้ แต่ 1-7)
<FONT FACE = “Microsoft Sans Serif’’> กาหนดรู ปแบบตัวอักษรแบบ Microsoft Sans Serif
<FONT SIZE = “ 2’’ COLOR = “ GREEN’’> กาหนดขนาดตัวอักษรเป็ น 2 สีเขียว
30
• ตัวอย่ าง Ex7.html
<HTML>
<HEAD>
<TITLE>การตกแต่งข้อความ</TITLE></HEAD>
<BODY BGCOLOR=“CYAN”>
ตัวอักษรขนาดปกติ <FONT COLOR =“BLUE” SIZE = “1”> กาหนดขนาดตัวอักษร = 1 สีน้า
เงิน </FONT> <BR>
<FONT COLOR=“BLUE” SIZE =”2”> กาหนดขนาดตังอักษร = 2 สีน้าเงิน</FONT><BR>
ขนาด font ปกติคือ 3
<FONT COLOR=“BLUE” SIZE =”3”> กาหนดขนาดตังอักษร = 3 สีน้าเงิน</FONT><BR>
<FONT COLOR=“BLUE” SIZE =”4”> กาหนดขนาดตังอักษร = 4 สีน้าเงิน</FONT><BR>
<FONT COLOR=“BLUE” SIZE =”5”> กาหนดขนาดตังอักษร = 5 สีน้าเงิน</FONT><BR>
<FONT COLOR=“GREEN” SIZE =”6”> กาหนดขนาดตังอักษร = 6 สีน้าเงิน
</FONT><BR>
<FONT COLOR =“FF0000” SIZE =”7” FACE= “BrowalliaUPC”> กาหนดขนาด
ตัวอักษร = 7 สีแดง รูปแบบตัวอักษรแบบ BrowalliaUPC </FONT><BR>
</BODY>
</HTML>
31
• แท็กในกลุ่มนีใ้ ช้ ครอบตัวอักษรที่เราต้ องการตกแต่ ง ในการทาให้ ตัวอักษร และ
ข้ อความมีลักษณะต่ างๆ ตามต้ องการดังนี ้
<BIG>…...</BIG>
ตัวอักษรจะใหญ่ ขนึ ้ หนึ่งระดับ
<B>…...</B>
ตัวอักษรจะมีความหนาและเข้ มขึน้ มาก
<STRONG>…...</STRONG> ตัวอักษรจะมีความหนาและเข้ มมากขึน้
<I>…...</I>
ตัวเอียง
<EM>…...</EM>
ตัวเอียง
<U>…...</U>
ตัวขีดเส้ นใต้
<STRIKE>…...</STRIKE> หรื อ <DEL>…</DEL> หรื อ <S>..</S> ขีดเส้ นกลางข้ อความ
<SUP>…...</SUP>
ตัวยกขึน้ เช่ น A<sup>2</sup>
<SUB>…...</SUB>
ตัวห้ อย เช่ น H<sub>2</sub>O
32
• ในการเขียนเว็บเพจ บางครั ง้ จาเป็ นที่จะต้ องแสดงรายการย่ อย
หรื อลิสต์ ท่ ตี ้ องการแสดงข้ อมูลแบบเรี ยงลาดับ เช่ น รายชื่อ
สถานศึกษา รายชื่อสินค้ า รายชื่อจังหวัด รายชื่อประเทศ เป็ นต้ น
• ใช้ แท็ก <OL>……</OL> ครอบข้ อมูลที่ต้องการแสดงผลแบบ
เรี ยงลาดับ ซึ่งจะใช้ รวมกับแท็ก <LI> ซึ่งแท็ก <LI> จะต้ องอยู่
ภายในแท็ก <OL> เพื่อแสดงรายการย่ อยอีกทีหนึ่ง
• โดยมีรูปแบบการเขียนดังนี ้ <OL> ข้ อความที่เป็ นหัวข้ อ
<LI> ข้ อความที่เป็ นรายการย่อย
<LI> ข้ อความที่เป็ นรายการย่อย
</OL>
33
• <OL TYPE = ชนิดของรายการหรื อลิสต์ > ข้ อความที่เป็ นหัวข้ อ ชนิดของรายการจะ
มี 5 ชนิดด้ วยกัน คือ
• TYPE = 1
TYPE
TYPE
TYPE
TYPE
=a
=A
=i
=I
แสดงรายการด้ วยตัวเลขอารบิคคือ1,2,3,4,5,6,…………………….
แสดงรายการด้ วยตัวอักษรอังกฤษตัวพิมพ์ เล็กคือ a,b,c,……………
แสดงรายการด้ วยตัวอักษรอังกฤษตัวพิมพ์ ใหญ่ คือ A,B,C…………
แสดงรายการด้ วยตัวเลขโรมันแบบเล็กคือ i, ii, iii, iv,……………..
แสดงรายการด้ วยตัวเลขโรมันแบบใหญ่ คือ I, II, III, IV,…………..
34
• ตัวอย่ าง
<OL> ข้ อความที่เป็ นหัวข้ อ
<LI> ข้ อความที่เป็ นรายการย่อย
<LI> ข้ อความที่เป็ นรายการย่อย
<LI> ข้ อความที่เป็ นรายการย่อย
</OL>
<OL TYPE=“1” > ข้ อความที่เป็ นหัวข้ อ
<LI> ข้ อความที่เป็ นรายการย่อย
<LI> ข้ อความที่เป็ นรายการย่อย
<LI> ข้ อความที่เป็ นรายการย่อย
</OL>
<OL TYPE=“a” > ข้ อความที่เป็ นหัวข้ อ
<LI> ข้ อความที่เป็ นรายการย่อย
<LI> ข้ อความที่เป็ นรายการย่อย
<LI> ข้ อความที่เป็ นรายการย่อย
</OL>
<OL TYPE=“i” > ข้ อความที่เป็ นหัวข้ อ
<LI> ข้ อความที่เป็ นรายการย่อย
<LI> ข้ อความที่เป็ นรายการย่อย
<LI> ข้ อความที่เป็ นรายการย่อย
</OL>
35
• ใช้ สัญลักษณ์ แบบต่ างๆ แทนแบบนีเ้ รี ยกว่ าการแสดงรายการแบบไม่ มีลาดับ
(UNORDER LIST) จะใช้ แท็ก <UL>……….</UL> ครอบข้ อมูลที่ต้องการ
แสดงผลแบบไม่ มีลาดับ ซึ่งจะใช้ ร่วมกับแท็ก <LI> ซึ่งแท็ก <LI> จะอยู่
ภายในแท็ก <UL> เพื่อแสดงรายการย่ อยอีกทีหนึ่ง
• แอตทริบวิ ต์ ท่ ีใช้ ร่วมกับแท็ก <UL> คือ แอตทรี บวิ ต์ <TYPE> ใช้ ในการ
กาหนดเกี่ยวกับแบบของหัวข้ อย่ อยว่ าจะใช้ สัญลักษณ์ อะไรแทนค่ าในแท็ก
<LI> มีการกาหนดสัญลักษณ์ ดังนี ้
<UL TYPE=DISC>
กาหนด Bullet ให้ เป็ นวงกลมทึบ
<UL TYPE=CIRCLE> กาหนด Bullet ให้ เป็ นวงกลมโปร่ ง
<UL TYPE=SQUARE> กาหนด Bullet ให้ เป็ นสี่เหลื่อมทึบ
36
• ตัวอย่ าง
<UL> ข้ อความที่เป็ นหัวข้ อ
<LI> รายการแบบไม่มีลาดับ(UNORDER LIST )
<LI> รายการแบบไม่มีลาดับ(UNORDER LIST )
<LI>รายการแบบไม่มีลาดับ(UNORDER LIST )
</UL>
<UL TYPE=CIRCLE> ข้ อความที่เป็ นหัวข้ อ
<LI> รายการแบบไม่มีลาดับ(UNORDER LIST )
<LI> รายการแบบไม่มีลาดับ(UNORDER LIST )
<LI>รายการแบบไม่มีลาดับ(UNORDER LIST )
</UL>
<UL TYPE=DISC> ข้ อความที่เป็ นหัวข้ อ
<LI> รายการแบบไม่มีลาดับ(UNORDER LIST )
<LI> รายการแบบไม่มีลาดับ(UNORDER LIST )
<LI>รายการแบบไม่มีลาดับ(UNORDER LIST )
</UL>
<UL TYPE=SQUARE> ข้ อความที่เป็ นหัวข้ อ
<LI> รายการแบบไม่มีลาดับ(UNORDER LIST )
<LI> รายการแบบไม่มีลาดับ(UNORDER LIST )
<LI>รายการแบบไม่มีลาดับ(UNORDER LIST )
</UL>
37
• การทาให้ ข้อความเคลื่อนไหวจากที่หนึ่งไปยังอีกที่หนึ่ง ซึ่งสามารถทาได้ โดย
การแท็ก <MARQUEE> ควบคุม มีรูปแบบดัง้ นี ้
<MARQUEE ATTRIBUTE=VALUE>ข้ อความที่ต้องการให้ เคลื่อนไหว
</MARQUEE>
• MARQUEE คาสั่งที่ทาให้ ข้อความเคลื่อนไหว
• ATTRIBUTE คุณสมบัตก
ิ ารเคลื่อนไหวในลักษณะต่ างๆ เช่ น ทิศทาง
รู ปแบบ ความกว้ าง ความเร็ว จานวนรอบ เป็ นต้ น
• VALUE
ค่ าที่กาหนดตามคุณสมบัตขิ อง ATTRIBUTE
38
• แนวทางการเคลื่อนไหว
• กาหนดให้ ข้อความเคลื่อนไหวในรู ปแบบต่ างๆ ได้ เช่ น วิ่งจากซ้ ายไปขวาหรื อขาวไป
ซ้ ายหรื อวิ่งวิ่งไปแล้ วให้ หยุดนิ่งไม่ ต้องวิ่งกลับ เป็ นต้ น มีรูปแบบการกาหนดดังนีค้ ือ
<MARQUEE BEHAVIOR = VALUE > ข้ อความที่ต้องการให้ เคลื่อนไหว </MARQUEE>
• BEHAVIOR ใช้ กาหนดแนวทางการเคลื่อนไหวของข้ อความมีให้ เลือก 3 แบบคือ
• ALTERNATE ให้ ว่ งิ จากขอบขวามาขอบซ้ าย เมื่อถึงขอบซ้ ายก็ให้ ว่ งิ กลับ
• SCROLL
ให้ ว่ งิ จากขวามาซ้ าย เมื่อถึงขอบซ้ ายก็ให้ ว่ งิ ออกมาจากขอบขวาใหม่
• SLIDE
ให้ ว่ งิ จากขวามาซ้ าย เมื่อถึงขอบซ้ ายแล้ วให้ หยุดนิ่ง
39
• ทิศทางการเคลื่อนไหว
• กาหนดให้ ข้อความเคลื่อนไหวตามทิศทางที่ต้องการได้ เช่ น วิ่งจากซ้ ายไปขวาหรื อ
ขวาไปซ้ าย โดยมีรูปแบบการกาหนดแอตทริบวิ ต์ ดังนีค้ ือ
< MARQUEE DIRECTION = ทิศทางที่ต้องการให้ เคลื่อนไหว> ข้ อความ</ MARQUEE >
• DIRECTION กาหนดทิศทางการเคลื่อนไหวของหัวข้ อมีให้ เลือก 4 แบบคือ
• LEFT
ให้ ว่ งิ จากซ้ ายมาขวา เมื่อถึงขอบขวาแล้ วให้ ว่ งิ ออกมาจากขอบซ้ ายใหม่
• RIGHT
ให้ ว่ งิ จากขวามาซ้ าย เมื่อถึงขอบซ้ ายแล้ วให้ ว่ งิ ออกมาจากขอบขวาใหม่
• UP
ให้ ว่ งิ จากล่ างขึน้ บน เมื่อถึงขอบบนสุดแล้ วให้ ว่ งิ ออกมาจากล่ างใหม่
• DOWN
ให้ ว่ งิ จากบนลงล่ าง เมื่อถึงขอบล่ างสุดแล้ วให้ ว่ งิ ออกมาจากบนใหม่
40
• จานวนรอบการเคลื่อนไหว
• กาหนดจานวนรอบการเคลื่อนไหวตามที่ต้องการได้ โดยมีรูปแบบ
การกาหนดแอตทริบวิ ต์ ดงั ้ นีค้ ือ
<MARQUEE LOOP=จานวนรอบที่ต้องการให้ เคลื่อนไหว> ข้ อความ
</MARQUEE>
• MARQUEE คาสั่งให้ ข้อความเคลื่อนไหว
• LOOP
คาสั่งให้ วนรอบ
41
• ความเร็ วในการเคลื่อนไหว
• กาหนดในการเคลื่อนไหวตามที่ต้องการได้ โดยมีรูปแบบการกาหนดแอตทริ บวิ ต์
ดังนีค้ ือ
<MARQUEE SCROLLAMOUNT = ความเร็วในการเคลื่อนไหว> ข้ อความ
</MARQUEE>
• SCROLLAMOUNT คาสั่งกาหนดความเร็ วในการเคลื่อนไหว ความเร็ วในการ
เคลื่อนไหวในการกาหนดโดยใช้ ตัวเลข ถ้ ากาหนดให้ มีค่ามากจะมีผลทาให้ ข้อความ
เคลื่อนไหวเร็ว ถ้ ากาหนดเป็ นค่ าน้ อยจะทาให้ ข้อความเคลื่อนไหวช้ า
42
• Ex8.html
<HTML>
<HEAD><TITLE>แนวทางการเคลื่อนไหว<TITLE></HEAD>
<BODY BGCOLOR= “PINK”>
<FONT COLOR= “BLUE” SIZE= “5”> แนวทางการเคลื่องไหว</FONT><P>
<MARQUEE BEHAVIOR=“ALTERNATE”>ALTERขวาไปซ้ ายแล้ วเริ่มใหม่</MARQUEE><P>
Ex9.html
<MARQUEE BEHAVIOR=“SLIDE”>SLIDEขวาไปซ้ ายแล้ วหยุด </MARQUEE><P>
<HTML>
</BODY>
<HEAD><TITLE> ทิศทางการเคลื่อนไหว</TITLE></HEAD>
</HTML>
<BODY>
<FONT COLOR = RED SIZE=”5”> ทิศทางการเคลื่อนไหว </FONT> <P>
<MARQUEE DIRECTION=“RIGHT”> RIGHT
<MARQUEE DIRECTION=“LEFT”> LEFT
<MARQUEE DIRECTION=“UP”> UP
</BODY> </HTML>
จากซ้ ายไปขวา </MARQUEE> <P>
จากขวาไปซ้ าย </MARQUEE > <P>
จากล่างขึ ้นบน </MARQUEE > <P>
43
• ตัวอย่ าง Ex10.html
<HTML>
<HEAD><TITLE>
จานวนรอบการเคลื่อนไหว </TITLE></HEAD>
<BODY BGCOLOR = “YELLOW”>
<FONT COLOR = “RED” SIZE = “ 5’’>
</FONT> <P>
จานวนรอบการเคลื่อนไหว
<MARQUEE LOOP=“1”> ข้ อความจะวิ่ง 1 รอบ </MARQUEE> <P>
<MARQUEE LOOP=“2”> ข้ อความจะวิ่ง 2 รอบ </MARQUEE> <P>
<MARQUEE LOOP=“3”> ข้ อความจะวิ่ง 3 รอบ </MARQUEE> <P>
</BODY>
</HTML>
44
• ถ้ าต้ องใช้ สัญลักษณ์ พเิ ศษ เวลาที่พม
ิ พ์ ใน Text Editor ให้ พมิ พ์ เป็ น &lt; สาหรั บเครื่ องหมาย <
, พิมพ์ &gt; สาหรั บเครื่ องหมาย > และพิมพ์ &quot; สาหรั บเครื่ องหมาย เป็ นต้ น
• สัญลักษณ์ พเิ ศษที่ใช้ งานบ่ อยๆ ได้ แก่
©
&copy;
®
&reg;
™
&trade;
"
&quot;
&
&amp;
<
&lt;
>
&gt;
• หมายเหตุ ถ้ าต้ องการเว้ นวรรคหนึ่งตัวอักษรจะใช้ &nbsp; (Non-Breaking Space)
45
46