Membuat Laman Web Sederhana Menggunakan HTML

 

Web Sederhana Menggunakan HTML – Assalamualaikum wr. wb kembali lagi bersama saya dan kali ini saya akan membagikan coding untuk membuat web sederhana menggunakan html, semoga bermanfaat dan salam bisyaaa. Pada artikel kali ini kita akan membuat laman web statis yang sederhana, dimana hanya untuk pembelajaran HTML dan CSS dasar. Anda juga bisa mengubah isinya sesuka kamu, dan bisa langsung di onlinekan.


<body>

<style type="text/css">
body {
background: url(satu.jpg);
}
#content {
width: 900px;
margin: auto; /* membuat posisi di tengah */
}
#header {
border:0px solid blue;
background: url(tiga.jpg);
padding: 40px;
margin-top:10px;
margin-bottom:10px;
text-align: center;
}

#menu {
background:#26C4C2;
width: 100%;
height: 65px;
margin: 0px;
padding: 0px;
position : relative;

}
#menu ul {
list-style: none;

}
#menu ul li {
float: left;
line-height: 65px
}
#menu ul li a {
float:left;
width:100px;
display:block;
text-align:center;
color:#FFF;
text-decoration:none;
}
#menu ul ul {
display:none;
list-style:none;
position:absolute;
background-color:#26C4C2;
float: none;
top:65px;
width:190px;
}
#menu ul li a:hover {
background-color:#2E9EA2;
display:block;
}
#menu ul li:hover ul {
display:block;
}
#menu ul ul li a {
display:block;
padding-left:30px;
text-align:left;
width:160px;
height: 60px;
line-height: 60px;
}
#menu ul ul li a:hover {
color:#fff;
}

h1 {
color: #FFFFFF;
font-size: 40px;
}
h1 {
color: #FFFFFF;
font-size: 40px;
line-height: 5px;
}

#footer {
padding:20px;
border:0px solid #000000;
background-color:#CCCCCC;
}
#bottom{
text-align:center;
font-family:Geneva;
font-size:16px;
margin:1px;
font-weight:bold;
letter-spacing:1px;
word-spacing:5px;
}
#bottom a{
color:blue;
}
#bottom a:link{
text-decoration:none;
}
#bottom a:hover{
text-decoration:underline;
color:#FFFF00;
}
#copy {
margin:25px 0 0 0;
font-family:verdana;
color:#FFFFCC;
font-size:10px;
text-align:center;
}
#copy a {
color:#FFFFCC;
}
#footer #copy a:link{
text-decoration:none;
}
#footer #copy a:hover{
text-decoration:underline;
}

#footer marquee {
text-align: justify;
font-weight: bold;
}

#menu header {
align:center;
}

.sidebar {
float:right;
width:275px;
margin-top:5px;
}

.sidebar .widget {
padding:25px;
margin:5px;
background:#fff;
border-bottom: 2px solid #fff;
transition: all 0.5s ease;
}

.sidebar .widget:hover {
border-bottom: 2px solid #3498db;
}

.sidebar .widget h2 {
padding:0;
margin:0 0 15px;
color:#3498db;
font-size: 18px;
font-weight:800;
text-transform: uppercase;

}

.sidebar .widget p {
font-size: 14px;
}

.sidebar .widget p:last-child {
margin:0;
}

#isi {
width:600px;
margin-top: 10px;
margin-bottom:10px;
padding:10px;
border:0px solid #000;
background: white;
}
.gambar {
float: left;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 0px;
border: 1px solid #000000;
}
#isi p {
text-align: justify;
line-height: 18px;
margin-top: 0px;
}
</style>
<div id="wrap">
<div id="content">
<div id="header">
<h1>Welcome to my site</h1>
</div>
<nav id="menu">
<ul>
<div id="heading">
</li>
</div>
<li><a href="index.html">Beranda</a></li>
<li><a href="artikel.html">Artikel</a></li>
<li><a href="gambar.html">gambar</a></li>
<li><a href="#">list</a>
<ul>
<li> <a href="ul.html">Tips Sukses </a></li>
<li> <a href="ol.html">Cara Masak Mie </a></li>
</ul>
</li>
<li><a href="table.html">Data</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="#">Multimedia</a>
<ul>
<li><a href="audio.html">Audio</a></li>
<li><a href="video.html">Video</a></li>
</ul>
</li>
</ul>
</nav>
<aside class="sidebar">
<div class="widget">
<h2>Tutorial</h2>
<p>Selamat datang di www.malasngoding.com, situs ini menyediakan tutorial pemrograman web, mobile & desktop.</p>
</div>
<div class="widget">
<h2>Ebook Gratis</h2>
<p>Teman-teman bisa mendapatkan ebook tutorial gratis di sini <a target="_blank" href="https://www.malasngoding.com">www.malasngoding.com</a>.</p>
</div>
</aside>
<div id="isi">
<img src="dua.jpg" class="gambar" />
<p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini
adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian
isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini
adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian
isi. Ini adalah bagian isi.
</p>
<p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini
adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian
isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini
adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian
isi. Ini adalah bagian isi.
</p>
<p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini
adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian
isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini
adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian
isi. Ini adalah bagian isi.
</p>
</div>
<div id="footer">
<div id="bottom">
<a href="#">About</a>
<a href="#">Content</a>
<a href="#">Profile</a>
<a href="#">Guest Book</a>
</p>
<div id="marquee">
<marquee>Copyright &copy; 2017 by teknik informatika</marquee>
</div>
</div>
</div>
</body>

Demikianlah artikel kita kali ini, semoga artikel ini bisa bermanfaat buat kita semua, dan jangan lupa memberikan saran dan kritiknya melalui komentar.

 

Farid Syaumi

Berbagilah Semampu mu :) Keep Smile And Keep Strong :)

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Tweet
Share
Pin
Share
+1