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 :
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 :
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 :
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 :
Selamat mencoba.
Happy Coding 🙂
I’m a result mobile engineer, as well as deep understanding of digital systems.
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
Sama2 🙂
Terima kasih sudah berkunjung.