HTML 5 dan CSS 3: Teknik Yang akan Segera Anda Gunakan

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Dalam tutorial ini, kita akan membangun sebuah halaman blog menggunakan generasi berikutnya teknik dari HTML 5 dan CSS 3. Tutorial ini bertujuan untuk menunjukkan bagaimana kita akan membangun website ketika spesifikasi diselesaikan dan browser vendor telah dilaksanakan mereka. Jika anda sudah mengetahui HTML dan CSS, itu harus mudah untuk mengikuti.

Sebelum kita memulai, pertimbangkan untuk menggunakan salah satu dari kami HTML5 Template atau CSS Tema untuk proyek berikutnya—yaitu, jika anda membutuhkan solusi yang cepat dan profesional. Atau anda bisa mencoba salah satu pengembang yang berpengalaman di Envato Studio yang dapat membantu anda dengan berbagai macam custom HTML5 dan CSS proyek.

Jika tidak, saatnya untuk menggali teknik-teknik ini.

1. HTML 5

HTML 5 adalah versi utama berikutnya dari HTML. Hal ini memperkenalkan banyak unsur-unsur baru yang akan membuat halaman yang lebih semantik. Ini akan membuat lebih mudah untuk mesin pencari dan screenreaders untuk menavigasi halaman kami, dan meningkatkan pengalaman web untuk semua orang. Selain itu, HTML 5 juga akan mencakup mewah Api untuk menggambar grafis pada layar, menyimpan data offline, menyeret dan menjatuhkan, dan banyak lagi. Mari kita mulai menandai halaman blog.

2. Struktur Dasar

Sebelum kita mulai menandai halaman kami harus mendapatkan keseluruhan struktur lurus:

Di HTML 5 ada tag tertentu yang dimaksudkan untuk menandai bagian header, navigasi, sidebar dan footer. Pertama, lihatlah markup dan saya akan menjelaskan kemudian:

<!doctype html>
<html>
<head>
  <title>Page title</title>
</head>
<body>
	<header>
		<h1>Page title</h1>
	</header>
	<nav>
		<!-- Navigation -->
	</nav>
	<section id="intro">
		<!-- Introduction -->
	</section>
	<section>
		<!-- Main content area -->
	</section>
	<aside>
		<!-- Sidebar -->
	</aside>
	<footer>
		<!-- Footer -->
	</footer>

</body>
</html>

Masih terlihat seperti markup HTML, tetapi ada beberapa hal yang perlu diperhatikan:

Dalam HTML 5, hanya ada satu doctype. Hal ini dinyatakan di awal halaman dengan . Itu hanya memberitahu browser bahwa itu berhadapan dengan sebuah dokumen HTML.
Baru tag header melilit pengantar unsur-unsur, seperti halaman judul atau logo. Bisa juga berisi daftar isi atau mencari bentuk. Setiap header biasanya berisi tag heading dari <h1> hingga <h6> Dalam hal ini header digunakan untuk memperkenalkan seluruh halaman, tetapi kami akan menggunakannya untuk memperkenalkan bagian halaman sedikit kemudian.
Nav-tag ini digunakan untuk mengandung elemen navigasi, seperti navigasi utama pada sebuah situs atau lebih berupa navigasi seperti berikutnya/sebelumnya-link.
Bagian-tag ini digunakan untuk menunjukkan sebuah bagian dalam dokumen. Hal ini dapat berisi semua jenis markup dan beberapa bagian dapat bersarang di dalam satu sama lain.
selain digunakan untuk membungkus konten yang terkait dengan konten utama halaman yang masih bisa berdiri pada itu sendiri dan masuk akal. Dalam hal ini kita menggunakan itu untuk sidebar.
Footer-tag harus berisi informasi tambahan tentang konten utama, seperti info tentang siapa yang menulis itu, informasi hak cipta, link ke dokumen-dokumen terkait dan sebagainya.

Alih-alih menggunakan div mengandung bagian yang berbeda dari halaman kita sekarang menggunakan sesuai, tag semantik. Mereka akan membuat lebih mudah untuk mesin pencari dan pembaca layar untuk mencari tahu apa yang terjadi di halaman.

3. Menandai Navigasi

