Primer lesson: hyper text markup language

Pelajaran: Bahasa Markup Hiperteks (HTML)

HTML adalah singkatan dari Hypertext Markup Language . Bahasa ini adalah bahasa khusus yang digunakan untuk membangun halaman web. Saat Anda mengunjungi situs web, komputer membaca HTML untuk menampilkan kata-kata, gambar, dan tautan. Bayangkan HTML sebagai blok pembangun situs web. Sama seperti Anda menggunakan potongan Lego untuk membangun rumah atau mobil, kita menggunakan tag HTML untuk membangun halaman web.

Apa itu HTML?

HTML adalah kode yang memberi tahu komputer cara menampilkan teks, gambar, video, dan tautan di halaman web. Seperti memberi instruksi kepada teman yang sedang menggambar untuk Anda. HTML menggunakan kata-kata di dalam tanda kurung siku, yang disebut tag , untuk menandai awal dan akhir suatu bagian halaman web.

Mengapa HTML Penting?

Setiap situs web yang Anda kunjungi menggunakan HTML dalam beberapa cara. Tanpa HTML, tidak akan ada halaman web yang bisa Anda lihat. HTML membantu mengatur konten dan memberi tahu komputer cara menampilkan halaman. Ini adalah hal pertama yang dipelajari seseorang dalam pengembangan web karena inilah yang membuat internet berfungsi!

Struktur Dasar Dokumen HTML

Dokumen HTML memiliki struktur khusus. Dokumen ini dimulai dengan deklarasi yang disebut <code><!DOCTYPE html></code> yang memberi tahu komputer bahwa halaman tersebut menggunakan HTML. Kemudian, dokumen dibagi menjadi dua bagian utama: kepala dan badan.

Dokumen HTML yang sangat sederhana terlihat seperti ini:

<kode><!DOCTYPE html>
<html>
<kepala>
<title>Halaman Web Pertama Saya</title>
</head>
<tubuh>
<p>Halo, dunia!</p>
</tubuh>
</html> </kode>

Dalam contoh ini, bagian <head> memberikan judul halaman, dan bagian <body> adalah tempat Anda meletakkan konten yang muncul di layar.

Tag dan Elemen HTML

HTML menggunakan tag untuk menandai berbagai bagian halaman web. Tag adalah kata di dalam tanda kurung siku. Misalnya, <code><p></code> memberi tahu komputer bahwa bagian selanjutnya adalah paragraf. Setelah paragraf selesai, gunakan tag penutup, <code></p></code>, untuk menandakan akhir paragraf.

Sebuah elemen dalam HTML terdiri dari tag pembuka, beberapa konten, dan tag penutup. Contoh:

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

Setiap tag memberi instruksi pada peramban web tentang cara menampilkan konten.

Tag HTML Umum

Ada banyak tag dalam HTML. Beberapa yang paling umum adalah:

<html> - Tag ini memberi tahu komputer bahwa ini adalah dokumen HTML.
<head> - Bagian ini menyimpan informasi tentang halaman yang tidak ditampilkan langsung di layar.
<title> - Tag ini menetapkan judul halaman web dan muncul di tab browser.
<body> - Tag ini berisi konten yang terlihat pada halaman web.
<p> - Tag ini membuat paragraf, yang merupakan blok teks.
<h1> hingga <h6> - Tag ini membuat judul. <h1> adalah judul terbesar, sementara <h6> adalah yang terkecil.
<a> - Tag ini digunakan untuk membuat tautan ke halaman web lain.
<img> - Tag ini digunakan untuk menambahkan gambar ke halaman.

Atribut HTML

Atribut memberikan informasi tambahan tentang elemen HTML. Atribut ditambahkan ke tag pembuka di dalam tanda kurung siku tag. Atribut yang paling umum adalah src dan alt yang digunakan dengan tag gambar.

Misalnya, untuk menambahkan gambar, Anda dapat menulis:

Di sini, src memberi tahu browser di mana berkas gambar berada, dan alt memberikan deskripsi gambar jika tidak dapat ditampilkan.

Bagian Kepala dan Badan

Dokumen HTML dibagi menjadi dua bagian:

Bagian Kepala: Bagian ini berisi informasi seperti judul halaman dan tautan ke lembar gaya. Bagian ini seperti pusat kendali yang menyimpan instruksi untuk halaman tersebut.
Bagian Isi: Bagian ini terlihat di halaman web. Semua teks, gambar, dan tautan yang Anda lihat di halaman ditulis di dalam bagian isi.

Membuat Tautan dalam HTML

Tautan memungkinkan Anda berpindah dari satu halaman ke halaman lainnya. Dalam HTML, tautan dibuat menggunakan tag <a> . Atribut href di dalam tag tersebut memberi tahu peramban tujuan tautan tersebut.

Misalnya:

<code><a href="https://www.example.com">Kunjungi Example.com</a></code>

