Membuat Form dengan CGI Scripts

Formulir HTML Tutorial: Dasar / Menengah

Rekomendasi prasyarat pengetahuan: HTML dasar. Apa yang Anda akan belajar: bagaimana mendirikan sebuah bentuk HTML dan membuatnya berinteraksi dengan script sisi server.
oleh Hary Kurniadi


Form merupakan bagian penting dari desain Web karena mereka memungkinkan kita untuk mengumpulkan data dari pengunjung kami. Formulir dapat menambahkan interaktif ke halaman Web kami dan melakukan banyak fungsi yang berguna.

1. Membuat Form

Dalam rangka untuk menciptakan bentuk-bentuk, Anda harus tahu bagaimana untuk menempatkan elemen formulir di halaman Anda. Namun, ada satu bagian penting untuk menciptakan bentuk. Yang membuat karya formulir dengan sebuah script yang akan mengambil data yang dimasukkan oleh pengunjung dan proses dalam beberapa cara. Pilihan Anda script tergantung pada tujuan formulir Anda. Beberapa bentuk berinteraksi dengan JavaScript yang dikodekan ke dalam halaman Web dan dijalankan oleh browser pengunjung. Sebagian besar bentuk diproses oleh script yang merupakan penduduk di server jauh, namun. Ketika pengguna mengisi data-nya dan kemudian mengklik tombol submit, data dikirim ke alamat skrip yang dikodekan ke dalam tag form.

Script yang hasil formulir dikirim ke mungkin pada server yang sama dengan situs Web Anda, atau pada server lain. Sering, script adalah script CGI (Common Gateway Interface) yang ditulis dalam PERL, sebuah skrip (Active Server Pages) ASP atau PHP (Personal Home Page) script. Script dapat mengambil data yang diajukan oleh formulir dan menambahkannya ke database, kirimkan melalui email ke alamat yang ditunjukkan, atau kembali hasil pencarian berdasarkan input pengguna. Setiap script adalah unik dan ditulis untuk melakukan fungsi tertentu.

Bahkan jika host website Anda tidak menyediakan script pengolahan bentuk, Anda dapat menggunakan script remote-host untuk menambahkan bentuk-bentuk interaktif ke situs Anda tanpa harus mengetahui apapun CGI atau Perl.

Sering kali, ketika Anda mendaftar dengan layanan hosting untuk host situs Web Anda, mereka akan memberikan satu atau lebih script CGI terletak di server mereka untuk Anda gunakan. Jenis yang paling sering disediakan script CGI adalah pengolahan bentuk script yang akan mengambil informasi yang masukan oleh pengunjung ke situs Web dan email ke pemilik situs Web. Tuan rumah biasanya juga menyediakan petunjuk yang baik tentang cara untuk membuat bentuk anda bekerja dengan script mereka. Itu umumnya hanya masalah penambahan alamat yang benar dari script ke tag formulir Anda dan beberapa kolom formulir tersembunyi untuk membentuk. Bidang-bidang formulir tersembunyi tidak terlihat oleh pengunjung Anda. Mereka tidak menampilkan pada halaman Web Anda. Mereka hadir dalam kode HTML, meskipun, dan membawa informasi penting kembali ke script, seperti alamat email yang hasil formulir harus dikirim ke. Dalam kode HTML Anda, bidang formulir tersembunyi terlihat seperti ini:

<input type="hidden" name="your_email_address" value="me@myisp.com">
Membuat Formulir Anda dengan Script Remote-Host CGI Gratis

Hanya dalam kasus host tidak menyediakan script pengolahan bentuk, semua tidak hilang. Anda dapat menggunakan script yang disediakan bagi siapa saja untuk digunakan secara bebas, asalkan mereka bersedia untuk melihat iklan kecil. Ada script seperti yang tersedia, tapi saya akan menggunakan salah satu di http://www.response-o-matic.com sebagai contoh. Setelah Anda memahami proses membuat pekerjaan formulir Anda dengan satu script, maka akan mudah bagi Anda untuk membuatnya bekerja dengan orang lain.

Untuk mengirim script ke server Response-O-Matic untuk pengolahan, Anda harus menambahkan alamat script untuk tag form seperti ini:

<form action=http://www.response-o-matic.com/cgi-bin/rom.pl method="post">
(Anda dapat menambahakan bentuk form lain disini, seperti misalnya tombol submif.)
</form>

Perhatikan metode = posting atribut dalam tag form. Beberapa script menggunakan metode = pos. Lainnya menggunakan metode = get. Pastikan untuk mengikuti instruksi untuk naskah Anda. Script Respon-O-Matic menggunakan metode = post.

