Scribd
Unggah
7 tayangan6 halaman

Modul 2 - HTML (Bagian 1)

HTML (HyperText Markup Language) adalah bahasa markup standar untuk membuat dan menyusun halaman web, yang menggunakan tag untuk menandai konten seperti teks dan gambar. Sejak pengembangannya oleh Tim Berners-Lee pada tahun 1991, HTML telah mengalami beberapa versi, dengan HTML5 sebagai versi terbaru yang mendukung multimedia dan aplikasi web interaktif. Struktur dasar HTML terdiri dari elemen-elemen seperti <html>, <head>, dan <body>, serta atribut yang memberikan informasi tambahan pada elemen tersebut.

Diunggah oleh

sonianto
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
7 tayangan6 halaman

Modul 2 - HTML (Bagian 1)

HTML (HyperText Markup Language) adalah bahasa markup standar untuk membuat dan menyusun halaman web, yang menggunakan tag untuk menandai konten seperti teks dan gambar. Sejak pengembangannya oleh Tim Berners-Lee pada tahun 1991, HTML telah mengalami beberapa versi, dengan HTML5 sebagai versi terbaru yang mendukung multimedia dan aplikasi web interaktif. Struktur dasar HTML terdiri dari elemen-elemen seperti <html>, <head>, dan <body>, serta atribut yang memberikan informasi tambahan pada elemen tersebut.

Diunggah oleh

sonianto
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 6

MODUL 2

HYPER TEXT MARKUP LANGUAGE (HTML)


(Bagian 1)

I. APA ITU HTML?


HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk
membuat dan menyusun halaman web. HTML digunakan untuk menentukan struktur dan konten
dari halaman web, seperti teks, gambar, video, tabel, dan elemen-elemen lainnya. HTML
menggunakan elemen-elemen yang disebut tag untuk menandai berbagai bagian dari konten,
seperti judul, paragraf, dan tautan. HTML tidak bersifat pemrograman, melainkan lebih kepada
struktur dan penyajian konten di halaman web.
HTML pertama kali dikembangkan pada tahun 1991 oleh seorang ilmuwan komputer asal Inggris,
Tim Berners-Lee, yang juga merupakan penemu World Wide Web (www). Pada awalnya, HTML
hanya digunakan untuk menampilkan teks sederhana dan menyediakan tautan (hyperlinks) antar
halaman. Versi pertama HTML ini sangat sederhana, dengan hanya beberapa tag dasar seperti
<h1> (untuk judul), <p> (untuk paragraf), dan <a> (untuk tautan).
Seiring berjalannya waktu, HTML terus berkembang. Versi HTML 2.0 dirilis pada tahun 1995,
memberikan fitur tambahan seperti tabel dan formulir. Versi selanjutnya, HTML 3.2 yang dirilis
pada tahun 1997, memperkenalkan kemampuan untuk membuat halaman web yang lebih
interaktif dengan tambahan elemen seperti tabel yang lebih kompleks dan elemen multimedia.
HTML 4.01, yang dirilis pada tahun 1999, merupakan versi stabil dan paling banyak digunakan
hingga saat ini, meskipun HTML5 kemudian diperkenalkan pada tahun 2014 dengan sejumlah
pembaruan penting.
HTML5, yang merupakan versi terbaru, memperkenalkan elemen-elemen baru untuk
mendukung multimedia dan aplikasi web yang lebih interaktif, seperti <video>, <audio>, dan
<canvas>. HTML5 juga lebih mendukung pengembangan aplikasi web responsif dengan fitur-
fitur seperti elemen formulir yang lebih baik dan peningkatan pada pengelolaan penyimpanan
lokal.

II. STRUKTUR DASAR HTML


HTML memiliki struktur yang terdiri dari elemen-elemen dasar yang mengatur bagaimana konten
halaman web disusun dan ditampilkan di browser. Struktur dasar HTML biasanya dimulai dengan
deklarasi tipe dokumen (DOCTYPE), kemudian diikuti dengan elemen <html>, yang membungkus
seluruh konten halaman.
Berikut ini adalah struktur dasar 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>Ini adalah judul utama</h1>
<p>Ini adalah paragraf pertama halaman web.</p>
<a href="https://www.example.com">Tautan ke situs lain</a>
</body>
</html>

