DK's Diary: Belajar HTML dan CSS

Assalamualaikum Warrahmatullahi Wabarakatuhu,

Kali ini penulis ingin berbagi ilmu tentang HTML, Javascript dan CSS.

HTML (HyperText Markup Language) adalah bahasa standar yang digunakan untuk membuat dan menyusun halaman web. HTML bukan bahasa pemrograman (seperti JavaScript), melainkan bahasa markah (markup language) yang memberi struktur pada konten web.

Berikut langkah-langkah persiapan pembuatan website:

1. Lakukan install aplikasi text editor seperti Visual Code (VSCode), notepad++, Atom atau lainnya.

2. Setelah kita install aplikasi text editor tersebut, selanjutnya kita buat folder khusus untuk menempatkan file website kita nanti, sebagai contoh buat folder baru di Desktop dengan judul Website.

3. Buat file baru text document didalam folder Website tersebut sehingga tampil file txt baru dengan nama "New Text Document.txt".

4. Pada tampilan windows explorer pilih View lalu contreng "File name extention" dan "Hidden item" supaya tampilan file pada explorer terlihat semua.

5. Ganti nama file "New Text Document.txt" menjadi nama website yang kita inginkan seperti contoh "Websire-1.html" jangan lupa kode .txt diganti menjadi .html lalu klik Yes.

Sehingga tampilan file berubah menjadi file html dibawah ini yang apabila dibuka (double klik) akan tampak kosong.

6. Buka file Website-1 tersebut pada VSCode dengan cara klik kanan filenya pilih "Open with" pilih "Visual Studio Code"

atau dengan cara langsung buka aplikasi VSCode lalu pilih "Explorer", pilih "Open Folder" pilih folder Website, lalu klik Select folder, dan pilih file Website-1.html

7. Mengetahui standar susunan website dengan cara klik tanda seru "!" lalu enter

Maka akan tampil format dokumen bawaan html untuk membuat website:

Untuk memperbesar tampilan VSCode (Zoom in) kita bisa gunakan tombol Ctrl ++ sesuai yang kita inginkan, sebaliknya untuk mengecilkannya gunakan tombol Ctrl -- sesuai yang kita inginkan.

Jadi apabila kita tambahkan tulisan Apa Kabar antara <body> dengan </body> dibawahnya begitu kita save VSCodenya (dengan tombol Crtl S)

Selanjutnya kita buka file Website-1.html maka akan tampil website sederhana dengan tulisan seperti dibawah ini

8. Pada petunjuk no 7 diatas menunjukkan format bawaan html yang sudah jadi, akan tetapi kita harus memahami fungsi kode dalam pembuatan html yang pertama paling penting yaitu induk kode html harus dimulai dengan kode <html> dan diakhiri dengan kode </html> perlu diingat bahwa tanda garis miring "/" adalah kode penutup dari suatu rangkaian koding, yang digunakan tidak hanya pada format html tapi format lainpun serupa. Jadi untuk membuat html harus diberi tanda seperti dibawah ini:

<html>

....

</html>

Tanda ...... diisi dengan koding isi html

Kode selanjutnya yaitu <head> yang di akhiri dengan kode </head> yang berarti berisikan informasi metadata atau bisa disebut bagian kepala dari suatu website yang bisa kita isi dengan judul website atau sepatah kata penjelasan tentang website kita.

Kode selanjutnya yaitu <body> yang diakhiri dengan kode </body> yang berarti berisikan kode tentang konten isi website kita.

Jadi kode penting didalam pembuatan html ada 3 yaitu:
1. <html> </html>

2. <head> </head>

3. <body> </body>

Sebagai contoh kita ingin menampilkan tulisan "Ini Websiteku" sehingga susunan kodenya seperti dibawah ini, jangan lupa tekan Ctrl S untuk menyimpannya:

Sehingga saat kita buka file Website-1 maka akan tampil seperti dibawah ini:

Itulah kode dasar dalam pembuatan html, mudah bukan? semoga sobat blogger dapat memahami dengan mudah semua.

🔑 Fungsi Utama HTML:

Menyusun struktur halaman web: teks, gambar, tautan, tabel, formulir, dan lainnya. Menandai elemen-elemen agar bisa ditata oleh CSS dan diatur perilakunya oleh JavaScript.

Struktur Dasar HTML

<!DOCTYPE html>

<html>

<head>

<title>Judul Halaman</title>

</head>

<body>

<h1>Ini adalah judul</h1>

<p>Ini paragraf.</p>

<a href="https://example.com">Tautan</a>

</body>

</html>

🏷️ Contoh Tag HTML Penting:

Tag Fungsi

<html> Root/akar dari semua halaman HTML

<head> Berisi informasi metadata

<body> Konten yang ditampilkan di browser

<h1>–<h6> Judul dari besar ke kecil

<p> Paragraf teks

<a> Tautan (hyperlink)

<img> Menyisipkan gambar

<ul>, <ol>, <li> Daftar (bullet/berurutan)

<div> Kontainer umum

<span> Kontainer inline (lebih kecil dari div)

padding → jarak di dalam elemen (antara konten dan tepi dalam elemen).

Contoh: padding: 20px akan memberikan jarak 20 piksel dari teks di dalam kotak ke semua sisi kotaknya (atas, kanan, bawah, kiri). Kotaknya akan terasa "lebih luas" karena isi tidak mepet ke tepi.

margin → jarak di luar elemen (antara elemen ini dan elemen lain di luar).

+-----------------------------+

| Margin (luar) |

| +---------------------+ |

| | Padding (dalam) | |

| | +---------------+ | |

| | +---------------+ | |

| +---------------------+ |

+-----------------------------+

1. Mengatur Ukuran Font

Cara 1. Pakai tag <font> (cara lama, tidak direkomendasikan sekarang)

<font size="5">Teks besar</font>

Nilai size dari 1 (kecil) sampai 7 (besar).

Tapi, cara ini sudah kuno dan tidak dianjurkan lagi di HTML5.

Cara 2. Pakai CSS modern (cara yang benar dan fleksibel)

<p style="font-size: 24px;">Teks besar</p>

<span style="font-size: 150%;">Teks 1.5 kali lebih besar</span>

<h1 style="font-size: 48px;">Judul besar</h1>

Kamu bisa atur ukuran font dengan satuan seperti px, em, rem, atau %.

Cara 3. Gunakan tag heading <h1> sampai <h6>

<h1>Ini besar</h1>

<h2>Ini sedikit lebih kecil</h2>

<h3>Ini lebih kecil lagi</h3>

Heading otomatis lebih besar: <h1> adalah yang paling besar, <h6> paling kecil.

2. Memberi Jarak Baris Baru (Spasi Vertikal Antar Teks)

Cara 1. Pakai tag <br> untuk "enter" (pindah ke baris baru):

Ini baris pertama.<br>

Ini baris kedua.

➔ Hasilnya akan membuat teks di baris baru, seperti tekan Enter.

Cara 2. Pakai tag <p> untuk membuat paragraf baru (otomatis ada jarak spasi antar paragraf):

<p>Ini paragraf pertama.</p>

<p>Ini paragraf kedua.</p>

➔ Ini memberi spasi vertikal yang lebih besar antar teks.

Cara 3. Pakai CSS (Casecading Style Sheet atau gaya lembar berlapis ) untuk atur jarak (kalau mau lebih fleksibel):

Misalnya atur margin antar elemen:

<p style="margin-bottom: 20px;">Paragraf dengan jarak 20px di bawahnya.</p>

<p>Paragraf berikutnya.</p>

3. Menampilkan Teks Tanpa Jarak

Cara 1. Langsung sambung dalam satu elemen teks

Misalnya dengan <span> atau teks biasa di dalam elemen:

<span>Teks pertama</span><span>Teks kedua</span>

➔ Ini akan tampil tanpa jarak atau enter.

Cara 2. Hindari tag yang otomatis beri jarak, seperti:

<p> (beri spasi antar paragraf)

<div> (blok elemen, bisa beri jarak tergantung CSS)

Cara 3. Gunakan CSS untuk hapus jarak jika perlu:

Jika kamu pakai <p> atau <div>, kamu bisa "hilangkan jarak" dengan CSS:

