Salam para pembaca artikel blog :D
Kembali lagi pada postingan saya mengenai tutorial
HTML,tetapi pada pertemuan kita kali ini saya masih membahas hal yang sama
mengenai membuat tampilan sederhana pada web dengan HTML.
Namun pelajaran kali ini berbeda dengan pelajaran sebelumnya
dan pastinya lebih berkembang dari tahap
sebelumnuya.
So,dari pada panjang lebar,mending langsung ke materi
pembahasan aja :D
Prosesnya:
1.Buat folder bebas dan simpan diamana terserah anda.
2.Buka lah Notepad atau notepad++
3.kemudian untuk langkah selanjutnya,Ketik script sederhana (contoh)
HTML berikut:
<!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="Aokiji.jpg"
width="200px" height="150px">
<p>
Nama :
Aokiji Kuzan<br/>
Pekerjaan
: Amiral Angkatan Laut<br/>
Negara :
Grand Line<br/>
Alamat :
Marine HQ Zone 1<br/>
Hoby :
Tidur,Bermain sepeda<br/> </p>
<hr>
<p align="justify">
Saya
adalah seorang mantan angkatan laut, Marine, Grand Line.
Saya
menyukai sepeda dan musik, saya pernah bermain dalam beberapa film one piece
the movie.
</p>
</div>
<div
id="kanan">
<ul>
<li><a
href="nav.html">Menu 1</a></li>
<li><a
href="nav.html">Menu 2</a></li>
<li><a
href="nav.html">Menu 3</a></li>
<li><a
href="nav.html">Menu 4</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">
Copyright
© OnePiece Wiki.com
</div>
</body>
</html>
4.Simpan Script HTML di atas pada folder yang sudah di
buat.
5.Lalu,Buka TAB baru di Notepad atau Notepad++
6.Langkah berikutnya adalah proses
untuk mengedit jarak,tampilan,dll pada blog/web anda,Berikut script nya.
#image
{
background-image:url("index.jpg");
ß--- tulisan hitam disamping untuk
menambahkan gambar background
padding-left:100px;
height:150px;
}
#header
{
background-color:#98bf21;
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:blue;
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: #7A991A;
}
#garis
{
width:
200px;
float:left;
background-color:#4c5f10;
text-transform:
uppercase;
}
(*NB.Teks kalimat,gambar,warna
dapat anda rubah sesuai keinginan anda,saya disini hanya memberikan contoh
belajarnya saja)
7.Simpan Script diatas dengan
format cascade style sheet(*css),dan disimpan dalam satu folder yang sudah
dibuat.
8.Biasanya dalam satu folder
berisi:
9.Hasil script di atas akan
seperti:
Oke masih sampai disini dulu
tutorial HTML dari saya.Mudah-mudahan bermanfaat bagi anda yang ingin lebih
belajar mengenai HTML.Eiiiitss tetep jangan lupa kritik dan saran masukkan aja
pada kolom komentar.
TUGAS 4
Good job (y)
BalasHapus