Průvodce pro začátečníky k vytváření webových stránek HTML5 / CSS3

Tento článek je součástí našeho "HTML5 / CSS3 Tutorials series" - které jsou určeny k tomu, abyste z vás učinili lepšího návrháře a / nebo vývojáře. Klikněte zde zobrazit více článků ze stejné série.

HTML5 a CSS3 mají web za bouři za pouhé 2 roky. Před nimi došlo k mnoha změnám sémantiky ve způsobu, jakým se od webových designérů očekává, že budou vytvářet webové stránky, as jejich příchodem přichází řada úžasných podpůrných prostředků, jako jsou alternativní média, tagy ve stylu XML a progresivní vstupní atributy pro webové designéry, aby se dosáhlo snového vzhledu. funkce jako animace.

I když se zdá, že většina vývojářů předvádí potenciální, ale komplikované dema, HTML5 / CSS3 nejsou ve skutečnosti raketovou vědou, a já vás budu procházet relaxačním procesem, který buduje standardní webovou stránku HTML5 / CSS3 s úplným a podrobným vysvětlením a tada! Bonusy, jako jsou studijní zdroje a bezplatné šablony HTML5, jsou pro vás k dispozici, takže využijte této příležitosti k zahájení cesty HTML5!

Změny mezi HTML4 a HTML5

Možná se divíte, proč je důležité přepnout do HTML5. Existuje spousta důvodů, ale hlavně proto, že budete práce s globálními internetovými standardy jako každý jiný designér. Tímto způsobem najdete další podporu online a vaši podporu webové stránky budou vykreslovat správně v moderních prohlížečích které se neustále zlepšují.

(Zdroj obrázku: W3C)

Srovnání HTML4 a HTML5 je obtížné rozpoznat na úrovni povrchu. Při prohlížení nového konceptu HTML5 můžete vidět vybrané prvky a opravené procedury zpracování chyb. Vývojáři prohlížečů se zvláště těšili novým specifikacím pro vykreslování výchozích webových stránek.

A co víc, z HTML5 je konverze našeho moderního webového prohlížeče. S těmito novými specifikacemi je nyní web jako celek vnímán jako aplikační platformu pro HTML (zejména HTML5), CSS a JavaScript, na kterých se má stavět. Také tento systém elegantně vytváří harmonii mezi web designéry a vývojáři stanovením společných standardů, které by měly dodržovat všechny prohlížeče.

Navíc bylo vytvořeno mnoho prvků představují novodobá digitální média. Tyto zahrnují a které jsou obrovské pro multimediální podporu. V některých prohlížečích můžete provádět validaci formulářů přímo v HTML. Připouští se, že stále existuje velká potřeba pro jQuery, protože existuje mnoho vývojářů softwaru, kteří mají funkce ještě rozpoznat. Pokud byste chtěli seznam značek zkontrolovat tuto tabulku W3Schools se dozvědět více o nich.

Holé HTML5 Skeleton

Nejjednodušší způsob, jak porozumět jakémukoli tématu, je ponořte se do něj. Takže budu budovat velmi základní HTML5 kostru šablony pro webovou stránku. Zahrnula jsem několik novějších prvků, o kterých doufám, že o něco později kategorizuji.

        
 
 
Vítejte, všichni!
  
 
 
 
nějaký obsah zde.
 
 
 
ale i tady!
 
 
  
   

Hned to není příliš odlišné od standardní webové stránky HTML4. Můžete si všimnout, že my nemusí obsahovat žádné další samouzavírací značky. To je opravdu báječná zpráva, protože ušetří spoustu času z vašich rozvojových projektů.

Pro ty, kteří nevědí, bylo v XHTML návrzích mnoho prvků označeno samozavírací. Ty by skončily lomítkem před operátorem „větším než“, což by znamenalo, že byste nemuseli zahrnout další uzavírací značku jinde. Chcete-li například vytvořit značku meta klíčových slov, kterou byste použili bez nutnosti uzavření někde jinde.

Toto pravidlo stále platí v HTML5. Ale teď nepotřebujete ani extra lomítko! je úplně platný, i když máte povoleno pokračovat v používání standardu XHTML / XML. Pro všechny prohlížeče vyhovující standardům budou oba prvky vykresleny stejným způsobem.

Definování oblastí stránek

Většina našeho nového kódu by neměla být příliš šokující. Náš doctype je vesele jednodušší než kdy jindy, nepotřebujete přílišné atributy těla, a informace v naší rubrice jsou jasně označeny. Chtěla bych se zaměřit na obsah uvnitř našeho webu štítek. To zahrnuje celou strukturu hlavní stránky. Účelně jsem použil pár pěkných HTML5 tagů, abych naznačil, jak je můžete zahrnout do své vlastní práce.

Nejprve uvidíte celou stránku zapouzdřený uvnitř div štítek. Toto jsem označil ID obal, to znamená, že se obalí kolem celého obsahu naší webové stránky. Tohle je pro nastavení maximální šířky nebo polohy na obrazovce. Dále jsem rozdělil stránku na 3 základní prvky - jednu

, jádro

, a krátký

Průvodce pro začínající uživatele Flock, prohlížeč sociálních médií

Příručka pro začátečníky k vývoji iOS Rozhraní - část I

Průvodce pro začátečníky pro nastavení Windows 7 Media Center