MAKALAH

PEMROGRAMAN WEB

Disusun untuk memenuhi tugas

Mata Kuliah: Pemrograman Web

Dosen: Try Adrianto Darsono, S.kom., M.Cs

Disusun oleh

Riswan Syah (201955201015)

KELAS A

JURUSAN INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUSAMUS MERAUKE

2021
 Kata Pengantar

Puji syukur kehadirat Allah SWT yang telah memberikan rahmat dan
hidayah-Nya sehingga saya dapat menyelesaikan tugas makalah yang berjudul
konsep struktur data dan array serta sistem bilangan ini tepat pada waktunya.
Adapun tujuan penulisan dari makalah ini adalah untuk memenuhi tugas
dari bapak Try Adrianto Darsono, S.Kom.,M.Cs. pada mata kuliah Pemrograman
Web. Selain itu, makalah ini juga bertujuan untuk menambah wawasan tentang
konsep struktur data dan array serta sistem bilangan bagi para pembaca dan juga
bagi penulis.
Saya mengucapkan terima kasih kepada bapak Try Adrianto Darsono,
S.Kom.,M.Cs selaku dosen mata kuliah Pemrograman Web yang telah
memberikan tugas ini sehingga dapat menambah pengetahuan dan wawasan
sesuai dengan bidang studi yang saya tekuni.
Saya juga mengucapkan terima kasih kepada semua pihak yang telah
membagi sebagian pengetahuannya sehingga saya dapat menyelesaikan makalah
ini.
Saya menyadari, makalah yang saya buat ini masih jauh dari kata
sempurna. Oleh karena itu, kritik dan saran yang membangun akan saya nantikan
demi kesempurnaan makalah ini.

Merauke, 30 Juni 2021

Penyusun
 Daftar Isi

Kata Pengantar.......................................................................................................i
Daftar Isi................................................................................................................ii
BAB I PENDAHULUAN......................................................................................1
1.1 Latar Belakang...............................................................................................1
1.2 Rumusan Masalah..........................................................................................1
1.3 Tujuan............................................................................................................1
BAB II PEMBAHASAN.......................................................................................2
2.1 Pertemuan 2...................................................................................................2
2.2 Pertemuan 3...................................................................................................5
2.3 Pertemuan 4...................................................................................................7
2.4 Pertemuan 5.................................................................................................15
2.5 Materi CSS..................................................................................................16
2.6 Materi CSS Lanjutan...................................................................................22
2.7 Latihan CSS.................................................................................................31
BAB III PENUTUP.............................................................................................48
3.1 Kesimpulan..................................................................................................48
3.2 Saran............................................................................................................48
 BAB I
PENDAHULUAN

1.1 Latar Belakang

Internet bisa diakses dan dimanfaatkan untuk kapan pun dan dimana
pun kita mau menggunakannya. Salah satunya adalah web, yang mampu
menyediakan informasi dalam bentuk teks, gambar, suara maupun video.
Dengan kemampuan sepeti ini, web menjadi sangat terkenal dan
perkembangannya sangatlah pesat.
web berkembang menjadi alat bantu yang tidak hanya mampu
menyediakan informasi, namun juga mampu untuk mengolah informasi.
Proses pengolahan informasi dengan memanfaatkan teknologi web
menyebabkan web menjadi media yang dinamis. Hal ini membutuhkan
sarana teknis yang menentukan. Sarana tersebut banyak bergantung pada
penggunaan perangkat lunak yang kuat, aman, terpercaya, dan cepat.

1.2 Rumusan Masalah

1. Apa itu web?
2. Apa itu HTML dan cara penulisannya?
3. Apa itu CSS?

1.3 Tujuan
1. Mengetahui seputar web
2. Dapat mencoba melakukan pemrograman web dasar melalui HTML dan
CSS
 BAB II
PEMBAHASAN

2.1 Pertemuan 2
2.1.1 Internet / World Wide Web
Adalah suatu sistem global dari seluruh jaringan komputer yang saling
terhubung dengan standar Internet protocol suite (TCP/IP) untuk melayani
miliaran pengguna di seluruh dunia.

