�ݺ�ߣ

การสร้างเว็บด้วยภาษา HTML อย่างง่าย ๆ

จัดทาโดย
นางสาวรัชนีพร ภูแสงสี
ครู โรงเรียนกาฬสินธุ์พิทยาสรรพ์

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

HTML HTML ย่อมาจากคาว่า ( Hyper Text Markup Language ) คือ
ภาษาคอมพิวเตอร์ระดับสูงภาษาหนึ่งซึ่งถูกออกแบบมาเพื่อใช้ในการ
แสดงผลข้อมูลบนระบบอินเตอร์เน็ท โปรแกรมที่ใช้เขียนโปรแกรม
ภาษา HTML คือ โปรแกรมประเภท Text Editor เช่น Notepad ,
Editplus โดยใช้เครื่องหมาย < > เป็นตัวกาหนดหลัก ( เราเรียกว่า
tag) โดยส่ว นมากจะใช้ค าสั่ง 2 แบบ คือ " เปิ ด " กับ " ปิด " เช่ น
<BODY> หมายถึง เปิดส่วนเนื้อหา และ </BODY> คือปิด(จบ)ส่วน
เนื้อหา และมีรูปแบบโครงสร้างทั่วไป คือ

โครงสร้างของเอกสาร HTML
<HTML>
<HEAD>
ส่วนหัว <TITLE> ชื่อเว็บไซต์(เป็นภาษาอังกฤษ)</TITLE>
</HEAD>
<BODY>
รายละเอียดต่างๆ ที่ต้องการให้แสดงบนเว็บไซต์ของเรา
ส่วนเนื้อหา
ซึ่งประกอบด้วย ข้อความ รูปภาพ เสียง ตาราง วีดีโอ ฯลฯ
</BODY>
</HTML>

การกาห�Ȩ��สีพื้นหลังของเว็บไซต์
ผลลัพธ์
<HTML>
<HEAD>
<TITLE>ชื่อเว็บไซต์</TITLE>
</HEAD>
<BODY BGCOLOR="yellow">
การกาหนดสีพื้นหลังโดยการกาหนดสีเป็นสี
เหลือง
</BODY>
</HTML>

การกาห�Ȩ��รูปภาพพื้นหลังของเว็บไซต์
<HTML>
<HEAD>
</HEAD>
<BODY BACKGROUND="bkg287[1].jpg">
การกาหนดรูปภาพพื้นหลัง
</BODY>
</HTML>

หมายเหตุ ชื่อ file รูปภาพจะต้องอยู่ใน folder
เดียวกันกับ ชื่อ file ที่เป็นนามสกุล.html

การกาหนดขนาดรูปแบบตัวอักษร (หัวเรื่อง)
<HTML>
<HEAD>
</HEAD>
<h6>หัวเรื่องเล็กสุด</h6><br>
<h5>หัวเรื่อง</h5><br>
<h1>หัวเรื่องใหญ่สุด</h1><br>
</BODY>
</HTML>

การกาหนดขนาดรูปแบบตัวอักษร
<HTML> ผลลัพธ์
<HEAD>
</HEAD>
<font size=1>รูปแบบตัวอักษรขนาดเล็กสุด</font><br>
<font size=2>รูปแบบตัวอักษรขนาด</font> <br>
<font size=7>รูปแบบตัวอักษรขนาดใหญ่สุด</font> <br>
</BODY>
</HTML>

การกาห�Ȩ��รูปแบบตัวอักษรสี
<HTML>
<HEAD>
</HEAD>
<font color=“ff0000”>สีตัวอักษร</font><br>
หรือ
<font color=“yellow>ตัวอักษรเหลือง</font><br>
</BODY>
</HTML>

การกาห�Ȩ��รูปแบบตัวอักษร
<HTML>
<HEAD>
</HEAD>
<font face=“JS Wansikaas”>แบบอักษร</font><br>
<font face=“TH sarabunPSK”>แบบอักษร</font><br>
</BODY>
</HTML>

การกาห�Ȩ��รูปแบบตัวอักษรลักษณะพิเศษ
<HTML>
<HEAD>
</HEAD>
<b>รูปแบบตัวอักษรตัวหนา</b><br>
<i>รูปแบบตัวอักษรตัวเอียง</i><br>
<u>รูปแบบตัวอักษรตัวขีดเส้นใต้</u><br>
<s>รูปแบบตัวอักษรตัวขีดทับ</s><br>
</BODY>
</HTML>

การกาห�Ȩ��ตาแห�Ȩ��งตัวอักษร
<HTML>
<HEAD>
</HEAD>
<p align=center>ตาแหน่งตรงกลาง</p><br>
<p align=left>ตาแหน่งซ้าย</p><br>
<p align=right>ตาแหน่งขวา</p><br>
<center>ตาแหน่งตรงกลาง</center><br>
</BODY>
</HTML>

การขึ้นบรรทัดใหม่ การย่อหน้าและการขีดเส้นขั้น
<HTML>
<HEAD>
</HEAD>
คาสั่งขึ้นบรรทัดใหม่<br>
<dd>การย่อหน้า<br>
ขีดเส้นขั้น<hr>
</BODY>
</HTML>

การทาྺ้อความหรือตัวห�Ȩ��งสือวิ่ง
<HTML>
<HEAD>
</HEAD>
<Marquee>ยินดีต้อนรับเข้าสู่เว็บไซต์ <Marquee><br>
</BODY>
</HTML>

