07 Mei 2009

cara membuat html

Apakah HTML itu?HTML adalah singkatan dari Hypertext Markup Language. Terdiri dari sepasang kode yang disisipkan dalam suatu dokumen untuk mengontrol tampilan dokumen di layar monitor oleh Web Browser, seperti Netscape atau Mosaic. Apabila kita akan memandang suatu dokumen di Internet kita harus menggunakan Web Browser dan disana ada fasilitas "View source" untuk melihat kode-kode web page ini. Suatu dokumen berisi kode-kode ini disebut HTML.
Suatu dokumen HTML harus mempunyai formulir yang tepat, sehingga dapat dikenal dan di Interpretasikan dengan tepat oleh perangkat lunak dari Browser.

Dasar-dasar dari Form tersebut adalah sbb:



Ketik_Apa_saja_Judulnya


Bagian utama dari Isi suatu dokumen atau citra. 



Ada dua hal yang anda perhatikan yaitu kode pembuka dan penutup didalam kurung (< >),dan (). Sebagai contoh suatu HTML akan dibuka oleh dan ditutup oleh dan hal ini adalah keharusan akan tetapi tidak semuanya pakai kode penutup. Editor GeoCities akan membantu pembuatan dasar-dasar struktur dokumen untuk anda.

Kembali ke Indeks.


Warna
Warna, citra sebagai latarbelakang, dan beberapa hal akan dikontrol oleh Tag . Jika anda menggunakan Editor GeoCities secara otomatis telah dibuatkan tag anda tidak dapat membuat latarbelakang dari citra tapi itu dulu, sekarang GeoCities telah memiliki Editor HTML yang canggih. Anda dapat mengontrol home page yang sedang dibuat termasuk latarbelakang. Informasi dalam page ini akan membantu anda untuk mengembangkan dari pengertian dasar dari HTML.
Untuk mengontrol warna, tag ditulis seperti ini: Anda dibolehkan menggunakan seluruh item tersebut (bgcolor, text, link, vlink or alink), atau sebagian. Untuk menset latarbelakang, text, link, visited link, atau alink masukkan kode warna untuk xxxxxx seperti contoh diatas dan berikut ini ada beberapa warna yang dapat anda pergunakan :

Putih = FFFFFF 
Kuning = FFFF66 
Merah = FF0000 
Abu-abu = CC9999 
Biru = 0000FF 
Hujau = 00FF00 
Hitam = 000000 
Terong = CC33FF 
Biru muda = 00CCFF 
Nilai tersebut diatas adalah nilai Hexadecimal, kombinasi warna dari Merah/Hijau/Biru yang menghasilkan warna baru. Penjelasan yang lebih lengkap dari nilai hexadecimal dapat anda lihat di home page ini atau di web lain. Coba converter warna hexadecimal ini dengan menggunakan kombinasi yang proporsional setiap warna dapat diarsipkan. Jika anda menginginkan seperti warna yang anda lihat di home page lain, anda dapat menggunakan "View Source" di browser yang sedang anda gunakan untuk melihat kode dari warna tersebut.

CATATAN: Mulailah dengan menambah tag sebagai percobaan pertama dalam hal ini akan anda dapatkan kombinasi warna seperti home page ini. Sekali anda berhasil, tinggal membuat percobaan selanjutnya yang lebih mantap.

Contoh sederhana pemakaian warna utk background :

(Hijau muda) 
(Kuning muda) 
(Coklat muda) 
(Violet tua) 

Kembali ke Indeks.
Garis Horizontal

Anda dapat menyisipkan sebuah garis horizontal (Horizontal Rule) dalam suatu dokumen dengan menyisipkan sebuah tag
. Sebagai defaultnya adalah garis biasa dengan ukuran dan ketebalan yang standard seperti ini:
Mengenai tag ini dikenal dengan Browser modern, dapat dibuat beberapa macam dari tampilan garis dengan menambah LINE=NUMBER, ketebalan dari suatu garis dapat ditentukan. Letak dari suatu garis juga dapat diatur sesuai dengan kebutuhan dengan menambahkan ALIGN=LEFT/RIGHT/CENTER. Ketebalan garis juga dapat ditentukan dengan menambahkan WIDTH=PERCENT.

Kombinasi dari penjelasan diatas dapat kita buat seperti ini
akan dibuatkan (tampilkan) suatu garis tebal yang hitam dan ditempatkan ditengah-tengah.


Catatan: Dalam pembuatan garis yang cantik seperti pelangi dll. tidak dibuat pakai tag
melainkan sebuah citra.
Kembali ke Indeks.


Bullet lists

