Page 1

หน่วยการเรียนรู้ที่ 2 การจัดวางและจัดรูปแบบเนื้อหาบนหน้าเว็บ

ใบความรู้ที่ 2.3 การจัดรูปแบบข้อความ

ใบความรู้ที่ 2.3

การจัดรูปแบบข้อความ

หลัง จากที่เราได้รู้จักกับพื้นฐานการเขียนเว็บด้วย HTML และการจัดรูปแบบเอกสารกันไปแล้ว ในใบ ความรู้ที่ 1.5 นี้เราจะได้เรียนรู้เกี่ยวกับการจัดการรูปแบบข้อความในเว็บเพจ เพื่อทาให้เว็บเพจของเราดูน่าสนใจ มากยิ่งขึ้น 1. กาหนดรูปแบบข้อความที่เป็นหัวเรื่อง <hn> สาหรับเอกสารที่มีหลาย ๆ หัวเรื่อง และเป็นลาดับจากหัวเรื่องใหญ่ไปหัวเรื่องเล็ก เราจะใช้หัวเรื่องที่มีขนาด ตัวอักษรแตกต่างกัน เพื่อแยกหัวเรื่องอย่างชัดเจน ซึ่งเราสามารถกาหนดหัวเรื่องได้ถึง 6 ระดับ โดใช้แท็กที่มี รูปแบบดังนี้ ชื่อแท็ก hn (n มีค่าตั้งแต่ 1 ถึง 6) ตาแหน่งของแท็ก อยู่ภายในแท็ก <body>…</body> รูปแบบ <hn> หัวเรื่อง </hn> <h1> จะมีขนาดตัวอักษรใหญ่ที่สุดและถูกใช้กับข้อความหลัก จะมีขนาดโดยปกติ 24 พอยท์ ส่วน <h6> จะมีขนาดเล็กที่สุด โดยมีขนาดปกติเท่ากับ 8 พอยท์ การใช้หัวเรื่องเป็นวิธีที่ดีในการแบ่งข้อความในเว็บเพจออกเป็นส่วน ๆ แต่เราควรใช้หัวเรื่องอย่างเหมาะสม เพราะการใช้หัวเรื่องหลายแบบเกิดอาจจะสร้างความสับสนให้กับเนื้อหาได้ 2. การกาหนดลักษณะตัวอักษร (Physical & Logical) การกาหนดลักษณะตัวอักษรในเว็บเพจนั้น มีอยู่ 2 วิธี ได้แก่  แบบ Physical เป็นการกาหนดรูปแบบตัวอักษรอย่างเจาะจง  แบบ Logical ที่ผู้ใช้บราวเซอร์สามารถกาหนดรูปแบบตัวอักษรได้ด้วยตนเอง 2.1 การกาหนดลักษณะตัวอักษรแบบ Physical เราสามารถกาหนดรูปแบบตัวอักษรในข้อความได้หลายแบบ เช่น ตัวหนา ตัวเอน โดยรูปแบบที่กาหนดจะ ไม่มีการเปลี่ยนแปลง ถึงแม้บราวเซอร์ที่ใช้เปิดดูเว็บเพจจะเป็นคนละตัวกัน 2.1.1 กาหนดข้อความเป็นตัวหนา <b> เป็นการเน้นข้อความ จากตัวอักษรปกติให้หนาขึ้น เพื่อเน้นให้รู้ว่าเป็นข้อมูลที่สาคัญ หรือต้องการให้ เด่นกว่าข้อความส่วนอื่น ๆ ซึ่งเราจะใช้แท็ก <b> ในการกาหนดข้อความให้เป็นตัวหนา ชื่อแท็ก b (bold = ตัวหนา) ตาแหน่งของแท็ก อยู่ภายในแท็ก <body>…</body> รูปแบบ <b> ข้อความ </b>


หน่วยการเรียนรู้ที่ 2 การจัดวางและจัดรูปแบบเนื้อหาบนหน้าเว็บ

ใบความรู้ที่ 2.3 การจัดรูปแบบข้อความ

