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

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

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

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

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

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

">

Етапи створення 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. Створення списків та вставка зображення.

Тег задання параметрів шрифту 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 розташовуємо в тегах , <ТН> або задає червоні межі всіх комірок рядка ">

Зміст слайдів

Номер слайду 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О, пишуть H₂O ^текст Верхній індекс, наприклад, 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-й елемент списку

Тег

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

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

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

…, які позначають відповідно початок і кінець списку. Кожний елемент списку починається з поодинокого тега

Перший елемент списку
Другий елемент списку
Третій елемент списку .
n-й елемент списку

Тег

Номер слайду 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 Завантажити Зберегти на потім Додав(-ла) Курильчик Ірина Володимирівна Пов’язані теми Інформатика, 11 клас, Матеріали до уроків Додано 16 вересня 2019 Переглядів 2916 Оцінка розробки Відгуки відсутні Безкоштовний сертифікат про публікацію авторської розробки Щоб отримати, додайте розробку Додати розробку Рекомендовані матеріали pptx 5607 5 Презентація "Основи електронного документообігу. Урок 2" docx 6706 4.7 Урок "Історія графічної культури" docx 9907 5 Урок "Дизайн і його тенденції. Ілюстрація. Цифрове мистецтво" docx 13143 4.8 Урок "Сучасна реклама та фірмовий стиль: напрямки, стилі, тренди" Схожі матеріали ppt 2642 3 Презентація "Створення найпростішого калькулятора у середовищі візуального програмування Delphi" docx 2772 5 Розробка відкритого бінарного заняття з дисциплін «ІНФОРМАТИКА ТА КОМП’ЮТЕРНА ТЕХНІКА» та «ЕКОНОМІКИ ПІДПРИЄМСТВА» docx 2987 0 Урок "Сортування і фільтрація. Практична робота" zip 3196 5 Урок "Аналіз даних за допомогою функцій табличного процесора" docx 4968 0 "Конспект уроку з інформатики для 11 класу на тему "Електронне листування." Поділитись матеріалом facebook 0 viber 0 telegram 0 Twitter 0 Google+ 0 Завантажити Зберегти на потім Перевірка виданих документів Вкажіть номер документа (використовуйте кириличну розкладку) Підвищення кваліфікації Підвищення кваліфікації Вебінари Конференції Курси Розділи Журнал Бібліотека розробок Тести Лабораторні роботи Проєкти Конкурси Олімпіади Штучний інтелект для вчителів Курси англійської мови Про нас Про «На Урок» Співпраця закладів освіти Зворотний зв'язок Інше Вхід для учнів (naurok.ua) Матеріали до свят Конкурс «Фантастична п’ятірка» © 2017-2024, ТОВ «На Урок» Угода користувача \| Умови користування \| Політика конфіденційності Реєстрація на сайті «На Урок» Зареєструватись за допомогою Facebook Зареєструватись за допомогою Google або Прізвище Ім'я Email Пароль Реєструючись, ви погоджуєтеся з угодою користувача та політикою конфіденційності. Вже зареєстровані? Спробуйте увійти Давай дружити! Оновлення «На Урок» — в кожну стрічку Facebook «На Урок». Освітній інтернет-проект Дякую, Я вже давно з вами Розсилка «На Урок» Ми надсилатимемо наші цікаві та дуже корисні статті щоп’ятниці Ваш e-mail Дякуємо! Ми будемо тримати Вас в курсі!

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

">

Заголовок1

Заголовок2

Заголовок3

Заголовок4

Заголовок5

Заголовок6

Заголовок 6