2.1.2 Sejarah Singkat

Pada awalnya, Internet adalah jaringan komputer yang dibentuk
Departemen Pertahanan AS pada 1969 melalui proyek ARPA, saat itu bernama
ARPANET (Advanced Research Project Agency Network) yang perangkat keras
dan lunak berbasis UNIX, melakukan komunikasi pada jarak yang jauh lewat
saluran telepon, dan menjadi cikal bakal pembangunan protokol baru yang kini
dikenal sebagai Transmission Control Protocol/Internet Protocol (TCP/IP).
Internet Protocol(IP)adalah protokol jaringan utama yang dipakai dalam
Internet. Dalam Internet dan banyak jaringan lain, IP sering dipakai bersama
dengan Transmission Control Protocol (TCP) dan keduanya dirujuk sebagai
TCP/IP memakai standar Internet Protocol version 4(IPv4), dengan alamat IP
sepanjang 32 bit (empat byte). Internet Protocol version 6 (IPv6), yang lebih
baru, memiliki alamat IP 128 bit (16 byte).

2.1.3 DNS
Domain Name System (DNS) adalah layanan Internet yang berfungsi
untuk menerjemahkan nama domain menjadi alamat IP. Alasannya adalah ama
domain lebih mudah diingat daripada alamat IP (karena sifatnya yang alfabetis).
Akan tetapi, Internet pada dasarnya didasarkan pada alamat IP, yang bersifat
numerik.
Layanan DNS yang akan menerjemahkan nama domain menjadi IP yang
sesuai DNS bisa di-update dengan cepat, memungkinkan lokasi layanan berubah
tanpa mempangaruhi end-user, yang memakai host name yang sama.
Contohnya :
nama domain www.example.co.id mungkin diterjemahkan
menjadi 198.105.125.23 (dalam IPv4) atau 2001:db8:0:0:0:ff00:42:8329
(dalam IPv6).
2.1.4 Web Server dan Web Browser
Server web (web server) bisa merujuk pada perangkat keras
(komputernya) atau perangkat lunak (aplikasinya) yang membantu menyediakan
konten Web yang bisa diakses melalui Internet.
Server web biasanya digunakan untuk web hosting, tapi mereka memiliki
kegunaan lain, antara lain menjalankan aplikasi enterprise. Layanan web yang
disediakan oleh server dimuat oleh peramban web (web browser), di mana
pemakai bisa memanfaatkan laman Web beserta resource lain yang terkait, antara
lain file video, audio, grafis, dan sertifikat digital. Secara umum ditujukan untuk
mengakses resource dari World Wide Web, tapi mereka juga bisa dipakai untuk
mengakses resource dari web server dari jaringan privat atau file dari sistem file.

2.1.5 Hyper Text Transfer Protocol (HTTP)

Adalah protokol yang mendasari World Wide Web mendasari bagaimana
pesan diformat dan ditransmisikan serta apa yang harus dilakukan server dan
peramban web sebagai respon berbagai situasi. Misalnya, saat Anda memasukkan
alamat URL ke dalam browser, ia mengirim perintah HTTP kepada server Web
untuk mengarahkannya ke laman Web yang diminta untuk didayagunakan.
Standar pengembangan HTTP dikoordinasikan oleh Internet Engineering Task
Force (IETF) dan World Wide Web Consortium (W3C).

2.1.6 Uiform Resource Locator

