Laporan 1

LAPORAN PRAKTIKUM KE-1
HTML
Disusun Oleh:
RIZALINA NUR AFIFAH
160533611512
PTI Offering C
UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK
JURUSAN ELEKTRO
PROGRAM STUDI PENDIDIKAN TEKNIK INFORMATIKA
SEPTEMBER 2018
 LATIHAN
Nama File : Latihan.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title> Latihan Pertama </title>
</head>
<body>
selamat Belajar HTML
</body>
</html>
Output :
Analisis
Pada latihan di atas merupakan suatu program HTML yang akan digunakan untuk menampilkan
suatu teks pada sebuah halaman website. Pada program di atas menggunakan deklarasi <!DOCTYPE
HTML> yang digunakan untuk mendeklarasikan suatu tag html yang mana deklarasi tersebut bukan
merupakan case sensitive yang artinya tidak membedakan penggunaan huruf besar dan huruf kecil
pada penulisan suatu program. Kemudian untuk menampilkan kepala dari suatu website yang
akan ditampilkan pada tab menu di sebuah website dapat menggunakan perintah <head>. Dan
untuk menampilkan judul dari tab menu website tersebut menggunakan perintah <title>.
Kemudian perintah <body> merupakan suatu perintah yang digunakan untuk menampilkan suatu
isi data/tulisan HTML yang akan ditampilkan pada bagian halaman website/body website.
Nama File : Komentar.htm
Script Program :
<!doctype html>
<html>
<head>
<title>Latihan Komentar</title>
</head>
<body>

