Mari
belajar HTML.
Jika anda baru terjun di dunia maya alias pemula (newbie) dan
tertarik ingin belajar HTML untuk membuat website sendiri maka anda tidak salah
datang ke blog ini, karena disini anda akan mendapatkan tutorial, tips, triks
dan artikel-artikel tentang bagaimana cara belajar HTML untuk membuat website.
Di Internet sebenarnya kita bisa saja mendapatkan banyak
template baik yang gratis maupun yang berbayar, namun kadang tidak sesuai
dengan keinginan (selera) kita. Maka kita harus meng-edit dan melakukan
perubahan-perubahan. Di dalam mengedit dan melakukan perubahan inilah kita
harus mengerti dan memahami bahasa HTML.
Di blog ini anda akan mendapatkan tutorial belajar HTML yang
disertai dengan contoh-contoh mulai dari dasar, sehingga akan mudah dipahami
dan sangat cocok bagi anda yang masih pemula. Dan bagi anda yang mengedit atau
membuat suatu halaman web bisa melangkah ke halaman-halaman berikutnya sesuai
dengan topik yang anda inginkan.
Untuk
belajar anda dapat menggunakan program HTML seperti Ms FrontPage, Dreamweaver
atau Text Editor (Notepad), sesuai dengan selera anda masing-masing. Namun
untuk tutorial ini akan diajarkan dengan menggunakan teks editor yang simpel
yaitu Notepad, jika anda ingin teks editor yang lebih interaktif anda bisa
menggunakan Notepad++.
Dalam
belajar sebaiknya anda langsung praktek di program HTML anda, sehingga akan
lebih mudah untuk dipahami, anda ketik atau copy/paste contoh-contoh
HTML-nya di program HTML anda dan preview di browser untuk
melihat hasilnya.
Saya sangat berterimakasih jika anda bersedia memberikan kritik,
saran maupun komentar atas kekurangan, error, broken links dan lainnya, masukan
dari anda sangat membantu untuk perbaikan tutorial maupun blog ini.
Akhir kata saya
mengucapkan terimakasih banyak atas kunjungan anda dan selamat belajar.
Pengenalan HTML
Pengertian
singkat tentang HTML
HTML (Hyper Text Markup Language) merupakan bahasa standar untuk
membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat
tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser
bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format
file seperti teks, grafik, animasi, link maupun audio-video.
Sedangkan Web browser adalah sebuah progam yang dapat
menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita
lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Explorer,
Netscape Navigator, Mozilla Firefox, Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau html. Dimana
kedua perluasan tersebut adalah sama, jadi anda boleh menyimpan file dokumen
HTML dengan extention ".htm" atau ".html".
Untuk mulai belajar HTML kita akan menggunakan Texs Editor,
Notepad. Di bawah ini adalah contoh suatu dokumen HTML yang sangat sederhana.
Buka Notepad, silahkan mulai dengan mengetikkan (copy/paste) kode di bawah ini:
<html> <head> <title>Titel Websiteku</title>
</head> <body> Ini adalah dokumen HTML pertamaku </body>
</html>
Simpan
file tersebut ke C:\My Documents dengan nama "websiteku.htm." Ketika
menyimpan file tersebut dengan Notepad ganti "save as type"-nya
dengan "all files". Kemudian buka browser, dari menu File klik Open
dan tujukan ke C:\My Documents\websiteku.htm "klik Ok" maka halaman
website pertama anda akan ditampilkan.
*Lakukan hal yang sama untuk contoh-contoh selanjutnya.
*Lakukan hal yang sama untuk contoh-contoh selanjutnya.
Perintah
didalam dokumen HTML terdiri dari berbagai struktur penyusun seperti tag,
elemen, atribut dan nilai. Tag terdiri dari lambang-lambang
khusus seperti: " <", " >" dan "/", untuk
menuliskannya di dalam dokumen HTML dimulai dengan tag pembuka "
<…>"dan diakhiri dengan tag penutup " </…>".
Kemudian di dalam tag tersebut terdapat teks seperti contoh diatas :html, head,
title,body dan yang lainnya ini disebut dengan Elemen HTML.
Elemen
HTML kemudian ada yang memiliki atribut dan nilai tertentu,
seperti contoh untuk membuat warna latar belakang (background): <body
bgcolor="0000ff">, body merupakan elemen, bgcolor adalah atribut
dan 0000ff merupakan nilai (value).
Elemen HTML mempunyai tiga hal penting yaitu: tag pembuka, isi,
dan tag penutup. Sebagai contoh: Elemen html mempunyai tag pembuka "
<html>" dan tag penutup " </html>" dan yang berada
diantaranya merupakan isi atau konten dari elemen html tersebut. Untuk menuliskan
Elemen HTML bisa menggunakan huruf besar maupun huruf kecil. Contoh:
<HTML>, <HtMl>, <HTml>, <html>, semuanya adalah sama.
Tag Dasar HTML
Komponen dasar dari suatu dokumen HTML terdiri dari tag elemen
HTML, HEAD dan BODY. Berikut ini adalah penjelasan dari Tag Elemen tersebut:
<html> <head> <title>Disini titel
websiteku</title> </head> <body> Disini adalah konten yang
tampil di browser </body> </html>
Tag pertama pada dokumen HTML diatas adalah: "
<html>" tag ini merupakan awal dari suatu dokumen HTML, dan tag
" </html>" merupakan akhir dari dokumen HTML. Isi keseluruhan
dari suatu dokumen HTML selalu berada diantara tag <html>…</html>.
Kemudian tag " <head>…</head>" (header)
adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title,
meta, style, script dll. Selain Title informasi di dalam header ini nantinya
tidak akan di tampilkan di web browser.
Tag berikutnya adalah " <title>…</title>"
merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML,
titel ini akan tampil di titel dan tab browser. Sebagai contoh sewaktu anda
membuka file contoh diatas perhatikan akan muncul tulisan "Disini titel
websiteku".
Tag "<body>…</body>" merupakan isi dari
suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari
berbagai macam format file berupa teks, grafik, link, animasi maupun
audio-video (multimedia).
Format Font HTML
Tag HTML untuk font adalah <font>…</font>, dengan
tag ini kita bisa menentukan jenis font (face), warna (color), dan ukuran
(size), untuk lebih jelasnya mari kita perhatikan contoh berikut ini:
<html> <head></head> <body> Untuk
membuat jenis font (face): <h1><font face="Verdana">Judul
dengan font Verdana</font></h1> <p><font
face="Times">Konten dengan font Times</font></p> Untuk
membuat ukuran (size): <h1><font size="5">Judul dengan
size 5</font></h1> <p><font size="3">Konten
dengan size 3</font></p> Untuk membuat warna font (color):
<h1><font color="blue">Judul dengan warna
biru</font></h1> <p><font color="red">Konten
dengan warna merah</font></p> Contoh komplit untuk membuat jenis
font (face),size dan color: <h1><font face="Verdana"
size="4" color="green">Judulnya Tentang
Font</font></h1> <p><font face="Arial"
size="3" color="#660000">Ini adalah contoh tulisan
dengan <i>pengaturan font</i> yang menggunakan<br> tag HTML
elemen <b>font</b> dengan atribut face, size dan
color...</font></p> </body> </html>
Berikut adalah sebagai referensi bagi anda untuk memanipulasi
atribut face, color dan size:
Atribut
face="Jenis font yang digunakan", contoh: face="Tahoma"
size="Ukuran dari font (1-7)", contoh: size="3"
size="Memperbesar ukuran font", contoh: size="+1"
size="Memperkecil ukuran font", contoh: size="-1"
color="Warna dari font", contoh: color="blue"
color="Warna dari font", contoh: color="#FF0000"
face="Jenis font yang digunakan", contoh: face="Tahoma"
size="Ukuran dari font (1-7)", contoh: size="3"
size="Memperbesar ukuran font", contoh: size="+1"
size="Memperkecil ukuran font", contoh: size="-1"
color="Warna dari font", contoh: color="blue"
color="Warna dari font", contoh: color="#FF0000"
Sesuai dengan recomendasi dari World Web Consortium (W3C), Untuk
HTML 4.0 keatas, tag <font> tidak dipergunakan lagi, sebagai gantinya
dibuat tag <style> atau disebut dengan Cassading Style Sheets (CSS).
Dengan CSS penggunaannya akan lebih kompleks dan lebih luas lagi karena dapat
dikombinasikan dengan tag elemen-elemen lainnya di dalam dokumen HTML. Berikut
adalah contoh penggunaan tag style sheets:
<html> <head></head> <body> Untuk
membuat jenis font (face): <h1
style="font-family:verdana">Judul Menggunakan font
verdana</h1> <p style="font-family:tahoma">Konten
menggunakan font tahoma</p> Untuk membuat ukuran (size): <h1
style="font-size:150%">Judul dengan ukuran 150%</h1> <p
style="font-size:80%">Konten dengan ukuran 80%</p> Untuk
membuat warna font (color): <h1 style="color:blue">Judul dengan
warna Biru</h1> <p style="color:red">Konten dengan warna
merah</p> Contoh komplit untuk membuat jenis font (face),size dan color:
<p style="font-family:verdana;font-size:80%;color:green"> Ini
adalah contoh tulisan pengaturan font dengan <i>Cassading Style
Sheets</i> (CSS) yang<br> menggunakan tag HTML elemen
<b>style:</b> font-family, font-size dan color...</p>
</body> </html>
Untuk mengetahui lebih lanjut tentang CSS, nanti akan dibuat tutorial
khusus untuk membahas hal ini.
Format text HTML
Untuk menulis biasanya ada paragraf dan baris baru, lantas bagaiman
cara menuliskannya di dokumen HTML?. Dari contoh yang sudah kita buat
sebelumnya, coba tambahkan dengan tag-tag berikut ini:
<html> <head> <title>Selamat Datang di
Websiteku</title> </head> <body> Ini adalah halaman HTML
pertamaku. <p>Aku sedang membuat paragraf dan ini contohnya.</p>
<p>Ini contoh paragraf yang lainnya.</p> <p>Ini juga paragraf
mm...tapi de-<br> ngan baris baru.<br> Ini baris baru yang
lain.</p> </body> </html>
Untuk membuat suatu paragraf, tag elemennya adalah
<p>…</p>, dan untuk baris baru adalah <br>, perlu diketahui
bahwa sebagian tag elemen HTML tidak memerlukan tag penutup, sebagai contoh
adalah <br> ada juga <hr>, apa itu <hr>?, coba lanjutkan lagi
dengan contoh berikut ini:
<html> <head> <title>Selamat Datang di
Websiteku</title> </head> <body> <hr> <h1>Ini
adalah halaman HTML pertamaku.</h1> Dikerjakan oleh: <!-- Tolong
isikan dengan nama anda --> <hr> <p>Aku sedang membuat paragraf
dan ini contohnya.</p> <p>Ini contoh paragraf yang
lainnya.</p> <p>Ini juga paragraf mm...tapi de-<br> ngan
baris baru.<br> Ini baris baru yang lain.</p> </body>
</html>
Nah..udah
tau kan apa itu <hr>. Garis Horizontal <hr> juga tidak menggunakan
tag penutup. Untuk melihat tag-tag apa saja yang tidak memerlukan tag penutup
dapat dilihat di artikel tentang tag-tag html tanpa tag penutup.
Selanjutnya tag <h1>…</h1> disebut dengan Heading,
merupakan ukuran teks yang biasa di pakai untuk judul, bab, maupun sub-bab
lainnya. Ukurannya ada 6 jenis mulai dari <h1> sampai <h6>, ukuran
yang paling besar adalah h1 dan yang terkecil adalah h6.
Selanjutnya tag <!--…--> adalah Comments digunakan untuk
memasukkan (menyisipkan) suatu komentar di dalam HTML. Suatu comments akan
diabaikan oleh browser. Kamu dapat menggunakan komentar untuk menjelaskan
sesuatu hal.
Dibawah ini adalah contoh format teks yang sering digunakan di
dalam dokumen HTML :
<html> <head></head> <body> <hr> <h1>Ini
adalah halaman HTML pertamaku.</h1> Dikerjakan oleh: <!-- Tolong
isikan dengan nama anda --> <hr> <p>Aku sedang mempelajari
format-format teks.<br> Contoh-contohnya adalah sebagai
berikut:</p> <p>Teks Normal<br> <tt>Teks mesin
ketik</tt><br> <b>Teks tebal (bold)</b><br>
<strong>Teks tebal dengan perintah Strong</strong><br>
<i>Teks dengan italic (miring)</i><br> <em>Teks miring
dengan perintah Emphasized</em><br> <u>Teks bergaris bawah
(underline)</u><br> <strike>Teks tercoret
(strike)</strike><br> <big>Teks lebih besar dari
normal</big><br> <small>Teks lebih kecil dari
normal</small><br> Teks menggunakan Subscript: Molekul Air adalah
H<sub>2</sub>O<br> Teks menggunakan Superscript: Hasil dari 10<sup>2</sup>=100<br></p>
</body> </html>
Preview
Kemudian untuk menampilkan teks sesuai dengan yang tertulis kita gunakan tag <pre>…</pre>, misalnya jika anda menuliskan syair sebuah lagu atau puisi:
Kemudian untuk menampilkan teks sesuai dengan yang tertulis kita gunakan tag <pre>…</pre>, misalnya jika anda menuliskan syair sebuah lagu atau puisi:
<html> <body>
<pre> <b>PUITUIS ASA</b>
Hari ini... Aku sedang belajar...
Belajar tentang HTML.
Sulit 'ntuk dimengerti, Karena
banyaknya teks-teks aneh. Tapi biarlah...
Akan kucoba... Sampai berhasil.
</pre> </body> </html>
Hyperlink HTML
Hyperlink digunakan untuk
menghubungkan antar dokumen di dalam web. Tag HTML Hyperlink biasa disebut
dengan anchor (a) kemudian diikuti dengan href sebagai alamat tujuan dari link
tersebut. Berikut kita akan membuat suatu Hyperlink ke suatu alamat url:
<html> <head></head> <body> <p>Aku
sekarang sedang membuat hyperlink</p> Jika anda ingin mengunjungi
Microsoft <a href="http://www.microsoft.com/">Klik
disini</a><br> <a href="http://www.yahoo.com/">Link
ini</a> akan membawa anda ke Yahoo.com <p>Untuk membuat hyperlink
url agar dibuka pada jendela browser yang baru:<p> <a
href="http://www.mp3.com/" target="_blank">Website
Musik</a> <p>Agar hyperlink tidak bergaris bawah:<p> <a
href="http://www.mp3.com/"target="_blank"
style="text-decoration: none">Website Musik</a>
<p>Hyperlink ke suatu halaman tertentu dalam web:<p> <!--dengan
catatan anda harus tau nama halaman tujuan tersebut--> <a
href="http://htmlcssguides.com/belajar-css/">Link ini</a>
akan membawa anda ke halaman belajar css. </body> </html>
Untuk membuat hyperlink dengan menggunakan gambar (image).
Pastikan gambar tersebut berada pada folder yang sama dengan dokumen html anda
dan harus tahu nama dan ektensinya, kemudian ganti ke atribut yang bertuliskan
scr, misalkan jika nama gambar tersebut adalah yahoo.gif, maka :
<a href="http://www.yahoo.com"> <img
src="yahoo.gif" border="0" width="147"
height="31"></a>
Img merupakan atribut untuk suatu image (gambar), border adalah garis yang mengelilingi sisi image, width dan height merupakan lebar dan tinggi dari image. Kreatiflah untuk menganti nilai yang ada diantar tanda "…"sehingga anda akan lebih mengerti. Untuk memposisikan gambar, tambahkan dengan atribut align="…", left= kiri, center= tengah dan right= kanan.
<a href="http://www.yahoo.com"> <img
src="yahoo.gif" border="0" width="147"
height="31" align="left"></a>
Sekarang coba geser mouse anda ke gambar di atas, jangan di-klik, perhatikan akan ditampilkan suata tulisan singkat mengenai gambar tesebut, ini disebut dengan screen tips, cara membuatnya adalah menambahkan title pada tag anchor (a) sehingga menjadi:
<a href="http://www.yahoo.com" title="Hai...
klik gambar ini maka anda akan dibawa ke Yahoo.com"><img
src="contoh.jpg" border="0" width="147"
height="31" align="left"
alt="yahoo"></a>
Agar cepat mengakses internet kita boleh mengatur browser untuk
tidak menampilkan image (gambar). Dan semua gambar akan ditampilkan dengan teks
alternatif (alt), jika gambar tesebut tidak memiliki alternatif teks maka hanya
akan dilambangkan dengan lambang x.
<a href="http://www.yahoo.com"> <img
border="0" src="contoh.jpg" width="120"
height="30" align="left" alt="Text Alternatif
Yahoo.com"></a>
Dalam
contoh ini src atau source yaitu contoh.jpg sengaja dihapus agar alt-nya
ditampilkan, maka hasilnya adalah:
Background HTML
Dengan
menggunakan latar belakang (background) maka website kita akan nampak semakin
menarik. Untuk memasukkan latar belakang kita bisa menggunakan pilihan warna
maupun grafik (gambar).
Sekarang kita mulai dengan menggunakan pilihan warna:
Sekarang kita mulai dengan menggunakan pilihan warna:
<html> <head></head> <body
bgcolor="#FF99FF"> <p>Hai.. Saat ini saya sedang belajar
membuat latar belakang dengan warna</p> <p>Kalau anda kurang suka
dengan warnanya... ganti aja deh... kode warnanya... </p> </body>
</html>
Preview
Untuk nilai dari atribut bgcolor diatas anda bisa menggunakan Kode hexadecimal, Nilai RGB atau Nama dari warna tersebut.
Coba anda ganti nilai dari atribut bgcolor dengan contoh dibawah ini:
Untuk nilai dari atribut bgcolor diatas anda bisa menggunakan Kode hexadecimal, Nilai RGB atau Nama dari warna tersebut.
Coba anda ganti nilai dari atribut bgcolor dengan contoh dibawah ini:
<body bgcolor="#FFFF00"> <body
bgcolor="rgb(250,250,0)"> <body bgcolor="yellow">
Hasilnya
akan sama. Ikuti link berikut ini untuk mengetahui Kode Hexadecimal dan Nilai RGB dari suatu warna,
tapi maaf untuk nama warnanya cari sendiri aja deh…
Selanjutnya membuat latar belakang dengan grafik atau gambar.
Pertama anda harus punya gambar yang ber-extention .gif, .jpg
atau .png yang akan dijadikan background, masukkan (copy) gambar tersebut ke
folder tempat file dokumen HTML anda berada, dan harus tahu nama dan perluasan
(extention) dari file tersebut, misalkan nama filenya adalah: background.jpg
<html> <head></head> <body
background="background.jpg"> <font
color="blue"><h1 color="red">Selamat datang di
Websiteku</h1></font><hr color="#ff0000"
size="2"> <p><font face="Verdana"
size="4" color="black">Hai... Saat ini saya sedang
belajar membuat latar belakang dengan gambar,<br> Biar bagaimanapun anda
diwajibkan harus menyukainya...</font></p> </body>
</html>
Kemudian latar belakang dapat juga menggunakan gambar yang ada
di website orang lain, tapi dengan catatan anda harus sedang terhubung ke
internet (online) dan harus tahu alamat url dari gambar tersebut di internet.
Untuk mengetahui alamat suatu gambar klik kanan gambar tersebut kemudian pilih
properties dan lihat image location, copy alamat tersebut dan ganti ke contoh
dibawah ini diawali dari http:
<html> <head></head> <body
background="http://i52.tinypic.com/nmm2cz.jpg"> <p>Hai..
Saat ini saya sedang belajar membuat latarbelakang dengan menggunakan gambar
dari website orang lain! hua ha..ha..ha..</p> <p>Mudah-mudahan yang
punya website ngamuk sekalian deh...siapa takut!!</p> </body>
</html>
Tag
<font> termasuk
salah satu (Deprecated
tags) dimana saat ini sudah jarang digunakan karena sudah ada
alternatif pengganti yang lebih baik untuk tag tersebut. Untuk Tag <font>
sebagai gantinya digunakan atribut style atau CSS. Untuk penjelasan singkat
tentang CSS ini bisa di baca di Belajar CSS.
Pada tulisan
sebelumnya tentang Belajar HTML dengan topik Format Font HTML telah dibuat beberapa contoh format font dengan
menggunakan tag <font>. Di tutorial HTML ini kita akan melupakan tag
tersebut dan beralih menggunakan atribut style.
Untuk
mengganti jenis font digunakan properti font-family:
<p style="font-family:Georgia">Tulisan dengan font-family Georgia</p>
Hasil:
Tulisan dengan font-family Georgia
Untuk
melakukan eksperimen lebih lanjut anda bisa mengganti jenis font-nya dengan
font-font yang bisa dilihat di Jenis-jenis Font Family untuk CSS
Untuk
membuat tulisan miring digunakan properti font-style:
<p style="font-style:italic">Membuat tulisan miring</p>
Hasil:
Membuat
tulisan miring
Untuk
membuat tulisan tebal digunakan properti font-weight:
<p style="font-weight:bold">Membuat tulisan tebal</p>
Hasil:
Membuat
tulisan tebal
Untuk
mengatur ukuran font digunakan properti font-size:
<p style="font-size:16px">Tulisan dengan ukuran font 16px</p>
Hasil:
Tulisan dengan ukuran font 16px
Untuk pengaturan ukuran font-size dapat
menggunakan satuan px, em, % atau pt. Kode HTML berikut akan menghasilkan
ukuran font yang sama.
<p style="font-size:16px">Tulisan dengan ukuran 16px</p> <p style="font-size:100%">Tulisan dengan ukuran 100%</p> <p style="font-size:1em">Tulisan dengan ukuran 1em</p> <p style="font-size:12pt">Tulisan dengan ukuran 12pt</p>
Hasil:
Tulisan dengan ukuran 16px
Tulisan dengan ukuran 100%
Tulisan dengan ukuran 1em
Tulisan dengan ukuran 12pt
Untuk
membuat warna font digunakan properti color:
<p style="color:blue">Tulisan ini akan berwarna biru</p>
Hasil:
Tulisan ini akan berwarna biru
Untuk kode warna bisa menggunakan nilai RGB, Hexadecimal
atau Nama Warna. Kode HTML berikut akan menghasilkan warna tulisan yang sama.
<p style="color:rgb(0,128,0)">Membuat warna tulisan dengan Nilai RGB</p> <p style="color:#008000">Membuat warna tulisan dengan Kode Hexadecimal</p> <p style="color:green">Membuat warna tulisan dengan Nama Warna</p>
Hasil:
Membuat warna tulisan dengan Nilai RGB
Membuat warna tulisan dengan Kode
Hexadecimal
Membuat warna tulisan dengan Nama
Warna
Ikuti link
berikut untuk melihat Kode
Hexadecimal dan Nama Warna atau
gunakantool kode warna untuk melihat nilai RGB.
Atribut style dapat memiliki beberapa properti
dengan dibatasi oleh tanda titik koma.
<p style="font-family:Georgia;font-size:16px;font-weight:bold;">Contoh tulisan dengan font-family, font-size dan font-weight</p>
Hasil:
Contoh tulisan dengan font-family,
font-size dan font-weight.
Kemudian
style tersebut diatas dapat di persingkat dengan menggunakan propertifont.
<p style="font:bold 16px Georgia">Contoh tulisan dengan properti font.</p>
Hasil:
Contoh tulisan dengan properti font.
Hyperlink atau sering
di singkat dengan link penjelasan serta contoh-contohnya dapat di lihat di
Belajar HTML tentang Hyperlink HTML.
Sedikit koreksi dari contoh link dengan gambar yang kita buat disana yaitu:
<a href="http://www.yahoo.com" title="Hai... klik gambar ini maka anda akan dibawa ke Yahoo.com"><img src="contoh.jpg" border="0" width="147" height="31" align="left" alt="yahoo"></a>
Atribut
border dan align merupakan deprecated
atribut jika di gunakan di
dalam tag <img> jadi kita dapat menggantinya dengan atribut style dengan
properti border untuk atribut border dan properti float untuk atribut align.
<a href="http://www.yahoo.com" title="Hai... klik gambar ini maka anda akan dibawa ke Yahoo.com"><img src="yahoo.gif" style="border:none;float:left" width="147" height="31" alt="yahoo"/></a>
Hasil:
Lorem ipsum dolor sit amet, nulla gravida fusce,
sem id. Lectus justo condimentum. Arcu fringilla velit. Pretium elit id,
scelerisque penatibus fermentum, adipiscing dui. Habitasse ut. Ac in, semper
aliquam ligula, quisque class tellus.
Hyperlink
yang akan kita pelajari dalam tutorial ini sebagai tambahan dari pelajaran HTML
sebelumnya antara lain: Thumbnail link. Thumbnail
link digunakan untuk gambar yang berukuran besar. Caranya dengan membuat
duplikat dari gambar tersebut dengan ukuran yang jauh lebih kecil yang disebut
dengan thumbnail. Jadi gambar ukuran besar tersebut baru ditampilkan setelah
kita mengklik gambar tumbnail tersebut.
<a href="lokasi gambar original"><img src="lokasi gambar thumbnail"></a>
Contoh:
<a href="images/besar-1160X700px.jpg"><img src="images/kecil-150X100px.jpg" style="border:none" width="150" height="100" title="Klik untuk melihat gambar original" alt="contoh tumbnail" /></a>
Hasil:
Membuat
link di dalam satu halaman website.
Pada tulisan ini tepatnya pada bagian atas
setelah titel Hyperlink HTML saya menambahkan tag di bawah ini:
<a name="top"></a>
Dengan tag tersebut kita dapat membuat link ke
lokasi tersebut dengan membuat link seperti berikut ini:
Klik link berikut untuk <a href="#top">Kembali ke atas</a>
Hasil:
Klik link
berikut untuk Kembali ke atas
Dengan cara diatas kita juga bisa membuat link
ke suatu halaman website dan langsung melompat ke topik tertentu di dalam satu
halaman.
Link berikut akan membawa anda ke halaman Belajar HTML dengan topik <a href="http://htmlcssguides.com/belajar-html#hyperlink-html">Hyperlink HTML</a>.
Hasil:
Link berikut
akan membawa anda ke halaman Belajar HTML dengan topik Hyperlink HTML.
Contoh diatas dapat dibuat dengan menambahkan
tag berikut sebelum titel Hyperlink HTML di dalam halaman tujuan seperti contoh
diatas adalah halaman Belajar HTML:
<a name="hyperlink-html"></a>
Atau bisa juga dengan menambahkan atribut
"id" di dalam tag titel. Seperti contoh diatas, titel Hyperlink HTML
tersebut berada di dalam tag <h3> jadi kita bisa menuliskan:
<h3 id="hyperlink-html">Hyperlink HTML</h3>
Untuk membuat link ke lokasi tersebut kita harus
membuat link ke halaman utamanya dulu baru kemudian di ikuti dengan nama atau
id dengan format: "#nama-link".
<a href="http://htmlcssguides.com/belajar-html#hyperlink-html">Hyperlink HTML</a>
Hasil:
Membuat
Email Link.
<a href="mailto:alamat email">link teks</a>
Contoh:
Jika ada masalah silahkan kirim <a href="mailto:support@nama-domain.com">Email</a> ke bagian pelayanan.
Hasil:
Jika ada
masalah silahkan kirim Email ke bagian pelayanan.
Dengan gambar atau image akan
membuat website lebih menarik dan enak di pandang, tapi perlu diperhatikan
bahwa semakin banyak gambar di website kita maka semakin lama juga waktu yang
dibutuhkan untuk mengakses website kita.
Format
Gambar
Untuk format gambar ada 3
macam yang sering digunakan yaitu: GIF, JPG dan PNG. GIF dan PNG bisa digunakan
untuk membuat gambar yang transparan serta biasa juga digunakan untuk gambar
yang warnanya minim seperti untuk logo, banner, icon, dsb, Gif bisa membuat
gambar animasi juga. Untuk menampilkan gambar yang berkualitas bagus dengan
warna yang memadai digunakan format JPG.
Memasukkan
gambar ke HTML
Untuk memasukkan gambar ke
dalam dokumen HTML digunakan elemen img di ikuti dengan src (source) sebagai
sumber atau lokasi dari gambar.
<img src="lokasi gambar" />
Ketika
memasukkan gambar ke dalam dokumen HTML ada tiga atribut yang sangat penting
harus selalu disertakan dengan elemen img yaitu alt, width dan height.
Alt (alternate) adalah
sebagai teks alternatif yang ditampilkan oleh browser ketika gambar tidak dapat
ditampilkan atau ditemukan sedangkan width dan height adalah ukuran lebar dan
tinggi gambar dalam satuan pixel(px).
<img src="lokasi gambar" alt="teks alternatif" width="lebar" height="tinggi" />
Contoh:
<img src="http://htmlcssguides.com/images/gambar-avril.jpg" alt="Gambar Avril" width="100" height="100" />
Hasil:
Memposisikan
Gambar
Untuk memposisikan gambar ke
kiri dan ke kanan digunakan atribut style dengan properti float di ikuti dengan
nilai (value) left (kiri) atau right (kanan).
Contoh
membuat gambar disebelah kanan
<img src="http://htmlcssguides.com/images/gambar-avril.jpg" style="float:right;" alt="Gambar Avril" width="100" height="100" />
Membuat
gambar di tengah dokumen
Untuk membuat gambar berada
ditengah dokumen HTML kita harus memasukkan gambar tersebut di dalam blok
elemen seperti p, div, table dsb. Kemudian kita masukkan atribut style dengan
properti text-align kedalam elemen blok tersebut, dalam contoh kita akan
menggunakan elemen div.
<div style="text-align:center;"><img src="http://htmlcssguides.com/images/gambar-avril.jpg" alt="Gambar Avril" width="100" height="100" /></div>
Kalau
sebelumnya kita menggunakan atribut background dan bgcolor dalam pelajaran HTML
tentang Background HTML,
sekarang kita akan belajar membuat latar belakang atau background tersebut
dengan menggunakan atribut style.
Untuk membuat
background dengan warna di
gunakan properti background-color.
Membuat background di halaman website dengan
warna:
<body style="background-color:yellow">...</body>
Contoh di dalam dokumen HTML:
<html> <head></head> <body style="background-color:yellow"> <h1>Contoh membuat background warna dengan atribut style background-color.</h1> </body></html>
Hasil: lihat Preview
Contoh background di dalam tag HTML:
<p style="background-color:aqua">Paragraf dengan background aqua</p>
Hasil:
Paragraf dengan background aqua
Untuk nilai dari properti background-color
tersebut kita bisa menggunakan kode RGB, Hexadecimal maupun Nama Warna.
<p style="background-color:rgb(127,255,212)">Warna background menggunakan kode RGB</p> <p style="background-color:#7fffd4">Warna background menggunakan kode Hexadecimal</p> <p style="background-color:aquamarine">Warna background menggunakan Nama Warna</p>
Hasil dari ketiga kode HTML diatas akan sama:
Warna background menggunakan
kode RGB
Warna background menggunakan
kode Hexadecimal
Warna background menggunakan
Nama Warna
Klik link
berikut untuk melihat kode hexadecimal dan nama warna, untuk RGB dapat menggunakan tool kode warna RGB.
Untuk membuat
background dengan gambar di
gunakan properti background-image.
Membuat background dengan gambar di dokumen
HTML:
<body style="background-image:url(lokasi dan nama gambar)">...</body>
<html> <head></head> <body style="background-image:url(background.jpg)"> <h1>Contoh membuat background gambar dengan atribut style background-image.</h1> </body></html>
Hasil: lihat Preview
Maka secara otomatis browser akan mengisi penuh
halaman website dengan gambar tersebut secara berulang (repeat) baik secara
vertikal maupun horizontal.
Dengan adanya pengulangan ini maka dengan gambar
ukuran 1 x 2px, hanya 2 titik (pixel) yaitu putih dan abu-abu kita dapat
membuat background seperti berikut.
Hasil: Lihat Preview
Untuk
pengaturan pengulangan tersebut dapat menggunakan properti background-repeat dengan nilai atau value: no-repeat,
repeat, repeat-x dan repeat-y.
Contoh jika kita ingin membuat pengulangan
secara horizontal maka kita dapat menambah kode repeat-x ke dalam contoh
diatas:
<body style="background-image:url(background.jpg);background-repeat:repeat-x;">...<body>
Hasil: lihat Preview
Sedangkan untuk pengulangan secara vertikal kita
tambahkan kode repeat-y:
<body style="background-image:url(background.jpg);background-repeat:repeat-y;">...<body>
Hasil: lihat Preview
Anda bisa melakukan latihan selanjutnya dengan
mengganti gambar dan nilainya.
Untuk
memposisikan background digunakan properti background-position dengan value top=atas, right=kanan,
bottom=bawah left=kiri dan center=tengah atau dengan nilai x dan y.
Sebagai contoh kita akan menggunakan gambar
berikut yang berukuran 800px X 1px dengan nama bg-example.png.
Kita akan membuat agar gambar tersebut berada
tepat ditengah dokumen dengan pengulangan (repeated) secara vertikal.
<body style="background-color:#000;background-image:url(bg-example.png);background-repeat:repeat-y;background-position:center;">
Tidak ada komentar:
Posting Komentar