HTML 2 dan CSS. Setelah mengikuti praktikum ini mahasiswa diharapkan dapat :

Ukuran: px

Mulai penontonan dengan halaman:

Download "HTML 2 dan CSS. Setelah mengikuti praktikum ini mahasiswa diharapkan dapat :"

Dewi Tedjo
6 tahun lalu
Tontonan:

1 HTML 2 dan CSS 1. Tujuan Setelah mengikuti praktikum ini mahasiswa diharapkan dapat : 1. Mahasiswa mengerti bagaimana cara mengimplementasikan HTML dan CSS 2. Table Banyak orang suka menampilkan informasinya dalam bentuk table, hal ini disebabkan karena bentuknya yang ringkas dan mudah di baca. Tabel terdiri dari beberapa bagian : Table Row atau baris tabel : <tr> </tr> Table Data atau baris tabel : <td> </td> Beberapa table data yang terdapat dalam suatu baris membentuk Table Row. Table Header atau judul tabel : <th> </th> Adalah judul tabel yang biasanya terletak di bagian paling atas atau paling kiri dari suatu tabel. Table Header yang terletak pada bagian atas adalah judul kolom tabel, sedangkan yang terletak di bagian kiri adalah judul baris tabel. Selain elemen-elemen itu, terdapat atribut-atribut : Border untuk membuat batas tepi dari suatu tabel. Width untuk mengatur lebar tabel. Align untuk mengatur bentuk perataan horisontal data di dalam tabel (left,center,right) Valign untuk mengatur bentuk perataan vertikal data di dalam tabel (top,middle,bottom) Cellspacing dan Cellpadding untuk mengatur spasi antarsel dan spasi dalam sel. Rowspan dan Colspan yaitu gabungan sel-sel dalam suatu kolom atau baris. Color untuk mengatur warna suatu sel dalam tabel. Praktikum Rekayasa Aplikasi Internet Hal 1 dari 10

2 Contoh 15 : <table border=1 cellspacing=0 cellpadding=0> <tr> <td colspan=2></td> <th colspan=3>topik</th> </tr> <tr> <td colspan=2></td> <th>html</th> <th>asp</th> <th>php</th> </tr> <tr> <th rowspan=3>waktu</th> <th>pagi</th> <td>penuh</td> <td>kosong</td> <td>kosong</td> </tr> <tr> <th>siang</th> <td>penuh</td> <td>penuh</td> <td>kosong</td> </tr> <tr> <th>malam</th> <td>kosong</td> <td>penuh</td> <td>penuh</td> </tr> </table> Praktikum Rekayasa Aplikasi Internet Hal 2 dari 10

3 FRAME Dengan frame, jendela browser dibagi-bagi menjadi beberapa bagian dimana bermacam-macam informasi dapat ditampilkan pada satu saat. Setiap link dalam suatu frame, tidak hanya dapat memperbaharui isi dari frame itu sendiri, tetapi juga dapat memperbaharui isi dari frame-frame lain. Dengan kemampuannya ini, frame dapat digunakan untuk berbagai macam keperluan, seperti untuk : Membuat suatu daftar isi pada satu frame, sedang sisi frame yang lain menampilkan isinya. Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isi dokumen Membuat suatu dokumenn tanya-jawab, dimana satu sisi frame berisi pertanyaan, sedangkan sisi frame yang lain berisi jawabannya. Dan lain-lain Contoh 16 : Praktikum Rekayasa Aplikasi Internet Hal 3 dari 10

4 Doc1.html <frameset rows="15%,*"> <frame src="top.html"> <frameset cols="20%,*"> <frame src="left.html"> <frame name="content" src=""> </frameset> </frameset> top.html <H3> Pemrograman Aplikasi Internet<br> Jurusan Teknik Informatika<br> STT Telkom </H3> left.html <base target="content"> <pre> Menu : 1. <a href="menu1.html">menu 1</a> 2. <a href="menu2.html">menu 2</a> 3. <a href="menu3.html">menu 3</a> </pre> Menu1.html <H3> Praktikum Rekayasa Aplikasi Internet Hal 4 dari 10

5 Halaman ini adalah Halaman MENU1 </H3> Praktikum Rekayasa Aplikasi Internet Hal 5 dari 10

