Blog

Your blog category

Абсолютний і відносний шлях

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

Відносний шлях:

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

Припустимо, у нас є така структура папок:

– root – documents – project – code – script.js – images – image.jpg – notes – todo.txt

Якщо ж поточний робочий каталог – це root, то відносний шлях до того ж файлу виглядатиме так: documents/project/code/script.js

Абсолютний шлях:

Абсолютний шлях повністю вказує шлях до файлу або папки від кореневого каталогу файлової системи.

Наприклад, абсолютний шлях до файлу script.js виглядатиме так: /root/documents/project/code/script.j, де / вказує на кореневий каталог.

Приклади:

  1. Відносний шлях: Припустимо, що поточний робочий каталог – code. Відносний шлях до image.jpg: ../../images/image.jpg.
  2. Абсолютний шлях: Абсолютний шлях до todo.txt: /root/notes/todo.txt.
  3. Відносний шлях: Якщо поточний каталог – root/documents, то відносний шлях до script.py: project/code/script.py.
  4. Абсолютний шлях: Абсолютний шлях до image.jpg: /root/images/image.jpg.

додатковий приклад, де я покажу, як можна використовувати відносний та абсолютний шляхи для підключення картинки в веб-сторінці.

Припустимо, у нас є така структура папок для веб-проекту:

– website – css – styles.css – images – picture.jpg – index.html

Відносний шлях для підключення зображення:

Якщо ви хочете підключити зображення picture.jpg в файлі index.html, який знаходиться у тому ж каталозі, що й папка images, ви можете використовувати відносний шлях:

<img src=”images/picture.jpg” alt=”Picture”>

Якщо index.html знаходиться в каталозі website, ви також можете використовувати відносний шлях:

<img src=”images/picture.jpg” alt=”Picture”>

Абсолютний шлях для підключення зображення:

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

<img src=”/website/images/picture.jpg” alt=”Picture”>

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

Переходьте на мій канал YouTube для більше інформації

fontawesome icons free

Добавляєм Іконки Fontawesome в HTML.

Друзі привіт)
А цій статі я покажу вам я швидко і без зайвих проблем підключити і використовувати Іконки Fontawesome в HTML швидко і безкоштовно.

Крок 1

Переходимо на сайт https://cdnjs.com/libraries/font-awesome

Крок 2

Вибираємо саме перше посилання і копіюємо “Copy Link Tag” як показано на фото нижче.

Крок 3

Вставляємо скопійований тег між відкриваючим і закриваючим тегом head

Крок 4

Переходим на сайт https://fontawesome.com/icons на сторінку з іконками, і шукаємо потрібну нам іконку

Крок 5

Нажимаємо на потрібну нам іконку і копіюємо HTML код/тег

Крок 6

Вставляємо скопійований HTML код/тег в нас код HTML там де ми хочемо добавити іконку

Крок 7

Ура, іконка появилася )

Як стилізувати іконку ?

Для стилізації іконки, використовуються властивості CSS як для звичайнісінького шрифту. Наприклад:
Для зміни розміру:

i {
font-size: 20px;
}

Для зміни кольору:

i {
color: red;
}

Як бачити, добавити стильні іконки в HTML дуже просто а головне безкоштовно)
Подивитися більше інформації, ви можете на моєму каналі https://youtube.com/@bilyki

Одиниці вимірювання в CSS: rem, em, px, vh, vw, %

У CSS існує безліч одиниць вимірювання, кожна з яких має свої особливості та використовується для різних завдань. В даній статті ми детально розглянемо такі одиниці: rem, em, px, vh, vw та %, розкриємо їх особливості та дослідимо, як їх використовувати для створення адаптивних та відзначених веб-сайтів.

Rem (Root EM):

Rem – це одиниця відносної висоти шрифту. Особливість rem полягає в тому, що вона відноситься до кореневого (html) елемента сторінки, тому змінюється тільки один раз, коли задається значення. Наприклад, якщо задати шрифт кореневому елементу сторінки 16px, то 1rem буде еквівалентно 16px. Якщо ви задаєте шрифт для дочірнього елементу (тегу) в батьківському елементі, вони будуть наслідувати значення rem, що дозволяє створювати легко масштабовані компоненти.

