Assalamu'alaikum...
Alhamdulillah bisa ketemu lagi di postingan praktikum pemograman web
yuk...belajar n share lagi mengenai Css,
bukan utk memahami apa Css tu, kl tu sih kan bs baca d modul2, haduh2 ud g jaman kayaknya yaaaah
naah skrg qta lgsg k TKP ngeliat contoh penggunaan Css, kl yg ni contoh file Css studi kasus yg pernah q kerjain,yuuuk cek...
ni adalah file css nya, kalau mau coba bikin, jgn lupa nyimpen filenya .css yah....
#header {
height: 70px;
border: 1px solid green;
}
#nav{
height:35px;
border: 1px solid purple;
}
#section {
padding:20px;
height: 400px;
border: 1px solid red;
}
#footer {
height: 30px;
border: 1px solid green;
}
#article {
float:left;
width:600px;
height: 350px;
border: 1px dashed red
}
#aside {
float:right;
width:200px;
height:350px;
border: 1px dashed black;
}
dan....
ini tampilannya program diatas
untuk kode htmlnya aku mengunakan kode ini :
<!doctype html>
<html lang="en">
<head>
<title> Desain Layout HTML5</title>
<link rel="stylesheet" href="studikasus.css" type="text/css"/>
</head>
<body>
<div id="header">
header
</div>
<div id="nav">
nav
</div>
<div id="section">
<div id="article">
article
</div>
<div id="aside">
aside
</div>
section</div>
<div id="footer">
footer
</div>
</body>
</html>
Kalu yang itu file html, jadi nyimpennya juga .html, oke????
mengerti???
siiiip deh
lanjut untuk pembahasan selanjutnya
aq disini mencoba membuat tampilan web untuk Pendidikan teknik Informatika (ceilah bangga banget, ia dong, hehehe)
nih dia tampilannya:
Daaaaan.....
untuk membuatnya bikin file css nya dulu yuk,,,,
carnya yah sama ja lah...
klau file css ala dini begini nih bikinnya:
#header {
background-image:url(back.png);
height: 110px;
}
#tengah{
background-color: Aqua;
padding: 15px;
height: 457px;
}
#gambar{
margin-top:-14px;
margin-left:-11px;
float:left;
width:284px;
height:467px;
border:9px solid black;
}
#searc{
margin-top:5px;
margin-left:15px;
float:left;
width:280px;
height:30px;
}
#atas{
height:55px;
background-color: LightBlue;
}
#kotak{
float:left;
width:80px;
height:20px;
margin-left: 4px;
background-color: aqua;
}
#news{
float:left;
margin-left: 4px;
width: 120px;
height:20px;
background-color: aqua;
}
#akhir{
float:left;
width:85px;
height:20px;
margin-left: 4px;
margin-right: 4px;
background-color: aqua;
}
#group{
padding-top:1px;
margin-top:5px;
float:right;
width:510px;
height:25px;
}
#section {
width: 1350px;
height: 400px;
border: 1px solid red;
}
#tulisan {
padding-top:5px;
padding-left:5px;
background-color: white;
margin-top:-12px;
margin-left:290px;
height: 250px;
border: 1px dashed red
}
#list {
margin-top:-12px;
margin-left:290px;
height:150px;
}
#din{
float:right;
width:185px;
height:20px;
margin-top: 39px;
margin-left: 4px;
margin-right: 4px;
}
Then......
Untuk File HTMLnya,,,
ni ada dsini...
<!doctype html>
<html lang="en">
<head>
<title> Pend Teknik Informatika</title>
<link rel="stylesheet" href="tuprak.css" type="text/css"/>
</head>
<body>
<div id="header" align="center">
<img src="pti3.jpg" align="left"/>
<h1 > <br/>PENDIDIKAN TEKNIK INFORMATIKA</h1>
</div>
<div id="atas">
<div id="searc">
Search
<input type="text" size="30"/>
</div>
<div id="group" align="center">
<div id="kotak">
<a href="tuprak.html">Home</a>
</div>
<div id="news">
<a href="new.html">News & Media</a>
</div>
<div id="kotak">
<a href="new.html">Tutorials</a>
</div>
<div id="news">
<a href="new.html">Tips & Tricks</a>
</div>
<div id="akhir">
<a href="new.html">Downloads</a>
</div>
</div>
</div>
<div id="tengah">
<div id="gambar">
<img src="kompu.jpg" align="left"/></div>
<div id="tulisan">
<font color="brown" face="comic sans MS">
Perkembangan teknologi komputer yang begitu pesat telah menimbulkan fenomena baru,
berupa hadirnya masyarakat yang tidak bisa hidup tanpa adanya komputer. Hal ini merupakan sebuah tantangan sekaligus kabar gembira karena membuktikan bahwa masyarakat Indonesia merupakan masyarakat yang adaptif.
<p>Hal mendasar yang paling sering menimbulkan .......</p>
</font>
<br/>
<br/>
<br/>
<a href="event.html">Baca Selengkapnya</a>
</font>
</div>
<h2>Events :</h2>
<div id="list">
<ul>
<li><a href="event.html">Propspek Kerja
Mahasiswa Teknik Informatika</a></li>
<li><a href="event.html">Bahaya Mouse Dan Keyboard</a></li>
<li><a href="event.html">Perkembangan Sistem Operasi</a></li>
<li><a href="event.html">Security Otomatis Bagi PC Anda</a></li>
</ul>
</div>
</div>
<div id="header" align="center" color="white">
<br/> Home || News & Media || Tutorials || Tips & Tricks || Downloads
<div id="din">
<font color="white" face="comic sans MS" align="right"> Created © Nurdini</font>
</div>
</div>
</body>
</html>!
Gimana???
Ada yang masih bingung???
Atau merasa aneh????
Yaaah Maaf2 ajah deh, khusunya buat mas asdos, tampilannya memang begitu itu dini's style, hehehehe
yaaah q kira sampe' sini dulu postinganq kali ni, lain kali ketemu lagi, okke???
silahkan kasih komen2 atau apa2 untuk meramaikan blog sederhanaq ini
thanks for All
Assalamu'alaikum....
0 koment:
Posting Komentar