ความหมายของ HTML
<html> และ </html> เป็น tag ที่ใช้เพื่อกำหนดว่าเอกสารต่อไปนี้เป็นเอกสารที่ใช้ภาษา HTML เป็นMarkup Language และจะไม่ปรากฏในโปรแกรม Web Browser
|
|
HTML
HTML หรือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ, รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมบราวเซอร์ แต่ละ Tag อาจจะมีส่วนขยายที่เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผลของเว็บได้ด้วยHTML เป็นภาษาที่ถูกพัฒนาโดย World Wide Web Consortium (W3C) จากแม่แบบของภาษาSGML (Standard Generalized Markup Language) โดยตัดความสามารถบางส่วนออกไป เพื่อให้สามารถทำความเข้าใจและเรียนรู้ได้ง่าย และด้วยประเด็นดังกล่าว ทำให้บริการ WWW เติบโตขยายตัวอย่างกว้างขวางตามไปด้วย Tag
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่งHTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
· Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> เป็นต้น
· Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash ( / ) นำหน้าคำสั่งใน Tag นั้นๆ เช่น <B>…</B>, <BLINK>…</BLINK> เป็นต้น
1. เริ่มต้นการเขียน HTML
การเขียนภาษา HTML ประกอบไปด้วย 2 ส่วน คือ
1. เครื่องมือที่ใช้เขียนโปรแกรม คือ Text Editor เช่น Notepad , EditPlus เป็นต้น
2. โปรแกรมแสดงผล คือ web browser (เว็บ บราวเซอร์) เช่น Internet Explorer, Netscapeเป็นต้น
2. โครงสร้างพื้นฐานของ HTML
โครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้
โดยแต่และส่วนสามารถอธิบายความหมายได้ดังนี้
<head> และ </head> เป็น tag ที่ใช้กำหนดส่วนหัวของเอกสาร Head ไม่ได้เป็นส่วนของเอกสารภายใน แต่จะให้ข้อมูลเกี่ยวกับเอกสารฉบับนี้
<title> และ </title> เป็นการระบุข้อความที่ต้องการให้เป็นส่วนหัวของเอกสาร Title จะเป็นส่วนหนึ่งของ Head โดยข้อความที่อยู่ใน Title จะไปปรากฏอยู่ที่ส่วนบนสุดของ Web Browser
<body> และ </body> เป็น tag ที่บอกถึงลักษณะต่าง ๆ ของเอกสารฉบับนี้ ซึ่งใน Body จะมีAttributes ต่าง ๆ ได้แก่ BGCOLOR (หมายถึงการกำหนดสีพื้นด้านหลังของเอกสาร) , TEXT (หมายถึงการกำหนดสีของตัวอักษรในเอกสาร) เป็นต้น
3. การบันทึกแฟ้ม
ไฟล์ของโปรแกรม HTML เป็นแท็ก ไฟล์ธรรมดา ที่ใช้ นามสกุลว่า .htm หรือ .html โดย เมื่อเรา เขียน คำสั่งต่าง ๆ ลงใน โปรแกรม Notepad แล้วเราจะ Save ให้เป็น นามสกุลดังกล่าว ถ้าไม่เช่นนั้น จะไม่สามารถแสดงผลได้ทางบราวเซอร์และถ้ามีการแก้ไขหรือเขียนโปรแกรมเราก็สามารถใช้โปรแกรมNotepadนี้เป็นตัวแก้ไขได้เละสำหรับไฟล์ที่จะเป็นHomePageให้บันทึกชื่อ ว่า index.htm หรือ index.html เสมอ
(ไม่ควรบันทึกแฟ้มโดยใช้ชื่อเป็นภาษาไทย)
4. การแสดงผลโปรแกรม
เมื่อบันทึกไฟล์ที่มีนามสกุล .htm หรือ .html แล้ว สามารถเปิดแสดงผลจากโปรแกรมเว็บบราวเซอร์ที่มีในเครื่องได้เลย เช่น โปรแกรม Internet Explorer
5. การกำหนดพื้นหลัง (background)
5.1 กำหนดสีพื้นหลัง
5.2 กำหนดภาพพื้นหลัง
6. การใส่ข้อความลงในโฮมเพจ
การใส่ข้อความลงในโฮมเพจสามารถใส่ลงไประหว่าง <body> .... </body> ได้เลย ดังตัวอย่างด้านล่าง
7. จัดตำแหน่งข้อความ
7.1 คำสั่งสำหรับขึ้นบรรทัดใหม่
ใช้คำสั่ง <br> วางไว้ท้ายข้อความที่ต้องการ Web browser จะแสดงผลข้อความต่อจากนั้นในบรรทัดต่อไป
7.2 คำสั่งย่อหน้า
7.3 คำสั่งสำหรับจัดตำแหน่งของย่อหน้า
left =ชิดขอบซ้าย เช่น <p align="left"> ข้อความ </p>
right = ชิดขอบขวา เช่น <p align="right"> ข้อความ </p>
center = กลางหน้ากระดาษ เช่น <p align="center"> ข้อความ </p>
8. การตกแต่งตัวอักษร
8.1 การกำหนดขนาดตัวอักษร
คำสั่งที่ใช้สำหรับกำหนดขนาดตัวอักษร โดยการเติมตัวเลข -1 ถึง +7 โดยเลข -1 จะเล็กที่สุด
และ +7 จะมีขนาดใหญ่ที่สุด
8.2 การกำหนดชนิดตัวอักษร
8.3 การกำหนดสีตัวอักษร
|
8.4 การกำหนดตัวเอียง ตัวหนา และ ตัวขีดเส้นใต้
|
9. คำสั่งขีดเส้นคั่น
<hr width="ความยาว">
<hr size="ความหนา">
<hr align="ตำแหน่ง">
<hr color="Code สี">
10.
คำสั่งแสดงรูปภาพ
<img src="logo.gif"> ในกรณีที่อยู่ใน directory (folder) เดียวกัน สามารถกำหนดชื่อ file ลงไปได้เลย
<img src="http://www.siamclub.com/logo.gif"> ในกรณีที่ดึงรูปภาพจากโฮมเพจอื่น จำเป็นต้องใส่ URL ให้ครบถ้วน
10.1 คำสั่งอธิบายรูปภาพ ใช้สำหรับ อธิบายรูปภาพ เมื่อนำ mouse ไปชี้ที่รูปภาพจะขึ้นคำอธิบาย
10.2
การกำหนดตำแหน่งของรูปภาพ กับ ตัวหนังสือ
คือคำสั่งสำหรับจัด ตัวหนังสือให้พอดีกับรูปภาพ เช่น รูปภาพอยู่ทางซ้ายตัวหนังสือ ก็จะอยู่ด้านขวา ตัวหนังสืออยู่ด้านซ้ายรูปภาพก็จะอยู่ด้านขวา
10.3 การกำหนดขนาดรูปภาพ
|
โดยมีหน่วยเป็น pixel หรือความกว้างสามารถกำหนดเป็น % ของจอภาพเพื่อ ให้เป็นสัดส่วนพอดีกับขนาดจริง
11. . การเชื่อมโยง
11.1 การเชื่อมโยงภายในเอกสาร
|
การ link ภายในเอกสาร เหมาะสำหรับ file HTML ที่มีความยาวมากๆ จำเป็นต้องมีการlink ภายในเอกสาร เพื่อไม่ให้ เกิดความยุ่งเหยิง สำหรับการ link ภายในเอกสารมีคำสั่งดังนี้
11.2 การเชื่อมโยงไปโฮมเพจอื่น
|
11.3 การ link ไปยัง E-mail
|
12. ตาราง
การทำตารางมีประโยชน์ต่อการเขียนโฮมเพจมากเนื่องจากเป็นคำสั่งเดียวที่จะสามารถแบ่งข้อมูลออกเป็น 2 ฝั่งได้ ซึ่งเว็บไซต์ดังๆทั่วโลกนิยมใช้คำสั่งตารางกันมาก รูปแบบคำสั่งคือ
|
ไม่มีความคิดเห็น:
แสดงความคิดเห็น