Tutorial HTML

Bab 1
Mengenal HTML Lebih Jauh
Setelah membaca materi pada bab 1 ini anda diharapkan dapat mengerti tentang:
�� Pengertian HTML
�� Menggunakan tag pada HTML
�� Mengetahui daftar tag pada HTML
Pengertian HTML
Seperti yang telah dijelaskan sebelumnya bahwa HTML(Hyper Text Markup Language) adalah
simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk
menampilkan halaman pada web browser. Tag-tag HTML selalu diawali dengan dan diakhiri
dengan dimana x tag HTML seperti b, i, u dan sebagainya. Namun ada juga tag yang
tidak diakhiri dengan tanda seperti tag
, dan lainnya.
Sebuah halaman website akan diapit oleh tag ……. File-file HTML selalu
berakhiran dengan ekstensi *.htm atau *.html. Jadi jika anda mengetik sebuah naskah dan
menyimpannya dengan ekstensi *.html maka anda membuat file yang berformat HTML.
Menggunakan Tag pada HTML
Beberapa contoh penggunaan tag HTML,
Contoh Hasil
Ini tulisan tebal
Ini tulisan miring
Ini tulisan bergaris bawah
Ini baris 1
Ini baris 2
Ini garis horizontal

---

Ini tulisan tebal
Ini tulisan miring
Ini tulisan bergaris bawah
Ini baris 1
Ini baris 2
Ini garis horizontal
Ada beberapa tag yang memilki atribut didalamnya, seperti tag , , dan
sebagainya. Pada tag font ia memiliki beberapa atribut diantaranya atribut: color, size, face.
Untuk lebih memahami atribut lihatlah contoh berikut ini.
Ini Font Arial berwarna merah dan berukuran 12
pt
hasil �� Ini Font Arial berwarna merah dan berukuran 12 pt
�� Atribut color digunakan untuk menentukan warna tulisan.
�� Atribut face digunakan untuk menentukan jenis huruf.
�� Atribut size digunakan untuk menentukan ukuran huruf.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 1 - Mengenal HTML Lebih Jauh
2
Jika anda lihat bahwa atribut color berada pada awal, lalu yang kedua adalah face dan yang
terakhir adalah size. Anda tidak perlu memperdulikan urutan atribut tersebut karena browser
hanya membaca isi dari properi bukan urutan atributnya.
Daftar Tag pada HTML
Berikut ini adalah tabel tag-tag HTML dan fungsinya:
Tag Utama
Tag Atribut Deskripsi

Baris paling atas dari setiap file HTML

Informasi umum dari sebuah halaman web
Judul halaman. Terdapat pada head


background
bgcolor
bgsound
font
link
alink
vlink
topmargin
leftmargin
marginheight
marginwidth
Settingan atribut untuk seluruh dokumen.
Modifikasi Teks
Tag Deskripsi Contoh
Teks tebal Teks tebal
Teks miring Teks miring
Teks garis bawah Teks garis bawah

Preformatted teks Contoh teks

Header 1 Header 1

Header 2 Header 2

Header 3 Header 3

Header 4 Header 4

Header 5 Header 5

Header 6 Header 6
Subscript Subscript
Superscript Superscript
Font
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 1 - Mengenal HTML Lebih Jauh
3
Tag Atribut Deskripsi


color
size
name
Mengubah gaya suatu huruf.
Links
Tag Atribut Deskripsi

href
target
style
class
name
id
Membuat link ke dokumen atau situs lainnya.
Gambar
Tag Atribut Deskripsi

src
alt
name
border
height
width
Menampilkan sebuah gambar
Formatting
Tag Deskripsi Contoh

Digunakan untuk
mengatur text dan
gambar dalam suatu tag
Sample of text in a block quote format

Ordered List (digunakan
dengan

)
1. Item 1

Unordered List
(digunakan dengan

)
• Item 1

Elemen List

Definition List Sample text

Definition Term Sample text

Definition Description Sample text

Paragraf
Sample
text

Ganti baris Sample
text

---

Garis horizontal

Menengahkan elemen Sample
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 1 - Mengenal HTML Lebih Jauh
4
Tabel
Tag Atribut Deskripsi

border
cellpadding
cellspacing
width
height
name
id
title
bgcolor
background
align
valign
Mengatur semua elemen table

height
bgcolor
background
align
valign
title
Membuat baris baru

height
width
bgcolor
background
align
valign
title
colspan
rowspan
Membuat kolom

height
width
bgcolor
background
align
valign
title
colspan
rowspan
Header(kepala tabel). Otomatis ke tengah dan tebal.


height
width
align
valign
bgcolor
background
Format yang berlaku bagi cell yang diapit tag.


height
width
align
valign
bgcolor
background
colspan
Format yang berlaku bagi kolom
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 1 - Mengenal HTML Lebih Jauh
5
Form
Tag Atribut Deskripsi

method
action
name
Mengatur elemen dari form

text
password
hidden
radio
checkbox
submit
image
reset
Variasi dari tipe elemen form
text
name
value
width
maxlength
Sample tex
password
name
value
width
maxlength
***********
hidden name
value Digunakan untuk membuat variable hidden.
radio name
value
Radio 1
Radio 2
checkbox
name
value
checked
Check 1
Check 2
submit value Tombol
image
src
height
width
alt
name
border
reset value Reset

name
size Membuat combo-box. Digunakan bersama dengan option

selected
name
value
Option 1

