Rabu, 03 September 2014
Tugas HTML
Pengenalan HTML
Apa yang dimaksud dengan file HTML?
- HTML merupakan
kependekan dari Hyper Text markup Language
- Sebuah file HTML
merupakan sebuah file teks yang berisi tag-tag markup
- Tag markup
memberitahukan browser bagaimana harus menampilkan sebuah halaman
- File HTML harus
memiliki ekstensi htm atau html
- File HTML dapat
dibuat menggunakan editor teks yang biasa kamu pakai.
Pengen Nyoba Bikin?
Mulailah dengan membuka Notepad (di
Windows XP bagi yang belum pernah klik Start, Program, Accessories, Notepad).
Ketikkan teks berikut:
Ketikkan teks berikut:
<html>
<head>
<title>Judul
Halaman</title>
</head>
<body>
Ini
halaman pertama saya. <b>Teks ini ditebalkan</b>
</body>
</html>
Simpan dengan nama “halamanku.htm”
(jangan lupa tambahkan tanda kutip ganda pada nama filenya. Kalau lupa maka
nama filenya akan menggunakan ekstensi default .txt sehingga menjadi
halamanku.htm.txt).
Buka Browser kamu (misalnya internet
explorer). Kilk File, Open, Browse dan pilih cari file halamanku.htm yang tadi
kamu bikin. Klik OK, dan browser akan menampilkan halaman yang tadi kamu buat.
Tag Utama HTML
Tag
|
Atribut
|
Deskripsi
|
<html></html>
|
Baris paling atas dari setiap file
HTML
|
|
<head></head>
|
Informasi umum dari sebuah halaman
web
|
|
<title></title>
|
Judul halaman. Terdapat pada head
|
|
<body></body>
|
Background, bgcolor, bgsound,
font, link, alink, vlink, topmargin, leftmargin, marginheight, marginwidth
|
Settingan atribut untuk seluruh
dokumen
|
Modifikasi Teks
Tag
|
Deskripsi
|
Contoh
|
<b></b>
|
Teks tebal
|
Teks tebal
|
<i> </i>
|
Teks miring
|
Teks miring
|
<u> </u>
|
Teks garis bawah
|
Teks garis bawah
|
<pre></pre>
|
Preformatted teks
|
Contoh teks
|
<h1></h1>
|
Header 1
|
Header 1
|
<h2></h2>
|
Header 2
|
Header
2
|
<h3> </h3>
|
Header 3
|
Header
3
|
<h4></h4>
|
Header 4
|
Header
4
|
<h5></h5>
|
Header 5
|
Header
5
|
<h6></h6>
|
Header 6
|
Header
6
|
<sub></sub>
|
Subscript
|
Subscript
|
<sup></sup>
|
Superscript
|
Superscript
|
Font
Tag
|
Atribut
|
Deskripsi
|
<font></font>
|
Color, size, name
|
Mengubah gaya suatu huruf
|
Links
Tag
|
Atribut
|
Deskripsi
|
<a> </a>
|
Href, target, style, class, name,
id
|
Membuat link ke dokumen atau situs
lainnya
|
Gambar
Tag
|
Atribut
|
Deskripsi
|
<img>
|
Src, alt, name, border, height,
width
|
Menampilkan sebuah gambar
|
Formatting
Tag
|
Deskripsi
|
Contoh
|
<blockquote></blockquote>
|
Digunakan untuk mengatur text dan
gambar dalam suatu tag
|
Contoh text in a block quote
format ( “ “ )
|
<ol></ol>
|
Ordered List (digunakan dengan
<li>)
|
1. Item 1
|
<ul></ul>
|
Unordered List (digunakan dengan
<li>)
|
• Item 1
|
<li>
|
Elemen List
|
|
<dd></dd>
|
Definition List
|
|
<dt>
|
Definition Term
|
|
<dd>
|
Definition Description
|
|
<p></p>
|
Paragraf
|
|
<br>
|
Ganti baris
|
|
<hr>
|
Garis horizonta
|
|
<center></center>
|
Menengahkan elemen
|
Tabel
Tag
|
Deskripsi
|
Contoh
|
<table></table>
|
Border, cellpadding, cellspacing,
width, height, name, id, title, bgcolor, background, align, valign
|
Mengatur semua elemen table
|
<tr></tr>
|
Height, bgcolor, background,
align, valign, title
|
Membuat baris baru
|
<td></td>
|
Height, width, bgcolor,
background, align, valign, title, colspan, rowspan
|
Membuat kolom
|
<th></th>
|
Height, width, bgcolor,
background, align, valign, title, colspan, rowspan
|
Header(kepala tabel). Otomatis ke
tengah dan tebal
|
<tbody></tbody>
|
Height, width, align, valign,
bgcolor, background
|
Format yang berlaku bagi cell yang
diapit tag
|
<colgroup></colgroup>
|
Height, width, align, valign,
bgcolor, background, colspan
|
Format yang berlaku bagi kolom
|
Form
Tag
|
Deskripsi
|
Contoh
|
<form></form>
|
Method, action, name, enctype
|
Mengatur elemen dari form
|
<input type=>
|
Text, password, hidden, radio,
checkbox, submit, image, reset
|
Variasi dari tipe elemen input
dalam form
|
<select></select>
|
Name, size
|
Membuat combo-box. Digunakan
bersama dengan option
|
<option>
|
Selected, name, value
|
|
<textarea></textarea>
|
Name, rows, cols, wrap
|
Membuat Text Area untuk input text
dengan length yang lebih besar dari input text.
|
wrap
|
Off
virtual
physical
|
no wrap
word wrap, sent as one line
word wrap, sent with breaks
|
Aturan
Dasar HTML
Sebelum anda belajar lebih lanjut
tentang HTML, ada baiknya anda harus mengerti aturan-aturan dasar HTML. Ada
beberapa aturan dasar yang dipakai dalam pemrogaman HTML. diantaranya :
1. Setiap tag harus diapit oleh tanda lebih kecil dan lebih besar atau tanda siku miring <.....>
2. Dalam menulis tag, anda harus menggunakan huruf kecil maupun huruf besar (huruf kapital). keduanya akan menghasilkan efek sama, karena HTML tidak key sensitive <B> atau <b>
3. Tag kebanyakan berpasangan. Yaitu tag awal dan tag akhir. Tag awal berguna untuk menandai suatu style, dan tag akhir berguna untuk menandai akhr style
Contoh : Saya senang berkunjung di <b> Website TunasMedia.com </b>
Pada tag akhir sebagai penutup maka bentuk dari tag tersebut ditambahkan dengan garis miring slash </....>
4. Browser akan mengabaikan spasi atau baris pada teks yang diapit oleh tag
5. Semua dokumen HTML harus disimpan dengan teks murni, yaitu file yang menggunakan ekstensi html atau htm. KIta tidak bisa menyimpan dokumen HTML itu sebagai file word atau excel atau yang lainya.
1. Setiap tag harus diapit oleh tanda lebih kecil dan lebih besar atau tanda siku miring <.....>
2. Dalam menulis tag, anda harus menggunakan huruf kecil maupun huruf besar (huruf kapital). keduanya akan menghasilkan efek sama, karena HTML tidak key sensitive <B> atau <b>
3. Tag kebanyakan berpasangan. Yaitu tag awal dan tag akhir. Tag awal berguna untuk menandai suatu style, dan tag akhir berguna untuk menandai akhr style
Contoh : Saya senang berkunjung di <b> Website TunasMedia.com </b>
Pada tag akhir sebagai penutup maka bentuk dari tag tersebut ditambahkan dengan garis miring slash </....>
4. Browser akan mengabaikan spasi atau baris pada teks yang diapit oleh tag
5. Semua dokumen HTML harus disimpan dengan teks murni, yaitu file yang menggunakan ekstensi html atau htm. KIta tidak bisa menyimpan dokumen HTML itu sebagai file word atau excel atau yang lainya.
Langganan:
Entri (Atom)
No comments:
Post a Comment