Sekarang, ada satu hal lain Anda harus menambahkan untuk membentuk Anda untuk membuatnya bekerja dengan script tertentu. Itu adalah field tersembunyi yang memberitahu script mana untuk mengirim hasil formulir. Field tersembunyi dapat pergi ke mana saja Anda ingin selama itu adalah antara tag pembukaan dan penutupan bentuk. Sekarang kode HTML untuk form Anda terlihat seperti ini:

<form action=http://www.response-o-matic.com/cgi-bin/rom.pl method="post">
<input type="hidden" name="your_email_address" value="you@yourisp.com">
(Your other form fields go here. Include your submit buttons at the end.)
</form>

Pastikan untuk mengganti alamat email Anda yang sebenarnya untuk bagian yang berwarna merah.
Menambahkan opsi Extra untuk Formulir Anda

Itu semua yang diperlukan untuk membuat pekerjaan formulir Anda dengan script Response-O-Matic. Mudah, bukan? Orang-orang di Response-O-Matic ingin menyediakan Anda dengan pilihan lebih dari ini, bagaimanapun, jadi, mereka menambahkan lebih banyak bidang opsional yang dapat ditambahkan untuk membentuk Anda jika Anda ingin.

Dua bidang opsional adalah bidang terlihat di mana pengunjung dapat mengetik nama dan alamat email. Jika Anda nama mereka nama-nama yang tepat yang Response-O-Matic menentukan, nama pengunjung dan alamat email akan ditempatkan di bagian "Dari" dari email yang dikirimkan kepada Anda. Hal ini membuat lebih mudah untuk menambahkan pengunjung ini ke buku alamat email Anda atau untuk mengirim mereka balasan. Jika Anda menambahkan dua field untuk formulir Anda, kode Anda akan terlihat seperti ini:

<form action=http://www.response-o-matic.com/cgi-bin/rom.pl method="post">
<input type="hidden" name="your_email_address" value="you@yourisp.com">
Name: <input type="text" name="visitor_name">
Email Address: <input type="text" name="visitor_email_address">
(Your other form fields go here. Include your submit buttons at the end.)
</form>

Sisa dari bidang opsional semua field tersembunyi. Mereka memungkinkan Anda untuk menentukan hal-hal seperti subjek dari pesan email yang Anda terima, yang bidang pengunjung Anda harus mengisi sebelum bentuk akan menyerahkan, dan penampilan Terima Kasih halaman yang mengikuti pengiriman formulir. Misalnya, jika Anda ingin menentukan subjek email, Anda akan menambahkan sebuah bidang formulir tersembunyi bernama "email_subject_line". Kode Anda sekarang akan terlihat seperti ini:

<form action=http://www.response-o-matic.com/cgi-bin/rom.pl method="post">
<input type="hidden" name="your_email_address" value="you@yourisp.com">
Name: <input type="text" name="visitor_name">
Email Address: <input type="text" name="visitor_email_address">
<input type="hidden" name="email_subject_line" value="Conference Reservation Form Response">
(Your other form fields go here. Include your submit buttons at the end.)
</form>

Tentu saja, Anda akan mengganti baris subjek Anda sendiri untuk bagian yang ada di hijau.

Berikut ini adalah grafik yang lengkap pada semua bidang yang tersedia untuk menyiapkan formulir Anda dengan script Response-O-Matic. Informasi lebih lanjut dapat diperoleh dengan mengunjungi situs Response-O-Matic di: http://www.response-o-matic.com.
Beberapa Hal yang Perlu Pikiran Ketika Bekerja dengan Form

Berikut adalah beberapa poin tambahan untuk diingat ketika menciptakan bentuk-bentuk:

Semua elemen formulir Anda, termasuk field tersembunyi Anda bentuk, HARUS antara pembuka dan tag penutup bentuk dalam rangka untuk bekerja. Hanya satu set tag bentuk bentuk itu diperbolehkan.

Jika Anda menggunakan meja untuk tata letak elemen form Anda, ada baiknya jika Anda meletakkan seluruh tabel dalam bentuk tag. Dengan cara itu Anda tidak akan memiliki elemen benar bersarang.

Setiap pengolahan bentuk skrip CGI ditulis sedikit berbeda. Nama-nama yang mereka berikan kepada yang mirip kolom formulir tersembunyi mungkin berbeda, dan jumlah yang diperlukan bidang formulir tersembunyi dapat bervariasi. Karena itu, ketika Anda mengubah script CGI yang Anda kirimkan hasil bentuk, Anda juga harus mengubah bidang formulir tersembunyi Anda serta alamat script yang ada di tag form. Pastikan untuk mengetik nama field tersembunyi persis seperti instruksi menunjukkan. Nama-nama adalah case sensitif.

