Mengerti HTML 5 dan CSS 5 untuk web design

Rata-rata pengunjung website anda tidak mungkin melihat dalam produk jadi, tetapi untuk web developer, potongan kecil dari HTML dan CSS code adalah merupakan produk jadi. HTML5 dan CSS3 memberikan pengembang web tool bahkan lebih yang dapat digunakan untuk mengekspresikan dirinya sendiri, di sini adalah gambaran dasar dari apa yang mereka buat dalam membangun website.

The Navigation Tag

Ini adalah suatu yang sering diabaikan dari HTML5. Singkatnya, anda harus selalu berusaha untuk membungkus link yang relevan di tag Nav (“<nav>”). Ini tidak tampak seperti kebanyakan, tetapi ke elemen sendiri ketika anda mempertimbangkan prospek SEO untuk website anda.

SEO (search engine optimization) adalah semua tentang membuat mesin pencari yang populer yakin, biasanya Google, akan mengambil website anda dalam daftar mereka. Semakin tinggi anda muncul dalam daftar ini, semakin banyak lalu lintas online anda cenderung untuk menerima dan bisnis yang lebih dari anda harapkan.
Google melihat link internal untuk membantu menentukan apa permintaan pencarian anda harus ditemukan. Link dalam navigasi anda cenderung menjadi indikasi yang baik bagi crawler dan menggunakan tag Nav berarti anda secara eksplisit mengatakan “ini adalah link yang paling penting pada website” dan membantu bot untuk memahami apa situs anda adalah sesuatu. Ini tidak berarti anda akan memerlukan untuk tidak menggunakan tag Nav, tetapi anda harus berusaha untuk melakukan segala upaya untuk membantu crawler mesin pencari dalam cara apapun yang anda bisa.

Headers and Footers

Tag ini cukup sederhana, tetapi melayani tujuan penting. Header dan footer (“<header>” dan “<footer>” masing-masing) bekerja dengan baik dengan SEO. Tag memisahkan header dan footer item dari copy utama.


Header dan Footer keduanya berbeda dengan tag <div> sederhana, dengan menjadi diidentifikasi sebagai sesuatu yang berbeda, mesin pencari dapat membedakan informasi dari konten lainnya dan peringkat website anda sesuai tag tag tersebut.

Video, Audio and Output

Multimedia menjadi semakin populer dengan pengguna dan pergi adalah hari-hari di mana pengunjung hanya dapat mengkonsumsi informasi dengan teks. Tags untuk video (“<video>”) dan audio (“<audio>”) mudah untuk menerapkan dan HTML5 memungkinkan kustomisasi penuh dengan JavaScript dan berbagai codec – sehingga anda dapat dengan mudah mendapatkan konten yang bekerja dengan cara yang anda inginkan.

Dalam cara yang sama, menggunakan HTML5 output (“<output>”) tag untuk kustomisasi yang lebih baik. Dengan keluaran untuk JavaScript, anda dapat lebih nyaman mengedit dan mengubah apapun elemen JavaScript yang Aanda miliki di halaman, dari pada mencoba untuk melakukannya melalui HTML. Kedengarannya cukup sederhana dan itu benar-benar membuat proses lebih mudah untuk menyelesaikan.
 

Articles

Menawarkan pengunjung anda pilihan dalam bagaimana mereka mengkonsumsi konten anda adalah penting jika anda ingin semua jenis konsumen. Bagi mereka yang suka artikel yang baik, ada tag article (“<article>”).
Developer dapat menggunakan tag article untuk menandai potongan-potongan individual konten seperti posting blog, mengurangi kebutuhan untuk tag Div tak berujung. Selanjutnya memisahkan teks utama dari sebuah situs web setelah header dan footer sebelum anda menggunakan tag article berarti kode lebih jelas dan optimasi potensial untuk mesin pencari.
Tag article ini mungkin salah satu tag yang paling membantu dalam hal SEO. Meskipun tidak ada yang diatur sebelumnya, ada kemungkinan bahwa crawler mesin pencari akan menggunakan tag ini untuk memahami konten di situs anda dan berat dalam algoritma sesuai. Google mencintai konten dan dengan membungkus teks dalam tag article, anda mengatakan Google bahwa anda memiliki konten di situs, yang akan membantu situs anda untuk peringkat lebih tinggi. Bisa juga bahwa kata kunci / jangkar teks dalam tag Pasal akan dilakukan pembobotan lebih dari kata kunci di luar tag Pasal seperti anda mengatakan bots mesin pencari anda telah menulis konten spesifik tentang istilah pencarian. anda juga dapat membantu usaha SEO anda dengan memberikan Judul artikel (“<title>”) atribut untuk alasan yang sama.

Canvas

Digunakan untuk memasukkan berbagai grafis, tag kanvas (“<canvas>”) adalah fitur yang lebih modern dari HTML 5. Hal ini memungkinkan kustomisasi yang lebih besar dalam desain, sebagai tag tertentu dapat membungkus mana grafis dimaksudkan, gambar atau grafik pergi untuk membuat desain website yang lebih jelas dan kode anda jadi tidak berantakan.

