Pengenalan Dan Syntax Dasar HTML

Hypertext Markup (HTML merupakan standard bahasa yang digunakan untuk menampilkan document web.

STRUKTUR DASAR HTML

Anda bisa lihat syntax penulisan tag di samping untuk mengetahui bagaimana yang sebenarnya. Tidak rumit kan?     Tag-tag pada Struktur ini sebaiknya diketik dulu sebelum memulai membuat website.     --bagian head-- dapat diisi dengan tag-tag khusus pada bagian HEAD atau dapat dikosongi/tidak diisi apa-apa.     --bagian body-- dapat diisi dengan tag-tag lain ataupun langsung dengan teks yang ingin ditampilkan.

Tag dalam Bagian HEAD
Judul dokumen -> di bagian paling atas, yang sejajar dengan tanda '-' 'kotak' dan 'x'
Tag yang digunakan : < title > juduldokumen < /title >
Contoh penulisan:


Tag dalam Bagian BODY
1. Paragraf

 a. Perataan Paragraf : 
 left/center/right hanya dipilih salah satu saja.
 left  : meletakkan teks di kiri
 center : meletakkan teks di tengah
 right : meletakkan teks di kanan
   b. Berpindah baris : < br >
 Efeknya sama seperti memberi enter pada teks dokumen. INGAT! PERHATIKAN CATATAN PENTING DI ATAS!
   c. Preformatted Text : < pre > . . . . . .  < /pre >
 Efeknya : apa yang ditulis di . . . . . .  akan ditampilkan sama persis 
    (tag lain yang ditulis di . . . . . .  akan tetap dianggap sebagai tag, 
    tidak ditampilkan seperti apa yang ditulis).

2. Karakter

   a. Efek pada teks
 Cetak tebal  : < b > . . . . . .  < /b >
 Cetak miring : < i > . . . . . .  < /i >
 Cetak garisbawah: < u > . . . . . .  < /u >
 Cetak coretan : < s > . . . . . .  < /s >
 Cetak superscript: < sup > . . . . . .  < /sup >    
   ----- contoh superscript: 23  == angka 3 menggunakan efek ini
 Cetak subscript : < sub > . . . . . .  < /sub >
   ----- contoh subscript: 23    == angka 3 menggunakan efek ini
    b. Format teks : < font size=n face="namafont" color=#rrggbb > . . . . . .  < /font >
  rrggbb : r=red g=green b=blue. menggunakan angka basis 16.
  angka basis 16 terdiri dari: 0 1 2 3 4 5 6 7 8 9 A B C D E F
  posisi #rrggbb bisa juga diganti dengan kata 'red', 'blue', atau 'green'.
  n : mewakili angka sebesapa besar tampilan karakter tersebut.

3. Garis Horizontal

 < HR size=n width=n align=left/right/center >
  size=tebal garis
  width=panjang garis, bisa berupa angka, bisa persentase
  align=posisi garis, pilih salah satu di antara left/right/center

4. Numbering

 < OL type=jenisnumber START=n>
  < LI > teks1
  < LI > teks2
  < LI > teks3
  .
  .
  .
  < LI > teksn
 < /OL >
 

 


  
Jenisnumber  
  
  
Keterangan
  
 

  
type=A
  
  
daftar berurut dengan huruf besar (A,B,C,...)
  
 

  
type=a
  
  
daftar berurut dengan huruf kecil (a,b,c,...)
  
 

  
type=I
  
  
daftar berurut dengan bilangan romawi besar (I,II,III,...)
  
 

  
type=i  
  
  
daftar berurut dengan bilangan romawi kecil (i,ii,iii,...)
  
 

  
type=1  
  
  
daftar berurut dengan angka (1,2,3,...)
  
 

  
START=n 
  
Nilai awal number 
 

5. Bullet/Symbol

 < UL type=jenisbullet >
  < LI > teks1
  < LI > teks2
  < LI > teks3
  .
  .
  .
  < LI > teksn
 < /UL >
 

 


  
Jenisbullet  
  
  
Keterangan
  
 

  
type=circle
  
  
membuat tanda lingkaran kosong
  
 

  
type=square
  
  
membuat tanda kotak hitam
  
 

  
type=disc
  
  
membuat tanda lingkaran hitam
  
 

6. Menggerakkan teks

 < marquee direction=left/right behavior=alternate > . . . . . .  < /marquee >
  direction : arah tujuan teks yang berjalan. pilih salah satu
  behavior : jenis pergerakan. tidak perlu selalu diikuti oleh behavior
 contoh:
  
 contoh < marquee direction=right behavior=alternate > 
  

  
 contoh < marquee direction=left> ==tanpa diikuti behavior 
 

7. Link

Link berfungsi untuk melompat ke bagian yang diinginkan.
syntax penulisan tag untuk menambahkan link:
 < a href=alamat > . . . . . .  < /a >
 alamat adalah alamat website lain yang dituju
 . . . . . .  adalah bagian yang ditampilkan di layar dan bisa diklik.
 contoh penulisan:
 
 

8. Gambar

Syntax penulisan untuk memasukkan gambar ke dalam website:
 < img src=namafile border=n width=n height=n >
  border=n -> garis tepi setebal n
  width=n  -> lebar gambar sebesar n. n bisa berupa persentase, bisa angka
  height=n -> tinggi gambar sebesar n. n bisa berupa persentase, bisa angka
  namafile -> bila beda folder, 
   cara penulisannya: "namafolder/namafile.ekstensi"
   contoh:
    "D:/My Document/gambar1.jpg"
    "image/gambar1.jpg"    -------- bila folder induknya sama 
        hanya beda folder dalamnya. 
     misal:  file htm di D:/My Document sedangkan 
      file gambar di D:/My Document/image

9. Video/Lagu

 < embed src=namafile width=n height=n autostart=true/false >
  autostart -> untuk mengatur otomatis memainkan lagu/video atau tidak pada 
       saat halaman web dibuka.
     TRUE = otomatis dimainkan
     FALSE = tidak dimainkan

10. Tabel

Syntax Penulisan:
 < table border=n width=n cellspacing=n cellpadding=n > 
  < tr >
   < td align=left/center/right bgcolor=#rrggbb COLSPAN=n ROWSPAN=n >
   . . . . . .  
   < /td >
  < /tr >
 < /table >

 Keterangan:
 cellspacing : spasi atau jarak di antara 2 sel
 cellpadding : spasi atau jarak di antara border sel dengan isi di dalam sel
 < tr > . . . . . . < /tr > : menambahkan baris
 < td > . . . . . . < /td > : menambahkan kolom
 COLSPAN  : menggabungkan kolom sebanyak n kolom
 ROWSPAN  : menggabungkan baris sebanyak n baris
 bgcolor  : memberi warna pada background kolom
 
 Pola kerja:
  membuat baris dulu kemudian mulai membuat 1 kolom pada baris itu dan mengisi 
  kolom tersebut. Setelah itu, membuat kolom berikutnya dan mengisi lagi hingga
  sesuai dengan banyak kolom yang diinginkan.
  Setelah itu, mulai membuat baris baru dan membuat kolom seperti di atas.

 Contoh:
 

 


  
Baris 1 kolom 1
  
  
Baris 1 kolom 2
  
 

  
Baris 2 kolom 1
  
  
Baris 2 kolom 2
 
  
Baris 2 kolom 3
  
 

  
Baris 3 kolom 1
  
  
Baris 3 kolom 2
  
 

Warna Merah untuk menunjukkan penggunaan colspan
 Warna Abu-Abu untuk menunjukkan penggunaan rowspan

 Bagaimana cara membuat tabel seperti di atas?
 Ikuti saja cuplikan script html berikut.