Membuat Desain Layout Website Dengan Tabel

Halo gaes, aku mau sharing nih seputar ihwal web development yaitu cara mendesain layout website. Pada dasarnya website mempunyai layout yang berbeda-beda, namun ada beberapa komponen umum yang biasanya terdapat dalam desain layout website. Layout dibagi menjadi beberapa bab yakni :
1. header
2. menu
3. content
4. sidebar
5. footer.

Ilustrasi sanggup dilihat dari gambar di bawah ini :


Kalau begitu pribadi saja kita mulai codingnya hehe..
Pertama-tama buat file dengan nama index.html kemudian ketikkan script html berikut ini :
 <html> <head> <title>Percobaan Praktikum Pertama</title>     <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <table width="800" border="1" class="badan_tabel">     <tr>       <td colspan="2" class="header"><h2>Selamat Datang Di Web Kami</h2></td>     </tr>     <tr>       <td colspan="2" bgcolor="#FFCC99">          <ul class="list_menu">            <li><a href="#">Home</a></li>            <li><a href="#">Profil</a></li>            <li><a href="#">Hubungi Kami</a></li>          </ul>       </td>     </tr>     <tr>       <td width="488">         <h3>Teknis Publish Website</h3>         <p align="justify">Publish web yaitu cara untuk mempublikasikan web statis ataupun     dinamis yang sudah kita buat semoga 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 kisah domain yaitu 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, alasannya yaitu 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>       </td>       <td width="300" valign="top" bgcolor="lightblue">Ini Bagian Sidebar</td>     </tr>     <tr> <td colspan="2" bgcolor="#E5E5E5"><center>Created By Wim Sonevel</center></td>     </tr> </table> </body> </html>

Kemudian buat file CSS dengan nama style.css di folder yang sama. CSS berkhasiat untuk mempercantik tampilan website.
 .badan_tabel{  margin: auto;  border: 1px solid #999999; } .header{  background-color: #6699FF;  padding: 5px;  height:100px; } .list_menu{  background-color: #FFCC99;  margin: 0px;  width: auto;  padding: 0px; } .list_menu li{  float:left;  display:block;  list-style-type: none;  border-right-width:1px;  border-right-style:solid;  border-right-color:#999999;  padding:10px; } .list_menu li:hover{  background-color: #FFFFFF; } .list_menu li a{  text-decoration: none; } .list_menu li a:hover{  font-weight:bold;  color:red; } table{  border-collapse:collapse; }

Save, kemudian jalankan dibrowser. Maka balasannya akan tampak menyerupai ini :

Agan-agan sanggup berkreasi dengan mendesain layout sesuai impian Agan.
Sekian tutorial dari aku 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