Pastikan bahwa Anda memberi setiap bidang lain Anda membentuk sebuah nama deskriptif yang akan Anda mengenali kapan Anda menerima email yang memberitahukan Anda bagaimana pengunjung Anda untuk membentuk Anda menanggapi

Read more

Generating Files dengan JavaScript

Ketika membangun sebuah aplikasi web, Anda seringkali harus memberikan pengguna kemampuan untuk men-download bagian dari data sebagai file. Ini bisa menjadi cadangan pengaturan konfigurasi, laporan, atau bagian lain dari informasi yang dihasilkan secara dinamis.

Solusi yang biasa untuk masalah ini akan memiliki script ekspor khusus yang memilih dari database dan membangun file yang Anda butuhkan. Namun, seperti kita akan membuktikan di tutorial singkat ini, ada cara lain.

Kami akan membuat sebuah plugin jQuery yang, dikombinasikan dengan script php sederhana, dapat menghasilkan setiap jenis file tekstual, dan membuatnya tersedia untuk di-download. Anda akan memulai download dari front end Anda JavaScript dengan hanya menyediakan isi file, dan meninggalkan sisanya untuk plugin.

HTML

Kita akan mulai dengan meletakkan sebuah halaman HTML sederhana dengan textarea dan tombol download, sehingga kita dapat menunjukkan plugin di tempat kerja.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>Generating files with JS &amp; PHP | Tutorialzine Demo</title>

<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<header>
<h1>Generating Files with JavaScript</h1>
<h2><a href="http://tutorialzine.com/2011/05/generating-files-javascript-php/">&laquo; Read and download on Tutorialzine</a></h2>
</header>

<form action="./" method="post">
<textarea></textarea>
<a href="#" class="blueButton" id="download">Download</a>
</form>

<footer>Another cool example: <a href="#" id="downloadPage">download this page.</a> <b>To download the source code, visit <a href="http://tutorialzine.com/2011/05/generating-files-javascript-php/">Tutorialzine.com</a></b></footer>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="assets/js/jquery.generateFile.js"></script>
<script src="assets/js/script.js"></script>

</body>
</html>

Halaman menggunakan DOCTYPE HTML5, seperti kita menggunakan beberapa tag yang didefinisikan oleh standar. Untuk itu untuk bekerja di IE, kita juga perlu menyertakan script HTML5 memungkinkan di bagian kepala.

Sebelum tag penutup tubuh, kita menambahkan perpustakaan jQuery, plugin generateFile kita akan menulis dalam sekejap, dan file script.js yang mendengarkan acara dan memicu download file.

download.php

if(empty($_POST['filename']) || empty($_POST['content'])){
exit;
}

// Sanitizing the filename:
$filename = preg_replace('/[^a-z0-9-_.]/i','',$_POST['filename']);

// Outputting headers:
header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');

echo $_POST['content'];

Apa ini script PHP tidak hanya menambahkan beberapa header di atas pernyataan echo. Plugin kita sedang membangun harus lulus dua parameter bersama dengan permintaan POST: nama file dan konten. Script akan mencetak isi file, sedangkan tiga pengaturan header yang akan memaksa kotak file download muncul (bukan dari browser Anda hanya membukanya).

Untuk menggunakan plugin Anda perlu untuk meng-upload file ini di suatu tempat di server Anda dan lulus URL-nya ke plugin kita akan coding berikutnya.


jQuery

Seperti yang Anda lihat di bagian sebelumnya, plugin kami telah mengeluarkan permintaan POST untuk download.php. Pilihan alami untuk membuat permintaan akan dengan menggunakan AJAX. Namun, ada kelemahan untuk menggunakan metode ini - tidak memicu dialog download file muncul.

Jadi apa yang kita butuhkan adalah sebuah sekolah sedikit lebih lama. Kami akan secara dinamis menciptakan iframe tersembunyi dan menulis suatu bentuk untuk itu, yang kemudian kita akan menyerahkan melalui POST. Atribut aksi titik formulir untuk download.php, sehingga dialog file download akan muncul, persis seperti yang kita butuhkan untuk.

Sekarang mari kita meletakkan kode jQuery yang melakukan hal ini:

assets/jquery.generateFile.js

