Langsung ke konten utama

CARA MEMBUAT LAYOUT MENGGUNAKAN HTML DAN CSS

MEMBUAT LAYOUT MENGGUNAKAN

HTML DAN CSS

Pada kesempatan kali ini, kita akan membuat layout pada sebuah halaman website. 

Aplikasi yang dibutuhkan adalah Visual Studio Code.Yang bisa kalian download di link berikut:https:https://code.visualstudio.com/

Dan cara install nya sebagai berikut: 

untuk memasang Microsoft Visual Studio Code di komputer Windows 10 berikut ini langkah-langkahnya.

1. Kunjungi situs web Visual Studio Code                

 
2. Klik link download Visual Studio Code.

3. Buka folder downloads.

4. Double klik hasil download.

5. Klil "I accept the agreement" dan klik Next.

 
 6. Klik Next.
 
7. Ceklis semua dan klik Next.
 

8. Klik Install.
 
 
9. Klik Finish.
 
 
 
Dan untuk selanjutnya kita akan Mempelajari cara membuat layout menggunakan HTML dan CSS
 
 
Ini adalah contoh layout yang terdiri dari Header, Menu, Sidebar-left, Content, Sidebar-right, Footer

Secara umum tampilan web memiliki 4 struktur layout yaitu:

  • Header
  • Silebar
  • Konten
  • Footer

Bagian header dapat berupa judul dan tagline website, bagian silebar bisa di masukan daftar menu atau ads. bagian konten merupakan bagian utama pada website dimana fokus pengguna akan lebih banyak menyorot pada bagian layout ini. yang terakhir bagian footer yang berada pada posisi bottom di website, biasanya berisi keterangan tambahan pada suatu website.

Selanjutnya mari kita lanjut tutorialnya.

1.Buatlah file HTML bernama “index.html”, lalu buatlah folder css dan gambar. Jadikan semuanya dalam satu folder project. Tepat seperti gambar di bawah ini.

2. Nantinya, folder “css” berisi file yang berisi script kode css.
Maka buatlah file dengan format .css pada folder ini. Sebagai contoh, disini kita buat filenya dengan nama “tampilan.css”.

3. Nah, pada folder “gambar”. Isinya adalah gambar-gambar pendukung konten dalam website.
Tepatnya seperti contoh di atas, contoh tampilan halaman yang akan kita buat. Kita isi dulu foldernya dengan gambar-gambar pendukung.

4. Lalu, pada file “index.html” kita ketikkan script kode berikut ini.
Sebelumnya, tambahkan juga script kode HTML untuk menghubungkan file HTML dengan file CSS yang sudah kita buat. Berikut ini adalah kode tersebut:

<link rel="stylesheet" href="css/tampilan.css">

Dan kode yang di atas tadi itu kita masukkan pada tag <tag></tag>.
Maka dari itu, ketikkan script kode ini secara keseluruhan.

Saya akan share code dari html dan css.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin padding</title>
   <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="header">
    <h1>WELCOME TO MY WEBSITE</h1>
    </div>
    <div class="menu">
    </div>
    <div class="sidebar-left">
    </div>
    <div class="konten">
    </div>
    <div class="sidebar-right">
    </div>
    <div class="footer">
    </div>
</body>
</html>


body {
    margin:0px;
    font-family: Arial, Helvetica, sans-serif;
}

.header {
    background-color:  #ff8000;
    height: 100px;
    padding:10px;
    margin: 10px;
    border-radius: 25px;
}

h1 {
    text-align: center;
}  

.menu {
    background-color: #FFEC00;
    height: 30px;
    padding: 5px;
    margin:10px;
    border-radius: 10px;
}
.sidebar-left {
    width:95px;
    padding:100px;
    height:400px;
    float:left;
    background-color: #00fffb;
    margin: 10px;
    border-radius: 10px;
}
.konten {
    float: left;
    padding:300px;
    background-color: #FFE4E1;
    margin-right: 10px;
    margin-top: 10px;
    border-radius: 10px;
   width:133px;
}
.sidebar-right {
    width:90px;
    padding:100px;
    height:400px;
    float:right;
    background-color: #00fffb;
    margin-top: 10px;
    border-radius: 10px;
}
.footer {
    height:30px;
    padding:15px;
    background-color: #585858;
    clear :both;
    margin:10px;

}



































































































































Dan itulah cara membuat layout menggunakan html dan css.

Komentar

Posting Komentar