Membangun Aplikasi web Sederhana menggunakan HTML dan CSS – Desain Lanjutan

Kali ini saya akan melanjutkan tutorial yang pernah saya tulis pada artikel-artikel sebelumnya tentang membuat website sendiri. Anda dapat menelusuri kembali artikel-artikel sebelumnya tentang topik ini pada kategori Web Development.

Yang perlu anda siapkan.

Text Editor. Text editor yang saya gunakan adalah notepad++ atau sublime text.

Teknologi Server. Saya menggunakan XAMPP, dan untuk mengikuti artikel kali ini, anda perlu sudah mengetahui bagaimana menginstall dan menggunakan XAMPP pada komputer anda. Untuk installasi dan penggunakan XAMPP pada Sistem Operasi Linux akan saya bahas pada artikel lain.

HTML dan CSS. Anda perlu menguasai minimal pengetahuan dasar tentang bahasa HTML dan CSS. Untuk referensi bahasa anda dapat mengunjungi situs seperti w3schools.com untuk yang berbahasa Inggris atau Nyekrip.com dan duniailkom.com untuk yang berbahasa Indonesia.

Algoritma. Yang ini hanyalah pilihan namun jika memang anda ingin belajar lebih mendalam tentang pemrograman, anda perlu mempelajari tentang algoritma dan flowchart, dengan begitu setidaknya anda akan paham bagaimana sebuah struktur halaman web dapat bekerja. Saya telah menuliskan tentang pengantar algoritma dan flowchart pada artikel yang lainnya.. 🙂

Setelah semuanya sudah siap.

Banyak orang yang ingin belajar bagaimana membuat website dari awal (scratch) terkendala dengan pertanyaan harus mulai dari mana untuk membuat sebuah template/tampilan awal sebuah website bahkan yang sederhana. Padahal di internet sudah banyak sekali template dasar yang disiapkan untuk dapat langsung digunakan baik itu template untuk tujuan pembelajaran maupun yang dapat digunakan untuk tujuan produksi.

Untuk template awal yang akan saya gunakan, saya ambil dari tempat belajar saya yaitu w3schools.com. Berikut skrip lengkap template HTML yang saya ambil.

<!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>

Hasil:

Penjelasan:

Bagian Awal (disebut Header) diawali dengan <!DOCTYPE HTML>, bagian ini menandakan bahwa dokumen yang kita ketik didalam file ini merupakan dokumen HTML (HTML5). Pada Versi HTML sebelumnya memang terdapat sedikit perbedaan dengan versi HTML5. Perbedaan HTML 5 dan versi sebelumnya dapat dilihat pada artikel ini.

Bagian ;

<html>
<head>
</head>
<body>
....
</body>
</html>

dibutuhkan untuk menuliskan semua bentuk syntax HTML didalamnya. Jika sebuah HTML syntax ditulis diluar dari bagian ini maka syntax tersebut tidak akan dibaca sebagaimana mestinya. Terkecuali untuk penyisipan syntax PHP bisa dilakukan diluar dari tag tersebut.

Sedangkan untuk tag <head> …. </head> digunakan untuk menyisipkan semua syntax metadata yang akan dimuat paling awal ketika anda mengakses sebuah halaman website. Metadata-metadata ini meliputi tag <link>, <styles>, <meta>, <title>, <script> dan <base>.  contoh sederhananya:

<!doctype html>
 
<html>
 
   <head>
	  <!-- contoh elemen meta -->
      <meta charset="utf-8">
      <!-- contoh elemen title -->
      <title>Ini adalah elemen title</title>
	  <!-- contoh elemen link -->
	  <link rel="stylesheet" href="style.css">
	  <!-- contoh elemen base -->
	  <base href="http://r4ndieL.com" target="_blank">
	  <!-- contoh elemen script -->
	  <script>
		function myFunction() {
			document.getElementById("demo").innerHTML = "Halo JavaScript!";
		}
	  </script>
   </head>

Bagian

<style>
....
</styles>

Merupakan tag untuk menyisipkan styling (CSS) secara langsung kedalam dokumen yang sama dengan skrip HTML yang dibuat. Tentang bagaimana menuliskan dan menyisipkan CSS telah saya bahas pada artikel sebelumnya tentang mengenal lebih dalam tentang CSS.

Didalam tag <body> …. </body> terdapat tag <header>, <nav>, <article>, <footer> dan <div>. tag-tag ini merupakan syntax standar yang digunakan dalam pemrograman HTML. <header> menandakan bagian kepala dari halaman yang ditampilkan, <header> ini berbeda dengan <head>, jika <head> digunakan untuk mengapit metadata yaitu syntax-syntax yang dibutuhkan untuk memuat awal suatu halaman website maka <header> digunakan untuk memuat apa yang akan ditampilkan pada bagian paling atas dari suatu website. Lebih jelas lihat pada gambar dibawah ini;

nomor 1 menunjukkan komponen yang diload oleh tag <head> sedangkan nomor 2 menunjukkan komponen halaman yang dimuat oleh <header>.

<article> tidak digunakan pada versi HTML sebelumnya. tag <article> merupakan tag yang akan berisi bagian tulisan dari sebuah halaman website, jika diartikan secara harafiah kedalam bahasa Indonesia “article” sendiri berarti “artikel” atau tulisan.

<nav> merupakan tag yang digunakan untuk menyisipkan syntax navigasi web yaitu menu-menu navigasi yang biasanya kita lihat pada semua situs yang pernah kita kunjungi.

<footer> merupakan tag untuk bagian kaki dari sebuah halaman website. Sama halnya dengan tag header, namun footer menandakan bagian kaki halaman.

<div> adalah tag yang berarti divider (pembagi), jadi fungsinya sebagai pembagi antar section. Analogi sederhananya seperti ketika anda membuat sebuah tabel dengan dua buah kolom, maka kolom pertama dan kolom kedua dapat anda pisahkan dengan sebuah <div>. Perlu menjadi catatan bahwa tag <div> ini paling banyak digunakan dalam membuat sebuah halaman website.

Selain itu banyak juga tag-tag lainnya, seperti <span> yang fungsinya mirip dengan <div>, <p> untuk paragraf, <table> untuk tabel dan lain sebagainya. Tentang daftar tag dalam HTML dapat anda lihat disini -> https://www.tutorialspoint.com/html/html_basic_tags.htm

Selanjutnya anda dapat mencoba skrip diatas. Caranya,

  • Jalankan  XAMPP dan pastikan Modul Apache dan MySQL sudah aktif (walaupun untuk MySQL untuk saat ini belum digunakan).
  • Buat sebuah folder baru di localhost anda (Buka folder htdocs, ditempat anda menginstal XAMPP) dengan nama terserah anda (yang sederhana dan mudah diingat, contoh: situscoba)
  • Buka Browser anda (Mozilla atau Chrome recommended), kemudian ketika pada bar addres ketik localhost/situscoba (atau localhost/nama_folder_yang_anda_buat).

Sampai disini anda sudah akan melihat tampilan halaman web pertama anda. Gampang bukan? 🙂

Sampai disini dulu artikel kali ini, jika ada pertanyaan, saran ataupun masukan untuk artikel ini, silahkan tinggalkan pesan dikolom komentar dibawah ini.

Salam, jj.

r4ndiel

Leave a Reply

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