Upload
rakhmi-khalida-mmsi
View
165
Download
1
Embed Size (px)
Citation preview
Pengantar HTML
Rakhmi Khalida
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
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
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
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
Struktur HTML document
Document HTML bisa di bagi mejadi tiga bagian utama: html, head, dan body.
<html>
<head>
</head>
<body>
</body>
</html>
7
Susunan HTML
Homepage
Kepala
<head>
Tubuh
<body>
<Head>
<Title>
Judul Homepage
</Title>
</Head>
<Body>
Isi…Teks
Isi…Tabel.
Isi…Audio, Video, dll.
</Body>
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
<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>
10
<head>
11
<body> Tag <body> di gunakan untuk menampilkan text,
image link dan semua yang akan di tampilkanpada web page.
<html>
<head>
<title> Ahlan Wa Sahlan </title>
</head>
<body bgcolor=“yellow“ text="navy" >
<p>Dokumen HTML yang Pertama</p>
</body>
</html>
12
<body>
13
Elemen dasar – Block Level
Block level element: terdapat 6 tingkatan, yaituH1 sampai H6.
<body>
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
</body>
14
Elemen dasar – Block Level
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>
16
Elemen dasar – Paragraph (p)
17
Elemen dasar – list item (li)
Unordered list <ul>: List item tidak berurutan (bullet)
<body>
<P>Nama-nama buah</P>
<ul>
<li>Mangga</li>
<li>Duren</li>
<li>Sirsak</li>
</ul>
</body>
18
Elemen dasar – list item (li)
19
list item (li) - continued
Ordered list <ol>: List item berurutan.
<body>
<P>Daftar Jurusan STMIK Bani Saleh</P>
<ol start="1" type=“1">
<li>Teknik Informatika</li>
<li>Sistem Informasi</li>
<li>Teknik Komputer </li>
<li>Manajemen Informatika</li>
</ol>
<body>
20
list item (li) - continued
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
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
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
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
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
26
Pemformatan Page – Cont. 2
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
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>
29
Tag div
30
Pembuatan Tabel
Untuk membuat tabel : <tabble>
Cell-nya dengan tag <td>
<html><head><title>Using Table</title></head><body><table border="1"><td>kolom 1</td><td>kolom 2</td><td>kolom 3</td><td>kolom 4</td></table></body></html>
31
Pembuatan Tabel
32
Untuk membuat baris cell : <tr>
Untuk title tabel : <caption>
Pembuatan Tabel – Cont. 1
<body><table border="1"><caption>Creating Table</caption><tr> <td>cell 1a</td>
<td>cell 1b</td></tr><tr> <td>cell 2a</td>
<td>cell 2b</td></tr></table></body>
33
Pembuatan Tabel – Cont. 1
34
Pemformatan Tabel
Perataan tabel :
1. align (center, justify, left, right).
2. valign (baseline, top, middle, bottom)
Lebar tabel : width=“25%”
Warna cell : bgcolor=“red”
Spasi tabel :
cellspacing untuk memberi spasi antar sel
cellpadding untuk spasi dari border ke text dalam cell
35
Pemformatan Tabel – Cont. 1
Contoh :<body><table border=1 cellspacing=5 cellpading=10><tr align="left" valign="top"><td width="25%" bgcolor=red>cell 1a</td><td width="25%" bgcolor=yellow>cell 1b</td></tr><tr align="center" valign="baseline"><td>cell 2a</td><td>cell 2b</td></tr></table></body>
36
Pemformatan Tabel – Cont. 1
Contoh :
37
Tag Caption Caption dapat diartikan dengan judul
Contoh :
<head><title>Ahlan Wa Sahlan</title></head><table border="1"><caption>Daftar
Belanja</caption><tr><th>Lauk-Pauk</th><th>Sayuran</th>
</tr><tr><td>Ikan Mas</td><td>Wortel</td>
</tr></table>
38
Tag Caption
Contoh :
39
Tag Button
Contoh :<html><head><title>Ahlan Wa Sahlan</title></head><body><P>Klik simpan untuk simpandata</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.
40
Tag Button
Contoh :
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
42
Tag dd,dl,dt
Contoh :
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
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>
45
Tag dd,dl,dt
Contoh :
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>
47
Tag option
Contoh :
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>
49
Tag images
Contoh :
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>
51
Tag textarea
Contoh :