MODUL Pelatihan Web

HTML-Frontpage-Photoshop
(Beginner)
AL AZHAR COMPUTER CLUB

Oleh : Achmad Fachrie

Al Azhar Computer Club
Modul Pelatihan Web Universitas Al Azhar Indonesia

-1-

DAFTAR ISI Kata Pengantar ……………………………..……………………………..……………………………………. 1 Bab 1 Pengenalan Internet ……………………………………………………………………………………..3 1.1 Sejarah Internet ……………………………………………………………………………………..3 1.2 Fasilitas Internet ……………………………………………………………………………………. 4 1.3 Syarat Terhubung Internet ………………………………………………………………………... 5 Bab 2 Pengenalan TCP/IP …………………………………………………………………………………...... 5 2.1 Istilah-istilah didalam Internet Protocol ……………………………………………………………6 Bab 3 Pengenalan Web ………………………………………..………………………………………………. 7 3.1 Aplikasi Web ……………………………..……………………………..……………………………7 3.2 Teknologi Web ……………………………..……………………………..………………………....8 3.2.1 Teknologi Web Pada Sisi Klien ……………………………..………………………… 8 3.2.2 Teknologi web Pada Sisi Server ……………………………..……………………….. 9 Bab 4 Pengenalan HTML …………………………..……………………………..……………………………10 4.1 Struktur HTML .…………………………..……………………………..…………………………. 10 4.2 Dasar Penyusunan Tag HTML ……………………………..……………………………………. 11 4.3 Menggunakan Tag <body> ……………………………..……………………………..…………. 12 4.4 Penyusunan komentar ……………………………..……………………………………………... 12 4.5 Menggunakan Tag <br> ……………………………..……………………………..…………….. 12 4.6 Menggunakan Tag <p> ……………………………..……………………………………………. 12 4.7 Menggunakan Tag judul atau Heading ……………………………..………………………….. 13 4.8 Membuat Garis Horizontal ……………………………..………………………………………… 14 4.9 Menggunakan Tag <center> ……………………………..……………………………………… 14 Bab 5 Mengatur Teks ……………………………..……………………………..……………………………. 15 5.1 Mengatur Teks Secara Fisik ……………………………..………………………………………. 15 5.2 Mengatur Teks Secara Logikal ……………………………..…………………………………… 15 5.3 Mengatur Huruf ……………………………..……………………………..……………………… 15 5.4 Menampilkan Daftar Item ……………………………..……………………………..…………… 16 5.5 Menambahkan Gambar ……………………………..……………………………..…………….. 18 5.6 Menggunakan Table ……………………………..……………………………..………………… 18 5.6.1 Menggabungkan Sel ……………………………..…………………………………… 19 5.7 Membuat Link ……………………………..……………………………..………………………… 21 5.8 Mengenal Form ……………………………..……………………………..………………………. 21 Bab 6 Pengenalan Frontpage ……………………………..……………………………..………………….. 23 6.1 Toolbar ……………………………..……………………………..……………………………….. 23 6.2 Jendela Kerja ……………………………..……………………………..………………………… 23 6.3 HTML Editor ……………………………..……………………………..………………………….. 24 Bab 7 Image Editor dengan Photoshop ……………………………..…………………………………….. 25 7.1 Mengenal Photoshop ……………………………..……………………………..………………... 25 7.8 Membuat Sudut Melengkung ……………………………..……………………………………… 25

Modul Pelatihan Web Universitas Al Azhar Indonesia

-2-

Kata Pengantar Pertama-tama penyusun mengucapkan puji syukur alhamdulillah atas berkat Rahmat Allah Swt. Karena berkat rahmatNyalah penyusun bisa mengerjakan modul ini. Modul ini dibuat sebagai bahan pelatihan web yang dikembangkan dalam lingkungan Kampus. Semoga modul ini dapat memberikan kontribusi kepada teman-teman yang berada dilingkungan kampus Universitas Al Azhar Indonesia dalam bidang Teknologi Informasi. Penyusun juga mengucapkan terima kasih kepada teman-teman yang telah memberikan kesempatan, mendukung baik secara materiil atau moril sehingga modul ini dapat selesai. Teknologi Informasi adalah bidang yang paling cepat mengalami perkembangan. Teknologi yang ada sekarang sebagian besar berkembang dengan perkembangan teknologi informasi. Web yang merupakan hanya bagian kecil dari perkembangan teknologi informasi. Modul ini dibuat dengan tujuan mempermudah dalam memahami hal-hal teknis, dengan bahasa tidak ‘teknologis’, sederhana dan ringan. Dan juga terdapat catatan-catatan kecil yang insya Allah berguna memberikan pemahaman yang lebih mendalam. Akhir kata, penyusunan modul ini adalah bagian dari proses yang menuju perbaikan. Oleh karena itu, penyusun menyadari bahwa modul ini belumlah sempurna tanpa masukkan, saran, tanggapan dan kritik dari teman-teman sekalian. Jadi, mohon masukkan dari teman-teman sekalian untuk dapat membuat hasil yang lebih baik.

Penyusun Achmad Fachrie Mahasiswa Teknik Informatika 2002 Universitas Al Azhar Indonesia

Modul Pelatihan Web Universitas Al Azhar Indonesia

-3-

