Desain Web CSS

Posted in Label: | di 8:48 PM

Tugas Modul 4 Web . . .
Source Code :

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

<head>
    <title>Liverpool FC</title>
    <style type="text/css">
        body{
        float: center;
        margin :auto;
        width :1000px;}
           
        atas,header,perintah,username,pass,nav,
        section,footer,news,klasmen,artikel,search{
        display:block;
        border: 1px;}
       
        atas{}
       
        header {
        height: 40px;
        margin-top:10px;
        border: 1px;
        background-color:#e42217;}
       
        perintah{
        margin-top:-22px;
        margin-left:370px ;}
       
        username {
        margin-top:-9px;
        margin-left:595px ;}
       
        pass{
        margin-top:-23px;
        margin-left:760px ;}   
           
        gambar{}
       
        nav{
            height: 30px;
            border: 1px solid white;}
           
            ol {
            margin: 0;
            padding: 0;
            list-style:none}

            ol li {
            position:relative;
            float: left;
            width: 100px;}
           
            li ol {
            position: absolute;
            top: 30px;
            display: none;}
           
            ol li a {
            display: block;
            text-decoration: none;
            line-height: 20px;
            color: #000; /*** warna tulisan ***/
            padding: 5px;
            background: #faf8cc; /*** bgmenu ***/
            margin: 0 2px;}

            ol li a:hover { background: #ebdde2; } /*** bg cursor ***/
            li:hover ol, li.over ol { display: block; }
       
        section{
        height: 355px;
        margin-top: 30px;
        border: 1px solid black;
        background-image:url(Capture.PNG);}
   
        news{
        margin-top: 20px ;
        margin-left: 20px ;
        width: 250px;
        height: 280px;
        border: 0px dashed black;
        background-color : #e0ffff;}
       
        artikel {
        margin-top: -283px ;
        margin-left: 300px ;
        width: 500px;
        height: 280px;
        border: 0px dashed black;}
       
        search {
        margin-top:-250px;
        margin-left:820px ;}
       
        klasmen{
        margin-top:10px;
        margin-left:820px ;}
       
        footer {
        height: 20px;
        border: 1px solid black;
        background-color: #e42217;
        }

</style>
</head>
<body background="ground2.jpg">
    <header>
        <atas>.</atas>
        <username>
            <input type="text" name="email" value="Username"></username>
        <pass>
            <input type="text" name="email" value="Password">
            <input type="button" value=">>"></pass>
        <perintah>Masukan ID dan Pasword anda!</perintah></header>
   
    <gambar><img src = "logo.jpg" width=1000 height=150></gambar>
    <ol id="nav">
        <li><a href="">Home</a></li>
        <li><a href="">Berita</a>
            <ol>
            <li><a href="">Berita Terbaru</a></li>
            <li><a href="">Gosip Transfer</a></li>
            </ol></li>
        <li><a href="">Pertandingan</a>
            <ol>
            <li><a href="">Hasil dan Klasmen</a></li>
            <li><a href="">Pertandingan Yang Lalu</a></li>
            </ol> </li>
        <li><a href="">Team</a>
            <ol>
            <li><a href="">Player</a></li>
            <li><a href="">Staff</a></li>
            <li><a href="">Formasi</a></li>
            </ol></li>
        <li><a href="">History</a>
            <ol>
            <li><a href="">Juara</a></li>
            <li><a href="">Stadion</a></li>
            </ol></li>
    </ol></div>

    <section>  
        <news>
        <hr>
        <b>Berita Terbaru</b>
        <hr>
        <ul>
            <li><a href="">Kuyt perpanjang kontrak</a></li>
            <li><a href="">Dalgish : Liverpool on fire</a></li>
            <li><a href="">Sparta ditahan imbang liverpool</a></li>
            <li><a href="">Liverpool hempaskan Chelsea</a></li></ul><hr>
        <b>Terlaris Dibaca</b><hr>
        <ul>
            <li><a href="">Liverpool hempaskan Chelsea</a></li>
            <li><a href="">Carrol dan Suarez merapat di Anfield</a></li>
            <li><a href="">Torres : Selamat tinggal Liverpool</a></li></ul>
       
        </news>
        <artikel>
            <font size=5><center>Sparta Ditahan Imbang Liverpool</center></font>
            <center><img src = "gam.jpg" align=center></center><br>
            Sparta tidak mampu mengambil keuntungan bermain di hadapan
            pendukung sendiri setelah hanya bermain seri kontra Liverpool
            dengan skor kacamata 0-0, Jumat (18/2) WIB, dalam partai 32
            besar Liga Europa.<a href="">Selanjutnya<br></a></artikel>
        <search>
            <label><font size = "4"><b>Search</b></label></font>
            <input type="text" name="email">
        </search>
        <klasmen><font size = "4"><b>Klasmen</b></font><br><img src = "klasmen.jpg"
        height=180 width=150 align=center></klasmen>
    </section>
    <footer><center>
        | <a href="">Home</a>| <a href="">Berita</a> | <a href="">Pertandingan</a>
        | <a href="">Team</a> | <a href="">History</a> |</center></footer>

</body>
</html>


Print Screen :

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • RSS
Read Users' Comments (0)

HTML Lanjut

Posted in Label: | di 12:06 AM

Source Code File CSS :

#layout{
margin: auto;
width: auto;}

    #top {
    height : 100px;
    width: auto;
    background-color: #2554C7;}
   
        #facemu {
        height: 50px;
        width: 50px;
        margin-top: 8px;
        margin-left: 100px;}
   
        #email {
        height:100px;
        width:200px;
        margin-top:-30px;
        margin-left:700px ;}
       
        #password{
        height:0px;
        width:400px;
        margin-top:-100px;
        margin-left:950px ;}
   
    #middle {
    height:430px;
    width:1200px 10px;
    margin-top:100px;
    background-image:url(background.jpg);}
   
        #peta {
        float: left;
        width: 550px;
        height: 400px;
        margin-top:-80px;
        margin-LEFT:100px ;
        margin-right:100px ;}
       
        #pendaftaran {
        float: left;
        width: 400px;
        height: 350px;
        margin-top:-80px;}
       
            #title{
            height: 70px;}
           
            #question{
            width: 200px;
            height: 250px;}
           
            #answer{
            width: 310px;
            height: 200px;
            margin-top:-250px;
            margin-left:200px ;}
           
            #confirm {
            width: 400px;
            height: 100px;
            margin-left:-150px ;}
           
    #bottom {
    height: 20px;
    margin-top:5px ;
    background-color : #2554C7;}


