GIF Graphic interchange format n JPEG Joint photographic

�� ex 2_1. html <html> <head> <title>นำเสนอรปภาพ </title> </head> <body> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="pict 1. gif">

�� <html> ex 2_2. html <head> <title>นำเสนอรปภาพ </title> </head> <body text="#006600"> <center><h 1>Inserting an

�� <html> <head><title>นำเสนอรปภาพ <body> ex 2_3. html </title></head> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="pict 1. jpg" alt="รปภาพ ">

�� ex 2_4. html <html> <head><title>Insert Border</title></head> <body> <img width="400" height="300" border="3" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="pict 1.

�� ex 2_5. html <html> <head><title>ภาพพนหลง </title></head> <body background="pict 1. jpg" text="#006600"> <h 1>Hello

�� <html> <head><title>Insert Border</title></head> ex 2_6. html <body background="pict 1. jpg" bgproperties="fixed" text="#006600"> <h

�� (Link) �� <html> <head> �� <title> การเชอมโยง </title> </head> n ex 2_7. html

�� (Link) �� <html> <head> �� <title> การเชอมโยง </title> </head> n ex 2_8. html

�� (Link) �� <html> �� <head><title>Using Links</title> </head> n ex 2_9. html <body> <a

�� (Link) �� <p>The internet is a network of networks. </p> �� n <a

�� (Link) �� <html> <head> �� n ex 2_10. html <title>Main document</title> </head> <body>

�� (Link) n �� >html< ex 2_10. html >head><title>Links to Others Website</title></head< >body< >

�� (Link) n �� <html> ex 2_11. html <body> <a href = "ex 2_9.

�� (Link) n �� <html> <head> <title>Download Link</title> </head> <body> <h 1>Click image below

�� (Link) n �� <html> <head> <title>Using Image Link</title> </head> <body> <h 1>Click image

�� n �� (The layout of table) column cell row Table heading

�� <html> <head> <title>Using Tables</title> </head> <body> <table border="1"> <td> A single cell table

�� n �� <html> <head> <title>Using Tables</title> </head> <body> <table border="1"> <td>Data Cell 1</td>

�� n �� <html> <head> <title>Using Tables</title> </head> <body> <table> <tr> <td>Data Cell 1</td>

�� n �� <caption> <html><head> <title>Using Tables</title> </head> <body> <table border="1"> <caption> Creating a

�� <th> <html> <head> �� <title>Using Tables</title> <tr> </head>�� <td>Data Cell 1</td> n ex

�� Border �� <html>1<head> Pixel n ex 2_19. html <title>Using Tables</title> </head> <body> <table

�� n �� Cell �� align �� n �� valign �� align = "left"

�� n �� Cell <html> <head> <title>Using Tables</title> </head> <body> <table border="1"> <caption> Creating

�� n �� <html> <head><title>Using Tables</title> </head> <body> <table border="1" width="50%" height="20%" bgcolor="cyan"> <caption>Creating

�� n �� (Background) <head> <title>Using Tables</title> </head> <body> <table border="1" width="50%" background="pict 1.

�� n �� Border <head> <title>Using Tables</title> </head> <body> <table border="1" width="50%" bordercolor="red"> <caption>Creating

�� n �� Cell <head> Ex 2_24. html <title>Using Tables</title> </head> <body> <table border="1"

�� (Attribute) cellspacing �� Cell �� Pixel n �� (Attribute) cellpadding �� <table border

�� n �� Cellspacing �� Cellpadding <html> <head><title>Using. Tables</title></head> <body> <table border="2" bgcolor="lavender" cellspacing="2"

�� n �� Cell <html> <head><title>Using. Tables</title></head> <body> <table border="2" bgcolor="lavender" cellspacing="2" cellpadding="6"> <caption>Creating

�� n �� Cell <html> Ex 2_28. html <head> <title>ตารางทกำหนด rowspan</title> </head> <body> <table

�� (Nested table) <html> <head> Ex 2_29. html <title>ตารางซอนตาราง (Nested table)</title> </head> <body> <table

�� (Nested table) <td> <table border="0" cellpadding="0" cellspacing="0" style="bordercollapse: collapse" bordercolor="#0000 FF"> <tr> <td>เซลล

Slides: 54

Download presentation

�� GIF (Graphic interchange format) n �� JPEG (Joint photographic experts group) n �� PNG (Portable network graphic) �� n

�� ex 2_1. html <html> <head> <title>นำเสนอรปภาพ </title> </head> <body> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="pict 1. gif">