name
rows
cols
wrap
Text
area box. Text is typed betw ee
the tags
wrap off no wrap
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 1 - Mengenal HTML Lebih Jauh
6
virtual
physical
word wrap, sent as one line
word wrap, sent with breaks
Anda tidak perlu menghafal semua tag tersebut, nanti malah kepala anda malah pecah!. Cukup
hafalkan yang penting-penting saja seperti

. Tidak hafal pun tidak
apa-apa kan kita bisa melihat daftar kalau lupa, yang penting kita paham, BETUL?.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 1 - Mengenal HTML Lebih Jauh
7
BERIKUTNYA
Pada bab selanjutnya kita akan membahas lebih detail tentang penerapan property dari tag
yang sering kita gunakan.
**********
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
8
Bab 2
Menggunakan Atribut dari Tag
Sebelum memulai sekedar mengingatkan apakah anda sudah membuat folder di drive C:\ yang
bernama HTML jika tidak, buatlah sekarang. Lalu buatlah folder yang bernama bab 1, bab2 dan
seterusnya. Jika anda praktik pada bab 2 maka simpanlah file anda pada folder bab 2.
Demikian untuk seterusnya.
Pada bab 2 ini materi yang diharapkan dapat anda kuasai antara lain:
�� Menggunakan berbagai attribut dari tag diantaranya:
�� Tag p, font, table, form, input, select, option, a, body, img, ul, ol, li dan attribut
universal
Contoh-contoh penggunaan tag dan atributnya
Pada bab sebelumnya telah anda pelajari macam-macam atribut dari tag yang terdapat pada
HTML. Sekarang saatnya kita menerapkan atribut tersebut dalam sebuah file. Untuk lebih
memudahkan anda dalam memahami kita langsung saja pada contoh.
• Pertama jalankan software “PHP DESIGNER 2006”
• Klik menu File – New – HTML/XHTML
Maka akan nampak sebuah ruang kerja mirip dengan dengan Microsoft Word. Untuk contoh
yang pertama ini kita akan menggunakan atribut dari tag

…

.
A. Tag

…


Tag

digunakan untuk membuat paragraf dalam sebuah halaman web. Kita semua tahu
kalau paragraph ada yang bertipe rata kiri, tengah, kanan dan justify. Untuk lebih memperjelas
ketik kode di bawah ini.







Teks ini berada di kiri




Teks ini berada di tengah




Teks ini berada di kanan




Paragraph ini bertipe justify. Dimana semua teks akan dibuat
lurus sama dengan batas tepi halaman. Oh ya, tag <p></p> merupakan
default atau bentuk baku tag <p></p> dimana teks atau paragraf akan
berformat rata kiri. Jika anda tidak memberi atribut align pada tag
<p> maka browser akan menganggap rata kiri.


Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
9


Setelah selesai simpan file tersebut dengan mengklik menu File – Save. Akan muncul kotak
dialog Save, arahkan ke drive C:\ lalu HTML(jika anda membuat folder lain silahkan simpan di
folder anda tersebut) lalu Bab 2. Pada isian File Name isikan tag_p.html dan pastikan Save as
Type adalah HTML Document. Untuk menjalankan anda cukup tekan tombol F5 maka akan
muncul output dari kode anda.
Gambar 2.0 file tag_p.html saat desain time.
Gambar 2.1 file tag_p.html saat dijalankan
Namun dalam hal ini saya tidak menggunakan browser built ini pada PHP DESIGNER 2006.
Melainkan browser eksternal seperti Internet Explorer atau FireFox. Buka IE atau FireFox klik
File – Open, arahkan dimana anda menyimpan file tag_p.html tadi. Hasilnya akan terlihat
seperti gambar 2.1.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
10
B. Tag …
Fungsi tag adalah untuk memanipulasi baik jenis, ukuran, dan warna huruf. Pada bab 1
telah kita singgung penggunaan atribut font.
Namun kita akan lebih bereksperimen dengan atribut ini.
Seperti biasa klik File – New – HTML/XHTML.
Ketik kode di bawah ini.




Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
12



Membuat Tabel

Ini kolom 1 pada baris 1	Ini kolom 2 pada baris 1
Ini kolom 1 pada baris 2	Ini kolom 2 pada baris 2

Contoh 2: Membuat Tabel

Ini kolom 1 pada baris 1	Ini kolom 2 pada baris 1
Ini kolom 1 pada baris 2	Ini kolom 2 pada baris 2

Tabel sebagai bingkai dari paragraf

Tabel memiliki peranan sangat penting dalam tampilan sebuah situs web. Tanpa tabel desainer akan mengalamai kesulitan dalam mendesain sebuah halaman web. Kalau anda perhatikan website yan memiliki tampilan yang tersusun rapi. Sebenarnya itu adalah tabel hanya saja atribut border="0" sehingga tabel seakan tidak ada(transparan). Situs rahasia-webmaster.com banyak menggunakan tabel sebagai bingkai paragraf. Perlu diingat tag-tag pada html dapat mengandung unsur yang sama. Contohnya di dalam sebuah tabel terdapat tabel lagi. Di bawah ini adalah tabel yang berada di dalam tabel utama Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/ Bab 2 - Menggunakan Atribut dari Tag 13 Nama Barang Harga Barang Monitor Rp. 500.000,- CDRW Rp. 245.000,0

Setelah itu simpan dengan nama tag_tabel.html serta tetap simpan di folder bab 2. Gambar 2.3
menunjukkan output dari kode diatas.
Gambar 2.4. Output file tag_form_input.html