Membuat Website Portal Sekolah

Hallo...
Semangat Pagi !

Dalam postingan kali ini, saya akan share portal web sekolah yang telah saya buat. Ya moho di maklumi , karena saya tidak terlalu jago jadi mungkin sedikit kurang menarik.

Yuk simak !

Pengertian
Portal web adalah situs web yang menyediakan kemampuan tertentu yang dibuat sedemikian rupa mencoba menuruti selera para pengunjungnya. Kemampuan portal yang lebih spesifik adalah penyediaan kandungan informasi yang dapat diakses menggunakan beragam perangkat.

Tujuan
Agar teman-teman dapat mengetahui tentang portal dan dapat menjadikan postingan saya sebagai referensi untuk membuat portal webseit sekolah ataupun portal website lainnya.

Alat dan Bahan
1. Komputer atau laptop.
2. Sublime text atau text editor lainnya.

Tahap Pelaksanaan
1. Buka dahulu sublime text atau text editor lainnya.
2. Salinlah kode berikut ini

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Portal SMK WIKRAMA 1 JEPARA</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  #test{padding: 20px}
  h1{text-align: center; color: #FFF;position: relative;  }
   h3{text-align: center;position: relative;
  color: #FFF;
  font-family: FreeSans;

}
  p{margin-bottom: 10px; color: #FFF;position: relative;}

#alvinafi{
  width: 80%;
  margin-left: 100px;
}

.hovereffect {
  margin-left: 0px;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}
#img{
     -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
  width: 300px;
  height:200px;
  border:5px solid#EB9532;
  padding: 1px;
}
.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.4s ease-in;
}

.hovereffect:hover img {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.hovereffect h2 {
  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
}

.hovereffect a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid #fff;
  margin: 50px 0 0 0;
  background-color: transparent;
}

.hovereffect a.info:hover {
  box-shadow: 0 0 5px #fff;
}

.hovereffect a.info, .hovereffect h2 {
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  opacity: 0;
  filter: alpha(opacity=0);
  color: #fff;
  text-transform: uppercase;
}

.hovereffect:hover a.info, .hovereffect:hover h2 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.wkr{
  position: relative;
  width: 240px;
  height: 210px;
}
.mar{
  position: relative;
  width: 100%;
  color: #fff;
  font-family: FreeSans;
  background: #F22613;
  padding: 0px; 
}
.titi{
  height: 26px;
  width: 410px;
}
.button{
  position: relative;
  background: #F22613;
  border:none;
  width: 90px;
  height: 27px;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;  
}
.button:hover{
  background: #D91E18;
}
.bd {
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: 0;
     float: left;
     left: 0;
     margin-top: -23px;
}
</style>

</head>

<body>
<img src="smk/rakbuku.jpg" alt="gambar" class="bd">
<div class="jumbotron">
  <h4>
<marquee class="mar">SELAMAT DATANG DI PORTAL SMK WIKRAMA 1 JEPARA</marquee></h4>
<a href="http://smkwikrama1jepara.sch.id/"><center>
<img class="wkr" src="logo.png"></a></center>
<br/>
<center>
<form method=get action="https://www.google.co.id/search" target="_blank">
<table border=0 cellapadding=0 cellspacing=0>
<tr><td colspan="2">
<input style="position:relative;" type="text" name="q" class="titi">
<input type="hidden" name="hl" value="id" />
<input type="submit" class="button" name="lacak" value="Google" />
</td></tr>
</table>
</form>
</center>
<center>
<h1>
PORTAL SISTEM INFORMASI PENDIDIKAN<br>
SMK WIKRAMA 1 JEPARA</h1>
</center>
<center>
<h3>
JL. Kelet-Ploso KM 38 Kecamatan Keling Kabupaten Jepara</h3>
</center>
</div>
<div class="row">
  <center style="color:#fff;font-weight:bold;position:relative; ">
PILIH MENU DI BAWAH INI :</br></center>
<br/>
</div>
<center>
<div id="alvinafi">
    <div class="hovereffect">
        <img id="img" src="smk/index.jpeg" width="220" height="200">
        <div class="overlay">
           <h2>
Website SWIKSARA</h2>
</div>
</div>
<div class="hovereffect">
        <img id="img" src="smk/ppdb.jpeg" width="220" height="200">
        <div class="overlay">
           <h2>
PPDB SWIKSARA</h2>
<a class="info" href="#">Buka Disini</a>
      
    </div>
</div>
<div class="hovereffect">
        <img id="img" src="smk/elearning.jpeg" width="220" height="200">
        <div class="overlay">
           <h2>
E-Learning SWIKSARA</h2>
<a class="info" href="#">Buka Disini</a>
    </div>
</div>
<div class="hovereffect">
       <img id="img" src="smk/buku.jpeg" width="220" height="200">
        <div class="overlay">
           <h2>
Gudang Buku SWIKSARA</h2>
<a class="info" href="#">Buka Disini</a>
       
    </div>
</div>
<div class="hovereffect">
        <img id="img" src="smk/gmail.jpeg" width="220" height="200">
        <div class="overlay">
           <h2>
E-mail SWIKSARA</h2>
<a class="info" href="#">Buka Disini</a>
        </div>
</div>
<div class="hovereffect">
        <img id="img" src="smk/linux.jpeg" width="220" height="200">
        <div class="overlay">
           <h2>
Iso SWIKSARA</h2>
<a class="info" href="#">Buka Disini</a>
        </div>
</div>
<div class="hovereffect">
        <img id="img" src="smk/reposito.jpeg" width="220" height="200">
        <div class="overlay">
           <h2>
Repository SWIKSARA</h2>
<a class="info" href="#">Buka Disini</a>
        </div>
</div>
<div class="hovereffect">
        <img id="img" src="smk/own.jpeg" width="220" height="200">
        <div class="overlay">
           <h2>
Cload Center SWIKSARA</h2>
<a class="info" href="#">Buka Disini</a>
        </div>
</div>
<div class="hovereffect">
        <img id="img" src="smk/slim.jpeg" width="220" height="200">
        <div class="overlay">
           <h2>
SLIM SENAYAN SWIKSARA</h2>
<a class="info" href="#">Buka Disini</a>
        </div>
</div>
</div>
</div>
</div>
</center>
<div class="hovereffect" style="font-family:KacstArt;margin-left: 40%; color:#fff;">
<h3>
Copyright © 2016 by KITA</h3>
</div>
</div>
</div>
</body>
</html><br />
</div>
</form>
</div>
<br /><br /> <br>

3. Simpan dengan nama index.html, ekstensi .html boleh di ganti dengan ekstensi .php.
4. Buka di browser anda, dan lihat hasilnya.

Referensi
https://id.wikipedia.org/wiki/Portal_web

Penutup
Terimakasih telah menyimak postingan saya kali ini, semoga postingan saya kali ini membantu, jangan lupa share dan join blog saya ya.
Selamat mencoba dan selamat belajar !

ayirsa~

Saturday, 6 August 2016

Membuat Website Portal Sekolah

About nn -

Join it !

Popular Posts

Labels

Instagram posts

About us