CARA MEMBUAT LAYOUT WEB DENGAN CSS DAN HTML SECARA SEDERHANA

Membuat Layout Web Dengan CSS Dan HTML Secara Sederhana. Bagi anda yang ingin belajar pemrograman Web Disain atau biasa ditulis dengan Web Design, anda pasti sering menemukan istilah Template atau Layout. Menurut saya, pengertian dari Template atau Layout secara sederhana adalah bentuk disain atau bentuk tampilan web yang didisain semenarik mungkin agar mudah untuk diakses dan digunakan.

Sebelumnya saya sudah membahas tentang Cara Menggunakan Css Pada Html Bahasa. Jika anda belum paham tentang HTML dan CSS, silahkan anda baca terlebih dahulu tentang Cara Menggunakan Css Pada Html. Dimana pada tutorial kali ini saya akan membahas tentang cara membuat sebuah Disain web yang sederhana menggunakan HTML dan CSS.

Namun sebelumnya, biasanya seorang Web Disain ingin membuat sebuah Web, Programer Web Disain tersebut pasti yang akan dilakukannya adalah merancang terlebih dahulu bagaimana tampilan web yang akan dia buat. Misalkan anda akan membuat sebuah tampilan web dimana terdiri dari Header (bagian kepala dari sebuah web untuk meletakkan judul web), Menu-menu yang akan ada pada bagian atas web, mendisain posisi content (isi) dari web, sidebar (menu yang bisasanya ada pada bagian kiri atau kanan sebuah web) dan footer (kaki/bagian paling bawah pada sebuah web), maka itu sudah dipikirkan sebelum-sebelumnya oleh seorang web disain.

Nah, pada tutorial kali ini saya akan membahas tentang yang sudah saya jelaskan diatas tadi, karena ini adalah dasar-dasar mendisain sebuah web, maka kurang lebih hasil dari disain web yang akan saya bagikan kepada anda ini adalah seperti gambar berikut :

Ok seperti biasa, tanpa basa-basi lagi, berikut langkah-langka pembuatannya :

1. Pastikan anda sudah mengerti cara membuat sebuah file HTML dan file CSS. Jika belum, silahkan anda baca terlebih dahulu Cara Membuat Sebuah File HTML dan CSS terlebih dahulu.

2. Silahkan anda buat sebuah folder dikomputer anda dengan lokasi penyimpanan terserah anda, dan nama foldernya terserah anda. Disini sebagai contoh saya membuat sebuah folder dengan nama disain_web_1. Kurang lebih seperti gambar berikut :

3. Kemudian didalam folder disain_web_1 silahkan anda buat dua buah file, yaitu sebuah file HTML dengan nama “index.html” dan sebuah file CSS dengan nama “style.css”. kurang lebih hasilnya seperti gambar berikut :

4. Kemudian, silahkan anda buka file “index.html” menggunakan media pengkodingan kesayangan anda, dan silahkan anda ketikkan koding dibawah ini pada file HTML tersebut :

<html>
<head>
 <title>Disain Layuot Web</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="container">
  <div id="header">
  </div>

  <div id="menu">
  </div>

  <div id="content">
   <!-- Isi Content Disini -->
  </div>
  
  <div id="right">
   <!-- Isi Content Disini -->
  </div>

  <div id="footer">
  </div>
 </div>
</body>
</html>

Keterangan koding pada file index.html :

Sintak diatas adalah sintak dasar dari html. Dimana didalam file index.html tersebut terdapat beberapa tag DIV, dimana tag div tersebut diberikan atau dibedakan berdasarkan selector ID. Jika anda sudah membaca tutorial saya tentang Dasar-dasar CSS yang sebelumnya sudah saya bagikan, saya rasa anda sudah mengerti tentang Selektor dan Deklarator pada CSS.
Dan pada tag “<link>” yang ada diatas tag “</head>” itu adalah berfungsi untuk menghubungkan file HTML ke file CSS.
Selector ID “header” adalah untuk membuat bagian kepala dari sebuah web.
Selector ID “menu” adalah untuk membuat bagian menu-menu yang dibutuhkan dari sebuah web.
Selector ID “content” adalah untuk membuat bagian isi dari sebuah web.
Sintak yang berwarna merah diatas adalah contoh content atau contoh isi dari sebuah web. Dan pada sintak yang berwarna merah tersebut silahkan anda ganti dengan tulisan terserah anda, minimanl silahkan anda isi dengan 2-3 paragraf.
Selector ID “right” adalah untuk membuat bagian sidbar untuk menu atau info yang biasanya ada pada bagian kanan atau pada bagian kiri dari sebuah web.
Selector ID “footer” adalah untuk membuat bagian paling bawah dari sebuah web.
Untuk lebih jelasnya, silahkan lanjutkan membaca tutorial ini.

