Panduan Permulaan Untuk Membina Laman Web HTML5 / CSS3

Artikel ini adalah sebahagian daripada kami "Siri Tutorial HTML5 / CSS3" - khusus untuk membantu menjadikan anda pereka dan / atau pemaju yang lebih baik. Tekan di sini untuk melihat lebih banyak artikel dari siri yang sama.

HTML5 dan CSS3 telah menyapu web dengan ribut dalam masa 2 tahun sahaja. Sebelum itu terdapat banyak semantik yang diubah dalam cara pereka web dijangka membuat laman web, dan dengan ketibaan mereka datang sokongan hebat seperti media alternatif, tag gaya XML, dan atribut masukan progresif untuk pereka web untuk mencapai impian ciri seperti animasi.

Walaupun kebanyakan pemaju nampaknya memaparkan demo yang rumit dan rumit, HTML5 / CSS3 tidak sains roket, dan saya akan berjalan anda melalui proses santai untuk membina laman web HTML5 / CSS3 standard dengan penjelasan yang komprehensif namun mendalam dan tada! Bonus seperti sumber pembelajaran dan templat HTML5 percuma tersedia untuk anda, jadi ambil kesempatan ini untuk memulakan perjalanan HTML5 anda!

Perubahan antara HTML4 dan HTML5

Anda mungkin tertanya-tanya mengapa ia penting untuk bertukar menjadi HTML5. Terdapat pelbagai sebab, tetapi kebanyakannya kerana anda akan menjadi bekerja dengan piawaian Internet global seperti pereka lain. Dengan cara ini anda akan mendapat lebih banyak sokongan dalam talian dan anda laman web akan dipaparkan dengan betul dalam penyemak imbas moden yang sentiasa bertambah baik.

(Sumber Imej: W3C)

Perbandingan antara HTML4 dan HTML5 sukar ditemui pada paras permukaan. Dari melihat draf HTML5 baharu, anda dapat melihat elemen yang diketengahkan dan prosedur pengendalian ralat yang diperbetulkan. Pemaju penyemak imbas secara khusus menikmati spesifikasi baru untuk membuat halaman web lalai.

Apa lagi dari HTML5 ialah penukaran penyemak imbas web moden kami. Dengan spesifikasi baru ini web secara keseluruhan kini dilihat sebagai platform aplikasi untuk HTML (terutamanya HTML5), CSS, dan JavaScript untuk dibina. Juga, sistem ini adalah elegan mewujudkan keharmonian antara pereka web dan pemaju dengan menetapkan piawaian umum yang perlu dipatuhi oleh semua penyemak imbas.

Selain itu banyak elemen telah dicipta mewakili media digital umur baru. Ini termasuk dan yang besar untuk sokongan multimedia. Dalam sesetengah pelayar anda boleh melengkapkan pengesahan borang secara langsung dalam HTML. Memang masih ada keperluan berat untuk jQuery, kerana terdapat banyak pemaju perisian yang belum mengenali ciri-ciri tersebut. Sekiranya anda ingin senarai tanda, tandakan jadual W3Schools ini untuk mengetahui lebih lanjut mengenai mereka.

Kerangka HTML5 Bare

Saya dapati cara paling mudah untuk memahami apa-apa topik menyelam masuk ke dalamnya. Jadi saya akan membina templat rangka HTML5 yang sangat asas untuk halaman web. Saya termasuk beberapa elemen baru, yang saya berharap dapat mengkategorikan sedikit kemudian.

   Halaman HTML5 Pertama kami       Selamat datang, satu dan semua!
   Rumah
 Tentang kita
 Kenalan
 
 
 
   sesetengah kandungan di sini.
 
  tetapi ada juga di sini!
 
 
  Sesetengah notis hak cipta dan undang-undang di sini. Mungkin gunakan lambang © sedikit.

Segera ini tidak begitu berbeza dari halaman web HTML4 standard. Apa yang anda perhatikan ialah kami tidak perlu memasukkan sebarang tag penutup diri. Ini adalah berita yang benar-benar hebat kerana ia akan menjimatkan banyak masa dari projek pembangunan anda.

Bagi mereka yang tidak tahu, dalam draf XHTML terdapat banyak elemen yang dilabelkan diri sendiri. Ini akan berakhir dengan slash ke hadapan sebelum operator 'lebih besar' untuk menandakan anda tidak perlu memasukkan satu lagi tag penutup di tempat lain. Sebagai contoh, untuk membuat tag kata kunci meta yang anda gunakan tanpa memerlukan penutupan di tempat lain.