Penjelasan dari elemen-elemen di atas:


1. <!DOCTYPE html> merupakan deklarasi tipe dokumen yang memberi tahu browser bahwa
dokumen ini adalah dokumen HTML5. Ini harus berada di bagian paling atas dari file HTML.
2. <html lang="id">. Elemen <html> adalah elemen root yang membungkus seluruh halaman
web. Atribut lang="id" menunjukkan bahwa halaman ini menggunakan bahasa Indonesia.
3. <head>. Bagian ini berisi metadata tentang halaman web, seperti pengaturan karakter set
(menggunakan <meta charset="UTF-8">), pengaturan tampilan responsif (menggunakan
<meta name="viewport">), dan judul halaman (di dalam <title>). Bagian ini tidak ditampilkan
secara langsung di halaman web.
4. <body>. Ini adalah bagian utama dari halaman yang berisi konten yang akan ditampilkan
kepada pengunjung halaman. Di dalam elemen <body>, Anda bisa menambahkan berbagai
elemen seperti heading, paragraf, tautan, gambar, dan lainnya.
5. <h1>. Elemen ini digunakan untuk menampilkan judul utama di halaman. Angka 1
menunjukkan tingkat judul yang paling tinggi (h1 adalah yang paling besar).
6. <p>. Elemen ini digunakan untuk menampilkan paragraf teks.
7. <a>. Elemen ini digunakan untuk membuat tautan atau link. Atribut href menentukan alamat
tujuan yang akan dibuka saat tautan diklik.

Cara Menampilkan HTML


Untuk menampilkan halaman HTML di browser, Anda cukup mengikuti langkah-langkah berikut:
1. Buat File HTML
- Gunakan editor teks (seperti Notepad di Windows, atau editor kode seperti Visual Studio
Code, Sublime Text, atau Atom).
- Ketikkan kode HTML di atas ke dalam editor.
- Simpan file tersebut dengan ekstensi .html, misalnya index.html.
2. Buka File HTML di Browser
- Setelah file disimpan, buka browser favorit Anda (seperti Google Chrome, Firefox, atau
Edge).
- Klik dua kali pada file HTML yang telah Anda simpan, atau buka file tersebut melalui menu
"Open File" di browser.
- Browser akan menampilkan halaman sesuai dengan kode HTML yang telah Anda buat.

III. ELEMEN-ELEMEN HTML


1. Pengertian Elemen pada HTML
Elemen HTML adalah komponen dasar yang digunakan untuk membangun halaman web.
Setiap elemen HTML terdiri dari tag pembuka, konten, dan tag penutup (kecuali untuk elemen
yang bersifat self-closing). Elemen-elemen ini memungkinkan Anda untuk menentukan
struktur dan isi halaman web, seperti teks, gambar, tautan, dan berbagai konten lainnya.
Secara umum, elemen HTML terdiri dari dua bagian utama:
- Tag Pembuka (Menandai awal dari elemen)
- Tag Penutup (Menandai akhir dari elemen)
Salah satu contoh elemen html sebagai berikut :

Elemen html dapat diklasifikasikan kedalam dua jenis, yakni elemen dengan tag pembuka
dan tag penutup, kemudian elemen tanpa tag penutuh.
Elemen dengan tag pembuka dan penutup merupakan elemen yang memerlukan tag
pembuka dan tag penutup, dan mereka dapat memiliki konten di antara keduanya. Misalnya :
Kemudian terdapat pulan elemen self-closing, artinya elemen yang tidak memerlukan tag
penutup. Misalnya seperti tag <br>, <hr>, <img>.

2. Beberapa Contoh Elemen HTML Umum


a. Heading <h1>. Tag ini digunakan untuk membuat judul atau sub-judul. Heading terdiri
dari 6 jenis sesuai dengan ukuran hurufnya, mulai dari <h1> sampai dengan <h6>

b. Paragraph <p>. Tag ini digunakan untuk membuat paragraf.

c. Link <a>. Digunakan untuk membuat hyperlink.

d. Image <img>. Tag ini digunakan untuk menampilkan gambar.

e. List <ul>. Tag ini digunakan untuk membuat list <li> pada html.

IV. ATRIBUT HTML


