Вебдизайн

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

Однією з тем, з якою ми неодноразово стикаємося під час створення вебсайтів, є використання кольору. Хороший вебдизайн потребує розуміння загальних принципів і відображення кольорів.

Основним інструментом для створення вебсторінок є мова розмітки HTML (HyperText Markup Language). Ми використовуємо HTML у поєднанні з CSS (Cascading Style Sheets, каскадними таблицями стилів), щоб полегшити керування сторінками та підтримувати єдиний вигляд. Основи HTML і CSS охоплюють такі теми:

• HTML: основи – основні принципи HTML.
  • HTML: таблиці та списки – використання простих таблиць і списків у HTML.
  • CSS: основи – основні принципи CSS.
  • CSS: основні властивості та їх використання – найбільш часто використовувані властивості CSS.
  • CSS: кольори та їх використання – робота з кольорами в CSS.

Щоб створювати динамічні вебсайти, нам також потрібні мови програмування, за допомогою яких ми пишемо бажану поведінку вебсайту. JavaScript і Python часто використовуються для створення вебсайтів.

Ми можемо використовувати HTML для вказівки значення та відображення тексту, наприклад, так:

Це <b>жирний</b> текст. А це <i>курсив</i>.

Огляд поширених позначень:

Деякі теги вказують на значення тексту, наприклад, <strong> і <em>, тоді як інші вказують лише на спосіб відображення, наприклад, <b> та <i>. Типове відображення <strong> та <em> виділено жирним шрифтом і курсивом, але це можна змінити за допомогою каскадних стилів таблиць (CSS).

Парні теги можуть бути вкладеними, наприклад, ми пишемо <b><i>так</i></b> жирним курсивом. Теги не можуть «перетинатися», тобто ми завжди маємо закривати всі вкладені теги перед закриттям позначки. Непарні теги не мають вмісту або кінцевого тегу, наприклад, <br>.

Пробіли та нові рядки

Будь-яка кількість пробілів і нових рядків у коді HTML відображатиметься як один пробіл. Якщо нам потрібен новий рядок, ми використовуємо тег <br>. Якщо ми хочемо зберегти точну кількість пробілів і нових рядків, ми використовуємо тег <pre>:

<pre>

10x +  2y  =  16

 5x +   y  =   8

</pre>

Теги h1–h6, p, pre і hr є блоковими, що означає, що рядок розривається перед і після них. Так, кожен абзац починатиметься з нового рядка, навіть якщо у вихідному коді немає нового рядка:

<p>Перший абзац.</p> <p>Другий абзац.</p>

Атрибути

Деякі теги мають атрибути, які впливають на їх відображення або поведінку. Так, для посилань потрібно вказувати адресу (атрибут href від англ. hypertext reference) і, за бажанням, чи потрібно те чи інше посилання відкривати в новому вікні (атрибут target). Для зображень ми вказуємо шлях до файлу (src), альтернативний текст (alt), який буде надруковано, якщо зображення неможливо відобразити, і, за бажанням, розмір у пікселях (ширина, висота). Записуємо атрибути у початковий тег і беремо значення в лапки:

<a href="https://www.znaiemoukrainsku.org//">Знаємо українську</a>

<img src="selera.png" alt="selera" width="400">

Списки

Невпорядковані списки створюються за допомогою тега пари <ul> (unordered list (невпорядкований список)). Ми позначаємо окремі елементи списку тегом <li> (list item (елемент списку)):

<ul>

<li>вовк</li>

<li>лось</li>

<li>олень</li>

</ul>

• вовк
• лось
• олень

Впорядковані списки створюються за допомогою тега пари <ol> (ordered list (упорядкований список)). Ми знову позначаємо окремі елементи тегом <li>:

<ol>

<li>вовк</li>

<li>лось</li>

<li>олень</li>

</ol>

1. вовк
2. лось
3. олень

Тип маркера та нумерацію можна змінити за допомогою атрибута type:

<ol type="A">

<li>вовк</li>

<li>лось</li>

<li>олень</li>

</ol>

1. вовк
2. лось
3. олень

Таблиці

Ми створюємо таблицю за допомогою тега <table>, її рядки за допомогою <tr> (table row (рядок таблиці)), клітинки за допомогою <td> (table data (дані таблиці)):

<table>

<tr><td>пес</td><td>вовк</td></tr>

<tr><td>лось</td><td>олень</td></tr>

</table>

Щоб виділити текст у заголовку, ми використовуємо <th> замість <td>:

<table>

<tr><th>Тварина</th><th>Зріст</th></tr>

<tr><td>лось</td><td>180 cм</td></tr>

<tr><td>олень</td><td>120 cм</td></tr>

</table>

Типовий вигляд вихідних таблиць є зазвичай без ліній, що розділяють окремі клітинки. Зовнішній вигляд таблиці можна змінити за допомогою каскадних стилів (CSS).

Об’єднання клітинок

Клітинки можна об’єднати за допомогою атрибутів rowspan і colspan. Значення атрибута вказує, скільки рядків або стовпців ми об’єднуємо.

<table>

<tr><td rowspan="2">вовк</td><td colspan="2">пес</td></tr>

<tr><td>лось</td><td>олень</td></tr>

</table>

До загальних властивостей, які використовуються в CSS, належать:

Деякі властивості (наприклад, margin, padding, border) можуть впливати лише на певну сторону елемента. Якщо ми хочемо вказати значення для різних сторін, ми можемо використовувати назву властивості в комбінації з -top, -bottom, -left або -right (наприклад, padding-top). Також можна записати кілька значень у короткий ідентифікатор властивості (наприклад, padding: 5px 10px 15px 20px – встановлює зміщення зверху, праворуч, знизу та ліворуч, padding: 5px 10px – встановлює вертикальне зміщення 5 пікселів і горизонтальне 10 пікселів).

Що стосується розмірів елемента, стандартний зсув і відступ додаються до вказаного розміру (тому, наприклад, елемент із width: 100px; padding: 10px матиме ширину 120 px). Цій поведінці можна запобігти, встановивши * {box-sizing: border-box}.

На формат тексту впливають властивості:

У способі відображення елементів, наприклад, бере участь властивість display. Її часто використовувані значення:

Особливо flex і grid є корисними під час створення адаптивних веб-макетів.

Серед одиниць, що використовуються в CSS, є, наприклад, px (пікселі, як наслідок, розмір, визначений у пікселях, може залежати від масштабування пристрою), rem (1 rem = розмір шрифту в основному елементі), % (відсоток від батьківського елемента), vw (ширина відображення, наприклад, видима область у вікні браузера), vh (висота відображення). Одиниці пишуться після значення без пробілу.

За допомогою нотації @media частина припису може бути визначена лише для певного пристрою або методу відображення:

@media (max-width: 600px) {

  p {

    font-size: 10pt;

  }

}

Наведений вище код визначає, що абзаци (<p>) матимуть розмір шрифту 10 пунктів, якщо ширина екрана менше 600 пікселів.