Особенности гипертекста
Основная
особенность гипертекста – возможность получать сложные эффекты
форматирования простыми и наглядными способами.
Преимущества вложения элементов – основное отличие HTML от многих других
языков программирования. Любой элемент допускает непосредственное
вложение только ряда элементов, которые, в свою очередь допускают
вложение других, разрешенных для них, и т.д.
Все элементы HTML делятся условно на три группы:
а) элементы, создающие структуру гипертекстового документа. Их
использование – неукоснительно соблюдается.
б) элементы, содержащие эффекты форматирования, применение которых
предусматривается конкретными требованиями к документу и желанием
разработчика.
в) элементы, позволяющие упростить программу средствами, установленными
на компьютере клиента.
Язык постоянно дополняется новыми элементами (расширяется).
Структура документа
Замечания.
При рассмотрении элементов HTML будем приводить стартовые и конечные
теги. Число случаев, когда допустимы только стартовые теги невелико, их
будем специально оговаривать.
Для имен тегов можно использовать строчные и прописные буквы латинского
алфавита.
Основные проблемы при изучении HTML – определение набора атрибутов и их
значений.
Документы (WEB-страницы) создаются по определенным правилам. Рассмотрим
общие принципы построения HTML-страниц.
- Все страницы состоят из элементов;
- Между стартовыми и конечными тегами элементов
помещается текст;
- В стартовых тегах можно указать только определенные
атрибуты;
- Только определенные элементы могут быть вложены в
другие.
Стандартные элементы HTML
- <HTML> … </HTML> - Определяет начало и конец документа.
- <HEAD> … </HEAD - Определяет начало и конец заголовка. (Эта информация не выводится на экран).
- <TITLE> … </TITLE> - Между тэгами указывается название текущей страницы, которое располагается в верхней рамке окна просмотра браузера.
- <BODY> … </BODY> - Определяет начало и конец тела документа
Атрибуты тега BODY:
- BGCOLOR=”…” - Определяет цвет фона
- BACKGROUND=”…”-Определяет файл для фона
- TEXT=”…” - Задает цвет текста
- LINK=”…” - Задает цвет ссылок
- VLINK=”…” - Задает цвет ссылок, где пользователь уже побывал
- ALINK=”…” - Задает цвет активной гиперссылки.
<!…>
<COMMENT> … </COMMENT> Используется для вставки комментариев
Пример: <BODY BGCOLOR=”blue”
Заголовки разного размера, всего 6 размеров
<H1> … </H1> H1 – самый большой заголовок
<H2> … </H2>
<H3> … </H3>
<H4> … </H4>
<H5> … </H5>
<H6> … </H6
Атрибуты заголовка:
ALIGN=”LEFT” - Выравнивание влево
ALIGN=”RIGHT” - Выравнивание вправо
ALIGN=”CENTER” - Выравнивание по центру
<HR> - Разделитель. Горизонтальная линия, идущая через весь экран.
Атрибуты тега HR:
SIZE=”…” Определяет толщину линии ( в пикселах )
WIDTH=”…” Определяет длину линии ( в пикселах или в процентах от ширины
)
COLOR=”…” Определяет цвет линии
ALIGN=”…” Выравнивание по ширине
Значения атрибута ALIGN:
- Left - Выравнивание влево
- Center - Выравнивание по центру
- Right - Выравнивание вправо
- Justify - Выравнивание по ширине
<P>…</P> - Абзац. Определяет начало и конец абзаца текста.
Атрибут абзаца:
- ALIGN=”LEFT” - Выравнивание влево
- ALIGN=”RIGHT” - Выравнивание вправо
- ALIGN=”CENTER” - Выравнивание по центру
<font> фрагмент текста </font> -
Определяет параметры фрагмента текста.
Атрибуты:
- COLOR = “ЦВЕТ"
- FACE = “шрифт”
- SIZE = “РАЗМЕР”
Будем рассматривать
создание сайта на примере школьного сайта
"Поход на Вуоксу".
Ниже представлен пример листинга исходного кода файла первой
Web-стрвнички сайта "Вуокса" Page1.htm в
браузере.
Кликнув по ссылке, вы можете перейти на данную
Web-страницу.
<HTML>
<HEAD>
<TITLE>Вуокса </TITLE>
</HEAD>
<BODY bgcolor="green">
<h2>
<a href="#конец страницы">ВНИЗ</a>
<a name="начало страницы"></a>
<font size=10 color="red">
<center>Поход на Вуоксу</center></h2></font>
<br> <hr>
<font face="Arial" size=5 color="yellow">
<p>Школьники из Санкт-Петербурга желают поехать на
Вуоксу.</p>
<p>Там мы хотим снять видеофильм,осмотреть острова около
Приозерска,сплавиться на байдарке по реке Вуокса. </p>
<p align=center>Мы предполагаем интересно провести время. </p>
<p align=center> Будет весело и здорово!</p>
<p align=right>Мы берем с собой магнитофон, гитару, видеокамеру</p>
<p align=right>фотоаппараты, плейеры и другую аппаратуру.</p>
</font>
<hr>
Приглашаем спонсоров, рекламодателей, активных попутчиков.
<image src="Tour.jpg"
alt="водные просторы">
<a name="конец страницы"></a>
<a href="#начало страницы">ВВЕРХ</a>
</BODY>
</HTML>
Здесь вставлено изображение «Tour.jpg». Различные абзацы выравнены по левому и правому краю и по центру. Использованы различные шрифты, переход в конец страницы по гиперссылке ВНИЗ, переход в начало страницы по гиперссылке ВВЕРХ. Об этих ТЭГ-ах подробнее далее. Можно подобрать картинку в Internet или из имеющихся на компьютере.
 |
 |
 |
