Home » HTML » Belajar HTML Dasar Untuk Pemula

Belajar HTML Dasar Untuk Pemula

Ditulis oleh Segi Henggana · 21 March 2019
Belajar HTML Dasar Untuk Pemula

Pernah mengunjungi sebuah website dengan tampilan yang enak dilihat? Seperti teks yang beragam bentuk, warna dan ukuran. Semua itu tak bisa didapatkan dengan berbekal template bawaan saja, melainkan dengan mengotak-atik kode HTML-nya. Blogger pasti sudah tak asing dengan HTML, setidaknya pernah melihat seperti apa HTML dan cara kerjanya seperti apa. Lagipula, kebanyakan blogger sudah cukup puas dengan template bawaan, termasuk font, ukuran huruf, posisi, dan berbagai tampilan standar lainnya.

Tapi beda urusannya jika kita ingin mempelajari lebih, kita bisa mengubah tampilan website kita menjadi lebih unik dan beda daripada yang lain dengan mempelajari HTML lebih dalam lagi. Adapun HTML merupakan sebuah kependekan dari Hyper Text Markup Language, artinya ialah sebuah bahasa markup yang biasa digunakan dalam membuat halaman website.

Dengan adanya HTML ini akhirnya halaman web tersusun sebagaimana yang biasa kita lihat dalam browser. Maka karena itu, jika ingin terjun ke dunia web development, wajib hukumnya mempelajari HTML.

FYI, dalam menampilkan serta menyusun tampilan website, HTML tak bekerja sendirian sebab ia juga bekerja bersama CSS dan JavaScript. Jika HTML memiliki tugas untuk menyusun kerangka halaman web, maka CSS bertugas merapikan, memperindah tampilan website, kemudian JavaScript akan membuat halaman web interaktif.

Contoh Sederhana HTML

Jika ada yang berpikir bahwa HTML adalah bahasa pemograman, itu bukanlah hal yang tepat karena HTML adalah bahasa markup dimana isinya adalah perintah dengan menggunakan format khusus terstruktur supaya bisa menampilkan sebuah tampilan.

Jika masih bingung, kurang lebih seperti ini:

Kita ingin membuat ‘tulisan tebal’ jika dengan MS Words maka kita hanya tinggal menggunakan ctrl+B untuk menebalkannya, tetapi untuk membuatnya menggunakan HTML tidak bisa semudah itu, karena harus memasukkan beberapa kode khusus yang nantinya akan menampilkannya di browser.

Untuk membuat tulisan tebal, maka kita akan gunakan kode sebagai berikut.

<strong>tulisan tebal</strong>

Jadi jika kita telah menuliskan kode yang telah disebut di atas, maka hasilnya browser akan menunjukkan tulisan yang ditebalkan. Jadi, HTML merupakan sebuah format penulisan yang dimengerti oleh browser untuk menunjukkan sebuah tampilan khusus.

Bagaimana Cara Menulis Kode HTML

Setelah mengerti tahapan awalnya, maka kita harus tahu dimana kita bisa menulis kode HTML supaya bisa dijalankan. Supaya bisa menulis kode HTML, maka ada software code editor yang bisa digunakan, misalnya yang paling cepat ditemukan adalah Notepad, ada juga Notepad++ atau Sublime Text. Jika ingin menggunakan Atom atau software lainnya pun bisa dan supaya kode tersebut bisa dibaca oleh browser, maka simpanlah dengan format HTML, adapun formatnya adalah .htm dan .html

Ini dia contoh sederhana penulisan kode HTML yang bisa dicoba:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Halo Semua HTML</title>
    </head>
    <body>
        <p>Hello World!</p>

        <p><b>Tulisan tebal</b>, <i>tulisan miring</i>, <u>tulisan bergaris bawah</u></p>
    </body>
</html>
  1. Cobalah untuk menuliskan kode di atas pada Notepad (atau Sublime Text atau pun yang lainnya).
  2. Simpanlah dengan menggunakan format .htm atau .html, contohnya sekarang kita save gunakan nama index.html.
  3. Jika diamati, dalam contoh kode HTML yang ada di atas kita bisa lihat jika memulai kode HTML harus dimulai menggunakan kode <html> dan harus ditutup dengan </html>. Sementara itu, adanya kode <!DOCTYPE HTML> mempunyai fungsi pengenal HTML5.
  4. Adapun semua kode yang ada antara <head> dan juga </head> memiliki fungsi supaya browser dapatkan informasi tambahan. Contoh, di atas ada kode <title> yang membawa informasi untuk browser bahwa dalam halaman web ini berjudul yang artinya memberikan informasi ke browser bahwa halaman web yang dibuat ini memiliki judul Halo Semua HTML.
  5. Sementara itu yang ingin kita tampilkan dalam browser dalam kode <body> hingga </body>. Itulah inti dari kode yang kita buat, disana kode akan disusun untuk membuat halaman web.

Ada dua hal yang harus dipahami dalam penulisan kode HTML, yakni Tag dan Atribut. Adapun penjelasannya adalah:

Tag: secara sederhana Tag adalah berbagai kode khusus supaya jadi pengenal jika kode itu merupakan HTML, dan akan diterjemahkan oleh browser. Contoh untuk tulisan tebal gunakan TAG STRONG, atau bisa juga TAG B. Sementara itu untuk membuat paragraf maka bisa gunakan TAG P.

Atribut: ialah karakteristik tambahan dalam sebuah Tag. Contoh, jika kita gunakan TAG P, maka browser akan secara default menampilkan rata kiri. Maka jika ingin membuatnya jadi rata tengah maka atribut ALIGN ditambahkan dengan value CENTER dalam TAG P. Contoh :

<p align="center">Supaya tampilan rata tengah</p>

Jadi masing-masing Tag ada atribut masing-masing, sesuai dengan sifat dari Tag itu sendiri. Semoga artikel ini bermanfaat.

Saya masih ingat waktu pertama kali bikin layout website pas SMA, pake TABLE :facepalm:. Sekarang bekerja di Bukalapak sebagai Front End Engineer. Tidak sedang mencari pekerjaan baru.