Materi 6

MATA KULIAH
PEMROGRAMAN WEB
Materi 6
Materi 6:
- Membuat Website Profil Pribadi
MEMBUAT WEBSITE PROFIL PRIBADI
Untuk membuat sebuah website terlebih dahulu harus menentukan kerangka website yang terdiri dari:
1. Header (kepala website),
2. Left menu (menu yang diletakan dikiri),
3. Content (isi dari website yg akan diletakan di sebelah kiri),
4. Footer (kaki dari website)
Berikut tahapan dalam membuat website :
1. Buatlah sebuah folder dengan nama uts.web.nim (nim masing-masing mahasiswa)
2. Kemudian buat 2 folder didalam uts.web.nim dengan nama style dan images
3. Kemudian buatlah file dangan nama index.html yang disimpan dalam folder uts.web.nim dengan mengikuti
kode dibawah ini:
<html>
<head>
<title>UTS</title>
<link rel="stylesheet" type="text/css" href="style/style.css"/>
</head>
<body>
<div id="site-container">
<div id="header"></div>
<div id="menu-content">
<div id="menu"></div>
<div id="content"></div>
<br class="floating" />
</div>
<div id="footer"></div>
</div>
</body>
</html>
4. Setelah itu buatlah sebuat file dengan nama style.css yang disimpan dalam folder style dengan mengikuti
kode dibawah ini:
*{
padding:0px;
margin:0px;
}

#site-container{
width:960px;
height:965px;
margin:20px auto;
border:1px solid #000;
padding-top:5px;
padding-bottom:5px;
}
5. Kemudian tambah kan kode dibawah ini untuk mengatur headernya:
#header{
width:950px;
height:280px;
margin:0px auto;
}
6. Tambahkan kode dibawah ini untuk mengatur menu-contentnya:
#menu-content{
width:950px;
height:auto;
margin:5 auto;
}
7. Selanjutnya atur bagian menu dan bagian konten pada web yang akan dibuat dengan mengikuti kode
dibawah ini:
#menu{
float:left;
width:300px;
height:600px;
}
#content{
float:right;
width:625px;
height:600px;
}
8. Kemudian kita atur untuk footer dengan kode dibawah ini dan tambahkan juga kode <br class="floating" />
pada file index sebelum </div>:
#footer{
width:950px;
height:70px;
margin:5px auto;
}
.floating{
clear:both;
height:0px;
line-height:0px;
}
9. Setelah selesai maka tampilan website akan sesuai dengan kerangka yang telah ditentukan diawal tadi,
kemudian untuk memberikan background pada header dengan menambahkan kode dibawah ini:
background:url(../images/header_1.png);
10. Untuk memberikan judul pada header tambahkan kode dibawah ini pada file index.html yang diletakan
antara <div id="header“> ---------- </div>
<h1><a href="index.html">Website Profil Rekam Medis</a></h1>
11. Kemudian atur style untuk judul pada file css dengan menambahkan kode dibawah ini:
#header a{
font:17pt 'Matura MT Script Capitals';
color:#d65bb8;
}
#header p{
font:12pt 'Brush Script Std';
color:#050505;
}
12. Agar posisi judul dibawah tambahkan kode berikut didalam #header maka akan terlihat sebagai berikut:
#header{
width:900px;
height:130px;
background:url(../images/header_1.png);
margin:5px auto;
padding-top:150px;
padding-left:50px;
}
13. Kemudian untuk membuat menu berada disamping kiri dengan menambahkan kode dibawah ini kedalam file
index.html yang disisipkan antara <div id="menu"> ------ </div>:
<h3 class ="judul_1">Main Menu</h3>

<ul>
<li><a href="indext.html">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Contact</a></li>
</ul>
14. Untuk mempercantik bisa tambahkan kode css didalam file style.css seperti dibawah ini:
.judul_1{
display:block;
height:35px;
background:#032347;
font:20pt "Script MT Bold";
color:rgb(255, 255, 255);
text-align:center;
border:1px solid rgb(255, 255, 255);
}
#menu ul{
list-style:none;
}
#menu li a{
display:block;
height:28px;
background:#24538a;
font:16pt "Brush Script Std";
color:rgb(255, 255, 255);
text-decoration:none;
border-bottom:1px solid rgb(255, 252, 252);
border-left:1px solid rgb(255, 255, 255);
border-right:1px solid rgb(255, 255, 255);
padding-left:20px;
}
15. Selanjutnya kita beri effek hover pada menu
#menu li a:hover{
background:#24538a;
color:#fff;
}
16. Setelah membuat menu selanjutnya membuat isi konten dengan memasukan kode berikut pada file index
yang diletakan antar <div id="content"> ------ </div>:
<h1 class="judul_2">Welcome To My Blog's</h1>

<img src="images/coba.jpg" class="img"/>
<p>ISI KONTEN
</p>
17. Kemudian atur style css pada #content dengan kode dibawah ini:
#content{
width:610px;
height:auto;
/*border:1px solid #000;*/
float:right;
background:#99cc66;
padding:15px;
18. Kemudian atur style judul artikel dan gambar dengan menambahkan kode berikut kedalam file css:
.judul_2{
display:block;
border-bottom:2px solid rgb(255, 253, 253);
font:26pt "Script MT Bold";
color:#fff;
padding-bottom:10px;
}
.img{
width:250px;
height:200px;
border:5px solid #fff;
margin-top:20px;
margin-right:20px;
float:left;
}
#content p{
margin-top:20px;
font:12pt 'Script MT Bold';
color:#ffffff;
}
19. Selanjutnya masukan kode dibawah ini antara <div id="footer"> ---- </div>
<p>Copy Left©2020.</p>
20. Atur file css footer dengan kode berikut ini:

#footer{
width:950px;
height:40px;
margin-top:5px;
margin-bottom:0px;
margin-right:auto;
margin-left:auto;
background:#24538a;
text-align:center;
padding-top:30px;
font-weight:bold;
color:#fff;
}
21. Terakhir tambahkan background halaman dan background pada #site-container:
body{
background:#00ff99;
font:10pt verdana;
}
#site-container{
----
-----
background:#ffffcc;
-----
-----
}
HASILNYA AKAN SEPERTI WEBSITE DIBAWAH INI

Materi 6

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Materi 6

Diunggah oleh

Hak Cipta:

Format Tersedia

MATA KULIAH

<h3 class ="judul_1">Main Menu</h3>

15. Selanjutnya kita beri effek hover pada menu

<h1 class="judul_2">Welcome To My Blog's</h1>

20. Atur file css footer dengan kode berikut ini:

Anda mungkin juga menyukai