Uraian Materi 1 Web Dasar
setiap h dalam
dari bro
-
Sedang dari sua
Set atau .html
type ke da
tersebut ak HTML terse
tampilan p pada TIT
apa yang halaman w
tag-tag ya tampiland
BODY … c. Penyunting
Berikut in penyunting
1. Headin 2. Garis h
3. Teks m 4. Teks te
5. Teks d 6. Center
7. Paragr 8. Alignm
9. Jenis h 10. Superscr
11. Subscr 12. Listdaf
p halaman web memiliki judul, dan judul terse TITLE … TITLE. Judul ini akan muncu
browser.
-
ngkan tag BODY … BODY adalah tag suatu halaman web.
etelah tag tersebut di atas ditulis, simpan dal ml misal index.htm akan tetapi terlebih dahulu
dalam All Files. Kemudian tentukan letak dir t akan disimpan, selanjutnya klik Save. Selanju
ersebut dipanggil dengan browser untuk meliha pada browser di atas, dapat terlihat bahwa a
ITLE … TITLE akan muncul pada titleb ng ditulis pada BODY … BODY akan
web. Untuk selanjutnya, kita hanya akan yang ada di dalam BODY … BODY
desain web tergantung pada tag yang d … BODY.
ing Text ini berbagai macam tag yang dapat dig
ingan teks. ding
s horizontal miring
tebal dengan garis bawah
ter graf
ment Rata kiri, tengah, kanan, justifikasi s huruf
erscripts scripts
daftar
46 sebut dituliskan di
ncul dalam titlebar
-
tag berisi content dalam format .htm
ulu ubah Save as
direktori mana file njutnya document
lihat hasilnya. Dari a apa yang ditulis
ebar browser dan an muncul pada
n memperhatikan karena bentuk
ditulis di dalam
digunakan untuk
47
1. He
Fun jud
Sin H
H H
H Ket
Co H
H TI
H B
H H1
den B
H
eading
ungsi : untuk membuatmemilih ukuran teks, u udul karena ukurannya yang besar.
intaks :
H1 … H1, H2 … H2,
H3 … H3, sd H6 … H6
et : Semakin besar angka 1 sd 6 maka
ukuran hurufnya. ontoh
: HTML
HEAD TITLEPenyuntingan teks dengan HeadingT
HEAD BODY
H1Teks ini ditulis dengan 1H1 H2Teks ini ditulis
engan H2H2 BODY
HTML s, umumnya untuk
ka semakin kecil
TITLE
Co apa
2. Ga
Fun lay
Sin Co
H H
T H
B H
H B
H
Gambar 19. Tampilan Heading 1 dan hea
oba hasilnya Anda lihat di browser, selanjutny pabila digunakan H3…H3, H4…H4
Garis horizontal
ungsi :
membuat garis
horizontal ayarhalaman web
Sintaks : HR
Contoh :
HTML HEAD
TITLEGaris HorizontalTITLE HEAD
BODY H1Di bawah tulisan ini ada garis horizontal
HR BODY
HTML
48
eading 2.
tnya bandingkan 4, dst.
l penuh
pada
lH1
49 Ke
3. Te Sin
Co H
H T
H B
H B
H
Gambar 20. Tampilan garis horizon
Ket : Penulisan HR bisa terletak dibawah su sampingnya.
Teks miring Italic Sintaks
: I … I
Contoh :
HTML HEAD
TITLEPenyuntingan teks dengan italicTITL HEAD
BODY H1ITeks ini ditulis dengan H1 dan miring
BODY HTML
ontal.
suatu teks atau di
ITLE
gIH1
4. Te Sin
Co H
H T
H B
H B
H
Gambar 21. Tampilan font miring ita
Teks tebal bold Sintaks
: B … B
Contoh :
HTML HEAD
TITLEPenyuntingan teks dengan boldTITL HEAD
BODY H1BTeks ini ditulis dengan H1 dan bold
BODY HTML
Gambar 22. Tampilan font bold.
50
italic.
TLE
BH1
ld.
51 Ap
be H
H T
H B
H B
B H
Pe mi
I teb
B teb
I ata
B Apabila diinginkan suatu teks miring dan teba
berikut ini. HTML
HEAD TITLEPenyuntingan teks dengan italic dan b
HEAD BODY
H1IBTeks ini ditulis dengan H1, miring BIH1
BODY HTML
Penulisan I, B dan I, B bisa dibolak misalnya
IBTeks ini ditulis dengan H1, miring dan tebal BI atau
BITeks ini ditulis dengan H1, miring dan tebal IB atau
IBTeks ini ditulis dengan H1, miring dan te atau
BITeks ini ditulis dengan H1, miring dan te
Gambar 23. Tampilan bold dan italic
bal, penulisannya
n boldTITLE
g dan tebal
lak-balik,
n n
n tebal IB
n tebal BI
italic.
5. Te Sin
Co H
H TI
H B
H baw
B H
Apa und
H H
TI baw
T H
B H
mir
Teks dengan garis bawah underlined Sintaks
: U … U
Contoh :
HTML HEAD
TITLEPenyuntingan teks dengan underline HEAD
BODY H1UTeks ini ditulis dengan H1 dan bergar
awahUH1 BODY
HTML
Gambar 24. Tampilan garis bawah und
pabila suatu teks dengan gabungan sifat bold nderlined maka penulisannya
HTML HEAD
TITLEPenyuntingan teks dengan bold, italic, awah
TITLE HEAD
BODY H1IBUTeks ini ditulis dengan H1, bol
iring
52 TITLE
aris
nderline.
ld, italic, dan
ic, dan bergaris
bold, italic dan
53 U
B
6. Ce
Fu Sin
Co H
H T
H B
C B
H UBIH1
BODY HTML
Gambar 25. Tampilan underline, bold da
Center
Fungsi : membuat teks tunggal berada di t
Sintaks : center … center
Contoh :
HTML HEAD
TITLETeks CenterTITLE HEAD
BODY CENTERTulisan ini berada di tengahCENT
BODY HTML
dan italic.
di tengah halaman
NTER
7. Pa
Fun yan
Sin Co
H H
TI H
B H
P
P
B
Gambar 26. Tampilan tulisan pada posis
Paragraf
ungsi : untuk memisahkan paragraf yang sa
ang lain intaks
: P … P ontoh
: HTML
HEAD TITLEParagrafTITLE
HEAD BODY
H1Contoh paragrafH1HR PDi dalam web ini, terdapat informasi te
KPTK Lembaga Pengembangan dan Pendidik dan Tenaga Kependidikan Bid
Perikanan, Teknologi Informasi dan Komun KPTK adalah UPT Pusat di bawah naun
Jenderal Guru dan Tenaga Kepend GTK.P
P Meskipun telah LPPPTK KPTK adalah baru, namun tugas dan tanggungjawabnya
lembaga lain yang di bawah Dirjen GTK se dan LPPKS.P
BODY 54
sisi center.
g satu dengan
tentang LPPPTK n Pemberdayaan
Bidang Kelautan, unikasi. LPPPTK
aungan Direktorat ndidikan Dirjen
h lembaga yang nya sama dengan
seperti PPPPTK
55 H
8. Alig
Fun
atau H
H H
H Con
HT HE
TIT H
BO H1
HTML
Gambar 27. Tampilan paragraf.
Alignment
ungsi : untuk mengatur format tampilan
apakah rata kiri, kanan, kiri da tengah,
Sintaks :
P ALIGN=right…P untuk rata ka
P ALIGN=left…P untuk rata kir
P ALIGN=center…P untuk rata ten
P ALIGN=justify…P untuk rata kir
kanan tau
H? ALIGN=right…H? H? ALIGN=left…H?
H? ALIGN=center…H? H? ALIGN=justify…H?
ontoh :
HTML HEAD
TITLEAlignment ParagrafTITLE HEAD
BODY H1 ALIGN=rightContoh paragrafH1HR
f.
ilan teksparagraf dan kanan, atau
kanan kiri
tengah kiri dan
P
P
B H
G
9. Jen hur
Fun Sin
SIZ
Co H
H P ALIGN=justifyDi dalam web ini, terdapat in
LPPPTK KPTK
Lembaga Pengem
Pemberdayaan Pendidik dan Tenaga Kepen Kelautan,
Perikanan, Teknologi
In Komunikasi. LPPPTK KPTK adalah UPT P
naungan Direktorat
Jenderal Guru
Kependidikan Dirjen GTK.P P ALIGN=justify Meskipun telah LPPPTK
lembaga yang baru, namun tugas dan tan sama dengan lembaga lain yang di baw
seperti PPPPTK dan LPPKS.P BODY
HTML
Gambar 28. Tampilan paragraf perataan kiri ka
Jenis dan ukuran huruf
ungsi : Untuk mengubah jenis huruf dan uk
intaks : FONT FACE=”jenis_huruf”
IZE=”ukuran_huruf” ... FONT Jenis_huruf
: Times new roman, arial, ver Ukuran_huruf : 1, 2, 3, 4, ...
ontoh :
HTML HEAD
56 informasi tentang
embangan dan
pendidikan Bidang Informasi
dan T Pusat di bawah
dan Tenaga
K KPTK adalah anggungjawabnya
awah Dirjen GTK
i kanan justify.
ukuran huruf
verdana, dll
57 TI
H B
FO jen
Ver FO
hur B
H
10. Su
Fun nai
S Co
H H
TI H
B Per
ben B
H TITLEJenis dan Ukuran FontasiTITLE
HEAD BODY
FONT FACE=”Verdana” SIZE=”1” Teks ini di enis huruf
erdana dan ukuran 1 pt FONTBRBR FONT FACE=”Arial” SIZE=”3” Teks ini ditulis
uruf Arial dan ukuran 3 pt FONT BODY
HTML
Superscripts
ungsi : membuat teks
aik indeks atas Sintaks: SUP ... SUP
ontoh :
HTML HEAD
TITLESuperscriptsTITLE HEAD
BODY ersamaan xSUP2SUP+2x-4=0 adalah sa
entuk persamaan kuadrat BODY
HTML i ditulis dengan
lis dengan jenis
h salah satu
11. Su
Fun Sin
Co H
H TI
H B
Ru H
H B
H
Gambar 29. Tampilan fungsi teks super
Subscripts
ungsi: membuat teks turun indeks bawah intaks
: SUB ... SUB ontoh
: HTML
HEAD TITLESubscriptsTITLE
HEAD BODY H1
umus kimia asam sulfat adalah SUB2SUBSOSUB4SUB
H1 BODY
HTML
58
erscripts.
59
12. List
Fun Sin
Un O
LI LI
LI LI
O Un
List U
LI LI
LI LI
U Co
H
Gambar 30. Tampilan fungsi teks subs
Listdaftar
ungsi: membuat daftarlist intaks
: ntuk daftar yang memperhatikan urutan Orde
OL LI item 1 LI
LI item 2 LI LI item 3 LI
LI item 4 LI OL
ntuk daftar yang tidak memperhatikan urutan ist
UL LI item 1 LI
LI item 2 LI LI item 3 LI
LI item 4 LI UL
ontoh :
HTML
bscripts.
dered List
n Unordered
H B
Co O
LI LI
LI LI
O B
Co U
LI LI
LI LI
U B
H HEADTITLEDaftarListTITLEHEAD
BODY ontoh list yang urut: BR
OL LIItem 1 LI
LIItem 2 LI LIItem 3 LI
LIItem 4 LI OL
BRBR ontoh list yang tak urut: BR
UL LIItem 1 LI
LIItem 2 LI LIItem 3 LI
LIItem 4 LI UL
BODY HTML
Gambar 31. Tampilan list dan bulle
60
llet.
61 d.
Membuat Di dalam se
dan kolom jumlah bar
Berikut con baris dan 1
TABL TR
TR TABL
Perhat TR…
yang m Seand
menjad TR
Berarti HTML
TABL TR
TD TR
TD TR
TD TABL
Apabila akan t
tepibo ukuran
Apabila ukuran
at Tabel sebuah tabel, terdapat elemen-elemen yang
lom. Jadi ketika anda ingin membuat tabel, aris dan kolomnya.
contoh tag HTML apabila diinginkan membuat n 1 kolom.
BLE TDBaris ke-1TDTR
TDBaris ke-2TDTR BLE
atikan contoh di atas, setiap kali baris baru d …TR. Di dalam TR…TR terdapat
menandai adanya kolom. ndainya dalam 1 baris terdapat 2 kolom berarti
jadi TDKolom ke-1TDTDKolom ke-2TD
rti apabila diinginkan tabel dengan 3 baris dan L nya adalah
BLE TDBaris I, Kolom ITDTDBaris I, Kolom
TR TDBaris II, Kolom ITDTDBaris II, Kolo
TR TDBaris III, Kolom ITDTDBaris III, Ko
TR BLE
bila tag tersebut disisipkan dalam BODY… tampil tampil tabel pada halaman web, ta
border. Untuk menampilkan bordernya, sisipk an’ pada TABLE, dengan ukuran = 0, 1, 2, …
bila ukuran = 0, maka tanpa border. Dan sem an maka semakin tebal bordernya.
g terdiri dari baris el, tentukan dulu
at tabel dengan 2
u ditandai dengan at TD…TD
rti tag HTMLnya TDTR
an 2 kolom, tag
lom II
olom II
Kolom II
…BODY maka tapi tanpa garis
sipkan ’BORDER = , …
semakin besar nilai
Contoh HTML
HEAD BODY
Contoh TABL
TR TD
TR TD
TR TD
TABL BOD
HTM
Berikut Tabel 3
Atri WID
BGC
ALIG BAC
toh: ML
ADTITLEDaftarListTITLEHEAD DY
toh Tabel BR BR BLE BORDER=1
TDBaris I, Kolom ITDTDBaris I, Kolo TR
TDBaris II, Kolom ITDTDBaris II, Kolo TR
TDBaris III, Kolom ITDTDBaris III, Ko TR
BLE DY
ML
Gambar 32. Tampilan fungsi tabe
kut ini beberapa atribut yang bisa disisipkan pa el 3. Atribut dan fungsi tabel.
tribut Fungsi
IDTH = panjang Mengatur lebar ta
GCOLOR = warna Memberi efek war
pada tabel LIGN = [left | center |
right] Perataan tabel
ACKGROUND=url Memberi efek bac
menggunakan ga
62 lom II
olom II Kolom II
bel.
pada TABLE
tabel arna latar
ackground gambar
63 Ketera
•
Un apa
ada diin
50
•
Sel sep
800 me
leb
•
ALI kiri
•
Un dig
e. Link Link adal
menghu-b menghubu
yang berbe Sintaks
A HR TARGE
A HR Contoh
Artinya halama
file yan A HR
TARGE Contoh
rangan : ntuk nilai variabel ’panjang’ di atas, dapat be
pabila dituliskan TABLE WIDTH=100 m dalah sepanjang horizontal halaman web.
iinginkan lebar tabelnya separo halaman w 0 dst.
elain dapat pula bernilai sejumlah p sepanjang horizontal halaman web, jumlah p
00. Dengan perbandingan tersebut, Anda d embuat perbandingan sendiri jumlah pixel unt
ebar tabel. LIGN digunakan untuk meletakkan tabel apak
iri atau di kanan. ntuk nilai variabel ’warna’ adalah sama
igunakan pada atribut COLOR pada FONT.
alah suatu metode dalam perancangan -bungkan file yang satu dengan file ya
bungkan halaman dengan gambar yang bera rbeda.
aks : REF=lokasi halaman atau URL
GET=_BLANKNama LinkA Contoh: REF=index2.htmKlik di siniA
toh di atas adalah membuat link ke halaman in ya ketika diklik Klik di sini selanjutnya akan ta
man index2.htm berada dalam 1 direktori yang ang berisi link tersebut.
REF= http:www.yahoo.com
GET=_BLANKwww.yahoo.comA toh di atas adalah untuk membuat link ke situs
berupa artinya maka lebar tabel
b. Berarti apabila web, diberi nilai
pixelnya. Untuk h pixelnya adalah
diharapkan bisa untuk menentukan
akah di tengah, di a seperti yang
.
n website untuk yang lain, atau
erada pada lokasi
index2.htm. tampil isi dari
ng sama dengan
us yahoo.com
f. Menampilk
Untuk mem sintaks I
Ketera lokasi
maupu Contoh
IMG S Tag H
nama gamba
halama IMG S
Tag HT seperti
Berikut Tabel 4
Atri BOR
WID HEIG
ALIG
Ketera Nilai ’u
Apabila Nilai ’u
Contoh IMG S
ALIGN pilkan Gambar
emasukkaninsert gambar ke dalam halaman IMG SRC=lokasi gambar
rangan: si gambar berisi letak file gambar, bisa berup
pun URL dan nama filenya. toh :
G SRC=gambar1.jpg HTML di atas adalah untuk menyisipkan g
a file gambar1.jpg ke dalam halaman we bar1.jpg berada dalam 1 direktori yang
man yang ada tag tersebut. G SRC=http:myweb.comimagegambar2.gif
HTML di atas untuk menyisipkan file gambar d rti yang ditulis dalam URL.
kut beberapa atribut yang dapat disisipkan pad el 4. Atribut dan fungsi untuk gambar.
tribut Fungsi
ORDER = ukuran Memberi border
gambar IDTH = ukuran
Menyatakan uku gambar
EIGHT = ukuran Menyatakan uku
gambar LIGN = [left | center |
right] Mengatur letak ga
rangan : i ’ukuran’ pada BORDER = 0, 1, 2, …
bila BORDER = 0 maka border tidak muncul. i ’ukuran’ pada WIDTH dan HEIGHT adalah uku
toh G SRC=gambar2.gif BORDER=1 WIDTH=200
N=LEFT
64 an web digunakan
upa direktori
gambar dengan web. Adapun file
g sama dengan if
r dengan letaknya ada IMG
ergaris tepi bar
kuran lebar ar
kuran tinggi bar
k gambar
. ukuran pixel
200 HEIGHT=100
65 Tag di
gamba pixel, se
g. Hypertext P Ban
internet. N statis. Keb
yang dinam user deng
informasi d otomatis.
Untu pemrogram
perintah da
1.
Client si
2.
Server si Pad
client atau ini adalah p
programmin pemrogram
PHP, ASP, PHP
Lerdorf. PH mencatat p
Rasmus sa mengeluark
dikembangk PHP
programmin tinggi. Sela
Win 98, W dijalankan
di atas untuk menyisipkan gambar dengan na bar2.gif, diberi border, lebar dan tinggi adala
l, serta letak gambar berada di sebelah kiri hala t Preprocessor
anyak pemakai internet yang sudah memilik Namun sebagian besar web yang mereka m
ebanyakan mereka masih belum memahami b namis. Ciri-ciri web dinamis adalah adanya i
ngan sistempemilik web, dapat menampi si dari database, halaman-halaman web dapat
s. ntuk
mendukung web
dinamis dibu
aman web. Berdasarkan tempat dijalanka dalam pemrograman web, terdapat 2 jenis kate
1.
t side programming
2.
er side programming ada client side programming, script programny
u dalam hal ini adalah browser internetnya. C h pemrograman javascript, java applet. Sedang
ming script programnya dijalankan di server. Be aman yang termasuk kategori ini adalah Perl t
P, Phyton. HP PHP: Hypertext Preprocessor diciptakan
PHP awal mulanya hanya digunakan oleh pen t pengunjung pada hompagenya semacam
salah seorang yang mendukung openso arkan Personal Home Page PHP Tools versi
ngkan dan sampai saat ini versinya sudah men HP memiliki beberapa kelebihan dibandin
ming lain, yaitu mudah dibuat dan kecepatan p lain itu PHP juga support pada banyak OS sep
Win NT dan turunannya, Macintosh. PH n bersama dengan web server seperti PWS
nama file gambar alah 200 dan 100
alaman.
iliki homepage di miliki adalah web
i bagaimana web a interaksi antara
pilkan informasi- at berubah secara
butuhkan suatu
kannya perintah- ategori:
1. 2.
nya dijalankan di . Contoh kategori
ngkan server side Beberapa bahasa
l the oldest, CGI, kan oleh Rasmus
penciptanya untuk cam hit counter.
source, maka ia rsi 1.0. PHP terus
encapai 5.0. ding server side
n prosesnya yang seperti UnixLinux,
PHP juga dapat S Personal Web
Server, Ap dalam tag
embedded.
2 DATABASES
MySQL Management S
MySQL menja juga di lingkung
dibutuhkan su Username dan
a. Menjalanka Untu
digunakan windows ca
- Klik STA
- Maka a
- Pada co
xampp -
Lalu ente monitor.
Apache, IIS. Kelebihan yang lain adalah PHP d ag HTML atau dikatakan PHP merupakan
d.
ES MySQL
L merupakan salah satu software DBM t System yang termasuk paling populer. Kini m
jadi software open source yang free. MySQL ungan Windows. Untuk dapat mengakses ke da
suatu authentication melalui username d an password tersebut bisa diperoleh dari admin
kan MySQL ntuk menjalankan dan mengelola MySQL Data
n Comand Windows ataupun Konsole OpenSU s cara menjalankan debugnya sebagai berikut :
TART Run ketik cmd
akan muncul jendela konsole seperti pada ga
Gambar 33. Tampilan layar command pro
comand ketikkan arahkan ke folder mysql pad p yang berada di folder c:\xampp\mysql\bin m
nter, maka akan muncul ucapan selamat datan or.
66 P dapat diletakkan
an bahasa yang
BMS Database ni mulai versi 3.23
QL telah tersedia database MySQL
dan password. inistrator.
tabase dapat SUSE. Untuk
t : gambar;
rompt.
ada kasus ini mysql -uroot
tang di MySQL
67 -
Setelah melakuka
Sedangkan -
Klik STA -
Maka ak
Pada ko -
Lalu teka MySQL m
- Setelah
melakuka b. Pengelolaa
Data sehingga
penyimpana menampilka
pengelolaa serta atrib
databases, hingga pem
1. Perancan
a.
Memb h muncul, kita tinggal menggunakan bahasa M
ukan pengelolaan database tersebut. n untuk OpenSUSE cara menjalankan nya seb
TART Applications System Terminal Kon akan muncul jendela konsole seperti pada gam
Gambar 34. Tampilan layar consol mysq
konsole ketikkan simawa:~ mysql -uroot ekan enter, maka akan muncul ucapan selama
L monitor seperti gambar diatas. h muncul, kita tinggal menggunakan bahasa M
ukan pengelolaan database tersebut. laan MySQL
atabase berfungsi sebagai tempat peny
pengelolaan yang dilakukan juga ber anan data yang meliputi : memasukkan data, m
ilkan data, dan menghapus data. Sebelum aan data, tentunya kita harus merancang da
ribut – atribut penyimpanan yang meliput s, pembuatan tabel, pembuatan query, pena
emilihan database. Berikut kami jelaskan secar cangan Database
a.
mbuat Database MySQL untuk
sebagai berikut : onsole;
ambar;
sql.
at datang di MySQL untuk
nyimpanan data, erkaitan dengan
, mengubah data, kita melakukan
dahulu database uti : pembuatan
nambahan query, cara sederhana :
a.
Dalam satu,
lp2ks Cara
mysq Coba
masin
b.
Memi Setela
dalam dalam
mysq sekar
c.
Mem Setela
memb komp
denga alama
Tabel
No.
Keter D
Ketika di dal
Cara mysq
--no --na
lam setiap server dimungkinkan memiliki data u, misalkan database lp3tk_kptk, database
ks dan sebagainya. ra membuat database-database tersebut kita g
sql CREATE DATABASE lp3tk_kptk; balah anda buat database sesuai dengan le
sing
b.
milih Database telah database dibuat, selanjutnya adalah mem
lam sistem database yang telah kita buat. Untu lam database script yang digunakan adalah :
sql USE lp3tk_kptk; arang kita telah masuk ke dalam database bem
c.
embuat Tabel telah kita masuk ke dalam suatu database, se
mbuat tabel. Didalam tabel terdapat query ponen – komponen data, misalkan tabel
ngan query komponen : No, nama pegawa mat pegawai, email pegawai.
bel 5 . Format untuk tabel data pegawai.