ค ำสั่ง 1. ให้นักศึกษา ใช้เนื้อหาในเอกสารนี้ ฝึกหัดปรับ ... · พื้นฐานภาษา

พนฐานภาษา Html

Create By Wathinee

ค ำสง 1. ใหนกศกษา ใชเนอหาในเอกสารน ฝกหดปรบแตงสราง Webpage อยางงายดวยภาษา HTML 2. เมอฝกหดตามเอกสารน เขาใจดแลว ใหสรางขอมลเกยวกบ การแนะน าตนเอง และ ความรสาระนาร(เกยวกบอะไรกได)

โดยใช <tag> ทเรยนรจากเอกสารน น าไปตกแตงเนอหาทก าหนด ใหสวยงาม 3. สรางไฟล การแนะน าตนเอง ชอไฟล homework1.html

ความรสาระนาร ชอไฟล homework2.html


Create By Wathinee

กำรปรบแตง Webpage อยำงงำยดวย HTML รปแบบของ HTML

<html> <head> <title> ......ชอหวเรองบนไตเตลบาร.... </title> </head> <body>... ขอมลทตองการแสดงผล..... </body> </html>

1. โครงสรำงพนฐำนของภำษำ 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 จะไมเขาใจการพมพบรรทดเปลา ตวอยางการใชค าสง

ผลการท างาน


Create By Wathinee

4. เสนคนบรรทด รปแบบค ำสง <hr> เปนค าสงทใชแบงขอความของจอภาพใหเปนสวนๆ ตวอยางการใชค าสง

ผลการท างาน


Create By Wathinee

5. รปแบบตวอกษร ในสวนนจะเปนสวนทใชในการก าหนดรปแบบตวอกษรเชนการก าหนดส,

การก าหนดขนาด,รปแบบตวอกษร ฯลฯ

5.1 กำรก ำหนดหวเรอง เปนสวนของค าสงTagทเปนตวก าหนดตวอกษรใหมความหนาและขนาดตวอกษรใหมความแตกตาง

จากอกษรปกตกลาวคอเปนสวนทจะท าใหหวเรองมความแตกตางจากอกษรปกตเพราะหวเรองจะตอง

เปนสวนทมจดเดนมากทสดซงค าสง<hx>จะมขนาดของตวอกษร อย 6 ขนาด ตอ ขนาดใหญสด

คอ <h1>( ใชมาก )และเลกทสดคอ<h6> (ใชนอย )

รปแบบค ำสง <hx>........<hx> โดยท x คอคาตวเลขตงแต 1 ถง 6

เมอเราใช Tag ค าสงหวเรองขอมลทอยบรรทดเดยวกบ Tag จะถกขนบรรทดใหมโดยอตโนมต แมวาเรา จะไมใชค าสงขนบรรทดใหมกตาม ตวอยำงกำรใชค ำสง

กำรแสดงผล


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>

ตวอยำงกำรใชค ำสง



Create By Wathinee

5.3 กำรก ำหนดรปแบบตวอกษร ในทนจะไดทราบถงการก าหนดรปแบบตวอกษรใหเปน ตวอกษรเอยง<I>,ตวอกษรหนา<B>,และตวอกษรมเสน<U>

รปแบบค ำสง <B>......</B> <I>......</I> <U>......</U> ตวอยำงกำรใชค ำสง



Create By Wathinee


Create By Wathinee

5.4 กำรจดวำงต ำแหนงขอควำมโดยใช ALIGN เปนค าสงทใชในการก าหนดใหรปภาพตวอกษรขนบรรทดใหม แลวอย ชดซาย,ชดขวา,กงกลาง

รปแบบค ำสง <p align=" Left or Right or Center">......</p>

ผลการแสดง

5.5 กำรจดวำงต ำแหนงขอมลไวกงกลำง ขอมลทอยภายใน Tag ค าสง <center>จะถกก าหนดใหอยกงกลางของจอภาพ

รปแบบค ำสง < center >......</ center > ตวอยำงกำรใชค ำสง


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


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> ตวอยำงกำรใชค ำสง

ผลการแสดง


Create By Wathinee

8. กำรก ำหนดสของตวอกษร เปนค าสงทใชก าหนดสของตวอกษรใหมสตางๆตามตองการโดยการก าหนดเลขฐาน16

รปแบบค ำสง <body text="#เลขฐาน16 จ านวน 6 ตว">......</body> ตวอยำงกำรใชค ำสง

ผลกำรแสดง


Create By Wathinee

9. กำรก ำหนดพน Background เปนรปภำพ หมายเหต : รปภาพชอ bg1.jpg โดยเกบขอมลรปภาพอยใน Folder ชอ images รปแบบค ำสง <body background="ทอยของไฟลรปภาพ">......</body> ตวอยำงค ำสง



Create By Wathinee

10. กำรก ำหนดสของตวอกษรเฉพำะสวน เปนค าสงทใชก าหนดสของตวอกษรใหมสตางๆเฉพาะสวนตามตองการโดยการก าหนดเลขฐาน16

รปแบบค ำสง <font color="#เลขฐาน16 จ านวน 6 ตว">......</font> ตวอยำงกำรใชค ำสง

แสดงผล


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 คอสญลกษณ คาตงตนคอวงกลมทบ ตวอยำงแบบวงกลมและสเหลยม แสดงผล


Create By Wathinee

12. แสดงรำยกำรทมล ำดบ รปแบบ <ol type=”A,a,l,l,1” start=”ตวเลข”> <li> .. <li>.. </ol> หมำยเหต : Type ชนด l,i เปนกำรแสดงแบบโรมน A,a ตวอกษรภำษำองกฤษ

1 ตวเลขปกต ตวอยำง ผลกำรแสดง


Create By Wathinee

13. แสดงรำยกำรแบบผสม ตวอยำง กำรแสดงผล


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>




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

แสดงผล


Create By Wathinee

ตวอยางการใช div รวมกบ style

แสดงผล

16 ทดสอบใช tag อนๆ

16.1 ขดเสนทบกลางตวอกษร <s> ….</s>

16.2 ตวอกษรหอย <sub> ..</sub>

16.3 ตวอกษรยก <sup> …</sup>

16.4 ตวอกษรวง <marquee> …</marquee>

ตวอยาง


Create By Wathinee

แสดงผล

Documents

ค ำสั่ง 1. ให้นักศึกษา ใช้เนื้อหาในเอกสารนี้ ฝึกหัดปรับ ... · พื้นฐานภาษา