TUGAS 6 PEMROGRAMAN WEB

Dari tugas 4: HTML Layout, pisahkan lah style yang Anda gunakan pada file HTML ke dalam file terpisah yang diberi nama style.css, kemudian semua HTML yang Anda miliki mengacu pada file style.css tersebut.
Tanda Anda sudah mengerjakan dengan benar adalah, apabila file style.css diubah, maka akan mempengaruhi tampilan pada semua file HTML yang mengacunya.
  1. Gunakan element H1 pada judul setiap halaman yang ditentukan warnanya dengan warna tertentu pada style.css
  2. Kata pertama pada judul tiap halaman diberikan warna yang berbeda dengan warna kata yang lainnya.
  3. Setiap link pada bagian atas Navigasi internal diberikan warna tertentu yang sama.
  4. Setiap link pada bagian samping Navigasi external diberikan warna tertentu dan rata kanan.
  5. Elemen header dan footer memiliki warna backgrond yang sama.
  6. Link yang dilewati oleh mouse (on hover) diberikan ukuran font yang lebih besar dari sebelumnya dan diberikan warna background tertentu.

jawaban:
1.pada tugas ini saya menggunakan dua buah css.yang tampilannya berbeda.
-pertama css.tugas.
tampilan keseluruhan.
body{
    background-image:url(background.jpg);
}

h1.nav1{
    color:white;
    text-align:center;
}

span.nav1{
    color:red;
}
span.color{
    color:red;
}
marquee{
    color:indigo;
}
a.one{
    color:brown;
    padding: 1em;
}

 a:hover:not(.active){
            background-color: turquoise;
            padding: 1em;
            font-size:24px;
          }
.active {
            background-color: turquoise;
            padding:1em;
            font-size:24px;
            }
hr.nav{
    width:60%;
    float:right;
}
a.nav1{
    text-decoration: none;
    color:green;
}
a.back{
    color:white;
   
}
#header{
                        background-color: black;
                        color: white;
                        margin: 2px 2px 2px 2px;
                        padding: 30px;
                        height:90px;
                        border:2px solid lavender;
                        border-radius:6px;}
            .cities{
                        background-color:white;
                        text-align:center;
                        height:30px;
                        color: black;
                        margin: 1px 2px 2px 2px;
                        padding: 24px;
                        border:2px solid lavender;
                        border-radius:6px;}
            #content{
                        width: 900px;
                        height:725px;
                        margin: auto; /* membuat posisi di tengah */
                        border-radius:10px;
                        border:3px solid white;}
            nav{
                        float:right;
                        text-align:right;
                        padding    :10px;
                        border:1px solid #000;
                        background:white;
                        height:385px;
                        width:200px;
                        border-radius:6px;}
            p{
                        text-align:justify;
            }
            h2.nav{
                        text-align:center;
                        color:brown;
            }
            h4.footer{
                        text-align:left;
            }
            h5.profil{
                text-align:center;
           
            }
            article{
                        background-color:lavender;
                        width:665px;
                        height:400px;
                        margin:2px 2px 2px 2px;
                        border-radius:6px;
                        padding:3px;
                        border:1px solid #000;}
            #footer{
                        padding: 1em;
                        margin:2px 2px 2px 2px;
                        color: white;
                        background-color: black;
                        clear: left;
                        text-align: center;
                        border-radius:6px;
                        border:2px solid lavender;}

-yang kedua css untuk tampilan layout sendiri
tampilan keseluruhannya sebagai berikut
body{
    background-image:url(waw.jpg);
}


