จัดหน้าเนื้อหา HTML ตอนที่ 2

เมื่อวานเขียนเรื่องการจัดหน้าเนื้อหา HTML ตอนแรกไป และมีการตอบรับอย่างล้นหลามมากๆ เรียกได้ว่าคอมเมนต์ถล่มทลาย (ที่ถล่มจริงๆแล้วคือสแปมครับ Akismet จัดการ discard ทิ้งไปเรียบร้อย จากคนนีั่ไม่มีเลย Orz)

แต่เอาเถอะ ไหนๆก็เขียนแล้ว ก็จะสานต่อให้เสร็จในช่วงที่ยังมีไฟอยู่

ในตอนที่สองนี้จะว่าด้วยเรื่องของการตกแต่งข้อความด้วยแท็กต่างๆในเบื้องต้นนะครับ และถ้ามีเวลา ผมจะต่อเรื่องการใช้ CSS มาตกแต่งเพิ่มเติมให้ด้วย (หรือไม่ก็ยกไปในตอนหน้าเลย เพราะพวกนี้น่าจะยาวครับ)

ก่อนอื่น ให้เปิดดูเนื้อหาที่มีการใส่แท็กต่างๆเพื่อจัดเนื้อหาเอาไว้แล้ว ได้ที่ example02.html ครับ

จากตัวอย่าง เป็นการจัดเนื้อหาด้วยแท็ก HTML เพียวๆครับ ยังไม่ได้ตกแต่งด้วย CSS อะไรทั้งสิ้น (ซึ่งถ้าทำแล้ว มันจะสวยกว่านี้) ทีนี้เราลองมาดูกันดีกว่า ว่าแต่ละส่วน เราใช้แท็กอะไรอยู่บ้าง

เขียนหัวเรื่องด้วย <h1> ถึง <h6>

เราเห็นกันแล้วกับหัวข้อตัวใหญ่ๆนั่น ซึ่งในส่วนนี้เราจะใช้แท็ก <h1> ถึงแท็ก <h6> ตามระดับความสำคัญของหัวเรื่องนั้นๆ จากมากที่สุด (<h1>) ไปจนถึงน้อยที่สุด (<h6>) โดยรูปแบบการเขียน HTML จะเป็นดังนี้ครับ

<h1>หัวข้อที่ 1</h1>
<h2>หัวข้อที่ 2</h2>
<h3>หัวข้อที่ 3</h3>
<h4>หัวข้อที่ 4</h4>
<h5>หัวข้อที่ 5</h5>
<h6>หัวข้อที่ 6</h6>

จากโค๊ดข้างต้น ก็จะได้ออกมาเป็นอย่างตัวอย่างนี้ครับ example03.html

ในการใช้งาน เราก็ควรจะเลือกให้เหมาะสมว่า ณ จุดนี้ เราึควรใช้ h เท่าไหร่ อย่างเช่นในหน้าบล็อกนี้ ชื่อโพสต์ข้างบน (จัดหน้าเนื้อหา HTML ตอนที่ 2) ก็เขียนด้วย <h1> และหัวข้อย่อยต่างๆในโพสต์ ก็เขียนด้วย <h2> ซึ่งหากในแต่ละหัวข้อย่อยในโพสต์ มีหัวข้อย่อยลงไปอีก ก็ควรจะใช้ <h3> เป็นต้น

สร้างลิสต์รายการด้วย <ol> และ <ul>

จากตัวอย่าง example02.html จะพบว่ามีการใช้ลิสต์อยู่ 2 แบบ คือแบบที่เป็นจุดธรรมดา กับแบบเีรียงตัวเลข หรือที่เห้นชัดๆคือแบบนี้

แบบธรรมดา

• รายการที่ 1
• รายการที่ 2
• รายการที่ 3

แบบตัวเลขลำดับ

1. รายการที่ 1
2. รายการที่ 2
3. รายการที่ 3

รูปแบบการลิสต์ทั้งสองแบบ เกิดจากการใช้แท็กที่ต่างกัน นั่นคือ <ol> (Ordered List: ลิสต์แบบมีเลขลำดับ) และ <ul> (Unordered List: ลิสต์แบบธรรมดา) ซึ่งเราจะใช้แท็ก <ol> หรือ <ul> ในการครอบชุดแท็ก <li> อีกทีหนึ่ง (ซึ่ง <li> คือรายการแต่ละรายการนั่นเอง)

อย่างเช่นตัวอย่างด้านบน หากเราต้องการลิสต์ 3 รายการ คือ รายการที่ 1, รายการที่ 2, และ รายการที่ 3 เราสามารถเขียนโค๊ดได้ดังนี้

แบบธรรมดา

<ul>
	<li>รายการที่ 1</li>
	<li>รายการที่ 2</li>
	<li>รายการที่ 3</li>
