modul web desain

Document Sample
modul web desain Powered By Docstoc
					                                                        Web Design Module



                                                              Bab 1
                                  Pengenalan HTML
Apa Itu Dokumen HTML ?
               HTML kependekan dari Hyper Text Markup Language.
      Dokumen HTML adalah text murni yang dapat dibuat dengan editor
      text sembarang. Dokumen ini dikenal sebagai web page. Dokumen
      HTML merupakan dokumen yang disajikan dalam browser surfer.
      Dokumen ini berisi informasi ataupun interface aplikasi di dalam
      Internet.


Penamaan Dokumen
               Penamaan pada dokumen HTML dengan menambahkan sebuah
      ekstensi ―.htm‖ atau ―.html‖, ada pula yang sera otomatis tersimpan
      sebagai html.


Definisi Elemen
               Dokumen HTML disusun oleh elemen-elemen. ―Elemen‖
      merupakan istilah bagi komponen-komponen dasar pembentuk
      dokumen HTML. Beberapa contoh elemen adalah: head, body, table,
      paragraf, dan list.


Definisi Tag
               Untuk menandai berbagai elemen dalam suatu dokumen HTML,
      kita menggunakan tag. Tag HTML terdiri atas sebuah tanda lebih dari
      (―<‖), sebuah mana tag/elemen, dan ditutup dengan tanda kurang dari
      (―>‖).    Tag   pada    umumnya    berpasangan    (misalnya   <H1>
      dengan</H1>), tag yang menjadi pasangannya selalu diawali dengan
      tanda garis miring (―/‖). Tag yang pertama menunjukkan tag awal yang
      berarti awal elemen, dan yang kedua menunjukkan tag akhir, berarti
      akhir elemen.
               Ada beberapa elemen yang tidak mengharuskan tagnya ditulis
      berpasangan, tag tersebut diantaranya adalah:

                                                                      1
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                         Web Design Module



                   Paragraf dengan tag <p>
                   Ganti baris dengan tag <br>
                   Garis datar (horizontal) dengan tag <hr>
                   List item dengan tag <li>, dll


            Secara umum suatu elemen dalam dokumen HTML, yang
      dinyatakan dengan tagnya, dituliskan:
            <namatag> - </namatag>


Elemen HTML yang dibutuhkan
            Secara umum dokumen web dibagi menjadi dua section
      (bagian), yaitu section head dan section body. Sehingga setiap
      dokumen HTML harus mempunyai ola dasar sebagai berikut:
            <html>
            <head>
                    ... informasi tentang dokumen HTML
            </head>
            <body>
                    ... informasi yang ditampilkan dalam browser web
            </body>
            </html>


            Berikut contoh penulisan listing HTML:
            Listing 1.1
            contoh
            <!--contoh.html-->
            <html>
            <head>
            <title>Judul Halaman</title>
            </head>
            <body>
            Ini adalah hompage pertamaku.
            <b>Ini sekedar text lainnya</b>
            </body>
            </html>




                                                                       2
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module




                            Gambar 1.1 Contoh




                                                                     3
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module



                                                                Bab 2
                               Tag-tag Dasar HTML
Html
               Merupakan tag dasar yang mendefinisikan bahwa dokumen ini
        adalah dokumen HTML. Tag ini merupakan satu keharusan bagi
        pemmrograman web untuk menuliskannya sebagai tag pertama dalam
        okumen HTML.


Head
               Merupakan tag berikutnya setelah <html> untuk menuliskan
        keterangan tentang dokumen web yang akan ditampilkan.


Title
               Merupakan tag di dalam head yang harus dituliskan untuk
        memberikan judul/informasi pada caption browser web tentang topik
        atau judul dari dokumen yang ditampilkan dalam browser.


Body
               Merupakan section utama dalam dokumen web. Pada section ini
        semua dokumen yang akan ditampilkan di dalam browser harus
        dituliskan.


