1. การกำหนดรูปแบบหัวเรื่อง <hn>
การกำหนดรูปแบบหัวเรื่องเป็นการกำหนดขนาดตัวอักษรให้แตกต่างกันเพื่อแยกแต่ละหัวเรื่องอย่างชัดเจนสำหรับเอกสารที่มีหลาย ๆ หัวเรื่อง จากลำดับหัวเรื่องใหญ่ไปหัวเรื่อง ซึ่งสามารถกำหนดขนาดหัวเรื่องได้ 6 ระดับ ดังนี้
ชื่อแท็ก hn (n มีค่าตั้งแต่ 1 ถึง 6)
รูปแบบในภาษา HTML <hn>หัวเรื่อง</hn>
ตัวอย่างการใช้แท็ก
<!DOCTYPE HTML>
<html>
<head>
<title>การกำหนดหัวเรื่อง</title>
</head>
<body>
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
</body>
</html>
ผลลัพธ์ที่ได้
2. การกำหนดลักษณะตัวอักษร
การกำหนดลักษณะตัวอักษรในเว็บเพจนั้น มีอยู่ 2 วิธี ได้แก่
- แบบ Physical เป็นการกำหนดรูปแบบตัวอักษรอย่างเจาะจง
- แบบ Logical ที่ผู้ใช้บราวเซอร์สามารถกำหนดรูปแบบตัวอักษรได้ด้วยตัวเอง
การกำหนดลักษณะตัวอักษรแบบ Physical
| ชี่อแท็ก |
รูปแบบแท็ก HTML |
ตัวอย่าง |
| Bold (ตัวหนา) |
<b>…..</b> |
This is Bold |
| Italic (ตัวเอียง) |
<i>…..</i> |
This is Italic |
| Underline (ขีดเส้นใต้) |
<u>…..</u> |
This is Underline |
| Strike (ขีดฆ่า) |
<s>…..</s> |
This is Strike |
| Typewriter Text (ตัวพิมพ์ดีด) |
<tt>…..</tt> |
This is Typewriter Text |
| Superscript (ตัวอักษรยก) |
<sup>…..</sup> |
This is Superscript |
| Subscript (ตัวอักษรห้อย) |
<sub>…..</sub> |
This is Subscript |
| Big (ตัวอักษรขนาดใหญ่) |
<big>…..</big> |
This is big |
| Small (ตัวอักษรขนาดเล็ก) |
<small>.….</small> |
This is small |
| Delete (ขีดฆ่า) |
<del>…..</del> |
This is Delete |
| Insert (ขีดเส้นใต้เป็นสัญลักษณ์) |
<ins>…..</ins> |
This is Insert |
| หมายเหตุ แท็ก sup, sub, small, big สามารถซ้อนกันได้ เพื่อให้การกำหนดค่ามีมากกว่าเดิม |
เช่น <big><big>Big</big></big>
ตัวอย่างการใช้งาน
<!DOCTYPE HTML>
<html>
<head>
<title>การจัดการหน้าเอกสารและข้อความ</title>
</head>
<body bgcolor=”yellow”>
<center><u><b><h3>การสื่อสารข้อมูล</h3></b></u></center>
<hr width=”50%” color=”green” align=”center” />
<b>การสื่อสารข้อมูล</b> <i>หมายถึง</i> กระบวนการถ่ายโอน<sup>หรือ</sup>แลกเปลี่ยนข้อมูลระหว่างผู้รับ<sub>และ</sub>ผู้ส่งโดยผ่าน ช่องทางสื่อสาร
<s>เช่น</s> <big>อุปกรณ์</big>อิเล็กทรอนิกส์หรือ<small>คอมพิวเตอร์</small>เป็นตัวกลางในการส่งข้อมูล เพื่อให้ผู้ส่งและผู้รับ เกิดความเข้าใจซึ่งกันและกัน
</body>
</html>
ผลลัพธ์ที่ได้
การกำหนดลักษณะตัวอักษรแบบ Logical
การกำหนดลักษณะตัวอักษรแบบ Logical นั้น เป็นการกำหนดรูปแบบตัวอักษรตามความหมายของข้อความนั้น
| ชี่อแท็ก |
รูปแบบแท็ก HTML |
ตัวอย่าง |
| Emphasis(ใช้เน้นข้อความคำพูดหรือวลี) |
<em>…..</em> |
Emphasis |
| Strong(ข้อความที่สำคัญมาก) |
<strong>…..</strong> |
Strong |
| Computer Code(ข้อความเป็นโค้ดโปรแกรม) |
<code>…..</code> |
Computer Code |
| Citations(ข้อความที่อ้างอิงถึงแหล่งที่มาของเนื้อหา) |
<cite>…..</cite> |
Citations |
| Definition(ข้อความที่เป็นคำนิยาม) |
<dfn>…..</dfn> |
Definition |
| Keyboard(ข้อความที่เหมือนแป้นพิมพ์) |
<kbd>…..</kbd> |
Keyboard |
| Samples(ข้อความที่เหมือนแป้นพิมพ์) |
<samp>…..</samp> |
Samples |
| Variable Name(ใช้เน้นข้อความที่ถูกเปลี่ยนแปลง) |
<var>…..</var> |
Variable Name |
| Example(ให้แท็ก html ปรากฏบนหน้าจอเว็บเพจ) |
<xmp>.….</xmp> |
Example |
| Address(กำหนดข้อความให้กับชื่อและที่อยู่) |
<address>…..</address> |
address |
| Abbreviate(ใช้แสดงชื่อย่อ) |
<abbr>…..</abbr> |
Abbreviate |
| Acronym(กำหนดคำย่อจากอักษรแรกของแต่ละคำ) |
<acronym>…..</acronym> |
Acronym |
| Bi-directional algorithm(ตัวอักษรเขียนย้อนกลับ) |
<bdo>…..</bdo> |
|
| Blockquote(กำหนดรูปแบบข้อมูลที่อ้างอิงจากที่อื่น) |
<blockquote>..</blockquote> |
|
| Quote(กำหนดรูปแบบของข้อมูลที่อ้าวอิงจากที่อื่นแบบสั้น) |
<q>…..</q> |
Quote |
| หมายเหตุ 1แท็ก bdo จะมีแอตทริบิวต์ชื่อ dir=“rtl” และจะมีการใส่ “rtl” (right to left เขียนจากขวามาซ้าย) และ “ltr” (left to right เขียนจากซ้ายมาขวา)ตัวอย่างเช่น <bdo dir=“rtl”>Bi-directional algorithm</bdo>หมายเหตุ 2 |
แท็ก abbr และ acronym จะมีการใช้เหมือนกัน คือ การกำหนดชื่อเต็มของคำย่อ เช่น <acronym title=“World Wide Web”>WWW</acronym> ผลลัพธ์ที่ได้เมื่อเอาเมาส์ไปวางจะปรากฏชื่อเต็มขึ้นมา
ถึงแม้ทั้ง 2 แท็กจะใช้เหมือนกันแต่จะต้องเลือกใช้ตามกรณี คือ แท็ก abbr จะใช้สำหรับคำย่อของคำ หรือกลุ่มคำ เช่น กทม. คือ กรุงเทพมหานคร ส่วน acronym จะเป็นคำย่อที่เกิดจากพยัญชนะของแต่ละคำมาต่อกัน เช่น WWW คือ World Wide Web, IOU คือ I love you เป็นการดีงอักษรของแต่ละคำมาสร้างคำย่อ
ที่จริงเราสามารถใช้แท็ก abbr และ acronym แทนกันได้ แต่ถ้าให้ควรเลือก acronym เพราะ abbr ไม่สามารถแสดงผลบราวเซอร์ IE
3. การเปลี่ยนขนาดตัวอักษร
การเปลี่ยนขนาดตัวอักษรเป็นการปรับเปลี่ยนหน้าเว็บเพจให้มีขนาดแตกต่างกัน โดยมีรูปแบบดังนี้
ชื่อแอตทริบิวต์ size
รูปแบบในภาษา HTML <font size=“”>ข้อความ</font>
ค่าที่กำหนดให้ใช้ ขนาดตัวอักษร n ซึ่งมีค่าตั้งแต่ 1 ถึง 7
ตัวอย่างการใช้งาน
<!DOCTYPE HTML>
<html>
<head>
<title>ขนาดตัวอักษร</title>
</head>
<body>
<font size=”7″>Font size=7</font><br />
<font size=”6″>Font size=6</font><br />
<font size=”5″>Font size=5</font><br />
<font size=”4″>Font size=4</font><br />
<font size=”3″>Font size=3</font><br />
<font size=”2″>Font size=2</font><br />
<font size=”1″>Font size=1</font><br />
</body>
</html>
ผลลัพธ์ที่ได้
ตัวอักษรปกติ (ปกติอยู่ที่ 3) ให้มีขนาดใหญ่ (+) และเล็กลง (-) แต่ต้องไม่เกินตัวอักษรปกติ คือ 1 ถึง 7 มีรูปแบบการใช้งานดังนี้
ตัวอย่างการใช้งาน
<!DOCTYPE HTML>
<html>
<head>
<title>ขนาดตัวอักษร</title>
</head>
<body>
<font size=”5″>ข้อความมีขนาดเท่ากับ 5</font><br />
<font size=”+2″>ข้อความมีขนาดใหญ่ขึ้น 2 ระดับ</font><br />
</body>
</html>
ผลลัพธ์ที่ได้
4. การกำหนดรูปแบบตัวอักษร
ชื่อแอตทริบิวต์ face
รูปแบบในภาษา HTML <font face=“ชื่อฟอนต์”>ข้อความ</font>
ค่าที่กำหนดให้ใช้ ชื่อฟอนต์ที่ต้องการใช้งาน
ตัวอย่างการใช้งาน
<!DOCTYPE HTML>
<html>
<head>
<title>รูปแบบตัวอักษร</title>
</head>
<body>
<font face=”A “>รูปแบบตัวอักษร AngsanaNEW</font><br />
<font face=”TH SarabunPSK”>รูปแบบตัวอักษร TH SarabunPSK</font><br />
</body>
</html>
ผลลัพธ์ที่ได้
หมายเหตุ หากเครื่องใดไม่มีฟอนต์ดังกล่าวจะทำให้การแสดงผลผิดพลาด ดังนั้นเราควรใช้ฟอนต์ที่มีในทุกเครื่อง หรือฟอนต์มาตรฐาน
5. คำสั่งเว้นวรรคข้อความ
(Non Breaking Space) เป็นคำสั่งช่วยให้เว้นวรรคระหว่างข้อความ เพราะปกติบราวเซอร์จะแสดงช่องว่างจากการเคาะ Space Bar เพียงช่องเดียว แม้นว่าผู้สร้างจะเคาะไปหลายครั้งก็ตาม
นี้เป็นหนึ่งในจำนวนรหัสใช้แทนอักษรพิเศษ ในภาษา HTML ซึ่งใช้ประโยชน์สำหรับแทนตัวอักษรที่มีความหมาย
6. ตัวอักษรพิเศษ
ตัวอักษรพิเศษ คือ ตัวอักษรที่ไม่มีบนแป้นพิมพ์จึงต้องใช้วิธีการเรียกใช้ โดยการใช้รหัสหรือโดยการเรียกโดยใช้ชื่อ
| ตัวอักษรพิเศษ |
คำอธิบาย |
| &#[ASCII CODE]; |
สั่งให้แสดงสัญลักษณ์ที่เราต้องการออกมาบนหน้าจอด้วยรหัส ASCII |
| < |
เครื่องหมาย < (less than) |
| > |
เครื่องหมาย > (greater than) |
| & |
เครื่องหมาย & (ampersand) |
| " |
เครื่องหมาย “ |
| © |
เครื่องหมายลิขสิทธิ์ © (Copyrights) |
| ® |
เครื่องหมายทะเบียนการค้า ® (Registered) |
| ™ |
เครื่องหมายทะเบียนการค้า ™ |
| ¥ |
เครื่องหมาย ¥ (Yen) |
| € |
เครื่องหมาย €(Euro) |
| ¢ |
เครื่องหมาย ¢(Cent) |
| ° |
เครื่องหมาย Degrees |
| ÷ |
เครื่องหมายหาร ÷ |
7. การตกแต่งสีสันเว็บเพจ
เราสามารถกำหนดค่าสีได้ 2 แบบ คือ
1. สี=”#xxxxxx” ระบุเป็นเลขฐาน 16 (0-9 หรือ A-F โดย 0 มีค่าสีน้อยที่สุด และ F มีค่าสีมากที่สุด) ทั้งหมด 3 ชุด 1 ชุดแทนด้วยตัวอักษร 2 ตัว แสดงค่าของแม่สี แดง เขียว นํ้าเงิน (RGB) โดยเขียนตามหลังเครื่องหมาย # เช่น”#FFFFFF” จะให้ สีขาว ,”#000000″ จะให้ สีดำ
| สี |
รหัสสี |
| ขาว |
#FFFFFF |
| ดำ |
#000000 |
| เทา |
#BBBBBB |
| แดง |
#FF0000 |
| เขียว |
#00FF00 |
| น้ำเงิน |
#0000FF |
2. สี=color ระบุสีลงไปเลย เช่น AQUA, BULE, GRAY, LIME, NAVY, PURPLE, SILVER, WHITE (สีขาว), BLACK, FUCHSIA, GREEN, MAROON, OLTVE, RED, TEAL, YELLOW
8. การกำหนดสีพื้นหลังและสีตัวอักษร
ชื่อแอตทริบิวต์ bgcolor (สีพื้นหลัง) และ Text (สีตัวอักษรทั้งเว็บเพจ)
รูปแบบในภาษา HTML <body bgcolor=“รหัสสี/ชื่อสี” Text=“รหัสสี/ชื่อสี”>
ค่าที่กำหนดให้ใช้ รหัสสีเลขฐาน 16 เช่น “#FFFFFF”, #FF0000 ชื่อสีมาตรฐาน เช่น blue, pink
ตัวอย่างการใช้งาน
<!DOCTYPE HTML>
<html>
<head>
<title>การตกแต่งด้วยสี</title>
</head>
<body bgcolor=”#FFE4A4″ text=”blue”>
การทดลองการใส่สีพื้นหลังและสีตัวอักษร
</body>
</html>
ผลลัพธ์ที่ได้
9. การกำหนดสีตัวอักษรเฉพาะที่
รูปแบบในภาษา HTML <font color=“รหัสสี/ชื่อสี”>…</font>
ค่าที่กำหนดให้ใช้ รหัสสีเลขฐาน 16 เช่น “#FFFFFF”, #FF0000 ชื่อสีมาตรฐาน เช่น blue, pink
ตัวอย่างการใช้งาน
<!DOCTYPE HTML>
<html>
<head>
<title>การตกแต่งด้วยสี</title>
</head>
<body>
<font color=”#0000FF”>การกำหนดสีตัวอักษรสีน้ำเงิน</font> <br />
<font color=”red”>การกำหนดสีตัวอักษรสีชมพู</font>
</body>
</html>
ผลลัพธ์ที่ได้
10. การกำหนดสีตัวอักษรที่เป็นจุดคลิกเมาส์
รูปแบบLINK=”#รหัสสี” ALINK=”#รหัสสี” VLINK”#รหัสสี”
ตัวอย่าง <BODY BGCOLOR=”000000″ TEXT=”#F0F0F0″ LINK=”#FFFF00″ ALIGN=”#0077FF” VLINK=”#22AA22″>
กำหนดอยู่ในส่วนของ BODY โดยกำหนดให้
LINK = สีของตัวอักษรก่อนมีการคลิก
ALIGN = สีของตัวอักษรขณะถูกคลิก
VLINK = สีของอักษรหลังจากคลิกแล้ว
11. การกำหนดตัวอักษรวิ่ง <marquee>
ชื่อแท็ก marquee
รูปแบบของแท็ก <marquee>ข้อความ</marquee>
การกำหนดแอตทริบิวต์เพิ่มเติมให้กับแท็ก marquee
scroll คือ ให้ข้อความวิ่งจากขวามาซ้าย เมื่อถึงขอบซ้าย ก็ให้ข้อความวิ่งออกมาจากขวาใหม่ (เป็นค่าปกติถ้าไม่มีการกำหนดอะไรจะได้แบบนี้)การกำหนดรูปแบบการวิ่งของข้อความ มี 3 รูปแบบ ดังนี้
slide คือ ให้ข้อความวิ่งจากขวามาซ้าย เมื่อถึงขอบซ้ายแล้วจะหยุดนิ่งไม่วิ่งไปไหนอีก
alternate คือ ให้ข้อความวิ่งจากขอบซ้ายมาขอบขวา เมื่อถึงขอบขวาก็ให้วิ่งกลับไปทางซ้าย วิ่งกลับไปกลับมา
directionกำหนดทิศทางการเคลื่อนที่ ดังนี้
¨ Left ด้านซ้าย
¨ Right ด้านขวา
¨ Up ด้านบน
¨ Down ด้านล่าง
width กำหนดความกว้างของกรอบ marquee กำหนดค่าแบบเจาะจง (pixel) หรือเป็นเปอร์เซ็นต์เทียบจากบราวเซอร์
height กำหนดความสูงของกรอบ marquee กำหนดค่าแบบเจาะจง (pixel) หรือเป็นเปอร์เซ็นต์เทียบจากบราวเซอร์
hspace กำหนดระยะห่างของข้อความที่เคลื่อนไหวและกรอบทางด้านซ้ายและด้านขวา
vspace กำหนดระยะห่างของข้อความที่เคลื่อนไหวและกรอบทางด้านบนและด้านล่างloopกำหนดจำนวนรอบการวิ่ง
scrollamount=n กำหนดระยะเวลาในการขยับข้อความ (ยิ่งมาก ข้อความจะขยับไปไกลในแต่ละครั้ง)
scrolldelay=n กำหนดเวลารอเป็นหน่วย Milliseconds (ยิ่งมาก ข้อความจะรอนานกว่าจะขยับแต่ละครั้ง)
bgcolor=”รหัสสี/ชื่อสี” กำหนดสีพื้นหลังของกรอบอักษรวิ่ง กำหนดเป็นรหัสสีหรือชื่อสี เช่น bgcolor=“#FFCCCC”, bgcolor=“green”
onmouseOver=”this.stop()” กำหนดให้เมื่อนำเมาส์มาชี้ให้หยุดวิ่ง
onmouseOut=”this.start()” กำหนดให้เมื่อเอาเมาส์ออกจากกรอบอักษรวิ่งให้วิ่งต่อ หากต้องการให้เมื่อเอาเมาส์มาชี้แล้วให้วิ่ง เมื่อเอาเมาส์ออกให้หยุด ก็สามารถทำได้โดยสลับค่าระหว่าง “this.stop()” กับ “this.start()”
ตัวอย่างการทำอักษรวิ่ง
<!DOCTYPE HTML>
<html>
<head>
<title>การตกแต่งด้วยสี</title>
</head>
<body>
<marquee>การทำอักษรวิ่ง</marquee>
<marquee behavior=”scroll” direction=”up” width=”400″ height=”100″ bgcolor=”#F5F5F5″ scrolldelay=”10″ scrollamount=”5″ onmouseOver=”this.stop()” onmouseOut=”this.start()”>ข้อความวิ่งที่มีการกำหนดคุณสมบัติเพิ่มเติม</marquee>
</body>
</html>
ผลลัพธ์ที่ได้
อ้างอิง
- รูปภาพจากอิดิเตอร์ Notepad
- การสร้างเว็บและเพิ่มลูกเล่นด้วย HTML และ XHTML เขียนโดย นายประชา พฤกษ์ประเสริฐ สำนักพิมพ์ซิมพลิฟาย
เรียน ICT กับครูต้อม 