</ul>

แบบมีเลขลำดับ

<ol>
	<li>รายการที่ 1</li>
	<li>รายการที่ 2</li>
	<li>รายการที่ 3</li>
</ol>

ซึ่งผลก็จะออกมาเหมือนอย่างตัวอย่างที่แสดงให้ดูในทีแรกนั่นเองครับ

เสริม: อันที่จริงแล้วการลิสต์ยังมีอีกแบบนึงนอกจาก <ol> และ <ul> นั่นคือ <menu> ซึ่งก็ตามชื่อของมัน ว่ามันเหมาะสำหรับเอาไว้ครอบส่วนที่เป็นเมนูของเว็บมากกว่าครับ

ตัวหน้า ตัวเอียง ขีดฆ่า และ ขีดเส้นใต้

มาถึงอีกหนึ่งอย่างที่เราใช้บ่อยมากเวลาที่เราจัดหน้าเอกสารใน Microsoft Word นั่นคือการทำตัวหนา ตัวเอียง ขีดฆ่า และตัีวขีดเส้นใต้

ในภาษา HTML มีแท็กที่ใช้ทำอะไรพวกนี้ซ้ำๆ กันค่อนข้างหลายแท็ก ซึ่งก็จะแบ่งตามจุดประสงค์ของการใช้งานไป (แต่ผลที่ได้กดลับออกมาเหมือนกัน เ้ช่น <i>, <em>, และ <cite> ที่ผลออกมาคือตัวเอียงเหมือนกันทั้งสามตัว)

เน้นตัวหนาด้วย <strong>

การเน้นข้อความให้เป็นตัวหนา (ในกรณีที่ต้องการเน้นในเชิงความหมายคือความสำคัญด้วย) ให้ใช้แท็ก <strong> ครอบข้อความเอาไว้ ดังนี้

<strong>ข้อความ</strong>

ซึ่งผมที่ออกมาก็จะได้เป็นดัีงนี้ครับ

ข้อความ

ส่วนในกรณีที่ต้องการทำตัวหนาเพื่ิอการตกแต่งข้อความอย่างเดียว (ไม่ได้เน้นความหมายหรือความสำคัญใดๆ) เราสามารถใช้แท็ก <b> ได้ แต่ว่าตามมาตรฐาน แท็ก <b> กำลัจะถูกยกเลิก และแนะนำให้ไปใช้ CSS จัดการแทนครับ

ทำตัวเอียงด้วย <em> และ <cite>

การทำตัวเอียงนั้นอันที่จริงอยู่อยู่หลายแท็ก ซึ่งหลักๆนั้นมีอยู่ 2 แบบ คือ <em> และ <cite>

ทั้งสองแท็กต่างกันอย่างไร? ในการใช้แท็ก <em> ครอบข้อความ คือใช้ในกรณีที่ต้องการเน้นความหมายหรือความสำคัญของข้อความนั้นๆ (เช่นเดียวกับการใช้ <strong>) ส่วนการใช้ <cite> ครอบข้อความ จะใช้ในกรณีที่เป็นการอ้างอิง (เช่นแหล่งอ้างอิงท้ายเอกสาร อะไรทำนองนั้นครับ)

ทั้งสองแท็กมีรูปแบบการใช้งานที่เหมือนกัน คือ

<em>ข้อความ</em>
<cite>ข้อความ</cite>

ผลที่ได้ก็คือการทำตัวเอียงทั้งคู่ แบบนี้ครับ

ข้อความ em
ข้อความ cite

เช่นเดียวกันกับกรณีของ <strong> นั่นคือถ้าเราต้องการทำตัวเอียงเพียงเพื่อตกแต่งข้อความ ไม่ได้เน้นความหมายหรือความสำคัญใดๆ เราสามารถใช้แท็ก <i> ครอบข้อความแทนได้ แต่ตามมาตรฐาน ก็ได้กำหนดให้ไปใช้ CSS แทนเช่นกันครับ

การขีดฆ่าและแก้ไขข้อความ

ในหลายๆ เว็บ เวลาที่เขามาแก้เนื้อหา คุณอาจจะเคยเห็นการขีดฆ่าข้อความเก่า แล้วเติมข้อความใหม่เข้าไป อย่างนี้

ข้อความเก่า ข้อความใหม่

การทำแบบนี้สามารถทำได้ง่ายๆด้วยการใช้แท็ก <del> ในการขีดฆ่า และใช้แท็ก <ins> ในการ “บอก” ว่านี่คือเนื้อหาใหม่ที่ใส่แทนส่วนที่ถูกขีดฆ่า (ถ้าต้องการแค่ขีดฆ่าทิ้ง ไม่ต้องการเพิ่มเติมเนื้อหาใหม่ ก็ไม่ต้องใช้ <ins> ไงล่ะครับ)

