HTML 5 Heading

HTML Heading (Judul)

Heading dalam dokumen sangat penting HTML.

HTML Headings

Heading didefinisikan dengan <h1> sampai <h6> tag.

<h1> mendefinisikan heading yang paling penting. <h6> mendefinisikan heading yang tidak terlalu paling tidak penting.

<!DOCTYPE html> <html> <body> <h1>Ini heading 1</h1> <h2> Ini heading 2</h2> <h3> Ini heading 3</h3> <h4> Ini heading 4</h4> <h5> Ini heading 5</h5> <h6> Ini heading 6</h6> </body> </html>

Catatan: Browser secara otomatis menambahkan beberapa ruang kosong (margin) sebelum dan sesudah  masing-masing heading.

Apakah Heading Penting

Gunakan HTML heading untuk judul saja. Jangan gunakan heading untuk membuat teks besar atau tebal.

Mesin pencari menggunakan heading Anda ke struktur indeks dan isi dari halaman web Anda.

Karena pengguna dapat mengetahui halaman Anda dengan heading, oleh sebab itu adalah penting untuk menggunakan heading untuk menunjukkan struktur dokumen.

Heading H1 harus digunakan sebagai judul utama, diikuti dengan judul H2, H3, dan seterusnya.

Artikel Sebelumnya ....

Artikel Selanjutnya ....
 

HTML 5 Atribut

HTML Atribut

Atribut memberikan informasi tambahan tentang elemen HTML.
HTML Atribut

     * Elemen HTML memiliki atribut
     * Atribut memberikan informasi tambahan tentang elemen
     * Atribut selalu ditentukan dalam tag awal
     * Atribut memiliki pasangan nama / nilai seperti: name="value"
Contoh atribut

<a href="http://www.yupocom.co.cc">Ini adalah link</a>

HTML Link  didefinisikan dengan tag <a>. Alamat link ditetapkan dalam atribut href:
Nilai Atribut Selalu Ditutup Tanda Kutip

Nilai atribut harus selalu ditutup dengan tanda kutip.

Kutip ganda adalah yang paling umum, tetapi tanda kutip tunggal juga diperbolehkan.

Tip: Dalam beberapa situasi, ketika nilai atribut itu sendiri berisi tanda kutip, maka perlu menggunakan tanda kutip tunggal: name = 'John "shotgun" Nelson'

HTML Tip: Gunakan huruf kecil pada atribut

nama atribut dan nilai atribut bersifat case-insensitive.

World Wide Web Consortium (W3C) merekomendasikan nama atribut / nilai atribut ditulis dengan huruf kecil dalam HTML 4.

Versi yang lebih baru (X) HTML juga mengharuskan atribut di tulis dengan huruf kecil.

Artikel Sebelumnya .....

Artikel Selanjutnya .....

HTML 5 Elemen

HTML Elemen

Sebuah elemen HTML adalah segalanya dari tag awal sampai akhir tag:

* Tag Awal	Isi Elemen	*Tag Akhir
<p>	Ini adalah paragraf	</p>
<a href=”index.html”	Ini adalah link	</a>
<br />

* Tag awal sering disebut tag pembuka. Tag akhir sering disebut tag penutup.
Sintaks Elemen HTML

     * Sebuah elemen HTML dimulai dengan tag awal / tag pembuka
     * Sebuah elemen HTML diakhiri dengan tag akhir / penutup akhir tag
     * Isi elemen adalah segalanya antara tag awal dan tag akhir
     * Beberapa elemen HTML memiliki isi yang kosong
     * Elemen Kosong ditutup pada tag awal
     * Sebagian besar elemen HTML dapat memiliki atribut

Tip: Anda akan belajar tentang atribut dalam bab selanjutnya dari tutorial ini.
Elemen HTML bersarang

Sebagian besar elemen HTML dapat bersarang (dapat berisi elemen HTML lainnya).

Dokumen HTML terdiri dari elemen HTML bersarang.
Contoh Dokumen HTML

<!DOCTYPE html> <html> <body> <p>Ini adalah paragraph pertama saya.</p> </body> </html>

Contoh di atas mengandung 3 elemen HTML.
Menjelaskan Contoh HTML

elemen <p>:

<p>Ini adalah paragraf pertama saya.</p>

Elemen <p> mendefinisikan sebuah paragraf dalam dokumen HTML.
Elemen ini memiliki tag awal <p> dan tag akhir </ p>.
Isi elemen adalah: Ini adalah paragraf pertama saya.

elemen <body>:

<body> <p>Ini adalah paragraph pertama saya.</p> </body>

Elemen <body> mendefinisikan tubuh dari dokumen HTML.
Elemen ini memiliki tag awal <body> dan tag akhir </ body>.
Isi elemen adalah elemen HTML yang lain.

elemen <html>:

<html> <body> <p>Ini adalah paragraph pertama saya.</p> </body> </html>

