การจัดการข้อความ

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>

ผลลัพธ์ที่ได้

k1

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>

ผลลัพธ์ที่ได้

format

การกำหนดลักษณะตัวอักษรแบบ 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>

ผลลัพธ์ที่ได้

k10

ตัวอักษรปกติ (ปกติอยู่ที่ 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>

ผลลัพธ์ที่ได้

k11

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>

ผลลัพธ์ที่ได้

k12

หมายเหตุ หากเครื่องใดไม่มีฟอนต์ดังกล่าวจะทำให้การแสดงผลผิดพลาด ดังนั้นเราควรใช้ฟอนต์ที่มีในทุกเครื่อง หรือฟอนต์มาตรฐาน

 

5. คำสั่งเว้นวรรคข้อความ

&nbsp; (Non Breaking Space) เป็นคำสั่งช่วยให้เว้นวรรคระหว่างข้อความ เพราะปกติบราวเซอร์จะแสดงช่องว่างจากการเคาะ Space Bar เพียงช่องเดียว แม้นว่าผู้สร้างจะเคาะไปหลายครั้งก็ตาม

&nbsp; นี้เป็นหนึ่งในจำนวนรหัสใช้แทนอักษรพิเศษ ในภาษา HTML ซึ่งใช้ประโยชน์สำหรับแทนตัวอักษรที่มีความหมาย

 

6. ตัวอักษรพิเศษ

ตัวอักษรพิเศษ คือ ตัวอักษรที่ไม่มีบนแป้นพิมพ์จึงต้องใช้วิธีการเรียกใช้ โดยการใช้รหัสหรือโดยการเรียกโดยใช้ชื่อ

ตัวอักษรพิเศษ คำอธิบาย
&#[ASCII CODE]; สั่งให้แสดงสัญลักษณ์ที่เราต้องการออกมาบนหน้าจอด้วยรหัส ASCII
&lt; เครื่องหมาย < (less than)
&gt; เครื่องหมาย > (greater than)
&amp; เครื่องหมาย & (ampersand)
&quot; เครื่องหมาย “
&copy; เครื่องหมายลิขสิทธิ์ © (Copyrights)
&reg; เครื่องหมายทะเบียนการค้า ® (Registered)
เครื่องหมายทะเบียนการค้า ™
&yen; เครื่องหมาย ¥ (Yen)
&euro; เครื่องหมาย €(Euro)
&cent; เครื่องหมาย ¢(Cent)
&deg; เครื่องหมาย Degrees
&divide; เครื่องหมายหาร ÷

 

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>

ผลลัพธ์ที่ได้

k13

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=”pink”>การกำหนดสีตัวอักษรสีชมพู</font>
</body>
</html>

ผลลัพธ์ที่ได้

k14

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>

ผลลัพธ์ที่ได้

k15


คลิปวิดิโอ

Advertisements

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: