อินเทอร์เน็ตและโครงสร้างของภาษา HTML
1.1 การสร้าง Homepage
โฮมเพจจัดอยู่ในรูป
ไฮเปอร์เท็กซ์ที่ผู้เข้าไปใช้บริการบนอินเทอร์เน็ตพบเห็นกันได้มากที่สุด
และเป็นจุดเด่นให้ผู้ใช้บริการเกิดความสนใจที่จะใช้อินเทอร์เน็ตมากขึ้นนอก
เหนือจากบริการพื้นฐานทั่วไป
ผู้ใช้บริการอินเทอร์เน็ต (ISP) และศูนย์บริการเว็บ (Web Site)
ทุกแห่งต่างมีโฮม
เพจเป็นของตนเองเพื่อเป็นข้อมูลเบื้องต้นที่แสดงให้ผู้ใช้บริการทราบว่าใน
สถานีนั้น ๆ ให้บริการสิ่งใดบ้างและเมื่อเข้าสู่โฮมเพจนั้น ๆ
แล้วเราจะเดินทางไปยังแห่งใดได้
ทำหน้าที่เป็นจุดรวมของการเดินทางเข้าไปสู่ดินแดนแห่งใหม่
นับได้ว่าโฮมเพจเป็นหน้าตา เป็นการประชาสัมพันธ์ของสถานีหรือองค์กรนั้น
และเราเรียกข้อมูลอื่น ๆ ซึ่งอาจเชื่อมโยงต่อจากโฮมเพจว่า "เว็บเพจ" (Web
Page)
รูปร่างหน้าตาของโฮมเพจแต่ละแห่งจะแตกต่างกันออกไป
ขึ้นอยู่กับประเภทและรูปแบบขององค์กรนั้น
ในโฮมเพจการใส่รูปภาพก็เป็นส่วนสำคัญแต่ต้องมีการเตรียมรูปภาพก่อนที่จะใส่
หากรูปภาพมีขนาดไฟล์ใหญ่ก็อาจทำให้การทำงานช้าลง
ไม่ควรมีหลายหน้าและควรจะมีส่วนแสดงให้ผู้ใช้ทราบว่าในส่วนนั้นมีอะไรอยู่
บ้าง
|
|
|
|
โฮมเพจสถาบันการศึกษา
|
โฮมเพจความบันเทิง
|
ด้วยการพัฒนาของไฮ
เปอร์เท็กซ์ ได้เกิดภาษาใหม่ที่กลายมาเป็นมาตรฐานบนอินเทอร์เน็ตภาษาหนึ่ง
นิยมนำมาใช้สร้างโฮมเพจและเว็บเพจบนอินเทอร์เน็ตคือ ภาษา HTML
การสร้างเว็บเพจโดยใช้ภาษา HTML สามารถทำได้โดยการใช้โปรแกรม Text
Editor ต่าง ๆ ที่มีอยู่แล้วในระบบปฏิบัติการ Windows เช่น Notepad,
WordPad นอกจากนี้ยังสามารถที่จะใช้งานโปรแกรมประเภท Word
หรือโปรแกรมที่ใช้ในการจัดสิ่งพิมพ์ในการเขียนไฟล์ HTML ได้อีกด้วย
เมื่อเขียนคำสั่งเสร็จแล้วให้ทำการบันทึกไฟล์ให้มีนามสกุล .html (ชื่อไฟล์.html)
ในบทเรียนนี้จะใช้โปรแกรม Notepad ใช้ในการสร้างโฮมเพจ
|
|
1.2 ความรู้เบื้องต้นภาษา HTML
HTML ย่อมาจาก Hypertext Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ รูปภาพ หรือวัตถุ อื่น ๆ ผ่านโปรแกรมเบราเซอร์ แต่ละ Tag อาจจะมีส่วนขยาย เรียกว่า
Attribute สำหรับระบุ หรือควบคุมการแสดงผล
ของเว็บได้ด้วย HTML เป็นภาษาที่ถูกพัฒนาโดย World Wide Web Consortium
(W3C) จากแม่แบบของภาษา SGML (Standard Generalized Markup Language)
โดยตัดความสามารถบางส่วนออกไป
เพื่อให้สามารถทำความเข้าใจและเรียนรู้ได้ง่าย และด้วยประเด็นดังกล่าว
ทำให้บริการ
www เติบโตขยายตัวอย่างกว้างขวาง
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง
หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket
(<) และ greater-than bracket (>) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
1. Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <hr>(Tag
กำหนดเส้นคั่น), <br> (Tag
กำหนดขึ้นบันทัดใหม่) เป็นต้น
2. Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash ( / ) นำหน้าคำสั่งใน Tag นั้น ๆ เช่น
<B>……</B> (Tag กำหนดตัวหนา), <a
href=URL>…จุด link..</a> (Tag
กำหนดการเชื่อมโยงข้อมูล) เป็นต้น
3. Tag เปิด/ปิด บาง tag ละ tag ปิดได้ เช่น <tr>
(Tag กำหนดแถวตาราง), <th>
(Tag กำหนดคอลัมภ์ตาราง)
4. คำสั่งใน Tag เขียนด้วยอักษรตัวใหญ่หรือเล็กก็ได้ เช่น <Body> หรือ <BODY> หรือ <body>
|
|
1.3 โครงสร้างของภาษา HTML
การเขียนโฮมเพจด้วยภาษา HTML นั้น
เอกสาร HTML จะประกอบด้วยส่วนประกอบ
2 ส่วน ดังนี้
1. ส่วน
Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนชื่อเรื่อง
(Title) ของหน้าต่างการทำงานในระบบ Windows
2. ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น
ๆ ซึ่งจะประกอบด้วย Tag
คำสั่งในการจัดรูปแบบ หรือตกแต่งเอกสาร HTML
ในทั้งสองส่วนนี้จะอยู่ภายใน Tag <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 สำหรับกลุ่มคำสั่งได้ดังนี้
1. กลุ่มคำสั่งจัดรูปแบบตัวอักษร
2. กลุ่มคำสั่งการจัดรูปแบบเอกสาร
3. กลุ่มคำสั่งจัดการรูปภาพ
4.
กลุ่มคำสั่งการจัดรูปแบบฉากหลัง
5. กลุ่มคำสั่งจัดการตาราง
6. กลุ่มคำสั่งเกี่ยวกับการเชื่อมโยง
สรุป
<HTML>....</HTML> คำสั่งเริ่มต้น
คำสั่ง html เป็นคำสั่งเริ่มการเขียน
<HEAD>....</HEAD> เป็นส่วนหัวของเว็บเพจ บอกคุณสมบัติของเว็บเพจ
<TITLE>....</TITLE>
ใช้บอกชื่อของเว็บเพจ
<BODY>....</BODY> เป็นส่วนสำคัญที่สุด
เพราะเป็นส่วนที่แสดงเนื้อหา
ทั้งหมด อาจรวมถึง ข้อความ รูปภาพ ตาราง
การเชื่อมโยง
1.4 เริ่มต้นกับภาษา HTML
ด้วย Notepad
ในการสร้าง Homepage
สามารถทำได้โดย
1. การใช้โปรแกรมสำเร็จรูป
และ
2. การใช้โปรแกรม Notepad
ซึ่งในบทเรียนนี้จะสอนการเขียนโฮมเพจด้วยภาษา HTML
โดยใช้โปรแกรม Notepad ในระบบปฏิบัติการ
windows ซึ่งต้องเขียน คำสั่งต่าง ๆ ลงใน โปรแกรม Notepad
Notepad
นี้จัดเป็นโปรแกรมประเภท Text Editor สามารถสร้างไฟล์หรือเขียนภาษา HTML
ได้ และ Notepad นี้เป็นโปรแกรมที่นิยมใชในการเขียนโฮมเพจ
สามารถใช้งานได้ง่าย และเป็นโปรแกรมที่ทำงานบนระบบ
Windows
การเรียกใช้งานโปรแกรม Notepad สามารถทำได้ดังนี้
คลิกที่ Start --> เลือก Programs --> เลือก Accessories --> เลือก Notepad
ได้โปรแกรม Notepad
สำหรับเขียนโฮมเพจ ดังนี้
ทดสอบการใช้โปรแกรม Notepad
โดยพิมพ์คำสั่งพื้นฐานของภาษา HTML ดังนี้
การบันทึกไฟล์โปรแกรม Notepad ให้เป็นไฟล์ HTML
หลังจากใส่คำสั่งพื้นฐานของภาษา
HTML ลงใน Notepad ให้ Save เป็น
file นามสกุล ดอท.html
ดังนี้
คลิก File --> เลือก save ในช่อง File name ให้พิมพ์ชื่อ File ที่ต้องการลงไป
เช่น test.html
(test.html อ่านว่า เทส ดอท เอช ที เอ็ม แอล)
จะได้ File 1 File ที่เขียนด้วยภาษา HTML ชื่อ test.html
จะเปิดโปรแกรม Internet Explorer (IE)
หมายเหตุ เมื่อทำการ
save file เป็น file
HTML แล้ว ถ้าต้องการแก้ไขเอกสาร HTML
ที่เปิดดูด้วยโปรแกรม Internet Explorer
เลือก view
ที่ menu bar
>>
เลือก source จะปรากฏข้อมูลที่เขียนด้วยภาษา
HTML ในโปรแกรม
notepad
|
|
|
|
ขอบคุณที่มาจาก http://pirun.ku.ac.th/~agrtnk/web/units/unit1/unit1-4.htm
|
|
|
 | |
|
Notepad จัดเป็นโปรแกรมประเภท Text Editor สามารถสร้างไฟล์หรือเขียนภาษา HTML ได้ และ Notepad นี้เป็น โปรแกรม ที่นิยมใช้ในการเขียน
โฮมเพจ สามารถใช้งานได้ง่าย และเป็นโปรแกรมที่ติดตั้งมาพร้อมกับระบบ Windows
การเรียกใช้งานโปรแกรม Notepad สามารถทำได้ดังนี้
คลิกที่ Start --> เลือก Programs --> เลือก Accessories --> เลือก Notpad
|
|
ภาพแสดงขั้นตอนการเข้าสู่โปรแกรม Notepad
เมื่อทำการเรียกใช้โปรแกรม Notepad จะปรากฎหน้าจอภาพ ดังรูป
ภาพแสดงหน้าจอภาพของโปรแกรม Notepad
โปรแกรม Notepad บางครั้งขนาดตัวอักษรจะเล็กเกินไปหรือใหญ่เกินไป และรูปแบบตัวอักษรอ่านยาก อักษรบางรูปแบบไม่สามารถพิมพ์ภาษาไทยได้ การปรับขนาด
และรูปแบบตัวอักษร สามารถทำได้ดังนี้
1. เลือกคำสั่ง Format แล้วคลิ๊กที่คำสั่ง Font..
2. ทำการเลือก Font และ Size ตามต้องการ ดังภาพ
ภาพแสดงการปรับขนาดและรุปแบบตัวอักษร
|
|
|
| | |
|
Notepad จัดเป็นโปรแกรมประเภท Text Editor สามารถสร้างไฟล์หรือเขียนภาษา HTML ได้ และ Notepad นี้เป็น โปรแกรม ที่นิยมใช้ในการเขียน
โฮมเพจ สามารถใช้งานได้ง่าย และเป็นโปรแกรมที่ติดตั้งมาพร้อมกับระบบ Windows
การเรียกใช้งานโปรแกรม Notepad สามารถทำได้ดังนี้
คลิกที่ Start --> เลือก Programs --> เลือก Accessories --> เลือก Notpad
|
|
ภาพแสดงขั้นตอนการเข้าสู่โปรแกรม Notepad
เมื่อทำการเรียกใช้โปรแกรม Notepad จะปรากฎหน้าจอภาพ ดังรูป
ภาพแสดงหน้าจอภาพของโปรแกรม Notepad
โปรแกรม Notepad บางครั้งขนาดตัวอักษรจะเล็กเกินไปหรือใหญ่เกินไป และรูปแบบตัวอักษรอ่านยาก อักษรบางรูปแบบไม่สามารถพิมพ์ภาษาไทยได้ การปรับขนาด
และรูปแบบตัวอักษร สามารถทำได้ดังนี้
1. เลือกคำสั่ง Format แล้วคลิ๊กที่คำสั่ง Font..
2. ทำการเลือก Font และ Size ตามต้องการ ดังภาพ
ภาพแสดงการปรับขนาดและรุปแบบตัวอักษร
|
|
|
