Зміст

Різне

Чим я користуюся для розробки

Visual Studio Code - просто офігенний і неймовірно красивий редактор коду, який підтримує тонну різних розширень і може бути використаний навіть для розробки додатків під Android.

Цей або цей сайт для підбору різних красивих кольорів з палітри Material Design.

htmlbook.ru - повний опис кожного компоненту мов html і css.

w3schools - сайт з усім, що зв'язано з вебом, і не тільки.

"Дебаг" у Google Chrome та інших браузерах

У кожному браузері є цікавий інструмент, який викликається натисканням клавіші F12. Там можна подивитись увесь код сторінки, приєднані файли, помилки JS та багато чого іншого. Найбільш корисним є інструмент обрання потрібного елементу, який виглядає як іконка курсору над якимось блоком. Зазвичай знаходиться десь зверху справа.

Цікавим є можливість зміни коду прямо на сторінці. Тобто, натискаєш на F12, обираєш потрібний якийсь елемент і, зайшовши у стилі CSS, змінюєш колір чи ширину та тому подібне. Також можна міняти текст у HTML, але це вже виступає у ролі іграшки :)

HTML

Щось базове

Структура пустої сторінки виглядає так:

<html>
    <head>

    </head>
    <header>

    </header>
    <body>
                
    </body>
    <footer>

    </footer>
</html>

html - головний тег документу HTML. У head зазвичай приєднують файли стилів, іконку сторінки, кодування сторінки та ін. header писати не обов'язково, проте у нього зазвичай "запихують" навігацію сайтом, тобто роблять своєрідну шапку. Із body знайомитись не треба, він і так усім знайомий, бо має у собі увесь контент сторінки. footer, як і header, не є обов'язковим, проте у ньому зазвичай пишуть низ сайту, де є спеціальні посилання на зовнішні сайти, сторінки цього сайту і копірайт.

Форматування тексту

Текст зазвичай пишуть між тегів <p> текст </p>. Цей тег містить один абзац тексту.

Всього є 6 рівнів заголовків, які пишуться так: <h1> Заголовок </h1>, де замість цифри 1 можуть бути цифри 1 - 6, котрі визначають розмір заголовку (1 найбільший, 6 - найменший):

h1

h2

h3

h4

h5
h6

Тег <b> b </b> робить текст всередині нього жирним: b

Тег <i> i </i> робить текст всередині нього курсивом: i

Тег <u> u </u> робить текст всередині нього підкресленим: u

Ці теги можна компонувати: magic

Тег <q> Оце я сказанув! </q> робить з тексту всередині нього цитату і запихує її у кавички: Оце я сказанув!

Тег <code> using namespace std; </code> потрібен для того, щоб в середині тексту можна було вставити якусь частинку нібито коду з якоїсь програми. Текст цей, звичайно, не можна запустити, бо це лише текст :) .

Тег <pre> текст </pre> виведе на екран текст так, як він написаний у редакторі, тобто з усіма табуляціями, прогалинами і символами нового рядочку. Дуже корисно для виведення великих частин коду.

Тег <a href="tochanenko.com"> тицни мене </a> позволяє робити посилання на інші сторінки. У href="" пишеться адреса сторінки для переходу. Щоб відкрити посилання у новій вкладці, треба додати атрибут target="_blank"

Тег <font> WOW! </font> дозволяє кастомізувати текст як хочеш. Він має 3 атрибути: color, size і face. color позволяє змінити колір тексту, вказуючи його назву англійською мовою (всі кольори html) або кодом у виді HEX. size приймає значення від 1 до 7, вказуючи на величину тексту. Також можна писати +1 чи -2 вказуючи на відносний розмір тексту до стандартного. face позволяє замінити стандартний шрифт якимось іншим. Вважається, що цей тег застарілий для використання у наші часи :)

Приклад: <font size="-1" color="magenta" face="Arial">amazing</font> - amazing

Коментарі пишуться так: <!-- цей текст бачу тільки я -->

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

Трохи про head

Найголовнішими тут є теги meta, link та title. title позволяє задати назву цієї сторінки. meta тегів можна писати скільки хочеш, вони зазвичай вказують "конфігурацію" конкретної сторінки.

