Dasar HTML
Mempelajari HTML tidaklah sesulit mempelajari Bahasa Pemrograman. Mempelajari HTML Sangatlah menarik. Ada beberapa pertanyaan yang bisa memnadu kita untuk mempelajari HTML tingkat dasar, yaitu:
- Apa pengertian singkat dari HTML ?
- Apa saja software (Editor dan Browser) yang diperlukan dalam membuat website satic ?
- Bagaimana struktur umum HTML ?
- Bagaimana langkah-langkah membuat dokumen HTML dengan editor Notepad, dan cara penyimpananya ?
- Apa sajakah tag-tag yang anda ketahui dan berikan contoh penggunannya (minimal 15 tag) !
- Notepad
- Notepad ++
- Adobe Dreamweaver (dulu macromedia dreamweaver)
- Nambo
- NVU
- BubleFish
- Mozilla Composser
- Ms. Frontpage
- Quanta
- EditPlus
- dll.
- Mozilla Firefox
- Internet Explorer
- Opera
- Safari
- Google Chrome
- Netscape
- NetCaptor
- Lynx
- iCab
- NeoPlanet
- dll.
<html>.....</html> Setiap file HTML di awali oleh tag ini dan di akhiri oleh tag penutupnya
<head>.....</head> Tag ini dipakai untuk diisikan informasi dokumen yang diterjemahkan pada browser
Di dalam Tag HEAD, berisi Tag TITLE <title>.....</title> Tag ini ditempatkan pada tag head dokumen html. Browser menampilkan teks yang ada dalam tag ini di bagian titlebar<body>.....</body> Semua tag dalam elemn tag ini akan diterjemahkan dalam jendela browser, kecuali tag comment
Struktur Umum Penulisan HTML
<html>
<head>
<title>--------</title>
</head>
<body>
--------
--------
--------
</body>
</html>
- Buka notepad dengan cara: Start --> Accessoris --> Notepad
- Mulailah mengetik file HTML, dimulai dari menulis Struktur Umum HTML (Penjelasan sebelumnya)
- Harus teliti dalam menuliskan tag-tag yang ada pada tag body
- Setelah selesai membuat menuliskan HTML, segera simpan
- Cari menu bar File --> Save as --> Ketikkan nama file dan ganti ekstensi .txt menjadi .HTML
- Pilih tempat penyimpanan, lalu tekan save
- Untuk melihat hasil, buka file berekstensi .HTML tersebut dengan web browser
- Jika ada kesalahan, edit file HTML tadi
- Carnya, klik kanan file HTML tersebut --> open with note -->notepad
- Setelah selesai di edit, save file tersebut, dengan cara file --> save atau (Ctrl+S)
- Lihat hasilnya pada web browser. Untuk melihat perubahan dari sebelumnya, tekan tombol F5
Contoh TAG HTML yang umum di pakai, antara lain:
<!--.....--> Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser contoh penggunaan: <!--Bagian ini tidak akan muncul dalam browse--> hasil:
<a href>.....</a> Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut contoh penggunaan: <a href=www.google.co.id >menuju ke www.google.co.id</a> hasil: menuju ke www.google.co.id
<b>.....</b> Membuat teks tebal contoh penggunaan: <b>Teks bercetak tebal</b> hasil: Teks bercetak tebal
<br>
Fungsinya seperti tombol enter pada keyboard
contoh penggunaan:
Teks 1<br>Teks 2
hasil:
Teks 1
Teks 2
<blink>.....</blink> Membuat teks berkedip contoh penggunaan: <blink>Teks berkedip</blink> hasil:
<center>.....</center>
Membuat teks atau gambar rata di tengah
contoh penggunaan:
<center>
Teks rata di tengah
Bukan rata kiri
Ataupun rata kanan
</center>
hasil:
Bukan rata kiri
Ataupun rata kanan
<h1--h6>.....</h1--h6>
Digunakan untuk menentukan Ukuran teks
Ada 6 jenis, yaitu: h1, h2, h3, h4, h5, h6
contoh penggunaan:
<h1>Teks dengan h1</h1>
<h2>Teks dengan h2</h2>
<h3>Teks dengan h3</h3>
<h4>Teks dengan h4</h4>
<h5>Teks dengan h5</h5>
<h6>Teks dengan h6</h6>
hasil:
Teks dengan h1
Teks dengan h2
Teks dengan h3
Teks dengan h4
Teks dengan h5
Teks dengan h6
<hr> Membuat garis heading contoh penggunaan: <hr> hasil:
<i>.....</i> Membuat teks bercetak miring contoh penggunaan: <i>Teks bercetak miring</i> hasil: Teks bercetak miring
<marquee>.....</marquee> Membuat teks berjalan contoh penggunaan: <marquee>Teks berjalan</marquee> hasil:
<p>
Menganti paragraf
contoh penggunaan:
-----(teks 1)
-----(teks 2)
-----(teks 3
<p>
-----(teks 4)
-----(teks 5)
-----(teks 6)
hasil:
-----(teks 1)
-----(teks 2)
-----(teks 3)
-----(teks 4)
-----(teks 5)
-----(teks 6)
<u>.....</u> Membuat teks bergaris bawah contoh penggunaan: <u>Teks bergaris bawah</u> hasil: Teks bergaris bawah
Beberapa TAG HTML yang lain:
<a name> Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
<applet> Sebagai awal dari Java applets
<area> Mendefinisikan daerah yang dapat diklik (link) pada image map
<basefont> Membuat atribut teks default seperti jenis, ukuran dan warna font
<bgsound> Memberi (suara latar) background sound pada halaman web
<big> Memperbesar ukuran teks sebesar satu point dari defaultnya
<caption> Membuat caption pada tabel
<comment> Meletakkan komentar pada halaman web tidak akan nampak pada browser
<dd> Indents teks
<div> Represents different sections of text.
<embed> Menambahkan sound or file avi ke halaman web
<fn> Seperti tag <a name>
<font> Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
<form> Mendefinisikan input form
<frame> Mendefinisikan frame
<frameset> Mendefinisikan attribut halaman yang akan menggunakan frame
<img> Image, imagemap atau an animation
<input> Mendefinisikan input field pada form
<li> Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> )
<map> Mendefinisikan client-side map
<nobr> Mencegah ganti baris pada teks atau images
<noframes> Jika browser user tidak mendukung frame
<ol> Mendefinisikan awal dan akhir list
<pre> Membuat teks dengan ukuran huruf yg sama
<script> Mendefinisikan awal script
<table> Membuat tabel
<td> Kolom pada tabel
<tr> Baris pada tabel
Dan masih banyak tag HTML yang lainnya. Semoga artikel ini bisa membantu dan bermanfaat dalam mempelajari dasar HTML.
Posting Komentar