Deklarasi DOCTYPE untuk HTML5 sangat sederhana:
<!DOCTYPE html>
Encoding karakter (charset) deklarasi juga sangat sederhana:
<meta
charset="UTF-8">
HTML5 contohnya:
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> judul halaman web</title>
</head>
<body>
isi dari halaman web tersebut...
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title> judul halaman web</title>
</head>
<body>
isi dari halaman web tersebut...
</body>
</html>
2. Membuat Skrip Struktur Umum HTML
<!DOCTYPE html>
<html>
<head>
<title>Web Warung Tegal</title>
<style type="text/css">
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
</div><!-- .wrapper -->
</body>
</html>
3. Membuat Elemen Article
<section class="courses">
<article>
<figure>
<img src="images/soto.jpg" alt="soto" />
<figcaption>Soto Indonesia</figcaption>
</figure>
<hgroup>
<h2>Soto Ayam</h2>
<h3>Makanan Berkuah</h3>
</hgroup>
<p>Soto ayam adalah makanan khas Indonesia yang berupa
sejenis sup ayam dengan kuah yang berwarna kekuningan.</p>
</article>
<article>
<figure>
<img src="images/pecel.jpg" alt="pecel" />
<figcaption>Pecel Indonesia</figcaption>
</figure>
<hgroup>
<h2>Masakan Pecel</h2>
<h3>Makanan dengan Bumbu Kacang</h3>
</hgroup>
<p>Pecel adalah makanan yang menggunakan bumbu sambal
kacang sebagai bahan utamanya yang dicampur dengan aneka jenis sayuran.</p>
</article>
</section>
Elmen-elemen dalam HTML5
HTML5 mempunyai struktur elemen tambahan antara lain:| Tag | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <article> | Defines an article in the document | ||||||||||||
| <aside> | Defines content aside from the page content | ||||||||||||
| <bdi> | Defines a part of text that might be formatted in a different direction from other text | ||||||||||||
| <details> | Defines additional details that the user can view or hide | ||||||||||||
| <dialog> | Defines a dialog box or window | ||||||||||||
| <figcaption> | Defines a caption for a <figure> element | ||||||||||||
| <figure> | Defines self-contained content, like illustrations, diagrams, photos, code listings, etc. | ||||||||||||
| <footer> | Defines a footer for the document or a section | ||||||||||||
| <header> | Defines a header for the document or a section | ||||||||||||
| <main> | Defines the main content of a document | ||||||||||||
| <mark> | Defines marked or highlighted text | ||||||||||||
| <menuitem> | Defines a command/menu item that the user can invoke from a popup menu | ||||||||||||
| <meter> | Defines a scalar measurement within a known range (a gauge) | ||||||||||||
| <nav> | Defines navigation links in the document | ||||||||||||
| <progress> | Defines the progress of a task | ||||||||||||
| <rp> | Defines what to show in browsers that do not support ruby annotations | ||||||||||||
| <rt> | Defines an explanation/pronunciation of characters (for East Asian typography) | ||||||||||||
| <ruby> | Defines a ruby annotation (for East Asian typography) | ||||||||||||
| <section> | Defines a section in the document | ||||||||||||
| <summary> | Defines a visible heading for a <details> element | ||||||||||||
| <time> | Defines a date/time | ||||||||||||
| <wbr> | Defines a possible line-break |
referensi :
http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/
http://www.w3schools.com/html/html5
0 komentar:
Posting Komentar