BAGIAN 1

1.1. PENDAHULUAN

Pemrograman web adalah bahasa yang digunakan untuk

membangun sebuah halaman website dengan menggunakan
beberapa bahasa yaitu HTML untuk mendesain tampilan website,
CSS mendukung desain tampilan website menjadi lebih menarik,
PHP digunakan untuk mengolah logika website da nada juga
Javascript yang biasanya digunakan untuk mempermudah atau
mendukung penggunaan aplikasi nantinya.

Supaya dapat membuat website dengan kualitas produksi, paling

tidak harus menguasai bahasa-bahasa yang sudah dijelaskan
tersebut untuk dapat dengan mudah menguasai bahasa dengan
cara sering mencoba dan melakukan beberapa riset atau latihan.

Pemrograman web ini adalah bahasa yang perkembangannya tidak

terlalu cepat sehingga sangat cocok sekali dipelajari dan termasuk
bahasa yang mudah dipelajari, disamping itu programmer di bidang
ini juga sangat banyak dibutuhkan di dunia kerja saat ini dan yang
akan dating karena hamper mayoritas website yang ada di dunia
menggunakan bahasa ini.

1.2. DASAR-DASAR WEB DAN HTML

Sebelum masuk ke konsep dasar pemrograman web, ada hal yang

sangat penting yaitu kebutuhan perangkat untuk dapat belajar
pemrogram web ini.

1. Hardware minimum
a. Komputer Proseccor core 2 duo 2.5 GHz.
b. RAM 2 Gb.
c. Harddisk minimal 120 Gb.
 d. Monitor resolusi 1280 x 1024.
2. Software
a. Sistem Operasi Windows 7,8,10 atau Linux
b. Editor Notepad, Notepad++, Visual Studio Code, Sublime,
dreamweaver.
c. Web server Apache.
d. Database Mysql atau MariaDB.
e. Filezila Uploader.
f. Xampp (poin c, d dan e sudah ada didalam aplikasi ini).

Berbicara mengenai konsep dasar website, ada beberapa teori yang

perlu dipahami dahulu sebelum melanjutkan materi supaya proses
belajarnya tidak terhambat karena istilah-istilah tersebut akan
sering digunakan dalam materi selanjutnya.

1.2.1. Pengertian Web

Web adalah salah satu aplikasi yang berisikan dokumen-dokumen
multimedia (teks, gambar, suara, animasi, video) di dalamnya yang
menggunakan protokol HTTP (hypertext transfer protocol) dan
untuk mengaksesnya menggunakan perangkat lunak yang disebut
browser, Arief, M. R. (2011).

1.2.2. Pengertian Situs Web

Situs web merupakan kumpulan dari halaman web yang sudah
dipublikasikan di jaringan internet yang berisikan semua informasi
yang dibutuhkan semua pengguna internet, Arief, M. R. (2011).

1.2.3. Pengertian Web Statis dan Dinamis

Ditinjau dari aspek content atau isi, web dapat dibagi menjadi 2
jenis, yaitu web statis dan web dinamis, Arief, M. R. (2011).

1. Web Statis
Web statis adalah web yang isinya/content tidak berubah-ubah
maksudnya adalah isi dari dokumen web tersebut tidak dapat
diubah secara cepat dan mudah. Teknologi yang digunakkan untuk
web statis adalah jenis client side scripting seperti HTML,
Casecading Style Sheet (CSS). Perubahan isi/data pada halaman
web statis hanya dapat dilakukan dengan cara mengubah langsung
isinya pada file mentah web tersebut.

2. Web Dinamis
Web dinamis adalah jenis web yang content/isinya dapat berubah-
ubah setiap saat. Untuk melakukan perubahan data, user cukup
mengubahnya langsung secara online diinternet melalui halaman
control panel/administrasiyang biasanya telah disediakan untuk
user administrator sepanjang user tersebut memiliki hak akses yang
sesuai.

1.2.4. Pengertian WWW

World Wide Web atau yang biasa disingkat WWW merupakan
kumpulan situs web yang dapat diakses di internet yang berisikan
semua informasi yang dibutuhkan semua pengguna internet , Arief,
M. R. (2011).

1.2.5. Web Server

Web server adalah program aplikasi yang memiliki fungsi sebagai
tempat menyimpan dokumen-dokumen web, Arief, M. R. (2011).
Macam – macam Web Server diantanya:
1. Apache Web Server – The HTTP Web Server
2. Apache Tomcat
3. Microsoft windows Server 2003 Internet Information Services
(IIS)
4. Lighttpd
5. Sun Java System Web Server
6. Xitami Web Server
7. Zeus Web Server

7.1.1. Pemrograman Web

Secara umum pemrograman web dibagi menjadi 2, yaitu Client Side
Scripting (CSS) dan Server Side Scripting(SSS). Perbedaan kedua
jenis script ini adalah pada bagaimana cara kerjanya dan lokasi
pemrosesannya, Arief, M. R. (2011).

