Praktek 1 HTML

PRAKTIKUM 1
1.1 JUDUL
Pengenalan HTML
1.2 TUJUAN
Pada akhir perkuliahan ini mahasiswa akan dapat:
Memahami dan mempraktekan tag-tag dasar bahasa HTML
Dapat membuat halaman web statis sederhana menggunakan perintah HTML
1.3 DASAR TEORI
1.4 LANGKAH PERCOBAAN
1. Anda harus menyiapkan web server, anda boleh memakai web server apache atau
IIS. Atau menggunakan ALL in One web application seperti WAMPP dan XAMPP.
2. Letakkan dokumen anda pada dokumen root dari web server yang anda pakai, sebagai
contoh : dokumen root web server Apache dengan sistem operasi windows berada
pada folder : C:\xampp\htdocs
3. Tulis kode-kode HTML berikut ini kedalam Notepad atau editor lain, simpan dalam
extensi html atau htm dan kemudian letakkan kedalam direktori root web server anda.
Kemudian panggil file tersebut dengan cara sebagai berikut :
http:\\localhost\nama_file.html atau http:\\Ipaddresskomputeranda\nama_file.html atau
http:\\namaKomputerAnda\nama_file.html.
4. Cara Praktek:
a. Cobalah Masing-masing coding di bawah ini, kemudian
b. TULISKAN dengan TANGAN di LAPORAN Sementara. Jangan lupa judul
dan Nomor percobaan di tulis di laporan sementara agar sesuai.
Praktikum Desain Web- Politeknik Negeri Banjarmasin- oleh : Agus SBN & Arifin Noor A| 1
1.4.1 Sintaks dasar dari bahasa html :
File : Coba.html
<html> <title>TULIS NIM – NAMA ANDA DI SINI</title>

<body>
Belajar bahasa HTML.
</body>
</html>
1.4.2 Paragraf HTML
File : paragraf.html
<html>
<title>TULIS NIM – NAMA ANDA DI SINI</title>
<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>
1.4.3 Line Break
File : Line_Break.html
<html>
<body>
<p>
Untuk ganti <br>baris<br>dalam<br>paragraf,<br>gunakan tag BR.
</p>
</body>
</html>
1.4.4 Heading
File : Heading.html
<html>
<body>
<h1> Ini adalah heading 1</h1>

<p>Gunakan tag heading hanya untuk membuat judul saja. Jangan

gunakan untuk mempertebal tulisan, gunakan tag yang lain</p>
</body>
</html>
1.4.5 Horisontal Rules
File : Horisontal_Rules.html
<html><title>TULIS NIM – NAMA ANDA DI SINI</title>

<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>
1.4.6 Komentar dalam HTML
File : Comment.html

<body>
<!—Komentar ini tidak ditampilkan-->

<p>Ini adalah paragraf</p>
</body>
</html>
1.4.7 Mewarnai Latar Belakang Halaman Web
File : Bground_color.html

<body bgcolor="yellow">
<h2>Lihat: Latar Belakang Berwarna kuning!</h2>
</body>
</html>
1.4.8 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.

<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>
1.4.9 Pemformatan Teks
Tulis lah pada setiap file praktikum ini setelah <html> di tambah dengan
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>
1.4.10 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>
1.4.11 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>
1.4.12 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>
1.4.13 Ordered List (OL)
File : Ordered_list.html
<html>
<body>
<h4>Ordered List:</h4>
<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
</body>
</html>
1.4.14 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>
1.4.15 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>
1.4.16 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>
1.4.17 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>
1.4.18 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>
1.4.19 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>
1.4.20 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>
1.4.21 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>
<a name="B4"><h2> Bab 4</h2></a>
</body>
</html>
1.4.22 Tabel
File : tabel.html
<html>
<body>
<p><strong>
Satu Kolom:</strong></p>
<table border="1">
<tr>
<td>500</td>
</tr>
</table>
<h4>Satu baris dan lima kolom:</h4>
<table border="1">
<tr>
<td>1000</td>
<td>2000</td>
<td>3000</td>
<td>4000</td>
<td>5000</td>
</tr>
</table>
<h4>Dua baris dan lima kolom :</h4>
<table border="1">
<tr>
<td>1000</td>
<td>2000</td>
<td>3000</td>
<td>5000</td>
<td>6000</td>
</tr>
<tr>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>11000</td>
</tr>
</table>
</body>
</html>
1.4.23 Menggabung kolom tabel
File : tabelcol.html
<html><title>Colsapn dan Rowspan</title>

<body>
<h4>Colspan 3 kolom:</h4>
<table border="1">
<tr>
<th>Hari</th>
<th colspan="3">Kuliah</th>
</tr>
<tr>
<td>Senin</td>
<td>Web Design</td>
<td>Aplikasi Web </td>
<td>Database </td>
</tr>
</table>
</body>
</html>
1.4.24 Menggabung kolom dan baris pada tabel
File : tabelrowcol.html
<html><title>Colsapn dan Rowspan</title>

