เริ่มต้นกับการสร้าง Web Page!!! 
Lesson 5


ในบทเรียนนี้เราจะมาศึกษาถึงวิธีการแสดง List กัน โดยมีทั้ง ORDERED List. และ UNORDERED List.
 
นี่คือตัวอย่างของ ORDERED
  1. รายละเอียด 1
  2. รายละเอียด 2
  3. รายละเอียด 3
  4. รายละเอียด 4
นี่คือตัวอย่างของ UNORDERED
  • รายละเอียด 1
  • รายละเอียด 2
  • รายละเอียด 3
  • รายละเอียด 4
 
ในอันดับแรกเราจะสร้าง UNORDERED List. กันก่อน

<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล
</BODY>
 
ทดสอบการแสดงผล



ต่อไปเราจะสร้าง List ลงไปโดยการเพิ่ม Unordered List Tags.   <UL>  </UL>

<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล
<UL>
</UL>
</BODY>
 
ทดสอบการแสดงผล



ต่อไปเพิ่ม List Item.  หรือรายละเอียดลงไป  <LI>

<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล
<UL>
<LI>รายละเอียด 1
</UL>
</BODY>
 
ทดสอบการแสดงผล 
  • รายละเอียด 1



เพิ่มรายละเอียดให้มากขึ้น

<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล
<UL>
<LI>รายละเอียด 1
<LI>รายละเอียด 2
<LI>รายละเอียด 3
<LI>รายละเอียด 4
</UL>
</BODY>
 
ทดสอบการแสดงผล 
  • รายละเอียด 1
  • รายละเอียด 2
  • รายละเอียด 3
  • รายละเอียด 4
Bingo!!!  เท่านี้ก็ได้ List แบบ Unordered List มาแสดงผลเรียบร้อยแล้ว



ทำอย่างไรในการสร้าง Ordered List ? ง่ายมากโดยการเปลี่ยน <UL> tag เป็น <OL>.

<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล
<OL>
<LI>รายละเอียด 1
<LI>รายละเอียด 2
<LI>รายละเอียด 3
<LI>รายละเอียด 4
</OL>
</BODY>
 
ทดสอบการแสดงผล 
  1. รายละเอียด 1
  2. รายละเอียด 2
  3. รายละเอียด 3
  4. รายละเอียด 4
แค่เพียงเปลี่ยนจาก <UL> Tag. มาเป็น <OL> ก็สามารถเปลี่ยนมาแสดงแบบ Ordered List ได้แล้ว



ต่อไปเราจะมาว่ากันเรื่องเส้นกั้น หรือ "Horizontal Rule."

<BODY BGCOLOR="#FFFFFF">
<HR>
</BODY>
 



เราสามารถที่จะเพิ่มข้อกำหนดของเส้นได้ในลักษณะต่างๆ......
การกำหนดความกว้าง WIDTH
    - กำหนดเป็น % ของ Windows
    - กำหนดเป็น Pixel ของจอภาพ

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
</BODY>
 













การกำหนดตำแหน่งของเส้น

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% ALIGN=CENTER>
</BODY>
 







เราสามารถที่จะกำหนด Thickness... ได้

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
</BODY>
 









และเราสามารถกำหนดให้เป็น Solid Line. ได้ด้วย

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1 NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE>
<HR WIDTH=60% SIZE=8 NOSHADE>
<HR WIDTH=60% SIZE=15 NOSHADE>
</BODY>
 









เวลาที่เราพิมพ์ข้อความต่างๆลงไปแล้ว Browser แสดงข้อความแตกต่างจากที่เราพิมพ์เราจะทำอย่างไรกัน

<BODY BGCOLOR="#FFFFFF">

                 \|/
                (@ @)
     +----oOO----(_)----------------------+
     |      BARRY GOLDWATER    |
     |                 for               |
     |              President          |
     +-----------------oOO-----------------+
               |__|__|
                ||  ||
               ooO Ooo
</BODY>
 
\|/ (@ @) +----oOO----(_)-----------+ | BARRY GOLDWATER | | for | | President | +-----------------oOO-----+ 
|__|__| || || ooO Ooo 



นับเป็นการดีที่มี  <PRE> (Preformat) Tag. ที่สามารถช่วยให้แสดงผลที่หน้าจอเหมือนกับสิ่งที่เราพิมพ์ลงไป

<BODY BGCOLOR="#FFFFFF">
<PRE>

                  \|/
                (@ @)
     +----oOO----(_)-------------------+
     |   BARRY GOLDWATER   |
     |              for              |
     |          President           |
     +-----------------oOO-------------+
               |__|__|
                ||  ||
               ooO Ooo
</PRE>
</BODY>
 
                 \|/  
                (@ @) 
     +----oOO----(_)-------------------+ 
     |   BARRY GOLDWATER   | 
     |              for              | 
     |          President           | 
     +-----------------oOO-------------+ 
               |__|__|  
                ||  || 
               ooO Ooo



และแล้วเมื่อเราได้เรียนรู้มาถึงจุดนี้เราก็พอที่จะมีความสามารถในการเขียน Web Page ด้วย HTML กันบ้างพอสมควร
ในบทสุดท้ายเราจะได้กล่าวถึงเรื่องทั่วๆไปที่ควรรู้ในการทำ Home Page ของเรา
 

 

< - - BACK          NEXT - - >

หน้าแรก

 
Lesson1
Lesson2
Lesson3
Lesson4
Lesson5
Lesson6
 
Copyright@2002/01/12 by wirat nopparit
Software & Programming
E-Mail : wirat_n@yahoo.com