CSS Text

Ada bebeberapa cara untuk mengatur text dengan CSS diantaranya text color, Text Alignment, Text Decoration, Text Transformation. Sebagian cara-cara tersebut untuk mengatur text akan saya jelaskan fungsi dan penggunaannya sebagai berikut.
a.Text Color

Fungsi Properti warna digunakan untuk mengatur warna teks. Dengan CSS, warna yang paling sering ditentukan diantaranya : Continue reading

HTML Symbols

HTML Simbol Entitas

Entitas HTML yang dijelaskan dalam bab sebelumnya.

Banyak matematika, teknis, dan simbol mata uang, yang tidak hadir pada keyboard normal.

Untuk menambahkan simbol-simbol ini ke halaman HTML, Anda dapat menggunakan nama entitas HTML.

Jika tidak ada nama entitas ada, Anda dapat menggunakan nomor entitas; desimal (atau heksadesimal) referensi.
Jika Anda menggunakan nama entitas HTML atau nomor heksadesimal, karakter akan selalu muncul dengan benar.
Ini adalah independen dari apa set karakter (encoding) halaman Anda gunakan!

 <p>I will display &euro;</p>
<p>I will display €</p>
<p>I will display €</p> 

maka hasilnya akan seperti ini:
HTML-Symbol

HTML Forms

tag Form

Bentuk HTML digunakan untuk mengumpulkan input pengguna.
tag form mendefinisikan bentuk HTML:

<form>
.
form elements
.
</form>

Bentuk HTML mengandung Unsur Bentuk.

Elemen bentuk BERBAGAI JENIS masukan elemen, checkbox, radio Tombol, Tombol mengirimkan, Dan Banyak Lagi.

tag Input

tag Input adalah elemen bentuk yang paling penting.

Input memiliki banyak variasi, tergantung pada jenis atribut.

Berikut adalah jenis-jenis yang digunakan dalam bab ini:

jenis Keterangan
teks Mendefinisikan input teks biasa
radio Mendefinisikan masukan tombol radio (untuk memilih salah satu dari banyak pilihan)
mengirimkan Mendefinisikan sebuah tombol submit (untuk mengirimkan formulir)

-Text Input

input type = “text” mendefinisikan input satu baris untuk input teks:

<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form> 

Maka Hasil nya di browser seperti ini:

FORM-1

Catatan: Bentuk itu sendiri tidak terlihat. Juga mencatat bahwa lebar default kolom teks adalah 20 karakter.

-Radio Button Input
input type=”radio” Tombol radio membiarkan pengguna memilih SATU dari sejumlah pilihan , mendefinisikan tombol radio.:

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 

Maka hasilnya akan seperti ini:

FORM-2

-The Submit Button

input type=”submit” mendefinisikan tombol untuk mengirimkan formulir ke bentuk-handler.

Bentuk-handler biasanya halaman server dengan script untuk memproses input data.

Bentuk-handler yang ditentukan dalam aksi atribut form:

 <form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

Maka hasilnya akan seperti ini:
FORM-3

HTML Tables

HTML Table Headings
Tabel Headings didefinisikan dengan tag

<th> </th>

secara default,semua browser menampilkan judul tabel dengan bold dan center.
scriptnya seperti berikut:

<table border="1px" align="center">
    <tr>
        <th>No.</th>
        <th>Nama</th>
        <th>Devisi</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Dedy Setiawan</td>
        <td>Marketing</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Rizki</td>
        <td>Manager IT</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Fadli</td>
        <td>Produksi</td>
    </tr>
</table>

maka hasilnya akan seperti ini:
Tables2

HTML Layouts

Website sering menampilkan konten dalam beberapa kolom (seperti majalah atau koran).
tata letak html menggunakan elemen.Div elemen sering digunakan sebagai alat tata letak,
karena dengan mudah dapat diposisikan dengan CSS.
Contoh ini menggunakan 4 div elemen untuk membuat tata letak beberapa kolom:

kode html nya seperti berikut:

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright © W3Schools.com
</div>

