layout html dan css dengan gampang

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 Ubuntu Software

Dan cara install nya sebagai berikut: 

untuk memasang Microsoft Visual Studio Code di Linux Ubuntu berikut ini langkah-langkahnya.

2.  Klik link download Visual Studio Code.

3. Tunggu sampai selesai dan open kalau sudah selesai

Selanjutnya kita akan Mempelajari cara membuat layout menggunakan HTML dan CSS

Di atas 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” seperti gambar di atas.

3. 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.

Untuk Hasilnya Anda Bisa Klik Result Yang Ada Di kolom Dibawah.

See the Pen Untitled by Alfi Fauziyah (@Alfi-Fauziyah) on CodePen.