DASAR PEMROGRAMAN WEB
A. Dasar dasar HTML
1. Membuat judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan code dibawah ini:
<html>
<head>
<title> My First HTML Project </title>
</head>
<body BGCOLOR=“Green” TEXT=“Red”>
WELCOME TO MY WEBSITE
</body>
<body bgcolor=”#00ff00”>
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 1 berikut:
2. Mengatur paragraf texs, buka notepad++ kemudin ketikan code dibawah ini:
<html>
<head>
<title> Tag P, Br dan Hr </title>
</head>
<body>
<p>Ini adalah paragraf pertama, yang berisi 3 baris. Baris satu, dua dan tiga. <br><br></p>
<p>Ini adalah paragraf kerdua, yang berisi garis horizontal</p>
<hr> Ini adalah garis horizontal.
</body>
<body bgcolor=”#00ff00”>
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 2 berikut:
Gambar 2. Mengatur Paragraf
3. Mengatur ukuran huruf, buka notepad++, kemudian ketikan code dibawah ini:
<html>
<head>
<title> Tag Heading </title>
</head>
<body>
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
</body>
<body bgcolor=”#00ff00”>
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 3 berikut:
Gambar 3. Ukuran Huruf
4. Mengatur format texs, Buka notepad++, kemudian ketikan code dibawah ini:
<html>
<head>
<title>format tulisan</titele>
</head>
<body>
teks normal <br>
<small> teks small </small><br>
<big> teks big</big><br>
<b> teks tebal </b><br>
<i> teks miring </i><br>
<u> teks bergaris bawah </u><br>
Contoh superscript : x <sup>2</sup><br>
Contoh subscript : H<sub>2</sub>O<br>
<strike> Ini teks tercoret </strike><br>
<font size = 5 face = verdana>
menggunakan tag font
</font>
</body>
<body BGCOLOR ="#00FF00">
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 4 berikut:
Gambar 4. Format tulisan
5. Membuat from komentar, buka notepad++, kemudian ketikan code dibawah ini:
<html>
<head>
<title> From komentar </title>
</head>
<body>
<table>
<tr>
<tdcolspan="3"> </td></tr><tr>
<td colspan="3"><h3>Silahkan Berkomentar : </h3></td>
<td colspan="3"><h3>Silahkan Berkomentar : </h3></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type=text name="nama"></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input type=text name="email"></td>
</tr>
<tr>
<td valign=top>Komentar</td>
<td valign=top>:</td>
<td><textarea name="komentar" rows=6 width=200></textarea></td>
</tr>
<tr>
<td colspan="3"><input type=submit name="submit"
value=submit></td>
</tr>
</table>
</table>
</body>
<body BGCOLOR ="#00FF00">
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 5 berikut:
Gambar 5. From komentar
6. Mengatur kolom, buka notepad++ kemudian ketikan code dibawah ini:
<html>
<head>
<title>warna-warna</title>
</head>
<body>
<table width="300" border="1">
<tr>
<td colspan="3" align="center">warna-warna </td>
</tr>
<tr>
<td bgcolor="#00FF00">Hijau</td>
<td bgcolor="#FFFF00">Kuning</td>
<td bgcolor="#FF0000">Merah </td>
</tr>
<tr>
<td bgcolor="#999999">Abu-abu</td>
<td bgcolor="#0000FF">Biru</td>
<td bgcolor="#FF9900">Orange</td>
</tr>
<tr>
<td bgcolor="#663300">Cokelat</td>
<td bgcolor="#3399CC">Biru muda</td>
<td bgcolor="#FF00FF">Merah muda</td>
</tr>
</table>
</body>
<body BGCOLOR ="#00FF00">
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 6 berikut:
Gambar 6. Tabel
0 comments:
Posting Komentar