Dokumen HTML terdiri dari elemen-elemen yang ditandai dengan apa yang disebut sebagai Tag. Tags dapat dikenali dari tanda kurung sudut. Hampir semua elemen HTML ditandai dengan Tag pembuka dan penutup. Bagian di antaranya disebut sebagai ruang lingkup valid.
Contoh:
<h1>PSD-Tutorials.de – portal desain grafis, web, dan pembelajaranmu</h1>
Dengan sintaks ini, sebuah judul tingkat pertama ditulis ke dalam dokumen. Tag pembuka <h1> memberitahu browser bahwa itu adalah judul tersebut. Tag penutup </h1> menutup judul. Anda dapat mengenali tag penutup dengan tanda kurung sudut pembuka, diikuti oleh garis miring </.
Sebuah pertanyaan muncul sehubungan dengan penulisan nama elemen: Bagaimana dengan penulisan huruf besar dan kecil? Seperti yang sudah dijelaskan, fokus dalam seri ini adalah pada HTML5. Di sini Anda benar-benar dapat memilih antara huruf besar dan kecil. Namun, secara pribadi saya lebih suka menggunakan huruf kecil yang konsisten dan akan mempraktikkannya dalam seri ini. Secara prinsipil, menurut HTML5 hal berikut ini benar:
<h1>PSD-Tutorials.de – portal desain grafis, web, dan pembelajaranmu</h1> <H1>PSD-Tutorials.de – portal desain grafis, web, dan pembelajaranmu</H1> <h1>PSD-Tutorials.de – portal desain grafis, web, dan pembelajaranmu</H1>
Elemen yang dibuka juga harus ditutup. Jadi jika Anda menetapkan <h1>, Anda harus menutupnya setelah akhir definisi judul dengan </h1>. Meskipun dalam HTML5 ada pengecualian di sini seperti entri list dan paragraf, namun pembahasannya akan dilakukan nanti.
Di HTML juga terdapat Tag mandiri. Ini hanya terdiri dari satu Tag, bukan Tag pembuka dan penutup. Sebagai contoh, <br />.
Ini adalah satu baris.<br /> Ini adalah baris lainnya.
<br /> ini mendefinisikan pindah baris.
Tag kosong seperti ini biasanya ditutup dengan garis miring, meskipun dalam HTML5 hal ini tidak diperlukan. Ini juga akan berhasil:
<br>
Anda akan mengenal lebih banyak Tag mandiri ini seiring berjalannya seri ini.
Menyusun Elemen
Elemen HTML sebenarnya juga dapat disusun. Bayangkan jika Anda ingin menampilkan sebuah bagian pada teks yang miring di dalam sebuah judul. Untuk tampilan miring, digunakan elemen i.
<h1>PSD-Tutorials.de – <i>portal desain grafis, web, dan pembelajaranmu</i></h1>
Perhatikan urutan yang benar saat menyusun. Elemen yang pertama dibuka harus ditutup terakhir. Dalam kasus ini, itu adalah elemen h1.
Menggunakan Atribut
Di dalam Tag pembuka atau Tag mandiri, atribut-atribut dapat didefinisikan. Atribut-atribut ini dapat memberikan elemen-elemen properti tambahan. Pada zaman HTML yang lebih dulu, elemen-elemen diberikan banyak atribut. Hal ini karena campuran antara struktur dan desain. Sebelumnya, misalnya, definisi warna diberikan langsung ke elemen HTML melalui atribut yang sesuai. Saat ini, tentu saja juga berkat CSS, pemisahan yang ketat antara desain dan struktur dimungkinkan, dan harus dipatuhi. Oleh karena itu, hanya ada beberapa atribut yang digunakan.
Satu atribut penting adalah id. Melalui atribut ini, sebuah nama unik dapat diberikan kepada elemen HTML, yang kemudian dapat diakses misalnya melalui CSS atau JavaScript.
<h1 id="head">PSD-Tutorials.de – portal desain grafis, web, dan pembelajaranmu</h1>
Untuk menetapkan atribut, tambahkan spasi di belakang h1. Kemudian ikuti dengan nama atribut, yang biasanya ditulis dengan huruf kecil. Setelah nama atribut, ikuti tanda sama dengan. Nilai atribut kemudian diberikan di dalam tanda kutip.
Anda juga dapat memberikan beberapa atribut ke elemen. Misalnya, untuk sebuah elemen, sangat umum untuk menetapkan kelas dan ID. Contoh: Melalui id, judul diidentifikasi secara unik. Sementara itu, kelas digunakan untuk mengkategorikan judul. Dengan demikian, bisa diatur bahwa semua elemen yang diberikan kelas blue, akan ditampilkan dengan warna biru. (Lebih lanjut tentang CSS dan topik warna ini akan dijelaskan secara rinci kemudian).
<h1 id="head" class="blue">PSD-Tutorials.de – portal grafis, web, dan pembelajaranmu</h1>
Atribut-atribut dalam kasus ini dipisahkan oleh spasi.
Memvalidasi Kode
Anda telah mengenal beberapa aturan sintaks dasar. Terutama di awal saat Anda belajar HTML, penting untuk mematuhi aturan ini. Yang satu kali salah akan sulit untuk diubah. Oleh karena itu, Anda harus selalu memeriksa atau memvalidasi kode HTML Anda. Anda tidak perlu melakukannya sendiri. Untuk ini, ada alat online yang sesuai. Anda dapat menemukan Validator di http://validator.w3.org/.
Yang terbaik adalah beralih langsung ke Tab Validate by direct Input. Di sini Anda dapat langsung menempelkan kode HTML yang akan divalidasi. Pastikan untuk menempelkan kode lengkap file, termasuk pernyataan DOCTYPE.
Untuk menguji Validator, tempelkan yang berikut ini ke kotak teks dan klik tombol Validate.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – portal grafis, web, dan pembelajaranmu</h1> </body> </html>
Hasilnya seharusnya terlihat seperti ini:
Semua berjalan dengan lancar. (Dua peringatan dalam kasus ini tidak perlu dipedulikan). Jadi, jika pesan Dokumen ini berhasil diperiksa sebagai HTML5!, muncul, semuanya dalam keadaan baik. Namun bagaimana jika ada kesalahan? Coba sengaja tambahkan kesalahan sintaks.
<h1 id=head">PSD-Tutorials.de – portal grafis, web, dan pembelajaranmu</h1>
Pada bagian tersebut, tanda kutip pembuka pada head terlupakan. Jika sintaks sekarang divalidasi lagi, kesalahan akan terdeteksi.
Validator kemudian akan memberikan pesan yang sesuai. Anda dapat melihat dengan jelas di area jendela bawah apa kesalahan yang terjadi.
Juga dijelaskan dengan baik apa sebenarnya kesalahannya.
Baris 8, Kolom 12: " dalam nilai atribut tanpa tanda kutip. Kemungkinan penyebab: Atribut yang berjalan bersama atau string kueri URL dalam nilai atribut tanpa tanda kutip.
<h1 id=head" >PSD-Tutorials.de</h1>
Dengan begitu, Anda dapat langsung melihat di baris mana kesalahan input terjadi, dan dapat mengoreksinya. Jadi, Validator membantu Anda dalam membuat kode HTML yang bersih. Selalu validasikan kode Anda. Karena browser sering menampilkan kode HTML dengan benar, meskipun sintaksnya tidak benar. Namun, hal ini dapat berbeda di browser lain di mana Anda tidak menguji situs Anda.
