BELAJAR PEMROGRAMAN HTML
00.42 | 
Diposting oleh
Unknown
Dasar HTML
Langkah pertama untuk belajar HTML guna membuat
webpage
adalah menentukan editor teks yang digunakan untuk
mengetikkan
kode HTML. Dan itu sudah Anda lakukan sebelumnya, di
mana
penulis mencontohkan dengan Notepad++.
belajar sambil praktek. Ini adalah dasar-dasarnya,
di bagian belakang
bab ini akan dijelaskan lebih detail tentang tag-tag
tertentu.
Struktur dasar dokumen
HTML adalah sebagai berikut:
<html>
<head> <title>Disini Judul Dokumen HTML</title> </head> <body> Disini penulisan informasi Web </body> </html> |
Apa Itu Tag HTML
Sebenarnya bahasa HTML untuk membuat halaman web
sangat
mudah untuk dipelajari. Untuk membuat halaman HTML,
Anda cuma
perlu mengetikkan teks, kemudian memasukkan tag-tag
khusus di
mana tag ini akan memengaruhi tampilan teks yang ada
di antaranya.
Jadi secara garis besar, format untuk menuliskan tag
HTML adalah:
<TAG>Teks yang akan dipengaruhi oleh
tag</TAG>
Dari format di atas, Anda dapat melihat bahwa semua
tag HTML ada
2 jenis, yaitu tag pembuka dan tag penutup.
Perbedaan tag pembuka
dan tag penutup adalah adanya penambahan karakter
“/” di tag
penutup sebelah nama tag tersebut.
Misalnya untuk tag <title> akan ditutup oleh
tag </title>. Jadi, seperti
Anda perhatikan, HTML memformat teks dengan cara
mengapit teks
tersebut dengan awalan tag pembuka dan akhiran tag
penutup.
HTML sebenarnya cuma terdiri atas tag-tag seperti
ini. Jadi, apa
yang harus Anda lakukan sebagai webmaster adalah
dengan
mengutak-atik tag ini dan menerapkannya pada tempat
yang seharusnya
agar Anda mendapatkan tampilan hasil akhir halaman
web
sesuai dengan keinginan Anda.
Mendefinisikan
Struktur Halaman
Dari sekian banyak tag yang ada. Tag-tag yang wajib
ada di setiap
webpage adalah tag yang mendefinisikan struktur
halaman. Tag ini
wajib
hukumnya ada di setiap halaman web. Untuk mendefinisikan
struktur dokumen HTML, bagian awal dari semua kode
harus diawali
dengan kode <html> dan kemudian ditutup dengan
kode </html>.
Jadi, semua kode di antara tag ini-lah yang dianggap
sebagai
dokumen HTML. Formatnya seperti berikut:
<html>
Semua kode di sini, akan dianggap dokumen HTML
</html>
Di dalam tag <html> tersebut yang merupakan
dokumen HTML juga
masih dibagi menjadi 2 tag lagi. Tag pertama adalah
<head> dan
fungsinya sebagai tempat untuk memperkenalkan
halaman HTML
tersebut. Jadi, sekarang dokumen HTML Anda menjadi
seperti berikut:
<html>
<head>
Ini informasi mengenai halaman web
</head>
</html>
Setelah head, bagian kedua adalah <body>. Di
bagian inilah, Anda
akan meletakkan teks dan berbagai hiasan serta file
multimedia di
halaman web. Tag <body> ini diletakkan di
bawah penutup tag
<head>.
<html>
<head>
Ini head
</head>
<body>
Semua teks body diisikan di sini
</body>
</html>
Mudah bukan, struktur halaman HTML memang sangat
simple.
Bahkan Anda yang baru belajar sekalipun akan
langsung mudah
mempraktekkannya. Anda akan memelajarinya di subbab
lain di bab
ini. Subbab sekarang masih pendahuluan saja.
Menambahkan
Title
Title adalah judul halaman web. Judul ini berbeda
dengan nama file
HTML
yang nanti dihasilkan. Karena nama file akan Anda buat saat
menyimpan dokumen menggunakan editor teks, sementara
title
akan diisikan di dalam tag di kode HTML-nya.
Untuk mendefinisikan title di dokumen HTML, tag yang
dipakai
adalah tag <title>. Misalnya untuk membuat
judul “Belajar HTML
yuuk!” maka Anda tinggal membuat kode berikut:
<title> Belajar HTML yuuk!</title>
Nah, tag <title> ini harus diletakkan di dalam
tag <head> sehingga
misalnya Anda akan membuat halaman kosong namun
dengan judul
di atas, maka tampilannya terlihat seperti berikut:
<html>
<head>
<title> Belajar HTML yuuk! </title>
</head>
<body>
</body>
</html>
Karena di tag <body> masih kosong, maka
halaman ini tidak akan
terlihat di browser. Yang terlihat hanya teks di tag
saja. Berikut ini
tampilannya jika Anda sudah menyimpan dokumen ke
dalam format
HTML.
Gambar 2.7 Hasil pembuatan halaman yang masih kosong, namun
dengan title yang sudah ada
(lihat title bar di kiri atas)
Menambahkan Teks
ke Body
Setelah title dari webpage dibuat, barulah Anda
dapat memasukkan
konten dari halaman web. Konten ini diletakkan di
antara tag <body>
dan
</body>.
<html>
<head>
<title> Belajar HTML yuuk! </title>
</head>
<body>
Teks ini adalah isi dari halaman web.
Dengan menggunakan tag body, semua apa yang Anda
ingin tampilkan
akan terlihat di browser.
</body>
</html>
Gambar 2.8 Isi dari tag body
Dari gambar di atas, terlihat bahwa tampilan teks
terus disambung
walaupun di kodenya Anda sudah memisahkan teks
menggunakan
Enter (baris baru). Untuk membuat paragraf, Anda
bisa menggunakan
tag <p>.
<html>
<head>
<title> Belajar HTML yuuk! </title>
</head>
<body>
<p>Teks ini adalah isi dari halaman web.
</p>
<p>Dengan menggunakan tag body, semua apa yang
Anda ingin
tampilkan akan terlihat di browser. </p>
</body>
</html>
Gambar
2.9 Konten body menjadi 2 paragraf karena tag <p>
Menggunakan
Heading
Heading adalah bagian dari halaman yang memungkinkan
dipakai
untuk outline. Heading yang digunakan antara heading
1 sampai
heading 6. Heading dibuat menggunakan tag <h1>
sampai <h6>.
Berikut ini contoh penggunaan heading. Walaupun
sebenarnya Anda
bisa membuat layout yang baik tanpa memakai heading,
namun
heading ini nanti juga penting ditinjau dari SEO
(search engine
optimization). Contoh kode pembuatan halaman untuk
heading
adalah:
<html>
<head>
<title>Heading, outline untuk halaman
web</TITLE>
</head>
<body>
<h1>1. Mengenal Komputer</h1>
Komputer adalah komponen yang sangat penting
peranannya
<h2>1.1 Komponen Komputer</h2>
Ada banyak komponen komputer
<h3>1.1.1 Penyimpan Data</h3>
Ada banyak komponen bisa dikategorikan sebagai
storage device.
<h4>1.1.1.1 Hard Drive</h4>
Hard Drive adalah komponen utama penyimpan data yang
memakai
platter
</body>
</html>
Gambar
2.10 Pembuatan outline dengan heading
</html>
Membuat Link
Sebagai seorang netter, tentu Anda tahu
bahwa halaman web
umumnya selalu memiliki link. Link ini
berguna untuk menuju ke
tempat lainnya di belantara WWW. Apa
sebenarnya kode untuk
membuat link itu?
Kode untuk membuat link ternyata amat
mudah. Anda tinggal
menggunakan kode <a> untuk membuat
link. Tapi penggunaan tag
ini lebih kompleks daripada pembuatan
tag lainnya karena Anda
harus menentukan url yang akan dituju.
Berikut ini format pembuatan
link:
<a href="alamat
url">Teks tertentu</a>
URL di sini digunakan, misalnya:
atau
http://www.detiknews.com/read/2009/10/06/093844/1216011/10/jual-
1-tokek-bisa-beli-honda-jazz-nabung-ratusan-juta/
Berikut ini contoh kode simpel untuk
memperkenalkan Anda untuk
membuat link. Nantinya, Anda akan
belajar lebih detail di subbab
berikutnya:
<html>
<head>
<title>Contoh pembuatan
link</title>
</head>
<body>
Gile, harga tokek meroket. Lihat aja
sumber di <a
HREF="http://www.detiknews.com/read/2009/10/06/093844/1216011/10
/jual-1-tokek-bisa-beli-honda-jazz-nabung-ratusan-juta">
Detiknews ini</a>.
</body>
Gambar 2.11 Contoh pembuatan link
Menambahkan
Gambar
Mayoritas halaman web selalu memiliki gambar di
dalamnya.
Dengan gambar, halaman bisa terlihat berwarna dan
tampilannya
lebih bagus. Jika tidak ada gambar, halaman bisa
terlihat membosankan.
Untuk menambahkan gambar, kode HTML pun
mendukungnya.
Pemasukan gambar diakomodasi oleh tag <img>.
Berikut ini format
standar untuk tag <IMG> untuk memasukkan
gambar:
<img src="lokasi_gambar"/>
Misalnya Anda ingin memasukkan gambar dengan nama
file
“gambar.jpg” dengan lokasi ada di satu folder dari
lokasi tempat file
.html Anda berada. Maka Anda tinggal memasukkan
kode:
<img src="gambar.jpg"/>
Contohnya adalah kode berikut:
<html>
<head>
<title>Contoh Pemasukan Gambar</title>
</head>
<body>
<h1>Gambar Kepulauan indonesia</h1>
<img src="gambar.jpg"/>
</body>
</html>
Gambar 2.12 Memasukkan gambar
Menambahkan
Komentar
Komentar di HTML cukup mudah dibuat, yaitu tinggal
memberikan
pembuka <!-- dan penutup -->. Sangat simpel
bukan. Teks-teks yang
ada di dalam komentar ini tidak akan ditampilkan di
halaman
browser.
Memformat Konten
Untuk memformat konten, ada beberapa tag yang perlu
Anda
pahami. Tag-tag ini terus berkembang seiring dengan
perkembangan
teknologi browser yang memungkinkan berbagai format
baru diperkenalkan
untuk mendapatkan hasil tampilan dan efek yang lebih
banyak.
Mengatur Style Teks
Pertama kita akan belajar mengenai bagaimana membuat
style dari
text yang memungkinkan Anda membuat efek tebal,
garis miring,
garis bawah, monospace, dan coret. Efek-efek ini
hampir semuanya
diakomodasi oleh semua browser modern.
1.
Untuk membuat efek tebal, digunakan tag <b> yang merupakan
singkatan
dari bold.
2.
Untuk membuat efek garis miring, digunakan tag <i> yang
merupakan singkatan dari italic.
3.
Untuk membuat garis bawah, digunakan tag <u> yang merupakan
singkatan dari underline.
4. Untuk membuat efek monospace,
digunakan tag <tt> yang
merupakan singkatan dari typewriter text.
5. Untuk membuat efek coret, digunakan
tag <strike>, artinya
coret.
Sebenarnya ada beberapa efek style lain dari
pemrograman HTML,
namun apakah style tersebut dikenali atau tidak,
akan tergantung
pada browser-nya. Namun browser modern umumnya
mendukung 5
efek dasar di atas.
<html>
<head>
<title>Pemformatan Style Teks</title>
</head>
<body>
<h1> Puisiku</h1>
<p>
<b>walau aku tak pergi </b>
</p>
<p>
<i>tapi jiwaku yang kembali</i>
</p>
<p>
<u>ku tak pulang bukan keinginan</u>
</p>
<p>
<tt>tapi keterbatasan dan kelemahan</tt>
</p>
<p>
<strike>adakalanya kenyataan berbeda dengan
keinginan</strike>
</p>
diambil dari:puisicintaku.wordpress.com
</body>
</html>
Apabila
dilihat di browser, terlihat tampilan seperti berikut ini.
Gambar 2.13 Pemformatan dengan
mengganti style dari teks
Untuk mengombinasikan format-format teks di atas,
Anda tinggal
meletakkan tag-tag tersebut pada teks yang
diinginkan. Misalnya
untuk membuat format garis miring, tebal dan coret
secara bersamaan,
Anda dapat menggunakan format berikut:
<b><i><strike>Tulisan ini
mengalami multi format
</strike></i></b>
Berikut ini gambar hasil penulisan kode di atas.
|
|
Selain 5 format dasar di atas, ada juga beberapa
format tambahan
yang masing-masing fungsinya berbeda. Yang pertama
adalah <pre>
di mana fungsinya untuk menghandel pemformatan
seperti spasi,
tab, dan enter di mana sebelumnya tidak diakomodasi
oleh browser.
Berikut ini contoh ilustrasi penggunaan tag
<pre> yang merupakan
singkatan dari preformatting.
<html>
<head>
<title>Pemformatan Style
Teks Preformatting</title>
</head>
<body>
<h1>Contoh sebelum Pre</h1>
Ini baris pertama
Ini baris kedua
</body>
</html>
Gambar 2.15 Sebelum digunakan
fungsi <pre>
Di gambar di atas, walaupun di source code, tulisan
“Ini baris
pertama” berbeda baris dengan “Ini baris kedua”.
Namun di browser,
terlihat kedua baris tersebut digabung. Itu karena
tidak ada pemformatan
<pre>.
Jika diberi <pre>, tampilan akan seperti
tampilan aslinya di kode
sumbernya. Jadi, jika ada tab atau enter, akan
diterapkan. Berikut ini
kode jika di bagian body terlihat diberi kode
<pre>.
<html>
<head>
<title>Pemformatan Style Teks
Preformatting</title>
</head>
<body>
<h1>Contoh sebelum Pre</h1>
<pre>
Ini baris pertama
Ini baris kedua
</pre>
</body>
</html>
Setelah menggunakan pre, tampilan pemformatan akan
menjadi
sesuai dengan di source code-nya. Hanya saja,
terlihat bentuk tulisan
menjadi
seperti tulisan monospace.
Gambar 2.16 Tampilan halaman
setelah di-pre
Berpindah Baris
Untuk membuat tampilan pindah baris, Anda bisa
menggunakan
break. Tag break ini membuat hasil style teks masih
bagus, tidak
seperti <pre> yang membuat tulisan seperti
monospace.
Tag untuk memindahkan teks ke baris berikutnya
adalah tag <br/>.
Tulisan br adalah singkatan dari break atau yang
dimaksud adalah
line break. Apa perbedaan break dengan tag <p>
untuk pembuatan
paragraf?
Jawabnya adalah paragraf akan selalu memiliki jarak
dengan paragraf
di bawahnya. Adapun pemindahan baris dengan break
tidak
memberikan jarak dengan bawahnya. Jadi dengan break,
tulisan
teks masih akan dianggap satu paragraf.
Berikut ini contoh sebelum adanya break dan hanya
menggunakan
paragraf.
<html>
<head>
<title>Sebelum digunakan Break</title>
</head>
<body>
<h1>Sebelum Break</h1>
<p>
Suatu waktu di suatu masa
tersebutlah kisah seorang dara
</p>
<p>
Dara elok berparas rembulan
disayang dimanja oleh Sang Raja
</p>
<p>
Dara cantik sudah remaja
tibalah waktu mencari pendamping
</p>
</body>
</html>
Gambar 2.17 Sebelum diterapkan
break
Adapun berikut ini merupakan kode setelah di dalam
paragraf diberi
tag <br/> untuk memisahkan baris. Dari
tampilan baru ini, Anda juga
akan dapat melihat perbedaan antara tag <p>
dan tag <br>.
<html>
<head>
<title>Setelah digunakan Break</title>
</head>
<body>
<h1>Setelah Break</h1>
<p>
Suatu waktu di suatu masa
<br/>
tersebutlah kisah seorang dara
</p>
<p>
Dara elok berparas rembulan
<br/>
disayang dimanja oleh Sang Raja
</p>
<p>
Dara cantik sudah remaja
<br/>
tibalah waktu mencari pendamping
</p>
</body>
</html>
Gambar 2.18 Setelah diterapkan
break
Memasukkan Garis
Horizontal
Garis horizontal adalah garis yang membujur secara
horizontal di
halaman web. Ini dapat dimasukkan menggunakan tag
<hr/> di kode
Anda. HR ini adalah singkatan dari horizontal
ruler. Garis horizontal
ini adalah salah satu teknik yang bisa dipakai untuk
memisahkan
atau mempartisi konten halaman web Anda.
Langsung saja, berikut ini contoh kode untuk
memasukkan garis
horizontal:
<html>
<head>
<title>Horizontal Line</title>
</head>
<body>
<h1>Puisi dengan HR</h1>
<hr/>
hidup ini sesungguhnya mudah dan sederhana jika anda
tidak
banyak tuntutan.
karena sesungguhnya hidup ini penuh dengan
kebahagiaan
jika anda tak dikuasai oleh ilusi,ambisi dan keakuan
<hr/>
</body>
</html>
Jika dibuka di browser, tampilannya terlihat seperti
berikut. Ada
bagian
horizontal ruler di atas dan bawah teks.
Gambar 2.19 Contoh penggunaan
Horizontal Line
2.3.4 Membuat Aneka Macam List
Sering kali di sebuah website, diperlukan pembuatan
daftar atau list.
Daftar ini ada berbagai macam variasinya di
pemrograman HTML.
Yaitu ordered list, unordered list dan
definition list.
Untuk membuat daftar berurutan, Anda perlu 2 kode:
• Semua list dibuka dengan tag <ol> dan
ditutup dengan tag
</ol>. Tag OL ini adalah singkatan dari
ordered list.
• Tiap item dari list yang ada dibuka dengan tag
<li> dan
ditutup dengan tag </li>. LI ini adalah
singkatan dari list item.
Setelah list bernomor sebelumnya, Anda dapat juga
bisa membuat
jenis yang kedua, yaitu list bullet. Yaitu berjenis
unorderd list. Nama
bullet ini disebabkan browser menampilkan ikon
bulat-bulat di sebelah
kiri tiap list item yang dimasukkan. Kodenya hampir
mirip
dengan ordered list, di mana:
• Semua list dibuka dengan tag <ul> dan
ditutup dengan tag
</ul>. Tag UL ini adalah singkatan dari unordered
list.
• Tiap item dari list dibuka dengan tag <li>
dan ditutup dengan
tag </li>.
Berikut ini kode yang mengandung tipe ordered list
dan unordered
list:
<head>
<title>Unordered dan Orderd List</title>
</head>
<body>
<h1>Daftar Komponen PC</h1>
<ul>
<li>Case</li>
<li>Mother Board </li>
<li>CPU (Central Processing Unit) </li>
<li>RAM (Random Access Memory)</li>
<li>Hard Disk Drive</li>
<li>Video Display Adapter</li>
<li>Monitor </li>
<li>Input Device</li>
<li>Printer</li>
</ul>
<h1> Cara merakit PC</h1>
<ol>
<li>Pasang Prosesor ke Motherboard</li>
<li>Pasang Memory ke Motherboard</li>
<li>Pasang Motherboard ke Casing</li>
<li>Pasang Powersupply dan Kabelnya</li>
<li>Pasang kabel controller depan</li>
<li>Pasang hard drive dan drive
optik</li>
<li>Oke, selesai</li>
</ol>
</body>
</html>
Jika dilihat di browser, tampilan list ini terlihat
seperti berikut.
Gambar 2.20 Hasil tampilan kode
unordered dan ordered list di
browser
Tipe list ketiga adalah definition list. Tipe ini
fungsinya memformat
teks dalam bentuk seperti kamus, sehingga Anda dapat
menuliskan
kata dan mendefinisikan artinya. Jadi tipe ini
memiliki 2 bagian, yaitu
istilah dan arti istilah tersebut. Namun tag-nya ada
tiga, yaitu:
• Kata yang akan dijelaskan menggunakan tag
<dt> yang merupakan
singkatan dari definition term.
• Kata penjelasannya menggunakan tag <dd> yang
artinya
definition description.
• Semua tag ini diawali oleh tag <dl> yang
merupakan singkatan
dari definition list.
Contoh kode HTML yang menampilkan definition list
ini adalah:
<head>
<title>Definition List</title>
</head>
<body>
<h1> Definisi Komponen PC</h1>
<dl>
<dt>Case </dt>
<dd>Tempat untuk menyimpan semua komponen
komputer</dd>
<dt>Mother Board</dt>
<dd>Tempat untuk menancapkan semua komponen
dan
perkabelan</dd>
<dt>CPU (Central Processing Unit)</dt>
<dd> Otaknya komputer</dd>
<dt>RAM (Random Access Memory) </dt>
<dd>Tempat penyimpanan data
sementara</dd>
<dt>Hard Disk Drive</dt>
<dd>Tempat penyimpanan data
permanen</dd>
<dt>Video Display Adapter </dt>
<dd>Tempat me-render gambar</dd>
<dt>Monitor</dt>
<dd>Tempat menampilkan gambar</dd>
<dt>Input Device</dt>
<dd>Tempat memasukkan masukan ke
komputer</dd>
</dl>
</body>
</html>
Jika
dilihat di browser, terlihat webpage seperti ini.
Gambar 2.21 Webpage yang berisi kode untuk definition list
List-list di atas dapat juga dikombinasikan. Caranya sama seperti
ketika meng-combo-kan style pada teks. Jadi, Anda hanya perlu
memainkan peletakan tag di dalam tag list lainnya.
<dl>
<dt>Komponen-komponen komputer yang penting:</dt>
<dd>
List-nya adalah seperti berikut:
<ul>
<li>Monitor</li>
<li>Sistem operasi</li>
<li>CPU</li>
</ul>
</dd>
</dl>
Jika dilihat di browser, tampilan unordered list akan ada di dalam
bagian definition description. Karena tag <ul> ada di dalam tag <dd>.
Membuat Link Lanjutan
Di sub-subbab 2.2.6, Anda sudah belajar membuat link. Sebenarnya
pemformatan link ada beberapa varisai. Pertama adalah tipe link
internal. Ini merupakan tipe link di mana halaman yang mengandung
link dan halaman yang dituju terletak pada satu domain dan letaknya
bisa direlatifkan.
Misalnya Anda punya 2 halaman:
http://www.domain-anda.co.cc/index.html
dan Anda ingin membuat link dari halaman index.html di atas untuk
menuju ke:
http://www.domain-anda.co.cc/bukutamu.html
Dari URL-nya, kedua halaman tersebut terletak di satu folder. Ini
memungkinkan Anda membuat email dengan menentukan alamat
relatif dari halaman kedua melalui halaman pertama. Halaman kedua
bukutamu.html tersebut dapat dispesifikasikan lokasinya dengan
menggunakan nama file-nya saja, karena lokasinya satu folder. Jadi,
Anda bisa menggunakan kode berikut:
Ayo isi buku tamu di <a href="bukutamu.html">Buku tamu gw</A>
Jenis lain adalah link internal. Untuk membuat link internal, Anda
harus membuat dahulu anchor di dalam website Anda. Tempat yang
di-anchor ini nanti dapat diacu dengan link. Jadi, anchor fungsinya
adalah “menandai tempat” sehingga bisa diacu oleh link.
Misalnya Anda ingin memberi nama di bagian tertentu di webpage
dengan nama “iklan”. Maka Anda membuat nama anchor seperti
berikut:
<a name="iklan">Kotak iklan</a>
Maka link ke kotak iklan tersebut dapat dibuat dari halaman yang
sama (misalnya dalam bentuk daftar isi halaman tersebut), dengan
menggunakan kode HTML seperti berikut:
<a href="#iklan">Kotak Iklan</a>
Jika link itu dibuat dari halaman lain, Anda bisa menggunakan kode
HTML seperti berikut:
<a href="http://www.domainanda.
co.cc/file_tertentu.htm#iklan">Lihat kotak iklannya di
sini</a>
Membuat Link Email
Sering kali Anda perlu untuk membuat link yang memungkinkan
user dapat langsung mengklik untuk mengirimkan email ke account
email Anda. Ini bisa juga langsung diakomodasi oleh HTML. Namun
hati-hati, teknik ini juga bisa mendorong robot dari spammer untuk
menuju ke website Anda. Karena itu jangan gunakan kecuali jika
terpaksa.
Untuk membuat link langsung ke email, format kode yang dapat
Anda gunakan adalah seperti berikut:
<a href="mailto:alamatemail@provider.com">Klik untuk kirim email
ke saya</A>
Implementasinya tinggal Anda mengklik link tersebut, maka terbuka
software mail client Anda, seperti Outlook atau Thunderbird dan
kemudian Anda bisa mengirim email.
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar