Pertemuan_07_html.ppt by I Wayan Simpen 2

PEMROGRAMAN WEB I
Oleh:
I Wayan Simpen

By I Wayan Simpen
Agenda
• Font & CSS
• Frame

By I Wayan Simpen
Font
• Atribut Tag Font
Atribut Kegunaan
Size=“n” Menentukan ukuran font
sebesar n (n=1..7)
Size=“+n” Menaikkan ukuran font
sebesar n
Size=“-n” Menurunkan ukuran forn
sebesar n
Face=“Nama_Font” Menentukan jenis fornt
Color=“Warna” Menentukan warna font

By I Wayan Simpen
Contoh:
• Penggunaan 
<BODY>
FONT SIZE=1 
FONT SIZE=7
</BODY>

By I Wayan Simpen
Menggunakan Font Color
<HTML>
<BODY BGCOLOR="SILVER">
FONT SIZE=2 
FONT SIZE=3 
FONT SIZE=4 
FONT SIZE=5 
FONT SIZE=6 
FONT SIZE=7
</BODY>
</HTML>

By I Wayan Simpen
Menggunakan 
<BODY BGCOLOR="SILVER">

Font Arial
Balck 
Font Tahoma 
Font Comic Sans
MS 
Font Time New
Roman 
Font Arenski
</BODY>

By I Wayan Simpen
Contoh Lain
<body bgcolor="silver">

Apakah dokumen HTML itu ?

Adalah file teks reguler (file ASCII) yang
diciptakan dengan menggunakan editor teks
(misalnya, Notepad dalam Windows, Emacs atau
vi dalam Unix/Linux) atau dengan menggunakan
word processor, yaitu bila menyimpannya dalam
format "text only with line breaks"

By I Wayan Simpen

Adalah dokumen yang tampil dalam Web,
dimana semua orang dalam
seluruh jaringan Internet di seluruh dunia dapat
mengaksesnya
</body>

By I Wayan Simpen
CSS
• CSS (Cascade Style Sheet) merupakan
fitur baru dari HTML hal ini diperlukan agar
manajemen pages menjadi lebih mudah
dan efesien.
• Aturan Penggunaan CSS
Selector {property1:Value1;
property2:Value2}

By I Wayan Simpen
Jenis CSS
CSS
CSS Internal
CSS External
CSS in Line

By I Wayan Simpen
CSS Internal
<HTML>
<HEAD>
<style>
body {background-color:silver}
h1 {color : red}
h2 {color : blue}
p {font-size:10pt; margin-left: 15px; text-
align:Justify; font-family:tahoma}
A:Link {color:Blue}
A:Visibled {color:red}
A:Ative {Color:green}
A:Hover {color:maroon; font-weight:bold}
</style>
</HEAD>
<BODY>……..</BODY><HTML>

By I Wayan Simpen
CSS External
body {background-color:silver}
h1 {color : red}
h2 {color : blue}
p {font-size:10pt; margin-left: 15px; text-
Align:Justify}
A:Link {color:Blue}
A:Visibled {color:red}
A:Ative {Color:green}
A:Hover {color:maroon; font-weight:bold}
Buat Dokumen dengan nama
Format.CSS yang isinya sebagai berikut:

By I Wayan Simpen
Cara Memangil CSS
• Tempatkan perintah berikut pada antara
tag <HEAD> dan </EHAD>
<HEAD>
<Link rel="stylesheet" type="text/css"
href="format.css">
</HEAD>

By I Wayan Simpen
Contoh Lain:

By I Wayan Simpen
FRAME
• Untuk membangun web page yang
memungkinkan menampilkan beberapa
web page dalam satu window browser.
• Untuk memperjelas penyajian informasi
dan biasanya disediakan menu pilihan.

By I Wayan Simpen
Bentuk umum Frame
<FRAMESET BORDER=# ([rows|cols}=(#, [#
[,..]])>
<FRAME SRC=“url” NAME=“namaFrame”>
</FRAMESET>

By I Wayan Simpen
Target Frame
Nama Frame Kegunaan
_self
Target frame adalah frame tempat
link berada
_top
Target frame adalah window
tempat frame berada (frame yang
lain akan hilang)
_parent
Target frame adalah setingkat di
atas link berada
_blank Membuka pada window baru
Frame name
Targetnya pada Frame yang
disebutkan

By I Wayan Simpen
Contoh:
• Buat 3 dokumen html dengan nama masing-
masing: Atas.htm, Kiri.htm, dan Kanan.htm
• Buat frame seperti berikut:
<HTML>
<HEAD><TITLE>Frame</TITLE></HEAD>
<FRAMESET FRAMESPACING="1" ROWS="92,*">
<FRAME NAME="judul" SCROLLING="no"
NORESIZE src="Atas.htm">
<FRAMESET COLS="180,*">
<FRAME NAME="menu" SRC="Kiri.htm"
SCROLLING="no">
<FRAME NAME="main" SRC="Kanan.htm">
</FRAMESET>
</FRAMESET>
</HTML>

By I Wayan Simpen
Contoh Lengkap

Pertemuan_07_html.ppt by I Wayan Simpen 2

More Related Content

Similar to Pertemuan_07_html.ppt by I Wayan Simpen 2

Pertemuan_07_html.ppt by I Wayan Simpen 2