Anda di halaman 1dari 32

LAPORAN PRAKTIKUM I

HTML

Disusun Oleh:

Dian Monica

160533611453

S1 PTI’16 Offering A

UNIVERSITAS NEGERI MALANG


FAKULTAS TEKNIK
JURUSAN ELEKTRO
PROGRAM STUDI PENDIDIKAN TEKNIK INFORMATIKA
September 2018
A. LATIHAN
LATIHAN 1

Latihan HTML

a. Source Code :

Source Code Latihan 1

b. Hasil :

Hasil 1

c. Penjelasan :
Latihan pertama merupakan latiihan membuat suatu program dengan bahasa HTML
untuk menampilkan suatu kalimat “Selamat Belajar HTML”. Terdapat tag html sebagai
tag pembuka file html atau pembuka halaman web. Tag head digunakan untuk menaruh
css, serta tempat meletakkan tag tittle yang digunakan untuk memberi nama pada judul
halaman atau tab web. Tag body digunakan untuk menampilkan isi web seperti kalimat
yang ditampilkan pada latihan. Setiap tag akan berakhiran /tag tersebut seperti <html>
maka aka nada akhiran </html>.

LATIHAN 2

Membuat Komentar

a. Source Code :

Source Code Latihan 2

b. Hasil :

Hasil 2

c. Penjelasan :
Latihan kedua merupakan contoh program penulisan komentar pada suatu script html
dimana keluaran akan berupa kalimat “Selamat Belajar HTML”. Komentar berfungsi
sebagai pengingat agar programmer dapat dengan mudah mencari script yang
bersangkutan. Komentar tidak akan ditampilkan pada halaman web seperti pada latihan.
Kode yang dituliskan adalah <!—komentar yang diinginkan-->.

LATIHAN 3

Horizontal

a. Source Code :

Source Code Latihan 3

b. Hasil :

Hasil 3
c. Penjelasan :
Latihan ketiga digunakan untuk membuat suatu garis horizontal. Untuk membuat garis
horizontal menggunakan tag “hr”. Garis tersebut dapat disesuaikan panjang pendeknya
menggunakan fungsi width.

LATIHAN 4

Tag Center

a. Source Code :

Source Code Latihan 4


b. Hasil :

Hasil 4

c. Penjelasan :
Latihan keempat merupakan contoh sebuah program web dengan menggunakan tag
“center”. Fungsi tag ini untuk membuat konten yang akan disajikan akan tampil pada
bagian tengah atau rata tengah. Fungsi ini dapat dimasukkan pada atribut “align. Atribut
align terdapat left,right, center dan justivy, namun yang dapat dituliskan sebagai tag
adalah center. Hal ini diperkuat dengan adanya pengujian menggunakan tag right yang
tidak berfungsi. Setelah menerapkan tag center maka didapati hasil seperti pada latihan
lima.
LATIHAN 5

Tag Div

a. Source Code :

Source Code Latihan 5

b. Hasil :

Hasil 5

c. Penjelasan :
Latihan kelima digunakan untuk menampilkan beberapa teks pada satu grup dengan
menggunakan tag “div” dengan penulisan <div>. Tag ini digunakan untuk
mengelompokkan suatu perintah yang ada didalamnya baik tag lain atau suatu konten
yang akan disajikan. Tag div pada latihan ini berisi atribut align untuk membuat isi
konten dalam div menjadi rata kanan.Akhir pengelompokan akan diakhiri dengan </div>.
LATIHAN 6

FormatTeks.html

a. Source Code :

Source Code Latihan 6


b. Hasil :

Hasil 6

c. Penjelasan :
Latihan keenam digunakan untuk menampilkan berbagai format teks pada html. Tag
“small” digunakan untuk menampilkan teks ukuran lebih kecil dari ukuran normal teks.
Tag “big” digunakan untuk menampilkan teks dengan huruf lebih besar dari ukuran
normal teks. Tag “b” digunakan untuk menampilkan teks dengan format bold. Tag “i”
digunakan untuk menampilkan teks italic. Tag sub digunakan untuk menampilkan teks
dengan ukuran lebih kecil dan berada pada bagian bawah, tag ini sering digunakan untuk
penulisan teks yang berhubungan dengan kimia. Tag sup digunakan untuk menampilkan
suatu teks dengan posisi bagian atas, seperti sub hanya penempatan teks pada bagian atas.
Tag “tt” digunakan untuk menampilkan suatu teks dengan tampilan seperti ketikan mesin
ketik. Tag “u” digunakan untuk menampilkan teks dengan format underline. Tag-tag ini
dapat digunakan secara bersamaan seperti contoh teks terakhir, teks harus diapit oleh tag
dan semua tag harus memiliki penutup.
LATIHAN 7

