Modul 1 - HTML

Achmad Hamdan, M.Pd – HTML
1
PENGERTIAL HTML (HyperText Mark-up Language)
HTML adalah sebuah bahasa pemrograman yang digunakan untuk membuat sebuah
halaman Web. Untuk menulis kode HTML digunakan editor teks seperti NotePad++ atau
phpDesigner. Contoh kode HTML yang sangat sederhana :
Contoh Script
 Pasangan tag <html> dan </html> menandakan bahwa kode yang terdapat di dalamnya
adalah kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML
 Bagian yang terdapat dalam <html> dan </html> umumnya terbagi atas :
1. kepala, ditandai dengan pasangan tag <head> dan </head>
2. badan, ditandai dengan pasangan tag <body> dan </body>
 Pada bagian kepala, bisa ditentukan judul dokumen HTML. Judul ini ditulis dalam pasangan
tag <title> dan </title>.
Cara Menuliskan Tag
Nama tag ditulis di dalam tanda < dan >. Antara nama tag dan tanda < ditulis tanpa
spasi sama sekali. 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.
Atribut dalam Tag
Beberapa tag mengandung atribut di dalamnya. Contoh :
<p align=”center”>
Pada contoh ini, P adalah nama tag sedangkan ALIGN adalah nama atribut. Pada umumnya,
atribut melibatkan nilai. Pada contoh di atas, “CENTER” adalah nilai untuk atribut ALIGN.

2
Tag <BR/>
Fungsi tag <br/> adalah untuk membuat baris baru atau berpindah baris.
Tag <hr/>
Untuk mempercantik halaman, seringkali pembuat dokumen Web menambahkan garis
horisontal. Garis ini dapat dibuat dengan mudah, yakni dengan menyertakan tag <hr/>.
Seperti halnya pada tag <p>, tag <hr/> ini juga memiliki atribut ALIGN. Nilai yang dapat
diberikan pada ALIGN adalah :
Atribut Keterangan
SIZE Menentukan ketebalan garis
WIDTH Menentukan lebar garis
ALIGN Menentukan peletakkan teks dalam baris
NOSHADE Mengatur agar garis tidak disertai bayangan
Tag CENTER
Untuk menengahkan suatu teks, bisa juga digunakan tag <CENTER>. Tentu saja, untuk
mengakhiri penengahan teks (yakni agar teks berikutnya tidak ditengahkan), perlu disertakan
</CENTER>.
Tag DIV
Tag divisi <div> berguna untuk mengelompokkan sejumlah baris teks yang memiliki
karakteristik yang sama.
Contoh Script

3
MENGATUR TEKS
Mengatur Teks Secara Fisik
Daftar tag untuk mengatur teks secara fisik
Pemakaian Tag Keterangan
<b>Teks</b> Teks ditampilkan dalam keadaan ditebalkan
<big>Teks</big> Teks ditampilkan dengan ukuran lebih besar dari ukuran normal
<i>Teks</i> Teks ditampilkan dalam keadaan miring
<small>Teks</small> Teks ditampilkan dengan ukuran lebih kecil dari ukuran normal
<sub>Teks</sub> Teks ditampilkan sebagai subskrip
<sup>Teks</sup> Teks ditampilkan sebagai superskrip
<tt>Teks</tt> Teks ditampilkan dalam bentuk seperti ketikan mesin tik
<u>Teks</u> Teks ditampilkan dengan diberi garis bawah
Contoh Script
Mengatur Teks Secara Logis
Daftar tag untuk mengatur teks secara logis
Pemakaian Tag Keterangan
<cite>Teks</cite> Menyatakan teks adalah kutipan
<code>Teks</code> Menyatakan bahwa teks adalah kode atau program komputer.
Umumnya teks ditampilkan dengan font monoskrip.
<em>Teks</em> Menyatakan penekanan pada teks. Umumnya teks ditampilkan
miring.
<kbd>Teks</kbd> Menyatakan teks adalah masukan dari keyboard. Teks seperti ini
umumnya ditampilkan dengan font monospasi.
<samp>Teks</samp> Menyatakan bahwa teks adalah suatu konstanta sederetan
karakter. Biasanya ditampilkan dengan font monospasi.
<strong>Teks</strong> Menyatakan bahwa teks yang sangat penting untuk diperhatikan
orang. Biasanya disajikan dengan ditebalkan.
<var>Teks</var> Menyatakan teks adalah variabel atau ekspresi matematika atau
program komputer. Teks akan disajikan dalam bentuk miring.

