Scribd Logo
Upload

Welcome to Scribd!

  • Part 9 Memasukkan Gambar Pada Layout

    Uploaded by

    Edyn Laskar
    486 views5 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    486 views5 pages

    Part 9 Memasukkan Gambar Pada Layout

    Uploaded by

    Edyn Laskar

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    Pada tutorial kali ini saya akan coba memberikan tutorial cara memasukan gambar pada layout yang

    sudah kita buat pada tutorial sebelumnya. Cara ini sangat mudah dan simple sehingga saya sangat yakin Sahabat Bloger akan dengan mudah bisa mengikutinya. Sebelum saya mulai memberikan tutorialnya, ada baiknya kita menyamakan persepsi dalam membuat website statis dahulu sehingga tidak terjadi kebingungan jika ada yang Sobat Bloger ingin tanyakan untuk membuat website statis. Persepsi yang harus kita samakan dahulu dalam membuat website statis : 1. 2. 3. 4. 5. 6. 7. Website statis yang akan saya buat adalah website statis profil perusahaan listrik Siapkan gambar untuk header website Komponen utama dari website adalah HTML, CSS, Javascript. Isi dari website berupa text dan gambar Layout website dengan tabel Web browser yang dipergunakan adalah firefox Buat folder website, dimana pada folder website terdapat subfolder gambar dan script

    Ok, point yang sudah saya sebutkan diatas harus bisa Sobat Bloger ikuti karena bukan bermaksud untuk membatasi kreativitas Sobat Bloger, tetapi hanya memudahkan jika ada pertanyaan dari Sobat Bloger sehingga masalah dan solusi dari pertanyaan Sobat Bloger bisa dipergunankan Sobat Bloger yang lain.

    Setelah panjang lebar membahas persamaan konseptual dalam membuat website kini saatnya kita mulai tutorialnya. Langkah pertama adalah Sobat Bloger membuat layout seperti gambar 1.1 gambar 1.1

    Jika Sobat lupa atau bingung cara membuatnya, silahkan buka tutorial saya sebelumnya. Setelah Sobat Bloger berhasil membuat layout tersebut masukan gambar header yang sudah Sobat Bloger siapkan (misal : gambar header.jpg). Langkah-langkahnya :

    Copy gambar dengan nama header.jpg di dalam subfolder gambar pada folder website 2. Masukkan gambar dengan mempergunakan tag HTML <img> </img> 3. Masukkan atrribut dan juga properties gambar pada tag HTML 1. Untuk lebih jelasnya Sobat Bloger bisa langsung melihat script dibawah ini.
    <html> <head> <title>Perusahaan Listrik | Home</title> </head> <body> <table border='1px' align='center' width='800px'> <tr><td colspan='2' height='200px'><img src='gambar/header.jpg' height='200px' width='800px'</td></tr> <tr><td colspan='2' height='25px'>Menu website</td></tr> <tr><td width='200px' height='500px'>Sidebar website</td><td width='500px'>isi website</td></tr> <tr><td colspan='2' height='100px'>Footer</td></tr> </table> </body> </html>

    Jika Sobat Bloger mengikuti script yang saya buat maka hasil yang didapat akan seperti gambar 1.2

    gambar 1.2

    Saya rasa tutorial cara memasukkan gambar (header) ke dalam layout sudah cukup. Pada tutorial berikutnya saya akan membahas cara membuat menu dan juga footer berserta isi web statis itu sendiri. Semoga tutorial kali ini cukup menjelaskan konsep cara membuat website statis kepada Sobat Bloger.

    You might also like