Selamat Belajar HTML
</body>
</html>
Output :
Analisis
suatu teks pada sebuah halaman website yang didalam programnya disertai dengan sebuah
komentar. Pada program di atas menggunakan deklarasi <!DOCTYPE HTML> yang digunakan
untuk mendeklarasikan suatu tag html yang mana deklarasi tersebut bukan merupakan case
sensitive yang artinya tidak membedakan penggunaan huruf besar dan huruf kecil pada penulisan
suatu program. Kemudian untuk menampilkan kepala dari suatu website yang akan ditampilkan
pada tab menu di sebuah website dapat menggunakan perintah <head>. Dan untuk menampilkan
judul dari tab menu website tersebut menggunakan perintah <title>. Kemudian perintah <body>
merupakan suatu perintah yang digunakan untuk menampilkan suatu isi data/tulisan HTML yang
akan ditampilkan pada bagian halaman website/body website. Pada latihan ini hampir sama dengan
latihan sebelumnya yaitu suatu program dengan nama file latihan.htm, tetaopi pada latihan ini
memiliki perbedaan yaitu adanya perintah komentar yang diinutkan pada suatu program. Tetapi
perintah komentar ini tidak akan ditampilkan pada sebuah website dan akan dapat dilihat pada
sebuah kode program.
Nama File : Horizontal.htm
Script Program :
<html>
<head>
<title> Tag HR</title>
</head>
<body>
<h1>Halaman Berita</h1>
<hr />
Hadil Final bulutangkis Asian Games 2018 menegangkan,
Partai Ali Indonesian Final terjadi pada laga puncak
nomor ganda Putra Asean Games 2018 yang sekaligus
pertandingan penutup cabang olahraga bulu tangkis pada
pesta tersebut.
<hr />
</body>
</html>
Output :
Analisis
suatu teks pada sebuah halaman website yang didalam programnya disertai dengan sebuah heading
dan garis horizontal yang membatasi antara heading dengan isi berita. Perintah <head> digunakan
untuk menampilkan kepala dari suatu dokumen HTML. Kemudian untuk memberikan judul pada
kepala dokumen atau tab menu website dapat menggunakan perintah <title>. Kemudian pada
bagian <body> isi dokumen terdapat suatu perintah yang digunakan untuk membuat suatu teks
dengan menggunakan perintah < h1> dimana pendeklarasian tersebut digunakan untuk membuat
suatu heading dengan ukuran – ukuran tertentu. Untuk ukuran heading (sub judul sebuah web)
yang semakin kecil maka akan menambilkan suatu teks dengan ukuran yang besar, begitupun
sebaliknya. Kemudian dibawah heading terdapat suatu perintah yang digunakan untuk membuat
baris yaitu menggunakan perintah <hr> yag digunakan untuk membuat suatu baris horizontal.
Yang mana pada program di atas terdapat dua baris horizontal yang mengapit suatu teks.
Nama File : Center.htm
Script Program :
<html>
<head>
<title> Tag Center</title>
</head>
<body>
<center>
<h2>Berbagai Jenis Keladi:<h2>
Red Flash <br />
Red Fire <br />
Fannie Munson <br />
Pink Beauty <br />
Jackie Suthers <br />
</center>
*****
</body>
</html>
Output :
Analisis :
Program di atas merupakan suatu perinta yang digunakan untuk membuat suatu isi halaman
website dengan teks rata tengah. Dimana dalam pembuatan website tersebut terdapat
pendeklarasian perintah <head> yang digunakan untuk menampilkan kepala dari suatu dokumen
HTML. Kemudian untuk memberikan judul pada kepala dokumen atau tab menu website dapat
menggunakan perintah <title>. Kemudian pada bagian <body> isi dokumen terdapat suatu
perintah yang digunakan untuk menampilkan dengan rata tengah. Dimana sintaks yang digunakan
untuk mendeklarasikan suatu teks dengan rata tengah adalah perintah <center> yang ditutup
dengan perintah </center>. Dan dalam setiap teks yang diinputkan menggunakan perintah <
/br> yang digunakan untuk ganti baris antara tejs satu dengan yang lainnya. Kemudian untuk
teks yang berada bawah perintah </center> atau yang tidak diapit oleh perintah <center> dan
</center> maka akan tampil normal yaitu berada di sebelah kiri.
Nama File : TagDiv.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag DIV</title>
</head>
<body>
<div align="RIGHT">
<h1><u>PRIMASOFT KREASINDO</u></h1>
<h2>jl. kalasan km 14</h2>
<h2>yogyakarta</h2>
</div>
<hr/>
</body>
</html>
Output :
Analisis
Program diatas merupakan suatu perintah yang digunakan untuk mengelompokkan sejumlah baris
teks yang memiliki karakteristik sama. Dimana dalam pembuatan website tersebut terdapat
perintah yang digunakan mengelompokkan suatu teks agar berada di sebelah kanan atau rata kanan
dengan menggunakan perintah <div align="RIGHT">. Kemudian pada sintak selanjutnya
terdapat suatu perintah dengan menggunakan <h1> yang digunakan untuk menampilkan suatu
judul dari isi dokumen. Dimana jika ukuran heading yang ditulis pada kode program semakin kecil
maka teks yang akan ditampilkan akan semakin besar begitupun sebaliknya. Kemudian pada judul
isi dokumen juga terdapat suatu perintah <u> yang digunakan untuk membuat teks bergaris
bawah. Dan pada baris program selanjutnya terdapat suatu perintah yang digunakan untuk
membuat sub judul dari sebuah halaman web. Artinya ukuran teks yang muncul akan lebih kecil
dari pada menggunakan perintah <h1>
Nama File : FormatTeks.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Memformatkan Teks Secara Fisik</title>
</head>
<body>
<small>Teks dengan tag small</small><br />
Teks dengan ukuran normal<br />
<big>Teks dengan tag Bis</big>
<hr />
Teks normal<br />
<b>Teks dengan tag B</b><br />
<i>Teks dengan tag I</i><br />
Normal<sub>Teks dengan tag sub</sub><br />
Normal<sup>Teks dengan tag sub</sub><br />
<tt>Seperti ketikan mesin ketik</tt><br />
<u>Teks diberi garis bawah</u><br />
<u><b><i>Teks tebal, miring, dan diberi garis bawah</i></b></u>
</body>
</html>
Output :
Analisis
suatu teks pada sebuah halaman website. Pada program di atas menggunakan deklarasi <!DOCTYPE
pada penulisan suatu program. Dimana dalam pembuatan website tersebut terdapat pendeklarasian
perintah <head> yang digunakan untuk menampilkan kepala dari suatu dokumen HTML.
Kemudian untuk memberikan judul pada kepala dokumen atau tab menu website dapat
perintah yang digunakan untuk mengatur teks secara fisik. Dimana terdapat perintah yang
digunakajn untuk menampilkan suatu teks dengan ukuran lebih kecil dari ukuran normal yaitu
dengan menggunakan perintah <small>Teks dengan tag small</small>. Kemudian terdapat
perintah untuk melakukan proses ganti baris dengan menggunakan perintah <br />. Untuk
menampilkan suatu teks dengan ukuran lebih besar dari ukuran normalnya dapat menggunakan
perintah <big>Teks dengan tag Bis</big>. Setelah itu juga terdapat suatu perintah yang
digunakakan untuk menggunakan garis horizontal yaitu menggunakan perintah <hr />.
Kemudian umtuk membuat suatu teks dengan keadaan ditebalkan dapat menggunakan perintah
<b>Teks dengan tag B</b>. Selanjutnya untuk membuat suatu teks dengan keadaan
italic/miring maka dapat menggunakan perintah <i>Teks dengan tag I</i>. Kemudian juga
terdapat suatu proses yang digunakan untuk menampilkan teks sebagai subskrip dengan
menggunakan perintah <sub>Teks dengan tag sub</sub>. Selain menampilkan teks dengan
keadaan subskrip juga terdapat suatu perintah yang digunakan umtuk menampilkan teks yang
ditampilkan sebagai superskrip yaitu menggunakan perintah <sup>Teks dengan tag
sub</sub>. Dalam program ini juga terdapat suatu printah yang digunakan untuk membuat
tampilan teks dalam bentuk seperti mesin ketik dspat menggunakan perintah <tt>Seperti
ketikan mesin ketik</tt>. Dan untuk menampilkan suatu teks dengan tampilan teks
diberikan garis bawah dapat menggunakan suatu perintah <u>Teks diberi garis bawah</u>.
kemudian untuk menampilkan suatu teks dengan teks bergaris bawah, cetak tebal, dan miring maka
dapat menggunakan mengkombinasikan ketiga perintah yaitu <u><b><i>Teks tebal, miring,
dan diberi garis bawah</i></b></u>
Nama File : Paragraf.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Contoh tag p dengan ALIGN</title>
</head>
<body>
PUISIKU
<p align="center">
Mataharipun mulai terbangun dari mimpi<br/>
menyeburatkan sinarnya yang hangat<br/>
burung-burung berkicau riang<br/>
mengucapkan selamat pagi<br/>
</p>
yogyakarta, 2002
</body>
</html>
Output :
Analisis
suatu teks berparagraf pada sebuah halaman website. Pada program di atas menggunakan deklarasi
<!DOCTYPE HTML> yang digunakan untuk mendeklarasikan suatu tag html yang mana deklarasi
tersebut bukan merupakan case sensitive yang artinya tidak membedakan penggunaan huruf besar
dan huruf kecil pada penulisan suatu program. Dimana dalam pembuatan website tersebut terdapat
perintah yang digunakan untuk membuat paragraph dimana dalam pembuatan paragraph dapat
menggunakan tag <p>. di dalam tag <p> unu juga memilih align / rata tek yang akan digunakan
dalam membuat seuatu paragraph. Nilai yang diberikan pada align aa 4 yaitu left (rata kiri), center
(rata tengah), right (rata kanan, justify (rata kanan kiri)
Nama File : Heading.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Heading</title>
</head>
<body>
<h1>Ini tag H1</h1>
<h2>Ini tag H2</h2>
<h3>Ini tag H3</h3>
<h4>Ini tag H4</h4>
<h5>Ini tag H5</h5>
<h6>Ini tag H6</h6>
</body>
</html>
Output :
Analisis
suatu teks berparagraf pada sebuah halaman website. Pada program di atas menggunakan deklarasi
perintah yang digunakan untuk membuat tag judul (heading) dengan menggunakan tag <h1> ….
</h1> hingga <h6> … </h6>. Artinya sekalin kecil ukuran heading yang terdapat pada program
maka hasil yang akan ditampilkan pada halam web maka akan semakin besar, begitupun
sebaliknya.
Nama File : TagPre.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Performated Text</title>
</head>
<body>
<pre>
No | Nama | Alamat
-------------------------------------------------------
1 | PT. Bintang | JL. Terusan surabaya
2 | PT Sinar jaya | JL. Tidar
3 | PT Mitra | JL. Galunggung
4 | PT harapan | JL. Jombang
5 | PT barokah | JL. BOndowoso
</pre>
</body>
</html>
Output :
Analisis
suatu teks dengan font Courier dan tetap mempertahanan spasi atau baris baru pada sebuah
halaman website. Pada program di atas menggunakan deklarasi <!DOCTYPE HTML> yang
digunakan untuk mendeklarasikan suatu tag html yang mana deklarasi tersebut bukan merupakan
case sensitive yang artinya tidak membedakan penggunaan huruf besar dan huruf kecil pada
penulisan suatu program. Dimana dalam pembuatan website tersebut terdapat pendeklarasian
perintah yang digunakan untuk menampilkan suatu teks dengan font Courier dan tetap
mempertahanan spasi atau baris baru dengan menggunakan tag <pre> …. </pre>.
Nama File : List.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>menggunakan list</title>
</head>
<body>
ordered list
<ol>
<li>Satu</li>
<li>dua</li>
</ol>
<hr />
unordered list
<ul>
<li>satu</li>
<li>dua</li>
</ul>
<hr />
definition list
<dl>
<dt>satu</dt>
<dd>satu satu</dd>
<dt>dua</dt>
<dd>dua dua</dd>
</dl>
</body>
</html>
Output :
Analisis
suatu list teks pada sebuah halaman website. Pada program di atas menggunakan deklarasi
perintah yang digunakan untuk menampilkan suatu list teks. Adapun perintah yang digunakan pada
bagian body ini adalh <ol> … </ol> yang digunakan untuk menampilkan suatu list dengan kondisi
urut. Kemudian juga terdapat suatu perintah yang digunakan untuk menampilkan suatu list dengan
keadaan yang tidak berurutan yaitu menggunakan perintah <ul> … </ul>. Dan untuk menampilkan
suatu list dengan menggunakan definisi dapat menggunakan perintah <dl> … </dl>
Nama File : Pewarnaan.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>pewarnaan</title>
</head>
<body bgcolor="aqua">
<h3 align ="center"> Heading 3 </h3>
<font color ="red"> Font berwarna Merah</font><br />
<font color ="#FF0000"> Font berwarna merah (menggunakan nilai
heksa)</font>
</body>
</html>
Output :
Analisis
Pada latihan di atas merupakan suatu program HTML yang akan digunakan untuk memberikan
warna pada background sebuah halaman website. Pada program di atas menggunakan deklarasi
perintah yang digunakan untuk mengganti warna background yaitu dengan menggunakan perintah
<body bgcolor="aqua">. Selanjutnya terdapat suatu perintah yang digunakan untuk
menampilkan suatu tag judul/heading dengan keadaan rata tengah yaitu menggunakan perintah
<h3 align ="center"> Heading 3 </h3>. Kemudian juga terdapat suatu perintah yang
digunakan untuk menampilkan suatu teks dengan dengan diberikan warna. Untuk melakukan hal
tersebut maka terdapat 2 cara yang dapat dilakukan yatu dengan menginputkan suatu perintah
<font color ="red"> Font berwarna Merah</font> yang artinya pemberian atribut dalam
proses pemberian warna pada teks ini menggunakan nama warna. Selain itu juga terdapat suatu
perintah yang digunakan untuk memberikan warna pada teks tetapi pendeklarasian atributnya
menggunakan heksdesimal (misalnya #FF0000)
Nama File : JenisFont.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title> Format Font</title>
</head>
<body>
<h1> Prngaturan Font</h1>
Normal b: 1234abcd <br />
<hr align ="left" width ="200" />
<font face ="broadway"> Broadway : 1234abcd</font><br />
<font face ="tahoma"> Tahoma : 1234abcd</font><br />
<font face ="arial"> Arial : 1234abcd</font><br />
<font face ="century"> Century : 1234abcd</font><br />
</body>
</html>
Output :
Analisis
Pada latihan di atas merupakan suatu program HTML yang akan digunakan untuk mengatur jenis
font yang akan ditampilkan pada sebuah halaman website. Pada program di atas menggunakan
deklarasi <!DOCTYPE HTML> yang digunakan untuk mendeklarasikan suatu tag html yang mana
deklarasi tersebut bukan merupakan case sensitive yang artinya tidak membedakan penggunaan
huruf besar dan huruf kecil pada penulisan suatu program. Dimana dalam pembuatan website
tersebut terdapat pendeklarasian perintah <head> yang digunakan untuk menampilkan kepala dari
suatu dokumen HTML. Kemudian untuk memberikan judul pada kepala dokumen atau tab menu
website dapat menggunakan perintah <title>. Kemudian pada bagian <body> isi dokumen terdapat
suatu perintah yang digunakan untuk menampilkan suatu teks dengan jenis font tertentu. Adapun
perintah yang digunakan untuk mengatur jenis font adalah dengan menggunakan tag <font
face=”arial”> … </font> dimana atibut yang diinputkan pada font face tersbut adalah jenis fornt
yang diinginkan. Maka jenis fornt yang tampil akan berubah sesuai dengan keinginan (proses input
atributnya).
Nama File : FormatFont.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title> Format Font</title>
</head>
<body>
<font color ="red" size ="6"> INDOENSIA</font><br />
<font color ="green" size ="4"> SAUDI ARABIA</font><br />
<font color ="blue" size ="2"> JEPANG</font><br />
</body>
</html>
Output :
Analisis
Pada latihan di atas merupakan suatu program HTML yang akan digunakan untuk mengatur warna
dan ukuran teks sebuah halaman website. Pada program di atas menggunakan deklarasi <!DOCTYPE
perintah yang digunakan untuk mengatur warna dan ukuran teks yang mana untuk mengatur hal
tersebut dapat menggunaka perintah yang hampir sama dengan mengatur jenis fornt yaitu
menggunakan tag <font> … </font> tetapi jika mengatur warna dari teks tersebut dapat
menggunakan perintah “color” dimana dalam mengisis atribut color ini terdapat 2 perintah yang
dapat diinputkan yaitu menggunakan nama warna atau kode heksadesimal. Kemudian untuk
mengubah ukuran dari teks tersebut maka dapat menginputkan perintah “size” pada tag <font>
kemudian mengatur ukuran huruf yang diinginkan.
Nama File : halx.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Halaman X</title>
</head>
<body>
<h1> Ini adalah Halaman X </h1>
</body>
</html>
Output :
Analisis
Pada latihan di atas merupakan suatu program HTML yang akan digunakan membuat suatu berkas
HTML yang nantinya akan dihubungkan / di link kan dengan halaman lain. Pada program di atas
menggunakan deklarasi <!DOCTYPE HTML> yang digunakan untuk mendeklarasikan suatu tag
html yang mana deklarasi tersebut bukan merupakan case sensitive yang artinya tidak
membedakan penggunaan huruf besar dan huruf kecil pada penulisan suatu program. Dimana
dalam pembuatan website tersebut terdapat pendeklarasian perintah <head> yang digunakan untuk
menampilkan kepala dari suatu dokumen HTML. Kemudian untuk memberikan judul pada kepala
dokumen atau tab menu website dapat menggunakan perintah <title>. Kemudian pada bagian
<body> isi dokumen terdapat suatu perintah yang digunakan untuk membuat suatu tag heading
yaitu dengan menggunakan perintah <h1> … </h1>. Nama file penyimpanan dari berkas html ini
(halx.htm) yang nantinya digunakan untuk menghubungkan dengan halaman utama dari sebuah
web.
Nama File : haly.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>halaman y</title>
</head>
<body>
<h1>ini adalah halaman y</h1>
</body>
</html>
Output :
Analisis
HTML yang nantinya akan dihubungkan / di link kan dengan halaman lain. Pada program di atas
menggunakan deklarasi <!DOCTYPE HTML> yang digunakan untuk mendeklarasikan suatu tag
html yang mana deklarasi tersebut bukan merupakan case sensitive yang artinya tidak
<body> isi dokumen terdapat suatu perintah yang digunakan untuk membuat suatu tag heading
yaitu dengan menggunakan perintah <h1> … </h1>. Nama file penyimpanan dari berkas html ini
(haly.htm) yang nantinya digunakan untuk menghubungkan dengan halaman utama dari sebuah
web.
Nama File : halutama.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>halaman utama</title>
</head>
<body>
<h1>halaman utama</h1>
silahkan klik pada link-link berikut: <br />
<a href="halx.htm">halaman x</a><br />
<a href="halx.htm">halaman y</a><br />
</body>
</html>
Output :
Analisis
yang digunakan untuk menghubungkanpada kedua berkas html yang telah dibuat sebelumnya yaitu
berkas halx.htm dan haly.htm. Pada program di atas menggunakan deklarasi <!DOCTYPE HTML>
yang digunakan untuk mendeklarasikan suatu tag html yang mana deklarasi tersebut bukan
perintah yang digunakan untuk menghubungkan /membuat suatu link pada kedua berkas yang
telah dibuat sebelumnya, dimana perintah yang digunakan adalah perintah <a href =”URL”> Label
</a>. tag tersebut yang digunakan untuk menghubungkan pada berkas html yang lain. Dimana
URL tersebut diisi dengan nam berkas html yang telah dibuat. Sedangkan label meupakan suatu
judul yang telah dibuat di bagian <head> pada kedua berkas html tersebut.
Nama File : linksosmed.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>halaman sosmed</title>
</head>
<body align="center">
<h1>akun sosial media</h1>
<a href="http://facebook.com/">facebook</a><br />
<a href="http://twiter.com/">twiter</a><br />
<a href="http://instagram.com/">instagram</a><br />
<a href="http://telegram.com/">telegram</a><br />
</body>
</html>
Output :
Analisis
Pada latihan di atas merupakan suatu program HTMLyang digunakan untuk menghubungkan suatu
halaman web pada suatu situs lain. Pada program di atas menggunakan deklarasi <!DOCTYPE
HTML> yang digunakan untuk mendeklarasikan suatu tag html yang mana deklarasi tersebut
bukan merupakan case sensitive yang artinya tidak membedakan penggunaan huruf besar dan
huruf kecil pada penulisan suatu program. Dimana dalam pembuatan website tersebut terdapat
perintah yang digunakan untuk perintah untuk membuat teks dengan menggunakan rata tengah
yaitu dengan perintah <body align=”center”>. Kemudian untuk menghubungkan suatu berkas
HTML kepada situs web maka perintahnya hampir sama dengan menghubungkan suatu berkas
HML ke halaman lain, namun disini URL yang digunakan adalah URL dari masing-masing situs
web tersebut.
Nama File : linkDownload.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Halaman Download</title>
</head>
<body>
<h1> Halaman Download</h1>
Untuk memperoleh file tersebut Anda bisa download dengan cara
klik <a href="https://www.dropbox.com"
target="_blank">disini</a>
</body>
</html>
Output :
Analisis
Pada latihan di atas merupakan suatu program HTML yang akan digunakan untuk membuka
jendela baru yang akan ditampilkan. Pada program di atas menggunakan deklarasi <!DOCTYPE
HTML> yang digunakan untuk mendeklarasikan suatu tag html yang mana deklarasi tersebut
bukan merupakan case sensitive yang artinya tidak membedakan penggunaan huruf besar dan
huruf kecil pada penulisan suatu program. Dimana dalam pembuatan website tersebut terdapat
perintah yang digunakan untuk membuka jendela baru yang akan ditampilkan. Dimana untuk
menjalankan perintah tersebut maka dapat menggunakan kode <a
href="https://www.dropbox.com" target="_blank">disini</a> yang artinya suatu berkas

HTML yang telah dibuat tersebut akan dihubungkan dengan situs web drop box dengan cara
memilih kata disini yang telah di link kan dan akan meunuju pada tab baru dan membuka sebuah
situs web drobox.
Nama File : Gambar.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Bekerja dengan Gambar</title>
</head>
<body>
<p>
<img src="kucing.jpg" width="200" border="5" /> Ini adalah kucing.
Ini adalah kucing. Ini adalah kucing. Ini adalah kucing.
<hr />
</p>
<img src="kucing.jpg" align="right" width="200" /> Ini adalah kucing.
</body>
</html>
Output :
Analisis
Pada latihan di atas merupakan suatu program HTML yang akan digunakan untuk menambahkan
dan mengatur ukuran gambar. Pada program di atas menggunakan deklarasi <!DOCTYPE HTML>
yang digunakan untuk mendeklarasikan suatu tag html yang mana deklarasi tersebut bukan
perintah yang digunakan untuk menambahkan dan mengatur ukuran gambar, dan memberikan
border pada gambar. Untuk melakukan proses penambhan gambar dapat menggunakan perintah
<img src="kucing.jpg" width="200" border="5" /> dimana atribut dari img src yang
diinputkan adala nama file dari foto tersebut,tetapi foto yang akan diinputkan tersebut harus berada
dalam 1 lokasi agar dapat ditampilkan. Kemudian perintah width =”200” pada tag <img src>
digunakan untuk mengatur ukuran lebar gambar, dan border =”5” pada tag <img src> yang
digunakan untuk memberikan bingkai dari sebuah gambar. Dan untuk mengatur posisi gambar di
kanan seperti yang terdapat pada gambar di atas maka dapat menggunakan perintah align
=”right” pada tag <img src> agar posisi gambar dapat berada di sebelah kanan.
 TUGAS PRAKTIKUM
Nama File : tugas1.htm
Script Program :
<!DOCTYPE HTML>
<html>
<head>
<title>Tugas Praktikum 1a</title>

</head>
<body>
<body background="background.jpg">
<center>
<h1>HARI JADI KOTA TRENGGALEK KE 824</h1>
</center>
<hr color="red" size="5">
<font face ="arial" size="5"> Prosesi kirab dan resepsi peringatan Hari
Jadi Kabupaten Trenggalek ke-824 sukses memukau masyarakat. Kegiatan yang
diselenggarakan setiap tahun itu menampilkan pernak-pernik adat Jawa.
Selain arak-arakan dari sejumlah pejabat, puluhan pasukan dan kereta
kencana Purba Wasesa Nusantara dari Surakarta turut meramaikan kirab.<br />
</font>
<p align="center"> <font color ="pink" font face ="calibri" size ="5">
Prosesi kirab dan resepsi peringatan Hari Jadi Kabupaten Trenggalek ke-824
sukses memukau masyarakat. Kegiatan yang diselenggarakan setiap tahun itu
menampilkan pernak-pernik adat Jawa. Selain arak-arakan dari sejumlah
pejabat, puluhan pasukan dan kereta kencana Purba Wasesa Nusantara dari
Surakarta turut meramaikan kirab. <br>
</font>
</p>
<hr color="yellow" size="3">
<br />
</br>
<hr color="green" size="5" align="Right" width ="500"/>
<img src="foto kanan.jpg" align="right" width="500" border="2"/>
<img src="trenggalek.jpg" align="left" width="500" border="2"/>
</body>
</html>
Output :
Analisis
Pada tugas praktikum di atas merupakan suatu program HTML yang akan digunakan untuk
membuat halaman web dengan melibatkan elemen teks, garis, warna, dan gambar dengan garis
tepi (border), dan halaman utama dengan latar belakang sesuai yang diinginkan. Pada program di
atas menggunakan deklarasi <!DOCTYPE HTML> yang digunakan untuk mendeklarasikan suatu
tag html yang mana deklarasi tersebut bukan merupakan case sensitive yang artinya tidak
<body> isi dokumen terdapat suatu perintah yang digunakan untuk membuat halaman web dengan
melibatkan elemen teks, garis, warna, dan gambar dengan garis tepi (border), dan halaman utama
dengan latar belakang sesuai yang diinginkan. Untuk menggani sebuah background dari suatu
halaman website maka dapat menggunakan tag <bodybackground="background.jpg"> yang
mana atribut yang digunakan pada background tersebut adalah nama file dari gambar tersebut, dan
gambar/foto tersebut harus berada pada satu lokasi penyimpanan berkas html. Kemudian untuk
membuat tag heading menggunakan perintah <h1>HARI JADI KOTA TRENGGALEK KE 824</h1>.
Karena tag heading tersebut berada di tengah / rata tengah maka menggunakan tag <center> …
</center> untuk meletakkan tag heading agar rata tengah. Kemudian untuk membuat suatu garis
horizontal yang diberi warna maka dapat menggunakan perintah <hr color="red" size="5">.
Dimana pendekalrasian pada <hr> tersebut terdapat color digunakan untuk memberikan warna
pada baris tersebut sedangkan pendeklarasian size digunakan untuk menentukan ukuran/tebalnya
garis horizontal tersebut. kemudian untuk membuat suatu teks yang terdapat pada paragraph
pertama dengan menggunakan perintah <font face ="arial" size="5">… </font> yang
mana face digunakan untuk mendeklarasikan suatu jenis fornt yang digunakan yang mana aribut
face yang dipilih disni adalah menggunakan atribut arial. Kemudian pendeklarasian size digunakan
untuk mengatur ukuran fornt sesuai yang diinginkan.
Kemudian untuk teks yang berada pada paragraph kedua hamoir sama dengan paragraph yang
pertama tetapi pada teks paragraph kedua ini terdapat suatu perintah yang digunakan untuk
mengatur teks agar menjadi rata tengah yaitu dengan menggunakan perintah <p
align="center"> … </p>. dan juga terdapat suatu perintah yang digunakan untuk mengatur
warna teks yaitu dengan menambahkan pendeklarasian perintah color pada tag <font> …
</font>. Kemudian untuk atribut color sendiri ada 2 yaitu dapat menggnakan nama warna atau
kode heksadesimal. Selanjutnya terdapat suatu perintah yang digunakan untuk memberikan suatu
garis dengan mengatursuatu warna dan ukuran garis horizontal yaitu dengan menggunakan
perintah <hr color="yellow" size="3">. kemudian tag </br> digunakan untuk ganti baris
baru. Kemudian untuk membuat suatu garis horizontal dengan posisi di kana sebenarnya hampir
sama dengan membuat garis horizontal sebelumnya, hanya saja pada konteks ini terdapat suatu
perntah tambahan pada tag <hr> yaitu menambahkan pendeklarasian align=”right” yang
nantinya akan meletakkan garis tersebut pada sebelah kanan. Kemudian jika ingin mengatur
panjang garis horizontal yang diinginkan maka dapat menggunakan perintah width ="500" pada
tag <hr>. Untuk melakukan proses penambhan gambar dapat menggunakan perintah <img
src="foto kanan.jpg" align="right" width="500" border="2"/> dimana atribut dari img
src yang diinputkan adalah nama file dari foto tersebut,tetapi foto yang akan diinputkan tersebut
harus berada dalam 1 lokasi agar dapat ditampilkan. Kemudian perintah width =”500” pada tag
<img src> digunakan untuk mengatur ukuran lebar gambar, dan border =”2” pada tag <img
src> yang digunakan untuk memberikan bingkai dari sebuah gambar. Dan untuk mengatur posisi
gambar di kanan seperti yang terdapat pada gambar di atas maka dapat menggunakan perintah
align =”right” pada tag <img src> agar posisi gambar dapat berada di sebelah kanan.
Sedangkan pada gambar dengan atribut “Trenggalek” berada di sebelah kiri yang mana untuk
meletakkan gambar pada sebelah kiri maka bisa menggunakan kode align =”left” ataupun tidak
menggunakan kode tersebut maka gambar akan berada pada sebelah kiri.

Laporan 1

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Laporan 1

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM KE-1

RIZALINA NUR AFIFAH

UNIVERSITAS NEGERI MALANG

href="https://www.dropbox.com" target="_blank">disini</a> yang artinya suatu berkas

<title>Tugas Praktikum 1a</title>

Anda mungkin juga menyukai