#header{
                        width:1100px;
                        height:230px;
                        background-color:black;
                        margin-left:120px;
                        color:white;
                        padding-bottom:30px;
                        border:3px solid red;}
            #content{
                        width: 970px;
                        height:925px;
                        padding:10px;
                        margin: auto; /* membuat posisi di tengah */
                        border:2px solid red;
                        background-color:gray;
                        color:black;
                        mardin-bottom:100px;}
            .cities{
                        background-color:brown;
                        color: white;
                        margin: 2px 2px 2px 2px;
                        padding: 30px;
                        height:90px;
                        border:2px solid lavender;
                        border-radius:6px;}
            h1.atas{color:brown;}
            hr.atas{
                width:80%;
            }
            h2.judul{
                text-align:center;
            }
            hr{
                border:0;
            }
            nav {
                        border-top: 1px solid white;
                        border-bottom: 1px solid white;
                        padding: 1em;
                        background-color: lime;
                        text-align: right;
                        width:260px;
                        margin-left:950px;}
            a {
                        color: white;
                        padding: 1em;
                        text-decoration: none;}
            a:hover:not(.active){
                        background-color: gray;
                        padding: 1em;}
            .active {
                        background-color: firebrick;
                        padding:1em;}
            table#to1 td{
                        width:90px;
                        height:20px;}
            #atas{
                        width:1000px;
                        margin-left:190px;}   
                    #content_menu{
                                background: #cccccc;
                                border:1px solid #333;
                                line-height:16px;
                                padding:5px;
                                margin-bottom:10px;
                                height:130px;
                                width:20 px;
                                border-radius:2px;}
                    #menu{
                                float:right;}
                    .navigasi1{
                                height:15px;
                                text-align:center;
                                width: 150px;   
                                margin-top: 2px;
                                padding: 10px;
                                background: lime;
                                border-radius:4px;
                                }
                    .navigasi2{
                                height:15px;
                                width:150px;   
                                margin-top:0px;
                                padding: 10px;
                                background:lime;
                                border-radius:4px;
                                text-align:center;}
                    .navigasi3{
                                height:15px;
                                width: 150px;   
                                margin-top:0px;
                                padding:10px;
                                background:lime;
                                border-radius:4px;
                                text-align:center;}
                    .navigasi4{
                                height:15px;
                                width: 150px;   
                                margin-top:0px;
                                padding:10px;
                                background:lime;
                                border-radius:4px;
                                text-align:center;}
                    .navigasi5{
                                height:15px;
                                width: 150px;   
                                margin-top:0px;
                                padding:10px;
                                background:lime;
                                border-radius:4px;
                                text-align:center;}
                    #menus{
                                float:left;}
                    .kiri {
                                height:15px;
                                text-align:center;
                                width:150px;   
                                margin-top: 2px;
                                padding: 10px;
                                background: lime;
                                border-radius:4px;}
                    .content_menus{
                                background: #cccccc;
                                padding:10px;
                                height:867px;
                                width:250 px;
                                border-radius:4px;
                                margin-right:175px;
                                margin-left:175px;}
                    img.one{
                        height:130px;
                        width:155px;
                    }
                    img.two{
                        height:130px;
                        width:155px;
                    }
                    img.three{
                        width:200px ;
                        height:210px;
                    }
                    img.five{
                        width:150px ;
                        height:130px;
                    }
                    img.six{
                        width:155px ;
                        height:130px;
                    }
                    img.seven{
                        width:155px ;
                        height:130px;
                    }
                    img.eight{
                        width:155px ;
                        height:130px;
                    }
                    img.nine{
                        width:155px ;
                        height:130px;
                    }
                    img.ten{
                        width:155px ;
                        height:130px;
                    }
                    img.eleven{
                        width:155px ;
                        height:130px;
                    }
                    img.twelve{
                        width:155px ;
                        height:130px;
                    }
                    a.footer{
                        color:red;
                       
                    }
                    span{
                        color:red;
                    }
                    #isi{
                                text-align:center;
                                width:600px;
                                height:15px;
                                margin-right:20px;
                                margin-left:175px;
                                margin-top:3px;
                                margin-bottom:3px;
                                padding:10px;
                                background:lime;
                                border-radius:4px;}
                    p{
                                text-align:justify;
                                font-family:Calisto MT;
                    }
                    p.footer{
                                text-align:center;
                    }
                    ol{
                                text-align:left;
                                font-family:Calisto MT;
               
                    }
                    a{text-decoration: none;}
                    #footer {
                                color:white;
                                width:950px;
                                padding:10px;
                                border:1px solid #000000;
                                background-color:black;
                                border-radius:6px;

