Tips - Trik Lengkap: 2013

Senin, 16 Desember 2013

Script HTML Dropdown Menu dan Tabel Zebra

Posted By Unknown 00.26 0 CSS, HTML, Tips dan Trik, TUGAS KULIAH

script HTML untuk membuat drop down menu adalah sebagai berikut :

<html>
<head>
<style>
#dropdownmenu {
border: 0px;
margin: 0px;
padding: 0px 300px 0px 300px;
font: 16px arial, verdana, sans-serif;
width: auto;
}
#dropdownmenu ul {
background: #333333;
height: 35px;
margin: 0;
padding: 0;
list-style: none;
}
#dropdownmenu li {
float: left;
padding: 0px;
}
#dropdownmenu li a {
background: #333333;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px 0px 25px;
text-align: center;
text-decoration: none;
color: #cccccc;
}
#dropdownmenu li a:hover,
#dropdownmenu ul li:hover a {
background: #06C;
text-decoration: none;
}
#dropdownmenu li ul {
background: #333333;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 150px;
}
#dropdownmenu li:hover ul {
display: block;
}
#dropdownmenu li li {
display: block;
margin: 0px;
padding: 0px;
width: 150px;
}
#dropdownmenu li:hover li a {
background: #333333;
}
#dropdownmenu li ul a {
display: block;
height: 35px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#dropdownmenu li ul a:hover,
#dropdownmenu li ul li:hover a {
background: #06C;
text-decoration: none;
}
</style>
</head>
<body bgcolor="#CC3300">
<div id='dropdownmenu'>
<ul>
<li><a href='#'>Beranda</a>
<ul>
<li><a href='#'>Info</a></li>
<li><a href='#'>Profil</a></li>
<li><a href='#'>Dll</a></li>
</ul>
</li>

<li><a href='#'>Berita</a>

<ul>

<li><a href='#'>Sekilas</a></li>

</ul>

</li>

</ul>
</div>
</body>
</html>

hasilnya seperti ini :

Dan untuk script HTML tabel zebra adalah seperti dibawah ini :

<html>

    <head> <title> -- Tabel Zebra -- </title>
       <style>
           #table
           {   font-family: Verdana, Geneva, sans-serif;
               font-size: 12px;
               width: 400px;
               text-align: center;
               border-collapse: collapse;
           }
           #table th
           {   font-size: 12px;
               font-weight: normal;
               padding: 5px;
               background: #c60;
               border-bottom: 1px solid #fff;
               color: #000;
           }
           #table td
           {   padding: 5px;
               background: #999;
               border-bottom: 1px solid #fff;
               color: #000;
           }
           #table tr:hover td
           {   background: #C03;
               color: #FFF;
           }
       </style>
    </head>
    <body>
    <table width="495" id="table">
       <thead>
       <tr>
          <th width="242">HEADER 1</th><th width="242">HEADER 2</th></tr>
       </thead>
       <tbody>
       <tr><td>konten 1 header 1</td><td>konten 1 header 2</td></tr>
       <tr><td>konten 2 header 1</td><td>konten 2 header 2</td></tr>
       <tr><td>konten 3 header 1</td><td>konten 3 header 2</td></tr>
       </tbody>
    </table>
    </body>
</html>

hasilnya seperti berikut :

Sekian tutorial untuk membuat dropdown menu dan tabel zebra dengan script html dan css, semoga berkenan :)

PENGERTIAN DAN SEJARAH CSS

Posted By Unknown 00.34 1 CSS, TUGAS KULIAH

Apa itu CSS / Cascading Style Sheet

CSS - Merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam tentunya tanpa CSS website tidak akan memiliki tampilan yang rapi.

CSS bukan merupakan bahasa pemograman. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Sejarah CSS

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 terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama dan kedua.

1. 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.

2. 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.

3. 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.

Pekembangan CSS3 Seperti Apa?
Dari salah satu situs blog yang saya temui mengatakan hasil pengamatan nya pada beberapa situs yang sudah menerapkan CSS3 + HTML5, ia beranggapan bahwa fungsi jQuery sepenuhnya akan tergantikan oleh CSS3. Perkiraan ke depan, tidak ada lagi web yang menggunakan jQuery karena sizenya lebih besar dibanding CSS3. Bukan cuma jQuery, saat ini penggunaan flash juga mulai terakusisi dengan semakin berkembangnya CSS3. CSS3 merupakan bahasa pemrograman olah digital gambar/citra tingkat tinggi karena dengan CSS3, anda bisa menggambar Tokoh Kartun Doraemon seperti contoh berikut :

Dari contoh di atas, memang terlihat belum semua browser sudah mendukung secara keseluruhan penggunaan CSS3, namun, masing-masing browser sudah melakukan proses perkembangan produk agar bisa mendukung penggunaan CSS3.

MEMBUAT WEBSITE DENGAN HOSTING DAN DOMAIN GRATIS !!

Posted By Unknown 11.01 0 Tips dan Trik

