BatWeber

Assalamu'alaikum Warahmatullaahi Wabarakatuh

Pada artikel sebelumnya kita telah mempelajari tentang Class. Kali ini kita akan belajar tentang layout dengan HTML. Yang dimaksud layout pada HTML di sini adalah cara kita membagi-bagi sebuah halaman HTML menjadi beberapa bagian, misalnya seperti majalah. Ada bagian judul, bagian isi, samping. dan bagian bawah atau kaki. Misalnya seperti berikut :

Header
Navigasi
Sidebar	Konten
Footer

Dalam membuat sebuah tampilan layout pada halaman HTML kita bisa menggunakan tiga cara. Yaitu :

Menggunakan <div>
Menggunakan elemen HTML5
Menggunakan <table>

1. Membuat Layout Menggunakan tag <div>

Untuk menggunakan tag <div> coba buat file dengan isi scrypt berikut :


<body>

<div id="header">
<h1>Galeri Kota</h1>
</div>

   <div id="nav">
London<br>
Paris<br>
Tokyo
</div>

   <div id="section">
<h1>London</h1>
<p>London adalah sebuah kota yang merupakan Ibu kota dari Negara Inggris</p>

</div>

  <div id="footer">
Copyright © batcomputer93.blogspot.co.id</div>

</body>

Kemudian save file tersebut. Misalnya dengan nama layout_div.html. Selanjutnya, tambahkan scrypt berikut :


<style>

 #header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}

 #nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}

 #section {
    width:350px;
    float:left;
    padding:10px; 
}

 #footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

</style>

2. Membuat Layout dengan menggunakan Elemen HTML5

Pada HTML5, kita telah disediakan elemen semantik untuk membuat layout. Berikut elemen semantik yang dimiliki HTML5 :

Sumber : www.w3schools.com

<header> = Elemen untuk header laman
<nav> = Elemen untuk bagian navigasi
<section> = Elemen untuk membuat sebuah bagian (section) dari sebuah laman
<article> = Mendefinisikan sebuah bagian independen yang berisi artikel
<aside> = Mendefinisikan bagian pinggir dari dokumen. (Misal : Sidebar, dsb)
<footer> = Mendefinisikan kaki dokumen
<details> = Mendefinisikan detail tambahan
<summary> = Mendefinisikan heading dari elemen <details>

Untuk lebih jelasnya, bisa dipraktekkan dengan menulis scrypt berikut :


<body>

<header>
<h1>Galeri Kota</h1>
</header>
<nav> London<br> Paris<br> Tokyo

 </nav>
   <section> <h1>London</h1> <p>London adalah sebuah kota yang merupakan Ibu kota dari Negara Inggris</p>

</section>
<footer> Copyright © batcomputer93.blogspot.co.id
</footer>

</body>

<style>

 header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}

 nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}

 section {
    width:350px;
    float:left;
    padding:10px; 
}

 footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

</style>

Tampilan di atas merupakan hasil dari kedua scrypt yang telah Anda buat di atas. Keduanya menghasilkan tampilan yang sama. Saya di sini lebih merekomendasikan menggunakan scrypt dengan elemen HTML5. Karena selain lebih mudah, juga lebih familiar dengan Search Engine Optimization (SEO)

3. Membuat layout dengan menggunakan tag <table>

Dulu, pertama saya belajar HTML, saya menggunakan tag <table> untuk membuat layout. Pada tutorial lain mungkin Anda juga sempat mempelajari membuat desain layout dengan menggunakan tag <table>. Memang bisa saja kita menggunakan cara ini. Namun sangat tidak direkomendasikan. Beberapa alasan yang saya fahami adalah sebagai berikut :

Membuat layout dengan tag <table> menjadikan laman yang kita buat tidak responsif dengan perangkat pengguna.
Penggunaan tag <table> untuk desain layout membuat laman yang kita buat tidak familiar dalam Search Engine Optimization (SEO)
Pada tahap awal mungkin lebih mudah menggunakan tag <table>. Tapi pada kelanjutannya, akan sulit membuat sebuah tampilan yang menarik dengan menggunakan tag <table>. Karena memang tag ini bukan diperuntukkan untuk membuat layout. Sehingga akan tidak familiar dengan style CSS
Tag <table> memang tidak dibuat untuk desain layout.

Demikian Seri belajar HTML untuk kali ini, semoga bermanfaat.

Terima kasih, wassalamu'alaikum warahmatullaahi wabarakaatuh.

Belajar HTML Part 17 - Layout

Advertisement

1 komentar:

Belajar HTML Part 17 - Layout

Advertisement

Next

Newer Post

Previous

Older Post

1 komentar: