Panduan Pemula Untuk Membangun Halaman Web HTML5 / CSS3

Artikel ini adalah bagian dari kami "Seri Tutorial HTML5 / CSS3" - didedikasikan untuk membantu Anda menjadi desainer dan / atau pengembang yang lebih baik. Klik disini untuk melihat lebih banyak artikel dari seri yang sama.

HTML5 dan CSS3 telah menyapu web dengan badai hanya dalam 2 tahun. Di hadapan mereka ada banyak perubahan semantik dalam hal perancang web diharapkan membuat halaman web, dan dengan kedatangan mereka datang banyak dukungan hebat seperti media alternatif, tag gaya XML, dan atribut input progresif bagi perancang web untuk mencapai impian. fitur seperti animasi.

Meskipun sebagian besar pengembang tampaknya menampilkan demo yang berpotensi namun rumit, HTML5 / CSS3 bukan benar-benar ilmu roket, dan saya akan memandu Anda melalui proses bersantai untuk membangun halaman web standar HTML5 / CSS3 dengan penjelasan dan tada yang komprehensif namun mendalam dan komprehensif! Bonus seperti sumber belajar dan templat HTML5 gratis tersedia untuk Anda, jadi ambillah kesempatan ini untuk memulai perjalanan HTML5 Anda!

Perubahan antara HTML4 dan HTML5

Anda mungkin bertanya-tanya mengapa ini penting untuk beralih ke HTML5. Ada banyak alasan, tetapi sebagian besar karena Anda akan menjadi bekerja dengan standar Internet global seperti setiap desainer lainnya. Dengan cara ini Anda akan menemukan lebih banyak dukungan online dan Anda situs web akan ditampilkan dengan benar di peramban modern yang terus ditingkatkan.

(Sumber Gambar: W3C)

Perbandingan antara HTML4 dan HTML5 sulit dikenali pada tingkat permukaan. Dari melihat konsep HTML5 baru Anda dapat melihat elemen-elemen unggulan dan prosedur penanganan kesalahan yang diperbaiki. Pengembang peramban secara khusus menikmati spesifikasi baru untuk merender laman web default.

Apa lagi dari HTML5 adalah konversi browser web modern kami. Dengan spesifikasi baru ini, web secara keseluruhan sekarang dipandang sebagai platform aplikasi untuk HTML (terutama HTML5), CSS, dan JavaScript yang akan dibangun. Juga, sistem ini elegan menciptakan harmoni antara desainer web dan pengembang dengan menetapkan standar umum yang harus diikuti oleh semua browser.

Selain itu banyak elemen telah dibuat untuk mewakili media digital zaman baru. Ini termasuk dan yang sangat besar untuk dukungan multimedia. Di beberapa browser Anda dapat menyelesaikan validasi formulir secara langsung dalam HTML. Memang masih ada kebutuhan besar untuk jQuery, karena ada banyak pengembang perangkat lunak yang belum mengenali fitur-fiturnya. Jika Anda ingin daftar tag, periksa tabel W3Schools ini untuk mempelajari lebih lanjut tentang mereka.

Bare HTML5 Skeleton

Saya menemukan cara termudah untuk memahami topik apa pun adalah dengan selami itu. Jadi saya akan membuat kerangka kerangka HTML5 yang sangat dasar untuk halaman web. Saya memasukkan beberapa elemen yang lebih baru, yang saya harap akan dikategorikan sedikit kemudian.

   Halaman HTML5 Pertama Kami       Selamat datang, semuanya!
   Rumah
 Tentang kami
 Kontak
 
 
 
   beberapa konten di sini.
 
  tetapi beberapa di sini juga!
 
 
  Beberapa pemberitahuan hak cipta dan hukum di sini. Mungkin menggunakan simbol © sedikit.

Segera ini tidak jauh berbeda dari halaman web HTML4 standar. Yang mungkin Anda perhatikan adalah kami tidak perlu menyertakan tag yang dapat ditutup sendiri. Ini benar-benar berita yang luar biasa karena akan menghemat banyak waktu untuk proyek pengembangan Anda.

Bagi mereka yang tidak tahu, di draft XHTML ada banyak elemen berlabel menutup diri. Ini akan berakhir dengan garis miring ke depan sebelum operator 'lebih besar dari' untuk menandakan Anda tidak perlu menyertakan tag penutup lain di tempat lain. Sebagai contoh, untuk membuat tag meta kata kunci yang akan Anda gunakan tanpa perlu penutupan di tempat lain.

