Edukatif

9. Kriteria dan Standar Penilaian

Penilaian dilakukan sesuai dengan aturan yang ada di Universitas Battuta,
yakni meliputi Sikap (15%), Tugas (terstruktur: 15% & mandiri:15%), Mid –
Test (25%), dan Ujian Akhir Semester (30%). Namun selain hal wajib
tersebut, dosen juga menilai proses yang terjadi selama perkuliahan, kehadiran,
keaktifan dalam memberikan respon selama perkuliahan, kerapian, tingkah laku,
presentase kelompok, serta kesopanan. Standar penilaian yang digunakan
untuk:

a. Sikap = 15 % diperoleh mahasiswa dari sikap, perbuatan, tingkah
laku, serta keaktifan mahasiswa merespon perkuliahan pada saat
dosen memberikan pertanyaan setiap masuk perkuliahan, dan pada
saat presentase tugas kelompok.

b. Tugas = 30% diperoleh mahasiswa dari tugas-tugas yang diberikan
kepada mahasiswa selama proses perkuliahan, baik dalam bentuk
individu maupun kelompok baik itu terstruktur maupun tidak, dan
(15%), ditambah dengan tugas akhir (15%);

c. Mid – Tes = 25% diperoleh dari hasil mid semester mahasiswa setelah
mengikuti perkuliahan selama 6 – 7 pertemuan.

d. Ujian Akhir Semester = 30% diperoleh dari nilai ujian akhir semester
yang dilakukan setelah pertemuan memenuhi batas 14 – 16 x
pertemuan.

e. Pertemuan ke – 16 merupakan ujian akhir semester yang dilakukan
setelah proses pembelajaran berakhir.

Nilai akhir mahasiswa terdiri dari empat komponen di atas, kemudian
ditambah dengan hal – hal lain yang menjadi perhatian seperti disebutkan di
atas yang digunakan untuk menambahi nilai Quis, Tugas, sehingga nilai akhir
mahasiswa dapat memenuhi target yang ditentukan.

Seluruh komponen penilaian (4 aspek) harus lengkap, apabila tidak
melengkapi sampai 1 (satu) minggu setelah ujian akhir berlangsung,
mahasiswa dinyatakan tidak lulus mata kuliah yang bersangkutan.

10. Tata Tertib Siswa dan Dosen

Dalam mengikuti perkuliahan mahasiswa harus mematuhi segala aturan
yang ditetapkan oleh dosen, seperti di bawah ini:

a. Terdaftar sebagai mahasiswa pada mata kuliah Pemograman web
(Dibuktikan dengan KRS).

b. Memasuki perkuliahan ON TIME! Hanya diberikan 30 menit dispensasi
bagi kelas yang mulai kuliah 13.30 WIB bagi mahasiswa yang terlambat
datang; bagi yang melewati waktu yang telah ditentukan, tidak
dibenarkan lagi mengikuti perkuliahan, kecuali hanya satu kali
keterlambatan.

c. Harus menghadiri perkuliahan sebanyak 75% dari pertemuan yang telah
ditetapkan! Bagi mahasiswa yang hanya memiliki kehadiran 70 – 74%
maka diberikan tugas tambahan berupa resume materi pembelajaran,
makalah, atau yang lainnya.

d. Mahasiswa yang tidak bisa menghadiri perkuliahan pada hari yang
telah ditetapkan dapat memberikan informasi melalui kosma,
menelepon dan / atau mengirim sms / chats kepada dosen yang

39

bersangkutan!
e. Tidak mengaktifkan handphone (HP) selama masa perkuliahan!

f. Memiliki tingkah laku, perbuatan, dan sikap yang baik; baik di dalam
perkuliahan, di lingkungan kampus, maupun di luar kampus, selama
menjadi mahasiswa yang mengikuti perkuliahan.

g. Berpakaian dan bertingkah laku Islami.
h. Bagi mahasiswi tidak mengenakan perhiasan yang berlebihan, serta

menggunakan make up.
i. Memiliki grup Whats App sehingga diskusi dan informasi dapat

dilakukan dengan kondusif dan aktif.
j. Memiliki kelompok presentasi, aktif dalam diskusi, dan tidak mengganti

anggota kelompok tanpa izin dari dosen bersangkutan.
k. Makalah yang ditulis, harus memiliki minimal 5 sumber referensi,

sumber tersebut harus terbitan di atas tahun 2015, dengan format
penulisan makalah ilmiah.
l. Makalah selain dikirimkan ke grup WA satu hari sebelum presentase
juga didistribusikan kepada seluruh mahasiswa yang ada di kelas, “bukan
satu makalah per- grup” sementara kepada dosen “menyerahkan makalah
dan powerpoint”.
m. Makalah disajikan dengan menggunakan infokus yang telah disediakan
oleh dosen; namun apabila kondisi tidak memungkinkan dapat
menggunakan media lainnya seperti papan tulis maupun karton manila.
n. Makalah yang telah direvisi atas koreksian dosen dan saran mahasiswa
lain di up-load ke classroom, atau blog.
o. Semua makalah, power point serta tugas, baik pribadi maupun
kelompok di akhir semester dikumpulkan oleh kosma dan dikirimkan
secara kolektif ke email dosen.
p. Mahasiswa yang tidak menyerahkan tugas yang diberikan pada
waktunya, akan berakibat pengurangan nilai atau bahkan penolakan
terhadap tugas yang diserahkan!
q. Mahasiswa berhak memberikan pertanyaan, ide, kritik, saran, koreksi,
atau masukan kepada kelompok penyaji, juga tidak menutup
kemungkinan kepada dosen yang memberikan perkuliahan, secara
sopan!

r. Mahasiswa yang ingin berbicara di dalam kelas untuk memberikan
masukan, pertanyaan, kritik dan lain-lain, haruslah dengan sopan serta
dengan menyebutkan identitas!

s. Penilaian akhir berdasarkan:
1. Keaktifan dalam memberikan pertanyaan, ide, saran, kritik, dan
lainnya.
2. Kehadiran perkuliahan.
3. Tugas-tugas.
4. Sikap dan tingkah laku.
5. Quis
6. Ujian Pertengahan Semester.
7. Ujian Hasil Semester.

40

t. Hal lain yang berkembang dalam perkuliahan akan disepakati
dalam perkuliahan! Disamping aturan yang harus diikuti oleh
mahasiswa, dosen juga harus:
1. Hadir tepat waktu perkuliahan!
2. Memberikan kabar berita atas ketidakhadiran dalam perkuliahan.
3. Apabila proses pembelajaran tidak dapat berlangsung karena hal
tertentu, maka dosen harus memberikan informasi serta
memberikan bahan perkuliahan yang dibutuhkan.
4. Menerima kritik dan saran mahasiswa secara terbuka.
5. Penilaian dilakukan harus bersifat objektif.

11. Jadwal Kuliah

Jadwal perkuliahan tatap muka dilaksanakan setiap minggu pada:

a. Hari Selasa, Pukul 13.00 – 14.15 WIT

b. Disamping tatap muka juga dilakukan kuliah terstruktur dan tugas kelompok.
12. Lain-lain

Apabila ada hal-hal di luar kesepakatan ini yang perlu disepakati, dapat
dibicarakan secara teknis pada setiap acara perkuliahan. Apabila ada
perubahan isi kontrak perkuliahan, akan ada pemberitahuan terlebih dahulu.
Kontrak Perkuliahan ini dilaksanakan mulai dari disampaikannya
kesepakatan ini.

Mengetahui Medan, Agustus 2021
Ketua Program Studi Dosen Pemograman
Web
Teknologi Informasi

Aripin Rambe, S.Kom., M.Kom Chairul Imam, S.Kom., M.Kom
NIDN. NIDN. 0131039302

41

BAHAN AJAR
MATERI 1

1.1 Pengertian Website
Sebuah situs web (sering pula disingkat menjadi situs saja, website atau site )

adalah sebutan bagi sekelompok halaman web ( web page ), yang umumnya merupakan
bagian dari suatu nama domain ( domain name ) atau subdomain di World Wide
Web (WWW) di Internet. Sebuah web page adalah dokumen yang ditulis dalam
format HTML (Hyper Text Markup Language), yang hampir selalu bisa diakses
melalui HTTP, yaitu protokol yang menyampaikan informasi dari server website untuk
ditampilkan kepada para pemakai melalui web browser baik yang bersifat statis maupun
dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-
masing dihubungkan dengan jaringan-jaringan halaman (hyperlink) (Rusli, Ansari
Saleh Ahmar dan Abdul Rahman. , 2019 ).

Bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi
informasinya searah hanya dari pemilik website. Bersifat dinamis apabila isi informasi
website selalu berubah-ubah, dan isi informasinya interaktif dua arah berasal dari
pemilik serta pengguna website. Contoh website statis adalah berisi profil
perusahaan, sedangkan website dinamis adalah seperti Friendster, Multiply, dll. Dalam sisi
pengembangannya, website statis hanya bisa diupdate oleh pemiliknya saja.

