Modul - Layout Halaman WEB Dengan CSS 01

MODUL KULIAH
E-COMMERCE
(PEMROGRAMAN CSS)
Tim Penyusun
Dosen Praktikum Komputer FEB - UDINUS
FAKULTAS EKONOMI DAN BISNIS

UNIVERSITAS DIAN NUSWANTORO
2020
DESAIN LAYOUT HALAMAN WEB DENGAN CSS
Layout web dasar yang sering kita temukan adalah seperti yang ada pada gambar Elemen-elemen
Layout pada Dokumen Web.
Contoh Layout - 01
Desain layout halaman secara umum/standarnya menggunakan DIV dan CLASS yang merupakan
menggabungkan HTML dan CSS. Komponen-komponen yang membagi halaman menjadi beberapa
bagian adalah terdiri dari width dan height pada seluruh elemen, float pada sidebar dan content,
serta clear pada footer. Properti height jarang digunakan karena tinggi elemen biasanya ditentukan
oleh isi dari elemen itu sendiri.
Untuk membuat layout seperti pada gambar Elemen-elemen Layout pada Dokumen Web, kita dapat
menggunakan kode HTML dan CSS berikut:
1. WRAPPER
Wrapper disini adalah sebagai bungkus dari antar muka desain, maksudnya adalah dengan wrapper
kita bisa mengecilkan lebar pixelnya.
#wrapper {
width: 800px;
margin: 0 auto;
}
E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 2

2. HEADER
Header merupakan kepala dari layout web atau biasanya ditempatkan untuk logo website
#header {
float: left;
width: 100%;
height: 150px;
background-color: red;
}
3. SIDEBAR
Sidebar disini merupakan desain samping web, posisi sidebar bisa kiri dan kanan
#sidebar {
float: right;
width: 30%;
height: 300px;
background-color: green;
}
4. CONTENT
Content biasanya mengacu pada isi website, biasanya terletak pada tengah
#content {
float: left;
width: 70%;
height: 300px;
background-color: blue;
}
5. FOOTER
Footer adalah layout web yang terletak pada desain bawah setelah Content dan Sidebar
#footer {
float: left;
width: 100%;
height: 100px;
background-color: yellow;
}
Contoh Script HTML Layout - 01

<html>
<head>
<title>Membuat Layout Web Dengan CSS</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>#header</h1>
<p>Ini adalah bagian HEADER. Biasanya terdapat LOGO, MENU, dan sebagainya.</p>
</div>
<div id="sidebar">
<h1>#sidebar</h1>
<p>Ini adalah bagian SIDEBAR. Biasanya terdapat MENU, DAFTAR KONTEN, dan
sebagainya.</p>
</div>
<div id="content">
<h1>#body</h1>
<p>Ini adalah bagian BODY yang merupakan bagian inti dari website.</p>
</div>
<div id="footer">
<h1>#footer</h1>
<p>Ini adalah bagian FOOTER. Biasanya terdapat HAK CIPTA, MENU, dan
sebagainya.</p>
</div>
</div>
</body>
</html>
Contoh Layout - 02
Contoh Script HTML & CSS Layout - 02
<!DOCTYPE html>
<html>
<head>
<title>Layout Dasar Dokumen Web</title>
<style type="text/css">
body {
width: 960px;
}
header, nav, aside, section, footer {

background: #14BCE6;
border: 1px solid white;
color: white;
font-size: 2em;
font-variant: small-caps;
text-align: center;
}

header, nav, footer {
width: 100%;
}
header, footer {
height: 100px;
}
nav {
height: 50px;
}
aside {
float: left;
height: 250px;
width: 29.5%;
}
section#content {
float: right;
height: 250px;
width: 70%;
}
footer {
clear: both;
}
</style>
</head>
<body>
<header>Header</header>
<nav>Navigation</nav>
<aside>Sidebar</aside> <section id="content">Content</section>
<footer>Footer</footer>
</body>
</html>

Contoh Layout - 03

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrap">
<div class="header">
<h1>Malas Ngoding</h1>
<p>Tutorial belajar membuat layout website sederhana</p>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</div>
<div class="badan">
<div class="sidebar">
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>
</ul>
</div>
<div class="content">
content
</div>
</div>
<div class="clear"></div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
Contoh Script CSS Layout - 03

.wrap{
background: blue;
width: 900px;
margin: 10px auto;
}
/*bagian header*/
.wrap .header{
background: green;
/*height: 50px;*/
padding: 2px 10px;
}
/*akhir header*/
/*bagian menu*/
.wrap .menu{
background: yellow;
}
.wrap .menu ul{

padding: 0;
margin: 0;
background: yellow;
overflow: hidden;
}
.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;
}
Contoh Layout – 04

<HTML>
<TITLE> Desain layout </TITLE>
<link type="text/css" rel="stylesheet" href="style.css">
<BODY>
<div id="wrapper" >WRAPPER
<div id="nama" > NAMA </div>
<div id="logo"> LOGO </div>
<div id="menu" > MENU </div>
<div id="kiri" > KIRI </div>
<div id="konten" > KONTEN </div>
<div id="kanan" > KANAN </div>
<div id="kanan"> KANAN </div>
<div id="bawah"> BAWAH </div>
</div>
</BODY>
</HTML>
Contoh Script CSS Layout - 04