รูปแบบการใช้งานก็เหมือนแท็กอื่นๆครับ คือใส่แท็ก <del> และ <ins> ครอบไปได้เลย ดังนี้

<del>ข้อความเก่า</del>
<ins>ข้อความใหม่</ins>

ซึ่งผลก็จะออกมาเหมือนกับด้านบนนั่นเอง

เช่นเดียวกันกับแท็กอื่นๆที่กล่าวมา ในกรณีที่ต้องการตกแต่งข้อความเพียงอย่างเดียว ไม่ใช่เพื่อขีดฆ่าข้อความเก่า เราสามารถใช้แท็ก <strike> ครอบแทนได้ แต่ว่าตามมารฐาน แท็กนี้ถูกยกเลิกไปเรียบร้อยแล้ว และแนะนำให้ไปใช้ CSS แทนครับ

การอ้างอิงข้อความหรือคำพูด

บอกเอาไว้ก่อนว่าการอ้างอิงนี้ คนละอันกับแหล่งอ้างอิงของเนื้อหานะครับ การอ้างอิงที่ว่านี้ เป็นประมาณว่าเป็น quotation อะไรแบบนั้นมากกว่า

การอ้างอิงนี้มีรูปแบบอยู่ 2 แบบด้วยกัน คือแบบเป็นบล็อคอ้างอิงเต็มๆ โดยการใช้แท็ก <blockquote> (จาก example02.html มันก็คือย่อหน้าที่สอง ในหัวข้อที่สองนั่นแหละครับ) กับอีกแบบคือการอ้่างอิงแบบสั้น โดยการใช้แท็ก <q> ซึ่งการอ้างอิงแบบสั้นนี้ มันจะเป็นการครอบเครื่องหมายฟันหนูลงไปที่ข้อความนั้นๆครับ

มีเรื่องน่าสนใจอีกนิดนึงคือแท็ก <blockquote> และ <q> นั้น เราสามารถเติมแอททริบิวต์ cite ลงไปได้ (นั่นหมายถึง เราจะใส่หรือไม่ใส่ cite ก็ได้) เพื่อเป็นการบอกว่าข้อความนี้อ้างมาจากที่ไหน แม้ว่าปกติจะไม่ีมีการแสดงข้อความในแอททริบิวต์ cite แต่เราก็สามารถใช้ CSS หรือ JavaScript ดึงให้มันแสดงออกมาได้ครับ

รูปแบบของแท็กทั้งสอง เป็นดังนี้ครับ

<q>ข้อความที่อ้่างอิง</q>
<blockquote>ข้อความที่อ้างอิง</blockquote>

หรือหากมีการใส่ cite ด้วย โค๊ดของเราก็จะมีหน้าตาเป็นดังนี้ครับ

<q cite=”อ้างอิง”>ข้อความที่อ้างอิง</q>
<blockquote cite=”อ้างอิง”>ข้อความที่อ้างอิง</blockquote>

ลองไปดูตัวอย่างกันได้ที่นี่ครับ example04.html

การเขียนตัวห้อยและตัวยก

ในบางครั้ง เราก็ต้องการที่จะเขียนตัวห้อย (เช่นเลขฐาน) หรือตัวยก (เลขชี้กำลัง) ลงไปในเนื้อหาเช่นกัน (โดยเฉพาะเนื้อหาเกี่ยวกับวิทยาศาสตร์และคณิตศาสตร์ ที่จะได้ใช้พวกนี้บ่อย)

ในกรณีนี้ ภาษา HTML ก็เตรียมแท็กเอาไว้ให้เราเรียบร้อยแล้วเช่นกัน นั่นคือแท็ก <sub> (ตัวห้อย) และแท็ก <sup> (ตัวยก) จำให้ดีนะครับ ตัว b กัีบตัว p

รูปแบบการใช้งานก็เหมือนกับแท็กอื่นทั่วไปอีกแล้ว นั่นคือเราใช้แท็กนี้ครอบข้อควาไมด้เลย ดังนี้ครับ

ข้อความ^{ตัวยก}
ข้อความ_{ตัวห้อย}

ผลที่ออกมาก็จะเป็นดังนี้

ข้อความ^{ตัวยก}
ข้อความ_{ตัวห้อย}

ซึ่งหากคิดว่าขนาดเล็กไปหรือใหญ่ไป เราก็สามารถใช้ CSS จัดการแก้ไขได้เหมือนกับแท็กอื่นๆครับ

ขยายตัวย่อด้วย <abbr> และ <acronym>

มาอีกแล้ว กับการกระทำของสองแท็กที่เหมือนกันเป๊ะ