3.cara membuat sebuah judul menggunakan h1

4.membuat warna berbeda pada setiap judul.
5.pemberian warna link yang berbeda.

6.navigasi ekternal dan rata kanan

css


7.elemen header dan footer memiliki background yang sama.


8.membuat a hover memiliki font size lebih besar.
html

css.


terima kasih

Komentar

Posting Komentar

Postingan populer dari blog ini

TUGAS 7 Javascript & DHTML

Gambar
Buatlah sebuah halaman web dengan ketentuan sebagai berikut: Menampilkan alert "Selamat Datang" ketika halaman pertama kali dibuka terdapat dua buah input text dimana user bisa memasukkan 2 buah angka, dan sebuah tombol. Jika tombol ini ditekan, hasil perkalian 2 buah angka ini akan ditampilkan di sebelah tombol. terdapat dua buah input text dimana user bisa memasukkan nama depan dan nama belakangnya, dan sebuah tombol. Jika tombol ini ditekan, hasil penggabungan 2 buah nama ini akan ditampilkan di sebelah tombol. terdapat dua buah input text dimana user bisa memasukkan  2 buah angka yang nilai awal keduanya 0. Jika nilai input text ini berubah, akan ditampilkan sesuatu sesuai dengan nilai kedua input text tersebut. Jika input pertama lebih besar dari input kedua, akan ditampilkan "A menang". Jika input pertama lebih kecil dari input kedua, akan ditampilkan "B menang". Jika input pertama sama dengan input kedua, akan ditampilkan "Seri...
Baca selengkapnya

Pengenalan apa itu website statis

Gambar
Website statis  yaitu website yang mana pengguna tidak bisa mengubah konten dari web tersebut secara langsung menggunakan browser. Interaksi yang terjadi antara pengguna dan server hanyalah seputar pemrosesan link saja.  Tugas 2 Pemrograman Web Buat background dengan warna tertentu dengan nama (i.e: red, green) Buat sebuah judul tulisan dengan warna tertentu dengan cara selain dengan nama (gunakan HEX) Judul dibikin rapat tengah. Buat tulisan minimal 2 paragraf dengan font tertentu tentang tempat makan favorit Anda di Palembang dan sekitarnya. Dalam tulisan tersebut, huruf pertama setiap paragraf dibikin dengan huruf kapital dan font berukuran lebih besar. Gunakan ke-10 element berikut di dalam tulisan Anda: <b> Defines bold text <em> Defines emphasized text <i> Defines italic text <small> Defines smaller text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <in...
Baca selengkapnya

Tugas 9 Pemrograman Web

Buatlah sebuah halaman web dengan AJAX pada hosting yang telah Anda miliki dengan ketentuan sebagai berikut: memiliki sebuah tombol yang jika di-klik akan mengambil judul pada tautan http://api.babyhanana.com/index.php/home/judul dan menampilkannya pada web Anda. memiliki sebuah tombol yang jika di-klik akan mengambil url gambar pada tautan  http://api.babyhanana.com/index.php/home/gambar dan menampilkan gambarnya pada web Anda memiliki sebuah tombol yang jika di-klik akan mengambil daftar kategori pada tautan http://api.babyhanana.com/index.php/home/kategori dan menampilkan setiap kategori tersebut pada web Anda dengan menggunakan elemen <li> memiliki sebuah tombol yang jika di-klik akan mengambil daftar kategori dalam format JSON pada tautan http://api.babyhanana.com/index.php/home/kategori_json dan menampilkan setiap kategori tersebut pada web Anda dengan menggunakan elemen <li> (gunakan for) memiliki sebuah tombol yang jika di-kl...
Baca selengkapnya