27
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 -

Modul Pelatihan Web HTML

Embed Size (px)

Citation preview

Page 1: Modul Pelatihan Web HTML

MODULPelatihan Web

HTML-Frontpage-Photoshop(Beginner)

AL AZHAR COMPUTER CLUB

Oleh :Achmad Fachrie

Al Azhar Computer Club

Modul Pelatihan WebUniversitas Al Azhar Indonesia

- 1 -

Page 2: Modul Pelatihan Web HTML

DAFTAR ISI

Kata Pengantar ……………………………..……………………………..……………………………………. 1

Bab 1 Pengenalan Internet ……………………………………………………………………………………..31.1 Sejarah Internet ……………………………………………………………………………………..31.2 Fasilitas Internet ……………………………………………………………………………………. 41.3 Syarat Terhubung Internet ………………………………………………………………………... 5

Bab 2 Pengenalan TCP/IP …………………………………………………………………………………...... 52.1 Istilah-istilah didalam Internet Protocol ……………………………………………………………6

Bab 3 Pengenalan Web ………………………………………..………………………………………………. 73.1 Aplikasi Web ……………………………..……………………………..……………………………73.2 Teknologi Web ……………………………..……………………………..………………………....8

3.2.1 Teknologi Web Pada Sisi Klien ……………………………..………………………… 83.2.2 Teknologi web Pada Sisi Server ……………………………..……………………….. 9

Bab 4 Pengenalan HTML …………………………..……………………………..……………………………104.1 Struktur HTML .…………………………..……………………………..…………………………. 104.2 Dasar Penyusunan Tag HTML ……………………………..……………………………………. 114.3 Menggunakan Tag <body> ……………………………..……………………………..…………. 124.4 Penyusunan komentar ……………………………..……………………………………………... 124.5 Menggunakan Tag <br> ……………………………..……………………………..…………….. 124.6 Menggunakan Tag <p> ……………………………..……………………………………………. 124.7 Menggunakan Tag judul atau Heading ……………………………..………………………….. 134.8 Membuat Garis Horizontal ……………………………..………………………………………… 144.9 Menggunakan Tag <center> ……………………………..……………………………………… 14

Bab 5 Mengatur Teks ……………………………..……………………………..……………………………. 155.1 Mengatur Teks Secara Fisik ……………………………..………………………………………. 155.2 Mengatur Teks Secara Logikal ……………………………..…………………………………… 155.3 Mengatur Huruf ……………………………..……………………………..……………………… 155.4 Menampilkan Daftar Item ……………………………..……………………………..…………… 165.5 Menambahkan Gambar ……………………………..……………………………..…………….. 185.6 Menggunakan Table ……………………………..……………………………..………………… 18

5.6.1 Menggabungkan Sel ……………………………..…………………………………… 19 5.7 Membuat Link ……………………………..……………………………..………………………… 215.8 Mengenal Form ……………………………..……………………………..………………………. 21

Bab 6 Pengenalan Frontpage ……………………………..……………………………..………………….. 236.1 Toolbar ……………………………..……………………………..……………………………….. 236.2 Jendela Kerja ……………………………..……………………………..………………………… 236.3 HTML Editor ……………………………..……………………………..………………………….. 24

Bab 7 Image Editor dengan Photoshop ……………………………..…………………………………….. 25 7.1 Mengenal Photoshop ……………………………..……………………………..………………... 257.8 Membuat Sudut Melengkung ……………………………..……………………………………… 25

Modul Pelatihan WebUniversitas Al Azhar Indonesia

- 2 -

Page 3: Modul Pelatihan Web HTML

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 FachrieMahasiswa Teknik Informatika 2002

Universitas Al Azhar Indonesia

Modul Pelatihan WebUniversitas Al Azhar Indonesia

- 3 -

Page 4: Modul Pelatihan Web HTML

BAB 1Pengenalan 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 WebUniversitas Al Azhar Indonesia

- 4 -

Page 5: Modul Pelatihan Web HTML

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 WebUniversitas Al Azhar Indonesia

- 5 -

Page 6: Modul Pelatihan Web HTML

BAB 2Pengenalan 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 WebUniversitas Al Azhar Indonesia

- 6 -

Page 7: Modul Pelatihan Web HTML

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.

Network ID Host ID192 168 0 1

Tabel 1. Contoh IP Address

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 WebUniversitas Al Azhar Indonesia

- 7 -

Page 8: Modul Pelatihan Web HTML

BAB 3Pengenalan 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.

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 WebUniversitas Al Azhar Indonesia

- 8 -

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.

Page 9: Modul Pelatihan Web HTML

Klien

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.

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 WebUniversitas Al Azhar Indonesia

- 9 -

Web Server [Apache, IIS,

Xitami, dll]

Middleware [ASP, PHP, JSP,

dll]

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.

{MySQL, Oracle, Access

dll]

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

Page 10: Modul Pelatihan Web HTML

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 WebUniversitas Al Azhar Indonesia

- 10 -

Page 11: Modul Pelatihan Web HTML

