The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.

Home Explore e-book หน่วยที่ 2 การเขียนภาษา html

e-book หน่วยที่ 2 การเขียนภาษา html

Like this book? You can publish your book online for free in a few minutes!

Download PDF

Related Publications

Discover the best professional documents and content resources in AnyFlip Document Base.

Published by วิรยา สีขาว, 2019-06-04 05:12:15

e-book หน่วยที่ 2 การเขียนภาษา html

Pages:

e-book หน่วยที่ 2 การเขียนภาษา html

หนว ยท่ี 1 ภาษา HTML

ความหมายของ HTML

2

 HTMLหรือ HyperText Markup Language เปนภาษาคอมพิวเตอรรูปแบบ
หน่ึง ที่มีโครงสรางการเขียนโดยอาศัยตัวกํากับ (Tag) ควบคุมการแสดงผล
ขอ ความ, รูปภาพ หรอื วัตถอุ ืน่ ๆ ผานโปรแกรมเบราเซอร

 แตละ Tag อาจจะมีสวนขยายที่เรียกวา Attribute สําหรับระบุ หรือควบคุม
การแสดงผล ของเว็บไดดว ย

 HTML เปนภาษาท่ีถูกพัฒนาโดย World Wide Web Consortium (W3C) จาก
แมแบบของภาษา SGML (Standard Generalized Markup Language) โดยตัด
ความสามารถบางสว นออกไป

 เพ่ือใหส ามารถทาํ ความเขาใจและเรียนรูไดงาย และดวยประเด็นดังกลาว ทํา
ใหบ ริการ WWW เติบโตขยายตวั อยางกวา งขวางตามไปดว ย Tag

Tag

3

 Tag เปนลกั ษณะเฉพาะของภาษา HTML ใชในการระบุรปู แบบคาํ สั่ง
หรือการลงรหัสคาํ ส่ัง HTML ภายในเครอื่ งหมาย less-than bracket ( < )
และ greater-than bracket ( > ) โดยท่ี Tag HTML แบง ได 2 ลักษณะ คอื

 Tag เดยี่ ว
เปน Tag ท่ีไมต องมกี ารปดรหัส เชน , เปนตน

 Tag เปด /ปด
เปน Tag ที่ประกอบดวย Tag เปด และ Tag ปด โดย Tag ปด จะมเี ครื่องหมาย
slash ( / ) นาํ หนา คาํ ส่งั ใน Tag นั้นๆ เชน …, <BLINK>…</BLINK>
เปนตน

Attributes

4

 Attributes เปน สว นขยายความสามารถของ Tag จะตอ งใสภายใน
เครื่องหมาย < > ในสว น Tag เปด เทานนั้

 Tag คาํ สัง่ HTML แตละคําส่ัง จะมี Attribute แตกตางกันไป มจี ํานวนไม
เทา กนั การระบุ Attribute มากกวา 1 Attribute ใหใชชอ งวางเปนตัวคน่ั
เชน Attributes ของ Tag เกี่ยวกบั การจัดพารากราฟ คือ ประกอบดว ย
ALIGN="Left/Right/Center/Justify" ซง่ึ สามารถเขียนไดด งั น้ี
...
หรือ
...
หรอื
...

โครงสรา งพ้ืนฐานของภาษา HTML

<HTML>
<HEAD>
<TITLE> ขอความจะแสดงท่ี title bar
</TITLE>
</HEAD>
<BODY>สวนของเน้อื หา
</BODY></HTML>

 <HTML>
<HEAD>
<TITLE> น่คี อื เว็บเพจแรกของฉนั </TITLE>
</HEAD>
<BODY>


นคี่ ือเว็บเพจแรกของฉัน 

</BODY>
</HTML>

อธิบายคําสัง่

 <HTML></HTML> เปนคาํ ส่ังทีใ่ ชกาํ หนดวาเปนเอกสาร HTML
<HEAD></HEAD> เปน คาํ สงั่ ทีใ่ ชก ําหนดสวนอธิบายเอกสาร
<TITLE> </TITLE> เปนคําสั่งทใี่ ชกาํ หนดชือ่ หรือไตเต้ลิ ของ
เอกสาร
<BODY></BODY> เปน คาํ สง่ั ท่ีใชบ อกวา เปนสว นของ
รายละเอยี ด
 เปนคาํ สัง่ ทใี่ ชก ําหนดใหข ้ึนบรรทัดใหม
 ใชบอกใหร วู า เปนหมายเหตุไมต อ งแสดง
ออกมาในเว็บเพจ

การกาํ หนด FONT ที่จะใชใ นเว็บเพจ

<BODY>


