Membuat website sederhana menggunakan CSS dan HTML -hayda



 Assalamuallaikum. Wr. Wb perkenalkan nama saya Hayda herawati XI Rpl 3 SMK Taruna Bhakti.
Saya akan mensahre contoh website karya saya. Website ini berisikan tentang sekolah dan jurusan. Ini sebenarnya tugas saya, jadi saya ditugaskan untuk membuat suatu tampilan websiteDisini saya menggunakan bahasa pemograman Html dan CSS, html digunakan untuk membuat daftar isi yangingin dibuat, sedangkan CSS digunakan untuk mempercantik tampilannya. . Langsung aja dibawah iniadalah contoh kodingannya.







 
 index.html
<!DOCTYPE html>
<html>
<head>
<title>sekolahweb</title>
<link rel="stylesheet" type="text/css" href="edit.css">
</head>
<body>
<div class="awal">
<div class="header">
<div class="logo">
<img src="img/tb.jpg"/>
</div>
<div class="form">
<form>Search
<input type="text" name="form">
</form>
</div>
<div class="title">
SMK Taruna Bhakti
</div>
</div>
<div class="menu">
<ul>
<a href="a"><li>Beranda</li></a>
<a href="a"><li>Jurusan</li></a>
<a href="a"><li>Informasi</li></a>
<a href="a"><li>Profil</li></a>
<a href="a"><li>About
<ul>
<a href="a"><li>Visi</li></a>
<a href="a"><li>Misi</li></a>
<a href="a"><li>Tujuan</li></a>
</ul>
</li></a>
</ul>
</div>

<div class="content">
<div class="left-content">
<img src="img/download (3).jpg"/>
<p> Visi : "Menghasilkan lulusan yang kompeten dalam IPTEK DAN IMTAQ, serta                                          mampu bersaing pada tingkat nasional dan global." 
<p>Misi : 
<br>1. menumbuhkan semangat kreatifitas,
bersinergi dan kompetitif kepada seluruh warga sekolah. </br> <br>2. Melaksanakan kurikulum melalui pembelajaran dan penilaian berbasis kompetensi,
berbasis wirausaha, berwawasan lingkungan dan berlandaskan kejujuran. </br> <br>3. Meningkatkan kualitas sumber daya manusia melalui sertifikat Kompetensi
Tingkat Nasional dan Internasional.</br> <br>4. Mengembangkan potensi peserta didik melalui kegiatan Minat dan Bakat dan
pembinaan kedisiplinan. </br> 5. Menerapkan layanan prima dalam pengelolaan sekolah melalui Sistem Manajemen Mutu.</p>
</p>
</div>
<div class="right-content">
<div class="jurusan">    
<img src="img/rpl.jpg"/> 
<a href="selengkapnya"></a>       
<h3> Rekayasa perangkat Lunak</h3>       
<b>html,php,css...</b> 
<p>Jurusan yang mempelajari tentang pemograman.</p>

</div>
<div class="jurusan">    
<img src="img/bc.png"/> 
<a href="selengkapnya"></a>       
<h3> Brocasting</h3>       
<b>...</b> 
<p>Jurusan yang mempelajari tentang perfilman.</p>

</div>
<div class="jurusan">    
<img src="img/tei.png"/> 
<a href="selengkapnya"></a>       
<h3> Tehnik elektronika informasi</h3>       
<b>elektronik</b> 
<p>Jurusan yang mempelajari tentang elektronik.</p>

</div>
<div class="jurusan">    
<img src="img/tkj.jpg"/> 
<a href="selengkapnya"></a>       
<h3> Tehnik komputer dan jaringan</h3>       
<b>Mikrotik dan Cisco</b> 
<p>Jurusan yang mempelajari tentang jaringan.</p>

</div>
<div class="jurusan">    
<img src="img/mm.jpg"/> 
<a href="selengkapnya"></a>       
<h3> Multimedia</h3>       
<b>photoshop,ilustrator...</b> 
<p>Jurusan yang mempelajari tentang Desain.</p>

</div>
</div>
</div>
<div class="footer">
<div class="akhir">
<b>hayda25.co.id.copyright 2017 by haydaherawati</b>
</div>
</div>
</div>
</div>
</body>
</html>



  Dibawah ini ada screenshoot index.html








  gambar1.1




gambar 1.2



 gambar 1.3




 2. CSS
 Dibawah ini kodingan CSS

edit.css

*{
margin:0;
padding:0;
font-family:sans-serif;
background-image: url("jet.png");
}
.awal{
min-height: 400px;
margin:0 auto;
width: 1100px;
background-color: darkgray;
}
.header{
width: 100%;
height: 100px;
border: 1px solid;

}
.header form {
float:right;  
margin-top:10px;  
margin-right: 10px; 
}
.logo{
width: 80px;
height: 80px;
border: 1px solid;
margin: 1%;
float: left;

}
.logo img{
width: 100%;
height: 80px;
}
.title{
width: 50%;
height: 50px;
border: 1px solid;
margin: 1%;
float: left;
font-size: 30px;
font-weight: bold;
background-color: white;
}
.menu {
width: 100%;
height: 30px;
border: 1px solid;
}
.menu ul a{
color: white;
text-decoration: none;
}
.menu ul li{
width: 100px;
height: 40px;
border: 1px solid;
float: left;
list-style: none;
text-align: center;
line-height: 40px;
color: white;
background-color: blue; 
}
.menu ul li:hover {
background-color: #eaeaea;
}

.menu ul li ul  {
display: none;
}
.menu ul li:hover ul  {
display: block;
}
.menu ul li ul li {
background-color: orange;
}

.menu ul li ul li:hover {
background-color: blue;
}