lalu kode css seperti ini:

 
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style> 

maka hasinya akan sperti ini:
Layout-1

HTML Block dan Inline Elements

Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemen itu. Tampilan nilai default untuk sebagian besar elemen adalah blok atau inline.

Elemen blok-tingkat

Sebuah elemen blok-tingkat selalu dimulai pada baris baru dan mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh itu bisa).
Elemen div adalah elemen blok-tingkat.

Contoh unsur blok-tingkat:

     <div>
     <h1> - <h6>
     <p>
     <form>

-Inline Elements

Sebuah elemen inline tidak dimulai pada baris baru dan hanya membutuhkan sebanyak lebar yang diperlukan.

Ini adalah inline span elemen dalam sebuah paragraf.

Contoh elemen inline:

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

-span Elemen

span elemen merupakan elemen inline yang sering digunakan sebagai wadah untuk beberapa teks.

span elemen tidak memiliki atribut yang diperlukan, tapi gaya dan kelas yang umum.

Ketika digunakan bersama dengan CSS, span elemen dapat digunakan untuk style bagian dari teks:

<h1>My <span style="color:red">Important</span> Heading</h1>

maka hasilnya akan seperti ini:

HTML-Block-Inline

HTML Lists

Unordered lists dan ordered lists yang umum digunakan dalam HTML:

Unordered List
The first item
The second item
The third item
The fourth item

Ordered List
The first item
The second item
The third item
The fourth item

-Unordered HTML Lists

unordered list dimulai dengan tag ul. Setiap daftar item dimulai dengan tag li.

Daftar item akan ditandai dengan lingkaran hitam kecil.
script html nya sebagai berikut:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

maka tamilannya sebagai berikut:

TAG-LIST

-Ordered HTML Lists
Ordered HTML Lists dimulai dengan tag ol. Setiap daftar item dimulai dengan tag li .
penulisan html nya seperti berikut:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Terdapat beberapa jenis Atribut Ordered HTML Lists , di antaranya sebagai berikut:

ketik = “1” Daftar Items akan diberi nomor dengan angka (default)
type = “A” Daftar Items akan diberi nomor dengan huruf besar
type = “a” Daftar Items akan diberi nomor dengan huruf kecil
ketik = “I” Daftar Items akan diberi nomor dengan angka romawi huruf besar
ketik = “i” Daftar Items akan diberi nomor dengan angka romawi huruf kecil

contoh penulisan pada script html,sebagai berikut:

<ol type="1">
    <li>Kopi</li>
    <li>Es Campur</li>
    <li>Teh Manis</li>
</ol>

<ol type="a">
    <li>Kopi</li>
    <li>Es Campur</li>
    <li>Teh Manis</li>
</ol>

<ol type="A">
    <li>Kopi</li>
    <li>Es Campur</li>
    <li>Teh Manis</li>
</ol>

<ol type="i">
    <li>Kopi</li>
    <li>Es Campur</li>
    <li>Teh Manis</li>
</ol>

<ol type="I">
    <li>Kopi</li>
    <li>Es Campur</li>
    <li>Teh Manis</li>
</ol>

maka hasilnya sebagai berikut:

TAG-LIST-3

-HTML Description Lists

HTML juga mendukung daftar deskripsi.
Daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah.
tag tag dl mendefinisikan daftar deskripsi, lalu tag dt mendefinisikan istilah (nama), dan tag dd menjelaskan setiap istilah
penulisan pada htmlnya sebagai berikut:

<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

maka hasilnya sebagai berikut :

TAG-LIST-4

CSS Text

Ada bebeberapa cara untuk mengatur text dengan CSS diantaranya text color, Text Alignment, Text Decoration, Text Transformation. Sebagian cara-cara tersebut untuk mengatur text akan saya jelaskan fungsi dan penggunaannya sebagai berikut.
a.Text Color
Fungsi Properti warna digunakan untuk mengatur warna teks. Dengan CSS, warna yang paling sering ditentukan diantaranya : Continue reading