Assalamualaikum wr.wb hai guys jumpa lagi diblog saya, kali ini akan membahas tentang pembuatan layout website dari HTML.
B.ALAT DAN BAHAN
-LAPTOP
-JARINGAN
-SUBLIM TEXT
C.LATAR BELAKANG
Layout adalah tata letak dari suatu elemen desain yang di tempatkan dalam sebuah bidang menggunakan sebuah media yang sebelumnya sudah di konsep terlebih dahulu.
D.MANFAAT DAN TUJUAN
untuk pembuatan tata letak suatu website
dapat mendesain website menggunakan HTML
mengembangkan website
E.PEMBAHASAN
1.isikan coding html berikut:
<!DOCTYPE html>
<html>
<head>
<title>website sekolah smk n 1 bangsri</title>
<link rel="stylesheet" type="text/css" href="lanjutan web.css">
</head>
<body>
<div id="qq">
<div class="image">
<div style="width: 180px; height: 180px;">
<img src="logosmk.png">
</div>
</div>
<div id="je">
<div style=" width: 1089px; height: 180px ;font-size: 100px; color: silver;"><center>SMK N 1 BANGSRI</center></div>
</div>
</div>
2.<ul>
<li><a href="nav.html"><a href="home2.html">Home</a></li>
<li><a href="nav.html"><a href="gallery2.html">Gallery</a></li>
<li><a href="nav.html"><a href="guru2.html">Guru</a></li>
<li><a href="nav.html"><a href="prestasi.html">prestasi</a></li>
<li><a href="nav.html"><a href="contact2.html">contact</a></li>
<img src="">
</ul>
</div>
<div id="nav">
<u>
<li><a href="nav.html"><a href="rpl.html">RPL</a></li>
<li><a href="nav.html"><a href="otkp.html">OTKP</a></li>
<li><a href="nav.html"><a href="akl.html">AKL</a></li>
<li><a href="nav.html"><a href="tbsm.html">TBSM</a></li>
<li><a href="nav.html"><a href="bdp.html">BDP</a></li>
</u>
</div>
</div>
<div id="nav">
<u>
<li><a href="nav.html"><a href="rpl.html">RPL</a></li>
<li><a href="nav.html"><a href="otkp.html">OTKP</a></li>
<li><a href="nav.html"><a href="akl.html">AKL</a></li>
<li><a href="nav.html"><a href="tbsm.html">TBSM</a></li>
<li><a href="nav.html"><a href="bdp.html">BDP</a></li>
</u>
</div>
</div>
<div id="section">
<h1>SMK N 1 BANGSRI</h1>
<p>
<img src="kepsek.jpg" height="150px" style="float: left;">
<p style="font-size: 12px; text-align: left; padding: 10px; float: left; width: 450px;">Assalamualaikum wr.wb
Semoga peluncuran website ini bisa dimanfaatkan sebaik-baiknya bagi upaya memperlancar proses pembelajaran sekaligus sebagai media komunikasi antar warga, baik siswa, guru, pegawai, orangtua siswa, komite, dan siapa pun yang berkepentingan dengan informasi seputar SMK Negeri 1 Bangsri
Wasalamualaikum wr.wb</p>
</p>
</div>
3.<div id="footer">
<marquee>@zulfiyanik5.blogspot.com</marquee>
</div>
</body>
</html>
coding css:
#qq {
width: 1269px;
height: 180px;
background-color: #800000;
}
.image
{
width: 180px;
background-color: #800000;
height:180px;
float: left;
}
#je
{
float: left;
width: 1089px;
background-color: #800000;
height:180px;
}
#header{
background-color: #800000;
color: yellow;
text-align:center;
padding: 2px;
padding-left: 400px;
}
#header{
background-color: #800000;
color:red;
text-align:center;
padding:2px;
padding-left:400px;
}
#nav{
line-height:40px;
background-color:#800000;
height:230px;
width:130px;
float:left;
padding:5px;
}
#section{
width:350px;
float:left;
padding:10px;
}
#footer{
background-color:#800000;
color: yellow;
clear:both;
text-align:center;
padding:5px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 125px;
font-weight: bold;
color: red;
background-color:#E9967A ;
text-align: center;
padding: 5px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: black;
}
F.REFERENSI
modul HTML
SAMPAI JUMPA, SEMOGA BERMANFAAT...
Wassalamualaikum wr.wb
0 komentar:
Posting Komentar