Navigasi ditandai tepat seperti yang akan kami lakukan dalam HTML 4 atau XHTML, menggunakan daftar tak berurutan. Kuncinya adalah daftar ini ditempatkan di dalam nav-tag.

1	<nav>
2	<ul>
3	<li><a href="#">Blog</a></li>
4	<li><a href="#">About</a></li>
5	<li><a href="#">Archives</a></li>
6	<li><a href="#">Contact</a></li>
7	<li class="subscribe"><a href="#">Subscribe via. RSS</a></li>
8	</ul>
9	</nav>

4. Menandai Pendahuluan

Kami telah mendefinisikan sebuah bagian baru dalam dokumen dengan menggunakan tag bagian. Sekarang kita hanya perlu beberapa konten.

<section id="intro">
	<header>
		<h2>Do you love flowers as much as we do?</h2>
	</header>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</section>

Kami menambahkan id untuk bagian tag sehingga kita dapat mengidentifikasi nanti ketika styling. Kita menggunakan tag header untuk membungkus pengantar h2 elemen. Selain menggambarkan keseluruhan dokumen, header-tag juga harus digunakan untuk menjelaskan masing-masing bagian.

5. Menandai Area Konten Utama

Kami area konten utama terdiri dari tiga bagian: blog posting, komentar dan form komentar. Menggunakan pengetahuan kita tentang struktur baru tag dalam HTML 5, itu harus mudah untuk menandainya.

Menandai Posting Blog

Pergi melalui markup dan saya akan menjelaskan unsur-unsur baru setelah itu.

<section>
	<article class="blogPost">
		<header>
			<h2>This is the title of a blog post</h2>
			<p>Posted on <time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time> by <a href="#">Mads Kjaer</a> - <a href="#comments">3 comments</a></p>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p>
	</article>
</section>

Kami memulai bagian baru dan membungkus seluruh posting blog di artikel-tag. Artikel tag digunakan untuk menunjukkan independen entri di blog, diskusi, ensiklopedia, dll. dan sangat ideal untuk digunakan di sini. Karena kita melihat rincian single post kita hanya memiliki satu artikel, tapi di halaman depan blog kita akan membungkus setiap post di artikel-tag.

Elemen header yang digunakan untuk menyajikan header dan metadata tentang posting blog. Kami memberitahu pengguna ketika posting ini ditulis, siapa yang menulis itu dan berapa banyak komentar yang dimilikinya. Perhatikan bahwa timestamp dibungkus di -tag. Tag ini juga baru untuk HTML 5 dan digunakan untuk menandai suatu tempat tertentu dalam waktu. Isi datetime atribut harus:

Diagram describing use of the datetime HTML attribute

Tahun ini diikuti oleh sosok dash (tanda minus untuk anda non-tipografi kutu buku)
Bulan diikuti dengan angka dash
Tanggal
Modal T untuk menunjukkan bahwa kita akan tentukan waktu setempat
Waktu setempat dalam format hh:mm:ss
Zona waktu relatif GMT. Aku di Denmark yang 1 jam setelah GMT, jadi saya menulis +01. Jika anda berada di Colorado, anda akan berada 7 jam di belakang WIB, dan anda akan menulis -07.

Menandai Komentar

Menandai komentar cukup lurus ke depan. Tidak ada tag atau atribut baru yang digunakan.

<section id="comments">
	<header>
		<h3>Comments</h3>
	</header>
	<article>
		<header>
			<a href="#">George Washington</a> on <time datetime="2009-06-29T23:35:20+01:00">June 29th 2009 at 23:35</time>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
	</article>
	<article>
		<header>
			<a href="#">Benjamin Franklin</a> on <time datetime="2009-06-29T23:40:09+01:00">June 29th 2009 at 23:40</time>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
	</article>
</section>

Menandai Formulir Komentar

Beberapa perangkat tambahan untuk bentuk-bentuk yang telah diperkenalkan dalam HTML 5. Anda lagi harus melakukan validasi sisi klien dari bidang-bidang yang dibutuhkan, email, dll. Browser mengurus ini untuk anda.

