การจัดและตกแต่งข้อความ
การจัดและตกแต่งข้อความ
Embedded Files
การจัดรูปแบบข้อความในเอกสารเว็บเพจของภาษา HTML คือ การจัดรูปแบบของ ข้อมูลที่ต้องการจะแสดงในหน้าเว็บเพจ โดยใช้แท็กคำสั่งต่าง ๆ ในการกำหนดการแสดงรูปแบบตามที่ ผู้ออกแบบเว็บเพจต้องการ รวมทั้งการเขียนแท็กคำสั่งให้มีความถูกต้องตามรูปแบบของภาษา HTML ด้วย ซึ่งกระบวนการในการจัดรูปแบบมีดังต่อไปนี้
กำหนดรูปแบบหัวเรื่อง <tag h1 - h6>
กำหนดรูปแบบหัวเรื่อง <tag h1 - h6>
การกำหนดรูปแบบหัวเรื่องเป็นการกำหนดขนาดตัวอักษรให้แตกต่างกัน เพื่อแยกแต่ ละหัวเรื่องอย่างชัดเจน โดยเรียงลำดับหัวเรื่องใหญ่ไปหัวเรื่องย่อย ใช้แท็กคำสั่ง h..., มีรูปแบบคำสั่ง คือ <h...></h...> ตามด้วยตัวเลข 1-6 สามารถกำหนดขนาดหัวเรื่องได้ 6 ระดับ
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
Result
การตัดคำขึ้นย่อหน้าใหม่ <tag p>
การตัดคำขึ้นย่อหน้าใหม่ <tag p>
เมื่อต้องการจัดข้อความขึ้นบรรทัดใหม่ และเว้นบรรทัดให้อีกหนึ่งบรรทัด แท็กที่ใช้ควบคุมการทำงานในลักษณะนี้คือ แท็ก <p>
Example
<p>This is some text in a paragraph.</p>
<p>This is some text in a paragraph.</p>
Result
การวางตำแหน่งข้อความในย่อหน้า
การวางตำแหน่งข้อความในย่อหน้า
สามารถจัดเรียงข้อความในแต่ละย่อหน้าของเพจได้ โดยการกำหนดตำแหน่งในแอตทริบิวต์ align <Alignment> ของแท็ก<p>
รูปแบบ <p align="ตำแหน่ง"> ข้อความ </p>
align="left" คือ จัดให้ข้อความอยู่ตำแหน่งชิดซ้าย
align="right" คือ จัดให้ข้อความอยู่ตำแหน่งชิดขวา
align="center" คือ จัดให้ข้อความอยู่ตำแหน่งตรงกลาง
align="justify" คือ จัดให้ข้อความเต็มพื้นที่
Example
<p align="left">Text Left</p>
<p align="right">Text Right</p>
<p align="center">Text Center</p>
Result
การจัดให้ข้อมูลอยู่กึ่งกลางหน้ากระดาษ <tag center>
การจัดให้ข้อมูลอยู่กึ่งกลางหน้ากระดาษ <tag center>
Not Supported in HTML5. The <center> tag was used in HTML4 to center-align text.
การจัดให้ข้อมูลที่เป็นข้อความ หรือ รูปภาพ ให้อยู่ตำแหน่งตรงกลางจอภาพ โดยใช้แท็ก<center>
Example
<center>
<p>การจัดให้ข้อมูลอยู่กึ่งกลางหน้ากระดาษ</p>
<p>กึ่งกลางหน้ากระดาษ</p>
</center>
Result
การสร้างเส้นคั่น <tag hr>
การสร้างเส้นคั่น <tag hr>
ต้องการแบ่งข้อความบนจอภาพ โดยใช้เส้นคั่นทางแนวนอน สามารถกำหนดตำแหน่ง สี ขนาดความหนา ความยาว หรือกำหนดเป็นเส้นทึบได้โดยใช้แท็ก <hr >
แอททริบิวต์ที่กำหนดคุณสมบัติของเส้นคั่นดังนี้
Align การจัดตำแหน่งของเส้นคั่นบนจอภาพ ได้แก่ center, left, right
Color การกำหนดสีของเส้นคั่น
Size การกำหนดขนาดความหนาของเส้นคั่น
Width การกำหนดความกว้างของเส้นคั่น
Noshade การกำหนดให้เส้นคั่นเป็นเส้นทึบ
Example
<center>
<p>การจัดให้ข้อมูลอยู่กึ่งกลางหน้ากระดาษ</p>
<hr>
<hr width="50%" align="center" size="5" color="red">
</center>
Result
การจัดรูปแบบเอกสารตามที่กำหนด <tag pre>
การจัดรูปแบบเอกสารตามที่กำหนด <tag pre>
เป็นการกำหนดตำแหน่งการแสดงผลตามรูปแบบที่ผู้พัฒนาเว็บเพจทำการจัดในไฟล์ต้นฉบับ โดยใช้แท็กคำสั่ง <pre>....</pre> มักจะใช้คำสั่งนี้ในกรณีที่นำข้อมูลจาก Notepad หรือ Text Editor อื่น ๆ มาแสดงผล โดยไม่ต้องการให้เสียรูปแบบเดิม ซึ่งจะต้องกำหนดให้ใส่ แท็ก Pre กำกับหัวท้ายของข้อมูลนั้น
Example
<pre>
ตัวอย่าง ทดสอบการพิมพ์โดยการเว้นวรรคตามต้องการด้วยแท็ก PRE
รายรับ
ขาย Hard disk 1,200 บาท
ดอกเบี้ยเงินฝาก 300 บาท
รายจ่าย
ค่าน้ำ 1,800 บาท
ค่าไฟ 2,500 บาท
</pre>
Result
การกำหนดลักษณะตัวอักษร (Physical & Logical)
การกำหนดลักษณะตัวอักษร (Physical & Logical)
การกำหนดลักษณะตัวอักษรในเว็บเพจนั้น มีอยู่ 2 วิธี ได้แก่
แบบ Physical เป็นการกำหนดรูปแบบตัวอักษรอย่างเจาะจง
แบบ Logical ที่ผู้ใช้บราวเซอร์สามารภกำหนดรูปแบบตัวอักษรได้ด้วยตนเอง
กำหนดลักษณะตัวอักษรแบบ Physical
กำหนดลักษณะตัวอักษรแบบ Physical
เราสามารถกำหนดรูปแบบตัวอักษรในข้อความได้หลายแบบ เช่น ตัวหนา ตัวเอน โดยรูปแบบที่กำหนดจะไม่มีการเปลี่ยนแปลง ถึงแม้บราวเซอร์ที่ใช้เปิดดูเว็บเพจจะต่างกัน
Bold (ตัวหนา)
Bold (ตัวหนา)
This is <b>Bold</b>
Italic (ตัวเอียง)
Italic (ตัวเอียง)
This is <i>Italic</i>
Underline (ขีดเส้นใต้)
Underline (ขีดเส้นใต้)
This is <u>Underline</u>
Superscript (ตัวอักษรยก)
Superscript (ตัวอักษรยก)
This is <sup>Superscript</sup>
Subscript (ตัวอักษรห้อย)
Subscript (ตัวอักษรห้อย)
This is <sub>Subscript</sub>
Strike (ขีดฆ่า)
Strike (ขีดฆ่า)
This is <s>Strike</s>
Small (ตัวอักษรขนาดเล็ก)
Small (ตัวอักษรขนาดเล็ก)
This is <small>Small</small>
Typewriter Text (ตัวพิมพ์ดีด
Typewriter Text (ตัวพิมพ์ดีด
This is <tt>Typewriter</tt>
Big (ตัวอักษรขนาดใหญ่)
Big (ตัวอักษรขนาดใหญ่)
This is <big>Big</big>
Delete (ขีดฆ่า)
Delete (ขีดฆ่า)
This is <del>Delete</del>
Insert (ขีดเส้นใต้)
Insert (ขีดเส้นใต้)
This is <ins>Insert</ins>
หมายเหตุ แท็ก sup, sub, small สามารถซ้อนกันได้ เพื่อให้การกำหนดค่า มีมากกว่าเดิม เช่น <small><small>ตัวเล็กมาก </small></small>
กำหนดลักษณะตัวอักษรแบบ Logical
กำหนดลักษณะตัวอักษรแบบ Logical
การกำหนดลักษณะตัวอักษรแบบ Logical นั้น เป็นการกำหนดรูปแบบตัวอักษรตามความหมายของข้อความนั้น
Emphasis (ใช้เน้นข้อความคำพูดหรือวลี)
Emphasis (ใช้เน้นข้อความคำพูดหรือวลี)
This is <em>Emphasis</em>
Strong (ข้อความที่สำคัญมาก)
Strong (ข้อความที่สำคัญมาก)
This is <strong>strong</strong>
Computer Code (ข้อความที่เป็นโค้ดโปรแกรม)
Computer Code (ข้อความที่เป็นโค้ดโปรแกรม)
This is <code>Computer Code</code>
Citations(ข้อความที่อ้างอิงแหล่งที่มาของเนื้อหา)
Citations(ข้อความที่อ้างอิงแหล่งที่มาของเนื้อหา)
This is <cite>Citations</cite>
Definition (ข้อความที่เป็นนิยาม)
Definition (ข้อความที่เป็นนิยาม)
This is <dfn>Definition</dfn>
Keyboard (ข้อความที่เหมือนแป้นพิมพ์)
Keyboard (ข้อความที่เหมือนแป้นพิมพ์)
This is <kbd>Keyboard</kbd>
bi-directional algorithm (ตัวอักษรเขียนย้อนกลับ)
bi-directional algorithm (ตัวอักษรเขียนย้อนกลับ)
This is <bdo>bi-directional algorithm</bdo>
ตัวอย่างการใช้งานหลายๆ tag พร้อมกัน
ตัวอย่างการใช้งานหลายๆ tag พร้อมกัน
Example
<h3 align="center">Taweethapisek School <sup>the school of gentlemen</sup></h3>
<p align="right"><u><i>โรงเรียนทวีธาภิเศก</i></u> <s>โรงเรียนทวีธาภิเษก</s></p>
Result
อธิบาย Code
บรรทัดที่ 1 : การสร้างหัวข้อควรใช้ tag h1-h6 ขึ้นอยู่กับความเหมาะสมของขนาด และมีการยกข้อความโดยใช้ tag sup ซึ่ง tag sup นี้จะต้องอยู่ภายใน tag h3
บรรทัดที่ 2 : ข้อความ "โรงเรียนทวีธาภิเศก" ประกอบด้วย 2 รูปแบบคือ ตัวเอียง และ ขีดเส้นใต้ ดังนั้นการเขียนก็จะต้องประกอบด้วย 2 tag เช่นเดียวกัน โดยจะเอา tag ใดขึ้นก่อนก็ได้ ยกตัวอย่างเช่น <u><i>.......</i></u>
Page updated
Report abuse