Minggu, 24 Februari 2013

7 HTML Script Untuk Mempercantik Web

Semasa di SMAN 2 Bojonegoro dulu, saya pernah mempelajari Pemrograman Web dengan PHP dan MySQL. Berselang 2 tahun, kini saya kembali menemui pelajaran serupa di Universitas Negeri Malang prodi Pendidikan Matematika, yaitu Desain Web. Di Desain Web ini, yang dipelajari tak serumit di Pemrograman Web. Sehingga mudah dipraktekkan oleh orang awam. Setelah membuat beberapa tugas, saya memutuskan mengompilasi beberapa HTML Script yang bisa diaplikasikan di wb Anda demi mendapatkan hasil desain yang baik.

Keterangan:
semua tanda kurung di script ganti dengan kurung siku buka < dan kurung siku tutup >
* berarti nama file Anda
** berarti angka yang bisa Anda masukkan
*** berarti text yang bisa Anda tambahkan di script tersebut


1. Favicon
Favicon adalah icon utama yang muncul padd address bar suatu website dan merupakan logo dari website tersebut. Anda bisa membuatnya secara manual dengan Adobe Photoshop, Paint, dan lain-lain. Atau Anda bisa membuatnya secara online di http://www.favicon.cc/. Setelah anda memiliki file dengan nama *.ico, maka Anda bisa menambahkan script di bawah ini di bagian head untuk menambahkan favicon di web Anda.
[link rel="icon" type="image/ico" href="*.ico"]
2. Marquee
Marquee membuat teks Anda menjadi tulisan berjalan. Beberapa variasi marquee adalah:
-Masuk dan berhenti
[marquee behavior="slide" direction="left/right/up/down"]***[/marquee]
-Berjalan terus secara kontinu
[marquee behavior="scroll" direction="left/right/up/down"]***[/marquee]
-Bounce di tiap sisi
[marquee behavior="alternate"]***[/marquee]
Untuk mengubah kecepatan jalan teks, tambahkan scrollamount="**" dengan skala 1-20.

3. Audio
Menambahkan lagu di web bisa menjadi nilai tambah bagi web Anda. Caranya pun mudah.
[audio controls]
[source src="*.ogg" type="audio/ogg"]
[source src="*.mp3" type="audio/mpeg"]
***[/audio]
 *** dapat Anda tambahkan pesan bagi browser yang tidak mendukung script audio ini.

4. Video
Scriptnya hampir sama dengan audio, namun ada pengaturan width dan height untuk mengatur ukuran frame video Anda. Bisa Anda masukkan angka (dalam satuan pixel) atau presentase.

[video width="**" height="**" controls]
[source src="*.mp4" type="video/mp4"]
[source src="*.ogg" type="video/ogg"]
***[/video]
5. Download
Fitur download dewasa ini sudah menjadi bagian penting dari tiap web browser.
[a href="***" target="_blank"]***[/a]
*** pertama adalah link menuju download page. *** kedua umumnya diisi dengan kata-kata "download" atau "klik di sini," tetapi untuk mendapat hasil maksimal, saya sarankan Anda menggunakan button agar lebih menarik.

6. iFrames
Bosan dengan link yang begitu-begitu saja? Tampilkan webpage tujuan Anda langsung di halaman Anda!
[iframe src="***" width="**" height="**" frameborder="**"][/iframe]
*** adalah link ke webpage yang Anda ingin tampilkan.

7. CSS
Bagian ini sangat penting dalam desain web agar Anda tak perlu susah-susah mengetik pengaturan desain halaman berkali-kali. Anda bisa membuat sebuah file dengan nama *.css yang berisi pengaturan (misalnya) sebagai berikut:
body {
color: gold;
background-image: url(*.jpg);
font-family: Segoe UI;
}
h3 {
color: white;
font-family: Palatino Linotype;
}
big {
color: red;
}
i {
color: silver;
}
 dan sebagainya, kemudian menambahkan link di bagian head script HTML Anda sebagai berikut.
[link rel="stylesheet" type="text/css" href="*.css"]

Semoga bermanfaat!

3 komentar:

  1. klik ta gan blog ane www.valanandaonlineshop.blogspot.com

    BalasHapus
  2. Thanks broo informasi artikelnya :)
    http://goo.gl/ebnkww

    BalasHapus
  3. Thanx gan,,,segera dieksekusi,,,sangat bermanfaat bagi pemula gan,,,

    Kunjungi website saya ya : https://faiz4l.mahasiswa.atmaluhur.ac.id/ dan website kampus saya : http://www.atmaluhur.ac.id

    BalasHapus