BAB 1 Pengenalan Internet Interconnected Network - atau yang lebih populer dengan sebutan Internet - adalah sebuah sistem komunikasi global yang menghubungkan komputer-komputer dan jaringan-jaringan komputer di seluruh dunia. Atau dengan kata lain, internet merupakan kumpulan jaringan [network] komputer yang saling berkomunikasi antara jaringan komputer yang satu dengan yang lain. Jaringan komputer disini sendiri berarti kumpulan dua komputer atau lebih yang saling terhubung. Setiap komputer dan jaringan terhubung secara langsung maupun tidak langsung - ke beberapa jalur utama yang disebut internet backbone dan dibedakan satu dengan yang lainnya menggunakan unique name yang biasa disebut dengan alamat IP 32 bit. Contoh: 202.155.4.230 . Untuk dapat melakukan hubungan komunikasi antar komputer tersebut membutuhkan yang namanya aturan atau protokol. Komputer dan jaringan dengan berbagai platform yang mempunyai perbedaan dan ciri khas masing-masing (Unix, Linux, Windows, Mac, dll) bertukar informasi dengan sebuah protokol standar yang dikenal dengan nama TCP/IP (Transmission Control Protocol/Internet Protocol). TCP/IP tersusun atas 4 layer (network access, internet, host-to-host transport, dan application) yang masing-masing memiliki protokolnya sendiri-sendiri. 1.1 Sejarah Internet Pada awalnya internet merupakan jaringan komputer yang dibentuk oleh Departemen Pertahanan Amerika di awal tahun 60-an, melalui proyek yang dinamakan ARPA [Advanced Research Project Agency] yang disebut ARPANET, dimana mereka mendemonstrasikan komunikasi yang dilakukan dengan menggunakan software dan hardware komputer dalam jarak yang sangat jauh. Proyek ARPANET ini merancang bentuk jaringan, kehandalan, seberapa besar informasi dapat dipindahkan, dan akhirnya semua itu menjadi bentuk dasar dan menjadi awal dari pengembangan suatu protokol selanjutnya menjadi TCP/IP. ARPANET dibentuk secara khusus oleh empat universitas besar di Amerika, yaitu : Stanford Research University, University of California at Santa Barbara, University of California at Los Angeles, dan University of Utah, dimana mereka membentuk satu jaringan terpadu di tahun 1969, dan secara umum ARPANET diperkenalkan pada tahun 1972. Pada awal tahun 80-an, seluruh jaringan yang tercakup dalam proyek ARPANET di ubah menjadi TCP/IP, karena proyeknya sendiri sudah dihentikan, dan jaringan ARPANET inilah yang merupakan koneksi utama [bakcbone] dari internet. Proyek percobaan tersebut ahirnya dilanjutkan dan dibiayai oleh NSF [National Science Foundation] suatu lembaga ilmu pengetahuan seperti LIPI di Indonesia. NSF lalu mengubah nama jaringan ARPANET menjadi NSFNET dimana bakcbone-nya memiliki kecepatan tinggi dan dihubungkan ke komputer-komputer yang ada di universitas dan lembaga penelitian yang tersebar di Amerika. Dan pada awal tahun 1990 pemerintah Amerika Serikat memberikan izin ke arah komersial. Jelaslah pada awalnya Internet merupakan media yang digunakan untuk bertukar informasi yang akhirnya pada saat ini menjadi media yang komersial dan digunakan telah mencapai 250 juta orang lebih diseluruh didunia. 1.2 Fasilitas Internet Saat ini jika orang bebicara tentang internet, yang mereka maksud adalah bagian dari Internet yang disebut World Wide Web [WWW]. Pada kenyataannya internet mempunyai banyak bagian yang lain, yaitu :  World Wide Web disingkat menjadi web merupakan bagian yang paling menarik dari internet. Melalui web kita bisa mengakses informasi-informasi yang tidak hanyaberupa teks, tapi juga berupa gambar, suara, film dan lain-lain. Untuk mengakses web ini dibutuhkan aplikasi untuk dapat menampilkannya yang dinamakan browser. Saat ini telah banyak berbagai macam browser diantaranya adalah Internet Explorer, Opera, Netscape, Mozilla dan lain sebagainya.  Electronic Mail disingkat menjadi e-mail adalah surat elektronik yang dikirimkan melalui internet. Dengan fasilitas ini kita bisa mengirim atau menerima e-mail dari pengirim yang berada dimana pun juga selama pengirim tersebut terhubung dengan internet.  Telnet merupakan aplikasi remote login internet. Telnet digunakan untuk login ke komputer lain di internet dan mengakses pelayanan umum yang terdapat didalamnya. Telnet memungkinkan pengguna untuk diduduk didepan komputernya yang memiliki akses internet dan dapat mengakses komputer lain yang juga terhubung internet. Dengan telnet selanjutnya kita dapat melakukan aksi mengontrol langsung pada komputer yang dituju melalui perintah / command tertentu. Modul Pelatihan Web Universitas Al Azhar Indonesia

-4-

File Transfer Protocol disingkat dengan nama FTP. FTP merupakan aplikasi yang digunakan untuk men-transfer file dari komputer satu ke komputer lain. Proses untuk mengambil file yang berada dikomputer lain dinamakan dengan proses download, sedangkan proses untuk mengirim file dari komputer yang digunakan ke komputer lain dinamakan dengan upload.

Apapun fasilitas yang digunakan, semuanya itu merupakan bagian dari internet. Melalui fasilitas-fasilitas internet itulah kita dapat melakukan berbagai macam komunikasi dan mendapatkan informasi. 1.3 Syarat Terhubung Internet Untuk dapat terhubung dengan internet tentunya kita harus memiliki komputer. Tapi untuk mengakses internet bukanlah sekedar komputer saja, melainkan kita juga membutuhkan perangkat-perangkat lain yang mendukung koneksi internet : Modem. Modem adalah perangkat hardware tambahan untuk komputer. Pada dasarnya modem merupakan alat yang digunakan untuk melakukan komunikasi antar komputer melalui kabel telepon. Kata modem itu sendiri berasal dari kata modulasi demodulasi yang berarti proses perubahan sinyal analog menjadi sinyal digital begitu juga sebaliknya. Internet Service Provider. Untuk bisa bergabung dengan internet, anda harus mempunyai akses dengan cara berlangganan ke penyedia jasa internet atau yang lebih sering disebut dengan Internet Service Provider [ISP]. Internet Service Provider adalah perusahaan yang menawarkan pelayanan jasa untuk dapat terhubung dengan internet. Untuk mengakses anda cukup menghubungi pihak ISP melalui komputer dan modem selanjutnya ISP-lah yang akan mengurus hal-hal yang berkaitan untuk dapat terhubung dengan internet.

Modul Pelatihan Web Universitas Al Azhar Indonesia

-5-

BAB 2 Pengenalan TCP/IP Mengapa kita perlu belajar TCP/IP?. Bagi yang ingin bergelut dalam dunia jaringan web maka belajar mengenai TCP/IP merupakan hal yang harus dipelajari. Seperti yang telah dibahas sebelumnya, internet merupakan kumpulan jaringan komputer yang saling berinteraksi antara yang satu dengan yang lain. Bila dua komputer ingin melakukan komunikasi, keduanya tentu saja harus menggunakan bahasa/aturan yang sama. Aturan-aturan inilah yang disebut protokol. Dalam setiap komunikasi yang dilakukan oleh web sebenarnya itu menggunakan protokol tersendiri tergantung aplikasi yang digunakan. Misalnya untuk mengirim mail digunakan protokol SMTP, berhubungan dengan WWW menggunakan HTTP, dan sebagainya. Jadi protokol sebenarnya merupakan aturan dalam melakukan komunikasi dan bukanlah semacam hardware. Dalam hal ini, TCP/IP (Transmission Control Protocol/Internet Protocol) merupakan protokol yang bersifat open networking. Maksudnya semua penjelasan teknis tentang protokol tersebut secara terbuka diumumkan, karena ada pula mekanisme jaringan yang menyembunyikan detail dari systemnya. Hal ini yang membuat TCP/IP menjadi terkenal. Adapun keuntungan menggunakan TCP/IP adalah kemudahannya, karena memungkinkan hubungan antara berbagai tipe sistem operasi dan berbagai jenis komputer (Platform). TCP/IP bukanlah protokol tunggal tapi merupakan sekumpulan protokol sehingga lebih tepat disebut sebagai keluarga TCP/IP. Setiap protokol pada TCP/IP memiliki tugas tertentu yang berbeda. semua porotokol tersebut menggunakan protokol primer untuk mengirimkan paket data. Protokol primer tersebut adalah TCP dan IP.

