1. Praktikum
1 (tabel 1)
·
Source code
<!DOCTYPE html>
<html>
<head>
<title>Tabel</title>
</head>
<body>
<table
border="5" cellspacing="0" cellpadding="2"
width="100%" border="red">
<tr>
<td
colspan="5" align="center" bgcolor="pink">
<font
size="8" bgcolor="red">KARTU HASIL STUDI</font>
<div
style="font-size:15px;" bgcolor="red"
align="LEFT">
<p>NAMA :
MUNA NURMALA SARIT</p>
<p>NPM :
2015020138 </p>
<p>KELAS : TI -
IV D </p>
<p>JURUSAN:
Teknik Informatika </p>
</div>
</td>
</tr>
<tr>
<th
rowspan="2" width="1%" align="center">
<a
href="tabel.html">NO</a></th>
<th
rowspan="2" width="30%" align="center">
<a
href="tabel.html">Kode Mata Kuliah</a>
</th>
<th
align="center" rowspan="2" width="30%">
<a
href="tabel.html">Nama Mata Kuliah</a>
</th>
<th
colspan="2" align="center">
<a
href="tabel.html">Nilai</a>
</th>
</tr>
<tr>
<td
align="center"><a
href="tabel.html">Angka</a></td>
<td
align="center"><a href="tabel.html">Huruf</a></td>
</tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th
colspan="4" align="center">
<a
href="tabel.html">Total</a>
<td></td>
</tr>
</tr>
<tr>
<th
colspan="4" align="center">
<a
href="tabel.html">Rata-Rata</a>
<td></td>
</tr>
</table>
</body>
</html>
·
Screenshoot
·
Analisa
Seperti script yang
kita lihat di atas, ada beberapa tag html yang kita gunakan
diantaranya:
Kalau analisa dari
script yang ada di atas maka kita bisa membuat anchor untuk ke e-mail apabila
kita klik teks
yang telah di
beri tag <a>
maka akan menuju
ke alamat yang telah ditulis di href.
Disini kita menggunakan
tag <tabel></table> untuk mendifinisikan debuah tabelDan dalam tabel ada tag <tr> dimana tr digunakan untuk membuat baris
• Tag <table> digunakan untuk
mendefinisikan sebuah tabel
• Tag <tr> Mendefinisikan sebuah barisan
tabel
• Tag <td> Mendefinisikan sebuah sel atau
kolom tabel
• Sedangkan border=” “ untuk mengatur ketebalan
garis pada tabel yang di buat sesuai keinginan yang kita mau
2. Praktikum
2 (tabel 2)
·
Source code
<!DOCTYPE html>
<html>
<head>
<title>Tabel</title>
</head>
<body>
<table
border="5" cellspacing="0" cellpadding="2"
width="100%" border="red">
<tr>
<td
colspan="5" align="center"
bgcolor="pink"><font size="20"
bgcolor="red"></font>Website PT MNS</td>
</tr>
<tr>
<td
align="center"><a
href="home.html">Home</a></td>
<td
align="center"><a
href="profil.html">Profil</a></td>
<td
align="center"><a
href="product.html">Product</a></td>
<td
align="center"><a
href="galery.html">Galery</a></td>
<td
align="center"><a href="contact.html">Contact
Us</a></td>
</tr>
</tr>
<tr>
<th
rowspan="4" colspan="4" width="40%"
align="center">
<h4>Selamat Datang di Web PT
MNS</h4>
<img
src="mumun.jpg" width="40%" height="20%"
style="float:rigth; padding:20px;" align="left">
<p
align="" style="font-size:20px; padding-top:2px;
">BIODATA SAYA</p>
<p
style="font-size:11px">NAMA
: MUNA NURMALA SARI</p>
<p
style="font-size:11px">NPM
: 2015020138 </p>
<p
style="font-size:11px">KELAS
: TI - IV D</p>
<p
style="font-size:11px">JURUSAN: Teknik Informatika </p>
</th>
<td
align="center" bgcolor="grey" >Product</td>
</tr>
<tr>
<td
width="30%" align="center">
<img
src="images.jpg" width="40%" height="20%">
<img
src="images.jpg" width="40%" height="20%">
</td>
</tr>
<tr>
<td
align="center" bgcolor="grey" >Galery</td>
</tr>
<tr>
<td
width="30%" align="center" >
<img
src="l.jpg" width="40%" height="20%">
<img
src="l.jpg" width="40%" height="20%">
</td>
</tr>
<tr>
<td
colspan="5" align="center"
bgcolor="pink">©2017 PT MNS</td>
</tr>
</table>
</body>
</html>
o
Home
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor= "pink">
<table>
<tr>
<td>
<h4
align="left">Selamat Datang di Web PT MNS</h4>
<p>
ini
adalah sebuah website pribadi dari Muna Nurmala Sari (MNS) dimana website ini
berisi tentang apapun mengenai lukisan..
</p>
<p>
Semua
yang berkaitan dengan apapun itu..
<td>
<img
src="1.jpg" width="100%" height="100%"
style="float:rigth; padding:100px;" align="center">
</td>
</p>
</td>
</tr>
<tr>
<td>
<p
align="right" align="left">
Lukisan
adalah karya seni yang proses pembuatannya dilakukan dengan memulaskan cat
dengan alat kuas lukis, pisau palet atau peralatan lain, yaitu memulaskan
berbagai warna dan nuansa gradasi warna, dengan kedalaman warna tertentu juga
komposisi warna tertentu dari bahan warna pigmen warna dalam pelarut (atau
medium) dan gen pengikat (lem) untuk pengencer air, gen pegikat berupa minyak linen
untuk cat minyak dengan pengencer terpenthin, pada permukaan (penyangga)
seperti kertas, kanvas, atau dinding. Ini dilakukan oleh seorang pelukis;
dengan kedalaman warna dan cita rasa pelukis, definisi ini digunakan terutama
jika ia merupakan pencipta suatu karya lukisan.
<br>
Manusia
telah melukis selama 6 kali lebih lama berbanding penggunaan tulisan. Sebagai
contoh lukisan-lukisan yang berada di gua-gua tempat tinggal manusia
prasejarah.
</p>
</td>
</tr>
</table>
</body>
</html>
o
Profil
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor="pink">
<p align="left">
<h2
align="center">PROFIL</h2>
</p>
<p>
<img
src="mumun.jpg" width="40%" height="20%"
style="float:rigth; padding:20px;" align="left">
<p
style="font-size:20px">NAMA
: MUNA NURMALA SARI</p>
<p
style="font-size:20px">NPM
: 2015020138 </p>
<p
style="font-size:20px">KELAS
: TI - IV D</p>
<p
style="font-size:20px">JURUSAN: Teknik Informatika </p>
</p>
</body>
</html>
o
Product
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor="pink">
<h2
align="center">PRODUCT</h2>
<table>
<tr>
<td>
<h4>Lukisan</h4>
</td>
<td>
<img
src="9.jpg" width="40%" height="20%"
style="float:rigth; padding:20px;" align="left">
<img
src="6.jpg" width="40%" height="20%"
style="float:rigth; padding:20px;" align="left">
</td>
</tr>
<tr>
<td>
<h4>Gambar</h4>
</td>
<td>
<img
src="images.jpg" width="40%" height="20%"
style="float:rigth; padding:20px;" align="left">
<img
src="l.jpg" width="40%" height="10%"
style="float:rigth; padding:10px;" align="left">
</td>
</tr>
</table>
</body>
</html>
o
Gallery
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor="pink">
<h2
align="center">GALLERY</h2>
<table>
<tr>
<td>
<img
src="9.jpg" width="22%" height="5%"
style="float:rigth; padding:5px;" align="center">
<img
src="6.jpg" width="20%" height="5%"
style="float:rigth; padding:5px;" align="center">
<img
src="1.jpg" width="25%" height="5%" style="float:rigth;
padding:5px;" align="center">
<img
src="8.jpg" width="19%" height="5%"
style="float:rigth; padding:5px;" align="center">
</td>
</tr>
<tr>
<td>
<img
src="2.jpg" width="22%" height="5%"
style="float:rigth; padding:5px;" align="center">
<img
src="3.jpg" width="18%" height="5%"
style="float:rigth; padding:5px;" align="center">
<img
src="4.jpg" width="27%" height="5%"
style="float:rigth; padding:5px;" align="center">
<img
src="5.jpg" width="19%" height="5%"
style="float:rigth; padding:5px;" align="center">
</td>
</tr>
<tr>
<td>
<img
src="10.jpg" width="22%" height="5%"
style="float:rigth; padding:5px;" align="center">
<img
src="images.jpg" width="25%" height="5%"
style="float:rigth; padding:5px;" align="center">
<img
src="l.jpg" width="17%" height="5%"
style="float:rigth; padding:5px;" align="center">
<img
src="hh.jpg" width="10%" height="5%"
style="float:rigth; padding:5px;" align="center">
</td>
</tr>
</table>
</body>
</html>
o
Contact
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor="grey">
<p>
<p align="center">Contact us
:</p>
Muna
Nurmala Sari
<br
>
ig:@munanurmalasarii
<br
>
fb:Muna
Nurmala Sari
<br
>
wa:081242364841
</p>
</body>
</html>
·
Screenshoot
o
Home
o
Profil
o
Product
o
Gallery
o
Contact
·
Analisa
Kalau analisa dari
script yang ada di atas maka kita bisa membuat anchor untuk ke e-mail apabila
kita klik teks
yang telah di
beri tag <a>
maka akan menuju
ke alamat yang telah ditulis di href.
Disini kita menggunakan
tag <tabel></table> untuk mendifinisikan debuah tabelDan dalam tabel ada tag <tr> dimana tr digunakan untuk membuat baris
• Tag <table> digunakan untuk
mendefinisikan sebuah tabel
• Tag <tr> Mendefinisikan sebuah barisan
tabel
• Tag <td> Mendefinisikan sebuah sel atau
kolom tabel
•
Sedangkan border=” “ untuk mengatur ketebalan garis pada tabel yang di
buat sesuai keinginan yang kita mau
KESIMPULAN
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. Seperti yang perkembangan HTML saat sudah mencapai untuk
HTML 5 otomatis dari setiap
perkembangannya pasti suatu
kelebihan yang dimilikinya.
HTML merupakan suatu dasar untuk kita pelajari untuk
menguasai atau ingin menjadi Ahli dalam bidang pembuatan suatu website.
Comments
Post a Comment