Paragraf
               Informasi yang disajikan dalam dokumen harus mengikuti
        kaidah-kaidah dalam penulisan. Misalnya pikiran utama disimpan
        dalam satu paragraf.
               Setiap paragraf harus dimulai dengan memberi tag <p>. Di
        akhir paragraf tidak diharuskan menuliskan </p> sebagai akhir
        paragraf. Setiap pergantian paragraf harus dimulai dengan <p>
        kembali.




                                                                      4
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module


            Listing 2.1
            Coba_minimum
            <!--coba_minimum.html-->
            <html>
            <head>
            <title>Sebuah contoh HTML sederhana</title>
            </head>
            <body>
            <p>HTML mudah dibuat.
            Selamat datang di dunia HTML.
            </body>
            </html>




                          Gambar 2.1 coba_minimum


            Contoh coba_minimum.html diatas menunjukan dokumen
      HTML sederhana yang hanya mempunyai informasi dalam sebuah
      paragraf.




                                                                     5
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module


            Listing 2.2
            Coba_paragraf
            <!--coba_paragraf.html-->
            <html>
            <head>
            <title>Contoh penggunaan tag paragraf</title>
            </head>
            <body>
            <p>Ini adalah paragraf.
            <p>Ini adalah paragraf.
            <p>Ini adalah paragraf.
            <p>Elemen paragraf ditandai dengan menggunakan tag p.
            </body>
            </html>




                          Gambar 2.2 coba_paragraf


            Pada browser diperlihatkan setiap paragraf akan ditampilkan
      dengan loncat satu baris. Jika text yang akan ditampilkan melebihi
      lebar window, maka secara otomatis text yang tidak cukup akan
      ditampilkan pada baris berikutnya.




                                                                     6
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                          Web Design Module


            Listing 2.3
            Coba_paragraf2
            <!--coba_paragraf2.html-->
            <html>
            <head>
            <title>Contoh tidak menggunakan tag paragraf</title>
            </head>
            <body>Ini text pertama dari paragraf.
            Yang ini baris kedua.
            Ini baris ketiga.
            Dan yang ini baris keempat, tapi
            panjang, supaya bisa dilihat apakah bisa pindah sendiri????
            </body>
            </html>




                          Gambar 2.3 coba_paragraf2


            Yang menjadi catatan disini adalah jika ingin mendefinisikan
      paragraf baru, maka kita harus menuliskan secara eksplisit tag <p>-
      nya. Tidak ada pengaruh kita melakukan ―enter‖ beberapa kali pun
      didalam editor, karena semuanya akan dianggap satu paragraf dengan
      sebelumnya.




                                                                          7
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module


Line Break
             Listing 2.4
             Coba_gantibaris
             <!--coba_gantibaris.html-->
             <html>
             <head>
             <title>Contoh ganti baris</title>
             </head>
             <body>Memotong <br>baris <br>dalam suatu
             <br>paragraf, <br>gunakan tag br.
             </body>
             </html>




                           Gambar 2.4 coba_gantibaris


             Kita dapat memaksakan ganti baris pada dukumen web. Ganti
      baris disini dimaksudkan hanya menyajikan informasi pada bris sendiri
      tetapi tidak berganti paragraf.


Heading
             Text dalam dokumen umumnya mempunyai judul topik, pada
      dokumen HTML judul ini dissebut heading. Heading tulisan akan
      ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading




                                                                       8
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module


      juga dimanfaatkan untuk menunjukkan tingkat keberartian dari text
      yang dituliskan.
            Ada 6 tingkat heading dalam HTML, dinomori dari 1 sampai 6.
      nomor 1 merupakan heading yang tebesar.


            Listing 2.5
            Coba_heading
            <!--coba_heading.html-->
            <html>
            <head>
            <title>Contoh Heading</title>
            </head>
            <body>
            <h1>Ini heading 1</h1>
            <h2>Ini heading 2</h2>
            <h3>Ini heading 3</h3>
            <h4>Ini heading 4</h4>
            <h5>Ini heading 5</h5>
            <h6>Ini heading 6</h6>
            <p> Gunakan tag heading hanya untuk heading.
            Jangan gunakan tag ini hanya sekedar untuk membuat suatu text
            menjadi lebih besar.
            </body>
            </html>




                                                                     9
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module




                          Gambar 2.5 coba_heading




