Pemrograman Berbasis WEB (HTML) 9/5/2012 1 / 29 Pemrograman Berbasis WEB (HTML) Internet dan WWW Media-media terdahulu dapat memberi informasi, tetapi tidak dapat “mencarikan” informasi dan memiliki keterbatasan waktu Internet dapat mencari hampir semua informasi yang kita butuhkan selama 24 jam dalam 365 hari setahun Diawali di Uni Sovyet pada tahun 1957 pada saat peluncuran satelit Sputnik, presiden Amerika Dwight D. Eisenhower membentuk sebuah badan Advanced Research Projects Agency (ARPA) pada Departemen Pertahanan Amerika Serikat (DoD) untuk mengantisipasi keunggulan Uni Sovyet. Pada tahun 1969 DoD memberi tugas kepada ARPA untuk membangun jaringan komunikasi antara DoD dengan meliter yang disebut dengan ARPAnet ARPAnet pada awalnya hanya mempunyai empat situs : Stanford Research Institute (SRI) University of California at Santa Barbara (UCSB) University of California at Los Angeles (UCLA) University of Utah (U2) WWW bukan Internet atau sebaliknya namun sangat berkaitan diantara keduanya Internet adalah suatu jaringan komputer global, sedangkan WWW bukan hanya sekedar jaringan tetapi didalamnya terdapat suatu set aplikasi komunikasi dan sistem perangkat lunak yang memiliki karakteristik sebagai berikut : Umumnya terletak pada Internet Host dan Client Umumnya menggunakan protokol TCP/IP
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
Pemrograman Berbasis WEB (HTML) 9/5/2012 1 / 29
Pemrograman Berbasis WEB (HTML)
Internet dan WWW
Media-media terdahulu dapat memberi informasi, tetapi tidak dapat
“mencarikan” informasi dan memiliki keterbatasan waktu
Internet dapat mencari hampir semua informasi yang kita butuhkan selama
24 jam dalam 365 hari setahun
Diawali di Uni Sovyet pada tahun 1957 pada saat peluncuran satelit
Sputnik, presiden Amerika Dwight D. Eisenhower membentuk sebuah
badan Advanced Research Projects Agency (ARPA) pada Departemen
Pertahanan Amerika Serikat (DoD) untuk mengantisipasi keunggulan Uni
Sovyet.
Pada tahun 1969 DoD memberi tugas kepada ARPA untuk membangun
jaringan komunikasi antara DoD dengan meliter yang disebut dengan
ARPAnet
ARPAnet pada awalnya hanya mempunyai empat situs :
Stanford Research Institute (SRI)
University of California at Santa Barbara (UCSB)
University of California at Los Angeles (UCLA)
University of Utah (U2)
WWW bukan Internet atau sebaliknya namun sangat berkaitan diantara
keduanya
Internet adalah suatu jaringan komputer global, sedangkan WWW bukan
hanya sekedar jaringan tetapi didalamnya terdapat suatu set aplikasi
komunikasi dan sistem perangkat lunak yang memiliki karakteristik sebagai
berikut :
Umumnya terletak pada Internet Host dan Client
Umumnya menggunakan protokol TCP/IP
Pemrograman Berbasis WEB (HTML) 9/5/2012 2 / 29
Mengerti HTML
Mengikuti model Client/Server untuk komunikasi data dua arah
Memungkinkan Client untuk mengakses Server dengan berbagai
protokol seperti HTTP, FTP, dan Telnet
Memungkinkan Client untuk mengakses informasi dalam beberbagai
media seperti teks, suara dan gambar
Menggunakan model alamat Uniform Resource Locators (URL)
Dasar HTML
Anda ingin menbuat sebuah karya monumental di World Wide Web, anda
harus memulai dari “Jeraminya”, yaitu HTML
HTML : Hyper Text Markup Language
Sama sekali bukan bahasa pemrograman
HTML Digunakan untuk melakukan penandaan terhadap sebuah dokumen
teks
^BTeks ini akan dicetak tebal^B
Simbol mark up yang digunakan oleh HTML ditandai dengan tanda lebih
kecil < dan tanda lebih besar > dan disebut dengan Tag
<B>Teks ini akan dicetak tebal</B>
Perhatikan bahwa tag yang digunakan sebagai tanda penutup akan
diberikan karakter garis miring (/)
Struktur Dasar HTML
File HTML adalah file teks biasa yang mengandung tag-tag HTML, maka
dari itu HTML dapat dibuat dengan menggunakan teks editor biasa, contoh :
Notepad
File HTML mempunyai ekstensi file .htm atau .html Didalam file harus
terkandung struktur sebagai berikut :
Pemrograman Berbasis WEB (HTML) 9/5/2012 3 / 29
<HTML>
…
</HTML>
Tag HTML tidak bersifat case sensitive, jadi <HTML> akan sama dengan
<html>
Struktur lengkap HTML adalah :
<HTML>
<HEAD>
…
</HEAD>
<BODY>
…
</BODY>
</HTML>
Bagian HEAD
Isi bagian HEAD selain judul dokumen tidak akan terlihat oleh pembaca
dokumen tersebut
Elemen-elemen pada bagian HEAD akan mengerjakan tugas-tugas
sebagai berikut :
Menyediakan judul dokumen
Menjembatani hubungan antara dokumen
Memberitahu browser untuk membuat form pencarian
Menyediakan metode untuk mengirim pesan ke tipe browser tertentu
Tag <TITLE>, <BASE>, <LINK>, dan <META>
Pemrograman Berbasis WEB (HTML) 9/5/2012 4 / 29
Tag <TITLE> Digunakan untuk memberi judul dokumen
<TITLE> Judul </TITLE>
Tag <BASE> Digunakan untuk menentukan basis URL sebuah dokumen
<BASE HREF=“//www.alamat.com/direktori”>
Tag <LINK> Digunakan untuk menunjukan relasi antara dokumen HTML
Mempunyai beberapa atribut :
HREF Menunjukan pada URL dokumen lain
REL Mendefinisikan relasi terhadap sebuah dokumen dengan
dokumen lainnya yang berisi informasi tentang personil yang
memberikan konstribusi terhadap dokumen tersebut
REV Mendefinisikan relasi sebuah dokumen HTML dengan
Warna didefinisikan dengan bilangan heksadesimal. Terdiri dari 6 digit, 2
digit pertama mewakili merah, 2 digit kedua mewakili warna hijau, dan 2
digit terakhir mewakili warna biru
Heksadesimal yang digunakan dari 00 hingga FF, semakin kecil
bilangannya, warna semakin gelap
000000 warna hitam, FF0000 warna merah, dan FFFFFF warna putih
Penulisan angka heksadesimal harus didahului dengan tanda pagar #
Black #000000 Maroon #800000 Green #008000
Olive #808000 Navy #000080 Purple #800080
Teal #008080 Gray #808080 Silver #C0C0C0
Red #FF0000 Lime #00FF00 Yellow #FFFF00
Blue #0000FF Fuchsia #FF00FF Aqua #00FFFF
Memberi Komentar
Untuk mempermudah pembacaan kembali kode-kode HTML, harus
ditambahkan komentar ke dalam sebuah dokumen
Agar komentar tersebut tidak terbaca oleh browser, maka harus digunakan
tanda khusus yaitu <!- - dan diakhiri dengan tanda - - >
Pemrograman Berbasis WEB (HTML) 9/5/2012 7 / 29
Contoh :
• <HTML>
• <HEAD>
• <!- - Ini adalah bagian HEAD - - >
• </HEAD>
• <BODY BGCOLOR=#FF0000>
• <!- - Warna latar belakang dokumen adalah merah - - >
• </BODY>
• </HTML>
Memberi Identitas
Identitas perancang web dapat di letakan pada dokumen HTML dengan
menggunakan tag <ADDRESS>
• <HTML>
• <HEAD>
• <TITLE> Penggunaan Address </TITLE>
• </HEAD>
• <BODY>
• Selamat Datang di World Wide Web Amatir <BR> <BR>
• <ADDRESS>
• Dokumen ini dirancang oleh Samsu Rizal <BR>
• Pada tanggal 18 September 2006
• </ADDRESS>
• </BODY>
• </HTML>
Pemrograman Berbasis WEB (HTML) 9/5/2012 8 / 29
Memformat Dokumen HTML
Untuk memformat dokumen HTML ada beberapa tag yang harus
digunakan antara lain :
Tag <BR> Membuat Baris Baru
Tag <P> Memulai suatu paragraf baru
Tag <HR> Membuat garis batas horizontal
Mempunyai beberapa atribut :
ALIGN Merupakan posisi vertikal garis pemisah, nilainya
adalah LEFT, RIGHT, atau CENTER
WIDTH Lebar dari garis batas, nilai dalam pixel atau persen
dari lebar jendela browser
SIZE Menentukan tebal garis batas
NOSHADE Menonaktifkan efek tiga dimensi
COLOR Menentukan warna garis batas
Contoh :
• <HTML>
• <HEAD>
• <TITLE> Menggunakan Garis Batas </TITLE>
• </HEAD>
• <BODY>
• Garis batas biasa <HR>
• Garis batas dengan posisi di kanan, lebar 250 pixel
• <HR ALIGN=RIGHT WIDTH=250>
• Garis batas dengan lebar 30 pixel <HR WIDTH=30>
Pemrograman Berbasis WEB (HTML) 9/5/2012 9 / 29
• Garis batas dengan lebar 30% lebar browser <HR WIDTH=30%>
• Garis batas dengan tebal 5 pixel <HR SIZE=5>
• Garis batas tanpa efek tiga dimensi <HR NOSHADE>
• Garis batas dengan warna tertentu <HR COLOR=#73F9E2>
• </BODY>
• </HTML>
Tag <Hn> Digunakan sebagai Heading sebuah dokumen, nilai n
berkisar antara 1 hingga 7. Tag ini berguna bila
dokumen terdri dari beberapa bab dan subbab
Contoh :
• <HTML>
• <HEAD>
• <TITLE> Penggunaan Heading </TITLE>
• </HEAD>
• <BODY>
• <H1> Bab 1. HTML </H1>
• Ini adalah isi bab 1
• <H2> 1.1 Subbab HTML </H2>
• Ini adalah isi subbab 1.1
• <H3> 1.1.1 Sub-subbab HTML </H3>
• Ini adalah isi sub-subbab 1.1.1
• </BODY.
• </HTML>
Tag <PRE> Membuat tampilan dokumen HTML pada browser sama
dengan tampilan pada teks editor
Pemrograman Berbasis WEB (HTML) 9/5/2012 10 / 29
Contoh :
• <HTML>
• <HEAD>
• <TITLE> Menggunakan tag <PRE> </TITLE>
• </HEAD>
• <BODY>
• <PRE>
• Tag <PRE> sangat berguna untuk menampilkan bentuk seperti ini:
• Klasemen
• Tim Main Menang Seri Kalah
• ========================================
• Tim A 3 2 1 0
• Tim B 3 2 0 1
• Tim C 3 1 1 1
• ========================================
• Atau untuk menampilkan kode program seperti ini:
• For I = 1 To 10
• For J = 1 To 5
• A(I,J) = I*J
• Next
• Next
• </BODY>
• </HTML>
Tag <CENTER> Menampilkan posisi teks rata ditengah
Pemrograman Berbasis WEB (HTML) 9/5/2012 11 / 29
Contoh :
• <HTML>
• <HEAD>
• <TITLE> Penggunaan tag <CENTER> </TITLE>
• </HEAD>
• <BODY>
• Posisi teks ini adalah rata kiri. <BR> <BR>
• <CENTER>
• Posisi teks ini adalah rata tengah
• </CENTER>
• </BODY>
• </HTML>
Memformat Karakter
Format karakter pada dokumen HTML mencakup beberapa hal yaitu :
Logical Format, Physical Format
Tag <BLOCKQUOTE>, Tag <FONT>
Karakter Khusus
Logical Format
<CITE> Untuk menandai suatu kutipan
<CODE> Untuk menampilkan kode-kode pemrograman
<EM> Untuk menandai suatu teks yang ditekankan oleh
penulis
<KBD> Untuk menandai suatu teks yang harus dimasukan
oleh user melalui keyboard
Pemrograman Berbasis WEB (HTML) 9/5/2012 12 / 29
<SAMP> Untuk menandai suatu teks yang dimaksudkan
sebagai contoh
<STRONG> Untuk menandai bagian yang terpenting dari suatu
teks
<VAR> Untuk menampilkan nama variabel
<DFN> Untuk menandai sebuah subdefinisi dari daftar
definisi
Contoh :
• <HTML>
• <HEAD>
• <TITLE> Logical Format </TITLE>
• </HEAD>
• <BODY>
• <CITE>Tom Sawyer</CITE> adalah salah satu tokoh penting di dunia sastra Amerika. <BR> <BR>
• Kode yang paling pertama dipelajari oleh programmer C adalah:
• <CODE>puts("Hello World!");</CODE> <BR> <BR>
• Ia berkata, "Sekali tidak tetap <EM>tidak</EM>." <BR> <BR>
• Untuk berpindah ke direktori root, ketikkan <KBD>cd /</KBD>. <BR> <BR>
• Pada abjad terdapat 5 huruf vokal, yaitu <SAMP>AEIOU</SAMP>. <BR> <BR>
• Hal yang harus diingat-ingat adalah <STRONG>Jangan panik!</STRONG> <BR> <BR>
• Kode program tersebut diiterasi sebanyak <VAR>N</VAR> kali. <BR> <BR>
• <DFN>Trenggiling adalah hewan pemakan semut.</DFN>
Pemrograman Berbasis WEB (HTML) 9/5/2012 13 / 29
• </BODY>
• </HTML>
Physical Format
<B> Untuk menampilkan huruf tebal
<I> Untuk menampilkan huruf miring
<TT> Untuk menampilkan huruf seperti huruf mesin ketik
<U> Untuk menampilkan garis bawah pada suatu kata
<STRIKE> Untuk menampilkan garis horizontal pada bagian
tengah huruf
<BIG> Untuk menampilkan huruf yang lebih besar
<SMALL> Untuk menampilkan huruf yang lebih kecil
<SUB> Untuk menampilkan subscript
<SUP> Untuk menampilkan superscript
Contoh :
• <HTML>
• <HEAD>
• <TITLE> Physical Format </TITLE>
• </HEAD>
• <BODY>
• <PRE>
• <B> Ini adalah huruf tebal </B>
• <I> Ini adalah huruf miring </I>
• <TT> Huruf ini mirip dengan huruf mesin ketik </TT>
• <U> Kalimat ini akan diberi garis bawah </U>
Pemrograman Berbasis WEB (HTML) 9/5/2012 14 / 29
• <STRIKE> Kalimat ini akan diberi garis pada bagian tengah </STRIKE>
• <BIG> Huruf ini berukuran lebih besar </BIG>
• <SMALL> Huruf ini berukuran lebih kecil </SMALL>
• Ini adalah <SUB> subscript </SUB>
• Ini adalah <SUP> superscript </SUP>
• </BODY>
• </HTML>
Tag <BLOCKQUOTE>
Tag ini digunakan untuk menandai bagian yang dikhususkan pada sebuah
dokumen, misalnya kutipan, kata mutiara
Contoh :
• <HTML>
• <HEAD>
• <TITLE> Penggunaan Blockquote </TITLE>
• </HEAD>
• <BODY>
• <PRE>
• Definisi pernikahan menurut Sidney Smith adalah:
• <BLOCKQUOTE>Pernikahan itu ibarat sebuah gunting, yang bersatu tak terpisahkan, sering bergerak ke arah berlawanan, tetapi selalu memotong segala yang hadir di antara mereka. </BLOCKQUOTE>
• </BODY>
• </HTML>
Tag <FONT>
Tag ini digunakan untuk mengatur jenis, ukuran, dan warna huruf