Aturan ini masih berlaku di HTML5. Tapi sekarang kamu bahkan tidak perlu garis miring tambahan! sepenuhnya sah, meskipun Anda diizinkan untuk terus menggunakan standar XHTML / XML. Untuk semua browser yang memenuhi standar, kedua elemen akan merender dengan cara yang sama.

Menentukan Area Halaman kami

Mayoritas kode baru kami seharusnya tidak terlalu mengejutkan. Kami DOCTYPE lebih sederhana dari sebelumnya, tidak perlu atribut tubuh yang berlebihan, dan informasi dalam pos kami diberi label dengan jelas. Pindah saya ingin memusatkan perhatian Anda pada konten di dalam kami menandai. Ini termasuk semua struktur halaman utama. Saya sengaja menggunakan beberapa tag HTML5 yang bagus untuk menandakan bagaimana Anda dapat memasukkannya ke dalam pekerjaan Anda sendiri.

Pertama, Anda akan melihat seluruh halaman dikemas dalam a div menandai. Saya telah melabeli ini dengan ID dari pembungkus, artinya membungkus seluruh konten situs web kami. Ini adalah berguna untuk mengatur lebar maksimum atau konten posisi sekitar pada layar. Selanjutnya saya telah membagi halaman menjadi 3 elemen inti - satu

, inti

, dan pendek

. Di dalam area tajuk khusus saya, saya telah menambahkan tampilan sederhana dari judul halaman, dan item navigasi menggunakan

tag sebagai pembungkus.

Sekarang untuk

dengan ID dari inti Saya sudah menerapkan sekunder clearfix. Fitur ini membuatnya jadi kami bisa bebas mengapung 2 kolom di dalamnya dan kami tidak akan mengalami konten yang dijatuhkan atau fenomena aneh. Dan memang seharusnya begitu, karena di dalam saya telah menempatkan dua

tag yang masing-masing akan mencakup area konten utama dan sidebar kami. Kami akan menggunakan gaya CSS untuk memisahkannya.

Begitu pula yang sepi footer menandai berfungsi dengan baik untuk membedakan konten ini di antara halaman. Di dalam saya telah menempatkan paragraf khusyuk yang mungkin berisi beberapa informasi hak cipta dan kepemilikan. Tetapi kemungkinan besar Anda ingin memasukkan lebih banyak konten, seperti tautan sekunder ke halaman Anda.

Sihir CSS3 Kreatif

Untuk menyelesaikan tata letak stensil dasar ini kita dapat menggunakan beberapa gaya CSS. Dalam template HTML5 dasar saya menambahkan stylesheet CSS eksternal sehingga kami dapat memisahkan area kode kami. Ini akan menjernihkan banyak kebingungan dalam jangka panjang ketika halaman dan gaya Anda mulai berjalan pada halaman yang berbeda.

(Sumber Gambar: W3C)

Jadi saya belum menghabiskan banyak waktu dengan CSS, tetapi cukup untuk menampilkan beberapa efek yang rapi. Pertama saya telah menggunakan beberapa pengaturan batas-radius untuk membangun efek navigasi tautan yang sangat keren. Anda dapat menargetkan efek yang sama ini dalam kode templat, cukup tambahkan baris berikut ke dalam dokumen CSS.

 nav display: block; margin-bottom: 10px;  nav ul list-style: none; ukuran font: 14px;  nav ul li display: inline;  nav ul li a display: block; mengapung: kiri; padding: 3px 6px; warna: # 575c7d; teks-dekorasi: tidak ada; font-weight: bold;  nav ul li a: hover background: # deff90; warna: # 485e0f; -webkit-border-radius: 3px; -moz-border-radius: 3px; batas-jari-jari: 3px; padding: 3px 6px; margin: 0; teks-dekorasi: tidak ada;

Efek rapi lainnya adalah gaya clearfix. Ini bukan konsep yang sepenuhnya baru dengan CSS3, tetapi penting untuk membangun halaman web yang sesuai standar. Sering kali ketika Anda ingin melayang konten di sebelah satu sama lain, Anda akan mengalami gangguan posisi kereta. Ini disebabkan oleh margin offset dan kesalahan dalam menetapkan lebar absolut untuk konten Anda yang melayang.

Konsep ini bisa agak membingungkan, dan saya telah menambahkan sedikit kode di bawah ini untuk membantu. Pada dasarnya kami menargetkan dua

elemen, #kiri dan #kanan agar sesuai dengan sisi halaman mereka. Saya telah menetapkan masing-masing dengan lebar yang pasti dan mengambang ke kiri, sehingga mereka akan menumpuk tepat di sebelah satu sama lain. Karena wadah kami div # core berisi clearfix kelas, ini berarti semua konten internal dapat bergerak bebas dan secara otomatis membersihkan ruang ekstra sesudahnya.

