การเขียนโฮมเพจด้วยภาษา HTML นั้น เอกสาร HTML จะประกอบด้วยส่วนประกอบ 2 ส่วน ดังนี้
1. ส่วน Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนชื่อเรื่อง (Title) ของหน้าต่างการทำงานในระบบ Windows
เคยสังเกตไหมว่า เวลาเปิดเว็บขึ้นมาตรงแถบสีน้ำเงิน (บนสุดของ Browser) จะแสดงเป็นชื่อเว็บต่างๆ เราสามารถใช้ <Title> กำหนดหรือใส่คำจำกัดความของเว็บนั้นๆ โดยรูปแบบ จะใช้อยู่ระหว่าง <HEAD>...</HEAD> ยกตัวอย่างเช่น
<HTML>
<HEAD>
<Title> สวัสดีครับ ยินดีต้อนรับ ^o^ </Title>
</HEAD>
</HTML>
(อ่ะๆ ผมลืมบอกไปนิดหนึ่ง เวลาเราพิมพ์โค้ดใส่ลงบน Program Notepad แล้ว ถ้าจะให้สามารถเปิดดูได้แบบเว็บเพจ เวลาเซฟก็ให้ใส่นามสกุลเป็น .html ด้วยนะครับ เช่น test.html แล้วเซฟครับ แล้วถ้าเราอยากจะแก้ไขโค้ดก็คลิกขวาที่ไฟล์ test.html แล้วเลือก OpenWith --> Notepad ได้เลยครับ)
ทีนี้รอง เปิดไฟล์ test.html ขึ้นมาก็จะพบว่า
Tital Bar ของเราได้เปลี่ยนไปแล้ว
การกำหนดชื่อตรงส่วน Title นี้เราไม่สามารถใส่พวกตัวเอียง ตัวหนา ลงสี หรือ ตัวขีดเส้นใต้ได้ แต่เราก็สามารถทำให้มันสะดุดตาได้โดย ทำการจัดเรียงตัวอักษรใหม่ เช่น
<Title> W e l e c o m e T o M y F i r s t S i t e ! ^o^ </Title>
...ก็ประมาณเนี้ย...
โดยปกติแล้วส่วน Title นี้ ถ้าเราไม่ได้ทำการกำหนดเอาไว้ เวลาเปิด Browser ขึ้นมา ตรงส่วน TitleBar นี้ก็จะแสดงเป็นชื่อไฟล์ .html ขึ้นมาแทนครับ
2. ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น ๆ ซึ่งจะประกอบด้วย Tag คำสั่งในการจัดรูปแบบ หรือตกแต่งเอกสาร HTML
ในทั้งสองส่วนนี้จะอยู่ภายใน Tag <HTML>…</HTML> ดังนี้
<html>
<head> <title> ส่วนชื่อเอกสาร </title> </head>
<body>
tag คำสั่ง
</body>
</html>
คำสั่ง หรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า "<" ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า ">" เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม "/" (Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย
ในการเขียนคำสั่งภาษา HTML สามารถเขียน ด้วยตัวอักษร เล็กหรือใหญ่ ทั้งหมดหรือเขียนคละกันได้ เช่น <HTML> หรือ <Html> หรือ <html> ซึ่งจะให้ผลเหมือนกัน
ตามที่ผมได้บอกไว้ว่า ส่วน BODY จะเป็นเนื้อหาของเว็บเรา ดังนั้นเมื่อเราเปิด <BODY> ขึ้นมา อะไรที่ใส่เข้าไปจะไปแสดงที่พื้นที่เนื้อหา หรือเว็บของเรานั่นเอง อธิบายแบบนี้อาจจะนึกภาพไม่ออก ลองไปใส่โค้ทกันเลยดีกว่า รูปแบบจะเป็นแบบนี้ครับ
<HTML>
<HEAD> <Title> สัวสดีครับ ยินดีต้อนรับ ^o^ </Title></HEAD>
<BODY>โอ้ว ว้าว เรานี่ก็เก่งเหมือนกันนะนี่ อิอิ :-P </BODY>
</HTML>
คำสั่งเริ่มต้นของเอกสาร HTML
เว็บแต่ละหน้านั้น จะมี <TAG> หลักๆอยู่3อันคือ
1. ส่วนขอบเขต <html>
2. ส่วนหัว <head>
3. ส่วนเนื้อหา<body>
<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 เป็นคำสั่งเริ่มการเขียน
<HEAD>....</HEAD> เป็นส่วนหัวของเว็บเพจ บอกคุณสมบัติของเว็บเพจ
<TITLE>....</TITLE> ใช้บอกชื่อของเว็บเพจ
<BODY>....</BODY> เป็นส่วนสำคัญที่สุด เพราะเป็นส่วนที่แสดงเนื้อหาทั้งหมด อาจรวมถึง ข้อความ รูปภาพ ตาราง การเชื่อมโยง
table mirror. Replica Watches Uk Store This movement model: ETA 2824-2, vibration frequency of 28,800 times / hour, and after? the full string can provide 38 hours of power reserve.This swiss replica watches design Longines Avigation Replica Watches is simple, exquisite workmanship, and equipped with excellent and stable movement, is an excellent watch. Rolex Yacht-master Watches Watch refined style is very suitable for the elegant.
ตอบลบ