1 / 54

รูปภาพ ลิงก์ และตาราง

รูปภาพ ลิงก์ และตาราง. รูปภาพที่ใช้งานในอินเตอร์เน็ต. ไฟล์ประเภท GIF (Graphic interchange format) ไฟล์ประเภท JPEG (Joint photographic experts group) ไฟล์ประเภท PNG (Portable network graphic) เป็นไฟล์ภาพชนิดใหม่สร้างแทนที่ GIF และ JPEG สามารถทำ Transparency ได้.

damisi
Download Presentation

รูปภาพ ลิงก์ และตาราง

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. รูปภาพ ลิงก์ และตาราง

  2. รูปภาพที่ใช้งานในอินเตอร์เน็ตรูปภาพที่ใช้งานในอินเตอร์เน็ต • ไฟล์ประเภท GIF (Graphic interchange format) • ไฟล์ประเภท JPEG (Joint photographic experts group) • ไฟล์ประเภท PNG (Portable network graphic) เป็นไฟล์ภาพชนิดใหม่สร้างแทนที่ GIF และ JPEG สามารถทำ Transparency ได้

  3. รูปภาพที่ใช้งานในอินเตอร์เน็ตรูปภาพที่ใช้งานในอินเตอร์เน็ต • ไฟล์ประเภท GIF • มีระบบสีแบบ 8 บิต indexed color ทำให้มีจำนวนสีมากที่สุดเท่ากับ 256 สี • เหมาะสำหรับกราฟิกที่ประกอบด้วยสีพื้น ๆ และไม่ซับซ้อน • ทำเป็นภาพที่มีพื้นหลังโปร่งใสได้ • ทำเป็นภาพเคลื่อนไหว (Animation) ได้

  4. รูปภาพที่ใช้งานในอินเตอร์เน็ตรูปภาพที่ใช้งานในอินเตอร์เน็ต • ไฟล์ประเภท JPEG • มีข้อมูลสีขนาด 24 บิต (True-color) แสดงสีได้มากถึง 16.7 ล้านสี • ควรนำไปใช้กับรูปถ่ายหรือกราฟิกที่ไล่ระดับสีอย่างละเอียด

  5. รูปภาพที่ใช้งานในอินเตอร์เน็ตรูปภาพที่ใช้งานในอินเตอร์เน็ต • ไฟล์ประเภท PNG (อาจเรียกว่า “ปิง”) • สนับสนุนระบบสีหลายรูปแบบทั้ง 8 บิต indexed color, 16 บิต grayscale และ 24 บิต true color • สามารถทำพื้นหลังโปร่งแสงได้ • ไฟล์ประเภท PNG ในปัจจุบันยังไม่ได้รับความนิยม แต่คาดว่าในอนาคตจะเป็นที่นิยมใช้กันแพร่หลาย

  6. การนำเสนอรูปภาพ • รูปแบบ < img src = "ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" > หรือ <img src="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" alt= "ข้อความอธิบาย" align="top/middle/bottom/left/right" width="ค่าตัวเลข" height="ค่าตัวเลข" hspace="ค่าตัวเลข" vspace="ค่าตัวเลข" border="กำหนดเป็นตัวเลข" >

  7. การนำเสนอรูปภาพ • alt เป็นการกำหนดข้อความอธิบาย โดยจะปรากฏก็ต่อเมื่อนำเมาส์ ลากมาที่รูปข้อความก็จะปรากฏ • align="top" เป็นการกำหนดข้อความที่อยู่ด้านบนของรูปภาพ • align="middle" เป็นการกำหนดข้อความที่อยู่กึ่งกลางของรูปภาพ • align="bottom" เป็นการกำหนดข้อความที่อยู่ด้านล่างของรูปภาพ • align="left" เป็นการกำหนดข้อความที่อยู่ด้านซ้ายของรูปภาพ • align="right" เป็นการกำหนดข้อความที่อยู่ด้านขวาของรูปภาพ • width การกำหนดขนาดความกว้างของรูปภาพ • height การกำหนดขนาดความสูงของรูปภาพ

  8. การนำเสนอรูปภาพ • hspace เป็นการกำหนดระยะเว้นขอบด้านซ้ายด้านขวากับรูปภาพ ในการแสดงข้อความล้อมรอบรูปนั้น เป็นวิธีที่ใช้กันมากกับรูปที่เป็นตัวสินค้าและมีคำอธิบายล้อมอยู่ข้าง ๆ แต่การที่ข้อความอยู่ใกล้กับรูปนั้น ๆ มากไปอาจทำให้เพจนั้นดูแน่นไม่น่าอ่าน ดังนั้นแท็ก <img> จึงถูกออกแบบให้มีแอตทริบิวต์ vspace และ hspace เพื่อใช้กำหนดระยะห่างระหว่างรูปและข้อความที่ล้อมรูป โดยค่าที่กำหนดนั้นอาจใช้หน่วยที่เป็นพิกเซล หรือ กำหนดเป็นเปอร์เซ็นต์ของหน้าจอแทนก็ได้ • vspace เป็นการกำหนดระยะเว้นขอบจากด้านบนด้านล่างกับรูปภาพ • border เป็นการกำหนดเส้นกรอบของรูปภาพ สำหรับการใส่เส้นขอบให้กับรูปใด ๆ นั้น ให้ใช้แอตทริบิวต์ border แล้วตามด้วยความหนาของเส้นขอบโดยมีหน่วยเป็นพิกเซล ซึ่งหากไม่กำหนดหรือกำหนดเป็นศูนย์ก็หมายความว่าไม่มีเส้นขอบนั่นเอง

  9. การนำเสนอรูปภาพ <html> <head> <title>นำเสนอรูปภาพ</title> </head> <body> <img src="pict1.gif"> </body> </html> ex2_1.html

  10. การนำเสนอรูปภาพ <html> <head> <title>นำเสนอรูปภาพ</title> </head> <body text="#006600"> <center><h1>Inserting an Images</h1> </center> <hr> <img align="bottom" src="pict1.gif" width="200" height="150">align at the bottom<p> <img align="top" src="pict1. gif" width="200" height="150">align at the top<p> <img align="middle" src="pict1. gif" width="200" height="150">align at the middle<p> <img align="left" src="pict1. gif" width="200" height="150">align at the left <br /><br /><br /><br /><br /><br /><br /><br /><br /> <img align="right" src="pict1. gif" width="200" height="150">align at the right<p> </body> </html> ex2_2.html

  11. การนำเสนอรูปภาพ <html> <head><title>นำเสนอรูปภาพ</title></head> <body> <img src="pict1.jpg" alt="รูปภาพ"> </body> </html> ex2_3.html

  12. การนำเสนอรูปภาพ <html> <head><title>Insert Border</title></head> <body> <img width="400" height="300" border="3" src="pict1.jpg" alt = "รูปภาพ"> </body> </html> ex2_4.html

  13. การนำรูปภาพเป็นพื้นหลังการนำรูปภาพเป็นพื้นหลัง • รูปแบบ <body background="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" bgproperties= "fixed"> background กำหนดรูปภาพ bgproperties = fixed การกำหนดให้รูปภาพคงที่ จะทำให้รูปภาพไม่มีการ เคลื่อนที่ตามเมื่อเลื่อน Scroll bar เมื่อข้อมูลมี ความยาวมากกว่า 1 หน้าจอ

  14. การนำรูปภาพเป็นพื้นหลังการนำรูปภาพเป็นพื้นหลัง <html> <head><title>ภาพพื้นหลัง</title></head> <body background="pict1.jpg" text="#006600"> <h1>Hello world HTML</h1> <hr /> <h2>หน้าเพจนี้ใช้รูปภาพเป็น Background</h2> </body> </html> ex2_5.html

  15. การนำรูปภาพเป็นพื้นหลังการนำรูปภาพเป็นพื้นหลัง <html> <head><title>Insert Border</title></head> <body background="pict1.jpg" bgproperties="fixed" text="#006600"> <h1>Hello world HTML</h1> <hr /> <h2>This page is using image to the background</h2> </body> </html> ex2_6.html

  16. การเชื่อมโยง (Link) HTML แบ่งการเชื่อมโยงออกเป็น 2 ประเภท ดังนี้ • การเชื่อมโยงภายในเว็บไซต์ • การเชื่อมโยงภายในเอกสาร • การเชื่อมโยงข้อมูลต่างแฟ้มเอกสาร • การเชื่อมโยงนอกเว็บไซต์

  17. การเชื่อมโยง (Link) • การเชื่อมโยงข้อมูลแฟ้มเอกสารต่างแฟ้มเอกสาร รูปแบบ <a href="ไฟล์ที่จะทำการเชื่อมโยงที่มีนามสกุล .html หรือ .htm">ข้อความ</a>

  18. การเชื่อมโยง (Link) • การเชื่อมโยงข้อมูลแฟ้มเอกสารต่างแฟ้มเอกสาร <html> <head> <title> การเชื่อมโยง</title> </head> <body> <h1><center><font size="3" color="hotpink"> CREATING LINKS </font></center></h1> <br /><br /><p> แสดงการสร้าง Link <a href = "ex2_8.html">คลิกที่นี่เพื่อแสดง ex2_8.html</a></p> </body> </html> ex2_7.html

  19. การเชื่อมโยง (Link) • การเชื่อมโยงข้อมูลแฟ้มเอกสารต่างแฟ้มเอกสาร <html> <head> <title> การเชื่อมโยง</title> </head> <body> <h1><center><font size="3" color="hotpink"> CREATING LINKS </font></center></h1> <br /><br /><p> แสดงการสร้าง Link <a href = "ex2_7.html">คลิกที่นี่เพื่อแสดง ex2_7.html</a></p> </body> </html> ex2_8.html

  20. การเชื่อมโยง (Link) • การเชื่อมโยงข้อมูลภายในแฟ้มเอกสารเดียวกัน รูปแบบ <a href="#ทำการตั้งชื่อตามความต้องการ">ข้อความ</a> <a name="ชื่อที่ตั้งไว้เพื่อที่จะทำการเชื่อมโยงมาหา">ข้อความ</a>

  21. การเชื่อมโยง (Link) • การเชื่อมโยงข้อมูลภายในแฟ้มเอกสาร <html> <head><title>Using Links</title> </head> <body> <a href = "#Internet">Internet</a> <br /> <br /> <a href = "#HTML">Introduction to HTML</a> <br /> <br /> <a href = "#XHTML">Introduction to XHTML</a> <br /> <br /> <a name="Internet">Internet</a> <br /> ex2_9.html ยังมีต่อ

  22. การเชื่อมโยง (Link) • การเชื่อมโยงข้อมูลภายในแฟ้มเอกสาร <p>The internet is a network of networks.</p> <a name="HTML"> Introduction to HTML</a> <br /> <p> Hyper Text Markup Language is a standard language. </p> <a name="XHTML">Introduction to XHTML</a> <br /> <p>Extensible HyperText Markup Language</p> </body> </html>

  23. การเชื่อมโยง (Link) • การเชื่อมโยงไปต่างแฟ้มเอกสารโดยกำหนดจุดไปด้วย <html> <head> <title>Main document</title> </head> <body> <a href = "ex2_9.html#Internet">Internet</a><br /> <a href = "ex2_9.html#HTML ">Introduction to HTML</a> <br /> <a href = "ex2_9.html#Consistency">Unity and Variety</a> </body> </html> ex2_10.html

  24. การเชื่อมโยง (Link) • การเชื่อมโยงนอกเว็บไซต์ รูปแบบ <a href="http://URLที่ต้องการจะเชื่อมโยงไป">ข้อความ</a>

  25. การเชื่อมโยง (Link) • การเชื่อมโยงนอกเว็บไซต์ <html> <head><title>Links to Others Website</title></head> <body> <h1>Click links below to link to destrination website</h1> <p><a href="http://www.sanook.com">Go to sanook.com</a></p> <p><a href="http://www.hunsa.com" target= "_blank">Go to hunsa.com</a></p> <p><a href="http://www.kapook.com">Go to kapook.com</a></p> <p><a href="http://www.thaimail.com">Go to thaimail.com</a></p> <p><a href="http://www.sanambin.com">Go to sanambin.com</a></p> </body> </html> ex2_10.html

  26. การเชื่อมโยง (Link) • การเชื่อมโยงแบบอีเมล์ รูปแบบ <a href="mailto:ชื่อ E-mail address ของผู้ที่จะให้ส่ง E-mail กลับคืนมา">ข้อความ</a>

  27. การเชื่อมโยง (Link) • การเชื่อมโยงแบบอีเมล์ <html> <body> <a href = "ex2_9.html#Internet">Internet</a> <br /> <br /> <a href = "ex2_9.html#HTML">Introduction to HTML</a> <br /> <br /> <a href = "ex2_9.html#XHTML">Introduction to XHTML</a> <br /> <br /> <br /> <a href="mailto:thisperson@mymail.com">Send your queries to John Greene</a> </body> </html> ex2_11.html

  28. การเชื่อมโยง (Link) • การเชื่อมโยงแบบดาวน์โหลด รูปแบบ <a href="ไฟล์พร้อมระบุนามสกุล">ข้อความ</a>

  29. การเชื่อมโยง (Link) • การเชื่อมโยงแบบดาวน์โหลด <html> <head> <title>Download Link</title> </head> <body> <h1>Click image below to link to destination</h1> <p> <a href="sdat4509.exe">Download</a> </p> </body> </html> ex2_12.html

  30. การเชื่อมโยง (Link) • การเชื่อมโยงด้วยรูปภาพ รูปแบบ <a href="ไฟล์ที่มีนามสกุล .html"> <img src="ชื่อไฟล์รูปภาพ .gif หรือ .jpg" alt="การเชื่อมโยงโดยรูปภาพ"> </a>

  31. การเชื่อมโยง (Link) • การเชื่อมโยงด้วยรูปภาพ <html> <head> <title>Using Image Link</title> </head> <body> <h1>Click image below to link to destination</h1> <p> <a href="ex2_9.html"><img src="hello.jpg"></a> </p> </body> </html> Ex2_13.html

  32. การสร้างตาราง • ส่วนประกอบของตาราง (The layout of table) column Table heading cell row

  33. การสร้างตาราง • ใช้แท็ก<table>ในการสร้างตาราง • การกำหนดเซลล์ (Cell) ให้กำหนดด้วยแท็ก <td> tag • ถ้าต้องการเพิ่มแถวให้ใช้แท็ก <tr>

  34. การสร้างตาราง <html> <head> <title>Using Tables</title> </head> <body> <table border="1"> <td> A single cell table </td> </table> </body> </html> ex2_14.html

  35. การสร้างตาราง • การสร้างเซลล์หลายเซลล์ <html> <head> <title>Using Tables</title> </head> <body> <table border="1"> <td>Data Cell 1</td> <td>Data Cell 2</td> <td>Data Cell 3</td> </table> </body> </html> ex2_15.html

  36. การสร้างตาราง • การสร้างแถวหลายแถว <html> <head> <title>Using Tables</title> </head> <body> <table> <tr> <td>Data Cell 1</td> <td>Data Cell 2</td> <td>Data Cell 3</td> </tr> <tr> <td>Data Cell 4</td> <td>Data Cell 5</td> <td>Data Cell 6</td> </tr> </table> </body> </html> ex2_16.html

  37. การสร้างตาราง • แท็ก<caption> • เป็นแท็กที่ใช้แสดงรายละเอียดของตารางไว้ส่วนหัวตาราง • แท็กนี้ให้กำหนดไว้หลังแท็ก <table> ทันที

  38. การสร้างตาราง • การใช้แท็ก <caption> <html><head> <title>Using Tables</title> </head> <body> <table border="1"> <caption> Creating a Table </caption> <tr> <td>Data Cell 1</td> <td>Data Cell 2</td> <td>Data Cell 3</td> </tr> <tr> <td>Data Cell 4</td> <td>Data Cell 5</td> <td>Data Cell 6</td> </tr> </table> </body> </html> ex2_17.html

  39. การสร้างตาราง • การใช้แท็ก <th> เพื่อกำหนดรายละเอียดให้คอลัมน์ <html> <head> <title>Using Tables</title> </head> <body> <table> <caption> Creating a Table </caption> <th>Employee name</th> <th>Designation</th> <tr> <td>Data Cell 1</td> <td>Data Cell 2</td> </tr> </table> </body> </html> ex2_18.html

  40. การสร้างตาราง • กำหนดให้ Border มีขนาดเส้นเป็น 1 Pixel <html> <head> <title>Using Tables</title> </head> <body> <table border="1"> <caption> Creating a Table </caption> <th>Employee name</th> <th>Designation</th> <tr> <td>Data Cell 1</td> <td>Data Cell 2</td> </tr> </table> </body> </html> ex2_19.html

  41. การสร้างตาราง • การจัดรูปแบบข้อมูลใน Cell • ใช้ alignในการจัดรูปแบบทางแนวนอน • ใช้ valignในการจัดรูปแบบทางแนวตั้ง • align = "left" • align = "center" • align = "right" • align = "justify" • valign = "top" • valign = "middle" • valign = "bottom" • valign = "baseline" เช่น <td align="right" valign="bottom">Data Cell 1</td>

  42. การสร้างตาราง • การจัดรูปแบบข้อมูลใน Cell <html> <head> <title>Using Tables</title> </head> <body> <table border="1"> <caption> Creating a Table </caption> <th>Employee name</th> <th>Designation</th> <th align="right">Salary</th> <tr> <td align="right" valign="bottom"> Data Cell 1 </td> <td>Data Cell 2</td> <td>10,000</td> </table> </body> </html> ex2_20.html

  43. การสร้างตาราง • การกำหนดขนาดความกว้างและความสูง <html> <head><title>Using Tables</title> </head> <body> <table border="1" width="50%"height="20%" bgcolor="cyan"> <caption>Creating a Table</caption> <th>Employee name</th> <th>Designation</th> <th align="right">Salary</th> <tr> <td align="right" valign="bottom">Data Cell 1</td> <td>Data Cell 2</td> <td>10000</td> </table> </body> </html> Ex2_21.html

  44. การสร้างตาราง • แทรกรูปภาพพื้นหลัง (Background) <head> <title>Using Tables</title> </head> <body> <table border="1" width="50%" background="pict1.jpg"> <caption>Creating a Table</caption> <th>Employee name</th> <th>Designation</th> <th align="right">Salary</th> <tr> <td align="right" valign="bottom">Data Cell 1</td> <td>Data Cell 2</td> <td>10000</td> </table> </body> </html> Ex2_22.html

  45. การสร้างตาราง • การกำหนดสี Border <head> <title>Using Tables</title> </head> <body> <table border="1" width="50%" bordercolor="red"> <caption>Creating a Table</caption> <th>Employee name</th> <th>Designation</th> <th align="right">Salary</th> <tr> <td align="right" valign="bottom">Data Cell 1</td> <td>Data Cell 2</td> <td>10000</td> </tr> </table> </body> </html> Ex2_23.html

  46. การสร้างตาราง • การกำหนดสีพื้นหลังใน Cell <head> <title>Using Tables</title> </head> <body> <table border="1" width="50%" bordercolor="red"> <caption>Creating a Table</caption> <th bgcolor="cyan">Employee name</th> <th bgcolor="cyan">Designation</th> <th align="right" bgcolor="cyan">Salary</th> <tr> <td align="right" valign="bottom" bgcolor="brown">Data Cell1</td> <td bgcolor="brown">Data Cell 2</td> <td bgcolor="brown">10000</td> </table> </body> </html> Ex2_24.html

  47. การสร้างตาราง • การกำหนดแอททริบิวต์ (Attribute) cellspacing เป็นการกำหนดระยะระหว่าง Cell โดยกำหนดในรูป Pixel • การกำหนดแอททริบิวต์ (Attribute) cellpadding เป็นระยะห่างระหว่างตัวหนังสือกับขอบตาราง <table border="2" bgcolor="lavender" cellspacing="2" cellpadding = "6"> เช่น <table border = "2" bgcolor = "lavender" cellspacing="2" cellpadding="6">

  48. การสร้างตาราง • การกำหนด Cellspacing และ Cellpadding <html> <head><title>UsingTables</title></head> <body> <table border="2" bgcolor="lavender" cellspacing="2" cellpadding="6"> <caption>Creating a Table</caption> <th>Employee name</th> <th>Designation</th> <th align="right">Salary</th> <tr> <td>Data Cell 1</td> <td>Data Cell 2</td> <td>Data Cell 3</td> </tr> <tr> <td>Data Cell 4</td> <td>Data Cell 5</td> <td>Data Cell 6</td> </tr> </table> </body> </html> Ex2_25.html

  49. การสร้างตาราง • การผสาน (Merge) คอลัมน์ (Column) และแถว (Row) • colspan เป็นการผสานคอลัมน์ • rowspan เป็นการผสานแถว • แอททริบิวต์ colspan ถูกใช้ในแท็ก <th> หรือ <td> ส่วน rowspan ถูกใช้ในแท็ก <td>

  50. การสร้างตาราง • การผสาน Cell <html> <head><title>UsingTables</title></head> <body> <table border="2" bgcolor="lavender" cellspacing="2" cellpadding="6"> <caption>Creating a Table</caption> <th align="center" colspan="3">Quarter 1</th> <th align="center" colspan="3">Quarter 2</th> <tr> <td>Jan</td> <td>Feb</td> <td>Mar</td> <td>April</td> <td>May</td> <td>Jun</td> </tr> <tr> <td>1000</td> <td>550</td> <td>240</td> <td>1500</td> <td>2765</td> <td>1240</td> </tr> </table> </body> </html> Ex2_26.html

More Related