Skip to main content

MEMBUAT TAMPILAN WEBSITE



 Kali ini kita akan membuat tampilan website dengan menggunakan CSS dan HTML sebagai beriut:

1. Membuat CSS terlebih Dahulu


Lakukan mengetikan sourcode CSS di bawah ini, dan simpan dengan nama style.css

body {
    background: blue;
    margin:0;
    font-family: 'open sans', sans-serif;
}

 hr {
    border:0;
    background:gold;
    height:1px;
}

 header{
    text-align: center;
    color: #232323;
}

 header .judul{
    font-size: 18pt;
}

 header .deskripsi{
    font-size: 11pt;
}

 .wrap {
    width: 1200px; /*satu fungsi untuk menyesuaikan antara text dengan lebar area text */ margin:25px auto;
}

 nav.menu ul {
    overflow:hidden;
    color:#fff;
    list-style: none;
    float:left;
    padding:0;
    width: 1200px; /*ukuran untuk menu */
    margin:0 0 0;
    background: gold;
    border-bottom: 10px solid brown;
    -webkit-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0,55);
    -moz-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0,55);
    box-shadow: 1px 1px 1px 0px rgba(204,204,204,0,55);
}

 nav.menu ul li {
margin:0;
float:left;
}

 nav.menu ul a {
padding:25px;
display:block;
font-weight:600;
font-size: 16px;
color:brown;
text-transform: uppercase;
transition: all 0.5s ease;
text-decoration: none;
}

 nav.menu ul a:hover {
text-decoration: underline;
background:#16a085;
}

 .sidebar { /*menu kanan */
float:right;
width:275px;
}

 .sidebarleft { /*menu kiri */
float:left;
width:200px;
}

 .sidebar .widget {
padding:25px;
margin:0 0 25px;
background:silver;
border-bottom: 10px solid brown;
transition: all 0.5s ease;
}

 .sidebarleft .widgetleft {
padding:25px;
margin:0 0 25px;
background:silver;
border-bottom: 10px solid brown;
transition: all 0.5s ease;
}

 .sidebar .widget:hover {
border-bottom: 2px solid #3498db;
}
.sidebar .widget h2 {
padding:0;
margin:0 0 15px;
color:#3498db;
font-size: 18px;
font-weight:800;
text-transform: uppercase;
}

 .sidebarleft .widgetleft h2 {
padding:0;
margin:0 0 15px;
color:#3498db;
font-size: 18px;
font-weight:800;
text-transform: uppercase;
}

 .sidebar .widget p {
font-size: 14px;
}

 .sidebar .widget p:last-child {
margin:0;
}

.blog {
float:left;
}

.conteudo {
width:600px;
padding:25px;
margin:25px auto;
background:yellow;
border:30px solid brown;
-webkit-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
-moz-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
}

.conteudo img {
min-widht: 650px;
margin:0 0 25px -25px;
max-width: 650px;
}

.conteudo h1 {
padding:0;
margin:0 0 15px;
font-weight: normal;
color: #666;
font-family: Georgia;
}

.conteudo p:last-child {
margin:0;
}

.conteudo .continue-lendo {
color:#000;
transition: all 0.5s ease;
text-decoration: none;
font-weight: 700;
}

.conteudo .continue-lendo:hover {
margin-left:10px;
}

.post-info {
float: right;
font-size: 12px;
margin: -10px 0 15px;
text-transform: uppercase;
}

@media screen and (max-width: 960px) {

.header {
position:inherit;
}

.wrap {
width: 100%;
margin:25px auto;
}
.sidebar {
width:100%;
margin:25px 0 0;
float:right;
}

.sidebar .widget {
padding:5%;
}

nav.menu ul {
width: 100%;
}

nav.menu ul {
float:inherit;
}

nav.menu ul li {
float:inherit;
margin:0;
}

nav.menu ul a {
padding:15px;
font-size:16px;
border-top:1px solid #1abf9f;
border-bottom:1px solid #16a085;
}

.blog {
width:90%;
}

.conteudo {
float:inherit;
margin:0 auto 25px;
width:101%;
border:1px solid #dedede;
padding:5%;
background: #fff;
}

.conteudo img {
max-width: 110%;
margin:0 0 25px -5%;
min-width: 110%;
}

.conteudo .continue-lendo:hover {
margin-left:0;
}


}

