- •Уроки html
- •1. Теги, структура html документа
- •Структура html сторінок
- •2. Форматування тексту
- •Шрифти: гарнітура, розмір, колір
- •Оформлення тексту
- •Заголовки
- •Текст у вигляді великого заголовка
- •Текст у вигляді маленького заголовка Теги перенесення рядка і форматування абзацу
- •Вирівнювання тексту
- •3. Списки.
- •Марковані списки
- •Нумеровані списки
- •Вкладені списки
- •Списки визначень
- •4. Таблиці.
- •Створення таблиць
- •Параметри таблиці
- •Параметри комірок
- •Приклад таблиці.
- •5. Зображення
- •Вставка зображення
- •Розміри зображення
- •Рамка довкола зображення
- •Альтернативний текст
- •Вирівнювання зображення
- •Відступи довкола зображення
- •Розбиття зображення на частини
- •6. Властивості сторінки - параметри тега body
- •Колір тексту
- •Колір фону
- •Фонове зображення
- •Колір заслань
- •Vlink - колір відвіданого заслання (visited link).
- •Відступи довкола контента
- •7. Заслання
- •Як зробити текст засланням
- •Як зробити зображення засланням
- •Колір заслань
- •Заслання усередині сторінки
- •Заслання на нове вікно
- •Заслання у фреймах
- •Заслання на адресу електронної пошти
- •8. Форми.
- •Створення форм
- •Текстове поле
- •Поле для пароля
- •Багаторядковий текст
- •Кнопка submit
- •Кнопка reset
- •Прапорці (checkbox)
- •Перемикачі (radiobutton)
- •Поле із списком
- •Кнопка із зображенням
- •Приклад комбінованої форми
- •1. Символьні об'єкти.
- •Що таке символьні об'єкти?
- •Приклади використання
- •Що таке css?
- •Що таке css?
- •Переваги css перед html
- •Css однією дією дозволяє змінювати відразу всю групу параметрів.
- •11 Додавання стилів
- •Внутрішні стилі
- •Глобальні стилі
- •Зв'язані стилі
- •Поєднання різний видів стилів
Уроки html
1. Теги, структура 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. Викладете в особистий каталог, складіть линк (поглянути як) і відкрийте Вашу сторіночку в браузері.