Peraturan ini masih terpakai dalam HTML5. Tetapi sekarang anda bahkan tidak memerlukan slash tambahan tambahan! adalah sepenuhnya sah, walaupun anda dibenarkan untuk terus menggunakan standard XHTML / XML. Untuk semua pelayar patuh standard kedua-dua elemen akan memberi cara yang sama.

Menentukan Kawasan Halaman kami

Sebilangan besar kod baru kami tidak boleh terlalu mengejutkan. Kami doctype sangat mudah berbanding sebelum ini, tidak memerlukan atribut badan yang berlebihan, dan maklumat dalam tajuk kami jelas dilabelkan. Bergerak saya ingin menumpukan perhatian anda pada kandungan di dalam diri kami tag. Ini termasuk semua struktur halaman utama. Saya dengan sengaja menggunakan beberapa tag HTML5 yang baik untuk menandakan bagaimana anda boleh memasukkannya dalam kerja anda sendiri.

Pertama anda akan melihat keseluruhan halaman terkandung dalam a div tag. Saya telah melabelkan ini dengan ID pembalut, bermakna ia membungkus kandungan keseluruhan laman web kami. Ini adalah berguna untuk menetapkan lebar atau kedudukan kedudukan maksimum sekitar skrin. Seterusnya saya telah memecahkan halaman ke dalam 3 elemen teras - satu

, teras

, dan pendek

. Di dalam kawasan pengepala adat saya, saya telah menambahkan paparan ringkas tajuk halaman, dan item navigasi menggunakan

tag sebagai bungkus.

Sekarang untuk

dengan ID dari teras Saya telah menggunakan sekunder penjelasan jelas. Ciri ini menjadikannya supaya kita boleh bebas mengapungkan 2 tiang di dalamnya dan kami tidak akan mengalami apa-apa kandungan yang jatuh atau fenomena aneh. Dan dengan betul demikian, seperti di dalam saya telah meletakkan dua

tag yang akan merangkumi kawasan kandungan utama kami dan bar sisi, masing-masing. Kami akan menggunakan gaya CSS untuk melayang mereka.

Begitu juga yang tenang footer tag berfungsi dengan baik untuk membezakan kandungan ini di antara halaman. Di dalam saya telah meletakkan perenggan yang boleh mengandungi maklumat hak cipta dan pemilikan. Tetapi peluang yang baik anda akan menyertakan sedikit lebih banyak kandungan, seperti pautan sekunder ke halaman anda.

Cerdik CSS3 Creative

Untuk menyelesaikan susun atur asas stensil ini, kita boleh menggunakan beberapa gaya CSS. Dalam template HTML5 asas saya menambah lembaran gaya CSS luaran jadi kami boleh memisahkan kawasan kod kami. Ini akan membersihkan banyak kekeliruan dalam jangka panjang apabila halaman dan gaya anda mula berjalan untuk halaman yang berbeza.

(Sumber Imej: W3C)

Jadi saya tidak menghabiskan banyak masa dengan CSS, tetapi cukup untuk mempamerkan beberapa kesan yang kemas. Pertama saya telah menggunakan sebahagian daripada tetapan jejari sempadan untuk membina kesan hover pautan navigasi yang sangat sejuk. Anda boleh menargetkan kesan yang sama dalam kod templat, hanya tambahkan baris berikut ke dalam dokumen CSS.

 nav display: block; margin-bottom: 10px;  nav ul senarai-gaya: tiada; saiz fon: 14px;  nav ul li display: inline;  nav ul li a display: block; terapung: kiri; padding: 3px 6px; warna: # 575c7d; teks-hiasan: tiada; font-weight: bold;  nav ul li a: hover background: # deff90; warna: # 485e0f; -webkit-border-radius: 3px; -moz-border-radius: 3px; jejari sempadan: 3px; padding: 3px 6px; margin: 0; teks-hiasan: tiada;

Satu lagi kesan yang kemas adalah jelaskan gaya. Ini bukan konsep yang sama sekali baru dengan CSS3, tetapi penting untuk membina laman web yang mematuhi piawaian. Sering kali apabila anda mencari kandungan terapung bersebelahan, anda akan mengalami gangguan kedudukan kereta. Ini disebabkan oleh margin dan kesilapan mengimbangi dalam menetapkan lebar mutlak untuk kandungan terapung anda.

Konsep ini boleh kelihatan agak mengelirukan, dan saya telah menambahkan sedikit kod di bawah untuk membantu. Pada asasnya kami menyasarkan dua

unsur-unsur, #ditinggalkan dan #right untuk bersesuaian dengan bahagian halaman mereka. Saya telah menetapkan masing-masing dengan lebar yang pasti dan terapung kiri, jadi mereka akan menyusunnya di sebelah satu sama lain. Sejak bekas kami div # core mengandungi penjelasan jelas kelas, ini bermakna semua kandungan dalaman boleh bergerak dengan bebas dan secara automatik membersihkan ruang tambahan selepas itu.

