HTML-MODUL

UNIVERSITAS BUDI LUHUR
FAKULTAS TEKNOLOGI INFORMASI
MODUL PERKULIAHAN #2
HYPERTEXT MARKUP
LANGUAGE (HTML)
Capaian : Mahasiswa dapat memahami dan

Pembelajaran mampu menggunakan perintah-
perintah dasar HTML
Sub Pokok : 2.1. Pengenalan HTML
Bahasan 2.2. Struktur HTML
2.3. Komentar
2.4. Heading
2.5. Paragraf
2.6. List
2.7. Hyperlink
2.8. Image
Daftar Pustaka : 1. Boehm, A., and Ruvalcaba, Z.
(2015). Murach’s HTML5 and
CSS3, 3rd Edition. Mike Murach &
Associates, Inc.
2. Cameron, D. (2015). HTML5,
JavaScript, and jQuery, 24-Hour
Trainer. John Wiley & Sons, Inc.,
Indianapolis, Indiana.
3. Lemay, L., Coburn, R., and
Kyrnin, J. (2016). Sams Teach
Yourself HTML, CSS & JavaScript
Web Publishing in One Hour a
Day, Seventh Edition. Pearson
Education, Inc.
HYPERTEXT MARKUP LANGUAGE (HTML)
2.1. Pengenalan HTML

HTML (Hypertext Markup Language) merupakan bahasa pemrograman yang
digunakan untuk menentukan konten dan struktur halaman web. Elemen
dalam dokumen HTML ditunjukkan dengan menggunakan tag. Sebagian besar
tag HTML dituliskan seperti berikut:
<namatag>text</namatag>
Nama tag dituliskan dalam kurung sudut (<>). Tag HTML umumnya memiliki
tag pembuka dan tag penutup yang mengapit teks. Tag penutup berisi nama
tag yang diawali dengan garis miring (/). Tidak semua tag HTML memiliki tag
pembuka dan penutup. Beberapa tag pembuka memiliki teks tambahan di
dalamnya yang memberikan informasi tambahan tentang tag, disebut dengan
atribut, dan biasanya didefinisikan mengikuti nama tag dan dipisahkan oleh
spasi. Tag HTML dengan tampilan atribut dituliskan seperti ini:
<namatag atribut="nilai">text</namatag>
Nama tag boleh ditulis dengan huruf kecil, huruf kapital, ataupun kombinasi
antara huruf kecil dan huruf kapital. Dengan kata lain, penulisan:
<HTML>
<html>
<Html>
dianggap sama. Namun umumnya nama tag ditulis dengan huruf kecil saja
atau huruf kapital saja.
Untuk memulai menulis HTML, dibutuhkan teks editor untuk membuat file
HTML dan web browser untuk menampilkannya. Teks editor yang dapat
digunakan diantaranya Notepad++, Sublime Text, atau Visual Studio Code.
Selain teks editor dapat juga menggunakan IDE (Integrated Development
Environment) seperti Adobe Dreamweaver, Microsoft Visual Studio, ataupun
Netbeans.
2.2. Struktur HTML
HTML mendefinisikan tiga tag yang digunakan untuk menentukan struktur
keseluruhan. Tiga tag ini yaitu <html>, <head>, dan <body>, yang membuat
kerangka dasar setiap halaman web dan juga memberikan informasi
sederhana tentang halaman (seperti judul atau pengarangnya) sebelum
memuat semuanya.
Contoh dokumen HTML sederhana:
Baris pertama dalam dokumen HTML adalah DOCTYPE identifier yang

mendefinisikan tipe dokumen yang digunakan yaitu HTML. Baris berikutnya
pada struktur halaman HTML adalah tag <html>. Tag <html> berfungsi
sebagai wadah untuk semua tag yang membentuk halaman. Tag ini berisi
atribut yang disebut lang, yang diberi nilai en. Atribut ini menyatakan bahwa
bahasa dokumen adalah bahasa Inggris. Pasangan tag <html> dan </html>
ini juga menandakan bahwa konten file ditulis dalam bahasa HTML sehingga
browser akan menerjemahkan sebagai dokumen HTML.
Bagian yang terdapat diantara <html> dan </html> umumnya terbagi atas :
1. kepala, ditandai dengan pasangan tag <head> dan </head>
Bagian ini berfungsi untuk memberikan informasi tentang dokumen HTML,
seperti judul dokumen HTML yang ditulis dalam pasangan tag <title> dan
</title>. Elemen judul adalah teks yang akan ditampilkan di title bar
sebuah browser. Bagian kepala tidak pernah mengandung komponen
visual halaman web.
2. badan, ditandai dengan pasangan tag <body> dan </body>

