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

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

Discover the best professional documents and content resources in AnyFlip Document Base.
Search
Published by วิรยา สีขาว, 2019-06-04 05:12:15

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

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

อธิบายคาํ สงั่
Mailto:ทอี่ ยอู ีเมล@ ปลายทาง เปนการสรางลงิ้ ค
เพือ่ สงอีเมล โดยใชโปรแกรมอีเมลในเคร่อื งของ
ผูสงเชน Outlook Express

การแทรกไฟล Multimedia

 การใสไ ฟลม ลั ตมิ เี ดยี เชน ไฟลเสยี ง เพลง, Video, Flash
เราสามารถใสไ ฟลเ พลง, ไฟล video หรือไฟล flash ลงไปในหนา เวบ็

เพจได ดว ยคาํ ส่งั <embed>
<embed> เปน คาํ สั่งแสดงการทาํ งานของโปรแกรม plug-in โดย
นําไปผนวกกับเอกสาร HTML และอาจใส tag <noembed> ควบคู
ไปดว ย เผ่อื เว็บเบราเซอรรนุ เกา ท่ยี ังไม support tag <embed> นี้.

 โครงสรา งของคาํ ส่ังการแทรกไฟล Multimedia

<embed src="url ไฟล" width="number" height="number" >
<noembed><img src="url ไฟลรูปภาพที่ใหแสดงเมือ่ ใช embed ไมไ ด"
></noembed>
</embed>

คาํ ส่งั เสรมิ สําหรบั <embed>

- src="url" url ของไฟลท่ีจะใหเ ลน ไดแ ก ไฟลเสียง (เชน .mid, .wav, .mp3)
ไฟล vedio (เชน .avi, wmv, mov, mpeg) และไฟล Flash movie (

.swf)
- width="no" กําหนดขนาดความกวางของตวั player
- height="no" กําหนดขนาดความสงู ของตวั player
- align="top | middle | bottom | left | right" จัดวางตาํ แหนง
ใหก ับวตั ถุ ที่อยูขางๆ ตวั player
- name="ชือ่ " ช่ืออา งอิงของวัตถุ
- autostart="true | false" เมื่อโหลดเว็บเพจแลว ใหเลนอัตโนมัติหรอื ไม
- loop="true | false | number" กาํ หนดเปน true เม่ือตอ งการใหเ ลนซาํ้
ไปเร่อื ยๆ หรือกําหนดเปนตัวเลข จํานวนรอบทต่ี อ งการใหเ ลนซํ้า
- playcount="no" จาํ นวนรอบท่ใี หเลน (ใชไดเ ฉพาะ IE)
- hidden="true | false" ใหซอน หรือแสดงตวั player
- volume="0 ถึง 100" กําหนด volume ของเสียง (ใชไดเ ฉพาะ Netscape)

การแทรกไฟลเ สยี ง

 ตวั อยา งการใชค าํ ส่งั เลน ไฟลเสยี ง

<embed src=“music01.mp3" width="100%"
height="60">
<noembed><img src="nosupport.gif"
></noembed>
</embed>

เฟรม การแบง จอภาพออกเปน สว น ๆ หรือ ทเ่ี รียกวา
เฟรม(frame)

การสรางชุดของ Frame จะใช tag <frameset> และกําหนด Frame
แตละหนา ดว ย tag <frame> มี attribute สาํ หรับปรับแตง Frame ไดแ ก

- noresize กาํ หนดไมใ หผใู ชป รับขนาด Frame ได
- frameborder="yes | no" ปกตจิ ะมกี รอบของ frame คั่นระหวาง
frame อยู แตถาไมต องการใหเ หน็ กาํ หนดคาเปน "no"
- marginheight="number" กําหนดระยะหาง frame จากขอบ
หนา ตางแนวตง้ั
- marginwidth="number" กาํ หนดระยะหาง frame จากขอบ
หนา ตา งแนวนอน
- scrolling="yes | no | auto" ถาหนา เวบ็ เพจยาวจะมีตัวเล่ือนโดย
อตั โนมัติ คาปกต"ิ auto" ถา ไมตอง การใหมีตวั เลื่อน ใหก ําหนดเปน "no"
- name กําหนดชอ่ื ใหกับเฟรมเพือ่ ใชเ ปนเปาหมายใหกบั คาํ ส่ัง Link

