Skip to main content

Mendesain Layout Website dengan HTML dan CSS


Kali ini kita akan membahas tentang bagaimana Mendesain Layout Website dengan HTML dan CSS. Dalam mendesain website hal pertama yang kita lakukan adalah mendesain layout web tersebut.
Nah berikut adalah caranya:

Pertama kita rancang dulu bentuk/layout web ke dalam secarik kertas atau bisa menggunakan tool graphic seperti Photoshop, rancangan layout adalah sebagai berikut:


Perhatikan baik-baik penomoran pada kotak-kotak diatas, ketentuannya adalah sebagai berikut:

1. Kotak No 1 memiliki ID kotak1, di dalam kotak1 terdapat kotak2,kotak3,kotak4 dan kotak7.
2. Kotak No 2 memiliki ID kotak2, kotak 2 berfungsi sebagai header.
3. Kotak No 3 memiliki ID kotak3, kotak 3 berfungsi sebagai menu.
4. Kotak No 4 memiliki ID kotak4, di dalam kotak4 terdapat kotak5 dan kotak6.
5. Kotak No 5 memiliki ID kotak5, kotak 5 berfungsi sebagai sidebar kiri.
6. Kotak No 6 memiliki ID kotak6, kotak 6 berfungsi sebagai isi halaman.
7. Kotak No 7 memiliki ID kotak7, kotak 7 berfungsi sebagai footer.


ID atau istilah HTML nya selector ID tersebut  akan digunakan dalam HTML dan CCS yang akan kita buat nantinya. Berikut adalah ketentuan dalam pembuatan selector ID pada HTML:

  • Tidak boleh ada ID yang sama lebih dari satu atau duplikat ID
  • Pemberian ID pada suatu elemen boleh menggunakan kata atau angka
  • Penulisan ID tidak boleh diawali oleh angka
  • Tidak boleh mengandung special characters (~ ! @ # $ %)

Kemudian kita buat file misalnya file  index.html dengan script berikut:

<html>
    <head>
        <title></title>
        <!-- Memanggil file css -->
        <link href="style.css" rel="stylesheet"></link>
    </head>
    <body>         
        <div id="kotak1"> <!-- Membuat Kotak 1-->
            <div id="kotak2">
               
            </div>
            <div id="kotak3">
             
            </div>
            <div id="kotak4">
                <div id="kotak5">
              
                </div>
                <div id="kotak6">
              
                </div>
           </div>
           <div id="kotak7">
              
           </div>
       </div>
    </body>
</html>

Tag Div memungkinkan kita  untuk melakukan demark portion dari halaman sehingga kita dapat melakukan modifikasi didalamnya. Cara lain untuk mengatakan ‘demark porsi’ bisa ‘untuk dimasukkan ke dalam wadah’. Setelah bagian dari halaman web Anda ada di wadah <div> Anda dapat melakukan beberapa hal seperti memberikan style, menghidupkannya, membuatnya terlihat atau tak terlihat, dan sebagainya. Div mewakili generasi berikutnya dari format halaman HTML yang dalam banyak hal lebih unggul dari tabel.

Kemudian kita buat file css dengan nama style.css dengan isi sebagai berikut:

[root { display: block; } /*Membuat bentuk dari kotak1 samapai kotak 7*/ #kotak1{ width:1000px;/*Lebar kotak*/ height:757px;/*Tinggi kotak*/ border:1px solid #cdcdcd; /*Border kotak*/ background:#f0f3f6;/*Background/warna kotak*/ margin:auto;/*Supaya kotak berada di tengah*/ } #kotak2{ width:980px; height:150px; border:1px solid #cdcdcd; background:#639fce; margin:auto; margin-top:5px;/*jarak kotak dengan kotak diatasnya di beri 5px*/ } #kotak3{ width:980px; height:40px; border:1px solid #cdcdcd; background:#2fb075; margin:auto; margin-top:5px; } #kotak4{ width:980px; height:500px; border:1px solid #cdcdcd; background:#639fce; margin:auto; margin-top:5px; } #kotak5{ width:240px; height:485px; border:1px solid #cdcdcd; background:#e6e2e2; float:left;/*Supaya kotak berada di pinggir kiri*/ margin-left:5px; margin-top:5px; } #kotak6{ width:720px; height:485px; border:1px solid #cdcdcd; background:#e6e2e2; float:left; margin-left:5px; margin-top:5px; margin-right:5px; } #kotak7{ width:980px; height:30px; border:1px solid #cdcdcd; background:#2fb075; margin:auto; margin-top:5px; } ]


Untuk CSS kita menggunakan teknik eksternal CSS dimana file CSS dibuat terpisah dengan file HTML. File CSS diatas membuat style untuk masing-masing Div atau kotak sehingga terbentuk layout seperti yang kita inginkan. Style yang diberikan berupa lebar, tinggi, warna background, margin dan border.
Simpan file HTML dan CSS pada folder yang sama. Ketika kita buka file index.html di browser maka akan tampil seperti gambar berikut:



Nah jadi deh desain layout webnya.


Selamat mencoba!

Comments

  1. Thanks gan infonya...
    Tapi bagaimana ya membuat templete website berada di center and middle browser... Mohon penjelasannnya di Shoutbox blog saya ya http://www.hilal.web.id/p/buku-tamu.html

    ReplyDelete
  2. mantap mas ,, ini info yang bermanfaat mas pengen belajar tapi masih bingung hehehee

    ReplyDelete
  3. Thanks agan2 semua, semoga postnya bermanfaat :)

    ReplyDelete
  4. Bisa di edit gak mas templete dari postingan ini.. supaya posisinya jadi center + middle .... tadi sudah saya coba tapi templetenya gak center + middle... Bantuan di shotbox saya ya http://www.hilal.web.id/p/buku-tamu.html

    ReplyDelete
  5. sebenernya ini yang ane cari sob...., ane pengen banget belajar bahasa Html kek gini....., sayangnya agak susah n musti kudu ada yang mandu......, kalo sekedar baca takut pusing....., hehehehe....

    ReplyDelete
  6. @Hilal: itu templatenya posisinya udah center+middle kok mas, sampean pake browser apa yak? saya coba pake IE,Opera,Chrome,Mozilla bisa.

    @kang obet: bener emang kadang agak susah kalo g ada yg mandu :)

    ReplyDelete
  7. nice posting, semoga sukses menjadi ahli web

    ReplyDelete
  8. wah bagus juga tutorialnya bisa dilihat nih gan dari template yang dipakai...

    ReplyDelete
  9. kalo yang di kotak4 heightnya di hilangkan,maka akan jadi sesuatu yang aneh, mohon solusinya

    ReplyDelete
  10. Terima Kasih Atas tutorialnya ..
    artikel yang sangat bagus ..

    ReplyDelete
  11. stylesheetnya itu ko' ngumpet ya gan ...

    alurnya gmna tuch ....!!!

    ane blum ngerti

    ReplyDelete
  12. Wah penjelasannya sangat simple sehingga pemula seperti saya mudah mengerti. Saya akan mencobanya di website baru saya nanti. Lengkapi lagi ya kak penjelasan desain webnya dengan desain yang lebih menarik lagi. Terus berkarya dan saya tunggu artikel selanjutnya. Perkenalkan nama saya Tessa Hervika mari kunjungi website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete

