BELAJAR HTML - PANDUAN LENGKAP MEMBUAT WEBSITE PERTAMA BAGI PEMULA
Bandung 02062026 - Pada maeri kali ini kia akan belajar HML, panduaan lengkap membua websie perama bagi pemula
APA ITU HTML?
HML (Hperex Markup Language) merupakan bahasa dasar yang digunakan untuk membuat struktur sebuah halaman web. Semua website yang Anda lihat di internet menggunakan HTML sebagai fondasinya.
HTML di gunakan unuk :
- Membuat judul halaman
- Menampilkan teks
- Menampilkan gambar
- Membuat tautan (link)
- Membuat tabel
- Membuat formulir
Contoh sederhana HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website Pertama Saya</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah website pertama saya.</p>
</body>
</html>
Hasilnya:
Halo Dunia!
Ini adalah website pertama saya.
Struktur Dasar HTML
Setiap file HTML memiliki struktur seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
</body>
</html>
Penjelasan :
TAG FUNGSI
<!DOCTYPE html> Menentukan dokumen HTML5
<html> Pembungkus seluruh halaman
<head> Berisi informasi halaman
<title> Judul tab browser
<body> Isi halaman website
Heading (Judul)
HTML menyediakan 6 tingkat heading.
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Contoh:
<h1>Belajar HTML</h1>
<h2>Materi Dasar</h2>
<p>Selamat datang di kelas HTML.</p>
Paragraf dan Teks
Paragraf
<p>Ini adalah paragraf pertama.</p>
Teks Tebal
<b>Teks Tebal</b>
atau
<strong>Teks Penting</strong>
Teks Miring
<i>Teks Miring</i>
Garis Bawah
<u>Teks Bergaris Bawah</u>
Contoh:
<p>Saya sedang <b>belajar HTML</b>.</p>
<p>HTML itu <i>mudah dipelajari</i>.</p>
Membuat Link
Link digunakan untuk berpindah halaman.
<a href="https://google.com">Kunjungi Google</a>
Membuka tab baru:
<a href="https://google.com" target="_blank">
Buka Google
</a>
Menampilkan Gambar
<img src="gambar.jpg" alt="Foto Saya">
Mengatur ukuran:
<img src="gambar.jpg" width="300">
Contoh:
<img src="https://via.placeholder.com/300"
alt="Contoh Gambar">
Membuat List
List Tidak Berurutan
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Hasil:
HTML
CSS
JavaScript
List Berurutan
<ol>
<li>Belajar HTML</li>
<li>Belajar CSS</li>
<li>Belajar JavaScript</li>
</ol>
Hasil:
Belajar HTML
Belajar CSS
Belajar JavaScript
Membuat Tabel
<table border="1">
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Andi</td>
<td>20</td>
</tr>
<tr>
<td>Budi</td>
<td>22</td>
</tr>
</table>
Hasil:
Nama Umur
Andi 20
Budi 22
Membuat Form Input
<form>
Nama:
<input type="text">
<br><br>
Email:
<input type="email">
<br><br>
<button>Kirim</button>
</form>
Contoh lebih lengkap:
<form>
<label>Nama Lengkap</label><br>
<input type="text"><br><br>
<label>Email</label><br>
<input type="email"><br><br>
<label>Password</label><br>
<input type="password"><br><br>
<button type="submit">
Daftar
</button>
</form>
Membuat Website Pertama
Buat file bernama:
index.html
Lalu isi dengan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Website Pertama Saya</title>
</head>
<body>
<h1>Selamat Datang di Website Saya</h1>
<p>
Halo, nama saya Rezza.
Saya sedang belajar HTML.
</p>
<img
src="https://via.placeholder.com/300"
alt="Foto Profil">
<h2>Hobi Saya</h2>
<ul>
<li>Membaca</li>
<li>Ngoding</li>
<li>Olahraga</li>
</ul>
<h2>Kontak</h2>
<a href="https://google.com">
Kunjungi Website Favorit Saya
</a>
</body>
</html>
Berikut contoh Website Formulir Pendaftaran Lengkap menggunakan HTML yang cocok untuk latihan pemula
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Pendaftaran</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 700px;
margin: auto;
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
}
p {
text-align: center;
color: #666;
}
label {
font-weight: bold;
}
input,
select,
textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.radio-group,
.checkbox-group {
margin-bottom: 15px;
}
.radio-group input,
.checkbox-group input {
width: auto;
}
button {
width: 100%;
padding: 12px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
footer {
text-align: center;
margin-top: 20px;
color: gray;
}
</style>
</head>
<body>
<div class="container">
<h1>Formulir Pendaftaran Siswa Baru</h1>
<p>Silakan isi data diri dengan lengkap dan benar.</p>
<form>
<label>Nama Lengkap</label>
<input type="text" placeholder="Masukkan nama lengkap" required>
<label>Tempat Lahir</label>
<input type="text" placeholder="Masukkan tempat lahir">
<label>Tanggal Lahir</label>
<input type="date">
<label>Jenis Kelamin</label>
<div class="radio-group">
<input type="radio" name="jk"> Laki-laki
<input type="radio" name="jk"> Perempuan
</div>
<label>Alamat</label>
<textarea rows="4" placeholder="Masukkan alamat lengkap"></textarea>
<label>Email</label>
<input type="email" placeholder="contoh@email.com">
<label>Nomor Telepon</label>
<input type="tel" placeholder="08xxxxxxxxxx">
<label>Asal Sekolah</label>
<input type="text" placeholder="Nama sekolah sebelumnya">
<label>Pilihan Jurusan</label>
<select>
<option>Pilih Jurusan</option>
<option>IPA</option>
<option>IPS</option>
<option>Bahasa</option>
</select>
<label>Username</label>
<input type="text" placeholder="Masukkan username">
<label>Password</label>
<input type="password" placeholder="Masukkan password">
<label>Upload Foto</label>
<input type="file">
<div class="checkbox-group">
<input type="checkbox" required>
Saya menyatakan bahwa data yang saya isi adalah benar.
</div>
<button type="submit">
Daftar Sekarang
</button>
</form>
</div>
<footer>
© 2026 Formulir Pendaftaran Siswa Baru
</footer>
</body>
</html>
Fitur yang ada pada formulir:
- Nama Lengkap
- Tempat & Tanggal Lahir
- Jenis Kelamin
- Alamat
- Nomor Telepon
- Asal Sekolah
- Pilihan Jurusan
- Username & Password
- Upload Foto
- Checkbox Persetujuan
- Tombol Daftar
- Tampilan responsif dan modern dengan CSS sederhana
Berikut Conoh Laihan
Latihan 1
Buat halaman berisi:
Judul "Profil Saya"
Nama
Foto
Hobi
Link media sosial
Latihan 2
Buat formulir pendaftaran:
Nama
Email
Password
Tombol Daftar
Latihan 3
Buat tabel daftar siswa:
Nama Kelas Nilai
Andi 7A 90
Budi 7B 85
Citra 7A 95
HTML adalah fondasi semua website. Tag yang wajib dipahami pemula adalah:
<html>
<head>
<body>
<h1>
<p>
<a>
<img>
<ul>
<ol>
<table>
<form>
Setelah menguasai HTML, langkah berikutnya adalah belajar CSS untuk mempercantik tampilan dan JavaScript untuk membuat website menjadi interaktif.
