Validasi Markup HTML

0

Validasi markup adalah proses dimana kode HTML kita divalidasi apakah sudah benar atau belum oleh aplikasi validator dari W3C6. Validasi ini sangatlah diperlukan untuk memeriksa apakah ada yang salah dengan markup HTML yang telah kita buat atau ada beberapa bagian yang terlewat seperti penutup tag, atribut dan lain sebagainya.

Sebagian orang berpendapat bahwa markup HTML yang valid akan mempercepat proses loading website dan lebih bersahabat dengan Search Engine

Untuk melakukan validasi, silahkan buka alamat berikut: http://validator.w3.org/.

Sebelumnya kita harus menyertakan informasi character encoding. Untuk memperbaikinya tambahkan kode berikut di dalam tag head dari file latihan markup kita.

<head>
<title>Latihan Markup</title>
<meta charset=”UTF-8″>
</head>

 

Maksud dari tag tersebut adalah menentukan tipe karakter encoding yang digunakan dalam file HTML, dan kita gunakan tipe “UTF-8”. Sekarang kita coba Revalidate (Memvalidasi ulang) file HTML kita.

 

Sumber: ariona.net

Perbedaan Id dan Class

0

Bagi seorang pemula, termasuk saya ketika masih belajar HTML & CSS pasti menanyakan hal yang sama. Pasalnya atribut ID dan Class digunakan untuk menamai tag HTML. Lalu apa perbedaan dari keduanya?

ID

Atribut ID digunakan untuk penamaan elemen HTML yang memiliki karakteristik unik/berbeda. Tidak boleh ada dua atau lebih elemen yang mempunyai ID yang sama. Perhatikan contoh berikut :

  1. 2.

      3.

    • Beranda
    • 4.

    • Tutorial
    • 5.

    6.

Penggunaan atribut ID pada contoh di atas adalah SALAH, karena terdapat dua ID yang sama, yaitu “menu” pada tag <div> dan <ul>.

Perhatikan contoh sebelumnya, bahwa kita menggunakan ID yang berbeda untuk setiap div yakni, header, content, sidebar dan footer karena semuanya memiliki struktur dan fungsi yang berbeda dalam suatu dokumen HTML.

Class

Class digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama dan dapat digunakan berulang kali dalam markup (Kode HTML). Sebagai contoh, perhatikan kode HTML berikut :

  1. <ul id=‚menu‛>
    2. <li class=‚merah‛>Beranda</li>
    3. <li>Tutorial</li>
    4. <li class=‚merah‛>Berita</li>
    5. <li>Video</li>
    6. </ul>

Pada Kode HTML di atas, saya menggunakan class Merah pada beberapa list item, karena nantinya list item yang memiliki class merah akan diberi warna background merah.

Kesimpulannya adalah, ketika anda memiliki beberapa elemen dengan karakter/format yang sama, gunakan Class sebagai penamaannya dan Gunakan ID untuk elemen yang berbeda dan membutuhkan tanda pengenal lebih spesifik.

Memahami hubungan Child, Parent dan Siblings

0

Ketika suatu tag memiliki tag/konten didalamnya maka hubungan antar tag-tag tersebut disebut dengan child-parent dan sibling. Perhatikan contoh berikut :

  1. 2.

    3.

    4.

    5. </div>
    6. </div>

Dalam contoh kode HTML tersebut :

  • <div id=‚wrapper‛> disebut Parent, dan tag HTML yang ada di dalamnya disebut dengan Child(<div id=‚content‛>).
  • Begitu juga dengan <div id=‚content‛> disebut parent untuk <div id=‚article‛> dan <div id=‚sidebar‛>,
  • dan hubungan antara<div id=‚article‛> dan <div id=‚sidebar‛> disebut dengan sibling, atau saudara.

Membuat Link Pada HTML

0

Link atau biasa disebut dengan anchor (pengait) dapat dibuat dengan menambahkan tag <a> pada teks yang ingin kita buat menjadi link.

Klik <a>disini</a> untuk mendownload
Namun anda tidak akan melihat perubahan pada teks “disini” karena kita belum “mengaitkannya” ke halaman web lain. Untuk itu kita akan menggunakan attribut href untuk menyimpan alamat web yang akan dituju ketika link di klik (penulisan lokasi sama halnya dengan attribut src pada tag img).

Klik <a href=”http://www.alamat-tujuan.com”>disini</a> untuk mendownload

Membuat Daftar Pada HTML

0

 

Ordered List

Ordered list atau Daftar berurutan dapat dibuat dengan menggunakan tag <ol> (singkatan dari ordered list) dan untuk setiap listnya kita gunakan tag <li> (singkatan dari list item/item daftar). Sebagai contoh, perhatikan kode HTML berikut :

  1. <h2>Yang harus dilakukan hari ini</h2>
    2. <ol>
    3. <li>Pergi ke pasar</li>
    4. <li>Buat tutorial HTML</li>
    5. <li>Mengerjakan tugas kuliah</li>
    6. </ol>

Penomoran daftar akan dilakukan secara otomatis ketika anda menambahkan daftar item.

Unordered List