6 3. CSS CSS adalah struktur yang terpisah dari tampilan pada halaman web. 1. Dalam pemakaian HTML murni kita pasti menggunakan tag <font> dan tag lain untuk mengontrol bagaimana format dan layout dari halaman anda. 2. Hal ini mengikat presentasi halaman anda dengan isinya, dan terasa menyulitkan dalam perancangan dan pengembangannya. 3. Jika anda memiliki sekian halaman yang memiliki format yang seragam, dan kemudian ingin merubah format dasarnya, tentu yang anda lakukan adalah mengubah tiap halaman tersebut. 4. Style Sheet menyediakan pemecahan terhadap masalah ini. 5. Dengan Style Sheet dapat mengontrol seluruh layout dari site anda, dan jika anda mengubah tampilan dari web site anda cukup dengan memodifikasi style sheet. Tiga cara menggunakan CSS 1. Inline Styles Menambahkan attribute style kedalam tag XHTML-nya Berlaku hanya pada tag dimana style ditambahkan Contoh1.html <html> <body> <p style="font-size: 25pt; font-weight:bold; fontstyle:italic; color:red;"> By adding inline CSS styling to this paragraph, we can override the default styles. </p> </body> </html> 2. Embedded Styles Diletakan pada tag <head> Berlaku hanya untuk halaman dimana style didefinisikan Praktikum Rekayasa Aplikasi Internet Hal 6 dari 10

7 Contoh2.html <HTML> <head> <title>inline Styles example</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <style type="text/css"> h1 { font-size: 16pt; font-weight:bold; color:red;} p{color:blue; font-size:8pt;} </style> </head> <BODY> <h1>coba Embedded Style</h1> <p>paragraph yang menggunakan style embedded css</p> <p>paragraph yang menggunakan style embedded css</p> </BODY> </HTML> Linked styles / External Styles Diletakan diluar dokumen XHTML nya Menggunakan property <link> untuk menghubungkan halaman XHTML dengan file.css nya my_style_sheet.css h1 { font-size: 16pt; font-weight:bold;} p {color:blue;} contoh3.html <html> <head> <link href="my_style_sheet.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>hello World!</h1> <p>hello Juga</p> </body> </body> </html> Praktikum Rekayasa Aplikasi Internet Hal 7 dari 10

8 Latihan : 1. Ubahlah pada contoh2.html, menjadi : <HTML> <head> <title>inline Styles example</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <style type="text/css"> h1 { font-size: 16pt; font-weight:bold; color:red;} p{color:red; font-size:8pt;} </style> </head> <BODY> <h1>coba Embedded Style</h1> <p>paragraph yang menggunakan style embedded css</p> <h2> Coba h2 </h2> <p>paragraph yang menggunakan style embedded css</p> </BODY> </HTML> 2. Style apa yang diikuti oleh <h2>? Mengapa? 3. Buatlah style pada <h2>, dengan ukuran font : 14 pt, dan berwarna hijau. 4. Buatlah file berikut : link.css h1 { font-size: 20pt; font-weight:bold;} p {color:blue;} lat.html <HTML> <head> <link href="link.css" rel="stylesheet" type="text/css" /> <style type="text/css"> h1 { font-size: 5pt; font-weight:bold; color:red;} p{color:blue; font-size:8pt;} </style> </head> <body> <h1 style="font-size:50pt">hello World!</h1> <p style="font-size: 25pt; font-weight:bold; fontstyle:italic; color:red;">hello Juga</p> </body> </body> </HTML> Praktikum Rekayasa Aplikasi Internet Hal 8 dari 10

9 1) Style apa yang diikuti oleh tag <h1>, berapa ukuran fontnya? 2) Apakah dari ketiga style di atas terdapat tingkat prioritas? Jika ada, sebutkan! 3) Jelaskan perbedaan ketiga style di atas! Praktikum Rekayasa Aplikasi Internet Hal 9 dari 10

10 LATIHAN SOAL 1. Buatlah halaman HTML dengan tampilan sebagai berikut : 2. Buatlah halaman HTML dengan tampilan sebagai berikut : Gunakan table! Praktikum Rekayasa Aplikasi Internet Hal 10 dari 10

dokumen-dokumen yang mirip

Desain Web. Oleh : Ady Purna Kurniawan, ST., MT.

Desain Web. Oleh : Ady Purna Kurniawan, ST., MT. Desain Web HTML Layout Oleh : Ady Purna Kurniawan, ST., MT. Materi HTML Layout 1. Tabel 2. Frame TABLE Digunakan untuk membuat tabel (kolom dan baris) Diperbolehkan membuat tabel di dalam tabel (nested