Wawarankomputer: mempercantik halaman web

Bab 1

World Wide Web

1.1 Pendahuluan

WWW (World Wide Web) merupakan kumpulan informasi pada beberapa server komputer yang terhubung satu sama lain dalam jaringan Internet. Informasi dalam Web mempunyai link yang menghubungkan informasi yang satu dengan informasi yang lain dalam jaringan Internet. Link ini berupa tanda khusus yang biasanya dinyatakan dengan teks berwarna biru dan bertanda garis bawah/dalam bentuk icon maupun gambar yang dikelilingi kotak.

Untuk mengetahui apakah suatu teks/obyek merupakan suatu link, lihatlah perubahan pada petunjuk mouse. Jika petunjuk mouse berubah dari bentuk tanda panah menjadi gambar tangan yang sedang menunjuk, berarti teks/obyek tersebut merupakan suatu link yang menghubungkan Anda ke informasi lain dalam WWW. Sistem yang dapat mengubungkan informasi melalui link disebut Hypertext. Dengan semakin berkembangnya WWW, istilah Hypertext kemudian berubah menjadi Hypermedia, di mana link penghubung antar informasi bukan lagi berupa suatu teks, tetapi bisa berupa suatu file multimedia, seperti gambar, suara/video.

Bekerja dengan Web mencakup bekerja dengan software Web Browser dan software Web Server. Keduanya bekerja seperti sistem client server dengan tugas sebagai berikut:Web browser sebagai client untuk menginterpretasikan dan melihat informasi Web.

a. Web server sebagai server untuk menerima informasi yang diminta oleh browser. Untuk mengakses Web, Anda memerlukan suatu program yang disebut Web Browser.

1.2 Browser

Browser adalah suatu program yang dirancang untuk mengambil informasi dari suatu server komputer pada jaringan Internet. Informasi ini dikemas dalam page yang masing-masing memiliki beberapa link yang menghubungkan Web page ke sumber informasi lain. Jika suatu link diklik, browser akan melihat alamat dari tujuan link tersebut, kemudian mencari di Web server. Jika menemukan alamat dari tujuan link, browser akan menampilkan informasi yang ada. Jika tak menemukan alamat dari tujuan link, browser akan memberikan suatu pesan yang menyatakan bahwa alamat dari tujuan link tidak dapat ditemukan.

Ketika belum banyak komputer yang menggunakan program Windows, browser dibuat dengan berbasiskan teks, sedangkan untuk menyatakan link dapat dibuat barisan nomor yang mirip dengan suatu menu. Software ini dibuat untuk komputer yang menggunakan Unix. Setelah itu muncul browser Mosaic dari NCSA (National Center Supercomputing Applications) yang berbasiskan grafik dan mudah digunakan. Browser ini dipakai untuk komputer UNIX, NeXT, Windows dan Macintosh.

Sekitar tahun 1994, muncullah Netscape versi pertama menggantikan kepopuleran Mosaic sebagai Web browser. Sampai saat ini Netscape masih merupakan browser yang paling banyak digunakan untuk melakukan navigasi di Web. Kemudian salah satu perguruan tinggi terkenal di AS, yaitu MIT, membangun standar bagi teknologi Web yang disebut World Wide Web Consortium (W3C). Teknologi terakhir yang dikembangkan oleh Microsoft adalah Internet Explorer 3.0 yang mendukung HTML 3.2.

1.3 HTTP (Hypertext Transfer Protocol)

HTTP merupakan protokol yang menentukan Web browser dalam meminta/mengambil suatu dokumen, dan menentukan Web server dalam menyediakan dokumen yang diminta oleh Web browser. Ini adalah protokol standar yang dipakai untuk mengakses dokumen HTML. HTTP digunakan untuk menjelajahi Web yang berhubungan dengan banyak protokol lain.

1.4 URL

URL (Uniform Resource Locator) adalah suatu alamat yang dipakai untuk menentukan lokasi informasi pada Web server, karena alamat ini mengambil informasi yang diminta oleh browser. Format umum dari suatu URL adalah: protokol_transfer://nama_host/path/nama_file

Contoh: http://www.macromedia.com/shockzone/info/security.html

Yaitu berisi :protokol yang digunakan, nama server dari komputer yang dicari, jalur dari informasi yang dicari, nama file dari informasi yang dicari.

DNS (Domain Name System) Untuk mempermudah pengelolaan Web server dan Web browser pada komputer di Internet, komputer di Internet menggunakan suatu format penamaan yang disebut Domain Name System (DNS). DNS membagi domain menjadi beberapa tingkat yang merupakan kelompok komputer yang terhubung ke Internet. Nama domain beserta jenis organisasinya, antara lain:

· com ---> untuk komersial

· edu ---> untuk pendidikan

· net ---> untuk provider Internet

· id ---> untuk negara Indonesia

· gov ---> untuk Lembaga Pemerintahan

· int ---> untuk Organisasi International

· mil ---> untuk Organisasi Militer

· org ---> untuk Organisasi Umum

Web browser inilah yang disebut-sebut sebagai gerbang internet dengan kemampuan untuk menangani WWW (Web Wide World) dengan protokol HTTP (HyperText Transfer Protokol) yang merupakan protokol internet yang favorit saat ini selain FTP (File Transfer Protokol) dan POP2 sebuah protokol untuk email.

Gambar 1.1. Contoh tampilan Internet Explorer

Gambar 1.2. Contoh tampilan Opera

Gambar 1.3. Contoh tampilan Netscape

1.5 Web Server

Web server adalah suatu perangkat komputer berupa software yang digunakan untuk menjadi sebuah komputer menjadi server yang dapat menangani semua kegiatan yang berhubungan dengan protokol HTTP. Komputer yang dilengkapi oleh software ini akan dapat diakses oleh komputer lain menggunakan web browser dengan cara menuliskan nama server (host name) atau dengan menuliskan nomor IP dari komputer tersebut.

Setiap pembuatan aplikasi berbasis web akan membutuhkan web server untuk meletakkan aplikasi tersebut sehingga bisa diakses menggunakan protokol HTTP. Beberapa web-server yang saat ini banyak digunakan adalah:

· Apache, web server gratis yang sangat mudah diperoleh. Awalnya apache ini berbasis UNIX, tetapi saat ini apache sudah tersedia untuk sistem operasi Windows.

· IIS (Internet Information System), web server keluar Microsoft yang banyak digunakan sebagai web server untuk aplikasi web dengan sistem operasi windows, dan bahasa pemrograman web ASP atau ASP.NET

Dalam modul ini akan digunakan web server Apache, salah satu web server gratis yang mudah diperoleh dan mendukung pemrograman PHP. Untuk melihat apakah web server Apache sudah ada atau belum di komputer yang akan digunakan adalah dengan membuka web browser dan menuliskan localhost atau no IP dari komputer. Bila di komputer ada sudah ada web server maka hasilnya adalah seperti gambar 1.4. berikut:

Gambar 1.4. Di dalam komputer ada web server Apache2 dari TRIAD

Bila tidak ada web server di komputer, maka hasilnya adalah sebagai berikut:

Gambar 1.5. Komputer tidak mempunyai web server.

Bila di komputer sudah ada web server, maka selanjutnya tinggal membuat aplikasi web. Dalam pembuat aplikasi web pertama kali, letakkan program aplikasi yang dibuat di dalam folder: c:\apache2triad\htdocs, dan bila menggunakan folder khusus letakkan folder tersebut dalam folder di atas. Penguabhan folder web dapat dilakukan dengan mengubah [documentRoot] pada file c:\apache2triad\conf\httpd.conf dengan cara sebagai berikut:

Gambar 1.6. Letak dokumen root

1.6 HTML (HyperText Markup Language)

HTML yang akan dibahas meliputi beberapa tahap, yaitu level HTML, HTML Extension dan program Editor HTML. HTML adalah format data yang dipakai untuk membuat dokumen HyperText. Dokumen HTML disebut Mark Language, karena berisi tanda tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Pada sistem HyperText pada dokumen HTML, Anda tidak harus membaca dokumen secara urut dari atas ke bawah, melainkan cukup menuju pada topik tertentu secara langsung dalam dokumen. Ini dikarenakan dokumen tersebut menggunakan teks penghubung ke suatu topik/ dokumen lain secara langsung.

Sejak perkembangannya sampai sekarang ini telah tersedia bermacam-macam level HTML, antara lain HTML 1.0; HTML 2.0; HTML 3.0; HTML 3.2; dan HTML Extension.

* HTML 1.0

HTML level 1.0 adalah level pertama untuk HyperText Markup Language. Desainnya sederhana sekali, di antaranya heading, paragraph, hypertext, list dan format teks untuk tebal/ miring. Kelemahan HTML 1.0 adalah tidak ada fasilitas gambar, sehingga teks tak dapat diletakkan di sekeliling suatu image.

* HTML 2.0

HTML level 2.0 mencakup semua fasilitas level 1.0 ditambah dengan fasilitas untuk membuat form. Form ini dipakai dalam Web page untuk meminta saran dari pembaca, dan kotak penyuntingan (edit box). Dengan HTML 2.0, WWW dapat menjadi suatu media informasi dua-arah antara pemilik Web dengan pemakai Web, bukan hanya sekedar sistem penampil informasi.

* HTML 3.0

HTML level 3.0 sangat kompatibel dengan HTML level 2.0, tetapi disertai dengan beberapa fasilitas baru. Fasilitas baru tersebut antara lain penambahan fasilitas pembuatan tabel dan gambar dengan perintah FIGURE. Perintah FIGURE sendiri merupakan perkembangan dari perintah IMAGE .

* HTML 3.2

HTML 3.2 merupakan pengganti dari HTML 3.0 dengan beberapa tambahan, seperti applet Java (teks yang dapat diletakkan di sekeliling gambar), superscript, subscript, perataan pada tabel, background gambar dan warna, fasilitas frame dan sytle sheet ( pemisah layout halaman dengan isinya).

* HTML Extension

Salah satu tambahan pada HTML ini adalah tag < BLINK> yang membuat teks dalam tag tersebut tampil berkedip-kedip dalam Netscape Browser. Pada HTML ini terdapat bermacam-macam daya kreatif untuk mengembangkan HTML yang sangat diperlukan selama tidak mengganggu penampilan dokumen HTML pada browser.

1.7 Program Editor HTML

Untuk membuat dokumen HTML, sebaiknya Anda menggunakan program editor teks seperti Notepad, Sidekick, dan WS dalam format Non Document untuk aplikasi DOS. Program WYSIWYG, seperti Microsoft Word dan Word Perfect for Win, tidak dapat dipakai untuk membuat dokumen HTML, karena program ini dianggap sebagai dokumen biasa dan tidak dapat diterjemahkan oleh Browser. Program tambahan yang dipakai untuk menyunting HTML adalah Word Internet Assistant dan WordPerfect Internet Publisher.

Selain program editor teks, Anda bisa menggunakan program editor khusus untuk membuat HTML, antara lain program editor HTML berbasis teks dan WYSIWYG yang tidak memerlukan browser lagi.

1.8 Bagaimana WWW Bekerja

(1) Informasi web disimpan dalam dokumen yang disebut dengan halaman-halaman web (web pages)

(2) web page adalah file-file yang disimpan dalam komputer yang disebut dengan server-server web (web server)

(3) Komputer-komputer membaca web page disebut sebagai web client

(4) Web client menampilkan page dengan menggunakan program yang disebut dengan browser web (web browser)

Bab 2
Pengenalan HTML

2.1 Dokumen HTML

HTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan teks editor. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam web browser. Ada dua cara untuk membuat web page, denghan HTML editor atau editor text biasa (misal : notepad). Untuk latihan buku ini kita menggunakan Macromedia Dreamweaver.

2.2 Penamaan Dokumen

Dokumen HTML diberi nama sembarang kemudian diberi tambahan ekstensi ”.htm” atau ”.html”

2.3 Definisi Elemen

Dokumen HTML disusun elemen-elemen atau komponen dasar pembentu HTML. Contoh dari elemen dokumen HTML adalah : head , body, table, paragraf, list.

2.4 Definisi Tag

