TUTORIAL MEMBUAT LAYOUT WEBSITE DENGAN CSS

TUTORIAL MEMBUAT LAYOUT WEBSITE DENGAN CSS












Pada edisi postingan kali ini admin semutijo akan membagikan tutorial membuat layout website dengan CSS, dan sekilas informasi buat teman-teman yang belum tahu berapa pentingnya sebuah layout pada website, bahwa layout sangat penting adanya, karena dengan layout kita bisa meletakkan navigasi, portofolio, iklan, konten dan lainnya. Baiklan admin akan langsung saja membahasnya dengan singkat dan menjelaskan point-point terpenting agar lebih mudah dimengerti, Yuk disimak.

TUTORIAL MEMBUAT LAYOUT WEBSITE DENGAN CSS

#Pada layout yang akan kita buat ini terdiri dari Header, Mainbar, Sidebar, dan Footer. Silahkan copy kode HTML dibwaah ini untuk membuat basicnya .

<html>

<head>

<title> tutorial membuat Layout Website</title>

<!– untuk meload css teman-teman –>

<link href=”css/style.css” rel=”stylesheet” type=”text/css”></link>

</head>

<body>

<!– start –>

<!– end –>

</body>

</html>

#Selanjutnya silahkan copy dan paste kembali kde yang ada dibawah ini, untuk menandakan kelasnya. Letakkan kode ini dibagian antara start dan end

<div class=”header”>

<center><h1> > tutorial membuat Layout Website – semutijo.com</h1></center>

</div>

<div class=”main”>

<section>

Lorem ipsum dolor sit amet, consectetur rebajas , pero hacer eiusmod

tempor y vitalidad , por lo que el trabajo y la obesidad . A través de los años por venir,

nostrud ejercer cualquier distrito escolar para trabajar a menos que se benefician de aliquip

fotografía. Película Cupidatat ha sido criticado en el placer de estar en el dolor

huir dolore cillum eu no produce resultante. Negros Excepteur no se cupidatat

esperamos que pueda abandonar el afeminado y sus espíritus , es decir, sunt en aperitivos officia qui culpa .

lorem <br />

<a href=”#”> Read More </a>

<hr>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

lorem <br />

<a href=”#”> Read More </a>

<hr>

Lorem ipsum dolor sit amet, consectetur rebajas , pero hacer eiusmod

tempor y vitalidad , por lo que el trabajo y la obesidad . A través de los años por venir,

nostrud ejercer cualquier distrito escolar para trabajar a menos que se benefician de aliquip

fotografía. Película Cupidatat ha sido criticado en el placer de estar en el dolor

huir dolore cillum eu no produce resultante. Negros Excepteur no se cupidatat

esperamos que pueda abandonar el afeminado y sus espíritus , es decir, sunt en aperitivos officia qui culpa .

lorem <br />

<a href=”#”> Read More </a>

<hr>

</section>

</div>

<div class=”sidebar”>

<center><h5> Menu web </h5></center><br />

<center>

<ul class=”menu” type=”none”>

<a href=”#”><li> Home </li></a>

<a href=”#”><li> Contact </li></a>

<a href=”#”><li> Portfolio </li></a>

</ul>

</center>

</div>

<div class=”footer”>

<center><h5> www.semutijo.com</h5></center>

</div>

#Nah selanjutnya buat folder CSS dan buat file dengan ekstensi .css lalu salin sintaks di bawah ini dan untuk susunan folder nya bisa lihat gambar di bawah ini

layout

*{

margin: 0px;

padding: 0px;

}

.header{

width: 100%;

height: 70px;

background-color: red;

}

.header h1{

color: white;

font-family: sans-serif;

font-size: 18px;

padding-top: 20px;

}

.main{

width: 70%;

height: auto;

background-color: #E8E9F8;

float: left;

margin-top: 2px;

color: #000;

font-family: sans-serif;

font-size: 14px;

}

.main a{

color: black;

background-color: #5E62CC;

}

.sidebar{

width: 28%;

height: auto;

background-color: #555;

float: left;

margin-top: 2px;

color: #fff;

font-family: sans-serif;

margin-left: 5px;

 

}

.sidebar a {

color: white;

text-decoration: none;

line-height: 3px;

}

 

.footer{

width: 100%;

height: 30px;

background-color: red;

clear: both;

padding-top: 20px;

}

 

.footer h5{

color: white;

font-family: sans-serif;

font-size: 18px;

 

}

Demikian adalah tutorial membuat Layout Website yang bisa langsung teman-teman praktekan, dan semoga bermanfaat.

Leave a Reply

Your email address will not be published. Required fields are marked *