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

-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
Modul Pelatihan Web

-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

-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

-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

-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.
Network ID Host ID
192 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 Web

-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

-8-
Web Server Middleware {MySQL,
[Apache, IIS, [ASP, PHP, JSP, Oracle, Access
Xitami, dll] dll] 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

-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

- 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

- 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

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

BGCOLOR Menentukan warna background suatu halaman web Berupa kode warna
hexadesimal seperti
#RRGGBB
BACKGROUND Menentukan gambar/image yang digunakan sebagai Berupa path / letak
background halaman web nama file gambar
TOPMARGIN Menentukan letak vertikal suatu objek pada halaman Berupa angka semakin
web kecil semakin berada
diatas halaman
LEFTMARGIN Menentukan letak horizontal suatu objek pada halaman Berupa angka semakin
web kecil semakin berada di
kiri halaman
TEXT Menentukan warna teks yang digunakan secara umum Berupa kode warna
pada halaman web 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 Web

- 13 -
Align Menentukan letak isi ke sisi Right
kanan web
Menentukan letak isi ke sisi kiri Left
web
Menentukan letak isi ke tengah Center
web
Menentukan rata sisi kanan dan Justify
sisi kiri
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

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

Align Menentukan letak garis pada Right, Left atau center
HTML. Sisi kanan, tengah atau
kiri
Width Menentukan panjang garis Berupa angka format pixel atau
defaultnya 100%
Size Menentukan tebal garis Berupa angka dalam format pixel
Noshad 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 Web

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

Face Menentukan jenis font yang Berupa jenis font. Seperti :
digunakan 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 Web

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

Type Untuk membuat simbol list kotak Square
Untuk membuat simbol list titik Disc
Untuk membuat simbol list circle
lingkaran
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

- 17 -
Maka hasil yang didapatkan.
Untuk lebih lengkapnya tentang atribut tag <ol> beserta valuenya dapat dilihat pada tabel di bawah ini
:
Atribut <ol> Fungsi Value

Type Urutan dimulai dengan huruf I
romawi besar
Urutan dimulai dengan huruf i
romawi kecil
Urutan dimulai dengan huruf A
abjad besar
Urutan dimulai dengan huruf a
abjad kecil
Start Urutan dimulai pada angka / huruf Berupa angka
Modul Pelatihan Web
- 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> Fungsi Value

src Menampilkan gambar yang Berupa nama gambar, bila perlu
dijadikan sumber disertakan berikut direktori file
gambar berada.
align Membuat objek ke tengah dalam Middle
dokumen web
Align Membuat objek pada bagian atas Top
dalam dokumen web
Align Membuat objek ke pada bagian Bottom
bawahdalam dokumen web
Border Membuat objek gambar Berupa angka
ditampilkan dengan
menggunakan bingkai
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 Berupa keterangan kalimat
mouse digerakan pada gambar
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
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
- 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> Fungsi Value

Border Menampilkan table berupa garis Berupa angka atau bilangan
pembentuk table
Bgcolor Menentukan warna latar belakang Berupa kode warna hexadesimal
table seperti #RRGGBB
Bordercolor Menentukan warna garis Berupa kode warna hexadesimal
pembentuka table 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 Berupa angka atau bilangan
terhadap tepi kiri table
Cellspacing Mengatur jarak bagian sel Berupa angka atau bilangan
terhadap tepi dalam bingkai table
5.6.1 Menggabungkan Sel
HTML juga memungkinkan pembuatan table dengan sejumlah baris sel digabungkan, misalnya sebagai
berikut :
Teknik Informatika
Elektro
Industri
Sastra 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> Modul Pelatihan Web
</tr> Universitas Al Azhar Indonesia
</table> - 20 -
</body>
</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 :
<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> Fungsi Value

Bgcolor Menentukan warna latar belakang Berupa kode warna hexadesimal
table seperti #RRGGBB
Atribut <td> Fungsi Value

Height 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 Middle
table
Valign Membuat objek ke atas dalam Top
table
Valign Membuat objek ke bawah dalam Bottom
table
Modul Pelatihan Web

- 21 -
Align Membuat objek ke tengah dalam Center
table
Align Membuat objek pada bagian kiri Left
dalam table
Align Membuat objek ke pada bagian Right
kanan dalam table
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 Value

Href Menunjukkan halaman lain atau Berupa direktori halaman atau
situs yang dituju link tersebut situs web dengan menggunakan
protokol
Link Menentukan warna link Berupa kode warna hexadesimal
seperti #RRGGBB
Alink Menentukan warna link yang aktif, Berupa kode warna hexadesimal
yang sedang diklik, tapi halaman seperti #RRGGBB
belum selesai dibuka
Vlink Menetukan warna link halaman Berupa kode warna hexadesimal
web yang telah dikunjungi seperti #RRGGBB
Target Membuka window atau jendela _blank
yang baru
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 Web

- 22 -
Berikut ini jenis-jenis Form berikut fungsi dan atributnya masing-masing.
FORM GAMBAR KETERANGAN

text Untuk menerima input dengan karakter
terbatas
radio Mendapatkan Single Option
check box Mendapatkan Multiple Option
drop down Menu yang dipilih akan ditampilkan
vertikal
textarea Menerima input dengan karakter lebih

banyak
button Untuk mengirimkan hasil input
Modul Pelatihan Web

- 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

- 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

- 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

- 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

- 27 -

Modul Pelatihan Web HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Pelatihan Web HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL

Al Azhar Computer Club

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

Bab 1 Pengenalan Internet ……………………………………………………………………………………..3

Modul Pelatihan Web

Modul Pelatihan Web

1.1 Sejarah Internet

1.2 Fasilitas Internet

Modul Pelatihan Web

1.3 Syarat Terhubung Internet

Modul Pelatihan Web

Adapun keuntungan menggunakan TCP/IP adalah kemudahannya, karena memungkinkan hubungan

Gambar 1 TCP/IP Properties pada windows

2.1 Istilah-istilah didalam Internet Protocol

Modul Pelatihan Web

Modul Pelatihan Web

3.1 Aplikasi Web

Dalam penerapan aplikasi web ini terdapat suatu arsitektur tersendiri

Modul Pelatihan Web

Bagaimana bagian-bagian Web dapat bekerja?

3.2 Teknologi Web

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

3.2.1 Teknologi Web pada Sisi Klien

Modul Pelatihan Web

Yang termasuk dalam teknologi web pada sisi klien adalah :

3.2.2 Teknologi Web pada Sisi Server

Bebapa contoh teknologi yang berjalan pada sisi server adalah :

Common Gateway Interface [CGI]

Java Servlets dan Java Server Pages [JSP]

Modul Pelatihan Web

4.1 Struktur HTML

 <html> dan </html>

Modul Pelatihan Web

4.2 Dasar Penyusunan Tag HTML

<ELEMENT ATTRIBUTE = value >

ELEMENT = nama tag

<font face=”comic sans ms”>

4.3 Menggunakan Tag <body>

Modul Pelatihan Web

Atribut Fungsi Value

4.4 Penyusunan Komentar

<!-- ini komentar saya

4.5 Menggunakan Tag <br>

4.6 Menggunakan Tag <p>

Atribut Paragraph Fungsi Value

Modul Pelatihan Web

4.7 Menggunakan Tag Judul atau Heading

Maka hasilnya akan berupa :

Modul Pelatihan Web

Horizontal Rule = <hr>

Atribut Tag <hr> Fungsi Value

4.9 Menggunakan Tag <center>

Menggunakan Tag <Div>

Modul Pelatihan Web

5.1 Mengatur Teks Secara Fisik / Physical Formatting.

5.2 Mengatur Teks Secara Logis / Logical Formatting

5.3 Mengatur Huruf / FONT

Atribut Fungsi Value

Modul Pelatihan Web

5.4 Menampilkan Daftar Item / List

List Item [LI]

Atribut <ul> Fungsi Value

Contoh : <ul type=square>

2. Ordered List <ol>