SchoolBlog: Pertemuan kesepuluh

Assalamualikum temen temen
Di postingan kali ini saya akan membahas tentang CSS pada tabel. Tanpa basa basi lagi langsung aja temen temen lihat di bawah ini.

Ini kodingan Emb Image CSS

  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Css pada img</title>
    <style type="text/css">
      img.aku{
        margin-top  : 10px;
        float       : left;
        clear       : both;
        width       : 200px;
        height      : 200px;
      }
      img.monyet{
        margin-top  : 5px;
        float       : right;
        clear       : both;
        width       : 200px;
        height      : 200px;
        border      : solid;
        border-color:
      }
      img.donut{
        margin-top  : 10px;
        float       : right;
        clear       : both;
        width       : 200px;
        height      : 200px;
      }
    </style>
  </head>
  <body>
    <h1>
Contoh embedded css pada gambar</h1>
<br></br>
    <img class="aku" src="pic/gambarku.jpg" alt=""><br></br>
    <img class="monyet" src="pic/monkey.jpeg" alt=""><br></br>
    <img class="donut" src="pic/donat.jpeg" alt="">
  </body>
</html>

ini hasilnya

Ini kodingan Ext Image Css
ini htmlnya

img#hati{
  margin-top: 10px;
  float: left;
  clear: both;
}
img#acak{
  margin-top: 5px;
  float: right;
  clear: both;
  border: dotted;
  border-color: salmon;
}
img#sultan{
  margin-top: 10px;
  float: right;
  clear: both;
}

ini hasilnya

Ini kodingan Css inline

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI Rpl3 Css BgImage</title>
  </head>
  <body style="background-image: url(pic/fire.jpeg)">
    <h1 style="color:gold;">
hello world!</h1>
<p align="center" style="color:green; font-family:Impact; font-size:24px;
    background-color:Yellow;">
Hallo dunia, ini adalah contoh penggunaan inline!</p>
</body>
</html>

ini hasilnya

Ini kodingan CSS Emb Image

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Css ExtImg</title>
    <style type="text/css">
      #penting{
        font-family:impact;
        font-size:30pt;
        color:bisque;
        text-shadow:2 2 2 red;
        background-image:url(pic/fire.jpeg);
        height:600px;
        width:800px;
      }
    </style>
  </head>
  <body>
    <div id="penting">
      sebenernya, background gambar ini width dan heightnya 300 dam 200 px. tapi
      karena pada css tertulis 800 dan 600 px, maka terjadilah tampilan seperti ini.
    </div>
</body>
</html>

ini hasilnya

ini kodingan penempatan gambar

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Css Placement</title>
    <style type="text/css">
      #bariskepala{
        background-image:url(pic/fire.jpeg);
        background-repeat:repeat-x;
        background-position:left top;
        padding-top:68px;
        margin-bottom:50px;
        color:green;
      }
      #barisduakepala{
        background-image:url(pic/abstrak.jpg);
        background-repeat:no-repeat;
        background-position:right top;
        padding-top:68px;
      }
    </style>
  </head>
  <body>
    <div id="bariskepala">
Sekarang css banyak dilibatkan dalam dokumen web kegunaanya
      adalah untuk mengformat dokumen. sebagai contoh, warna latarbelakang bisa diatur
      melalui css
    </div>
<div id="barisduakepala">
Namun tentu saja kegunaan css jauh lebih banyak dari pada
      hamya dilibatkan dalam dokumen web.kegunaanya adalah untuk mengormat dokumen.
    </div>
</body>
</html>

ini hasilnya

Ini kodingan CSS Emb video

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 testing video</title>
  </head>
  <body>
    <h1 style="color:orangered; text-align:center; font-family:consolas;">
Ini video
    favorit ku</h1>
<video controls="controls" style="display:block; margin:0 auto; width:400px;
    height:500px;">
      <source src="vid/selena gomes.mp4" type="video/mp4">
      your browser does not support the video tag.
    </video>
  </body>
</html>

ini hasilnya

Ini kodingan CSS Emb Video Youtube

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 testing YT</title>
    <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>
  </head>
  <body>
    <div class="videowrapper">
      <!-- copy & pasted from YouTube -->
      <iframe src="https://www.youtube.com/embed/watch?v=VTIDPC_yvX8" width="560" height="349"
      frameborder="0" allowfullscreen></iframe>
    </div>
</body>
</html>

ini hasilnya

Ini kodingan CSS Emb table

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 border collapse</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>Itilia</td>
        <td>Cokil</td>
      </tr>
<tr>
        <td>Vagipa</td>
        <td>Loli</td>
      </tr>
<tr>
        <td>Mayang</td>
        <td>Soro</td>
      </tr>
</table>
</body>
</html>

ini hasilnya

