Scribd Logo
Unggah

Selamat datang di Scribd!

  • Jobsheet 2

    Diunggah oleh

    Amalia Ima N J
    6 tayangan3 halaman
    Pemrograman web

    Judul Asli

    Jobsheet2

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Pemrograman web

    Hak Cipta:

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

    Jobsheet 2

    Diunggah oleh

    Amalia Ima N J
    Pemrograman web

    Hak Cipta:

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

    PRODUKTIF MULTIMEDIA

    LABSHEET DESAIN MEDIA INTERAKTIF

    Kelas XII Merancang website


    9 x 45 menit
    Semester I berbasis HTML

    Praktikkan kode html di bawah ini, amati hasilnya!

    <!DOCTYPE HTML>
    <html>
    <head> <title> </title></head>

    <body style="background-image:url(images.jpg); color:white">

    <center>
    <h1> Toko Buku Murah</h1>
    <img width="200px" height="200px" src="buku.png" alt="Gambar Buku"/>
    </center>

    <h2>Sinopsis Singkat</h2>
    <kbd> Menulis dokumen menggunakan MS Word tentulah berbeda dengan
    menulis dokumen di jendela browser. Walaupun
    editor HTML canggih yang beredar saat ini telah melengkapi dirinya
    dengan tombol-tombol instan siap pakai untuk menebalkan teks,
    memiringkan, mengatur ukuran hruf dan sebagainya namun sebenarnya
    dibalik itu semua, editor hTml itu sangat mengndalkan kehadiran tag.

    Di dalam bab ini anda akan belajar tentang semantic tag, yaitu tag-tag
    yang berfungsi untuk menentukan fungi sebuah teks yang ada di dalam
    desain website
    anda. Semantic tag berbeda dengan tag pada umumnya yang secara khusus
    mengatur bagaimana teks itu akan tampak di jendela browser. Sedangkan
    semantic tag lebih mengarah pada fungsi teks itu.

    <kbd>
    <h2>Testimonial</h2>
    <blockquote> Buku step by step HTML 5 adalah buku paling simpel dan
    sederhana dalam menjelaskan fitur-fitur terbaru HTML 5
    dan dasar-dasar HTML pada umumnya</blockquote>

    <ul>
    <li><b>Judul: </b> <i>Step by step HTML</i>
    <li><b>Penerbit: </b> PT. Elex Media Komputindo
    <li><b>Penulis: </b> Jebule Enterprise
    </ul>

    <h2>Langkah-langkah membeli buku: </h2>


    <ol>
    <li>Masuklah ke toko buku Gramedia
    <li>Sebutkan identitas buku berikut:
    <ul>
    <li><b>Judul: </b>Step by step HTML 5
    <li><b>Penerbit: </b> PT Elex Media Komputindo
    <li><b>Penulis: </b>Jebule Enterprise
    </ul>
    <li>Pergilah ke kasir
    <li>Bayarlah buku tersebut
    </ol>
    <h3>Daftar Harga</h3>
    <table border="1">
    <tbody>
    <tr>
    <th>Cover</th>
    <th>Harga</th>
    </tr>

    <tr>
    <td><code>&lt;Soft&gt;</code></td>
    <td>Rp. 50.000</td>
    </tr>

    <tr>
    <td><code>&lt;Hard&gt;</code></td>
    <td>Rp. 75.000</td>
    </tr>
    </tbody>
    </table>

    <!--Jika file ada di luar folder anda bisa menambahkan


    "namafolder/namafile" contoh "artikel/index.html" -->

    <p>Untuk mendapatkan contohnya, klik link <a href="modul-html2.pdf">


    dokumen </a></p>

    <hr>

    <p>Copyright &copy; PT Elex Media Komputindo &trade; <a


    href="http://www.hdtransjogja.com" vlink="red" target="_blank">Kunjungi
    website kami </a>

    <a href="mailto:gramedia@gmail.com">Kirim email </a></p>


    </body>
    </html>

    Setelah mempraktikkan kode di atas, maka anda telah mengetahu kode-kode dengan masing-masing
    fungsi. Untuk memperjelas pemahaman anda, berilah fungsi dari kode di bawah:
    1. <body style="background-image:url(images.jpg); color:white">

    Fungsinya:
    2. <img width="200px" height="200px" src="buku.png" alt="Gambar
    Buku"/>

    Fungsinya:
    3. <blockquote> ......... </blockquote>

    Fungsinya:
    4. <ul>
    <li><b>Judul: </b> <i>Step by step HTML</i>
    <li><b>Penerbit: </b> PT. Elex Media Komputindo
    </ul>

    Fungsinya:
    5. <ol>
    <li>Masuklah ke toko buku Gramedia
    <li>Sebutkan identitas buku berikut:
    </ol>

    Fungsinya:
    6. <table border="1">.....</table>

    Fungsinya:
    7. <a href="modul-html2.pdf"> dokumen </a>

    Fungsinya:
    8. <tr>
    <td><code>&lt;Soft&gt;</code></td>
    <td>Rp. 50.000</td>
    </tr>

    Fungsinya:
    9. &copy

    Fungsinya:
    10. &trade
    Fungsinya:

    Latihan
    Dengan latihan di atas, rancanglah sebuah halaman web yang memuat:
    a. Gambar
    b. Tabel
    c. Bullet dan numbering
    d. Link ke dokumen tertentu
    e. Gunakan gambar sebagai background halaman
    Waktu pengerjaan: 4 jam pelajaran

    Anda mungkin juga menyukai