матеріал

Презентація

Для кого: 10 Клас

Презентація до уроку з теми: "Мова гіпертекстової розмітки"

Опис документу:
Презентація до уроку з теми: "Мова гіпертекстової розмітки" за підручником «Інформатика (рівень стандарту)» підручник для 10 (11) класу закладів загальної середньої освіти Ривкінд Й. Я., Лисенко Т. І., Чернікова Л. А., Шакотько В. В.

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

Перегляд
матеріалу
Отримати код
Опис презентації окремими слайдами:
Слайд № 1

Гіпертекст — це текст, у який вбудовані спеціальні коди, що задають форматування тексту, наявність у ньому ілюстрацій, мультимедійних вставок та гі...
Слайд № 2

Гіпертекст — це текст, у який вбудовані спеціальні коди, що задають форматування тексту, наявність у ньому ілюстрацій, мультимедійних вставок та гіперпосилань. HTML (Hyper Text Markup Language – мова гіпертекстової розмітки) – мова тегів, якою пишуться гіпертекстові документи для мережі Інтернет. 1. Базові конструкції мови HTML

2. Поняття тегу Вся інформація про форматування документу міститься в фрагментах розташованих між знаками < > — такий фрагмент називають тегом. При...
Слайд № 3

2. Поняття тегу Вся інформація про форматування документу міститься в фрагментах розташованих між знаками < > — такий фрагмент називають тегом. Приклади тегів HTML: , <BODY>, <TABLE>, </A>, <IMG>, </CENTER>. Теги бувають: Контейнерні (парні) поодинокі (одинарні) Відкриваюча дужка < ім'я тега, атрибут> закриваюча дужка</p> </div> </div> </div> <div class="v-presentation-desc-block"> <div class="v-col-5"> <img class="lazyload" src="/assets/6a4003d/img/preloader-mid.gif" alt="Приклади парних тегів: <HTML> </HTML>, <В> </В>, <HEAD></HEAD>, <НЗ></Н3>, <ADDRESS></ADDRESS>, <LI></LI>. Приклади одинарних тегів: <BR>, <HR>, <М..." title="Приклади парних тегів: <HTML> </HTML>, <В> </В>, <HEAD></HEAD>, <НЗ></Н3>, <ADDRESS></ADDRESS>, <LI></LI>. Приклади одинарних тегів: <BR>, <HR>, <М..." data-src="https://fs02.vseosvita.ua/0200ky05-2cdd/004-0x0.jpg"> </div> <div class="v-col-7 v-col-last"> <div class="v-presentation-desc-block-title">Слайд № 4</div> <div class="v-presentation-desc-block-text"> <p>Приклади парних тегів: <HTML> </HTML>, <В> </В>, <HEAD></HEAD>, <НЗ></Н3>, <ADDRESS></ADDRESS>, <LI></LI>. Приклади одинарних тегів: <BR>, <HR>, <МЕТА>, <BASEFONT>, <FRAME>, <INPUT>.</p> </div> </div> </div> <div class="v-presentation-desc-block"> <div class="v-col-5"> <img class="lazyload" src="/assets/6a4003d/img/preloader-mid.gif" alt="Відкривальні теги (вказують програмі на початок об'єкту) можуть містити атрибути, які впливають на ефект, створюваний тегом. Атрибути — задають зна..." title="Відкривальні теги (вказують програмі на початок об'єкту) можуть містити атрибути, які впливають на ефект, створюваний тегом. Атрибути — задають зна..." data-src="https://fs02.vseosvita.ua/0200ky05-2cdd/005-0x0.jpg"> </div> <div class="v-col-7 v-col-last"> <div class="v-presentation-desc-block-title">Слайд № 5</div> <div class="v-presentation-desc-block-text"> <p>Відкривальні теги (вказують програмі на початок об'єкту) можуть містити атрибути, які впливають на ефект, створюваний тегом. Атрибути — задають значення властивостей об'єкту, поміщеного у контейнер. Приклад тегу з атрибутами: <BODY BGCOLOR="#000000"></p> </div> </div> </div> <div class="v-presentation-desc-block"> <div class="v-col-5"> <img class="lazyload" src="/assets/6a4003d/img/preloader-mid.gif" alt="3. Структура HTML-документа HTML-документ складається з основного тексту і тегів розмітки. HTML-документи містяться у файлах із розширенням .htm аб..." title="3. Структура HTML-документа HTML-документ складається з основного тексту і тегів розмітки. HTML-документи містяться у файлах із розширенням .htm аб..." data-src="https://fs02.vseosvita.ua/0200ky05-2cdd/006-0x0.jpg"> </div> <div class="v-col-7 v-col-last"> <div class="v-presentation-desc-block-title">Слайд № 6</div> <div class="v-presentation-desc-block-text"> <p>3. Структура HTML-документа HTML-документ складається з основного тексту і тегів розмітки. HTML-документи містяться у файлах із розширенням .htm або .html. Структура: <HTML> <HEAD> <ТІТLЕ> Заголовок документа </ТІТLЕ> </HEAD> <BODY> Текст, що відображається на екрані </BODY> </HTML></p> </div> </div> </div> <div class="v-presentation-desc-block"> <div class="v-col-5"> <img class="lazyload" src="/assets/6a4003d/img/preloader-mid.gif" alt="<HTML> </HTML> - починає та закінчує документ <HEAD> </HEAD> - починає та закінчує заголовок документу <ТІТLЕ> </ТІТLЕ> - задає назву документу <BO..." title="<HTML> </HTML> - починає та закінчує документ <HEAD> </HEAD> - починає та закінчує заголовок документу <ТІТLЕ> </ТІТLЕ> - задає назву документу <BO..." data-src="https://fs02.vseosvita.ua/0200ky05-2cdd/007-0x0.jpg"> </div> <div class="v-col-7 v-col-last"> <div class="v-presentation-desc-block-title">Слайд № 7</div> <div class="v-presentation-desc-block-text"> <p><HTML> </HTML> - починає та закінчує документ <HEAD> </HEAD> - починає та закінчує заголовок документу <ТІТLЕ> </ТІТLЕ> - задає назву документу <BODY></BODY> - починає та закінчує тіло документу</p> </div> </div> </div> <div class="v-presentation-desc-block"> <div class="v-col-5"> <img class="lazyload" src="/assets/6a4003d/img/preloader-mid.gif" alt="Для того щоб розбити текст на логічні частини, використовують заголовки. (Існує 6 рівнів заголовків документів). Вони позначені тегами від <Н1>...<..." title="Для того щоб розбити текст на логічні частини, використовують заголовки. (Існує 6 рівнів заголовків документів). Вони позначені тегами від <Н1>...<..." data-src="https://fs02.vseosvita.ua/0200ky05-2cdd/008-0x0.jpg"> </div> <div class="v-col-7 v-col-last"> <div class="v-presentation-desc-block-title">Слайд № 8</div> <div class="v-presentation-desc-block-text"> <p>Для того щоб розбити текст на логічні частини, використовують заголовки. (Існує 6 рівнів заголовків документів). Вони позначені тегами від <Н1>...</Н1> до <Н6>...</Н6>. найвищий рівень найнищий рівень Заголовки</p> </div> </div> </div> <div class="v-presentation-desc-block"> <div class="v-col-5"> <img class="lazyload" src="/assets/6a4003d/img/preloader-mid.gif" alt="Для визначення звичайних абзаців у мові HTML використовують теги <Р> і </Р>. Абзаци та рядки Теги <H> та <P> можуть додатково містити атрибут ALIGN..." title="Для визначення звичайних абзаців у мові HTML використовують теги <Р> і </Р>. Абзаци та рядки Теги <H> та <P> можуть додатково містити атрибут ALIGN..." data-src="https://fs02.vseosvita.ua/0200ky05-2cdd/009-0x0.jpg"> </div> <div class="v-col-7 v-col-last"> <div class="v-presentation-desc-block-title">Слайд № 9</div> <div class="v-presentation-desc-block-text"> <p>Для визначення звичайних абзаців у мові HTML використовують теги <Р> і </Р>. Абзаци та рядки Теги <H> та <P> можуть додатково містити атрибут ALIGN, який додатково використовується для того, щоб вирівняти текст заголовку або абзацу по центру, за правим або лівим краєм. Наприклад: <Н2 ALIGN=center> <P ALIGN=right>.</p> </div> </div> </div> <div class="v-presentation-desc-block"> <div class="v-col-5"> <img class="lazyload" src="/assets/6a4003d/img/preloader-mid.gif" alt="Одинарні теги <BR> - одинарний тег, що використовується для переходу на новий рядок без створення абзацу <HR> - одинарний тег, що використовується ..." title="Одинарні теги <BR> - одинарний тег, що використовується для переходу на новий рядок без створення абзацу <HR> - одинарний тег, що використовується ..." data-src="https://fs02.vseosvita.ua/0200ky05-2cdd/00a-0x0.jpg"> </div> <div class="v-col-7 v-col-last"> <div class="v-presentation-desc-block-title">Слайд № 10</div> <div class="v-presentation-desc-block-text"> <p>Одинарні теги <BR> - одинарний тег, що використовується для переходу на новий рядок без створення абзацу <HR> - одинарний тег, що використовується для створення горизонтальної лінії, яка візуально відділяє різні частини документа.</p> </div> </div> </div> <div class="v-presentation-desc-block"> <div class="v-col-5"> <img class="lazyload" src="/assets/6a4003d/img/preloader-mid.gif" alt="Кольори та зображення для всього документа і його тла задають за допомогою тегу <BODY>. Він може мати такі атрибути: • BACKGROUND="URL" — замість U..." title="Кольори та зображення для всього документа і його тла задають за допомогою тегу <BODY>. Він може мати такі атрибути: • BACKGROUND="URL" — замість U..." data-src="https://fs02.vseosvita.ua/0200ky05-2cdd/00b-0x0.jpg"> </div> <div class="v-col-7 v-col-last"> <div class="v-presentation-desc-block-title">Слайд № 11</div> <div class="v-presentation-desc-block-text"> <p>Кольори та зображення для всього документа і його тла задають за допомогою тегу <BODY>. Він може мати такі атрибути: • BACKGROUND="URL" — замість URL вказують адресу малюнка, який має бути тлом для сторінки; • BGC0L0R=значення — задає колір, який має бути фоновим для документа; • ТЕХТ=значення — задає колір тексту; • LINK=значення — визначає колір гіперпосилань у документі; • ALINK=значення — задає колір гіперпосилань під час клацання; • VLINK=значення — задає колір переглянутих гіперпосилань.</p> </div> </div> </div> <div class="v-presentation-desc-block"> <div class="v-col-5"> <img class="lazyload" src="/assets/6a4003d/img/preloader-mid.gif" alt="Гарнітуру, розмір та колір шрифту для фрагмента тексту задають за допомогою тегу <FONT АТРИБУТИ> Текст </FONT>. Наприклад: <font size=«7»> текст </..." title="Гарнітуру, розмір та колір шрифту для фрагмента тексту задають за допомогою тегу <FONT АТРИБУТИ> Текст </FONT>. Наприклад: <font size=«7»> текст </..." data-src="https://fs02.vseosvita.ua/0200ky05-2cdd/00c-0x0.jpg"> </div> <div class="v-col-7 v-col-last"> <div class="v-presentation-desc-block-title">Слайд № 12</div> <div class="v-presentation-desc-block-text"> <p>Гарнітуру, розмір та колір шрифту для фрагмента тексту задають за допомогою тегу <FONT АТРИБУТИ> Текст </FONT>. Наприклад: <font size=«7»> текст </font> ….. <font size=«1»> текст </font> <font color=darkblue> текст </font> - означає, що літери слова комп'ютер матимуть темно-синій колір.</p> </div> </div> </div> <div class="v-presentation-desc-block"> <div class="v-col-5"> <img class="lazyload" src="/assets/6a4003d/img/preloader-mid.gif" alt="4. Теги форматування символів тексту Теги Ефект Приклад <B> та </В> Напівжирне накреслення bold <I> та </I> Курсивне накреслення italic <U> та </U>..." title="4. Теги форматування символів тексту Теги Ефект Приклад <B> та </В> Напівжирне накреслення bold <I> та </I> Курсивне накреслення italic <U> та </U>..." data-src="https://fs02.vseosvita.ua/0200ky05-2cdd/00d-0x0.jpg"> </div> <div class="v-col-7 v-col-last"> <div class="v-presentation-desc-block-title">Слайд № 13</div> <div class="v-presentation-desc-block-text"> <p>4. Теги форматування символів тексту Теги Ефект Приклад <B> та </В> Напівжирне накреслення bold <I> та </I> Курсивне накреслення italic <U> та </U> Підкреслене underlined <S> та </S> Перекреслене striken <SUP> та </SUP> Верхній індекс superscrtpt <SUB> та </SUB> Нижній індекс subscript</p> </div> </div> </div> <div class="v-presentation-desc-block"> <div class="v-col-5"> <img class="lazyload" src="/assets/6a4003d/img/preloader-mid.gif" alt="Є й інші теги, які можна застосовувати для зміни параметрів тексту. • <BIG> Teкст </BIG> — збільшення розміру шрифту. • <SMALL> Teкст </SMALL> — зм..." title="Є й інші теги, які можна застосовувати для зміни параметрів тексту. • <BIG> Teкст </BIG> — збільшення розміру шрифту. • <SMALL> Teкст </SMALL> — зм..." data-src="https://fs02.vseosvita.ua/0200ky05-2cdd/00e-0x0.jpg"> </div> <div class="v-col-7 v-col-last"> <div class="v-presentation-desc-block-title">Слайд № 14</div> <div class="v-presentation-desc-block-text"> <p>Є й інші теги, які можна застосовувати для зміни параметрів тексту. • <BIG> Teкст </BIG> — збільшення розміру шрифту. • <SMALL> Teкст </SMALL> — зменшення розміру шрифту. • <ЕМ> Текст </ЕМ> — виділення важливих фрагментів тексту. (Текст відображатиметься курсивом) • <DEL> Teкст </DEL> — створення перекресленого тексту. (Текст буде перекреслено горизонтальною лінією)</p> </div> </div> </div> <div class="v-presentation-desc-block"> <div class="v-col-5"> <img class="lazyload" src="/assets/6a4003d/img/preloader-mid.gif" alt="У HTML-документах використовують три види списків: • невпорядкований (маркований); • упорядкований (нумерований); • список визначень." title="У HTML-документах використовують три види списків: • невпорядкований (маркований); • упорядкований (нумерований); • список визначень." data-src="https://fs02.vseosvita.ua/0200ky05-2cdd/00f-0x0.jpg"> </div> <div class="v-col-7 v-col-last"> <div class="v-presentation-desc-block-title">Слайд № 15</div> <div class="v-presentation-desc-block-text"> <p>У HTML-документах використовують три види списків: • невпорядкований (маркований); • упорядкований (нумерований); • список визначень.</p> </div> </div> </div> <div class="v-presentation-desc-block"> <div class="v-col-5"> <img class="lazyload" src="/assets/6a4003d/img/preloader-mid.gif" alt="У невпорядкованому списку для виділення елементів використовуються певні позначки (крапки, квадрати тощо). Починається такий список із тегу <UL>, а..." title="У невпорядкованому списку для виділення елементів використовуються певні позначки (крапки, квадрати тощо). Починається такий список із тегу <UL>, а..." data-src="https://fs02.vseosvita.ua/0200ky05-2cdd/010-0x0.jpg"> </div> <div class="v-col-7 v-col-last"> <div class="v-presentation-desc-block-title">Слайд № 16</div> <div class="v-presentation-desc-block-text"> <p>У невпорядкованому списку для виділення елементів використовуються певні позначки (крапки, квадрати тощо). Починається такий список із тегу <UL>, а закінчується — </UL>. Кожний елемент списку починається з тегу <LI>. Тег <UL> може мати атрибут TYPE, який визначає форму позначки. Цей атрибут набуває таких значень: • disk — зафарбоване коло; • circle — коло; • square — маленький чорний квадрат. <HTML> <HEAD> <TITLE>

  • І-кур
  • ІІ-курс
  • ІІІ-курс
