Tutorial cara membuat website statis (part 9) | Memasukkan gambar pada layout
Pada tutorial kali ini saya akan coba memberikan tutorial cara memasukkan gambar pada layout yang sudah kita buat pada tutorial sebelumnya. Cara ini sangat mudah dan simple sehingga saya sangat yakin softholic mania 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 softholic mania ingin tanyakan untuk membuat website statis.
Persepsi yang harus kita samakan dahulu dalam membuat website statis :
- Website statis yang akan saya buat adalah website statis profil perusahaan listrik. Header dari website akan saya sediakan.
- 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 softholic mania ikuti karena bukan bermaksud untuk membatasi kreativitas softholic mania, tetapi hanya memudahkan jika ada pertanyaan dari softholic mania sehingga masalah dan solusi dari pertanyaan softholic mania bisa dipergunankan softholic mania yang lain.
Setelah panjang lebar membahas persamaan konseptual dalam membuat website kini saatnya kita mulai tutorialnya. Langkah pertama adalah softholic mania membuat layout seperti gambar 1.1
gambar 1.1
Jika softholic lupa atau bingung cara membuatnya, silahkan buka tutorial saya sebelumnya yang membahas tentang cara membuat layout website dengan menggunakan tabel.
Setelah softholic mania berhasil membuat layout tersebut masukkan gambar header yang sudah saya siapkan (download header.jpg | ukuran gambar 800px x 200px). Langkah-langkahnya :
- Copy gambar dengan nama “header.jpg” di dalam subfolder gambar pada folder website
- Masukkan gambar dengan mempergunakan tag HTML HTML <img> </img>
- Masukkan atrribut dan juga properties gambar pada tag HTML
Untuk lebih jelasnya softholic mania bisa langsung melihat script dibawah ini.
<html>
<head>
<title>Perusahaan Listrik Softholic | 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 softholic mania 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 softholic mania.
Related Posts
- Tutorial cara membuat website statis (part 18) | Finishing website statis
- Tutorial cara membuat website statis part (17) | Validasi form contact dengan javascript
- Tutorial cara membuat website statis (part 16) | Pengenalan dasar javascript
- Tutorial cara membuat website statis (part 15) | Membuat contact form pada layout website
- Tutorial cara membuat website statis (part 14) | Pembuatan form dengan HTML
- Tutorial cara membuat website statis (part 13) | Menggabungkan HTML dengan CSS
- Tutorial cara membuat website statis (part 12) | Belajar membuat CSS
- Tutorial cara membuat website statis (part 11) | Pengenalan dasar CSS
- Tutorial cara membuat website statis (part 10) | Membuat isi website
- Tutorial cara membuat website statis (part 8) | Cara buat layout di HTML
December 9th, 2011 at 11:14 am
bos saya pernah membuat web statis dengan ms publiher. sedikit pertanyaan apakah translator HTML ms publiher sama dengan anda punya? dan saya minta ijin feed artikel anda di blog saya. soalnya anda gak ada widget feednya/share trims…
December 9th, 2011 at 6:04 pm
sebenarnya untuk translator atau editor tidak jauh berbeda, cuma saja fitur pada ms publisher untuk GUI (graphic user interface) lebih baik karena memudahkan user.