HTML ย่อมาจากคำว่า "HyperText Markup Language" เป็นภาษาที่ใช้ในการเขียนโปรแกรมภาษาหนึ่งของคอมพิวเตอร์ ที่แสดงผลในลักษณะของเว็บเพจ ซึ่งสามารถแสดงผลได้ในรูปแบบต่างๆ ไม่ว่าเป็นภาพกราฟิก ภาพนิ่ง ภาพเคลื่อนไหว เสียง หรือการเชื่อมโยงไปยังเว็บไซต์อื่นๆ
ภาษา HTML เป็นภาษาที่มีลักษณะของโค้ด กล่าวคือ จะเป็นไฟล์ที่เก็บข้อมูลที่เป็นตัวอักษรในมาตรฐานของรหัสแอสกี (ASCII Code) โดยเขียนอยู่ในรูปแบบของเอกสารข้อความ จึงสามารถกำหนดรูปแบบและโครงสร้างได้ง่าย

การสร้างเว็บเพจ

เราสามารถสร้างเว็บเพจได้ 2 ทาง คือ

TextEditor โดยเราต้องรู้คำสั่งของภาษา HTML แล้วพิมพ์โปรแกรมเข้าไปทางTextEditor เช่น Notepad เป็นต้น
ตัวช่วยสร้าง โดยใช้โปรแกรมที่มีความสามารถในการสร้างเว็บเพจโดยเราไม่จำเป็นต้องรู้ภาษา HTML เพราะโปรแกรมเหล่านี้จะทำการแปลงให้เราอัตโนมัติ

ขั้นตอนในการสร้างเว็บเพจ

เปิดโปรแกรม TextEditor แล้วทำการพิมพ์คำสั่ง HTML แล้วเซฟเป็นไฟล์นามสกุล .htm หรือ .html
เปิดโปรแกรม WebBrowser เพื่อใช้ในการดูผลลัพธ์ที่ได้จากการเขียนภาษา HTML จากที่ได้เขียนจาก TextEditor

โครงสร้างภาษา HTML

การเขียนภาษา HTML นั้นมีส่วนประกอบหลักอยู่ 2 ส่วน คือ ส่วนที่เป็นเนื้อหา และส่วนที่เป็นคำสั่ง ส่วนที่เป็นคำสั่งนั้นจะอยู่ในรูปของ Tag ซึ่งจะเขียนอยู่ในเครื่องหมาย มากกว่า และ น้อยกว่า < > แต่ละ Tag มีหน้าที่ที่แตกต่างกันออกไป ซึ่งจะกล่าวในบทต่อไป
Tag แบ่งออกเป็น 2 ประเภท คือ

แท็กเดี่ยว คือ คำสั่งที่มีคำสั่งเพียงอย่างเดียว ซึ่งสามารถใช้และสิ้นสุดคำสั่งได้ด้วยตัวของมันเอง เช่น
ข้อความ.... 
<hr>
<! - ข้อความ - >

แท็กคู่ คือ คำสั่งที่ต้องมีส่วนเริ่มต้นและส่วนจุดจบของคำสั่งนั้นๆ โดยแท็กที่เป็นส่วนจบนั้นจะมีเครื่องหมาย slash / ติดเอาไว้ เช่น
<html> ส่วนของเนื้อหา ..... </html>
<center> ข้อความ..... </center>
 ข้อความ....

*** ถ้าหากมีการใช้แท็กคู่หลายๆ คำสั่ง เช่น คำสั่งตัวขีดเส้นใต้ .... และตามด้วย คำสั่ง ตัวเอียง .... จะต้องปิดคำสั่งตัวเอียงก่อน แล้วจึงจะมาปิดคำสั่งตัวหนา***

 U> ข้อความ....

การกำหนดโครงสร้างหลัก

การจัดวางที่เห็นเป็นการจัดวางแบบมาตรฐาน ซึ่งประกอบไปด้วย 4 ส่วน ซึ่งเวลาเริ่มเขียนภาษาHTML ควรเริ่มจากตรงนี้ก่อนทุกครั้ง

คำสั่งหลัก <HTML> .... </HTML> เป็นคำสั่งที่ไว้กำหนดจุดเริ่มต้นและจุดจบของเอกสาร