/ * halaman inti * / div # core tampilan: blok; jelas: keduanya; margin-bottom: 20px;  bagian # kiri lebar: 550px; mengapung: kiri; margin: 0 15px;  bagian # kanan float: kiri; lebar: 300px;  / * clearfix * / .clearfix: after content: "."; display: blok; jelas: keduanya; visibilitas: tersembunyi; garis-tinggi: 0; tinggi: 0;  .clearfix display: inline-block;  html [xmlns] .clearfix display: block;  * html .clearfix height: 1%;

Bit kode ini sederhana untuk memulai. Mereka juga berkaitan dengan kode templat HTML5 kami yang dibuat sebelumnya, jadi ini adalah praktik sederhana. Tetapi ketika datang ke pecandu web nyata Anda akan melihat lebih banyak fungsi CSS3.

Sintaks CSS3 Yang Tidak Diketahui

Untuk membangun halaman web lengkap HTML5 / CSS3 Anda akan mulai menggunakan beberapa stylesheet yang jauh lebih kompleks. Banyak desainer tahu kode steno (seperti font: properti), karena ini telah menjadi standar bahkan sebelum CSS2.

Tetapi ada beberapa properti baru di CSS3 yang banyak desainer tidak pikirkan. Banyak dari ini tidak hanya untuk estetika, tetapi juga termasuk efek animasi. Di bawah ini adalah daftar singkat yang menjelaskan beberapa properti yang dapat Anda pertimbangkan untuk bermain. Coba googling untuk contoh sintaks jika Anda merasa kehilangan.

bayangan kotak: menambahkan efek bayangan rapi ke elemen halaman Anda. Anda diberi 4 parameter yang mengatur posisi kiri / kanan, atas / bawah, bayangan kabur dan warna. Perhatikan bahwa bayangan kotak tidak dianggap sebagai ruang tambahan dengan lebar / tinggi asli.
bayangan teks: menciptakan bayangan indah di belakang teks halaman Anda. Dengan efek yang tepat, surat-surat Anda dapat muncul keluar langsung dari halaman.
batas-jari-jari: Sudut yang membulat telah memakan waktu lama untuk menjadi standar yang diterima. Beberapa tahun yang lalu banyak perancang web 2.0 membuat gambar latar belakang hanya untuk menyesuaikan sudut-sudut bulat dengan CSS. Tetapi menggunakan CSS3 border-radius Anda dapat memanipulasi kurva setiap perbatasan pada elemen apa pun.
kegelapan: Sepertinya properti sederhana yang tidak dipertimbangkan banyak desainer. Opacity mengharapkan input numerik tunggal mulai dari 0 hingga 1.0 (0% - 100%). Efek ini berfungsi sangat baik sebagai animasi hover.
@ font-face: Contoh indah lainnya dari beberapa gaya dan tipografi CSS kompleks. Desainer web sekarang dapat bekerja dengan font khusus mereka sendiri dengan mendefinisikannya sebagai variabel di dalam dokumen CSS Anda.
ukuran kotak: secara standar ukuran kotak akan mengatur semua elemen Anda sebagai kotak konten. Ini berarti lebar, bantalan, dan batas semua dimasukkan ke dalam lebar maks. Tapi diatur ke kotak perbatasan Anda dapat menentukan lebar maks (katakanlah 20px) dan menambahkan padding / batas akan menyertakan diri mereka ke dalam ini, sehingga menghilangkan ruang di dalam objek. Ini adalah properti fantastis setelah Anda menguasai sumber dayanya.

Semua properti ini memiliki kelebihan dan kekurangan. Saya tidak akan merekomendasikan mencoba menjejalkan semuanya ke halaman web Anda. Tapi latihan akan memberi Anda pola pikir yang jelas untuk masuk ke dalam pengembangan situs web lebih lanjut dengan mudah.

Satu lagi bagian inti dari sintaks tambahan yang layak disebutkan adalah penyeleksi atribut. Dengan CSS3 sekarang Anda bisa mendefinisikan gaya berdasarkan atribut HTML (seperti jenis, href, judul) dan bahkan memberikan nilai tertentu. Jadi misalnya kita bisa menargetkan tautan dengan atribut judul yang ditentukan dan memberi mereka satu set ikon latar belakang.

 ul li [title ^ = "ico"] background: url ('my-icon.gif');

