Modul 1: Tujuan Instruksional Umum

MODUL 1
DASAR-DASAR HTML &

FORMAT PADA DOKUMEN HTML
Tujuan Instruksional Umum :

Agar mahasiswa dapat mengenal dan memahami tag-tag dasar HTML dan Format
penulisan pada dokumen HTML
Tujuan Instruksional Khusus :

- Mahasiswa dapat membuat tag-tag dasar HTML
- Mahasiswa dapat membuat struktur dasar HTML
- Mahasiswa dapat memformat dokumen HTML yang dibuatnya
Pokok Bahasan :
- Persiapan awal
- Tag-tag dasar HTML
- Aturan-aturan Dasar
- Struktur dasar dokumen HTML
- Membuat judul dengan <TITLE>
- Fungsi Body
- Menyusun Heading dan Sub-Heading
- Menentukan posisi heading
- Membuat Horizontal Rule <HR>
- Membuat Font dengan atribut COLOR, FACE dan SIZE
- Pewarnaan Background
Daftar Pustaka :
- Abdul Kadir, Pemrograman Web Mencakup : HTML, CSS, JavaScript & PHP, Penerbit Andi,
Yogyakarta, 2002
- Ahmad Bustami, Cara Mudah Belajar Internet HomeSite dan HTML, Penerbit Dinastindo,
Jakarta 1999
- Betha Sidik, etc, Pemrograman Web dengan HTML, Penerbit Informatika, Bandung, 2002
- Inixindo, Pengembangan HomePage & Intranet, Jakarta 1998
Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 1

1.1. Definisi HTML
HTML merupakan singkatan dari HyperText MarkUp Language. HTML dapat dibuat pada
sembarang editor, meski ada software-software khusus yang dimaksudkan untuk memudahkan
pekerjaan. Adapun editor-editor yang dimaksud adalah NotePad, WordPad, MS Word, Excel dan lain-
lain.
Pembuatan teks HTML hampir sama dengan pembuatan teks-teks lainnya seperti pada MS
Word. Pemberian format pada suatu teks dalam sebuah dokumen akan bisa langsung terlihat
hasilnya. Contohnya, jika Anda ingin membuat sebuah dokumen pada MS Word dan memformatnya
sehingga salah satu kata/kalimat ingin diberikan format huruf tebal (Bold), miring (Italic), atau Garis
bawah pada teks (UnderLine), maka hasilnya segera dapat dilihat pada dokumen tersebut. Berbeda
dengan dokumen HTML, format-format yang diberikan pada suatu teks tidak bisa dilihat langsung
hasilnya, tetapi harus menggunakan program khusus, yaitu “Web Browser” atau “Browser”
Perbedaan yang lebih mendasar terhadap dokumen-dokumen lainnya yaitu, dokumen HTML
bisa mengandung Link/hubungan kebagian lain dari sebuah dokumen atau dokumen lain dari situs
Web, baik dalam server Web yang dama ataupun ke Server Web lainnya. Ciri adanya unsur link ini
pada sebuah dokumen HTML, biasanya suatu teks ditandai dengan warna biru dan garis bawah.
Apabila pointer mouse diarahkan ke link tersebut, maka pointer mouse akan berubah menjadi gambar
telapak tangan.
1.2. Persiapan Awal

Beberapa hal yang perlu dipersiapkan sebelum mulai membuat dokumen HTML, diantaranya
adalah persiapan software editor dan software Web Browser. Editor HTML yang akan digunakan
pada buku ini adalah editor NotePad (walaupun dapat digunakan editor apapun). Sedangkan Web
Browser yang digunakan adalah Mozilla Firefox dan Internet Explorer (IE).
Ada beberapa tips khusus dalam penggunaan software-software di atas, seperti misalnya
dalam penggunaan editor HTML sebaiknya gunakan editor yang tidak terlalu banyak menyita memory
komputer, Dan yang paling terpenting adalah software tersebut compatibel dengan sistem komputer
yang dimiliki.
1.3. Tag-tag Dasar HTML

Bentuk umum penulisan dokumen HTML adalah sebagai berikut :
<HTML>
<HEAD>
<TITLE> Teks Judul </TITLE>
</HEAD>
<BODY>
Isi Dokumen
</BODY>
</HTML>

Berikut ini adalah penjelasa kode pada bentuk umum penulisan dokumen HTML :
• Pasangan tag <HTML> dan </HTML> menandakan bahwa kode yang terdapat di dalamnya
adalah kode HTML sehingga browser akan menterjemahkan sebagai dokumen HTML.
• Bagian yang terdapat dalam <HTML> dan </HTML> umumnya terbagi atas kepala dan badan
• Bagian Kepala ditandai dengan pasangan tag <HEAD> dan </HEAD>. Pada Bagian ini, bisa
ditentukan judul dokumen HTML yang dituliskan dengan pasangan <TITLE> dan </TITLE>.
• Bagian badan ditandai dengan <BODY> dan </BODY>. Di dalam bagian inilah dapat dituliskan
teks-teks, penyisipan gambar, Link, atau pembuatan tabel.
1.4. Aturan-aturan Dasar HTML

Ada beberapa aturan-aturan dasar yang berlaku dalam penulisan tag-tag pada HTML :
1. Setiap tag HTML harus diapit oleh tanda lebih kecil dan lebih besar
<……..>
2. Tag yang dituliskan dapat berupa huruf kecil ataupun huruf kapital. Penulisan huruf kecil atau
kapital akan memberikan hasil yang sama. Meskipun demikian, sebaiknya penulisan tag dituliskan
dalam huruf kapital.
3. Hampir semua tag adalah tag yang berpasangan. Ciri dari tag yang berpasangan adalah selalu
mempunyai tag awal dan tag akhir. Tag awal ditandai dengan <…..> dan tag akhir diikuti dengan
tag slash-nya </…..>.
Contoh tag berpasangan :
<HTML>………</HTML>
<BODY>………</BODY>
<HEAD>………</HEAD>
4. Browser akan mengabaikan spasi atau baris baru pada teks yang diapit oleh tag. Contoh di
bawah ini akan menampilkan hasil yang sama pada browser :
<BODY> Isi dokumen </BODY>

atau
<BODY>
Isi dokumen
</BODY>
5. File dokumen HTML harus disimpan sebagai file teks murni, dengan menggunakan ekstensi html
atau htm.

1.5. Struktur Dasar Dokumen HTML
Struktur dasar dokumen HTML seperti yang telah dijelaskan pada sub-bab 1.3, contohnya
adalah :
FILE : coba.htm
<HTML>
<HEAD>
<TITLE> Selamat Belajar HTML </TITLE>
</HEAD>
<BODY>
Selamat Datang
</BODY>
Judul
</HTML>
Gambar 1.1 Hasil coba.htm
1.6. Menyusun Heading dan Sub-Heading

HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang dijadikan
sebagai judul dalam badan dokumen. Tag-tag judul ini berupa :
<Hx>……………</Hx>
dimana :
Nilai x = 1, 2, 3, 4, 5, 6
FILE : heading.htm
<HTML>
<HEAD>
<TITLE> Selamat Belajar HTML </TITLE>
</HEAD>
<BODY>
<H1>Belajar HTML</H1>
</BODY>
</HTML>

Gambar 1.2 Hasil heading.htm
1.6.1. Atribut pada Heading

Heading mempunyai atribut ALIGN dengan value/nilainya adalah center, left, right. Contoh
beriut ini adalah format penulisan atribut Align pada tag <Hx> :
<Hx ALIGN=”[left, center, right]”> Teks Judul <Hx>
Dimana :
- Left : Untuk mengatur teks rata kiri
- Center : Untuk mengatur teks rata tengah
- Right : Untuk mengatur teks rata kanan
FILE : athead.htm
<HTML>
<HEAD>
<TITLE> Membuat Atribut Judul </TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">Belajar HTML</H1>
<H2 ALIGN="right">Belajar HTML</H2>
<H3 ALIGN="left">Belajar HTML</H3>
<H4 ALIGN="center">Belajar HTML</H4>
<H5 ALIGN="right">Belajar HTML</H5>
<H6 ALIGN="left">Belajar HTML</H6>
</BODY>
</HTML>

Gambar 1.3 Hasil athead.htm
1.7. Membuat Horizontal Rule