Source Code File HTML :

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<head>
    <title>Anom Windiatmiko</title>
    <link rel="stylesheet" href="fb.css" type="text/css" />
</head>

<body>
    <div id="layout">
   
        <div id="top">
            <div id = "facemu"><img src = "facemu.jpg" width="120" height="40"></div>
            <div  id= "email">
                <form name= "login" method="post" action="">
                <label><font size = "4" color ="white">Email</label></font><br>
                <input type="text" name="email"><br>
                <input type="checkbox" name="email"><font size = "2" color ="white">Biarkan saya tetap masuk </input>
                </form>
            </div>
            <div id = "password" >
                <label><font size = "4" color ="white">Password</label></font><br>
                <input type="text" name="email">
                <input type="button" value="masuk"><br>
                <a href = ""><font size = "2" color ="white">Lupa kata sandi Anda ? </a></font>
            </div>
        </div>
       
        <div id="middle">
            <div id="peta"><img src = "indonesia.jpg" width="550" height="400"></div>
            <div id="pendaftaran">
            <div id="title">
                <font size = "5" color ="blue">Mendaftar<br>
                <font size = "4" color ="blue">Gratis, sampai kapanpun <br>
                <hr color=blue>
            </div>
           
            <div id="question">
                <font face = "times new roman" size = "4" color ="blue">
                <br>Nama Depan <br><br>
                Nama Belakang<br><br>
                Email Anda<br><br>
                Masukkan Ulang<br>Email<br><br>
                Email Anda<br><br>
                Saya Seorang<br><br>
                </font>
            </div>
           
            <div id="answer">
                <br><input type="text" name="email"><br><br>
                <input type="text" name="email"><br><br>
                <input type="text" name="email"><br><br>
                <input type="text" name="email"><br><br>
                <input type="text" name="email"><br><br>
                <input type="radio" name="email"><font size = "3" color ="blue">pria</input><br></font>
                <input type="radio" name="email"><font size = "3" color ="blue">wanita<br><br></font>
               
            <div id ="confirm" align= "center" ><br><a  href = ""><font size = "2" color ="blue">mengapa saya perlu mengisinya?</font></a><br>
                <BR><input type="button" value="DAFTAR" ><br>
                <hr color=blue>
                <strong><font size = "2" color ="blue">Buat halaman </font>
                <font size = "2" color ="black"> untuk selebritis, grup musik , atau bisnis</font></strong>
            </div>
            </div>
            </div>
        </div>
        <div id="bottom"><font size = "3" color ="white">
        Anom Windiatmiko</font></div>
        </div>
</body>
</html>


Print Screen :


  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • RSS
Read Users' Comments (0)
Posted in Label: | di 9:21 PM

Saat bermain dengan bahasa HTML, suatu saat kita dituntut untuk dapat membuat diagram dan tabel yang dimodifikasi padahal dalam kenyataannya tidak ada code HTML yang dapat membuat keinginan kita diatas. Disini kita dapat membuatnya dengan memanipulasinya.

1. Contoh Membuat Diagram Batang
    Source code :

   
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Tugas 1</title>
</head>

