Minggu, 10 November 2013

Cara Membuat Header atau Judul pada laman HTML

Judul termasuk hal penting dalam dokumen HTML.

Header / Kepala / Judul HTML
Judul didefinisikan dengan tag <h1> sampai dengan <h6>.

<h1> mendefinisikan judul yang paling penting. <h6> mendefinisikan judul yang paling tidak penting.
<h1> akan menampilkan tulisan judul yang paling besar. <h6> judul paling kecil. (jika tidak menggunakan css)

Contoh

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Coba lihat hasilnya »

This is a heading

Catatan: Browser secara otomatis menambahkan beberapa ruang kosong (margin) atau jeda sebelum dan sesudah judul.

Apakah Header Penting?
Gunakan header HTML hanya untuk judul saja. Jangan gunakan header untuk membuat teks agar lebih BESAR atau tebal, itu tidak dianjurkan.

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

Karena pengguna dapat skim halaman Anda dengan judul, itu penting untuk menggunakan judul untuk menunjukkan struktur dokumen.

H1 harus digunakan sebagai judul utama, diikuti oleh H2 judul, maka kurang penting judul H3, dan seterusnya.

HTML Garis
Tag <hr> menciptakan garis horizontal dalam sebuah halaman HTML.

Unsur jam dapat digunakan untuk konten terpisah:

Contoh

<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>

Coba lihat hasilnya »
This is a paragraph.

This is a paragraph.

This is a paragraph.
HTML Komentar
Komentar dapat dimasukkan ke dalam kode HTML untuk membuatnya lebih mudah dibaca dan dimengerti. Komentar diabaikan oleh browser dan tidak ditampilkan.

Komentar ditulis seperti ini:

Contoh



Catatan: Ada tanda seru setelah kurung buka, tetapi tidak sebelum kurung tutup.

Tip HTML - Cara Lihat Sumber HTML
Pernahkah Anda melihat halaman Web dan bertanya-tanya "Hei! Bagaimana mereka melakukan itu?"

Untuk mengetahuinya, klik kanan pada halaman dan pilih "View Source" (IE) atau "View Page Source" (Firefox), atau serupa bagi browser lainnya. Ini akan membuka jendela yang berisi kode HTML halaman.

Rabu, 06 November 2013

Atribut HTML

Atribut memberikan informasi tambahan tentang elemen HTML.

Atribut HTML
Elemen HTML dapat memiliki atribut
Atribut memberikan informasi tambahan tentang elemen
Atribut selalu ditentukan dalam tag awal
Atribut datang dalam pasangan nama / nilai seperti: nama = "nilai"
Atribut Contoh
HTML link didefinisikan dengan tag <a>. Alamat link ditentukan dalam atribut href:

Contoh

<a href="http://infokode.blogspot.com/">Ini adalah link</a>

Maka hasilnya »
Ini adalah link

Selalu Kutip Nilai Atribut
Nilai atribut harus selalu tertutup dalam tanda kutip.

Gaya tanda kutip ganda adalah yang paling umum, tapi gaya tanda kutip tunggal juga diperbolehkan.

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

HTML Tip: Gunakan Atribut huruf kecil
Nama atribut dan nilai atribut bersifat case-sensitive.

Namun, World Wide Web Consortium (W3C) merekomendasikan atribut huruf kecil / nilai atribut dalam HTML 4 rekomendasi mereka.

Versi yang lebih baru (XHTML) akan menuntut atribut huruf kecil.

HTML Atribut Referensi
Sebuah daftar lengkap atribut hukum untuk setiap elemen HTML tercantum dalam pos kami berikutnya: HTML Tag Referensi.

Di bawah ini adalah daftar dari beberapa atribut yang dapat digunakan pada setiap elemen HTML:

Attribute	Description
class	Menentukan satu atau lebih nama class untuk sebuah elemen (mengacu pada class dalam style sheet)
id	Menentukan id unik untuk sebuah elemen
style	Menentukan gaya inline CSS untuk elemen
title	Menentukan informasi tambahan mengenai elemen (ditampilkan sebagai tool tip)

Elemen HTML

Dokumen HTML didefinisikan oleh elemen HTML.

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

Awal tag *	Konten Elemen	Akhir tag *
<p>	Ini adalah paragraf	</p>
<a href="default.htm">	Ini adalah link	</a>
<br>

