Scribd
Unggah
24 tayangan20 halaman

Pertemuan4 - HTML

Diunggah oleh

Re Roll
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 PDF, TXT atau baca online di Scribd
24 tayangan20 halaman

Pertemuan4 - HTML

Diunggah oleh

Re Roll
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 PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 20

Wahyu Widodo, S.Kom.,M.

Kom

Web Desain
Pengantar Web Service
Sub Topic Chapter 4 :
• HTML History
• Semantic Layout
• HTML 6 Features

Web Desain
HTML History
Pengantar Web Service

Sumber : https://www.w3schools.com/html/html5_intro.asp
Web Desain
HTML (Hypertext Markup Language)
Pengantar Web Service
Struktur HTML 5

<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>

</body>
</html>
Web Desain
More HTML
Pengantar Web Service
Perbedaan Document Type :

HTML5
<!DOCTYPE html>

HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Web Desain
More HTML (2)
Pengantar Web Service
Informasi encoding :

HTML 4

<meta http-equiv="Content-
Type" content="text/html;charset=utf-8">

HTML 5
<meta charset="utf-8">
Charset adalah kumpulan dari beberapa jenis pengkodean karakter baik huruf, angka,
symbol, dll. Untuk untuk saat ini pengkodean UTF-8 telah menjadi standarisasi untuk
pengkodean dalam system operasi, bahasa pemrograman, API, dan software.

Web Desain
More HTML (3)
Pengantar Web Service
Penambahan HTML5Shiv

Untuk mengenali element HTML 5 pada browser lama


(misal sebelum IE 9), maka perlu penambahan javascript
HTML5Shiv.

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
<![endif]-->

Web Desain
Tag, Attribute, Value
Pengantar Web Service
Tag
Void element: <input> <hr> <br>
Non void element:
<a>Link</a>

Atribut dan Nilai Atribut


<input name=“email” value=“[email protected]”>
Atribut : name, value
Nilai : email, [email protected]

Web Desain
Standard HTML Tags
Pengantar Web Service
• Heading • Form
<h1>, <h2>, .... <form>
• Table • Komponen Form
<table>, <tr>, <th>, <input>, <select>,
<td>, <tbody>, <thead> <textarea>
• Paragraph
• Link/Anchor
<p>
<a>
• Daftar
<ol>, <ul>, <li> • Layer Box
• Gambar <div>
<img> • Formatting
• Garis Horisontal <strong>, <em>, <sub>
<hr> • Line Break
<br>

Web Desain
New Tags in HTML5
Pengantar Web Service
• Structure • Inline Elements
• <section> - Pendefinisian bagian • <mark> - untuk menandai
dari halaman bagian penting
• <header> - Pendefinisian bagian
dari header • <time> - untuk menandai
• <footer> - Pendefinisian bagian waktu
dari footer • <meter> - digunakan
• <nav> - definisi untuk bagian untuk mengukur data
navigasi
dengan tingkatan tertentu
• <article> - definisi untuk bagian
artikel • <progress> - untuk
• <aside> - definisi untuk bagian melihat progess suatu
disamping konten utama proses sampai selesai
• <figure> - definisi untuk
merepresentasikan konten

Web Desain
New Tags in HTML5
Pengantar Web Service
• Dynamic Support
• <details>
– provides details about an element. This would be like tooltips in
non-Web applications.
• <datagrid>
– creates a table that is built from a database or other dynamic
source
• <menu>
– an old tag brought back and given new life allowing you to create a
menu system on your Web pages
• <command>
– defines actions that should happen when a dynamic element is
activated

Web Desain
New Tags in HTML5
Pengantar Web Service
• Dynamic Support
• <canvas> - an element to give you a drawing space
in JavaScript on your Web pages. It can let you add
images or graphs to tool tips or just create dynamic
graphs on your Web pages, built on the fly.
• <video> - add video to your Web pages with this
simple tag.
• <audio> - add sound to your Web pages with this
simple tag.

Web Desain
New Tags in HTML5
Pengantar Web Service
• New Form Input Types
• datetime • time
• datetime-local • number
• date • range
• month • email
• week • url
• figure
• figcaption

Web Desain
Deprecated Tags in HTML5
Pengantar Web Service
<acronym> <frameset>
<applet> <isindex>
<basefont> <noframes>
<big> <noscript>
<center> <s>
<dir> <strike>
<font> <tt>
<frame> <u>

Web Desain
HTML5: Better Semantics
Pengantar Web Service
<header>

<article>

<nav> <article> <aside>

<article>

<footer>

Web Desain
Migrasi ke layout Semantik
Pengantar Web Service

Sumber : https://www.w3schools.com/html/html5_migration.asp

Web Desain
Feature Baru HTML 6
Pengantar Web Service
• Automatic Image Resizing in the Browser
• Express Tag : bisa mendefinisikan tag sendiri.
misal : <logo> </logo>
• Dedicated Libraries : menghilangkan ketergantungan
dengan library jquery
• Integrated Camera : dapat diintegrasikan dengan
kamera. (image capture/video capture)
• Stronger microformat : merupakan standarisasi yang
digunakan untuk mendefinisikan informasi umum
seperti alamat, phone, etc
Sumber : https://www.htmlgoodies.com/beyond/reference/new-features-in-html6.html
Web Desain
Feature Baru HTML 6 (1)
Pengantar Web Service
• Dukungan CSS4 untuk graphics control
• Dukungan bluetooth
• Dukungan media penyimpan cloud
• Malware protection

Sumber : https://www.htmlgoodies.com/beyond/reference/new-features-in-html6.html
Web Desain
Source code
Pengantar Web Service

https://github.com/wahyusoft/html5

Web Desain

Anda mungkin juga menyukai