Name of presentation

Download Report

Transcript Name of presentation 

บทที่ 4
ภาษา HTML
บทนา
ผู ท้ ตี่ ้องการเขียนเว็บจาเป็ นทีจ่ ะต้องมีความรู้เกีย่ วกับภาษา HTML (Hyper
Text Mark-Up Language) ซึง่ ภาษาพืน้ ฐานในการเขียนเว็บ บางครัง้ ผู ท้ เี่ ขียนเว็บ
อาจไม่ใช้โปรแกรมสาเร็จรูปในการเขียน แต่จะเขียนด้วยภาษา HTML ทัง้ หมดก็ได้
ซึง่ จะต้องใช้เวลาในการศึกษาพอสมควร ซึง่ ในบทนีจ้ ะอธิบายเฉพาะส่วนทีจ่ าเป็ นเพือ่ ให้
รู้ว่าภาษา HTML มีรูปแบบอย่างไร ถึงแม้ผูเ้ ขียนเว็บจะใช้โปรแกรมสาเร็จรูปในการ
เขียน แต่โปรแกรมส่วนใหญ่กจ็ ดั ทาขึน้ โดยอาศัย HTML ทัง้ สิน้
เริ่มต้นพื้นฐาน HTML
• คุณจะได้เรียนรู้
1. โครงสร้างของภาษา HTML แบบง่ายๆ
2. ความหมายและวิธกี ารกาหนดคาสัง่
• ( * ) วิธที ดลองเปิ ดโปรแกรม NOTEPAD ขึน้ มา (อยู่ใน Start >Programs->Accesories->Notepad) หลังจากนัน้ ก็
พิมพ์ได้เลยพอพิมพ์เสร็จก็เซฟโดย พิมพ์ ชือ่ ไฟล์.htm หรือ ชือ่ ไฟล์.html
ก็ได้ แล้วใช้เครือ่ งหมายฟั นหนู( " ) คร่อมชือ่ .สกุล เช่น "MyWeb.html"
แค่นเ้ ี อง แล้วก็ไปหาเวบเบราเซอร์มาเปิ ดดูผลงานนะจ๊ะ . . .
• HTML ก็คอื ภาษาคอมพิวเตอร์ระดับสูงภาษาหนึง่ ซึง่ ถูกออกแบบมาเพือ่ ใช้ในการ
แสดงผลข้อมูลบนระบบอินเตอร์เน็ท โดยใช้เครือ่ งหมาย < > เป็ นตัวกาหนดหลัก
( เดีย๋ วจะเห็น ) โดยส่วนมากจะใช้คาสัง่ 2 แบบ คือ " เปิ ด " กับ " ปิ ด " เช่น
<BODY> หมายถึง เปิ ดส่วนเนือ้ หา และ </BODY> คือปิ ด(จบ)ส่วนเนือ้ หา และ
มีรูปแบบโครงสร้างทัว่ ไป คือ
โครงสร้างของเอกสาร HTML
<HTML>
<HEAD>
<TITLE>
เอกสาร HTML
</TITLE>
</HEAD>
<BODY>
รายละเอียดต่างๆ
</BODY>
</HTML>
ส่วนเนื้อหาของเอกสาร
BGCOLOR
BACKGROUND
TEXT
TOPMARGIN
BOTTOMMARGIN
RIGHTMARGIN
LEFTMARGIN
LINK
ALINK
VLINK
คือ คาสัง่ เสริมใช้สาหรับกาหนดสีพน้ ื หลังของเว็บเพจ
คือ คาสัง่ เสริมใช้สาหรับกาหนดรูปภาพทีจ่ ะนามาเป็ นพืน้ หลังบนเว็บเพจ
คือ คาสัง่ เสริมใช้สาหรับกาหนดสีของข้อความภายในเว็บเพจ
คือ คาสัง่ เสริมใช้สาหรับกาหนดระยะห่างของเว็บเพจจากทางด้านบนของจอภาพ
คือ คาสัง่ เสริมทีใ่ ช้สาหรับกาหนดระยะห่างของเว็บเพจจากทางด้านล่างของจอภาพ
คาสัง่ เสริมทีใ่ ช้สาหรับกาหนดระยะห่างของเว็บเพจจากทางด้านขวาของจอภาพ
คาสัง่ เสริมทีใ่ ช้สาหรับกาหนดระยะห่างของเว็บเพจจากทางด้านซ้ายของจอภาพ
คือ คาสัง่ เสริมทีใ่ ช้สาหรับกาหนดสีของข้อความทีใ่ ช้เป็ นตัวเชือ่ มโยง (Hyperlink)
ภายในเว็บเพจ
คือ คาสัง่ เสริมทีใ่ ช้สาหรับกาหนดสีของข้อความทีใ่ ช้เป็ นตัวเชือ่ มโยง (Hyperlink)
คือ คาสัง่ เสริมทีใ่ ช้สาหรับกาหนดสีของข้อความทีใ่ ช้เป็ นตัวเชือ่ มโยง (Hyperlink)
หลังจากทีเ่ คยคลิกที่ Hyperlink นัน้ ๆไปแล้ว
ตัวอย่าง
<HTML>
<HEAD>
<TITLE> เอกสาร HTML </TITLE>
</HEAD>
<BODY BGCOLOR=PINK TEXT=RED
TOPMARGIN="100">
โครงสร้างของเอกสาร HTML
</BODY>
</HTML>
<EM>
ตัวเอียง
<EM> ข้อความ
</EM>
<STRONG> ตัวหนา
<STRONG> ข้อความ </STRONG>
<BIG>
<BIG>
ตัวขนาดใหญ่
ข้อความ </BIG>
<SMALL> ตัวขนาดเล็ก
<SMALL>
ข้อความ </SMALL>
<B>
ตัวหนา
<B>
ข้อความ </B>
<I>
ตัวเอียง
<I>
ข้อความ </I>
<U>
ขีดเส้นใต้
<U>
ข้อความ </U>
ตัวอย่าง
<HTML>
<HEAD>
<TITLE> ตัวอักษรแบบ Physical Styles </TITLE>
</HEAD>
<BODY>
<B> ตัวอักษรแบบตัวหนา </B><BR>
<I> ตัวอักษรแบบตัวเอียง </I><BR>
<U> ตัวอักษรแบบขีดเส้นใต้ </U><BR>
</BODY>
</HTML>
<FONT FACE=“Font1,Font2”> ข้อความ </FONT>
ตัวอย่าง
<HTML>
<HEAD>
<TITLE> การกาหนดรูปแบบของตัวอักษร </TITLE>
</HEAD>
<BODY>
<FONT FACE=“AngsanaUPC”>
รูปแบบตัวอักษร แบบ AngsanaUPC</FONT>
</BODY>
</HTML>
<FONT COLOR=ColorName> ข้อความ </FONT>
คาสัง่ นีเ้ ป็ นคาสัง่ ทีใ่ ช้สาหรับกาหนดสีของตัวอักษร เฉพาะตัวอักษรทีต่ ้องการ
<BODY TEXT=ColorName>
คาสัง่ นีเ้ ป็ นคาสัง่ ทีใ่ ช้สาหรับกาหนดสีของตัวอักษรทัง้ เอกสาร
<FONT SIZE=ValueSize> ข้อความ </FONT>
เป็ นคาสัง่ สาหรับกาหนดขนาดของตัวอักษรแบบสมบูรณ์ มีค่าตัง้ แต่ขนาด 1 ถึง 7
<BASEFONT SIZE=Value>
คาสัง่ นีจ้ ะเป็ นการกาหนดขนาดของตัวอักษรทัง้ เอกสาร
<MARQUEE Attribute=Position> ข้อความ </MARQUEE>
โดยที่ Attribute คือ คาสัง่ เสริมทีใ่ ช้ในการกาหนดอักษรวิง่
Position คือ ค่าทีใ่ ช้ในการกาหนดอักษรวิง่
โดยคาสัง่ ทีม่ ี Attribute ในการนามาใช้ ดังนี้
* BEHAVIOR ใช้สาหรับกาหนดลักษณะการเคลือ่ นไหวของข้อความทีอ่ ยู่ระหว่าง
คาสัง่ โดยค่าสาหรับ Attribute มีดงั นี้
- Alternate จะทาให้ขอ้ ความทีอ่ ยู่ระหว่างคาสัง่ วิง่ ไปชนไปชนมาระหว่าง
ขอบซ้าย-ขวา หน้าจอบราวเซอร์
- Scroll จะทาให้ขอ้ ความทีอ่ ยู่ระหว่างคาสัง่ วิง่ ไปจนตัวอักษรหายไปในขอบ
หน้าจอด้านหนึง่ ของบราวเซอร์และจะปรากฏขึน้ ใหม่อกี ครัง้ จากขอบอีกด้าน
- Slide จะทาให้ขอ้ ความทีอ่ ยู่ระหว่างคาสัง่ วิง่ ไปจนถึงขอบของหน้าจอ
บราวเซอร์ด้านหนึง่ แล้วหยุดอยู่กบั ที่
* BGCOLOR ใช้สำหรับกำหนดสี ของพื้นหลังบริ เวณที่ขอ้ ควำมเคลื่อนไหวไปมำ
โดยค่ำของ Attribute ก็คือ ค่ำของชื่อสี
* DIRECTION ใช้สำหรับกำหนดทิศทำงกำรแสดงตัวอักษรที่อยูร่ ะหว่ำงคำสั่ง
โดยค่ำของ Attribute มีอยู่ 4 ตัว ดังนี้
- Down หำกต้องกำรให้ขอ้ ควำมแสดงโดยเลื่อนข้อควำมจำกบนลงล่ำง
- Up
หำกต้องกำรให้ขอ้ ควำมแสดงโดยเลื่อนข้อควำมจำกล่ำงขึ้นข้ำงบน
- Right หำกต้องกำรให้ขอ้ ควำมแสดงโดยเลื่อนข้อควำมจำกด้ำนซ้ำยไปขวำ
- Left หำกต้องกำรให้ขอ้ ควำมแสดงโดยเลื่อนข้อควำมจำกด้ำนขวำไปซ้ำย
* HEIGHT ใช้สำหรับกำรกำหนดควำมสู งของ Block ข้อควำมที่จะแสดง โดยค่ำที่
กำหนดจะมีหน่วยเป็ นพิกเซล
* WIDTH ใช้สำหรับกำรกำหนดควำมกว้ำงของ Block ข้อควำมที่จะแสดง โดยค่ำที่
กำหนดจะมีหน่วยเป็ นพิกเซล
* HSPACE ใช้สำหรับกำหนดระยะห่ ำงของ Block ข้อควำมกับขอบซ้ำย-ขวำ
ของขอบเขต หรื อพื้นที่ที่เรำต้องกำรแสดงข้อควำม โดยค่ำที่กำหนดจะมีหน่วยเป็ นพิกเซล
* VSPACE ใช้สำหรับกำหนดระยะห่ำงด้ำนบนและด้ำนล่ำงของตัวอักษรวิ่ง
โดยกำรกำหนดขนำดมีหน่วยเป็ นพิกเซล
ตัวอย่าง
<HTML>
<HEAD>
<TITLE> การสร้างตัวอักษรวิง่ </TITLE>
</HEAD>
<BODY>
<MARQUEE WIDTH=60% HEIGHT=20%
BGCOLOR=Pink BEHAVIOR=Alternate>
การสร้างตัวอักษรวิง่ </MARQUEE>
</BODY>
</HTML>
<Hx> ข้อความ </Hx>
โดยที่ Hx เป็ นคาสัง่ ทีใ่ ช้สาหรับกาหนดขนาดของหัวข้อของเอกสาร
โดยที่ x มีตงั้ แต่ 1 ถึง 6
จงสร้างข้อความทีเ่ ป็ นตัวอักษรวิง่ เป็ น ชือ่ -นามสกุล โดยมีขอ้ กาหนดดังนี้
- ตัวอักษรแบบ FreesiaUPC
- ตัวอักษรมีสแี ดง พืน้ หลังของตัวอักษรสีชมพู
- ขีดเส้นใต้ตวั อักษร
- ตัวอักษรมีขนาด 6
- ตัวอักษรวิง่ ไปชนขอบด้านหนึง่ แล้วงิ่ ย้อนกลับ
- ความกว้างของขอบทีแ่ สดงข้อความตัวอักษรวิง่ คือ 300 Pixel
เฉลยแบบฝึ กหัด
การขึ้นย่อหน้าใหม่
<P ALIGN=Position> ข้อความ </P>
โดยที่ ALIGN คือ คาสัง่ เสริมทีใ่ ช้ในการจัดข้อความหรือรูปภาพให้อยู่ใน
ตาแหน่งทีต่ ้องการ
Position คือ ค่าทีใ่ ช้สาหรับระบุตาแหน่งของข้อความ ซึง่ ได้แก่
- Left ใช้สาหรับการจัดข้อความให้อยู่ชดิ ซ้ายของหน้าจอ
- Center ใช้สาหรับการจัดข้อความให้อยู่กงึ่ กลางของหน้าจอ
- Right ใช้สาหรับการจัดข้อความให้อยู่ชดิ ขวาของหน้าจอ
การขึ้นบรรทัดใหม่
ข้อความ <BR>
การจัดข้อความให้อยู่กึ่งกลาง
<CENTER> ข้อความ </CENTER>
การสร้างเส้นตรงแนวนอน
ข้อความ <HR Attribute=Value>
โดยที่ Attribute คือ คาสัง่ เสริมทีใ่ ช้ในการค่าต่างๆ ในการสร้างแนวนอน
Value คือ ค่าทีใ่ ช้ในการกาหนดเส้นแนวนอน
การสร้างเส้นแนวนอน
<HR> รูปแบบคาสัง่ <HR Attribute=Value>
โดยที่ Attribute คือ คาสัง่ เสริมทีใ่ ช้ในการค่าต่างๆ ในการสร้างเส้นแนวนอน
Value คือ ค่าทีใ่ ช้ในการกาหนดเส้นแนวนอน
คาสัง่ เสริม(Attribute) มีดงั นี้
ALIGN ใช้สาหรับจัดตาแหน่งของเส้น โดยมีค่าทีใ่ ช้ในการกาหนดตาแหน่ง คือ
- Left ใช้สาหรับการกาหนดเส้นให้ชดิ ซ้าย
- Center ใช้สาหรับการกาหนดเส้นให้อยู่กงึ่ กลาง
- Right ใช้สาหรับการกาหนดเส้นให้ชดิ ขวา
SIZE ใช้สาหรับกาหนดความหนาของเส้น
WIDTH ใช้สาหรับกาหนดความกว้างของเส้น
COLOR ใช้สาหรับกาหนดสีของเส้น
การแทรกรูปภาพ
<IMG SRC=filename>
การแทรกข้อความแทนรูปภาพ
ข้อความ <IMG ALT=“Message”>
การจัดตาแหน่งข้อความและรูปภาพ
ข้อความ <IMG ALIGN=Position>
โดยที่ Position คือ ตาแหน่งทีท่ ตี่ ้องการจัดวางรูปภาพ ซึง่ สามารถกาหนดการ
จัดวางรูปภาพได้ ดังนี้
- Absbottom ทาให้ขอ้ ความทีอ่ ยู่ลอ้ มรอบรูปภาพจะวางตัวอยู่ส่วนล่างของรูป
- Absmiddle ทาให้ขอ้ ความทีอ่ ยู่ลอ้ มรอบรูปภาพจะวางตัวอยู่กงึ่ กลางของความของรูป
- Baseline ทาให้ขอ้ ความทีอ่ ยู่ลอ้ มรอบรูปภาพจะวางตัวอยู่แนวเดียวกับเส้นฐาน
(Baseline) ของรูป
- Bottom ทาให้ขอ้ ความทีอ่ ยู่ลอ้ มรอบรูปภาพจะวางตัวอยู่ส่วนล่างของรูป เช่นเดียวกับ Absbottom
- Middle ทาให้ขอ้ ความทีอ่ ยู่ลอ้ มรอบรูปภาพจะวางตัวอยู่กงึ่ กลางของความสูงของรูปภาพ เช่นเดียวกับ Absmiddle
- Left
ทาให้รูปภาพวางอยู่ทางด้านซ้ายของเว็บเพจ
- Right ทาให้รูปภาพวางอยู่ทางด้านขวาของเว็บเพจ
- Top
ทาให้รูปภาพวางอยู่เหนือเส้นฐาน
- Texttop ทาให้ขอ้ ความทีล่ อ้ มรอบรูปภาพจะวางตัวอยู่ในระดับของรูปภาพ
การจัดระยะห่างของข้อความกับรูปภาพ
<IMG HSPACE> ใช้สาหรับระบุช่องว่างระหว่างรูปภาพกับข้อความหรือวัตถุทวี่ างอยู่
ขอบรูปภาพ ทางด้านซ้าย - ขวา
ตัวอย่าง <IMG HSPACE=Pixels>
<IMG VSPACE> ใช้สาหรับระบุช่องว่างระหว่างรูปภาพกับข้อความหรือวัตถุทวี่ างอยู่
ขอบรูปภาพ ทางด้านบน - ล่าง
ตัวอย่าง <IMG VSPACE=Pixels>
การปรับแต่งขนาดของรูปภาพ
<IMG WIDTH> ใช้สาหรับระบุความกว้างของรูปภาพทีต่ ้องการจะแทรก
ตัวอย่าง <IMG WIDTH=Pixels>
<IMG HEIGHT> ใช้สาหรับระบุความสูงของรูปภาพทีต่ ้องการจะแทรก
ตัวอย่าง <IMG HEIGHT=Pixels>
การควบคุมข้อความรอบรูปภาพ
<BR Clear> เป็ นคาสัง่ ทีใ่ ช้สาหรับกาหนดข้อความทีอ่ ยู่รอบๆ รูปภาพว่าต้องการให้ขอ้ ความอยู่
ด้านใดของรูปภาพ
ตัวอย่าง <BR Clear=Position>
โดยที่ Position คือ ค่าทีใ่ ช้กาหนดตาแหน่งของข้อความ โดยสามารถกาหนดได้ ดังนี้
- Left ทาให้ด้านซ้ายของรูปภาพว่าง ไม่มขี อ้ ความใดอยู่เลย
- Right ทาให้ด้านขวาของภาพว่าง
- All ทาให้ทงั้ ด้านขวาและด้านซ้ายของภาพว่าง
การกาหนดพืน้ หลัง
<Body Background=Filename>
ตัวอย่าง <BODY BACKGROUND=pic\boy.jpg
แบบฝึ กหัด
จงใช้ HTML ในการเขียนประวัตสิ ่วนตัวไม่ต่ากว่า 10 บรรทัด โดยกาหนดให้ขอ้ ความแต่ละบรรทัดอยู่กงึ่ กลางหน้าจอ
ของบราวเซอร์ และบรรทัดสุดท้ายกาหนดให้สร้างเส้นตรงแนวนอนสีเขียว ชิดขอบด้านขวาและมีความกว้าง 300
Pixel โดยมีรูปภาพประกอบไม่ต่ากว่า 2 รูป โดยกาหนดให้
- รูปภาพที่ 1 ให้วางไว้ส่วนบนสุดของเอกสารโดยอยู่กงึ่ กลาง มีระยะห่างจาก
ข้อความบรรทัดแรก 30 Pixel และกาหนดให้รูปภาพมีขนาด
100x130 Pixel
- รูปภาพที่ 2 ให้วางรูปภาพอยู่ในตาแหน่ง
ด้านซ้ายของตัวอักษร และกาหนดให้
รูปภาพมีขนาด 100x100 Pixel
เฉลยแบบฝึ กหัด
การเชื่อมโยงเอกสาร
การเชือ่ มโยงเอกสารสามารถแบ่งได้เป็ น 2 ประเภท ดั งนี้
1. INTERNAL LINK เป็ นการเชื่อมโยงข้อมูลภายใน
เอกสารเดียวกัน หรือภายในเว็บไซต์เดียวกัน
2. EXTERNAL LINK เป็ นการเชื่อมโยงข้อมูลภายนอก
ไปยั งเว็บไซต์อื่นๆ
การเชื่อมโยงข้อมูลภายในเอกสารเดียวกัน
• คาสั่ ง <A NAME> เป็ นคาสั่ งทีใ่ ช้ในการกาหนดชื่อส่วน
ต่างๆ ที่อยู่ในหน้าเอกสารทีต่ ้องการทาการเชื่อมโยง
เพือ่ ความสะดวกในการใช้คาสั่ งเชือ่ มโยงข้อมูลภายใน
เอกสาร
รูปแบบคาสั่ ง <A NAME=Label>........ข้อความ
......</A>
• คาสั่ ง <A HREF> เป็ นคาสั่ งทีใ่ ช้กาหนดเป้าหมายที่
ต้องการเชือ่ มโยงไปหา โดยการใส่ Label ของข้อมูลที่
ต้องการเชือ่ มโยง และใส่ข้อความทีแ่ สดงให้ทราบได้
เชื่อมโยงไปยั งส่วนใดของหน้าเอกสาร
รูปแบบคาสั่ ง <A HREF=#Label>........ข้อความ
......</A>
ตัวอย่างการเชื่อมโยงหน้าเดียวกัน
เฉลย
การเชื่อมโยงไปยังไฟล์อ่ื นหรือ Web Page อื่ น
• คาสั่ ง <A HREF> ใช้ในการเชื่อมโยงไปยั งไฟล์ อื่น ซึ่งเป็ นคาสั่ งเดียวกั น
กั บการเชื่อมโยงข้อมูลภายในเอกสารเดียวกั น แต่มวี ิธีการเรียกใช้คาสั่ ง
ทีแ่ ตกต่างกั น โดยจะมีการระบุชอื่ หน้าเว็บทีต่ ้องการเชื่อมโยงตามด้วย
.HTML (หากเอกสารนั้ นเป็ นเอกสาร HTML)
รูปแบบคาสั่ ง
<A HREF=/Path/Filename.html>........ข้อความ......</A>
โดยที่ Path เป็ นการระบุตาแหน่งของไฟล์ ทตี่ ้องการเชื่อมโยงไปถึง ซึ่ง
ไฟล์ นั้นอาจจะอยู่ในโฟลเดอร์อื่น จึ งต้องมีการระบุโฟลเดอร์ทไี่ ฟล์ นั้นอยู่
ด้วย Filename เป็ นชื่อไฟล์ ทตี่ ้องการเชื่อมโยงไปถึง
ตัวอย่างการเชือ่ มโยงไปยังไฟล์อนื่
เฉลย
การเชื่อมโยงไปยังไฟล์อื่นโดยมีการกาหนดตาแหน่ง
รูปแบบคาสั่ง
<A HREF=/Path/Filename.html#Label>..ข้อความ…</A>
โดยที่ Path คือ การระบุตาแหน่งของไฟล์ทตี่ ้องการเชือ่ มโยงไปถึง ซึง่ ไฟล์นนั้
อาจจะอยู่ในโฟลเดอร์อนื่ จึงต้องมีการระบุโฟลเดอร์ทไี่ ฟล์นนั้ อยู่ด้วย
Filename คือ ชือ่ ไฟล์ทตี่ ้องการเชือ่ มโยงไปถึง
Label คือ ชือ่ ของหัวข้อของข้อมูลทีต่ ้องการเชือ่ มโยงไปถึง ซึง่ ต้องเป็ นชือ่ ที่
อยู่ในไฟล์นนั้ ด้วย
/A
คือ คาสัง่ ปิ ดคาสัง่ A
ตัวอย่างการเชือ่ มโยงไปยังไฟล์อนื่ โดยมีการกาหนดตาแหน่ง
เฉลย
การเชื่อมโยงไปยัง Web Sites อืน่
รู ปแบบคาสั่ ง
<A HREF=URL>……..ข้อควำม……..</A> หรื อ
<A HREF=FTP://FtpServer>
โดยที่ URL คือ ชื่อของเว็บไซต์หรื อ IP Address ของเว็บไซต์ที่ตอ้ งกำร
เชือ
่ มโยงถึง
FTP คือ ค่ำที่ใช้กำหนดในกำรเชื่อมโยงไปยังแหล่งที่ให้บริ กำรไฟล์ FTP
FtpServer คือ ชื่อของเครื่ อง Server ที่ให้บริ กำรไฟล์ Ftp
/A
คือ คำสัง่ ปิ ดคำสัง่ A
ตัวอย่ำงกำรเชื่อมโยงไปยังเว็บไซต์อื่น
เฉลย
การเชื่อมโยงโดยใช้รปู ภาพ
รูปแบบคาสั่ง
<A HREF=URL><IMG SCR=Filename></A>
โดยที่ URL คือ ชือ่ ของเว็บไซต์หรือ IP Address ของเว็บไซต์ทตี่ ้องการเชือ่ มโยงถึง
<IMG SCR> คือคาสัง่ ทีใ่ ห้ในการแทรกรูปภาพ
Filename คือชือ่ ไฟล์รูปภาพทีจ่ ะนามาใช้สาหรับการเชือ่ มโยงข้อมูล
/A
คือ คาสัง่ ปิ ดคาสัง่ A
ตัวอย่าง
การใช้การเชื่อมโยงกับจดหมายอิ เล็กทรอนิกส์ (E-Mail)
รูปแบบคาสั่ง
<A HREF=Mailto:E-Mail Address>…ข้อความ…</A>
โดยที่ Mailto
เป็ นการกาหนดการเชือ่ มโยงโดยการใช้อเี มล์
E-Mail Address ชือ่ อีเมล์ทตี่ ้องการเชือ่ มโยงถึง
/A
คือ คาสัง่ ปิ ดคาสัง่ A
ตัวอย่าง
การสร้างลาดับรายการแบบเรียงลาดับข้อมูล (OrderedList)
การสร้างลาดับรายการแบบเรียงลาดับ คือ รายการทีป่ ระกอบไปด้วยตัวอักษรหรือตัวเลข
ทีมกี ารเรียงลาดับในการแสดงผลปรากฏอยู่หน้าข้อความทีเ่ ป็ นรายการนัน้ ๆ เป็ นข้อมูล
ทีม่ กี ารอธิบายอย่างเป็ นขัน้ ตอน โดยการลาดับรายการรูปแบบนีจ้ ะใช้ตวั เลขหรือ
ตัวอักษรเป็ นเครือ่ งหมายในการลาดับรายการ ซึง่ มีรูปแบบคาสัง่ ดังนี้
รูปแบบคาสั่ง
<OL TYPE=Number_Type Start=Number>
<LI>………รายการ………….
<LI>………รายการ………….
<LI>………รายการ………….
</OL>
การสร้างลาดับรายการแบบเรียงลาดับข้อมูล (OrderedList)
โดยที่ OL คือ คาสัง่ ทีใ่ ช้สาหรับการเรียกใช้คาสัง่ Ordered List
TYPE คือ คาสัง่ เสริม (Attribute) ทีใ่ ห้กาหนดว่าจะแสดงรายการโดยการใช้
หัวข้อรูปแบบใด
Number_Type คือ ชนิดของเครือ่ งหมายทีน่ ามาใช้ในการลาดับรายการของข้อมูลได้แก่
A ตัวอักษรภาษาอังกฤษพิมพ์ใหญ่
a ตัวอักษรภาษาอังกฤษพิมพ์เล็ก
I ตัวเลขโรมันพิมพ์ใหญ่
i ตัวเลขโรมันพิมพ์เล็ก
1 ตัวเลขอารบิค
การสร้างลาดับรายการแบบเรียงลาดับข้อมูล (OrderedList)
Start เป็ นคาสัง่ เสริม (Attribute) ทีใ่ ช้สาหรับกาหนดค่าเริม่ ต้นสาหรับหัวข้อแรก
สาหรับหัวข้ออันดับต่อไปจะถูกกาหนดขึน้ เองโดยอัตโนมัต ิ
Number คือ ค่าเริม่ ต้นทีต่ ้องการใช้ลาดับรายการ เช่น เริม่ ต้นที่ A
LI
คือ คาสัง่ ทีใ่ ช้ในการกาหนดรายการต่างๆ
/OL
คือ คาสัง่ ปิ ดการใช้คาสัง่ OL
ตัวอย่าง
การสร้างลาดับรายการแบบไม่เรียงลาดับข้อมูล (Unordered List)
การสร้างลาดับรายการแบบไม่เรียงลาดับข้อมูล คือ รายการทีป่ ระกอบไปด้วยสัญลักษณ์
ต่างๆ วางไว้ขา้ งหน้าข้อความ หรือรูปภาพทีเ่ ป็ นรายการ (List) สัญลักษณ์ทมี่ กั
นิยมใช้กม็ รี ูปสีเ่ หลีย่ มทึบ (Square) รูปวงกรมทึบ (Disc) หรือรูปวงกลม
(Circle) สาหรับรูปแบบคาสัง่ ทีใ่ ช้ในการสร้างลาดับรายการ แบบนี้ คือ
รูปแบบคาสั่ง
<UL TYPE=Bullet_Type>
<LH>…………หัวข้อ…..................
<LI>………รายการ………….
<LI>………รายการ………….
</UL>
การสร้างลาดับรายการแบบไม่เรียงลาดับข้อมูล (Unordered List)
โดยที่ UL คือ คาสัง่ ทีใ่ ช้ในการเรียกใช้ Unordered List
Type คือ คาสัง่ ทีใ่ ช้สาหรับกาหนดค่าของ Bullet Type หรืออาจไม่ระบุกไ็ ด้
Bullet Type คือ รูปแบบของสัญลักษณ์ทจี่ ะนามาใช้ในการลาดับรายการซึง่
สามารถกาหนดได้ดงั นี้
- Square จะทาให้มรี ูปสีเ่ หลีย่ มทึบ วางหน้าข้อความรายการ (List)
- Disc จะทาให้มรี ูปวงกลมทึบ วางหน้าข้อความรายการ (List)
- Circle จะทาให้มรี ูปวงกลมกลวง วางหน้าข้อความรายการ (List)
LH คือ คาสัง่ ทีใ่ ช้สาหรับกาหนดหัวข้อรายการ
LI คือ คาสัง่ ทีใ่ ช้ในการกาหนดรายการต่างๆ
ตัวอย่าง
The End