Cara menciptakan sajian html dan css serta cara mengisi sajian tersebut dengan link atau url yang kita inginkan. Perlu diketahui bahwa sajian terdiri dari instruksi HTML sebagai pokok utama dari sajian dan CSS sebagai penghiasnya. Akan aku coba jelaskan sedikit demi sedikit.
Kode dasar HTML dari sebuah menu, kira-kira ibarat ini.
<div id="menu">
<ul>
<li><a href="URL alamat web">Beranda</a></li>
</ul>
</div>
Maka kesannya akan menjadi ibarat ini.<ul>
<li><a href="URL alamat web">Beranda</a></li>
</ul>
</div>
- Beranda
<div id="menu">
<ul>
<li><a href="URL alamat web">Beranda</a></li>
<li><a href="URL alamat web">Profil</a></li>
<li><a href="URL alamat web">Contact</a></li>
<li><a href="URL alamat web">Daftas Isi</a></li>
</ul>
</div>
Maka kesannya akan menjadi ibarat ini.<ul>
<li><a href="URL alamat web">Beranda</a></li>
<li><a href="URL alamat web">Profil</a></li>
<li><a href="URL alamat web">Contact</a></li>
<li><a href="URL alamat web">Daftas Isi</a></li>
</ul>
</div>
- Beranda
- Profil
- Contact
- Daftar Isi
Dari pola diatas, setiap sajian memiliki instruksi sendiri.
Seperti Beranda kodenya: <li><a href="URL alamat web">Beranda</a></li>.
Jadi jikalau ingin menambahkan sajian lagi, kita sanggup menambahkan instruksi dengan format
<li><a href ="URL address">Nama sajian yang akan dibuat</a></li>
Seperti Beranda kodenya: <li><a href="URL alamat web">Beranda</a></li>.
Jadi jikalau ingin menambahkan sajian lagi, kita sanggup menambahkan instruksi dengan format
<li><a href ="URL address">Nama sajian yang akan dibuat</a></li>
Dari instruksi HTML sajian diatas. Menu akan berbentuk menurun/vertical dengan bullet-list disamping kirinya. Sekarang masuk ke bab CSS/Penghias menu. Dari instruksi CSS inilah kita sanggup menciptakan sajian menjadi bentuk Horizontal atau memanjang kesamping. Mengatur warna tulisan, warna background, jarak antar goresan pena dan lain-lainnya. Kode Css akan berjalan sesuai dengan instruksi HTML yang kita buat.
Untuk cara memasangnya di blog, ke pengaturan tata letak > klik tambahkan gadget > pilih HTML/Javascipt, kemudian masukan instruksi HTML dan CSS kedalamnya Dengan format ibarat dibawah ini.
<style>Lalu Save, selesai.
kode Css
</style>
kode html
Lanjut ke bab Css. Seperti pola instruksi HTML diatas. Kita menciptakan sajian dengan Kode id=menu maka dikode Css nya juga harus menu. Contoh:
#menu { background:#eee;border:1px solid #444444;}
Maka kesannya akan menjadi ibarat ini.Selanjutnya menghilangkan bullet list. Tambahkan instruksi #menu ul {list-style:none;} Maka kesannya akan menjadi ibarat ini.
Mengatur jarak antar tulisan. Tambahkan instruksi #menu ul li {padding:5px;} hasilnya.
Mengatur warna,ukuran,tebal goresan pena tambahkan instruksi Css #menu ul li a{color:#aaaaaa;font-size:12px;font-weight:bold;} Hasilnya:
Mengatur warna goresan pena dikala disentuh mouse. tambahkan instruksi #menu ul li a:hover{color:#aaa;} Hasilnya.
Jadi instruksi keseluruhan dari instruksi HTML dan CSS diatas ialah ibarat ini.
<style>
#menu { background:#eee;border:1px solid #444444;}
#menu ul {list-style:none;}
#menu ul li {padding:5px;}
#menu ul li a{color:#000;font-size:12px;font-weight:bold;}
#menu ul li a:hover{color:#aaa;}
</style>
<div id="menu">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
</ul>
</div>
#menu { background:#eee;border:1px solid #444444;}
#menu ul {list-style:none;}
#menu ul li {padding:5px;}
#menu ul li a{color:#000;font-size:12px;font-weight:bold;}
#menu ul li a:hover{color:#aaa;}
</style>
<div id="menu">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
</ul>
</div>
Sekarang ke tahap pembuatan sajian horizontal. Kode HTML nya sama ibarat cara diatas, yang berbeda hanyalah instruksi Css nya kita tambahkan instruksi float;left pada bab #menu ul li {padding:5px;float;left; } dan juga instruksi height:40px; pada bab #menu { background:#eee;border:1px solid #444444;height:40px;} . Contoh:
<style>
#menu { background:#eee;border:1px solid #444444;height:40px;}
#menu ul {list-style:none;}
#menu ul li {padding:5px;float;left}
#menu ul li a{color:#000;font-size:12px;font-weight:bold;}
#menu ul li a:hover{color:#aaa;}
</style>
<div id="menu">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
</ul>
</div>
#menu { background:#eee;border:1px solid #444444;height:40px;}
#menu ul {list-style:none;}
#menu ul li {padding:5px;float;left}
#menu ul li a{color:#000;font-size:12px;font-weight:bold;}
#menu ul li a:hover{color:#aaa;}
</style>
<div id="menu">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
</ul>
</div>
HASILNYA
Dari contoh2 diatas, kita sanggup melihat perbedaan antara sajian horizontal dan vertical terletak pada instruksi Cssnya sedangkan instruksi HTML nya tetap sama. Silakan berkreasi sendiri. Artikel diatas hanyalah sedikit tutorial sederhana dari saya, yaitu perihal dasar pembuatan sajian memakai instruksi HTML dan Css, yang sanggup anda kembangkan sendiri sesuai dengan impian anda. Semoga Bermanfaat.
0 comments:
Post a Comment