Tugas 2 Membuat Tampilan Web Menggunakan CSS
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage.
Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML,
tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk
SVG dan XUL bahkan ANDROID.
CSS dibuat untuk memisahkan konten utamadengan
tampilan dokumen yang meliputi layout, warna da font. Pemisahan ini
dapat meningkatkann daya akses konten pada web, menyediakan lebih banyak
fleksibilitas dan kontrol dalam spesifikasi darisebuah karakteristik
dari sebuah tampilan, memungkinkan https://www.blogger.com/blogger.g?blogID=1515018944100233287#editor/target=post;postID=6629172223548131193;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=0;src=linkuntuk membagi halaman untuk sebuah
formatting dan mengurangi kerumitan dalam penulisan kode dan struktur
dari konten, contohnya teknik tableless pada desain web.
Berikut contoh tag <div> untuk membuat table
:
<div style="background-color:#ff0000">
<h1>this is table with div</h1>
</div>
<h1>this is table with div</h1>
</div>
Setelah itu kita akan menggabungkan tag CSS dan HTML seperti pada tag dibawah ini:
<html>
<head>
<style>
#header{
background-color:#00CC00;
color:black;
text-align:center;
padding:5px;
}
#nav{
line-height:30px;
background-color:#ffffff;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section{
width:400px;
float:left;
padding:10px;
}
#footer{
background-color:#00CC00;
color:black;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<font face="century gothic">
<div id="header">
<h1>City Gallery</hi>
</div>
<div id="nav">
<li><a href ="Moscow.html"><font color = "black">Moscow</a><font></li>
<li><a href ="Abudhabi.html"><font color = "black">Abudhabi</a><font></li>
<li><a href ="Sydney.html"><font color = "black">Sydney</a></font></li>
<li><a href ="tugas2.html"><font color = "red">Home</a></font></li>
</div>
<div id= "section">
<center><img src ="glowing-world-map-wallpaper.png" height=380 width=1220></center>
</div>
<div id ="footer">
Copyright © ridwan.Com
</div>
</font>
</body>
</html>
Hasilnya seperti gambar dibawah
0 komentar:
Posting Komentar