Scribd
Unggah
546 tayangan11 halaman

Tugas Dasar HTML

Dokumen tersebut memberikan contoh kode HTML dasar untuk membuat halaman web sederhana tentang riwayat hidup yang berisi judul, nama, NRP, kelas, tempat/tanggal lahir, alamat, riwayat pendidikan, email, homepage, hobi, dan diskripsi diri.

Diunggah oleh

Pujek Mazt
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
546 tayangan11 halaman

Tugas Dasar HTML

Dokumen tersebut memberikan contoh kode HTML dasar untuk membuat halaman web sederhana tentang riwayat hidup yang berisi judul, nama, NRP, kelas, tempat/tanggal lahir, alamat, riwayat pendidikan, email, homepage, hobi, dan diskripsi diri.

Diunggah oleh

Pujek Mazt
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 11

Tugas Dasar HTML

1. Cobalah skrip-skrip dibawah ini :

• Sintaks dasar dari bahasa html


: File : Coba.html
<html>
<body>
Belajar bahasa HTML.
</body>
</html>

• Paragraf HTML
File : paragraf.html
<html>
<body>

<p>Ini adalah paragraf.</p>


<p> Ini adalah paragraf.</p>
<p> Ini adalah paragraf.</p>

<p>Elemen Paragraf didefiniskan dengan tag P </p>

</body>
</html>
• Line Break
File : Line_Break.html

<html>
<body>

<p>
Untuk ganti <br>baris<br>dalam<br>paragraf,<br>gunakan tag BR.
</p>

</body>
</html>

• Heading
File : Heading.html
<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 judul saja. Jangan


gunakan untuk mempertebal tulisan, gunakan tag yang lain</p>

</body>
</html>

• Horisontal Rules
File : Horisontal_Rules.html

<html>
<body>
<p>Tag HR mendefinisikan horisontal
rules:</p> <hr>
<p> Ini adalah paragraf</p>
<hr>
<p> Ini adalah paragraf </p>
<hr>
<p> Ini adalah paragraf </p>
</body>
</html>
• Komentar dalam HTML
File : Comment.html
<html>
<body>

<!—Komentar ini tidak ditampilkan-->


<p>Ini adalah paragraf</p>

</body>
</html>

• Mewarnai Latar Belakang Halaman


Web File : Bground_color.html
<html>
<body bgcolor="yellow">
<h2>Lihat: Latar Belakang Berwarna
kuning!</h2> </body>
</html>

• Latar Belakang Halaman Web Berisi Gambar


File : Bground_image.html
Petunjuk : Anda harus menyiapkan gambar bernama Background.jpg, taruh file
tersebut satu folder dengan file Bground_image.html.

<html>
<body background="background.jpg">

<h3>Lihat : Latar belakang web berupa gambar!</h3>

<p>File gif ataupun jpg bisa digunakan untuk latar belakang


halaman web.</p>

<p>Jika gambar lebih kecil dari halaman web, gambar akan


muncul berulang-ulang atau mode TILE.</p>

</body>
</html>

• Pemformatan Teks
File : Text_formatting.html

<html>
<body>
<b>Teks ini ditebalkan</b>
<br>
<strong>Teks Ini Ditajamkan</strong>
<br>
<big>Teks ini diperbesar</big>
<br>
<em>Teks ini ditekan</em>
<br>
<i>Teks ini miring</i>
<br>
<small>Teks ini diperkecil</small>
<br>
Teks ini mengandung
<sub>subscript</sub>
<br>
Teks ini mengandung
<sup>superscript</sup>
</body>
</html>

• Format teks yang ditampilkan apa adanya (Preformatted


Text) File : Preformatted_text.html

<html>
<body>
<pre>
Ini adalah
preformatted text.
Menampilkan spasi
Dan line break apa adanya.
</pre>
<p>Tag PRE cocok digunakan untuk menampilkan kode bahasa
pemrograman komputer :</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>

• Tanda Kutip (quotation)


File : Quotation.html

<html>
<body>
Ini adalah tanda kutip panjang:
<blockquote>
Ini adalah tanda kutip panjang. Ini adalah tanda kutip panjang. Ini adalah
tanda kutip panjang. Ini adalah tanda kutip panjang. Ini adalah tanda
kutip panjang.
</blockquote>
Ini adalah tanda kutip pendek:
<q> Ini adalah tanda kutip pendek </q>
<p>
dengan elemen BLOCK QUOTE, browser akan menyisipkan line breaks
dan margins, tetapi elemen q tidak menghasilkan sesuatu yang spesial.
</p>
</body>
</html>

• Unordered List (UL) File


: Unordered_list.html
<html>
<body>
<h4>Unordered List:</h4>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
</body>
</html>

• Ordered List (OL) File


