LAPORAN PRAKTIKUM
PEMROGRAMAN WEB 1
MODUL 1
PENGENALAN HTML
Paulus Diki
2015091079
Sistem Informasi - A
Universitas Kuningan
Fakultas Ilmu Komputer
2017
====================================================
Tugas :
====================================================
·
DASAR TEORI
HTML adalah singkatan dari HyperText Markup Language yaitu
bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman
web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam
sebuah penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link link
antara file-file dalam situs atau dalam komputer dengan menggunakan localhost,
atau link yang menghubungkan antar situs dalam dunia internet.
Dalam HTML tentunya
tidak luput dari namanya TAG HTML, Tag HTML merupakan kata kunci yang berada
diantara kurung sudut.
Tag html ini mempunyai format sebagai berikut
<nametag>.........</nametag>. Jadi disetiap awalan tag HTML harus
selalu ditutup dengan </...> ( Slash nametag ). Fungsi Tag HTML ialah untuk membuat tampilan WEB yg kita buat menjadi
lebih menarik, kebayangkan jika kita mendesign web tanpa menggunakan tag html,
pasti akan keliatan membosankan, maka dari itu salah satu fungsi dari
TAG HTML itu ialah untuk memperindah tampilan WEB yang kita buat.
Adapun jenis-jenis
dari TAG HTML diantaranya :
Tag
|
Keterangan
|
<a>
|
Mendefinisikan sebuah anchor, tetapi
lebih tepat jika diartikan sebagai tautan dikarenakan tautan ini digunakan
untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang
lain
|
<body>
|
Mendefinisikan body/isi dokumen HTML,
berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan di web
browsernya. Isi dokumen tersebut dapat berupa teks, gambar, animas, link dan
seterusnya
|
<br />
|
Memberi baris baru/pindah baris
|
<font>
|
Mendefinisikan jenis font, warna dan
ukuran untuk teks
|
<h1> to <h6>
|
Digunakan untuk menunjukkan awal dari
suatu header/judul dari dokumen HTML tersebut.
|
<head>
|
Digunakan untuk memberikan informasi
tentang dokumen tersebut
|
<html>
|
Mendefinisikan root dari suatu dokumen
HTML
|
<hr />
|
Membuat garis horisontal
|
<img />
|
Berfungsi untuk menampilkan gambar pada
dokumen HTML
|
<marquee>
|
Membuat teks berjalan secara vertikal
atau horisontal
|
<p>
|
Membuat sebuah paragraf
|
<table>
|
Membuat tabel
|
<td>
|
Mendefinisikan sel di dalam sebuah tabel
|
<th>
|
Mendefinisikan sel header di dalam
sebuah tabel
|
<title>
|
Membuat judul untuk dokumen HTML
|
·
PRAKTUKUM
Praktikum 1
<html>
<center>
<table>
<tr>
<td> 1 </td>
<td> Nama </td>
<td> : </td>
<td> Paulus </td>
</tr>
<tr>
<td> 2 </td>
<td> Kelas </td>
<td> : </td>
<td> Regular </td>
</tr>
<tr>
<td> 3 </td>
<td> NIM </td>
<td> : </td>
<td> 2015091079 </td>
</tr>
<tr>
<td> 4 </td>
<td> KELAS </td>
<td> : </td>
<td> SISTEM INFORMASI - A
</td>
</tr>
</table>
</center>
</title>
</body>
</html>
Hasil
Coding di atas adalah:
Praktikum 2
<html>
<head>
<title>
SELAMAT DATANG </title>
</head>
<body>
<h1>
WELCOME TO MY WEB DESIGN </h1>
<h2>
Just play. Have fun. Enjoy the game.</h2>
<p>
I'm a designer, but I rely on
programmers to bring my ideas to life</p>
<a
href = " latihan1"> Tag Link
<a/></br>
<img
src = "programmer.jpg" height = "300" width = "300">
</body>
</html>
Hasil
Coding di atas adalah:
Analisis:
Pada
Title bar web akan terlihat kalimat SELAMAT DATANG. perintah tersebut
dengan menggunakan tag <title>....</title>.
Berikutnya
terdapat tag <a href.......> yang mana tag tersebut merupakan tag
hyperlink, yang akan memberikan perintah membuka halaman baru jika kita
mengklik kata yang bergaris bawah.
Bisa
kita lihat pada bagian halaman atas web bertuliskan huruf dengan ukuran besar,
itu karena menggunakan TAG HTML <h1> dan dubawahnya berukuran sedang
karena menggunakan TAG HTML <h2>.
Selanjutnya
adanya paragraf baru yang menuliskan suatu berita atau cerita itu menggunakan
TAG HTML <p> yang mana tag tersebut mempunyai fungsi membuat paragraf
baru pada halaman web.
Terdapat
gambar penguin karena pada web ini menggunakan Tag <img..> yang mana tag
tersebut berfungsi menampilkan gambar yang kita akan tampilkan dengan
coding
<img src = "programmer.jpg" height =
"300" width = "300">.
Praraktikum 3
<html>
<head>
<title>
PRODI UNIVERSITAS KUNINGAN </title>
</head>
<body
bgcolor="brown">
<center>
<h1>
UNIVERSITAS KUNINGAN </h1>
<font
face ="Verdana, Arial, Helvatica, sans-serif">
<h2>
Fakultas Ilmu Komputer </h2></font>
<h3>
Sistem Informasi </h3></center>
<marquee
behaviour = "alternate"> Tahun 2014 </marquee>
<hr
size = "4" color = "blue">
<OL
type = "1">
<li>Home</li>
<li>Fakultas</li>
<UL
type = "disc">
<li
title = "Fakultas Ilmu
Komputer"><mark>FKOM</mark></li>
<li
title = "Fakultas Keguruan Dan Ilmu Pendidikan">FKIP</li>
<li
title = "Fakultas Ekonomi">FE</li>
<li
title = "Fakultas Kehutanan">FHUT</li>
<li
title = "Fakultas Ilmu Hukum">FHUM</li>
<li
title = "Pendidikan Sekolah dasar">PGSD</li>
</ul>
<li>
Fasilitas </li>
</ol>
</body>
</html>
Hasil
Coding di atas adalah:
Analisis:
Dimana bisa kita lihat pada halaman web kali ini pada bagian
halaman atas posisi huruf ada dibagia tengan-tengan, itu karena menggunakan tag
<center>. Dengan masih tetap menggunakan tag <h1> pada
bagian judul atas dan diikuti dibawahnya dengan tag <h2>.
Tulisan pada halaman web ini sedikit berbeda dengan web
sebelumnya yang kita buat, dengan menggunakan tag <font face> kita
dapat memeilih jenis huruf sesuai dengan keinginan kita yang akan tampil pada
halaman web.
Pada tahun 2014 jika kita membuatnya langsung maka teks
tersebut akan berjalan dari arah kiri ke kanan, karena kita menggunakan tag <marquee>
pada halaman web ini.
Terlihat ada garis biru lurus pada halaman web, dikarenakan
pada web ini kita menggunakan tag <hr size = "4" color =
"blue">.
Terlihat berbeda pada halaman web ini, background yang
etrlihat berwarna coklatan, itu bisa kita gunakan dengan tag <body
bgcolor="brown">
Pada bagian isi berita halaman bisa dilihat terdapat 3
point, yang mana mana berurutan sesuai abjadnya itu dikarenakan pada halaman
web ini kita menggunakan tag <OL type = "1">.
Dan pada bagian point 1 terdapat bagian-bagian point, pada
bagian tersebut kita menggunakan tag <UL type = "disc">.
disc berati memberikan keterangan dengan tanda bulat, dan jika kita biarkan
kursor poiter di tulisan tersebut, maka akan secara otomatis akan mengeluarkan keterangan
tulisan, tag tersebut bisa kita gunakan dengan cara <li title =
"Fakultas Ekonomi">FE</li>. Juga terdapat latar kuning
pada bagian point FKOM, itu terjadi karena menggunakan tag ...<mark>FKOM</mark>
Praktikum 4
<html>
<head>
<title Macam Macam Sistem Operasi>
</title>
</head><body>
<center><b> Data Repository Software
</b><br></center>
<table align ="center"
border="1" bordercolor="#0000CC"
cellpadding="2">
<tr bgcolor="#FFFF00">
<td> Nomor </td>
<td> Nama Software </td>
<td> Link Download </td>
</tr>
<tr align="center"
bgcolor="#CCCCCC">
<td> 1 </td>
<td> SO W7 </td>
<td><a href="latihan1.html"
target="_blank">Download</a></td>
</tr>
<tr align="center">
<td> 2 </td>
<td> SO W8 </td>
<td><a href="latihan2.html">Download</a></td>
</tr>
<tr align="center"
bgcolor="#CCCCCC">
<td> 3 </td>
<td> Office 2010 </td>
<td><a href="latihan3.html">Download</a></td>
</tr>
<tr align="center"
bgcolor="#cccccc">
<td colspan="3">©copyright
: FKOM </td>
</tr>
</table>
</body>
Hasil
Coding di atas adalah:
Analisis
:
Pada bagian halaman web keseluruhan terletak
ditengah-tengah, itu karena kita menggunakan tag <center> pada
halaman web
Pada bagian halaman web paling atas bisa dilihat tulisan
bertuliskan huruf tebal karena menggunakan tag <b> dan
Tag <table align ="center"
border="1" bordercolor="#0000CC"
cellpadding="2"> digunakan untuk menampilkan tabel pada
halaman web dengan ketebala garis 1 mili dengan posisi rata tengah
Pada bagian kolom diatas berwarnakan kuning, karena pada
halaman web ini menggunakan tag <tr bgcolor="#FFFF00">
yang berarti #FFFF00 itu menunjukan suatu kode dari bagian warna akan
bisa menghasilkan warna kuning.
Pada bagian kolom Link download bisa itu lihat ada tulisan
bergaris bawah, yang mana pada bagian tersebut menggunakan Hyperlink dengan
tag <td><a href="mod1.html"
target="_blank">Download</a></td> dengan
keterangan, Jika kita klik tulisan Download maka kita akan
dihantarkan pada link web baru.
Post
Test
Soal :
Buatlah halaman web dengan tampilan sebagai berikut :
Jawaban
Coding dari Web adalah :
<html>
<head>
<title> POST TEST </title>
<table border="0" align="center"
width="100%">
<tr>
<td width="19%"
align="center"><img src="logouniku.png"
height="100" width="100"></td>
<td width="81%"
align="center"><h1>UNIVERSITAS KUNINGAN</h1>
<h2>FAKULTAS ILMU KOMPUTER</h2>
Kampus 1: jln. Raya Tjut Nyak Dien No.36
Kuningan</td>
</tr>
</table>
<hr size="3" color="#0000FF">
<ol type="1">
<li> Home </li>
<li> Fakultas </li>
<ul type="disc">
<li
title="Fakultas Ilmu Komputer"><mark>FKOM</mark></li>
<li
title="Fakultas Keguruan dan Ilmu Pendidikan">FKIP</li>
<li
title="Fakultas Ekonomi">FE</li>
<li
title="Fakultas Kehutanan">FHUT</li>
<li
title="Fakultas Hukum">HUKUM</li>
<li
title="Pendidikan Guru Sekoloah Dasar">PGSD</li>
</ul>
<li>Fasilitas</li>
</ol>
<center><b>Data Repository
Software</b><br></center>
<table align="center" border="1"
bordercolor="#0000CC" cellpadding="2">
<tr bgcolor="FFFF00">
<td> Nomor</td>
<td> Nama Software</td>
<td> Link Download</td>
</tr>
<tr align="center"
bgcolor="#CCCCCC">
<td> 1</td>
<td> SO W7</td>
<td><a href="latihan1.html"
target="_blank">Download</a></td>
</tr>
<tr align="center">
<td> 2</td>
<td> SO W8</td>
<td><a
href="latihan2.html">Download</a></td>
</tr>
<tr align="center">
<td> 2</td>
<td> Office 2010</td>
<td><a
href="latihan3.html">Download</a></td>
</tr>
<tr align="center"
bgcolor="#CCCCCC">
<td colspan="3">©Copyright :
FKOM UNIKU</td>
</tr>
</table>
</body>
</html>
Tugas :
Buatlah Design web
dengan tag tabel dengan design sebagai berikut :
Coding WEB adalah :
<html>
<body>
<table
border="1"width="60%"height="70%">
<tr width="40%"
height="50%">
<td
align="center"colspan="3">Header</td>
</tr>
<tr height="50%">
<td valign="1"align="center"width="7%">Menu</td>
<td
align="center"width="20%"bgcolor="grey">Utama</td>
<td
valign="1"align="center"width="7%">Menu</td>
</tr>
<tr>
<td
align="center"colspan="3">Footer</td>
</tr>
</table>
</body>
</html>
Komentar
Posting Komentar