Mengatur Letak Heading
            Tag heading mempunyai atribut yang digunakan untuk
      mengatur letak grading dalam baris – align. Alignment Heading:


                   Kiri – left
                   Tengah – center
                   Kanan – right




                                                                       10
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                            Web Design Module


            Listing 2.6
            Coba_heading2
            <!--coba_heading2.html-->
            <html>
            <head>
            <title>Contoh Heading dengan alignment</title>
            </head>
            <body>
            <h1 align="center">Heading 1 di tengah</h1>
            <p> Heading di atas diposisikan tengah baris.
            Heading di atas diposisikan tengah baris.
            Heading di atas diposisikan tengah baris.
            Heading di atas diposisikan tengah baris.
            <h1 align="right">Heading 1 di kanan</h1>
            <p> Heading di atas diposisikan kanan baris.
            Heading di atas diposisikan kanan baris.
            Heading di atas diposisikan kanan baris.
            Heading di atas diposisikan kanan baris.
            </body>
            </html>




                          Gambar 2.6 coba_heading2




                                                                         11
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module


Penggaris Mendatar
            Sebuah garis dapat disisipkan dalam dokumen web, umumnya
      digunakan sebagai pemisah antar bagian atau paragraf.
            Tag <hr> disisipkan pada tempat garis akan disisipkan dalam
      dokumen.
            Listing 2.7
            Coba_garis
            <!--coba_garis.html-->
            <html>
            <head>
            <title>Contoh Garis Mendatar</title>
            </head>
            <body>
            <p>Tag hr digunakan untuk mendefinisikan garis:
            <hr>
            <p>Yang ini paragraf.
            <hr>
            <p>Yang ini paragraf.
            <hr>
            <p>Yang ini paragraf.
            </body>
            </html>




                          Gambar 2.7 coba_garis


                                                                     12
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                           Web Design Module


Komentar
            Dalam suatu komentar informasi ada sebagian text dalam
      dokumen yang berfungsi sebagai catatan atau komentar terhadap
      dokumen itu sendiri. Catatan/komentar dalam dokumen ini tidak
      dapat ditampilkan dalam browser.
            Tag komentar dapat digunakanuntuk menyembunyikan sebagai
      dokumen web. Bisa jadi karena belum adanya kepastian dari isi
      dokumen yang akan dipublikasikan.
            Text yang berfungsi sebagai komentar disimpan dalam dokumen
      ditandai dengan tag <!—sebagai awal, kemudian diisi text komentar,
      dan tag --> sebagai tag akhir.
            Khusus tag komentar ini, tag penutup tidak diawali tanda garis
      miring.
            Listing 2.8
            Coba_komentar
            <!--coba_komentar.html-->
            <html>
            <head>
            <title>Contoh Penggunaan Komentar</title>
            </head>
            <body>
            <!-- Komentar ini tidak akan ditampilkan -->
            <p>Ini normal paragraf.
            </body>
            </html>




                          Gambar 2.8 coba_komentar




                                                                        13
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                         Web Design Module



                                                              Bab 3
                    Pemformatan Text HTML
             Text dalam dokumen web dapat diformat secara khusus untuk
      menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari
      text tersebut.


Pemformatan Text
             Beberapa pemformatan text:
                1. menebalkan huruf (bold)
                2. memiringkan huruf (italic)
                3. memberi tekanan pada text (emphaze)
                4. mengecilkan huruf
                5. superscript
                6. subscript
             contoh    ini   mendemonstrasikan   bagaimana    anda   dapat
      memformat text dalam seuatu dokumen HTML.
             Listing 3.1
             Coba_textformat
             <!--coba_textformat.html-->
             <html>
             <head>
             <title>Contoh Penggunaan Format Text</title>
             </head>
             <body>
             <b>Text ini ditebalkan</b>
             <br>
             <strong>Text ini tebal</strong>
             <br>
             <big>Text ini besar</big>
             <br>
             <em>text ini di emphase</em>
             <br>
             <i>Text ini miring/italic</i>
             <br>
             <small>Text ini kecil</small>

                                                                      14
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                         Web Design Module

            <br>
            Text ini berisi <sub>subscript</sub>
            <br>
            Text ini berisi <sup>superscript</sup>
            </body>
            </html>




                          Gambar 3.1 coba_textformat