Post a Comment

Popular posts from this blog

Tutorial SQL Injection Menggunakan SQLMap

Kali ini kita akan membahas tutorial hacing dengan teknik SQL Injection menggunakan tool SQLMap untuk melakukan hacking atau serangan pada website berbasis data dengan tujuan untuk menemukan kerentanan keamanan pada website tersebut. SQL Injection adalah teknik injeksi code yang digunakan untuk melakukan serangan pada aplikasi web berbasis data di mana pernyataan malicious SQL dimasukkan ke dalam entri untuk di eksekusi (misalnya untuk menampilkan konten database ke penyerang). SQL injection dapat mengeksploitasi kerentanan keamanan pada perangkat lunak aplikasi, misalnya saat user salah melakukan filter inputan untuk pengiriman karakter yang disematkan dalam pernyataan SQL atau inputan user tidak diketik dengan benar dan tanpa diduga dieksekusi. SQL Injection lebih dikenal sebagai vektor serangan untuk sebuah situs web namun juga dapat digunakan untuk menyerang semua jenis database SQL. Apa itu SQLMap SQLMap adalah salah satu tool otomatis untuk melakukan SQL Injection yang

Penjumlahan dan pengurangan tanggal di PHP

Penjumlahan (tambah) dan pengurangan (kurang) tanggal di PHP sering  kita jumpai di beberapa kasus pembuatan sistem seperti pembuatan fitur peminjaman, perizinan, pemesanan dan lain-lain. Kali ini kita akan membahas bagaimana  suatu tanggal dapat di tambah atau di kurangi dengan hari, bulan dan tahun. Ok langsung saja kita bahas materinya!

Cara membuat Hak Akses (Privileges) pada user SQL Server (Grant dan Revoke)

Pada tutorial kali ini kita akan belajar bagaimana cara membuat atau memberi grant atau revoke hak akses (Privileges) pada user di SQL Server menggunakan syntax Transact SQL (T-SQL). Anda dapat memberi GRANT dan REVOKE hak akses pada berbagai objek database di SQL Server. Kali ini kita akan melihat bagaimana memberi dan menghapus hak akses pada tabel di SQL Server. Memberikan permissions dan menghapus permissions tidak terlalu sulit dilakukan di dalam SQL Server, hanya butuh beberapa waktu untuk menentukan permissions apa yang harus diterapkan. Sebelumnya anda harus membuat user dahulu pada SQL Server, setelah itu baru kita bisa memberi Hak Akses. Berikutnya pastikan anda sudah membuat atau menjalankan script dibawah ini. [USE [nama_database] GO CREATE USER [nama_user] FOR LOGIN [nama_user]] Grant Hak Akses (Privileges) pada  tabel Anda dapat memberi (Grant) berbagai hak akses ke tabel pada user. Hak akses ini bisa berupa kombinasi SELECT, INSERT, UPDATE, DELETE, REFERENCES