Social Icons

Rabu, 18 Desember 2013

CSS Table

Karena baru belajar dan belum menguasai secara  100%, maka sederhana saja

Berikut script HTML

<textarea>
<html>
<head>
<title>Data Pribadi Mahasiswa</title>
<link href="css2.css" rel="stylesheet" type="text/css">
</head>
<body>
<table align="center">
<th colspan="3" class="header">Tabel Data Pribadi Mahasiswa</th>
<tr class="Green" bgcolor="Green">
    <td width="352">Nama</td>
    <td width="12">:</td>
    <td width="600">Wahyu Eko</td>
    </tr>
<tr class="Red">
    <td>NIM</td>
    <td>:</td>
    <td>L200120115</td>
    </tr>
<tr class="Red" bgcolor="Red">
    <td>Alamat</td>
    <td>:</td>
    <td>Jl. Kuburan No. 13</td>
    </tr>
<tr class="white">
    <td>TTL</td>
    <td>:</td>
    <td>Simpang kanan, 12 Desember 1970</td>
    </tr>
<tr class="Yellow" bgcolor="Yellow">
    <td>Universitas</td>
    <td>:</td>
    <td>UNS</td>
    </tr>
<tr class="white">
    <td>Jurusan</td>
    <td>:</td>
    <td>MIPA</td>
    </tr>
</table>
</body>
</html>
</textarea>


Berikut script CSS

<textarea>
@charset "utf-8";
<style type="text/css">
#body{
background-color:Red}
.data
{
width:40%;
margin-top:20px;
margin-left:100px;
border:1px solid Black;
font-family: Georgia, "Times New Roman", Times, serif, Helvetica;
text-align:center;

}
td{
border: 1px solid;

}

th
{
text-align:center;
align:center;
background-color:black;
color:white;
}
.data1
{
text-align:center;
background-color:#ccc;
}

tr:hover   {
color:Black;
background:#00F;
cursor: crosshair;
}
transition: all 1s;
</style>
</textarea>

Atau download disini
readmore...

CSS Mouse Hover

Karena baru belajar dan belum menguasai secara  100%, maka sederhana saja

Berikut script Html
<textarea>
<html>
<head>
<title>GUDANG ANIME</title>
<link href="css1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="dropmenu">
<li><a href="#Genre.html">Genre</a>
    <ul>
    <li><a href="#Fantasy.html">Fantasy</a></li>
    <li><a href="#Romance.html">Romance</a></li>
 <li><a href="#Sci-Fi.html">Sci-Fi</a></li>
    </ul>
</li>
<li><a href="#Tutorial.html">Tutorial</a>
    <ul>
    <li><a href="#Download.html">Cara download</a></li>
    <li><a href="#Putar.html">Cara memutar</a></li>
    <li><a href="#Subtittle.html">Edit subtittle</a></li>
    </ul>
</li>
<li><a href="#Donasi.html">Donasi</a>
    <ul>
    <li><a href="#Paypal.html">Paypal</a></li>
    <li><a href="#Mandiri.html">Mandiri</a></li>
    <li><a href="#BCA.html">BCA</a></li>
    </ul>
</li>
</ul>
</body>
</html>
</textarea>


Kemudian berikut script CSS

<textarea>
/* dropmenu */
.dropmenu {
    background: #000;
    height: 50px;
    list-style-type: none;
    margin: 0;
    padding: 0px;
}
.dropmenu li {
    border-right: solid 2px black;
    float: left;
    height: 50px;
}
.dropmenu li a {
    color: #F00;
    display: block;
    font: 12px  Georgia, "Times New Roman", Times, serif, verdana, sans-serif;
    font-weight: bold;
    padding: 20px 70px;
    text-decoration: underline;
}
.dropmenu li:hover { background: #6F0; position: relative; }
.dropmenu li:hover a { text-decoration: none; }
.dropmenu li:hover ul {
    background-color: #333;
    border: 1px solid #6FC;
    left: 0px;
    padding: 3px;
    top: 30px;
    width: 160px;
}
.dropmenu li:hover ul li { border: 1; height: 18px; }
.dropmenu li:hover ul li a {
    background-color: #9CF;
    border: 1px solid transparent;
    color: #3C0;
    display: block;
    font-size: 14px;
    height: 20px;
    line-height: 18px;
    padding: 0px;
    text-decoration: none;
    text-indent: 5px;
    width: 150px;
    padding: 3px;
}
.dropmenu li:hover ul li a:hover {
    background: #666;
    border: solid 1px #666;
    color: #666;
    height: 18px;
    padding: 3px;
}
.dropmenu ul {
    left: -9999px;
    list-style-type: none;
    position: absolute;
    top: -9999px;
}
</style>
</textarea> 


Atau donwload disini 
readmore...

Selasa, 19 November 2013

ABOUT CSS

 
Salam phantom. Setelah lama tidak membuat post, kali ini saya akan membahas sedikit tentang CSS (Cascading Style Sheet). Pada artikel saya kali ini akan dijelaskan sedikit mengenai pengertian dan sejarah dari CSS. Baiklah, tidak perlu panjang lebar, langsung saja ke TKP.

PENGERTIAN CSS
CSS adalah singkatan dari Cascading Style Sheet yang merupakan kumpulan perintah yang dibentuk dari berbagai sumber yang disusun menurut urutan tertentu sehingga mampu mengatasi konflik style.
readmore...
Baca selengkapnya »

Senin, 16 September 2013

Sejarah Perkembangan HTML



Teman-teman yang saya hormati dan saya cintai, perkenankan saya sedikit memposting artikel mengenai HTML, artikel ini saya buat dengan referensi dari beberapa sumber. :)


HTML(Hypertext Markup Language) adalah bahasa pemrograman  standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser) . HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet. Supaya  dapat menghasilkan tampilan wujud yang terintegerasi Pemformatan hiperteks sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML. 

Di atas adalah penjelasan tentang apa itu HTML, sekarang saya akan masuk pada bagian "Sejarah Perkembangan HTML"
HTML  dibuat oleh Tim Berners-Lee ketika masih bekerja kepada CERN dan pertama kali dipopulerkan oleh browser "Mosaic".  selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat, dimana setiap perkembangannya pasti akan terjadi penambahan kemampuan dan fasilitas yang terus meningkat dari versi sebelumnya.

readmore...
Baca selengkapnya »
Langganan: Postingan (Atom)