สอนทำเว็บ ด้วย HTML

n คือตัวเลขแสดงขนาดของตัวอักษร ค่าของ n นั้นจะมีค่าอยู่ที่ 1 - 6
- n = 1 จะมีขนาดตัวอักษรหัวเรื่องใหญ่สุด
- n = 6 จะมีขนาดตัวอักษรหัวเรื่องเล็กสุด
- สามารถเพิ่ม/ลดขนาดโดยใช้เครื่องหมาย + หรือ - นำหน้าตัวเลขได้ เช่น -1 หรือ +5 เป็นต้น

<HTML>
<HEAD>
 <TITLE>การกำหนด Heading</TITLE>
</HEAD>
<BODY>
 Computer - Default Size
 <H1>Computer - H1</H1>
 <H2>Computer - H2</H2>
 <H3>Computer - H3</H3>
 <H4>Computer - H4</H4>
 <H5>Computer - H5</H5>
 <H6>Computer - H6</H6>
</BODY>
</HTML>

ผลลัพธ์

Computer - Default Size

Computer - H1

Computer - H2

Computer - H3

Computer - H4

Computer - H5

Computer - H6

หมายเหตุ ปัจจุบันการพัฒนาเว็บไซต์มักจะกำหนดขนาดของตัวอักษร (Font size) ให้มีขนาดคงที่ เช่น 1 หรือ 14-16 Point เพื่อให้แสดงผลได้สวยงาม ได้สัดส่วนเดียวกัน จึงไม่นิยมใช้แท็ก <Hn> ควบคุม แต่จะเปลี่ยนไปใช้ในลักษณะการมาร์ค (Mark) เพื่อควบคุมกับโปรแกรมมิ่ง เช่น XML หรือ CSS แทน

การตกแต่งข้อความ

แท็กที่ใช้ตกแต่งข้อความเพื่อเน้นคำ หรือข้อความสั้นๆ หรือให้ดูสวยงาม มาตรฐาน HTML 4.0 มีแท็กสำหรับใช้ตกแต่งข้อความมากมาย ทำได้แทบจะครบทุกรูปแบบ และสามารถแบ่งออกเป็น 2 กลุ่มใหญ่ คือ

Logical Format - เป็นแท็กที่มีชื่อที่สื่อความหมาย ซึ่งเบราเซอร์แต่ละยี่ห้อจะแปลแท็กเหล่านี้ต่างกัน และให้ผลเป็นเว็บเพจที่มีหน้าตาต่างกัน แต่ก็แตกต่างกันไม่มากนัก โดยยังคงให้ผลใกล้เคียงกับชื่อของแท็กนั้นๆ เช่น หมายถึงข้อความที่ต้องการเน้นเป็นพิเศษ ซึ่งเว็บเบราเซอร์อาจจะแสดงเป็นตัวหนา หรือตัวเอียงก็ได้ ขึ้นกับเบราเซอร์แต่ละตัว และการกำหนดสไตล์ชีท
Fixical Format - แท็กที่กำหนดลักษณะตายตัว ทุกเบราเซอร์จะแปลความหมายแท็กเหล่านี้เหมือนกันหมด เว็บเพจที่ได้จึงเหมือนกัน เช่น หมายถึงข้อความแบบตัวหนา

การกำหนดตัวอักษรให้มีความหนา

..........

ใช้กำหนดข้อความที่อยู่ภายในคำสั่ง ให้แสดงผลด้วยตัวอักษรแบบตัวหนา (bold) มีจุดประสงค์เพื่อเน้นข้อความในประโยคนั้น

<HTML>
<HEAD>
 <TITLE>การกำหนดตัวหนา</TITLE>
</HEAD>
<BODY>
 ตัวอักษรปรกติ COMPUTER
 ตัวอักษรหนา COMPUTER
</BODY>
</HTML>

การกำหนดตัวอักษรให้ขีดเส้นใต้

..........

ใช้แสดงข้อความแบบขีดเส้นใต้ (underline) ทั้งนี้เพื่อเน้นข้อความในประโยคนั้น

