การใส่รูปในเว็บเพจ

    ในบทความนี้จะเป็นการลองใส่รูปในเว็บเพจดู โดยให้เราหารูปอะไรก็ได้ในเครื่อง และ 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 )

เกี่ยวกับบทความนี้

  • ระดับความยาก : พื้นฐาน
  • คะแนนของบทความนี้ : 11
  • สร้างเมื่อ : 16-05-2010
  • จำนวนครั้งที่เปิด : 180,110
  • เนื้อหาที่เกี่ยวข้อง :
      -

คะแนนความน่าสนใจ

46646

คลิกที่ เด็ดดวง! เพื่อโหวตให้กับบทความนี้หากคิดว่าน่าสนใจ

บทความอื่นๆในหมวดลองทำเว็บไซต์ แบบง่ายๆ (5 เรื่อง)

การทำเว็บแบบง่ายๆ

การทำเว็บแบบง่ายๆ

บทความนี้เกี่ยวกับการทำเว็บไซต์เบื้องต้น โดยจะแนะนำในส่วนของ HTML และ TEXT EDITOR เหมาะสำหรับผู้เริ่มต้น

สร้างเมื่อ : 16-05-2010 11:09 | จำนวนครั้งที่เปิด : 437,085


การใส่รูปในเว็บเพจ

การใส่รูปในเว็บเพจ

หลังจากที่เราลองทำเว็บเพจแบบง่ายๆซึ่งมีแต่ตัวหนังสืออย่างเดียว ในบทความนี้ก็จะลองใส่รูปในเว็บเพจของเราดูบ้าง ถ้าคุณยังไม่มีพื้นฐานในการทำเว็บไซต์แนะนำว่าให้อ่านบทความ การทำเว็บแบบง่ายๆ ดูก่อน

สร้างเมื่อ : 16-05-2010 11:03 | จำนวนครั้งที่เปิด : 180,110


การเชื่อมโยงเว็บเพจด้วย link

การเชื่อมโยงเว็บเพจด้วย link

หลังจากที่เราลองทำเว็บไซต์กันแบบง่ายๆ กันแล้ว และลองใส่รูปดูแล้ว ซึ่งในความเป็นจริงนั้นเว็บไซต์นั้นไม่ได้ประกอบด้วยไฟล์เพียงไฟล์เดียว แต่เป็นการเชื่อมโยงระหว่างไฟล์ต่างๆ เข้าด้วยกันรวมเป็นเว็บไซต์หนึ่งเว็บ ซึ่งในบทความนี้เราจะมาลองเชื่อมโยงไฟล์ต่างๆด้วย link กัน

สร้างเมื่อ : 16-05-2010 11:02 | จำนวนครั้งที่เปิด : 112,307


แสดงเว็บเพจที่คุณทำให้โลกได้เห็น

แสดงเว็บเพจที่คุณทำให้โลกได้เห็น

3 บทความที่ผ่านมาเราได้ลองทำเว็บเพจกันดูแล้ว มาถึงในบทความนี้จะเป็นการเผยแพร่เว็บเพจของเราให้คนอื่นได้เห็น ซึ่งก็ต้องพึ่งพาเจ้า web server ให้ช่วยซะแล้วในงานนี้

สร้างเมื่อ : 16-05-2010 10:58 | จำนวนครั้งที่เปิด : 85,056


สรุปการทำเว็บไซต์

สรุปการทำเว็บไซต์

เนื้อหาในบทนี้จะเป็นการสรุปการทำเว็บไซต์แบบคร่าวๆ เพื่อให้สามารถนึกภาพในการทำเว็บไซต์ได้

สร้างเมื่อ : 16-05-2010 10:12 | จำนวนครั้งที่เปิด : 73,430