Tutorial membuat domain atau subdomain dengan hostingan gratis

1. Masuk ke www.idhostnger.com

2. Pilih order sekarang untuk membut akun hosting

3. Isi form pendaftaran dengan benar

4. Setelah selesai, aktifasi akun anda dengan email yang anda gunakan untuk mendaftar, dengan cara meng-klik tautan yang dikirimkan hostinger ke email anda

5. Setelah akun anda aktif lanjutkan dengan membuat hosting anda

6. Isi form pendaftaran,dan pilih subdomain/domain sesuai pilihan anda

7. Setelah selesai dan tidak ada kesalahan,akun anda sudah siap dan sudah bisa anda kelola, tapi biasanya belum aktif dan akan aktif selama 1x24 jam atau lebih

Demikian cara membuat hosting dengan domain/subdomain dengan geratis, semoga berkenan J

PENGERTIAN DAN KELEBIHAN HTML 5

Posted By Unknown 09.55 1 HTML

HTML 5

HTML5 adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard HTML. Tujuan utamanya telah meningkatkan bahasa dengan dukungan untuk multimedia terkini dengan tetap mudah dibaca oleh manusia dan secara konsisten dimengerti oleh komputer dan perangkat (web browser, parser, dll). HTML5 dimaksudkan untuk menggolongkan tidak hanya HTML 4, tapi XHTML 1 dan DOM Level 2 HTML juga. HTML5 ini merupakan hasil proyek dari lembaga persatuan website dunia, World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG). Proyek tersebut dimulai di tahun 2009 untuk menyempurnakan bahasa penanda sebelumnya yang dianggap sudah lawas. Tujuan utama dengan adanya HTML5 adalah mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya.

ELEMEN BARU DI HTML 5

Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:

section serupa seperti h1-h6.
article bisa berupa entri blog atau tulisan konten.
aside menyajikan konten pelengkap.
header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.
footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.
Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.
yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas dan elemen terkait berkas multimedia lainnya.

ATRIBUT BARU DI HTML 5

Dikenalkan pula beberapa atribut baru, seperti:

atribut media, ping pada elemen pranala,
autofocus, placeholder, required, autocomplete dan sebagainya, terkait elemen input dan form
reversed pada elemen ol untuk urutan besar ke kecil.

Beberapa kelebihan yang dijanjikan pada HTML5:

Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.
Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.
Integrasi (‘inline’) dengan doctype yang lebih sederhana.
Penulisan kode yang lebih efisien.
Konten yang ada di situs lebih mudah terindeks oleh search engine.

Browser yang Mendukung HTML

Opera Web Browser (mulai dari Opera 9.2 sampai yang terbaru saat ini yaitu opera 10)
Safari (mulai dari versi 3.1)
FireFox (Mulai dari FireFox 3 )
Google Chrome (Mulai dari versi 3)
Internet Explorer (Mulai dari versi 8)

HTML5 Semantic

HTML5 Semantic adalah beberapa tag baru yang diperkenalkan dalam HTML5 untuk mendukung struktur halaman yang lebih rapi. Beberapa elemen baru digunakan untuk mengurangi pemakaian tag <div>.

Elemen-elemen baru yang ditambahkan pada HTML5 adalah:

Tag	Keterangan
<article>	Menspesifikasikan konten yang bersifat independen, seperti artikel, blog post, forum post, dan sejenisnya.
<aside>	Digunakan untuk sebuah subkonten. Biasanya digunakan di dalam tag <article>.
<bdi>	Untuk teks yang tidak boleh terikat pada arah teks-elemen induknya
<command>	Sebuah button, atau radiobutton, atau checkbox.
<details>	Untuk menjelaskan detail tentang sebuah dokumen atau sebagian dari dokumen.
<summary>	Digunakan pada sebuah ringkasan dan sejenisnya di dalam tag <details>
<figure>	Untuk mengelompokkan sekumpulan section, biasanya berupa video.
<figcaption>	Berisi caption/keterangan yang ditempatkan di dalam tag <figure>
<footer>	Digunakan sebagai footer dari sebuah halaman
<header>	Digunakan sebagai header dari sebuah halaman
<hgroup>	Digunakan untuk sekumpulan heading
<mark>	Digunakan pada teks yang akan di highlight
<meter>	Digunakan untuk pengukuran, dimana nilai maksimal dan minimal telah ditentukan
<nav>	Digunakan untuk sekumpulan navigasi
<progress>	Membuat Progress bar
<ruby>	Digunakan untuk anotasi ruby
<rt>	Untuk menjelaskan anotasi ruby
<rp>	Menunjukkan elemen jika browser tidak mendukung ruby
<section>	Untuk sebuah section di dalam halaman. Seperti Bab, Footer, dan sebagainya
<time>	Untuk mendefinisikan waktu dan tanggal
<wbr>	Word Break. Untuk memisah suatu kata bila diperlukan.

HTML5 Audio