html {
  font-size: 16px; /* Задає розмір шрифту кореневого елемента у 16 пікселях */
}

p {
  font-size: 1.5rem; /* Задає розмір шрифту у 1.5 раза більше розміру шрифту кореневого елемента, тобто 24px (16px * 1.5) */
  margin-bottom: 1.2rem; /* Задає відступ знизу у 1.2 раза більше розміру шрифту кореневого елемента, тобто 19.2px (16px * 1.2) */
}

Em (Relative to Parent):

Em – це також одиниця відносної висоти шрифту, але вона вимірюється відносно батьківського елементу. Якщо ви задаєте розмір шрифту у батьківському елементі, всі дочірні елементи, що мають значення em, будуть використовувати його як основу. Якщо ніякий батьківський елемент не має заданого розміру шрифту, тоді em буде відноситись до шрифту документа (за замовчуванням 16px).

Px (Pixels):

Px – це абсолютна одиниця вимірювання, яка не залежить від жодного іншого елементу. Вона використовує фіксований розмір в пікселях. При використанні px, елементи завжди матимуть фіксований розмір, що може призводити до проблем з адаптивністю на різних екранах.

Vh (Viewport Height) та Vw (Viewport Width):

Vh та Vw – це відносні одиниці вимірювання, які залежать від висоти (vh) та ширини (vw) видимої області (viewport) браузера. Наприклад, 1vh відповідає 1% висоти видимої області, а 1vw – 1% ширини. Ці одиниці дозволяють створювати елементи, що адаптуються до розміру екрану користувача, що покращує взаємодію з веб-сайтом на різних пристроях.

Пликлад vh:

Пликлад vw:

% (Percentage):

% – це одиниця відносної величини, яка використовує відсотки від батьківського елементу. Наприклад, якщо ширина дочірнього елемента задана як 50%, це означає, що його ширина буде половина ширини батьківського елемента.

Приклад:

Висновок:

Використання правильних одиниць вимірювання в CSS допомагає створювати гнучкі, адаптивні та легко управляються компоненти для веб-сайтів. Rem та em дозволяють забезпечити зручний масштаб, px – точність, а vh, vw та % – адаптивність. Залежно від потреб вашого проекту, ви можете комбінувати ці одиниці, щоб створити привабливі та відзначені веб-інтерфейси для користувачів на будь-яких пристроях.

Відео по Одиницях Виміру в CSS ви можете подивитися у мене на каналі https://youtu.be/9iIahi1AyyQ

ТОП 5 VS Code Розширень

В цій статті я хочу поділитися з вами 5 крутими розширеннями для редактора коду Visual Studio Code. За допомогою даних розширень, ви зможете прискорити вашу роботу в рази.

ТОП 5

Prettier

Розширення Prettier – це незамінний інструмент для автоматичного форматування вашого коду згідно з установленими правилами стилю. Забудьте про ручне форматування – Prettier зробить ваш код стильним і консистентним автоматично. Зосередьтеся на логіці вашого коду, а Prettier забезпечує його привабливий вигляд.

Prettier автоматично відформатую ваш код після зберігання файлу.

prettier extension

ТОП 4

Code Snap

З розширенням Code Snap ви зможете легко створювати скріншоти фрагментів коду та додавати їх до вашого проекту. Забудьте про копіювання і вставлення коду в різних місцях – тепер ви зможете швидко захопити та використовувати фрагменти коду.

ТОП 3

Live Share

Розширення Live Share дозволяє вам спільно працювати над проектами з іншими розробниками в режимі реального часу. Поділіться своїм редактором, виконуйте спільні редагування, налагодження та спілкуйтеся зі своїми колегами безпосередньо у VS Code. Live Share зробить співпрацю із командою простою та продуктивною.

