HTML adalah sebuah bahasa program yang digunakan untuk menuliskan sebuah dokumen atau informasi dan dibaca dengan menggunakan program browser seperti Mozilla, Internet Explorer, dll.
Oke, ane akan berbagi sedikit tentang dasar-dasar dari bahasa HTML. Semoga setelah agan membaca postingan kali ini, agan bisa lebih mengembangkannya.
Seperti biasa ane bilang, kalau mau belajar teknologi jangan menghapal, tapi pahamilah sruktur dan sistemnya.
langsung aja yah agan.
- Pelajaran I; Kode Dasar HTML:
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Jangan bingung melihat kode-kode di atas, karena akan saya jelaskan satu-persatu.
Setiap kode punya pasangan, dan setiap pasangan saya beri warna yang sama.. Karena itu, coba mempelajarinya dengan cara melihat dan membandingkan kode dengan warna yang berbeda-beda tersebut.
Berikut penjelasannya:
1. <html>
Ini adalah kode atau tag yang terdapat di bagian atas dari semua halaman web.
(memang, pada halaman web masa kini, kadang-kadang ada juga kode tertentu yang terdapat sebelum kode HTML. Tapi ini kita abaikan dulu ya, berhubung ini masih pelajaran tingkat dasar)
Nah, setiap tag itu pasti ada tag penutupnya
(memang ada juga tag yang tak perlu pakai penutup, tapi ini akan kita pelajari nanti, ya….)
Maka, tag penutup dari <html> adalah </html>
PERBEDAANNYA:
Pada setiap tag penutup, setelah “<” pasti ada tanda “/”.
2. <head>
Ini boleh dibilang sebagai “dapurnya halaman web”. Kenapa? Sebab semua kode yang diletakkan di antara tag <head> dan </head> tidak akan terlihat di halaman web. Di bagian HEAD ini, kita bisa melakukan berbagai macam pengaturan, seperti:
- meletkakan kode javascript
- meletakkan kode css
- meletakkan meta tag
- dan seterusnya
3. <title>
Ini adalah tag untuk meletakkan JUDUL halaman web. Ingat, judul halaman web tidak sama dengan nama file.
Sebagai contoh, coba lihat ke bagian paling atas (pojok kiri) dari halaman ini. Di situ tertulis:
“Belajar Dasar-Dasar HTML >> Orang Bodoh”
Nah, itu adalah title atau judul dari halaman ini.
Jika ditulis, maka penulisannya sebagai berikut:
<title>Belajar Dasar-Dasar HTML :: Orang Bodoh</title>
Nah, gampang, bukan?
4. <body>
Nah, body ini adalah tempat untuk meletakkan SEMUA HAL yang hendak kita tampilkan di halaman web kita.
Bila kode-kode lainnya adalah “urusan belakang layar”, maka BODY ini adalah “urusan di depan layar” atau “panggung yang akan ditonton oleh hadirin”.
Jadi, apapun yang kita letakan di bagian BODY, maka itulah yang akan dilihat oleh pengunjung website kita.
LATIHAN:
Ingat, jika kamu mau agar pelajaran ini mudah dipahami, jangan copy paste tulisan dibawah ini, tapi ketikkan ulang di notepad:
<html>
<head>
<title>Website Pertama Gue</title>
</head>
<body>
Ini dia website pertamaku, bagus kan?
</body>
</html>
Setelah selesai, klik “Save As”
Pada bagian “Save as type”, pilih “All Files”
Pada bagian “File Name”, beri nama “index.html” (tanda ” harus disertakan)
Cari lokasi penyimpanan, misalnya di Desktop
Klik “Save”.
Nah, sekarang, coba masuk ke Desktop, klik dua-kali file “index.html” tadi, lalu lihatlah hasilnya.
Selamat mencoba!
- Pelajaran II; Rumus Penting Di Dalam Kode HTML :
Maksudnya, kode yang pertama kali dimasukkan, maka dia harus terakhir kali ditulis.
Urutannya begini:
1 2 3 3 2 1
Agar tidak bingung, mari kita lihat contoh berikut:
<b> adalah kode untuk membuat huruf tebal
<i> adalah kode untuk membuat huruf miring
Misalkan kita hendak membuat huruf miring sekaligus tebal
CARA YANG BENAR:
<b><i>ini huruf miring dan tebal<i><b>
atau:
<i><b>ini huruf miring dan tebal<b><i>
CARA YANG SALAH:
<b><i>ini huruf miring dan tebal<b><i>
yang ini juga salah:
<i><b>ini huruf miring dan tebal<i><b>
Atau, coba lihat lagi kode dasar HTML di atas.
Semuanya ditulis dengan rumus “first come, last out” bukan?
Kode <html> yang diletakkan paling awal, maka kode penutup </html> pun diletakkan paling akhir.
Demikian seterusnya.
- Pelajaran III; Membuat Huruf Tebal, Miring, Bergaris Bawah, dan Efek Dicoret :
Ya, di atas saya sudah memberi contoh tentang cara membuat huruf tebal dan miring.
Sebelum dilanjut, saya ingatkan lagi:
1. Semua kode ini diletakkan di antara tag <body> dan </body>.
Kenapa? Sebab format huruf ini akan terlihat oleh pengunjung di halaman web kita nantinya.
2. Jangan copy paste, tapi salin ulang secara manual
3. kode-kode HTML ini silahkan tulis di Notepad saja
4. Semua kode pada pelajaran III ini harus pakai tag penutup. Bila tak ada tag penutup, maka halaman web anda akan kacau
5. Bila anda menggunakan lebih dari satu tag, ingatlah selalu rumus:
“first come, last out”
Oke, kita mulai ya:
1. membuat huruf tebal: <b>
==>> sekarang ada yang baru, membuat huruf tebal disarankan pakai tag <strong>
2. membuat huruf miring: <i>
==>> sekarang ada yang baru, membuat huruf miring disarankan pakai tag </em>
3. membuat huruf bergaris bawah: <u>
4. membuat huruf dengan efek dicoret: <strike>
LATIHAN:
Oke, sekarang langsung praktek saja ya…
Buka Notepad, lalu ketiklah kode-kode berikut secara manual.
Setelah itu, save dengan nama “pelajaran3.html”
Lalu buka dengan browser Anda.
<html>
<head>
<title>Dasar-dasar HTML – Pelajaran 3</title>
</head>
<body>
<b><i>Ini huruf tebal dan miring</i></b> sedangkan yang ini <i>miring saja</I>, yang ini <b><u>tebal dan bergaris bawah</u></b>, sedangkan ini <b><strike>tebal dan dicoret</strike></b>
</body>
</html>
- Pelajaran IV; Perataan Teks, Pergantian Baris, dan Pergantian Paragraf:
Khusus untuk kode <p>, pada kondisi tertentu dia membutuhkan tag penutup.
Misalnya, ketika kita menambahkan “perataan teks” pada kode ini.
Contoh:
Kita ingin membuat paragraf tertentu rata kanan.
Maka kodenya adalah:
<p align=”right”>ini dia paragraf yang rata kanan</p>
Nah, pada kondisi seperti ini, tag <p> perlu dibuatkan tag penutup </p>.
NB:
Kode seperti align=”right” ini sebenarnya hanya kode tambahan. Maksudnya, dia tidak berdiri sendiri. Dia harus dilekatkan pada kode lain.
Dalam contoh di atas, kode align=”right” dilekatkan pada kode <p>
Nah, dalam perkembangannya nanti, kita akan tahu bahwa masih banyak kode lainnya yang termasuk kode tambahan.
- Pelajaran V; Membuat Link :
Cara membuat link ini sangat gampang.
Rumusnya sebagai berikut:
<a href=“Alamat URL atau alamat link”>teks atau gambar atau apapun yang akan diberi link</a>
Sebagai Contoh:
Di awal-awal tulisan ini saya menyisipkan link pada kata “saya”, yang mana jika di klik kamu akan dibawa ke halaman “About Me”
Cara membuatnya (Ini hanya contoh kalimat):
“Saya sudah beberapa bulan ini bergabung dengan Forum <a href=“http://www.kaskus.us/member.php?u=2376433”>Ane</a>
Maka, di halaman web nanti akan terlihat seperti ini: Oke, saya akan mengajari sedikit tentang dasar-dasar dari bahasa HTML
Nah, bagian yang diberi warna biru (teks atau gambar atau apapun yang akan diberi link) bisa diisi dengan teks, gambar, atau apapun.
Apapun yang kita masukkan di sini, maka itulah yang nanti bisa diklik oleh pengunjung.
Jadi kita juga bisa meletakkan gambar atau apapun di sana.
makasih banyak ya gan sudah mau berbagi ilmunya
BalasHapus