HTML TAG พื้นฐาน
(Hypertext Markup Language)
ใช้โปรแกม
Notepad++ เป็นโปรแกรมที่ใช้ช่วยเขียนโปรแกรมภาษาต่างๆ
สำหรับนักพัฒนาโปรแกรมน่าจะคุ้นเคยกับโปรแกรมนี้เป็นอย่างดี
เราสามารถใช้โปรแกรมนี้ช่วยเขียนโปรแกรมได้เกือบทุกภาษา ไม่ว่าจะเป็น C,
C++, C#, Java, HTML, XML, PHP ASP, VB, SQL และอื่นๆ อีกมากมาย Text Editor
คือ โปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความในการสร้างเว็บเพจด้วยภาษา HTML นั้นต้องมีเครื่องมือที่ใช้ในการเขียน และแก้ไขตัวอักษรซึ่งเป็นคำสั่งต่าง ๆปัจจุบันมี โปรแกรม Text Editor หลายโปรแกรม เช่น NotePad, EditPlus หรือโปรแกรม Dreamweaver ซึ่งมีคุณสมบัติเป็นทั้งโปรแกรมสำเร็จรูปในการสร้างเว็บเพจด้วย
ตัวอย่าง Notepad
ผลการแสดง
จะใช้โปรแกรม Internet Web Browser เช่น Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เป็นต้น
โครงสร้างของภาษา HTML
การเขียนโฮมเพจด้วยภาษา HTML นั้น เอกสาร HTML จะประกอบด้วยส่วนประกอบ 2 ส่วน ดังนี้
1. ส่วน
Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนชื่อเรื่อง
(Title) ของหน้าต่างการทำงานในระบบ Windows
2. ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น
ๆ ซึ่งจะประกอบด้วย Tag
คำสั่งในการจัดรูปแบบ หรือตกแต่งเอกสาร HTML
ในทั้งสองส่วนนี้จะอยู่ภายใน Tag <HTML>…</HTML> ดังนี้
<html>
<html>
<head> <title>
ส่วนชื่อเอกสาร </title>
</head>
<body>
tag คำสั่ง
</body>
</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>....</HTML> คำสั่งเริ่มต้น
คำสั่ง html เป็นคำสั่งเริ่มการเขียน
|
7 กรกฎาคม 2555