.content {
width: 100%;
min-height: 450px;
border: 1px solid;
overflow: hidden;
background-color: blue;
}
.left-content {
width: 60%;
min-height: 450px;
border: 1px solid;
float : left;
margin: 1%;
background-color: white;
}
.left-content img{
width: 350px;
height: 350px;
border-bottom: 10px solid black;
border-right:10px solid black;
border-left:10px solid black;
border-top:10px solid black;
float: left;
margin: 1%;
}
.right-content {
width: 35%;
min-height: 450px;
border: 1px solid;
float: left;
margin: 1%;

}
.jurusan{
background:#eaeaea;  
padding:10px;  
margin-bottom:20px;  
overflow:hidden; 
margin: 1%;
border-bottom: 5px solid black;
border-right:5px solid black;
border-left:5px solid black;
border-top:5px solid black;
}
.jurusan img{
float:left;  
margin-right:10px;  
width:40px; 
height:40px 
}
.jurusan{
background:#eaeaea;  
padding:10px;  
margin-bottom:20px;  
overflow:hidden; 
margin: 2%;
border-bottom: 5px solid black;
border-right:5px solid black;
border-left:5px solid black;
border-top:5px solid black;
}
.jurusan img{
float:left;  
margin-right:10px;  
width:40px; 
height:40px 
}
.jurusan{
background:#eaeaea;  
padding:10px;  
margin-bottom:20px;  
overflow:hidden; 
margin: 2%;
border-bottom: 5px solid black;
border-right:5px solid black;
border-left:5px solid black;
border-top:5px solid black;
}
.jurusan img{
float:left;  
margin-right:10px;  
width:40px; 
height:40px 
}
.footer {
width: 100%;
height: 50px;
border: 1px solid;
clear:both;    
text-align:center;  
background-color: #f0f0f0;  
padding:5px;  
color:#55555;
}
.footer akhir{
margin: 2%;
}




Ada pula Screenshot css. berikut dibawah ini


gambar 2.1


gambar 2.2


gambar 2.3


gambar 2.4


gambar 2.5


buka browser dan inilah tampilan akhirnya.



 nah itulah website yang saya buat, sampai disini dulu maaf bila ada salah-salah kata. sampai ketemu di postingan saya selanjutnya. jangan lupa kritik dan sarannya gan!!!
Wassalamuallaikum.Wr.Wb 
haydaherawati
14/08/2017





























Comments

Post a Comment

Popular posts from this blog

Struktur Basis Data (konsep basis data) Dan Diagram ERD

Image
Assalamuallaikum Wr.Wb Hay guys.. Perkenalkan nama saya Hayda Herawati. Disini saya akan memberikan materi tentang Struktur Basis Data dan Diagram ERD.   Struktur Basis Data (konsep basis data) Dan Diagram  ERD             Deskripsi Secara Kharfiah Basis data terdiri dari dua kata yaitu basis dan data, keduanya memilki arti yaitu Basis :  Suatu kumpulan atau Gudang. Data: Representasi dari fakta dunia(manusia, barang, peristiwa, keadaan) Secara istilahBasis data ialah  kumpulan data yang saling berhubangan satu sama lain yang tersimpan dalam perangkat komputer.(server).  Topik hirarki basis data menjelaskan tentang konsep basis data arsitektur basis data, model struktur  hirarki basis data dan struktur model jaringan basis data. Konsep basis data mempelajari tentang definisi basis data, tujuan dan manfaat basis data, pengertian sistem manajemen basis data dan operasi dasar dalam manajemen basis data.       2.        Komponen basis data meliputi sistem komput
Read more

Sistem alur Pembuatan Aplikasi Ticketing Pesawat Terbang dan Kereta Api

Image
Assalamuallaikum Wr. Wb Halo teman-teman ^^ kali ini saya akan menjelaskan Sistem alur Pembuatan Aplikasi Ticketing Pesawat Terbang dan Kereta Api. Mulai dari pemesanan hingga menerima tiket.  Dengan mengikuti perkembangan, semua kebutuhan manusia telah di lengkapi oleh teknologi canggih mulai dari antar jemput, pesan makan hingga pesan pesawat. kali ini saya akan menjelaskan tentang Sistem alur Pembuatan Aplikasi Ticketing Pesawat Terbang dan Kereta Api. 1. ERD (Entity Relationship Diagram) adalah suatu model untuk menjelaskan hubungan antar datadalam basis data bedasarkan objek-objek data yang mempunyai hubungan antar relasi. 1.1 gambar erd ticketing 1.2 database  2. DFD   (Data Flow Diagram)  adalah suatu diagram yang menggunakan notasi untuk menggambarkan arus dari data pada suatu sistem. DFD sangat membantu untuk memahami sistem logika, terstruktur dan jelas. penjelasanan: Pelanggan melakukan pendaftaran terlebih dahulu, setelah melakukan pen
Read more

membuat Desain aplikasi menggunakan aplikasi pencil

Image
Assalamuallaikum... hay guys, disini saya ingin mengshare ide aplikasi saya, aplikasi yang saya gunakan untuk membuat desainnya adalah aplikasi pencil, aplikasi ini digunakan oleh para programmer sebagai urutan untuk membuat aplikasinya. di bawah ini saya akan mencantumkan foto desain saya.   Gambar 1.1 Tampilan awal Gambar 1.2 Tampilan Login Gambar 1.3 Tampilan Profil Gambar 1.4 Tampilan pilihan Mata pelajaran Gambar 1.5 Tampilan tingkatan Gambar 1.6 Tampilan sub pelajaran Gambar 1.7 Tampilan Cari teman Gambar diatas adalah gambaran desain aplikasi yang terdapat dipikiran saya. Mohon maaf bila ada kesalahan. tunggu postingan saya selanjutnya. Wassalamualaikum.Wr.Wb haydaherawati 12/08/2017
Read more