Ръководство за начинаещи за изграждане на HTML5 / CSS3 уеб страници

Тази статия е част от нашата "Серия уроци на HTML5 / CSS3" - посветен да ви помогне да сте по-добър дизайнер и / или разработчик. Натисни тук за да видите повече статии от същата серия.

HTML5 и CSS3 заляха мрежата от буря само за 2 години. Преди тях имаше много промени в семантиката в начина, по който се очаква уеб дизайнерите да създават уеб страници, а с пристигането им се появиха страхотни поддръжка като алтернативни медии, XML-стилови тагове и прогресивни входни атрибути за уеб дизайнерите, за да постигнат мечтателен функции като анимация.

Въпреки че повечето разработчици изглежда демонстрират потенциални още сложни демонстрации, HTML5 / CSS3 не са истински ракетна наука, а аз ще ви преведа през релаксиращия процес за изграждане на стандартна HTML5 / CSS3 уеб страница с всеобхватно, но задълбочено обяснение и тада! Бонуси като ресурси за обучение и безплатни HTML5 шаблони са достъпни за вас, така че използвайте тази възможност, за да започнете пътуването си в HTML5!

Промени между HTML4 и HTML5

Може би се чудите защо е важно да се преминете към HTML5. Има много причини, но най-вече защото ще бъдете работа с глобалните интернет стандарти като всеки друг дизайнер. По този начин ще намерите повече поддръжка онлайн и вашия уебсайтовете ще се визуализират правилно в модерните браузъри които постоянно се подобряват.

(Източник на изображението: W3C)

Сравнението между HTML4 и HTML5 е трудно да се забележи на повърхностно ниво. От разглеждането на новия проект на HTML5 можете да видите включени елементи и коригирани процедури за обработка на грешки. Разработчиците на браузъри специално се радват на новите спецификации за визуализиране на уеб страници по подразбиране.

Нещо повече от HTML5 е преобразуването на нашия модерен уеб браузър. С тези нови спецификации мрежата като цяло сега се разглежда като платформа за приложения за HTML (особено HTML5), CSS, и JavaScript да бъдат изградени върху. Също така, тази система елегантно създава хармония между уеб дизайнерите и разработчиците чрез определяне на общи стандарти, които следва да следват всички браузъри.

Освен това са създадени много елементи представляват цифрови медии от новата възраст. Те включват и които са огромни за мултимедийната поддръжка. В някои браузъри можете да попълните валидирането на формуляри директно в HTML. Разбира се, все още има голяма нужда от jQuery, тъй като има много разработчици на софтуер, които все още не са разпознали функциите. Ако искате списък с етикети, проверете тази таблица на W3Schools, за да научите повече за тях.

Скелет с голи HTML5

Намирам най-лесният начин да разберем всяка тема гмуркайте право в нея. Така че ще създам много основен HTML5 скелетен шаблон за уеб страница. Включих няколко от по-новите елементи, които се надявам да категоризирам малко по-късно.

        
 
 
Добре дошли, всички!
  
 
 
 
някакво съдържание тук.
 
 
 
но някои тук също!
 
 
  
   

Веднага не се различава много от стандартната HTML4 уеб страница. Може да забележите, че ние не е необходимо да включвате повече самозатварящи се маркери. Това е наистина прекрасна новина, тъй като ще спести много време на разстояние от вашите проекти за развитие.

За онези, които не знаят, в проектите на XHTML има много етикетирани елементи самозатварящ се. Те ще завършат с наклонена черта пред оператора "по-голямо от", за да покажат, че няма да е необходимо да включвате друг затварящ маркер другаде. Например, да създадете маркер с мета ключови думи, който бихте използвали без необходимост от затваряне другаде.

Това правило все още се прилага в HTML5. Но сега вие дори не се нуждаете от допълнителна наклонена черта! е напълно валиден, въпреки че можете да продължите да използвате стандарта XHTML / XML. За всички съвместими със стандартите браузъри и двата елемента ще се визуализират по същия начин.

Дефиниране на нашата страница

По-голямата част от новия ни код не трябва да е твърде шокиращ. наш doctype е весело по-просто от всякога, няма нужда от прекомерни атрибути на тялото, и информацията в нашата рубрика е ясно обозначена. Придвижвайки се, бих искал да насоча вниманието ви към съдържанието в нашия маркер. Това включва цялата структура на главната страница. Целенасочено използвах няколко хубави HTML5 тагове, за да обозначим как можете да ги включите в собствената си работа.

Първо ще видите цялата страница капсулирани в a Разделение свободен край. Наричах го с идентификатор на халат, което означава, че тя се обвива около цялото съдържание на нашия уебсайт. Това е полезна за задаване на максимална ширина или съдържание на екрана. След това разделих страницата на 3 основни елемента - един

, ядро

, и кратко

Ръководство за начинаещи за Flock, браузър за социални медии

Ръководство за начинаещи за разработката на iOS Интерфейсът - част I

Ръководство за начинаещи за създаване на Windows 7 Media Center