Más contenido relacionado
La actualidad más candente (17)
Similar a การสร้างเว็บด้วยภาษา Html อย่างง่าย (20)
Más de รัชนีพร ภูแสงสี (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>
