Mempelajari HTML dan Belajar Membuat Web

Halo semuanya, kembali lagi di blog saya. Kali ini saya akan menceritakan sedikit tentang pengalaman PKL saya di ISTN, pada kali ini saya akan menceritakan hal-hal yang saya alami dan pelajari pada hari ke tujuh belas.

Perjalanan saya ke tempat PKL seperti biasa, saya berangkat pukul 07.20 bersama teman saya, yakni Daniel dan sampai di ISTN pada pukul 07.40 tanpa kendala. Setiba nya saya di tempat PKL kami langsung melaksanakan piket masing-masing. Kali ini saya menjadi PJ yang bertugas mengambil foto-foto.

Setelah itu kami di beri pemaparan materi tentang HTML oleh pak Nico, untuk itu mungkin akan saya jelaskan sedikit tentang HTML.

HTML

Jadi, HTML itu singkatan dari HyperText Markup Language. Ini adalah bahasa standar yang dipakai untuk membuat dan menyusun halaman web. Anggap saja HTML ini seperti kerangka atau fondasi dari sebuah bangunan. Dia yang menentukan struktur konten di sebuah website, misalnya mana yang jadi judul, mana yang jadi paragraf, di mana harus meletakkan gambar, dan sebagainya. HTML menggunakan elemen-elemen yang ditandai dengan "tag" untuk mengatur semua itu. Tanpa HTML, browser tidak akan tahu cara menampilkan teks atau elemen lain di halaman web.

Setelah dijelaskan konsep dasarnya, kami langsung diberikan contoh kode lengkap untuk membuat halaman profil pribadi. Kodenya lumayan panjang karena tidak hanya berisi HTML untuk struktur, tapi juga CSS untuk mempercantik tampilan (seperti warna, layout, dan font), bahkan ada sedikit JavaScript untuk membuatnya interaktif (seperti tombol dark mode dan notifikasi).

