การใช้คำสั่ง Html กับ รูปภาพ ลิงก์ และตาราง

รูปภาพที่ใช้งานในอินเตอร์เน็ต

ไฟล์ประเภท GIF (Graphic interchange format)
ไฟล์ประเภท JPEG (Joint photographic experts group)
ไฟล์ประเภท PNG (Portable network graphic)
รูปภาพที่ใช้งานในอินเตอร์เน็ต
ไฟล์ประเภท GIFมีระบบสีแบบ 8 บิตindexed color ทาให้มีจานวนสีมากที่สุดเท่ากับ 256 สี
เหมาะสาหรับกราฟิกที่ประกอบด้วยสีพื้น ๆ และไม่ซับซ้อน
ทาเป็นภาพที่มีพื้นหลังโปร่งใสได้
ทาเป็นภาพเคลื่อนไหว (Animation) ได้
รูปภาพที่ใช้งานในอินเตอร์เน็ต
ไฟล์ประเภท JPEG มีข้อมูลสีขนาด 24 บิต (True-color) แสดงสีได้มากถึง 16.7 ล้านสี
ควรนาไปใช้กับรูปถ่ายหรือกราฟิกที่ไล่ระดับสีอย่างละเอียด
รูปภาพที่ใช้งานในอินเตอร์เน็ตไฟล์ประเภท PNG (อาจเรียกว่า ปิง)สนับสนุนระบบสีหลายรูปแบบทั้ง8 บิตindexed color, 16 บิตgrayscale และ 24 บิต true color
สามารถทาพื้นหลังโปร่งแสงได้ไฟล์ประเภท PNG ในปัจจุบันยังไม่ได้รับความนิยม แต่คาดว่าในอนาคตจะเป็นที่นิยมใช้กันแพร่หลาย
การนาเสนอรูปภาพ
รูปแบบ< img src = "ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" ><img src="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" alt= "ข้อความอธิบาย" align="top/middle/bottom/left/right" width="ค่าตัวเลข" height="ค่าตัวเลข" hspace="ค่าตัวเลข" vspace="ค่าตัวเลข" border="กาหนดเป็นตัวเลข" >หรือ
การนาเสนอรูปภาพaltเป็นการกาหนดข้อความอธิบาย โดยจะปรากฏก็ต่อเมื่อนาเมาส์
ลากมาที่รูปข้อความก็จะปรากฏ align="top" เป็นการกาหนดข้อความที่อยู่ด้านบนของรูปภาพ align="middle" เป็นการกาหนดข้อความที่อยู่กึ่งกลางของรูปภาพ align="bottom" เป็นการกาหนดข้อความที่อยู่ด้านล่างของรูปภาพ align="left" เป็นการกาหนดข้อความที่อยู่ด้านขวาของรูปภาพ align="right" เป็นการกาหนดข้อความที่อยู่ด้านซ้ายของรูปภาพ

width การกาหนดขนาดความกว้างของรูปภาพ
height การกาหนดขนาดความสูงของรูปภาพ

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

การนาเสนอรูปภาพ

<html>
<head>
<title>นาเสนอรูปภาพ</title>
</head>
<body>
<img src="pict1.gif">
</body>
</html>ex2_1.html
การนาเสนอรูปภาพ
<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>

การนาเสนอรูปภาพ

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

การนาเสนอรูปภาพ

<html>
<head><title>Insert Border</title></head>
<body>
<img width="400" height="300" border="3" src="pict1.jpg" alt = "รูปภาพ">
</body>
</html>

การนารูปภาพเป็นพื้นหลัง

รูปแบบ<body background="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" bgproperties= "fixed">background กาหนดรูปภาพ bgproperties = fixed การกาหนดให้รูปภาพคงที่ จะทาให้รูปภาพไม่มีการ เคลื่อนที่ตามเมื่อเลื่อน Scroll bar เมื่อข้อมูลมี ความยาวมากกว่า 1 หน้าจอ
การนารูปภาพเป็นพื้นหลัง
<html>
<head><title>ภาพพื้นหลัง</title></head>
<body background="pict1.jpg" text="#006600">
<h1>Hello world HTML</h1>
<hr />
<h2>หน้าเพจนี้ใช้รูปภาพเป็น Background</h2>
</body>
</html>

การนารูปภาพเป็นพื้นหลัง

<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>

การเชื่อมโยง (Link)

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

รูปแบบ

<a href="ไฟล์ที่จะทาการเชื่อมโยงที่มีนามสกุล .html หรือ .htm">ข้อความ</a>

การเชื่อมโยง (Link)

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

การเชื่อมโยงข้อมูลแฟ้มเอกสารต่างแฟ้มเอกสาร

การเชื่อมโยง (Link)

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

