Belajar Dasar-dasar Tag HTML

Ni artikel tentang dasar-dasar HTML [Hyper Text Mark Up Language]. Artikel ni aku ambil dari blog teman dan sudah saya edit untuk memudahkan brather-brather sekalian.

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 itu sebenarnya wajar, apalagi untuk yang pemula (saya juga). Sebab, kemungkinan takut terjadi apa-apa pada blog nya (hayo ngaku?). Sebenarnya ga 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. 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. Ok mari kita mulai pelajaranya :

* CARA MEMASUKKAN GAMBAR 

Kode :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhh92_svCXRRnAbCngORIifOOd_8WUZgfiPc0iA3TbJFHVYC8ipNjYZ_EuCaF3KkRA9_K8mHs33V9gTPyQOTBAoABEDpKR-1WzuCHUmNBYVvcArxqnw-r8Dj6opmPOACNv5KWhb-dJrsM/s1600/fawaiqblog.jpg" border="0" height="17" width="90">
 

Keterangan :

Yang warna biru adalah lokasi gambar kamu.

height="17" width="90" adalah ukuran lebar dan tinggi gambar
 

Hasil :

* CARA MEMBUAT LINK

Kode :

<a href="http://mohnurfawaiq.blogspot.com/">Fawaiq Blog</a>
 

Keterangan :

Text warna biru adalah link yang dituju.

Tulisan "Fawaiq Blog" adalah tulisan yang ditampilkan.

Jika pingin yang dikasih link bukan tulisan melainkan gambar maka ganti tulisan tersebut dengan kode gambar seperti diatas, sehinga kodenya akan seperti ini :

<a href="http://mohnurfawaiq.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhh92_svCXRRnAbCngORIifOOd_8WUZgfiPc0iA3TbJFHVYC8ipNjYZ_EuCaF3KkRA9_K8mHs33V9gTPyQOTBAoABEDpKR-1WzuCHUmNBYVvcArxqnw-r8Dj6opmPOACNv5KWhb-dJrsM/s1600/fawaiqblog.jpg" border="0" height="17" width="90"></a>

Jika pingin link yang dituju dibuka dalam window baru maka tambahkan kode target="_blank" setelah kode "http://mohnurfawaiq.blogspot.com"
 

Hasil :

Fawaiq Blog (dibuka pada window yg sama)

(dibuka pada window baru)

* CARA MEMBUAT TEXT / GAMBAR DI TENGAH

Kode :

<center>text</center>
 

Keterangan :

Ganti tulisan "text" dengan tulisan yana kamu inginkan, tau 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 :

<i>Miring</i>

<b>Tebal</b>

<u>Garis Bawah</u>
 

Hasil :

Miring
Tebal 

Garis Bawah

* MEMBERI WARNA TEXT
Kode :

<font color="#FF0000">Merah</font>

<font color="blue">Biru</font>
 

Keterangan :

Ganti text yang dicetak tebal dengan warna atau kode warna kesukaanmu.
 

Hasil :

Merah

Biru

* KODE-KODE WARNA

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

Kode-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;

Saya yakin sobat masih bingung kan kalau yang belum pernah tau sama sekali tentang syntax HTML, tenang saja sobat karna saya akan memberitahu jalan pintas biar cepat bisa belajar HTML. Saya dulu belajar HTML caranya yaitu tulis tag-tag HTML yang sederhana seperti diatas di Notepad kemudian save dengan ekxtensi .html atau .htm maka otomatis jika sobat double klik file tersebut akan terbuka di default browser sobat. Maka sobat akan tau hasil nyatanya, kemudian otak-atik sesuka hati, kalau yang dasar-dasar nya sudah faham baru cari di internet tag-tag HTML yang lain untuk dipelajari.


Sekian tutorial dari saya tentang Belajar Dasar-Dasar Tag HTML, kalau ada kesulitan silakan bertanya, dengan senang hati saya akan membantu. Semoga bermanfaat buat sobat.

Related Posts:

Tweet