Dasar-Dasar HTML (Hyper Text Mark up Language)

Sebuah Home Page, Web atau Blog tidak bisa lepas dari yang namanya HTML (Hyper Text Mark up Language) karena HTML inilah yang mendasari sebuah web/blog. Bila para pembaca sekalian tidak senang mengutak-atik file HTML pada blogger, hal tersebut sebenarnya wajar, apalagi untuk yang pemula. Sebab, kemungkinan para blogger takut terjadi apa-apa pada blognya, salah sedikit saja tanpa tahu dasar dari kode HTML yang ada bisa berakibat tampilan yg muncul tidak sesuai. Tapi tidak usah takut, Bahasa HTML berbeda dengan Bahasa Pemrogaman yang membutuhkan logika tingkat tinggi (walaupun bentuknya sama-sama rumit), HTML cuma butuh kreativitas kita, kok bisa gimana? Karena keindahan sebuah Home Page tergantung bagaimana kita memadukan warna dan bidang yang di bentuk dari Bahasa HTML tadi.. jujur kalau kamu sudah paham dengan dasar2 HTML yg ada, pasti akan asik kug..

Dalam tutorial kali ini kita tidak akan membahas tentang semua dasar-dasar HTML tapi kita akan mempelajari tag-tag atau kode-kode penting yang sering digunakan dalam membangun sebuah web/blog misalnya cara membuat link, menampilkan gambar, mengganti warna font, membuat baris baru dll. Berikut beberapa contoh yg dibuat :

CARA MEMASUKKAN GAMBAR 

kode :

<img src="lokasi URL gambar kamu" border="0" height="17" width="90"> 

keterangan : yang warna biru adalah lokasi gambar kamu.  height="17" width="90" adalah ukuran lebar dan tinggi gambar. 

CARA MEMBUAT LINK

 Kode :

<a href="http://anditiamath.blogspot.com" >Anditia Blog</a>

Keterangan : Text warna biru adalah link yang dituju.  Tulisan "Anditia blog" adalah tulisan yang ditampilkan.

 Jika link bukan tulisan melainkan gambar maka ganti tulisan tersebut dengan kode gambar, akan seperti ini :

<a href="http://blog-triks.blogspot.com"><img src=" lokasi URL gambar kamu" border="0" height="17" width="90"> </a>

 Jika pingin link yang dituju dibuka dalam window/jendela baru maka tambahkan kode target="_blank". Sehingga menjadi:

 <a href="http://blog-triks.blogspot.com" target="_blank"><img src=" lokasi URL gambar kamu" border="0" height="17" width="90"> </a>

CARA MENGETENGAHKAN TEXT/GAMBAR

 Kode :

<center>text</center>

 Keterangan : Ganti tulisan "text" dengan tulisan yana kamu inginkan, atau bisa juga diganti dengan gambar

CARA MEMBUAT BARIS BARU

Kode : 

<br>

 Keterangan : Tambahkan kode tersebut sebelum objek (text/gambar) yang dinginkan.

MEMBUAT HURUF TEBAL, MIRING DAN BERGARIS BAWAH

Kode : 

<b>text</b>
<i>text</i><u>text</u>

Hasil :

Tebal
Miring
Garis Bawah

MEMBERI WARNA TEXT

Kode : 

<font color="#FF0000"> text </font><font color="red"> text </font>

Keterangan : Ganti text yang dicetak tebal dengan warna atau kode warna kesukaanmu.
Hasil :

Merah
biru

CONTOH KODE-KODE HTML WARNA 

Warna	Kode
	#000000
	#999999
	#FFFFFF
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF
	#FF00FF
	#9900FF
	#FF6600

untuk kode warna selengkapnya bisa dilihat disini.

PENULISAN KARAKTER-KARAKTER KHUSUS

 Ada beberapa karakter yang tidak bisa ditulis secara langsung, jika ditulis maka akan hilang atau berubah, jadi untuk menuliskanya harus menggunakan kode-kode tertentu, berikut ini contoh karakter-karakter tersebut : 

Karakter	Kode
>	>
<	&lt;
&	&amp;
"	&quot;
(spasi)	&nbsp;

MEMBUAT EFEK HURUF BERJALAN

1. Cara buat Teks berjalan secara default dari kanan ke kiri.

<marquee>Teks Sobat</marquee>

2. Cara buat Teks berjalan dari Kiri ke kanan.

<marquee direction="right">Teks Sobat</marquee>

3. Teks akan berhenti jika mouse diarahkan pada Teks.

<marquee onmouseover="this.stop()" onmouseout="this.start()" >Teks Sobat</marquee>

4. Marquee 2.0.0 ini mempunyai kelebihan bolak-balik dari ruang kotak yang tidak terlihat oleh mata.

<marquee behavior="alternate">Teks Sobat</marquee>

5. Marquee 2.0.1 adalah pengembangan dari marquee sebelumnya, Dengan fungsi scrollamount dia menjadi sangat agresif dan cepat.

<marquee behavior="alternate" scrollamount="25"> Teks Sobat</marquee>

6. Cara buat Teks berjalan dari Bawah ke Atas.

<marquee direction="up">Teks Sobat</marquee>

7. Marquee 3.0.1 adalah pengembangan dari marquee sebelumnya yang tidak mempunyai batas ruang, Marquee ini kita batasi ruang kasatnya sehingga memiliki ukuran height 100 saja. Demikian dengan kemampuan scrollamountnya kita perlambat. Dan kita tambahkan on mouse stop/start juga.

<marquee direction="up" onmouseover="this.stop()" width="100%" scrollamount="2" onmouseout="this.start()" height="100">Teks Sobat</marquee>

8. Marquee 3.0.2 masih merupakan pengembangan dari marquee sebelumnya, Hanya saja teks berada di tengah ruang.

<marquee direction="up" width="100%" scrollamount="2" height="100" align="center">Teks Sobat</marquee>

9. Cara buat Teks berjalan dari Atas ke Bawah.

<marquee direction="down" width="100%" height="100">Teks Sobat</marquee>

10. Cara Membuat teks berkedip

<blink>Teks Sobat</blink>