Jika Anda perhatikan saya sudah menyertakan a simbol caret sebelum tanda sama dengan. Ini adalah operator yang mendefinisikan semua item daftar yang memegang awalan, ico. Atau Anda dapat mengganti tanda sisipan (^) dengan tanda dolar ($) untuk menargetkan area akhiran judul Anda. Dengan cara ini CSS3 tahu untuk menambahkan gambar latar belakang di mana Anda dapat mengatur judul sebagai 'ico pertama' atau 'buku ico'. Baca lebih banyak tentang penyeleksi atribut jika Anda tertarik.

Menyatukan Semuanya

Inti dari halaman web HTML5 dan CSS3 adalah kesederhanaan. Pengembang web berusaha membangun situs web yang sangat kreatif dalam waktu yang lebih singkat dan lebih sedikit tekanan. Fitur-fitur baru di HTML5 memungkinkan ini dengan banyak ruang gerak. Dan menggunakan beberapa penyeleksi dan properti CSS3 baru akan memberi Anda keuntungan dalam jangka panjang.

(Sumber Gambar: W3C)

Tetapi Anda juga seharusnya demikian mempertimbangkan pengguna akhir. Proses membangun halaman web akhirnya berakhir setelah meluncurkan situs web publik. Tujuan Anda adalah untuk silakan audiens dengan informasi yang mudah diakses, dan bukan hanya pembaca manusia, tetapi crawler mesin pencari dan bot pengindeksan. Semantik telah berkembang pesat untuk memasukkan elemen tata letak HTML5 baru, memecah tata letak halaman secara konsisten. Tidak pernah semudah ini untuk membangun bagian navigasi dan footer kecil sejalan dengan semua browser web modern.

Setelah Anda merasa nyaman membangun halaman web HTML5 Anda akan mulai melihat ke dalam animasi halaman. Bahkan efek minor dengan JavaScript dan AJAX bisa sangat besar meningkatkan pengalaman pengguna dan kinerja situs. Meskipun ini bukan bagian dari ruang lingkup artikel, saya sarankan untuk bermain-main dengan jQuery jika Anda punya waktu. Pustaka sumber terbuka sangat mencengangkan dan memungkinkan pembuatan prototipe cepat di atas elemen halaman HTML5.

Sumber daya tambahan

Blogger di seluruh dunia telah mendiskusikan tren baru dalam HTML5 dan CSS3 dan berbagi sumber daya kepada publik. Waktu berubah dan komunitas web berubah bersama mereka. Anda harus mempertimbangkan beberapa bidang khusus untuk dipelajari dan membangun minat kecil.

Di bawah ini adalah beberapa daftar, artikel, dan tutorial tambahan yang dapat Anda nikmati. Saya telah mengambil kebebasan memisahkan daftar menjadi sumber daya HTML5 dan CSS3. Berdasarkan apa yang Anda cari harus ada beberapa topik di sini untuk semua orang. Nikmati juga galeri singkat tema HTML gratis yang tersedia untuk diunduh secara online!

HTML5

HTML5: 15 Eksperimen yang Menginspirasi
HTML5: 19 Aplikasi Web
HTML5: 48 Potensi Demo Pembunuhan Flash
Buat Formulir Kontak HTML5 / CSS3 Berbasis Ajax

CSS3

CSS3: Panduan Pemula
CSS3: Membuat Bidang Pencarian
CSS3: Menggunakan Pseudo-Classes
CSS3: 30+ Tutorial Bermanfaat

Bonus: Template & Tema HTML5

Perusahaan Desain

Siap melangkah ke dunia HTML5 yang indah? Berikut adalah template HTML5 gratis, dengan skrip jQuery dan font khusus dipersenjatai untuk Anda uji secara bebas!

Tema HTML5 / CSS3

Tema bertenaga HTML5 / CSS3 ini memiliki desain tata letak blog yang umum bagi Anda untuk membangun blog HTML5 Anda sendiri dengan fitur-fitur yang luas, atau sekadar menggali kode dan mempelajari sesuatu tentangnya.

Yoko

Yoko adalah tema WordPress modern yang berbicara tentang fleksibilitas dengan tata letak responsifnya berdasarkan permintaan media CSS3, yang merupakan kemampuan untuk menyesuaikan dengan ukuran layar yang berbeda, untuk mengetahuinya!

Abu-abu

Jika Anda lebih suka gaya blog WordPress klasik, Gray mungkin untuk Anda dengan fitur-fitur CSS3 bawaannya seperti radius batas, banyak latar belakang, bayangan teks, dll..

Panduan Pemula untuk Berkawanan, Peramban Media Sosial

Panduan Pemula untuk Pengembangan iOS Antarmuka - Bagian I

Panduan Pemula untuk Mengatur Windows 7 Media Center