นค่ี อื เวบ็ เพจแรกของฉัน
 


นี่คือเว็บเพจแรกของฉัน
 


นค่ี อื เว็บเพจแรกของฉนั
 

</BODY>

 เปนคําสั่งทใ่ี ช
กําหนดฟอ นตท ่ีจะใชใ นเว็บเพจ

 เปน คาํ สง่ั ปดทีต่ อ งใชคกู นั เสมอ

การกาํ หนดรปู แบบของตวั อักษร

<BODY>
นี่คือเว็บเพจแรกของฉัน
 นี่คือเว็บเพจแรกของฉนั 
 น่คี ือเวบ็ เพจแรกของฉัน
<S> น่ีคอื เวบ็ เพจแรกของฉนั </S>
 นี่คือเวบ็ เพจแรกของฉนั 
ขอ ความแบบ Super Script E=MC2
ขอความแบบ Sub Script H2O

</BODY>

อธิบายคําสัง่

 เปน คาํ สง่ั ที่ใชกําหนดรูปแบบตัวอกั ษร-ตัวเขม
 เปนคาํ สง่ั ทใี่ ชกาํ หนดรูปแบบตัวอกั ษร-ตัวเอยี ง
<S></S> เปนคาํ สงั่ ทใ่ี ชกําหนดรูปแบบตัวอกั ษร-ตวั ขีดฆา
 เปน คาํ สั่งทีใ่ ชกาํ หนดรูปแบบตวั อกั ษร-ตัวขดี เสน ใต
 เปนคาํ สงั่ ท่ใี ชกําหนดรปู แบบ Super Script
 เปนคาํ สั่งทใ่ี ชก ําหนดรปู แบบ Sub Script

การกําหนดขนาดของตวั อักษร ที่จะใชใ นเวบ็ เพจ

<BODY>

นี่คอื เวบ็ เพจแรกของฉัน 


นค่ี ือเวบ็ เพจแรกของฉนั 


น่ีคอื เวบ็ เพจแรกของฉัน 


นคี่ ือเวบ็ เพจแรกของฉัน 


</BODY>

<BODY>

นค่ี อื เวบ็ เพจแรกของฉนั 


น่ีคอื เวบ็ เพจแรกของฉัน 


นคี่ ือเวบ็ เพจแรกของฉนั 


นี่คือเวบ็ เพจแรกของฉัน 


</BODY>

อธบิ ายคาํ ส่งั

 เปนคาํ สงั่ ท่ใี ช

กาํ หนดขนาดตวั อกั ษรทีจ่ ะใชในเว็บเพจ
ขนาดตวั อกั ษร สามารถกาํ หนดไดต งั้ แต 1 - 7
 เปนคําสง่ั ปด ที่ตอ งใชคกู นั เสมอ

การเนน สีใหกบั ขอ ความหรือ
ตวั อักษร

<BODY>
 นี่คอื เว็บเพจแรกของฉนั

 
 นคี่ ือเว็บเพจแรกของฉนั

 
 น่ีคอื เว็บเพจแรกของฉนั

 
 น่คี อื เวบ็ เพจแรกของฉัน

 
 นีค่ อื เวบ็ เพจแรกของฉนั

 
</BODY>

อธิบายคําสงั่

 เปนคําสงั่ ท่ใี ชก าํ หนดสี

ใหก บั ตวั อกั ษรท่ีจะใชใ นเวบ็ เพจ
 เปนคาํ สง่ั ปด ทตี่ อ งใชคกู นั เสมอ

Colors  9. White สขี าว
 10. Dark Blue สนี า้ํ เงินเขม
 1. Blue สนี ้าํ เงนิ  11.Turquoise สีน้าํ เงนิ อมเขยี ว
 2. Red สีแดง  12. Grey สีเทา
 3. Pink สชี มพู  13. Purple สีมวง
 4. Orange สสี ม  14.Indigo สีคราม
 5. Yellow สเี หลอื ง  15. Light blue สีฟา
 6. Black สีดํา
 7. Green สเี ขยี ว
 8. Brown สนี ํา้ ตาล

การกําหนดสตี ัวอักษรและ
สีแบลค็ กราวดใ นเอกสาร

<BODY TEXTCOLOR="black" BGCOLOR="lightblue">
นค่ี ือเวบ็ เพจแรกของฉนั 

</BODY>

<BODY TEXTCOLOR="ช่อื ส"ี BGCOLOR="ชอื่ ส"ี >
TEXTCOLOR ใชกําหนดสี Default ใหก บั ตัวอักษร
ทั้งหมดภายในเอกสาร
BGCOLOR ใชกาํ หนดสแี บล็คกราวดของเอกสาร

