บทที่ 5 HTML Heading
Heading (คือการเน้นคำต่าง ๆ เช่นการเน้นหัวเรื่องเพื่อให้เป็นจุดสนใจของผู้ชมเว็บเพจ) ก็เป็นอีกส่วนที่มีความสำคัญกับเอกสาร HTML โดยเราสามารถใช้ Tag แเพื่อทำ heading ได้
1. HTML Heading หรือ ส่วนหัวเรื่อง ตัวอย่างเช่น
<!DOCTYPE html> <html> <body> <h2>This is heading 1</h2> <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> </body> </html>ผลลัพธ์ที่ได้คือ
ความสำคัญของ Heading
เราควรจะใช้ HTML heading เพื่อกำหนดหัวเรื่องเพียงอย่างเดียว อย่าใช้ในการสร้างข้อความหรือเนื้อหาให้เป็นตัวใหญ่หรือตัวหนา เพราะว่า Search engines จะใช้ heading ของเราในการทำดัชนีเนื้อหา ของเว็บเพจของเรา
2. HTML Lines แท็ก <hr /> จะใช้ในการสร้างเส้นแนวนอน horizontal line ตัวอย่างเช่น
<!DOCTYPE html> <html> <body> <p>The hr tag defines a horizontal rule:</p> <hr><p>This is a paragraph</p> <hr><p>This is a paragraph</p> <hr><p>This is a paragraph</p> </body> </html>ผลลัพธ์ที่ได้คือ
3.HTML Comments หรือ ส่วน คอมเมนต์ ตัวอย่างเช่น<!DOCTYPE html> <html> <body> <!--This comment will not be displayed--> <p>This is a regular paragraph</p> </body> </html>
ผลลัพธ์ที่ได้คือ
<FRAMESET COLS or ROWS = "80%,*" > </FRAMESET> <FRAME SRC = "main.html" >
<FRAME SRC = "URL" ���� ����ٻ�Ҿ >
<FRAME SRC = "URL" ���� ����ٻ�Ҿ >
<FRAMESET COLS = "80%,*" >
<FRAME
SRC = "menu.gif" >
</FRAMESET>
��Ժ��
��˹�Ҩ��� 2 ��ǹ ��ǵ�� ��ǹ�ҧ�����վ�鹷�� 80% �ͧ˹�Ҩͷ����� ��ǹ�ҧ��Ҥ�;�鹷��������� (20%) �ͷҧ��Ҩ����ٻ�Ҿ���� menu.gif
�觨��Ҿ��ǹ <FRAMESET ROWS = "80%,*" >
<FRAME SRC = "main.html" >
<FRAME SRC = "menu.gif"
>
</FRAMESET>
��Ժ��
��˹�Ҩ��� 2 ��ǹ ��ǹ ��ҹ����鹷�� 20% ��ǹ��ҹ��ҧ�վ�鹷�� 80% �觨��Ҿ��ǵ������ǹ <FRAMESET ROWS = "15%,*" >
<FRAME SRC = "top.html" >
<FRAMESET COLS = "20%,80%" >
<FRAME
SRC = "left.html" >
<FRAME SRC = "right.html" >
</FRAMESET>
</FRAMESET>
��Ժ��
��˹�Ҩͷ������� 3 ��ǹ ��ҹ����鹷�� 15% ��ǹ��ҹ��ҧ�վ�鹷�� 85% 㹾�鹷���ҹ��ҧ���͡�� 2 ��ǹ��ҹ���� 20% ��ҹ��� 80% (�����Ѻ�ǻྨ����ҹ���������)
����觾�鹷����Ҿ ����ö�������ǵ�� ����ǹ ����ö�������������� ��鹡Ѻ�����¹ �����ҧ�á��� ����ա�á�˹��Ѵ��ǹ���ç�Ѻ������ �����ٻ�Ҿ������ŧ��ǻ����...
<FRAMESET> �繤����������鹡����˹�Ҩ� ��лԴ���´��� </FRAMESET>
����觹�� ����᷹������� <BODY>
<FRAME SRC > �繤�������¢ͧ FRAMESET ���͡�˹�����ʴ��Ţ�������� ���ʴ��� HTML �ա��� ���ͨ�����ʴ����ٻ�Ҿ����
�ҡ������ҧ��ҹ���� ��ҡ�˹���Ҵ�ͧ���Ҿ�������繵� 80%,* (����ͧ���� * ���¶֧ ��Ҵ�ͨ��Ҿ��������) �͡�ҡ�������ѧ����ö��˹��� pixel ����� �� 500,100 �繵�
�������������������˹����˹觢�ͤ�������ǹ
align = "left"
align = "center"
align = "right"
��˹����˹觢�ͤ�������ǵ��
valign = "top"
valign = "middle"
valign = "bottom"
�ٻẺ�����
<TR ALIGN= "CENTER" >
���� <TR VALIGN= "TOP" >
��ѧ�ҡ�ա���觾�鹷����Ҿ���� �Ҩ���繷����ҵ�ͧ ��駪��;�鹷�� ���ͧ�ҡ������ҧ�ش�ԧ����������ʴ� 㹾�鹷�����ͧ��� �ѧ������ҧ���
<FRAME SRC = "right.html" name = "show" >
���ҧ�ԧ������ʴ�㹾�鹷�����ժ������ show
<a href = "page2.html" target = "show">
การเขียนโฮมเพจด้วยภาษา HTML นั้น เอกสาร HTML จะประกอบด้วยส่วนประกอบ2 ส่วน ดังนี้
</html>
คำสั่ง หรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า "<" ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า ">" เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม "/" (Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย
ในการเขียนคำสั่งภาษา HTML สามารถเขียน ด้วยตัวอักษร เล็กหรือใหญ่ ทั้งหมดหรือเขียนคละกันได้ เช่น <HTML> หรือ <Html> หรือ <html> ซึ่งจะให้ผลเหมือนกัน
คำสั่งเริ่มต้นของเอกสาร HTML
<HTML>..........</HTML>
คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง </HTML> เป็นการสิ้นสุดโปรแกรม HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML ส่วนหัวเรื่องเอกสารเว็บ (Head Section)
<HEAD>..........</HEAD>
Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้น ๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ(Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ
<TITLE>..........</TITLE >
ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะ
พิเศษ เช่น ตัวหนา เอียง หรือสี และควรใช้ภาษาที่มีความหมายครอบคลุม
ถึงเนื้อหาของเว็บเพจ นั้น หรือเป็นคำสำคัญในการค้นหา (Keyword)
<BODY>..........</BODY>
Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่ส่วนใหญ่จะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY>
ในบทเรียนนี้ได้ทำการจัดเนื้อหาสำหรับการสร้างโฮมเพจด้วยภาษา HTML สำหรับกลุ่มคำสั่งได้ดังนี้
1. กลุ่มคำสั่งจัดรูปแบบตัวอักษร
2. กลุ่มคำสั่งการจัดรูปแบบเอกสาร
3. กลุ่มคำสั่งจัดการรูปภาพ
4.กลุ่มคำสั่งการจัดรูปแบบฉากหลัง
5.
กลุ่มคำสั่งจัดการตาราง
6. กลุ่มคำสั่งเกี่ยวกับการเชื่อมโยง
สรุป