Penjelasan tenteng CSS

Pengertian CSS   
<link rel="stylesheet" href="css/style.css"> <style>….</style>
Cascading Style Sheet (CSS) adalah salah satu bahasa pemrograman web yang digunakan untuk mempercantik halaman web dan mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS dapat kita gunakan dalam mengendalikan ukuran gambar, warna teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS bisa juga diartikan sebagai bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Sejarah CSS
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk suatu hubungan layaknya hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
KELEBIHAN CSS
Adapun beberapa kelebihan CSS adalah sebagai berikut:

1. Memisahkan desain dengan konten halaman web.
2. Mengatur desain sefisien mungkin.
3. Jika kita ingin mengubah suatu tema halaman web, cukup modifikasi pada css saja
4. Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML.
5. Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML.
6. Lebih mudah didownload karena lebih ringan ukuran filenya.
7. Satu CSS dapat digunakan banyak halaman web.


Selector
Selector adalah elemen/tag HTML yang ingin diberi style. Sobat dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu menambahkan tSobat <>. Pada contoh kode CSS di atas, kita akan memberi style pada seluruh tag h1 yang terdapat dalam file HTML. Jika tag HTML yang ingin diberi style memiliki ID, Sobat dapat menuliskan nama ID tersebut dengan diawali Sobat kress (#).

#header
Dan jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan dengan Sobat titik (.) diikuti dengan nama class.

.artikel
Jika Sobat hanya menuliskan satu selector, seperti contoh kode CSS di atas, maka seluruh tag h1 yang terdapat dalam file HTML akan memiliki style yang sama. Bagaimana jika kita hanya ingin memberi style pada tag h1 yang hanya terdapat di dalam Class artikel. Maka penulisan selectornya seperti berikut :

.artikel h1
Kode tersebut akan memerintahkan pada browser untuk memberi style pada tag h1 yang hanya terdapat di dalam class artikel (atau - h1 yang merupakan child dari class artikel). Sobat-pun dapat memilih lebih dari satu tag untuk penghematan kode CSS. Misalnya ketika Sobat memiliki dua atau lebih tag dengan warna background yang sama, dari pada menuliskan kode seperti ini :

h1{ background-color: #666666; }
P { background-color: #666666; }
a { background-color: #666666; }

Sobat dapat menggabungkan selector dengan menambahkan tSobat koma pada nama tag yang ingin diberi style.

h1, p, a { background-color: #66666; }

Property dan Value
Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text, warna background, jarak antar elemen, garis pinggir dan lain sebagainya. Untuk memberikan nilai/value pada property kita gunakan tSobat titik dua ( : ). Setiap property diakhiri dengan titik koma (;),  jika Sobat tidak mengakhirinya maka browser tidak akan mengetahui maksud dari property tersebut. Property property pada CSS sangat mudah dimengerti karena lebih mirip bahasa kita sehari-hari. Misalnya untuk merubah warna text kita gunakan property color, untuk merubah warna background kita gunakan property background-color, untuk merubah ukuran huruf kita gunakan property font-size. Mudah dimengerti bukan?

.artikel h1 {
color : red;
background-color : blue;
font-size : 20px;
}

Read More

membuat input berita menggunakan CSS

index.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Admin</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
 <form action="proses.php" method="POST">
    <div class="container clearfix">
        <h1>SI Admin</h1>

         <div class="sidebar">
            <ul>
                <li><a href="index.php">Berita</a></li>
                <li><a href="pendaftaran.html">Pendaftaran</a></li>
                <li><a href="siswa.html">Data Siswa</a></li>
                <li><a href="guru.html">Data Guru</a></li>
                <li><a href="#" onclick="return confirm('anda yakin akan keluar?')">Logout</a></li>
            </ul>
        </div>

        <div class="content">
      
            <h1><b>FORM BERITA</b></h1>
        <input type="integer" name="id_berita" size="46" placeholder="id berita">
        <input type="text" Name="judul" size="46" placeholder="judul">
        <textarea type="text" Name="isi" size="46" placeholder="Isi Berita"></textarea>
        <input type="date" name="tanggal" size="46" placeholder="tahun-bulan-tanggal(2016-12-03)">
            <p><br>
      <br>
      <input value="Kirim" style="background-color: 4985D0; height: 50; width: 150;"type="submit">
      </p></td>
    </tr>
</body>
</html>


style.php

*{
    font-family: sans-serif;
    font-weight: 100;
}
.container {
    width: 960px;
    max-width: 100%;
    margin: 0 auto;
    background: #42775A;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0px 0px 5px black;
    color: #FFF;
}

.sidebar {
    width: 20%;
    float: left;
}

.sidebar ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.sidebar li a {
    display: inline-block;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
}

.sidebar li a:hover {
    background-color: #3B5949;
}

.sidebar li a.active{
    background-color: #3B5949;
}

a {
    text-decoration: none;
    color: #FFF;
}

.content {
    width: 80%;
    min-height: 500px;
    float: right;
    padding: 10px;
    box-sizing: border-box;
    background: #FFF;
    border-radius: 5px;
    color: #2c3e50;
   
}
.h1{
}

.clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}


body{
    margin: 0;
    background : #798E82;
}

/*tabel*/
table.data {
    width: 100%;
    border-collapse: collapse;
}

table.data th {
    padding: 10px 5px;
}

table.data td {
    padding: 10px 5px;
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
}

table.data td a.link {
    color: #3F27E6;
    text-decoration: underline;
}
table.data td a.link:hover {
    color: #347FF7;
    text-decoration: underline;
}

table.data tr:hover:not(:first-child) {
    background-color: #f5f5f5;
}

table.data tr:not(:first-child):nth-of-type(odd) {
    background-color: #f9f9f9;
}


/*form*/

.form{
    background: #42775A;
    border-radius: 5px;
    padding: 4px 20px 15px 20px;
    box-shadow: 0px 0px 5px black;
    color: #FFF;
    margin: 0 auto;
    width: 430px;
}

input, textarea, select {
    width: 100%;
    padding: 10px 5px;
    box-sizing: border-box;
    font-size: large;
}

textarea {
    min-height: 80px;
}

.btn {
    width: auto;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.btn-submit {
    background-color: #C35045;
}

.btn-submit:hover {
    background-color: #CA665C;
}

.btn-tambah {
    background-color: #27ae60;
}

.btn-tambah-div{
    text-align: right;
    margin-right: 20px;
}

.btn-tambah:hover {
    background-color: #2ecc71;
}

.btn-edit {
    background-color: #2980b9;
}
.btn-edit:hover{
    background-color: #5DA7D8;
}

.btn-hapus {
    background-color: #c0392b;
}
.btn-hapus:hover {
    background-color: #CE5A4E;
} 



dibantu:php indonesia

Read More

membuat form pendaftaran

index.php

 <html>
    <head><title>Form Pendaftaran</title></head>
    <body>
    <form action="proses.php" method="POST">
    <table border="4" bgcolor="A9C5EB" align="center" height="500" width="400" cellpadding="20">
    <tr>
    <td>
      <h1>FROM PENDAFTARAN</h1>
      <p>SMK PGRI 1 MEJOBO </p>
        <input type="text" Name="nama" size="46" placeholder="Nama">
        <input type="text" Name="email" size="46" placeholder="Email Anda"><br><br>
        <input type="password" Name="sandi" size="46" placeholder="Kata Sandi"><br>
    <p><b> Tanggal Lahir </b></p>
    <p>
      <select name="Tanggal">
        <option>-Tanggal-</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
        <option value="32">32</option>
      </select>
      <select name="Bulan">
        <option>-Bulan-</option>
        <option value="1">Januari</option>
        <option value="2">Februari</option>
        <option value="3">Maret</option>
        <option value="4">April</option>
        <option value="5">Mei</option>
        <option value="6">Juni</option>
        <option value="7">Juli</option>
        <option value="8">Agustus</option>
        <option value="9">September</option>
        <option value="10">Oktober</option>
        <option value="11">November</option>
        <option value="12">Desember</option>
      </select>
      <select name="Tahun">
        <option>-Tahun-</option>
        <option value="1980">1980</option>
        <option value="1981">1981</option>
        <option value="1982">1982</option>
        <option value="1983">1983</option>
        <option value="1984">1984</option>
        <option value="1985">1985</option>
        <option value="1986">1986</option>
        <option value="1987">1987</option>
        <option value="1988">1988</option>
        <option value="1989">1989</option>
        <option value="1990">1990</option>
        <option value="1991">1991</option>
        <option value="1992">1992</option>
        <option value="1993">1993</option>
        <option value="1994">1994</option>
        <option value="1995">1995</option>
        <option value="1996">1996</option>
        <option value="1997">1997</option>
        <option value="1998">1998</option>
        <option value="1999">1999</option>
        <option value="2000">2000</option>
        <option value="2001">2001</option>
        <option value="2002">2002</option>
        <option value="2003">2003</option>
        <option value="2004">2004</option>
        <option value="2005">2005</option>
        <option value="2006">2006</option>
        <option value="2007">2007</option>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
      </select>
      <br>
      <br>
      <input type="radio" name="Kelamin" value="L">
      Laki Laki
      <input type="radio" name="Kelamin" value="P">
      Perempuan      </p>
    <p><label></label>
    </p>
      <textarea name="comentar" id="textarea" placeholder=":::::knapa ingin sekolah disini::::::"></textarea>
    <p><br>
      <br>
      <input value="Kirim" style="background-color: 4985D0; height: 50; width: 150;"type="submit">
      </p></td>
    </tr>
   <a href="tampil.php">tampil</a>
    </body>
    </table>
    </form>
    </body>
    </html>  

proses.php

 <?php

include ('koneksi.php');
   
      $nama   = $_POST['nama'];
      $email    = $_POST['email'];
      $sandi        = $_POST['sandi'];
      $tgl_lhr             = $_POST['tgl_lhr'];
      $kelamin    = $_POST['kelamin'];
      $comentar    = $_POST['comentar'];
    

  $query="INSERT INTO daftar set nama='$nama', email='$email', sandi='$sandi', tgl_lhr='$tgl_lhr', kelamin='$kelamin', comentar='$comentar'";

     $simpan= mysqli_query($db, $query);
      if ($simpan)
         {
          echo "<script>alert('Data berhasil di tambah')</script>";
          echo "<meta http-equiv=Refresh content=0;url=tampil.php>";
          }
          else
          {
          echo "<script>alert('Maaf, data gagal di tambah')</script>";
          }
 

tampil.php

<?php
    include 'koneksi.php';

    // di sinii kita akan menampilkan data dari pembeli yang sudah melakaukan registrasi.//

$query = mysqli_query ($db, "SELECT * FROM daftar");
?>

<html>
    <head>
        <title> form daftar</title>
        <style type="text/css">
        .td {
            text-align: center;
        }
        .th {
            text-align: center;
            padding: 10px;
        }
        </style>
    </head>
    <body>
        <table align="center" border="2">
            <tr>
                <ins>
                <th class="th"><ins> NAMA </ins></th>
                <th class="th"> <ins> EMAIL</ins></th>
                <th class="th"> <ins>PASSWORD</ins></th>
                <th class="th"> <ins>TANGAL LAHIR</th>
                <th class="th"><ins> KELAMIN </ins></th>
                <th class="th"><ins> COMEN </ins></th>
       
                </ins>
            </tr>       
            <tr>
      <?php while ($daftar = mysqli_fetch_array($query)){ ?>
       
        <td class="td"> <?php echo $daftar['nama'] ?></td>
        <td class="td"> <?php echo $daftar['email'] ?></td>
        <td class="td"> <?php echo $daftar['sandi'] ?></td>
        <td class="td"> <?php echo $daftar['tgl_lhr'] ?></td>
        <td class="td"> <?php echo $daftar['kelamin'] ?></td>
        <td class="td"> <?php echo $daftar['comentar'] ?></td>
        <td>
             <a href="edit-pembelian.php?id_pendaftaran=<?php echo $pendaftaran['id_pendaftaran']; ?>">
                        <button>Edit</button>
           </a>
           <a href="hapus-pendaftaran.php?id_pendaftaran=<?php echo $pendaftaran['id_pendaftaran']; ?>" onclick="return confirm('Hapus data ini?');">
                        <button>Delete</button>
           </a>
       </td>
            </tr>
    <?php }
   ?>
        </table>
     </body>
</html>

koneksi.php

<?php
$host ="localhost";
$user ="root";
$pass ="risaku";
$db   ="form";

        $db =mysqli_connect($host,$user,$pass,$db) or die("gagal koneksi ke database");

?>    

Read More

tag css and describsionnya

Properti warna

Property	Description	CSS
color	Sets the color of text	1
opacity	Sets the opacity level for an element	3

 

 Latar belakang dan Perbatasan Properti

Property	Description	CSS
background	A shorthand property for setting all the background properties in one declaration	1
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page	1
background-blend-mode	Specifies the blending mode of each background layer (color/image)	3
background-color	Specifies the background color of an element	1
background-image	Specifies one or more background images for an element	1
background-position	Specifies the position of a background image	1
background-repeat	Sets how a background image will be repeated	1
background-clip	Specifies the painting area of the background	3
background-origin	Specifies where the background image(s) is/are positioned	3
background-size	Specifies the size of the background image(s)	3
border	Sets all the border properties in one declaration	1
border-bottom	Sets all the bottom border properties in one declaration	1
border-bottom-color	Sets the color of the bottom border	1
border-bottom-left-radius	Defines the shape of the border of the bottom-left corner	3
border-bottom-right-radius	Defines the shape of the border of the bottom-right corner	3
border-bottom-style	Sets the style of the bottom border	1
border-bottom-width	Sets the width of the bottom border	1
border-color	Sets the color of the four borders	1
border-image	A shorthand property for setting all the border-image-* properties	3
border-image-outset	Specifies the amount by which the border image area extends beyond the border box	3
border-image-repeat	Specifies whether the border image should be repeated, rounded or stretched	3
border-image-slice	Specifies how to slice the border image	3
border-image-source	Specifies the path to the image to be used as a border	3
border-image-width	Specifies the widths of the image-border	3
border-left	Sets all the left border properties in one declaration	1
border-left-color	Sets the color of the left border	1
border-left-style	Sets the style of the left border	1
border-left-width	Sets the width of the left border	1
border-radius	A shorthand property for setting all the four border-*-radius properties	3
border-right	Sets all the right border properties in one declaration	1
border-right-color	Sets the color of the right border	1
border-right-style	Sets the style of the right border	1
border-right-width	Sets the width of the right border	1
border-style	Sets the style of the four borders	1
border-top	Sets all the top border properties in one declaration	1
border-top-color	Sets the color of the top border	1
border-top-left-radius	Defines the shape of the border of the top-left corner	3
border-top-right-radius	Defines the shape of the border of the top-right corner	3
border-top-style	Sets the style of the top border	1
border-top-width	Sets the width of the top border	1
border-width	Sets the width of the four borders	1
box-decoration-break	Sets the behaviour of the background and border of an element at page-break, or, for in-line elements, at line-break.	3
box-shadow	Attaches one or more drop-shadows to the box	3

 

Dasar Properti kotak

Property	Description	CSS
bottom	Specifies the bottom position of a positioned element	2
clear	Specifies which sides of an element where other floating elements are not allowed	1
clip	Clips an absolutely positioned element	2
display	Specifies how a certain HTML element should be displayed	1
float	Specifies whether or not a box should float	1
height	Sets the height of an element	1
left	Specifies the left position of a positioned element	2
margin	Sets all the margin properties in one declaration	1
margin-bottom	Sets the bottom margin of an element	1
margin-left	Sets the left margin of an element	1
margin-right	Sets the right margin of an element	1
margin-top	Sets the top margin of an element	1
max-height	Sets the maximum height of an element	2
max-width	Sets the maximum width of an element	2
min-height	Sets the minimum height of an element	2
min-width	Sets the minimum width of an element	2
overflow	Specifies what happens if content overflows an element's box	2
overflow-x	Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area	3
overflow-y	Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area	3
padding	Sets all the padding properties in one declaration	1
padding-bottom	Sets the bottom padding of an element	1
padding-left	Sets the left padding of an element	1
padding-right	Sets the right padding of an element	1
padding-top	Sets the top padding of an element	1
position	Specifies the type of positioning method used for an element (static, relative, absolute or fixed)	2
right	Specifies the right position of a positioned element	2
top	Specifies the top position of a positioned element	2
visibility	Specifies whether or not an element is visible	2
width	Sets the width of an element	1
vertical-align	Sets the vertical alignment of an element	1
z-index	Sets the stack order of a positioned element	2

 

Fleksibel Box Tata Letak

Property	Description	CSS
align-content	Specifies the alignment between the lines inside a flexible container when the items do not use all available space	3
align-items	Specifies the alignment for items inside a flexible container	3
align-self	Specifies the alignment for selected items inside a flexible container	3
flex	Specifies the length of the item, relative to the rest	3
flex-basis	Specifies the initial length of a flexible item	3
flex-direction	Specifies the direction of the flexible items	3
flex-flow	A shorthand property for the flex-direction and the flex-wrap properties	3
flex-grow	Specifies how much the item will grow relative to the rest	3
flex-shrink	Specifies how the item will shrink relative to the rest	3
flex-wrap	Specifies whether the flexible items should wrap or not	3
justify-content	Specifies the alignment between the items inside a flexible container when the items do not use all available space	3
order	Sets the order of the flexible item, relative to the rest	3

 

Properti teks

Property	Description	CSS
hanging-punctuation	Specifies whether a punctuation character may be placed outside the line box	3
hyphens	Sets how to split words to improve the layout of paragraphs	3
letter-spacing	Increases or decreases the space between characters in a text	1
line-break	Specifies how/if to break lines	3
line-height	Sets the line height	1
overflow-wrap	Specifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box)	3
tab-size	Specifies the length of the tab-character	3
text-align	Specifies the horizontal alignment of text	1
text-align-last	Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"	3
text-combine-upright	Specifies the combination of multiple characters into the space of a single character	3
text-indent	Specifies the indentation of the first line in a text-block	1
text-justify	Specifies the justification method used when text-align is "justify"	3
text-transform	Controls the capitalization of text	1
white-space	Specifies how white-space inside an element is handled	1
word-break	Specifies line breaking rules for non-CJK scripts	3
word-spacing	Increases or decreases the space between words in a text	1
word-wrap	Allows long, unbreakable words to be broken and wrap to the next line	3

 

Dekorasi teks Properti

Property	Description	CSS
text-decoration	Specifies the decoration added to text	1
text-decoration-color	Specifies the color of the text-decoration	3
text-decoration-line	Specifies the type of line in a text-decoration	3
text-decoration-style	Specifies the style of the line in a text decoration	3
text-shadow	Adds shadow to text	3
text-underline-position	Specifies the position of the underline which is set using the text-decoration property	3

 

Properti Font

Property	Description	CSS
@font-face	A rule that allows websites to download and use fonts other than the "web-safe" fonts	3
@font-feature-values	Allows authors to use a common name in font-variant-alternate for feature activated differently in OpenType	3
font	Sets all the font properties in one declaration	1
font-family	Specifies the font family for text	1
font-feature-settings	Allows control over advanced typographic features in OpenType fonts	3
font-kerning	Controls the usage of the kerning information (how letters are spaced)	3
font-language-override	Controls the usage of language-specific glyphs in a typeface	3
font-size	Specifies the font size of text	1
font-size-adjust	Preserves the readability of text when font fallback occurs	3
font-stretch	Selects a normal, condensed, or expanded face from a font family	3
font-style	Specifies the font style for text	1
font-synthesis	Controls which missing typefaces (bold or italic) may be synthesized by the browser	3
font-variant	Specifies whether or not a text should be displayed in a small-caps font	1
font-variant-alternates	Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values	3
font-variant-caps	Controls the usage of alternate glyphs for capital letters	3
font-variant-east-asian	Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese)	3
font-variant-ligatures	Controls which ligatures and contextual forms are used in textual content of the elements it applies to	3
font-variant-numeric	Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers	3
font-variant-position	Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font	3
font-weight	Specifies the weight of a font	1

Menulis Mode Properti

Property	Description	CSS
direction	Specifies the text direction/writing direction	2
text-orientation	Defines the orientation of the text in a line	3
text-combine-upright	Specifies the combination of multiple characters into the space of a single character	3
unicode-bidi	Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document	2
writing-mode		3

 

Table properties

Property	Description	CSS
border-collapse	Specifies whether or not table borders should be collapsed	2
border-spacing	Specifies the distance between the borders of adjacent cells	2
caption-side	Specifies the placement of a table caption	2
empty-cells	Specifies whether or not to display borders and background on empty cells in a table	2
table-layout	Sets the layout algorithm to be used for a table	2

 

Daftar dan Penghitung Properti

Property	Description	CSS
counter-increment	Increments one or more counters	2
counter-reset	Creates or resets one or more counters	2
list-style	Sets all the properties for a list in one declaration	1
list-style-image	Specifies an image as the list-item marker	1
list-style-position	Specifies if the list-item markers should appear inside or outside the content flow	1
list-style-type	Specifies the type of list-item marker	1

animasi Properti

Property	Description	CSS
@keyframes	Specifies the animation code	3
animation	A shorthand property for all the animation properties (except animation-play-state and animation-fill-mode)	3
animation-delay	Specifies a delay for the start of an animation	3
animation-direction	Specifies whether or not the animation should play in reverse on alternate cycles	3
animation-duration	Specifies how many seconds or milliseconds an animation takes to complete one cycle	3
animation-fill-mode	Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)	3
animation-iteration-count	Specifies the number of times an animation should be played	3
animation-name	Specifies the name of the @keyframes animation	3
animation-play-state	Specifies whether the animation is running or paused	3
animation-timing-function	Specifies the speed curve of an animation	3

 

Transform Properti

Property	Description	CSS
backface-visibility	Defines whether or not an element should be visible when not facing the screen	3
perspective	Specifies the perspective on how 3D elements are viewed	3
perspective-origin	Specifies the bottom position of 3D elements	3
transform	Applies a 2D or 3D transformation to an element	3
transform-origin	Allows you to change the position on transformed elements	3
transform-style	Specifies how nested elements are rendered in 3D space	3

 

transisi Properti

Property	Description	CSS
transition	A shorthand property for setting the four transition properties	3
transition-property	Specifies the name of the CSS property the transition effect is for	3
transition-duration	Specifies how many seconds or milliseconds a transition effect takes to complete	3
transition-timing-function	Specifies the speed curve of the transition effect	3
transition-delay	Specifies when the transition effect will start	3

 

Dasar Properti User Interface

Property	Description	CSS
box-sizing	Tells the browser what the sizing properties (width and height) should include	3
content	Used with the :before and :after pseudo-elements, to insert generated content	2
cursor	Specifies the type of cursor to be displayed	2
ime-mode	Controls the state of the input method editor for text fields	3
nav-down	Specifies where to navigate when using the arrow-down navigation key	3
nav-index	Specifies the tabbing order for an element	3
nav-left	Specifies where to navigate when using the arrow-left navigation key	3
nav-right	Specifies where to navigate when using the arrow-right navigation key	3
nav-up	Specifies where to navigate when using the arrow-up navigation key	3
outline	Sets all the outline properties in one declaration	2
outline-color	Sets the color of an outline	2
outline-offset	Offsets an outline, and draws it beyond the border edge	3
outline-style	Sets the style of an outline	2
outline-width	Sets the width of an outline	2
resize	Specifies whether or not an element is resizable by the user	3
text-overflow	Specifies what should happen when text overflows the containing element	3

 

Multi-kolom Tata Letak Properti

Property	Description	CSS
break-after	Specifies the page-, column-, or region-break behavior after the generated box	3
break-before	Specifies the page-, column-, or region-break behavior before the generated box	3
break-inside	Specifies the page-, column-, or region-break behavior inside the generated box	3
column-count	Specifies the number of columns an element should be divided into	3
column-fill	Specifies how to fill columns	3
column-gap	Specifies the gap between the columns	3
column-rule	A shorthand property for setting all the column-rule-* properties	3
column-rule-color	Specifies the color of the rule between columns	3
column-rule-style	Specifies the style of the rule between columns	3
column-rule-width	Specifies the width of the rule between columns	3
column-span	Specifies how many columns an element should span across	3
column-width	Specifies the width of the columns	3
columns	A shorthand property for setting column-width and column-count	3
widows	Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element	2

Paged Media

Property	Description	CSS
orphans	Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element	2
page-break-after	Sets the page-breaking behavior after an element	2
page-break-before	Sets the page-breaking behavior before an element	2
page-break-inside	Sets the page-breaking behavior inside an element	2

Generated Content untuk Paged Media

Property	Description	CSS
marks	Adds crop and/or cross marks to the document	3
quotes	Sets the type of quotation marks for embedded quotations	2

Filter Efek Properti

Property	Description	CSS
filter	Defines effects (e.g. blurring or color shifting) on an element before the element is displayed	3

Nilai gambar dan Konten Diganti

Property	Description	CSS
image-orientation	Specifies a rotation in the right or clockwise direction that a user agent applies to an image (This property is likely going to be deprecated and its functionality moved to HTML)	3
image-rendering	Gives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled	3
image-resolution	Specifies the intrinsic resolution of all raster images used in/on the element	3
object-fit	Specifies how the contents of a replaced element should be fitted to the box established by its used height and width	3
object-position	Specifies the alignment of the replaced element inside its box	3

masking Properti

Property	Description	CSS
mask		3
mask-type		3

pidato Properti

Property	Description	CSS
mark	A shorthand property for setting the mark-before and mark-after properties	3
mark-after	Allows named markers to be attached to the audio stream	3
mark-before	Allows named markers to be attached to the audio stream	3
phonemes	Specifies a phonetic pronunciation for the text contained by the corresponding element	3
rest	A shorthand property for setting the rest-before and rest-after properties	3
rest-after	Specifies a rest or prosodic boundary to be observed after speaking an element's content	3
rest-before	Specifies a rest or prosodic boundary to be observed before speaking an element's content	3
voice-balance	Specifies the balance between left and right channels	3
voice-duration	Specifies how long it should take to render the selected element's content	3
voice-pitch	Specifies the average pitch (a frequency) of the speaking voice	3
voice-pitch-range	Specifies variation in average pitch	3
voice-rate	Controls the speaking rate	3
voice-stress	Indicates the strength of emphasis to be applied	3
voice-volume	Refers to the amplitude of the waveform output by the speech synthesises	3

 

Properti Marquee

Property	Description	CSS
marquee-direction	Sets the direction of the moving content	3
marquee-play-count	Sets how many times the content move	3
marquee-speed	Sets how fast the content scrolls	3
marquee-style	Sets the style of the moving content	3

sumber: W3schools

Read More

tag html and describsion

Kode-kode Html

---

HTML Tags Ordered Alphabetically

Tag	Description
<!--...-->	Defines a comment
<!DOCTYPE>	Defines the document type
<a>	Defines a hyperlink
<abbr>	Defines an abbreviation or an acronym
<acronym>	Not supported in HTML5. Use <abbr> instead.Defines an acronym
<address>	Defines contact information for the author/owner of a document
<applet>	Not supported in HTML5. Use <object> instead.Defines an embedded applet
<area>	Defines an area inside an image-map
<article>	Defines an article
<aside>	Defines content aside from the page content
<audio>	Defines sound content
<b>	Defines bold text
<base>	Specifies the base URL/target for all relative URLs in a document
<basefont>	Not supported in HTML5. Use CSS instead.Specifies a default color, size, and font for all text in a document
<bdi>	Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo>	Overrides the current text direction
<big>	Not supported in HTML5. Use CSS instead.Defines big text
<blockquote>	Defines a section that is quoted from another source
<body>	Defines the document's body
<br>	Defines a single line break
<button>	Defines a clickable button
<canvas>	Used to draw graphics, on the fly, via scripting (usually JavaScript)
<caption>	Defines a table caption
<center>	Not supported in HTML5. Use CSS instead.Defines centered text
<cite>	Defines the title of a work
<code>	Defines a piece of computer code
<col>	Specifies column properties for each column within a <colgroup> element
<colgroup>	Specifies a group of one or more columns in a table for formatting
<datalist>	Specifies a list of pre-defined options for input controls
<dd>	Defines a description/value of a term in a description list
<del>	Defines text that has been deleted from a document
<details>	Defines additional details that the user can view or hide
<dfn>	Represents the defining instance of a term
<dialog>	Defines a dialog box or window
<dir>	Not supported in HTML5. Use <ul> instead.Defines a directory list
<div>	Defines a section in a document
<dl>	Defines a description list
<dt>	Defines a term/name in a description list
<em>	Defines emphasized text
<embed>	Defines a container for an external (non-HTML) application
<fieldset>	Groups related elements in a form
<figcaption>	Defines a caption for a <figure> element
<figure>	Specifies self-contained content
<font>	Not supported in HTML5. Use CSS instead.Defines font, color, and size for text
<footer>	Defines a footer for a document or section
<form>	Defines an HTML form for user input
<frame>	Not supported in HTML5.Defines a window (a frame) in a frameset
<frameset>	Not supported in HTML5.Defines a set of frames
<h1> to <h6>	Defines HTML headings
<head>	Defines information about the document
<header>	Defines a header for a document or section
<hgroup>	Defines a group of headings
<hr>	Defines a thematic change in the content
<html>	Defines the root of an HTML document
<i>	Defines a part of text in an alternate voice or mood
<iframe>	Defines an inline frame
<img>	Defines an image
<input>	Defines an input control
<ins>	Defines a text that has been inserted into a document
<kbd>	Defines keyboard input
<keygen>	Defines a key-pair generator field (for forms)
<label>	Defines a label for an <input> element
<legend>	Defines a caption for a <fieldset> element
<li>	Defines a list item
<link>	Defines the relationship between a document and an external resource (most used to link to style sheets)
<main>	Specifies the main content of a document
<map>	Defines a client-side image-map
<mark>	Defines marked/highlighted text
<menu>	Defines a list/menu of commands
<menuitem>	Defines a command/menu item that the user can invoke from a popup menu
<meta>	Defines metadata about an HTML document
<meter>	Defines a scalar measurement within a known range (a gauge)
<nav>	Defines navigation links
<noframes>	Not supported in HTML5.Defines an alternate content for users that do not support frames
<noscript>	Defines an alternate content for users that do not support client-side scripts
<object>	Defines an embedded object
<ol>	Defines an ordered list
<optgroup>	Defines a group of related options in a drop-down list
<option>	Defines an option in a drop-down list
<output>	Defines the result of a calculation
<p>	Defines a paragraph
<param>	Defines a parameter for an object
<pre>	Defines preformatted text
<progress>	Represents the progress of a task
<q>	Defines a short quotation
<rp>	Defines what to show in browsers that do not support ruby annotations
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>	Defines a ruby annotation (for East Asian typography)
<s>	Defines text that is no longer correct
<samp>	Defines sample output from a computer program
<script>	Defines a client-side script
<section>	Defines a section in a document
<select>	Defines a drop-down list
<small>	Defines smaller text
<source>	Defines multiple media resources for media elements (<video> and <audio>)
<span>	Defines a section in a document
<strike>	Not supported in HTML5. Use <del> instead.Defines strikethrough text
<strong>	Defines important text
<style>	Defines style information for a document
<sub>	Defines subscripted text
<summary>	Defines a visible heading for a <details> element
<sup>	Defines superscripted text
<table>	Defines a table
<tbody>	Groups the body content in a table
<td>	Defines a cell in a table
<textarea>	Defines a multiline input control (text area)
<tfoot>	Groups the footer content in a table
<th>	Defines a header cell in a table
<thead>	Groups the header content in a table
<time>	Defines a date/time
<title>	Defines a title for the document
<tr>	Defines a row in a table
<track>	Defines text tracks for media elements (<video> and <audio>)
<tt>	Not supported in HTML5. Use CSS instead.Defines teletype text
<u>	Defines text that should be stylistically different from normal text
<ul>	Defines an unordered list
<var>	Defines a variable
<video>	Defines a video or movie
<wbr>	Defines a possible line-break HTML Tags Ordered by Category Basic Tags Tag Description <!DOCTYPE>  Defines the document type <html> Defines an HTML document <title> Defines a title for the document <body> Defines the document's body <h1> to <h6> Defines HTML headings <p> Defines a paragraph <br> Inserts a single line break <hr> Defines a thematic change in the content <!--...--> Defines a comment Formatting Tag Description <acronym> Not supported in HTML5. Use <abbr> instead.Defines an acronym <abbr> Defines an abbreviation or an acronym <address> Defines contact information for the author/owner of a document/article <b> Defines bold text <bdi> Isolates a part of text that might be formatted in a different direction from other text outside it <bdo> Overrides the current text direction <big> Not supported in HTML5. Use CSS instead.Defines big text <blockquote> Defines a section that is quoted from another source <center> Not supported in HTML5. Use CSS instead.Defines centered text <cite> Defines the title of a work <code> Defines a piece of computer code <del> Defines text that has been deleted from a document <dfn> Represents the defining instance of a term <em> Defines emphasized text  <font> Not supported in HTML5. Use CSS instead.Defines font, color, and size for text <i> Defines a part of text in an alternate voice or mood <ins> Defines a text that has been inserted into a document <kbd> Defines keyboard input <mark> Defines marked/highlighted text <meter> Defines a scalar measurement within a known range (a gauge) <pre> Defines preformatted text <progress> Represents the progress of a task <q> Defines a short quotation <rp> Defines what to show in browsers that do not support ruby annotations <rt> Defines an explanation/pronunciation of characters (for East Asian typography) <ruby> Defines a ruby annotation (for East Asian typography) <s> Defines text that is no longer correct <samp> Defines sample output from a computer program <small> Defines smaller text <strike> Not supported in HTML5. Use <del> instead.Defines strikethrough text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <time> Defines a date/time <tt> Not supported in HTML5. Use CSS instead.Defines teletype text <u> Defines text that should be stylistically different from normal text <var> Defines a variable <wbr> Defines a possible line-break Forms and Input Tag Description <form> Defines an HTML form for user input <input> Defines an input control <textarea> Defines a multiline input control (text area) <button> Defines a clickable button <select> Defines a drop-down list <optgroup> Defines a group of related options in a drop-down list <option> Defines an option in a drop-down list <label> Defines a label for an <input> element <fieldset> Groups related elements in a form <legend> Defines a caption for a <fieldset> element <datalist> Specifies a list of pre-defined options for input controls <keygen> Defines a key-pair generator field (for forms) <output> Defines the result of a calculation Frames Tag Description <frame> Not supported in HTML5.Defines a window (a frame) in a frameset <frameset> Not supported in HTML5.Defines a set of frames <noframes> Not supported in HTML5.Defines an alternate content for users that do not support frames <iframe> Defines an inline frame Images Tag Description <img> Defines an image <map> Defines a client-side image-map <area> Defines an area inside an image-map <canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript) <figcaption> Defines a caption for a <figure> element <figure> Specifies self-contained content Audio / Video Tag Description <audio> Defines sound content <source> Defines multiple media resources for media elements (<video> and <audio>) <track> Defines text tracks for media elements (<video> and <audio>) <video> Defines a video or movie Links Tag Description <a> Defines a hyperlink <link> Defines the relationship between a document and an external resource (most used to link to style sheets) <nav> Defines navigation links Lists Tag Description <ul> Defines an unordered list <ol> Defines an ordered list <li> Defines a list item <dir> Not supported in HTML5. Use <ul> instead.Defines a directory list <dl> Defines a description list <dt> Defines a term/name in a description list <dd> Defines a description of a term/name in a description list <menu> Defines a list/menu of commands <menuitem> Defines a command/menu item that the user can invoke from a popup menu Tables Tag Description <table> Defines a table <caption> Defines a table caption <th> Defines a header cell in a table <tr> Defines a row in a table <td> Defines a cell in a table <thead> Groups the header content in a table <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table <col> Specifies column properties for each column within a <colgroup> element <colgroup> Specifies a group of one or more columns in a table for formatting Styles and Semantics Tag Description <style> Defines style information for a document <div> Defines a section in a document <span> Defines a section in a document <header> Defines a header for a document or section <hgroup> Defines a group of headings <footer> Defines a footer for a document or section <main> Specifies the main content of a document <section> Defines a section in a document <article> Defines an article <aside> Defines content aside from the page content <details> Defines additional details that the user can view or hide <dialog> Defines a dialog box or window <summary> Defines a visible heading for a <details> element Meta Info Tag Description <head> Defines information about the document <meta> Defines metadata about an HTML document <base> Specifies the base URL/target for all relative URLs in a document <basefont> Not supported in HTML5. Use CSS instead.Specifies a default color, size, and font for all text in a document Programming Tag Description <script> Defines a client-side script <noscript> Defines an alternate content for users that do not support client-side scripts <applet> Not supported in HTML5. Use <object> instead.Defines an embedded applet <embed> Defines a container for an external (non-HTML) application <object> Defines an embedded object <param> Defines a parameter for an object

sumber:Ifa Sonia Istifarani

Read More