Live share extension

ТОП 2

Bracket Pair

“Bracket Pair Colorizer” – це розширення для Visual Studio Code, яке допомагає зробити код більш читабельним і зрозумілим, особливо при використанні багато рівнів вкладеності та багатогранних умов. Це досягається завдяки візуальному виділенню парних дужок різними кольорами.

Основні функції:

  1. Підсвічування парних дужок: Розширення підкреслює парні дужки, такі як круглі дужки (), квадратні дужки [], фігурні дужки {} та інші, відображаючи їх різними кольорами. При цьому парні дужки одного рівня вкладеності матимуть один колір, що полегшує їх розрізнення у коді.
  2. Кастомізація кольорів: Ви можете налаштувати кольори парних дужок, використовуючи стандартні CSS-кольори або HEX-коди, що дозволяє вам адаптувати розширення до вашого стилю.
  3. Підтримка вкладених дужок: Розширення підтримує різні рівні вкладеності, що дозволяє візуально зрозуміти структуру вкладеного коду.
  4. Ефективне використання простору: Візуальне підсвічування парних дужок допомагає виявити неправильно розміщені або незакриті дужки, що допомагає уникнути помилок.

Загалом, розширення “Bracket Pair Colorizer” є корисним інструментом для програмістів, які працюють з кодом, де часто використовуються парні дужки. Воно спрощує розуміння структури коду і забезпечує більш зручний досвід редагування коду в Visual Studio Code.

Regenerate response

Bracket pair extension

ТОП 1

Tabnine AI

“Tabnine AI” використовує машинне навчання, зокрема технологію глибокого навчання, щоб надавати інтелектуальні підказки та автоматичне доповнення коду під час написання програмного коду. За допомогою цього розширення, розробники можуть покращити продуктивність та швидкість написання коду, так як воно вміє прогнозувати, який код ви намагаєтесь написати на основі введеного контексту.

Основні функції:

Автоматичне доповнення коду: “Tabnine AI” аналізує ваши попередні вирази та шаблони коду, щоб пропонувати автоматичні підказки та завершення під час набору нового коду. Воно пропонує можливі варіанти коду, засновані на тому, як кодували раніше та практиках зміни коду для схожих завдань.

Змішані мови: Розширення може працювати з багатьма мовами програмування та змішувати їх у одному контексті. Це корисно, коли ви маєте справу з проєктами, що використовують різні мови програмування.

Інтелектуальна підказка: “Tabnine AI” намагається передбачити ваші інтенції на основі збережених шаблонів коду та наявних змін в поточному проекті. Воно може зрозуміти, що ви хочете зробити та пропонує варіанти коду для збільшення вашої продуктивності.

Підтримка різних редакторів: “Tabnine AI” може інтегруватися з різними популярними редакторами коду, дозволяючи розробникам використовувати його в зручному середовищі, де вони зазвичай працюють.

Загалом, “Tabnine AI” – це інноваційне розширення, яке пропонує інтелектуальні підказки та автоматичне доповнення коду на основі збережених даних та шаблонів. Воно може бути корисним інструментом для розробників, які хочуть збільшити свою продуктивність та зручність під час написання програмного коду.

tabnine AI extension

І це ще далеко не всі розширення, які доступні для Visual Studio Code. Обираючи найкращі для вашого потреб, ви зможете значно полегшити свою роботу та збільшити продуктивність. Візуальне використання цих розширень можна на моєму каналі https://youtu.be/T9_T07OwzLQ!

CSS

CSS для початківців: Основи стилізації веб-сторінок

Вступ:

CSS (Cascading Style Sheets) є необхідним інструментом для розробки привабливих та естетичних веб-сторінок. Навіть для початківців, знання основ CSS дозволить вам ефективно стилізувати ваші HTML-документи. У цій статті ми розглянемо основи CSS, включаючи селектори, властивості, позиціонування та розміщення та адаптивний дизайн.

