Webpage by html

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

การกาหนดโครงสร้างหลัก
การจัดวางที่เห็นเป็นการจัดวางแบบมาตรฐาน ซึ่งประกอบไปด้วย 4 ส่วน ซึ่ง
เวลาเริ่มเขียนภาษาHTML ควรเริ่มจากตรงนี้ก่อนทุกครั้ง
 คาสั่งหลัก <HTML> .... </HTML> เป็นคาสั่งที่ไว้กาหนดจุดเริ่มต้นและจุดจบของเอกสาร
 คาสั่งหลัก <HEAD> .... </HEAD> เป็นคาสั่งที่ทาหน้าที่กาหนดส่วนหัวเรื่อง โดยภายในคาสั่งนี้จะประกอบไปด้วย
o คาสั่งหลัก <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>
</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> ข้อความย่อย
</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> ข้อความส่วนหัว
</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> ข้อความส่วนหัว
</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"> ข้อความส่วนหัว
</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> คาอธิบาย
</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>
</tr>
<tr>
<td>ข้อมูล</td>
</tr>
<tr>
</tr>
</table>

</body>
</html>
การกาหนดข้อความกากับตาราง (table CAPTION)
ใช้แสดงคาอธิบาย หรือ ข้อความประกอบตารางไว้บนส่วนบนหรือส่วนล่างของตารางข้อมูล
รูปแบบ
<caption align=" top | bottom | left | right "> กาหนดตาแหน่งของคาอธิบายตาราง
<html>
<head>
</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>
</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>
</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>

</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>
</head>
<body background="love.jpg">
<h1>TEST Wallpaper</h1>
</body>
</html>
การสร้างจุดเชื่อมโยง (A)
ทาหน้าที่กาหนดข้อความหรือภาพกราฟฟิกที่อยู่ภายในให้ทาหน้าที่เป็นจุดเชื่อมโยงไปยังเว็บเพจอื่น หรือข้อมูลชนิดต่างๆ
รูปแบบ
<a href="url"> .... </a>

<html>
<head>
</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>
</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/

Webpage by html

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Similar to Webpage by html

Similar to Webpage by html (20)

Webpage by html