Dasar Dasar HTML Sebuah Website

By | November 21, 2012

Pada postingan yang lalu SmartMoslem sudah membahas tentang apa itu HTML. Sekarang saatnya untuk mempelajari HTML lebih dalam lagi.

Sebuah Web atau Blog tidak bisa lepas dari yang namanya HTML (Hyper Text Markup Language) karena HTML inilah yang mendasari sebuah web/blog. Walaupun sekarang kita bisa membuat web/blog hanya dengan klak-klik mouse tapi setidaknya kita harus sedikit mengerti tentang dasar-dasar HTML, ya tho?. Dalam tutorial kali ini SmartMoslem 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=” http://smartmoslem.com/wp-content/uploads/2012/11/smartmoslem.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 :

smartmoslem

* CARA MEMBUAT LINK
Kode :
<a href=” http://smartmoslem.com” >smartmoslem </a>
Keterangan :
Text warna biru adalah link yang dituju.
Tulisan “trik blog” adalah tulisan yang ditampilkan.
Jika pengen yang dikasih link bukan tulisan melainkan gambar maka ganti tulisan tersebut dengan kode gambar seperti diatas, sehinga kodenya akan seperti ini :
<a href=” http://smartmoslem.com” target=”_blank”><img src=” http://smartmoslem.com/wp-content/uploads/2012/11/smartmoslemcom.gif” border=”0″ height=”17″ width=”90″> </a>
Jika pingin link yang dituju dibuka dalam window baru maka tambahkan kode target=”_blank” setelah kode “http://smartmoslem.com”
Hasil :
smartmoslem (dibuka pada window yg sama)
smartmoslem (dibuka pada window baru)

* CARA MENGETENGAHKAN TEXT/GAMBAR
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

* CARA MEMBUAT PARAGRAF

Membuat paragraf Berada di tengah / Center, gunakan kode : <p align=”center”>Belajar</p> hasilnya seperti:

Belajar

Membuat paragraf ke kanan / Right gunakan kode : <p align=”right”>Belajar</p> hasilnya seperti :

Belajar

Membuat paragraf ke kiri / Left gunakan kode: <p align=”left”>Belajar</p> hasilnya seperti :

Belajar

* 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
<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

* KODE-KODE WARNA

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

Kode2 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
>
&gt;
<
&lt;
&
&amp;
&quot;
(spasi)
&nbsp;

Leave a Reply

Your email address will not be published. Required fields are marked *