Serangkaian karakter yang merupakan alamat rujukan kepada suatu
resource di Internet.
Bagian pertama URL disebut sebagai protocol identifier, ditujukan untuk
mengindikasikan protokol apa yang harus dipakai.
Bagian keduanya disebut sebagai resource name, yang menunjukkan
alamat IP atau nama domain di mana resource itu berada.
Protocol identifier dan resource name dipisahkan oleh ://. Contoh, alamat
di bawah ini merujuk pada suatu laman web yang harus diambil dengan protokol
HTTP (Bagian yang ditulis tebal merupakan protocol name).
http://www.example.co.id/contoh.html
Pada kenyataannya, istilah ‘alamat Web’ adalah sinonim untuk URL yang
memakai protokol HTTP atau HTTPS.
URL adalah salah satu jenis dari Uniform Resource Identifier (URI); 
Jenis lain adalah Uniform Resource Name (URN), di mana kadang kala URN
juga merupakan URL.
2.1.7 HyperText Markup Leguage
HyperText Markup Language(HTML) adalah bahasa yang lazim
digunakan untuk membuat dokumen dalam World Wide Web.
 HTML ditulis dalam wujud elemen HTML yang terdiri dari tag yang
diapit oleh tanda <> (mis. <html>), dalam konten laman Web.
 Tag HTML biasanya berpasangan (mis. <h1> dan </h1>), tapi sejumlah
tag, dikenal sebagai elemen kosong, tidak berpasangan
(mis <img>).
Tag awal dalam pasangan tag dikenal sebagai start tag, dan yang kedua
sebagai end tag (juga dikenal sebagai, masing-masing, opening tag dan closing
tag).
Di antara keduanya desainer web bisa menambahkan teks, tag, komentar,
dan konten berbasis-teks lain.

2.1.8 Pemrograman Web

Istilah Pemrograman Web ditujukan pada aktivitas yang terkait dengan
menulis dan memelihara kode untuk sebuah website di Internet (World Wide
Web) atau intranet (jaringan privat)
Mulai dari situs yang paling sederhana (sebuah laman statis berisi teks)
hingga situs rumit yang memuat aplikasi internet, bisins elektronik, dan/atau
jejaring sosial, yang berbasis client-server.
 Pemrograman web dibagi menjadi dua bagian: client-side dan server-side,
serta penghubung di antara mereka.

2.1.9 Client Side

Dalam jaringan komputer, istilah ini merujuk pada apa yang terjadi di sisi
klien dalam hubungan klien-server. Secara umum, klien di sini merujuk pada
aplikasi komputer, misalnya web browser, yang berjalan pada satu komputer
lokal pemakai atau workstation yang terhubung ke suatu server Operasi client-
side dapat terjadi karena operasi tersebut:
-Membutuhkan akses pada informasi atau fungsi yang tersedia hanya di sisi klien
-Pemakai memerlukan observasi atau menyediakan input kepada operasi
-Server kekurangan kekuatan pemrosesan untuk melakukan operasi secara tepat
waktu
 Client-side scripting umumnya mengacu pada kelas program komputer pada
web yang dijalankan secara client-side oleh peramban pemakai. Jika operasi
dapat dilakukan klien tanpa mengirim data melalui jaringan, ia memakan waktu
dan bandwidth yang lebih sedikit, juga mengurangi risiko keamanan. Pembuat
web (web author) membuat client-side script dalam bahasa, seperti, JavaScript
atau VBScript. Script seperti ini sering disisipkan dalam dokumen HTML, tapi
juga mungkin dikemas dalam file terpisah, yang dirujuk dari dokumen yang
memakainya.
 Client-side scripting tidak memerlukan software tambahan pada server, tapi
dukungan pada peramban pengguna diwajibkan agar mereka bisa berjalan.

2.1.10 Server-Side
Dalam jaringan komputer, istilah ini merujuk pada apa yang terjadi di sisi
server dalam hubungan klien-server. Secara umum, serverdi sini merujuk pada
aplikasi komputer. Misalnya web server, yang berjalan pada suatu remote server
yang dapat dijangkau pemakai lokal atau workstation. Operasi server-side dapat
terjadi karena operasi tersebut:
-Membutuhkan akses pada informasi atau fungsi yang tidak tersedia di sisi klien
memerlukan perilaku yang tidak bisa diamanahkan pada sisi klien
-Server-side scripting adalah suatu kelas script di mana permintaan pemakai
dipenuhi dengan menjalankan suatu script pada web server untuk menghasilkan
halaman HTML dinamis.
Hal ini biasanya dilakukan untuk menyediakan website yang interaktif.
Operasi server-side juga mencakup pemrosesan dan penyimpanan data dari klien
ke server, yang bisa dilihat grup/klien.
Hal ini berbeda dengan client-side scripting, di mana script dijalankan
oleh sisi klien, biasanya dalam JavaScript.