: Ordered_list.html
<html>
<body>
<h4>Unordered List:</h4>
<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
</body>
</html>

• Ragam tag ordered list


File : Ordered_list1.html

<html>
<body>
<h4>List berupa angka:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>List Berupa Huruf Besar:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4> List Berupa Huruf Kecil:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Angka Romawi Huruf Besar:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Angka Romawi Huruf Kecil:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>

• Ragam tag unordered list


File : Unordered_list1.html

<html>
<body>
<h4>List Bentuk Lingkaran Hitam</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>List Bentuk Lingkaran Putih:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>List Bentuk Kotak:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>

• List Bertingkat (Nested List)


File : Nested_List.html

<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>

• Definition List (DL)


File : Definition_list.html

<html>
<body>
<h4>Definition List:</h4>
<dl>
<dt>Kopi</dt>
<dd>Minuman Hitam Panas</dd>
<dt>Susu</dt>
<dd>Minuman Putih Dingin</dd>
</dl>
</body>
</html>

• Hyperlink lewat teks


File : Hyperlink.html
<html>
<body>
<p>
<a href="coba.html">
Teks ini</a> menghubungkan halaman html yang lain dalam web site ini.
</p>
<p>
<a href="http://www.microsoft.com/">
Teks ini</a> menghubungkan halaman html yang lain dalam World
Wide Web.
</p>
</body>
</html>

• Hyperlink lewat gambar


File : Hyperlink_image.html
Petunjuk : Siapkan gambar kecil apa saja, namai dengan buttingif.gif kemudian
simpan kedalam tempat folder dimana Hyperlink_image.html

<html>
<body>
<p>
Kamu juga dapat menggunakan link lewat gambar:
<a href="coba.html">
<img border="0" src="buttonnext.gif" width="65" height="38">
</a>
</p>
</body>
</html>

• Hyperlink dengan membuka window baru


File : Hyperlink_window.html

<html>
<body>
<a href="coba.html" target="_blank">Halaman
Pertama</a> <p>
Jika anda melihat target attributnya adalah “_blank”, Maka link akan
membuka window baru.
</p>
</body>
</html>

• Hyperlink dengan melompat ke bagian lain dalam satu halaman


web File : Hyperlink_self.html
<html>
<body>
<p><a href="#B4">Lihat Juga Bab 4.</a></p>
<h2>Bab 1</h2>
<p>Bab ini berisi ba bla bla</p>
<h2> Bab 2</h2>
<p> Bab ini berisi ba bla bla </p>
<h2> Bab 3</h2>
<p> Bab ini berisi ba bla bla </p>
<a name="B4"><h2> Bab 4</h2></a>
<p> Bab ini berisi ba bla bla </p>
</body>
</html>

C. TUGAS PRAKTIKUM

Buat halaman web sederhana, yaitu halaman web pribadi mengenai riwayat hidup saudara,
dengan menampilkan daftar list sebagai berikut:

1. Judul Homepage : Homepage Pribadi


2. Tampilan :

1. Nama : [nama anda]


2. NRP : [nrp anda]
3. Kelas : [kelas anda]
4. Tempat/Tanggal Lahir : [tempat lahir anda]/[tanggal lahir anda]
5. Alamat :
[alamat anda (petunjuk bila alamat lebih dari 10 huruf harus pindah baris)]
6. Riwayat Pendidikan :
A. SD :
B. SMP :
C. SMA :
7. Email : [email anda (petunjuk gunakan link address)]
8. Homepage : [homepage anda (petunjuk gunakan link address)]
9. Hobby :
[hobby anda (petunjuk bila hoby lebih dari satu, maka harus pindah baris]

<----------------------------- horisontal rules ---------------------------

10. Diskripsi Pribadi Saya :


[berisi tentang pribadi anda (petunjuk gunakan pemformatan page untuk
memperindah tampilan)]

Contoh :
1. Nama : Yudi Herlambang
2. NRP : 7403030500
3. Kelas : 3-EA
4. Tempat/Tanggal Lahir : Surabaya/17-Agustus-1945
5. Alamat :

6. Riwayat Pendidikan :
A. SD : SD Wates 1 Mojokerto
B. SMP : SMP 1 Kota Mojokerto
C. SMA : SMA 1 Sooko Mojokerto
7. Email : [email protected]
8. Homepage : www.yudi.com
9. Hobby :
A. Renang
B. Badminton
C. Catur

10. Diskripsi Pribadi Saya :


Saya pemalu, agak kurang suka dengan pergaulan bebas, tetapi saya cerdas, selalu
menjuarai berbagai perlombaan catur di tingkat nasional. Sehingga saya selalu
disebut sebagai mahasiswa teladan.

Anda mungkin juga menyukai