![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1_gXZLRy9Nt-NZ7qOnCVzMSQjfkkA-iseuCIQ3e4xoHrP7IIIK6NT5zs0AjVk0yQwWkZRjtBeZycEXOIZ-_Ev1FX9DJdBq-6vYd_qkh7f97FcBkkg0qo3jWSe5V119KOHhZ4foLi2F9yi/s1600/original_html.jpg)
HTMLการใช้งาน
ในบทที่แล้วเราได้ลองเขียน HTML กันดูบ้างแล้ว ในบทนี้เราจะลงรายละเอียดคำสั่งของ HTML โดยการใช้งานหลักจะมีดังนี้
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvOthWeXyiIgfIz4OtzqTmUVXzS2mUUfGJLATKiFhik1FI2ciQe0avXidEOiEIJPaVk4C-4OyqqyLnM95HtxdThTahSDhmG3kITond5nUfxItIT8PZq-67ELc44pBCyJ_7utA6iKifnaR/s1600/11111.gif)
1. คำสั่ง หรือ Tag
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> เป็นต้น
Tag เปิด/ปิด รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่
<tag> เราเรียกว่า tag เปิด
</tag> เราเรียกว่า tag ปิด
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfMV06T0TaUFmaRaoC2sLm71R_jBeosDBc82Z7_STtNVtxKKfFB95dAjPqRI7K4cWFMqvlVPLOhSolgStkS9RbUdB24gQtJzdf9Ew71iq6G_2OwIM8w5i3Vj6_zoW-05uPcXCr6fPehQEf/s1600/11111.gif)
2. Attributes
Attributes เป็นตัวบอกรายละเอียดของ tag นั้นเช่น <span align = 'left'> ... </span> เป็นการบอกว่าให้อักษรที่อยู่ใน tag นี้ชิดซ้าย
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfMV06T0TaUFmaRaoC2sLm71R_jBeosDBc82Z7_STtNVtxKKfFB95dAjPqRI7K4cWFMqvlVPLOhSolgStkS9RbUdB24gQtJzdf9Ew71iq6G_2OwIM8w5i3Vj6_zoW-05uPcXCr6fPehQEf/s1600/11111.gif)
3. not case sensitive
หมายถึง คุณจะพิมพ์ <BR> หรือ <br> ก็ได้ ผลลัพธ์ออกมาไม่ต่างกัน
โครงสร้างของหลักของ HTML
โครงสร้างหลักของ HTML ก็จะเริ่มด้วย <html> และจบด้วย </html> เสมอ ซึ่งชุดคำสั่งที่ใช้จะแยกเป็น 2 ส่วนคือ
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1UPe29sViHpTmPds6hXfwLjAZNbjciN1Diyg3UVvRwy5SECLxISKybYd3oxgwaWzmSReL3v9SDn3pWKRfkTklWf3ZVISXBjK7SjMAuDWWAhhkZgXl13TPVm_-lCCPER2CAQFX-9jRtnI8/s1600/2222.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOOq7eGSCWBFiEvsgnY97FnaxMpBhDb5q40PwHS3Af2PWKQx0z-Uq0EUyhk6tkFblzIZGEwlEaUj__3r4sy35_lyxeWtyP_T9PLip9UuHQrbH71VKwqqd6Z6OpN4IRfHlq4B_UKn6jIDp4/s1600/2222.gif)
<html> <head> คำสั่งในหัวข้อของ head </head> <body> คำสั่งในหัวข้อของ body ในส่วนนี้จะเป็นส่วนที่ใช้แสดงผล </body> </html> |
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3T7vZn90OjQo9QTnh_6fWozumz8DKma4C6mwHYZ5xWPad3R9kY5rVd2p0w_dwWGmKzV8WR1WZSln_7YXIo6-fxFcQsZBc0u5bCQjbYVjmG0XZMDdNJb0Z-S1xZIqQxYY8kx-kazg9gdBW/s1600/331.gif)
Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้นๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ (Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ
<HEAD> <TITLE>ข้อความอธิบายชื่อเรื่องของเว็บ</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <META NAME="Author" CONTENT="ชื่อผู้พัฒนาเว็บ"> <META NAME="KeyWords" CONTENT="ข้อความ 1, ข้อความ 2 "> </HEAD> |
TITLE
ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา, เอียง หรือสี โดยข้อความในส่วนนี้จะแสดงผลใน title bar ของ web browser
META
Tag META จะไม่ปรากฏผลบนเบราเซอร์ แต่จะเป็นส่วนสำคัญ ในการจัดอันดับบัญชีเว็บ สำหรับผู้ให้บริการสืบค้นเว็บ (Search Engine เช่น google , yahoo)
charset=TIS-620 ใช้บอกว่าใช้ชุดตัวอักษรแบบใดในการแสดงผล ภาษาไทยเราใช้ charset=TIS-620 หรืออาจเป็น charset=windows-874 ก็ได้ ตอนนี้แนะนำให้ใช้เป็น charset=utf-8
keyword ดังภาพด้านบนจะเห็นว่าเราสามารถใช่ keywords มากกว่า 1 คำได้โดยใช้เครื่องหมาย (,) ในการคั่นระหว่างคำ
การพิมพ์ชุดคำสั่ง HTML สามารถพิมพ์ได้ทั้งตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ หรือผสม การย่อหน้า เว้นบรรทัด หรือช่องว่าง สามารถกระทำได้อิสระ โปรแกรมเบราเซอร์จะไม่สนใจเกี่ยวกับระยะเว้นบรรทัดหรือย่อหน้า หรือช่องว่าง
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPkHKn3I2NCr-qnMPkguJn4p5qML9NsBzLMkqmuycNdwFyJxlxDtAHhJmfjCMLXeYrtUvViAMfhVzIzlLzPaSKZEHB88tkQc07n42w75ooeMPQG3X8pYGP9cDdNhO5bzMQyMLaXcQxVd5A/s1600/331.gif)
Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆ
ส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่มักจะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> </BODY> และแบ่งกลุ่มคำสั่งได้ดังนี้
กลุ่มคำสั่งเกี่ยวกับการจัดรูปแบบเอกสาร
กลุ่มคำสั่งจัดแต่ง/ควบคุมรูปแบบตัวอักษร
กลุ่มคำสั่งการทำเอกสารแบบรายการ (List)
กลุ่มคำสั่งเกี่ยวกับการทำลิงค์
กลุ่มคำสั่งจัดการรูปภาพ
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC0ln8FL7o3sjsn0_uwC5MBJRjcXDvd42PyQagwCJvjvCw_eEtav53Z7kWZszrCTQ92mtuzuiPLAicREMwQC6Uhj0NSAtoQuy-KkYB7DZZG_iF08KXQ23KEd8-UV7IKH-TLH74DKLiLFpk/s1600/115.gif)
กลุ่มคำสั่งควบคุมเฟรม
กลุ่มคำสั่งอื่นๆ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น