Scribd Logo
Upload

Welcome to Scribd!

  • Заняття 10

    Uploaded by

    kyrylakhaoleksandra
    9 views9 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views9 pages

    Заняття 10

    Uploaded by

    kyrylakhaoleksandra

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 9

    МОВА ГІПЕРТЕКСТОВОЇ РОЗМІТКИ

    Багато хто з вас мають власні захоплення, якими би хотіли


    поділитись зі світом: хтось пише вірші, хтось малює, захоплюється
    сучасним мистецтвом тощо. А чи не виникало у вас бажання
    створити власний сайт для реалізації своїх ідей? Якщо так, то ця
    тема саме для вас, бо на ній ви дізнаєтеся, як створити і розмістити в
    Інтернеті власний сайт, як його обслуговувати, наповнювати,
    підвищувати рівень відвідуваності.
    Життя сучасної людини неможливо уявити без всесвітньої
    мережі Інтернет. За допомогою браузерів ми маємо змогу переглядати
    отриману з Інтернету інформацію, що подана у вигляді гіпертексту.

    Гіпертекст – це текст, що містить гіперпосилання – зв’язки з


    іншими частинами документа або іншими документами чи
    файлами.

    Гіпертекст є складовою веб-сторінки, веб-сторінки


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

    Сайт або веб-сайт – це об’єднання тематично пов’язаних веб


    сторінок і документів під одним доменним іменем.

    Всі ми з вами звикли бачити веб сайти такими:


    Проте, для розробників цей самий сайт виглядає ось так:

    Це і є мова розмітки гіпертексту, або ж мова, якою написані сайти.


    HTML (англ. HyperText Markup Language – мова розмітки
    гіпертексту) – це набір тегів та правила їх застосування для
    створення гіпертекстових документів.

    Веб-сторінка являє собою створений мовою HTML документ,


    відображений у вікні браузера.

    HTML не є мовою програмування.

    Html-документ (html-файл) є текстовим документом, тому


    створити його можна в будь-якому текстовому редакторі або
    спеціальних редакторах коду.
    Будь-який документ мовою HTML є набором елементів,
    водночас початок і кінець кожного елемента позначається
    спеціальними позначками – тегами.
    Тег – мова розмітки гіпертексту) – це набір тегів та правила їх
    застосування для створення гіпертекстових документів.

    За допомогою тегів браузер розпізнає структуру документа.


    Отримавши цю інформацію, браузер використовує вбудовані в нього
    за замовчуванням правила про те, як відображати контент сторінки.
    Розглянемо структуру стандартної HTML-сторінки.

    <html> - початок документа;


    <head> - заголовок документа зі службовою інформацією;
    <title> - назва, що відображатиметься на вкладці браузера;
    </title> - кінець назви;
    </head> - кінець заголовка документа;
    <body> - «тіло» документа: все, що відображається на веб
    сторінці.
    </body> - кінець «тіла» документа;
    </html>- кінець документа.

    У html-документі розмір і регістр символів, якими записано


    теги, не мають значення. Розмір і накреслення символів, що
    відображаються у вікні браузера, визначаються розміткою
    гіпертекстового документа.
    Теги бувають парними (контейнери) і непарними. Парний тег
    складається з відкриваючого і закриваючого тегів. Закриваючий тег
    починається символом «/».
    Наприклад:
    <b>…</b> - парний тег напівжирного шрифту.
    <br> - непарний тег розриву рядка.
    Приклад:
    Розглянемо значення деяких тегів форматування тексту:

    Розглянемо ще один приклад веб-сторінки, створеної з


    використанням вказаних тегів:

    Результат:
    Практичне завдання:
    Використовуючи теоретичну інформацію та вивчені теги –
    створіть просту веб-сторінку з короткою автобіографією.
    1. Для цього використаємо сервіс Codepen (за відсутності
    комп’ютера ви можете виконувати завдання на смартфоні).

    Перейдіть за посиланням:

    https://codepen.io/pen/
    2. Зареєструйтеся на сервісі використавши кнопку SignUp в
    правому верхньому куті. Це дозволить вам зберігати ваші
    проєкти та продовжувати в них подальшу роботу.

    3. Щоб почати створювати нову сторінку – натисніть на кнопку


    Pen в лівому верхньому куті (вона з’явиться після реєстрації та
    входу у свій аккаунт).
    4. Ознайомтесь з структурою вікна редактора CodePen. Html-код
    нашої сторінки ми будемо записувати в ту частину вікна, яка
    має відповідну назву:

    5. Результат виконання записаного коду можна побачити знизу,


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

    P.S. Якщо ви одразу відкрили практичну роботу і нічого не


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

    Успіхів!
    Приклад виконання практичної роботи:

    You might also like