Salah satu fitur baru HTML5 yang paling mencengangkan adalah disediakannya tag baru yang memungkinkan kita untuk memutar audio sesuai yang kita inginkan tanpa menggunakan plugin tambahan seperti flash player. Dengan menggunakan tag <audio> kita sudah bisa memasukkan file mp3 dan ogg ke dalam halaman web kita.

Untuk menambahkan audio ke dalam web kita, cukup ketikkan kode berikut

<!DOCTYPE html>

<html>

<body>

<audio controls="controls">

<source src="music/FromHere.ogg" type="audio/ogg">

Your browser does not support the audio element.

</audio>

</body>

</html>

Sehingga akan menampilkan output seperti berikut :

· Mozilla version 9.0.1

Google chrome Version 22.0.1229.94

Opera version 12.10 beta RC

Penjelasan dari tags diatas:

< <audio>, tag audio utama, digunakan untuk memasukkan audio ke dalam HTML.

· <source>, digunakan untuk mengambil source file yang akan dimainkan audionya.

Atribut pada audio

· Autoplay, atribut ini digunakan untuk member opsi kepada tag audio apakah langsung dimainkan secara otomatis atau tidak.

· Controls, atribut ini memberikan pilihan untuk menampilkan kontrol audio (volume, seeker, play/pause button).

· Type, digunakan untuk mendefinisikan tipe audio yang dimainkan.

· Src, digunakan untuk mendefinisikan source audio yang dimainkan.

Saat ini, ada tiga tipe file audio yang sudah didukung HTML5 yaitu MP3, WAV, dan OGG. Berikut adalah data dukungan browser terhadap audio.

Browser	MP3	Wav	Ogg
Internet Explorer 9	Ya	Tidak	Tidak
Firefox 4.0	Tidak	Ya	Ya
Google Chrome 6	Ya	Ya	Ya
Apple Safari 5	Ya	Ya	Tidak
Opera 10.6	Tidak	Ya	Ya

HTML5 Video

Fitur multimedia lainnya yang didukung oleh HTML5 adalah video. Jika selama ini kita harus menggunakan flash player untuk memasukkan konten video, pada HTML5 kita tidak perlu lagi menggunakannya.

Untuk menambahkan elemen video kita gunakan kode berikut

<!DOCTYPE html>

<html>

<body>

<video width="320" height="240" controls="controls">

<source src="video/movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

</body>

</html>

Sehingga akan menampilkan output sebagai berikut :

· Mozilla version 9.0.1

Google chrome Version 22.0.1229.94

Opera version 12.10 beta RC

HTML5 Canvas

Fitur yang lain pada HTML5 adalah <canvas>. Canvas memungkinkan kita untuk memasukkan objek 2D atau 3D kedalam halaman web. Canvas juga sama seperti GeoLocation, tidak bias bekerja sendiri. Dibutuhkan javascript untuk membuat objek di dalamnya, baik 2D maupun 3D.

Untuk membuat objek di dalam canvas kita gunakan kode berikut :

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

</body>

</html>

Sehingga kita dapatkan hasil output seperti berikut :

· Mozilla version 9.0.1

Google chrome Version 22.0.1229.94

Opera version 12.10 beta RC

HTML5 Form Element

Pada HTML5 kita mengenal beberapa elemen form baru. Jika dahulu kita terbatas pada inputdan textarea, kali ini HTML5 menambahkan tiga elemen baru yaitu datalist, keygen, danoutput.

Namun untuk keygen, dukungan browser saat ini belum memenuhi standar keamanan, sehingga lebih aman untuk para web programmer menggunakan enkripsi pada server-side seperti md5, sha1, dan base64_encode.

· Form Datalist

<!DOCTYPE html>

<html>

<body>

<form action="demo_form.asp" method="get">

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<input type="submit"></form>

</body>

</html>

Sehingga kita dapatkan hasil output seperti berikut :

· Mozilla version 9.0.1

Google chrome Version 22.0.1229.94

Opera version 12.10 beta RC

· Form Output

<!DOCTYPE html>

<html>

<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<input type="range" name="a" value="50">100 +

<input type="number" name="b" value="50">=

<output name="x" for="a b"></output>

</form>

</body>

</html>

Sehingga kita dapatkan hasil output seperti berikut :

· Mozilla version 9.0.1

Google Chrome Version 22.0.1229.94

Opera version 12.10 beta RC

Tips - Trik Lengkap

Senin, 16 Desember 2013

Script HTML Dropdown Menu dan Tabel Zebra

Minggu, 17 November 2013

PENGERTIAN DAN SEJARAH CSS

Jumat, 11 Oktober 2013

MEMBUAT WEBSITE DENGAN HOSTING DAN DOMAIN GRATIS !!

Minggu, 29 September 2013

PENGERTIAN DAN KELEBIHAN HTML 5

ELEMEN BARU DI HTML 5

ATRIBUT BARU DI HTML 5

Category List

Popular Posts

Arsip Blog

Mengenai Saya

Total Pageviews