@media screen and (max-width: 460px) {

nav.menu ul a {
padding:15px;
font-size: 14px;
}

.sidebar {
display:none;
}
.post-info {
display:none;
}

.conteudo {
margin:25px auto;
}

.conteudo img {
margin:-5% 0 25px -5%;
}
.footer { /* keterangan footer */
width:100px;
height:50px;
border-bottom:silver 1px solid;
position:fixed;
bottom:0px;
background-color:#ffffff;
z-index:2;
}
}


1. Membuat INDEX

Setelah membuat CSS maka langkah selanjutnya adalah membuat halaman index, simpan dengan nama index.html berikut sourcode dapat di tulis pada gambar dibawah.

<!DOCTYPE html>
<html>
<head>
    <title>TOKO ONLINE SHOPPING</title>
    <link rel="stylesheet" type="text/css"href="style.css">
</head>
<body>

    <!-- bagian header template -->
    <header>
         <h1 class="judul">SELAMAT DATANG DI TOKO ONLINE SHOPPING</h1>
         <h2 class="deskripsi">(situs online ini memberikan kemudahan dalam belanja)</h2>
    </header>
    <!-- akhir bagian header template -->

    <div class="wrap">
         <!--bagian menu         -->
         <nav class="menu">
              <ul>
                 <li>
                    <a href="index.html">Home</a>
                 </li>
                 <li>
                    <a href="#">About Me</a>
                 </li>
                 <li>
                    <a href="#">Kontak</a>
                 </li>
                 <li>
                    <a href="#">Login</a>
                 </Li>
             </ul>
         </nav>
     <!--akhir bagian menu-->

     <!--bagian sidebar kanan website-->
     <aside class="sidebar">
        <div class="widget">
         <h2>HUBUNGI VIA WHATSAPP </h2>
       
         </style>
               <div class="floatwa">
                <a href="https://api.whatsapp.com/send?phone=6288802654604amp;amp;text=Halo%20gan,%20Saya%20dari%20blog%20Milano" target="_blank"><div class="tombolwa">KLIK DISINI</div></a></div>
        </div>
        <div class="widget">
             <h2>Link Belajar Gratis</h2>
             <p>Teman-teman dapat gabung pada forum dibawah ini<br>
                <a target="_blank" href="htpps://www.php indonesia.id/"> *PHP indonesia</a>.</p> <br>
                <a target="_blank" href="htpps://web.facebook.com/groups/codeigniter.id/?_rdc=1&_rdr">*Facebook Code Igniter</a>.</p>
             
        </div>
       </aside>
     <!--akhir bagian sidebar website-->


    <!--bagian sidebar kanan website-->
        <aside class="sidebarleft">
        <div class="widgetleft">
               <h2>MENU UTAMA</h2>
               <a target="_blank" href="#">Daftar Produk</a>.</p> <br>
               <a target="_blank" href="#">Daftar Pengiriman</a>.</p> <br>
               <a target="_blank" href="#">Daftar Katagori</a>.</p> <br>
             </div>

        </aside>
      <!-- akhir bagian sidebar website -->

     <!-- bagian konten Blog -->
        <div class="blog">
             <div class="conteudo">
                <div class="post-info">
                   Di posting oleh <b>Moh Hanif Saikhu</b>
             </div>
             <img src="img/capture.jpg">
             <h1> Ayok Belanja Di Toko Online Shopping kami !!! </h1>
             <hr>
             <p>
               Toko online shopping kami ini sudah tersedia berbagai macam produk kebutuhan sehari-hari seperti  baju,alat dapur,kosmetik dll.
             </p>
             <a href="#" class="continue-lendo">Selengkapnya </a>
     
        </div>

     <!-- akhir bagian konten -->

               <div class="footer">
               
     <div class="container">copyright &copy; 2020 moh hanif saikhu</div>

     </div>
     </div>

</body>
</html>





