HTML Bagian 1

BAB 2
HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language) adalah fondasi dari web
modern. Bab ini akan membawa Anda ke dalam dunia HTML,
yang memungkinkan kita untuk membuat struktur konten
yang kuat dan menarik di internet. Dengan HTML, Anda akan
mempelajari bagaimana membangun halaman web dari nol,
menambahkan teks, gambar, tautan, dan berbagai elemen
penting lainnya. Ini adalah langkah pertama dalam perjalanan
Anda untuk menjadi seorang pengembang web, karena tanpa
pemahaman yang kuat tentang HTML, konstruksi web yang
solid akan sulit dicapai. Mari kita mulai dengan pemahaman
yang mendalam tentang bahasa yang menjadi tulang
punggung dari web ini.
A. Pengenalan HTML
HTML, atau Hypertext Markup Language, adalah bahasa

markup yang digunakan untuk membuat struktur dan konten
halaman web. Ini adalah elemen pertama yang Anda butuhkan
untuk memahami dalam pembuatan situs web. Mari kita
bahas beberapa konsep dasar tentang HTML:
1. Markup Language: HTML adalah bahasa markup, yang

berarti Anda menggunakan tag (tanda kurung sudut <
>) untuk memberi tahu browser bagaimana cara
merender (menampilkan) konten. Tag ini memberikan
petunjuk kepada browser tentang bagaimana
mengatur dan menampilkan elemen-elemen pada
halaman web.
2. Struktur Konten: HTML digunakan untuk mengatur
struktur konten pada halaman web Anda. Ini termasuk
judul, paragraf, daftar, gambar, video, dan banyak
elemen lainnya. Dengan HTML, Anda dapat
menentukan apa yang akan ditampilkan dan
bagaimana hal itu akan terlihat.
3. Elemen dan Tag: HTML terdiri dari elemen-elemen
yang diawali dengan tag pembuka <tag> dan diakhiri
dengan tag penutup </tag>. Misalnya, untuk
membuat judul, Anda akan menggunakan tag <h1>
dan </h1>. Setiap elemen memiliki fungsi dan makna
tertentu.
4. Nesting: Anda dapat menyusun elemen-elemen HTML
dengan cara menempatkan elemen dalam elemen
lainnya. Ini disebut penanaman (nesting). Contohnya,
Anda dapat menempatkan sebuah paragraf dalam
sebuah div.
5. Atribut: Selain tag, Anda dapat menambahkan atribut
ke dalam elemen. Atribut memberikan informasi
tambahan tentang elemen. Misalnya, atribut src pada
tag <img> digunakan untuk menunjukkan sumber
gambar.
6. Dokumen HTML: Setiap halaman web biasanya
dimulai dengan tag <html> dan diakhiri dengan tag
</html>. Seluruh isi halaman web Anda ditempatkan
di antara tag ini.
HTML adalah dasar dari setiap halaman web di internet. Tanpa

HTML, halaman web tidak akan memiliki struktur atau konten
yang terlihat. Dalam bab ini, Anda akan mempelajari berbagai
elemen HTML, cara mereka berinteraksi, dan bagaimana Anda
dapat menggunakan HTML untuk membuat tampilan yang
sesuai dengan kebutuhan Anda.
B. Struktur Dasar HTML
Struktur dasar HTML adalah kerangka dasar yang harus ada di

setiap halaman web. Ini memberikan dasar yang konsisten
untuk browser dalam merender konten Anda. Berikut adalah
elemen-elemen utama dari struktur dasar HTML:
1. Tag <html>:
Tag <html> adalah elemen paling luar dan menunjukkan
bahwa ini adalah dokumen HTML. Semua elemen HTML
ditempatkan di dalam tag ini.
Contoh:
2. Tag <head>:
Tag <head> digunakan untuk menyediakan informasi
tentang halaman web, seperti judul dan meta informasi.
Ini bukan bagian yang ditampilkan di halaman web itu
sendiri.
Contoh:
3. Tag <title>:
Tag <title> digunakan untuk menentukan judul halaman
web yang akan ditampilkan di bilah judul peramban.
Contoh:
4. Tag <meta>:
Tag <meta> digunakan untuk menyediakan informasi
tambahan tentang halaman web, seperti pengkodean
karakter atau deskripsi halaman.
Contoh:
5. Tag <body>:
Tag <body> berisi semua konten yang akan ditampilkan di
halaman web. Ini termasuk teks, gambar, tautan, dan
elemen-elemen lainnya yang akan dilihat pengguna.
Contoh:
Dengan struktur dasar HTML ini, Anda memiliki kerangka awal

