Tutorial membuat Web

Update

Artikel Terbaru

Home

Tutorial membuat Web

Senin, 01 Juli 2019, Juli 01, 2019
Assalamualaikum Wr. Wb😇
Saya akan menjelaskan sedikit tutorial membuat web
Ok dimulai saja ya😊
1.Saya Disini Membuat HTML dan CSS dengan Software Sublimetext
2.Lalu Copy Kode Tersedia Di bawah:
<!DOCTYPE html>
<html>
<head>
    <title>LILIS</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            font-family: calibri;
            line-height: 1.5em;
        }
    #baris1{
        background-color: white;
        padding:5px 0;
        position: fixed;
        width: 100%;

        }

        .container {
            width:900px;
            margin: 30px 70px;

        }
        #title {
            display: inline;
            color:navy;
            float: left;
            padding-right: 200px;
        }
      
        #menu {
            padding: 10px 0;
            list-style: none;
            float: right;

        }
        #menu li {
            display: inline;
            margin-left: 20px;
        }


        #baris2 {
        padding: 70px 0;
        background-image: url(lilis.jpg.jpeg);
        background-size: cover;
        background-color: green;


        }



        p {
            margin: 70px 0;
            font-size: 40px;
            color: white;
        }

        .btn{
            border: 1px solid green;
            padding: 10px 20px;
            background-color: white;
            text-decoration: none;
        }

        #baris3{
            background-color: navy;
            padding:  0;
        }

        #baris4{
            background-color:white;
            padding: 150px 30px;
        }

        #kl {
            padding:0;
            color: white;
        }

        #kl li{
            color: black;
            list-style: none;
            display: inline;
            float: left;
        }

        #kolom1 {padding: 0 50px;}
        #kolom2 {padding: 0 50px;}
        #kolom3 {padding: 0 50px;}

#baris5{
    background-color: navy;
    padding: 150px 30px;
}

b{
    color:yellow;
}


#bg{
    padding: 0;
    color:blue;
}

#bg li{
    color:white;
    list-style: none;
    display: inline;
    float: left;
}



#kolom1{padding: 0 50px;}
#kolom2{padding: 0 50px;}
#kolom3{padding: 0;}


    </style>


</head>
<body>
    <div id="baris1">
        <div class="container">

            <h1 id="title">OEMAR BAKRIE</h1>
            <ul id="menu">
                <li><a href="#">HOME</a></li>
                <li><a href="#">FEATURES</a></li>
                <li><a href="#">STAFF</a></li>
                <li><a href="#">GALLERY</a></li>
                <li><a href="#">NEWS</a></li>
                <li><a href="#">CONTACT US</a></li>
            </ul>
            <div class="fix"></div>
        </div>
    </div>
    <div id="baris2">
    <div class="container">
        <h2 align="center">Welcome to Our School</h1>
        <p align="center">Oemar Bakrie is our best Theme release using material design for Education & Learning Centers</p>

        <a href="#" class="btn">Our Programs</a>
</div>

<div id="baris3">
    <div class="container">
        <h3 align="center">Oemar Bakrie is our theme release for education & learning centers</h3>
  
</div>

<div id="baris4">
        <div class="container">
            <ul id="kl">
                <li id="kolom1"><b>Campus Life</b></br>
                Welcome to Oemar Bakrie,<br>
                a multipurpose edu theme<br>
                Go ahead and click around,<br>
                there is a<br>
                </li>

                <li id="kolom2"><b>Admissions</b><br>
                Whether your new to Oemar Bakrie <br>
                or are <br>
                looking for more information<br>
                on school activities you can <br>
                find information about<br>
                </li>

                <li id="kolom3"><b>Programs</b><br>
                Here at school we support<br>
                student<br>
                athletes both on <br>
                and off the pitch court, <br>
                field, and track.<br>
            </li>
            </ul>

        </div>
    </div>

    <div id="baris5">
        <div class="container">
            <ul id="bg">
            <li id="kolom1"><b>About Us</b><br>
                Lorem ipsum dolor sit amet,<br>
                consectetur <br>
                adipisicing elit, sed do<br>
            </li>

            <li id="kolom2"><b>Latest News</b><br>
                Speeding Up Your website<br>
                Post With Full Page<br>
                Post With TThumbail Image<br>
            </li>

            <li id="kolom3"><b>Address</b><br>
                Jl.Yuk No 12 Bogor engah<br>
                Kode Pos 16124<br>

                Telp:(0251)12345678
                Email:Info<br>
                @domainanda.com<br>
            </li>
        </ul>
</div>
</div>


</body>
</html>

3.Ini Tampilan Dari Web Saya
 4.Terinspirasi Dari
https://red-creatives.com/jasa-pembuatan-website-sekolah/template-website-sekolah-gratis/

Terimakasih 😊
Semoga bermanfaat
Assalamualaikum wr. Wb 😇

TerPopuler