Tag digunakan untuk menandai elemen dalam suatu dokumen HTML. Tag HTML terdiri atas sebuah sudut kiri (<, tanda lebih kecil), nama sebuah tag, dan sebuah tanda kurung sudut kanan (>, tanda lebih besar. Tag umumnya berpasangan, sebagai contoh <H1> Dengan </H1>. Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan : <namatag> - </namatag>

2.5 Elemen HTML yang diperlukan

Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag <html>,<head>, dan <body>.Setiap dokumen terdiri atas tag head dan body. Elemn Head berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang akan ditampilkan di browser.

Secara umum dokumen web dibagi menjadi dua section, yaitu section head dan section body. Sehingga setiap dokumen HTML harus mempunyai pola sebagai berikut :

<html>

<head>

-- Informasi tentang dokumen HTML

</head>

<body>

-- Informasi yang akan ditampilkan dalam web browser

</body>

</html>

Setiap dokumen html harus diwali dengan menuliskan tag <html> dan tag </html> di akhir dokumen. Tag ini menandai dokumen HTML yang berarti adalah dokumen HTML dalam satu dokumen hanya ada satu elemen html.

Section atau elemen head ditandai dengan tag <head> diawal dan tag </head> diakhir. Section ini beiris informasi tentang dokumen HTML, mislnya informasi judul html yang ditandai dengan tag <title> dan diakhiri dengan tag </title>. Section body ditandai dengan tag <body> dan diakhiri dengan tag </body> diakhir. Section body merupakan isi dokumen yang akan ditampilakn pada browser.

Contoh – Listing 2.1 : contoh1.html

<html>

<head>

<title>Belajar Web Design</title>

</head>

ini adalah halaman HTML

<body>

</body>

</html>

Gambar 2.1. Contoh hasil di browser

Penjelasan Contoh

Tag pertama pada dokumen html anda adalah <html>,. Tag ini memberi tahu bahwa ini adalah awal dari dokumen HTML. Tag terakhir pada dokumen anda adalah </html>. Tag ini memberi tahu browser bahwa ini adalah akhir dari dokuemn HTML. Teks antara <head> dan </head> adalah informasi header. Informasi header tidak ditampilkan pada window browser. Hanya teks yang berada diantara <body> dan </body> yang akan ditampilakan pada browser. Teks diantara <title> dan </title> adalah judul dokumen yang akan ditampilakn pada window caption.

2.6 Penggunaan Tag

· Tag HTML diapit dengan dua karakter kurung bersudut, < dan >.

· Tag HTML secara normal selalu berpasangan seperti <H!> dengan </H1>

· Tag HTML tidak ‘case sensitive’, berarti <H1> dama dengan <h1>

2.7 Atribut Tag

Tag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan.

Tag berikut tidak mempunyai atribut : <body>. Tag <body> ini tidak menggunakan atribut, sehingga dokumen HTML ditampilkan dengan warna background sesuai dengan definisi warna background pada browser webnya. Umumnya berwarna putih.

Tag berikut mempunyai atribut : <body bgcolor=”red”>. Tag <body> ini mempunyai atribut bgcolor dengan nilai “red’. Sehingga background akan menampilkan warna merah.

2.7.1 Tag HTML

Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan keharusan untuk membuat dokumen HTML.Tag <html> sebagai pembuka dokumen HTML dan tag </html> sebagai penutup dokumen HTML.

Contoh – Listing 2.2:

<html>

........................

</html>

2.7.1 Tag Head

Merupakan tag setelah <html> untuk menuliskan keterangan tentang dokumen HTML. Isi teks diantara <head> dengan </head> tidak akan ditampilkan di dalam browser.

Contoh – Listing 2.3:

<head>

<title>Belajar Web Design</title>

</head>

2.7.2 Title

Merupakan tag yang digunakan untuk menuliskan judul dokumen HTML. Hasil tag ini akan ditampilkan dalam window caption browser.

Contoh – Listing 2.4:

<title>Belajar Web Design HTML</title>

2.7.3 Body

Merupakan section dalam dokumen HTML yang akan ditampilkan dalam browser.

Contoh – Listing 2.5:

<html>

<head>

<title>Belajar Web Design</title>

</head>

<body>

ini adalah section HTML yang ditampilkan di browser

</body>

</html>

2.7.4 Paragraf

Setiap paragraf harus dimulai dengan memberi tag <p>. Diakhir paragraf tidak diharuskan menuliskan </p> sebagai akhir paragraf, karena tag <p> tidak didefinisikan mempunyai tag akhir. Setiap paragraf harus dimulai dengan <p> kembali. Setiap pergantian paragraf ditandai dengan tag <p>

Contoh – Listing 2.6:

<html>

<head>

<title>Tag Paragraf</title>

</head>

<body>

<p>berikut ini adalah paragraf 1</p>

<p>berikut ini adalah paragraf 2</p>

<p>berikut ini adalah paragraf 3</p>

</body>

</html>

Contoh - Listing 3.7 : paragraf2.html

<html>

<head>

<title>Paragraf</title>

</head>

<body>

<p>Pada tahun 1950-an Kolonel Sanders (pendiri KFC) mulai mengendarai mobilnya dari kota ke kota untuk memulai bisnis KFC-nya, dengan cara menawarkan resep rahasianya dari satu restoran ke restoran yang lainnya. Kadang beliau tidur di dalam mobilnya dan memakan ayam buatannya sendiri untuk bisa bertahan. Dia baru dapat mencapai tujuannya setelah bertemu dengan orang yang ke-1010. Orang tersebut berpikir ayam Kolonel tersebut cukup bagus untuk di jual ke publik

</p>

<p>Contoh lainnya Thomas Alfa Edison yang mengalami kegagalan sebanyak 9000 kali sebelum akhirnya ia menemukan bola lampu. Dia tidak menyesal dengan kegagalan-kegagalannya, bahkan ia berkata beruntung menemukan 8999 cara yang salah dalam membuat bola lampu. Kemudian ia dapat membuat 1093 paten, orang yang paling banyak memegang paten dalam sejarah Amerika</p>

</body>

</html>

Gambar 2.2. Contoh hasil paragraf2.html

2.7.5 Line Break

Kita dapat memaksa ganti baris pada dokumen web dengan tag <br>. Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf.

Contoh – Listing 2.7:

<html>

<head>

<title>Ganti Baris</title>

<head>

<body>

ini adalah baris ke 1<br>

ini adalah baris ke 2<br>

ini adalah baris ke 3<br>

ini adalah baris ke 4<br>

ini adalah baris ke 5<br>

</body>

</html>

2.7.6 Heading

Tag heading aklan membuat tulisan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading dimanfaatkan untuk menandai judul topic atau untuk menunjukkan tingkat keberartian dati teks yang akan dituliskan. Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan 6. Nomor 1 merupakan heading yang terbesar.

Contoh – Listing 2.8:

<html>

<head><title>Heading</title></head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</body>

</html>

Gambar 2.3. Contoh heading

2.7.7 Garis Pembatas

Sebuah garis pembatas dapat disisipkan dalam dokumen web dengan menggunakan tag <hr>

Atribut	Keterangan
Align	Menentukan letak garis : center,left,right
Color	Menentukan warna garis
Size	Menentukan ukuran garis
Width	Menentukan tebal garis

Contoh – Listing 2.9:

<html>

<head>

<title>Horizontal Rule</title>

</head>

<body>

<p align=”center”>Paragraf pertama</p>

<p align=”center”>Paragraf keduapertama</p>

</body>

</html>

Gambar 2.4. Garis Pembatas

2.7.8 Komentar

Dalam sebuah dokumen HTML ada informasi yang berfungsi sebagai catatan atau komentar terhadap dokumen isi komentar ini tidak akan ditampilkan dalam browser. Untuk membuat komentar dengan menggunakan tag:

sebagai akhir komentar.

Contoh – Listing 2.9:

<html>

<head>

<title>Horizontal Rule</title>

</head>

<body>

<p>Tulisan ini akan ditampilkan di browser</p>

</body>

</html>

2.8 Toolbar Dreamweaver untuk dasar HTML

Macromedia Dreamweaver sebagai salah satu aplikasi untuk membuat dan mengembangkan web menyediakan toolbar untuk semua tag dasar HTML. Perhatikan gambar 2.5 dan gambar 2.6 yang menunjukkan toolbar untuk dasar HTML.

Gambar 2.5. Toolbar tab Text

Keterangan - tab Text :

· h1 : heading 1

· h2 : heading 2

· h3 : heading 3

· br : Line Break

· p (dibalik) : Paragraf

Gambar 2.5. Toolbar tab Comment

Keterangan – tab common : terdapat toolbar untuk tag komentar

Bab 3

Pemformatan Teks HTML

Teks dalam dokumen web dapat diformat secara khusus untuk menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Perbedaan ditampilkan dalam bentuk huruf tebal, miring, digarisbawahi,dll.

3.1 Pemformatan Teks

Menebalkan huruf (bold)
Memiringkan huruf (italic)
Digarisbawahi
Mengecilkan huruf
Superscript
Subscript

Contoh – Listing 3.1: formatteks.html

<html>

<head>

<title>Format Teks</title>

</head>

<body>

<p><b>Tulisan ini ditebalkan (bold)</b></p>

<p><strong>Tulisan ini ditebalkan (strong)</strong> </p>

<p><em>Tulisan ini miring (emphasize) </em></p>

<p><big>Tulisan ini besar (big)</big></p>

<p><i>Tulisan ini miring (italic) </i></p>

<p>Tulisan ini <sub>subscript</sub> </p>

<p>Tulisan ini <sup>superscript</sup></p>

</body>

</html>

Gambar 3.1. Contoh formatteks.html

3.2 Teks Preformat

Tag <pre> dan </pre>dapat kita gunakan untuk menampilkan sesuai dengan dokumen web tersebut dalam editor teks.

Contoh – Listing 3.2 : pre.html

<html>

<head>

<title>Tag Preformatted</title>

</head>

<body>

<pre>

This section provides a brief overview of the menus in Dreamweaver.

The File menu and Edit menu contain the standard menu items for

File and Edit.

menus, such as New, Open, Save, Save All, Cut, Copy, Paste, Undo,

and Redo

</pre>

<pre>

Ini adalah

preformatted text.

Menampilkan spasi

Dan line break apa adanya.

</pre>

<p>Tag PRE cocok digunakan untuk menampilkan kode bahasa pemrograman komputer :</p>

<pre>

for i = 1 to 10

print i

next i

</pre>

</body>

</html>

Gambar 3.2. Contoh pre

3.3 Quotation

Tag <blockquote> digunakan untuk membuat sebagian teks yang dikutip sebagai suatu blok sendiri. Kebanyakan browser umumnya menggunakan margin untuk kutipan teks tadi untuk memisahkan dari teks yang mengelilinginya.

Contoh – Listing 3.3 : quotation.html

<html>

<head>

<title>quotation</title>

</head>

<body>

tulisan ini BUKAN quotation

tulisan ini adalah quotation <br>

</blockquote>

</body>

</html>

Gambar 3.3. Contoh qoutation

3.4 Tag-tag Pemformatan

Tag Awal	Keterangan
<b>	Mendefinisikan teks yang ditebalkan
<big>	Mendefinisikan teks yang besar ukurannya
<em>	Mendefinisikan teks yang ditekankan
<i>	Mendefinisikan teks yang dimiringkan – italic
<small>	Mendefinisikan teks yang dikecilkan ukurannya
<strong>	Mendefinisikan teks yang ditebalkan
<sub>	Mendefinisikan teks yang dijaikan subscript
<sup>	Mendefinisikan teks yang superscript
<pre>	Mendefinisikan teks preformatted
<blockquote>	Mendefinisikan quotation yang panjang.

3.5 Toolbar Dreamweaver untuk pemformatan teks

Gambar 3.4. Toolbar format teks

Keterangan :

· B : Bold

· I : Italic

· S : Strong

· Em : Emphasize

· [“”] : Blockquote

· PRE : Pre

Bab 4

Membuat Link

Dokumen HTML mempunyai kemampuan untuk memberikan link dari satu teks dan / atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser web akan menyorot teks atau ganbar yang diidentifikasikan sebagai link dengan warna dan / atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link.

4.1 Tag Anchor

HTML menggunakan tag <a> yang disebut sebagai tag anchor untuk membuat suatu link kepada dokumen lain.

Contoh – Listing 4.1 :

<a href="http://www.eepis-its.edu">Link ke www.eepis-its.edu</a>

merupakan link ke alamat website www.eepis-its.edu

4.2. Link Relatif

Membuat link dari satu page ke page lainnya pada computer yang sama dapat dilakukan dengan menuliskan langsung nama filenya.

Contoh – Listing 4.2: linkrelatif.html

<html>

<head>

<title>Link Relatif</title>

</head>

<body>

<a href="biodata.html">Biodata</a></body>

</html>

Jika tulisan biodata.html kita pilih – klik, akan muncul dokumen biodata.html

4.3 Link Absolut

Membuat link ke page web lain yang berada pada web site lain di internet dilakukan dengan menuliskan nama URL dan nama filenya.

Contoh – Listing 4.3: linkabsolut.html

<html>

<head>

</head>

<body>

<a href="http://www.eepis-its.edu" >Link ke www.eepis-its.edu</a>

</body>

</html>

Jika teks “Link ke www.eepis-its.edu” dipilih, maka akan membuka website www.eepis-its.edu

4.4 Link ke bagian lain dalam dokumen yang sama

Link jenis ini dipakai jika dokumennya terlalu panjang, sehingga apabila ditampiklkan di browser akan mengharuskan kita melakukan scroll layer berulang-ulang. Untuk memudahkannya, maka dibuat link antar bagian di dalam dokumen HTML.

Contoh – Listing 4.4: linkbagian.html

<html>

<head>

<title>Link dalam satu dokumen</title>

</head>

<body>

<p>isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab </p>

<p>isi penjelasan bab 2, isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2, isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2</p>

<p>isi penjelasan bab 3, isi penjelasan bab 3, isi penjelasan bab 3, isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3.</p>

</body>

</html>

Keterangan :

<a name="isibab1">Bab1</a> :

Memberi nama bagian dalam dokumen HTML.

<a href="#isibab1">1. Bab 1</a> :

mendefinisikan link isibab1, jika teks “1. Bab 1” diklik, maka halaman web akan menampilkan bagian “isibab1”.

Gambar 4.1. Contoh hasil link

4.5 Membuat Link untuk window baru

Untuk membuat link supaya membuka window baru dapat ditambahkan atribut : target=”_blank”.

Contoh – Listing 4.5 : linknewwindow.html

<html>

<head>

<title>link new window</title>

</head>

<body>

membuka alamat website eepis dengan membuka window baru : <a href="http://www.eepis-its.edu" target="_blank">www.eepis-its.edu</a>

</body>

</html>

Gambar 4.2. Contoh hasil link dengan window baru

4.6 Mailto

Berikut ini adalah contoh link untuk menghubungkan ke sebuah alamat email.

Contoh – Listing 5.6 : mailto.html

<html>

<head>

<title>Mailto</title>

</head>

<body>

kirim email ke humas PENS : <a href="mailto:info@eepis-its.edu">info@eepis-its.edu </a>

</body>

</html>

Jika teks info@eepis-its.edu diklik maka akan muncul mail client yang sudah dipasang untuk mengirim email ke info@eepis-its.edu

4.7 Properties Dreamweaver untuk membuat link HTML

Gambar 4.3. Toolbar link pada Dreamweaver

Keterangan :
contoh : untuk membuat link ke website lain, pada field link diisikan http://www.eepis-its.edu

Gambar 4.4. Toolbar mailto

Keterangan :
Contoh : untuk membuat link ke email, pada field link diisikan mailto:info@eepis-its.edu

Bab 5

List Dan Pilihan

List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list).

Contoh: Kita mau mengelompokkan data-data berikut : Pisang, Jambu, Apel, Anggur dapat kita kelompokkan ke dalam kelompok: Buah-buahan.

5.1 Ordered List

Untuk membuat list terurut nomor (ordered list), kita gunakan tag pembuka <ol> dan penutup </ol>, sedangkan untuk mendata setiap itemnya menggunakan tag <li> sebagai pembuka dan </li> sebagai penutup.ol kependekan dari Ordered List, li kependekan dari List Item.

Contoh – Listing 5.1: orderedlist1.html

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<p>Daftar Hari : </p>

<ol>

<li>Senin</li>

<li>Selasa</li>

<li>Kamis</li>

<li>Sabtu</li>

<li>Minggu</li>

</ol>

<p>Daftar Kuliah : </p>

<ol>

<li>Web Design</li>

<li>Pemrograman web</li>

<li>Database </li>

</ol>

</body>

</html>

Nomor item ordered list secara default menggunakan angka 1,2,3,….dst.

Untuk keperluan tampilan tertentu kita dapat mengubah dengan mengubah atribut type pada tag <ol>.

Gambar 5.1. Contoh hasil list

Atribut type pada tag <ol> :

Type	Arti
I	Angka ditampilkan dengan angka romawi huruf besar
i	Angka ditampilkan dengan angka romawi huruf kecil
A	Angka ditampilkan dengan abjad huruf besar
a	Angka ditampilkan dengan abjad huruf kecil

Contoh - Listing 5.2 : orderedlist2.html

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<p>Daftar Hari : </p>

<li>Senin</li>

<li>Selasa</li>

<li>Kamis</li>

<li>Sabtu</li>

<li>Minggu</li>

</ol>

<p>Daftar Kuliah : </p>

<li>Web Design</li>

<li>Pemrograman web</li>

<li>Database </li>

</ol>

</body>

</html>

Gambar 5.2. Contoh hasil list

5.2 Unordered List

Untuk membuat list tidak terurut nomor (Unordered List), kita gunakan tag pembuka <ul> dan penutup </ul>, sedangkan untuk mendata setiap itemnya menggunakan tag <li> sebagai pembuka dan </li> sebagai penutup.ul kependekan dari Unordered List, li kependekan dari List Item

Contoh – Listing 5.3 : unorderedlist1.html

<html>

<head>

<title>Unordered List</title>

</head>

<body>

<p>Daftar Hari : </p>

<ul>

<li>Senin</li>

<li>Selasa</li>

<li>Kamis</li>

<li>Sabtu</li>

<li>Minggu</li>

</ul>

</body>

</html>

Gambar 5.3. Contoh hasil unordered list

Item unordered list secara default mengunakan noktah.Untuk keperluan tampilan tertentu kita dapat mengubah dengan mengubah atribut type pada tag <ul>.

Atribut type pada tag <ul> :

Type	Arti
Circle	Bullet Lingkaran
Disc	Bullet Titik
Square	Bullet Kotak

Contoh – Listing 5.4: unorderedlist2.html

<html>

<head>

<title>Unordered List</title>

</head>

<body>

<p>Daftar Hari : </p>

<li>Senin</li>

<li>Selasa</li>

<li>Kamis</li>

<li>Sabtu</li>

<li>Minggu</li>

</ul>

</body>

</html>

Keterangan : unordered list dengan type = circle.

Gambar 5.4. Contoh hasil pengaturan bullet

5.3 Nested List

List item dapat digunakan secara bersarang, maksudnya di dalam list ada list item lagi.

Contoh – Listing 5.5 : nestedlist.html

<html>

<head>

<title>Nested List</title>

</head>

<body>

<ol>

<li>Semangka</li>

<li>Jambu</li>

</ul>

<li>Bunga</li>

<li>Melati</li>

<li>Anggrek</li>

</ul>

<li>Kendaraan</li>

<li>Mobil</li>

<li>Sepeda Motor </li>

</ul>

</ol>

</body>

</html>

Gambar 5.5. Contoh hasil nested list

5.4 Definition List

Definition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag menentukan definition term serta <DD> tag menentukan definition itu sendiri

Contoh - Listing 5.6 : definitionlist.html

<html>

<head>

<title>Definition List</title>

</head>

<body>

<h3>Contoh Definition List</h3>

<dl>

<dt>Web Design</dt>

<dd>Belajar HTML - Macromedia Dreamweaver</dd>

<dt>Pemrograman Web</dt>

<dd>Belajar PHP MySQL</dd>

</dl>

</body>

</html>

Gambar 5.6. Contoh hasil definition list

5.5 Tag-tag List HTML

Tag Awal	Keterangan
<ol>	Mendefinisikan Ordered List
<ul	Mendefinisikan Unored List
<li>	Mendefinisikan List Item
<dl>	Mendefinisikan Definition List
<dt>	Mendefinisikan Definition Term
<dd>	Mendefinisikan Definition Description

