01 - MODUL - DESWEB - HTML v.02

Desain Web
Modul 1
HTML
Ovide Decroly Wisnu Ardhi
Modul 1
Desain Web
HTML
A. POKOK BAHASAN
√ Pengertian dan kegunaan HTML
√ Tag, Element, dan Atribut HTML
B. TUJUAN PEMBELAJARAN
√ Mampu menjelaskan pengertian dan kegunaan HTML
√ Mampu menjelaskan dasar-dasar HTML
√ Mampu menggunakan dasar-dasar HTML untuk mendesain web
C. WAKTU
2x(2x60)
D. DASAR TEORI
1. Pengertian dan kegunaan HTML
HTML adalah singkatan dari Hipertext Markup Language. HTML termasuk
kedalam bahasa markup.
Bahasa markup tidak sama dengan bahasa pemrograman. Bahasa markup
adalah bahasa yang didesain untuk mendefinisikan elemen didalam dokumen.
Selain itu juga untuk membuat struktur, mengidentifikasi data dan menyajikan
data. Sedangkan bahasa pemrograman adalah bahasa yang menyediakan
seperangkat aturan, sintaks, dan perintah untuk menulis program komputer
dengan mengimplementasikan algoritma.
Perbedaan utama antara bahasa markup dan bahasa pemrograman adalah
bahwa bahasa markup mendefinisikan seperangkat aturan untuk
menyandikan dokumen dalam format yang dapat dibaca manusia dan dapat
dibaca mesin, sementara bahasa pemrograman menyediakan sekumpulan
perintah dan sintaks yang dapat digunakan untuk menulis program komputer
yang dimengerti oleh komputer.
Pemrograman lebih kepada bagaimana sesuatu bisa berjalan seperti halnya if
else than dan lain sebagainya. Sedangkan bahasa markup adalah bagaimana
struktur dan tampilan sebuah teks, gambar seperti halnya menampilkan teks
terbal, teks miring dan lain sebagainya.
Modul 1
Desain Web
HTML, XML, dan XHTML adalah beberapa contoh untuk bahasa markup.
Sedangkan C, C ++, Java, Python, dan Assembly adalah beberapa contoh
untuk bahasa pemrograman.
Struktur halaman HTML dapat dilihat pada Gambar 1.
Gambar 1. Struktur Halaman HTML
Berikut adalah contoh kode sederhana HTML.
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Contoh Heading 1</h1>
<p>Contoh paragraf.</p>
</body>
</html>
Penjelasan:
√ Deklarasi <! DOCTYPE html> mendefinisikan dokumen ini sebagai HTML5
√ Elemen <html> adalah elemen root dari halaman HTML
√ Elemen <head> berisi informasi meta tentang dokumen
√ Elemen <title> menentukan judul untuk dokumen
√ Elemen <body> berisi konten halaman yang terlihat
√ Elemen <h1> mendefinisikan heading besar
√ Elemen <p> mendefinisikan paragraf
Modul 1
Desain Web
2. Tag, Element, dan Atribut HTML
Penting bagi desainer web untuk mengenal istilah-istilah dasar dalam
mendesain web seperti Tag, Element, dan Atribut. Ketiga istilah tersebut wajib
diketahui sebalum melangkah lebih jauh untuk belajar desain web.
2.1. Tag HTML

Tag HTML secara sederhana bisa dipahami sebagai sebuah tanda yang akan
dikenali oleh web browser untuk apa teks HTML tersebut ditulis. Tag ditandai
dengan adanya <> sebagai pembuka dan </> sebagai penutup. Penjelasan
tag HTML dapat dilihat pada Gambar 2.
Gambar 2. Tag HTML

Format:
<namatag>isi dari konten...</namatag>
Sebagai contoh untuk penulisan heading maka dapat dituliskan sebagai

berikut:
<h1>contoh heading 1</h1>
Beberapa tag yang biasa digunakan dalam HTML diantaranya dapat dilihat
pada Tabel 1.
Tabel 1. Contoh tag HTML

Tag Deskripsi dan Contoh Penulisan
<h> <h1>Ini heading 1</h1>
<h2>Ini is heading 2</h2>
<h3>Ini is heading 3</h3>
<p> <p>Ini paragraf 1.</p>
<p>Ini paragraf 2.</p>
<ins> <ins>format teks inserted</ins>
<em> <m>format teks emphasized</em>
Modul 1
Desain Web
2.2. Element HTML
Elemen dapat dikatakan sebagai sebuah isi dari dokumen HTML yang diawali
dengan tag pembuka <> dan diakhiri dengan tag penutup </>. Penjelasan
elemen HTML dapat dilihat pada Gambar 3.
2.3. Atribut HTML
Atribut bisa diartikan sebagai sebuah informasi yang lebih spesifik dari sebuah
tag. Umumnya atribut memiliki 2 bagian yaitu nama atribut dan nilai atribut.
Beberapa contoh atribut adalah format paragraf, cetakan tulisan, efek warna
dan lain sebagainya.
2.4. Format Text Pada HTML

