Membuat Halaman Web Sederhana Dengan Div Tag

Selamat pagi sobat T1kus90tBlog sekalian, hari ini saya akan memberitahukan cara membuat halaman web sederhana menggunakan tag <div></div>. Kemarin saya sudah memposting bagaimana cara membuat halaman web sederhana menggunakan tag <table></table>, saya sendiri lebih merekomendasikan bagi kalian yang baru belajar lebih baik untuk menggunakan tag <div></div> dalam membuat suatu halaman web. Karena lebih mudah dipahami dibandingkan dengan tag <table></table>. Oke langsung aja, untuk tampilan halaman web yang sudah saya buat kira-kira seperti ini.

Div Container

Div container ini berfungsi sebagai tempat penampung dari seluruh tag div yang kita buat.

Div Header

<div id="header" class="header">
<h1 align="center" style="padding-top: 10px">
T1kus90tBlog</h1>
</div>

Div header berfungsi sebagai tempat header dari halaman website yang kita buat.

Div Menu

Div menu berfungsi sebagai tempat daftar menu dari halaman website yang kita buat.

Div Content

<div id="content" class="content">
<br>
<h3>
Ini Judul Artikel</h3>
<br>
<p>
Ini Isi Artikel</p>
</div>

Div content berfungsi sebagai tempat dari seluruh konten yang ada pada halaman website yang kita buat.

Div Footer

<div id="footer" class="footer">
<h3 align="center" style="padding-top: 5px">
© 2017 T1kus90tBlog</h3>
</div>

Div footer berfungsi sebagai tempat footer dari halaman website yang kita buat.

Style CSS

<style type="text/css">
 * { margin: 0; padding: 0; }

 .header {
  background-color: yellow;
  border: 1px solid black;
  width: 500px;
  height: 60px;
 }

 .menu {
  background-color: grey;
  border: 1px solid black;
  width: 500px;
  height: 45px;
  color: white;
 }

 .content {
  border: 1px solid black;
  width: 500px;
  height: 300px;
 }

 .footer {
  background-color: yellow;
  border: 1px solid black;
  width: 500px;
  height: 30px;  
 }
</style>

Karena saya memakai atribut class pada beberapa tag div, maka ini adalah style CSS yang saya pakai.

Keseluruhan Script

<html>
<head>
<title>Membuat Halaman Web Sederhana Dengan Tag Div</title>
<style type="text/css">
 * { margin: 0; padding: 0; }

 .header {
  background-color: yellow;
  border: 1px solid black;
  width: 500px;
  height: 60px;
 }

 .menu {
  background-color: grey;
  border: 1px solid black;
  width: 500px;
  height: 45px;
  color: white;
 }

 .content {
  border: 1px solid black;
  width: 500px;
  height: 300px;
 }

 .footer {
  background-color: yellow;
  border: 1px solid black;
  width: 500px;
  height: 30px;  
 }
</style>
</head>

<div id="container">

<div id="header" class="header">
<h1 align="center" style="padding-top: 10px">
T1kus90tBlog</h1>
</div>
<div id="menu" class="menu">
<a style="color: white; padding-left: 30px;" href="#">HOME</a>
<a style="color: white; padding-left: 20px;" href="#">ABOUT</a>
<a style="color: white; padding-left: 20px;" href="#">ARTICLE</a>
<a style="color: white; padding-left: 20px;" href="#">CONTACT</a>
<a style="color: white; padding-left: 20px;" href="#">DISCLAIMER</a>
</div>
<div id="content" class="content">
<br>
<h3>
Ini Judul Artikel</h3>
<br>
<p>
Ini Isi Artikel</p>
</div>
<div id="footer" class="footer">
<h3 align="center" style="padding-top: 5px">
© 2017 T1kus90tBlog</h3>
</div>
</div>
</html>

Ya, ini adalah keseluruhan dari skrip yang telah saya buat tadi. Gimana? lebih simpel dan lebih mudah dipahami memakai tag div bukan?.

Pages

Membuat Halaman Web Sederhana Dengan Div Tag

Div Container

Div Header

Div Menu

Div Content

Div Footer

Style CSS

Keseluruhan Script

Belum ada tanggapan untuk "Membuat Halaman Web Sederhana Dengan Div Tag"

Post a Comment

Membuat Halaman Web Sederhana Dengan Div Tag

Div Container

Div Header

Div Menu

Div Content

Div Footer

Style CSS

Keseluruhan Script

Postingan terkait:

Belum ada tanggapan untuk "Membuat Halaman Web Sederhana Dengan Div Tag"

Post a Comment