CSS Tutorial - The Basics

maximillianw

Ini bukan rahasia besar bahwa HTML bukan mimpi desainer menjadi kenyataan. Namun, CSS (Cascading Style Sheets), menyediakan sarana yang lebih baik untuk mengendalikan desain halaman Web.

CSS dapat diatur di tiga tempat berbeda:

1. Dalam kepala dokumen. Ini disebut tertanam.
2. Dalam tag HTML dalam tubuh dokumen Anda. Nama ini inline.
3. Dalam sebuah dokumen eksternal yang kemudian dihubungkan atau diimpor ke dokumen HTML Anda. Ini disebut eksternal.

Ada satu hal penting untuk dipertimbangkan. CSS didukung oleh IE3,, IE4 dan NS4 (tetapi tidak mendukung semua kemampuan CSS). Juga, setiap kali menggunakan embedded CSS pastikan Anda "menyembunyikan" kode dari browser lama:

PHP Code:


			
<HEAD> <STYLE TYPE="text/css">
<!--
CSS goes here ...
-->
</STYLE>
</HEAD>

Semua tutorial dan tips mengenai CSS akan menggunakan ini "bersembunyi". OK, mari kita pergi ke beberapa contoh:

CSS Fonts

Dengan CSS anda tidak perlu membatasi diri ke huruf kecil tersedia dengan HTML. Anda dapat membuat efek dramatis untuk judul atau teks lainnya menggunakan huruf besar yang akan men-download secepat teks lain. Misalnya, membuat header besar menggunakan kode berikut (didukung oleh IE3, IE4 +, dan NS4 +):

PHP Code:


			
<HEAD> <STYLE TYPE="text/css">
<!--
H1 {font-size: 56pt;}
-->
</STYLE>
</HEAD>

Anda dapat mengubah nomor 56pt ke nomor apapun, tetapi cobalah untuk tinggal di bawah 500pt. Kemudian, dalam tubuh dokumen Anda, masukkan teks besar yang diinginkan antara <H1> dan </ H1> tag.

Example: BIG

Anda juga dapat mewakili teks Anda dalam proporsi ukuran teks sekitarnya. Contoh kode (bekerja dengan IE3 + dan NS4 +):

PHP Code:


			
<HEAD> <STYLE TYPE="text/css">
<!--
H1 {font-size: 125%;}
-->
</STYLE>
</HEAD>

Sekali lagi, mengubah 125% untuk apapun yang Anda suka.

Terkait:

JUAL barbie basics collector

maximillianw

Formulir metode membuat halaman interaktif di mana pembaca dapat menjawab pertanyaan dan mengirim tanggapan mereka terhadap Anda. Form adalah topik yang sangat kompleks, dan tidak dapat sepenuhnya tercakup dalam satu periode kecil, jadi ini hanya akan menjadi pengantar yang sangat dasar.

Pada awal area formulir, Anda harus menyatakan bahwa Anda membuat formulir, dan memberikan beberapa informasi ke browser tentang apa yang harus dilakukan dengan itu. Hal ini dilakukan dalam tag form, melalui dua parameter yang diperlukan, tindakan dan metode.

Untuk menciptakan suatu bentuk yang menggunakan tindakan mailto:

<form method="post" action="mailto:[email protected]" name="My Form" enctype="text/plain">

Parameter tindakan menentukan di mana hasil dari form akan dikirim, dan parameter metode menentukan bagaimana informasi yang akan dikirim ke sana. Pada akhir formulir, Anda harus menutup tag form (</ form>).

Di dalam Formulir

Di dalam formulir, Anda dapat menentukan jenis kode HTML Anda inginkan, tetapi satu-satunya yang akan menjadi penting untuk form adalah jenis input dan mengirimkan tag. Parameter nama adalah judul yang muncul pada form dan membantu untuk mengatur data dalam.

Berikut ini adalah jenis input yang berbeda:

* Radio - klik pilihan yang tepat tombol
* Kotak centang
* Nama - memberikan sebuah kotak satu baris untuk memasukkan informasi
* Tersembunyi - informasi penting yang tidak terlihat pada layar

Sebuah contoh dari kotak radio dan kotak centang:

Apakah Anda seperti contoh ini? Ya Tidak
Apakah Anda memahami sejauh ini? Ya Tidak

Pengkodean yang menciptakan bentuk radio di atas:
<input type="radio" value="Yes" name="Do Anda ingin this?"> Ya
<input type="radio" value="No" name="Do Anda ingin this?"> Tidak

Pengkodean yang menciptakan bentuk kotak centang di atas:
<input type="checkbox" value="Yes" name="Do Anda understand?"> Ya
<input type="checkbox" value="No" name="Do Anda understand?"> Tidak

Sebuah contoh dari masukan nama:

Nama Anda:

