Latihan Web – Sketsa Layout dan implementasi HTML dan CSS

Artikel kali ini adalah sambungan dari seri tutorial membuat website sederhana dengan HTML dan CSS. Saya telah menuliskan beberapa artikel seri tutorial ini sebelumnya, diantaranya;

  1. Pengenalan HTML dan Panduan tambahan -> Elemen dalam HTML
  2. Pengenalan HTML5
  3. Pengenalan CSS

Setelah pengenalan HTML, HTML5 dan CSS, maka sekarang saya akan mencoba membuat layout sederhana sebuah website dan mengimplementasikannya menggunakan HTML dan CSS.

Tool/Aplikasi yang perlu anda siapkan adalah XAMPP atau WAMP sebagai teknologi server, editor teks seperti Notepad++ untuk menuliskan script, dan browser seperti mozilla atau google chrome untuk menampilkan halaman. Selain itu anda juga membutuhkan beberapa tools online jika anda punya koneksi internet, namun untuk tools tambahan ini anda bisa juga menggunakan versi offlinenya. Tools tersebut diantaranya: Color picker (W3schools color picker untuk online atau aplikasi color picker lainnya), tools ini digunakan untuk mendapatkan kode hex dari warna yang akan digunakan, anda juga bisa mengambil referensi kode warna dari beberapa situs seperti dari situs cloford.com. Ada juga beberapa tool offline yang dapat digunakan tanpa membutuhkan koneksi internet.

screenshot_1

Elemen-elemen dasar dalam layout HTML

Sebuah website biasanya menampilkan kontennya dalam beberapa kolom (contohnya seperti tampilan website ini)

Pada perkembangan HTML5, terdapat beberapa semantik elemen yang langsung dapat digunakan untuk mendefenisikan bagian-bagian dari sebuah halaman web, diantaranya;

 

 Sumber gambar: W3shools
  • <header> – Digunakan untuk membuat header halaman atau bagian halaman.
  • <nav> – Merupakan semantik untuk penampang link navigasi
  • <section> – Mendefinisikan suatu bagian dari halaman (cth: bagian pengumuman halaman)
  • <article> – Semantik untuk menamping bagian artikel/isi utama dalam halaman.
  • <aside> – Biasanya digunakan untuk sidebar.
  • <footer> – Digunakan untuk menampung bagian footer.
  • <details> – Semantik untuk detail tambahan (jarang digunakan)
  • <summary> – Mendefinisikan bagian kepala dari elemen <details>

Teknis pembuatan layout HTML

Secara umum ada beberapa cara untuk membuat sebuah layout yang memiliki banyak kolom seperti pada gambar diatas. Setiap cara memiliki keunggulan dan kelemahan masing-masing. Cara-cara tersebut diantaranya;

  • HTML tables
  • CSS float property
  • CSS framework
  • CSS flexbox

Manakah yang seharusnya anda pilih? Kita lihat satu persatu

HTML Tables

elemen <table> sebenarnya tidak didesain untuk pembuatan layout halaman! Tujuan dari elemen <table> ini adalah untuk menampilkan data tabular seperti penerapan pada aplikasi lainnya. Jadi untuk persoalan layout halaman web dianjurkan untuk tidak menggunakan tabel. Alasan lainnya karena pembuatan layout dengan menggunakan tabel akan membuat tampilan halaman web anda akan menjadi kacau pada suatu tingkat tertentu, dan anda juga akan kesulitan jika suatu saat anda ingin mendesain ulang halaman web anda.

Tip: Jangan gunakan elemen tabel untuk mendesai halaman website anda!

CSS Frameworks

Metode menggunakan framework CSS dapat anda gunakan untuk mendesain layout halaman anda jika anda ingin membuat sebuah layout tanpa perlu capek membuat styling halamannya. Contoh framework CSS yang serign digunakan adalah W3.css, Bootstrap, Webkit, Ionic, Pure CSS, Skeleton dan masih banyak lagi.

CSS Floats

Metode CSS Floats ini sudah sering digunakan untuk membuat styling halaman web keseluruhan. Penerapan Float dapat dikatakan cukup mudah, anda hanya perlu mengingat properti float dan clear bekerja pada halaman anda. Namun kekurangan penerapan CSS Floats: Elemen Float terikat dengan elemen flow pada halaman yang mana tidak menutup kemungkinan akan mempengaruhi fleksibilitas. Contohnya ketika akan membuat web yang rencananya akan diakses melalui beberapa perangkat dengan resolusi berbeda.

 

CSS Flexbox

Flexbos merupakan metode layout yang cukup baru dalam CSS3. Penggunaan Flexbox memastikan pekerjaan elemen dapat ditebak pada saat layout halaman harus diakses menggunakan ukuran screen gadget yang berbeda dan ditampilkan pada perangkat yang berbeda. Kelemahan metode ini adalah tidak bekerja pada browser lama seperti Internet Explorer 10 kebawah.

Kali ini saya menggunakan metode Float Layout untuk membuat layout (Sumber w3schools.com)

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}

header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}

nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul a {
text-decoration: none;
}

article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>

<div class="container">

<header>
<h1>City Gallery</h1>
</header>

<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>

<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>

<footer>Copyright &copy; W3Schools.com</footer>

</div>

</body>
</html>

Untuk mencoba kode ini dikomputer anda, anda perlu menjalankan XAMPP (Jika belum ada, anda bisa membaca tutorial sebelumnya tentang bagaimana menginstall xampp pada Windows 7). Kemudian anda juga bisa membaca tutorial-tutorial lain mengenai pemrograman dasar web didalam kategori Web Development.

Setelah itu, simpan kode diatas pada folder baru didalam htdocs dengan nama index.php. Kemudian jalankan Apache dan MySQL melalui Control Panel XAMPP. Kemudian buka browser anda dan kunjungi alamat “localhost/nama_folder_anda/”.

Anda akan melihat tampilan halaman anda yang telah dirender menjadi sebuah halaman web yang baik.

Sekian dulu artikel kali ini, mohon maaf masih banyak kekurangan dalam artikel ini, saya akan memperbaikinya dilain kesempatan (maklum, lagi buru-buru 😀 :D)

r4ndiel

Leave a Reply

Your email address will not be published. Required fields are marked *