yang diperlukan untuk setiap halaman web. Isi <head>
memberikan informasi tentang halaman tersebut, sedangkan
konten utama ditempatkan di dalam <body>. Judul halaman
yang ditentukan dalam <title> akan muncul di bilah judul
peramban.
C. Tag dan Elemen Dasar HTML
Di sub bab ini, kita akan menjelajahi tag dan elemen dasar
HTML dengan lebih rinci. Anda akan mempelajari bagaimana
tag HTML berfungsi sebagai "pembungkus" untuk konten
halaman web Anda. Setiap tag memiliki makna tertentu dan
berkontribusi pada struktur dan tampilan halaman. Anda juga
akan melihat bagaimana mengatur teks, gambar, tautan, dan
daftar dalam HTML. Dengan memahami dasar-dasar ini, Anda
akan memiliki kemampuan untuk membuat konten yang lebih
beragam dan menarik di halaman web Anda. Mari kita mulai
dengan menggali lebih dalam ke dalam tag-tag ini dan
bagaimana mereka berinteraksi dalam membangun halaman
web.
1. Tag <h1> hingga <h6> (Heading)
Tag <h1> hingga <h6> adalah elemen-elemen dalam HTML

yang digunakan untuk membuat judul dan subjudul pada
halaman web. Mereka menggambarkan tingkat kepentingan
dan hierarki dari judul-judul ini, di mana <h1> memiliki tingkat
kepentingan tertinggi (judul utama) dan <h6> memiliki tingkat
kepentingan terendah (subjudul terakhir). Mari kita jelaskan
lebih detail:
➢ <h1>: Ini adalah tag untuk judul utama halaman.

Biasanya, hanya satu <h1> digunakan dalam satu
halaman, dan ini adalah judul utama yang akan paling
menonjol di halaman web Anda.
➢ <h2>: Ini adalah tag untuk subjudul utama. Ini biasanya
digunakan untuk bagian-bagian besar pada halaman web
dan memiliki tingkat kepentingan yang lebih rendah
daripada <h1>, tetapi lebih tinggi daripada <h3>.
➢ <h3> hingga <h6>: Ini adalah tag untuk subjudul yang
semakin kecil dan semakin mendalam. <h3> memiliki
tingkat kepentingan yang lebih rendah daripada <h2>,
<h4> memiliki tingkat kepentingan yang lebih rendah
daripada <h3>, dan seterusnya.
Berikut adalah contoh penggunaan tag <h1> hingga <h6>

mulai dari tag <html> sampai penutup </html> dalam suatu
halaman HTML:
Dalam contoh ini, kita mulai dengan tag <html>, lalu ada tag
<head> yang berisi judul halaman, dan tag <body> yang berisi
konten halaman web. Di dalam <body>, kita menggunakan
tag-heading dari <h1> hingga <h6> untuk membuat judul-judul
dengan tingkat kepentingan yang berbeda. Setiap judul diikuti
oleh paragraf teks sebagai contoh konten.
Anda dapat menyimpan kode ini dalam file .html, kemudian

membukanya di peramban web Anda untuk melihat hasilnya.
Hal ini akan menunjukkan bagaimana tingkat kepentingan dari
setiap judul memengaruhi tampilan dan struktur halaman web
Anda.
Gambar 1: Contoh Penggunaan Tag Header di Browser
2. Tag <p> (Paragraf)
Tag <p> adalah elemen HTML yang digunakan untuk

menandai dan memformat teks sebagai paragraf. Ini adalah
salah satu elemen dasar yang paling umum digunakan dalam
HTML untuk menampilkan teks dan konten pada halaman
web.
Penjelasan tentang tag <p>:
➢ <p> adalah singkatan dari "paragraph" (paragraf), dan