โครงสรา งของคําส่ังการแบงหนาจอแสดงผล (FRAME)

รูปแบบคําสั่ง
<HTML>

<TITLE>....................</TITLE>
<FRAMESET ROWS[หรือ COLS]="number,number">
<FRAME src="ชื่อไฟลท ่ีตองการแสดงผล หรือ URL">
<FRAME src="ชือ่ ไฟลที่ตองการแสดงผล หรือ URL">
</FRAMESET>
โดยท.ี่ .. ROWS = แบง แนวนอน COLS = แบงแนวตัง้

number = ตัวเลข เปน pixels หรอื ตัวเลขเปน % หรือ *
(หมายถึงจํานวนทเี่ หลือ)

ตัวอยา งการใชคําสัง่

<html>
<head></head>
<frameset rows="300,*"

frameborder="no" border="0">
<frame src ="logo.html">
<frame src ="main.html">
</frameset>
</html>

การแบงเฟรมแบบ 3 เฟรม

 ตวั อยา งเฟรมทจี่ ะแบง กอ นจะเขยี นแบงเฟรมตองสรา งไฟล 3 ไฟลไวก อ น
คือหนา top.html , left.html , main.html

การเขยี นหนา ยอ ยกอ นจะเขียนเฟรม

left.html

 <html>
 <head>
 <title>left frame</title>
 </head>

 <body bgcolor="yellow">
 </body>
 </html>

top.html

 <html>
 <head>
 <title>top frame</title>
 </head>

 <body bgcolor=“red">
 </body>
 </html>

main.html

 <html>
 <head>
<title>main frame</title>
 </head>
<body bgcolor=“pink">
 </body>
 </html>

การเขยี นหนา index เพ่อื แบง เฟรม

วิธีการเขียนการเชือ่ มโยงแบบเฟรม 2 frame

<html>
<head><title></title></head>
<frameset rows="300,*"

frameborder="yes" border="2">
<frame src="top.html">
<frame src="main.html">
</frameset>
</html>

ตวั อยา ง

การเขยี นเฟรมแบบ 3 เฟรมมาตรฐาน

<html>
<head><title></title></head>
<frameset rows="300,*" frameborder="yes"

border="2">
<frame src="top.html">
<frameset cols="300,*" frameborder="yes"

border="2">
<frame src="left.html">
<frame src="main.html">
</frameset></frameset></html>

ตวั อยางการสรา งเฟรม

การตกแตง เฟรมเพ่ิมเติม

<html><head><title></title></head>
<frameset rows="230,*" frameborder="No" border="0" >
<frame src="top.html" scrolling="no" name="topframe"

id="topframe“ framespacing="0">
<frameset cols="300,*" frameborder="No" border="0"

scrolling="no" framespacing="0">
<frame src="left.html" scrolling="no" name="leftframe

id="leftframe">
<frame src="main.html" name="mainframe" id="mainframe“
scrolling="no" >
</frameset></frameset></html>

ตวั อยางการเขยี น 3 เฟรม

<html ><head><title>การสรา งเฟรม</title></head>

<frameset rows="209,*" cols="*" frameborder="no"
border="0“ framespacing="0">
<frame src="top.html" name="topFrame“ crolling="no"

noresize="noresize" id="topFrame" title="topFrame" />
<frameset rows="*" cols="238,*" framespacing="0"

frameborder="no" border="0">
<frame src="left.html" name="leftFrame" scrolling="no"
noresize="noresize" id="leftFrame" title="leftFrame" />

<frame src="main.html" name="mainFrame"
id="mainFrame“ title="mainFrame" />
</frameset></frameset><noframes>
<body></body></noframes></html>

ตวั อยางทไ่ี ดเ ม่อื คลกิ เนื้อหาแลวจะโชวท่เี มนเฟรม

งานการเขยี นเวบ็ เพจดว ยภาษาHTML (ใบงาน3)

 รายละเอียด เว็บไซตข อง บรษิ ัท ขายดีดอทคอม

