Belajar HTML chapter 3 (Gambar, Tabel, Pengenalan CSS)
masih melanjutkan pada postingan sebelumnya, pada kesempatan kali ini saya akan memperkenalkan tag-tag html untuk gambar, tabel dan sedikit perkenalan tentang css. Daripada banyak basa basi kita langsung saja.
HTML style- CSS
CSS atau cascading style sheet digunakan untuk memperindah web dan digunakan untuk HTML style.
contoh :
maka hasilnya :
CSS dapat ditambahkan pada HTML dengan cara :
- Inline : menggunakan atribut style pada html
- Internal : menggunakan elemen <style> pada bagian <head>
- eksternal : dengan membuat file css terpisah dari file html
Penggunaan css dengan cara inline :
untuk mengunakan cara ini tinggal menyisipkan kode css di bagian atribut,misal :
<p style=”color:blue;”>Ini adalah paragraf</p>
contoh :
hasilnya :
Penggunaan css dengan cara internal :
cara ini menyisipkan css di bagian head,misal :
<head>
<style type=”text/css”>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<style type=”text/css”>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
Penggunaan css dengan cara eksternal :
cara ini harus menggunakan atribut <link> yang berada di bagian <head> untuk memanggil file css yang telah dibuat, misal :
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
Tag HTML Style
| Tag | Deskripsi |
|---|---|
| <style> | mendeskripsikan informasi style dari dokumen |
| <link> | Mendeskripsikan hubungan antara dokumen dengan file eksternal |
HTML GAMBAR
Tag HTML Gambar
| Tag | Deskripsi |
|---|---|
| <img> | Mendeskripsikan gambar |
| <map> | Mndeskripsikan gambar berupa peta |
| <area> | Mendeskripsikan daerah yang dapat di klik pada peta |
Penggunaan atribut pada HTML gambar :
scr : berfungsi untuk memanggil gambar yang ingin ditampilkan
<img scr=”sopyan.blog.upi.edu”> atau
<img scr=”sopyan.jpg”>
alt : Untuk memberi nama pada gambar yang apabila gambar tidak muncul
maka nama yang akan muncul
<img src=”sopyan.gif” alt=”sopyan”>
widht dan height : untuk merubah ukuran gambar.
<img src=”pulpit.jpg” alt=”Pulpit rock” width=”304″ height=”228″>
HTML TABEL
Tag HTML Tabel :
| Tag | Description |
|---|---|
| <table> | Mendeskripsikan sebuah tabel |
| <th> | Mendeskripsikan header tabel |
| <tr> | mendeskripsikan baris sebuah tabel |
| <td> | mendeskripsikan kolom pada tabel |
| <caption> | mendeskripsikan judul tabel |
| <colgroup> | Mendefinisikan sekelompok kolom dalam sebuah tabel, untuk memformat |
| <col> | Tentukan nilai atribut untuk satu atau lebih kolom dalam sebuah tabel |
| <thead> | Grup isi header dalam sebuah tabel |
| <tbody> | Grup isi tubuh dalam tabel |
| <tfoot> | Grup isi footer dalam sebuah tabel |
contoh tabel :
hasilnya :
sekian dulu untuk postingan kali ini. wasalamualaikum wr wb.
Sumber :http://w3schools.com
Posting Komentar untuk "Belajar HTML chapter 3 (Gambar, Tabel, Pengenalan CSS)"