Artikel kali ini adalah terusan dari artikel sebelumnya jika teman-teman yang baru bergabung silahkan lihat dulu artikel saya yang sebelumnya yang saya beri judul Membuat Layout dengan Div Element di HTML5 atau teman-teman bisa langsung saja mengklik judul tersebut, oke maka dari itu pada artikel kali ini saya beri judul yang hampir sama dengan judul cara membuat layout dengan tag div element di HTML5, Oke jangan kemana-mana simak terus ya teman-teman.
Untuk belajar cara membuat layout dengan tag div element di HTML5 dan untuk keperluan CSS dan juga JavaScript, biasanya kode HTML diatas masih ditambah dengan beberapa tag <div> lainnya yang akan membungkus bagian logo dan menu navigasi. Sehingga kode kita sebelumnya menjadi seperti berikut ini:
<div> <div> <img src="logo.jpg"> </div> <div> <ul> <li><a href="home.html">Home</a></li> <li><a href="pendaftaran.html">Pendaftaran</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="about_us.html">About Us</a></li> </ul> </div> </div>
Kode diatas mirip dengan kode kita sebelumnya, dengan tambahan dua buah tag <div> yang membungkus logo dan menu. Revisi terakhir yang diperlukan untuk kode tersebut adalah penambahan identitas untuk setiap tag div. Bisa dilakukan dengan menambahkan atribut “id” pada setiap tag <div>. Dengan demikian kita bisa mengetahui apa fungsi dari tag-tag ini. Penambahan atribut “id” juga akan bergunakan sebagai selector untuk kode CSS dan JavaScript. Berikut revisi kode programnnya:
<div id="header"> <div id="logo"> <img src="logo.jpg"> </div> <div id="menu_navigasi"> <ul> <li><a href="home.html">Home</a></li> <li><a href="pendaftaran.html">Pendaftaran</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="about_us.html">About Us</a></li> </ul> </div> </div>
Sekarang, setiap tag <div> sudah memiliki identitas masing-masing. Mirip seperti langkah-langkah sebelumnya, bagian konten, sidebar dan footer dari halaman nantinya juga akan menggunakan tag <div> untuk membagi-bagi struktur halaman. Sebagai contoh lainnya, berikut adalah kode struktur untuk bagian konten atau isi utama dari website kita plus bagian sidebar:
<div id="konten_utama"> <div id="artikel"> <div id="header_artikel"> <h1>Judul Artikel</h1> </div> <p>....isi artikel disini...</p> <p>....isi artikel disini...</p> <p>....isi artikel disini...</p> <p>....isi artikel disini...</p> </div> </div> <div id="sidebar"> <div id="sidebar_1"> <h1>Judul Sidebar 1</h1> <div id="isi_sidebar_1"> <p>....isi sideabar 1 disini...</p> </div> </div> <div id="sidebar_2"> <h1>Judul Sidebar 2</h1> <div id="isi_sidebar_2"> <p>....isi sidebar 2 disini...</p> </div> </div> </div>
Seperti yang terlihat, kita menggunakan banyak tag <div> untuk membuat pembagian struktur halaman. Untuk bagian footer, caranya relatif sama. Semua ini adalah cara standar dan juga cara terbaik untuk membuat struktur halaman, hingga kehadiran HTML5. Oke teman-teman cukup panjang penjelasan mengenai cara membuat layout dengan tag div element di HTML5, semoga terbantu dan sampai jumpa di artikel saya selanjutnya, terimakasih.
The post Cara Membuat Layout dengan Tag Div Element di HTML5 appeared first on Kursus Website Terbaik.