Konsep Aplikasi Web | Pemrograman Web

Pengenalan HTML

HTML (HyperText Markup Language) adalah bahasa standar yang digunakan untuk membuat dan merancang halaman web. Dalam dunia web development, HTML berfungsi sebagai kerangka dasar yang mendefinisikan struktur dan isi dari sebuah halaman web. HTML bukanlah bahasa pemrograman, melainkan markup language (bahasa penanda) yang menggunakan elemen-elemen (tag) untuk memberi struktur pada konten seperti teks, gambar, link, dan lainnya.

Struktur Kode HTML

html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman</title>
</head>
<body>

    <h1>Halo, Dunia!</h1>
    <p>Ini adalah struktur dasar dokumen HTML.</p>

</body>
</html>

Kode	Penjelasan
`<!DOCTYPE html>`	Mendeklarasikan bahwa dokumen ini menggunakan HTML5
`<html>`	Elemen pembungkus konten halaman web
`<head>`	Bagian kepala dokumen, berisi metadata yang tidak tampil langsung di halaman, tetapi penting untuk browser dan mesin pencari.
`<meta>`	Elemen untuk mengatur tampilan HP, dan informasi web
`<title>`	Untuk membarikan judul di tab browser
`<body>`	Bagian isi (teks, gambar, dll.) yang terlihat di website.

Elemen Dasar HTML

1. Heading (Judul)

Digunakan untuk membuat judul atau subjudul. Ada 6 level (h1 paling besar, h6 paling kecil).

html

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

2. Paragraf

html

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

3. Link (Hyperlink)

html

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

href = atribut untuk menentukan tujuan link.

4. Gambar Link :

html

<img src="gambar.jpg" alt="Deskripsi gambar" width="300">

src: alamat gambar yang diambil
alt: teks untuk alternatif gambar yang tidak muncul

5. Order List :

html

<ol>
    <li>Langkah pertama</li>
    <li>Langkah kedua</li>
</ol>

6. Unordered List :

html

<ul>
    <li>Apel</li>
    <li>Pisang</li>
</ul>

7. Comment (Komentar) :

html

<!-- Ini Komentar -->
<p>Aku Budiono Siregar</p>

Semantik

Penggunaan tag HTML yang sesuai dengan arti dan fungsi konten di dalamnya, bukan sekadar untuk mengatur tampilan.