Bagian ini berisi semua elemen visual halaman web yang akan ditampilkan
di browser. Ini termasuk semua teks dan konten lainnya seperti link,
gambar, dan sebagainya.
2.3. Komentar
Komentar adalah bagian dari kode HTML yang diabaikan oleh browser.
Kegunaan komentar dalam kode HTML adalah sebagai keterangan. Sebuah
komentar diawali dengan .
2.4. Heading
Tag heading digunakan untuk menambahkan judul ke bagian halaman. HTML
mendefinisikan enam tingkat judul yang akan mengatur ukuran teks saat
ditampilkan. Tag heading terlihat seperti berikut:
Angka-angka tersebut menunjukkan tingkat judul (h1 hingga h6) dari ukuran
teks terbesar hingga terkecil.
2.5. Paragraf
Jika dokumen HTML berisi teks yang cukup panjang maka sangat diperlukan
untuk membaginya ke dalam beberapa paragraf untuk memudahkan
pengguna saat membacanya.
Pembentukan elemen paragraf menggunakan tag .
Tag penutup boleh dituliskan boleh tidak, akan tetapi sebaiknya
dituliskan untuk mengetahui berakhirnya sebuah paragraf. Setiap paragraf
muncul di baris baru dan terdapat spasi di antara setiap paragraf.
Di dalam tag bisa disertakan atribut ALIGN yang berguna untuk
mengatur peletakkan teks di dalam masing-masing baris. Nilai yang dapat
diisikan pada ALIGN yaitu :
 LEFT, mengatur teks rata kiri terhadap halaman
 RIGHT, mengatur teks rata kanan terhadap halaman
 CENTER, menempatkan teks berada di tengah halaman
 JUSTIFY, mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk
teks yang sangat panjang.
2.6. List
HTML mendukung beberapa format list, yaitu Unordered List (daftar tidak
berurutan) dan Ordered List (daftar berurutan). Unordered List tidak diberi
nomor dan secara default disajikan dengan bullet untuk setiap item. Ordered
List diberi nomor dan berguna untuk menyajikan hal-hal yang berurutan
seperti daftar 10 teratas lagu favorit atau langkah-langkah untuk membuat
kue. Semua tag list memiliki elemen umum berikut:
1. Setiap list memiliki elemen luar untuk masing-masing jenis, misalnya <ul>
dan </ul> untuk daftar tidak berurutan, <ol> dan </ol> untuk daftar
berurutan.
2. Setiap item masing-masing list memiliki tag sendiri yaitu <li>.
2.6.1. Unordered List

Unordered List adalah list yang menggunakan bullet sebagai tanda untuk
setiap item. Masing-masing item dalam daftar memiliki penanda yang sama.
Jenis bullet dapat dikustomisasi menggunakan atribut type dengan nilai
sebagai berikut:
Nilai untuk TYPE Bentuk Bullet
circle ◦
disc •
square ▪
2.6.2. Ordered List
Ordered List ditandai menggunakan tag <ol> dan </ol>, dan setiap item
dalam daftar termasuk dalam tag <li> dan </li>. Ketika browser
menampilkan ordered list, nomor masing-masing elemen ditampilkan secara
berurutan sehingga tidak perlu melakukan penomoran sendiri. Dan jika
sebuah item ditambah atau dihapus, browser akan memberi nomor baru pada
saat halaman ditampilkan.
Gaya penomoran dalam daftar item dapat diubah menggunakan atribut type
dengan nilai sebagai berikut:
Nilai Keterangan
A Huruf kapital (A, B, C, D, dan seterusnya)
a Huruf kecil (a, b, c, d, dan seterusnya)
I Angka romawi dengan huruf kapital (I, II, III, IV, dan seterusnya)
i Angka romawi dengan huruf kecil (i, ii, iii, iv, dan seterusnya)
1 Angka standar, merupakan nilai default (1, 2, 3, 4, dan
seterusnya)
Nomor atau huruf awal yang digunakan untuk memulai daftar dapat
ditentukan dengan menggunakan atribut start. <ol start="4"> misalnya,
akan memulai daftar di nomor 4, sedangkan <ol type="a" start="3">
akan memulai penomoran dengan huruf c. Nilai untuk atribut start harus
selalu berupa angka desimal, terlepas dari gaya penomoran yang digunakan.
2.7. Hyperlink
Kekuatan utama dokumen HTML terletak pada hypertext link atau hyperlink
atau lebih singkat lagi disebut link. Dengan hyperlink, dapat membuka
dokumen HTML lain. Hyperlink ini dapat diletakkan pada teks tertentu ataupun
pada sebuah image. Bila diletakkan pada teks maka teks tersebut (secara
default) akan digaris-bawahi dan warnanya menjadi berbeda. Sintaksis
penulisan :
<A href="url_file_tujuan"> Teks hyperlink </A>
Contoh penggunaan :
<A href="tag_hyperlink.html“>Tag Hyperlink</A>
Bila file HTML tujuan berada pada domain name yang sama tetapi pada
direktori yang tidak sama maka kita bisa menggunakan url relatif, yaitu path
name relatif berdasarkan posisi file saat ini. Misalnya kita akan membuka file
atas.html yang berada 2 tingkat diatasnya maka hyperlink-nya berbentuk
seperti :
<a href="../../atas.html"> Ke atas </a>
Bila file yang akan dikaitkan berada pada domain name yang berbeda dengan
domain name file yang sekarang ini, maka kita harus menggunakan url
lengkap file tujuan tersebut. Misalnya :
<a href="http://www.budiluhur.ac.id">Budi Luhur</a>
Untuk memudahkan pengguna mengirimkan email ke suatu alamat email