5.6 Toolbar Dreamweaver untuk tag-tag list HTML

Gambar 5.6. Toolbar untuk tag list

Keterangan – tab Text

· ul : Unordered List

· ol : Ordered List

· li : List Item

· dl : Definition List

· dt : Definition Term

· dd : Definition Description

Bab 6

Manipulasi Gambar Pada Web

Gambar di dalam suatu web page merupakan daya penarik bagi pengunjung suatu web site. Umumnya web site dilengkapi dengan gambar-gambar untuk membuat orang tertarik untuk melihat dan membaca isi yang ada di suatu web site. etiap gambar akan butuh waktu tambahan untuk dodownload dan memperlambat awal penampilan suatu dokumen dalam browser. Karena perlu hati-hati untuk menyertakan gambar dalam dokumen web site.Untuk menyertakan sebuah image dalam dokumen web adalah : <img src=”nama_image”>.

Kita harus menambahkan 2 atribut tambahan untuk memberi tahu browser web ukuran image yang harus ditampilkan dalam browser. Atribut tersebut adalah height dan width.ukuran dalam pixel. Height untuk menyatakan tinggi gambar, width untuk mendefinisikan ukuran lebar.

6.1 Cara memasukkan gambar dari macromedia dreaweaver :

Untuk memasukkan gambar pada web yang akan dibuat menggunakan Dreamweaver dapat dilakukan dengan:

1. Buat halaman baru

2. Masukkan image : klik insert – image

3. Pilih image yang akan dimasukkan

Gambar 6.1. Cara memasukkan gambar

4. Untuk pengaturan properties

Gambar 6.2. Pengaturan property

Keterangan Atribut:
W              : lebar image
H               : tinggi image
Src             : sumber / letak image
Alt             : alternate – tulisan yang akan muncul jika kursor berada diatasnya
Class          : pilih Class jika menggunakan definisi CSS.
Map           : jika image digunakan sebagai link
V Space     : jarak image dari tulisan atasnya
H Space     : jarak image dari tulisan disampingnya.
Border       : tebal bingkai image
Align         : letak posisi image – Right | Left | Center

Contoh – Listing 6.1: image1.html

<html>

<head>

<title>Image HTML</title>

</head>

<body>

<p>Gambar Komputer dalam folder yang sama dengan letak file HTML-nya :</p>

<p>Gambar Komputer dari folder yang berbeda dengan letak file HTML-nya : </p>

<p>Gambar dari www.eepis-its.edu</p>

</body>

</html>

Gambar 6.3. Contoh gambar pada web

6.2 Alignment Image

Contoh berikut ini mengatur image dengan align.Atribut align diisi dengan : top, bottom. middle

Contoh – Listing 6.2 : imagealign.html

<html>

<head>

<title>image align</title></head>

<body>

<p>Sebuah gambar<img src="jpg/bunga1.jpg" width="103" height="77" align="top"> di tengah teks dengan atribut align = top <br>

<p>Sebuah gambar<img src="jpg/bunga1.jpg" width="103" height="77" align="middle"> di tengah teks dengan atribut align = top <br>

<p>Sebuah gambar<img src="jpg/bunga1.jpg" width="103" height="77" align="bottom"> di tengah teks dengan atribut align = top <br>

</p>

</body>

</html>

6.3. Floating Image

Berikut ini contoh membiarkan suatu image mengambang di kiri atau di kanan paragraf.

Contoh – Listing 6.3 : floatingimage.html

<html>

<head>

<title>Floating Image</title>

</head>

<body>

<p><img src="jpg/house1.jpg" width="114" height="62" hspace="10" vspace="5" align="left">Sebuah paragraf yang berisi image. atribut align image diisi dengan "left". Sebuah paragraf yang berisi image. atribut align image diisi dengan "left". Sebuah paragraf yang berisi image. atribut align image diisi dengan "left". Sebuah paragraf yang berisi image. atribut align image diisi dengan "left". </p>

<p><img src="jpg/house1.jpg" width="114" height="62" hspace="10" vspace="5" align="right">Sebuah paragraf yang berisi image. atribut align image diisi dengan "right". Sebuah paragraf yang berisi image. atribut align image diisi dengan "right".Sebuah paragraf yang berisi image. atribut align image diisi dengan "right". Sebuah paragraf yang berisi image. atribut align image diisi dengan "right". Sebuah paragraf yang berisi image. atribut align image diisi dengan "right".</p>

</body>

</html>

Gambar 6.4. Image floating

6.4 Image Adjustment

Contoh berikut ini adalah menampilkan image sesuai dengan ukuran yang berbeda-beda. Untuk mengubah ukuran image dengan mengubah nilai width dan height.

Contoh – Listing 7.4 : adjusmentimage.html

<html>

<head>

<title>Adjustment Image</title>

</head>

<body>

<p>Image dengan ukuran 71 x 53 </p>

<p>Image dengan ukuran 122 x 79 </p>

<p>Image dengan ukuran 163 x 93 </p>

</body>

</html>

Gambar 6.5. Contoh hasil image adjustment

6.5 Teks alternatif untuk image

Atribut alt pada tag <img> menyediakan tempat untuk menampilkan teks pengganti gambar. Keterangan alternatif akan muncul jika kita menaruh mouse pointer di atas gambar agak lama.

Contoh – Listing 6.5 : alternatifimage.html

<html>

<head>

<title>Alternatif Image</title>

</head>

<body>

<br>

Browser akan menampilkan tulisan <strong>klik to next</strong> jika mouse kita letakkan diatas gambar anak panah

</body>

</html>

6.6 Image sebagai link

Image dapat kita buat sebagai sebuah link. Sehingga kita dapat membuat menu-menu web site dengan sebuah image sebagai link ke halaman lain atau alamat web site lain.

Contoh – Listing 6.6 : imagelink.html

<html>

<head>

<title>image link</title>

</head>

<body>

</p>

<p>Membuat image menu dengan menambahkan tag <a href>. jika icon anak panah kita klik, maka akan muncul alamat website www.eepis-its.edu. </p>

</body>

</html>

6.7 Image Map

Sebuah image dapat dijadikan sebuah link dengan mendefinisikan daerah tertentu mengandung sebuah link ke halaman lain atau alamat internet lain. Definisi daerah di dalam image yang dijadikan link dinyatakan dalam bentuk objek :

· Titik

· Poligon

· Persegi panjang

· Lingkaran/elips

Metode imap map mengharuskan mendefinisikan daerah-daerah dalam suatu gambar yang mempunyai link atau yang akan diberi link. Daerah yang didefinisikan berupa bentuk daerah dan kordinat pembatasnya :

· POINT : daerah berupa satu titik, dengan kordinat x,y

· RECT : daerah berupa persegi panjang, dengan kordinat pojok kiri atas dan pojok kanan bawah.

· POLY : daerah berupa polygon, dengan kordinat x, y untuk setiap titik dari setiap garis.

· CIRCLE : daerah berupa lingkaran, dengan kordinat titip pusat lingkaran (x,y) dan jari-jari.

Contoh – Listing 6.7 : imagemap.html

<html>

<head>

<title>image map</title>

</head>

<body>

</map>

</div>

</body>

</html>

Keterangan : Mendefinisikan imap map persegi panjang dan lingkaran.

Gambar 6.7. Image Map

Jika daerah persegi panjang diklik, maka akan muncul halaman atap.htm, dan jika daerah lingkaran diklik maka akan muncul halaman dinding.htm

Source Code – Listing 6.8 : atap.htm

<html>

<head>

<title>atap rumah</title>

</head>

<body>

Anda menekan daerah atap rumah

</body>

</html>

Source Code - Listing 6.9 : dinding.htm

<html>

<head>

<title>Dinding Rumah</title>

</head>

<body>

anda menekan daerah dinding rumah

</body>

</html>

Bab 7

Membuat Tabel

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Tabel didefinisikan dengan tag <table>. Sebuah tabel dibagi menjadi beberapa baris (dengan tag <tr>), dan setiap baris dibagi menjadi beberapa kolom (dengan tag <td>). Td kependekan dari ”table data” yang berarti tempat menyimpan data (data cell). Sebuah cell data dapat berupa teks, image, list, paragraf, form, tabel,dll.

Tag –tag tabel HTML

Tag	Keterangan
<table>	Mendefinisikan tabel
<th>	Mendefinisikan header tabel
<tr>	Mendefinisikan baris tabel
<td>	Mendefinisikan cell tabel
<caption>	Mendefinisikan caption tabel
<colgroup>	Mendefinisikan group kolom tabel
<col>	Mendefinisikan atribut nilai jumlah kolom tabel
<thead>	Mendefinisikan head tabel
<tbody>	Mendefinisikan body tabel
<tfoot>	Mendefinisikan footer tabel

Contoh – Listing 7.1 : tabel1.html

<html>

<body>

Satu Kolom:</strong></p>

<tr>

</tr>

</table>

<h4>Satu baris dan lima kolom:</h4>

<tr>

</tr>

</table>

<h4>Dua baris dan lima kolom :</h4>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Gambar 7.1. Contoh pemakaian tabel

7.1 Cara membuat tabel dengan dreamweaver

· Buka halaman web baru

· Klik menu Insert –Tabel

Gambar 7.2. Pembuatan tabel pada Dreamweaver

· Masukkan atribut tabel

Keterangan :

1. rows : jumlah baris

2. column : jumlah kolom

3. table width : lebar tabel

4. border thickness : tebal border

5. cell padding : lebar cell padding

6. cell spacing : lebar cell spacing

7.2 Border, Align dan Background tabel

Tebal border tabel didefinisikan dengan tag border, letak posisi tabel didefinisikan dengan tag align, warna background tabel didefinisikan dengan tag bgcolor.

Contoh – Listing 72 : tabelborder.html

<html><title>Border Tabel</title>

<body>

<h4>border normal, letak di tengah:</h4>

<tr>

<td>Baris Pertama - Kolom Pertama </td>

<td>Baris Pertama - Kolom Kedua </td>

</tr>

<tr>

<td>Baris Kedua - Kolom Pertama </td>

<td>Baris Kedua - Kolom Kedua </td>

</tr>

</table>

<h4>border lebih tebal, letah di tengah, lebar tabel 90%:</h4>

<tr>

<td>Baris Pertama - Kolom Pertama </td>

<td>Baris Pertama - Kolom Kedua</td>

</tr>

<tr>

<td>Baris Kedua - Kolom Pertama</td>

<td>Baris Kedua - Kolom Kedua </td>

</tr>

</table>

<h4>border sangat tebal, letak di tengah, lebar tabel 90%, warna background = #FFDFAA: </h4>

<tr>

<td>Baris Pertama - Kolom Pertama </td>

<td>Baris Pertama - Kolom Kedua</td>

</tr>

<tr>

<td>Baris Kedua - Kolom Pertama</td>

<td>Baris Kedua - Kolom Kedua </td>

</tr>

</table>

</body>

</html>

Gambar 7.3. Pengaturan tabel

7.3 Tabel Tanpa Brder

Terkadang dalam pembuatn tabel tidak diharapkan adanya border (garis-garis). Berikut ini adalah contoh tabel tanpa border.

Contoh – Listing 7.3 : tabelnoborder.html

<html><title>Tabel tanpa border</title>

<body>

<h4>Tabel tanda border :</h4>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Gambar 7.4. Tabel tanpa border

7.4 Tabel Header

Berikut ini adalah contoh tabel header dengan tag <th>.

Contoh – Listing 7.4 : tabelheader.html

<html><title>Tabel Header</title>

<body>

<h4>Table header:</h4>

<tr>

<th>Jurusan</th>

<th>Institusi</th>

</tr>

<tr>

<td>Hasan Abdul Karim </td>

<td>Teknologi Informasi </td>

</tr>

</table>

<h4>Vertical header:</h4>

<tr>

<td>Hasan Abdul Karim </td>

</tr>

<tr>

<th>Jurusan</th>

<td>Teknologi Informasi </td>

</tr>

<tr>

<th>Institusi</th>

</tr>

</table>

</body>

</html>

Gambar 7.5. Tabel header

7.5 Empty Cell

Berikut ini adalah contoh empty cell tabel.

Contoh – Listing 7.5 : emptycell.html

<html><title>Empty Cell</title>

<body>

<tr>

<td>Tulisan Teks </td>

<td>Tulisan Teks</td>

</tr>

<tr>

<td>Tulisan Teks</td>

</tr>

<tr>

<td>Tulisan Teks</td>

</tr>

</table>

<p>Jika suatu tabel tidak ada data, maka akan dianggap tidak ada border seperti terlihat pada baris kedua - kolom pertama. Untuk mengatasinya bisa dengan trik memberikan spasi, yaitu dengan teks di kode "&nbsp;".

</p>

</body>

</html>

Gambar 7.6. Cell kosong

7.6 Colspan dan Rowspan

Berikut ini adalah contoh mendefinisikan cell tabel yang dilebarkan lebih dari satu baris atau satu kolom dengan atribut colspan dan rowspan.

Contoh – Listing 7.6 : colspan.html

<html><title>Colsapn dan Rowspan</title>

<body>

<h4>Colspan 3 kolom:</h4>

<tr>

<th colspan="3">Kuliah</th>

</tr>

<tr>

<td>Senin</td>

<td>Web Design</td>

<td>Aplikasi Web </td>

<td>Database </td>

</tr>

</table>

<h4>Rowspan 3 row:</h4>

<tr>

<td>Senin</td>

</tr>

<tr>

<th rowspan="3">Kuliah</th>

<td>Web Design</td>

</tr>

<tr>

<td>Aplikasi Web</td>

</tr>

<tr>

<td>Database</td>

</tr>

</table>

</body>

</html>

Gambar 7.6. Contoh colspan dan rowspan

7.7 Tag di dalam suatu tabel

Berikut ini adalah contoh menampilkan elemen di dalam elemen lain.

Contoh – Listing 7.7 : tagintabel.html

<html><title>Tag di dalam tabel</title>

<body>

<tr>

<td><p>Sebuah paragraf </p>

<p>Paragraf lain </p></td>

<td>Cell berisi tabel

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<td>Cell berisi list

<ul>

<li>Senin</li>

<li>Selasa</li>

<li>Kamis</li>

</ul>

</td>

</tr>

</table>

</body>

</html>

Gambar 7.7. Contoh tabel dalam tabel

7.8 Cellpadding

Cellpadding digunakan untuk memberikan jarak antara teks dengan tepi border tabel. Cellpadding menggunakan atribut cellpadding

Contoh – Listing 7.8 : cellpadding.html

<html><title>cellpadding</title>

<body>

<h4>Tanpa cellpadding:</h4>

<tr>

</tr>

<tr>

</tr>

</table>

<h4>Dengan cellpadding:</h4>

<table border="1"

cellpadding="10">

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Gambar 7.8. Contoh cellpadding

7.9 Cellspacing

Cellspacing digunakan untuk memberikan jarak antara border dalam tabel dengan border luar tabel. Cellspacing menggunakan atribut cellspacing.

Contoh – Listing 7.9 : cellspacing.html

<html><title>cellspacing</title>

<body>

<h4>Tanpa cellspacing:</h4>

<tr>

</tr>

<tr>

</tr>

</table>

<h4>Dengan cellspacing:</h4>

<table border="1"

cellspacing="10">

<tr>

</tr>

<tr>

</tr>

</table>

</body></html>

Gambar 7.9. Cellspacing

7.10 Background Pada Tabel

Background pada tabel dapat didefinisikan dengan menggunakan warna atau dengan image. Berikut ini adalah contoh background tabel dengan warna dan image. Untuk memberikan background warna menggunakan atribut ‘bgcolor’. Untuk memberikan background image menggunakan atribut background.

Contoh – Listing 7.10 : backgroundtabel.html

<html><title>Background Tabel</title>

<body>

<h4>Dengan background warna:</h4>

<table border="1"

bgcolor="green">

<tr>

</tr>

<tr>

</tr>

</table>

<h4>Dengan background image:</h4>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Gambar 7.10. Background pada tabel

7.11 Background Cell

Background Cell digunakan untuk memberikan background pada cell tertentu tabel sehingga dimungkinkan banyak warna pada sutau tabel.

