Pengertian HTML, CSS, dan JavaScript

Pemrograman Web Kelas XI: Profesi, Alur Pengembangan, Tools, Server, dan Dasar HTML

Dipublikasikan: 21 Agustus 2025 · Kategori: Pendidikan Web

Di era digital saat ini, pemrograman web menjadi salah satu keterampilan yang paling dibutuhkan di dunia kerja. Hampir semua perusahaan, lembaga, bahkan individu membutuhkan website sebagai sarana informasi, komunikasi, hingga transaksi.

Belajar pemrograman web sejak duduk di bangku SMA/SMK, terutama jurusan teknologi, adalah langkah tepat untuk mempersiapkan diri menghadapi dunia kerja. Website bukan hanya sekadar media informasi, melainkan juga alat branding, pemasaran, dan interaksi dengan pengguna global.

Artikel ini membahas materi Pemrograman Web Kelas XI meliputi: profesi dan alur kerja, tools pengembangan, arsitektur server, pengertian dan peran HTML, CSS, JavaScript (fokus HTML), struktur HTML5, contoh kode, serta latihan mini proyek.

Daftar Isi

• Profesi & Alur Pengembangan
• Tools & Arsitektur Server
• Pengenalan HTML, CSS, JavaScript
• Struktur Dasar HTML & Format Teks
• Latihan Mini Proyek
• Kesimpulan

Profesi & Alur Pengembangan Web

1.1 Profesi di Dunia Web

• Front-End Developer: Membuat tampilan & interaksi (HTML, CSS, JS).
• Back-End Developer: Logika aplikasi, API, database (PHP, Python, Node.js, Java).
• Full-Stack Developer: Menguasai front-end & back-end.
• Web/UI/UX Designer: Desain antarmuka, prototipe (Figma, Adobe XD).
• DevOps Engineer: Deployment, server, CI/CD, monitoring.
• QA Engineer: Pengujian fungsional, performa, keamanan.
• SEO Specialist/Content Manager: Optimasi konten & visibilitas Google.
• Product Manager/Scrum Master: Manajemen backlog, sprint, komunikasi tim.

Catatan: Tidak semua peran harus jago ngoding. Ada jalur desain, konten, dan manajemen yang sama pentingnya.

1.2 Alur Pengembangan (SDLC)

1. Discovery & Planning: Tujuan, target pengguna, fitur, jadwal.
2. Design: Wireframe, mockup, prototipe.
3. Development: Front-end (HTML, CSS, JS) & Back-end (API, DB, autentikasi).
4. Testing: Bug, kompatibilitas, performa, keamanan, aksesibilitas.
5. Deployment: Upload ke hosting, domain, SSL/TLS.
6. Maintenance: Update, perbaikan bug, peningkatan keamanan & fitur.

Semua Tools & Gambaran Arsitektur Server

2.1 Tools Umum untuk Developer

• Browser & DevTools: Chrome, Firefox, Edge, Safari.
• Code Editor: Visual Studio Code (disarankan), Sublime Text, Notepad++.
• Version Control: Git + GitHub/GitLab.
• Server Lokal: XAMPP, MAMP, Laragon atau Live Server.
• Package Manager/Build: Node.js + NPM, Vite/Parcel/Webpack (lanjutan).
• Desain: Figma (wireframe, prototipe, aset).
• Hosting: GitHub Pages, Netlify, Vercel (statis) atau cPanel/VPS (dinamis).

2.2 Arsitektur Web Server (Singkat)

Alur permintaan: Pengguna → DNS → Web Server (Apache/Nginx) → Aplikasi (PHP/Node/Python) → Database → Response → Browser.

• Web Server: Apache, Nginx.
• Application Runtime: PHP-FPM, Node.js, Python (Gunicorn/Uvicorn).
• Database: MySQL/MariaDB, PostgreSQL, MongoDB.
• Keamanan: SSL/TLS, firewall, update berkala.
• CDN/Cache: Mempercepat akses global.

Note: pahami konsep besarnya terlebih dahulu sambil terus menerus melakukan latihan

Pengenalan HTML, CSS, dan JavaScript (Fokus HTML)

3.1 Pengertian & Peran

HTML (HyperText Markup Language)

HTML adalah bahasa markup standar untuk membuat struktur halaman web. HTML bukan bahasa pemrograman, melainkan menggunakan tag seperti <h1>, <p>, <img> untuk memberi tahu browser bagaimana konten ditampilkan.

• Fungsi: menampilkan teks, gambar, link, tabel, form, media, dan elemen semantik.
• Analogi: kerangka bangunan (dinding, pintu, atap).

CSS (Cascading Style Sheets)

CSS adalah bahasa untuk mengatur tampilan halaman: warna, tipe & ukuran font, layout, spasi, hingga animasi dan responsivitas.

• Fungsi: membuat tampilan situs menarik, konsisten, dan mudah digunakan.
• Analogi: dekorasi & interior rumah.

JavaScript (JS)

JavaScript adalah bahasa pemrograman tingkat tinggi yang berjalan di browser (client-side) maupun server (Node.js). JS membuat situs menjadi dinamis dan interaktif.

• Fungsi: logika, event (klik, input), validasi form, animasi, komunikasi API.
• Analogi: listrik & mesin yang menghidupkan rumah.

3.2 Sejarah Singkat HTML

HTML diperkenalkan oleh Tim Berners-Lee pada 1991. Versi modern HTML5 mendukung video, audio, canvas, dan fitur web aplikasi.

