thumbnail

Bagi pemula yang baru terjun ke dunia blogging atau developer web, HTML dan CSS adalah 2 hal penting untuk dipahami ketika berharap melakukan desain pada halaman situs yang dimiliki. Untuk para blogger, desain ini bisa berupa mengatur tampilan template, juga memperindah estetika suatu konten atau postingan.

Ketika Agan berbicara mengenai cara untuk mendesain tampilan website atau blog, pasti akan dialihkan ke istilah umum HTML dan CSS. Yang benar-benar newbie akan kebingungan. Bahkan saat ingin mengetahui definisi dan makna dari 2 kata tersebut, rasanya semakin banyak istilah asing yang sulit dipahami bertebaran di berbagai tulisan yang membahas topik ini.

Maka dari itu SyamSalabim membuat artikel berikut untuk menjelaskan dengan cara paling mudah dimengerti mengenai kiat-kiat dasar dari desain website, melalui fungsi penggunaan HTML dan CSS. Sehingga ketika Agan mencari sebuah tutorial di luar sana atau blog ini yang berhubungan dengan desain situs, minimal punya gambaran tentang fungsi kode-kode yang diberikan.


  1. Apa itu HTML dan CSS?
  2. Struktur HTML: Elemen, Tag, dan Attribute
  3. Attribute CSS: Style dan Class

TUTORIAL

Apa itu HTML dan CSS?


Definisi ilmiahnya sudah banyak dijelaskan, bisa cari di Wikipedia. Yang jelas, HTML itu adalah kode untuk struktur halaman web dan CSS adalah kode untuk menambahkan desain pada struktur tersebut. Jadi CSS itu tidak akan bisa hidup tanpa HTML. Sementara HTML karena merupakan kerangka, tetap bisa diaplikasikan tanpa CSS.

Untuk lebih sederhananya kenapa Agan tidak langsung saja membuat struktur HTML dan CSS sendiri pada laptop pribadi? Silahkan buka aplikasi Notepad bawaan Windows dan copy paste kode di bawah berikut.

-⬜X
<html>
<head>
<style>
body {background:black;text-align:center}
h1 {color:white}
a {text-transform:uppercase;border:5px solid green}
</style>
</head>
<body>
<h1>Mengenal HTML Dan CSS Dalam Proses Dasar Desain Website</h1>
<a href="https://syamsalabim.blogspot.com/2018/11/belajar-dasar-html-css-desain-website.html">Belajar Dasar HTML CSS</a>
</body>
</html>

Simpan dengan nama dasar.html. Karena teks dari Notepad tadi kita save dengan mengubah formatnya menjadi .html, maka bentuk file nya pasti tidak berupa txt. Melainkan icon pada file tadi akan menampilkan icon browser utama yang Agan pakai. Buka file HTML tersebut dengan klik 2 kali.

Jika sukses maka file HTML akan tampil pada browser agan dengan interface dan layout yang berbeda.

Belajar Dasar HTML dan CSS
Desain pada halaman diatas semua merupakan hasil dari kode yang tadinya dimasukkan pada Notepad. Kode ini adalah struktur umum ketika seseorang ingin membuat suatu halaman web, yang terdiri dari <head> dan <body>. Dari struktur sederhana itu dapat diketahui mana kode HTML dan mana kode CSS. HTML adalah kode diantara <html> ... </hmtl>. Sementara CSS adalah kode yang diapit oleh <style> ... </style>.

Kalau kita perhatikan kodenya sekali lagi, akan ditemukan beberapa hal yang identik antara tiap kode. Misalnya setiap elemen dibuka dengan <...> dan ditutup pakai </...>. Sebagai contoh <h1></h2> dan <a></a>. Kemudian setiap kode pada struktur body memiliki tag atau attribute.

Sebentar, tag dan attribute itu apalagi? Terus elemen dan struktur body - head itu apa maksudnya? Jika masih bingung akan Syams buat lebih simpel.

Struktur HTML: Elemen, Tag, dan Attribute


<html>
<head>
<style>
body {background:black;text-align:center}
h1 {color:white}
a {text-transform:uppercase;border:5px solid green}
</style>
</head>
<body>
<h1>Mengenal HTML Dan CSS Dalam Proses Dasar Desain Website</h1>
<a href="https://syamsalabim.blogspot.com/2018/11/belajar-dasar-html-css-desain-website.html">Belajar Dasar HTML CSS</a>
</body>
</html>

Dari warna-warna di atas bisa diberi pengertian dengan lebih gampang.