Text Preformat
            Agar browser web menampilkan sesuai dengan dokumen web
      tersebut di dalam editor text, maka text yang bersangkutan harus diberi
      tanda tag <pre> diawalnya, dan </pre> di akhir text.
            Dengan        tag   <pre>,   yang      mempunyai    kepanjangan
      ―preformatted‖, text akan ditampilkan dalam browser dengan ukuran
      font dengan lebar-fix. Tag ini juga menjaga spasi, baris baru, dan tab
      sesuai dengan aslinya pada saatditampilkan dalam browser. Salah satu
      penggunaan dari pre ini adalah untuk menampilkan suatu source code
      program dalam web.
            Listing 3.2
            Coba_preformat
            <!--coba_preformat.html-->
            <html>


                                                                         15
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                           Web Design Module

            <head>
            <title>Contoh Penggunaan Tag Pre</title>
            </head>
            <body>
            <pre>
                    void node::remove()
                    {
                           if (prev)
                                  prev  next = next;
                           else if (parent)
                                  parent  setcontent(null);
                           if (next)
                                  next  prev = prev;
                           parent = null;
                    }
            </pre>
            </body>
            </html>




                          Gambar 3.2 coba_preformat


Computer Output
            Listing 3.3
            Coba_compoutput
            <!--coba_compoutput.html-->
            <html>


                                                                        16
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module

            <head>
            <title>Contoh Penggunaan Computer Output </title>
            </head>
            <body>
            <code>Computer code</code><br>
            <kbd>Input Keyboard</kbd><br>
            <pre>
            for i = 1 to 10
                     print i
            next i
            </pre><br>
            <tt>Text Teletype</tt><br>
            <samp>Text Sample</samp><br>
            <var>Variable Komputer</var><br>
            </body>
            </html>




                         Gambar 3.3 coba_compoutput


Address
            Dalam dokumen HTML disediakan secara khusus tag address.
      Dengan adanya tag ini maka penulisan alamat dapat distandarkan.
            Listing 3.4
            Coba_address
            <!--coba_address.html-->

                                                                        17
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module

            <html>
            <head>
            <title>Contoh Penggunaan Address</title>
            </head>
            <body>
            <address>
            Stikom Poltek<br>
            Jl. Brigjen Darsono No. 33a<br>
            Cirebon<br>
            Indonesia
            </address>
            </body>
            </html>




                          Gambar 3.4 coba_address


Singkatan
            Tag <abbr> dan tag <acronym> dapat digunakan untuk
      menyimpan data kepanjangan dari suatu singkatan yang ditampilkan
      dalam dokumen tersebut dengan atribut title.
            Listing 3.5
            Coba_abbrev
            <!--coba_abbrev.html-->
            <html>
            <head>
            <title>Contoh Penggunaan Abbrev</title>
            </head>


                                                                     18
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                         Web Design Module

            <body>
            <abbr title=”dan lain-lain”>dll</abbr><br>
            <acronym title=”World Wide Web”>WWW</acronym>
            <p>Pada beberapa browser atribut title dapat digunakan untuk
            menampilkan kepanjangan dari text singkatan/akronim tersebut
            apabila mouse berada di atasnya.
            </body>
            </html>




                         Gambar 3.5 coba_abbrev




                                                                       19
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                         Web Design Module



                                                               Bab 4
                        Entitas Karakter HTML
Pengertian
             Beberapa karakter mempunyai arti khusus dalam HTML, sepeti
      tanda lebih kecil (<) yang berarti awal tag HTML dan tanda lebih besar
      (>) yang berarti akhir tag HTML. Jika kita menginginkan browser
      menampilkan karakter-karakter tersebut, kita harus menyisipkan
      entitas karakter ke dalam source HTML.
             Entitas karakter mempunyai 3 bagian: sebuah ampersand (&),
      sebuah nama entitas atau sebuah # dan nomor entitas, dan terakhir
      adalah sebuah tanda titik koma (; / semicolon).
             Untuk menampilkan tanda lebih kecil (<) dalam sebuah HTML
      maka kita harus menuliskannya: &lt; atau &#60;


             Listing 4.1
             Coba_entitas
             <!--coba_entitas.html-->
             <html>
             <head>
             <title>Contoh Penggunaan Entitas</title>
             </head>
             <body><p>Untuk menuliskan suatu paragraf, maka kita harus
             menggunakan tag &lt;p&gt; sebelum paragraf tersebut mulai
             ditulis.
             </body>
             </html>




                                                                         20
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module




                         Gambar 4.1 coba_entitas


