Belajar HTML tidak lah yang sesulit kita bayangkan. Untuk itu baca postingan saya sebelumnya. Pada postingan sebelumnya saya menagajarkan bagaimana struktur HTML. Kita bisa belajar bahwa setiap tag harus ditutup. contoh: <html> harus ditutup dengan </html> , <head> harus ditutup dengan </head> dst.Mempelajari bahasa HTML jauh berbeda dengan bahasa XHTML. Misal, HTML mengijinkan attribute tidak diberikan quote contoh : <meta name=keyword content=aa, ll, dd />. Perlu saya tambahkan disini, karena pada postingan sebelumnya saya lupa menulisnya, bahwa disetiap tag memiliki attribut.
<namatag attribut="isi atribut">Ini isi tag </namatag>Setelah kita mengetahui struktur HTML, saatnya kita mengetahui jenis-jenis element/tag pada HTML:
(mohon diperhatikan bahasa tag dan element, biasanya tag adalah penyebutan untuk HTML sedangkan Element dipergunakan untuk XML dan XHTML, jika saya salah penyebutan mohon dimaklumi karena bahasa XHTML dan HTML hampir sama)
Head element dan strukturnya
Head Elament ( <head> ) memiliki sub element. Beberapa element dibutuhkan browser dalam merender HTML, beberapa lainnya dibutuhkan dalam SEO, dan beberapa lainnya dibutuhkan untuk tehnologi web 2.0 (baca postingan saya mengenai web2.0).
Tag yang diperbolehkan berada di bawag head element ialah :
title
base
link
meta
script
style
Title
Elemen <title> dibutuhkan untuk mengenali dokumen. Beberapa web browser menampilkan <title> di title bar mereka. Contoh:
Setiap halaman web harus mempunyai judul yang unik. Juga beberapa SE ( Search Engine / Mesin pencari ) lebih menyukai Website yang memiliki judul yang unik. Tag ini hanya diperbolehkan satu saja.
Isi
Teks
Contoh
<head>
<title>Ini adalah judulku</title>
</head>
Base
Untuk memecahkan masalah relatif URL ( Uniform Resource Locator ), kebanyakan web browser akan menggunakan base URL dari tempat dimana web browser mendownload page tersebut.
Attribute
href
Berisi URL absolut. contoh: http://www.iklanku.com
Pemahaman
Jika tag base digunakan, maka semua relatif URL akan mengikuti jalur pada base tersebut.
Contoh
Website aku.com akan selalu mengambil CSS gayaku.css dari http://aku.com
<head>
<base href="http://aku.com">
<style type="text/css">@import url('gayaku.css');</style>
</head>Dan semua dokumen yang dari luar akan selalu diambil dari basenya.
Link
Tag link Membawa informasi yang dibutuhkan untuk web browser dan SE. Link dapat dibuat banyak. Tag link hanya diperbolehkan berada di elemen/tag head.
Contoh
untuk mengambil file CSS ( dibutuhkan untuk mengatur style dan layout suatu halaman), maka :
<link rel="stylesheet" href="layoutku.css" media="print" type="text/css" />Untuk menampilkan icon suatu website kita :
<link rel="shortcut icon" href="/ikonku.ico" />
Attribut
Dasar
href
Attribut ini berisi lokasi dari sumber web. contoh: http://www.imageku.com/a.css
Media
Berisi media apa yang digunakan untuk style. Jika kita tidak menetapkan attribut ini, maka attribut ini akan diset sebagai screen. Beberapa Jenis-jenis media yaitu : screen, tty, tv, projection, handheld, print, braille, aural dan all. Jika kita menggunakan dua atau lebih media, harap dipisahkan dengan koma.
type
Untuk bahasa stylesheet. contoh : text/css
Tingkat lanjut
rel
menjelaskan tentang hubungan dari dokumen yang sedang digunakan dengan sumber yang telah didefinisikan oleh attribut href
Meta
Lihat postingan saya Mengenal Meta tag
Script
Tag script digunakan sebagai client-side script / skrip yang dijalankan di sisi klien, seperti JavaScript. Tag ini mungkin akan muncul beberapa kali di elemen head ataupun body. Jadi tag ini dapat ditempatkan di dalam tag head dan di dalam tag body.
Di dalam tag script dapat diisi dengan script ( atau biasa disebut Embedded Script ) atau mengambil script dari luar dengan mendefinisikan attribute src.
Contoh
Embedded Script ( skrip yang ditempatkan didalam tag script )
<script type="text/javascript">
function aku {
window.onload = alert('Ini percobaan tau');
}
</script>
Atau External Script ( Skrip yang diambil dari luar dan tidak ditulis pada halaman )
<script type="text/javascript" src="aku.js"></script>Attribut
src
Lokasi dari external script. contoh: src="scriptku.js"
type
Berisi content type. contoh: "text/javascript"
Style
Dapat diisi dengan aturan CSS ( embedded CSS) atau sebuah URL mengarah ke file CSS yang berisi aturan CSS dengan ( external CSS )
Contoh
Embedded CSS :
<head>
<style type="text/css" media="screen">
h1 {color: red; text-align: center}
</style>
</head>External CSS:
<head>
<style type="text/css" media="screen">
@import url('screen.css');
</style>
</head>Struktur head sangat penting dalam HTML, struktur head dalam HTML tidak jauh berbeda dengan XHTMl, yang membedakan adalah aturan bahasanya sendiri.
Sekian dulu pembahasan mengenai HTML. Untuk tag body dan semua elemen yang dibawahnya, akan dijelaskan pada postingan tersendiri dan diluar judul diatas.
3 komentar:
oOo.. bEgItUuuu... yA yA yA :)
bro saya bru belajar ngeblog dan saya perna submit blog di yahoo maksud sy biar kebaca search ingine setelah dpt code saya masukin di blog yg fersi xhtml tp gak kebaca itu knp yah?.tx
http://onlineinfo-center.blogspot.com
Mas mau tanya nih...
Bisa nda web yang kita buat dengan bahasa html di notepad didaftarkan di Google adsense.
Bagaimana caranya?
Saya sangat berterimkasih kalau Mas bersedia memberikan jawabannya melalui email saya
willybanggur@gmail.com
Post a Comment