Pemrograman HTML9

TABEL

Untuk membuat tabel pada halaman html kita gunakan tag :

        -->tag awalpembuatan table

<tr>             -->tag untuk mebuat baris

            -->penutup tag kolom

tr>             -->penutup tag baris

-->tag untuk membuat kolom

          -->penutup tag table

Hasil :

Untuk menambah jumlah kolom tinggal kita tambah menjadi :

                  -->tag awalpembuatan table

<tr>                       -->tag untuk mebuat baris

                          -->penutup tag kolom 1

<td> kolom2 baris 1  -->tag untuk membuat kolom 2
                                -->penutup tag kolom 2

tr>                           -->penutup tag baris

kolom1 baris 1    -->tag untuk membuat kolom 1

                          -->penutup tag table

Hasil :

Kolom 1 baris 1

Kolom 2 baris 2

Untuk menambah jumlah baris tinggal kita tambah menjadi :

         -->tag awalpembuatan table

<tr>                                 -->tag untuk mebuat baris ke1

                                -->penutup tag kolom 1

<td>kolom 2 baris 1             -->tag untuk membuat kolom 2
                                    -->penutup tag kolom 2

tr>                                  -->penutup tag baris

<tr>                           -->tag untuk membuat baris 2

                                     -->penutup tag kolom 1

<td>kolom 2  baris 2            -->tag untuk membuat kolom 2
                                   -->penutup tag kolom 2

tr>                                  -->penutup tag baris

kolom 1 baris1             -->tag untuk membuat kolom 1

kolom 2  baris 1           -->tag untuk membuat kolom 1

                                -->penutup tag table

Hasil:

Kolom 1 baris 1	Kolom 2 baris 1
Kolom 1 baris 2	Kolom 2 baris 2

Untuk mengatur lebar dan tinggi tabel tinggal kita tambah menjadi :

width=”500” height=”200”>         -->tag awalpembuatan table dengantinggi 200 pixel danlebar 500 pixel

<tr>                                 -->tag untuk mebuat baris ke1

                                -->penutup tag kolom 1

<td>kolom 2 baris 1             -->tag untuk membuat kolom 2
                                    -->penutup tag kolom 2

tr>                                  -->penutup tag baris

<tr>                           -->tag untuk membuat baris 2

                                     -->penutup tag kolom 1

<td>kolom 2  baris 2            -->tag untuk membuat kolom 2
                                   -->penutup tag kolom 2

tr>                                  -->penutup tag baris

kolom 1 baris1             -->tag untuk membuat kolom 1

kolom 2  baris 1           -->tag untuk membuat kolom 1

                                -->penutup tag table

Hasil:

Kolom 1 baris 1	Kolom 2 baris 1
Kolom 1 baris 2	Kolom 2 baris 2

Untuk mengatur lebar dan tinggi masing-masing baris dan kolom tinggal kita tambah menjadi :

         -->tag awalpembuatan table dengantinggi 200 pixel danlebar 500 pixel

<tr height=”50”>                                 -->tag untuk mebuat baris ke1 dengan tinggi 50 pixel

                                -->penutup tag kolom 1 

                                    -->penutup tag kolom 2

tr>                                  -->penutup tag baris

<tr height=”150”>                           -->tag untuk membuat baris 2 dengan tinggi 150 pixel

                                     -->penutup tag kolom 1             "-_

<td>kolom 2  baris 2            -->tag untuk membuat kolom 2        "-_           
                                   -->penutup tag kolom 2      -----------"---> Tak usah diatur karena akan mengikuti kolom diatasnya

tr>                                  -->penutup tag baris

width=”100”>kolom 1 baris1             -->tag untuk membuat kolom 1 dengan lebar 100 pixel

width=”400”>kolom 2 baris 1             -->tag untuk membuat kolom 2  dengan lebar 400 pixel

kolom 2  baris 1           -->tag untuk membuat kolom 1 -_

                                -->penutup tag table

Hasil:

Kolom 1 baris 1	Kolom 2 baris 1
Kolom 1 baris 2	Kolom 2 baris 2

 Ket :

-          Panjang atau Lebar dapat ditulis dalam pixel dan persen

Untuk mengatur border tabel tinggal kita tambah menjadi :

border=”2” color=”red  width=”500” height=”200”>         -->tag awalpembuatan table dengantinggi 200 pixel danlebar 500 pixel