(function($){

// Creating a jQuery plugin:

$.generateFile = function(options){

options = options || {};

if(!options.script || !options.filename || !options.content){
throw new Error("Please enter all the required config options!");
}

// Creating a 1 by 1 px invisible iframe:

var iframe = $('<iframe>',{
width:1,
height:1,
frameborder:0,
css:{
display:'none'
}
}).appendTo('body');

var formHTML = '<form action="" method="post">'+
'<input type="hidden" name="filename" />'+
'<input type="hidden" name="content" />'+
'</form>';

// Giving IE a chance to build the DOM in
// the iframe with a short timeout:

setTimeout(function(){

// The body element of the iframe document:

var body = (iframe.prop('contentDocument') !== undefined) ?
iframe.prop('contentDocument').body :
iframe.prop('document').body; // IE

body = $(body);

// Adding the form to the body:
body.html(formHTML);

var form = body.find('form');

form.attr('action',options.script);
form.find('input[name=filename]').val(options.filename);
form.find('input[name=content]').val(options.content);

// Submitting the form to download.php. This will
// cause the file download dialog box to appear.

form.submit();
},50);
};

})(jQuery);

Dalam waktu kurang dari 50 baris (dengan komentar dilucuti) fragmen di atas tidak apa yang kita butuhkan. Ini menciptakan iframe tersembunyi dengan bentuk di dalamnya.

Perhatikan fungsi setTimeout () . Tanpa itu kita tidak dapat mengakses elemen dokumen dari iframe di Internet Explorer. Dengan cara ini, kita memberikan waktu untuk membangun DOM dan membuatnya tersedia untuk kita.

Dan di sini adalah bagaimana menggunakan plugin ini:

assets/script.js

$(document).ready(function(){

$('#download').click(function(e){

$.generateFile({
filename : 'export.txt',
content : $('textarea').val(),
script : 'download.php'
});

e.preventDefault();
});

$('#downloadPage').click(function(e){

$.generateFile({
filename : 'page.html',
content : $('html').html(),
script : 'download.php'
});

e.preventDefault();
});

});

Ketika memanggil $. GenerateFile, Anda harus lulus nama file (harus sesuatu yang deskriptif), isi teks, dan jalan menuju download.php. Seperti yang dapat Anda lihat pada contoh di atas, kita bisa menghasilkan berbagai jenis file, asalkan adalah teks.

Dengan plugin yang sederhana ini selesai!

kesimpulan

Anda dapat menggunakan kode ini untuk menambahkan fitur ekspor ke aplikasi web atau meningkatkan area tertentu dari situs Anda dengan fungsi download. Hal ini bahkan mungkin untuk menghasilkan file doc dan spreadsheet jika Anda mengikuti format XML Microsoft Office. Bagian yang terbaik adalah bahwa semuanya dilakukan dengan JavaScript dan Anda dapat dengan mudah menggabungkan berbagai sumber data.

Demo Download

Read more

Membuat Portofolio HTML5 dengan jQuery dan plugin Quicksand

Dalam tutorial ini kita akan membuat sebuah portofolio HTML5 yang indah didukung oleh jQuery dan plugin Quicksand. Anda dapat menggunakannya untuk memamerkan karya terbaru Anda dan sepenuhnya disesuaikan, sehingga Anda bisa memperluas berpotensi untuk melakukan lebih banyak.

HTML

Langkah pertama adalah menuliskan markup dari sebuah dokumen HTML5 baru. Pada bagian kepala, kami akan menyertakan stylesheet untuk halaman. Perpustakaan jQuery, plugin Quicksand dan script.js kami akan pergi tepat sebelum tag penutup tubuh:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>Making a Beautiful HTML5 Portfolio | Tutorialzine Demo</title>

<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />

<!-- Enabling HTML5 tags for older IE browsers -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<header>
<h1>My Portfolio</h1>
</header>

<nav id="filter">
<!-- The menu items will go here (generated by jQuery) -->
</nav>

<section id="container">
<ul id="stage">
<!-- Your portfolio items go here -->
</ul>
</section>

<footer>
</footer>

<!-- Including jQuery, the Quicksand plugin, and our own script.js -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="assets/js/jquery.quicksand.js"></script>
<script src="assets/js/script.js"></script>

</body>
</html>

Di dalam tubuh, ada sejumlah elemen HTML5 baru. Header memegang pos h1 kami (yang bergaya sebagai logo), elemen bagian memegang daftar unordered dengan item portofolio (daftar lebih ditambahkan oleh jQuery, karena Anda akan lihat nanti), dan elemen nav, ditata sebagai hijau bar, bertindak sebagai filter konten.

Tahap # daftar unordered item memegang portfolio kami. Anda dapat melihat apa barang-barang ini akan terlihat seperti di bawah ini. Masing-masing memiliki atribut HTML5 data, yang mendefinisikan serangkaian dipisahkan dengan koma tag. Kemudian, ketika kita menggunakan jQuery untuk loop melalui daftar ini, kita akan merekam tag dan membuat kategori yang bisa dipilih dari bar hijau.