langkah-langkah membuat tampilan website  dengan menggunakan CSS dan HTML:

  1. bahan yang harus di persiapkan adalah sublimetext / notepad ++ dan xampp
  2. Buka aplikasi Xampp kalian.
  3. Klik start pada module Apache dan MySQL
  4. Buka aplikasi Sublime Text3
  5. Ketik  di Sublime Text3 yang anda mau buat
  6. Cara simpen data: buka file lalu klik  seve as lalu di  xampp, terus di htdocs,setelah masuk htdocs kita bikin file contoh responsive,setelah udah bikin kita simpen data CSS dan HTML disitu.
  7. Cara melihat hasil: kita masuk ke google terus tulis localhost dan setelah udah ditemukan entar ada tugas kamu disitu tinggal klik seperti gambar dibawa ini hasilnya.
Tampilan di localhost/browser










Comments

Post a Comment

Popular posts from this blog

Membuat Model,View,Controller dengan CodeIgniter

  P ERTEMUAN 1  Membuat Model,View,Controller dengan CodeIgniter kali ini mari kita belajar membuat model,view dan controller di dalam codeigniter. Contoh penggunaan hanya controller Mari kita buat Controller Latihan1 simpan dalam folder Application/controllers/ Untuk melihat hasilnya ketikkan url  localhost/pustaka-booking/latihan1 . Maka akan seperti ini.                                                                                              Menggunakan Controller dan Model Buat Model dengan folder Model_latihan1.php simpan di application\models\ Ubah controller Latihan1 yang sebelumnya sudah dibuat sehingga menjadi seperti berikut: Untuk melihat hasilnya ketikkan url localhost/pustaka-booking/ index.php/latihan1/penjumlahan/2/6 Mengg...
Post a Comment
Read more

MATERI PEMOGRAMAN

#PENGERTIAN  PEMOGRAMAN pemograman merupakan suatu proses yang meliputi menulis,testing,memperbaiki dan  memaintance (memelihara) perintah-perintah (kode/script) sebuah program komputer. #Kategori Bahasa pemrograman Berdasarkan tingkatannya bahasa pemrograman komputer dibedakan menjadi 2 yaitu Bahasa tingkat rendah dan bahasa tingkat tinggi. Bahasa Tingkat Rendah :  yaitu bahasa pemrograman yang hanya dimengerti oleh mesin. Bahasa ini dikerjakan langsung oleh mesin. Contohnya yaitu bahasa standar rakitan atau biasa kita kenal dengan assembler. Bahasa tingkat tinggi :  Bahasa ini sudah mendekati bahasa manusia. Artinya pengguna sudah dapat memahami bahasa ini. Mesin membutuhkan compiler untuk mengerjakan perintah. PHP, java, C++, Pascal dan masih banyak lainnya merupakan contoh dari bahasa tingkat tinggi. # Jenis-jenis Bahasa Pemograman   – Java Logo Bahasa Pemrograman Java Java merupakan Salah satu bahasa pemrograman yang paling po...
Post a Comment
Read more

PUSTAKA-BOOKING

  Pertama kita buat database dengan nama  pustaka-booking  dengan table berikut : Tabel user Tabel role Tabel kategori Tabel buku Tabel temp Tabel booking Tabel booking_detail  Tabel pinjam Tabel detail_pinjam  Setelah kita buat database selanjutnya buat codingan di sublime: Home.php kemudian kita Buat sebuah file dengan nama  header.php  pada folder Application/views/templates/templates-user . seperti berikut: lanjut kita Buat sebuah file dengan nama  footer.php  pada folder Application/views/templates/templates-user . seperti berikut: setelah itu kita buat View daftarbuku Buatlah sebuah file view baru dengan nama  daftarbuku.php  pada folder Application/views/buku . Ketikkan script berikut: Kalau sudah lewati tahap tahap di atas nanti tampilan nya seperti ini... selanjutnya kita buat tampilan untuk detail bukunya. Tambahkan sebuah fungsi baru dengan nama detailBuku pada controller Home Buka kembali ModelUser.php yang pernah dibuat...
Post a Comment
Read more