Membuat Design Layout Website Dengan Tag Div

Halo gaes, pada tutorial sebelumnya aku membahas bagaimana menciptakan design layout website dengan tabel. Nah, kali ini masih dalam pembahasan yang sama yakni menciptakan layout website. Cuma bedanya disini kita akan mendesain layout website memakai tag div. Sebelum melangkah lebih lanjut ada baiknya agan membaca dulu postingan aku sebelumnya wacana bagaimana menciptakan design layout website dengan tabel. Jika sudah maka mari kita bahas lebih lanjut disini. Penggunaan tag div lebih efisien dibandingkan dengan tag tabel, sebab tidak memakai banyak tag di dalamnya. Layout sanggup kita sesuaikan impian kita dengan menambahkan css di dalamnya.

Simak codingnya berikut ini :

Buat file dengan nama index.html

 <html> <head>  <title>Desain Dengan CSS Bagian 2</title>  <style>   <!--    @import url(style.css);   -->  </style> </head>  <body>  <div id="badan_utama">   <div id="header"><h2>Selamat Datang Di Web Kami</h2></div>   <div id="menu">    <ul class="list_menu">     <li><a href="#">Home</a></li>     <li><a href="#">Profil</a></li>     <li><a href="#">Galeri</a></li>     <li><a href="#">Hubungi Kami</a></li>    </ul>   </div>   <div id="wrapper">    <div id="content">    <h3>Teknis Publish Website</h3>     <p align="justify">Publish web yakni cara untuk mempublikasikan web statis ataupun     dinamis yang sudah kita buat biar sanggup dilihat oleh user melalui browser. Agar sanggup diakses oleh user untuk sebuah website, kita memerlukan domain dan hosting.</p>     <p align="center">Bagi anda yang belum mengetahui apa itu domain, singkat dongeng domain yakni sebuah nama alamat yang nantinya akan dipakai user untuk mengakses, melihat atau menampilkan halaman web kita.</p>     <p align="left">Domain diatur sedemikian rupa sehingga memudahkan kita dalam mengakses sebuah webserver, sebab kita tidak perlu lagi menuliskan alamat sebuah webserver dalam bentuk IP address.</p>      <strong>Berikut cara mempublish website anda:</strong><br>     <ol>      <li>Mendapatkan domain</li>      <li>Setting nama server di domain</li>      <li>Mendapatkan hosting</li>      <li>Upload website</li>      <li>Instal database</li>      <li>Tes hasil</li>     </ol>    </div>    <div id="sidebar">     <h3>Ini potongan sidebar</h3>    </div>   </div>   <div id="footer">Copyright By Wim Sonevel</div>  </div> </body> </html>


Kemudian buat file css dan namai style.css

 #badan_utama{  height:auto;  width:800px;  vertical-align:middle;  box-shadow:0px 0px 5px #000;  margin-bottom:0;  margin-left:auto;  margin-right:auto;  margin-top:0; } #header{  background-color:#FF9900;  text-align:left;  padding-left:10px;  height:100px;  z-index:3;  overflow:hidden; } #menu{  background-color:#999999;  height:40px;  width:100%;  margin-top:5px;  margin-bottom:5px; } #wrapper{  width:100%;  z-index:3;  background-color:#FFFFFF;  height:auto; } #content{  float:left;  height:auto;  width:580px;  padding:5px;  margin-right:6px;  z-index:4;  font-size:12px; } #sidebar{  height:auto;  background-color:#FFFFFF;  text-align:left;  width:200px;  z-index:5;  float:left;  overflow:hidden; } #footer{  clear:both;  height:20px;  width:100%;  z-index:7;  background-color:#0099FF;  font-size:11px;  text-align:center;  font-weight:bolder; } #header h2{  text-shadow:0px 0px 2px #000; } .list_menu{  float:left;  margin:0px;  padding:0px;  width:100%; } .list_menu li{  padding:10px;  height:auto;  list-style-type:none;  float:left;  border-right-width:1px;  border-right-style:solid;  border-right-color:#FFFFFF;  width:auto;  text-align:center; } .list_menu li a{  text-decoration:none; } .list_menu li a:hover{  font-weight:bold;  color:#h1h1h1;  text-shadow:0px 0px 2px #000; } .list_menu li:hover{  background-color:#FFFFFF; } h3,h4,h5{  color:#FF9900;  font-family:Georgia,"Times New Roman",Serif;  font-size:14px;  margin-bottom:5px;  margin-left:5px;  margin-top:5px; }