<li data-tags="Print Design">
<img src="assets/img/shots/1.jpg" />
</li>

<li data-tags="Logo Design,Print Design">
<img src="assets/img/shots/2.jpg" />
</li>

<li data-tags="Web Design,Logo Design">
<img src="assets/img/shots/3.jpg" />
</li>

Anda dapat menaruh apa pun yang Anda inginkan dalam item li dan menyesuaikan portofolio lebih lanjut. Plugin Quicksand akan menangani transisi animasi daftar ini, jadi anda bebas untuk bereksperimen.

HTML5 indah Portofolio dengan jQuery

HTML5 indah Portofolio dengan jQuery


jQuery

Apa plugin Quicksand tidak, adalah membandingkan dua daftar unordered item, menemukan LIS cocok di dalamnya, dan menghidupkan mereka ke posisi baru mereka. Script jQuery kita akan menulis bagian ini, akan loop melalui item portofolio dalam daftar tahap #, dan membuat daftar (tersembunyi) baru unordered untuk setiap tag yang ditemukan. Ini juga akan membuat pilihan menu baru, yang akan memicu transisi pasir apung antara dua daftar.

Pertama kita perlu untuk mendengarkan acara siap (titik awal dalam pemuatan halaman di mana kita dapat mengakses DOM), dan loop melalui semua item li mendeteksi tag terkait.

script.js – Part 1

$(document).ready(function(){

var items = $('#stage li'),
itemsByTags = {};

// Looping though all the li items:

items.each(function(i){
var elem = $(this),
tags = elem.data('tags').split(',');

// Adding a data-id attribute. Required by the Quicksand plugin:
elem.attr('data-id',i);

$.each(tags,function(key,value){

// Removing extra whitespace:
value = $.trim(value);

if(!(value in itemsByTags)){
// Create an empty array to hold this item:
itemsByTags[value] = [];
}

// Each item is added to one array per tag:
itemsByTags[value].push(elem);
});

});

Setiap tag ditambahkan ke objek itemsByTags sebagai array. Ini berarti bahwa itemsByTags ['Desain Web'] akan mengadakan sebuah array dengan semua item yang memiliki Web Design sebagai salah satu tag mereka. Kami akan menggunakan objek ini untuk membuat daftar unordered, tersembunyi di halaman untuk pasir hisap.

Ini akan menjadi yang terbaik untuk menciptakan sebuah fungsi pembantu yang akan menanganinya untuk kita:

script.js – Part 2

function createList(text,items){

// This is a helper function that takes the
// text of a menu button and array of li items

// Creating an empty unordered list:
var ul = $('<ul>',{'class':'hidden'});

$.each(items,function(){
// Creating a copy of each li item
// and adding it to the list:

$(this).clone().appendTo(ul);
});

ul.appendTo('#container');

// Creating a menu item. The unordered list is added
// as a data parameter (available via .data('list')):

var a = $('<a>',{
html: text,
href:'#',
data: {list:ul}
}).appendTo('#filter');
}

Fungsi ini mengambil nama dari grup dan sebuah array dengan item LI sebagai parameter. Kemudian klon item ini ke UL baru dan menambahkan link di bar hijau.

Sekarang kita harus loop melalui semua kelompok dan memanggil fungsi di atas, dan juga mendengarkan untuk klik pada item menu.

script.js – Part 3

// Creating the "Everything" option in the menu:
createList('Everything',items);

// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
createList(k,v);
});

$('#filter a').live('click',function(e){
var link = $(this);

link.addClass('active').siblings().removeClass('active');

// Using the Quicksand plugin to animate the li items.
// It uses data('list') defined by our createList function:

$('#stage').quicksand(link.data('list').find('li'));
e.preventDefault();
});

// Selecting the first menu item by default:
$('#filter a:first').click();

Bagus! Sekarang kita memiliki segalanya di tempat kita bisa melanjutkan ke gaya halaman.

CSS

Styling halaman itu sendiri tidak yang menarik (Anda dapat melihat CSS untuk ini dalam aset / css / styles.css). Namun apa yang lebih menarik adalah bar berwarna hijau (atau bar # filter), yang menggunakan: sebelum /: setelah elemen pseudo untuk menambahkan sudut menarik di sisi bar. Seperti diposisikan benar-benar, mereka juga tumbuh bersama dengan bar.

styles.css

#filter {
background: url("../img/bar.png") repeat-x 0 -94px;
display: block;
height: 39px;
margin: 55px auto;
position: relative;
width: 600px;
text-align:center;

-moz-box-shadow:0 4px 4px #000;
-webkit-box-shadow:0 4px 4px #000;
box-shadow:0 4px 4px #000;
}

