Scribd
Unggah
24 tayangan

Modul - Layout Halaman WEB Dengan CSS 01

Modul kuliah ini membahas desain layout halaman web dengan CSS dan contoh-contoh kode HTML dan CSS untuk membuat layout dasar, menu, dan desain lainnya."

Diunggah oleh

Nanda Pratama
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
24 tayangan

Modul - Layout Halaman WEB Dengan CSS 01

Modul kuliah ini membahas desain layout halaman web dengan CSS dan contoh-contoh kode HTML dan CSS untuk membuat layout dasar, menu, dan desain lainnya."

Diunggah oleh

Nanda Pratama
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 19

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>
E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 3
<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;
}

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


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>

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


Contoh Layout - 03

Contoh Script HTML 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">
E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 6
<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;
E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 7
}
/*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

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


Contoh Script HTML 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="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;

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


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 {
list-style-type: none;
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>
E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 10
</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;
E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 11
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 {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}

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


Menu Horisontal Sederhana 01

Script CSS Menu Horisontal


ul {
list-style-type: none;
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 {
background-color: #111; }

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 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333; }

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; }

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


.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
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>
<a href="#">Link 2</a>
<a href="#">Link 3</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">

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


<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>
<li><a href ="nav.html">Menu 2</a></li>
<li><a href ="nav.html">Menu 3</a></li>
<li><a href ="nav.html">Menu 4</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;
background-color:#7B68EE;
height:230px;
width:130px;
float:left;
padding:5px;
}
#section{
width:350px;
float:left;
padding:10px;
}
#footer{
E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 15
background-color:#7B68EE;
color:gold;
clear:both;
text-align:center;
padding:5px;
}

ul {
list-style-type: none;
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-decoration: none;
text-transform: uppercase;
}

a:hover, a:active {
background-color: black;
}

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


LAMPIRAN – CODE WARNA HEXA
DAFTAR KODE WARNA

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


E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 18
E-Commerce (Pemrograman CSS) Entot Suhartono Hal. 19

Anda mungkin juga menyukai