Entitas Karakter yang Sering Digunakan


                                                             Nomor
Hasil           Keterangan              Nama Entitas
                                                             Entitas
  ©               Copyright                 &copy;            &#169;
  ®          Registered trademark            &reg;            &#174;
  TM              Trademark                                  &#8482;
             Non-breaking space             &nbsp;            &#161;
  &               ampersand                 &amp;             &#38;
  «       Angle quotation mark (left)       &laquo;           &#171;
  »      Angle quotation mark (right)       &raquo;           &#187;
   ―              Tada kutip                &quot;            &#34;
  <               Lebih kecil                 &lt;            &#60;
  >              Lebih besar                 &gt;             &#61;
  ×               Tanda kali                &times;           &#215;
  ÷               Tanda bagi               &divide;           &#247;




                                                                       21
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                           Web Design Module



                                                                Bab 5
                                                     Link HTML

             Kelebihan utama dokumen HTML adalah kemampuannya untuk
       memberikan link dari satu text dan/atau gambar menuju ke dokumen
       atau bagian lain dalam suatu dokumen.


Tag Anchor
             HTML menggunakan tag <a> untuk membuat suatu link kepada
       dokumen lain dalam web.
             Ada tiga jenis link:
                   link relatif
                   link absolut
                   link dalam dokumen yang sama
             perbedaannya hanya pada letak dokumen yang menjadi linknya.


Link
             Listing 5.1
             Coba_link
             <!--coba_link.html-->
             <html>
             <head>
             <title>Contoh Penggunaan Link</title>
             </head>
             <body>
             <p><a href=”coba_entitas.html”>Text ini</a>
             merupakan link kepada suatu page dengan nama
             coba_entitas.html
             pada web site yang sama.
             <p><a href=”http://www.microsoft.com”>This text</a>
             is a link to a page on the world wide web.
             </body>
             </html>




                                                                        22
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module




                            Gambar 5.1 coba_link


Membuka Link untuk Window Baru
            Untuk melakukan link kepada page lain dengan membuka
      window baru sehingga kita tidak harus meninggalkan website kita yaitu
      dengan cara menambahkan atribut target.
            Listing 5.2
            Coba_linkbaru
            <!--coba_linkbaru.html-->
            <html>
            <head>
            <title>Contoh Penggunaan Link</title>
            </head>
            <body>
            <p><a href=”http://www.microsoft.com” target=”_blank”>
            Microsoft</a>
            <p> Jika anda menentukan atribut link to “_blank”, window akan
            dibuka pada window baru.
            </body>
            </html>




                                                                       23
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module




                        Gambar 5.2 coba_linkbaru




                                                                     24
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module



                                                             Bab 6
                                                     List HTML

             List merupakan bentuk yang umum yang biasa kita gunakan
       untuk mengurai daftar sesuatu.


List
             Listing 6.1
             Coba_list
             <!--coba_list.html-->
             <html>
             <head>
             <title>Contoh Penggunaan List</title>
             </head>
             <body>
             <h4>an Ordered List:</h4>
             <0l>
                     <li>Coffee</li>
                     <li>Tea</li>
                     <li>Milk </li>
             </ol>
             <h4>an Unordered List:</h4>
             <ul>
                     <li>Coffee</li>
                     <li>Tea</li>
                     <li>Milk </li>
             </ul>
             </body>
             </html>




                                                                     25
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module




                              Gambar 6.1 coba_list