การกาํ หนดสีแบบเลขฐาน 16

ในการใชส ีของเอกสารHTMLนั้น

จะใชสแี บบ RGB (R=RED สีแดง,G=GREEN

สีเขยี ว,B=BULE สีนาํ้ เงนิ ) โดยจะใชอยูใน
รหสั เลขฐาน16 คือ #FFFFFF โดยที่จะใชเ ลข
00,33,66,99,CC,FF แทนสีในเฉยี ดตา งๆ

การจัดวางตําแหนงขอความ

<BODY>
 น่ีคอื เว็บเพจแรกของฉัน

 นค่ี อื เว็บเพจแรกของฉัน
 นค่ี อื เว็บเพจแรกของฉัน

</BODY>

อธบิ ายคาํ สัง่

 เปน การสง่ั ใหข นึ้ ยอ หนา ใหม (ปกติจะอยชู ิดซายเสมอ)
 กาํ หนดใหขอ ความอยชู ิดดานซา ย
 กําหนดใหขอความอยูก งึ่ กลางเอกสาร
 กําหนดใหข อ ความอยชู ดิ ดานขวา
 เปนคาํ สั่งปด ที่ตองใชค กู นั เสมอ (เม่ือใช )

การกําหนดหัวขอ (Heading)

<head>
<title> Test Heading </title>
</head>
<body>
<h1> หวั ขอ (Heading)ระดบั 1 </h1>
<h2>Test Heading if x=2 </h2>
<h3> Test Heading if x=3 </h3>
<h4> Test heading if x=4 </h4>
<h5> Test heading if x=5 </h5>
<h6> Test heading if x=6 </h6>
</body>

คําอธิบาย
ใชในการกาํ หนดขนาดใหกบั ขอความทเี่ ปนหวั ขอ
เร่อื ง ในเอกสารทมี่ ีหัวขอเปนปลกี ยอ ย สามารถ
แยกเปน ลาํ ดบั ของหวั เร่ืองไดอ ยา งชดั เจน

รูปแบบ<hx> ..... </hx>
X = หมายเลขของหัวทตี่ อ งการ 1 - 6

แสดงขอ ความแบบจัดก่ึงกลาง
(Center)

<title> Paragraph Tag </title>
</head>
<body>
Test Normal Message
<center> Test Center Message </center>
</body>

คาํ อธบิ าย
ใชแ สดงขอ ความหรือรปู ภาพใชจ ดั กึง่ กลางเวบ็
เพจ รูปแบบ<center> ... </center>

การแสดงเสน คั่นทางแนวนอน
(Horizontal Rule)

<body>
<hr>
<hr width="100%">
<hr width="50%">
<hr width="200">

<hr size="3">
<hr size="7">
<hr align="right">
<hr align="center" width="75%”
size="3">
<hr noshade>
</body>

คําอธิบาย
ใชแ สดงเสน ค่นั แนวนอน โดยใชใ นการแบงเนื้อหาหรอื คัน่ เพอ่ื
ความสวยงามและความเปนระเบยี บของเน้อื หา

รูปแบบ<hr>
<hr align="left/center/right"> กาํ หนดตําแหนง
เสน

<hr width="pixels or %"> กาํ หนดความยาวเสน
<hr size="pixels"> กาํ หนดขนาดเสน
<hr noshade> กําหนดลักษณะเสน

คาํ ส่งั ทิศทางการวิ่งทิศทางการว่ิงมี 4 อยาง คอื

<marquee direction="left">ขอความวิง่ จากขวาไปซา ย
</marquee>

<marquee direction="right">ขอ ความวง่ิ จากซายไปขวา
</marquee>

<marquee direction="up">ขอความวิ่งจากลา งขึ้นบน
</marquee>

<marquee direction="down">ขอความวิ่งจากบนลงลาง
</marquee>

คําสง่ั ความเรว็ ในการว่ิง
<marquee scrollamount="เลข">และตัวปดคอื </marquee>

<marquee scrollamount="5">ความเร็วในการว่งิ
5</marquee>ความเร็วในการวงิ่ 5
ตัวอยางวง่ิ เร็ว

<marquee scrollamount="70">ความเรว็ ในการวง่ิ 70
</marquee

คาํ สัง่ พเิ ศษ
<marquee width="เลข">และตวั ปด คือ</marquee>ใส

ตัวเลขเปนพิกเซลหรอื เปอรเชน็ กไ็ ด เพอื่ กําหนดวาจะใหว ิ่งเต็ม
หนา กระดาษ หรือครงึ่ หนากระดาษ

