LAPORAN PRAKTIKUM
PEMOGRAMAN WEB
MODUL 1
Nama : Alfi Nur Rohmat
NIM : L200120074
Kelas : D
JURUSAN TEKNIK INFORMATIKA
FAKULTAS KOMUNIKASI DAN INFORMATIKA
UNIVERSITAS MUHAMMADIYAH SURAKARTA
2014
Percobaan 1 (Dokumen
HTML)
Langkah-langkah percobaan :
1.
Buka
aplikasi Notepad.
2.
Ketikkan
Script berikut di dalam Notepad :
<html>
<head><title>Dokumen HTML</title></head>
<body bgcolor="skyblue">
Ini adalah sebuah dokumen HTML dengan judul "Dokumen HTML" dan warna latar/background biru langit.
</body>
</html>
<html>
<head><title>Dokumen HTML</title></head>
<body bgcolor="skyblue">
Ini adalah sebuah dokumen HTML dengan judul "Dokumen HTML" dan warna latar/background biru langit.
</body>
</html>
3.
Simpan
file dengan nama dokumen.html.
4.
Buka
file yang sudah disimpan menggunakan browser.
5.
Gambar
hasilnya di lembar kerja percobaan.
Percobaan
2 (Heading)
Langkah-langkah
percobaan :
Buka
aplikasi Notepad.
Ketikkan
Script berikut di dalam Notepad :
<html>
<head><title>Heading</title></head>
<body>
<h1>ukuran heading one</h1>
<h2>ukuran heading two</h2>
<h3>ukuran heading three</h3>
<h4>ukuran heading four</h4>
<h5>ukuran heading five</h5>
<h6>ukuran heading six</h6>
</body>
</html>
<html>
<head><title>Heading</title></head>
<body>
<h1>ukuran heading one</h1>
<h2>ukuran heading two</h2>
<h3>ukuran heading three</h3>
<h4>ukuran heading four</h4>
<h5>ukuran heading five</h5>
<h6>ukuran heading six</h6>
</body>
</html>
1.
Simpan
file dengan nama heading.html.
2.
Buka
file yang sudah disimpan menggunakan browser.
3.
Gambar
hasilnya di lembar kerja percobaan.
Percobaan 3 (Font)
Langkah-langkah percobaan :
1.
Buka
aplikasi Notepad.
2.
Ketikkan
Script berikut di dalam Notepad :
<html>
<head><title>Font</title></head>
<body>
<font face='comic sans ms'>
teks ini berukuran normal jenis Comic Sans MS dan warna hitam</font></br>
<font size='5' face='verdana' color='red'>
Teks ini berukuran 5 jenis Verdanadan warna merah</font></br>
Teks cetak <b>Tebal</b>
<i>miring</i>
<u>garis tengah</u>
<sup>superscript</sup>
<sub>subscript</sub>
</font>
</body>
</html>
<html>
<head><title>Font</title></head>
<body>
<font face='comic sans ms'>
teks ini berukuran normal jenis Comic Sans MS dan warna hitam</font></br>
<font size='5' face='verdana' color='red'>
Teks ini berukuran 5 jenis Verdanadan warna merah</font></br>
Teks cetak <b>Tebal</b>
<i>miring</i>
<u>garis tengah</u>
<sup>superscript</sup>
<sub>subscript</sub>
</font>
</body>
</html>
3. Simpan file dengan
nama font.html.
4.
Buka
file yang sudah disimpan menggunakan browser.
5.
Gambar
hasilnya di lembar kerja percobaan.
Percobaan 4 (Paragraf
dan Align)
Langkah-langkah percobaan :
1.
Buka
aplikasi Notepad.
2.
Ketikkan
Script berikut di dalam Notepad :
<html>
<head><title>Paragraf dan Align</title></head>
<body>
<p align="left"> format paragraf ini rata kiri</p>
<p align="right"> format paragraf ini rata kanan</p>
<p align="center"> format paragraf ini rata tengah</p>
<p align="justify"> format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri
.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri
.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiriformat paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri
.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiriformat paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri
.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri</p>
</body>
</html>
<html>
<head><title>Paragraf dan Align</title></head>
<body>
<p align="left"> format paragraf ini rata kiri</p>
<p align="right"> format paragraf ini rata kanan</p>
<p align="center"> format paragraf ini rata tengah</p>
<p align="justify"> format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri
.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri
.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiriformat paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri
.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiriformat paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri
.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri.format paragraf ini rata kanan-kiri</p>
</body>
</html>
3.
Simpan
file dengan nama align.html.
4.
Buka
file yang sudah disimpan menggunakan browser.
5.
Gambar
hasilnya di lembar kerja percobaan.
Percobaan 5 (Gambar)
Langkah-langkah percobaan :
1.
Letakkan
sebuah file gambar ber-ekstensi .jpg di dalam folder yang sama dengan file-file
percobaan. Beri nama file gambar tersebut dengan nama gambar.jpg.
2.
Buka
aplikasi Notepad.
3.
Ketikkan
Script berikut di dalam Notepad :
<html>
<head><title>Gambar</title></head>
<body>
<p><img src='592482556.jpg' height='100' width='100'>
perataan teks dibawah secara default dan gambar asli dengan ukuran 100x100 pixel</p>
<p><img src='592482556.jpg' height='100' width='100' align='top' border='2'>perataan teks diatas dan
border gambar 2 pixel</p>
<p align='center'><img src='592482556.jpg' height='100' width='100' align='midle'>perataan teks ditengah</br> dan letak gambar ditengah dokumen</p>
</body>
</html>
<html>
<head><title>Gambar</title></head>
<body>
<p><img src='592482556.jpg' height='100' width='100'>
perataan teks dibawah secara default dan gambar asli dengan ukuran 100x100 pixel</p>
<p><img src='592482556.jpg' height='100' width='100' align='top' border='2'>perataan teks diatas dan
border gambar 2 pixel</p>
<p align='center'><img src='592482556.jpg' height='100' width='100' align='midle'>perataan teks ditengah</br> dan letak gambar ditengah dokumen</p>
</body>
</html>
4.
Simpan
file dengan nama gambar.html.
5.
Buka
file yang sudah disimpan menggunakan browser.
6.
Gambar
hasilnya di lembar kerja percobaan.
Percobaan 6 (Daftar
menggunakan Bullets dan Numbering)
Langkah-langkah percobaan :
1.
Buka
aplikasi Notepad.
2.
Ketikkan
Script berikut di dalam Notepad :
<html>
<head><title>Bukkets and Numbering</title></head>
<body>
<p>daftar menggunakan bullets</p>
<ul type='circle'>
<li>sunday</li>
<li>monday</li>
<li>tuesday</li>
</ul>
<p>daftar menggunakan numbering(angka)</p>
<ol type='1'>
<li>sunday</li>
<li>monday</li>
<li>tuesday</li>
</ol>
<p>daftar menggunakan numbering(huruf)</p>
<ol type='a'>
<li>sunday</li>
<li>monday</li>
<li>tuesday</li>
</ol>
<p>daftar menggunakan numbering(huruf romawi)</p>
<ol type='I'>
<li>sunday</li>
<li>monday</li>
<li>tuesday</li>
</ol>
</body>
</html>
<html>
<head><title>Bukkets and Numbering</title></head>
<body>
<p>daftar menggunakan bullets</p>
<ul type='circle'>
<li>sunday</li>
<li>monday</li>
<li>tuesday</li>
</ul>
<p>daftar menggunakan numbering(angka)</p>
<ol type='1'>
<li>sunday</li>
<li>monday</li>
<li>tuesday</li>
</ol>
<p>daftar menggunakan numbering(huruf)</p>
<ol type='a'>
<li>sunday</li>
<li>monday</li>
<li>tuesday</li>
</ol>
<p>daftar menggunakan numbering(huruf romawi)</p>
<ol type='I'>
<li>sunday</li>
<li>monday</li>
<li>tuesday</li>
</ol>
</body>
</html>
3.
Simpan
file dengan nama daftar.html.
4.
Buka
file yang sudah disimpan menggunakan browser.
5.
Gambar
hasilnya di lembar kerja percobaan.
Percobaan 7 (Daftar
menggunakan Multilevel list)
Langkah-langkah percobaan :
1.
Buka
aplikasi Notepad.
2.
Ketikkan
Script berikut di dalam Notepad :
<html>
<head><title>Germanic Languanges</title></head>
<body>
<ul>
<li>west germanic languanges</li>
<ul><li>english</li>
<ul><li>british</li>
<ul><li>BBC</li>
<li>cockney</li>
<li>dubliner</li>
</ul>
<li>american</li>
<ul><li>newscaster</li>
<li>drawl</li>
<li>jive</li>
</ul></ul>
<li>dutch</li>
<ul><li>hollander</li>
<li>flemish</li>
<li>afrikaans</li>
</ul>
</ul></ul>
</body>
</html>
<html>
<head><title>Germanic Languanges</title></head>
<body>
<ul>
<li>west germanic languanges</li>
<ul><li>english</li>
<ul><li>british</li>
<ul><li>BBC</li>
<li>cockney</li>
<li>dubliner</li>
</ul>
<li>american</li>
<ul><li>newscaster</li>
<li>drawl</li>
<li>jive</li>
</ul></ul>
<li>dutch</li>
<ul><li>hollander</li>
<li>flemish</li>
<li>afrikaans</li>
</ul>
</ul></ul>
</body>
</html>
3. Simpan file dengan
nama multilevel.html.
4.
Buka
file yang sudah disimpan menggunakan browser.
5.
Gambar
hasilnya di lembar kerja percobaan.
Percobaan 8 (Table)
Langkah-langkah percobaan :
1.
Buka
aplikasi Notepad.
2.
Ketikkan
Script berikut di dalam Notepad :
<html>
<head><title>Table</title></head>
<body>
tabel biasa
<table border='1'>
<tr>
<td>cell 1a</td>
<td>cell 1b</td>
<td>cell 1c</td>
</tr>
<tr>
<td>cell 2a</td>
<td>cell 2b</td>
<td>cell 2c</td>
</tr>
</table>
colspan
<table border="1">
<tr>
<td colspan="3" align="center">Quarter1</td>
</tr>
<tr align="center">
<td>jan</td>
<td>feb</td>
<td>mar</td>
</table>
rowspan
<table border="1">
<tr>
<td rowspan="3" align="center">Quarter1</td>
<td>jan</td>
</tr>
<tr>
<td>feb</td>
</tr>
<tr>
<td>mar</td>
</tr>
</tr>
</body>
</html>
<html>
<head><title>Table</title></head>
<body>
tabel biasa
<table border='1'>
<tr>
<td>cell 1a</td>
<td>cell 1b</td>
<td>cell 1c</td>
</tr>
<tr>
<td>cell 2a</td>
<td>cell 2b</td>
<td>cell 2c</td>
</tr>
</table>
colspan
<table border="1">
<tr>
<td colspan="3" align="center">Quarter1</td>
</tr>
<tr align="center">
<td>jan</td>
<td>feb</td>
<td>mar</td>
</table>
rowspan
<table border="1">
<tr>
<td rowspan="3" align="center">Quarter1</td>
<td>jan</td>
</tr>
<tr>
<td>feb</td>
</tr>
<tr>
<td>mar</td>
</tr>
</tr>
</body>
</html>
3.
Simpan
file dengan nama table.html.
4.
Buka
file yang sudah disimpan menggunakan browser.
5.
Gambar
hasilnya di lembar kerja percobaan.
TUGAS
1.
Tuliskan
script HTML untuk membuat isi seperti gambar di bawah ini dengan background
dokumen daari sebuah file gambar. Nama file gambar yang digunakan adalah NIM
anda. Kemudian print screen hasilnya dan lampirkan dalam laporan.
<html>
<head><title>Tugas1</title></head>
<body background ='Penguins.png'>
<h1>Biodaata Diri</h1>
<h3>Nama : AL</h3>
<h4>Nim : L200120074</h4>
<h4>Kota : Crocodil Forget</h4>
</body>
</html>
<html>
<head><title>Tugas1</title></head>
<body background ='Penguins.png'>
<h1>Biodaata Diri</h1>
<h3>Nama : AL</h3>
<h4>Nim : L200120074</h4>
<h4>Kota : Crocodil Forget</h4>
</body>
</html>
2.
Jelaskan
fungsi dari tag atau atribut berikut :
No
|
Tag/Atribut
|
Fungsi
|
1
|
bgcolor=’blue’
|
Warna background biru
|
2
|
<h1> - <h6>
|
Tag yang mendeskripsikan heading
|
3
|
<font> . . . </font>
|
Tag yang mendeskripsikan font
|
4
|
face=’verdana’
|
Jenis font Verdana
|
5
|
Size=’10’
|
Ukuran 10 pixel
|
6
|
Color=’blue’
|
Teks Warna biru
|
7
|
<b> . . . </b>
|
Teks Cetak tebal
|
8
|
<i> . . . </i>
|
Teks Cetak miring
|
9
|
<u> . . . </u>
|
Teks Garis bawah
|
10
|
<strike> . . . </strike>
|
Teks Garis tengah
|
11
|
<sup> . . . </sup>
|
Teks superscript
|
12
|
<sub> . . . </sub>
|
Teks subscript
|
13
|
<p> . . . </p>
|
Untuk membuat paragraf
|
14
|
Align=’center’
|
Teks rata tengah
|
15
|
<img>
|
Tag untuk Menampilkan sebuah gambar
|
16
|
Src=’gambar.jpg’
|
Menampilkan gambar.jpg
|
17
|
Width=’100
|
Lebar 100 pixel
|
18
|
Height=’100’
|
Tinggi 100 pixel
|
19
|
Alt=’alt
|
Menampilkan teks
|
20
|
<ul> . . . </ul>
|
Unordered list
|
21
|
<ol> . . . </ol>
|
Ordered list
|
22
|
<li> . . . </li>
|
Elemen list
|
23
|
Type=’circle’
|
List tipe lingkaran
|
24
|
<table> . . . </table>
|
Tag yang mendeskripsikan tabel
|
25
|
<tr> . . . </tr>
|
Membuat baris baru
|
26
|
<td> . . . </td>
|
Membuat kolom baru
|
27
|
Border=’2px’
|
Tebal 2 pixel
|
28
|
Colspan=’2’
|
Menggabungkan 2 kolom
|
29
|
Rowspan=’2’
|
Menggabungkan 2 baris
|
30
|
</br>
|
Baris baru/pindah baris
|
3.
Buat
Multilevel list dengan kombinasi number (angka) dan huruf, print screen script
dan tampilan yang anda buat dan tunjukan kepada dosen/asisten praktikum..!
<html>
<head>
<title>tugas3</title>
</head>
<body>Steak Resto
<ol type='A'>
<li>Menu makanan:
<ol type="1">
<li>Chicken crispy</li>
<li>Steak tuna</li>
</ol></li>
<li>Menu Minuman:
<ol type="1">
<li>Vanila float</li>
<li>Fanta Float</li>
</ol></ol>
</body>
<html>
<head>
<title>tugas3</title>
</head>
<body>Steak Resto
<ol type='A'>
<li>Menu makanan:
<ol type="1">
<li>Chicken crispy</li>
<li>Steak tuna</li>
</ol></li>
<li>Menu Minuman:
<ol type="1">
<li>Vanila float</li>
<li>Fanta Float</li>
</ol></ol>
</body>
Tidak ada komentar:
Posting Komentar