SCRIPT PEMBUATAN TAMPILAN WEBSITE
PEMBUATAN TAMPILAN WEBSITE DENGAN HTML DAN CSS
Anda yang ingin belajar HTML untuk membuat website dari dasar. Supaya Anda memahaminya, pastikan membacanya dan praktek dengan urut mulai dari awal.
Untuk Anda yang beranggapan jika membuat website itu sulit, dengan menyelesaikan tutorial yang kami buat, anggapan tersebut tidak akan berlaku.
Siapapun bisa belajar bagaimana caranya membuat website, yaitu diawali dengan mempelajari HTML terlebih dahulu sebagai pondasinya.
Setelah Anda menguasai HTML, kami pastikan Anda bisa membuat halaman website hanya kurang dari satu jam.
Banyak yang beranggapan untuk belajar membuat website perlu software yang mahal. Sebenarnya, dengan software yang sudah tersedia secara gratis, untuk menguasainya tidak memerlukan biaya yang mahal, bahkan bisa gratis.
gambar yang ada di scrib di bawah .
SILAHKAN EDIT SENDIRI SESUAI KEINGINAN TEMAN TEAMAN OK >
<html>
<head>
<title>halaman branda</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo-header">
LOGO
my
</div>
<div class="title-header">
JUDUL
</div>
</div>
<div class="menu">
<ul>
<li>BRANDA</li>
<li>PROFIL</li>
<li>KONTAK</li>
</ul>
</div>
<div class="content">
<table border="1">
<tr>
<td width="50px">No</td><td width="200px">Nama </td><td width="300px">Alamat</td>
</tr>
<tr>
<td>1</td><td>Rahmatul hidayat</td><td>Sungai besar</td>
</tr>
</table>
</div>
<div class="footer">
Rahmatulhidayat © 2019.
</div>
</div>
<body>
*{margin:0px;padding;0px}
.wrapper {
width:60%;
height:auto;
border:1px solid;
margin:0px auto;
padding:10px;
}
.header {
width:100%;
height:150px;
border:1px solid;
margin-bottom:10px;
background-color:#964B00;
}
.logo-header {
width:150px;
height:150px;
border:1px solid;
margin-left:10px;
float:left;
font-size:50px;
text-align:center;
line-height:140px;
background-color:#00ff00;
}
title-header {
width:400px;
height:100px;
border:1px solid;
margin-left:180px;
margin-top:30px;
font-size:50px;
text-align:center;
background-color:#ff0000;
color:#ffff00;
}
.menu {
width:100%;
height:40px;
border:1px solid;
margin-bottom:30px;
}
.menu ul li {
list-style:none;
width:100px;
height:40px;
border:1px solid;
float:left;
text-align:center;
line-height:40px;
background-color:#00ffff;
}
.menu ul li:hover{
background-color:#000000;
color:#ffff00;
}
.content {
width:100%;
height:400px;
border:1px solid;
margin-bottom:10px;
background-color:#808080;
}
.content table tr td {
text-align:center;
}
.footer {
width:100%;
height:50px;
border:1px solid;
text-align:center;
line-height:50px;
background-color:#8f00ff;
color:#ffff00;
}
Anda yang ingin belajar HTML untuk membuat website dari dasar. Supaya Anda memahaminya, pastikan membacanya dan praktek dengan urut mulai dari awal.
Untuk Anda yang beranggapan jika membuat website itu sulit, dengan menyelesaikan tutorial yang kami buat, anggapan tersebut tidak akan berlaku.
Siapapun bisa belajar bagaimana caranya membuat website, yaitu diawali dengan mempelajari HTML terlebih dahulu sebagai pondasinya.
Setelah Anda menguasai HTML, kami pastikan Anda bisa membuat halaman website hanya kurang dari satu jam.
Banyak yang beranggapan untuk belajar membuat website perlu software yang mahal. Sebenarnya, dengan software yang sudah tersedia secara gratis, untuk menguasainya tidak memerlukan biaya yang mahal, bahkan bisa gratis.
gambar yang ada di scrib di bawah .
SILAHKAN EDIT SENDIRI SESUAI KEINGINAN TEMAN TEAMAN OK >
<html>
<head>
<title>halaman branda</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo-header">
LOGO
my
</div>
<div class="title-header">
JUDUL
</div>
</div>
<div class="menu">
<ul>
<li>BRANDA</li>
<li>PROFIL</li>
<li>KONTAK</li>
</ul>
</div>
<div class="content">
<table border="1">
<tr>
<td width="50px">No</td><td width="200px">Nama </td><td width="300px">Alamat</td>
</tr>
<tr>
<td>1</td><td>Rahmatul hidayat</td><td>Sungai besar</td>
</tr>
</table>
</div>
<div class="footer">
Rahmatulhidayat © 2019.
</div>
</div>
<body>
dan code css ada di bawah ini silahkan copy juga>
*{margin:0px;padding;0px}
.wrapper {
width:60%;
height:auto;
border:1px solid;
margin:0px auto;
padding:10px;
}
.header {
width:100%;
height:150px;
border:1px solid;
margin-bottom:10px;
background-color:#964B00;
}
.logo-header {
width:150px;
height:150px;
border:1px solid;
margin-left:10px;
float:left;
font-size:50px;
text-align:center;
line-height:140px;
background-color:#00ff00;
}
title-header {
width:400px;
height:100px;
border:1px solid;
margin-left:180px;
margin-top:30px;
font-size:50px;
text-align:center;
background-color:#ff0000;
color:#ffff00;
}
.menu {
width:100%;
height:40px;
border:1px solid;
margin-bottom:30px;
}
.menu ul li {
list-style:none;
width:100px;
height:40px;
border:1px solid;
float:left;
text-align:center;
line-height:40px;
background-color:#00ffff;
}
.menu ul li:hover{
background-color:#000000;
color:#ffff00;
}
.content {
width:100%;
height:400px;
border:1px solid;
margin-bottom:10px;
background-color:#808080;
}
.content table tr td {
text-align:center;
}
.footer {
width:100%;
height:50px;
border:1px solid;
text-align:center;
line-height:50px;
background-color:#8f00ff;
color:#ffff00;
}
Komentar
Posting Komentar