2.2 Pertemuan 3
2.2.1 Jenis dan Kegunaan Tag HTML
Tag adalah sesuatu yang digunakan untuk menandai elemen-elemen
dalam suatu dokumen HTML. Tag dalam HTML terdiri dari :
tanda lebih kecil ( < ), tanda lebih besar ( > ), dan garis miring ( / ).
Biasanya tag dituliskan secara berpasangan, misanya <h1> dan </h1>.
Tag yang tidak menggunakan garis miring ( / ) adalah tag pembuka atau awal
elemen. Tag yang mengandung garis miring ( / ) adalah penutup elemen atau
akhir elemen. Tag dalam HTML secara struktural dapat dibedakan menjadi dua
yaitu:
2.2.1.1 Containers
adalah jenis tag HTML yang cara penulisannya dengan cara
berpasangan, atau mempunyai tag pembuka dan penutup tag. Cara
penulisannya adalah <tag>…..</tag>. Contoh :
<body> … </body>
<b … </b>
<i> … </i>

2.2.1.2 Standalone Tag

Adalah tag yang bisa berdiri sendiri tanpa perlu mempunyai tag
penutup. Tag tersebut biasanya hanya berfungi menempatkan sebuah
elemen pada halaman website. contoh dari tag stand alone diantaranya :
<img> untuk menampilkan gambar
<br> untuk memberi jarak antar teks ( vertikal)
<hr> untuk membuat garis
Secara fungsional, tag dalam HTML dapat dibagi menjadi tag
dasar, tag pemformatan, dan sebagainya.

2.2.2 Form and Input Tag di HTML

2.2.2.1 Checkboxes
Text Field
<!DOCTYPE html>
<html>
<body>
<form action="">
Nama Depan: <input type="text" name="firstname"><br>
Nama Belakang: <input type="text" name="lastname">
</form>
<p><b>Note:</b> Panjang maksimum text field 20 karakter.</p>
</body>
</html> Output

2.2.2.2 Radio Button

Berbeda dengan Checkboxes di mana semua pilihan dapat dipilih, Radio Button
hanya memperbolehkan satu pilihan yang dipilih. Berikut adalah contohnya :
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="sex" value="Laki-laki">Laki-laki<br>
<input type="radio" name="sex" value="Perempuan">Perempuan
</form>
</body>
</html>

2.3 Pertemuan 4
2.3.1 Elemen HTML
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

2.3.2 Atribut HTML

Semua elemen HTML dapat memiliki atribut. Atribut memberikan informasi
tambahan tentang elemen . Atribut selalu ditentukan dalam tag awal dan biasanya
datang dalam pasangan nama / nilai
seperti: name = "value"

2.3.3 Link HTML

<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML linksditampilkan di dalam Tag. Link address secara spesifik
ditampilkan dengan href attribute:</p>
<a href="https://www.google.com">This is a link</a>
</body>
</html>

2.3.4 SRC Atribut

<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image
source is specified in the src attribute:</p>
<img src="receipt.jpg" width="500" height="600">
</body>
</html>
2.3.5 ALT Atribut
<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<p>alt attribute dapat menjelaskan isi dari gambar, jadi apabila
gambar tersebut tidak dapat ditampilkan, pengguna dapat mengerti
apa isi dari gambar tersebut:</p>
<img src="receipt.jpg" alt="langit" width="500" height="600">
</body>
</html>

2.3.6 HTML Heading

<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
2.3.7 Bigger Headings
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:60px;">Heading 1</h1>
<p>You can change the size of a heading with the style attribute, using the font-
size property.</p>
</body>
</html>