Halaman-halaman sebuah situs web diakses dari sebuah URL yang menjadi
“akar” ( root ), yang disebut homepage (halaman induk; sering diterjemahkan menjadi
“beranda”, “halaman muka”), dan biasanya disimpan dalam server yang sama.
Tidak semua situs web dapat diakses dengan gratis. Beberapa situs web memerlukan
pembayaran agar dapat menjadi pelanggan, misalnya situs-situs yang menampilkan
pornografi, situs-situs berita, layanan surat elektronik ( e-mail ), dan lain-lain. Website ini
dibuka melalui sebuah program penjelajah (Browser) yang berada di sebuah komputer.
Program penjelajah yang bisa digunakan dalam komputer diantaranya: IE (Internet
Explorer), Mozilla, Firefox, Netscape, Opera dan yang terbaru adalah Google Chrome.

1.1. Internet Explorer

42

1.2 Jenis-Jenis Website
Menurut Yeni Susilowati (2019). Seiringan dengan perkembangan teknologi

informasi yang begitu cepat, website juga mengalami perkembangan yang sangat berarti.
Dalam pengelompokkan jenis web, lebih diarahkan berdasarkan kepada fungsi, sifat atau
style dan bahasa pemrograman yang digunakan.

1. Adapun Jenis-jenis web berdasarkan sifat atau style nya yaitu:
a. Website Dinamis, merupakan sebuah website yang menyediakan content atau isi

yang selalu berubah –ubah setiap saat. Bahasa pemrograman yang digun akan
antara lain PHP,ASP, NET dan memanfaatkan database MySQL atau MS SQL.
Misalnya website www.artikel.com, www.detik.com, www.tecnomobile.co.cc ,
dan lain-lain.
b. Website Statis, merupakan website yang contentnya sangat jarang diubah. Bahasa
pemrograman yang digunakan adalah HTML dan belum memanfaatkan database.
Misalnya: web profile organisasi, dan lain -lain.
c. Website interaktif pada dasarnya termasuk dalam kategori website dinamis,
dimana isi informasinya selalu diperbaharui dari waktu ke waktu. Hanya saja, isi
informasi tidak hanya diubah oleh pengelola website tetapi lebih banyak dilakukan
oleh pengguna website itu sendiri. Contoh website jenis ini yaitu website jejaring
sosial seperti facebook dan twitter atau website marketplace seperti bukalapak,
tokopedia, dan sebagainya.
1.3 Pengertian Pemrograman Web
Menurut Supono dan Putratama (2018). Pemrograman web (web programming)
terdiri dari kata pemrograman dan web. Permograman sendiri dapat diartikan sebagai
proses atau cara pembuatan program menggunakan bahasa pemrograman. Adapun bahasa
permograman merupakan bahasa yang digunakan untuk memberikan intruksi kepada
komputer sehingga komputer dapat memproses data dan menampilkan informasi sesuai
yang dikehendaki oleh pemrogram. Dengan demikian pemrograman web dapat diartikan
sebagai kegiatan pembuatan program atau aplikasi berbasis web menggunakan bahasa
pemrograman tertentu sehingga dapat memproses data dan menghasilkan informasi sesuai
yang dikehendaki oleh pemilik website.

43

1.4 Bahasa Pemrograman Web
Bahasa pemrograman web terdiri dari beberapa unsur bahasa. Setidaknya terdapat

5 bahasa utama yang biasa digunakan dalam membuat website dinamis dimana masing-
masing memiliki perannya sendiri-sendiri, yaitu sebagai berikut:

1. HTML, berperan sebagai pembentuk strukutur halaman website yang
menempatkan setiap elemen website sesuai layout yang diinginkan.

2. CSS, berperan sebagai pembentuk desain website dengan mengatur setiap elemen
HTML agar tampil menarik pada browser.

3. PHP, berperan sebagai pemroses data pada sisi server sesuai yang diminta oleh
client menjadi informasi yang siap ditampilkan, juga sebagai penghubung aplikasi
web dengan database. Selain PHP, dapat juga menggunakan bahasa pemrograman
lain seperti ASP, Java, dan sebagainya.

4. JavaScript, berperan sebagai bahasa yang memproses data pada sisi client serta
dapat memanipulasi HTML dan CSS secara dinamis.

1.5 Aplikasi Pengembang Web
Menurut Rizkita et al.,( 2018). Untuk pengembangan apikasi web tentu dibutuhkan

berbagai macam aplikasi yang membantu web programer dalam merancang, menuliskan
skrip program maupun menampilkan hasil program. Berikuti ini berbagai jenis aplikasi
yang digunakan dalam pengembangan aplikasi web:
1.5.1 Web Authoring

Web Authoring merupakan perangkat lunak yang biasanya bersifat ”WYSIWYG”
(What You See Is What You Get) yaitu apa yang dilihat merupakan apa yang akan
dihasilkan. Aplikasi jenis ini sangat memudahkan bagi pemula, karena setiap mengetikkan
skrip program langsung terlihat hasilnya. Bahkan biasanya tersedia juga tool drag & drop
yang memudahkan web designer dalam membuat elemen website. Yang termasuk jenis
aplikasi ini diantaranya: Adobe Dreamweaver, Microsoft Expression Web, Nvu dan
sebagainya dibagian halaman dibawah ini.

44

1.2. Jenis Aplikasi Web Authoring

1.5.2 Text Editor

Text editor memiliki fungsi yang sama dengan web authoring yaitu untuk
mengetikkan skrip program, hanya saja tidak bersifat WYSIWYG, sehingga untuk
menampilkan hasilnya memerlukan web browser. Namun, karena lebih ringan dan
lisensinya yang kebanyakan open source banyak juga yang lebih memilih menggunakan

text editor dibanding aplikasi sekelas Adobe Dreamweaver. Yang termasuk dalam aplikasi
jenis ini yaitu Notepad, Notepad++, Sublime Text, Bracket, dan sebagainya. Dalam
pembuatan buku ini, penulis lebih banyak menggunakan Sublime Text dan beberapa
menggunakan Notepad++.

1.3.Jenis Aplikasi Text Editor

45

1.5.3 Web Browser
Web browser digunakan untuk menampilkan dan mengetes hasil program.

Beberapa skrip CSS3 dan HTML5 ada yang hanya support pada web browser tertentu dan
tidak support pada yang lain, sehingga menggunakna lebih dari satu web browser akan
lebih baik. Walaupun untuk kebanyakan browser versi terbaru sudah support hampir
semua fitur CSS3 dan HTML5.

1.4. Jenis Aplikasi Web Browser
1.5.4 Web Server

Web server merupakan perangkat lunak yang berfungsi untuk menerima
permintaan (request) melalui protokol HTTP atau HTTPS dari client kemudian
mengirimkan kembali dalam bentuk halaman-halaman web. Contoh yang termasuk web
server adalah Apache. Dalam penggunaanya, biasanya sudah jadi satu paket dengan PHP
dan MySQL. Contoh paket yang sudah berisi Apache, PHP dan MySQL diantaranya
Xampp dan Appserv. Dalam buku ini, penulis menggunakna Xampp versi 5.6.30 yang di
dalamnya berisi Apache 2.4.25 dan PHP 5.6.30.

1.5. Jenis Aplikasi Web Server

46

1.6 Istilah-Istilah Pemrograman Web
Sebelum lebih jauh belajar pemrograman web, alangkah baiknya kenali dulu

berbagai istilah yang berkaitan dengan pemrograman web. Sehingga, akan lebih mudah
dalam memahami setiap keterangan yang menggunakan istilah-istilah tersebut. Beberapa
istilah yang sering digunakan diantaranya:

1. Domain, merupakan nama unik yang mewakili alamat IP dari server website
berupa kata yang mudah diingat sehingga lebih mudah dalam menemukan atau
memanggil alamat sebuah website pada internet.

2. URL, merupakan singkatan dari Uniform Resources Locator yaitu nama unik yang
mengidentifikasi letak sumber daya website berupa file HTML, gambar, video dan
sebagainya yang biasanya akan tampil pada addres bar browser ketika sumber
daya tersebut diakses.

3. HTTP, merupakan singkatan dari Hypertext Transfer Protocol yaitu protokol yang
mengatur pengiriman data dari client ke server atau sebaliknya dan
menejemahkanya menjadi informasi yang dapat dibaca oleh pengguna website.

47

BAHAN AJAR
MATERI 2-3
2.1 Mengenal HTML
Menurut Rerung, (2018). HTML merupakan singkatan dari Hypertxt Markup
Language yaitu bahasa standar web yang dikelola penggunaanya oleh W3C (World Wide
Web Consortium) berupa tag-tag yang menyusun setiap elemen dari website. HTML
berperan sebaga penyusun struktur halaman website yang menempatkan setiap elemen
website sesuai layout yang diinginkan. HTML biasanya disimpan dalam sebuah file
berekstensi .html. Untuk mengetikkan skrip HTML dapat menggunakan text editor seperti
Notepad sebagai bentuk paling sederhana atau text editor khusus yang dapat mengenali
setiap unsur skrip HTML dan menampilkanya dengan warna yang berbeda sehingga
mudah dibaca, seperti Notepad++, Sublime Text, dan masih banyak lagi aplikasi lain yang
sejenis.

