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 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>
12
<body>
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>
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 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.
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 :

PWEB HTML

  • 1.
  • 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  Kalopada 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>
  • 7.
  • 8.
    8 <html>  Setiap documentHTML 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 headerdari 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.
  • 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>
  • 12.
  • 13.
    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.
  • 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>
  • 16.
    16 Elemen dasar –Paragraph (p)
  • 17.
    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.
    18 Elemen dasar –list item (li)
  • 19.
    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.
    20 list item (li)- continued
  • 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>Ahlanwa 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.
  • 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  Divadalah 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.
  • 30.
    30 Pembuatan Tabel  Untukmembuat 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.
  • 32.
    32  Untuk membuatbaris 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.
  • 34.
    34 Pemformatan Tabel  Perataantabel : 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.
    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.
    36 Pemformatan Tabel –Cont. 1  Contoh :
  • 37.
    37 Tag Caption  Captiondapat 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.
  • 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.
  • 40.
  • 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
  • 42.
  • 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>
  • 45.
  • 46.
    46 Tag option  Tagyang 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.
  • 48.
    48 Tag images  Tagyang mempresentasikan gambar  Contoh : <head> <title>Ahlan Wa Sahlan</title> </head> <body> <img src="images/Tulips.jpg" height="70%" alt="Taman bunga Tulips" /> </body>
  • 49.
  • 50.
    50 Tag textarea  Tagyang 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.