Catatan Seorang Farmasis

Belajar dasar – dasar HTML

Posted on: 02/09/2011


O.k gan langsung aja ke TKP..!
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:

Kode dasar ini pasti terdapat di semua halaman web. Jadi, kode dasar inilah yang harus kamu kuasai terlebih dahulu.
<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 :

Dalam pembuatan kode HTML, berlaku rumus “first come, last out”.
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 :

Hm, bocorannya sudah terdapat pada pelajaran II di atas
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:

Oke, tag <p> dan <br> memang tidak membutuhkan tag penutup.
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 :

Link atau hyperlink adalah teks atau gambar atau unsur apapun, yang bila diklik akan membawa kita ke halaman web lain.
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.
CARA MEMBUAT AGAR LINK TERBUKA DENGAN JENDELA BARU:
Kalau Kamu mengklik link “Saya” yang saya buat di atas, maka hasilnya akan terbuka dengan jendela baru. Hal ini disebabkan karna saya mensettingnya untuk dibuka di jendela baru.
Namun bila tidak ada pengaturan khusus seperti itu, biasanya link akan terbuka di halaman yang sama. Bila kita mengklik sebuah link di halaman A, maka hasilnya akan “menimpa” halaman A tersebut.
Nah, bagaimana caranya agar link itu terbuka dengan jendela baru?
Caranya sangat gampang:
Kita tambahkan saja tag berikut ini di dalam kode HTML tersebut:
target=”_blank”
Berikut adalah kode lengkapnya (agar lebih mudah, dibuat dalam bentuk perbandingan ya….)
Kode HTML sebelum ditambahkan =”Lime”]target=”_blank”:
“Oke, <a href=”http://fh4djh4r.wordpress.com/about/“>Saya</a>akan mengajari sedikit tentang dasar-dasar dari bahasa HTML
Kode HTML setelah ditambahkan target=”_blank”
“Ok, <a=”http://fh4djh4r.blogspot.com target=”_blank”>Saya</a>akan mengajari sedikit tentang dasar-dasar dari bahasa HTML
Nah, gampang sekali kan gan?

About these ads

10 Responses to "Belajar dasar – dasar HTML"

aaaaaaahhhh,,,,
saya bingung,,,huhuhu,,
ijin copas deh,,,
ntar dipelajari lg :D

ADUH BINGUNG COBA DONG KASIH GAMBAR GIMANA CARA LETAKKAN META TAG VERIFIKASI GOOGLE SEBAGAI CONTOH

bukannya cara itu untuk mendaftar blog di google yah gan agar bisa terindex…
nanti yah kalo ane ada waktu mau tak post kan tentang cara agar blog kita terindex…
=> coba cari di forum wordpress. dulu jg saya pernah baca.

lima langkah di atas adalah dasar2 nya html gan…
dimana bahasa2 itu digunakan untuk mengepost di blog yang suka dengan basic html.

Tost

I like these tutorials, terus semangat jangan menyerah tuk tambah artikelnya. Saya ada info nih buat yang baru mau belajar HTML + CSS, isinya cukup lumayan bagus sih, berbahasa Indonesia pula, filenya bisa agan download di:

http://www.ziddu.com/download/15700544/CSS1.0.pdf.html
http://www.ziddu.com/download/15700997/HTML4.0.pdf.html

mantap gan teruskan,,,
btw ane butuh bntuan tentang php dong gan ?bisa gak!ane pngen d halaman bisa sigup,login,,yg kya gtu gan biar agak krenan,,hehe,,ada yg bsa bntu gak gan,,? Thanks gan lam knal ea semua?

GAn saya pengen bgd mendalami HTML… saya sangat tertarik sekali…

saya sudah mengerti sedikit yang Agan ajarkan.

saya masih bingung, bikin teks di notepad yang hasil nya akan terbuka di borowser situs itu sendiri.saya sudah coba tapi hanya tulisan yang keluar gan…saya masih bingung ama yg ini GAN

terima kasih gan, jangan segan2 maMPIR YEAH

bikint pucing nehhh…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Page Translate


Klik tombol di bawah ini untuk berlangganan ke blog saya dan menerima pemberitahuan posting baru melalui email.

Join 10 other followers

Me Inside

want to be friends with you

All Articles

See All My Tag

Antibakteri asam salisilat belajar wordpress bagi pemula Buku Pegangan farmasetika cara buat avatar cara buat buku tamu hanya dalam hitungan menit cara memasang emoticon diblog Cara memformulasikan sediaan suspensi cara mengatasi sakit haid cara menyembuhkan herpes simplex Cara menyembuhkan Penyakit Hipertensi cara pasang avatar ciri ciri keguguran ciri ciri orang hamil daftar isi bagi pemula wordpress Diagnosa Kanker Dan patofisiologi Kanker Disfungsi Ereksi dosis albendazle dosis aspirin efek samping aminofilin efek samping amoksisilin EKSTRAK DAUN JAMBU BIJI farmakologi obat herbal di negara china Formulasi Bahan Kosmetika HomePage Kaskus Infeksi saluran kemih ISK Istilah kaskus kala I II III IV Kasih Ibu Sepanjang Masa kebutuhan bayi terhadap gizi yang seimbang Kedisiplinan adalah Kunci dari keberhasilan keluarga berencana Keutamaan Shalat Subuh dan Ashar macam macam penyakit haid Manfaat mengikuti program KB Mekanisme albendazole mekanisme aminofilin mekanisme amoksisilin mekanisme dan dosis asiklovir mekanisme haid mekanisme kerja asetosal Mekanisme Tabir surya Minyak atsiri Motivasi Mario teguh tentang rejeki nyeri datang bulan obat antibiotik untuk sakit gigi obat sakit asma Penanganan gizi buruk pengobatan infeksi cacing pentingnya ber KB pentingnya gizi seimbang untuk bayi penting nya jiwa kepemimpinan Penyakit rematik dan Pengobatannya penyembuhan infeksi aluran kemih perkembangan KB proses persalinan Rahasia Amanah Registrasi Kaskus Rule of the Kaskus script Html bagi pemula Scrolldown yang menarik Sejarah Farmasi Sejarah KasKus seputar informasi KB Sesepuh Kaskus siapakah ahli sunah itu? Staphylococus. Stres Dan Penyebabnya Sukses Wawancara tahapan persalinan pada ibu hamil tanda tanda kehamilan Tips Mudah meningkatkan PR dan banyaknya blacklink toxicology the basic science of poisons Tutorial Wordpress terlengkap

TooLs

Pengunjung Saat Ini Dari

Polling Blog Me

Follow

Get every new post delivered to your Inbox.