<p style="margin: 0; padding: 0;">Teks tanpa jarak</p>

Cara 4. Gunakan white-space: nowrap; jika mau semua teks tetap di satu baris:

<div style="white-space: nowrap;">Teks yang tidak pindah ke baris baru walaupun panjang</div>

Cara 5. Hindari <br> dan <p> jika tidak ingin ada jarak

Teks 3<br>

Teks 4

4. Membuat Table

Contoh 1. Table Sederhana (2 baris, 1 kolom)

Gunakan kode <table border="1"> dan diakhiri dengan kode </table> supaya tabelnya keluar garis maka pada kode awal table diberi border="1", kemudian di dalam kode table kita lengkapi dengan kode kepala table atau table head <thead> dan diakhiri dengan </thead> selanjutnya dibawahnya kita lengkapi dengan kode badan table atau table body (tbody) dan diakhiri dengan </tbody>. Di dalam masing-masing table head maupun table body tersebut kita buat kode garis table atau table raw <tr> dan diakhiri </tr> setelah itu di dalam garis table tersebut kita masukkan data table atau table data dengan kode <td> dan diakhiri dengan </td>

Gunakan susunan format html sederhana seperti dibawah:

Keterangan: table head <thead> bisa disederhanakan menjadi <th>

Begitu kita save dan kita buka pada file Website-1 maka akan tampil seperti dibawah ini:

Contoh 2. Table Sederhana (2 baris, 3 kolom)

Begitu kita save dan kita buka pada file Website-1 maka akan tampil seperti dibawah ini:

Contoh 3. Pakai warna dan border

<tr>

</tr>

<tr>

<td style="padding: 8px;">Jakarta</td>

</tr>

</table>

Hasilnya:

5. Membuat Scroll Susunan Kata

Cara 1. Scroll Vertical

<p>Kalimat 1</p>

<p>Kalimat 2</p>

<p>Kalimat 3</p>

<p>Kalimat 4</p>

<p>Kalimat 5</p>

<p>Kalimat 6</p>

<p>Kalimat 7</p>

<p>Kalimat 8</p>

<p>Kalimat 9</p>

<p>Kalimat 10</p>

</div>

Penjelasan:

width dan height → menentukan ukuran kotak kontainer.

overflow-y: scroll → memunculkan scroll vertikal jika konten terlalu panjang.

border dan padding → hanya untuk tampilan agar rapi (opsional).

Hasilnya:

Cara 2. Scroll Horizontal

<span>Ini kalimat panjang sekali yang tidak akan turun ke baris baru, melainkan bisa digeser ➡️</span>

</div>

Hasilnya:

6. Membuat Kalimat Yang Di Klik

Contoh 1. Simple

<summary>Klik untuk membuka kalimat</summary>

<p>Ini adalah kalimat atau isi yang muncul setelah diklik.</p>

</details>

Hasilnya:

Simple

Didukung oleh semua browser modern

Tidak perlu JavaScript

Contoh 2. Dengan Tabel berwarna menggunakan HTML + CSS + (opsional) JavaScript

<style>

.accordion {

cursor: pointer;

padding: 10px;

width: 100%;

text-align: left;

border: none;

outline: none;

background-color: #599bb3;

color: white;

font-weight: bold;

}

.panel {

display: none;

padding: 10px;

background-color: #f1f1f1;

}

.accordion.active + .panel {

display: block;

}

</style>

<button class="accordion" onclick="this.classList.toggle('active')">Klik untuk membuka kalimat</button>

<p>Ini kalimat yang muncul setelah tombol diklik.</p>

</div>

Hasilnya:

Contoh 3 Klik kalimat pertama, akan muncul kalimat kedua, dan seterusnya hingga lima kalimat.

Ini menggunakan HTML + CSS + JavaScript dengan efek simpel dan rapi.

<!DOCTYPE html>

<head>

<title>Kalimat Interaktif Bertahap</title>

<style>

body {

font-family: Arial, sans-serif;

padding: 30px;

background: #f0f0f0;

}

.kalimat {

display: none;

margin-bottom: 10px;

padding: 12px;

background-color: #599bb3;

color: white;

border-radius: 8px;

cursor: pointer;

transition: background-color 0.2s ease;

}