Ketika Anda mengklik tautan ini, peramban Anda akan membuka situs web example.com .

Menambahkan Gambar ke Halaman Web

Gambar mencerahkan halaman web dan membuatnya lebih menarik. Untuk menambahkan gambar, gunakan tag <img> . Ingat, tag <img> tidak memiliki tag penutup.

Berikut ini cara menambahkan gambar:

Kode ini memberi tahu peramban untuk menampilkan gambar bunga matahari. Atribut src menunjukkan lokasi gambar, dan atribut alt memberikan deskripsi gambar.

Menggunakan Daftar dalam HTML

Daftar mengatur informasi ke dalam format yang rapi. Ada dua jenis utama daftar dalam HTML:

Daftar Berurut: Daftar ini diberi nomor. Daftar ini menggunakan tag <ol> .
Daftar Tak Berurut: Daftar ini menggunakan poin-poin. Tag <ul> juga digunakan.

Berikut adalah contoh daftar yang tidak berurutan:

<kode><ul>
<li>Apel</li>
<li>Pisang</li>
<li>Ceri</li>
</ul></code>

Dan berikut ini adalah contoh daftar berurutan:

<kode><ol>
<li>Pertama</li>
<li>Kedua</li>
<li>Ketiga</li>
</ol></code>

Tabel dalam HTML

Tabel membantu menampilkan informasi dalam baris dan kolom. Tabel berguna saat Anda perlu membandingkan data atau item daftar dalam bentuk kisi.

Berikut adalah contoh sederhana tabel HTML:

<kode><tabel batas="1">
<tr>
<th>Nama</th>
Usia
Bahasa Indonesia:
<tr>
Alice
<td>10</td>
Bahasa Indonesia:
</tabel> </kode>

Dalam tabel ini, <tr> mendefinisikan baris tabel, <th> digunakan untuk tajuk tabel (teks tebal), dan <td> digunakan untuk data tabel (sel).

Bekerja dengan Multimedia: Audio dan Video

HTML juga memungkinkan Anda menambahkan multimedia seperti suara dan video. Dengan tag <audio> , Anda dapat menyertakan berkas suara. Dengan tag <video> , Anda dapat menyematkan pemutar video di halaman web Anda.

Berikut ini adalah contoh kode sematan video:

Kode ini membuat pemutar video dengan tombol untuk memutar, menjeda, atau mengubah volume. Atribut kontrol memberi tahu peramban untuk menampilkan tombol-tombol ini.

HTML dalam Kehidupan Sehari-hari

Setiap situs web di internet dibangun dengan HTML. Bayangkan Anda sedang mengunjungi situs web sekolah, situs permainan seru, atau membaca cerita daring. HTML bekerja di balik layar untuk mengatur teks, gambar, dan konten lainnya agar dapat Anda lihat dengan jelas.

Misalnya, saat Anda melihat gambar karakter kartun favorit Anda secara daring atau mengeklik tautan untuk membaca lebih lanjut tentang topik yang menyenangkan, HTML hadir untuk mewujudkannya.

Contoh Proyek HTML Sederhana

Mari kita lihat proyek sederhana. Bayangkan Anda ingin membuat halaman web kecil tentang hewan favorit Anda, seperti kucing. Anda bisa menyertakan judul, paragraf tentang kucing, gambar, dan bahkan tautan ke situs web berisi fakta-fakta menarik tentang kucing.

Kode HTML Anda mungkin terlihat seperti ini:

<kode><!DOCTYPE html>
<html>
<kepala>
<title>Hewan Kesukaanku</title>
</head>
<tubuh>
<h1>Semua Tentang Kucing</h1>
<p>Kucing itu lucu dan lembut. Mereka suka tidur dan mendengkur. Banyak orang suka memelihara kucing.</p>
<img src="cat.jpg" alt="Kucing yang lucu">
<a href="https://www.catfacts.com">Pelajari lebih lanjut tentang kucing</a>
</tubuh>
</html> </kode>

Proyek ini menggunakan judul, paragraf, gambar, dan tautan. Proyek ini menunjukkan bagaimana HTML digunakan untuk membangun halaman web lengkap dengan banyak bagian.

HTML, CSS, dan JavaScript

Sementara HTML membangun struktur halaman web, ada alat lain yang membuat situs web terlihat dan berperilaku dengan cara yang menyenangkan.

CSS (Cascading Style Sheets) digunakan untuk menambahkan warna, mengubah font, dan menyesuaikan tata letak halaman web. CSS membuat halaman web tampak lebih indah.
JavaScript adalah bahasa pemrograman yang menambahkan interaktivitas ke halaman. JavaScript dapat membuat objek bergerak atau merespons saat Anda mengklik tombol.

Meskipun saat ini kita belajar tentang HTML, mengetahui tentang CSS dan JavaScript membantu kita memahami cara pembuatan situs web.

Tag HTML Lainnya dan Kegunaannya

