Создание Web-страницы с помощью языка HTML
Язык HTML существует в нескольких вариантах и продолжает развиваться,
но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже,
создавая документ в начале изучения HTML и расширяя его насколько это возможно,
мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web,
как сейчас, так и в будущем.
Структура HTML документа
Поскольку HTML-документы записываются в ASCII-формате, то для
ее создания может использован любой текстовый редактор.
Обычно HTML-документ - это файл с расширением .html или .htm, в котором текст размечен
HTML-тегами (англ. tag - специальные встроенные указания). Средствами HTML задаются синтаксис и
размещение тегов, в соответствии с которыми браузер отображает содержимое Web-документа. Текст самих тегов
Web -браузером не отображается.
Все теги начинаются символом ´<´ и заканчиваются символом ´>´. Обычно имеется
пара тегов - стартовый (открывающий)
и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми
помещается размечаемая информация:
<p>Информация</p>
Здесь стартовым тегом является тег <P>, а завершающим - </P>. Завершающий тег отличатся от стартового лишь
тем, что у него перед текстом в скобках <> стоит символ '/' (слэш).
Браузер, читающий HTML-документ, отображает его в окне, используя структуру HTML-тегов. В каждом
HTML-документе должны присутствовать три главных части:
Объявление HTML;
Заголовочная часть;
Тело документа.
В начало
Объявление HTML
<HTML> и </HTML>. Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен
документ в формате HTML, причем первым тегом в документе должен быть тег <HTML> (в самом начале документа),
а последним - </HTML> (в самом конце документа).
<HTML>
.
.
.
</HTML>
В начало
Заголовочная часть
<HEAD> и </HEAD>. Между этими тегами располагается информация о документе
(название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа,
которое мы видим в верхней строке окна браузера и в списках "Избранное (BookMark)".
Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных.
Для того чтобы дать название своему HTML-документу текст помещается между тегами <TITLE> и </TITLE>.
<HTML>
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
</HTML>
В начало
Тело документа
Третьей главной частью документа является его тело. Оно следует сразу за заголовком и
находится между тегами <BODY> и </BODY>. Первый из них должен стоять сразу
после тега </HEAD>, а второй - перед тегом </HTML>. Тело HTML-документа - это место,
куда автор помещает информацию, отформатированную средствами HTML.
<HTML>
<HEAD>
<TITLE> Моя первая страница
</HEAD>
<BODY>
......................................
</BODY>
</HTML>
Теперь мы можем написать HTML-код нашей странички:
<HTML>
<HEAD>
<TITLE>Моя первая страница
</HEAD>
<BODY>
Здесь будут мои страницы!
</BODY>
</HTML>
В начало
Форматирование текста
В разделе BODY все символы табуляции и конца строк браузером игнорируются и никак не влияют
на отображение страницы. Поэтому перевод строки в исходном тексте HTML-документа не приведет к
началу новой строки в отображаемом обозревателем тексте при отсутствии специальных тегов.
Это правило очень важно помнить и не забывать ставить разделяющие строки теги, иначе у текста не
будет абзацев, и он станет нечитаемым.
Для начала новой строки используется тег <BR> (сокр. от англ. break - прервать).
Этот тег приводит к отображению браузером дальнейшего текста с начала следующей строки.
Закрывающий для него тег не используется. Он удобен, если требуется с какого-то места писать с
новой строки без начала нового абзаца, например, в стихотворении. Повторное его использование позволяет
вставить одну или несколько пустых строк, отодвинув следующий фрагмент страницы вниз.
Сплошной текст без промежутков читается не очень легко, его неудобно просматривать и находить нужные места.
Разбитый на абзацы, текст воспринимается гораздо быстрее. Для начала нового абзаца используется тег <P>
(англ. paragraph - абзац). Этот тег, кроме начала новой строки, вставляет одну пустую строку.
Но многократное повторение <P>, в отличие от <BR>, не приведет к появлению нескольких пустых строк,
останется все та же одна пустая строка.
Внутри скобок тега кроме его названия могут размещаться также атрибуты (англ. atributes - атрибуты).
Они отделяются от названия и между собой пробелами (одним или несколькими), а пишутся в виде имя_атрибута="значение".
Если значение не содержит пробелов, то кавычки могут быть опущены, но так делать не рекомендуется. Тег <P>
может содержать атрибут ALIGN, определяющий выравнивание абзаца. По умолчанию абзац выравнен влево ALIGN="left".
Возможны также выравнивания вправо ALIGN="right" и по центру ALIGN="center". При использовании атрибутов,
после форматируемого текста следует использовать закрывающий тег </P>. Если его нет, то новый тег <P>
означает закрытие предыдущего, соответственно вложенные <P> невозможны. Выравнить текст по центру возможно
также тегом <CENTER>.
Теперь мы можем поместить на нашу Web-страницу некоторый текст с различным выравниванием:
<HTML>
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
<BODY>
<P align=center>Здесь будут мои личные страницы!
<P align=left>На них Вы сможете найти:<BR>- рассказ обо мне и о моих увлечениях;<BR>-мои фотографии.
<P align=right>С одной из моих страниц можно будет<BR>отправить мне электронное письмо.
</BODY>
</HTML>
Кроме использования этих тегов, для разрыва строк возможно использование
символов конца строк и табуляций в самом HTML-документе.
Для этих целей существует тег <PRE>. Весь текст, помещенный между
тегами <PRE> и </PRE> будет выводиться без изменений,
то есть со всеми концами строк и табуляциями.
Например:
<PRE>Это текст написан
в две строки.</PRE>
В начало
Горизонтальные разделительные линии
В HTML-документе, кроме текста, могут содержаться горизонтальные разделительные линии.
Они, как и текст, не требуют никаких внешних файлов. Тег <HR> выведет горизонтальную линию
единичной толщины вдоль всей ширины страницы. Горизонтальная разделительная линия всегда
приводит к разрыву строки, но пустых строк между линией и текстом не появляется. Тег <HR> может
содержать несколько атрибутов. <HR SHADE> и <HR> дают контурную линию с трехмерным эффектом углубления.
<HR NOSHADE> дает сплошную черную линию. Линия может не простираться во всю ширину страницы, а составлять
лишь некоторую часть. Атрибут WIDTH задает ширину линии, в процентах от ширины всей страницы или в пикселях.
Например, 50% - половина ширины страницы, 400 - ширина в 400 пикселов. Атрибут ALIGN может принимать значения,
аналогичные его значениям для тега <P>, но выравнивание по умолчанию - по центру. Атрибут SIZE задает толщину
линии в пикселях от 1 до 175; по умолчанию 1, но если <HR SHADE>, (линия - контурная), то добавляется толщина,
необходимая для трехмерного эффекта углубления.
Линии, наряду с абзацами, позволяют выделить логические фрагменты текста. Но большое количество горизонтальных
линий неприятно для посетителя вашей Web-страницы, поэтому после каждого абзаца их ставить не следует.
Они больше подходят для выделения целых разделов.
В начало
Вопросы для самоконтроля
- Какие редакторы используются для записи HTML кода?
- Что называют тегом?
- С помощью какого программного средства можно просмотреть web-страницу?
- Какой тег сообщает программе что между ними заключен документ в формате HTML?
- <HEAD> и </HEAD>. Какая информация располагается между этими тегами?
- Что называют телом документа и какими тегами его обозначают?
- Какие теги для форматирования текста вы знаете?
В начало
МБОУ г.Кургана "Средняя общеобразовательная школа №45" © 2015 - 2016