<body background=lfc2.jpg>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <hr align=center color=grey width="700">
    <table border=0 cellspacing=0 cellpadding=0 align=center>
    <tr>
        <th width="300"><font color=white>Perusahaan</font></th>
        <th width="300"><font color=white>Pendapatan</font></th>
    </tr>
    </table>
    <hr align=center color=grey width="700">
  
    <table border=0 cellspacing=3 cellpadding=5 align=center>
    <tr>
        <th width="200"></th>
        <td width ="200"><font color=white>Angin Reboot Ltd</font></td>
        <th width="20"></th>
        <th width="65"></th>
        <th width="20"></th>
        <th width="56" bgcolor=blue colspan=2 style="border-bottom:black solid;
        border-top:black solid; border-left:black solid; border-right:black solid;"></th>
        <th width="150" align=left><font color=white> +150%</font></th>
        <th width="50"></th>
    </tr>
  
    <tr>
        <th width="200"></th>
        <td width ="200"><font color=white>Command Promp, Inc</font></td>
        <th width="20"></th>
        <th width="65"></th>
        <th width="20"></th>
        <th width="56" bgcolor=green style="border-bottom:black solid; border-top:black solid;
        border-left:black solid; border-right:black solid;"></th>
        <th width="150" align=left><font color=white> +55%</font></th>
        <th width="50"></th>
    </tr>
  
    <tr>
        <th width="200"></th>
        <td width ="200"><font color=white>Hibernate Ltd</font></td>
        <th width="20"></th>
        <th width="65" align=right><font color=white> -23%</font></th>
        <th width="20" bgcolor=yellow style="border-bottom:black solid;
        border-top:black solid; border-left:black solid; border-right:black solid;"></th>
        <th width="56"></th>
        <th width="150"></th>
        <th width="50"></th>
    </tr>
  
    <tr>
        <th width="200"></th>
        <td width ="200"><font color=white>Shutdown Ltd</font></td>
        <th width="20" align=right><font color=white> -75%</font></th>
        <th width="65" bgcolor=red colspan=2 style="border-bottom:black solid;
        border-top:black solid; border-left:black solid; border-right:black solid;"></th>
        <th width="20"></th>
        <th width="56"></th>
        <th width="150"></th>
        <th width="50"></th>
    </tr>
    </table>
</body>
</html>

    Print Screen :
  

2. Contoh Membuat Tabel Modifikasi
    Source code :

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Tugas 2</title>
</head>
<body background=lfc.jpg><font color=white>
    <br>
    <table border=0>
    <tr>
        <td width=475 align=center><font size=4 color=white>PERBANDINGAN FITUR<br></font></td>
    </tr>
    </table>
   
    <table border=0 cellpadding=1 cellspacing=0>   
    <tr>
        <td width="30" align=center style="border-right:white solid; border-top:white solid;">NO</td>
        <td width="200" align=center style="border-right:white solid;border-top:white solid;">FITUR</td>
        <td width="100" align=center style="border-top:white solid;">ENTERPRISE</td>
        <td width="50" align=center style="border-left:white solid; border-top:white solid;">PRO</td>
        <td width="50" align=center style="border-top:white solid;">FREE</td>
    </tr>
   
    <tr>
        <td colspan=10 style="border-top:white solid;"> </td>
    </tr>
   
    <tr>
        <td align=center style="border-right:white solid;">1</td>
        <td style="border-right:white solid;">Garansi Seumur Hidup</td>
        <td align=center>X</td>       
        <td align=center style="border-left:white solid;">-</td>
        <td align=center>-</td>
    </tr>
   
    <tr>
        <td align=center style="border-right:white solid;">2</td>
        <td style="border-right:white solid;">Multiuser</td>
        <td align=center>X</td>
        <td align=center style="border-left:white solid;">-</td>
        <td align=center>-</td>
    </tr>
   
    <tr>
        <td align=center style="border-right:white solid;">3</td>
        <td style="border-right:white solid;">Update Otomatis</td>
        <td align=center>X</td>
        <td align=center style="border-left:white solid;">X</td>
        <td align=center>-</td>
    </tr>
   
    <tr>
        <td align=center style="border-right:white solid;">4</td>
        <td style="border-right:white solid;">Cetak Laporan</td>
        <td align=center>X</td>
        <td align=center style="border-left:white solid;">X</td>
        <td align=center>-</td>
    </tr>
   
    <tr>
        <td align=center style="border-right:white solid; border-bottom:white solid;">5</td>
        <td style="border-right:white solid; border-bottom:white solid;">Notifikasi Error</td>
        <td align=center style="border-bottom:white solid;">X</td>
        <td align=center style="border-left:white solid; border-bottom:white solid;">X</td>
        <td align=center style="border-bottom:white solid;">X</td>
    </tr>
   
    <tr>
        <td align=center style="border-right:white solid;">6</td>
        <td style="border-right:white solid;">Ubah Tema</td>
        <td align=center>X</td>
        <td align=center style="border-left:white solid;">X</td>
        <td align=center>X</td>
    </tr>
   
    <tr>
        <td align=center style="border-right:white solid; border-bottom:white solid;">7</td>
        <td style="border-right:white solid; border-bottom:white solid;">Try Icon</td>
        <td align=center style="border-bottom:white solid;">X</td>
        <td align=center style="border-left:white solid; border-bottom:white solid;">X</td>
        <td align=center style="border-bottom:white solid;">X</td>
    </tr>
    </table></font>
</body>
</html>


    Print Screen :
 
Nah itu tadi contoh membuat diagram dan tabel yang dimodifikasi dengan cara memanipulasi code. Semoga ilmunya bermanfaat..

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • RSS
Read Users' Comments (0)
Langganan: Postingan (Atom)