<HTML>
<HEAD>
 <TITLE>การกำหนดการขีดเส้นใต้</TITLE>
</HEAD>
<BODY>
 ตัวอักษรปกติ COMPUTER
 ตัวอักษรที่ขีดเส้นใต้ COMPUTER
</BODY>
</HTML>

หมายเหตุ แท็กนี้ไม่นิยมใช้เนื่องจากอาจก่อให้เกิดความสับสนกับข้อความที่เป็นจุดลิงก์ได้

การกำหนดตัวอักษรให้มีการเอน

..........

ใช้กำหนดข้อความที่อยู่ภายในคำสั่งให้แสดงผลด้วยตัวอักษรแบบเอน (Italic) มีจุดประสงค์เพื่อเน้นข้อความในประโยคนั้น

<HTML>
<HEAD>
 <TITLE>การกำหนดอักษรเอน</TITLE>
</HEAD>
<BODY>
 ตัวอักษรปกติ COMPUTER
 ตัวอักษรเอน COMPUTER
</BODY>
</HTML>

การกำหนดตัวอักษรกระพริบ

ใช้กำหนดแสดงข้อความแบบกระพริบ จะมีลักษณะการแสดงผลเป็นแบบติด - ดับ สลับกันไป

<HTML>
<HEAD>
 <TITLE>การกำหนดตัวอักษรกระพริบ</TITLE>
</HEAD>
<BODY text="red">
 <Blink>COMPUTER</Blink>
 แสดงผลได้เฉพาะบน Netscape
</BODY>
</HTML>

หมายเหตุ ในการกำหนดตัวอักษรกระพริบนั้น เราไม่สามารถเปิดในโปรแกรมเว็บเบราเซอร์ที่เป็น Internet Explorer ได้

การกำหนดรูปแบบของตัวอักษร

..........

เป็นการกำหนดฟอนต์ของตัวอักษรในเว็บเพจ ซึ่งเราสามารถกำหนดได้ด้วยคุณสมบัติที่ชื่อว่า FACE และตามด้วยชื่อฟอนต์ที่เราต้องการ เอกสารเว็บอนุญาตให้กำหนดฟอนต์ ได้หลายฟอนต์ โดยเบราเซอร์จะมีการตรวจสอบการใช้ฟอนต์ให้อัตโนมัติ

ฟอนต์สำหรับข้อความภาษาไทย/อังกฤษ ที่เหมาะสมได้แก่ MS Sans Serif, Microsoft Sans Serif, Thonburi
ฟอนต์สำหรับข้อความภาษาอังกฤษที่เหมาะสม คือ Arial, Helvetica, sans-serif

<HTML>
<HEAD>
 <TITLE>FONT FACE </TITLE>
</HEAD>
<BODY>
 ชนิดของฟอนต์ปกติ 
 ฟอนต์ชื่อ MS Sans Serif
</BODY>
</HTML>

ผลลัพธ์

ชนิดของฟอนต์ปกติ

ฟอนต์ชื่อ MS Sans Serif

การกำหนดสีของตัวอักษร

..........

ใช้การกำหนดให้ตัวอักษรหรือข้อความมีสีอื่นต่างจากสีตัวอักษรทั่วไป หรือต้องการเน้นสีสันเพื่อเพิ่มจุดเด่น ทำให้แปลกแตกต่างไป การระบุค่าสี สามารถใช้ได้ทั้งระบุชื่อสี หรือค่าสีในระบบเลขฐาน 16

<HTML>
<HEAD>
 <TITLE>FONT COLOR </TITLE>
</HEAD>
<BODY text="yellow">
 Computer
 Computer
 Computer
</BODY>
</HTML>

การกำหนดขนาดของตัวอักษร

..........

การกำหนดขนาดของตัวอักษรในเว็บเพจนั้น เราสามารถกำหนดขนาดของตัวอักษรได้อยู่ 2 รูปแบบคือ

กำหนดเป็นตัวเลขซึ่งจะมีค่า 1 - 7 โดยค่ามาตรฐานจะมีค่าจะอยู่ที่ 3 ค่าตัวเลขที่เป็น 1 และ 2 นั้นจะเป็นการย่อขนาดของตัวอักษร และค่าตัวเลข 4 ถึง 7 นั้นจะเป็นการขยายขนาดของตัวอักษร

