Laporan Praktikum Pemograman Web 1, Modul 1
LAPORAN
PRAKTIKUM
PEMOGRAMAN
WEB 1
DISUSUN
OLEH :
Nurintan
Yuliani
2015091076
SI
2015 B
Laboraturium
Komputer
UNIVERSITAS KUNINGAN
Jl.Cut
Nyak Dhien No.36A Cijoho Kuningan Telp.Faks/ : 0232-874824
2016-2017
BAB I
Tag Tag HTML
· 1. Definisi HTML
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.
· 2. Tag-Tag HTML
<html>=Mendefinisikan root dari suatu
dokumen HTML
<head> =Digunakan untuk memberikan informasi tentang dokumen tersebut
<body> = berfungsi sebagai isi untuk menuliskan script – script yang mana nantinya sebagai dalam tag body bisa kita sisipkan atribut background yang berguna sebagai background
<a> … </a> = Membuat hyperlink/link
<img> = memasukan gambar pada halaman web anda
<font> … </font> = membuat tulisan pada halaman web
<marquee> … </marquee> = tulisan berjalan atau bergerak pada halaman web anda
<b> … </b> = membuat tulisan bercetak tebal / bold
<i> … </i> = membuat tulisan bercetak miring / italic
<u> … </u> =membuat tulisan bergaris bawah / underlined
<hn>Judul paragraf</hn> --- n = 1,2,3,4,5,6 (tingkat judul) = Untuk menuliskan judul suatu paragraf atau lebih dikenal sebagai heading
<p> … </p> = membuat paragraf
<br> = tag untuk mengganti baris ,tag ini tidak perlu di tutup
<tr> … </tr> = tag untuk membuat baris pada table
<td> … </td> = tag untuk membuat kolom/cell pada table
<table> … </table> = untuk mebuat table
<li> … </li> = Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol ” • ” (bullet) Kelompok item harus diapit oleh tag
<ul> … </ul> dalam daftar bertingkat. Untuk menomori enumerasi dengan nomor urut (1,2,3)
<blink> Membuat teks berkedip
<center> Untuk perataan tengah terhadap teks atau gambar
<comment> Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
<dd> Indents teks
<form> Mendefinisikan input form
<frame> Mendefinisikan frame
<frameset> Mendefinisikan attribut halaman yang akan menggunakan frame
<hr> Membuat garis horizontal
<ol> Mendefinisikan awal dan akhir list
<pre> Membuat teks dengan ukuran huruf yg sama
performatan
<del> = Untuk memberi garis tengah pada teks/mencoret teks
dianjurkan/ditekankan pada penggunaan untuk teks miring
seperti frame-box di dalam form
<iframe> = Mendefinisikan sebuah inline frame
<label> = Mendefinisikan label untuk sebuah elemen <input>
<link /> = Mendefinisikan hubungan antara dokumen dan sumber eksternalnya
karena tag <listing> tidak layak/diprotes
<menu> = Mendefinisikan sebuah daftar menu
<meta /> = Mendefinisikan metadata tentang sebuah dokumen HTML
<noscript> = Jika browser user tidak mendukung client-side scripts
<object>meletakkan embed sebuah objek
<del> tetapi tag <s> tidak dianjurkan sebagai gantinya menggunakan tag <del>
<tfoot> = Untuk mengelompokkan isi footer di dalam sebuah tabel
<th> = Mendefinisikan sel header di dalam sebuah tabel
<ul> = Mendefinisikan daftar dalam format bullet
<head> =Digunakan untuk memberikan informasi tentang dokumen tersebut
<body> = berfungsi sebagai isi untuk menuliskan script – script yang mana nantinya sebagai dalam tag body bisa kita sisipkan atribut background yang berguna sebagai background
<a> … </a> = Membuat hyperlink/link
<img> = memasukan gambar pada halaman web anda
<font> … </font> = membuat tulisan pada halaman web
<marquee> … </marquee> = tulisan berjalan atau bergerak pada halaman web anda
<b> … </b> = membuat tulisan bercetak tebal / bold
<i> … </i> = membuat tulisan bercetak miring / italic
<u> … </u> =membuat tulisan bergaris bawah / underlined
<hn>Judul paragraf</hn> --- n = 1,2,3,4,5,6 (tingkat judul) = Untuk menuliskan judul suatu paragraf atau lebih dikenal sebagai heading
<p> … </p> = membuat paragraf
<br> = tag untuk mengganti baris ,tag ini tidak perlu di tutup
<tr> … </tr> = tag untuk membuat baris pada table
<td> … </td> = tag untuk membuat kolom/cell pada table
<table> … </table> = untuk mebuat table
<li> … </li> = Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol ” • ” (bullet) Kelompok item harus diapit oleh tag
<ul> … </ul> dalam daftar bertingkat. Untuk menomori enumerasi dengan nomor urut (1,2,3)
<blink> Membuat teks berkedip
<center> Untuk perataan tengah terhadap teks atau gambar
<comment> Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
<dd> Indents teks
<form> Mendefinisikan input form
<frame> Mendefinisikan frame
<frameset> Mendefinisikan attribut halaman yang akan menggunakan frame
<hr> Membuat garis horizontal
<ol> Mendefinisikan awal dan akhir list
<pre> Membuat teks dengan ukuran huruf yg sama
performatan
<del> = Untuk memberi garis tengah pada teks/mencoret teks
dianjurkan/ditekankan pada penggunaan untuk teks miring
seperti frame-box di dalam form
<iframe> = Mendefinisikan sebuah inline frame
<label> = Mendefinisikan label untuk sebuah elemen <input>
<link /> = Mendefinisikan hubungan antara dokumen dan sumber eksternalnya
karena tag <listing> tidak layak/diprotes
<menu> = Mendefinisikan sebuah daftar menu
<meta /> = Mendefinisikan metadata tentang sebuah dokumen HTML
<noscript> = Jika browser user tidak mendukung client-side scripts
<object>meletakkan embed sebuah objek
<del> tetapi tag <s> tidak dianjurkan sebagai gantinya menggunakan tag <del>
<tfoot> = Untuk mengelompokkan isi footer di dalam sebuah tabel
<th> = Mendefinisikan sel header di dalam sebuah tabel
<ul> = Mendefinisikan daftar dalam format bullet
BAB II
Penyelesaian Pretest
Pretest
<html>
<head>
<title>"pembuatan
tabel"</title>
</head>
<body>
<table
border="4">
<tr> <td> 1 </td>
<td>
Nama </td>
<td>
: </td>
<td>
Rio </td>
</tr>
<tr>
<td> 2 </td>
<td>
kelas </td>
<td>
: </td>
<td>
reguler </td>
</tr>
</table>
</body>
</html>
|
Tampilannya :
Analisis
:
Pada tgas pembuatan
halaman web ini digunakannya judul dengan tag <title> yaitu “pembuatan
tabel”. Pada halaman ini terdapat tabel yang memuat 4 kolom dan 2 baris,dengan
perintahnya yaitu <tabel border=”4”> dengan menggunakan tag <tr>
untuk membuat kolom dan tag<td> untuk membuat barisnya.
BAB III
Praktikum dan Analisisnya
Praktikum
Praktikum 1
<html>
<head>
<title>judul web</title>
</head>
<body>
isi
dari halaman web
<h1>tag
heading 1</h1>
<h2>tag
heading 2</h2>
<p>tag
paragrap</p>
<a
href="google.com">tag link</a></br>
<img
src="koala.jpg"heigh="200" width="200">tag
image
</body>
</html>
|
Tampilannya :
Analisis
:
Pada
praktikum pertama membuat kalimat dengan ukuran yang berbeda beda dengan
menggunakan H1-H6 ukuran penulisan bisa di buat sesuai kebutuhan seperti H1
yaitu penulisan terbesar dan H6 adalah ukuran terkecil,pada praktkm ini pula
ditambahkan gambar dengan perintah <img src=”nama gambar”> ,dan juga
menambahka link dengan perintah <a href=”alamat tujuan”> untuk menuju ke
halaman berikutnya namun pada pembuatan link ini tidak di sertakan dengan link
ke halaman berikutnya.
Praktikum 2
<html>
<head>
<title>Tag HTML</title>
</head>
<body>
<center><h2>UNIVERSITAS
KUNINGAN</H2>
<h1>FAKULTAS
ILMU KOMPUTER</H1>
<h3>PROGRAM
STUDI SISTEM INFORMASI JENJANG S1</H2>
<marquee><big>Tahun
Ajaran 2017</big></marquee>
<hr>
</center>
<pre>
NIM :2015091076 <br/>
Nama :Nurintan Yuliani <br/>
Tempat
Lahir :Majalengka <br/>
Tanggal
Lahir :27 Agustus 1997 <br/>
Hobi :Makan <br/>
<br/>
<ol>
<li>SD :SDN Cimanggu 2</li>
<li>SMP :SMPN 2 Talaga</li>
<li>SD :SMKN 1 Talaga</li>
</OL>
</pre>
</font>
</body>
</html>
|
Tampilannya :
Analisa
:
Pada
praktikum ke dua menampilkan tulisan yang bergerak dengan menggunakan perintah
<marquee> dengan pergerakan berjalan dari kanan ke kiri jadi memakai
perintah <big>.
Pada
halaman ini pula terdapat list yang
menggunakan angka yaitu dengan Order List karena dengan OL dapat menggunakan
gambar dan tulisan.
Praktikum 3
<html>
<head><title>Tag
dengan Atribut</title>
</head><body
bgcolor="brown">
<center><h1>UNIVERSITAS
KUNINGAN</h1>
<font
face="Verdana,Arial, helvetica, sans-serif"><h2> FAKULTAS
ILMU KOMPUTER</h2></font>
<h3>Teknik
Informatika</h3></center>
<marquee
behavior="alternate">Tahun 2017</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 hukum">FHUT</li>
<li title="Fakultas
Guru Sekolah dasar">PGSD</li></ul>
<li>fasilitas</li>
</ol>
</body>
</html>
|
Tampilannya :
Analisa
:
Pada
praktikum ini sam seperti yang praktikum ke 2 yaitu memakai list namun
menggunakan list UL yaitu list tanpa urutan dan juga menggunakan list OL untuk
list Fakultas.
dan
menggunakan background berwarna dengan menggunakan perintah <body bgcolor="nama
warna"> dan juga ditambahkannya garis lurus yang berwarna biru dengan
dibuatnya perintah <hr>jika di terapkan seperti di halaman seperti ini <hr
size ="4" color="blue"> .
Praktikum 4
<html>
<head>
<title>UNIKU</title>
</head>
<body>
<center><strong>UNIVERSITAS
KUNINGAN</strong><br/>
<h1>FAKULTAS
ILMU KOMPUTER</h1><br/>
<h2>FAKULTAS
KEGURUAN DAN ILMU PENDIDIKAN</h1><br/>
<h3>FAKULTAS
EKONOMI</h1><br/>
<h4>FAKULTAS
KEHUTANAN</h1><br/>
<h5>FAKULTAS
HUKUM</h1><br/>
<h6>FAKULTAS
PENDIDIKAN GURU SEKOLAH DASAR</h1><br/>
</body>
</html>
|
Tampilannya :
Analisis
:
untuk
praktikum ini membuat tulisan dengan menggunakan Format <center> untuk
membuat tulisan berada di tengah-tengah , dan juga menggunakan perintah
<strong> untuk mmbuat teks tebal fungsinya sama dengan tag <b>.
Praktikum 5
<html>
<head>
<title>UNIKU</title>
</head>
<body>
<p
align="center">Paragraf Pertama</p>
<p
style="center:#ffD000">Paragraf Kedua</p>
<font
color="#0D00ff">Paragraf dengan Tag Font</font>
</body>
</html>
|
Tampilannya :
Analisa:
Pada
praktikum ini yaitu tampilan teks Paragraf Pertama
berada di tengah-tengah dengan
menggunakan tag <center>,dan ParagrafKedua
menggunakan tag <style> yaitu untuk Mendefinisikan informasi style untuk
dokumen HTML dan pada Paragraf dengan Tag Font itu adalah informasi dokumen yang di sarankan oleh ParagrafKedua.
Praktikum 6.
<html>
<head>
<title>UNIKU</title>
</head>
<body>
<center><img
src="uniku.jpg" height="153"
width="210"><br>
Universitas
Kuningan</center>
</body>
</html>
|
Tampilannya :
Analisis:
Pada
praktikum ke enam membuat / menambahkan tampilan gambar pada halam dengan tag
<img src=”uniku.jpg”> dan penambahan teks Universitas Kuningan yang di
simpan di tengah tengah dengan menggunakan tag <center> sama dengan
gambarnya yang berada di tengah.
Praktikum 7
<html>
<head>
<title>untitled
dokumen</title>
</head>
<body>
<center><b>data
repository software</br><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 ="latihan_html.html"
target="blank">download</a></td>
</tr>
<tr
align="center">
<td>2</td>
<td>SO W8</td>
<td><a href
="latihan3.html">download</a></td>
</tr>
<tr
align="center" bgcolor="#CCCCCC">
<td>3</td>
<td>offce 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>
|
Tampilannya :
Analisa:
Pada
praktikum ke tujuh ini membuat tabel dengan penambahan link dengan perintah
<a href> .
Pada
penambahan sel-sel di tabel menggunakan
tag <td> yaitu sebagai Mendefinisikan
sel di dalam sebuah tabel dan juga pewarnaan dengan perintah “bgrcolor” di
dalam perintah <tr> dan di tambahkan warna yang ditentukan namun penamaan
warna dengan menggunakan simbol .seperti ini :
<tr bgcolor="#FFFF00">
<td>Nomor</td>
<td>Nama software</td>
<td>link download</td>
</tr>
Praktikum 8
<html>
<head>
<title>UNIKU</title>
</head>
<body>
<table
border="0" align="center" width="100%">
<tr>
<td width="19%"
align="center"><img src="uniku.jpg"></td>
<td width="81%"
align="center"><h1>UNIVERSITAS KUNINGAN</td>
<h2>FAKULTAS ILMU KOMPUTER</h2>
Kampus 1 :Jln Raya Tjut Nyak Dhien No.36
Kuningan </td>
</tr>
</table>
<hr
size="3" color="#0000ff">
<table
border="0" width="100%">
<tr>
<td
width="10%"><p>Home</p>
<p>Menu 1</p>
<p>Menu 2</p>
<p>Menu 3</p></td>
<td width="90%">
<pre>Don't Join To Nato No Action
Talk Only</pre>
<strike>Jangan jadi orang yang hanya
banyak bicara tanpa aksi/bukti nyata</strike>
</td>
</tr>
</table>
</body>
</html>
|
Tampilannya :
Analisa
:
Pada
praktikum terakhir ini mengandung banyak tag yang sudah di jelaskan di
praktikum- praktikum sebelumnya yaitu seperti teks tengah,garis lurus.
Di
praktikum ini membuat tabel namun tanpa garis/border dengan perintah <table
border=”0”> yang menandakan bahwa tabel tersebut tanpa tambahan garis/border,pada
kata Jangan jadi orang yang hanya banyak bicara tanpa
aksi/bukti nyata di coret dengan
menggunakan tag <strike>.
BAB IV
Tugas
Tugas
<frameset border ="5" rows="20%,60%,*">
<frame src="tugas1.html" >
<frameset cols="50%,*">
<frame src="tugas2.html">
<frame src="tugas3.html">
</frameset>
<frame src="tugas4.html">
</frameset>
|
scrip dari tiap link halaman web yang ada di halaman web framenya :
tugas1.html
<html>
<body>
<h3 align ="center">Home</h3>
<h3 align ="center">Profil</h3>
</body>
</html>
tugas2.html
<html>
<body>
<h1 align ="center">Nurintan Yuliani</h1>
</body>
</html>
tugas3.html
<html>
<body align ="center">
<img src ="2.jpg" width="50%">
</body>
</html>
tugas4.html
<html>
<body>
<h1 align ="center">Sistem Informasi</h1>
</body>
</html>
|
Tampilannya :
BAB V
Postest
Postest
<html>
<head>
<title> Post Test Modul1 </title>
</head>
<body>
<img align="left" src="uniku.jpg" height="100" width="100"></img>
<center><h1>UNIVERSITAS KUNINGAN</h1>
<h3>FAKULTAS ILMU KOMPUTER</h2>
<h6>Kampus 1: Jln Raya Tjut Nyak Dhien No.36 Kuningan</h1></center>
<hr size="2" color="blue">
<ol type="1" start="1">
<li>Home</li>
<li>Fakultas</li>
<ul type ="circle">
<li>FKOM</li>
<li>FKip</li>
<li>Fe</li>
<li>FHut</li>
<li>PGSD</li>
</ul>
<li>Fasilitas</li>
</ol>
<center><b>Data Respository Software</b><br></center>
<table align="center" border="1" bordercolor="#0000cc" cellpadding="2">
<tr bgcolor="#ffff00">
<td>Nomor</td>
<td>Nama Software</td>
<td>prak1</td>
</tr>
<tr align="center" bgcolor="#CCCCCC">
<td>1</td>
<td>So w7</td>
<td><a href="prak1.html" target="blank">Download</a></td>
<tr>
</tr>
<tr align="center">
<td>2</td>
<td>So web</td>
<td><a href="prak2.html" >Download</a></td>
</tr>
</tr>
<tr align="center" bgcolor="CCCCCC">
<td>3</td>
<td>Office 2010</td>
<td><a href="prak2.html" >Download</a></td>
</tr>
<tr align="center" bgcolor="CCCCCC">
<td colspan="3">©right:FKOM UNIKU</td>
</tr>
</table>
</head>
</body>
</html>
|
Tampilannya :
Terima kasih atas kunjungannya , semoga bermanfaat dan menjadi berkah..
Komentar
Posting Komentar