Contoh – Listing 7.11 : cellbackground.html

<html><title>cell background</title>

<body>

<h4>Cell background:</h4>

<tr>

</tr>

<tr>

<td

background="jpg/bgdesert.jpg">

GHI</td>

</tr>

</table>

</body>

</html>

Gambar 7.11. Background Cell

7.12 Mengatur posisi teks dalam tabel

Berikut ini adalah contoh mengatur posisi teks dalam tabel dengan atribut align, sehingga diperoleh layout yang lebih baik.

Contoh – Listing 7.12 : aligntabel.html

<html><title>Align Tabel</title>

<body>

<p>Mengatur posisi teks dalam tabel </p>

<tr>

<th align="right">Kuliah-1</th>

<th align="right">Kuliah-2</th>

</tr>

<tr>

<td align="left">Senin</td>

<td align="right">Web Design </td>

<td align="right">Aplikasi Web </td>

</tr>

<tr>

<td align="left">Selasa</td>

<td align="right">Database</td>

<td align="right">Matematika</td>

</tr>

<tr>

<td align="right">Bahasa Enggris </td>

</tr>

</table>

</body>

</html>

Gambar 7.12. Pengaturan teks pada tabel

Bab 8

Membuat Frame

Frame HTML dapat digunakan untuk menampilkan beberapa web page yang ditampilkan dalam satu window browser. Model ini sering dipakai untuk memperjelas penyajian informasi dengan menu-menu yang ada selalu ditampilkan.

Kekurangan penggunaan frame :

Developer web harus menjaga dokumen HTML lebih banyak
Sulit untuk mencetak (print) semua halaman web.

Tag Frameset :

· Tag <frameset> mendefinisikan bagaimana membagi window ke dalam fram-frame.

· Setiap frameset mendefinisikan sebuah set baris (row) atau kolom (colom)

· Setiap nilai rows/column menunjukkan jumlah tampilan area setiap row/colomn.

Tag Frame

Tag <frame> tag mendefinisikan nama dokumen HTML yang dimasukkan dalam frame.

Sebagai contoh dibawah ini adalah frameset dengan dua kolom. Kolom pertama dengan lebar 25% dari browser window. Kolom kedua dengan lebar 75% dari browser window. Dokumen HTML ”frame1.html” diletakkan pada kolom pertama dan dokumen HTML ”frame2.html” diletakkan di kolom kedua.

Tag – tag Frame

Tag	Keterangan
<frameset>	Mendefinisikan kumpulan frame
<frame>	Mendefinisikan bagian dari windows (sebuah frame)
<noframes>	Mendefinisikan bagian noframe untuk browser yang tidak dapat menangani frame
<iframe>	Mendefinisikan suatu frame inline

8.1 Cara membuat frame HTML dengan dreamweaver :

Buka halaman web baru
Klik Insert – HTML – Frame
Pilih model frame,contoh : top nested left
Sehingga akan muncul design frame sebagai berikut :

Gambar 8.1. Design frame

Tampilan di atas terdiri dari tiga frame, yaitu frame top, frame left dan frame main. Sehinnga untuk menyimpannya perlu disimpan dengan empat nama file. Yaitu file untuk frame top (frametop.html), frame left (frameleft.html), frame main (framemain.html) dan frame gabungannya, misalkan disebut frame utama (frameutama.html).
Source Code – Listing 8.1: frameutama.html

<html>

<head>

<title>Frame Utama</title>

</head>

</frameset>

</body></noframes>

</html>

Source Code – Listing 8.2 : frametop.html

<html>

<head>

<title>Frame Top</title>

</head>

<body>

Frame Top

</body>

</html>

Source Code - Listing 8.3 : frameleft.html

<html>

<head>

<title>Frame Left</title>

</head>

<body>

Frame Left

</body>

</html>

Source Code - Listing 8.4 : framemain.html

<html>

<head>

<title>Frame Main</title>

</head>

<body>

Frame Main

</body>

</html>

Hasil di Browser :

Gambar 8.2. Contoh hasil frame

8.2 Frame Kolom

Berikut ini adalah contoh frameset vertikal untuk tiga dokumen yang berbeda.

Contoh :

Source Code - Listing 8.5 : frameabc.html

<html><title>Frame tiga kolom</title>

</frameset>

</html>

Source Code - Listing 8.6 : framea.html

<html>

<head>

<title>Frame A</title>

</head>

<strong>Frame A

</strong>

</body>

</html>

Source Code - Listing 8.7 : frameb.html

<html>

<head>

<title>Frame B</title>

</head>

<strong>Frame B </strong>

</body>

</html>

Source Code - Listing 8.8: framec.html

<html>

<head>

<title>Frame C</title>

</head>

<strong>Frame C </strong>

</body>

</html>

Gambar 8.3. Frame kolom

8.3 Frame Baris

Berikut ini adalah contoh frameset horizontal untuk tiga dokumen yang berbeda.

Contoh - Listing 8.9 : frame3baris.html

<html><title>Frame tiga baris</title>

</frameset><noframes></noframes>

</html>

Gambar 8.4. Frame baris

8.4 Frame Navigasi

Berikut ini adalah contoh membuat frame navigasi. Navigasi berisi sebuah dartar link dengan frame kedua sebagai target. Frame kedua menampilkan dokumen yang di-link.frame target disebelah kanan dinamakan ”showframe”

Contoh : Source Code - Listing 8.10: framenavigasi.html

<html><title>frame navigasi</title>

<frame src="framenavisi.html"

name="showframe">

</frameset>

</html>

Source Code - Listing 8.11: framenavmenu.html

<html>

<head>

</head>

<body>

<p><a href="framea.html" target="showframe">frame A</a></p>

<p><a href="frameb.html" target="showframe">frame B</a></p>

<p><a href="framec.html" target="showframe">frame C</a></p>

</body>

</html>

Source Code - Listing 8.12: framenavisi.html

<html>

<head>

</head>

<body>

<p>Selamat Datang</p>

<p>Percobaan Frame Navigasi </p>

</body>

</html>

Gambar 8.5. Contoh navigasi

Jika di-klik menu frame A, maka akan muncul :

Gambar 8.6. Contoh navigasi

8.5 Frame Inline

Berikut ini adalah contoh membuat frame inline (frame di dalam sebuah dokumen HTML).

Contoh : Source Code - Listing 8.13 : frameinline.html

<html>

<body>

<p>Some older browsers don't support iframes.</p>

<p>If they don't, the iframe will not be visible.</p>

</body></html>

Source Code - Listing 8.14: home.html

<html>

<head>

</head>

<body>

<h1>Belajar Web Design </h1>

<h2>Belajar Web Design </h2>

<h3>Belajar Web Design </h3>

<h4>Belajar Web Design </h4>

<h5>Belajar Web Design </h5>

<h6>Belajar Web Design </h6>

</body>

</html>

Gambar 8.7. Frame inline

Bab 9

Membuat Form Isian

Form HTML adalah sebuah area yang mengandung elemen – elemen form. Elemen form adalah sebuah elemen yang memungkinkan user untuk memasukkan informasi seperti text, teksarea, menu drop-down, radio button, checkbox,dll.

Sebuah form didefinisikan dengan tag <form>.

<form>

…

</form>

Tag – tag Form

Tag	Keterangan
<form>	Mendefinisikan form untuk masukan user
<input>	Mendefinisikan masukan field
<textarea>	Mendefinisikan textarea
<label>	Mendefinisikan label control
<fieldset>	Mendefinisikan sebuah fieldset
<legend>	Mendefinisikan caption sebuah fieldset
<select>	Mendefinisikan list (drop-down box)
<optgroup>	Mendefinisikan option group
<option>	Mendefinisikan option pada drop-down box
<button>	Mendefinisikan button

9.1 Jenis masukan dalam form

Jenis masukan merupakan suatu obyek/komponen yang digunakan untuk memasukkan suatu nilai/data/informasi ke dalam web. Jenis masukan dalam form dibedakan menjadi :

· Text : digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada server. Nilai yang dimasukkan dapat berupa angka ataupun teks.

· Radio : menyediakan beberapa pilihan, hanya satu pilihan yang dapat dipilih.

· Check box : menyediakan beberapa pilihan, pilihan bisa lebih dari satu yang dipilih.

· Button : digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form.

1. SUBMIT : button yang digunakan untuk mengirim data.

2. RESET : button yang digunakan untuk menginisialisasi (mengosongkan) form.

· List : menyediakan pilihan dalam bentuk list pilihan, pilihan yang dipilih dapat lebih dari satu.

· Text Area : digunakan untuk memasukkan data dalam bentuk teks berupa memo.

9.2 Tag – tag dan atribut elemen form

· Form

Keterangan :

Form : tag yang menandakan sebuah elemen form

Name : nama form

Methode : metode pengiriman data. Bisa berupa “post” atau “get”

Action : nama file dokumen yang memproses pengiriman data. Lebih lanjut akan dibahas di aplikasi web php mysql.

· Text Field

Keterangan :

Input : tag yang menandakan sebuah masukan

Type : type sebuah masukan, yaitu ”text”

Name : nama text field

· Text Area

Keterangan :

Textarea : tag yang menandakan sebuah masukan textarea

Name : nama textarea

Cols : jumlah kolom textarea

Rows : jumlah baris textarea

· Check box

Keterangan :

Name : nama checkbox

Type : type masukan

Valuae : nilai yang dikirimkan ke server

Checked : menunjukkan bahwa otomatis pilihan tersebut dipilih. Secara default atribut tersebut unchecked (tidak dipilih).

· Radio Button

Keterangan :

Name : nama radiobutton

Type : type masukan

Value : nilai yang akan dikirim ke server

· List Box

<option value="TI">Teknologi Informasi</option>

</select>

Keterangan :

Select : tag yang menandakan sebuah list/menu

Name : nama list/menu

Option : tag yang menandakan sebuah pilihan list

Value : nilai pilihan yang akan dikirim ke server

· Button – Submit

· Button – Reset

9.3 Cara pembuatan form dengan dreamweaver

· Buka halaman web baru

· Klik menu Insert – Form

· Pilih model form

· Contoh memilih textarea, sehinnga muncul design view sebagai berikut :

Gambar 9.1. Memilih textarea

· Atur propertiesnya, bisa melalui code design atau design propertiesnya :

Gambar 9.2. Pengaturan property

Keterangan :

TextField : nama textarea

Char width : lebar kolom

Num Lines : jumlah baris

Wrap : model pengaturan teks dalam textarea

Type : pilih singgle line, multiline atau password

Init val : nilai default

Class : nama class jika menggunakan file CSS

9.4 Field Text

Berikut ini adalah contoh penggunakan field text dalam dokumen HTML.

Contoh – Listing 9.1 : textfield.html

<html><title>text field</title>

<body>

<form>

Nama Depan :

<br>

Nama Belakang :

</form>

</body>

</html>

Gambar 9.3. Contoh field text

9.5 Field Text – Password

Berikut ini adalah contoh Field Text dengan masukan berupa password.

Contoh - Listing 9.2: password.html

<html><title>Password</title>

<body>

<form>

Username:

Password:

</form>

<p>Keterangan : ketika memasukan data di field password, browser akan menampilkan tanda bintang sebagai pengganti karakter. </p>

</body>

</html>

Gambar 9.4. Contoh password

9.6 Checkbox

Berikut ini adalah contoh penggunaan checkbox dalam dokumen HTML.

Contoh - Listing 9.3 : checkbox.html

<html><title>Check Box</title>

<body>

<form>

<p>Baca Majalah :

<br>

Olah Raga :

<br>

Memancing :

</p>

</form></body>

</html>

Gambar 9.5. Contoh checkbox

9.7 Radio Button

Berikut ini adalah contoh penggunaan radion button dalam dokumen HTML.

Contoh - Listing 9.4 : radiobutton.html

<html><title>Radio Button</title>

<body>

<p>Agama : </p>

<form>

<p>Islam :

<input type="radio" checked="checked"

name="agama" value="islam"> <br>

Kristen :

<input type="radio"

name="agama" value="kristen"><br>

Protestan :

Hindu :

Budha :

</form></p>

</body>

</html>

Gambar 9.6. Contoh radiobutton

9.8 List Box – Drop Down Menu

Berikut ini adalah contoh penggunaan list box – drop down menu.

Contoh - Listing 9.5 : listbox.html

<html>

<head>

</head>

<body>

<p>Tahun Kelahiran</p>

</select>

</form>

</body>

</html>

Gambar 9.7. COntoh listbox dropdown

9.9 Textarea

Berikut ini adalah contoh penggunaan textarea dalam dokumen HTML.

Contoh - Listing 9.6 : textarea.html

<html>

<head><title>textarea</title></head>

<body>

<p>Komentar :</p>

<textarea name="textarea" cols="50" rows="5">isikan komentar anda disini</textarea>

</form>

</body></html>

Gambar 9.8. Contoh textarea

9.10 Button – Submit dan Reset

Berikut ini adalah contoh penggunaan Submit Button dan Reset Button.

Contoh - Listing 9.7 : button.html

<html>

<head>

<title>Button</title>

</head>

<body>

</form>

</body>

</html>

Gambar 9.9. Contoh button

9.11 Contoh form biodata

Source Code - Listing 9.8 : biodata.html

<html>

<head>

<title>Biodata</title>

</head>

<body>

<p align="center">Formulir Biodata </p>

<tr>

</tr>

<tr>

<td>Tempat Tanggal Lahir </td>

<option value="januari" selected>Januari</option>

<option value="pebruari">Pebruari</option>

<option value="maret">Maret</option>

<option value="april">April</option>

<option value="agustus">Agustus</option>

<option value="september">September</option>

<option value="oktober">Oktober</option>

<option value="nopember">Nopember</option>

<option value="desember">Desember</option>

</select>

</select></td>

</tr>

<tr>

<td valign="top">Agama</td>

Islam<br>

Kristen <br>

Protestan<br>

Hindu <br>

Budha <br> </td>

</tr>

Olah Raga <br>

Baca Majalah<br>

Memancing<br></td>

</tr>

<tr>

<td>Komentar</td>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

Gambar 9.10. Contoh pengisian biodata

Bab 10

Studi Kasus

Pada proyek akhir ini, kita membuat Contoh sebuah web site UMPN dengan design layout web menggunakan macromedia dreamweaver.

10.1 Manage Site

Manage site digunakan untuk menentukan server tempat menyimpan file – file dokumen HTML.

Langkah – Langkah menentukan manage site :

Buka aplikasi dreamweaver
klik menu Site – Manage Sites

Gambar 10.1. Manage site

klik New – Site, seperti pada gambar 10.2.
Masukkan nama site dan klik Next
Menentukan teknologi server, apakah menggunakan teknologi server atau tidak seperti terlihat pada gambar 10.3. Sebagai contoh kita tidak menggunakan teknologi server. Klik Next

Gambar 10.2. Site Definition

Gambar 10.3. Pemilihan teknologi server

Menentukan letak direktori penyimpanan dokumen HTML. Klik Next

Gambar 10.4. Letak direktori

Menentukan metode menghubungkan ke server. Pilih None jika server kita menggunakan komputer lokal. Pilih FTP jika server menggunakan komputer server lain.

Gambar 10.5. Metode hubungan dengan server

Hasil definisi manage site. Klik Done

Gambar 10.6 Hasil dari manage site

10.2. Membuat Template Web

Buat halaman web baru. Dan simpan dengan nama TemplateWeb.html
Buat sebuah tabel dengan atribut sebagai berikut :

Rows : 3

Column : 1

Table width : 90%

Border : 1

Align : center

Sehingga menghasilkan design sebagai berikut :

Keterangan :

Baris pertama dari tabel akan digunakan sebagai tempat header image. Baris kedua akan digunakan sebagai tempat menu dan isi berita, sehingga harus dibagi menjadi 2 kolom lagi. Dan baris ketiga digunakan sebagai tempat footer.

Gambar 10.7. Pengaturan tabel

Membagi baris kedua menjadi dua kolom.

· Letakkan cursor di baris kedua

· Klik menu Modify – Table – Split Cell.
Split cell into : colomn
Number of column : 2

Gambar 10.8. Pembagian kolom

· Atur ukuran kolom : kolom pertama dengan width = 25%, kolom kedua dengan width = 75%.
Sehingga muncul hasil sebagai berikut :

