membuat layout website sederhana dengan html css

share

membuat layout website sederhana dengan html css membuat layout website sederhana dengan html css membuat layout website sederhana dengan html css membuat layout website sederhana dengan html css membuat layout website sederhana dengan html css
  • membuat layout website sederhana dengan html css

    Membuat Layout Website Sederhana dengan HTML CSS


    Tutorial cara membuat layout website sederhana dengan HTML CSS merupakan bagian penting dalam merancang desain tampilan situs, pekerjaan ini biasanya dilakukan oleh UI UX web designer.
  • membuat layout website sederhana dengan html css
    Service
    1. Complete Website
    2. Only web script
    3. Web modification
    4. Application program
    5. Free web template
    6. Free application
    7. Basic SEO
    8. Article request
    9. Tutorial programing
  • membuat layout website sederhana dengan html css
    MOTO
    "Kepuasan Pelanggan adalah Prioritas kami, Sebagai Pemicu Semangat Dalam Memberikan Pelayanan Terbaik".
  • membuat layout website sederhana dengan html css Teknologi dan Bahasa
    PHP-5, HTML-5, CSS3, SQL Server, MySQL Database, Access Database, Java, JavaScript, dan Visual Basic.
  • membuat layout website sederhana dengan html css
    VISI
    "Menjadi penyedia layanan yang terpercaya dan maju dalam dunia Teknologi Informasi."

Membuat Layout Website Sederhana dengan HTML CSS

Membuat layout website sederhana dengan HTML CSS merupakan bagian penting dalam merancang desain tampilan situs, pekerjaan ini biasanya dilakukan oleh UI UX web designer. Membuat layout website dengan HTML dan CSS oleh web designer bertujuan agar tampilan web dapat terlihat profesional dan memiliki tujuan yang jelas. Meskipun sederhana, inilah awal dari design web yang keren dan profesional, sebagai dasar pengenalan sebuah struktur atau arsitektur kerangka situs. Jika terbiasa membuat layout website sederhana bisa saja dikemudian hari dapat mengembangkan sendiri framework css atau kerangka kerja situs dan aplikasi web. Sebuah framework yang berisi template desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi, serta ekstensi JavaScript.

Tutorial cara membuat layout website sederhana dengan html css kali ini akan kita buat sesimple mungkin tetapi dasain tampilan tetap keren dan friendly. Sebagaimana telah kami bahas juga sebelumnya pada artikel ini cara membuat desain web dua kolom tanpa javascript. Jadi pembahasan kali ini adalah cara membuat layout web sederhana seperti saat kita sedang belajar HTML dan CSS tanpa menggunakan framework seperti Bootstrap dan sejenisnya.

Membuat Layout Website Sederhana dengan HTML CSS


membuat layout web sederhana

Berikut adalah daftar isi secara urut tutorial cara membuat layout website sederhana dengan html css yang keren tanpa framework apapun.

  • Membuat Folder Direktori
  • Membuat Kode HTML untuk Membentuk Layout
  • Membuat Style CSS pada Layout Web.


1. Membuat Folder Direktori Tutorial.

Buat sebuah folder pada drive manapun misal dengan nama "web-design", tujuan folder ini adalah untuk menyimpan file source code html maupun css. Jika menggunakan assets file sejenis gambar, folder direktori ini juga dapat digunakan untuk menyimpan aset tersebut.

Sehingga struktur folder menjadi seperti gambar di bawah ini.

membuat layout website sederhana dengan html css


2. Membuat Kode HTML untuk Membentuk Layout.

Membuat kode html ini adalah tahapan pertama proses coding dalam membuat layout website sederhana dengan html css. Dengan kode html ini maka kerangka atau stuktur arsitektur sebuah website telah terbentuk, namun belum memiliki style.

Simpan kode html berikut sebagai index.html

<!DOCTYPE html>
<html>
 <head>
  	<title>Membuat Layout Website Sederhana dengan HTML CSS</title>
  	<link rel="stylesheet" href="style.css"/>
 </head>
 <body>
	<div class="header">
		<div class="jarak">
			<h2>Membuat Layout Website Sederhana dengan HTML CSS</h2>
		</div>
	</div>
	<div class="menu">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	<div class="content">
		<div class="jarak">
			<!-- kiri -->
			<div class="kiri">
				<!-- blog -->
				<div class="border">
					<div class="jarak">
						<h3>Lorem Ipsum</h3>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, [...]</p>
						<button class="btn">Read More ..</button>
					</div>
				</div>
				<!-- end blog -->
				<!-- blog -->
				<div class="border">
					<div class="jarak">
						<h3>Excepteur</h3>
						<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit ...</p>
						<button class="btn">Read More ..</button>
					</div>
				</div>
				<!-- end blog -->
			</div>
			<!-- kiri -->
			<!-- kanan -->
			<div class="kanan">
				<div class="jarak">
					<h3>CATEGORY</h3>
					<hr/>
					<p><a href="#" class="undecor">HTML</a></p>
					<p><a href="#" class="undecor">CSS</a></p>
					<p><a href="#" class="undecor">BOOTSTRAP</a></p>
					<p><a href="#" class="undecor">PHP</a></p>
					<p><a href="#" class="undecor">MYSQL</a></p>
					<p><a href="#" class="undecor">Jquery</a></p>
					<p><a href="#" class="undecor">Ajax</a></p>
				</div>
			</div>
			<!-- kanan -->
		</div>
	</div>
	<div class="footer">
		<div class="jarak">
			<p>copyright © 2017. Your all reserved</p>
		</div>
	</div>
