Kegiatan 3 Maret 2016

Disain Web dengan CSS

1. Downlod gambar dibawah ini buat background

2. Masukan secrip ini di C++ apa sublime

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* CSS untuk tabel kalender*/
.main {
width:200px;
border:1px solid black;
}
/* CSS untuk tabel bulan*/
.bulan {
background-color:black;
font:bold 12px verdana;
color:white;
}
/* CSS untuk tabel minggu*/
.minggu{
background-color:gray;
font:bold 12px verdana;
color:white;
}
/* CSS untuk tabel hari*/
.hari {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
/* CSS untuk tabel hari ini*/
.hari #today{
font-weight: bold;
color: red;
}
div.head {
    padding-top: 10px;
    margin: auto;
    background: #00e6e6;
    text-align:center;
    width: 1000px;
    height: 200px;
    object-position: left;
    white-space: pre-line;
}
ul {
    list-style-type: none;
    margin: auto;
    padding: 0px;
    overflow: hidden;
    background-color: #333;
    width: 1000px;
    height: 30px;

}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 4px 7px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #0047b3;
    margin: auto;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 117px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
div.isi{
    padding-top: 5px;
    margin: auto;
    background: #b3ffff;
    text-align: center;
    width: 1000px;
    height: 600px;

}
div.footer {
    padding-top: 10px;
    margin: auto;
    background: #00e6e6;
    text-align: center;
    width: 1000px;
    height: 30px;
    padding-top: 10px;
}
div.right{
    float: right;
}
</style>
<script type="text/javascript" src="kalenderdasar.js"></script>

</head>
<body background="1.jpg">
<div class="head">
<h3>Smk muh 2 Klaten</h3>
Jl. Mayor Kusmanto,Klaten Utara,Kabupaten Klaten, Jawa Tengah 57434
</div>
<ul>
<li><a class="active" href="Foto/index.html">Home</a></li>
<li class="dropdown">
    <a href="Foto/Foto/Foto.html" class="dropbtn">Foto</a>
    <div class="dropdown-content">
      <a href="Foto/Sekolah/Sekolah.html">Sekolah</a>
      <a href="Foto/.KegiatanKegiatan.html">Kegiatan</a>
    </div>
</li>
<li class="dropdown">
    <a href="Jurusan/Jurusan.html" class="dropbtn">Jurusan</a>
    <div class="dropdown-content">
      <a href="Jurusan/TKJ/TkJ.html">TKJ</a>
      <a href="Jurusan/RPL/RPL.html">RPL</a>
    </div>
</li>
<li><a class="active" href="Lokasi/Lokasi.html">Lokasi</a></li>
<li><a class="active" href="Visi/Visi.html">Visi Misi</a></li>
<div class="right">
<form id="cari" method="get" action="proses_search.php">
     <input type="text" name="cari" placeholder="Cari" class="inputcari" onBlur="clearText(this)" onFocus="clearText(this)" />
     <input type="submit" name="submit" value="Cari" class="tombolcari" onBlur="clearText(this)" onFocus="clearText(this)" /></li>
    </form></div>
</ul>
<div class="isi">
<table width="1000" height="600" border="0">
<tr>
    <td rowspan="3">
    Gambar
    </td>
    <td width="240" height="200" align="center">
      <script type="text/javascript">
// mendeklarasikan tanggal dan hari
var tanggalhariini=new Date()
//untuk mendapatkan bulan(1-12)
var bulan1=tanggalhariini.getMonth()+1
//menunjukkan tahun
var tahun1=tanggalhariini.getFullYear()
document.write(membuatKalender(bulan1 ,tahun1, "main", "bulan", "minggu", "hari", 1));
</script>
    </td>
</tr>
<tr>
    <td> <marquee direction="up" scrollamount="2" height="230" width="200">
        <center><b> ^</b>
      <h4>Terima Kasih</h4>
            <div>
            <br>Yoga Kris
            <br>Ivan Sys
            <br>Gian
            <br>Muhammad Aji
            <br>Nurcolis Sheha
            <br>Mus Tofa
            </div>
            </center>
      </marquee></td>
</tr>

<tr>
    <td height="107"> </td>
</tr>
</table>
</div>
<div class="footer"><center>2016/2017</center></div>
</body>
</html>

Kegiatan 3 Maret 2016

1 Response to "Kegiatan 3 Maret 2016"

Invision