Belajar HTML Dasar: Panduan Membuat Kerangka Website untuk Pemula

HTML merupakan bahasa pemrograman dasar yang akan banyak Anda gunakan terutama ketika akan membuat web. Belajar HTML akan menjadi hal pertama yang perlu Anda lakukan sebelum masuk ke bahasa pemrograman lainnya. Belajar HTML dasar juga menjadi penting untuk Anda memahami bagaimana kerangka dan struktur dari HTML itu sendiri. Sebelum nantinya Anda juga akan belajar HTML dan CSS

Apa itu HTML?

HTML adalah kependekan dari Hypertext Markup Language. Singkatnya, ini merupakan bahasa markup yang akan berfungsi untuk membuat sebuah struktur. Dalam hal ini maka HTML akan berperan untuk membuat sebuah struktur dan kerangka dari sebuah web.

Nantinya HTML ini akan terdiri dari teks dan juga simbol yang tersimpan dalam sebuah file berformat HTML. Dengan menggunakan HTML ini nantinya Anda bisa membuat hal seperti heading, paragraf, memasukan gambar, membuat link, dan lain-lain pada website milik Anda.

Apa yang Akan Kita Pelajari untuk Belajar HTML?

Ada banyak hal yang akan Anda pelajari ketika belajar HTML. Karena sifatnya yang merupakan bahasa dasar, maka semua hal yang akan Anda pelajari merupakan dasar juga untuk beberapa bahasa pemrograman lainnya.

Sebagai awal, maka beberapa hal yang diperlukan untuk belajar HTML pemula contohnya adalah membuat heading, memasukan gambar, membuat tabel, dan lainnya. Berikut adalah beberapa hal yang akan Anda pelajari ketika belajar HTML.

1. Membuat Heading

Secara singkat heading adalah judul. Dari mulai judul utama sampai dengan subjudul. Penggunaan heading maka akan berguna untuk memberikan judul pada konten yang Anda buat. Jika pada Ms Word maka mungkin Anda mengenal dengan penggunaan heading 1 sampai 6. Maka hal yang sama berlaku juga pada kode HTML.

Pada HTML sendiri judul atau heading ini bisa Anda buat dengan menggunakan tag <h1> sampai dengan <h6>. Penggunaan <h1> sama dengan Heading 1 dan begitu seterusnya. Nantinya setiap <h1>,<h2>, dan seterusnya akan tampil dengan ukuran font yang berbeda.

Berikut adalah contoh pembuatan heading

<!DOCTYPE HTML>
<html>
	<head>
		<title>BELAJAR HTML</title>
	</head>
	<body>
	<h1>Contoh judul heading 1</h1>
	<h2>Contoh judul heading 2</h2>
	<h3>Contoh judul heading 3</h3>
	</body>
</html>

Dari kode di atas maka hasil yang akan Anda dapatkan adalah seperti ini

Untuk masalah heading ini juga yang perlu menjadi perhatian ketika Anda belajar HTML adalah bagian ini tidak sama dengan title atau bagian header. Bagian heading adalah judul dari konten yang Anda buat. Sementara title merupakan nama dari web Anda dan header merupakan bagian paling atas pada web Anda.

Ketiga hal ini juga memiliki tag yang berbeda. Jika heading menggunakan tag <h1> sampai <h6>. Title menggunakan tag <title> sementara header menggunakan tag <header>.

Pada penggunaanya juga Anda bisa membuat heading dengan beberapa modifikasi. Seperti misalnya menggunakan garis bawah, merubah warna font, atau juga membuat format tertentu seperti menggunakan huruf kapital semua atau huruf pada awal kata saja yang menggunakan kapital. Semua perubahan tersebut akan berhubungan dengan penggunaan bahasa pemrograman lain yaitu belajar HTML dan CSS.

2. Menambahkan Gambar

Selain hanya berisi tulisan, ketika Anda belajar web HTML maka Anda juga bisa memasukan gambar untuk pelengkap konten Anda. Ketika Anda belajar HTML maka cara menambahkan gambar pada file HTML merupakan hal penting yang perlu juga Anda ketahui.

Nantinya penggunaan gambar ini akan penting juga dalam website yang Anda buat. Gambar bisa menjadi salah satu faktor pendukung dari tulisan yang Anda buat. Selain itu, gambar juga bisa menjadi cara untuk membuat pengunjung website tidak mudah bosan karena membaca terlalu banyak tulisan.

