ความหมายของ HTML


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) โดยมีรูปแบบคำสั่งดังนี้
<HTML>
<HEAD>
<TITLE> ชื่อโปรแกรมหรือข้อมูลที่ต้องการแสดงในส่วนหัว </TITLE>
</HEAD>
<BODY>
คำสั่งหรือข้อความที่ต้องการให้แสดง
</BODY>
</HTML>
 
 








โดยแต่และส่วนสามารถอธิบายความหมายได้ดังนี้
<html> และ </html> เป็น tag ที่ใช้เพื่อกำหนดว่าเอกสารต่อไปนี้เป็นเอกสารที่ใช้ภาษา HTML เป็น Markup Language และจะไม่ปรากฏในโปรแกรม Web Browser
<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 นี้เป็นตัวแก้ไขได้เลย
สำหรับไฟล์ที่จะเป็นHome Page ให้บันทึกชื่อว่า index.htm    หรือ  index.html เสมอ
(ไม่ควรบันทึกแฟ้มโดยใช้ชื่อเป็นภาษาไทย)
4.              การแสดงผลโปรแกรม
        เมื่อบันทึกไฟล์ที่มีนามสกุล .htm  หรือ .html  แล้ว  สามารถเปิดแสดงผลจากโปรแกรมเว็บบราวเซอร์ที่มีในเครื่องได้เลย  เช่น โปรแกรม Internet Explorer

5.              การกำหนดพื้นหลัง (background)
5.1  กำหนดสีพื้นหลัง
<html>
                <head>
                                <title> การกำหนด background </title>
                </head>
                <body bgcolor="ใส่ชื่อสีหรือรหัสสีที่ต้องการ">
                </body>
</html>
 
 









5.2 กำหนดภาพพื้นหลัง
Text Box: <html> <head> <title> การกำหนด background </title> </head> <body background="ใส่ชื่อและนามสกุลภาพลงไป เช่น pic1.jpg"> </body> </html>
6.              การใส่ข้อความลงในโฮมเพจ
Text Box: <html> <head> <title>การใส่ข้อความลงในโฮมเพจ</title> </head> <body> ข้อความที่ต้องการ </body> </html>
การใส่ข้อความลงในโฮมเพจสามารถใส่ลงไประหว่าง <body> .... </body> ได้เลย  ดังตัวอย่างด้านล่าง

7.              จัดตำแหน่งข้อความ
7.1                   คำสั่งสำหรับขึ้นบรรทัดใหม่
ใช้คำสั่ง <br> วางไว้ท้ายข้อความที่ต้องการ Web browser จะแสดงผลข้อความต่อจากนั้นในบรรทัดต่อไป

7.2                   คำสั่งย่อหน้า
Text Box: <p> ข้อความ </p>





7.3                   คำสั่งสำหรับจัดตำแหน่งของย่อหน้า





Text Box: <p align="ตำแหน่ง"> ข้อความ </p>       left = ชิดขอบซ้าย   เช่น                         <p align="left">   ข้อความ          </p>
right = ชิดขอบขวา เช่น                           <p align="right">   ข้อความ        </p>
center = กลางหน้ากระดาษ  เช่น           <p align="center">   ข้อความ      </p>


8.              การตกแต่งตัวอักษร
8.1       การกำหนดขนาดตัวอักษร
        คำสั่งที่ใช้สำหรับกำหนดขนาดตัวอักษร โดยการเติมตัวเลข -1 ถึง +7 โดยเลข -1 จะเล็กที่สุด
 และ +7 จะมีขนาดใหญ่ที่สุด
Text Box: <font size="ขนาดตัวอักษร"> ตัวอักษร </font>

8.2       การกำหนดชนิดตัวอักษร
Text Box: <font face="ชนิดตัวอักษร"> ตัวอักษร </font>

8.3       การกำหนดสีตัวอักษร
<font color="color"> ตัวอักษร   </font>
 
 



8.4       การกำหนดตัวเอียง ตัวหนา และ ตัวขีดเส้นใต้
<b>ตัวอักษรหนา</b>
<i>ตัวอักษรเอียง</i>
<u>ตัวอักษรถูกขีดเส้นใต้</u>
 
 




9.              คำสั่งขีดเส้นคั่น
Text Box: <hr> คือคำสั่งที่ใช้สำหรับขีดเส้นใต้<hr width="ความยาว">
<hr size="ความหนา">
<hr align="ตำแหน่ง">
<hr color="Code สี">