Anda dapat membuat bullet dengan menggunakan tag
    (unordered list).
    Formatnya sbb:


    • item satu
    • item dua
    • item tiga
     

    Tampilannya seperti ini: 
    item satu 
    item dua 
    item tiga 

    Kembali ke Indeks.
    Numbered lists

    Juga dapat dibuat list dengan nomor urut dengan menggunakan tag
      (ordered list). Tampilannya seperti ini: 


      1. bagian satu
      2. bagian dua
      3. bagian tiga
       

      Tampilannya seperti ini: 
      bagian satu 
      bagian dua 
      bagian tiga 

      Kembali ke Indeks.
      Membuat Definisi list
      Cara termudah menerangkan definisi list adalah seperti contoh dibawah ini:

      Jeruk
      Sebuah jeruk adalah hampir sama ukurannya dengan sebuah apel, yang masih satu keluarga dengan buah citrun. Di Indonesia buah jeruk hampir tumbuh disemua tempat.
      Mangga
      Mangga juga dapat dijumpai diseluruh Indonesia, hanya saja daerah tertentu menghasilkan buah mangga yang spesialis seperti Arumanis, Manalagi dll.
       

      Sama halnya dengan tag dibawah ini: 


      Jeruk
      Sebuah jeruk adalah hampir sama ukurannya dengan sebuah apel, yang masih satu keluarga dengan buah citrun. Di Indonesia buah jeruk hampir tumbuh disemua tempat.
      Mangga
      Mangga juga dapat dijumpai diseluruh Indonesia, hanya saja daerah tertentu menghasilkan buah mangga yang spesialis seperti Arumanis, Manalagi dll.

      Kembali ke Indeks.

      Judul/Headers

      Browser pada web mengenal 6 level dari Header/Judul. 

      Judul level satu


      Judul level dua


      Judul level tiga


      Judul level empat


      Judul level lima

      Judul level enam
       

      akan terlihat seperti ini: 
      Judul level satu
      Judul level dua
      Judul level tiga
      Judul level empat
      Judul level lima
      Judul level enam

      Kembali ke Indeks.
      Penempatan Teks ditengah
      Anda dapat menempatkan teks ditengah-tengah tampilan layar agar menarik dengan membuat tag


      seperti ini: 

      Belajar membuat Home page
       

      akan muncul: 

      Belajar membuat Home page

      Jika lebih dari satu baris yang akan dibuat ketengah maka semuanya akan ikut terpusat ketengah dengan tag


      Kembali ke Indeks.
      Penempatan Graphic sejajar
      Untuk membuat graphic sejajar di kiri, tengah dan kanan perlu dibuatkan tag khusus.
      xxxxx
      xxx=nama file
      xxxx=tulisan yg ada di graphic tsb.
      Selanjutnya ALIGN=center dan ALIGN=right 

      Huruf Tebal dan Miring

      Teks dan tulisan dapat kita buat tebal atau miring agar tampilannya lebih indah dan bervariasi dengan menggunakan tag seperti berikut ini:

      Teks tebal  

      akan muncul seperti ini: 

      Teks tebal 

      Teks miring  

      akan muncul seperti ini: 

      Teks miring 

      Teks tebal dan Miring  

      akan terlihat seperti ini: 

      Teks tebal dan Miring 

      Kembali ke Indeks.
      Paragraf dan mengakhiri satu baris

      Browser web tidak mengenal dan mengindahkan enter untuk mengakhiri suatu baris seperti software pengolah kata kecuali dengan memberi instruksi khusus, barulah teks yang dimaksudkan bisa pas panjangnya di Browser yang anda gunakan. Dengan menyisipkan suatu tag
      akan mengakhiri suatu baris dan baris baru akan tercipta dibawahnya.
      Untuk membatasi suatu paragraf cukup dengan menyisipkan tag 

      dan tidak perlu tag penutup 
      ini adalah pengecualian.

      Kembali ke Indeks.
      Teks Preformatted

      Jika anda ingin menginginkan tampilan teks seperti yang anda inginkan, hanya dengan menempatkan tag 
       diawal suatu paragraf dan tag 
      diakhir paragraf akan dihasilkan seperti yang anda maksudkan, kita lihat seperti dibawah ini:

        Monas adalah singkatan Monumen Nasional
        letaknya persis di jantung kota Jakarta
        dibatasi oleh jalan-jalan besar seperti
        Jl.Merdeka Utara, Selatan, Timur dan Barat.

      Kembali ke Indeks.
      Membuat kelap-kelip
      Untuk membuat teks atau graphik kelap-kelip cukup dengan menambahkan tag

      Kodenya Kelap-kelip Ibukota! akan terlihat seperti ini: 

      Kelap-kelip Ibukota!



      Kembali ke Indeks.
      Membuat lompatan ke dokumen lain

      Untuk membuat lompatan ke dokumen lain di home page yang sama dapat dilakukan dengan mudah yaitu dengan mengklik yang bergaris bawah dan warna yang berbeda, ada dua cara melakukannya:
      Sisipkan target pada suatu tempat yang anda inginkan untul link lompatan seperti ini: 

      teks_target 
      Sisipkan Link untuk diklik dan langsung loncat kedokumen dimaksud. 

      Hotlink 

      Teks hotlink akan terlihat bergaris bawah dan berwarna yang lain, jika pemakai meng-klik di browser web akan langsung melompat ke dokumen Hotlink.


      Kembali ke Indeks.
      Lompatan ke file yang lain dengan system yg sama
      Diatas telah dibahas lompatan ke dokumen yang lain, dalam hal ini akan dibahas lompatan ke file lain, misalnya page yang membahas topik-topik khusus yang menarik.

      Jika file yang mau dibuat lompatan masih di direktory yg sama cukup dengan menyebut file-nya saja seperti format berikut ini:

      Buka rambo.gif 


      Kembali ke Indeks
      Lompat ke suatu dokumen dengan system yg berbeda

      Dengan membuat lompatan hotlink ke suatu dokumen di system yang lain dimanapun berada sama halnya dengan lompatan dokumen dengan system yg sama hanya saja harus lengkap dibuat URL (Uniform Resource Locator) atau address Internet seperti contoh berikut ini:
      Loncat ke Chat Page 

      Anda akan dibawa ketempat yg disebut Homepage Obrolan yang beralamat di http://members.tripod.com/~Simbolon/, lakukan sekarang juga.

      Loncat ke "Chat Page" 

      Kembali ke Indeks.
      Cara membuat TABEL

      Tabel sangat perlu dalam penyajian suatu Informasi dalam presentasi atau dalam tulisan, disini ada beberapa cara pembuatan Tabel, tinggal anda pilih sendiri.

      TABEL 3X2 
      A B C
      D E F


       
       
       
       
       
       
      A B C
      D E F


      D UA ROWSPAN 

      Cara 1: Item 1 Item 2 Item 3
      Item 4 Item 5


       
       
       
       
       
       
       
       
      Item 1 Item 2 Item 3
      Item 4 Item 5


      Cara 2: 
      Item 1 Item 2 Item 3 Item 4
      Item 5 Item 6 Item 7


       
       
       
       
       
       
       
      Item 1 Item 2 Item 3 Item 4
      Item 5 Item 6 Item 7


      C OLSPAN : 
      Item 1 Item 2
      Item 3 Item 4 Item 5


       
       
       
       
       
       
       
      Item 1 Item 2
      Item 3 Item 4 Item 5


      HEADERS,  
      Head1 Head2 Head3
      A B C
      D E F


       
       
       
       
       
       
       
       
       
      Head1 Head2 Head3
      A B C
      D E F
       

      COLSPAN DAN HEADERS, 
      Head1 Head2
      A B C D
      E F G H


       
       
       
       
       
         
       
         
         
       
      Head1 Head2
      A B C D
      E F G H


      MULTI HEADERS, COLSPAN 
      Head1 Head2
      Head 3 Head 4 Head 5 Head 6
      A B C D
      E F G H


       
       
       
       
       
         
         
       
       
         
       
       
         
       
      Head1 Head2
      Head 3 Head 4Head 5 Head 6
      A B C D
      E F G H



      HEADER SAMPING : 
      Head1 Item 1 Item 2 Item 3
      Head2 Item 4 Item 5 Item 6
      Head3 Item 7 Item 8 Item 9


       
       
       
       
       
       
      Head1 Item 1 Item 2 Item 3
      Head2 Item 4 Item 5 Item 6
      Head3 Item 7 Item 8 Item 9


      SIDE HEADERS, ROWSPAN : 
      Head1 Item 1 Item 2 Item 3 Item 4
      Item 5 Item 6 Item 7 Item 8
      Head2 Item 9 Item 10 Item 3 Item 11


       
       
       
       
       
       
       
       
      Head1 Item 1 Item 2 Item 3 Item 4
      Item 5 Item 6 Item 7 Item 8
      Head2 Item 9 Item 10 Item 3 Item 11


      KOMBINASI : 
        Average
       Height Weight
      Gender Males 1.9 0.003
      Females 1.7 0.002


       
       
       
       
       
       
       
       
       
       
      Average
      HeightWeight
      Gender Males1.90.003
      Females1.70.002


      R OWSPAN/COLSPAN 
      A 1 2
      3 4
      C D



       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
      A 1 2
      3 4
      C D

      TABEL PAKAI BORDERS 

      TABEL tanpa BORDER 
      Item 1 Item 2 Item 3
      Item 4 Item 5


         
       
         
       
      Item 1 Item 2 Item 3
      Item 4 Item 5


      DENGAN BORDER 10 : 
      Item 1 Item 2
      Item 3 Item 4


       
       
         
       
      Item 1 Item 2
      Item 3 Item 4


      CELLPADDING dan CELLSPACING : 

      Cara 1: 
      A B C
      D E F


       
       
       
       
       
       
      A B C
      D E F


      Cara 2: 
      A B C
      D E F


       
       
       
       
       
       
      A B C
      D E F


      Cara 3: 
      A B C
      D E F


       
       
       
       
       
       
      A B C
      D E F


      Cara 4: 
      A B C
      D E F


       
       
       
       
       
       
      A B C
      D E F

      ALIGNMENT, CAPTIONS, DAN SUBTABLES 

      TABEL DENGAN BEBERAPA GARIS 
      Januari Pebruari Maret
      Ini cell 1 Cell 2 Cell yg lain,
      cell 3
      Cell 4 dan yg ini
      adalah cell 5 Cell 6


       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
      Januari Pebruari Maret
      Ini cell 1 Cell 2 Cell yg lain,
      cell 3
      Cell 4 dan yg ini
      adalah cell 5
      Cell 6




      ALIGN=LEFT|RIGHT|CENTER 
      Januari Pebruari Maret
      semua terpusat Cell 2 Cell yg lain,
      cell 3
      rata kanan terpusat default,
      rata kiri


       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
      Januari Pebruari Maret
      semua terpusat Cell 2 Cell yg lain,
      cell 3
      rata kanan terpusat default,
      rata kiri



      VALIGN=TOP|BOTTOM|MIDDLE 
      Januari Pebruari Maret
      semua rata atas dan yg ini
      adalah cell 2 Cell 3
      rata atas rata bawah default alignment,
      center


       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
      Januari Pebruari Maret
      semua rata atas dan yg ini
      adalah cell 2
      Cell 3
      rata atas rata bawah default,
      terpusat


      CAPTION=TOP|BOTTOM 

      CAPTION AtasJanuari Pebruari Maret
      Ini cell 1 Cell 2 Cell yg lain,
      cell 3



       
       
       
       
       
       
       
       
       
       
      CAPTION Atas
      Januari Pebruari Maret
      Ini cell 1 Cell 2 Cell yg lain,
      cell 3

      Januari Pebruari Maret
      Ini cell 1 Cell 2 Cell yg lain,
      cell 3

      CAPTION Bawah


       
       
       
       
       
       
       
       
       
       
      CAPTION Bawah
      Januari Pebruari Maret
      Ini cell 1 Cell 2 Cell yg lain,
      cell 3



      TABELNESTED:
      Tabel ABCD Didalam Tabel 123456 
      1 2 3 A B
      C D

      4 5 6


       
       
       
       
       
       
       
       
       
       
      1 2 3
       
       
       
       
       
       
       
       
       
       
      A B
      C D

       
      4 5 6

      TABEL WIDTHS 

      BASIC 50% WIDTH 
      Width=50% Width=50%
      3 4


       
       
       
       
      Width=50%Width=50%
      34

      Item width affects cell size 2
      3 4


       
       
       
       
      Item width affects cell size2
      34

      WIDTH=100% Ini item 2
      3 4


       
       
       
       
      WIDTH=100%Ini item 2
      34


      TABEL A TERPUSAT 
      A B C
      D E F



       
       
       
       
       
       
      A B C
      D E F



      TABLE WIDTH DAN TABEL NESTED 
      Item 1 Item 2
      Item A Item B
       Item 4


       
       
       
       
       
      Item 1Item 2

       
       
       
       
      Item AItem B

       
      Item 4


      HEIGHT=15% 

      HEIGHT=15% Item 2
      3 4


       
       
       
       
      HEIGHT=15% Item 2
      34


      Kembali ke Indeks.
      Membuat dan menggunakan Formulir Isian
      Selain dari pada pengiriman "mailto:" yang umum dipakai selama ini ada juga cara pembuatan Formulir Isian agar pengunjung atau orang yang diharapkan mengisi formulir mis: Umpan balik/feedback dengan membuat script, akan tetapi harus didefinisikan terlebih dahulu dengan teks berikut ini:

      action="/cgi-bin/homestead/mail.pl?member_name">

      Yang mana "member_name" adalah nama pemakai sendiri.
      Selanjutnya dapat dikembangkan dengan formulir isian yang anda sukai, atau tergantung keperluannya.

      Contoh sederhana: "KLIK DISINI !" 

      Kembali ke Indeks.
      Link Informasi HTML
      Untuk Informasi tambahan coba link ini: 
      Commercial pages at bargain rates. 
      GeoCities' Internet Resource Page. 
      Hagan's World of HTML 
      A Beginners Guide to HTML 
      Tips for Web Spinners 
      Ten Commandments of HTML


Tidak ada komentar: