Scribd Logo
Unggah

Selamat datang di Scribd!

  • Slide INS106 INS106 Slide 02

    Diunggah oleh

    Aji Namasaya
    6 tayangan14 halaman
    Dokumen ini membahas penggunaan berbagai tag HTML untuk membuat tabel, menampilkan gambar dan video, serta membuat daftar terurut dan tidak terurut dalam pembuatan halaman web. Dokumen ini juga menjelaskan struktur dasar dokumen HTML dan atribut-atribut penting yang dapat digunakan untuk tag tertentu seperti tabel.

    Deskripsi Asli:

    Judul Asli

    Slide-INS106-INS106-Slide-02

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Dokumen ini membahas penggunaan berbagai tag HTML untuk membuat tabel, menampilkan gambar dan video, serta membuat daftar terurut dan tidak terurut dalam pembuatan halaman web. Dokumen ini juga menjelaskan struktur dasar dokumen HTML dan atribut-atribut penting yang dapat digunakan untuk tag tertentu seperti tabel.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    6 tayangan14 halaman

    Slide INS106 INS106 Slide 02

    Diunggah oleh

    Aji Namasaya
    Dokumen ini membahas penggunaan berbagai tag HTML untuk membuat tabel, menampilkan gambar dan video, serta membuat daftar terurut dan tidak terurut dalam pembuatan halaman web. Dokumen ini juga menjelaskan struktur dasar dokumen HTML dan atribut-atribut penting yang dapat digunakan untuk tag tertentu seperti tabel.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 14

    Perancangan dan Pemrograman

    Web
    Week 2- Html
    Table, Image, Order List dan
    UnOrder 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>
    Kepala <Title>
    Judul Homepage
    <head> </Title>
    </Head>

    Homepage
    <Body>
    Tubuh Isi…Teks
    Isi…Tabel.
    <body> Isi…Audio, Video, dll.
    </Body>
    img : Display picture
    <!DOCTYPE html>
    <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.mp4’ type=‘video/mp4’
    <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <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 1a</td>
    <td>cell 1b</td>
    </tr>
    <tr> <td>cell 2a</td>
    <td>cell 2b</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
    1a</td>
    <td width="25%" bgcolor=yellow>cell
    1b</td>
    </tr>
    <tr align="center" valign="baseline">
    <td>cell 2a</td>
    <td>cell 2b</td>
    </tr>
    </table>
    </body>
    Latihan
    • Buatlah table berisikan nama dan link video, jika
    di click akan memanggil halaman html terkait
    video tersebut.
    Terima Kasih

    Anda mungkin juga menyukai