รูปแบบโค้ด ในการแทรกรูปภาพ
คำสั่ง <IMG SRC> ใช้สำหรับระบุไฟล์รูปภาพที่จะนำมาแสดง โดยไฟล์รูปภาพที่นิยมใช้บนเว็บเพจ จะมีนามสกุลเป็น .gif, .jpg มีรูปแบบคำสั่ง ดังนี้
รูปแบบคำสั่ง <IMG SRC = filename>
โดยที่ Filename คือ ชื่อไฟล์รูปภาพ โดยจะต้องระบุตำแหน่งของภาพว่าอยู่ใน ไฟล์ใดเป็นไฟล์นามสกุลอะไร
สำหรับในกรณีที่ไฟล์รูปภาพ อยู่คนละ Directory กับไฟล์เอกสาร HTML ที่ใช้เรียกไฟล์รูปภาพนั้น เมื่อต้องการเรียกใช้งานรูปภาพจึงต้องมีการระบุชื่อของ Directory ตามด้วยชื่อไฟล์ ตัวอย่าง เช่น ถ้ามีไฟล์รูปภาพชื่อ menu. gif ซึ่งอยู่ใน Directory ที่ชื่อ “picture” ซึ่งอยู่คนละ Directory กับไฟล์ HTML ก็สามารถเขียนได้เป็น <img src=”/picture/ menu.gif”> แต่ถ้าไฟล์รูปภาพอยู่ใน Directory เดียวกับไฟล์ HTML ก็ให้เขียนแค่ชื่อไฟล์รูปภาพเพียงอย่างเดียว เช่น ไฟล์ HTML และไฟล์รูปภาพ menu.gif อยู่ใน Directory ที่ชื่อ “Pictrue” เวลาเขียนก็เขียนได้เป็น
<img src =”menu.gif”>
ตัวอย่างโค๊ด
<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<CENTER>
นี่คือภาพดาราคนโปรดของฉัน><BR>
<IMG SRC="mypic.gif" BORDER=2 WIDTH=120 HIGHT=120 ALT="Super Star"><BR>
ลองทายดูซิว่าเธอคือใคร<BR>
</CENTER>
</BODY>
</HTML>
ผลลัพธ์ที่ได้
นี่คือภาพดาราคนโปรดของฉัน
ลองทายดูซิว่าเธอคือใคร
รูปภาพที่อยู่ที่เดียวกับไฟล์เว็บเพจ
การลองใส่รูปในเว็บเพจดู โดยให้เราหารูปอะไรก็ได้ในเครื่อง และ copy ให้ไปอยู่ใน folder เดียวกับไฟล์ index.html ที่เราได้ลองสร้างมาจากบทความแรก โดยรูปที่บทความนี้ใช้เป็นรูปในงานราชพฤกษ์ ที่จัดขึ้นที่เชียงใหม่ และมีชื่อรูปว่า 1.jpg
ให้เราเปิด notepad โดยไปที่ file > open และเลือกไฟล์ index.html ที่เราทำไว้จากบทความที่ผ่านมา
พิมพ์ข้อความตามด้านล่างนี้ โดยในส่วนของ <img src = "1.jpg"> ชื่อรูปที่นำมาใช้เป็น 1.jpg แต่ในส่วนของคุณก็เปลี่ยนเป็นชื่อรูปของคุณเอง
ตัวอย่างโค๊ด
<head>
<title>ทดลองใส่รูปในเว็บไซต์</title>
</head>
<body>
เที่ยวงาน ราชพฤกษ์
<br>
บรรยากาศภายในงาน
<br>
<img src = "1.jpg">
</body>
< /html>
ผลลัทธ์ที่ได้
เราจะเห็นได้ว่ามี source code ใหม่เพิ่มขึ้นมาคือ
<img src = "1.jpg"> เป็น code ที่ใช้ในการแสดงภาพ
<br> เป็น code ที่ใช้ในสั่งให้ขึ้นบรรทัดใหม่
ซึ่งเราอาจทดลองเอา <br> ที่อยู่ระหว่างประโยค เที่ยวงาน ราชพฤกษ์ และประโยค บรรยากาศภายในงาน ออกและกด save ที่ notepad
จากนั้นเราก็ไปดูผลที่ internet explorer (Web browser) ของเรา และทำการกด F5 หรือ กด Refresh เพราะ Web browser ยังแสดงผลที่เกิดจากการเปิดไฟล์ index.html ครั้งแรกอยู่ จากรูปจะเห็นว่าผลที่แสดงต่างจากเดิม โดยจะไม่มีการเว้นบรรทัดระหว่าง เที่ยวงาน ราชพฤกษ์ และ บรรยากาศภายในงาน
<img src = "1.jpg"> เป็น code ที่ใช้ในการแสดงภาพ
<br> เป็น code ที่ใช้ในสั่งให้ขึ้นบรรทัดใหม่
ซึ่งเราอาจทดลองเอา <br> ที่อยู่ระหว่างประโยค เที่ยวงาน ราชพฤกษ์ และประโยค บรรยากาศภายในงาน ออกและกด save ที่ notepad
จากนั้นเราก็ไปดูผลที่ internet explorer (Web browser) ของเรา และทำการกด F5 หรือ กด Refresh เพราะ Web browser ยังแสดงผลที่เกิดจากการเปิดไฟล์ index.html ครั้งแรกอยู่ จากรูปจะเห็นว่าผลที่แสดงต่างจากเดิม โดยจะไม่มีการเว้นบรรทัดระหว่าง เที่ยวงาน ราชพฤกษ์ และ บรรยากาศภายในงาน
web browser ไม่ได้แสดงผลในครั้งแรกที่เราเปลี่ยนแปลงไฟล์ index.html ก็เพราะว่า web browser เปิดไฟล์ index.html และแสดงผลค้างไว้ จะไม่มีการเรียกไฟล์ index.html มาอ่านซ้ำระหว่างที่มีการแสดงผล ดังนั้นเราต้องทำการกด Refresh หรือ F5 เพื่อให้ web browser ทำการเรียกไฟล์ index.html มาแสดงผลใหม่
เราอาจลองเพิ่มรูปโดย การเพิ่มบรรทัดของ <img src = "ชือรูปของคุณ"> เข้าไปอีกก็ได้
แหล่งที่มา- http://www.tanti.ac.th/Com-tranning/html/page12.html
- http://www.hellomyweb.com/index.php/main/content/2 14/09/55
