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 :

<html>
<head>
    <title>Belajar HTML | BelajarAplikasi.com</title>
</head>
<body>
    <p>HTML Pertamaku</p>
</body>
</html>

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 :

<html> 
<head> 
    <title>Belajar Membuat Tabel</title> 
</head> 
<body> 
    <table border="1" cellpadding="5" cellspacing="1"> 
        <tr> 
            <td>No</td> 
            <td>Nama</td> 
            <td>Alamat</td> 
        </tr> 
        <tr> 
            <td>1</td> 
            <td>Rudianto</td> 
            <td>Jl. Mlati No. 6 Kranggan</td> 
        </tr> 
        <tr> 
            <td>2</td> 
            <td>Joko Darmawan</td> 
            <td>Jl. Degung No. 13 Sleman</td> 
        </tr> 
    </table> 
</body> 
</html>

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 :

<html>
<head>
    <title>Belajar Membuat Form</title>
</head>
<body>
    <h4>Form Input Data Karyawan</h4>
    <form>
        <label>NIK</label>
        <input type="text" id="nik"/><br>
        <label>Nama</label>
        <input type="text" id="nama"/><br><br>
        <button type="submit">Simpan</button>
        <button type="reset">Batal</button>
    </form>
</body>
</html>

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 :

<html>
<head>
    <title>Belajar Menampilkan Image atau Gambar</title>
</head>
<body>
    <h4>Tampilan Gambar</h4>
    <img src="http://belajaraplikasi.com/wp-content/uploads/2018/06/ci.jpg" width="200px" height="200px"/>
</body>
</html>

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

  1. Terimakasih kak ,,karna artikel yang kakak buat bagus dan sangat membantu dalam perkuliahan saya kak,semoga sukses dan terus berkarya kak perkenalkan nama saya Larasati 1822500149 ISB Atmaluhur

Leave a Reply

Your email address will not be published. Required fields are marked *