Лекція 2
.pdfЛекція №2
Мова HTML. Структура web-сторінки. Основні теги форматування тексту.
HTML-редактори для створення HTML-сайту
Існує величезна кількість html-редакторів web-сторінок, і всі вони різні. Софт для створення сайту ділиться на три групи:
-Візуальні редактори;
-Текстові редактори.
-Конструктори сайтів.
Найпопулярніші серед html-редакторів:
Adobe Dreamweaver CS3 Html редактор NVU Notepad + +
HtmlReader
Web Development Studio 2.0 Web Page Maker.
Для підготовки html-файлу можна використати текстовий редактор NotePad (Блокнот) чи будь-який інший, що дає змогу готувати файли у текстовому форматі. Після написання html-файл потрібно зберегти на диску з деякою назвою з розширенням назви .htm чи .html.
Приклад 1. Структуру html-файлу продемонструємо за допомогою тексту, де деяка особа розповідає про себе:
<html> <!--Це файл 1.html -->
<head>
<title>Назва вікна web-сторінки</title>
</head>
<body параметри> <!--параметри тегу body ми розглянемо пізніше--> <!--Далі йде текст, наприклад, такий.-->
Мене звати Сергій. Мені 18 років. Я хочу стати web-дизайнером. Це моя перша webсторінка. Тут я можу писати будь-який текст, наприклад, про себе і мої інтереси. Пізніше я навчуся вставляти фотографії, картинки, звук, відеозображення шляхом посилання на відповідні графічні, звукові чи відеофайли. Я збережу цей файл на диску і відкрию його у браузері. Моя сторінка ще не красива і не цікава. Але скоро я навчуся робити цікаві web-сторінки. Я розташую файл на сервері, і мою сторінку зможуть побачити в різних кінцях світу.
</body>
</html>
Відкривши даний файл у браузері, побачимо web-сторінку, де відомості про цю особу будуть розміщені дещо інакше, ніж у файлі: увесь текст розміщений в одному абзаці вирівняний до лівого краю, немає абзацного відступу (рис. 1).
Службові слова, наведені великими літерами, вивчатимемо далі. їх можна писати також малими літерами.
Тегова модель файлу
Команди мови HTML називаються тегами (markup tags), які також називаються прапорцями розмітки, - спеціальні конструкції мови HTML, які використовуються для розмітки документа і керують його відображенням.
Обов'язкові теги HTML-документа:
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Теги бувають одинарними і парними.
Більшість тегів – парні, як наприклад, тег означення html-файлу: <Html>… </Html>. Такі теги називаються інакше контейнерами.
Контейнер може містити текст та інші теги.
Парні теги позначають початок і кінець області дії відповідної команди. Теги записують у кутових дужках.
Основні теги мови HTML Тег <HTML>…</HTML>
Тег <HTML>…</HTML> є найголовнішим із тегів HTML - визначає межі нашого документа.
Розділ заголовка тег <HEAD> … </HEAD>
Розділ заголовка містить опис параметрів, використовуваних при відображенні документа, але які не відображаються безпосередньо у вікні переглядача.
Тег <HEAD>…</HEAD> - це заголовок документа (не плутати з назвою!!!).
|
Атрибути тега <HEAD> |
|
|
|
|
<BASE> |
Дозволяє задати базову адресу (URL) для всього |
|
документа |
||
|
||
|
|
|
<BASEFONT> |
Дозволяє встановити шрифт для документа |
|
|
|
|
<LINK> |
Встановлює зв’язки з іншими елементами |
|
|
|
Містить інформацію, необхідну браузеру або серверу для опрацювання документа. Використовується для завдання
<META>
метаінформації (інформації про документ), що описує властивості документа, наприклад, авторство, дату, список ключових слів і т.д.Елементи МЕТА не впливають на відображення самого документа.
<STYLE> |
Використовується для опису внутрішніх таблиць стилів |
<TITLE>...</TITLE> 
Задає назву документа
Тег <TITLE>...</TITLE>
Даний тег описує головну частину заголовка документа: заголовок Windows-вікна. Назва документу записується між <TITLE>...</TITLE>. Вона звичайно відображається в заголовку вікна браузера (найчастіше супроводжується назвою самого браузера).
Приклад заголовку документа може виглядати так:
<head>
<title> Будівельна фірма "Дім": про нас </title> <base href="http://www.book.ru/">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="keywords" lang="ru" content="будова, матеріали, магазин"> <link rel="stylesheet" type="text/css" href="style.css">
</head>
В даному прикладі задаються: назва документа - Будівельна фірма "Дім": о нас; базова URL – адреса http://www.book.uа/; тип кодування, в якому написано документ, - windows-1251; ключові слова - будова, матеріали, магазин ("uа" –
вказівка на то, що ключові слова написані на українській мові); крім того, підключено зовнішній файл з каскадною таблицею стилів style.css.
Часто трапляється, що текст, написаний за допомогою одного коду, не вдається прочитати за допомогою іншого, оскільки типи кодування, яке використовується в UNIX-системах, називається KOI8-R, в середовищі Windows -
Windows-1251 (існують і інші типи кодування). Вказуючи в атрибутах META (див. вище) наприклад тип кодування - charset=koi8-r, тим самим заставляємо браузер використовувавати саме цей код при перегляді документу, в якому документ було створено.
Розділ тіла документа тег <BODY>…</BODY>
Даний розділ містить текст, призначений для відображення переглядача і теги, що вказують на спосіб форматування тексту, що визначають графічне оформлення документа, що задають параметри гіперпосилань і так далі.
Всередині тіла документа <BODY> заноситься все те з чого складається документ: текст, зображення, гіперпосилання.
Атрибути тега BODY
BACKGROUND= |
Вказує на URL-адресу зображення, яка |
|
використовується в якості фонового, задає |
||
"d:\myweb\picture1.jpg" |
||
шлях до картинки для тла |
||
|
||
BGCOLOR |
Визначає колір фону документа |
|
|
|
|
BGCOLOR="white" |
Задає білий колір тла, якщо не |
|
|
використовується тло-картинка |
|
ТЕХТ |
Визначає колір тексту |
|
|
|
|
TEXT="black" |
Задає колір тексту (тут чорний) на сторінці |
|
|
|
|
|
Фонове зображення не прокручується. |
|
BGPROPERTIES="fixed" |
Використовується тільки разом із тегом |
|
|
BACKGROUND. |
|
LINK |
Визначає колір невідвіданого гіперпосилання |
|
|
|
|
ALINK |
Визначає колір активного гіперпосилання |
|
|
|
|
VLINK |
Визначає колір відвіданого гіперпосилання |
|
|
|
У середині пари тегів <BODY параметри>... </BODY> записують увесь текст сторінки. Цей текст відображатиметься у вікні браузера.
Розглянемо докладніше поки що лише деякі із них: TEXT, BGCOLOR,
BACKGROUND.
Приклад 2. В наступному прикладі наводиться сторінка з білим текстом на синьому фоні (за допомогою атрибутів TEXT і BGCOLOR):
<html> <!--Це файл 2.html-->
<head>
<title>Сторінка з фоном</title>
</head>
<body bgcolor="blue" text="white">
Білий текст на синьому фоні
</body>
</html>
На малюнку подано вигляд екрана після відкривання файлу file2.html у браузері.
Існують два основних способи задання кольору для елементів html-документу за назвою або вказівкою 16-кового коду кольору. Розглянемо основні іменні кольори, які використовуються для задання фону сторінки та надання їй кращого вигляду.
Основні іменні кольори:
|
Black чорний # 000000 |
|
Navy темно-синій #000080 |
|
Gray сірий #808080 |
|
Blue синій #0000FF |
|
|
||
|
Silver сріблястий # C0C0C0 |
|
Aqua колір морської хвилі #00FFFF |
|
|
||
|
White білий #FFFFFF |
|
Green зелений #0080 00 |
|
Red червоний #FF0000 |
|
Lime лимонний #00FF00 |
|
Fuchsia фуксія #FF00FF |
|
Teal зеленувато-блакитний #008080 |
|
Maroon малиновий #800000 |
|
Yellow жовтий #FFFF00 |
|
Purple фіолетовий #800080 |
|
Olive оливковий #808000 |
|
|
|
|
Самі ці кольори використовуються дизайнерами для створення сайтів. Різних можливих відтінків цих кольорів є 16 мільйонів. Відтінки задають спеціальними шістнадцятковими кодами, як це прийнято в графічних редакторах, наприклад, один з відтінків сірого кольору має код #ff 7800.
Для одержання будь-якого іншого відтінка використовуються комбінації RGBзначень кольору, записані в шістнадцятковому форматі.
Окрім однотонної заливки довільного кольору, фон web-сторінки може бути заповнений деяким зображенням, яке на зразок керамічної плитки буде застеляти всю її видиму поверхню. Для використання на web-сторінках підходять тільки три формати графічних файлів: JPEG, GIF і PNG.
Всі три формати являють собою реалізацію алгоритмів стискування зображення з метою зменшення розміру графічних файлів для зменшення часу їх передачі.
Якщо замінимо в параметрі <BODY> атрибут bgcolor на background, то отримаємо фонове зображення web-сторінки у вигляді малюнка.
Основні теги форматування тексту |
|
<B> текст </B> |
Товстий шрифт |
<STRONG> текст </STRONG> |
|
<I> текст </I> |
Курсив |
<EM> текст </EM> |
|
<U> текст </U> |
Підкреслений |
<INS> текст <INS> |
|
<TT> текст </TT> |
Друкарська машинка |
<S> текст </S> |
Перекреслений |
<SUB> текст </SUB> |
Нижній індекс. |
|
Наприклад, щоб отримати вираз H2O, |
<SUP> текст </SUP> |
пишуть H<SUB>2</SUB>O |
Верхній індекс, наприклад, 1а вулиця (1 |
|
<BIG> текст </BIG> |
<SUP> а </SUP>), а2 (а <SUP> 2 </SUP>), |
Великий шрифт |
|
<SMALL> текст </SMALL> |
Малий шрифт |
<B> <I> текст </I></B> |
Товстий курсив. Цей приклад демонструє |
<STRONG><EM> текст </ EM> |
застосування принципу вкладення тегів |
</STRONG> |
|
<ADDRESS>текст</ADDRESS> |
Цей тег служить для введення відомостей |
|
про автора і/або авторські права. |
Елементи форматування тексту можуть бути вкладені один в одного, хоча кінцевий результата залежить від браузера. При цьому потрібно уважно слідкувати, щоб один контейнер знаходився цілком в іншому контейнері, наприклад:
<B><U>жирний і підкреслений текст</U></B>.
|
Теги для розміщення тексту: |
|
|
|
|
<P> |
Цей тег означає початок нового абзацу. Між абзацами буде |
|
|
порожній рядок. Зауважимо, що тег <P> може використовуватися |
|
|
як парний: <P> текст абзацу </P>. |
|
|
Вирівнювання абзаців здійснюється заданням атрибуту align = |
|
|
"left | center | right | justify". |
|
|
|
|
<BR> |
Наступний за цим тегом текст буде наведено у новому рядку |
|
|
без пропуску рядка. Бувають випадки, коли виникає необхідність |
|
|
в операції протилежного призначення – заборона перенесення |
|
|
рядка. Текст, поміщений між тегами <NOBR> і </NOBR>, буде |
|
|
гарантовано розташовуватися в одному рядку без переносу в |
|
|
інший. |
|
<PRE> … |
Попередньо відформатований текст - Будь-який фрагмент |
|
</PRE> |
тексту, розташований між тегами <PRE> і </PRE>, розбивається |
|
|
на рядки і абзаци в точній відповідності з тим, як його було |
|
|
введено. Текст всередині контейнера <PRE> залежить від тегів |
|
|
<Р> і <BR> і підтримує теги заголовків. |
|
|
|
|
<HR> |
Даний тег дозволяє провести горизонтальну лінію. |
|
|
|
атрибути тега HR |
|
align вирівнювання: align="left | center | right" |
|
|
|
Встановлює довжину лінії в пікселях або |
|
width процентах від ширини вікна браузера; в |
|
|
size |
останньому випадку додається символ % |
|
встановлює ширину лінії в пікселях |
|
|
noshade |
Відміняє рельєфність лінії (у цього атрбута |
|
|
немає значення) |
|
color |
Вказує колір лінії; використовується назва |
|
кольору або 16-ковий код |
|
|
|
|
|
|
|
Приклад 3. Розглянемо зразок оформлення тексту web-сторінки лініями.
<html> <!--Це файл 3.html-->
<head>
<title>Горизонтальна лінія</title>
</head> <body >
<p> <hr align="center" width="500" size="2" color="#ff0000"> <br> <hr align="left" width="300" size="4" color="#ff9900"> <br > <hr align="right" width="400" size="3" color="#0000dd">
</body>
</html>
На малюнку подано вигляд екрана після відкриття даного файлу в браузері.
Приклад 4. Інший приклад html-лінії:
<html> <!--Це файл 3.html-->
<head>
<title>Горизонтальна лінія</title>
</head> <body > <p>
<hr align="center" width="90%" size="50" color="#dddddd" >
</body>
</html>