Selasa, 28 Maret 2017
Jumat, 17 Maret 2017
Laporan Pemograman WEB 1 (Modul 1)
LAPORAN PRAKTIKUM
BAHASA PEMROGRAMAN WEB 1
MODUL 1
“PENGENALAN HTML”
Disusun oleh :
Nama : Azis furqon
Kelas : SI (A) 2015
NIM : 2015091022
LABORATORIUM ILMU KOMPUTER
“UNIVERSITAS KUNINGAN”
2016 - 2017
Dasar
Teori
HTML merupakan singkatan dari HyperText Markup Language. Didalam
HTML dikenal adanya tag atau tanda-tanda khusus yang merupakan rangkaian
parintah yang akan diproses oleh Web Browser.
HTML adalah bahasa
interpreter, bukan bahasa pemograman yang sebenarnya seperti C++, PYTHON,
BASIC, JAVA yang garus dikompilasi terlebih dahulu sebelum dapat dieksekusi.
Dalam pemograman HTML fungsi interpreter diperankan oleh Web Browser yang
digunakan untuk menerjemahkan tag-tag yang diselipkan di dalam file
berekstensi.html atau .htm dan menampilkan dilayar sesuai dengan tag yang
ditentukan.
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
|
LATIHAN PRAKTIKUM
<html>
<center>
<table>
<tr>
<td>
1 </td>
<td>
Nama </td>
<td>
: </td>
<td>
Azis furqon </td>
</tr>
<tr>
<td>
2 </td>
<td>
Kelas </td>
<td>
: </td>
<td>
SI2015A </td>
</tr>
<tr>
<td>
3 </td>
<td>
NIM </td>
<td>
: </td>
<td>
2015091022 </td>
</table>
</center>
</title>
</body>
</html>
Hasilnya adalah
:
PRAKTIKUM 2
<html>
<head>
<title> SELAMAT DATANG </title>
</head>
<body>
<h1> SELAMAT DATANG DIPEMOGRAMAN WEB </h1>
<h2> Mencari Jati diri menanamkan prestasi</h2>
<p> semangat untuk belajar pemograman WEB1</p>
<a href = " latihan1"> Tag Link <a/></br>
<img src = "sa.jpg" height = "300" width =
"300">
</body>
</html>
Hasilnya adalah:
Pebelum kita membuat yang namanya isi dari web
yang akan kita rancang sebaiknya kita buat dulu judul webnya. Yang sesuai
dengan perintah diatas yang menggunakan perintah <title>
SELAMAT DATANG </title> yang fungsi title digunakan untuk membuat judul
HTML.
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">.
PRAKTIKUM 3
<html>
<head>
<title> PRODI UNIVERSITAS KUNINGAN </title>
</head>
<body bgcolor="orange">
<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>
Hasilnya adalah:
Analisis:
Fungsi tag <body bgcolor="orange"> di dalam
tampilan diatas menunjukan beground yang berwarna orange yang menggunakan
fungsi tag <body bgcolor yang bertujuan untuk mewarnai seluruh halaman web
Dan selanjutnya <h1>
UNIVERSITAS KUNINGAN </h1> utuk memulak judul halaman danjuga untuk
mengatur ketebalan dan huruf yang kita gunakan <font face ="c, Arial,
Helvatica, sans-serif"> supaya
ada paragraph baru maka munculkan perintah ini <h2> Fakultas Ilmu
Komputer </h2></font><h3> Sistem Informasi
</h3></center><marquee behaviour = "alternate">
Tahun 2014 </marquee> selanjutanya kita ingin membuat garis maka harus
menggunakan perintah <hr size = "4" color = "blue">
beserta warna yang kita inginkan
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>
Hasilnya adalah:
Post Test
Soal
:
Buatlah
halaman web dengan tampilan sebagai berikut :
<html>
<head>
<title>
POST TEST </title>
<table
border="0" align="center" width="100%">
<tr>
<td
width="19%" align="center"><img
src="da.jpg" 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>
Hasilnya adalah;
a. Tugas
Program:
<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="green">Utama</td>
<td
valign="1"align="center"width="7%">Menu</td>
</tr>
<tr>
<td
align="center"colspan="3">Footer</td>
</tr>
</table>
</body>
</html>
Langganan:
Postingan (Atom)