- •Методичні рекомендації до виконання практичної роботи №1 в цьому розділі розглянуті головні теги html коду. Описано структуру документу та можливості редагування тексту.
- •1.1. Основні поняття
- •1.2. Створюємо перший html-документ
- •1.3. Структура документу
- •1.3.1. Розділ head. Технічна інформація про документ
- •1.3.2. Розділ body. Основна частина документу
- •1.4. Форматування окремих символів
- •1.4.1. Робота з текстом
- •1.4.2. Виведення тексту заданим шрифтом
- •1.5. Форматування документу
- •1.5.5. Заголовки
- •1.5.6. Розподіл на абзаци
- •2.2.1. Вставляємо зображення в Web-сторінку
- •2.2.2. Використовуємо зображення як фон
- •2.3. Гіперпосилання
- •2.3.1. Зовнішні гіперпосилання
- •Абсолютна url-адреса
- •Відносна url-адреса
- •2.3.2. Внутрішні гіперпосилання
- •2.3.3. Гіперпосилання на адресу електронної пошти
- •Що містить абсолютна url-адреса?
1.4. Форматування окремих символів
Як уже говорилося, HTML - це мова розмітки. Отже, важливо вміти форматувати окремі символи, а також цілі фрагменти тексту. Але перш ніж вивчати теги, розглянемо можливість відображення спеціальних символів. Такими символами, наприклад, є знаки менше ( < ) і більше (>), тому що за допомогою цих символів описуються HTML-теги. Для цього використовуються так звані HTML-еквіваленти. Наприклад, для виведення такого тексту
Текст між тегами <TITLE> і </TITLE> використовується в результатах, що видається пошуковим порталом.
необхідно написати так:
Текст між тегами <TITLE> і </TITLE> використовується в результатах, що видається пошуковим порталом.
У цьому прикладі ми замінили знак менше (<) на <, а знак більше (>) на > Перелічимо найбільш часто використовувані HTML-еквіваленти:
< - знак менше ( < );
> - знак більше (>);
& amp; - амперснд (&);
& nbsp; - нерозривний пробіл;
& quot; - лапка (‘);
& copy – знак авторських прав;
& reg – знак зареєстрованої торгової марки;
& екфву – торгова марка.
1.4.1. Робота з текстом
1.4.2. Виведення тексту заданим шрифтом
Тег <FONT> визначає розмір, тип і колір шрифту. Має наступні параметри:
· face - призначений для зазначення типу шрифту. Може вказати як один, так і кілька типів, розділяючи їх комами. При цьому список шрифтів проглядається зліва направо. Зазначена назва повинна точно відповідати назві типу шрифту. Якщо шрифт не знайдений на комп'ютері користувача, то використовується шрифт за умовчанням;
· size - служить для зазначення розміру шрифту в умовних одиницях від 1 до 7. Розмір, використовуваний Web-браузером за замовчуванням, прийнято прирівнювати до 3. Розмір шрифту можна вказувати як цифрою від 1 до 7, так і у відносних одиницях вказуючи, на скільки одиниць потрібно збільшити (знак «+») або зменшити (знак «+») розмір шрифту щодо базового;
· color - призначений для вказівки кольору шрифту. Колір визначається цифрами в шістнадцятковому коді. Для кожного кольору (червоного, зеленого і синього) задається значення в межах від 00 до FF . Ці значення, об'єднуються в одне число, перед яким додається символ «#», наприклад, значення # FF 0000 відповідає червоному кольору.
Основні кольори:
1.5. Форматування документу
Практично всі теги, розглянуті в попередньому розділі, є тегами фізичного форматування. Виняток складають теги <STRONG> і <EM>. Ці теги є тегами логічного форматування тексту і використовуються для виділення дуже важливих і просто важливих фрагментів відповідно. Теги логічного форматування використовуються для структурної розмітки і можуть відображатися різними Web-браузерами по-різному. Перелічимо основні теги логічного форматування:< CITE >…</ CITE > - применяется для отметки цитат, а также названий произведений;
< CODE >…</ CODE > - слугує для відмітки фрагментів програмного коду;
< ARCONYM >…</ ARCONYM > - використовується для позначки абревіатур;
< KBD >…</ KBD > - зазначає фрагмент як такий, що вводиться користувачем з клавіатури;
< Q >…</ Q > - використовується для позначки коротких цитат;
< SAMP >…</ SAMP > - застосовується для відмітки результату видаваного програмою;
< VAR >…</ VAR > - зазначає імена змінних.
1.5.1. Тег коментаря
Текст, що знаходиться м і ж тегами <!— та à , не відображається Web-браузером..
<!-- Текст -->
ПОРАДА: Використання коментарів у вихідному коді дозволить швидко знайти потрібний фрагмент. Це особливо важливо для починаючих Web-дизайнерів.
1.5.2. Переведення рядка
Для поділу рядків використовується одинарний тег <BR>.
Якщо в HTML-документі набрати текст:
Рядок1
Рядок2
Рядок3
то Web-браузер відобразить всі в один рядок «Рядок1 Рядок2 Рядок3». Для того щоб рядки розташовувалися один під одним, необхідно додати тег <BR> в кінці кожного рядка:
1.5.3. Заборона переведення рядка
Для заборони перенесення рядка використовується тег <NOBR>. За допомогою цього тега можна отримати дуже довгі рядки. Якщо рядок буде виходити за межі вікна Web-браузера, то з'явиться горизонтальна смуга прокрутки.
<NOBR>Довгий рядок</NOBR>
1.5.4. Горизонтальна лінія
Одинарний тег <HR> дозволяє провести горизонтальну лінію.
Тег <HR> має параметри:
· size – задає товщину лінії;
· width - задає довжину лінії. Можна вказувати значення як в пікселях, так і у відсотках щодо ширини вікна Web-браузера;
· color – слугує для вказівки кольору лінії;
· align – задає вирівнювання лінії. Параметр може приймати такі значення:
· center – вирівнювання по центру (значення за замовчуванням);
· left – вирівнювання по лівому краю;
<HR size="2" width="200" color="red">
· right – вирівнювання по правому краю.
<HR size="2" width="200" color="red">
· NOSHADE – присутність цього параметра скасовує рельєфність лінії.
<HR size="2" width="200" NOSHADE>