digunakan untuk mengelompokkan sejumlah kalimat
atau teks yang memiliki konteks atau ide yang serupa
dalam satu unit paragraf.
➢ Tag <p> adalah elemen inline, yang berarti itu tidak
memulai paragraf baru pada baris yang berbeda, kecuali
ada elemen blok lain di dalamnya.
➢ Biasanya, tag <p> digunakan untuk mengatur teks dalam
satu paragraf. Ini digunakan di antara tag pembuka <p>
dan tag penutup </p>. Semua teks yang ditempatkan di
antara tag-tag ini akan dianggap sebagai satu paragraf.
Berikut adalah contoh penggunaan tag <p> lengkap mulai dari

awal tag <html> sampai penutup </html> dalam suatu
halaman HTML:
Dalam contoh ini, kita memiliki tag <html> sebagai elemen

paling luar, kemudian ada tag <head> yang berisi judul
halaman, dan tag <body> yang berisi konten halaman web.
Di dalam <body>, kita menggunakan tag <h1> untuk judul
utama, <h2> untuk subjudul, dan <h3> untuk subjudul lainnya.
Kami juga menggunakan tag <p> untuk menandai paragraf-
paragraf dalam teks.
Anda dapat menyimpan kode ini dalam file .html dan

membukanya di peramban web Anda untuk melihat tampilan
hasilnya. Ini akan menunjukkan bagaimana tag <p> digunakan
untuk mengorganisir teks menjadi paragraf-paragraf dalam
halaman web Anda.
Gambar 2: Contoh Penggunaan Tag <p> (Paragraf)
3. Tag <a> (Anchor)
Tag <a> (Anchor) adalah salah satu elemen HTML yang paling
penting dan sering digunakan. Ini digunakan untuk membuat
tautan (link) ke halaman web lain, dokumen, atau sumber daya
online. Tautan ini dapat mengarahkan pengguna ke halaman
lain di situs web yang sama atau ke situs web eksternal.
Penjelasan tentang tag <a> (Anchor):
➢ Tag <a> digunakan untuk mengelilingi teks atau elemen

lain yang akan menjadi tautan. Ini membungkus konten
yang akan diklik oleh pengguna untuk pergi ke tujuan
yang ditentukan.
➢ Atribut paling penting dalam tag <a> adalah href
(Hypertext Reference), yang menentukan URL (Uniform
Resource Locator) atau alamat web tujuan dari tautan
tersebut. Ini bisa berupa alamat situs web lengkap, alamat
email, atau alamat sumber daya lain di internet.
➢ Tag <a> dapat digunakan untuk membuat tautan ke
halaman web lain di situs Anda sendiri atau ke situs web
eksternal. Tautan internal (ke halaman yang sama)
umumnya hanya memerlukan nama file atau path,
sementara tautan eksternal memerlukan URL lengkap.
➢ Selain atribut href, Anda juga dapat menggunakan atribut
lain seperti target untuk mengontrol bagaimana tautan
tersebut akan dibuka. Misalnya, target="_blank" akan
membuka tautan di jendela atau tab baru.
Contoh :
Dalam contoh di atas, kita memiliki tiga tautan yang berbeda:

a. Tautan pertama mengarahkan pengguna ke situs web
eksternal "https://www.contoh.com".
b. Tautan kedua adalah tautan internal yang mengarahkan
ke halaman web lain di situs yang sama (dengan
menggunakan nama file "halaman.html").
c. Tautan ketiga adalah tautan yang menggunakan protokol
"mailto:" dan akan membuka aplikasi email pengguna
untuk mengirim email ke alamat yang ditentukan.
Tag <a> sangat penting untuk membuat navigasi dan

menghubungkan halaman-halaman di situs web Anda, serta
memberikan cara kepada pengguna untuk berinteraksi dengan
konten Anda.
Berikut ini adalah contoh studi kasus penggunaan tag <a>

(Anchor) mulai dari tag <html>.
Dalam contoh ini:
➢ Tag <html> mengawali dokumen HTML.

