Membuat Portal Sekolah ~ Rizka Mala Alfiana

Assalamu'alaikum wr.wb

A.Pendahuluan
Dalam pertemuan kali ini saya akan share tentang tutorial membuat web Portal dalam sekolah, dengan menggunakan script HTML+CSS.

B.Latar Belakang
Web Portal adalah web site yang menjadi pintu gerbang, starting point bagi pengunjung untuk memulai aktivitasnya di Internet. Web Portal ini bersifat menyediakan berbagai informasi dan layanan umum tentang sekolah tersebut.
C.Maksud Dan Tujuan
   Agar memudahkan siswa maupun orang lain untuk mengetahui tentang layanan umum dalam sekolah tersebut.
D.Alat Dan Bahan
    -Text Editor
     -Koneksi Internet

E.Pembahasan
   Dalam pembuatan portal tersebut kita harus perhatikan script-script nya, Mari kita simak dengan baik cara penulisan scriptnya:

Buka text editor anda lalu ketikkan script seperti dibawah ini: #Script HTML                                                                                                   <!DOCTYPE html>
<html>
<head>
    <title>Portal Sekolah</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="description" content="Ini Adalah Portal Dari SMK HASAN KAFRAWI">
<meta name="author" content="Rizka Mala Alfiana">
<meta name="keyword" content="Portal Sekolah">
<link rel="stylesheet" type="text/css" href="assets/css/skeleton.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="shortcut icon" href="assets/img/SMK.jpg">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/jquery.backstretch.min.js"></script>
</head>
<body>


<script type="text/javascript">
        $.backstretch(
        [
            "assets/img/3.jpg",

        ],
        {
            duration: 3000,
            fade: 600
        });
    </script>

    <div class="transparant"></div>
    <center>
    <br>

<marquee><div><b>.:SELAMAT DATANG DI PORTAL SEKOLAH SILAHKAN PILIH MENU DIBAWAH INI SESUAI DENGAN YANG ANDA INGINKAN</marquee></div></b>
        <h2 style="font-family: raleway">SMK HASAN KAFRAWI MAYONG JEPARA
        <center><img class="cover" src="assets/img/logo smk.png"></center></h2>
        <p style="font-size: 20px;color: white;margin-top: -2%"> Jl. Raya Mayong-Pancur Km.08 Pancur Mayong Jepara <br>
        Kodepos <b style="font-family: lato">59465</b> Jawa Tengah
        Telp : <b style="font-family: lato">(0852)90719676</b></p>
    </h4>
    </center>


<div class="container">
            <div class="three columns">
        <div class="bungkus twelve columns">
            <center>
                <img style="width: 100%;margin: 0" class="gambar" src="assets/img/e.png">
                </center>
                </div>
                <br>
                <center><a href="file:localhost/var/www/html/TUGAS/frpenftrn.html" target="new"><button style="width: 100%" class="button button-primary">PPDB</button></a>
    </div>
            <div class="three columns">
        <div class="bungkus twelve columns">
            <center>
                <img style="width: 100%;margin: 0" class="gambar" src="assets/img/email.png">
                </div>
                <br>
                <a href="http://localhost/fileauto/index.php?dir=RPL/" target="new"></a>
                <button style="width: 100%" class="button button-primary">RPL</button>
                </center>
        </div>
            <div class="three columns">
        <div class="bungkus twelve columns">
            <center>
                <img style="width: 100%;margin: 0" class="gambar" src="assets/img/mm.png">
                </div>
                <br>
                <a href="http://localhost/fileauto/index.php?dir=RPL/multimedia/" target="new"></a><button style="width: 100%" class="button button-primary">MULTIMEDIA</button>
            </center>
    </div>
        <div class="three columns">
        <div class="bungkus twelve columns">
            <center>
                <img style="width: 100%;margin: 0" class="gambar" src="assets/img/library.png">
                </div>
                <br>
                <a href="http://localhost/fileauto/index.php?dir=RPL/" target="new"><button style="width: 100%" class="button button-primary">REPOSITORY</button></a>
            </center>
    </div>
    </div>

<footer>
    <p>
    Copyright © 2018 SMK HASAN KAFRAWI MAYONG JEPARA<br>
    Designed BY RIZKA MALA ALFIANA</a>
    </p>
