Príručka pre začiatočníkov Vytváranie webových stránok HTML5 / CSS3

Tento článok je súčasťou nášho "HTML5 / CSS3 Tutoriály séria" - ktorá vám pomôže urobiť z vás lepšieho dizajnéra a / alebo vývojára. Kliknite tu zobraziť ďalšie články z rovnakej série.

HTML5 a CSS3 zmietli web po búrke iba za 2 roky. Pred nimi bolo množstvo zmenených sémantiek v spôsobe, akým sa od webových dizajnérov očakáva, že vytvoria webové stránky, a svojím príchodom príde zopár úžasných podpor, ako sú alternatívne médiá, tagy štýlu XML a progresívne vstupné atribúty pre web dizajnérov, ako je animácia.

Hoci sa zdá, že väčšina vývojárov predvádza potenciálne ešte zložité ukážky, HTML5 / CSS3 nie sú v skutočnosti raketová veda a ja vás budem prechádzať relaxačným procesom s cieľom vytvoriť štandardnú webovú stránku HTML5 / CSS3 s podrobným a hlbokým vysvetlením a tada! Bonusy ako vzdelávacie zdroje a bezplatné šablóny HTML5 sú pre vás k dispozícii, preto využite túto šancu na spustenie cesty HTML5!

Zmeny medzi HTML4 a HTML5

Možno sa zaujímate, prečo je dokonca dôležité prepnúť na HTML5. Existuje nespočetné množstvo dôvodov, ale väčšinou preto, lebo budete pracovať s globálnymi internetovými štandardmi ako každý iný dizajnér. Týmto spôsobom nájdete viac podpory online a vašu webové stránky budú správne vykresľovať v moderných prehliadačoch ktoré sa neustále zlepšujú.

(Zdroj obrázku: W3C)

Porovnanie medzi kódmi HTML4 a HTML5 je ťažké zistiť na úrovni povrchu. Pri prezeraní nového konceptu HTML5 sa zobrazujú zobrazené prvky a opravené postupy na spracovanie chýb. Vývojári prehliadača si osobitne užívali nové špecifikácie pre vykresľovanie predvolených webových stránok.

A čo viac z HTML5 je konverzia nášho moderného webového prehliadača. S týmito novými špecifikáciami sa web ako celok teraz vníma ako aplikačnej platformy pre HTML (hlavne pre HTML5), CSS a JavaScript. Tiež tento systém elegantne vytvára harmóniu medzi dizajnérmi webu a vývojármi stanovením spoločných štandardov, ktoré by mali sledovať všetky prehliadače.

Okrem toho boli vytvorené mnohé prvky predstavujú nové digitálne médiá. Tie obsahujú a ktoré sú obrovské pre multimediálnu podporu. V niektorých prehliadačoch môžete dokončiť validáciu formulára priamo v jazyku HTML. Pripúšťa sa, že stále existuje veľká potreba pre jQuery, pretože existuje veľa vývojárov softvéru, ktorí ešte nerozpoznali funkcie. Ak by ste chceli zoznam značiek skontrolovať túto tabuľku W3Schools, dozviete sa viac o nich.

Bare HTML5 Skeleton

Myslím, že najjednoduchší spôsob, ako pochopiť akúkoľvek tému, je ponorte sa priamo do nej. Takže budem vytvárať veľmi základnú šablónu skeletu HTML5 pre webovú stránku. Zahrnoval som niekoľko novších prvkov, ktoré dúfam, že sa trochu neskôr rozdelím.

        
 
 
Vitajte, jeden a všetci!
  
 
 
 
nejaký obsah tu.
 
 
 
ale aj tu!
 
 
  
   

Hneď sa to nelíši od štandardnej webovej stránky HTML4. Možno si všimnete, že my nemusia obsahovať žiadne ďalšie samozatváracie značky. To je naozaj skvelá správa, pretože ušetrí veľa času vašich rozvojových projektov.

Pre tých, ktorí nevedia, v XHTML konceptov bolo mnoho prvkov označených samočinne sa zatvárajúce. Tie by sa skončili s lomítkom dopredu pred operátorom "väčší než", aby ste naznačili, že nebudete musieť zahrnúť iný záverečný štítok. Ako príklad vytvoríte značku meta kľúčových slov, ktorú by ste použili bez potreby uzavretia inde.

Toto pravidlo platí aj pre HTML5. Ale teraz vy nepotrebujeme ani extra lomítko! je úplne platný, hoci máte povolené používať štandard XHTML / XML. Pre všetky prehliadače kompatibilné s normami sa obidva prvky stanú rovnakým spôsobom.

Definovanie našich oblastí stránok

Väčšina nášho nového kódu by nemala byť príliš šokujúca. náš doctype je veselo jednoduchšie než kedykoľvek predtým, nie sú potrebné prílišné atribúty tela, a informácie v našej hlave sú jasne označené. Pokračujem Rád by som zameral svoju pozornosť na obsah vo vnútri nášho tag. To zahŕňa celú štruktúru hlavnej stránky. Zmysluplne som použil niekoľko pekných značiek HTML5 na označenie spôsobu ich zahrnutia do vlastnej práce.

Najprv sa zobrazí celá stránka zapuzdrené v a div štítok. Označil som to ID s ID obálka, čo znamená, že obklopuje celý náš obsah. Toto je užitočné na nastavenie maximálnej šírky alebo polohy obsahu okolo obrazovky. Ďalej som zlomil stránku do troch základných prvkov - jedného

, jadro

, a krátke

Príručka pre začiatočníkov k Flock, prehliadač sociálnych médií

Príručka pre začiatočníkov pre vývoj iOS Rozhranie - časť I

Príručka pre začiatočníkov pre nastavenie Windows 7 Media Center