Tutorial membuat tampilan Layout sederhana dengan HTML dan CSS

-

 Tutorial membuat tampilan Layout sederhana dengan HTML dan CSS

Ditulis oleh Mangandaralam Sakti, 11 september 2022



  Hallo semua!!  Pada blog kali ini saya akan membagikan tutorial membuat tampilan Layout sederhana menggunakan HTML dan CSS. Sebelum lanjut saya akan menjelaskan sedikit mengenai layout, bagi kalian yang belum tahu apa itu layout. 

  Layout adalah sebuah desain/tampilan awal sebuah website. Sebelum membuat laman website, biasanya para web development akan membuat tampilan layout terlebih dahulu, untuk rancangan website yang akan dia buat. 

  Jadi fungsi layout disini adalah sebagai tampilan awal sebelum membuat website sebenarnya agar kita dapat tergambar, bagaimana tampilan web yang akan kita buat agar menarik dan enak dilihat. 

  Baiklah mari kita lanjut ke tutorialnya. Berikut adalah langkah langkahnya:

🖌Langkah langkah membuat tampilan Layout:

1. Buat folder baru untuk menyimpan file HTML dan CSS. 




2. Lalu buat codingan di file HTML dan CSS seperti berikut: 



Bagian bagian layout:
1. Header 
Digunakan untuk membuat bagian header.        halaman web. Header berisi konten pengantar, elemen heading, logo atau ikon untuk halaman web, dan informasi authorship.
2. Navigasi
adalah konten untuk blok utama dari link navigasi. Ia dapat berisikan link menu yang sama untuk laman yang sama atau laman lainnya.
3. Sidebar 
Berisi konten yang terkait dengan konten utama. Konten <aside> harus terkait dengan konten utama. Ini dapat berfungsi sebagai bilah sisi untuk konten utama halaman web.
4. Body
Body berisi, isi dari sebuah web baik itu paragraf heading dan lain sebagainya. 
5. Artikel
digunakan untuk memuat artikel mandiri seperti cerita besar, artikel besar, dan lainnya.
6. Footer
Elemen HTML <footer> mendefinisikan footer untuk dokumen atau halaman web tersebut. Ini sebagian besar berisi informasi tentang penulis, hak cipta, tautan lain, dan lain sebagainya. 

Sekian tutorial dari saya semoga bermanfaat 

Pada blog berikutnya saya akan memposting seputar topik informatika dan pemrograman.... 


Baca juga:

  • Belajar Dasar dasar HTML part 1
  • Belajar Dasar dasar HTML part 2
  • Membuat tampilan layout dengan mencontoh website online
  • Membuat Linktree dengan HTMl dan CSS

    • Komentar

    Posting Komentar

    Postingan populer dari blog ini

    Cara Membuat Linktree dengan HTML dan CSS

    -
    Gambar
    Membuat Linktree dengan HTML dan CSS Hallo semua!!   Pada kesempatan kali ini saya akan membahas cara membuat linktree dengan HTML dan css.  Linktree pada sebuah web biasanya adalah tempat untuk kita menaruh sosial media atau kontak yang kita punya.  Baiklah tanpa berlama lama, langsung saja ke tutorialnya.  Pertama siapkan code editor, bebas code editor apa saja.  Lalu buat folder baru dan isi file tersebut dengan file index.html dan style.css, lalu ketikan source code berikut :   See the Pen Untitled by Mangandaralam Sakti ( @Mangandaralam-sakti ) on CodePen . Jika sudah simpan dan jalankan di browser tampilannya akan seperti ini : Baiklah sekian tutorial kali ini, semoga bermanfaat.... Lihat tutorial membuat layout lainnya : Membuat layout dengan pengambilan konten pada website online
    Baca selengkapnya

    Belajar Python dasar Variabel dan tipe data #part 1

    -
    Gambar
     Belajar Python dasar mengenal Variabel dan Tipe data  Ditulis oleh Mangandaralam Sakti 16 oktober 2022 Hallo semua!!! Pada blog kali ini saya akan membahas materi tentang dasar dasar bahasa pemrograman Python . Yaitu variabel dan tipe data. Sebelum lanjut mari kita berkenalan dulu dengan bahasa pemrogramman Python.  1. Pengertian Python Bagi kalian yang belum tahu bahasa pemrogramman Python adalah bahasa pemrogramman yang interpreted . Yaitu bahasa yang dapat digunakan diberbagai platform, yaitu : Windows, Linux, dan MacOs. Apa itu Compiler dan interpreted? 2. Kegunaan Python 💡 Membuat dan mengembangkan Aplikasi berbasis mobile maupun dekstop. 💡 Membuat sebuah Website, khususnya bagian backend. 💡 Mengembangkan software.  💡 Analisis data 💡 Membuat sebuah sistem IOT (Internet of things). Dan masih banyak lagi.  Bahasa pemrogramman Python juga sudah mendukung OOP (Object oriented Programming).  Dan bahasa ini juga cukup populer dikalangan pemula ...
    Baca selengkapnya

    Tugas Latihan membuat Layout website dengan pengambilan konten di Website online

    -
    Gambar
    Layout website steam Assalamualaikum warahmatullahi wabarakatuh  disini saya akan latihan membuat tampilan website dengan menggunakan software visual studio 2017 Saya memilih website steam untuk mencontoh membuat tampilan sebuah website.  Perlu diingat bahwa saya membuat ini untuk latihan, bukan untuk meniru.  1. Buka visual studio kalian dan buat folder baru, lalu isi dengan file html dan css   2. Lalu ketikkan source code berikut; See the Pen Untitled by Mangandaralam Sakti ( @Mangandaralam-sakti ) on CodePen . 3. Jika sudah simpan file nya lalu jalankan. Hasilnya akan seperti ini: Sekian dari saya semoga bermanfaat terima kasih Baca tutorial membuat layout lainnya di : Membuat linktree dengan HTML dan CSS Membuat Layout sederhana dengan HTML dan CSS
    Baca selengkapnya