Ketika Anda belajar HTML dasar, maka Anda juga akan paham jika memasukan gambar ke dalam file HTML ini ada beberapa langkah. Langkah-langkah tersebut adalah:

Memastikan Format Gambar

Hal pertama yang perlu Anda lakukan adalah memastikan gambar memiliki format yang sesuai. Pada saat belajar HTML maka Anda akan paham jika format gambar yang tidak sesuai akan membuat gambar tidak akan muncul. Beberapa format gambar yang kompatibel pada HTML antara lain .jpg, .jpeg, .png, .svg, .gif, .apng, dan .ico

Memasukan Atribut Sumber Gambar

Ketika Anda akan memasukan gambar pada HTML maka Anda akan membutuhkan tag <img>. Selain itu cara memasukan gambar pada HTML juga berbeda dengan dokumen lainnya. Hal tersebut karena HTML tidak bisa langsung menampilkan gambar begitu saja. Itu artinya, ketika akan menampilkan gambar maka file HTML harus mengambil dari tempat lain. Bisa dari drive, internal memory, atau yang lain.

Karena hal itu juga maka Anda membutuhkan atribut lain ketika akan menampilkan gambar. Atribut yang akan Anda butuhkan adalah src. Ini merupakan atribut yang berfungsi untuk mengambil gambar dari direktori atau web tertentu. Nantinya Anda bisa mengisi atribut tersebut dengan link menuju direktori tersebut atau dengan nama file dari gambar yang akan Anda tampilkan.

Berikut contohnya,

<!DOCTYPE html>
<html>
<head>
  <title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
  <p> Ini merupakan contoh gambar pada HTML </p>
  <img src="studio.jpg">
</body>
</html>

Dengan perintah seperti di atas maka hasil yang akan muncul adalah seperti berikut

Memberikan Atribut Alt Text

Atribut Alt Text merupakan cara untuk memberikan text alternatif pada website. fungsinya adalah ketika gambar tidak bisa muncul, maka teks alternatif ini yang akan muncul sehingga pengunjung akan tetap bisa mengidentifikasi gambar apa yang seharusnya muncul.

Selain itu, penggunaan alt text ini juga berfungsi untuk meningkatkan SEO. Hal ini karena gambar yang memiliki alt text akan memudahkan mesin pencari ketika melakukan pencarian dan juga memahami deskripsi dan konteks gambar.

Untuk menggunakan alt text ini juga Anda hanya perlu menambahkan perintah alt pada tag <img>. Jika menggunakan contoh gambar sebelumnya maka perintah yang Anda butuhkan adalah:

<img src="studio.jpg" alt="gambar_studio">

Isi dari alt text sendiri bisa Anda ubah sesuai kebutuhan Anda.

Memberikan Keterangan pada Gambar

Selain alternatif teks, hal lain yang juga Anda perlukan dalam gambar adalah keterangan tentang gambar tersebut. Hal ini biasanya akan muncul ketika kursor Anda arahkan ke gambar tersebut. Untuk membuat hal ini maka Anda hanya perlu menambahkan perintah title pada tag <img>. Jika menggunakan contoh gambar di atas maka perintah yang Anda perlukan adalah

<img src="studio.jpg" alt="gambar_studio" title="gambar studio foto">

Dengan menambahkan perintah tersebut maka nantinya hasil yang akan Anda dapatkan adalah seperti ini:

Setiap kali kursor mengarah pada gambar maka keterangan tentang gambar tersebut akan muncul. Ini juga berfungsi untuk memberikan informasi kepada pengunjung tentang gambar yang sedang mereka lihat.

Mengatur Posisi dan Ukuran Gambar

Setelah bisa memasukan gambar dan memberikan keterangan, maka hal lain yang juga perlu Anda pahami ketika belajar HTML adalah bagaimana merubah posisi dan juga ukuran dari gambar tersebut. Hal ini berfungsi untuk bisa menampilkan gambar dengan kualitas terbaik pada pengunjung website Anda nantinya.

Adapun cara yang Anda perlu lakukan adalah dengan menambahkan perintah style untuk mengatur dimensi gambar dan juga perintah align untuk mengatur posisi gambar. Contohnya

<img src="studio.jpg" alt="gambar_studio" title="gambar studio foto" style="width:200px;height:100px" align="right">