1. Client Side Scripting CSS adalah salah satu jenis bahasa

pemrograman web yang proses pengolahannya dilakukan disisi
client.
2. Server Side Scripting SSS adalah bahasa pemrograman web
yang pengolahannya dilakukan disisi server.

7.1.2. HTML
HTML atau HyperText Markup Language merupakan salah satu
format yang digunakan dalam pembuatan dokumen dan aplikasi
yang berjalan di halaman web. Sunyoto, A. (2007).

7.1.3. PHP
PHP (Hypertext Preprocessor) adalah bahasa server-side scripting
yang menyatu dengan HTML untuk membuat halaman web yang
dinamis. Karena PHP adalah server-side scripting maka sintaks dan
perintah-perintah PHP akan dieksekusi di server kemudian hasilnya
dikirim ke browser dalam format HTML. Salah satu keunggulan
yang dimiliki oleh PHP adalah kemampuannya untuk melakukan
koneksi ke berbagai macam software sistem manajemen basis
data/ Database Management System (DBMS), sehingga dapat
menciptakan suatu halaman web yang dinamis. PHP mempunyai
koneksitas yang baik dengan beberapa DBMS antara lain Oracle,
Sybase, mSQL, MySQL, Microsoft SQL Server, Solid, PostgreSQL,
Adabas, FilePro, Velocis, dBase, Unix dbm dan tak terkecuali semua
database berinterface ODBC. (Abdul Kadir,2005).

7.1.4. Bootstrap
Bootstrap adalah sebuah library framework CSS yang di buat
khusus untuk bagian pengembangan front-end website. Bootstrap
merupakan salah satu framework HTML, CSS dan javascript yang
paling populer di kalangan web developer. Pada saat ini hampir
semua web developer telah menggunakan bootstrap untuk
membuat tampilan front-end menjadi lebih mudah dan sangat
cepat. Karena anda hanya perlu menambahkan class-class tertentu
untuk misalnya membuat tombol, grid, navigasi dan lainnya. (Otto,
2011).

7.1.5. Browser
Browser adalah sebuah aplikasi perangkat lunak yang digunakan
untuk menampilkan halaman Web.
Microsoft Internet Explorer, Netscape Navigator, Mozilla, Chrome
adalah contohnya. Pendeknya untuk Web browser, merupakan
aplikasi perangkat lunak digunakan untuk menemukan, mengambil
dan juga menampilkan konten di World Wide Web, termasuk
halaman Web, gambar, video dan file lainnya. Sebagai model klien /
server, browser ini jangka klien pada komputer yang kontak server
Web dan permintaan informasi.

1.3. Struktur Dasar HTML

Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi
elemen dan tag akhir.
Tag <html> merupakan awal dari sebuah dokumen HTML dan tag
</html> merupakan akhir dari sebuah dokumen HTML. Maka isi
dari keseluruhan dokumen HTML berada diantara
<html>…..</html>.
Tag <head> merupakan header. Header berisikan informasi
dokumen HTML dan menyimpan judul pada halaman web.
Penulisan header diawali dengan <head> lalu tag judul kemudian
diakhiri dengan </head>.
Tag <title>…..</title> merupakan tag untuk memberikan judul
dokumen HTML yang terdapat pada header halaman web browser.
Tag <body>…..</body> merupakan isi dari suatu dokumen HTML
yang akan ditampilkan di web browser.
Contoh Struktur Struktur Dasar HTML

Gambar 1.1. Struktur Dasar Html

1.3.1. Tag – Tag pada Html

Nama Tag Keterangan / Kegunaan

Basic

<!DOCTYPE> Tag untuk menentukan tipe dokumen

<html> Tag untuk membuat sebuah dokumen

HTML

<title> Tag untuk membuat judul dari sebuah

halaman

<body> Tag untuk membuat tubuh dari sebuah

halaman
<h1> to <h6> Tag untuk membuat heading

<p> Tag untuk membuat paragraf

<br> Memasukan satu baris putus

<hr> Tag untuk membuat perubahan dasar kata

didalam isi

<!--...--> Tag untuk membuat komentar

Formatting

<acronym> Tag untuk membuat sebuah akronim (tidak

disupport lagi di HTML5)

<abbr> Tag untuk membuat sebuah singkatan

<address> Tag untuk membuat kontak alamat

<b> Tag untuk membuat huruf bercetak tebal

<bdi> Mengisolasi bagian dari teks yang dapat

diformat dalam arah yang berbeda dari teks
lain di luarnya (tag baru HTML5)

<bdo> Mengganti arah teks

<big> Tag untuk membuat text berhuruf
besar (tidak disupport lagi di HTML5)

<blockquote> Tag untuk membuat sebuah bagian text

yang dikutip dari sumber lain

