Laporan Praktikum Pemrograman Web 1 Modul 1 (Pengenalan HTML)

Nama : Muhammad Fahmi

NIM : 20160910131

Kelas : SI 2015 C

1. TUGAS

Membuat design web dengan tag tabel dengan design seperti ini dan menampilkan informasi riwayat hidup

<html>
<head>
<title> M Fahmi </title>
</head>
<body>
<table border=”2″ color=”black” align=”center” width=”100%”>
<tr>
    <td colspan=”3″ align=”center”><img src=”fahmi.jpg” height=”160″ width=”1320″></td>
</tr>
<tr>
    <td width=”15%” valign=”top” bgcolor=”#d0d3d4″>
        <ul type=”disc”>
            <li><a href=”tugas.html” target=”main”> Home </a></li>
            <li><a href=”stories.html” target=”blank”> Stories </a></li>
            <li><a href=”Videos.html” target=”blank”> Videos </a></li>
        </ul>
    </td>
    <td width=”50%”><center>
        <h3> UNIVERSITAS KUNINGAN </h3>
        <h3> Fakultas Ilmu Komputer </h3>
        <h3> Program Studi Sistem Informasi Jenjang S1 </h3><br><br>
    </center>
    <pre>
    NIM                   : 20160910131 <br>
    Nama                  : Muhammad Fahmi
    Tempat, Tanggal Lahir : Kuningan, 06 Desember 1992 <br>
    <br>
    <b> Pendidikan </b>
    <ol>
        <blockquote><li> SD : SDN 2 Windusengkahan </li></blockquote>
        <blockquote><li> SMP : SMPN 1 Kuningan </li></blockquote>
        <blockquote><li> SMA : SMKN 3 Kuningan </li></blockquote>
    </ol>
    </pre>
    </td>
    <td width=”15%” valign=”top” bgcolor=”#d0d3d4″>
        <ul type=”disc”>
            <li><a href=”tag.html” target=”main”> Tags </a></li>
            <li><a href=”kat.html” target=”blank”> Kategories </a></li>
        </ul>
    </td>
</tr>
<tr>
    <td colspan=”3″ align=”center” bgcolor=”#d0d3d4″> ©Copyright : Muhammad Fahmi </td>
</tr>
</table>
</body>
</html>

Lalu save dengan nama tugas.html

Selain script diatas, dibutuhkan pula file foto yang akan digunakan sebagai header, dalam hal ini kita gunakan file awanda.png. Maka file-file yang kita butuhkan yaitu file tugas.html dan file foto fahmi.jpg

2. POST TEST

Membuat halaman web dengan tampilan seperti ini

1. Untuk membuat halaman web dengan tampilan seperti diatas, kita membutuhkan 4 file html, yaitu:
a. frameset, yang akan digunakan untuk menampilkan halaman web tersebut
b. header, yang akan digunakan untuk membuat dan mengatur header
c. menu, yang akan digunakan dalam pengaturan menu
d. main, yang digunakan untuk menampilkan isi dari halaman web tersebut
Serta 1 file foto yang akan kita gunakan sebagai logo. Lalu kemudian semua file tersebut disimpan dalam satu folder yang sama.
posttest 1

2. Script untuk frameset adalah:

<title> UNIKU </title>
<frameset rows=”31%,69%” border=”0″>
       <frame name=”header” src=”posttest_header.html”/>
       <frameset cols=”20%,80%”>
           <frame name=”menu” src=”posttest_menu.html”/>
           <frame name=”main” src=”posttest_main.html” />
       </frameset>
</frameset>

Lalu save dengan nama posttest_frameset.html

3. Script untuk header adalah:

<html>
<head>
<title> UNIKU </title>
</head>
<body>
<table border=”0″ align=”center” width=”100%”>
<tr>
   <td width=”20%” align=”center”><img src=”uniku.png” height=”150″ width=”150″></td>
   <td width=”80%” align=”center”><h1>UNIVERSITAS KUNINGAN</h1>
   <h2>FAKULTAS ILMU KOMPUTER</h2>
   Kampus 1 : Jln Raya Tjut Nyak Dhien No.36 Kuningan</td>
</tr>
</table>
<hr size=”4″ color=”black”>
</body>
</html>

Lalu save dengan nama posttest_header.html

4. Script untuk menu adalah:

<html>
<head>
<title> UNIKU </title>
</head>
<body>
<ol type=”1″>
   <li> Home </li>
   <li> Fakultas </li>
       <ul type=”disc”>
           <li title=”Fakultas Ilmu Komputer”>FKOM</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”>FH</li>
           <li title=”Pendidikan Guru Sekolah Dasar”>PGSD</li>
       </ul>
   <li> Fasilitas </li>
</ol>
</body>
</html>

Lalu save dengan nama posttest_menu.html

5. Script untuk main adalah:

<html>
<head>
<title> UNIKU </title>
</head>
<body>
<center><b> Data Repository Software </b>
<table border=”1″ align=”center” width=”45%”>
<tr align=”center”>
   <td> Nomor </td>
   <td> Nama Software </td>
   <td> Link Download </td>
</tr>
<tr align=”center”>
   <td> 1 </td>
   <td> SO W7 </td>
   <td><a href=”posttestdl1.html” target=”blank”> Download </a></td>
</tr>
<tr align=”center”>
   <td> 2 </td>
   <td> SO W8 </td>
   <td><a href=”posttestdl2.html” target=”blank”> Download </a></td>
</tr>
<tr align=”center”>
   <td> 3 </td>
   <td> Office 2010 </td>
   <td><a href=”posttestdl3.html” target=”blank”> Download </a></td>
</tr>
<tr align=”center”>
   <td colspan=”3″> ©Copyright : FKOM UNIKU </td>
</tr>
</table>
</body>
</html>

Lalu save dengan nama posttest_main.html

6. Maka tampilannya akan seperti ini

Laporan Praktikum M FAHMI

Cari Blog Ini