tertentu, dapat dilakukan dengan tag hyperlink ini. Yaitu dengan menambah
"mailto" dan alamat email tujuan. Sintaksis penulisannya sebagai berikut :
<a href="mailto:budi@budiluhur.ac.id"> Kirim email </a>
2.8. Image
Untuk menyisipkan gambar dapat memanfaatkan tag <IMG>. Format file
gambar yang bisa ditampilkan bisa bermacam-macam, misalnya jp, jpeg, pcx,
gif, psd, dan sebagainya. Untuk menampilkan animasi file GIF,
penggunaannya sama seperti file gambar biasa. Contoh sintaksis :
<IMG src="url_file" width=“lebar_gbr" height=“tinggi_gbr"
vspace=“" hspace="" alt="alt_teks">
 HEIGHT untuk mengatur tinggi gambar
 WIDTH untuk mengatur lebar gambar
 VSPACE akan memberikan ruang kosong sebanyak nilai yang disebutkan
(dalam satuan piksel) di atas dan bagian bawah gambar
 HSPACE akan memberikan ruang kosong sebanyak nilai yang disebutkan
(dalam satuan piksel) di sebelah kiri dan bagian kanan gambar
 ALT akan menyediakan teks alternatif sebagai pengganti gambar
Contoh penggunaan :
<IMG src=“logo.gif" width="78" height="79" vspace="20"
hspace="20" alt="logo">
2.9. Horizontal Line
Untuk mempercantik halaman, seringkali pembuat dokumen Web
menambahkan garis horisontal. Garis ini sebenarnya dapat dibuat dengan
mudah, yakni dengan menyertakan tag <HR>. Daftar atribut tag <HR> :
Atribut Keterangan
SIZE Menentukan ketebalan garis
WIDTH Menentukan lebar garis
ALIGN Menentukan peletakkan teks dalam baris
NOSHADE Mengatur agar garis tidak disertai bayangan
2.10. Break
Kadangkala diperlukan untuk menulis di baris yang baru dalam sebuah
paragraf yang sama pada halaman web yang dibuat. Untuk itu digunakan tag
break yang berupa .
2.11. Font Style

Salah satu tujuan perancangan halaman web adalah membuat halaman web
yang menarik atau "eye catching". Untuk itu dalam suatu paragraph
diperlukan suatu variasi huruf atau font style.
Berikut ini beberapa font style yang sering digunakan, antara lain :
Tag Style Keterangan
 Huruf Tebal (Bold)
 Huruf Miring (Italic)
 Huruf Garis Bawah (Underline)
2.12. Tag Font

Dalam mengatur layout sebuah halaman web yang berisi teks, pengaturan
besarnya huruf, warna dan ukuran adalah hal yang sangat penting untuk
dilakukan oleh seorang perancang web. Pengaturan ini dapat menggunakan
tag Font dengan sintaksis sebagai berikut :

Ukuran font dapat ditentukan dengan angka 1 sampai 7 dengan nilai default
2. Sedangkan warna dapat diganti dengan warna lain. Contoh penggunaan :

Teks arial biru ukuran 5


Teks arial hijau ukuran 3

2.13. Atribut Warna

Untuk lebih mempercantik tampilan sebuah halaman web, permainan warna
menjadi satu hal penting dalam perancangan halaman web. Penulisan atribut
warna dapat menggunakan nilai heksa desimal (6 digit) ataupun nama
warnanya.
FAKULTAS TEKNOLOGI INFORMASI
UNIVERSITAS BUDI LUHUR
Jl. Raya Ciledug, Petukangan Utara, Pesanggrahan
Jakarta Selatan, 12260
Telp: 021-5853753 Fax : 021-5853752
http://fti.budiluhur.ac.id

HTML-MODUL

Diunggah oleh

Informasi Dokumen

Judul Asli

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-MODUL

Diunggah oleh

Hak Cipta:

Format Tersedia

UNIVERSITAS BUDI LUHUR

FAKULTAS TEKNOLOGI INFORMASI

Capaian : Mahasiswa dapat memahami dan

2.1. Pengenalan HTML

Contoh dokumen HTML sederhana:

Baris pertama dalam dokumen HTML adalah DOCTYPE identifier yang

2. badan, ditandai dengan pasangan tag <body> dan </body>

2.6.1. Unordered List

Untuk memudahkan pengguna mengirimkan email ke suatu alamat email

2.11. Font Style

2.12. Tag Font

2.13. Atribut Warna

Anda mungkin juga menyukai