By: Ahmad SYAUQI Ahsan
1
HyperText Markup Language
HTML merupakan sebuah bahasa Markup yang
digunakan untuk mendeskripsikan
dokumen/halaman Web.
Bahasa Markup terdiri dari sekumpulan tag markup.
Dokumen/halaman HTML dideskripsikan
menggunakan tag-tag HTML.
Setiap tag HTML digunakan untuk mendeskripsikan
isi dokumen yang berbeda.
Web Browser bertugas untuk menterjemahkan tag-
tag HTML untuk kemudian ditampilkan di layar.
2
Tag HTML
Sebagian besar tag adalah berpasangan, terdiri dari start
tag (opening tag) dan end tag (closing tag). Misal:
<h1> ….. </h1>
<p> ….. </p>
<ul> ….. </ul>
End tag ditulis seperti start tag dengan tambahan “/”.
Contoh tag yang tidak berpasangan:
<img>
<br>
Tag tidak case-sensitive, HURUF BESAR dan huruf kecil
diperlakukan sama.
3
Elemen HTML
Sebuah dokumen HTML terdiri dari beberapa
elemen HTML.
Elemen HTML dibentuk menggunakan tag-tag
html.
Sebuah dokumen HTML dapat terdiri dari
beberapa elemen yang dibentuk dari tag yang
sama.
Sebuah elemen HTML dapat memiliki elemen
HTML yang lainnya (nested element).
4
Struktur dokumen HTML
Hanya bagian
<body> saja yang
akan ditampilkan
di layar.
<title> merupakan
bagian yang akan
ditampilkan pada
bagian atas dari
jendela browser
(lokasinya
berbeda antara
satu browser
dengan lainnya).
5
Atribut dari elemen HTML
Sebuah elemen HTML dapat memiliki atribut.
Atribut pada elemen HTML dapat digunakan untuk
memberikan informasi tambahan pada elemen tersebut,
seperti:
id untuk memberikan identitas pada elemen HTML
class menunjukkan nama kelas yang digunakan
Dan beberapa atribut lainnya, termasuk atribut untuk mengatur
tampilan dokumen.
Contoh:
<div id=“judul” class=“row”> ….. </div>
<img src=“[Link]” height=“400” width=“300”>
Dll.
6
Tag <html> ... </html>
Seluruh dokumen html harus berada di dalam tag
ini
Tag ini akan memberi tahu browser bahwa seluruh
dokumen yang berada diantara <html> dan
</html> merupakan dokumen html.
7
Tag <head> ... </head>
Merupakan tag yang digunakan untuk menuliskan header dari
dokumen html.
Di dalam tag ini biasanya berisi tag <title> yang digunakan
untuk menyimpan judul dokumen yang akan ditampilkan pada
title dari browser.
Didalam tag <head> ini juga sering diisi dengan tag <meta>
yang dapat digunakan untuk menambahkan informasi terkait
dokumen html seperti nama author dan isi dari dokumen.
Walaupun informasi pada tag <meta> tidak ditampilkan pada
browser, namun informasi ini penting untuk meningkatkan
peringkat dokumen web di mesin pencari (SEO).
<META name=”Author” contents=”Bocah Gunung”>
8
Tag <body> ... </body>
Semua yang akan ditampilkan pada browser harus diletakkan
di dalam tag ini.
Contoh dokumen html sederhana:
<html>
<head>
<title>Welcome to HTML</title>
</head>
<body bgcolor="laveder">
<p>Document HTML yang Pertama</p>
</body>
</html>
9
Block level element
Yang sering digunakah adalah tag <h1> sampai <h6>
Contoh:
...
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
...
10
Tag <p> ... </p>
Digunakan untuk menampilkan kalimat
berbentuk paragraph.
Contoh:
...
<h2>puisi sedih</h2>
<p>
melati harum baunya, kalau nggak ganti
percuma namanya
</p>
...
11
Tag <li> ... </li> (list item)
Digunakan untuk menampilkan data dalam bentuk
list, baik didalam unordered list (bullet) maupun
didalam ordered list (number)
Unordered list (bullet) menggunakan tag <ul> ...
</ul>
Ordered list (bullet) menggunakan tag <ol> ...
</ol>
12
Contoh List
Unordered List:
<ul>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ul>
Ordered List:
<ol type=“a” >
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ul>
13
Tag <div> ... <div>
Tag ini digunakan untuk mengelompokkan beberapa elemen dalam dokumen
html menjadi satu bagian.
Website modern banyak sekali memanfaatkan tag ini.
Contoh:
<div>
Divisi 1
<p>
Div tag digunakan untuk mengelompokkan group element.
</p>
</div>
<div align="right">
Divisi 2
<p>
Ini didalam devisi kedua,
di tulis dengan alignment kanan.
</p>
</div>
14
Versi HTML
15
What’s New in HTML5?
HTML5 memiliki banyak fitur baru dibandingkan dengan
versi sebelumnya:
Penyederhanaan penulisan
Semantic baru
Beberapa atribut baru untuk form
Beberapa elemen baru untuk gambar
Beberapa elemen baru untuk multimedia
Beberapa API (Application Programming Interface) baru
Dll
Untuk saat ini HTML5 sudah disupport oleh hampir
semua Browser modern.
16
Penyederhanaan Penulisan
HTML4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN” "[Link]
[Link]”>
<link rel="stylesheet" href="[Link]" type="text/css" />
<script src="[Link]” type=“text/javascript”></script>
HTML5
<!doctype html>
<link rel="stylesheet" href="[Link]” />
<script src="[Link]”></script>
17
Struktur Elemen di HTML4
18
Struktur Elemen di HTML5
19
Tipe baru pada Form
datetime Contoh:
datetime-local <form action="" method="get">
<label>Email: </label>
date <input id="email" type="email" name="email"
month placeholder="Email anda ..." /><br>
<label>Tanggal: </label>
week <input id="tanggal" type="date" name="tanggal" /><br>
time <label>Alamat Web: </label>
<input id="website" type="url" name="website" /><br>
number <label>Level: </label>
range <input id="level" type="range" min="1" max="10" step="1"
value="2" /><br>
email <output name="result"></output>
url <button type="submit">Submit Form</button>
</form>
20
<canvas>
Digunakan untuk menggambar grafik, on-the-fly, menggnakan
script (biasanya javascript)
Tag <canvas> hanya merupakan kontainer saja.
Contoh:
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link](0,0);
[Link](200,100);
[Link]();
</script>
21
<svg>
SVG = Scalable Vector Graphic
SVG digunakan untuk mendefinisikan grafik pada dokumen web.
SVG direkomendasikan oleh W3C (World Wide Web Consortium)
Contoh:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
22
<video>
Sebelum HTML5, tidak ada standart untuk menampilkan
video pada dokumen web
Sebelum HTML5, untuk menampilkan video pada
dokumen web memerlukan plug-in tambahan (misal:
flash)
Contoh:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
23
Menampilkan Youtube pada html5
Contoh
<iframe width="420" height="315”
src="[Link]
y=1">
</iframe>
Beberapa parameter dari video Youtube:
autoplay
autohide
controls
loop
playlist
24
Tag yang dihapus di HTML5
25
Belajar Lebih Lanjut?
[Link]
p
Google
Youtube
26
Tugas
1. Kerjakan semua latihan yang ada pada
presentasi ini !
2. Buat web Company Profile sebuah perusahaan*
menggunakan HTML5 saja** !
* Boleh perusahaan nyata ataupun khayalan
** Tidak boleh menggunakan bahasa PHP, Javascript, ataupun bahasa
pemrograman yang lain.
27