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 กับครูต้อม 