Pemrograman Web
Team Dosen Unesa
2. HTML & CSS
Pengenalan HTML
2
HTML (hypertext markup language)
• Adalah bahasa pemrograman Web (client) yang dikhususkan
untuk pengolahan dokumen. HTML mendefinisikan sebuah
elemen yang terdiri dari teks, paragraf, operasi teks,
pengaturan huruf, tautan, media gambar, video, video flash
atau sebuah aplikasi (form).
• Dalam penulisan HTML diawali dengan sebuah tag.
• Dalam HTML setiap element memiliki definisi masing-masing.
Hirarki html
HTML
HEAD BODY
TITLE ELEMENT
META FORM
LINK/STYLE/
SCRIPT
• HTML = Untuk mengidentifikasi bahwa dokument yang digunakan
ditulis menggunakan HTML
• HEAD = Mendeskripsikan tentang informasi dari sebuah halaman web
• BODY = Berisi tentang isi dokumen yang akan ditampilkan di web
browser
CONTOH html
KONSEP ELEMENT HTML
Sumber : Learning Web Design Third Edition, O’Reilly Media
ELEMENT (MARKUP TEXT-BUILDING BLOCKS)
Type Element
Headings h1,h2,h3,h4,h5,h6
Paragraph p
Block (long) quotes blockquote
Preformatted text pre
Horizontal rules (line) hr
Unordered list ul
Ordered list ol
List item li
Definition list dl
Term dt
Definition dd
LIST ELEMENT
• Di dalam sebuah paragraf biasa terdapat list (daftar) urutan.
• Ada 3 tipe dalam list
1. Unordered Lists ( <ul><li>)= Koleksi dari item-item yang
tidak beraturan (tidak bernomor).
2. Ordered Lists ( <ol><li>)= Koleksi dari item-item yang
berurutan sesuai dengan nomor urutnya.
3. Definition Lists ( <dl><dt><dd> )= Daftar item-item yang
berisi penjelasan dari item.
ELEMENT (Presentational inline text)
Element Description
B Menebalkan huruf
Big Membuat teks berukuran lebih besar dari teks asalnya
center Membuat teks rata tengah
font Memberikan spesifikasi pada sebuah text
i Membuat teks miring
s Memberikan garis tengah pada sebuah teks
small Membuat teks berukuran lebih kecil dari teks aslinya
strike Memberikan garis tengah pada sebuah teks
sub Membuat teks lebih kecil dan berada di bawah teks normal
sup Membuat teks lebih kecil dan berada di atas teks normal
u Membuat teks bergaris bawah
tt Memberikan tipe pada teks (berupa tipe font)
Generic Elements (div, CLASS dan span)
• Element div, class, dan span digunakan untuk menata sebuah
halaman (tampilan) baik bentuk dokumen, list, objek (form).
• Penggunaan div, class, dan span biasanya terkair dengan
penggunaan CSS (Cascading Style Sheet).
Elements ( LINK/tautan )
• Jika kita membuat halaman sebuah web pasti tidak lepas dari
tautan dengan halaman di dalam web itu sendiri atau tautan
dengan URI halaman web yang lain, atau tautan ke email.
• Di dalam html element link (tautan) itu dituliskan dengan
<a>.....</a>
• Contoh :
LINK/tautan di dalam folder
• <a href=“contoh/[Link]”> klik </a>
Web
[Link] contoh
[Link]
LINK/tautan satu folder ke bawah
• <a href=“contoh/sample/[Link]”> klik </a>
Web
[Link] contoh
[Link] sample
[Link]
LINK/tautan satu folder ke atas
• <a href=“../[Link]”> klik </a> tautan dari [Link] untuk
mengakses [Link]
<a href=“../../[Link]”> klik </a> tautan dari [Link] untuk
mengakses [Link]
Web
[Link] contoh
[Link] sample
[Link]
LINK/tautan satu halaman pada identifikasi tertentu
• Contoh : <a href=“#textH”> H </a>
• Pada contoh di atas digunakan untuk mengakses id=textH pada
satu halaman.
• Implementasinya :
• <h1 id=“textH”>Poin H</h1>
• <dl>Bagian H</dl>
• <dt>Konsep H</dt>
• <dd>bla..bla...bla...bla</dd>
ELEMENT (IMG / tautan gambar)
• Contoh : <img src=“[Link]”>
Element dan Attribut Deskripsi
Img Memasukkan gambar
src=“url” Lokasi dari gambar
width=“angka” Memodifikasi lebar gambar
height=“angka” Memodifikasi tinggi gambar
title=“text” Memberikan judul gambar
ELEMENT (TABLE / TABEL)
• Contoh :
• <table>
• <tr>
• <td></td>
• </tr>
• </table>
ELEMENT (TABLE / TABEL)
Element dan Attribut Deskripsi
table Membuat tabel
cellpadding=“num” Memberikan jarak pada sel
cellspacing=“num” Memberikan jarak antar sel
tr Membuat baris baru
th Membuat header pada sebuah tabel (opsional)
colspan=“num” Jumlah kolom di dalam sel
rowspan=“num” Jumlah baris di dalam sel
td Membuat cel (kolom)
colspan=“num” Jumlah kolom di dalam sel
rowspan=“num” Jumlah baris di dalam sel
ELEMENT FORM
• Element Form seringkali digunakan bersamaan dengan Bahasa
pemrograman server misalnya dengan PHP.
• Form biasanya digunakan untuk pengolahan sebuah data.
• Bentuk Element Form:
• <form action=“[Link]” method=“post”>
• <element>.......</element>
• </form>
ELEMENT (FORM)
Element dan Attribut Deskripsi
Form Membuat Form
action=“#” Tingkah laku (pekerjaan) dari sebuah form
method=“post/get” Metode yang digunakan untuk pengambilan dalam
di dalam form
name=“#” Untuk mengidentifikasi form
enctype=“” Tipe dari sebuah form
Text Element dari sebuah text field
Textarea Element dari sebuah text area
Select Element dropdown list
Button Element dari sebuah tombol
Submit Element sebuah tombol aksi
Radio Element dari sebuah pilihan
Check Emelent sebuah penanda
name=“” Nama dari sebuah elemen
id=“” Identifikasi dari sebuah elemen
Pengenalan CSS
21
CSS (Cascading style sheet)
• Adalah bahasa pemrograman yang digunakan untuk
membantu menata tata letak sebuah halaman web.
• Terkadang element yang terpasang di html hanya mempunyai
satu propertis saja, maka dengan bantuan CSS setiap element
di dalam html bisa dimodifikasi.
• Oleh karena itu setiap element yang dibuat dengan CSS bisa
mempunyai sifat inheritance (turunan).
• Pendeklarasian sebuah CSS berada pada hirarki head pada
hirarki HTML.
• Setiap element di dalam CSS mempunyai atribut masing-
masing, misal font-size:10px;.
PENULISAN ELEMENT css
• Penulisan element CSS dalam HTML ada 3 kelompok :
1. CSS Tag HTML
2. CSS Element id
3. CSS Element class
PENULISAN css
• Penulisan CSS adalah berada pada hirarki head pada hirari
HTML.
• CSS bisa langsung dituliskan di dalam head dengan
memberikan MIME Type (text/css)
Contoh :
<style type=“text/css”>
...Content....
</style
• CSS juga bisa dibuat diluar file HTML, dengan (external link).
Contoh :
<link rel=“stylesheet” type=“text/css” href=“[Link]”>
FORMAT PENULISAN ELEMENT dan atribut css
body{
background:#FFFFF;
}
#wrapper{
margin : 0 auto;
}
Dalam setiap penulisan Element diikuti dengan tanda kurung
kurawal.
Dalam penulisan setiap atribut, cara penulisannya adalah
nama atribut diikuti oleh tanda titik dua ( : ) kemudian
properti atributnya dan diakhiri dengan semikolon ( ; )
Penulisan css tag html
• Dalam penulisan CSS tag HTML, adalah cukup dengan
memberikan element pada setiap element HTML yang akan
diberi atribut pada CSS.
Contoh :
body{
background-color:#CCCCCC;
font-family : arial;
color:#000000;
font-size:12px;
}
Penulisan css ELEMENT ID
• Dalam penulisan CSS element div, adalah dengan
menambahkan karakter # (cross) pada setiap pembuatan
element.
• Pada pemanggilan di HTML dengan menggunakan id, <div
id=“header”>content</div>
Contoh :
#header{
height:300px;
background-color:#CCCCCC;
font-family : arial;
color:#000000;
font-size:12px;
}
Penulisan css ELEMENT class
• Dalam penulisan CSS element div, adalah dengan
menambahkan karakter . (titik) pada setiap pembuatan
element.
• Pada pemanggilan di HTML dengan menggunakan id, <div
class=“header”>content</div>
Contoh :
header{
height:300px;
background-color:#CCCCCC;
font-family : arial;
color:#000000;
font-size:12px;
• }
Atribut padding dan margin
• Padding adalah properti yang digunakan untuk membuat jarak
antar objek
Contoh :
padding : 1px 2px 3px 4px;
* 1px (top), 2px(right), 3px(button), 4px(left)
padding : 2px 2px 2px 2px: ( padding : 2px; )
• Margin adalah properti yang digunakan untuk membuat jarak
(margin) objek dari layar
Contoh :
margin : 1px 2px 3px 4px;
* 1px (top), 2px(right), 3px(button), 4px(left)
margin : 2px 2px 2px 2px;
margin : 0 auto; (membuat objek di tengah)
• kajskas
Sumber:
1. Internet & World Wide Web How To Program Fourth Edition, P.J. Deitel, H.M .Deitel,
Prentice Hall.
2. Pro CSS for High Traffic Website, Antony Kennedy and Inayaili deLeon, Appress
3. [Link]
4. [Link]
TERIMA
KASIH