Gambar 1 TCP/IP Properties pada windows 2.1 Istilah-istilah didalam Internet Protocol Ada beberapa istilah yang sering ditemukan didalam pembicaraan mengenai TCP/IP, yaitu diantaranya :

Host atau end-system, Istilah yang digunakan untuk menunjuk sebuah komputer yang memungkinkan penggunanya terhubung ke Internet. Host biasanya berupa individual workstation atau personal computers (PC) dimana tugas dari Host ini biasanya adalah menjalankan applikasi dan program software server yang berfungsi sebagai user dan pelaksana pelayanan jaringan komunikasi. Modul Pelatihan Web Universitas Al Azhar Indonesia

-6-

   

Router, adalah suatu devais yang digunakan sebagai penghubung antara dua network atau lebih. Node, adalah istilah yang diterapkan untuk router dan host. IP (internet protocol) yang berperan dalam pentransmisian paket data dari node ke node. IP mendahului setiap paket data berdasarkan 4 byte (untuk versi IPv4) atau 6 byte (untuk versi Ipv6) alamat tujuan (nomor IP). TCP (transmission transfer protocol) berperan didalam memperbaiki pengiriman data yang benar dari suatu klien ke server. Data dapat hilang di tengah-tengah jaringan. TCP dapat mendeteksi error atau data yang hilang dan kemudian melakukan transmisi ulang sampai data diterima dengan benar dan lengkap. IP address adalah alamat yang diberikan pada jaringan komputer dan peralatan jaringan yang menggunakan protokol TCP/IP. IP address terdiri atas 32 bit angka biner yang dapat dituliskan sebagai empat kelompok angka desimal yang dipisahkan oleh tanda titik seperti 192.168.0.1. 192 Network ID 168 0 Tabel 1. Contoh IP Address Host ID 1