<center> Tag untuk membuat jajaran teks menjadi

ditengah (tidak disupport lagi di HTML5)

<cite> Tag untuk membuat judul karya

<code> Tag untuk membuat potongan kode

komputer di antara text

<del> Tag untuk membuat teks yang telah

dihapus dari dokumen

<dfn> Tag untuk membuat sebuah istilah definisi

<em> Tag untuk membuat penekanan teks (tidak

disupport lagi di HTML5)

<font> Tag untuk membuat font, warna, dan

ukuran untuk teks (tidak disupport lagi di
HTML5)

<i> Tag untuk membuat sebuah bagian dari

 teks yang disesuaikan dengan mood

<ins> Tag untuk membuat teks yang telah

dimasukkan ke dalam dokumen

<kbd> Tag untuk membuat input keyboard

<mark> Tag untuk membuat teks yang disorot /

ditandai (tag baru HTML5)

<meter> Tag untuk membuat pengukuran skalar

<pre> Tag untuk membuat teks terformat

<progress> Memperlihatkan kemajuan tugas (tag baru

HTML5)

<q> Tag untuk membuat kutipan pendek

<rp> Tag untuk membuat apa yang harus

ditampilkan di browser yang tidak
mendukung penjelasan ruby (tag baru
HTML5)

<rt> Tag untuk membuat sebuah anotasi /

pengucapan karakter (untuk tipografi Asia
Timur)
<ruby> Tag untuk membuat sebuah anotasi ruby
(untuk tipografi Asia Timur) (tag baru
HTML5)

<s> Tag untuk membuat teks yang tidak lagi

benar

<samp> Tag untuk membuat contoh keluaran dari

program komputer

<small> Tag untuk membuat teks kecil

<strike> Tag untuk membuat teks yang di coret

tengah (tidak disupport lagi di HTML5)

<strong> Tag untuk membuat teks penting

<sub> Tag untuk membuat teks subskrip (seperti

dalam penulisan Jat Kimia)

<sup> Tag untuk membuat teks superscripted

(seperti dalam penulisan akar kuadrat)

<time> Tag untuk membuat tanggal / waktu (tag

baru HTML5)

<tt> Tag untuk membuat teks teletype (tidak

 disupport lagi di HTML5)

<u> Tag untuk membuat teks yang memiliki

Gaya yang berbeda dari teks biasa lainnya

<var> Tag untuk membuat sebuah variabel

<wbr> Tag untuk membuat kemungkinan garis-

putus

Forms

<form> Tag untuk membuat sebuah form HTML

untuk input pengguna

<input> Tag untuk membuat sebuah kontrol input

<textarea> Tag untuk membuat sebuah kontrol input

multibaris (text area)

<button> Tag untuk membuat sebuah tombol yang

dapat diklik

<select> Tag untuk membuat sebuah daftar drop-

down

<optgroup> Tag untuk membuat sebuah kelompok

pilihan yang terkait dalam daftar drop-
 down

<option> Tag untuk membuat pilihan dalam daftar

drop-down

<label> Tag untuk membuat sebuah label untuk

sebuah elemen <input>

<fieldset> Grup unsur terkait dalam bentuk

<legend> Tag untuk membuat sebuah caption untuk

sebuah elemen <fieldset>, < figure>, atau
<details>

<datalist> Menentukan daftar pilihan yang telah

ditetapkan untuk kontrol input (tag baru
HTML5)

<keygen> Tag untuk membuat key-pair generator

kolom input (tag baru HTML5)

<output> Tag untuk membuat hasil

penghitungan (tag baru HTML5)

Frames

<frame> Tag untuk membuat sebuah window

 (bingkai) dalam sebuah frameset (tidak
disupport lagi di HTML5)

<frameset> Tag untuk membuat satu set bingkai (tidak

disupport lagi di HTML5)

<noframes> Tag untuk membuat sebuah konten

alternatif untuk pengguna yang tidak
mendukung frame (tidak disupport lagi di
HTML5)

<iframe> Tag untuk membuat sebuah bingkai

Images

<img> Tag untuk membuat gambar

<map> Tag untuk membuat gambar-peta

<area> Tag untuk membuat area dalam gambar-

peta

<canvas> Digunakan untuk menggambar grafik,

melalui scripting (JavaScript ) (tag baru
HTML5)

<figcaption> Tag untuk membuat sebuah caption untuk

 elemen <figure> (tag baru HTML5)

<figure> Menentukan konten mandiri (tag baru

HTML5)

Audio/Video

<audio> Tag untuk membuat isi suara (tag baru

HTML5)

<source> Tag untuk membuat sumber beberapa

media untuk elemen media (<video> dan
<audio>) (tag baru HTML5)

<track> Tag untuk membuat trek teks untuk elemen

media (<video> dan <audio>) (tag baru
HTML5)

<video> Tag untuk membuat sebuah video atau

film (tag baru HTML5)