การเชื่อมโยงข้อมูลแฟ้มเอกสารต่างแฟ้มเอกสาร
การเชื่อมโยง (Link)
การเชื่อมโยงข้อมูลภายในแฟ้มเอกสารเดียวกัน

รูปแบบ

<a href="#ทาการตั้งชื่อตามความต้องการ">ข้อความ</a>
<a name="ชื่อที่ตั้งไว้เพื่อที่จะทาการเชื่อมโยงมาหา">ข้อความ</a>
การเชื่อมโยง (Link)
<html>
<head><title>UsingLinks</title></head>
<body>
<ahref="#Internet">Internet</a>
<br/><br/>
<ahref="#HTML">IntroductiontoHTML</a>
<br/><br/>
<ahref="#XHTML">IntroductiontoXHTML</a>
<br/><br/>
<aname="Internet">Internet</a>
<br/>

การเชื่อมโยงข้อมูลภายในแฟ้มเอกสาร ยังมีต่อ
การเชื่อมโยง (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>

การเชื่อมโยงข้อมูลภายในแฟ้มเอกสาร
การเชื่อมโยง (Link)

<html><head>
<title>Maindocument</title>
</head>
<body>
<ahref="ex2_9.html#Internet">Internet</a><br/>
<ahref="ex2_9.html#HTML">IntroductiontoHTML</a>
<br />
<a href = "ex2_9.html#Consistency">Unity and Variety</a>
</body>
</html>

การเชื่อมโยงไปต่างแฟ้มเอกสารโดยกาหนดจุดไปด้วย

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

การเชื่อมโยงนอกเว็บไซต์

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

การเชื่อมโยงแบบอีเมล์

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

การเชื่อมโยงแบบดาวน์โหลด

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

การเชื่อมโยงด้วยรูปภาพ

การสร้างตาราง

ส่วนประกอบของตาราง (The layout of table)
column
row
Table
heading
cell
การสร้างตาราง
ใช้แท็ก<table>ในการสร้างตารางการกาหนดเซลล์ (Cell) ให้กาหนดด้วยแท็ก <td>tag
ถ้าต้องการเพิ่มแถวให้ใช้แท็ก <tr>

การสร้างตาราง

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

การสร้างตาราง

<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>

การสร้างเซลล์หลายเซลล์

<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>

การสร้างตาราง

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

<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>การใช้แท็ก <caption>
<tr>
<td>Data Cell 4</td>
<td>Data Cell 5</td>
<td>Data Cell 6</td>
</tr>
</table>
</body>
</html>

การสร้างตาราง

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

การสร้างตาราง

<html> <head>
<title>Using Tables</title>
</head>
<body>
<table border="1">
<caption>
Creating a Table
</caption>
<th>Employee name</th>
<th>Designation</th>

กาหนดให้ Border มีขนาดเส้นเป็น 1 Pixel

การสร้างตาราง
การจัดรูปแบบข้อมูลใน 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>

การสร้างตาราง

<html>
<head>
<title>Using Tables</title>
</head>
<body>
<table border="1">
<caption>
Creating a Table
</caption>
<th>Employee name</th>
การจัดรูปแบบข้อมูลใน Cell
<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>

การสร้างตาราง

<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>

การกาหนดขนาดความกว้างและความสูง

การสร้างตาราง
<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>

แทรกรูปภาพพื้นหลัง (Background)

<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>

การกาหนดสี Border

<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>

การกาหนดสีพื้นหลังใน Cell

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

การกาหนด Cellspacing และ Cellpadding

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

การผสานCell

<html>
<head><title>UsingTables</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>
<tr>
<td>Jan</td> <td>Feb</td>
<td>Mar</td> <td>April</td>
<td>May</td> <td>Jun</td>
</tr>
การผสานCell
<tr>
<td>1000</td>
<td>550</td>
<td>240</td>
<td>1500</td>
<td>2765</td>
<td>1240</td>
</tr>
</table>
</body>
<html>

<html>
<head>
<title>ตารางที่กาหนดrowspan</title>
</head>
<body>
<table border="1" width="300" cellpadding="0" cellspacing="0" style="border-collapse:collapse"
bordercolor="#3300FF">
<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>

การผสานCell

ตารางซ้อนตาราง (Nested table)

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

ตารางซ้อนตาราง (Nested table)

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

สอนเขียนโปรแกรม html php css Java SQL jQuery XML Ajax

หน้าเว็บ

วันอาทิตย์ที่ 5 เมษายน พ.ศ. 2558

การใช้คำสั่ง Html กับ รูปภาพ ลิงก์ และตาราง

0 ความคิดเห็น:

แสดงความคิดเห็น

พื้นที่โฆษณา

พื้นที่โฆษณา

Search

Blogger templates

Popular Posts

Blogger news

Blogroll

พื้นที่โฆษณา

About

พื้นที่โฆษณา

Blog Archive

Category List