PEMROGRAMAN WEB: April 2013

Pertemuan VI

Materi :

1. Inline css

2. Internal css

3. Exterlan css

PERBEDAAN ANTARA INLINE CSS DENGAN KODE HTML

KODE CSS	KODE HTML
<Html> <Head> <Title></Title> </Head> <Body Style=”background-color:yellow”> </Body> </Html>	<Html> <Head> <Title></Title> </Head> <Body bgcolor=yellow> </Body> </Html>

Kode-kode css beserta fungsi-fungsinya :

1. <h1 Style =”font-size :200pt;”> Belajar Pemrograman Web </h1>

Fungsinya adalah untuk membuat ukuran paragrafnya 200 pt.

2. Background-color :black;

Fungsinya adalah untuk membuat latar belakang tulisan warna hitam.

3. Text-align : justify ;

Fungsinya adalah membuat paragraf rata kiri dan rata kanan.

4. Text-indent : 50n px ;

Fungsinya adalah untuk membuat awal teks paragraf 50 px.

5. Color : yellow ;

Fungsinya adalah untuk membbuat warna tulisan warna kunning

6. Line-heigh : 50 px;

Fungsina adalah untuk mengatur spasi 50 px;

7. Border : 5 px solid blue;

Fungsinya adalah untuk membuaut kotak paragraf.

Contoh :

<Html>

<Head>

<Title></Title>

</Head>

<Body>

<h1 style =”font-size :30 pt;>selamat Datang</h1>

<p style = “font-size :12 pt;

Text-align : justify;

Text-indent : 50 px;

Border : 5 px solid blue;

Color : yellow;

Background-color : black;

Line-heigt : 50 px;”>

“Mengucap syukurlah dalam segala hal,

Sebab itulah yang di kehendaki Allah

Di dalam Yesus bagi kamu”. 2 tesalonika 5:18

</body>

</html>

Note :

<marquee direction =top>berfungsi untuk membuat tulisan berjalan ..

<marquee behavior =alternate>berfungsi membuat tulisan ke kiri dan ke kanan.

Internal css

<html>

<head>

<style>

{

Font-size :14px;

Text-align :justify;

Text-indent :30px;

Color :blue;

Background-color :00 00 00;

Margin :50 100 100 50;

}

</style>

</head>

<body>

<p>wellcome</p>

</body>

</html>

External css

External css adalah css yang di simpan terpisah dari kode html.

Kelebihan external css adalah :

1. Kode sumber external tidak perlu di edit secara berulang sehingga lebih memudahkan dalam manajemen kode css.

2. External css di letakkan di dalam tag <head> dengan kata kunci yaitu :

Contoh:

Css disimpan dengan namafile.css

Pertemuan IV

Materi :

1. Objek

2. Atribut objek

v Objek

Semua benda yang ada di dunia nyata dapat dianggap sebagai obyek , atau segala sesuatu yang dapat didiskripsikan/dicirikan.

Contoh :

1. Rumah

2. Sepeda motor

3. Mobil

4. Gelas

5. Kompter

6. Meja

7. Mahasiswa

v Atribut

Atribut dalam HTML adalah perintah yang disisipkan/ditempelkan pada tag utama yang tujuannya adalah mengatur bentuk dan gaya tampilan sebuah objek.

Contoh penggunaan atribut pada H1

<h1 align="center">Saya Belajar Tag HTML</h1>

Sebuah tag bisa menggunakan lebih dari satu atribut

Contoh :

<font size="3" face="arial" color="red">Merdeka atau Mati</font>

Tag <Table>

Banyak informasi yang akan ditampilkan adalah informasi olahan yang berbentuk tabel, sehingga kita memerlukan format table di dalam dokumen HTML. Format table dapat diwujudkan dengan menggunakan tag tabel <tabel>. Sedikit berbeda dengan tag lainnya, tag tabel ini memerlukan tag lainnya untuk menampilkan data dalam bentuk tabulasi. Berikut ini uraiannya :

Tag	Parent	Fungsi
<table> </table>	---	tag utama
<caption> </caption>	<table>	Menampilkan judul tabel
<tr></tr>	<table>	Tag baris
<th></th>	<tr>	Header table
<td></td>	<tr>	Tag sel-sel tabel

Berikut ini beberapa atribut tag tabel

Atribut	Fungsi
bgcolor	warna background
width, height	lebar dan tinggi tabel (dalam % atau pixel)
cellspacing	jarak antar cell
cellpadding	jarak teks ke cell
border	lebar garis batas, 0=tanpa garis batas

Berikut ini atribut tag-tag <th> dan <td>, bila disebutkan di tag <tr> maka atribut di tag <th> dan <td> diabaika

Atribut	Fungsi
bgcolor	warna background
width, height	lebar dan tinggi tabel (dalam % atau pixel)
align (left, right, center)	pengaturan posisi horisontal isi sel, rata kanan/kiri/tengah
valign (top, bottom, middle)	pengaturan posisi vertikal terhadap isi sel, di atas, bawah atau tengah
colspan=n	ekstensi (span) n kolom ke kanan
rospan=n	ekstensi (span) n baris ke bawah
nowrap	mematikan word wrapping

PEMROGRAMAN WEB

Sabtu, 27 April 2013

TEORI PERTEMUAN VI

TAG TABLE DAN OBJEK

Taylor Swift

Blog Archive

About Me

Hello