Links

<a> Tag untuk membuat hyperlink

<link> Tag untuk membuat hubungan antara

dokumen dan sumber daya eksternal
 (paling sering digunakan untuk link ke style
sheet)

<nav> Tag untuk membuat navigasi link (tag baru

HTML5)

Lists

<ul> Tag untuk membuat daftar dengan selain

nomor

<ol> Tag untuk membuat daftar dengan nomor

<li> Tag untuk membuat sebuah item daftar

<dir> Tag untuk membuat sebuah daftar

direktori (tidak disupport lagi di HTML5)

<dl> Tag untuk membuat sebuah daftar definisi

<dt> Tag untuk membuat istilah (item) dalam

daftar definisi

<dd> Defines a description of an item in a

definition list

<menu> Tag untuk membuat deskripsi dari item

dalam daftar definisi
<command> Tag untuk membuat sebuah tombol
perintah bahwa seorang pengguna dapat
meminta (tag baru HTML5)

Tables

<table> Tag untuk membuat tabel

<caption> Tag untuk membuat sebuah caption tabel

<th> Tag untuk membuat sebuah sel header

tabel

<tr> Tag untuk membuat baris dalam sebuah

tabel

<td> Tag untuk membuat sel dalam sebuah tabel

<thead> Mengelompokan isi header dalam sebuah

tabel

<tbody> Mengelompokanisi tubuh dalam sebuah

tabel

<tfoot> Mengelompokan isi footer dalam sebuah

tabel

<col> Menentukan properti kolom untuk setiap

 kolom dalam elemen <colgroup>

<colgroup> Menentukan kelompok dari satu atau lebih

kolom dalam sebuah tabel untuk diformat

Style/Sections

<style> Tag untuk membuat informasi style untuk

dokumen

<div> Tag untuk membuat sebuah bagian dalam

dokumen

<span> Tag untuk membuat sebuah bagian dalam

dokumen

<header> Tag untuk membuat sebuah header untuk

dokumen atau bagian (tag baru HTML5)

<footer> Tag untuk membuat footer untuk dokumen

atau bagian (tag baru HTML5)

<hgroup> Pengelompokan elemen heading (<h1>

sampai <h6>) (tag baru HTML5)

<section> Tag untuk membuat bagian dalam

dokumen (tag baru HTML5)
<article> Tag untuk membuat sebuah artikel (tag
baru HTML5)

<aside> Tag untuk membuat konten lain selain dari

konten halaman (tag baru HTML5)

<details> Tag untuk membuat rincian tambahan yang

pengguna dapat lihat atau
sembunyikan (tag baru HTML5)

<dialog> Tag untuk membuat sebuah kotak dialog

atau jendela (tag baru HTML5)

<summary> Tag untuk membuat sebuah judul terlihat

untuk elemen <detil> (tag baru HTML5)

Meta Info

<head> Tag untuk membuat informasi tentang

dokumen

<meta> Tag untuk membuat metadata tentang

dokumen HTML

<base> Menentukan URL dasar / target untuk

semua URL relatif dalam dokumen
<basefont> Menentukan standar warna, ukuran, dan
font untuk semua teks dalam
dokumen (tidak disupport lagi di HTML5)

Programming

<script> Tag untuk membuat script di sisi klien

<noscript> Tag untuk membuat sebuah konten

alternatif bagi pengguna yang tidak
mendukung script di sisi klien

<applet> Tag untuk membuat sebuah java applet

yang ditanam (tidak disupport lagi di
HTML5)

<embed> Tag untuk membuat sebuah wadah untuk

aplikasi eksternal (non-HTML) (tag baru
HTML5)

<object> Tag untuk membuat sebuah objek yang

ditanam

<param> Tag untuk membuat sebuah parameter

untuk objek
Latihan Membuat Halaman Web menggunakan HTML

1. Buka Aplikasi Editor seperti Notepad++ atau Visual Studio Code.

2. Salin Kode berikut ini.

Gambar 1.2. Contoh Kode HTML

3. Simpan dengan cara ctrl + S atau pilih menu File  Save untuk
dokumen yang sudah ada atau Save As untuk menyimpan
dokumen dengan nama baru, simpan dengan nama
Contoh.html dan simpan didalam direktori D: atau didalam
folder.
4. Kemudian buka file Contoh.html yang sudah disimpan
menggunakan Browser disarankan menggunakan Chrome dan
hasilnya seperti berikut.
 Gambar 1.3. Hasil Akhir Contoh.html
BAGIAN 2

2.1. HTML Lanjutan

Pada pertemuan ini masih akan membahas mengenai HTML seperti
pada pertemuan sebelumnya, tetapi pada pertemuan ini materi
yang akan di sampaikan akan focus pada penggunaan tag-tag html
yang sudah di sampaikan sebelumnya.

2.2.1. Tag Dasar HTML

