Perancangan dan Pemrograman Web Week 2 Html Table

Perancangan dan Pemrograman Web Week 2 - Html Table, Image, Order List dan Un. Order List

3 Objectives Setelah menyelesaikan bab ini, anda diharapkan dapat : 1. Mampu membuat table dalam html 2. Menampilkan Order list dan Un Order list pada halaman web 3. Mampu menampilkan multimedia dan picture dan video

Review 1. Jelaskan yang anda ketahui tentang : a. Html b. CSS c. Javascript 2. Apa yang dimaksud dengan : a. Tag b. Attribut c. Value 3. Tuliskan struktur html dalam bentuk diagram

5 Tag-tag HTML - continued • Bentuk umum penulisan tag html adalah: <ELEMENT ATTRIBUTE = value> Dimana: ▫ Element - nama tag ▫ Attribute - atribut dari tag ▫ Value - nilai dari atribut. • Contoh: <BODY BGCOLOR=lavender>

6 Susunan HTML <Head> <Title> Kepala <head> Judul Homepage </Title> </Head> Homepage <Body> Isi…Teks Isi…Tabel. Isi…Audio, Video, dll. Tubuh <body> </Body>

img : Display picture <!DOCTYPE html> <body> <img src="smiley. gif" alt="Smiley face" width="142" height="242"> </body> </html>

Video Tag video memungkinkan menampilkan video dalam halaman web Attribut video adalah • Width • Height • Source src=‘namavideo. mp 4’ type=‘video/mp 4’ <video width="320" height="240" controls> <source src="movie. mp 4" type="video/mp 4"> <source src="movie. ogg" type="video/ogg"> Your browser does not support the video tag. </video>

9 Pembuatan Tabel • Untuk membuat tabel : <tabble> Cell-nya dengan tag <td> <html> <head> <title>Using Table</title> </head> <body> <table border="1"> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </table> </body> </html>

10 Pembuatan Tabel – Cont. 1 • Untuk membuat baris cell : <tr> • Untuk title tabel : <caption> <body> <table border="1"> <caption>Creating Table</caption> <tr> <td>cell 1 a</td> <td>cell 1 b</td> </tr> <td>cell 2 a</td> <td>cell 2 b</td> </tr> </table> </body>

11 Pemformatan Tabel • Perataan tabel : 1. align (center, justify, left, right). 2. valign (baseline, top, middle, bottom) • Lebar tabel : width=“ 25%” • Warna cell : bgcolor=“red” • Spasi tabel : cellspacing untuk memberi spasi antar sel cellpadding untuk spasi dari border ke text dalam cell

12 Pemformatan Tabel – Cont. 1 • Contoh : <body> <table border=1 cellspacing=5 cellpading=10> <tr align="left" valign="top"> <td width="25%" bgcolor=red>cell 1 a</td> <td width="25%" bgcolor=yellow>cell 1 b</td> </tr> <tr align="center" valign="baseline"> <td>cell 2 a</td> <td>cell 2 b</td> </tr> </table> </body>

Latihan • Buatlah table berisikan nama dan link video, jika di click akan memanggil halaman html terkait video tersebut.

Terima Kasih