Bagaimana tutorial ini bekerja

Tutorial ini berusaha menjelaskan secara singkat dan padat tentang pembuatan halaman web dimulai dari pengenalan dokumen HTML5 yang merupakan konten dasar dari sebuah halaman web. Dalam tutorial ini juga disajikan tentang penggunaan CSS3 untuk menyusun layout dan disain halaman web dan dilanjutkan dengan pemanfaatan JQuery sebagai bahasa pemrograman HTML5 yang merupakan kumpulan kode dari Javascript untuk membuat halaman web menjadi lebih menarik dan interaktif.
Pada bagian selanjutnya akan disajikan secara detail elemen elemen penyusun halaman web dengan mengkombinasikan tag-tag HTML5, CSS3 dan JQuery baik berupa teks, formulir, tata letak, navigasi, animasi, grafis dan multimedia dengan beberapa contoh yang menarik dengan harapan memudahkan untuk memahami penggunaan HTML5, CSS3 dan JQuery sebagai suatu kerangka kerja halaman web. Pada bagian contoh ini dapat diubah, dieksekusi dan ditampilan hasilnya pada browser sehingga mempermudah untuk mencoba penggunaan tag HTML5, properti CSS3 dan perintah-perintah JQuery.
Pada bagian akhir halaman ini akan disajikan referensi dan sumber daya HTML5, CSS3 dan JQuery disertai contoh sebagai acuan untuk memperdalam pemahaman tentang HTML5, CSS3 dan JQuery.

Pengenalan HTML5

HTML (Hyper Text Markup Language) adalah bahasa markup (cara penulisan) yang digunakan untuk membuat dan mengatur sebuah halaman web. Sedangkan halaman WEB adalah halaman yang terletak di sebuah komputer (server) yang dapat dibaca oleh komputer lain (clien) di belahan dunia manapun dengan program web browser melalui jaringan internet. Web browser tidak menampilkan markup HTML, tetapi menggunakan markup tersebut untuk menentukan bagaimana isi dari file HTML ditampilkan kepada pengguna. HTML saat ini merupakan standar markup yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
Secara sederhana dapat diasumsikan bahwa membuat halaman web tidak jauh berbeda dengan membuat teks dokumen dengan aplikasi pengolah kata misalnya MS Word. Secara otomatis pengaturan dan penyusunannya harus mengikuti aturan yang telah ditentukan oleh aplikasi MS Word. Dokumen yang dibuat dengan aplikasi tersebut hanya dapat dibaca dengan dan benar baik oleh aplikasi MS Word dan apabila dibaca dengan aplikasi lain, tentunya isi yang ditampilkan tidak sesuai dengan yang diharapkan.
Demikian juga dengan dokumen HTML, aturan penulisan dan penyusunannya harus dirancang sesuai dengan aturan-aturan HTML agar dapat dibaca dengan baik oleh web browser. Ada beberapa browser yang populer saat ini, diantaranya adalah Chrome, Mozila Firefox, Opera, Safari dan Internet Expoler.

Elemen

Elemen adalah konten dasar dari sebuah dokumen HTML. Elemen bisa berupa teks, paragraf, formulir, tabel, gambar, audio, video ataupun animasi. Jadi dokumen HTML adalah dokumen yang berisi beberapa elemen dan akan menampilkan isi elemen pada web browser.

Penulisan :

<tag_awal attribut=”nilai_attribut”>konten<tag_akhir>

Tag adalah kode khusus yang menjelaskan maksud dari sebuah elemen. Lihat daftar tag.
Attribut adalah tambahan informasi tentang sebuah tag. Lihat daftar attribut.
Nilai attribut adalah informasi detail tentang sebuah attribut.
Konten adalah isi yang akan ditampilkan di web browser.

Contoh : Elemen paragraf dan attribut class.

<p class=”bab1”>ini paragraf bab 1</p>

Keterangan :
<p>                                        : tag awal
Class                                      : nama_attribut
“bab1”                                  : nilai attribut
Ini adalah paragraf           : konten
</p>                                      : tag akhir

Komentar

Dokumen HTML dapat berisi komentar untuk memberi catatan pada suatu elemen tertentu. Komentar ini tidak akan ditampilkan di browser. Komentar bisa terdiri dari beberapa baris.
Penulisan :

<!-- isi komentar -->

Contoh : Komentar tidak tampil di browser

<!-- Komentar ini tidak tampil di browser -->

<h1>Judul</h1>

Deklarasi Dokumen

Untuk mendeklarasikan jenis dokumen HTML5 digunakan sederhana tag berikut :

<!doctype html>

Meta Data

<meta nama_metadata=”nilai”>

Elemen Meta data digunakan untuk memberikan informasi tentang dokumen HTML. Elemen ini tidak akan ditampilkan di browser. Elemen meta biasanya berisi attribut yang digunakan untuk menentukan keterangan tentang halaman, kata kunci, penulis dokumen, terakhir diubah.
Contoh: Elemen Metadata

<head>

<meta charset=”UTF-8”>

<meta name=”keyword” content=”HTML5,CSS3,Tutorial”>

<meta author=”author” content=”mondrugz”>

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

Pengenalan CSS3

CSS (Cascading Style Sheets) digunakan untuk menentukan gaya dan tata letak dokumen HTML. HTML tidak pernah dimaksudkan untuk memformat dokumen HTML, tetapi hanya untuk menentukan isi dokumen HTML seperti judul, paragraf dan gambar. Untuk itu World Wide Web Consortium (W3C) menciptakan CSS. Saat ini CSS sudah berkembang sampai pada CSS3 dengan penambahan beberapa properti baru, diantaranya adalah :

Box Model
Backgrounds and Borders
Efek
Transformasi
Animasi
Beberapa Kolom Layout

Penulisan CSS3

Selektor {properti:nilai;}

Keterangan :
Selektor bisa berupa nama tag, id atau class yang akan diatur.
Properti adalah nama properti yang akan diatur.
Nilai adalah nilai dari properti.
Contoh :

p {color:red;}

p             : selektor
color      : properti
red         : nilai

Untuk menambahkan style CSS3 pada dokumen HTML5 dapat dilakukan dengan 3 cara yaitu :

Gaya Inline

Pengaturan properti CSS3 berada satu baris di dalam tag yang akan diatur style nya.
Contoh :
Mengatur CSS3 gaya Inline

<p style=”color:red”>paragraf ini berwarna merah</p>

Gaya Internal

Pengaturan properti CSS3 berada dalam satu dokumen dengan dokumen HTML5.
Contoh :
Mengatur CSS3 gaya Internal

<style>

P {color:red;}

</style>

<p>paragraf ini berwarna merah</p>

Gaya Eksternal

