LAPORAN
PRAKTIKUM
PEMROGRAMAN WEB
MODUL I
Disusun Oleh :
Nama : NUGROHO ARI SAPUTRO
NIM : L200120105
Kelas : E
JURUSAN TEKNIK
INFORMATIKA
FAKULTAS
KOMUNIKASI DAN INFORMATIKA
UNIVERSITAS
MUHAMMADIYAH SURAKARTA
A. Tujuan
Mengetahui
dan memahami dasar-dasar HTML sebagai bahasa pemrograman untuk membuat halaman
web statis.
B. Landasan Teori
HTML
adalah singkatan dari HyperText Markup Language adalah salah satu memerintahkan
bahasa pemrograman web desain dan juga bisa disebut script untuk menyusun
dokumen dokumen web. Dokumken HTML disimpan dalam format teks reguler dalam
mengandung tag-tag yang web browser untuk mengeksekusi perintah-perintah yang
dispesifikasikan.
C. Alat dan bahan
1.
PC (Personal Computer)
2.
Sistem Operasi Windows XP/7/8/Linux
3.
Browser Mozila/chrome
4.
Notepad++
5.
File gambar
6.
Modul praktikum
D. Langkah Kerja
1.
Membuat tag dasar mengganti warna
background
-
Buka notepad++
-
Save dulu filenya pada save as file type
diganti dengan HyperText Markup Language
File untuk file namenya terserah mau diisi apa, disini saya buat file
namenya dokumen.html
-
Kemudian tulis script :
-
Setelah itu simpan, dan cari folder
dimana file dokumen.html disimpan, lalu double click dan lihat hasilnya.
-
Hasilnya :
2.
Membuat tag dasar heading
-
Buka notepad++
-
Save dulu filenya pada save as file type
diganti dengan HyperText Markup Language
File untuk file namenya terserah mau diisi apa, disini saya buat file
namenya heading.html
-
Kemudian tulis script :
-
Setelah itu simpan, dan cari folder
dimana file heading.html disimpan, lalu double click dan lihat hasilnya.
-
Hasilnya :
3.
Membuat tag dasar font
-
Buka notepad++
-
Save dulu filenya pada save as file type
diganti dengan HyperText Markup Language
File untuk file namenya terserah mau diisi apa, disini saya buat file
namenya font.html
-
Kemudian tulis script :
-
Setelah itu simpan, dan cari folder
dimana file font.html disimpan, lalu double click dan lihat hasilnya.
-
Hasilnya :
4.
Membuat tag dasar paragraf dan align
-
Buka notepad++
-
Save dulu filenya pada save as file type
diganti dengan HyperText Markup Language
File untuk file namenya terserah mau diisi apa, disini saya buat file
namenya align.html
-
Kemudian tulis script :
-
Setelah itu simpan, dan cari folder
dimana file align.html disimpan, lalu double click dan lihat hasilnya.
-
Hasilnya :
5.
Membuat tag dasar insert gambar
-
Buka notepad++
-
Save dulu filenya pada save as file type
diganti dengan HyperText Markup Language
File untuk file namenya terserah mau diisi apa, disini saya buat file
namenya gambar.html
-
Kemudian tulis script :
-
Setelah itu simpan, dan cari folder
dimana file gambar.html disimpan, lalu double click dan lihat hasilnya.
-
Hasilnya :
6.
Membuat tag dasar urutan daftar
menggunakan bullets and numbering
-
Buka notepad++
-
Save dulu filenya pada save as file type
diganti dengan HyperText Markup Language
File untuk file namenya terserah mau diisi apa, disini saya buat file
namenya daftar.html
-
Kemudian tulis script :
-
Setelah itu simpan, dan cari folder
dimana file daftar.html disimpan, lalu double click dan lihat hasilnya.
-
Hasilnya :
7.
Membuat tag dasar daftar menggunakan
multilevel list
-
Buka notepad++
-
Save dulu filenya pada save as file type
diganti dengan HyperText Markup Language
File untuk file namenya terserah mau diisi apa, disini saya buat file
namenya multilevel.html
-
Kemudian tulis script :
-
Setelah itu simpan, dan cari folder
dimana file multilevel.html disimpan, lalu double click dan lihat hasilnya.
-
Hasilnya :
8.
Membuat tag dasar table
-
Buka notepad++
-
Save dulu filenya pada save as file type
diganti dengan HyperText Markup Language
File untuk file namenya terserah mau diisi apa, disini saya buat file
namenya table.html
-
Kemudian tulis script :
-
Setelah itu simpan, dan cari folder
dimana file table.html disimpan, lalu double click dan lihat hasilnya.
-
Hasilnya :
E.
Tugas
1.
Buatlah script html untuk membuat isi
dengan tag-tag dasar dengan menggunakan background dokumen dari sebuah file
gambar yang ada. Nama file yg digunakan adalah nim.html.
-
Buka notepad++
-
Save dulu filenya pada save as file type
diganti dengan HyperText Markup Language
File untuk file namenya terserah mau diisi apa, disini saya buat file
namenya l200120105.html
-
Kemudian tulis script :
-
Setelah itu simpan, dan cari folder
dimana file l200120105.html disimpan, lalu double click dan lihat hasilnya.
-
Hasilnya :
2.
Jelaskan fungsi tag atau atribut berikut
:
No
|
Tag/atribut
|
Fungsi
|
1
|
bgcolor=’blue’
|
Mengganti/mengubah
warna background menjadi biru
|
2
|
<h1>
- <h6>
|
h1 : teks
dengan ukuran Heading one
h2 : teks
dengan ukuran Heading two
h3 : teks
dengan ukuran Heading three
h4 : teks
dengan ukuran Heading four
h5 : teks
dengan ukuran Heading five
h6 : teks
dengan ukuran Heading six
|
3
|
<font>
... </font>
|
mendefinisikan
jenis/karakteristik font
|
4
|
face=’verdana’
|
Mengubah jenis
font yaitu verdana
|
5
|
size=’10’
|
Mengubah ukuran
font menjadi 10
|
6
|
color=’blue’
|
Mengubah
warna menjadi biru
|
7
|
<b>.
. .</b>
|
Membuat
Teks tebal
|
8
|
<i>.
. .</i>
|
Membuat
Teks miring
|
9
|
<u>.
. .<u>
|
Membuat
Teks garis bawah
|
10
|
<strike>
...</strike>
|
Membuat
Teks garis tengah
|
11
|
<sup>.
. .</sup>
|
Membuat
superscrpit
|
12
|
<sub>.
. .</sub>
|
Membuat
subscript
|
13
|
<p>.
. .</p>
|
Membuat
paragraf
|
14
|
align=’center’
|
Perataan
tengah
|
15
|
<img>
|
Menampilkan
gambar
|
16
|
src=’gambar.jpg’
|
Mencari lokasi
direktori gambar.jpg
|
17
|
width=’100’
|
Ukuran
lebar 100
|
18
|
height=’100’
|
Ukuran
tinggi 100
|
19
|
alt=’alt’
|
Menentukan
keterangan gambar jika gambar gagal tampil.
|
20
|
<ul>
. . . </ul>
|
Untuk
membuat daftar dengan penanda simbol
|
21
|
<ol>
. . .</ol>
|
Untuk
Penomeran
|
22
|
<li>.
. .</li>
|
Untuk
menambah daftar/isi dari tag <ul></ul>
|
23
|
type=’circle’
|
Type yang
digunakan bulatan pada bullets and numbering
|
24
|
<table>.
. .</table>
|
Membuat
tabel
|
25
|
<tr>.
. .</tr>
|
Membuat
baris dalam table
|
26
|
<td>.
. .</td>
|
Membuat
kolom dalam tabel
|
27
|
border=’2px’
|
Mengatur
ketebalan garis tepi tabel sebesar 2 pixel
|
28
|
colspan=’2’
|
Menggabungkan
2 kolom dalam 1 baris
|
29
|
rowspan=’2’
|
Mengabungkan
2 baris dalam 1 kolom
|
30
|
</BR>
|
Baris baru
|
3.
Buatlah Multilevel list dengan kombinasi
number(angka) dan huruf.
-
Buka notepad++
-
Save dulu filenya pada save as file type
diganti dengan HyperText Markup Language
File untuk file namenya terserah mau diisi apa, disini saya buat file
namenya l200120105_2.html
-
Kemudian tulis script :
-
Setelah itu simpan, dan cari folder
dimana file l200120105_2.html disimpan, lalu double click dan lihat
hasilnya.
-
Hasilnya :
Tidak ada komentar:
Posting Komentar