contoh program html | css pada link,table, list

SOBAT WINDOWS

17 Mar, 2021

PROGRAM HTML IMPLEMTASI CSS PADA LINK,TABEL DAN LIST

PROGRAM LINK :

<html>
    <head>
        <title>
            membuat link
        </title>
        <style type="text/css">
        a{
            padding: 5px;
            width: 120px;
            text-align: center;
            display: block;
            border:solid 1px blue;
            background-color: skyblue;
            text-decoration:none;
            color:black;
            border-radius: 3px;
            font-family: arial;
            font-weight: bolder;
        }
            </style> 
    </head>
    <body>
        <a href="#">Beranda</a>
    </body>
</html>

output program :

PROGRAM TABEL :

PROGRAM HTML :

<html>
    <head>
        <title>
            tabel css
        </title>
        <link rel="stylesheet" type="text/css" href="tabel.css"/>
    </head>
    <body>
        <h3>
            Daftar pemain sepakbola
        </h3>
        <table>
            <th>no</th>
            <th>nama lengkap</th>
            <th>no. penggung</th>
            <th>posisi</th>
            <tr class ="ganjil">
                <td>
                    l
                </td>
                <td>El-jumhrawy</td>
                <td>92</td>
                <td>penyerang</td>
            </tr>
            <tr class="genap">
                <td>2</td>
                <td>riocardo kaka</td>
                <td>22</td>
                <td>gelandang</td>
            </tr>
            <tr class="ganjil">
                <td>3</td>
                <td>anrio poli</td>
                <td>14</td>
                <td>gelandang</td>
            </tr>
            <tr class="genap">
                <td>4</td>
                <td>alesandrio nesta</td>
                <td>13</td>
                <td>belakang</td>
            </tr>
        </table>
    </body>
</html>

PROGRAM CSS :

    h3{
    font-family: arial;}
    table{
        width: 500px;
        border-collapse: collapse;
    }
    th
    {
        background-color: skyblue;
        border-radius: 10px 10px 0px 0px;
        padding: 5px 10px;
        border: solid 1px white;
        font-family:arial;
    }
    tr.ganjil 
    {
        background-color: #cccccc;
    }
    tr.genap
    {
        background-color: whitesmoke;
    }
    tr:hover
    {
        background-color: skyblue;
    }
    td
    {
        text-align: center;
        border: solid 1px white;
        font-family: arial;
    }

OUTPUT PROGRAM :

PROGRAM LIST :

PROGRAM HTML :

<html>
    <head>
        <title> css dropdown menu sederhana</title>
        <link rel="stylesheet" type="text/css" href="list.css"/>
    </head>
    <body>
        <ul id="nav">
            <li><a href="#">Beranda</a></li>
            <li><a href="#">Praktikum</a>
            <ul>
                <li><a href="#">pemrograman web</a></li>
                <li><a href="#">Algoritma pemrograman</a></li>    
                <li><a href="#">pemrograman java</a></li>
                <li><a href="#">jaringan</a></li>
                <li><a href="#">sistem digital</a></li>
        </ul>
        </li>
        </ul>
    </body>
</html> 

PROGRAM CSS :

ul {
    list-style: none;
    margin: 0;
    padding: 0;}
ul#nav li
{
    background-color: whitesmoke;
float:left;
margin-left: 5px;
}
ul#nav li a
{
    padding: 5px;
    display: block;
    border: solid 1px #999;
    text-decoration: none;
    color: black;
    border-radius: 3px;
}
ul#nav li ul li
{
    float:none;
}
ul#nav li ul
{
    position: absolute;
    display:none;
}
ul#nav li:hover ul
{
    display: block;
}