<tr>                                 -->tag untuk mebuat baris ke1

                               -->penutup tag kolom 1

<td>kolom 2 baris 1             -->tag untuk membuat kolom 2
                                    -->penutup tag kolom 2

tr>                                  -->penutup tag baris

<tr>                           -->tag untuk membuat baris 2

                                     -->penutup tag kolom 1

<td>kolom 2  baris 2            -->tag untuk membuat kolom 2
                                   -->penutup tag kolom 2

tr>                                  -->penutup tag baris

kolom 1 baris1             -->tag untuk membuat kolom 1

kolom 2  baris 1           -->tag untuk membuat kolom 1

                                -->penutup tag table

Hasil:

Kolom 1 baris 1	Kolom 2 baris 1
Kolom 1 baris 2	Kolom 2 baris 2

Ket :

-          Untuk menghilangkan border kita beri nilai border = 0

-          Warna dapat ditulis dalam bahasa inggris maupun hexadesimal

Read More

Pemrograman HTML8

TABEL

Untuk membuat tabel pada halaman html kita gunakan tag :

        -->tag awal pembuatan table

             -->tag untuk mebuat baris
              -->tag untuk membuat kolom
            -->penutup tag kolom

             -->penutup tag baris
          -->penutup tag table

Hasil :

Untuk menambah jumlah kolom tinggal kita tambah menjadi :

                  -->tag awal pembuatan table

                       -->tag untuk mebuat baris
kolom1 baris 1    -->tag untuk membuat kolom 1
                          -->penutup tag kolom 1

kolom2 baris 1  -->tag untuk membuat kolom 2
                                -->penutup tag kolom 2

                           -->penutup tag baris
                         -->penutup tag table

Hasil :

Kolom 1 baris 1

Kolom 2 baris 2

Untuk menambah jumlah baris tinggal kita tambah menjadi :

         -->tag awal pembuatan table

                                 -->tag untuk mebuat baris ke1
kolom 1 baris1             -->tag untuk membuat kolom 1
                                -->penutup tag kolom 1

kolom 2 baris 1             -->tag untuk membuat kolom 2
                                    -->penutup tag kolom 2

                                  -->penutup tag baris

                           -->tag untuk membuat baris 2
kolom 2  baris 1           -->tag untuk membuat kolom 1
                                     -->penutup tag kolom 1

kolom 2  baris 2            -->tag untuk membuat kolom 2
                                   -->penutup tag kolom 2

                                  -->penutup tag baris
                                -->penutup tag table

Hasil:

Kolom 1 baris 1	Kolom 2 baris 1
Kolom 1 baris 2	Kolom 2 baris 2

Untuk mengatur lebar dan tinggi tabel tinggal kita tambah menjadi :

width=”500” height=”200”-->         -->tag awal pembuatan table dengan tinggi 200 pixel dan lebar 500 pixel

                                 -->tag untuk mebuat baris ke1
kolom 1 baris1             -->tag untuk membuat kolom 1
                                -->penutup tag kolom 1

kolom 2 baris 1             -->tag untuk membuat kolom 2
                                    -->penutup tag kolom 2

                                  -->penutup tag baris

                           -->tag untuk membuat baris 2
kolom 2  baris 1           -->tag untuk membuat kolom 1
                                     -->penutup tag kolom 1

kolom 2  baris 2            -->tag untuk membuat kolom 2
                                   -->penutup tag kolom 2

                                  -->penutup tag baris
                                -->penutup tag table

Hasil:

Kolom 1 baris 1	Kolom 2 baris 1
Kolom 1 baris 2	Kolom 2 baris 2

Untuk mengatur lebar dan tinggi masing-masing baris dan kolom tinggal kita tambah menjadi :

         -->tag awal pembuatan table dengan tinggi 200 pixel dan lebar 500 pixel

height=”50”-->                                 -->tag untuk mebuat baris ke1 dengan tinggi 50 pixel
height=”150”-->                           -->tag untuk membuat baris 2 dengan tinggi 150 pixel
kolom 2  baris 1           -->tag untuk membuat kolom 1
                                     -->penutup tag kolom 1

kolom 2  baris 2            -->tag untuk membuat kolom 2                   
                                   -->penutup tag kolom 2                                (tak usah diatur karena akan mengikuti kolom diatasnya)

                                  -->penutup tag baris
                                -->penutup tag table