Перш ніж почати вивчення CSS, необхідно підключити CSS до вашого HTML-документа. Це можна зробити за допомогою зовнішнього файлу CSS, внутрішнього стилю або вкладеного стилю.

Підключення CSS до HTML

Зовнішній (external) стиль:

За допомогою тега link <link rel=”stylesheet” type=”text/css” href=”styles.css”>

Атрибут rel визначає зв’язок між пов’язаним ресурсом і поточним документом.
Атрибут href відповідає за шлях до нашого файлу CSS

CSS-файл (styles.css):

Внутрішній (inline) стиль:

HTML-файл:

Внутрішній стиль (embedded style):

HTML-файл:

Селектори CSS

CSS використовує селектори для вибору елементів, які потрібно стилізувати. Ось кілька основних селекторів:

  • Елементи: Наприклад, h1, p, a вибирають всі елементи h1, p та a відповідно.
  • Класи: Використовуйте . перед ім’ям класу, наприклад .myClass, щоб вибрати всі елементи з класом “myClass”.
  • Ідентифікатори/id: Використовуйте # перед ідентифікатором, наприклад #myId, щоб вибрати елемент з ідентифікатором “myId”.

Властивості та значення

Властивості CSS визначають, які аспекти стилізації будуть застосовуватись до вибраних елементів. Основні властивості включають кольори, шрифти, розміри, відступи, фони та багато іншого. Наприклад:

  • Колір тексту: color: red
  • Розмір шрифту: font-size: 16px
  • Фоновий колір: background-color: #22f2f2

Використання групування та наслідування

В CSS ви можете групувати селектори та застосовувати стилі до кількох елементів одночасно. Наприклад:

У цьому прикладі стилі color: blue застосовуватимуться до всіх заголовків h1, h2 та h3, а стилі font-size(розмір шрифту): 18px – до елементів p з класом “myClass” та елемента з ідентифікатором “myId”.

Крім того, CSS також має можливість наслідування, коли стиль батьківського елемента автоматично застосовується до його дочірніх елементів. Наприклад:

У цьому прикладі всі елементи з класом “child”, що знаходяться всередині елементів з класом “parent”, матимуть стиль font-size: 18px, а також успадковуватимуть колір color: blue від батьківського елемента.Застосування фонового кольору та зображення:

Застосування фонового кольору та зображення

У цьому прикладі background-color встановлює фоновий колір для сторінки, а background-image задає фонове зображення. background-repeat вказує, як повторювати зображення по горизонталі (repeat-x означає повторення лише горизонтально).

Закруглення кутів елемента:

Зміна розміру тексту та кольору:

У цьому прикладі font-size визначає розмір тексту заголовку <h1>, а color встановлює колір тексту. Використовуйте шістнадцятковий код кольору або назву кольору, наприклад red або #FF0000.

Застосування фонового кольору та зображення:

У цьому прикладі background-color встановлює фоновий колір для сторінки, а background-image задає фонове зображення. background-repeat вказує, як повторювати зображення по горизонталі (repeat-x означає повторення лише горизонтально).

  1. Закруглення кутів елемента:

