Membuat Halaman Web Sederhana
Kali ini saya akan posting cara membuat halaman web sederhana, seperti gambar di bawah.
Sebelum
membuat halaman web, aplikasi yang utama anda butuhkan adalah aplikasi
untuk mengedit tag HTML, seperti notepad, notepad++, atau sublime. Nah
untuk tutorial kali ini saya menggunakan aplikasi sublime karena lebih
mudah dari pada aplikasi lainnya.
Langsung saja, yang pertama harus kita lakukan adalah membuat halaman web "welcome to bunga's web"
Copy paste kode di bawah ini pada aplikasi sublime dan save dengan nama "logo.html"
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<audio src="song1.mp3" autoplay="autoplay" hidden="hidden"></audio>
<body style="background-image: url(gambar4.jpg);">
<h1 style="text-align: center;">
<font color="white">
<font size="7">
<font
face="this night"> WELCOME TO BUNGA'S WEB
</font></font></font></h1>
<marquee behavior="alternate"><img src="panda.gif"></marquee>
</body>
</html>
Selanjutnya membuat halaman "menu". Copy paste pada sublime dan save dengan nama "menu.html"
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="background-image: url(gambar3.jpg);">
<u><h1 style="text-align: center;">MENU</h1></u>
<p><h2 style="text-align: center;">
<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="video.html" target="isi">Video</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="login.html" target="isi">LOGIN</h2></p>
</body>
</html>
Kemudian halaman "isi" save dengan nama "welcome.html"

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="background-image: url(gambar2.jpg);">
<center>
<img src="foto.jpg" width="300" height="400">
<b><h3><table
width=80% align=center><FONT
COLOR="black"></h3></b>
<tr>
<td ><font face="castellar">NAMA</font></td>
<td><font face="castellar">: BUNGA APRILIA</font></td>
</tr>
<tr>
<td><font face="castellar">TEMPAT LAHIR</font></td>
<td><font face="castellar">: PANGKEP</font></td>
</tr>
<tr>
<td><font face="castellar">TANGGAL LAHIR</font></td>
<td><font face="castellar">: 21 APRIL 1998</font></td>
</tr>
<tr>
<td><font face="castellar">AGAMA</font></td>
<td><font face="castellar">: ISLAM</font></td>
</tr>
<tr>
<td><font face="castellar">ALAMAT</font></td>
<td><font face="castellar">: JL. TAMANGAPA
RAYA 3 PESONA PRIMA GRIYA</font></td>
</tr>
<tr>
<td><font face="castellar">STATUS</font></td>
<td><font face="castellar">: MAHASISWA
UNIVERSITAS HASANUDDIN</font></td>
</tr>
</table>
</body>
</html>
Untuk menambahkan video, kodenya seperti di bawah
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="background-image: url(gambar2.jpg);">
<center>
<video src="ppap.mp4" autoplay="autoplay"></video></center>
</body>
</html>
Untuk menambahkan KRS

<!DOCTYPE html>
<html>
<head>
<title>KRS</title>
</head>
<body>
<table>
<tr>
<td rowspan="2">
</td>
<td>
<font size="10">Universitas Hassanudin</font>
</td>
</tr>
<tr>
<td align="top">
<b>Fakultas Matematika dan Ilmu Peng. 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">
BUNGA APRILIA
</td>
<td rowspan="4" align="right">
</td>
</tr>
<tr>
<td>
NIM
</td>
<td>
:
</td>
<td>
H12116020
</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">
<caption></caption>
<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>
Untuk membuat form login

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body background="gambar5.jpg">
<table>
<tr>
<td>
<img src="gambar6.jpg">
</td>
<td>
<h1>Login</h1>
<input type="text" name="name" placeholder="email">
<input type="text" name="password" placeholder="password">
<input type="submit" value="masuk">
</td>
</tr>
<tr>
<td>
<img src="gambar5.jpg">
</td>
<td>
<h1>Daftar Di sini</h1>
<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>
<p><input type="submit" value="Kirim" style="background-color: blue;"></p>
</td>
</tr>
</table>
</body>
</html>
Setelah ketiga langkah di atas, selanjutnya gabungkan ketiganya dengan tag frameset lalu simpan dengan nama "indeks.htlm"
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<frameset rows="30%,65%" border="0">
<frame name="atas" src="logo.html"></frame>
<frameset cols="20%,60%">
<frame name="menu" src="menu.html"></frame>
<frame name="isi" src="welcome.html"></frame>
</frameset>
</frameset>
</html>
Perlu diperhatikan juga bahwa gambar, audio, maupun video yang digunakan
untuk membuat halaman web ini harus ditempatkan dalam satu folder.