2.3.8 HTML Horizontal Rules

<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
</body>
</html>
2.3.9 HTML <head> Element
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
<p>The HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>
</body>
</html>

2.3.10 HTML Paragraf

<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

2.3.11 Tampilan HTML

<!DOCTYPE html>
<html>
<body>
<p> This paragraph contains a lot of lines in the source code, but the browser
ignores it. </p>
<p> This paragraph contains a lot of spaces in the source code, but the browser
ignores it. </p>
<p> The number of lines in a paragraph depends on the size of the browser
window. If you resize the browser window, the number of lines in this paragraph
will change. </p>
</body>
</html

2.3.12 HTML Line Breaks

<!DOCTYPE html>
<html>
<body>
<p>This is<br>a paragraph<br>with line breaks</p>
</body>
</html>

2.3.13 HTML Poem Problem

<!DOCTYPE html>
<html>
<body>
<p>In HTML, spaces and new lines are ignored:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
</body>
</html>

2.3.14 HTML <pre> Elemen

<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>

2.3.15 HTML Style

<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
2.3.16 HTML Background Color
<!DOCTYPE html>
<html>
<body style="background-color:lightgreen;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

2.3.17 HTML Text Color

<!DOCTYPE html>
<html>
<body>
<h1 style="color:red;">This is a heading</h1>
<p style="color:blue;">This is a paragraph.</p>
</body>
</html>

2.3.18 HTML Fonts

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>

2.3.19 HTML Text Size

<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>

2.3.20 HTML Text Alignment

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>

2.4 Pertemuan 5
2.4.1 HTML Formatting Elements
HTML juga mendefinisikan elemen khusus untuk mendefinisikan teks
dengan makna khusus.
HTML menggunakan unsur-unsur seperti <b>dan <i> untuk memformat output,
seperti bold atau italic teks.
Elemen format yang dirancang untuk menampilkan jenis khusus dari teks antara
lain:
 <b> - Teks tebal
 <strong> - teks Penting
 <i> - teks Miring
 <em> - teks Ditekankan
 <mark> - teks Ditandai
 <small> - teks Kecil
 <del> - teks Dihapus
 <ins> - teks Dimasukkan
 <sub> - teks Subscript
 <sup> - teks Superscript

2.5 Materi CSS

2.5.1 Aturan Penulisan Pada CSS
Syntaxis CSS dibagi dalam 3 bagian :
selector {property : value}
dimana :
selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah
Cara penulisan :
 FONT-FAMILY : sans-serif;
 FONT-SIZE : small;7/3/2019
Cara penulisan yang salah :
 FONT-FAMILY : “sans-serif”;
 FONT-SIZE : ‘small’;
Cara mendeklarasikan kelompok : (tanda koma serta &)
 H1, H2 {color : green};
 H3, H4 & H5 {color : red};
Cara menuliskan komentar :
 • Menggunakan tanda : /* ….. */
 • Menggunakan tanda : <!-- -- >
Bentuk ukuran yang digunakan pada CSS :

2.5.2 Selector Sebagai Pengontrol Desain

2.5.2.1 Selector Untuk Mengubah Body
<HTML>
<HEAD>
<TITLE> Selector </TITLE>
<style type="text/css">
body
{
FONT-FAMILY: Geneva, Arial;
FONT-SIZE: 20px;
color: red;
BACKGROUND-COLOR: green;
}
37/3/2019
</style>
</HEAD>
<BODY>
Halaman efect CSS
</BODY>
</HTML>
2.5.2.2 Jenis-Jenis Selector
2.5.2.2.1 Selector Bebas
2.5.2.2.2 Selector Dengan Class
2.5.2.2.3 Selector Dengan ID

2.5.2.3 Memformat Halaman Web