Keterangan : Baris kedua – kolom pertama akan digunakan sebagai menu – manu navigasi. Baris kedua – kolom kedua akan digunakan sebagai tempat informasi.

Memasukkan image header.

Letakkan cursor di tabel baris pertama.
Klik Insert – Image (masukkan image header yang sudah disiapkan yang digunakan sebagai header)

Gambar 10.9. Penambahan gambar

Sehingga muncul hasil sebagai berikut :

Gambar 10.10. Contoh hasil 1

Membuat menu navigasi

· Tambahkan tabel di baris kedua – kolom pertama dengan atribut sebagai berikut :

1. Rows : 5

2. Column : 1

3. Width : 100 %

4. Border : 0

Gambar 10.11. pembuatan tabel navigasi

Sehingga muncul hasil sebagai berikut :

Gambar 10.12. Contoh hasil 2

· Menambahkan teks menu dengan posisi teks di tengah tabel (align = ”center”) dan link ke halaman target.

Nama Menu	Target Link
Home	Ke halaman index.html
Mekanisme UMPN	Ke halaman mekanisme.html
Jadwal Ujian	Ke halaman jadwal.html
Materi Ujian	Ke halaman materi.html
PENS	Ke halaman informasi pens.html

Memberikan keterangan footer dan warna background footer

· Letakkan cursor di baris ketika

· Tambahkan teks “UMPN - 2006” , dengan atribut align = “center” dan pemformatan teks tag <strong> untuk menebalkan tulisan.

· Tambahkan warna background

Sehingga muncul sebagai berikut :

Gambar 10.13. Contoh hasil 3

Memasukkan “Editable Region” di baris kedua – kolom kedua. Yaitu area yang dapat ditambahkan teks informasi pada saat posisinya sebagai template.

Langkah – langkah :

· Klik Insert – Template Objects – Editable Region.

· Masukkan nama edit regionnya

· Sehingga muncul sebagai berikut :

Gambar 10.4. Contoh hasil template

Keterangan :

Daerah edit region adalah daerah yang akan kita isi dengan informasi sesuai dengan dokumen web.

Simpan sebagai template

· Klik File – Save as Template. Simpan dengan nama TemplateWebpada Site webdesign yang sudah kita tentukan.

Gambar 10.14. Penyimpanan template

· Sehingga di panel direktori file muncul direktori ‘Template’ dan didalamnya ada file ‘TemplateWeb.dwt’ sebagai file template. File template hanya bisa kita rubah dengan membuka file template tersebut.
+

Gambar 10.15. Hasil penyimpanan

Membuat File index.html dari file TemplateWeb.dwt

· Klik menu File – New. Pilih tab Templates, pilih template yang sudah dibuat. Pastikan checkbox “Update page when template changes” terpilih. Klik Create

Gambar 10.16. Membuat file index.html

· Simpan dengan nama index.html

Menambahkan informasi pada daerah EditRegion1 file index.html. Hanya daerah EditRegion1 yang bisa kita rubah, untuk merubah daerah lain, kita harus merubah melalui file “TemplateWeb.dwt” dan file file dokumen web yang dibuat melalui file template akan ikut berubah. Sehingga jika ada perubahan menu, kita hanya mengubah file templatenya, tidak perlu merubah sebuah file. Hal ini akan memudahkan kita mengelola dokumen file yang jumlahnya sangat banyak.

Tambahkan informasi index.html pada code daerah EditRegion1 sebagai berikut
Source Code :

<h1><strong>Selamat Datang di website UMPN</strong></h1>

<p align="left">Persyaratan Peserta :</p>

<ol>

<li d="">Tamatan SMTA (SMA, MA, SMK) tahun lulus 2006 atau sebelumnya.</li>

<li>Umur Maksimal 24 tahun terhitung bulan agustus 2006</li>

<li>Mempunyai kesehatan fisik yang tidak mengganggu kelancaran belajar di program studi pilihannya (sebagai contoh untuk program studi yang dalam belajarnya diperlukan kemampuan membedakan warna, tidak boleh butawarna) </li>

<li> Persyaratan lainnya diatur oleh Politeknik masing-masing</li>

</ol>

</div>

</div>

Hasil di Browser : index.html

Gambar 10.17. Contoh hasil web site index.html

Membuat file mekanisme.html seperti langkah sebelumnya. Dan tambahkan informasi pada code daerah EditRegion1 sebagai berikut :

Source Code :

Peserta dapat memilih program studi di Politeknik tempat mendaftar dan program studi pada Politeknik peserta UMPN lainnya, dengan ketentuan sebagai berikut :

<ol>

<li>Peserta diwajibkan memilih Program studi pada Politeknik tempat mendaftar, dengan jumlah pilihan sesuai dengan ketentuan yang berlaku di Politeknik setempat. </li>

<li>Pilihan pada Politeknik lainnya maksimal 2 (dua) program studi dari Politeknik yang berbeda, boleh dengan program studi yang sama atau berbeda, dengan prioritas sesuai dengan nomor urut pilihan. </li>

</ol>

Gambar 10.18. Hasil dari mekanisme.html

Membuat file jadwal.html seperti langkah sebelumnya. Dan tambahkan informasi pada code daerah EditRegion1 sebagai berikut :

Source Code :

Ujian diselenggarakan serentak pada :<br>

Hari / Tanggal : Sabtu 12 Agustus 2006

<li> Pukul 08.00 - 10.30 WIB (Bidang Rekayasa dan Pertanian)</li>

<li>Pukul 12.00 - 14.30 WIB (Bidang Tata Niaga) </li>

</ol>

Gambar 10.19. Hasil dari ujian.html

Membuat file materi.html seperti langkah sebelumnya. Dan tambahkan informasi pada code daerah EditRegion1 sebagai berikut :

Source Code :

<strong>Bidang Rekayasa dan Pertanian : </strong>

<ol>

<li>Matematika</li>

<li>Fisika</li>

<li>Bahasa Indonesia</li>

<li>Bahasa Inggris</li>

<li>Kimia dan Biologi (pada Politeknik Tertentu)</li>

</ol>

<strong>Bidang Tataniaga :</strong>

<ol>

<li>Matematika</li>

<li>akuntansi</li>

<li>Ekonomi</li>

<li>Bahasa Indonesia</li>

<li>Bahasa Inggris </li>

</ol>

Gambar 10.19. Hasil dari.materi.html

Membuat file pens.html seperti langkah sebelumnya. Dan tambahkan informasi pada code daerah EditRegion1 sebagai berikut :

Source Code :

<p align="center"><strong> POLITEKNIK ELEKTRONIKA NEGERI SURABAYA - ITS <br>

</strong>JL. RAYA ITS, KEPUTIH SUKOLILO SURABAYA -60111<br>

Telepon 031-5947280, Fax 031-5946114<br>

Homepage : <strong><a href="http://www.eepis-its.edu" target="_blank">www.eepis-its.edu</a></strong> , Email :<strong><a href="mailto:humas@eepis-its.edu"> humas@eepis-its.edu</a></strong> </p>

<br>

<strong> Jurusan / Program Studi :</strong>

<ol>

<li> Teknik Elektronika (D3/ D4) <br>

Membekali mahasiswa dengan teknologi otomasi dan robotika dalam aplikasi di industri</li>

<li>Teknik Telekomunikasi (D3/ D4) <br>

Membekali mahasiswa dengan pengetahuan telekomunikasi sehingga mampu selalu beradaptasi dengan kemajuan teknologi telekomunikasi dan informasi </li>

<li> Teknik Elektro Industri (D3/ D4) <br>

Membekali mahasiswa dengan teknologi kontrol daya di sektor manufaktur dan industri</li>

<li>Teknologi Informasi (D3/ D4) <br>

Membekali mahasiswa dengan kemampuan mengembangkan dan memelihara sistem informasi berbasis komputer pada lingkungan bisnis dan manufaktur </li>

</ol>

<p><strong>Persyaratan</strong> </p>

<ol>

<li> Warga Negara Indonesia</li>

<li>Tamatan SMTA (SMA, MA, SMK) tahun lulus 2006 atau sebelumnya </li>

<li> Umur maksimal 24 tahun terhitung bulan Agustus 2006</li>

<li>Lulus Ujian Seleksi, meliputi: Ujian Masuk & Tes Kesehatan </li>

</ol>

Gambar 10.20. Hasil dari pens.html

Bab 11

Pemrograman PHP

11.1 Mengenal PHP

Pertama kali PHP dibuat dan diperkenalkan oleh Rasmus Lerdorf pada tahun 1995 menggunakan nama PHP/FI yang merupakan singkatan dari Personal HomePage/Form Interpreter. Berkembangnya kebutuhan akan PHP sebagai peromgraman web akhirnya diluncurkan PHP 3.0 oleh Andi Gutmans dan Zeev Suraski pada tahun 1997. Saat ini PHP sudah sampai versi 5.0.

PHP adalah suatu bahasa pemrograman web yang digunakan untuk keperluan CGI (Common Gateway Interface), artinya mempunyai kemampuan untuk membaca variabel dari client dan mengirimkan ke server untuk kemudian di server diolah dan hasilnya dikembalikan ke client.

PHP adalah pemrograman yang bersifat Server Side, artinya bahwa program hanya bisa diakses melalui server, sedangkan client tidak bisa mengakses program PHP. Sebagai contoh buatlah program dalam HTML dan PHP yang disimpan dalan contoh20a.html dan contoh20b.php sebagai berikut:

Perhatikan hasilnya akan sama yaitu teks “Hello World”, sekarang buka source melalui menu [View] >> {Source], hasilnya adalah:

<html>

<body>

Hello world

</body>

</html>

Hello world

Program HTML akan terlihat utuh di komputer client, sedangkan program PHP tidak akan kelihatan utuh hanya tampilan akhir saja yang bisa ditampilkan di komputer client. Hal ini terjadi karena PHP prosesnya dilakukan di server dan hasilnya diberkan pada client berupa informasi akhir tanpa program.

Untuk mengetahui lebih lanjut tentang perbedaan proses HTML dan PHP dapat dijelaskan dengan blok diagram proses HTML dan PHP pada gambar 2.1 dan 2.2 berikut, Firman[3].

Gambar 11.1. Skema dari HTML

Gambar 11.2. Skema dari PHP

Pemrograman PHP mempunyai struktur dasar seperti HTML, hanya saja perintah-perintah PHP selalu dimulai dan diakhiri oleh tag:

<? ........ perintah PHP ........... ?>

Contoh 1:

Menggabungkan antara PHP dan HTML:

<html>

<head>

<title>Menggabungkan PHP dan HTML</title>

</head>

<body>

Ini adalah perintah HTML<br>

echo "Ini adalah perintah PHP<br>";

</body>

</html>

Perintah echo adalah perintah untuk menampilkan teks. Hasilnya adalah sebagai berikut:

Gambar 11.3. Tampilan contoh 1

11.2 Variabel

Di dalam pemrograman PHP salah satu yang penting adalah pemakaian variabel yang dapat melakukan manipulasi data. Variabel di dalam PHP dapat dinyatakan dengan menambahkan tanda $ di awal nama variabel seperti variabel nama dituliskan dengan $nama, variabel nilai dituliskan dengan $nilai dan seterusnya. Tipe data dari suatu variabel pada pemrograman PHP sangat tergantung pada definisi awal.

Contoh 2:Program dengan variable string dan tanggal

<html>

<head>

<title>Variabel Dalam PHP</title>

</head>

<body>

$nama="Basuki";

$tanggal=date("d F y");

echo "$nama, selamat datang tanggal $tanggal<br>";

</body>

</html>

Perintah date(”d F y”) menghasilkan tanggal sesuai dengan tanggal pada sistem komputer dan formnya adalah dd-MM-yyyy. Hasilnya adalah sebagai berikut:

Gambar 11.4. Tampilan contoh 2

Contoh 3:

Program dengan variabel numerik untuk penjumlahan dan pengurangan:

<html>

<head>

<title>Variabel Dalam PHP</title>

</head>

<body>

$a=15;

$b=10;

$c=$a+$b;

$d=$a-$b;

echo "$a + $b = $c<br>";

echo "$a - $b = $d<br>";

</body>

</html>

Hasilnya adalah sebagai berikut:

Gambar 11.4. Tampilan contoh 3.

11.3 Kondisi

Kondisi ini diberikan bila ada pilihan ya atau tidak. Sebagai contoh apakah password yang diberikan sudah benar, atau apakah bilangan adalah bilangan genap, atau apakah masukan yang diberikan sudah lengkap, dan lain-lain. Untuk menyatakan kondisi dan memberikan aksi dapat dilakukan dengan perintah:

if(kondisi)

{ ...... aksi untuk kondisi benar ...... }

Else

{ ...... aksi untuk kondisi salah ...... }

Contoh 4:

Program untuk menentukan bilangan ganjil atau genap

<html>

<head>

<title>Variabel Dalam PHP</title>

</head>

<body>

$bilangan=23;

$hasilbagi=(int)($bilangan/2);

$sisa=$bilangan-2*$hasilbagi;

if($sisa==0)

echo "$bilangan adalah bilangan genap<br>";

else

echo "$bilangan adalah bilangan ganjil<br>";

</body>

</html>

Coba bilangan diganti-ganti dan perhatikan hasilnya. Bilangan dikatakan genap bila sisa baginya dengan 2 sama dengan nol, bila tidak maka bilangan itu dikatakan ganjil.

Contoh 5:Program untuk menentukan lebih besar,sama atau lebih kecil dari 10

<html>

<head>

<title>Variabel Dalam PHP</title>

</head>

<body>

$bilangan=23;

if($bilangan<10)

echo "$bilangan lebih kecil dari 10<br>";

else

if($bilangan>10)

echo "$bilangan lebih besar dari 10<br>";

else

echo "$bilangan sama dengan 10<br>";

</body>

</html>

Hasilnya adalah sebagai berikut:

Gambar 11.5. Tampilan contoh 5

11.4 Pengulangan

Pengulangan adalah suatu bentuk untuk melakukan proses yang sama berkali-kali hingga mencapai suatu kondisi akhir pengulangan yang ditentukan. Ada dua jenis pengulangan yang dapat digunakan di dalam pemrograman PHP yaitu:

(1) Pengulangan dengan FOR, dimana pengulangan ini menggunakan variabel indeks untuk melakukan pengulangan dengan nilai awal, nilai akhir dan penambahan (step) yang ditentukan. Perintah untuk melakukan pengulangan ini adalah:

For(variable=nilai_awal;variabel=nilai_akhir;variabel+=step){

…… proses pengulangan ……

}

(2) Pengulangan dengan WHILE, dimana pengulangan ini dilakukan selama kondisi yang diberikan masih bernilai TRUE. Perintah untuk melakukan pengulangan ini adalah:

while(kondisi) {

...... proses pengulangan ......

}

Contoh 6:

Contoh pengulangan dengan FOR, dengan mengulang sebanyak 10 kali, yang artinya nilai variabel a akan bertambah terus dari 1 sampai dengan 10.

<html>

<head>

<title>Variabel Dalam PHP</title>

</head>

<body>

for($a=1;$a<=10;$a++){

echo "Ini pengulangan ke $a<br>";

}

</body>

</html>

Hasilnya adalah sebagai berikut:

Gambar 11.6. Tampilan contoh 6

Contoh 7:

Contoh pengulangan dengan WHILE, untuk mengulangan penjumlahan sampai nilainya lebih dari 56

<html>

<head>

<title>Variabel Dalam PHP</title>

</head>

<body>

$a=1;

$jumlah=0;

while($jumlah<56){

$jumlah=$jumlah+$a;

echo "Ini pengulangan ke $a ";

echo "hasil jumlahnya adalah $jumlah<br>";

$a=$a+1;

}

</body>

</html>

Hasilnya adalah:

Gambar 2.7. Tampilan contoh 2.7

11.5 Form dan Parsing Variabel

Pembuatan form telah dijelaskan pada bab 1, menggunakan HTML. Hanya saja setelah form itu dibuat bagaimana hasil form dapat diproses lebih lanjut akan dijelaskan disini, dengan apa yang dinamakan sebagai parsing variabel yang artinya melewatkan variabel melalui form dari client ke server untuk diolah di server dan hasilnya dikembalikan ke client.

