Tuesday, 6 March 2018

Membuat layout sederhana dengan HTML & CSS

Ada yang bilang website atau sering disingkat web adalah halaman informasi yang disediakan melalui jalur internet sehingga bisa diakses di seluruh dunia selama terkoneksi dengan jaringan internet. ada juga pendapat lain mengenai pengertian website ini yaitu, web adalah salah satu alat komunikasi online yang menggunakan media internet dalam pendistribusiannya. dalam website terdapat kumpulan halaman yang menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink).
Secara terminologi website adalah kumpulan dari halaman-halaman situs, yang biasanya terangkum dalam sebuah domain atau subdomain, yang tempatnya berada di dalam World Wide Web (WWW) di Internet. WWW terdiri dari seluruh situs web yang tersedia kepada publik. Halaman-halaman sebuah situs web  (web page) diakses dari sebuah URL yang menjadi “akar” ( root ), yang disebut homepage (halaman induk; sering diterjemahkan menjadi “beranda”, “halaman muka”), URL ini mengatur web page untuk menjadi sebuah hirarki, meskipun hyperlink-hyperlink yang ada di halaman tersebut mengatur para pembaca dan memberitahu mereka susunan keseluruhan dan bagaimana arus informasi ini berjalan. Sebuah Web page adalah dokumen yang ditulis dalam format HTML (Hyper Text Markup Language), yang hampir selalu bisa diakses melalui HTTP, yaitu protokol yang menyampaikan informasi dari server website untuk ditampilkan kepada para pemakai melalui web browser. Semua publikasi dari website-website tersebut dapat membentuk sebuah jaringan informasi yang sangat besar. 
Dan pada saat ini website merupakan salah satu jaringan informasi terbesar dan tercepat dalam penyampaian informasinya, oleh karena itu masyarakat lebih senang menggunakan media ini sebagai sarana untuk mencari informasi informasi terbaru (terupdate). Selain sebagai sarana untuk mencari informasi, pada saat ini website ini juga sebagai sarana bisnis (jual beli) yang sangat populer, oleh karena itu hampir semua kalangan pembisnis atas, menengah atau bawah sudah memiliki website pribadi perusahaannya.  
Lalu bagaimana cara membuat website itu sendiri, berikut adalah salah satu contoh untuk membuat layout atau tampilan antar muka dari website itu sendiri.
Copy dan pasti Srcipt berikut pada notepad dan save dengan format html (contoh.html)
<html>
<head>
<title>Membuat Layout Website Sederhana</title> // nama dari website yang akan di buat
<link href="style.css" type="text/css" rel="stylesheet"> // berfungsi untuk pengaturan tampilan
</head>
<body>
<div class="wrap">
    <div class="header">
            <h1>HEADER</h1> // bagian kepala dari website yang biasa berisi logo
    </div>
   <div class="nav"> // bagian ini berisi menu menu yang tersedia
            MENU
    </div>
    <div class="main">
        <div class="content"> // bagian merupakan isi atau informasi dari website yang akan di buat
            <h2>Content</h2>
            <p>Content Web</p>
        </div>

        <div class="sidebar"> // bagian sisi kanan atau kiri sebuah website
            <h2>Right Sidebar</h2>
        </div>

        <div class="clear"></div>

    </div>

    <div class="footer"> // merupakan paling bagian bawah dari sebuah website
        <center><p>Copyright &copy; 2017 www.modulkomputer.com</p></center>
    </div>

</div>
</body>
</html>

lalu copy juga file css berikut dengan format css (contoh.css)
* {margin:0}

body {
            font-family:algerian;  
}

.wrap {
            width:1000px;
            margin:0 auto;        
}
           
.header {
            width:auto;
            background:#09C;
            padding:20px;
            color:blue;
}  
.clear {clear:both}  

.nav {
            width:auto;
            background:green;
            padding:5px 20px;
            color:aqua;
}  

.main {
            width:100%;
            background:red;
}

 

.content {
            float:left;
            width:66%;
            background:blue;
            padding:2%;
            min-height:400px;
}

.sidebar {
            float:right;
            width:26%;
            background:yellow;
            padding:2%;

}        

.clear {clear:both}

.footer {
            width:auto;
    height:auto;
            padding:5px 10px;
            background:#333;
            color:grey;

}

            nah script tadi merupakan salah satu contoh untuk membuat layout sederhana untuk sebuah website, semoga bermanfaat...

sumber :
www.proweb.co.id

1 comment:

  1. Casino Review – CasinoRatingReviews.com
    Casino Review, Including ratings, games, complaints, 청주 출장안마 bonus codes, free spins, no deposit 계룡 출장샵 bonuses, live 원주 출장샵 dealer and mobile Casino Promotion: 제주도 출장안마 CASINO BONUS CODE: NOVOMOV Rating: 3 · ‎Review by 서귀포 출장안마 Dr

    ReplyDelete