Figures and Captions

Kedua berjalan beriringan dan membuat proses yang panjang jauh lebih pendek. Dengan menggunakan tag figure (“<figure>”) anda dapat mengisolasi grafik atau gambar. Sebuah keterangan (“<figcaption>”) tag kemudian dapat digunakan untuk menyediakan teks captioning untuk angka tertentu. Hal ini membuat tugas menggabungkan teks yang relevan dengan gambar jauh lebih mudah, karena tag keterangan membantu menentukan mana judul harus (dekat gambar, jelas).

Anda juga dapat menggunakan tag dalam tujuan yang sama dengan header, footer, dan bagian artikel.

Details

Jika anda belum pernah mendengar tag ini, itu karena itu masih bukan fitur pokok tetapi tetap menjadi lebih dan lebih umum. Singkatnya, detail (“<details>”) memungkinkan untuk mudah drop down teks untuk dimasukkan. Lihat contoh disini.
Manfaat dari drop down text banyak. Mereka menyimpan halaman dan melihat yang berantakan, sehingga anda dapat fokus pada hanya menjaga informasi yang relevan pada halaman. Anda bahkan bisa menangkap berapa banyak pengunjung mencari informasi lebih lanjut dengan beberapa JavaScript dan menyesuaikan upaya pemasaran anda berdasarkan pada data.

Utilising CSS3

Cascading Style Sheets, atau CSS, adalah lembar bahasa style yang dapat digunakan bersama HTML5. CSS2 saat ini digunakan oleh World Wide Web Consortium ( dikenal sebagai W3C) – sebuah organisasi yang memvalidasi yang terbaik dari apa kode yang digunakan secara online. Snapshot stabil terbaru dalam perkembangan mereka dari CSS adalah pada tahun 2010. Namun, W3C saat ini bekerja dengan mengadopsi CSS3, dengan beberapa modul yang sudah disetujui.
CSS3 memungkinkan anda untuk lebih fokus pada sisi penyajian website, meninggalkan HTML5 untuk struktur umum. CSS3 menawarkan keuntungan terbaru dalam font, warna dan berbagai latar belakang dan fitur border.
Namun, perlu dicatat bahwa tidak semua browser yang kompatibel dengan CSS3. Beberapa efektif dengan modul tertentu, sedangkan beberapa yang tidak. Firefox, misalnya, saat ini tidak dapat mendukung refleksi. Safari dan Chrome, di sisi lain, mendukung segala sesuatu kecuali bergulir melimpah, sayangnya, tidak ada web browser utama saat menerima modul ini.
Di bagian bawah skala, Internet Explorer mendukung modul sangat sedikit, meskipun versi terbaru yang menunjukkan perbaikan dalam hal ini. Berikut ini merupakan tabel rinci browser support untuk CSS3.

Pseudo Class Selectors and Attributes

Penyeleksi Pseudo class dapat digunakan untuk menambahkan informasi tambahan fitur untuk tag dan divisi. Mereka mudah dikenali karena mereka didahului oleh titik. Hover, misalnya, adalah pemilih sederhana yang dapat menambahkan teks layar ketika mouse melayang di atas sebuah tag yang diberikan.
Pada CSS3, anda dapat menentukan root (“: root:”) elemen dalam dokumen. Dalam HTML, ini selalu menjadi “<html>” tapi fitur ini sekarang lebih sangat ditampilkan dalam CSS3. Selektor class tambahan di CSS3 memungkinkan lebih besar pertandingan-kontrol antara siblings. Ini datang dikombinasikan dengan fleksibilitas yang lebih besar yang memungkinkan untuk fungsi-fungsi yang lebih besar antara unsur-unsur terkait. Hal ini membuat seluruh proses lebih intuitif dan saling terkait, sehingga membuat hasil keseluruhan jauh lebih mengesankan.


Demikian juga, penyeleksi atribut baru memberikan kontrol yang lebih besar bit tertentu yang berbeda dari elemen anda. Anda dapat memeriksa untuk pertandingan dengan unsur-unsur lain, atau menetapkan atribut untuk menciptakan efek ini. Format berikut ini digunakan untuk memilih atribut: “elemen [att ^ = val]“
Jadi contoh nyata bisa terlihat seperti:


Selector ini menemukan setiap paragraf (“<p>”) dengan judul (“<title>”) atribut yang dimulai dengan (“^”) SEO (“” SEO “”) dan perubahan warna teks menjadi biru (“color:blue;”)

Substring Matching Attribute Selectors

Saya telah menyinggung kekuatan CSS3 dengan pemilih substring atribut yang sesuai dimulai dengan (“^”). Pada kenyataannya, anda dapat memanfaatkan “berakhir dengan” substring pemilih (“$”) dan “berisi” substring pemilih (“*”) untuk lebih mempersempit apa atribut yang anda pilih untuk styling.