➢ Tag <head> berisi informasi tentang halaman, seperti
judul yang akan muncul di bilah judul peramban.
➢ Tag <body> berisi konten halaman web.
Kemudian, kita memiliki beberapa penggunaan tag <a>:
1. Tautan ke halaman internal:

➢ <a href="beranda.html">Beranda</a> mengarahkan
pengguna ke halaman "beranda.html".
➢ <a href="tentang.html">Tentang Kami</a>
mengarahkan pengguna ke halaman "tentang.html".
➢ <a href="produk.html">Produk</a> mengarahkan
pengguna ke halaman "produk.html".
➢ <a href="kontak.html">Kontak</a> mengarahkan
pengguna ke halaman "kontak.html".
2. Tautan dengan atribut mailto:
➢ <a href="mailto:info@contoh.com">mengirim email
kepada kami</a> akan membuka aplikasi email
pengguna dengan alamat "info@contoh.com" di
kolom tujuan.
Gambar 3: Contoh Penggunaan Tag <a> (anchor)
4. Tag <img> (Image)
Tag <img> (Image) adalah elemen HTML yang digunakan

untuk menampilkan gambar atau grafik pada halaman web.
Gambar adalah komponen penting dalam desain web, dan tag
<img> memungkinkan Anda menyisipkan gambar ke dalam
halaman HTML Anda.
Penjelasan tentang tag <img> (Image):
➢ Tag <img> digunakan untuk menampilkan gambar

pada halaman web. Ini adalah elemen yang bersifat
inline, yang berarti gambar akan ditampilkan di dalam
aliran teks halaman web dan tidak memulai baris baru
secara otomatis.
➢ Atribut yang paling penting dalam tag <img> adalah src
(source), yang menentukan lokasi (URL) dari file
gambar yang akan ditampilkan. Ini bisa berupa URL
relatif atau absolut ke gambar tersebut.
➢ Atribut alt (alternative text) adalah atribut penting
lainnya. Ini berisi deskripsi alternatif untuk gambar.
Deskripsi ini akan muncul jika gambar gagal dimuat
atau ketika pengguna mengarahkan kursor mouse ke
gambar (pada sebagian besar peramban) dan juga
penting untuk aksesibilitas web.
Anda juga dapat menggunakan atribut width dan height untuk

mengatur lebar dan tinggi gambar (dalam piksel). Ini
membantu mengontrol tata letak halaman dan memastikan
tampilan gambar yang sesuai.
Penggunaan atribut alt dan memastikan penggunaan yang

bijak dari atribut width dan height penting untuk membuat
halaman web yang dapat diakses dan responsif.
Contoh penggunaan tag <img>:
Dalam contoh di atas, kita menggunakan tag <img> untuk

menampilkan gambar dengan sumber (src) "gambar.jpg". Kita
juga memberikan deskripsi alternatif (alt) untuk gambar
tersebut, serta mengatur lebar dan tinggi gambar dengan
atribut width dan height.
Penggunaan tag <img> adalah cara yang efektif untuk

memasukkan elemen visual, seperti ilustrasi, foto, atau grafik,
ke dalam halaman web Anda. Gambar yang baik dan
penggunaan yang tepat dari deskripsi alternatif akan
meningkatkan pengalaman pengguna dan dapat membantu
dalam optimasi mesin pencari.
Berikut adalah contoh studi kasus penggunaan tag <img>

(Image) mulai dari tag <html> beserta penjelasannya.
Penjelasan:
➢ Tag <html> mengawali dokumen HTML.

➢ Tag <head> berisi informasi tentang halaman, seperti
judul yang akan muncul di bilah judul peramban.
➢ Tag <body> berisi konten halaman web.
Kemudian, kita menggunakan beberapa tag <img>:
1. Gambar Kucing:
➢ <img src="kucing.jpg" alt="Gambar kucing yang
menggemaskan" width="300" height="200">
➢ src menunjukkan sumber gambar, yaitu "kucing.jpg".
➢ alt adalah deskripsi alternatif yang akan muncul jika
gambar tidak dapat dimuat atau jika pengguna
mengarahkan kursor mouse ke gambar tersebut.
➢ width dan height mengatur dimensi gambar dalam
piksel.
2. Gambar Anjing:
➢ <img src="anjing.jpg" alt="Gambar anjing yang lucu"
width="350" height="250">
➢ Ini adalah tautan ke gambar anjing yang berbeda
dengan deskripsi alternatif dan ukuran yang berbeda.
Di akhir halaman, ada tautan ke "Galeri Lengkap Kami" dengan

