В основі кожної web сторінки лежить декілька речей:
- HTML
- CSS
- JavaScript
HTML, або ж HyperText Markup Language – мова розмітки гіпертексту, де гіпертекст – набір непослідовно зв’язаних між собою документів (сторінок).
Hello world у вигляді HTML сторінки
Натисніть на зображення, щоб переглянути на весь екран.
HTML теги та атрибути
То шож робить HTML? HTML відповідає за опис та порядок розміщення всіх ваших елементів на сторінці в браузері, себто кнопки, посилання, текст, картинки і т.д.
Всі елементи сторінки в HTML позначаються тегами, теги бувають парними та непарними. Парні теги мають відкриваючу та закриваючу частини. Приклади нижче:
<div>Це контейнер, в ньому можна групувати інші елементи, в Figma це був би інструмент "Frame"</div>
<p>Цей тег є параграфом, тут можна розміщувати текст</p>
<button>Кніпка</button>Щодо непарних тегів, то вони мають лише відкриваючу частину, яка являє собою одночасно і закриваючу. Наприклад зображення:
<img src="посилання_на_зображення"/> (Тег зображення не має закриваючої частини).Також теги можуть мати атрибути, це їх власні параметри, що можна задавати, серед них є до прикладу вищезгаданий атрибут src, що задає посилання на зображення для тегу img, крім того він робить те саме для тегів <video> та <audio>
Будь якому тегу можна задавати атрибут class та style, атрибут class дозволяє надавати різним тегам однакові CSS правила (про це нижче), водночас атрибут style дозволяє надати css правила конкретному тегу одразу на місці.
Як це працює:
<img src="посилання" class="someclass">
<p class="someclass1" style="color:red;">
<a href="тут_посилання">це звичайне посилання</a>Чого не робить HTML:
– Не відповідає за оформлення елементів, колір, розмір і т.д.
– Не дозволяє робити сторінку інтерактивною, себто реагувати на кнопки, проводити розрахунки, показувати чи ховати якісь елементи.
Якщо HTML не дозволяє змінити оформлення сторінки та не є мовою програмування, то як реалізовані два вищезгадані пункти на типових веб сторінках в інтернеті?
Перший пункт, зовнішній вигляд кнопок, полей, тексту і т.д. забезпечується мовою CSS, а другий пункт мовою програмування JavaScript. 😀
CSS та його правила
Тепер щодо оформлення сторінки та її елементів, отже:
CSS, або Cascading Style Sheets – Каскадні таблиці стилей, дозволяють задавати колір, шрифти, верстку (маніпуляція черговістю відображення та напрямом розміщення HTML елементів) і т.д.
Розглянемо приклад:
<p>Тут може бути ваша реклама</p>
<h1>А це заголовок</h1>
Хочемо розфарбувати вищезгаданий текст різними кольорами, до прикладу параграф зеленим, а заголовок червоним. То CSS код виглядатиме наступним чином:
p{
color: green;
}
h1{
color: red;
}
Як це виглядатиме
Що тут відбулося? Всі правила оформлення в CSS складаються з наступної схеми:
Селектор {
властивість: значення;
властивість: значення;
}Селектор може бути безпосередньо тегом елементу, який ви хочете оформити, p, h1, div, span і т.д. Це не єдиний варіант селектору, але поки цього буде достатньо.
Всі правила для даного селектору мають знаходитись в блоці між фігурними дужками. Кожне правило має мати назву властивості, що хочете змінити, двокрапку, значення що хочете надати та закінчуватися крапкою з комою.
Слово каскад в CSS означає що всі правила застосовуються зверху вниз. То що буде якщо задати два різних правила для одного елементу в різних частинах коду? Застосується останнє правило.
Приклад:
p{
font-size: 16px;
color: red;
}
h1{
color: green;
}
p{
color: green;
}Який колір матиме текст в тезі p? Зелений, таяк це останнє задане правило для тегу p. Параметр font-size при цьому нікуди не щезне і також буде застосований.
Структура HTML документу
Кожен HTML документ обов’язково має мати наступні теги
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Заголовок документу</title>
</head>
<body>
Тут будуть всі ваші видимі на сторінці елементи
</body>
</html>Навіщо всьо то треба? Перший рядок вказує браузеру, що ваш файл має саме HTML код, а не щось інше, для тегу !DOCTYPE може бути застосований не лише параметр html, про те нам буде потрібен лише він, таяк він вказує на використання останньої версії HTML, версії 5.
Далі браузер перевірятиме все що знаходиться в тезі html, поза його межами не гарантовано розпізнавання ваших тегів. Тег html має в собі два великих вкладених теги, це head та body.
Тег body матиме в собі все що ви вважатимете за потрібним показати на вашій сторінці, туди слід пхати текст, картинки та кніпки.
Щодо тегу head, то там зберігається інформація, яка потрібна браузеру для коректного відображення сторінки + додаткова інформація про неї. До прикладу тег title задає назву вкладки зі сторінкою. Тег meta може мати багато різних атрибутів, в даному прикладі заданий атрибут charset, він потрібен для правильного відображення тексту на сторінці та задає кодування.
Окрім того саме всередині тегу head можна розмістити тег style та писати в ньому CSS правила.
Приклад
Тепер давайте зберемо це все в кучу. 🙂 Припустимо що нам потрібна сторінка з картинкою та кнопкою переходу на іншу сторінку поряд з нею. Що робитимемо?
Ну по перше слід розмістити картинку на сторінку, нічого складного, потрібен тег <img /> з атрибутами src та alt. Якщо з атрибутом src все більш-менш ясно, то навіщо нам атрибут alt? Якщо браузер не зможе завантажити картинку за вашим посиланням, замість неї він вставить текст, який вказаний у атрибуті alt. Раджу завжди вказувати alt, таяк це може знадобитися для опису картинки в разі її відсутності, або ж для людей з вадами зору, що користуються функцією озвучки змісту на моніторі.
Ми можемо покласти завантажену картинку поряд з html файлом, та вказати назву файлу зображення, але наразі простіше взяти картинку з інтернету. Тому я стягнув для вас наступне зображення.
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSElaWJyDSIAovkQrZLBqqOAXLAy8Apol6HA&s" alt="Білий пес"/>Наразі наша сторінка виглядатиме якось так:
Тепер займемось кнопкою. Тут ми маємо два варіанти:
- Використати тег <button>
- Використати тег <a> та стилізувати його під кнопку
Варіант з <button> виглядає непогано і логічно, але тут є кілька підводний каменів. Сам по собі цей тег призначений для відправки різних форм (наприклад зв’язка полей логін-пароль вважається формою, а кнопка входу її відправляє на сервер), або для виклику та взаємодії з JavaScript кодом.
Для того щоб перейти з посиланням через таку кнопку, доведеться створити форму або JS функцію, що відправлятиме користувача за посиланням. Не дуже, правда?
Наразі варіант з використанням <a> тегу буде простішим, і наперед хочу сказати, що більшість кнопок з подібним функціоналом на справді є тим самим тегом <a> у більшості сайтів.
Як привести посилання до вигляду кнопки? На справді не дуже складно. По перше потрібно додати тег a з атрибутом href, що міститиме ваше посилання на сторінку.
<a href="google.com">майбутня кніпка</a>
На сторінці це виглядатиме так
А тепер додамо трохи CSS правил. Давайте окреслимо, що ми хочемо від цього посилання:
- Змінити його колір на чорний
- Прибрати підкреслення знизу
- Створити рамку навколо тексту з деяким відступом від нього
- Додати до рамки закруглення
- Вміст рамки заповнити кольором
Це і зробимо, по порядку
a {
color: black; /* чорний колір тексту */
text-decoration: none; /* вимикає вбудовані правила для оформлення посилань */
border: 2px solid black; /* рамочка, 2 пікселі в товщину, має форму лінії, чорний колір */
padding: 5px 15px; /* відступ від посилання до країв */
border-radius: 5px; /* власне, закруглення */
background-color: #F78E69; /* фоновий колір */
}Тепер маємо:
Маємо зображення, та поряд з нею кнопку. З цим прикладом можете погратися самостійно за посиланням https://jsfiddle.net/steftim/otpL1kbf