ตัวอยา งวิง่ แคครึ่งหนา กระดาษ
<marquee width="50%">width="50% คอื วิง่ คร่ึง

หนากระดาษ</marquee>
<marquee behavior="alternate">ขอ ความวิ่งไป
</marquee>

ขอ ความวิ่งไป วงิ่ มา
<marquee behavior="alternate">และแทก็ ปดคือ

</marquee>ขอความที่เร่ิมวิง่ จากซา ยมาขวา วิง่ มาสลับกัน
<marquee behavior="alternate">ขอความวิง่ ไป

</marquee>

การทํารปู ภาพวง่ิ
<marquee direction="left"><img src="ชอ่ื รูป.สกุล
รูป"></marquee>

ขอ ความวง่ิ จากซา ยมาขวาแลว หยุด
<marquee behavior="slide">คือขอความทว่ี ่ิงมา

จากมมุ ขวาแลว มาหยุดทีม่ ุมซา ย และจะไมไปไหนอีก
</marquee>

ขอ ความวงิ่ และมสี พี ้นื หลงั
<marque bgcolor="blue">ขอ ความและสพี นื้ หลัง

</marquee>

Direction : กาํ หนดทศิ ทางการเคล่อื นทข่ี องตัวตัวอักษร
- Direction Left : เคลือ่ นจากดานซา ยไปขวา
- Direction Right : เคลอ่ื นจากดานขวาไปซาย

Behavior : รูปแบบการแสดงผลของตวั อกั ษร
- Behavior Alternate :แสดงตวั อกั ษรแบบเคลื่อนทไี่ ปกลับในบรรทดั เดียวกัน
- Behavior Slide : แสดงตัวอักษรแบบสไลด
- Behavior Continuous : แสดงตัวอกั ษรแบบตอ เนือ่ ง

Bgcolor : เลอื กสพี นื้ หลงั ของตวั อักษร
Width : ขอบเขตความกวา งท่ีตอ งการใหต วั อกั ษรเคลอื่ นท่จี ากดานซา ยไปขวา
หรือจากดานขวาไปซา ย มีหนวยเปน Pixel
Height : ขอบเขตความสูงทตี่ อ งการใหตัวอกั ษรเคล่อื นทจ่ี ากดา นบนลงลาง หรอื
จากดา นลา งขึ้นบน มีหนวยเปน Pixel
Speed Control : ความเร็วในการวง่ิ ของตวั อักษร

- Scroll Amount : กาํ หนดความเรว็ ในการเคลื่อนทขี่ องตวั อกั ษร
- Scroll Delay : กําหนดความตอเนอ่ื งในการเคล่ือนทข่ี องตวั อักษร

การจัดลําดับหวั ขอและเนอ้ื หาโดยใช <UL>

การจดั หวั ขอ โดยใช UL TYPE="disc"
 
<UL TYPE="disc">
<LI>INPUT UNIT ไดแก Keyboard, Mouse, Scanner </LI>
<LI>CENTRAL PROCESSING UNIT (CPU) </LI>
<LI>OUTPUT UNIT ไดแ ก Monitor, Printer, Plotter</LI>
</UL>

การจัดหวั ขอ โดยใช UL TYPE="square"
 
<UL TYPE="square">
<LI>INPUT UNIT หรือหนว ยรับขอมูล ไดแ ก Keyboard, Mouse, Scanner
</LI>
<LI>CENTRAL PROCESSING UNIT (CPU) หรือหนว ยประมวลผลกลาง
</LI>

<LI>OUTPUT UNIT หรอื หนวยแสดงผล ไดแก Monitor, Printer,
Plotter</LI>
</UL>

การจัดหวั ขอ โดยใช UL TYPE="circle" 
<UL TYPE="circle">
<LI>INPUT UNIT หรือหนว ยรับขอ มูล ไดแ ก Keyboard, Mouse,
Scanner</LI>
<LI>CENTRAL PROCESSING UNIT (CPU) หรอื หนว ยประมวลผลกลาง
</LI>

<LI>OUTPUT UNIT หรอื หนว ยแสดงผล ไดแก Monitor, Printer,
Plotter</LI>
</UL>

อธิบายคาํ ส่งั
<UL> เริ่มตน ลําดบั ขอ มูล
TYPE=".." เคร่อื งหมายลาํ ดบั ขอมูล ไดแ ก disc,
square และ circle โดยจะมี disc เปน คา Default
<LI> เริ่มตนขอ มลู ใน List
</LI> สนิ้ สดุ ขอ มูลใน List
</UL> สน้ิ สุดการลําดบั ขอ มลู

Pages:

Click to View FlipBook Version