Основи мови HTML презентация

? Основи веб-дизайну
Вперед>>
<< Назад
12:36
Поняття про мову розмітки, гіпертекстовий документ та його елементи.
Поняття тегу й атрибуту.
Теги заголовку й тіла веб-сторінки.
Теги форматування шрифтів і поділу тексту на рядки та абзаци.
Текстові гіперпосилання.
Частина 1

Вперед >>
<< Назад
12:36
Основи мови HTML
За допомогою автоматизованих засобів, які надають у розпорядження користувача служби безкоштовного хостинга, створювати й адмініструвати веб-сайти надзвичайно просто. Крім того, це не потребує особливих знань із веб-дизайну.
Однак у такому випадку можливості обмежені. Потрібно опанувати спеціальну мову, призначену для розробки веб-сторінок. Тоді відкриються захоплюючі можливості щодо створення свого власного віртуального світу!
Ми ознайомимося із принципами створення веб-сторінок за допомогою мови HTML, навчимося визначати структуру сторінок, розміщувати і форматувати текст, працювати з таблицями та фреймами, пов'язувати створені файли за допомогою гіперпосилань. Виконавши дві запропоновані практичні роботи, ви власноруч створите веб-сторінки — можливо, перші у вашому житті.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Базові конструкції мови HTML
Основною перевагою та особливістю веб-сторінок є те, що інформація, розміщена на них, має вигляд гіпертексту.
Гіпертекст — це текст, у який вбудовані спеціальні коди, що задають форматування тексту, наявність у ньому ілюстрацій, мультимедійних вставок та гіперпосилань.
Ці коди визначені у мові програмування HTML (Hyper Text Markup Language — мова гіпертекстової розмітки).
Веб-сторінка фактично є документом у форматі HTML. Процес вставляння в текст кодів HTML називають розміткою.
Браузера підтримують мову HTML і під час завантаження веб-сторінки читають наявні у ній коди та виконують задані за їх допомогою операції (форматують текст, вставляють у нього зображення тощо). Таким чином, вигляд сторінки у вікні браузера залежить від того, які коди містяться у її документі.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Поняття тегу
Коди мови HTML, за допомогою яких розмічають вихідний текст називають тегами.
Під час відображення документа в браузері самих тегів не видно, але вони впливають на зовнішній вигляд документа.
Усі теги починаються із символу < і закінчуються символом > — їх називають кутовими дужками.
Після відкритої кутової дужки розміщують ключове слово, яке вказує на призначення тегу. Регістр у назвах тегів не мас значення, хоча загальновживаними є великі літери.
Приклади тегів HTML:
, , , ,
, .
? Основи веб-дизайну
Слайд 6
Вперед >>
<< Назад
12:36
Поняття тегу
Зазвичай тег впливає на певний фрагмент документа, наприклад
на абзац. У таких випадках використовують пару тегів (відкривальний і закривальний). Перший із них задає ефект, а другий — припиняє його дію. Закривальний тег починається із символу / (слеш).
Приклади парних тегів: , <В>
, , <НЗ>
,
.
Деякі теги задають разовий ефект у місці своєї появи, тоді закривальний тег не потрібен.
Приклади одинарних тегів:
,
,
,
, ,
.
Якщо між кутовими дужками помилково вказане ключове слово, якe відсутнє в мові HTML, то весь тег буде проігноровано.
? Основи веб-дизайну
Слайд 7
Вперед >>
<< Назад
12:36
Поняття тегу
Відкривальні теги можуть містити атрибути, які впливають на
ефект, створюваний тегом.
Атрибути — це додаткові ключові слона, відокремлені від основного ключового слова тегу та один від одного символами пробілу.
Для деяких атрибутів слід задавати значения, яке відділяють від імені атрибута символом =. Значення атрибута беруть у лапки, але в багатьох випадках їх можна і не ставити. Закривальні теги атрибутів не містять.
Приклади тегів з атрибутами:
? Основи веб-дизайну
Слайд 8
Вперед >>
<< Назад
12:36
Поняття тегу
Для того щоб через деякий час ви або
інша людина, яка переглядатиме код HTML, могла краще його зрозуміти, у текст вставляють примітки — коментарі.
Вони починаються зі спеціального тегу
Будь-який записаний після нього текст браузер розглядає як коментар і не відображає під час відтворення документа.
Закінчують коментар тегом -->.
Коментар може містити будь-які символи, крім >, а отже, не може включати в себе теги.
? Основи веб-дизайну
Слайд 9
Вперед >>
<< Назад
12:36
Структура HTML-документа
HTML-документ складається з основного тексту і тегів розмітки.
Фактично це звичайний текстовий файл, для створення і редагування якого можна використати будь-який текстовий редактор.
Зазвичай HTML-документи містяться у файлах із розширенням .htm або .html.
Документ HTML має чітко визначену структуру.
♦ Починається з тегу і закінчується відповідним йому тегом . Така пара тегів повідомляє браузеру, що це HTML-документ.
♦ Містить два розділи — заголовків і тіла документа (розміщються саме в такому порядку). Розділ заголовків помічений тегами і та містить інформацію про документ загалом. Зокрема, він повинен містити в собі теги
та </TlTLE>, між якими розміщено текст, що відображатиметься в заголовку вікна браузера. Крім цього, у розділі заголовків може міститися тег <МЕТА>, призначений для технічного опису документа (це інформація для пошукових програм), а також тег <STYLE> для опису стилів (наборів параметрів форматування), використаних у документі.<br>♦ Сам текст документа міститься в його тілі, яке розташоване між тегами <BODY> та </BODY>.<br><p>? Основи веб-дизайну<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide10" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 10</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/6661/slide-9.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Вперед >> 12:36 Документ HTML має структуру: Заголовок документа Текст," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/6661/slide-9.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/6661/slide-9.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/6661/slide-9.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/6661/slide-9.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Вперед >><br><p><< Назад<br><p>12:36<br><p>Документ HTML має структуру:<br><HTML><br><HEAD><br><TITLE> Заголовок документа
Текст, що відображається
на екрані
? Основи веб-дизайну
Слайд 11
Вперед >>
<< Назад
12:36
Заголовки
Для того щоб розбити текст на логічні частини, використовують
заголовки.
Мова HTML підтримує шість рівнів заголовків документів. Вони позначені тегами від
…
до
…
.
На екрані ці заголовки відображаються різними шрифтами.
Текст, що міститься всередині тегу заголовка, відображатиметься відповідно до його рівня. Найвищий рівень має заголовок Н1, найнижчий – Н2.
? Основи веб-дизайну
Слайд 12
Вперед >>
<< Назад
12:36
Вирівнювання заголовку
Текст заголовка може бути вирівняний по центру, за
правим або лівим краєм – для цього використовують атрибут ALIGN.
Наприклад: <Н2 ALIGN=center \ right \ left>Teкст заголовка
(символ \ означає можливість вибору між значеннями center, right або left).
? Основи веб-дизайну
Слайд 13
Вперед >>
<< Назад
12:36
Абзаци
Для визначення звичайних абзаців у мові HTML використовують теги
<Р> і
. Текст, розміщений між ними, власне і буде одним абзацом. При цьому слід пам'ятати, що всі «зайві» пропуски між словами і переходи на новий рядок під час відтворення HTML-документа браузер ігнорує. Коли браузер відтворює веб-сторінки, абзаци відділяються один від одного за допомогою відступів.
? Основи веб-дизайну
Слайд 14
Вперед >>
<< Назад
12:36
Перехід на новий рядок
У разі переходу на новий рядок
без створення абзацу використовується одинарний тег
.
? Основи веб-дизайну
Слайд 15
Вперед >>
<< Назад
12:36
Горизонтальна риска
Розділювачами в тексті можуть також бути горизонтальні
лінії, які візуально відділяють різні частини документа, — їх створюють за допомогою одинарного тегу
.
? Основи веб-дизайну
Слайд 16
Вперед >>
<< Назад
12:36
Атрибути тегу BODY
Кольори та зображення для всього документа і
його тла задають за допомогою тегу . Він може мати такі атрибути:
? Основи веб-дизайну
Слайд 17
Вперед >>
<< Назад
12:36
Колір тла та кольору тексту
? Основи веб-дизайну
Слайд 18
Вперед >>
<< Назад
12:36
Колір тла
Якщо додати до тегу атрибут BGCOLOR=cyan, то
колір тла веб-сторінки зміниться на світло-бірюзовий.
? Основи веб-дизайну
Слайд 19
Вперед >>
<< Назад
12:36
Малюнок – тло сторінки
? Основи веб-дизайну
Зверніть увагу на те,
що малюнок замощує тло сторінки. Слід уважно підбирати малюнок та його розміри
Слайд 20
Вперед >>
<< Назад
12:36
Особливості виведення тексту браузером
Браузер перетворює текст HTML-документа під час
його виведення на екран, тобто ігнорує зайві пропуски, символи табуляції, символи кінця рядка, форматує текст відповідно до використаних тегів.
Проте іноді виникає потреба у тому, щоб помістити в документ відформатований текст, для якого браузер повинен зберегти всі пропуски, навіть якщо кілька пропусків розміщені один за одним, знаки переносу на інший рядок, табуляції та інші символи форматування.
Для цього використовують тег
Teкст
.
? Основи веб-дизайну
Слайд 21
Вперед >>
<< Назад
12:36
Використання тегу
? Основи веб-дизайну
Слайд 22
Вперед >>
<< Назад
12:36
Теги форматування тексту
Текст у HTML-документах форматують за допомогою відповідних
тегів. У таблиці наведено теги, які використовують для форматування символів, та заданий ними ефект.
? Основи веб-дизайну
Слайд 23
Вперед >>
<< Назад
12:36
Задання параметрів шрифту
Можна визначати різні параметри шрифту. Зокрема, за
допомогою тегу
задають гарнітуру (рисунок), розмір і колір шрифту. Цей тег одинарний, діє на весь текст, розміщений нижче, і має такі атрибути.
? Основи веб-дизайну
Слайд 24
Вперед >>
12:36
Приклад використання теги
? Основи веб-дизайну
<< Назад
Слайд 25
Вперед >>
<< Назад
12:36
До уваги!
Якщо зазначеної гарнітури на комп'ютері користувача немає, то
текст буде оформлено з використанням гарнітури за умовчанням. В атрибуті FACE іноді записують через кому кілька гарнітур, тоді браузер вибирає гарнітури за списком: за відсутності першої використовує другу і т. д. Значення атрибута слід подавати в лапках.
Як значення кольору можна використовувати назви кольорів англійською мовою, такі як red, green, blue тощо, або шістнадцяткові значення (записані в шістнадцятковій системі числення), що починаються з символу # і послідовно задають червоний, зелений та синій кольори, які мають бути змішані для отримання потрібного.
Наприклад, #FF0000, #008000, #0000FF тощо.
? Основи веб-дизайну
Слайд 26
Вперед >>
<< Назад
12:36
? Основи веб-дизайну
Для оформлення сайту зазвичай використовують набір кольорів,
який називають безпечною палітрою.
Він складається з 216 елементів. Особливістю безпечних кольорів є те, що вони не змінюються у разі відображення різними браузерами або на різних моніторах. Якщо будь-яка з трьох складових шістнадцяткового значення відрізняється від 00, 33, 66, 99, СС чи FF, то колір не є безпечним.
Значення атрибутів SIZE та COLOR можна записувати без лапок.
Слайд 27
Вперед >>
<< Назад
12:36
Теги форматування тексту
Гарнітуру, розмір та колір шрифту для фрагмента
тексту задають за допомогою тегу
Teкст
.
Атрибути цього тегу такі самі, як у тегу
, за винятком атрибута SIZE: його значення зі знаком мінус (або плюс) означає, що розмір шрифту буде зменшено (чи збільшено) на відповідну величину відносно заданого за умовчанням або у тегу
. Значення без знака задає абсолютний розмір шрифту.
? Основи веб-дизайну
Слайд 28
Вперед >>
<< Назад
12:36
Теги форматування тексту
? Основи веб-дизайну
Слайд 29
Вперед >>
<< Назад
12:36
Теги форматування тексту
Є й інші теги, які можна застосовувати
для зміни параметрів тексту.
? Основи веб-дизайну
Слайд 30
Вперед >>
<< Назад
12:36
? Основи веб-дизайну
Теги для зміни параметрів тексту
Слайд 31
Вперед >>
<< Назад
12:36
Біжучий рядок
Цікавого оформлення веб-сторінці надає пара тегів
та
— вони додають до веб-сторінки «рухомий рядок» із тексту, розташованого між ними.
Біжучий рядок
Біжучий рядок
? Основи веб-дизайну
Виконання вправ 2.1 та 2.2
Слайд 32
Вперед >>
<< Назад
12:36
Текстові гіперпосилання
Гіперпосилання — це вказівка для браузера, до якого
об'єкта у межах або поза межами HTML-документа він має звернутися.
За допомогою гіперпосилань користувачі можуть переходити з однієї веб-сторінки на іншу, завантажувати файли тощо.
Як гіперпосилання може бути оформлений фрагмент тексту або графічний об'єкт. Коли веб-сторінка відображаються у вікні браузера, текстове посилання зазвичай виділено синім кольором і підкресленням.
Для переходу в місце, на яке вказує посилання, користувачу достатньо клацнути його текст.
? Основи веб-дизайну
Слайд 33
Вперед >>
<< Назад
12:36
Текстові гіперпосилання
Для створення гіперпосилання необхідно використовувати теги <А> та
, визначивши для тегу <А> атрибут HREF.
Його значенням має бути адреса URL, на яку вказує посилання.
Якщо веб-сторінка, на яку вказує посилання, розміщена на іншому веб-сайті, то значенням атрибута HREF має бути повна URL-адреса з назвою протоколу включно; такі посилання називають зовнішніми.
Якщо ж гіперпосилання вказує на іншу сторінку того самого сайту, то для пошуку документа достатньо задати лише відносний шлях; таке посилання називають внутрішнім.
? Основи веб-дизайну
Слайд 34
Вперед >>
<< Назад
12:36
Текстові гіперпосилання
Гіперпосилання може вказувати на певне місце всередині сторінки,
якщо туди попередньо вбудувати якір-мітку. Для визначення якоря також використовують теги <А> і
, але замість атрибута HREF задають атрибут NAME, значенням якого має бути ім'я якоря. Воно може складатися з літер та цифр, але не повинно містити символів пробілу.
Якщо на сторінці є кілька міток, то всі вони повинні мати різні назви.
Для створення посилання на встановлений якір потрібно у тегу <А> зазначити його ім'я в кінці адреси URL після імені документа, відокремивши його символом #. Символ # вказує на те, що після нього записано назву мітки, а не ім'я файлу.
Посилання на мітку всередині поточного документа задають так:
<А НREF="#назва_мітки">Текст посилання
.
Якщо в атрибуті HREF задати адресу електронної пошти зі словом mailto: перед нею, то після вибору такого посилання можна надіслати електронний лист, де в полі Кому буде записано цю адресу.
? Основи веб-дизайну
Слайд 35
Вперед >>
<< Назад
12:36
Приклад 2.3. HTML-документ, в якому використовуються Гіперпосилання та якорі
?
Основи веб-дизайну
Слайд 36
Вперед >>
<< Назад
12:36
Зверніть увагу!
У цьому прикладі слово «Microsoft» міститься у тегу
зовнішнього гіперпосилання, а текст «мою особисту сторінку» — у тегу внутрішнього посилання.
Текст «кінці цієї сторінки» розміщений у тегу посилання на якір, а «в цьому текстовому документі» — у тегу гіперпосилання з атрибутом HREF, в якому задано зв'язок не з веб-сторінкою, а з текстовим документом, котрий збережений у тій самій папці, що й поточний HTML-документ.
Текст «[e-mail]» вміщено у тег, що описує мітку якоря, а в атрибуті HREF зазначено адресу електронної пошти.
Якщо відвідувач веб-сторінки скористається зовнішнім гіперпосиланням Microsoft, то відкриється сторінка, що міститься за адресою: http://www.microsoft.com/.
? Основи веб-дизайну
Слайд 37
Вперед >>
<< Назад
12:36
Зверніть увагу!
Після клацання гіперпосилання мою особисту сторінку відкриється веб-сторінка,
записана у файлі main.htm, який міститься у тій самій папці, що й поточна сторінка.
Після клацання внутрішнього посилання в цьому текстовому документі відкриється вікно з текстовим документом text.doc, що міститься у поточній папці.
Якщо скористатися посиланням на якір в кінці цієї сторінки, то зображення поточної веб-сторінки зміститься так, що текст мітки «[e-mail]», з якою зв'язаний якір, буде розміщений у видимій на екрані частині документа.
Водночас текст «[e-mail]» є гіперпосиланням, скориставшись яким, користувач зможе надіслати листа за допомогою настроєної на своєму комп'ютері електронної пошти за вказаною в атрибуті HREF адресою — [e-mail].
? Основи веб-дизайну
Слайд 38
Вперед >>
<< Назад
12:36
Текстові гіперпосилання
Розглянемо ще один приклад створення текстових гіперпосилань. Припустимо,
що у певній папці збережено два HTML-документи, які описують два напрями роботи фірми, — 1.html та 2.html. Створимо веб-сторінку з переліком гіперпосилань, кожне з яких ілюструватиме один із напрямів роботи фірми:
? Основи веб-дизайну
Слайд 39
Вперед >>
<< Назад
12:36
Текстові гіперпосилання
У цьому прикладі теги гіперпосилань містяться в тегах
заголовків першого рівня. Тексти гіперпосилань будуть розташовані в окремих рядках і оформлені як заголовки першого рівня. За умовчанням текстові гіперпосилання виділені синім кольором і підкреслені, а якщо ними вже скористалися, то темночервоним.
? Основи веб-дизайну
Имя файла: Основи-мови-HTML.pptx
Количество просмотров: 101
Количество скачиваний: 0
Скачать
- Предыдущая
Распад Золотой Орды и его последствия, 6 класс
Следующая -
Пошук зображень, текстів, відео, карт в Інтернеті для навчальних предметів
Похожие презентации
Стандарты, методологии разработки ПО, описания БП используемые в работе
Разбор решений задач части В заданий ГИА по информатике с заданиями для самоконтроля
Data types, язык С++
Портфолио моих достижений
Основы алгоритмизации
Алгоритм и его свойства
Разработка Web-технологий в сопровождении НОЦ
Безопасное использование сети интернет
Модуль Вывоз ТКО и промышленных отходов
Воронка продаж со 100% гарантией
Интерфейс программы подготовки презентаций
Windows phone. История. Версии ОС. Характеристики. Разработка. Итоги. Используемые ресурсы
Информационно-справочная документация и её оформление
Поисковое продвижение (SEO)
Марк ЦукербергГений или злодей?
Жұмыста мультисервистік желілердің құрылымы
Апаратне забезпечення інформаційних систем. Історія розвитку обчислювальної техніки. (Урок 4)
Применение нечеткой логики в ИСУ
Проектирование физического и канального уровней локальной вычислительной сети предприятия по проектированию и разработке ПО
Парная регрессия и корреляция. Использование ППП MS Ехсеl в построении парной линейной регрессии
1С:Предприятие 8. Управление сервисным центром
Звіт з лабораторних робіт
Использование Web 2.0 в образовании
тест по теме Всемирная паутина
Global Social Media Plan
Кодовые таблицы
История развития ЭВМ
Теги и их роль в структуре веб-страницы
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q){return {data:{meta:{result:{meta:{h1:o,main_text:a,main_title:p,main_description:q,main_keywords:r,main_image:a},app:{logo_image:s,logo_image_width:t,logo_image_height:j,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:k,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:l,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:m,header_bg:i,accent:i}},social:F}},item:{result:{id:6661,name:n,category:G,count:j,jpg:"jpg\u002F6661",hits:101,download:b,h1:"Основи мови HTML презентация",meta:{h1:n,title:n,description:"Основи мови HTML презентация на тему, доклад, Информатика",keywords:"Основи мови HTML, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Основи мови HTML из раздела Информатика. Презентация на заданную тему содержит 40 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EВперед\u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EПоняття про мову розмітки, гіпертекстовий документ та його елементи.\u003Cbr\u003EПоняття тегу й атрибуту. \u003Cbr\u003EТеги заголовку й тіла веб-сторінки. \u003Cbr\u003EТеги форматування шрифтів і поділу тексту ",file:"Основи-мови-HTML.pptx",texts:["\u003Cp\u003EСпецкурс “Основи веб-дизайну”\u003Cbr\u003E\u003Cp\u003EРозділ 2. Основи мови HTML\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EВперед\u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E","\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EВперед\u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EПоняття про мову розмітки, гіпертекстовий документ та його елементи.\u003Cbr\u003EПоняття тегу й атрибуту. \u003Cbr\u003EТеги заголовку й тіла веб-сторінки. \u003Cbr\u003EТеги форматування шрифтів і поділу тексту на рядки та абзаци. \u003Cbr\u003EТекстові гіперпосилання.\u003Cbr\u003E\u003Cp\u003EЧастина 1\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EОснови мови HTML\u003Cbr\u003E\u003Cp\u003EЗа допомогою автоматизованих засобів, які надають у розпорядження користувача служби безкоштовного хостинга, створювати й адмініструвати веб-сайти надзвичайно просто. Крім того, це не потребує особливих знань із веб-дизайну. \u003Cbr\u003EОднак у такому випадку можливості обмежені. Потрібно опанувати спеціальну мову, призначену для розробки веб-сторінок. Тоді відкриються захоплюючі можливості щодо створення свого власного віртуального світу! \u003Cbr\u003EМи ознайомимося із принципами створення веб-сторінок за допомогою мови HTML, навчимося визначати структуру сторінок, розміщувати і форматувати текст, працювати з таблицями та фреймами, пов'язувати створені файли за допомогою гіперпосилань. Виконавши дві запропоновані практичні роботи, ви власноруч створите веб-сторінки — можливо, перші у вашому житті.\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EБазові конструкції мови HTML\u003Cbr\u003E\u003Cp\u003EОсновною перевагою та особливістю веб-сторінок є те, що інформація, розміщена на них, має вигляд гіпертексту. \u003Cbr\u003EГіпертекст — це текст, у який вбудовані спеціальні коди, що задають форматування тексту, наявність у ньому ілюстрацій, мультимедійних вставок та гіперпосилань. \u003Cbr\u003EЦі коди визначені у мові програмування HTML (Hyper Text Markup Language — мова гіпертекстової розмітки). \u003Cbr\u003EВеб-сторінка фактично є документом у форматі HTML. Процес вставляння в текст кодів HTML називають розміткою.\u003Cbr\u003EБраузера підтримують мову HTML і під час завантаження веб-сторінки читають наявні у ній коди та виконують задані за їх допомогою операції (форматують текст, вставляють у нього зображення тощо). Таким чином, вигляд сторінки у вікні браузера залежить від того, які коди містяться у її документі.\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EПоняття тегу\u003Cbr\u003E\u003Cp\u003EКоди мови HTML, за допомогою яких розмічають вихідний текст називають тегами. \u003Cbr\u003EПід час відображення документа в браузері самих тегів не видно, але вони впливають на зовнішній вигляд документа. \u003Cbr\u003EУсі теги починаються із символу \u003C і закінчуються символом \u003E — їх називають кутовими дужками.\u003Cbr\u003EПісля відкритої кутової дужки розміщують ключове слово, яке вказує на призначення тегу. Регістр у назвах тегів не мас значення, хоча загальновживаними є великі літери. \u003Cbr\u003EПриклади тегів HTML: \u003CTІTLE\u003E, \u003CBODY\u003E, \u003CTABLE\u003E, \u003C\u002FA\u003E, \u003CIMG\u003E, \u003C\u002FCENTER\u003E.\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EПоняття тегу\u003Cbr\u003E\u003Cp\u003EЗазвичай тег впливає на певний фрагмент документа, наприклад на абзац. У таких випадках використовують пару тегів (відкривальний і закривальний). Перший із них задає ефект, а другий — припиняє його дію. Закривальний тег починається із символу \u002F (слеш). \u003Cbr\u003EПриклади парних тегів: \u003CHTML\u003E\u003C\u002FHTML\u003E, \u003CВ\u003E\u003C\u002FВ\u003E, \u003CHEAD\u003E\u003C\u002FHEAD\u003E, \u003CНЗ\u003E\u003C\u002FН3\u003E, \u003CADDRESS\u003E\u003C\u002FADDRESS\u003E.\u003Cbr\u003E\u003Cbr\u003EДеякі теги задають разовий ефект у місці своєї появи, тоді закривальний тег не потрібен. \u003Cbr\u003EПриклади одинарних тегів: \u003CBR\u003E, \u003CHR\u003E, \u003CMETA\u003E, \u003CBASEFONT\u003E, \u003CFRAME\u003E, \u003CINPUT\u003E.\u003Cbr\u003EЯкщо між кутовими дужками помилково вказане ключове слово, якe відсутнє в мові HTML, то весь тег буде проігноровано.\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EПоняття тегу\u003Cbr\u003E\u003Cp\u003EВідкривальні теги можуть містити атрибути, які впливають на ефект, створюваний тегом.\u003Cbr\u003E Атрибути — це додаткові ключові слона, відокремлені від основного ключового слова тегу та один від одного символами пробілу.\u003Cbr\u003EДля деяких атрибутів слід задавати значения, яке відділяють від імені атрибута символом =. Значення атрибута беруть у лапки, але в багатьох випадках їх можна і не ставити. Закривальні теги атрибутів не містять.\u003Cbr\u003EПриклади тегів з атрибутами:\u003Cbr\u003E\u003CBODY BGCOLOR=“#000000“ ТEХТ =“FFFFFF” BACKGROUND=\"rain.gif\"\u003E\u003Cbr\u003E\u003COPTION SELECTED\u003E\u003Cbr\u003E\u003CFRAME SCR=\"file.html\" NORESIZE\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EПоняття тегу\u003Cbr\u003E\u003Cp\u003EДля того щоб через деякий час ви або інша людина, яка переглядатиме код HTML, могла краще його зрозуміти, у текст вставляють примітки — коментарі. \u003Cbr\u003EВони починаються зі спеціального тегу \u003C! - - .\u003Cbr\u003EБудь-який записаний після нього текст браузер розглядає як коментар і не відображає під час відтворення документа. \u003Cbr\u003EЗакінчують коментар тегом --\u003E. \u003Cbr\u003EКоментар може містити будь-які символи, крім \u003E, а отже, не може включати в себе теги.\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EСтруктура HTML-документа\u003Cbr\u003E\u003Cp\u003EHTML-документ складається з основного тексту і тегів розмітки. Фактично це звичайний текстовий файл, для створення і редагування якого можна використати будь-який текстовий редактор. \u003Cbr\u003EЗазвичай HTML-документи містяться у файлах із розширенням .htm або .html.\u003Cbr\u003EДокумент HTML має чітко визначену структуру.\u003Cbr\u003E♦\tПочинається з тегу \u003CHTML\u003E і закінчується відповідним йому тегом \u003C\u002FHTML\u003E. Така пара тегів повідомляє браузеру, що це HTML-документ.\u003Cbr\u003E♦\tМістить два розділи — заголовків і тіла документа (розміщються саме в такому порядку). Розділ заголовків помічений тегами \u003CHEAD\u003E і \u003C\u002FHEAD\u003E та містить інформацію про документ загалом. Зокрема, він повинен містити в собі теги \u003CTITLE\u003E та \u003C\u002FTlTLE\u003E, між якими розміщено текст, що відображатиметься в заголовку вікна браузера. Крім цього, у розділі заголовків може міститися тег \u003CМЕТА\u003E, призначений для технічного опису документа (це інформація для пошукових програм), а також тег \u003CSTYLE\u003E для опису стилів (наборів параметрів форматування), використаних у документі.\u003Cbr\u003E♦ Сам текст документа міститься в його тілі, яке розташоване між тегами \u003CBODY\u003E та \u003C\u002FBODY\u003E.\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EДокумент HTML має структуру:\u003Cbr\u003E\u003CHTML\u003E\u003Cbr\u003E\u003CHEAD\u003E\u003Cbr\u003E\u003CTITLE\u003E Заголовок документа \u003C\u002FTITLE\u003E\u003Cbr\u003E\u003C\u002FHEAD\u003E\u003Cbr\u003E\u003CBODY\u003E\u003Cbr\u003EТекст, що відображається на екрані\u003Cbr\u003E\u003C\u002FBODY\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\t\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EЗаголовки\u003Cbr\u003E\u003Cp\u003EДля того щоб розбити текст на логічні частини, використовують заголовки.\u003Cbr\u003EМова HTML підтримує шість рівнів заголовків документів. Вони позначені тегами від \u003CH1\u003E…\u003C\u002FH1\u003E до \u003CH6\u003E…\u003C\u002FH6\u003E.\u003Cbr\u003EНа екрані ці заголовки відображаються різними шрифтами.\u003Cbr\u003E Текст, що міститься всередині тегу заголовка, відображатиметься відповідно до його рівня. Найвищий рівень має заголовок Н1, найнижчий – Н2.\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EВирівнювання заголовку\u003Cbr\u003E\u003Cp\u003EТекст заголовка може бути вирівняний по центру, за правим або лівим краєм – для цього використовують атрибут ALIGN.\u003Cbr\u003EНаприклад: \u003CН2 ALIGN=center \\ right \\ left\u003ETeкст заголовка\u003C\u002FН2 \u003E \u003Cbr\u003E(символ \\ означає можливість вибору між значеннями center, right або left). \u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EАбзаци\u003Cbr\u003E\u003Cp\u003EДля визначення звичайних абзаців у мові HTML використовують теги \u003CР\u003E і \u003C\u002FР\u003E. Текст, розміщений між ними, власне і буде одним абзацом. При цьому слід пам'ятати, що всі «зайві» пропуски між словами і переходи на новий рядок під час відтворення HTML-документа браузер ігнорує. Коли браузер відтворює веб-сторінки, абзаци відділяються один від одного за допомогою відступів. \u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EПерехід на новий рядок\u003Cbr\u003E\u003Cp\u003EУ разі переходу на новий рядок без створення абзацу використовується одинарний тег \u003CBR\u003E.\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EГоризонтальна риска \u003Cbr\u003E\u003Cp\u003EРозділювачами в тексті можуть також бути горизонтальні лінії, які візуально відділяють різні частини документа, — їх створюють за допомогою одинарного тегу \u003Chr\u003E. \u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EАтрибути тегу BODY\u003Cbr\u003E\u003Cp\u003EКольори та зображення для всього документа і його тла задають за допомогою тегу \u003CBODY\u003E. Він може мати такі атрибути:\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EКолір тла та кольору тексту\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EКолір тла\u003Cbr\u003E\u003Cp\u003EЯкщо додати до тегу \u003CBODY\u003E атрибут BGCOLOR=cyan, то колір тла веб-сторінки зміниться на світло-бірюзовий.\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EМалюнок – тло сторінки\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EЗверніть увагу на те, що малюнок замощує тло сторінки. Слід уважно підбирати малюнок та його розміри \u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EОсобливості виведення тексту браузером\u003Cbr\u003E\u003Cp\u003EБраузер перетворює текст HTML-документа під час його виведення на екран, тобто ігнорує зайві пропуски, символи табуляції, символи кінця рядка, форматує текст відповідно до використаних тегів. \u003Cbr\u003EПроте іноді виникає потреба у тому, щоб помістити в документ відформатований текст, для якого браузер повинен зберегти всі пропуски, навіть якщо кілька пропусків розміщені один за одним, знаки переносу на інший рядок, табуляції та інші символи форматування. \u003Cbr\u003EДля цього використовують тег \u003CPRE\u003ETeкст\u003C\u002FPRE\u003E. \u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EВикористання тегу \u003CPRE\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EТеги форматування тексту\u003Cbr\u003E\u003Cp\u003EТекст у HTML-документах форматують за допомогою відповідних тегів. У таблиці наведено теги, які використовують для форматування символів, та заданий ними ефект.\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EЗадання параметрів шрифту\u003Cbr\u003E\u003Cp\u003EМожна визначати різні параметри шрифту. Зокрема, за допомогою тегу \u003CBASEFONT\u003E задають гарнітуру (рисунок), розмір і колір шрифту. Цей тег одинарний, діє на весь текст, розміщений нижче, і має такі атрибути.\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EПриклад використання теги \u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EДо уваги!\u003Cbr\u003E\u003Cp\u003EЯкщо зазначеної гарнітури на комп'ютері користувача немає, то текст буде оформлено з використанням гарнітури за умовчанням. В атрибуті FACE іноді записують через кому кілька гарнітур, тоді браузер вибирає гарнітури за списком: за відсутності першої використовує другу і т. д. Значення атрибута слід подавати в лапках.\u003Cbr\u003EЯк значення кольору можна використовувати назви кольорів англійською мовою, такі як red, green, blue тощо, або шістнадцяткові значення (записані в шістнадцятковій системі числення), що починаються з символу # і послідовно задають червоний, зелений та синій кольори, які мають бути змішані для отримання потрібного.\r\nНаприклад, #FF0000, #008000, #0000FF тощо.\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EДля оформлення сайту зазвичай використовують набір кольорів, який називають безпечною палітрою.\u003Cbr\u003EВін складається з 216 елементів. Особливістю безпечних кольорів є те, що вони не змінюються у разі відображення різними браузерами або на різних моніторах. Якщо будь-яка з трьох складових шістнадцяткового значення відрізняється від 00, 33, 66, 99, СС чи FF, то колір не є безпечним. \u003Cbr\u003EЗначення атрибутів SIZE та COLOR можна записувати без лапок.\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EТеги форматування тексту\u003Cbr\u003E\u003Cp\u003EГарнітуру, розмір та колір шрифту для фрагмента тексту задають за допомогою тегу \u003CFONT АTPИБУТИ\u003ETeкст\u003C\u002FFONT\u003E. \u003Cbr\u003EАтрибути цього тегу такі самі, як у тегу \u003CBASEFONT\u003E, за винятком атрибута SIZE: його значення зі знаком мінус (або плюс) означає, що розмір шрифту буде зменшено (чи збільшено) на відповідну величину відносно заданого за умовчанням або у тегу \u003CBASEFONT\u003E. Значення без знака задає абсолютний розмір шрифту. \u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EТеги форматування тексту\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EТеги форматування тексту\u003Cbr\u003E\u003Cp\u003EЄ й інші теги, які можна застосовувати для зміни параметрів тексту.\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EТеги для зміни параметрів тексту\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EБіжучий рядок\u003Cbr\u003E\u003Cp\u003EЦікавого оформлення веб-сторінці надає пара тегів \u003CMARQUEE\u003E та \u003C\u002FMARQUEE\u003E — вони додають до веб-сторінки «рухомий рядок» із тексту, розташованого між ними.\u003Cbr\u003E\u003Cmarquee behavior=\"alternate\" bgcolor=\"#FF3333\" loop=\"-1\" hspace=\"10\" vspace=\"300\" scrolldelay=\"5\"\u003EБіжучий рядок\u003C\u002Fmarquee\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cmarquee width=\"250\" behavior=\"alternate\" bgcolor=\"#FFCC00\" loop=\"-1\" hspace=\"20\" vspace=\"10\" scrolldelay=\"5\"\u003E\u003Cb\u003EБіжучий рядок\u003Cb\u003E\u003C\u002Fmarquee\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E\u003Cp\u003EВиконання вправ 2.1 та 2.2\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EТекстові гіперпосилання\u003Cbr\u003E\u003Cp\u003EГіперпосилання — це вказівка для браузера, до якого об'єкта у межах або поза межами HTML-документа він має звернутися. \u003Cbr\u003EЗа допомогою гіперпосилань користувачі можуть переходити з однієї веб-сторінки на іншу, завантажувати файли тощо. \u003Cbr\u003EЯк гіперпосилання може бути оформлений фрагмент тексту або графічний об'єкт. Коли веб-сторінка відображаються у вікні браузера, текстове посилання зазвичай виділено синім кольором і підкресленням. \u003Cbr\u003EДля переходу в місце, на яке вказує посилання, користувачу достатньо клацнути його текст.\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EТекстові гіперпосилання\u003Cbr\u003E\u003Cp\u003EДля створення гіперпосилання необхідно використовувати теги \u003CА\u003E та \u003C\u002FА\u003E, визначивши для тегу \u003CА\u003E атрибут HREF. \u003Cbr\u003EЙого значенням має бути адреса URL, на яку вказує посилання. \u003Cbr\u003EЯкщо веб-сторінка, на яку вказує посилання, розміщена на іншому веб-сайті, то значенням атрибута HREF має бути повна URL-адреса з назвою протоколу включно; такі посилання називають зовнішніми. \u003Cbr\u003EЯкщо ж гіперпосилання вказує на іншу сторінку того самого сайту, то для пошуку документа достатньо задати лише відносний шлях; таке посилання називають внутрішнім. \u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EТекстові гіперпосилання\u003Cbr\u003E\u003Cp\u003EГіперпосилання може вказувати на певне місце всередині сторінки, якщо туди попередньо вбудувати якір-мітку. Для визначення якоря також використовують теги \u003CА\u003E і \u003C\u002FА\u003E, але замість атрибута HREF задають атрибут NAME, значенням якого має бути ім'я якоря. Воно може складатися з літер та цифр, але не повинно містити символів пробілу. \u003Cbr\u003EЯкщо на сторінці є кілька міток, то всі вони повинні мати різні назви.\u003Cbr\u003EДля створення посилання на встановлений якір потрібно у тегу \u003CА\u003E зазначити його ім'я в кінці адреси URL після імені документа, відокремивши його символом #. Символ # вказує на те, що після нього записано назву мітки, а не ім'я файлу.\u003Cbr\u003EПосилання на мітку всередині поточного документа задають так:\u003Cbr\u003E\u003CА НREF=\"#назва_мітки\"\u003EТекст посилання\u003C\u002FА\u003E.\u003Cbr\u003EЯкщо в атрибуті HREF задати адресу електронної пошти зі словом mailto: перед нею, то після вибору такого посилання можна надіслати електронний лист, де в полі Кому буде записано цю адресу. \u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EПриклад 2.3. HTML-документ, в якому використовуються Гіперпосилання та якорі\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EЗверніть увагу!\u003Cbr\u003E\u003Cp\u003EУ цьому прикладі слово «Microsoft» міститься у тегу зовнішнього гіперпосилання, а текст «мою особисту сторінку» — у тегу внутрішнього посилання. \u003Cbr\u003EТекст «кінці цієї сторінки» розміщений у тегу посилання на якір, а «в цьому текстовому документі» — у тегу гіперпосилання з атрибутом HREF, в якому задано зв'язок не з веб-сторінкою, а з текстовим документом, котрий збережений у тій самій папці, що й поточний HTML-документ. \u003Cbr\u003EТекст «[e-mail]» вміщено у тег, що описує мітку якоря, а в атрибуті HREF зазначено адресу електронної пошти.\u003Cbr\u003EЯкщо відвідувач веб-сторінки скористається зовнішнім гіперпосиланням Microsoft, то відкриється сторінка, що міститься за адресою: http:\u002F\u002Fwww.microsoft.com\u002F. \u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EЗверніть увагу!\u003Cbr\u003E\u003Cp\u003EПісля клацання гіперпосилання мою особисту сторінку відкриється веб-сторінка, записана у файлі main.htm, який міститься у тій самій папці, що й поточна сторінка. \u003Cbr\u003EПісля клацання внутрішнього посилання в цьому текстовому документі відкриється вікно з текстовим документом text.doc, що міститься у поточній папці. \u003Cbr\u003EЯкщо скористатися посиланням на якір в кінці цієї сторінки, то зображення поточної веб-сторінки зміститься так, що текст мітки «[e-mail]», з якою зв'язаний якір, буде розміщений у видимій на екрані частині документа.\u003Cbr\u003EВодночас текст «[e-mail]» є гіперпосиланням, скориставшись яким, користувач зможе надіслати листа за допомогою настроєної на своєму комп'ютері електронної пошти за вказаною в атрибуті HREF адресою — [e-mail].\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EТекстові гіперпосилання\u003Cbr\u003E\u003Cp\u003EРозглянемо ще один приклад створення текстових гіперпосилань. Припустимо, що у певній папці збережено два HTML-документи, які описують два напрями роботи фірми, — 1.html та 2.html. Створимо веб-сторінку з переліком гіперпосилань, кожне з яких ілюструватиме один із напрямів роботи фірми:\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EТекстові гіперпосилання\u003Cbr\u003E\u003Cp\u003EУ цьому прикладі теги гіперпосилань містяться в тегах заголовків першого рівня. Тексти гіперпосилань будуть розташовані в окремих рядках і оформлені як заголовки першого рівня. За умовчанням текстові гіперпосилання виділені синім кольором і підкреслені, а якщо ними вже скористалися, то темночервоним. \u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E","\u003Cp\u003EВперед \u003E\u003E\u003Cbr\u003E\u003Cp\u003E\u003C\u003C Назад\u003Cbr\u003E\u003Cp\u003E12:36\u003Cbr\u003E\u003Cp\u003EТекстові гіперпосилання\u003Cbr\u003E\u003Cp\u003EДля зміни цих кольорів додамо відповідні атрибути до тегу \u003CBODY\u003E: \u003Cbr\u003E\u003CBODY LINK=magenta ALINK=yellow\u003E. \u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003EЦе означає, що після першого завантаження веб-сторінки всі гіперпосилання будуть фіолетового кольору, а якщо відвідувач скористається одним із них, то колір його тексту стане жовтим. \u003Cbr\u003EЦе зручно, коли на веб-сторінці є багато посилань, і відвідувач бажає по черзі переглянути їх: тоді надання іншого кольору відвіданим гіперпосиланням дає змогу систематизувати такий перегляд.\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E? Основи веб-дизайну\u003Cbr\u003E"],href:"\u002Finformatika\u002Fosnovi-movi-html",href_category:"\u002Finformatika",date:1624148591,related:[{id:307789,name:"Стандарты, методологии разработки ПО, описания БП используемые в работе",href:"\u002Finformatika\u002Fstandarty-metodologii-razrabotki-po-opisaniya-bp",jpg:"jpg\u002F307789"},{id:536719,name:"Разбор решений задач части В заданий ГИА по информатике с заданиями для самоконтроля",href:"\u002Finformatika\u002Frazbor-resheniy-zadach-chasti-v-zadaniy-1",jpg:"jpg\u002F536719"},{id:234254,name:"Data types, язык С++",href:"\u002Finformatika\u002Fdata-types-yazyk-s",jpg:"jpg\u002F234254"},{id:512614,name:"Портфолио моих достижений",href:"\u002Finformatika\u002Fportfolio-moih-dostizheniy",jpg:"jpg\u002F512614"},{id:224809,name:"Основы алгоритмизации",href:"\u002Finformatika\u002Fosnovy-algoritmizatsii-10",jpg:"jpg\u002F224809"},{id:379576,name:"Алгоритм и его свойства",href:"\u002Finformatika\u002Falgoritm-i-ego-svoystva-6",jpg:"jpg\u002F379576"},{id:388397,name:"Разработка Web-технологий в сопровождении НОЦ",href:"\u002Finformatika\u002Frazrabotka-web-tehnologiy-v-soprovozhdenii-nots",jpg:"jpg\u002F388397"},{id:104982,name:"Безопасное использование сети интернет",href:"\u002Finformatika\u002Fbezopasnoe-ispolzovanie-seti-internet",jpg:"jpg\u002F104982"},{id:598357,name:"Модуль Вывоз ТКО и промышленных отходов",href:"\u002Finformatika\u002Fmodul-vyvoz-tko-i-promyshlennyh-othodov",jpg:"jpg\u002F598357"},{id:246010,name:"Воронка продаж со 100% гарантией",href:"\u002Finformatika\u002Fvoronka-prodazh-so-100-garantiey",jpg:"jpg\u002F246010"},{id:180564,name:"Интерфейс программы подготовки презентаций",href:"\u002Finformatika\u002Finterfeys-programmy-podgotovki-prezentatsiy",jpg:"jpg\u002F180564"},{id:149678,name:"Windows phone. История. Версии ОС. Характеристики. Разработка. Итоги. Используемые ресурсы",href:"\u002Finformatika\u002Fwindows-phone-istoriya-versii-os-harakteristiki",jpg:"jpg\u002F149678"},{id:332386,name:"Информационно-справочная документация и её оформление",href:"\u002Finformatika\u002Finformatsionno-spravochnaya-dokumentatsiya-i-eyo-oformlenie",jpg:"jpg\u002F332386"},{id:345609,name:"Поисковое продвижение (SEO)",href:"\u002Finformatika\u002Fpoiskovoe-prodvizhenie-seo-1",jpg:"jpg\u002F345609"},{id:486744,name:"Марк ЦукербергГений или злодей?",href:"\u002Finformatika\u002Fmark-tsukerberggeniy-ili-zlodey",jpg:"jpg\u002F486744"},{id:248048,name:"Жұмыста мультисервистік желілердің құрылымы",href:"\u002Finformatika\u002Fzhmysta-multiservistk-zhellerd-rylymy",jpg:"jpg\u002F248048"},{id:369488,name:"Апаратне забезпечення інформаційних систем. Історія розвитку обчислювальної техніки. (Урок 4)",href:"\u002Finformatika\u002Faparatne-zabezpechennya-nformatsynih-sistem-storya-rozvitku",jpg:"jpg\u002F369488"},{id:2100,name:"Применение нечеткой логики в ИСУ",href:"\u002Finformatika\u002Fprimenenie-nechetkoy-logiki-v-isu",jpg:"jpg\u002F2100"},{id:587550,name:"Проектирование физического и канального уровней локальной вычислительной сети предприятия по проектированию и разработке ПО",href:"\u002Finformatika\u002Fproektirovanie-fizicheskogo-i-kanalnogo-urovney-lokalnoy",jpg:"jpg\u002F587550"},{id:241256,name:"Парная регрессия и корреляция. Использование ППП MS Ехсеl в построении парной линейной регрессии",href:"\u002Finformatika\u002Fparnaya-regressiya-i-korrelyatsiya-ispolzovanie-ppp",jpg:"jpg\u002F241256"},{id:286392,name:"1С:Предприятие 8. Управление сервисным центром",href:"\u002Finformatika\u002F1spredpriyatie-8-upravlenie-servisnym-tsentrom",jpg:"jpg\u002F286392"},{id:350269,name:"Звіт з лабораторних робіт",href:"\u002Finformatika\u002Fzvt-z-laboratornih-robt",jpg:"jpg\u002F350269"},{id:254579,name:"Использование Web 2.0 в образовании",href:"\u002Finformatika\u002Fispolzovanie-web-20-v-obrazovanii",jpg:"jpg\u002F254579"},{id:564864,name:"тест по теме Всемирная паутина",href:"\u002Finformatika\u002Ftest-po-teme-vsemirnaya-pautina",jpg:"jpg\u002F564864"},{id:285534,name:"Global Social Media Plan",href:"\u002Finformatika\u002Fglobal-social-media-plan-4",jpg:"jpg\u002F285534"},{id:346032,name:"Кодовые таблицы",href:"\u002Finformatika\u002Fkodovye-tablitsy",jpg:"jpg\u002F346032"},{id:328403,name:"История развития ЭВМ",href:"\u002Finformatika\u002Fistoriya-razvitiya-evm-5",jpg:"jpg\u002F328403"},{id:597384,name:"Теги и их роль в структуре веб-страницы",href:"\u002Finformatika\u002Ftegi-i-ih-rol-v-strukture",jpg:"jpg\u002F597384"}],navigation:{next:"\u002Finformatika\u002Fposhuk-zobrazhen-tekstv-vdeo-kart-v",next_name:"Пошук зображень, текстів, відео, карт в Інтернеті для навчальних предметів",prev:"\u002Fistoriya\u002Fraspad-zolotoy-ordy-i-ego-posledstviya",prev_name:"Распад Золотой Орды и его последствия, 6 класс"}}},categories:{result:[{id:H,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:H,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:k,name:"Литература",pseudoname:"literatura"},{id:119,ordering:l,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:13,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:I,SITE_HOST:"mypreza.com",SITE_LANG:J,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:I,short_name:a,description:a,lang:J,start_url:"\u002F?standalone=true",display:"standalone",background_color:m,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:o,main_text:a,main_title:p,main_description:q,main_keywords:r,main_image:a},app:{logo_image:s,logo_image_width:t,logo_image_height:j,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:k,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:l,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:m,header_bg:i,accent:i}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable","h2","#d53032",40,10,11,"#ffffff","Основи мови HTML","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images_before","category","both",88,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика",1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

Вперед >>
<< Назад
12:36
Поняття тегу
Зазвичай тег впливає на певний фрагмент документа, наприклад на абзац. У таких випадках використовують пару тегів (відкривальний і закривальний). Перший із них задає ефект, а другий — припиняє його дію. Закривальний тег починається із символу / (слеш).
Приклади парних тегів: , <В>
, , <НЗ>
,
.
Деякі теги задають разовий ефект у місці своєї появи, тоді закривальний тег не потрібен.
Приклади одинарних тегів:
,
,
,
, ,
.
Якщо між кутовими дужками помилково вказане ключове слово, якe відсутнє в мові HTML, то весь тег буде проігноровано.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Поняття тегу
Відкривальні теги можуть містити атрибути, які впливають на ефект, створюваний тегом.
Атрибути — це додаткові ключові слона, відокремлені від основного ключового слова тегу та один від одного символами пробілу.
Для деяких атрибутів слід задавати значения, яке відділяють від імені атрибута символом =. Значення атрибута беруть у лапки, але в багатьох випадках їх можна і не ставити. Закривальні теги атрибутів не містять.
Приклади тегів з атрибутами:
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Поняття тегу
Для того щоб через деякий час ви або інша людина, яка переглядатиме код HTML, могла краще його зрозуміти, у текст вставляють примітки — коментарі.
Вони починаються зі спеціального тегу
Будь-який записаний після нього текст браузер розглядає як коментар і не відображає під час відтворення документа.
Закінчують коментар тегом -->.
Коментар може містити будь-які символи, крім >, а отже, не може включати в себе теги.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Структура HTML-документа
HTML-документ складається з основного тексту і тегів розмітки. Фактично це звичайний текстовий файл, для створення і редагування якого можна використати будь-який текстовий редактор.
Зазвичай HTML-документи містяться у файлах із розширенням .htm або .html.
Документ HTML має чітко визначену структуру.
♦ Починається з тегу і закінчується відповідним йому тегом . Така пара тегів повідомляє браузеру, що це HTML-документ.
♦ Містить два розділи — заголовків і тіла документа (розміщються саме в такому порядку). Розділ заголовків помічений тегами і та містить інформацію про документ загалом. Зокрема, він повинен містити в собі теги
та </TlTLE>, між якими розміщено текст, що відображатиметься в заголовку вікна браузера. Крім цього, у розділі заголовків може міститися тег <МЕТА>, призначений для технічного опису документа (це інформація для пошукових програм), а також тег <STYLE> для опису стилів (наборів параметрів форматування), використаних у документі.<br>♦ Сам текст документа міститься в його тілі, яке розташоване між тегами <BODY> та </BODY>.<br><p>? Основи веб-дизайну<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide10" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 10</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/6661/slide-9.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Вперед >> 12:36 Документ HTML має структуру: Заголовок документа Текст," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/6661/slide-9.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/6661/slide-9.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/6661/slide-9.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/6661/slide-9.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Вперед >><br><p><< Назад<br><p>12:36<br><p>Документ HTML має структуру:<br><HTML><br><HEAD><br><TITLE> Заголовок документа
Текст, що відображається

Вперед >>
<< Назад
12:36
Заголовки
Для того щоб розбити текст на логічні частини, використовують заголовки.
Мова HTML підтримує шість рівнів заголовків документів. Вони позначені тегами від
…
до
…
.
На екрані ці заголовки відображаються різними шрифтами.
Текст, що міститься всередині тегу заголовка, відображатиметься відповідно до його рівня. Найвищий рівень має заголовок Н1, найнижчий – Н2.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Вирівнювання заголовку
Текст заголовка може бути вирівняний по центру, за правим або лівим краєм – для цього використовують атрибут ALIGN.
Наприклад: <Н2 ALIGN=center \ right \ left>Teкст заголовка
(символ \ означає можливість вибору між значеннями center, right або left).
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Абзаци
Для визначення звичайних абзаців у мові HTML використовують теги <Р> і
. Текст, розміщений між ними, власне і буде одним абзацом. При цьому слід пам'ятати, що всі «зайві» пропуски між словами і переходи на новий рядок під час відтворення HTML-документа браузер ігнорує. Коли браузер відтворює веб-сторінки, абзаци відділяються один від одного за допомогою відступів.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Перехід на новий рядок
У разі переходу на новий рядок без створення абзацу використовується одинарний тег
.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Горизонтальна риска
Розділювачами в тексті можуть також бути горизонтальні лінії, які візуально відділяють різні частини документа, — їх створюють за допомогою одинарного тегу
.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Атрибути тегу BODY
Кольори та зображення для всього документа і його тла задають за допомогою тегу . Він може мати такі атрибути:
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Колір тла та кольору тексту
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Колір тла
Якщо додати до тегу атрибут BGCOLOR=cyan, то колір тла веб-сторінки зміниться на світло-бірюзовий.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Малюнок – тло сторінки
? Основи веб-дизайну
Зверніть увагу на те, що малюнок замощує тло сторінки. Слід уважно підбирати малюнок та його розміри

Вперед >>
<< Назад
12:36
Особливості виведення тексту браузером
Браузер перетворює текст HTML-документа під час його виведення на екран, тобто ігнорує зайві пропуски, символи табуляції, символи кінця рядка, форматує текст відповідно до використаних тегів.
Проте іноді виникає потреба у тому, щоб помістити в документ відформатований текст, для якого браузер повинен зберегти всі пропуски, навіть якщо кілька пропусків розміщені один за одним, знаки переносу на інший рядок, табуляції та інші символи форматування.
Для цього використовують тег
Teкст
.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Використання тегу
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Теги форматування тексту
Текст у HTML-документах форматують за допомогою відповідних тегів. У таблиці наведено теги, які використовують для форматування символів, та заданий ними ефект.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Задання параметрів шрифту
Можна визначати різні параметри шрифту. Зокрема, за допомогою тегу
задають гарнітуру (рисунок), розмір і колір шрифту. Цей тег одинарний, діє на весь текст, розміщений нижче, і має такі атрибути.
? Основи веб-дизайну

Вперед >>
12:36
Приклад використання теги
? Основи веб-дизайну
<< Назад

Вперед >>
<< Назад
12:36
До уваги!
Якщо зазначеної гарнітури на комп'ютері користувача немає, то текст буде оформлено з використанням гарнітури за умовчанням. В атрибуті FACE іноді записують через кому кілька гарнітур, тоді браузер вибирає гарнітури за списком: за відсутності першої використовує другу і т. д. Значення атрибута слід подавати в лапках.
Як значення кольору можна використовувати назви кольорів англійською мовою, такі як red, green, blue тощо, або шістнадцяткові значення (записані в шістнадцятковій системі числення), що починаються з символу # і послідовно задають червоний, зелений та синій кольори, які мають бути змішані для отримання потрібного.
Наприклад, #FF0000, #008000, #0000FF тощо.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
? Основи веб-дизайну
Для оформлення сайту зазвичай використовують набір кольорів, який називають безпечною палітрою.
Він складається з 216 елементів. Особливістю безпечних кольорів є те, що вони не змінюються у разі відображення різними браузерами або на різних моніторах. Якщо будь-яка з трьох складових шістнадцяткового значення відрізняється від 00, 33, 66, 99, СС чи FF, то колір не є безпечним.
Значення атрибутів SIZE та COLOR можна записувати без лапок.

Вперед >>
<< Назад
12:36
Теги форматування тексту
Гарнітуру, розмір та колір шрифту для фрагмента тексту задають за допомогою тегу
Teкст
.
Атрибути цього тегу такі самі, як у тегу
, за винятком атрибута SIZE: його значення зі знаком мінус (або плюс) означає, що розмір шрифту буде зменшено (чи збільшено) на відповідну величину відносно заданого за умовчанням або у тегу
. Значення без знака задає абсолютний розмір шрифту.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Теги форматування тексту
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Теги форматування тексту
Є й інші теги, які можна застосовувати для зміни параметрів тексту.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
? Основи веб-дизайну
Теги для зміни параметрів тексту

Вперед >>
<< Назад
12:36
Біжучий рядок
Цікавого оформлення веб-сторінці надає пара тегів
та
— вони додають до веб-сторінки «рухомий рядок» із тексту, розташованого між ними.
Біжучий рядок
Біжучий рядок
? Основи веб-дизайну
Виконання вправ 2.1 та 2.2

Вперед >>
<< Назад
12:36
Текстові гіперпосилання
Гіперпосилання — це вказівка для браузера, до якого об'єкта у межах або поза межами HTML-документа він має звернутися.
За допомогою гіперпосилань користувачі можуть переходити з однієї веб-сторінки на іншу, завантажувати файли тощо.
Як гіперпосилання може бути оформлений фрагмент тексту або графічний об'єкт. Коли веб-сторінка відображаються у вікні браузера, текстове посилання зазвичай виділено синім кольором і підкресленням.
Для переходу в місце, на яке вказує посилання, користувачу достатньо клацнути його текст.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Текстові гіперпосилання
Для створення гіперпосилання необхідно використовувати теги <А> та
, визначивши для тегу <А> атрибут HREF.
Його значенням має бути адреса URL, на яку вказує посилання.
Якщо веб-сторінка, на яку вказує посилання, розміщена на іншому веб-сайті, то значенням атрибута HREF має бути повна URL-адреса з назвою протоколу включно; такі посилання називають зовнішніми.
Якщо ж гіперпосилання вказує на іншу сторінку того самого сайту, то для пошуку документа достатньо задати лише відносний шлях; таке посилання називають внутрішнім.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Текстові гіперпосилання
Гіперпосилання може вказувати на певне місце всередині сторінки, якщо туди попередньо вбудувати якір-мітку. Для визначення якоря також використовують теги <А> і
, але замість атрибута HREF задають атрибут NAME, значенням якого має бути ім'я якоря. Воно може складатися з літер та цифр, але не повинно містити символів пробілу.
Якщо на сторінці є кілька міток, то всі вони повинні мати різні назви.
Для створення посилання на встановлений якір потрібно у тегу <А> зазначити його ім'я в кінці адреси URL після імені документа, відокремивши його символом #. Символ # вказує на те, що після нього записано назву мітки, а не ім'я файлу.
Посилання на мітку всередині поточного документа задають так:
<А НREF="#назва_мітки">Текст посилання
.
Якщо в атрибуті HREF задати адресу електронної пошти зі словом mailto: перед нею, то після вибору такого посилання можна надіслати електронний лист, де в полі Кому буде записано цю адресу.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Приклад 2.3. HTML-документ, в якому використовуються Гіперпосилання та якорі
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Зверніть увагу!
У цьому прикладі слово «Microsoft» міститься у тегу зовнішнього гіперпосилання, а текст «мою особисту сторінку» — у тегу внутрішнього посилання.
Текст «кінці цієї сторінки» розміщений у тегу посилання на якір, а «в цьому текстовому документі» — у тегу гіперпосилання з атрибутом HREF, в якому задано зв'язок не з веб-сторінкою, а з текстовим документом, котрий збережений у тій самій папці, що й поточний HTML-документ.
Текст «[e-mail]» вміщено у тег, що описує мітку якоря, а в атрибуті HREF зазначено адресу електронної пошти.
Якщо відвідувач веб-сторінки скористається зовнішнім гіперпосиланням Microsoft, то відкриється сторінка, що міститься за адресою: http://www.microsoft.com/.
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Зверніть увагу!
Після клацання гіперпосилання мою особисту сторінку відкриється веб-сторінка, записана у файлі main.htm, який міститься у тій самій папці, що й поточна сторінка.
Після клацання внутрішнього посилання в цьому текстовому документі відкриється вікно з текстовим документом text.doc, що міститься у поточній папці.
Якщо скористатися посиланням на якір в кінці цієї сторінки, то зображення поточної веб-сторінки зміститься так, що текст мітки «[e-mail]», з якою зв'язаний якір, буде розміщений у видимій на екрані частині документа.
Водночас текст «[e-mail]» є гіперпосиланням, скориставшись яким, користувач зможе надіслати листа за допомогою настроєної на своєму комп'ютері електронної пошти за вказаною в атрибуті HREF адресою — [e-mail].
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Текстові гіперпосилання
Розглянемо ще один приклад створення текстових гіперпосилань. Припустимо, що у певній папці збережено два HTML-документи, які описують два напрями роботи фірми, — 1.html та 2.html. Створимо веб-сторінку з переліком гіперпосилань, кожне з яких ілюструватиме один із напрямів роботи фірми:
? Основи веб-дизайну

Вперед >>
<< Назад
12:36
Текстові гіперпосилання
У цьому прикладі теги гіперпосилань містяться в тегах заголовків першого рівня. Тексти гіперпосилань будуть розташовані в окремих рядках і оформлені як заголовки першого рівня. За умовчанням текстові гіперпосилання виділені синім кольором і підкреслені, а якщо ними вже скористалися, то темночервоним.
? Основи веб-дизайну