Berikut adalah kode yang kami pelajari:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Profil Mustafidh Rafan Ahyan - Belajar HTML, PKL, dan Teknologi Web">
<meta name="author" content="Mustafidh Rafan Ahyan">
<title>Profil Mustafidh Rafan Ahyan</title>
<style>
/* ==== Reset & Global ==== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f8ff;
color: #222;
line-height: 1.6;
transition: background-color 0.4s, color 0.4s;
}
a {
text-decoration: none;
color: #0056d2;
}
/* ==== Navbar ==== */
nav {
background-color: #0056d2;
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
position: sticky;
top: 0;
z-index: 100;
}
nav h1 {
color: white;
font-size: 1.5rem;
}
nav ul {
display: flex;
gap: 20px;
}
nav ul li {
list-style: none;
}
nav ul li a {
color: white;
font-weight: bold;
transition: color 0.3s;
}
nav ul li a:hover {
color: #ffdd57;
}
/* ==== Dark Mode ==== */
.dark-mode {
background-color: #111;
color: white;
}
.dark-mode nav {
background-color: #222;
}
.dark-mode footer {
background-color: #222;
}
/* ==== Container Utama ==== */
main {
max-width: 950px;
margin: 30px auto;
padding: 20px;
background-color: white;
border-radius: 12px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
transition: background-color 0.4s, color 0.4s;
}
.dark-mode main {
background-color: #1e1e1e;
color: white;
}
/* ==== Header ==== */
header {
text-align: center;
padding: 15px;
}
header h2 {
font-size: 2rem;
color: #0056d2;
}
header p {
font-size: 1.1rem;
margin-top: 5px;
}
/* ==== Gambar Profil ==== */
img {
display: block;
margin: 15px auto;
border-radius: 12px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.3s;
}
img:hover {
transform: scale(1.05);
}
/* ==== Table ==== */
table {
width: 100%;
margin-top: 15px;
border-collapse: collapse;
}
table, th, td {
border: 2px solid #0056d2;
padding: 10px;
text-align: center;
}
th {
background-color: #0056d2;
color: white;
}
/* ==== Form ==== */
form {
margin-top: 20px;
background-color: #f9fbff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
label {
font-weight: bold;
display: block;
margin-top: 10px;
}
input[type="text"],
input[type="email"],
select {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 6px;
outline: none;
transition: border-color 0.3s;
}
input:focus {
border-color: #0056d2;
}
input[type="submit"] {
background-color: #0056d2;
color: white;
padding: 10px;
border: none;
border-radius: 6px;
cursor: pointer;
margin-top: 15px;
transition: background-color 0.3s;
}
input[type="submit"]:hover {
background-color: #003f9a;
}
/* ==== Video & Iframe ==== */
iframe {
display: block;
margin: 15px auto;
border-radius: 10px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
max-width: 100%;
}
/* ==== Footer ==== */
footer {
text-align: center;
padding: 15px;
background-color: #0056d2;
color: white;
margin-top: 40px;
font-size: 0.95rem;
}
/* ==== Tombol Dark Mode ==== */
#darkModeToggle {
background-color: white;
color: #0056d2;
padding: 6px 12px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s;
}
#darkModeToggle:hover {
background-color: #ffdd57;
}
</style>
</head>
<body>
<nav>
<h1>Profil Marv</h1>
<ul>
<li><a href="#tentang">Tentang Saya</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#tabel">Tabel</a></li>
<li><a href="#form">Form</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#lokasi">Lokasi</a></li>
</ul>
<button id="darkModeToggle"> Mode Bahlil</button>
</nav>
<main>
<header id="tentang">
<h2>Halo, Saya Mustafidh Rafan Ahyan </h2>
<p>Selamat datang di halaman profil saya. Yuk, kenal lebih dekat!</p>
<img src="Gambar-gambar/gb7.jpg" alt="Bersiap PKL" width="400">
</header>
<section id="blog">
<h2>Blog Saya</h2>
<p>Kunjungi Blogger saya:</p>
<p><a href="https://www.blogger.com/blog/posts/619394769194970702?hl=en" target="_blank">Klik di sini untuk membuka blog</a></p>
<ul>
<li>Komponen-komponen dalam Laptop</li>
<li>Memahami Komponen-komponen Komputer</li>
<li>Mempelajari mengenai 3D</li>
</ul>
</section>
<section>
<h2>Keuntungan PKL</h2>
<ol>
<li>Melatih kedisiplinan</li>
<li>Memperkuat <strong>mental</strong> dan skill</li>
<li>Mempersiapkan lulusan yang siap <strong>bekerja</strong></li>
</ol>
</section>
<section id="tabel">
<h2>Contoh Tabel</h2>
<table>
<tr>
<th>Nama</th>
<th>Usia</th>
<th>Asal</th>
</tr>
<tr>
<td>Dimas</td>
<td>80</td>
<td>Depok</td>
</tr>
<tr>
<td>Fufufafa</td>
<td>25</td>
<td>Solo</td>
</tr>
<tr>
<td>Tania</td>
<td>17</td>
<td>Riau</td>
</tr>
</table>
</section>
<section id="form">
<h2>Form Login</h2>
<form id="loginForm">
<label for="name">Nama Pengguna:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email / Kata Sandi:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Login">
</form>
</section>
<section id="video">
<h2>Video Favorit</h2>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/UOxkGD8qRB4?si=1Zop-cQ4yWgJilFA"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</section>
<section id="lokasi">
<h2>Peta Lokasi PKL</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.274944795573!2d106.816666!3d-6.200000!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNsKwMTInMDAuMCJTIDEwNsKwNDgnNTkuOSJF!5e0!3m2!1sid!2sid!4v1630500000000!5m2!1sid!2sid"
width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>
</section>
</main>
<footer>
<p>© <span id="tahun"></span> Mustafidh Rafan Ahyan | Dibuat dengan menggunakan HTML</p>
</footer>
<script>
// Dark Mode Toggle
const toggleBtn = document.getElementById('darkModeToggle');
toggleBtn.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
toggleBtn.textContent = document.body.classList.contains('dark-mode') ? ' Mode Terang' : ' Mode Gelap';
});
// Update Tahun Otomatis
document.getElementById("tahun").textContent = new Date().getFullYear();
// Popup Selamat Datang
window.onload = function() {
alert("Selamat Datang di Profil Mustafidh Rafan Ahyan! ");
}
// Validasi Form
document.getElementById("loginForm").addEventListener("submit", function(e) {
e.preventDefault();
const nama = document.getElementById("name").value;
alert("Halo " + nama + "! Login berhasil ");
});
</script>
</body>
</html>

Hasil web dari saya:

Selain itu kami juga menggunakan Notepad++

Notepad++

Notepad++ adalah sebuah editor teks gratis dan sumber terbuka yang berjalan pada sistem operasi windows. Ia berguna untuk menyunting berbagai bahasa pemrograman dengan fitur penyorotan sintaksis dan pelipatan kode, yang mana membuatnya populer di kalangan pengembang.

Maka dari itu Notepad++ sangat berguna bagi pengembang web, programmer, dan siapa saja yang membutuhkan editor teks yang lebih canggih dan efisien daripada notepad bawaan windows.

Setelah mempelajari HTML, lalu kami di test untuk membuat web. Setelah saya berhasil membuat web walaupun tidak sempurna, namun masih bisa untuk menjadi bahan ajaran dan pengalaman untuk kami.

Setelah itu kami di beri tugas lagi untuk membuat laporan dalam bentuk blog. Saya pun membuat laporan tersebut hingga kami dipanggil kembali untuk briefing sebelum pulang.

setelah itu kami briefing mengenai materi apa saja yang telah kami kerjakan pada hari tersebut. Sekian dari cerita saya, jika ada yang berminat untuk belajar dan mendapatkan penjelasan yang lebih lengkap bisa cari sendiri dari sumber-sumber online dan buku.

Saya Mustafidh Rafan Ahyan izin pamit, Trimakasih telah mampir di Blog saya.

Azash.

Mustafidh Rafan Ahyan

Search This Blog