#filter:before, #filter:after {
background: url("../img/bar.png") no-repeat;
height: 43px;
position: absolute;
top: 0;
width: 78px;
content: '';

-moz-box-shadow:0 2px 0 rgba(0,0,0,0.4);
-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4);
box-shadow:0 2px 0 rgba(0,0,0,0.4);
}

#filter:before {
background-position: 0 -47px;
left: -78px;
}

#filter:after {
background-position: 0 0;
right: -78px;
}

#filter a{
color: #FFFFFF;
display: inline-block;
height: 39px;
line-height: 37px;
padding: 0 15px;
text-shadow:1px 1px 1px #315218;
}

#filter a:hover{
text-decoration:none;
}

#filter a.active{
background: url("../img/bar.png") repeat-x 0 -138px;
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2),
-1px 0 0 rgba(255, 255, 255, 0.2),
1px 0 1px rgba(0,0,0,0.2) inset,
-1px 0 1px rgba(0,0,0,0.2) inset;
}

Dengan portofolio kami yang indah, tutorial HTML5 ini telah lengkap!

Kesimpulan

Anda dapat menggunakan template ini untuk mempresentasikan hasil kerja Anda. Hal terbaik tentang itu adalah bahwa itu benar-benar mudah untuk menyesuaikan. Anda hanya perlu mengubah isi dari item LI awal daftar stage #, dan menentukan beberapa tag baru - script akan melakukan sisanya. Jika pengunjung tidak memiliki JavaScript diaktifkan, mereka masih akan melihat semua portofolio Anda item, yang juga baik untuk tujuan SEO.

Download kodenya :Download - Membuat Portofolio HTML5 dengan jQuery dan plugin Quicksand

Contoh lihat disini :Demo - Membuat Portofolio HTML5 dengan jQuery dan plugin Quicksand

Read more

Membuat Menu CSS3 Animasi

Dalam tutorial singkat ini, kita akan menggunakan kekuatan CSS3 efek dan transisi, untuk membangun menu JavaScript navigasi gratis animasi yang dapat Anda gunakan untuk menambahkan melihat dipoles ke website Anda atau template. Kami akan menggunakan beberapa fitur rapi seperti: sasaran semu pemilih dan: setelah unsur-unsur.

HTML

Langkah pertama adalah mendefinisikan tulang punggung HTML website. Kami menggunakan tag HTML5 luas, jadi kita akan perlu untuk memasukkan script HTML5 memungkinkan untuk IE di bagian kepala dari dokumen. Seperti terlampir dalam komentar bersyarat, itu hanya akan diminta dalam browser IE dan tidak akan mempengaruhi kinerja yang lain:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>

<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />

<!-- Including the Lobster font from Google's Font Directory -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />

<!-- Enabling HTML5 support for Internet Explorer -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<header>
<h1>CSS3 Animated Navigation Menu</h1>
<h2>&laquo; Read and download on Tutorialzine</h2>
</header>

<nav>
<ul class="fancyNav">
<li id="home"><a href="#home" class="homeIcon">Home</a></li>
<li id="news"><a href="#news">News</a></li>
<li id="about"><a href="#about">About us</a></li>
<li id="services"><a href="#services">Services</a></li>
<li id="contact"><a href="#contact">Contact us</a></li>
</ul>
</nav>

<footer>Looks best in Firefox 4, usable everywhere.</footer>

</body>
</html>

Anda dapat melihat bahwa kita termasuk stylesheet dari Google API. Ini berisi deklarasi @ font-face dan termasuk font Lobster ke halaman kami, dari direktori Font Web Google, yang telah berkembang untuk menyertakan lebih dari 100 font sumber terbuka yang indah, murah hati host oleh Google.

Dalam tubuh dokumen, kita memiliki header, nav dan tag HTML5 footer, yang membagi halaman ke tiga bagian dengan nilai semantik. Kami akan berkonsentrasi pada elemen UL di dalam tag nav. Ini adalah menu navigasi kita.

Daftar unordered memiliki kelas fancyNav diterapkan untuk itu, yang kita akan menggunakan untuk membatasi efek dari gaya CSS yang kita akan menulis dalam sekejap. Ini akan membuat kode lebih portabel dan membatasi efek samping yang mungkin. Satu hal yang perlu tunjukkan adalah bahwa setiap elemen LI memiliki ID yang unik, terkait dengan dari elemen jangkar di dalamnya. Hal ini akan memungkinkan kita untuk menggunakan: target pseudo-class untuk gaya item menu yang dipilih saat ini.