10.       Text Box: <img src="ชื่อรูปภาพ.นามสกุลภาพ">คำสั่งแสดงรูปภาพ

<img src="logo.gif">   ในกรณีที่อยู่ใน directory (folder) เดียวกัน สามารถกำหนดชื่อ file ลงไปได้เลย
<img src="http://www.siamclub.com/logo.gif">  ในกรณีที่ดึงรูปภาพจากโฮมเพจอื่น จำเป็นต้องใส่ URL ให้ครบถ้วน
10.1            คำสั่งอธิบายรูปภาพ  ใช้สำหรับ อธิบายรูปภาพ เมื่อนำ mouse ไปชี้ที่รูปภาพจะขึ้นคำอธิบาย
Text Box: <img src="URL" alt="คำอธิบาย">
10.2            Text Box: <img src="URL" align="ตำแหน่งที่ต้องการ">การกำหนดตำแหน่งของรูปภาพ กับ ตัวหนังสือ

คือคำสั่งสำหรับจัด ตัวหนังสือให้พอดีกับรูปภาพ เช่น รูปภาพอยู่ทางซ้ายตัวหนังสือ ก็จะอยู่ด้านขวา ตัวหนังสืออยู่ด้านซ้ายรูปภาพก็จะอยู่ด้านขวา

10.3           การกำหนดขนาดรูปภาพ
<img src="URL" width="ความกว้าง" height="ความสูง">
 
 โดยมีหน่วยเป็น pixel หรือความกว้างสามารถกำหนดเป็น % ของจอภาพเพื่อ ให้เป็นสัดส่วนพอดีกับขนาดจริง


11.       . การเชื่อมโยง
11.1            การเชื่อมโยงภายในเอกสาร
<a href="#เป้าหมาย">.....</a> ข้อความที่ต้องการให้เป็น link
<a name="name">.....</a>ใช้สำหรับกำหนดชื่อของตำแหน่งเป้าหมายโดยแทนลงไปในตัวแปร name
 
 





                        การ link ภายในเอกสาร เหมาะสำหรับ file HTML ที่มีความยาวมากๆ จำเป็นต้องมีการ link ภายในเอกสาร เพื่อไม่ให้ เกิดความยุ่งเหยิง สำหรับการ link ภายในเอกสารมีคำสั่งดังนี้
11.2            การเชื่อมโยงไปโฮมเพจอื่น
<a href="URL"> ข้อความที่ต้องการให้เป็น link  </a>
 
 



11.3            การ link ไปยัง E-mail
<a href="mailto:E-mail ของเรา">  ข้อความที่ต้องการให้เป็น link    </a>
 
 




12.       ตาราง
การทำตารางมีประโยชน์ต่อการเขียนโฮมเพจมากเนื่องจากเป็นคำสั่งเดียวที่จะสามารถแบ่งข้อมูลออกเป็น 2 ฝั่งได้ ซึ่งเว็บไซต์ดังๆทั่วโลกนิยมใช้คำสั่งตารางกันมาก รูปแบบคำสั่งคือ
<html>
<head>
<title>พื้นฐานคำสั่งตาราง</title>
</head>
<body>
                      <table>
<tr><th> หัวข้อที่ 1</th><th> หัวข้อที่ 2</th><th> หัวข้อที่ 3</th></tr>
<tr><td> ข้อมูลที่ 1 แถว 1</td><td> ข้อมูลที่ 2 แถว 1</td><td> ข้อมูลที่ 3 แถว 1</td></tr>
<tr><td> ข้อมูลที่ 1 แถว 2</td><td> ข้อมูลที่ 2 แถว 2</td><td> ข้อมูลที่ 3 แถว 2</td></tr>
<tr><td> ข้อมูลที่ 1 แถว 3</td><td> ข้อมูลที่ 2 แถว 3</td><td> ข้อมูลที่ 3 แถว 3</td></tr>
      </table>
</body>
</html>
 
 





Text Box: <table> คือคำสั่งสร้างตาราง <tr> คือคำสั่งกำหนด แถว ของตารางโดยมีคำสั่งย่อยคือ <th> คือหัวข้อของ ข้อมูลใน คอลัมน์ นั้นๆ และ <td> คือข้อมูลในคอลัมน์ นั้น

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: บทความ (Atom)