Horizontal Rule atau biasa yang disebut dengan garis horisontal, sering dipakai dalam
pembuatan disain website. Tag yang digunakan untuk membuat garis horisontal adalah tag <HR>.
Tag ini bukanlah merupakan tag yan berpasangan, oleh sebab itu tag ini tidak perlu diakhiri dengan
tag slash-nya </HR>. Panjang garis horisontal yang terbentuk adalah panjangnya sama dengan
panjang jendela browsernya. Kendati demikian, tag <HR> mempunyai beberapa atribut yang dapat
menentukan panjang garis, lebar garis, warna garis, posisi garis, dan efek bayang-bayang tiga
dimensi.
FILE : hr.htm
<HTML>
<HEAD>
<TITLE> Membuat horozontal rule </TITLE>
</HEAD>
<BODY>
garis horizontal
<HR>
</BODY>
</HTML>

Horizontal Rule
ditampilkan sepanjang
jendela browsernya
Gambar 1.4 Hasil hr.htm
1.7.1. Atribut pada <HR>

Atribut yang terdapat pada <HR> adalah width, length, dan color. Penggunaan atribut-atribut
pada <HR> adalah sebagai berikut :
<HR ALIGN=”a” WIDTH=”x” SIZE=”y” COLOR = “z” NOSHADE>
Dimana :
- a = posisi garis (left, center, right)

- x = panjang garis (satuan pixel)
- y = tinggi garis (satuan pixel)
- z = warna garis
- NOSHADE = Garis tampil tanpa bayang-bayang tiga dimensi
-
FILE : athr.htm
<HTML>
<HEAD>
<TITLE> Membuat atribut horizontal rule </TITLE>
</HEAD>
<BODY>
garis horizontal dengan berbagai atribut<BR>
<HR ALIGN="left" WIDTH=”300” SIZE=”5” COLOR=”blue” NOSHADE>
<HR ALIGN="center" WIDTH=”400” SIZE=”10” COLOR=”green”>
<HR ALIGN="right" WIDTH=”150” SIZE=”5” COLOR="pink" NOSHADE>
</BODY>
</HTML>

Gambar 1.5 Hasil athr.htm
1.8. Fungsi Break

Line Break <BR> adalah tag yang berguna untuk membuat baris baru pada sebuah dokumen
HTML. Tag ini secara otomatis akan membuat baris baru tanpa memberi baris kosong dan akan
memotong sebarisan teks pada tempat dimana tag <BR> tersebut diletakkan/disisipkan.
FILE : br.htm
<HTML>
<HEAD>
<TITLE> Membuat baris baru </TITLE>
</HEAD>
<BODY>
Bunga Nusa Indah <BR>
Berwarna <BR> Merah
</BODY>
</HTML>

Gambar 1.6 Hasil br.htm
1.9. FORMAT TEKS

Format teks pada dokumen HTML dapat menampilkan berbagai jenis font, ukuran font, dan
warna font pada layar. Atribut-atribut yang digunakan pada <FONT> adalah SIZE, FACE, dan
COLOR. Tag <FONT> ini merupakan tag berpasangan, oleh sebab itu harus diakhiri dengan tag
slash-nya </FONT>.
<FONT SIZE=”x” FACE=”y” COLOR=”z”> teks </FONT>
Dimana :
- x = ukuran font (1-7)
- y = jenis font (Comic Sans MS, Arial, Courier, dll)
- z = warna font (red, blue, green)
Ukuran font (SIZE) dapat diperbesar dan diperkecil dari nilai 1 sampai dengan 7 (default font
adalah 3). Sedangkan untuk jenis huruf digunakan atribut FACE yang mempunyai nilai atau jenis
huruf yang lazim pada pengolah kata (Misalnya pada MS. WORD) yaitu Comic Sans MS, Arial,
Courier, dll). Penulisan jenis font ini harus sesuai dengan font yang sudah lazim digunakan.
Atribut warna dapat mengubah suatu warna teks dengan memberikan nilai pada atribut
tersebut. Ada dua bentuk pemberian nilai warna yang bisa dipakai pada atribut COLOR ini, yaitu yang
pertama dengan menggunakan nama warna itu sendiri, contohnya blue, red, dan green. Sedangkan
yang kedua adalah dengan menggunakan kode RGB suatu warna seperti, #000000 = Black,
#0000FF.
Selain itu, format teks dapat dilakukan secara khusus untuk menunjukkan perbedaan dan
penekanan terhadap isi dan maksud dari teks tersebut. Pembedaan ditampilkan dalam bentuk huruf
tebal (bold) menggunakan <B>teks</B>, miring (italic) menggunakan <I>teks</I>, digaris bawahi