Jadi mari kita beralih ke CSS style.

CSS

Anda mungkin merasa heran bahwa menu navigasi kita sedang membangun tidak menggunakan gambar (kecuali untuk ikon rumah - png transparan). Semuanya dilakukan dengan CSS3 gradien, bayangan kotak, dan latar belakang beberapa.

Sedangkan untuk mendukung browser, menu bekerja pada versi terbaru dari Firefox, Chrome, Safari dan Opera, sementara itu masih dapat digunakan dalam setiap versi IE dari 7 dan seterusnya. Namun, tidak melihat yang terbaik di Firefox 4, karena mendukung menjiwai: sebelum dan: setelah unsur-unsur semu melalui properti transisi (browser lain diharapkan untuk mengikuti suite).

Kami CSS gaya didefinisikan dalam aset / styles.css. Saya akan menyarankan agar Anda mendownload kode menu dari tombol atas, dan membuka file tersebut dalam editor teks. Kami akan memfokuskan terutama pada menu navigasi, jadi saya akan melewatkan bagian membosankan dari file.

Mari kita mulai styling menu navigasi! Kami pertama menulis aturan untuk daftar unordered - ditargetkan dengan kelas fancyNav, dan item li:

.fancyNav{
/* Affects the UL element */
overflow: hidden;
display: inline-block;

border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;

box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
-webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.fancyNav li{
/* Specifying a fallback color and we define CSS3 gradients for the major browsers: */

background-color: #f0f0f0;
background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);

border-right: 1px solid rgba(9, 9, 9, 0.125);

/* Adding a 1px inset highlight for a more polished efect: */

box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

position:relative;

float: left;
list-style: none;
}

Perhatikan daftar besar CSS3 syntaxes gradien. Semua terakhir versi dari Firefox, Chrome dan Safari dukungan gradien. Dengan Opera dan IE 10 (saat ini dalam modus pratinjau platform), juga bergabung dengan versi terbaru mereka. Awalnya ada dua syntaxes bersaing, didukung oleh Mozilla (Firefox) di satu sisi dan WebKit (Chrome dan Safari) di sisi lain, namun sintaks gradien Firefox telah disepakati sebagai standar industri.

Langkah selanjutnya adalah dengan menggunakan: setelah elemen pseudo untuk menciptakan bayangan gelap, ditampilkan ketika Anda membawa lebih dari satu item menu:

.fancyNav li:after{

/* This creates a pseudo element inslide each LI */

content:'.';
text-indent:-9999px;
overflow:hidden;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:1;
opacity:0;

/* Gradients! */

background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */

box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

/* This will create a smooth transition for the opacity property */

-moz-transition:0.25s all;
-webkit-transition:0.25s all;
-o-transition:0.25s all;
transition:0.25s all;
}

: Setelah deklarasi menciptakan elemen styleable nyata. Ia memiliki gradien horisontal halus yang menggelapkan item menu ketika melayang di atas. Seperti yang terlihat secara default (opacity diatur ke 0), kita menggunakan CSS3 transisi ke bernyawa itu antara opacity nol dan penuh, dipicu di hover. Sayangnya hanya Firefox mendukung menjiwai elemen semu saat ini, tapi browser lain diharapkan untuk segera memperkenalkan fitur ini.

Selanjutnya kita akan menggunakan: pertama-anak dan: terakhir-anak penyeleksi pseudo untuk target item menu pertama dan terakhir.

/* Treating the first LI and li:after elements separately */

.fancyNav li:first-child{
border-radius: 4px 0 0 4px;
}

.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;

border-radius:4px 0 0 4px;
}

.fancyNav li:last-child{
border-radius: 0 4px 4px 0;
}

/* Treating the last LI and li:after elements separately */

.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

border-radius:0 4px 4px 0;
}

.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
/* This property triggers the CSS3 transition */
opacity:1;
}

Menerapkan gaya yang berbeda untuk item pertama dan terakhir sangat diperlukan, karena kita tidak ingin menampilkan perbatasan jelek yang menjangkau luar menu. Kami juga putaran sudut-sudut yang tepat dari unsur-unsur.

Catatan: Anda dapat menambahkan class = "dipilih" untuk item daftar dalam urutan untuk membuatnya dipilih / aktif secara default. Hal ini berguna ketika membangun template atau menghasilkan menu dengan bahasa server-side.