2.1.2 Unsur HTML
HTML terdiri atas unsur-unsur yang membentuk struktur skrip HTML, yaitutag,

atribut, dan elemen.

2.1.3 Tag
Tag adalah simbol khusus (markup) berupa dua karakter "<" dan ">" yang

mengapit suatu teks sebagai nama tag. Contohnya tag <body> adalah tag dengan nama
body. Sebagian besar tag memiliki tag pembuka dan tag penutup yang membatasi
pengaruh dari tag tersebut. Namun, terdapat sebagian kecil tag yang tidak memiliki tag
penutup. Penutup tag ditambah simbol “/” setelah tanda “<”, misalnya </body> yang
merupakan penutup tag <body>. Berikut adalah karakteristik dari tag pada HTML:

1. Tag boleh ditulis dengan huruf besar (kapital), kecil atau campuran, karena
sifatnya yang incase sensitive. Misalnya: <BODY>, <body> atau <Body>
semuanya memiliki hasil yang sama. Namun, untuk standarnya lebih baik
menggunakan huruf kecil semua.

2. Tag bisa berisi tag lain. Tag yang dibuka dahulu ditutup terakhir, sedangkan tag
yang dibuka terakhir ditutup pertama. Namun, kesalahan dalam struktur ini tidak
mengakibatkan error. Misalnya: <p>I like <b>HTML</b></p>

48

2.1.4 Atribut
Atribut yaitu property yang mengatur bagaimana elemen dari suatu tag akan

ditampilkan. Atribut ditulis di dalam simbol tag setelah nama tag dengan dipisahkan oleh
spasi. Atribut ada yang memiliki nilai dan ada yang tidak memiliki nilai. Nilai suatu
atribut ditulis di dalam tanda petik ganda (“…”), dipisahkan dengan simbol sama dengan
(=) dari nama atribut. Misalnya: <p align=”center”>.Berikut adalah karakteristik dari
atribut pada HTML:

1. Atribut hanya ditulis pada tag pembuka.
2. Setiap tag memiliki atribut yang berbeda-beda yang dapat diterapkan pada tag

tersebut.
3. Beberapa atribut ada yang dapat diterapkan ke semua tag atau disebut global

attribute, misalnya: class, id, style, dan sebagainya.
4. Sebuah tag dapat ditulis dengan satu atribut, banyak atribut, atau tanpa atribut

sama sekali.
5. Jika tag ditulis dengan banyak atribut, masing-masing atribut dipisahkan oleh

spasi.
2.1.5 Element

Element adalah bagian dari skrip HTML yang terdiri dari tag pembuka, isi element
dan tag penutup. Jika sebuah element ditampilkan pada browser, maka hanya isi element
yang tampil di browser. Misalnya:
<p> Aku senang belajar HTML</p>
Jika ditampilkan pada browser, maka hanya tulisan “Aku senang belajar HTML” yang
akan tampil di browser.

2.2 Struktur Dasar HTML
HTML merupakan singkatan dari HyperText Markup Language adalah script

untuk menyusun dokumen- dokumen Web. Dokumen HTML disimpan dalam format teks
reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi
perintah-perintah yang dispesifikasikan.
Struktur dasar dokumen HTML adalah sebagai berikut:

49

<html>
<head>
<title>Disini Judul Dokumen HTML</title>
</head>
<body>

Disini penulisan informasi Web
Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut:
a. Tag

Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh
<body> adalah tag dengan namabody. Secara umum tag ditulis secara berpasangan, yang
terdiri atas tag pembuka dan tag penutup (ditambahkankarakter "/" setelah karakter "<"),
sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini
adalah tag penutup isi dokumen HTML.
b. Element

Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.
Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser
digunakan element title, dimana:

<title> ini adalah tag pembuka judul dokumen HTML
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML

</title> ini adalah tag penutup judul dokumen HTML
Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling
tumpang tindih denganpasangan tag-tag lainnya. Contoh penulisan tag-tag yang benar

<p>
<b>
................
</b>

</p>

c. Attribute
Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas

nama dan nilai. Penulisannyaadalah sebagai berikut:

50

<TAG>
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
.................

</TAG>

Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai
contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web
menjadi hitam, penulisannya adalah <body bgcolor="black" text="yellow">
d. Element HTML

Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.
Sintaks:

<html>
..........

</html>
e. Element HEAD

Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di
antara tag <html> dan tag
</html>.Sintaks:
<head>

...........

</head>
f. Element TITLE
Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag
<title> dan tag
</title> terletak di antara tag
<head> dan tag </head>.Sintaks:
<title>

.........

</title>

51

g. Element BODY
Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body>
terletak di bawah tag <head> dan tag </head>. Element BODY mempunyai attribute-
attribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen yang
akan ditampilkan pada browser. Sintaks:

<body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z">
..............

</body>

3.1. Html Format Teks
Format Teks Dalam HTML digunakan untuk membuat teks yang ada dalam

dokumen html menjadi kelihatan berbeda,menarik dan memiliki arti serta dapat
memberikan kemudahan dalam menuliskan teks yang berupa rumus-rumus atau lambang
dari suatu disiplin ilmu.

a. ELEMENT BR (Line Break)
Element BR berfungsi untuk ganti baris. Dan element BR ini tidak mempunyai tag

penutup.Sintaks:
<br>
b. ELEMENT P (Paragraph)

Element P berfungsi untuk ganti paragraf yang diikuti dengan baris kosong di awal dan
akhir paragraf. Tag penutup </p> sifatnya optional jika suatu paragraf diikuti oleh
paragraf berikutnya. Jika tag </p> diabaikan, maka paragraf itu tidak akan diikuti dengan
baris kosong di akhir paragraf.
Element P mempunyai attribute yaitu align yang bernilai "left", "center", "right" yang
menspesifikasikanposisi tepi horizontal dari paragraf (default: "left").Sintaks:
<p align="left"|"center"|"right">
.........................
</p>

52

c. ELEMENT H1,H2,H3,H4,H5,H6 (Header)
Element H1,H2,H3,H4,H5,H6 berfungsi untuk membuat header dengan format 6 jenis
ukuran huruf dan tercetak tebal. Nilai ukuran huruf terbesar adalah H1 dan terkecil adalah
H6. Element ini mempunyai attribute yaitu align yang bernilai "left", "center", "right"
yang menspesifikasikan posisi horizontal dari header (default: "left").
Sintaks:
<hx align="left"|"center"|"right">
..........................
</hx>
x : 1 ... 6

ELEMENT B (Bold)
Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold).Sintaks:
<b>
..........................
</b>
d. ELEMENT I (Italic)
Element I berfungsi untuk membuat tampilan teks tercetak miring (italic).Sintaks:
<i>
..........................
</i>
e. ELEMENT U (Underline)
Element U berfungsi untuk membuat tampilan teks tercetak garis bawah (underline).
Sintaks:

<u>..........................</u>

f. ELEMENT PRE (Preformated text)
Element PRE berfungsi untuk menampilkan teks seperti apa adanya.Sintaks:

<pre>..........................</pre>
h. ELEMENT CENTER

Element CENTER berfungsi untuk menampilkan teks dengan posisi horizontal
ditengah.Sintaks:
<center>.......................... </center>

53

i. ELEMENT BASEFONT
Element BASEFONT berfungsi untuk merubah dasar ukuran huruf tampilan dari web

browser. Attribute darielement ini adalah size yang merupakan ukuran huruf dengan nilai
"1" sampai dengan "7" pixel, atau berupa ukuran relatif ( + atau - ), default nya adalah "3"
pixel. Element ini tidak mempunyai tag penutup.
Sintaks:
<basefont size="pixel">ELEMENT FONT
j. ELEMENT HR (Horizontal Rule)

Element HR berfungsi untuk membuat suatu garis horizontal. Element ini tidak
mempunyai tag penutup dan mempunyai attribute align untuk menempatkan posisi secara
horizontal ("left", "center", "right"), size untuk ukuran ketebalan garis ("pixel"), width
untuk ukuran panjang garis ("persen"), dan noshade (garis solid).
Sintaks:
<hr align="left"|"center"|"right" size="pixel" width="persen" noshade>
3.2. Pembuatan Tabel Menggunakan HTML

a. Tabel
Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca Mengatur
tampilan homepage agar lebih menarik. Salah satu fungsi dan atribut dijelaskan
pada tabel dibawah ini
3.2.Tabel Atribut dan Fungsi

Atribut Fungsi

Border Menentukan ukuran border/garis table

Width Menentukan lebar table

Height Menentukan tinggi table

Bgcolor Menentukan background table

Background Menentukan gambar yang digunakan untuk background
table

54

Color Untuk mengatur warna suatu sel dalam table

Align Mengatur bentuk perataan horizontal

Valign Mengatur bentuk perataan vertical

Rowspan Menggabungkan beberapa baris

Colspan Menggabungkan beberapa kolom

Cellspacing dan cellpadding Mengatur spasi antar sel dan spasi dalam sel

b. Membuat tabel sederhana Tampilan

Tag yang diperlukan:

Membuat baris: <tr> (table row)

Membuat kolom: <td> (table data)

<html>
<head>

<title> Belajar Membuat Tabel </title>
</head>
<body>

