Belajar Web Programming dari Nol: Panduan Lengkap HTML dan Cara Kerja Web

Panduan Lengkap Web Programming dan HTML untuk Pemula | Tutorial Indonesia

Apa itu Web
Cara Kerja Web
Tools & Framework
Dasar HTML
Text Formatting
Semantic HTML
List HTML
Hyperlink

Apa Itu World Wide Web?

World Wide Web (WWW), sering disebut juga W3 atau simply "Web", adalah sistem yang saling terhubung dari halaman-halaman web publik yang dapat diakses melalui Internet. Web pertama kali diusulkan oleh Tim Berners-Lee dan diciptakan di laboratorium fisika CERN pada tahun 1990.

Saat ini, standar web dikelola oleh World Wide Web Consortium (W3C) yang memastikan semua teknologi web berkembang secara konsisten dan dapat diakses oleh semua orang.

Komponen Utama Web:

HTTP Protocol - Protokol komunikasi antara client dan server
URL/URI - Uniform Resource Locator untuk mengidentifikasi alamat resource
HTML - HyperText Markup Language untuk struktur halaman web

Bagaimana Web Bekerja?

Web menyediakan halaman web ketika Anda melihatnya di perangkat Anda. Proses ini terjadi dalam arsitektur Client-Server.

Apa itu Client?

Client adalah perangkat yang terhubung ke internet seperti tablet, komputer, laptop, atau smartphone yang dilengkapi dengan web browser. Browser ini yang akan menampilkan halaman web kepada pengguna.

Apa itu Server?

Server adalah komputer yang menyimpan halaman web, gambar, data, dan file lainnya. Server bertugas mengirimkan (serve) konten tersebut ke client setiap kali diminta.

Alur Komunikasi Client-Server:

Client mengirim HTTP Request ke server (contoh: GET www.example.com)
Server memproses permintaan tersebut
Server mengirim HTTP Response berisi konten web (HTML, CSS, JavaScript)
Browser client merender dan menampilkan halaman web

Response dari server biasanya berisi kode client-side yaitu HTML, CSS, dan JavaScript yang akan dieksekusi oleh browser.

Tools dan Framework untuk Web Development

Ada banyak tools dan framework yang bisa digunakan untuk mengembangkan halaman web atau aplikasi, namun hal dasar yang Anda butuhkan hanya:

Text Editor - untuk mengedit kode
Web Browser - untuk melihat hasil kode
Pengetahuan HTML, CSS, dan JavaScript

Mengapa HTML, CSS, dan JavaScript?

Ketiga teknologi ini ibarat anatomi tubuh manusia dalam pembuatan website:

HTML = Tulang/Kerangka (struktur)
JavaScript = Otot/Saraf (fungsi dan interaktivitas)
CSS = Kulit/Penampilan (tampilan dan gaya)

Text Editor Populer

Nama	Keterangan
Visual Studio Code	Editor paling populer dengan banyak extension
Sublime Text	Ringan dan cepat
Notepad++	Sederhana untuk Windows
Vim/Neovim	Editor berbasis terminal untuk pengguna advanced
Brackets	Fokus pada web development

Browser Populer

Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, Brave, Opera, dan Chromium.

Library Web Populer

Bootstrap (framework CSS), jQuery (library JavaScript), Moment.js (manipulasi tanggal/waktu).

Framework Web Populer

React, Angular, Svelte, Vue.js - framework JavaScript untuk membangun aplikasi web modern.

Rekomendasi: Download Visual Studio Code di code.visualstudio.com atau gunakan editor online seperti Replit.

Dasar-Dasar HTML (HyperText Markup Language)

HTML adalah bahasa markup standar untuk web. HTML mendefinisikan struktur dasar halaman web dan terdiri dari elemen-elemen yang mencakup tag, atribut, dan konten.

Hello World dengan HTML

Mari kita mulai dengan membuat halaman web pertama:

                <html>

                  <head>

                    <title>My First Web Page</title>

                  </head>

                  <body>

                    <h1>Hello World</h1>

                  </body>

                </html>

Cara Menjalankan: Simpan file dengan ekstensi .html (contoh: home.html), kemudian buka file tersebut di web browser.

Anatomi Elemen HTML

Setiap elemen HTML terdiri dari:

Opening Tag - tag pembuka, contoh: <p>
Content - isi/konten
Closing Tag - tag penutup, contoh: </p>

                <p>My cat is very grumpy</p>

                <!-- Penjelasan: -->

                <!-- <p> = Opening tag -->

                <!-- My cat is very grumpy = Content -->

                <!-- </p> = Closing tag -->

                <!-- Keseluruhan = Element -->