<form action="#" method="post">
	<h3>Post a comment</h3>
	<p>
		<label for="name">Name</label>
		<input name="name" id="name" type="text" required />
	</p>
	<p>
		<label for="email">E-mail</label>
		<input name="email" id="email" type="email" required />
	</p>
	<p>
		<label for="website">Website</label>
		<input name="website" id="website" type="url" />
	</p>
	<p>
		<label for="comment">Comment</label>
		<textarea name="comment" id="comment" required></textarea>
	</p>
	<p><input type="submit" value="Post comment" /></p>
</form>

Ada dua jenis baru dari input, email dan url. Email menetapkan bahwa pengguna harus memasukkan E-mail yang valid, dan url yang pengguna harus memasukkan valid alamat website. Jika anda menulis diperlukan sebagai atribut, pengguna tidak dapat mengirimkan sebuah lapangan kosong. "Diperlukan" adalah atribut boolean, baru untuk HTML 5. Itu hanya berarti bahwa atribut ini dapat dinyatakan tanpa nilai.

Menandai Sidebar dan Footer

Markup sidebar dan footer adalah sangat sederhana. Beberapa bagian dengan beberapa isi di dalamnya yang sesuai samping - dan footer-kategori.

Anda dapat melihat final, unstyled markup berikut. Sekarang untuk styling.

6. Styling dengan CSS 3

CSS 3 dibangun berdasarkan prinsip-prinsip tentang gaya, penyeleksi dan cascade yang kita kenal dengan baik dari versi sebelumnya dari CSS. Ia menambahkan banyak fitur baru, termasuk baru penyeleksi, pseudo-classes dan properties. Menggunakan fitur baru ini menjadi jauh lebih mudah untuk mengatur tata letak anda. Mari kita menyelam.

Konfigurasi Dasar

Untuk mulai dengan kita akan mendefinisikan beberapa aturan dasar mengenai tipografi, warna latar belakang halaman, dll. Anda akan mengenali semua ini dari CSS 2.1

/* Makeshift CSS Reset */
{
	margin: 0;
	padding: 0;
}

/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article {
	display: block;
}

body {
	margin: 0 auto;
	width: 940px;
	font: 13px/22px Helvetica, Arial, sans-serif;
	background: #f0f0f0;
}

h2 {
	font-size: 28px;
	line-height: 44px;
	padding: 22px 0;
}

h3 {
	font-size: 18px;
	line-height: 22px;
	padding: 11px 0;
}

p {
	padding-bottom: 22px;
}

Pertama kita ulang margin dan padding-gaya dengan aturan sederhana. Dalam lingkungan produksi saya akan menggunakan lebih lengkap CSS Reset seperti Eric Meyer (untuk CSS 2.1) tetapi untuk lingkup dari tutorial ini yang akan dilakukan.

Kami kemudian memberitahu browser untuk membuat semua baru HTML 5 elemen sebagai blok. Browser yang baik dengan unsur-unsur mereka tidak mengenali (ini adalah mengapa HTML 5 ini agak kompatibel), tetapi mereka tidak tahu bagaimana elemen-elemen itu harus diberikan secara default. Kita harus memberitahu mereka ini sampai standar ini dilaksanakan di seluruh papan.

Perhatikan juga bagaimana cara saya memilih ukuran font dalam piksel bukan ems atau %. Hal ini untuk menjaga sifat progresif dari tutorial ini. Ketika browser utama satu hari benar-benar selesai menerapkan HTML 5 dan CSS 3 kita semua akan memiliki akses ke halaman zooming bukan hanya mengubah ukuran teks. Hal ini menghilangkan kebutuhan untuk menentukan ukuran relatif unit, karena browser akan skala halaman pula.

Melihat apa halaman anda terlihat seperti dengan dasar styling diterapkan. Sekarang kita bisa melanjutkan ke styling sisa halaman. Tidak ada gaya tambahan yang diperlukan untuk header, jadi kami akan pergi langsung ke navigasi.

7. Styling Navigasi

Hal ini penting untuk dicatat bahwa lebar tubuh telah didefinisikan sebagai 940px dan yang telah dipusatkan. Kami bar navigasi kebutuhan untuk menjangkau seluruh lebar dari jendela, jadi kita harus menerapkan beberapa gaya tambahan:

nav {
	position: absolute;
	left: 0;
	width: 100%;
	background: url("nav_background");
}