Tag Dasar ini sudah di sampaikan sebelumnya yaitu seperti
<p>,<h1> dan lainnya. Tag dasar sangat mudah diterapkan dalam
kode html dan sangat sering digunakan dalam desain website, disini
akan dijelaskan beberapa contoh penggunaan Tag html dasar
supaya lebih paham dalam menerapkannya.

1. Basic Text Formatting

Berikut ini adalah Tag Text Formatting yang sering digunakan pada
HTML.

Tabel 2.1. Formatting Text

Supaya dapat memahami cara penggunaanya didalam Html,

silahkan coba baris kode berikut ini.
 Gambar 2.1. Belajar Format Teks Html

Simpan dengan nama FormatTeks.html kemudian jalankan dan

hasilnya akan seperti berikut ini.

Gambar 2.2. Hasil Preview FormatTeks.html

2. Image pada HTML

Pada html untuk menampilkan gambar dapat menggunakan tag
<img> kemudian gunakan atribut “src=” pada tag <img>. Atribut src
(source) digunakan untuk menghubungkan dengan file gambar
yaitu untuk pemanggilan lokasi dan nama file gambar.
Jika file gambar terletak satu folder dengan file html yang
memanggilnya maka kode bisa langsung ditulis nama file
gambarnya. Tetapi jika file gambar berada pada folder yang
berbeda dengan file htmlnya maka sebelum nama gambarnya perlu
di tambahkan perintah “../”.
Contoh Penggunaan Kode untuk menampilkan gambar tapi
sebelum itu siapkan file gambar dengan nama “poltek.png”.

Gambar 2.3. Kode Menampilkan Gambar

Simpan File html kemudian jalankan dan lihat hasilnya seperti

berikut ini.

Gambar 2.4. Preview Menampilkan gambar html

Background halaman website juga bisa menggunakan gambar dan
juga warna.

Contoh kode untuk mengatur background html menggunakan

gambar berikut ini.

Gambar 2.5. Setting background Html

Dan contoh halaman dengan background warna berikut ini.

Gambar 2.6. Setting background Color Html

Setting Warna bisa menggunakan kode warna atau dengan nama

warna dalam bahasa inggris. Tetapi jika ingin menggunakan warna
yang lebih variatif maka disarankan menggunakan kode warna.

2.2.1. HTML Intermediate

1. Table Pada HTML
Seperti namanya yaitu berguna untuk membuat table data seperti
membuat jadwal atau menyajikan data dalam bentuk table, selain
itu table juga dapat digunakan untuk layout desain halaman web
sederhana tetapi disarankan menggunakan CSS untuk layout
halaman web (CSS akan dibahas pada pertemuan selanjutnya).
Di dalam tag <table> ada beberapa tag lain yang perlu dipahami,
yaitu :
a. Tag <tr>
Artinya tag untuk menuliskan baris biasa di tabel. TR singkatan dari
Table Row.
b. Tag <td>
Artinya tag untuk menuliskan kotak di dalam baris, makanya tag
<td> ada di
dalam tag <tr>. TD singkatan dari Table Data.
c. Tag <th>
Artinya tag untuk menuliskan kotak biasa seperti <td>, namun
untuk header tabel. TH singkatan dari Table Header.
Contoh kode penggunaan tag Tabel pada Html.

Gambar 2.7. HTML Table

Hasil dari kode html diatas adalah sebagai berikut.

 Gambar 2.7. HTML Table

Pada contoh diatas terlihat bahwa hasil table masih sederhana dan
belum ada penggabungan kolom atau baris. Untuk dapat
menggabungkan column maka atribut yang dipakai adalah
colspan=”” dan untuk menggabungkan row maka atribut yang
dipakai adalah rowspan=”’. Untuk lebih jelasnya lihat contoh kode
berikut ini.

Gambar 2.8. HTML Table Rowspan dan Colspan

Hasil dari kode diatas akan menghasilkan tampilan seperti pada

gambar berikut ini.
 Gambar 2.9. Preview Rowspan dan Colspan

2. Frame pada HTML

Frame yaitu teknik dalam menata atau membagi tampilan menjadi
beberapa bagian. Yakni membagi posisi header, content, menu,
sidebar, footer.
Contoh tampilan layout website menggunakan Frame.

Gambar 2.10. Layout dengan Frame

Berikut ini adalah langkah-langkah untuk membuat desain layout
dengan menggunakan Frame di HTML, ikuti langkah-langkah
berikut ini.

Gambar 2.11. Struktur FIle

1. Buatlah Folder dengan nama “Frame” untuk tempat

menyimpan file Html yang akan dibuat.
2. Buka Editor seperti Notepad++ kemudian ketik kode berikut ini.

Gambar 2.12. Kode Program Index.html

Simpan didalam folder yang sudah dibuat pada langkah 1, simpan

dengan nama “index.html”.
3. Kemudian tambah file baru kemudian ketik kode berikut ini.

