cara penulisan kode html dasar

Beberapa Kode HTML (DASAR)

Apa sih HTML itu « baca selengkapnya (penjelasan tentang HTML disini), buat kamu2 yang lagi belajar tentang kode HTML, disini saiah sediakan cara2 menulis kode HTML (dasar) yang saiah ketahui, silahkan di baca2 ajah. Oh iyah jika saiah ada kesalahan dalam penulisan kode2, mohon di maklum karena saiah juga masih dalam tahap belajar,.. Heheu... :P

• Untuk menampilkan teks dengan huruf besar semua :

  <big> teks kamu </big>

• Untuk menampilkan teks dengan huruf kecil semua :

  <small> teks kamu </small>

• Menampilkan teks bergaris bawah :

  <u> teks kamu </u>

• Menampilkan teks miring/emphasis (italic) :

  <i> teks kamu </i> Atau <em> teks kamu </em>

• Menampilkan teks tebal (bold) :

  <b> teks kamu </b>

• Untuk membuat garis batas tulisan
  

  Kamu bisa tambahkan kode tag <hr> dan di akhiri dengan kode tag </hr> kalian juga bisa mengatur warna garis dan ukuran garis batas yang ingin kamu buat dengan menambahkan kode (color) dan (size)
  contoh :

  <hr color="FF0000" size="7"> </hr>

• Untuk membuat Hyperlink :

  <a href="http://alamat situs kamu/link yang dituju"> teks yang ingin diperlihatkan </a>

  contoh :
  

  <a href="http://daikadozimas.blogspot.com"> klik disini untuk kembali ke beranda daikadozimas.blogspot.com</a> Hasilnya : klik disini untuk kembali ke beranda www.daika.com

• Menampilkan teks berwarna :

  <font color="#FF00FF"> Teks kamu </font> <font color="00FF00"> Teks kamu </font>

  untuk kode jenis warna yang lain bisa di lihat disini ==> (kumpulan kode warna html)

• Setiap paragraph yang kamu tulis sebaiknya dimulai dengan sebuah kode tag <p> dan di akhiri dengan kode tag </p> hanya dipergunakan bila perlu.

  Contoh :
  

  <p> paragraf ke 1 </p> <p> paragraf ke </p>

  Untuk membuat lay-out tulisan kode yang dipakai :

  <p align="justify"> Teks kamu </p> = Rata kiri kanan <p align="right"> Teks kamu </p> : Rata Kanan <p align="center"> Teks kamu </p> : Rata Tengah <p align="left"> Teks kamu </p> : Rata Kiri

• Membuat Warna Background Huruf :

  <span style="#0000FF"> teks kamu </span>

• Mengubah ukuran / size Huruf :

  <font size="7px"> teks kamu </font>

• Mengubah Jenis Huruf :

  <font face="arial"> teks kamu </font>

• Menambahkan gambar (images)

  gambar dapat ditambahkan kedalam halaman Web kamu agar semakin informatif dan menolong penyampaian pesan yang kamu tulis. Cara sederhana untuk menambahkan sebuah gambar adalah dengan menggunakan kode tag <img>. Misalkan kamu hendak menambahkan sebuah file gambar "daikadozimas.png" dalam folder atau direktori yang sama dimana file dokumen HTML kamu simpan dalam komputer kamu, atau kamu simpan dalam direktori/folder berkas situs web kamu, Gambarku ini memiliki lebar 275 pixel dan tingginya 117 pixel dan aku simpan dalam berkas situs webku.

  Contoh penulisan :
  

  <img src="/gambar/daikadozimas.png" />

  Hasilnya :
  

  Kita juga bisa mengubah ukuran gambar tersebut, misalnya lebar-nya kita jadikan 150 pixel dan tingginya jadi 75 pixel, Maka penulisan-nya sebagai berikut :

  <img src="/gambar/daikadozimas.png" width="150px" height="75px" />

  Hasilnya :
  

  Lebar dan tinggi gambar tidaklah terlalu penting akan tetapi ukuran gambar yang kecil akan menolong cepatnya tampilan halaman web kamu untuk diakses oleh orang lain di internet.

  Untuk menambahkan deskripsi gambarnya. Kamu dapat menambahkan deskripsi gambar-nya dengan cara sebagai berikut :

  <img src="/gambar/daikadozimas.png" width="150" height="75" alt="logo daika dozimas" />

  Atribut (alt) dipergunakan untuk menuliskan perintah deskripsi singkat yaitu " logo daika dozimas "

  Untuk gambar-gambar yang kompleks, kamu akan membutuhkan deskripsi yang lebih banyak. Misalkan perintah ini akan dituliskan dalam file "/2011/03/cara-penulisan-kode-html-dasar.html", kamu dapat menambahkan atribut deskripsi yang panjang

  contoh penulisan-nya sebagai berikut :
  

  <img src="/gambar/daikadozimas.png" width="150" height="75" alt="logo daika dozimas" longdesc="/2011/03/cara-penulisan-kode-html-dasar.html">

  Dan untuk menyelipkan gambar dalam teks, kamu tinggal menambahkan atribut :

  (style="float:left; margin:0px 0px 0px 0px)

  float = posisi gambar terdiri dari : left, right, center terserah kamu mau di sisipkan sebelah mana gambar tersebut di kiri = left , di kanan = right , atau di tengah = center .
  margin = posisi/jarak antara gambar dengan teks silahkan kamu otak-atik sendiri ukurannya... :D

• Bahasa HTML memiliki kemampuan membuat tiga jenis daftar (list).
  
  1. Daftar/list dengan kode bulat (bulleted list)
     

     daftar list dengan kode bulleted ini biasa disebut unordered list. Penulisannya mempergunakan kode tag <ul> dan kode tag <li> ,

     contoh penulisan :
     

     <ul> <li> list ke 1 </li> <li> list ke dua </li> <li> list ke 3 </li> </ul>

     anda selalu harus menuliskan kode tag </ul> pada bagian akhir daftar anda, dan untuk memisahkan antara list ke 1 dan list2 berikutnya, awali dengan kode tag <li> dan di tutup dengan tag </li> (lihat contoh penulisannya di atas).

     Hasilnya :
     

     list ke 1 list ke 2 list ke 3

  2. daftar/list bernomor atau disebut juga ordered list.
     

     Daftar list bernomor ini dituliskan dengan kode tag <ol> dan kode tag <li>.

     Contoh penulisan :
     

     <ol> <li> list ke 1 </li> <li> list ke 2 </li> <li> list ke 3 </li> <ol>

     Hasilnya :
     

     list ke 1 list ke 2 list ke 3

  3. Daftar list berdefinisi (definition list)
     

     Dengan daftar ini memungkinkan anda membuat daftar terminologi dan definisinya. Daftar ini diawali dengan kode tag <dl> pada awal tulisan dan diakhiri dengan kode tag </dl>. Masing- masing terminologi dimulai dengan kode tag <dt> dan setiap definisi dimulai dengan kode tag <dd>

     Contoh penulisan :
     

     <dl> <dt> list ke 1 </dt> <dd> definisi list ke 1 </dd> <dt> list ke 2 </dt> <dd> definisi list ke 2 </dd> <dt> list ke 3 </dt> <dd> definisi list ke 3 </dd> </dl>

     Hasilnya :
     

     list ke 1 definisi list ke 1 list ke 2 definisi list ke 2 list ke 3 definisi list ke 3

To be Continue.... Hehe... :D

Share :