Seperti halnya bahasa lainnya, HTML memiliki cara penulisan format teks
untuk disajikan dalam sebuah situs web.
Tag Deskripsi dan Contoh Penulisan

<u> <u>format teks underline atau garis bawah</u>
<b> <b>format teks bold atau cetak tebal</b>
<i> <i>format teks italic atau cetak miring</i>
<strong> <strong>format teks strong atau mirip bold</strong>
<mark> <mark>format teks mark</mark>
<del> <del>format teks deleted</del>
<sub> <sub>format teks subscript</sub>
<sup> <sup>format teks superscript</sup>
<ins> <ins>format teks inserted</ins>
<em> <m>format teks emphasized</em>
Modul 1
Desain Web
D. PERCOBAAN
1. Buka text editor (contoh: Visual Studio Code)
2. Kerjakan percobaan
4.1 Percobaan 1 : Hello World

<!DOCTYPE html>
<html>
<head>
<title>Halaman Hello World</title>
</head>
<body>
Hello world
</body>
</html>
4.2. Percobaan 2 : Heading
<!DOCTYPE html>
<html>
<head>
<title>heading</title>
</head>
<body>
</body>
</html>
4.3 Percobaan 3: Heading dan Text
<!DOCTYPE html>
<html>
<head>
<title>Coba heading</title>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<p>Ini isi dari heading 1.</p>
<hr>
<hr>
Modul 1
Desain Web
</body>
</html>
4.4 Percobaan 4 : Format text pada HTML
<!DOCTYPE html>
<html>
<head>
<title>Coba format text</title>
</head>
<body>
<u>Coba format text underline</u></br>
<b>Coba format text tebal</b></br>
<i>Coba format text italic</i></br>
<strong>Coba format text strong</strong></br>
<mark>Coba format text mark</mark></br>
<del>Coba format text del</del></br>
</body>
</html>
4.5 Percobaan 5 : Penulisan paragraf pada HTML
<!DOCTYPE html>
<html>
<head>
<title>Cara membuat paragraf</title>
</head>
<body>
<p>Contoh penulisan paragraf pertama</p>
<p>Contoh penulisan paragraf kedua</p>
<p>Contoh penulisan paragraf ketiga</p>
<p>Contoh penulisan paragraf keempat</p>
</body>
</html>
4.6 Percobaan 6: Penulisan paragraf dengan atributnya
<!DOCTYPE html>
<html>
<head>
<title>Cara membuat paragraf</title>
</head>
<body>
<p align="center">“Dan Rabb-mu telah memerintahkan kepada manusia
janganlah ia beribadah melainkan hanya kepadaNya dan hendaklah berbuat
baik kepada kedua orang tua dengan sebaik-baiknya. Dan jika salah satu
Modul 1
Desain Web
dari keduanya atau kedua-duanya telah berusia lanjut disisimu maka
janganlah katakan kepada keduanya ‘ah’ dan janganlah kamu membentak
keduanya” (Al-Isra:23)</p>
<p align="left">“Dan katakanlah kepada keduanya perkataan yang mulia

dan rendahkanlah dirimu terhadap keduanya dengan penuh kasih sayang.
Dan katakanlah, “Wahai Rabb-ku sayangilah keduanya sebagaimana
keduanya menyayangiku di waktu kecil” (Al-Isra : 24)</p>
<p align="justify">“Dan Kami perintahkan kepada manusia agar berbuat

baik kepada orang tuanya, ibunya telah mengandungnya dalam keadaan
lemah yang bertambah lemah dan menyapihnya dalam dua tahun,
bersyukurlah kalian kepada-Ku dan kepada kedua orang tuamu. Hanya
kepada-Ku lah kalian kembali” (Luqman : 14)</p>
<p align="right">“Dan jika keduanya memaksamu mempersekutukan sesuatu

dengan Aku yang tidak ada pengetahuanmu tentang Aku maka janganlah kamu
mengikuti keduanya dan pergaulilah keduanya di dunia dengan cara yang
baik dan ikuti jalan orang-orang yang kembali kepada-Ku kemudian hanya
kepada-Ku lah kembalimu maka Aku kabarkan kepadamu apa yang kamu
kerjakan” (Luqman : 15)</p>
</body>
</html>
4.7 Percobaan 7: Style
<!DOCTYPE html>
<html>
<body>
<p>Saya adalah ukuran normal</p>
<p style="color:red;">Saya adalah merah</p>
<p style="color:blue;">Saya adalah biru</p>
<p style="color:green;">Saya adalah hijau</p>
<p style="color:yellow;">Saya adalah kuning</p>
<p style="color:violet;">Saya adalah violet</p>
<p style="font-size:50px;">Saya adalah ukuran besar</p>
</body>
</html>
4.8 Percobaan 8: Kombinasi Style, paragraf
<!DOCTYPE html>
<html>
<body style="background-color:darkblue;">
<h1 align="center"; style="color:gray;">Berbakti kepada kedua orang

