เขียน web ตอนที่ 2
สมาชิกเลขที่14 | 28 ก.ย. 53
1.8K views
คำสั่งจัดการตัวอักษรและรูปภาพ
หลังจากที่เราทราบพื้นฐานหน้าตาของ HTML แล้ว โดยแต่ละคำสั่งจะต้องประกอบไปด้วย Tag คราวนี้เรามาทราบคำสั่งเกี่ยวกับการจัดขนาดตัวอักษร เล็ก ใหญ่ รวมทั้งรูปแบบตัวอักษร
และการใส่รูปภาพใน web page จากตัวอย่างดังต่อไปนี้
ตัวอย่างการใช้คำสั่งเกี่ยวกับตัวอักษร
<HTML>
<HEAD>
<TITLE> บทเรียนที่ 2</TITLE>
</HEAD>
<BODY>
<font name = "Tahoma" color = "green" size ="5"> ทดสอบคำสั่ง Font </font> <br/>
<b> คำสั่งในการปรับตัวอักษรให้หนาขึ้น </b> <br/>
<i> คำสั่งในการปรับตัวอักษรเอียง </i> <br/>
<u> คำสั่งในการขีดเส้นใต้ตัวอักษร </u> <br/>
</BODY>
</HTML>
คำอธิบายคำสั่ง
<font name = "Tahoma" color = "green" size ="5">ข้อความ</font>
<font .....> </font> คือคำสั่งในการกำหนดรุปแบบต่างๆ ของตัวอักษร
เช่น
name = Tahoma คือกำหนดให้ใช้ font ประเภท tahoma (โดยทั่วไปใช้ font tahoma ในการแสดงผลบนหน้า web)
color = green กำหนดสีเขียว
size = 5 กำหนดขนาดเป็น 5 (ขนาดตัวอักษรเป็นได้ตั้งแต่ -7 ถึง +7)
<b> </b> คำสั่ง ตัวอักษรหนา
<i> </i> คำสั่ง ตัวอักษรเอียง
<u> </u> คำสั่ง ตัวอักษรขีดเส้นใต้
<br/> คำสั่งขึ้นบรรทัดใหม่
หลังจากรู้เกี่ยวกับการจัดรูปแบบตัวอักษรแล้ว เรามาใส่รูปภาพกันบ้าง
คำสั่ง คือ <img ... />
ตัวอย่าง <img src = "http://www.google.co.th/intl/en_com/images/srpr/logo1w.png" height = "110" width = "276">
ในตัวอย่าง src คือ คำสั่งในการบอกตำแหน่งของรูปภาพ ตามตัวอย่างคือการแสดงรูป logo ของ web site google
height คือการกำหนดความสูง
width คือการกำหนดความกว้าง
ความกว้างกับความสูงนั้น ไม่ระบุก็ได้ (แต่ควรระบุ : P) ถ้า รูปภาพที่เราใช้ มีขนาดเท่ากับที่เราต้องการแล้ว
แล้วครั้งหน้า เรามา รู้กันเรื่องเกี่ยวกับการ ทำ hyperlink กัน จะได้ทราบว่าทำไมถึงเรียกว่า html กันนะครับ
หลังจากที่เราทราบพื้นฐานหน้าตาของ HTML แล้ว โดยแต่ละคำสั่งจะต้องประกอบไปด้วย Tag คราวนี้เรามาทราบคำสั่งเกี่ยวกับการจัดขนาดตัวอักษร เล็ก ใหญ่ รวมทั้งรูปแบบตัวอักษร
และการใส่รูปภาพใน web page จากตัวอย่างดังต่อไปนี้
ตัวอย่างการใช้คำสั่งเกี่ยวกับตัวอักษร
<HTML>
<HEAD>
<TITLE> บทเรียนที่ 2</TITLE>
</HEAD>
<BODY>
<font name = "Tahoma" color = "green" size ="5"> ทดสอบคำสั่ง Font </font> <br/>
<b> คำสั่งในการปรับตัวอักษรให้หนาขึ้น </b> <br/>
<i> คำสั่งในการปรับตัวอักษรเอียง </i> <br/>
<u> คำสั่งในการขีดเส้นใต้ตัวอักษร </u> <br/>
</BODY>
</HTML>
คำอธิบายคำสั่ง
<font name = "Tahoma" color = "green" size ="5">ข้อความ</font>
<font .....> </font> คือคำสั่งในการกำหนดรุปแบบต่างๆ ของตัวอักษร
เช่น
name = Tahoma คือกำหนดให้ใช้ font ประเภท tahoma (โดยทั่วไปใช้ font tahoma ในการแสดงผลบนหน้า web)
color = green กำหนดสีเขียว
size = 5 กำหนดขนาดเป็น 5 (ขนาดตัวอักษรเป็นได้ตั้งแต่ -7 ถึง +7)
<b> </b> คำสั่ง ตัวอักษรหนา
<i> </i> คำสั่ง ตัวอักษรเอียง
<u> </u> คำสั่ง ตัวอักษรขีดเส้นใต้
<br/> คำสั่งขึ้นบรรทัดใหม่
หลังจากรู้เกี่ยวกับการจัดรูปแบบตัวอักษรแล้ว เรามาใส่รูปภาพกันบ้าง
คำสั่ง คือ <img ... />
ตัวอย่าง <img src = "http://www.google.co.th/intl/en_com/images/srpr/logo1w.png" height = "110" width = "276">
ในตัวอย่าง src คือ คำสั่งในการบอกตำแหน่งของรูปภาพ ตามตัวอย่างคือการแสดงรูป logo ของ web site google
height คือการกำหนดความสูง
width คือการกำหนดความกว้าง
ความกว้างกับความสูงนั้น ไม่ระบุก็ได้ (แต่ควรระบุ : P) ถ้า รูปภาพที่เราใช้ มีขนาดเท่ากับที่เราต้องการแล้ว
แล้วครั้งหน้า เรามา รู้กันเรื่องเกี่ยวกับการ ทำ hyperlink กัน จะได้ทราบว่าทำไมถึงเรียกว่า html กันนะครับ