1. Struktur dasar HTML
HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/").
Sebuah halaman web minimal mempunyai empat buat tag, yaitu :
• HTML
Sebagai tanda awal dokumen HTML.
• HEAD
Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
• TITLE
Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).
• BODY
Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.
Atribut : BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.
2. ALGORITMA KEY PADA WEB
Disini akan dijelaskan tentang algoritma key yang dipakai di dalam pembuatan web pada umumnya.Pada algoritma ini menggunakan JavaScript untuk menuliskan halaman tag HTML untuk menyusun sebuah halaman web.
Javascript merupakan modifikasi dari bahasa C++ dengan pola penulisan yang lebih sederhana. Interpreter bahasa ini sudah disiapkan asp ataupun internet explorer. Secara khusus beberapa hal penting dalam Javascript adalah:
• Menggunakan blok awal “{” dan blok akhir “}”.
• Automatic conversation dalam pengoperasian tipe data berbeda.
• Sensitif case, sehingga programmer harus ekstra hati-hati dalam menggunakan nama variable, fungsi dan lain-lain.
• Extension menggunakan “.js”
• Setiap statement dapat diakhiri dengan “;” sebagaimana halnya pada C++ tetapi dapat juga tidak.
• Jika tidak didukung oleh browser versi lama, scriptnya dapat disembunyikan diantara tag “<!--” dan “-- >”
• Jika program terlalu panjang dalam satu baris dapat disambung dengan karakter “\”.
3. Macam-macam Tag HTML
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) STRONG Strong ADDRESS>
Italic (Bentuk miring)
CITE Digunakan untuk quoting text COD Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda) SAMP Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda) KBD Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda) BIG Ukuran teks akan lebih besar satu ukuran
SMALL Ukuran teks akan lebih kecil satu ukuran SUP Membuat tekssuperscript SUB membuat tekssub script ABBREV Abbreviations ACRONYM Untuk akronim PERSON Digunakan untuk indexing <Q> Membuat short inline quotation <VAR> Membuat variable name, selalu dalam italics.
IMAGES
Images :
Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda. Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height
Contoh :
<IMG SRC="logo.gif" alt="Ini adalah logo halaman pembuka" width=200 height=100> <IMG SRC="logo.gif" hspace=10 vspace=5 align=right border=2>
Links : Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah.
Contoh : <A HREF="halaman2.html">Klik di sini</A> Untuk membuat link ke halaman lain. <A HREF="mailto:webmaster@klik-kanan.com">Klik di sini</A> Untuk membuat link pada alamat e-mail. <A HREF="#aplikasi">Klik di sini</A> Untuk membuat link ke bagian lain pada halaman yang sama. <A HREF="halamanlain.html#aplikasi">Klik di sini</A> Untuk membuat link kebagian lain pada halaman yang berbeda. <A HREF="halaman2.html"><IMG SRC="gambar.gif"></A> Untuk membuat link dengan menggunakan gambar.
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 nomer 2
Item nomer 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
TABEL
Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau baris. Contohnya seperti pada halaman web yang sedang Anda baca ini.
Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE>
<TABLE> Terdiri dari atribut :
• align - perataan : rata kiri (left), tengah (center) atau kanan (right).
• bgcolor - warna latar belakang (background) dari tabel.
• border - ukuran lebar border tabel (dalam pixel).
• cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).
• cellspacing - jarak antar cell (dalam pixel).
• width - ukuran tabel dalam pixel atau percent.
Contoh : <TABLE align="center" bgcolor="#0000FF" border="2" cellpadding="5" cellspacing="2" width="90%">
<TR> Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
•align - perataan : rata kiri (left), tengah (center) atau kanan (right).
• bgcolor - warna latar belakang dari baris.
• valign - perataan vertikal : top, middle atau bottom.
Contoh : <TR align="right" bgcolor="#0000FF" valign=top>
<TD> Tag ini digunakan untuk membuat kolom baru pada tabel.
• align - perataan
• background - image yang digunakan sebagai latar belakang dari kolom.
• bgcolor - warna latar belakang
• colspan - lihat gambar contoh
• height - ukuran tinggi cell dalam pixels.
• nowrap - membuat supaya isi dari kolom tetap berada pada satu baris.
• rowspan - lihat gambar contoh
• valign - perataan vertikal :top, middle atau bottom.
• width - ukuran kolom dalam pixel atau percen.
Contoh : <TD align="right" background="back.gif" bgcolor="#0000FF" colspan="3" height="200" nowrap rowspan="2" valign="bottom" width="300">
4.Peletakan Script
Section head
<html>
<head>
<title> Skrip Javascript </title>
<script language="JavaScript">
function message()
{
alert("This event called with the onload event")
}
</script>
</head>
<body onload="message()">
</body>
</html>
Section body
<html>
<head>
<title> Skrip Javascript </title>
</head>
<body >
<script language=”JavaScript”>
alert(“This event called without the onload event”)
</script>
</body>
</html>
External source
(alert.js)
alert(“This event called with external source”)
(js_external.html)
<html>
<head>
<title> Skrip Javascript </title>
</head>
<body >
<script language=”JavaScript” src =”alert.js”>
</script>
</body>
</html>
5.Deklarasi Variabel dan Konstanta
• Variabel harus dimulai dengan karakter
• Penamaan variable satu kata
• Sensitive case jadi penulisannya harus benar-benar sama
• Panjang nama max. 255 karakter
• Dalam satu lingkup harus unik, jadi tidak boleh sama
• Dapat langsung diisi dengan nilai ketika pertama kali dideklarasikan
<html>
<head>
<title> Skrip Konstanta dan Variabel </title>
</head>
<body >
<script language=”JavaScript”>
var vstr=”Good Morning”\
Object Document
<html>
<head>
<title>Test Object Document</title>
location.href="http://localhost/"
</head>
<body >
<br><A HREF="1.html" >test1</A>
<br><A HREF="2.html" >test2</A>
<br><A HREF="3.html" >test3</A><br>
<script language="JavaScript">
var n,m
document.write("<h1>Current Document Information: </h1><hr><br>")
document.write("Title : " + document.title + "<br>")
document.write("Location : " + document.location + "<br>")
document.write("Last Modified : " + document.lastModified + "<br>")
m = document.links.length-1
for (n=0;n<=m;n++)
document.write("Links("+n+")=" +document.links(n).href+"<br>")
document.write("Link Color : " +document.linkColor+ "<br>")
</script>
</body>
</html>
REFERENSI ISI POSTING
