Dalam modul ini Anda akan berlatih untuk menggunakan berbagai tag dasar untuk pemrograman web menggunakan HTML. Ketikkan setiap kelompok tag dalam sebuah file, simpan dalam folder Anda sendiri yang telah ditentukan, kemudian jalankan di web browser yang telah terinstall. Ketikkan setiap kode sumber apa adanya terlebih dahulu (termasuk spasi kosong). Perhatikan hasil tampilannya, kemudian belajar untuk memodifikasi setiap kelompok tag untuk mengetahui maksud dari setiap baris tag HTML yang Anda ketikkan. Jangan lupa untuk menyimpan setiap modifikasi Anda sebelum menjalankan ulang di dalam browser.
HTML Dasar
<html>
<body>
Isi dari elemen body akan ditampilkan dalam browser Anda.
</body>
</html>
Paragraf sederhana
<html>
<body>
<p>Ini adalah paragraf.</p>
<p>Ini adalah paragraf.</p>
<p>Ini adalah paragraf.</p>
<p>Elemen paragraf didefinisikan oleh tag p.</p>
</body>
</html>
Paragraf yang lebih kompleks
<html>
<body>
<p>
Paragraf ini mengandung banyak baris dalam kode sumbernya, tetapi browser akan mengabaikannya.
</p>
<p>
Paragraf inimengandung banyak spasi dalam kode sumbernya,
tetapi browser akan mengabaikannya.
</p>
<p>
Jumlah baris dalam setiap paragraf tergantung pada ukuran window browser Anda. Bila Anda mengubah ukuran window browser, jumlah baris dalam paragraf akan berubah.
</p>
</body>
</html>
Line break
<html>
<body>
<p>
Untuk memotong <br>baris<br>dalam sebuah<br>paragraf,<br>gunakan tag br.
</p>
</body>
</html>
Masalah pemformatan
<html>
<body>
<p>
Satu satu, aku sayang Ibu.
Dua dua, aku sayang Ayah.
Tiga tiga, aku sayang Kakak.
Satu dua tiga, sayang semuanya.
</p>
<p>Perhatikan bahwa browser begitu saja mengabaikan pemformatan Anda!</p>
</body>
</html>
Heading
<html>
<body>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<h6>Ini adalah heading 6</h6>
<p>Gunakan tag heading hanya untuk membuat heading saja. Jangan menggunakan tag tersebut hanya untuk membuat tampilan huruf tebal. Gunakan tag lain untuk keperluan itu. </p>
</body>
</html>
Header yang diletakkan di tengah
<html>
<body>
<h1 align=”center”>Ini adalah heading 1</h1>
<p>Heading di atas telah diposisikan untuk berada di tengah halaman ini. Heading di atas telah diposisikan untuk berada di tengah halaman ini. Heading di atas telah diposisikan untuk berada di tengah halaman ini.</p>
</body>
</html>
Garis horisontal
<html>
<body>
<p>Tag hr mendefinisikan sebuah garis horisontal:</p>
<hr>
<p>Ini adalah sebuah paragraf</p>
<hr>
<p>Ini adalah sebuah paragraf </p>
<hr>
<p>Ini adalah sebuah paragraf </p>
</body>
</html>
Komentar tersembunyi
<html>
<body>
<!—Ini adalah komentar yang tidak akan ditampilkan –>
<p>Yang ini adalah paragraf biasa</p>
</body>
</html>
Warna latar belakang
<html>
<body bgcolor=”yellow”>
<h2>Lihatlah: Latar belakang berwarna!</h2>
</body>
</html>
Sehat Tanpa Obat 