การแสดงผลแบบลิสต์รายการ (List)
<HTML>
<HEAD>
</HEAD>
<ul>
สร้างเว็บด้วย HTMLbr>
<li>ความรู้เบื้องต้นเกี่ยวกับ HTML
<li>การสร้างตาราง
<li>การแทรกรูปภาพ
<li>การกาหนดตัวอักษร
</ul>
</BODY>
</HTML>

การแสดงผลแบบลิสต์รายการแบบมีหัวข้อ (List)
<HTML>
<HEAD>
</HEAD>
<OL>
สร้างเว็บด้วย HTML<br>
<li>ความรู้เบื้องต้นเกี่ยวกับ HTML
<li>การสร้างตาราง
<li>การแทรกรูปภาพ
<li>การกาหนดตัวอักษร
</OL>
</BODY>
</HTML>

การใส่รูปภาพลงในเว็บเพจ
<HTML>
<HEAD> ผลลัพธ์
</HEAD>
<BODY
BACKGROUND="bkg287[1].jpg">
<img src=/slideshow/html-16746113/16746113//slideshow/html-16746113/16746113/"002[1].jpg">
<img src="049[1].jpg">
</BODY>
</HTML>
หมายเหตุ ชื่อ file รูปภาพจะต้องอยู่ใน folder
เดียวกันกับ ชื่อ file ที่เป็นนามสกุล.html

การใส่รูปภาพลงในเว็บเพจโดยการกาหนดขนาดของรูปภาพ
<HTML>
<HEAD> ผลลัพธ์
</HEAD>
<BODY
<img src=/slideshow/html-16746113/16746113/"002[1].jpg" width=200
height=150>
<img src="049[1].jpg" width= 200
height=150>
</BODY>
</HTML>

การใส่เส้นกรองให้กับรูปภาพลงในเว็บเพจ
<HTML>
<HEAD>
<TITLE>ชื่อเว็บไซต์</TITLE> ผลลัพธ์
</HEAD>
<BODY
<img src=/slideshow/html-16746113/16746113/"002[1].jpg" width=200
height=150 border=3 >
<img src="049[1].jpg" width= 200
height=150 border=3>
</BODY>
</HTML>

การสร้างตารางในเว็บเพจด้วยภาษา HTML
<HTML>
<HEAD><TITLE>ชื่อเว็บไซต์</TITLE>
</HEAD> ผลลัพธ์
<table >
<tr><td>ชื่อ-สกุล</td><td>ที่อยู่</td>
<td>เบอร์โทรศัพท์</td></tr> <tr><td>รัชนีพร
ภูแสงสี/td><td>123</td><td>043211827</td></tr>
</table>
</BODY>
</HTML>

การใส่กรอบตารางในเว็บเพจด้วยภาษา HTML
<HTML>
<HEAD><TITLE>ชื่อเว็บไซต์</TITLE> ผลลัพธ์
</HEAD>
<table border=1>
</table>
</BODY>
</HTML>

การใส่สีกรอบตารางในเว็บเพจด้วยภาษา HTML
<HTML>
<HEAD><TITLE>ชื่อเว็บไซต์</TITLE> ผลลัพธ์
</HEAD>
<table border=1 bordercolor = "red" >
</table>
</BODY>
</HTML>

การกาหนดขนาดสีพื้นหลังของตาราง
<HTML>
</HEAD>
<table border=1 bordercolor = "red" width=600
bgcolor= “blue" >
<tr><td width=400>ชื่อ-สกุล</td><td width=350>
ที่อยู่</td> <td width=250>เบอร์โทรศัพท์</td></tr>
<tr><td width=400>รัชนีพร ภูแสง</td><td
width=350>123</td><td width
=250>043211827</td></tr> </table>
</BODY> </HTML>

การเชื่อมโยงข้อมูลไป๶�ว็บเพจ
<HTML>
</HEAD>
<a href =“index.html"> กลับหน้าเมนูหลัก</a>
</BODY>
</HTML>

การเชื่อมโยงข้อมูลภายในหน้าเดียวกัน
<HTML>
</HEAD> ผลลัพธ์
<a href = "#วัตถุประสงค์">กลับข้างบน</a>
…ข้อความ เนื้อหาต่างๆ ..
<a name ="ชื่อวัตถุประสงค์">top</a>
</BODY>
</HTML>

การเชื่อมโยงข้อมูลไปยังเว็บไซต์อื่น
<HTML>
<HEAD><TITLE>ชื่อเว็บไซต์</TITLE> </HEAD>
<a href = "http://kruradchaneeporn.wordpress.com">
โลกกว้างแห่งการเรียนรู้</a>
</BODY> </HTML>


การเชื่อมโยงข้อมูลไปยัง E-Mail
<HTML>
<a href = “r.phusangsi@gmail.com">e-mail</a>
</BODY> </HTML>


การเชื่อมโยงข้อมูลโดยใช้รูปภาพ
<HTML>
<a href = "index.html" <img src=/slideshow/html-16746113/16746113/"002[1].jpg"
width=200 height=150></a>
</BODY> </HTML>

�ݺ�ߣ

การสร้างเว็บด้วยภาษา Html อย่างง่าย

Recommended

More Related Content

What's hot (17)

Similar to การสร้างเว็บด้วยภาษา Html อย่างง่าย (20)

More from รัชนีพร ภูแสงสี (8)

การสร้างเว็บด้วยภาษา Html อย่างง่าย