CSS Slider2

HTML code

<div class="slider-wrapper">
<table <border="2" style="border-collapse:collapse;">
<tr>
<td>
<div class="scroll">
<ul class="s-thumbs">

<li><center><a href="#slide-1"><img src="image/DT1.jpg" /></a></center></li>
<li><center><a href="#slide-2"><img src="image/DT2.jpg" /></a></center></li>
<li><center><a href="#slide-3"><img src="image/DT3.jpg" /></a></center></li>
<li><center><a href="#slide-4"><img src="image/DT4.jpg" /></a></center></li>
<li><center><a href="#slide-5"><img src="image/DT5.jpg" /></a></center></li>
<li><center><a href="#slide-6"><img src="image/DT6.jpg" /></a></center></li>

</ul>
</div>
</td>
<td>
<ul class="s-slides">
<li id="slide-1" class="slideLeft"><img src="image/D1.jpg" /></li>
<li id="slide-2" class="slideLeft"><img src="image/D2.jpg" /></li>
<li id="slide-3" class="slideLeft"><img src="image/D3.jpg" /></li>
<li id="slide-4" class="slideLeft"><img src="image/D4.jpg" /></li>
<li id="slide-5" class="slideLeft"><img src="image/D5.jpg" /></li>
<li id="slide-6" class="slideLeft"><img src="image/D6.jpg" /></li>
</ul>
</td>

</tr>
</table>

</div>

CSS code

.scroll {
    background-color: #bbb;
    width: 200px;
    height: 400px;
    overflow: scroll;

}

.slider-wrapper ul,
.slider-wrapper li,
.slider-wrapper div,
.slider-wrapper img,
.slider-wrapper a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    list-style: none;
}

.slider-wrapper {
    height: 1000px;
width:1000px;
    overflow: hidden;
}

ul.s-thumbs li {
    float: center;
}

ul.s-slides,
ul.s-slides li,
ul.s-slides a,
ul.s-slides img {
    width: 683px;
    height: 410px;
    position: relative;
padding-left:10px;
padding-right:50px;
}

ul.s-slides {
    overflow: hidden;
    clear: both;
}

ul.s-slides li {
    position: absolute;

    z-index: 50;

/* Slide Left */
@-webkit-keyframes 'slideLeft' {
    0% { left: -1500px; }
20% { left: -1200px; }
40% { left: -900px; }
60% { left: -600px; }
80% { left: -300px; }
    100% { left: 0; }
}
ul.s-slides li.slideLeft:target {
    z-index: 100;

    -webkit-animation-name: slideLeft;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

/* Slide Right */
@-webkit-keyframes 'slideRight' {
    0% { left: 1500px; }
20% { left: 1200px; }
40% { left: 900px; }
60% { left: 600px; }
80% { left: 300px; }
    100% { left: 0; }
}

ul.s-slides li.slideRight:target {
    z-index: 100;

    -webkit-animation-name: slideRight;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;

}

Result

image : red :http://www.slashdress.com/maxi-dresses/2011-casual-dresses-womens-dresses-cotton-beach-skirt-casual.html/attachment/casual-dress-aeecpa

CSS Slider 1

HTML code

<div class="accordian">

<ul>

<li>

<div class="image_title">

<a href="#">Banner1</a>

</div>

<a href="#"><img src="image/B1.jpg" /></a>

</li>

<li>

<div class="image_title">

<a href="#">Banner1</a>

</div>

<a href="#"><img src="image/B2.jpg" /></a>

</li>

<li>

<div class="image_title">

<a href="#">Banner1</a>

</div>

<a href="#"><img src="image/B3.jpg" /></a>

</li>

<li>

<div class="image_title">

<a href="#">Banner4</a>

</div>

<a href="#"><img src="image/B4.jpg" /></a>

</li>

</ul>

</div>

CSS code

* {

margin: 0; 

padding: 0;

}

body {

background: #ccc; 

font-family: arial, verdana, tahoma;

}

/*Time to apply widths for accordian to work

Width of image = 740px

total images = 4

so width of hovered image = 6740px

width of un-hovered image = 40px - you can set this to anything

so total container width = 740 + 40*3 = 860px;

default width = 860/5 = 215x;

*/

.accordian {

width: 865px; height: 320px;

overflow: hidden;

margin: 100px auto;

box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);

-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);

-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);

}

.accordian ul {

width: 2000px;

}

.accordian li {

position: relative;

display: block;

width: 215px;

float: left;

border-left: 1px solid #888;

box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

transition: all 0.5s;

-webkit-transition: all 0.5s;

-moz-transition: all 0.5s;

}

.accordian ul:hover li {width: 40px;}

.accordian ul li:hover {width: 740px;}

.accordian li img {

display: block;

}

.image_title {

background: rgba(0, 0, 0, 0.5);

position: absolute;

left: 0; bottom: 0;

width: 740px;

}

.image_title a {

display: block;

color: #fff;

text-decoration: none;

padding: 20px;

font-size: 16px;

}

Result

image : http://mall.liveitgorgeous.com/marketplace-fashion/all-clothing/tops/tees.html

              http://emilyssanctuary.com/2013/05/20/life-at-lipsy/

              http://www.koopoi.com/Clothing/c1/index.html

Vertical drop down menu left (HTML & CSS)

HTML code

<div id="menu2">
    <ul>
        <li><a href="#">home</a></li>
            <li><a href="#">dress</a></li>
            <li><a href="#">shoes</a></li>
            <li><a href="#">about us</a>
                <ul>
                    <li><a href="#">contact us</a></li>
                    <li><a href="#">our social media</a></li>
                    <li><a href="#">our company</a></li>
                </ul>
            </li>
        <ul>

  </div>