คำสั่งหลัก <HEAD> .... </HEAD> เป็นคำสั่งที่ทำหน้าที่กำหนดส่วนหัวเรื่อง โดยภายในคำสั่งนี้จะประกอบไปด้วย

คำสั่งหลัก <TITLE> .... </TITLE> เป็นคำสั่งที่ใช้กำหนดข้อความที่ต้องการให้ขึ้นอยู่ในส่วนของ Title Bar โดยสามารถพิมพ์ได้ยาว 64 ตัวอักษร

คำสั่งหลัก <BODY> .... </BODY> เป็นคำสั่งที่ใช้ในการกำหนดรูปแบบของเอกสารทั้งหมด ว่าจะให้มีลักษณะอย่างไร

ตัวอย่าง

การจัดรูปแบบเอกสาร

การกำหนดหัวข้อ (Heading)
คำอธิบาย
ใช้ในการกำหนดขนาดให้กับข้อความที่เป็นหัวข้อเรื่อง ในเอกสารที่มีหัวข้อเป็นปลีกย่อย สามารถแยกเป็นลำดับของหัวเรื่องได้อย่างชัดเจน
รูปแบบ
<hx> ..... </hx>
ตัวอย่าง
`<html><head>` `<title> Education Technology </title>` `</head>` `<body>` `<h1>Test Heading if x=1</h1>` `<h2>Test Heading if x=2 </h2>` `<h3> Test Heading if x=3 </h3>` `<h4> Test heading if x=4 </h4>` `<h5> Test heading if x=5 </h5>` `<h6> Test heading if x=6 </h6>` `</body></html>`

การกำหนดจุดสิ้นสุดบรรทัด (Break Rule)
คำอธิบาย
ใช้ในการกำหนดจุดสิ้นสุดบรรทัด และขึ้นบรรทัดใหม่ คำสั่งนี้เหมือนการกด Enter บน keyboard นั่นเอง
รูปแบบ
..... <br>
ตัวอย่าง
`<html><head>` `<title> Break Rule Tag </title>` `</head>` `<body>` `Test Normal Message` `Test Normal Message` `Test Break Rule Tag <br>` `Test Break Rule Tag <br>` `</body></html>`

การขึ้นย่อหน้าใหม่ (Paragraph)
คำอธิบาย
ใช้แสดงข้อความในลักษณะพารากราฟ หรือย่อหน้าในเว็บเพจ และยังสามารถใช้ในการขึ้นบรรทัดใหม่ครั้งละ 2 บรรทัด
รูปแบบ
<p> ... </p> <p align="left/center/right"> ... </p>
ตัวอย่าง
`<html><head>` `<title> Paragraph Tag </title>` `</head>` `<body>` `<p> Test Normal Paragraph Tag` `<p align="right"> Test Righ Paragraph Tag` `<p align="center"> Test Center Paragraph Tag` `<p align="left"> Test Left Paragraph Tag` `</body></html>`

แสดงข้อความแบบจัดกึ่งกลาง (Center)
คำอธิบาย
ใช้แสดงข้อความหรือรูปภาพใช้จัดกึ่งกลางเว็บเพจ
รูปแบบ
<center> ... </center>
ตัวอย่าง
`<html><head>` `<title> Paragraph Tag </title>` `</head>` `<body>` `Test Normal Message` `<center> Test Center Message </center>` `</body></html>`

การแสดงเส้นคั่นทางแนวนอน (Horizontal Rule)
คำอธิบาย
ใช้แสดงเส้นคั่นแนวนอน โดยใช้ในการแบ่งเนื้อหาหรือคั่นเพื่อความสวยงามและความเป็นระเบียบของเนื้อหา
รูปแบบ
<hr> <hr align="left/center/right"> กำหนดตำแหน่งเส้น <hr width="pixels or %"> กำหนดความยาวเส้น <hr size="pixels"> กำหนดขนาดเส้น <hr noshade> กำหนดลักษณะเส้น
ตัวอย่าง
`<html><head>` `<title> Horizontal Rule Tag </title>` `</head>` `<body>` `<hr>` `<hr width="100%">` `<hr width="50%">` `<hr width="200">` `<hr size="3">` `<hr size="7">` `<hr align="right">` `<hr align="center" width="75% size="3">` `<hr noshade>` `</body></html>`

