การสร้างเว็บด้วยภาษา html อย่างง่าย
TRANSCRIPT
การสร�างเว็บด้�ว็ยภาษา HTML อย�างง�าย ๆ
จั�ด้ทำ�าโด้ย นางสาว็ร�ชน�พร ภ�แสงส�
คร� โรงเร�ยนกาฬส นธุ์"#พ ทำยา สรรพ#
ความหมายของภาษา HTML
HTML HTML ย อมาจากค�าว า ( Hyper Text Markup Language ) ค�อภาษาคอมพิ�วเตอร์�ร์ะดั�บสู�งภาษาหนึ่� งซึ่� งถู�กออกแบบมาเพิ� อใช้&ในึ่การ์แสูดังผลข&อม�ลบนึ่ร์ะบบอ�นึ่เตอร์�เนึ่)ท โปร์แกร์มท- ใช้&เข-ยนึ่โปร์แกร์มภาษา HTML ค�อ โปร์แกร์มปร์ะเภท Text Editor เช้ นึ่ Notepad , Editplus โดัยใช้&เคร์� องหมาย < > เป.นึ่ต�วก�าหนึ่ดัหล�ก ( เร์าเร์-ยกว า tag) โดัยสู วนึ่มากจะใช้&ค�าสู� ง 2 แบบ ค�อ " เป/ดั " ก�บ " ป/ดั " เช้ นึ่ <BODY> หมายถู�ง เป/ดัสู วนึ่เนึ่�0อหา และ </BODY> ค�อป/ดั(จบ)สู วนึ่เนึ่�0อหา และม-ร์�ปแบบโคร์งสูร์&างท� วไป ค�อ
โครงสร�างของเอกสาร HTML
<HTML> <HEAD> <TITLE> ช้� อเว)บไซึ่ต�(เป.นึ่ภาษาอ�งกฤษ)</TITLE> </HEAD> <BODY>
ร์ายละเอ-ยดัต างๆ ท- ต&องการ์ให&แสูดังบนึ่เว)บไซึ่ต�ของเร์า ซึ่� งปร์ะกอบดั&วย ข&อความ ร์�ปภาพิ เสู-ยง ตาร์าง
ว-ดั-โอ ฯลฯ </BODY></HTML>
สู วนึ่เนึ่�0อหา
สู วนึ่ห�ว
การก�าหนด้ส�พ&'นหลั�งของเว็บไซต์#
<HTML> <HEAD> <TITLE>ช้� อเว)บไซึ่ต�</TITLE> </HEAD> <BODY BGCOLOR="yellow"> การ์ก�าหนึ่ดัสู-พิ�0นึ่หล�งโดัยการ์
ก�าหนึ่ดัสู-เป.นึ่สู-เหล�อง </BODY></HTML>
ผลัลั�พธุ์#
<HTML> <HEAD> <TITLE>ช้� อเว)บไซึ่ต�</TITLE> </HEAD> <BODY BACKGROUND="bkg287[1].jpg"> การ์ก�าหนึ่ดัร์�ปภาพิพิ�0นึ่หล�ง </BODY></HTML>
การก�าหนด้ร�ปภาพพ&'นหลั�งของเว็บไซต์# ผลัลั�พธุ์#
หมายเหต์" ช&/อ file ร�ปภาพจัะต์�องอย��ใน folder เด้�ยว็ก�นก�บ ช&/อ file ทำ�/เป2นนามสก"ลั.html
การก�าหนด้ขนาด้ร�ปแบบต์�ว็ อ�กษร (ห�ว็เร&/อง)
<HTML> <HEAD> <TITLE>ช้� อเว)บไซึ่ต�</TITLE> </HEAD> <BODY BACKGROUND="bkg287[1].jpg"> <h6>ห�วเร์� องเล)กสู6ดั</h6><br> <h5>ห�วเร์� อง</h5><br> <h4>ห�วเร์� อง</h4><br> <h3>ห�วเร์� อง</h3><br> <h2>ห�วเร์� อง</h2><br> <h1>ห�วเร์� องใหญ่ สู6ดั</h1><br></BODY></HTML>
ผลัลั�พธุ์#
<HTML> <HEAD> <TITLE>ช้� อเว)บไซึ่ต�</TITLE> </HEAD> <BODY BACKGROUND="bkg287[1].jpg"> <font size=1>ร์�ปแบบต�วอ�กษร์ขนึ่าดัเล)กสู6ดั</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>ร์�ปแบบต�วอ�กษร์ขนึ่าดัใหญ่ สู6ดั</font> <br> </BODY></HTML>
การก�าหนด้ขนาด้ร�ปแบบต์�ว็อ�กษร
ผลัลั�พธุ์#
การก�าหนด้ร�ปแบบต์�ว็อ�กษรส�
<HTML> <HEAD> <TITLE>ช้� อเว)บไซึ่ต�</TITLE> </HEAD> <BODY BACKGROUND="bkg287[1].jpg"> <font color=“ff0000”>สู-ต�วอ�กษร์</font><br> หร์�อ <font color=“yellow>ต�วอ�กษร์เหล�อง</font><br></BODY></HTML>
ผลัลั�พธุ์#
การก�าหนด้ร�ปแบบต์�ว็อ�กษร
<HTML> <HEAD> <TITLE>ช้� อเว)บไซึ่ต�</TITLE>
</HEAD> <BODY BACKGROUND="bkg287[1].jpg"> <font face=“JS Wansikaas”>แบบอ�กษร์</font><br> <font face=“TH sarabunPSK”>แบบอ�กษร์</font><br></BODY></HTML>
ผลัลั�พธุ์#
การก�าหนด้ร�ปแบบต์�ว็อ�กษรลั�กษณะพ เศษ
<HTML> <HEAD> <TITLE>ช้� อเว)บไซึ่ต�</TITLE> </HEAD> <BODY BACKGROUND="bkg287[1].jpg"> <b>ร์�ปแบบต�วอ�กษร์ต�วหนึ่า</b><br> <i>ร์�ปแบบต�วอ�กษร์ต�วเอ-ยง</i><br><u>ร์�ปแบบต�วอ�กษร์ต�วข-ดัเสู&นึ่ใต&</u><br><s>ร์�ปแบบต�วอ�กษร์ต�วข-ดัท�บ</s><br></BODY></HTML>
ผลัลั�พธุ์#
การก�าหนด้ต์�าแหน�งต์�ว็อ�กษร
<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>
ผลัลั�พธุ์#
การข5'นบรรทำ�ด้ใหม� การย�อหน�าแลัะการข�ด้เส�นข�'น
<HTML> <HEAD> <TITLE>ช้� อเว)บไซึ่ต�</TITLE> </HEAD> <BODY BACKGROUND="bkg287[1].jpg"> ค�าสู� งข�0นึ่บร์ร์ท�ดัใหม <br> <dd>การ์ย อหนึ่&า<br> ข-ดัเสู&นึ่ข�0นึ่<hr></BODY></HTML>
ผลัลั�พธุ์#
การทำ�าข�อคว็ามหร&อต์�ว็หน�งส&อว็ /ง
<HTML> <HEAD> <TITLE>ช้� อเว)บไซึ่ต�</TITLE>
</HEAD> <BODY BACKGROUND="bkg287[1].jpg"> <Marquee>ย�นึ่ดั-ต&อนึ่ร์�บเข&าสู� เว)บไซึ่ต� <Marquee><br></BODY></HTML>
ผลัลั�พธุ์#
การแสด้งผลัแบบลั สต์#รายการ(List)
<HTML> <HEAD> <TITLE>ช้� อเว)บไซึ่ต�</TITLE>
</HEAD> <BODY BACKGROUND="bkg287[1].jpg"> <ul> สูร์&างเว)บดั&วย HTMLbr> <li>ความร์� &เบ�0องต&นึ่เก- ยวก�บ HTML <li>การ์สูร์&างตาร์าง <li>การ์แทร์กร์�ปภาพิ <li>การ์ก�าหนึ่ดัต�วอ�กษร์ </ul></BODY></HTML>
ผลัลั�พธุ์#
การแสด้งผลัแบบลั สต์#รายการ แบบม�ห�ว็ข�อ (List)
<HTML> <HEAD> <TITLE>ช้� อเว)บไซึ่ต�</TITLE>
</HEAD> <BODY BACKGROUND="bkg287[1].jpg"> <OL> สูร์&างเว)บดั&วย HTML<br> <li>ความร์� &เบ�0องต&นึ่เก- ยวก�บ HTML <li>การ์สูร์&างตาร์าง <li>การ์แทร์กร์�ปภาพิ <li>การ์ก�าหนึ่ดัต�วอ�กษร์ </OL></BODY></HTML>
ผลัลั�พธุ์#
การใส�ร�ปภาพลังในเว็บเพจั<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 ทำ�/เป2นนามสก"ลั.html
ผลัลั�พธุ์#
การใส�ร�ปภาพลังในเว็บเพจัโด้ยการก�าหนด้ขนาด้ของร�ปภาพ
<HTML> <HEAD> <TITLE>ช้� อเว)บไซึ่ต�</TITLE> </HEAD> <BODY BACKGROUND="bkg287[1].jpg"> <img src="002[1].jpg" width=200 height=150> <img src="049[1].jpg" width= 200 height=150></BODY></HTML>
ผลัลั�พธุ์#
การใส�เส�นกรองให�ก�บร�ปภาพลังในเว็บเพจั
<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>
ผลัลั�พธุ์#
การสร�างต์ารางในเว็บเพจัด้�ว็ยภาษา HTML
<HTML> <HEAD><TITLE>ช้� อเว)บไซึ่ต�</TITLE> </HEAD> <BODY BACKGROUND="bkg287[1].jpg"> <table ><tr><td>ช้� อ-สูก6ล</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> <BODY BACKGROUND="bkg287[1].jpg"> <table border=1><tr><td>ช้� อ-สูก6ล</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> <BODY BACKGROUND="bkg287[1].jpg"> <table border=1 bordercolor = "red" ><tr><td>ช้� อ-สูก6ล</td><td>ท- อย� </td> <td>เบอร์�โทร์ศั�พิท�</td></tr> <tr><td>ร์�ช้นึ่-พิร์ ภ�แสูงสู-/td><td>123</td><td>043211827</td></tr> </table></BODY></HTML>
ผลัลั�พธุ์#
การก�าหนด้ขนาด้ส�พ&'นหลั�งของต์าราง<HTML> <HEAD><TITLE>ช้� อเว)บไซึ่ต�</TITLE> </HEAD> <BODY BACKGROUND="bkg287[1].jpg"> <table border=1 bordercolor = "red" width=600 bgcolor= “blue" ><tr><td width=400>ช้� อ-สูก6ล</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><TITLE>ช้� อเว)บไซึ่ต�</TITLE> </HEAD> <BODY BACKGROUND="bkg287[1].jpg"> <a href =“index.html"> กล�บหนึ่&าเมนึ่�หล�ก</a></BODY> </HTML>
ผลัลั�พธุ์#
การเช&/อมโยงข�อม�ลัภายในหน�าเด้�ยว็ก�น<HTML> <HEAD><TITLE>ช้� อเว)บไซึ่ต�</TITLE> </HEAD> <BODY BACKGROUND="bkg287[1].jpg"> <a href = "#ว�ตถู6ปร์ะสูงค�">กล�บข&างบนึ่</a> …ข&อความ เนึ่�0อหาต างๆ .. <a name ="ช้� อว�ตถู6ปร์ะสูงค�">top</a></BODY> </HTML>
ผลัลั�พธุ์#
การเช&/อมโยงข�อม�ลัไปย�งเว็บไซต์#อ&/น<HTML> <HEAD><TITLE>ช้� อเว)บไซึ่ต�</TITLE> </HEAD> <BODY BACKGROUND="bkg287[1].jpg"> <a href = "http://kruradchaneeporn.wordpress.com">โลกกว&างแห งการ์เร์-ยนึ่ร์� &</a></BODY> </HTML>
ผลัลั�พธุ์#
การเช&/อมโยงข�อม�ลัไปย�ง E-Mail
<HTML> <HEAD><TITLE>ช้� อเว)บไซึ่ต�</TITLE> </HEAD> <BODY BACKGROUND="bkg287[1].jpg"> <a href = “[email protected]">e-mail</a></BODY> </HTML>
ผลัลั�พธุ์#
การเช&/อมโยงข�อม�ลัโด้ยใช�ร�ปภาพ
<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>
The end