Page 1
อนเทอรเนตอนเทอรเนต ( Internet ) หมายถง
ระบบเครอขายคอมพวเตอรทเชอมโยงกนทวโลกจนเปนเครอขายคอมพวเตอรขนดใหญ ซงคำาวาอนเทอรเนตมาจากคำาวา “ Inter Connection Network”โดยเครองคอมพวเตอรทกเครองทเชอมตอเขากบระบบเครอขายอนเทอรเนตนนสามารถตดตอสอสารถงกนได โดยใชมาตรฐานในการรบสงขอมลหรอทเรยกวา Protocol
Page 3
ความสำาคญของอนเทอรเนตปจจบนระบบอนเทอรเนตนนม
ความสำาคญตอชวตประจำาวนมากมายหลายดาน ไมวาจะเปนดานการศกษา ดานธรกจ ดานการแพทยและอนๆ สามารถอธบายไดพอสงเขป เชนทางการแพทย ทางวศวกรรมศาสตร ทางดาราศาสตร และอนๆ ทนาสนใจนกศกษาคดวาระบบเทอรเนตเปรยบเสมอนอะไร
Page 4
ระบบชอโดเมนระบบชอโดเมน ( Domain Name
System ) หมายถงระบบของชอทใชเรยกแทนการเรยกหมายเลขอนเทอรเนตหรอหมายเลขไอพ ( IP Address ) เนองจากหมายเลขไอพมความยงยาก จงไดมการพฒนาเอาระบบชอทเปนตวอกษรมาใชแทนหมายเลขไอพ เพอใหการใชงานระบบเครอขายอนเทอรเนตเปนไปไดอยางสะดวกยงขน เชนเวบไซตของสถาบนเทคโนโลยราชมงคล มหมายเลขไอพคอ 202.44.130.164 ชงยากตอการจดจำา แตจะใชชอโดเมนเรยกแทนเปน www.rit.ac.th เพอใหงายตอการจดจำา
Page 6
ภาษาเอชทเอมแอลภาษาเอชทเอมแอล ( Hyper Text
Markup Language: HTML ) เปนภาษาคอมพวเตอรภาษาหนง เพอใชนำาเสนอเอกสารเผยแพรในระบบเครอขายอนเทอรเนตทเปนลกษณะเหมอนใยแมงมมทเชอมตอกนทวโลก www โครงสรางการเขยนภาษานนจะอาศยตวกำากบเรยกวา แทก ( Tag ) หรอปายระบการแสดงผล เปนตวควบคมการแสดงผลของขอความรปภาพ หรอวตถอนทแสดงผลผานทางโปรแกรมเบราวเซอร ( Browser )
Page 7
ปายระบการแสดงผลปายระบการแสดงผลหรอ แทก เปนลกษณะเฉาะ
ของภาษาเอชทเอมแอล ใชสำาหรบการระบรปแบบของาคำาสงหรอการลงรหสคำาสงของภาษาเอชทเอมแอล ซงจะอยระหวางเครองหมายนอยกวา ( < ) และเครองหมายมากกวา ( > ) โดยทปายระบการแสดงผลหรอ แทก ของภาษาเอชทเอมแอลน สามารถแบงได 2 ลกษณะคอ
1 .ปายระบการแสดงผลเดยวหรอแทกเดยว เปนปายระบการแสดงผลทไมตองมการปดรหส เชน <p> ,<hr>เปนตน
2. ปายระบการแสดงผลเปด/ปดหรอแทกเปด/ปด เปนปายระบการแสดงทประกอบดวยปายระบการแสดงผลเปดหรอแทกเปด และปายระบการแสดงผลปดหรอแทกปด โดยปายระบการแสดงผลปดจะมเครองหมาย สแลช ( slash , / ) เชน <h1>…</h1> , <b>…</b>
Page 8
โปรแกรมสรางเอกสารเวบ
ภาษาเอชทเอมแอล ซงมลกษณะเหมอนกบการเขยนโปรแกรมภาษาคอมพวเตอรทวไป ซงอาจสรางโดยใชโปรแกรมสำาหรบจดการเกยวกบแฟมขอความตวอกษร ( Text Editor ) เชนโปรแกรม Notepad ในปจจบนมโปรแกรมสำาหรบใชเปนเครองมอในการชวยพฒนาเวบเพจ มากมาย ทงแบบชวยลงรหสภาษาเอชทเอมแอล และแบบสรางเวบเพจ แบบอตโนมต
Page 9
ลกษณะโครงสรางของเวบเพจ
1 .แสดงโครงสรางของเวบเพจแบบสำาดบชน
2. แสดงโครงสรางของเวบเพจแบบเชงเสน
3. แสดงโครงสรางของเวบเพจแบบผสม
4. แสดงโครงสรางของเวบเพจเพอนำาเสนอความรเกยวกบคอมพวเตอร
Page 10
การจดเตรยมภาพทเกยวของกบเนอหาเวบ
แฟมขอมลรปภาพทนำามาใชในการทำาเวบนน ปจจบนนยมใชอย 2 รป• ไฟลฟอรแมต JPEG•ไฟลฟอรแมต GIF
Page 11
การกำาหนดโฟลเดอรสำาหรบเกบขอมล
คลกขวา เลอกNew > เลอก Folder > แลวตงชอ Folder วา HTML
Page 12
โครงสรางของเอกสารเอชทเอมแอล
โครงสรางของเอกสารเอชทเอมแอลนนจะประกอบดวย 2 สวนคอสวนหวของเอกสาร (Head Section) และสวนเนอหาของเอกสาร (Body Section)
Page 13
โครงสราง HTML<HTML><HEAD>
<TITLE>ชอเรองของเอกสาร</TITLE></HEAD>
<BODY>เอกสาร HTML เอกสารแรก
</BODY></HTML>
Page 14
การกำาหนดสของพนหลง
<HTML><HEAD>
<TITLE>การกำาหนดสของพนหลงเอกสาร</TITLE></HEAD>
<BODY BGCOLOR = Red >เอกสาร HTML เอกสารแรก
</BODY></HTML>
Page 15
การกำาหนดสของพนหลง
<HTML><HEAD>
<TITLE>การกำาหนดสของพนหลงเอกสาร</TITLE></HEAD>
<BODY BGCOLOR = #00FFFF >เอกสาร HTML เอกสารแรก
</BODY></HTML>
Page 16
การกำาหนดสของพนหลง
<HTML><HEAD>
<TITLE>การกำาหนดสของตวอกษร</TITLE></HEAD>
<BODY TEXT = Blue>เอกสาร HTML เอกสารแรก
</BODY></HTML>
Page 17
การกำาหนดสของพนหลง
<HTML><HEAD>
<TITLE>การกำาหนดสของตวอกษร</TITLE></HEAD>
<BODY TEXT = #FF00FF>เอกสาร HTML เอกสารแรก
</BODY></HTML>
Page 18
การกำาหนดสของพนหลงและตวอกษร
<HTML><HEAD>
<TITLE>การกำาหนดสของพนหลงและตวอกษร</TITLE></HEAD>
<BODY BGCOLOR=Yellow TEXT = #FF00FF>
เอกสาร HTML เอกสารแรก</BODY></HTML>
Page 19
ขนาดของตวอกษร <HTML><HEAD>
<TITLE>ขนาดของตวอกษร</TITLE></HEAD>
<BODY ><H1>ขอความหวเรองระดบ
H1</H1><H2>ขอความหวเรองระดบ
H2</H2> <H3>ขอความหวเรองระดบ
H3</H3><H4>ขอความหวเรองระดบ
H4</H4><H5>ขอความหวเรองระดบ
H5</H5><H6>ขอความหวเรองระดบ
H6</H6></BODY></HTML>
Page 20
จดตวอกษร <HTML><HEAD>
<TITLE>จดตวอกษร</TITLE></HEAD>
<BODY >ตวอกษรปรกต<H2 ALIGN=Center>ขอความH2 จด
กงกลาง</H2><H3 ALIGN=right> ขอความH3 จด
ขวา</H3><H4 ALIGN=left> ขอความH4 จด
ซาย</H4></BODY></HTML>
Page 21
การขนบรรทดใหมการขนบรรทดใหมการแสดงผลดวยโปรแกรมเวบเบราวเซอรนน การขน
บรรทดใหมดวยการกดปม Enter ทแปนพมพเพอขนบรนรทดใหม ในเอกสารเวบทเปนภาษาเอชทเอมแอลใช <BR><HTML>
<HEAD><TITLE>จดตวอกษร</
TITLE></HEAD><BODY >
กอนการใชคำาสง BRบรรทดท1บรรทดท2บรรทดท3
<BR>การใชคำาสง BR <BR>บรรทดท1 <BR>บรรทดท2 <BR>บรรทดท3 <BR>
</BODY></HTML>
Page 22
การยอหนาใหมการยอหนาใหมการใชคำาสงนคอเมอตองกานขนบรรทด
ใหมเหมอนกบคำาสง <BR>แตจะทการเวนบรรทดใหมเพมขนใหอกหนงบรรทด โดยคำาสง <P>นนสามารถใชไดทงแบบทเปนปายระบเดยวและปายระบเปด/ปดกได โดยหากตองการกำาหนดลกษณพเศษเพมเตมจะตองใชในลกษณะของปายระบปายเปด/ปดเทานน ตวอยางคอ <P “align= type”>….</P> โดย align type นนสามารถใชไดทง center , left หรอ right
Page 23
<HTML><HEAD>
<TITLE>แสดงคำาสงการจดยอหนา</TITLE></HEAD><BODY ><p> การใชคำาสง P คอเมอตองการขนบรรทดใหมเหมอนกบคำาสงBR แตจะทำาการเวนบรรทดใหมเพมขนใหอหนงบรรทด</P><P align = center>การใชคำาสง P คอเมอตองการขนบรรทดใหมเหมอนกบคำาสงBR แตจะทำาการเวนบรรทดใหมเพมขนใหอกหนงบรรทด</P><P align = right>การใชคำาสงน P เมอตองการขนบรรทดใหมเหมอนกบคำาสงBR แตจะทำาการเวนบรรทดใหมอหนงบรรทด</P></BODY></HTML>
Page 24
เสนคนการใชงานคำาสงนเมอตองการ
แบงขอความบนจอภาพ โดยใชเสนคนทางแนวนอนนของจอภาพซงสามารถหนดตำาแหนง ส ขนาดของความหนา ความยาว หรอกำาหนดแบบเสนทบได โดยมรปแบบการใชงานคำาสงดงน
Page 25
คำาสงเสนคำาสงเสน
คนคน<HTML><HEAD>
<TITLE>คำาสงเสนคนHTML</TITLE></HEAD><BODY ><HR><HR width=200><HR width=100 align=center><HR width=100 align=right size=10><HR noshade><HR width=200 align=center noshade size=15><HR color=blue size=10><HR color=red size=10 width = 300 noshade></BODY></HTML>
Page 26
การจดรปแบบตวอกษรการจดรปแบบตวอกษร ( ( ตวหนา ตวหนา ))<HTML>
<HEAD><TITLE>การกำาหนดตวอกษรตว
หนา</TITLE></HEAD><BODY >
ตวอกษรปรกต<B> ตวอกษรตวหนา </B></BODY></HTML>
Page 27
การจดรปแบบตวอกษรการจดรปแบบตวอกษร ((ขดเสนใตขดเสนใต))<HTML>
<HEAD><TITLE>การกำาหนดตวอกษรตวขดเสน
ใต</TITLE></HEAD><BODY >
ตวอกษรปรกต<U> ตวอกษรตวขดเสนใต </U></BODY></HTML>
Page 28
การจดรปแบบตวอกษร การจดรปแบบตวอกษร (( เอยงเอยง )) <HTML>
<HEAD><TITLE>การกำาหนดตวอกษรตว
เอยง</TITLE></HEAD><BODY >
ตวอกษรปรกต<I> ตวอกษรตวเอยง</I></BODY></HTML>
Page 29
การจดรปแบบตวอกษร การจดรปแบบตวอกษร (( ตวหอยตวหอย )) <HTML>
<HEAD><TITLE>การกำาหนดตวอกษรตว
หอย</TITLE></HEAD><BODY >
ตวอกษรปรกต<SUB> ตวอกษรตวหอย</ SUB ></BODY></HTML>
Page 30
การจดรปแบบตวอกษร การจดรปแบบตวอกษร (( ตวยกตวยก )) <HTML>
<HEAD><TITLE>การกำาหนดตวอกษรตวยก</
TITLE></HEAD><BODY >
ตวอกษรปรกต<SUP> ตวอกษรตวยก</ SUP></BODY></HTML>
Page 31
การจดรปแบบตวอกษร การจดรปแบบตวอกษร (( ตวตวเคลอนทเคลอนท ))
<HTML><HEAD>
<TITLE>กำาหนดตวอกษรตวเคลอนทขวามาซาย</TITLE></HEAD><BODY >
ตวอกษรปรกต<MARQUEE> ตวอกษรตวเคลอนทขวามาซาย</MARQUEE></BODY></HTML>
งานท8
Page 32
การจดรปแบบตวอกษร การจดรปแบบตวอกษร (( ตวตวเคลอนทเคลอนท ))
<HTML><HEAD>
<TITLE>กำาหนดตวอกษรตวเคลอนซายไปขวา</TITLE></HEAD><BODY >
ตวอกษรปรกต<marquee direction="right">ตวเคลอนซายไปขาว</marquee></BODY></HTML>
งานท9
Page 33
การจดรปแบบตวอกษร การจดรปแบบตวอกษร (( ตวตวเคลอนทเคลอนท ))
<HTML><HEAD>
<TITLE>กำาหนดตวอกษรตวเคลอนตวลางขนบน</TITLE></HEAD><BODY >
ตวอกษรปรกต<marquee direction="up">ตวลางขนบน</marquee></BODY></HTML>
งานท 10
Page 34
การจดรปแบบตวอกษร การจดรปแบบตวอกษร (( ตวตวเคลอนทเคลอนท ))
<HTML><HEAD>
<TITLE>กำาหนดตวอกษรตวเคลอนบนลงลาง</TITLE></HEAD><BODY >
ตวอกษรปรกต<marquee direction="down">ตวบนลงลาง</marquee></BODY> </HTML>
งานท11
Page 35
การจดรปแบบตวอกษร การจดรปแบบตวอกษร (( ตวตวเคลอนทเคลอนท ))
<HTML><HEAD>
<TITLE>การกำาหนดตวอกษรตวเคลอนทเดงไปเดงมา</TITLE></HEAD><BODY >
ตวอกษรปรกต<Br><marquee behavior="alternate">เดงไปเดงมาtext</marquee></BODY></HTML>
งานท12
Page 36
การกำาหนดฟอนตของตวอกษร
<HTML><HEAD>
<TITLE>font face</TITLE></HEAD><BODY >
ตวอกษรปรกต<BR><Font Face =“MS Sans Serif”> ตวอกษร Ms sans Serif </Font><BR><Font Face =“Times New Roman”> ตวอกษร Times New Roman </Font><BR></BODY></HTML>
Page 37
กำาหนดสของตวอกษร<HTML><HEAD>
<TITLE>กำาหนดสของตวอกษร</TITLE></HEAD><BODY >
ตวอกษรปรกต<BR><FONT color=“red”>สแดง</FONT><BR><FONT color=“green”>สเขยว</FONT><BR><FONT color=“blue”>สนำาเงน</FONT><BR><FONT color=“#9935a5”>รหสส</FONT><BR><FONT color=“#005599”>รหสส</FONT><BR></BODY></HTML>