Cara Membuat Layout Dengan CSS

Cara Membuat Layout Dengan CSS - Hallo sahabat Jendela Dunia Internet Dan Tekhnologi, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Layout Dengan CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Web Design, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Layout Dengan CSS
link : Cara Membuat Layout Dengan CSS

Baca juga


Cara Membuat Layout Dengan CSS

Cara Membuat Layout Dengan CSS

Juragan coding – yup kali ini saya akan membagikan tutorial cara membuat layout web dengan css,sekedar info saja nih teman-teman bahwa membuat layout website itu merupakan hal yang sangat penting karena di dalam layout tersebut lah komponen-komponen dalam website kita akan di letakan seperti navigasi,konten,portfolio,dll.untuk membuat layout ada beberapa cara tapi saya tidak akan menjelaskan nya hanya point nya saja

  1. Pencil dan kertas
  2. Photoshop
  3. Tool wireframe
  4. Work coding

APA ITU LAYOUT?

Secara garis besar layout adalah gambaran interface dalam suatu halaman website atau blog yang biasa nya terdiri dari
  1. Header
  2. Main atau konten
  3. Sidebar
  4. Footer
Baca Juga : Dashgum Template Super Keren 

Nah itu merupakan basic dari layout dalam halaman website,untuk lebih jelas nya silahkan lihat gambar di bawah ini
Nah lanjut ke tutorial

TUTORIAL MEMBUAT LAYOUT WEB

Nah layout yang akan kita buat yaitu terdiridari header,main,sidebar,footer
1.  1.      Silahkan teman-teman buat basic html nya terlebih dahulu silahkan copy sintaksdi bawah ini



<html>
        <head>
          <title> Layout Web | juragancoding.com </title>
          <!-- untuk meload css teman-teman -->
          <link href="css/style.css" rel="stylesheet" type="text/css"></link>

        </head>
        <body>

        <!-- start -->

        <!-- end -->

        </body>
        </html>


1.       2. Silahkan copy sintaks di bawah ini untuk menandakan bahwa teman-teman akan membuat class nya silahkan copy kan di antara start dan end

<div class="header">
                <center><h1> Tutorial Membuat Layout Web - Juragancoding.com</h1></center>
</div>
<div class="main">
                <section>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                lorem <br />
                                <a href="#"> Read More </a>
                                <hr>

                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                lorem <br />
                                <a href="#"> Read More </a>
                                <hr>

                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                lorem <br />
                                <a href="#"> Read More </a>
                                <hr>

                </section>
</div>
<div class="sidebar">
                <center><h5> Menu web </h5></center><br />
                <center>
                                <ul class="menu" type="none">
                                                <a href="#"><li> Home </li></a>
                                                <a href="#"><li> Contact </li></a>
                                                <a href="#"><li> Portfolio </li></a>
                                </ul>
                </center>
</div>
<div class="footer">
                <center><h5> www.juragancoding.com</h5></center>

</div>

3.       Nah selanjutnya buat folder CSS dan buat file dengan ekstensi .css lalu salin sintaks di bawah ini dan untuk susunan folder nya bisa lihat gambar di bawah ini
Cara Membuat Layout Dengan CSS


*{
                margin: 0px;
                padding: 0px;
}

.header{
                width: 100%;
                height: 70px;
                background-color: red;
}

.header h1{
                color: white;
                font-family: sans-serif;
                font-size: 18px;
                padding-top: 20px;
}

.main{
                width: 70%;
                height: auto;
                background-color: #E8E9F8;
                float: left;
                margin-top: 2px;
                color: #000;
                font-family: sans-serif;
                font-size: 14px;
}

.main a{
                color: black;
                background-color: #5E62CC;
}

.sidebar{
                width: 28%;
                height: auto;
                background-color: #555;
                float: left;
                margin-top: 2px;
                color: #fff;
                font-family: sans-serif;
                margin-left: 5px;

}

.sidebar a {
                color: white;
                text-decoration: none;
                line-height: 3px;
}

.footer{
                width: 100%;
                height: 30px;
                background-color: red;
                clear: both;
                padding-top: 20px;
}

.footer h5{
                color: white;
                font-family: sans-serif;
                font-size: 18px;

}

cerita sex tante girang
1.       Nah untuk coding keseluruhan nya bisa copy di bawah ini dan hasil nya bisa lihat di bawah ini
Cara Membuat Layout Dengan CSS



Demikianlah Artikel Cara Membuat Layout Dengan CSS

Sekianlah artikel Cara Membuat Layout Dengan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Layout Dengan CSS dengan alamat link https://jendeladuniainternet.blogspot.com/2015/10/cara-membuat-layout-dengan-css.html

0 Response to "Cara Membuat Layout Dengan CSS"

Posting Komentar