Atribut HTML

Terkadang tag saja tidak cukup untuk mendesain halaman web. Sebagai contoh, kita menggunakan tag image <img> tetapi kita tidak tahu gambar mana yang akan ditampilkan dan berapa ukurannya.

Atribut adalah karakteristik tag yang membantu mendefinisikan properti tambahan untuk tag HTML.

Struktur Lengkap HTML5

HTML telah berkembang dan sekarang disebut HTML5. HTML5 memiliki fitur-fitur baru seperti tag media (video, audio) tanpa Flash player dan tag-tag baru yang lebih mudah digunakan.

                <!-- DOCTYPE memberitahu browser bahwa ini file HTML5 -->

                <!DOCTYPE html>

                <html lang="id">

                <head>

                  <meta charset="UTF-8">

                  <meta name="viewport" content="width=device-width, initial-scale=1.0">

                  <title>Document</title>

                </head>

                <body>

                  <!-- Konten halaman web di sini -->

                </body>

                </html>

Meta Tag

Meta tag mendefinisikan metadata dokumen HTML. Kontennya tidak ditampilkan di halaman, tetapi tetap dapat diproses. Meta tag berguna untuk deskripsi halaman web, author, encoding, dan sangat penting untuk Search Engine Optimization (SEO).

                <meta charset="UTF-8">

                <meta name="description" content="Tutorial web gratis">

                <meta name="keywords" content="HTML, CSS, JavaScript">

                <meta name="author" content="John Doe">

Konvensi Penulisan HTML

Gunakan huruf kecil untuk tag
Gunakan tanda kutip ganda atau tunggal untuk atribut
Setiap tag pembuka harus ditutup dengan tag yang sama (kecuali beberapa standalone tag)

Komentar dalam HTML

Komentar berguna untuk memberikan catatan pada kode. Komentar tidak akan ditampilkan di halaman web.

                <!-- Ini adalah komentar -->

                <!-- Bagian ini adalah informasi utama halaman web -->

                <h1>Ini adalah judul</h1>

Tag Heading

Heading digunakan untuk menampilkan informasi penting. HTML memiliki 6 level heading dari h1 (paling penting) sampai h6 (paling tidak penting).

                <h1>Heading Level 1 - Paling Penting</h1>

                <h2>Heading Level 2</h2>

                <h3>Heading Level 3</h3>

                <h4>Heading Level 4</h4>

                <h5>Heading Level 5</h5>

                <h6>Heading Level 6 - Paling Tidak Penting</h6>

Tag Paragraph dan Line Break

                <!-- Paragraf -->

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

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

                <!-- Line Break (baris baru) -->

                Line 1<br>

                Line 2

                <!-- Horizontal Rule (garis pemisah) -->

                <hr>

Tag Pre (Preformatted Text)

Jika Anda menulis teks dengan banyak spasi dan baris baru dalam HTML biasa, semuanya akan ditampilkan dalam satu baris. Gunakan tag <pre> untuk mempertahankan format asli teks.

                <pre>

                Computing adalah fakultas pertama di disini

                Computing terdiri dari 5 program studi

                  1. Informatika

                  2. Sistem Informasi

                  3. DKV

                  4. Desain Interior

                  5. Magister TI

                </pre>

Text Formatting dalam HTML

HTML menyediakan berbagai tag untuk memformat teks. Berikut adalah tag-tag formatting yang paling umum digunakan:

Tag Formatting Dasar

Tag	Fungsi
`<b>` atau `<strong>`	Membuat teks tebal. Strong memberikan penekanan penting
`<i>` atau `<em>`	Membuat teks miring. Em memberikan penekanan
`<u>` atau `<ins>`	Membuat teks bergaris bawah. Ins menandakan teks disisipkan
`<s>` atau `<del>`	Membuat teks tercoret. Del menandakan teks dihapus
`<mark>`	Menyorot/highlight teks (biasanya kuning)
`<big>` dan `<small>`	Membuat teks lebih besar atau lebih kecil
`<sub>` dan `<sup>`	Subscript dan superscript (contoh: H₂O, e=mc²)

Tag Formatting Lanjutan

Tag	Fungsi
`<span>`	Menandai bagian teks untuk styling
`<q>`	Membuat teks dalam tanda kutip
`<abbr title="...">`	Menandakan singkatan dengan tooltip
`<cite>`	Menandakan kutipan/sitasi (biasanya miring)
`<code>`	Menampilkan teks seperti kode program
`<kbd>`	Menampilkan teks seperti keyboard shortcut
`<var>`	Menampilkan variabel matematika/program
`<samp>`	Menampilkan output program

