ภาษา HTML เป็นภาษาที่มีลักษณะของโค้ด กล่าวคือ จะเป็นไฟล์ที่เก็บข้อมูลที่เป็นตัวอักษรในมาตรฐานของรหัสแอสกี (ASCII Code) โดยเขียนอยู่ในรูปแบบของเอกสารข้อความ จึงสามารถกำหนดรูปแบบและโครงสร้างได้ง่าย
การสร้างเว็บเพจ
เราสามารถสร้างเว็บเพจได้ 2 ทาง คือ- TextEditor โดยเราต้องรู้คำสั่งของภาษา HTML แล้วพิมพ์โปรแกรมเข้าไปทางTextEditor เช่น Notepad เป็นต้น
- ตัวช่วยสร้าง โดยใช้โปรแกรมที่มีความสามารถในการสร้างเว็บเพจโดยเราไม่จำเป็นต้องรู้ภาษา HTML เพราะโปรแกรมเหล่านี้จะทำการแปลงให้เราอัตโนมัติ
ขั้นตอนในการสร้างเว็บเพจ
- เปิดโปรแกรม TextEditor แล้วทำการพิมพ์คำสั่ง HTML แล้วเซฟเป็นไฟล์นามสกุล .htm หรือ .html
- เปิดโปรแกรม WebBrowser เพื่อใช้ในการดูผลลัพธ์ที่ได้จากการเขียนภาษา HTML จากที่ได้เขียนจาก TextEditor
โครงสร้างภาษา HTML
การเขียนภาษา HTML นั้นมีส่วนประกอบหลักอยู่ 2 ส่วน คือ ส่วนที่เป็นเนื้อหา และส่วนที่เป็นคำสั่ง ส่วนที่เป็นคำสั่งนั้นจะอยู่ในรูปของ Tag ซึ่งจะเขียนอยู่ในเครื่องหมาย มากกว่า และ น้อยกว่า < > แต่ละ Tag มีหน้าที่ที่แตกต่างกันออกไป ซึ่งจะกล่าวในบทต่อไปTag แบ่งออกเป็น 2 ประเภท คือ
- แท็กเดี่ยว คือ คำสั่งที่มีคำสั่งเพียงอย่างเดียว ซึ่งสามารถใช้และสิ้นสุดคำสั่งได้ด้วยตัวของมันเอง เช่น
ข้อความ.... <br>
<hr>
<! - ข้อความ - >
- แท็กคู่ คือ คำสั่งที่ต้องมีส่วนเริ่มต้นและส่วนจุดจบของคำสั่งนั้นๆ โดยแท็กที่เป็นส่วนจบนั้นจะมีเครื่องหมาย slash / ติดเอาไว้ เช่น
<html> ส่วนของเนื้อหา ..... </html>
<center> ข้อความ..... </center>
<p> ข้อความ.... </p>
*** ถ้าหากมีการใช้แท็กคู่หลายๆ คำสั่ง เช่น คำสั่งตัวขีดเส้นใต้ <U> .... </U> และตามด้วย คำสั่ง ตัวเอียง <I>....</I> จะต้องปิดคำสั่งตัวเอียงก่อน แล้วจึงจะมาปิดคำสั่งตัวหนา***
<I> U> ข้อความ.... </U> </I>
การจัดวางที่เห็นเป็นการจัดวางแบบมาตรฐาน ซึ่งประกอบไปด้วย 4 ส่วน ซึ่งเวลาเริ่มเขียนภาษา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> |
| การกำหนดสีให้จุดเชื่อมโยง |
|---|
| คำอธิบาย |
| เป็นการกำหนดสีอักษรที่จุดเชื่อมโยง โดย นอกจากนี้ยังมี |
| รูปแบบ |
| <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> |
ไม่มีความคิดเห็น:
แสดงความคิดเห็น