Наприклад, <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> вказує на те, що файл сторінки має кодування UTF-8, а <meta name="theme-color" content="#607d8b"> у деяких мобільних браузерах перефарбовує панель закладок у вибраний нами колір. Взагалі, дуже цікаво кастомізувати вигляд своєї сторінки у закладках, браузерах та ін.

link потрібен для під'єднання файлів стилів, шрифтів, фавіконів та ін. Наприклад, на цій сторінці файл css під'єднано рядочком <link href="style.css" type="text/css" rel="stylesheet">, де обов'язково вказати тип зв'язку цього документу з тим, що приєднують, за допомогою rel="". Тут вказані всі можливі види приєднання файлів.

ID елементів та навігація сторінкою

Кожному елементу можна дати свій ID. Таким чином серед усієї сторінки можна звертатися саме до того елементу, котрий нам потрібен. Наприклад, <h1 id="important"> Важлива інформація </h1> має ID important і, якщо захочемо за допомогою посилання перейти до елементу з таким ID, просто пишемо <a href="#important"> тик </a>. Так зроблений зміст зверху цієї сторінки.

Списки елементів

У HTML є два види списків: безпорядкові і порядкові. Безпорядковий позначається тегом <ul> </ul>, тобто unordered list, коли як порядковий - <ol> </ol> - ordered list. Щоб додати елементи у список, треба лише їх написати в середині тегу списку між тегом <li> </li>. Наприклад, список справ:

<ol>
    <li>Андан</li>
    <ul>
        <li>Переписати конспект</li>
        <li>Прочитати розділ 1.3</li>
    </ul>
    <li>Прога</li>
    <ul>
        <li>Завантажити Modelio</li>
        <li>Почати робити першу лабу</li>
        <li>Обрати тему проекту</li>
    </ul>
    <li>Приготувати поїсти</li>
</ol>
  1. Андан
  2. Прога
  3. Приготувати поїсти

CSS

Шо це таке і базові можливості

Оця штука дуже мощна! По-перше за її допомогою можна міняти вид сторінки, не змінивши нічого у файлі HTML. Вставляти код стилів можна двома способами: у тег <style> <style> у середині тегу head, або окремим файлом, під'єднавши його за допомогою тегу link. Тут розглянемо як можна змінити фон сторінки, тільки під'єднавши файл до нашої сторінки:

index.html

<html>
    <head>
        <link href="style.css" rel="stylesheet">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        МОЇ ОЧІ
    </body>
</html>

style.css

body {
    background: #3F51B5;
    color: #f44336;
}
Протестувати

Тут видно, що у CSS написано тег body, після якого у фігурних скобках є дві властивості: background і color. background відповідає за колір, картинку та ін., що буде на фоні сторінки. color відповідає за колір тексту. Властивість background можна замінити окремими більш конкретними властивостями: background-color чи background-image.

Обирання конкретного елементу

Змінюючи стилі для якогось окремого тегу, змінюється зовнішній вигляд усіх елементів з такою самою назвою тегу. Тобто, зробивши стиль p { color: red; }, зміниться колір усіх абзаців. Але як зробити, якщо ми хочемо змінити колір лише якогось окремого? Для цього нам знадобляться селектори. Селектором є або ім'я класу, або ID, який ми розглядали вище. Щоб присвоїти якийсь клас до конкретного абзацу, у його тег пишемо атрибут class="", де у кавички пишемо ім'я класу. Наприклад так:

index.html

<html>
    <head>
        <link href="style.css" rel="stylesheet">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <p class="red-text"> Це червоний текст </p>
        <p> А це ні </p>
        <p> І це теж ні </p>
    </body>
</html>

style.css

.red-text {
    color: red;
}
Протестувати

Як бачимо, у CSS, щоб звернутися до імені класу, потрібно лише вказати його назву після крапки. Так само можна поступити з ID, тільки починаючи із символу решітки:

index.html

<html>
    <head>
        <link href="style.css" rel="stylesheet">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <p id="red-text"> Це червоний текст </p>
        <p> А це ні </p>
        <p> І це теж ні </p>
    </body>
</html>

style.css

#red-text {
    color: red;
}

У чому різниця class та ID?