หนาหลกั

สินคา วธิ ีการส่งั ซ้อื ดูหนงั ฟง เพลง ดาวนโ หลด ตดิ ตอ เรา
ไฟล

สินคา มาใหม รายการสนิ คา

รายละเอยี ด รายละเอยี ด
สินคา สนิ คา

สนิ คา

 รายการสินคา ใหม

รายการสินคา ราคา จํานวนสนิ คา ภาพประกอบ หมายเหตุ
5,900.- 50 ภาพ
Printer สินคาตองสัง่ จอง
HP3700 ลว งหนา

• รายการสินคา

รายการสนิ คา ราคา จํานวนสินคา ภาพประกอบ หมายเหตุ
5,900.- 50 ภาพ
Printer สนิ คา ตองสงั่ จอง
HP3700 ลว งหนา

หนาสินคายอย

 Printer HP
 รุน 3700 (คลกิ ทรี่ นุ จะไปท่รี ายละเอียดดา นลา ง)
 รนุ 3800

 รนุ Printer HP 3700 รายละเอยี ด ภาพประกอบ

วิธสี ่งั ซื้อ

 เลือกสนิ คา..........
 โอนเงนิ ..............
 สง อีเมล..............
 ....................

ดาวนโหลดไฟล

 คมู ือการใชงานไฟล PDF
 คูมอื การใชง านไฟล Word
 อ่ืนๆ

ติดตอเรา

 ที่อยู
 เบอรโ ทร
 อ่นื ๆ

ทดสอบการเขียนเว็บเพจดวยภาษาHTML

 รายละเอยี ด เวบ็ ไซตข อง สถานที่ทองเท่ียวจงั หวดั ........................

หนา หลกั

สถานที่ แหลง ของฝาก ติดตอ ประวตั ิผเู ขยี น
ทอ งเท่ียว สอบถาม

สถานท่ี 1 สถานที่ 2 แหลงท1ี่ แหลง ท2่ี

หนา หลกั (index.html)

ใสภ าพสถานทที่ องเทีย่ วจงั หวัดนน้ั (แตง ภาพ)

สถานท่ีทอ งเทย่ี ว ภาพตวั อยางท่ีทองเทีย่ วตา งๆ (พรอ มขอความ)
แหลง ขอ มลู ของฝาก
ตดิ ตอสอบถาม
ประวัติผูจัดทํา

หนา สถานทีท่ อ งเทยี่ ว (หนายอยทาํ 5 หนา )

ภาพประกอบ

1. ชื่อสถานที่ 1.....................
2. ชอ่ื สถานท่ี 2.....................
3. ชือ่ สถานที่ 3.....................
4. ชื่อสถานท่ี 4.....................
5. ช่ือสถานท่ี 5.....................
(มีการใชค าํ ส่ังเสน คน่ั และคําสัง่ ลาํ ดบั หัวขอ )

หนา ยอยสถานทท่ี อ งเทยี่ วทาํ 5 หนา

ชอ่ื สถานที่ .....................

ภาพ1 ภาพ 2 ภาพ 3
(คลกิ ทร่ี ูปแสดงรปู ใหญได)
เนอื้ หาสถานทที่ อ งเท่ยี ว

(ใชตารางจดั เนอ้ื หาและรูปภาพ)

แหลงของฝาก (ทาํ แบบ Link ภายใน)

ชอ่ื สถานที่ 1.....................
ชื่อสถานที่ 2.....................
ชื่อสถานที่ 3.....................
ชอ่ื สถานท่ี 4.....................
ชื่อสถานท่ี 5.....................

สถานท่ี 1
ภาพประกอบ
รายละเอยี ด

สอบถามขอ มลู เพ่ิมเตมิ

 ภาพ
 รายละเอียด

 คนหาเพม่ิ เตมิ Link ไป http://www.google.co.th

ประวัติผจู ัดทํา

 รปู
 รายละเอียด

 หมายเหตุ แตละหนา ตองมีการใชค าํ ส่งั หวั ขอ กาํ หนด Font สี ขนาด ใส
พ้นื หลงั เปน ภาพ เปน สี


Click to View FlipBook Version