Contoh Penggunaan

                <b>Teks tebal</b><br>

                <strong>Teks tebal dan penting</strong><br>

                <i>Teks miring</i><br>

                <em>Teks miring dengan penekanan</em><br>

                <u>Teks bergaris bawah</u><br>

                Saya <s>benci</s> suka programming!<br>

                HTML adalah <del>Bahasa Programming</del> Markup Language<br>

                Manusia bisa berbohong, tapi <mark>Kode</mark> tidak<br>

                Gajah itu <big>besar</big>, semut itu <small>kecil</small><br>

                Air dalam Kimia: H<sub>2</sub>O<br>

                Rumus Einstein: e = mc<sup>2</sup>

Hasil Preview:

Teks tebal
Teks tebal dan penting
Teks miring
Teks miring dengan penekanan
Teks bergaris bawah
Saya ~~benci~~ suka programming!
HTML adalah ~~Bahasa Programming~~ Markup Language
Manusia bisa berbohong, tapi Kode tidak
Gajah itu besar, semut itu kecil
Air dalam Kimia: H₂O
Rumus Einstein: e = mc²

Simbol dan Entities

HTML menggunakan entities untuk menampilkan karakter khusus:

Hasil	Deskripsi	Entity Name	Entity Number
	Spasi yang tidak terputus
<	Kurang dari	<	<
>	Lebih dari	>	>
&	Ampersand	&	&
©	Copyright	©	©
®	Registered Trademark	®	®

                Kita berada di&nbsp;&nbsp;&nbsp;&nbsp;tempat yang jauh<br>

                1 &lt; 2<br>

                x &lt;= 5 dan x &gt; 3<br>

                Thomas &amp; Friends adalah kartun<br>

                &copy; disini Computing

HTML Semantics

Semantic berarti "berhubungan dengan bahasa atau logika". Dalam HTML, semantics berarti nama tag merepresentasikan makna langsung dari fungsinya. Menggunakan semantic HTML sangat penting untuk SEO dan aksesibilitas!

Sectioning Elements

Tag	Fungsi
`<main>`	Mendefinisikan konten utama halaman (maksimal 1 per halaman)
`<nav>`	Membungkus link navigasi utama
`<section>`	Mendefinisikan bagian generik dokumen
`<article>`	Mendefinisikan konten yang berdiri sendiri (lebih spesifik dari section)
`<aside>`	Mendefinisikan konten sampingan (sidebar, iklan)
`<header>`	Header atau pengantar konten
`<footer>`	Footer, biasanya di bagian bawah halaman

Contoh Penggunaan Semantic Elements

                <main>

                  <header>

                    <h1>Selamat Datang di Web Programming!</h1>

                  </header>

                  <nav>

                    <span>Home</span>

                    <span>HTML</span>

                    <span>CSS</span>

                    <span>JavaScript</span>

                  </nav>

                  <section>

                    <p>

                      Web Programming adalah topik fundamental untuk

                      mempersiapkan Anda mengembangkan software berbasis web.

                    </p>

                  </section>

                  <aside>

                    <p>Iklan: Gabung PUMA Computing!</p>

                  </aside>

                  <footer>

                    Kontak Computing: @pucomputing

                  </footer>

                </main>

Grouping Elements

Tag	Fungsi
`<div>`	Mengelompokkan konten (tidak memiliki makna semantik)
`<p>`	Membuat paragraf
`<blockquote>`	Menandai kutipan dari sumber lain
`<figure>` & `<figcaption>`	Menganotasi ilustrasi, diagram, atau foto
`<details>` & `<summary>`	Membuat bagian yang dapat diklik untuk melihat detail
`<address>`	Menandai informasi kontak

                <div>

                  Ini adalah satu divisi halaman

                </div>

                <p>

                  Ini paragraf dengan kutipan:<br>

                  <blockquote>To Be Or Not To Be</blockquote>

                </p>

                <details>

                  <summary>Klik untuk melihat apa yang dipelajari di Web Programming</summary>

                  HTML<br>

                  CSS<br>

                  JavaScript<br>

                </details>

                <figure>

                  <img src="https://picsum.photos/200" alt="Gambar Random">

                  <figcaption>Gambar 1 - Gambar dari Internet</figcaption>

                </figure>

                <address>

                  Jl. Ki Hajar Dewantara no 1, Jababeka. Bekasi. 17530

                </address>

Preview Details/Summary:

Klik untuk melihat apa yang dipelajari di Web Programming

HTML
CSS
JavaScript

List dalam HTML