2.1.2 กาหนดข้อความเป็นตัวเอียง <i> เป็นการเน้นข้อความ จากตัวอักษรปกติให้เป็นตัวเอียง เพื่อเน้นให้รู้ว่าเป็นข้อมูลที่น่าสนใจ ซึ่งเราจะใช้ แท็ก <i> ในการกาหนดข้อความให้เป็นตัวเอียง ชื่อแท็ก i (italic = ตัวเอียง) ตาแหน่งของแท็ก อยู่ภายในแท็ก <body>…</body> รูปแบบ <i> ข้อความ </i> 2.1.3 ขีดเส้นใต้ข้อความ <u> เป็นการเน้นข้อความ เพิ่มจุดสังเกต โดยเราจะใช้แท็ก <u> ในการขีดเส้นใต้ ชื่อแท็ก u (underline = ขีดเส้นใต้) ตาแหน่งของแท็ก อยู่ภายในแท็ก <body>…</body> รูปแบบ <u> ข้อความ </u> 2.1.4 กาหนดข้อความเป็นตัวพิมพ์ดีด <tt> เป็นการเน้นข้อความจากตัวอักปกติให้เป็นตัวอักษรแบบพิมพ์ดีด มักใช้กับข้อความที่ต้องการให้ดูเป็น ทางการ และเป็นระเบียบ ซึ่งเราจะใช้แท็ก <tt> ในการกาหนดข้อความให้เป็นตัวอักษรแบบตัวพิมพ์ดีด ชื่อแท็ก tt (Typewriter Text = ตัวพิมพ์ดีด) ตาแหน่งของแท็ก อยู่ภายในแท็ก <body>…</body> รูปแบบ <tt> ข้อความ </tt> 2.1.5 กาหนดข้อความเป็นตัวขีดฆ่า <s> ตัวอักษรแบบขีดฆ่าจะนิยมใช้ในการยกเลิก หรือแสดงถึงการปฏิเสธต่อข้อมูลที่ไม่ต้องการ ซึ่งเราจะใช้ แท็ก <s> ในการกาหนด ชื่อแท็ก s (strike = ขีดฆ่า) ตาแหน่งของแท็ก อยู่ภายในแท็ก <body>…</body> รูปแบบ <s> ข้อความ </s> 2.1.6 กาหนดข้อความเป็นตัวยกและตัวห้อย <sup> , <sub> อักษรแบบตัวยกและตัวห้อยเป็นรูปแบบของข้อความที่เรามักพบบ่อยในการทางานด้านสูตรคณิ ตศาสตร์ และการคานวณ ซึ่งใช้แท็ก <sup> เป็นตัวยก และแท็ก <sub> เป็นตัวห้อย ชื่อแท็ก sup (superscript = ตัวอักษรยก) , sub (subscript = ตัวอักษรห้อย) ตาแหน่งของแท็ก อยู่ภายในแท็ก <body>…</body> รูปแบบ <sup> ข้อความ </sup> <sub> ข้อความ </sub>


หน่วยการเรียนรู้ที่ 2 การจัดวางและจัดรูปแบบเนื้อหาบนหน้าเว็บ

ใบความรู้ที่ 2.3 การจัดรูปแบบข้อความ

