HTML - язык разметки гипертекста.
Создание Web – страниц.
Прежде чем создавать свои собственные HTML-страницы, следует разобраться в их
структуре и функционировании. Конечно, существуют специальные редакторы, такие
как FrontPage, Dreamweaver и другие, которые позволяют создавать Web-страницы, используя метод WYSIWYG (What You See Is What You Get), но для того, чтобы уметь
профессионально подготавливать гипертекстовые документы, необходимо знать код HTML-документа. Язык HTML позволяет формировать различную
гипертекстовую информацию на основе структурированных документов, а браузер
определяет сформированные ссылки и, через протокол передачи гипертекста HTTP, открывает
доступ к документу другим пользователям Internet.
Для создания Web-страниц необходим текстовый редактор, позволяющий сохранять
файлы в ASCII коде, а это означает, что HTML-документ не содержит каких-либо знаков форматирования
текста. Он может содержать только буквы, цифры, знаки препинания и некоторые другие печатные символы. Самым
простым редактором, позволяющим создавать Web-страницы, является Блокнот, который
встроен в операционную систему Windows. Использование же специальных программ позволит
ускорить время создания Web-страницы, но не избавит от необходимости знания HTML-кода.
Создание
простого HTML-документа
HTML-документ, по сути, представляет
собой обычный текстовый файл. Редактировать Web-страницы, опубликованные в сети Internet, может лишь тот, кто их создал, а не
любой пользователь, поскольку каждая страница имеет свой уникальный адрес (URL) и существование двух разных страниц
с одинаковым адресом исключено.
Пример 6: HTML-код
Откройте блокнот и наберите следующий код:
<HTML>
<HEAD>
<Тitle>Простая Web-страница</Тitle>
</HEAD>
<BODY>
Это самая простая Web-страница. </BODY>
</HTML>
Затем нажмите File->сохранить
как…/в строке с именем наберите proba.html (в папку «мои документы» или др.),
теперь ваша страничка имеет значок интернет – браузера. Редактировать страничку
можно далее в блокноте, сохраняя под тем же именем.
Рис 10.
Аналогичный исходный код любой Web-страницы можно получить путем выбора команды В
виде HTML меню Вид в
браузере или при
открытии страницы в любом текстовом редакторе, например, Блокнот. Следует
обратить внимание, что HTML-страница содержит как обычный текст, так и
специальные команды разметки (tags или теги), заключенные в
угловые скобки (< и >). Теги языка HTML задают правила, по которым браузер
отображает документ на экране: размещение текста в окне, представление
графических объектов (рисунков), а также вывод звуковых файлов, видеоклипов и
т. д.
Большинство тегов языка HTML, такие как <HTML>, <TITLE>, <HEAD>, <FONT> и другие, требуют
соответствующую команду с символом </...> для ее закрытия, то есть тега
конца команды. Комбинация из открывающего и закрывающего тега называется контейнером
тегов. Существуют команды, например, <Р> (тег, отделяющий друг от
друга абзацы), для которых конец команды ставить не обязательно, а также команды
типа <BR> (мягкий перевод строки),
которые просто не
имеют тега конца команды. Многие
теги имеют атрибуты. Они предназначены для модифицирования параметров
документа, а их значения принято заключать в кавычки.
Например: <FONT color = “green”>
(цвет может быть указан как его названием, так и 6-ти значным кодом)
В закрывающем теге атрибуты указывать не надо: </FONT> .
При сохранении созданного документа необходимо
указывать расширение имени файла *.html или *.htm, для того, чтобы браузер правильно
определил тип файла и корректно отобразил информацию, содержащуюся в HTML-файле.
Атрибуты тега <вody>
Тег <BODY > имеет атрибуты, которые
перечислены ниже:
■ bgcolor="..." - определяет цвет фона
документа. Работа с цветами в HTML-документах
будет рассмотрена ниже;
■ background="..." - указывает браузеру
местоположение файла (*.gif или *.jpg), который необходимо использовать в качестве
фонового рисунка. В кавычках указывается абсолютный или относительный путь к
файлу. Окно полностью заполняется изображением, начиная с верхнего левого
угла;
■
text= "..."
- устанавливает цвет текста;
■
alink="..."
- определяет цвет активной ссылки;
■ link="..." - определяет цвет не просмотренной
ссылки;
■
vlink= "..." - определяет цвет
просмотренной ссылки;
■
topmargin= "..." - устанавливает
границу верхнего поля;
■
leftmargin= "..." - граница левого
поля;
■
bgproperties= "fixed" - в случае установки данного параметра в значение fixed фоновое изображение не будет прокручиваться вместе с текстом;
■ onload="..."
- определяет те действия браузера, которые должны произойти после загрузки
документа из сети.
Очень часто исходные коды программ (не только в
языках программирования) сопровождаются комментариями.
Они предназначены для сопровождения исходного кода программы пояснениями, которые, в свою
очередь, облегчают понимание кода как самим разработчиком при его модифицировании,
так и при чтении кода другими
людьми.
В спецификации HTML 4 для комментариев определен специальный тег,
который начинается символами <!-- и заканчивается символами --> .
Выравнивание:
<P align=”right”> по правому краю
<P align=”center”> по центру
Заголовки:
<H1>…</H1> - самый большой заголовок
………………
до <H6>…</H6> - самый маленький
Индексы:
<sup>…</sup> - верхний
<sub>…</sub> - нижний
Шрифт:
<strike>…</strike> - перечеркнутый текст
<B>…</B> - жирный
<U>…</U> - подчеркнутый
<i>…</i> - курсив
<hr> - горизонтальная линия