/ * teras halaman * / div # core display: block; jelas: kedua-duanya; margin-bottom: 20px;  bahagian # kiri lebar: 550px; terapung: kiri; margin: 0 15px;  bahagian # kanan float: left; lebar: 300px;  / * clearfix * / .clearfix: after content: "."; paparan: blok; jelas: kedua-duanya; keterlihatan: tersembunyi; garis ketinggian: 0; ketinggian: 0;  .clearfix display: block-inline;  html [xmlns] .clearfix display: block;  * html .clearfix ketinggian: 1%;

Bit kod ini mudah untuk bermula. Mereka juga berkaitan dengan kod template HTML5 kami yang dibina sebelum ini, jadi ini adalah amalan mudah. Tetapi apabila ia datang ke junkies web sebenar, anda akan melihat lebih banyak fungsi CSS3.

Sintaks CSS3 yang lebih dikenali

Untuk membina laman web HTML5 / CSS3 penuh, anda akan mula menggunakan beberapa stylesheet yang lebih kompleks. Ramai pereka tahu kod pendek (seperti fon: harta), kerana ini telah menjadi taraf sebelum CSS2.

Tetapi terdapat beberapa sifat baru dalam CSS3 yang banyak pereka tidak memikirkan. Kebanyakannya bukan hanya untuk estetika, tetapi juga termasuk kesan animasi. Berikut adalah senarai pendek yang menerangkan beberapa sifat yang anda boleh pertimbangkan bermain. Cuba googling untuk contoh sintaks jika anda merasa hilang.

kotak-bayang: menambah kesan bayangan yang kemas ke elemen halaman anda. Anda diberi 4 parameter yang menetapkan posisi kiri / kanan, atas / bawah, kabur dan warna. Ambil perhatian bahawa bayang-bayang kotak tidak dianggap ruang tambahan pada lebar / ketinggian asal.
bayang-bayang teks: mencipta bayang-bayang yang indah di belakang teks halaman anda. Dengan kesan yang tepat, surat-surat anda boleh muncul terus dari halaman.
jejari sempadan: Sudut bulat telah mengambil masa yang lama untuk menjadi piawaian yang diterima. Beberapa tahun yang lalu banyak pereka web 2.0 telah membuat imej latar belakang hanya untuk memenuhi sudut bulat dengan CSS. Tetapi menggunakan jejari sempadan CSS3, anda boleh memanipulasi lengkung setiap sempadan pada sebarang elemen.
kelegapan: Sepertinya harta mudah yang banyak pereka tidak dipertimbangkan. Opacity menjangka input berangka tunggal antara 0 hingga 1.0 (0% - 100%). Kesan ini berfungsi sebagai animasi hover.
@ font-face: Satu lagi contoh cantik mengenai beberapa gaya CSS kompleks dan tipografi. Pereka web kini dapat bekerja dengan fon langganan mereka sendiri dengan mendefinisikannya sebagai pembolehubah di dalam dokumen CSS anda.
kotak ukuran: secara kotak seting lalai akan menetapkan semua elemen anda sebagai kotak kandungan. Ini bermakna lebar, padding, dan sempadan semuanya dimasukkan ke dalam lebar maksimum. Tetapi ditetapkan untuk kotak sempadan anda boleh menentukan lebar maksimum (katakan 20px) dan menambah padding / sempadan akan memasukkan diri mereka ke dalamnya, dengan itu mengeluarkan ruang di dalam objek. Ia adalah harta yang hebat apabila anda menguasai kepintarannya.

Sifat-sifat ini semua mempunyai kesan dan kesukaran mereka. Saya tidak akan mengesyorkan untuk cuba menjejalkan mereka ke dalam halaman web anda. Tetapi amalan akan memberikan anda pemikiran yang jelas untuk masuk ke dalam membangunkan laman web dengan lebih mudah.

Satu lagi sintaks tambahan sintaks yang perlu disebut adalah pemilih atribut. Dengan CSS3, anda boleh sekarang mentakrifkan gaya berdasarkan atribut HTML (seperti jenis, href, tajuk) dan juga memberikan nilai khusus. Jadi, sebagai contoh, kita boleh menargetkan pautan dengan atribut tajuk yang ditetapkan dan memberi mereka satu set ikon latar belakang.

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