</body>
</html>

Perhatikan baris kode ke-5 yaitu <link rel="stylesheet" href="style.css"/> terdapat link rel style tertuju ke file style css. Di dalam file css tersebut kita dapat melakukan custom style sehingga layout website sederhana ini menjadi lebih keren dengan implementasi style.


3. Membuat Style CSS pada Layout Web.

Sebagaimana penjelasan di atas, kita membutuhkan kode css untuk membentuk style sehingga membuat layout website sederhana dengan html css menjadi lebih keren.

Simpan kode css dibawah ini sebagai style.css

body{
    background:#f3f3f3;
    color:#333;
    width:100%;
    font-family:sans-serif;
    margin:0 auto;
}

.header{
    width:90%;
    margin:auto;
    height:120px;
    line-height:120px;
    background:#417aa8;
    color:#fff;
}

.menu{
    background-color:#417aa8; 
    height:50px; 
    line-height:50px; 
    position:relative;
    width:90%;
    margin:0 auto;
    padding:0 auto;
}

.jarak{
    padding:0 2pc;
}

.menu ul {
    list-style:none;
}

.menu ul li a {
    float:left; 
    width:70px; 
    display:block; 
    text-align:center; 
    color:#FFF; 
    text-decoration:none; 
}

.menu ul li a:hover {
    background-color:#4b88bb; 
    display:block;
}

.content{
    width:90%;
    margin:auto;
    height:420px;
    padding:0.1px;
    background:#fff;
    color:#333;
}

.border{
    border:2px solid #4887b9;
    margin-top:1pc;
    padding-bottom:1pc;
    padding-left:2pc;
    padding-right:2pc;
}

.kiri{
    width:70%;
    float:left;
    margin:auto;
    background:#fff;
    height:420px;
}

.kanan{
    width:30%;
    float:left;
    margin:auto;
    background:#fff;
    height:420px;
}

.undecor{
    text-decoration:none;
}

.footer{
    width:90%;
    margin:auto;
    height:40px;
    line-height:40px;
    background:#417aa8;
    color:#fff;
    margin-bottom: 1pc;
}

Sampai disini pembahasan tutorial cara membuat layout website sederhana dengan html css sehingga menjadi template web yang keren telah selesai. Jika tutorial ini kita jalankan di web browser maka akan menampilkan halaman layout website sederhana seperti gambar di bawah ini.

membuat layout website sederhana dengan html css

Jika ingin merubah warna, font, dan lainnya pada layout website sederhana tersebut, silahkan sesuaikan properti nya pada file style css.

Cara Membuat Layout Website Sederhana dengan HTML CSS

Sekian penjelasan tentang tutorial bagaimana cara membuat layout website sederhana dengan html css sehingga menjadi sebuah template web yang keren dan profesional. Untuk mendapatkan source code layout website Anda dapat langsung mengkopi melalui jendela kode di atas. Jika terjadi error silahkan hubungi kami melalui chat atau melalui form komentar dan obrolan. Semoga dapat membantu.

Baca juga :


Membuat Layout Website Sederhana dengan HTML CSS

Tags: membuat layout website sederhana, membuat layout web dengan html, layout website sederhana, layout web html css, membuat layout website sederhana dengan html css


Reliable

membuat layout website sederhana dengan html css

Advertise

Archive

Payment & Donation

membuat layout website sederhana dengan html css

Rekening BCA : 343 1156 006

a/n : Andi Hatmoko

Rekening MANDIRI : 13300 11921 079

a/n : Andi Hatmoko

membuat layout website sederhana dengan html css

Account :

andihatmoko@gmail.com

Live Chat

michel2024-02-14, 03:51 am
mw tanya apakah ada source untuk pendtaan koperasi
Edisman2024-02-13, 22:28 pm
Bagaimana cara saya mendapatkan aplikasi Cuti
Edisman2024-02-13, 22:15 pm
Saya tertarik aplikasi cuti online
Wawan2024-02-06, 11:25 am
Apakah ada aplikasi khusus penyewaan multimedia dengan custom output invoice, kwitansi, Laporan
Dedi Maryadi2024-01-24, 18:02 pm
Saya tertarik beberapa aplikasi web nya jadi bagaimana cara tahu harga nya_ _ _ _ mohon info nya
erdi2024-01-18, 08:42 am
mw tanya harga aplikasi sppd v2
turido2024-01-14, 10:55 am
gan,harga & cara order Aplikasi Inventory Barang Gudang berbasis web bagaimana ya?
Tubagus Rifk2023-12-14, 20:43 pm
link download nya gak ada gan
ade supriadi2023-12-13, 23:35 pm
mw tanya harga aplikasi sppd v2_ _
Agus PS2023-12-05, 08:51 am
Cara download aplikasi upload foto bagaimana ya Kak?
Wicak2023-12-01, 13:05 pm
Mau tanya harga
harun 2023-11-07, 21:16 pm
cera beli aplikasi arsip digital bagaimana ?
anto2023-10-30, 20:17 pm
saya tertarik ingin mencoba aplikasi input data anggota
ilham2023-10-17, 10:46 am
harga untuk aplikasi pembuat ktp berapa
ALFA2023-10-13, 06:51 am
berapa harga simpeg 7_ 2 dan apakah bisa print surat keputusan kenaikan berkala dan golongan?
Abdul Jabbar2023-10-10, 11:23 am
berapa harganya
basoke2023-10-07, 10:42 am
Berapa harganya SIMASN?
Adi2023-10-03, 16:23 pm
Bagaimana cara download aplikasi rental?
David2023-09-29, 16:02 pm
Untuk aplikasi arsip berapa donasinya , terima kasih
AYI SYAHFITR2023-09-25, 10:33 am
Assalamualaikum, maaf apakah aplikasi ini berbayar atau bisa di instal bebas?
yulli2023-09-24, 17:09 pm
saya mau bertanya utk aplikasi sppd,brp dijualnya,terimakasih
yulli2023-09-24, 17:00 pm
saya mau bertanya utk aplikasi sppd,brp donasinya,
DENIEL AFRIA2023-09-20, 15:01 pm
berapa unruk program_ aplikasi_ surat_ masuk_ dan_ surat_ keluar
untuk harga 2023-09-20, 07:20 am
untuk harga aplikasi sipas brp min
Slamet2023-09-19, 10:05 am
untuk program aplikasi pendataan umkm, kalau boleh tahu dijual berapa?_ terima kasiih
Pria2023-09-14, 14:37 pm
untuk donasi menggunakan aplikasi ini berapa gan
Amot2023-09-09, 08:46 am
apakah framework nya php kak? berapa minimal donasi kak agar dpt password nya?
besse2023-08-25, 13:56 pm
minta kontak wa
rizal2023-08-24, 06:09 am
untuk harga aplikasi sipas brp min
Muji2023-08-20, 22:51 pm
Saya dan temen_ temen seorganisasi tertarik dengan Program Aplikasi Input Data Anggota, berapakah harga aplikasi tersebut
Auriga Danur2023-08-14, 11:32 am
File koneksi_ php nya kok gak ada ya?
Miftah2023-08-09, 16:36 pm
Apakah bisa develope aplikasi sistem management atlet, khususnya cabang olahraga atletik, data atlet, result event, dll
sutrisno2023-08-09, 11:45 am
bos haraga aplikasi surat berapa
Fahrul,S.Kom2023-08-07, 15:34 pm
saya tertarik dengan aplikasi SIPAS V2_ 0
ratna2023-07-30, 09:44 am
Mas aplikasi Sppd harganya berapa njih
Cien2023-07-25, 08:33 am
Buat biodata diri pakai tipe data boolean di php bagaimana min?
Viqi2023-07-20, 11:40 am
Untuk mendapatkan Aplikasi sarpras V4, Bayar berapa min?
Bimo Cakti T2023-07-13, 13:54 pm
aplikasi cuti online pegawai berapa min? mohon info
Dwi P2023-07-11, 21:45 pm
Mohon maaf mau menanyatakn aplikasi SIMPEG kira_ kira berapa harganya? Bisa dilist kan untuk semua SIMPEG
Duta2023-07-10, 18:38 pm
Saya ingin beli aplikasi Sipas V2_ 0
Alex2023-07-10, 11:38 am
Halo gan saya mau nanya2 dulu ya_ aplikasi perjalanan dinas SPD v2 itu bisa kita dapat source codenya donasi berap yah_ _
FIYO FAHREZI2023-07-09, 21:25 pm
Mas saya mau beli aplikasi KTP
sila susila2023-07-09, 17:06 pm
aplikasi pembayaran SPP sekolah donasi berapa klo untuk skripsi?
aa2023-07-06, 21:43 pm
net simpeg brp min?
aditya2023-06-22, 13:12 pm
berapa harga untuk aplikasi inventory? bagaimana transaksinya?
michael 2023-06-20, 23:06 pm
saya mau tanya kalo penamabahan harga untuk jumlah keseluruhan nya tu bgimana ya? terima kasih
Muhadi2023-06-20, 12:14 pm
Software aplikasi pembayaran SPP sekolah bisa diakses pakai HP tidak?
Fadly2023-06-18, 20:41 pm
Source code aplikasi arsip digital di jual harga berapa min? minat SC nya saja
Marisca2023-06-13, 08:16 am
Saya sedang diklat PIM IV, rencana akan memakai aplikasi kepegawaian simpeg untuk proyek perubahan, bisa dibantu?

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat layout website sederhana dengan html css