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;margin-left:20px;”>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>
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>

Tag HTML Style

TagDeskripsi
<style>mendeskripsikan informasi style dari dokumen
<link>Mendeskripsikan hubungan antara dokumen dengan file eksternal
HTML GAMBAR
Tag HTML Gambar
TagDeskripsi
<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 :
TagDescription
<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

Komentar

Postingan populer dari blog ini

Penilaian (Definisi, Prinsip dan Tujuan)

Penilaian Portofolio (Definisi, Karakteristik, Kelebihan dan Kekurangan)