Справа в тому, що не можна створювати декілька об'єктів з однаковим ID. Якщо ж ми хочемо зробити так, щоб декілька абзаців були червоними, то краще користуватись класом. Взагалі, щоб обрати що використати: клас чи ID, треба задати собі питання: чи є цей елемент особливим, єдиним? Якщо так, до можна використовувати ID. Так навіть буде зручніше, коли будемо писати код на JS, де доступ до елементів відбувається через ID. Якщо елементів буде багато - використовуємо клас. Наприклад:

index.html

<html>
    <head>
        <link href="style.css" rel="stylesheet">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <header id="menu">
        Тут повинно бути меню
    </header>
    <body>
        <p class="red-text"> Це червоний текст </p>
        <p> А це ні </p>
        <p class="red-text"> А це теж червоний </p>
    </body>
</html>

style.css

.red-text {
    color: red;
}

#menu {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: cyan;
}
Протестувати

Тут ми зустрілись ще з трьома новими властивостями: width та height, що відповідають за розміри того чи іншого елементу, і line-height, що відповідає за висоту однієї строчки тексту.

DIV, margin, padding і border

div - надзвичайно корисна штука. Вона позволяє "вставити окремий шматочок сторінки" і прикрашати його як хочеш. Але прикрашається тільки те, що стоїть між тегами <div> </div>. Наприклад, зробимо червоний квадратик:

index.html

<html>
    <head>
        <link href="style.css" rel="stylesheet">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div class="square"></div>
    </body>
</html>

style.css

.square {
    height: 100px;
    width: 100px;
    background: red;
}
Протестувати

margin - властивість, яка визначає відстань між об'єктом і його "татом". Для нашого квадратика тато - тег body. Взагалі кажучи, тато для якогось тегу - найближчий тег, у якому він знаходиться.

padding трохи цікавіша штука. Вона визначає відстань від границі елементу до того, що знаходиться у ньому.

border робить рамку коло нашого об'єкту. Наприклад, напишемо десь внизу нашого квадратика строку "а я дно", зробимо синю рамку і розташуємо квадратик посередині сторінки (майже).

index.html

<html>
    <head>
        <link href="style.css" rel="stylesheet">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div class="square">А я дно</div>
    </body>
</html>

style.css

.square {
    height: 20px;
    width: 100px;
    margin-left: 50%;
    padding-top: 80px;
    border: blue solid 3px;
    background: red;
    color: white;
}
Протестувати

Як бачимо, нам довелося зменшити розмір квадратику, щоб він залишився квадратиком, але з відступом зверху у 80px. Також можна побачити, що після деяких тегів ми написали через рисочку. Це є окремими властивостями, котрі вказують га окрему властивість відносно якогось з напрямків. Таких напрямків всього чотири: top, right, bottom і left. Вони написані у такому порядку, бо якщо треба задати значення для всіх напрямків, можна помістити лише під одну властивість без ніяких дописаних напрямків. Наприклад, так: padding: 10px 80px 10px 0px;.

Щоб розмістити щось по центру, треба у властивості margin вказати значення як auto, тобто отак: margin: auto;

У border є багато стилів обводки і solid (пряма лінія) - один з них.

Інші властивості

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

Селектори і функції

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

index.html

<html>
    <head>
        <link href="style.css" rel="stylesheet">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <a href="https://itcpp.tochanenko.com" class="special-link">хєхє</a>
    </body>
</html>

style.css

.special-link {
    color: blue;
}

.special-link:hover {
    color: red;
}

.special-link:visited {
    color: magenta;
}
Протестувати

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

Щось прикольне

У CSS є багато прикольних штук. Одна з яких - анімація. Якщо казати коротко, то вона лише вказує тип анімації і час, за який зміниться стан того чи іншого елементу. Наприклад, за допомогою transition: background-color ease .3s; анімуємо наш квадратик так, щоб при наведенні курсору він міняв свій колір.

index.html

<html>
    <head>
        <link href="style.css" rel="stylesheet">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div class="square"></div>
    </body>
</html>

style.css

.square {
    transition: background-color ease .3s;
    height: 100px;
    width: 100px;
    background-color: red;
}

.square:hover {
    background-color: blue;
}
Протестувати

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

© Точаненко Владислав Володимирович, 2019