การกำหนดตัวอักษร

การกำหนดรูปแบบตัวอักษร (FONT)
คำอธิบาย
ใช้กำหนดรูปแบบตัวอักษร ในข้อความที่อยู่ภายใน เช่น ฟอนต์ สี และ ขนาดตัวอักษร
รูปแบบ
<font face="text"> ..... </font> กำหนดแบบอักษร <font size="number"> ..... </font> กำหนดขนาดอักษร <font color="color"> ..... </font> กำหนดสีอักษร
ตัวอย่าง
<html><head> <title>Font Tag</title> </head> <body> <font size="3"> Font Tag</font> <br> <font color="blue"> Font Tag</font> <br> <font face="JasmineUPC"> Font Tag</font> <br> <font size="5" color="#0000ff"> Font Tag</font> <br> <font face="AngsanaUPC" color="green"> Font Tag</font> <br> <font face="CordiaUPC" size="4" color="yellow"> Font Tag</font> <br> </body></html>

การกำหนดข้อความแบบตัวหนา (Bold)
คำอธิบาย
ใช้กำหนดข้อความที่อยู่ภายใจคำสั่งให่แสดงผลด้วยตัวอักษร ตัวหนา โดยมีจุดประสงค์ก็เพื่อเน้นข้อความในประโยคนั้นๆ
รูปแบบ
<b>....</b>
ตัวอย่าง
<html><head> <title>Bold Tag</title> </head> <body> <font size="7"> Normal Text <br> <b> Bold Text</b> </font> </body></html>

การกำหนดข้อความแบบตัวเอียง (Italic)
คำอธิบาย
ใช้กำหนดข้อความให้ตัวอักษรเอน โดยมีจุดประสงค์เพื่อเน้นข้อความนั้นๆ
รูปแบบ
<i> ... </i>
ตัวอย่าง
<html><head> <title>Italic Tag</title> </head> <body> <font size="7"> Normal Text <br> <i> ItalicText</i> </font> </body></html>

การกำหนดข้อความขีดเส้นใต้ (Underline)
คำอธิบาย
ใช้แสดงความแบบขีดเส้นใต้ เพื้อเน้นข้อความในประโยคนั้นๆ
รูปแบบ
<u> ... </u>
ตัวอย่าง
<html><head> <title>Underline Tag</title> </head> <body> <font size="7"> Normal Text <br> <u> Underline Text</u> </font> </body></html>

การกำหนดข้อความตัวขีดเส้นทับ (Strikeout)
คำอธิบาย
ใช้แสดงข้อความแบบมีเส้นขีดฆ่า โดยใช้เมื่อต้องการยกเลิกข้อความที่ไม่ใช้แล้ว โดยคำสั่งนี้สามารถใช้แทนคำสั่ง STRIKE ได้
รูปแบบ
<s> .... </s> or <strike> .... </strike>
ตัวอย่าง
<html><head> <title>Strikeout Tag</title> </head> <body> <font size="7"> Normal Text <br> <s> Strikeout Text</s> </font> </body></html>

การกำหนดหัวข้อเรื่อง

การแสดงรายการแบบไม่มีเลขลำดับ (Unorder List)
คำอธิบาย
ใช้แสดงรายการข้อมูลแบบแจกแจงเป็นข้อๆ โดยไม่มีเลขลำดับ จะมีสัญลักษณ์นำหน้าข้อมูลแต่ละหัวข้อแทน โดยใช้คำสั่ง <LI> ในการสร้างหัวข้อแต่ละหลายรายการ
รูปแบบ
<ul> ข้อความส่วนหัว <li> ข้อความย่อย <li> ข้อความย่อย <li> ข้อความย่อย </ul>
ตัวอย่าง
<html><head> <title>Unnorder List Tag</title> </head> <body> <ul> Unnorder List <li> First Item <li> Second Item <li> Third Item </ul> </body> </html>

