More Related Content Similar to การสร้างเว็บด้วยภาษา Html อย่างง่าย
Similar to การสร้างเว็บด้วยภาษา Html อย่างง่าย (20) More from รัชนีพร ภูแสงสี
More from รัชนีพร ภูแสงสี (8) การสร้างเว็บด้วยภาษา Html อย่างง่าย2. ความหมายของภาษา HTML
HTML HTML ย่อมาจากคาว่า ( Hyper Text Markup Language ) คือ
ภาษาคอมพิวเตอร์ระดับสูงภาษาหนึ่งซึ่งถูกออกแบบมาเพื่อใช้ในการ
แสดงผลข้อมูลบนระบบอินเตอร์เน็ท โปรแกรมที่ใช้เขียนโปรแกรม
ภาษา HTML คือ โปรแกรมประเภท Text Editor เช่น Notepad ,
Editplus โดยใช้เครื่องหมาย < > เป็นตัวกาหนดหลัก ( เราเรียกว่า
tag) โดยส่ว นมากจะใช้ค าสั่ง 2 แบบ คือ " เปิ ด " กับ " ปิด " เช่ น
<BODY> หมายถึง เปิดส่วนเนื้อหา และ </BODY> คือปิด(จบ)ส่วน
เนื้อหา และมีรูปแบบโครงสร้างทั่วไป คือ
3. โครงสร้างของเอกสาร HTML
<HTML>
<HEAD>
ส่วนหัว <TITLE> ชื่อเว็บไซต์(เป็นภาษาอังกฤษ)</TITLE>
</HEAD>
<BODY>
รายละเอียดต่างๆ ที่ต้องการให้แสดงบนเว็บไซต์ของเรา
ส่วนเนื้อหา
ซึ่งประกอบด้วย ข้อความ รูปภาพ เสียง ตาราง วีดีโอ ฯลฯ
</BODY>
</HTML>
4. การกาหนดสีพื้นหลังของเว็บไซต์
ผลลัพธ์
<HTML>
<HEAD>
<TITLE>ชื่อเว็บไซต์</TITLE>
</HEAD>
<BODY BGCOLOR="yellow">
การกาหนดสีพื้นหลังโดยการกาหนดสีเป็นสี
เหลือง
</BODY>
</HTML>
5. การกาหนดรูปภาพพื้นหลังของเว็บไซต์
ผลลัพธ์
<HTML>
<HEAD>
<TITLE>ชื่อเว็บไซต์</TITLE>
</HEAD>
<BODY BACKGROUND="bkg287[1].jpg">
การกาหนดรูปภาพพื้นหลัง
</BODY>
</HTML>
หมายเหตุ ชื่อ file รูปภาพจะต้องอยู่ใน folder
เดียวกันกับ ชื่อ file ที่เป็นนามสกุล.html
6. การกาหนดขนาดรูปแบบตัวอักษร (หัวเรื่อง)
ผลลัพธ์
<HTML>
<HEAD>
<TITLE>ชื่อเว็บไซต์</TITLE>
</HEAD>
<BODY BACKGROUND="bkg287[1].jpg">
<h6>หัวเรื่องเล็กสุด</h6><br>
<h5>หัวเรื่อง</h5><br>
<h4>หัวเรื่อง</h4><br>
<h3>หัวเรื่อง</h3><br>
<h2>หัวเรื่อง</h2><br>
<h1>หัวเรื่องใหญ่สุด</h1><br>
</BODY>
</HTML>
7. การกาหนดขนาดรูปแบบตัวอักษร
<HTML> ผลลัพธ์
<HEAD>
<TITLE>ชื่อเว็บไซต์</TITLE>
</HEAD>
<BODY BACKGROUND="bkg287[1].jpg">
<font size=1>รูปแบบตัวอักษรขนาดเล็กสุด</font><br>
<font size=2>รูปแบบตัวอักษรขนาด</font> <br>
<font size=3>รูปแบบตัวอักษรขนาด</font> <br>
<font size=4>รูปแบบตัวอักษรขนาด</font> <br>
<font size=5>รูปแบบตัวอักษรขนาด</font> <br>
<font size=6>รูปแบบตัวอักษรขนาด</font> <br>
<font size=7>รูปแบบตัวอักษรขนาดใหญ่สุด</font> <br>
</BODY>
</HTML>
8. การกาหนดรูปแบบตัวอักษรสี
ผลลัพธ์
<HTML>
<HEAD>
<TITLE>ชื่อเว็บไซต์</TITLE>
</HEAD>
<BODY BACKGROUND="bkg287[1].jpg">
<font color=“ff0000”>สีตัวอักษร</font><br>
หรือ
<font color=“yellow>ตัวอักษรเหลือง</font><br>
</BODY>
</HTML>
9. การกาหนดรูปแบบตัวอักษร
ผลลัพธ์
<HTML>
<HEAD>
<TITLE>ชื่อเว็บไซต์</TITLE>
</HEAD>
<BODY BACKGROUND="bkg287[1].jpg">
<font face=“JS Wansikaas”>แบบอักษร</font><br>
<font face=“TH sarabunPSK”>แบบอักษร</font><br>
</BODY>
</HTML>
10. การกาหนดรูปแบบตัวอักษรลักษณะพิเศษ
ผลลัพธ์
<HTML>
<HEAD>
<TITLE>ชื่อเว็บไซต์</TITLE>
</HEAD>
<BODY BACKGROUND="bkg287[1].jpg">
<b>รูปแบบตัวอักษรตัวหนา</b><br>
<i>รูปแบบตัวอักษรตัวเอียง</i><br>
<u>รูปแบบตัวอักษรตัวขีดเส้นใต้</u><br>
<s>รูปแบบตัวอักษรตัวขีดทับ</s><br>
</BODY>
</HTML>
11. การกาหนดตาแหน่งตัวอักษร
ผลลัพธ์
<HTML>
<HEAD>
<TITLE>ชื่อเว็บไซต์</TITLE>
</HEAD>
<BODY BACKGROUND="bkg287[1].jpg">
<p align=center>ตาแหน่งตรงกลาง</p><br>
<p align=left>ตาแหน่งซ้าย</p><br>
<p align=right>ตาแหน่งขวา</p><br>
<center>ตาแหน่งตรงกลาง</center><br>
</BODY>
</HTML>
13. การทาข้อความหรือตัวหนังสือวิ่ง
ผลลัพธ์
<HTML>
<HEAD>
<TITLE>ชื่อเว็บไซต์</TITLE>
</HEAD>
<BODY BACKGROUND="bkg287[1].jpg">
<Marquee>ยินดีต้อนรับเข้าสู่เว็บไซต์ <Marquee><br>
</BODY>
</HTML>
14. การแสดงผลแบบลิสต์รายการ (List)
<HTML>
<HEAD>
ผลลัพธ์
<TITLE>ชื่อเว็บไซต์</TITLE>
</HEAD>
<BODY BACKGROUND="bkg287[1].jpg">
<ul>
สร้างเว็บด้วย HTMLbr>
<li>ความรู้เบื้องต้นเกี่ยวกับ HTML
<li>การสร้างตาราง
<li>การแทรกรูปภาพ
<li>การกาหนดตัวอักษร
</ul>
</BODY>
</HTML>
15. การแสดงผลแบบลิสต์รายการแบบมีหัวข้อ (List)
<HTML>
ผลลัพธ์
<HEAD>
<TITLE>ชื่อเว็บไซต์</TITLE>
</HEAD>
<BODY BACKGROUND="bkg287[1].jpg">
<OL>
สร้างเว็บด้วย HTML<br>
<li>ความรู้เบื้องต้นเกี่ยวกับ HTML
<li>การสร้างตาราง
<li>การแทรกรูปภาพ
<li>การกาหนดตัวอักษร
</OL>
</BODY>
</HTML>
16. การใส่รูปภาพลงในเว็บเพจ
<HTML>
<HEAD> ผลลัพธ์
<TITLE>ชื่อเว็บไซต์</TITLE>
</HEAD>
<BODY
BACKGROUND="bkg287[1].jpg">
<img src="002[1].jpg">
<img src="049[1].jpg">
</BODY>
</HTML>
หมายเหตุ ชื่อ file รูปภาพจะต้องอยู่ใน folder
เดียวกันกับ ชื่อ file ที่เป็นนามสกุล.html
18. การใส่เส้นกรองให้กับรูปภาพลงในเว็บเพจ
<HTML>
<HEAD>
<TITLE>ชื่อเว็บไซต์</TITLE> ผลลัพธ์
</HEAD>
<BODY
BACKGROUND="bkg287[1].jpg">
<img src="002[1].jpg" width=200
height=150 border=3 >
<img src="049[1].jpg" width= 200
height=150 border=3>
</BODY>
</HTML>
23. การเชื่อมโยงข้อมูลไปเว็บเพจ
ผลลัพธ์
<HTML>
<HEAD><TITLE>ชื่อเว็บไซต์</TITLE>
</HEAD>
<BODY BACKGROUND="bkg287[1].jpg">
<a href =“index.html"> กลับหน้าเมนูหลัก</a>
</BODY>
</HTML>
25. การเชื่อมโยงข้อมูลไปยังเว็บไซต์อื่น
<HTML>
<HEAD><TITLE>ชื่อเว็บไซต์</TITLE> </HEAD>
<BODY BACKGROUND="bkg287[1].jpg">
<a href = "http://kruradchaneeporn.wordpress.com">
โลกกว้างแห่งการเรียนรู้</a>
</BODY> </HTML>
ผลลัพธ์
26. การเชื่อมโยงข้อมูลไปยัง E-Mail
<HTML>
<HEAD><TITLE>ชื่อเว็บไซต์</TITLE> </HEAD>
<BODY BACKGROUND="bkg287[1].jpg">
<a href = “r.phusangsi@gmail.com">e-mail</a>
</BODY> </HTML>
ผลลัพธ์
27. การเชื่อมโยงข้อมูลโดยใช้รูปภาพ
<HTML>
<HEAD><TITLE>ชื่อเว็บไซต์</TITLE> </HEAD>
<BODY BACKGROUND="bkg287[1].jpg">
<a href = "index.html" <img src="002[1].jpg"
width=200 height=150></a>
</BODY> </HTML>