menggunakan tag <a> untuk mengarahkan pengguna ke
halaman galeri gambar.
Dengan menggunakan tag <img>, Anda dapat dengan mudah

menyisipkan gambar ke dalam halaman web Anda untuk
meningkatkan pengalaman pengguna dan membuat konten
Anda lebih menarik. Penggunaan deskripsi alternatif juga
penting untuk aksesibilitas web, sehingga pengguna dengan
gangguan penglihatan dapat memahami konten gambar.
Gambar 4: Contoh Penggunaan Tag <img> (image)
5. Tag Order List (<ol>, <ul>, dan <li>)
Tag <ol> (Ordered List), <ul> (Unordered List), dan <li> (List
Item) adalah elemen HTML yang digunakan untuk membuat
daftar, baik dalam urutan terurut maupun tidak terurut. Mari
kita jelaskan masing-masing:
a. . Tag <ol> (Ordered List):
<ol> digunakan untuk membuat daftar yang memiliki urutan

atau nomor. Ini adalah daftar yang biasa kita sebut sebagai
"daftar bernomor".
Setiap item dalam daftar dikelompokkan dalam tag <li>.
Dalam tag <ol>, Anda juga dapat menggunakan atribut type

untuk mengatur jenis penomoran, seperti angka (default),
huruf, atau simbol lainnya.
Contoh penggunaan <ol>:
b. Tag <ul> (Unordered List):

➢ <ul> digunakan untuk membuat daftar yang tidak
memiliki urutan atau nomor. Ini adalah daftar yang
biasa kita sebut sebagai "daftar tidak bernomor"
➢ Setiap item dalam daftar dikelompokkan dalam tag
<li>.
Contoh penggunaan <ul>:

3. Tag <li> (List Item):
<li> digunakan untuk menentukan setiap item dalam daftar,

baik itu dalam daftar terurut (<ol>) atau daftar tidak terurut
(<ul>).
Tag <li> bersifat blok, yang berarti setiap item daftar dimulai
pada baris baru.
Contoh penggunaan <li> dalam <ol> dan <ul>:
Dalam contoh-contoh di atas, kita menggunakan tag <ol>

untuk membuat daftar bernomor dan tag <ul> untuk membuat
daftar tidak bernomor. Setiap item daftar diatur dalam tag
<li>. Anda dapat menggabungkan tag-tag ini untuk membuat
berbagai jenis daftar pada halaman web Anda sesuai dengan
kebutuhan Anda.
Daftar adalah cara yang baik untuk menyajikan informasi yang
diurutkan atau tidak diurutkan kepada pengguna dan dapat
digunakan dalam berbagai konteks, termasuk tutorial,
instruksi langkah demi langkah, atau daftar fitur produk.
Berikut adalah contoh lengkap penggunaan <ol>, <ul>, dan <li>

dalam suatu halaman HTML:
Penjelasan:
➢ Dalam contoh ini, kami membuat sebuah halaman HTML
yang berisi daftar makanan favorit dengan menggunakan
tag <h1>, <h2>, <ul>, <ol>, dan <li>.
➢ Daftar makanan pagi (unorderded list) diatur dengan
menggunakan tag <ul>. Setiap item makanan pagi
ditampilkan dalam tag <li>.
➢ Daftar makanan siang (ordered list) diatur dengan
menggunakan tag <ol>. Ini adalah daftar bernomor,
sehingga setiap item makanan siang diberi nomor urut
sesuai dengan tata letaknya dalam daftar.
➢ Daftar makanan malam (unordered list) diatur kembali
dengan tag <ul>.
Hasilnya adalah daftar makanan favorit yang memanfaatkan