<table border="1">
<tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr>
<tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr>

</table>
</body>
</html>

c. Menambahkan judul tabel:

Judul tabel: <caption>

Judul baris/kolom: <th> (table header)

55

<html>
<head>

<title> Belajar Membuat Tabel </title>
</head>

<body>
<table border="1">

<caption align="top"> <b> DAFTAR MAHASISWA </b>
</caption>

<tr><th>No</th><th>NPM</th><th>Nama</th></tr>
<tr><td>1</td><td>06.100.001</td><td>Amin A.

Angkasa</td></tr>
<tr><td>2</td><td>06.100.002</td><td>Beni B.

Bernardi</td></tr>
</table>

</body>
</html>

d. Membuat warna pada table Tampilan Hasil:

Atribut: bgcolor 56

Contoh:
<body bgcolor="purple">

<font size="3" face="arial" color="yellow">
<table border="2" bgcolor="white" align="center">

<caption align="bottom">
<b> Tabel Daftar Mahasiswa </b> </caption>
<tr bgcolor="yellow">

<th>No</th><th>NPM</th><th>Nama</th></tr>
<tr bgcolor="cyan"><td align="center"
width="20">1.</td>
<td align="left" valign="middle“

width="80" height="40">06.100.001</td>
<td align="left" valign="middle“

width="180" height="40">Amin A.
Angkasa</td></tr>

<tr><td bgcolor="blue" width="20">2.</td>
<td bgcolor="red" align="left" valign="middle"

width="80" height="40">06.100.002</td>
<td bgcolor="green" align="left" valign="middle"

width="180" height="40">Beni B.
Bernardi</td></tr>

</table>
</body>

e. Mengatur Lebar Dan Tinggi Suatu Tabel

Atribut: width dan height
ukuran % (max 100%)
ukuran pixel

<html> Tampilan Hasil:
<head>

<title> Belajar Membuat Tabel </title>
</head>
<body>
<table border=1 bgcolor="green" width=300 height=100>
<tr height=30>

<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr height=70>
<td>Baris 2 Kolom 1</td>
<td background="./images.jpg">
Baris 2 Kolom 2 <br><br> Background bagus</td>
</tr>
</table>
</body>
</html>

f. Perataan Dalam Tabel

horisontal: atribut align utk <caption>, <tr>, <td> dan <th>

vertikal: atribut valign utk <tr>, <td> dan <th> Tampilan Hasil:

<table border="1" align="center">
<caption align="top">
<b> DAFTAR MAHASISWA </b> </caption>
<tr><th>No</th><th>NPM</th><th>Nama</th></tr>
<tr><td align="center" width="20">1.</td>
<td align="center" valign="middle"
width="80" height="50">06.100.001</td>
<td align="right" valign="top"
width="180" height="50">Amin A. Angkasa</td></tr>
<tr><td width="20">2.</td>
<td align="left" valign="top"
width="80" height="70">06.100.002</td>
<td align="left" valign="bottom"
width="180" height="70">Beni B. Bernardi</td></tr>

</table>

57

g. Cellpading dan cellspacing

atribut cellpading: mengatur spasi antara border dengan tulisan

atribut cellspasing: mengatur spasi antar 2 buah sel

<table border="1" bgcolor="white" align="center“ cellpadding="10" Tampilan Hasil:
cellspacing="12">

<caption align="top">
<b> Tabel Daftar Nilai Mahasiswa </b> </caption>
<tr bgcolor="gray"><th rowspan="2">No</th>
<th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th

colspan="2">Nilai</th>
</tr>
<tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr>
<tr><td align="center" width="20">1.</td>
<td align="left" valign="middle" width="80"

height="40">06.100.001</td>
<td align="left" valign="middle" width="180" height="40">Amin A.

Angkasa</td>
<td align="center" valign="middle">70</td> <td align="center"

valign="middle">80</td>
</tr>
<tr><td width="20">2.</td>
<td align="left" valign="middle" width="80"

height="40">06.100.002</td>
<td align="left" valign="middle" width="180" height="40">Beni B.

Bernardi</td>
<td align="center" valign="middle">70</td> <td align="center"

valign="middle">80</td>
</tr>
</table>

58

BAHAN AJAR
MATERI 4-5

4.1. Apa itu CSS
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa

komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan
merupakan bahasa pemograman. Sama halnya styles dalam aplikasi word processing
seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, sub-bab,
bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam
beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman
web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengatur ukuran gambar, warna bagian tubuh pada teks, warna tabel,
ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf,
spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah
bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya
CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang
berbeda. Sumber dan informasi selengkapnya, bisa ditemukan di :

http://www.w3.org
http://id.wikipedia.org/wiki/Cascading_Style_Sheets

4.1.1. Sintaks Dasar pada CSS

Sintaks pada CSS terdiri dari dua bagian, yakni bagian Selector dan bagian

Declaration. Di dalam Declaration terdapat sebuah Property dan Value. Ilustrasinya bisa

dilihat pada gambar di

bawah ini :

Gambar 4.1. Property dan Value
Selector adalah bagian pada HTML yang akan menjadi target dari pemformatan
oleh CSS, umumnya adalah berupa elemen HTML. Sedangkan Declaration adalah bagian
dari sintaks CSS yang berisi format-format (styles) yang dinyatakan dengan Property dan
Value. Sebuah baris kode CSS bisa terdapat satu atau banyak Declaration. Aturan
penulisannya :
1) Selector ditulis pada bagian awal baris kode CSS
2) Declaration ditulis antara tanda “{“…. “}”

59

3) Penulisan Property dan Value pada Declaration dibatasi dengan tanda “:”
4) Setiap Declaration diakhiri dengan tanda “;” sebelum ditulis Declaration baru.

Contoh
Berikut adalah contoh penulisan baris kode CSS :

p {color:blue;text-align:center;}

Atau, agar mudah dibaca bisa ditulis sebagai berikut :

