Modul Pemrograman Web I 1 1. Pengenalan HTML a. World Wide Web Internet merupakan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi. World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan paling populer. WWW bekerja merdasarkan pada tiga mekanisme berikut: Protocol standard aturan yang di gunakan untuk berkomunikasi pada komputer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW. Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource Locator) yang di gunakan sebagai standard alamat internet. HTML digunakan untuk membuat document yang bisa di akses melalui web. b. Pengenalan HTML Hypertext Markup Language merupkan standard bahasa yang digunakan untuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu : Mengontrol tampilan dari web page dan contentnya. Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. Menambahkan object-object seperti image, audi, video dan juga java applet dalam document HTML.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Modul Pemrograman Web I
1
1. Pengenalan HTML
a. World Wide Web
Internet merupakan jaringan global yang menghubungkan suatu network dengan
network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara
jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi.
World Wide Web (WWW) merupakan bagian dari internet yang paling cepat
berkembang dan paling populer.
WWW bekerja merdasarkan pada tiga mekanisme berikut:
Protocol standard aturan yang di gunakan untuk berkomunikasi pada
komputer networking, Hypertext Transfer Protocol (HTTP) adalah protocol
untuk WWW.
Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform
Resource Locator) yang di gunakan sebagai standard alamat internet.
HTML digunakan untuk membuat document yang bisa di akses melalui web.
b. Pengenalan HTML
Hypertext Markup Language merupkan standard bahasa yang digunakan untuk
menampilkan document web, yang bisa anda lakukan dengan HTML yaitu :
Mengontrol tampilan dari web page dan contentnya.
Mempublikasikan document secara online sehingga bisa di akses dari seluruh
dunia.
Membuat online form yang bisa di gunakan untuk menangani pendaftaran,
transaksi secara online.
Menambahkan object-object seperti image, audi, video dan juga java applet
dalam document HTML.
Modul Pemrograman Web I
2
c. Browser dan Editor
1) Browser
Browser merupakan software yang di install di mesin client yang berfungsi untuk
menterjemahkan tag-tag HTML menjadi halaman web.
Browser yang sering di gunakan biasanya Internet Explorer, Mozilla Firefox,
Google Chrome, Opera, Safari, Netscape Navigator dan masih banyak yang
lainya.
2) Editor
Program yang di gunakan untuk membuat document HTML, ada banyak HTML
editor yang bisa anda gunakan diantaranya: Notepad, Notepad++, Netbeans,
Ms.FrontPage, dan Adobe Dreamweaver.
Untuk yang sering kita gunakan Notepad atau Notepad++.
d. Tag HTML dan Penulisan HTML
HTML (HyperText Mark up Language) merupakan suatu metoda untuk
mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML
sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang
hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai
program, penulisan tag HTML tidak case sensitive.
Penulisan Tag HTML terlihat gambar dibawah ini :
Modul Pemrograman Web I
3
Ok, langsung saja kita buka editor notepad atau notepad++ dan ketikkan code HTML
dibawah ini.
Setelah kalian ketik simpan dengan nama contoh_001.html atau contoh_001.htm lalu
kalian file tersebut kalian klik dua kali untuk melihat hasil dari code tersebut.
Output dari code diatas adalah seperti berikut :
Contoh Kedua
Pengaturan paragraph
Kami Sedang Belajar HTML
Modul Pemrograman Web I
4
Contoh Ketiga
Penggunaan break <br>
Contoh Keempat
Penggunaan Horizontal Rule <HR>
Modul Pemrograman Web I
5
Latihan Pertama :
Gabungkan code contoh 2 s/d 4 sehingga dapat menampilkan seperti gambar
dibawah ini :
Modul Pemrograman Web I
6
e. Mewarnai latar / Memberi warna background, memberi warna font dan mengatur
besar-kecilnya font.
Contoh Kelima
Penggunaan bgcolor
Untuk value bgcolor bisa menggunakan dengan warna langsung seperti
Red, Green, Blue, Yellow, Brown, Grey dan lain sebagainya.
Dan bisa juga dengan Hexa decimal.
Warna Dengan Text Hexadecimal color
Putih / White #FFFFFF
Hitam / Black #000000
Merah / Red #FF0000
Hijau / Green #00FF00
Biru / Blue #0000FF
Kuning / Yellow #FFFF00
Jingga / Pink #FF00FF
Abu-abu / Grey #C0C0C0
Modul Pemrograman Web I
7
Contoh Keenam
Pewarnaan font / text
Contoh Ketujuh
Penggunaan Heading
Modul Pemrograman Web I
8
Contoh Kedelapan
Pengaturan ukuran Font
Modul Pemrograman Web I
9
Latihan & Tugas
Buatlah Laman Web tentang data pribadi anda, dengan menggabungkan Tag-tag
HTML dari Contoh Kelima sampai dengan contoh kedelapan. Jangan lupa diberikan
warna untuk latarnya.
f. Pembuatan Bullet Numbering.
Contoh Kesembilan
Modul Pemrograman Web I
10
Penggunaan list
g. Pemakaian gambar.
Modul Pemrograman Web I
11
Untuk menggunakan file gambar yang akan kita sisipkan didalam Tag HTML, langkah
awal adalah copy kan file gambar tersebut dalam satu direktori atau folder project
web anda. Dan mesti anda ketahui, penggunaan gambar disini sangat case sensitive
dalam pemanggilan file gambar yang akan kita buat.
Tag HTML-nya seperti berikut <IMG SRC=”NAMA FILE GAMBAR”>
Nah perlu dipahami juga ektension file gambar tersebut apakah .jpg .png .bmp .gif
misalkan kita mempunyai gambar bernama “TeknikInformatika” dengan ektension
gambarnya .jpg maka, tag HTML adalah seperti berikut
<IMG SRC=”TeknikInformatika.jpg”>
Langsung saja kita coba
Contoh Kesepuluh
Penggunaan file gambar
Perlu kalian perhatikan disini kita menggunakan file gambar dengan nama “apple.jpg”
Bagaimana jika file gambar berada didalam suatu folder atau direktori lain.??
Silahkan kalian perhatikan dan fahami pada code contoh kesebelas.
Contoh Kesebelas
Modul Pemrograman Web I
12
Penggunaan file gambar dengan beda direktori.
Kalian lihat disini ada 2 folder yaitu folder HTML dan folder IMAGES, nah file gambar
“apple.jpg” berada dalam folder IMAGES maka untuk code / Tag HTMLnya seperti
berikut :
Catatan : Untuk file HTML ada pada folder HTML dan file gambar ada pada folder
IMAGES.
Latihan & Tugas
Buatlah Laman Web tentang data pribadi anda, dengan menggabungkan Tag-tag
HTML dari Contoh Pertama sampai dengan Contoh Kesebelas.
h. Pembuatan Hyperlink
Modul Pemrograman Web I
13
Contoh Keduabelas
Hyperlink
Hyperlink sebuah code Tag HTML untuk menghubungkan file yang satu dengan yang
lain. Untuk kasus disini kita belum mengisikan file yang ingin kita hubungkan.
Karena <a href = ”#” > masih tertuju ke # jadi belum bias menghubungkan dan
menampilkan ya ada.
Untuk itu lebih kalian coba isikan Tag <a href= “ ”> dengan file yang sudah kalian
buat dari contoh pertama hingga contoh kesebelas.
i. Pembuatan Table
Modul Pemrograman Web I
14
Contoh Ketigabelas
Table
j. Pembuatan Form
Modul Pemrograman Web I
15
Bentuk HTML digunakan untuk melewatkan data ke server.
Suatu bentuk dapat berisi elemen input seperti bidang teks, checkbox, radio button,
tombol submit dan banyak lagi. Formulir juga dapat berisi daftar pilih, textarea,
fieldset, legenda, dan elemen label.
Tag <form> digunakan untuk membuat bentuk HTML seperti berikut :
Langsung saja kalian coba code Tag HTML dibawah ini :
Contoh Keempat Belas
Contoh Kelima Belas
Modul Pemrograman Web I
16
Contoh Keenam Belas
Modul Pemrograman Web I
17
Latihan & Tugas
Buatlah Laman Web tentang data pribadi anda, dengan menggabungkan Tag-tag
HTML dari Contoh-contoh yang pernah kalian praktikkan, jangan lupa untuk
membuat menu register dan semua file harus bias terhubung satu dengan yang lain.
Modul Pemrograman Web I
18
2. CSS (CASCADING STYLE SHEET)
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk
mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan
seragam.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat
mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style
lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya
CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML
dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna
tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar
paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS
adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan
adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format
yang berbeda.
( sumber : http://id.wikipedia.org/wiki/Cascading_Style_Sheets ).
Contoh aturan penulisan syntax CSS
Syntaxis CSS dibagi dalam 3 bagian, yaitu : selector {property : value}
Dimana : selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).