Pada perintah form terdapat action dan method, sperti telah dijelaskan pada bab 1, penulisan form adalah sebagai berikut:

………. layout form ……….

</form>

Perintah action digunakan untuk menunjukkan file program PHP yang akan digunakan untuk mengolah variabel yang dilewatkan dari form ini. Sebagai contoh bilai dituliskan action=”contoh28.php” maka form ini akan memanggil file contoh28.php untuk mengolah variabel yang dimasukkan. Sehingga untuk menggunakan aplikasi ini secara default digunakan 2 buah file, yang pertama adalh file untuk form (dapat dibuat dengan HTML) dan kedua file untuk mengolah data yang didefinisikan secbagai action(berupa file PHP).

Sedangkan method digunakan untuk menyatakan metode pengiriman apa yang digunakan GET atau POST.

· Metode GET merupakan metode pengiriman sederhana yang melewatkan variabel melalui nama URL dari aplikasi web, sehingga nilai yang dikirim akan terlihat oleh client. Hal ini untuk memudahkan client tahu apakah nilai yang dimasukkan sudah dikirim dengan benar. Tetapi metode ini sangat riskan untuk data-data yang bersifat rahasia, kecuali menggunakan metode enskripi tertentu untuk menyatakan data yang bersifat rahasia, hal ini banyak digunakan dalam aplikasi web saat ini.

· Metode POST merupakan metode pengiriman variabel secara langsung tanpa menggunakan nama URL, sehingga client tidak dapat melihat variabel apa yang dikirimkan. Secara default metode ini lebih aman, tetapi keamanan ini masih mempunyai celah yang tidah terhindari yaitu terbukanya protokol HTTP yang dapat digunakan oleh para pengganggu untuk mengganggu aplikasi web yang dibuat.

Contoh 2.8:

Penggunaan metode GET. Untuk itu menggunakan file contoh28.html sebagai form dan contoh28.php sebagai action.

--------------------------------File contoh28.html ------------------------------------------

<html>

<head>

<title>Variabel Dalam PHP</title>

</head>

<body>

Cyber Room<br><br><br>

</center>

Masukkan nama dan umur anda:<br><br>

Nama : <input type=text name=nama><br>

Umur : <input type=text name=umur><br><br>

</form>

</body>

</html>

--------------------------------File contoh28.php ------------------------------------------

<html>

<head>

<title>Variabel Dalam PHP</title>

</head>

<body>

echo "Selamat datang $nama<br>";

if($Umur<17)

echo "Maaf anda belum berumur 17<br>";

else

echo "Selamat bergabung dengan Cyber Room<br>"

</body>

</html>

Hasilnya adalah sebagai berikut

Gambar 11.8. Tampilan contoh 8

Pada gambar 11.8. terlihat pada nama URL (tanda merah) bahwa yang dimasukkan adalah nama=basuki, umur=23 dan submit=submit. Hal ini terjadi karena pemakaian method GET. Bila method pada file contoh28.html diganti dengan POST sebagai berikut:

<html>

<head>

<title>Variabel Dalam PHP</title>

</head>

<body>

Cyber Room<br><br><br>

</center>

Masukkan nama dan umur anda:<br><br>

Nama : <input type=text name=nama><br>

Umur : <input type=text name=umur><br><br>

</form>

</body>

</html>

perhatikan hasilnya adalah sebagai berikut:

Gambar 11.9. Contoh dengan method POST

Pada hasil parsing variabel, tidak terlihat nilai dari setiap variabel pada nama URL, sehingga client tidak dapat melihat nilai apa yang dikirimkan. Hal ini akibat dari pemakaian method POST.

Contoh 9:

Membuat kalkulator sederhana, dengan form ditulis dalam file contoh29.html dan action pada contoh29.php sebagai berikut:

--------------------------------File contoh29.html ------------------------------------------

<html>

<head>

<title>Variabel Dalam PHP</title>

</head>

<body>

Cyber Room<br><br><br>

</center>

Masukkan nama dan umur anda:<br><br>

bilangan 1 = <input type=text name=bil1><br>

bilangan 2 = <input type=text name=bil2><br><br>

</form>

</body>

</html>

--------------------------------File contoh29.php ------------------------------------------

<html>

<head>

<title>Variabel Dalam PHP</title>

</head>

<body>

if($tambah=="tambah") {

$hasil=$bil1+$bil2;

echo "$bil1 + $bil2 = $hasil<br>";

}

if($kurang=="kurang") {

$hasil=$bil1-$bil2;

echo "$bil1 - $bil2 = $hasil<br>";

}

if($kali=="kali") {

$hasil=$bil1*$bil2;

echo "$bil1 * $bil2 = $hasil<br>";

}

</body>

</html>

Hasilnya adalah sebagai berikut:

Gambar 11.10. Tampilan contoh 9

Bab 12

Manipulasi Gambar Dengan Photoshop

Di dalam bab ini, akan dibahas mengenai penggunaan aplikasi Adobe Photoshop untuk manipulasi image. Materi yang dibahas dikelompokkan menjadi 7 bagian sebagai berikut:

(1) Area Kerja Photoshop (ToolBox): mengenai user interface Adobe Photoshop secara umum dan fungsi-fungsi tools pada toolbox Photoshop, area kerja Photoshop, viewing image, penggunaan history palette, rulers, guides, measure tool.

(2) Manipulasi Warna mengenai pengaturan warna image (brightness/contrast, level, saturation, dsb), penggunaan eyedropper, color sampler tool, dan tools terkait lainnya.

(3) Selection mengenai cara melakukan selection image, penggunaan marquee, lasoo tool, dan tools terkait lainnya.

(4) Menggambar dan Manipulasi Path mengenai cara penggunaan pen tools dan tools sejenis untuk menggambar dan manipulasi path

(5) Transformation dan Retouching mengenai pengubahan ukuran image dan canvas, transformasi bentuk image, cloning, memperbaiki image, dan penggunaan tools yang terkait.

(6) Layer dan Masking mengenai penggunaan layer dan masking

(7) Filter dan Membuat Special Effect mengenai penggunaan filter dan membuat special effect pada image.

12.1. Area Kerja

Gambar 12.1. Tampilan dan Area Kerja Photoshop

Keterangan:

Toolbox
Tool Option Bar
Menu
Status Bar
Berbagai jenis palette, yang aktif dari atas ke bawah: navigation palette, color palette, history
palette, dan layer palette
Palette Well (hanya tampak apabila resolusi layar di atas 800 x 600)

12.1.A. Toolbox

Toolbox berisi berbagai macam tools yang digunakan untuk melakukan manipulasi image.

12.1.B. Tool Option Bar

Hampir semua tool pada Toolbox memiliki options yang ditampilkan pada Tool Option Bar. Options tersebut digunakan untuk mengatur nilai parameter dari tool yang sedang aktif/dipilih. Gambar 12.2 adalah contoh tampilan tool option bar jika tool Magic Wand pada toolbox (shortcut keyboard: W) diaktifkan:

Gambar 12.2. Tool Option Bar

Setelah nilai parameter pada tool option bar diubah-ubah (misalnya nilai Tolerance), kita dapat mengembalikannya lagi menjadi nilai default (nilai semula). Yaitu dengan klik icon yang ada di bagian paling kiri tool option bar, kemudian klik tombol . Pada context menu yang muncul, pilih Reset Tool untuk mengembalikan nilai default dari tool yang sedang dipilih. Apabila ingin mengembalikan nilai default semua tools di toolbox, pilih Reset All Tools. Untuk jelasnya bisa dilihat pada gambar 12.3.

Gambar 12.3. Reset All Tool

Apabila ingin menyembunyikan/menampilkan Tool Option Bar, Pilih Menu Window, kemudian klik pada item menu Options untuk menghilangkan atau mengaktifkan tanda check-nya.

Gambar 12.4. Check Option untuk mengaktifkan Window Option

12.1.C. Menu

Berikut adalah menu-menu yang terdapat pada Adobe Photoshop 8.0:

File untuk manipulasi file seperti menyimpan, membuka, export, import, dan cetak.
Edit untuk proses editing secara umum seperti cut, copy, paste, transform image, serta untuk mengatur preferences Adobe Photoshop.
Image berisi editing image untuk mengatur warna, hue/saturation, brightness/contrast, ukuran, dsb.
Layer untuk manajemen layer pada image, seperti menambah layer, menghapus, menambah efek pada layer, serta masking.
Select untuk pemilihan obyek gambar (selection image).
Filter untuk menggunakan filter-filter yang terinstall pada Photoshop yang dapat digunakan untuk memberi efek tertentu pada gambar.
View digunakan untuk pengaturan view seperti zooming image, menampilkan skala, dan sebagainya.
Window digunakan untuk pengaturan window
Help digunakan untuk menampilkan help Adobe Photoshop.

12.1.D. Status Bar

Status bar berisikan keterangan mengenai tool di toolbox yang sedang aktif, serta keterangan image yang sedang aktif. Status bar pada Photoshop dapat ditampilkan/disembunyikan dengan memilih menu Window > Status Bar. Untuk lebih memahami kegunaan status bar, bisa praktekkan sbb:

1) Buat dokumen baru, dengan memilih menu File > New... (shorcut keyboard: Ctrl+N). Akan keluar dialog seperti gambar 12.5, isikan nilai2nya seperti pada gambar 1.5 dan kemudian klik tombol Ok.

2) Tahan tombol Alt, kemudian klik kiri pada status bar, akan terlihat keterangan dokumen image yang sedang aktif.

3) Apabila kita perhatikan gambar 12.6.B, Paint Bucket Tool kebetulan sedang aktif, dan pada status bar nya terdapat juga keterangan dari tool tersebut. Untuk jelasnya silakan baca pada keterangan gambar yang ada di bawah gambar 12.6.

Gambar 12.5. Pembuatan dokumen baru

Gambar 12.6. Pembukaan dokumen baru

Keterangan:

Skala tampilan pada kanvas (view area image) (gambar 1.6.G), pada gambar menunjukkan skala ampilan adalah 100%
Paint Bucket Tool pada toolbox sedang aktif
Informasi/Keterangan tentang dokumen yang sedang aktif di kanvas (view area image).
Informasi/Keterangan tentang dokumen yang sedang aktif di kanvas (view area image). Untuk enampilkan, tekan Alt+Klik atau Ctrl+Klik pada (gambar 1.6.C) .
Digunakan untuk mengubah informasi/keterangan pada (gambar 1.6.C)
Penjelasan singkat mengenai tool yang sedang aktif (pada contoh ini Paint Bucket Tool)
View area image atau kanvas, merupakan area dokumen image yang sedang kita edit.

12.1.E. Palette

Palette Photoshop berguna untuk memudahkan dalam navigasi maupun editing image. Untuk menyembunyikan/menampilkan palette, digunakan menu Window, kemudian pilih palette yang ingin disembunyikan/ditampilkan.

12.1.F. Palette Well

Palette well digunakan untuk memudahkan dalam pengaturan palette. Namun palette well hanya tersedia jika resolusi layar lebih besar dari 800 x 600 (resolusi minimal yang disarankan adalah 1024 x 768). Apabila suatu palette diletakkan di palette well, maka palette akan bersifat tersembunyi. Ketika title dari palette diklik, barulah palette akan ditampilkan. Jika area di luar palette di klik, maka palette tersebut akan tersembunyi kembali.

Untuk menyimpan palette ke dalam palette well, seret (drag) tab palette ke dalam palette well hingga palette well ter-highlight.(Gambar 12.7, memperlihatkan palette tab navigator di-drag ke palette well)

Gambar 12.7 Palette Well

12.2. Toolbox

Berikut ini akan dijelaskan mengenai fungsi dari masing-masing tools yang terdapat pada toolbox Adobe Photoshop 8.0. Untuk cara penggunaan lebih detil masing-masing tools akan dijelaskan secara terpisah pada bagian selanjutnya.

Gambar 12.8. Toolbox

Keterangan:

A. Marquee tool

B. Move tool

C. Lasso tool

D. Magic Wand tool

E. Crop tool

F. Slice tool

G. Patch tool

H. Brush tool

I. Stamp tool

J. History Brush tool

K. Eraser tool

L. Paint Bucket tool

M. Sharpen tool

N. Burn tool

O. Path Selection tool

P. Type tool

Q. Pen tool

R. Custom Shape tool

S. Notes tool

T. Eyedropper tool

U. Hand tool

V. Zoom tool

12.2.A. Marquee Tool

	Rectangular Marquee (Shortcut keyboard: M, atau Shift + M) untuk membuat area selection berbentuk segi empat.pada gambar.
	Elliptical Marquee (Shortcut keyboard: M, atau Shift + M) untuk membuat area selection berbentuk elips atau lingkaran pada gambar.
	Single Row Marquee untuk membuat area selection satu baris pada gambar (ukuran tinggi selection adalah 1 pixel)
	Single Column Marquee untuk membuat area selection satu kolom pada gambar (ukuran lebar selectionadalah 1 pixel).

12.2.B. Move Tool

(Shortcut keyboard: V) Digunakan untuk menggeser/memindah selection, layers, dan guides.

12.2.C. Lasoo Tool

(Shortcut keyboard: L, atau Shift + L untuk mengubah jenis Lasoo)

	Lasoo digunakan untuk membuat area selection dengan bentuk bebas
	Polygonal Lasoo digunakan untuk membuat area selection berbentuk poligon
	Magnetic Lasoo digunakan untuk membuat area selection dengan cara menempelkan tepi selection pada area tertentu pada image.

12.2.D. Magic Wand Tool

(Shortcut keyboard: W) Digunakan untuk membuat area selection yang memiliki warna serupa. Perbedaan toleransi warna dapat diatur pada tool option bar.

12.2.E. Crop Tool

(Shortcut keyboard: C) Digunakan untuk memangkas image (memotong dan membuang area tertentu dari image)

12.2.F. Slice Tool

(Shortcut keyboard: K, atau Shift + K untuk mengubah jenis slice)

	Slice Tool digunakan untuk membuat potongan-potongan gambar dari suatu gambar
	Slice Select Tool digunakan untuk memilih potongan pada suatu gambar

12.2.G. Healing Brush, Patch, Color Replacement Tool

(Shortcut keyboard: J, atau Shift + J mengubah tool)

	Patch Tool digunakan untuk mengecat/melukis pada area tertentu gambar dengan pola (pattern) atau sample tertentu. Cocok untuk memberbaiki gambar yang rusak.
	Healing Brush Tool digunakan untuk mengecat/melukis gambar dengan pola atau sample tertentu. Cocok untuk memperbaiki gambar yang agak rusak.
	Color Replacement Tool digunakan untuk mengecat/mewarnai gambar dengan pola warna tertentu.

12.2.H. Brush, Pencil Tool

(Shortcut keyboard: B, atau Shift + B untuk mengubah tool)

	Brush Tool digunakan untuk melukis gambar dengan goresan kuas
	Pencil Tool digunakan untuk melukis gambar dengan goresan pencil

12.2.I. Stamp Tool (Shortcut keyboard: S, atau Shift + S untuk mengubah jenis stamp)

	Clone Stamp Tool digunakan untuk melukis gambar dengan sample image tertentu
	Pattern Stamp Tool digunakan untuk melukis gambar dengan menggunakan pola tertentu

12.2.J. History Brush Tool

(Shortcut keyboard: Y, atau Shift + Y untuk mengubah jenis)

	History Brush Tool digunakan untuk melukis gambar menggunakan snapshot atau state history dari gambar 2.
	Art History Tool digunakan untuk melukis gambar menggunakan snapshot atau state history dari gambar, dengan model artistik tertentu.

12.2.K. Eraser Tool

(Shortcut keyboard: E, atau Shift + E untuk mengubah jenis eraser)

	Eraser digunakan untuk menghapus pixel gambar dan mengembalikannya ke state tertentu.
	Background Eraser digunakan untuk menghapus area tertentu gambar menjadi transparan.
	Magic Eraser digunakan untuk menghapus area tertentu gambar yang memiliki warna yang serupa menjadi transparan dengan satu kali klik.

12.2.L. Paint Bucket, Gradient Tool

(Shortcut keyboard: G, atau Shift + G)

	Paint Bucket Tool digunakan untuk mengecat area yang dipilih dengan warna foreground atau pola tertentu.
	Gradient Tool digunakan untuk mengecat area yang dipilih (selected area) dengan perpaduan banyak warna.