Hasil:

width=”100”-->kolom 1 baris1             -->tag untuk membuat kolom 1 dengan lebar 100 pixel                                 -->penutup tag kolom 1	width=”400”-->kolom 2 baris 1             -->tag untuk membuat kolom 2  dengan lebar 400 pixel                                     -->penutup tag kolom 2                                   -->penutup tag baris

Kolom 1 baris 1	Kolom 2 baris 1
Kolom 1 baris 2	Kolom 2 baris 2

 Ket :

-         Panjang atau Lebar dapat ditulis dalam pixel dan persen

Untuk mengatur border tabel tinggal kita tambah menjadi :

border=”2” color=”red  width=”500” height=”200”-->         -->tag awal pembuatan table dengan tinggi 200 pixel dan lebar 500 pixel

                                 -->tag untuk mebuat baris ke1
kolom 1 baris1             -->tag untuk membuat kolom 1
                               -->penutup tag kolom 1

kolom 2 baris 1             -->tag untuk membuat kolom 2
                                    -->penutup tag kolom 2

                                  -->penutup tag baris

                           -->tag untuk membuat baris 2
kolom 2  baris 1           -->tag untuk membuat kolom 1
                                     -->penutup tag kolom 1

kolom 2  baris 2            -->tag untuk membuat kolom 2
                                   -->penutup tag kolom 2

                                  -->penutup tag baris
                                -->penutup tag table

Hasil:

Kolom 1 baris 1	Kolom 2 baris 1
Kolom 1 baris 2	Kolom 2 baris 2

Ket :

-         Untuk menghilangkan border kita beri nilai border = 0

-         Warna dapat ditulis dalam bahasa inggris maupun hexadesimal

Read More

Pemrograman HTML7

Image

Untuk menyisipkan image atau gambara pada halaman web kita gunakan tag :
<img src=”gambar yang akan ditampilkan”>

Contoh:

<html>

<body>

<img src=”google.gif”>

hasilnya

gambar diatas menggunakan ukuran seperti pada gambar aslinya, untuk merubah ukuran gambar ke ukuran yang kita inginkan kita gunakan tag :

<img src=”google.gif” width=”200” height=”100”>

Hasilnya menjadi :

Untuk menambahka border pd image kita tambahkan :

<img src=”google.gif” width=”200” height=”100” border=”1”>

Hasilnya menjadi :

Gambar diatas adalah jika gambar berada satu folder dengan file html namun :

·        jika gambar terdapat pada situs web lain maka kita tinggal menulis address link image tersebut

·        Jika gambar terletak pada folder yang berbeda namun masih satu folder denagn halaman html maka kita menuliskan <img src=”nama folder/nama gambar”>

·        Jika gambar terletak pada folder yang satu tingkat diatas folder tempat file html maka kita tuliskan <img src=”../nama folder/nama gambar”>

·        nama gambar ditulis beserta file ekstensinya  missal : jpg, gif, png, bmp, dll

·        Apa bila gambar ingin dijadikan link maka tag gambar diletakan diantara tag untuk link contoh :

href=”www.google.com">                

src=”google.gif” width=”200” height=”100”>

Read More

Pemrograman HTML6

Link

Link adalah sebuah teks atau gambar yang bila di-klik akan membawa anda ke bagian lain dari dokumen web. Untuk membuat sebuah teks atau gambar menjadi sebuah link, kita lakukan dengan tagyg dituju>nama link penutup .

Contoh link yang menuju ke situs lain: google.com Inilah kode sumbernya:

google.com

Berdasarkan lokasi tujuannya, link dapat dibedakan atas: 

1.                  Link yang menuju ke homepage (halaman pertama) dari situs lain, cukup dituliskan alamat URL dari website tersebut, misalnya: href="http://www.situs.com". 

2.                  Link yang menuju ke halaman lain dalam situs lain, maka harus kita tuliskan alamat URL dan lokasi filenya. Misalnya : href="http://www.situs.com/sini/situ.htm".

3.                  Link yang menuju ke halaman lain dalam situs yang sama, maka cukup dituliskan lokasi filenya, tanpa menuliskan alamat URL situs itu. Dalam hal ini ada beberapa kemungkinan:

a.                    Bila file tersebut berlokasi pada folder yang sama dengan file dari link tersebut maka cukup dituliskan nama filenya, misalnya: href="freeware1.htm". 