Nested List
              List bullet dapat digunakan secara bersarang, maksudnya
      didalam list ada list lagi.
              Listing 6.2
              Coba_listnested
              <!--coba_listnested.html-->
              <html>
              <head>
              <title>Contoh Penggunaan List</title>
              </head>
              <body>
              <h4>A Nasted List:</h4>
              <ul>
                     <li>Coffee</li>
                     <li>Tea</li>
                            <ul>
                                    <li>Coffee</li>
                                    <li>Tea</li>


                                                                     26
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module

                          </ul>
                    <li>Milk </li>
            </ul>
            </body>
            </html>




                        Gambar 6.2 coba_listnested




                                                                     27
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module



                                                               Bab 7
                                              Image HTML

              Gambar di dalam suatu web page merupakan daya penarik bagi
      pengunjung suatu situs web. Setiap gambar butuh waktu tambahan
      untuk di download dan memperlambat awal penampilan suatu
      dokumen dalam browser. Karenanya hati-hatimemilih gambar dan
      menyertakannya kedalam suatu dokumen.
              Untuk menyertakan sebuah inline image dalam dokumen web
      adalah:
              <img src=”namaimage”>
              Dengan namaimage adalah URL dari file image tersebut.
              Listing 7.1
              Coba_image
              <!--coba_image.html-->
              <html>
              <head>
              <title>Contoh Penggunaan Image</title>
              </head>
              <body>
              <p>Gambar:<img src=”batman.jpg” width=”100” height=”150”>
              <p>Sebuah gambar bergerak:<img src=”dj.gif” width=”150”
              height=”100”>
              <p>Catatan! Sintak dari gamber bergerak dengar gambar yang
      tidak
              bergerak sama saja.
              <hr>
              </body>
              </html>




                                                                        28
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module




                          Gambar 7.1 coba_image


Alignment Image
            Listing 7.2
            Coba_imagealign
            <!--coba_imagealign.html-->
            <html>
            <head>
            <title>Contoh Penggunaan Image</title>
            </head>
            <body>
            <p>An image<img src=”dj.gif” width=”150” height=”100”
            align=”bottom”>in the text.
            <p>An image<img src=”dj.gif” width=”150” height=”100”
            align=”middle”>in the text.
            <p>An image<img src=”dj.gif” width=”150” height=”100”
            align=”top”>in the text.


                                                                     29
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module

            <p>Catatan! Alignment bottom adalah default alignment.
            <hr>
            </body>
            </html>




                       Gambar 7.2 coba_imagealign




                                                                     30
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                                Web Design Module



                                                                     Bab 8
                                                    Tabel HTML

               Tabel digunakan untuk menyajikan data dalam bentuk kolom
      dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan
      setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok
      data dalam satu kesatuan.
               Elemen-elemen tabel
       Elemen                                   Penjelasan
<table>...</table>           Mendefinisikan sebuah tabel dalam HTML.
<th>...</th>                 Mendefinisikan sebuah sel header tabel.
<caption>...</caption> Mendefinisikan tulisan untuk judul tabel.
<tr>...</tr>                 Mendefinisikan sebuah baris tabel dalam tabel.
<td>...</td>                 Mendefinisikan sebuah sel data dalam tabel.


               Listing 8.1
               Coba_tabel
               <!--coba_tabel.html-->
               <html>
               <body>
               <p>setiap tabel dimulai dengan sebuah tag table.<br>
               setiap baris dimulai dengan sebuah tag tr.<br>
               setiap kolom dimulai dengan sebuah tag td.<br>
               <h4>Satu kolom:</h4>
               <table border="1">
               <tr><td>100</td></tr>
               </table>
               <h4>Satu baris tiga kolom:</h4>
               <table border="1">
               <tr>
                       <td>100</td>
                       <td>200</td>
                       <td>300</td>
               </tr>
               </table>

                                                                              31
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module

            <h4>Dua baris tiga kolom:</h4>
            <table border="1">
            <tr>
                    <td>100</td>
                    <td>200</td>
                    <td>300</td>
            </tr>
            <tr>
                    <td>400</td>
                    <td>500</td>
                    <td>600</td>
            </tr>
            </table>
            </body>
            </html>




                          Gambar 8.1 coba_tabel




Tabel dengan Caption
            Listing 8.2
            Coba_tabelcaption
            <!--coba_tabelcaption.html-->

                                                                     32
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                         Web Design Module

            <html>
            <body>
            <h4>This table has a caption, and a thick border</h4>
            <table border="6">
            <caption>My Caption</caption>
            <tr>
                    <td>100</td>
                    <td>200</td>
                    <td>300</td>
            </tr>
            <tr>
                    <td>400</td>
                    <td>500</td>
                    <td>600</td>
            </tr>
            </table>
            </body>
            </html>




                       Gambar 8.2 coba_tabelcaption


