MEMBUAT PORTAL SEKOLAH ~ My Inscription

Assalamu'alaikum wr.wb

A.Pendahuluan

hai guys ketemu lagi diblog saya. Kali ini saya akan membahas 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

memudahkan siswa maupun orang lain untuk mengetahui tentang layanan umum dan juga informasi dari sekolah tersebut.

D.Alat Dan Bahan

-sublime text
-Koneksi Internet

-laptop

E.Pembahasan

Saya dan Rizka Mala Alfiana dari SMK Hasan Kafrawi membuat project mengenai pembuatan portal.
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

web portal dibuat untuk memudahkan siswa juga sarana informasi tentang sekolah tersebut

G.Penutup

Sekian yang dapat saya share kan, semoga dapat bemanfa'at buat kita semua.
Sampai jumpa dipost selanjutnya..

My Inscription

Senin, 22 Oktober 2018

MEMBUAT PORTAL SEKOLAH

Assalamu'alaikum wr.wb

Wassalamu'alaikum wr.wb

0 komentar:

Posting Komentar

Popular Posts

Blog Archive

About Me

Pengikut

Total Pageviews

Facebook

Video News

Feature

Popular Posts