Jika anda melihat saya telah menyertakan a simbol karet sebelum tanda sama. Ini adalah pengendali yang mentakrifkan semua item senarai yang memegang awalan, ico. Sebagai alternatif, anda boleh menggantikan karet (^) dengan tanda dolar ($) untuk menyasarkan bidang akhiran tajuk anda. Dengan cara ini CSS3 tahu untuk menambah imej latar belakang di mana anda boleh menetapkan tajuk sebagai 'ico pertama' atau 'buku ico'. Baca lebih lanjut mengenai pemilih atribut sekiranya anda berminat.

Meletakkannya Semua Bersama

Di teras HTML5 dan halaman web CSS3 adalah kesederhanaan. Pemaju web cuba untuk membina laman web yang sangat kreatif dalam masa yang kurang dan dengan tekanan yang kurang. Ciri-ciri baru dalam HTML5 membolehkan ini dengan banyak ruang yang menggeliat. Dan menggunakan beberapa pemilih dan sifat CSS3 baru akan memberikan kelebihan dalam jangka masa panjang.

(Sumber Imej: W3C)

Tetapi sebaiknya anda juga memandangkan pengguna akhir. Proses membina laman web akhirnya berakhir selepas melancarkan laman web awam. Matlamat anda adalah untuk sila khalayak dengan maklumat yang mudah diakses, dan bukan hanya pembaca manusia, tetapi crawler enjin carian dan bot pengindeksan. Semantik telah banyak berubah untuk memasukkan elemen susun atur HTML5 yang baru, memisahkan susun atur halaman secara konsisten. Ia tidak pernah menjadi lebih mudah untuk membina seksyen navigasi dan footer kecil sejajar dengan semua pelayar web moden.

Sebaik sahaja anda menjadi selesa membina laman web HTML5, anda mungkin akan mula melihat ke animasi halaman. Malah, kesan kecil dengan JavaScript dan AJAX boleh dilakukan secara major meningkatkan pengalaman pengguna dan prestasi laman web. Walaupun ini bukan sebahagian daripada skop artikel, saya mengesyorkan toying sekitar dengan jQuery jika anda mempunyai masa. Perpustakaan sumber terbuka sangat mengejutkan dan membolehkan prototaip cepat di atas unsur halaman HTML5.

Sumber tambahan

Blogger di seluruh dunia telah membincangkan tren baru dalam HTML5 dan CSS3 dan berkongsi sumber kepada orang ramai. Masa berubah dan komuniti web berubah dengannya. Anda perlu mempertimbangkan beberapa bidang khusus untuk mengkaji dan membina kepentingan kecil.

Berikut adalah beberapa senarai tambahan, artikel dan tutorial yang boleh anda nikmati. Saya telah mengambil kebebasan membelah senarai ke dalam sumber HTML5 dan CSS3. Berdasarkan apa yang anda cari di sana, ada beberapa topik di sini untuk semua orang. Juga menikmati galeri ringkas tema HTML percuma yang boleh dimuat turun dalam talian!

HTML5

HTML5: 15 Eksperimen Mengilhamkan
HTML5: 19 Aplikasi Web
HTML5: 48 Potensi Demo Flash-Membunuh
Buat Borang Perhubungan HTML5 / CSS3 Berbasis Ajax

CSS3

CSS3: Panduan Permulaan
CSS3: Membuat Bidang Carian
CSS3: Menggunakan Kelas Pseudo
CSS3: 30+ Tutorial Berguna

Bonus: Templat & Tema HTML5

Syarikat Reka Bentuk

Bersedia untuk melangkah ke dunia HTML5 yang indah? Berikut adalah template HTML5 yang benar-benar percuma, dengan skrip jQuery dan fon langganan bersenjata untuk anda untuk menguji dengan bebas!

Tema HTML5 / CSS3

Tema berkuasa HTML5 / CSS3 ini mempunyai reka bentuk susun atur blog biasa untuk anda sama ada membina blog HTML5 anda sendiri dengan ciri-ciri yang luas, atau hanya menggali kod dan mempelajari sesuatu mengenainya.

Yoko

Yoko adalah tema WordPress moden yang bercakap tentang kelenturan dengan susun atur responsif berdasarkan pertanyaan media CSS3, yang merupakan keupayaan untuk menyesuaikan dengan saiz skrin yang berbeza, mengenali mengenainya!

Kelabu

Jika anda lebih suka gaya blog WordPress klasik, Gray mungkin untuk anda dengan ciri CSS3 terbina dalam seperti jejari sempadan, latar belakang berganda, bayang-bayang teks, dan lain-lain.

Panduan Permulaan untuk Kawan, Pelayar Media Sosial

Panduan Permulaan untuk Pembangunan IOS Antara Muka - Bahagian I

Panduan Pemula untuk Menetapkan Windows 7 Media Center