By : Dhimas Ronggobramantyo
Belajar HTML yang merupakan dasar dari pembuatan website
Ini merupakan artikel pertama yang saya tulis di
website saya ini. Karena diwebsite ini saya akan membagi-bagikan ilmu
apa aja tentang pembuatan website, maka kita pelajari biangnya dulu,
dasar dari semua dasar pembuatan website yaitu HTML.
HTML (Hypertext Markup Language) merupakan bahasa
yang digunakan untuk membuat website. Menggunakan tag untuk
mendeklarasikan sesuatu dan tag tersebut tidak ditampilkan tetapi tag
tersebut memberi tahu browser bagaimana cara menampilkan dokumen
website. Serta dapat saling berhubungan dengan dokumen HTML lain yang
dikenal dengan istilah link.
Suatu halaman website sebenarnya hanya sebuah halaman teks, jika anda
menggunakan browser internet explorer dan anda mengklik view - source, maka anda
dapat melihat teks dari web tersebut. Tetapi teks tersebut diterjemahkan oleh
browser menjadi halaman website yang enak dilihat. Teks merupakan bahasa
universal bagi komputer, yang berarti setiap dokumen teks (termasuk website)
yang anda buat melalui Windows dapat dibaca di sistem perasi lain seperti
Mac OS, Linux, Unix dan lainnya.
HTML dan hal-hal yang berkaitan dengan website distandarisasi oleh sebuah
badan yang disebut World Wide Web Consortium (W3C). Standard terbaru, konsep dan
proposal mengenai starndarisasi web dapat dilihat di
http://www.w3.org. Standar untuk HTML terbaru adalah HTML 4.0 yang telah
didukung oleh bermacam-macam browser seperti Microsoft Internet Explorer,
Netscape Navigator, Opera, Mozilla, Safari dan masih banyak lagi. Browser
menterjemahkan
tag yang terdapat pada dokumen HTML. Kita akan
segera membicarakan mengenai tag.
Suatu halaman web merupakan file teks yang berarti anda dapat membuatnya hanya
dengan menggunakan notepad saja. Bahkan jika anda masih pertama kali mempelajari
HTML, notepad merupakan alat yang tepat. Saya menyarankan untuk menggunakan
editplus karena menurut saya enak aja dipakainya, tetapi anda bebas menggunakan
teks editor lain.
Sekarang buka saja notepad anda dan kita mulai.
Kode HTML pertama
Buka notepad dan tuliskan kode dibawah ini
Hello World
Simpan file tersebut dengan nama hello.html didalam suatu folder (misal c:\webku)
dan buka file HTML tersebut dengan browser kesukaan anda. Hasilnya seperti ini:
Hello <b>World!!</b>
Oke jadi apa yang dimaksud oleh "<" dan ">", ketika anda menuliskan sesuatu
diantara tanda "<" dan ">" maka anda membuat sesuatu yang disebut dengan tag,
kalau anda lihat dikamus bahasa inggris tag artinya tanda/label. Sebagai contoh
tag
<b> maksudnya untuk memulai huruf tebal (bold) dan tag
</b> merupakan tag penutup untuk menghentikan huruf tebal.
Sebuah halaman HTML yang baik harus memiliki tag
<head> dan <body>, tapi kita akan membicarakan masalah ini belakangan.
Yang penting sekarang pahami dulu mengenai tag HTML. Sekarang akan kita pelajari
lebih jauh mengenai tag HTML.
Tag HTML dibagi menjadi dua, yaitu tag HTML yang memiliki penutup
(containers) atau yang berdiri sendiri (standalone).
Containers
Kebanyakan tag HTML adalah containers (kita sebut containers saja sebab sulit
mencari terjemahannya dalam bahasa Indonesia) yang berarti tag tersebut memiliki
pembuka (batas awal) dan penutup (batas akhir). Teks yang berada diantara tag
pembuka dan penutup akan berubah sesuai dengan fungsi dari tag tersebut.
Perhatikan contoh berikut:
Hasil:
Hello World!!
Tag <i> berguna untuk memiringkan teks (italic) tag <i> memiliki penutup yaitu
</i>. Tag penutup selalu ditandai dengan "/". Contoh diatas terdapat teks
World!! diantara tag pembuka <i> dan tag penutup </i> sehingga menghasilkan
tulisan World!! yang miring. Tag pembuka memiliki atribut tetapi tag penutup
tidak memiliki atribut.
Standalone Tag
Beberapa tag tidak memerlukan penutup sebab tag tersebut hanya berfungsi
untuk menempatkan sebuah elemen pada halaman web. Sebagai contoh tag
<img> yang merupakan
tag untuk memasang sebuah gambar didalam halaman web. Tag lain yang tidak
memiliki penutup adalah <br> yang berguna untuk memberi jarak antar teks dan tag <hr> untuk memberi garis. Tag HTML cukup banyak jumlahnya, anda dapat mencarinya dibuku-buku atau
mencarinya melalui google untuk mengetahui apa saja jenis tag HTML. Tapi saya akan beritahu yangpenting-penting saja.
Atribut
Atribut dipasang didalam tag pembuka untuk menambahkan fungsi dari tag
tersebut. Setiap tag memiliki beberapa atribut dan dipasang sesudah nama tag
dibatasi oleh spasi. Urutan atribut tidak perlu diperhatikan. Kebanyakan atribut
memiliki nilai yang dipanggil dengan menggunakan tanda "=" sesudah nama atribut.
Bingung? coba kode berikut ini dijamin anda mengerti:
Hasilnya:
Hello World!!
Tulisan World!! terletak ditengah tag
<font> nah tag <font> memiliki atribut
face, size dan color yang dapat anda ubah nilainya. Cobalah untuk mengubah
ukuran (size) menjadi 3 atau jenis fontnya ubahlah dari verdana menjadi arial.
Kira-kira seperti itu kegunaan atribut. Bagaimana? lanjut?HTML Entity
Jika anda ingin menuliskan karakter khusus dalam web, maka anda perlu
menulisnya menggunakan kode khusus. Kode khusus ini dikenal dengan istilah HTML
entity. Sebagai contoh anda ingin menulis seperti ini:
Saya belajar
web
Anda lihat ada jarak spasi antara belajar dan web. Anda tidak bisa membuat
spasi dengan menekan tombol space bar berkali-kali. Meskipun pada kode HTML
hasilnya terdapat jarak namun browser hanya membacanya sekali, jadi sebanyak
apapun space bar yang tekan browser hanya membacanya satu spasi. Lalu bagaimana
caranya? Spasi dalam HTML memiliki kode HTML entity yaitu
jadi untuk membuat
seperti contoh diatas anda perlu menulisnya seperti ini:
HTML entity selalu diawali dengan "&" dan
diakhiri dengan ";" ada banyak sekali HTML entity anda dapat mencarinya,
dan lagi-lagi saya akan menyuruh anda mencarinya sendiri melalui
google.
Struktur Dokumen HTML
Tadi sudah saya katakan bahwa HTML yang baik memiliki tag
<head>
dan <body>. <head> mendefiniskan bagian
header dari dokumen HTML yang berisi informasi mengenai dokumen HTML tersebut.
Tag <head> tidak memiliki atribut tetapi memiliki container
khusus didalam header seperti <base>, <meta>,
dan <title>. Tag <body> mendefinisikan awal
dari isi website dan ditutup dengan </body>. Tag <body>
berisi isi dokumen yang akan tampil di browser anda. Oke sekarang cobalah kode
berikut ini:
Anda lihat teks yang berada diantara tag
<title> muncul dibagian atas browser. Apapun yang anda tulis
diantara tag <body> akan muncul sebagai isi dari website anda.
Jika anda lihat terdapat tag <body bgcolor="#cccccc"> bgcolor merupakan atribut
dari <body> yang berguna untuk memberi warna pada
background halaman website. Pelajari dan pahami kode tersebut maka anda
akan mudah untuk mempelajari kode selanjutnya.Susun file Anda
Sangat penting untuk meletakkan file-file HTML anda. Akan
lebih baik jika anda membuat folder untuk meletakkan file-file HTML dan
didalamnya anda membuat subfolder (misalnya images) untuk menyimpan file-file
gambar. Semakin sering anda membuat website anda akan semakin berpengalaman dan
mengetahui teknik dalam menyusun file. Jadi ini tergantung pengalaman anda.
index.html
Ketika anda membuka dhimasronggobramantyo.com/belajar.html maka
otomatis browser akan membuka file belajar.html. Tetapi jika kita membuka
dhimasronggobramantyo.com saja, file apa yang dibuka? Semua server web otomatis
akan mencari file index.html.
Karena itu jika website anda memiliki banyak halaman, anda
harus memiliki sebuah file index.html yang akan menjadi halaman pertama dari
website anda.
Oke, sekarang kita pelajari tag-tag HTML yang penting. Semua
kode HTML berikut ini harus ditulis didalam tag
<body>
Teks dan Paragraf
Header/judul akan membuat mata pembaca tertuju pada
judul dan tertarik untuk membacanya. Dengan menggunakan tag heading maka
search engine dapat membaca seberapa penting isi dari suatu website.
Heading merupakan container yang diawali dengan tag
<h1> dan
ditutup dengan tag </h1>. Ada 6 level heading mulai dari h1
sampai h6.
Cobalah kode berikut ini:
Hasil:
Saya rasa anda dapat dengan mudah memahami kode tersebut, sekarang kita coba tag HTML penting lainnya.
<p> digunakan untuk membuat paragraf, ini merupakan salah satu tag yang banyak digunakan, tag penting lainnya adalah <b> untuk menebalkan,<i>
untuk memiringkan dan <u> untuk garis bawah
Sekarang coba kode berikut ini:
Hasilnya:
Anda dapat mengubah jenis huruf, ukuran dan warna. Untuk
mengubah huruf digunakan tag
<font>, tag <font> memiliki atribut seperti face, size dan color. Contoh:
Hasil:
Baris 1
Baris 2
Baris 3
Baris 4
Baris 2
Baris 3
Baris 4
Untuk memberikan garis horisontal digunakan tag
<hr>. Tag <hr>
memiliki beberapa atribut. Tag <hr> tidak memerlukan tag
penutup jadi tag <hr> merupakan standalone tag. Coba contoh berikut ini:
Hasil:
Seperti yang anda lihat, anda bisa memasang banyak atribut dalam satu tag. Pada tag
<hr> terdapat atribut yang tidak memiliki nilai yaitu noshade. Memang dalam beberapa tag HTML terdapat atribut-atribut yang tidak memiliki nilai. Salah satunya adalah noshade yang berarti menghilangkan bayangan pada garis. Anda dapat melihat perbedaan tag <hr> yang menggunakan noshade dengan
yang tidak pada kode diatas.
Bagaimana? mudah kan belajar HTML, jangan senang dulu
sekarang kita akan mempelajari yang lebih sulit
Links
Oke anda telah membuat banyak halaman HTML, sekarang
bagaimana caranya anda berpindah dari satu halaman ke halaman yang lain?
Apakah saya perlu menuliskan alamatnya di browser? Link adalah
jawabannya.
<a> merupakan tag HTML untuk membuat link agar kita dapat berpindah ke halaman lain.
Tag <a> memiliki atribut yang sangat penting yaitu href.
Langsung saja coba kode berikut ini:
Hasil:
My homepage
Jika anda ingin ketika link diklik dan halaman tersebut
muncul pada jendela browser yang baru, gunakan atribut
target="_blank"
seperti ini:
Oke silahkan anda coba sendiri untuk melihat hasilnya, sekarang kita akan belajar tentang images
Images
Pertengahan tahun 90'an website-website yang ada
tidak memiliki gambar, karena browser yang ada tidak memiliki kemampuan
untuk menampilkan gambar. Tetapi sekarang website tanpa gambar akan
terlihat
membosankan, tetapi website dengan banyak gambar akan terlihat
menyebalkan, nah lo. Jadi gunakan gambar seperlunya, keluarkan semua
imajinasi dan nilai seni anda untuk dapat membuat website yang nyaman
dilihat. Saya tidak akan mengajarkan bagaimana cara membuat gambar
disini, ada kategori lain diwebsite ini untuk belajar mendesain, anda
dapat belajar menggunakan Photoshop. Gambar yang dipasang di website
disarankan menggunakan bertipe file gif atau jpg. Untuk memasang image
anda memerlukan tag
<img>. Tag <img> tidak memerlukan penutup dan memiliki atribut src untuk mengambil gambar dari suatu alamat. Coba contoh berikut ini:
Hasil:
Komentar
Anda dapat menuliskan komentar dikode HTML, komentar
berguna apabila anda ingin kembali mengutak-atik kode maka anda ingat
kode tersebut fungsinya apa. Komentar hanya untuk memudahkan anda saja.
Komentar tidak ditampilkan oleh browser. Untuk menulis komentar diawali
dengan <!-- dan
diakhiri dengan --> lihat contoh berikut ini:
Hasil:
- List 1
- List 2
- List 3
Tag
<ul> merupakan tag pembuka. Diantara
tag <ul> Anda dapat menambahkan tag <li>
untuk setiap list yang akan ditampilkan. Tag list lainnya adalah Ordered List <ol>
Anda dapat menggunakannya sama seperti tag <ul> Contoh:
Hasil:
- List 1
- List 2
- List 3
Tabel merupakan hal yang paling penting dalam membuat
interface website anda. Dengan tabel anda dapat memecah layout website menjadi
beberapa kolom atau baris. Dengan tabel halaman website anda akan lebih rapih.
Untuk membuat tabel maka diperlukan tag-tag dasar seperti ini :
- <TABLE></TABLE>--Tag ini merupakan containers untuk membuat tabel.
- <TR></TR>--Didalam tabel tag ini berfungsi untuk membuat baris.
- <TD></TD>--Tag untuk membuat kolom. didalam tag <tr> harus terdapat tag <td>, anda bisa menambahkan banyak tag <td> didalam <tr> untuk membuat kolom.
- <TH></TH>--Sama dengan <td> hanya saja berfungsi sebagai header, biasanya digunakan pada baris pertama didalam tabel.
Selanjutnya Shared4U