4
Tag <P>
Tag <P> digunakan untuk membuat paragraf.
Di dalam tag <P> bisa disertakan atribut ALIGN yang berguna untuk mengatur peletakan
teks di dalam masing-masing baris. Salah satu nilai yang dapat diberikan pada ALIGN adalah
CENTER, yang menempatkan teks berada di tengah-tengah layar pada baris yang bersangkutan.
Selain CENTER, nilai lain yang dapat diisikan pada ALIGN yaitu :
 LEFT, mengatur teks rata kiri terhadap halaman
 RIGHT, mengatur teks rata kanan terhadap halaman
 JUSTIFY, mengatur teks rata kiri dan rata kanan.
Contoh Script
Tag Judul (Heading)
HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang
dijadikan sebagai judul dalam badan dokumen.
Contoh Script
Seperti halnya pada tag <p>, tag judul atau heading ini juga memiliki atribut ALIGN.
Nilai yang dapat diberikan pada ALIGN adalah :
 LEFT (default), mengatur teks rata kiri terhadap halaman
 RIGHT, mengatur teks rata kanan terhadap halaman
 CENTER, menempatkan judul di tengah-tengah layar pada baris yang bersangkutan
 JUSTIFY, mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk teks yang sangat
panjang.

5
MENGATUR FONT
Tag <FONT>…</FONT> berguna untuk mengatur jenis, ukuran, maupun warna font.
Jenis Font
Nama File: JenisFont.htm
Ukuran dan Warna Font
Nama File: FormatFont.htm

6
MEMBUAT LINK
Hyperlink ke Halaman Web
Untuk membuat link ke halaman lain, digunakan pasangan tag <a>…</a> atau yang
biasa yang disebut tag jangkar atau anchor tag. Bentuk paling sederhana penggunaan tag link
adalah sebagai berikut :
<a href = “URL”>Label</a>
Dalam hal ini, URL (Uniform Resource Locator) dapat berupa alamat suatu dokumen Web, berkas
grafik, ataupun menyatakan suatu protokol lain (misalnya FTP).
Link ke Situs Web Lain
Hyperlink tak terbatas ke halaman-halaman Web yang berada pada sistem yang sama.
Hyperlink seringkali ditujukan ke situs Web yang lain yang berada di sembarang Web server.
Contoh Script
Membuka Jendela Baru
Kadangkala dikehendaki agar kalau suatu link diklik maka jendela baru akan ditampilkan
untuk menampung halaman yang di-link. Hal ini bisa dikerjakan dengan menambahkan kode :
TARGET = “_blank” pada tag <A>.
Contoh Script

7
MENAMBAHKAN GAMBAR
Mengatur Gambar Latar Belakang
Terkadang kita jumpai halaman Web dengan latar belakang berupa suatu gambar. Latar
belakang seperti itu kadangkala mempercantik tampilan halaman Web. Untuk menyertakan suatu
gambar sebagai latar belakang, dapat digunakan atribut BACKGROUND pada tag <img>.
Bentuknya sebagai berikut :
Contoh :
<body background = ”Caladium.jpg”>
Menampilkan Gambar
Untuk menampilkan gambar, digunakan tag <IMG>. Bentuk paling sederhana dari tag <IMG> :
Contoh :
<img src = ”keladi.jpg”>
Memberi Bingkai Gambar
Dengan menggunakan atribut BORDER pada tag <IMG>, Anda bisa mengatur agar
gambar ditampilkan dengan diberi bingkai. Caranya adalah dengan memberikan bilangan pada
atribut BORDER. Nilai pada atribut tersebut menyatakan ketebalan bingkai dalam satuan piksel.
Contoh :
<img src = ”RedFlash.gif” align = ”right” border = “1”>
Mengatur Ukuran Gambar
Bila Anda memiliki gambar yang berukuran besar dan bermaksud mengubah ukuran
gambar saat gambar ditampilkan, Anda bisa mengaturnya melalui atribut pada tag <IMG> yang
bernama HEIGHT dan WIDTH.
• HEIGHT untuk mengatur tinggi gambar
• WIDTH untuk mengatur lebar gambar
Contoh :
<img src = ”RedFlash.gif” height = “150” width = ”150”>