Elemen <html> mendefinisikan dokumen HTML secara keseluruhan.
Elemen ini memiliki tag awal <html> dan tag akhir </ html>.
Isi elemen adalah elemen HTML lainnya (yang ada di elemen body).
Jangan Lupakan Tag Akhir

Beberapa elemen HTML mungkin akan ditampilkan dengan benar bahkan jika Anda lupa tag akhir:

<p>Ini adalah paragraph pertama saya.

Contoh di atas bekerja di hampir semua browser, karena tag penutup dianggap opsional.

Jangan lakukan hal diatas. Banyak elemen HTML akan menghasilkan hasil yang tidak diharapkan atau error jika Anda lupa tag akhir.
Elemen  Kosong HTML

Elemen HTML tanpa isi disebut elemen kosong.

<br> adalah elemen kosong tanpa tag penutup (tag <br> mendefinisikan satu baris).

Tip: Dalam XHTML, semua elemen harus ditutup. Menambahkan garis miring dalam tag awal, seperti  <br />, adalah cara yang tepat untuk menutup elemen kosong di XHTML (dan XML).
HTML Tip: Gunakan huruf kecil pada Tag

Tag HTML tidak case sensitif: <P> berarti sama dengan <p>. Banyak situs web menggunakan tag HTML dalam huruf besar.

World Wide Web Consortium (W3C) merekomendasikan huruf kecil dalam HTML 4, dan  XHTML.

Artikel Sebelumnya .....

Artikel Selanjutnya .....

HTML 5 EDITOR

Menulis HTML Menggunakan Notepad atau TextEdit

HTML dapat diedit dengan menggunakan editor HTML profesional seperti:

• Adobe Dreamweaver
• Microsoft Expression Web
• CoffeeCup HTML Editor
  

Namun, untuk belajar HTML kami merekomendasikan editor teks seperti Notepad (PC) atau TextEdit (Mac). Kami percaya menggunakan editor teks sederhana adalah cara yang baik untuk belajar HTML.

Ikuti 4 langkah di bawah ini untuk membuat halaman web pertama Anda dengan Notepad.
Langkah 1: Mulai Notepad

Untuk memulai Notepad :
Start
    All Programs
        Accessories
            Notepad

Langkah 2: Edit HTML Anda dengan Notepad

Ketik kode HTML Anda ke Notepad Anda:




Langkah 3: Simpan HTML Anda

Pilih Save as .. dalam menu file di Notepad.

Bila Anda menyimpan file HTML, Anda dapat menggunakan extension htm atau html. Tidak ada perbedaan, itu sepenuhnya terserah Anda.

Simpan file dalam satu folder.

Langkah 4: Jalankan HTML di Browser Anda

Memulai browser web Anda dan buka file html Anda dari menu, Open File, atau hanya menelusuri folder dan double-klik file HTML Anda.

Hasilnya akan terlihat seperti ini:

Artikel Sebelumnya .....

Artikel selanjutnya .....

HTML 5

HTML 5 <!DOCTYPE>

Dalam HTML 5 hanya ada satu Deklarasi  <!DOCTYPE>, dan itu sangat sederhana:

<!DOCTYPE html>

Minimum HTML 5 Dokumen

Di bawah ini adalah dokumen HTML 5 yang sederhana, dengan minimum tag yang dibutuhkan:

<!DOCTYPE html> <html> <head> <title>Judul Dokumen</title> </head> <body> Isi Dokumen ...... </body> </html>

HTML 4.01 Strict

DTD ini berisi semua elemen HTML dan atribut, tapi TIDAK TERMASUK presentasional atau elemen usang (seperti font). Framesets tidak diperbolehkan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional
DTD ini berisi semua elemen HTML dan atribut, TERMASUK presentasional atau elemen usang (seperti font). Framesets tidak diperbolehkan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Ini sama dengan DTD HTML 4.01 Transitional, namun memungkinkan penggunaan Frameset.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML Strict 1.0

DTD ini berisi semua elemen HTML dan atribut, tapi TIDAK TERMASUK presentasional atau elemen  usang (seperti font). Framesets tidak diperbolehkan. Markup juga harus ditulis sebagai well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Transitional 1.0

DTD ini berisi semua elemen HTML dan atribut, TERMASUK elemen presentasional (seperti font). Framesets tidak diperbolehkan. Markup juga harus ditulis sebagai well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

Ini sama dengan DTD XHTML 1.0 Transitional, namun memungkinkan penggunaan Frameset.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

Ini sama dengan DTD XHTML 1.0 Strict, tetapi memungkinkan Anda untuk menambahkan modul (misalnya untuk memberikan dukungan ruby untuk bahasa Asia Timur).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Deklarasi <!DOCTYPE> didukung di semua browser.


Definisi dan Penggunaan

