( HyperText Markup Language)

Mata Kuliah : Pemrograman Berbasis Web

Pertemuan 2
Oleh : Nufan Balafif
Adalah bahasa pemrograman Web (client)
yang dikhususkan untuk pengolahan
dokumen. HTML mendefinisikan sebuah
elemen yang terdiri dari teks, paragraf,
operasi teks, pengaturan huruf, tautan,
media gambar, video, video flash atau
sebuah aplikasi (form).
Dalam penulisan HTML diawali dengan sebuah
tag.
Dalam HTML setiap element memiliki definisi
masing-masing.
HTML
HEAD BODY
TITLE
META
LINK/STYLE/
SCRIPT
ELEMENT
FORM
HTML = Untuk mengidentifikasi bahwa dokumen yang
digunakan ditulis menggunakan HTML
HEAD = Mendeskripsikan tentang informasi dari sebuah
halaman web
BODY = Berisi tentang isi dokumen yang akan ditampilkan
di web browser
Sumber : Learning Web Design Third Edition, OReilly Media
Type Element
Headings h1,h2,h3,h4,h5,h6
Paragraph p
Block (long) quotes blockquote
Preformatted text pre
Horizontal rules (line) hr
Unordered list ul
Ordered list ol
List item li
Definition list dl
Term dt
Definition dd
Di dalam sebuah paragraf biasa terdapat list
(daftar) urutan.
Ada 3 tipe dalam list
1. Unordered Lists ( <ul><li>)= Koleksi dari
item-item yang tidak beraturan (tidak
bernomor).
2. Ordered Lists ( <ol><li>)= Koleksi dari item-
item yang berurutan sesuai dengan nomor
urutnya.
3. Definition Lists ( <dl><dt><dd> )= Daftar
item-item yang berisi penjelasan dari item.
Element Description
b Menebalkan huruf
big Membuat teks berukuran lebih besar dari teks asalnya
center Membuat teks rata tengah
font Memberikan spesifikasi pada sebuah text
i Membuat teks miring
s Memberikan garis tengah pada sebuah teks
small Membuat teks berukuran lebih kecil dari teks aslinya
strike Memberikan garis tengah pada sebuah teks
sub Membuat teks lebih kecil dan berada di bawah teks
normal
sup Membuat teks lebih kecil dan berada di atas teks normal
u Membuat teks bergaris bawah
tt Memberikan tipe pada teks (berupa tipe font)
Element div, class, dan span digunakan untuk
menata sebuah halaman (tampilan) baik
bentuk dokumen, list, objek (form).
Penggunaan div, class, dan span biasanya
terkair dengan penggunaan CSS (Cascading
Style Sheet).
Karakter Nama Angka Deskripsi
&nbsp; &#160; Membuat spasi
& &amp; &#038 Apersen
&apos; &#039 Apostrof
< &lt; &#060; Lebih kecil
> &gt &#062; Lebih besar
&copy; &#169; Lambang hak cipta
&trade; &#8482; Lambang Merek terdaftar
Jika kita membuat halaman sebuah web pasti
tidak lepas dari tautan dengan halaman di
dalam web itu sendiri atau tautan dengan
URI halaman web yang lain, atau tautan ke
email.
Di dalam html element link (tautan) itu
dituliskan dengan <a>.....</a>
Contoh :
<a href=contoh/nama.html> klik </a>
Web
contoh
Index.html
nama.html
<a href=contoh/sample/alamat.html> klik </a>
Web
contoh
Index.html
nama.html sample
alamat.html
<a href=../index.html> klik </a> tautan dari
nama.html untuk mengakses index.html
Web
contoh
Index.html
nama.html
sample
alamat.html
<a href=../../index.html> klik </a> tautan dari
alamat.html untuk mengakses index.html
Contoh : <a href=#textH> H </a>
Pada contoh di atas digunakan untuk
mengakses id=textH pada satu halaman.
Implementasinya :
<h1 id=textH>Poin H</h1>
<dl>Bagian H</dl>
<dt>Konsep H</dt>
<dd>bla..bla...bla...bla</dd>
Contoh : <img src=apel.jpg>
Element dan Attribut Deskripsi
Img Memasukkan gambar
src=url Lokasi dari gambar
width=angka Memodifikasi lebar gambar
height=angka Memodifikasi tinggi gambar
title=text Memberikan judul gambar
Contoh :
<table>
<tr>
<td> Isi </td>
</tr>
</table>
Element dan Attribut Deskripsi
table Membuat tabel
cellpadding=num Memberikan jarak pada sel
cellspacing=num Memberikan jarak antar sel
tr Membuat baris baru
th Membuat header pada sebuah tabel (opsional)
colspan=num Jumlah kolom di dalam sel
rowspan=num Jumlah baris di dalam sel
td Membuat cel (kolom)
colspan=num Jumlah kolom di dalam sel
rowspan=num Jumlah baris di dalam sel
Element Form seringkali digunakan
bersamaan dengan Bahasa pemrograman
server misalnya dengan PHP.
Form biasanya digunakan untuk pengolahan
sebuah data.
Bentuk Element Form:
<form action=simpan.php method=post>
<element>.......</element>
</form>
Element dan Attribut Deskripsi
Form Membuat Form
action=# Tingkah laku (pekerjaan) dari sebuah form
method=post/get Metode yang digunakan untuk pengambilan
dalam di dalam form
name=# Untuk mengidentifikasi form
enctype= Tipe dari sebuah form
Text Element dari sebuah text field
Textarea Element dari sebuah text area
Select Element dropdown list
Button Element dari sebuah tombol
Submit Element sebuah tombol aksi
Radio Element dari sebuah pilihan
Check Emelent sebuah penanda
name= Nama dari sebuah elemen
id= Identifikasi dari sebuah elemen
Terimakasih atas perhatiannya.
Semoga apa yang kita pelajari bersama
bermanfaat bagi kita semua.
Amiiin.
Sumber:
1. Internet & World Wide Web How To Program Fourth Edition, P.J. Deitel, H.M
.Deitel, Prentice Hall.
2. Learning Web Design Third Edition, Jennifer Niederst Robbins, OReilly Media
3. http://www.w3c.org
4. http://www.w3schools.com