การแสดงรายการแบบไดเรคทอรี่ (DIRectory)
คำอธิบาย
ใช้แสดงข้อมูลแบบแจกแจงเป็นข้อๆ ที่มีความยาวไม่เกิน 20 ตัวอักษรต่อ 1 รายการ และใช้กับคำสั่ง <LI> เพื่อใช้แสดงแถวรายการ
รูปแบบ
<dir> ข้อความส่วนหัว <li> ข้อความย่อย <li> ข้อความย่อย <li> ข้อความย่อย </dir>
ตัวอย่าง
<html><head> <title>Directory Tag</title> </head> <body> <b>HARDWARE</b> <dir> <li>ROM <li>RAM <li>CD-ROM <li>HardDisk </dir> </body> </html>

การแสดงรายการแบบเมนูลิสต์ (MENU)
คำอธิบาย
ใช้แสดงรายการข้อมูลแบบแจกแจงเป็นข้อๆ ที่ไม่ซับซ้อน มีลักษณะคล้ายกับคำสั่ง <UL> แต่มีซับซ้อนน้อยกว่า ใช้คำสั่ง <LI> เช่นเดียวกับคำสั่งอื่นๆ
รูปแบบ
<menu> ข้อความส่วนหัว <li> ข้อความย่อย <li> ข้อความย่อย <li> ข้อความย่อย </menu>
ตัวอย่าง
<html><head> <title>Menu Tag</title> </head> <body> <u>Software</u> <menu> <li>Word <li>Excel <li>PowerPoint <li>Access </menu> </body> </html>

การแสดงรายการแบบใช้ตัวเลข (Order List)
คำอธิบาย
การแสดงรายการแบบแจกแจงเป็นข้อๆ โดยใช้หมายเลขกำกับในการเรียงลำดับ โดยสร้างรายการจากคำสั่ง <LI> และยังสามารถกำหนดรูปแบบของหมายเลขกำกับได้ด้วยให้เป็นเลขอารบิก, เลขโรมัน หรือตัวอักษร
รูปแบบ
<ol type="1 / a / A / i / I" start="number"> ข้อความส่วนหัว <li> ข้อความย่อย <li> ข้อความย่อย <li> ข้อความย่อย </ol>
ตัวอย่าง
<html><head> <title>Order List Tag</title> </head> <body> <h1>Order List</h1> <ol> <li>Item One<li>Item Two<li>Item Three </ol> <ol type="A" start="5"> <li>Item Four<li>Item Five <ol type="i"> <li>Item Six<li>Item Seven </ol></ol> </body> </html>

การแสดงรายการโดยกำหนดหัวข้อ (Definition List)
คำอธิบาย
ใช้แสดงรายการแบบให้คำนิยาม โดยแบ่งองค์ประกอบเป็น 2 ส่วน ส่วนที่อยู่บนคือหัวข้อ (Definition Term) โดยใช้คำสั่ง <DT> ส่วนที่อยู่ล่างคือ คำอธิบาย (Definition Description) ใช้คำสั่ง <DD> โดยหากจะให้ ส่วนหัวข้ออยู่ทางซ้าย แล้วคำอธิบายอยู่ทางขวาก็ให้ใช้ attribute COMPACT ในกรณีที่รายการเป็นข้อความสั้นๆ
รูปแบบ
<dl> ข้อความส่วนหัว <dt> หัวข้อ <dd> คำอธิบาย <dt> หัวข้อ <dd> คำอธิบาย <dt> หัวข้อ <dd> คำอธิบาย </ol>
ตัวอย่าง
<html><head> <title>Definition Tag</title> </head> <body> <h1> Definition List</h1> <dl> <dt>com<dd>องค์การเอกชน (Commercial Organization) <dt>edu<dd>สถาบันการศึกษา (Education Organization) <dt>net<dd>องค์กรให้บริการเคลือข่าย (Network Organization) </dl> <p> <dl compact> <dt>org<dd>องค์กรไม่แสวงผลกำไร (Non-Commercial Organization) <dt>gov<dd>องค์การของรัฐ (Government Organization) <dt>mil<dd>องค์กรทางทหราร (Millitary Organization) </dl> </body> </html>

การสร้างตาราง

