Assalammalaikum Wr. Wb.
Hari ini saya belajar CSS di W3School tentang menampilkan gambar berganti dengan sendirinya dan table gambar.
Apa itu CSS ?
CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).
Berikut ini Tutorialnya :
1. Masuk lah ke text editor atau bluefish editor bila anda menggunakan linux mint,jika anda menggunakan windows maksuklah ke notepad++.
2. Kemudian tuliskan / copykan scrip di bawah ini ke bluefish bila anda menggunakan linux atau yang menggunakan windows di notepad++ :
<!DOCTYPE html>
<html>
<head>
<title> Achmad sulthoni 22-06-2013 </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
body{
background-image: url("hujau.jpg");
}
.mySlides {display:none;}
</style>
</head>
<body class="w3-container">
<div class="w3-topnav w3-large w3-red">
<a href="#"><i class="fa fa-home w3-large"></i></a>
<font color="yellow"><a href="http://macamolahragadunia.blogspot.co.id/">Dunia Olahraga</a>
<a href="http://tilulas.com/2013/09/27/20-foto-mobil-sport-keren/">Mobil sport</a>
<a href="http://hargamotor.co.id/review-motor/12-sepeda-motor-sport-terbaik-di-indonesia">Motor sport</a>
<a href="http://www.waroengpit.com/2015/02/10-sepeda-gunung-hardtail-terbaik-berbahan-carbon-karbon.html">Sepeda Gunung</a> </font>
</div>
<h2><font color="lime"><center><b>Mobil Termahal Di DUNIA</b></center></font> </h2>
<font color="purple"><h3><marquee> Silahkan Pilih Mobil Sport Yang Anda Suka </marquee> </h3> </font>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides" src="Hennessey Venom GT.png" style="width:100%">
<img class="mySlides" src="Bugatti Veyron 16.4 Grand Sport Vitesse.png" style="width:100%">
<img class="mySlides" src="Ferrari LaFerrari.png" style="width:100%">
<img class="mySlides" src="Lamborghini Veneno Roadster.png" style="width:100%">
<img class="mySlides" src="Pagani Huayra.png" style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000);
}
</script>
<div class="w3-container w3-teal">
<font color="yellow"> <center> <h1>Mobil Mobil Antik Dunia</h1> </center> </font>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-third">
<div class="w3-card-2">
<img src="mobilantik1.jpg" style="width:100%">
<div class="w3-container">
<h5>www.mobilAntik.com</h5>
</div>
</div>
</div>
<div class="w3-third">
<div class="w3-card-2">
<img src="mobilantik2.jpg" style="width:100%">
<div class="w3-container">
<h5>Monterosso</h5>
</div>
</div>
</div>
<div class="w3-third">
<div class="w3-card-2">
<img src="mobilantik3.jpg" style="width:100%">
<div class="w3-container">
<h5>Vernazza</h5>
</div>
</div>
</div>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-third">
<div class="w3-card-2">
<img src="mobilantik4.jpeg" style="width:100%">
<div class="w3-container">
<h5>Manarola</h5>
</div>
</div>
</div>
<div class="w3-third">
<div class="w3-card-2">
<img src="mobilantik5.jpg" style="width:100%">
<div class="w3-container">
<h5>Corniglia</h5>
</div>
</div>
</div>
<div class="w3-third">
<div class="w3-card-2">
<img src="mobilantik6.jpg" style="width:100%">
<div class="w3-container">
<h5>Riomaggiore</h5>
</div>
</div>
</div>
</div>
</body>
</html>
3. Kalau semuanya sudah di tulis atau di copy maka silahkan pencet tombol ctrl+s (menyimpan file) atau pilih save as.
4. Bila menggunakan linux simpan dengan nama login.html di file directory anda dan bila menggunakan windows simpan dengan nama login.html di flie directory xammp kemudian htdocs kemudian simpan.
5. Bila gambarnya tidak muncul itu karena gambar nya tidak satu file dengan file script tadi dan anda harus mencari gambar lain kemudian sedikit mengedit di script nya yaitu pada nama gambarnya.
6. Kemudian lihat hasilnya bila anda menggunakan linux lihatlah hasilnya di browser dengan menuliskan.
7. Bila anda menggunakan windows anda harus menghidupkan xammp control dulu klik start.
Hasilnya script yang di atas tadi :
Sekian dulu postingan dari saya lain kali saya akan belajar lebih mendalam tentang CSS semoga bermanfaat bagi anda semua.
Wassalammualaikum Wr. Wb.
0 komentar:
Posting Komentar