Cara mudah membuat tampilan web dengan HTML CSS
Baik kali ini saya ingin berbagi tips agar kita lebih mudah dalam mebuat desain web dengan html dan juga membuat layoutnya dengan css. Ada beberapa hal yang harus diperhatikan dalam pembuatan desain web tersebut mulai dari bagaimana kita memulai menuliskan script hingga kita memutuskan akhir dari desain tersebut
Nah karena kali ini postingan saya berjudul Cara mudah membuat tampilan web dengan HTML CSS maka disini saya contohkan agar lebih mudah dipahami
untuk membuat desain web agar mudah tipsnya adalah
Kita buat desain yang kita inginkan dari photoshop atau tools lain yang bisa menghasilkan output berupa gambar ataupun sketsa. jadi tahap pertama ini tipsnya yaitu buat desainnya dulu berupa gambar agar kita tidak bingung saat mengetikkan script karena kita sudah punya gambaran bagaimana layout yang kita inginkan misal saya contohkan disini saya akan membuat layout seperti gambar dibawah yang sebelumnya sudah saya edit menggunakan photoshop. anda bisa lihat gambarnya disini:
nah script diatas saya maksudkan untuk mempermudah saya meletakkan script dari tampilan yang akan saya buat.
kita bisa lihat gambar yang tadi sudah dibagi 3 bagian dan scripnya sudah saya tuliskan untuk 3 tempat dari tiap bagian diatas. karena postingan ini berjudul Tips mudah membuat tampilan web dengan HTML CSS maka discript saya gunakan class untuk mempermudah meletakkan cssnya. jadi kita buat cssnya di luar file html.
nah sekarang kita bisa menulis script html sekaligus cssnya jadi saya sarankan untuk membuat tampilan web dengan html agar mempermuda kita dalam menuliskannya yaitu dengan menuliskan html bersama cssnya. Jadi tidak usah menunggu script html selesai semua untuk menuliskan script cssnya. kita bisa sambil lalu menuliskannya di saat yang bersamaan bisa lihat di gambar :
jadi saya sudah mencoba memberikan contoh disini saya tuliskan script untuk headernya mungkin bisa anda lanjutkan untuk body dan footernya.
tadi saya menyebutkan bahwa sambil lalu kita bisa mengetikkan script html beserta cssnya seprti script berikut :
karena pengalaman saya akan lebih mudah dalam pengerjaan project jika kita selesaikan satu persatu.
jadi tujuan pembagian tadi yaitu untuk mempermudah kita membagi tahapan penyelesaian dalam 1 tampilan .
Mungkin Cukup sekian postingan saya mengenai tips mudah membuat tampilan web dengan html css. semoga postingan ini bermanfaat bagi kita semua.
Apabila ada pertanyaan , saran ataupun kritik monggo tinggalkan komentar
terimakasi sampai jumpa di postingan saya selanjutnya...
ini adalah tampilan yang saya inginkan ("anda bisa membuat sesuai keinginan anda")
itu contoh tampilan yang saya buat diphotoshop misalakn saja saya ingin mendesain layoutnya seperti itu. setelah kita punya gambar untuk tampilannya maka kita bisa memulai mengetikkan script htmlnya
nah tips dalam mengetikkan html untuk membuat tampilan seperti yang kita inginkan yaitu dengan cara kita membagi tampilan yang ada menjadi beberapa bagian agar membuat kita lebih mudah mengettikan script html dan cssnya
saya contohkan disini saya akan membagi gambar di atas menjadi beberapa bagian bisa anda lihat di gambar saya masih menggunakan photoshop.
Nah disitu bisa kita lihat halaman yang saya inginkan sudah menjadi 3 bagian
untuk tips menetikkan scriptnya kita bisa mengetikkan tag dari tiga bagian tersebut contoh
disini saya sudah membuat file html nah scrip pertama yang saya tuliskan adalah seperti berikut:
<!DOCTYPE html><html><head> <title>Tips membuat desain web dengan mudah menggunakan html css</title> <link rel="stylesheet" type="text/css" href="cssku.css"></head><body> <div class="halaman"> <div class="headerku"> //disini kita letakkan script dari tampilan header </div> <div class="bodyku"> //disini untuk bodynya </div> <div class="footerku"> //dan disini untuk footernya </div> </div></body></html>
nah script diatas saya maksudkan untuk mempermudah saya meletakkan script dari tampilan yang akan saya buat.
kita bisa lihat gambar yang tadi sudah dibagi 3 bagian dan scripnya sudah saya tuliskan untuk 3 tempat dari tiap bagian diatas. karena postingan ini berjudul Tips mudah membuat tampilan web dengan HTML CSS maka discript saya gunakan class untuk mempermudah meletakkan cssnya. jadi kita buat cssnya di luar file html.
nah sekarang kita bisa menulis script html sekaligus cssnya jadi saya sarankan untuk membuat tampilan web dengan html agar mempermuda kita dalam menuliskannya yaitu dengan menuliskan html bersama cssnya. Jadi tidak usah menunggu script html selesai semua untuk menuliskan script cssnya. kita bisa sambil lalu menuliskannya di saat yang bersamaan bisa lihat di gambar :
jadi saya sudah mencoba memberikan contoh disini saya tuliskan script untuk headernya mungkin bisa anda lanjutkan untuk body dan footernya.
tadi saya menyebutkan bahwa sambil lalu kita bisa mengetikkan script html beserta cssnya seprti script berikut :
<body> <div class="halaman"> <div class="headerku"> <div> <img src="./gambar.jpg" alt=""> <h1>Halaman WebKu</h1> <label><strong>Jl Raya Robatal Sampang Madura</strong></label> </div> <div class="menu"> <input type="button" name="" value="Home"> <input type="button" name="" value="Home"> <input type="button" name="" value="Home"> </div> </div> <div class="bodyku"> </div> <div class="footerku"> </div> </div></body></html>itu untuk file htmlnya dan dbawah ini untuk cssnya
.halaman{ width: 80%; margin-left: auto; margin-right: auto;}.headerku{ width: 100%;}.headerku img{ width: 150px; margin: 10px; float: left;}.headerku h1{ margin-top: 20px; padding-top: 20px; font-family: mistral; color: yellow; text-shadow: 1px 1px 1px black;}.headerku label{ font-family: arial narrow; color: blue;}.menu{ width: 100%; clear: both; margin-left: 170px;}.menu input{ width: 100px; margin:0px; padding: 10px; background-color: blue; opacity: 0.7;}.bodyku{}.footerku{}
nah dari script html dan css diatas bisa kita lihat bahwa saya hanya mengisi headernya saja untuk bodynya belum saya isi. dah outpunya seperti gambar :
jadi tujuan pembagian tadi yaitu untuk mempermudah kita membagi tahapan penyelesaian dalam 1 tampilan .
Mungkin Cukup sekian postingan saya mengenai tips mudah membuat tampilan web dengan html css. semoga postingan ini bermanfaat bagi kita semua.
Apabila ada pertanyaan , saran ataupun kritik monggo tinggalkan komentar
terimakasi sampai jumpa di postingan saya selanjutnya...
No comments:
Post a Comment
pertanyaan atau masukan
komentar tak tunggu...