Lesson 5: CSS Tutorial

CSS Tutorial: Part 1

Sekarang kita memiliki beberapa pelajaran pertama tentang bagaimana membuat halaman CSS.Pelajaran pertama dari tiga bagian ini tentang cara membuat halaman web CSS.

Bukan hanya style CSS, tetapi positioning CSS juga, itu berarti TIDAK ADA TABEL wajib!

Setelah selesai, Anda akan membuat halaman dengan cara-cara canggih yang memungkinkan situs web Anda terlihat di semua jenis perangkat termasuk komputer normal, ponsel, iPhone, PSP … perangkat apa pun !!

Itu juga berarti Anda akan dapat mengembangkan situs web dengan lebih sedikit pekerjaan di mana halaman web Anda akan memuat lebih cepat dan akan mudah untuk memperbarui dan mencetak!

CSS Template Layout – Part 1 of 3

Dalam tutorial yang mudah dimengerti ini (saya harap!) Tentang cara membuat halaman web dengan CSS, saya akan berkonsentrasi pada komponen kunci css, di mana (pada akhir tutorial) Anda akan dapat membuat halaman web berbasis CSS yang terlihat bagus.

Setelah menyelesaikan tutorial ini, Anda harus memiliki informasi yang cukup untuk menjelajahi CSS dan desain halaman web lebih jauh … ke dalam area yang saya tidak membahas di sini.

Mari Kita Mulai:

Anda dapat mengunduh file CSS dan HTML yang kita buat dalam tutorial ini:CSS files

Anda dapat memeriksa seperti apa tampilan halaman di sini:CSS Example Page

Tag yang digunakan dalam tata letak berbasis CSS ini:

Karena kekuatan CSS, kita akan dapat mengurangi jumlah tag HTML yang kita gunakan dalam halaman waktu yang besar, sementara itu masih bisa menata halaman yang tampak bagus hanya menggunakan 6 jenis (karena kurangnya kata yang lebih baik ) dari tag HTML.

Tag yang akan kita gunakan untuk tata letak konten:

1. <h.> Tag Heading yang berkisar dari ‘<h1></h1>’ to ‘<h6></h6>’ , akan digunakan untuk menandai / menandai judul di halaman kita. Jadi tajuk terpenting akan dibungkus dalam < h1 > tag dan yang paling tidak penting dalam a <h6> menandai. Contoh tajuk untuk artikel ini:

CSS Template Layout

Ini memberitahu browser dan mesin pencari juga, bahwa halaman ini terutama tentang: ‘CSS Template Layout’

Semua browser memiliki ukuran default (untuk masing-masing <h.> tag)tentang bagaimana ia membuat teks ditempatkan di antara tag-tag ini. Banyak dari default ini dapat tidak dapat digunakan (terutama <h1>)karena mereka keluar terlalu besar. Tapi jangan takut, CSS ada di sini, dan kita akan menggunakan CSS untuk membuat ukuran teks lebih sesuai dengan keinginan kita.

2. <p> Tag paragraf digunakan untuk menandai bagian-bagian halaman ‘paragraphs’,cukup sederhana. Tag paragraf adalah apa yang disebut ‘block element’; itu berarti bahwa itu bertindak seperti blok di mana ruang secara otomatis dimasukkan sebelum dan sesudah masing-masing <p> pasangan tag. Anda akan melihatnya bekerja dalam contoh yang muncul.

3. <ul> dan <ol> Tag daftar akan digunakan untuk membuat menu kita. Tag <ul> adalah ‘Un ordered list tag’ yang membuat daftar dengan peluru atau gambar / ikon lain yang tidak menentukan atau menunjukkan pesanan; karena itu istilahnya ‘un ordered’. Tag daftar lainnya disebutkan (<ol>) adalah ‘ordered list tag’ dan itu membuat daftar yang, alih-alih dengan peluru, menandai item daftar dengan angka atau huruf. Contoh kode untuk diikuti.

4. <div> dan </div>: Div tags memungkinkan Anda untuk menurunkan sebagian halaman Anda sehingga Anda dapat melakukan sesuatu untuk itu. Cara lain untuk mengatakan ‘minta sebagian’ dapat menjadi ‘untuk dimasukkan ke dalam wadah’. Setelah bagian dari halaman web Anda dalam <div> wadah Anda dapat melakukan semua jenis hal-hal seperti gaya itu, menghidupkannya, membuatnya terlihat atau tidak terlihat, dan sebagainya. Div’ mewakili generasi berikutnya untuk memformat halaman HTML yang, dalam banyak hal, lebih unggul daripada tabel.

kita akan menggunakan div untuk membuat wadah untuk bagian dari halaman kita. Satu div akan digunakan untuk 'menahan' menu navigasi kita dan div lain untuk 'menahan' halaman utama.

