Web Builder Basic HTML: รูปแบบตัวอักษรและการจัดวางตำแหน่งของข้อความ

การกำหนดรูปแบบตัวอักษรและการจัดวางตำแหน่งของข้อความ

การกำหนดหัวเรื่อง (Heading) <Hx>..</Hx>

ในการสร้างเวปเพจ เรามักกำหนดหัวเรื่อง (Heading) ไว้ด้านบนสุด เนื่องจากจะเป็นที่สังเกตุ มองเห็นได้ง่ายที่สุด โดยภาษา HTML แยกขนาดของหัวเรื่อง (Heading) ได้ 6 ระดับ ซึ่ง H1 จะใหญ่ที่สุด จนถึง H6 จะมีขนาดเล็กที่สุด
คำสั่งที่ใช้ในการกำหนดหัวเรื่อง (Heading) เขียนได้ดังนี้
<Hx>.....<Hx>
โดย x เท่ากับ ตัวเลข 1-6 ซึ่งเป็นขนาดของตัวอักษร

ตัวอย่าง

Source View


<html>
<head>
<title></title>
<body text="#FFFFFF" bgcolor="#000000">
<H1>Heading 1 </H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</body>
</html>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

การกำหนดขนาดตัวอักษร ..
ในกำกำหนดขนาดหัวข้อด้วยคำสั่ง <Hx> เราจะพบว่าส่วนของข้อความที่เขียนต่อกันนั้นจะอยู่คนละบรรทัดกัน ไม่สามารถที่จะทำให้ตัวอักษรมีขนาดที่ต่างๆกันให้อยู่ในบรรทัดเดียวกันได้ ด้วยเหตุนี้เรามาลองใช้คำสั่ง กันดูนะครับ โดย value คือจำนวนตัวเลข 1-7 (ขนาดของตัวอักษรมี 7 ขนาด) โดยตัวเลขที่มาก หมายถึงขนาดที่มากกว่า ซึ่งตรงกันข้ามกับ <Hx>

ตัวอย่าง

Source View


<html>
<head>
<title></title>
<body text="#FF0000" bgcolor="#AAFFFF">
font size 1 
font size 2 
font size 3 
font size 4 
font size 5 
font size 6 
font size 7 
</body>
</html>
font size 1
font size 2
font size 3
font size 4
font size 5
font size 6
font size 7

จริงๆแล้วการกำหนดขนาดจะถุกอ้างอิงโดยคำสั่ง <BASEFONT SIZE=x> อีกที โดยที่ x เป็นขนาดของตัวอักษร ซึ่งมีค่าตั้งแต่ -7 จนถึง +7
แต่โดยทั่วไปแล้ว ถึงแม้ว่าเราไม่ได้กำหนด ขนาดตัวอักษรลงไปด้วย แต่เวปเบราเซอร์จะกำหนดให้ <BASEFONT SIZE=3> เสมอ ซึ่งถือเป็นค่าปกติ

ตัวอย่าง

Source View


<html>
<head>
<title></title>
<body text="#FF0000" bgcolor="#AAFFFF">
<Basefont size=4>
font size =5 
font size =6 
font size =7 
font size =3 
font size =2 
font size =1 
font size= 5 
</body>
</html>
font size =5
font size =6
font size =7
font size =3
font size =2
font size =1
font size =5

รูปแบบตัวอักษร

มีอยู่สองแบบคือ แบบ Physical Styles และ Logical Style

Physical Styles

ลักษณะ/รูปแบบตัวอักษร รูปแบบคำสั่ง ความหมาย

Bold ... ตัวอักษรแบบหนา

Italic ... ตัวอักษรแบบเอียง

Underline ... ตัวอักษรแบบขีดเส้นใต้

TYPEWRITER TEXT <TT>...</TT> ตัวอักษรแบบตัวพิมพ์

Logical Styles

ลักษณะ/รูปแบบตัวอักษร รูปแบบคำสั่ง ความหมาย

Address <address> ... </address> แสดงข้อมูลที่เกี่ยวกับที่อยู่

