SlideShare a Scribd company logo
1 of 18
Download to read offline
บทที่ 3
การจัดรูปแบบและการ
แสดงแบบรายการ
การจัดรูปแบบและการแสดงแบบรายการ
การจัดรูปแบบโฮมเพจให้สวยงามจะมีการเขียนคาสั่ง
เพื่อให้แสดงผลลัพธ์ด้วยเว็บเบราเซอร ์จะต้องกดปุ่ม Enter
ที่แป้ นพิมพ์ เพื่อขึ้นบรรทัดใหม่ในขณะสร ้างไฟล์นั้นยังมี
โปรแกรมเว็บตัวใดที่รู้จักคาสั่งที่ขึ้นบรรทัดใหม่ที่เกิดจาการ
กดแป้ นพิมพ์เลย ดังนั้นจึงต้องมีการเขียนคาสั่งขึ้นมาเพื่อ
จะมารู้ถึงคาสั่งที่ใชในการกาหนดรูปแบบต่างๆเพื่อให้มีเว็บ
เพจที่สวยงามมากยิ่งขึ้น
รูปแบบ <BR>
อธิบาย เป็นคาสั่งสาหรับการสั่งให้แสดงผลในบรรทัดใหม่ให้ใส่คาสั่งนี้ในตาแหน่ที่
ต้องการให้การแสดงผลข้อมูลนั้นขึ้นบรรทัดใหม่
การย่อหน้าใหม่
รูปแบบ <P ALIGN = align type> </P> หรือ <P>
อธิบาย ต้องการใชคาสั่งนี้เมื่อต้องการขึ้นบรรทัดใหม่ เหมือน <BR> แต่จะเว้นบรรทัด
ใหม่ให้อีกหนึ่งบรรทัดจะใช้คาสั่ง <P> อย่างเดียวก็ได้โดยไม่ต้องมีคาสั่งปิดจะไว้หน้าหรือหลัง
ข้อความที่ต้องการขึ้นก็ได้แต่ถ้าใช้คาสั่ง <P ALIGN = align type> ต้องมีคาสั่งปิด </P> ด้วยโดย
align type สามารถใช้ CENTER, LEFT หรือ RIGHT ก็ได้เช่น < P ALIGN = CENTER>
ข้อความนี้ก็จะอยู้ตรงกลางทันที </P>
การขึ้นบรรทัดใหม่
เส้นคั่น
รูปแบบ <HR ALIGN = align type COLOR = color SIZE = n WIDTH = n
NOSHADE>
อธิบาย ใช ้เมื่อต้องการแบ่งข้อความบนจอภาพให้มีเส้นคั่นที่ไม่ใช่ขีดเส้นใต้
ตัวอักษรใส่ไว้ ณ ตาแหน่งที่ต้องการสามารถกาหนดตาแหน่ง, สี, ขนาดของความ
หนา, ความยาวหรือกาหนดแบบเส้นทึบก็ได้โดย
ALIGN = CENTER, LEFT, RIGHT
COLOR = ตามสีที่ต้องการเป็ นรหัสสี R-G-B
SIZE = เป็ นตัวเลขบอกขนาด 1 ถึง 7 และ -1 ถึง -7
WIDTH = กาหนดความหนาของเส้นเป็ นเปอร ์เซ็นต์
NOSHADE = กาหนดให้เส้นเป็ นเส้นทึบ
การแสดงแบบรายการลักษณะต่างๆ
ในการแสดงข้อมูลบนเว็บเพจ นอกจากแสดงผลแบบปกติทั่วไป
แล้วบางครั้งอาจมีความจาเป็ นต้องจัดรูปแบบการแสดงผลให้เป็ นแบบ
ของรายการ (list) คือการแสดงข้อมูล ในลักษณะเป็นหัวข้อ ซึ่งอาจมี
คาอธิบายหรือไม่มีก็ได้ การแสดงข้อมูลแบบรายการแบบลาดับ (ใช ้
หมายเลขกากับ) หรือรายการแบบไม่มีลาดับ (ใช ้สัญลักษณ์กากับ)
แต่ไม่ว่าจะเลือกให้มีการแสดงผลรายการแบบใดก็ตามทั้ง 2 ลักษณะ
ก็มีลักษณะการทางานที่ดหมือนกัน
รายการแบบใช้สัญลักษณ์ต่างๆ
รูปแบบ <UR > ตัวเปิด
<LI> ข้อมูลที่นามาแสดง
<LI> ข้อมูลที่นามาแสดง
</UL> ตัวเปิด
อธิบาย เป็ นการแสดงผลโดยใช้สัญลักษณ์ในการกากับรายการต่างๆ และสามารถ
กาหนดลักษณะของสัญลักษณ์ได้โดยใช ้คาสั่ง Type=N ซึ่ง N แทน Circle=วงกลม disc=
วงกลมทึบ หรือ square=สี่เหลี่ยม โดยอยู่ในคาสั่งของ <UL> ถ้าต้องการให้สัญลักษณ์
เหมือนกันทุกราย แต่ถ้าต้องการให้แต่ละรายการไม่เหมือนกันให้ใส่ในส่วนของ <LI> เช่น
<UL> <LI Type = disc> รายการที่ 1 <LI Type = disc> รายการที่ 2 <LI Type = disc>
รายการที่ 3 <UL>
รายการแบบใช้ตัวเลขกํากับ (Numbered lists)
รูปแบบ <OL> ตัวเปิด
<LI ข้อมูลที่นามาแสดง
<LI> ข้อมูลที่นามาแสดง
</OL> ตัวปิด
อธิบาย
เป็ นการกาหนดรายการ โดยใช้ตัวเลขกากับเช่น 1, I หรือตัวอักษรภาษา อังกฤษ
ยกเว้นภาษาไทยและสามารถกาหนดค่าเริ่มต้นไว้ที่ <OL> โดยใส่ค่า START=n โดย n
= ตัวเลขที่ต้องการเริ่มต้นและ TYPE=n โดย n คือตัวอักษรแทนที่ด้วย a, A, I, 1 ซึ่ง
เป็นชนิดของค่า เริ่มต้นตามตัวอย่างจะเริ่มต้นที่ 3 ชนิดเป็น a เช่น
<OL START=3 TYPE=a>
<LI>รายการที่ 1
<LI>รายการที่ 2
<LI>รายการที่ 3
</OL>
c.รายการที่ 1
d.รายการที่ 2
e.รายการที่ 3
เรายังสามารถใช ้คาสั่ง TYPE=n ในส่วนของ <LI> ได้แต่ค่าเริ่มต้นต้อง
เป็นไปตาม ค่าดังกล่าวข้างต้นให้สังเกตตามตัวอย่าง
<OL>
<LI TYPE=>รายการที่ 1 <LI>รายการที่ 2 <LI>รายการที่ 3
</OL>
เว็บเบราเซอร ์จะแสดงออกมาเป็น
i.รายการที่ 1
ii.รายการที่ 2
iii.รายการที่ 3
<OL>
<LI Type-a>รายการที่ 1
<LI>รายการที่ 2
<LI>รายการที่ 3 11
</OL>
เว็บเบราเซอร ์จะแสดงออกมาเป็ น
a.รายการที่ 1
b.รายการที่ 2
c.รายการที่ 3
ตัวอย่าง
รายการแบบคําจํากัดความ (Definition lists)
<DL>ตัวเปิด
<DT>คาจากัดความ
<DD>คาอธิบาย
<DT> คาจากัดความ
<DD> คาอธิบาย
</DL> ตัวปิด
<DL>
<DT>Rajabhat coins TTVH TT.
<DD>RajabhatInstitute Phetchaburi
</DL>
เว็บเบราเวอร ์จะแสดงออกมาเป็น
ตัวอย่าง Rajabhat Rajabhat Institute
Phetchaburi
รายการแบบกลุ่ม (Performatted Text)
รูปแบบ <PRE>...</PRE>
อธิบาย การใช้คาสั่งนี้ไม่สามารถใช้กับภาษาไทยได้ ใช้ได้แต่ภาษาอังกฤษอย่าง เดียว
ข้อความที่อยู่ภายในคาสั่งจะมีขนาดเท่ากันทุกตัวแสดงข้าอมูลที่อยู่ในรูปของตารางหรือรายงาน
แผนผังอย่างง่าย ๆ เช่น
Extended Quotations
รูปแบบ <BLOCKQUOTE>...</BLOCKQUTE>
อธิบาย คาสั่งนี้สามารถแก้ไขปัญหาการใช ้ภาษาไทยได้การแสดงผลข้อความจะเยื้องขวาและจัดข้อความให้ตัวอักษร
ตัวแรกของบรรทัดเริ่มที่ตาแหน่งเดียวกัน เช่น <BLOCKQUOTE><P>Rajabhat Institute Phetchaburi</P> <P>
Rajabhat Institute Phetchaburi is the oldest higher education institute in the western region of
เว็บเบราเซอร ์จะแสดงผลเป็น
Rajabhat Institute Phetchaburi
Rajabhat Institute Phetchaburi is the oldest higher education institute in the western region of
Thailand.ITIT RESA
----sunya,----
ข้อความที่ระบุสถานที่โดยเฉพาะ Address Cilation
รูปแบบ <ADDRESS>...</ADDRESS>
อธิบาย ใช ้เมื่อต้องการจะพิมพ์ที่อยู่ของท่านเพื่อให้ผู้ที่เข้ามาใช ้เว็บเพจสามารถ ติดต่อกับท่านได้รูปแบบ
ตัวอักษรเป็ นตัวเอน เช่น
<ADDRESS>
Sunya teeradech-upatum
Rajabhat Institute Phetchaburi
Phetchaburi
Tel & Fax : 032-424168
E-Mail : sunya@diamond.rajabhat.edu
<ADDRESS>
การอ้างอิงข้อความ (Cilation)
รูปแบบ <CITE>...</CITE>
อธิบาย ใช้แสดงข้อความที่จะอ้างถึงแหล่งข้อมูลภายนอกหรือคาเฉพาะที่อธิบาย ความหมายไว้
ก่อนหน้านี้แล้ว
<CITE>
Sunya teeradech-upatum
Rajabhat Institute Phetchaburi
Phetchaburi
Tel & Fax : 032-424168
E-Mail : sunya@diamond.rajabhat.edu
</CITE>
การแสดงคาย่อ (abbreviation)
รูปแบบ <ABBR TITLE = “ข้อความ”>...</ABBR>
อธิบาย เป็ นการใช้แสดงและขยายความคาย่อที่มีในเนื้อความ โดยส่วนใหญ่
จะ แสดงผลข้อความลักษณะตัวอักษรที่เป็ นปกติเท่านั้น เช่นฃ
<ABBR TITLE = “ประจวบคีรีขันธ์”> ประจวบฯ </ABBR>เป็ นจังหวัด ที่มีความยาว
มากที่สุด...
แสดงอักษรย่อ (acronym)
รูปแบบ <ACRNYM TITLE = “ข้อความ” ...</ACRNYM>
อธิบาย เป็ นการใช้แสดงและขยายความอักษรย่อที่มีใช้ในเนื้อความโดยส่วน
ใหญ่ ถ้าจะแสดงผลข้อความในลักษณะตัวอักษรที่เป็ นปกติเท่านั้น เช่น
<ACRNYM TITLE="File Tramfer Protocol”> FTP
</ACRNYM > เป็ นโพรโตคอลสาหรับใช้รับส่งไฟล์ข้อมูล
การกาหนดทิศทางการอ่าน-เขียนข้อความ
รูปแบบ BDO DIR = “LIR or RTL”>...</BD0>
อธิบาย ใช้กาหนดทิศทางการอย่างการเขียนข้อความ ตามลักษณะของภาษา
ต่าง ประเทศหรือเป็ นแบบย้อนกลับ เช่น
(BDO DIR = “LIR>123456789/ABCD</BD0>
(BDO DIR = “RTL”>DCBA/987654321</BDO>
Thank You

More Related Content

Similar to 3 html (6)

Spat Db 3 Intro Sql
Spat Db 3 Intro SqlSpat Db 3 Intro Sql
Spat Db 3 Intro Sql
 
Lernning 15
Lernning 15Lernning 15
Lernning 15
 
วัฒนาอ่อนนุ้ย
วัฒนาอ่อนนุ้ยวัฒนาอ่อนนุ้ย
วัฒนาอ่อนนุ้ย
 
บทที่5 ข้อมูลชนิดอาร์เรย์และสตริง
บทที่5 ข้อมูลชนิดอาร์เรย์และสตริงบทที่5 ข้อมูลชนิดอาร์เรย์และสตริง
บทที่5 ข้อมูลชนิดอาร์เรย์และสตริง
 
53011213098
5301121309853011213098
53011213098
 
ตัวแปรชุดและตัวแปรอักขระ
ตัวแปรชุดและตัวแปรอักขระ ตัวแปรชุดและตัวแปรอักขระ
ตัวแปรชุดและตัวแปรอักขระ
 

3 html