Membuat Layout Website dengan CSS dan HTML

Hai para pengunjung blog Angkast, kali ini admin akan memaparkan tutorial dasar untuk belajar membuat sebuah website.
Hal yang perlu anda persiapkan yaitu :
- Komputer atau notebook yang telah memiliki operating system.
- Jangan lupa instal notepad++ untuk memudahkan anda mencari kesalahan (skript yang error).

Tahap pemograman :
- buka aplikasi notepad++, kemudian simpan dengan nama setelan.css
- New tab pada notepad++, kemudian disimpan dengan nama index.php

Lalu tuliskan sintax berikut pada setelan.css

Setelan.css

 body { /* css ini berfungsi secara langsung pada sintax html */
      background-color:#CCC;
      font-size:20px;
      text-align:center;
           }
#wrap { /* harus di hub dengan id="wrap" */
        width: 1100px;
        height: auto;
        border:double #FF0000;
        border-radius:20px 20px 0px 0px;
           }
#header {
            height : 150px;
            border:1px solid #FFF;
            border-radius:20px 20px 0px 0px;
            /*background-image:url(../img/header.jpg);*/
            box-shadow:0px 0px 150px black;
            width: 1100px;           
             }
#sedebar-groupkiri{
margin-right:10px;
margin-bottom:10px;
height:auto;
float:left;
width:220px;
border:double #FF0000;
                                }
#sidebarkiri{
width:200px;
height:auto;
margin-top:10px;
margin-bottom:10px;
padding:5px;
background-color:pink;
                  }
#konten {
      font-size:28px;
      margin-bottom:10px;
      height:auto;
      float:left;
      width:620px;
      background-color:silver;
      margin-top:10px;
      padding:5px;
                  }
#sidebar-groupkanan {
      margin-left:5px;
      margin-bottom:5px;
      height:auto;
      float:right;
      width:220px;
      border:double #FF0000;   
                   }
#sidebarkanan{
            width : 200px;
            height : auto;
            padding:5px;
            background:pink;
            margin-top:10px;
            margin-bottom:10px;                     
                        }
#footer{
    margin-top: 5px;
    clear:both;
    border:double #FFFFFF;
    border-radius:0px 0px 10px 10 px;
    height:50px;  
              }

Selanjutnya tulis sintax ini pada index.php

index.php

  HASILNYA :

 

CSS adalah singkatan dari Cascading Style Sheets yang digunakan untuk mengatur tampilan dokumen.

HTML (Hyper Text Markup Language) merupakan sebuah bahasa yang digunakan untuk membuat sebuah halaman web.

PHP (Hypertext Prepocessor) merupakan bahasa pemograman yang digunakan untuk memperluas dalam pembuatan website yang disisipkan dalam bahasa HTML. Biasanya digunakan untuk website yang bersifat Dinamis.. (Angkast)