Berbeda dengan daftar berurut, unordered list akan menandai setiap item dengan simbol. Baik berupa lingkaran atau persegi (anda masih bisa merubahnya dengan CSS). Untuk membuat daftar tidak berurut kita gunakan tag <ul> dan seperti tag <ol>, item yang terdapat di dalamnya harus diapit dengan tag <li>.

  1. <h2>Yang harus dilakukan hari ini</h2>
    2. <ul>
    3. <li>Pergi ke pasar</li>
    4. <li>Buat tutorial HTML</li>
    5. <li>Mengerjakan tugas kuliah</li>
    6. </ul>

 

Sumber:ariona.net

Struktur file HTML

0

Suatu dokumen HTML juga mempunyai aturan dalam penulisannya, ada beberapa tag yang harus anda tuliskan dan sudah menjadi ketentuan. Jika kita perbaiki latihan kita sebelumnya menjadi dokumen HTML yang benar maka kodenya menjadi seperti berikut:

1.<!DOCTYPE HTML>
2. <HTML>
3. <head>
4. <title>Judul File HTML</title>
5. </head>
6.
7. <body>
8. Website <strong><em>pertama</em></strong> saya
9. </body>
10. </HTML>

Bingung? Tenang, saya jelaskan tiap baris kode tersebut.

<!DOCTYPE HTML>
Adalah Tag awal dari setiap dokumen HTML, tag ini berfungsi untuk menginformasikan
pada browser bahwa dokumen yang sedang dibuka adalah dokumen HTML. Tag ini
perlu dicantumkan disetiap dokumen HTML yang akan anda buat.
<HTML> … </HTML>

Awal dari isi dokumen HTML dimulai dari sini, semua kode HTML yang akan anda buat akan ditulis di dalam tag ini, perhatikan juga bahwa setiap tag harus memiliki tag penutup.

<head> … <head>

Tag Head akan digunakan untuk menyimpan berbagai informasi tentang dokumen HTML, lebih detailnya akan kita temui pada bab selanjutnya. Apa yang terdapat di dalam tag ini, tidak akan ditampilkan secara langsung pada web browser.

<title> … </title>

Salah satu contoh informasi yang terdapat di dalam tag Head adalah title. Title akan menampilkan teks pada judul browser atau pada tab browser.

 

<body> … </body>

Nah, apa yang ingin anda tampilkan pada browser akan ditulis di dalam tag ini, tag body merupakan tag pembuka dari badan dokumen HTML.

Mudah dimengerti bukan? Lalu apakah penulisan tag-tag HTML harus seperti contoh di atas? Seperti penambahan tab/indentasi pada setiap tag?. Sebenarnya Anda bisa saja menuliskan kode HTML seperti ini :

<!DOCTYPE HTML><HTML><head><title>Judul File HTML</title></head><body>Website
<i>pertama</i> saya</body></HTML>

Dan yang anda dapatkan dalam browserpun sama, namun anda akan kesulitan membaca dokumen HTML tersebut. Kalau saja dokumen HTML yang anda buat hanya 10 baris mungkin hal ini tidak akan menjadi masalah, namun bagaimana jika 1000 baris? Nah loh?!

Ini menandakan bahwa tag title berada di dalam tag head. Selain itu kita juga bisa mengontrol, apakah suatu tag sudah ditutup atau belum.

 

Sumber: ariona.net

Pengenalan Tag HTML

0

Seperti yang saya sebutkan sebelumnya, bahwa HTML adalah bahasa Markup, artinya bahasa HTML hanya digunakan untuk me-markup suatu dokumen. Sebagai penyederhanaan kita analogikan dengan pembuatan dokumen di Microsoft Word atau aplikasi Word Processing lainnya.

Ketika membuat sebuah dokumen word, biasanya kita melakukan formatting pada teks. seperti menebalkan teks, memiringkan, memberi garis bawah, Membuat Penjudulan (Heading), membuat list (Daftar) dan lain sebagainya. Pada HTML, formatting ini bisa kita sebut dengan Proses Markup dan akan dilakukan dengan menggunakan tag HTML.

Misalnya, untuk mem-format suatu teks menjadimiring kita tambahkan tag atau. Edit file sebelumnya, menjadi seperti berikut :

Website <em>pertama</em> saya

Dan ketika dibuka kembali pada browser, anda dapat melihat kata pertama menjadi miring.

.. disebut dengan Tag HTML, yang digunakan untuk me-markup(memformat) dokumen HTML. Perhatikan bahwa setiap tag memiliki pasangan yakni tag penutupnya.

Artinya hanya teks yang berada di dalam tag tersebut yang akan diberi format miring. Tag penutup ditandai dengan penambahan tanda slash (/) sebelum nama tagnya. Berikut ini adalah anatomi dari tag HTML :

Isi atau Konten

Setiap tag HTML bisa menjadi “isi” dari tag HTML lainnya, untuk membuat suatu hierarki dari dokumen HTML.

Dalam setiap tag HTML bisa disisipkan berbagai atribut yang berfungsi untuk menampung informasi-informasi tertentu, misalnya atribut id dan class yang berfungsi untuk memberi nama suatu tag sebagai referensi CSS atau javascript nantinya.

Sekarang bagaimana jika teks yang dimiringkan tersebut ingin kita tebalkan? Untuk menebalkan teks anda dapat menggunakan tag atau, menjadi seperti berikut:

Website <strong><em>pertama</em></strong> saya

 

Sumber: ariona.net