Disain dan Pemograman Website

1 Pemakaian HTML

10 Form dan Web Editor

17 Dasar dasar Skrip Java

28 XML dan XHTML 38 Menggunakan CSS 54

PHP dan MySQL

60 Membuat Website yang Berkualitas

90 Apendik

98

Disain dan Pemograman Web

Objektif

Mata kuliah ini memberikan skil dan pengetahuan untuk perancangan website melalui konten statik dan dinamik. Melalui ekplorasi pada pembuatan web dasar , mahasiswa mampu membuat halaman web menggunakan tool yang umum dalam pengembangan web.

Pada akhir dari kelas ini mahasiswa akan mampu : 1. Melakukan penanganan web server untuk setup dan uploading file.

2. Membuat Halaman web statik menggunakan HTML secara manual dan melalui web editor. 3. Menggunakan fungsi-fungsi dasar dalam pemograman Javascript dan php. 4. Menggunakan Javascript, PHP dan HTML untuk membuat halaman web interaktif 5. Membuat form dan pengendalian web dinamis melalui database. 6. Menggunakan Cascading Style Sheets (CSS) untuk perancagan halaman web.

Bab 1 : Pengantar pada Website

Outcome : Setelah mempelajari bab ini mahasiswa mampu:

1. Mengetahui sejarah dan kegunaan dari website. 2. Mengenal bentuk bentuk rancangan tampilan web secara umum. 3. Menyiapkan server web. 4. Mengenal bentuk dasar dari bahasa html.

1. Apa itu Website

Situs web (Website) adalah satu set halaman web yang berisi kandungan media teks, video, musik, audio, gambar, imej dan sebagainya. Situs web ditempatkan sekurangnya pada satu server web yang bisa diakses dalam network seperti Internet atau dalam sebuah netwok pribadi (LAN) melalui alamat Internet (Internet address). Semua website yang bisa diakses oleh publik dikelompokkan dalam World Wide Web (www). Kata kata World Wide Web atau dengan singkatan "WWW" atau “Web") berarti media informasi global dimana pengguna bisa membaca dan menulis melaui komputer ( juga dengan Tablet PC, smart phone) yang terhubung ke Internet .

Teknologi yang bisa dipakai untuk terhubung ke internet dapat berupa Local Area Networks(LAN), Dial-up access (saluran Telepon), Broadband access atau Wireless broadband access. Gambar 1-1 memperlihatkan perangkat komputer yang terhubung ke internet melalui koneksi LAN dan wireless. Komputer yang terhubung ke Internet diberi nomor pengenal yang disebut dengan IP address. IP address bisa diset otomatis oleh sistim (dynamic IP address) atau diset secara manual.

Gambar 1-1 Ilustrasi Koneksi komputer ke Internet

Gambar 1-2 Mengakses halaman web pada Server

Halaman web (webpage) adalah sebuah dokumen yang ditulis dalam teks yang disisipi dengan format instruksi yang disebut dengan Hypertext Markup Language (HTML, XHTML). Halaman halaman web diakses dan dikirim dengan protokol HTTP ( Hypertext Transfer Protocol) seperti diilistrasikan pada gambar 1-2. Untuk menambah keamanan dan kerahasiaan dalam Halaman web (webpage) adalah sebuah dokumen yang ditulis dalam teks yang disisipi dengan format instruksi yang disebut dengan Hypertext Markup Language (HTML, XHTML). Halaman halaman web diakses dan dikirim dengan protokol HTTP ( Hypertext Transfer Protocol) seperti diilistrasikan pada gambar 1-2. Untuk menambah keamanan dan kerahasiaan dalam

Halaman web biasanya diakses dari Uniform Resource Locator (URL) disebut homepage . Beberapa halaman web memerlukan pendaftaran terlebih dahulu untuk bisa dilihat sebagian atau seluruh kandungan isinya. Beberapa contoh dari halaman web yang memerlukan pendaftaran adalah situs web bisnis, sebagian websites pemberitaan (kompas.com, detik.com), academic journal websites, permainan (game) websites, situs berbagi file (file-sharing websites), message boards, web-based email (gmail, yahoo) , social networking websites (facebook, twiter), websites penyedia data real-time stock market, dan websites menyediakan berbagai macam servis (e.g., fasilitas penyimpanan files dan lain lain). Gambar 1-3 adalah salah satu contoh halaman web yang di lihat menggunakan browser mozila.

Gambar 1-3 Halaman Web elearning stkip surya

2. Sejarah Website

Konsep dari web sudah dimulai sejak tahun 1946 yang dikenal dengan home-based global information system. Tahun 1979 sampai 1991 merupakan era pengembangan World Wide Web. Pada 1984 dikembangkan pilot project oleh CERN untuk instalasi dan evaluasi protokol TCP/IP pada beberapa non-Unix machines. Pada tahun 1990 CERN sudah menjadi Internet site terbesar di Eropa.