Paragraf

a. Source Code :

Source Code Latihan 7

b. Hasil :

Hasil 7

c. Penjelasan :
Latihan ketujuh digunakan untuk menampilkan suatu teks dengan paragraf. Untuk
membuat paragraph menggunakan tag “p”. Seperti div paragraf juga dapat diisikan
atribut align seperti pada latihan memiliki atribut align center. Nampun paragraf akan
dmemberikan enter seperti pembuatan paragraf baru pada awal tag in, jadi isi dari tag ini
akan berada dibawah konten sebelumnya. Pada latihan terdapat teks “PUISIKU:”
kemudian diikuti oleh tag <p> maka teks atau konten pada tag <p> akan otomatis berada
pada bawah teks “PUISIKU:”.

LATIHAN 8

Heading

a. Source Code :

Source Code Latihan 8


b. Hasil :

Hasil 8

c. Penjelasan :
Latihan di atas digunakan untuk menampilkan teks dengan heading, heading merupakan
suatu tag yang digunakan untuk mengatur besar kecil ukuran teks dengan otomatis.
Setiap heading memiliki fungsi sendiri. <H1> merupakan heading yang menampilkan
teks paling besar, heading ini dugunakan untuk nama blog pada halaman home. <H2>
merupakan heading yang lebih kecil dari H1, digunakan untuk judul suatu postingan atau
artikel. <H3> digunakan sebagai sub judul. <H4> digunakan sebagai judul pada widget.
<H5> digunakan untuk nama pemberi komentar atau komentator. <H5> digunakan untuk
footer seperti hak cipta, tahun dan sebagainya. Tingkatan heading yang terbesar adalah
H1 hingga H6 yang terkecil.
LATIHAN 9

TagPre.html

a. Source Code :

Source Code Latihan 9

b. Hasil :

Hasil 9
c. Penjelasan :
Latihan di atas digunakan untuk menampilkan suatu struktur teks dengan tag “pre”. Tag
<pre> digunakan untuk menampilkan blok teks preformat. Teks yang dituliskan di dalam
pre akan sesuai dengan keluaran, sehingga meski tidak menggunakan <br> teks namun
menggunakan enter pada file html nya, maka tampilan akan serupa. Seperti pada latihan
keluarann dan source memiliki tampilan yang sama.

LATIHAN 10

Membuat List

a. Source Code :

Source Code Latihan 10


b. Hasil :

Hasil 10

c. Penjelasan :
Latihan kesepuluh digunakan untuk menampilkan suatu konten berupa teks list.
Menggunakan tag <ol> yang akan menampilkan list berupa angka, angka akan sesuai
dengan banyaknya tag <li>. Tag <ul> digunakan untuk menampilkan list berupa symbol
titik yang akan dihitung banyaknya list dari tag <li>. Tag <dl> digunakan untuk membuat
list tanpa symbol namun dengan nama judul list tersebut, kemudian terdapat definisi
dengan bentuk teks yang lebih menjorok kea rah kanan, banyaknya list ini ditentukan dari
tag <dt> untuk penjelasan dari tag <dt> akan dimasukkan di tag <dd>, seperti yang dapat
dilihat pada latihan di atas isi tag <dd> akan lebih menjorok ke kanan, tag ini digunakan
sebagai keterangan dari isi tag <dt>.
LATIHAN 11

Pewarnaan

a. Source Code :

Source Code Latihan 11

b. Hasil :

Hasil 11

c. Penjelasan :
Latihan di atas digunakan untuk memberikan warna pada background dan teks. Untuk
membuat suatu background dengan warna selain putih maka dapat memasukkan atribut
bgcolor=”nama warna” pada tag body. Untuk teks menggunakan tag <font> sebagai
wadah atribut color, yang akan ditutup dengan </font>. Untuk menampilkan warna tidak
hanya dengan penyebutan nama, namun dapat juga dengan menggunakan kode warna.

LATIHAN 12

Jenis Font

a. Source Code :

Source Code Latihan 12


b. Hasil :

Hasil 12

c. Penjelasan :
Latihan format font di atas digunakan untuk menampilkan teks dengan berbagai macam
font. Menggunakan tag font dengan atribut face=”nama font” ditutup dengan tag </font>.
Font yang dapat digunakan merupakan font yang ada pada programmer. Dapat pula
dengan menggunakan font download yang sudah terinstall.
LATIHAN 13

Ukuran dan Warna Font