Citaions <CITE> ... </CITE> ใช้แสดงข้อมูลอ้างอิงต่างๆ

Computer Code <CODE> ... </CODE> ใช้กับโค้ดของคอมพิวเตอร์ มักมีความกว้างคงที่

Emphasis ... ตัวอักษรแบบเอียง

Keyboard <KDB> ... </KDB> ใช้เมื่อผู้ใช้พิมพ์ตัวอักษรจากคีย์บอร์ด ตัวอักษรจะหนาขึ้น

Samples <SAMP> ... </SAMP> ใช้แสดงสถานะของคอมพิวเตอร์ ใช้ตัวอักษรในรูปแบบเดิม แต่เพิ่มความหนาของตัวอักษร

Strong ... ใช้เน้นข้อความที่ต้องการเน้นมากๆ

Variable Name <VAR> ... </VAR> ใช้กับข้อมูลที่จะถูกเปลี่ยนแปลง

Blockquote
<BLOCKQUOTE> ... </BLOCKQUOTE> แสดงผลโดยทำการเพิ่มย่อหน้า

DFN <DFN> ... </DFN> ใช้แสดงค่าที่กำหนดในรูปของตัวอักษรแบบเอียง

การใช้ตัวอักษรแบบพิเศษ

Physical Styles
ลักษณะ/รูปแบบตัวอักษร	รูปแบบคำสั่ง	ความหมาย
Bold	<B>...</B>	ตัวอักษรแบบหนา
Italic	<I>...</I>	ตัวอักษรแบบเอียง
Underline	<U>...</U>	ตัวอักษรแบบขีดเส้นใต้
`TYPEWRITER TEXT`	<TT>...</TT>	ตัวอักษรแบบตัวพิมพ์
Logical Styles
ลักษณะ/รูปแบบตัวอักษร	รูปแบบคำสั่ง	ความหมาย
Address	<address> ... </address>	แสดงข้อมูลที่เกี่ยวกับที่อยู่
Citaions	<CITE> ... </CITE>	ใช้แสดงข้อมูลอ้างอิงต่างๆ
`Computer Code`	<CODE> ... </CODE>	ใช้กับโค้ดของคอมพิวเตอร์ มักมีความกว้างคงที่
Emphasis	<EM> ... </EM>	ตัวอักษรแบบเอียง
Keyboard	<KDB> ... </KDB>	ใช้เมื่อผู้ใช้พิมพ์ตัวอักษรจากคีย์บอร์ด ตัวอักษรจะหนาขึ้น
`Samples`	<SAMP> ... </SAMP>	ใช้แสดงสถานะของคอมพิวเตอร์ ใช้ตัวอักษรในรูปแบบเดิม แต่เพิ่มความหนาของตัวอักษร
Strong	<STRONG> ... </STRONG>	ใช้เน้นข้อความที่ต้องการเน้นมากๆ
`Variable Name`	<VAR> ... </VAR>	ใช้กับข้อมูลที่จะถูกเปลี่ยนแปลง
Blockquote	<BLOCKQUOTE> ... </BLOCKQUOTE>	แสดงผลโดยทำการเพิ่มย่อหน้า
DFN	<DFN> ... </DFN>	ใช้แสดงค่าที่กำหนดในรูปของตัวอักษรแบบเอียง

เนื่องจากการเขียน HTML เราไม่สามารถให้เวบบราวเซอร์ แสดงตัวอักษรที่ไป ตรงกับคำสั่งได้เช่นตัวอักษร <, >, & , " เป็นต้น ตัวอักษรเหล่านี้ไม่สามารถพิมพ์ลงไปตรงๆได้ เนื่องจากเวบบราวเซอร์จะตีความหมายว่า ตัวอักษรเหล่านี้เป็นส่วนหนึ่งของคำสั่ง
ดังนั้นการที่จะให้ตัวอักษรเหล่านี้ไปปรากฏบนเว็บบราว์เซอร์ได้ ต้องเขียนเป็น เครื่องหมายพิเศษ ซึ่งสามารถเขียนได้ทั้งใช้ตัวเลขรหัสแอสกี้ และแบบใช้รหัสตัวอักษร เช่น เครื่องหมาย < หากใช้รหัสแบบตัวเลขให้ใช้ < หรือถ้าอยากใช้แบบตัวอักษรให้ใช้ < เป็นต้น

