2. 2
HyperText Markup Language (HTML)
HTML standard bahasa yang digunakan
untuk menampilkan document web.
• Mengontrol tampilan dari web page dan
contentnya.
• Mempublikasikan document secara online
sehingga bisa di akses.
• Membuat online form yang bisa di gunakan
untuk menangani pendaftaran, transaksi
secara online.
• Menambahkan object-object seperti image,
audio, video dan juga java applet dalam
document HTML.
3. 3
Browser dan Editor
Browser: Browser merupakan software yang di
install di mesin client yang berfungsi untuk
menterjemahkan tag-tag HTML menjadi halaman
web. Browser yang sering di gunakan biasanya
Internet Explorer, Netscape Navigator, Opera,
Mozilla dan masih banyak yang lainya.
Editor: Program yang di gunakan untuk
membuat document HTML, ada banyak HTML
editor yang bisa anda gunakan diantaranya:
Notepad, Microsoft FrontPage, Macromedia
Dreamweaver, dan lain-lain.
4. 4
Tag-tag HTML
Kalo pada bahasa pemrograman kita
mengenal code, maka pada HTML kita
mengenal yang namanya tag.
Contoh tag html adalah <head>, <title>,
<body>, <html>, <img>, dan lain-lain.
Tag html tidak bersifat case sensitive
<body> sama dengan <BODY>
5. 5
Tag-tag HTML - continued
Bentuk umum penulisan tag html
adalah:
<ELEMENT ATTRIBUTE = value>
Dimana:
• Element - nama tag
• Attribute - atribut dari tag
• Value - nilai dari atribut.
Contoh:
<BODY BGCOLOR=lavender>
6. 6
Struktur HTML document
Document HTML bisa di bagi mejadi tiga bagian
utama: html, head, dan body.
<html>
<head>
</head>
<body>
</body>
</html>
8. 8
<html>
Setiap document HTML harus di awali
dan di tutup dengan tag HTML
<html> …… </html>
Tag <html> memberi tahu browser
bahwa yang di dalam kedua tag
tersebut adalah document HTML.
9. 9
<head>
Bagian header dari document HTML di apit oleh tag
<head></head>.
Di dalam bagian ini biasanya dimuat tag <tittle> yang
menampilkan judul dari halaman web.
<head>
<title>Ahlan wa sahlan</title>
</head>
11. 11
<body>
Tag <body> di gunakan untuk menampilkan text,
image link dan semua yang akan di tampilkan
pada web page.
<html>
<head>
<title> Ahlan Wa Sahlan </title>
</head>
<body bgcolor=“yellow“ text="navy" >
<p>Dokumen HTML yang Pertama</p>
</body>
</html>
15. 15
Elemen dasar – Paragraph (p)
Menampilkan teks dalam bentuk paragraf.
<body>
<h3>Salam Kenal</h3>
<p>
Saya dari jurusan Sistem Informasi STMIK Bani
Saleh.
Siapa ya yang mau kenalan dengan saya
</p>
<body>
21. 21
list item (li) - continued
Tipe-tipe pada list item - ordered list <ol> :
• “A” : A, B, C, …
• ”a” : a, b, c, …
• ”I” : I, II, III, …
• ”i” : i, ii, iii, …
• ”1” : 1, 2, 3, …
22. 22
Elemen dasar – Horizontal Rules <hr>
Horizontal Rule tag digunakan untuk
menggambar garis horizontal dalam dokumen
html.
Attribut dari <hr> adalah:
• Position: menetukan posisi dari <hr>, dengan nilai :
center | right | left.
• Width: untuk menentukan panjang <hr>. Nilai default
100%.
• Size: untuk menentukan tebal dari <hr> dalam pixel.
• Noshad: Efek bayangan.
Contoh:
<hr position=“center” width=90% size=3
noshad>
23. 23
Pemformatan Page
Break : memulai baris baru
tag : <br>
Font : menentukan format tampilan font
<font color="#9966FF" size="5"> Belajar Web </font>
Color : attribute dgn 3 kategori warna (RGB)
#RRGGBB, misal #FF0000 adalah Red
24. 24
Alignment : untuk perataan objek (Left,Right,Center,Justify)
<P align="center">Daftar Jurusan STMIK Bani Saleh</P>
Format Text :
A. Physical Format B. Logical Format
Pemformatan Page – Cont. 1
C. Preformatted Text : menampilkan text seperti text code.
<pre> HTML sungguh menyenangkan.
Mudah bukan… </pre>
25. 25
Contoh :
<html>
<head>
<title>Ahlan wa Sahlan</title>
</head>
<body>
<B><P align="center">Kecamatan di Kota
Bekasi</P></B>
<pre> diantaranya sebagai berikut : </pre>
<font color="#9966FF" size="3" face="arial">
1. Kecamatan Bekasi Timur </font> <br>
2. Kecamatan Bekasi Utara <br>
3. Kecamatan Bekasi Selatan <br>
</body>
</html>
Pemformatan Page – Cont. 2
27. 27
Elemen dasar – hyperlink <a>
Untuk membuat link ke dokumen lain.
Contoh:
<a href=dua.html>Ke halaman dua</a>
<a href=“http://lecturer.stmikbanisaleh.edu/
”> WEB DOSEN STMIK BANISALEH</a>
Untuk membuat link ke bagian tertentu dlm dokumen.
Contoh:
28. 28
Tag div
Div adalah divisi, maksudnya generik blok
content yang dapat digunakan sebagai
penampung jadi satu beberapa elemen
<body>
<h3>Contoh 1</h3>
<div id="content">
<p>konten di dalam div</p>
</div>
<h3>Contoh 2</h3>
<div class="text-danger">
<p>WASPADALAH!</p>
</div>
</body>
39. 39
Tag Button
Contoh :
<html>
<head>
<title>Ahlan Wa Sahlan</title>
</head>
<body>
<P>Klik simpan untuk simpan
data</P>
<button
type="button">Simpan</button>
</body>
</html>
HTML
element button menunjukkan
sebuah tombol yang secara
umum memiliki style layaknya
sebuah tombol yang dapat diklik
untuk menjalankan tindakan
tertentu.
Konten/teks didalam
element button merupakan label
dari tombol tersebut. Pada
<button> element, dapat pula
dimasukkan gambar sebagai
tampilan dari tombol itu sendiri,
ini yang membedakan antara
tombol yang dibuat dengan
element <button> dan element
input lainnya.
41. 41
Tag dd,dl,dt
Contoh :
<head>
<title>Ahlan Wa Sahlan</title>
</head>
<body>
<dl>
<dt>Vertebrata</dt>
<dd>Binatang yang bertulang belakang (Seperti binatang
menyusui dan burung)</dd>
<dt>Invertebrata</dt>
<dd>Binatang yang tidak bertulang belakang (Seperti cacing
dan lalat)</dd>
</dl>
</body>
Tag dd adalah definition detail
Tag dl adalah definition list
Tag dt adalah definition term
43. 43
Tag del
Contoh :
HTML <del> tag digunakan untuk
menunjukkan konten yang telah dihapus
(delete) dari dokumen.
Browser biasanya memberi style garis
tengah pada teks didalam element del,
yang menunjukkan coretan atau
dihapusnya teks tersebut dari dokumen.
Gunakan juga element <ins> untuk
menyisipkan teks baru yang
menunjukkan perubahan (Update) dari
teks/konten yang telah dihapus, jika
diperlukan.
44. 44
Tag del
Contoh :
<head>
<title>Ahlan Wa Sahlan</title>
</head>
<body>
<p>
Budi menjual mobil bekas di <del
cite="http://blog.olx.co.id/blog/tokobagus-com-berubah-nama-
menjadi-olx-co-id/">tokobagus.com</del> <ins>olx.co.id</ins>
</p>
</body>
46. 46
Tag option
Tag yang mempresentasikan sebuah opsi
Contoh :
<body>
<form action="voting_ikan.php" method="get">
<p>Ikan apa yang menurut Anda paling enak
dimakan?</p>
<label>Ikan Favorit:
<select>
<option value="lele">Ikan Lele</option>
<option value="mas">Ikan Mas</option>
<option value="teri">Ikan Teri</option>
<option value="tongkol">Ikan Tongkol</option>
</select>
</label>
</form>
</body>
48. 48
Tag images
Tag yang mempresentasikan gambar
Contoh :
<head>
<title>Ahlan Wa Sahlan</title>
</head>
<body>
<img src="images/Tulips.jpg" height="70%" alt="Taman
bunga Tulips" />
</body>
50. 50
Tag textarea
Tag yang mempresentasikan input area control
teks lebih dari satu baris
Contoh :
<html>
<head>
<title>Ahlan wa sahlan</title>
</head>
<body>
<label for="message">Pesan:</label> <br>
<textarea id="message" rows="7" cols="80">
Tulis Pesan Anda dengan Lengkap.
</textarea>
</body>
</html>