Belajar HTML5 Untuk Pemula

HTML adalah singkatan dari HyperText Markup Language yaitu bahasa markup yang digunakan untuk membuat halaman web. Versi Terbaru HTML yaitu HTML5 Penulisan HTML dengan menggunakan markup / tag disetiap pembuka dan penutup code. Contoh : untuk menampilkan huruf tebal / bold bisa menggunakan tag <strong>Huruf Tebal</strong> maka akan menampilkan hasil “Huruf Tebal“.

Apa saja yang dibutuhkan :
– Komputer / laptop dengan sistem operasi (Windows, Linux, MacOS)
– Browser (Chrome, Mozilla Firefox, Safari)
– Editor seperti notepad, notepad++, text edit, visual studio code, dreamweaver dll

Yang akan kita pelajari :
– Membuat tag-tag HTML sederhana

Langkah pertama kali :
– Buka aplikasi editor seperti notepad
– Ketikkan seperti berikut :

Keterangan :
Tag-tag yang wajib digunakan dalam membuat sebuah HTML yaitu
– Tag <html></html> digunakan untuk mengawali dan mengakhiri sebuah HTML
– Tag <head></head> digunakan untuk membuat header
– Tag <body></body> digunakan untuk membuat content
– Tag <title></title> digunakan untuk membuat judul

– Simpan hasil ketikkan tersebut dengan nama file contoh : “beranda.html“.
– Jalankan file beranda.html dengan browser. Maka akan tampil seperti berikut :

HTML
Tampilan Hasil HTML

Belajar Membuat Tabel
– Buka aplikasi editor seperti notepad
– Ketikkan seperti berikut :

Keterangan :
– Tag <table></table> digunakan untuk membuat pembungkus tabel.
– Tag <tr></tr> digunakan untuk membuat baris dari tabel.
– Tag <td></td> digunakan untuk membuat kolom dari tabel.

– Simpan hasil ketikkan tersebut dengan nama file contoh : “tabel.html“.
– Jalankan file tabel.html dengan browser. Maka akan tampil seperti berikut :

Tabel
Tabel HTML

Belajar Membuat Form

– Buka aplikasi editor seperti notepad
– Ketikkan seperti berikut :

Keterangan :
– Tag <label></label> digunakan untuk menuliskan sebuah label.
– Tag <input></input> digunakan untuk membuat sebuah inputan data.
– Tag <button></button> digunakan untuk membuat button atau tombol.

– Simpan hasil ketikkan tersebut dengan nama file contoh : “form.html“.
– Jalankan file form.html dengan browser. Maka akan tampil seperti berikut :

Form
Form HTML

Belajar Menampilkan Image atau Gambar

– Buka aplikasi editor seperti notepad
– Ketikkan seperti berikut :

Keterangan :
– Tag <h4></h4> digunakan untuk membuat heading / judul
– Tag <img></img> digunakan untuk menampilkan image atau gambar.

– Simpan hasil ketikkan tersebut dengan nama file contoh : “gambar.html“.
– Jalankan file gambar.html dengan browser. Maka akan tampil seperti berikut :

Image di HTML5
Image / Gambar HTML5

Selamat mencoba.
Happy Coding 🙂

2 Comments

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *