Internet Tutorial
Dalam tutorial CSS ini saya tidak akan mampu menunjukkan kepada Anda semua yang ada tentang CSS, tapi Anda akan belajar cara membuat CSS nice looking gaya halaman web.
Setelah menyelesaikan tutorial ini, Anda harus memiliki informasi yang cukup untuk mengeksplorasi CSS dan desain web lebih jauh.
* Anda dapat men-download file CSS dan HTML kita membangun dalam tutorial ini:
CSS file
CSS mengurangi jumlah tag yang digunakan
Karena kekuatan CSS, kita akan mampu mengurangi jumlah tag HTML yang kita gunakan pada sebuah halaman besar waktu, sementara masih mampu mencari besar tata letak halaman menggunakan hanya 6 jenis (karena kurangnya kata-kata yang lebih baik) dari HTML tag.
Tag akan kita gunakan untuk tata letak isi:
- <h> Para tag yang berkisar dari '<h1> </ h1>' ke '<h6> </ h6> ', yang akan digunakan untuk menandai / tag judul di halaman kami. Jadi pos yang paling penting akan dibungkus dalam <h1> tag dan yang paling penting dalam sebuah <h6> tag.
Contoh sebuah pos:
<h1><strong>CSS Template Layout</strong></h1>
aas
Semua browser memiliki ukuran standar (untuk setiap
<h> tag) mengenai bagaimana menjadikan teks ketika ditempatkan di antara tag ini. Banyak default ini dapat dapat digunakan (terutama <h1>) karena mereka keluar terlalu besar. Tetapi tidak pernah takut, CSS ada di sini. Kita akan menggunakan CSS untuk membuat ukuran teks lebih menyukai kita.
- <p> Ayat tag digunakan untuk menandai bagian halaman sebagai 'paragraf', cukup sederhana. Ayat tag adalah apa yang mereka sebut "elemen blok '; yang berarti bahwa itu bertindak seperti sebuah blok di mana ruang secara otomatis dimasukkan sebelum dan sesudah tag setiap <p> pasangan. Anda melihatnya bekerja di contoh muncul.
- <ul> dan <ol> Daftar tag akan digunakan untuk menciptakan menu kami. Tag <ul> adalah 'un-ordered list tag' yang menciptakan sebuah daftar dengan peluru atau gambar lain / ikon yang tidak menentukan atau menunjukkan perintah; maka istilah 'un-perintah'. Daftar tag yang lain disebutkan (<ol>) adalah 'daftar memerintahkan tag' dan ia menciptakan sebuah daftar yang, bukannya peluru, elemen daftar ditandai dengan angka atau huruf. Kode contoh untuk diikuti.
- <div> Kita semua tahu apa yang <div> tag adalah karena kita semua membaca artikel sebelumnya, kan? Kita akan menggunakan div's untuk menciptakan wadah untuk bagian halaman kami. Satu span akan digunakan untuk 'menahan' menu navigasi kita dan div lain untuk 'ditahan' halaman utama.
- <a href> tag yang paling penting dalam HTML: the 'link tag' atau 'hyperlink tag'. Hal ini membuat teks 'hiper' sehingga ketika kita klik, kita dapat menampilkan halaman lain atau mengaktifkan / memanggil beberapa JavaScript (atau dikenal sebagai ECMA script).
- <img> Ini adalah 'tag gambar', memungkinkan Anda untuk link ke gambar sehingga mereka muncul di halaman kami. Dalam gambar HTML tidak dimasukkan ke halaman yang sebenarnya, bukan gambar tag (<img>) hanya poin ke tempat gambar dan browser akan mencoba untuk memuat gambar itu ketika seorang peselancar masuk ke halaman HTML Anda.
Hal yang harus diingat tentang CSS:
Ingat bahwa kode CSS hanyalah instruksi tertulis yang memberitahukan web browser (seperti FireFox dan Internet Explorer) bagaimana menampilkan sesuatu di halaman. Contoh:
* Membuat teks tebal.
* Posisi hal halaman.
* Mengatur gaya font untuk halaman atau paragraf dll
Saudara bahasa untuk CSS adalah HTML: kode yang memberitahukan browser Web APA sebenarnya di halaman.
... Saya yakin anda sudah Paham, saya hanya ingin mengingatkan Anda!
Silahkan Kunjungi Web
Designers Handbook Killer halaman utama dan mengambil contoh halaman HTML untuk praktek bahwa kita akan digunakan sebagai template untuk memulai tutorial ini. Anda dapat menemukannya di bawah judul: 'Untuk membuat halaman HTML praktek lakukan hal berikut:' Ikuti petunjuk di sana dan membuat halaman HTML dasar Anda.
Setelah Anda membuat halaman template, membuat folder dan nama itu sesuatu seperti: 'myCSSwebsite' dan kemudian menjatuhkan halaman HTML ke dalamnya. Dalam folder yang sama, membuat sebuah dokumen teks baru dan menyebutnya: 'myCSS.css'. Begitu dibuat, buka file tersebut dan paste kode CSS template ini dan kemudian menyimpannya:
/* Generic Selectors */
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #333333;
background-color: #F9F9F9;
}
p {
width: 80%;
}
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #000000;
border-bottom: 1px solid #C6EC8C;
}
/**************** Pseudo classes ****************/
a:link {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li :link {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li a:visited {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
text-decoration: underline;
}
li a:hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}
a:active {
color: rgb(255, 0, 102);
font-weight: bold;
}
/************************* ID's *************************/
#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 50px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
Jangan biarkan CSS freak Anda keluar, saya akan menjelaskan rincian penting dan Anda akan segera melihat betapa mudahnya sebenarnya. Satu hal untuk Anda lakukan sebelum aku menyelesaikan bagian ini tutorial, kita perlu menambahkan beberapa kode untuk halaman HTML kita.
Di antara
<body> </ body> tag Anda akan perlu untuk memasukkan kode ini:
<div id="navigation">
<h2>The Main navigation</h2>
</div>
<div id="centerDoc">
<h1>The Main Heading</h1>
Go to the Web Designers Killer Handbook home page and grab the
practice HTML page that we will used as the starting template for this
tutorial. You can find it under the heading: 'To create the practice HTML
page do the following:'.
Follow the instructions there and create your basic HTML page
... and do it now!</div>
And in between the <head> </head> tags you will need to insert this:
<title>First CSS Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="myCSS.css" rel="stylesheet" type="text/css">
Selamat Belajar, Jika berkenan masi kita share di kotak komentar
