Ticker

6/recent/ticker-posts

Header Ads Widget

Responsive Advertisement

[Html] Mengenal Tag dan contoh tag di HTML

fakhrul azmi 02:30:00

Mengenal Tag HTML - Untuk Belajar html tentunya bukan hanya membaca . membaca dan membaca, saya akui membaca itu sangat penting, tapi membaca tanpa praktik mungkin anda tidak akan bisa apa-apa kawan, makanya praktik itu lebih penting lagi membaca! untuk praktik tentunnya harus ada alatnya dan softwarenya.
Sekarang waktunya anda praktikan , mungkin sebeum-sebelumnya kalian membaca saja, tidak apalah permulaan dan pengetahuan terlebih dahulu, dan sekarang waktu yang tepat untuk mulai praktik,
Kita terapkan membaca , dimengerti dan langsung praktik.
Kita disini membutuhkan computer atau pc atau leptop tentunya dan kita membutuhkan software editor html, seperti note standard, note++, dreamweaver, matrick dan lain-lain sesuai keingnan kalian, yang cocok yang mana, asal paham dengan bahasa dan script yang ada di bahasa html.
Anjuran buat anda, untuk belajar awal mending memakai note++ saja, tampilannya sederhana dan tidak rumit, kalian bisa download di google, dengan kata kuci “ download note++”.
Langsung saja kita mengenal TAG HTML sederhana,

Tag html dasar
<html>    = untuk mendefinisakan sebuah dokumen html
<head>    =kepalan dari dokumen html
<title>   = Judul Html
<Body>    = untuk mendefinisikan sebuah isi halaman
<h1> sampai <h6> = untuk mendefinisikan judul halaman , semakin angka besar semakin kecil ukuran hurufnya
<p>       = untuk mendifinisikan paragraph halaman
<br>              = Untuk menyisipkan sebuah baris atau mengganti baris di tampilan browser (enter)
<hr>      = Untuk membuat garis horizontal dihalaman
<!--> atau // = Untuk memberi komentar pada halaman html.

Dibawah ini saya akan jabarkan satu persatu fungsi dan cara membuatnya.
Catatan sebelum mulai praktik,
Usahakan dalam menulis kode HTML diusahakan rapih, agar mudah kalau ada kesalahan dalam penulisan.

1.      Head
Elemen head ini disebut dengan kepala dari dokumen html, tag <head> dan </head> terletak diantara tag <html> dan </html>
<html>
<head>
……………………………
<head>
<html>

Silahkan kalian praktikan di note++ kalian, walaupun belum bisa tampil dalam browser tapi biasakan jari bergerak apa yang baru dibaca/dimengerti.

2.      Title
Title merupakan judul dari sebuah dokumen HTML yang tampil dijudul jendela browser, tag <title> dan </title> ini terletak di antara tag <head> dan </head>.
<html>
<head>
<title>
……………………………
</title>
<head>
<html>

3.      Body
Body itu isi dari dokumen html, tulisan didalam body akan ditampilkan di halaman browser kecuali tag-tag , astribut dan komentar.
Tag <body> dan </body> terletak dibawah tag <head> dan tag <head>. Didalam tag <body> bisa berisi astribut-astribut da nisi dari astribut tersebut, ini digunakan untuk memodifikasi isi dari body.
Seperti contoh sederhananya
<ELEMEN ASTRIBUT = VALUE>
Artinya:
Elemen = nama tag, kita ambil contoh tadi body
Astribut = astribut dari tag body
Value = nilai dari astribut
Ambil contoh langsungnya menjadi :
<body bgcolor=”red”>

MULAI PRAKTIK
Kayaknya kalian sudah bisa mulai praktik membuat dokumen html, sudah saatnya kawan,
Langsung saja kita mulai membuat dokumen dan kita simpan agar bisa dibuka dengan web browser kawan.
Contoh:
1.      Buka note++ , kemudian tulisakan kode seperti dibawah ini, jangan sampai ada yang ketinggalan kawan.
<html>
  <body>
  Ini awal dari belajar HTML, semangat!
  <body>

</html>
Simpan dokumen dengan nama body.html, kalau belum tahu cara menyimpan html buka artikel cara menyimpan dokumen di note++.
Setelah sudah tersimpan coba kalian buka body.html dengan browser.
Hasilnya :




2.      Buka note++ lagi, kita praktik yg kedua, tulis kode html dibawh ini dengan benar kawan,

<html>
  <body bgcolor=”blue” text=”white”>
  Ini awal dari belajar HTML, semangat!
  </body>

</html>
Simpan dokumen dengan nama background.html  dan sekarang coba buka  background.html dengan browser.
Hasilnya :



Keterangan :
Bgcolor = nama astribut untuk mewarnai background dokumen html.
“Blue”  = nilai yang akan tampil di dokumen html warnanya BIRU (Background akan berwarna BIRU).
Text = nama astribut untuk mewarna teks didalam dokumen html.
“white” =nilai yang akan tampil didokumen html warnanya PUTIH (teks akan berwarna PUTIH).
Artinya :
<body Bgcolor= “blue” text= “white”> artinya dokumen html akan tampil di browser dengan background berwarna biru dan tulisan akan berwarna putih.
Lihat pada bagian value/nilai astribut diatas, “blue” ataupun “white” bisa diganti dengan kode warna, dibawah ini ada kode-kode warna, silahkan kalian bisa mencobanya , semoga bisa kawan dan saya yakin kalian bisa kawan.
Dibawah ini kode-kode warna sederhana yang umum dipakai,

Nama Warna
Kode Warna
Black
#000000
White
#FFFFFF
Red
#FF0000
Yellow
#FFFF00
Lime
#00FF00
Blue
#0000FF
Fuchsia
#FF00FF
Gray
#808080
Silver
#C0C0C0
Maroon
#800000
Olive
#808000
Green
#008000
Teal
#008080
Navy
#000080
Purple
#800080

Kalian bisa merubah warna contoh diatas , misalkan :
<body Bgcolor= “blue” text= “white”>
di ganti dengan
<body Bgcolor= “#0000FF” text= “#FFFFFF”>
Coba kalian run pasti hasinya sama dengan contoh diatas.

3.      Kita kecontoh ke tiga kawan, buka note++ lagi dan tulis kode berikut:
<html>
  <head>
       <title> karya pertama </title>
  <head>
  <body bgcolor=”blue” text=”white”>
   Ini awal dari belajar HTML, SEMANGAT!
  </body>
</html>

Atau

<html>
  <head>
       <title> karya pertama </title>
  <head>
  <body bgcolor=”#000080” text=”ffffff”>
   Ini awal dari belajar HTML, SEMANGAT!
  </body>

</html>

 Hasilnya :


keterangan : perbedaan antara contoh kedua dan ketiga adalah pada <title> nya

Cukup atau kurang contohnya? Cukuplah yah…. Heeee
Semoga kalian paham dan bisa mempraktikannya,amin
sekian dulu Mengenal Tag dan Contoh Tag di Html nya.....salam www.indocreativ.com

Untuk membahas astribut dan nilai dari astribut yang lainnya nanti kita bahas di artikel selanjutnya kawan,
Selanjutnya Membuat Paragraph Dan Format Teks




Tags:

Post a Comment

0 Comments