Selamat pagi blogers semua, khususnya para pecinta program HTML dan PHP.Sudah lama sekali rasanya saya tidak belajar lagi dan menuangkannya di blog saya.Tanpa bosan saya akan berbagi lagi cara membuat web sederhana di HTML. Dan sebelumnya saya berterima kasih kepada E-book "Mastering Kode HTML" yang selalu menjadi inspirasi ketika saya belajar. Selalu di ulang dan diulang lagi, apa itu HTML?Pengertian HTMLSeperti yang telah dijelaskan sebelumnya bahwa HTML(Hyper Text Markup Language) adalah simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. Tag-tag HTML selalu diawali dengan <x> dan diakhiri dengan </x> dimana x tag HTML seperti b, i, u dan sebagainya. Namun ada juga tag yang tidak diakhiri dengan tanda </x> seperti tag <br>, <input> dan lainnya.
Sebuah halaman website akan diapit oleh tag <html>��</html>. File-file HTML selalu berakhiran dengan ekstensi *.htm atau *.html. Jadi jika anda mengetik sebuah naskah dan menyimpannya dengan ekstensi *.html maka anda membuat file yang berformat HTML.Ok, setelah saya berikan sedikit penjelasan mengenai pengertian HTML yu langsung saja kita membuat website pribadi yang super sederhana ini.Langkah-langkah pembuatannya :1. Membuat Halaman Depan [Index.php]Anda bisa menggunakan file dengan ekstensi .html, sebenarnya menurut saya sama saja. Untuk sementara saya menggunakan .php. Oke contoh scripnya seperti di bawah ini:<html>
<head>
<title>Anggun Website</title>
</head>
<body bgcolor="#FF99FF">
<table border="1" style="border-collapse: collapse" width="100%" cellpadding="8" bordercolor="black">
<tr>
<td width="20%">
<!-- ini tabel foto -->
<table border="1" style="border-collapse: collapse" width="100%" cellpadding="8" bordercolor="black">
<tr>
<td align="center"><img border="1" height="180 " width="150" src=""></td>
</tr>
</table>
<p></p> <!-- untuk memberi jarak -->
<!-- ini tabel menu -->
<table border="1" style="border-collapse: collapse" width="100%" cellpadding="8" bordercolor="black">
<tr>
<td>Ini nanti untuk link menu</td>
</tr>
</table>
</td>
<!-- ini untuk kolom 2 tabel utama -->
<td valign="top"><p align="center"><b>SELAMAT DATANG</b></p></td>
</tr>
</table>
</body>
</html>Dan hasilnya :Itu belum selesai, karena kita belum mengisi bagian-bagian yang saya tulis di atas.Kita ganti bagian-bagian yang terbentuk menjadi seperti di bawah ini :<html>
<head>
<title>Anggun Website</title>
</head>
<body bgcolor="#FF99FF">
<font face="verdana">
<table border="0" style="border-collapse: collapse" width="100%" cellpadding="8" bordercolor="black">
<tr>
<td width="20%">
<!-- ini tabel foto -->
<table border="0" style="border-collapse: collapse" width="100%" cellpadding="8" bordercolor="black">
<tr>
<td align="center"><img border="1" height="150" width="120" src="img/karir.jpg"></td>
</tr>
</table>
<p><hr></p> <!-- untuk memberi jarak -->
<!-- ini tabel menu -->
<table border="0" style="border-collapse: collapse" width="100%" cellpadding="8" bordercolor="black">
<tr>
<td><font size="2">
<ul>
<li><a href="profil.php">Profil</a></li>
<li><a href="kegiatan.php">Kegiatan</a></li>
<li><a href="foto.php">Foto-foto</a></li>
<li><a href="http://anggun43ana.blogspot.com" target="_blank">Blog Saya</a></li>
<li><a href="mailto: anggunpatriana@yahoo.com">Email saya</a></li>
</ul>
</td>
</tr>
</table>
</td>
<!-- ini untuk kolom 2 tabel utama -->
<td valign="top">
<p align="center"><font size="4"><b>SELAMAT DATANG DI WEBSITE ANGGUN PATRIANA</b></font></p>
<p><font size="2">Saya ucapkan terima kasih atas kunjungan anda ke website
saya. Pada website ini anda dapat melihat profil data diri saya dan kegiatan-kegiatan<br>
yang saya lakukan. Di bawah ini adalah sebuah kata-kata motivasi buat anda yang sedang merasakan kehilangan
dan belajar mengikhlaskan.</font></p>
<p><b>...: Belajar Mengikhlaskan :...</b></p>
<p><font size="2">
<i>Jangan mempertahankan sesuatu hanya karena<br>
kamu ingin memilikinya atau<br>
karena kamu tidak ingin orang lain memilikinya<br><br>
kita kehilangan banyak hal di sepanjang masa hidup<br>
kehilangan tersebut pada awalnya tampak seperti tidak adil dan merisaukan<br>
tapi itu terjadi supaya ada perubahan positif yang terjadi dalam hidup kita<br><br>
berkeras mempertahankannya tidak membuat kita atau dunia menjadi lebih baik<br>
mungkin memang pedih pada awalnya<br>
mungkin butuh bulan berbilang tahun untuk menyeka bening yg terkadang masih mengalir<br><br>
namun kebahagiaan memang tak selamanya...<br>
dan kesedihan tak kan mengembalikan apa yang telah berlalu..<br><br>
kita semua harus memutuskan kapan suatu hal,<br>
atau kapan seseorang masuk dalam hidup kita,<br>
atau kapan saatnya kita lebih baik bersama yang lain...<br>
Pada saatnya kita harus mengumpulkan KEBERANIAN untuk melepasnya...<br><br>
Semoga kita bisa menjadi orang yang ikhlas yg masih bisa memberikan SENYUM terindah kita pada dunia.. :)<br>
</i></font></p>
</td>
</tr>
</table>
</body>
</html>Hasilnya sudah menjadi halaman sempurna bukan?2. Membuat Halaman Profil [profil.php]<html>
<head>
<title>Profil Anggun Patriana</title>
</head>
<body bgcolor="#FF99FF">
<font face="verdana">
<p align="center">
<table border="0" cellpadding="8" bordercolor="black">
<tr>
<td colspan="2" align="center"><b>DATA PRIBADI</b><hr></td>
</tr>
<tr>
<td align="right"><font size="2"><b>Nama: </b></td>
<td><font size="2">Anggun Patriana</td>
</tr>
<td align="right"><font size="2"><b>Tempat/Taggal lahir: </b></td>
<td><font size="2">Bekasi, 07 April 1990</td>
</tr>
<td align="right"><font size="2"><b>Agama: </b></td>
<td><font size="2">Islam</td>
</tr>
<tr>
<td align="right"><font size="2"><b>Gol. Darah: </b></td>
<td><font size="2">O</b></td>
</tr>
<tr>
<td align="right"><font size="2"><b>Pekerjaan: </b></td>
<td><font size="2">Pegawai BUMN</td>
</tr>
<tr>
<td align="right"><font size="2"><b>Hobi: </b></td>
<td><font size="2">Musik</td>
</tr>
<tr>
<td colspan="2" align="center"><a href="index.php">Kembali ke halaman
utama</a></td>
</tr>
</table>
</font>
</body>
</html>3. Membuat Halaman Kegiatan [kegiatan.php]<html>
<head>
<title>Kegiatan Anggun Patriana</title>
</head>
<body bgcolor="#FF99FF">
<font face="verdana">
<p align="center"><font size="4"><b>Kegiatan Anggun Patriana</b><hr></p>
<center>
<table border="1" style="border-collapse: collapse" cellpadding="8"
bordercolor="black" width="80%">
<tr>
<td><img src="img/hari_kesaktian_pancasila.jpg" width="250" height="150"></td>
<td bgcolor="white"><font size="2"><p><b>Kegiatan Upacara Kesaktian Pancasila</b></p>Setiap tanggal 1 Oktober Asabri memperingati hari kesaktian pancasila.Makin banyak hal yang bisa kita lakukan bagi bangsa ini untuk bisa menjaga kesaktian pancasila. Semua persoalan bangsa ini saya rasa akan bisa lepas jika kita memaknai dan mengimplementasikan dengan dalam butir-butir pancasila. Semua sila-sila dalam pancasila menggambarkan bagaimana karakter kita yang sesungguhnya sebagai bangsa Indonesia. Semoga nilai-nilai pancasila tetap terpatri dalam diri kita.</font></td>
</tr>
<tr>
<td align="center" colspan="2"><a href="index.php">Kembali ke halaman
utama</a></td>
</tr>
</table>
</center>
</font>
</body>
</html>4. Membuat Halaman Galery Foto [foto.php]<html>Copylah sebuah file gambar ke direktori C:\[Nama_Project_Anda]\img. Gambar ini yang akan menampilkan/mewakili kegiatan yang kita lakukan. Silahkan modifikasi kode dibawah ini sesuka anda. Karena saya yakin anda sekarang sudah paham dasar pembuatan website.
<head>
<title>Foto-Foto</title>
</head>
<body bgcolor="#FF99FF">
<font face="verdana">
<p align="center"><font size="4"><b>Foto-foto koleksi Anggun Patriana</b></font><hr></p>
<center>
<table border="1" style="border-collapse: collapse" width="80%" cellpadding="8"
bordercolor="black" bgcolor="white">
<tr>
<td align="center"><img src="img/fotoku.jpg" height="160" width="235"></td>
<td align="center"><img src="img/porseni2013.jpg" height="160" width="235"></td>
</tr>
<tr>
<td align="center"><font size="2">Anggun & family</font></td>
<td align="center"><font size="2">Porseni 2013 Bersama<br>Mentri BUMN Dahlan Iskan</font></td>
</table>
<p></p>
<table border="1" style="border-collapse: collapse" width="80%" cellpadding="8"
bordercolor="black" bgcolor="white">
<tr>
<td align="center"><img src="img/puncak.jpg" height="160" width="235"></td>
<td align="center"><img src="img/olrg.jpg" height="160" width="235"></td>
</tr>
<tr>
<td align="center"><font size="2">Puncak Bogor</font></td>
<td align="center"><font size="2">Jumat Olahraga</font></td>
</table>
<p><a href="index.php">Kembali ke halaman utama</a></p>
</center>
</font>
</body>
</html>
5. Membuat Link Blog Saya<li><a href="http://anggun43ana.blogspot.com" target="_blank">Blog Saya</a></li>6. Membuat Link Email Saya<li><a href="mailto: anggunpatriana@yahoo.com">Email saya</a></li>Bagaimana? Mudah bukan? Sok atuh mangga lanjutkan dan modifikasi sesuai keinginan anda. Selamat mencoba :)
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
