Web Mulok : http://www.mulok85.
com
Email : [email protected]
Modul Dasar HTML
By. Koswara, S.Kom
Tujuan:
Siswa dapat membuat desain situs menggunakan perangkat lunak desain dan
pemrograman web
Materi:
1. HTML Dasar
2. Desain Layout di Photoshop
3. Desain Web di Dreamweaver
4. Publishing Situs
5. Membuat website dengan CMS
PERTEMUAN 1
Tujuan:
1. Siswa dapat memahami dan mengenal perintah-perintah dasar HTML
2. Siswa dapat membuat tabel dan pengaturannya
Indikator Keberhasilan:
1. Siswa dapat membuat beberapa halaman website sederhana
2. Siswa dapat membuat tabel dan pengaturannya
3. Siswa dapat membuat beberapa halaman website yang dilengkapi dengan
hyperlink, image dan link-image
Beberapa istilah yang sebaiknya Anda ketahui sebelum belajar HTML:
1. http
2. url
3. domain
4. hosting
5. browser
6. server
7. internet
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.
1
Letakkan perintah-perintah HTML di sini.
2
Web Mulok : http://www.mulok85.com
Email : [email protected]
</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
Web Mulok : http://www.mulok85.com
Email : [email protected]
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”> Backgorund halaman berwarna
<body bgcolor=”#FF0000”> merah
text=” ... “ Memberi warna pada teks
link=” ...” Warna link
vlink=”...” Warna link yang sudah
alink=”...” dikunjungi Warna link yang
aktif
<body background=”D:\ Memberi background
Gambar.jpg”> gambar pada halaman
<a> ... </a> <a href=”D:\ Membuat hyperlink/link
home.html”>Home</a>
<a
href="http://www.yahoo.com/
">Ya hoo!</a>
<a
href="mailto:name@domain.
com"
>here</a> to email me!
<img> <img src="person.jpg" Memasukkan gambar dengan
width="50" height="50" nama file gambar person.jpg,
border="0" alt="Person" lebar 50px, tinggi 50px,
align="left"> border 0, rata kiri, dan jika
4
Web Mulok : http://www.mulok85.com
Email :
[email protected] gambar tidak
muncul akan keluar teks
Person
5
Web Mulok : http://www.mulok85.com
Email : [email protected]
<img src=”C:\Documents
and Settings\All Users\
Documents\My Pictures\
Sample
Pictures\Sunset.jpg>
<font>... /font> <FONT size="2" Mengatur font dengan ukuran
color="#FFFF00" 2, warna kuning, jenis huruf
face="arial">...</font> 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”> Garis dengan lebar 600. Tag
<hr> tidak perlu ditutup
Garis dengan tinggi 5, lebar
80% dari lebar layar browser
<hr align=”center” size=”5” dan rata tengah
width=”80%”
<p align=”center’> ... Paragraf rata tengah. Perintah
</p> 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> .... Teks berjalan. Memiliki atribut
</marquee> 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
6
Web Mulok : http://www.mulok85.com
Email : [email protected]
<table> border=”...” Ketebalan tabel.
... Contoh:
</table> <table border=”1”>
7
Web Mulok : http://www.mulok85.com
Email : [email protected]
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>
</tr> <td align=”center”>Dua</td>
<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>
</ </tr>
tr>
<tr
>
8
Web Mulok : http://www.mulok85.com
Email : [email protected]
<td
colspan=”
2”
align=”ce
nter”>Sat
u</td>
<td
align=”ce
nter”>Dua
</td>
<td
align=”ce
nter”>Tiga
</td>
9
Web Mulok : http://www.mulok85.com
Email : [email protected]
</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
2
3
6.
1 2
4
3 5 6
8
7 10
9
1
0
Web Mulok : http://www.mulok85.com
Email : [email protected]
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 Konten/Isi Situs/Gambar
Profile
Galler
y
Copyright ©
JUDUL.COM All right
reserved 2008
1
1
Web Mulok : http://www.mulok85.com
Email : [email protected]
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
- Selamat Mengerjakan -
Modul dapat di download di:
More tutorial:
http://www.htmlcodetutorial.com
1
2