2.1.7 กาหนดข้อความให้ใหญ่ขึ้นและเล็กลง <big> , <small> ถ้าเราต้องการให้ข้อความบางส่วนถูกเน้นให้ดูเด่น หรือเป็นหัวข้อในเนื้อหาส่วนนั้น ก็สามารถทาได้โดย ใช้แท็ก big เพื่อให้ข้อความส่วนนั้นดูใหญ่กว่าข้อความส่วนอื่น ๆ แต่ถ้าต้องการกาหนดให้ข้อความบางส่วนเล็กลง เพื่อไม่อยากให้สนใจมากนัก เพราะไม่ใช่เนื้อหาหลัก แต่เป็นแค่ประเด็นเสริมเท่านั้น ก็สามารถทาได้โดยใช้แท็ก <small> ชื่อแท็ก big (big = ตัวอักษรขนาดใหญ่) , small (small = ตัวอักษรขนาดเล็ก) ตาแหน่งของแท็ก อยู่ภายในแท็ก <body>…</body> รูปแบบ <big> ข้อความ </big> <small> ข้อความ </small> 2.1.8 กาหนดข้อความขีดฆ่าและแก้ไขข้อมูล <del> , <ins> เป็นการขีดฆ่าข้อมูลและแก้ไขเป็นข้อมูลใหม่ ซึ่งจะใช้ 2 แท็กนี้คู่กัน คือ ขีดฆ่าด้วบ <del> และ แก้ไขข้อมูลนั้นใหม่ด้วยแท็ก <ins> ชื่อแท็ก del (delete = ขีดฆ่า ใช้เป็นสัญลักษณ์เพื่อบอกว่าข้อความส่วนนี้ไม่ใช้หรือผิด) , ins (insert = ขีดเส้นใต้ ใช้เป็นสัญลักษณ์ว่าข้อความนี้ถูกเพิ่มขึ้นในภายหลัง) ตาแหน่งของแท็ก อยู่ภายในแท็ก <body>…</body> รูปแบบ <del> ข้อความ </del> <ins> ข้อความ </ins> 2.2 การกาหนดลักษณะตัวอักษรแบบ Logical การกาหนดลักษณะตัวอักษรแบบ Logical นั้น เป็นการกาหนดรูปแบบตัวอักษรตามความหมายของ ข้อความนั้น เช่น ชื่อแท็ก รูปแบบแท็ก Emphasis <em>…</em> (ใช้เน้นข้อความ คาพูด หรือวลี) Strong <strong>…</strong> (ข้อความที่สาคัญมาก) Computer Code <code>…</code> (ข้อความที่เป็นโค้ดโปรแกรม) Citations <cite>…</cite> (ข้อความที่อ้างอิงถึงแหล่งที่มีของเนื้อหา) Definition <dfn>…</dfn> (ข้อความที่เป็นคานิยาม) Keyboard <kbd>…</kbd>


หน่วยการเรียนรู้ที่ 2 การจัดวางและจัดรูปแบบเนื้อหาบนหน้าเว็บ ชื่อแท็ก (ข้อความที่เหมือนแป้นพิมพ์) Samples (ข้อความที่เป็นตัวอย่าง) Variable Name (ใช้เน้นข้อความที่ถูกเปลี่ยนแปลง) Example (ให้แท็ก HTML ปรากฏบนหน้าจอเว็บเพจ) Address (กาหนดข้อความให้กับชื่อและที่อยู่) Abbreviate (ใช้แสดงชื่อย่อ) Acronym (กาหนดคาย่อจากอักษรแรกของแต่ละคา) Bi-directional algorithm (ตัวอักษรเขียนย้อยกลับ) Blockquote (กาหนดรูปแบบของข้อมูลที่อ้างอิงจากที่อื่น) Quote (กาหนดรูปแบบของข้อมูลที่อ้างอิงจากที่อื่นแบบสั้น)

ใบความรู้ที่ 2.3 การจัดรูปแบบข้อความ รูปแบบแท็ก <samp>…</samp> <var>…</var> <xmp>…</wmp> <address>…</address> <abbr>…</abbr> <acronym>…</acronym> <bdo>…</bdo> <blockquote>…</blockquote> <q>…</q>

3. ปรับเปลี่ยนขนาดตัวอักษร <Font size> เราสามารถทาการกาหนดและเปลี่ยนแปลงขนาดของตัวอักษรให้กับข้อความที่เราต้องการได้ เพื่อให้ในหน้า เว็บเพจมีขนาดตัวอักษรที่แตกต่างกัน โดยมีรูปแบบการทางานดังนี้ ชื่อแอทริบิวท์ size ตาแหน่งของแอทริบิวท์ อยู่ภายในแท็กเปิด <font…> รูปแบบ <font size = ขนาดตัวอักษร> ข้อความ </font> ค่าที่กาหนดให้ใช้ ขนาดตัวอักษร ซึ่งมีค่าตั้งแต่ 1 ถึง 7


หน่วยการเรียนรู้ที่ 2 การจัดวางและจัดรูปแบบเนื้อหาบนหน้าเว็บ

ใบความรู้ที่ 2.3 การจัดรูปแบบข้อความ