ทั้งสองแท็กนี้มีหน้าที่เดียวกันเป๊ะครับ คือการบอกความหมายของตัวย่อ อย่างเช่นการบอกว่า BKK นั้นย่อมาจาก Bangkok นะ แล้วทั้งสองแท็กต่างกันอย่างไร?

แม้ว่าในสายตาปกติของเราๆ สองแท็กนี้จะไม่ต่างอะไรกันเลย แต่ในแง่ของ Accessibilities แล้ว สองแท็กนี้มีความต่างกันอยู่ครับ คือแท็ก <abbr> จะใช้ครอบ “ตัวย่อ” (มันคือตัวย่อที่ไม่มีการอ่านออกเสียง เช่น BKK คงไม่มีใครอ่านว่า “เบ็คกึ” นะครับ) ส่วนแท็ก <acronym> จะใช้ครอบ “คำย่อ” (มันคือตัวย่อที่ออกเสียงได้ เช่น ASAP ที่เราอาจจะออกเสียงว่า “เอแซป)

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

<abbr title=”Bangkok”>BKK</abbr>
<acronym title=”As Soon As Possible”>ASAP</acronym>

ซึ่งผลที่ออกมา ก็จะเป็นดังนี้ครับ

BKK
ASAP

ปล.ในเว็บเบราเซอร์จะแสดงผลสองแท็กนี้ต่างกันด้วย เช่นใน Opera จะขีดเส้นใต้ <abbr> เป็นเส้นประแบบห่าง และขีดเส้นใต้ <acronym> เป็นเส้นประแบบถี่

คงรูปเนื้อหาเอาไว้ด้วย <pre>

ผมคิดว่าใครหลายคนคงจะปรนะสบปัีญหาเวลาที่ลองเขียนเนื้อหา HTML แล้วพบว่าการเว้นวรรคยาวๆ การขึ้นบรรทัด (แบบกด enter อย่างเดียว) หรือการกด tab มันละลายหายไปจนหมดเมื่อมาเปิดดูบนหน้าเว็บ (โดยเฉพาะคนที่แปะซอร์สโค๊ดอะไรสักอย่างลงหน้าเว็บ คงจะเคยเจอกัน)

แน่นอนว่า HTML ก็มีทางออกสำหรับเรื่องนี้เตรียมเอาไว้ให้อยู่แล้ว ด้วยแท็ก <pre>

จากตัวอย่าง example02.html ก็จะมีส่วนหนึ่งที่ผมใส่ <pre> เอาไว้ นั่นคือส่วนที่เป็นซอร์สโค๊ด php หรือส่วนนี้

<?php
$var = “value”;
if ($_REQUEST[‘var’] == $var){
echo”hello world”;
}else{
for($i=1;$>15;$i++){
if(($i%2) == 1){
echo “foo”;
}else{
echo “bar”;
}
}
}
?>

จากข้างบน คงจะเห็นว่ารูปแบบการจัดแท็บนั้นหายไปหมดเลย ปัญหานี้เราจะแก้ได้ด้วยการใส่แท็ก <pre> ครอบลงไป ดังนี้ครับ

<pre><?php
$var = “value”;
if ($_REQUEST[‘var’] == $var){
echo”hello world”;
}else{
for($i=1;$>15;$i++){
if(($i%2) == 1){
echo “foo”;
}else{
echo “bar”;
}
}
}
?></pre>

ผลที่ออกมาก็จะได้ดังนี้

<?php
$var = "value";
if ($_REQUEST['var'] == $var){
	echo"hello world";
}else{
	for($i=1;$>15;$i++){
		if(($i%2) == 1){
			echo "foo";
		}else{
			echo "bar";
		}
	}
}
?>

จะพบว่าการจัดวรรคตอนต่างๆกลับมาเหมือนอย่างปกติแล้ว ง่ายดีไหมครับ?

ส่งท้ายตอนที่ 2

เอาล่ะครับ ผมคงจบเนื้อหาในตอนนี้เอาไว้เพียงเท่านี้ (ซึ่งผมว่ามันก็ค่อนข้างครอบคลุมแท็กต่างๆที่เราใช้บ่อยในการจัดเนื้อหาแล้วครับ) อันที่จริงแล้วยังตกไปอีกเรื่องนึง คือการแสดงตารางหรือ <table> ในเนื้อหา ในเรื่องนี้ผมกะว่าเดี๋ยวจะแยกออกไปเ้ป็นตอนใหม่อีกตอนหนึ่งครับ (เพราะผมรู้สึกว่ามันยาว – อันที่จริงไม่ได้มานานครับ ลืมไปเยอะ :P)

ในตอนหน้า จะถึงเวลาแต่งหน้าทาปากให้กับเนื้อหาของเราด้วย CSS กันสักทีนะครับ อย่าลืมติดตามกันนะครับ

สวัสดีครับ :)

• Category: HTML & CSS
• Tag: css, html, styling