b.                    Bila file yang dituju itu berada dalam folder yang lain di bawah folder yang ditempati oleh link tersebut, maka harus dituliskan nama foldernya. Misalnya: href="javascript/js001.htm".

c.                    Sedangkan bila file yang dituju itu berada dalam folder yang lain di atas folder yang ditempati oleh file dari link tersebut maka dituliskan seperti berikut: href="../rainbow.gif".

d.                    Bila file tersebut letaknya dua tingkat di atas maka dituliskan dua kali titik dua seperti ini: href="../../rainbow.gif" dan seterusnya.

4.                  Untuk membuat link yang menuju ke bagian tertentu dari sebuah halaman web, sebelumnya kita harus memberi nama pada tempat/lokasi yang akan dituju itu dengan mencantumkan tag bagian"> pada baris yang akan dituju itu. Setelah itu barulah kita bisa membuat link yang menuju ke bagian tersebut. Dalam hal ini ada dua kemungkinan.

a.       Bila tempat yang dituju itu terdapat dalam halaman yang sama dengan link tersebut maka cukup dituliskan nama lokasi yang dituju itu. Misalnya: href=#bagian.

b.      Bila tempat yang dituju itu terletak pada halaman yang lain maka harus dituliskan nama file dari halaman itu baru nama tempatnya. Misalnya: href="lain.htm#bagian". 

5.                  Link yang mengarah ke sebuah file yang bukan file HTML misalnya file program, audio, image, dan lain-lain cara penulisannya sama saja caranya dengan file HTML seperti pada point 1, 2 dan 3 di atas. 

6.                  Link yang berisi alamat email dituliskan seperti berikut:

href="mailto:ryzal.thered@gmail.com".

Cara browser memunculkan halaman tujuan ini ada dua macam.

1. Ditampilkan pada jendela yang sama. Artinya, halaman tempat link itu akan digantikan oleh halaman yang dituju oleh link tersebut. Ini merupakan cara pemunculan default.
2. Ditampilkan pada jendela yang lain. Artinya, akan muncul jendela baru yang menampilkan halaman yang dituju. Untuk membuat link semacam ini, kita harus menambahkan atribut TARGET="_blank" dalam tag . Contoh: href="webpage.htm" target="_blank">.

Read More

Pemrograman HTML5

Bullet and Numbering

Ada dua macam daftar  yaitu daftar  tak berurut (bullet) dan daftar  berurut (numbering).   pertama

•  pertama
•  kedua
•  ketiga

kodenya:
<ul>
<li>pertamali>
<li> keduali>
<li> ketigali>
ul>

ket :

untuk bentuk dari bullet kita dapat menentukan sendiri dengan menambahkan tag type setelah <ul, contoh :

<ul type=”square”>        sebenarnya ada tiga tipe yaitu (disc =    ), (square =    ), dan (circle =   )
<li>pertamali>
<li> keduali>
<li> ketigali>
ul>

Hasilnya

• pertama
•  kedua
•  ketiga

Contoh daftar  berurut (numbering):

1.  pertama
2.  kedua
3.  ketiga

kode sumber untuk daftar  berurut di atas:

<ol>
<li> pertamali>
<li> keduali>
<li> ketigali>
ol>

ket :

untuk bentuk dari bullet kita dapat menentukan sendiri dengan menambahkan tag type setelah <ul  dan tipenya dapat berupa huruf a(a.), a besar(A.), angka romawi (IV), atau angka biasa(1) ,contoh :

<ol type=”I”>
<li> pertamali>
<li> keduali>
<li> ketigali>
ol>

Hasilnya :

        I.      pertama

     II.       kedua

   III.       ketiga

Kita pun dapat membuat daftar  bertingkat atau daftar  di dalam daftar . Contohnya sebagai berikut:

<ul>
<li> pertamali>

<li> keduali>
<ul>
<li>sub  pertamali>
<li>sub  keduali>
<ul>
<li>sub sub  pertamali>
<li>sub sub  keduali>
<li>sub sub  ketigali>
ul>
<li>sub  ketigali>
ul>
<li> ketigali>
ul>

Hasilnya :

·        pertama

·         kedua

o       sub  pertama

o       sub  kedua

§         sub sub  pertama

§         sub sub  kedua

§         sub sub  ketiga

o       sub  ketiga

·        ketiga

Read More