amikom jogja

Minggu, 03 Mei 2015

BELAJAR HTML 5 BAGI PEMULA

                 

                    Belajar Mudah:Dasar-dasar HTML 5





Belajar Mudah Dasar-dasar HTML5- yang akan Kaji Tekno bahas kali ini adaalah pengenalan dasar-dasar HTML5,Penasaran? Oke,simak berikut ini..

Belum mengetahui dengan jelas apa itu HTML5? Nah mungkin bagi yang sudah ahli pasti sudah tahu banget apa itu HTML5. Bagi yang pemula jangan bersedih, Kaji Tekno akan menjelaskan dengan bahasa yang mudah dimengerti.

Penjelasan HTML5

Adanya versi HTML terbaru yaitu versi 5, dan di sebutlah HTML5 itu bertujuan untuk mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya. 
Selain itu, HTML5 juga membawa fungsi-fungsi yang baru seperti: 

1. Element

article aside audio canvas command datalist details embed figcaption figure footer header hgroup keygen mark meter nav output progress rp rt ruby section source summary time video 

2. Input Type pada Form

dates times email url search 

3. Attribut

Ping (pada a dan area), Charset (pada meta), Async (pada script) Di sini Kaji Tekno akan menjelaskan kepada kawan  beberapa fungsi baru yang menarik seperti :
<canvas> – Element atau tag ini memiliki fungsi untuk menampilkan kertas gambar sehingga pengguna dapat menggunakan canvas untuk menggambar ataupun menulis bagaikan kertas biasa tanpa menggunakan plugin seperti Java.

<audio><video> – Bila kita ingin menampilkan video ataupun audio pada website kita maka kita akan menggunakan pllugin seperti adobe dengan format .swf, .fla dan .flv. Tetapi dengan menggunakan HTML5, kita tinggal menggunakan tag


Selain terdapatnya fungsi-fungsi HTML5 yang terbaru, HTML5 juga memberikan beberapa keringanan seperti pada bagian pertama/awal file HTML ,kita harus menulis coding “DOCTYPE” yang panjang. 

Pada HTML5, DOCTYPE dapat ditulis lebih ringkas <!DOCTYPE html> mudah bukan?

Selain itu, coding CSS dan Javascript pada HTML5 tidak perlu lagi menulis seperti type=text/css dan type=text/javascript 
Namun dapat dituliskan seperti dibawah ini : 
<style>
* { margin:0px; padding:0px;}</style>
<script>
// Fungsi JavaScript</script>


HTML5 pun kali ini menghilangkan beberapa tag ataupun element yang jarang sekali dipakai dan digantikan oleh CSS seperti berikut :

acronym applet basefont big center dir font frame frameset isindex noframes s strike tt uacronym applet basefont big center dir font frame frameset isindex noframes s strike tt u 
HTML5 telah menyediakan banyak fungsi baru dan berbagai kemudahan, namun apakah browser kita sudah mendukung HTML5 canggih ini?Kawan,mayoritas browser yang terkenal seperti Firefox, Opera, Safari dan Chrome dan lain-lain telah mendukung HTML5 terkecuali untuk InternetExplorer. 

Struktur Dasar HTML5

Nah, setelah kawan Kaji Tekno membaca penjelasan HTML5 di atas, sekarang Kaji Tekno akan berbagi struktur dasar HTML5 ya kawan, berikut struktur nya : 
<!DOCTYPE HTML>

<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      Judul Website
    </title>
  </head>
  
  <body>
    
    <header>
      <h1>Logo / Judul Website</h1>
      <nav>
        <ul>
          <li>
            Navigasi Menu
          </li>
        </ul>
      </nav>
    </header>
    
    <section>
      
      <article>
        <header>
          <h2>
            Judul Artikel
          </h2>
          <p>
            Tanggal Posting
            <time datetime="2009-09-04T16:31:24+02:00">
              September 4th 2009
            </time>
            oleh
            <a href="#">
              Penulis/Admin
            </a>
            - 
            <a href="‪#‎comments‬">
              Jumlah Komentar
            </a>
          </p>
        </header>
        <p>
          Isi Artikel ..
        </p>
      </article>
      
      <article>
        <header>
          <h2>
            Judul Artikel
          </h2>
          <p>
            Tanggal Posting
            <time datetime="2009-09-04T16:31:24+02:00">
              September 4th 2009
            </time>
            oleh
            <a href="#">
              Penulis/Admin
            </a>
            - 
            <a href="‪#‎comments‬">
              Jumlah Komentar
            </a>
          </p>
        </header>
        <p>
          Isi Artikel ..
        </p>
      </article>
      
    </section>
    
    <aside>
      <h2>
        Judul Bilah Kiri / Sidebar!
      </h2>
      <p>
        Isi Konten / Widget ..
      </p>
    </aside>
    
    <footer>
      <p>
        Copyright 2014 - <b>Judul Website</b>
      </p>
    </footer>
    
  </body>
  
</html>

Ternyata Mudah Belajar Dasar-dasar HTML5

Nah,Bagaimana? Mudah bukan belajar dasar-dasarnya HTML5? Oke ikuti postingan menarik Kaji Tekno lainnya untuk menambah wawasan kawan-kawan.
referensi:
















Diposting oleh di Tidak ada komentar:
Langganan: Komentar (Atom)