Tuesday, January 16, 2018

Belajar HTML (part 2)

WARNA
Apabila anda ingin mendesign halaman website anda dengan menggunakan warna tertentu sebagai latar belakang maka anda dapat menggunakan atribut style="background-color: color" pada tag <body>.
     <body style="background-color: white">
atau
     <body style="background-color: #FFFF00">
atau
     <body style="background-color: rgb(255,0,255)">
sedangkan jika ingin merubah warna teks, gunakan style="color: color". misalnya :
     <body style="background-color: yellow; color: red">


BACKGROUND GAMBAR
Selain warna, website anda juga dapat diperindah dengan menggunakan gambar sebagai background atau latar belakang. Cukup gunakan style=”background-image: url(namafile.jpg)”. namafile.jpg diganti sesuai dengan url file gambar yang diinginkan.


MENAMPILKAN GAMBAR
Pada kondisi tertentu, kita juga ingin mengisi gambar pada website. Prosesnya cukup sederhana dengan menggunakan tag <img> diikuti oleh atribut src untuk mencari lokasi file.
Contoh penggunaan :

     <imgsrc=”foto.jpg”></img>

Tidak sampai di situ saja, gambar itu juga dapat kita modifikasi agar menjadi link dengan mengapit tag <img> dengan tag <a>
Contoh penggunaan :

     <a href=”http://pustakademik.co.id”>
          <imgsrc=”pustakademik.png”></img
     </a>


MENAMPILKAN AUDIO DAN VIDEO
Selain Gambar, kita juga dapat menambahkan audio dan video. Caranya mirip dengan menampilkan gambar, hanya saja menggunakan tag <video> untuk menampilkan video dan <audio> untuk menampilkan audio serta membutuhkan atribut src untuk menentukan lokasi file video tersebut.
Contoh Penggunaan :

     <video src=”film.ogv”></video>
     <audio src=”lagu.mp3”></audio>


TABEL
Untuk membuat tabel, ada beberapa tag yang harus dipakai secara struktural. Tag-tag tersebut sebagai berikut :
·         <table> untuk memulai proses pembuatan tabel
·         <tr> untuk baris
·         <td> untuk kolom
Contoh penggunaan :

     <table>
          <tr>
               <td>baris pertama, kolom pertama</td>
               <td>baris pertama, kolom kedua</td>
               <td>baris pertama, kolom ketiga</td>
          </tr>
          <tr>
               <td>baris kedua, kolom pertama</td>
               <td>baris kedua, kolom kedua</td>
               <td>baris kedua, kolom ketiga</td>
          </tr>
          <tr>
               <td>baris ketiga, kolom pertama</td>
               <td>baris ketiga, kolom kedua</td>
               <td>baris ketiga, kolom ketiga</td>
          </tr>
     </table>




No comments:

Post a Comment