การใส่รูปในเว็บเพจ
ในบทความนี้จะเป็นการลองใส่รูปในเว็บเพจดู โดยให้เราหารูปอะไรก็ได้ในเครื่อง และ copy ให้ไปอยู่ใน folder เดียวกับไฟล์ index.html ที่เราได้ลองสร้างมาจากบทความแรก โดยรูปที่บทความนี้ใช้เป็นรูปในงานราชพฤกษ์ ที่จัดขึ้นที่เชียงใหม่ และมีชื่อรูปว่า 1.jpg
ให้เราเปิด notepad โดยไปที่ file > open และเลือกไฟล์ index.html ที่เราทำไว้จากบทความที่ผ่านมา
พิมพ์ข้อความตามด้านล่างนี้ โดยในส่วนของ <img src = "1.jpg"> ชื่อรูปที่นำมาใช้เป็น 1.jpg แต่ในส่วนของคุณก็เปลี่ยนเป็นชื่อรูปของคุณเอง
|
<html> <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 ครั้งแรกอยู่ จากรูปจะเห็นว่าผลที่แสดงต่างจากเดิม โดยจะไม่มีการเว้นบรรทัดระหว่าง เที่ยวงาน ราชพฤกษ์ และ บรรยากาศภายในงาน
web browser ไม่ได้แสดงผลในครั้งแรกที่เราเปลี่ยนแปลงไฟล์ index.html ก็เพราะว่า web browser เปิดไฟล์ index.html และแสดงผลค้างไว้ จะไม่มีการเรียกไฟล์ index.html มาอ่านซ้ำระหว่างที่มีการแสดงผล ดังนั้นเราต้องทำการกด Refresh หรือ F5 เพื่อให้ web browser ทำการเรียกไฟล์ index.html มาแสดงผลใหม่
เราอาจลองเพิ่มรูปโดย การเพิ่มบรรทัดของ <img src = "ชือรูปของคุณ"> เข้าไปอีกก็ได้ บทความนี้ก็จบเพียงแค่นี้ บทความต่อไปจะเป็นเรื่องของการเชื่อมโยงไฟล์เข้าด้วยกัน ( การสร้าง LINK )
เกี่ยวกับบทความนี้
- ระดับความยาก : พื้นฐาน
- คะแนนของบทความนี้ : 8
- สร้างเมื่อ : 16-05-2010
- จำนวนครั้งที่เปิด : 16,350
- เนื้อหาที่เกี่ยวข้อง :
- -
คลิกที่ เด็ดดวง! เพื่อโหวตให้กับบทความนี้หากคิดว่าน่าสนใจ
บทความอื่นๆในหมวดลองทำเว็บไซต์ แบบง่ายๆ (8 เรื่อง)
การทำเว็บแบบง่ายๆ
บทความนี้เกี่ยวกับการทำเว็บไซต์เบื้องต้น โดยจะแนะนำในส่วนของ HTML และ TEXT EDITOR เหมาะสำหรับผู้เริ่มต้น
สร้างเมื่อ : 16-05-2010 10:09 | จำนวนครั้งที่เปิด : 28,621
การใส่รูปในเว็บเพจ
หลังจากที่เราลองทำเว็บเพจแบบง่ายๆซึ่งมีแต่ตัวหนังสืออย่างเดียว ในบทความนี้ก็จะลองใส่รูปในเว็บเพจของเราดูบ้าง ถ้าคุณยังไม่มีพื้นฐานในการทำเว็บไซต์แนะนำว่าให้อ่านบทความ การทำเว็บแบบง่ายๆ ดูก่อน
สร้างเมื่อ : 16-05-2010 10:03 | จำนวนครั้งที่เปิด : 16,350
การเชื่อมโยงเว็บเพจด้วย link
หลังจากที่เราลองทำเว็บไซต์กันแบบง่ายๆ กันแล้ว และลองใส่รูปดูแล้ว ซึ่งในความเป็นจริงนั้นเว็บไซต์นั้นไม่ได้ประกอบด้วยไฟล์เพียงไฟล์เดียว แต่เป็นการเชื่อมโยงระหว่างไฟล์ต่างๆ เข้าด้วยกันรวมเป็นเว็บไซต์หนึ่งเว็บ ซึ่งในบทความนี้เราจะมาลองเชื่อมโยงไฟล์ต่างๆด้วย link กัน
สร้างเมื่อ : 16-05-2010 10:02 | จำนวนครั้งที่เปิด : 10,659
แสดงเว็บเพจที่คุณทำให้โลกได้เห็น
3 บทความที่ผ่านมาเราได้ลองทำเว็บเพจกันดูแล้ว มาถึงในบทความนี้จะเป็นการเผยแพร่เว็บเพจของเราให้คนอื่นได้เห็น ซึ่งก็ต้องพึ่งพาเจ้า web server ให้ช่วยซะแล้วในงานนี้
สร้างเมื่อ : 16-05-2010 9:58 | จำนวนครั้งที่เปิด : 9,665
สรุปการทำเว็บไซต์
เนื้อหาในบทนี้จะเป็นการสรุปการทำเว็บไซต์แบบคร่าวๆ เพื่อให้สามารถนึกภาพในการทำเว็บไซต์ได้
สร้างเมื่อ : 16-05-2010 9:12 | จำนวนครั้งที่เปิด : 5,642
ข้อแนะนำในการทำเว็บไซต์
ในหมวดนี้ เป็นข้อแนะนำในการทำเว็บที่ดี และเป็นเรื่องพื้นฐานที่ควรรู้
สร้างเมื่อ : 16-05-2010 9:13 | จำนวนครั้งที่เปิด : 5,066
การบีบอัดไฟล์รูป
ถึงแม้ว่ารูปจะมีข้อดีมากมาย แต่ถ้าเรามีรูปในเว็บเพจมากเกินไป หรือไฟล์รูปที่ใหญ่เกินไปจะทำให้เว็บไซต์ของเราแสดงผลได้ช้ามาก ในหัวข้อนี้จะกล่าวถึงเครื่องมือที่ใช้ในการบีบอัดไฟล์รูปให้เล็กลงโดยไม่ โดยภาพไม่เสียความชัดเจนไป
สร้างเมื่อ : 16-05-2010 9:30 | จำนวนครั้งที่เปิด : 6,185
การใช้งาน FTP ผ่าน My computer ของ window
เนื้อหาบทนี้จะสอนการอัพไฟล์ขึ้นบน web server โดยทำผ่าน My computer ในเครื่องที่เป็น window โดยไม่ต้องมีโปรแกรม FTP ในเครื่องเลย
สร้างเมื่อ : 16-05-2010 9:07 | จำนวนครั้งที่เปิด : 5,597
