Mendesain Layout Website dengan HTML dan CSS

Pembahasan tentang bagaimana cara Mendesain atau merancang Layout Website sederhana 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

BLOGGER: 12
Loading...
Name

Apache,4,Bisnis Online,1,Blog,10,Blogger,6,Cpanel,1,CSS,1,Database,1,Framework,1,Hacking,3,HTML,1,HTML and CSS,2,Info,2,Javascript,2,Javascript and AJAX,5,Keamanan Web,1,linux,2,MySQL,3,Networking,1,Open GL,1,Optimasi Website,7,Pemrograman java,1,Pemrograman web,5,PHP,7,phpMyAdmin,1,SEO,4,SQL Injection,3,SQL Server,12,SQLMap,3,Website,1,Wordpress,4,Xampp,1,
ltr
item
Nanang Gunawan Blog: Mendesain Layout Website dengan HTML dan CSS
Mendesain Layout Website dengan HTML dan CSS
Pembahasan tentang bagaimana cara Mendesain atau merancang Layout Website sederhana dengan HTML dan CSS.
https://2.bp.blogspot.com/-KaYBXZINWds/WOH2OAncL-I/AAAAAAAAAsU/mAhNGBiA9SI418MEIpM2Y5UO6A-d4yf9ACLcB/s1600/Mendesain%2BLayout%2BWebsite%2Bdengan%2BHTML%2Bdan%2BCSS.jpg
https://2.bp.blogspot.com/-KaYBXZINWds/WOH2OAncL-I/AAAAAAAAAsU/mAhNGBiA9SI418MEIpM2Y5UO6A-d4yf9ACLcB/s72-c/Mendesain%2BLayout%2BWebsite%2Bdengan%2BHTML%2Bdan%2BCSS.jpg
Nanang Gunawan Blog
http://www.nananggunawan.com/2012/05/mendesain-layout-website-dengan-html.html
http://www.nananggunawan.com/
http://www.nananggunawan.com/
http://www.nananggunawan.com/2012/05/mendesain-layout-website-dengan-html.html
true
4195327445586723627
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy