HTML (Hypertext Markup Language)
Pengertian HTML
HTML (Hypertext Markup Language) merupakan sebuah bahasa yang mengkombinasikan teks dan informasi tambahan mengenai teks tersebut. HTML merupakan dokumen standar yang digunakan untuk mendesain halaman web.
Struktur Dokumen HTML
Setiap dokumen HTML harus diawali dengan tag html dan diakhiri dengan komplemennya, yakni tag html tag. Sebagai tambahan, dokumen HTML juga menyertakan tiga pasang tag.
Tag head: digunakan untuk menyatakan informasi mengenai dokumen HTML.
Tag title: digunakan untuk menambahkan title di title bar browser.
Tag body: digunakan untuk melingkupi semua teks yang terdapat di halaman HTML.
Cascading Style Sheet
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.
Rekomendasi CSS menguraikan tiga jenis style:
Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.
Contoh pembuatan desain layout halaman web dengan HTML
Untuk membuat desain layout halaman web dengan menggunakan HTML, maka ikutilah langkah-langkah berikut ini :
1.buat file Tugas_praktikum.html,sebagaiberikut:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="Tugas_praktikum.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id = "box1">
<img src="Um.jpg">
</div>
<div id = "box7">
<img src="Gerbang-wbl.jpg">
</div>
<div id = "box5">
</div>
<div id = "box6"><font color="black"> Search :
</div>
<div id = "box2">
<a href="link.html"> <font color="black">About Us</a></p>
</div>
<div id = "box3">
<a href="link.html"><font color="black"> Profil</a></p>
</div>
<div id = "box4">
<a href="link.html"><font color="black"> Foto</a></p>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Articel</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
</ul>
</div>
</div>
<div id="top">
<div id = "box8">
<img src="Jardiknas.jpg">
</div>
<div id = "box9">
<img src="angkatan_Q1.jpg">
</div>
</div>
<div id="content">
<b>Jardiknas <br/></b>
<br/>
Ini adalah acara Jardiknas yang diselenggarakan di Gedung Sasana Budaya Universitas Negeri Malang, pada:<br/>
Tanggal : 2 Desember 2007 <br/>
Tempat : Gedung Sasana Budaya <br/>
</div>
<div id="right">
<b>Event :</b>
<ul>
<li>Kajur Cup</li>
<li>Lomba Desain Web(E2C)</li>
<li>SNEIE</li>
</div>
</div>
<div id="footer">
<h3 align="Center"><b>by : anh_design</b></h3>
</div>
</div>
</body>
</html>
2. kemudian buat file Tugas_praktikum.css, dengan isi sebagai berikut:
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid white;
}
#header {
height: 100px;
background: #99CC00;
border: 1px solid white;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid white;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
background: #CCFF99;
border: 1px solid white;
}
#top {
float: left;
width: 813px;
height: 135px;
background: #FFFFCC;
border: 1px solid white;
}
#content {
float: left;
margin-right: 5px;
width: 450px;
height: 220px;
background: #FFFFCC;
border: 1px solid white;
}
#right {
float: right;
width: 357px;
height: 165px;
background: #CCFF99;
border: 1px solid white;
}
#footer {
clear:both;
height: 50px;
background: #6cae15;
border: 1px solid white;
}
#leftmenu ul {
width: 175px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #5e9711 no-repeat left center; color: #ffffff
}
#box1 {
float: left;
margin-right:10px;
width: 91px;
height: 98px;
background: #FFFFFF;
border: 1px solid white;
}
#box2{
float: right;
margin-right: 20px;
margin-top: 7px;
width: 60px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box3{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 35px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box4{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 32px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box5{
float: right;
margin-right: 15px;
margin-top: 7px;
width: 100px;
height: 20px;
background: #FFFFFF;
border: 1px solid #99CC00;
}
#box6{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 50px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box7 {
float: left;
margin-right: 5px;
margin-top: 2px;
width: 490px;
height: 85px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box8 {
float: left;
margin-right: 3px;
margin-top: 5px;
width: 406px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box9 {
float: left;
margin-right: 0px;
margin-top: 5px;
width: 400px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
Tidak ada komentar:
Posting Komentar