Pengkodean yang menciptakan kosong nama entri di atas:

<input name="First Name" size="16">

35 adalah lebar dari kotak masukan dibuat.

Contoh input textarea:

Komentar Anda:

Pengkodean yang menciptakan kotak textarea masukan di atas:
Komentar Anda: <textarea name="Your Comments" rows="5" cols="20">
</ Textarea>

Kotak 5 baris atas ke bawah, 20 kolom kiri ke kanan. Perhatikan bahwa textarea harus ditutup setelah itu.

Contoh teks tersembunyi:
<input type="hidden" name="subject" value="My Formulir Calling">

Ini diperlukan untuk mengirimkan formulir tersebut ke penerima yang benar dengan subjek pos yang sesuai untuk memudahkan identifikasi.

Pilih - memberikan Anda daftar menu untuk memilih dari. Contoh:

Kesan keseluruhan Anda dari tutorial ini adalah:

Pengkodean yang menciptakan pilihan menu diatas:
<select name="Impression dari Tutorial">
<option value="Very Useful"> Sangat Berguna </ option>
<option value="Somewhat Useful"> Berguna Agak </ option>
<option Expectations"> value="Below bawah Harapan </ option>
<option value="You Benar-benar jangan Ingin Know">
Anda Benar-benar Tidak Ingin Tahu
</ Option>
</ Select>

Perhatikan bahwa tag opsi ditutup pada akhir dari setiap pilihan, dan tag pilih ditutup pada akhir dari semua pilihan. Parameter nilai adalah teks dicetak dalam pilihan menu.

Tombol submit - digunakan untuk mengirim informasi ke mana pun pergi. Tombol reset membersihkan semua data yang dimasukkan.

maximillianw

Sayangnya, ada banyak orang-orang jahat yang mengirim spam oleh ratusan ribu setiap hari. Nah, inilah salah satu cara untuk serius mengurangi spam.

Spammer sisir sumber halaman HTML dengan robot mencari alamat yang terlihat seperti [email protected] (berharap mereka mencoba mengirim untuk yang satu!), Dan mereka tidak akan mampu berbuat banyak dengan alamat dikodekan menggunakan java script berikut kecuali jika mereka kunjungi setiap halaman web dengan tangan (yang akan menjadi hukuman yang ideal untuk spammer ...).

Bahkan jika Anda bukan seorang programmer, Anda harus mampu menangani satu ini. Pada dasarnya, kode menjaga mailto:, nama Anda, dan domain Anda terpisah dalam file HTML, menggabungkan mereka hanya ketika halaman tersebut diakses. Ini bahkan akan bekerja dengan FrontPage:

<script language=javascript>
<! -
/ / Oleh Joseph McLean <[email protected]>
var linktext = "Spider Web";
var email1 = "webmaster";
var email2 = "freewebmastertips.com";

document.write ("<a href=" + "mail" + "to:" + email1 + "@" + email2 + ">" +
linktext + "</ a>")
//-->
</ script>

Untuk menyesuaikan, ganti "Spider Web" dengan teks yang Anda ingin orang untuk mengklik. Juga, berikut email1 webmaster ganti dengan nama Anda (jika e-mail Anda [email protected], menempatkan john sana). Akhirnya, berikut email2 ganti freewebmastertips.com dengan sisa alamat Anda.

Menerapkan kode ini dan menyingkirkan banyak spam!

maximillianw

Sama seperti musim semi membersihkan rumah, kode html halaman web Anda harus mendapatkan pembersihan berkala juga. Seiring waktu, karena perubahan dan update dibuat ke halaman web, kode dapat menjadi penuh dengan kekacauan yang tidak perlu, memperlambat waktu buka halaman dan menyakiti efisiensi halaman web Anda. Html berantakan juga dapat berdampak serius peringkat mesin pencari Anda.

Hal ini benar terutama jika Anda menggunakan WYSIWYG (Apa yang Anda Lihat adalah Apa yang Anda Dapatkan) paket web desain seperti FrontPage atau Dreamweaver. Program ini akan mempercepat pembuatan situs web Anda, tetapi mereka tidak efisien menulis kode html yang bersih.

Kami akan memfokuskan pembahasan ini pada coding html yang sebenarnya, mengabaikan bahasa pemrograman lain yang dapat digunakan dalam halaman seperti Java-Script.

Sampai baru-baru ketika coding halaman dalam HTML kita akan menggunakan tag seperti tag dan tag <p> <font> ayat. Antara tag ini akan menjadi halaman konten kami, teks, gambar dan link. Setiap kali perubahan format dibuat pada tag baru halaman yang diperlukan dengan format lengkap untuk bagian baru. Baru-baru ini kita telah mendapatkan kemampuan untuk menggunakan Cascading Style Sheets, memungkinkan kita untuk menulis format sekali dan kemudian lihat bahwa beberapa kali format dalam halaman web.

