Inilah contoh Script Tabel dengan Mouse Houver,, bisa nanti di sesuaikan dengan keinginan sendiri..
sialhkan di simak dan di coba..
<html>
<title>Table</title>
<head>
<style>
#body{
background-color:white;
margin: 0 0 0 70
}
.table
{
width:80%;
margin-top:20px;
margin-left:100px;
border:1px solid black;
font-family:Chalibri, Arial, Comic Sans MS;
text-align:center;
border-radius:4px;
}
td{
border: 1px solid red;
border-radius:5px;
}
th{
text-align:center;
align:center;
background-color:blue;
color:white;border-radius:5px;
}
#table
{
text-align:center;
background-color:pink;
border-radius:30px;
}
tr:hover {color:yellow; cursor: pointer;}
transition: all 1s;
</style>
</head>
<center><h1>DATA MAHASISWA FKI</h1></center>
<body id="body">
</body>
<table class="table">
<tr>
<th>NIM</th>
<th>NAMA</th>
<th>JURUSAN</th>
<th>JENIS KELAMIN</th>
<th>IP. KUMULATIF</th>
</tr>
<tr id="table">
<td>L200120007</td>
<td>TRIANA DEWI SALMA</td>
<td>INFORMATIKA</td>
<td>PEREMPUAN</td>
<td>4.0</td>
</tr>
<tr id="table">
<td>L100120012</td>
<td>MAISYAROH</td>
<td>KOMUNIKASI</td>
<td>PEREMPUAN</td>
<td>3.9</td>
</tr>
<tr id="table">
<td>L200120009</td>
<td>TIWIK HANIF Z.</td>
<td>INFORMATIKA</td>
<td>PEREMPUAN</td>
<td>3.9</td>
</tr>
<tr id="table">
<td>L100120008</td>
<td>FAKHRUDIN RIFA'I</td>
<td>KOMUNIKASI</td>
<td>LAKI-LAKI</td>
<td>3.8</td>
</tr>
<tr id="table">
<td>L100120006</td>
<td>BAGAS </td>
<td>KOMUNIKASI</td>
<td>LAKI-LAKI</td>
<td>3.8</td>
</tr>
<tr id="table">
<td>L100120002</td>
<td>BUDI DARMANTO </td>
<td>INFORMATIKA</td>
<td>LAKI-LAKI</td>
<td>3.7</td>
</tr>
</table>
</html>
Dan,, berikut hasilnya..
Kamis, 19 Desember 2013
MEMBUAT MENU SCROLL DOWN
ini mau share sedikit cara untuk membuat menu dengan sub menu scroll down..
monggo disimak ^-^
<html>
<title>menu</title>
<head>
<style>
#MenuBox{
background:pink;
margin: 10 0 0 450;
border-radius:10px;
width: 364px;
height: 35px;
font-size: 12px;
font-family: cursive;
color:yellow;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
}
#BoxTurun {
width: 875px;
border-radius:6px;
float: left;
margin: 0;
padding: 0;
}
#Posisi {
border-radius:6px;
margin: 0;
padding: 0;
}
#Posisi ul {
border-radius:6px;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#Posisi li {
border-radius:6px;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#Posisi li a, #Posisi li a:link, #Posisi li a:visited {
border-radius:6px;
color:black;
display: block;
font-size: 16px;
font-family: Georgia;
font-weight: normal;
margin: 0;
padding: 9px 15px 8px;
}
#Posisi li a:hover, #Posisi li a:active {
border-radius:6px;
background:black;
color:blue;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#Posisi li li a, #Posisi li li a:link, #Posisi li li a:visited {
border-radius:6px;
background:pink;
width: 150px;
color:black;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#Posisi li li a:hover, #Posisi li li a:active {
border-radius:6px;
background:pink;
color:black;
padding: 7px 10px;
}
#Posisi li {
border-radius:6px;
float: left;
padding: 0;
}
#Posisi li ul {
border-radius:6px;
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#Posisi li ul a {
border-radius:6px;
width: 140px;
}
#Posisi li ul ul {
border-radius:6px;
margin: -32px 0 0 171px;
}
#Posisi li:hover ul ul, #Posisi li:hover ul ul ul, #Posisi li.sfhover ul ul, #Posisi li.sfhover ul ul ul {
border-radius:6px;
left: -999em;
}
#Posisi li:hover ul, #Posisi li li:hover ul, #Posisi li li li:hover ul, #Posisi li.sfhover ul, #Posisi li li.sfhover ul, #Posisi li li li.sfhover ul {
border-radius:6px;
left: auto;
}
#Posisi li:hover, #Posisi li.sfhover {
border-radius:6px;
position: static;
}
</style>
</head>
<body>
<h1> MEMBUAT MENU SCROLL DOWN </h1>
<h2> oleh TRIANA DEWI SALMA_L200120007</h2>
<HR>
<BR>
<BR>
<div id="MenuBox">
<div id="BoxTurun">
<ul id="Posisi">
<li><a href="#">MENU</a></li>
<li><a href="#">PROFIL</a>
<ul>
<li><a href="#">ORGANISASI</a>
<ul>
<li><a href="#">VISI</a></li>
<li><a href="#">MISI</a></li>
<li><a href="#">ANGGOTA</a></li>
</ul>
</li>
<li><a href="#">SEJARAH</a></li>
<li><a href="#">PROGRAM KERJA</a></li>
</ul>
</li>
<li><a href="#">AGENDA</a></li>
<li><a href="#">CONTAC</a></li>
</ul>
</div>
</div>
</body>
</html>
monggo disimak ^-^
<html>
<title>menu</title>
<head>
<style>
#MenuBox{
background:pink;
margin: 10 0 0 450;
border-radius:10px;
width: 364px;
height: 35px;
font-size: 12px;
font-family: cursive;
color:yellow;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
}
#BoxTurun {
width: 875px;
border-radius:6px;
float: left;
margin: 0;
padding: 0;
}
#Posisi {
border-radius:6px;
margin: 0;
padding: 0;
}
#Posisi ul {
border-radius:6px;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#Posisi li {
border-radius:6px;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#Posisi li a, #Posisi li a:link, #Posisi li a:visited {
border-radius:6px;
color:black;
display: block;
font-size: 16px;
font-family: Georgia;
font-weight: normal;
margin: 0;
padding: 9px 15px 8px;
}
#Posisi li a:hover, #Posisi li a:active {
border-radius:6px;
background:black;
color:blue;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#Posisi li li a, #Posisi li li a:link, #Posisi li li a:visited {
border-radius:6px;
background:pink;
width: 150px;
color:black;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#Posisi li li a:hover, #Posisi li li a:active {
border-radius:6px;
background:pink;
color:black;
padding: 7px 10px;
}
#Posisi li {
border-radius:6px;
float: left;
padding: 0;
}
#Posisi li ul {
border-radius:6px;
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#Posisi li ul a {
border-radius:6px;
width: 140px;
}
#Posisi li ul ul {
border-radius:6px;
margin: -32px 0 0 171px;
}
#Posisi li:hover ul ul, #Posisi li:hover ul ul ul, #Posisi li.sfhover ul ul, #Posisi li.sfhover ul ul ul {
border-radius:6px;
left: -999em;
}
#Posisi li:hover ul, #Posisi li li:hover ul, #Posisi li li li:hover ul, #Posisi li.sfhover ul, #Posisi li li.sfhover ul, #Posisi li li li.sfhover ul {
border-radius:6px;
left: auto;
}
#Posisi li:hover, #Posisi li.sfhover {
border-radius:6px;
position: static;
}
</style>
</head>
<body>
<h1> MEMBUAT MENU SCROLL DOWN </h1>
<h2> oleh TRIANA DEWI SALMA_L200120007</h2>
<HR>
<BR>
<BR>
<div id="MenuBox">
<div id="BoxTurun">
<ul id="Posisi">
<li><a href="#">MENU</a></li>
<li><a href="#">PROFIL</a>
<ul>
<li><a href="#">ORGANISASI</a>
<ul>
<li><a href="#">VISI</a></li>
<li><a href="#">MISI</a></li>
<li><a href="#">ANGGOTA</a></li>
</ul>
</li>
<li><a href="#">SEJARAH</a></li>
<li><a href="#">PROGRAM KERJA</a></li>
</ul>
</li>
<li><a href="#">AGENDA</a></li>
<li><a href="#">CONTAC</a></li>
</ul>
</div>
</div>
</body>
</html>
Inilah untuk hasilnya
Sabtu, 16 November 2013
SEJARAH DAN PERKEMBANGAN CSS
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. CSS yaitu salah satu bahasa pemrograman web yang
mengatur komponen dalam suatu web supaya web lebih terstruktur dan lebih
seragam. CSS seperti halnya styles pada aplikasi pengolahan kata Microsoft Word
yang dapat mengatur beberapa style, misalnya subbab, heading, bodytext, footer,
images dan style lainnya untuk dapat dipakai bersama-sama dalam beberapa file.
CSS biasanya digunakan untuk memformat tampilan web yang dibuat dengan bahasa
HTML dan XHTML. CSS mampu mengatur warna body teks, ukuran gambar, ukuran
border, warna mouse over, warna tabel, warna hyperlink, margin, spasi
paragraph, spasi teks dan parameter lainnya. Dengan adanya CSS memungkinkan
menampilkan halaman yang sama dengan format yang berbeda.
SEJARAH CSS
CSS
pertama kali bermula sejak munculnya SGML pada tahun 1970-an. Sejak itu, CSS
mengalami perkembangan yang sangat pesat. Format dasar CSS yang banyak
digunakan sekarang ini merupakan ide dari seorang programmer bernama Hakon Wium
Lie yang tertuang dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS)
pada bulan oktober 1994 (dalam konferensi W3C di Chacigo. Illinois). Kemudian,
beliau bersama dengan Bert Bos mengembangkan suatu standart CSS. Pada tahun
1996, SCC resmi dipublikasikan. Pengerjaan Proyek ini juga didukung oleh
seorang progamer Thomas Reardon dari perusahaan software ternama, Microsoft. Nama CSS
didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan
secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child)
pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang
direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.
Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser
terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan
standar CSS.
Versi
untuk saat ini ada 3 versi dari CSS, yaitu CSS1, CSS2, dan CSS3.
PERKEMBANGAN CSS
· CSS 1
Pada tanggal 17
Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa
pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi
pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua
browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur
tampilan web.
CSS 1 mendukung
pengaturan tampilan dalam hal :
1. Font (Jenis
ketebalan).
2. Warna, teks,
background dan elemen lainnya.
3. Text attributes,
misalnya spasi antar baris, kata dan huruf.
4. Posisi teks,
gambar, table dan elemen lainnya.
5. Margin, border
dan padiing.
· CSS 2
Pada tahun 1998,
W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang
menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua
atribut dari CSS 1 dan diperluas dengan penekanan pada International
Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan
untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di
printer.
· CSS 3
CSS 3adalah versi
terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS 3
dapat melakukan animasi pada halaman website, diantaranya animasi warna dan
animasi 3D. Dengan CSS 3 desaigner dimudahkan dalam hal kompatibilitas
websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain
itu, banyak fitur baru pada CSS 3 yaitu : Multiple background, border-radius,
drop-shadow, border-image, CSS-Math dan CSS Object Model.
Fitur terbaru CSS 3
:
1. Animasi, sehingga pembuatan animasi
tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight.
2.
Beberapa efek teks, seperti teks
berbayang, kolom koran dan "Word-Wrap".
3.
Beberapa efek pada kotak, seperti
kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi,
sudut-sudut yang tumpul dan bayangan.
KELEBIHAN
DAN KEKURANGAN CSS :
Keunggulan
CSS:
1.
Update tampilan lebih mudah
2.
Beban bandwith lebih kecil
3.
Modifikasi Web template lebih mudah
4.
Lebih mudah digunakan pada mobile
phone
5.
Search engine friendly
Kekurangan
CSS:
1. Tampilan pada browser berbeda-beda.
2. Kadang juga terdapat browser yang tidak support CSS (browser
lama).
3. Harus tahu cara menggunakannya.
4. dibutuhkan waktu lebih lama dalam membuatnya.
5. Belum lagi ada bug/error dalam CSS
Jumat, 13 September 2013
SEJARAH DAN PERKEMBANGAN HTML
Sejarah dan Pengertian HTML
sebelum kita membahas sejarah dan
perkembangan HTML,, ada yang tau gak HTML itu apa??
gampangnya nih ya,, HTML adalah bahasa pemrograman web yang sering
digunakan. sebenarnya HTML (Hyper Text
Markup Language) adalah bahasa markup yang digunakan untuk membuat sebuah
halaman web dan menampilkan berbagai informasi dalam sebuah browser internet.
HTML ini dikembangkan dari standar pemformatan dokumen teks yaitu
Standard Generalized Markup
Language (SGML). HTML saat ini merupakan standard internet yang
didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium
(W3C). HTML berupa kode-kode tag yang menginstrusikan browser untuk
menghasilkan tampilan sesuai yang diinginkan.
HTML telah menjadi teknologi
utama untuk Web sejak awal tahun 1990-an. Tim Berners-Lee saat masih bekerja untuk CERN (Conseil Europeene Pour La Recherche Nuclaire) menciptakan HTML pada tahun 1989 sebagai cara sederhana
namun efektif untuk mengkodekan dokumen elektronik dan
dipopulerkan pertama kali oleh Browser Mosaic. tujuan awal dari
web browser adalah untuk melayani sebagai pembaca untuk dokumen berformat HTML.
Dua dekade kemudian, browser itu sendiri telah menjadi sebuah portal ke dunia
media online
Perkembangan HTML
1.
HTML VERSI 1.0
HTML versi 1.0 adalah versi
pertama sejak lahirnya nama html tersebut. Versi ini memiliki kemampuan
untuk heading, paragraph, hypertext, bold dan italic text, wrapping serta
memiliki dukungan dalam peletakkan sebuah gambar.
fitur HTML 1.0 :
·
Dapat ditulis dalam sintaks HTML (dengan tipe media
text/html) dan XML.
·
Integrasi yang lebih baik dengan aplikasi web dan
pemrosesannya.
·
Integrasi (‘inline’) MathML dan SVG dengan doctype yang
lebih sederhana.
·
Penulisan kode yang lebih efisien.
·
Dapat dimengerti oleh peramban lawas (backwards compatible)
2.
HTML VERSI 2.0
HTML versi 2.0 ( 14 Januari 1996
). Pada versi ini ada beberapa tambahan kemampuan diantaranya penambahan form
comment, hal ini menyebabkan adanya sebuah interaktif dan mulai dari versi ini
yang menjadikan sebuah pionner dalam perkembangan homepage interaktif.
3.
HTML VERSI 3.0
HTML versi 3.0 ( 18 Desember
1997 ). HTML versi 3.0 juga disebut-sebut HTML+ yang mempunyai kemampuan dalam
beberapa fasilitas diantaranya adalah penambahan fitur table dalam paragraph,
akan tetapi versi ini tidaj bertahan lama.
4.
HTML VERSI 3.2
HTML versi 3.2 ( 14 Januari 1997
). HTML versi ini adalah penyempurnaan dari HTML versi 3.0. keluarnya versi ini
dikarenakan adanya beberapa kasus yang timbul pada pengembang browser yang
telah melakukan pendekatan dengan cara lain yang justru hal tersebut menjadi
popular. Maka dibakukan versi 3.2 untuk mengakomodasi praktek yang banyak
digunakan oleh pengembang browser dan diterima secara umum. Dapat dikatakan
versi 3.2 ini merupakan versi 3.2 yang dikembangkan oleh beberapa pengembang
browser seperti Netscape dan Microsoft.
5.
HTML VERSI 4.0
HTML versi 4.0 ( 18 Desember
1997). Versi ini sudah terdapat penambahan pada link, meta, image dan lain-lain
sebagai penyempurnaan versi 3.2.
6.
HTML VERSI 4.01
HTML versi 4.01 ( 24 Desember
1999 ). HTML versi 4.01 menjadi rekomendasi W3C. HTML 4.01 adalah minor
update-koreksi dan perbaikan bug dari HTML 4.0.
7.
HTML 5
HTML 5 ( 22 Januari 2008 ). HTML
5 meningkatkan interoperabilitas dan mengurangi biaya pengembangan dengan
membuat aturan yang tepat tentang bagaimana untuk menangani semua elemen
HTML, dan HTML, dan bagaimana memulihkan
dari kesalahan.
Beberapa fitur di HTML 5 adalah :
·
Unsur kanvas untuk menggambar.
·
Video dan elemen audio untuk media pemutar.
·
Elemen baru, seperti artikel, footer, header, dan
navigasi.
·
Dukungan lebih baik untuk penyimpanan offline local.
·
Kontrol bentuk baru, seperti kalender, tanggal, waktu,
email, URL, dan search.
HTML 5
juga mengandung unsur-unsur baru seperti <nav>,
<header><footer>, dan <figure>. Yang termasuk kelompok kerja
diantaranya AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera dan
banyak lagi vendor lainnya.
Beberapa kelebihan
yang dimiliki oleh HTML5 adalah:
1.
Cleaner code, karena sebagian besar kode telah termasuk di dalam sintaks
html5, maka kode nampak terlihat lebih sederhana daripada penggabungan antara
html, css dan java script.
2.
Greater consistency, HTML5 telah melakukan banyak sekali penambahan sintaks
yang dibuat dalam struktur lebih baik dan lebih sederhana daripada
sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam
meningkatkan konsistensi dalam membangun sebuah web.
3.
Improve Semantics, dengan berbagai elemen kode di dalam html5 yang telah
distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan.
Itu berarti bahwa bagian-bagian dari web seperti header, nav, footerdan
beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya selain
itu juga terbentuk dalam sebuah “machine readible format”.
4.
Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur
pembangunan sebuah web, maka developerdapat membangun pemahaman yang
lebih detil mengenai halaman web.
5.
Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API
yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.
6.
Geolocation, HTML5 mempunyai API yang terintegrasi terhadap
geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain
seperti Google Latitude pada iphone.
7.
Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi
meskipun mereka terputus dari jaringan internet.
8.
Smarter Forms, terdapat semacam reguler expression (regex) yang
membuat form mampu mengenali secara lebih baik tentang input, validasi data dan
interaksi dengan elemen lain (misal : format email, password dll)
9.
Sharper focus on Web Application Requiments, HTML5 membuat
sebuah mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat,
tools drag and drop, video player, pengolah grafis dan masih banyak lagi.
Nah.. seperti itulah ulasan tentang
HTML kali ini.. anda-anda yang mungkin
tertarik dengan dunia ke-HTML-an ini silahkan memperdalam tentang pemrograman
web.. hehe ^_^
Arigato Gozaimasu..
Semoga bermanfaat...
Kamis, 12 September 2013
My Profile
Assalamualaikum..
hai semua..
blog ini bisa dibilang blog personal namun bisa juga tidak..
banyak hal cuap-cuap gak penting namun juga tempat share tugas. langsung aja nih gak banyak kata..
profile saya..
Nama : Triana Dewi salma
Nim : L200120007
Alamat : Tuban, Jawa Timur
sebenarnya banyak data yang akan saya cantumkan di atas, namun mengingat tidak begitu penting jadi ya cukup singkat padat saja..
yang penting ada nama dan nimnya itu buat penilaian tugas web dasar nantinya.. hehe
sekian... selamat membaca blog saya...
wassalamualaiku.. ^_^
Langganan:
Postingan (Atom)