8
“TUGAS PRAKTIKUM”
Buatlah halaman web sederhana (bebas sesuai kreasi) yang melibatkan elemen teks, garis, warna,
dan gambar. Di mana terdapat minimal sebuah heading, hyperlink dan garis berwarna, gambar dengan
garis tepi (border), dan halaman utama dengan latar belakang gambar sembarang. Contoh tampilannya
dapat dilihat seperti Gambar dibawah ini.
Nama File: TugasHalWeb.htm

9
MENGGUNAKAN TABEL
Pada umumnya, tabel digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom.
Perpotongan baris dan kolom di dalam tabel disebut sebagai sel.
Tag-tag yang terkait dengan pembuatan table :
Tag Keterangan
<TABLE>…</TABLE> Mengawali dan mengakhiri sebuah table
<CAPTION>…</CAPTION> Menentukan judul pada table
<TR>…</TR> Membuat sebuah baris dalam table
<TH>…</TH> Membuat judul kolom
<TD>…</TD> Membuat sebuah sel data / kolom
Contoh Script
Menggunakan Atribut Width
Atribut lain yang juga cukup penting adalah width (untuk menentukan lebar tabel atau sel).
Contoh Script

10
Menentukan Warna Latar Belakang Table
Untuk menambahkan warna latar belakang table, digunakan atribut bgcolor pada tag <table>
atau tag <td>.
Contoh Script
Menggabungkan Sel Antar Baris
Untuk menggabungkan sel antar baris, atau menggabungkan beberapa sel dalam satu kolom
digunakan atribut rowspan pada tag <td>.
Contoh Script

11
Menggabungkan Sel Antar Kolom
Untuk menggabungkan sel antar kolom, atau menggabungkan beberapa sel dalam satu baris
digunakan atribut COLSPAN pada tag <th> atau <td>.
Contoh Script
Menggabungkan Atribut Rowspan dan Colspan
Contoh Script

12
Pengaturan Teks pada Posisi Horizontal
Di dalam sebuah sel, teks dapat diatur menurut posisi horizontal apakah akan diletkkan di
tengah, kanan atau di kiri. Hal ini bisa dilakukan dengan menggunakan atribut ALIGN pada tag
seperti <th>, <tr>, atau <td>.
ALIGN dan Nilainya Keterangan
ALIGN = “LEFT” Teks diatur rata kiri
ALIGN = “CENTER” Teks ditengahkan
ALIGN = “RIGHT” Teks diatur rata kanan
Pengaturan Teks pada Posisi Vertikal
Di dalam sebuah sel, teks dapat diatur menurut posisi vertical apakah akan diletkkan di atas, di
tengah, atau di bawah. Hal ini bisa dilakukan dengan menggunakan atribut VALIGN pada tag seperti
<th>, <tr>, atau <td>.
Nilai VALIGN Keterangan
TOP Teks diletakkan di bagian atas pada sel
MIDDLE Teks diletakkan di bagian tengah pada sel
BOTTOM Teks diletakkan di bagian bawah pada sel
Nama File: AlignValign.htm

13
“TUGAS PRAKTIKUM – TABEL”
Buatlah tampilan tabel (tema bebas) yang didalamnya menggunakan atribut rowspan, colspan, width,
height, bgcolor, dan atribut-atribut lainnya. Salah satu contoh sederhananya adalah seperti tampilan
tabel di bawah ini.
Nama File: TugasTabel.htm

