MATERI CSS ,JavaScript , HTML
2.1 Pengenalan css
Apa Itu CSS?
CSS adalah singkatan dari Cascading Style Sheets.
Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang
di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia
kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling
berhubungan untuk mengatur format / tampilan suatu halaman HTML.
Keuntungan Penggunaan CSS
Jika anda memiliki beberapa halaman website dimana
anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan
dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu
per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web
memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah
font di semua halaman web dari arial ke trebuchet.
Jadi, keuntungan menggunakan CSS, lebih praktis!
Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara
yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser
yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa
tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus
browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di
semua browser.
2.2 Syntax
Syntax / kalimat CSS terdiri dari beberapa set
peraturan yang memiliki: 1 selector, 1 property, 1 value.
Format penulisan kalimat CSS:
selector {
property: value }
Selector itu
untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property
untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah
nilai dari pengaturannya.
Contoh
Syntax:
h1 { color:
red }
Contoh di
atas menunjukkan
Selector: h1
Property:
color
Value: red
Kalau
diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari
h1 ke warna merah (red).
Pengelompokan Selectors
Anda dapat
menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan
koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua
menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 {
color: red }
Perhatikan
penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Untuk
mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3
{color:red; font-family:arial; font-size:150%;}
Pada contoh
di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan
type font arial, dan ukuran font 150%.
Cara Penulisan Yang Baik
Sangat
disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan
property dan values nya di indent. Ya cuma biar rapih dan lebih mudah di baca
aja sih, ga harus kok.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
Sekarang
anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya
akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.
CSS Comment
Kadang kala,
ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi
catatan pengingat.
Anda bisa
menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala
teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi
hanya sebagai catatan untuk diri anda.
/* Tulis
komentar anda di sini */
p
{
text-align:
justify;
/* Tulis
komentar anda di sini */
color: blue;
font-family:
arial;
}
2.3 Implementasi css
Ada 4 cara memasang kode CSS ke dalam kode HTML /
halaman web, yaitu:
·
Inline CSS
·
Embed atau
memasang kode css ke dalam bagian <head>
·
Nge link ke
external CSS
·
Import CSS
file
Yuk kita
bahas satu per satu…
Inline CSS
Kode CSS
dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini
tidak memerlukan penulisan selector dalam kode CSS.
Cara ini
sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:
<P
style=”color:blue”>
Isi paragraf.
</p>
Pada contoh
di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru.
Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini
hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan
CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan
syntax property: value.
Embedded CSS
Anda bisa
juga menempelkan kode CSS di antara tag <head> dan </head>.
Penulisan CSS dengan cara ini diawali dengan tag <style> dan
diakhiri dengan tag </style>.
Contoh:
<head>
<style
type="text/css" media=screen>
p
{color:blue;}
</style>
</head>
Dalam contoh
di atas semua elemen <P> dalam halaman web tersebut akan
diformat menggunakan font berwarna biru.
External CSS
Kode CSS
external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css.
Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang
anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang
digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam
pengimplementasian CSS dengan cara ini.
Contoh:
1.
Anda membuat
satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css,
lalu tuliskan kode-kode css di dalam file tersebut.
2.p
{font-family: arial; font-size: small;}
3.h1 {color:
red; }
4.
Langkah kedua
adalah memanggil file style.css dari semua halaman web. Caranya dengan
memasukkan kode di bawah ini, di antara tag <head> dan </head>
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
Import CSS
Anda bisa
juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import
"style.css";
atau
@import
url("style.css");
Penggunaan Lebih dari Satu Kode CSS
Apabila ada
lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah
kode yang lebih spesifik.
Misalkan
dalam satu halaman web, menggunakan eksternal style sheet untuk memformat
elemen H1 sbb:
h1 {
color: red;
text-align:
left;
font-size:
8pt
}
Sementara di
halaman web yang sama, di antara tag <head> ada kode CSS sbb:
h1 {
text-align:
right;
font-size:
20pt
}
Perhatikan
bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left
sementara dari internal style sheet, text-align=right.
Dalam kasus
seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal
ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam
contoh di atas, kode yang akan diimplementasikan adalah sbb:
color: red;
text-align:
right;
font-size:
20pt
2.4
Class dan Id selector
Class
Selector
Class selector adalah penggabungan beberapa properties
yang digunakan lebih dari satu kali.
Cara
penulisan Class Selector:
.nama-class
{property:value;}
Untuk
menempelkan class ke dalam tag HTML:
taghtml.nama-class
{Property:value;}
Perhatikan
tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class
selector di luar kode HTML anda menggunakan tag <div class=nama-class>
dan di akhiri dengan tag </div>.
Contoh:
Penulisan
kode CSS:
.tengah
{text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian
kode CSS
<div
class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Hasil:
Teks
tengah akan berwarna merah.
Tag H1
tengah akan berwarna hitam
Tag H1 kiri akan berwarna biru
ID Selector
ID Selector
mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk
memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya
untuk memformat bagian menu / sidebar.
Cara
penulisan ID Selector:
#nama-ID
{property:value;}
Untuk
menempelkan ID selector ke dalam tag HTML:
taghtml#nama-ID
{Property:value;}
Perhatikan
tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di
luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri
dengan tag </div>.
MATERI HTML
2.1
PENGERTIAN
HTML
Sebelum kita melangkah lebih jauh ada baiknya Anda
tahu apa itu HTML. HTML atau Hypertext Markup Language 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.
Sekarang ini
di pasaran terdapat banyak sekali HTML authoring (software yang digunakan untuk
membuat atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS
FrontPage sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak
akan memperoleh hasil yang maksimal. Mengapa ? Karena walaupun
software-software tersebut semakin menawarkan kemudahan dalam membuat halaman
web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut
secara manual. Terutama untuk halaman web yang sangat komplek.
Dalam
tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari desain web.
Yang dibutuhkan hanya sebuah word processor. Anda bisa menggunakan Notepad,
WordPad, MS Word atau yang lainnya. Tapi yang paling mudah adalah menggunakan
Notepad.
2.2
VERSI HTML
HTML
sekarang sudah mencapai versi 4.0 (saat artikel ini ditulis). Sebelum
digunakan, HTML harus diuji secara ketat oleh suatu badan yang bernama World
Wide Web Concortium (W3C). Setiap penambahan/peningkatan versi, terdapat
beberapa tambahan-tambahan tag dan fasilitas yang tidak dimiliki oleh
versi sebelumnya. Tentunya versi yang telah dikeluarkan ini harus menjadi
standar bagi browser. Bilamana browser ini tidak mendukung versi
tertentu, maka browser tersebut tidak dapat menampilkan format HTML yang
kita buat. Oleh karena itu, untuk melihat halaman web yang diformat dengan HTML
versi baru, harus memiliki browser yang sudah mendukung versi HTML
tersebut
VERSI -
VERSI HTML
HTML 1.0
Ini adalah awal mula dari HTML (pendahulunya). Pada versi ini masih terlihat
beberapa kelemahan dan masih sangat sederhana. Kemampuan yang dimiliki oleh
versi 1.0 ini hanya terbatas pada heading, paragraf, hypertext, list dan setak
tebal atau miring pada teks.
HTML 2.0
Versi ini telah ditambahkan kemampuan menyisipkan form didalamnya, sehingga
kita dapat membuat halaman yang interaktif. Pengunjung dapat mengisi nama,
alamat, email dan sebagainya.
HTML 3.0
Versi ini tidak bertahan lama karena kemudian disempurnakan oleh versi 3.2
HTML 3.2
Pada versi ini telah diperkenalkan teknik peletakan teks pada sekeliling
gambar, latar belakang berupa gambar, cascading style sheet, tabel, frame dan
lain sebagainya. Versi ini juga mendukung Javascript, VBScript dan lain
sebagainya.
HTML 4.0
Versi terakhir ini yang resmi dirilis ini telah menunjukkan beberapa
kelebihan-kelebihan dari versi sebelumnya. Perubahan-perubahan ini hampir
mencakup semua tag-tag HTML sebelumnya. Di samping itu pada versi ini
ditambahkan tag-tag baru seperti ABBR, ACRONYM, BUTTON, PARAM, BUTTON, TBODY,
THEAD dan lain sebagainya.
2.3
KEKURANGAN DAN KELEBIHAN HTML
Seperti yang
kita tahu bahwa, setiap bahasa dan program mempunyai kelebihan dan Kekurangan.
Ada baiknya kita mengetahui kelebihan dan kekurangan dari HTML sehingga kita
bisa memaksimalkan pengetahuan dan wawasan kita dalam mengeksplorasi dunia
browser.
Kelebihan-kelebihan HTML antara lain:
·
Merupakan
bahasa penkodean yang lintas platform (cross platform), maksudnya HTML dapat
digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam
sistem operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup
dengan menggunakan editor karakter ASCII.
·
Dapat
disisipi gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan
gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada
suatu halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa
rectangular (kotak), poligon (kurva tak beraturan) atau lingkaran digunakan
untuk 'jump' ke halaman lain, atau link ke halaman di luar web yang
bersangkutan.
·
Dapat
disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia
Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki
plug-in khusus untuk menjalankan file-file animasi ini).
·
Dapat
disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript,
VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya.
·
Bukan
merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara
menjalanakannya cukup dengan menggunakan browser.
Adapun kekurangan dari HTML ini adalah:
·
Menghasilkan
halaman yang statis, untuk memperoleh halaman yang dinamis harus menggunakan
bahasa pemrograman tertentu seperti Javascript atau VBScript dan animasi
seperti Flash atau Shockwave.
·
Memiliki
tag-tag yang begitu banyak sehingga susah dipelajari untuk yang masih awam.
·
Tidak dapat
menghasilkan halaman yang interaktif. Interaktif di sini maksudnya client dapat
berinteraksi dengan server. Untuk keperluan itu, HTML harus disisipi bahasa
pemrograman yang dapat menangani hal tersebut, contohnya Perl atau Tcl.
2.4
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).
Contoh :
<TITLE>Tips
HTML -- www.klik-kanan.com</TITLE>
<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.
Contoh :
<BODY
bgcolor="#000000" background="images/pcb.gif"
text="#FFFFFF" link="#FF0000" vlink="FFFF00"
alink="#0000FF">
Sebuah contoh sederhana dokumen HTML :
<HTML>
<HEAD>
<TITLE>Halaman pembuka
</TITLE>
</HEAD>
<BODY
bgcolor="#FFFFFF" background="images/gambar1.gif"
text="#FF0000">
Letakkan text, images, dan link Anda di sini
</BODY>
</HTML>
2.5
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 :
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
lainnya :
<FONT
SIZE=2 FACE="Times_New_Roman" COLOR="#0066CC">
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)
<STRONG> Strong
<ADDRESS>
<CITE> Digunakan untuk quoting text
<CODE> 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.
2.6 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:
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>
Hasil dari
kode di atas adalah :
2.7
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.
2.8
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">
|
<table
width="100" border="1" cellspacing="2"
cellpadding="2">
<tr>
<td bgcolor="#0000FF"> </td>
<td bgcolor="#FFFF66"> </td>
<td rowspan="2" bgcolor="#FF3366"> </td>
</tr>
<tr>
<td colspan="2"
bgcolor="#33CC66"> </td>
</tr>
<tr>
<td colspan="3"
bgcolor="#FFCC99"> </td>
</tr>
</table>
|
|
<table
width="100" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td bgcolor="#0000FF"> </td>
<td bgcolor="#FFFF66"> </td>
<td rowspan="2"
bgcolor="#FF3366"> </td>
</tr>
<tr>
<td colspan="2"
bgcolor="#33CC66"> </td>
</tr>
<tr>
<td colspan="3"
bgcolor="#FFCC99"> </td>
</tr>
</table>
|
2.9
FRAMES
|
1
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
2
<FRAMESET cols="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
3
<FRAMESET rows="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
4
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
5
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
</FRAMESET></FRAMESET>
6
<FRAMESET cols="*,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET rows="15%,15%,70%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET></FRAMESET>
7
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame3">
<FRAME SRC="menu2.htm" NAME="Frame4">
</FRAMESET></FRAMESET>
8
<FRAMESET rows="15%,70%,15%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="15%,70%,15%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET>
<FRAME SRC="homepage.htm" NAME="BIG">
</FRAMESET></FRAMESET>
|
2.10
Kumpulan Tag HTML
<!-- -->
|
Memberi komentar atau keterangan. Kalimat yang
terletak pada tag kontiner ini tidak akan terlihat pada browser
|
<a href>
|
Membuat link ke halaman lain atau ke bagian lain
dari halaman tersebut
|
<a name>
|
Membuat nama bagian yang didefinisikan pada link
pada halaman yang sama
|
<applet>
|
Sebagai awal dari Java applets
|
<area>
|
Mendefinisikan daerah yang dapat diklik (link) pada
image map
|
<b>
|
Membuat teks tebal
|
<basefont>
|
Membuat atribut teks default seperti jenis, ukuran
dan warna font
|
<bgsound>
|
Memberi (suara latar) background sound pada halaman
web
|
<big>
|
Memperbesar ukuran teks sebesar satu point dari
defaultnya
|
<blink>
|
Membuat teks berkedip
|
<body>
|
Tag awal untuk melakukan berbagai pengaturan
terhadap text, warna link & visited link
|
<br>
|
Pindah baris
|
<caption>
|
Membuat caption pada tabel
|
<center>
|
Untuk perataan tengah terhadap teks atau gambar
|
<comment>
|
Meletakkan komentar pada halaman web tidak tidak
akan nampak pada browser
|
<dd>
|
Indents teks
|
<div>
|
Represents different sections of text.
|
<embed>
|
Menambahkan sound or file avi ke halaman web
|
<fn>
|
Seperti tag <a name>
|
<font>
|
Mengganti jenis, ukuran, warna huruf yang akan
digunakan utk teks
|
<form>
|
Mendefinisikan input form
|
<frame>
|
Mendefinisikan frame
|
<frameset>
|
Mendefinisikan attribut halaman yang akan
menggunakan frame
|
<h1> ... <h6>
|
Ukuran font
|
<head>
|
Mendefinisikan head document.
|
<hr>
|
Membuat garis horizontal
|
<html>
|
Bararti dokumen html
|
<i>
|
Membuat teks miring
|
<img>
|
Image, imagemap atau an animation
|
<input>
|
Mendefinisikan input field pada form
|
<li>
|
Membuat bullet point atau baris baru pada list
(berpasangan dengan tag <dir>, <menu>, <ol> and <ul>
)
|
<map>
|
Mendefinisikan client-side map
|
<marquee>
|
Membuat scrolling teks (teks berjalan) - hanya pada
MS IE
|
<nobr>
|
Mencegah ganti baris pada teks atau images
|
<noframes>
|
Jika browser user tidak mendukung frame
|
<ol>
|
Mendefinisikan awal dan akhir list
|
<p>
|
Ganti paragraf
|
<pre>
|
Membuat teks dengan ukuran huruf yg sama
|
<script>
|
Mendefinisikan awal script
|
<table>
|
Membuat tabel
|
<td>
|
Kolom pada tabel
|
<title>
|
Mendefinisikan title
|
<tr>
|
Baris pada tabel
|
<u>
|
Membuat teks bergaris bawah
|
JavaScript
Dari Wikibuku
bahasa Indonesia, sumber buku teks bebas .
JavaScript
adalah bahasa pemrograman ditafsirkan bahwa sebagian besar digunakan untuk
mengubah halaman web statis menjadi halaman dinamis dan interaktif setelah web
browser telah selesai men-download sebuah halaman web. Misalnya, jam
ditampilkan pada halaman yang update sendiri untuk menunjukkan waktu saat ini
pada komputer pengguna. Desain JavaScript dipengaruhi oleh banyak bahasa
pemrograman, termasuk C, tetapi dimaksudkan untuk lebih digunakan oleh non-programmer.
JavaScript tidak didasarkan pada atau terkait ke Java, ini adalah
kesalahpahaman umum. JavaScript seringkali disertakan dalam file HTML atau link
dari file HTML dan dijalankan secara lokal oleh web browser. Ini berarti bahwa
server bebas untuk mengerjakan sesuatu yang lain daripada pemrosesan instruksi
untuk setiap klien. Hal ini telah membuat JavaScript pilihan yang lebih populer
daripada bahasa yang memerlukan server untuk melakukan pengolahan.
Beberapa
contoh menggunakan adalah:
- berputar
atau bergulir teks.
- membuat
bagian dari suatu bentuk terlihat atau tidak terlihat. Sebagai contoh,
dalam sebuah formulir pemesanan, jika pengguna kutu kotak centang
"menyampaikan kepada alamat yang berbeda", bagian ekstra dengan
kotak teks dengan streetname pengiriman, nomor, dan tempat dapat dibuat
terlihat.
- drop
down menu.
- mengambil
informasi tambahan dari server (Ajax) untuk sebagian me-refresh halaman.
- memvalidasi
input pengguna pada formulir.
- perhitungan
tanpa perlu kembali ke server.
- menentukan
jenis browser.
jelas
beberapa informasi dari jenis tertentu dari pengguna, seperti alamat email dari
bot.
Bahasa
server-side seperti PHP atau Perl adalah cara terbaik untuk memodifikasi
halaman sebelum loading, meskipun ada beberapa kasus Server-JavaScript (SJS).
Tidak semua browser memiliki juru JavaScript (seperti browser hanya teks Lynx),
atau menjalankan versi terbaru. Selain itu, beberapa pengguna mematikan
kemampuan JavaScript dengan pilihan. Umumnya, halaman web harus menggunakan
JavaScript untuk meningkatkan pengalaman pengguna, bukan bergantung padanya.
Hal ini sering disebut sebagai degradasi anggun (yaitu jika pengguna telah
dimatikan JavaScript, halaman harus selalu masih beban, menyajikan informasi
yang sama tetapi tanpa fungsi tambahan yang disediakan oleh JavaScript.)
Hubungan ke Java
Meskipun
nama yang mirip, Java dan JavaScript, hampir tidak ada hubungannya selain dari
sintaks antara dua bahasa. Karena keduanya sering digunakan di Internet, dua
dapat bingung dengan belum tahu. Bahkan mereka dikembangkan oleh dua perusahaan
yang sama sekali berbeda, dengan tujuan yang berbeda dan tujuan dalam pikiran:
Netscape mengembangkan JavaScript dan Sun Microsystems mengembangkan Java.
JavaScript dapat diinterpretasikan oleh browser yang paling langsung dan cepat,
sementara Java memerlukan terpisah "Java Virtual Machine" harus
dimulai sebelum menjalankan. JavaScript dan Java menggunakan sintaks mirip
(berdasarkan bahasa C) tetapi banyak dari perintah yang sangat berbeda. Ada
juga perbedaan teknis. Java adalah bahasa diketik statis yang membutuhkan
deklarasi semua variabel dan jenis mereka (misalnya integer, string atau
boolean). Sebaliknya, Javascript adalah "longgar" bahasa diketik,
memungkinkan variabel yang akan digunakan tanpa deklarasi sebelumnya. Sebagai
contoh, membandingkan dua metode penulisan ke tampilan (halaman). Di Java,
untuk menulis "Halo dunia!", Kode akan membaca: System.out.println
("Halo dunia!"), Sedangkan dalam JavaScript (di browser), akan
berkata: document.write ("Halo dunia! ");.
Sejarah
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape
dibawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript,
dan akhirnya menjadi JavaScript.[4][5]
Navigator sebelumnya telah
mendukung Java untuk lebih bisa dimanfaatkan para programmer
yang non-Java.[6]
Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk
mengakomodasi hal tersebut.[6]
Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript,
walaupun tidak ada hubungan bahasa antara Java dengan JavaScript.[6]
JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk
membuat efek rollover baik di gambar maupun teks, dan yang penting juga
adalah untuk membuat AJAX.[6]
JavaScript adalah bahasa yang digunakan untuk AJAX.[6]
Penulisan JavaScript
Kode
JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh
di tag <head> yang dibuka dengan tag<script
type="teks/javascript">
.[7]
<scripttype="teks/javascript">
alert("Halo Dunia!");
</script>
Kode JavaScript juga bisa diletakkan di file tersendiri yang
berekstensi .js (singkatan dari JavaScript).[7]
Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal
<head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan
contoh kode seperti berikut:[7]
<scripttype="teks/javascript"src="alamat.js">
</script>
Script pada bagian head
Script
ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau
dipanggil berdasarkan trigger pada event tertentu.[7]
Peletakkan script di head akan menjamin skript di-load terlebih dahulu sebelum
digunakan (dipanggil).[7]
<html>
<head>
<scripttype="teks/javascript">
...
</script>
</head>
</html>
Script pada Body
Script ini dieksekusi ketika halaman di-load sampai di bagian
<body>.[7]
Ketika menempatkan script pada bagian <body> berarti antara isi dan
JavaScript dijadikan satu
bagian.[7]
<html>
<head>
</head>
<body>
<scripttype="teks/javascript">
...
</script>
</body>
</html>
Jumlah JavaScript di <head> dan <body> yang
ditempatkan pada dokumen tidak terbatas.[7]
External JavaScript
Terkadang ada yang menginginkan menjalankan JavaScript yang
sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan
jika harus menulis
ulang script yang diinginkan di setiap halaman.[7]
Maka JavaScript dapat ditulis di file secara eksternal.[7]
Jadi, antara dokumen HTML
dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument
HTML.[7]
Berkas JavaScript tersebut disimpan dengan ekstensi .js.[7]
JavaScript : js/xxx.jsdocument.write("pesan ini tampil ketika halaman
diload");
Untuk menggunakan eksternal JavaScript (.js) dipakai atribut
"src" pada tag <script> pada halaman HTML-nya.[7]
<html>
<head>
</head>
<body>
<scriptsrc="xxx.js">
</script>
<p>Script di atas berada di berkas "xx.js" (eksternal) </p>
</body>
</html>
Adaptasi JavaScript pada Wikipedia
Biasanya JavaScript digunakan sebagai peralatan (tool/gadget)
pada halaman pengguna. Fungsinya bermacam-macam, misalnya peralatan guna
menambah kategori dengan lebih mudah, contohnya dapat dilihat pada : HotCat. Lain dari pada itu dapat di simak
lebih lanjut di :
Referensi
3. ^Andi Sunyoto, M. Kom, Ajax Membangun Web dengan
Teknologi Asynchronouse JavaScript & XML, ANDI
6. ^abcdeAli Zaki & Smitdev Community, SPP AJAX untuk Pemula,
halaman 27. Elex Media Komputindo
7. ^abcdefghijklmZainal Arifin & Smitdev Community, 36 Menit Belajar
Komputer: Php Dan Mysql. Elex Media Komputindo.
MATERI CSS ,JavaScript , HTML
2.1 Pengenalan css
Apa Itu CSS?
CSS adalah singkatan dari Cascading Style Sheets.
Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang
di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia
kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling
berhubungan untuk mengatur format / tampilan suatu halaman HTML.
Keuntungan Penggunaan CSS
Jika anda memiliki beberapa halaman website dimana
anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan
dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu
per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web
memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah
font di semua halaman web dari arial ke trebuchet.
Jadi, keuntungan menggunakan CSS, lebih praktis!
Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara
yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser
yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa
tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus
browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di
semua browser.
2.2 Syntax
Syntax / kalimat CSS terdiri dari beberapa set
peraturan yang memiliki: 1 selector, 1 property, 1 value.
Format penulisan kalimat CSS:
selector {
property: value }
Selector itu
untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property
untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah
nilai dari pengaturannya.
Contoh
Syntax:
h1 { color:
red }
Contoh di
atas menunjukkan
Selector: h1
Property:
color
Value: red
Kalau
diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari
h1 ke warna merah (red).
Pengelompokan Selectors
Anda dapat
menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan
koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua
menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 {
color: red }
Perhatikan
penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Untuk
mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3
{color:red; font-family:arial; font-size:150%;}
Pada contoh
di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan
type font arial, dan ukuran font 150%.
Cara Penulisan Yang Baik
Sangat
disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan
property dan values nya di indent. Ya cuma biar rapih dan lebih mudah di baca
aja sih, ga harus kok.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
Sekarang
anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya
akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.
CSS Comment
Kadang kala,
ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi
catatan pengingat.
Anda bisa
menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala
teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi
hanya sebagai catatan untuk diri anda.
/* Tulis
komentar anda di sini */
p
{
text-align:
justify;
/* Tulis
komentar anda di sini */
color: blue;
font-family:
arial;
}
2.3 Implementasi css
Ada 4 cara memasang kode CSS ke dalam kode HTML /
halaman web, yaitu:
·
Inline CSS
·
Embed atau
memasang kode css ke dalam bagian <head>
·
Nge link ke
external CSS
·
Import CSS
file
Yuk kita
bahas satu per satu…
Inline CSS
Kode CSS
dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini
tidak memerlukan penulisan selector dalam kode CSS.
Cara ini
sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:
<P
style=”color:blue”>
Isi paragraf.
</p>
Pada contoh
di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru.
Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini
hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan
CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan
syntax property: value.
Embedded CSS
Anda bisa
juga menempelkan kode CSS di antara tag <head> dan </head>.
Penulisan CSS dengan cara ini diawali dengan tag <style> dan
diakhiri dengan tag </style>.
Contoh:
<head>
<style
type="text/css" media=screen>
p
{color:blue;}
</style>
</head>
Dalam contoh
di atas semua elemen <P> dalam halaman web tersebut akan
diformat menggunakan font berwarna biru.
External CSS
Kode CSS
external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css.
Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang
anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang
digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam
pengimplementasian CSS dengan cara ini.
Contoh:
1.
Anda membuat
satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css,
lalu tuliskan kode-kode css di dalam file tersebut.
2.p
{font-family: arial; font-size: small;}
3.h1 {color:
red; }
4.
Langkah kedua
adalah memanggil file style.css dari semua halaman web. Caranya dengan
memasukkan kode di bawah ini, di antara tag <head> dan </head>
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
Import CSS
Anda bisa
juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import
"style.css";
atau
@import
url("style.css");
Penggunaan Lebih dari Satu Kode CSS
Apabila ada
lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah
kode yang lebih spesifik.
Misalkan
dalam satu halaman web, menggunakan eksternal style sheet untuk memformat
elemen H1 sbb:
h1 {
color: red;
text-align:
left;
font-size:
8pt
}
Sementara di
halaman web yang sama, di antara tag <head> ada kode CSS sbb:
h1 {
text-align:
right;
font-size:
20pt
}
Perhatikan
bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left
sementara dari internal style sheet, text-align=right.
Dalam kasus
seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal
ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam
contoh di atas, kode yang akan diimplementasikan adalah sbb:
color: red;
text-align:
right;
font-size:
20pt
2.4
Class dan Id selector
Class
Selector
Class selector adalah penggabungan beberapa properties
yang digunakan lebih dari satu kali.
Cara
penulisan Class Selector:
.nama-class
{property:value;}
Untuk
menempelkan class ke dalam tag HTML:
taghtml.nama-class
{Property:value;}
Perhatikan
tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class
selector di luar kode HTML anda menggunakan tag <div class=nama-class>
dan di akhiri dengan tag </div>.
Contoh:
Penulisan
kode CSS:
.tengah
{text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian
kode CSS
<div
class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Hasil:
Teks
tengah akan berwarna merah.
Tag H1
tengah akan berwarna hitam
Tag H1 kiri akan berwarna biru
ID Selector
ID Selector
mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk
memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya
untuk memformat bagian menu / sidebar.
Cara
penulisan ID Selector:
#nama-ID
{property:value;}
Untuk
menempelkan ID selector ke dalam tag HTML:
taghtml#nama-ID
{Property:value;}
Perhatikan
tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di
luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri
dengan tag </div>.
MATERI HTML
2.1
PENGERTIAN
HTML
Sebelum kita melangkah lebih jauh ada baiknya Anda
tahu apa itu HTML. HTML atau Hypertext Markup Language 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.
Sekarang ini
di pasaran terdapat banyak sekali HTML authoring (software yang digunakan untuk
membuat atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS
FrontPage sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak
akan memperoleh hasil yang maksimal. Mengapa ? Karena walaupun
software-software tersebut semakin menawarkan kemudahan dalam membuat halaman
web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut
secara manual. Terutama untuk halaman web yang sangat komplek.
Dalam
tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari desain web.
Yang dibutuhkan hanya sebuah word processor. Anda bisa menggunakan Notepad,
WordPad, MS Word atau yang lainnya. Tapi yang paling mudah adalah menggunakan
Notepad.
2.2
VERSI HTML
HTML
sekarang sudah mencapai versi 4.0 (saat artikel ini ditulis). Sebelum
digunakan, HTML harus diuji secara ketat oleh suatu badan yang bernama World
Wide Web Concortium (W3C). Setiap penambahan/peningkatan versi, terdapat
beberapa tambahan-tambahan tag dan fasilitas yang tidak dimiliki oleh
versi sebelumnya. Tentunya versi yang telah dikeluarkan ini harus menjadi
standar bagi browser. Bilamana browser ini tidak mendukung versi
tertentu, maka browser tersebut tidak dapat menampilkan format HTML yang
kita buat. Oleh karena itu, untuk melihat halaman web yang diformat dengan HTML
versi baru, harus memiliki browser yang sudah mendukung versi HTML
tersebut
VERSI -
VERSI HTML
HTML 1.0
Ini adalah awal mula dari HTML (pendahulunya). Pada versi ini masih terlihat
beberapa kelemahan dan masih sangat sederhana. Kemampuan yang dimiliki oleh
versi 1.0 ini hanya terbatas pada heading, paragraf, hypertext, list dan setak
tebal atau miring pada teks.
HTML 2.0
Versi ini telah ditambahkan kemampuan menyisipkan form didalamnya, sehingga
kita dapat membuat halaman yang interaktif. Pengunjung dapat mengisi nama,
alamat, email dan sebagainya.
HTML 3.0
Versi ini tidak bertahan lama karena kemudian disempurnakan oleh versi 3.2
HTML 3.2
Pada versi ini telah diperkenalkan teknik peletakan teks pada sekeliling
gambar, latar belakang berupa gambar, cascading style sheet, tabel, frame dan
lain sebagainya. Versi ini juga mendukung Javascript, VBScript dan lain
sebagainya.
HTML 4.0
Versi terakhir ini yang resmi dirilis ini telah menunjukkan beberapa
kelebihan-kelebihan dari versi sebelumnya. Perubahan-perubahan ini hampir
mencakup semua tag-tag HTML sebelumnya. Di samping itu pada versi ini
ditambahkan tag-tag baru seperti ABBR, ACRONYM, BUTTON, PARAM, BUTTON, TBODY,
THEAD dan lain sebagainya.
2.3
KEKURANGAN DAN KELEBIHAN HTML
Seperti yang
kita tahu bahwa, setiap bahasa dan program mempunyai kelebihan dan Kekurangan.
Ada baiknya kita mengetahui kelebihan dan kekurangan dari HTML sehingga kita
bisa memaksimalkan pengetahuan dan wawasan kita dalam mengeksplorasi dunia
browser.
Kelebihan-kelebihan HTML antara lain:
·
Merupakan
bahasa penkodean yang lintas platform (cross platform), maksudnya HTML dapat
digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam
sistem operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup
dengan menggunakan editor karakter ASCII.
·
Dapat
disisipi gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan
gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada
suatu halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa
rectangular (kotak), poligon (kurva tak beraturan) atau lingkaran digunakan
untuk 'jump' ke halaman lain, atau link ke halaman di luar web yang
bersangkutan.
·
Dapat
disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia
Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki
plug-in khusus untuk menjalankan file-file animasi ini).
·
Dapat
disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript,
VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya.
·
Bukan
merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara
menjalanakannya cukup dengan menggunakan browser.
Adapun kekurangan dari HTML ini adalah:
·
Menghasilkan
halaman yang statis, untuk memperoleh halaman yang dinamis harus menggunakan
bahasa pemrograman tertentu seperti Javascript atau VBScript dan animasi
seperti Flash atau Shockwave.
·
Memiliki
tag-tag yang begitu banyak sehingga susah dipelajari untuk yang masih awam.
·
Tidak dapat
menghasilkan halaman yang interaktif. Interaktif di sini maksudnya client dapat
berinteraksi dengan server. Untuk keperluan itu, HTML harus disisipi bahasa
pemrograman yang dapat menangani hal tersebut, contohnya Perl atau Tcl.
2.4
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).
Contoh :
<TITLE>Tips
HTML -- www.klik-kanan.com</TITLE>
<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.
Contoh :
<BODY
bgcolor="#000000" background="images/pcb.gif"
text="#FFFFFF" link="#FF0000" vlink="FFFF00"
alink="#0000FF">
Sebuah contoh sederhana dokumen HTML :
<HTML>
<HEAD>
<TITLE>Halaman pembuka
</TITLE>
</HEAD>
<BODY
bgcolor="#FFFFFF" background="images/gambar1.gif"
text="#FF0000">
Letakkan text, images, dan link Anda di sini
</BODY>
</HTML>
2.5
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 :
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
lainnya :
<FONT
SIZE=2 FACE="Times_New_Roman" COLOR="#0066CC">
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)
<STRONG> Strong
<ADDRESS>
<CITE> Digunakan untuk quoting text
<CODE> 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.
2.6 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:
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>
Hasil dari
kode di atas adalah :
2.7
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.
2.8
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">
|
<table
width="100" border="1" cellspacing="2"
cellpadding="2">
<tr>
<td bgcolor="#0000FF"> </td>
<td bgcolor="#FFFF66"> </td>
<td rowspan="2" bgcolor="#FF3366"> </td>
</tr>
<tr>
<td colspan="2"
bgcolor="#33CC66"> </td>
</tr>
<tr>
<td colspan="3"
bgcolor="#FFCC99"> </td>
</tr>
</table>
|
|
<table
width="100" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td bgcolor="#0000FF"> </td>
<td bgcolor="#FFFF66"> </td>
<td rowspan="2"
bgcolor="#FF3366"> </td>
</tr>
<tr>
<td colspan="2"
bgcolor="#33CC66"> </td>
</tr>
<tr>
<td colspan="3"
bgcolor="#FFCC99"> </td>
</tr>
</table>
|
2.9
FRAMES
|
1
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
2
<FRAMESET cols="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
3
<FRAMESET rows="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
4
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
5
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
</FRAMESET></FRAMESET>
6
<FRAMESET cols="*,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET rows="15%,15%,70%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET></FRAMESET>
7
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame3">
<FRAME SRC="menu2.htm" NAME="Frame4">
</FRAMESET></FRAMESET>
8
<FRAMESET rows="15%,70%,15%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="15%,70%,15%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET>
<FRAME SRC="homepage.htm" NAME="BIG">
</FRAMESET></FRAMESET>
|
2.10
Kumpulan Tag HTML
<!-- -->
|
Memberi komentar atau keterangan. Kalimat yang
terletak pada tag kontiner ini tidak akan terlihat pada browser
|
<a href>
|
Membuat link ke halaman lain atau ke bagian lain
dari halaman tersebut
|
<a name>
|
Membuat nama bagian yang didefinisikan pada link
pada halaman yang sama
|
<applet>
|
Sebagai awal dari Java applets
|
<area>
|
Mendefinisikan daerah yang dapat diklik (link) pada
image map
|
<b>
|
Membuat teks tebal
|
<basefont>
|
Membuat atribut teks default seperti jenis, ukuran
dan warna font
|
<bgsound>
|
Memberi (suara latar) background sound pada halaman
web
|
<big>
|
Memperbesar ukuran teks sebesar satu point dari
defaultnya
|
<blink>
|
Membuat teks berkedip
|
<body>
|
Tag awal untuk melakukan berbagai pengaturan
terhadap text, warna link & visited link
|
<br>
|
Pindah baris
|
<caption>
|
Membuat caption pada tabel
|
<center>
|
Untuk perataan tengah terhadap teks atau gambar
|
<comment>
|
Meletakkan komentar pada halaman web tidak tidak
akan nampak pada browser
|
<dd>
|
Indents teks
|
<div>
|
Represents different sections of text.
|
<embed>
|
Menambahkan sound or file avi ke halaman web
|
<fn>
|
Seperti tag <a name>
|
<font>
|
Mengganti jenis, ukuran, warna huruf yang akan
digunakan utk teks
|
<form>
|
Mendefinisikan input form
|
<frame>
|
Mendefinisikan frame
|
<frameset>
|
Mendefinisikan attribut halaman yang akan
menggunakan frame
|
<h1> ... <h6>
|
Ukuran font
|
<head>
|
Mendefinisikan head document.
|
<hr>
|
Membuat garis horizontal
|
<html>
|
Bararti dokumen html
|
<i>
|
Membuat teks miring
|
<img>
|
Image, imagemap atau an animation
|
<input>
|
Mendefinisikan input field pada form
|
<li>
|
Membuat bullet point atau baris baru pada list
(berpasangan dengan tag <dir>, <menu>, <ol> and <ul>
)
|
<map>
|
Mendefinisikan client-side map
|
<marquee>
|
Membuat scrolling teks (teks berjalan) - hanya pada
MS IE
|
<nobr>
|
Mencegah ganti baris pada teks atau images
|
<noframes>
|
Jika browser user tidak mendukung frame
|
<ol>
|
Mendefinisikan awal dan akhir list
|
<p>
|
Ganti paragraf
|
<pre>
|
Membuat teks dengan ukuran huruf yg sama
|
<script>
|
Mendefinisikan awal script
|
<table>
|
Membuat tabel
|
<td>
|
Kolom pada tabel
|
<title>
|
Mendefinisikan title
|
<tr>
|
Baris pada tabel
|
<u>
|
Membuat teks bergaris bawah
|
JavaScript
Dari Wikibuku
bahasa Indonesia, sumber buku teks bebas .
JavaScript
adalah bahasa pemrograman ditafsirkan bahwa sebagian besar digunakan untuk
mengubah halaman web statis menjadi halaman dinamis dan interaktif setelah web
browser telah selesai men-download sebuah halaman web. Misalnya, jam
ditampilkan pada halaman yang update sendiri untuk menunjukkan waktu saat ini
pada komputer pengguna. Desain JavaScript dipengaruhi oleh banyak bahasa
pemrograman, termasuk C, tetapi dimaksudkan untuk lebih digunakan oleh non-programmer.
JavaScript tidak didasarkan pada atau terkait ke Java, ini adalah
kesalahpahaman umum. JavaScript seringkali disertakan dalam file HTML atau link
dari file HTML dan dijalankan secara lokal oleh web browser. Ini berarti bahwa
server bebas untuk mengerjakan sesuatu yang lain daripada pemrosesan instruksi
untuk setiap klien. Hal ini telah membuat JavaScript pilihan yang lebih populer
daripada bahasa yang memerlukan server untuk melakukan pengolahan.
Beberapa
contoh menggunakan adalah:
- berputar
atau bergulir teks.
- membuat
bagian dari suatu bentuk terlihat atau tidak terlihat. Sebagai contoh,
dalam sebuah formulir pemesanan, jika pengguna kutu kotak centang
"menyampaikan kepada alamat yang berbeda", bagian ekstra dengan
kotak teks dengan streetname pengiriman, nomor, dan tempat dapat dibuat
terlihat.
- drop
down menu.
- mengambil
informasi tambahan dari server (Ajax) untuk sebagian me-refresh halaman.
- memvalidasi
input pengguna pada formulir.
- perhitungan
tanpa perlu kembali ke server.
- menentukan
jenis browser.
jelas
beberapa informasi dari jenis tertentu dari pengguna, seperti alamat email dari
bot.
Bahasa
server-side seperti PHP atau Perl adalah cara terbaik untuk memodifikasi
halaman sebelum loading, meskipun ada beberapa kasus Server-JavaScript (SJS).
Tidak semua browser memiliki juru JavaScript (seperti browser hanya teks Lynx),
atau menjalankan versi terbaru. Selain itu, beberapa pengguna mematikan
kemampuan JavaScript dengan pilihan. Umumnya, halaman web harus menggunakan
JavaScript untuk meningkatkan pengalaman pengguna, bukan bergantung padanya.
Hal ini sering disebut sebagai degradasi anggun (yaitu jika pengguna telah
dimatikan JavaScript, halaman harus selalu masih beban, menyajikan informasi
yang sama tetapi tanpa fungsi tambahan yang disediakan oleh JavaScript.)
Hubungan ke Java
Meskipun
nama yang mirip, Java dan JavaScript, hampir tidak ada hubungannya selain dari
sintaks antara dua bahasa. Karena keduanya sering digunakan di Internet, dua
dapat bingung dengan belum tahu. Bahkan mereka dikembangkan oleh dua perusahaan
yang sama sekali berbeda, dengan tujuan yang berbeda dan tujuan dalam pikiran:
Netscape mengembangkan JavaScript dan Sun Microsystems mengembangkan Java.
JavaScript dapat diinterpretasikan oleh browser yang paling langsung dan cepat,
sementara Java memerlukan terpisah "Java Virtual Machine" harus
dimulai sebelum menjalankan. JavaScript dan Java menggunakan sintaks mirip
(berdasarkan bahasa C) tetapi banyak dari perintah yang sangat berbeda. Ada
juga perbedaan teknis. Java adalah bahasa diketik statis yang membutuhkan
deklarasi semua variabel dan jenis mereka (misalnya integer, string atau
boolean). Sebaliknya, Javascript adalah "longgar" bahasa diketik,
memungkinkan variabel yang akan digunakan tanpa deklarasi sebelumnya. Sebagai
contoh, membandingkan dua metode penulisan ke tampilan (halaman). Di Java,
untuk menulis "Halo dunia!", Kode akan membaca: System.out.println
("Halo dunia!"), Sedangkan dalam JavaScript (di browser), akan
berkata: document.write ("Halo dunia! ");.
Sejarah
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape
dibawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript,
dan akhirnya menjadi JavaScript.[4][5]
Navigator sebelumnya telah
mendukung Java untuk lebih bisa dimanfaatkan para programmer
yang non-Java.[6]
Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk
mengakomodasi hal tersebut.[6]
Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript,
walaupun tidak ada hubungan bahasa antara Java dengan JavaScript.[6]
JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk
membuat efek rollover baik di gambar maupun teks, dan yang penting juga
adalah untuk membuat AJAX.[6]
JavaScript adalah bahasa yang digunakan untuk AJAX.[6]
Penulisan JavaScript
Kode
JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh
di tag <head> yang dibuka dengan tag<script
type="teks/javascript">
.[7]
<scripttype="teks/javascript">
alert("Halo Dunia!");
</script>
Kode JavaScript juga bisa diletakkan di file tersendiri yang
berekstensi .js (singkatan dari JavaScript).[7]
Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal
<head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan
contoh kode seperti berikut:[7]
<scripttype="teks/javascript"src="alamat.js">
</script>
Script pada bagian head
Script
ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau
dipanggil berdasarkan trigger pada event tertentu.[7]
Peletakkan script di head akan menjamin skript di-load terlebih dahulu sebelum
digunakan (dipanggil).[7]
<html>
<head>
<scripttype="teks/javascript">
...
</script>
</head>
</html>
Script pada Body
Script ini dieksekusi ketika halaman di-load sampai di bagian
<body>.[7]
Ketika menempatkan script pada bagian <body> berarti antara isi dan
JavaScript dijadikan satu
bagian.[7]
<html>
<head>
</head>
<body>
<scripttype="teks/javascript">
...
</script>
</body>
</html>
Jumlah JavaScript di <head> dan <body> yang
ditempatkan pada dokumen tidak terbatas.[7]
External JavaScript
Terkadang ada yang menginginkan menjalankan JavaScript yang
sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan
jika harus menulis
ulang script yang diinginkan di setiap halaman.[7]
Maka JavaScript dapat ditulis di file secara eksternal.[7]
Jadi, antara dokumen HTML
dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument
HTML.[7]
Berkas JavaScript tersebut disimpan dengan ekstensi .js.[7]
JavaScript : js/xxx.jsdocument.write("pesan ini tampil ketika halaman
diload");
Untuk menggunakan eksternal JavaScript (.js) dipakai atribut
"src" pada tag <script> pada halaman HTML-nya.[7]
<html>
<head>
</head>
<body>
<scriptsrc="xxx.js">
</script>
<p>Script di atas berada di berkas "xx.js" (eksternal) </p>
</body>
</html>
Adaptasi JavaScript pada Wikipedia
Biasanya JavaScript digunakan sebagai peralatan (tool/gadget)
pada halaman pengguna. Fungsinya bermacam-macam, misalnya peralatan guna
menambah kategori dengan lebih mudah, contohnya dapat dilihat pada : HotCat. Lain dari pada itu dapat di simak
lebih lanjut di :
Referensi
3. ^Andi Sunyoto, M. Kom, Ajax Membangun Web dengan
Teknologi Asynchronouse JavaScript & XML, ANDI
6. ^abcdeAli Zaki & Smitdev Community, SPP AJAX untuk Pemula,
halaman 27. Elex Media Komputindo
7. ^abcdefghijklmZainal Arifin & Smitdev Community, 36 Menit Belajar
Komputer: Php Dan Mysql. Elex Media Komputindo.
MATERI CSS ,JavaScript , HTML
2.1 Pengenalan css
Apa Itu CSS?
CSS adalah singkatan dari Cascading Style Sheets.
Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang
di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia
kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling
berhubungan untuk mengatur format / tampilan suatu halaman HTML.
Keuntungan Penggunaan CSS
Jika anda memiliki beberapa halaman website dimana
anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan
dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu
per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web
memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah
font di semua halaman web dari arial ke trebuchet.
Jadi, keuntungan menggunakan CSS, lebih praktis!
Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara
yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser
yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa
tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus
browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di
semua browser.
2.2 Syntax
Syntax / kalimat CSS terdiri dari beberapa set
peraturan yang memiliki: 1 selector, 1 property, 1 value.
Format penulisan kalimat CSS:
selector {
property: value }
Selector itu
untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property
untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah
nilai dari pengaturannya.
Contoh
Syntax:
h1 { color:
red }
Contoh di
atas menunjukkan
Selector: h1
Property:
color
Value: red
Kalau
diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari
h1 ke warna merah (red).
Pengelompokan Selectors
Anda dapat
menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan
koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua
menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 {
color: red }
Perhatikan
penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Untuk
mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3
{color:red; font-family:arial; font-size:150%;}
Pada contoh
di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan
type font arial, dan ukuran font 150%.
Cara Penulisan Yang Baik
Sangat
disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan
property dan values nya di indent. Ya cuma biar rapih dan lebih mudah di baca
aja sih, ga harus kok.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
Sekarang
anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya
akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.
CSS Comment
Kadang kala,
ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi
catatan pengingat.
Anda bisa
menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala
teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi
hanya sebagai catatan untuk diri anda.
/* Tulis
komentar anda di sini */
p
{
text-align:
justify;
/* Tulis
komentar anda di sini */
color: blue;
font-family:
arial;
}
2.3 Implementasi css
Ada 4 cara memasang kode CSS ke dalam kode HTML /
halaman web, yaitu:
·
Inline CSS
·
Embed atau
memasang kode css ke dalam bagian <head>
·
Nge link ke
external CSS
·
Import CSS
file
Yuk kita
bahas satu per satu…
Inline CSS
Kode CSS
dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini
tidak memerlukan penulisan selector dalam kode CSS.
Cara ini
sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:
<P
style=”color:blue”>
Isi paragraf.
</p>
Pada contoh
di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru.
Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini
hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan
CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan
syntax property: value.
Embedded CSS
Anda bisa
juga menempelkan kode CSS di antara tag <head> dan </head>.
Penulisan CSS dengan cara ini diawali dengan tag <style> dan
diakhiri dengan tag </style>.
Contoh:
<head>
<style
type="text/css" media=screen>
p
{color:blue;}
</style>
</head>
Dalam contoh
di atas semua elemen <P> dalam halaman web tersebut akan
diformat menggunakan font berwarna biru.
External CSS
Kode CSS
external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css.
Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang
anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang
digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam
pengimplementasian CSS dengan cara ini.
Contoh:
1.
Anda membuat
satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css,
lalu tuliskan kode-kode css di dalam file tersebut.
2.p
{font-family: arial; font-size: small;}
3.h1 {color:
red; }
4.
Langkah kedua
adalah memanggil file style.css dari semua halaman web. Caranya dengan
memasukkan kode di bawah ini, di antara tag <head> dan </head>
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
Import CSS
Anda bisa
juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import
"style.css";
atau
@import
url("style.css");
Penggunaan Lebih dari Satu Kode CSS
Apabila ada
lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah
kode yang lebih spesifik.
Misalkan
dalam satu halaman web, menggunakan eksternal style sheet untuk memformat
elemen H1 sbb:
h1 {
color: red;
text-align:
left;
font-size:
8pt
}
Sementara di
halaman web yang sama, di antara tag <head> ada kode CSS sbb:
h1 {
text-align:
right;
font-size:
20pt
}
Perhatikan
bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left
sementara dari internal style sheet, text-align=right.
Dalam kasus
seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal
ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam
contoh di atas, kode yang akan diimplementasikan adalah sbb:
color: red;
text-align:
right;
font-size:
20pt
2.4
Class dan Id selector
Class
Selector
Class selector adalah penggabungan beberapa properties
yang digunakan lebih dari satu kali.
Cara
penulisan Class Selector:
.nama-class
{property:value;}
Untuk
menempelkan class ke dalam tag HTML:
taghtml.nama-class
{Property:value;}
Perhatikan
tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class
selector di luar kode HTML anda menggunakan tag <div class=nama-class>
dan di akhiri dengan tag </div>.
Contoh:
Penulisan
kode CSS:
.tengah
{text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian
kode CSS
<div
class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Hasil:
Teks
tengah akan berwarna merah.
Tag H1
tengah akan berwarna hitam
Tag H1 kiri akan berwarna biru
ID Selector
ID Selector
mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk
memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya
untuk memformat bagian menu / sidebar.
Cara
penulisan ID Selector:
#nama-ID
{property:value;}
Untuk
menempelkan ID selector ke dalam tag HTML:
taghtml#nama-ID
{Property:value;}
Perhatikan
tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di
luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri
dengan tag </div>.
MATERI HTML
2.1
PENGERTIAN
HTML
Sebelum kita melangkah lebih jauh ada baiknya Anda
tahu apa itu HTML. HTML atau Hypertext Markup Language 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.
Sekarang ini
di pasaran terdapat banyak sekali HTML authoring (software yang digunakan untuk
membuat atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS
FrontPage sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak
akan memperoleh hasil yang maksimal. Mengapa ? Karena walaupun
software-software tersebut semakin menawarkan kemudahan dalam membuat halaman
web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut
secara manual. Terutama untuk halaman web yang sangat komplek.
Dalam
tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari desain web.
Yang dibutuhkan hanya sebuah word processor. Anda bisa menggunakan Notepad,
WordPad, MS Word atau yang lainnya. Tapi yang paling mudah adalah menggunakan
Notepad.
2.2
VERSI HTML
HTML
sekarang sudah mencapai versi 4.0 (saat artikel ini ditulis). Sebelum
digunakan, HTML harus diuji secara ketat oleh suatu badan yang bernama World
Wide Web Concortium (W3C). Setiap penambahan/peningkatan versi, terdapat
beberapa tambahan-tambahan tag dan fasilitas yang tidak dimiliki oleh
versi sebelumnya. Tentunya versi yang telah dikeluarkan ini harus menjadi
standar bagi browser. Bilamana browser ini tidak mendukung versi
tertentu, maka browser tersebut tidak dapat menampilkan format HTML yang
kita buat. Oleh karena itu, untuk melihat halaman web yang diformat dengan HTML
versi baru, harus memiliki browser yang sudah mendukung versi HTML
tersebut
VERSI -
VERSI HTML
HTML 1.0
Ini adalah awal mula dari HTML (pendahulunya). Pada versi ini masih terlihat
beberapa kelemahan dan masih sangat sederhana. Kemampuan yang dimiliki oleh
versi 1.0 ini hanya terbatas pada heading, paragraf, hypertext, list dan setak
tebal atau miring pada teks.
HTML 2.0
Versi ini telah ditambahkan kemampuan menyisipkan form didalamnya, sehingga
kita dapat membuat halaman yang interaktif. Pengunjung dapat mengisi nama,
alamat, email dan sebagainya.
HTML 3.0
Versi ini tidak bertahan lama karena kemudian disempurnakan oleh versi 3.2
HTML 3.2
Pada versi ini telah diperkenalkan teknik peletakan teks pada sekeliling
gambar, latar belakang berupa gambar, cascading style sheet, tabel, frame dan
lain sebagainya. Versi ini juga mendukung Javascript, VBScript dan lain
sebagainya.
HTML 4.0
Versi terakhir ini yang resmi dirilis ini telah menunjukkan beberapa
kelebihan-kelebihan dari versi sebelumnya. Perubahan-perubahan ini hampir
mencakup semua tag-tag HTML sebelumnya. Di samping itu pada versi ini
ditambahkan tag-tag baru seperti ABBR, ACRONYM, BUTTON, PARAM, BUTTON, TBODY,
THEAD dan lain sebagainya.
2.3
KEKURANGAN DAN KELEBIHAN HTML
Seperti yang
kita tahu bahwa, setiap bahasa dan program mempunyai kelebihan dan Kekurangan.
Ada baiknya kita mengetahui kelebihan dan kekurangan dari HTML sehingga kita
bisa memaksimalkan pengetahuan dan wawasan kita dalam mengeksplorasi dunia
browser.
Kelebihan-kelebihan HTML antara lain:
·
Merupakan
bahasa penkodean yang lintas platform (cross platform), maksudnya HTML dapat
digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam
sistem operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup
dengan menggunakan editor karakter ASCII.
·
Dapat
disisipi gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan
gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada
suatu halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa
rectangular (kotak), poligon (kurva tak beraturan) atau lingkaran digunakan
untuk 'jump' ke halaman lain, atau link ke halaman di luar web yang
bersangkutan.
·
Dapat
disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia
Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki
plug-in khusus untuk menjalankan file-file animasi ini).
·
Dapat
disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript,
VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya.
·
Bukan
merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara
menjalanakannya cukup dengan menggunakan browser.
Adapun kekurangan dari HTML ini adalah:
·
Menghasilkan
halaman yang statis, untuk memperoleh halaman yang dinamis harus menggunakan
bahasa pemrograman tertentu seperti Javascript atau VBScript dan animasi
seperti Flash atau Shockwave.
·
Memiliki
tag-tag yang begitu banyak sehingga susah dipelajari untuk yang masih awam.
·
Tidak dapat
menghasilkan halaman yang interaktif. Interaktif di sini maksudnya client dapat
berinteraksi dengan server. Untuk keperluan itu, HTML harus disisipi bahasa
pemrograman yang dapat menangani hal tersebut, contohnya Perl atau Tcl.
2.4
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).
Contoh :
<TITLE>Tips
HTML -- www.klik-kanan.com</TITLE>
<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.
Contoh :
<BODY
bgcolor="#000000" background="images/pcb.gif"
text="#FFFFFF" link="#FF0000" vlink="FFFF00"
alink="#0000FF">
Sebuah contoh sederhana dokumen HTML :
<HTML>
<HEAD>
<TITLE>Halaman pembuka
</TITLE>
</HEAD>
<BODY
bgcolor="#FFFFFF" background="images/gambar1.gif"
text="#FF0000">
Letakkan text, images, dan link Anda di sini
</BODY>
</HTML>
2.5
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 :
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
lainnya :
<FONT
SIZE=2 FACE="Times_New_Roman" COLOR="#0066CC">
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)
<STRONG> Strong
<ADDRESS>
<CITE> Digunakan untuk quoting text
<CODE> 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.
2.6 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:
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>
Hasil dari
kode di atas adalah :
2.7
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.
2.8
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">
|
<table
width="100" border="1" cellspacing="2"
cellpadding="2">
<tr>
<td bgcolor="#0000FF"> </td>
<td bgcolor="#FFFF66"> </td>
<td rowspan="2" bgcolor="#FF3366"> </td>
</tr>
<tr>
<td colspan="2"
bgcolor="#33CC66"> </td>
</tr>
<tr>
<td colspan="3"
bgcolor="#FFCC99"> </td>
</tr>
</table>
|
|
<table
width="100" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td bgcolor="#0000FF"> </td>
<td bgcolor="#FFFF66"> </td>
<td rowspan="2"
bgcolor="#FF3366"> </td>
</tr>
<tr>
<td colspan="2"
bgcolor="#33CC66"> </td>
</tr>
<tr>
<td colspan="3"
bgcolor="#FFCC99"> </td>
</tr>
</table>
|
2.9
FRAMES
|
1
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
2
<FRAMESET cols="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
3
<FRAMESET rows="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
4
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
5
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
</FRAMESET></FRAMESET>
6
<FRAMESET cols="*,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET rows="15%,15%,70%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET></FRAMESET>
7
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame3">
<FRAME SRC="menu2.htm" NAME="Frame4">
</FRAMESET></FRAMESET>
8
<FRAMESET rows="15%,70%,15%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="15%,70%,15%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET>
<FRAME SRC="homepage.htm" NAME="BIG">
</FRAMESET></FRAMESET>
|
2.10
Kumpulan Tag HTML
<!-- -->
|
Memberi komentar atau keterangan. Kalimat yang
terletak pada tag kontiner ini tidak akan terlihat pada browser
|
<a href>
|
Membuat link ke halaman lain atau ke bagian lain
dari halaman tersebut
|
<a name>
|
Membuat nama bagian yang didefinisikan pada link
pada halaman yang sama
|
<applet>
|
Sebagai awal dari Java applets
|
<area>
|
Mendefinisikan daerah yang dapat diklik (link) pada
image map
|
<b>
|
Membuat teks tebal
|
<basefont>
|
Membuat atribut teks default seperti jenis, ukuran
dan warna font
|
<bgsound>
|
Memberi (suara latar) background sound pada halaman
web
|
<big>
|
Memperbesar ukuran teks sebesar satu point dari
defaultnya
|
<blink>
|
Membuat teks berkedip
|
<body>
|
Tag awal untuk melakukan berbagai pengaturan
terhadap text, warna link & visited link
|
<br>
|
Pindah baris
|
<caption>
|
Membuat caption pada tabel
|
<center>
|
Untuk perataan tengah terhadap teks atau gambar
|
<comment>
|
Meletakkan komentar pada halaman web tidak tidak
akan nampak pada browser
|
<dd>
|
Indents teks
|
<div>
|
Represents different sections of text.
|
<embed>
|
Menambahkan sound or file avi ke halaman web
|
<fn>
|
Seperti tag <a name>
|
<font>
|
Mengganti jenis, ukuran, warna huruf yang akan
digunakan utk teks
|
<form>
|
Mendefinisikan input form
|
<frame>
|
Mendefinisikan frame
|
<frameset>
|
Mendefinisikan attribut halaman yang akan
menggunakan frame
|
<h1> ... <h6>
|
Ukuran font
|
<head>
|
Mendefinisikan head document.
|
<hr>
|
Membuat garis horizontal
|
<html>
|
Bararti dokumen html
|
<i>
|
Membuat teks miring
|
<img>
|
Image, imagemap atau an animation
|
<input>
|
Mendefinisikan input field pada form
|
<li>
|
Membuat bullet point atau baris baru pada list
(berpasangan dengan tag <dir>, <menu>, <ol> and <ul>
)
|
<map>
|
Mendefinisikan client-side map
|
<marquee>
|
Membuat scrolling teks (teks berjalan) - hanya pada
MS IE
|
<nobr>
|
Mencegah ganti baris pada teks atau images
|
<noframes>
|
Jika browser user tidak mendukung frame
|
<ol>
|
Mendefinisikan awal dan akhir list
|
<p>
|
Ganti paragraf
|
<pre>
|
Membuat teks dengan ukuran huruf yg sama
|
<script>
|
Mendefinisikan awal script
|
<table>
|
Membuat tabel
|
<td>
|
Kolom pada tabel
|
<title>
|
Mendefinisikan title
|
<tr>
|
Baris pada tabel
|
<u>
|
Membuat teks bergaris bawah
|
JavaScript
Dari Wikibuku
bahasa Indonesia, sumber buku teks bebas .
JavaScript
adalah bahasa pemrograman ditafsirkan bahwa sebagian besar digunakan untuk
mengubah halaman web statis menjadi halaman dinamis dan interaktif setelah web
browser telah selesai men-download sebuah halaman web. Misalnya, jam
ditampilkan pada halaman yang update sendiri untuk menunjukkan waktu saat ini
pada komputer pengguna. Desain JavaScript dipengaruhi oleh banyak bahasa
pemrograman, termasuk C, tetapi dimaksudkan untuk lebih digunakan oleh non-programmer.
JavaScript tidak didasarkan pada atau terkait ke Java, ini adalah
kesalahpahaman umum. JavaScript seringkali disertakan dalam file HTML atau link
dari file HTML dan dijalankan secara lokal oleh web browser. Ini berarti bahwa
server bebas untuk mengerjakan sesuatu yang lain daripada pemrosesan instruksi
untuk setiap klien. Hal ini telah membuat JavaScript pilihan yang lebih populer
daripada bahasa yang memerlukan server untuk melakukan pengolahan.
Beberapa
contoh menggunakan adalah:
- berputar
atau bergulir teks.
- membuat
bagian dari suatu bentuk terlihat atau tidak terlihat. Sebagai contoh,
dalam sebuah formulir pemesanan, jika pengguna kutu kotak centang
"menyampaikan kepada alamat yang berbeda", bagian ekstra dengan
kotak teks dengan streetname pengiriman, nomor, dan tempat dapat dibuat
terlihat.
- drop
down menu.
- mengambil
informasi tambahan dari server (Ajax) untuk sebagian me-refresh halaman.
- memvalidasi
input pengguna pada formulir.
- perhitungan
tanpa perlu kembali ke server.
- menentukan
jenis browser.
jelas
beberapa informasi dari jenis tertentu dari pengguna, seperti alamat email dari
bot.
Bahasa
server-side seperti PHP atau Perl adalah cara terbaik untuk memodifikasi
halaman sebelum loading, meskipun ada beberapa kasus Server-JavaScript (SJS).
Tidak semua browser memiliki juru JavaScript (seperti browser hanya teks Lynx),
atau menjalankan versi terbaru. Selain itu, beberapa pengguna mematikan
kemampuan JavaScript dengan pilihan. Umumnya, halaman web harus menggunakan
JavaScript untuk meningkatkan pengalaman pengguna, bukan bergantung padanya.
Hal ini sering disebut sebagai degradasi anggun (yaitu jika pengguna telah
dimatikan JavaScript, halaman harus selalu masih beban, menyajikan informasi
yang sama tetapi tanpa fungsi tambahan yang disediakan oleh JavaScript.)
Hubungan ke Java
Meskipun
nama yang mirip, Java dan JavaScript, hampir tidak ada hubungannya selain dari
sintaks antara dua bahasa. Karena keduanya sering digunakan di Internet, dua
dapat bingung dengan belum tahu. Bahkan mereka dikembangkan oleh dua perusahaan
yang sama sekali berbeda, dengan tujuan yang berbeda dan tujuan dalam pikiran:
Netscape mengembangkan JavaScript dan Sun Microsystems mengembangkan Java.
JavaScript dapat diinterpretasikan oleh browser yang paling langsung dan cepat,
sementara Java memerlukan terpisah "Java Virtual Machine" harus
dimulai sebelum menjalankan. JavaScript dan Java menggunakan sintaks mirip
(berdasarkan bahasa C) tetapi banyak dari perintah yang sangat berbeda. Ada
juga perbedaan teknis. Java adalah bahasa diketik statis yang membutuhkan
deklarasi semua variabel dan jenis mereka (misalnya integer, string atau
boolean). Sebaliknya, Javascript adalah "longgar" bahasa diketik,
memungkinkan variabel yang akan digunakan tanpa deklarasi sebelumnya. Sebagai
contoh, membandingkan dua metode penulisan ke tampilan (halaman). Di Java,
untuk menulis "Halo dunia!", Kode akan membaca: System.out.println
("Halo dunia!"), Sedangkan dalam JavaScript (di browser), akan
berkata: document.write ("Halo dunia! ");.
Sejarah
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape
dibawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript,
dan akhirnya menjadi JavaScript.[4][5]
Navigator sebelumnya telah
mendukung Java untuk lebih bisa dimanfaatkan para programmer
yang non-Java.[6]
Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk
mengakomodasi hal tersebut.[6]
Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript,
walaupun tidak ada hubungan bahasa antara Java dengan JavaScript.[6]
JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk
membuat efek rollover baik di gambar maupun teks, dan yang penting juga
adalah untuk membuat AJAX.[6]
JavaScript adalah bahasa yang digunakan untuk AJAX.[6]
Penulisan JavaScript
Kode
JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh
di tag <head> yang dibuka dengan tag<script
type="teks/javascript">
.[7]
<scripttype="teks/javascript">
alert("Halo Dunia!");
</script>
Kode JavaScript juga bisa diletakkan di file tersendiri yang
berekstensi .js (singkatan dari JavaScript).[7]
Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal
<head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan
contoh kode seperti berikut:[7]
<scripttype="teks/javascript"src="alamat.js">
</script>
Script pada bagian head
Script
ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau
dipanggil berdasarkan trigger pada event tertentu.[7]
Peletakkan script di head akan menjamin skript di-load terlebih dahulu sebelum
digunakan (dipanggil).[7]
<html>
<head>
<scripttype="teks/javascript">
...
</script>
</head>
</html>
Script pada Body
Script ini dieksekusi ketika halaman di-load sampai di bagian
<body>. Ketika menempatkan script pada bagian <body> berarti antara isi dan
JavaScript dijadikan satu
bagian.
<html>
<head>
</head>
<body>
<scripttype="teks/javascript">
...
</script>
</body>
</html>
Jumlah JavaScript di <head> dan <body> yang
ditempatkan pada dokumen tidak terbatas.
External JavaScript
Terkadang ada yang menginginkan menjalankan JavaScript yang
sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan
jika harus menulis
ulang script yang diinginkan di setiap halaman. Maka JavaScript dapat ditulis di file secara eksternal. Jadi, antara dokumen HTML
dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument
HTML. Berkas JavaScript tersebut disimpan dengan ekstensi .js.
JavaScript : js/xxx.jsdocument.write("pesan ini tampil ketika halaman
diload");
Untuk menggunakan eksternal JavaScript (.js) dipakai atribut
"src" pada tag <script> pada halaman HTML-nya.
<html>
<head>
</head>
<body>
<scriptsrc="xxx.js">
</script>
<p>Script di atas berada di berkas "xx.js" (eksternal) </p>
</body>
</html>
Adaptasi JavaScript pada Wikipedia
Biasanya JavaScript digunakan sebagai peralatan (tool/gadget)
pada halaman pengguna. Fungsinya bermacam-macam, misalnya peralatan guna
menambah kategori dengan lebih mudah, contohnya dapat dilihat pada : HotCat.