Terkadang kita perlu membuat daftar di halaman web. Ada dua jenis list utama:

Unordered List (ul) - Daftar tanpa urutan
Ordered List (ol) - Daftar dengan urutan

Unordered List

Gunakan tag <ul> dengan <li> di dalamnya.

                Daftar Belanja

                <ul>

                  <li>Roti</li>

                  <li>Susu</li>

                  <li>Ham</li>

                  <li>Brokoli</li>

                  <li>Tahu</li>

                </ul>

Tipe Unordered List

                <!-- type="disc" (default) - Lingkaran penuh -->

                <ul type="disc">

                  <li>Item</li>

                </ul>

                <!-- type="circle" - Lingkaran kosong -->

                <ul type="circle">

                  <li>Item</li>

                </ul>

                <!-- type="square" - Kotak -->

                <ul type="square">

                  <li>Item</li>

                </ul>

Ordered List

Gunakan tag <ol> dengan <li> di dalamnya.

                Daftar Belanja

                <ol>

                  <li>Roti</li>

                  <li>Susu</li>

                  <li>Ham</li>

                  <li>Brokoli</li>

                  <li>Tahu</li>

                </ol>

Tipe Ordered List

Type	Deskripsi	Hasil
type="1"	Angka Arab (default)	1, 2, 3...
type="A"	Huruf kapital	A, B, C...
type="a"	Huruf kecil	a, b, c...
type="I"	Romawi kapital	I, II, III...
type="i"	Romawi kecil	i, ii, iii...

                <!-- Huruf kapital -->

                <ol type="A">

                  <li>Item pertama</li>

                  <li>Item kedua</li>

                </ol>

                <!-- Angka Romawi -->

                <ol type="I">

                  <li>Item pertama</li>

                  <li>Item kedua</li>

                </ol>

Preview Ordered List:

Type A:

Item pertama
Item kedua

Type I:

Item pertama
Item kedua

Hyperlink (Anchor)

Gunakan tag <a> untuk membuat link ke halaman lain atau file.

Atribut Penting

href - menentukan lokasi link atau file
target - menentukan di mana link akan dibuka

Warna Link

Biru - Link belum dikunjungi
Ungu - Link sudah dikunjungi
Merah - Link aktif

                <a href="https://www.google.com/">GOOGLE</a>
            

Target Options

Target	Fungsi
_self	Buka di jendela yang sama (default)
_blank	Buka di jendela/tab baru
_parent	Buka di parent frame (jika menggunakan iframe)
_top	Buka di seluruh body jendela

                <!-- Buka di tab baru -->

                <a href="https://www.google.com/" target="_blank">GOOGLE (Tab Baru)</a>

                <!-- Buka di jendela yang sama -->

                <a href="https://www.google.com/" target="_self">GOOGLE (Jendela Sama)</a>

Bonus: Tag Tambahan

Meter dan Progress

                <!-- Meter: menampilkan nilai dalam rentang tertentu -->

                Penggunaan Disk: <meter value="2" min="0" max="10">2 dari 10</meter>

                <!-- Progress: menampilkan progress bar -->

                Download: <progress value="70" max="100">70%</progress>

Preview:

Penggunaan Disk: 2 dari 10

Download: 70%

Emoji dalam HTML

HTML5 mendukung emoji! Anda dapat menggunakan kode emoji atau langsung copy-paste emoji.

                <!-- Menggunakan kode HTML -->

                &#128512; <!-- 😀 -->

                &#128525; <!-- 😍 -->

                &#128640; <!-- 🚀 -->

Referensi Emoji: Kunjungi W3Schools Emoji Reference untuk daftar lengkap emoji HTML.

Kesimpulan

Dalam tutorial ini, kita telah mempelajari dasar-dasar Web Programming dan HTML:

Apa itu Web - Sistem halaman web yang saling terhubung melalui Internet
Cara Kerja Web - Arsitektur Client-Server dengan HTTP Request/Response
Tools Development - Text editor (VS Code), browser, dan pengetahuan HTML/CSS/JS
Struktur HTML - DOCTYPE, html, head, body, dan meta tags
Text Formatting - Bold, italic, underline, strikethrough, dan lainnya
Semantic HTML - Tag bermakna seperti header, nav, main, section, article, footer
List - Ordered list (ol) dan unordered list (ul)
Hyperlink - Tag anchor (a) untuk membuat link

Langkah Selanjutnya: Setelah menguasai HTML, lanjutkan belajar CSS untuk styling dan JavaScript untuk interaktivitas. Kombinasi ketiga teknologi ini adalah fondasi untuk menjadi Web Developer!