</footer>
</body>
</html>
Kemudian tambahkan script CSS nya,berhubung ada dua script CSS maka kita sisipkan satu / satu. #style.css                                                                             @font-face{
    src: url("../fonts/lato/lato-regular.ttf");
    font-family: "lato";
}
@font-face{
    src: url("../fonts/raleway/Raleway-Regular.ttf");
    font-family: "raleway";
}
*{
    box-sizing: border-box;
}
h2,
h4{
    text-align: center;
    color: white;
}
body{
    font-family: raleway;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
    margin: 0;
    color: white;
}
.transparant{
    background: rgba(0,0,0,0.45);
    left: 0px;
    top: 0px;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
    z-index: -999999;
    position: fixed;
}
.bungkus{
    border-radius: 5%;
    width: 100%;
    padding: 10px;
    border: 1px solid white;
    -webkit-transition: ease-in 0.2s;
    -moz-transition: ease-in 0.2s;
    -o-transition: ease-in 0.2s;
    transition: ease-in 0.2s;
    animation-name: animation;
    animation-iteration-count: 1;
    animation-duration: 1s;
}
.bungkus:hover{
    background color: #FFCC00;
}
@keyframes animation{
    0%    {margin-left: 80px;}
}
.gambar{
    object-position: center;;
    object-fit: cover;
    max-width: 500px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
.gambar:hover{
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}
.cover{
    width: 200px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
.cover:hover{
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
    transform: scale(1.15);
}
footer{
    text-align: center;
    font-family: lato;
    border-top: 2px solid white;
    padding: 10px 0px 1px 0px;
    background: CornflowerBlue;
}
.slideshow > .image {
        position: absolute;
        left: 0;
        background-size: cover;
    }kemudian sisipkan script css yang satunya #skeleton.css
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box; }
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
.container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
.container {
    width: 80%; }
.column,
.columns {
    margin-left: 2%;
    margin-bottom: 2% }
.column:first-child,
.columns:first-child {
    margin-left: 0; }

.one.column,
.one.columns                    { width: 4.66666666667%; }
.two.columns                    { width: 13.3333333333%; }
.three.columns                  { width: 23%;          }
.four.columns                   { width: 30.6666666667%; }
.five.columns                   { width: 39.3333333333%; }
.six.columns                    { width: 48%;            }
.seven.columns                  { width: 56.6666666667%; }
.eight.columns                  { width: 65.3333333333%; }
.nine.columns                   { width: 74.0%;          }
.ten.columns                    { width: 82.6666666667%; }
.eleven.columns                 { width: 91.3333333333%; }
.twelve.columns                 { width: 100%; margin-left: 0; }

.one-third.column               { width: 30.6666666667%; }
.two-thirds.column              { width: 65.3333333333%; }

.one-half.column                { width: 48%; }

/* Offsets */
.offset-by-one.column,
.offset-by-one.columns          { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns          { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns        { margin-left: 26%;            }
.offset-by-four.column,
.offset-by-four.columns         { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns         { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns          { margin-left: 52%;            }
.offset-by-seven.column,
.offset-by-seven.columns        { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns        { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns         { margin-left: 78.0%;          }
.offset-by-ten.column,
.offset-by-ten.columns          { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns       { margin-left: 95.3333333333%; }

.offset-by-one-third.column,
.offset-by-one-third.columns    { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

.offset-by-one-half.column,
.offset-by-one-half.columns     { margin-left: 52%; }

}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
font-size: 62.5%; }
body {
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: black; }

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
font-weight: 800; }

/* Larger than phablet */
@media (min-width: 550px) {
h1 { font-size: 5.0rem; }
h2 { font-size: 4.2rem; }
h3 { font-size: 3.6rem; }
h4 { font-size: 3.0rem; }
h5 { font-size: 2.4rem; }
h6 { font-size: 1.5rem; }
}

p {
margin-top: 0; }

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
color: #1EAEDB; }
a:hover {
color: white; }

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
font-family: lato;
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
color: #333;
border-color: #888;
outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
color: #FFF;
background-color: CornflowerBlue;
border: 1px solid #FFFFFF;
transition: 0.5s; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
color: #FFF;
background-color: transparent;
border-color: 2px #1EAEDB; }

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
height: 38px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid #33C3F0;
outline: 0; }
label,
legend {
display: block;
margin-bottom: .5rem;
font-weight: 600; }
fieldset {
padding: 0;
border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
display: inline; }
label > .label-body {
display: inline-block;
margin-left: .5rem;
font-weight: normal; }

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
list-style: circle inside; }
ol {
list-style: decimal inside; }
ol, ul {
padding-left: 0;
margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%; }
li {
margin-bottom: 1rem; }

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px; }
pre > code {
display: block;
padding: 1rem 1.5rem;
white-space: pre; }

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
padding-left: 0; }
th:last-child,
td:last-child {
padding-right: 0; }

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
margin-bottom: 2.5rem; }

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
width: 100%;
box-sizing: border-box; }
.u-max-full-width {
max-width: 100%;
box-sizing: border-box; }
.u-pull-right {
float: right; }
.u-pull-left {
float: left; }

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
margin-top: 3rem;
margin-bottom: 3.5rem;
border-width: 0;
border-top: 1px solid #E1E1E1; }

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
content: "";
display: table;
clear: both; }

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}
Kemudian jalankan di Browser, jika benar maka dia akan muncul gambar seperti ibawah ini:

F.Kesimpulan
Itulah tutorial dalam membuat portal web sekolah.
G.Penutup
Sekian yang dapat saya share kan,semoga dapat bemanfa'at buat kita semua.

Senin, 22 Oktober 2018

Membuat Portal Sekolah

Assalamu'alaikum wr.wb

Wassalamu'alaikum wr.wb

0 comments:

Posting Komentar

Label

Popular Posts

Recent Posts

Rizka Mala Alfiana

About Me

Formulir Kontak

Pengikut

Arsip Blog

Recent

Comment

Social Media Icons