Pemrograman Basis Data Berbasis Web

1
Pemrograman Basis Data Berbasis Web

• Pertemuan Ke-2
• (HTML)

2
Sub Pokok Bahasan

• HTML?
• Istilah-istilah dalam HTML
• Tag Utama dalam struktur dokumen HTML
• Contoh HTML sederhana
• Penggunaan komentar
• Tag-tag dalam ltbodygt

3
HTML?

• singkatan dari HyperText Markup Language
• menentukan tampilan suatu teks dan tingkat
  kepentingan dari teks tersebut dalam suatu
  dokumen.
• Software yang diperlukan
• Text editor sederhana.
• Contoh
• Windows Notepad
• Linux gEdit, mcedit, pico, dan vi.
• Web browser untuk menampilkan dokumen web yang
  dibuat.
• Contoh
• Windows Internet Explorer, Opera dan Firefox
• Linux Firefox dan Conqueror.

4
Istilah-istilah dalam HTML

• Tag - Digunakan untuk menentukan tingkah laku web
  browser. Dinyatakan dengan tanda lebih kecil lt
  (tag awal) dan tanda lebih besar gt (tag
  akhir).Tag kontainer
• ltnamataggt ..... lt/namataggt
• Element Jenis-jenis dari tag. HTML mempunyai
  banyak elemen untuk berbagai keperluan dengan
  berbagai bentuk penggunaan.
• Attribute - Digunakan untuk memodifikasi nilai
  dari elemen HTML. Suatu elemen biasanya akan
  mempunyai banyak atribut.

5
Tag Utama dalam struktur dokumen HTML

• lthtmlgt
• lt! untuk menyatakan suatu dokumen HTML --gt
• ltheadgt
• lt!-- memberikan informasi mengenai dokumen HTML
  gt
• lt!-- tag-tag TITLE, BASE, ISINDEX, LINK,
  SCRIPT, STYLE dan META gt
• lt/headgt
• ltbodygt
• lt!-- menyimpan informasi atau data yang akan
  ditampilkan dalam dokumen HTML gt
• lt/bodygt
• lt/htmlgt

6
Contoh HTML sederhana

• lthtmlgt
• ltheadgt
• lttitlegt HTML lt/titlegt
• lt/headgt
• ltbodygt
• Kami sedang mulai belajar HTML
• lt/bodygt
• lt/htmlgt

7
Penggunaan komentar

• Format
• lt! -- gt
• Fungsi
• Memberi nama aplikasi
• Mendeskripsikan tujuan pengkodean tertentu di
  dalam file
• Memberi nama pengarang
• Memberi tanggal pembuatan
• Memberi nomer versi
• Memberi informasi hak cipta

8
Tag-tag dalam ltbodygt

• Untuk warna latar belakang
• Untuk heading
• Untuk paragraf
• Untuk preformatted text
• Untuk blockquote
• Untuk break
• Untuk font
• Untuk format dokumen
• Untuk garis pemisah horisontal
• Untuk list/daftar
• Untuk memuat gambar
• Untuk hypertext link
• Dan lain-lain

9
Membuat warna latar belakang

• Menggunakan warna
• ltbody bgcolornnnnnngt . . . lt/bodygt

Tampilan
Script lthtmlgt ltheadgt lttitlegt
Penggunaan Latar Belakang Warna lt/titlegt
lt/headgt ltbody bgcolor"cyan"gt Kami
sedang mulai belajar Pemrograman Basis
Data Berbasis Web lt/bodygt lt/htmlgt
10

• Menggunakan gambar
• ltbody backgroundnama_file_gambargt . . .
  lt/bodygt

Tampilan
Script lthtmlgt ltheadgt lttitlegt
Penggunaan Latar Belakang Gambar
lt/titlegt lt/headgt ltbody background"../gambar
/picture01.jpg"gt Kami sedang mulai belajar
Pemrograman Basis Data Berbasis Web
lt/bodygt lt/htmlgt
11
Relative Path

• Dalam direktori yg sama ./
• Dalam direktori sebelumnya ../

12
Heading

• Untuk judul atau sub judul dalam dokumen HTML
• lth1 alignleftcenterrightgt . . . lt/h1gt
• lth2 alignleftcenterrightgt . . . lt/h2gt
• .
• .
• lth6 alignleftcenterrightgt . . . lt/h6gt

Tampilan
Script lthtmlgt ltheadgt lttitlegt Heading
lt/titlegt lt/headgt ltbodygt lth1
align"center"gt Heading 1 Materi HTML lt/h1gt
lth2 align"center"gt Heading 2 Materi HTML lt/h2gt
lth3 align"center"gt Heading 3 Materi HTML
lt/h3gt lth4 align"center"gt Heading 4 Materi
HTML lt/h4gt lth5 align"center"gt Heading 5
Materi HTML lt/h5gt lth6 align"center"gt Heading
6 Materi HTML lt/h6gt lt/bodygt lt/htmlgt
13
Paragraf

• Paragraf yang bisa diatur perataannya (kiri,
  tengah, kanan)
• ltp alignleftcenterrightgt . . . lt/pgt
• Untuk Tulisan awal paragraph Gunakan nbsp
  sesuai yang diinginkan

