˹���á
�йӺ����¹
�������¹����������
��дҹ����ͺ
���Ѳ��
:: ������ѡ
Ẻ���ͺ�����¹
˹��·�� 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 เท่านั้น และจะต้องมีขนาดที่เหมาะสม เพื่อให้สามารถดาวน์โหลดได้เร็ว
สำหรับในการแทรกรูปภาพบนหน้าเว็บเพจนั้นสามารถทำได้ง่ายๆ ด้วยการระบุคำสั่ง <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 โดยใช้วิธีการเพิ่มคุณสมบัติลงไปในคำสั่งแทรกรูปภาพ ดังตัวอย่าง
<img src="kerokero.gif" border="3" alt="รูปกบ kero">
END : สรุปคำสั่งที่ใช้ในบทนี้
| คำสั่งการแทรกรูปภาพในตำแหน่งต่างๆ name คือชื่อรูปภาพชนิด JPG, GIF, PNG |
| การกำหนดความกว้าง ความสูง ของภาพ โดย x, y มีหน่วยเป็นพิกเซล ต่อจากคำสั่ง img |
| การกำหนดข้อความอธิบายรูปภาพว่าคือรูปอะไร ต่อจากคำสั่ง img |
| การกำหนดขนาดเส้นขอบรอบรูปภาพว่า มีความกว้างเท่าใด มีหน่วยเป็น พิกเซล |
| การกำหนดการจัดวางตำแหน่งของข้อความหรือรูปภาพ ค่าปกติคือซ้าย |