Membuat Tampilan Layout Website Sederhana Dengan HTML dan CSS


membuat tampilan layout website dengan html dan css

Membuat Tampilan Layout Website Sederhana Dengan HTML dan CSS

Membuat Tampilan Layout Website Sederhana Dengan HTML dan CSS – Layout atau susunan kerangka website adalah salah satu unsur pembuatan web yang harus paling di perhatikan. terutama untuk teman-teman yang ingin mengkhususkan diri di bagian web designer. karena tampilan website akan menggambarkan tingkat profesional seseorang web designer. di tutorial ini saya akan mencoba untuk menjelaskann tentang cara Membuat Tampilan Layout Website Sederhana Dengan HTML dan CSS. jadi di tutorial ini akan di jelaskan tentang teknik pembuatan layout website paling sederhana. untuk teman-teman yang beru menyelesaikan pelajaran tentang HTML Dasar dan CSS Dasar, teman-teman bisa melanjutkan pebelajaran teman-teman di artikel ini untuk mulai membuat tampilan website sederhana.

Tampilan website yang akan kita buat di sini adalah tampilan website yang paling sederhana saja. karena artikel ini di tujukan untuk teman-teman yang baru belajar. oleh sebab itu teknik membuat tampilan website nya akan di bahas yang sangat dasar dulu. dari penyusunan element-element HTML untuk membuat kerangka website. nanti yang lebih jauhnya akan kita bahas pada tutorial selanjutnya di www.malasngoding.com. pada artikel selanjutnya saya akan membahas tentang cara membuat tampilan website dengan design nya. juga akan saya bahas tentang cara membuat tampilan website/template website yang responsive dengan menggunakan CSS(tidak menggunakan bootstrap).

Membuat Tampilan Layout Website Sederhana Dengan HTML dan CSS

Jadi di sini akan saya jelaskan tentang layout yang paling standart dan paling umum. bisa teman-teman perhatikan susuan kerangka website sederhana seperti di gambar berikut.

Membuat tampilan layout website sederhana dengan html dan css

Membuat tampilan layout website sederhana dengan html dan css

coba teman-teman perhatikan pada contoh layout web pada gambar di atas. gambar di atas adalah susunan biasa dan sangat umum untuk tampilan sebuah website. di mana terdapat sebuah header pada bagian atas. sidebar di bagian kiri atau kanan. konten yang bersebelahan dengan sidebar. dan footer terdapat pada bagian paling bawah.

Pada bagian header sebuah website biasanya di letakkan judul website, dan deskripsi sebuah website tersebut. pada sidebar biasanya di letakkan link-link yang mengarah pada artikel-artikel. baik itu artikel terbaru dan artikel paling populer. pada bagian konten berisi konten-konten website seperti artikel dan lainnya. dan pada bagian paling bawah yaitu footer biasanya berisi nama website dan copyrigt website tersebut.

Membuat Layout Tampilan Website Sederhana

nah sekarang kita akan mulai membuat sebuah layout website yang paling sederhana sama seperti format pada gambar di atas. untuk bisa mudah memahami tentang cara membuat template website. teman-teman harus memahami dulu dasar-dasar HTML dan CSS. baca postingan sebelumnya tentang tutorial HTML Dasar. dan CSS dasar yang telah di bahas di www.malasngoding.com. buat sebuah file. di sini saya membuat sebuah file dengan nama index.html

index.html

dan buat sebuah file cssnya . buat dengan nama style.css

style.css

jalankan file index.html pada browser

membuat tampilan layout website sederhana dengan html dan css

membuat tampilan layout website sederhana dengan html dan css

nah tampilan layout sederhana pun selesai. sengaja warna pada masing-masing bagian saya bedakan dengan warna yang masih asal-asalan. agar teman-teman lebih mudah untuk memahaminya. baiklah sekian dulu tutorial tentang membuat tampilann layout website sederhana dengan html dan css. pada tutorial web design selanjutnya akan saya bahas tentang membuat sebuah template website sendiri dengan design yang menarik dan responsive tentunya.

Download

Incoming search terms:

  • membuat tampilan web menarik dengan css
  • contoh desain web menggunakan html dan css
  • cara membuat web sederhana dengan html dan css
  • membuat tampilan web yang menarik dengan php
  • cara membuat layout
  • contoh web sederhana dengan html dan css
  • membuat layout web dengan css
  • cara membuat website dengan html
  • cara membuat tampilan web
  • tampilan web



Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

TUTORIAL MENARIK LAINNYA

membuat slider responsive dengan css
membuat menu dropdown sederhana dengan css
Diskusi
14 Komentar
  • prediksi pertandingan bola 7 months ago

    walaupun banyak yang nulis konten seperti ini, tapi saya lebih suka konten yang di tulis di blog ini.

    • Diki Alfarabi Hadi 7 months ago

      terima kasih

  • nak belog 7 months ago

    maaf mas Diki Alfarabi Hadi
    saya lagi mencari desain css untuk web yang bisa dibuka sempurna di hape

    jadi desain website yang pakai % bukan yang pixel
    ada ya tutorialnya
    terima kasih

    • Diki Alfarabi Hadi 5 months ago

      ada mas, coba mas lihat di kategori web design. sudah pernah saya buat tutorialnya

  • Modu 7 months ago

    Emang mantap kontennya. Semangat min untuk sering-sering update.
    saya diam-diam baca dan share tiap kontenmu lho.

  • Samsul Junaidi 6 months ago

    Admin, bisa lebih sering update artikel gak? kadang lama
    banget nunggu update-nya. Padahal konten-kontenmu selalu bagus loh

    • Diki Alfarabi Hadi 6 months ago

      Masih dong, meskipun ada kesibukan lain, tapi masih tetap menyempatkan waktu untuk buat tutorial terus

  • Habily 6 months ago

    Wih thanks gan bagus nih kontennya jdi tau walau bbrp hehe, sukses terus

  • yvette 5 months ago

    Keren min

  • mposports 5 months ago

    Baru sempet baca postingan ini hari ini, dan ternyata kontennya menarik banget.
    Kayaknya aku akan sering mampir di mari, semangat update terus kontennya
    ya min.

  • edwar 5 months ago

    Emang mantap kontennya. Semangat min untuk sering-sering update.
    saya diam-diam baca dan share tiap kontenmu lho.

  • Muzakie 4 months ago

    Kak… Boleh minta nomor WhatsApp nggk?

    • Diki Alfarabi Hadi 3 months ago

      0896-0676-7404

  • Rio 2 months ago

    Bang mau nanya kan udah buat tampilan webnya trus gimana contoh script buat kotak pencahariannya trus buat link akun sosial media kita dicantumkan di web tersebut mohon bantuannya bang, terima kasih


Tulis Komentar / Pertanyaan

Your email address will not be published. Required fields are marked *