.kalimat:hover {

background-color: #4a88a0;

}

.kalimat.show {

display: block;

}

</style>

</head>

<body>

<div id="k1" class="kalimat show" onclick="tampilkanKalimat(2)">Klik untuk melihat kalimat 2</div>

<div id="k2" class="kalimat" onclick="tampilkanKalimat(3)">Kalimat 2: Kamu berhasil! Klik untuk lanjut.</div>

<div id="k3" class="kalimat" onclick="tampilkanKalimat(4)">Kalimat 3: Semangat terus ya! Klik lagi.</div>

<div id="k4" class="kalimat" onclick="tampilkanKalimat(5)">Kalimat 4: Hampir selesai! Satu lagi!</div>

<div id="k5" class="kalimat">Kalimat 5: Selesai! 🎉 Terima kasih sudah mengikuti.</div>

function tampilkanKalimat(nomor) {

const id = "k" + nomor;

const kalimat = document.getElementById(id);

if (kalimat) {

kalimat.classList.add("show");

}

</script>

</body>

</html>

Hasilnya:

Contoh 4. Efek Ketik & Reset

<!DOCTYPE html>

<head>

<title>Kalimat Interaktif Efek Ketik</title>

<style>

body {

font-family: 'Courier New', monospace;

background-color: #f4f4f4;

padding: 30px;

color: #333;

}

#container {

max-width: 600px;

margin: auto;

background-color: #fff;

padding: 20px;

border-radius: 10px;

box-shadow: 2px 2px 10px rgba(0,0,0,0.1);

}

#kalimat {

min-height: 60px;

font-size: 18px;

background-color: #599bb3;

color: white;

padding: 15px;

border-radius: 8px;

white-space: pre-wrap;

margin-bottom: 20px;

}

button {

background-color: #599bb3;

color: white;

border: none;

padding: 12px 20px;

font-size: 16px;

border-radius: 6px;

cursor: pointer;

transition: background-color 0.2s ease;

}

button:hover {

background-color: #4a88a0;

}

#resetBtn {

display: none;

}

</style>

</head>

<body>

<button onclick="lanjutkanKalimat()">Klik untuk lanjut</button>

<button id="resetBtn" onclick="resetKalimat()">Ulangi dari awal</button>

</div>

const kalimatList = [

"Kalimat 1: Selamat datang!",

"Kalimat 2: Terima kasih sudah klik.",

"Kalimat 3: Kamu hebat!",

"Kalimat 4: Hampir selesai.",

"Kalimat 5: Selesai! 🎉 Terima kasih sudah ikut."

];

let index = 0;