BAB 4Pengenalan 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 HTMLDalam penyusunan HTML ada struktur yang perlu diperhatikan, contohnya adalah seperti dibawah ini :

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 :

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 WebUniversitas Al Azhar Indonesia

- 11 -

<html><head><title>disini judul halaman</title></head><body>disini isi halaman</body></html>

<html>disini isi halaman</html>

Page 12: Modul Pelatihan Web HTML

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 tagATTRIBUTE = atribut dari tagVALUE = nilai dari atribut

Contoh :

<body bgcolor=green>

BODY merupakan element, BGCOLOR (background color) merupakan atribut, dan memiliki nilai (value) Green .

4.3 Menggunakan Tag <body>

Modul Pelatihan WebUniversitas Al Azhar Indonesia

- 12 -

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”>

Page 13: Modul Pelatihan Web HTML

Selain yang diperlihatkan sebelumnya, dalam element BODY selain atribut BGCOLOR, berikut ini atribut lainnya :

Atribut Fungsi ValueBGCOLOR Menentukan warna background suatu halaman web Berupa kode warna

hexadesimal seperti #RRGGBB

BACKGROUND Menentukan gambar/image yang digunakan sebagai background halaman web

Berupa path / letak nama file gambar

TOPMARGIN Menentukan letak vertikal suatu objek pada halaman web

Berupa angka semakin kecil semakin berada diatas halaman

LEFTMARGIN Menentukan letak horizontal suatu objek pada halaman web

Berupa angka semakin kecil semakin berada di kiri halaman

TEXT Menentukan warna teks yang digunakan secara umum pada halaman web

Berupa kode warna hexadesimal seperti #RRGGBB

LINK Menentukan warna teks yang berfungsi sebagai link Berupa kode warna hexadesimal seperti #RRGGBB

ALINK Menentukan warna teks link ketika di klik Berupa kode warna hexadesimal seperti #RRGGBB

VLINK Menentukan warna teks link ketika selesai/sudah di klik 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 WebUniversitas Al Azhar Indonesia

- 13 -

Page 14: Modul Pelatihan Web HTML

Align Menentukan letak isi ke sisi kanan web

Right

Menentukan letak isi ke sisi kiri web

Left

Menentukan letak isi ke tengah web

Center

Menentukan rata sisi kanan dan sisi kiri

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 WebUniversitas Al Azhar Indonesia

- 14 -

Page 15: Modul Pelatihan Web HTML

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> Fungsi ValueAlign Menentukan letak garis pada

HTML. Sisi kanan, tengah atau kiri

Right, Left atau center

Width Menentukan panjang garis Berupa angka format pixel atau defaultnya 100%

Size Menentukan tebal garis Berupa angka dalam format pixelNoshad Menentukan efek bayangan garis 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 WebUniversitas Al Azhar Indonesia

- 15 -

Page 16: Modul Pelatihan Web HTML

BAB 5Mengatur 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 Description<EM>….</EM> Text miring<STRONG>…</STRONG> Text tebal<CITE>…</CITE> Text kutipan<DEL>…</DEL> Mencoret Text<INS>…</INS> Underline text<CODE>…</CODE> Text kode komputer [monoskrip]<KBD>…</KBD> Text keyboard [monospasi]<SAMP>…</SAMP> Text konstanta [monospasi]<VAR>…</VAR> 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 Fungsi ValueFace Menentukan jenis font yang

digunakanBerupa jenis font. Seperti : verdana, arial, comic sans ms, dan lain-lain

Color Menentukan warna suatu font Berupa kode warna hexadesimal seperti #RRGGBB

Size Menentukan ukuran suatu font Berupa angka, (1-7)

Modul Pelatihan WebUniversitas Al Azhar Indonesia

- 16 -

Page 17: Modul Pelatihan Web HTML

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> Fungsi ValueType Untuk membuat simbol list kotak Square

Untuk membuat simbol list titik DiscUntuk membuat simbol list lingkaran

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 WebUniversitas Al Azhar Indonesia

- 17 -

Catatan :

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

Page 18: Modul Pelatihan Web HTML

Maka hasil yang didapatkan.

Untuk lebih lengkapnya tentang atribut tag <ol> beserta valuenya dapat dilihat pada tabel di bawah ini :

Atribut <ol> Fungsi ValueType Urutan dimulai dengan huruf

romawi besarI

Urutan dimulai dengan huruf romawi kecil

i

Urutan dimulai dengan huruf abjad besar

A

Urutan dimulai dengan huruf abjad kecil

a

Start Urutan dimulai pada angka / huruf Berupa angka

Modul Pelatihan WebUniversitas Al Azhar Indonesia

- 18 -

Page 19: Modul Pelatihan Web HTML

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> Fungsi Valuesrc Menampilkan gambar yang

dijadikan sumberBerupa nama gambar, bila perlu disertakan berikut direktori file gambar berada.

align Membuat objek ke tengah dalam dokumen web

Middle

Align Membuat objek pada bagian atas dalam dokumen web

Top

Align Membuat objek ke pada bagian bawahdalam dokumen web

Bottom

Border Membuat objek gambar ditampilkan dengan menggunakan bingkai

