Editor HTML
HTML dapat diedit dengan menggunakan editor HTML profesional seperti:
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
Namun, untuk proses belajar, halaman HTML sebaiknya dibuat menggunakan teks editor sederhana seperti Notepad (PC), Notepad++, atau TextEdit (Mac).
Latihan.
Buatlah sebuah halaman HTML dengan teks editor kemudian buka dengan browser.
HTML Elements
Sebuah elemen HTML adalah segalanya dari tag awal sampai tag akhir:
| Tag Awal | Element content | Tag Akhir |
| <p> | this is a paragraf | </p> |
| <a href=”default.htm”> | this is a link | </a> |
| <br> |
*) Tag awal sering disebut tag pembuka. Tag akhir sering disebut tag penutup.
Sintaks Elemen HTML
Sebuah elemen HTML dimulai dengan start tag / tag pembuka
- Sebuah elemen HTML diakhiri dengan tag akhir / tag penutup
- Isi elemen adalah segalanya antara tag awal dan tag akhir
- Beberapa elemen HTML memiliki konten kosong
- elemen kosong ditutup pada tag awal
- Kebanyakan elemen HTML dapat memiliki atribut
Empty HTML Elements
Elemen HTML tanpa konten disebut elemen kosong.
<br> merupakan elemen kosong tanpa tag penutup (Jaringan tag 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)
Tip HTML: Tag menggunakan huruf kecil
Tag HTML tidak case sensitif: <P> berarti sama dengan <p>. Banyak situs web menggunakan tag HTML huruf besar.
HTML Attributes
- Elemen HTML dapat memiliki atribut
- Atribut memberikan informasi tambahan tentang elemen
- Atribut selalu ditentukan dalam tag awal
- Atribut datang dalam pasangan nama dan nilai seperti: name = “value”
Contoh
Link HTML didefinisikan dengan tag <a>. Alamat link ditentukan dalam atribut href:
|
1
|
|
Tip HTML: Atribut menggunakan huruf kecil
Atribut nama dan nilai atribut bersifat case-sensitive.
HTML Attributes Reference
Berikut ini adalah daftar dari beberapa atribut yang biasa digunakan pada setiap elemen HTML:
| Attribute | Deskripsi |
| class | Menentukan satu atau lebih classnames untuk elemen (mengacu pada kelas dalam style sheet) |
| id | Menentukan sebuah id unik untuk sebuah elemen |
| style | Menentukan Style CSS inline untuk suatu elemen |
| title | Menentukan informasi tambahan tentang elemen (ditampilkan sebagai tool tip) |
HTML Headings
Didefinisikan dengan tag <h1> sampai <h6>.
<h1> mendefinisikan heading yang paling penting.
<h6> mendefinisikan judul yang paling tidak penting.
Contoh
|
1
2
3
|
<p class="code"><h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3></p> |
Catatan: Browser secara otomatis menambahkan beberapa ruang kosong (margin) sebelum dan sesudah setiap heading.
Headings Sangat Penting
- Gunakan judul HTML untuk judul saja.
- Jangan gunakan judul untuk membuat teks BESAR atau tebal.
- Mesin pencari menggunakan Heading untuk indeks struktur dan isi dari halaman web Anda.
- Headings H1 harus digunakan sebagai judul utama, diikuti oleh H2 headings, kemudian headings H3 untuk yang kurang penting, dan seterusnya.
HTML Lines
Tag <hr> menciptakan garis horizontal di halaman HTML.
Contoh :
|
1
2
3
4
5
|
<p class="code"><p>This is a paragraph.</p><hr><p>This is a paragraph.</p><hr><p>This is a paragraph.</p></p> |