Pendahuluan
H T M L (HYPERTEXT
MARKUP LANGUAGE )
F
suatu metoda untuk mengimple-mentasikan konsep hypertext dalam suatu naskah
atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena
sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan
bukan sebagai program
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Perintah-perintah dalam HTML biasa di sebut dengan TAG < >. TAG ini kebanyakan mempunyai pasangan, yakni TAG pembuka dan penutup. Misal
ini hanya
<>
di samping TAG yang mempunyai pasangan, ada juga tag yang tidak memerlukan pasangan, misal TAG <hr> , <br> , ataupun <input>
Sebuah Tag tidaklah sensitif terhadap Case (hurup besar atau kecil), jadi mau di tulis hurup besar ataupun huruf kecil akan menghasilkan fungsi yang sama. Sebagai contoh : fungsi Tag
Sebuah halaman web minimal mempunyai empat buat tag, yaitu :
<HTML> ………….. </HTML> Sebagai tanda awal dan akhir dokumen HTML.
<HEAD>…………….</HEAD> Sebagai informasi page header / digunakan untuk menulis keterangan tentang document web
<TITLE>……….</TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).
Contoh :
<TITLE>Tips HTML -- www.klik-kanan.com</TITLE>
<BODY> Di dalam tag ini bisa diletakkan berbagai teks maupun attribute / aksesori lainnya seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain yang akan ditampilkan pada web page.
Atribut :
BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.
Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan teks :
Headers: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.
Contoh :
<H2>Tutorial Html</H2>
Hasilnya akan terlihat seperti :
Tutorial Html
Paragraph Baru: <P> Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi.
Line Break: <BR> Digunakan untuk pindah ke baris baru.
No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.
Font <FONT> Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR.
SIZE: Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.
FACE: Jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic.
COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).
Contoh :
<FONT SIZE=4 FACE="Verdana, Arial, Helvetica" COLOR="#FF0000">Contoh teks yang berwarna merah</FONT>
Hasilnya akan terlihat seperti :
Contoh teks yang berwarna merah
Contoh lainnya :
<FONT SIZE=2 FACE="Times New Roman" COLOR="red"> ….. </font>
Base Font: <BASEFONT> Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.
Contoh :
<BASEFONT SIZE=2 FACE="Arial,Helvetica" COLOR="#FF0000">
Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :
Perhatian : Semua tag di bawah ini membutuhkan tap penutup.
<B> Bold text
<I> Italic text
<U> Underscore
<TT> Typewriter
<S> Strikeout - draws a line through the text
<PRE> Preformatted Text <DFN> Definition
<BLINK> Text berkedip (lebih baik jangan digunakan)</blink>
<STRONG> Strong
Italic
<BIG> Ukuran teks akan lebih besar satu ukuran
<SMALL> Ukuran teks akan lebih kecil satu ukuran
<SUP> Membuat tekssuperscript
<SUB> membuat tekssub script
Terdapat tiga tipe list yang dapat digunakan, yaitu :
Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <LI>.
Contoh :
<UL>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</UL>
Hasil dari kode di atas adalah:
Dengan atribut TYPE Anda dapat mendefinisikan bentuk disc, circle atau square bullet point.
Contoh :
<UL COMPACT TYPE=square> …
Ordered Lists: <OL> Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag.
Contoh :
<OL TYPE=I>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</OL>
Hasil dari kode di atas adalah :
Untuk TYPE Anda dapat juga menggunakan :
1- Default numbers, 1, 2, 3, etc.
A- Huruf besar. A, B, C, etc.
a- Huruf kecil. a, b, c, etc.
I- Romawi huruf besar. I, II, III, etc.
i- Romawi huruf kecil , i, ii, iii, etc.
Definition Lists: <DL>
Contoh :
<DL>
<DT> Item pertama.
<DD> Penjelasan tentang item pertama.
<DT> Item kedua.
<DD> Penjelasan tentang item kedua
</DL>
F merupakan protokol yang digunakan untuk
mentransfer data atau document dari web server ke browser kita (Internet
Explorer, Netscape Navigator, NeoPlanet, dll). Nah,
HTML inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web
yang menarik.
Catatan : Biarpun HTML bukan termasuk suatu program
pembuatan web, tetapi HTML merupakan dasar dari segala bahasa pemrograman web
yang akan muncul kemudian.
Contoh Bahasa Pemrograman Web, antara lain:
1. Frontpages
2. Dreamweaver
3. Adobe GoLive
4. dll
Dimana kita bisa menulis perintah-perintah HTML???
1. Notepad
2. CuteHTML
3. dll
Struktur
dasar HTML
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Perintah-perintah dalam HTML biasa di sebut dengan TAG < >. TAG ini kebanyakan mempunyai pasangan, yakni TAG pembuka dan penutup. Misal
<b>...</b>,
<i>...</i> dan lain sebagainya, dan TAG yang
mempunyai pasangan ini juga bersifat Override yakni dapat menimpa fungsi
TAG sebelumnya. Contoh : sebuah teks yang sudah di buat miring oleh tag <i> ...
</i>,
dapat di timpa oleh tag <b> ... </b> sehingga akan
melahirkan dua hasil perintah yang berbeda sekaligus yakni kombinasi hurup miring
dan hurup tebal, contoh : ini hanya
<b><i>VINCENT</i></b> saja sobat<>
di samping TAG yang mempunyai pasangan, ada juga tag yang tidak memerlukan pasangan, misal TAG <hr> , <br> , ataupun <input>
Sebuah Tag tidaklah sensitif terhadap Case (hurup besar atau kecil), jadi mau di tulis hurup besar ataupun huruf kecil akan menghasilkan fungsi yang sama. Sebagai contoh : fungsi Tag
<b>....</b> akan sama dengan
Tag <B> ....</B>.Sebuah halaman web minimal mempunyai empat buat tag, yaitu :
<HTML> ………….. </HTML> Sebagai tanda awal dan akhir dokumen HTML.
<HEAD>…………….</HEAD> Sebagai informasi page header / digunakan untuk menulis keterangan tentang document web
<TITLE>……….</TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).
Contoh :
<TITLE>Tips HTML -- www.klik-kanan.com</TITLE>
<BODY> Di dalam tag ini bisa diletakkan berbagai teks maupun attribute / aksesori lainnya seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain yang akan ditampilkan pada web page.
Atribut :
BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.
Pengaturan Teks
Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan teks :
Headers: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.
Contoh :
<H2>Tutorial Html</H2>
Hasilnya akan terlihat seperti :
Tutorial Html
Paragraph Baru: <P> Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi.
Line Break: <BR> Digunakan untuk pindah ke baris baru.
No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.
Font <FONT> Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR.
SIZE: Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.
FACE: Jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic.
COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).
Contoh :
<FONT SIZE=4 FACE="Verdana, Arial, Helvetica" COLOR="#FF0000">Contoh teks yang berwarna merah</FONT>
Hasilnya akan terlihat seperti :
Contoh teks yang berwarna merah
Contoh lainnya :
<FONT SIZE=2 FACE="Times New Roman" COLOR="red"> ….. </font>
Base Font: <BASEFONT> Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.
Contoh :
<BASEFONT SIZE=2 FACE="Arial,Helvetica" COLOR="#FF0000">
Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :
Perhatian : Semua tag di bawah ini membutuhkan tap penutup.
<B> Bold text
<I> Italic text
<U> Underscore
<TT> Typewriter
<S> Strikeout -
<PRE> Preformatted Text <DFN> Definition
<BLINK> Text berkedip (lebih baik jangan digunakan)</blink>
<STRONG> Strong
Italic
<BIG> Ukuran teks akan lebih besar satu ukuran
<SMALL> Ukuran teks akan lebih kecil satu ukuran
<SUP> Membuat tekssuperscript
<SUB> membuat tekssub script
<p> = membuat paragraf dengan satu baris
kosong
<br> = membuat paragraf tanpa baris kosong
<pre> =
paragraf tercetak apa adanya
Lists
Terdapat tiga tipe list yang dapat digunakan, yaitu :
Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <LI>.
Contoh :
<UL>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</UL>
Hasil dari kode di atas adalah:
- Item nomer 1
- Item nomer 2
- Item nomer 3
Dengan atribut TYPE Anda dapat mendefinisikan bentuk disc, circle atau square bullet point.
Contoh :
<UL COMPACT TYPE=square> …
Ordered Lists: <OL> Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag.
Contoh :
<OL TYPE=I>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</OL>
Hasil dari kode di atas adalah :
- Item nomer 1
- Item nomerr 2
- Item nomerr 3
Untuk TYPE Anda dapat juga menggunakan :
1- Default numbers, 1, 2, 3, etc.
A- Huruf besar. A, B, C, etc.
a- Huruf kecil. a, b, c, etc.
I- Romawi huruf besar. I, II, III, etc.
i- Romawi huruf kecil , i, ii, iii, etc.
Definition Lists: <DL>
Contoh :
<DL>
<DT> Item pertama.
<DD> Penjelasan tentang item pertama.
<DT> Item kedua.
<DD> Penjelasan tentang item kedua
</DL>
Hasil dari kode di atas
adalah :
Item
pertama.
Penjelasan tentang item pertama.
Item
kedua.
Penjelasan tentang item kedua
Tidak ada komentar:
Posting Komentar