В упорядкованому списку всі елементи пронумеровані. починається список із тегу <0L>, а закінчується — </OL>. Кожний елемент такого списку також поч...
Слайд № 17

В упорядкованому списку всі елементи пронумеровані. починається список із тегу <0L>, а закінчується — . Кожний елемент такого списку також починається з тегу

  • . Тег
      може мати атрибут TYPE, який визначає тип нумерації. Цей атрибут набуває таких значень: • А — велика літера; • а — мала літера; • І — велика римська цифра; • і — мала римська цифра; • 1 — арабська цифра. У разі потреби за допомогою атрибута START можна задати відмінний від одиниці початковий номер елемента, наприклад <0L TYPE="I« START="5">, Нумерований список, початковий елемент якого позначено латинською літерою Е, яка є п'ятою в алфавіті, описують так:
      1. Перший елемент списку
      2. Другий елемент списку
      3. Третій елемент списку
      4. Четвертий елемент списку

  • <BASEFONT> для всього документа призначається розмір шрифту. Наприклад: <BASEFONT SIZE=6> <FONT> можна визначити колір шрифту для кожного елемента ...
    Слайд № 18

    для всього документа призначається розмір шрифту. Наприклад: можна визначити колір шрифту для кожного елемента списку. Наприклад: Райдуга

    1. Червоний
    2. Оранжевий
    3. Жoвтий
    4. Зелений
    5. Блакитний
    6. Синій
    7. Фіолетовий

    Текстові гіперпосилання Для створення гіперпосилання необхідно використовувати теги <А> та </А>, визначивши для тегу <А> атрибут HREF. Його значенн...
    Слайд № 19

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

    Гіперпосилання може вказувати на певне місце всередині сторінки, якщо туди попередньо вбудувати якір-мітку. Для визначення якоря також використовую...
    Слайд № 20

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

    Зверніть увагу, свідоцтва знаходяться в Вашому особистому кабінеті в розділі «Досягнення»

    матеріал

    Презентація

    Для кого: 10 Клас