Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

Belajar HTML dengan Mudah

Beberapa hari yang lalu aku ditanya oleh ayahku tentang PHP. “Le, opo seh PHP kuwi.? Aku ora ngerti.” Nah, sebelum mengenal apa itu PHP seharusnya kita mengenal dulu apa yang dimaksud dengan HTML. Jadi, hari ini aku akan mengajak teman-teman –dan semoga ayah saya juga ikutan– untuk belajar HTML dengan mudah. Aku akan mencoba untuk menggunakan bahasa yang mudah dimengerti. Belajar PHP-nya belakangan aja ya.

Sebelumnya, apa seh yang dimaksud dengan HTML. HTML adalah singkatan dari Hyper Text Markup Language. Jika kita ambil kata “Language” maka artinya adalah bahasa. Bahasa HTML menggunakan code-code yang sudah standar. Gampangnya begini: HTML adalah sebuah bahasa berbentuk code. Bahasa tersebut ditulis dan disimpan dengan extensi file *.html. Kemudian tulisan dalam file tersebut diterjemahkan oleh browser menjadi sebuah halaman web. Skemanya adalah seperti ini:

Alur HTML menjadi WEBSITE - Belajar HTML dengan Mudah

Alur HTML menjadi WEBSITE

Bagaimana Cara Belajar HTML dengan Mudah

Yang pertama kita membutuhkan sebuah aplikasi untuk membuat file html. Aplikasi yang kita gunakan untuk membuat file HMTL adalah notepad. Kalau teman-teman menggunakan Linux, maka alat yang digunakan adalah gedit atau nano. Bukalah notepad tersebut, kemudian mari kita mulai.

Browser dapat melihat file jenis file yang kita buka. Jadi pertama kita harus memberitahu browser kalau file kita merupakan file html. Caranya menuliskan seperti di bawah ini. Kode-kode html harus berada diantara <html> dan </html>

Isi dari html diletakkan diantara <body> dan </body>. Isi html bisa berupa tulisan, tabel, formulir dan gambar. Kita coba dengan tulisan terlebih dahulu. Untuk tulisan, kita punya kode-kode sebagai berikut:

Kode Kegunaan Contoh
<h1></h1> Menuliskan judul <h1>Judul Tulisan</h1>
<p></p> Menuliskan paragraf <p>Ini adalah sebah paragraf yang ditulis dengan menggunakan html</p>
<i></i> Membuat tulisan miring <i>Ini adalah tulisan miring</i>
<b></b> Membuat tulisan tebal <b>Ini adalah tulisan tebal</b>
<u></u> Membuat tulisan bergaris bawah <u>Ini adalah tulisan bergaris bawah</u>
<br> Sebagai pengganti Enter 1. Baris pertama<br>2. Baris kedua<br>3. Baris ketiga<br>4. Baris keempat
<sup></sup> Tulisan kecil ke atas 38<sup>o</sup>C
<sub></sub> Tulisan kecil di bawah H<sub>2</sub>O

Berikut ini contoh lengkapnya.

Simpan contoh yang kita buat dengan nama belajar.html. Begini cara menyimpan file jika kamu menggunakan notepad maka klik File, kemudia pilih Save As…

Menyimpan dengan Save As - Belajar HTML dengan Mudah

Menyimpan dengan Save As

Memberi nama file dengan belajar.html - Belajar HTML dengan Mudah

Memberi nama file dengan belajar.html

Jika sudah tersimpan, masuklah ke dalam folder tempat teman-teman menyimpan file tersebut. Setelah itu bukalah dengan cara klik kanan file belajar.html kemudian pilih browser.

Klik Kanan File belajar.html - Belajar HTML dengan Mudah

Klik Kanan File belajar.html (panah merah), kemudian pilih browser yang akan digunakan (panah hijau)

Jika berhasil, maka browser akan terbukan dengan tampilan seperti ini:

Membuka File HTML Google Chrome - Belajar HTML dengan Mudah

Membuka File HTML Google Chrome

Menggunakan HEAD

Masih ada 1 lagi yang belum, yaitu tentang penggunaan head. head umumnya diletakkan sebelum body. Head adalah tempat untuk menuliskan metadata. Metadata adalah data tentang data. Gampangnya, metadata berisi deskripsi dari file html. Contohnya, deskripsi, kata kunci dan juga pembuat. Selain itu pada head kita bisa menuliskan judul. Judul tidak harus sama dengan nama file. Berikut ini adalah contoh dari head.

Head, juga digunakan untuk menuliskan CSS dan Javascript. Tentang apa css dan javascript, akan kita pelajari pada materi yang lain.

Penutup – Belajar HTML dengan Mudah

Nah, demikianlah cara membuat file html dengan mudah. Contoh kita hari ini memang baru sampai membuat text. Tapi, HTML bisa melakukan lebih dari itu. Kita bisa membuat tabel, formulir, dan juga memasukkan gambar pada HTML. Bagaiamana caranya? Tunggu di tulisanku berikutnya ya. Selamat belajar dan Selamat Membaca.