Dengan perintah di atas maka hasilnya adalah

Nilai pada style bisa Anda ubah sesuai dengan ukuran yang Anda butuhkan. Sementara pada perintah align, Anda bisa memasukan di mana posisi gambar ingin Anda munculkan.

3. Membuat Tabel

Hal lain yang juga akan Anda butuhkan ketika membuat website adalah tabel. Itu juga mengapa ketika belajar HTML dasar maka Anda perlu memahami bagaimana cara membuat tabel dengan kode HTML ini.

Setidaknya, ada empat unsur penting ketika Anda membuat tabel di HTML. Empat unsur tersebut adalah baris, kolom, sel, dan juga garis atau border. Untuk membuat tabel ini juga ada beberapa tag yang akan Anda perlukan. Seperti contohnya

<table> untuk membuat tabelnya

<tr> untuk membuat baris

<td> untuk membuat sel

<th> untuk membuat judul pada header

Pada dasarnya yang perlu Anda ingat ketika akan membuat tabel adalah tag <table>, <tr>. Dan <td>. Berikut adalah contoh pembuatan tabel

<!DOCTYPE html>
<html>
<head>
    <title>Tabel HTML</title>
</head>
<body>
    <table border='2'>
        <tr>
            <td>baris 1 kolom 1</td>
            <td>baris 1 kolom2</td>
        </tr>
        <tr>
            <td>baris 2 kolom 1</td>
            <td>baris 2 kolom 2</td>
        </tr>
    </table>
</body>
</html>

Dengan perintah tersebut maka hasil yang akan Anda dapatkan adalah seperti ini

Border pada perintah di atas berfungsi untuk memberikan garis pada tabel. Anda bisa merubah nilainya sesuai dengan kebutuhan. Semakin besar nilai nya maka akan semakin tebal garisnya. Nantinya juga Anda bisa melakukan beberapa pengaturan lain pada tabel tersebut. Seperti misalnya, jarak teks dengan garis, warna tabel, dan lain-lain

4. Membuat Form

Selain sebagai media menyebarkan informasi, web yang Anda buat juga bisa Anda gunakan untuk media mendapatkan informasi. Salah satu cara yang bisa Anda gunakan adalah dengan menggunakan form.

Mungkin Anda juga sudah sering melihat bagaimana bentuk form pada sebuah web. Ini juga hal yang perlu Anda pelajari ketika belajar HTML. Ada dua hal yang Anda perlu lakukan berkaitan dengan masalah form ini. yang pertama adalah cara membuat formnya dan yang kedua adalah cara memproses data yang Anda dapatkan.

Untuk belajar HTML pemula, maka saat ini cara yang akan Anda dapatkan hanyalah cara membuat formnya. Karena untuk memproses datanya sendiri perlu pemahaman tentang bahasa pemrograman lain.

Untuk membuat form dengan HTML maka hal pertama yang Anda butuhkan adalah tag <form>. Nantinya dalam tag ini juga akan terdapat beberapa attribut seperti action dan method. Action berfungsi untuk melakukan proses data nantinya, sementara method adalah cara data tersebut akan dikirim nantinya.

Ini adalah contoh perintah untuk pembuatan form.

<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
        <fieldset>
        <legend>Masuk</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Dengan perintah tersebut maka hasil yang akan Anda dapatkan adalah:

Contoh di atas adalah form untuk login atau masuk. Dalam form di atas juga ada beberapa field dan elemen. Nantinya form ini juga akan terdapat dalam beberapa jenis dan bentuk sesuai kebutuhan Anda. Seperti misalnya form untuk registrasi, form untuk mengisi kontak, dan lain-lain.

5. Membuat Link

Link mungkin identik dengan halaman website. Ini merupakan sebuah cara yang memungkinkan pengunjung berpindah halaman tanpa harus mengetik alamatnya. Pengunjung hanya tinggal klik lalu akan otomatis berpindah ke halaman yang ia tuju.

Selain untuk berpindah halaman, link atau hyperlink ini juga bisa berfungsi untuk hal lain seperti menjalankan fungsi javascript, pindah posisi pada halaman dengan cepat, dan lain-lain.

Untuk membuat link ini sendiri Anda membutuhkan tag <a> dan juga atribut href. Ini adalah contoh sederhana dari pembuatan perintah link pada HTML.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Link di HTML</title>
    </head>
    <body>
        <p>Untuk keterangan lebih lanjut, klik
            <a href="more info.html">more info</a>
        </p>
    </body>