Script lthtmlgt ltheadgt lttitlegt Paragraf
lt/titlegt lt/headgt ltbodygt lth2
align"center"gt Materi HTML lt/h2gt ltp
align"right"gtKami sedang mulai belajar
Pemrograman Basis Data Berbasis Web. Pada awal
materi kami diperkenalkan pada konsep dasar Web
lt/pgt ltp align"left"gtSaat ini masuk ke materi
Dasar-dasar HTML lt/pgt lt/bodygt lt/htmlgt
Tampilan
14
Preformatted Text

• Untuk menampilkan teks sama seperti yang
  diketikkan dalam dokumen HTML
• ltpregt . . . lt/pregt

15
Blockquote

• Untuk menulis kutipan teks
• ltblockquotegt . . . lt/ blockquote gt

16
Break

• Untuk menulis teks pada baris berikutnya
• ltbrgt

17
Font

• Ukuran font
• ltfont sizengt . . . lt/fontgt
• Jenis font
• ltfont sizen facejenis_fontgt . . . lt/fontgt
• Warna font
• ltfont sizen facejenis_font colorwarnagt .
  . . lt/fontgt

18
Format dokumen

• Bold
• ltbgt . . .lt/bgt
• Emphasized
• ltemgt . . . lt/emgt
• Italic
• ltigt . . . lt/igt
• Superscript
• ltsupgt . . .lt/supgt
• Subscripted
• ltsubgt . . . lt/subgt
• Struck trough
• ltdelgt . . . lt/delgt

19
Garis pemisah horisontal

• Garis horisontal untuk memisahkan teks dengan
  teks lain.
• lthr alignleftcenterright sizen
  widthnnn noshadegt lt/hrgt

20
List/Daftar

• Unordered lists ltULgt daftar item dengan tanda
  bullet.
• ltul typediscsquarecircle gt . . .
  lt/ulgt
• Ordered Lists ltOLgt untuk membuat daftar item
  yang terurut.
• ltol type1aAIi" startn gt . .
  . lt/olgt
• Definition Lists ltDLgt untuk menjelaskan
  istilah-istilah.
• ltdlgt . . . lt/dlgt
• ltdtgt . . . lt/dtgt
• ltddgt . . . lt/ddgt
• Menu List menampilkan item-item yang mempunyai
  link ke page lain.
• ltmenugt . . . lt/menugt
• Directory List (DIR) untuk daftar item yang
  pendek atau kurang dari 20 karakter.
• ltdirgt . . . lt/dirgt

21
Memuat Gambar

• Memuat gambar ke dalam halaman Web
• ltimg srcURLname heightn widthn
  aligntopcenterbottom /gt

Tampilan
Script lthtmlgt ltheadgt lttitlegt Insert
Gambar lt/titlegt lt/headgt ltbodygt ltbgt Aloooo
... lt/bgt ltimg src"./TFR2A.gif" gt
lt/bodygt lt/htmlgt
22
Hypertext Link

• Format
• lta hrefaddress gt . . . lt/agt
• Link ke dokumen lain
• lta hrefnama_dokumen gt . . . lt/agt
• Link ke bagian tertentu dalam dokumen yang sama
• lta hreftarget gt . . . lt/agt
• lta hreftarget gt . . . lt/agt
• Link ke alamat URL atau WebSite
• lta hrefalamat_URL gt . . . lt/agt
• Link ke alamat Email
• lta hrefmailtoalamat_email gt . . . lt/agt
• Link File yang akan didownload
• lta hrefnama_file gt . . . lt/agt

23
Summary

• HTML digunakan untuk menentukan tampilan suatu
  teks dan tingkat kepentingan dari teks tersebut
  dalam suatu dokumen
• Tag-tag utama dalam dokumen HTML adalah ltheadgt
  dan ltbodygt.
• ltheadgt digunakan untuk memberikan informasi
  mengenai dokumen HTML, seperti TITLE, TITLE,
  BASE, ISINDEX, LINK, SCRIPT, STYLE dan META.
• ltbodygt digunakan untuk menyimpan informasi atau
  data yang akan ditampilkan di dalam dokumen HTML.
  Di dalam tag ini, dapat dilakukan berbagai macam
  pengaturan, misalnya mengatur warna latar
  belakang, membuat heading, membuat paragraf,
  membuat preformatted text, membuat blockquote,
  membuat break, memformat font, memformat dokumen,
  membuat garis pemisah horisontal, membuat
  list/daftar, memuat gambar, membuat hypertext
  link, dan lain-lain

24
Daftar Pustaka

• Chris Bates 2006. Web Programming Building
  Internet Applications, Third Edition, John Wiley
  Sons Ltd, England.
• Husni 2007. Pemrograman Database Berbasis Web,
  Graha Ilmu, Yogyakarta.
• Sebesta, R.W. 2002, Programming the World Wide
  Web, Addison Wesley.
• Sutarman, S.Kom 2003. Membangun Aplikasi Web
  dengan PHP dan MySQL, Graha Ilmu, Yogyakarta.

25
Tugas home page

• Tema pribadi
• Data
• Keahlian
• Tema menarik
• Harus ada gambar (sesuai dengan materi bab 2)
• Link ke halaman lain
• Minimal 3 halaman