Scribd
Unggah
3 tayangan28 halaman

02 - HTML5

Dokumen ini menjelaskan tentang HTML sebagai bahasa markup untuk mendeskripsikan halaman web, termasuk struktur dasar dokumen HTML, penggunaan tag, elemen, dan atribut. HTML5 memperkenalkan fitur baru seperti penyederhanaan penulisan, elemen multimedia, dan API baru, serta dukungan oleh hampir semua browser modern. Terdapat juga contoh penggunaan tag untuk membuat elemen seperti daftar, gambar, dan video dalam HTML5.

Diunggah oleh

Ratna Ahsan
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
3 tayangan28 halaman

02 - HTML5

Dokumen ini menjelaskan tentang HTML sebagai bahasa markup untuk mendeskripsikan halaman web, termasuk struktur dasar dokumen HTML, penggunaan tag, elemen, dan atribut. HTML5 memperkenalkan fitur baru seperti penyederhanaan penulisan, elemen multimedia, dan API baru, serta dukungan oleh hampir semua browser modern. Terdapat juga contoh penggunaan tag untuk membuat elemen seperti daftar, gambar, dan video dalam HTML5.

Diunggah oleh

Ratna Ahsan
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 28

HTML5

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=“logo.jpg” 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” "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
 <link rel="stylesheet" href="style.css" type="text/css" />
 <script src="script.js” type=“text/javascript”></script>
 HTML5
 <!doctype html>
 <link rel="stylesheet" href="style.css” />
 <script src="script.js”></script>

17
Struktur Elemen di
HTML4

18
Struktur Elemen di
HTML5

19
Tipe baru pada Form
 datetime Contoh:
 <form action="" method="get">
datetime-local <label>Email: </label>
 date <input id="email" type="email" name="email"
placeholder="Email anda ..." /><br>
 month <label>Tanggal: </label>
 <input id="tanggal" type="date" name="tanggal" /><br>
week <label>Alamat Web: </label>
 time <input id="website" type="url" name="website" /><br>
<label>Level: </label>
 number <input id="level" type="range" min="1" max="10" step="1"
 range value="2" /><br>
<output name="result"></output>
 email <button type="submit">Submit Form</button>
 </form>
url
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 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</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="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

23
Menampilkan Youtube pada
html5
 Contoh
<iframe width="420" height="315”
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>
 Beberapa parameter dari video Youtube:
 autoplay
 autohide
 controls
 loop
 playlist

24
Tag yang dihapus di
HTML5

25
Belajar Lebih Lanjut?
 https://
www.w3schools.com/html/default.asp
 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
Terima Kasih

Anda mungkin juga menyukai