• Senin - Jumat 8.00 AM - 05.00 PM
coworking
Technologi
aknovia dibaca 14783 kali

Tutorial Pembuatan Website dengan Menggunakan Html Dan Css

1. Desain Layout Website

Dalam membuat satu website pastikan kita sudah membuat contoh layout atau bagannya, biasanya penulis membuat Layout website di kertas tulis, Ms Paint, atau di Adobe Photoshop.
Setelah membuat desain template website kita, selanjutna ialah kita harus menentukan section HEADER, MAIN BODY  atau FOOTER.

2. ‎Hard Coding Layout Website
Setelah kita telah selesai membuat layoutnya, saatnya kita membuat kode Html nya kedalam Notepad++ atau pun sejenisnya. Silahkan lihat kode yang dibawah ini:

  • Buat file HTML dengan nama ‘index.html‘ setelah itu masukkan kode dibawah ini :
<html>
<head>
<!--Element-elemen tag <head> tulis disini-->
<title>WEBSITE PERDANA SAYA</title>
</head>

<body>
<!--Element-elemen tag <body> tulis disini-->
</body>
</html>
    Kode yang diatas ini merupakan kode yang harus dibuat agar kita dapat membuat suatu website. Kita juga harus memperhatikan disetiap tag HTML harus ada tag pembuka (Contoh : <html>; <header>; <footer>) dan tag penutup (Contoh : </html>; </header>; </footer>).
    Berikut contoh penulisan kode HTML yang BENAR :
<body>
<!--Element-elemen tag <body> tulis disini-->
<main>
<div></div>
</main>
</body>
  • Setelah itu kita membuat  Layout website yang kita buat tadi pada Layout tersebut ada 3 section, yaitu section HEADER, MAIN BODY dan FOOTER, Lalu tugas kita adalah memasukkan 3 section  tersebut ke dalam tag <body>.
<body>
<!--Element-elemen tag <body> tulis disini-->
<header> <!--Section HEADER-->
</header>
<main> <!--Section MAIN BODY-->
</main>
<footer> <!--Section FOOTER-->
</footer>
</body>
  • Setelah Section telah kita buat, saat ini kita akan mendalami lagi, jika kalian perhatikan di gambar Layout untuk section HEADER terdapat 2 elemen (LOGO dan NAVIGASI), MAIN BODY 2 elemen (KONTEN dan SIDEBAR), lalu FOOTER tidak memiliki elemen. Silahkan kalian masukan elemen-elemen tersebut ke section-nya masing-masing.
<body>
<!--Element-elemen tag <body> tulis disini-->

<header> <!--Section HEADER-->
<div>LOGO</div>
<div>NAVIGASI</div>
</header>

<main> <!--Section MAIN BODY-->
<div>KONTEN</div>
<div>SIDEBAR</div>
</main>

<footer> <!--Section FOOTER-->
<div>FOOTER</div>
</footer>

</body>
  • Setelah kita selesai membuat struktur Html  website kita, Setelah itu  kita simpan perubahannya dan mari kita coba membuka file  index.html di Browser yang kita pakai kurang lebih tampilannya akan seperti gambar dibawah ini:

Secara penglihatan kita ini memang tampak belum sesuai Layout yang kita buat tadi  karena kita belum melakukan Styling Layout, namun secara struktur HTML sudah sesuai.

3. ‎Styling Layout dengan CSS

Setelah itu kita akan melakukan Styling Layout CSS agar tampilannya sesuai dengan Layout yang kita buat tadi sebelumnya. Mari ikuti langkah-langkah berikut ini:

  • Setelah itu kita harus membuat file CSSnya dengan nama ‘Style.css‘ setelah itu kita simpan di folder
  • yang ada file index.html yang kita buat tadi.Setelah itu kita buka lagi file index.html yang tadi terus kita tambahkan kode ini kedalam tag<head>.
<link rel=stylesheet href=layout.css />

Kode ini yang akan mmemanggil kode CSS supaya kita dapat menggunakan kode CSS. Setelah itu kita harus tambahkan class ke dalam tag dari elemen yang kita buat tadi karena bahasa pemrograman CSS hanya memanggil ID atau Class yang sudah di definisikan ke dalam elemen.

<body>
<!--Element-elemen tag <body> tulis disini-->

<header> <!--Section HEADER-->
<div class=logo>LOGO</div>
<div class=navigasi>NAVIGASI</div>
</header>

<main> <!--Section MAIN BODY-->
<div class=konten>KONTEN</div>
<div class=sidebar>SIDEBAR</div>
</main>

<footer> <!--Section FOOTER-->
<div class=footer>FOOTER</div>
</footer>
</body>

Untuk nama CLASS kita bebas mau buat namanya apa.

  • Selanjutnya kita buka file *CSS  yang telah kita buat tadi lalu kita letakkan kembali nama-nama CLASS pada elemen HMTL sebelumnya pada file *CSS.berikut dalam format:
.logo {}
.navigasi {}
.konten {}
.sidebar {}
.footer {}
  • Setiap nama class yang kita buat pada file *.CSS harus di mulai dengan simbol ‘titik‘ ( . ) di depan nama class-nya, kalau kita memakai ID pada element HTML (id = “nama_id”), maka penulisan di file *.CSS harus di mulai dengan simbol ‘pagar‘ ( # ).
  • Lalu kita masukkan kode CSS berikut untuk tiap class tersebut agar membentuk Layout seperti pada gambar Layout yang sudah kita buat sebelumnya.
body {
width: 960px; /*set lebar body website*/
margin: 30px auto; /*set posisi body (auto; left; right; center)*/
}

main {
display: flex;
}

.logo,
.navigasi,
.konten,
.sidebar,
.footer {
margin-bottom: 5px;
padding: 15px 0;
}

.logo {
width: 100%;
height: auto;
background: #99D9EA;
text-align: center;
}

.navigasi {
width: 100%;
height: auto;
background: #99D9EA;
text-align: center;
}

.konten {
width: 70%;
background: #EFE4B0;
}

.sidebar {
width: 30%;
background: #FD7E00;
}
.footer {
width: 100%;
background: #C3C3C3;
text-align: center;
}

Lalu kita mengisi konten-konten yang ingin kita gunakan untuk website kita nanti pada elemen-elemen HTML tadi agar benar-benar sesuai dengan Layout yang kita buat. Berikut saya memberikan link untuk anda yang ingin lebih belajar lagi.

https://www.w3schools.com/css/

Hasil akhir pembuatan website :

 

Ditulis oleh : Budi Arman

Sukai/Like Fan Page Facebook Garuda Cyber Indonesia

Subscribe Channel Youtube Garuda Cyber Indonesia

Follow Instagram Garuda Cyber Indonesia

Chat Wa

Artikel Terpopuler

Technologi
Ulti Desi Arni dibaca 229487 kali

Definisi Struktur Kontrol Perulangan Dalam Pemrograman Dan Contohnya

Pada dasarnya perulangan pada pemrograman yang sama dengan perulangan bahasa pemrograman lainnya. Struktur kontrol perulangan yang dipakai memilki suatu fungsi dari program yang akan dijalankan secara berulang. Contohnya anda ingin membuat tampilan nama anda sebanyak 100 kali, tentu akan sangat lama jika anda menuliskan kode program secara dengan manual. Dengan struktur kontrol perulangan bisa menampilkan dengan nama sebanyak 100 kali...
Read More