* Awal tag sering disebut tag pembuka. Tag akhir sering disebut tag penutup.

HTML Sintaks Elemen
Sebuah elemen HTML dimulai dengan tag awal / pembuka tag
Sebuah elemen HTML diakhiri dengan tag akhir / tag penutup
Isi elemen adalah segalanya antara awal dan tag akhir
Beberapa elemen HTML memiliki konten kosong
Elemen kosong ditutup pada tag awal
Elemen yang paling HTML dapat memiliki atribut
Tip: Anda akan belajar tentang atribut dalam bab berikutnya dari tutorial ini.

Elemen HTML Digabung
Elemen yang paling HTML dapat diulang (dapat berisi elemen HTML lainnya).

Dokumen HTML terdiri dari elemen HTML bersarang.

Contoh Dokumen HTML:

<!DOCTYPE html>
<html>

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

</html>

Contoh di atas berisi 3 elemen HTML.
Penjelasan 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: Ini adalah paragraf pertama saya.

Elemen <body> :

<body>
<p>Ini adalah paragraf pertama saya.</p>
</body>
Unsur <body> mendefinisikan tubuh dokumen HTML.
Elemen ini memiliki tag awal <body> dan tag akhir </body>.
Isi elemen elemen HTML antara lain (elemen <a> <p> <img> dan lain lain).

Elemen <html> :

<html>

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

</html>
Unsur <html> mendefinisikan seluruh dokumen HTML.
Elemen ini memiliki tag awal <html> dan tag akhir </html>.
Isi elemen elemen HTML lain (elemen body).

Jangan Lupakan Tag Akhir
Beberapa elemen HTML mungkin menampilkan dengan benar bahkan jika Anda lupa tag akhir:

<p>Ini adalah paragraf pertama
<p>Ini adalah paragraf pertama
Contoh di atas bekerja di hampir semua browser, karena tag penutup dianggap opsional saja.

Namun kami ingatkan jangan bergantung pada ini. Banyak elemen HTML akan menghasilkan hasil yang tidak diharapkan dan / atau kesalahan jika Anda lupa tag akhir.

Elemen HTML Kosong
Elemen HTML tanpa konten disebut elemen kosong.

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

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

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

Kenapa kami menggunakan tag huruf kecil semua? karena World Wide Web Consortium (W3C) merekomendasikan huruf kecil dalam HTML 4, dan tuntutan tag huruf kecil dalam XHTML.

Dasar - Dasar HTML

Jangan khawatir jika Anda belum belajar contoh menggunakan tag.
Anda akan belajar tentang semua ini dalam pos-pos berikutnya di blog yang mengupas tuntas HTML ini.

Pos HTML
Judul HTML didefinisikan dengan tag <h1> sampai <h6>.

Contoh

<h1>Ini adalah heading</h1>
<h2>Ini adalah heading</h2>
<h3>Ini adalah heading</h3>

Maka Hasilnya »

Ini adalah heading

Paragraf HTML
Paragraf HTML didefinisikan dengan tag pembuka <p> dan tag penutup </p>.

Contoh

<p>Ini adalah paragraph.</p>
<p>Ini adalah paragraph lainnya.</p>

Maka Hasilnya »
Ini adalah paragraph.
Ini adalah paragraph lainnya.

HTML Links (Tautan HTML)
HTML link didefinisikan dengan tag <a>.

Contoh

<a href="http://infokode.blogspot.com/">Ini adalah link</a>

Maka Hasilnya »
Ini adalah link
Catatan: Alamat link ditentukan dalam atribut href.

(Anda akan belajar tentang atribut dalam bab berikutnya dari tutorial blog ini).

Gambar HTML
Gambar HTML didefinisikan dengan tag <img>.

Contoh

<img src="http://4.bp.blogspot.com/-hDqCbE4BrCs/UmaSGzl_LXI/AAAAAAAAAPQ/mGwPSJhTgI4/s1600/nur+cilacap.jpg" width="197" height="200">

Maka Hasilnya »

