Fermé

Cara membuat layout menggunakan html

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 copyrigth 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.

Pertama, buat sebuah file. di sini saya membuat sebuah file dengan nama [login to view URL]

[login to view URL]

<!DOCTYPE html>

<html>

<head>

<title>Judul Web Anda</title>

<link rel="stylesheet" type="text/css" href="[login to view URL]">

</head>

<body>

<div class="bingkai">

<div class="header">

<h1>Web [login to view URL]</h1>

<p>Tutorial belajar membuat layout website sederhana</p>

</div>

<div class="menu">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">PHP</a></li>

<li><a href="#">Javascript</a></li>

</ul>

</div>

<div class="badan">

<div class="sidebar">

sidebar

<ul>

<li><a href="#">Tutorial HTML dasar</a></li>

<li><a href="#">Tutorial CSS dasar</a></li>

<li><a href="#">Tutorial PHP dasar</a></li>

<li><a href="#">Tutorial JQuery dasar</a></li>

</ul>

</div>

<div class="content">

content

</div>

</div>

<div class="clear"></div>

<div class="footer">

footer

</div>

</div>

</body>

</html>

Simpan di folder yang sama dengan tutorial sebelumnya yah

selanjutnya anda buat sebuah file untuk script CSS

[login to view URL]

body{

background:#f4f4f4;

}

.bingkai{

background: #DDD;

width: 900px;

margin: 20px auto;

border : #CCC solid 1px;

}

/*bagian header*/

.bingkai .header{

background: #ea3b16;

/*height: 50px;*/

padding: 2px 10px;

}

/*akhir header*/

/*bagian menu*/

.bingkai .menu{

background: #eacd9a;

width:100%;

height:40px;

}

.bingkai .menu ul{

padding: 0;

margin: 0;

}

.bingkai .menu ul li{

float: left;

list-style: none;

padding: 10px;

}

/*akhir menu*/

.clear{

clear: both;

}

.badan{

height: 450px;

}

/*bagian sidebar*/

.bingkai .badan .sidebar{

background: #FFF;

float: left;

width: 25%;

height: 100%;

}

/*akhir sidebar*/

.bingkai .badan .content{

background: #f1f1f1;

float: left;

height: 100%;

width: 75%;

}

.bingkai .footer{

width: 100%;

padding: 10px;

}

Simpan file [login to view URL] di folder yang sama yah

nah sekarang anda coba jalankan file [login to view URL] di browser anda, maka tampilannya akan seperti ini

membuat-layout

Sekarang anda sudah dapat membuat tampilan layout sederhana dengan HTML dan CSS, silahkan anda kembangkan dan modifikasi sendiri yah..

Compétences : HTML, Design de site internet, PHP, Conception graphique , CSS

en voir plus : cara membuat desain ikon sederhana, bagaimana cara membuat logo sendiri, cara membuat desain logo sendiri, cara membuat gambar logo sendiri, cara membuat lambang islam sendiri, cara membuat logo dengan tangan sendiri, cara membuat logo desain sendiri, cara membuat logo komunitas menggunakan photoshop, cara membuat logo lambang sendiri, cara membuat logo nama sendiri, cara membuat logo olshop slime sendiri, cara membuat logo online dengan desain sendiri, cara membuat logo online html m 1, cara membuat logo online shop sendiri, cara membuat logo sepak bola sendiri, cara membuat web dengan design sendiri, cara membuat website sederhana dengan html 5, cara membuat web sederhana dengan html dan css, cara membuat landing page html, cara membuat aplikasi ojek online sendiri

Concernant l'employeur :
( 0 commentaires ) Bandung, Indonesia

Nº du projet : #24005459

12 freelance font une offre moyenne de $388 pour ce travail

malviyamanish

Hello, Having read your job description, I feel to be a good fit for this job, as I have hands-on experience working on the PHP, Mysql, HTML, JQuery Frameworks, as well as Major CMS's like Joomla, WordPress, and Magen Plus

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 7 jours
(291 Commentaires)
7.9
MagicArt178

Hi, I have read Your project description regarding Website Designs & Development. please check some of my work -- [login to view URL] [login to view URL] Plus

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 5 jours
(223 Commentaires)
6.7
WorldArt66

Hi, I saw your job opening while browsing for regarding layout using html please check some of my work -- [login to view URL] [login to view URL] [login to view URL] Plus

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 7 jours
(221 Commentaires)
6.2
ankitbagre2000

Hello, I'm Ankit I'm interesting your project very well I'm good in Website Design, HTHML, CSS , JAVASCRIT, JQUERY, AJAX, PHP and mysql expert. I’m quite well experienced in these jobs. Let's go ahead with me I wan Plus

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 7 jours
(56 Commentaires)
5.8
esolzpk

I am specialize in website design and development and are excited for the opportunity to work with you in accomplishing your goals.. I am Good at CSS, Graphic Design, HTML, PHP, Website Design.. ! Please Send me a mess Plus

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 6 jours
(22 Commentaires)
5.6
bharatchhabra13

Hi Clients, I am very interested in your respective job posts. Can we schedule an audio call for more discussion? Thankss.

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 7 jours
(24 Commentaires)
4.6
Ladiginvladislav

Hi I can do your job for you ASAP I have 5 years experience in web design I have experience in HTML, CSS, PHP, and JavaScript I have good skills in web design I am checking yours Looking forward to hearing your valua Plus

%bids___i_sum_sub_32% %project_currencyDetails_sign_sub_33% USD en 1 jour
(9 Commentaires)
3.8
nelishazoli001

Hello, Thank You For Job Posting :) I have 6+ years of experience in Website and Application development. I have checked The requirement and understand that as well. I have created SIMILAR in past. Do you want to Plus

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 7 jours
(0 Commentaires)
0.0
abhilimbachiya

Hello Web have gone through your requirement and would to take this opportunity to work on this project. Can you send a detailed requirement about your project. I have done 271+ projects successfully and Plus

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 7 jours
(0 Commentaires)
0.0
hankun4884

Saya seorang siswa SMK berumur 18 tahun, saya sudah membuat layoutnya. Silahkan nanti bapak/ibu cek layout saya jika itu memuaskan anda, saya mohon terima tawaran saya. Terima Kasih

%bids___i_sum_sub_32% %project_currencyDetails_sign_sub_33% USD en 1 jour
(0 Commentaires)
0.0
fajarsodik93

selamat siang, saya fajar sodik dari tangerang, indonesia saya adalah seorang web programmer jadi saya pikir ini adalah pekerjaan yang sangat cocok dengan keahlian saya, saya berharap kita dapat bekerja sama dalam Plus

%bids___i_sum_sub_32% %project_currencyDetails_sign_sub_33% USD en 1 jour
(0 Commentaires)
0.0
beeyank

anda sehat broo? udah minum obat? jangan lupa sebelum bobok minum susu ya. taku di gigit nyamuk. jadi pakai slimut ya ni na bobok oh ni na bobok

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 3 jours
(0 Commentaires)
0.0