Modul Pelatihan Web Html

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 ……………………………..……………………………..…………. 12 4.4 Penyusunan komentar ……………………………..……………………………………………... 12 4.5 Menggunakan Tag
……………………………..……………………………..…………….. 12 4.6 Menggunakan Tag

……………………………..……………………………………………. 12 4.7 Menggunakan Tag judul atau Heading ……………………………..………………………….. 13 4.8 Membuat Garis Horizontal ……………………………..………………………………………… 14 4.9 Menggunakan Tag

……………………………..……………………………………… 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 : disini isi halaman

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 atau . Dan kita bisa melakukan format yang minimal seperti :

disini isi halaman

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





dan 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 harus selalu diakhir dari suatu script HTML. Bagian yang terdapat dalam dan yang umumnya di antara tag HTML ini terdapat dua bagian, yaitu : Modul Pelatihan Web Universitas Al Azhar Indonesia

- 11 -







Kepala, dan badan dan Tag HEAD merupakan tanda suatu header suatu HTML. Tag HEAD biasanya berisi tag 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). dan 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 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 :

4.3 Menggunakan Tag

Modul Pelatihan Web Universitas Al Azhar Indonesia

- 12 -

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

Fungsi Menentukan warna background suatu halaman web

BACKGROUND

Menentukan gambar/image yang digunakan sebagai background halaman web Menentukan letak vertikal suatu objek pada halaman web

TOPMARGIN LEFTMARGIN

Menentukan letak horizontal suatu objek pada halaman web

TEXT

Menentukan warna teks yang digunakan secara umum pada halaman web

LINK

Menentukan warna teks yang berfungsi sebagai link

ALINK

Menentukan warna teks link ketika di klik

VLINK

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