Pemograman Desain Web Dasar Dengan HTML

    

1.    Struktur Dokumen   

    Syarat  perlu  mempelajari  suatu  bahasa pemrograman adalah
    mengetahui Strukturnya. Program/dokumen HTML terdiri dari Kepala 
    Program/Dokumen  dan  Badan  Program/Dokumen dengan bentuk sbb :

       
      
              ......... Kepala Program
         
      
              ............. Badan Program
      
   
    Dokumen HTML adalah suatu dokumen yang diapit dengan tag
    Kepala program diapit dengan tag dan untuk badan program
    diapit dengan tag .

    Berikut akan diberikan contoh program HTML yang sederhana :
   
  
  
      
  
  
    

     

Homepage-Ku

      Inilah Homepage Pribadi-Ku Yang Pertama
        
  
  
       
    Tampilan program :
       
Homepage-Ku

      Inilah Homepage  Pribadi-Ku Yang Pertama     
  
  

Ket :     - h1  tulisan Header  dapat pula dicoba (h2...h6)
          - b   tulisan tebal
          - i   tulisan italic
          - u   tulisan bergaris bawah       

    2.    Gambar dan Background   

   Untuk memberikan tampilan yang menarik dan memang
   merupakan  kelebihan  dari  dokumen  HTML, dapat
   disertakan gambar dalam dokumen tersebut, dapat
   berupa gambar diam ataupun animasi. Gambar dapat
   pula sebagai gambar tunggal di bagian area halaman
   atau memenuhi area halaman sebagai background.
  
    untuk memanggil file gambar tunggal
             
        untuk memanggil file gambar sebagai background

   
  
      
  

    
     

Homepage-Ku

     
          Inilah Homepage Pribadi-Ku Yang Pertama
        



    Tampilan :
Homepage-Ku
+



Inilah Homepage Pribadi-Ku Yang Pertama
Ket :     - gambar1.jpg harus ada
          - gambar2.jpg harus ada
          - extension gambar jpg atau gif

    3.    Font dan List   

   Pada contoh dokument Html berikut terdapat perintah
   tambahan yaitu : FONT, Didalam FONT dapat ditambahkan
   beberapa perintah seperti SIZE (ukuran huruf), FACE
   (Jenis huruf sesuai yang ada pada sistem windows-nya)
   dan COLOR (warna huruf).
   
   Dan juga dalam dokumen yang sama diberikan contoh perintah
   yang menghasilkan suatu LIST atau Daftar, LIST dapat berupa
   Ordered LIST (OL) atau Unordered LIST (UL), jika memakai OL
   berarti LIST kita terurut (bisa angka atau abjad).

   
  
      
  

    
     

Homepage-Ku

     
     
    Inilah Homepage Pribadi-Ku Yang Pertama
     
        
     
   

   
1. Nama   :  Sumijan
      
2. Alamat : Komp. Palm Griya Indah
      
3. Hoby    : Baca Hadis dan Tafsir Al-Qur`an
      

     








    Tampilan :
Homepage-Ku







Inilah Homepage Pribadi-Ku Yang Pertama
1.    Nama   : Sumijan
2.    Alamat : Komp. Palm Griya Indah
3.    Hoby    : Baca Hadis dan Tafsir Al-Quran
              

    4.    TABEL   

   Tabel adalah suatu tampilan yang mengandung unsur baris
   dan kolom, untuk menampilkan tabel dalam homepage diperlukan
   beberapa tag yaitu :

   .......    Untuk set dokumen tabel
     .........       Untuk set baris (Table Row)
     .........       Untuk set kolom (Table Data)
     .........       Untuk set Header (Table Header)
     ..... Untuk set Judul Tabel

   Contohnya seperti berikut :
    
   
  
      
  

    
     

Homepage-Ku

     
     
    Inilah Homepage Pribadi-Ku Yang Pertama
     
        
     
   

   
1. Nama   : Sumijan
      
2. Alamat :  Komp. Palm Griya Indah
      
3. Hoby    : Baca Hadis dan Tafsir Al-Qur`an
      

     
     

     
     
   
       
         
         
         
       
       
         
         
         
       
        
         
         
       

     

Daftar Nilai Ujian

	MID	AKHIR
Agama	90	85
Pancasila	75	80

    Tampilan :
Homepage-Ku







Inilah Homepage Pribadi-Ku Yang Pertama
1.    Nama   :  Sumijan
2.    Alamat : Komp. Palm Griya Indah 
3.    Hoby    : Baca Hadis Dan Tafsir Al-Qur`an
Daftar Nilai Ujian

    MID    AKHIR
Agama    90    85
Pancasila    75    80

   

    5.    FRAME   

   Frame adalah perintah untuk tampilan yang home yang terbagi
   dalam beberapa bingkai sesuai kehendak kita.    Dapat dibagi secara
   mendatar atau secara horizontal.

   .......    Untuk set bingkai homepage
     .........       Untuk isi dan nama bingkai
   Cols dan Rows               Untuk set baris atau kolom
  
   Contohnya seperti berikut :
  
   (sebelum menulis contoh, anda harus mempunyai minimal 2 dokumen HTML
    yang akan di panggil pada bingkai yang akan dibuat).   

  
    
        
   
   
   
   
   
   
   
    
   

     Jika program ini anda jalankan, maka hasilnya seperti homepage
     yang anda lihat ini, terbagi menjadi 2 bingkai dengan bagian 25%
     berisi kiri.html dan 75% berisi kanan.html.
     Jika menginginkan terbagi 2 tetapi horizontal atau baris, dapat
     mengganti cols dengan rows dan dokumen html-nya diganti atas dan
     bawah.
        
   
   
   
   
   
   
   
    
   


    6.    LINK   

   Link adalah menghubungkan dengan obyek lain, dapat berupa Web Page,
   Gambar, Suara, ataupun ke komputer server yang lain. Link adalah
   merupakan pembeda antara mode text HTML dengan text yang lain.
   Untuk perintah Link dapat menggunakan elemen Anchor : ...    
   dan tambahan perintah HREF.
   Contoh jika ada perintah : 

      Menuju ke Dokumen Contoh.htm

   Artinya :  Bahwa kalimat "Menuju ke Dokumen Contoh.htm" akan
              diberi tanda (biasanya garis bawah) dan jika pointer mouse
              berada pada kalimat tersebut, maka akan menjadi gambar jari tangan
          Dan apabila di Klick, maka contoh.htm akan ditampilkan.
    
         dokumen

    
   
   
   
   
             Contoh Link
         Link ke dokumen Contoh    
          
    
   


         Tampilan
    



     Contoh Link

      Link ke dokumen Contoh     
    
  


    Seperti yang anda lihat pada pelajaran Frame, tampilan pada layar
    dapat dibagi menjadi dua atau beberapa. Agar anda dapat me-link
    ke daerah yang dituju, misalnya bagian kanan atau kiri, dapat dilihat
    lagi pada dokumen frame-nya pada perintah NAME, pada contoh terdahulu
    anda membagi dua halaman menjadi kiri dan kanan dengan memberi nama
    name="left" dan yang kanan diberi nama name="right", sehingga misal
    kita ingin menampilkan dokumen contoh.htm ke halaman kiri dapat diberi
    perintah TARGET, contoh:

            Link ke dokumen Contoh





    Pemacu link tidak harus tulisan, dapat juga pemacu link menggunakan
    gambar atau image :
    *   Link ke Homepage-nya STMIK
            Link ke Homepage-nya STMIK   
    * Link ke alamat e-mail   
            Link ke alamat e-mail