A. Tujuan
Mengetahui dan memahami dasar-dasar
bahasa HTML (HyperText Markup Language) sebagai dasar pemrograman untuk
membuat web statis.
B. Landasan Teori
HTML adalah salah satu yang
memerintahkan bahasa pemrograman web desain an juga biasa disebut script untuk
menyusun dokumen-dokumen web. Dokumen HTML disimpan dalam format teks reguler
dan mengandung tag-tag yang web browser akan mengeksekusi perintah-perintah
yang dispesifikasikan.
<html>
<head><title>dokumen
html</title></head>
<body >
isi dokumen web
</body>
</html>
- Tag
Adalah teks khusus (markup)
yang berupa suatu pasangan yang terdiri 2 bagian yang disebut dengan tag awal
dan tag akhir. Tag awal dinyatakan dalam bentuk <nama tag> dan
tag akhir ddinyatakan dalam bentuk </nama tag> sebagai penutup isi
dokumen html.
- Element
Adalah isi dari tag yang
berada diantara tag pembuka dan tag penutup. Elemen tidak hanya
berisi text, namun juga bisa tag lain.
- Atribut
Atribut adalah informasi
tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk
warna dari text, besar huruf dari text. Setiap atribut memiliki pasangan nama dan nilai (value),
dan ditulis dengan name=”value”. Value diapit tanda kutip, boleh
tanda kutip satu (‘) atau dua (“).
D. Alat dan bahan
Alat dan bahan yang digunakan dalam
praktikum:
- LAPTOP/PC
- SO Windows
- Browser Mozilla/ Chrome
- Notepad
- File gambar berekstensi .jpg
- Lembar kerja percobaan.
- Langkah-langkah Praktikum
Percobaan 1
Langkah-langkah percobaan:
- Buka aplikasi notepad.
- Ketikkan script berikut di dalam notepad:
<html>
<head>
<title>
Jalan Ilmu </title>
</head>
<body>
ini
halaman situs anda. letakkan perintah-perintah HTML di sini
</body>
</body>
- Simpan dengan nama latihanAwal.html
- Buka file yang disimpan menggunakan browser.
- Gambar hasilnya :
Percobaan 2
- Buka aplikasi notepad.
- Ketikkan script berikut di dalam notepad:
- Simpan dengan nama latihan1.html
<html>
<head>
<title>
Latihan Pertamaku </title>
</head>
<body
bg color="#000000">
<p
align="left">
Paragraf
ini akan rata kiri<br>
Paragraf
ini akan rata kiri<br>
Paragraf
ini akan rata kiri<br>
<p>
br
digunakan untuk ganti baris <br><br>
<b>kalimat
ini akan di cetak Bold </b><br>
<i>Kalimat
ini akan di cetak italic</i><br>
<b><i>kalimat
ini akan di cetak bold dan italic</i></b>
<hr
width="1000"><br>
perintah
hr ini digunakan untuk membuat garis
</body>
</body>
- Buka file yang disimpan menggunakan browser.
- Gambar hasilnya :
Percobaan 3
- Buka aplikasi notepad.
- Ketikkan script berikut di dalam notepad:
<html>
<head>
<title>
Latihan Table </title>
</head>
<body>
<table
border="1">
<tr>
<td
align="Center">satu</td>
<td
align="Center">dua</td>
</tr>
<td
align="Center">tiga</td>
<td
align="Center">empat</td>
</table>
</body>
</html>
- Simpan dengan nama latihan3.html
- Buka file yang disimpan menggunakan browser.
- Gambar hasilnya :
Percobaan 4
- Buka aplikasi notepad.
- Ketikkan script berikut di dalam notepad:
<html>
<head>
<title>
Latihan Table </title>
</head>
<body>
<table
border="1">
<tr>
<td
colspan=" 2" align="center">satu</td>
</tr>
<tr>
<td
align="Center">dua</td>
<td
align="Center">tiga</td>
</tr>
</table>
</body>
- Simpan dengan nama latihan4.html.
- Buka file yang disimpan menggunakan browser.
- Gambar hasilnya :
Percobaan 5 (gambar)
- Buka aplikasi notepad.
- Ketikkan script berikut di dalam notepad:
<html>
</head>
<body>
<p>
<img
border="0" src="file:///E:/471.jpg" width="250"
height"240"></p>
</body></html>
- Simpan dengan nama latihan5.html .
- Buka file yang disimpan menggunakan browser.
- Gambar hasilnya :
Percobaan 6 (Form)
- Buka aplikasi notepad.
- Ketikkan script berikut di dalam notepad:
<html>
<head>
<title>
Form 1 </title>
</head>
<body>
<form>
Nama :
<input type="text" name="teks1"> <br><br>
Kelas :
<input type="text" name="teks2"
maxlength="2"> <br><br>
No :
<input type="text" name="teks3" value="12">
<br><br>
Hobby :
<input type="text" name="teks4" size="8">
<br><br>
Password :
<input type="password" name="teks5">
</form>
</body>
</html>
- Simpan dengan nama latihan6.html .
- Buka file yang disimpan menggunakan browser.
- Gambar hasilnya :
E.
Kesimpulan Dan Penutup
Kesimpulan
dari percobaan diatas adalah agar kami dapat mengetahui semua fungsi dari modul
yang kami pelajari , dan ini akan di jadikan sebagai nilai dari Mata Kuliah
Desain Web. Saya selaku penulis mohon maaf atas kesalahan yang terjadi karna
saya pun masih dalam proses belajar dan ini juga postingan awal yang saya
lakukan. Insya allah saya akan mempublikasikan hasil praktek saya selanjutnya.
Terimakasih…
Dosen
Pengampu.
Ismail
Mohidin S.Kom,MT
NIDN. 0906118401
