HTML & CSS





Struktur Dasar HTML

<html>
<head>
....informasi dokumen....
</head>
<body>
....konten yang di tampilkan
pada halaman browser.....
</body>
</html>


Penggunaan Tag dan Atributnya


Dalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri tanda tag
HTML, memiliki syarat penulisan yaitu:

  • Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )
  • Tag HTML secara normal selalu berpasangan misal (<i>...</i>)
  • Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua                       merupakan tag akhir.
  • Tag html tidak case sensitive. Ini artinya <b> sama dengan <B>
  • Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh                          bersilang dan harus berurutan. Misalnya <b><I>..Tebal dan Miring..</I></b>
Tag Dasar HTML
  1. HTML
Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah dokumen html. Tag ini
merupakan suatu keharusan bagi pemrogram web untuk menuliskannya sebagai tag
pertama dalam dokumen html. Penulisan tag seperti berikut ini :
<html> pada awal dokumen dan </html> pada akhir dokumen

     2. Head
Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head
yang benar akan meningkatkan kegunaan suatu dokumen HTML. Isi bagian head –
kecuali judul dokumen – tidak akan terlihat oleh pembaca dokumen tersebut. Penulisan
tag seperti berikut ini :
<head> di awal setelah <html> dan </head> di akhir section head

Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :
  • Menyediakan judul dokumen
  • Menjembatani hubungan antar dokumen
  • Memberitahu browser untuk membuat form pencarian
  • Menyediakan metode untuk mengirim pesan ke tipe browser Elemen yang mungkin terdapat pada bagian head :
  • Tag <title>, digunakan untuk memberi judul dokumen. Penggunaannya adalahsebagai berikut :<title>Judul Dokumen</title>
  • Tag <base>, digunakan untuk menentukan basis URL sebuah dokumen. Contohpenggunaannya adalah sebagai berikut berikut : <base href="//www.alamat.com/direktori" />
  • Tag <link>, digunakan untuk menunjukkan relasi antar dokumen HTML. Tag ini mempunyai beberapa atribut :

href  : Menunjuk pada URL / dokumen lain
rel    : Mendefinisikan relasi terhadap sebuah dokumendan dokumen lain
yang berisi informasi tentang personil yang member kontribusi
terhadap dokumen tersebut
rev : Mendefinisikan relasi sebuah dokumen HTML dengan dokumen lain
type : Menentukan tipe dan paramenter dari relasi


Contoh penggunaannya adalah sebagai berikut:
<link rel="stylesheet" href="http://alamat.com/style.css" type="text/css" />

  • Tag <meta>, digunakan untuk mendefinisikan informasi-informasi di luar HTML Informasi meta dapat digunakan oleh browser untuk menjalankan suatu aktivitas yang belum didukung oleh HTML. Tag <meta> mempunyai atribut :

http-equiv : Mendefinisikan properti dari elemen
name : Menyediakan deskripsi tambahan dari elemen
url : Mendefinisikan target dokumen dari sebuah properti
content : Menyediakan nilai respon dari properti


Untuk lebih memperjelas penggunaan atribut tag <META> perhatikan contoh
berikut ini :

<meta http-equiv="refresh" content="60" url="www.alamat.com" />

Perintah diatas akan diterjemahkan oleh browser sebagai “tunggu 60 detik,
kemudian panggil dokumen baru pada www.alamat.com". Jika atribut URL tidak
disertakan, maka halaman itu sendiri yang akan dipanggil, jadi setara dengan
mengklik tombol Refresh / Reload pada browser.
Penggunaan elemen <meta> yang paling populer adalah penggunaan properti
Keyword dan Description. Kedua properti ini sangat berguna untuk membantu kerja
search engine. Biasanya search engine akan menggunakan teks yang disebutkan

pada properti Keyword untuk mengindeks dokumen dan menggunakan teks yang
terdapat pada properti Description untuk mendeskripsikan indeks tersebut.


     3. BODY
Bagian BODY merupakan isi dari dokumen HTML. Semua informasi yang akan
ditampilkan, mulai dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini.
Seperti telah disebutkan di atas, bagian BODY diawali oleh tag <body> dan ditutup
</body>.

Atributnya :
alink : Menunjukkan warna link aktif

background : Merujuk URL atau direktori dari gambar yang digunakan sebagai
latar belakang
bgcolor : Menentukan warna latar belakang
bgproperties : Jika nilai atribut diisi “FIXED”, maka gambar latar belakang tidak ikut
tergulung
leftmargin : Batas kiri dokumen
link : Menentukan warna link yang belum dikunjungi
text : Menentukan warna teks
topmargin  :Menentukan batas atas
vlink : Menentukan warna link yang telah dikunjungi

contohnya dapat kita buat sebagai berikut :


<html>
    <head> 
           <title>Penggunaan BODY</title>
</head>
<body bgcolor="silver" text="blue" vlink="#ff0000" link="green">
               Ini adalah contoh penggunaan body.
               Dan ini adalah sebuah <a href="">link</a>.
        </body>
</html>


!!!!!
Silahkan Copas script diatas pada notpad dan simpan file dengan extensi .html dan lihat hasilnya 
bagian 2

Comments :

0 comments to “HTML & CSS”

Post a Comment

Blogumulus by Roy Tanck and Amanda Fazani

Artikel Terkait