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

josh hutapea2023-01-26, 13:10 pm
mau pesan aplikasi gimana caranya
tania2023-01-20, 09:53 am
kalo mau mesen aplikasi berbasis web bisa ga ka
Irfan 2023-01-16, 10:13 am
klo mau pesan aplikasi ke no wa mana
Jenny Sokoy 2023-01-11, 13:18 pm
cara membuat aplikasi absensi siswa
alvinno2022-12-27, 01:52 am
berpa aplikasi Program Aplikasi Pembayaran SPP Sekolah
Ronny2022-12-21, 17:34 pm
Jika saya butuh aplikasi CAT custom berapa ya?
reo2022-12-21, 09:46 am
berapa harga untuk apk rental mobil
anto2022-12-19, 11:48 am
aplikasi pos nya tidak bisa di download ya_ ? apa sekarang berbayar_ buat referensi tugas akhir
NDARU SUBEKT2022-12-19, 11:02 am
untuk simpeg 7_ 2 brp bos
Herawan2022-12-17, 06:24 am
Itu versi demo, utk versi non demo, ada pembayaran berapa?
afio2022-12-12, 15:55 pm
kak gimana cara download aplikasinya?
peres2022-12-09, 08:22 am
admin berapa harga aplikasi sipasnya_ ?
thomas2022-11-29, 08:07 am
brp aplikasi HRD
Repades Patr2022-11-26, 14:51 pm
aplikasi bisnis rental barang berapa ?
Ifan2022-11-19, 23:28 pm
Aplikasi pendataan pegawai harga berapa?
yunislisa2022-11-09, 10:42 am
Bisa nggak saya request aplikasi penyadap SMS? Dan biayanya berapa?
AZ2022-11-07, 16:06 pm
Halo utk aplikasi surat masuk keluar biaya nya berapa ya?
nursia2022-11-02, 15:42 pm
apakah aplikasi itu bisa di kostum sesuai kebutuhan, terimakasih, mohon info via email yaa
Nursia2022-11-02, 15:40 pm
apakah ada aplikasi tentang data pengembangan kompetensi _ diklat PNS? jika ada boleh infokan kepada saya
yosp2022-11-02, 05:35 am
saya ingin aplikasi bembayaran spp web
Irfan shobar2022-11-01, 20:20 pm
Ingin membuat KTP online
Riska koromo2022-10-20, 09:14 am
Ass Ka tutorial membuat aplikasi absen PKL berbasis web
Nst2022-10-15, 02:50 am
Bagaimana mengkoneksikannya dengan pelanggan?
Dennis2022-10-14, 22:40 pm
Saya tertarik dengan Program Rental Web Based, bagaimana untuk proses pembelianya?
Wan2022-10-07, 14:12 pm
Berapa harga aplikasi sisfo pasar
RANGGA2022-10-06, 14:10 pm
bang mau beli aplikasi pembuat KTP softcopy itu bang
Prathama2022-09-19, 15:48 pm
Aplikasi Koperasi Usaha Bisa
Andre2022-09-16, 23:31 pm
untuk aplikasi pengajuan judul skripsi berapa min
Basilio2022-09-15, 07:37 am
Pagi Bang ada aplikasi semua data siswa?
Bagus Andrem2022-09-11, 14:00 pm
Kl pembuatn aplikasi pos berbasi android berpa gan?
herry2022-09-01, 13:18 pm
saya di distribusi oksigen dgn sistem rental tabungnya_ saya butuh apk utk moinitoring tabung
Asri2022-08-27, 09:04 am
Brapa price tuk aplikasi manajemen database organisasi dan anggota 1 provinsi saja_ _
HERLI2022-08-25, 02:14 am
Untuk Harga SIPAS Brapa Bg ?
Usman Musa2022-08-24, 00:06 am
Mau tanya jika berapa biaya pembuatan Aplikasi Data Keanggotaan sebuah Organisasi atau Perguruan Silat
Bayu2022-08-20, 06:28 am
info harga aplikasi hrd berbasis web
Ferdyn Rede2022-08-07, 09:56 am
Bagaimana cara download link e_ ktp nya🙏🏻
Yuko Hermawa2022-08-05, 08:12 am
Boleh info harganya ? Ada fitur utk akses cloud gak ? Klo custom apakah bisa ?
efrin2022-07-15, 22:44 pm
Program Aplikasi Arsip Digital Berbasis Web mohon bertanya berapa harganya makasih
Toyo2022-07-13, 08:23 am
Brp harga Apk Inventory barang gudang
Leo2022-07-11, 18:37 pm
Halo selamat malam,, gmn cara beli aplikasi edit ktp ? Mksh
patrick2022-07-08, 21:35 pm
mau tanya bang kalo cara insert gambar pake query sql gimana ya
hery2022-07-08, 07:48 am
assalamu alaikum mau tanya mengenai pembuatan aplikasi untuk input data anggota SSB
siwimorin2022-07-05, 13:18 pm
mohon info aplikasi arsip surat tugas, lhp, dan B_ A_ S_ T untuk inspektorat
Rachmadi2022-06-29, 15:33 pm
mohon info harga aplikasi data anggota_ terima kasih

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat layout website sederhana dengan html css