- •Введение
- •Тема 1. «структура html-документа. Форматирование текста. Создание простой web-страницы»
- •Структура html-документа
- •Листинг 1
- •Структура html-элемента Атрибуты
- •Тело документа
- •Определение цветов
- •Элементы h1, h2, h3, h4, h5, h6
- •Листинг 2
- •Листинг 3.
- •Работа с текстом
- •Вставка изображений
- •Контрольные вопросы:
Элементы h1, h2, h3, h4, h5, h6
Структурирование тела документа выполняется внутри элемента <body> с помощью заголовков, задаваемых элементами H1, H2, H3, H4, H5, H6.
Элементы заголовков являются парными, поэтому должны имеет открывающий <H1> и закрывающий </H1> теги.
HTML располагает шестью уровнями заголовков: Н1 (самый верхний), H2, H3, H4, H5 и Н6 (самый нижний). Функции элементов заголовков подобны обычным стилям заголовков в текстовых редакторах.
Задание 2.
Из CD скопируйте папку library в папку WEB_Ваша фамилия.
Создайте HTML-документ, в котором введите текст из листинга 2.
В папку Lab_1 cохраните документ под именем elementH.html
Запустите файл elementH.html
На рис. 4 показано, как разные уровни заголовков выводятся броузером Internet Explorer.
Листинг 2
Рис. 4. Разные уровни заголовков
Задание 3
Создайте новый HTML-документ.
Введите текст из листинга 3 (для фона можете использовать любое изображение или любой цвет из папки colors).
В папке Lab_1 Сохраните документ под именем align.html
Запустите файл align.html
Ваш документ должен выглядеть примерно так, как показано на рис. 5.
Листинг 3.
Рис. 5. Выравнивание заголовков
Работа с текстом
Разделение текста на абзацы
Тег <p> задает начало абзаца и вставляет отступ для отделения данного абзаца от предыдущего. Парный тег можно опустить. Тег абзаца имеет только один атрибут align.
align=”left” – выравнивание абзаца по левому краю текста (значение по умолчанию).
align=”right” – выравнивание абзаца по правому краю текста.
align=”center” – центрирование абзаца.
align=”justify” – выравнивание абзаца по ширине.
Принудительный разрыв строки
Тег <br> позволяет выполнить перенос оставшейся части текста абзаца на следующую строку. Это непарный тег и в отличие от тега абзаца не увеличивает интервал между строками.
Изменение шрифта
Тег <font> и </font> позволяет изменить для фрагмента текста тип, размер и цвет шрифта.
Атрибуты тега <font>
Таблица 4
size |
Атрибут size=”n” используется для задания абсолютного размера между 1 и 7. size=”+n” или –n – увеличивает или уменьшает шрифт относительно текущего значения. |
face |
Атрибут face=”ИМЯ” – задает гарнитуру шрифта, используемого для отображения данного фрагмента текста. Можно через запятую задать несколько имен шрифтов, которые броузер ищет в локальной системе. Использоваться будет тот, чье имя найдено первым. |
color |
Атрибут color=”Значение” задает цвет текста. |
Начертания шрифтов
Тег <b>…</b> – позволяет отобразить текст полужирным шрифтом.
Тег <i>…</i> – позволяет отобразить текст в курсивном начертании.
Тег <u>…</u> – отображает подчеркнутый текст.
Например:
В этом случае текст будет отображен <b><i>жирным курсивом</i></b>, но не подчеркнутым.
А в этом случае текст будет написан <b><i><u>жирным подчеркнутым курсивом</u></i></b>.