Header
            Listing 8.3
            Coba_tabelheader
            <!--coba_tabelheader.html-->
            <html>


                                                                      33
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module

            <body>
            <h4>Table Headers:</h4>
            <table border="1">
            <tr>
                    <th>Name</th>
                    <th>Telephone</th>
                    <th> Telephone</th>
            </tr>
            <tr>
                    <td>Joe</td>
                    <td>224445</td>
                    <td>0811211211</td>
            </tr>
            </table>
            <h4>Vertical Headers::</h4>
            <table border="1">
            <tr>
                    <th>Name</th>
                    <td>Joe</td>
            </tr>
            <tr>
                    <th>Telephone</th>
                    <td>224445</td>
            </tr>
            <tr>
                    <th>Telephone</th>
                    <td>0811211211</td>
            </tr>
            </table>
            </body>
            </html>




                                                                     34
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module




                       Gambar 8.3 coba_tabelheader


Colspan dan Rowspan
            Listing 8.4
            Coba_tabelspan
            <!--coba_tabelspan.html-->
            <html>
            <body>
            <h4>Cell that spans two colums</h4>
            <table border="1">
            <tr>
                    <th>Name</th>
                    <th colspan=”2”>Telephone</th>
            </tr>
            <tr>
                    <td>Joe</td>
                    <td>224445</td>
                    <td>0811211211</td>
            </tr>


                                                                     35
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module

            </table>
            <h4> Cell that spans two rows:</h4>
            <table border="1">
            <tr>
                    <th>Name</th>
                    <td>Joe</td>
            </tr>
            <tr>
                    <th colspan=”2”>Telephone</th>
                    <td>224445</td>
            </tr>
            <tr>
                    <td>0811211211</td>
            </tr>
            </table>
            </body>
            </html>




                        Gambar 8.4 coba_tabelspan




                                                                     36
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module



                                                             Bab 9
                                             Frame HTML

            Elemen dalam HTML di gunakan untuk membangun web page
      yang memungkinkan penampilan beberapa web page ditampilkan
      dalam satu window browser.


Frame Kolom
            Listing 9.1
            Coba_framecols
            <!--coba_ framecols.html-->
            <html>
            <frameset cols="35%,35%,30%">
            <frame src="coba_tabelspan.html">
            <frame src="coba_tabelheader.html">
            <frame src="coba_tabelcaption.html">
            </html>




                          Gambar 9.1 coba_framecols




                                                                     37
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                         Web Design Module


Frame Baris
            Listing 9.2
            Coba_framerows
            <!--coba_ framerows.html-->
            <html>
            <frameset rows="35%,35%,30%">
            <frame src="coba_tabelspan.html">
            <frame src="coba_tabelheader.html">
            <frame src="coba_tabelcaption.html">
            </html>




                          Gambar 9.2 coba_framerows


Frame Campuran
            Listing 9.3
            Coba_framemix
            <!--coba_ framemix.html-->
            <html>
            <frameset rows="50%,50%">
                   <frame src="coba_tabelspan.html">
                   <frameset rows="30%,70%">
                            <frame src="coba_tabelheader.html">
                            <frame src="coba_tabelcaption.html">


                                                                      38
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module

                   </frameset>
            </frameset>
            </html>




                          Gambar 9.3 coba_framemix


Frame Inline
            Suatu frame di dalam suatu page HTML.
            Listing 9.4
            Coba_frameinline
            <!--coba_ frameinline.html-->
            <html>
            <iframe src="coba_tabelspan.html">
            </iframe>
            <p>Beberapa browser tidak mendukung iframe.
            </html>




                                                                     39
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                        Web Design Module




                      Gambar 9.4 coba_frameinline




                                                                     40
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                               Web Design Module



                                                                      Bab 10
                                                     Form HTML

               Formulir dalam HTML sangat diperlukan untuk memasukkan
        data ke dalam database. Tapi yang jadi masalah, HTML nggak bisa
        menangani        database.   Untuk    menangani     database    kita   bisa
        menggunakan script ASP, PHP.
               Beriku penulisan untuk pembuatan formulir:
               <form action="file_tujuan" method="post|get">
               ...
               </form>