Pengaturan properti CSS3 berada pada dokumen CSS yang berbeda dengan dokumen HTML5.
Contoh :
Mengatur CSS3 gaya Eksternal (file CSS berada pada folder yang sama dengan dokumen HTML5

Dokumen CSS3 misal : gaya.css

P {color:red;}

Dokumen HTML5 misal : gaya.html

<link href=”gaya.css” rel=”stylesheet” type=”text/css”>

<p>paragraf ini berwarna merah</p>

Pengenalan jQuery

JQuery adalah kumpulan kode yang merupakan penyederhanaan dari fungsi-fungsi Javascript. Sedangkan javascript sendiri adalah bahasa pemrograman untuk dokumen HTML5. Dengan JQuery, banyak hal menarik yang dapat dilakukan pada dokumen HTML5, diantaranya adalah menyembunyikan dan menampilkan isi dari sebuah elemen.
Untuk menggunakan JQuery pada dokumen HTML5 ada 2 cara yang bisa dilakukan, yaitu :

Local Code

Download terlebih dahulu file pustaka jQuery
Letakkan pada tempat yang sama dengan dokumen HTML5
Tambahkan elemen berikut :

<script type="text/javascript" src="jQuery-1.11.1.min.js"></script>

CDN (Code Delivery Network)

Tambahkan elemen berikut :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jQuery/1.11.1/jQuery.min.js"></script>

Penulisan JQuery

$(‘selektor’).aksi()

Keterangan :
Selektor : bisa berupa tag, id atau class yang akan diprogram
Aksi : jenis aksi yang diberikan pada selektor

Contoh :
Menyembunyikan

  <script>

  $(documen).ready(function() {

    $(‘h1’).hide()

})

  </script>

<h1>Judul disembunyikan</h1>

Ringkasan

Web adalah dokumen HTML5
Dokumen HTML5 berisi elemen
Elemen terdiri dari tag awal, isi elemen, tag akhir dan attribut sebagai tambahan.
CSS3 digunakan untuk mengatur layout dan memformat dokumen HTML5
jQuery digunakan untuk pemrograman dokumen HTML5

Contoh
Struktur Lengkap Dokumen HTML5

<!doctype html>

<html>

<!-- elemen head yaitu elemen HTML5 yang tidak tampil di web browser -->

<head>

  <!-- metadata -->

  <meta charset=”UTF-8”>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- pengaturan css eksternal -->

  <link href=”gaya.css” rel=”stylesheet” type=”text/css”>

  <!-- pengaturan jQuery melalui CDN -->

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jQuery/1.11.1/jQuery.min.js"></script>

  <!-- pengaturan css internal -->

  <style>

p {

    color:red;

    background-color:green;

  </style>

  <script>

  $(documen).ready(function() {

    $(‘h1’).hide()

})

  </script>

</head>

<!-- elemen body yaitu elemen HTML5 yang tampil di web browser -->

<body>

  <h1>Judul</>

  <p>paragraf ini berwarna merah</p>

</body>

</html>

Teks

Teks adalah konten dasar dari sebuah dokumen HTML5. Untuk mengatur teks dalam dokumen HTML5 dapat digunakan tag-tag berikut ini :

Judul Paragraf dan Garis Horizontal

Contoh : Elemen Teks

<!--
<h1> mendefinisikan judul paragraf yang paling penting 
<h6> mendefinisikan judul paragraf yang kurang penting.
--> 
<h1>Heading 1</h1>                 <!-- Judul Paragraf 1 -->
<h2>Heading 2</h2>                 <!-- Judul Paragraf 2 -->
<h3>Heading 3</h3>                 <!-- Judul Paragraf 3 -->
<!-- <hr> Mendefinisikan garis horizontal sepanjang lebar layar -->
<hr>
<h4>Heading 4</h4>                 <!-- Judul Paragraf 4 -->
<h5>Heading 5</h5>                 <!-- Judul Paragraf 5 -->
<h6>Heading 6</h6>                 <!-- Judul Paragraf 6 -->

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraf dan Perpindahan Baris

Contoh : Paragraf dan Perpindahan Baris

<!-- <p> Mendefinisikan paragraf dengan pelipatan kata sesuai lebar layar -->
<p>Paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf </p>
 
<!-- <br> Mendefinisikan garis horizontal sepanjang lebar layar -->
<p>baris pertama <br> baris kedua</p>
<hr>

Paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf paragraf

baris pertama
baris kedua

Daftar

Contoh : Daftar

<!-- <ul> Mendefinisikan daftar tanpa urutan -->
<!-- <li> Mendefinisikan item daftar -->
<ul>
  <li>daftar 1</li>
  <li>daftar 2</li>
  <li>daftar 3</li>
</ul>
 
<!-- <ol> Mendefinisikan daftar dengan urutan -->
<!-- <li> Mendefinisikan item daftar -->
<ol>
  <li>daftar 1</li>
  <li>daftar 2</li>
  <li>daftar 3</li>
</ol>

daftar 1
daftar 2
daftar 3

daftar 1
daftar 2
daftar 3

Format Text

Contoh : Format Text

<!-- tag untuk mendefinisikan format teks -->
<b>Bold</b>                        <!-- Tebal -->
<i>Italic</i>                      <!-- Miring -->
<u>Underline</u>                   <!-- Garis Bawah -->
<hr>                               <!-- Garis Horizontal  -->
<s>Strikthrought</s>               <!-- Coretan -->
<em>Emphasis</em>                  <!-- Penekanan  -->
<strong>Strong</strong>            <!-- Kuat -->
<hr>
<code>Code</code>                  <!-- Kode -->
<var>Variabel</var>                <!-- Variabel  -->
<samp>Sample</samp>                <!-- Contoh  -->
<kbd>Keyboard</kbd>                <!-- Keyboard -->
<hr>
<tt>Teletype</tt>                  <!-- Nomor Telephone -->
<cite>Citation</cite>              <!-- Nama Kota -->
<dfn>Definition</dfn>              <!-- Penjelasan  -->
<del>Deleted</del>                 <!-- Penghapusan  -->
<ins>Inserted</ins>                <!-- Penyisipan  -->
<hr>
<small>Small</small>               <!-- Huruf kecil -->
<sup>Sup</sup>                     <!-- Huruf naik -->
<sub>Sub</sub>                     <!-- Huruf turun -->

Bold Italic Underline

~~Strikthrought~~ Emphasis Strong

Code Variabel Sample Keyboard

Teletype Citation Definition ~~Deleted~~ Inserted

Small ^Sup _Sub

Link

Link adalah teks atau gambar yang dapat diklik dan akan menuju ke halaman tertentu. Untuk membuat link digunakan tag dan attribut berikut :
Contoh : Membuat Link

<!-- 
tag <a>                                     mendefinisikan link
Attribut href=”www.mondrugz.blogspot.com”   mendefinisikan tujuan link saat diklik
Konten klik saya                            mendefinisikan konten yang tampil di browser
-->
 
<a href=”www.mondrugz.blogspot.com”>klik saya</a>

klik saya

Tabel

Tabel adalah teks yang ditampilan dalam bentuk baris dan kolom. Untuk membuat tabel dalam dokumen HTML5 dapat digunakan tag-tag berikut ini :
Contoh : Membuat Tabel

<!-- 
      Mendefinisikan tabel dengan lebar responsive 100% dari lebar layar
      bingkai = 1px, jarak antar cel = 5px, jarak isi cel = 10px
-->
<table width="100%" border="1" cellspacing="5" cellpadding="10">
<!-- Mendefinisikan judul tabel -->
  <caption>
    JUDUL TABEL
  </caption>


<!-- Mendefinisikan baris ke 1 dalam tabel -->
  <tr>   
<!--     
      Mendefinisikan judul kolom 
      lebar kolom 1 responsive = 15%
      lebar kolom 2 responsive = 40%
      lebar kolom 3 responsive = 45%
      Tulisan pada judul kolom <th> otomatis rata tengah
-->
    <th width="15%" scope="col">No</th>                      
    <th width="40%" scope="col">Nama</th>                      
    <th width="45%" scope="col">Gaji</th>                      

  </tr>


<!-- Mendefinisikan baris ke 2 dalam tabel -->
  <tr>
<!-- 
         Mendefinisikan cell pada baris ke 2 dalam tabel 
         Mendefinisikan gaya rata tengah pada kolom ke 1
         Tidak mendefinisikan gaya pada kolom ke 2
         Mendefinisikan gaya rata kanan pada kolom ke 3
--> 
    <td style="text-align: center">1</td>           
    <td>John Doe</td>
    <td style="text-align: right">1.800.000</td>           

  </tr>

  <tr>

    <td style="text-align: center">2</td>           
    <td>Mr. Wong</td>
    <td style="text-align: right">2.250.000</td>           

  </tr>

  <tr>
    <td style="text-align: center">3</td>           
    <td>Lynda</td>
    <td style="text-align: right">1.200.000</td>           

  </tr>

</table>

JUDUL TABEL
No	Nama	Gaji
1	John Doe	1.800.000
2	Mr. Wong	2.250.000
3	Lynda	1.200.000

Formulir Isian

Formulir Isian adalah bentuk isian yang digunakan untuk meminta masukan dari pengguna. Untuk memudahkan pengaturan agar terlihat rapi, formulir isian biasanya disusun didalam tabel. Untuk membuat formulir digunakan tag-tag sebagai berikut :
Contoh : Membuat Formulir dan Isian

      <!-- Mendefinisikan formulir dengan lebar responsive 80% dari lebar layar dan meletakkan ditengah layar -->
      <form style=”width:80%; margin:auto”>
      <table width="100%" border="0" cellspacing="1" cellpadding="1">
        <tr style="background-color:#0C3">
          <th scope="col">Label</th>
          <th scope="col">Input</th>
          <th scope="col">Type</th>
        </tr>
        <tr>
          <td>Name</td>


      <!-- Mendefinisikan isian berupa teks dengan isi awal “username” -->
          <td><input type="text" placeholder="user name"></td>
          <td>Teks</td>
        </tr>
        <tr>
          <td>Email</td>


      <!-- Mendefinisikan isian berupa email dengan isi awal “mondrugz@gmail.com” -->
          <td><input type="email" placeholder="mondrugz@gmail.com"></td>
          <td>Email</td>
        </tr>
        <tr>
          <td>Password</td>


      <!-- Mendefinisikan isian berupa password dengan isi awal “********” -->
          <td><input type="password" placeholder="********"></td>
          <td>Password</td>
        </tr>
        <tr>
          <td>Tempat Lahir</td>
          <td>


      <!-- Mendefinisikan isian berupa pilihan: “Malang”, “Surabaya”, “Jakarta” -->
            <select>
              <option value="Malang">Malang</option>
              <option value="Surabaya">Surabaya</option>
              <option value="Jakarta">Jakarta</option>
            </select>
          </td>
          <td>Select</td>
        </tr>
        <tr>
          <td>Tanggal Lahir</td>


      <!-- Mendefinisikan isian berupa tanggal -->
          <td><input type="date"></td>
          <td>Date</td>
        </tr>
        <tr>
          <td>Jam</td>


      <!-- Mendefinisikan isian berupa jam -->
          <td><input type="time"></td>
          <td>Time</td>
        </tr>
        <tr>
          <td>Jenis Kelamin</td>
      


      <!-- Mendefinisikan isian berupa pilihan:”Laki-laki” atau “Perempuan” -->
          <td>
            <input type="radio" name="jenis_kelamin" value="Laki-laki">Laki-laki
            <input type="radio" name="jenis_kelamin" value="Perempuan">Perempuan
            </td>
          <td>Radio Buttons</td>
        </tr>
        <tr>
          <td>Hoby</td>


      <!-- Mendefinisikan isian berupa pilihan: “Membaca” dan atau “Menulis” -->
          <td>
            <input type="checkbox" name="hoby" value="Membaca">Membaca
            <input type="checkbox" name="hoby" value="Menulis">Menulis
            </td>      
          <td>Check Box</td>
        </tr>
        <tr>
          <td>Warna Favorit</td>


      <!-- Mendefinisikan isian berupa pilihan warna -->
          <td><input type="color"></td>
          <td>Color</td>
        </tr>
        <tr>
          <td>Angka Favorit</td>


      <!-- Mendefinisikan isian berupa pilihan angka  -->
          <td><input type="number"></td>
          <td>Number</td>
        </tr>
        <tr>
          <td>Cari Sesuatu</td>


      <!-- Mendefinisikan isian berupa pencarian -->
          <td><input type="search"></td>
          <td>Search</td>
        </tr>
      </table>
      <h4>Catatan</h4>


      <!-- Mendefinisikan isian berupa teks atau beberapa baris kalimat -->
      <textarea style="width:99%; height:100px;" placeholder="Text Area"></textarea>
       
      </form>

Label	Input	Type
Name		Teks
Email		Email
Password		Password
Tempat Lahir		Select
Tanggal Lahir		Date
Jam		Date
Jenis Kelamin	Laki-laki Perempuan	Radio Buttons
Hoby	Membaca Menulis	Check Box
Warna Favorit		Color
Angka Favorit		Number
Cari sesuatu		Search

Catatan

Blok - Inline

Pada dasarnya dokumen HTML5 adalah kumpulan dari elemen-elemen.
Blok adalah elemen yang terletak pada baris baru: <h1>, <p>, <li> dsb
Inline adalah elemen yang terletak pada baris yang sama seperti : <b>, <i>, <u> dsb
Contoh : Blok dan Inline

<h1>Judul Paragraf</h1><p>Paragraf</p>

<b>tebal</b><i>miring</i><u>garis bawah</u>

Div - Span

Div dan Span digunakan untuk mendefinisikan sekumpulan elemen agar dokumen HTML5 lebih terstruktur dan mudah dipahami.
Div adalah sekumplan elemen yang terletak pada baris baru
Span adalah sekumplan elemen yang terletak pada baris yang sama
Contoh : Div dan Span

<div>Blok 1</div><div>Blok 2</div>

<div>Blok 3<span>Blok 4</span</div>

<span>Blok 5</span><span>Blok 6</span>

ID - Class

ID dan Class digunakan untuk mengidentifikasi elemen HTML5. Dengan ID dan Class elemen HTML5 dapat diperlakukan lebih lanjut dengan CSS3 atau jQuery.
ID adalah identifikasi unik. Artinya dalam dokumen HTML5, sebuah elemen hanya boleh memiliki satu ID. Sebagai ilustrasi, dalam sebuah kelas hanya ada satu orang dengan satu nama yang unik.
Class adalah identifikasi global. Artinya dalam dokumen HTML5, beberapa elemen boleh memiliki class yang sama. Sebagai ilustrasi, dalam sebuah kelas boleh berisi beberapa orang dengan kelas yang sama.
Contoh : ID dan Class

<div id=”header” class=”warna_merah”>

<div id=”footer” class=”warna_merah”>

Semantic

Sebelum HTML5, sebuah tag, div atau span dapat diberi id atau class sesuai keinginan pengembang. Tetapi dalam aturan HTML5, sekumpulan elemen sebaiknya diberi nama sesuai tag-tag baru sesuai kelompoknya agar strukturnya mudah dipahami dan lebih bermakna. Adapun tag-tag baru tersebut adalah <header>, <nav>, <section>, <article>, <aside>, <footer>
Contoh : Semantic

<header>

<!-- elemen-elemen dalam header -->

</header>

<nav>

<!-- elemen-elemen dalam nav -->

</nav>

<article>

<!-- elemen-elemen dalam article -->

</article >

<aside>

<!-- elemen-elemen dalam aside -->

</aside>

<footer>

<!-- elemen-elemen dalam footer -->

</footer>

Selector

Selektor adalah nama tag, id atau class yang digunakan untuk mengidentifikasi sebuah elemen dalam dokumen HTML5 untuk diperlakukan lebih lanjut dengan CSS3 internal atau eksternal dan pengaturan dengan jQuery. Sedangkan untuk pengaturan CSS3 inline tidak membutuhkan selektor.
Contoh : selektor

<header>

<!-- header adalah selektor dari tag header -->

  <div id=”logo”>Mondrugz</div>

<!-- div adalah selektor dari tag div -->

<!-- #logo adalah selektor dari id logo -->

  <div class=”slogan”>Maju terus pengembang web</div>

<!-- .slogan adalah selektor dari class slogan -->

</header>

Pengantar Web Modern