Читайте также:
|
Уроки HTML
Теги, структура HTML документа
· Теги
· Структура HTML сторінок
· Head
· Вправа
Теги
Команди для браузеру, що говорять, як відображувати текст, вставляти таблиці, зображення і інші об'єкти, називаються тегами (від англ. tag - ярлик, ознака).
Самі теги (команди) не відображуються на екрані.
Ім'я тегу пишеться в трикутних дужках, наприклад, <b> - тег, що говорить браузеру записувати весь подальший текст жирним шрифтом.
Им’я тегу можна записувати на будь-якому регістрі (прописними або рядковими буквами), тобто <b> буде сприйняте браузером так само, як і <B>.
Теги бувають парні і непарні.
Наприклад, тег <b> говорить браузеру записувати жирним шрифтом весь подальший текст до команди </b>. В такому разі тег, що дає команду, називають таким, що відкриває, а тег, що відміняє команду, що закриває.
Теги можуть мати параметри (або атрибути).
Наприклад, аби задати колір шрифту, використовується тег font з параметром color:
<font color=green>
- це відкриваючий тег, який командує браузеру з цієї миті відображувати шрифт зеленим (у даному прикладі) кольором до того, що закриває тегу </font>.
Деякі параметри вимагають обов'язкової вказівки їх значень. Для деяких параметрів браузер використовує значення за умовчанням, якщо інші значення не задані.
Якщо тег має декілька параметрів, то вони прописуються через пропуск в будь-якій послідовності. Наприклад:
<font color=green size=3>
<font size=3 color=green>
- два аналогічні записи що відкриває тега font з параметрами color і size.
Структура HTML сторінок
Будь-яка html-сторінка повинна містити наступні обов'язкові теги:
· html - повідомляє браузер, що сторінка написана на мові HTML і рядки до закриваючого тегу є єдиним документом;
· head - між тим, що відкриває і закриваючим тегами поміщається важлива інформація, що описує цей документ;
· body - між тим, що відкриває і закриваючим тегами поміщається вміст сторінки.
Таким чином HTML-документ має наступну структуру:
<html>
<head>
Описание документа (не відображується на самій сторіночці)
</head>
<body>
Содержание (відображується на сторіночці з врахуванням заданої розмітки)
</body>
</html>
Head
Сам розділ не є обов'язковим і служить для розміщення опису документа.
Если він є, то обов'язковим тегом є лише TITLE, вміст якого задає назву документа, що показується зазвичай в заголовку вікна браузеру.
Наприклад, така строчка
<TITLE>1_HTML</TITLE>
задає назву документа "1_HTML", яка в Mozilla Firefox відбиватиметься в заголовку вікна і на закладках (коли відкрито декілька сторіночок):
Вправа
На цьому етапі Ви можете створити сторіночку.
Впишіть назву за допомогою тегу TITLE в розділі head і розмістіть простий текст в розділі body. Наприклад:
<html>
<head>
<TITLE>Страничка 1</TITLE>
</head>
<body>
Моя перша html-страничка:-)
</body>
</html>
Збережете цей текстовий файл з розширенням html. Викладете в особистий каталог, складіть линк (поглянути як) і відкрийте Вашу сторіночку в браузері.
2. Форматування тексту
· Шрифти: гарнітура, розмір, колір
· Оформлення тексту
· Заголовки
· Теги перенесення рядка і форматування абзацу
· Вирівнювання тексту
· Вправа
Шрифти: гарнітура, розмір, колір
За допомогою HTML-розмітки можна написати текст різного зображення (гарнітури), розміру і кольору. Для цього використовується тег <font>, що має декілька параметрів:
· face – для завдання гарнітури
· size – для завдання розміру
· color – для завдання кольору.
Аби задати потрібний шрифт, розмір або колір, необхідно відповідному параметру привласнити потрібне значення:
параметр="значення"
Гарнітура
Наприклад, аби написати текст шрифтом Times New Roman, необхідно вставити перед потрібним текстом тег <font> і привласнити його параметру face значення Times New Roman, а оскільки тег <font> – парний, то після необхідного тексту обов'язково потрібно вставити закриваючий тег:
<font face="Times New Roman">Текст із зображенням Times New Roman</font>
В результаті браузер відображуватиме цей рядок так:
Текст із зображенням Times New Roman
Параметру face можна привласнити декілька значень через кому:
face="Times New Roman, Times, serif"
В такому разі, браузер спочатку спробує відображувати текст шрифтом Times New Roman. Якщо такий шрифт відсутній на комп'ютері користувача, то браузер спробує відображувати текст шрифтом Times і так далі.
Розмір
Аби написати текст розміром 4, необхідно вставити перед потрібним текстом тег і привласнити його параметру size значення 4:
<font size="4">Текст розміру 4</font>
В результаті браузер відображуватиме цей рядок так:
Текст розміру 4
Що ж означає ця загадкова цифра 4?
Параметр size може набувати значень від 1 до 7. Це умовні одиниці. Середній розмір, використовуваний за умовчанням, відповідає size="3".
Отже, розмір тексту 4 – це середній розмір, збільшений на 1 умовну одиницю, а розмір 2 - це середній розмір, зменшений на 1 умовну одиницю і так далі Величина тексту, задана в такий спосіб, називається абсолютною.
Але є і інший спосіб зменшити або збільшити розмір тексту відносно розміру за умовчанням. Для цього потрібно привласнити параметру size значення "-1" або "+1" відповідно. При такому способі завдання розміру величина тексту називається відносною.
Отже, аби отримати розмір тексту 5, можна скористатися двома способами:
<font size="5">Текст розміру 5</font> або <font size="+2">Текст розміру 5</font>
Окрім перерахованих існує ще декілька способів задати розмір тексту.
Збільшити текст можна за допомогою тегу <big>:
<big>Збільшений текст</big>
В результаті браузер відображуватиме цей рядок так:
Збільшений текст
Зменшити текст можна за допомогою тегу <small>:
<small>Зменшений текст</small>
В результаті браузер відображуватиме цей рядок так:
Зменшений текст
Теги <small> і <big> можна повторити кілька разів для посилення ефекту. Наприклад, якщо в результаті рядка:
<big>Великий текст</big>
текст недостатньо великий:
Великий текст
можна написати так:
<big><big>Большой текст</big></big>
І в результаті вийде більший текст:
Великий текст
Колір
Тепер про задання кольору тексту. Аби написати текст червоним кольором, необхідно вставити перед потрібним текстом тег <font> і привласнити його параметру color значення red:
<font color="red">Червоний текст</font>
В результаті браузер відображуватиме цей рядок так:
Червоний текст
Але колір можна задати не лише по назві, але і по цифровому значенню в шістнадцятирічному форматі, який виглядає як знак # і 6 символів (цифри 0-9 і букви латинського алфавіту A-F) після нього.
Наприклад, червоному кольору відповідає шістнадцятирічне значення #FF0000. Тобто написати текст червоним кольором можна двома способами:
<font color="red">Красный текст</font> або <font color="#FF0000">
червоний текст</font>
Тут можна викачати таблицю кольорів, в якій приведені основні кольори, їх назви і відповідні їм шістнадцятирічні значення.
Оформлення тексту
Для оформлення тексту існують наступні теги, іменовані тегами форматування.
Теги <b> і <strong> дозволяють написати жирний текст:
<strong>Жирний текст</strong> або <b>Жирний текст</b>
В результаті обоє цих варіанти в браузері виглядатимуть так:
Дата добавления: 2015-10-02; просмотров: 76 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Відмінювання прикметників | | | Заголовки |