Tampilan web sederhana dengan kearifan lokal. Dalam sebuah web tentunya tampilan/layout itu sangat di perhitungkan karena itu menjadi daya tarik tersendiri karena dengan adanya tampilan tentunya para pembaca lebih tertarik. Namun seringkali para blogger/pembuat web menggunakan tema yang sudah ada di sana alangkah lebih bagusnya tema/tampilan itu dibuat sendiri sesuai dengan keinginan.
Berikut contoh dalam pembuatan layout untuk pemula dengan format html karena dengan format html lebih mudah di pahami dengan apk Sublime text 3 dan browser yang ada pada perangkat ada.Berikut cara membuat tampilan web sederhana dengan kearifan lokal:
1. Membuat folder
Untuk yang pertama buatlah folder pada File Exploler dengan nama bebas (saya membuat folder layout).
2. Buka sublime text3 dan buat file html
Kemudian buka sublime text3 dan buat file baru dan masukkan pada folder yang telah dibuat dan isikan dengan sintaks html dengan cara ketik <html> lalu enter
<!DOCTYPE html> <html> <head> <title></title> </head> <body> (isikan di sini) </body> </html>
3. Buat file sebanyak 3 file
Yaitu layout.html, profil.html, dan isi.html
dengan coding/sintaks di dalam seperti berikut:
a. Buat navbar atas yang digunakan untuk judul:
<body bgcolor="#FFF"> <table bgcolor="#000000" border="0" width="90%" align="center"> <tr > <td bgcolor="#FF0000" width="12%" align="center" height="75"><a href="Untitled-6.png"> <img src="Untitled-6.png" width="82" height="82"> </td> <td bgcolor="#CCCCCC" width="77%" align="center"> <h1>Percobaan WEB Pertama <br>saya : Muhammad Anton Sabilal Huda</h1> </td> <td bgcolor="#FF0000" width="12%" align="center"><a href="RPL.png"> <img src="RPL.png" width="82" height="82"> </td> </tr>
b. Buat header berjalan
<tr> <td bgcolor="#0000FF" height="50" colspan="3" align="center"> <marquee>Selamat Datang di WEB saya</marquee> </td> </tr>
c. Membuat navbar kiri
<tr> <td bgcolor="#CCCCCC" width="12%" height="400" align="left"> <ul> <li><a href="layout.html"> Home </a></li> <li><a href="profil.html"> Profil </a></li> <li><a href="isi.html"> Isi </a></li> </ul> </td>
d. Membuat bagian isi yang akan di isikan konten pada web.
<td bgcolor="#00FF00" width="100%" align="center" background="images.png"> </td>
e. Membuat navbar kanan
<td width="18%" align="center"> </td> </tr>
f. Membuat header penutup berjalan.
<tr> <td bgcolor="#0000FF" height="61" colspan="3" align="center"><marquee> Terima Kasih-'.-'.-'.-'.-Matur Suwun-'.-'.-'.-'.-Thanks-'.-'.-'.-'.-Telah Mengunjungi WEB Saya </marquee></td> </tr> </table> </body>
isikan semua itu pada file pada semua file yang telah di buat dan bila ingin memasukkan gambar masukkan seperti di atas yaitu dengan menggunakan sintaks:
<img src="namagambar.format">
4. Layout sederhana dengan kearifan lokal selesai di buat
Dari sintaks di atas akan tampil seperti berikut:
Dari tutorial membuat tampilan web sederhana dengan kearifan lokal diatas kita bisa membuat layout sendiri walau tidak sebanding dengan yang lain namun kita memiliki kepuasan tersendiri dalam pembuatan layout.
Leave a Reply