Math - IT - Finance: Desember 2016

Minggu, 11 Desember 2016

CSS Background Image

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;}

atau

body {
    background: #ffffff url("img_tree.png") no-repeat right top;}

Sabtu, 10 Desember 2016

Form List HTML

Form List Biasa :

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Form List by Group :

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Grouping Form HTML

Contoh :

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30"><br>
    Email: <input type="text" size="30"><br>
    Date of birth: <input type="text" size="10">
  </fieldset>
</form>

HTML5 Element

HTML5 <datalist> Element

Input dari list yang di validasi :

Menu Header Horizontal Lists

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a menu:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

Keterangan :

list-style-type: none; -> Menghilangkan bulatan dari list
float: right; -> untuk ke kiri atau ke kanan
overflow -> kalau text kepanjangan maka disetting fixed atau ada scroll, agar lebih paham cek disini
display: block; -> Menampilkan text secara block, agar lebih paham cek disini
text-decoration: none; -> Menghilangkan garis bawah link

Perberdaaan Border, Padding, & Margin

Lebar Table & Merger

Lebar Table :

Merge Table :

<th colspan="2">Telephone</th>

<th rowspan="2">Telephone:</th>

Single Line Border Table

HTML Table - Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property:

table, th, td {
border: 1px solid black;
border-collapse: collapse;}

Judul Tabel (HTML Table - Adding a Caption)

HTML Table - Adding a Caption

To add a caption to a table, use the <caption> tag:

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

A Special Style for One Table

To define a special style for a special table, add an id attribute to the table:

Example

table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Now you can define a special style for this table:

table#t01 {
width: 100%;
background-color: #f1f1c1;}

And add more styles:

table#t01 tr:nth-child(even) {
    background-color: #eee;}
table#t01 tr:nth-child(odd) {
    background-color: #fff;}
table#t01 th {
    color: white;
    background-color: black;}

Color Link HTML

a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}

Site: http://www.w3schools.com/html/html_links.asp

Laman