Berupa angka

Height Mengatur tinggi gambar Berupa angka format pixel atau defaultnya 100%

Width Mengatur lebar gambar Berupa angka format pixel atau defaultnya 100%

Alt Menyedikan teks alternatif ketika mouse digerakan pada gambar

Berupa keterangan kalimat

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 :

Pada masing-masing Cell itulah kita meletakan teks atau gambar yang kita inginkan. Tag-tag berikut ini adalah contoh untuk penyusunan bentuk table tersebut.

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 WebUniversitas Al Azhar Indonesia

- 19 -

Satu buah table Satu buah row

Dua buah Cell

<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>

Page 20: Modul Pelatihan Web HTML

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> Fungsi ValueBorder Menampilkan table berupa garis

pembentuk tableBerupa angka atau bilangan

Bgcolor Menentukan warna latar belakang table

Berupa kode warna hexadesimal seperti #RRGGBB

Bordercolor Menentukan warna garis pembentuka table

Berupa kode warna hexadesimal seperti #RRGGBB

Height Mengatur tinggi table Berupa angka format pixel atau defaultnya 100%

Width Mengatur lebar table Berupa angka format pixel atau defaultnya 100%

Cellpadding Mengatur jarak teks atau objek terhadap tepi kiri table

Berupa angka atau bilangan

Cellspacing Mengatur jarak bagian sel terhadap tepi dalam bingkai table

Berupa angka atau bilangan

5.6.1 Menggabungkan Sel

HTML juga memungkinkan pembuatan table dengan sejumlah baris sel digabungkan, misalnya sebagai berikut :

Teknik InformatikaElektroIndustri

Sastra InggrisArabJepang

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 :

Modul Pelatihan WebUniversitas Al Azhar Indonesia

- 20 -

<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>

Page 21: Modul Pelatihan Web HTML

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 :

Atribut <tr> Fungsi ValueBgcolor Menentukan warna latar belakang

table Berupa kode warna hexadesimal seperti #RRGGBB

Atribut <td> Fungsi ValueHeight Mengatur tinggi table Berupa angka format pixel atau

defaultnya 100%Width Mengatur lebar table Berupa angka format pixel atau

defaultnya 100%Valign Membuat objek ke tengah dalam

tableMiddle

Valign Membuat objek ke atas dalam table

Top

Valign Membuat objek ke bawah dalam table

Bottom

Modul Pelatihan WebUniversitas Al Azhar Indonesia

- 21 -

<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>

Page 22: Modul Pelatihan Web HTML

Align Membuat objek ke tengah dalam table

Center

Align Membuat objek pada bagian kiri dalam table

Left

Align Membuat objek ke pada bagian kanan dalam table

Right

5.7 Membuat Link

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> Fungsi ValueHref Menunjukkan halaman lain atau

situs yang dituju link tersebutBerupa direktori halaman atau situs web dengan menggunakan protokol

Link Menentukan warna link Berupa kode warna hexadesimal seperti #RRGGBB

Alink Menentukan warna link yang aktif, yang sedang diklik, tapi halaman belum selesai dibuka

Berupa kode warna hexadesimal seperti #RRGGBB

Vlink Menetukan warna link halaman web yang telah dikunjungi

Berupa kode warna hexadesimal seperti #RRGGBB

Target Membuka window atau jendela yang baru

_blank

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 :

Modul Pelatihan WebUniversitas Al Azhar Indonesia

- 22 -

Page 23: Modul Pelatihan Web HTML

Berikut ini jenis-jenis Form berikut fungsi dan atributnya masing-masing.

FORM GAMBAR KETERANGANtext Untuk menerima input dengan karakter

terbatasradio Mendapatkan Single Optioncheck box Mendapatkan Multiple Optiondrop down Menu yang dipilih akan ditampilkan

vertikal

textarea Menerima input dengan karakter lebih banyak

button Untuk mengirimkan hasil input

Modul Pelatihan WebUniversitas Al Azhar Indonesia

- 23 -

Page 24: Modul Pelatihan Web HTML

BAB 6Pengenalan 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 :

6.1 ToolBarToolBar 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 :

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 WebUniversitas Al Azhar Indonesia

- 24 -

ToolBar

Jendela Kerja

HTML Editor

Preview

Normal Editor

New Page

Open File

Save File Print Page

Preview Browser

Paste Format PrinterInsert Table

Insert ImageHyperlink

Page 25: Modul Pelatihan Web HTML

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 WebUniversitas Al Azhar Indonesia

- 25 -

Page 26: Modul Pelatihan Web HTML

Bab 7Image 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 :

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 1Pertama-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 2Pilihlah 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 WebUniversitas Al Azhar Indonesia

- 26 -

Jendela Kerja

Tools Options Navigator

Warna

Layers

Layers Aktif

Page 27: Modul Pelatihan Web HTML

Langkah 3Kemudian 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 4Tekan 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 5Buka 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 :

Modul Pelatihan WebUniversitas Al Azhar Indonesia

- 27 -

Langkah 1

Langkah 2

Langkah 3

Langkah 4