View
0
Download
0
Category
Preview:
Citation preview
พนฐานภาษา Html
Create By Wathinee
ค ำสง 1. ใหนกศกษา ใชเนอหาในเอกสารน ฝกหดปรบแตงสราง Webpage อยางงายดวยภาษา HTML 2. เมอฝกหดตามเอกสารน เขาใจดแลว ใหสรางขอมลเกยวกบ การแนะน าตนเอง และ ความรสาระนาร(เกยวกบอะไรกได)
โดยใช <tag> ทเรยนรจากเอกสารน น าไปตกแตงเนอหาทก าหนด ใหสวยงาม 3. สรางไฟล การแนะน าตนเอง ชอไฟล homework1.html
ความรสาระนาร ชอไฟล homework2.html
พนฐานภาษา Html
Create By Wathinee
กำรปรบแตง Webpage อยำงงำยดวย HTML รปแบบของ HTML
<html> <head> <title> ......ชอหวเรองบนไตเตลบาร.... </title> </head> <body>... ขอมลทตองการแสดงผล..... </body> </html>
1. โครงสรำงพนฐำนของภำษำ HTML ตวอยางของการใชค าสง ผลจากการท างาน
พนฐานภาษา Html
Create By Wathinee
2. ค ำสงขนบรรทดใหม รปแบบค ำสง <BR> เปนค าสงทสงใหขอมลทจะแสดงผลขนบรรทดใหม กลาวคอเมอเราพมพขอมลอะไรลงไปใน Tag
<body> ...... </body>. การแสดงผลของขอมล จะเรยงตอกนไปเรอยๆแมวาเราจะขน บรรทดใหมในการพมพขอมลในค าสง Tag <body> .....</body> แลวกตาม ค าสง <BR> จงเปนค าสงทชวยใหเราบงคบใหขอมลขนบรรทดใหมได ตวอยางการใชค าสง ผลการท างาน
<html> <head> <title> ใบงานท 2 </title> </head> <body> ใบงานท 2 : เรมตนฝกหดเขยนภาษา HTML <br> ตวหนงสอทขนบรรทดใหม </body> </html>
3. ค ำสงกำรยอหนำใหม รปแบบค ำสง <p> … </p> มลกษณะคลายกบค าสง <BR> แตค าสงนจะมการเวนบรรทดวางใหหนงบรรทด เพราะบางครง เราตองการเวนบรรทดวางหนงบรรทด แตโปรแกรม Web Browser จะไมเขาใจการพมพบรรทดเปลา ตวอยางการใชค าสง
ผลการท างาน
พนฐานภาษา Html
Create By Wathinee
4. เสนคนบรรทด รปแบบค ำสง <hr> เปนค าสงทใชแบงขอความของจอภาพใหเปนสวนๆ ตวอยางการใชค าสง
ผลการท างาน
พนฐานภาษา Html
Create By Wathinee
5. รปแบบตวอกษร ในสวนนจะเปนสวนทใชในการก าหนดรปแบบตวอกษรเชนการก าหนดส,
การก าหนดขนาด,รปแบบตวอกษร ฯลฯ
5.1 กำรก ำหนดหวเรอง เปนสวนของค าสงTagทเปนตวก าหนดตวอกษรใหมความหนาและขนาดตวอกษรใหมความแตกตาง
จากอกษรปกตกลาวคอเปนสวนทจะท าใหหวเรองมความแตกตางจากอกษรปกตเพราะหวเรองจะตอง
เปนสวนทมจดเดนมากทสดซงค าสง<hx>จะมขนาดของตวอกษร อย 6 ขนาด ตอ ขนาดใหญสด
คอ <h1>( ใชมาก )และเลกทสดคอ<h6> (ใชนอย )
รปแบบค ำสง <hx>........<hx> โดยท x คอคาตวเลขตงแต 1 ถง 6
เมอเราใช Tag ค าสงหวเรองขอมลทอยบรรทดเดยวกบ Tag จะถกขนบรรทดใหมโดยอตโนมต แมวาเรา จะไมใชค าสงขนบรรทดใหมกตาม ตวอยำงกำรใชค ำสง
กำรแสดงผล
พนฐานภาษา Html
Create By Wathinee
5.2 ขนำดตวอกษร ( Fontsize & Basefontsize )
ค ำสง<BASEFONT SIZE> เปนค าสงทใชก าหนดขนาดตวอกษรทงหมดในไฟลใหมคาตามทเราก าหนด ซงขนาดตวอกษรมได ตงแต 1 ถง 7 คอขนาด 1 เปนขนาดเลกทสด และ ขนาด 7 เปนขนาดทใหญทสด ซงตรงขามกบขนาด ของค าสง <hx>ปกตถาเราไมก าหนดขนาดของ<BASEFONT SIZE>โปรแกรมจะก าหนดขนาด ใหมขนาดเปน 3 เสมอ รปแบบค ำสง <BASEFONT SIZE> ค ำสง<FONT SIZE> เปนค าสงทใชในการก าหนดขนาดตวอกษรในบรรทดเดยวกนใหมขนาดทแตกตางกนได ซงมคาได ตงแต -7 ถง +7 ซงคาตวเลขยงมาก ขนาดของตวอกษรกจะยงใหญมากขน การก าหนดขนาดของตว อกษรในค าสง <FONT SIZE> จะถกอางองโดยค าสง<BASEFONT SIZE> รปแบบค ำสง <font size="number">.....</font>
ตวอยำงกำรใชค ำสง
กำรแสดงผล
พนฐานภาษา Html
Create By Wathinee
5.3 กำรก ำหนดรปแบบตวอกษร ในทนจะไดทราบถงการก าหนดรปแบบตวอกษรใหเปน ตวอกษรเอยง<I>,ตวอกษรหนา<B>,และตวอกษรมเสน<U>
รปแบบค ำสง <B>......</B> <I>......</I> <U>......</U> ตวอยำงกำรใชค ำสง
กำรแสดงผล
พนฐานภาษา Html
Create By Wathinee
พนฐานภาษา Html
Create By Wathinee
5.4 กำรจดวำงต ำแหนงขอควำมโดยใช ALIGN เปนค าสงทใชในการก าหนดใหรปภาพตวอกษรขนบรรทดใหม แลวอย ชดซาย,ชดขวา,กงกลาง
รปแบบค ำสง <p align=" Left or Right or Center">......</p>
ผลการแสดง
5.5 กำรจดวำงต ำแหนงขอมลไวกงกลำง ขอมลทอยภายใน Tag ค าสง <center>จะถกก าหนดใหอยกงกลางของจอภาพ
รปแบบค ำสง < center >......</ center > ตวอยำงกำรใชค ำสง
พนฐานภาษา Html
Create By Wathinee
แสดงผล
5.6 ค ำสงส ำหรบจดแบบเอกสำรตำมทก ำหนด : <Pre> … </Pre> ขอมลทอยภายใน Tag ค าสง <pre> จะแสดงเหมอนดงตนฉบบ
รปแบบค ำสง <Pre> … </Pre>
6. ตวอยำงของเลขฐำน 16 เทยบกบส
color เลขฐำน
16 color
เลขฐำน
16 color
เลขฐำน
16 color
เลขฐำน
16
FFFFFF B5A642 42426F 7093DB
FF0000 238E68 5C4033 855E42
00FF00 D9D919 2F4F2F 856363
0000FF A62A2A 4A766E D19275
00FFFF 8C7853 4F4F2F 238E23
พนฐานภาษา Html
Create By Wathinee
FFFF00 A67D3D 9932CD CD7F32
000000 5F9F9F 871F78 DBDB70
70DB93 D98719 6B238E C0C0C0
5C3317 B87333 2F4F4F 527F76
9F5F9F FF7F00 97694F 93DB70
7. กำรก ำหนดสของพนฉำกหลง
เปนค าสงทใชก าหนดสของ Background จอภาพใหมสตางๆตามตองการโดยการก าหนดเลขฐาน16
รปแบบค ำสง <body bgcolor="#เลขฐาน16 จ านวน 6 ตว">......</body> ตวอยำงกำรใชค ำสง
ผลการแสดง
พนฐานภาษา Html
Create By Wathinee
8. กำรก ำหนดสของตวอกษร เปนค าสงทใชก าหนดสของตวอกษรใหมสตางๆตามตองการโดยการก าหนดเลขฐาน16
รปแบบค ำสง <body text="#เลขฐาน16 จ านวน 6 ตว">......</body> ตวอยำงกำรใชค ำสง
ผลกำรแสดง
พนฐานภาษา Html
Create By Wathinee
9. กำรก ำหนดพน Background เปนรปภำพ หมายเหต : รปภาพชอ bg1.jpg โดยเกบขอมลรปภาพอยใน Folder ชอ images รปแบบค ำสง <body background="ทอยของไฟลรปภาพ">......</body> ตวอยำงค ำสง
กำรแสดงผล
พนฐานภาษา Html
Create By Wathinee
10. กำรก ำหนดสของตวอกษรเฉพำะสวน เปนค าสงทใชก าหนดสของตวอกษรใหมสตางๆเฉพาะสวนตามตองการโดยการก าหนดเลขฐาน16
รปแบบค ำสง <font color="#เลขฐาน16 จ านวน 6 ตว">......</font> ตวอยำงกำรใชค ำสง
แสดงผล
พนฐานภาษา Html
Create By Wathinee
11. แสดงรำยกำรทไมมล ำดบ 11.1 แสดงรำยกำรทไมมล ำดบ วงกลมแบบทบ
ขอมลแบบรายการ (list) จะถกก าหนดใหแสดงโดยมสญลกษณปรากฏอยขางหนา แตละรายงาน ซงปกตเมอใช <ul> โดยไมปรบแตงใด ๆ เราจะเหนเปนสญลกษณรปวงกลมแบบทบ ตวอยำง <ul> <li> aaaaaaaaaaa <li> aaaaaaaaa <li> aaaaaaaa </ul> แสดงผล
11.2 แสดงรำยกำรทไมมล ำดบ แบบสเหลยม และ วงกลมแบบโปรง <ul type=”ไมม type หรอ square หรอ circle” หรอ disc> <li> <li> </ul> หมายเหต disc คอสญลกษณ คาตงตนคอวงกลมทบ ตวอยำงแบบวงกลมและสเหลยม แสดงผล
พนฐานภาษา Html
Create By Wathinee
12. แสดงรำยกำรทมล ำดบ รปแบบ <ol type=”A,a,l,l,1” start=”ตวเลข”> <li> .. <li>.. </ol> หมำยเหต : Type ชนด l,i เปนกำรแสดงแบบโรมน A,a ตวอกษรภำษำองกฤษ
1 ตวเลขปกต ตวอยำง ผลกำรแสดง
พนฐานภาษา Html
Create By Wathinee
13. แสดงรำยกำรแบบผสม ตวอยำง กำรแสดงผล
พนฐานภาษา Html
Create By Wathinee
14 . รปภำพ ( IMAGE ) รปภาพถอเปนสวนประกอบทส าคญอยางหนงของโฮมเพจ เพราะจะท าใหโฮมเพจนาสนใจมากยงขน โดยปกตแลวรปภาพทสามารถน ามาประกอบโฮมเพจไดจะมดวยกนสองไฟลคอไฟล JPG. ( JPEG. ) และGIF. รปแบบค ำสง <IMG SRC="ชอไฟล JPG/GIF">
กำรก ำหนดขนำดของรปภำพ รปแบบค ำสง <IMG SRC="ชอไฟล JPG/GIF" WIDTH="number" HEIGHT="number">
ตวอยำงกำรใชค ำสง
<html> <head> <title>การก าหนดขนาดของรปภาพ < /TITLE > </head> <body> <IMG SRC="image03.gif" WIDTH="100" HEIGHT="100" alt="การใสชอ"> </body> </html>
ตวอยำงกำรใชค ำสง
กำรแสดงผล
พนฐานภาษา Html
Create By Wathinee
15 กำรจดกลมของขอควำมดวย <SPAN> และ <DIV> <span> เปนแทกทใชในการก าหนดขอความในบรรทดเดยวกนไมขนบรรทดใหม เปนการระบทอยในแทก และจะมผลเฉพาะทอยในแทกเทานน
<div> เปนแทกทใชก าหนดเพอใหกลมของขอความนนได เพมขนบรรทดใหมนน โดยทไมตองใช <br> มาชวย
โดยมากจะใชรวมกบ style (ในสวนนเรยนเพมเตมในเรองของ CSS)
ความแตกตางระหวาง span กบ div นนมจดตางกนนดเดยวเทานนเอง คอ แทก div เวลาใชมนจะขน บรรทดใหม สวนแทก span
จะไมขนบรรทดใหม นนเองครบ ลองดจากตวอยางน
<DIV> div1</DIV><DIV> div2</DIV>
ผลทไดคอ
div1 div2
ตอมาเรามาลองดแทก span กนบางครบ
<span>span1</span><span></span>
ผลทไดคอ
span1span2
นแหละครบคอความแตกตางระหวา div กบ span สดทายแลวกคงบอกไมไดวาจะใชแบบ DIV หรอ SPAN ดกวา มนขนอยกบการน าไปใชมากกวา ตวอยางการใช span รวมกบ style
แสดงผล
พนฐานภาษา Html
Create By Wathinee
ตวอยางการใช div รวมกบ style
แสดงผล
16 ทดสอบใช tag อนๆ
16.1 ขดเสนทบกลางตวอกษร <s> ….</s>
16.2 ตวอกษรหอย <sub> ..</sub>
16.3 ตวอกษรยก <sup> …</sup>
16.4 ตวอกษรวง <marquee> …</marquee>
ตวอยาง
พนฐานภาษา Html
Create By Wathinee
แสดงผล
Recommended