Kata Pengantar

Untuk memenuhi nilai dari tugas akhir saya membuat sebuah blog berisikan tutorial tentang HTML 

Dan harapan admin semoga blog ini bisa berguna untuk para pengunjung dan para penggemar internet. Dan dapat dijadikan media pembelajaran tentang. Melalui blog  ini saya akan memberikan informasi-informasi terbaru tentang HTML.

Demikian blog yang saya buat semoga bisa di jadikan pokok utama dari belajar kalian semua 

sumber : http://www.w3schools.com/

Background

Warna Latar Belakang

Properti background-color menentukan warna latar belakang dari elemen.

Warna latar belakang halaman didefinisikan dalam pemilih tubuh:
contoh
body {
     background-color: # b0c4de;
}

Cobalah sendiri »

Dengan CSS, warna yang paling sering ditentukan oleh:

     nilai HEX - seperti "# ff0000"
     nilai RGB - seperti "rgb (255,0,0)"
     nama warna - seperti "merah"

Lihatlah Nilai Warna CSS untuk daftar lengkap dari nilai warna mungkin.

Pada contoh di bawah ini, h1, p, dan elemen div memiliki warna latar belakang yang berbeda:
contoh
h1 {
     background-color: # 6495ed;
}

p {
     background-color: # e0ffff;
}

div {
     background-color: # b0c4de;
}

Cobalah sendiri »

background Image

Properti background-image menentukan gambar untuk digunakan sebagai latar belakang suatu elemen.

Secara default, gambar diulang sehingga mencakup seluruh elemen.

Latar belakang gambar untuk halaman dapat diatur seperti ini:
contoh
body {
     background-image: url ("paper.gif");
}

Cobalah sendiri »

Di bawah ini adalah contoh dari kombinasi yang buruk dari teks dan gambar latar belakang. Teks hampir tidak terbaca:
contoh
body {
     background-image: url ("bgdesert.jpg");
}

Cobalah sendiri »

Background Image - Ulangi Horisontal atau Vertikal

Secara default, properti background-image mengulangi gambar secara horisontal dan vertikal.

Beberapa gambar harus diulang hanya horizontal atau vertikal, atau mereka akan terlihat aneh, seperti ini:
contoh
body {
     background-image: url ("gradient_bg.png");
}

Cobalah sendiri »

Jika gambar diulang hanya secara horizontal (mengulang-x), latar belakang akan terlihat lebih baik:
contoh
body {
     background-image: url ("gradient_bg.png");
     background-repeat: repeat-x;
}

Cobalah sendiri »

Background Image - Mengatur posisi dan no-repeat
Catatan Catatan: Bila menggunakan gambar latar belakang, menggunakan gambar yang tidak mengganggu teks.

Menampilkan gambar hanya sekali ditentukan oleh properti background-repeat:
contoh
body {
     background-image: url ("img_tree.png");
     background-repeat: no-repeat;
}

Cobalah sendiri »

Dalam contoh di atas, gambar latar belakang ditampilkan di tempat yang sama seperti teks. Kami ingin mengubah posisi gambar, sehingga tidak mengganggu teks terlalu banyak.

Posisi gambar yang ditetapkan oleh properti background-position:
contoh
body {
     background-image: url ("img_tree.png");
     background-repeat: no-repeat;
     background-position: kanan atas;
}

Cobalah sendiri »

Latar Belakang - Properti Singkatan

Seperti yang dapat Anda lihat dari contoh di atas, ada banyak sifat yang perlu dipertimbangkan ketika berhadapan dengan latar belakang.

Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti dalam satu properti tunggal. Ini disebut properti steno.

Properti singkatan untuk latar belakang hanya "background":
contoh
body {
     background: url #ffffff ("img_tree.png") no-ulangi kanan atas;
}

styling

Tampilan tabel HTML dapat sangat ditingkatkan dengan CSS:
Korespondensi Perusahaan Negara
Alfreds Futterkiste Maria Anders Jerman
Berglunds snabbköp Christina Berglund Swedia
Centro comercial Montezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Pulau Perdagangan Helen Bennett Inggris
Königlich Essen Philip Cramer Jerman
Tertawa Bacchus Winecellars Yoshi Tannamuri Kanada
Magazzini Alimentari Riuniti Giovanni Rovelli Italia
Utara / Selatan Simon Crowther Inggris
Paris spécialités Marie France Bertrand
The Big Cheese Liz Nixon USA
Vaffeljernet Palle Ibsen Denmark

tabel Borders

Untuk menentukan batas tabel dalam CSS, menggunakan properti perbatasan.

Contoh di bawah ini menetapkan batas hitam untuk meja, th, dan elemen td:
contoh
tabel, th, td {
    border: 1px solid hitam;
}

Cobalah sendiri »

Perhatikan bahwa tabel dalam contoh di atas memiliki batas ganda. Hal ini karena kedua meja dan th / elemen td memiliki batas yang terpisah.

Untuk menampilkan perbatasan tunggal untuk meja, menggunakan properti border-collapse.
runtuh Borders

Properti border-collapse mengatur apakah perbatasan tabel runtuh ke dalam perbatasan tunggal atau terpisah:
contoh
tabel {
     border-collapse: collapse;
}

tabel, th, td {
     border: 1px solid hitam;
}

Cobalah sendiri »

