Scribd Logo
Upload

Welcome to Scribd!

  • МОВА ГІПЕРТЕКСТОВОЇ РОЗМІТКИ. ГІПЕРТЕКСТОВИЙ ДОКУМЕНТ ТА ЙОГО ЕЛЕМЕНТИ

    Uploaded by

    coingg12
    1 views15 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, 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 PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    1 views15 pages

    МОВА ГІПЕРТЕКСТОВОЇ РОЗМІТКИ. ГІПЕРТЕКСТОВИЙ ДОКУМЕНТ ТА ЙОГО ЕЛЕМЕНТИ

    Uploaded by

    coingg12

    Copyright:

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

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

    РОЗМІТКИ.
    ГІПЕРТЕКСТОВИЙ ДОКУМЕНТ
    ТА ЙОГО ЕЛЕМЕНТИ
    • HTML (hypertext markup language) - мова розмітки
    гіпертекстових документів використовується для створення
    веб-сторінок і веб-додатків.
    • Наприкінці 1991 року тім бернерс-лі опублікував перший
    загальнодоступний опис мови розмітки html, відомий як
    документ «html-теги».
    • В ньому були описані 20 елементів відносно простої схеми
    розмітки html.
    HTML5 — Найпоширеніша нині версія мови HTML, яка в
    2004 році прийшла на заміну стандартній HTML.
    HTTPS://UK.WIKIPEDIA.ORG/WIKI/HTML5
    Вона дає можливість полегшити користувачеві навігацію
    сайтом завдяки розмітці областей веб-сторінки за
    допомогою певних тегів, які описують основні елементи,
    що є спільними для всіх веб-сторінок.
    Тіло сторінки умовно поділяється на блоки з відповідними
    назвами (як на картинці).
    Теги – службові символи (команди HTML), що вказують браузеру, як слід
    відображати web-сторінку.
    Теги починаються і закінчуються кутовими дужками.
    Елементи гіпертекстового документа мають таку структуру:
    ОСНОВНІ ТЕГИ. ТЕГИ МОЖУТЬ БУТИ ПАРНИМИ І НЕПАРНИМИ.

    < !DOCTYPE html > Задає версію HTML


    < html > ... < / html> Початок та кінець HTML-документа
    < title > ... < / title> Визначає заголовок веб-сторінки
    < head > ... < / head> Визначає інформацію про документ
    < body > ... < / body> Визначає межі тіла веб-сторінки
    Непарний тег. Задає кодування для розпізнавання
    < meta charset ="utf-8" >
    кирилиці
    СТРУКТУРА ВЕБСТОРІНКИ

    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <TITLE>МОЯ ПЕРША СТОРІНКА </TITLE>
    <META CHARSET="UTF-8">
    </HEAD>
    <BODY> ПРИВІТ, Я ЦЕ ЗРОБИЛА!
    </BODY>
    </HTML>
    ТЕГИ ДЛЯ ФОРМАТУВАННЯ ТЕКСТУ:

    <P> ТЕКСТ </P> Початок нового абзацу.


    Абзаци відокремлюються порожніми рядками. Якщо закриваючого тега немає,
    вважається, що кінець абзацу збігається з початком наступного абзацу або іншого
    блочного елемента.
    <BR> Непарний тег. Перехід у новий рядок. Текст буде наведено у новому рядку
    без пропуску рядка, як у випадку використання <P>
    <HR> Непарний тег. У рядку буде проведена горизонтальна лінія
    ПОВНИЙ СПИСОК ТЕГІВ
    Для створення html-розмітки документа використовують будь-який текстовий
    редактор.
    Для перегляду html - документа використовується браузер.
    СТВОРЕННЯ ПРОСТОЇ ВЕБ-СТОРІНКИ
    • Створіть папку web_design для збереження завдань курсу.
    • У папці web_design створіть папку урок_2.1, в якій буде зберігатися веб-сторінка
    • Запустіть notepade++ (це простий редактор коду).
    • У вікні редактора наберіть стандартний код html-розмітки, збережіть з
    розширенням .html.
    • Закрийте notepade++.
    • Відкрийте папку урок_2.1. Піктограма файла, збереженого у цій папці, вказує,
    який браузер встановлений за замовчуванням. У нас – google chrome.
    • Після збереження файла автоматично змінюється вигляд коду у вікні notepade+
    +. Теги, атрибути, текст виділяються різними кольорами, а парні теги
    підсвічуються при клацанні мишкою на будь-якому з них. Видно структуру.
    • В голові документа прописується теги, які не відображаються браузером, в
    тілі - ті, які браузер відображає.
    Збережіть файл у папці урок_2.1, обов'язково задавши розширення html.
    Наприклад, index.html. (Якщо не вказати розширення, то це буде звичайний
    текстовий файл, браузер не відображатиме його).
    • Оберіть кодування, яке прописане в charset (в даному випадку utf-8).
    • Двічі клацнувши мишкою файл index.html, ми відкриємо його в браузері як веб-
    сторінку
    • Розташуйте вікна блокнота notepad++ і браузера поряд, щоб зручно було бачити,
    яким чином зміна коду впливає на вигляд веб-сторінки.
    • Вносячи зміни у блокноті, оновлюємо веб-сторінку.
    ЗАВДАННЯ 2.1.2
    1. Змініть заголовок web-сторінки на "філософія життя".
    2. Скопіюйте текст з файлу тема2-1-1.txt і вставте його в тіло документа index.html.
    3. Відформатуйте текст згідно зразка, скористайтеся тегами <p>,<br>, <hr>.
    4. Збережіть з іменем tema2-1-2.html
    На зразку немає закриваючого тега </p>. Як ви думаєте, чому?
    Щоб продовжити редагувати файл, необхідно клацнути його правою кнопкою мишки
    та обрати команду edite with notepad++.

    You might also like