2016 ~ Sahabat Multimedia

Selasa, 23 Agustus 2016

Latihan CSS

Unknown Agustus 23, 2016 No comments

Pertama kita buat dulu file css nya dengan mengetikan coding dibawah ini

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0; padding: 0; border: 0;
}

body {
    background: #fff;
    font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
}

nav {
    margin: 100px auto;
    text-align: center;
}

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }

nav ul {
    background: #53bd84;
    padding: 0 20px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

    nav ul li {
        float: left;
    }
        nav ul li:hover {
            background: #666;
        }
            nav ul li:hover a {
                color: #fff;
            }

        nav ul li a {
            display: block; padding: 25px 40px;
            color: #fff; text-decoration: none;
        }


    nav ul ul {
        background: #53bd84; border-radius: 0px; padding: 0;
        position: absolute; top: 100%;
    }
        nav ul ul li {
            float: none;
            border-top: 1px solid #53bd84;
            border-bottom: 1px solid #53bd84; position: relative;
        }
            nav ul ul li a {
                padding: 15px 40px;
                color: #fff;
            }
                nav ul ul li a:hover {
                    background: #666;
                }

    nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

kemudian simpan file dengan nama style.css

Setelah itu kita buat file htmlnya dengan code dibawah ini

<html>
<head>
<meta charset="utf-8" />
<title>Membuat Menu Dropdown</title>

<link href="style.css" rel="stylesheet" />

</head>
<body>

<nav>
    <ul>
        <li><a href="#">Beranda</a></li>
        <li><a href="#">Tutorial</a>
            <ul>
                <li><a href="#">PHP</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">HTML</a>
                    <ul>
                        <li><a href="#">Pemula</a></li>
                        <li><a href="#">Mahir</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Nyekrip</a>
            <ul>
                <li><a href="#">Ngoding</a></li>
                <li><a href="#">Nyekrip Yuk</a></li>
            </ul>
        </li>
        <li><a href="#">Tentang</a>
            <ul>
                        <li><a href="#">Kontak</a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </li>
    </ul>
</nav>

</body>
</html>

simpan dengan nama latihan css.html

Sumber: bharatakreatif.blogspot.co.id

tugs remedial elda

Unknown Juni 12, 2016 2 comments

Tugas Remedial

Elda

I. Bahan :

- Kabel

- Kotak kontak

- Stop kontak

- Mcb

- Mangkok lampu

- Lampu

II. Alat :

- Obeng (-)(+)

- Tespen

- Tang potong

- Tang kabel

- Cuter

III. Cara kerja :

- Potong kabel secukup nya,lalu kupas ujung kabel

- Kemudian pasangkan kabel pada stop kontak ,mangkok lampu,kontak kontak, mcb,1 kabel 1 bahan

- Tempelkan bahan pada tembok

- Masukan semua kabel pada tebox

- Lalu pasangkan kabel hitam dengan hitam ,biru dengan biru .

- Tutup tebok .

- Lalu coba nyalakan stop kontak

- Jika menyala maka lampu akan benar

- Tetapi jika lampu tidak menyala maka coba lah periksa kembali kabel nya .

IV. Fungsi :

- Obeng :untk melepas dan memasang baut

- Tespent :untuk menguji ada nya arus listrik

- Tang : untuk memotong dan mengupas kabel

- MCB :sebagai penghambat arus listrik

- Kabel NYY : untuk menyambungkan dan menghasilkan arus listrik

- Stop kontak : untuk menyalakan dan mematikan arus listrik

- Saklar untuk menghubungkan kabel pada stop kontak

V. Kesimpulan

Jadi lampu akan menyala apabila stop kontak dalam keadaan on ,apabila lampu mati itu karena stop kontak sedang of , kita bisa memutuskan arusnya dengan MCB

#gambar instalasi

Membuat halaman web dengan Adobe Dreamweaver

Unknown Mei 30, 2016 No comments

Buka aplikasi Dreamwaver CS6 kemudian pilih HTML

Jika sudah terbuka ganti title dengan SMK Kaya Budi

Buatlah table dengan Row = 3 Coloum = 3

Untuk membuat bagian header kita seleksi terlebih dahulu row yang paling atas, jika sudah terseleksi klik kanan pilih tabel kemudian pilih merge cells

Untuk bagian tengah akan kita gunakan untuk membuat isi dan content, sedangkan untuk bagian bawah akan kita gunakan sebagai footer. Untuk membuat footer sama seperti kita membuat header tadi. (lihat no.4)
Jika seluruh bagian halaman web sudah dibuat kita atur size dan posisinya sehingga menjadi seperti dibawah ini