HTML та CSS для початківців

HTML & CSS для початківців (частина 01): Перший погляд на HTML, CSS та інше.

Усі відео з уроку

Мова гіпертекстової розмітки - це основна мова веб. Перша версія цієї мови була опублікована у 1992 році. З того часу HTML пройшов багато змін і модифікацій і наразі досяг версії 5. (Проте, хоч версія 5 фактично ще не була офіційно прийнята як стандарт, вона вже досить добре підтримується в сучасних браузерах).

HTML є так званою мовою розмітки, за допомогою якої можна структурувати вміст. Для форматування вмісту відповідальні стилеві таблиці. Про них буде докладніше нижче.

За подальший розвиток HTML відповідає World Wide Web Consortium (скорочено W3C).

HTML & CSS для початківців (Частина 01): Перший погляд на HTML, CSS та інші.

Рекомендується періодично відвідувати веб-сайт W3C, щоб залишатися в курсі останніх подій у сфері вебу.

При вивченні HTML ключовим питанням є: Яку версію слід використовувати? Очевидно, що мова як HTML постійно оновлюється. Нові елементи додаються, старі вилучаються.

Ось найважливіші версії або важливі етапи в історії HTML:

• HTML (листопад 1992 року): Це була перша версія. Тут увага була зосереджена виключно на текстових документах.

• HTML 2.0 (листопад 1995 року): Тепер також є елементи для зображень і форм.

• HTML 4.0 (грудень 1997 року): Вводяться стилі, фрейми та скрипти.

• XHTML 1.0 (січень 2000 року): Це переформулювання HTML 4.0 за допомогою XML.

• HTML5 (квітень 2009 року): Це все ще проект, тобто ще не є офіційним стандартом.

У наступних підручниках акцент буде зроблено на HTML5. Оскільки з HTML5 має відбутися поворот у світі HTML. Нова специфікація має низку цікавих нововведень, зокрема, значно зручніші форми, панелі прогресу, графічні елементи та покращена структура документу. Крім того, з новим стандартом можна вбудовувати веб-сторінки відео без додаткових плагінів та є інтерфейс для перетягування та розміщення.

Перший концепт HTML5 був опублікований вже у 2004 році робочою групою Web Hypertext Application Technology (WHATWG) під назвою Web Applications 1.0.

HTML & CSS для початківців (Частина 01): Перший погляд на HTML, CSS та інше.



До сьогодні HTML5, хоча і не було офіційно опубліковано як стандарт, браузери вже додали багато функцій HTML5 в свої продукти. Це не дивно, адже WHATWG включає в себе альянс браузерних виробників, таких як Apple, Mozilla та Opera. WHATWG було засновано відповідно до повільного розвитку веб-стандартів з боку World Wide Web Consortium (W3C).

Тут можна поставити питання, що підштовхнуло виробників браузерів розробляти власний стандарт HTML. Адже до цього розвиток HTML був повністю в руках W3C. З погляду виробників браузерів проблеми почались з того, що W3C перетворило HTML 4.01 у XHTML 1 без особливих концептуальних корекцій. Початково W3C хотіло встановити XHTML 1 як перший крок у напрямку розробки XML-орієнтованого вебу. У кінці розвитку мав стояти XHTML 2. Саме ця концентрація W3C на XML розгнівала виробників браузерів. З їх точки зору підхід XML насправді не практичний і не відтворює реальні побажання користувачів. (Хоча W3C, звісно, має інший погляд).

З 2007 року W3C та WHATWG спільно розробляють специфікацію HTML5 або працюють над нею. Актуальну інформацію щодо HTML5 можна знайти на http://www.w3.org/TR/html5/.

HTML & CSS для початківців (Частина 01): Перший погляд на HTML, CSS та інші.



У наступних підручниках акцент буде зроблено на HTML5.

CSS для форматування

Ви, напевно, вже користувалися шаблонами документів в Word або інших текстових процесорах. Отож, якщо ви, наприклад, виділите рядок, ви зможете вибрати формат шаблону.

HTML & CSS для початківців (частина 01): Перший погляд на HTML, CSS та інше.



Залежно від того, яке форматування встановлено для цього шаблону документа, відображається заголовок. При зміні шаблону документа також змінюється вигляд заголовка.

Що має спільного Word із HTML? Також для HTML-документів існують шаблони. Ці шаблони можна визначити за допомогою CSS (Каскадні таблиці стилів). Завдяки CSS можна, наприклад, встановити, що головні заголовки (h1) повинні бути показані з розміром 22 пікселів, зеленим кольором і шрифтом Arial.

Стилізовані таблиці дозволяють жорстко розділити структуру та макет. Для структурування документів використовується HTML, а вигляд елементів визначають за допомогою CSS.

Що вам знадобиться

У наступних підручниках ви поетапно ознайомитесь з HTML та CSS. Для створення власних веб-сторінок на основі HTML та CSS вам насправді не знадобиться складного програмного забезпечення. У найпростішому випадку ви можете використовувати вбудований редактор, якщо ви працюєте під управлінням Windows.

Він, хоч і не дуже зручний, але достатньо для початку. Тим, кому більше подобається комфорт, слід шукати "справжній" HTML-редактор. Одним з класиків є, звичайно ж, Dreamweaver.

Цей редактор, однак, не є безкоштовним.

HTML & CSS для початківців (Частина 01): Перший погляд на HTML, CSS та інше.

Для приватних користувачів безкоштовним є phase5 (http://www.phase5.info/). Тож якщо ви збираєтеся використовувати редактор для приватних цілей, отримаєте хороший і безкоштовний інструмент.

HTML & CSS для початківців (Частина 01): Перший погляд на HTML, CSS та ін.



Окрім редактора, важливо мати встановлені основні браузери для тестування веб-сайту. Фактично браузери інтерпретують HTML та CSS час від часу досить власливо. З цього приводу обов'язково проведіть докладне тестування сторінок в різних браузерах. Вам слід встановити принаймні Internet Explorer, Google Chrome та Mozilla Firefox. Ідеально, якщо ви також перевірите сторінку в браузері Opera та на планшеті/смартфоні.