Başlangıç ​​Kılavuzu HTML5 / CSS3 Web Sayfaları Oluşturma

Bu makale bizim bölümümüzün bir parçası. "HTML5 / CSS3 Dersleri serisi" - sizi daha iyi bir tasarımcı ve / veya geliştirici yapmanıza yardımcı olmak için. Buraya TIKLAYIN Aynı serideki daha fazla makale görmek için.

HTML5 ve CSS3, web'i yalnızca 2 yıl içinde fırtınayla taradı. Onlardan önce, web tasarımcılarının web sayfaları yaratmalarının beklendiği şekilde bir çok değişmiş anlambilim vardı ve geldiklerinde alternatif medya, XML tarzı etiketler ve web tasarımcılarının hayal kurmaya ulaşmak için aşamalı girdi nitelikleri gibi harika destekleri bir araya getirdiler. animasyon gibi özellikler.

Çoğu geliştirici potansiyel ancak karmaşık demoları sergilemesine rağmen, HTML5 / CSS3 gerçekten roket bilimi değildir ve sizi kapsamlı ancak derinlemesine bir açıklama ve tada ile standart bir HTML5 / CSS3 web sayfası oluşturmak için rahatlatan süreç boyunca size yol göstereceğim! Öğrenme kaynakları ve ücretsiz HTML5 şablonları gibi bonuslar sizin için kullanılabilir; bu nedenle, HTML5 yolculuğunuzu başlatmak için bu fırsatı kullanın!

HTML4 ve HTML5 arasındaki değişiklikler

HTML5'e geçmenin neden önemli olduğunu merak ediyor olabilirsiniz. Çok sayıda sebep var, ama çoğunlukla siz olacağınız için küresel İnternet standartlarıyla çalışmak diğer her tasarımcı gibi. Bu şekilde çevrimiçi olarak daha fazla destek bulacaksınız. web siteleri modern tarayıcılarda düzgün şekilde görüntülenecektir sürekli iyileştirilen.

(Resim Kaynağı: W3C)

HTML4 ve HTML5 arasındaki karşılaştırmanın yüzey seviyesinde tespit edilmesi zordur. Yeni HTML5 taslağını görüntülerken, öne çıkan öğeleri ve düzeltilmiş hata işleme prosedürlerini görebilirsiniz. Tarayıcı geliştiricileri, varsayılan web sayfalarını oluşturmak için yeni özelliklerden özellikle yararlandı.

HTML5'ten daha fazlası, modern web tarayıcımızın dönüştürülmesidir. Bu yeni özelliklerle, web artık bir bütün olarak görülüyor uygulama platformu oluşturulacak HTML (özellikle HTML5), CSS ve JavaScript için. Ayrıca, bu sistem zarif bir şekilde web tasarımcıları ve geliştiricileri arasında uyum yaratır tüm tarayıcıların izlemesi gereken ortak standartları belirleyerek.

Ek olarak, birçok eleman yaratılmıştır. yeni çağ dijital medyasını temsil eder. Bunlar arasında ve multimedya desteği için çok büyük olan Bazı tarayıcılarda form doğrulama işlemini doğrudan HTML ile tamamlayabilirsiniz. JQuery için hala büyük bir ihtiyaç olduğu kabul edilmektedir, çünkü henüz özellikleri tanımayan birçok yazılım geliştiricisi vardır. Bir etiket listesi istiyorsanız, onlar hakkında daha fazla bilgi edinmek için bu W3Schools tablosuna bakın..

Çıplak HTML5 İskelet

Herhangi bir konuyu anlamak için en kolay yolu bulmaktır tam içine dalmak. Bu yüzden bir web sayfası için çok basit bir HTML5 iskelet şablonu oluşturacağım. Biraz daha sonra kategorize etmeyi umduğum yeni elementlerden birkaçını dahil ettim..

        
 
 
Hoşgeldin, hepimiz!
  
 
 
 
burada bazı içerik.
 
 
 
ama bazıları da burada!
 
 
  
   

Hemen bu, standart bir HTML4 web sayfasından çok farklı değil. Fark edebileceğin şey biz olduğumuz. daha fazla kendi kendine kapanan etiket eklemenize gerek yok. Bu gerçekten harika bir haber çünkü geliştirme projelerinizden çok zaman kazandıracak.

Bilmeyenler için, XHTML taslaklarında etiketli birçok unsur vardı. kendi kendine kapanan. Bunlar, başka bir yerde başka bir kapanış etiketi eklemeniz gerekmediğini belirtmek için 'büyüktür' operatöründen önce bir eğik çizgiyle sona erer. Örnek olarak, kullanacağınız bir meta anahtar kelime etiketi oluşturmak için kapanmaya gerek kalmadan başka yerde.

Bu kural hala HTML5'te geçerlidir. Ama şimdi sen fazladan bir eğik çizgi bile gerekmiyor! tamamen geçerli, Bununla birlikte, XHTML / XML standardını kullanmaya devam etmenize izin verilir. Tüm standartlara uyumlu tarayıcılar için her iki öğe de aynı şekilde işleyecektir.

Sayfa Alanlarımızı Tanımlama

Yeni yasalarımızın çoğu şok edici olmamalıdır. bizim doctype komik bir şekilde basittir her zamankinden, aşırı vücut özelliklerine gerek yok, ve başlıklarımızdaki bilgiler açıkça etiketlenmiştir. Devam etmek, dikkatinizi içeriğindeki içeriğe odaklamak istiyorum. etiket. Bu, ana sayfanın tüm yapısını içerir. Kendi işinize nasıl ekleyebileceğinizi göstermek için bilerek güzel bir HTML5 etiketi kullandım..

İlk önce sayfanın tamamını göreceksiniz içinde kapsüllenmiş div etiket. Bunu bir kimliği ile etiketledim sargı, yani tüm web sitemizin içeriğini tamamlıyor. Bu maksimum genişlik veya konum içeriği ayarlamak için kullanışlıdır ekranda. Sonra sayfayı 3 ana öğeye ayırdım - bir

, bir çekirdek

, ve kısa

Sosyal Medya Tarayıcı Flock İçin Başlangıç ​​Kılavuzu

IOS Geliştirme İçin Yeni Başlayanlar Arayüzü - Bölüm I

Windows 7 Media Center'ı Kurmaya Yeni Başlayanlar Kılavuzu