Setelah ini kita perlu menerapkan memperbaiki ke menu. Ini adalah untuk menyembunyikan elemen yang dipilih saat ini ketika kita hover pada menu lagi:

.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
/* Hides the targeted li when we are hovering on the UL */
opacity:0;
}

.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
opacity:1 !important;
}

Dan terakhir semua yang tersisa adalah untuk gaya elemen jangkar yang berada di LI.

/* Styling the anchor elements */

.fancyNav li a{
color: #5d5d5d;
display: inline-block;
font: 20px/1 Lobster,Arial,sans-serif;
padding: 12px 35px 14px;
position: relative;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
z-index:2;
text-decoration:none !important;
white-space:nowrap;
}

.fancyNav a.homeIcon{
background:url('../img/home.png') no-repeat center center;
display: block;
overflow: hidden;
padding-left: 12px;
padding-right: 12px;
text-indent: -9999px;
width: 16px;
}

Dengan menu ini animasi kita CSS3 lengkap!

Read more

Dasar Bahasa HTML - Bagian 2

Dalam bagian ini, kita akan membahasa mengenai HTML Dasar yang sering dipakai dalam tag sebuah wesite atau blog. Disini hanya akan membahas pengenalan, Jangan khawatir, jika contoh menggunakan tag yang belum anda pelajari disini. Namun Anda akan belajar tentang tag penting lainnya pada bagian-bagian berikutnya.

HTML Pos / HTML Heading ( Judul )

Pos HTML didefinisikan dengan tag <h1> hingga <h6>.
Contoh
<h1> Ini adalah </ h1> pos
<h2> Ini adalah </ h2> pos
<h3> Ini adalah </ h3> pos

Urutan h1 biasanya ukuran dan ketebalan huruf lebih besar dari tag h nerikutnya. Jadi semakin besar nilai h maka ukuran hurufnya lebih kecil.

Coba sendiri »

HTML Paragraf

Paragraf HTML didefinisikan dengan tag <p>.
Contoh
<p> Ini adalah paragraf. </ p>
<p> Ini adalah paragraf lain. </ p>

Paragaraf memiliki nilai lebih dari satu spasi. Jika anda tekan Enter diantara tag <p> dan </ p> , maka akan lebih dari satu spasi.
Coba sendiri »

HTML Link

Link HTML didefinisikan dengan tag <a>.
Contoh

<a href="http://www.w3schools.com"> Ini adalah link </ a>

Coba sendiri »

Catatan: Alamat link ditetapkan dalam atribut href.
(Anda akan belajar tentang atribut pada bab selanjutnya dari tutorial ini).

HTML Images / Gambar

Gambar HTML didefinisikan dengan tag <img>.
Contoh

<img src="nettercode.blogspot.com.jpg" width="104" height="142" />

Coba sendiri >>

Read more

Pengenalan Bahasa HTML - Bagian 1

Apa itu HTML?

HTML adalah bahasa untuk mendeskripsikan halaman web.

* HTML singkatan dari Hyper Text Markup Language
* HTML bukan bahasa pemrograman, ini adalah bahasa markup
* Sebuah bahasa markup adalah serangkaian tag markup

* HTML menggunakan tag markup untuk menjelaskan halaman web

Tag HTML

tag markup HTML biasanya disebut tag HTML

* HTML tag kata kunci yang dikelilingi oleh tanda kurung siku seperti <html>
* Tag HTML biasanya datang dalam pasangan seperti <b> dan </ b>
* Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir
* Dimulainya dan diakhirinya tag juga disebut tag pembuka dan tag penutup

Dokumen HTML = Halaman Web

* dokumen HTML mendeskripsikan sebuah halaman web
* Dokumen HTML berisi tag HTML dan teks biasa
* HTML dokumen juga disebut halaman web

Tujuan dari sebuah web browser (seperti Internet Explorer atau Firefox) adalah untuk membaca dokumen HTML dan menampilkan mereka sebagai halaman web. Browser tidak menampilkan tag HTML, tapi menggunakan tag untuk menafsirkan isi halaman, Lihat contoh dibawah ini :

<html>
<body>

<h1> Pos Pertama Saya </ h1>

<p> paragraf pertama saya. </ p>

</ Body>
</ Html>

Penjelasan dari Contoh diatas :

* Teks antara <html> dan </ html> menggambarkan halaman web
* Teks antara <body> dan </ body&gt; adalah isi halaman yang terlihat
* Teks antara <h1> dan </ h1> ditampilkan sebagai pos
* Teks antara <p> dan </ p> ditampilkan sebagai sebuah paragraf

Untuk melihat contoh penerapannya silahkan lihat disini : Tryit Editor V 1.4

Read more