STRUKTUR
HTML
CungukBlogger~Di setiap
perbuatan khususnya perbuatan
yang dilakukan oleh
manusia pasti selalu memiliki suatu aturanbaik
peraturan tertulis maupun
yang tidak tertulis,
dimana aturan inilah
yang mengatur manusia akan seperti apakah nanti perbuatan itu dilakukan,
seperti apa yang terjadi jika aturan itu
diikuti dan apa yang akan terjadi jika
peraturan dilanggar. Dan tentunya
peraturan ini diciptakan oleh sang ahli.
Begitu pula
dengan bahasa pemrogaman
internet HTML. Terdapat peraturan
terstruktur yang harus diikuti
guna menghasilkan suatu tampilan
berikut konten si websiteitu sendiri. Dan
akan aneh bahkan tidak tampil sama sekali dalam browser jika struktur
HTML ini tidak diikuti.Strukturdari HTML adalah sebagai berikut :
<html>
<head>
<title>Judul</title>
</head>
<body>
...Isi halaman web...
</body>
</html>
Tag HTML
Untuk memprentasikan halaman
web dalam hal
ini html maka
perlu adanya induk
tag, dan <html> ini berlaku
sebagai induk tag yang mana tag html ini harus diletakan pada awal document dan
begitu juga tag html penutup yang diletakkan diakhir document.
<html>
...
halaman web ...
</html>
Tag Head
Head atau
“<head>” biasanya digunakan oleh title dari sebuah website. Dan
seringkali digunakan untuk menempatkan deklarasi awal script-script bahasa
lain, seperti javascript misalnya. Fungsi-fungsinya diletakkan disini, dan
implementasi dari fungsi tersebut ditempatkan pada tag <body>.
Selain itu kebanyakan
juga digunakan untuk
meletakkan meta tag.
Yang mana meta tag
ini berfungsi untuk
memberikan informasi berkenaan
dengan halaman web
tersebut. Contohnya seperti :
<meta
http-equiv="CONTENT-LANGUAGE" content="EN-US">
Yang digunakan
untuk memberikan informasi mengenai
bahasa apa yang
digunakan dalam web tersebut.Yang biasanya tag-tag ini dibaca
oleh bot-bot yang merecord web/situs kita di internet. Contoh penggunaanya
kira-kira seperti ini :
<html>
<head>
<title>Title
atau judul dari website anda</title>
</head>...halaman
web...</html>
Tag Body
Digunakan sebagai inti
dari halaman web, seperti tampilan website, kemudian content yang berisi link,
images, text, video, dan banyak lagi.
<html>
<head>
<title>Title
atau judul dari website anda</title>
</head>
<body>...halaman
web...</body>
</html>
Title, Berikan Gambaran
web anda melalui Judul/Title
Setiap halaman
website membutuhkan judul/title, dimana
judul ini yang
berfungsi untuk memberikan
gambaran dari isi halaman sebuah website. Sebagai contoh :
<html>
<head>
<title>Belajar
HTML</title>
</head>
<body>
<h1><font
color="red">Selamat datang di Rustan5797</font></h1>
</body>
</html>
Dan perlu
dicatat, sebuah halaman
website hanya dapat
menyimpan satu title. Title ini hanya dapat menyimpan informasi berbentuk plain text/text
biasa, dan tidak dapat menyimpan gambar ataupun dari tipe file yang lain.
Buat Headline dengan
menggunakan Tag Heading
Heading biasanya
digunakan dalam headline konten web maupun judul dari artikel. Terdapat
beberapa ukuran heading
dan size paling besar biasanya menggunakan <h1>.
<h1>Heading
ukuran h1</h1>
<h2>Heading
ukuran h2</h2>
<h3>Heading
ukuran h3</h3>
<h4>Heading
ukuran h4</h4>
Membuat Kalimat dengan
paragraph“ <p>”
Tidak dapat dipungkiri
jika penggunaan paragraph itu diperlukan dalam memperindah konten dari suatu
web disamping memisahkan paragraph yang satu dengan yang lain dimana didalamnya
terdapat informasi yang saling melengkapi.
Penggunaan paragraph
dalam html cukup dengan menggunakan “<p>” sebagai pembuka dan “</p>”
sebagai penutupnya dimana satu pasang <p></p> dianggap sebagai satu
paragraph.
Contoh :
<p> Dimana ada
kemauan disitu ada jalan. Begitulah kata pepatah yang memang benar-benar
mempengaruhi banyak
orang dalam mewujudkan cita-citanya. Begitupun seorang Nicholas Copernicus
disalah satu kata-kata bijaknya. 99 % menentukan keberhasilan dari usaha adalah
kemauan dan kerja keras, 1 % -nya bakat.</p>
<p>Kegagalan
bukanlah akhir dari suatu kehidupan, justru dengan kegagalanlah seseorang
menjadi advanced dalam medan tempur yang dihadapi. Hadapi masalah, kemudian
cari solusi, lalu selesaikan.</p>
Lists dan More list,
Berikan penomoran untuk konten situs Dalam aplikasi wordprocessing, List anda
More List ini dikenal dengan Bullet and
Numbering.
Contoh list :
Contoh
buah-buahan yang termasuk kedalam vitamin C :
·
Mangga
·
Pisang
·
Jeruk
Dalam html dapat
dijabarkan sebagai berikut :
<p>
Contoh buah-buahan yang termasuk kedalam vitamin C : </p>
<ul>
<li>Mangga</li>
<li>Pisang</li>
<li>Jeruk</li>
</ul>
Numbered Lists
Jika lists itu adalah
bullet dalam html, maka Numbered Lists adalah numbering dalam html. Contoh
Numbered Lists:
<p>Cara
Membuat Telur Matasapi :</p>
<ol>
<li>Beli
Telurnya.</li>
<li>Panaskan
kompornya</li>
<li>Siapkan
Minyak dalam penggorengan.</li>
<li>Masak
telurnya</li>
</ol>
Di numbered lists ini
tag <ol> memiliki sebuah sub tag yang dapat didefinisikan sesuai dengan
yang anda butuhkan. Diantaranya :
"1"
mewakili 1, 2, 3, 4, dan seterusnya
"a"
mewakili a, b, c, d, dan seterusnya
"A"
mewakili A, B, C, D, dan seterusnya
"i"
mewakili i, ii, iii, iv, dan seterusnya
"I"
mewakili I, II, III, IV, dan seterusnya
Contoh :
<p>Nama-nama
bulan : </p>
<ol
type="1" start="3">
<li>Maret</li>
<li>April</li>
<li>Mei</li>
<li>Juni</li>
<li>Juli</li>
<li>Agustus</li>
</ol>
Comments, Gunakan
Komentar untuk menjelaskan struktur kode-kode html. Penggunaan komentar
terkadang perlu untuk menggambarkan alur-alur mengenai kode yang berkaitan. Hal
ini akan memudahkan jika nanti akan dilakukan perubahan mengenai kode-kode yang
ada. Komentar ini tidak akan ditampilkan dalam browser, tapi kedudukan dalam
kode html tetap ada. Contoh penggunaan komentar :
<!--Ini
adalah komentar-->
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon