- •Створення простої web-сторінки
- •Вступ в мову html
- •Структура html-документа
- •Встановлення кольору тексту
- •Встановлення кольору фону
- •Параграф
- •Створення заголовка
- •Питання для самоконтролю
- •Графіка I посилання на web-сторінці Вставка малюнків
- •Посилання
- •Відступи
- •Комплексна лабораторна робота "створення html-файла"
- •Оформления таблиць
- •Вирівнювання вмicту комірок
- •Форматування комірок
- •Підсумкова лабораторна робота "власна web-сторінка"
- •Список літератури
Структура html-документа
Bci HTML-документа будуються за визначеними правилами:
текст документа починаеться тегом <HTML> i заюнчуеться тегом </HTML>;
всередині контейнера <HTML> знаходяться ще два контейнери <HEAD> (заголовок Web-сторінки) і <BODY> (її вміст);
всередині; контейнера <HEAD> знаходяться інші контейнери, серед них <TITLE> (рядок символів заголовка вікна броузера).
Web-сторінка зберігається в текстовому файл з розширенням HTML або НТМ.
Наприклад, закінчений HTML-файл може мати такий вигляд:
<html>
<head>
<title>Mій перший крок</title>
</head>
<body>
Привіт, це моя перша сторінка.
</body>
</htmlt>
Треба набрати цей текст будь-яким редактором (наприклад, "Блокнот"), зберегти його з довільним іменем, але обов'язково з розширенням .html або .htm (наприклад, prikladl.html). Якщо тепер відкрити програму Internet Explorer i виконати команду "Файл" -> "Открыть" -> кнопка "Обзор..." -> prikladl.html, на екрані броузера цей HTML-файл буде мати наведений вигляд (Рисунок 1) (зверніть увагу на розташування текстів "Мій перший крок" i "Привіт, це моя перша сторінка").
Рисунок 1. Результат виконання файлу prikladl.html
При відображенні HTML-файла броузером зайві пропуски ігноруються. Якщо розділити два слова трьома пропусками, то на екрані між словами залишиться один пропуск, а кілька порожніх рядків на екрані броузера будуть замінені на один. Коли текст досягає правої границі вікна, він автоматично переходить на новий рядок.
Все, що розташовано між тегами <head> </head>, - це службова інформація.
Все, що розташовано між тегами <body> </body>, - це безпосередній вміст документа.
Встановлення кольору тексту
#000000 |
Чорний |
#000080 |
Темно-синій |
#0000FF |
Блакитний |
#800080 |
Пурпуровий |
#FF00FF |
Бузковий |
#FF0000 |
Червоний |
#808080 |
Сірий |
#C0C0C0 |
Срібний |
#008000 |
Зелений |
#008080 |
Темно-зелений |
#00FF00 |
Яскраво-зелений |
#FFFFFF |
Білий |
#800000 |
Каштановий |
#FFFF00 |
Жовтий |
Наведемо кілька базових кольорів HTML.
Щоб задати колір для всього документа, треба дати відповідну команду в <body>. Наприклад, так:
<body text="#336699">
Teг <font></font> - багатофункціональний. За його допомогою можна задавати не тільки колір тексту в конкретній частині документа, але й розмір i вид шрифту (про це далі).
Встановлення кольору фону
Колір фону встановлюється за допомогою знайомого тега <body>. Наприклад, чорний фон встановиться командою:
<body bgcolor="#000000">
Якщо колір в <body> не вказувати, то з мовчазної згоди він буде білим (або будь-яким іншим). Тому краще колір фону встановлювати, щоб не було не передбачуваного кольору фону.
Спробуйте до попереднього HTML-файла за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad2.html:
<html>
<head>
<ы1е>Мій перший крок</title>
</head>
<body text="#336699" bgcolor="#FFFFFF">
Привіт, це моя перша сторінка.
<br>
<font со1ог="#ССОООО"> Ласкаво просимо! </font>
</body>
</html>
Зверніть увагу: в тезі <body> одночасно встановлюється колір тексту документа i колір фону.
Це означає, що весь текст сторінки буде сірим, крім тексту, для якого спеціально встановлёно інший колір. Якщо колір тексту в <body> не задавати, то "з мовчазної згоди" він буде чорним.
Рекомендується за допомогою броузера переглянути цей HTML-файл, для чого досить двічі клацнути на його піктограмі, можна встановлювати інші кольори для тексту i фону, спостерігати результат.
Якщо змін не видно, то це означає, що зміни внесені неправильно, або ви забули зберегти документ.
Можна переглянути за допомогою броузера HTML-файл, двічі клацнувши на його піктограмі