Materi : Pengenalan HTML
Tanggal : 7 Mei 2015
Latihan Pertama :
1. Aktifkan
notepad
2. Ketik
<html>
<head>
<title>
Latihan Pertama </title>
</head>
<body>
Apa kabar kawan2 semuanya? <BR>
Selamat
memulai latihan pertama
</body>
</html>
3. Simpan
dengan lat1.html
4. Double
click nama filenya
Output :
 |
Latihan Kedua
1. Aktifkan
notepad
2. Ketik
<html>
<head>
<title>
Latihan Kedua
</title>
</head>
<!—Latar
belakang warna blue (biru) -->
<body
bgcolor = “blue”>
Sekarang
warna latar belakang web adalah biru
</body>
</html>
5. Simpan
dengan lat2.html
6. Double
click nama filenya
Latihan Ketiga
1. Aktifkan
notepad
2. Ketik
<html>
<head>
<title> Latihan Ketiga
</title>
</head>
<!—warna teks #ff0022 -->
<body text =”#ff0022”>
</body>
</html>
3. Simpan
dengan lat3.html
4. Doubleclick
nama filenya
Silver, Gray, white, maroon, red,
purple, fuchisa, green, lime, olive, yellow, navy, teal dan aqua
Juga dapat meggunakan kombinasi 6
angka 0-9, a-f dan diawali dengan karakter “#”
Latihan Keempat
1. Aktifkan
notepad
2. Ketik
<html>
<head>
<title> Latihan Keempat
</title>
</head>
<body text =”#ff022” bgcolor =
“#eeff00”>
</body>
</html>
3. Simpan
dengan lat4.html
4. Doubleclick
nama filenya
Latihan Kelima
1. Aktifkan
notepad
2. Ketik
<html>
<head>
<title> Latihan Kelima
</title>
</head>
<body background = “Chrysanthemum.jpg”>
</body>
</html>
3. Simpan
dengan lat5.html
4. Doubleclick
nama filenya
Latihan Keenam
1. Aktifkan
notepad
2. Ketik
<html>
<head>
<title> Latihan Keenam
</title>
</head>
<body>
<p> Ini adalah paragraph
pertama yang terdiri atas beberapa baris, yaitu baris satu, baris dua, baris
tiga. </p>
<p align = “center”> Ini
adalah paragraph kedua yang terdiri atas beberapa baris, yaitu baris satu,
baris dua, baris tiga. </p>
<p align = “right”> Ini
adalah paragraph ketiga yang terdiri atas beberapa baris, yaitu baris satu,
baris dua, baris tiga. </p>
</body>
</html>
3. Simpan
dengan lat6.html
4. Doubleclick
nama filenya
1. Aktifkan
notepad
2. Ketik
<html>
<head>
<title> Latihan Ketujuh
</title>
</head>
<body>
<p> Ini adalah paragraph
pertama yang terdiri atas beberapa baris, yaitu :
<BR> Baris satu.
<BR> Baris dua.
<BR> Baris tiga. </p>
<p align = “center”> Ini
adalah paragraph kedua yang terdiri atas beberapa baris, yaitu <BR>baris
satu, <BR>baris dua, <BR>baris tiga. </p>
<p align = “right”> Ini
adalah paragraph ketiga yang terdiri atas beberapa baris, yaitu <BR>
baris satu, <BR> baris dua, <BR>baris tiga. </p>
</body>
</html>
3. Simpan
dengan lat7.html
4. Doubleclick
nama filenya
1. Aktifkan
notepad
2. Ketik
<html>
<head>
<title> Latihan Kedelapan
</title>
</head>
<body>
Ini adalah garis lurus horizontal
biasa : <HR>
Ini adalah garis lurus horizontal
dengan size =5 <HR size=5>
Ini adalah garis lurus horizontal
dengan lebar 50% <HR width =50%>
Ini adalah garis lurus horizontal
dengan size =10 dan lebar 125 pixel <HR size=7 width = 125>
</body>
</html>
3. Simpan
dengan lat8.html
4. Doubleclick
nama filenya
1. Aktifkan
notepad
2. Ketik
<html>
<head>
<title> Latihan Kesembilan
</title>
</head>
<body>
<H6>Ini adalah Heading 6
</H6>
<H5>Ini adalah Heading 5 </H5>
<H4>Ini adalah Heading 4 </H4>
<H3>Ini adalah Heading 3 </H3>
<H2> Ini adalah Heading 2</H2>
<H1> Ini adalah Heading 1</H1>
</body>
</html>
<strike > teks yang
tercoret </strike> <BR>
Subscript : CH
<sub>3</sub>COOH<BR>
</Body>
</html>
3. Simpan
filenya lat9.html
4. Doubleclick
nama filenya
1. Aktifkan
notepad
2. Ketik
<html>
<head>
<title> Latihan Kesepuluh
</title>
</head>
<body>
Teks normal <BR>
<SMALL> teks dengan tag
small </Small>
<BIG> teks dengan tag small
</big>
<i> teks dengan tag italic
</i>
<b> teks dengan tag bold
</b>
<u> teks dengan tag
underline </u>
Contoh superscript :
x<sup>3</sup>
</body>
</html>
3. Simpan
filenya lat10.html
4. Doubleclick
nama filenya
1. Aktifkan
notepad
2. Ketik
<html>
<head>
<title> Latihan Sebelas
</title>
</head>
<body>
Teks normal <BR>
<font size=5> teks dengan
size = 5 </font><BR>
<font face = “sans serif”
size=6> teks yang diatur menggunakan tag Font dengan FACE=”sans serif” dan
size = 6</font> <BR >
</body>
</html>
3. Simpan
filenya lat11.html
4. Doubleclick
nama filenya
Tugas
buatlah Profil dan Sejarah kampus dengan menggunakan atau penggabungan dari
fungsi html yang sudah dipelajari.
