Submit Search
Upload
Session4 part1
•
Download as PPTX, PDF
•
0 likes
•
78 views
S
sangkeetwittaya stourajini
Follow
ว่าด้วยเรื่องทำเว็บไซต์ภาษาHTML
Read less
Read more
Education
Report
Share
Report
Share
1 of 15
Download now
Recommended
Riesgos y amenazas de la información electrónica
Riesgos y amenazas de la información electrónica
Henry Alexander Gasca Aldana
Session4 part1
Session4 part1
sangkeetwittaya stourajini
ใบความรู้ที่ 1 บทที่ 9 เรื่อง จังหวะและเครื่องหมายกำหนดจังหวะ
ใบความรู้ที่ 1 บทที่ 9 เรื่อง จังหวะและเครื่องหมายกำหนดจังหวะ
sangkeetwittaya stourajini
Session3 part2
Session3 part2
sangkeetwittaya stourajini
Session1 part3
Session1 part3
sangkeetwittaya stourajini
Session1 part1
Session1 part1
sangkeetwittaya stourajini
Mundo Animal
Mundo Animal
AbrahamShiera
Session1 part2
Session1 part2
sangkeetwittaya stourajini
Recommended
Riesgos y amenazas de la información electrónica
Riesgos y amenazas de la información electrónica
Henry Alexander Gasca Aldana
Session4 part1
Session4 part1
sangkeetwittaya stourajini
ใบความรู้ที่ 1 บทที่ 9 เรื่อง จังหวะและเครื่องหมายกำหนดจังหวะ
ใบความรู้ที่ 1 บทที่ 9 เรื่อง จังหวะและเครื่องหมายกำหนดจังหวะ
sangkeetwittaya stourajini
Session3 part2
Session3 part2
sangkeetwittaya stourajini
Session1 part3
Session1 part3
sangkeetwittaya stourajini
Session1 part1
Session1 part1
sangkeetwittaya stourajini
Mundo Animal
Mundo Animal
AbrahamShiera
Session1 part2
Session1 part2
sangkeetwittaya stourajini
Hoja de vida kenay
Hoja de vida kenay
Henry Alexander Gasca Aldana
Session3 part1
Session3 part1
sangkeetwittaya stourajini
ใบความรู้ที่ 1 บทที่ 3 เรื่อง ลักษณะของวงดนตรีสากล
ใบความรู้ที่ 1 บทที่ 3 เรื่อง ลักษณะของวงดนตรีสากล
sangkeetwittaya stourajini
ใบความรู้ที่ 1 บทที่ 7 เรื่อง โน้ตสากล
ใบความรู้ที่ 1 บทที่ 7 เรื่อง โน้ตสากล
sangkeetwittaya stourajini
Care act
Care act
HaltonDisabilityPartnership
Session1 part1
Session1 part1
sangkeetwittaya stourajini
Session1 part3
Session1 part3
sangkeetwittaya stourajini
Session3 part2
Session3 part2
sangkeetwittaya stourajini
ใบความรู้ที่ 1 บทที่ 8 เรื่อง กุญแจประจำหลัก
ใบความรู้ที่ 1 บทที่ 8 เรื่อง กุญแจประจำหลัก
sangkeetwittaya stourajini
A leer
A leer
AbrahamShiera
หอเกียรติยศ
หอเกียรติยศ
sangkeetwittaya stourajini
Session3 part1
Session3 part1
sangkeetwittaya stourajini
ความรู้ทั่วไปเกี่ยวกับทวีปยุโรป
ความรู้ทั่วไปเกี่ยวกับทวีปยุโรป
sangkeetwittaya stourajini
Implantes de silicona
Implantes de silicona
AbrahamShiera
Alguna vez
Alguna vez
AbrahamShiera
Session2 part2
Session2 part2
sangkeetwittaya stourajini
Divorcio
Divorcio
AbrahamShiera
พระพุทธศาสนา
พระพุทธศาสนา
sangkeetwittaya stourajini
พระไตรปิฏก
พระไตรปิฏก
sangkeetwittaya stourajini
ประวัติพุทธบริษัท ภิกษุ ภิกษุณี อุบาสก อุบาสิกา
ประวัติพุทธบริษัท ภิกษุ ภิกษุณี อุบาสก อุบาสิกา
sangkeetwittaya stourajini
ประวัติพระพุทธเจ้า
ประวัติพระพุทธเจ้า
sangkeetwittaya stourajini
ชาดก
ชาดก
sangkeetwittaya stourajini
More Related Content
Viewers also liked
Hoja de vida kenay
Hoja de vida kenay
Henry Alexander Gasca Aldana
Session3 part1
Session3 part1
sangkeetwittaya stourajini
ใบความรู้ที่ 1 บทที่ 3 เรื่อง ลักษณะของวงดนตรีสากล
ใบความรู้ที่ 1 บทที่ 3 เรื่อง ลักษณะของวงดนตรีสากล
sangkeetwittaya stourajini
ใบความรู้ที่ 1 บทที่ 7 เรื่อง โน้ตสากล
ใบความรู้ที่ 1 บทที่ 7 เรื่อง โน้ตสากล
sangkeetwittaya stourajini
Care act
Care act
HaltonDisabilityPartnership
Session1 part1
Session1 part1
sangkeetwittaya stourajini
Session1 part3
Session1 part3
sangkeetwittaya stourajini
Session3 part2
Session3 part2
sangkeetwittaya stourajini
ใบความรู้ที่ 1 บทที่ 8 เรื่อง กุญแจประจำหลัก
ใบความรู้ที่ 1 บทที่ 8 เรื่อง กุญแจประจำหลัก
sangkeetwittaya stourajini
A leer
A leer
AbrahamShiera
หอเกียรติยศ
หอเกียรติยศ
sangkeetwittaya stourajini
Session3 part1
Session3 part1
sangkeetwittaya stourajini
ความรู้ทั่วไปเกี่ยวกับทวีปยุโรป
ความรู้ทั่วไปเกี่ยวกับทวีปยุโรป
sangkeetwittaya stourajini
Implantes de silicona
Implantes de silicona
AbrahamShiera
Alguna vez
Alguna vez
AbrahamShiera
Session2 part2
Session2 part2
sangkeetwittaya stourajini
Divorcio
Divorcio
AbrahamShiera
Viewers also liked
(17)
Hoja de vida kenay
Hoja de vida kenay
Session3 part1
Session3 part1
ใบความรู้ที่ 1 บทที่ 3 เรื่อง ลักษณะของวงดนตรีสากล
ใบความรู้ที่ 1 บทที่ 3 เรื่อง ลักษณะของวงดนตรีสากล
ใบความรู้ที่ 1 บทที่ 7 เรื่อง โน้ตสากล
ใบความรู้ที่ 1 บทที่ 7 เรื่อง โน้ตสากล
Care act
Care act
Session1 part1
Session1 part1
Session1 part3
Session1 part3
Session3 part2
Session3 part2
ใบความรู้ที่ 1 บทที่ 8 เรื่อง กุญแจประจำหลัก
ใบความรู้ที่ 1 บทที่ 8 เรื่อง กุญแจประจำหลัก
A leer
A leer
หอเกียรติยศ
หอเกียรติยศ
Session3 part1
Session3 part1
ความรู้ทั่วไปเกี่ยวกับทวีปยุโรป
ความรู้ทั่วไปเกี่ยวกับทวีปยุโรป
Implantes de silicona
Implantes de silicona
Alguna vez
Alguna vez
Session2 part2
Session2 part2
Divorcio
Divorcio
More from sangkeetwittaya stourajini
พระพุทธศาสนา
พระพุทธศาสนา
sangkeetwittaya stourajini
พระไตรปิฏก
พระไตรปิฏก
sangkeetwittaya stourajini
ประวัติพุทธบริษัท ภิกษุ ภิกษุณี อุบาสก อุบาสิกา
ประวัติพุทธบริษัท ภิกษุ ภิกษุณี อุบาสก อุบาสิกา
sangkeetwittaya stourajini
ประวัติพระพุทธเจ้า
ประวัติพระพุทธเจ้า
sangkeetwittaya stourajini
ชาดก
ชาดก
sangkeetwittaya stourajini
ละครรำ
ละครรำ
sangkeetwittaya stourajini
รำไทย รำวง มาตรฐานไทย
รำไทย รำวง มาตรฐานไทย
sangkeetwittaya stourajini
บรรณานุกรม ดนตรี นาฎศิลป์
บรรณานุกรม ดนตรี นาฎศิลป์
sangkeetwittaya stourajini
โขน
โขน
sangkeetwittaya stourajini
Dance
Dance
sangkeetwittaya stourajini
Thai music2
Thai music2
sangkeetwittaya stourajini
Thai music3
Thai music3
sangkeetwittaya stourajini
Thai music4
Thai music4
sangkeetwittaya stourajini
Thai music5
Thai music5
sangkeetwittaya stourajini
Thai music6
Thai music6
sangkeetwittaya stourajini
Thai music7
Thai music7
sangkeetwittaya stourajini
Thai music8
Thai music8
sangkeetwittaya stourajini
Thai music9
Thai music9
sangkeetwittaya stourajini
Thai music10
Thai music10
sangkeetwittaya stourajini
Thai music11
Thai music11
sangkeetwittaya stourajini
More from sangkeetwittaya stourajini
(20)
พระพุทธศาสนา
พระพุทธศาสนา
พระไตรปิฏก
พระไตรปิฏก
ประวัติพุทธบริษัท ภิกษุ ภิกษุณี อุบาสก อุบาสิกา
ประวัติพุทธบริษัท ภิกษุ ภิกษุณี อุบาสก อุบาสิกา
ประวัติพระพุทธเจ้า
ประวัติพระพุทธเจ้า
ชาดก
ชาดก
ละครรำ
ละครรำ
รำไทย รำวง มาตรฐานไทย
รำไทย รำวง มาตรฐานไทย
บรรณานุกรม ดนตรี นาฎศิลป์
บรรณานุกรม ดนตรี นาฎศิลป์
โขน
โขน
Dance
Dance
Thai music2
Thai music2
Thai music3
Thai music3
Thai music4
Thai music4
Thai music5
Thai music5
Thai music6
Thai music6
Thai music7
Thai music7
Thai music8
Thai music8
Thai music9
Thai music9
Thai music10
Thai music10
Thai music11
Thai music11
Session4 part1
1.
Orjix www.RongRean.com หลักสูตร สร้างเว็บด้วย HTML:
Session ที่ 4 ตอนที่ 1
2.
www.rongrean.com Orjix Contents รู้จักกับภาพกราฟฟิ กชนิดต่างๆ1 แสดงภาพบนเว็บ
<img>2 การใส่ข้อความกากับภาพ3 ปรับขนาดรูปภาพ4 การใส่กรอบให้รูปภาพ5 การจัดตาแหน่งรูปภาพ6 เพิ่มระยะระหว่างรูปกับข้อความ7
3.
Contents www.rongrean.com Orjix การทิ้งระยะระหว่างข้อความให้พ้นขอบเขตรูป <br>8 แสดงภาพเป็นฉากหลัง
<body>9 แสดงภาพฉากหลังอยู่กับที่10
4.
รู้จักกับภาพกราฟิ กชนิดต่างๆ ภาพกราฟิกมีรูปแบบการจัดเก็บอยู่หลายชนิด โดยแต่ละชนิดจะแตกต่างกันในเรื่องของ ขนาดไฟล์
และจานวนสีที่แสดงได้ สาหรับเว็บนั้นส่วนใหญ่เป็นชนิด GIF(.gif) และ JPEG(.jpg) www.rongrean.com Orjix ภาพชนิด GIF คิดค้นโดยบริษัท Compuserve แสดงรูปบนเครื่องที่แตกต่างกันได้ โดยสามารถแสดงสีได้256 สี ภาพรูปแบบนี้จะ ใช้การบีบอัดไฟล์เพื่อลดพื้นที่ในการเก็บ ข้อมูล จะใช้ได้ผลดีกับกราฟิกที่มีสีสม่าเสมอกัน เช่นภาพการตูน หรือโลโก้ที่มีการใช้สีไม่มากนัก ภาพชนิด JPEG พัฒนาโดย Joint Photographic Experts Group เป็น กราฟิกที่สามารถทางานกับเครื่องต่างแบบต่างรุ่นได้เช่นกัน สามารถแสดงสีได้สูงสุด 16.7 ล้านสี แต่อาจทาให้สูญเสียรายละเอียดไปบ้างจากการบีบอัดข้อมูลเพื่อลดขนาดภาพ ภาพ JPEG เหมาะสาหรับแสดงภาพที่มีสีสันมาก และต้องการประหยัดเนื้อที่ในการ เก็บ ภาพ แบบ GIF ภาพ แบบ jpeg
5.
แสดงภาพบนเว็บ <img> www.rongrean.com Orjix การแสดงภาพเราจะใช้แท็ก
<img/> ในการทางานดังนี้ <body> <img src="band.jpg"/> <img src="847000.gif"/> </body> ภาพแบบ jpeg ภาพแบบ gif *สังเกตว่าการแสดงเฉดสีของภาพ รูปแบบ jpeg จะมีสีสันมากกว่า ภาพรูปแบบ gif
6.
การใส่ข้อความกากับภาพ ข้อความกากับภาพ (alternate text)
จะปรากฏขึ้นมาเมื่อบราวเซอร์ไม่สามารถ แสดงภาพขึ้นมาได้ เพื่อให้ผู้ใช้ทราบว่าภาพนั้นคืออะไร www.rongrean.com Orjix <body> <img alt="band" src="band.jpg"/> <img alt="847000" src="847000.gif"/> </body> *สาเหตุที่แสดงภาพไม่ได้อาจเป็นเพราะเกิดข้อผิดพลาดในการเชื่อมโยง เช่น ภาพเสียหาย ถูกลบ หรือว่าย้าย directory ไป ในกรณีนี้ หากไม่มีข้อความกากับภาพไว้ ผู้ใช้จะไม่มีทางรู้ได้เลยว่าภาพนั้นเป็น ภาพอะไร *ประโยชน์อีกอย่างของข้อความกากับภาพคือ ในบางบราวเซอร์ถ้าเรานาเม้าส์ไปวางไว้บนรูปภาพก็จะแสดง ข้อความกากับภาพขึ้นมาให้เห็นด้วย
7.
ปรับขนาดรูปภาพ บางครั้งภาพที่เรานามาแสดงในเว็บก็อาจมีขนาดใหญ่หรือเล็กมากเกินไป เราสามารถ กาหนดขนาดของภาพได้โดยการระบุ width
และ height ของภาพ www.rongrean.com Orjix <body> <img src="band.jpg"/> <img src="band.jpg" width="300px" height="200px"/> </body> ภาพขนาดปรกติ ภาพขนาด width=“300px” height=“200px”
8.
การใส่กรอบให้รูปภาพ การใส่กรอบให้รูปภาพบางครั้งทาเพื่อเน้นรูปนั้น หรือแยกรูปออกจากข้อความให้ชัดเจน ทาได้โดยใช้ attribute
‘border’ ภายใต้แท็ก <img> www.rongrean.com Orjix <body> <img src="band.jpg"/> <img src="band.jpg" border="5px"/> </body> Border=“5px” Border=“none”
9.
การจัดตาแหน่งรูปภาพ การจัดตาแหน่งใช้เพื่อทาให้รูปภาพมีตาแหน่งเข้ากับข้อความที่มีอยู่เดิม โดยใช้ attribute ‘align’ www.rongrean.com
Orjix <table border="1px" width="100%" height="100%"> <tr> <td><img src="band.jpg" align="bottom"/>bottom</td> <td><img src="band.jpg" align="left"/>left</td> <td><img src="band.jpg" align="middle"/>middle</td> </tr> <tr> <td><img src="band.jpg" align="right"/>right</td> <td><img src="band.jpg" align="top"/>top</td> <td></td> </tr> </table> bottom ขอบล่างของภาพเสมอขอบล่างของข้อความ left จัดภาพอยู่ทางซ้าย middle กึ่งกลางของภาพเสมอกึ่งกลางของข้อความ right จัดภาพอยู่ทางขวา top ขอบบนของภาพเสมอขอบบนของข้อความ
10.
การจัดตาแหน่งรูปภาพ ตัวอย่าง www.rongrean.com Orjix
11.
เพิ่มระยะระหว่างรูปกับข้อความ ภาพที่แสดงปรกติจะถูกวางชิดกับข้อความ เราสามารถเพิ่มระยะห่างของภาพกับข้อความ เพื่อเพิ่มความสวยงามได้ โดยใช้
attribute ‘vspace’ และ ‘hspace’ www.rongrean.com Orjix <body> <img src="band.jpg" vspace="50px" hspace="50px" align="left" border="1px"/> rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com <br> </body> ภาพดั้งเดิม vspace vspace hspace hspace
12.
การทิ้งระยะระหว่างข้อความให้พ้นขอบเขตรูป <br> การจัดรูปร่วมกับข้อความ ส่วนของข้อความจะถูกพิมพ์ต่อเนื่องไปเรื่อยๆ
ซึ่งบางครั้งดูไม่ งามซักเท่าไหร่ สามารถแก้ไขได้ด้วยการทิ้งระยะข้อความให้พ้นขอบเขตรูปด้วย attribute ‘clear’ ประกาศไว้ภายใต้แท็ก <br> www.rongrean.com Orjix <body> <img src="band.jpg" align="left" border="1px"/> rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com <br clear="left"> rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com </body> ใช้<br> ธรรมดา ใช้<br clear=“left”>
13.
•ตัวอย่าง การทิ้งระยะระหว่างข้อความให้พ้นขอบเขตรูป <br> all ขึ้นบรรทัดใหม่ในบริเวณที่ด้านซ้ายและขวาไม่มีวัตถุใดขวางอยู่ left
ขึ้นบรรทัดใหม่ในบริเวณที่ด้านซ้ายไม่มีวัตถุใดขวางอยู่ right ขึ้นบรรทัดใหม่ในบริเวณที่ด้านขวาไม่มีวัตถุใดขวางอยู่ none ขึ้นบรรทัดใหม่แบบปรกติ เป็นค่า default อยู่แล้ว www.rongrean.com Orjix
14.
แสดงภาพเป็นฉากหลัง <body> เราสามารถตกแต่งเว็บเพจให้มีภาพเป็นพื้นหลังได้ โดยใส่
attribute ‘background’ ไว้ภายใต้แท็ก <body> www.rongrean.com Orjix <body background="4008482.jpg"> <p>rongrean.com rongrean.com rongrean.com <br> rongrean.com rongrean.com rongrean.com rongrean.com <br> rongrean.com rongrean.com rongrean.com rongrean.com <br> rongrean.com rongrean.com rongrean.com rongrean.com <br></p> </body>
15.
แสดงภาพฉากหลังอยู่กับที่ นอกจากใส่ภาพเป็นฉากหลังแล้ว เรายังสามารถเพิ่มลูกเล่นให้กับฉากหลังได้อีก โดยทาให้ ฉากหลังอยู่กับที่ขณะที่เราเลื่อนแถบเลื่อน(scroll
bar) ไปเรื่อยๆ <body background="4008482.jpg" bgproperties="fixed"> 1<br> 2<br> 3<br> … 30<br> </body> สังเกตว่าเวลาเลื่อน แถบเลื่อน(scroll bar) พื้นหลังจะ ไม่เลื่อนตาม
Download now