Popular Posts

Kamis, 12 April 2018

BSI PURWOKERTO – BELAJAR HTML (Part 4)

PERTEMUAN 5

       -   Seperti biasa, langkah awal adalah buka XAMPP, kemudian start Apache dan MySQL
       -   Buat folder dengan nama web2f di folder htdocs (C:\xampp\htdocs)
       -   Buat folder di dalam folder web2f dengan nama webadmin
       -   Buka notepad/++ kemudian ketikan script berikut :
<html>
<head>
                <title>Halaman login</title>
</head>
<body>
<div align="center">
<h2>LOGIN ADMIN</h2>
<table border="0" width="300">
<tr>
                <td>User name  </td>
                <td>:</td>
                <td><input type="text" name="username"></td><br>
</tr>
<tr>
                <td>Password </td>
                <td>:</td>
                <td><input type="password" name="psw"></td>
</tr>
<tr>
                <td colspan="3" align="center">
                                <input type="submit" value="LOGIN" name="blogin">
                </td>
</tr>
</table>
</div>
</body>
</html>
       -   Simpan di folder  webadmin dengan nama index.html.
       -   Jika berhasil maka tampilan di browsernya seperti ini :


       -   Buat file baru di dalam folder web2f dengan nama indeks.html

     -   Script nya seperti inii :

<html>
<head>
                <title>Beranda - Website 2F</title>
</head>
<body>
<table align="center" border="0 width="900">
                <tr>
                                <td height="90" bgcolor="blue" align="center" colspan="2">
                                <h1>SITUS RESMI KELAS 2F</h1>
                </td>
                </tr>
                <tr>
                                <td height="90" bgcolor="cyan" align="center" colspan="2">
                                <a href="indeks.html">BERANDA |</a>
                                <a href="profil.html"> PROFIL |</a>
                                <a href="galeri.html"> GALERI |</a>
                                </td>
                </tr>
                <tr height="100">
                                <td bgcolor="yellow" valign="top" width="700" >
                                <p align="justify">Selamat datang di website kelas kami</p></td>
                                <td bgcolor="red" align="left" height="300" width="300">
                                <h3>KOMENTAR</h3>
                                <p>Ini komentar baru</p>
                                <h3>Buku tamu</h3>
                                <p>Ini adalah buku tamu</p></td>
                </tr>
                <tr>
                                <td height="25" bgcolor="gray" align="center" width="300" colspan="2">
                                <p>Copyright 2018 - Situs Resmi 2f. Dibuat oleh :Fuad sae</p></td>
                </tr>
</table>
</body>
</html>

        -   Jika berhasil maka tampilan di browser nya seperti ini :


-          Seperti yang terlihat diatas terdapat navigation bar BERANDA, PROFIL dan GALERI. Gambar diatas merupakan halaman dari BERANDA, jika kita ingin menghubungkan navigation bar yang ada pada halaman website tersebut maka buatlah file baru kemudian sambungkan dengan tag <anchor> untuk saling menghubungkan satu sama lain. Untuk cara lebih simplenya silahkan copy kan source code yang ada pada halaman BERANDA dan taruh pada halaman baru, kemudian rubah beberapa record yang ada di dalamnya seperti title, isi menu dan record lain yang sekiranya perlu di rubah jika sudah di rubah silahkan simpan dengan file profil.html, berikut adalah source code profil yang sudah saya edit bagian title dan isi dari menu sebuah halaman :

-          Untuk tampilan menu profil, seperti gambar berikut :



       -   Script untuk tampilan diatas :
<html>
<head>
                <title>Beranda - Website 2F</title>
</head>
<body>
<table align="center" border="0 width="900">
                <tr>
                                <td height="90" bgcolor="blue" align="center" colspan="2">
                                <h1>Selamat datang di profil saya</h1>
                </td>
                </tr>
                <tr>
                                <td height="90" bgcolor="cyan" align="center" colspan="2">
                                <a href="indeks.html">BERANDA |</a>
                                <a href="profil.html"> PROFIL |</a>
                                <a href="galeri.html"> GALERI |</a>
                                </td>
                </tr>
                <tr height="100">
                                <td bgcolor="yellow" valign="top" width="700" >
                                <p align="justify">Nama saya adalah Fuad</p></td>
                                <td bgcolor="red" align="left" height="300" width="300">
                                <h3>KOMENTAR</h3>
                                <p>Ini komentar baru</p>
                                <h3>Buku tamu</h3>
                                <p>Ini adalah buku tamu</p></td>
                </tr>
                <tr>
                                <td height="25" bgcolor="gray" align="center" width="300" colspan="2">
                                <p>Copyright 2018 - Situs Resmi 2f. Dibuat oleh :Fuad sae</p></td>
                </tr>
</table>
</body>
</html>

       -   Tampilan untuk menu galeri seperti gambar berikut :


       -   Srcipt untuk tampilan di atas :

<html>
<head>
                <title>Beranda - Website 2F</title>
</head>
<body>
<table align="center" border="0 width="900">
                <tr>
                                <td height="90" bgcolor="blue" align="center" colspan="2">
                                <h1>GALERI</h1>
                </td>
                </tr>
                <tr>
                                <td height="90" bgcolor="cyan" align="center" colspan="2">
                                <a href="indeks.html">BERANDA |</a>
                                <a href="profil.html"> PROFIL |</a>
                                <a href="galeri.html"> GALERI |</a>
                                </td>
                </tr>
                <tr height="100">
                                <td bgcolor="yellow" valign="top" width="700" >
                                <p align="justify">Galeri saya</p></td>
                                <td bgcolor="red" align="left" height="300" width="300">
                                <h3>KOMENTAR</h3>
                                <p>Ini komentar baru</p>
                                <h3>Buku tamu</h3>
                                <p>Ini adalah buku tamu</p></td>
                </tr>
                <tr>
                                <td height="25" bgcolor="gray" align="center" width="300" colspan="2">
                                <p>Copyright 2018 - Situs Resmi 2f. Dibuat oleh :Fuad sae</p></td>
                </tr>
</table>
</body>
</html>

Demikian postingan mengenai HTML, pada pertemuan part 4

By di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)