pertemuan 07

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=2 FONT SIZE=3 FONT SIZE=4 FONT SIZE=5 FONT SIZE=6 FONT SIZE=7</BODY>

By I Wayan Simpen

Hasil

By I Wayan Simpen

Menggunakan Font Color

<HTML><BODY BGCOLOR="SILVER">FONT SIZE=1 FONT SIZE=2 FONT SIZE=3 FONT SIZE=4 FONT SIZE=5 FONT SIZE=6 FONT SIZE=7</BODY></HTML>

By I Wayan Simpen

Hasil

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

Hasil

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 dalamseluruh jaringan Internet di seluruh dunia dapat mengaksesnya</body>

By I Wayan Simpen

Hasil

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 {property:Value}

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}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

_selfTarget frame adalah frame tempat link berada

_topTarget frame adalah window tempat frame berada (frame yang lain akan hilang)

_parentTarget frame adalah setingkat di atas link berada

_blank Membuka pada window baru

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

Hasil

By I Wayan Simpen

Contoh Lengkap

pertemuan 07

Documents