Gambar 2.13. Kode Program header.html

Pada baris ke-7 ada file gambar dengan nama poltek.png tetapi
sebelum itu ada tulisan img/ yang menandakan bahwa file gambar
tersebut berada didalam folder img.

Selanjutnya simpan file dengan nama “header.html”.

4. Tambahkan File baru dan ketik kode berikut ini.

Gambar 2.14. Kode Program menu.html

Simpan dengan nama “menu.html” dan letakkan didalam folder

frame.
5. Tambahkan file baru dan ketik kode berikut ini.
 Gambar 2.15. Kode Program content.html

Kemudian simpan dengan nama “content.html”.

6. Tambahkan file baru dan ketikan kode berikut ini.

Gambar 2.16. Kode Program sidebar1.html

Kemudian simpan dengan nama “sidebar1.html”.

7. Tambahkan file baru dan ketikan kode berikut ini.

Gambar 2.17. Kode Program sidebar2.html

Kemudian simpan dengan nama “sidebar2.html”.

8. Tambahkan file baru dan ketikan kode berikut ini.

Gambar 2.18. Kode Program sidebar3.html

Kemudian simpan dengan nama “sidebar3.html”.

9. Langkah terakhir adalah jalankan File index.html menggunakan
Browser Chrome dan lihatlah hasilnya akan sama seperti pada
gambar 2.10.
Jika hasil belum sesuai berarti kemungkinan masih ada kode
program yang belum sama, silahkan di cek ulang kemudian refresh
kembali halaman browsernya.

TUGAS MANDIRI

Membuat website sederhana menggunakan HTML dengan

menggunakan Frame dan menyertakan Foto Sendiri.
 BAGIAN 3

3.1. Cascading Style Sheet (CSS)

CSS adalah singkatan dari Cascading Style Sheets. Jika
diterjemahkan ke bahasa Indonesia secara harfiah, CSS berarti
“lembar penataan menurun”. Namun secara konteks, Cascading
Style Sheets adalah kumpulan perintah yang digunakan untuk
menjelaskan tampilan sebuah halaman situs web dalam mark-up
language. Mark-up language atau bahasa markah adalah bahasa
pemrograman yang biasanya digunakan untuk membuat website
seperti HTML yang telah dipelajari.
CSS adalah kode-kode yang dipakai untuk mendesain sebuah laman
HTML. Jika HTML diibaratkan sebagai seorang manusia, maka CSS
adalah pakaian yang membuat penampilan menjadi semakin
menarik. CSS akan membantu para web designer untuk mengubah
tampilan teks (baik dari bentuk dan ukuran font maupun
warnanya), menambahkan gambar, hingga mengubah latar
belakang sebuah halaman HTML.

3.1.1. Kelebihan CSS

Dengan belajar CSS (sebagai seorang web designer) bahkan bisa
lebih mudah mengendalikan website. Designer tidak harus pusing-
pusing mengutak-atik HTML saat harus memprogram ulang
tampilan laman. Bahkan pada CSS tingkat lanjut, Designer bisa
mengatur website lewat medium yang lain seperti suara.
Keuntungan lain dari belajar CSS adalah tingkat compatibility yang
tinggi. CSS kompatibel dengan kebanyakan browsers dan
sangat user-friendly.
Menurut website teknologi informasi Amerika Serikat, Lifewire,
menguasai CSS bahkan bisa mendapatkan pemasukan tambahan.
Kamu bisa menjadi seorang freelance web designer atau bahkan
menjual jasamu pada pihak yang membutuhkan. Terlebih, CSS juga
akan melatihmu untuk membuat website yang beragam. Jadi
Designer bisa membuat bervariasi website tanpa harus
menghabiskan waktu untuk belajar ulang.

3.1.2. Aturan Dasar Penulisan CSS

Gambar 3.1 Keterangan bagian CSS

Selector digunakan untuk memilih elemen-elemen HTML

berdasarkan nama, id, class, atribut dan lain-lain. Berikut ini
merupakan beberapa teknik penulisan selector dalam CSS.
Element selector merupakan cara penulisan syntax css berdasarkan
elemen-elemen yang sudah disediakan pada bahasa HTML. Anda
dapat memlih semua elemen dari tag <p> pada sebuah halaman
seperti contoh dari elemen selector adalah sebagai berikut:

Jadi semua teks yang berada di dalam tag<p> akan berwarna merah
dan rata tengah atau center.
Class Selector digunakan untuk memilih elemen html yang memiliki
sifat atau perilaku yang sama dalam satu halaman. Selector Class ini
bisa digunakan untuk beberapa elemen dalam satu halaman.
Penerapan selector Class sebaiknya memperhatikan kesamaan
elemen-elemen pada halaman html.
Penulisan selector class pada CSS diawali dengan huruf titik (.) atau
dot. Kemudian nama class ditulis tepat setelah tanda titik. Deklarasi
CSS untuk Class ini ditulis diantara kurung kurawal seperti pada
selector elemen dan selector id. Berikut ini adalah penulisan class
selector:
Contoh script pemanggilan dari html adalah sebagai berikut :

