Diajukan Untuk Memenuhi Tugas Mata Kuliah Praktek Pemrograman Web Lanjut
Dosen pengampu : Ardiansyah,M.Kom
Oleh :
Rangga Mahara Miko 2009010007,
Jailani Arsad Tambunan 2009010010,
Renaldi 2009010110,
Indri Haryanti 2009010011,
Esa Mahendra 2009010013
ii
KATA PENGANTAR
Segala puji syukur kehadirat Allah SWT yang telah memberikan rahmat
dan karunia- Nya, sehingga peneliti dapat menyelesaikan tugas makalah mata
kuliah Praktek Pemrograman Web Lanjut tepat pada waktunya. Tidak lupa
shalawat serta salam kita hadiahkan kepada nabi besar Muhammad SAW yang
syafa’at nya kita nantikan kelak.
Peneliti sangat bersyukur karena dapat menyelesaikan makalah yang
menjadi tugas Praktek Pemrograman Web Lanjut dengan judul “Bahasa
Markup HTML”. Peneliti menyadari makalah ini masih memerlukan
penyempurnaan, terutama pada bagian isi. Bagaimanapun peneliti telah
berusaha membuat makalah ini dengan sebaik-baiknya, namun tidak ada
kesempurnaan dalam sebuah karya manusia. Apabila terdapat banyak
kesalahan pada makalah ini, saya memohon maaf. Demikian yang dapat saya
sampaikan, akhir kata semoga makalah ini dapat bermanfaat.
iii
DAFTAR ISI
ABSTRAK ............................................................................................................. ii
KATA PENGANTAR .......................................................................................... iii
BAB I PENDAHULUAN ...................................................................................... 5
1.1 Latar Belakang ............................................................................................ 5
1.2 Rumusan Masalah ....................................................................................... 6
1.3 Tujuan Penulisan ......................................................................................... 6
1.4 Manfaat Penulisan ....................................................................................... 7
BAB II LANDASAN TEORI .................................. Error! Bookmark not defined.
2.1 Pengertian HTML ....................................................................................... 8
2.2 Sejarah HTML ............................................................................................ 9
2.3 Struktur Dasar HTML ............................................................................... 9
2.4 Hyperlink dan Anchor .............................................................................. 13
2.5 Gambar dan Multimedia .......................................................................... 14
2.6 Formulir HTML ........................................................................................ 16
2.7 Tabel HTML .............................................................................................. 17
2.8 List dan Style ............................................................................................. 18
BAB III ................................................................................................................. 21
3.1 Kesimpulan ................................................................................................ 21
DAFTAR PUSTAKA .......................................................................................... 23
iv
BAB I
PENDAHULUAN
5
Anda dapat membuat halaman web yang berkualitas dan meningkatkan
kemampuan Anda dalam pengembangan web.
1. Apa itu bahasa markup HTML dan bagaimana cara kerjanya dalam
pembuatan halaman web?
3. Apa saja atribut dan properti HTML yang umum digunakan dalam
pengembangan halaman web?
6
1.4 Manfaat Penulisan
2. Membahas secara rinci tentang struktur dasar HTML, tag, dan atribut
yang digunakan untuk membuat halaman web.
7
BAB II
PEMBAHASAN
8
2.2 Sejarah HTML
HTML pertama kali diciptakan oleh IBM pada tahun 1980. Saat itu
tercetus ide untuk menempatkan elemen-elemen yang berguna untuk
menandai bagian suatu dokumen seperti judul, alamat dan isi dokumen.
Pada akhirnya elemen-elemen tersebut dibentuk menjadi suatu program
untuk melakukan pemformatan dokumen secara otomatis. Bahasa
melakukan tugas ini disebut sebagai bahasa markup. IBM menamai
program ini sebagai Generalized Markup Language. Pada tahun 1986,
konsep ini disetujui oleh ISO (International Standart Organization) sebagai
standar untuk pembuatan dokumen. Bahasa ini dinamai oleh ISO sebagai
Standard Generalized Markup Language (SGML) HTML sendiri, adalah
bagian dari SGML. Tim Berners-Lee dari CERN mengemukakan sebuah
ide tentang pembuatan skrip bahasa pemrograman dan dokumen yang
dapat diakes oleh semua komputer tanpa melihat jenis platformnya. Sejak
saat itu HTML menjadi lebih populer dibandingkan SGML.(Rinto Ramte
Rerung, 2018).
1. DOCTYPE
9
Gambar 1.1 Struktur Doctype
2. HTML
Elemen HTML adalah elemen yang menandakan bahwa
dokumen yang ditulis adalah dokumen HTML. Elemen ini juga
menentukan bahwa semua konten dalam dokumen harus diletakkan di
antara tag pembuka <html> dan tag penutup </html>. Contoh format
penulisan elemen HTML adalah sebagai berikut:
3. HEAD
Elemen HEAD berisi informasi yang tidak ditampilkan pada
halaman web, namun informasi ini diperlukan oleh browser dan mesin
pencari. Beberapa informasi yang biasanya dituliskan di dalam elemen
HEAD adalah title, meta, link, dan script. Contoh format penulisan
elemen HEAD adalah sebagai berikut:
10
4. Body
Elemen BODY berisi semua konten yang akan ditampilkan pada
halaman web. Semua elemen yang ingin ditampilkan di halaman web
harus diletakkan di antara tag pembuka <body> dan tag penutup
</body>. Contoh format penulisan elemen BODY adalah sebagai
berikut:
5. TAG
Tag adalah elemen dasar dalam HTML yang digunakan untuk
menentukan jenis konten yang ingin ditampilkan di halaman web.
Setiap tag memiliki tag pembuka dan tag penutup, kecuali beberapa
tag tertentu yang hanya memiliki tag pembuka. Beberapa tag yang
sering digunakan dalam dokumen HTML adalah:
TAG PENJELASAN
<HTML> Tag pembuka untuk
menandai awal dokumen
HTML.
Tag pembuka untuk
<HEAD> memasukan informasi
penting, seperti tittle,
meta dan link.
Tag untuk menampilkan
<TITTLE> judul halaman pada
browser.
11
Tag pembuka untuk
<BODY> membuka dokumen
HTML pada browser.
Tag untuk menampilkan
judul, dimana <h1>
<h1>,<h2>,<h3>,<h4>,<h5>.<h6> merupakan judul utama
atau paling penting, dan
<h6> merupakan judul
paling kecil.
Tag ini digunakan untuk
<p> menandai sebuah paragraf
atau teks yang terpisah
dari teks lainnya.
Tag ini digunakan untuk
<a> membuat tautan atau
hyperlink ke halaman
atau dokumen lainnya.
Tag ini digunakan untuk
<img> menampilkal gambar
dalam dokumen.
Tag ini digunakan untuk
<ul> dan <li> membuat daftar dengan
tanda bullet.
Tag ini digunakan untuk
<ol> dan <li> membuat daftar dengan
nomor.
12
2.4 Hyperlink dan Anchor
Hyperlink atau tautan adalah fitur dalam HTML yang
memungkinkan pengguna untuk mengklik teks atau gambar dan kemudian
diarahkan ke halaman web atau dokumen lainnya. Hyperlink biasanya
ditandai dengan warna dan bergaris bawah. Anchor atau tanda titik
referensi pada HTML digunakan untuk membuat hyperlink, dengan
menentukan link target yang dituju oleh hyperlink.
Untuk membuat hyperlink pada HTML, kita menggunakan tag <a>
(anchor). Tag <a> harus memiliki atribut href, yang menunjukkan URL
atau lokasi dokumen yang akan diarahkan oleh hyperlink. Contohnya
seperti berikut:
13
Di sini, tag <a> digunakan untuk membuat hyperlink ke posisi
tertentu di dalam dokumen yang sama. Atribut href berisi tanda pagar (#)
dan nama ID target yang dituju, yaitu "paragraf1". Paragraf pertama
memiliki ID yang sama dengan atribut href dari hyperlink tersebut,
sehingga ketika hyperlink di klik, halaman web akan menggulir ke posisi
paragraf tersebut di dalam dokumen.
1. Gambar (Image) :
Gambar dalam HTML adalah elemen yang digunakan untuk
menampilkan gambar atau ilustrasi pada halaman web. Dalam HTML,
gambar ditandai dengan tag <img>. Tag ini membutuhkan atribut src
yang digunakan untuk menentukan sumber gambar (URL atau lokasi
file gambar), serta atribut opsional lainnya seperti alt untuk
menyediakan teks alternatif jika gambar tidak dapat ditampilkan, dan
atribut width dan height untuk mengatur ukuran gambar.
14
2. Audio dan Video :
HTML juga mendukung elemen untuk memasukkan dan
memutar audio dan video dalam halaman web. Elemen <audio>
digunakan untuk audio, sedangkan <video> digunakan untuk video.
Keduanya memiliki atribut src untuk menentukan sumber file media,
serta atribut-atribut lain seperti controls untuk menampilkan kontrol
pemutaran, autoplay untuk memulai pemutaran secara otomatis, dan
loop untuk mengulang pemutaran.
Contoh penggunaan elemen video dalam HTML :
15
interaktif, menarik, dan memberikan pengalaman visual serta audio
yang lebih kaya bagi pengunjung situs.
16
Dalam contoh di atas, ketika pengguna mengisi nama dan email
pada formulir dan mengklik tombol "Kirim", data tersebut akan
dikirimkan ke proses.php menggunakan metode POST untuk diproses
lebih lanjut oleh server.
Formulir HTML sangat penting dalam pengembangan web karena
memungkinkan pengguna untuk berinteraksi dengan halaman web dan
memberikan data yang diperlukan untuk pemrosesan lebih lanjut.
17
Penjelasan dari contoh di atas:
• Tag <table> digunakan untuk membuat tabel.
• Tag <tr> digunakan untuk membuat baris dalam tabel.
• Tag <th> digunakan untuk membuat sel kepala (header) tabel,
biasanya digunakan pada baris pertama tabel.
• Tag <td> digunakan untuk membuat sel data dalam tabel.
Dalam contoh di atas, tabel memiliki 3 kolom yang didefinisikan
oleh elemen <th>. Setiap baris data didefinisikan oleh elemen <tr>, dan
nilai data untuk setiap kolom ditempatkan dalam elemen <td>. Hasilnya
adalah tabel yang terdiri dari dua baris data.
Anda juga dapat menggunakan atribut lain dalam elemen tabel,
seperti colspan untuk menggabungkan sel kolom, rowspan untuk
menggabungkan sel baris, dan atribut lainnya untuk mengatur atribut
tambahan seperti lebar (width) dan tinggi (height).
Tabel HTML memberikan fleksibilitas dalam menyusun dan
menampilkan data dalam format yang terstruktur. Anda dapat
menyesuaikan penampilan tabel menggunakan CSS untuk memberikan
gaya dan tampilan yang sesuai dengan desain halaman web Anda.
18
2. Daftar Tidak Terurut <ul>: Elemen <ul> digunakan untuk membuat
daftar tidak terurut, di mana setiap item daftar diberi simbol bulatan
atau tanda lainnya. Setiap item daftar didefinisikan dengan elemen
<li>.
Contoh:
19
• list-style-image: Memungkinkan Anda menggunakan gambar
kustom sebagai penanda atau simbol untuk item daftar.
20
BAB III
PENUTUP
3.1 Kesimpulan
Berikut adalah kesimpulan tentang bahasa markup HTML:
HTML (Hypertext Markup Language) adalah bahasa markah yang
digunakan untuk membuat struktur dan tata letak halaman web. Dengan
menggunakan elemen-elemen HTML, pengembang dapat menentukan
bagaimana konten halaman web akan ditampilkan kepada pengguna.
HTML menggunakan pendekatan hierarkis dengan menggunakan
tag dan elemen untuk mengelompokkan dan mengatur konten.Tag terluar
yang umumnya digunakan adalah <html>, yang berisi <head> (untuk
informasi meta dan judul halaman) dan <body> (untuk konten utama
halaman).
HTML menyediakan elemen-elemen dasar seperti judul, paragraf,
daftar, tabel, gambar, tautan, formulir, dan banyak lagi. Dengan
menggunakan kombinasi elemen ini, pengembang dapat membuat halaman
web yang kaya dengan konten multimedia dan navigasi yang efektif.
HTML juga mendukung atribut yang memberikan informasi
tambahan kepada elemen. Atribut ini digunakan untuk mengontrol
perilaku dan tampilan elemen, seperti mengatur warna, ukuran, tautan, dan
banyak lagi.
HTML bekerja sama dengan CSS (Cascading Style Sheets) untuk
mengatur tampilan visual halaman web. CSS memungkinkan pengembang
untuk mengontrol warna, tata letak, ukuran, dan gaya elemen
HTML,sehingga memberikan fleksibilitas dalam desain halaman web.
HTML juga dapat berinteraksi dengan JavaScript, bahasa
pemrograman yang memberikan kemampuan interaktivitas pada halaman
web. Dengan JavaScript, pengembang dapat membuat fungsi-fungsi
dinamis, validasi formulir, efek animasi, dan banyak lagi.
21
HTML memiliki prinsip dasar aksesibilitas yang penting. Hal ini
berarti bahwa halaman web harus dirancang dan dikodekan dengan
memperhatikan aksesibilitas sehingga dapat diakses oleh semua pengguna,
termasuk mereka yang memiliki keterbatasan fisik atau sensorik.
Kesimpulan ini merangkum poin-poin penting tentang bahasa
markup HTML. HTML adalah fondasi dasar dalam pengembangan
halaman web, dan pemahaman yang baik tentang HTML adalah kunci
untuk membangun pengalaman web yang baik dan terjangkau bagi
pengguna.
22
DAFTAR PUSTAKA
DirgaF, M., Masnur, & Merlina. (2021). Aplikasi E-Learning Siswa Smk Berbasis
Web. Jurnal Sintaks Logika, 1(1), 2775–412.
https://jurnal.umpar.ac.id/index.php/sylog
23