tag <ol> dan <ul> untuk membuat daftar dengan dan tanpa
nomor urut sesuai dengan jenis makanan dan tipe daftar. Anda
dapat menambahkan lebih banyak item atau mengubah
konten sesuai dengan kebutuhan Anda.
Gambar 5: Contoh Penggunaan Order List (ol,ul,li)

HTML Bagian 1

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML Bagian 1

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB 2

HTML (Hypertext Markup Language)

HTML, atau Hypertext Markup Language, adalah bahasa

1. Markup Language: HTML adalah bahasa markup, yang

HTML adalah dasar dari setiap halaman web di internet. Tanpa

B. Struktur Dasar HTML

Struktur dasar HTML adalah kerangka dasar yang harus ada di

Dengan struktur dasar HTML ini, Anda memiliki kerangka awal

C. Tag dan Elemen Dasar HTML

1. Tag <h1> hingga <h6> (Heading)

Tag <h1> hingga <h6> adalah elemen-elemen dalam HTML

➢ <h1>: Ini adalah tag untuk judul utama halaman.

Berikut adalah contoh penggunaan tag <h1> hingga <h6>

Anda dapat menyimpan kode ini dalam file .html, kemudian

Gambar 1: Contoh Penggunaan Tag Header di Browser

2. Tag <p> (Paragraf)

Tag <p> adalah elemen HTML yang digunakan untuk

➢ <p> adalah singkatan dari "paragraph" (paragraf), dan

Berikut adalah contoh penggunaan tag <p> lengkap mulai dari

Dalam contoh ini, kita memiliki tag <html> sebagai elemen

Anda dapat menyimpan kode ini dalam file .html dan

Gambar 2: Contoh Penggunaan Tag <p> (Paragraf)

3. Tag <a> (Anchor)

➢ Tag <a> digunakan untuk mengelilingi teks atau elemen

Dalam contoh di atas, kita memiliki tiga tautan yang berbeda:

Tag <a> sangat penting untuk membuat navigasi dan

Berikut ini adalah contoh studi kasus penggunaan tag <a>

Dalam contoh ini:

➢ Tag <html> mengawali dokumen HTML.

Kemudian, kita memiliki beberapa penggunaan tag <a>:

1. Tautan ke halaman internal:

Gambar 3: Contoh Penggunaan Tag <a> (anchor)

4. Tag <img> (Image)

Tag <img> (Image) adalah elemen HTML yang digunakan

Penjelasan tentang tag <img> (Image):

➢ Tag <img> digunakan untuk menampilkan gambar

Anda juga dapat menggunakan atribut width dan height untuk

Penggunaan atribut alt dan memastikan penggunaan yang

Dalam contoh di atas, kita menggunakan tag <img> untuk

Penggunaan tag <img> adalah cara yang efektif untuk

Berikut adalah contoh studi kasus penggunaan tag <img>

➢ Tag <html> mengawali dokumen HTML.

Kemudian, kita menggunakan beberapa tag <img>:

Di akhir halaman, ada tautan ke "Galeri Lengkap Kami" dengan

Dengan menggunakan tag <img>, Anda dapat dengan mudah

Gambar 4: Contoh Penggunaan Tag <img> (image)

5. Tag Order List (<ol>, <ul>, dan <li>)

a. . Tag <ol> (Ordered List):

<ol> digunakan untuk membuat daftar yang memiliki urutan

Setiap item dalam daftar dikelompokkan dalam tag <li>.

Dalam tag <ol>, Anda juga dapat menggunakan atribut type

b. Tag <ul> (Unordered List):

Contoh penggunaan <ul>:

<li> digunakan untuk menentukan setiap item dalam daftar,

Contoh penggunaan <li> dalam <ol> dan <ul>:

Dalam contoh-contoh di atas, kita menggunakan tag <ol>

Berikut adalah contoh lengkap penggunaan <ol>, <ul>, dan <li>

Hasilnya adalah daftar makanan favorit yang memanfaatkan

Gambar 5: Contoh Penggunaan Order List (ol,ul,li)

Anda mungkin juga menyukai