บทที่ 11 HTML images
HTML images คือ การใส่รูปภาพในเอกสาร html
1.ใส่รูปภาพแบบปกติ ไม่มีการกำหนดอะไร
<img src="/ใส่ URL ของภาพ" />2.ในกรณีที่ต้องการใส่ชื่อภาพ ซึ่งอาจใช้เป็นข้อความสำรองในกรณีที่รูปภาพเกิดข้อผิดพลาดไม่สามารถแสดงผลบนหน้าเว็บเพจได้
<img src="/url" alt="ข้อความอธิบายภาพสำรอง"/>3.ใส่ขนาดของภาพ
<img src="/URL ของภาพ" alt="ข้อความอธิบายภาพสำรอง" width="กรอกตัวเลขที่ต้องการ" height="กรอกตัวเลขที่ต้องการ"/>โดยค่าตัวเลขที่กรอกมีหน่วยเป็น pixels
ตัวอย่าง
ผลัพธ์ที่ได้คือ
***ในการใส่รูปภาพในเอกสาร html นี้การใส่ที่อยู่ URL สำคัญมาก เพราะถ้าที่อยู่ผิดรูปจะไม่แสดง
วิธีการหาที่อยู่ URL ของรูปภาพมี 2 วิธี ดังนี้
1.การเอารูปจากเว็บไซต์
- เปิดเว็บไซต์นั้นขึ้นมา หารูปที่ต้องการ
- คลิกขวาที่รูป เลือก view image info แล้ว copy ตัว URL ในส่วน location ให้หมด
- เมื่อได้ URL ก็เอาไปใส่ในโค็ด html ได้เลย
จะสังเกตุได้ว่า จะขึ้นด้วย http และจบด้วย นามสกุล .jpg หรือ .gif
2.การเอารูปภาพจากคอมของเราเอง
- หาเวปที่ให้บริการอัพโหลดรูป เช่น //www.temppic.com
- ทำการอัพโหลดรูป พอเสร็จแล้วเราจะได้ URL
Tag ที่เกี่ยวข้อง
<img /> | กำหนดรูปภาพ |
<mapt> | กำหนดแผนที่รูปภาพ |
<area /> | กำหนดพื้นที่ที่สามารถคลิ๊กได้ภายในแผนที่รูปภาพ |
4.1 การใส่รูปภาพ
จากข้อมูลเบื้องต้นเกี่ยวกับรูปภาพที่จะใส่ในเอกสาร HTML ในขั้นตอนต่อไป จะนำรูปภาพมาใส่ในเอกสาร โดยจะใช้คำสั่งในการใส่รูปภาพ คือ
<img src="ชื่อไฟล์รูปภาพ" หรือ ชื่อ "path(ที่เก็บรูปภาพ)/ชื่อไฟล์"
หรือ "image URL">
การใส่รูปภาพ นั้น การระบุตำแหน่งที่เก็บรูปภาพ (folder)นี้ เป็นจุดสำคัญมาก ถ้าระบุที่เก็บ (path)ผิด รูปภาพจำไม่ปรากฎขึ้น จะแสดงผลเป็นกรอบรูปภาพเล็ก ๆ แล้วมีเครื่องหมายกากบาท (x)หรือ ? กำกับ (ดูตัวอย่าง)
สังเกตที่ path จะใช้เครื่องหมาย สแลช (/) ถ้าใส่เครื่องหมายผิดก็จะไม่แสดงภาพเช่นกัน เพราะอ้างอิงผิดนั่นเอง ดังตัวอย่าง
ถ้าต้องการใส่รูปภาพชื่อไฟล์ flowers.gif" ซึ่งเก็บอยู่ใน folderimages จะกำหนดได้ ดังนี้
ทดสอบการใส่รูปภาพ
ข้อควรระวังคือ เรื่องของที่เก็บภาพ (path) ตรวจสอบได้ดังนี้
ถ้าที่เก็บรูปภาพอยู่ใน folder เดียวกับไฟล์ HTML ที่ต้องการใส่รูปภาพนั้น ไม่ต้องระบุ path ก็ได้
ถ้าไฟล์ HTML อยู่ใน folder ชื่อ homepage ที่มีภาพอยู่ใน folder ชื่อ image เมื่อจะใช้คำสั่งใส่ภาพออกมา ต้องใส่ path ให้ถูกต้อง คือ <img src="image/ชื่อภาพ">
����Ѻ�ٻ�Ҿ���й����ʴ��ź�˹�����䫵��� �����Ҩ����Ҿ���¨ҡ���ͧ�����ٻ ���ͧ���Ѿ����Ͷ�������⿹ �����ҡ�ٻ���·���繡�д�� ���͡�����ҧ�ٻ�Ҿ�ҡ����������Ҿ��ҧ � ���к��ͧ�Ѻ�ٻ�Ҿ����س���ѵԵ��仹����
- ������Ҿ���ʡ�� (Type) �� .jpeg/ .gif/ .png
- ��駪����Ҿ�������ѧ�����е���Ţ ��ա����§���������������ѭ�ѡɳ��ѡâ�о����
- �������Ҿ����բ�Ҵ����Թ (File Size) 500 KB �������Ҿ�բ�Ҵ�������� ��Ъ������˹�����䫵��ʴ��������Ǣ����ҹ�鹤��
�Ը�����ٻ�Ҿ����䫵���١��ͧ
�������ٻ�Ҿ��Сͺ����������䫵��ҹ����Ѿ��Ŵ��������ͧ���
1. Log in �����ǹ��Ҫԡ ������� "�к���鹰ҹ" ��ԡ "�Ѵ��á���������� / ������" (����������� � ���������ͧ��� Text Editor ����ͧ��������ٻ�Ҿ���ͼ١�ԧ��ҡ�Ҿ�����ѧ�Ҿ�˭���)
2. ������˹�� "�Ѵ��á���������� / ������" ��ԡ�����͡���������� �ҡ��鹤�ԡ
3. ��ԡ�� "�����Ңͧ������" ��ԡ���͡�����
����ͧ����Ъ������س����ö�Ѿ��Ŵ�ٻ�Ҿ���������������䫵������ҧ���� ��§��ԡ�������ͧ��� Easy Upload Image �������͡�ٻ�Ҿ����ͧ��èҡ����ͧ���������� ��Ф�ԡ Open �ҡ����ٻ�Ҿ�ж١�Ѿ��Ŵ ������ʴ���������Ңͧ���䫵���ѹ�դ��
�س���ѵԢͧ�ٻ�Ҿ����������㹡���ʴ��ź�˹�����䫵� ����Ҿ�չ��ʡ�� (Type) �� .gif / .jpeg / .png ��駪�������������ѧ������͵���Ţ ��Ф������Ҿ����բ�Ҵ����Թ (Size) 500 KB ��������Ҿ�բ�Ҵ������СѺ����ʴ��ź�˹�����䫵� �������˹�����䫵���Ŵ�����Ū�Ҥ��
��鹵�������ٻ�Ҿ��������ͧ��� Easy Upload Image
1. ��ԡ����ͧ��� Easy Upload Image �ҡ��鹤�ԡ���� "Choose File"
2. ��ҡ�˹�ҵ�ҧ "Open" ����ԡ���͡�ٻ����ͧ����Ѿ��Ŵ �ҡ����ͧ����������ͧ�س
3. ��ԡ���� "Open"
4. �к����Ѿ��Ŵ�ٻ������ҧ������˹�ҵ�ҧ Easy Upload Image �س����ö��Ѻ��駤�ҡ���ʴ����ٻ�Ҿ�� �ѧ���
Width ��˹���Ҵ�������ҧ�ͧ�ٻ�Ҿ
Height ��˹���Ҵ�����٧�ͧ�ٻ�Ҿ
Border �����鹡�ͺ����ٻ�Ҿ �����������Ţ�ҡ��� ��鹡�ͺ����ʴ���˹Ң�鹤��
HSpace ��˹�����ҧ�����ҧ�ٻ�Ҿ��Т�ͤ�����ǹ �����������Ţ�ҡ��� ������ҧ����ҡ��鹤��
VSpace ��˹�����ҧ�����ҧ�ٻ�Ҿ��Т�ͤ�����ǵ�� �����������Ţ�ҡ��� ������ҧ����ҡ��鹤��
Align ���͡����ʴ��������ҧ�ٻ�Ҿ��Т�ͤ�����Сͺ ������ö�ٵ�����ҧ��èѴ�ҧ��ҡ��ͺ Preview ���
Short Description ����Ժ���ٻ�Ҿ��� �
�� OK ������ѹ��õ�駤���������ٻ�Ҿŧ���ǹ������
5.�ٻ�Ҿ����Ѿ��Ŵ���ʴ������ǹ������ �س����ö������������´��� � ������ͧ��� ��������º�������� ��ԡ "��ŧ" ���ͺѹ�֡
������Ѻ�������ٻ�Ҿ���ǹ���������䫵��������ǡѹ�Ѻ����ͧ��� Easy Upload Image ������ͧ��� Upload Image ���繵����ѡ㹡�èѴ����ٻ�Ҿ�������㹺�������������ͧ �� �������ź�ٻ�Ҿ�������ͧ�����ҹ ��û�Ѻ��Ҵ�ٻ�Ҿ�����ѧ�������ٻ�������к����� �繵�
�Ըա����ҹ����ͧ��� Upload Image
1. ��ԡ����ͧ���
2. �л�ҡ�˹�ҵ�ҧ "Image Properties" ��ԡ������ "Browse Server"
3. ��ҡ�˹�ҵ�ҧ FCKeditor ����ԡ���� Choose File
4. ��ҡ�˹�ҵ�ҧ "Open" ��ԡ���͡�ٻ�Ҿ����ͧ��èҡ����ͧ����������ͧ�س
5.��ԡ���� "Open"
6. ��ԡ���� Upload
��ѧ�ҡ��ԡ Upload �л�ҡ��ٻ�Ҿ���س���͡ �����ԡ����ٻ�Ҿ (��Фس����ö��ԡ�ٻ�ҡ�ҷ��ᴧ�������ҧ��Ңͧ�ٻ�Ҿ ����ź�ٻ�Ҿ�������ͧ�����ҹ�͡�ҡ�Կ����� ���ͻ����Ѵ��鹷������ҹ����)
7. �ٻ�Ҿ��� Upload �Ҩл�ҡ�㹪�ͧ Preview �س����ö��˹��س���ѵԢͧ�ٻ�Ҿ�� ��
Width ��˹���Ҵ�������ҧ�ͧ�ٻ�Ҿ
Height ��˹���Ҵ�����٧�ͧ�ٻ�Ҿ
Border �����鹡�ͺ����ٻ�Ҿ �����������Ţ�ҡ��� ��鹡�ͺ����ʴ���˹Ң�鹤��
HSpace ��˹�����ҧ�����ҧ�ٻ�Ҿ��Т�ͤ�����ǹ �����������Ţ�ҡ��� ������ҧ����ҡ��鹤��
VSpace ��˹�����ҧ�����ҧ�ٻ�Ҿ��Т�ͤ�����ǵ�� �����������Ţ�ҡ��� ������ҧ����ҡ��鹤��
Align ���͡����ʴ��������ҧ�ٻ�Ҿ��Т�ͤ�����Сͺ ������ö�ٵ�����ҧ��èѴ�ҧ��ҡ��ͺ Preview ���
Short Description ����Ժ���ٻ�Ҿ��� �
�� OK ������ѹ��õ�駤���������ٻ�Ҿŧ���ǹ������
8. �ٻ�Ҿ����Ѿ��Ŵ���ʴ������ǹ������ �س����ö������������´��� � ������ͧ��� �����ҡ��ͧ�����䢡�õ�駤����������´�ٻ�Ҿ�ա���� ������ö ��ԡ����ٻ��Ф�ԡ�������ͧ��� Upload Image ��л�ҡ�˹�ҵ�ҧ Image Properties ���
��������º����������� ��ԡ "��ŧ" ���ͺѹ�֡
��ͤ�����ѧ㹡������ٻ�Ҿ
- ��ա����§��äѴ�͡�ٻ�Ҿ�ҡ���������ҧ����������䫵� ������� � ��ҹ�Ҩ�������繤����дǡ��л����Ѵ��鹷�����䫵� ���ҡ�ѹ˹�����䫵�鹷ҧ������ʴ��ٻ�Ҿ�����Ź� ���觼�����ٻ�Ҿ���Ѵ�͡�ҹ������ʴ��ź�˹�����䫵�ͧ��ҹ�蹡ѹ���
- ��ա����§��õ�駪�������Ҿ���µ���ѡ�������� �����к����ŧ�����������ʫ���Ҩ��������ʴ����Ҿ���١��ͧ �֧��õ�駪�������Ҿ�������ѧ������͵���Ţ��ҹ�鹤��
Jittima Suebsook
www.ReadyPlanet.com