Warna biru adalah elemen HTML, dengan kata lain semua kode yang diantara elemen tersebut bisa disebut sebagai kode HTML. Warna hijau adalah elemen CSS, maka semua kode diantara elemen <style> ... </style> adalah kode CSS.

Warna putih adalah elemen pada HTML, yang terdiri dari struktur head dan body. Meski tidak mutlak, dari kode diatas bisa dipahami bahwa umumnya di dalam elemen <head> terdiri dari elemen <style> atau kode CSS, yakni untuk desain. Sementara pada elemen <body> adalah untuk elemen yang memiliki tag dan attribute, atau bersifat kerangka.

Warna kuning adalah tag, dan warna merah adalah attribute. Jadi elemen yang berupa kode < ... ></ ... >, sedangkan tag dan attribute yang dimasukkan dibagian dalamnya. Fungsinya bisa diketahui sendiri dengan memperhatikan struktur kode diatas dan bagaimana hasil tampilannya ketika dieksekusi pada halaman web. Sampai disini bisa dimengerti bukan?

Attribute CSS: Style dan Class


Sekarang kita beralih kepada kode desain atau CSS. Seperti yang disampaikan sebelumnya, pada umumnya kode CSS disimpan di dalam element <style> yang terdapat di struktur head, yang kemudian memanggil elemen yang sudah dimasukkan dalam struktur body untuk diberikan gaya tampilan yang diinginkan.

Tapi selain itu kode CSS juga bisa diaplikasikan langsung dalam bentuk attribute. Implementasi dari attribute CSS itu bisa berupa style atau class. Untuk lebih memahaminya coba kembali pada salah satu kode sebelumnya.

<style>
h1 {color:white}
</style>

<h1>Mengenal HTML Dan CSS Dalam Proses Dasar Desain Website</h1>

Kode tersebut adalah tag h1 dari kode sebelumnya. Tanpa attribute, maka untuk mendesain tag diatas harus melalui kode CSS yang dimasukkan pada elemen <style> dengan memanggil elemen h1.

Lantas bagaimana jika ingin mendesain tag h1 diatas tanpa memanggil elemennya? Caranya dengan menambahkan attribute style pada elemen <h1> tersebut. Maka kodenya diubah sedikit menjadi seperti berikut.

<h1 style="color:white">Mengenal HTML Dan CSS Dalam Proses Dasar Desain Website</h1>

Kode diatas memiliki fungsi desain yang sama dengan kode sebelumnya, tapi dengan begitu tidak lagi diperlukan kode di dalam elemen <style> untuk desain CSS yang mirip. Mungkin bagi banyak orang berpikir proses ini lebih praktis, namun sebenarnya cara ini dalam desain website kurang direkomendasikan untuk dilakukan. Tapi tidak masalah sebagai dasar belajar HTML dan CSS.

Untuk cara selanjutnya lebih direkomendasikan, yaitu dengan memberi attribute class pada elemen tersebut yang kemudian dipanggil melalui kode CSS. Silahkan perhatikan lagi kode di bawah ini.

<style>
.syams{color:white}
</style>

<h1 class="syams">Mengenal HTML Dan CSS Dalam Proses Dasar Desain Website</h1>

Elemen h1 pada kode diatas tidak lagi memakai attribute style, melainkan class. Attribute class merupakan langkah untuk mendefinisikan kode desain CSS tertentu dengan kata kunci unik. Bisa dilihat attribute class yang dimasukkan adalah "syams", yang kemudian dipanggil menggunakan .syams di dalam style. Tinggal diberi kode desain saja pada class syams tersebut.

Cara terakhir ini lebih direkomendasikan untuk diaplikasikan pada banyak bentuk elemen atau tag yang memerlukan desain tertentu pada penggunaannya.


Kiranya itu saja untuk sekarang sebagai dasar belajar HTML dan CSS pada desain website untuk mempermudah Agan memahami cara mengaplikasikan kode HTML dan CSS ketika berurusan dengan tampilan antar muka suatu halaman web atau blog.

Dengan mengenal proses dasar dari desain website ini, maka untuk trik selanjutnya dengan tingkat yang lebih tinggi akan lebih gampang untuk diketahui dan di praktikkan sendiri dalam berbagai jenis keperluan yang membutuhkan HTML dan CSS dalam proses pembuatannya.

Tidak sulit menguasainya asal ada keinginan untuk mempelajari melalui hal yang paling mendasar, kemudian secara bertahap terus menambah pengetahuan dalam bidang desain website ini terlebih tekniknya selalu update dengan kode-kode baru untuk desain interface yang lebih menarik.

Syalams Desainer!