body {
background-color:gray;
font-size:20px;
text-align:center; }
#wrapper {
background-color:black;
width:990px; }
#nama {
margin-bottom:5px;
padding:15px;
background-color:green;}
#logo {
font-size:35px;
margin-bottom:5px;
padding:40px;
height:80px;
background:red }
#menu {
margin-bottom:5px;
padding:15px;
background-color:green; }
#kiri {
margin-right:5px;
margin-bottom:5px;
height:600px;
float:left;
width:180px;
background-color:blue; }
#konten {
font-size:28px;
margin-bottom:5px;
height:600px;
float:left;
width:620px;

background-color:orange; }
#kanan {
margin-left:5px;
margin-bottom:5px;
height:146px;
float:right;
width:180px;
background-color:blue; }
#bawah{
margin-top:5px;
clear:both;
padding:15px;
height:50px;
background-color:chocolate; }
DESAIN MENU DENGAN CSS
Menu vertical Sederhana 01
Script HTML & CSS Menu - 01

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */

li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Menu vertical Sederhana 02
Script HTML Menu - 02

<html>
<head>
<title>Latihan Menu Vertikal</title>
<link rel="stylesheet" type="text/css" href="menu01.css">
</head>
<body>
<ul id="simple">
<li><a href="#">Home</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Script CSS Menu - 02
#simple {
margin: 10;
padding: 10;
width: 125px;
}
#simple li {
background: #3399ff;
border-bottom: 1px solid #FFF;
list-style: none;
padding: 1em;
text-align: center;
width: 200px;
}
#simple li:hover {
background: #00ced1;
}
#simple li a {
color: white;
display: block;
}
Posisi Menu Vertical Fix
Script CSS pada UL dimodifikasi menjadi

ul {
margin: 0;
padding: 0;
width: 25%;
position: fixed;
height: 100%;
overflow: auto;
}

Menu Horisontal Sederhana 01
Script CSS Menu Horisontal

ul {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333; }
li {
float: left; }
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none; }
li a:hover {
Menu Horisontal Fix

Fixed Top Fixed Bottom
ul { ul {
position: fixed; position: fixed;
top: 0; bottom: 0;
width: 100%; width: 100%;
} }
Menu Drop Down Sederhana

Script CSS
ul {
margin: 0;
padding: 0;
overflow: hidden;
li {
float: left; }
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none; }
li a:hover, .dropdown:hover .dropbtn {

background-color: red; }
li.dropdown {
display: inline-block; }

.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
text-align: left; }
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block; }
Script HTML
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
</div>
</li>
</ul>
Latihan SOAL 01
Script HMTL
<html>
<head>
<link rel="stylesheet" type="text/css" href="bagus.css">
</head>
<body>
<div id="image">
</div>
<div id="header">

<ul>
<li><a href="nav.html">Home</a></li>
<li><a href="nav.html">News</a></li>
<li><a href="nav.html">Contact</a></li>
<li><a href="nav.html">About</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href ="nav.html">Menu 1</a></li>
</ul>
</div>
<div id="section">
<h1>LONDON</h1>
<p>
london is the capital city of england. it is the most populous city in the
united kingdom,with a metropolitan are of over 13 million in habitants.
</p>
<p>
standing on the river thames, london has been a major settlement for two
millennia,its history going back to its founding by the romans, who named it
londinium.
</p>
</div>
<div id="footer">
<marquee >@BAGUS TRI HARIANTO.com</marquee>
</div>
</body>
</html>
Script CSS
#image
{
background-image:url("London.jpg");
padding-left:100px;
height:187px;
}
#header{
background-color:#7B68EE;
color:red;
text-align:center;
padding:2px;
padding-left:400px;
}
#nav{
line-height:40px;
height:230px;
width:130px;
float:left;
padding:5px;
}
#section{
width:350px;
float:left;
padding:10px;
}
#footer{
color:gold;
clear:both;
text-align:center;
padding:5px;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 125px;
font-weight: bold;
color: gold;
background-color:#9400DE ;
text-align: center;
padding: 5px;
text-transform: uppercase;
}
a:hover, a:active {
background-color: black;
}

LAMPIRAN – CODE WARNA HEXA
DAFTAR KODE WARNA


Modul - Layout Halaman WEB Dengan CSS 01

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul - Layout Halaman WEB Dengan CSS 01

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL KULIAH

FAKULTAS EKONOMI DAN BISNIS

E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 2

Contoh Script HTML Layout - 01

Contoh Script HTML & CSS Layout - 02

header, nav, aside, section, footer {

E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 4

E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 5

Contoh Script HTML Layout - 03

Contoh Script CSS Layout - 03

.wrap .menu ul{

.wrap .menu ul li{

.wrap .badan .content{

E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 8

Contoh Script CSS Layout - 04

E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 9

DESAIN MENU DENGAN CSS

Menu vertical Sederhana 01

Script HTML & CSS Menu - 01

/* Change the link color on hover */

Menu vertical Sederhana 02

Script HTML Menu - 02

Script CSS Menu - 02

Posisi Menu Vertical Fix

Script CSS pada UL dimodifikasi menjadi

E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 12

Script CSS Menu Horisontal

Menu Horisontal Fix

Menu Drop Down Sederhana

li a:hover, .dropdown:hover .dropbtn {

E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 13

.dropdown-content a:hover {background-color: #f1f1f1}

E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 14

E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 16

E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 17

Anda mungkin juga menyukai