Membuat Tampilan Layout Website Sederhana Dengan HTML dan CSS

Cerita Dosen, Sepriano - Pada kesempatan kali ini kita akan membahas Pemrograman Web 1 dimulai dari langkah awal hingga langkah akhir, kali ini admin akan sajikan pada Part 3, silahkan dibaca, dipahami dan dipraktikkan di laptop masing-masing.

Dalam dunia desain, Layout berbicara mengenai bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar. Sama seperti tipografi, terdapat sangat banyak elemen-elemen pada layout, yang tentunya tidak akan dapat dibahas pada bagian ini sendiri. Pembahasan layout secara menyeluruh akan memerlukan bukunya tersendiri. Kita akan hanya melihat elemen-elemen layout yang umumnya ditemukan pada dokumen web, dan bagaimana membuat elemen-elemen tersebut dengan HTML dan CSS.

Sebuah dokumen web umumnya memiliki elemen-elemen sebagai berikut:

Elemen Header

Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain dokumen. Biasanya elemen ini diisikan dengan logo website, menu-menu global (seperti login dan logout), maupun nama halaman yang sedang ditampilkan.

Elemen Navigation

Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web.

Elemen Sidebar

Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.

Elemen Konten

Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini.

Elemen Footer

Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke website lain.

Bagaimana kita dapat membangun layout seperti pada gambar di atas? Berdasarkan apa yang telah kita pelajari sejauh ini, tentunya anda telah dapat membayangkan apa yang harus dilakukan. Sederhananya: width dan height pada seluruh elemen, float pada sidebar dan content, serta clear pada footer. Perlu diingat juga bahwa pada dokumen web yang sebenarnya, properti height jarang digunakan karena tinggi elemen biasanya ditentukan oleh isi dari elemen itu sendiri.

Kita buat file css, beri nama style.css

.wrap{

background: blue; width: 100%; margin: 10px auto;

}

/*bagian header*/

.wrap .header{

background: green;

/*height: 50px;*/

padding: 2px 10px;

}

/*akhir header*/

/*bagian menu*/

.wrap .menu{

background: yellow;

overflow: hidden;

}

.wrap .menu ul{ padding: 0; margin: 0;

background: yellow;

}

.wrap .menu ul li{

float: left;

list-style-type: none;

padding: 10px;

}

/*akhir menu*/

.clear{

clear: both;

}

.badan{

height: 450px;

}

/*bagian sidebar*/

.wrap .badan .sidebar{

background: orange;

float: left; width: 25%; height: 100%;

}

/*akhir sidebar*/

.wrap .badan .content{ background: red; float: left; height: 100%; width: 75%;

}

.wrap .footer{ width: 100%; padding: 10px;

}

.form{

padding: 10px;

background: green;

font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans- serif;

font-size: 13px;

font-weight: 400;

}

.title{

font-size:26px; font-weight:bold; color:#666; padding:5px 0; margin-bottom:10px;

border-bottom:1px solid #ccc;

}

.fitem{

margin-bottom:5px;

}

.fitem label{

display:inline-block;

width:120px;

}

Buat file Pertemuan4.php

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Pemrograman 1</h1>

<p>Tutorial belajar membuat layout website sederhana</p>

</div>

<ul>

<li><a href="#">Javascript</a></li>

</div>

</ul>

sidebar

<ul>

<li><a href="#">Tutorial HTML dasar</a></li>

<li><a href="#">Tutorial CSS dasar</a></li>

<li><a href="#">Tutorial PHP dasar</a></li>

<li><a href="#">Tutorial JQuery dasar</a></li>

</div>

</ul>

<?php

if (empty($_GET['p'])){

$filename="homes";

} else {

$filename=$_GET['p'];

}

require $filename.".php";

</div>

footer

</div>

</body>

</html>

Dan akan ditampilkan seperti gambar di bawah ini

Fungsi File Indeks.php

Berfungsi sebagai penampil yang akan terbuka pertama kali di website ,yang mana file indeks.php ini berisi beberapa file-file seperti,file css,bootsrap , js dan home.php yang berisi file-file yang kita buat sebelunya sedangkan file css,bootstrap dan js yang akan memberikan style pada halaman website kita,di file indeks.php ini kita dapat memberi judul (title) pada halaman website kita dengan cara menganti:

<head>

icon" />

</head>

Pada tak title dalam “<title><?php echo "Admin - "; ?></title>” kita dapat

mengganti judul website kita menjadi sesuai keinginginan kita ,contoh

Menjadi

Selain itu ada variabel $baseURL :

$baseURL = 'http://'.$_SERVER['SERVER_NAME'].'/web1/';

Variabel ini berfungsi untuk mempermudah kita dalam memasukan file (css,bootsrap dan js ) sehingga kita tidak perlu menulis panjang source file nya

File base_template_topnav.php

File ini berfungsi untuk membuat topbar navigasi pada halaman website kita ,yang mana di topbar navigasi ini berisi logo website kita ,toggle sidebar,dropdown menu untuk login admin

Yang mana jika kita ingin memasukan logo pada halaman website kita dengan mengubah :

<img src="<?php echo $logo; ?>" height="50px" style="margin-top:-

25px;margin-bottom:-20px; margin-left:-20px;" alt="logo">