14
MENGGUNAKAN FORM
Dasar Penggunaan Form
Form dibentuk dengan menggunakan pasangan tag <FORM> dan </FORM>. Dua atribut
yang umum digunakan pada tag <FORM> berupa ACTION dan METHOD.
• ACTION menentukan URL yang akan dijalankan dan menerima semua masukan pada
formulir. Jika ACTION tidak disebutkan, informasi akan dikirimkan ke URL yang sama dengan
halaman web itu sendiri.
• METHOD digunakan untuk menentukan bagaimana informasi dikirim ke URL yang
disebutkan dalam ACTION. Nilai yang umum untuk atribut ini berupa GET dan POST. POST
membuat informasi dikirimkan secara terpisah dengan URL, sedangkan GET akan membuat
informasi dikirim menjadi satu dengan URL.
Contoh penggunaan pasangan tag <FORM> dan </FORM> :
<FORM ACTION = ”info.htm” METHOD = ”POST”>
...
</FORM>
Memasukkan Data dengan INPUT
Tag <INPUT> digunakan untuk melakukan pemasukan data dan letaknya berada dalam
pasangan tag <FORM> dan </FORM>. Ada bermacam-macam tipe pemasukan data, antara lain
berupa kotak teks, kotak password, tombol radio, kotak cek, serta tombol SUBMIT dan RESET.
Atribut pada tag INPUT
Atribut Keterangan
NAME Menentukan nama data. Atribut ini diperlukan oleh semua jenis masukan, kecuali
SUBMIT dan RESET
SIZE Menentukan ukuran kotak masukan yang tertampil untuk teks dan password
MAXLENGTH Menentukan jumlah karakter yang dapat dimasukkan dalam kotak password dan
kotak teks
VALUE Menentukan nilai awal untuk kotak masukan
CHECKED Mengatur agar kotak cek dalam keadaan terpilih pada keadaan awal
TYPE Menentukan tipe kotak masukan
Tipe TEXT
Tipe TEXT bermanfaat untuk memasukkan data seperti nama orang atau alamat
seseorang. Contoh pemakaian :
<INPUT TYPE = “TEXT” NAME = “nama_pegawai” SIZE = “20” MAXLENGTH = “20”>
Dengan menggunakan atribut VALUE pada tag <INPUT>, field teks dapat diberi nilai bawaan.
Contoh :
<INPUT TYPE = “TEXT” NAME = “nama_pegawai” SIZE = “20” MAXLENGTH = “20” VALUE =
“Isi dengan nama Anda”>

15
Tombol SUBMIT dan RESET
Tipe SUBMIT pada tag <INPUT> akan membentuk tombol Submit, yaitu tombol yang
menyebabkan URL yang disebutkan pada ACTION pada tag <FORM> akan dimuat. Contoh
penulisan kode dengan tombol Submit yang paling sederhana :
<INPUT TYPE = “SUBMIT”>
Jika tulisan pada tombol tidak berisi Submit, perlu disebutkan pada atribut VALUE. Contoh :
<INPUT TYPE = “SUBMIT” VALUE = ”Kirim”>
Tombol Reset berfungsi untuk mengosongkan atau mengembalikan nilai field teks ke nilai
bawaan.
Contoh penggunaan form yang melibatkan field Teks, tombol Submit, dan tombol Reset :
Tipe PASSWORD
Tipe PASSWORD yang disebutkan pada atribut TYPE pada tag <INPUT> akan membuat
setiap karakter yang diketikkan oleh pemakai pada field ini disembunyikan (misalnya dengan
diganti tanda * untuk setiap karakter yang diketikkan pemakai).

16
Contoh Script
Tipe CHECKBOX
Tipe CHECKBOX berguna untuk membuat kotak cek. Kotak cek adalah suatu bentuk
masukan yang memungkinkan pemakai mencentang atau tidak mencentang kotak tersebut
dengan mengklik mouse pada saat penunjuk mouse menunjuk kotak cek.
Contoh Script
Tipe RADIO
Tombol radio digunakan dalam bentuk 2 tombol atau lebih yang memungkinkan pemakai
hanya memilih satu dari sekian tombol. Tombol radio diimplementasikan dengan menggunakan
tag <INPUT> dengan atribut TYPE diberi nilai “RADIO”.
Untuk membentuk sekelompok radio yang menyatakan sebuah pilihan, atribut NAME
perlu diisi dengan nama yang sama. Atribut VALUE untuk menentukan nilai terhadap nama
data sekiranya tombol tersebut diklik.

17
Contoh Script
Tag SELECT
Select berarti memilih. Tag <SELECT> merepresentasikan sebuah kontrol yang digunakan untuk
menyeleksi (memilih) deretan opsi (daftar pilihan) yang diberikan baik satu ataupun lebih dari
satu pilihan.
Penggunaan tag <SELECT> dapat ditulis bersamaan dengan tag <OPTION> yang berisi daftar
pilihan (opsi) yang dapat ditulis beberapa item sebagai daftar pilihan yang akan diseleksi oleh
user / pengguna Web.

18
Contoh Script
“TUGAS PRAKTIKUM – FORM”
Buatlah tampilan Forumlir atau Form (tema bebas) seperti contoh dibawah ini.
Nama File: TugasForm.htm

Modul 1 - HTML

More Related Content

What's hot

Similar to Modul 1 - HTML

Recently uploaded

Modul 1 - HTML