Tutorial CSS menyajikan CSS untuk memformat tampilan multimedia dan table

Posted by on
Assalamualaikum Semua



      Hallo semua selamat datang kembali. Saya Muhammad Aslam atau panggil saja Mas Lam akan berbagi pengetahuan tentang cara menyajikan CSS untuk memformat tampilan multimedia dan table kalau begitu tanpa banyak basa basi lagi Yu Urang belajar CSS

       mengedit format gambar
untuk mengedit gambar harus memberi id atau class pada gambar tersebut supaya dapat di edit menggunakan css contohnya:
menggunakan cara embedded
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <style>
        img.mouse{
            margin-top: 10px;
            float: left;
            clear: both;
            width: 200px;
            height: 200px;
        }
        img.cat{
            margin-top: 5px;
            float: right;
            clear: both;
            width: 200px;
            height: 200px;
            border: solid;
            border-color: pink;
        }
        img.koa{
            margin-top: 10px;
            float: right;
            clear: both;
            width: 200px;
            height: 200px;
        }
        </style>
    </head>
    <body>
        <h1>Contoh embedded CSS Pada gambar</h1>
        <img class="mouse" src="C:\Users\lenovo\Desktop\Belajar Web\NI gambar\tikus.jpg">
        <img class="cat" src="C:\Users\lenovo\Desktop\Belajar Web\NI gambar\kucing.jpg">
        <img class="koa" src="C:\Users\lenovo\Desktop\Belajar Web\NI gambar\koala.jpg">
    </body>
</html>

Hasil ssnya


contoh 2 menggunakan cara external

codingan html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="2ExtImage.css" type="text/css">
    </head>
    <body>
        <h1>Contoh CSS pada gambar secara external</h1>
        <img src="C:\Users\lenovo\Desktop\Belajar Web\NI gambar\pikachu.jpg" id="pikachu">
        <img src="C:\Users\lenovo\Desktop\Belajar Web\NI gambar\kucing.jpg" id="ucing">
        <img src="C:\Users\lenovo\Desktop\Belajar Web\NI gambar\anjing.jpg" id="guguk">
    </body>
</html>
codingan css

img#pikachu{
    margin-top: 10px;
    float: left;
    clear: both;
}
img#ucing{
    margin-top: 5px;
    float: right;
    clear: both;
    border: dotted;
    border-color: salmon;
}
img#guguk{
    margin-top: 10px;
    float: right;
    clear: both;
}

hasil ssnya



cara menggunakan background pada css
caranya adalah dengan mengunakan background-image: url(tempat file backgroun.jpg). url disini sama fungsinya dengan src, contoh penggunaannya:
cara inline css
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
    </head>
    <body style="background-image: url(background.jpg);">
        <h1>Hello World!</h1>
        <p align="center" style="color: green; font-family:impact;font-size:24px; background-color:Yellow;">
        Hello World, ini adalah contoh penggunaan inline!
        </p>
    </body>
</html>

hasil ssnya

contoh 2 menggunakan cara embedded:

<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <style type="text/css">
        #utama{
            font-family: impact;
            font-size: 30pt;
            color: bisque;
            text-shadow: 2 2 2 red;
            background-image: url(background.jpg);
            height: 600px;
            width: 800px;
        }
        </style>
    </head>
    <body>
        <div id="utama">
            sebenarnya, background gambar ini widht dan height nya 1920px X 1080px tapi karena paca css tertulis 800px dan 600 px, maka terjadilah tampilan seperti ini
        </div>
    </body>
</html>

hasil ssnya


cara menggandakan atau menonaktifkan gambar backgroun berulang
cara nya adalah dengan menggunakan background-repeat: jiga ingin berulang maka menggunakan repeat-x jika tidak maka menggunakan no-repeat contohnya:

<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <style type="text/css">
        #headline1{
            background-image: url(pikachu.jpg);
            background-repeat: repeat-x;
            background-position: left top;
            padding-top: 40px;
            margin-bottom: 50px;
        }
        #headline2{
            background-image: url(pixel-goust-2.gif);
            background-repeat: no-repeat;
            background-position: right top;
            padding-top: 60px;
        }
        </style>
    </head>
    <body>
        <div id="headline1">
            CSS (versi sekarang adalah CSS3) banyak dilibatkan dalam dokumen web. kegunaannya adlah untuk memformat dokumen. sebagai contoh, warna texk atau bahkan warna latar belakang bisa diatur melaui CSS
        </div>
        <div id="headline2">
            Namun, tentusaja kegunaan CSS jauh lebih banyak dari pada hanya dilibatkan dalam dokumen web. kegunaan nya adalah untuk memformat dokumen. sebagai contoh warna teks atau bahkan warna latarbelakang bisa diatur melalui CSS
        </div>
    </body>
</html>

hasil ss nya:


memasukan format video
caranya sama dengan yang di html namun bedanya mengedit nya menggunakan style css contohnya:

memasukan video yang ada dalam komputer
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
    </head>
    <body>
        <h1 style="color: orangered; text-align:center; font-family:Consolas">ini videoku</h1>
        <video controls="controls" style="display: block; margin: 0 auto;width: 400px; height: 400px;">
        <source src="C:\Users\lenovo\Desktop\Belajar Web\NI vidio\Nisha Labyrinth.mp4" type="video/mp4">
        Your browser does not support the cideo tag.
        </video>
    </body>
</html>

hasilnya