Saat Anda menjelajahi HTML, Anda akan menemukan banyak tag lainnya. Berikut beberapa tag lainnya yang perlu Anda ketahui:

<div> - Tag ini digunakan untuk membagi halaman menjadi beberapa bagian. Tag ini membantu menjaga konten tetap teratur.
<span> - Tag ini mengelompokkan potongan teks atau elemen kecil lainnya. Mirip dengan <div>, tetapi berfungsi untuk item yang lebih kecil.
<br> - Tag ini menambahkan jeda baris. Seperti menekan tombol Enter pada pengolah kata.
<strong> - Tag ini membuat teks tebal untuk menunjukkan bahwa teks tersebut penting.
<em> - Tag ini membuat teks miring untuk menambahkan penekanan.

Tag ini memberi Anda kontrol lebih besar atas bagaimana konten Anda muncul di halaman web.

Evolusi HTML

HTML telah banyak berubah sejak pertama kali diciptakan. Banyak tag dan fitur baru telah ditambahkan seiring waktu. Setiap versi baru HTML memudahkan pembuatan situs web yang kompleks dan indah. Kini, HTML bekerja sama dengan CSS dan JavaScript untuk membangun situs web modern yang menyenangkan dan tampak memukau.

Evolusi ini berarti bahwa HTML mudah dipelajari dan cukup canggih untuk membuat segala hal mulai dari halaman web sederhana hingga aplikasi web yang kompleks.

Tetap Aman Saat Online

Meskipun belajar HTML menyenangkan, tetaplah penting untuk tetap aman di internet. Saat Anda mengunjungi situs web atau menjelajahi konten online, ingatlah untuk selalu meminta bantuan orang dewasa jika Anda tidak yakin tentang sesuatu. Keselamatan Anda adalah prioritas utama, dan belajar HTML seharusnya selalu menjadi pengalaman yang menyenangkan dan aman.

Ulasan: Istilah-Istilah Penting HTML

Mari kita lihat beberapa istilah penting yang telah Anda pelajari hari ini:

HTML: Hypertext Markup Language, bahasa yang digunakan untuk membuat halaman web.
Tag: Kata dalam tanda kurung siku yang memberi tahu komputer bagian halaman mana yang akan ditampilkan. Misalnya, <code><p></code> menghasilkan paragraf.
Elemen: Satu set lengkap yang mencakup tag pembuka, konten, dan tag penutup.
Atribut: Informasi tambahan yang ditambahkan di dalam tag, seperti <code>src</code> atau <code>alt</code> dalam tag gambar.
Tautan: Dibuat dengan tag <code><a></code> untuk menghubungkan satu halaman ke halaman lainnya.

Aplikasi Dunia Nyata

HTML digunakan dalam banyak konteks kehidupan nyata. Berikut beberapa contohnya:

Situs Web Sekolah: Sekolah menggunakan HTML untuk berbagi jadwal, pekerjaan rumah, dan berita dengan siswa dan orang tua.
Cerita dan Permainan Daring: Situs web dengan cerita atau permainan seru menggunakan HTML untuk menampilkan gambar, teks, dan video.
Situs Web Bisnis: Banyak toko dan perusahaan lokal memiliki situs web yang dibangun dengan HTML untuk menampilkan produk dan layanan mereka.
Pembelajaran Interaktif: Situs pendidikan yang membantu Anda mempelajari hal-hal baru dibuat dengan HTML bersama dengan alat lain seperti CSS dan JavaScript.

Contoh-contoh ini menunjukkan bagaimana HTML merupakan alat yang sangat berguna dalam banyak bagian kehidupan sehari-hari.

Ringkasan Poin-Poin Utama

Hari ini, kita belajar bahwa HTML adalah singkatan dari Hypertext Markup Language . Ini adalah bahasa dasar yang digunakan untuk membuat halaman web. Berikut poin-poin penting yang perlu diingat:

HTML membangun struktur halaman web menggunakan tag.
Struktur dasar meliputi deklarasi tipe dokumen, dan tag html , head , dan body .
Tag hadir berpasangan: tag pembuka dan tag penutup, dengan konten di antaranya.
Atribut seperti src dan alt memberikan informasi tambahan tentang elemen.
Tag umum meliputi <p> untuk paragraf, <a> untuk tautan, <img> untuk gambar, dan tag heading seperti <h1> hingga <h6> .
Daftar dan tabel membantu mengatur informasi pada halaman web.
Halaman web modern menggunakan HTML bersama dengan CSS untuk gaya dan JavaScript untuk interaktivitas.

HTML adalah fondasi setiap situs web yang Anda lihat di internet. Dengan elemen dasar sederhana seperti tag dan atribut, Anda dapat membuat halaman yang menyenangkan dan interaktif. Seiring Anda terus belajar, Anda akan melihat bagaimana HTML membantu menghidupkan halaman web, menjadikan internet tempat yang bermanfaat dan menarik untuk dijelajahi.

hyper text markup language