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
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
Malas Ngoding
Tutorial belajar membuat layout website sederhana
Home
HTML
CSS
PHP
Javascript
sidebar
Tutorial HTML dasar
Tutorial CSS dasar
Tutorial PHP dasar
Tutorial JQuery dasar
content
footer
dan buat sebuah file cssnya . buat dengan nama style.css
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
.wrap{
background: blue;
width: 900px;
margin: 10px auto;
}
/*bagian header*/
.wrap .header{
background: green;
/*height: 50px;*/
padding: 2px 10px;
}
/*akhir header*/
/*bagian menu*/
.wrap .menu{
background: yellow;
}
.wrap .menu ul{
padding: 0;
margin: 0;
background: yellow;
overflow: hidden;
}
.wrap .menu ul li{
float: left;
list-style-type: none;
padding: 10px;
}
/*akhir menu*/
.clear{
clear: both;
}
.badan{
height: 450px;
}
/*bagian sidebar*/
.wrap .badan .sidebar{
background: orange;
float: left;
width: 25%;
height: 100%;
}
/*akhir sidebar*/
.wrap .badan .content{
background: red;
float: left;
height: 100%;
width: 75%;
}
.wrap .footer{
width: 100%;
padding: 10px;
}
jalankan file index.html pada browser
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
- SHARE :
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.
- Author's profile
- All posts by Diki Alfarabi Hadi
Tags: cara membuat layout html, cara membuat layout perusahaan, cara membuat tampilan web dengan html, contoh desain layout web, contoh layout web dengan html, contoh layout web design, contoh layout website keren, membuat layout web dengan css dan php, membuat tampilan web menarik dengan css, membuat tampilan website dengan css, membuat tampilan website dengan dreamweaver, membuat tampilan website dengan photoshop, membuat tampilan website dengan php, membuat tampilan website menarik, membuat tampilan website menarik dengan php, membuat tampilan website untuk mobile
Produk
- Source Code Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200,000
- Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website Rp 200,000
- Source Code Toko Sport PHP dan MySQLi Rp 200,000
- Source Code Sistem Informasi Kuesioner Berbasis Web Rp 200,000
Tutorial Terbaru
- Tutorial Python # 13 : Jenis Operator Pada Python September 24, 2022
- Membuat Laporan PDF Dengan PHP dan MySQLi September 3, 2022
- Export Data ke Excel Dengan PHP dan MySQLi August 23, 2022
- Membuat Select Option Dinamis Menggunakan Ajax August 17, 2022
- Membuat QR Code Dengan PHP August 3, 2022
Toko Kami
SOCIAL
Malas Ngoding
TUTORIAL MENARIK LAINNYA
Membuat Slider Responsive Dengan CSS Membuat Slider Responsive Dengan CSS – Selamat datang kembali di tutorial web design dari www.malasngoding.com. pada tutorial ini kita akan ... Diki Alfarabi HadiMembuat Slider Responsive Dengan CSS
9 October 2018
Membuat Desain Form Login Dengan CSS Membuat Desain Form Login Dengan CSS – halaman form login adalah sebuah halaman yang di akses oleh user ketika ... Diki Alfarabi HadiMembuat Desain Form Login Dengan CSS
24 September 2018
Membuat Menu Dropdown Sederhana Dengan CSS Membuat Menu Dropdown Sederhana Dengan CSS, Itulah judul yang kita bahas pada tutorial ini, untuk melengkapi tutorial web design ... Diki Alfarabi HadiMembuat Menu Dropdown Sederhana Dengan CSS
17 September 2018
Kumpulan Kode Warna Flat Design – Selamat datang di artikel rekomendasi warna untuk flat design dari www.malasngoding.com. Di artikel kali ini kita tidak membahas tentang ...