ตัวอย่าง

Source View


<html>

<head><title> Web Builder </title></head>
<body bgcolor=pink text="black">
(©) This is Copyright sign .
(à) Small a, grave accent. 
(&#agrave;) Small a, grave accent. 
</body>
</html> (©) This is Copyright sign.
(à) Small a, grave accent.
(à) Small a,grave accent.

ดูรหัสเพิ่มเติม

การจัดวางตำแหน่งข้อความ

ในการจัดวางตำแหน่งตัวอักษรให้ชิดซ้าย ชิดขวา หรือให้อยู่ตรงกลางนั้น เราใช้แอตตริบิวท์ Aling=Left | Center | Right ลงไปภายในtag

ตัวอย่าง

Source View



<html>
<head><title>Position</title></head>
<body>
 Hello left.
Hello right.
Hello center.
</body>
</html>
Hello left.

Hello right.

Hello center.

การจัดข้อความให้อยู่ตรงกลาง

ในการใช้แอตทริบิวต์ Align=center นั้น จะจัดข้อความ ได้เฉพาะชุดอักษรที่ระบุคำสั่งนี้ไปเท่านั้น แต่ถ้าเราต้องการจัดให้ข้อความนี้อยู่ตรงกลาง โดยไม่ต้องเขียนคำสั่งนี้หลายหน ควรใช้คำสั่ง <Center> ... </Center>

ตัวอย่าง

Source View


<html>
<head><title>Position center</title></head>
<body bgcolor="#F0FFFF" text="#FF00FF">
<center><h3>Web Builder Design</h3></center>
<center> พอแล้วเพียงพอแล้ว ตัดใจซะดีกว่า 
อย่ามัวเปลืองเวลา กับคนไม่มีใจ 
กับคนไม่รักจริง กับคนที่ใจร้าย 
ไม่มีทางใด ต้องห้ามใจอย่างเดียว 
ลืมเขาจงลิมเขา สั่งใจให้ทำตาม ...... </center>

<center>Copyright by Peerasan</center>
</body>
</html>

Web Builder Design
พอแล้วเพียงพอแล้ว ตัดใจซะดีกว่า
อย่ามัวเปลืองเวลา กับคนไม่มีใจ
กับคนไม่รักจริง กับคนที่ใจร้าย
ไม่มีทางใด ต้องห้ามใจอย่างเดียว
ลืมเขาจงลิมเขา สั่งใจให้ทำตาม ...... Copyright by Peerasan

Source	View
<!-- ไม่ลงมือทำ แล้วจะมีประสบการณ์ได้อย่างไร --> <html> <head> <title></title> <body text="#FFFFFF" bgcolor="#000000"> <H1>Heading 1 </H1> <H2>Heading 2</H2> <H3>Heading 3</H3> <H4>Heading 4</H4> <H5>Heading 5</H5> <H6>Heading 6</H6> </body> </html>	Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

Source	View
<!--ท้อแท้ได้ แต่อย่าท้อถอย --> <html> <head><title> Web Builder </title></head> <body bgcolor=pink text="black"> (©) This is Copyright sign <br>. (à) Small a, grave accent.<br> (&#agrave;) Small a, grave accent.<br> </body> </html>	(©) This is Copyright sign. (à) Small a, grave accent. (à) Small a,grave accent.

Source	View
<!--เป็นผู้ให้สบายใจกว่าเป็นผู้รับ --> <!--การจัดตำแหน่งข้อความ --> <html> <head><title>Position</title></head> <body> <p align=left> Hello left.</p> <p align=right>Hello right.</p> <p align=center>Hello center.</p> </body> </html>	Hello left. Hello right. Hello center.