1. HTML–документ. Абзацы, разрывы строк, выравнивание

1 Структура HTML-документа

Исходный код HTML-документа состоит из тегов и содержания.

Содержание предназначено для отображения в окне браузера. Теги определяют его структуру (разметку): какие части являются заголовками, какие абзацами, а какие иными элементами.

У тегов могут быть различные атрибуты с заданными свойствами. В старых версиях языка HTML атрибуты использовались для оформления содержания: установки размера и цвета шрифта, выравнивания текста, установки отступов и другого. Сейчас содержимое HTML-документа принято оформлять с помощью языка CSS.

Любой HTML документ всегда включает контейнеры html, head и body, которые вложены друг в друга следующим образом:

<html>
<head>
…
</head>
<body>
…
</body>
</html>

Задание 1. Создайте файл и задайте ему структуру, которая приведена выше. Сохраните его.

В контейнере head обычно присутствует контейнер title, содержимое которого отображается в заголовке окна документа.

Задание 2. Добавьте в документ контейнер title:

<title>ЭВМ – электронно-вычислительная машина</title>

Сохраните файл и откройте в браузере. Найдите введенное вами содержание title.

Содержимое body отображается в окне браузера.

С помощью тега-контейнера p размечают абзацы. Одиночный тег br позволяет перейти на новую строку без создания нового абзаца, т.е. создает разрыв строки.

Задание 3. Добавьте в контейнер body следующее содержимое:

<p>Появление персональных компьютеров в начале семидесятых годов (параллельно с постепенной эволюцией крупных ЭВМ) сейчас расценивают как революционный переворот. Масштабы его влияния на человеческое общество сравнивают с последствиями от изобретения книгопечатания.</p>
<p>В мире уже сейчас имеются миллионы и миллиарды ЭВМ. <br/>Их число продолжает неуклонно расти!</p>

Сохраните. Обновите документ в браузере. Отметьте, сколько абзацев вы видите, где находится разрыв строки.

2 Выравнивание абзацев. Старый стиль

Выравнивание абзацев определяется значениями left (по левому краю), right (по правому), center (по центру) и justify (по ширине). Эти значения могут быть присвоены свойству align (выравнивание), которое допустимо для многих тегов.

Так, например, выравнивание абзаца по центру можно задать так:
<p align="center"> …

Задание 4. Для созданных ранее абзацев задайте выравнивание по ширине (для первого абзаца) и по правому краю (для второго).

3 Использование языка CSS

Абзацы правильнее выравнивать с помощью CSS (языка описания внешнего вида HTML-документа). Для этого в отдельном файле или контейнере head определяют стили оформления для различных элементов. Например, раздел head может содержать такой контейнер style:

<style type="text/css">	
	.rt {text-align:right;}
	.jtf {text-align:justify;}
</style>

Далее следует указать желаемые стили для абзацев. Точка говорит о том, что мы имеем дело с классом. Следовательно, в теге p должно быть записано, например, так:
<p class="rt">…

Задание 5. Удалите ранее добавленный атрибут align у абзацев. Выровняйте абзацы, используя язык CSS.

Результат практической работы

<html>
 
<head>
 
<title>ЭВМ – электронно-вычислительная машина</title>
 
<style type="text/css">
	.rt {text-align:right;}
	.jtf {text-align:justify;}
</style>
 
</head>
 
<body>
<p class="jtf">Появление персональных компьютеров в начале семидесятых годов (параллельно с постепенной эволюцией крупных ЭВМ) сейчас расценивают как революционный переворот. Масштабы его влияния на человеческое общество сравнивают с последствиями от изобретения книгопечатания.</p>
<p class="rt">В мире уже сейчас имеются миллионы и миллиарды ЭВМ. <br/>Их число продолжает неуклонно расти!</p>
</body>
 
<html>