HTML Dasar
HTML (Hypertext Markup Language) merupakan bahasa pemrograman web yang digunakan
untuk membuat halaman situs.
Untuk belajar HTML dasar sebaiknya Anda ketikkan di Notepad.
Bentuk umum:
<html>
<head>
<title> Letakkan judul situs di sini </title>
</head>
<body>
Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini.
Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini.
Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini.
Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini.
2
</body>
</html>
Setelah diketikkan, Anda simpan dengan nama latihan.html. Untuk mengeceknya Anda double
click file yang telah Anda simpan. Sebenarnya Anda dapat menggunakan ekstensi .htm, tetapi
supaya sama, maka sebaiknya digunakan ekstensi .html.
Judul situs di tampilkan disini (dalam html
diletakkan diantara <title> ..... </title>
Gambar 1.1 Hasil perintah HTML di browser Internet Explorer (IE)
Coba Anda ketikkan perintah-perintah HTML berikut ini, kemudian Anda jalankan di browser !
<html>
<head>
<title> Latihan Pertamaku </title>
</head>
<body bg color="#000000">
<p align="left">
Paragraf ini akan rata kiri<br>
Paragraf ini akan rata kiri<br>
Paragraf ini akan rata kiri<br>
<p>
br digunakan untuk ganti baris <br><br>
<b>Kalimat ini akan dicetak Bold </b> <br>
<i>Kalimat ini akan dicetak Italic </i> <br>
<b><i>Kalimat ini akan dicetak Bold dan Italic</i></b>
<hr width="1000"><br>
Perintah hr digunakan untuk membuat garis
</body>
</html>
Simpan perkerjaan Anda dengan nama latihan_2.html. Jika benar, seharusnya ditampilkan
seperti berikut ini:
3
Gambar 1.2 Hasil dari latihan_2.html
Perhatikan perintah berikut ini:
<p align="left">
tag atribut
P pada perintah di atas disebut dengan tag, sedangkan align disebut dengan atribut. Atribut
merupakan perintah yang menyertai tag.
Berikut beberapa perintah HTML dan fungsinya:
Tag Atribut/Contoh penulisan Fungsi
<body> <body bgcolor=”red”>
<body bgcolor=”#FF0000”>
text=” ... “
link=” ...”
vlink=”...”
alink=”...”
<body
background=”D:\Gambar.jpg”>
Backgorund halaman berwarna
merah
Memberi warna pada teks
Warna link
Warna link yang sudah dikunjungi
Warna link yang aktif
Memberi background gambar
pada halaman
<a> ... </a> <a
href=”D:\home.html”>Home</a>
<a
href="http://www.yahoo.com/">Ya
hoo!</a>
<a
href="mailto:name@domain.com"
>here</a> to email me!
Membuat hyperlink/link
<img> <img src="person.jpg" width="50"
height="50" border="0"
alt="Person" align="left">
Memasukkan gambar dengan
nama file gambar person.jpg,
lebar 50px, tinggi 50px, border 0,
rata kiri, dan jika gambar tidak
muncul akan keluar teks Person
4
<img src=”C:\Documents and
Settings\All Users\Documents\My
Pictures\Sample
Pictures\Sunset.jpg>
<font>... /font> <FONT size="2" color="#FFFF00"
face="arial">...</font>
Mengatur font dengan ukuran 2,
warna kuning, jenis huruf Arial
<BIG>...</BIG> <BIG>Contoh </BIG> Membuat teks Contoh menjadi
lebih besar
<SMALL>...</SMALL> <SMALL> Contoh</SMALL> Membuat teks Contoh menjadi
lebih kecil
<b>...</b> Teks bold/dicetak lebih tebal
<i>…</i> Teks italic/miring
<strike>...</strike> Teks tercoret
<u>...</u> Teks underlined
<h1>...</h1> Teks heading 1. Tingkat heading
bisa sampai tingkat 6. Semakin
besar tingkar heading, maka teks
aka dicetak semakin kecil
<hr> <hr width=”600”>
<hr align=”center” size=”5”
width=”80%”
Garis dengan lebar 600. Tag <hr>
tidak perlu ditutup
Garis dengan tinggi 5, lebar 80%
dari lebar layar browser dan rata
tengah
<p align=”center’> ...
</p>
Paragraf rata tengah. Perintah ini
juga dapat ditulis dengan tag
<center>...</center>
<br> Tag untuk ganti baris Tag <br> tidak perlu ditutup
<sup>...</sup> Teks superscript
<sub>...</sub> Teks subscript
<marquee> ....
</marquee>
Teks berjalan. Memiliki atribut
direction, behavior dan lain-lain.
Contoh:
<marquee direction=”right”>
....</marquee>
<marquee behavior=”alternate”>
... </marquee>
TABLE
Beberapa perintah penting untuk membuat tabel:
1. <table border=”1”> .... </table> merupakan perintah utama dalam pembuatan tabel,
tabel dengan ketebalan 1px
2. <tr> ... </tr> tag untuk membuat baris
3. <td> ... </td> tag untuk membuat kolom/cell
4. colspan merge/melebarkan kolom/cell
5. rowspan merge/melebarkan baris
Atribut tabel dan fungsinya
Tag Atribut/Contoh penulisan Fungsi
<table>
...
</table>
border=”...” Ketebalan tabel.
Contoh:
<table border=”1”>
5
align=”...” Pengaturan tabel (rata tengah,
kanan atau kiri)
width=”...” Lebar tabel. Bisa diisi dengan
satuan pixel atau persen.
Contoh:
<table width=”80%”> atau
<table width=”600”>
valign=”...” Perataan secara vertikal dari
suatu cell.
(top, middle, bottom)
bordercolor=”...” Warna border
bgcolor=”...” Warna background tabel,
baris atau cell
Agar cell dalam tabell kosong, maka dapat digunakan perintah
Contoh 1:
Tulislah perintah HTML untuk membuat tabel seperti berikut ini:
Satu Dua
Tiga Empat
Jawab:
<html>
<head>
<title> Latihan Table </title>
</head>
<body>
<table border=”1”>
<tr>
<td align=”center”>Satu</td>
<td align=”center”>Dua</td>
</tr>
<td align=”center”>Tiga</td>
<td align=”center”>Empat</td>
</table>
</body>
</html>
Contoh 2:
Tulislah perintah HTML untuk membuat tabel seperti berikut ini:
Satu
Dua Tiga
Jawab:
<html>
<head>
<title> Latihan Table Dua </title>
</head>
<body>
<table border=”1”>
<tr>
<td colspan=” 2” align=”center”>Satu</td>
</tr>
<tr>
<td align=”center”>Dua</td>
<td align=”center”>Tiga</td>
</tr>
6
</table>
</body>
</html>
Latihan Pertemuan 1
Tulislah perintah-perintah HTML-nya agar diperoleh bentuk tabel seperti berikut (1 tabel = 1 file):
1.
1 2 3
4 5 6
7 8 9
2.
1 2
3 4 5
6 7
3.
1
2 3
4 5 6
4.
2
1
3
5.
1
3
2
6.
1 2
3
4
5 6
8
7
9 10
7
PERTEMUAN 2
Ketikklah perintah-perintah HTML berikut, kemudian modifikasilah agar diperoleh tampilan yang
maksimal ! Pahami setiap perintah/tag HTML-nya !
<html>
<head>
<title> Latihan Pertemuan 2 </title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<table border="1" align="center" width="80%">
<tr>
<td colspan="2" align="center" height="100" bgcolor="#3A2BD1">
<font size="16" face="Arial">SITUSKU.COM </font><br>
<hr width="500"> <br>
<marquee direction="right">Terdepan Dalam Berita dan
Gosip</marquee>
</td>
</tr>
<tr valign="top">
<td width="200" height="450" bgcolor="green">Home</td>
<td bgcolor="#F75454">Selamat Datang di <b><i>SITUSKU.COM</i></b> <br>
Situsku.Com akan selalu konsisten dengan berita-berita terbaru dari
segala penjuru Indonesia.<br><br>
Dapatkan berita-berita menarik tentang: politik, hukum, keamanan, gosip
artis dan kuliner di Indonesia.
</td>
</tr>
</table>
</body>
</html>
PERTEMUAN 3
Buatlah halaman situs dengan layout seperti berikut ini:
JUDUL.COM
“Slogan Here”
Home
Profile
Gallery
Konten/Isi Situs/Gambar
Copyright © JUDUL.COM
All right reserved 2008
8
Ketentuan:
1. Pengaturan halaman/format terserah Anda (ukuran, jenis font, warna dll)
2. Jumlah halaman = 3, denga ketentuan:
a. halaman Home: berisi ucapan selamat datang, deskripsi situs Anda dll
b. halaman Profile: berisi profil Anda, nama, kelas, alamat, tempat/tanggal lahir dll
c. halaman Gallery berisi gambar-gambar yang berkaitan dengan situs Anda
3. Setiap halaman harus memuat hyperlink/link
4. Halaman Gallery wajib memuat gambar-gambar
5. Usahakan untuk menambahkan link-image pada halaman Gallery
HTML (Hypertext Markup Language) merupakan bahasa pemrograman web yang digunakan
untuk membuat halaman situs.
Untuk belajar HTML dasar sebaiknya Anda ketikkan di Notepad.
Bentuk umum:
<html>
<head>
<title> Letakkan judul situs di sini </title>
</head>
<body>
Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini.
Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini.
Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini.
Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini.
2
</body>
</html>
Setelah diketikkan, Anda simpan dengan nama latihan.html. Untuk mengeceknya Anda double
click file yang telah Anda simpan. Sebenarnya Anda dapat menggunakan ekstensi .htm, tetapi
supaya sama, maka sebaiknya digunakan ekstensi .html.
Judul situs di tampilkan disini (dalam html
diletakkan diantara <title> ..... </title>
Gambar 1.1 Hasil perintah HTML di browser Internet Explorer (IE)
Coba Anda ketikkan perintah-perintah HTML berikut ini, kemudian Anda jalankan di browser !
<html>
<head>
<title> Latihan Pertamaku </title>
</head>
<body bg color="#000000">
<p align="left">
Paragraf ini akan rata kiri<br>
Paragraf ini akan rata kiri<br>
Paragraf ini akan rata kiri<br>
<p>
br digunakan untuk ganti baris <br><br>
<b>Kalimat ini akan dicetak Bold </b> <br>
<i>Kalimat ini akan dicetak Italic </i> <br>
<b><i>Kalimat ini akan dicetak Bold dan Italic</i></b>
<hr width="1000"><br>
Perintah hr digunakan untuk membuat garis
</body>
</html>
Simpan perkerjaan Anda dengan nama latihan_2.html. Jika benar, seharusnya ditampilkan
seperti berikut ini:
3
Gambar 1.2 Hasil dari latihan_2.html
Perhatikan perintah berikut ini:
<p align="left">
tag atribut
P pada perintah di atas disebut dengan tag, sedangkan align disebut dengan atribut. Atribut
merupakan perintah yang menyertai tag.
Berikut beberapa perintah HTML dan fungsinya:
Tag Atribut/Contoh penulisan Fungsi
<body> <body bgcolor=”red”>
<body bgcolor=”#FF0000”>
text=” ... “
link=” ...”
vlink=”...”
alink=”...”
<body
background=”D:\Gambar.jpg”>
Backgorund halaman berwarna
merah
Memberi warna pada teks
Warna link
Warna link yang sudah dikunjungi
Warna link yang aktif
Memberi background gambar
pada halaman
<a> ... </a> <a
href=”D:\home.html”>Home</a>
<a
href="http://www.yahoo.com/">Ya
hoo!</a>
<a
href="mailto:name@domain.com"
>here</a> to email me!
Membuat hyperlink/link
<img> <img src="person.jpg" width="50"
height="50" border="0"
alt="Person" align="left">
Memasukkan gambar dengan
nama file gambar person.jpg,
lebar 50px, tinggi 50px, border 0,
rata kiri, dan jika gambar tidak
muncul akan keluar teks Person
4
<img src=”C:\Documents and
Settings\All Users\Documents\My
Pictures\Sample
Pictures\Sunset.jpg>
<font>... /font> <FONT size="2" color="#FFFF00"
face="arial">...</font>
Mengatur font dengan ukuran 2,
warna kuning, jenis huruf Arial
<BIG>...</BIG> <BIG>Contoh </BIG> Membuat teks Contoh menjadi
lebih besar
<SMALL>...</SMALL> <SMALL> Contoh</SMALL> Membuat teks Contoh menjadi
lebih kecil
<b>...</b> Teks bold/dicetak lebih tebal
<i>…</i> Teks italic/miring
<strike>...</strike> Teks tercoret
<u>...</u> Teks underlined
<h1>...</h1> Teks heading 1. Tingkat heading
bisa sampai tingkat 6. Semakin
besar tingkar heading, maka teks
aka dicetak semakin kecil
<hr> <hr width=”600”>
<hr align=”center” size=”5”
width=”80%”
Garis dengan lebar 600. Tag <hr>
tidak perlu ditutup
Garis dengan tinggi 5, lebar 80%
dari lebar layar browser dan rata
tengah
<p align=”center’> ...
</p>
Paragraf rata tengah. Perintah ini
juga dapat ditulis dengan tag
<center>...</center>
<br> Tag untuk ganti baris Tag <br> tidak perlu ditutup
<sup>...</sup> Teks superscript
<sub>...</sub> Teks subscript
<marquee> ....
</marquee>
Teks berjalan. Memiliki atribut
direction, behavior dan lain-lain.
Contoh:
<marquee direction=”right”>
....</marquee>
<marquee behavior=”alternate”>
... </marquee>
TABLE
Beberapa perintah penting untuk membuat tabel:
1. <table border=”1”> .... </table> merupakan perintah utama dalam pembuatan tabel,
tabel dengan ketebalan 1px
2. <tr> ... </tr> tag untuk membuat baris
3. <td> ... </td> tag untuk membuat kolom/cell
4. colspan merge/melebarkan kolom/cell
5. rowspan merge/melebarkan baris
Atribut tabel dan fungsinya
Tag Atribut/Contoh penulisan Fungsi
<table>
...
</table>
border=”...” Ketebalan tabel.
Contoh:
<table border=”1”>
5
align=”...” Pengaturan tabel (rata tengah,
kanan atau kiri)
width=”...” Lebar tabel. Bisa diisi dengan
satuan pixel atau persen.
Contoh:
<table width=”80%”> atau
<table width=”600”>
valign=”...” Perataan secara vertikal dari
suatu cell.
(top, middle, bottom)
bordercolor=”...” Warna border
bgcolor=”...” Warna background tabel,
baris atau cell
Agar cell dalam tabell kosong, maka dapat digunakan perintah
Contoh 1:
Tulislah perintah HTML untuk membuat tabel seperti berikut ini:
Satu Dua
Tiga Empat
Jawab:
<html>
<head>
<title> Latihan Table </title>
</head>
<body>
<table border=”1”>
<tr>
<td align=”center”>Satu</td>
<td align=”center”>Dua</td>
</tr>
<td align=”center”>Tiga</td>
<td align=”center”>Empat</td>
</table>
</body>
</html>
Contoh 2:
Tulislah perintah HTML untuk membuat tabel seperti berikut ini:
Satu
Dua Tiga
Jawab:
<html>
<head>
<title> Latihan Table Dua </title>
</head>
<body>
<table border=”1”>
<tr>
<td colspan=” 2” align=”center”>Satu</td>
</tr>
<tr>
<td align=”center”>Dua</td>
<td align=”center”>Tiga</td>
</tr>
6
</table>
</body>
</html>
Latihan Pertemuan 1
Tulislah perintah-perintah HTML-nya agar diperoleh bentuk tabel seperti berikut (1 tabel = 1 file):
1.
1 2 3
4 5 6
7 8 9
2.
1 2
3 4 5
6 7
3.
1
2 3
4 5 6
4.
2
1
3
5.
1
3
2
6.
1 2
3
4
5 6
8
7
9 10
7
PERTEMUAN 2
Ketikklah perintah-perintah HTML berikut, kemudian modifikasilah agar diperoleh tampilan yang
maksimal ! Pahami setiap perintah/tag HTML-nya !
<html>
<head>
<title> Latihan Pertemuan 2 </title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<table border="1" align="center" width="80%">
<tr>
<td colspan="2" align="center" height="100" bgcolor="#3A2BD1">
<font size="16" face="Arial">SITUSKU.COM </font><br>
<hr width="500"> <br>
<marquee direction="right">Terdepan Dalam Berita dan
Gosip</marquee>
</td>
</tr>
<tr valign="top">
<td width="200" height="450" bgcolor="green">Home</td>
<td bgcolor="#F75454">Selamat Datang di <b><i>SITUSKU.COM</i></b> <br>
Situsku.Com akan selalu konsisten dengan berita-berita terbaru dari
segala penjuru Indonesia.<br><br>
Dapatkan berita-berita menarik tentang: politik, hukum, keamanan, gosip
artis dan kuliner di Indonesia.
</td>
</tr>
</table>
</body>
</html>
PERTEMUAN 3
Buatlah halaman situs dengan layout seperti berikut ini:
JUDUL.COM
“Slogan Here”
Home
Profile
Gallery
Konten/Isi Situs/Gambar
Copyright © JUDUL.COM
All right reserved 2008
8
Ketentuan:
1. Pengaturan halaman/format terserah Anda (ukuran, jenis font, warna dll)
2. Jumlah halaman = 3, denga ketentuan:
a. halaman Home: berisi ucapan selamat datang, deskripsi situs Anda dll
b. halaman Profile: berisi profil Anda, nama, kelas, alamat, tempat/tanggal lahir dll
c. halaman Gallery berisi gambar-gambar yang berkaitan dengan situs Anda
3. Setiap halaman harus memuat hyperlink/link
4. Halaman Gallery wajib memuat gambar-gambar
5. Usahakan untuk menambahkan link-image pada halaman Gallery
Tidak ada komentar:
Posting Komentar