Rabu, 19 Oktober 2016

Tugas Praktikum 4

Posted on by Dewi Rahma Ente

2

Dalam tugas praktikum 4 ini, kami menggunakan kode HTML untuk membuat sebuah blog seperti gambar di  bawah ini
Kode HTML yang saya gunakan yaitu :

<!DOCTYPE html>
<html>
    <head>
        <title></title>
  
        <frameset rows="30%,65%" border="5%">
            <frame name="atas" src="welcome.html"></frame>
        <frameset cols="20%,60%">
            <frame name="menu" src="menu.html"></frame>
            <frame name="isi" src="layar.html"></frame>
        </frameset></frameset>
    </head>
</html>

Dari sini saya menggunakan hiperlink dari berbagai HTML yang telah saya buat. yang pertama adalah untuk latarnya yaitu :
 HTML yang saya gunakan pada gambar seperti diatas yaitu :


<!DOCTYPE html>
<html>
    <head>
        <title></title>
            <body style="background-image: url(layar.jpg);">
            </body>
    </head>
</html>

Selanjutnya, saya juga memasukkan layar yang digunakan sebagai bagian dasar dari web saya seperti gambar di bawah :


Saya membuat halaman di atas dengan menggunakan kode HTML :
<!DOCTYPE html>
<html>
<head>
<title></title>

<body background="itu.jpg">
<h1 style="text-align: center;">
<font color="pink">
<font size="7">
<font face="this night"><b> Welcome to My Blog </font></font></font></h1></b>
<marquee behavior="alternate"><img src="mini.gif"></marquee>
</body>
</head>
</html>

Selanjutnya saya membuat data resmi saya yaitu :

Kode HTML yang saya gunakan yaitu :

<!DOCTYPE html>
<html>
<head>
<title></title>
<body style="background-image: url(BIO.gif);">
<center>
<img src="dewi.jpg" width="270" height="400">
<b><h3><table width=80% align=center><FONT COLOR="black"></h3></b>
<font color="E6E6FA">
<tr>
<td ><font>NAMA</font></td>
<td><font>: DEWI RAHMA ENTE</font></td></CENTER>
</tr>
<tr>
<td><font>TEMPAT LAHIR</font></td>
<td><font>: LAROMPONG</font></td>
</tr>
<tr>
<td><font>TANGGAL LAHIR</font></td>
<td><font>: 9 MEI 1997</font></td>
</tr>
<tr>
<td><font>AGAMA</font></td>
<td><font>: ISLAM</font></td>
</tr>
<tr>
<td><font>ALAMAT</font></td>
<td><font>: BTP BLOK L</font></td>
</tr>
<tr>
<td><font>STATUS</font></td>
<td><font>: MAHASISWA UNIVERSITAS HASANUDDIN</font></td>
</tr>
</table>
</font>
</head>
</body>
</html>

Lalu yang saya buat Selanjutnya yaitu Biodata saya :

Kode HTMLnya yaitu :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="background-image: url(about.jpg);">

<font color="DA7OD6"><h1><I> Assalamualaikum </h1></font></I>
<font face="comic sans MS" color="EE82EE"><br><h3> Nama saya Dewi Rahma Ente. Saya lahir pada hari Jum'at pukul 12.10 di Larompong pada tanggal 9 mei 1997.
<br> Saya terlahir dari pasangan suami istri yaitu Ente Dg.Malinta dan Suarni. Saya anak keempat dari Enam bersaudara.</br>
  Dan saat ini saya adalah mahasiswa smester 1 Universitas Hasanuddin, program studi Statistika.</h3></font>
  <font face="comic sans Ms" color="DDAODD">
  <h2>
  <br> Adapun saudara-saudara saya yaitu : </br>
  <li > <ol> Sukmawati Ente</ol></li>
  <li > <ol> Ismail Ente</ol></li>
  <li > <ol> Siska Patika Sari Ente</ol></li>
<li > <ol> Ishaq Dzulkifli Ente</ol></li>
  <li > <ol> Anggara Yuda Ente</ol></li></font>
  </h2>
</body>
</html>

Selain itu, saya juga menambahkan KRS saya pada blog saya itu :


Kode HTMLnya yaitu :
<!DOCTYPE html>
<html>
  <head>
    <title>KRS</title>
      </head>
    <body>
      <table>
  <tr>
    <td rowspan="2"></td>
    <td><font size="10">Universitas Hasanuddin</font>
    </td>
  </tr>
  <tr>
    <td align="top">
      <b>Fakultas Matematika dan Ilmu Pengetahuan Alam</b></td>
 
  </tr></table><table><caption>
    <h2>KARTU RENCANA STUDI</h2>
      <h3>Semester : Ganjil 2016 / 2017</h3>
  </caption>
  <tr>
    <td width="125">NAMA</td>
    <td>:</td>
    <td width="1028">DEWI RAHMA ENTE</td>
    <td rowspan="4" align="right"></td>
  </tr>
  <tr>
    <td>NIM</td>
    <td> :</td>
    <td>H12116006</td>
  </tr>
  <tr>
    <td> Program Studi</td>
    <td>:</td>
    <td>Statistika - S1 Regular</td>
  </tr>
  <tr>
    <td> Dosen PA</td>
    <td>:</td>
    <td>Dr. Erna Herdiani, S.Si., M.Si</td>
  </tr>
    </table>
    <table class="table-common" border="1">
  <tr>
    <th rowspan="2">No.</th>
    <th rowspan="2">Kelas</th>
    <th colspan="2">Mata Kuliah</th>
    <th rowspan="2">SKS</th>
    <th rowspan="2">Ke</th>
    <th colspan="7">Jadwal</th>
  </tr>
  <tr>
    <th>Kode</th>
    <th>Nama</th>
    <th width="7.5%">Sn</th>
    <th width="7.5%">Sl</th>
    <th width="7.5%">Rb</th>
    <th width="7.5%">Km</th>
    <th width="7.5%">Jm</th>
    <th width="7.5%">Sb</th>
    <th width="7.5%">Mg</th>
  </tr>
  <tr>
    <td align="center">1</td>
    <td>Pengantar Ilmu Komputer D</td>
    <td>101H1313</td>
    <td>Pengantar Ilmu Komputer
    </td>
    <td align="center">3</td>
    <td align="center">1</td>
    <td>13:10-15:25</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td align="center">2</td>
    <td>STATISTIKA + MAH LAMA</td>
    <td>016U0033</td>
    <td> Matematika Dasar I </td>
    <td align="center">3</td>
    <td align="center">1</td>
    <td>10.10-12.40</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td align="center">3</td>
    <td>
      statistika + MHS LAMA</td>
    <td>021U0032</td>
    <td>Fisika Dasar I</td>
    <td align="center">2</td>
    <td align="center">1</td>
    <td></td>
    <td></td>
    <td></td>
    <td>07:30-09:10</td>
    <td></td>
    <td></td>
    <td></td>

  </tr>
  <tr>
    <td align="center">4</td>
    <td>Statistika + mh lama</td>
    <td>030U0032</td>
    <td> Biologi Dasar </td>
    <td align="center">2</td>
    <td align="center">1</td>
    <td> 07:30-09:10</td>
    <td> </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td align="center">5</td>
    <td> Statistika + Mala </td>
    <td>025U0032</td>
    <td>Kimia Dasar</td>
    <td align="center">3</td>
    <td align="center">1</td>
    <td></td>
    <td> 09:20-11:50</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td align="center">6</td>
    <td>B.INA14</td>
    <td>009U0032</td>
    <td>Bahasa Indonesia</td>
    <td align="center">2</td>
    <td align="center">1</td>
    <td></td>
    <td>15:45-17:25</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td align="center">7</td>
    <td>PAI 56</td>
    <td>001U0032</td>
    <td>Pendidikan Agama Islam</td>
    <td align="center">2</td>
    <td align="center">1</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>15.45-17.25</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td align="center">8</td>
    <td>WSBM 16</td>
    <td>007U0032</td>
    <td>Wawasan Sosial Budaya Maritim</td>
    <td align="center">2</td>
    <td align="center">1</td>
    <td></td>
    <td></td>
    <td>13:30-15:10</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td align="center">9</td>
    <td>PAN 20</td>
    <td>012U0032</td>
    <td>Pancasila</td>
    <td align="center">2</td>
    <td align="center">1</td>
    <td></td>
    <td></td>
    <td></td>
    <td>15:30-17:25</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="4">
      <b>JUMLAH KREDIT</b>
    </td>
    <td align="center">
      <b>21</b>
    </td>
    <td colspan="8"></td>
  </tr>
</table>
<br><a href="menu.html">back</a>

</body>
</html>

Saya juga membuat tampilan dari Facebook dari HTML

 Kode HTMLnya yaitu :

<html>
<head>
<title>facebook.co.id</title>
<style type="text/css">
<!--.header {
float: left; background-color: #3B5998;
height: 60px;
margin: 0px auto;
width: 1230px;
padding: 10px;}
.logo { float: left;
height: 10px;
margin:13px 10px 10px 200px;
color: white;}
.kotak {float: right;height: 100px;padding: 5px;font-family: arial;font-size: 10px;color: white;}

