MODUL PRAKTIKUM TIK PROGRAM STUDI TEKNIK
MODUL PRAKTIKUM TIK
PRAKTIKUM WEB
Disusun oleh:
Asisten Praktikum TIK TA 2012/2013
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI SUNAN KALIJAGA
YOGYAKARTA
2012
Apa itu Website ?
WEBSITE adalah sekumpulan halaman informasi yang disediakan melalui jalur internet
sehingga bisa diakses di seluruh dunia selama terkoneksi dengan jaringan internet. Website
merupakan sebuah komponen yang terdiri dari teks, gambar, suara animasi sehingga menjadi media
informasi yang menarik untuk dikunjungi oleh orang lain.
Dalam membangun sebuah website kita perlu mengetahui beberapa bahasa pemrograman
web seperti HTML, CSS, PHP, dll. Pada praktikum kali ini kita akan mengenal tiga bahasa
pemrograman yang telah disebutkan tadi.
A.
HTML
HTML singkatan dari Hyper Text Markup Language adalah file teks atau file ASCII yang
berisi instruksi/script kepada web browser untuk menampilkan suatu tampilan grafis dari
sebuah halaman web. Didalam file HTML terdapat beberapa "tag" atau kode-kode yang
dimengerti oleh web browser dan dapat menampilkannya di layar monitor.
File HTML dapat dibuat dengan aplikasi text editor apapun di sistem operasi apapun, antara
lain : Notepad di Windows, emasc atau vi di Unix atau SimpleText di Macintosh. File HTML
ini juga bisa dibuat di aplikasi word processor apapun asalkan saat menyimpan file tersebut
disimpan dengan format text-only.
Salah satu kelebihan file HTML adalah cross platform, artinya file HTML dapat ditampilkan di
beberapa Operating System (OS) yang berbeda dan memiliki tampilan yang sama walaupun
saat pembuatannya menggunakan satu OS tertentu saja.
TAG-TAG HTML
Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari
document HTML.
Contoh: Setiap document HTML di awali dan di akhiri dengan tag HTML.
Tag tidak case sensitive, jadi anda bisa gunakan atau keduanya
menghasilkan output yang sama.
Bentuk dari tag HTML sebagai berikut:
Element : nama tag
Attribute : atribut dari tag
Value : nilai dari atribut.
Contoh:
body merupakan element, bgcolor (Background) merupakan atribut yang memiliki nilai red.
STRUKTUR HTML DOCUMENT
Document HTML bisa di bagi mejadi tiga bagian utama:
1. HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML
tag HTML memberi tahu browser bahawa yang di dalam kedua tag tersebut adalah
document HTML.
2. HEAD
Bagian header dari document HTML di apit oleh tag di dalam bagian
ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya
browser. Selain itu Bookmark juga megunakan tag TITLE untuk memberi mark suatu web
site. Browser e yi pa title se agai ook ark da juga u tuk keperlua pe aria
(searching) biasanya title di gunakan sebagai keyword.
Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi
tertentu mengenai document HTML, anda bias menentukan author name, keywords,
dan lainyan pada tag META.
Contoh:
Author dari do u e t terse ut adalah Bo ah Gu u g
3. BODY
Document body di gunakan untuk menampilkan text, image link dan semua yang akan di
tampilkan pada web page.
BASIC HTML ELEMENT
1. Block Level Element
Block level element yang sering di gunakan :
Heading (H1 sampai H6)
Contoh:
2. Paragraf (P)
Contoh:
3. List Item(LI)
List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun
yang
tidak berurutan (unordered list).
Ada tiga macam list yang bisa anda tambahkan ke document HTML:
a. Unordered List (Bullet) :
Tag
Attribute
Value
Description
type
square
Bullet Kotak
disc
Bullet Titik
circle
Bullet Lingkaran
Contoh :
b. Ordered List (Numbering)
Tag
Attribute
start
type
Value
n
I
i
A
a
Description
Begin number
Upper Roman
Lower Roman
Uppercase
Lowercase
Contoh:
c. Definition List
Defi itio List terdiri diapit oleh tag … dan tag menentukan
definition term serta tag menentukan definition itu sendiri.
Contoh:
4. Horizontal Rules(HR)
Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam document
HTML.
Tag
Attribute
Value
Description
width
100%
Default
size
Angka dalam pixel
n px
align
center
Posisi tengah
left
Rata kiri
right
Rata kanan
color
red, yellow, dsb
warna garis
(#000000)
Contoh:
5. Pemformatan Page
a. Break
Tag di gunakan untuk memulai baris baru pada document HTML, tag ini
fungsinya mirip dengan carriage return.
Contoh:
b. Font
Dengan tag anda bisa menentukan format tampilan font dalam document
HTML seperti color, size, style dan lainya.
Contoh:
c. Color
Color merupakan attribute yang bisa anda tambahkan pada beberapa element
seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer
yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit
hexadecimal number.
#RRGGBB
Hexadecimal
Color
#FF0000
Red
#00FF00
Green
#0000FF
Blue
#000000
Black
#FFFFFF
White
d. Alignment
Align attribute digunakan untuk menentukan perataan object dalam document
HTML baik berupa text, object, image, paragraph, division dan lain-lain.
Value
Description
Left
Rata kiri
Right
Rata kanan
Center
Rata tengah
Justify
Rata kanan kiri
e. Format text
Physical Formatting
Tag
…
…
…
…
…
…
…
…
…
Logical Formatting
Tag
…
…
…
…
Description
Bold text
Italic text
Underline Text
Untuk ukuran yang lebih besar dari normal
Untuk ukuran yang lebih kecil dari normal
Untuk memberi garis di tengah text
Superscript text
Subscript text
Center document
Description
Text miring /
Text tebal /
Mencoret text /
Underline text /
Quotes / Indentasi
Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk
indentasi pendek anda bisa gunakan element Q.
Contoh :
6. Preformatted text
Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.
Contoh:
7. Grouping element
Tag DIV dan SPAN di gunakan untuk mengelompokkan elementelement HTML. Span
digunakan untuk mendefinisikan inline content sementara div digunakan untuk blocklevel
content.
Contoh:
B.
CSS
Apa Itu CSS?
CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya
air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang
saling berhubungan. Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS
adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur
format / tampilan suatu halaman HTML.
Keuntungan Penggunaan CSS
Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk
tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda
harus merubah satu per satu halaman website anda dan merubah tipe font dari arial
menjadi trebuchet. Dengan menggunakan css, dimana semua halaman web memakai css
yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman
web dari arial ke trebuchet.Jadi, keuntungan menggunakan CSS, lebih praktis!
Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang,
tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser
yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan
menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan
web anda terlihat baik di semua browser.
Syntax CSS
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1
property, 1 value.
Format penulisan kalimat CSS:
selector { property: value }
Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat. Property untuk
menunjukkan, bagian (properti) dari selector yang hendak diatur. Value adalah nilai dari
pengaturannya.
Contoh Syntax:
h1 { color: red }
Contoh di atas menunjukkan
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke
warna merah (red).
Pengelompokan Selectors
Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara
menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua
menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
CSS Comment
Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk
member catatan pengingat. Anda bisa menggunakan syntax pembuka /* dan penutup */
untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan
dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.
/* Tulis komentar anda di sini */
p{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}
Pemasangan CSS didalam halaman HTML
Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:
Inline CSS
Embed atau memasang kode css ke dalam halaman HTML
Link ke external CSS
Import CSS file
Dalam modul ini akan dibahas pemasangan CSS melalui Inline CSS dan Embed atau
memasang CSS dalam halaman HTML
Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini
tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya digunakan
jika anda mau memformat suatu elemen satu kali saja.
Contoh:
Isi paragraf.
Pada contoh di atas, elemen paragraf di format agar tulisannya menggunakan warna
biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya
berlaku pada elemen paragraf yang ditentukan kode CSS nya. Penulisan CSS dengan cara ini
di mulai dengan kata style: lalu di ikuti dengan syntax property: value.
Embedded CSS
Anda bisa juga menempelkan kode CSS di antara tag dan atau dapat juga
diadalam body dan. Penulisan CSS dengan cara ini diawali dengan tag
dan diakhiri dengan tag .
Contoh:
p {color:blue;}
Dalam contoh di atas semua elemen dalam halaman web tersebut akan diformat
menggunakan font berwarna biru.
Class dan ID Selektor
Pada contoh-contoh di pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai
selector. Misalkan anda membuat kode CSS untuk tag . Sekarang bagaimana jika anda
ingin memformat tag dengan warna / property berbeda? Misalkan, anda ingin tag
di kolom kiri berwarna biru sementara tag di kolom tengah berwarna hitam. Untuk
kasus seperti ini, anda bisa menggunakan Class selector dan ID selector.
Class Selector
Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.
Cara penulisan Class Selector:
.nama-class {property:value;}
Untuk menempelkan class ke dalam tag HTML:
taghtml.nama-class {Property:value;}
Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector
di luar kode HTML anda menggunakan tag dan di akhiri dengan tag
.
Contoh:
Penulisan kode CSS:
.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian kode CSS
Teks tengah akan berwarna merah.
Tag H1 tengah akan berwarna hitam
Tag H1 kiri akan berwarna biru
Hasil:
Teks tengah akan berwarna merah.
Tag H1 tengah akan berwarna hitam
Tag H1 kiri akan berwarna biru
ID Selector
ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector
untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya
untuk memformat bagian menu / sidebar. Cara penulisan ID Selector:
#nama-ID {property:value;}
Untuk menempelkan ID selector ke dalam tag HTML:
taghtml#nama-ID {Property:value;}
Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di
luar kode HTML anda menggunakan tag dan di akhiri dengan tag .
CSS Refference
Syntax css dibawah ini baru sebagian kecil dari syntax css yang ada. Silahkan
untuk yang lainnya diexplore sendiri :
Syntax
font-family
font-style
font-variant
font-weight
font-size
color
background-color
background-image
background-repeat
background-attachment
text-decoration
text-align
vertical-align
Values
Default
font yang terinstall
Times (Win)
normal | italic | oblique
normal
normal | small-caps
normal
normal | bold | bolder | lighter
normal
xx-small | x-small | small | medium | large | x- 12 pt
large | xx-large, atau pt atau %
semua kode warna
hitam / #000
semua kode warna
putih / #fff
url | none
none
Repeat | repeat-x | repet-y | no-repeat
repeat
Scroll | fixed
scroll
None | underline | overline | line-trough | blink none
Right | left | center | justify
left
baseline | sub | super | top | text-top | middle Middle
|
bottom | text-bottom |
text-transform
border-colapse
Margin (left,right,top,bottom)
Padding (left,right,top,bottom)
Contoh:
C.
None | capitalize | uppercase | lowercase
None | colapse
Px | em
Px | em
none
none
0px
0px
PHP
Apa Itu PHP?
PHP adalah singkatan dari PHP : Hypertext Preprocessor
PHP adalah bahasa scripting server-side, artinya di jalankan di server, kemudian
outputnya dikirim ke client (browser)
PHP digunakan untuk membuat aplikasi web
PHP mendukung banyak database (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL,
Generic ODBC, dll.)
Instalasi PHP
Untuk menjalankan PHP anda perlu Web Server seperti Apache, PHP Interpreter, MySQL
sebagai database. Saat ini ada banyak paket PHP+Apache+MySQL yang memudahkan anda
untuk instal PHP dengan mudah. Silahkan Download di salah satu situs-situs berikut,
kemudian ikuti petunjuk instalasi masing-masing paket.
WAMP (http://www.wampserver.com/en/download.php)
XAMP (http://www.apachefriends.org/en/xampp.html)
Kode PHP di jalankan di browser, terlebih dahulu harus dijalankan Apache Web Server,
kemudian di browser dijalankan di localhost.
Sintaks PHP
Kode PHP di tulis di teks editor, sama halnya seperti HTML. Kode PHP bisa digabung atau
disisipkan dengan kode HTML, Javascript, CSS dan script lainnya untuk membuat halaman
web.
Penulisan kode PHP harus di awali dengan
Untuk mengakhiri baris kode PHP harus diberi tanda titik koma (;) di akhir baris kode
PHP
Untuk penulisan komentar di awali tanda // atau antara /* dan */
Contoh :
Pada contoh di atas, di browser akan tercetak tulisan Hello World
Contoh 2:
;}
Sumber :
http://caramembuat.mywapblog.com/apa-itu-website-mengenal-definisi-dan-pe.xhtml
http://faculty.petra.ac.id/dwikris/docs/desgrafisweb/html_dasar/0-apaitu_html.html
http://blog.codingwear.com/panduanphp/pengenalanphp.html
http://blog.uad.ac.id/nurandrisusanto/2011/10/13/contoh-php-penjumlahan-danperkalian/
modul pemrograman web 2011 saintek UIN Sunan Kalijaga
PRAKTIKUM WEB
Disusun oleh:
Asisten Praktikum TIK TA 2012/2013
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI SUNAN KALIJAGA
YOGYAKARTA
2012
Apa itu Website ?
WEBSITE adalah sekumpulan halaman informasi yang disediakan melalui jalur internet
sehingga bisa diakses di seluruh dunia selama terkoneksi dengan jaringan internet. Website
merupakan sebuah komponen yang terdiri dari teks, gambar, suara animasi sehingga menjadi media
informasi yang menarik untuk dikunjungi oleh orang lain.
Dalam membangun sebuah website kita perlu mengetahui beberapa bahasa pemrograman
web seperti HTML, CSS, PHP, dll. Pada praktikum kali ini kita akan mengenal tiga bahasa
pemrograman yang telah disebutkan tadi.
A.
HTML
HTML singkatan dari Hyper Text Markup Language adalah file teks atau file ASCII yang
berisi instruksi/script kepada web browser untuk menampilkan suatu tampilan grafis dari
sebuah halaman web. Didalam file HTML terdapat beberapa "tag" atau kode-kode yang
dimengerti oleh web browser dan dapat menampilkannya di layar monitor.
File HTML dapat dibuat dengan aplikasi text editor apapun di sistem operasi apapun, antara
lain : Notepad di Windows, emasc atau vi di Unix atau SimpleText di Macintosh. File HTML
ini juga bisa dibuat di aplikasi word processor apapun asalkan saat menyimpan file tersebut
disimpan dengan format text-only.
Salah satu kelebihan file HTML adalah cross platform, artinya file HTML dapat ditampilkan di
beberapa Operating System (OS) yang berbeda dan memiliki tampilan yang sama walaupun
saat pembuatannya menggunakan satu OS tertentu saja.
TAG-TAG HTML
Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari
document HTML.
Contoh: Setiap document HTML di awali dan di akhiri dengan tag HTML.
Tag tidak case sensitive, jadi anda bisa gunakan atau keduanya
menghasilkan output yang sama.
Bentuk dari tag HTML sebagai berikut:
Element : nama tag
Attribute : atribut dari tag
Value : nilai dari atribut.
Contoh:
body merupakan element, bgcolor (Background) merupakan atribut yang memiliki nilai red.
STRUKTUR HTML DOCUMENT
Document HTML bisa di bagi mejadi tiga bagian utama:
1. HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML
tag HTML memberi tahu browser bahawa yang di dalam kedua tag tersebut adalah
document HTML.
2. HEAD
Bagian header dari document HTML di apit oleh tag di dalam bagian
ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya
browser. Selain itu Bookmark juga megunakan tag TITLE untuk memberi mark suatu web
site. Browser e yi pa title se agai ook ark da juga u tuk keperlua pe aria
(searching) biasanya title di gunakan sebagai keyword.
Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi
tertentu mengenai document HTML, anda bias menentukan author name, keywords,
dan lainyan pada tag META.
Contoh:
Author dari do u e t terse ut adalah Bo ah Gu u g
3. BODY
Document body di gunakan untuk menampilkan text, image link dan semua yang akan di
tampilkan pada web page.
BASIC HTML ELEMENT
1. Block Level Element
Block level element yang sering di gunakan :
Heading (H1 sampai H6)
Contoh:
2. Paragraf (P)
Contoh:
3. List Item(LI)
List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun
yang
tidak berurutan (unordered list).
Ada tiga macam list yang bisa anda tambahkan ke document HTML:
a. Unordered List (Bullet) :
Tag
Attribute
Value
Description
type
square
Bullet Kotak
disc
Bullet Titik
circle
Bullet Lingkaran
Contoh :
b. Ordered List (Numbering)
Tag
Attribute
start
type
Value
n
I
i
A
a
Description
Begin number
Upper Roman
Lower Roman
Uppercase
Lowercase
Contoh:
c. Definition List
Defi itio List terdiri diapit oleh tag … dan tag menentukan
definition term serta tag menentukan definition itu sendiri.
Contoh:
4. Horizontal Rules(HR)
Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam document
HTML.
Tag
Attribute
Value
Description
width
100%
Default
size
Angka dalam pixel
n px
align
center
Posisi tengah
left
Rata kiri
right
Rata kanan
color
red, yellow, dsb
warna garis
(#000000)
Contoh:
5. Pemformatan Page
a. Break
Tag di gunakan untuk memulai baris baru pada document HTML, tag ini
fungsinya mirip dengan carriage return.
Contoh:
b. Font
Dengan tag anda bisa menentukan format tampilan font dalam document
HTML seperti color, size, style dan lainya.
Contoh:
c. Color
Color merupakan attribute yang bisa anda tambahkan pada beberapa element
seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer
yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit
hexadecimal number.
#RRGGBB
Hexadecimal
Color
#FF0000
Red
#00FF00
Green
#0000FF
Blue
#000000
Black
#FFFFFF
White
d. Alignment
Align attribute digunakan untuk menentukan perataan object dalam document
HTML baik berupa text, object, image, paragraph, division dan lain-lain.
Value
Description
Left
Rata kiri
Right
Rata kanan
Center
Rata tengah
Justify
Rata kanan kiri
e. Format text
Physical Formatting
Tag
…
…
…
…
…
…
…
…
…
Logical Formatting
Tag
…
…
…
…
Description
Bold text
Italic text
Underline Text
Untuk ukuran yang lebih besar dari normal
Untuk ukuran yang lebih kecil dari normal
Untuk memberi garis di tengah text
Superscript text
Subscript text
Center document
Description
Text miring /
Text tebal /
Mencoret text /
Underline text /
Quotes / Indentasi
Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk
indentasi pendek anda bisa gunakan element Q.
Contoh :
6. Preformatted text
Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.
Contoh:
7. Grouping element
Tag DIV dan SPAN di gunakan untuk mengelompokkan elementelement HTML. Span
digunakan untuk mendefinisikan inline content sementara div digunakan untuk blocklevel
content.
Contoh:
B.
CSS
Apa Itu CSS?
CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya
air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang
saling berhubungan. Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS
adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur
format / tampilan suatu halaman HTML.
Keuntungan Penggunaan CSS
Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk
tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda
harus merubah satu per satu halaman website anda dan merubah tipe font dari arial
menjadi trebuchet. Dengan menggunakan css, dimana semua halaman web memakai css
yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman
web dari arial ke trebuchet.Jadi, keuntungan menggunakan CSS, lebih praktis!
Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang,
tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser
yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan
menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan
web anda terlihat baik di semua browser.
Syntax CSS
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1
property, 1 value.
Format penulisan kalimat CSS:
selector { property: value }
Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat. Property untuk
menunjukkan, bagian (properti) dari selector yang hendak diatur. Value adalah nilai dari
pengaturannya.
Contoh Syntax:
h1 { color: red }
Contoh di atas menunjukkan
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke
warna merah (red).
Pengelompokan Selectors
Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara
menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua
menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
CSS Comment
Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk
member catatan pengingat. Anda bisa menggunakan syntax pembuka /* dan penutup */
untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan
dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.
/* Tulis komentar anda di sini */
p{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}
Pemasangan CSS didalam halaman HTML
Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:
Inline CSS
Embed atau memasang kode css ke dalam halaman HTML
Link ke external CSS
Import CSS file
Dalam modul ini akan dibahas pemasangan CSS melalui Inline CSS dan Embed atau
memasang CSS dalam halaman HTML
Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini
tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya digunakan
jika anda mau memformat suatu elemen satu kali saja.
Contoh:
Isi paragraf.
Pada contoh di atas, elemen paragraf di format agar tulisannya menggunakan warna
biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya
berlaku pada elemen paragraf yang ditentukan kode CSS nya. Penulisan CSS dengan cara ini
di mulai dengan kata style: lalu di ikuti dengan syntax property: value.
Embedded CSS
Anda bisa juga menempelkan kode CSS di antara tag dan atau dapat juga
diadalam body dan. Penulisan CSS dengan cara ini diawali dengan tag
dan diakhiri dengan tag .
Contoh:
p {color:blue;}
Dalam contoh di atas semua elemen dalam halaman web tersebut akan diformat
menggunakan font berwarna biru.
Class dan ID Selektor
Pada contoh-contoh di pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai
selector. Misalkan anda membuat kode CSS untuk tag . Sekarang bagaimana jika anda
ingin memformat tag dengan warna / property berbeda? Misalkan, anda ingin tag
di kolom kiri berwarna biru sementara tag di kolom tengah berwarna hitam. Untuk
kasus seperti ini, anda bisa menggunakan Class selector dan ID selector.
Class Selector
Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.
Cara penulisan Class Selector:
.nama-class {property:value;}
Untuk menempelkan class ke dalam tag HTML:
taghtml.nama-class {Property:value;}
Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector
di luar kode HTML anda menggunakan tag dan di akhiri dengan tag
.
Contoh:
Penulisan kode CSS:
.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian kode CSS
Teks tengah akan berwarna merah.
Tag H1 tengah akan berwarna hitam
Tag H1 kiri akan berwarna biru
Hasil:
Teks tengah akan berwarna merah.
Tag H1 tengah akan berwarna hitam
Tag H1 kiri akan berwarna biru
ID Selector
ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector
untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya
untuk memformat bagian menu / sidebar. Cara penulisan ID Selector:
#nama-ID {property:value;}
Untuk menempelkan ID selector ke dalam tag HTML:
taghtml#nama-ID {Property:value;}
Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di
luar kode HTML anda menggunakan tag dan di akhiri dengan tag .
CSS Refference
Syntax css dibawah ini baru sebagian kecil dari syntax css yang ada. Silahkan
untuk yang lainnya diexplore sendiri :
Syntax
font-family
font-style
font-variant
font-weight
font-size
color
background-color
background-image
background-repeat
background-attachment
text-decoration
text-align
vertical-align
Values
Default
font yang terinstall
Times (Win)
normal | italic | oblique
normal
normal | small-caps
normal
normal | bold | bolder | lighter
normal
xx-small | x-small | small | medium | large | x- 12 pt
large | xx-large, atau pt atau %
semua kode warna
hitam / #000
semua kode warna
putih / #fff
url | none
none
Repeat | repeat-x | repet-y | no-repeat
repeat
Scroll | fixed
scroll
None | underline | overline | line-trough | blink none
Right | left | center | justify
left
baseline | sub | super | top | text-top | middle Middle
|
bottom | text-bottom |
text-transform
border-colapse
Margin (left,right,top,bottom)
Padding (left,right,top,bottom)
Contoh:
C.
None | capitalize | uppercase | lowercase
None | colapse
Px | em
Px | em
none
none
0px
0px
PHP
Apa Itu PHP?
PHP adalah singkatan dari PHP : Hypertext Preprocessor
PHP adalah bahasa scripting server-side, artinya di jalankan di server, kemudian
outputnya dikirim ke client (browser)
PHP digunakan untuk membuat aplikasi web
PHP mendukung banyak database (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL,
Generic ODBC, dll.)
Instalasi PHP
Untuk menjalankan PHP anda perlu Web Server seperti Apache, PHP Interpreter, MySQL
sebagai database. Saat ini ada banyak paket PHP+Apache+MySQL yang memudahkan anda
untuk instal PHP dengan mudah. Silahkan Download di salah satu situs-situs berikut,
kemudian ikuti petunjuk instalasi masing-masing paket.
WAMP (http://www.wampserver.com/en/download.php)
XAMP (http://www.apachefriends.org/en/xampp.html)
Kode PHP di jalankan di browser, terlebih dahulu harus dijalankan Apache Web Server,
kemudian di browser dijalankan di localhost.
Sintaks PHP
Kode PHP di tulis di teks editor, sama halnya seperti HTML. Kode PHP bisa digabung atau
disisipkan dengan kode HTML, Javascript, CSS dan script lainnya untuk membuat halaman
web.
Penulisan kode PHP harus di awali dengan
Untuk mengakhiri baris kode PHP harus diberi tanda titik koma (;) di akhir baris kode
PHP
Untuk penulisan komentar di awali tanda // atau antara /* dan */
Contoh :
Pada contoh di atas, di browser akan tercetak tulisan Hello World
Contoh 2:
;}
Sumber :
http://caramembuat.mywapblog.com/apa-itu-website-mengenal-definisi-dan-pe.xhtml
http://faculty.petra.ac.id/dwikris/docs/desgrafisweb/html_dasar/0-apaitu_html.html
http://blog.codingwear.com/panduanphp/pengenalanphp.html
http://blog.uad.ac.id/nurandrisusanto/2011/10/13/contoh-php-penjumlahan-danperkalian/
modul pemrograman web 2011 saintek UIN Sunan Kalijaga