<body>
<h4>Colspan 3 kolom:</h4>
<table border="1">
<tr>
<th>Hari</th>
<th colspan="3">Kuliah</th>
</tr>
<tr>
<td>Senin</td>
<td>Web Design</td>
<td>Aplikasi Web </td>
<td>Database </td>
</tr>
</table>
<h4>Rowspan 3 row:</h4>
<table border="1">
<tr>
<th>Hari:</th>
<td>Senin</td>
</tr>
<tr>
<th rowspan="3">Kuliah</th>
<td>Web Design</td>
</tr>
<tr>
<td>Aplikasi Web</td>
</tr>
<tr>
<td>Database</td>
</tr>
</table>
</body>
</html>
1.4.25 FORM
File : tabelrowcol.html
<html><title>Password</title>
<body>
<form>
Username:
<input type="text" name="user"><br>
Password:
<input type="password" name="password">
</form>
<p>Keterangan : ketika memasukan data di field password, browser akan
menampilkan tanda bintang sebagai pengganti karakter. </p>
</body>
</html>
1.5 DATA
<Isikan data langkah percobaan di lembar kerja praktikum>
1.6 Analisa Data
<Buatlah analisa berdasar data yang diperoleh>
1.7 Kesimpulan
<Ambil kesimpulan dari data dan analisa data>
1.8 Soal
Tugas praktikum
PETUNJUK UMUM :
1. Gunakan Tag-Tag yang telah diajarkan, dan pakailah imajinasi anda untuk
memperindah tampilan, semisal font-nya memakai warna yang berbeda-beda
2. Khusus Untuk Tugas Ini, CETAK halaman web dengan printer berwarna disertai
dengan source code-nya.
TUGAS 1
Judul Homepage : Homepage Pribadi

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. NIM : E03…….
3. Kelas : 3-EA
4. Tempat/Tanggal Lahir : Surabaya/17-Agustus-1945
5. Alamat :
Jl Sikatan No 46
Jombang, Jawa Timur
A. SD : SD Lintah Darat 6 Jombang
B. SMP : SMP Buaya Darat 7 Jakarta
C. SMA : SMA Angkatan Darat 8 Purwakarta
7. Email : yudi@yahoo.com
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.
MESKIPUN SAYA JAGO RENANG, TETAPI SAYA TIDAK PERNAH
MENJUARAI LOMBA RENANG, NAMUN SAYA HAPPY AJA TUH
TUGAS 2
Buat halaman web DATA ENTRY mengenai data pribadi seseorang

Hanya data entry, tidak perlu ditampilkan:
HALAMAN DATA ENTRY

1. Judul Homepage : Homepage DATA ENTRY
2. Tampilan :
1. Nama : [text box]

2. NIM : [text box]
3. Kelas : [text box]
4. Jenis Kelamin : [radio button, pilihan pria dan wanita]
5. Agama : [combo box, berisi: islam,kristen,hindu,budha]
6. Tempat/Tanggal Lahir : [text box]
7. Alamat :
[textbox multiline]
A. SD : [text box]
B. SMP : [text box]
C. SMA : [text box]
9. Email : [text box]
10. Homepage : [text box]
11. Hobby :
[textbox multiline]
12. Interest : [check box, berisi : Komputer, Sport, Travelling, Writing, Reading]
Halaman Data Entry Dilengkapi dengan button simpan dan button reset
Contoh : Tampilan
1. Nama :
2. NIM :
3. Kelas :
4. Jenis Kelamin : Pria Wanita
5. Agama :
ISLAM
6. Tempat/Tanggal Lahir : /
7. Alamat :
a. SD :
b. SMP :
c. SMA :
9. Email :
10. Homepage :
11. Hobby :
12. Interest : Komputer Sport Travelling Writing Reading
SIMPAN RESET

Praktek 1 HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Praktek 1 HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

PRAKTIKUM 1

Pada akhir perkuliahan ini mahasiswa akan dapat:

Memahami dan mempraktekan tag-tag dasar bahasa HTML

Dapat membuat halaman web statis sederhana menggunakan perintah HTML

1.3 DASAR TEORI

1.4 LANGKAH PERCOBAAN

<html> <title>TULIS NIM – NAMA ANDA DI SINI</title>

1.4.2 Paragraf HTML

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

1.4.3 Line Break

<h1> Ini adalah heading 1</h1>

<p>Gunakan tag heading hanya untuk membuat judul saja. Jangan

1.4.5 Horisontal Rules

<html><title>TULIS NIM – NAMA ANDA DI SINI</title>

<html> <title>TULIS NIM – NAMA ANDA DI SINI</title>

<!—Komentar ini tidak ditampilkan-->

1.4.7 Mewarnai Latar Belakang Halaman Web

<html> <title>TULIS NIM – NAMA ANDA DI SINI</title>

1.4.8 Latar Belakang Halaman Web Berisi Gambar

<html> <title>TULIS NIM – NAMA ANDA DI SINI</title>

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

1.4.10 Format teks yang ditampilkan apa adanya (Preformatted Text)

1.4.12 Unordered List (UL)

1.4.17 Definition List (DL)

1.4.19 Hyperlink lewat gambar

<html><title>Colsapn dan Rowspan</title>

<html><title>Colsapn dan Rowspan</title>

<Isikan data langkah percobaan di lembar kerja praktikum>

1.6 Analisa Data

<Buatlah analisa berdasar data yang diperoleh>

<Ambil kesimpulan dari data dan analisa data>

Judul Homepage : Homepage Pribadi

<----------------------------- horisontal rules ---------------------------

1. Nama : Yudi Herlambang

Jombang, Jawa Timur

10. Diskripsi Pribadi Saya :

sebagai mahasiswa teladan.

MESKIPUN SAYA JAGO RENANG, TETAPI SAYA TIDAK PERNAH

MENJUARAI LOMBA RENANG, NAMUN SAYA HAPPY AJA TUH

Buat halaman web DATA ENTRY mengenai data pribadi seseorang

HALAMAN DATA ENTRY

1. Nama : [text box]

12. Interest : Komputer Sport Travelling Writing Reading

Anda mungkin juga menyukai