• Solo Great Sale

    Solo Great Sale Powered By Circle Card 2015

  • Solo Great Sale

    Solo Great Sale Powered By Circle Card 2015

  • Oracle Java Magazine

    As Cover of Oracle Java Magazine March/April 2012 issue

  • Launching jDuchess Indonesia

    Gunadarma University 2011

    www.jduchess.or.id

  • Launching jDuchess Indonesia

    Gunadarma University 2011

    www.jduchess.or.id

  • Launching Java 7

    Binus University 2011

  • Eclipse Democamp

    Microsoft Indonesia 2011

  • Oracle Academy

    SMK PGRI 3 Malang 2010

  • Launching JENI 2.0

    ITB Bandung 2012

  • Oracle Academy

    SMK PGRI 3 Malang 2010

  • Java and Android Roadshow

    SMK PGRI 3 Malang 2012

  • Oracle Academy

    SMK PGRI 3 Malang 2010

  • Launching JENI 2.0

    ITB Bandung 2012

  • Oracle Academy

    SMK PGRI 3 Malang 2011

  • Java and Android Roadshow

    SMK Plus Darussalam Kediri 2012

  • Oracle Academy Seminar

    LIKMI Bandung, 2012

  • Oracle Academy Seminar

    Indonesia University, 2012

  • Seminar Android

    Universitas Budi Luhur 2010

  • Java and Android Roadshow

    SMK Hasan Kafrawi Jepara 2012

  • Sosialisasi Kurikulum 2013

    LPMP Surabaya 2013

  • IOSA

    Indonesia Open Source Award 2011

  • Java Training

    SMKN 02 Sukabumi 2010

  • Sosialisasi Kurikulum

    SMKN 01 Tulungagung 2011

  • Sosialisasi Kurikulum 2013

    LPMP Surabaya 2013

Tuesday, December 6, 2011

Posted by Netty Herawaty
| 11:37 AM
Untuk memperdalam penggunaan HTML5 dalam desain web, diperlukan pemahaman tentang struktural yang ada pada HTML5. Perlu diketahui setiap elemen memiliki pasangan masing-masing misal : <head>...</head> , <body>...</body> .

Untuk struktur secara umum masih sama dengan HTML versi sebelumnya
<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<title>Struktur HTML 5</title>

</head>

<body>

…

</body>

</html>

Ada beberapa tag baru sesuai dengan fitur dimiliki HTML 5. Penjelasan mengenai fitur baru ini bisa dibaca pada postingan saya sebelumnya .

<header>

Sering digunakan sebagai header atau bagian atas dalam halaman html, digunakan untuk menempatkan logo, judul dari website dan navigasi. Header juga bisa diletakkan diantara <section> untuk menandakan judul dari sebuah section
<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<title>Struktur HTML 5</title>

</head>

<body>

<header>

...

</header>

</body>

</html>

<section>

Elemen yang digunakan untuk mengelompokkan beberapa elemen yang sejenis, misalnya jika  kita  akan menampilkan  beberapa  artikel   dalam  satu  halaman,  maka  bisa  menggunakan  tag section.
<!DOCTYPE html>
<html>
<head>
 <meta charset=”utf-8”>
 <title>Struktur HTML 5</title>
</head>
<body>
 <section>
  <h1>HTML 5</h1>
   <section>
    <h1>Tentang</h1>
    <p>HTML 5 adalah pengembangan dari versi sebelumnya.....</p1>
   </section>
 </section>
</body>
</html>

<nav>

Elemen yang digunakan untuk menampilkan menu navigasi. <nav> dapat digunakan diluar atau di dalam elemen lainnya seperti <aside>, <header> atau <footer>
<!DOCTYPE html>
<html>
<head>
<title>Struktur HTML 5</title>
</head>
<body>
<nav> 
<ul> 
<li><a href="#">Beranda</a></li> 
<li><a href="#">Tentang</a></li> 
<li><a href="#">Kontak</a></li> 
</ul> 
</nav>
</body>
</html

<article>

Tag ini digunakan untuk menampilkan satu artikel penuh dalam halaman html, artikel terdiri dari judul, sub judul, catatan dan deskripsi. Berikut contoh penggunaan <article> pada html.
<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<title>Struktur HTML 5</title>

</head>

<body>

<section>

<h1>Article Terbaru</h1>

<article>

<h2>Apa Kelebihan HTML 5 ?</h2>

<p>HTML 5 memiliki beberapa fitur baru.....</p1>

</article>

</section>

</body>

</html>

<aside>

Tag ini lebih sering digunakan sebagai pengganti div sidebar, digunakan untuk mendefinisikan sidebar pada halaman html. Untuk menggunakannya dapat menggunakan kode <aside> … </aside>
<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<title>Struktur HTML 5</title>

</head>

<body>

<section>

<h1>Navigasi</h1>

<aside>

<ul>

<li><a href="#">Beranda</a></li>

<li><a href="#">Tentang</a></li>

<li><a href="#">Kontak</a></li>

</ul>

</aside>

</section>

</body>

</html>

<footer>

Tag  ini  sering  digunakan  pada  bagian  bawah  tampilan  html,  dan  digunakan  untuk menampilkan informasi copyright, author atau navigasi. Di bawah ini merupakan contoh kode dari penggunaan footer.
<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<title>Struktur HTML 5</title>

</head>

<body>

<footer>

Copyright © 2011 Nety Herawaty. All rights reserved.

</footer>

</body>

</html>

Reactions: