Skip to content Skip to sidebar Skip to footer
Home / HTML / Web Design

Tutorial Belajar HTML 15 : Layout pada HTML

By Web Design Purbalingga Post a Comment

Layout pada HTML – Membuat layout dengan html tidak terlalu sulit, intinya kalian paham tentang peletakan posisi tiap elemen, seperti posisi kanan, kiri, atas dan bawah. Dan materi dasarnya pun sudah kita pelajari bersama pada materi CSS.

Layout pada HTML

Sebelumnya, pada materi kali ini kita akan membuat layout sebuah web sederhana dengan bantuan HTML 5. Berikut ini adalah layout sederhana yang akan kita buat.


Let’s Code

Tuliskan baris kode HTML berikut ini pada file HTML kalian
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Latihan HTML</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">

<header>
   <h1>Selamat Datang di Forum Web Design</h1>
</header>
  <nav>
  <a href="#">Home</a>
  <a href="#">Info</a>
  <a href="#">Kode</a>
  </nav>
<aside>
  <h4>Iklan anda di sini</h4>
</aside>

<article>
  <h1>Judul Artikel</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem nemo porro labore eum accusamus, perspiciatis adipisci vel harum, repellendus quidem facere atque at ex incidunt quia. Fugiat magnam aliquid, molestias.</p>
</article>

<footer>Copyright &copy; Webdesignpurbalingga</footer>

</div>
</body>
</html>
Jangan lupa berikan CSS nya di bawah ini
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: teal;
    clear: left;
    text-align: center;
}
nav {
 background-color: #25d7fd;
 padding: 3px;
}

nav a {
 color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 3px;
}

aside {
    float: right;
    margin: 0;
    padding: 1em;
}

aside ul {
    list-style-type: none;
    padding: 20px;
    text-align: left;
}
   
aside ul a {
    text-decoration: none;
}

article {
    margin-right: 170px;
    border-right: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}

Penjelasan

<header> mendefinisikan bagian atas atau head dari sebuah website. Biasanya di isi dengan nama website dan deskripsi tentang web tersebut.
<nav> mendefinisikan sebagai navigasi website kita.
<aside> atau bagian sidebar yaitu pilihan untuk konten populer atau yang lainnya dalam website.
<article> mendefinisikan sebuah artikel
<footer> bagian kaki atau bawah dari website. Biasanya sebagai tempat mencantumkan hak milik pembuat website.
Hasilnya berikut ini


Kalian bisa membuat layout yang lebih menarik dari ini dengan bantuan tag html di atas dengan mengatur posisi setiap elemennya dengan css.
Sekian materi kali ini tentang membuat layout dengan html. Jika ada yang belum di pahami, silahkan tinggalkan pertanyaan kalian di kolom komentar.

Post a Comment for "Tutorial Belajar HTML 15 : Layout pada HTML"