Pengertian singkat tentang HTML
HTML(Hyper Text Markup Language) merupakan bahasa standar untuk
membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode
singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan
Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari
berbagai macam format file seperti teks, grafik, animasi, link maupun
audio-video.
Dibawah ini contoh membuat web dengan html dan css berikut codingnya dengan menggunakan notepad
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
</div>
<div id="header">
<ul>
<li><a href="nav.html">Home</a></li>
<li><a href="nav.html">News</a></li>
<li><a href="nav.html">contact</a></li>
<li><a href="nav.html">About</a></li>
</ul>
</div>
<div id="nav">
<div id="garis"><ol><b>Biodata</b></ol></div>
<img src="aca.jpg" width="200px" height="150px">
<p>
Nama : Assyahrah nur syakira<br/>
panggilan:aca <br/>
tempat tanggal lahir : Batam, 27 november 2009 <br/>
Alamat : teluk mata ikan, nongsa batam <br/>
Hoby : mengaji<br/> </p>
<hr>
<p align="justify">
Dia adalah seorang anak kedua dari empat bersaudara, merupakan adik terakhir saya.
hobbynya adalah mengaji, hari-hari kegiatannya mengaji disalah satu pesantren didaerah rumah saya.
</p>
</div>
<div id="kanan">
<ul>
<li><a href="nav.html">Menu 5</a></li>
<li><a href="nav.html">Menu 6</a></li>
<li><a href="nav.html">Menu 7</a></li>
<li><a href="nav.html">Menu 8</a></li>
</ul>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="tengah"></div>
<div id="footer">
<marquee><font face="Batang"> <color="#009900"> Copyright © Nur Fharid</font></marquee>
</div>
</body>
</html>
Setelah itu kita buat lagi coding selanjutnya dengan css
#image
{
background-image:url("wisuda.jpg");
padding-left:200px;
height:250px;
}
#header {
background-color:#009900;
color:white;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:30px;
height:730px;
width:200px;
float:left;
padding-top:5px;
}
#kanan {
line-height:30px;
height:300px;
width:200px;
float:right;
padding-top:5px;
}
#section {
width:350px;
float:left;
padding:50px;
}
#footer {
background-color:#fa20d9;
color:white;
text-align:center;
padding:5px;
clear:both;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 200px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7b4100p;
}
#garis {
width: 200px;
float:left;
background-color:#4c5f10;
text-transform: uppercase;
}
MONGGO SILAHKAN DICOBA YA SEMOGA BERMANFAAT OKE !!!!!!!!!!!!!!!!!!
Tidak ada komentar:
Posting Komentar