RSS

tugas prktikum.html modul 4

 <DOCTYPE html>
<html lang="en">

<head>
    <title>tugas rumahku</title>
    <link rel="stylesheet" href="tuprak.css" type="text/css" />
</head>

<body>
    <header>
        <kepala>
        <img src="gambar/embarrassed.png" />
      
        <span id="kata">
            <font color="purple"><h1>Oret-oretanku</h1><font>
        </span>
        </kepala>
  
    </header>
  
    <nav>
        <span id="search">
        search
        </span>
      
        <span id="kotak">
        <input type="text" />
        </span>
    <div id="kanan">
    <a href="#"><span>Home</span></a>
    <a href="#"><span>About me</span></a>  
    <a href="#"><span>Note</span></a>
    <a href="#"><span>Friend</span></a>
    </div>
    </nav>
  
    <section>
        <article>
        </article>
      
        <aside>
            <div id="satu">
            <h2>Cara Dia Memandang Cinta</h2>
            <p>
            "Katanya sih cinta, tapi sikapnya kok, tak berbicara begitu? Jangan terlalu cepat mengambil kesimpulan....
            Pertama, Anda perlu tahu dulu bahwa konsep cinta antara lelaki dan perempuan pada dasarnya memang berbeda....
            Salah satunya yang menarik adalah bagaimana kedua mahluk ini memandang cinta. Memang, membahas dan mengartikan cinta sendiri bukanlah perkara yang mudah...
            Secara gramatikal, cinta bisa dikatakan sebagai sebuah perasaan yang sangat mendalam, mengandung gejolak emosi positif dan bersifat subyektif.Namun, penelitian yang bisa menjelaskan secara gamblang tentang cinta sampai sekarang belum ada....."
            Menurut Natalie, cinta adalah sebuah perasaan yang universal sehingga akan selalu ada sampai kapan pun manusia itu ada.
            Sejak kecil kita, manusia, juga sudah diajarkan untuk mengenal cinta, walapun penerapannya berbeda setelah kita menginjak dewasa
            Itulah sebabnya, mengapa pengertian cinta antara lelaki dan perempuan, pada akhirnya juga berubah dan berbeda. Nah, seperti apakah perbedaan cinta di mata lelaki dan perempuan?.
            </div>
            <div id="dua">
                <span>Note : </span>
                <div id="note">
                <a href="#"><li>Alphabet Menuju Sukses</li></a>
                <a href="#"><li>Cara Dia Memandang Cinta</li></a>
                <a href="#"><li>Karena Cinta Tak Slalu Berwujud Bunga</li></a>
                <a href="#"><li>Mencintai adalah Keputusan</li></a>
                </div>
            </div>
        </aside>
      
    </section>
  
    <footer>
    <span id="bawah">
    &copy
    <a href="http://www.facebook.com/AnggaConello">Angga Conello</a>
    </span>
    <span id="tengah">Home | About me | Note | Friend</span>
    </footer>
</body>
</html>



tugas prktikum.css

body {
    width: 900px;
    border: 2px solid blue
    }
   
    header, nav, section, footer {
    display: block;
    }
   
    header {
    height: 100px;
    border: none;
    background-color: orange;
    }
   
        kepala {
            position: relative;
            left: 20px;
        }
       
        header #kata{
            float: left;
            margin: 10px;
        }
   
    nav {
    height: 40px;
    background-color: pink;
    }
   
        nav #search{
            float : left;
            margin: 10px;
        }
       
        nav #kotak{
            position: relative;
            top: 10px;
            width: auto;
            height: auto;
            border: 1px solid;
            float: left;
        }
       
        nav #kanan{
            position: relative;
            top: 5px;
            width: 400px;
            height: 30px;
            float: right;
        }
       
        #kanan span{
            position: relative;
            padding:3px 10px 3px 10px;
            margin:5px;
            top:5px;
        }
       
    section {
    height: 480px;
    }
   
        article {
            float: left;
            margin: 10px;
            width: 185px;
            height:460px;
            background-image: url(gambar/24795.gif);
        }
   
        aside {
            float: left;
            width: 585px;
            height: 450px;
        }
       
        aside #satu {
            border: 0px solid pink;
            height:70%;
        }
       
        aside #dua {
            border: 1px solid #f776bc;
            height:30%;
            background-color:pink;
            margin: 5px;
        }
       
        #note {
            margin: 10px;
        }
   
    footer {
    height: 40px;
    border: none;
    background-color: #f776bc;
    }
   
    footer #bawah {
        position: relatif;
        float:right;
        margin: 10px;
    }
   
    footer #tengah {
        position:relative;
        left:300px;
    }


  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

0 komentar:

Posting Komentar