สอนภาษา HTML: สิงหาคม 2014

รูปแบบแท็ก Code และการแสดงผล

1.การกำหนดแบบอักษร
 …  การกำหนดรูปแบบของตัวอักษรในเว็บเพจที่เราต้องการให้แสดงออกบนเว็บ
ตัวอย่างการใช้คำสั่ง

<html>

<head>

<title>การกำหนดขนาดตัวอักษร</title>

</head>

<body>

HTML

HTML

HTML

HTML

</body>

</html>

ผลลัพธ์
HTML
HTML
HTML
HTML

2.ขนาดตัวอักษร

เราสามารถกำหนดขนาดของตัวอักษรได้ 2 วิธี

1. ในกรณีที่เป็นหัวข้อ (Heading) สามารถใช้คำสั่งต่อไปนี้

<H1>ขนาดใหญ่สุด</H1>
<H2>ขนาดใหญ่</H2>
<H3>ขนาดกลาง</H3>
<H4>ขนาดปกติ</H4>
<H5>ขนาดเล็ก</H5>
<H6>ขนาดเล็กสุด<H6>

2. ในกรณีทั่วไป จะใช้คำสั่ง เช่น

ตัวอักษรขนาด 3 หรือ
ตัวอักษรขนาด 5

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

<HTML>
<HEAD>
<TITLE>FONT SIZE </TITLE>
</HEAD>
<BODY >
Computer
Computer
Computer
Computer
Computer
Computer
Computer
</BODY>
</HTML>

ผลลัพธ์
Computer Computer Computer Computer Computer
ComputerComputer

3.สีตัวอักษร

สีของตัวอักษร
สีของตัวอักษร สามารถกำหนดได้ 2 แนวทางคือ

1. ใช้คำสั่ง เช่น
ตัวอักษรสีแดง หรือ
ตัวอักษรสีเขียว

2. ใช้คำสั่ง เช่น
ตัวอักษรสีชมพู หรือ
ตัวอักษรสีน้ำเงิน

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

<html>
<head><title> ....การหนดรูปแบบสีข้อความ....</title></head>
<body> ข้อความนี้กำหนดให้เป็นสีแดง 
 ข้อความนี้กำหนดให้เป็นสีน้ำเงิน  
</body>
</html>

4.ตัวเอียง ตัวหนา ตัวขีดเส้นใต้

คำสั่งจะแบ่งได้เป็น 2 พวกดังนี้

1.แบ่งตามลักษณะที่ปรากฏ เช่น ตัวเอียง ตัวหนา

ตัวอักษรแบบตัวหนา (bold)

ตัวอักษรแบบตัวเอน (italic)

ตัวอักษรแบบขีดเส้นใต้ (underline)

2.แบ่งตามการใช้งาน เช่น ใช้กับคำพูดหรือวลี ใช้กับข้อความที่สำคัญมาก

<Stong> <Ins> <Del> <Code> <Address> ใช้เน้นข้อความ คำพูดหรือวลี (emphasized) ใช้เน้นข้อความที่สำคัญมากๆ (strong) ใช้เน้นข้อความที่แก้ไขเพิ่มเติม (inserted) ใช้บอกว่าข้อความนี้ถูกลบไปแล้ว (deleted) ใช้บอกว่าข้อความที่เป็นโปรแกรม (computer code) ใช้บอกว่าข้อความที่เป็นที่อยู่ (computer code)

5.ตัวขีดฆ่า ตัวยก ตัวห้อย

1. <s>...</s> ใช้แสดงข้อความแบบขีดฆ่าตัวอักษร ทั้งนี้เพื่อเน้นข้อความเปรียบเทียบหรือต้องการในประโยคนั้น

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

<HTML>
<HEAD>
<TITLE> การกำหนดอักษรขีดเส้นใต้ </TITLE>
</HEAD>
<BODY>
กำหนดอักษรขีดเส้นใต้

<S>Microsoft Windows 7</S>

</BODY>
</HTML>

ผลลัพธ์
กำหนดอักษรขีดเส้นใต้
~~Microsoft Windows 7~~

2.  … และ  … การกำหนดแบบอักษรตัวห้อยและแบบอักษรตัวยกในเว็บเพจนั้น เราสามารถกำหนดขนาดของตัวอักษรได้ดังนี้

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

<HTML>
<HEAD>
<TITLE>แบบอักษรตัวห้อยและแบบอักษรตัวยก </TITLE>
</HEAD>
<BODY >

Computer2

H2O

</BODY>
</HTML>

ผลลัพธ์
Computer²
H₂O

6.ตัวอักษณวิ่ง ตัวอักษรกระพริบ

1. <MARQUEE> .......... </MARQUEE>ใช้สำหรับแสดงข้อความแบบเคลื่อนที่ไปยังทิศทางที่เราต้องการ มีรูปแบบการใช้ดังน <marquee scrolldelay="ความเร็ว"

direction="ทิศทางวิ่ง">ข้อความ</marquee> - scrolldelay ให้แทนค่าด้วยความเร็วเป็น ตัวเลข ส่วน direction ใส่ได้เฉพาะ Up,Down,Left และ Right

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

<html>
<head>
<title>marque</title>
</head>
<body>
<center>
<marquee scrolldelay="100" direction="Right">WEBTHAIDD</marquee>
<marquee scrolldelay="100" direction="Left">WEBTHAIDD</marquee>
<marquee scrolldelay="100" direction="Up">WEBTHAIDD</marquee>
<marquee scrolldelay="100" direction="Down">WEBTHAIDD</marquee>
</body>
</html>

2.<blink>...</blink> ใช้กำหนดแสดงข้อความแบบกระพริบ จะมีลักษณะการแสดงผลเป็นแบบติด - ดับ สลับกันไป

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

<HTML>
<HEAD>
<TITLE>กำหนดอักษรตัวกระพริบ </TITLE>
</HEAD>
<BODY>
การกำหนดอักษรตัวกระพริบ

<Blink>COMPUTER</Blink>

</BODY>
</HTML>

7.การจัดตำแหน่งข้อความ

1. การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center <center> ...ข้อความ...</center>
2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก โดยใช้ Attribute align รูปแบบดังนี้ ...ข้อความ...
ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right

สอนภาษา HTML

วันจันทร์ที่ 25 สิงหาคม พ.ศ. 2557

ข้อสอบ HTML

วันจันทร์ที่ 4 สิงหาคม พ.ศ. 2557

การตกแต่งตัวอักษร