Kami posisi nav-elemen benar-benar, menyelaraskan ke kiri dari jendela dan membuatnya menjangkau seluruh lebar. Kami akan pusat daftar bersarang untuk menampilkannya dalam batas-batas tata letak:

nav ul {
	margin: 0 auto;
	width: 940px;
	list-style: none;
}

Sekarang kita akan mendefinisikan beberapa tambahan gaya untuk membuat item navigasi terlihat lebih cantik dan menyelaraskan mereka dengan grid layout didasarkan pada. Saya juga termasuk gaya untuk menyoroti halaman pengguna, dan beberapa kebiasaan styling untuk berlangganan-link.

nav ul li {
	float: left;
}

	nav ul li a {
		display: block;
		margin-right: 20px;
		width: 140px;
		font-size: 14px;
		line-height: 44px;
		text-align: center;
		text-decoration: none;
		color: #777;
	}

		nav ul li a:hover {
			color: #fff;
		}

		nav ul li.selected a {
			color: #fff;
		}

		nav ul li.subscribe a {
			margin-left: 22px;
			padding-left: 33px;
			text-align: left;
			background: url("rss.png") left center no-repeat;
		}

8. Styling Pengenalan

Markup untuk pengenalan ini cukup sederhana: Sebuah bagian dengan judul dan paragraf teks. Namun, kita akan menggunakan beberapa CSS baru 3 trik untuk membuatnya terlihat lebih menarik.

#intro {
	margin-top: 66px;
	padding: 44px;
	background: #467612 url("intro_background.png") repeat-x;
	background-size: 100%;
	border-radius: 22px;
}

Kami menggunakan dua sifat baru. Yang pertama adalah latar belakang-ukuran, yang memungkinkan anda untuk skala background-image. Dalam kasus kami, kami skala itu 100% pada kedua sumbu. Jika kotak mengembang seperti yang kita menambahkan lebih banyak konten untuk itu, gradien latar belakang akan membesar juga. Ini adalah sesuatu yang tidak mungkin di CSS 2.1 tanpa non-markup semantik dan lain-lain masalah browser.

Kedua baru properti border-radius, yang berlaku dibulatkan ke elemen. Jari-jari kami, sudut dibulatkan 22px di setiap sudut. Anda bisa menentukan nilai-nilai yang berbeda untuk setiap sudut atau memilih untuk hanya putaran sudut individu.

Sayangnya, tak satu pun dari sifat-sifat tersebut sepenuhnya diimplementasikan ke dalam browser utama. Namun, kita bisa mendapatkan beberapa dukungan dengan menggunakan vendor-atribut tertentu. Background-size didukung oleh versi yang lebih baru dari Safari, Opera, Konqueror. Border-radius didukung oleh versi yang lebih baru dari Safari dan Firefox.

#intro {
	...
	/* Background-size not implemented yet */
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	-khtml-background-size: 100%;

	/* Border-radius not implemented yet */
 	-moz-border-radius: 22px;
	-webkit-border-radius: 22px;
}

Karena kita memiliki warna latar belakang yang ditetapkan, tidak akan ada masalah besar di browser yang tidak mendukung latar belakang, ukuran, seperti Firefox. Sekarang kita hanya perlu gaya judul dan teks.

#intro h2, #intro p¬†{
	width: 336px;
}

#intro h2 {
	padding: 0 0 22px 0;
	font-weight: normal
	color: #fff;
}

#intro p {
	padding: 0;
	color: #d9f499;
}

Bunga gambar dapat ditambahkan dengan mudah dengan memberikan #intro kedua gambar latar belakang, sesuatu yang mendukung CSS 3.

#intro {
	...
	background: #467612 url("intro_background.png") top left (287px 100%) repeat-x,
			url("intro_flower.png") top right (653px 100%) no-repeat;
	...
}

Kami memberikan dua gambar latar belakang eksplisit dimensi untuk memastikan bahwa mereka tidak tumpang tindih, dan kami sudah siap. Perhatikan notasi singkat dari background-size.

Sayangnya, tidak ada browser andal mendukung ini belum, jadi kami harus melakukannya dengan cara kuno: seperti gambar inline dan posisi itu menggunakan CSS. Lihat contoh terakhir untuk melihat bagaimana hal itu dilakukan.

