HTML та CSS є найосновнішими будівельними блоками веб-сторінки, і вони є першим кроком до того, щоб стати веб-розробником. HTML забезпечує макет та вміст сторінки, а CSS визначає її стиль і вигляд. У цьому підручнику ми розглянемо основи HTML і CSS, і наприкінці ви зможете створювати адаптивні веб-сторінки, які працюватимуть бездоганно на пристроях різних розмірів.
Що таке HTML?
HTML — це стандартна мова розмітки, яка використовується для створення веб-сторінок. Вона визначає структуру та вміст сторінок за допомогою HTML-елементів, таких як заголовки, абзаци, зображення, посилання, форми тощо.
Щоб почати писати HTML-код, ви можете використовувати демонстрацію на CodePen нижче:
З лівого боку ви побачите HTML-джерело, яке є по суті кресленням того, що буде відображено. Браузер перетворить це креслення на веб-сторінку, яку ви побачите праворуч.
Ви можете безпосередньо змінювати джерельний код, щоб побачити, як це впливає на відображену веб-сторінку.
Підготовка комп’ютера до веб-розробки
Звісно, на практиці не можна покладатися на інструменти, такі як CodePen, для створення повноцінного веб-застосунку. Потрібен більш потужний інструмент, тому давайте налаштуємо ваш комп’ютер для веб-розробки.
Для початку переконайтеся, що у вас встановлений браузер. Будь-який популярний веб-браузер, такий як Google Chrome, Microsoft Edge, Safari або Firefox, підійде для цього курсу. Ви можете завантажити та встановити браузер з наданих посилань.
Крім того, вам знадобиться редактор коду для написання та редагування вашого коду. Visual Studio Code — чудовий варіант як для початківців, так і для професіоналів. Це найпоширеніший редактор коду в світі. Просто завантажте відповідний інсталятор для вашої операційної системи з офіційного вебсайту.
Після того, як ви встановите VSCode, обов’язково встановіть розширення Live Server. Перейдіть на вкладку Extensions на лівій панелі та введіть Live Server в рядок пошуку. Тут ви зможете завантажити та встановити це розширення.
Live Server створить локальний сервер для розробки з автоматичним перезавантаженням. Наприклад, створіть нову робочу директорію та відкрийте її за допомогою VSCode.
Створіть новий файл з іменем index.html у цій директорії. Розширення .html вказує на те, що це HTML-документ. Введіть ! у VSCode, і ви побачите такі пропозиції:
Це скорочення для швидкого створення HTML-документів. Ви можете переміщатися за допомогою клавіш ↑ або ↓. Виберіть перший варіант, і буде згенеровано наступний код.
Зверніть увагу, що в нижньому правому кутку вікна VSCode є кнопка Go Live.
Натискання цієї кнопки активує розширення Live Server.
Локальний сервер для розробки буде запущений, і він буде хостити файл index.html, який ви щойно створили.
Звісно, файл зараз порожній, тому ви не побачите нічого. Додайте щось між тегами та.
Hello, world!
Збережіть зміни, і веб-сторінка автоматично оновиться з новим вмістом.
Структура HTML-документа
Типовий HTML-документ завжди має наступну структуру:
. . .
. . .
Тег визначає тип документа. Коли веб-браузер зустрічає , він розуміє, що сторінку потрібно аналізувати і відображати відповідно до специфікацій HTML5, останньої версії стандарту HTML. Це забезпечує правильне трактування вмісту та макету веб-сторінки сучасними браузерами.
Весь інший вміст файлу має бути поміщений всередину елемента , який визначається відкриваючим тегом () та закриваючим тегом (``).
lang — це атрибут, і він має значення "en". Це вказує браузеру та пошуковим системам, що основна мова цієї веб-сторінки — англійська.
Всередині елемента є два дочірні елементи: та . містить метадані та іншу інформацію про HTML-документ. Ця інформація не буде відображена в браузері, але часто використовується пошуковими системами для SEO (оптимізація для пошукових систем).
З іншого боку, елемент `` містить основний вміст веб-сторінки, який видимий для користувачів, тому це саме та частина HTML-файлу, на яку ми зосередимося в цьому курсі.
Елементи та атрибути
Давайте детальніше розглянемо попередній приклад і помітимо, що HTML-документ складається з різних елементів у вкладеній структурі. У HTML більшість елементів мають як відкриваючий тег, так і закриваючий:
. . .
У цьому випадку — це відкриваючий тег, а — закриваючий тег, і разом вони формують HTML-елемент. Елемент може містити текстовий вміст між відкриваючим і закриваючим тегами.
Hello, world!
Елемент також може обгортати інші елементи, утворюючи вкладену структуру.
. . .
. . .
Всередині відкриваючого тегу можна визначати атрибути, які використовуються для уточнення додаткової інформації про елемент, наприклад його class, id тощо.
. . .
Атрибут зазвичай записується у вигляді пари ключ/значення, і значення завжди має бути поміщене в парні лапки (подвійні або одинарні).
Існують деякі винятки з цих загальних форматів. Наприклад, елемент `, який створює розрив рядка, не потребує закриваючого тегу. Деякі атрибути, такі якmultiple`, не потребують значення. Ми розглянемо ці винятки пізніше в цьому курсі, коли зіткнемося з ними.
Проте важливо пам'ятати, що якщо елемент вимагає закриваючого тегу, його не можна пропускати. У більшості випадків веб-сторінка може відобразитися коректно, але коли структура вашого HTML-документа стане складнішою, можуть виникнути непередбачувані помилки.
Ознайомтесь з нашими рекомендаціями з найкращих практик для написання HTML і CSS, якщо вам цікаво.
Додаткові матеріали
- Вступ до каскадних таблиць стилів (CSS)
- Вступ до JavaScript
- Що таке адаптивний дизайн
- Як створювати інтерактивні форми за допомогою HTML і CSS
Перекладено з: Fundamentals of HTML and CSS