2.5.2.3.1 Memformat Dengan Margin
<HTML>
<HEAD>
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css">
BODY
{
margin-top : 1cm;
margin-right : 2cm;
margin-bottom : 1cm;
margin-left : 2cm;
}
</STYLE>
</HEAD>
<BODY>
Pengaturan Margin Halaman
(1cm,2cm,1cm,2cm)
</BODY>
</HTML>
2.5.2.3.2 Pemetaan Menggunakan Padding
Padding hampir sama dengan margin :
a. Margin hanya digunakan untuk membuat batasan batasan sisi halaman.
b. Padding dapat membuat batasan-batasan pada komponen web lain seperti
tabel, disamping pengaturan batas halaman.
<HTML>
<HEAD>
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css">
BODY {
padding-top : 10%;
padding-right : 20%;
padding-bottom : 40%;
padding-left: 20%;
}
</STYLE>
</HEAD>
<BODY> Text ini berada di tengah halaman , karna di lakukan pengaturan
halaman dengan menggunakan padding atas 10%, kanan 20%,bawah 40%,dan
kiri 20%. </BODY>
</HTML>

2.5.3 Membuat Background

2.5.3.1 Membuat Background Warna
<HTML>
<HEAD>
<TITLE>Menggunakan Background
Warna</TITLE>
<STYLE type="text/css">
BODY { background-color : yellow}
</STYLE>
</HEAD>
<BODY>
Halaman ini di buat Berwarna Kuning
</BODY>
</HTML>

2.5.3.2 Membuat Background Campuran

