ใบงานที่ 2 - W A T H I N E E . R E R U . A C . T H · 2016-12-02 · ใบงานที่ 2 Create By Wathinee ใบงานที่ 2 คําสั่ง

ใบงานท 2

Create By Wathinee


คาสง

1. ใหนกศกษา ใชเนอหาในเอกสารน ฝกหดปรบแตงสราง Webpage อยางงายดวยภาษา HTML

2. เมอฝกหดตามเอกสารน เขาใจดแลว ใหสรางขอมลเกยวกบ คาศพททควรร (อยใน Slide บทท1 หรอคาศพทอนๆ)พรอมฝกใช

<tag> ทเรยนรจากเอกสารน นาไปตกแตงเนอหาทกาหนด ใหสวยงาม

3. สรางขอมลเกยวกบ คาศพททควรร เกบขอมลลงในไฟลชอ homework2.html

4. จากนน upload ขนไปเกบท Server (csict.reru.ac.th) เพมขอมลลงใน Folder ของนกศกษา


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

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

ใบงานที่ 2 - W A T H I N E E . R E R U . A C . T H · 2016-12-02 · ใบงานที่ 2 Create By Wathinee ใบงานที่ 2 คําสั่ง