Html/Protocol yang
kepanjangannya adalah Hypertext Markup Language yang tentu sebenarnya sobat
pasti tahu jika soabat adalah seorang blogger sejati atau jika sobat adalah web
desainer. Disini saya akan sedikit membahas sedikit dulu tentang Html itu
sendiri, Sobat tentu seringkan berkunjung ke sebuah website, Nah sobat tahu
tidak kenapa website tersebut bisa ada dan bisa seperti itu tampilannya, nah itulah
kegunaannya Html, tanpa Html tentu website tidak bisa di bangun, tanpa bahasa
pemrograman web, bagaimana website tersebut bisa berdiri. Jika sobat mengira
bahwa mendesain Html itu mudah, maka sobat salah, karena menguasai Html itu
sulit sobat, kita harus bisa merancang suatu situ yang tampilannya seperti yang
kita inginkan, berlum di tambah animasi-animasi atau game-game kecil di situs
kita, hmm tentunya sobat harus menguasai Html dulu baru bisa membuatnya. Sobat
tentu tahu bahwa suatu situ yang tampilannya sangat menarik dan banyak viewer
di situs tersebut, itu karena Html yang situs atau blog tersebut gunakan itu
sangat banyak sobat. Tentunya tidak sembarangan loh membuat Html, harus
banyak-banyak belajar, agar kita mampu membuat website atau blog kita menarik
dan kita biasa mendatangkan banyak viewer ke website kita.
DEFINISI
HTML
Setelah tadi kita
berbincang-bincang sedikit tentang Html, sekarang kita bahas apa sih arti
sebenarnya Html sendiri.
HTML adalah kependekan
dari Hypertext Markup Language yang merupakan bahasa pemrogaman yang khusus
dirancang untuk mendesain sebuah webpage atau halaman web. Ya, itu perngertian
yang diambil dari post-post saya sebelumnya. Dokumen HTML ini bisa kita buat dengan
software teks-teks editor maupun software web developer. Tapi sebagai seorang
pemula, termasuk saya, ada baiknya menggunakan PHPDesigner, Ms Frontpage 2003,
dan software-software editor HTML lainnya, mengapa? Karena sodtware-software
itu telah menyediakan banyak tag dan atributnya, sehingga pengguna tidak akan
kesulitan dalam menentukan tag untuk sebuah elemen.
kita diharuskan paham
tentang struktur sebuah HTML. Sebuah dokumen HTML disusun atas tiga bagian
besar, yaitu bagian HTML itu sendiri, Head, dan juga Body. Struktur dasar
sebuah dokumen HTML kurang lebih seperti ini:
<HTML>
<head>
Tempat meletakkan
informasi sebuah webpage
</head>
<body>
tempat menempatkan
informasi yang akan ditampilkan ke dalam webpage
</body>
</HTML>
Sampel diatas, terdiri atas elemen HTML, elemen
Head, dan elemen Body. Sekarang, apa pengertian dari Elemen? Oke, Elemen adalah
data tunggal yang akan ditampilkan di halaman web. Beberapa contoh elemen lain
seperti ini:
<h1>Blog
Lintang</h1>
selanjutnya, kita juga diharuskan mengerti apa itu
tag dan atribut. Sekarang pengertian tag dulu, tag adalah kode yang digunakan
untuk menandai atau memformat sebuah elemen yang akan ditampilkan di webpage
atau halaman web.
Tag terdiri atas kurung buka (<) dan kurung tutup
(>), contohnya seperti pada struktur dokumen HTML diatas, <head>
merupakan tag head dan <body> merupakan tag body. Lalu, bagaimana cara
membuat tag? Pertanyaan yang mudah dijawab. Tag sendiri terdiri atas dua
bagian, yaitu tag pembuka dan tag penutup. Formatnya kurang lebih seperti
dibawah ini:
<namatag>data</namatag>
Kalo kita perhatikan seksama, contoh diatas memuat
dua tag, tag yang didepan tidak ada garis miringnya. Sedangkan yang di belakan
ada. Mengapa demikian? Sebuah elemen diformat dengan menggunakan dua tag, tag
yang satu berfungsi sebagai tag pembuka dan satunya sebagai tag penutup. Nah,
diantara tag pembuka dan penutup tersebut, kita menaruhkan data yang akan
ditampilkan di webpage, atau biasa disebut elemen.
Berikut ini merupakan beberapa contoh elemen:
<p>...</p>
digunakan untuk memformat paragraft teks
<table>...</table>
digunakan untuk membuat tabel, dll
Didepan tadi saya telah jelaskan bahwa tag terdiri
atas pembuka dan penutup, ada juga tag yang tidak disertai penutupnya, yaitu;
<br> membuat
paragraft
<hr> membuat
garis horizontal
<li> membuat list
teks
Saat kita paham tentang elemen tag, kita juga diharuskan paham tentang apa itu atribut. Perhatikan contoh dibawah ini:
<font>...</font>
<font
type="courier new">...</font>
Apa persamaan dari
contoh diatas? Keduanya sama-sama tag, jawaban benar. Lalu apa perbedaannya?
Pada contoh diatas, dibaris yang kedua, ada unsur type="courier new",
nah itulah yang dinamakan atribut. Pada baris pertama, tag hanya memunculkan teks
biasa pada browser, tapi pada baris kedua, tag akan memunculkan teks dengan
jenis huruf courier new.
PENERAPAN
HTML :
Berikut ini saya akan mencoba memberikan contoh
penerapan kode HTML dasarbeserta
tampilannya pada web browser dengan menggunakan beberapa tag yang telah
dipelajari pada postingan sebelumnya.
1. Paragraf dan line Break
<html>
<body>
<p>
Paragraf ini
mengandung spasi dan baris
dalam kode sumbernya,
tetapi browser
akan mengabaikannya.
Mengapa begitu?
</p>
<p>
Sedangkan yang ini memiliki spasi
panjang.
</p>
<p>
Untuk memotong <br>baris<br>dalam sebuah<br>paragraf,<br>gunakan tag br.
</p>
</body>
</html>
Ketikan kode tersebut pada notepad kemudian simpan dalam format .html. Kemudian buka file tersebut melalui browser dan akan muncul tampilan seperti berikut
Terlihat ada perbedaan tampilan antara teks yang dituliskan pada kode program dan teks yang muncul pada browser. Hal ini dikarenakan pada kode program HTML tidak mengenal spasi dan perpindahan baris tanpa menggunakan tag tertentu. Spasi dan perpindahan baris pada kode program hanya dimaksudkan untuk merapikan kode program tersebut, tidak berpengaruh pada tampilan output pada browser.
2. Background Colour dan Heading
<html>
<body>
<body bgcolor="yellow">
<p>
Perhatikan bahwa halaman ini seharusnya berwarna kuning.
</p>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<h6>Ini adalah heading 6</h6>
<p>Gunakan tag heading hanya untuk membuat heading saja. Jangan
menggunakan tag tersebut hanya untuk membuat tampilan huruf tebal. Gunakan
tag lain untuk keperluan itu. </p>
Output dari kode program tersebut adalah :
1. Paragraf dan line Break
<html>
<body>
<p>
Paragraf ini
mengandung spasi dan baris
dalam kode sumbernya,
tetapi browser
akan mengabaikannya.
Mengapa begitu?
</p>
<p>
Sedangkan yang ini memiliki spasi
panjang.
</p>
<p>
Untuk memotong <br>baris<br>dalam sebuah<br>paragraf,<br>gunakan tag br.
</p>
</body>
</html>
Ketikan kode tersebut pada notepad kemudian simpan dalam format .html. Kemudian buka file tersebut melalui browser dan akan muncul tampilan seperti berikut
Terlihat ada perbedaan tampilan antara teks yang dituliskan pada kode program dan teks yang muncul pada browser. Hal ini dikarenakan pada kode program HTML tidak mengenal spasi dan perpindahan baris tanpa menggunakan tag tertentu. Spasi dan perpindahan baris pada kode program hanya dimaksudkan untuk merapikan kode program tersebut, tidak berpengaruh pada tampilan output pada browser.
2. Background Colour dan Heading
<html>
<body>
<body bgcolor="yellow">
<p>
Perhatikan bahwa halaman ini seharusnya berwarna kuning.
</p>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<h6>Ini adalah heading 6</h6>
<p>Gunakan tag heading hanya untuk membuat heading saja. Jangan
menggunakan tag tersebut hanya untuk membuat tampilan huruf tebal. Gunakan
tag lain untuk keperluan itu. </p>
Output dari kode program tersebut adalah :
 |
REFERENSI
:
0 komentar:
Posting Komentar