<HTML>
<HEAD>
<TITLE>Menggunakan Background Warna</TITLE>
<STYLE ="text/css">
body {background-color : #99CCFF}
h2 {background : green}
h3 {background-color : transparent}
p {background : rgb(240,248,255)}
</STYLE>
</HEAD>
<BODY>
<h2>Header 2,Background Hijao</h2>
<h3>Header 3 , Bakground Transparan</h3>
<p>Background pada paragraph</p>
</BODY>
</HTML>
2.5.3.3 Membuat Background Gambar

Contoh :
<HTML>
<HEAD>
<TITLE>Menggunakan Background
Gambar</TITLE>
<STYLE ="text/css">
BODY
{
background-image: url("drums.jpg"); background-repeat: repeat-x;
}
</STYLE>
</HEAD>
<BODY>
Background Berulang pada Sumbu X
</BODY>
</HTML>
2.6 Materi CSS Lanjutan
2.6.1 FORMAT TEXT PADA WEB

Properties Value Keterangan

Pengaturan warna
color green, dll
Pengaturan Spasi (jrk antar karakter)
letter-spacing Normal Ukuran standar HTML
Length Ukuran panjang
(cm,px)
Perataan Text
text-align left
right center
justify
text-decoration none Bentuk standar
underline Bergaris bwh
overline Bergaris atas Text dicoret
line-through Text berkedip
blink
Pengaturan text indentasi
text-indent length Dengn cm, px
% Dengan persentase
Pengubahan Bentuk Karakter
text-transform capitalize
uppercase
lowercase none

Contoh 1 :

<HTML>

<HEAD>

<TITLE>Format Text </TITLE>

<STYLE ="text/css">

p {color : green; letter-spacing: 0.5cm} h4 {letter-spacing: -2px}

</STYLE>

</HEAD>

<BODY>

<p>Pengaturan Spasi Pada Paragraf</p>

<h4> Header 4</h4>

</BODY>

</HTML>

2.6.2 PENGATURAN FONT

Propertie Value Keterangan

s
Jenis Font
font-family arial, dll
Ukuran Huruf
Small
Medium Kecil
Font-size Large Menengah
Length Besar
% Besar font (pt,px) Persentase
Pengaturan gaya pada font
normal
ital
ic
font-style obl
iqu
e
Ketebalan huruf
normal
font-weight bold
100 ~ 900

Contoh 1 :

<HTML>

<HEAD>

<TITLE>Pengaturan Font</TITLE>

<STYLE ="text/css">

p.italic

{font-size :200 % ; font-style: italic;}

p.normal{font-family : verdana ; font-style: normal;}

p.oblique {font-style: oblique}

</STYLE>
</HEAD>

<BODY>

<P class="italic">Menggunakan Style Italic </P>

<P class="normal">Menggunakan Style Normal </P>

<P class="oblique">Menggunakan Style Oblieque </P>

</BODY>

</HTML>

2.6.3 FORMAT TEXT PADA WEB

Yang perlu diperhatikan adalah pengaturan border, padding dan

margin suatu tabel.

Pengaturan padding

<HTML>

<HEAD>

<TITLE>Pengaturan Padding Table</TITLE>

<style type="text/css">

td.kiri{padding-top: 2cm; padding-right: 2cm; padding-bottom: 2cm;

padding-left: 2cm; background-color : #F0F8FF;}

</style>

</HEAD>

<BODY>

<TABLE BORDER="1">

<TR>

<TD class="kiri">Pading dengan jarak 2cm dari kiri,atas,kanan,dan

bawah</TD>

<TD>Tanpa jarak </TD>

</TR>
</TABLE>

</BODY>

</HTML>

Menggunakan file css untuk mempercantik pembuatan tabel.

File table_specbody.css

/* CSS Document */ TH {color : #FFFFFF; background-color : #336699;

border-width: 1px ; border-style:solid; border-color :red ; font-size: 9pt;

} TD {color : red; background-color : #E6E6FA; border-width: 1px ;

border-style:solid; border-color :blue ; font- size: 9pt;}

File html yang akan memanggil file css

<HTML>

<HEAD>

<TITLE>Pengaturan Table spec</TITLE>

<LINK REL="STYLESHEET" TYPE="text/css"

HREF="table_specbody.css">

</HEAD>

<BODY>

<table width="468" border="0" cellpadding="5" cellspacing="0" >

<tr>

<th width="112" >Nama Computer</th>

<th width="91">Prossesor</th>

<th width="96">Ram</th>

<th width="137" >System Operasi</th>

</tr>

<tr>

<td>Clnt-1</td>

<td >IP 4 1,8 Ghz</td>

<td >10 GB</td>

<td >Redhat Linux</td>

</tr>

<tr>

<td >Clnt-2</td>

<td >IP 2 Ghz C</td>

<td >6 GB</td>

<td >Mandrake Linux</td>

</tr>

<tr>

<td >Clnt-2</td>

<td >XP 2000+ </td>

<td >20 GB</td>

<td>Windows</td>

</tr>

</table>

</BODY>

</HTML>

2.6.3 Pengaturan Hyperlink dan tombol yang menarik

Syntax penulisan pada CSS :

a:link {property : value}

 Selector Keterangan

a:link Keadaan awal pemicu link aktif

a:visited Keadaan pemicu link setelah

dikunjungi
a:active Keadaan pemicu yang sedang aktif

a:hover Kejadian pada pemicu link saat mouse

digerakkan diatasnya

1. Penggunaan property selector

<HTML>

<HEAD>

<TITLE>Pengaturan pada link</TITLE>

<STYLE type="text/css">

/*Konversi pengaturan Link pada contoh sebelumya menggunakan css */

A:link {color : green;} A:hover { color : pink;}

</STYLE>

</HEAD>

<BODY>

<a href="http://lecturer.eepis-its.edu/~zenhadi" target="_self">Contoh

Hyperlink menggunakan CSS</a>

</BODY>

</HTML>

2. Pembuatan tombol dengan tabel

<HTML>

<HEAD>

<TITLE>Pengaturan Pada Link background</TITLE>

<STYLE ="text/css">
A:link {text-decoration: none} A:visited {text-decoration: none} A:active
{text-decoration: none} A:hover {font-weight:none; color: red; background-
color:blue;}

</STYLE>

</HEAD>

<BODY>

<TABLE border="1">

<TR>

<TD width="144">

<a href="#">Arahkan Mouse ke sini</a>

</TD>

</TR>

<TR>

<TD width="144">

<a href="#">Arahkan Mouse ke sini</a>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

3. Membuat tombol visual 3D

a. Pembuatan file css

/* CSS Document */

.leftlinks {border:1px solid #22476C; padding:5px; margin:5px; text-

align:middle; background-color:#336699; width:150px;}
.leftlinks a { display:block; margin:3px 0px; border-top:1px solid #4C86C0;
border-left:1px solid #4C86C0; border-right:1px solid #22476C; border-
bottom:1px solid #22476C; padding: 4px 10px; text-align:center;
background-color:#336699;color:#EDEDED; text-decoration:none;}

.leftlinks a:link {color:#EDEDED;}

.leftlinks a:visited {color:#EDEDED;}

.leftlinks a:hover {display:block; margin:3px 0px;border-top:1px solid

#22476C; border-left:1px solid #22476C; border-bottom:1px solid
#4C86C0; border-right:1px solid #4C86C0; padding: 5px 9px 3px 11px;
text-align:center; background-color:#336699; color:#EED929; text-
decoration:none; }

b. Pembuatan file HTML utk memanggil css

<HTML>

<HEAD>

<TITLE>Pengaturan Pada Link Visualisasi tombol</TITLE>

<LINK REL="STYLESHEET" TYPE="text/css"

HREF="link_frtombol.css">

</HEAD>

<BODY>

<div class="leftlinks">

<a href="index.htm">Teras Wamika</a>

<a href="profil.htm">Pssrofil Organisasi</a>

<a href="struktur.htm">Struktur</a>

<a href="pembimbing.htm">Pembimbing Org</a>

<a href="dpo.htm">DPO Organisasi</a>

<a href="kegiatan.htm">Kegiatan Rutin</a>

<a href="berita.htm">Berita UKM</a>

</div>
</BODY>

</HTML>

* Fungsi tag <div> : hampir sama dengan tag paragraf <p>, berguna
untuk mengelompokkan sejumlah baris teks yang memiliki karakteristik
yang sama.
2.7 Latihan CSS
Latihan nomor:
1. Ganti semua elemen p menjadi biru!
Input:

Output:
2. Ubahlah warna element dengan id=”para1”, menjadi “lightgreen”!
Input:

Output:
3. Ubahlah warna pada semua elemen dengan class "colortext", to "blue"!
Input:

Output:
4. Ubahlah semua warna pada elements p dan h1 menjadi “blue”.
Kelompokkan (group) semua selector agar dapat meminimalisir
penggunaan code!
Input:

Output:
5. Tambahkan external style sheet with the URL: "styleku.css"!
Input:

Output:
6. Dengan menggunakan internal style sheet, gunakanlah "background-
color: linen" untuk mengubah warna background pada halaman HTML!
Input:

Output:
7. Dengan menggunakan inline style, aturlah "background-color: linen"
pada halaman HTML berikut!
Input:

Output:
8. Atur background color untuk halaman HTML menjadi "linen" dan
background color untuk h1 menjadi "lightblue"!
Input:

Output:
9. Aturlah border "4px", "dotted" pada elemen p!
Input:

Output:
10. Aturlah border color untuk menjadi "red"
Input:

Output:
11. Ubahlah 3 border properties, agar border yang ditampilkan hanya pada
bagian atasnya saja.
Input:

Output:
12. Aturlah left margin dari menjadi "25px".
Input:

Output:
13. Gunakanlah margin property untuk mengatur top dan bottom margins
untuk h1 menjadi 40 pixel, aturlah left dan right margins menjadi 20 pixel.
Input:

Output:
14. Aturlah top padding dari p menjadi "25px".
Input:

Output:
15. Aturlah semua paddings dari p menjadi "50px".
Input:

Output:
16. Aturlah height dari menjadi "100px".
Input:

Output:
17. Aturlah width dari menjadi "50%".
Input:

Output:
 BAB III
PENUTUP

3.1 Kesimpulan

3.2 Saran
 DAFTAR PUSTAKA

-Materi-materi yang di bagikan bapak Try Adrianto Darsono, S.kom., M.Cs