Berikut adalah sintaks untuk membuat web sederhana :
a. Sintaks pada file.css (prakmodul4)
body
{
margin:50px auto;
width: 1000px;
background-color :grey;
}
header, nav, section,footer,text2
{
display: block;
border:1px solid black;
}
header
{
height: 150px;
background-image: url(1.JPG);
}
Data1
{
float: left;
margin: 15px 10px 20px 50px;
font-size: 30px;
font-weight: bold;
font-family: Calibri;
color: black;
}
Data2
{
float: left;
margin: 15px 10px 20px 50px;
font-size: 20px;
font-weight: bold;
font-family: Calibri;
color: black;
}
nav
{
float: left;
height: 60px;
width: 1000px;
background-color: blue;
}
textboxSearch
{
float: left;
width: 100px;
height: 20px;
margin: 15px 15px 15px 0px;
}
section
{
margin: 0px;
float: left;
width: 1000px;
height: 390px;
}
text1
{
height: 100px;
width: 400px;
margin-left:300px;
padding: 10px;
text-align:justify;
}
text2
{
padding: 2px;
float:left;
width:780px;
height:193px;
background-color:#a7d5fc;
-moz-border-radius : 7px;
-webkit-border-radius: 7px;
border : 3px solid blue;
}
Search
{
float: left;
margin: 20px 20px 17px 50px;
color: White;
}
button
{
float: right;
height: 30px;
width: 130px;
background-color: black;
text-align: center;
color: blue;
}
UM
{
float: left;
height: 70px;
width: 70px;
margin: 20px 20px 15px 70px;
}
habibi
{
float: left;
height: 370px;
width: 190px;
border: 10px solid black;
}
footer
{
clear: both;
height: 40px;
width: 1000px;
background-image: url(1.jpg);
text-align: center;
font-weight: bold;
font-family: Calibri;
color: black;
}
b. Sedangkan untuk sintaks ada file.html (tugaspraktikum.html) adalah sebagai berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<title>TUGAS PRAKTIKUM MODUL 4</title>
<link rel="stylesheet" href="prakmodul4.css" type="text/css" />
</head>
<body>
<link type="image/x-icon" rel="icon" href="habibie.jpg">
<header>
<UM>
<img src="UM.PNG" width=100 height=100>
</UM>
<Data1>
TEKNIK ELEKTRO
</Data1>
<br>
<br>
<br>
</br>
</br>
</br>
<Data2>
<i>"Terpercaya Dalam Menghasilkan Lulusan Pendidikan Teknologi Kejuruan dan Keteknikan"</i>
</Data2>
</header>
<nav>
<Search>
Search
</Search>
<textboxSearch>
<input type="text" size=19">
</textboxSearch>
<button>
Biografi
</button>
<button>
Pekerjaan
</button>
<button>
Foto
</button>
<button>
Karya
</button>
<button>
Pesan
</button>
</nav>
<section>
<habibi>
<img src="preshab.jpg" width=190 height=370>
</habibi>
<text1>
<font size="2" align ="Justify" color="black">
<b>
<p>
Bacharuddin Jusuf Habibie (lahir di Parepare, Sulawesi Selatan, 25 Juni 1936; umur 74 tahun) adalah Presiden Republik Indonesia yang ketiga.
Ia menggantikan Soeharto yang mengundurkan diri dari jabatan presiden pada tanggal 21 Mei 1998.
<p>
Jabatannya digantikan oleh Abdurrahman Wahid (Gus Dur) yang terpilih sebagai presiden pada 20 Oktober 1999 oleh MPR hasil Pemilu 1999.
Dengan menjabat selama 2 bulan dan 7 hari sebagai wakil presiden, dan 1 tahun dan 5 bulan sebagai presiden, Habibie merupakan Wakil Presiden dan juga Presiden Indonesia dengan masa jabatan terpendek.
</p>
</b>
</font>
</text1>
<text2>
<i>
Indikator :
<ul>
<li><a href="habibie.html">Pekerjaan dan Karier</li></a>
<li><a href="habibie.html">Keluarga dan Pendidikan</li></a>
<li><a href="habibie.html">Masa Kepresidenan</li></a>
<li><a href="habibie.html">Masa Pasca Kepresidenan</li></a>
<li><a href="habibie.html">Mengenai Habibie</li></a>
</ul>
</i>
</text2>
</section>
<footer>
Pesan | Karya | Foto | Pekerjaan | Biografi
<br />
<font align="right">© Shofiyah Al Idrus</font>
</footer>
</body>
</html>
Berikut adalah hasil printscreen pada sintaks diatas :
Tidak ada komentar:
Posting Komentar