3.3 Mengapa Mulai dari HTML?

HTML adalah fondasi. CSS dan JavaScript hanya dapat bekerja di atas struktur HTML yang baik.

Penjelasan Fungsi Tag HTML Dasar

HTML (HyperText Markup Language) adalah bahasa markup standar untuk membuat halaman web. Setiap tag memiliki fungsi tertentu agar browser bisa menampilkan konten dengan benar. Berikut adalah penjelasan tag-tag penting:

<html>

Tag <html> adalah root dari seluruh halaman web. Semua konten HTML harus berada di dalam tag ini. Atribut lang menentukan bahasa halaman.

<html lang="id"> ... </html>

<head>

Tag <head> berisi metadata halaman web yang tidak terlihat langsung oleh pengguna, seperti judul halaman, charset, stylesheet, dan script.

<head>
  <meta charset="utf-8">
  <title>Judul Halaman</title>
</head>

<title>

Menentukan judul halaman yang muncul di tab browser dan mesin pencari.

<title>Belajar HTML</title>

<meta charset>

Tag <meta charset="utf-8"> memberi tahu browser jenis encoding karakter yang digunakan, misalnya UTF-8, agar teks dapat ditampilkan dengan benar.

<meta charset="utf-8">

<body>

Tag <body> berisi semua konten halaman yang terlihat pengguna: teks, gambar, video, tabel, dan elemen interaktif.

<body>
  <h1>Halo Dunia</h1>
</body>

<p>

Tag <p> digunakan untuk membuat paragraf teks. Browser menambahkan jarak otomatis antar paragraf.

<p>Ini paragraf pertama.</p>
<p>Ini paragraf kedua.</p>

<hr>

Menambahkan garis horizontal sebagai pemisah konten antar bagian halaman.

<hr>

<a>

Membuat tautan ke halaman lain, file, atau anchor di halaman yang sama. Gunakan atribut href untuk menentukan tujuan link.

<a href="https://contoh.com">Kunjungi Contoh</a>

<img>

Menampilkan gambar. Gunakan atribut src untuk lokasi file dan alt untuk deskripsi gambar.

<img src="gambar.jpg" alt="Deskripsi Gambar">

<strong> & <em>

<strong> menandai teks penting (tebal). <em> menandai teks yang diberi penekanan (miring).

<strong>Penting</strong> <em>Teks miring</em>

<ul>, <ol>, <li>

Membuat daftar:

• <ul>: daftar tidak berurutan (bullet)
• <ol>: daftar berurutan (angka)
• <li>: item daftar, selalu di dalam <ul> atau <ol>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<blockquote>

Menandai kutipan panjang dari sumber lain.

<blockquote>Ini kutipan panjang dari sumber.</blockquote>

<code> & <pre>

<code> menandai kode inline. <pre> menampilkan teks dengan format whitespace dan baris asli.

<pre><code>let x = 10;</code></pre>

Kesimpulan

Dengan memahami tag HTML dasar seperti html, head, meta charset, title, body, p, dan lainnya, Anda dapat membuat halaman web yang terstruktur rapi, mudah dibaca, dan ramah SEO.

Struktur Dasar HTML & Format Teks

4.1 Struktur Dokumen HTML5

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Belajar HTML Pertama</title>
</head>
<body>
  <h1>Halo, Dunia!</h1>
  <p>Ini paragraf pertama saya di HTML.</p>
</body>
</html>

• <!DOCTYPE html> — Mengaktifkan modus standar (HTML5).
• <html> — Elemen root yang membungkus seluruh halaman.
• <head> — Metadata: judul, meta, link CSS, script.
• <body> — Konten yang terlihat di browser.

4.2 Heading, Paragraf, dan Format Teks

<h1>Belajar HTML Itu Mudah</h1>
<p><strong>HTML</strong> adalah bahasa dasar web.</p>
<p><em>Belajar rutin</em> membuat lebih cepat mahir.</p>
<hr>

• Heading: <h1> hingga <h6> untuk judul berjenjang.
• Paragraf: <p> untuk teks.
• Format: <strong>, <em>, <u>, garis baru <br>.

4.3 Tautan, Gambar, Komentar

<a href="halaman.html">Ke Halaman</a>
<img src="foto.jpg" alt="Siswa mempresentasikan hasil web di kelas">
<!-- Komentar ini tidak tampil -->

• Tautan: atribut penting href, target="_blank", rel="noopener noreferrer".
• Gambar: selalu isi alt untuk aksesibilitas dan SEO.

Latihan Mini Proyek

Buat file index.html berisi biodata sederhana.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Biodata Saya</title>
</head>
<body>
  <h1>Biodata</h1>
  <p>Nama: Iqbal</p>
  <p>Kelas: XI TJKT</p>
  <p>Cita-cita: Web Developer</p>
</body>
</html>

Kesimpulan

• Mengenal profesi di dunia web dan alur pengembangannya.
• Memahami tools pengembangan & gambaran arsitektur server.
• Mengetahui pengertian & peran HTML, CSS, JS.
• Menguasai struktur HTML5 dan format teks dasar.
• Membuat halaman HTML pertama melalui latihan mini proyek.

Fondasi ini memudahkan langkah ke materi berikutnya: list, tabel, multimedia, formulir, responsive design dengan CSS, dan interaktivitas dengan JavaScript.

Jadilah generalis pertama kali sebelum menjadi spesialis, namun jika sudah menemukan bakat atau minatnya lebih baik langsung menjadi seorang spesialis di 1 bidang.