Id Selector Untuk menuliskan selector Id kita menggunakan

karakter hash (#). Kemudian nama Id ditulis tepat setelah tanda #
tanpa spasi. Deklarasi CSS untuk ID ini ditulis diantara kurung
kurawal seperti pada selector elemen. Contoh penulisannya adalah
sebagai berikut:

Contoh script pemanggilan dari html adalah sebagai berikut :

Grouping Selector Digunakan jika anda memiliki beberapa elemen

dengan deklarasi style yang sama. Misalnya contoh berikut ini:

Jika di lihat pada contoh di atas, terdapat tiga elemen dengan

deklarasi style yang sama. Penulisan selector tersebut sangat tidak
efektif. Maka dari itu agar penulisan style lebih efektif maka akan
lebih baik untuk mengelompokkan selector-selector. Untuk
mengemlompokkan atau grouping selector, gunakan tanda koma
untuk setiap selector. contoh di bawah ini adalah cara untuk
mengelompokan beberapa selector dengan deklarasi style yang
sama.

3.1.3. Macam – Macam CSS

perlu diketahui bahwa CSS dibagi menjadi beberapa macam dengan
penggunaan yang berbeda-beda. Setidaknya ada tiga macam CSS
yang sering digunakan oleh web designer. Berikut penjelasannya.

1. Inline Style
CSS model ini adalah CSS dengan perintah pemrograman yang
letaknya ada pada objek. Misalnya kamu ingin mengubah sebuah
tulisan pada laman tertentu di website milikmu, inline style
sheet CSS harus menempel pada elemen tulisan tersebut. Kamu
cukup menambahkan tag <style> saja untuk menerapkan CSS ini.
Contoh penerapannya sebagai berikut.

Hasilnya lihat pada gambar 3.2 berikut ini.

 gambar 3.2 Inline Style CSS

2. Embedded Style
CSS model ini sama seperti inline style sheet, sama-sama berada
pada satu laman coding. Maka tidak mengherankan jika embedded
style sheet terkadang disebut dengan internal style sheet. Biasanya
CSS ini diapit oleh tag <head> </head> dan diawali dengan tag
<style>. Embedded style sheet sering digunakan untuk mengatur
laman web dengan tampilan yang unik. Misalnya dalam satu
paragraf tulisan ada kalimat yang berbeda dan hal tersebut terus
berulang. Contoh penulisan kode Embedded Style berikut ini.

Hasil dari kode diatas dapat dilihat pada gambar 3.3 dibawah ini.

gambar 3.3 Embedded Style CSS

3. Link Style
CSS ini letaknya berbeda dengan laman yang akan diubah. Cara ini
lebih praktis daripada inline style sheet karena bisa menghemat
ruang dan bisa digunakan berulang-ulang untuk laman web yang
berbeda. Kamu bisa mengenali CSS tipe ini lewat tag <link rel>. Tag
ini akan menghubungkan halaman coding pada external style
sheet CSS yang terpisah.
Contoh penggunaan Kode untuk Link Style ini.
Buatlah file baru dengan nama Style.css dan letakkan didalam
subfolder src kemudian tuliskan kode berikut.

Kemudian buat File baru lagi dengan nama index.html kemudian tulis kode berikut
ini.

Jadi pada file htmlnya cukup menambahkan link dimana file css
disimpan, jika pada halaman lain ingin menggunakan file css yang
sama maka cukup menambahkan link yang sama seperti diatas.

3.1.4. Property CSS

Property Deskripsi Values

font mengatur semua property font-style

font dengan 1 deklarasi font-variant
font-weight
font-size/line-
height
font-family
 caption
icon
menu
message-box
small-caption
status-bar

font-family list prioritas nama font family-name

family dan/atau nama family generic-family
yg generik untuk suatu
element

font-size menentukan ukuran font xx-small

x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%

font-style menentukan style font normal

italic
oblique

font-variant menampilkan text dalam normal

small-caps font (huruf kecil) small-caps
atau normal font

font-weight menentukan bobot dari font normal

bold
bolder
lighter
 100
200
300
400
500
600
700
800
900

Text

Property Deskripsi Values

color menentukan warna text color

direction menentukan arah text ltr

rtl

letter-spacing menentukan spasi antar normal

character dalam text length

text-align mengatur alignment text left

dalam suatu element right
center
justify

line-height menentukan spasi antar normal

baris dalam sebuah paragraf length

text-decoration memberi dekorasi pada text none

underline
overline
line-through
 blink

text-indent memberi indent pada baris length

pertama text dalam suatu %
element

text-transform mengatur huruf dalam none

element capitalize
uppercase
lowercase

white-space mengatur bagaimana normal

whitespace dalam element pre
nowrap

word-spacing menentukan spasi antar normal

kata length

List dan Marker

Property Deskripsi Values

list-style mengatur semua property list-style-type

list dalam 1 deklarasi list-style-
position
list-style-image

list-style-image menggunakan image sebagai none

marker list-item url

list-style- menentukan dimana marker outside

position list-item ditempatkan di list inside
list-style-type menentukan tipe marker disc
list-item circle
square
decimal
decimal-
leading-zero
lower-roman
upper-roman
lower-greek
lower-alpha
lower-latin
upper-alpha
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
none

Background

Property Deskripsi Values

background mengatur semua property background-

background dengan 1 color
deklarasi background-
image
background-
repeat
background-
attachment
background-
position

background- mengatur apakah scroll

attachment background image fixed fixed
atau scroll dengan bagian
page yang lain

background- mengatur background color transparent

color dari suatu element color

background- menggunakan image none

image sebagai background url

background- mengatur posisi pertama top left

position dari background image top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-%, y-%
x-pos, y-pos

background- mengatur apakah repeat

repeat background image diulang repeat-x
(tile) repeat-y
no-repeat

TUGAS MANDIRI

Membuat Desain Layout menggunakan CSS.

 BAGIAN 4

4.1. Javascript
Untuk tahap awal belajar JavaScript, Anda perlu mengenal apa itu
JavaScript. Pertama kali, JavaScript dikembangkan oleh Brendan
Eich dari Netscape dengan nama Mocha. Nantinya, nama ini diganti
menjadi LiveScript sebelum berakhir dengan nama JavaScript.
JavaScript inilah yang merupakan pengembangan bahasa
dari LiveScript.
JavaScript saat ini sudah banyak dikembangkan menjadi beberapa
pengetahuan lain, seperti AJAX. Asynchronous JavaScript dan XML
(AJAX) adalah teknik yang digunakan pada halaman website dengan
menggunakan bahasa pemrograman JavaScript. Metode yang
diterapkan adalah menerima dan mengirimkan data dengan server
tanpa harus menyegarkan (refresh) halaman itu.
JavaScript sudah menjadi bahasa pemrograman yang baku. Maka
dari itu, JavaScript bisa dikolaborasikan dengan banyak bahasa lain,
seperti HTML, untuk membuat website yang mudah digunakan oleh
pengguna.
JavaScript bisa membuat berbagai fitur mulai dari yang sederhana
sampai dengan yang paling kompleks, mislanya layout, galeri,
tombol, causels, dan lain sebagainya. Jika dikembangkan lebih
lanjut, JavaScript dapat digunakan untuk membuat baik animasi
dua dimensi maupun tiga dimensi, bahkan aplikasi yang
behubungan dengan database.
Meski tersusun atas bahasa yang cukup kompleks, JavaScript
sangatlah fleksibel. Banyak pengembang yang telah
memanfaatkannya untuk membangun dan menyediakan berbagai
macam aplikasi. Apalagi saat ini juga tersedia banyak sekali bahasa
pemograman pendukung seperti Node.js dan lainnya. Node.js
sendiri merupakan salah satu framework Javacript yang
mengeksekusi kode program JavaScript di luar browser.

4.2. Event Click

Event Click adalah memberikan suatu kejadian ketika tombol di klik,
menggunakan javascript untuk mendapatkan tanggal sekarang,
berikut ini adalah contoh kodenya.

Simpan menggunakan nama Event.html kemudian jalankan

menggunakan browser, hasil dari kode diatas dapat di lihat pada
gambar 4.1.

Gambar 4.1. Event Klik Javascript

4.3. Fungsi
Fungsi itu sebuah blok yang berisi beberapa kode dan memiliki
inisial nama. Berikut ini adalah contoh dari penggunaan fungsi
javascript didalam kode html.

Yang termasuk kedalam fungsi adalah kode pada baris 12 – 14, dan
fungsi tersebut dipanggil pada baris 15 dan hasilnya akan ditulis
kedalam komponen paragraph pada baris ke 9.
Simpan dan jalankan melalui browser dan hasilnya seperti pada
gambar 4.2.

Gambar 4.2. Javascript Function

4.4. Statement Javascript

Statement adalah pernyataan yang dituliskan berupa kode-kode
yang dikenal oleh komputer sesuai aturan bahasa pemrograman
yang bersangkutan agar dapat diesekusi dengan benar oleh sistem.
Tidak seperti HTML, dalam penulisan javscript statement ini bersifat
case-sensitive yang artinya huruf besar/capital berbeda dengan
huruf kecil/lowercase, jadi disarankan anda untuk lebih berhati-hati
dalam penulisan command, variable, obyek dan fungsi.
Berikut ini contoh penulisan Statemen pada Javascript.