�� ex 2_1. html <html> <head> <title>นำเสนอรปภาพ </title> </head> <body> <img src="pict 1. gif"> </body> </html>

�� <html> ex 2_2. html <head> <title>นำเสนอรปภาพ </title> </head> <body text="#006600"> <center><h 1>Inserting an Images</h 1> </center> <hr> <img align="bottom" src="pict 1. gif" width="200" height="150">align at the bottom<p> <img align="top" src="pict 1. gif" width="200" height="150">align at the top<p> <img align="middle" src="pict 1. gif" width="200" height="150">align at the middle<p> <img align="left" src="pict 1. gif" width="200" height="150">align at the left <br /><br /><br /> <img align="right" src="pict 1. gif" width="200" height="150">align at the right<p> </body> </html>

�� <html> <head><title>นำเสนอรปภาพ <body> ex 2_3. html </title></head> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="pict 1. jpg" alt="รปภาพ ">

�� <html> <head><title>นำเสนอรปภาพ <body> ex 2_3. html </title></head> <img src="pict 1. jpg" alt="รปภาพ "> </body> </html>

�� ex 2_4. html <html> <head><title>Insert Border</title></head> <body> <img width="400" height="300" border="3" src="pict 1. jpg" alt = "รปภาพ "> </body> </html>

�� ex 2_5. html <html> <head><title>ภาพพนหลง </title></head> <body background="pict 1. jpg" text="#006600"> <h 1>Hello world HTML</h 1> <hr /> <h 2>หนา เพจนใชรปภาพเปน Background</h 2> </body> </html>

�� <html> <head><title>Insert Border</title></head> ex 2_6. html <body background="pict 1. jpg" bgproperties="fixed" text="#006600"> <h 1>Hello world HTML</h 1> <hr /> <h 2>This page is using image to the background</h 2> </body> </html>

�� (Link) �� <html> <head> �� <title> การเชอมโยง </title> </head> n ex 2_7. html <body> <h 1><center><font size="3" color="hotpink"> CREATING LINKS </font></center></h 1> <br /><p> แสดงการสราง Link <a href = "ex 2_8. html">คลกทนเพอแสดง </body> </html> ex 2_8. html</a></p>

�� (Link) �� <html> <head> �� <title> การเชอมโยง </title> </head> n ex 2_8. html <body> <h 1><center><font size="3" color="hotpink"> CREATING LINKS </font></center></h 1> <br /><p> แสดงการสราง Link <a href = "ex 2_7. html">คลกทนเพอแสดง </body> </html> ex 2_7. html</a></p>

�� (Link) �� <html> �� <head><title>Using Links</title> </head> n ex 2_9. html <body> <a href = "#Internet">Internet</a> <a href = "#HTML">Introduction to HTML</a> <a href = "#XHTML">Introduction to XHTML</a> <a name="Internet">Internet</a> ��

�� (Link) �� <p>The internet is a network of networks. </p> �� n <a name="HTML"> Introduction to HTML</a> <p> Hyper Text Markup Language is a standard language. </p> <a name="XHTML">Introduction to XHTML</a> <p>Extensible Hyper. Text Markup Language </p> </body> </html>

�� (Link) �� <html> <head> �� n ex 2_10. html <title>Main document</title> </head> <body> <a href = "ex 2_9. html#Internet">Internet</a><br /> <a href = "ex 2_9. html#HTML ">Introduction to HTML</a> <br /> <a href = "ex 2_9. html#Consistency">Unity and Variety</a> </body> </html>

�� (Link) n �� >html< ex 2_10. html >head><title>Links to Others Website</title></head< >body< > h 1>Click links below to link to destrination website</h 1< >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>

�� (Link) n �� <html> ex 2_11. html <body> <a href = "ex 2_9. html#Internet">Internet</a> <br /> <a href = "ex 2_9. html#HTML">Introduction to HTML</a> <br /> <a href = "ex 2_9. html#XHTML">Introduction to XHTML</a> <br /> <a href="mailto: thisperson@mymail. com">Send your queries to John Greene</a> </body> </html>

�� (Link) n �� <html> <head> <title>Download Link</title> </head> <body> <h 1>Click image below to link to destination</h 1> <p> <a href="sdat 4509. exe">Download</a> </p> </body> </html> ex 2_12. html

�� (Link) n �� <html> <head> <title>Using Image Link</title> </head> <body> <h 1>Click image below to link to destination</h 1> <p> <a href="ex 2_9. html"><img src="hello. jpg"></a> </p> </body> </html> Ex 2_13. html

