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

Про матеріал
Ознайомити учнів з способами створення web-сторінок; сформувати поняття про HTML-файл, коди мови HTML, структурні теги; навчити створювати, форматувати та переглядати за допомогою web-браузера HTML-файли; розвивати логічне мислення.
Перегляд файлу
Загальні відомості про мову HTML.  Основні теги форматування
HTML – це набір угод для розмітки документів, що визначають зовнішній вигляд документів на екрані комп'ютера при доступі до них із використанням програми браузера. Web-документ – це текст, написаний мовою HTML чи іншою, який призначений для перегляду електронної інформації на екрані комп’ютера за допомогою браузера.
Тег  – це фрагмент коду, що описує певні елементи документа HTML і вміщений у кутові дужки < >.  Теги бувають одинарними і парними. Більшість тегів парні, як, наприклад, тег означення html- файлу: <HTML> … </HTML>.    Парні теги позначають початок і кінець області дії відповідної команди.   Тег, що закриває область дії, має косу риску.
HTML-документ умовно можна розбити на три частини: - Службова  інформація для браузера, що  вміщена  у  рядок  з  тегом <!DOCTYPE>. - Заголовна частина документа, до якої вміщена назва документа, а також службова інформація для серверів, описи невеликих програм-сценаріїв. Ця частина документа міститься між тегами <HEAD> і </HEAD>. - Тіло документа, що обмежене тегами <BODY>... </BODY>. Часто теги, окрім імені, містять додаткові елементи, які називаються атрибутами.  Атрибути – це компоненти тегу, що містять вказівки про те, як браузер має сприйняти й обробити тег.
 Атрибут записується після імені тегу перед дужкою і складається, як правило, із пари «ім'я атрибута = значення». Значення атрибута записується після імені атрибута через знак рівності =. Всі значення атрибутів за умовчанням беруться в подвійні ( " title=" Атрибут записується після імені тегу перед дужкою і складається, як правило, із пари «ім'я атрибута = значення». Значення атрибута записується після імені атрибута через знак рівності =. Всі значення атрибутів за умовчанням беруться в подвійні (") або одинарні (') лапки. Імена атрибутів можуть набиратися як малими, так і великими літерами, браузер інтерпретуватиме їх однаково. У тега може бути кілька атрибутів, тоді вони відокремлюються один від одного пробілами.

">

Етапи створення web-сторінки  мовою HTML:
Етапи створення web-сторінки  мовою HTML:
Етапи створення web-сторінки  мовою HTML:
Етапи створення web-сторінки  мовою HTML:
Тег BODY: Всередині пари тегу  <BODY параметри>…</BODY> записують увесь текс сторінки. Цей текст відображатиметься у вікні броузера. BACKGROUND = “d:\myweb\picture1.jpg” Задає шлях до картинки для тла BGCOLOR = “white” Задає білий колір тла, якщо не використовується тло-картинка BGPROPERTIES = “fixed” Фонове зображення не прокручується  TEXT = “black”  Задає колір тексту (тут чорний) на сторінці
Теги форматування символів тексту: <B> текст </B> Товстий шрифт тексту <I> текст </I> Шрифт-курсив <U> текст </U> Підкреслений шрифт <SUB> текст </SUB> Нижній індекс. Наприклад, щоб отримати вираз Н2О, пишуть H<SUB>2</SUB>O <SUP> текст </SUP>  Верхній індекс, наприклад, 1а вулиця, а2 <BIG> текст </BIG> Великий шрифт <SMALL> текст </SMALL> Малий шрифт <EM> текст </EM> Виокремлений курсивом текст (те саме, що тег I)  <B> <I> текст </I> </B> Товстий курсив. Цей приклад демонструє застосування принципу вкладення тегів.
Теги для розміщення тексту (одинарні): <P> Цей тег означає початок нового абзацу. Його можна записувати вкінці попереднього. Наступне після тега <P> речення починатиметься з нового, вирівнюваного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег <P> може використовуватися як парний: <P> текст абзацу</P> <BP> Наступний за цим тегом текст буде наведено у новому рядку без пропуска рядка <HR> У рядку буде проведена горизонтальна лінія.
Заголовки та теги вирівнювання: Теги Результат на екрані <H1>Заголовок1</H1> Заголовок 1 <H2>Заголовок2</H2> Заголовок 2 <H3> Заголовок3</H3> Заголовок 3 <H4>Заголовок4</H4> Заголовок 4 <H5>Заголовок5</H5> Заголовок 5 <H6>Заголовок6<H6> Заголовок 6
<CENTER> елемент</CENTER> Вирівнювання до центру <LEFT> елемент </LEFT> Вирівнювання до лівого краю <RIGHT> елемент </RIGHT> Вирівнювання до правого краю <JUSTIFY> елемент </JUSTIFY>  Вирівнювання по ширині
Приклад web-сторінки мовою HTML:
Приклад web-сторінки мовою HTML:
Створення web-сторінок  за допомогою  мови HTML.  Створення списків та вставка зображення.
Тег задання параметрів шрифту FONT.  <FONT    FACE = “Dйcor, Arbat, Kudriashov”  SIZE = +2 COLOR = “red”>  Уміст контейнера (текст) </FONT>
Вставка зображень  Важко знайти в WWW сторінку, яка не мала б зображень. Вставка зображення на Web-сторінку виконується одиночним тегом <IMG>. Усередині цього тегу обов'язково записується атрибут src, що вміщує URL зображення. Назва цього атрибута походить від слова source - джерело.
Для малюнок з правого краю, текст його обтікає зліва: Kpiм параметрів align, існують ще кілька параметрів: відстань між текстом i мапюнком по горизонталі (тут 10 пікселів): відстань між текстом i малюнком по вертикалі (30 пікселів): опис малюнка (якщо встановити курсор миші на малюнок, через секунду з'явиться вказаний текст - тут "моя фотокартка"): моя фотокартка ширина малюнка (тут 100 пікселів): висота малюнка (тут 200 пікселів): рамка навколо малюнка (тут товщина лінії 5 пікселів): " title="Для "співіснування" малюнка i тексту документа використовують теги: малюнок з лівого краю, текст його обтікає справа: малюнок з правого краю, текст його обтікає зліва: Kpiм параметрів align, існують ще кілька параметрів: відстань між текстом i мапюнком по горизонталі (тут 10 пікселів): відстань між текстом i малюнком по вертикалі (30 пікселів): опис малюнка (якщо встановити курсор миші на малюнок, через секунду з'явиться вказаний текст - тут "моя фотокартка"): моя фотокартка ширина малюнка (тут 100 пікселів): висота малюнка (тут 200 пікселів): рамка навколо малюнка (тут товщина лінії 5 пікселів): ">
Bci параметри можуть застосовуватися одночасно один з одним, щоб запобігти плутанини в їx застосуванні. Наприклад, так:  <IMG src= " title="Bci параметри можуть застосовуватися одночасно один з одним, щоб запобігти плутанини в їx застосуванні. Наприклад, так: ">
Створення списків  Список – це упорядкований перелік елементів. Значки списку, символи або цифри можна змінювати як звичайний текст. Для цього використовується тег <FONT> з атрибутами.
Ненумеровані або маркіровані списки  Список оформляється за допомогою  тега <UL>…</UL>, які позначають відповідно початок і кінець списку. Кожний елемент списку починається з одиничного тегу <LI>. <UL> <LI> Перший елемент списку  <LI> Другий елемент списку  <LI> Третій елемент списку  . <LI> n-й елемент списку  </UL> Тег <UL> має атрибут TYPE, який визначає зовнішній вигляд маркерів.    Він може набувати значення:     disc – диск;     circle – коло;     square – квадрат.
Нумеровані списки Список оформляється за допомогою тега <OL>…</OL>, які позначають відповідно початок і кінець списку. Кожний елемент списку починається з поодинокого тега <LI> <OL> <LI> Перший елемент списку  <LI> Другий елемент списку  <LI> Третій елемент списку  . <LI> n-й елемент списку  </OL> Тег <OL> має атрибути: TYPE – визначає тип нумерації.    Він може набувати значення:   А – великі латинські літери;   а – малі латинські літери;   І – римські цифри;   1 – арабські цифри (дане значення прийнято за замовчуванням); START – задає, з якого порядкового номера починається нумерація у списку. Значенням атрибуту є число. Наприклад: атрибут  START=”4” означає список, у якого нумерація починається з пункту 4.
Вкладені списки Мова HTML дозволяє вкладати списки один в один. Це можливо при виконанні двох умов: перша – всі списки повинні бути різного типу;  друга – вкладень повинно бути не більше трьох.
ВІДСТУПИ Для встановлення одного, двох i трьох відступів використовується тег <ul> </ul> за зразком: <ul> один відступ </ul> <ul> <ul> два відступи </ul></ul> <ul> <ul><ul> три відступи </ul></ul></ul>
Список тлумачень  Список тлумачень використовують для пояснення термінів, створення словників тощо. Його утворюють за допомогою парного тега <DL>…</DL> і двох одинарних тегів <DT> і <DD> так:             <LH>заголовок</LH>             <DL>                       <DT>термін                              <DD>тлумачення 1                             <DD>тлумачення 2 ...               </DL>
Використання спеціальних символів У мові HTML символ < використовується як перший символ кожної команди. Цей символ не може бути використаний для позначення відношення “менше”. Для відображення на екрані символа < (“менше”) і деяких інших символів  в HTML прийняті спеціальні позначення: Текст, що відображається  Запис в формі HTML < < > > & & “ " пробіл  
Створення рядка, що біжить <marquee>…</marquee> - рух тексту  справа наліво Атрибути тегу Пояснення  height=“висота у пікселях” Висота смуги bgcolor=“колір тла” Колір тла смуги behavior=“alternate”         =“slide” Відбивання від країв екрану Зупинка рядка біля лівого краю direction=“right” Рух у протилежний бік loop=n Обмеження кількості проходів, де n-кількість hspase і vspace Відцентрування смуги scrollamount=n Швидкість руху, де n-конкретне значення з діапазону від 1 (повільно) до 10 (швидко)
Тег <pre> … </pre> Застосування цього тегу дозволяє відобразити текст як є, тими ж символами і з тим же розбиттям на рядки:
Зв’язування web-сторінок  за допомогою  гіпертексту. Робота з таблицями.
Мова HTML підтримує внутрішні і зовнішні гіперпосилання. Якщо посилання здійснює перехід у межах того самого документа, то його називають внутрішнім. Такі посилання звичайно застосовують у великих документах для переміщення по розділах. Якщо посилання забезпечує перехід до іншого документа, розташованого на іншому Web-вузлі, то це зовнішнє посилання.
Відправна точка посилання задається тегом <А>. Ім'я цього тегу походить від першої літери слова anchor - якір. Сам елемент А називається елементом прив'язки або якірним елементом. Усередині тегу <А> ставиться обов'язковий атрибут href, за допомогою якого визначається точка призначення посилання (цільовий ресурс). Між тегами <А> і </А> розміщається текст посилання або елемент малюнка. Так найпростіше посилання може виглядати як <А   href=Moї канікули На Web-сторінці це посилання відображатиметься у вигляді тексту "Мої канікули". При клацанні мишею по цьому посиланню буде завантажуватися HTML-файл rest. html. Зверніть увагу, що в атрибуті href зазначене лише ім'я файла, що відповідає відносному посиланню на файл, який розміщений у тій самій папці, що і вихідний документ. Якщо потрібно посилатися на ресурс, розміщений у World Wide Web, то в атрибуті href указується URL цього ресурсу, наприклад, <А href=http://www.Samsung.com> Продукція фірми Samsung " title="Відправна точка посилання задається тегом <А>. Ім'я цього тегу походить від першої літери слова anchor - якір. Сам елемент А називається елементом прив'язки або якірним елементом. Усередині тегу <А> ставиться обов'язковий атрибут href, за допомогою якого визначається точка призначення посилання (цільовий ресурс). Між тегами <А> і розміщається текст посилання або елемент малюнка. Так найпростіше посилання може виглядати як <А href="rest.html">Moї канікули На Web-сторінці це посилання відображатиметься у вигляді тексту "Мої канікули". При клацанні мишею по цьому посиланню буде завантажуватися HTML-файл rest. html. Зверніть увагу, що в атрибуті href зазначене лише ім'я файла, що відповідає відносному посиланню на файл, який розміщений у тій самій папці, що і вихідний документ. Якщо потрібно посилатися на ресурс, розміщений у World Wide Web, то в атрибуті href указується URL цього ресурсу, наприклад, <А href=http://www.Samsung.com> Продукція фірми Samsung ">
Параметри LINK, VLINK, ALINK тега BODY  LINK = “колір” колір гіперпосилання VLINK =”колір” змінює колір гіперпосилання після першого його використання ALINK =”колір” змінює колір активізованого гіперпосилання
Посилання в межах сторінки  Насамперед потрібно позначити місце на сторінці, куди відбуватиметься  перехід. Якщо з деякого місця перехід має виконувати на початок сторінки, то в те місце html- файлу, що відповідає точці посилання, вводять тег, який називається якорем: <A NAME=“#початок”></A> Аналогічно позначаються деяке місце в кінці файлу: <A NAME=“#кінець”></A>. Якір можна кинути в будь якому місці тексту так: <A NAME=“#”></A>. Тепер на сторінці розміщують гіперпосилання на створені позначки (якори) так: <A HREF= “#початок” або “#кінець” або “#моя позначка”>  текст гіперплсилання   </A>
Зовнішнє гіперпосилання
Робота з таблицями Таблиці будуються за принципом вкладення і вводяться на Web-сторінку за допомогою ряду елементів. Кожна таблиця починається тегом <TABLE> і закінчується тегом </TABLE>. Створювана таблиця ніби розгортається по рядках, а рядки заповнюються комірками. При цьому всередину тегів <table>...</table> можуть вставлятися такі елементи:  TR - елемент створення рядка;   TD - елемент, що визначає вміст комірки даних;   ТН - елемент, що визначає комірку заголовка.   TC – заголовок таблиці Наприклад, для створення таблиці 3x2 використовується такий шаблон: <TABLE> <TR><TD>.  .  . </TD><TD>.  .  . </TD></TR> <TR><TD>.  .  .</TD><TD>.  .  . </TD></TR> <TR><TD>.  .  . </TD><TD>.  .  .. </TD></TR> </TABLE>
Атрибути елемента TABLE width  задає ширину таблиці  align  задає вирівнювання таблиці у документі  border  задає вивід рамок таблиці. Якщо значення цього атрибута не визначено, наприклад, <table border>, усі рамки матимуть товщину 1 піксель. Якщо ж значення задане (наприклад, border=5), то товщина 5 пікселів буде тільки для зовнішньої рамки. Товщина внутрішніх рамок, як і раніше, дорівнюватиме 1 пікселю.
Атрибути елементів рядків і стовпців width i height  установлюють розміри комірок рядка: ширину і висоту. Ці атрибути можуть використовуватися у тегах <TR>, <TD>  align  вирівнюють вміст у комірках і вводиться в теги <TR> або <TD>. Цей атрибут може набувати значень: left, right, center і justify  valign  вирівнюють вміст по вертикалі. Цей атрибут застосовується з такими значеннями: top (вирівнювання по верхньому краю комірок), bottom (по нижньому краю), middle (центрування по вертикалі). Наприклад, <TR valign= призначає центрування по вертикалі " title="Атрибути елементів рядків і стовпців width i height установлюють розміри комірок рядка: ширину і висоту. Ці атрибути можуть використовуватися у тегах , align вирівнюють вміст у комірках і вводиться в теги або . Цей атрибут може набувати значень: left, right, center і justify valign вирівнюють вміст по вертикалі. Цей атрибут застосовується з такими значеннями: top (вирівнювання по верхньому краю комірок), bottom (по нижньому краю), middle (центрування по вертикалі). Наприклад, призначає центрування по вертикалі ">
Колір у таблицях bgcolor  колір фону в таблиці. Залежно від того, до якого тегу цей атрибут вводиться (<TABLE>, <TR>, <TH> або <TD>), задаватиметься фон всієї таблиці, рядка, комірки заголовка або даних. Наприклад, тег <TABLE bgcolor = задає червоний фон всієї таблиці, а тег задає жовтий фон комірки даних bordercolor колір рамок таблиці. Якщо атрибут bordercolor вставити в тег , то він діятиме, коли в таблиці є рамки, тобто за наявності атрибута border. Якщо ж потрібно задати колір лише визначених комірок, атрибут bordercolor розташовуємо в тегах , <ТН> або задає червоні межі всіх комірок рядка " title="Колір у таблицях bgcolor колір фону в таблиці. Залежно від того, до якого тегу цей атрибут вводиться (
. Наприклад, тег
, ,
або ), задаватиметься фон всієї таблиці, рядка, комірки заголовка або даних. Наприклад, тег задає червоний фон всієї таблиці, а тег
задає жовтий фон комірки даних bordercolor колір рамок таблиці. Якщо атрибут bordercolor вставити в тег , то він діятиме, коли в таблиці є рамки, тобто за наявності атрибута border. Якщо ж потрібно задати колір лише визначених комірок, атрибут bordercolor розташовуємо в тегах , <ТН> або задає червоні межі всіх комірок рядка ">
Об'єднання комірок таблиці rowspan  об'єднує комірки суміжних рядків. Значення атрибута задає кількість об'єднаних комірок. Наприклад, початковий тег комірки <TD rowspan=2> встановлює об'єднання двох комірок із суміжних рядків  colspan  об'єднує комірки суміжних стовпців. Наприклад, <TD colspan=3> формує одну комірку даних із трьох комірок суміжних стовпців
Поняття про фрейми Фрейм (у перекладі з англійської) означає кадр, рамка, прямокутна область. Фрейми поділяють вікно броузера на частини, в яких відображають зміст сторінок сайту. Кожній сторінці має відповідати свій html-файл. Кожна сторінка повинна мати логічний заголовок. Для поділу вікна броузера на декілька частин використовують  тег-контейнер <FRAMЕSET параметри>… </ FRAMESET>  Параметрів є два: COLS і ROWS. Параметр COLS призначений для поділу вікна на вертикальні області (колонки), а ROWS – на горизонтальні. Розміри областей задають у відсотках до всього вікна, фіксовані – у пікселях. Наприклад, COLS = “25%, 75%” означає, що лівий фрейм займатиме чверть вікна на будь-якому моніторі. Можна писати також COLS = “1*, 3*”, де 1* саме тут означає одну з чотирьох частин екрана, або COLS = “2*,3*”, де 2* означає дві з п’яти вертикальних частин екрана. У фіксованому заданні COLS = “ 100,*”, число 100 означає 100 пікселів, а * - решту екрана.
Більш складні конфігурації фреймів створюють шляхом поділу на фрейми деякого раніше створеного фрейму. У цьому випадку теги FRAMESET вкладають один в одний, наприклад, так:  <FRAMESET COLS = “25%, 75%”>  <FRAME описує лівий фрейм>  <FRAMESET ROWS = “25%, 75%>  <FRAME описуємо верхній правий фрейм>  <FRAME описує нижній правий фрейм>  </FRAMESET>  </FRAMESET> у тезі <FRAME параметри> користувач описує конкретний фрейм. Обов’язковими тут є параметри SRC зі значенням адреси стартового html-файлу і NAME,  значенням якого є назва фрейму. Цю назву придумує користувач, запам’ятовує її, оскільки вона використовується далі як значення параметра TARGET тега <А>.
Призначення деяких параметрів: SCROLLING задає наявність чи відсутність смуг прокручування у вікні фрейму  FRAMEBORDER задає наявність меж між фреймами  BORDER задає ширину межі у пікселях  MARGIN задає величину відступів зверху і від бокових меж фрейму  NORESIZE забороняє змінювати розміри фрейму у вікні броузера
Допоміжні html-файли
Основний html-файл
Навігаційні карти. Таблиці стилів. Мій сайт Фото Біографія Навчання Адреса
Графічна навігаційна панель – це рисунок, окремі частини якого, так звані гарячі області, слугують гіперпосиланнями на відповідні сторінки сайту.   Різновидом такої панелі є навігаційна карта.  Для створення навігаційної карти можна взяти за основу відскановану фотографію чи векторний рисунок з зображенням декількох осіб чи об’єктів, клацання над якими мишею веде до відкривання відповідних сторінок сайту. Рисунок із зображенням кнопок чи просто тексту на деякому тлі можна створити засобами графічного редактора. Клацання мишею над окремими елементами такого рисунка-карти активізує те чи інше гіперпосилання.
Опис навігаційної карти  Спочатку потрібно створити відповідний рисунок  за допомогою графічного редактора у формі gif, jpg чи bmp.  Приклад1. Розглянемо карту Мій сайт Рисунок створено редактором Paint  з метою демонстрації суті карти.  Верхній лівий кут рисунка має координати (0,0).  Перша координата горизонтальна,  а інша – вертикальна. Одиниця вимірювання – піксель.  Коло має радіус 50 пікселів. Центр кола знаходиться в точці з координатами (80, 110). Прямокутник із текстом Біографія має сторони завдовжки 130 і 55 пікселів. Він однозначно описується координатами двох діагонально протилежних вершин:  (20, 175) і (150, 230). Прямокутник з текстом Навчання однозначно задається координатами  (20, 260) і (150, 310), а з текстом Адреса – (20, 340) і (150, 390). Створений графічний файл розташовують на диску і описують його у html- файлі web- сторінки за допомогою тега <IMG>. Цей тег має містити, крім уже відомих, новий параметр USEMAP= “#назва1”, де назва1 – це назва карти. Наприклад, <IMG SRC=“назва графічного зображення”   USEMAP = “#mymap1”>. Мій сайт Фото Біографія Навчання Адреса
Тепер опишемо, як створити карту. Це роблять за допомогою тега   <MAP параметр>…</MAP>   У середині цього тега описують гарячі області карти. Тут застосовують параметр NAME, значенням якого є назва карти, у нашому випадку - #mymap1. Гарячі області карти. У середині тега - контейнера <MAP>…</MAP> розташовують декілька одинарних тегів <AREA параметри>, що описують замкнені області карти, які мають служити гіперпосиланнями. Власне ці області називають гарячими. Для їхнього задання призначені такі параметри тега <AREA>: HREF = “адреса ресурсу, який викликають” ALT = “альтернативний текст-підказка” SHAPE = “rect” або “circle” або “poly” або “default” COORDS = “список координат області”
Гарячою областю може бути область, охоплена прямокутником (rect), або колом (circle), або багатокутником (poly), або все зображення (default). Список координат для прямокутника – це записані через кому координати діагонально-протилежних вершин, для кола – координати центра і значення радіуса, для багатокутника – координати всіх вершин. Координати гарячих і холодних областей достатньо задавати приблизно, а не точно, головне, щоб області не перекривались.
Приклад html- файлу навігаційної карти:  <HTML> <HEAD> <TITLE> Навігаційна карта </TITLE> </HEAD> <BODY> <IMG SRC = “karta. bmp” TITLE = “Навігаційна карта”  BORDER = 5 WIDTH = 167 HEIGHT = 425  USEMAP = “# MyMap1”> <MAP NAME = “MyMap1”> <AREA SHAPE = “circle” COORDS = “80, 110, 50”  ALT = “моя фотографія”  HREF = “mainpage. htm”> <AREA SHAPE = “rect” COORDS = “20, 175, 750, 230”  ALT = “Моя біографія”  HREF = “biograph. htm”> <AREA SHAPE = “rect” COORDS =”20, 260, 150, 310”  ALT = “Мої університети”  HREF = “studies. htm”> <AREA SHAPE = rect COORDS = “20, 340, 150, 390”  ALT = “Моя адреса”   HREF = “address. htm”> </MAP>  </BODY>  </HTML>
Таблиці стилів дають змогу спростити процес створення сторінок і поліпшити їхній зовнішній вигляд. Концепція стилів подібна до ідеї стилів, яка реалізована в сучасних текстових редакторах – текст спочатку вводять, а потім форматують, користуючись стилями. Застосування стилів дає змогу вводити на сторінку потрібні тексти та інші елементи, не задумуючись над їхнім зовнішнім виглядом і розташуванням. Таблиці стилів користувач зазвичай створює окремо від html- файлу. Під час створення html- файлу він концентрує увагу на змісті сторінки, а не на її зовнішньому вигляді, а під час створення таблиці стилів – навпаки. Отже, стилі дають змогу розмежувати етапи створення html-файлу й удосконалення зовнішнього вигляду сторінки.
Розглянемо три способи такої взаємодії:  зв’язування,  імпортування,  вбудовування. 1.Зв’язування. Таблицю стилів створюють і зберігають в окремому текстовому файлі з розширенням css. Таку таблицю стилів називають зовнішньою. Щоб зв’язати основний файл з таблицею стилів, у середині тега <HEAD> застосовують одинарний тег <LINK> з інформацією про таблицю:  <HEAD>  <LINK HREF = “адреса таблиці стилів”   TYPE = “text/css”   REL = “stylesheet”   TITLE = “назва таблиці стилів”>  </HEAD>   Параметри TYPE і REL мають наведені вище стандартні значення, які означають, що деяка таблиця стилів буде створена мовою CSS як текстовий файл.
2. Імпортування. Це те ж саме, що і зв’язування, але взаємодію файлів забезпечують засобами тегу <STYLE> і команди  @import URL (“адреса таблиці стилів”  3. Вбудовування. Якщо таблицю створено лише для деякого конкретного html- файлу, то її розташовують у цьому файлі за допомогою тега-контейнера <STYLE>. Це звужує рамки застосування таблиці, але суттєво прискорює функціонування сторінки. Таку таблицю стилів називають внутрішньою або вбудованою. Таблицю стилів можна застосувати або до всього файлу, або до його частини, або до окремого тега.
Якщо дизайнер для створення сторінки застосовує декілька таблиць стилів, то такі таблиці називають каскадними.    Каскад – це впорядкована послідовність таблиці стилів. У такі однотипні стилі з таблиць, які розташовані ближче до початку послідовності, мають більший пріоритет. Саме ця властивість дає змогу легко змінювати зовнішній вигляд сторінки і з декількох альтернатив вибирати найліпшу методом зміни послідовності описів таблиць стилів.
Таблиця стилів – це текстовий файл, який створюють за допомогою мови CSS – Cascading Style Sheets – чи іншої.  Є спеціальні програми, наприклад, AceExpert чи FrontPage тощо,  які дають змогу створювати досить складні таблиці стилів навіть без знання цієї мови. Зазвичай таблицю стилів створюють засобами текстового редактора, наприклад NotePad, як текстовий файл і дають йому деяку назву з розширенням css. Таблицю стилів складається з правил, а правило – з назви тега чи списку назв тегів і описів стилів, які діятимуть у межах цих тегів деякого html- файлу. Опис стилю - це послідовність пар   <властивість>:<значення>, які записують через крапку з комою та охоплюють фігурними дужками.
Загальний вигляд правила такий: Список тегів {властивість 1: значення 1;   властивість2: значення2;    ... ;   властивість N: значення N;}   Приклад правила для одного тега:    P{color:red}. Браузер відтворить на екрані тексти всіх абзаців червоним кольором. Приклад складнішого правила для списку тегів:  H3, LI { color:green; font-family:pragmatica;    Font-size:16px; text-align:left;    Border-style: ridge; border-width:2mm}  Браузер виведе всі заголовки третього рівня H3 і елементи списків LI зеленим кольором, шрифтом Прагматика розміру 16 пунктів, вирівняє їх до лівого краю вікна й охопить рамкою товщиною 2 мм з видавленим контуром (ridge).
Імена властивостей складаються з одного чи декількох англійських слів, що записуються через риску. Властивість діє лише в межах тега, зазначеного у відповідному правилі. Властивість Значення Пояснення Background-attachment Fixed
scroll Тло фіксоване Тло прокручується Background-color Red, green, #ffcc55 Колір тла Background-image                              URL (“адреса графічного файлу для тла”) Background-repeat Repeat, repeat-x, repeat-y, no-repeat Повторює зображення Border-color Red, green, #ffcc55 Колір рамки Border-style None, dotted, dashed, solid, double, groove, ridge, inset, outset Стиль рамки Border-widht 2mm, 3mm Товщина рамки Font-family Arial, “Times New Roman Cyr”, Serif Назва шрифта Font-size 12pt, 16pt Розмір шрифта Font-style Normal, oblique, italic Вигляд курсивів Font-variant Small-caps Вигляд шрифта Font-weight Normal, bold, bolder Жирність шрифта Word- spacing 1mm, 2mm Відстань між словами Letter- spacing 1mm Відстань між символами
Line-height 2mm, 4mm Відстань між рядками Text-align Left, right, center, justify Вирівнювання тексту Text-decorate None, underline, overline, linethrough, blink Оформлення тексту Text-indent 2cm Абзацний відступ  Margin-top 4mm тощо Відступ з верху Margin-right 4mm тощо Відступ справа Margin-bottom 4mm тощо Відступ знизу Margin-left 4mm тощо Відступ зліва Padding- top 2mm тощо Величина вільного  простору між стороною  рамки і елементом у  рамці Padding- right 2mm тощо Padding- bottom 2mm тощо Padding- left 2mm тощо Height 4cm тощо Висота елемента Width 14cm тощо Ширина елемента Float Nome, left, right Обтікання об’єкта текстом Color Red, green, #ffcc55 Колір елемента Verticai-alligh Top, super, middle, sub, bottom Вертикальне вирівнювання List-style-image                    URL (“адреса графічного маркера списку”) List-style-position Inside, outside Позиція маркера List-style-type Disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none. Вигляд маркера (диск, круг, квадрат, арабські цифри, малі чи великі римські тощо)
Теги <STYLE>, <DIV> і <SPAN>:  Внутрішні таблиці стилів описують у головному файлі в контейнері тега <HEAD>...</HEAD> за допомогою тега-контейнера <STYLE> ... </STYLE>.  Приклад 1. Розглянемо головний файл з описом стилів: <HTML> <HEAD> <ТІТLЕ> Застосування стилів </ТІТLЕ> <STYLE TYPE= тут записують правила ... " title="Теги . Приклад 1. Розглянемо головний файл з описом стилів: <ТІТLЕ> Застосування стилів ... ">
Приклад 2. Розглянемо такі правила (стилі):      body .mystylel { color:red; font-size:120px; margin-top:120px;    margin-left :70px} .mystyle2 { color:blue; font-size:120px;   margin-top: -90px; margin-left:200px} .mystyle3 { color:green;font-size:120px;   margin-top: -85px; margin-left:340px} .mystyle4 { color:black;font-size:35px; font-style:italic; margin-  top: -270px; margin-left:75px} .mystyle5 { color:black; font-size:25px; margin-top:17px;    margin-left:340px}
Приклад 3. Розглянемо такий зміст рекламної сторінки:  <BODY> <DIV CLASS=mystylel> Kinp</DIV>  <DIV CLASS=mystyle2> Греція</ DIV >  <DIV CLASS=mystyle3> Італія</ DIV >  <DIV CLASS=mystyle4>
Тел.: (0322) 97-56-46
" title="Приклад 3. Розглянемо такий зміст рекламної сторінки:
Kinp
Греція
Італія
"Мандри" запрошують подорожувати
Тел.: (0322) 97-56-46
">
Зміст слайдів
Номер слайду 1

Загальні відомості про мову HTML. Основні теги форматування

Номер слайду 2

HTML – це набір угод для розмітки документів, що визначають зовнішній вигляд документів на екрані комп'ютера при доступі до них із використанням програми браузера. Web-документ – це текст, написаний мовою HTML чи іншою, який призначений для перегляду електронної інформації на екрані комп’ютера за допомогою браузера.

Номер слайду 3

Тег – це фрагмент коду, що описує певні елементи документа HTML і вміщений у кутові дужки < >. Теги бувають одинарними і парними. Більшість тегів парні, як, наприклад, тег означення html- файлу: … . Парні теги позначають початок і кінець області дії відповідної команди. Тег, що закриває область дії, має косу риску.

Номер слайду 4

HTML-документ умовно можна розбити на три частини: - Службова інформація для браузера, що вміщена у рядок з тегом . - Заголовна частина документа, до якої вміщена назва документа, а також службова інформація для серверів, описи невеликих програм-сценаріїв. Ця частина документа міститься між тегами і . - Тіло документа, що обмежене тегами ... . Часто теги, окрім імені, містять додаткові елементи, які називаються атрибутами. Атрибути – це компоненти тегу, що містять вказівки про те, як браузер має сприйняти й обробити тег.

Номер слайду 5

Атрибут записується після імені тегу перед дужкою і складається, як правило, із пари «ім'я атрибута = значення». Значення атрибута записується після імені атрибута через знак рівності =. Всі значення атрибутів за умовчанням беруться в подвійні (") або одинарні (') лапки. Імена атрибутів можуть набиратися як малими, так і великими літерами, браузер інтерпретуватиме їх однаково. У тега може бути кілька атрибутів, тоді вони відокремлюються один від одного пробілами.

Номер слайду 6

Етапи створення web-сторінки мовою HTML:

Номер слайду 7

Етапи створення web-сторінки мовою HTML:

Номер слайду 8

Етапи створення web-сторінки мовою HTML:

Номер слайду 9

Етапи створення web-сторінки мовою HTML:

Номер слайду 10

Тег BODY: Всередині пари тегу … записують увесь текс сторінки. Цей текст відображатиметься у вікні броузера. BACKGROUND = “d:\myweb\picture1.jpg” Задає шлях до картинки для тла BGCOLOR = “white” Задає білий колір тла, якщо не використовується тло-картинка BGPROPERTIES = “fixed” Фонове зображення не прокручується TEXT = “black” Задає колір тексту (тут чорний) на сторінці

Номер слайду 11

Теги форматування символів тексту: текст Товстий шрифт тексту текст Шрифт-курсив текст Підкреслений шрифт текст Нижній індекс. Наприклад, щоб отримати вираз Н2О, пишуть H2O текст Верхній індекс, наприклад, 1а вулиця, а2 текст Великий шрифт текст Малий шрифт текст Виокремлений курсивом текст (те саме, що тег I) текст Товстий курсив. Цей приклад демонструє застосування принципу вкладення тегів.

Номер слайду 12

Теги для розміщення тексту (одинарні):

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

речення починатиметься з нового, вирівнюваного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег

може використовуватися як парний:

текст абзацу

Наступний за цим тегом текст буде наведено у новому рядку без пропуска рядка
У рядку буде проведена горизонтальна лінія.

Номер слайду 13

Заголовки та теги вирівнювання: Теги Результат на екрані

Заголовок1

Заголовок 1

Заголовок2

Заголовок 2

Заголовок3

Заголовок 3

Заголовок4

Заголовок 4
Заголовок5
Заголовок 5
Заголовок6
Заголовок 6

Номер слайду 14

елемент
Вирівнювання до центру елемент Вирівнювання до лівого краю елемент Вирівнювання до правого краю елемент Вирівнювання по ширині

Номер слайду 15

Приклад web-сторінки мовою HTML:

Номер слайду 16

Приклад web-сторінки мовою HTML:

Номер слайду 17

Створення web-сторінок за допомогою мови HTML. Створення списків та вставка зображення.

Номер слайду 18

Тег задання параметрів шрифту FONT. Уміст контейнера (текст)

Номер слайду 19

Вставка зображень Важко знайти в WWW сторінку, яка не мала б зображень. Вставка зображення на Web-сторінку виконується одиночним тегом . Усередині цього тегу обов'язково записується атрибут src, що вміщує URL зображення. Назва цього атрибута походить від слова source - джерело.

Номер слайду 20

Номер слайду 21

Для "співіснування" малюнка i тексту документа використовують теги: малюнок з лівого краю, текст його обтікає справа: малюнок з правого краю, текст його обтікає зліва: Kpiм параметрів align, існують ще кілька параметрів: відстань між текстом i мапюнком по горизонталі (тут 10 пікселів): відстань між текстом i малюнком по вертикалі (30 пікселів): опис малюнка (якщо встановити курсор миші на малюнок, через секунду з'явиться вказаний текст - тут "моя фотокартка"): моя фотокартка ширина малюнка (тут 100 пікселів): висота малюнка (тут 200 пікселів): рамка навколо малюнка (тут товщина лінії 5 пікселів):

Номер слайду 22

Bci параметри можуть застосовуватися одночасно один з одним, щоб запобігти плутанини в їx застосуванні. Наприклад, так:

Номер слайду 23

Номер слайду 24

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

Номер слайду 25

Ненумеровані або маркіровані списки Список оформляється за допомогою тега

, які позначають відповідно початок і кінець списку. Кожний елемент списку починається з одиничного тегу
  • .
    • Перший елемент списку
    • Другий елемент списку
    • Третій елемент списку .
    • n-й елемент списку
    Тег
      має атрибут TYPE, який визначає зовнішній вигляд маркерів. Він може набувати значення:  disc – диск;  circle – коло;  square – квадрат.

  • Номер слайду 26

    Номер слайду 27

    Нумеровані списки Список оформляється за допомогою тега

    , які позначають відповідно початок і кінець списку. Кожний елемент списку починається з поодинокого тега
    1. Перший елемент списку
    2. Другий елемент списку
    3. Третій елемент списку .
    4. n-й елемент списку
    Тег
      має атрибути: TYPE – визначає тип нумерації. Він може набувати значення:  А – великі латинські літери;  а – малі латинські літери;  І – римські цифри;  1 – арабські цифри (дане значення прийнято за замовчуванням); START – задає, з якого порядкового номера починається нумерація у списку. Значенням атрибуту є число. Наприклад: атрибут START=”4” означає список, у якого нумерація починається з пункту 4.

  • Номер слайду 28

    Номер слайду 29

    Вкладені списки Мова HTML дозволяє вкладати списки один в один. Це можливо при виконанні двох умов: перша – всі списки повинні бути різного типу; друга – вкладень повинно бути не більше трьох.

    Номер слайду 30

    ВІДСТУПИ Для встановлення одного, двох i трьох відступів використовується тег

    за зразком:
      один відступ
        два відступи
          три відступи

    Номер слайду 31

    Список тлумачень Список тлумачень використовують для пояснення термінів, створення словників тощо. Його утворюють за допомогою парного тега

    і двох одинарних тегів
    і
    так: заголовок
    термін
    тлумачення 1
    тлумачення 2 ...

    Номер слайду 32

    Номер слайду 33

    Використання спеціальних символів У мові HTML символ < використовується як перший символ кожної команди. Цей символ не може бути використаний для позначення відношення “менше”. Для відображення на екрані символа < (“менше”) і деяких інших символів в HTML прийняті спеціальні позначення: Текст, що відображається Запис в формі HTML < < > > & & “ " пробіл  

    Номер слайду 34

    Номер слайду 35

    Створення рядка, що біжить - рух тексту справа наліво Атрибути тегу Пояснення height=“висота у пікселях” Висота смуги bgcolor=“колір тла” Колір тла смуги behavior=“alternate” =“slide” Відбивання від країв екрану Зупинка рядка біля лівого краю direction=“right” Рух у протилежний бік loop=n Обмеження кількості проходів, де n-кількість hspase і vspace Відцентрування смуги scrollamount=n Швидкість руху, де n-конкретне значення з діапазону від 1 (повільно) до 10 (швидко)

    Номер слайду 36

    Тег

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

    Номер слайду 37

    Зв’язування web-сторінок за допомогою гіпертексту. Робота з таблицями.

    Номер слайду 38

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

    Номер слайду 39

    Відправна точка посилання задається тегом <А>. Ім'я цього тегу походить від першої літери слова anchor - якір. Сам елемент А називається елементом прив'язки або якірним елементом. Усередині тегу <А> ставиться обов'язковий атрибут href, за допомогою якого визначається точка призначення посилання (цільовий ресурс). Між тегами <А> і розміщається текст посилання або елемент малюнка. Так найпростіше посилання може виглядати як <А href="rest.html">Moї канікули На Web-сторінці це посилання відображатиметься у вигляді тексту "Мої канікули". При клацанні мишею по цьому посиланню буде завантажуватися HTML-файл rest. html. Зверніть увагу, що в атрибуті href зазначене лише ім'я файла, що відповідає відносному посиланню на файл, який розміщений у тій самій папці, що і вихідний документ. Якщо потрібно посилатися на ресурс, розміщений у World Wide Web, то в атрибуті href указується URL цього ресурсу, наприклад, <А href=http://www.Samsung.com> Продукція фірми Samsung

    Номер слайду 40

    Параметри LINK, VLINK, ALINK тега BODY LINK = “колір” колір гіперпосилання VLINK =”колір” змінює колір гіперпосилання після першого його використання ALINK =”колір” змінює колір активізованого гіперпосилання

    Номер слайду 41

    Посилання в межах сторінки Насамперед потрібно позначити місце на сторінці, куди відбуватиметься перехід. Якщо з деякого місця перехід має виконувати на початок сторінки, то в те місце html- файлу, що відповідає точці посилання, вводять тег, який називається якорем: Аналогічно позначаються деяке місце в кінці файлу: . Якір можна кинути в будь якому місці тексту так: . Тепер на сторінці розміщують гіперпосилання на створені позначки (якори) так: текст гіперплсилання

    Номер слайду 42

    Номер слайду 43

    Зовнішнє гіперпосилання

    Номер слайду 44

    Робота з таблицями Таблиці будуються за принципом вкладення і вводяться на Web-сторінку за допомогою ряду елементів. Кожна таблиця починається тегом

    . Наприклад, тег
    і закінчується тегом
    . Створювана таблиця ніби розгортається по рядках, а рядки заповнюються комірками. При цьому всередину тегів ...
    можуть вставлятися такі елементи:  TR - елемент створення рядка;  TD - елемент, що визначає вміст комірки даних;  ТН - елемент, що визначає комірку заголовка.  TC – заголовок таблиці Наприклад, для створення таблиці 3x2 використовується такий шаблон:
    . . . . . .
    . . .. . .
    . . . . . ..

    Номер слайду 45

    Атрибути елемента TABLE width задає ширину таблиці align задає вирівнювання таблиці у документі border задає вивід рамок таблиці. Якщо значення цього атрибута не визначено, наприклад,

    , усі рамки матимуть товщину 1 піксель. Якщо ж значення задане (наприклад, border=5), то товщина 5 пікселів буде тільки для зовнішньої рамки. Товщина внутрішніх рамок, як і раніше, дорівнюватиме 1 пікселю.

    Номер слайду 46

    Атрибути елементів рядків і стовпців width i height установлюють розміри комірок рядка: ширину і висоту. Ці атрибути можуть використовуватися у тегах

    , або призначає центрування по вертикалі

    Номер слайду 47

    Колір у таблицях bgcolor колір фону в таблиці. Залежно від того, до якого тегу цей атрибут вводиться (

    align вирівнюють вміст у комірках і вводиться в теги
    . Цей атрибут може набувати значень: left, right, center і justify valign вирівнюють вміст по вертикалі. Цей атрибут застосовується з такими значеннями: top (вирівнювання по верхньому краю комірок), bottom (по нижньому краю), middle (центрування по вертикалі). Наприклад,
    , ,
    або ), задаватиметься фон всієї таблиці, рядка, комірки заголовка або даних. Наприклад, тег задає червоний фон всієї таблиці, а тег
    задає жовтий фон комірки даних bordercolor колір рамок таблиці. Якщо атрибут bordercolor вставити в тег , то він діятиме, коли в таблиці є рамки, тобто за наявності атрибута border. Якщо ж потрібно задати колір лише визначених комірок, атрибут bordercolor розташовуємо в тегах , <ТН> або задає червоні межі всіх комірок рядка

    Номер слайду 48

    Об'єднання комірок таблиці rowspan об'єднує комірки суміжних рядків. Значення атрибута задає кількість об'єднаних комірок. Наприклад, початковий тег комірки

    . Наприклад, тег
    встановлює об'єднання двох комірок із суміжних рядків colspan об'єднує комірки суміжних стовпців. Наприклад, формує одну комірку даних із трьох комірок суміжних стовпців

    Номер слайду 49

    Номер слайду 50

    Поняття про фрейми Фрейм (у перекладі з англійської) означає кадр, рамка, прямокутна область. Фрейми поділяють вікно броузера на частини, в яких відображають зміст сторінок сайту. Кожній сторінці має відповідати свій html-файл. Кожна сторінка повинна мати логічний заголовок. Для поділу вікна броузера на декілька частин використовують тег-контейнер Параметрів є два: COLS і ROWS. Параметр COLS призначений для поділу вікна на вертикальні області (колонки), а ROWS – на горизонтальні. Розміри областей задають у відсотках до всього вікна, фіксовані – у пікселях. Наприклад, COLS = “25%, 75%” означає, що лівий фрейм займатиме чверть вікна на будь-якому моніторі. Можна писати також COLS = “1*, 3*”, де 1* саме тут означає одну з чотирьох частин екрана, або COLS = “2*,3*”, де 2* означає дві з п’яти вертикальних частин екрана. У фіксованому заданні COLS = “ 100,*”, число 100 означає 100 пікселів, а * - решту екрана.

    Номер слайду 51

    Більш складні конфігурації фреймів створюють шляхом поділу на фрейми деякого раніше створеного фрейму. У цьому випадку теги FRAMESET вкладають один в одний, наприклад, так: у тезі користувач описує конкретний фрейм. Обов’язковими тут є параметри SRC зі значенням адреси стартового html-файлу і NAME, значенням якого є назва фрейму. Цю назву придумує користувач, запам’ятовує її, оскільки вона використовується далі як значення параметра TARGET тега <А>.

    Номер слайду 52

    Призначення деяких параметрів: SCROLLING задає наявність чи відсутність смуг прокручування у вікні фрейму FRAMEBORDER задає наявність меж між фреймами BORDER задає ширину межі у пікселях MARGIN задає величину відступів зверху і від бокових меж фрейму NORESIZE забороняє змінювати розміри фрейму у вікні броузера

    Номер слайду 53

    Допоміжні html-файли

    Номер слайду 54

    Основний html-файл

    Номер слайду 55

    Навігаційні карти. Таблиці стилів. Мій сайт Фото Біографія Навчання Адреса

    Номер слайду 56

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

    Номер слайду 57

    Опис навігаційної карти Спочатку потрібно створити відповідний рисунок за допомогою графічного редактора у формі gif, jpg чи bmp. Приклад1. Розглянемо карту Мій сайт Рисунок створено редактором Paint з метою демонстрації суті карти. Верхній лівий кут рисунка має координати (0,0). Перша координата горизонтальна, а інша – вертикальна. Одиниця вимірювання – піксель. Коло має радіус 50 пікселів. Центр кола знаходиться в точці з координатами (80, 110). Прямокутник із текстом Біографія має сторони завдовжки 130 і 55 пікселів. Він однозначно описується координатами двох діагонально протилежних вершин: (20, 175) і (150, 230). Прямокутник з текстом Навчання однозначно задається координатами (20, 260) і (150, 310), а з текстом Адреса – (20, 340) і (150, 390). Створений графічний файл розташовують на диску і описують його у html- файлі web- сторінки за допомогою тега . Цей тег має містити, крім уже відомих, новий параметр USEMAP= “#назва1”, де назва1 – це назва карти. Наприклад, . Мій сайт Фото Біографія Навчання Адреса

    Номер слайду 58

    Тепер опишемо, як створити карту. Це роблять за допомогою тега   У середині цього тега описують гарячі області карти. Тут застосовують параметр NAME, значенням якого є назва карти, у нашому випадку - #mymap1. Гарячі області карти. У середині тега - контейнера розташовують декілька одинарних тегів , що описують замкнені області карти, які мають служити гіперпосиланнями. Власне ці області називають гарячими. Для їхнього задання призначені такі параметри тега : HREF = “адреса ресурсу, який викликають” ALT = “альтернативний текст-підказка” SHAPE = “rect” або “circle” або “poly” або “default” COORDS = “список координат області”

    Номер слайду 59

    Гарячою областю може бути область, охоплена прямокутником (rect), або колом (circle), або багатокутником (poly), або все зображення (default). Список координат для прямокутника – це записані через кому координати діагонально-протилежних вершин, для кола – координати центра і значення радіуса, для багатокутника – координати всіх вершин. Координати гарячих і холодних областей достатньо задавати приблизно, а не точно, головне, щоб області не перекривались.

    Номер слайду 60

    Приклад html- файлу навігаційної карти: Навігаційна карта “моя “Моя “Мої “Моя

    Номер слайду 61

    Таблиці стилів дають змогу спростити процес створення сторінок і поліпшити їхній зовнішній вигляд. Концепція стилів подібна до ідеї стилів, яка реалізована в сучасних текстових редакторах – текст спочатку вводять, а потім форматують, користуючись стилями. Застосування стилів дає змогу вводити на сторінку потрібні тексти та інші елементи, не задумуючись над їхнім зовнішнім виглядом і розташуванням. Таблиці стилів користувач зазвичай створює окремо від html- файлу. Під час створення html- файлу він концентрує увагу на змісті сторінки, а не на її зовнішньому вигляді, а під час створення таблиці стилів – навпаки. Отже, стилі дають змогу розмежувати етапи створення html-файлу й удосконалення зовнішнього вигляду сторінки.

    Номер слайду 62

    Розглянемо три способи такої взаємодії: зв’язування, імпортування, вбудовування. 1.Зв’язування. Таблицю стилів створюють і зберігають в окремому текстовому файлі з розширенням css. Таку таблицю стилів називають зовнішньою. Щоб зв’язати основний файл з таблицею стилів, у середині тега застосовують одинарний тег з інформацією про таблицю: Параметри TYPE і REL мають наведені вище стандартні значення, які означають, що деяка таблиця стилів буде створена мовою CSS як текстовий файл.

    Номер слайду 63

    2. Імпортування. Це те ж саме, що і зв’язування, але взаємодію файлів забезпечують засобами тегу . Приклад 1. Розглянемо головний файл з описом стилів: <ТІТLЕ> Застосування стилів ...

    Номер слайду 70

    Приклад 2. Розглянемо такі правила (стилі): body .mystylel { color:red; font-size:120px; margin-top:120px; margin-left :70px} .mystyle2 { color:blue; font-size:120px; margin-top: -90px; margin-left:200px} .mystyle3 { color:green;font-size:120px; margin-top: -85px; margin-left:340px} .mystyle4 { color:black;font-size:35px; font-style:italic; margin- top: -270px; margin-left:75px} .mystyle5 { color:black; font-size:25px; margin-top:17px; margin-left:340px}

    Номер слайду 71

    Приклад 3. Розглянемо такий зміст рекламної сторінки:

    Kinp
    Греція
    Італія
    "Мандри" запрошують подорожувати
    Тел.: (0322) 97-56-46

    Номер слайду 72

    ppt
    Додано
    16 вересня 2019
    Переглядів
    360
    Оцінка розробки
    Відгуки відсутні
    Безкоштовний сертифікат
    про публікацію авторської розробки
    Щоб отримати, додайте розробку

    Додати розробку