1 Pemrograman Internet 1 D3 - Teknik Informatika m maatteerrii:: H HTTM MLL ++ C CS SS S ++ JJA AV VA AS SC CR RIIP PTT STMIK AMIKOM YOGYAKARTA YOGYAK...
m maatteerrii:: H HTTM MLL ++ C CS SS S ++ JJA AV VA AS SC CR RIIP PTT
STMIK AMIKOM YOGYAKARTA YOGYAKARTA 2008
WIDHIARTA, S. KOM
W idhiarta, S. Kom
PEMROGRAMAN INTERNET 1
D3 – Teknik Informatika
I. HTML 1.1
Pengertian HTML
1.2
Dasar-Dasar HTML
1.3
Mengenal Tag
1.4
Pengaturan Properti Halaman Web
1.5
Heading, Paragraph & Break
1.6
Membuat halaman web
1.7
Pemformatan karakter
1.8
Listing
1.9
Marquee
1.10
Menempelkan image
1.11
Membuat Link
1.12
Membuat Table
1.13
Grouping Element
1.14
Membuat Form
1.15
Frame
PERHATIAN! TUGAS DAN QUIS DAPAT DIBERIKAN SEWAKTU-WAKTU TANPA PEMBERITAHUAN TERLEBIH DAHULU
2
W idhiarta, S. Kom
I. HTML 1. PENGERTIAN HTML HTML ( hypertext markup language ) merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. Karena itu, untuk bisa melakukan pemrograman aplikasi di atas web .Anda harus terlebih dahulu menguasai HTML. Walaupun sekarang telah banyak terdapat paket aplikasi yang dapat digunakan untuk membuat halaman web secara WYSIWYG ( what you see is what you get) seperti Frontpage, DreamWeaver, Netsccape Composer dan masih banyak lagi, namun tetap harus menguasai tag-tag HTML terutama untuk membuat aplikasi di internet. 2. DASAR-DASAR HTML HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (hypertext markup language). Dikatakan markup language karena HTML berfungsi untuk memformat file dokumen teks biasa untuk bisa ditampilkan pada web browser sesuai keinginan. Hal tersebut dapat dilakukan dengan menambah elemen atau sering disebut sebagai tagtag. Elemen HTML biasanya berupa tag-tag yang berpasangan dan setiap tag ditandai dengan simbol < dan >. Pasangan dari sebuah tag ditandai dengan tanda `/`. Misalnya pasangan dari tag adalah . Dalam hal ini disebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen bila ditulis dengan atributnya adalah sebagai berikut : . Dalam penulisan tag HTML tidaklah case sensitive artinya penggunaan huruf kecil ataupun kapital tidaklah menjadi masalah. 3. MENGENAL TAG Tag adalah kode yang digunakan untuk me-mark-up teks ASCII sehingga membentuk file html. Teks ASCII Contoh: homepage à oleh browser akan ditampilkan sebagai homepage homepage à oleh browser akan ditampilkan sebagai homepage
3
W idhiarta, S. Kom
Kode Warna Kombinasi per dua digit RGB (red, green,blue) .
Warna
Heksadesimal
White
#FFFFFF
Black
#000000
Red
#FF0000
Green
#00FF00
Blue
#0000FF
Magenta
#FF00FF
Cyan
#00FFFF
Yellow
#FFFF00
Aquamarine
#70DB93
Chocolate
#5C3317
Violet
#9F5F9F
Brass
#B5A642
Copper
#B87333
Pink
#FF6EC7
Orange
#FF7F00
4. PENGATURAN PROPERTI HALAMAN WEB Properti dokumen diatur melalui atribut-atribut yang terdapat dalam elemen . Sebagai contoh adalah pengaturan warna latar belakang halaman, warna teks, warna link dan lain-lain. Atribut elemen body background = lokasi dan nama file (latar belakang image dan dokumen) bgcolor
= warna ( warna latar belakang dokumen, default putih)
text
= warna ( warna teks dokumen, default hitam)
link
= warna ( warna link dokumen, default biru )
vlink
= warna ( warna visited link dokumen, default ungu)
alink
= warna ( warna active link dokumen, default merah)
5. HEADING, PARAGRAPH DAN BREAK Tag heading berfungsi untuk memformat heading ( judul dan sub-judul ) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada tujuh buah heading yang dikenal di HTML, yaitu dari
sampai
.
4
W idhiarta, S. Kom
Tag paragraph
berfungsi layaknya untuk pengaturan antar paragraph dalam halaman web anda. Dalam elemen paragraph terdapat atribut : align = [left | center | right] yang berfungsi sebagai pengaturan perataan paragraph, jadi cukup pilih salah satu dari ketiga pilihan tanpa diberi kurung buka dan tutup, sebagai default-nya adalah left. Anda dapat memilih perataan kiri, tengah atau kanan. Tag paragraph berfungsi untuk memberikan baris baru suatu paragrap dalam halaman web anda. Tag Break tidak memerlukan tag penutup break. Tag Horisontal Ruler
berfungsi untuk menampilkan garis horizontal di dalam halaman web anda. Tag Horisontal Ruler tidak memerlukan elemen penutup . (standarisasi terbaru, semua tag pembuka memakai tag penutup). à à Atribut Elemen Horisontal Rules align
= [ left / center / right ] (perataan horizontal, default center)
size
= pixel ( tebal garis, default 2 )
noshade
= ( garis solid)
Contoh:
Heading one
Heading two
Heading three
Heading four
Heading five
Heading six
6. MEMBUAT HALAMAN WEB 1. Buka program aplikasi Notepad. Cara: Klik tombol Start Menu à Programs à Accessories à Notepad
Gambar Notepad
5
W idhiarta, S. Kom
2. Ketik tag HTML seperti berikut.
*keterangan: à tag agar web browser mengenali halaman web ditulis dalam HTML (Hypertext Markup Language) diakhiri dengan à tag sebagai header sebuah web, diakhiri dengan à tag untuk menampilkan informasi di titlebar diakhiri dengan à semua yang ditampilkan di dalam isi web ditulis disini, diakhiri dengan
Hasil tampilan di browser
6
W idhiarta, S. Kom
3. Save File Klik File à Save As
Buat Folder sesuai kelas masing –masing jika belum ada. Buat folder sesuai NIM masing-masing jika belum ada. Simpan file dengan ekstensi .html dan ubah Save as type menjadi All files.
Buat folder: PI1 – Kelas – NIM (xx.xx.xxxx)
7
W idhiarta, S. Kom
LATIHAN Latihan01 :
8
W idhiarta, S. Kom
Latihan02 :
7. PEMFORMATAN KARAKTER Font pada halaman HTML dapat diformat sesuai dengan desain yang anda tentukan, baik ukuran, jenis maupun warna dengan menggunakan tag . Atribut Elemen Font size = angka (ukuran huruf, default 3) color = warna (warna huruf, default black à #000000 - #FFFFFF ) face = jenis huruf (jenis huruf, default Times New Roman) Elemen Ragam Karakter
break = ganti baris
…
menghasilkan huruf tebal (bold)
…
menghasilkan huruf miring (italic)
…
menghasilkan huruf bergaris bawah (underline)
Preformatted text Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya. <pre> ....
9
W idhiarta, S. Kom
Latihan03 :
8. LISTING Properti
digunakan untuk menampilkan informasi dalam bentuk daftar (list ). Ada dua jenis daftar yang dikenal di HTML, yaitu list dalam format bullet (unordered list
) dan dalam bentuk nomor (unordered list ). Atribut Elemen List Unordered list Tag
Attribute TYPE
Value
Description
SQUARE
Bullet Kotak
DISC
Bullet Titik
CIRCLE
Bullet Lingkaran
Latihan04 : UnOrdered list
10
W idhiarta, S. Kom
Output di Browser
Ordered list Tag
Attribute TYPE
START
Value
Description
I
Upper Roman
i
Lower Roman
A
Uppercase
a
Lowercase
n
Begin Number
Latihan05 : Ordered list
11
W idhiarta, S. Kom
9. MARQUE <marquee>Text berjalan disini <marquee direction="right" behavior="slide" scrollamount="8" scrolldelay="88">Text berjalan disini Bagaimana membuat teks berjalan secara Vertikal?
10. MENEMPELKAN IMAGE Anda dapat menampilkan gambar dalam halaman HTML, format filenya berupa JPG atau GIF. Untuk menampilkannya digunakan tag IMG. (standarisasi: semua tag menggunakan huruf kecil). Atribut Elemen Image Src
= lokasi dan nama gambar
alt
= teks ( teks alternatif )
width
= pixel ( lebar gambar )
heigh
= pixel ( tinggi gambar)
align
= [ top | middle | bottom | left | right ] ( perataan gambar )
12. MEMBUAT TABEL Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan dalam bentuk tabel pada HTML, digunakan tag
…
. Elemen tabel berisi properti
…
untuk menentukan baris (table row) yang didalamnya terdapat properti
…
untuk menampilkan data pada setiap sel tabel (table data). Struktur lengkap dari elemen tabel adalah sebagai berikut: Atribut Elemen Table width
= panjang ( lebar tabel, pixel atau persen )
height
= panjang ( tinggi tabel, pixel atau persen)
border
= pixel ( tebal garis tepi )
cellspacing
= pixel ( spasi antar sel )
cellpadding
= pixel ( spasi di dalam )
align
= [ left | center | right ] ( perataan tabel)
bgcolor
= warna ( warna latar belakang tabel)
Atribut Table Row align
= [left| center|right] (perataan sebaris sel secara horizontal)
valign
= [top|middle|bottom] (perataan sebaris sel secara vertical)
bgcolor
= warna ( warna latar belakang baris)
Atribut Table Data rowspan
= angka (baris yang di span oleh sel)
colspan
= angka (kolom yang di span oleh sel)
align
= [ left | center | right ] ( perataan horizontal)
valign
= [top | middle | bottom ] (perataan vertical)
width
= pixel ( lebar sel, pixel atau persen )
height
= panjang ( tinggi sel, pixel atau persen)
bgcolor
= warna ( warna latar belakang sel)
13
W idhiarta, S. Kom
à Latihan Table
à Pengembangan Table dengan atribut tambahan.
14
W idhiarta, S. Kom
13. GROUPING ELEMENT Tag DIV dan SPAN di gunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content sementara Div digunakan untuk blocklevel content. Latihan Div dan Span :
14. MEMBUAT FORM Form HTML merupakan tag yang paling penting khususnya dalam membuat aplikasi berbasis web. Form merupakan properti masukan yang dapat berupa textbox, check box, radio button, dan button. Untuk mendeklarasikan sebuah form digunakan tag
. Di dalam tag ini akan mendefisinikan elemen-elemen form seperti yang telah disebutkan di atas. Selain tag elemen form juga dapat menuliskan sembarang text, tag, image. Atribut Elemen Form action
= lokasi dan nama file ( yang menangani form )
method
= [ get | post ] ( metode HTTP untuk men-submit form )
15
W idhiarta, S. Kom
Properti Masukan Pada Elemen Form a. Text Box Digunakan untuk memasukkan input berupa text. size
= ukuran dari textbox dalam karakter, default 20
maxsize
= maksimal banyaknya karakter yang dapat diterima
name
= nama dari variabel yang dikirim ke suatu aplikasi
value
= akan menampilkan isinya sebagai nilai default
b. Password Digunakan untuk memasukkan password. size
= ukuran dari textbox dalam karakter, default 20
maxsize
= maksimal banyaknya karakter yang dapat diterima
name
= nama dari variabel yang dikirim ke suatu aplikasi
c. Hidden Digunakan untuk mengirim data ke suatu aplikasi yang tidak diinginkan untuk dilihat oleh browser. name
= nama dari variabel yang dikirim ke suatu aplikasi
value
= nilai dari variabel
d. Check Box Check box digunakan untuk dapat memilih lebih dari satu pilihan. name
= nama dari variabel yang dikirim ke suatu aplikasi
value
= nilai dari variable
checked
= ( checkbox yang sudah ditandai )
e. Radio Button Radio Button digunakan untuk dapat memilih hanya satu pilihan.
f.
name
= nama dari variabel yang dikirim ke suatu aplikasi
value
= nilai dari variabel
checked
= ( checkbox yang sudah ditandai )
Push Button Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan suatu aksi.
16
W idhiarta, S. Kom
name
= nama dari variabel yang dikirim ke suatu aplikasi
value
= label teks diatas tombol
g. Submit Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilainya ke suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen FORM. name
= nama dari variabel yang dikirim ke suatu aplikasi.
value
= label teks diatas tombol
h. Image Submit Button Digunakan untuk menggantikan tombol standar submit dengan image. name i.
= nama dari variabel yang dikirim ke suatu aplikasi
Reset Digunakan untuk mereset semua masukan form. value
j.
= text label on the button
Text Area Elemen untuk memasukkan teks secara leluasa seperti notepad. name
= nama dari varibel yang dikirim ke suatu aplikasi
rows
= panjang baris dalam karakter
cols
= tinggi dalam karakter
k. Select<select>… Daftar isi dalam property select menggunakan tag