Tabel Lebar dan Tinggi

Lebar dan tinggi tabel didefinisikan oleh lebar dan tinggi sifat.

Contoh di bawah ini menetapkan lebar tabel sampai 100%, dan tinggi elemen th ke 50px:
contoh
tabel {
     width: 100%;
}

th {
     height: 50px;
}

Cobalah sendiri »

Tabel Teks Keselarasan

Teks dalam tabel sejajar dengan text-align dan properti vertical-align.

Properti text-align menetapkan alignment horisontal, seperti kiri, kanan, atau tengah:
contoh
td {
     text-align: right;
}

Cobalah sendiri »

Properti vertical-align menetapkan alignment vertikal, seperti atas, bawah, atau tengah:
contoh
td {
     height: 50px;
     vertical-align: bottom;
}

Cobalah sendiri »

tabel Padding

Untuk mengontrol ruang antara perbatasan dan konten dalam sebuah tabel, menggunakan properti padding di td dan th elemen:
contoh
td {
     padding: 15px;
}

Cobalah sendiri »

tabel Warna

Contoh di bawah ini menentukan warna perbatasan, dan warna teks dan latar belakang elemen th:
contoh
meja, td, th {
     border: 1px solid hijau;
}

th {
     background-color: green;
     warna: putih;
}

Link

Link CSS
«Sebelumnya
Tonton video tutorial ini
Next Chapter »

Link dapat ditata dengan cara yang berbeda.
Link styling

Link dapat ditata dengan properti CSS (misalnya warna, font-family, latar belakang, dll).

Selain itu, link bisa ditata secara berbeda tergantung pada apa negara mereka berada di.

Empat link negara adalah:

     a: link - normal, link yang belum dikunjungi
     a: visited - link pengguna telah mengunjungi
     a: hover - link ketika mouse pengguna di atasnya
     a: active - link saat itu diklik

contoh
/ * Link yang belum dikunjungi * /
a: link {
     color: # FF0000;
}

/ * Link yang dikunjungi * /
a: visited {
     color: # 00FF00;
}

/ * Mouse pada link * /
a: hover {
     color: # FF00FF;
}

/ * Link yang dipilih * /
a: active {
     color: # 0000FF;
}

Cobalah sendiri »

Ketika menetapkan gaya untuk beberapa negara Link, ada beberapa aturan agar:

     a: hover harus datang setelah a: link dan a: visited
     a: aktif harus datang setelah: hover

Link Umum Styles

Dalam contoh di atas link berubah warna tergantung pada apa negara itu dalam.

Mari kita pergi melalui beberapa cara umum lain untuk link gaya:
Dekorasi teks

Properti text-decoration banyak digunakan untuk menghilangkan garis bawah dari link:
contoh
a: link {
     text-decoration: none;
}

a: visited {
     text-decoration: none;
}

a: hover {
     text-decoration: underline;
}

a: active {
     text-decoration: underline;
}

Cobalah sendiri »
Warna Latar Belakang

Properti background-color menentukan warna latar belakang untuk link:
contoh
a: link {
     background-color: # B2FF99;
}

a: visited {
     background-color: # FFFF85;
}

a: hover {
     background-color: # FF704D;
}

a: active {
     background-color: # FF704D;
}

Media

Jenis CSS Media
«Sebelumnya
Next Chapter »

Dengan menggunakan aturanmedia, sebuah situs web dapat memiliki tata letak yang berbeda untuk layar, cetak, ponsel, tablet, dll
Jenis Media

Beberapa properti CSS hanya dirancang untuk media tertentu. Misalnya "suara-family" properti dirancang untuk agen pengguna aural. Beberapa properti lainnya dapat digunakan untuk jenis media yang berbeda. Misalnya, "font-size" properti dapat digunakan untuk kedua media layar dan cetak, tapi mungkin dengan nilai yang berbeda. Dokumen biasanya membutuhkan font-size lebih besar pada layar daripada di atas kertas, dan sans-serif font yang mudah dibaca di layar, sedangkan font serif lebih mudah dibaca di atas kertas.
Aturanmedia

Themedia Aturan memungkinkan aturan gaya yang berbeda untuk media yang berbeda dalam style sheet yang sama.

Gaya dalam contoh di bawah ini memberitahu browser untuk menampilkan 14 piksel Verdana font pada layar. Tetapi jika halaman dicetak, maka akan dalam font 20 piksel, dan dalam warna merah:
contoh
Layarmedia {
     p {
         font-family: Verdana, sans-serif;
         font-size: 14px;
     }
}

media cetak {
     p {
         font-size: 20px;
         color: red;
     }
}

Cobalah sendiri »

Jenis Media lain
Media Jenis Deskripsi
semua Digunakan untuk semua perangkat jenis media
aural Digunakan untuk berbicara dan synthesizer suara
braille Digunakan untuk perangkat umpan balik taktil braille
embossed Digunakan untuk paged printer braille
genggam Digunakan untuk perangkat kecil atau genggam
mencetak Digunakan untuk printer
Proyeksi Digunakan untuk presentasi yang diproyeksikan, seperti slide
Layar Digunakan untuk layar komputer
tty Digunakan untuk media menggunakan karakter kotak fixed-pitch, seperti teletypes dan terminal
tv Digunakan untuk televisi-jenis perangkat