Baca Juga


Assalamualaikum pada pagi yang cerah ini saya akan melanjutkan tutorial yang sebelumnya sudah kita bahas bersama . Pada tutorial sebelumnya kita sudah belajar mengenai HTML Dasar , Namun Apa bedanya dengan HTML 5 ??? . Oleh karena itu kita akan bahas bersama 😉

Seperti biasa sebelum kita masuk kedalam inti dari materi ini . Ya kita harus kenal dahulu kan sama si HTML 5 ini . 


Pengertian HTML 5 
 HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web  Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat  ditulis dengan cara HTML ataupun XHTML. 

Nah jika anda sudah tau apa itu HTML 5 pastinya anda akan sedikit kebingungan mengenai perbedaan antara HTML dan HTML 5 kan ??? . Disini kita akan segera mengetahuinya 😉

Perbedaan HTML5 dan HTML

Guna mengetahui perbedaan antara kedua bahasa Hyper text Mark-up language (HTML) ini mari kita simak perbedaannya : [Data Bersumber Dari : www.pintarkomputer.info]

  1.  Audio dan video yang bukan bagian dari sebelumnya spesifikasi versi HTML, namun,  keduanya adalah bagian yang tidak terpisahkan dari spesifikasi HTML5.

  2. Vektor grafis juga merupakan bagian integral dari HTML5 seperti SVG dan kanvas sementara grafis vektor adalah mungkin dalam HTML dengan bantuan berbagai teknologi seperti VML, Silverlight, Flash, dll.

  3. Dalam HTML, cache browser dapat digunakan sebagai penyimpanan sementara. Dalam kasus HTML5, cache aplikasi, database web SQL, dan penyimpanan web digunakan.

  4. HTML tidak memungkinkan JavaScript untuk berjalan di web browser, berjalan di thread yang sama dengan antarmuka browser. HTML5 memungkinkan JavaScript untuk berjalan di latar belakang yang mungkin karena JS pekerja Web API di HTML5.

  5. HTML bekerja dengan lancar dengan semua browser lama sementara sebagian besar browser web modern telah mulai mendukung spesifikasi HTML5. browser ini meliputi: Firefox, Mozilla, Chrome, Opera, Safari, dll

Nah setelah anda mengetahui perbedaan antara HTML dan HTML 5 , sekarang saya rasa anda sudah siap untuk memulai mempraktikan materinya :



Persiapan Awal sebelum memulai Projek 


Untuk persiapan awal anda sebelum mempraktikan HTML 5 ini adalah anda tidak harus mempersiapkan apa - apa hehehehe . Karena HTML 5 ini sama aja kok dengan HTML dan dia (HTML 5) juga bahasa yang berorientasi pada sisi client 





Memulai Pembelajaran Awal HTML 5


Pada pembahasan yang perdana ini kita akan mengenal syntax - syntax dasarnya seperti :



  1. Bentuk dasar Dokumen HTML 5

  2. Tag - tag dasar dalam membuat elemen HTML 5

  3. Praktik langsung membuat layout website menggunakan HTML 5 dan CSS


Yosh kalau begitu langsung saja kita bahas yaaaa 


1. Bentuk Dasar Dokumen HTML 5

Pada dasarnya bentuk dasar Dokumen HTML 5 sama dengan HTML yang mengandung tag - tag :

<html></html>
<head></head>
<title></title>
<body></body>

Namun pada Bentuk HTML 5 ini pada bagian atas dari html 5 kita diharuskan menambahkan satu elemen tag lagi yaitu :

<!DOCTYPE HTML> 

Setelah kita tau bentuk - bentuknya kira - kira beginilah struktur dasar dokumen HTML 5 :

Struktur Dasar Dokumen HTML 5
     <!DOCTYPE HTML>
     <html>
     <head>
     <title> </title>
     </head>
     <body>

     </body>
     </html>

Setelah kita mengenal Struktur dasar dokumen html 5 ini , mari kita belajar tag / syntax dasar html 5 ini :

2. Syntax - syntax dasar HTML 5

Untuk syntax dasar dari HTML 5 sebenarnya banyak sekali namun saya hanya akan membahas syntax yang biasa di gunakan dalam pembuatan layout html 5 nya 

<header></header> 
Syntax ini berfungsi untuk memudahkan kita dalam membuat sebuah blok elemen header dalam sebuah dokumen lengkap html 

<nav></nav>
Syntax ini berfungsi untuk memudahkan anda dalam membuat sebuah menu dalam sebuah website 

