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

เรามาเรียนรู้บางสิ่งเกี่ยวกับการทำงานของ Browser กันก่อน
ตัวอย่างแรก...

<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล
ของ Browser
</BODY>
 
ทดสอบการแสดงผล ของ Browser
และลองดูตัวอย่างต่อไป

<BODY BGCOLOR="#FFFFFF">
สวัสดี
ลองดูซิ
ว่ามีการจัดเรียงบรรทัด
เป็นอย่างไร ?
</BODY>
 
สวัสดี ลองดูซิ ว่ามีการจัดเรียงบรรทัด เป็นอย่างไร ?
จะเห็นได้ว่าสิ่งที่ Browser แสดงผลนั้นจะไม่เหมือนกับที่เราได้พิมพ์ลงไป เพราะไม่มีการขึ้นบรรทัดใหม่  ฉะนั้นถ้าต้องการ
ที่จะขึ้นบรรทัดใหม่จะต้องเพิ่ม Tags <BR> ลงไปเพื่อเป็นการบอกให้ขึ้นบรรทัดใหม่

<BODY BGCOLOR="#FFFFFF">
สวัสดี <BR>
ลองดูซิ <BR>
ว่ามีการจัดเรียงบรรทัด <BR>
เป็นอย่างไร ?
</BODY>
 
สวัสดี  
ลองดูซิ  
ว่ามีการจัดเรียงบรรทัด  
เป็นอย่างไร ?
แต่ถ้าเราต้องการให้ขึ้นบรรทัดใหม่แล้วเว้นที่ว่างอีก 1 บรรทัด จะต้องใช้ Tags  <P>

<BODY BGCOLOR="#FFFFFF">
สวัสดี <P>
ลองดูซิ <P>
ว่ามีการจัดเรียงบรรทัด <P>
เป็นอย่างไร ?
</BODY>
 
สวัสดี  

ลองดูซิ  

ว่ามีการจัดเรียงบรรทัด  

เป็นอย่างไร ?
นี่เป็นตัวอย่างของ Tags เดี่ยวๆ ที่ไม่ต้องมีตัวปิดท้าย Tags และเกี่ยวกับ Line Break Tags นี้... ไม่สามารถที่จะใช้ได้มากกว่า 1 Tags
และในคำอื่นๆเช่น <P><P><P> เราต้องการที่ว่าง 3 บรรทัด แต่ Browser จะให้แสดงผลให้เราแค่บรรทัดเดียว  แต่ถึงอย่างไรก็ตาม
เราก็มีวิธีที่จะเพิ่มบรรทัดว่างให้มากกว่า 1 บรรทัดได้ เอาล่ะลองมาติดตามกันดูซิว่าเราจะทำอย่างไรกันดี

ลองดูตัวอย่างนี้ก่อน

<BODY BGCOLOR="#FFFFFF">
ทดสอบ           การแสดงผล          ของ Browser.
</BODY>
 
ทดสอบ การแสดงผล ของ Browser.
จะเห็นได้ว่า Browser แสดงผลข้อความที่เราพิมพ์ห่างกันแค่เพียง 1 ช่องอักษร ทั้งๆที่ตอนพิมพ์เราเคาะวรรคไป 10 ตัวอักษร
ดังนั้นวิธีการแก้ไขก็คือจะต้องใส่รหัสช่องว่าง(Space) ให้ Browser รับรู้ซึ่งรหัสนั้นจะใช้แทนช่องว่าง นั่นก็คือ  - - >     &nbsp;

ลองมาดูกัน

<BODY BGCOLOR="#FFFFFF">
ทดสอบ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
การแสดงผล&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
ของ Browser.
</BODY>
 
ทดสอบ          การแสดงผล          ของ Browser.
Special Character ที่มี ; ปิดท้าย ที่ใช้บ่อยๆมีอยู่ 6 ตัวด้วยกัน คือ
        &nbsp; ( non-breaking space)
        &lt; (< less-than symbol)
        &gt; (> greater-than symbol)
        &amp; (& ampersand)
        &quot; (" quotation mark)
        &shy; (ญ soft hyphen)
 
ทีนี้เรามาดูการสั่งให้เว้นบรรทัดที่ละหลายๆบรรทัดกัน

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

การแสดงผล
จะเห็นได้ว่าเรานำ  &nbsp;  มาใช้ประโยชน์ในการแสดงที่ว่างในบรรทัดที่เราจะเว้นนั่นเอง


ต่อไปจะเป็นการนำเอารูปภาพมาใส่ลงใน Web Page ของเรา  ภาพที่เราจะใช้ทดสอบนี้ให้ใช้ Mouse ขวา Click ที่ภาพ
แล้ว Save ภาพลงใน Folder เดียวกันกับ File เอกสาร HTML ของคุณ
การเรียกใช้งาน File รูปภาพนั้นเราจะใช้คำสั่งนี้ <IMG> (image) tag.

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


เราจะต้องใส่ชื่อห้อง(Directory) ที่เก็บภาพเอาไว้ และใส่ขนาดของรูปภาพ  ถ้ารูปภาพอยู่ Directory เดียวกับ File เอกสาร HTML
เราก็ไม่ต้องใส่ชื่อ Directory ก็ได้

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="pic/copper.gif" WIDTH=82 HEIGHT=68>
</BODY>
 
 
ถ้าเราไม่ใส่ขนาดของภาพ Browser ก็จะแสดงภาพเท่ากับขนาดจริงๆของภาพนั้น

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif">
</BODY>
 
 
เราสามารถกำหนดขนาดภาพได้ตามที่เราต้องการ

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif" WIDTH=200 HEIGHT=68>
</BODY>
 
 
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif" WIDTH=20 HEIGHT=100>
</BODY>
 
 


คราวนี้เราก็จัดเรียงข้อความตามต้องการของเราได้แล้ว  และสามารถใส่รูปภาพลงใน Web Page ของเราได้ด้วย
ต่อไปเราจะได้มาเรียนรู้วิธีการทำ Link กัน
< - - BACK          NEXT - - >

หน้าแรก

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