P. 1
Part 9 Memasukkan Gambar Pada Layout

Part 9 Memasukkan Gambar Pada Layout

|Views: 275|Likes:
Published by Edyn Laskar

More info:

Published by: Edyn Laskar on Jan 08, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

01/25/2013

pdf

text

original

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're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->