ภาษา html (hypertext markup language)pibul2.psru.ac.th/~urairux/html.doc · web...
Post on 23-Sep-2020
7 Views
Preview:
TRANSCRIPT
ภาษาHTML (Hypertext Markup Language) เวบเพจสวนใหญจะถกสรางขนจากภาษาคอมพวเตอรทมชอเรยกวา HTML (Hypertext Markup
Language) ภาษาHTML จะกำาหนดรปแบบ และหนาตาของเวบเพจทปรากฏบนหนาจอ และเชอมตอ(Link) เวบเพจกบขอมลอนๆ
โครงสราง ภาษาHTML โครงสรางพนฐานของภาษาHTML นนแบงออกไดเปน 2 สวนไดแกสวนHEAD และBODY โปรแกรมใน
สวนHEAD จะเกยวของกบการกำาหนดหวขอของเวบเพจ และโปรแกรมในสวน BODY จะกำาหนดหนาตาของเวบเพจ
<HTML> <HEAD> <TITIE> หวขอเวบเพจ</TITLE> </HEAD> <BODY>
สวนทมเนอหา และขอมลเกยวกบ ภาพ Link ทปรากฏในเวบเพจ </BODY></HTML>
ใชโปรแกรมNotepad เขยนHTML1. ใหเปดโปรแกรมNotepad ขนมา โดยคลกปม Stare ดงรป
2. โปรแกรมกจะทำาการเปดโปรแกรม Notepad ดงรป
1
3. จากนนใหทดลองพมพ คำาสงHTML ดงรป
4. เมอพมพคำาสงเสรจแลวใหทำาการบนทกชอเปน Index.Html ดงรป
2
5. เมอSave เอกสารเรยบรอยแลวกสามารถเปดโปรแกรม Internet Explorer เพอดเวบเพจทคณเขยนดงรป
6. ใหกดปม Browse เพอหาไฟลชอ Index.Html ทเกบไวจากนนกกดปมOk โปรแกรมจะแสดงเวบเพจทเขยนมาดงรป
3
เพมหมายเหตเพอเตอนความจำา เขยนหมายเหตไวในสวนตางๆ ของคำาสง เพออธบายการทำางาน เพราะอาจจะลมทเคยเขยนไวเมอมาแกไขใหม รปแบบคำาสง
การขนบรรทดใหม และวรรคใหม
คำาสงขนบรรทดใหม<BR> คำาสงขนวรรคใหม<p>
4
<!หมายเหต>
คำาสงวรรคใหม
คำาสงขนบรรทดใหม
การกำาหนดรปแบบตวอกษร สามารถกำาหนดตวอกษรในขอความไดหลายแบบ เชน ตวเขม ตวเอน หรอขดเสนใต รปแบบตว
อกษรคำาสงทใช
ตวหนาตวเอนตวขดฆา
ตว superscriptตว subscriptขดเสนใต
<B>….</B><I>….</I><S>….</S><SUP>…</SUP><SUB>…</SUB><U>…</U>
แบงขอความเปนสวนยอยโดยใชหวเรอง การใชหวเรองเพอแบงขอมลในเวปเพจออกเปนสวนยอยๆ โดยขอความแตละหวเรองจะใชขนาดตวอกษรทแตกตางกน
ใหญสด เลกสด
5
<H1>…</
<H6>…</
การเปลยนขนาดตวอกษรตองการใหขอความในเวบเพจมขนาดตวอกษรทแตกตางกนใหใชคำาสง
การจดวางขอความ สามารถจดตำาแหนงขอความทงยอหนา ใหชดขวา ชดซาย หรออยกงกลาง ไดโดยใชคำาสง
6
<FONT SIZE=ขนาดตว
อกษร>………</FONT>
<P ALIGN=LEFT/ CENTER/ RIGHT>…..</P>
การใชส
เนองจากในภาษาHTML ตองระบรหสสทตองการในรปของเลขฐาน 16 จงขอแนะนำาใหใชตารางแปลงคาสแดง สเขยว สนำาเงน รหสสในรปของเลขฐาน 16
สแดงสเขยวสดำาสขาว
2550
2550
0255255
0
00
2550
#FF0000#00FF00#000000#FFFFFF
การกำาหนดสพนของเวปเพจ และสตวอกษร สามารถกำาหนดสพนของเวบเพจ และ ตวอกษรทแสดงไดโดยใชคำาสง
แทรกในคำาสง<BOBY> เพอใหสทกำาหนดมผลกบเวบเพจ
การกำาหนดตวอกษรในขอความใหมสทแตกตางกนถาตองการใหขอความมสสรรทแตกตางกนไปใหใชคำาสง
7
BGCOLOR=#รหสส
TEXT=#รหสส
กำาหนดสพน
กำาหนดสตวอกษร
<FONT COLOR=รหส
ส>……</FONT>
ขดเสนคน การใชสคนในเวบเพจ จะชวยแบงเนอหาออกเปนสวนๆ ทำาใหอานไดงายสำาหรบรปคำาสงมดงน
8
ตวอกษรมสทแตกตางกน
<HR SIZE=”ความกวางท
ตองการ”>
รจกกราฟฟกชนดตางๆ
สำาหรบการสรางเวบเพจนนกราฟฟกทใชสวนใหญ เปนชนด GIF ( ไฟลภาพมสกลเปน .GIF) และ JPEG (ไฟล ภาพมสกลเปน .JPEG)
แสดงภาพบนเวปการนำาภาพมาแสดงบนเวบเพจโดยใชคำาสง
9
IMG SRC=ชอไฟลภาพ.สกลภาพ>
ปรบขนาดรปภาพ ถานำารปมาแสดงในเวบมขนาดเลก หรอใหญเกนไป สามารถกำาหนดขนาดของภาพ โดยการรบความกวาง และความยาวท
ตองการดวย
แทรกในคำาสง<IMG SRC…..>
10
WIDTH= ความกวางของภาพ HEIGHT=ความสงของภาพ
การแสดงภาพเปนBackgroung สามารถตกแตงเวบเพจใหมภาพเปนพนหลงไดโดยกำาหนดภาพเลกๆ 1 ภาพจะถกนำามาดเรยงซำากนเพอสรางเปนพนหลงให
กบเวบเพจ ในลกษณะเดยวกบการวางแผนกระเบอง
สำาหรบตวอยางตอไปนใชลาย เปน Backgroung
การสรางLik โดย Link ซงเปนสงทชวยใหผใชสามารถทองอนเตอรเนตไดโดยการ Click mouse เพอใหเปลยนไปดหนา เวบเพจตางๆ หรอเวบเพจของทอนๆ ท Link ไป
รปแบบของคำาสง Link มดงน
Link สามารถเชอมโยงขอมลได 3 วธคอ การเชอมโยงขอมลภายในเวบเพจเดยวกน การเชอมโยงขอมลในเวบเพจกบเวบเพจอน การเชอมโยงขอมลกบเวบไซตอน
การ Link โดยการใชขอความ
11
<A HREF=สวนเชอม>ขอความทใช
เปน Link</A>
การใชภาพเปน Link เพอทำาใหเวบเพจดหนาสนใจขน โดยการใชภาพเปน Link เชมกบเวปอนแทรกการใชขอความธรรมดา
การใชภาพเปน Link เชอมไปยงเวบเพจอนนนทำาไดโดยการเพมคำาสง
12
<A HREF=จดเชอมโยง> <IMG SRC=ชอ
รปภาพ.สกลภาพ></A>
การสรางตารางในเวปเพจสำาหรบรปแบบคำาสงตารางมดงน
จำานวนคำาสง<TR>..</TR> เปนการกำาหนดจำานวนแถวในตารางจำานวนคำาสง<TD>..</TD>เปนการกำาหนดจำานวนคอลมนในแตละแถว
13
<TABLE><TR><TD>ขอมล</TD><TD>ขอมล</TD></TR><TR><TD>ขอมล</TD><TD>ขอมล</TD></TR></TABLE>
การกำาหนดเสนของตาราง
โดยการเพมคำาสงBORDER แรก ในคำาสง<TABLE …..>
การปรบความสงและความกวางของตาราง คาความกวางและความสงนน คอ เปอรเซนตความกวางความสงของตารางทตองการ โดยเทยบกบขนาดของหนาจอบราว
เซอร รปแบบคำาสง
14
ใสเสนตาราง
WIDTH=ความกวาง% HEIGHT=ความสง
ปรบขนาดชองตาราง เพอทำาใหเสนตารางไมเขามาตดกบขอมลมากเกนไป โดยมคำาสงดงน
15
CELLPADDING=ขนาดทวาง
คำาสงปรบขนาดชองตาราง
การใสรปในตาราง วธการนำาภาพมาใสในตาราง นนคลายการนำาขอความมาใสในตารางทงไป ถาตองการใหรปมสดสวนเทากนในตาราง ใหกำาหนด
ขนาดของรปโดยใชWIDTH และ HEIGHT
16
เกดทวางระหวางขอบชองตารางและขอมล
17
top related