9. Styling Area Konten dan Sidebar

Area konten dan sidebar akan sejajar di samping satu sama lain. Secara tradisional anda akan melakukan ini dengan menggunakan mengapung, tapi di CSS 3 kita akan menggunakan tabel!

"Apa?! Meja?" mungkin anda bertanya dan terlihat bingung. Anda mungkin belajar bertahun-tahun yang lalu yang menggunakan tabel untuk layout web adalah besar tidak-tidak, dan itu masih. Anda seharusnya tidak pernah menggunakan tabel-unsur mark up tata letak. Namun, di CSS 3 kita dapat membuat elemen berperilaku seperti meja tanpa pernah menunjukkan di markup! Untuk mulai dengan, kita akan membutuhkan beberapa divs untuk grup bagian dalam sedikit lebih dengan cara yang logis.

<div id="content">
	<div id="mainContent">
		<section>
			<!-- Blog post -->
		</section>
		<section id="comments">
			<!-- Comments -->
		</section>
		<form>
			<!-- Comment form -->
		</form>
	</div>
	<aside>
		<!-- Sidebar -->
	</aside>
</div>

Semuanya masih masuk akal semantik, tapi sekarang kita bisa gaya itu. Kami ingin #div konten untuk berperilaku seperti meja, dengan #mainContent dan selain sebagai meja-sel. Dengan CSS 3, ini adalah sangat mudah:

#content {
	display: table;
}

	#mainContent {
		display: table-cell;
		width: 620px;
		padding-right: 22px;
	}

	aside {
		display: table-cell;
		width: 300px;
	}

Itu semua! Tidak ada lagi floating, imitasi kolom gambar latar belakang, membersihkan atau runtuh margin. Kami telah membuat unsur-unsur berperilaku seperti sebuah meja, dan ini membuatnya jauh lebih mudah bagi kita untuk melakukan tata letak.

10. Pasang Posting Blog

Gaya posting header agak sepele jadi aku akan melompat ke bagian yang menyenangkan: multi-kolom layout.

Beberapa kolom

Beberapa kolom dari teks yang sebelumnya tidak mungkin tanpa manual membelah teks, tapi dengan CSS 3 itu sepotong kue, meskipun kita harus menambahkan div sekitar beberapa paragraf untuk ini untuk bekerja dengan browser yang ada saat ini.

<div>
	<p>Lorem ipsum dolor sit amet...</p>
	<p>Pellentesque ut sapien arcu...</p>
	<p>Vivamus vitae nulla dolor...</p>
	...
</div>

Sekarang kita dapat menambahkan dua sifat sederhana dan menyebutnya hari.

1	.blogPost div {
2	column-count: 2;
3	column-gap: 22px;
4	}

Kami ingin 2 kolom dan kesenjangan 22px antara kolom. Tambahan div diperlukan karena saat ini tidak didukung cara membuat elemen span lebih dari satu kolom. Di masa depan, namun, anda akan dapat menentukan kolom-span properti, dan kita bisa menulis:

.blogPost {
	column-count: 2;
	column-gap: 22px;
}

	.blogPost header {
		column-span: all;
	}

Tentu saja kolom-hitung dan column-gap sifat yang hanya didukung oleh beberapa browser, Safari dan Firefox. Kita harus menggunakan vendor-sifat tertentu untuk sekarang.

.blogPost div {
	/* Column-count not implemented yet */
	-moz-column-count: 2;
	-webkit-column-count: 2;

	/* Column-gap not implemented yet */
	-moz-column-gap: 22px;
	-webkit-column-gap: 22px;
}

Bayangan kotak

Jika anda perhatikan dengan seksama pada gambar di posting blog anda akan melihat drop-shadow. Kami mampu menghasilkan ini menggunakan CSS 3 box-shadow properti.

1	.blogPost img {
2	margin: 22px 0;
3	box-shadow: 3px 3px 7px #777;
4	}

Illustration describing how the browsers render the box-shadow CSS property