Pada 1990, Berners-Lee membangun tool yang diperlukan untuk bekerjanya web HyperText Transfer Protocol (HTTP), HyperText Markup Language (HTML), Web browser (disebut juga WorldWideWeb, yang juga berfungsi sebagai editor). HTTP server software pertama yang kemudian dikenal dengan CERN httpd), web server pertama ( http://info.cern.ch ) juga dikembangkan pada tahun bersamaan.

Tahun 1992 sampai 1995 merupakan tahun pertumbuhan Web. Protokol populer dikembangkan hypertex menu untuk akses yang lebih baik ke sistem file. Beberapa sites memungkinkan pengguna mengirim teks penuh yang kemampuannya dikembangkan oleh mesin pencari. Browser grafik juga dikembangkan sehingga fitur seperti embedded graphics, scripting , dan gambar animasi bisadilayari.

3. Penggunaan website

Saat ini website sudah banyak digunakan untuk berbagai keperluan. Mulai untuk sumber berita, informasi kerja juga untuk keperluan bisnis dan akses ke berbagai media. Hampir semua instansi pemerintah dan swasta sudah mempunyai halaman web sendiri dengan berbagai keperluan. Mesin pencari merupakan salah satu tool yang paling banyak digunakan orang. Google merupakan mesin pencari yang sangat populer. Berbagai macam alamat situs bisa ditemukan dengan mudah hanya dengan memasukkan beberapa kata kunci kedalam mesin pencari. Dengan adanya mesin pencari menjadikan penggunaan situs web semakin mudah.

4. Contoh-contoh website

Berbagai website dengan bermacam-macan disain dikembangkan sesuai dengan selera dan jenis informasi yang disajikan. Berikut adalah beberapa website dengan uraian ringkas fitur dan tampilannya.

Website dikti : http://dikti.go.org (Gambar 1.4)

Gambar 1.4

Tampilan halaman utama web ini memiliki beberapa kelompok komponen: 1. Baner yang terdapat pada bagian paling atas 2. Menu menu

3. Gambar SlideshowWrapper

Gambar 1.5

Website Mesin Pencari : Google.com

Gambar 1.6

Tampilan halaman utama google lebih sederhana namun keunggulan website ini adalah pada program yang ada dibelakangnya untuk melakukan pencarian.

Website sebuah bank (Gambar 1.7). Website pada bank selain beri informasi tentang bank tersebut juga mempunyai fasilitas bagi nasabah untuk mengakses akon nya yang disebut dengan internet banking. Untuk masuk kehalaman internet banking ini, pengguna harus terdaftar dan masuk melalui nama pengguna dan password yang disediakan.

Gambar 1.7

5. Tool yang diperlukan dalam memakai Website

Ada dua kategori pemakai website ini pertama adalah kelompok yang membuat atau menyajikan website dan yang kedua adalah kelompok yang memanfaatkan informasi yang tersedia di website. Dalam pelajaran ini kita akan memfokuskan menjadi penyaji atau pembuat website.

6. Melihat / mengunjungi Web

Untuk melihat halaman web diperlukan browser web. Berbagai macam browser web dekombangkan oleh berbagai perusahaan diantaranya Firefox, Explorer, Netscape, Opera, GoogleCrome. Secara umum setiap browser berkemampuan sama dalam menampilkan halaman web. Namun ada beberapa browser web bisa menampilkan lebih baik untuk fitur tertentu.

Gambar 1.8 Logo Berbagai aplikasi browser web

Explorer, Mozilla dan Google Chrome adalah beberapa browser web yang popular saat ini, sedangkan Netscape popular pada era 1990 an.

Mozilla Netscape Explorer Gambar 1.9 Logo Website Populer

7. Membuat Web

Website dibuat agar orang bisa mendapat informasi yang diperlukan. Berbagai macam informasi dan fasilitas dilakukan melalui jaringan situs web. Berbagai fasilitas tersedia untuk membuat web namun fasilitas tersebut hanya digunakan sesuai dengan bentuk web yang dibuat. Untuk itu sebelum memulai membuat web harus terlebih dahulu menentukan bentuk informasi apa yang akan ditampilkan.

Kenapa orang perlu mengunjungi website? Secara umum orang melihat halamat web dengan dua alasan utama:

1. Menemukan informasi yang mereka inginkan. Ini bisa berbagai informasi mulai dari seorang peljar hanya ingin mencari gambar untuk tugas sekolah, mencari informasi saham atau untuk menemukan restoran yang terdekat. 2. Menyelesaikan tugas. Berbagai bentuk informasi yang berhubungan dengan pekerjaan juga bisa dilakukan melalui web. Pengunjung bisa saja ingin membeli barang yang lagi laris, mendownload software atau berpartisipasi dalam diskusi online tentang hobi mereka.

Web bisa dimuat dengan bentuk yang sederhana sampai yang rumit. Yang perlu diperhatikan dalam membuat web adalah Web bisa dimuat dengan bentuk yang sederhana sampai yang rumit. Yang perlu diperhatikan dalam membuat web adalah

8. Hosting (Penempatan Web)

Penempatan web dilakukan pada server yang mempunyai fasilitas web server. Server web dapat merujuk baik pada perangkat keras ataupun perangkat lunak yang menyediakan layanan akses kepada pengguna melalui protokol komunikasi HTTP atau HTTPS . Fungsi utama sebuah server web adalah untuk mentransfer berkas atas permintaan pengguna (pada web browser) melalui protokol komunikasi yang telah ditentukan. Sebuah halaman web dapat terdiri atas berkas teks, gambar, video, dan lainnya. Server web berfungsi untuk mentransfer seluruh aspek pemberkasan dalam sebuah halaman web yang terkait termasuk teks, gambar, video, atau lainnya. Server web merupakan sebuah komputer yang didalamnya terinstal aplikasi webserver. Contoh aplikasi webserver adalah Apache.

Pengguna, melalui aplikasi web meminta layanan atas berkas ataupun halaman web yang terdapat pada sebuah server web, kemudian server sebagai manajer layanan tersebut akan merespon balik dengan mengirimkan halaman dan berkas-berkas pendukung yang dibutuhkan, atau menolak permintaan tersebut jika halaman yang diminta tidak tersedia.

saat ini umumnya server web telah dilengkapi pula dengan mesin penerjemah bahasa skrip yang memungkinkan server web menyediakan layanan situs web dinamis dengan memanfaatkan pustaka tambahan seperti PHP , ASP. Secara umum server web berfungsi untuk menempatkan situs web , namun pada prakteknya penggunaannya diperluas sebagai tempat penyimpanan data ataupun untuk menjalankan sejumlah aplikasi kelas bisnis.

Penempatan pada server lokal

Server local adalah computer yang tidak terhubung ke jaringan umum. Biasanya server local diakses melalui alamat IP misalnya 192.168.0.1. Sistim operasi server bisa menggunakan Microsoft windows atau Linux.

9. Instalasi Web Server

Server web adalah sebuah program yang bertugas untuk merespon permintaan yang beragam dari browser melalui protocol HTTP atau HTTPS. Skema operasi dari server web adalah seperi loop berikut :

1. Menunggu permintaan yang ditentukan melalui port TCP (untuk HTTP adalah 80) 2. Menerima permintaan. 3. Melihat isi yang terdapat dalam requeat string 4. Mengirim resource dengan koneksi yang sama dimana perminttan diterima. 5. Kembali ke urutan 2.

Semua web server harus sekurang kurangnya bisa melayani file-file statis yang ditempatkan pada lokasi tertentu pada hardisk. Kebanyakan webserver mengizinkan untuk menambah direktori-direktori untuk dilayani. Webserver modern memungkinkan untuk pengontrolan keamanan dan autentikasi pengguna dari program server. Cara pengontrol yang simple adalah menggunakan file .htaccess.

Pelayanan file static

Semua server web harus sekurang kurangnya mampu melayani file static yang terletak dalam bagian tertentu dari harddisk. Satu keperluan yang paling esensial adalah bisa menetapkan bagian mana dari disk yang akan dilayani. Kebanyakan server web mengizinkan bagian laindaru disk untuk digunakan.

Konten dinamis

Satu dari banyak aspek penting dalam memilih server web adalah kemampuan yang ditawarkan untuk menangani konten dinamis. Kebanyakan server web mendukung beberapa bahasa pemograman seperti PHP, JSP, ASP, CGI dan lain lain. Sangat direkomendasikan server web yang digunakan mendukung bahasa bahasa tersebut. PHP merupakan salah satu bahasa yang paling banyak penggunanya.

Server Apache

Apache merupakan sebuah server web yang robust, free software yang mempunyai fitur sejajar dengan server komersial. Proyek ini disupervisi dan dipimpin oleh sekelompok volentir dikenal sebagai Apache Group. Apache server dipublikasikan pertama kali pada tahun 1995 yang dikembangkan dari server NCSA.

Menginstal Apache Ada dua cara untuk menginstall Apache; melalui kompilasi source code atau menginstal paket untuk operating yang sesuai.

Instalasi Web Server pada Ubuntu Linux Pada umumnya server Apache sudah terinstall dalam aplikasi linux. Tetapi perlu untuk menginstal kembali kalau sebelumnya belum ada, mengganti ke versi yang baru atau ada problem dari file.

pada terminal ketik sudo apt-get install apache2 maka server web akan terinstal pada komputer anda.

Mengkonfigurasi Apache

Konfigurasi mungkin diperlukan setelah instalasi. Secara default, Apache dating dengan konfigurasi minimum untuk booting server pada port default (port 80) dan melayani semua file dari folder yang ditentukan pada pengarah configurasi (configuration diective) DocumentRoot. File configurasi Apache dinamai httpd.conf. File httpd.conf berbentuk teks (ASCII) yang berisi pengarah konfigurasi Apache.

Redhat/Fedora

rpm -ihv httpd-x.x.x.rpm

You will also need to install any additional modules, such as: • mod_auth_* • mod_python • mod_jk2 • mod_perl • mod_ssl • php • etc. (Tugas : lakukan instalasi server web pada computer anda)

Lokasi dari halaman web pada server apace adalah : var/www. Untuk mengakses web yang ada pada komputer anda dilakukan dengan mengetikkan http://localhost melalui web browser (seperti Mozila).

Konfigurasi Apache

Setelah instalasi kita perlu malakukan konfigurasi. Secara default, Apache dating dengan konfigurasi minimum untuk boot melalui port TCP (port 80) dan melayani dari direktori. File konfigurasi Apache disebut httpd.conf. The httpd.conf file is an ASCII file containing Apache's configuration directives.

2.3.1. Configuration file structure 2.3.2. Global configuration directives

2.3.3. Main directives 2.3.4. Section directives 2.3.5. Virtual servers

Tugas :

Konfigurasi server web yang telah diinstall untuk merespon permintaan HTTP pada port 123.

Untuk tugas ini lakukan : edit file /home/carlesm/apache/conf/httpd.conf ganti papameter berikut : : Listen 123

ServerAdmin admin@uoc.edu DocumentRoot "/home/carlesm/web" <Directory "/home/carlesm/web"> Options Indexes FollowSymLinks AllowOverride None Order allow,deny Allow from all </Directory> ScriptAlias /cgi-bin/ "/home/carlesm/cgi/" <Directory "/home/carlesm/cgi"> AllowOverride None Options None Order allow,deny Allow from all </Directory>

Menguji web server Untuk memastikan aplikasi web server yang telah terinstal bekerja dengan baik, periksa dengan menjalankan sebuah file

html yang ada di direktori (folder) web. Sebagai contoh: Buat sebuah file web menggunakan Open office writer dan kemudian simpan file tersebut pada folder web (/var/www) dengan ektensi html (save as html), misalnya test.html (lihat gambar berikut) :

Gambar 1.10

Catatan: Agar file tersebut bisa ditulis oleh semua user, ubah dulu mode direktori www dengan cara berikut ~$ cd /var/

/var$ sudo chmod 777 www

Buka file test.html tersebut melalui web browser dengan mengetikkan alamat http://localhost/test.html . Hasilnya akan muncul seperti gambar berikut. Apabila browser menampilkan isis file sesuai dengan yang dibuat berarti file telah bekerja.

Gambar 1.11

10. Latihan

1. Menggunakan Mesin Pencari. Dengan menggunakan satu kata kunci (misal STKIP) buka salah satu halaman web yang ditemukan dari hasil pencarian tersebut. 2. Mengamati tampilan sebuah web. Sebutkan media dan fasilitas apa saja yang ditampilkan dari halaman web yang anda amati (Video, gambar, teks, menu, slide show) 3. Melihat kode dari web (page source).

1. Dengan menggunakan Mozila Pilih view->Page source untuk melihat code yang digunakan oleh halaman web tersebut. Simbol apa yang sering dijumpai dalam kode tersebut. 2. Copy dan simpan kode tersebut dan buka kembali dengan web browser (File->Open). Apakah tampilannya masih sama dengan aslinya. Kalau tidak bagian manakah yang hilang?. 3. Kembali amati kode web tersebut. Terka salah satu arti dari teks yang sering muncul dalam kode tersebut.

11. Pertanyaan

1. Apa guna aplikasi Apache2 2. Dimana lokasi file web pada server? 3. Apakah tipe (ekstensi) dari file web? 4. Apa kepanjangan dari HTTP?

Bab 2 : Pemakaian HTML

Outcome : Setelah mempelajari mahasiswa mampu:

1. Membuat web sederhana menggunakan bahasa html

2. Belajar membuat web melalui informasi dari internet

3. Mengatur tampilan web dengan menu, latar belakang dan bentuk huruf.

Website atau disingkat web atau dikenal juga dengan nama homepage merupakan sarana penyampaian informasi melalui Internet. Berbagai macam website kini telah meramaikan dunia maya dengan berbagai macam kandungan informasi seperti berita, iklan perusahaan, ilmu pengetahuan ataupun informasi pribadi seseorang. Bahasa yang umum dipakai untuk membuat halaman website ini salah satunya adalah Hyper Text Mark up Language yang dikenal dengan singkatan HTML. Perintah perintah yang dipakai dalam HTML ini dinamakan tag. Tag-tag yang dipakai dalam sebuah web dapat dilihat dengan mengeklik tab View Source dalam web browser yang dipakai.

Contoh berikut adalah source dari sebuah halaman web dengan tampilan seperti Gambar 2.1

Gambar 2. 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>

<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8"> <TITLE></TITLE> <META NAME="GENERATOR" CONTENT="OpenOffice.org 3.2 (Linux)"> <META NAME="CREATED" CONTENT="20111018;10120800"> <META NAME="CHANGED" CONTENT="20111018;10372400"> <STYLE TYPE="text/css"> <!--

@page { margin: 0.79in } P { margin-bottom: 0.08in } A:link { so-language: zxx }

--> </STYLE>

</HEAD> <BODY LANG="en-US" DIR="LTR"> <P ALIGN=CENTER STYLE="margin-bottom: 0in; background: #cccccc">Internal Website Afzeri</P>

<h2> <P><A HREF=" PengenalanKomputer1/index.php ">Pengenalan Komputer 1</A>

<P><A HREF=" DisainDanPemogramanWeb/index.php ">Disain dan Pemograman Web</A> </h2>

</BODY> </HTML>

Contoh 1: Source HTML

Apakah HTML? HTML adalah bahasa untuk penjabaran halaman web digunakan untuk membuat dokumen dengan

struktur hiperteks. HTML juga bisa digunakan untuk membuat dokumen multimedia.  HTML singkatan dari Hyper Text Markup Language

 HTML bukanlah bahasa pemograman, ini adalah teks yang di tambah-tambah (markup)  HTML menggunakan tags untuk menjabarkan halaman web.

Ekstensi File manakah yang dipakai .HTM atau .HTML? Bila anda menyimpan file HTML, anda bisa menyimpannya dengan ekstensi .htm atau .html.

Keduanya tidak ada bedanya. HTML juga bisa digunakan untuk membuat file multimedia yaitu informasi yang mengandung tidak hanya teks tetapi juga berupa imej, video, suara atau juga sub program aktif (plig-ins, applets).

Beberapa contoh tag yang dipakai untuk membangun sebuah halaman website adalah <html>, <head>, <title>, <body>, </html>, </head>, </title>, </body> . Pada contoh di atas terlihat bahwa setiap tag mempunyai pasangan yang ditambahi dengan tanda slash (/). Perlu diingat bahwa tidak semua tag mempunyai pasangan seperti contoh di atas, ada tag tag yang tidak mempunyai pasangan seperti tag <p> yang digunakan untuk memisahkan paragraf.

Tugas : Tunjukkan tag-tag dari source website pada contoh 1 diatas serta pasangannya?

Software untuk membuat Web

Dokumen HTML adalah berupa teks datar (tanpa ada format tertentu) sehingga pada dasarnya bisa diedit menggunakan editor teks. Website bisa dibuat dengan bantuan software web developer seperti Microsoft Frontpage atau Macromedia Dreamweaver, Kompozer atau Visual Studio.

KompoZer merupakan aplikasi membuat web gratis untuk sistim operasi Ubuntu. Aplikasi ini dapat diinstal dengan mengetik sudo apt-get install kompozer melalui terminal Ubuntu. Gambar 2 menampilkan aplikasi kompozer (Pembuatan web dengan komposer akan dipelajari pada bab selanjutnya).

Web juga bisa dibuat langsung dari aplikasi pengolah kata seperti Microsoft word atau Open office writer dengan menyimpan file sabagai format html. Namun teks editor yang umum Notepad, Internet

Explorer, atau web browser sejenis bisa dipakai. Untuk latihan membuat web secara online bisa dilakukan melalui http://www.w3schools.com/html/ .

Gambar 2

Struktur Halaman Web

Sebuah halaman web terdiri dari dua bagian, yaitu bagian kepala dan badan. Bagian kepala memberi nama website, sedangkan bagian badan berisi halaman inti sebuah web. Bagian kepala dan bagian badan ini nantinya akan membentuk sebuah kesatuan halaman website yang akan kita buat.

<html> <head> <title>

Website Saya

</title> </head> <body>

Selamat datang di website saya yang pertama

</body>

</html>

Kalimat atau kata yang kita tuliskan di antara tag <title> </title> merupakan judul atau deskripsi dari website yang dibuat. Sedangkan kalimat di antara <body> </body> merupakan isi dari website.

Paragraf

Tag paragraph <p> digunakan un tuk memisahkan alinea. HTML mengabaikan pemotong baris (line breaks) yang dimasukkan menggunakan tombol enter pada file asli. Sebuah paragraph diindikasikan dengan teks yang dibatasi oleh <p> dan </p>. Tag P mempunyai atribut ALIGN untuk mengatur kelurusan teks dalam satu alinea <P ALIGN ttt>. Nilai ttt adalah satu dari yang berikut:

LEFT, Mengatur paragraph rata kiri. RIGHT, mengatur paragraph rata kanan. CENTER, meletakkan teks ditengah.

Pemotong baris (Line breaks)

Untuk memisahkan baris digunakan tag <br>. BR tidak mengubah parameter yang dimasukkan pada tag paragraph.

Warna Background

Warna background website dapat dilakukan dengan menambahkan ka ta “bgcolor = warna” setelah tag body. Misalnya anda ingin memberi warna hitam website anda maka anda tinggal tambahkan kode berikut :

<body bgcolor = yellow>

Bila anda ingin mengubahnya menjadi warna lainnya anda tinggal ubah warna yang diketik setelah bgcolor, misalnya : red, green, blue, atau warna lainnya.

Gambar imej juga bisa dijadikan sebuah gambar sebagai background website dengan menambahkan kode : “background = file gambar” setelah tag body.

Misalnya file gambar pemandangan.jpg dijadikan sebagai background halaman website, maka tinggal tambahkan kode berikut :

<body background = pemandangan.jpg>

Menggunakan gambar imej sebagai background halaman website anda akan memperlambat loading halaman website anda, terutama untuk ukuran file gambar yang terlalu besar. Background website bisa menggunakan file yang bukan berupa gambar imej.

Pengatur tampilan teks

Beberapa pengaturan tampilan teks adalah  Ukuran font  Warna font  Efek tulisan

ukuran tulisan bisa juga kita ubah ubah.

Untuk itu kita perlu menyisipkan tag <font> </font> dalam tag <body> </body>.

Untuk mengubah warna tulisan kita tambahkan kode “color” setelah font.

Khusus untuk size kita bisa mengubah ubah ukurannya dari -7 sampai +7, bila nilainya semakin besar maka semakin besar pula huruf yang akan ditampilkan dalam halaman web.

Kita bisa mengubah satu, dua, atau tiga pengaruh tag tag di atas secara bersamaan dengan dipisahkan spasi.

<html> <head> <title>

Website Saya

</title> </head>

<body bgcolor = black>

Selamat datang di website saya yang pertama </font> </body> </html>

Kode di atas berarti memberi pengaruh tulisan warna putih berjenis Verdana dan berukuran +3. Anda bisa juga menambahkan efek tulisan bergerak dengan menyisipkan tag <marquee> </marquee> sebelum kode <font> </font>

Menambahkan gambar Menambahkan gambar

Untuk memberi jarak antara tulisan anda sebelumnya dengan foto ini maka perlu anda tambahkan tag <br>.

<font color = white face = verdana size = +3 align = center>

Selamat datang di website saya yang pertama <br> <img src = logo.jpg>

</font>

Tampilan website anda akan seperti ini. Ukuran gambar bisa anda atur dengan menambahkan kode “height = ukuran”, dan/atau “width = ukuran”. Misalkan anda ingin gambar anda mempunyai tinggi

100 pixel maka anda tinggal tambahkan “height = 100” setelah kode nama file gambar yang anda sisipkan.

Komentar

Kita bisa memasukkan komentar kedalam HTML dengan menggunakan tag <!-- dan --!>. Isi diantara penanda ini akan diabaikan oleh browser dan tidak ditampilkan

Menu

Menu merupakan lintasan masuk kedalam suatu halaman web. Menu standar yang ada dalam web sederhana biasanya adalah profil, galeri foto, dan link. Satu buah menu biasanya mengacu pada satu file halaman web. Apabila kita menyiapkan menu profil, galeri foto dan link, maka untuk itu kita perlu menambah halaman baru yang mempunyai nama file profil.html, galeri.html, dan link.html (cattatan : nama file bisa berbeda dari nama file). Untuk membuat halaman halaman ini anda bisa mengulangi langkah langkah yang telah dijelaskan sebelumnya. Untuk menghubungkan halaman utama website dengan halaman halaman tambahan ini kita perlu ketikkan tag <a href = profil.html> dan ditutup dengan </a> bila kita ingin menghubungkan dengan halaman profil, demikian pula untuk halaman web lainnya. Kode berikut akan menampilkan hubungan antar halaman website yang berjejer.

<a href = profil.html> Profil </a> <a href = galeri.html> Galeri </a> <a href = http://stkipsurya.ac.id> </a> STKIP Surya

Untuk halaman profil, galeri, dan link bisa anda tambahkan sesuka anda seperti langkah langkah sebelumnya. Khusus untuk halaman link, anda bisa mengisinya dengan link ke STKIP Surya, Detik, Google, dan sebagainya. Link yang telah dijelaskan di atas bila kita klik maka halaman baru akan dibuka dalam satu jendela browser yang sama. Bila kita ingin tetap menikmati halaman website kita sedangkan kita juga ingin membuka STKIP Surya misalnya, maka kita perlu menambahkan tag “target = “_blank” setelah alamat STKIP Surya misal :

<a href = http://www.stkipsurya.ac.id target = “_blank”> STKIP Surya </a>

Bila anda ingin Friendster ini dibuka di halaman web yang sama maka anda tinggal hilangkan saja “target = “_blank” nya.

Bila anda ingin link ke halaman profil anda berupa gambar profil.jpg misalnya, maka anda perlu menyisipkan file gambar di dalam tag <a href = profil.html> </a>. Sehingga dapat kita tuliskan sebagai berikut :

<a href = profil.html> <img src = profil.jpg> </a>

Bila benar maka kursor mouse akan berubah menjadi “tangan” bila didekatkan ke gambar profil.jpg. Demikian pula bila link ke STKIP Surya atau Detik juga dalam bentuk gambar, maka anda tinggal menambahkan tag <img src = gambar> di antara tag <a href = link > </a>.

Latihan

Buat website dengan tampilan seperti berikut. (lihat seperti ditunjukkan pada browser)

Bab 3 Menggunakan Web Editor dalam merancang halaman Web

Outcome

Setelah mempelajari bab ini mahasiswa mampu:

1. Menggunakan web editor untuk merancang halaman web

2. Mengatur tampilan halaman web menggunakan frame dan tabel

3. Membuat form dengan beberapa tipe kontrol

Sebuah web yang baik haruslah mempunyai tampilan yang menarik dan mudah diakses informasi yang ada didalamnya. Menggunakan tag-tag secara langsung untuk membangun web adalah tidak praktis. Dalam pelajaran ini kita akan berlatih membuat halaman web dengan bantuan web editor kompoZer. Fungsi web editor adalah untuk memudahkan dalam perancangan web dan menkonversikan hasil pembuatan kedalam bahasa HTML. Dengan menggunakanweb editor kita tidak harus mengetikkan tanda tag. Tag-tag akan ditulis secara otomatis oleh kompozer sesuai dengan tampilan yang kita masukkan. Walaupun demikian pengetahuan tentang tag-tag diperlukan untuk melengkapi disain web dengan keperluan lain seperti pemograman atau menyisipkan link.

Dalam Bab ini dibahas fasilitas web sebagai berikut :

1. Menyisipkan gambar.

2. Membuat link

3. Membuat tabel

4. Membuat form

5. Frame

Latihan penggunaan fasilitas ini dilakukan menggunakan Web editor kompoZer.

KompoZer merupakan sebuah sistim web autor yang Tip: Menginstall kompozer pada Ubuntu mengkombinasikan manajemen file dan pengeditan halaman Pada terminal ketik : sudo apt-get install web yang mudah digunakan. Halaman web dengan tampilan kompozer yang aktraktif dan profesional bisa dibuat dengan mudah akan mumcul pertanyyan : Do you want to melalui tampilan WYSWIG (Apa yang di inginkan itu yang continue [Y/n]?

ditampilkan). Pilih Y maka Kompozer akan terinstall

Layar utama komposer tebagi atas tiga tab, tampilan Setelah terinstal, Kompozer dijalankan melalui WISWIG (design), tampilan berupa tag-tag(source) dan menu Application->Internet->KompoZer

tampilan berupa dua bagian(Split). Kita bisa berpindah pindah dari satu tampilan ketampilan lain sesuai dengan keperluan.

1. Mengunakan Komposer

Komposer bisa digunakan untuk membuat halaman web baru atau mengubah web yang sudah ada. Untuk memulai pilih menu Aplikation->Internet->KompoZer. Untuk memulai membuat halaman web pilih File->new dan lengkapi isian pada window Create a new document or template seperti berikut:

Ada tiga plilihan yang tersedia untuk memulai; halaman kosong, dari template dan template kosong. Untuk pelajaran pertama kita akan membuat dokumen baru dari sebuah template. Pilih radio yang kedua (a new document based on a template). Kemudian pilih template yang disediakan.

2. Menyisipkan gambar

Gambar disisipkan dengan dengan memilih menu Insert->Image. Kemudian pilih imej yang akan digunakan melalui dialog yang muncul.

Pilih imej yang mau disisipkan dengan klik gsmbsr folder Image location. (Cat: imej file harus dikirim keserver direktori yang sama dengan file web) Setelah imej disisipkan maka gambar imej akan muncul dilayar web.

Imej yang disipkan akan dikonversikan ka bahasa HTML seperti berikut:

<img style="width: 246px; height: 187px;" alt="Contoh Menyisipkan imej" src="../../Desktop/logo.png"

(untuk beralih ke tampilan HTML dan WYSWYG pilih Tab Split yang terletak dibagian bawah layar editor)

Anda bisa melakukan perubahan melalui kode html tersebut. Misalnya untuk mengganti lokasi file gambar yang diletakkan dalam forlder www/imej/, maka isi variabel src harus diubah menjadi src="imej/logo.png" .

3. Membuat link

Link berfungsi untuk membuka halaman web lain melalui menu dari web yang dilihat. Menu bisa dengan mengklik teks, gambar. Cara membuat link adalah terlebih dahulu dengan memilih gambar atau teks yang akan dijadikan menu untuk link. Melalui menu Link anda bisa membuat link baru atau

mengubah link yang sudah ada.

Lengkapi halaman web yang akan dituju melalui link ini dengan mengisi bidang Enter a web page

location...

Teks atau gambar yang mempunyai link akan ditulis dalam bahasa HTML dengan tag <a

Sejarah ke file Bab%201%20Pengantar%20pada%20Website.doc.

href=....></a>.

<a href="Bab%201%20Pengantar%20pada%20Website.doc">Website dan Sejarah<br></a>

Apabila teks Website dan Sejarah di klik maka browser akan membuka file Bab%201%20Pengantar%20pada%20Website.doc.

4. Membuat tabel

Tabel merupakan susunan tulisan atau tampilan dalam bentuk baris dan kolom. Cara Membuat tabel dengan composer hampir serupa dengan cara seperti office writer. Membuat table dilakukan melalui Insert->Table kemudian tentukan jumlah baris dan kolom

Ada tiga cara dalam mendefinisikan table secara cepat (Quickly), Presisi atau sel. Silahkan coba ketiga metode tersebut. Ukuran sel bisa diubah dengan klik ganda kolom dan melengkapi isi ukuran kolom.

Membuat form

Pernahkah anda melakukan pendaftaran melalui online atau setidaknya melakukan mencarian melalui internet? Area tempat memasukkan data itu disebut field. Form mesin pencari hanya terdiri dari satu field saja.

Contoh Form

Pengantar pada form

Form HTML adalah satu seksi dokumen yang berisi kandungan normal, markup dan elemen khusus yang disebut kontrol ( checkboxes, radio buttons, menus, etc. ) dan label pada kontrol tersebut. Para pengguna biasanya melengkapi sebuah form menggunakan kontrol modifikasi (memasukkan teks, memilih item menu dll) sebelum mengirim form ke sebuah agen untuk diproses ( spt., ke Web server, ke mail server, dsb. ).

Berikut adalah contoh form sederhana yang berIsi. Label, tombol radio, tombol tekan untuk mengulang atau mengirim.

<FORM action="http://localhost/prog/adduser" method="post"> <P> <LABEL for="firstname">First name: </LABEL>

<INPUT type="text" id="firstname"><BR> <LABEL for="lastname">Last name: </LABEL> <INPUT type="text" id="lastname"><BR> <LABEL for="email">email: </LABEL> <INPUT type="text" id="email"><BR> <INPUT type="radio" name="sex" value="Male"> Male<BR> <INPUT type="radio" name="sex" value="Female"> Female<BR> <INPUT type="submit" value="Send"> <INPUT type="reset"> </P>

</FORM>

Contoh form dengan berbagai macam kontrol

Kontrol-kontrol

Pengguna berinteraksi dengan form melalui fungsi yang disebut dengan kontrol. Sebuah nama kontrol diberikan melalui atribut nama. Setiap kontrol mempunyai nilai awal dan nilai sekarang, keduanya dalam bentuk karakter. Nilai awal dari kontrol didefenisikan melalui nilai atribut, tetapi tidak untuk TEXTAREA dan OBJECT.

Nilai kontrol selanjutnya ditentukan pertama oleh nilai sekarang dan selanjutnya bisa dimodofikasi oleh pengguna melalui interaksi atau scripts. Nilai awal kontrol tidak pernah berubah. Bila for di reset, semua nilai dari kontrol-kontrol di set ke nilai awal. Apabila tidak diberikan nilai awal maka kontrol tersebut menjadi tidak terdefenisi.

Apabila form di submit untuk proses, beberapa kontrol mempunyai pasangan nama dengan nilainya. Bila pasangan nama dan nilai kontrol terkirim maka disebut successful controls .

Tipe-tipe Kontrol HTML mendefenisikan beberapa tipe kontrol

buttons (tombol) Ada tiga macam tombol yang bisa dibuat:  Tombol pengiriman (submit buttons): bila Diaktifkan (ditekan) , sebuah tombol kirim mengirimkan isi form. Sebuah form bisa mempunyai lebih dari satu tombol kirim.  Tombol riset (reset buttons): bila diaktifkan tombol riset akan mengembalikan kontrol kontrol ke nilai awal.  Tombol tekan (push buttons): tombol tekan tidak mempunyai prilaku dasar (default behavior). Tiap tombol tekan bisa mempunyai skrip sisi klien yang ter asoSiasi dengan atribut kejadian. Bila kejadian berlaku (spt., pengguna menekann tombol atau melepaskan, dsb.), skrip yang terasosiasi akan di triger (dijalankan).

 Pembuat web (Authors ) harus menentukan bahasa skrip melalui deklarasi skrip awal melaui META (pembahasan ttg skrip akan dibahas pada bab 5).

Tombol tombol dibuat dengan menggunakan elemen BUTTON element atau elemen INPUT. Note. Authors should note that the BUTTON element offers richer rendering capabilities than

the INPUT element. checkboxes

Checkboxes (dan tombol radio) merupakan kontak on/off Yang bisa di togle oleh pengguna. Kontak akan "on" bila atribut cek di set. Bila form dikirim, hanya kontrol checkbox "on" yang berstatus berhasil.

Tombol radio

Tombol radio (Radio buttons) merupakan checkboxes yang berbagi dengan beberapa kontrol. Bila satu dari sekumpulan radion dibuat "on", semua yang lainnya menjadi "off". Elemen INPUT digunakan untuk membuat kontrol tombol radio.

menus Menus menawarkan ke pengguna pilihan untuk di pilih. Elemen SELECT membuat menu yang dikombinasikan dengan elemen OPTGROUP dan OPTION.

Input teks (text input) Ada dua tipe elemen kontrol untuk membuat input teks; INPUT dan TEXTAREA. Elemen INPUT membuat satu baris kontrol input dan elemen TEXTAREA membuat beberapa baris kontrol input.

file select Tipe Kontrol ini mengizinkan pengguna untuk memilih file dan isinya bisa dikirim melalui form.

Elemen INPUT digunakan untuk membuAt kontrol file select. Kontrol tersembunyi (hidden controls) Penulis bisa membuat kontrol yang tidak ditampilkan Authors may create controls that are not rendered b tetapi nilainya dikirim dengan sebuah form. Tipe kontrol ini digunakan untuk menyimpan pertukaran informasi antara server dan klien dimana kemungkinan bisa hilang mengacu pada keadaan alami dari http. Kontrol tersembunyi dibuat menggunakan elemen INPUT.

object controls Objek objek gEnerik bisa disisipkan ke dalam form dimana nilai nilai yang terasosiasi bisa dikirim dengan kontrol kontrol yang lain. Kontrol objek dibuat dengan elemen OBJECT.

Latihan 3-1 : Membuat Form Isian

Dengan menggunakan Kompozer, form dibuat melalui menu Insert->Form. Langkah pertama yang

harus dilakukan adalah mendefenisikan form melalui Insert->form->Define form. Lengkapi form dengan mengisikan nama form. Action URL adalah target file atau script yang akan diproses apabila form selesai diisi. Untuk sementara action URL dilakukan pada sebuah file sebagai contoh krs.php (file disediakan.

Ada beberapa jenis tipe filed yang bisa digunakan diantaranya:

1. Text

2. Text area

3. Selection List

Methods : Filed methods mendefinisikan cara mengirimkan data. Ada dua macam cara yang bisa dipakai Post dan Get. Untuk latihan ini pilih post.

Aksi merupakan proses yang dilakukan terhadap data yang sampai pada server. Aksi dapat berupa pencarian atau menyimpanan. Tindakan ini harus dikakukan melalui pemograman Aksi untuk form selanjutnya akan dibahas pada bab pemograman melalui PHP.

Latihan 3-2 Merancang halaman web

Latihan ini bertujuan untuk merancang sebuah website dengan tampilan yang terdiri atas baner, menu dan satu halaman aksi dari menu dengan tata letak yang baik.

Rancangan isi atau tema Buatlah halaman Web untuk menampilkan pelajaran yang saudara asuh dari sebuah buku (misal fisika). Menu berupa daftar isi ditempatkan pada halaman pertama dan isi ditampilkan pada halaman yang lain dengan mengklik daftar isi tersebut. Masukkan link ke form yang dibuat pada latihan 1 sebagai komponen dari menu.

Layout Rancanglah layout sebuah web dengan menggunakan selembar kertas, diskusikan rancangan dengan tutor sebelum membuatnya dengan kompozer. Gunakan table untuk mengatur tata letak rancangan anda.

Bab 4 Dasar dasar pemograman dengan JavaScript

Berbagai Bahasa Pemograman untuk web tersedia. Setiap bahasa mempunyai kelebihan masing masing dan mendukung satu sama lainnya.

Java merupakan bahasa pemograman yang dikembangkan oleh Sun Microsystem Inc. Berbagai aplikasi dibuat dengan bahasa Java diantaranya pemograman web, desktop dan handphone.

Bahasa pemograman Java dibagi dalam dua bagian; Bahasa (setengah) terkompilasi dan bahasa diinterpretasikan langsung oleh browser (script).

Pengertian Scripting Komputer bekerja berdasarkan program yang dijalankan. Ada dua jenis program yang dijalankan oleh komputer; file eksekusi dan file script. File eksekusi merupakan hasil kompilasi dari kode program ke bahasa mesin. Bentuk file eksekusi antara lain dll,exe, jar. Jenis kedua menggunakan file script. File scrip merupakan kode program dalam bentuk teks. Komputer membaca kode ini setiap ada perintah untuk menjalankannya kemudian menterjemahkan baris perbaris. Dari segi kecepatan program dalam bentuk file eksekusi lebih cepat dari pada file skrip, karena pada file skrip ada waktu menterjemahkan program selain waktu eksekusi.

Dalam pemograman web, kedua jenis program ini dipakai. Walaupun waktu eksekusi lebih lama, kode skrip masih tetap populer dengan beberapa alasan. Kebanyakan browser bisa mengeksekusi skrip. Beberapa Kode skrip (pemograman sisi klient) bisa dilihat oleh pengguna sehingga mudah mengubah kalau ada modifikasi yang diperlukan. Untuk kecepatan, waktu yang lebih lama pada umumnya adalah pada proses tranfer data dari pada waktu eksekusi sehingga hampir tidak berbeda kecepatan dalam keseluruhan operasi antara skrip dan file eksekusi.

Jenis scripting

Berdasarkan tempat dieksekusinya skrip dapat dibagi atas dua; Client side programming Server side programming

Pada client side programming eksekusi program dilakukan oleh browser. Server side programming melakukan eksekusi skrip terlebih dahulu baru di kirim ke kien. Kode yang dikirim bisa berupa gabungan antara kode html dan kode client side skrip.

Bahasa java script dalam teori tidak bisa mengakses hardware dan file kien. Bahasa VBScript bisa mengakses file dan hardware klient Memerlukan instalasi objek ActiveX pada sistim klien . . http://homepages.ius.edu/rwisman/a348/html/client.htm http://www.echoecho.com/javascript.htm http://www.echoecho.com/javascript0.htm

Pemograman Web

Pemograman sisi klient merupakan kode yang harus dijalankan dalam browser. JavaScript merupakan salah satu contoh dari pemograman sisi kien karena kode dikirim ke browser terlebih dahulu dan dieksekusi di sana(browser) . Kode skrip bisa dilihat oleh klien dengan menggunakan menu Tool source (mozila).

PHP (yang dipelajari pada bab 7) merupakan contoh skrip sisi server karena kode di eksekusi di server dan hasilnya dikirim ke browser untuk ditampilkan. Kode program sisi server tidak bisa dilihat pada browser. Ini salah satu keuntungan dari pemogrman sisi server untuk mengamankan kode program terutama pasword yang digunakan untuk mengakses data. Program sisi server juga bisa digunakan membangkitkan kode scrip untuk dieksekusi disisi klien.

Web dinamis dengan JavaScrip

HTML pada dasarnya adalah statis, browser menampilkan teks dan grafik dan menunggu sampai pengguna menklik sebuah link atau mengisi sebuah form kemudian mengembalikan data ke server. Kemampuan dinamis umumnya hanya terbatas pada klik sebuah link atau mengirimkan form ke server dan menerima HTML statik lagi.

Pemograman sisi klien dirancang untuk menambah prilaku dinamis ke klien dengan menjalankan sebuah program pada browser.

Ada beberapa alasan menggunakan pemograman sisi klien.

JavaScrip adalah bahasa skrip yang memungkinkan untuk menambahkan pemograman nyata pada sebuah web. Contoh aplikasi web yang bisa dibuat dengan JavaScript seperti game primitive, kalkulator dsb.

Namun ada penggunan yang serius untuk JavaScript :

1. Mendeteksi browser yang digunakan.

Tergantung pada browser yang digunakan, beberapa halaman web tidak bisa dijalankan oleh browser tertentu. Dengan mendeteksi browser yang digunakan, pesan bisa diberikan ke pengguna bahwa halaman yang sedang dilayari tidak bisa ditampilkan dengan sempurna.

2. Cookies Menyimpan informasi pada komputer visitor dan kemudian mengambil informasi ini kembali secara

otomatis pada waktu mendatang saat pengguna pengguna mengunjungi halaman yang sama. Teknik ini disebut "cookies".

3. Mengontrol browser Membuka halaman halaman dalam window yang di kostomized dengan menambahkan menu menu,

tombol, status atau apa saja yang ingim ditampilkan.

4. Memvalidasi form. Memvalidasi data yang diinputkan sebelum form dikirim merupakan cara yang cepat memberi tahu pengguna akan kelengkapan data yang dikirim. Sebagai contoh, alamat email yang dimasukkan bisa divalidasi misalnya melalui karakter. Setiap alamat email selalu mengandung sebuah karakter @. Jika tidak kelihatan atau lebih dari satu karakter @ berarti bukan alamat email yang valid.

Untuk mahir menggunakan javascript mulailah dulu dengan mengerti pada dasar dasarnya. Pelajaran ini menyajikan semua inti yang perlu diketahui sebelum membangun dan mngkostomisasi sebuah web yang bagus.

Dasar-dasar JavaScript

DIMANA MENEMPATKAN KODE JAVASCRIPT?

Karena javascript bukanlah HTML, anda harus perlu memberi tahu browser bila memasuki javascript pada sebuah halaman HTML. Ini dilakukan dengan menggunakan tag <script>. Pada browser gunakan kode <script> type="text/javascript"> dan </script> yang berarti awal dan akhir dari javascript.

Lihat contoh berikut: Contoh4-1.html <html> <head> <title>Halaman Javascript Saya</title> </head>

<body> <script type="text/javascript"> alert("Selamat datang di hompage saya!!!"); </script> </body> </html>

Kata alert adalah sebuah perintah standard javascript yang akan menampilkan kotak pop up pada layar. Visitor perlu menklick tombol "OK" pada kotak alert box untuk melanjutkan. Dengan memasuki perintah alert yang ada antara tag <script type="text/javascript"> dan </script>, browser akan mengenal bahwa ini adalah sebuah perintah javascript. Bila perintah tidak ditulis diantara tag <script>, browser akan mengenal sebagai teks dan menuliskan teks apa adanya pada layar.

Kode javascript bisa ditempatkan pada bagian <head> dan <body> pada sebuah dokumen. Secara umum disarankan untuk menempatkan sebanyak mungkin dalam bagian <head>.

SKRIP PERTAMA

Sudah diketahui bahwa perlu bahwa javascript memerlukan <script> untuk memulai. Ada beberapa hal lagi yang perlu diketahui sebelum memulai menulis javascript:

Baris-baris Javascript berakhir dengan tanda titik koma (;). Lihat kembali contoh 4-1 sebelumnya dimana baris kode javascript berakhir dengan titik koma (semicolon).

Tanda berpengaruh pada performan, kode java skrip bisa ditulis dalam satu baris. Tapi cara ini tidak disarankan karena akan susah mengamati skrip secara keseluruhan.

Tempatkan teks diantara tanda " ". Bila memasukkan teks untuk di handle oleh javascript, selalu ditempatkan dalam tanda " ". Bila lupa menutup teks dalam tanda " ", javascript akan menginterpretasikan teks tersebut sebagai variabel bukan teks.

Berikut ini akan dipelajari kenapa terjadi kesalahan dalam kode skrip.

Huruf besar berbeda dengan huruf kecil. Harus selalu diingat bahwa huruf kapital. Ini berarti bila menulis perintah dengan huruf besar dalam javascript, perlu mengetikkannya pada yang tepat. Kesalahan yang umum pada semua level pemogram adalah kesalahan penilisan huruf besar.

Disamping menyuruh javascript untuk menampilkan sesuatu melalui kotak pop up kita bisa menulis secara langsung kedalam dokumen.

<html> <head> <title>Halaman Javascript Saya</title> </head>

<body> <script> document.write("Selamat datang di tempat saya!!!"); </script> </body> </html>

Fungsi documen.write adalah perintah javascript mengatakan ke browser bahwa tulisan terletak antara tanda kutip ditulis kedalam dokument. Catatan: Bila memasukkan teks dalam javascript, perlu untuk menempatkannya diantara " ".

Script dalam contoh diatas menghasilkan keluaran : Selamat datang ditempat saya!!!

Tugas: Kopi contoh tersebut dan tempatkan dalam server web. Lihat hasilnya melalui browser.

Perhatikan contoh ini untuk mempelajari dimana menulis teks javascript:

<html> <head> <title>My Javascript Page</title> </head>

<body> Halo!!!<br> <script> document.write("Selamat di web saya!!!<br>"); </script> Semoga senang...<br> </body> </html>

Output dari contoh ini akan kelihatan seperti berikut:

Halo!!! Selamat dating di web saya!!! Semoga senang...

Seperti yang terlihat dilayar, javascript menulis teks pada dimana skrip ditempatkan dalam kode HTML. Sebuah aspek yang menarik adalah bahwa segala jenis tag HTML bisa diletakkan kehalaman web melalui metoda document.write method. Sebagai contoh, jika ingin membuat table untuk membandingkan temperature dalam Fahrenheit dan Celsius, selain dengan menulis

For instance, if you wanted to make a long table that compared Fahrenheit and Celsius, instead of actually typing all the values into the table, you could have javascript calculate the values and write the table to the document.

An example of a javascript generated table can be seen on the page explaining the hexadecimal colorsytem.

On that page, there are 15 tables with 25 columns in each. Each cell shows different mixtures of the basic colors red, green and blue.

To set up these tables in HTML would demand almost an entire days work. Using javascript for the same purpose took less than 15 minutes!

JavaScript Basics : VARIABEL-VARIABEL

Variabel bisa diibaratkan kotak kecil dengan sebuah nama. Isi dari kotak bisa berbeda atau berubah untuk satu kota yang sama.

Bila anda mempunya beberapa pasanag sepatu, bisa menempatkan dalam satu kotak dengan satu nama. Misalnya kotak sepatu adidas berisi 5 pasang sepatu. Bila sepasang sepatu dikeluarkan dari kotak maka kota sepatu adidas berisi 4 pasang sepatu tetapi namanya masih tetap kotak sepatu adidas. Disini bisa dedifenisika kotak sepatu adidas adalah variable, jumlah sepatu didalamnya adalah isi variabel.

Defini variabel adalah sebuah tempat didalam memori komputer untuk menyimpan informasi. Variabel ditetapkan dengan memberi nama yang unik padanya.

Perhatikan contoh berikut : <html> <head> <title>Mengenal Variabel dalam Javascript</title> </head>

<body> <script> http://photos-c.ak.fbcdn.net/hphotos-ak- ash4/424526_2582068475210_1359410841_31950779_456974593_n.jpg </script> </body> </html>

Pada contoh ini akan menulis "Henri" pada dokumen.