คำสั่ง Title Title ต้อง แทรก อยู่ ระหว่าง คำสั่ง ข้อ ใด

˹��á

�йӺ��¹

��¹��

��дҹ��ͺ

��Ѳ��

:: ��ѡ

Ẻ��ͺ��͹��¹

˹��·�� 1 �š�ͧ��ྨ��䫵�

˹��·�� 2 ��鹡Ѻ HTML

Ẻ��ͺ��͹��¹

��ͧ��¹�� HTML

HTML ��

��ɳТͧ�� HTML

�ç��ҧ�� HTML4

�ç��ҧ�� HTML5

�� HTML5

��ͧ��ͷ��ҧ�͡�� HTML

��ҧ��ྨ�á�� HTML5

Ẻ�֡�Ѵ

Ẻ��ͺ��ѧ��¹

˹��·�� 3 ��èѴ��â�ͤ��

˹��·�� 4 ��ʵ��ҧ��¡��

˹��·�� 5 ��á�Ҿ

˹��·�� 6 ��ҧ��ҧ

˹��·�� 7 ��§��ྨ��ԧ��

˹��·�� 8 ��ҹ��մ��§

˹��·�� 9 ��ҧ��

Ẻ��ͺ��ѧ��¹��¹

:: ˹��·�� 1 �š�ͧ��ྨ��䫵�

�Ӫ��ᨧ

Ẻ��ͺ�ըӹǹ 10 ��
��ѡ��¹��ԡ��͡˹�Ң�ͷ��١��ͧ
��ṹ�� 10 ��ṹ
�� 10 �ҷ�

1. �Ѩ�غѹ HTML ��ͧ�� 繼��Ѳ��? �. W3C �. WWW �. IETF �. ICT 2. ��㴵��仹�� Ǣ�ͧ�Ѻ�ç��ҧ�͡�� HTML ? �. DOCTYPE �. <html>,</html> �. <title> �. Search Engines 3. �硤��㴵��仹�� ¹�� <head>? �. body �. meta �. nav �. aside 4. ��㴷�� HTML4? �. body �. meta �. header �. title5. ��㴡��١��ͧ��ǡѺ�� HTML? �. ��ҷ��㹡��ҧ��ྨ �. </body> ��Դ �. <hr> �� . ��Ǿ��е�Ǿ��˭��դ��͹�ѹ 6. �� HTML �Ѳ��Ҩҡ��? �. SGML �. PHP �. DHTML �. ASP 7. ��㴷��١�Ծ�� HTML5? �. <font> �. <frame> �. <center> �. <footer> 8. ��ҵ�ͧ��ôټ��Ѿ��㹡��ҧ��ྨ�� HTML ��ͧ��㹡�ôټ��Ѿ��? �. Notepad �. Browser �. Dreamwaver �. www 9. 㹡�õ�駪��ྨ ��ö��˹��ǹ�� ʡ��ҧ�� ? �. .asp �. .www �. .html �. .xhtml 10. ��ྨ��º�� ҵ�ͧ��㹡�úѹ�֡? �. New �. Open �. Save �. Save As

��䫵��Ѵ�Ӣ��ͻ�Сͺ��èѴ��¹��͹��͢��Թ�� (��º��Է��)
��Ѳ�� ʹ�ѡ�� ⾸�� ç��¹�ѡ�Ҫ�Է�� ӹѡ�ҹࢵ��鹷��֡��Ѹ��֡��ࢵ 31
��䫵��Ѻ��ʴ��ŷ��´ 1024 x 768. ��ҡ��
�Դ��ͼ��Ѵ��

ชนิดของภาพและแหล่งที่มา | คำสั่งในการแทรกภาพ

จากบทที่สองเราได้มีการแทรกรูปภาพลงไปเป็นพื้นหลังด้วยคำสั่ง Background="ชื่อรูปภาพ" มาแล้ว รูปภาพที่นำมาใช้ในเว็บเพจนั้นจะต้องอยู่ในสกุล JPG, GIF, PNG เท่านั้น และจะต้องมีขนาดที่เหมาะสม เพื่อให้สามารถดาวน์โหลดได้เร็ว

Images in ypur web page : การแทรกรูปภาพในเว็บเพจ

สำหรับในการแทรกรูปภาพบนหน้าเว็บเพจนั้นสามารถทำได้ง่ายๆ ด้วยการระบุคำสั่ง <IMG SRC="ชื่อรูปภาพ"> ดังตัวอย่างนี้จะเป็นการแทรกรูปภาพทั้งเป้นพื้นหลังและในหน้าเว็บเพจ