5. Setelah itu, silahkan anda buka file “style.css” menggunakan media pengkodingan kesayangan anda, dan silahkan anda ketikkan koding dibawah ini pada file CSS tersebut :


*{

            margin: 0;

            padding: 0;

}

body{

            font-family: arial, sans-serif; 

}

#container{

            width: 1000px;

            margin:0 auto;

}

#header{

            background-color: #ddb22d;

            width: 1000px;

            height: 170px;

}

#menu{

            background-color: #2d35dd;

            width: 1000px;

            height: 30px;

}

#content{

            background-color: #d3d3d3;

            width: 690px;

            float: left;

            padding: 5px;

}

#right{

          background-color: #ccff00;

          width: 290px;

          float: left;

          padding: 5px;

}

#footer{

         background-color: gray;

         width: 1000px;

         height: 120px;

         float: left;

}

Keterangan koding pada file style.css :

Sintak *{margin: 0;padding: 0;} adalah untuk memberikan perintah secara general bahwa margin dan padding dengan nilai 0. Margin dan Padding itu adalah property dari CSS.
Sintak body{...} adalah untuk memberikan perintah pada tag “body” yang ada pada file HTML.
Sintak #container{...} adalah untuk memberikan perintah pada tag yang mempunyai Selector ID container yang ada pada file HTML.
Sintak #header{...} adalah untuk memberikan perintah pada tag yang mempunyai Selector ID header yang ada pada file HTML.
Sintak #menu{...} adalah untuk memberikan perintah pada tag yang mempunyai Selector ID menu yang ada pada file HTML.
Sintak #content{...} adalah untuk memberikan perintah pada tag yang mempunyai Selector ID content yang ada pada file HTML.
Sintak #right{...} adalah untuk memberikan perintah pada tag yang mempunyai Selector ID right yang ada pada file HTML.
Sintak #footer{...} adalah untuk memberikan perintah pada tag yang mempunyai Selector ID footer yang ada pada file HTML.
Jika anda sudah membaca tutorial tentang Dasar-dasar CSS, saya rasa anda sudah paham akan penggunaan Selektor ID dan Selektor Class.

6. Kemudian silahkan anda jalankan file indek.html menggunakan browser anda. Untuk browser anda boleh menggunakan browser Googel Chrome, Mozilla Firefox, maupun Internet Explorer juga bisa. Jika anda berhasil, maka hasilnya kurang lebih seperti gambar berikut :

7. Selesai.

Itulah sedikit cara dasar-dasar mendisain sebuah web sederhana menggunakan HTML dan CSS. Saya rasa jika anda sering mengulangnya dan mencari referensi diinternet untuk mendisain sebuah web, saya rasa anda pasti akan cepat paham dan cepat mahir dalam Web Programing. Dan jika anda masih bingung pada tutorial ini, silahkan download sourcecode disain web dasar ini yang juga sudah saya sertakan DISINI.

Ok, sekian dulu dari saya, salah dan kurangnya dalam penulisan saya ini saya mohon maaf. Jika anda ada pertanyaan maupun ingin dibuatkan tutorial seputar Dunia Komputer, silahkan anda tinggalkan komentar. Jika saya bisa dan ada waktu, akan saya buatkan tutorialnya.

Semoga bermanfaat, dan salam sukses.

6 Tanggapan untuk "CARA MEMBUAT LAYOUT WEB DENGAN CSS DAN HTML SECARA SEDERHANA"

Essence AquaticOctober 20, 2017
memang keren dah artikelnya
FaizalSeptember 28, 2018
This comment has been removed by the author.
FaizalSeptember 28, 2018
izin copas yaa gan,,,maklum masih pemula gan,,,masih perlu byk belajar,,,
tetep semangat berbagi gan,,,

Kunjungi website saya ya : https://faiz4l.mahasiswa.atmaluhur.ac.id/ dan website kampus saya : http://www.atmaluhur.ac.id
Tokoumpan.comOctober 25, 2018
Nice | www.tokoumpan.com
AnonymousMarch 23, 2022
Cara Membuat Layout Web Dengan Css Dan Html Secara Sederhana - Zeroncode >>>>> Download Now

>>>>> Download Full

Cara Membuat Layout Web Dengan Css Dan Html Secara Sederhana - Zeroncode >>>>> Download LINK

>>>>> Download Now

Cara Membuat Layout Web Dengan Css Dan Html Secara Sederhana - Zeroncode >>>>> Download Full

>>>>> Download LINK