CSS code

#menu2{
margin:0px;
padding:0px;

}
#menu2 ul{
float:left;
}

#menu2 li{
display:block;
list-style:none;
background:#404040;
border:#00CC00;
width:150px;
padding-top:10px;
padding-bottom:10px;
padding-left:30px;
position:relative;
left:-40px;
}

#menu2 ul li:hover{
background:#7A7A7A;
border-bottom:2px #DADADA dashed;
}

#menu2 a{
text-decoration:none;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
}

#menu2 ul ul{
display:none;
}
#menu2 ul li:hover ul{
display:block;
position:relative;
top:-34px;
left:150px;

}
#menu2 ul ul li{
display:block;

}

Result

Vertical menu left (HTML & CSS)

HTML code

<div id="menu">
    <ul>
        <li><a href="#">home</a></li>
            <li><a href="#">dress</a></li>
            <li><a href="#">shoes</a></li>
            <li><a href="#">about us</a></li>
        <ul>
 </div>

CSS code

#menu{
float:left;
margin-top:50px;
margin:0px;
  padding:0px;
position:relative;
left:-50px;
}
#menu ul{
list-style:none;
}

#menu ul li{
margin-top:15px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
background-color:#333333;
width:160px;
padding-top:10px;
padding-bottom:10px;
border-radius:0px 20px 20px 0px;
padding-left:20px;
box-shadow:5px 0px 10px black;
-webkit-transition:padding-left 0.6s;
-moz-transition:padding-left 0.6s;
}

#menu ul li:hover{
padding-left:50px;
background-color:#666666;
}

#menu a{
color:#FFFFFF;
text-decoration:none;
}

Result

How to connect HTML file and CSS file

<link type="text/css" href="proyek.css(CSS file name)" rel="stylesheet" />

How to put icon on title

<link rel="icon" href="image/title_image.png(icon file name)" type="image/png">

How to make drop down menu (HTML & CSS)

HTML code

<div id="menu">

<ul>
<li><a href="#">JK Event</a></li>
<li><a href="#">Women</a>
<ul>
<li><a href="womenclothing.html">Clothing</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Handbags</a></li>
<li><a href="#">Shoes</a></li>
</ul>
</li>
<li><a  href="">Men</a>
<ul>
<li><a href="#">Clothing</a></li>
<li><a href="#">Belts</a></li>
<li><a href="#">bags</a></li>
<li><a href="#">Shoes</a></li>
</ul>
</li>
<li><a href="home.html">Home</a></li>
</ul>

</div>

CSS code

#menu{
margin: 0px;
padding: 0px;
list-style-type:none;
}
#menu li{
display:block;
float:right;
background:#888;
border-right: 2px #666666 solid;
text-align:center;
width:160px;
height:30px;
padding-top:10px;
}
#menu li:hover {
background:#cccccc;
}
#menu a{
color:white;
text-decoration:none;
font-family:arial bold;
}
#menu ul ul{
display: none;
position:relative;
z-index:900;
}
#menu ul  li:hover ul{
padding-top:10px;
display:block;
z-index:900;
}
#menu ul  ul  li{
display:block;
border-right:none;
}

Result

CAI (Computer Asisted Instruction)

CAI (Computer Asisted Instruction) adalah sebuah metode pembelajaran yang menggunakan komputer sebagai alat bantunya dalam memeberikan materi pembelajaran kepada para pelajar.

4 model program CAI :
1.Drill and Practice
Drill and Practice adalah CAI yang memiliki tipe pengulangan yang mempunyai fungsi untuk melatih ketajaman memori. Tujuan dari CAI ini adalah untuk medalami pengetahuan dan keterampilan yang sudah ada sebelumnya. Setelah selesai menjalankan program tersebut maka user diharapkan dapat mahir dalam melakukan suatu keterampilan yang dilatih.

2.Games
CAI tipe ini memberikan materi pembelajaran melalui permainan. Melalui permainan diharapkan dapat membantu user lebih cepat dalam menyerap materi pembelajaran.

3.Tutorial
CAI jenis ini paling sering digunakan untuk memberikan materi pembelajaran dan juga paling lengkap. Tutorial berisi materi pembelajaran dan soal latihan pada bagian akhirnya untuk mengetahui perkembangan pada user.

4.Simulation
CAI jenis ini digunakan untuk mengajarkan materi pembelajaran berupa proses atau konsep yang sulit untuk dipahami (abstrak), seperti bagaimana bekerjanya proses ekonomi terebut berlangung atau terjadi. Disini user dibuat seolah-olah terlibat dalam kejadian sesungguhnya dan umpan balik kemudian diberikan oleh program dari keputusan yang dibuat oleh user tadi.

5.Problem solving
Pada CAI jenis ini user diberikan suatu masalah dan diminta untuk menganalisis dan memecahkan masalah yang diberikan.

Keuntungan CAI :
1.Siswa dapat terlibat secara langsung sehingga dapat melancarkan proses pembelajaran bila dilakukan secara benar.
2.Memberikan peluang yang sama bagi siswa yang cepat ataupun lambat dalam menguasai materi pembelajaran
3.Karena merupakan sebuah program, CAI dapat melakukan fungsinya dengan kesalahan yang sangat minim dan lebih cepat serta tidak pernah lelah, kacau, marah, tidak sabar, dan tidak pernah lupa.

Kerugian CAI :
1.Mahal
2.Untuk menggunakan metode pembelajaran menggunakan CAI, maka jumlah dari komputer harus sama dengan jumlah siswanya.
3.Butuh perangkat tambahan untuk bisa memaksimalkan penggunakan metode CAI ini.
4.Pada saat ini program yang tersedia lebih banyak ke program sains dan matematika saja.