บทท่ี 4 การจดั และตกแต่งข้อความ การกำหนดหัวเร่ือง <hn> คือการกำหนดขนาดตวั อกั ษรใหแ้ ตกตา่ งกันเพื่อแยกแต่ละหัวเรื่องอยา่ ง ชดั เจน เราสามารถกำหนดขนาดหวั เรื่องได้ถงึ 6 ระดับ ดงั น้ี เรยี นรู้แทก็ ตำแหน่งแทก็ : อยูภ่ ายใน <body>…….</body> รูปแบบการใช:้ <hn> ตวั อยา่ งการใช้ <!--..--> <body> <h1> Heading1 </h1> <h2> Heading2 </h2> <h3> Heading3 </h3> <h4> Heading4 </h4> <h5> Heading5 </h5> <h6> Heading6 </h6> <body> ผลลพั ท์ท่ไี ด้ จะเหน็ ว่า h1 จะมีขนาดใหญ่สุด และ h6 จะมีขนาดเลก็ สดุ คำส่ังนี้จะทำให้ข้อความหนาขน้ึ และตดั คำขน้ึ บรรทดั ใหม่อัตโนมัติ การกำหนดลกั ษณะตัวอักษร (Physical&Logical) การกำหนดลกั ษณะตวั อักษรในเว็บเพจน้นั มอี ยู่ 2 วิธี ได้แก่ แบบ Physical เป็นการกำหนดรูปแบบตัวอักษรอย่างเจาะจง แบบ Logical ที่ผู้ใช้บราว์เซอร์ สามารถกำหนดรูปแบบตัวอักษรได้ด้วยตัวเอง 1. การกำหนดลักษณะตัวอักษรแบบ Physical เราสามารถ
กำหนดรูปแบบตัวอักษรในข้อความได้หลายแบบ เช่น ตัวหนา ตัวเอน โดย รูปแบบที่กำหนดจะไม่มีการ เปล่ียนแปลง ถงึ แม้ Web browser ท่ีใชเ้ ปิดจะเป็นคนละตวั กัน ลักษณะตัวอักษรทน่ี ยิ มใช้ เชน่ ช่ือแทก็ รูปแบบแทก็ ตวั อยา่ ง 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 หมายเหตุ แท็ก <sup>,<sub>,<big>,<small> สามารถนำมาซ้อนกนั ได้ เพอ่ื ให้การกำหนดค่ามากข้ึนกวา่ เดิม เช่น <big>BIG</big> กับ <big><big>BIG</big></big> คำวา่ BIG ตัวทสี่ องจะใหญ่กว่าตวั แรกเชน่ กนั ถ้า เปลี่ยนแทก็ <sup> ตัวก็จะยกสงู ขึ้น แท็ก <sub> ตวั กจ็ ะหอ้ ยต่ำลง เปน็ ต้น ผลลพั ท์ที่ได้
การกำหนดลักษณะตัวอักษรแบบ Logical การกำหนดลักษณะตวั อักษรแบบ Logical นั้น เปน็ การกำหนดรูปแบบตัวอกั ษรตามความหมายของ ขอ้ ความนน้ั เชน่ ชื่อแท็ก รูปแบบแทก็ ตัวอยา่ ง Emphasis Emphasis (ใชเ้ นน้ ข้อความคำพูดหรือ <em>...</em> Strong วล)ี Computer Code Strong (ข้อความที่สำคัญมาก) <strong>...</strong> Citations Computer Code (ข้อความท่เี ปน็ โคด้ <code>...</code> Definition Keyboard โปรแกรม) Samples Citations (ขอ้ ความที่อ้างอิงแหลง่ ท่ีมา <cite>...</cite> Example ของเนื้อหา) Address Definition (ข้อความท่เี ป็นคำนยิ าม) <dfn>...</dfn> bi-directional Keyboard (ขอ้ ความท่เี หมือน <kbd>...</kbd> แปน้ พิมพ์) Samples (ขอ้ ความทเ่ี ปน็ ตัวอย่าง) <samp>...</samp> Example ใหแ้ ท็ก HTML ปรากฏบน <xmp>...</xmp> หนา้ จอเวบ็ เพจ) Address (กำหนดข้อความใหก้ ับช่ือ <address>...</address> และที่อย)ู่ bi-directional algorithm (ตวั อกั ษร <bdo>...</bdo> เขียนย้อนกลับ) หมายเหตุ แทก็ <bdo> จะมีแอททริบวิ ท์ชอื่ dir=”rtl” และคา่ ทใ่ี ส่ก็จะมี “rtl” (right to left เขียนจากขวามา ซา้ ย) และ “ltr” (left to right เขียนจากซา้ ยมาขวา) ปกตถิ า้ ไมก่ ำหนดจะเปน็ “ltr” อยูแ่ ลว้ ตัวอย่างเชน่ <bdo dir=”rtl”>bi-directional algorithm</bdo>ผลลัพธ์ จะเปน็ คำวา่ “mhtirogla lanoitcerid-ib ตวั อย่างการใชง้ าน <body> <p> <em> em=เนน้ คำพดู หรือวลี </em> </p> <p> <strong> strong=เนน้ ขอ้ ความทส่ี ำคญั มาก </strong> </p> <p> <code> code=โคด้ โปรแกรม </code> </p>
<p> <bdo dir=\"rtl\"> love=เขียนย้อนกลับ </bdo> </p> <body> ผลลัพธท์ ี่ได้ การปรบั เปลี่ยนตวั อักษร <font size> เราสามารถทำการปรบั เปลีย่ นขนาดตวั อักษรในหนา้ เวบ็ เพจ ใหม้ ขี นาดแตกต่างกัน โดยมรี ูปแบบดงั น้ี เรียนรแู้ ท็ก ตำแหนง่ แท็ก : อยภู่ ายในแท็กเปดิ <font> รปู แบบการใช:้ <font size=“n”>ข้อความ</font> ค่าท่กี ำหนดให้ใช้ : ขนาดตัวอกั ษร n ซ่ึงมีคา่ ตงั้ แต่ 1 ถงึ 7 ตัวอยา่ งการใชง้ าน <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> ผลลพั ท์ท่ไี ด้ การกำหนดรูปแบบตัวอักษร <font face> ในหน้าเว็บเพจ เราสามารถกำหนดรปู แบบตัวอกั ษรทจ่ี ะ แสดงผลตามทเี่ ราต้องการได้ เชน่ Angsana New , Cordia NEW โดยมรี ูปแบบดงั นี้ เรียนรแู้ ท็ก เรยี นรูแ้ ทก็ ตำแหน่งแทก็ : อยภู่ ายในแท็กเปดิ <font> รูปแบบการใช:้ <font face=“ช่อื ฟอนต์”>ข้อความ</font> ค่าท่กี ำหนดใหใ้ ช้ : ชื่อฟอนต์ที่ตอ้ งการใช้งานเช่น Angsana New ตวั อยา่ งการใชง้ าน body> <font face=\"AngsanaNew\"> กำหนดรปู แบบตวั อักษรAngsanaNew </font> <font face=\"TH SarabunPSK\"> กำหนดรูปแบบตัวอกั ษรTH SarabunPSK
</font> <body> ผลลัพท์ท่ไี ด้ หมายเหตุ หากเครื่องใดไม่มีฟอนต์ดงั กลา่ วจะทำใหก้ ารแสดงผลผดิ พลาด ดังน้ันเราควรใชฟ้ อนตม์ าตรฐานที่มีใน คอมพิวเตอร์ทกุ เครอื่ ง ในกรณีทีเ่ ราไม่แนใ่ จวา่ เครื่องของผใู้ ช้ทเ่ี ปิดดูเว็บเพจน้นั มีฟอนต์ท่เี รากำหนดหรอื ไม่ เราสามารถระบุ ฟอนต์ไวห้ ลายชดุ เพ่ือใชแ้ ทนกนั ได้ โดยใชแ้ ท็กท่ีมีรูปแบบดังนี้ เมอ่ื เวบ็ เบราว์เซอร์ทเ่ี ปดิ หน้าเวบ็ นไี้ ม่มีฟอนต์ตัวที่ 1 ก็จะไปใชฟ้ อนตต์ ัวท่ี 2 และตวั ต่อไปตามทเ่ี รากำหนดไว้ ตำแหนง่ แท็ก : อย่ภู ายในแท็กเปิด <font> รูปแบบการใช้: <font face=“ชอ่ื ฟอนต์1,ชอ่ื ฟอนต์2,…”>ข้อความ</font> ค่าท่ีกำหนดให้ใช้ : ชื่อฟอนต์ทีต่ อ้ งการใช้งาน และฟอนต์ที่นำมาใชแ้ ทนกรณีทีฟ่ อนตท์ ีร่ ะบไุ ว้ก่อนหน้า ไมม่ ีอยูใ่ นเคร่ืองคอมพวิ เตอร์ การใส่สีด้วยชื่อสี&รหัสสี การใส่สีในเว็บเพจ สีในคอมพิวเตอร์เกิดขึ้นจากการผสมค่าสีโหมด RGB ซึ่ง ประกอบด้วย สี 3 สี คือ Red(แดง)Green(เขียว)และ Blue(น้ำเงิน) เราสามารถกำหนดค่าสีได้ 2 แบบ คือ 1. ชื่อสี คือระบุชื่อสีลงไปเลย เช่น AQUA, BULE, GRAY, LIME, NAVY, PURPLE, SILVER,WHITE (สขี าว), BLACK, FUCHSIA, GREEN, MAROON, OLTVE, RED, TEAL, YELLOW 2. ค่าสี เป็นการระบุเป็นเลขฐาน 16 (0-9 หรือ A-F โดย 0 มีค่าสีน้อยที่สุด และ F มีค่าสีมากที่สุด) ทั้งหมด 3 ชุด 1 ชุดแทนด้วยตัวอักษร 2 ตัว แสดงค่าของแม่สี แดง เขียว นํ้าเงิน (RGB) โดยการใส่คา่ สีในเว็บ
เพจจะตอ้ งเขยี นคา่ สีตามหลงั เคร่ืองหมาย # เชน่ #FFFFFF จะให้ สขี าว ,#000000 จะให้ สีดำ (คลกิ ดูตัวอย่าง ตารางสี ) หมายเหตุ การระบคุ า่ สจี ะต้อง ระบุใหค้ รบทงั้ 3 ชุด คือมที ั้งหมด 6 ตวั ถ้าระบไุ มค่ รบจะทำให้สีท่ีได้ ไม่ตรงกับความต้องการ ในการระบุชอ่ื สหี รือคา่ สีอาจจะเป็นเรื่องยากสำหรับใครที่ยงั ไม่รู้จะใชส้ ีอะไร ดังนั้นเรา อาจจะใช้วิธีผสมสีผ่านโปรแกรมตกแต่งภาพอยา่ ง โปรแกรม Adobe Photoshop ได้ดงั น้ี การใส่สพี ้ืนหลงั และสตี วั อักษร <body bgcolor.. text..> เราสามารถกำหนดสีพ้ืนหลังของหนา้ เวบ็ เพจ และสีตวั อักษรได้ดว้ ยการกำหนดค่าสีให้กับแอททริบิวท์ bgcolor (สีพน้ื หลังเวบ็ เพจ) และ text (สี ตัวอกั ษร) ซึ่งมีรปู แบบดงั น้ี 1.การกำหนดสีตัวอกั ษรเฉพาะสว่ น เรยี นร้แู ทก็ ตำแหนง่ แท็ก : อยู่ภายในแท็กเปดิ <body> รูปแบบการใช:้ <body bgcolor=“รหสั สี/ช่ือสี” Text=“รหสั สี/ช่ือส”ี > คา่ ทีก่ ำหนดใหใ้ ช้ : รหัสสี เช่น “#FFFFFF” หรือชื่อสี เช่น blue ตัวอย่างการกำหนดสพี นื้ หลังและสีตวั อักษร <body bgcolor=\"#FFE4A4\" text=\"blue\"> การทดลองใส่สพี น้ื หลังและสีตวั อักษร <body>
ผลลัพท์ท่ีได้ หมายเหตุ ตวั หนังสอื ทั้งหมดในหนา้ เว็บเพจจะเปน็ สีนำ้ เงินและพนื้ หลงั จะเปน็ สที เ่ี ราเลอื ก การกำหนดสีตวั อักษรเฉพาะสว่ น เรียนร้แู ท็ก ตำแหนง่ แท็ก : อยภู่ ายในแท็กเปิด <body> รปู แบบการใช้: <font color=“รหสั ส/ี ช่ือส”ี > ข้อความ <font> ค่าทก่ี ำหนดให้ใช้ : รหสั สี เช่น “#FFFFFF” หรือชอื่ สี เช่น blue ตวั อยา่ งการกำหนดสตี วั อักษร <body > <font color=\"#ooooFF\"> กำหนดสตี ามรหัสสี </font> <br> <font color=\"red\"> กำหนดสตี ามชื่อสี </font> <body>
ผลลัพท์ที่ได้ ตัวอกั ษรจะมสี ีแตกตา่ งกันตามสที ่ีเรากำหนดการกำหนดตัวอักษรว่งิ <marquee> เราสามารถ กำหนดใหข้ ้อความเคล่ือนไหวบนหนา้ เว็บเพจได้ โดยการใช้แท็ก marquee เรยี นรแู้ ท็ก ตำแหนง่ แทก็ : อยู่ระหวา่ งแทก็ <body>…</body> รปู แบบการใช้: <marquee> ขอ้ ความ </marquee> และกำหนดรปู แบบการเคลอ่ื นไหวให้กบั แท็ก marquee ไดด้ ว้ ยแอตทริบวิ ต์เพมิ่ เติม ดงั ต่อไปนี้ ช่ือแอททริบิวท์ ความหมาย Behavior รปู แบบการว่ิง มี 3 รูปแบบ scroll วงิ่ หายไปจากขอบ และปรากฏที่ขอบอกี ดา้ น ทำซ้ำเร่ือยๆ slide วิง่ แล้วหยดุ ที่ขอบ alternate ว่งิ กระทบขอบแล้วเด้งไปอีกทาง กลับไปกลับมา direction กำหนดทศิ ทางการเคลื่อนท่ี left, right, up และ down width กำหนดความกว้างของกรอบ marquee (กำหนดค่าเจาะจง หรอื เปอรเ์ ซ็นต์เทียบจากขนาดบราวเซอร์) height กำหนดความสงู ของกรอบ marquee (กำหนดค่าเจาะจง หรอื เปอรเ์ ซ็นต์เทียบจากขนาดบราวเซอร์) hspace กำหนดระยะหา่ งของขอ้ ความทเี่ คลื่อนไหวและกรอบทางดา้ นซ้ายและ ขวา
vspace กำหนดระยะหา่ งของข้อความที่เคล่อื นไหวและกรอบในแนวบนและ ล่าง loop กำหนดจำนวนรอบการวิ่ง scrollamount=n กำหนดระยะในการขยับข้อความ (ย่ิงมาก ขอ้ ความจะขยบั ไปไกลใน แตล่ ะครง้ั ) scrolldelay=n กำหนดเวลารอเปน็ หนว่ ย Milliseconds (ยิง่ มาก ข้อความจะรอนาน กว่าจะขยบั แตล่ ะครงั้ ) bgcolor=”รหัสสี/ช่ือสี” กำหนดสพี ้นื หลงั ของกรอบอกั ษรวิง่ กำหนดเปน็ รหัสสีหรอื ช่ือสี เช่น bgcolor=“#FFCCCC”, bgcolor=“green” onmouseOver=”this.stop()” กำหนดใหเ้ ม่ือนำเมาส์มาชี้ให้หยดุ วงิ่ onmouseOut=”this.start()” กำหนดใหเ้ ม่ือเอาเมาส์ออกจากกรอบอักษรวง่ิ ให้วิง่ ต่อ หากต้องการให้ เมื่อเอาเมาส์มาชี้แล้วให้วง่ิ เม่ือเอาเมาสอ์ อกให้หยุด ก็สามารถทำได้ โดยสลบั ค่าระหว่าง “this.stop()” กบั “this.start()” ตัวอยา่ งการใช้งาน <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>
ผลลพั ท์ท่ไี ด้
Search
Read the Text Version
- 1 - 12
Pages:
