PWEB HTML

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>

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>

13
Elemen dasar – Block Level
 Block level element:
terdapat 6 tingkatan, yaitu
H1 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>

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>

26

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>

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>

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>

39
Tag Button
 Contoh :
<html>
<head>
</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
Tag dd,dl,dt
 Contoh :
<head>
</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
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>
</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
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
Tag images
 Tag yang mempresentasikan gambar
 Contoh :
<head>
</head>
<body>
<img src="images/Tulips.jpg" height="70%" alt="Taman
bunga Tulips" />
</body>

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>

PWEB HTML

More Related Content

What's hot

Similar to PWEB HTML

More from Rakhmi Khalida, M.M.S.I

PWEB HTML