การสร้างตาราง (TABLE)
คำอธิบาย
ใช้ในการสร้างตารางข้อมูล โดยจะมีคำสั่งที่ใช้ร่วมกันคือ คำสั่ง <TR> ในการสร้างแถวเซลล์ข้อมูล, คำสั่ง <TD> ในการสร้างเซลล์ข้อมูล, คำสั่ง <TH> ในการสร้างหัวตาราง
รูปแบบ
<table> .... </table> <table bgcolor="color"> .... </table> กำหนดสีพื้นในตาราง <table border="pixels"> .... </table> กำหนดขนาดของขอบตาราง <table width="pixels/%"> .... </table> กำหนดความกว้างของตาราง
ตัวอย่าง
<html><head> <title> Table Tags </title> </head> <body> <table> <tr> <th>หัวข้อ</th> <th>หัวข้อ</th> <th>หัวข้อ</th> </tr> <tr> <td>ข้อมูล</td> <td>ข้อมูล</td> <td>ข้อมูล</td> </tr> <tr> <td>ข้อมูล</td> <td>ข้อมูล</td> <td>ข้อมูล</td> </tr> </table> </body></html>

การกำหนดข้อความกำกับตาราง (table CAPTION)
คำอธิบาย
ใช้แสดงคำอธิบาย หรือ ข้อความประกอบตารางไว้บนส่วนบนหรือส่วนล่างของตารางข้อมูล
รูปแบบ
<caption align=" top \| bottom \| left \| right "> กำหนดตำแหน่งของคำอธิบายตาราง
ตัวอย่าง
<html><head> <title> Table Tags </title> </head> <body> <table border> <caption align="bottom">ตารางรายรับรายจ่ายประจำเดือน</caption> <tr> <th>เดือน</th> <th>มกราคม</th> <th>กุมภาพันธ์</th> <th>มีนาคม</th> </tr> <tr> <td>รายรับ</td> <td>25000</td> <td>23000</td> <td>24500</td> </tr> <tr> <td>รายจ่าย</td> <td>21000</td> <td>22500</td> <td>23100</td> </tr> </table> </body></html>

การสร้างแถวของตาราง (Table Row)
คำอธิบาย
เป็นการสร้าง แถวเซล์ข้อมูล เพื่อไว้สร้าง เซล์ข้อมูล และ การสร้างหัวเรื่องของตาราง
รูปแบบ
<tr align=" left \| center \| right "> .... </tr> กำหนดตำแหน่งของข้อความ <tr bgcolor="color"> .... </tr> กำหนดสีของพื้นหลังในตาราง
ตัวอย่าง
<html><head> <title> Table Tags </title> </head> <body> <table border> <tr align="center" bgcolor="green"> <th>สินค้า</th> <th>โทรทัศน์</th> <th>วิทยุ</th> <th>ตู้เย็น</th> </tr> <tr align="right" bgcolor="orange"> <td>ราคา</td> <td>7000</td> <td>1750</td> <td>9500</td> </tr> </table> </body></html>

การสร้างหัวเรื่องของตาราง (Table Heading)
คำอธิบาย
เป็นการสร้างเซลล์ หัวตาราง ซึ่งทำหน้าที่กำกับเซล์ข้อมูลในแนวคอลัมน์ที่กำหนด
รูปแบบ
<th align="left \| right \| center \| justify \| char"> .... </th> กำหนดตำแหน่งของข้อความในตารางตามแนวนอน <th valign="top \| middle \| bottom \| baseline"> .... </th> กำหนดตำแหน่งของข้อความในตารางตามแนวตั้ง <th bgcolor="color"> .... </th> กำหนดสีพื้นของตาราง <th height="pixels \| %"> .... </th> กำหนดความสูงของตาราง <th width="pixels \| %"> .... </th> กำหนดความกว้างของตาราง <th rowspan="number"> .... </th> กำหนดการรวมช่องเซลล์ในแนวตั้ง <th colspan="number"> .... </th> กำหนดการรวมช่องเซลล์ในแนวนอน
การสร้างเซลล์ข้อมูล (Table Data)
คำอธิบาย
ใช้สร้างเซลล์ข้อมูลเพื่อใช้ในการแสดงข้อมูลรายละเอียดต่างๆของเอกสาร
รูปแบบ
<td align="left \| right \| center \| justify \| char"> .... </td> กำหนดตำแหน่งของข้อความในตารางตามแนวนอน <th valign="top \| middle \| bottom \| baseline"> .... </td> กำหนดตำแหน่งของข้อความในตารางตามแนวตั้ง <td bgcolor="color"> .... </td> กำหนดสีพื้นของตาราง <td height="pixels \| %"> .... </td> กำหนดความสูงของตาราง <td width="pixels \| %"> .... </td> กำหนดความกว้างของตาราง <td rowspan="number"> .... </td> กำหนดการรวมช่องเซลล์ในแนวตั้ง <td colspan="number"> .... </td> กำหนดการรวมช่องเซลล์ในแนวนอน
ตัวอย่าง
<html><head> <title> Table Tags </title> </head> <body> <table border> <tr> <th colspan="2" bgcolor="#ffffe0">CPU</th> <th colspan="2">RAM</th> </tr> <tr> <td rowspan="2">Mhz</td> <td>450</td> <td>500</td> <td>550</td> </tr> <tr> <td>600</td> <td>700</td> <td>750</td> </tr> </table> </body></html>