(underline) menggunakan <U>teks</U>, subscript menggunakan <SUB>teks</SUB>, superscript
menggunakan <SUP>teks</SUP>, dan semacamnya.
Beberapa Contoh Warna :
Tabel 1.1 Contoh warna

Nama Warna Heksa Nama Warna Hexsa
Antiquewhite FAEBD7 Gold FFD700
Aqua 00FFFF Gray 808080
Black 000000 Green 008000
Blue 0000FF Greenyellow ADFF2F
Brown A52A2A Honeydew FOFFFO
Coral FF7F50 Magenta FF00FF
Cyan 00FFFF Orange FFA500
Darkgreen 006400 Skyblue 87CEEB
FILE : font.htm
<HTML>
<HEAD>
<TITLE> Format Teks </TITLE>
</HEAD>
<BODY>
<FONT SIZE="6" FACE="Courier" COLOR="red">Bunga Nusa Indah </FONT><BR>
Berwarna <BR> Merah
</BODY>
</HTML>

Gambar 1.7 Hasil font.htm
1.10. Pewarnaan Background

Web site yang dibuat, kurang menarik jika belum disisipkan warna pada latar belakang dari
sebuah dokumennya. Pewarnaan pada latar belakang dokumen dapat digunakan atribut pada
<BODY>, yaitu atribut BGCOLOR. Adapaun warna yang dapat digunakan bisa dilihat pada tabel 1.1
di atas. Pembuatan warna background haruslah disesuaikan dengan warna teksnya. Jangan sampai
Web site yang dibuat, nantinya akan menampilkan tulisan-tulisan yang tidak dapat dibaca.
FILE : warna.htm
<HTML>
<HEAD>
<TITLE> Pemberian warna background </TITLE>
</HEAD>
<BODY BGCOLOR="honeydew">
<FONT SIZE="3" FACE="Courier" COLOR="magenta">Teks dengan warna magenta dan
menggunakan warna background honeydew </FONT><BR>
</BODY>
</HTML>

Gambar 1.8 Hasil warna.htm
-----------------------------
Latihan Untuk Dikerjakan Di Laboratorium Komputer

Buatlah seluruh contoh file program yang ada di dalam BAB 1 dengan menggunakan kode-kode
HTML !
Latihan Untuk Dikerjakan Di Rumah

Buatlah dokumen HTML dengan ketentuan sebagai berikut :
1. Judul pada title bar latihan pertamaku
2. Judul dokumen SURAT LAMARAN KERJA dengan ukuran heading 2
3. Isi dokumen Tentang surat lamaran kerja dengan ukuran font 3 (default), jenis font Arial, dan
warna teks biru
4. Berikan warna kuning pada backgrounnya
5. Berikan pemisah garis antara judul dokumen dan isi dokemen (ukuran dan warna garis tentukan
sendiri)

Modul 1: Tujuan Instruksional Umum

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

Modul 1: Tujuan Instruksional Umum

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL 1

DASAR-DASAR HTML &

Tujuan Instruksional Umum :

Tujuan Instruksional Khusus :

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 1

1.2. Persiapan Awal

1.3. Tag-tag Dasar HTML

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 2

1.4. Aturan-aturan Dasar HTML

<BODY> Isi dokumen </BODY>

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 3

Gambar 1.1 Hasil coba.htm

1.6. Menyusun Heading dan Sub-Heading

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 4

1.6.1. Atribut pada Heading

<Hx ALIGN=”[left, center, right]”> Teks Judul <Hx>

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 5

1.7. Membuat Horizontal Rule

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 6

Gambar 1.4 Hasil hr.htm

1.7.1. Atribut pada <HR>

<HR ALIGN=”a” WIDTH=”x” SIZE=”y” COLOR = “z” NOSHADE>

- a = posisi garis (left, center, right)

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 7

1.8. Fungsi Break

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 8

1.9. FORMAT TEKS

<FONT SIZE=”x” FACE=”y” COLOR=”z”> teks </FONT>

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 9

Beberapa Contoh Warna :

Tabel 1.1 Contoh warna

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 10

1.10. Pewarnaan Background

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 11

Latihan Untuk Dikerjakan Di Laboratorium Komputer

Latihan Untuk Dikerjakan Di Rumah

Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 12

Anda mungkin juga menyukai