Scribd Logo
Unggah

Selamat datang di Scribd!

  • LKS2 HTML

    Diunggah oleh

    yogy
    6 tayangan4 halaman
    web html

    Judul Asli

    LKS2 html

    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
    web html

    Hak Cipta:

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

    LKS2 HTML

    Diunggah oleh

    yogy
    web html

    Hak Cipta:

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

    Lembar Kerja Siswa 2

    NAMA SISWA : .............................................................


    NO ABSEN : .............................................................
    KELAS : .............................................................

    LEMBAR KERJA SISWA


    Satuan Pendidikan : SMK Negeri 7 Malang
    Kelas/semester : XII / 1
    Mata Pelajaran : Desain Media Interaktif
    Alokasi Waktu : 6 x 45 Menit
    Kompetensi Dasar:
    Membuat user interface menggunakan prinsip-prinsip desain user interface pada multimedia interaktif berbasis
    halaman web dan media interaktif
    Materi Dasar:
     HTML dan CSS
    Tugas Peserta Didik:
     Membuat kerangka layout web
    A.Petunjuk Praktik
    1. Nyalakan computer / laptop sesuai SOP

    B. Keselamatan Kerja
    1. Gunakanlah pakaian kerja
    2. Siapkan/kontrol media dan peralatan yang akan dipraktikkan
    3. Ikutilah instruksi dari instruktur ataupun prosedur kerja yang tertera pada lembar kerja
    4. Mintalah ijin dari instruktur anda bila hendak melakukan pekerjaan yang tidak tertera pada lembar kerja
    5. Bersihkan/rapikan dan kontrol kembali media dan peralatan selesai praktik

    C. Tujuan
    1. Dapat membuat kerangka layout produk multimedia interaktif berbasis HTML dan CSS.

    D. Kajian Teori
    Menggunakan Division
    Pendekatan yang efektif untuk memformat elemen-elemen HTML—termasuk juga division—adalah dengan
    menggunakan CSS.

     Ukuran Area
    Seperti di kebanyakan elemen, kita bisa memanfaatkan atribut width dan height untuk menspesifikasikan ukuran
    area. Selain itu, atribut-atribut seperti padding dan margin juga bisa dimanfaatkan di sini.

    <head>
    <title>Demo Ukuran Division</title>
    <style type="text/css">
    <!--
    .box1 {
    width: 200px;
    height: 50px;
    background: grey;
    border: 1px solid red;
    }
    .box2 {
    margin: 10px;
    padding: 10px;
    width: 400px;
    height: 100px;
    border: 1px solid red;
    }
    -->
    </style>
    </head>
    <body>
    <div class="box1">
    Paragraf ini di dalam tag &lt;div&gt;
    </div>
    <div class="box2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
    </div>
    </body>

     Posisi Area
    Seperti halnya paragraf, elemen-elemen div akan menghasilkan area secara berurutan dari atas ke bawah. Adapun
    jika dikehendaki, kita bisa mengatur posisi area secara fleksibel dengan memanfaatkan atribut float CSS.

    <head>
    <title>Demo Posisi Division</title>
    <style type="text/css">
    <!--
    .box1 {
    float: left;
    width: 200px;
    height: 50px;
    background: grey;
    border: 1px solid red;
    }
    .box2 {
    float: right;
    padding: 10px;
    width: 300px;
    height: 100px;
    border: 1px solid red;
    }
    -->
    </style>
    </head>
    <body>
    <div class="box1">
    Paragraf ini di dalam tag &lt;div&gt;
    </div>
    <div class="box2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
    </div>
    </body>
    Perlu diperhatikan, atribut float normalnya akan mencoba memampatkan area sepanjang masih bisa dilakukan.
    Misalkan di dokumen sebelumnya kita tambahkan sebuah area kecil, maka hasilnya akan terlihat seperti Gambar
    dibawah ini.

    Bergantung kebutuhan, perilaku normal dari float bisa sesuai keinginan atau sebaliknya. Apabila dua kotak pertama
    dikehendaki sejajar sehingga penambahan baru akan dilakukan setelah batas kota terluas (kotak kanan), kita bisa
    me-reset atribut float dengan menggunakan atribut clear.

    <head>
    <title>Demo Posisi Division</title>
    <style type="text/css">
    <!--
    .box1 {
    float: left;
    width: 200px;
    height: 50px;
    background: grey;
    border: 1px solid red;
    }
    .box2 {
    float: right;
    padding: 10px;
    width: 300px;
    height: 100px;
    border: 1px solid red;
    }
    .box3 {
    /* me-reset pengaturan float left maupun right */
    clear: both;
    float: left;
    width: 200px;
    height: 50px;
    background: grey;
    border: 1px solid red; }
    -->
    </style>
    </head>
    <body>
    <div class="box1">
    Paragraf ini di dalam tag &lt;div&gt;
    </div>
    <div class="box2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
    </div>
    <div class="box3">
    Paragraf ini di dalam tag &lt;div&gt;
    </div>
    </body>

    E. Alat dan Bahan:


    1. Komputer / laptop

    F.Langkah kerja
    Membuat kerangka layout web berbasis HTML
    1. Buka aplikasi notepad / notepad++
    2. Pelajari tag tentang pengaturan area dan posisi (div) berbasis CSS
    3. Ketiklah bahasa Markah untuk membuat kerangka layout berikut:

    G.Hasil Kerja
    Berikut bahasa markah untuk membuat kerangka :

    NILAI : .............................................................

    Anda mungkin juga menyukai