ตามปกติภาพที่จะใช้แสดงในเว็บเพจ นิยมใช้ภาพที่มีชื่อสกุลของภาพเป็น .JPG หรือ .GIF เพราะเป็นไฟล์ภาพที่มีขนาดเล็ก สามารถแสดงผลได้รวดเร็ว จึงไม่ต้องเสียเวลาในการรอให้ภาพปรากฏนานเกินไป
1. ในกรณีที่ไฟล์รูปภาพอยู่ที่เดียวกับเว็บเพจ
1. ในกรณีที่ไฟล์รูปภาพอยู่ที่เดียวกับเว็บเพจ
Code : <IMG SRC = "ชื่อไฟล์รูปภาพ . นามสกุลไฟล์รูปภาพ">
code คือ
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiyD8yyNuEAcQPo9841zdHilRh9-a9SyZlNmkgYvP-wZqANQ6NC-GG-sir7hG4KV9bNbv6tIUhnJk13b8jicbNspm5Jxzo3deU5xDzm2PuW-Xi6RwsOze_1csf8uss7lmD-RdWOg9ItMLX/s320/2.jpg)
ผลที่แสดงได้
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzG7COZKclvd5jziZu21CzKN-RsbUlHbnhtlg7zdZfyiYYjcPo9txGAc3NPYjdn8bqE901fMBTC_0FZ3xdmjllYZ2L8txCj3osvwMFXdCaXNCch6_yHliK1QxTsbbQQr0I706zXXBAJ29r/s400/1.jpg)
2.ในกรณีที่ไฟล์รูปภาพอยู่คนละที่กับเว็บ
Code : <IMG SRC = "แฟ้มที่อยู่ของไฟล์รูปภาพ /ชื่อไฟล์ภาพที่เราต้องการแสดง.นามสกุลของภาพ">
code คือ
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirRYMSdnY7R1Hey8mTjK8pzzx3wayxMXIGCFjoOYzmlt61JiETf2hCkczfAKlEUr6VQNDEHO1muGLPAtKcEQ_WhtVKKITr4FdVjke4Eo5MSWjCu9ZewvWjpQmL8WQVjR5IQU9rprOmBTC2/s320/cats.jpg)
ผลที่แสดงได้
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIC_TSwwXfbjYhg67c1WtJxc3oiaZ0LajsThyjwUAV0x3nlw2oYTxRfQNgqvmz3QqPKPo-auvF9Y0HWxk6DhfppWGSv4EzXKZ66GgnblCILp96S2skdRvB5SPsTefASZhR82M9SQSYPPqL/s400/cats1.jpg)
การปรับขนาดของภาพ
ในการแทรกภาพเข้าสู่เอกสาร html นั้นขนาดของภาพอาจไม่ตรงตามที่เราต้องการ ซึ่ง html มีคำสั่งสำหรับปรับขนาดภาพโดยนำ width="" height="100" ไปต่อท้ายชื่อภาพภายในคำสั่งแสดงภาพ แล้วปรับขนาดภาพตามต้องการ ดังตัวอย่าง
<img src="ที่จัดเก็บภาพ\ชื่อภาพ.JPG" width="250" height="350"/>
code คือ
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNJueGIzV2O0cJQA_ZAMX6pbXEQxxTwA8Fs39Foi6ANJIqhdO3r0WnbklCV0ASnc5Lp8KobBTUpOsRhX-N164eVOrwZnROcAE8YuMHeWYS0nXMQNUts7nP2Rmjsjc-xaowR0GljlwmzyiA/s320/%E0%B8%81%E0%B8%A7%E0%B9%89%E0%B8%B2%E0%B8%871.jpg)
ผลที่แสดงได้
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS0MRC50gTDqMqHC4O9IIXoNWydj_Khe9NaHLzPuMNRtfYyuHBMwwTgfMGAYQtyOBDcdOPEpx8QQtyqktbKAv4nhPZhXXRLEqRbDOpxxnXnewdZgW0Aziz832GDI01m52xgqCNFd5q6AIa/s400/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%81%E0%B8%A7%E0%B9%89%E0%B8%B2%E0%B8%871.jpg)
<img src="ที่จัดเก็บภาพ\ชื่อภาพ.JPG" width="700" height="500"/>
code คือ
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX1UPqfg6WKK7DPiOU6WQlKtO0TNndW0NxXwwqsAthtFIZ2Nfpp7tfboSaxueG3nPxhDM8OluUTwmxVcUXgRVOXmJi9gObhOSvxhNnxu2BD6QzvVdW7-irbe_XcPxzMg2IilNeEiaXOT2s/s320/%E0%B8%81%E0%B8%A7%E0%B9%89%E0%B8%B2%E0%B8%872.jpg)
ผลที่แสดงได้
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi93U-Lxx9ZO3QUkZGQpR2EeeclZgiHV5XuddacM1R1IePZR4DMoN-KQ5JQufQ7_UFLHLL_fDBH_PUZZLbanIrstgjTlVEW0dKLVbTXdHWDUvSAuA4Btwc5RUOVSd3XVGFyyLx58mi-SQHw/s400/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%81%E0%B8%A7%E0%B9%89%E0%B8%B2%E0%B8%872.jpg)
(1) ALIGN=LEFT กำหนดให้รูปภาพอยู่ทางด้านซ้ายของข้อความ
<LEFT><IMG SRC="ชื่อภาพ.jpg" ></LEFT>
code คือ
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXQBkM_SpHo3R2o8-4RQlAvyK5vqt7ENHngYYTSWedcbftQGmnJCnbkt5xN6wtCot8nU72NDcuQSpNNQMCxzl0cusFiqEUzflYFAgqapgIP8DmD2NludN_cmclR-wjz5wNUQobytY36ZG/s320/2.jpg)
ผลที่แสดงได้
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi71_98xcSO4X3icOa3VLARF0hZwzsX0u_xM0D_6xoorJXp15cbH9o1CgpP16W7w7bbjYT6QKLoxvdLd3Mzltj2ly5kwm3ePnBNLzI0SNKJ6HVo6FJQj1_j2oRQGcUUtMvYrCGzdswHyUkh/s400/%25E0%25B9%2585.jpg)
(2) ALIGN=RIGHT กำหนดให้รูปภาพอยู่กึ่งกลางของข้อความ
<CENTER><IMG SRC="ชื่อภาพ.jpg" ></CENTER>
code คือ
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpUUXy1kYzK5NBDPFrKy3G0JMKbukt3tWDROYYOqgMBYDbtL1C7YRh6wAjX9xLqovKjpoDajrjE4QInl4zYYWQ2w5OTV7DhjaK_xPbFQ7VOl_Tp6gman8D_kEqoDMLpwSGmLeQ1_Hg7VQg/s320/s.jpg)
ผลที่แสดงได้
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN9JjiMzw0Ii6buSoMaPtcLbu_UCr4rRCu_r5K8zu2p-Mh-n-jNoIFRia017cOFFIUXR3JPqMMuQFLonM3dqVVlbyIIXAWovkyEe9uK1_0FAyxm63MfYfe7q9PmoS4aZ7qHK0UyeqH7ikW/s400/c.jpg)
3.ALIGN=RIGHT กำหนดให้รูปภาพอยู่ทางด้านขวาของข้อความ
<P ALIGN =RIGHT><IMG SRC="ชื่อภาพ.jpg" ></ RIGHT>
code คือ
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTOviKxkiGEDirkuuu9E7dJNMFYzEhGCra-6_BOHhmvvL2QPWRx4aCO0i0VFp1go65IvNx1sboULch7dVVt8vEhws_QkGLkYWrCJH_X1sHn8jUuPUbYJl5rZi-oBtAJHK9HAYKKo4vAmo1/s320/8.jpg)
ผลที่แสดงได้
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDZJbjTkBQwybBlGaaE8IaQWRg5xCJpSC44hFiJOmXHBMT_Zu3vX4qK9y_U7doC3yM4qZKBwTxneQm3Z1o0NpJhPeLH20FYhx6LOBfOg8Ii-1MNe1pLDBhr7OFUElB9QKnwBPuuEeMaopC/s400/3.jpg)
ขอขอบคุณแหล่งค้นคว้ามากที่สุดดดดด
ไม่มีความคิดเห็น:
แสดงความคิดเห็น