Sekarang saya akan menunjukan hasil web sederhana yang saya buat melalui css template. Kita tinngal download saja di http://www.free-css.com/free-css-layouts/page1 nah kalian bisa memilih template yang kalian inginkan.
1. kita masuk ke css template dan kita pilih css templete .
2. jika sudah dapat template yang kalian suka kalian download dan kalian extract.
3. Jika sudah bisa kalian edit sesuai yang kalian inginkan, contohnya.
#script :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>halaman utama</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<style>
body {
background-image: url("abu.jpeg");
}
</style>
<body>
<img src="header-baru.png">
<div id="container">
<div id="header"><div class="w3-topnav w3-large w3-red">
<a href="#"><i class="fa fa-home w3-large"></i></a>
<a href="#">Home</a>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: grey;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span><a href="">JURUSAN</a>
</span>
<div class="dropdown-content">
<p><a href="">Teknik Kendaraan Ringan</a></p>
<p><a href="">Teknik Sepeda Motor</a></p>
<p><a href="">Teknik Komputer dan Jaringan</a></p>
<p><a href="">Rekayasa Perangkat Lunak</a></p>
<p><a href="">Multimedia</a></p>
<p><a href="">Keperawatan</a></p>
<p><a href="">Animasi</a></p>
</div>
</div>
<a href="#"></a>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span><a href="">PROFIL</a>
</span>
<div class="dropdown-content">
<p><a href="">Tentang kami</a></p>
<p><a href="">Visi & Misi</a></p>
<p><a href ="">Sambutan Kepsek</a></p>
<p><a href="">Tujuan</a></p>
<p><a href="">Motto Siswa</a></p>
</div>
</div>
<a href="#"></a>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span><a href="">EKSKUL</a>
</span>
<div class="dropdown-content">
<p><a href="">Badan Dakwah Islam</a></p>
<p><a href="">Basket</a></p>
<p><a href="">Volly</a></p>
<p><a href="">Futsal</a></p>
<p><a href="">Media 11</a></p>
<p><a href="">Pramuka</a></p>
<p><a href="">Paskibraka</a></p>
<p><a href="">Hockey</a></p>
<p><a href="">Teater</a></p>
<p><a href="">Palang Merah Remaja</a></p>
<p><a href="">beladiri</a></p>
</div>
</div>
</div></div>
<div id="wrapper">
<div id="content">
<p><strong><h3>Breaking News</h3></strong></p>
<p>BERITA TERBARU TENTANG KAMI di BLC TELKOM</p>
<p><img src="blc.jpg" width="100" height="100"></p>
<p>Semua anak rpl yang prakerin di suruh membuat project dan website sekolah jadi semua anak rpl selama satu minggu harus bisa membuat project masing-masing dan dipresentasikan di depan jadi setiap sabtu menjadi evaluasi</p>
<p>Sama halnya seperti anak tkj yang prakerin di blc telkom tapi mereka belajar untuk lomba lks dan juga mencoba ilmu mereka yaitu membuat jaringa atau belajar mikrotik</p>
<p>BLC TELKOM KLATEN
"Saya melihat Teknologi Informasi (TI) khususnya penggunaan dan pemanfaatan Internet di Indonesia seperti sebilah pisau yang sangat tajam dijual bebas dan dibeli oleh orang-orang tapi tidak ada keterangan penggunaannya, manfaat segi positif dan negatifnya. Kondisi Internet saat ini sama seperti itu, oleh karenanya hati nurani saya tergerak untuk memberikan edukasi TI kepada masyarakat penggunaan Internet Sehat dan Aman dalam program Broadband Learning Center (BLC) Klaten dan saya menekankan kepada siapapun yang masuk menjadi komunitas BLC untuk dilatih dan menjadi bagian dari aktifitas BLC untuk berkomitmen tidak melihat segala sesuatunya dari sisi materi namun bagaimana menjadi diri sendiri memiliki integritas dan kepribadian serta mengembangkan potensinya masing-masing." Ujar Koordinator BLC Telkom Klaten yang lebih dikenal dengan sebutan Mbah Suro Dhemit.
Dari latar belakang tersebut terbentuklah Broadband Learning Center (BLC) Telkom Klaten yang bisa menjadi salah satu jawaban akan kebutuhan masyarakat selama ini. Dimana BLC Telkom Klaten merupakan pusat pelatihan internet yang memanfaatkan Rumah Dinas Pemkab Klaten yang dimodifikasi dilengkapi dengan sarana komputer dan akses internet broadband dari Telkom didukung infastruktur pelatihan dari Kelompok Pecinta Linux Indonesia (KPLI) Klaten. Dimana masyarakat maupun pemerintahan dapat memanfaatkan BLC Telkom Klaten untuk meningkatkan pengetahuan internet dan Teknologi Informasi dan Komunikasi secara gratis.</p>
<p>Vestibusodio euisque id elerisus lacus tincidunt sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis diam ames et. jangan lupa ya belajar biar pintar</p>
<ul>
<li> Motto SMK ADEM yaitu SMK Negeri 11 Malang yang memiliki arti<br>
berAkhlak Mulia, berDedikasi tinggi, berEmpati, dan Mandiri.</li>
</ul>
<p>
</div>
</div>
<div id="extra">
<p><strong></strong></p>
<p>TUJUAN SMK NEGERI 11 MALANG
<ol>
<li>Semua kompetensi keahlian terakreditasi minimal baik.</li>
<li>Menerapkan sistem sesuai dengan Standar Managemen Mutu ISO 9001 : 2008</li>
<li>Mencetak lulusan yang berakhlak mulia, santun, dan berbudi pekerti yang luhur.</li>
<li>Mencetak lulusan yang berdedikasi tinggi dan ikut serta membangun bangsa.</li>
<li>Mencetak pribadi yang berwawasan lingkungan dan mampu berperan aktif dalam pencegahan kerusakan lingkungan, pengurangan pencemaran dan pelestarian keanekaragaman hayati.</li>
<li>Mencetak lulusan yang mempunyai jiwa wirausaha dan mampu bersaing di dunia kerja.</li>
<li>Mengoptimalkan semua potensi yang ada dilingkungan sekolah untuk menghasilkan suatu produk alternatif yang mampu bersaing dan ramah lingkungan.</li>
<li>Mengikuti perkembangan jaman dengan selalu melaksanakan pembaharuan kurikulum dengan melibatkan DU/DI dan instansi terkait lainnya.</li>
</ol>
<ul>
<li> Motto SMK ADEM yaitu SMK Negeri 11 Malang yang memiliki arti<br>
berAkhlak Mulia, berDedikasi tinggi, berEmpati, dan Mandiri.</li>
</ul>
<p>
</p>
</div>
<div id="footer">
<p><center>Created by:<a href="">Otto Julista sari</a> Support by: <a href="">Bootstap template</a></center></p>
<p><center><marquee>SELAMAT DATANG DI WEB SMK N 11 MALANG</marquee></center></p>
</div>
</div>
</body>
</html>
#hasilnya :
maaf tampilan ini belum sempurna 100% dan maaf jika web saya tidak terlalu bagus.
Wassalamualaikum Wr.Wb
0 komentar:
Posting Komentar