Menjadi :

<img src="<?php echo $logo; ?>images/mercu.jpg" height="50px" style="margin-top:-25px;margin-bottom:-20px; margin-left:-20px;" alt="logo">

Dengan syarat pada folder images terdapat gambar “mercu.jpg”

Dan kita dapat mengubah logo doropdown untuk menu login admin menjadi logo yang kita inginankan

Dengan cara mengubah:

<img class="nav-user-photo" width="40" height="40" src="<?php echo

$baseURL; ?>images/Icon.png" alt="" />

Menjadi :

<img class="nav-user-photo" width="40" height="40" src="<?php echo

$baseURL; ?>images/admin.png" alt="" />

Dengan syarat pada folder images terdapat gambar “admin.png”

Selain itu terdapat kode :

<span class="sr-only">Toggle sidebar</span>

</button>

Kode ini untuk membuat toogle sidebar agar web kita menjadi lebih responsive

Kemudian terdapat script:

Script ini berfungsi untuk membuat navigasi button untuk menu admin yang mana kita dapat mengubah warna dari navigasi button nya menjadi warna yang kita suka dengan mengubah nama class pada script :

<li class="light-blue dropdown-modal"> //warna biru

Menjadi

<li class="red dropdown-modal"> // warna merah

File base_template_foother.php

File ini berfungsi untuk membuat tampilan foother (tampilan bawah yang ada di website)

Kita bisa mengubah isi tampilan foother nya menjadi yang kita inginkan,dengan mengubah script di class foother

</span>

Menjadi

</span>

Kita juga bisa mengubah warna tulisan Klinik Medika dari waran biru menjadi warna merah dengan mengganti nama class=”blue bolder” menjadi class=”red bolder” maka tulisan nya akan menjadi warna merah

Pada script dibawah ini berfungsi untuk menampilkan logo twitter,facebook,dan kotak orange

Yang mana kita bisa mengisi link dengan mengganti isi href=”#” menjadi ke link yang kita inginkan misal href=” https://www.twitter.com”

</a>

150"></i>

</a>

<i class="ace-icon fa fa-facebook-square text-primary bigger-

</a>

</span>

File Menu.PHP

File Menu.php berfungsi untuk membuat menu side bar yang ada di samping website,di dalam script ini kita bisa mengubah isi menu yang ada sesuai dengan yang kita inginkan dan kita butuhkan,dibagian atas website yang kita buat ada sidebar-shortcut, yang mana kita bisa menambah sidebar-shortcut tersebut sesuai yang kita inginkan dan mengubah warna dan tampilanya dengan cara:

large">

<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-

</button>

</button>

</button>

</button>

</div>

Kita ubah menjadi

Jika kita ubah menjadi :

<button class="btn btn-danger"> // maka shortcut yang kita buat akan menjadi warna merah

Jika kita mengubah :

<i class="ace-icon fa fa-penci"></i> // tampilan shortcut adalah logo pencil

Menjadi :

<i class="ace-icon fa fa-config"></i> // maka shortcut yang kita buat akan menjadi logo pengaturan

Kemudian didalam script ini juga membuat sub menu,yang mana kita bisa menambah submenu sesuai dengan yang kita inginkan dengan cara mengubah

</li>

<span class="menu-text"> Sub Sub Menu

</span>

</a>

</li>

</ul>

</li>

</ul>

Jika kita ingin menambah sub sub menu menjadi ada 2 maka kita hanya tinggal menambah script menjadi :

</li>

</li>

</ul

Maka ketika kita klik sub sub menu maka akan tampil 2 sub sub menu,kita bisa menambahkan sesuai dengan kebutuhan kita

File Home.PHP

File ini berfungsi untuk menampilkan isi konten yang akan kita buat,dan dari sisi admin berdasarkan script yang ada kita dapat melihat total jamaah ,total marketing dan dana jamaah di tap kelola halaman website,dan terdapat alert yang berfungsi untuk menampilkan peringatan dan ucapan selamat datang,

Jika kita kita ingin mengubah alert tersebut menjadi berwarna hijau maka kita cukup mengubah di scirpt:

Menjadi

Maka tampilan alert tersebut akan berubah menjadi warna hijau

Jika kita ingin mengedit isi alert nya maka kita cukup mengubah : Selamat datang

<b>Wawan Gunawan</b>

</strong>,<br><br> Berusaha dan berdoa

Menjadi isi teks sesuai yang kita inginkan

Jika kita ingin mengubah logo laporan yang ada pada tap kelola halaman website maka kita ubah pada script:

</div>

<div class="infobox-content">Total Jemaah</div>

</div>

Jika kita ubah class:

Menjadi :

Maka akan keluar ogo seperti user namun dengan user yang lebih dari satu sama seperti pada tampilan laporan logo total marketing, jadi kita bisa mengubah dan menambah kan logo laporan tersebut sesuai dengan kebutuhan yang kita inginkan

Pada intinya pada file ini kita memasukan semua yang dibuat sebelumnya :

base_template_topnav.php menu.php base_template_footer.php

yang mana file home.php ini yang akan di masukan ke dalam file indeks.php sehingga kita bisa melihat semua tampilan website yang kita buat.