[rpmadani.com] Belajar membuat layout sederhana mengunakan CSS, ini merupakan cara sederhana bai pemula untuk memahami dasar HTML dan CSS.
Pada tutorial ini saya mengambil materi dari modul kursus yang saya buat pada paket kursus pemograman wab master di rumah pintar madani.
Jika sobat ingin belajar bersama saya langsung, silahkan bergabung di rumah pintar madnai untuk mengikuti kursus regulernya,
Jika ada pertanyaan dan masukkan silahak tulis dikolom komerntar. Selamat belajar online....!!!
A. Mengenal Layout
Layout adalah tata letak dari suatu elemen desain yang di tempatkan dalam sebuah bidang menggunakan sebuah media yang sebelumnya sudah di konsep terlebih dahulu,.
Sederhananya layout di ibaratkan sebagai rancangan awal yang akan digunakan sebagai dasar suatu website. Secara umum layout sebuah website terdiri dari Header, Menu, Content, Footer.
Berikut beberapa contoh layout yang sering digunkan pada sebuah website :
Dalam penerapanya sebuah website ada yang memiliki satu kolom content, dua kolom, dan tiga kolom content, sudah tidak sabar ingin mencoba membuatnya ?
Mari kita mulai langsung membuat Layout Website dengan 2 Kolom, dimana kolom pertama sebagai menu dan kolom ke dua sebagai isi content dari website.
B.Membuat Layout Sederhana dengan CSS
Ikuti langkah-langkah berikut ini satu persatu, dan pastikan tidak ada kesalahan penulisan. Kita akan membuat layout dengan scipt PHP dan CSS.
Buatlah Folder Baru dengan nama "belajar" didalam folder htdocs anda, kemudian buat folder dengan nama "1" sebagai tanda bahwa ini adalah latihan 1 (satu) dari pembelajran kita.
Hasil Akhirnya akan seperti gambar di bawah ini, fokuslah pada lingkaran merah dan isi di dalam folder 1 tersebut. Di dalam folder 1 berisi 2 folder dengan nama "css" dan "foto" di tambah 5 File PHP.
Sebelum melanjutkan sebaiknya buat terlebih dahulu rangkaian folder di bawah ini, agar lebih mudah.
Kemudian tulislah script CSS berikut ini, lalu simpan script CSS tersebut dengan nama style.css, dan simpan di dalam folder CSS.
#header {
background-color:#3F72A5;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:500px;
width:150px;
float:left;
padding:15px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:#3F72A5;
color:white;
clear:both;
text-align:center;
padding:5px;
}
Tulis Script PHP berikut ini dan simpan dengan nama index.php
<!DOCTYPE html>
<html>
<head>
<title> Belajar Layout </title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="header">
<?php include "header.php" ?>
</div>
<div id="nav">
<a href="?page=profil"> Profil <br> </a>
<a href="?page=biodata"> Biodata <br> </a>
Foto <br>
Moto Hidup
</div>
<div id="section">
<?php include "content.php" ?>
</div>
<div id="footer">
Karya Saya : Fulan Tarigan | Alamat : Bukit Cendol Gg.Flash Disk
</div>
</body>
</html>
Tulis Script PHP berikut ini dan simpan dengan nama header.php
<h1>Biodata : </h1>
Tulis Script PHP berikut ini dan simpan dengan nama content.php
<?php
if($_GET['page'] == 'profil'){
include "profil.php";
}
elseif($_GET['page'] == 'biodata'){
include "biodata.php";
}
?>
Tulis Script PHP berikut ini dan simpan dengan nama profil.php
<!DOCTYPE html>
<html>
<h2>Profil</h2>
<img src="foto/fulan.jpg" style="height=232px" width="200px"><br>
Nama Saya Fulan Tarigan ..... Bla Bla Bla....
</html>
Tulis Script PHP berikut ini dan simpan dengan nama biodata.php
<!DOCTYPE html>
<html>
<h2>Biodata</h2>
<p>Berikut Ini Biodata Saya :</p>
</html>
Buat Folder baru dengan nama foto, jika sudah di buat silahkan isi dengan sebuah gambar dengan nama fulan.jpg.
Setelah anda mengisi foto pastikan didalam folder Layout anda memiliki struktur file seperti gamabr dibawah ini.
Jika sudah sesuai dengan gambar di atas, silahkan jalankan program melalui browser kesayangan anda dengan meng akses link berikut :
http://localhost/belajar/1
Demikian Pembelajarn membuat layout dengan CSS Sederhana, jika ada kendala silahkan tulis di kolom komentar.
Saya akan membantu teman-teman semua. semoga bermanfaat, dan hasil akhir nya akan tampak seperti gambar di bawah ini.