contoh 2 memasukan video dari youtube:

<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
    </head>
    <style type="text/css">
    .videowrapper{
        position: relative;
        padding-bottom: 56.25%; /*16:9*/
        padding-top: 25px;
        height: 0 ;
    }
    .videowrapper iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    </style>
    <body>
        <div class="videowrapper">
            <iframe src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" width="560" height="349" allowfullscreen></iframe>
        </div>
    </body>
</html>

hasilnya



menggunakan css pada table
 contoh 1
code htmlnya
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <style>
        table{
            border-collapse: collapse;
        }
        table, td, th{
            border: 1px solid lawngreen;
        }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Nama Depan</th>
                <th>Nama</th>
            </tr>
            <tr>
                <td>Adelin</td>
                <td>Larasati</td>
            </tr>
            <tr>
                <td>Novero</td>
                <td>Davandra</td>
            </tr>
            <tr>
                <td>Adika</td>
                <td>Dayandra</td>
            </tr>
        </table>
    </body>
</html>

hasilnya

contoh 2
code htmlnya
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="9cssOnTable1.css" type="text/css">
    </head>
    <body>
        <table>
            <tr>
                <th>Nama Depan</th>
                <th>Nama Belakang</th>
            </tr>
            <tr>
                <td>Thom</td>
                <td>Yorke</td>
            </tr>
            <tr>
                <td>Vanessa</td>
                <td>Carlton</td>
            </tr>
            <tr>
                <td>Jonny</td>
                <td>Greenwood</td>
            </tr>
        </table>
    </body>
</html>
code cssnya
table, th{
    border: 2px solid orchid;
    font-family: Impact;
    color: orchid;

}

td{
    border: 1px solid hotpink;
    font-family:'Arial Narrow';
    color: orchid;
}

hasil ssnya


contoh 3
code htmlnya
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="10cssOnTable2.css" type="text/css">
    </head>
    <body>
        <table>
            <tr>
                <th>Nama Depan</th>
                <th>Nama Belakang</th>
                <th>Alamat</th>
            </tr>
            <tr>
                <td>Karina</td>
                <td>Nurul Islami</td>
                <td>Jl. Rumahku Blok R 45</td>
            </tr>
            <tr>
                <td>Salman</td>
                <td>Ravi</td>
                <td>Jl. Disini Aja Blok R 45</td>
            </tr>
            <tr>
                <td>Muhamad Dandi</td>
                <td>Ramdani</td>
                <td>Jl. Bumi Abdi Blok S 6</td>
            </tr>
        </table>
    </body>
</html>
code cssnya
table, th, td{
    border-top: 2px solid red;
    border-right: 2px groove yellow;
    border-left: 2px dashed green;
    border-bottom: 2px dotted pink;
}
table{
    width: 100%;
}
th{
    height: 50px;
    background-color: mediumpurple;
    color: mintcream;
    font-family: consolas;
}


hasil ssnya



contoh 4
codingan htmlnya
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="11cssOnTable3.css" type="text/css">
    </head>
    <body>
        <table>
            <tr>
                <th>First Name</th>
                <th>Family Name</th>
                <th>Country</th>
            </tr>
            <tr>
                <td>Ariana</td>
                <td>Grande</td>
                <td>America</td>
            </tr>
            <tr>
                <td>Taylor</td>
                <td>Swift</td>
                <td>America</td>
            </tr>
            <tr>
                <td>Lorde</td>
                <td>Ajah</td>
                <td>New Zealand</td>
            </tr>
        </table>
    </body>
</html>
codingan cssnya
table, td, th{
    border: 1px solid salmon
}
td{
    background-color: lawngreen;
    color: green;
    text-align: right;
    height: 30px;
    vertical-align:middle;
    padding-right: 10px;
}
th{
    background-color: red;
    color: mintcream;
    text-align: right;
    height: 50px;
    vertical-align: bottom;
    padding: 15px;
}

Hasil codingannya


Tugas
codingan htmlnya
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="12Tugas.css" type="text/css">
    </head>
    <body>
        <table>
            <tr>
                <th colspan="2"><u>Pendaftaran Acara Porak SMKN 4 Bandung</u></th>
                <th colspan="2"><img id="basketball" src="C:\Users\lenovo\Desktop\Belajar Web\NI gambar\basketball.png" alt=""></th>
            </tr>
            <tr>
                <td>No</td>
                <td>Nama</td>
                <td>Kelas</td>
                <td>X-TKJ</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Alianso</td>
                <td rowspan="7" colspan="2"><img id="basketball2" src="C:\Users\lenovo\Desktop\Belajar Web\NI gambar\basketball2.jpg" alt=""></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Al Ghazali</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Bento</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Charli</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Dube Herlimo</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Falseto</td>
            </tr>
            <tr>
                <td>7</td>
                <td>Ghafani</td>
            </tr>
        </table>
    </body>
</html>
codingan cssnya
table, td, th{
    border: 1px solid salmon
}
td{
    background-color: lawngreen;
    color: green;
    text-align: right;
    height: 30px;
    vertical-align:middle;
    padding-right: 10px;
}
th{
    background-color: red;
    color: mintcream;
    text-align: right;
    height: 50px;
    vertical-align: bottom;
    padding: 15px;
}
img#basketball{
    width: 50px;
    height: 50px;
}
img#basketball2{
    width: 250px;
    height: 200px;
}

hasil ssnya


Comments

Post a Comment