Catatan: Nama file dan ukuran gambar disediakan sebagai atribut.
Tulisan » http://4.bp.blogspot.com/-hDqCbE4BrCs/UmaSGzl_LXI/AAAAAAAAAPQ/mGwPSJhTgI4/s1600/nur+cilacap.jpg adalah URL gambar (salah satu contoh alamat file gambar dalam direktori di internet).
kode width="?" gunanya untuk menetukan lebar gambar
kode height="?" gunanya untuk menetukan tinggi gambar

Langkah membuat file HTML

Gunakanlah Notepad untuk menulis HTML pertama anda
Sebenarnya file HTML dapat diedit dengan menggunakan editor HTML profesional seperti:

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

Cara Membuat
Ikuti 4 langkah berikut untuk membuat halaman web pertama Anda dengan Notepad.

Langkah 1: Jalankan Notepad
Untuk memulai Notepad kunjungi:

» Mulai
» All Programs
» Aksesoris
» Notes

Langkah 2: Mengedit HTML Anda dengan Notepad
Ketik kode HTML Anda ke Notepad Anda:

Langkah 3: Simpan HTML Anda
Pilih Simpan sebagai .. di menu file Notepad ini.

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

Simpan file dalam folder yang mudah diingat.

Langkah 4: Jalankan HTML di Browser Anda
Memulai browser web Anda dan buka file html Anda dari File, Open menu, atau hanya menelusuri folder dan double-klik file HTML Anda.

Hasilnya akan terlihat seperti ini:

Apa itu HTML?

Perhatikan deklarasi <!DOCTYPE html> adalah DOCTYPE untuk HTML5.

Apa itu HTML?

HTML adalah bahasa untuk mendeskripsikan halaman web.

HTML singkatan dari HyperText Markup Language
HTML adalah bahasa markup
Sebuah bahasa markup adalah seperangkat tag markup
Tag menjelaskan konten dokumen
Dokumen HTML berisi Tag HTML dan teks biasa
Dokumen HTML juga disebut halaman web

Tag HTML

HTML tag markup biasanya disebut tag HTML

Tag HTML adalah kata kunci (nama tag) dikelilingi oleh kurung sudut seperti <html>
Tag HTML biasanya datang dalam pasangan seperti <b> dan </b>
Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir
Tag akhir ditulis seperti tag awal, dengan garis miring sebelum nama tag
Mulai dan tag akhir juga disebut tag pembuka dan tag penutup
<tagname> konten </tagname>

Elemen HTML
"HTML tag" dan "elemen HTML" sering digunakan untuk menggambarkan hal yang sama.

Tapi tegasnya, elemen HTML adalah segalanya antara tag awal dan tag akhir, termasuk tag:

HTML Elemen:

<p> Ini adalah sebuah paragraf. </p>

Web Browser (Peramban Web)
Tujuan dari web browser (seperti Google Chrome, Internet Explorer, Firefox, Safari) adalah untuk membaca dokumen HTML dan menampilkan mereka sebagai halaman web.

Browser tidak menampilkan tag HTML, tapi menggunakan tag untuk menentukan bagaimana isi dari halaman HTML yang akan disajikan / ditampilkan kepada pengguna:

Struktur HTML Halaman
Di bawah ini adalah visualisasi dari struktur halaman HTML:

<html>

<body>

<h1>This a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

Versi HTML
Sejak hari-hari awal web, versi HTML terus berkembang:

Versi	Tahun
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

Deklarasi <!DOCTYPE>
Deklarasi <!DOCTYPE> membantu browser untuk menampilkan halaman web dengan benar.

Ada banyak dokumen yang berbeda di web, dan browser hanya dapat menampilkan halaman HTML 100% benar jika ia tahu tipe HTML dan versi yang digunakan.

Deklarasi Umum

HTML5

<!DOCTYPE html>

HTML 4.01

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

XHTML 1.0

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

Untuk daftar lengkap dokumen deklarasi tipe, kami akan bahas Referensi DOCTYPE pada post yang akan datang.

Pengenalan HyperText Markup Language

Untuk lebih mengenal html coba perhatkan lagi contoh berikut ini:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Penjelasan Contoh

Deklarasi DOCTYPE mendefinisikan tipe dokumen
Teks antara <html> dan </html> menjelaskan halaman web
Teks antara <body> dan </body> adalah isi halaman yang terlihat
Teks antara <h1> dan </h1> ditampilkan sebagai judul
Teks antara <p> dan </p> ditampilkan sebagai sebuah paragraf