การใส่รูปภาพ

การใส่รูปภาพลงไปในเอกสาร (IMaGe)
คำอธิบาย
ใช้ในการแสดงรูปภาพกราฟฟิก โดยจะต้องเป็นไฟล์กราฟฟิกที่เว็บบราวเซอร์รู้จัก เช่น GIF,JPEG,XPM,XBM เป็นต้น
รูปแบบ
<img src="url">
ตัวอย่าง
<html><head> <title> Image Tags</title> </head> <body> <img src="love.jpg"> </body></html>


รูปแบบ (ต่อ)
<img align="top \| middle \| bottom \| left \| right"> การกำหนดตำแหน่งให้กับรูปภาพ <img width="pixels"> การกำหนดความกว้างรูปภาพ <img height="pixels"> การกำหนดความสูงรูปภาพ <img border="number"> การกำหนดความสูงรูปภาพ <img hspace="number"> การกำหนดช่องว่างแนวนอนระหว่างรูปภาพกับข้อความ <img vspace="number"> การกำหนดช่องว่างแนวตั้งระหว่างรูปภาพกับข้อความ
ตัวอย่าง
<html><head> <title> Image Tags</title> </head> <body> <img src="love.jpg" width="100" height="80"> <p><p> <img src="love.jpg" align="top" hspace="2">TEST IMAGE TAG </body></html>

การทำพื้นฉากหลัง (body BACKGROUND)
คำอธิบาย
การนำรูปภาพนำมาทำเป็น วอลเปเปอร์
รูปแบบ
<body background="url">
ตัวอย่าง
<html><head> <title> Image Tags</title> </head> <body background="love.jpg"> <h1>TEST Wallpaper</h1> </body></html>

การเชื่อมโยงเว็บเพจ

การสร้างจุดเชื่อมโยง (A)
คำอธิบาย
ทำหน้าที่กำหนดข้อความหรือภาพกราฟฟิกที่อยู่ภายในให้ทำหน้าที่เป็นจุดเชื่อมโยงไปยังเว็บเพจอื่น หรือข้อมูลชนิดต่างๆ
รูปแบบ
<a href="url"> .... </a>
ตัวอย่าง
<html><head> <title> Image Tags</title> </head> <body> <a href="page06c.html">Click Here</a><br> <a href="love.jpg"><img src="love.jpg"></a> </body></html>

การกำหนดสีให้จุดเชื่อมโยง
คำอธิบาย
เป็นการกำหนดสีอักษรที่จุดเชื่อมโยง โดย link คือสีจุดเชื่อมโยงที่ยังไม่ได้ทำการคลิ๊กเป้าหมาย vlink คือสีจุดเชื่อมโยงที่ไปยังเป้าหมายแล้ว alink คือสีจุดเชื่อมโยงที่ไปอยู่ขณะนั้น นอกจากนี้ยังมี text สีตัวหนังสือธรรมดา bgcolor คือสีพื้นหลังของเอกสาร
รูปแบบ
<body tag="color">
ตัวอย่าง
<html><head> <title> Image Tags</title> </head> <body bgcolor="black" text="write" link="yellow" vlink="lime" alink="aqua"> <a href="page06c.html">Click Here</a> <a href="page06d.html">Click Here</a> </body></html>

ที่มา : http://www.yupparaj.ac.th/CAI/create_web/htm1.htm

วันพุธที่ 25 พฤศจิกายน พ.ศ. 2558

IP Address

วันพฤหัสบดีที่ 5 พฤศจิกายน พ.ศ. 2558