Ini kodingan CSS Ext table1
ini kodingan htmlnya

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 table with css</title>
    <link href="ExtTable1.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <table>
<tr>
        <th>Nama Depan</th>
        <th>Nama Belakang</th>
      </tr>
<tr>
        <td>Itilia</td>
        <td>Cokil</td>
      </tr>
<tr>
        <td>Vagipa</td>
        <td>Loli</td>
      </tr>
<tr>
        <td>Mayang</td>
        <td>Soro</td>
      </tr>
</table>
</body>
</html>

ini kodingan cssnya

table,th{
  border: 2px solid Orchid;
  font-family: impact;
  color: violet;
}
td{
  border: 1px solid hotpink;
  font-family: arial narrow;
  color: Orchid;
}

ini hasilnya

Ini kodingan CSS ext table2
ini kodingan html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 table kedua</title>
    <link href="ExtTable2.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <table>
<tr>
        <th>Nama Depan</th>
        <th>Nama</th>
        <th>Alamat</th>
      </tr>
<tr>
        <td>Itilia</td>
        <td>Cokil</td>
        <td>Jl. Simpang Mencester No.32</td>
      </tr>
<tr>
        <td>Vagipa</td>
        <td>Loli</td>
        <td>Jl. Dimana Hatiku No.372</td>
      </tr>
<tr>
        <td>Mayang</td>
        <td>Soro</td>
        <td>Jl. Senang Sekali No.0</td>
      </tr>
</table>
</body>
</html>

ini kodingan 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;
}

ini hasilnya

Ini kodingan CSS Ext table3

ini kodingan htmlnya

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Table ketiga</title>
    <link href="ExtTable3.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <table>
<tr>
        <th>Nama Depan</th>
        <th>Nama</th>
        <th>Negara</th>
      </tr>
<tr>
        <td>Itilia</td>
        <td>Cokil</td>
        <td>Italia</td>
      </tr>
<tr>
        <td>Vagipa</td>
        <td>Loli</td>
        <td>Francis</td>
      </tr>
<tr>
        <td>Mayang</td>
        <td>Soro</td>
        <td>Senegal</td>
      </tr>
</table>
</body>
</html>

ini kodingan 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;
}

ini hasilnya

Ini kodingan terakhir sekaligus tugas di pertemuan kali ini

ini kodingan htmlnya

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 tugas akhir</title>
    <link href="TugasPertemuan10.css" rel="stylesheet" href="text/css">
  </head>
  <body bgcolor="red">
    <table>
<tr>
        <th colspan="2">Pendaftaran Acara PORAK SMAN 1004 Bandung</th>
        <th colspan="2"><img src="pic/kalong.gif" alt="" width="32px" height="32px" style="float:center;">
        </th>
      </tr>
<tr>
        <td id="a">No</td>
        <td id="a">Nama</td>
        <td id="a">Kelas</td>
        <td id="a">XI-MIPA</td>
      </tr>
<tr>
        <td id="b">1</td>
        <td id="c">M Jesus Sengoku</td>
        <td id="c" rowspan="6" colspan="2"><img src="pic/rich.png" width="450" height="250" alt=""></td>
      </tr>
<tr>
        <td id="b">2</td>
        <td id="c">Asep Van Kagomoto</td>
      </tr>
<tr>
        <td id="b">3</td>
        <td id="c">Aisyah Kim</td>
      </tr>
<tr>
        <td id="b">4</td>
        <td id="c">Joe Utum</td>
      </tr>
<tr>
        <td id="b">5</td>
        <td id="c">Mikel Bin Abu Sufyan</td>
      </tr>
<tr>
        <td id="b">6</td>
        <td id="c">Yosep Bakery</td>
      </tr>
</table>
</body>
</html>

ini kodingan cssnya

table,th,td{
  border-top: 2px solid salmon;
  border-right: 2px groove hotpink;
  border-left: 2px dashed silver;
  border-bottom: 2px dotted gold;
}
table{
  border: 2px dashed skyblue;
}
th{
  height: 50px;
  background-color: MediumPurple;
  color: silver;
  font-family: cursive;
}
td,a{
  background-color: MediumPurple;
  color: silver;
  font-style: normal;
}
td,b{
  background-color: hotpink;
  text-align: center;
}
td,c{
  background-color: hotpink;
}

ini hasilnya

NOTE: jangan lupa untuk mensatu folder kan dokumen css dan htmlnya buat yang external, dan juga file gambar nyaa.

Terima kasih sudah melihat postingan saya kali ini, semoga bermanfaat.

Wassalamualiakum Wr. Wb.

SchoolBlog

inlinecss

Minggu, 25 Agustus 2019

Pertemuan kesepuluh

Tidak ada komentar:

Posting Komentar