HTML Language
เรียนรู้การสร้าง web แบบมืออาชีพ


บทเรียนที่ 2 : การจัดรูปแบบตัวอักษร


การตกแต่ง Web ด้วยตัวอักษร

หลังจากที่เราทราบพื้นฐานหน้าตาของ HTML แล้ว ซึ่งแต่ละคำสั่งจะต้องประกอบไปด้วย Tag (ถ้ายังไม่เข้าใจ ควรกลับไปศึกษา บทเรียนที่ 1 อีกสักครั้ง) สำหรับบทเรียนนี้คุณจะได้ทราบคำสั่งเกี่ยวกับการจัดขนาดตัวอักษร เล็ก ใหญ่ รวมทั้งรูปแบบตัวอักษร โดยเฉพาะ web ที่ใช้ภาษาไทย เป็นหลัก โดยศึกษาจากตัวอย่างดังต่อไปนี้ (คำแนะนำ : - ควรค่อย ๆ ทำความเข้าใจทีละขั้นตอน ไม่ควรข้ามบทเรียน)

ตัวอย่างการใช้คำสั่งเกี่ยวกับตัวอักษร

<HTML>
<HEAD>
<TITLE> โปรแกรมแรกของดิฉัน </TITLE>
</HEAD>
<BODY>

<font name = "Tahoma" color = "green" size ="+3"> คำสั่งในการใช้ชื่อ font สี และกำหนดขนาด </font> <br>
<b> คำสั่งในการปรับตัวอักษรให้หนาขึ้น </b> <br>
<i> คำสั่งในการปรับตัวอักษรเอียง </i> <br>
<u> คำสั่งในการขีดเส้นใต้ตัวอักษร </u> <br>


</BODY>
</HTML>


หมายเหตุ :- ตัวหนังสือสีแดง คือคำสั่งในภาษา HTML


ผลการรันด้วย Internet Explorer



จากตัวอย่างจะเห็นได้ว่า แต่ละคำสั่งจะอยู่ในเครื่องหมาย "< >" ซึ่งเราเรียกว่า แทก "TAG" แต่ละคำสั่งจะเป็นการบอกจุดเริ่มต้นของคำสั่ง และจุดสิ้นสุดของคำสั่งจะมีสัญลักษณ์ "</ >"
  1. <font name = "Tahoma" color = "green" size ="+3"> </font>
    ความหมาย : - คำสั่งในการกำหนดรูปแบบตัวอักษร ชื่อว่า Tahoma กำหนดสีของตัวอักษรให้เป็นสีเขียว กำหนดขนาดของ font ให้เพิ่มขึ้น 3 (การกำหนดขนาดของตัวอักษรจะกำหนดได้ในระหร่าง -7 ถึง +7) การกำหนดรูปแบบตัวอักษรแบบนี้ สามารถเลือกกำหนดเฉพาะอย่างได้ เช่น <font name = "Tahama"> เป็นต้น แต่ที่สำคัญก่อนจบจะต้องกำหนด Tag ปิดด้วย </font> ทุกครั้ง...

  2. <b> </b>
    ความหมาย : - คำสั่งในการกำหนดตัวอักษรให้หนา อย่าลืมใส่คำสั่ง Tag ปิดด้วย </b> ทุกครั้ง...

  3. <i> </i>
    ความหมาย : - คำสั่งในการกำหนดตัวอักษรเอียง อย่าลืมใส่คำสั่ง Tag ปิดด้วย </i> ทุกครั้ง...

  4. <u> </u>
    ความหมาย : - คำสั่งในการกำหนดตัวอักษรขีดเส้นใต้ อย่าลืมใส่คำสั่ง Tag ปิดด้วย </u> ทุกครั้ง...

พิเศษ คำสั่ง <br>
เป็นคำสั่งในการเลื่อนบันทึกใหม่ ไม่จำเป็นต้องมีคำสั่ง Tag ในการปิด เหมือนคำสั่งอื่น ๆ

ยินดีด้วยค่ะ !
บทเรียนนี้ผ่านแล้ว คงพอทำให้คุณเข้าใจพื้นฐานคำสั่งของ HTML แล้วน่ะค่ะ นั่นคือ คำสั่งส่วนใหญ่จะมีคำสั่งเริ่มต้น และปิดด้ายด้วยคำสั่ง "/" ... ห้ามลืมหลักการนี้ ไม่ยากใช่ไหมค่ะ ... บทเรียนที่ 3 - : การแสดงผลในรูปแบบรายการ


Copyright ® 2000-2001 IT-Guides.Com all right reserve
Always Online