#button_mendaftar{ background-color: #4283d4; color: white;}
.isi { float: left;
height: 470px;
background-image: url(bg.jpg);
padding: 0px;}
.isi_kiri {float: left;
width: 500px;
font-size: 18px;
font-family: arial;
color: #3B5998;
font-weight: bold;
margin:0px 10px 10px 200px;}
.isi_kanan {float: right;
width: 507px;
font-family: arial;
color: #3B5998;
margin:0px 0px 10px 30px;}
.footer {clear: both;
width: 1247px;
height: 20px;
background-color: #3B5998;
font-family: arial;
font-size: 12px;
font-weight: bold;
color: white;}
.hr {color: blue;
height: 5px;
width: 400;}
</style></head>
<body background="latar.jpg">
<div class="header">
<div class="logo"><img src= "logofb.png" width="150"></div>
<div class="kotak">
<br /><input type="button" value="Masuk" id="text/css">
<br /></div>
<div class="kotak">
Password:
<br ><input type="text" size=20><br />
Lupa kata sandi Anda?
</div>
<div class="kotak">
Email:
<br />
<input type="text" size=30>
<br />
<input type="checkbox">Biarkan saya tetap masuk
</div>

</div>
  <div class="isi">
<div class="isi_kiri">
<br/>
<br/>
<br />
Facebook membantu Anda terhubung dan berbagi<br/>
dengan orang-orang dalam kehidupan Anda<br/>
<br/>
<br/>
<br/>
<img src="jaringann.png" width="450">
</div>
<div class="isi_kanan">
<br />
<font size=5><b>Daftar</b></font><br/>
Dengan identitas asli untuk hubungan yang nyata
<tr>
<input type="text" name="nama" placeholder="Nama Depan" size="22"><input type="text" name="nama" placeholder="Nama Belakang" size="22">
<p><input type="text" name="email" placeholder="Email" size="49"></p>
<p><input type="text" name="password" placeholder="Password" size="49"></p>
<p><input type="text" name="password" placeholder="masukkan ulang password" size="49"></p>
<p>Tanggal Lahir</p>
<select name="tanggal">
<option>-Tanggal-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">29</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="Bulan">
<option>-bulan-</option>
<option value="januari">januari</option>
<option value="Februari">Februari</option>
<option value="Maret">Maret</option>
<option value="April">April</option>
<option value="Mei">Mei</option>
<option value="Juni">Juni</option>
<option value="Juli">Juli</option>
<option value="Agustus">Agustus</option>
<option value="September">September</option>
<option value="Oktober">Oktober</option>
<option value="november">November</option>
<option value="desember">Desember</option>
</select>
<select name="tahun">
<option>-Tahun-</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
<p><input type="radio" name="kelamin">Laki-laki<input type="radio" name="kelamin"> Perempuan</p>

<tr>
<td></td>
<td><font size=1>Mengapa saya perlu mengisinya?</font></td>
</tr>
</table>

<center><input type="button" value="Mendaftar"></center>
<div class="hr"><hr /></div>
<font size=3>Buat halaman <font color="black">untuk selebritis, grup musik, atau bisnis</font></font>
</div>
</div>

<div class="footer" align="left">
Facebook
</div>

</body>
</html>

Setelah selesai semua daftar-daftar yang ingin kita masukkan saya menggabungkan semuanya dalam sebuah menu.

HTML yang saya gunakan yaitu :
<!DOCTYPE html>
<html>
<head>
<title></title>
<body style="background-image: url(ini.jpg);">
<font face="bodoni MT bLACK" color="FF69B4"><u><h1 style="text-align: center;">MENU</h1></u></font>
<p><h2 style="text-align: center;">
<font face="comic sans MS">
<a href="about me.html" target="isi"> About me</a></h2></p>
<p><h2 style="text-align: center;">
<a href="biodata.html" target="isi">Biodata</a></h2></p>
<p><h2 style="text-align: center;">
<a href="krs.html" target="isi"> KRS</h2></p>
<p><h2 style="text-align: center;">
<a href="video.html" target="isi">Video</h2></p>
<marquee behavior="alternate"><img src="spongebob.gif"></marquee>
<audio autoplay="autoplay" ><source src="logo.mp3" type="audio/mpeg"></audio>
</body>
</head>
</html>
 Setelah penggabungan, maka jadilah blog kita dengan menggunakan HTML seperti pada gambar pertama :)

SEMOGA BERMANFAAT

2 komentar:

Langganan: Posting Komentar (Atom)