PWPB | Pertemuan 6
Materi 6 Tabel Lanjutan
Nama : Muhammad Fahru Rozi
Kelas : XI RPL 2
1. TopIndex.html
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="shorcut icon" href="../img/Logo.ico">
<style type="text/css">
body {
background-color: grey;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="542" align="center" border="1" bgcolor="white">
<tr>
<td align="center" bgcolor="cyan"><font size="+6" face="Lucida Handwriting" color="purple">Muhammad Fahru Blog</font></td>
</tr>
<tr>
<td>
<strong><font size="+5"><marquee>Banner Atau Iklan</marquee></font></strong>
</td>
</tr>
<tr>
<td height="27" align="center">HOME | ABOUT | CONTENT ∇</td>
</tr>
<tr>
<td height="457" align="center">
<h1>Content</h1>
<p>Body Atau Content (isi)</p>
<p>Body Atau Content (isi)</p>
<p>Body Atau Content (isi)</p>
<p>Body Atau Content (isi)</p>
<p>Body Atau Content (isi)</p>
</td>
</tr>
<tr>
<td height="23" align="center">©Muhammad Fahru 2019 | copyright</td>
</tr>
</table>
</form>
</body>
</html>
Hasil :
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="shorcut icon" href="../img/Logo.ico">
<style>
body {
background-color: grey;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="542" align="center" border="1" bgcolor="white">
<tr>
<td align="center" bgcolor="cyan"><font size="+6" face="Lucida Handwriting" color="purple">Muhammad Fahru Blog</font></td>
</tr>
<tr>
<td>
<strong><font size="+5"><marquee>Banner Atau Iklan</marquee></font></strong>
</td>
</tr>
<tr>
<td height="457" align="center">
<h1>Content</h1>
<p>Body Atau Content (isi)</p>
<p>Body Atau Content (isi)</p>
<p>Body Atau Content (isi)</p>
<p>Body Atau Content (isi)</p>
<p>Body Atau Content (isi)</p>
</td>
</tr>
<tr>
<td height="27" align="center">HOME | ABOUT | CONTENT Δ</td>
</tr>
</table>
</form>
</body>
</html>
Hasil :
3. LeftIndex.html
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="shorcut icon" href="../img/Logo.ico">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table border="1" align="center">
<tr>
<th width="160" rowspan="3" valign="top" bgcolor="#993366">
<p>Home</p>
<p>Profile</p>
<p>About Us</p>
<p>Blog</p>
<p>Contact Us</p>
</th>
<th width="627" height="23" align="center" bgcolor="#ffff99">
<strong>
<font color="#cccccc" size="+4">Electronic Shop</font>
</strong>
</th>
</tr>
<tr>
<td height="176" align="center" valign="top" bgcolor="#ffff99">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</td>
</tr>
<tr>
<td height="30" align="center" bgcolor="#ffff99"><font size="+2">profilkami.com</font></td>
</tr>
</table>
</form>
</body>
</html>
Hasil :
4. SplitIndex.html
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="shorcut icon" href="../img/Logo.ico">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="512" border="1" align="center">
<tr>
<td width="15%" rowspan="2" align="center">
<strong>Daftar Isi</strong>
</td>
<td width="67%" height="23" align="center" bgcolor="#ffccff">
<font size="+3"><strong>Banner/Judul</strong></font>
</td>
<td width="18%" rowspan="2" align="center">
<strong>Daftar Isi</strong>
</td>
</tr>
<tr>
<td height="600" align="center" bgcolor="#cccccc">
<p>Body atau Contents (isi)</p>
<p><font>Body atau Contents (isi)</font></p>
<p><font>Body atau Contents (isi)</font></p>
<p><font>Body atau Contents (isi)</font></p>
<p><font>Body atau Contents (isi)</font></p>
<p></p>
</td>
</tr>
<tr>
<td height="23" colspan="3" align="center">lain-lain</td>
</tr>
</table>
</form>
</body>
</html>
Hasil :
5. mytabelindex_MuhammadFahru_XIRPL2.html
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="shorcut icon" href="../img/Logo.ico">
<style>
.img {
width: 200px;
height: 200px;
border-radius: 50%;
}
.left {
border: 2px solid black;
border-radius: 50px;
width: 150px;
}
ul li {
list-style: none;
}
p {
font-size: 13px;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table border="1" align="center">
<tr>
<th width="160" rowspan="3" valign="top" bgcolor="white">
<center>
<br>
<img src="../img/2.jpg" width="200px" height="200px;" style="border-radius: 50%;">
<br><br><br>
<div class="left">Home</div><br>
<div class="left">About</div><br>
<div class="left">Contact</div><br>
</center>
<h1>Daftar Isi</h1>
<ul>
<li><a href="">Profil</a></li><br>
<li><a href="">Karya</a></li><br>
<li><a href="">Motivasi</a></li>
</ul>
</th>
<th width="627" height="23" align="center" bgcolor="grey">
<strong>
<font color="#cccccc" size="+4">Muhammad Fahru Blog</font>
</strong>
</th>
</tr>
<tr>
<td height="480" valign="top" bgcolor="grey">
<center><h1>Biodata Fiersa Besari</h1>
<img src="../kk.jpg" alt="" width="30%"></center>
<ul>
<li><h3>Profil</h3>
<p>Fiersa Besari (lahir di Bandung, 03 Maret 1984; umur 35 tahun) adalah penulis dan pemusik Indonesia. Karier musiknya diawali sebagai vokalis grup indie Climacteric dari Bandung.Sebagai penulis, Fiersa telah menghasilkan lima novel. Ia juga terlibat sebagai salah satu pendiri Komunitas Pecandu Buku.</p>
</li>
<li>
<h3>Karya</h3>
<p>- Membuat Buku (Catatan Juang,Konpsirasi Alam Semesta,Garis Waktu,Arah Langkah,11 11) <br>
- Membuat Musik
</p>
</li>
<li>
<h3>Motivasi</h3>
<p> “Ternyata memang benar, ketika pujian membuat seseorang besar kepala, ia tidak lagi besar hati untuk menerima saran.” – Fiersa Besari</p>
</li>
</ul>
</td>
</tr>
<tr>
<td height="30" align="center" bgcolor="grey"><font size="+2">© Copyright Muhammad Fahru Rozi 2019</font></td>
</tr>
</table>
</form>
</body>
</html>
Hasil :
0 Comments