Cara membuat layout Website dengan CSS

byadelina sofyan -

CSS style

Boleh dikatakan ini adalah teknik pembuatan layout template editblogtema sendiri, yang pembuatannya di dominasi oleh CSS Style untuk membentuk tampilan elemen HTML di dalam template. Melalui 'rahasia dapur' pembuatan template kami kalian akan dibawa untuk memahami kesaktian CSS.

CSS adalah bahasa yang menerapkan style ke dalam dokumen HTML. CSS-lah yang menentukan bagaimana HTML akan di tampilkan. Atau singkatnya sebagai berikut:
  1. CSS adalah singkatan dari Cascading Style Sheet
  2. CSS-lah yang akan menentukan bagaimana HTML akan terlihat (ditampilkan pada layar monitor PC, kertas atau media lainnya). Misalnya bagaimana template template berubah tampilannya oleh editblogtema.
  3. CSS menghemat banyak waktu kerja. Ia dapat mengendalikan layout berbagai halaman web sekaligus.
  4. Stylsheest eksternal (CSS) di simpan di dalam file CSS. 
Di dalam halaman HTML (termasuk halaman HTML Blogger) sintaks CSS akan terlihat sebagai berikut:
<style>
p {
color: red;
text-align: center;
}
</style>
</head>

<p>Halo Dunia!</p>
<p>Pragraf ini di stylish dengan CSS.</p>
Banyak jenis deklarasi pengaturan yang menyertainya, misalnya untuk mengatur dan menambah warna, mengatur jarak elemen, mengatur background halaman, font, lebar, align, posisi, dropdown, z-index, border, dll.

Membuat layout halaman website dengan CSS

1. CSS untuk membuat Header Blog

Hal pertama terlihat pada suatu layout website adalah header dan menurut kebiasaan selalu terletak di atas halaman Website/Blog, tepatnya bisa di atas menu navigasi, bisa pula di bawahnya. Dan biasanya selalu deilengkapi dengan sebuah LOGO atau nama Website.

CONTOH:

EditBlogTema

Kode CSS-nya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>EditBlogTema</h1>
</div>
</body>
</html>

 2. CSS untuk membuat Navigasi menu bar blog

Sekarang masanya melengkapi header yang telah kita buat di atas dengan menu navigasi. sebagai contoh kita tuliskan 3 buah menu horisontal dikanan bawah header: Link 1, Link 2, Link 3.

Halaman kami penuh dengan contoh membuat navigasi ini, contoh paling standar pembuatannya adalah sebagai berikut:

EditBlogTema

Link1 Link2 Link3
Kode CSS-nya:

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

* {
box-sizing: border-box;
}
body {
margin: 0;
}

/* Style the header */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}

/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
</style>

</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
<div class="topnav">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div>
</body>
</html>

3. CSS untuk membuat konten 'body' blog

Setelah membuat header dan navigasi, kini saatnya membuat konten, yakni apa yang kita sebut sebagai body daripada layout halaman website tempat menulis konten tulisan, gambar dan video layaknya halaman website atau blog. Caranya adalah sebagai berikut:

EditBlogTema

seni blogging yang sensaional.

Link1 Link2 Link3

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.

Column 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.

Column 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.

Kode CSS-nya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
}

/* Style the header */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}

/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}

/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}

/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 15px;
}


/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>

<div class="header">
<h1>Header</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>

<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>

<div class="row">
<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>

<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>

<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
</div>

</body>
</html>
Dengan memahami hal di atas kalian dapat mengembangkan skil bahasa CSS untuk pembuatan layout halaman Website. Selamat belajar teknologi programming web!

Tags

1 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Intensive EnglishFebruari 11, 2021

    Tolong dong buat tutorial tentang membuat landing page template sendiri.. please..

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak