Dasar-dasar HTML


Pada artikel ini saya membahas tentang dasar kode HTML yang sering digunakan dalam pembuatan Web.

 

Sekapur sirih tentang pengertian HTML

 

HTML (Hypertext Markup Language) adalah bahasa pengkodean untuk membuat sebuah web yang digunakan dalam World Wide Web, dan HTML bukanlah sebuah bahasa pemrograman, tetapi hanya berisi perintah-perintah yang terstruktur beserta tag-tagnya. HTML adalah sebuah dokumen teks biasa (ASCII) yang dirancang agar tidak tergantung pada sistem operasi tertentu. HTML sendiri merupakan pengembangan dari satandar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML).

Dalam pembuatan HTML yang lebih dikenal dengan nama scrift dan harus diawali dan diakhiri dengan kode-kode HTML dimana menunjukan bagaimana keluarnya pada saat dijalankan padaa sebuah Web Browser. Bahasa pemrograman ini dapat dipahami oleh semua kpmputer yang ada di dunia maupun di internet. Dalam penulisan perintah HTML harus berada di dalam tanda <….> dan diakhiri tanda </…>, contoh <HEAD>Webblog</HEAD> untuk menampilkan fungsi-fungsi seperi fungsi link dll.

Berikut ini adalah tabel perintah yang biasa digunakan dalam bahasa HTML :

 

  1. A. Struktur Dasar Yang Digunakan Pada  HTML

Kode / Perintah (TAG) Fungsi
<HTML>….<HTML> Sebagai penanda bahwa dokumen yang yang dibuat adalah dokumen Web
<HEAD>….</HEAD> Diantaranya adalah area dari heading halaman. Digunakan untuk

script/perintah khusus yang tidak mempunyai hubungan dengan format dari

halaman.

<TITLE>….</TITLE> Memberi judul yang ditampilkan pada ujung kiri atas dari browser window.
<BODY>….</BODY>

 

Semua isi dari halam web disimpan dibagian ini
<B>…</B> Membuat tulisan tebal (Bold Text )
< I>…</I> Membuat huruf miring (Italic)
<P>…</P> Merupakan perintah memberikan paragrap pada tulisan

 

 

<BR /> Untuk memberikan baris baru / pergantian baris. Diletakkan pada bagian teks

yang mau berganti baris

<A>…</A> Membuat link antar dua halaman web. <A> merupakan tag penghubung    (anchor tag), biasanya dituliskan dengan <A HREF link file > …</A>.
<IMG SRC=”…”…>…</IMG> Untuk meletakkan gambar / file photo di web
<OL>… </OL> , <UL>… </UL>dan <LI>… </LI> Biasanya untuk membuat list / memberikan penomoran langsung pada list baris.
<HR> Pemberian garis horizontal
< TABLE>…</TABLE> Untuk membuat tabel di dokumen web

 

  1. B. Pengaturan bentuk, ukuran, dan warna tulisan

Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

Kode / Perintah (TAG) Fungsi
<FONT size=”2″

color=”#FFFF00″

face=”arial”>…</font>

Mengubah ukuran,warna dan bentuk tulisan. Ukurannya antara 1 – 7 atau angka relatif +1 (lebih besar 1 kali dari sebelumnya). Warna berdasarkan kode warna heksadesimal atau bisa juga ditulis langsung nama warnanya.Jenis tulisan

biasanya seperti Arial, Times New

Roman, Helvetica, Tahoma.

<BASEFONT size=”2″

color=”#FFFF00″

face=”arial”>

Mengeset untuk default dari bentuk font baik ukuran, warna dan juga jenisnya.
<BIG>…</BIG> Membuat tulisan agar lebih besar
<SMALL>…</SMALL> Membuat tulisan agar lebih kecil
<B>…</b> Membuat tulisan tebal (Bold Text )
<I>…</I> Membuat huruf miring (Italic)
<S>…</S> Mencoret kata (overSTRIKE)
<STRIKE>…</STRIKE> Mencoret kata
<U>…</U> Membuat garis bawah (Underline)
<TT>…</TT> Hrurf Teletype (spasi tunggal)
H1>…</H1> Head #1
H1>…</H1>

 

Head #1
<H2>…</H2> Head #2

 

<H3>…</H3> Head #3

 

<H4>…</H4> Head #4
<H5>…</H5> Head #5
<H6>…</H6> Head#6

  1. C. Tag Atribut HTML

Berikut ini adalah contoh tag-tag yang sering dipakai dalam pembuatan web

 

Kode / Perintah (TAG) Fungsi
bgcolor=”…” memberikan warna latar/ background halaman.
text=”…” memberikan warna tulisan / teks.
link=”…” memberikan warna pada hyperlinks (link halaman)
vlink=”…” memberi warna pada hyperlink yang telah dimasuki/

diklik.

alink=”…” memberi warna pada link yang aktif.
align=”…” memberikan posisi teks/gambar
ALIGN=”left/center/right” untuk pengaturan paragraph rapat kiri/tengah atau kanan
NOWRAP untuk membuat penulisan paragraph tanpa pemotongan batas pinggir halaman untuk berganti baris, dan hanya bisa

berganti baris dengan tag <BR>

width=”…” Mem berikan lebar gambar/tabel
hight=”…” tinggi dari gambar/tabel
border=”…” memberikan ketebalan dari bingkai gambar/tabel
alt=”…” memberi nama dari gambar


  1. D. Tag Link

Berfungsi untuk me-linkkan suatu alamat web atau file tertentu

 

Kode / Perintah (TAG) Fungsi
HREF=”file.html” file.html terletak di direktori yang sama dengan

file web referensi.

HREF=”dir/file.html” letak file.html di dalam direktori dir dan

direktori dir terletak pada direktori yang sama dengan file web

referensi

HREF=”dir/dir2/file.html” letak file.html di dalam direktori dir2

dimana direktori ini di dalam direktori dir

HREF=”../file.html” letak file.html di direktori yang berada satu

level di atas direktori posisi file web referensi sekarang.

HREF=”../../dir/file.html” letak file.html pada dua level di atas.

 

Penulisan program yang baik adalah tersusun dengan baik (terstruktur). Artinya antara tag pertama dan tag selanjutnya tidak saling tumpang tindih atau tidak beraturan.

 

Penulisan Tag yang tumpang tindih Penulisan Tag yang benar
<tag1>

teks tag1

<tag2>

teks tag 2

</tag1>

</tag2>

 

<tag1>

teks tag1

<tag2>

teks tag 2

</tag2>

</tag1>

 

 

Namun tidak semua penulisan HTML seperti aturan di atas, dimana tag HTML secara umum muncul seperi berikut

 

<nama tag>teks</nama tag>

<nama tag>

<nama tag atribut1=argument atribut2=argumen

dst>

<nama tag antribut=argumen>teks</nama tag>

Sekian pembahasan tentang dasar-dasar HTML semoga bermanfaat, dan silahkan berikan saran dan komentar anda di http://grahapurnama.wordpress.com dan untuk download artikel versi PDF tinggal download

 

 

 

“Kritik Dan Saran Adalah Ilmu Yang Gratis Untuk Menjadi Yang Terdepan”

 

About these ads

Berikan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s