function ketikTeks(teks, elemen, i = 0) {

if (i < teks.length) {

elemen.textContent += teks.charAt(i);

setTimeout(() => ketikTeks(teks, elemen, i + 1), 30);

}

function lanjutkanKalimat() {

if (index < kalimatList.length) {

const kalimatEl = document.getElementById("kalimat");

kalimatEl.textContent = "";

ketikTeks(kalimatList[index], kalimatEl);

index++;

if (index === kalimatList.length) {

document.querySelector("button").style.display = "none";

document.getElementById("resetBtn").style.display = "inline-block";

}

function resetKalimat() {

index = 0;

document.getElementById("kalimat").textContent = "";

document.querySelector("button").style.display = "inline-block";

document.getElementById("resetBtn").style.display = "none";

}

</script>

</body>

</html>

Hasilnya:

7. Menampilkan Menu Pencarian

Cara 1

<form action="http://nama-blogmu.blogspot.com/search"

method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Hasilnya:

Cara 2

<!DOCTYPE html>

<head>

<title>Silsilah Keluarga 3 Generasi</title>

<style>

ul {

list-style-type: none;

}

li {

margin: 5px 0;

}

.highlight {

background-color: yellow;

font-weight: bold;

}

#search-box {

margin-bottom: 15px;

padding: 8px;

width: 250px;

}

</style>

</head>

<body>

<h1>Silsilah Keluarga Besar Ahmad</h1>

<li>Ahmad

<ul>

<li>Budi

<ul>

<li>Citra</li>

</ul>

</li>

<li>Eni

<ul>

<li>Fajar</li>

</ul>

</li>

</ul>

</li>

</ul>

const searchBox = document.getElementById("search-box");

const listItems = document.querySelectorAll("#family-tree li");

searchBox.addEventListener("input", () => {

const query = searchBox.value.toLowerCase();

listItems.forEach(li => {

const name = li.textContent.toLowerCase();

if (query && name.includes(query)) {

li.classList.add("highlight");

li.style.display = "";

} else {

li.classList.remove("highlight");

li.style.display = query ? "none" : "";

}

});

</script>

</body>

</html>

Hasilnya:

Cara 3. Pencarian Nama Orang (Terbuka pohon silsilah terkait saja)

<p>Tampilkan Nama Orang Pada Pohon Silsilah</p>

<input type="text" id="searchInput" placeholder="Cari nama..."

style="margin: 1px; padding: 8px; font-size: 14px; border: 1px solid #ccc; border-radius: 5px;">

<button onclick="searchTree()"

style="padding: 8px 12px; font-size: 14px; margin-left: 5px; cursor: pointer;">Cari</button>

<button onclick="location.reload()">Kembali Awal</button>

function searchTree() {

const input = document.getElementById('searchInput').value.toLowerCase();

const links = document.querySelectorAll('#myUL li a');

// Reset semua node: hapus highlight dan sembunyikan cabang

links.forEach(link => {

link.style.backgroundColor = '';

link.parentElement.style.display = 'none';

let parentUl = link.closest('ul');

if (parentUl) parentUl.classList.remove('SilAktif');

});

if (input === '') {

// Kosongkan input = tampilkan semua kembali

links.forEach(link => {

link.parentElement.style.display = 'block';

let parentUl = link.closest('ul');

if (parentUl) parentUl.classList.add('SilAktif');

});

return;

}

let ditemukan = false;

links.forEach(link => {

const nama = link.textContent.trim().toLowerCase();

if (nama.includes(input)) {

ditemukan = true;

link.style.backgroundColor = 'green';

link.parentElement.style.display = 'block';

// Tampilkan semua parent <li> dan <ul> agar cabang terbuka

let parent = link.parentElement;

while (parent && parent.id !== 'myUL') {

if (parent.tagName === 'LI') {

parent.style.display = 'block';

}

if (parent.tagName === 'UL') {

parent.classList.add('SilAktif');

}

parent = parent.parentElement;

}

});

if (!ditemukan) {

alert("Nama tidak ditemukan.");

}

</script>

📌 Catatan:

Letakkan kode html tersebut dibawah isi silsilah keluarga

Hasilnya:

Cara 4. Pencarian Kota

<input type="text" id="searchCityInput" placeholder="Cari berdasarkan kota..." onkeyup="searchByCity()"

style="margin: 10px; padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px;">

function searchByCity() {

const input = document.getElementById('searchCityInput').value.toLowerCase();

const nodes = document.querySelectorAll('#myUL li a');

let found = false;

// Reset tampilan sebelumnya

nodes.forEach(node => {

node.style.backgroundColor = '';

node.parentElement.classList.remove('SilAktif');

if (node.querySelector('.caret')) {

node.querySelector('.caret').classList.remove('caret-down');

}

});

nodes.forEach(node => {

const keterangan = node.getAttribute('data-keterangan')?.toLowerCase() || '';

if (keterangan.includes(input) && input !== '') {

found = true;

// Sorot hasil

node.style.backgroundColor = '#90ee90';

// Buka cabang (naik ke atas sampai root)

let parent = node.parentElement;

while (parent && parent.id !== 'myUL') {

if (parent.classList.contains('nested')) {

parent.classList.add('SilAktif');

}

const siblingCaret = parent.previousElementSibling?.querySelector('.caret');

if (siblingCaret) siblingCaret.classList.add('caret-down');

parent = parent.parentElement;

}

});

if (!found && input !== '') {

alert("Kota tidak ditemukan.");

}

</script>

📌 Catatan:

Letakkan kode html tersebut dibawah isi silsilah keluarga

Pastikan setiap <a> di pohon Anda memiliki atribut data-keterangan, seperti:

Hasilnya:

Cara 5. Pencarian orang berdasarkan nama kota

<!DOCTYPE html>

<head>

<title>Pencarian Berdasarkan Kota</title>

<style>

* {

box-sizing: border-box;

}

body {

font-family: Arial, sans-serif;

margin: 20px;

}

input, button {

padding: 10px;

font-size: 14px;

margin: 5px 5px 5px 0;

}

/* Pastikan container terpisah dan tidak ganggu layout lain */

#pencarian-kota {

margin-bottom: 40px;

}

/* Container hasil pencarian */

.hasil-container {

overflow-x: auto;

max-width: 100%;

}

/* Tabel khusus hanya untuk hasil pencarian */

.tabel-hasil {

border-collapse: collapse;

width: 100%;

min-width: 600px;

margin-top: 20px;

background-color: #fff;

}

.tabel-hasil th,

.tabel-hasil td {

border: 1px solid #000;

padding: 10px;

font-size: 14px;

text-align: left;

}

/* Jika ada tabel lain di halaman, tidak akan terdampak */

</style>

</head>

<body>

<h2>Cari Orang Berdasarkan Kota/Daerah</h2>

<button onclick="location.reload()">Kembali Awal</button>

</div>

const dataOrang = [

{nama: "Soekati Mariyah", alamat: "Jl. Batu Wulung 2 Buah Batu Dalam, Bandung"},

{nama: "Sumini", alamat: "Museum H Widayat Jl. Let. Tukiyat, Magelang"},

{nama: "Sukrisno", alamat: "Terusan Hanglebir II W.12, Jakarta 12220"}

];

function cariKota() {

const kota = document.getElementById("kotaInput").value.toLowerCase();

const hasil = dataOrang.filter(item => item.alamat.toLowerCase().includes(kota));

let output = `<h3>Hasil Pencarian untuk Kota: <em>${kota}</em></h3>`;

if (hasil.length > 0) {

output += `<table class="tabel-hasil"><tr><th>No</th><th>Nama</th><th>Alamat</th></tr>`;

hasil.forEach((orang, index) => {

output += `<tr><td>${index + 1}</td><td>${orang.nama}</td><td>${orang.alamat}</td></tr>`;

});

output += `</table>`;

} else {

output += `<p>Tidak ditemukan orang yang tinggal di kota tersebut.</p>`;

}

document.getElementById("hasil").innerHTML = output;

}

</script>

</body>

</html>

📌 Catatan:

Data dimasukkan ke dalam array JavaScript dataOrang dengan struktur { nama: "...", alamat: "..." }

Jangan lupa antara format { nama: "...", alamat: "..." } nama satu dan nama selanjutnya harus diberi koma, sementara untuk nama yang terakhir tidak perlu.

Fungsi cariKota() mencari semua entri yang alamatnya mengandung kata kota (case-insensitive).

Hasilnya:

8. Menambahkan kode input

Susunan format kode input pada dasarnya dimuai dengan kode <input> dan diakhiri dengan </input>, akan tetapi dari VSCode disarankan kodenya di sederhanakan menjadi <input />. Di dalam kode ini ditambahkan tipe yang akan kita input apa saja tergantung kebutuhan dengan kode <input type=""/>

Contoh 1. Input File

Maka hasilnya akan seperti ini:

Contoh 2. Input Date

Maka hasilnya akan seperti ini:

9. Menulis keterangan pada VS Code tanpa tampil di Website

Apabila kita menulis sesuatu keterangan apa saja pada tampilan VS Code maka tulisan tersebut akan tampil pada website yang kita buat. Untuk membuat tulisan tersebut tidak tampil kita dapat menulisnya di dalam format kode ini  atau dengan cara blok komen yang akan kita unvisual lalu tekan Ctrl /.

Itu saja yang dapat penulis sampaikan, untuk update selanjutnya akan diperbaharui secara bertahap.

Wassalam,

DK's Diary

Wednesday, May 7, 2025

Belajar HTML dan CSS

Artikel Lainnya

No comments:

Post a Comment