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

Cara laporan pajak 2023 (Moh Hanif Saikhu)

Pertama kamu login kalau sudah masuk Klik lapor  Klik efeling Klik Buat spt Klik Ya Ikutin yang di kertas laporan pajak dari sudin. terus simpan setiap orang berbeda-beda jangan disamakan, yang ada tulisan sudin yang sampe kebawa hapusin, lalu perbaruan sesuai data laporan kertas kemaren,kalau ga di hapus bakal minus harus buat lagi  Untuk ini penghitungan PPh pasal 21 nomor 12 yang dikertas Ikutin Lanka ini Klik harta pada spt tahun lalu jika kamu ga bisa klik tambah lalu ketik sesuai harta kamu Jik status anda sudah kawin klik yang kawin lalu pilih golongan PTKP anda yang sudah nikah kalau yang belom kawin klik tidak kawin  golongan PTKP yang belom nikah kosongin  Disni klik ambil kode verifikasi lalu ke email Kam lalu cek di aplikasi Gmail kamu lalu salin dan buka web pajak lagi lalu tempel kode kamu lalu kirim spt Tamattttttttttt  
Post a Comment
Read more

VOLUME KUBUS

Menghitung Volume KUBUS Kali ini kita akan coba buat script menggunakan bahasa pemrograman PHP untuk menghitung volume Kubus menggunakan fungsi operator aritmatika dan operator string dengan ketentuan sebagai berikut : • Panjang sisi kubus = 15cm • Hitung volume balok dengan rumus = sisi x sisi x sisi • Buat variable teks1 yang berisi = “Belajar Menghitung” dan teks2 yang berisi = “Volume Kubus”. Buat perintah untuk menggabungkan nilai dari variable teks1 dan teks2 menggunakan operator string. langkah-langkah membuat volume kubus: bahan yang harus di persiapkan adalah sublimetext / notepad ++ dan xampp Buka aplikasi Xampp kalian. Klik  start  pada module Apache dan MySQL Buka aplikasi Sublime Text3 Ketikkan kalimat berikut pada sublime text/notepad ++ jika ada : <?php $teks1=”Belajar Menghitung Volume Kubus”; $teks2=”Panjang Sisi Kubus”; $teks3=”Volume Kubus”; $teks4=”cm3″; $sisi=15; $volume=$sisi*$sisi*$sisi; echo “$teks1<br>”; echo “$teks2 = $...
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