p{
color:blue;
text-align:center;

Penjelasan
Dari contoh di atas, bisa dijelaskan sebagai berikut :
Selector yang digunakan adalah “p”, yakni sebuah tag HTML
yang digunakan untukmendefinisikan sebuah paragraf.
Declaration pada contoh diatas dinyatakan dengan “color:blue;"dan
“text-

align:center;”
Maka baris CSS tersebut akan menjadikan elemen paragraph
(p) dalam dokumen HTML sebagai target pemformatan.
Dalam hal ini, konten dalam elemen “p” akan diformat
dengan warna biru dan perataan teksnya adalah center.

4.1.2. Bentuk Komentar pada CSS (CSS Comments)
Komentar (comment) digunakan untuk memberikan penjelasan pada baris kode

CSS yang kita buat, dan akan sangat berguna ketika kita akan mengedit baris kode
tersebut di kemudian hari. Baris kode yang dinyatakan sebagai komentar, tidak akan
ditampilkan pada browser.Komentar pada CSS dimulai dengan tanda “/*” dan diakhiri

/* ini adalah baris komentar */
p{
color:blue;
text-align:center;
}
/* ini adalah baris komentar yang lain */

dengan tanda “*/”, contoh :

60

4.1.3. Jenis-Jenis Selector pada CSS
Selector pada sintaks CSS umumnya adalah berupa tag HTML, namun bisa juga

berupa atribut IDataupun CLASS pada elemen HTML yang akan dilakukan pemformatan
tampilan (styling).

4.1.4. Selector berupa Tag HTML
Semua tag HTML bisa digunakan sebagai Selector pada CSS, penulisannya adalah

denganmenyebutkan nama dari tag tersebut.
Contoh :

body {background:#ff0000;}
h1 {font-size: 36px;color:blue;}
p {color:#333333;text-align:justify;}
4.1.5. Selector berupa atribut ID
Selector ID digunakan untuk melakukan pendefinisian style pada element HTML
tunggal dan bersifat unique. Selector ID menggunakan atribut ID pada tag HTML, yang
kemudian penyebutan dalam sintaks CSS menggunakan tanda “#” (tanda pagar).
Contoh :
File [index.html]

<p>artikel pada paragraf</>
<p>artikel pada paragraf</>

S<typlei.cds=s”penting”>artikel pada paragraf</>

P{
text-align:justify;
color:grey;
}

#penting {

Pemfotcreomxltoa-traa:nlriedgdno;:kcuemnetnerH; TML dengan bentuk CSS tersebut akan menghasilkan
tampilan halaman web dimana dua paragraf pertama berwarna abu-abu (grey) dengan
alignm} ent “justify”, sedangkan paragraf ketiga, yang memiliki atribut ID=”penting”
akan terformat dengan alignment “center” dan warna teksnya adalah merah (CSS
dengan selector “#penting”). Artinya paragraf ketiga, akan berbeda dengan dua
paragraf diatasnya yang tidak memiliki atribut ID.

61

4.1.6. Selector berupa atribut CLASS
Selector CLASS digunakan untuk mendefinisikan pemformatan elemen HTML

dengan membaca atribut CLASS pada tag HTML. Berbeda dengan Selector ID yang
digunakan untuk pemformatan elemen tunggal, Selector CLASS umumnya digunakan
untuk melakukan pemformatan pada satu atau lebih elemen HTML (group of elements).
Selector CLASS pada penulisan baris kode CSS menggunakan tanda “.” (tanda titik).
Contoh :

File [index.html]

<p class="merah">konten pada paragraf ke-1</p>
<p class="biru"> konten pada paragraf ke-2</p>
<p class="merah"> konten pada paragraf ke-3</p>
<p class="biru"> konten pada paragraf ke-4</p>

Style.css

p{
font-size: 12px;
text-alignment:justify;

.merah{
color: red;

.biru{
color: blue;

Dengan bentuk seperti di atas, maka akan dihasilkan sebuah halaman web sejumlah
empat paragraf, dimana tiap paragraf memiliki ukuran huruf sebesar 12px dan alignment
teksnya adalah justify (CSS dengan selector “p”).

Dari keempat paragraf tersebut, juga akan dihasilkan tampilan berupa :

a. Paragraf ke-1 dan ke-3 memiliki warna teks merah (CSS dengan selector
“.merah”)

b. Paragraf ke-2 dan ke-4 memiliki warna teks biru (CSS dengan selector
“.biru”)

Namun, perlu diingat bahwa bentuk penulisan CSS seperti di atas (contoh pada
62

Selector Class) akan mengakibatkan semua elemen HTML yang memiliki atribut
class=”biru” akan ditampilkan dengan warna biru, dan semua elemen HTML yang
memiliki atribut class=”merah” akan ditampilkan dengan warna merah juga, tidak hanya
berlaku pada elemen “p”.

Sebagai contoh, apabila dokumen HTML berbentuk seperti di bawah ini :

<p class="merah">konten pada paragraf ke-1</p>
<p class="biru"> konten pada paragraf ke-2</p>
<p class="merah"> konten pada paragraf ke-3</p>

<pMcaklaa,ssa=p"abbiilrau"p>enkuolinstaenn CpSaSdaseppaerratigrpaafdakec-o4n<t/oph> di atas, akan menghasilkan
tamp<idlainv kcolnatsesn=p”abdiareul”e>mkeonntdeivn jduaglaabmerdwiavrn.a..b.ir.u,</kdarievn>a elemen div memiliki atribut
class=”biru”. Untuk mengindari hal terserbut, atau agar pemformatan pada CSS hanya
berlaku pada elemenparagraf, maka penulisan pada CSSnya adalah sebagai berikut :

p{
font-size: 12px;
text-alignment:justify;

}
p.merah{

color: red;
}

4.p1..7b.irSu{elector untuk Elemen Turunan
coDloarla:mblduoek;umen HTML, konten sebuah elemen bisa berupa elemen lainnya.

M}aka diperlukancara penulisan tersendiri untuk memilih sebuah elemen HTML yang akan
ditetapkan sebagai target pemformatan dengan CSS. Mari kita lihat contoh di bawah ini :

<h1>Judul dengan <em>bagian penting</em> di dalamnya</h1>
<p>Artikel yang terdapat <em>bagian penting</em> di dalamnya</p>

Apabila kita ingin melakukan pemformatan pada elemen “em” yang berada pada elemen
“h1”,maka penulisan CSSnya adalah sebagai berikut :

h1 em { color:red; }

Dengan penulisan CSS seperti di atas (menambahkan spasi antar Selector), maka hanya bagian
elemen “em” yang berada di dalam elemen “h1” saja yang akan ditampilkan dengan warna merah,
sedangkan elemen “em” diluar elemen “h1” akan tetap tampil mengikuti tampilan default.

63

4.1.8. Pengelompokan Selector (Grouping)

Declaration pada CSS bisa diterapkan untuk satu jenis atau beberapa jenis elemen
sekaligus. Caranya adalah dengan menuliskan beberapa Selector dalam satu baris kode
CSS yang dipisahkan dengan tanda “,” (koma) sebelum penulisan Declaration.
Contohnya, pada CSS dinyatakan :

h1, h2, h3, h4{
color:red;
}

Maka akan mengasilkan tampilan halaman web dimana konten pada elemen
“h1”, “h2”, “h3” dan “h4” memiliki warna yang sama, yakni merah. Demikian juga
pemformatan untuk elemen yang lain bisa dilakukan dengan cara yang sama.
4.1.9. Mengintegrasikan CSS pada Dokumen HTML

Ada tiga cara untuk menerapkan pemformatan CSS pada dokumen HTML, yakni
dengan metode External Style Sheet, Internal Style Sheet dan Inline Style Sheet.Cara
pertama disebut denganExternal Style Sheet, yaitu dengan cara membuat dokumen CSS
yang terpisah, kemudian dibuat tautan dengan tag <link> pada elemen header dalam
dokumen HTML yang akan diterapkan pemformatan dengan CSS tersebut.

body {background:lavender;color:#333333;}
h1{color:red;}

Sebagai contoh, baris kode CSS dinyatakan sebagai berikut :
Disimpan dalam sebuah dokumen berformat style sheet dengan nama : mystyle.css

Maka, untuk menerapkan pemformatan tersebut ke dalam dokumen HTML, digunakan tag
<link>yang dituliskan pada elemen head sebagai berikut :

<head>
<title>Contoh penggunaan CSS External</title>

<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
<head>

Note: Dalam contoh ini, file mystyle.css berada dalam satu folder dengan file HTML-nya.

Dengan cara ini, kita bisa menerapkan pemformatan CSS tersebut ke banyak
dokumen HTML, dan cukup menambahkan tautan untuk tiap masing-masing dokumen.
Keuntungan lainnya, adalah apabila suatu saat kita ingin mengganti format tampilan
halaman web dengan format tampilan yang baru, cukup mengganti tautan tersebut ke file
CSS baru yang akan. Digunakan.

64

4.1.10. Internal Style Sheet
Cara kedua adalah dengan menggunakan Internal Style Sheet, yakni dengan

cara menuliskan baris kode CSS pada elemen head menggunakan tag <style> seperti di
bawah ini :

<head>
<style>
body {background:lavender;color:#333333;}
h1{color:red;}
</style>

<bodyC> ara ini biasa digunakan untuk melakukan pemformatan pada sebuah halaman
w.e.b.yang akan ditampilkan berbeda dengan halaman web lainnya. Misalnya, apabila kita
memiliki lima halaman web yang sudah dihubungkan dengan sebuah file CSS, namun ada
satu halaman web yangmemiliki format yang sedikit berbeda, maka digunakanlah Internal
style sheet.
4.1.11. Inline Style Sheet

Cara ketiga adalah menggunakan Inline Style Sheet, yaitu dengan menggunakan
atribut “style” pada tag-tag HTML yang akan ditambahkan pemformatan CSS. Misal, kita
akan membuat tampilan elemen h1 menjadi berwarna merah, maka penulisan elemen h1-
nya adalah sebagai berikut :

<h1 style=”color:red” >Ini adalah judul artikel</h1>

Atribut “style” pada tag HTML tersebut, bisa diberikan lebih dari satu property
CSS sama halnyadengan menggunakan Internal Style Sheet ataupun External Style Sheet.

4.2. BASIC ELEMENT STYLING
Pada bagian ini akan dibahas bagaimana cara melakukan pemformatan ( styling )

pada elemen HTML dengan menggunakan baris kode CSS. Terdapat 6 (enam) hal
mendasar yang akan dibahas, yakni : Background styling, Text styling, Font styling, List
styling, Link styling dan Table styling.

65

4.2.1. Background-color
Property “background-color” digunakan untuk mengatur latar belakang sebuah

elemen dengannilai berupa warna.
Sintaks-nya :

background-color: color-value;

Keterangan :
a. Nilai warna (color-value) pada CSS biasanya menggunakan kode warna
dalam beberapavarian, yakni Hexadesimal color, RGB color dan Color-
name.
b. Untuk mengetahui kode warna yang bisa digunakan, bisa dilihat dari tabel
warna dasar(basic color) di bawah ini.
Tabel 4.1. Basic Color Keywords

Selain warna-warna dasar tersebut, kita juga bisa memilih warna-warna lain yang
lebih spesifik dan sesuai dengan kebutuhan desain website kita. Untuk mendapatkan nilai
warna yang diinginkan, kita bisa menggunakan aplikasi-aplikasi yang menyediakan fitur
color picker, seperti pada aplikasi Adobe Photoshop dan sejenisnya.

66

Contoh penerapan Property "background” :[ Index.html ]

<body>
<div class="artikel">
<h1>Judul Artikel</h1>

<p>text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text

</p>
</div>
</body>

[ Style.CSS ]

body {
background-color:rgb(153,204,255);

}
.artikel {

background-color: #CC6666;
}
.artikel h1 {

background-color: maroon;
}

Dengan bentuk file HTML dan deklarasi CSS seperti contoh diatas, akan
dihasilkan sebuahtampilan halaman web seperti gambar berikut :

67

Gambar 4.2. Hasil HTML dan deklarasi CSS
4.2.2. Background-image

Property “background-image” digunakan untuk menjadikan sebuah file gambar
(image) menjadilatar belakang pada sebuah elemen HTML.
Sintaks-nya :

background-image: url(‘url-file-gambar’);

Keterangan :
1. File gambar yang digunakan bisa berupa file *.jpg, *.png ataupun *.gif.
2. Secara default, gambar yang dijadikan background akan ditampilkan
berulang, secarahorizontal dan vertikal.
3. Url file gambar bisa menggunakan relative path ataupun absolute url.

Contoh :
Edit Declaration untuk Selector “body” pada file CSS, sehingga menjadi seperti berikut :

body {
background-color:rgb(153,204,255);
background-image : url(wallpaper.jpg);

}

Note : file “wallpaper.jpg” berada dalam folder yang sama dengan file “index.html”,
dengan ukuran file 200 x 200 pixel.

68

Hasilnya akan terlihat seperti gambar berikut :

Gambar 4.3. Hasil Selector “body” pada file CSS
4.2.3. Background-repeat

Property “background-repeat” digunakan untuk mengatur perulangan
(repeatation) pada gambar yang ditampilkan sebagai background dengan Property
“background-image”. Perulangan tampilan gambar tersebut, bisa diatur ke arah horizontal
(sumbu x ) ataupun ke arah vertikal (sumbu y).
Sintaks-nya :

Background-repeat: repeat | no-repeat | repeat-x | repeat-y;

Keterangan :
1. Value defaultnya adalah “repeat”, yaitu gambar ditampilkan berulang secara
horizontaldan vertikal.
2. No-repeat; gambar sebagai background hanya ditampilkan satu kali, tidak ada
perulangan.
3. Repeat-x; gambar ditampilkan berulang secara horizontal (sumbu x).
4. Repeat-y; gambar ditampilkan berulang secara vertikal (sumbu y).

body {
background-color:rgb(153,204,255);
background-image : url(‘wallpaper.jpg’);
background-repeat : repeat-x;

}

69

Contoh :
Edit Declaration untuk Selector “body” pada file CSS, sehingga menjadi seperti berikut :

Dengan penulisan CSS seperti di atas, akan menghasilkan tampilan halaman web
dengan background berupa file image seperti pada gambar berikut ini :

Gambar 4.4. Hasil Tampilan Halaman Web Dengan Background
4.2.4. Text Styling

Konten elemen HTML berupa teks bisa diatur tampilannya dengan melakukan
pemformatan pada CSS. Property pada CSS yang digunakan untuk pemformatan teks
antara lain : color, text- align, text-decoration, text-indent, dan text-transform.
Color
Property “color” digunakan untuk mengatur tampilan warna konten / teks pada elemen

HTML.Sintaks-nya :

color: color-value;

Keterangan :
Color-value bisa menggunakan Hexadecimal, RGB ataupun color name.

Contoh :
Masing menggunakan file pada contoh sebelumnya (background styling), editlah

Declarationpada bagian Selector “.artikel h1”, sehingga menjadi seperti berikut :

.artikel h1 {
background-color: maroon;
color: #ffffff;

}

Note : ditambahkan property “color”

70

Hasilnya, konten pada elemen H1 akan berwarna putih (#FFFFFF) seperti terlihat
pada gambar dibawah ini :

Gambar 4.5. Hasil Konten Pada Elemen H1 Akan Berwarna Putih
4.2.5. Text-align

Property “text-align” digunakan untuk mengatur perataan teks secara horizontal
(mendatar).Sintaks-nya :

text-align: left | center | right | justify;

Keterangan :
1. Left : teks ditampilkan dengan rata kiri
2. Center : teks ditampilkan dengan rata tengah
3. Right : teks ditampilkan dengan rata kanan
4. Justify : teks ditampilkan dengan perataan kanan-kiri
5. Inherit : format perataanya mengikuti nilai alignment elemen induknya

.artikel {
background-color: #CC6666;
text-align:justify;

}
.artikel h1 {

background-color:maroon;
color:#ffffff;
text-align:center;
}

71

Contoh :

Edit Declaration untuk Selector “.artikel” dan “.artikel h1”, sehingga menjadi seperti
berikut :
Note : masing-masing Selector ditambahkan Property “text-align” dengan nilai yang
berbeda.

Hasilnya akan terlihat seperti gambar berikut :

Gambar 4.6. Hasil Selector ditambahkan Property “text-align”
4.2.6. Text-decoration

Property “text-decoration” digunakan untuk menambah atau membuang ornamen
tertentupada teks.
Sintaks-nya :

text-decoration : none | underline | overline | line-through |blink;

Property ini biasa digunakan untuk menghilangkan ornamen underline pada
hyperlink, atau memberikan efek tertentu untuk bagian-bagian yang dianggap perlu pada
sebuah artikel.
Contoh :
Edit file HTML pada contoh sebelumnya sehingga menjadi seperti berikut :

<div id="artikel">

<h1>Judul Artikel^Penting</h1>

<p>text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text <br>

<a href="#">Baca Selengkapnya...</a> 72
</p>

</div>

Editlah file CSS dengan menambahkan baris berikut :

.artikel h1 sup {
color:#FF0;
text-decoration:blink;

}
.artikel p a {

color:#ffffff;
text-decoration:none;
}

Dari struktur dokumen HTML dan pemformatan CSS seperti di atas, akan
dihasilkan tampilanhalaman web seperti gambar di bawah ini:

Gambar 4.7.Hasil HTML dan pemformatan CSS
Catatan : Ada beberapa browser yang tidak bisa menampilkan teks Blink
4.2.7. Font Styling

CSS juga memungkinkan kita untuk melakukan pemformatan pada font, seperti
menentukan ukuran font atau memilih jenis font yang akan digunakan. Property pada CSS
yang digunakan untuk melakukan pemformatan font antara lain : font-size, font-family,
font-style dan font-weight.
A. Font-size

Property “font-size” digunakan untuk menentukan ukuran dari font (huruf) yang akan
ditampilkan. Property ini bisa diterapkan untuk elemen-elemen HTML yang
berhubungan
Namun perlu dicatat bahwa, meskipun kita bisa melakukan pemformatan pada ukuran

73

font, tetapi sangat tidak dianjurkan untuk menggunakan Property ini untuk menjadikan
heading terlihat seperti paragraf dengan mengecilkan ukuran font-nya ataupun sebaliknya,
menjadikan paragraf seperti heading dengan memperbesar ukuran font-nya. Tetap
gunakan Tag Heading untuk membuat heading pada artikel.
Sintaks-nya :

font-size: <absolute-size> | <relative-size> | <lenght> | <percent>;

Keterangan :
Value pada Property “font-size” bisa berupa :

1. Absolute-size, yakni ditentukan dengan nilai : xx-small, x-small, small, medium,
large,x-large, dan xx-large.

2. Relative-size, yakni ditentukan dengan nilai : larger atau smaller
3. Lenght, yakni dengan menentukan ukuran font dalam satuan pixel atau dalam em.
4. Percent, yakni menentukan ukuran font dengan nilai persen (%)
5. Jika ukuran font tidak ditentukan, maka akan digunakan nilai default, yakni

untuk teksnormal seperti paragraf akan memiliki nilai 16px (1em = 16px = 100%).
B. Mengatur Ukuran Font dalam Satuan Pixel

Berikut ini adalah contoh penentukan ukuran font pada CSS dengan satuan Pixel :

h1 { font-size: 40px; }
h2 { font-size: 30px; }
p { font-size: 14px; }

Dengan menentukan ukuran font seperti di atas, maka akan dihasilkan tampilan halman

web dengan ukuran font untuk h1 sebesar 40px, h2 sebesar 30px dan font normal untuk

paragraf sebesar 14px.

Pada contoh di atas, memungkinkan browser (seperti Internet Explorer 9, Firefox,

Chrome,Opera, dan Safari ) untuk me-resize ukuran font apabila user mengaktifkan fungsi

zoom-in ataupun zoom-out pada browser. Khusus untuk Internet Explorer, hanya berlaku

untuk versi IE9.

C. Mengatur Ukuran Font dalam Satuan Em

Berikut ini adalah contoh penentuan ukuran font pada CSS dengan satuan Em.

h1 { font-size: 2.5em; } >> 40px/16 = 2.5em
h2 { font-size: 1.875em; } >> 30px/16 = 1.875em
p { font-size: 0.875em; } >> 14px/16 = 0.875em

Untuk menghitung nilai pixel ke dalam satuan em, yaitu dengan berpatokan bahwa
1em adalah ukuran normal untuk sebuah teks, dimana 1em = 16px. Sehingga untuk

74

mengkonversi nilai pixel ke dalam em bisa dihitung dengan rumus em = pixel/16. Dengan
menggunakan satuan em, memungkinkan semua browser (termasuk IE versi sebelum IE9)
untuk me-resize ukuran font saat user mengaktifkan fungsi zoom-in ataupun zoom-out.
Penggunaan satuan em ini juga telah direkomendasikan oleh W3C.

Namun, pada contoh diatas masih terdapat satu kekurangan. Yakni apabila user
menggunakan IE versi yang lebih lama, ukuran font akan lebih besar dari seharusnya
apabila di zoom-in dan lebih kecil dari seharusnya apabila di zoom-out.

Sebagai solusi untuk kedua masalah di atas, agar ukuran Font sesuai dengan
pengaturan yang ditetapkan dan berlaku untuk seluruh browser, adalah dengan
menyatakan ukuran Font default dalam satuan persen pada elemen <body>.
Contoh :

Masih menggunakan file HTML dan CSS pada contoh sebelumnya, tambahkan dan
editlah baris kode CSS seperti pada contoh di bawah ini:

body {
font-size:100%; }

.artikel h1 {
font-size:2.5em; }

.artikel p {
font-size: 0.875em; }

Dengan penulisan CSS seperti di atas, akan dihasilkan sebuah halaman web dengan
ukuran font normal adalah 100% (16px / 1em). Sedangkan untuk h1 pada Class “artikel”
ukuran font-nya adalah 2.5em (40px) dan untuk paragraf pada Class “artikel” ukuran font-
nya adalah 0.875em 4px).
Tampilan pada browser akan terlihat seperti pada gambar di bawah ini :

Gambar 4.8. Hasil Tambahkan Dan Editlah Baris Kode CSS

75

D. Font-family

Pada CSS, dikenal dua jenis nama font family, yakni :

1. Font Family; yaitu sebuah nama jenis font yang spesifik, seperti : “Times
New Roman”atau “Arial”.

2. Generic Family; yaitu kelompok font family yang memiliki kemiripan
tampilan, seperti“serif”, “sans-serif” atau “monospace”.

Perhatikan tabel di bawah ini !
Tabel 4.2. Font Family dan Generic Family

Generic family Font family Keterangan
Serif Times New Roman
Georgia Font “Serif” mempunyai bentuk ujung
yang runcing pada beberapa bentuk
Sans-serif Arial karakternya
Verdana
“Sans” berarti “tidak dengan/tanpa”,
Monospace Courier New artinya jenis huruf ini tidak mempunyai
Lucida Console bentuk ujung runcing pada tiap
karakternya.

Semua karakter jenis font ini memiliki
ukuran lebar yang sama.

Perbedaan antara font Serif dan font Sans-serif.
Untuk mengatur jenis font agar sesuai dengan yang diinginkan, pada CSS

digunakan Property“font-family”.
Sintaks-nya :

font-family: <family-name> | <generic-family>;

Keterangan :
1. Value pada Property ini harus dinyatakan lebih dari satu jenis font (font-family),
sebagai cadangan apabila font pertama tidak ditemukan, akan dicari font kedua,
apabila tidak ditemukan juga akan dicari yang sejenis dengannya (generic-family)
2. Jika nama font-family terdiri dari dua kata atau lebih, ditulis dengan
menggunakan tandapetik ( “contoh nama font” ).

76

Contoh :

Edit Declaration untuk Selector “.artikel h1” dan “.artikel p”, sehingga menjadi seperti
berikut :
.artikel h1 {

font-size:2.5em;

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

}

.artikel p {

font-size: 0.875em;

font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; }

Hasilnya, font pada elemen H1 akan ditampilkan dengan jenis font “Trebuchet MS”
sedangkan pada elemen P dengan font “Palatino Linotype”. Perhatikan gambar di bawah
ini:

Gambar 4.9. Hasil Elemen P Dengan Font “Palatino Linotype”

Gambar 4.10. Tampilan Skema Web

77

5.1. CSS Box Model

Pada bagian ini, kita akan membahas sebuah bentuk styling dalam CSS yang
disebut dengan istilah “Box Model”. Apa itu CSS Box Model ? Bagaimana prinsip kerja
dan cara implementasinya dalam desain web? Ikuti pembahasannya pada bagian ini
dengan seksama dan jangan lupa untuk langsung mencobanya.

Keterangan :
1. Margin, adalah area kosong yang berada di bagian paling luar dari sebuah elemen

HTML. Nilai yang dinyatakan dalam bagian ini, menyatakan jarak atau batas dari
elemen HTML tersebut dengan elemen HTML lainnya. Margin tidak memiliki
nilai background warna, tetapi selalu bersifat transparent.
2. Border, adalah sebuah garis pembatas yang mengelilingi sebuah elemen HTML
namun berada didalam wilayah Margin.
3. Padding, adalah sebuah area kosong yang berada diantara Border dan Content dari
elemen HTML. Berbeda dengan Margin yang tidak memiliki warna, unsur warna
dari Padding didapatkan dari nilai background element HTML yang bersangkutan.
4. Content, adalah bagian utama dari elemen HTML yang berisi teks atau gambar
yang akan ditampilkan.
Perlu diketahui bahwa posisi dari Margin, Border dan Padding berada diluar dari
Content, sehingga nilai yang diberikan untuk ketiganya akan berpengaruh menambah luas
area dari elemen HTML. Simak baik-baik pembahasan berikut ini!

5.1.1. Menetapkan Ukuran Sebuah Elemen ( Width dan Height )
Sebuah elemen HTML dalam halaman web bisa kita atur nilai lebar dan tingginya.
Property yang digunakan untuk menetapkan ukuran dari sebuah elemen HTML ini adalah
Property “width” dan “height”.

Sintaks-nya :

width: auto | length | percent ;
height: auto | length | percent ;

Keterangan :
1. Value default dari Property “width” dan “height” adalah auto, yang berarti browser
akan melakukan perhitungan secara otomatis untuk menentukan nilainya.
2. Value berupa lenght, bisa menggunakan nilai desimal dengan satuan px, em atau
cm, namun yang paling umum digunakan adalah dengan satuan pixel (px).

78

3. Value berupa percent, akan diterjemahkan oleh browser dengan menghitung
persentasi dari nilai lebar atau tinggi elemen induknya.

<!DOCTYPE html>

<html">
<head>
<title>CSS Box Model</title>
<style>
.container {

background: #06F;
width:400px;
height:300px;

}
.artikel {

background: #CCF;
}
img {

width:340px;
height:180px;

}
</style>

Contoh<:/head>
H<absiolndyya> akan terlihat seperti pada gambar berikut ini :

<div class="container">
<img src="wallpaper.jpg" width="200" />
<div class="artikel"> Ini adalah artikel singkat yang berisi

penjelasan tentang gambar di atas </div>

</div>
</body>
</html>

Gambar 5.2. Hasil CSS Box Model

79

Penjelasan :

1. Elemen div dengan atribut Class=”container” ditentukan dengan nilai
width:400px; nilai height:300px; dan background:#06F; sehingga
menghasilkan sebuah tampilan area kotak berukuran 400x300px dengan latar
belakang warna biru.

2. Elemen div dengan atribut Class=”artikel” ditentukan dengan nilai
background:#CCF; namun tidak diberikan deklarasi untuk width dan height,
sehingga nilai keduanya adalah auto. Dalam hal ini nilai width mengikuti
nilai width dari elemen induk (Container), sedangkan untuk nilai height
mengikuti kebutuhan content-nya (teks didalamnya).

3. Elemen img ditentukan dengan nilai width:340px; dan nilai height:180px;
sehingga menghasilkan tampilan gambar dengan ukuran lebar 340x180px.

5.1.3. Margin

Jarak sebuah elemen HTML dengan elemen HTML lain yang bersinggungan
disebut dengan “margin”. Tiap elemen HTML memiliki empat sisi margin yaitu margin
atas, margin kanan, margin bawah dan margin kiri.

Luas area dari masing-masing margin bisa diatur dengan menggunakan Property berikut :

“margin-top” - untuk margin atas,
“margin-right” - untuk margin kanan,
“margin-bottom” - untuk margin bawah, dan
“margin-left” - untuk margin kiri.

Sintaks-nya :

margin-top: auto | length | percent; margin-right: auto | length | percent; margin-bottom:

auto | length | percent;|margin-left: auto | length | percent;

Keterangan :
1. Value default untuk masing-masing Property adalah “0”

2. Value yang bisa digunakan untuk mengatur nilai margin bisa berupa nilai
auto, lengthdan percent.

3. Value berupa auto, akan menghasilkan nilai margin yang diperhitungkan secara

otomatisoleh browser mengikuti keadaan disekeliling elemen.

4. Value berupa length, bisa menggunakan satuan px, em atau cm. Namun
yang umumdigunakan adalah menggunakan satuan px (pixel).

5. Value berupa percent, akan menghasilkan nilai margin yang dihitung dari

persentasi areayang berada di sekelilingnya.

Jika pada penjelasan sebelumnya kita menentukan nilai margin dengan
menggunakan Property untuk masing-masing sisi elemen, berikut ini kita akan
menggunakan satu Property untuk mengatur ke-empat sisi dari elemen HTML. Property
yang digunakan adalah “margin”.

80

BAHAN AJAR
MATERI 6-7

6.1. PENGENALAN PHP
Menurut Wardana (2016). PHP merupakan akronim dari ”PHP : Hypertext

Presprocessor”. PHP merupakan bahasa script yang biasa digunakan untuk web
development yang dapat diselipkandalam HTML. Berbeda dengan script-script lainnya
seperti Java Script atau VB script, PHP dieksekusi di lingkungan server, client hanya
menerima hasil dari script yang telah dieksekusi, tanpa bisa mengetahui kode yang
digunakan.
Apa saja yang dapat dilakukan PHP?

PHP difokuskan pada scripting server-side, jadi Anda dapat melakukan apa yang
bisa dilakukan CGI dengan menggunakan PHP seperti mengambil data inputan
form,meng- generate konten halaman dinamis, mengirim dan menerima cookies dan
masih banyak lagi. Kemampuan dan supportnya untuk database juga sangat dapat
diandalkan.
Sekarang ini, PHP bahkan dikembangkan untuk menjadi bahasa pemrograman. Untuk
lebih jelasnya, Anda dapat mencari informasi lebih lanjut di distro-distro Linux keluaran
baru.
Di lingkungan mana PHP bekerja?

Awalnya, PHP bekerja di lingkungan Linux, karena merupakan ’turunan’ bahasa
PEARL yang merupakan bahasa pemrograman native di lingkungan Linux dan Unix.
Namun seiring perkembangan dan kebutuhan maka PHP dibuat secara cross platform.
PHP dapat bekerja di lingkungan Windows maupun Linux.

PHP mengeksekusi server script lebih cepat dari server script manapun. PHP
menempati ranking pertama dalam hal kecepatan eksekusi, diikuti oleh ASP dan JSP.
Dengan kemampuannya, apakah PHP gratis? PHP dapat anda Download secara free atau
cuma-cuma. Kunjungi saja situs www.php.net , dan download versi terbarunya.

81

Gambar 6.1. Sistem Kerja program PHP
6.2. Tahapan Instalasi Apache

Merupakan tahapan instalasi program apache yang dibutuhkan untuk pemogrman
web berikut langkah-langkah menginstalan dibawah ini:.

1. Jalankan apache_2.0.48-win32-x86-no_ssl.msi
2. Klik next, sampai ada isian seperti berikut dan isikan :

domain anda seperti : zensoft.com
server name : faruq.zensoft.com
administrator email address : [email protected]

Gambar 6.2. Tampilan Apache
3. Pilih Typical dan klik next.

82

4. Klik finish, dan di kanan bawah akan muncul tanda ikon apache.

Gambar 6.3. Tampilan Ikon Apache
5. Test koneksi dengan mengetikkan : http://localhost di internet explorer

Gambar 6.4. Tampilan http://localhost
6.3. Tahapan Instalasi php

Merupan salah satu proses penginstalan php yang dilakukan pada langkah-langkah
dibawah ini:
1.Ekstrak php-4.3.4-Win32.zip ke drive c:/
2.Ganti nama c:/php-4.3.4-Win32.zip dengan c:/php
3.Copykan file php.ini-dist ke C:/windows
4.Ubah nama file diatas menjadi php.ini
5.Edit httpd.conf di C:/Program Files/Apache Group/Apache2/conf
a. Tambahkan script alias berikut ini :

ScriptAlias /cgi-bin/ "C:/Program Files/Apache Group/Apache2/cgi-bin/"
83

ScriptAlias /php/ "C:/php/"
b. Tambahkan addtype :

AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz
AddType application/x-httpd-php .php
Action application/x-httpd-php "/php/php.exe"
c. Tambahkan index.php untuk pathnya :
DirectoryIndex index.html index.html.var index.php
6. Restart Apache
7. Buat file php, simpan dengan nama phpinfo.php dan masukkan di C:/Program
Files/Apache Group/Apache2/htdocs
<? phpinfo(); ?>
8. Test apakah php sudah terinstal dengan baik :

http://localhost/phpinfo.php

Gambar 6.5. Tampilan http://localhost/phpinfo.php

84

7.1. TAG DALAM PHP

Banyak cara untuk menyisipkan PHP dalam script HTML, ada berbagai macam

bentuktag yang dapat digunakan, antara lain :

Cara I

<?php menandai awal tag

...

?> menandai akhir tag

Cara II

<? menandai awal tag

...

?> menandai akhir tag

Cara III

<% menandai awal tag
...

%> menandai akhir tag
Cara ini sama dengan tag pada ASP. Opsi ini bisa dilakukan jika nilai

asp_tags pada php.ini bernilai on.

Cara IV

<script language=”php”> menandai awal script

... menandai akhir script
</script>

Namun untuk lebih mudahnya, kita akan menggunakan cara II mulai

sekarang danseterusnya. Ada kalanya kita sebagai pemrogram, karena banyaknya kode

program atau variabel dalam program, perlu menandai atau memberi komentar pada

program. Komentar pada program merupakan tulisan pada program yang tidak

dieksekusi. Pada PHP, ada 3 macam cara penulisannya :

1. /* komentar */

Tulisan apapun yang berada di antara ’/*’ dan ’*/’ akan dianggap sebagai

komentar. Cara seperti ini sangat berguna dan efisien untuk pemberian komentar

yang memakan banyak baris.

2. // komentar

Tulisan di baris yang sama setelah ’//’ akan dianggap sebagai komentar. Cara ini

berguna untuk pemberian komentar singkat yang tak lebih dari 1baris saja.

85

3. # komentar
4. Sama seperti ’//’, tulisan di baris yang sama setelah ’#’ akan dianggap sebagai

komentar. Cara ini berguna untuk pemberian komentar singkat yang tak lebih dari
1 baris saja.

A. VARIABEL DAN TIPE DATA
Dalam PHP, penulisan variabel diawali dengan karakter ‘$’, kemudian diikuti

dengan huruf sebagai karakter pertama. Setelah itu, dapat dilajutkan dengan kombinasi
huruf dan angka. Variabel tidak boleh mengandung spasi maupun tanda baca di
dalamnya, kecuali underscore (’_’).
Variabel pada PHP bersifat “case sensitif”, yang berarti Anda harus memperhatikan
penulisan huruf besar dan huruf kecil. Variabel $jumlahberbeda dengan $Jumlah.

Contoh penamaan variabel yang benar :
$nama_pemakai

$kota_3

$user1

Contoh penamaan variabel yang salah :
$nama pemakai

$3kota

$us\er1

B. Tipe Data
Tipe data yang dapat diolah menggunakan PHP, antara lain :

1. Boolean
Nilai boolean menyatakan nilai kebenaran. Suatu variabel boolean dikatakan salah

(FALSE) jika :
1. Variabel boolean bernilai FALSE
2. Variabel integer 0 (nol)
3. Variabel float 0.0 (nol)
4. Varaibel string kosong atau string “0”
5. Variabel array dengan nol elemen
6. Variabel objek dengan nol anggota

86

7. Dan tipe spesial yaitu NULL
Selain hal-hal tersebut di atas, maka nilai boolean dianggap TRUE.
2. Integer
5
-9

1500

0123 octal

0xfb hexadecimal

3. Floating Point0.8998

23e2

4. String

’Teks menggunakan aphostof’ ...menggunakan tanda petik tunggal ”Teks

menggunakan quote” ...menggunakan tanda kutip Pada tipe data string,

terdapat escape character, yaitu karakter khusus yang digunakan mewakili karakter

ASCII dengan fungsi khusus. Untuk mendefinisikan karakter yang akan ditampilkan jika

karakter tersebut merupakan escape character yaitu dengan mengawali karakter tersebut

dengan tanda \ (backslash).

Daftar escape character :

5. Array

Tipe data array akan dibahas pada suatu bab tersendiri.

6. Object

Ini merupakan pengembangan PHP berorientasi objek. Tipe data objek merupakan

tipe data yang didalamnya mempunyai data dan method. Data tersebut didefinisikan

sebagai class terlebih dahulu.

C. Operator

Operator merupakan suatu tool/alat untuk keperluan manipulasi data. Operator

dapatdibedakan menjadi :

1. Operator Aritmetika

2. Operator String Menggunakan ’.’ (tanda titik)

$a = "Hello ";

$b = $a . "World!"; // sekarang $b berisi "Hello World!"

Menggunakan ‘.=’ (tanda titik dan sama dengan)

87

$a = "Hello ";

$a .= "World!"; // sekarang $a berisi "Hello World!"

3. Operator Increment/Decrement
4. Operator Logika
5. Operator Ternary
Menggunakan tanda ’?’, dengan syntax :
(ekspresi1) ? (ekspresi2) : (ekspresi3)
Operator ternary malakukan pengujian pada ekspresi1, jika hasilnya TRUE, maka

ekspresi 2 yang dijalankan, jika hasil ekspresi1 FALSE, maka ekspresi3 yang
dijalankan.
Contoh :

<?

$a = 2;

$hasil = ($a<4) ? ($a*2) : ($a*3)echo ”$hasil”;

?>

Dari contoh di atas, maka hasil yang terlihat adalah 4, namun jika nilai $a

diganti 5, maka hasilnya adalah 15.

6. Operator Perbandingan

7. Operator AssignmentContoh :

$a = 4; //$a diisi dengan nilai 4

$a += 5; //sama dengan $a = $a + 5;

8. Operator Kontrol Error

Dengan memberikan tanda ’@’ pada ekspresi PHP, maka pesan error yang

dihasilkan oleh suatu ekspresi akan diabaikan. Jika fitur track_error enable,

maka setiap pesan error yang diterima akan disimpan dalam variabel global

$php_errormsg.

Contoh :

<?php

$my_file = @file ('non_existent_file') or

die ("Failed opening file: error was '$php_errormsg'");

88