Desain Web

(1)

Modul 1

HTML

Ovide Decroly Wisnu Ardhi

(2)

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.

(3)

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.

<!DOCTYPEhtml>

<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

(4)

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>

(5)

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>

(6)

D. PERCOBAAN

1. Buka text editor (contoh: Visual Studio Code) 2. Kerjakan percobaan

4.1 Percobaan 1 : Hello World

<!DOCTYPEhtml>

<html>

<head>

<title>Halaman Hello World</title>

</head>

<body>

Hello world

</body>

</html>

4.2. Percobaan 2 : Heading

<!DOCTYPEhtml>

<html>

<head>

<title>heading</title>

</head>

<body>

</body>

</html>

4.3 Percobaan 3: Heading dan Text

<!DOCTYPEhtml>

<html>

<head>

<title>Coba heading</title>

</head>

<body>

<h1>Ini adalah heading 1</h1>

<p>Ini isi dari heading 1.</p>

<hr>

(7)

</body>

</html>

4.4 Percobaan 4 : Format text pada HTML

<!DOCTYPEhtml>

<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

<!DOCTYPEhtml>

<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

<!DOCTYPEhtml>

<html>

<head>

<title>Cara membuat paragraf</title>

</head>

<body>

<palign="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

(8)

dari keduanya atau kedua-duanya telah berusia lanjut disisimu maka janganlah katakan kepada keduanya ‘ah’ dan janganlah kamu membentak keduanya” (Al-Isra:23)</p>

<palign="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>

<palign="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>

<palign="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

<!DOCTYPEhtml>

<html>

<body>

<p>Saya adalah ukuran normal</p>

<pstyle="color:red;">Saya adalah merah</p>

<pstyle="color:blue;">Saya adalah biru</p>

<pstyle="color:green;">Saya adalah hijau</p>

<pstyle="color:yellow;">Saya adalah kuning</p>

<pstyle="color:violet;">Saya adalah violet</p>

<pstyle="font-size:50px;">Saya adalah ukuran besar</p>

</body>

</html>

4.8 Percobaan 8: Kombinasi Style, paragraf

<!DOCTYPEhtml>

<html>

<bodystyle="background-color:darkblue;">

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

(9)

<palign="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

<!DOCTYPEhtml>

<html>

<bodystyle="background-color:darkblue;">

<h1align="center"; style="color:gray;font-family:

cursive;">Berbakti kepada kedua orang tua</h1>

<palign="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

<!DOCTYPEhtml>

<html>

<body>

<p>Ini adalah kutipan dari website:</p>

<blockquotecite="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>

(10)

4.11 Percobaan 11: Alamat

<!DOCTYPEhtml>

<html>

<body>

<p>Alamat:</p>

Ditulis oleh Ovide DWA<br>

Kunjungi kami:<br>

ovide.id<br>

Purworejo<br>

Indonesia

</address>

</body>

</html>

4.12 Percobaan 12: Komentar

<!DOCTYPEhtml>

<html>

<body>

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

</body>

</html>

4.13 Percobaan 13: Warna

<!DOCTYPEhtml>

<html>

<body>

<h1style="background-color:Tomato;">Tomato</h1>

<h1style="background-color:Orange;">Orange</h1>

<h1style="background-color:DodgerBlue;">DodgerBlue</h1>

<h1style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>

<h1style="background-color:Gray;">Gray</h1>

<h1style="background-color:SlateBlue;">SlateBlue</h1>

<h1style="background-color:Violet;">Violet</h1>

<h1style="background-color:LightGray;">LightGray</h1>

</body>

</html>

(11)

4.14 Percobaan 14: Menampilkan gambar

<!DOCTYPEhtml>

<html>

<body>

<h2>Contoh Menampilkan Gambar</h2>

<imgsrc="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