นอกจากการกาหนดขนาดตักษรแบบเจาะจง เราสามารถกาหนดขนาดอักษรได้อีกวิธี โดยการเทียบกับ ขนาดตัวอักษรปกติ (ปกติจะอยู่ที่ 3) ให้มีขนาดใหญ่ขึ้น (+) หรือเล็กลง (-) แต่ต้องไม่เกินขนาดของตัวอักษรที่ กาหนดได้ คือ 1 ถึง 7 โดยมีรูปแบบดังนี้ ชื่อแอทริบิวท์ size ตาแหน่งของแอทริบิวท์ อยู่ภายในแท็กเปิด <font…> รูปแบบ <font size = +ขนาดตัวอักษร> ข้อความ </font> <font size = -ขนาดตัวอักษร> ข้อความ </font> ค่าที่กาหนดให้ใช้ ขนาดตัวอักษร สามารถเพิ่มและลดจากค่าเดิมในขณะนั้น โดยใส่ค่า + หรือ - เช่น +2 , -3 4. การกาหนดแบบตัวอักษร <font face> ในเว็บเพจแต่ละหน้านอกจากการกาหนดลักษณะตัวอักษร และขนาดตัวอักษรแล้ว เราสามารถกาหนด รูปแบบตัวอักษรหรือฟอนต์ที่ใช้ได้ด้วย เช่น AngsanaUPC, CordiaNEW โดยมีรูปแบบดังนี้ ชื่อแอทริบิวท์ face ตาแหน่งของแอทริบิวท์ อยู่ภายในแท็กเปิด <font…> รูปแบบ <font face = ชื่อฟอนต์> ข้อความ </font> ค่าที่กาหนดให้ใช้ ชื่อฟอนต์ที่ต้องการใช้งาน 5. การใช้สีในเว็บเพจ สีในคอมพิวเตอร์เกิดขึ้นจากการผสมค่าสีโหมด RGB ซึ่งประกอบด้วยสี 3 สี คือ Red (แดง) Green (เขียว) และ Blue (น้าเงิน) ตัวอย่างเช่น สีแดง มีค่าสีเท่ากับ #ff0000 ซึ่งเกิดจากค่าสีแดง ff สีเขียว 00 และสีน้าเงิน 00

ff

00

00

R = ff

G = 00

B = 00

16

R = 255

G=0

B=0

10

1111 1111

0000 0000

0000 0000

24

2

16.7

ในบางครั้งการระบุค่าสีด้วยตัวเลขอาจจะไม่สะดวกมากนัก จึงได้มีการกาหนดชื่อสีมาตรฐานให้เราสามารถ เลือกใช้ได้สะดวก เช่น red, green, black, yellow ซึ่งสีดังกล่าวจะมีมากหรือน้อยก็ขึ้นอยู่กับระบบที่เราให้อยู่ เช่น ในระบบ Windows VGA จะมีชื่อสีให้เรียกใช้ 16 สี คือ Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Purple, Red, Silver, Teal, White และ Yellow


หน่วยการเรียนรู้ที่ 2 การจัดวางและจัดรูปแบบเนื้อหาบนหน้าเว็บ

ใบความรู้ที่ 2.3 การจัดรูปแบบข้อความ

