Modul 2

Pemrograman Web dan Perangkat Bergerak

( 3.2 Menerapkan format teks pada halaman web)

Tujuan
1. Menjelaskan struktur dasar pemrograman web dengan html
2. Menjelaskan berbagai versi dari html
3. Menjelaskan tata cara penulisan script html dengan berbagai editor
4. Menjelaskan parameter parameter dalam html
5. Menjelaskan tag-tag dalam html
6. Menjelaskan berbagai tag html untuk memformat teks
7. Menerapkan format teks dalam script htm
8. Merancang program tampilan format teks dalam halaman web
9. Membuat program halaman web yang menampilkan teks dengan berbagai format
10. Menguji hasil tampilan halaman web dengan berbagai format teks

Uraian Materi
Pengertian Tag dalam HTML
Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu
web browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai
sebuah paragraf, list, atau sebagai link. Dalam HTML, tanda ini dikenal dengan
istilah tag. Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag
pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag
pembuka dan tag penutup. Objek disini dapat berupa text, gambar, maupun video. Penulisan
tag berada di antara dua kurung siku: “<” dan “>”.

Berikut adalah format dasar penulisan tag HTML:

<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>

Sebagai contoh, perhatikan kode HTML berikut :

<p> Ini adalah sebuah paragraf </p>
 <p> adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf.
 </p> adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari
tanda forward slash (/)

Jika lupa memberikan penutup tag, umumnya browser akan “memaafkan” kesalahan ini dan
tetap menampilkan hasilnya seolah-olah kita menuliskan tag penutup. Walaupun ini sepertinya
memudahkan, tidak jarang malah bikin bingung.

Sebagai contoh lain, jika ingin membuat suatu text dalam sebuah paragraf yang di tulis tebal
atau miring, di dalam HTML dapat ditulis sebagai berikut:
<p>Ini adalah sebuah paragraf. <i>Hanya kumpulan beberapa kalimat</i>.
Paragraf ini terdiri dari <b>3 kalimat</b></p>.

Hasil dari kode HTML diatas, diterjemahkan oleh browser menjadi:

“Ini adalah sebuah paragraf. Tidak lain dari kumpulan beberapa kalimat. Paragraf ini terdiri
dari 3 kalimat.”
 Tag <i> pada kode HTML diatas memberikan perintah kepada browser untuk menampilkan
text secara garis miring (i, singkatan dari italic), dan tag <b>untuk menebalkan tulisan (b,
singkatan dari bold).

Terdapat pengecualian beberapa tag yang tidak berpasangan, seperti <br> untuk break
(pindah baris) atau <hr> untuk horizontal line (garis horizontal). Tag ini dikenal juga dengan
sebutan self closing tag atau void tag, untuk penulisannya bisa ditulis
dengan <br>, maupun <br />.

HTML tidak case-sensitif, dalam artian penulisan <p> dianggap sama dengan <P>. Pada awal
kemunculan HTML, programmer web umumnya menggunakan huruf besar untuk seluruh tag
agar membedakan dengan text yang berupa isi dari web. Namun varian HTML, xHTML
mewajibkan huruf kecil untuk semua tag.
Dalam HTML5, aturan ini kembali tidak diharuskan. Akan tetapi kebiasaan web programmer
saat ini adalah menggunakan huruf kecil untuk seluruh tag.

Pengertian Element dalam HTML

Element adalah isi dari tag yang berada diantara tag pembuka dan tag penutup, termasuk
tag itu sendiri dan atribut yang dimilikinya (jika ada). Sebagai contoh perhatikan kode HTML
berikut:
<p> Ini adalah sebuah paragraf </p>
Pada contoh diatas, “<p>Ini adalah sebuah paragraf</p>” merupakan elementp.
Element tidak hanya berisi text, namun juga bisa tag lain.
Contoh:
1 <p> Ini adalah sebuah <em>paragraf</em> </p>
Dari contoh diatas,<p> Ini adalah sebuah <em>paragraf</em> </p> merupakan elemen p.
Dalam pembahasan atau tutorial tentang HTML, tidak jarang istilah “tag” dan “element” saling
dipertukarkan.

Pengertian Atribut dalam HTML

Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa
instruksi untuk warna dari text, besar huruf dari text, dll. Setiap atribut memiliki
pasangan nama dan nilai (value) yang ditulis dengan name=”value”. Value diapit tanda kutip,
boleh menggunakan tanda kutip satu (‘) atau dua (“).
Contoh kode HTML:
<a href="https://www.duniailkom.com">ini adalah sebuah link</a>

Pada kode HTML diatas, href=”https://www.google.com” adalah atribut. href merupakan nama
dari atribut, dan https://www.google.com adalah value atau nilai dari atribut tersebut.
Tidak semua tag membutuhkan atribut, tapi anda akan sering melihat sebuah tag dengan
atribut, terutama atribut id dan class yang sering digunakan untuk manipulasi halaman web
menggunakan CSS maupun JavaScript.
HTML memiliki banyak atribut yang beberapa diantaranya hanya cocok untuk tag tertentu
saja. Sebagai contoh, atribut “href” diatas hanya digunakan untuk tag <a> saja (dan beberapa tag
lain). Penjelasan tentang tujuan dan pengertian dari atribut seperti href ini akan kita bahas pada
tutorial-tutorial selanjutnya.
Pada tutorial kali ini, kita telah mempelajari salah satu aspek terpenting di dalam HTML,
yakni Pengertian Tag, Elemen, dan Atribut pada HTML. Dalam tutorial HTML dasar
selanjutnya, kita akan mempelajari tentang Struktur Dasar Halaman HTML.
Struktur HTML Dasar

Dalam membuat halaman HTML harus

mempunyai struktur dasar yaitu:
tag DOCTYPE, tag html, tag head, dan
tag body. Meskipun struktur HTML tidak
hanya terdiri dari struktur tersebut. Secara
sederhana HTML terdiri dari header dan
body, yang diawali dengan penulisan
<!DOCTYPE html> kemudian tag pembuka
<html> dan tag akhir </html>.
Berikut contoh penulisan struktur dasar
HTML :

<!DOCTYPE html>
<html>
<head>
<title>Judul Dokumen</title>
</head>
<body>
<p>Ini adalah isi dari dokumen</p>
</body>
</html>

Secara umum penulisan tag terdiri dari tag pembuka dan tag penutup, dari contoh diatas dapat
dijelaskan sebagai berikut :

 DOCTYPE adalah singkatan dari Document Type Declaration yang berfungsi untuk
memberitahu kepada browser bahwa dokumen yang akan diproses adalah HTML.
 Tag <html> adalah tag pembuka dari keseluruhan halaman web. Semua kode HTML tersebut
harus berada didalam tag ini. Dimulai dengan <html> dan ditutup dengan </html>.
 Tag <head> adalah tag yang umumnya berisi tentang definisi halaman, kode CSS, Javascript,
dan kode yang lain. Kode tersebut tidak akan ditampilkan di web browser.
 Tag <title> adalah tag yang digunakan untuk menampilkan judul dari halaman web yang akan
dibuat. Tag ini diawali dengan <title> dan diakhiri dengan tag </title>, penempatan tag ini harus
berada didalam tag <html>.
 Tag <body> adalah tag yang didalamnya dapat diisi dengan elemen-elemen yang akan
ditampilkan dalam halaman web seperti gambar, paragraf, link, dll. Tag ini diawali dengan
<body> dan ditutup dengan </body>.