</html>

Hasil yang akan Anda dapatkan adalah

Nantinya ketika pengunjung mengklik more info maka halaman akan langsung berpindah. Pada penggunaannya juga Anda akan mengenal dua jenis link.

Yang pertama adalah internal link yaitu link yang akan menuju halaman lain pada domain yang sama. Dan yang kedua adalah external link yaitu link yang akan menuju domain lain.

Persiapan Tools untuk Belajar HTML

Setelah mengetahui apa saja yang akan Anda pelajari ketika belajar HTML, maka hal lain yang juga perlu Anda perhatikan adalah masalah tools. Tools ini akan sangat berperan dalam proses belajar HTML dasar. Nantinya tools inilah yang akan Anda gunakan untuk menuliskan kode dan melihat hasil dari kode yang Anda tulis. Adapun tools yang Anda perlukan adalah:

1. Text Editor

Sesuai namanya, ini merupakan alat yang akan Anda gunakan untuk melihat, menulis, dan mengedit semua kode yang ada ketika Anda belajar HTML. Text editor akan menjadi tempat Anda menuliskan semua kode HTML yang akan Anda gunakan nantinya.

Saat ini ada banyak text editor terbaik yang bisa Anda gunakan. Jika Anda pengguna Windows, maka sebenarnya Anda bisa menggunakan notepad untuk text editor ini. Selain itu, beberapa contoh text editor lain yang bisa Anda gunakan untuk belajar HTML pemula adalah notepad++, Atom, Codepen, dan lain-lain

2. Web Browser

Selain text editor, alat lain yang juga Anda butuhkan adalah web browser. Jika text editor adalah tempat Anda menuliskan kode, maka web browser adalah tempat Anda melihat hasil dari kode yang Anda buat. Anda bisa menggunakan beberapa web browser yang ada saat ini seperti chrome ataupun firefox.

Kerangka HTML

Seperti sudah dijelaskan sebelumnya, jika HTML ini akan berfungsi untuk membuat sebuah kerangka dan juga struktur dari sebuah website. Pada penggunaan komputer akan menilai mana bagian yang menjadi judul atau mana bagian yang merupakan isi dari sebuah website berdasarkan penulisan kode HTML ini.

Secara umum, maka kerangka inti dari penggunaan HTML ini ada tiga yaitu HTML, head, dan juga body.

1. HTML

Pada kerangka ini setidaknya ada dua macam perintah yang akan Anda gunakan. Yang pertama adalah <!DOCTYPE HTML> ini merupakan perintah yang menjadi tanda untuk komputer jika Anda akan menuliskan kode HTML.

Selanjutnya adalah <html>…</html> ini merupakan kode yang merupakan tanda awal dan akhir dari kode HTML itu sendiri. Dengan kedua perintah tersebut maka akan menjadi kerangka pertama yang menandakan jika semua perintah tersebut berformat file HTML.

2. Head

Ketika Anda belajar web HTML maka kerangka kedua yang perlu Anda pahami juga adalah head. Ini merupakan kerangka yang akan berhubungan dengan pemberian judul ataupun deskripsi dari konten yang akan Anda buat. Adapun perintah yang akan Anda gunakan adalah <head>…</head>

3. Body

Kerangka terakhir yang juga perlu Anda pahami ketika belajar HTML adalah body. Ini merupakan kerangka yang akan berhungungan dengan semua konten yang akan Anda buat nantinya. Adapun perintah yang akan Anda gunakan adalah <body>…</body>

Sudah Siap Belajar HTML untuk Membuat Website?

Setelah membaca semua penjelasan di atas, mungkin Anda sudah mulai tertarik untuk mulai belajar HTML. Sebagai bahasa pemrograman dasar, HTML cukup penting untuk Anda pahami. Ini merupakan langkah awal untuk Anda yang tertarik dengan website development.

HTML merupakan bahasa dasar yang perlu Anda pelajari sebelum nantinya Anda mempelajari bahasa pemrograman lain untuk membuat website. belajar HTML juga cukup mudah, selain itu saat ini juga sudah banyak tempat yang bisa membantu Anda untuk memahami tentang bahasa pemrograman ini.

Siap belajar banyak tentang HTML? Yuk, simak berbagai panduan di bawah ini:

Alexandromeo Lawrence

I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development