Atribut dalam HTML adalah informasi tambahan yang diberikan kepada tag HTML untuk
mengubah perilaku atau memberikan karakteristik tertentu pada elemen tersebut. Atribut
dituliskan di dalam tag pembuka, setelah nama elemen, dan biasanya terdiri dari pasangan nama
dan nilai. Atribut memberikan informasi ekstra yang memungkinkan elemen HTML untuk
berfungsi dengan cara yang lebih spesifik.
Atribut tidak terlihat langsung di halaman web, tetapi mempengaruhi cara elemen tersebut
ditampilkan atau berfungsi. Misalnya, dalam elemen <img>, atribut src menentukan lokasi
gambar yang akan ditampilkan, sementara atribut alt memberikan deskripsi gambar.
Posisi atribut dalam sebuah elemen html dapat dilihat sebagai berikut :
- atribut adalah nama dari atribut yang ingin ditambahkan.
- nilai adalah nilai atau informasi yang diberikan kepada atribut tersebut.
- konten adalah isi dari elemen tersebut (jika ada).
Contohnya sebagai berikut :

- href="https://www.example.com" adalah atribut yang menunjukkan URL yang akan dituju


ketika tautan diklik.
- target="_blank" adalah atribut yang membuat tautan terbuka di tab baru ketika diklik.

PENTING!!!
✓ Semua elemen HTML dapat memiliki atribut
✓ Atribut menyediakan informasi tambahan tentang elemen
✓ Atribut selalu ditentukan di tag awal
✓ Atribut biasanya datang dalam pasangan nama/nilai
seperti: nama="nilai"

Terdapat beberapa klasifikasi atribut dilihat dari cara menempatkan dan peruntukannya :
1. Atribut Global
Atribut HTML global adalah atribut yang dapat digunakan pada hampir semua elemen HTML,
tidak terbatas pada satu jenis elemen tertentu. Atribut-atribut ini memiliki fungsinya sendiri
yang berlaku secara umum untuk berbagai elemen HTML, dan mereka sering digunakan
untuk memberikan karakteristik tambahan atau untuk mengatur fungsi tertentu yang tidak
tergantung pada jenis elemen.
Atribut global sering kali digunakan untuk pengaturan seperti identifikasi elemen (misalnya
menggunakan id atau class), pengaturan gaya (misalnya dengan style), atau untuk
penanganan acara (misalnya dengan onclick).
Contoh penggunaan atribut global :
Atribut id digunakan untuk memberikan ID unik pada elemen HTML yang bisa digunakan
dalam CSS atau JavaScript.

Atribut style digunakan untuk menambahkan aturan CSS langsung pada elemen HTML.
2. Atribut khusus
Adalah atribut yang hanya dapat digunakan pada elemen-elemen tertentu. Artinya, atribut-
atribut ini hanya berlaku untuk jenis elemen tertentu dan tidak bisa diterapkan ke sembarang
elemen.
Contoh atribut yang tidak global (spesifik untuk elemen tertentu) adalah:
a. Atribut src Hanya digunakan dalam elemen <img>, <script>, <iframe>, dan
elemen lainnya yang memerlukan sumber daya eksternal.

b. Atribut href hanya digunakan dalam elemen <a> untuk mendefinisikan URL tujuan.

c. Atribut action hanya digunakan dalam elemen <form> untuk menentukan URL yang
akan menerima data yang dikirimkan melalui formulir.

d. Atribut type digunakan dalam elemen seperti <button>, <input>, atau <script>
untuk menentukan jenis elemen.

V. DAFTAR PUSTAKA
1. Anwar, M. (2015). Pemrograman Web: Teori dan Praktik HTML, CSS, dan PHP. Jakarta:
Elex Media Komputindo.
2. Hermawan, D. (2018). Dasar-Dasar Pemrograman Web dengan HTML dan PHP.
Yogyakarta: Penerbit Andi.
3. Prihatna, A. (2019). HTML dan PHP untuk Pemula. Jakarta: Penerbit Buku Kita.
4. Sugiarto, R. (2016). Pengantar Pemrograman Web: HTML, CSS, dan JavaScript. Bandung:
Informatika.
5. Nugroho, S. (2017). Dasar-Dasar Pengembangan Website: HTML, CSS, dan JavaScript.
Yogyakarta: Penerbit Andi.

Anda mungkin juga menyukai