�� n �� (The layout of table) column cell row Table heading

�� <html> <head> <title>Using Tables</title> </head> <body> <table border="1"> <td> A single cell table </td> </table> </body> </html> ex 2_14. html

�� n �� <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> ex 2_15. html

�� n �� <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> ex 2_16. html <tr> <td>Data Cell 4</td> <td>Data Cell 5</td> <td>Data Cell 6</td> </tr> </table> </body> </html>

�� n �� <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> ex 2_17. html

�� <th> <html> <head> �� <title>Using Tables</title> <tr> </head>�� <td>Data Cell 1</td> n ex 2_18. html <body> <table> <caption> Creating a Table </caption> <th>Employee name</th> <th>Designation</th> <td>Data Cell 2</td> </tr> </table> </body> </html>

�� Border �� <html>1<head> Pixel n ex 2_19. html <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>

�� n �� Cell �� align �� n �� valign �� align = "left" valign = "top" n n n align = "center" align = "right" align = "justify" n n n valign = "middle" valign = "bottom" valign = "baseline" �� <td align="right" valign="bottom">Data Cell 1</td>

�� n �� Cell <html> <head> <title>Using Tables</title> </head> <body> <table border="1"> <caption> Creating a Table </caption> <th>Employee name</th> ex 2_20. html <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>

�� n �� <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> Ex 2_21. html

�� n �� (Background) <head> <title>Using Tables</title> </head> <body> <table border="1" width="50%" background="pict 1. 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> Ex 2_22. html

�� n �� 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> Ex 2_23. html

�� n �� Cell <head> Ex 2_24. html <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 Cell 1</td> <td bgcolor="brown">Data Cell 2</td> <td bgcolor="brown">10000</td> </table> </body> </html>

�� (Attribute) cellspacing �� Cell �� Pixel n �� (Attribute) cellpadding �� <table border = "2" bgcolor = "lavender" �� cellspacing="2" cellpadding="6"> n <table border="2" bgcolor="lavender"

�� n �� Cellspacing �� Cellpadding <html> <head><title>Using. Tables</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> <td>Data Cell 4</td> <td>Data Cell 5</td> <td>Data Cell 6</td> </tr> </table> </body> </html> Ex 2_25. html

�� n �� Cell <html> <head><title>Using. Tables</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> <td>1000</td> <td>550</td> <td>240</td> <td>1500</td> <td>2765</td> <td>1240</td> </tr> </table> </body> </html> Ex 2_26. html

�� n �� Cell <html> <head><title>Using. Tables</title></head> <body> <table border="2" bgcolor="lavender" cellspacing="2" cellpadding="6"> <caption>Creating a Table</caption> <tr> <td align="center" colspan="3">Quarter 1</td> <td align="center" colspan="3">Quarter 2</td> </tr> <td>Jan</td> <td>Feb</td> <td>Mar</td> <td>April</td> <td>May</td> <td>Jun</td> </tr> <td>1000</td> <td>550</td> <td>240</td> <td>1500</td> <td>2765</td> <td>1240</td> </tr> </table> </body> <html> Ex 2_27. html

�� n �� Cell <html> Ex 2_28. html <head> <title>ตารางทกำหนด rowspan</title> </head> <body> <table border="1" width="300" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#3300 FF"> <tr> <td width="100" rowspan="2" valign="top" align="left">แถวแรกรวมกบแถวสอง คอลมนแรก </td> <td width="100" valign="top" align="left">แถวแรก คอลมนสอง </td> </tr> <tr> <td width="100" valign="top" align="left">แถวสอง คอลมนสอง </td> </tr> </table> </body> </html>

�� (Nested table) <html> <head> Ex 2_29. html <title>ตารางซอนตาราง (Nested table)</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#0000 FF"> <tr align="center"> <td>เซลล 1ตาราง1</td> <td>เซลล 2ตาราง2</td> </tr> <td> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#0000 FF"> <tr> <td>เซลล 1ตารางซอน 1</td> </tr> <td>เซลล 2ตารางซอน 1</td> </tr> </table> </td>

�� (Nested table) <td> <table border="0" cellpadding="0" cellspacing="0" style="bordercollapse: collapse" bordercolor="#0000 FF"> <tr> <td>เซลล 1ตารางซอน 2</td> </tr> <tr> <td>เซลล 2ตารางซอน 2</td> </tr> </table> </body> </html> ตอ