12.2.M. Blur, Sharpen, Sharpen Tool

(Shortcut keyboard: R, atau Shift + R)

	Blur Tool digunakan untuk menghaluskan/mengaburkan area tertentu pada gambar.
	Sharpen Tool digunakan untuk menajamkan area tertentu pada gambar.
	Smudge Tool digunakan untuk menggosok/mencoreng area tertentu pada gambar

12.2.N. Dodge, Burn, Sponge Tool

(Shortcut keyboard: O, atau Shift + O)

	Dodge Tool digunakan untuk menerangkan warna di area tertentu pada gambar
	Burn Tool digunakan untuk menggelapkan warna di area tertentu pada gambar
	Sponge Tool digunakan untuk mengubah saturation di area tertentu pada gambar

12.2.O. Path Selection Tool

(Shortcut keyboard: A, atau Shift + A untuk mengubah jenis)

	Path Selection Tool digunakan untuk melakukan selection path
	Direct Selection Tool digunakan untuk mengubah anchor dan direction point dari path.

12.2.P. Type tool

(Shortcut keyboard: T, atau Shift + T untuk mengubah jenis)

	Horizontal Type Tool digunakan untuk membuat tulisan secara horizontal
	Vertical Type Tool digunakan untuk membuat tulisan secara vertikal
	Horizontal Type Mask Tool digunakan untuk membuat selection berbentuk tulisan secara horizontal
	Vertical Type Mask Tool digunakan untuk membuat selection berbentuk tulisan secara vertikal

12.2.Q. Pen Tool

	Pen Tool (Shortcut keyboard: P, atau Shift + P) digunakan untuk membuat path dengan lengkung-lengkung yang halus
	Freeform Pen Tool (Shortcut keyboard: P, atau Shift + P) digunakan untuk membuat path berbentuk bebas
	Add Anchor Point Tool digunakan untuk menambah anchor point pada path
	Delete Anchor Point Tool digunakan untuk menghapus anchor point tertentu pada path
	Convert Point Tool digunakan untuk mengubah anchor dan direction point tertentu pada path

12.2.R. Shape Tool

(Shortcut keyboard: U, atau Shift + U untuk mengubah jenis)

	Rectangle Tool digunakan untuk menggambar bentuk segi empat
	Rounded Rectangle Tool digunakan untuk menggambar segi empat melengkung
	Ellipse Tool digunakan untuk menggambar ellipse
	Polygon Tool digunakan untuk menggambar polygon
	Line Tool digunakan untuk menggambar garis lurus
	Custom Shape Tool digunakan untuk menggambar bentuk tertentu dari daftar bentuk yang dapat dipilih pada option bar

12.2.S. Notes Tool

(Shortcut keyboard: N, atau Shift + N untuk mengubah jenis)

	Notes Tool digunakan untuk membuat catatan pada gambar
	Audio AnnotationTool digunakan untuk membuat suara/audio pada gambar

12.2.T. Eyedropper, Measure Tool

(Shortcut keyboard: I, atau Shift + I untuk mengubah jenis)

	Eyedropper Tool digunakan untuk mengambil sample warna pada gambar untuk warna foreground
	Color Sampler Tool digunakan untuk mengambil berbagai sample warna pada gambar
	Measure Tool digunakan untuk mengukur jarak atau sudut pada gambar

12.2.U. Hand Tool

(Shortcut keyboard: H) Digunakan untuk menggeser/memindah bidang pandang gambar di dalam kanvas.

12.2.V. Zoom Tool

(Shortcut keyboard: Z) Digunakan untuk memperbesar atau memperkecil tampilan gambar.

12.3. Latihan Melakukan Resample Gambar

· Buka gambar, pilih sebuah file gambar

Gambar 12.9 Contoh gambar

· Pilih Image > Image size untuk menampilkan kotak dialog.

· Pilih kotak cek Resample Image untuk mengubah nilai resolution dan nilai Width dan Height.

· Ubah nilai Width dan Height.

· Klik OK.

12.4 Mengubah Ukuran Cetak

Jika ingin mengubah tampilan pada halaman, dan tidak ingin mengubah jumlah pixel pada halaman, ubah resolusi agar dapat mencetak gambar lebih besar atau lebih kecil tanpa menambah atau mengurangi satu pixelpun.

· Buka gambar

· Pilih Image > Size.

· Matikan resample image agar tidak ada pixel yang dipengaruhi pada saat mengubah ukuran gambar.

· Ubahlah setting ukuran output dengan memilih resolusi ideal pada table berikut ini.

· Klik OK.

Tabel 12.1. Beberapa ukuran cetak standar

Printer	Resolusi Ideal	Batas Minimal	Batas Maksimal
Print Laser 300 ppi	120 ppi	90 ppi	150 ppi
Print Laser 600 ppi	180 ppi	135 ppi	225 ppi
Newsprint	180 ppi	135 ppi	225 ppi
Coated Magazine Stock	267 ppi	200 ppi	330 ppi
Printer InkJet Warna	300 ppi	240 ppi	400 ppi
Super-fine coated stock	350 ppi	260 ppi	440 ppi

12.5 Memutar Canvas.

Digunakan untuk menampilkan submenu yang berisikan pilihan untuk memutar atau membalik gambar. Berikut ini submenu dari Rotate canvas :

- 180^o : memutar gambar yang terbalik agar kembali pada kakinya, Alt + I, E, 1.

- 90^o CW : memutar gambar 90 derajat searah jarum jam, Alt + I, E, 9.

- 90^o CCW : memutar gambar 90 derajat berlawanan jarum jam, Alt + I, E, 0)

- Arbiritary : meluruskan gambar.

- Flip horizontal : memperbaiki teks yang terbalik (alt + I + E + H).

- Flip vertikal : membalik bagian atas dan bawah gambar (alt + I, E, V)

Gambar 12.10 Memutar gambar 180^o, 90^o CW dan 90^o CCW

12.6 Memotong Detail Gambar Yang Tidak Perlu

Tool Crop berfungsi untuk memotong sisa gambar atau elemen latar belakang yang tidak perlu.

· Klik Icon tool crop (tekan C)

· Gambar batas crop, geser di dalam jendela gambar untuk membuat sebuah segi empat di sekitar bagian gambar yang ingin dipertahankan

· Geser dalam batasan crop untuk memindahkannya.

· Geser tangkai untuk mengubah ukuran batasan gambar, tekan shift dan geser untuk mengubah ukurannya secara profesional.

· Geser di luar batas crop untuk menegakkan dan memotong gambar dalam satu operasi.

· Titik pemotongan akan menjadi titik pusat perputaran jika menggeser tangkai dengan alt atau option.

· Klik tanda cek pada baris pilihan, pilih Image-Crop-Klik ganda dalam batas crop tekan enter.

Gambar 9.11 Memotong detail gambar

12.7 Menambahkan copyright & URL.

Cara lain menambahkan cap pribadi ke dalam gambar adalah dengan pernyataan hak cipta atau copyright.

· Pilih file info, pada PC tekan Alt+F lalu I.

· Ketikkan caption, pada field Caption ketikkan apa saja mulai dari satu kalimat hingga beberapa paragraf mengenai gambar anda.

· Ketikkan URL, jika anda memiliki situs internet, ketikan alamatnya (dikenal dengan istilah Universal Resource Locator) pada kotak image URL. Ketikkan alamat lengkapnya, seperti : http://www.press.eeepis-its.edu.

· Klik OK, simpan gambar anda dalam format apa saja.

12.8. Membuat Spesial Efek dengan Photoshop

Pada bagian ini kita akan mengaplikasikan photoshop pada pembuatan efek khusus. Efek ini berguna untuk mempercantik gambar yang kita olah. Bukan itu saja, kita bisa menciptakan bermacam gambar digital yang unik. Kreativitas adalah kuncinya.

12.8.1. Membuat Efek Lukisan

Efek lukisan sangat populer dan sering digunakan, karena merupakan trik yang ampuh sekaligus dapat membuat foto menjadi lebih artistik.

Adapun langkah-langkahnya adalah :

Buka Gambar
Ubah layer background menjadi mode normal dengan klik ganda
Klik : Filter > Artistik > Dry Bush
Pada palet layer klik tombol : Add layer mask. Akan muncul ikon layer mask berwarna putih di samping kanan layer tumbnail pada palet layer.
Klik layer mask, kemudian pilih menu : Image > Adjustment Invert atau tekan Crtll+I untuk menjadikan layer mask tersebut menjadi berwarna hitam.
Pastikan warna foreground putih pada Toolbox dan klik Brush tool, pilih bentuk sapuan kuas yang diinginkan pada palet Brushes, agar lebih artistik pilih bentuk kuas dekokratif.
Sapukan Tool dan hasil image akan muncul secara otomatis sesuai bentuk sapuan kuas.
Tambahkan Filter > Texture > Texturize untuk memberi kesan kasar pada permukaannya.

12.8.2. Membuat Efek Rintik Hujan

Efek rintik hujan sering digunakan untuk membuat efek pemandangan dan dapat membuat foto menjadi lebih artistik. Adapun langkah-langkahnya adalah :

Buka Gambar
Klik : Filter > Noise > Add Noise. Dalam kotak dialog Add Noise masukkan nilai Amount sesuai kebutuhan, antara 100 hingga 400% tergantung seberapa banyak efek hujan yang akan diterapkan.
Pada menu distribution pilih Gaussian, aktifkan kotak cek Monochrome.
Klik OK
Tambahkan : Filter > Blur > Motion Blur, masukkan angle antara 50 hingga 65 derajat, Distance antara 20 hingga 60px.
Klik OK

12.8.3. Menggunakan Masking

Mask berguna untuk menyembunyikan sementara sebagian area pada layer. Teknik ini berguna saat kita menggabungkan beberapa elemen image dalam komposisi disain. Kita dapat menghapus sebagian area image yang tidak diinginkan tanpa kehilangan image aslinya, dengan layer ini kita juga bisa membuat efek gradasi. Adapun langkah-langkahnya adalah :

Klik : Select > Deselect atau tekan Crtl+D untuk menghilangkan seleksi area pada image
Pada palet layer, pilih layer yang akan kita tambahkan mask
Untuk membuat mask dengan menampilkan keseluruhan bagian layer, klik tombol New Layer Mask pada palet layer atau pilih Layer > Add Layer Mask > Reveal All
Untuk membuat mask dengan menyembunyikan keseluruhan bagian layer, Alt+Klik tombol New Layer Mask atau pilih Layer > Add Layer Mask > Hide All
Untuk membuat mask dengan menampilkan bentuk seleksi setelah membuat seleksi, klik tombol New Layer Mask
Untuk mengedit Layer Mask, pilih Brush Tool, gunakan warna foreground putih untuk mengurangi area mask, hitam untuk menambah area mask, dan abu-abu untuk membuat mask transparan

12.8.2. Membuat Efek Teks Bergerak

Efek teks bergerak sering digunakan untuk membuat penampilan teks menjadi lebih menarik dan artistik. Adapun langkah-langkahnya adalah :

Buat dokumen berwarna hitam , Width : 800 px , Height : 600 px, Color Modenya : RGB. Horizontal Type Tool, buat teks : CEPAT
Klik : Layer > Rasterize > Type, Duplikasi layer tersebut , beri nama angin
Urutannya dari atas ke bawah : layer CEPAT, ANGIN, dan Background
Sembunyikan layer ‘CEPAT’ , aktifkan layer ‘ANGIN’
Klik : Filter > Stylize > Wind, metode yang dipakai : Wind, Direction di isi : From The Right. Lakukan dua sampai tiga kali
Aktifkan layer ‘CEPAT’, klik : Layer > Layer Style > Gradient Overlay
Pilih kombinasi warna gradient yang diinginkan
Tambahkan Stroke dengan warna hitam. Terapkan Wind dua kali
Untuk menggabungkan ke dua layer gunakan : Ctrl+E
Klik : Edit > Transform > Skew, akan muncul box dengan 8 handle, geser handle ke tengah atas kanan, hal ini akan membuat teks miring. Tekan Enter.

Bab 13

Membuat Gambar 3D

Menggambar 3 dimensi adalah sesuatu yang menarik untuk dibahas, karena hasilnya bisa dikatakan lebih menggambarkan keadaan nyata dari ruang dimensi manusia. Perkembangan teknologi kemputer saat ini sudah sangat mencukupi untuk keperluan menggambar 3D bahkan sampai pada animasi 3D atau video 3D. Pemakaian grafik 3D ini dirasakan mempunyai nilai sendiri hal ini bisa ditarik dari banyaknya video-video dan aplikasi-aplikasi yang menawarkan fasilitas 3D. Sebut saja film yang cukup banyak menggunakan efek 3D seperti Spy Kids 3D, Barbie bahkan anime 3D yang banyak beredar di pasar video. Software game adalah yang pertama kali memanfaatkan 3D, saat ini bisa dikatakan gamae yang bukan 3D sudah tidak laku di pasar game, mulai dari game Action seperti Strike Fighter, 3D Police dan Taken, Strategi seperti Age of Empire dan Age of Mitology sampai simulasi seperti SIM, semuanya menggunakan fitur 3D.

Untuk menggambar 3D di komputer, saat ini sudah tersedia banyak software yang mempunyai fasilitas 3D. Di antara software-software tersebut, yang banyak digunakan antara lain 3D Studio Max, AutoCAD dan Maya. Ketiga software ini memiliki fitur dasar yang bisa dikatakan sama, dengan fitur-fitur tambahan yang berbeda. Masing-masing mempunyai penggemar yang tidak bisa dibandingkan. Dalam modul ini software yang digunakan adalah 3D Studio Max dengan sistem operasi Windows XP.

3D Studio Max merupakan software yang powerfull di dalam menggambar model 3D dengan fasilitas yang lengkap dan mudah digunakan. Hasilnya cukup memuaskan. Bahkan ada fitur animasi dalam software ini yang memungkinkan pembuatan animasi 3D secara langsung.

13.1 Mengenal 3D Studio Max

3D Studio Max adalah software grafis yang dibuat oleh AutoDesk untuk memadukan grafik vektor dan gambar raster dalam menghasilkan gambar-gambar 3D yang kelihatan realistik. Hasil 3D studio Max ini bisa berupa model gambar 3D atau animasi 3D yang tersimpan dalam bentuk file dengan nama ekstensi .avi maupun .mov. Beberapa kelebihan dari 3D Studio Max ini antara lain:

· Obyek gambar 3D yang realistik

· Kemudahan antar muka dalam membuat model gambar 3D

· Kelengkapan antar muka

· Kompatibilitas hasil gambar dengan program grafis dan animasi yang lain. Ini terlihat bahwa hasil 3D studio max ini dapat dijalankan di Macromedia Flash, Adobe Premeire dan Ulead Video Studio.

3D studio max merupakan software standard di dalam 3D modeling dalam dunia desain grafis, animasi dan video editing. Hal ini disebabkan karena 3D studio max dapat menghasilkan format grafik vektor dan animasi vektor yang dapat dikenali oleh banyak software grafik lainnya. Sehingga 3D studio max mempunyai segmen yang berbeda di dunia desain grafis yaitu 3D modeling.

Kebutuhan spesifikasi sistem komputer untuk menjalankan 3D Studio Max 5.1 memang cukup tinggi mengingat bahwa 3D studio max adalah software graphis 3D, yaitu:

· Processor minimal P3 500MHz, disarankan yang lebih tinggi.

· RAM minimum 256 MB, disarankan 512 MB untuk dapat digabungkan dengan program aplikasi video editing seperti adobe premeire

· Video Graphics minimal 64MB, disarankan 128 MB

· Sistem operasi Windows 98, NT, 2000, atau XP

Kebutuhan sistem di atas, sebaiknya tidak menggunakan spesifikasi minimum karena berakibat tidak jalannya beberapa fasilitas 3D studio max.

13.2 Interface 3D studio Max

Interface antra muka 3D studio max sebenarnya merupakan interface yang sangat baik dan lengkap, hanya saja bagi pemula mungkin cukup menakutkan karena banyaknya item toolbar dan komponen yang ditampilkan. Tetapi jangan khawatir karena ini nantinya akan sangat membantu dalam membangun model grafik 3D.

Gambar 13.1. Interface antar muka 3d studio max

