Selamat dan Menikmati Fasilitas dan Layanan Pada Blog ini...

Tuesday, 19 February 2013

Pemograman HTML


1.Struktur Dokumen


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

               <html>
                  <head>
                   ......... Kepala Program
                  </head>
                  <body>
                    ............. Badan Program
                  </body>
               </html>
    Dokumen HTML adalah suatu dokumen yang diapit dengan tag <HTML> Kepala pro    gram diapit dengan tag<Head> dan untuk badan program diapit dengan tag <Body>.
   Berikut akan diberikan contoh program HTML yang sederhana :

   <html>
   <head>
       <title>
         Homepage Pribadi
       </title>
   </head>
   <body>
     <center>
      <h1>Homepage-Ku</h1> 
      Inilah <b>Homepage </b> Pribadi-Ku <i>Yang Pertama</i>
      </center>   
   </body>
   </html>
                               
    Tampilan program :

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.
   <IMG SRC="nama file gambar"> 
               untuk memanggil file gambar tunggal
   <Body background="nama file gambar">                          
        untuk memanggil file gambar sebagai background
 

<html>
   <head>
       <title>
         Homepage Pribadi
       </title>
   </head>
<body background="gambar1.jpg">
     <center>
      <h1>Homepage-Ku</h1> 
      <IMG SRC="gambar2.gif">
               Inilah Homepage Pribadi-Ku <i>Yang Pertama</i>
      </center>   
</body>
</html>

               - gambar2.jpg harus ada Ket :       - gambar1.jpg harus ada
               - extension gambar jpg atau gif


3.         Font dan List

     Pada contoh dokument Html berikut terdapat perintah  tambahan yaitu : FONT, Did      alam 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 p     erintah 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).

<html>
   <head>
       <title>
         Homepage Pribadi
       </title>
   </head>
<body background="gambar1.jpg">
     <center>
      <h1>Homepage-Ku</h1> 
      <IMG SRC="gambar2.gif">
      <Font size=3 Face="arial" color="blue"> 
               Inilah Homepage Pribadi-Ku <i>Yang Pertama</i>
      </Font>
      </center>   
      <font face="arial" size=3 color="red">
               <ol>
               <li>Nama   :  Sumijan
               <li>Alamat : Komp. Palm Griya Indah
               <li>Hoby    : Baca Hadis dan Tafsir Al-Qur`an 
               </ol>
      </font>
</body>
</html>

  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 
   <Table> ....... </table>   Untuk set dokumen tabel
   <TR>  ......... </TR>      Untuk set baris (Table Row)
   <TD>  ......... </TD>      Untuk set kolom (Table Data)
   <TH>  ......... </TH>      Untuk set Header (Table Header)
   <Caption>  .....</Caption> Untuk set Judul Tabel
 
   Contohnya seperti berikut :

<html>
   <head>
       <title>
         Homepage Pribadi
       </title>
   </head>
<body background="gambar1.jpg">
     <center>
      <h1>Homepage-Ku</h1> 
      <IMG SRC="gambar2.gif">
      <Font size=3 Face="arial" color="blue"> 
               Inilah Homepage Pribadi-Ku <i>Yang Pertama</i>
      </Font>
      </center>   
      <font face="arial" size=3 color="red">
               <ol>
               <li>Nama   : Sumijan
               <li>Alamat :  Komp. Palm Griya Indah
               <li>Hoby    : Baca Hadis dan Tafsir Al-Qur`an
               </ol>
      </font>
      <BR>
      <center>
      <table border=2>
               <caption> Daftar Nilai Ujian </caption>
        <TR>
          <TD><BR></TD>
          <TH>MID</TH>
          <TH>AKHIR</TH>
        </TR>
        <TR>
          <TH>Agama</TH>
          <TD>90</TD>
          <TD>85</TD>
        </TR>
         <TR>
          <TH>Pancasila</TD>
          <TD>75</TD>
          <TD>80</TD>
        </TR>
 
      </table></center>
 
</body>
</html>
  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.
   <Frameset> ....... </Frameset>   Untuk set bingkai homepage
   <Frame>  ......... </Frame>      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).  

     <html>
               <head>
               <title>My Personal Homepage</title>
               </head>
               <frameset cols="25%,*" frameborder="0" framespacing="0">
               <frame src="kiri.html" name="left" noresize scrolling>
               <frame src="kanan.html" name="right" noresize scrolling>
               </frameset>
     </html>
               
     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.

     <html>
               <head>
               <title>My Personal Homepage</title>
               </head>
               <frameset rows="25%,*" frameborder="0" framespacing="0">
               <frame src="atas.html" name="left" noresize scrolling>
               <frame src="bawah.html" name="right" noresize scrolling>
               </frameset>
     </html>
               

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 : <A> ...</A>     
   dan tambahan perintah HREF. 
   Contoh jika ada perintah :  
 
      <A HREF="contoh.htm">Menuju ke Dokumen Contoh.htm </A>
   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
     <html>
               <head>
               <title>My Personal Homepage</title>
               </head>
               <Body>
             <h>Contoh Link</h>
                    <a href="contoh.htm">Link ke dokumen Contoh</a>        
        </Body>   
     </html>
                
    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:
 
            <a href="contoh.htm" target="left" >Link ke dokumen Contoh </a> 

    Pemacu link tidak harus tulisan, dapat juga pemacu link menggunakan
    gambar atau image :
    *   <a href="contoh.htm"> <img src="gambar.gif> </a>
               (Gambar.gif akan menjadi pemacu link ke dokumen contoh.htm)
 
   





  
   

2 comments:

linbud bintii buyunqq said...

thank you pak ilmunya hehehe
selama ini lina kira gak penting loh pakk.. eh rupanya sangat sangat :D

ilman suhdy lubis said...

ok....lah mudah2 bermamfaat

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites