Посібник для початківців для побудови веб-сторінок HTML5 / CSS3

Ця стаття є частиною нашої "Серія навчальних посібників HTML5 / CSS3" - присвячений допомозі зробити вас кращим дизайнером та / або розробником. Натисніть тут щоб побачити більше статей з тієї ж серії.

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

Хоча більшість розробників, здається, демонструють потенційні, але складні демонстрації, 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 div тег. Я позначив це з ідентифікатором обгортка, це означає, що вона обертається навколо всього вмісту веб-сайту. Це корисно встановити максимальний вміст ширини або положення навколо на екрані. Далі я розбив сторінку на 3 основні елементи - один

, ядро

, і короткий

Посібник для початківців по Flock, браузер соціальних медіа

Посібник для початківців для розробки iOS Інтерфейс - Частина I

Посібник для початківців для налаштування медіацентру Windows 7