<content></content>
Syntax yang satu ini berfungsi untuk memuat seluruh isi artikel dalam web anda 

<article></article>
Syntax ini sendiri berfungsi untuk memuat sebuah artikel dalam web anda

<aside></aside>
Jika anda ingin memiliki menu samping dari web anda , maka html 5 menyediakan syntax 
<aside> untuk keperluan anda 

<footer></footer>
Nah syntax ini adalah syntax penutup dalam sebuah dokumen lengkap HTML 5 

Oke setelah anda belajar beberapa syntax dasar dalam membuat web dengan HTML 5 pada bagian terakhir kita akan mempraktikan apa saja yang sudah anda pelajari 


3. Praktik langsung pembuatan Layout website Menggunakan HTML 5 dan CSS

Pada pembahasan yang terakhir mari kita buat sebuah layout web menggunakan html 5 dan juga css :

Silahkan anda tulis ataupun salin code html 5 nya 

Code HTML 5
<!DOCTYPE html>
<html>
<head>
<title>Techno Evolution</title>
   <link rel="stylesheet" type="text/css" href="style/style-index.css">
</head>
<body>
   <header>
    <h1>Techno Evolution</h1>
    <h2>Update Tutorial Seputar Dunia IT</h2>
   </header>

   <nav>
    <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Kontak</a></li>
    </ul>
   </nav>

   <div id="social">
    <a href="" style="text-decoration:none;"><div class="facebook">Facebook</div></a>
      <div style="margin-top:4px"></div>
    <a href="" style="text-decoration:none;"><div class="instagram">Instagram</div></a>
      <div style="margin-top:4px"></div>
    <a href="" style="text-decoration:none;"><div class="Google">Google</div></a>
      <div style="margin-top:4px"></div>
    <a href="" style="text-decoration:none;"><div class="Twitter">Twitter</div></a> 
   </div>

   <div id="cleaer"></div>

   <div id="slider">
    <center>
    <img src="img/0.png" width="600px"; height="250px;" id="gambar">
    <br>
    <caption>Belajar SEO Untuk Meningkatkan Trafik Website</caption>
    </center>
   </div>

   <main>
    <article>
    <section>
    <h2>Cara Membuat Website</h2>
    <p>Cara membuat website sangat mudah dan cepat</p>
    </section>

    <section>
    <h2>Belajar SEO | Teknik Penanaman Backlink</h2>
    <p>Belajar cara optimasi Website dengan backlink</p>
    </section>

    <section>
    <h2>Tutorial Seputar Adobe Flash</h2>
    <p>Belajar membuat game dengan Action Script 2.0</p>
    </section>
    </article>
   </main>

   <aside>
    <h2>Daftar Artikel Populer</h2>
    <a href="">Hacking</a>
    <a href="">Instagram</a>
    <a href="">Facebook</a>
    <a href="">Blogger</a>
    <a href="">Defacing</a>
   </aside>

   <footer>
    <p>Copyright | &copy; 2017 - Eki-Akmarullah</p>
   </footer>
</body>
</html>

Yosh setelah anda tuliskan code HTML 5 nya silahkan anda tulis lagi code css berikut ini:
Code Css

body {
font-family: 'Vedana', sans-serif;
font-size: 12px;
}

header , nav , main , aside, footer, #slider, #social {
border: 1px solid grey; margin: 5px; padding: 5px;
}

#social {
float: right;
width: 5%;
}

.facebook {
background-color: #365f9d;
color: #ffffff;
text-align: center;
height: 30px;
line-height: 30px;
}

.facebook:hover, .instagram:hover, .Google:hover, .Twitter:hover {
transition: height 0.5s;
height: 35px;
}

.instagram {
background-color: #e82b5c;
color: #ffffff;
text-align: center;
height: 30px;
line-height: 30px;
}

.Google {
background-color: #ec6a23;
color: #ffffff;
text-align: center;
height: 30px;
line-height: 30px;
}

.Twitter {
background-color: #2179cb;
color: #ffffff;
text-align: center;
height: 30px;
line-height: 30px;
}

#slider{
width: 50%;
margin: 0 auto;
}

#clear {
clear: both;
}

main {
float: left;
width: 60%;
}

aside {
float: left;
width: 30%;
}

footer {
clear: both;
}

footer p {
text-align: center;
}

Silahkan anda praktikan di rumah dan selamat belajar . Ya enaknya memakai HTML 5 ini code kita akan terlihat lebih rapi dan bersih tentunya , Buat kalian yang bingung atau pun punya pertanyaan komentar anda sangat saya nantikan 😊.