5. <a href> Tag terpenting dalam HTML: Sebuah ‘link tag’ atau sebuah ‘hyperlink tag’. Hal ini membuat text ‘hyper’ sehingga ketika kita mengkliknya kita dapat memuat halaman lain atau mengaktifkan / memanggil beberapa JavaScript (atau dikenal sebagai skrip ECMA).

6. <img> ini adalah ‘image tag’, yang memungkinkan Anda menautkan gambar sehingga muncul di halaman kita. Dalam HTML, gambar tidak disematkan ke halaman yang sebenarnya, melainkan tag gambar (<img>) hanya menunjuk ke tempat gambar itu dan browser akan berusaha memuat gambar itu ketika seorang surfer memuat halaman HTML Anda.

Itu mencakup tag HTML yang akan kita gunakan dalam tata letak kita! Tidak perlu untuk tag tabel, <br> tag, dan jahat (dan DIHARUSKAN) <font> tags.

Membuat template halaman dasar

Untuk bekerja melalui contoh-contoh, kita akan membutuhkan halaman HTML latihan.

Untuk membuat halaman latihan HTML lakukan hal berikut:

1. Buka desktop Anda dan buat dokumen teks sederhana. Pada Windows yang perlu Anda lakukan adalah klik kanan dan pilih: New -> text Document.

Ini akan membuat dokumen teks kosong sederhana di desktop Anda. Beri nama file: practiceHTML.htm. Windows akan menampilkan peringatan yang menanyakan apakah Anda ingin mengubah ekstensi file. Hanya mengatakan ‘yes’. Sekarang klik kanan pada file dan pilih: ‘open with’ dan pilih ‘Notepad’. Setelah masuk Notepad, rekatkan kode templat yang ditemukan di kotak abu-abu di bawah ini:

(Cara sederhana untuk memotong / menempelkan teks di Windows adalah dengan menekan dan menahan tombol Ctrl dan ‘c’ untuk menyalin dan ‘v’ untuk menempel.)

My Practice HTML Page<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Kode ini membentuk struktur dasar untuk semua halaman HTML. Anda sekarang dapat memotong dan menempelkan sampel kode di antara tag-tag ini:

<!--Insert code here! -->

Satu catatan terakhir: di antara <body> </body> Anda menemukan apa yang disebut komentar. Komentar adalah cara untuk menempatkan catatan yang tidak dapat dilihat di browser. Apa pun di antara karakter berikut ini menjadi komentar HTML:

<!-- and -->

Apa pun di dalam komentar tidak akan terlihat di browser. Jadi dalam contoh di atas kata ‘ and ’ tidak akan terlihat di browser. Ini adalah cara yang baik untuk meninggalkan pesan tentang apa yang Anda lakukan di halaman. Ini bisa berguna nanti ketika orang lain mengerjakan halaman atau bahkan ketika Anda, karena Anda mungkin (Anda AKAN) lupa mengapa Anda melakukan sesuatu dengan cara tertentu.

Membangun CSS

Setelah Anda membuat halaman templat, buat folder dan beri nama seperti: ‘situs web myCSSweb’ dan kemudian masukkan halaman HTML ke dalamnya. Di folder yang sama itu, buat dokumen teks baru dan beri nama: 'myCSS.css'. Setelah dibuat buka file itu dan tempel dalam kode CSS templat ini dan kemudian simpan:

/* 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 a: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; 
	z-index: 10; 
	width: 210px; 
	height: 600px; 
	margin: 0; 
	border-right: 1px solid #C6EC8C; 
	font-weight: normal; 
} 
#centerDoc { 
	position: absolute; 
	z-index: 15; 
	padding: 0 0 20px 20px; /*top right bottom left*/ 
	margin-top: 50px;
	margin-left: 235px;  
}

Jangan biarkan CSS membuat Anda takut, saya akan menjelaskan detail penting dan Anda akan segera melihat betapa mudahnya sebenarnya. Satu hal terakhir yang harus Anda lakukan sebelum menyelesaikan bagian tutorial ini, kita perlu menambahkan beberapa kode ke halaman HTML kita.

Di sela bagian < body > < / body > tag Anda harus memasukkan kode ini:

<div id="navigation">
     <h2>The Main navigation</h2>
</div>
<div id="centerDoc">
     <h1>The Main Heading</h1>
     <p>
          Halaman ini adalah halaman saya membuat halaman website dengan CSS
     </p>
</div>

Dan di antara bagian < head > < / head > tag Anda harus memasukkan ini:

<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" />

Dengan ini di tempat kita akan dapat mulai menata halaman kita. Jika Anda melihat halaman HTML sekarang Anda mungkin terkejut melihat bahwa kita sudah mulai!

Top of Page