<html>
<head>
<title>
Insert Images : การแทรกภาพ
</title>
</head>
<body background="bgimage.gif">
ข้อความที่แสดงในส่วนเนื้อหา
<img src="kerokero.gif">
</body>
</html>

ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ

ข้อความที่แสดงในส่วนเนื้อหา

จะสังเกตได้ว่าคำสั่ง IMG นี้เป็นคำสั่งเดี่ยวไม่ต้องมีคำสั่งปิด เมื่อมีการเก็บรูปภาพไว้ในโฟลเดอร์ใดเป็นการเฉพาะ จะต้องกำหนดเส้นทางชี้ไปยังรูปภาพให้ถูกต้องด้วย เช่น เมื่อเก็บรูปภาพไว้ในโฟลเดอร์ชื่อ images เราจะต้องอ้างในคำสั่งเป็น <IMG SRC="images/name.gif"> หากอ้างผิดไฟล์ภาพนั้นก็จะไม่แสดงดังตัวอย่างภาพนี้

เพราะไม่มีรูปนี้อยู่จริง

หากเราต้องการแสดงรูปให้มีขนาดต่างจากขนาดจริงของภาพ ก็สามารถทำได้ ด้วยการกำหนดเพิ่มในส่วนของความกว้าง ความยาวของรูปภาพ ดังตัวอย่าง ภาพแรกคือภาพขนาดจริง ภาพที่สองเป็นการลดขนาดลง และภาพที่สามเป็นการเพิ่มขนาดขึ้น (ถ้าภาพจริงมีขนาดเล็ก เมื่อใช้คำสั่งในการเพิ่มขนาด จะทำให้ภาพนั้นไม่ละเอียดชัดเจนเหมือนต้นฉบับจริงได้)

<html>
<head>
<title>
Insert Images : การกำหนดขนาดภาพ
</title>
</head>
<body>
แสดงการกำหนดขนาดภาพ<br>
<img src="daffy.gif"><br>
<img src="daffy.gif" width="50" height="51"><br>
<img src="daffy.gif" width="150" height="153"><br>
</body>
</html>

ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ

แสดงการกำหนดขนาดภาพ

Alignment and border size for images : การวางตำแหน่งและเส้นขอบรูปภาพในเว็บเพจ

การจัดวางตำแหน่งรูปภาพ จะใช้คำสั่งเดียวกันกับการวางตำแหน่งตัวอักษร และยังสามารถกำหนดเส้นขอบรอบรูปภาพ ด้วยการเพิ่มคำสั่งคุณสมบัติเส้นขอบ border ต่อจากชื่อรูปภาพได้ดังตัวอย่าง

<html>
<head>
<title>
Insert Images : ตำแหน่งและเส้นขอบรูปภาพ
</title>
</head>
<body>
<div align="center">
ตำแหน่งและเส้นขอบรูปภาพ<br>
<img src="kerokero.gif" border="3">
</div>
</body>
</html>

ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ

ตำแหน่งและเส้นขอบรูปภาพ

นอกจากนี้แล้ว เรายังสามารถกำหนดให้มีการแสดงชื่อรูปภาพ หรือคำบรรยาย หรือรายละเอียดของรูปภาพได้ เมื่อนำเมาท์ไปชี้บนรูปนั้น หรือในกรณีที่ผู้ชมบางคนกำหนดให้บราวเซอร์ไม่ต้องแสดงผลรูปภาพ เพื่อความรวดเร็วในการชมเว็บ รูปจะถูกแทนที่ด้วยชื่อ ที่เรียกว่า Alternative text โดยใช้วิธีการเพิ่มคุณสมบัติลงไปในคำสั่งแทรกรูปภาพ ดังตัวอย่าง

END : สรุปคำสั่งที่ใช้ในบทนี้

TAGS	รายละเอียด
<img src="name">	คำสั่งการแทรกรูปภาพในตำแหน่งต่างๆ name คือชื่อรูปภาพชนิด JPG, GIF, PNG
width="x" height="y"	การกำหนดความกว้าง ความสูง ของภาพ โดย x, y มีหน่วยเป็นพิกเซล ต่อจากคำสั่ง img
alt="describe"	การกำหนดข้อความอธิบายรูปภาพว่าคือรูปอะไร ต่อจากคำสั่ง img
border="x"	การกำหนดขนาดเส้นขอบรอบรูปภาพว่า มีความกว้างเท่าใด มีหน่วยเป็น พิกเซล
<div align="left/center/right">	การกำหนดการจัดวางตำแหน่งของข้อความหรือรูปภาพ ค่าปกติคือซ้าย