Заголовок
Первый абзац
Второй абзац
Заголовок второго уровня
Следствием наличия специального тега, определяющего абзац, является тот факт, что обычного символа конца строки, вводимого по нажатию клавиши ENTER, для создания абзацного отступа недостаточно. Язык HTML рассматривает символы конца строки и пробелы особым образом. Любая последовательность, состоящая только из пробелов и символов конца строки, при отображении документа рассматривается как одиночный пробел. Это, в частности, означает, что символ конца строки даже не осуществляет перехода на новую строку (для этой цели используется текстовый элемент, задаваемый непарным тегом <BR>).
7. С помощью тега <font> можно изменить параметры шрифта. Для тега используются следующие параметры: face, size и color.
8. Параметр Face служит для задания гарнитуры шрифтов использующихся для текста. Названий шрифтов можно указать несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден, будет использоваться следующий по списку.
Пример 3. Использование параметра face
<font face="Arial, Helvetica, sans-serif'>Текст будет написан шрифтом Arial.</font>
9. Size задает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size=4), так и относительной (например, size=+1, size=-1). В последнем случае размер изменяется относительно базового.
Пример 4. Задание размера шрифта
<font size=1>Шpифт размера 1</font><br>
<font size=2>Шpифт размера 2</font><br>
<font size=3>Шpифт размера 3</font><br>
<font size=4>Шрифт размера 4</font><br>
<font size=5>Шрифт размера 5</font><br>
<font size=6>Шрифт размера 6</font><br>
<font size=7>Шрифт размера 7</font><br>
Шpифт размера 1 Шpифт размера 2 Шpифт размера 3 Шрифт размера 4 Шрифт размера 5 Шрифт размера 6 Шрифт размера 7
10. Color определяет цвет текста, который можно задавать с помощью названий цветов или в шестнадцатеричном формате.
Пример 5. Изменение цвета текста
<font size=5 color=red face=Arial>П</font>ервая буква этого предложения будет написана шрифтом Arial, красным цветом и увеличенной.</font>
Первая буква этого предложения будет написана шрифтом Arial, красным цветом и увеличенной.
11. Видоизменение текста - средства его форматирования, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В таблице перечислены основные теги, которые применяются для изменения оформления текст
Таблица 2.1-Теги, используемые для оформления текста
Код HTML | Описание | Пример |
<b>Текст </b> | Жирный текст | Текст |
<i>Текст</i> | Курсивное начертание текста | Текст |
<u>Текст</u> | Подчеркнутый текст | Текст |
<sup>Текст</sup> | Верхний индекс | e=mc2 |
<sub>Текст</sub> | Нижний индекс | H2O |
<strike>Текст</strike> | Зачеркнутый текст | |
<pre>Текст</pre> | Текст пишется как есть, включая все пробелы | Текст |
<em>Текст</em> | Курсивный текст | Текст |
<strong>Текст</strong> | Жирный текст | Текст |
Обычно для создания верхнего или нижнего индекса используется тег small, делающий индекс меньше по размеру основного шрифта.
Пример 6. Создание нижнего индекса
<b>Формула серной кислоты:</b>
<i>H<sub><small>2</small></sub>SO<sub><small>4</small></sub></i>
Формула серной кислоты: H2SO4
12. Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому, правому краю, по центру или по ширине.
Таблица 2.2 – Теги, используемые для выравнивания текста
Код HTML | Описание | Пример |
<p>Текст</p> | Добавляет новый параграф, по умолчанию выровненный по левому краю. Перед параграфом автоматически добавляется пустая строка. | Текст |
<p align=left>Текст</p> | Выравнивание по левому краю. | Текст |
<p align=right>Текст</p> | Выравнивание по правому краю. | Текст |
<p align=center>Текст</p> | Выравнивание по центру. | Текст |
<p align=justify>Текст</p> | Выравнивание по ширине. | Текст по ширине |
13. Вставка изображений в html-страницы
Для встраивания изображения в документ используется тег IMG, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой.
Файл с рисунком, изображенным ниже, называется sample.gif и размещается в папке images корня сайта.
Для указания адреса изображения можно задавать как абсолютный, так и относительный адрес.
Пример 7. Вставка изображения в документ
<html>
<body>
<img src="http://www.htmlbook/images/sample.gif'> - это абсолютный адрес размещения изображения
<img src="/images/sample.gif''> - адрес размещения изображения относительно корня сайта
<img src="images/sample.gif''> - адрес размещения изображения относительно текущего HTML-документа
</body>
</html>
14.Выравнивание изображений
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега IMG. В таблице перечислены возможные значение этого параметра и результат его использования.
Таблица 2.3 – Теги, используемые для выравнивания изображения в тесте
Код HTML | Описание |
<img src="HLPBELL.GIF" align=texttop> | Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки. |
<img src=HLPBELL.GIF align=top> | Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. |
<img src=HLPBELL.GIF align=middle> | Выравнивание середины изображения по базовой линии текущей строки. |
<img src=HLPBELL.GIF align=absmiddle> | Выравнивание середины изображения по средине текущей строки. |
<img src=HLPBELL.GIF align=baseline> | Выравнивание изображения по базовой линии текущей строки. |
<img src=HLPBELL.GIF align=bottom> | Выравнивание нижней границы изображения по окружающему тексту.. |
<img src=HLPBELL.GIF align=left> | Выравнивает изображение по левому краю окна. |
<img src=HLPBELL.GIF align=right> | Выравнивает изображение по правому краю окна. |
15. Наиболее популярные параметры - left и right, создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге IMG добавить параметр hspace и vspace, задающих расстояние до текста в пикселах.
Пример 8: Обтекание текста вокруг рисунка
<html>
<body>
<img src="HLPBELL.GIF" width=40 height=40 hspace=5 vspace=5 align=left>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrad exerci tution ullamcorper suscipit lobortis nisi ut aliquip ex ea commodo consequat.
</body>
</html>
Задание:
1. Оформите текст, как показано ниже:
Октябрь уж наступил,
Уж роща отряхает
Последние листы
С нагих своих ветвей.
Дохнул осенний хлад,
Дорога промерзает,
Журча, еще бежит
За мельницу ручей
2.Выровняйте рисунки и текст так, как показано ниже:
Этот рисунок находится слева и текст выравнивается по левой границе. Эффект достигается без таблицы
Этот рисунок находится слева и текст выравнивается по центру. Эффект достигается без таблицы
Этот рисунок находится справа и текст выравнивается по правой границе. Эффект достигается без таблицы
Контрольные вопросы:
Что такое HTML?
Структура HTML-документ?
Функциональные блочные элементы?
Теги, используемые для выравнивания текста?
Теги, для вставки изображения в html-страницу?
Обтекание текста вокруг рисунка.
- Лабораторная работа №1 Тема: Текстовое оформление страниц
- Заголовок
- Лабораторная работа №2 Тема: Создание гипертекстовых ссылок
- 5. Ссылка на новое окно
- Лабораторная работа №3 Тема: Создание списков. Нумерованные списки
- Лабораторная работа № 4 Тема: Создание таблиц
- Лабораторная работа №5 Тема: Создание фреймов
- Лабораторная работа № 6
- Тема: Создание Web-сайтов средствами ms Office.
- Цель работы: Научиться создавать Web-сайт средствами ms Office: ms Word, ms Excel, ms PowerPoint.
- Разработка Web-сайта средствами ms Word.
- Разработка Web-сайта средствами ms Excel
- Создание Web-страниц средствами PowerPoint
- Лабораторная работа № 7 Тема: Создание web-страницы
- Лабораторная работа №8 Тема: Использование Microsoft FrontPage для редактирования web-узла
- Лабораторная работа № 9 Тема: Регистрация web-сайта, его публикация в сети Интернет, регистрация в поисковых системах