การส้างเว็บเพจ
การสร้างเว็บเพจด้วยภาษา HTML
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 ประเภท คือ
- แท็กเดี่ยว คือ คำสั่งที่มีคำสั่งเพียงอย่างเดียว ซึ่งสามารถใช้และสิ้นสุดคำสั่งได้ด้วยตัวของมันเอง เช่น
ข้อความ.... <br>
<hr>
<! - ข้อความ - >
- แท็กคู่ คือ คำสั่งที่ต้องมีส่วนเริ่มต้นและส่วนจุดจบของคำสั่งนั้นๆ โดยแท็กที่เป็นส่วนจบนั้นจะมีเครื่องหมาย slash / ติดเอาไว้ เช่น
<html> ส่วนของเนื้อหา ..... </html>
<center> ข้อความ..... </center>
<p> ข้อความ.... </p>
*** ถ้าหากมีการใช้แท็กคู่หลายๆ คำสั่ง เช่น คำสั่งตัวขีดเส้นใต้ <U> .... </U> และตามด้วย คำสั่ง ตัวเอียง <I>....</I> จะต้องปิดคำสั่งตัวเอียงก่อน แล้วจึงจะมาปิดคำสั่งตัวหนา***
<I> U> ข้อความ.... </U> </I>
การกำหนดโครงสร้างหลัก
|
การจัดวางที่เห็นเป็นการจัดวางแบบมาตรฐาน ซึ่งประกอบไปด้วย 4 ส่วน ซึ่งเวลาเริ่มเขียนภาษาHTML ควรเริ่มจากตรงนี้ก่อนทุกครั้ง
ตัวอย่าง
|
|
|
การจัดรูปแบบเอกสาร
|
การกำหนดหัวข้อ (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> |
|
ตัวอย่าง |
|
<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> |
|
ตัวอย่าง |
|
<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> กำหนดแบบอักษร |
|
ตัวอย่าง |
|
<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> ข้อความส่วนหัว |
|
ตัวอย่าง |
|
<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> ข้อความส่วนหัว |
|
ตัวอย่าง |
|
<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> ข้อความส่วนหัว |
|
ตัวอย่าง |
|
<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 start="number"> ข้อความส่วนหัว |
|
ตัวอย่าง |
|
<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 start="5"> <li>Item Four<li>Item Five <ol> <li>Item Six<li>Item Seven </ol></ol> </body> </html>
|
|
|
|
|
|
การแสดงรายการโดยกำหนดหัวข้อ (Definition List) |
|
คำอธิบาย |
|
ใช้แสดงรายการแบบให้คำนิยาม โดยแบ่งองค์ประกอบเป็น 2 ส่วน ส่วนที่อยู่บนคือหัวข้อ (Definition Term) โดยใช้คำสั่ง <DT> ส่วนที่อยู่ล่างคือ คำอธิบาย (Definition Description) ใช้คำสั่ง <DD> โดยหากจะให้ ส่วนหัวข้ออยู่ทางซ้าย แล้วคำอธิบายอยู่ทางขวาก็ให้ใช้ attribute COMPACT ในกรณีที่รายการเป็นข้อความสั้นๆ |
|
รูปแบบ |
|
<dl> ข้อความส่วนหัว |
|
ตัวอย่าง |
|
<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> |
|
ตัวอย่าง |
|
<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> กำหนดตำแหน่งของข้อความ |
|
ตัวอย่าง |
|
<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> กำหนดตำแหน่งของข้อความในตารางตามแนวนอน |
|
การสร้างเซลล์ข้อมูล (Table Data) |
|
คำอธิบาย |
|
ใช้สร้างเซลล์ข้อมูลเพื่อใช้ในการแสดงข้อมูลรายละเอียดต่างๆของเอกสาร |
|
รูปแบบ |
|
<td align="left | right | center | justify | char"> .... </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"> การกำหนดตำแหน่งให้กับรูปภาพ |
|
ตัวอย่าง |
|
<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> |
|
|
|
|
ความเห็น (0)
ไม่มีความเห็น