Dari gambar 13.1. terlihat secara langsung ditampilkan grafik dalam bentuk perspektif dan proyeksi (Top-atas, Front-depan dan Left-samping kiri). Hal ini sangat membantu dalam membangun obyek grafik 3D, karena memungkinkan editing grafik dari berbagai sisi gambar. Disamping itu terdapat:

(1) Menu, yang letaknya di bagian paling atas.

(2) Toolbar, yang letaknya di atas tepatnya dibawah menu.

(3) Viewport, tampilan perspektif dan proyeksi dari grafik 3D

(4) Command Panel, yang letaknya di sebelah kanan.

(5) Viewport, yang letaknya di sebelah kanan bawah.

(6) Animation Control, yang letaknya di bawah tepatnya sebelah kiri viewport.

13.3 Menu

Menu yang digunakan 3D studio max adalah menu pulldown yang merupakan menu utama dari program 3d studio max, yang memuat perintah-perintah pokok aplikasi seperti operasi file, editing, render dan lain-lain.

Gambar 1.2. Tampilan menu 3d studio max

13.4 ToolBar

Toolbar ini merupakan menu yang ditampilkan dalam bentuk tombol atau ikon untuk memudahkan penggunaan program karena menggunakan bahasa gambar yang lebih informatif dan lebih mudah dipahami oleh pengguna.

Gambar 13.3. Tampilan toolbar 3d studio max

13.5 Viewport

Viewport merupakan tampilan interaktif dari grafik 3D dengan model perspektif dan proyeksi. Ada 4 bagian utama dalam viewport yaitu:

(1) TOP yang artinya obyek gambar terlihat dari atas

(2) FRONT yang artinya obyek gambar terlihat dari depan

(3) LEFT yag artinya obyek gambar terlihat dari kiri

(4) PERSPECTIVE yang artinya gambar terlihat utuh 3D dalam bentuk camera-view.

13.6 Command Panel

Command panel ini fungsinya hampir sama dengan menu dan toolbar, bedanya adalah adanya parameter-parameter yang memungkinkan editing grafik 3D dapat dilakukan dengan ukuran yang pasti. Command panel ini mempunyai enam buat tab yaitu:

(1) Create: digunakan untuk pembuatan obyek grafik 2D dan 3D

(2) Modify: digunakan untuk memodifikasi obyek grafik dengan mengubah parameter-parameter yang ada dalam setiap modifikasi obyek grafik.

(3) Hierarchy: digunakan untuk mengatur jenis-jenis titik orientasi

(4) Motion: digunakan untuk mengatur animasi obyek

(5) Display: digunakan untuk mengatur obyek yang ditampilkan (visible) dan yang disembunyikan (invisible).

(6) Utility: digunakan untuk fasilitas tambahan seperti [Asset Manager] untuk mengorganisasi obyek, [Motion Capture] untuk menangkap gambar bergerak dalam bentuk frame-frame gambar dan sebagainya.

Gambar 13.4. Tampilan viewport

Gambar 13.5. Command Panel

13.7 Animation Control

Animation control ini merupakan fasitias untuk mengatur animasi obyek 3D yang banyak digunakan dalam video editing.

Gambar 13.6. Animaton Control

13.8 Viewport Control

Viewport control merupakan navigasi untuk memperbesar tampilan gambar di viewport, memutar dan menggeser viewport (koordinat) sehingga tampilan dapat dilihat lebih baik.

Gambar 13.7. Viewport Control

Di dalam viewport control ini ada 8 buah control yaitu:

(1) Zoom, mengubah ukuran secara manual pada satu viewport

(2) Zoom All, mengubah ukuran secara manual pada semua viewport

(3) Zoom Extend, mengubah ukuran secara otomatis pada satu viewport

(4) Zoom Extend All, mengubah ukuran secara otomatis pada semua viewport

(5) Field on View, mengubah camera view pada satu viewport

(6) Pan, menggeser viewport atau sumbu koordinat yang akan berakibat menggeser semua tampilan obyek grafik

(7) Arc Rotate, memutar vewport atau sumbu koordinat yang akan berakibat memutar semua tampilan obyek grafik

(8) Min-Max Toggle, untuk menampilkan satu viewport secara besar atau semua viewport.

13.9 Membuat Obyek

Obyek dasar dalam grafik 3D dimulai dari obyek Shape dan obyek Geometri. Bab ini akan menjelaskan bagaimana membangun obyek-obyek grafik dasar ini. Untuk membangun obyek grafik dasar ini, anatar muka yang banyak digunakan adalah [command panel] yang letaknya pada keadaan standard ada di sebelah kanan dari tampilan 3d studio max.

Gambar 13.8. Command Panel

13.10. Obyek Shape

Obyek shape digunakan untuk membangun obyek grafik 2D di dalam ruang 3D seperti garis, lingkaran, ellips, Ngon, kotak, text, section, bintang, donutdan helix. Pembuatan obyek grafik ini bisa menggunakan mouse (drag) dan keyboard ( menuliskan setiap parameter grafis).

Gambar 13.9. Command Panel untuk Create Shape (Splines)

13.10.1. Membuat Garis

Pilih [create] >> [Shape] pada [command panel], lalu pilih Line. Berikutnya tentukan posisi awal dan posisi akhir dengan mouse-drag. Posisi akhir dilakukan dengan click kanan pada mouse. Fungsi line ini juga bisa digunakan untuk membuat polyLine, dengan click pada setiap posisi titik penghubung dari garis-grais yang dibentuk.

Gambar 13.10. Cara membuat garis

13.10.2. Membuat Lingkaran

Pilih [create] >> [Shape] pada [command panel], lalu pilih Circle. Tentukan posisi awal (click pertama kali) adalah posisi pusat lingkaran kemudian drag sampai besarnya lingkaran sudah cocok. Atau bisa meggunakan parameter yang ada di bagian bawah dari command panel yaitu dengan memasukkan radius (jari-jari) dari lingkaran.

Gambar 13.11. Cara drag membuat lingkaran

13.10.3. Membuat Arc

Arc (busur) adalah bentuk lingkaran terpotong. Pilih [create] >> [Shape] pada [command panel], lalu pilih Arc. Tentukan ttitik awal, tarik sampai besar arc sesuai dan gerakkan mouse sampai arcnya terbentuk. Atau bisa menggunakan keyboard dengan memasukkan parameter Radius, From (sudut awal) dan To ( sudut akhir) pada command panel. Misalkan membuat arc dengan jari-jari 50, dari 0^o sampai dengan 50^o. Gambar 13.12 menjelaskan teknik pembuatan arc dengan mouse atau dengan keyboard.

Gambar 13.12. Pembuatan arc dengan mouse

13.10.4. Membuat NGon

Ngon adalah gambar segi enam. Pilih [create] >> [Shape] pada [command panel], lalu pilih Ngon. Tentukan titik awal dari traik untuk mendapatkan besar dari Ngon.

Gambar 13.13. Pembuatan Ngon

13.10.5. Membuat Text

Text dalam grafis digunakan untuk memperjelas informasi gambar atau memang kandungan obyeknya sendiri.. Pilih [create] >> [Shape] pada [command panel], lalu pilih

Text. Ketikkan text yang akan dibuat pada property text di command panel. Pastikan letaknya dengan click satu kali di mana text tersebut akan diletakkan.

Gambar 13.14. Pembuatan Text

13.10.6. Membuat Section

Pilih [create] >> [Shape] pada [command panel], lalu pilih Section. Tentukan posisi awal dan tarik seberapa besar section yang akan dibuat.

Gambar 13.15. Pembuatan Section

13.10.7. Membuat Rectangle (Kotak)

Bentuk kotak ini bentuk yang sangat sederhana dan banyak digunakan dalam pengembangan grafis. Pilih [create] >> [Shape] pada [command panel], lalu pilih Rectangle. Tentukan posisi awal dan posisi akhir dari kotak.

Gambar 13.16. Pembuatan kotak

13.10.8. Membuat Ellipse

Pilih [create] >> [Shape] pada [command panel], lalu pilih Ellipse. Tentukan posisi awal ellipse dan gerakkan mouse sampai terbentuk model ellipse yang diharapkan. Atau dengan cara mengubah nilai Length dan Width pada command panel.

Gambar 13.17. Pembuatan Ellipse

13.10.9. Membuat Donut

Pilih [create] >> [Shape] pada [command panel], lalu pilih Donut. Tentukan titik pusat donut dengan click, kemudian drag sampai besarnya ok, kemudian drag kembali untuk menentukan lingkaran dalam donut.

Gambar 13.18. Pembuatan Donut

13.10.10. Membuat Star (Bintang)

Pilih [create] >> [Shape] pada [command panel], lalu pilih Star. Tentukan posisi awal dengan click, drag sampai membentuk besarnya bintang, kemudian drag untuk menentukan besarnya ttik-titik dalam dari bintang.

Gambar 13.19. Pembuatan Star

13.10.11. Membuat Helix

Helix identik dengan bentuk tangga berputar. Untuk membuat helix, pilih [create] >> [Shape] pada [command panel], lalu pilih Helix. Tentukan titik pusat helix dengan click, drag untuk membentuk jari-jari helix dan kemudian drag untuk menentukan tinggi helix.

Gambar 13.20. Pembuatan Helix

13.11 Obyek Geometry

Obyek geometry digunakan untuk membangun obyek grafik 3D yang berupa:

(1) Obyak dasar 3D (Standard Primitive) seperti: box, sphere, cylinder, torus, teapot, Cone, Goeshpere, Tube, Piramid dan Plane

(2) Obyek 3D lebih lanjut (Extended Primitive) seperti Hedra, Champerbox, Oiltank, Spindle, Gengon, RingWave, Prism, Torus Knot, ChamperCyl, Capsule, L-ext, C-ext dan Hose.

13.11.1. Membuat Box

Pilih [create] >> [Geometry] >> [Standard Primitive] pada [command panel], lalu pilih button Box. Tentukan panjang, lebar dan tinggi dari box.

Gambar 13.21. Membuat Box

13.11.2. Membuat Sphere (Bola)

Pilih [create] >> [Geometry] >> [Standard Primitive] pada [command panel], lalu pilih button Sphere. Tentukan titik pusat dan jari-jari bola.

Gambar 13.22. Membuat bola

13.11.3. Membuat Cylinder

Pilih [create] >> [Geometry] >> [Standard Primitive] pada [command panel], lalu pilih button Cylinder. Tentukan titik pusat dan jari-jari lingkaran, kemudian tentukan tinggi dari cylinder.

Gambar13.23. Membuat cylinder

13.11.4. Membuat Torus

Pilih [create] >> [Geometry] >> [Standard Primitive] pada [command panel], lalu pilih button Torus. Tentukan titik pusat, jari-jari lingkaran luar dan jari-jari lingkaran dalam dari torus.

Gambar 13.24. Membuat Torus

13.11.5. Membuat Teapot

Pilih [create] >> [Geometry] >> [Standard Primitive] pada [command panel], lalu pilih button Teapot. Tentukan titik pusat dan besar dari teapot.

Gambar 13.25. Membuat Teapot

13.11.6. Membuat Cone

Pilih [create] >> [Geometry] >> [Standard Primitive] pada [command panel], lalu pilih button Cone. Tentukan titik pusat, jari-jaring lingkaran, tinggi dan jari-jari lingkaran atas (kecil) dari cone.

Gambar 13.26. Membuat Cone

13.11.7. Membuat Tube

Pilih [create] >> [Geometry] >> [Standard Primitive] pada [command panel], lalu pilih button Tube. Tentukan titik pusat, lingkaran luar , lingkaran dalam dan tinggi dari tube.

Gambar 13.27. Membuat Tube

13.11.8. Membuat Piramid

Pilih [create] >> [Geometry] >> [Standard Primitive] pada [command panel], lalu pilih button Pyramid. Tentukan titik awal alas, titik akhir alas dan tinggi dari piramid.

Gambar 13.28. Membuat Piramid

13.11.9 Membuat Plane

Pilih [create] >> [Geometry] >> [Standard Primitive] pada [command panel], lalu pilih button Plane. Tentukan titik pusat dan besar dari plane.

Gambar 13.29. Membuat Plane

13.11.10 Membuat Hedra

Pilih [create] >> [Geometry] >> [Extended Primitive] pada [command panel], lalu pilih button Hedra.

Gambar 13.30. Membuat Hedra

13.11.11 Membuat CamferBox

Pilih [create] >> [Geometry] >> [Extended Primitive] pada [command panel], lalu pilih button CamferBox.

Gambar 13.31. Membuat CamferBox

13.11.12 Membuat OilTank

Pilih [create] >> [Geometry] >> [Extended Primitive] pada [command panel], lalu pilih button OilTank.

Gambar 13.32. Membuat OilTank

13.11.13 Membuat Spindle

Pilih [create] >> [Geometry] >> [Extended Primitive] pada [command panel], lalu pilih button Spindle.

Gambar 13.33. Membuat Spindle

13.11.14 Membuat Gengon

Pilih [create] >> [Geometry] >> [Extended Primitive] pada [command panel], lalu pilih button Gengon.

Gambar 13.34. Membuat Gengon

13.11.15 Membuat RingWave

Pilih [create] >> [Geometry] >> [Extended Primitive] pada [command panel], lalu pilih button RingWave.

Gambar 13.35. Membuat RingWave

13.11.16 Membuat Prisma

Pilih [create] >> [Geometry] >> [Extended Primitive] pada [command panel], lalu pilih button Prism.

Gambar 13.36. Membuat Prisma

13.11.17 Membuat TorusKnot

Pilih [create] >> [Geometry] >> [Extended Primitive] pada [command panel], lalu pilih button Torus Knot.

Gambar 13.37. Membuat Torus Knot

13.11.18 Membuat ChamferCyl

Pilih [create] >> [Geometry] >> [Extended Primitive] pada [command panel], lalu pilih button ChamferCyl.

Gambar 13.38. Membuat ChamferCyl

13.11.19 Membuat Capsule

Pilih [create] >> [Geometry] >> [Extended Primitive] pada [command panel], lalu pilih button Capsule.

Gambar 13.39. Membuat Capsule

13.11.20 Membuat L-Ext

Pilih [create] >> [Geometry] >> [Extended Primitive] pada [command panel], lalu pilih button L-Ext.

Gambar 13.40. Membuat L-Ext

13.11.21 Membuat U-Ext

Pilih [create] >> [Geometry] >> [Extended Primitive] pada [command panel], lalu pilih button U-Ext.

Gambar 13.41. Membuat U-Ext

13.11.22 Membuat Hose

Pilih [create] >> [Geometry] >> [Extended Primitive] pada [command panel], lalu pilih button Hose.

Gambar 13.42. Membuat Hose

Pustaka

Pohan, I.Husni,Pemrograman Web dengan HTML, Informatika Bandung, 2001
www.infokomputer.com
www.w3schools.com
Achmad Basuki, “Web Application Project: e-Commerce”, Modul International Training Center, Politeknik Elektronika Negeri Surabaya, 2005.
Christoper Jones, Alisaon Holloway, “The Underground PHP and Oracel® Manual”, e-Book Release 1.2, Oracle, 2006.
Firman Arifin, Linda, “PHP Programming”, Modul Third Country Training, Politeknik Elekronika Negeri Surabaya, 2005.
Firman Arifin, “Desain Homepage: HTML (Notepad Editor)”, Modul Training SAC, Politeknik Elektronika Negeri Surabaya, 2005.
M. Syafii, “Panduan Membuat Aplikasi Database Dengan PHP 5, MySQL, PostgreSQL, Oracle”, Penerbit Andi Yogyakarta, 2005
Achmad Basuki, Modul Training Design Garfik 3D Menggunakan 3d Studio Max, Bagian Kerjasama CC PENS-ITS

Wawarankomputer

Senin, 06 April 2015

mempercantik halaman web

Tag –tag tabel HTML

Tag Frameset :

· Tag <frameset> mendefinisikan bagaimana membagi window ke dalam fram-frame.

· Setiap frameset mendefinisikan sebuah set baris (row) atau kolom (colom)

· Setiap nilai rows/column menunjukkan jumlah tampilan area setiap row/colomn.

Tag Frame

Tag – tag Frame

Tag – tag Form

Tidak ada komentar :

Posting Komentar