อย่างไรก็ตามการนาชื่อสีมาใช้ก็ไม่เป็นที่นิยมมากนัก เพราะปัญ หาชื่อสีของแต่ละระบบไม่เท่ากัน ถ้าเรา เรียกใช้ชื่อสีที่ไม่มีในระบบอื่น เช่น มีในวินโดวส์ (Windows) แต่ไม่มีในระบบแมคโอเอส (MacOS) หรือมีใน วินโดวส์ (Windows) แต่ในลีนุกซ์ (Linux) ไม่มี หน้าเว็บเพจกอาจจะแสดงสีไม่ถูกต้อง ดังนั้นจึงนิยมเรียกใช้สีแบบ ใช้เลขฐานสิบหกมากกว่า ข้อควรระวัง 1. ค่าสีจะต้องเรียงตามลาดับ RGB เสมอ ถ้าเราใส่ค่าสีสลับกัน เช่น d560cc กับ d5cc60 จะถือว่า เป็นคนละสีกัน 2. ค่าสีต้องมีครบ 6 หลักเสมอ หรือค่าสีละ 2 หลัก เช่น 00f006 ไม่ใช่ 0f06 แบบหลังจะได้สีที่ไม่ ตรงตามความต้องการ 3. ในการกาหนดค่าสีในเว็บเราจะนาด้วยเครื่องหมาย # และต่อด้วยค่าสีแดง 2 หลัก ค่าสีเขียว 2 หลัก และค่าสีน้าเงิน 2 หลัก เช่น #00ff00 จะแสดงสีเขียว 6. กาหนดสีพื้นและสีตัวอักษร <body bgcolor… text…> เราสามารถกาหนดสีพื้นของหน้าเว็บเพจ และสีตัวอักษรได้ด้วยการกาหนดค่าสีให้กับแอทริบิวท์ bgcolor (สีพื้นของเว็บเพจ) และ text (สีตัวอักษร) ซึ่งรูปแบบมีดังนี้ ชื่อแอทริบิวท์ bgcolor (สีพื้นเว็บเพจ) และ text (สีตัวอักษรทั้งเว็บเพจ) ตาแหน่งของแอทริบิวท์ อยู่ภายในแท็กเปิด <body…> รูปแบบ <body bgcolor = #รหัสสี text = #รหัสสี> <body bgcolor = ชื่อสี text = ชื่อสี> 7. กาหนดสีเฉพาะข้อความใด ๆ <font color> นอกเหนือจากการกาหนดสีของตัวอักษรทั้งหน้าโดยการใช้แอทริบิวท์ text แล้ว ถ้าเราต้องการให้ข้อความ ภายในหน้าเว็บเพจมีสีทีแตกต่างกันไป ให้เราใช้คาสั่งที่มีรูปแบบ ดังนี้ ชื่อแอทริบิวท์ color ตาแหน่งของแอทริบิวท์ อยู่ภายในแท็กเปิด <font…> รูปแบบ <font color = #รหัสสี> ข้อความ </font> <font color = ชื่อสี> ข้อความ </font> 8. การกาหนดอักษรวิ่ง <marquee> เราสามารถกาหนดให้ข้อความเคลื่อนไหวบนหน้าเว็บเพจได้ โดยการใช้คาสั่ง marquee ชื่อแท็ก marquee ตาแหน่งของแท็ก อยู่ภายในแท็ก <body>…</body> รูปแบบ <marquee> ข้อความ </marquee> โดยมีแอทริบิวท์เพิ่มเติมที่เรากาหนดให้กับแท็กนี้ได้ ดังต่อไปนี้


หน่วยการเรียนรู้ที่ 2 การจัดวางและจัดรูปแบบเนื้อหาบนหน้าเว็บ แอทริบิวท์ behavior

direction width height hapace vspace loop scrollamount = n scrolldelay = n

ใบความรู้ที่ 2.3 การจัดรูปแบบข้อความ

คาอธิบาย กาหนดรูปแบบการวิ่ง มี 3 รูปแบบ ดังนี้ scroll วิ่งหายไปจากขอบ และปรากฏที่ขอบอีกด้าน ทาซ้าเรื่อย ๆ slide วิ่งแล้วหยุดที่ขอบ alternate วิ่งกระทบขอบแล้วเด้งไปอีกทาง กลับไปกลับมาก กาหนดทิศทางการเคลื่อนที่ left, right, up และ down กาหนดความกว้างของขอบ marquee (กาหนดค่าเจาะจง หรือเปอร์เซ็นต์เทียบจากขนาดบราวเซอร์) กาหนดความสูงของขอบ marquee (กาหนดค่าเจาะจง หรือเปอร์เซ็นต์เทียบจากขนาดบราวเซอร์) กาหนดระยะห่างของข้อความที่เคลื่อนไหวและกรอบทางด้านซ้ายและขวา กาหนดระยะห่างของข้อความที่เคลื่อนไหวและกรอบทางด้านบนและล่าง กาหนดจานวนรอบการวิ่ง กาหนดระยะในการขยับข้อความ (ยิ่งมาก ข้อความจะขยับไกลในแต่ละครั้ง) กาหนดเวลารอเป็นหน่วย Milliseconds (ยิ่งมาก ข้อความจะรอนานกว่าจะขยับแต่ละครั้ง)


2 3 การจัดรูปแบบข้อความ  
Advertisement
Read more
Read more
Similar to
Popular now
Just for you