a. Source Code :

Source Code Latihan 13

b. Hasil :

Hasil 13
c. Penjelasan :
Latihan format font di atas digunakan untuk menampilkan teks dengan format font lebih
dari 1. Menggunakan tag <font> untuk mengatur teks yang ingin diatur formatnya.
Atribut yang digunakan color dan size, color digunakan untuk mengubah warna
sedangkan size digunakan untuk mengatur ukuran teks.

LATIHAN 14

Hyperlink ke Halaman Web

a. Source Code :

Source Code Latihan 14.1

Source Code Latihan 14.2


Source Code Latihan 14.3

b. Hasil :

Hasil 14.1

Hasil 14.2
Hasil 14.3

c. Penjelasan :
Latihan di atas digunakan untuk membuka file html lain pada halaman yang sama. Harus
ada halaman web atau lebih dari satu file html. Terdpat halaman X dan Y yang akan
dibuka pada saat halaman utama dijalankan. Pada halaman utama terdapat teks
“Halaman X” dan “Halaman Y” yang dapat diklik maka otomatis akan menampilkan
halaman X atau Y sesuai yang dipilih. Menggunakan tag <a> untuk menampung atribut
href=”nama file”, href digunakan untuk memanggil file, dengan teks yang diapit tag <a>
maka teks tersebut yang akan memanggil file.html dengan mengekliknya.
LATIHAN 15

Link ke Situs Web Lain

a. Source Code :

Source Code Latihan 15

b. Hasil :

Hasil 15.1
Hasil 15.2

Hasil 15.3
Hasil 15.4

Hasil 15.5
c. Penjelasan :
Latihan di atas digunakan untuk menampilkan halaman web lain pada tab yang sama.
Menggunakan tag <a> dengan atribut href=”link situs”. Dengan memasukkan link web
yang ingin ditampilkan, maka dengan keadaan laptop atau computer terhubung internet,
maka web tersebut dapat dibuka secara otomatis pada tab yang sama.

LATIHAN 16

Membuka Jendela Baru

a. Source Code :

Source Code Latihan 16


b. Hasil :

Hasil 16.1

Hasil 16.2

c. Penjelasan :
Latihan di atas digunakan untuk melakukan link pada web lain pada tab baru.
Menggunakan tag <a> dengan atribut href untuk memanggil halaman web dropbox, yang
dilanjutkan dengan atribut target=”_blank” yang digunakan untuk menampilkan tab baru
untuk halaman web yang dipanggil.

LATIHAN 17

Mengatur Ukuran Gambar

a. Source Code

Source Code Latihan 17


b. Hasil :

Hasil 17

c. Penjelasan :
Latihan di atas digunakan untuk menampilkan gambar dan mengatur tampilan gambar.
Mengguunakan tag <img> dengan atribut scr=”nama file.jpg” yang digunakan utuk
memanggil gambar sesuai dengan nama yang dicantumkan. Atribut width digunakan
untuk memberikan ukuran lebar gambar.Atribut border digunakan untuk memberikan
bingkai pada gambar dengan ukuan yang diinginkan. Atribut align digunakan untuk
mengatur posisi gambar.
B. TUGAS PRAKTIKUM
TUGAS PRAKTIKUM 1
a. Source Code :

Source Code Tugas Praktikum 1


b. Hasil :

Hasil Tugas Praktikum

c. Penjelasan :
Tugas praktikum di atas digunakan untuk menampilkansuatu halaman web dengan nama
tab Puspa Ayu. Untuk background menggunakan gamabr Asian games seuai dengan tema
halaman web tersebut Judul artikel menggunakan heading 1 dengan rata tengah,
menggunakan font broadway, agar teks judul dapat dengan jelas terbaca ditambahkan div
untuk menampung atribut color dengan bahasa css. Menggunakan garis horizontal
berwarna biru dengan tag <hr>. Paragraf baru untuk isi artikel menggunakan format
paragraph rata kanan kiri, dengan font arial. Untuk teks paragraph kedua menggunakan
rata tengah dengan warna font biru dan font Tahoma. Terdapat link untuk membaca
berita selengkapnya pada halaman web indopos. Terdapat garis horizontal berwarna
merah sebagai penutup artikel. Pada isi artikel ini juga diapit oleh tag div untuk
memberikan background warna agar teks dapat mudah dibaca. Terdapat foto Puspa Ayu
dengan lebar 300 dengan border 1 yang ditempatkan pada bagian kanan, foto ini terdapat
pada bagian bawah garis horizontal biru yang telah diatur dengan lebar 300 dengan posisi
di kanan.