<HTML>
<HEAD>
 <TITLE>FONT SIZE </TITLE>
</HEAD>
<BODY text="Red">
 Computer
 Computer
 Computer
 Computer
 Computer
 Computer
 Computer
</BODY>
</HTML>

กำหนดโดยใช้เครื่องหมายบวกและเครื่องหมายลบ โดยสามารถกำหนดได้ดังีน้ ถ้าเป็นการย่อขนาดของตัวอักษรนั้นจะใช้เครื่องหมายลบ ซึ่งจะใช้ไม่เกิน - 2 ถ้าเป็น การขยายขนาดของตัวอักษรนั้นจะใช้เครื่องหมายบวกซึ่งจะใช้ไม่เกิน + 4

<HTML>
<HEAD>
 <TITLE>FONT SIZE </TITLE>
</HEAD>
<BODY text="Red">
 Computer
 Computer
 Computer
 Computer
 Computer
 Computer
 Computer
</BODY>
</HTML>

คำสั่งลดขนาดตัวอักษรลง 1 ระดับ

..........

คำสั่ง เป็นคำสั่งที่สามารถลดขนาดของตัวอักษรลง 1 ระดับจากขนาดของอักษรปัจจุบันได้ทันที โดยไม่ต้องไประบุด้วยคำสั่ง

<HTML>
<HEAD>
 <TITLE>SMALL </TITLE>
</HEAD>
<BODY>
 Computer
 Computer</Smaii>
 Computer
</BODY>
</HTML>

คำสั่งเพิ่มขนาดของตัวอักษร 1 ระดับ

คำสั่ง <BIG> เป็นคำสั่งที่สามารถเพิ่มขนาดของตัวอักษรขึ้น 1 ระดับจากตัวอักษรปัจจุบันได้ทันที โดยไม่ต้องใช้คำสั่ง

<HTML>
<HEAD>
 <TITLE>BIG </TITLE>
</HEAD>
<BODY>
 Computer
 <Big>Computer</Big>
 Computer
</BODY>
</HTML>

คำสั่งที่กำหนดตัวอักษรยกระดับ

..........

คำสั่ง ย่อมาจาก (superscript) เป็นคำสั่งที่จะกำหนดให้ตัวอักษร หรือข้อความยกระดับสูงขึ้นกว่าระดับปกติและมีขนาดเล็ก

<HTML>
<HEAD>
 <TITLE>SUPERSCRIPT</TITLE>
</HEAD>
<BODY>
 Computer
 A2 = A²
 Computer
</BODY>
</HTML>

คำสั่งที่กำหนดตัวอักษรพ่วงท้าย (ตัวห้อย)

..........

คำสั่ง ย่อมาจาก (subscript) เป็นคำสั่งที่จะกำหนดให้ตัวอักษร หรือข้อความพ่วงท้ายจะมีลักษณะต่ำกว่าระดับปกติและมีขนาดเล็ก

<HTML>
<HEAD>
 <TITLE>SUBSCRIPT</TITLE>
</HEAD>
<BODY>
 Computer
 H20 = H₂O
 Computer
</BODY>
</HTML>

การกำหนดตัวอักษรเคลื่อนที่

คำสั่ง < MARQUEE > นั้นจะกำหนดการเคลื่อนที่ของตัวอักษรและข้อความจะทำให้เว็บเพจของเราเป็นที่น่าสนใจ โดยปกติการเคลื่อนที่ของตัวอักษรนั้นจะเคลื่อนที่จากขวามาซ้าย คำสั่งนี้สามารถแสดงผลได้อย่างถูกต้องเมื่อใช้เบราเซอร์ Internet Explorer เท่านั้น

<HTML>
<HEAD>
<TITLE>MARQUEE</TITLE>
</HEAD>
<BODY>
<Marquee>Computer</Marquee>

<Marquee>Computer</Marquee>

</BODY>
</HTML>