Jalankan file index.html di browser kemudian kesannya akan tampak sebagai berikut :


Sekian tutorial dari aku selamat mencoba dan semoga bermanfaat.
Happy Coding :)

Comments

Post a Comment

Popular posts from this blog

Pewarnaan Objek Geometri Di Java 2D

Image
Pewarnaan (filling) sanggup diterapkan ke dalam pembuatan objek geometri. Objek geometri sanggup digambar dengan method fill atau draw . Untuk menambahkan warna pada objek geometri, kita sanggup menambahkan method dari kelas Graphics. void setColor(Color c)  Objek Color didefinisikan sebagai sebuah warna. Kelas Color secara default memakai rentan warna RGB. Berikut ini yaitu pola penggunaan Color di Java 2D. /** * * @author Wim Sonevel */ import java.awt.*; import java.awt.geom.*; import javax.swing.*; public class SegiPanjangWarna extends JApplet { public static void main(String[] args) { JFrame frame = new JFrame(); frame.setTitle("Persegi Panjang Warna"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JApplet applet = new SegiPanjangWarna(); applet.init(); frame.getContentPane().add(applet); frame.pack(); frame.setVisible(true); } @Override public void init() { JPan...
Read more

(Tutorial Ios) Custom Uitableviewcell In Uitableview

Image
Hallo gaes, sudah usang rasanya tidak menulis tutorial wacana iOS. Nah pada kesempatan kali ini aku akan coba membahas wacana UITableView . UITableView merupakan widget yang biasa dipakai untuk menampilkan data dalam bentuk list. Pada umumnya komponen di dalam UITableView disebut dengan UITableViewCell . Komponen UITableViewCell inilah yang mengisi setiap baris-baris di dalam list. Secara default, UITabelViewCell cuma berisi title dan subtitle. Maka dari itu jikalau ingin menciptakan baris yang lebih komplek maka kita perlu menciptakan custom UITableViewCell . Oke singkat penjelasannya di atas, kini eksklusif kita praktekkan aja. Pertama buat project gres di Xcode, untuk bahasa pemrogramannya memakai Swift 3. Kemudian pada halaman storyboard-nya kita memakai Table View Controller . Drag and drop Table View Controller ke halaman storyboard , kemudian jadikan sebagai Root View Controller (alias tanda panah berada di Table View Controller). Setelah itu tambahkan beb...
Read more

Tugas Komplemen Terakhir

(Ainun Najib) 1. Buat sebuah aplikasi berbasis GUI untuk registrasi siswa gres : - hitung nilai tes untuk mata pelajaran tertentu dan jikalau rata-rata <  70 maka gagal - inputkan data-data siswa dan simpan dalam database - tampilkan data dalam bentuk tabel - data sanggup disimpan, diedit, dihapus dan dicari (Moh. Fachrudin) 2. Buat sebuah aplikasi berbasis GUI untuk registrasi musyrif gres : - hitung nilai tes b.arab, b.ing, Afkar, dan Al-Quran dan jikalau rata - rata < 70 maka gagal - inputkan data-data siswa dan simpan dalam database - tampilkan data dalam bentuk tabel - data sanggup disimpan, diedit, dihapus dan dicari (Aulia) 3. Buat sebuah aplikasi berbasis GUI untuk menghitung nilai selesai suatu matakuliah dan berikan nilai huruf.    - Rumus nilai selesai = kiprah 20% + uts 30% + uas 50 %    - Berikan nilai karakter :       46-55 Nilai C         56-65 Nilai C+  ...
Read more