Dalam rangka untuk mempercepat waktu loading halaman kita perlu memiliki karakter yang lebih sedikit pada halaman bila dilihat di editor html. Karena kita benar-benar tidak ingin menghapus konten yang terlihat, kita perlu untuk melihat ke kode html. Dengan membersihkan kode ini kita bisa menghapus karakter, sehingga membuat halaman web yang lebih kecil yang akan memuat lebih cepat.

Seiring waktu HTML telah berubah dan sekarang kami memiliki banyak cara untuk melakukan hal yang sama. Sebuah contoh akan menjadi kode yang digunakan untuk menampilkan wajah huruf tebal. Dalam HTML kita memiliki dua pilihan utama, tag <strong> dan tag <b>. Seperti Anda dapat melihat tag <strong> menggunakan 5 karakter lebih dari tag <b>, dan jika kita mempertimbangkan tag penutup juga kita melihat bahwa menggunakan <strong> </ strong> pasangan tag menggunakan 10 karakter lebih dari bersih <b> </ b> pasangan tag.

Ini adalah Prinsip Pertama kami kode HTML yang bersih:
Gunakan metode pengkodean yang paling sederhana tersedia

PHP Code:


			
<font face="times">This</font>

<font face="times"> <strong> BOLD </ strong> </ font>

<font face="times"> Firman </ font> ini memakan waktu sampai 90 karakter.

Hal ini sangat buruk ditulis html dan kadang-kadang adalah apa yang Anda akan dapatkan ketika menggunakan editor WYSIWYG. Sejak tag <font> mengulangi informasi yang sama kita hanya dapat sarang tag <strong> dalam tag <font>, dan lebih baik lagi menggunakan tag <b> bukan tag <strong>. Ini akan memberi kami face="times> kode <font ini <b> bold </ b> Firman </ font>, mengambil hanya 46 karakter.

Prinsip Kedua ini kami kode HTML yang bersih:
Gunakan tag nested bila memungkinkan.

Sadarilah bahwa editor WYSIWYG sering akan memperbarui format dengan menambahkan lapisan setelah lapisan kode bersarang. Jadi, sementara Anda membersihkan tampilan kode kode untuk ditempatkan di sana bersarang berlebihan oleh program WYSIWYG editing Anda.

Sebuah masalah besar dengan menggunakan tag HTML adalah bahwa kita perlu untuk mengulang tag coding setiap kali kita mengubah format. Munculnya CSS memungkinkan kita keuntungan besar dalam bersih coding dengan memungkinkan kita untuk tata letak format sekali dalam dokumen, maka cukup lihat berulang lagi.

Jika kita memiliki enam paragraf di halaman yang beralih di antara dua jenis format, seperti judul dalam Blue, Bold, Ariel, ukuran 4 dan teks paragraf di Black, Times, ukuran 2, menggunakan tag kita harus memformat daftar yang lengkap setiap kali kita membuat perubahan.

PHP Code:


			
<font face="Ariel" color="blue" size="4"><b>Our heading</b></font>

<font face="Times color="black" size="2">Our paragraph</font>
<font face="Ariel" color="blue" size="4"><b>Our next heading</b></font>
<font face="Times color="black" size="2">Our next paragraph</font>

Kami kemudian akan mengulangi ini untuk setiap pos dan ayat, banyak kode html.

Dengan CSS kita bisa membuat CSS Styles untuk setiap jenis format, daftar Styles sekali dalam Header halaman, dan kemudian hanya merujuk Gaya setiap kali kita membuat perubahan.

HTML Code:

<head>

style type="text/css">

<!--

.style1 {

font-family: Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 24px;

}

. style2 {

font-family: "Times New Roman", Times, serif;

font-size: 12px;

}

->

</ style>

</ head>

<body>

<p class="style1"> Heading </ p>

<p class="style2"> Teks Ayat </ p>

</ body>

Perhatikan bahwa Styles dibuat di bagian Kepala halaman dan kemudian hanya disebutkan dalam bagian Tubuh. Ketika kita menambahkan format yang lebih kita hanya akan terus mengacu pada Styles dibuat sebelumnya.

Ini adalah Prinsip Ketiga kita Kode HTML Bersih:
Gunakan CSS style bila memungkinkan.

CSS memiliki beberapa manfaat lainnya, seperti mampu menempatkan gaya CSS di file eksternal, sehingga mengurangi ukuran halaman bahkan lebih, dan kemampuan untuk dengan cepat memperbarui situs-format lebar dengan hanya memperbarui file CSS Style eksternal.

Jadi dengan beberapa pembersih sederhana kode HTML Anda dapat dengan mudah mengurangi ukuran file dan membuat loading cepat, ramping dan berarti halaman web.

Menu