tua</h1>
Modul 1
Desain Web
<p align="center"; style="color:white;">“Dan Rabb-mu telah
memerintahkan kepada manusia janganlah ia beribadah melainkan hanya
kepadaNya dan hendaklah berbuat baik kepada kedua orang tua dengan
sebaik-baiknya. Dan jika salah satu dari keduanya atau kedua-duanya
telah berusia lanjut disisimu maka janganlah katakan kepada keduanya
‘ah’ dan janganlah kamu membentak keduanya” (Al-
Isra:23)</pstyle="color:red;">
</body>
</html>
4.9 Percobaan 9: Kombinasi Style, paragraf, dan font
<!DOCTYPE html>
<html>
<body style="background-color:darkblue;">
<h1 align="center"; style="color:gray;font-family:
cursive;">Berbakti kepada kedua orang tua</h1>
<p align="center"; style="color:white;font-family: cursive;">“Dan
Rabb-mu telah memerintahkan kepada manusia janganlah ia beribadah
melainkan hanya kepadaNya dan hendaklah berbuat baik kepada kedua
orang tua dengan sebaik-baiknya. Dan jika salah satu dari keduanya atau
kedua-duanya telah berusia lanjut disisimu maka janganlah katakan
kepada keduanya ‘ah’ dan janganlah kamu membentak keduanya” (Al-
Isra:23)</pstyle="color:red;">
</body>
</html>
4.10 Percobaan: Quotations
<!DOCTYPE html>
<html>
<body>
<p>Ini adalah kutipan dari website:</p>
<blockquote cite="https://almanhaj.or.id/358-wajibnya-berbakti-
dan-haramnya-durhaka-kepada-kedua-orang-tua.html">
“Dan Rabb-mu telah memerintahkan kepada manusia janganlah ia beribadah
melainkan hanya kepadaNya dan hendaklah berbuat baik kepada kedua
orang tua dengan sebaik-baiknya. Dan jika salah satu dari keduanya atau
kedua-duanya telah berusia lanjut disisimu maka janganlah katakan
kepada keduanya ‘ah’ dan janganlah kamu membentak keduanya” (Al-
Isra:23)
</blockquote>
</body>
</html>
Modul 1
Desain Web
4.11 Percobaan 11: Alamat
<!DOCTYPE html>
<html>
<body>
<p>Alamat:</p>
<address>
Ditulis oleh Ovide DWA<br>
Kunjungi kami:<br>
ovide.id<br>
Purworejo<br>
Indonesia
</address>
</body>
</html>
4.12 Percobaan 12: Komentar
<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>

</body>
</html>
4.13 Percobaan 13: Warna
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Modul 1
Desain Web
4.14 Percobaan 14: Menampilkan gambar
<!DOCTYPE html>
<html>
<body>
<h2>Contoh Menampilkan Gambar</h2>
<img src="berbakti.jpg" alt="berbakti" width="500" height="333">
</body>
</html>
E. LATIHAN
Buatlah 1 halaman (page) situs yang menggabungkan dari percobaan 1 s/d 14
G. LAPORAN
Buatlah laporan resminya
Modul 1
Desain Web

01 - MODUL - DESWEB - HTML v.02

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

01 - MODUL - DESWEB - HTML v.02

Diunggah oleh

Hak Cipta:

Format Tersedia

Desain Web

Struktur halaman HTML dapat dilihat pada Gambar 1.

Gambar 1. Struktur Halaman HTML

Berikut adalah contoh kode sederhana HTML.

2.1. Tag HTML

Gambar 2. Tag HTML

Sebagai contoh untuk penulisan heading maka dapat dituliskan sebagai

<h1>contoh heading 1</h1>

Tabel 1. Contoh tag HTML

2.3. Atribut HTML

2.4. Format Text Pada HTML

Tag Deskripsi dan Contoh Penulisan

4.1 Percobaan 1 : Hello World

4.2. Percobaan 2 : Heading

4.3 Percobaan 3: Heading dan Text

4.4 Percobaan 4 : Format text pada HTML

4.5 Percobaan 5 : Penulisan paragraf pada HTML

4.6 Percobaan 6: Penulisan paragraf dengan atributnya

<p align="left">“Dan katakanlah kepada keduanya perkataan yang mulia

<p align="justify">“Dan Kami perintahkan kepada manusia agar berbuat

<p align="right">“Dan jika keduanya memaksamu mempersekutukan sesuatu

4.7 Percobaan 7: Style

4.8 Percobaan 8: Kombinasi Style, paragraf

<h1 align="center"; style="color:gray;">Berbakti kepada kedua orang

4.9 Percobaan 9: Kombinasi Style, paragraf, dan font

4.10 Percobaan: Quotations

4.12 Percobaan 12: Komentar

4.13 Percobaan 13: Warna

Anda mungkin juga menyukai