Deklarasi <!DOCTYPE>  harus menjadi hal yang pertama dalam dokumen HTML 5 Anda, sebelum tag <html>.
Deklarasi <!DOCTYPE>  bukanlah tag HTML , Itu adalah instruksi ke web browser tentang versi HTML pada halaman  yang ditulis.
Dalam HTML 4.01, semua Deklarasi <!DOCTYPE> memerlukan referensi untuk DTD, karena HTML 4.01 didasarkan pada SGML.

HTML 5 tidak didasarkan pada SGML, dan karenanya tidak memerlukan referensi ke DTD.
Tips dan Catatan

Tip: Selalu tambahkan Deklarasi  <!DOCTYPE> untuk dokumen HTML Anda, sehingga browser tahu apa jenis dokumen yang dimaksud.

Catatan: tag <!DOCTYPE> tidak memiliki tag akhir.
Tip: Deklarasi <!DOCTYPE> TIDAK case sensitive.

Artikel Sebelumnya ....

Artikel Selanjutnya .....

HTML 5 Tutorial

HTML5 adalah generasi berikutnya dari HTML

Apakah HTML5?

HTML5 akan menjadi standar baru bagi HTML.

Versi sebelumnya dari HTML, HTML 4.01, tahun 1999 dan Web telah berubah banyak sejak itu.

HTML5 masih terus dikembangkan. Namun, banyak browser yang telah mendukung elemen HTML5 baru dan API.
Versi HTML
Sejak awal pengembangan web, ada banyak versi HTML:

Versi	Tahun
HTML	1991
HTML +	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.1	1999
XHTML 1.0	2000
HTML 5	2012
XHTML 5	2013

Bagaimana Memulai HTML5?

HTML5 merupakan kerjasama antara World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG).

WHATWG bekerja untuk web dan aplikasi, dan W3C bekerja untuk XHTML 2.0. Pada tahun 2006, mereka memutuskan untuk bekerja sama dan menciptakan sebuah versi baru dari HTML.

Beberapa aturan untuk HTML5 :

• Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
• Mengurangi kebutuhan untuk plugin eksternal (seperti Flash)
• Lebih baik penanganan kesalahannya
• Lebih markup untuk menggantikan scripting
• HTML5 merupakan perangkat independen
• Proses pengembangan harus dilihat oleh publik

Fitur Baru - HTML5

Beberapa fitur baru yang paling menarik di HTML5:

• Unsur <canvas> untuk menggambar 2D
• Elemen <video> dan elemen <audio> untuk media pemutaran video dan audio
• Dukungan untuk penyimpanan lokal
• Spesifikasi unsur-unsur konten baru, seperti <article>, <footer>, <header>, <nav>,<section>
• Bentuk kontrol baru, seperti kalender, tanggal, waktu, email, url, search

Browser yang mendukungan untuk HTML5

HTML5 belum menjadi standar resmi, dan tidak ada browser yang memiliki dukungan HTML5 secara penuh.

Tapi semua browser utama (Safari, Chrome, Firefox, Opera, Internet Explorer) terus menambahkan fitur HTML5 baru untuk versi terbaru mereka.

Artikel Selanjutnya .....

CSS 3 TUTORIAL

CSS TUTORIAL

Apa yang Harus Sudah Anda Ketahui ???

Sebelum melanjutkan, anda harus memiliki pemahaman dasar HTML atau  XHTML

Apa itu CSS?

•  CSS singkatan dari Cascading Style Sheets

• Styles mendefinisikan bagaimana menampilkan elemen HTML

• Styles ditambahkan ke HTML 4.0 untuk memecahkan masalah

• Style Sheets Eksternal dapat menyimpan banyak pekerjaan

• Style Sheets Eksternal disimpan dalam file CSS

• Styles Mengatasi Masalah Besar.

HTML tidak pernah dimaksudkan untuk berisi tag untuk memformat dokumen. HTML dimaksudkan untuk menentukan isi dari dokumen, seperti:

Ini adalah heading

Ini adalah sebuah paragraf.

Ketika tag seperti , dan atribut warna ditambahkan ke spesifikasi HTML 3.2, itu memulai sebuah mimpi buruk bagi pengembang web. Pengembangan situs web yang besar, di mana font dan informasi warna yang ditambahkan ke setiap halaman, menjadi proses yang panjang dan mahal.

Untuk mengatasi masalah ini, World Wide Web Consortium (W3C) menciptakan CSS.

Dalam HTML 4.0, semua format bisa dihapus dari dokumen HTML, dan disimpan dalam file CSS yang terpisah.

Semua browser mendukung CSS hari ini.

CSS Menyimpan Banyak Pekerjaan !

CSS mendefinisikan BAGAIMANA elemen HTML harus ditampilkan. Styles biasanya disimpan dalam file css eksternal. Style sheet eksternal memungkinkan Anda untuk mengubah tampilan dan tata letak dari semua halaman di situs Web, hanya dengan mengedit satu file tunggal!

Artikel Selanjutnya .....