IP address terdiri atas dua bagian yaitu network ID dan host ID, dimana network ID menentukan alamat jaringan komputer, sedangkan host ID menentukan alamat host (komputer, router, dan lain-lain. Oleh sebab itu IP address memberikan alamat lengkap suatu host beserta alamat jaringan di mana host itu berada.

Modul Pelatihan Web Universitas Al Azhar Indonesia

-7-

BAB 3 Pengenalan Web World Wide Web [WWW] atau biasa disebut dengan Web, seperti yang telah dituliskan sebelumnya merupakan aplikasi internet yang berkembang dengan pesat. Informasi Web didistribusikan melalui pendekatan hypertext, yang memungkinkan suatu teks pendek menjadi acuan untuk membuka dokumen yang lain. Dengan pendekatan hypertext ini seseorang dapat memperoleh informasi dengan meloncat dari dokumen yang satu ke dokumen yang lain. Tidak harus secara berurutan. Seperti namanya Web = jaring laba-laba, maka akses web merupakan tidak terbatas hanya pada satu area tapi dia menyebar ke seluruh penjuru dunia tentunya dengan memperhatikan kebutuhan untuk dapat mengaplikasikannya. Web tidak hanya terbatas pada mempublikasikan suatu lembaga tertentu, tapi juga dapat digunakan oleh pihak lain seperti mengiklankan suatu produk atau menjalankan bisnis lewat web. 3.1 Aplikasi Web Pada awalnya aplikasi web dibangun hanya dengan menggunakan bahasa yang dikenal dengan HTML [Hyper Text Markup Language] dan protokol yang digunakan berupa HTTP [Hyper Text Transfer Protocol]. HTML merupakan bahasa yang digunakan pada web hanya bersifat statis tanpa memiliki kedinamisan dalam menjalankan suatu proses. Tapi seiring perkembangan teknologi, maka web pun mengalami perkembangan dalam menggunakan bahasa yang ada. Lahirlah bahasa-bahasa lain yang merupakan untuk memperluas kemampuan HTML. Bahasa itu antara lain, ASP, PHP, JSP, Coldfusion dan lain-lain.

Catatan : World Wide Web [WWW] merupakan bagian dari internet yang telah menjadi fenomena tersendiri dalam dunia komunikasi dan informasi. WWW bekerja berdasarkan tiga mekanisme berikut : Protokol : suatu kumpulan aturan yang standar mengatur komputer untuk dapat saling berkomunikasi, Hyper Text Transfer Protocol [HTTP] merupakan protokol yang digunakan pada WWW, sehingga komputer yang satu dengan yang lain dapat terhubung dan saling berkomunikasi. Address : setelah mengetahui protokol yang digunakan maka selanjutnya menggunakan alamat / address daripada suatu web dan address ini dinamakan Url [Uniform Resource Locator]. Url merupakan standar dasar pengalamatan pada web. HTML : HTML ini digunakan untuk membangun web, sehingga data atau informasi dapat diakses melalui web.

Jadi dapat dikatakan dengan perkembangan bahasa yang dimiliki web, aplikasi web itu sendiri dapat dibagi atas :  Web Statis  Web Dinamis Yang dikatakan dengan web statis merupakan web yang dikembangkan dengan hanya berdasarkan bahasa HTML. Kestatisan ini merupakan kelemahan dalam web, karena adanya keharusan untuk terus memelihara, menjaga, mengganti program secara terus-menerus untuk mengikuti bila perubahan yang terjadi. Tetapi kemudian kelemahan ini diatas dengan aplikasi web dinamis. Pengertian web dinamis ini dapat dikatakan web yang memiliki bukan hanya sekedar menampilkan suatu informasi, tapi web tersebut menunjukkan suatu proses, suatu keinteraktifan antara pengguna [user] yang menggunakan aplikasi web tersebut. Dalam penerapan aplikasi web ini terdapat suatu arsitektur tersendiri Server

Modul Pelatihan Web Universitas Al Azhar Indonesia

-8-

Web Server [Apache, IIS, Xitami, dll]

Middleware [ASP, PHP, JSP, dll]

{MySQL, Oracle, Access dll]

Klien Browser [Internet explorer, Netscape, Opera, Mozilla, dll]

Gambar 2 Seperti yang ditunjukkan pada gambar 2, secara internal, web server berkomunikasi dengan middleware dan middleware inilah yang berhubungan dengan basis data [database]. Pengertian web server disini adalah layaknya server [pelayan] yang melayani request [permintaan] client [klien] terhadap atau yang berkaitan dengan web. Bagian dari perangkat lunak Web server itu dapat berupa Apache, IIS [Internet Information Server], Xitami dan lain sebagainya. Middleware merupakan perangkat lunak yang bekerja sama dengan web server dan berfungsi menerjemahkan kode-kode tertentu, menjalankan kode-kode tersebut, dan memungkinkan berinteraksi dengan basis data. Middleware ini pula dapat dikatakan sebagai bahasa server-side, yaitu bahasa yang berjalan disisi server. Tentang ini akan dibahas pada sub-bab berikutnya. Catatan : Bagaimana bagian-bagian Web dapat bekerja? Web page [halaman web] merupakan bagian atau dokumen web yang berisi dan menyimpan Informasi. Web server merupakan bagian web yang berisi kumpulan file web page utama [main] tersimpan dalam suatu komputer. Web client merupakan bagian web yang membaca daripada kumpulan web page yang berasal dari web server. Web browser merupakan program web yang berada pada web client yang digunakan untuk melihat [view] suatu halaman web.

3.2 Teknologi Web Seperti yang telah dibahas sebelumnya dalam pembentukan web yang dinamis membutuhkan teknologi web lebih sekedar dari bahasa HTML. Teknologi web ini dalam pengembangan web dinamis dapat terbagi atas dua :

 

Teknolgi yang berjalan pada sisi klien [client-side technology]. Teknologi yang berjalan pada sisi server [server-side technology].

3.2.1 Teknologi Web pada Sisi Klien Teknologi web pada sisi klien merupakan teknologi web perluasan dari sekedar kode-kode HTML berupa suatu bahasa [script] tersendiri dan dalam menjalankan kode-kode ini yang dikembangkan bagian dari HTML merupakan tugas klien. Klienlah yang bertanggung jawab dalam melakukan proses terhadap seluruh kode yang diterima. Modul Pelatihan Web Universitas Al Azhar Indonesia

-9-

Kelemahan teknologi web pada sisi klien ini adalah terdapat kemungkinan bahwa kode-kode yang disisipkan pada HTML ini tidak didukung pada fitur web browser pada sisi client yang digunaklan. Sehingga kode-kode tersebut tidak akan berfungsi. Selain itu juga terdapat kelemahan bila sang programmer tidak cermat menggunakan kode-kode tersebut dapat menjadi bumerang bagi keamanan [security] web itu sendiri. Sedangkan kelebihan teknologi web pada sisi klien ini, dapat dikatakan merupakan teknologi web yang cenderung lebih membuat web tersebut menjadi lebih hidup dalam segi animasi. Yang termasuk dalam teknologi web pada sisi klien adalah :  Kontrol ActiveX  Java Applet  Javascript  Vbscript Selain itu terdapat salah satu script pada sisi klien yang juga perluasan dari HTML yaitu CSS [Cascanding Style Sheet] dan dikenal juga sebagai DHTML [Dynamic HTML]. Script ini digunakan untuk memformat suatu halaman web atau kumpulan halaman web dengan lebih mudah, ringkas dengan sekali menulis definisi, inisialisasi dapat ditulis secara terpisah dari HTML atau menyatu dengan HTML. 3.2.2 Teknologi Web pada Sisi Server Teknologi web pada sisi server merupakan pengembangan kode-kode suatu bahasa yang berjalan, diproses pada server. Dengan menggunakan teknologi web pada sisi server maka terdapat kelebihan tersendiri. Penggunaan bahasa teknologi pada sisi server tidaklah tergantung pada browser yang digunakan tidak seperti teknologi pada sisi klien. Bahasa pada sisi server akan selalu berjalan. Selain itu, teknologi pada sisi server ini juga mencegah pembacaan kode yang digunakan dalam proses yang dilakukan. Bebapa contoh teknologi yang berjalan pada sisi server adalah :  Common Gateway Interface [CGI]  Propietary web Server API  Active Server Pages [ASP]  Java Servlets dan Java Server Pages [JSP]  PHP Common Gateway Interface [CGI] Pada awalnya, teknologi umum yang digunakan untuk menyajikan data yang bersifat dinamis di lingkungan web adalah CGI. Pada prinsipnya CGI dapat ditulis dengan menggunakan bahasa apa saja. Namun, yang paling populer adalah Perl. Kelemahan CGI terletak pada penciptaan proses sebanyak dari klien. Jika terjadi jumlah permintaan yang sangat banyak maka akan cenderung melumpuhkan server. Java Servlets dan Java Server Pages [JSP] Baik Java Servlets maupun Java Server Pages [JSP] menggunakan bahasa yang dinamakan Java. Pemrograman dengan menggunakan Java mempunyai kelebihan di sisi keamanan yang cukuup kuat dibandingkan dengan bahasa pemrograman lain. PHP PHP merupakan bahasa pemrograman web yang berjalan pada sisi server dan merupakan bahasa yang awalnya sangat populer di lingkungan Linux. Tapi saat ini PHP digunakan pada berbagai jenis platform.

Modul Pelatihan Web Universitas Al Azhar Indonesia

- 10 -

BAB 4 Pengenalan HTML Dalam pengembangan web, pertama yang harus dikuasai adalah mengerti akan bahasa (script) web yaitu HTML (Hyper Text Markup Language). HTML adalah script web yang statis dalam artian maksudnya kaku, tidak dinamis dan tidak interaktif. Bila kita ingin membuat web kita menjadi dinamis dan interaktif, kita memerlukan bahasa (script) yang lain, dengan tetap memahami bahwa HTML merupakan pondasi/dasar web. HTML ini bisa dibuat menggunakan text editor yang sederhana seperti notepad, wordpad atau text editor lain. Karena pada intinya dalam membuat file HTML, kode-kode yang telah kita buat berdasarkan struktur HTML, selanjutnya adalah kita perlu men-save file yang ada ke dalam bentuk format file .(dot)html atau .(dot)htm. Dengan begitu script HTML dapat dibuat di text editor dimana saja. Tapi program atau software yang dibuat khusus untuk membuat web / HTML ada berbagai jenis. Nah, yang paling sering digunakan misalnya : Microsoft Frontpage, Macromedia Dreamweaver dan lain-lain. Yang kedua itu merupakan hasil dari produsen vendor IT yang terkemuka. Sebenarnya masih banyak lagi yang lain dengan menawarkan fasilitas atau fungsi yang berbeda-beda. Program atau software yang dibuat khusus untuk membuat web tersebut memang memberikan kemudahan dibanding kita menggunakan text editor biasa dengan konsekuensi bahwa kita harus mengetik kode-kode yang ada untuk menghasilkan bentuk format suatu tampilan yang diinginkan. Sementara dengan menggunakan program atau software tersebut diberi kemudahan tinggal klik sana klik sini. Dalam HTML kita akan mengenal bentuk “<” atau “>”. Bentuk ini dalam HTML disebut tag. Dan dalam tag itu ada yang fungsinya sebagai pembuka <……> dan penutup </…..>. Tag penutup dalam HTML ditandai dengan tanda garis miring “/” atau yang disebut slash. Pada prinsipnya dalam HTML, setiap ada perintah pembuka akan ada perintah penutup. 4.1 Struktur HTML Dalam penyusunan HTML ada struktur yang perlu diperhatikan, contohnya adalah seperti dibawah ini : <html> <head> <title>disini judul halaman</title> </head> <body>disini isi halaman</body> </html>

Ya, seperti itulah format standar dalam penyusunan HTML. Dalam penyusunan HTML tidak mengenal case sensitive (membedakan antara huruf kapital dan yang bukan). Jadi bisa digunakan <HTML> atau <html>. Dan kita bisa melakukan format yang minimal seperti :

<html> disini isi halaman </html>

Tapi sebenarnya format ini tidak disarankan dalam pembuatan web, karena fungsinya menjadi berkurang dan bagi programmer akan kesulitan membuat setiap definisi yang diperlukan HTML. Sekarang mari kita bahas satu persatu struktur dalam penyusunan HTML

<html> dan </html> Tag HTML ini merupakan inti sebagai sebuah tanda yang menyatakan bahwa script ini adalah script HTML dan isi yang berada antara tag pembuka dan tag penutup html merupakan struktur penyusunan HTML selanjutnya. Tag penutup HTML </html> harus selalu diakhir dari suatu script HTML. Bagian yang terdapat dalam <html> dan </html> yang umumnya di antara tag HTML ini terdapat dua bagian, yaitu : Modul Pelatihan Web Universitas Al Azhar Indonesia

- 11 -

Kepala, dan badan <head> dan </head> Tag HEAD merupakan tanda suatu header suatu HTML. Tag HEAD biasanya berisi tag TITLE <title> dan tag meta <meta> yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan lainyan pada tag META. <title> dan </title> Tag TITLE merupakan tag yang menampilkan judul suatu halaman web pada browser. Tag TITLE ini berguna selain sebagai penamaan suatu halaman juga sebagai keyword (kata kunci) untuk pencarian (searching). <body> dan </body> Seperti yang telah dibahas sebelumnya tag BODY merupakan bagian badan dari HTML Tag BODY, yang merupakan isi dari suatu HTML. Tag BODY ini di dalam perintahnya memiliki banyak fungsi, seperti yang akan dijelaskan pembahasan berikut.

4.2 Dasar Penyusunan Tag HTML Seperti yang telah dibahas sebelumnya bahwa dalam tag HTML terdapat struktur penyusunan tersendiri. Nama tag dapat ditulis dengan < dan > selain itu terdapat tanda “/” atau slash yang merupakan penutup dari suatu tag HTML. Tapi tidak seluruh tag HTML perlu penutup. Selain itu dalam penyusunan tag HTML ini terdapat suatu struktur seperti : <ELEMENT ATTRIBUTE = value > ELEMENT = nama tag ATTRIBUTE = atribut dari tag VALUE = nilai dari atribut Contoh : <body bgcolor=green> BODY merupakan element, BGCOLOR (background color) merupakan atribut, dan memiliki nilai (value) Green .

Catatan : Hindari penyusunan pasangan tag yang berpotongan dengan tag lain (nested tag). Jika anda menuliskan pasangan tag, pastikan bahwa Anda menuliskan dengan benar. Pasangan tag yang berpotongan dengan pasangan tag yang lain perlu dihindari, karena dapat memberikan hasil yang tidak benar.

Catatan : Dalam penyusunan isi value bisa menggunakan tanda “…” atau tidak. Tanda petik ini akan berguna bila isi suatu value menggunakan dua kata atau lebih. Dengan tanda petik ini akan memberi tanda bahwa ini adalah isi suatu value. Karena bila tidak menggunakan tanda petik, maka isi suatu value itu tidak akan terbaca. Contoh dalam element FONT : <font face=”comic sans ms”>

4.3 Menggunakan Tag <body>

Modul Pelatihan Web Universitas Al Azhar Indonesia

- 12 -

Selain yang diperlihatkan sebelumnya, dalam element BODY selain atribut BGCOLOR, berikut ini atribut lainnya : Atribut BGCOLOR BACKGROUND TOPMARGIN LEFTMARGIN TEXT LINK ALINK VLINK Fungsi Menentukan warna background suatu halaman web Menentukan gambar/image yang digunakan sebagai background halaman web Menentukan letak vertikal suatu objek pada halaman web Menentukan letak horizontal suatu objek pada halaman web Menentukan warna teks yang digunakan secara umum pada halaman web Menentukan warna teks yang berfungsi sebagai link Menentukan warna teks link ketika di klik Menentukan warna teks link ketika selesai/sudah di klik Value Berupa kode warna hexadesimal seperti #RRGGBB Berupa path / letak nama file gambar Berupa angka semakin kecil semakin berada diatas halaman Berupa angka semakin kecil semakin berada di kiri halaman Berupa kode warna hexadesimal seperti #RRGGBB Berupa kode warna hexadesimal seperti #RRGGBB Berupa kode warna hexadesimal seperti #RRGGBB Berupa kode warna hexadesimal seperti #RRGGBB

4.4 Penyusunan Komentar Komentar merupakan bagian yang selalu dituliskan dalam membuat kode program untuk memudahkan programmer untuk memeriksa kembali program yang diperlukan. Dalam HTML komentar merupakan keterangan yang berguna bagi pembaca kode, bahkan bagi yang awam sekalipun. Sebuah komentar diawali dengan <!-- dan diakhiri dengan -- >. Di dalam kedua tanda tersebut, Anda bisa memberikan keterangan apa saja dan bahkan bisa mencakup beberapa baris. Contoh <!-- ini komentar saya dibuat oleh saya -- > Komentar ini dapat dituliskan dimana saja dibagian HTML sesuai dengan keterangan yang ingin Anda berikan. Dan tentunya komentar ini tidak akan keluar pada bagian preview suatu halaman web. 4.5 Menggunakan Tag <br> Break = <br> Dalam HTML untuk berpindah baris baru atau pindah baris dengan menggunakan tag <br>. Tag <br> ini dalam penggunaannya tidak perlu menggunakan tag penutup. Dan penyusunannya dituliskan setelah objek maka objek setelah tag <br> akan berada pada baris baru. 4.6 Menggunakan Tag <p> Paragraph = <p> Paragraph dalam HTML memiliki tag <p>. Tag <p> ini berfungsi sebagai membuat paragraph baru atau dua baris baru. Dalam penggunaannya tag <p> memiliki atribut berupa perataan objek yaitu alignment/align dan untuk menentukan bagian dari paragraph yang melakukan perataan maka menggunakan tag sebagai penutupnya dengan tag penutup </p>. Atribut Paragraph Fungsi Value

Modul Pelatihan Web Universitas Al Azhar Indonesia

- 13 -

Align

Menentukan letak isi ke sisi kanan web Menentukan letak isi ke sisi kiri web Menentukan letak isi ke tengah web Menentukan rata sisi kanan dan sisi kiri

Right Left Center Justify

4.7 Menggunakan Tag Judul atau Heading Dalam HTML bila kita ingin menentukan judul dalam suatu dokumen maka kita perlu mengatur ukuran teks yang menjadi judul atau heading dokumen tersebut dan setiap judul mempunyai sub-judul dengan ukuran yang berbeda. Dalam HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks tersebut yang dijadikan sebagai judul dalam badan dokumen. Tag heading <H1> sampai <H6>, dan masing-masing tag heading memiliki tag penutup. Contoh :

Maka hasilnya akan berupa :

Selain tag heading ini juga memiliki atribut yang sama seperti yang dimiliki tag paragraph, yaitu berupa perataan atau alignment dengan value yang sama pula.

Modul Pelatihan Web Universitas Al Azhar Indonesia

- 14 -

4.8 Membuat Garis Horizontal Horizontal Rule = <hr> Dalam HTML terkadang untuk mempercantik tampilan suatu dokumen dengan menggunakan suatu garis horizontal. Dalam HTML garis ini dapat dibuat dengan mudah dengan menggunakan tag <hr>. Tag <hr> ini masih mempunyai atribut lain sesuai dengan fungsinya dan tag <hr> tidak perlu menggunakan tag penutup. Berikut ini atribut dan value dari tag <hr>. Atribut Tag <hr> Align Width Size Noshad Fungsi Menentukan letak garis pada HTML. Sisi kanan, tengah atau kiri Menentukan panjang garis Menentukan tebal garis Menentukan efek bayangan garis Value Right, Left atau center Berupa angka format pixel atau defaultnya 100% Berupa angka dalam format pixel Yes atau No

4.9 Menggunakan Tag <center> Untuk mengetengahkan suatu teks dengan cepat dalam HTML digunakan tag <center>, dan untuk membatasi teks tersebut tentunya dengan menggunakan tag penutup </center>. Tag <center> ini tidak memiliki atribut. Menggunakan Tag <Div> Tag divisi <div> sesuai dengan namanya memiliki fungsi untuk mengelompokkan suatu teks atau dokumen yang memiliki karakteristik yang sama. Tentunya dengan menggunakan tag penutup </div>. Tag <div> juga memiliki atribut yang sama layaknya dengan tag <p>.

Modul Pelatihan Web Universitas Al Azhar Indonesia

- 15 -

BAB 5 Mengatur Teks 5.1 Mengatur Teks Secara Fisik / Physical Formatting. Dalam HTML menyediakan untuk mengatur atau format ini digunakan secara fisik dalam mengubah format huruf, kata ataupun teks tersebut. Berikut ini tag-tag yang termasuk dalam Physical formatting :

5.2 Mengatur Teks Secara Logis / Logical Formatting Selain yang bersifat fisik seperti diatas untuk memformat huruf, juga ada tag yang bersifat logikal. Fungsinya tidak jauh berbeda dengan physical formatting. Tag <EM>….</EM> <STRONG>…</STRONG> <CITE>…</CITE> <DEL>…</DEL> <INS>…</INS> <CODE>…</CODE> <KBD>…</KBD> <SAMP>…</SAMP> <VAR>…</VAR> Description Text miring Text tebal Text kutipan Mencoret Text Underline text Text kode komputer [monoskrip] Text keyboard [monospasi] Text konstanta [monospasi] Text variabel atau ekspresi matematika

5.3 Mengatur Huruf / FONT Menformat suatu huruf merupakan hal yang paling sering dilakukan dalam membuat suatu dokumen. Dalam HTML mengatur format huruf ini dengan menggunakan tag <font>. FONT merupakan tag element yang berfungsi untuk format suatu huruf, kata, ataupun kalimat. Tag <font> ini memiliki banyak atribut, yaitu : Atribut Face Color Size Menentukan digunakan Fungsi jenis font yang Value Berupa jenis font. Seperti : verdana, arial, comic sans ms, dan lain-lain Berupa kode warna hexadesimal seperti #RRGGBB Berupa angka, (1-7) Modul Pelatihan Web Universitas Al Azhar Indonesia

Menentukan warna suatu font Menentukan ukuran suatu font

- 16 -

Catatan : Dalam menggunakan kode warna, yang dimaksud dengan #RRGGBB merupakan kode yang mewakilkan tiga warna primer yaitu R = Red, G = Green dan B = Blue.

5.4 Menampilkan Daftar Item / List List Item [LI] List Item merupakan perintah yang digunakan dalam HTML untuk membuat daftar atau mengelompokkan kata [list]. Dalam HTML ada tiga List ; yang berurutan [ordered list], yang tidak berurutan [unordered list] dan yang memberikan penjelasan [definition list]. List item ini mempunyai tag <li>…</li> yang menunjukkan bahwa yang diantara tag <li>…</li> adalah list. Yang menandakan bahwa ini adalah list yang berurutan atau yang bukan atau yang berupa definition list, dengan memberikan tag tambahan dalam lingkup tag <li>….</li>. Tag tambahan itulah yang akan mendefinisikan format tag list yang digunakan. Berikut ini tag tambahan yang digunakan pada lingkup tag <li>….</li>. 1. Unordered List <ul> Penyusunan tag pembuka <ul> ini diletakkan sebelum tag <li> dan tag penutup </ul> ini diletakan sesudah tag penutup </li>. Baiklah untuk lebih mudahnya, berikut in contoh penyusunannya.

Seperti yang sudah dijelaskan diatas unordered list merupakan list yang tidak berurutan, maksudnya list tersebut tidak diurutkan, tapi menggunakan simbol-simbol tertentu yang sudah memiliki format dalam HTML. Simbol-simbol itu sudah ditentukan dalam HTML mempunyai tiga format, yaitu; berbentuk kotak kecil [square], titik [disc] dan juga lingkaran [circle]. Format tersebut merupakan value yang di isi pada atribut HTML yaitu type. Atribut <ul> Type Fungsi Untuk membuat simbol list kotak Untuk membuat simbol list titik Untuk membuat simbol list lingkaran Value Square Disc circle

Contoh : <ul type=square>

2. Ordered List <ol>
Seperti yang telah dijelaskan sebelumnya diatas bahwa penyusunan ordered list sama dengan unordered list, yaitu melingkupi tag <li>…</li>. Hanya saja tagnya kini <ol>…..</ol>. Selain itu list yang menggunakan <ol> akan diurutkan berupa angka ataupun abjad yang tergantung pada atribut HTML yang di isi. Contoh :

Modul Pelatihan Web Universitas Al Azhar Indonesia

- 17 -

Maka hasil yang didapatkan.

Untuk lebih lengkapnya tentang atribut tag <ol> beserta valuenya dapat dilihat pada tabel di bawah ini : Atribut <ol> Type Fungsi Urutan dimulai dengan huruf romawi besar Urutan dimulai dengan huruf romawi kecil Urutan dimulai dengan huruf abjad besar Urutan dimulai dengan huruf abjad kecil Urutan dimulai pada angka / huruf Value I i A a Berupa angka Modul Pelatihan Web Universitas Al Azhar Indonesia

Start

- 18 -

ke berapa 5.5 Menambahkan Gambar Dalam HTML terdapat perintah untuk memasukkan gambar atau image ke dalam dokumen web selain seperti dalam tag <body> yang dapat menjadikan gambar sebagai latar belakang atau background suatu dokumen. Untuk menampilkan gambar, kita bisa menggunakan tag <img>. Tag ini mempunyai banyak atribut, tetapi untuk menampilkannya kita hanya harus menyertakan satu atribut, yaitu SRC. Adapun atribut-atribut lainnya bersifat operasional. Atribut <img> src align Align Align Border Height Width Alt 5.6 Menggunakan Tabel Agar berbagai informasi yang ingin disajikan melalui halaman website nantinya dapat tampil rapi dan menarik, maka informasi-informasi tersebut harus diletakan secara teratur. HTML menyediakan fungsi table yang digunakan untuk memberikan tempat bagi informasi yang ingin disajikan, baik teks maupun gambar. Berikut ini penjelasan table dan cell : Satu buah table Satu buah row Fungsi Menampilkan gambar dijadikan sumber yang Value Berupa nama gambar, bila perlu disertakan berikut direktori file gambar berada. Middle Top Bottom Berupa angka Berupa angka format pixel atau defaultnya 100% Berupa angka format pixel atau defaultnya 100% Berupa keterangan kalimat

Membuat objek ke tengah dalam dokumen web Membuat objek pada bagian atas dalam dokumen web Membuat objek ke pada bagian bawahdalam dokumen web Membuat objek gambar ditampilkan dengan menggunakan bingkai Mengatur tinggi gambar Mengatur lebar gambar Menyedikan teks alternatif ketika mouse digerakan pada gambar

Dua buah Cell Pada masing-masing Cell itulah kita meletakan teks atau gambar yang kita inginkan. Tag-tag berikut ini adalah contoh untuk penyusunan bentuk table tersebut.
<html> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="50%">Ini Cell Pertama</td> <td width="50%">Ini Cell Kedua</td> </tr> </table> </html>

Berdasarkan yang diperlihatkan pada penyusunan kode dalam membuat table. Tag <table> dan </table> menunjukkan adanya table yang dibuat. Selanjutnya dalam tag <table> tersebut terdapat tag <tr> dan </tr> yang menunjukkan merupakan tag baris. Setiap membuat baris digunakan <tr> dan sebelum membuat Modul Pelatihan Web Universitas Al Azhar Indonesia

- 19 -

baris yang baru diperlukan tag penutup </tr>. Selanjutnya dalam tag <tr> terdapat tag <td> yang menandakan tag yang membuat cell. Tag <td> ini selalu terdapat didalam tag <tr> dan </tr>. Dalam membuat table ini sangatlah diperhatikan setiap menutup dan membuat yang cell baru atau baris baru. Tag <table> ini memiliki banyak atribut, tapi yang perlu diketahui untuk menampilkan suatu table maka diperlukan suatu atribut agar table itu terlihat yaitu atribut BORDER. Dengan BORDER kita akan mengetahui table berbentuk. Selain itu masih banyak atribut table lainnya. Atribut <table> Border Bgcolor Bordercolor Height Width Cellpadding Cellspacing 5.6.1 Menggabungkan Sel HTML juga memungkinkan pembuatan table dengan sejumlah baris sel digabungkan, misalnya sebagai berikut : Fungsi Menampilkan table berupa garis pembentuk table Menentukan warna latar belakang table Menentukan warna garis pembentuka table Mengatur tinggi table Mengatur lebar table Mengatur jarak teks atau objek terhadap tepi kiri table Mengatur jarak bagian sel terhadap tepi dalam bingkai table Value Berupa angka atau bilangan Berupa kode warna hexadesimal seperti #RRGGBB Berupa kode warna hexadesimal seperti #RRGGBB Berupa angka format pixel atau defaultnya 100% Berupa angka format pixel atau defaultnya 100% Berupa angka atau bilangan Berupa angka atau bilangan

Teknik
Sastra

Informatika Elektro Industri Inggris Arab Jepang

Untuk membentuk sel yang berisi Teknik atau Sastra, yang menggabungkan beberapa baris sel, kita bsa menggunkan atribut ROWSPAN pada tag <td>. Contoh lengkap pembentukkan table :

<html> <head> <title>penggunaan colspan</title> </head> <body> <table border=”1”> <tr> <th colspan=”2”>Teknik</th> </tr> <tr> <td>Informatika</td><td>30</td> <td>Elektro</td><td>20</td> <td>Industri</td><td>10</td> </tr> <tr> <th colspan=”2”>Ssstra</th> </tr> <tr> <td>Inggris</td><td>25</td> <td>Arab</td><td>15</td> <td>Jepang</td><td>5</td> </tr> </table> </body> </html>

Modul Pelatihan Web Universitas Al Azhar Indonesia

- 20 -

Sedangkan untuk menggabungkan sel dalam satu baris, kia bisa menggunakan atribut COLSPAN pada tag <th> yang membuat tulisan yang pada sel gabungan akan bercetak tebal. Contoh : <html> <head> <title>penggunaan rowspan</title> </head> <body> <table border=”1”> <tr> <td rowspan=”3”>Teknik</td> <td>Informatika</td> <td>Elektro</td> <td>Industri</td> </tr> <tr> <td rowspan=”3”>Sastra</td> <td>Inggris</td> <td>Arab</td> <td>Jepang</td> </tr> </table> </body> </html> Atribut <tr> Bgcolor Atribut <td> Height Width Valign Valign Valign Fungsi Menentukan warna latar belakang table Fungsi Mengatur tinggi table Mengatur lebar table Membuat objek ke tengah dalam table Membuat objek ke atas dalam table Membuat objek ke bawah dalam table Value Berupa kode warna hexadesimal seperti #RRGGBB Value Berupa angka format pixel atau defaultnya 100% Berupa angka format pixel atau defaultnya 100% Middle Top Bottom Modul Pelatihan Web Universitas Al Azhar Indonesia

- 21 -

Align Align Align 5.7 Membuat Link

Membuat objek ke tengah dalam table Membuat objek pada bagian kiri dalam table Membuat objek ke pada bagian kanan dalam table

Center Left Right

Umumnya sebuah halaman web memiliki link atau hyperlink [penghubung] ke halaman-halaman web yang lain. Untuk membuat link ke dalam halaman lain HTML menyediakan tag <a>…</a> yang disebut tag anchor. Bentuk sederhana penggunaan tag <a> adalah : <a href=”URL”> Label teks</a> Dalam tag <a> terdapat atribut yang mendefinisikan halaman web yang dituju seperti yang diperlihatkan di atas yaitu berupa HREF. Value yang digunakan pada HREF ini dapat berupa halaman lain atau situs web lain. Atribut <a> Href Link Alink Vlink Target 5.8 Mengenal Form Form adalah salah satu fitur HTML yang digunakan untuk menerima input dari pengunjung website kita. Dengan Form kita dapat berinteraksi langsung dengan pengunjung, misalnya menerima komentar mereka, membuat pooling pertanyaan, membuat registrasi online, serta aneka kegunaan lainnya. Namun hingga saat ini HTML belumlah mendukung interface yang memungkinkan Form bekerja sesuai fungsinya. Form baru bisa bekerja jika kita menggabungkannya dengan bahasa pemrograman lainnya yang mendukung CGI (Common Gateway Interface). Bahasa pemrograman yang telah mendukung CGI misalnya : ASP, Perl, JAVA, Python, JSP, PHP, C/C++, dan Visual Basic. Untuk Workshop Web Design ini CGI yang akan diperkenalkan adalah PHP. Tag penyusunan form dimulai dengan <form> dan diakhiri dengan </form>. Contohnya : <form method=”post” action=”http://www.tridigi.net/proses_pesan.php”> <font face=”arial,verdana” size=”2”> <b>Masukan Nama Anda : <br><input type=”text” size=”25” name=”nama”> <br>Isi Pesan Anda :<br> <textarea rows="2" name="pesan" cols="20"></textarea> <br><input type=”submit” value=”Kirim !!!”><br> </b> </font> </form> Setelah di-save dan dilihat lewat browser, maka tampilan tag tersebut adalah seperti berikut ini : Fungsi Menunjukkan halaman lain atau situs yang dituju link tersebut Menentukan warna link Menentukan warna link yang aktif, yang sedang diklik, tapi halaman belum selesai dibuka Menetukan warna link halaman web yang telah dikunjungi Membuka window atau jendela yang baru Value Berupa direktori halaman atau situs web dengan menggunakan protokol Berupa kode warna hexadesimal seperti #RRGGBB Berupa kode warna hexadesimal seperti #RRGGBB Berupa kode warna hexadesimal seperti #RRGGBB _blank

Modul Pelatihan Web Universitas Al Azhar Indonesia

- 22 -

Berikut ini jenis-jenis Form berikut fungsi dan atributnya masing-masing. FORM text radio check box drop down GAMBAR KETERANGAN Untuk menerima input dengan terbatas Mendapatkan Single Option Mendapatkan Multiple Option Menu yang vertikal dipilih akan ditampilkan karakter

textarea button

Menerima banyak

input

dengan

karakter

lebih

Untuk mengirimkan hasil input

Modul Pelatihan Web Universitas Al Azhar Indonesia

- 23 -

BAB 6 Pengenalan FrontPage Pendahuluan Microsoft FrontPage adalah software yang dibuat untuk memudahkan penggunanya dalam merancang halaman website yang ingin dibangun. Salah satu kelebihan FrontPage adalah filosofi “WYIWYG” atau What You See Is What You Get. Hal ini dimungkinkan sebab FrontPage menyediakan interface berbasiskan GUI (Graphical User Interface) yang memungkinkan orang yang awam HTML sekalipun untuk membuat website sendiri. Secara general bagian-bagian FrontPage dapat digambarkan seperti berikut ini : ToolBar

Jendela Kerja

Normal Editor HTML Editor Preview

6.1 ToolBar ToolBar adalah kumpulan menu-menu yang disediakan FrontPage untuk memudahkan pembangunan website kita. Menu-menu yang tersedia diantaranya : Penyimpanan, Preview di Browser, Memasukkan Table, Printer, dan lainnya. Secara spesifik toolbar memiliki menu seperti berikut ini :
New Page Save File Print Page Paste Format Printer Insert Table

Hyperlink Open File Preview Browser Insert Image

6.2 Jendela Kerja Jendela Kerja adalah tempat kita merancang format tampilan website nantinya. Pada Jendela ini kita dapat melihat langsung serta memperkirakan bagaimana bentuk tampilan halaman nantinya sebab Modul Pelatihan Web Universitas Al Azhar Indonesia

- 24 -

pengembangan halaman dilakukan secara grafis tanpa perlu mengetik satu-persatu tag-tag HTML yang diperlukan. Tag-tah HTML ini akan tercipta langsung dimenu HTML dibagian bawah tampilan FrontPage kita. 6.3 HTML Editor Menu ini adalah tempat kita melakukan editing terhadap tag-tag HTML kita. Jika kita ingin menambahkan fasilitas atau aplikasi berbasiskan JavaScript kita dapat mengetikannya langsung disini. Menu ini terletak dibagian bawah IDE Microsoft FrontPage. Menu ini berada diantara menu “Normal” dan “Preview”.

Modul Pelatihan Web Universitas Al Azhar Indonesia

- 25 -

Bab 7 Image Editor Dengan PhotoShop 7.1 Mengenal PhotoShop Adobe PhotoShop adalah sebuah Image Editor yang diciptakan oleh Adobe Coorporation. Image Editor lain yang juga sering digunakan membuat disain grafis misalnya Corel Draw dan Gimp di Linux. Saat ini telah banyak menu-menu baru yang ditambahkan di PhotoShop seri terbaru, sehingga akan memudahkan kita dalam menghasilkan disain atau gambar-gambar menarik yang kita inginkan. Secara singkat bagian-bagian PhotoShop dapat digambarkan seperti berikut ini : Tools Options Navigator

Warna Jendela Kerja Layers

Layers Aktif

7.2 Membuat Sudut Lengkung HTML biasa tidaklah mampu menyajikan tampilan dengan bentuk serta warna-warna melengkung yang menyenangkan mata untuk dilihat. Bentuk tampilan melengkung ini dapat kita gunakan dengan membuat image/ gambar yang kemudian kita sisipkan di halaman HTML kita. Mari kita coba untuk membuat kesan melengkung yang akan ditampilkan di website kita nanti. Langkah 1 Pertama-tama buatlah sebuah jendela kerja baru dengan meng-klik menu File->New dan masukkan ukuran halaman yang kita inginkan. Kemudian buatlah sebuah kotak dengan menggunakan Rectangular Marquee Toll di menu sebelah kiri TollBox PhotoShop kita. Langkah 2 Pilihlah warna yang kita inginkan untuk dasar bagian menu halaman website kita. Kemudian pilih Menu Paint Bucket dari TollBox disebelah kiri dan klik dibagian dalam kotak yang kita buat di langkah pertama tadi.

Modul Pelatihan Web Universitas Al Azhar Indonesia

- 26 -

Langkah 3 Kemudian klik lagi di menu Rectangular Marquee Toll dan pilih bentuk lingkaran. Klik dan tahan sambil ditarik sehingga terbentuk lingkaran diatas kotak berwarna yang telah kita buat. Geser sehingga tepi lingkaran menyentuh pinggiran sebelah dalam kotak kita. Langkah 4 Tekan tombol delete di keyboard kita, maka akan tampaklah hasil sebuah sudut melengkung yang kita inginkan. Gunakan Rectangular Marquee Toll kotak dan buatlah kotak kembali yang menyelubungi tepi luar image tersebut. Tekan tombol ctrl-C dan klik File->New->Enter kemudian ctrl-V. Setelah itu akan muncullah dijendela baru image yang telah kita buat. Simpan file ini dengan nama sudut-1 misalnya. Jangan lupa menyimpannya dengan format “.gif” (tanpa tanda petik). Langkah 5 Buka FrontPage kita, letakan cursor di Cell mana image tersebut ingin kita letakan dan kemudian pilih menu Insert Image dari TollBar dan arahkan ke direktori dimana kita menyimpan file gambar tersebut. Jika langkah kita benar maka akan tampak sebuah sudut yang memiliki lengkungan di halaman website kita. Secara singkat tahapan langkah tersebut dapat dilihat seperti gambar berikut ini :

Langkah 1

Langkah 2 Langkah 3

Langkah 4

Modul Pelatihan Web Universitas Al Azhar Indonesia

- 27 -

Sign up to vote on this title
UsefulNot useful