Input
               Tag ini tak memerlukan tag penutup. Digunakan untuk meminta
        masukkan berupa text, password, penekanan tombol, dll. Atribut yang
        dipakai :
                        NAME="text" => mendefinisikan objek input. Musti di
                         berikan kecuali untuk type Submit dan reset.
                        SIZE="angka" => menentukan panjang kotak input
                         dalam karakter.
                        MAXLENGTH="angka"            =>   menentukan     panjang
                         karakter maksimum yang bisa dimasukkan.
                        VALUE="text" => untuk type text menentukan text
                         yang tertulis di kotak input, untuk type checkbox atau
                         radio merupakan nilai item yang dipilih. Untuk submit
                         atau reset merupakan tulisan pada tombol
                        CHECKED => Hanya untuk type checkbox dan radio
                         untuk menentukan pilihan yang terpilih secara otomatis
                         (default)
                        TYPE => menentukan type input yang dibuat.


               Type input yang dapat dibuat antara lain :


                                                                               41
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                                Web Design Module


   1. Text - digunakan untuk membuat kotak masukan text

        contoh type



   2. Password - digunakan untuk membuat masukan password dimana
      karakter yang dimasukkan akan berubah menjadi *

        ********



   3. CheckBox - digunakan untuk menerima masukkan pilihan lebih dari
      satu


           item 1

           item 2

           item 3

   4. Radio - untuk membuat daftar pilihan dan hanya boleh memilih salah
      satu.


           item 1

           item 2

           item 3

   5. Reset - Digunakan untuk menghapus daftar isian yang udah diisi oleh
      pengguna


       Reset



   6. Submit - digunakan sebagai tombol untuk mulai memproses masukkan
      pengunjung


       Submit




                   Inputan tersebut diletakkan diantara Tag <form> dan </form>.

                                                                                  42
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                           Web Design Module


Dropdown Menu
            Menu dropdown bisa menjadi alternatif penggunaan input
      radio. Tag yang diperlukan :
            <select name ="nama">
              <option value ="nilai1" selected>menu1
              < option value ="nilai2">menu2
              < option value ="nilai3">menu3
              <!--dan seterusnya...-->
            </select>



                     nama adalah nama objek masukan. Bisa apa aja tapi
                      ingat jangan menggunakan spasi, titik, atau koma.
                     VALUE adalah nilai yang akan dikirim bila pengunjung
                      memilih menu1.
                     SELECTED adalah menu yang terpilih secara otomatis.
                      Bila atribut ini tak dicantumkan, maka akan ditambahkan
                      satu baris kosong dan bila pengunjung memilihnya maka
                      berarti null atau tak memilih.


            Ada satu atribut lagi yaitu Size yang ditempatkan dalam tag
      SELECT. Berguna untuk menentukan berapa baris menu yang ingin
      ditampilkan. Bila atribut ini tak dicantumkan, maka default baris yang
      dicantumkan adalah satu baris.


            Script diatas akan menghasilkan menu berikut :
              menu1




Input Komentar
            Terkadang pengunjung ingin memberi komentar baik itu kritik,
      saran, hujatan, pujian, dll. Sebagai tuan rumah yang baik, kamoe kudu
      ngasih ruang buat mereka. Gunain aja tag berikut :
            <TEXTAREA COLS="angka"ROWS="angka">...</TEXTAREA>
            COLS - lebar text area dalam satuan karakter.
            ROWS - tinggi text area dalam satuan karakter.



                                                                          43
Juharna Hardianto, S.kom – Hyper Text Markup Language
                                                            Web Design Module


            Perhatikan contoh ini :
            <form>Isi komentar anda
            <textarea cols="35" rows="7">
            Komentar default disini
            </textarea>
            </form>


            Dan hasilnya :
                                                Komentar default disini




            Isi       komentar        anda




                                                                          44
Juharna Hardianto, S.kom – Hyper Text Markup Language

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:1884
posted:2/10/2011
language:Malay
pages:44