Pertama "3px" memberitahu browser mana yang kita inginkan bayangan untuk menghentikan horizontal. Kedua "3px" mengatakan itu di mana kita ingin bayangan untuk menghentikan secara vertikal. Yang terakhir "7px" cara kabur perbatasan harus. Jika anda set ke 0 itu akan menjadi benar-benar padat. Last but not least, kita tentukan warna bayangan. Warna ini tentu saja memudar, tergantung pada seberapa banyak anda mengaburkan bayangan.

Ini mungkin datang sebagai tidak mengherankan bahwa properti ini tidak diterapkan di semua browser. Pada kenyataannya, itu hanya bekerja di Safari, dan anda harus menggunakan vendor-properti tertentu.

1	.blogPost img {
2	margin: 22px 0;
3	-webkit-box-shadow: 3px 3px 7px #777;
4	}

11. Zebra-striping Komentar

Zebra-striping, atau menyoroti setiap elemen kedua dalam seri, telah terlibat secara tradisional memilih semua elemen via javascript, kemudian perulangan melalui mereka dan menyoroti semua elemen aneh. CSS 3 memperkenalkan pseudo-class "nth-child", yang membuatnya sangat sederhana untuk melakukan hal ini tanpa javascript. Kami akan menggunakannya untuk zebra-komentar.

section#comments article:nth-child(2n+1) {
	padding: 21px;
	background: #E3E3E3;
	border: 1px solid #d7d7d7;

	/* Border-radius not implemented yet */
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
}

Aneh nilai "2n+1" ini sebenarnya cukup sederhana jika anda memahami apa itu singkatan dari:

2n memilih setiap item kedua. Jika anda menulis 3n itu akan memilih setiap item ketiga, 4n setiap butir keempat, dan seterusnya.
+1 memberitahu browser untuk memulai pada elemen 1. Jika anda sudah familiar dengan pemrograman anda mungkin tahu bahwa semua array dimulai dari 0, dan ini juga berlaku di sini. Ini berarti bahwa elemen 1 adalah benar-benar elemen kedua dalam seri.

Atau, anda hanya bisa menulis:

1	section#comments article:nth-child(odd) { ... }

Karena standar ini mencakup dua nilai yang digunakan sebagai singkatan, ganjil dan genap. Seluruh komentar styling harus sederhana untuk memahami dengan pengetahuan yang baru.

Styling Formulir Komentar, Footer dan Sidebar

Beberapa CSS 3 teknik yang digunakan dalam styling dari form komentar, footer dan sidebar. Dalam bentuk komentar dan footer saya telah menggunakan jenis yang sama dari meja tata letak teknik yang digunakan dalam tata letak utama. Di sidebar border-radius digunakan untuk menambahkan sudut dibulatkan ke bagian yang berbeda.

12. Desain Akhir

Melihat desain akhir dengan semua styling diterapkan.

Kompatibilitas

Halaman membuat benar di Safari 4 dan yang lebih baru berbasis webkit browser, karena itu adalah satu-satunya mesin rendering yang mendukung semua CSS 3 teknik yang kita gunakan. Firefox 3 memiliki beberapa masalah menerapkan sudut membulat untuk kami gambar bunga dan tidak mendukung latar belakang, ukuran, tetapi selain itu tata letak pekerjaan. Saya telah memilih untuk mengabaikan Internet Explorer seperti itu membutuhkan sedikit hacking untuk mendapatkan HTML 5 untuk bekerja. Anda juga bisa menentukan beberapa aturan yang lebih dan mendapatkan semua yang bekerja di seluruh browser utama, tapi semua ini adalah di luar cakupan tutorial ini.

Kesimpulan

Ketika HTML 5 dan CSS 3 adalah salah satu hari dilaksanakan di semua browser itu akan menjadi jauh lebih mudah untuk membangun website. Kita akhirnya akan bisa berhenti menggunakan mengapung untuk tata letak (yang mereka tidak pernah dimaksudkan untuk digunakan untuk), dan kita akan menghabiskan lebih sedikit waktu menulis javascript untuk skala kami gambar latar belakang atau zebra-meja kami. Mudah-mudahan kami akan menggunakan semua ini waktu ekstra untuk mempelajari beberapa lama diabaikan bidang web desain, seperti front end optimasi dan informasi yang tepat arsitektur.

Lihatlah kami HTML5 Template atau CSS Tema—jika anda membutuhkan profesional, solusi siap pakai untuk proyek web berikutnya.