Цей код встановлює закруглення кутів для елемента з класом .button. Значення 5px визначає радіус закруглення. Застосування закруглення кутів додає елементам більш привабливий вигляд.

    Висновок

    Щоб полегшити вивчення CSS та розробку веб-сайтів, ви можете скористатися CSS-фреймворками, які надають готові стилі та компоненти. Найпопулярніші CSS-фреймворки включають Bootstrap, Foundation та Materialize CSS. Вони забезпечують зручний інтерфейс та зразки коду, які допоможуть вам розпочати роботу.

    Крім того, існують різноманітні онлайн-ресурси, які надають документацію, підручники та практичні завдання для навчання CSS. Деякі з них включають Mozilla Developer Network (MDN), W3Schools та CSS-Tricks. Вивчення CSS є важливим етапом для будь-якого веб-розробника.
    Ви можете також подивитись відео по роботі з CSS перейшовши на мій YouTube канал https://youtu.be/86ZyVV3Qgvs
    Дякую)

    git

    Використання Git для початківців: Покроковий посібник

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

    Що таке Git?

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

    Крок 1: Встановлення Git

    Першим кроком у використанні Git є встановлення його на ваш комп’ютер. Git доступний для різних операційних систем, включаючи Windows, macOS та Linux. Ви можете завантажити його з офіційного веб-сайту Git (https://git-scm.com) і встановити, дотримуючись інструкцій для вашої операційної системи.

    Крок 2: Ініціалізація репозиторію Git

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

    Ця команда створить новий порожній репозиторій Git в поточній папці.

    git init

    Крок 3: Додавання файлів

    Щоб додати файли до репозиторію, використовуйте команду git add. Наприклад, щоб додати всі файли з поточної папки, виконайте таку команду:

    git add .

    Ви також можете додати окремі файли, замість вказування крапки. Наприклад:

    git add file1.txt file2.txt

    Ці команди підготовлять файли до фіксації (commit) у репозиторії.

    Крок 4: Фіксація змін в Git

    Фіксація (commit) дозволяє зберегти зміни в репозиторії. Ви можете виконати команду git commit з повідомленням, яке описує внесені зміни. Наприклад:

    
    git commit -m "Додано нові файли"
    
    Повідомлення коміту слід створювати зрозумілою інформацією про зміни, що внесені.

    Крок 5: Завантаження змін на віддалений репозиторій

    Якщо ви плануєте співпрацювати з іншими розробниками або зберігати резервні копії свого коду в хмарі, вам необхідно завантажити ваш репозиторій на віддалений сервер, такий як GitHub або GitLab.

    Спочатку створіть порожній репозиторій на віддаленому сервері. Потім, використовуючи URL-адресу репозиторію, введіть команду:

    
    git remote add origin <URL-адреса репозиторію>
    

    Тепер, коли ви додаєте нові коміти, вони можуть бути завантажені на віддалений репозиторій за допомогою команди:

    
    git push origin master
    

    Ця команда завантажить ваші зміни на гілку “master” віддаленого репозиторію.

    Команда git status

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

    Основні варіанти команди git status:

    • git status: Виконання команди без жодних додаткових параметрів виведе докладну інформацію про стан вашого репозиторію. Ви побачите, які файли змінені, але не додані до індексу, які файли додані до індексу та які файли не відстежуються Git.
    • git status -s або git status --short: Цей варіант команди виводить скорочену інформацію про стан репозиторію. Ви побачите список змінених файлів у форматі M (змінений), A (доданий), D (видалений) та ін.
    • git status -v або git status --verbose: Цей варіант команди надає більш детальну інформацію про зміни в файлах. Ви побачите вивід, подібний до git diff, з додатковими даними про зміни.
    • git status -uno або git status --untracked-files=no: Цей варіант команди приховує відображення невідстежуваних файлів. Ви побачите тільки змінені та відстежувані файли.

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

    Робота з гілками:

    Гілки в Git є паралельними версіями вашого репозиторію, які дозволяють вам розвивати код у різних напрямках. Основна гілка (зазвичай називається “master” або “main”) відображає стабільний і випробуваний код, але ви також можете створювати нові гілки для розробки нових функцій, виправлення помилок або експериментів.

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

    Коли ви закінчите роботу над своєю гілкою і вважаєте, що зміни готові до об’єднання з основною гілкою, ви можете злити (merge) гілку з основною гілкою. Це означає, що всі зміни, зроблені у вашій гілці, будуть додані до основної гілки, і ваш код буде об’єднаний з іншими змінами, які відбулися на основній гілці під час вашої роботи.

    Гілки дозволяють ефективно управляти процесом розробки, дозволяючи різним членам команди працювати над різними функціями або завданнями паралельно. Вони також забезпечують можливість відстежувати історію змін, експериментувати з кодом та швидко відновлюватися в разі потреби.

    Створення нової гілки:
    
    git branch new-branch
    

    Ця команда створить нову гілку з назвою “new-branch” на основі поточної гілки.

    Перехід на іншу гілку:
    
    git checkout branch-name
    

    Замість “branch-name” введіть назву гілки, на яку ви хочете перейти. Наприклад, git checkout new-branchgit checkout new-branch перейде на гілку “new-branch“.

    Об’єднання гілок:
    
     git merge branch-name
    

    Ця команда об’єднає зміст гілки “branch-name” з поточною гілкою. Ви повинні бути на гілці, в яку ви хочете внести зміни.

    Видалення гілки:
    
    git branch -d branch-name
    

    Ця команда видалить гілку з назвою “branch-name“. Будьте обережні, оскільки ви не зможете відновити видалену гілку.

    Команда reset

    Команда git reset використовується в Git для скасування змін або переміщення посилок (pointers) на коміти у репозиторії. Вона дозволяє вам вплинути на історію комітів та відновити репозиторій до певного стану. Основні варіанти команди git reset включають --soft, --mixed і --hard.

    Основні варіанти команди git reset:

    1. git reset --soft <commit>: Цей варіант команди відміняє коміти, але зберігає зміни в вашому робочому каталозі і індексі. Ви можете використовувати його, коли ви хочете змінити останні коміти або створити новий коміт з цими змінами.
    2. git reset --mixed <commit>: Цей варіант команди також відміняє коміти, але скидає індекс до попереднього стану, зберігаючи зміни в вашому робочому каталозі. Ви можете використовувати його, коли ви хочете скасувати коміти і попередні зміни до індексу.
    3. git reset --hard <commit>: Цей варіант команди відміняє коміти та повністю скидає індекс і зміни в вашому робочому каталозі. Використовуйте його з обережністю, оскільки ви втратите всі незбережені зміни.

    Крім вказання конкретного коміту, ви також можете використовувати різні вказівники, такі як HEAD~n для вказівки на коміти у минулому, або хеш коміту для прямого вказівника на певний коміт.

    Важливо пам’ятати, що команда git reset змінює історію комітів, тому бути уважним і використовувати її з обережністю. Вона може бути корисною для виправлення помилкових комітів або відновлення репозиторію до попереднього стану, але використовуйте її з обережністю і робіть резервні копії перед застосуванням цих команд, щоб уникнути втрати даних.

    Скасування останнього фіксації (commit) та збереження змін:

    
    git reset HEAD~
    

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

    Скасування останнього фіксації (commit) та видалення змін:

    
    git reset --hard HEAD~
    

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

    Скасування коміту за його хешем:

    
    git reset <commit-hash>
    

    Замість “<commit-hash>” введіть хеш коміту, який ви хочете скасувати. Ця команда відкотить ваш репозиторій до стану перед вказаним комітом, зберігаючи зміни у вашому робочому каталозі.

    Щоб знайти хеш коміту в Git, ви можете використовувати команду git log. Кожен коміт має свій унікальний ідентифікатор, який називається хешем коміту. Ось кілька способів, які можна використовувати для знаходження хеша коміту:

    Вивести повну історію комітів разом з хешами:

    
    git log
    

    Ця команда виведе повну історію комітів у зворотньому хронологічному порядку разом з їх хешами.

    Після виконання команди git log, ви побачите списки комітів з відповідними хешами. Хеш коміту зазвичай виглядає як рядок з 40 символів і може виглядати як 2e7d2f8b9a0e46f4f82c4d4b6a71cadc011adfeb або a3b8cfe.

    Важливо пам’ятати, що робота з гілками та командою reset може вплинути на історію вашого репозиторію, тому бути уважним і ретельно перевіряти, які зміни ви вносите. Рекомендується робити резервні копії перед застосуванням цих команд для уникнення втрати даних.

    Висновок

    Надіюсь вам сподобалась ця стаття, якщо так, то поділіться ней з вашими знайомими для підтримки контенту українською мовою. Дякую)

    html

    HTML для Початківців: Основи розмітки веб-сторінок

    HTML (HyperText Markup Language) є основою для створення веб-сторінок. Він дозволяє визначати структуру та зміст веб-сторінки за допомогою тегів. У цій статті ми розглянемо основні елементи HTML та як їх використовувати.

    Структура документа: Кожна HTML-сторінка починається з такого базового шаблону:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Заголовок сторінки</title>
    </head>
    <body>

    <!-- Ваш вміст сторінки тут -->
    </body>
    </html>

    Заголовки:

    Використовуйте теги <h1> до <h6> для визначення заголовків різних рівнів. Наприклад:

    <h1>Найбільший заголовок</h1>


    <h2>
    Другий за розміром заголовок</h2>

    Параграфи:

    Використовуйте тег <p> для визначення параграфів тексту. Наприклад:

    <p>Це перший параграф.</p>

    <p>Це другий параграф.</p>

     
    Зображення: 

    Використовуйте тег <img> для вставки зображень. Вказуйте шлях до зображення у властивості src. Наприклад:

    <img src="шлях_до_зображення.jpg" alt="Опис зображення">

     
    Посилання:

    Використовуйте тег <a> для створення посилань. Вкажіть посилання у властивості href. Наприклад:

    <a href="https://www.example.com">Текст посилання</a>

    Виділення тексту:

    <p>Це <strong>жирний текст</strong>, а це <em>курсивний текст</em>.</p>

    Списки:

    Є два типи списків: маркований та нумерований.

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

    <ul>
         <li>Перший елемент</li>
         <li>Другий елемент</li>
         <li>Третій елемент</li>
    </ul>

    Нумерований список створюється за допомогою тегу <ol> і елементів списку <li>. Наприклад:

    <ol>
         <li>Перший елемент</li>
         <li>Другий елемент</li>
         <li>Третій елемент</li>
    </ol>

    Форми:

    Створюйте форми за допомогою тегу <form>. Додайте поля вводу, кнопки та інші елементи для взаємодії з користувачем. Наприклад:

    <form>
         <label for=”name”>Ім’я:</label>
         <input type=”text” id=”name” name=”name” required>
         <br>
         <label for=”email”>Email:</label>
         <input type=”email” id=”email” name=”email” required>
         <br>
         <input type=”submit” value=”Надіслати”>
    </form>

    Групування елементів:

    <div> є одним з найбільш використовуваних тегів HTML і використовується для групування і розділення різних частин контенту на веб-сторінці. Тег <div> є блочним елементом, що означає, що він займає всю доступну ширину сторінки та починається з нового рядка.

    Основна роль <div> полягає в тому, щоб дати можливість вибирати, стилізувати та розміщувати групу пов’язаних елементів у структурі веб-сторінки. Ви можете додати класи або ідентифікатори до <div>, щоб мати змогу звертатися до них за допомогою CSS або JavaScript для стилізації або виконання певних дій на сторінці.

    Ось приклад використання <div> для групування елементів:

    <div>
    <h3>Заголовок групи елементів</h3>
    <p>Це група елементів, що потребує групування.</p>
    </div>

    Таблиці:

    Створюйте таблиці за допомогою тегів <table><tr> (рядок) і <td> (комірка) border визначає рамку для таблиці. Наприклад:

    <table border=“2”>
       <tr>
          <td>
    Комірка 1</td>
          <td>Комірка 2</td>
       </tr>
       <tr>
          <td>
    Комірка 3</td>
          <td>Комірка 4</td>
       </tr>
    </table>

    Коментарі:

    Використовуйте тег<!-- коментар -->для вставки коментарів у HTML-код, які не відображатимуться на веб-сторінці. Наприклад:

    <!– Це коментар, який пояснює наступний рядок коду –> <p>Це параграф звичайного тексту.</p> 

    Це лише основи HTML. Існує багато інших тегів та можливостей для створення веб-сторінок. Продовжуйте вивчати та експериментувати, щоб розширити свої знання HTML!

    Scroll to Top