Всю работу по созданию web-страницы можно разделить на несколько этапов.
Первый этап — сбор информации. Необходимо подготовить данные, которые будут представлены на страницах будущего сайта, — тексты, картинки, диаграммы, контактные сведения. При организации данных необходимо поделить их на группы, каждая их которых будет представлена собственной web-страницей, и будет лучше, если информация одной страницы заполняет весь экран.
Второй этап — ввод информации. Тексты вводятся с помощью программы текстового редактора. Для наиболее значительной информации желательно отводить место в верхней части страницы. Каждую страницу текста необходимо сохранить в виде отдельного файла-документа и снабдить текст дескрипторами HTML для преобразования его в формат web-страниц.
Третий этап—добавление гиперссылок (графических изображений). Гиперссылка позволяет пользователю переместиться к требуемой странице web одним щелчком кнопки мыши.
Четвертый этап — опубликование web-страниц. Создав страницы, необходимо обратиться в компанию-провайдер, которая предоставляет услуги по опубликованию web-cтраниц.
Порядок работы по созданию web-страниц:
загрузка программы текстового процессора или редактора, применяемого для создания web-страницы;
ввод текста;
сохранение документа с указанием одного из расширений имени — .htm или .html.
Язык html
В основе создания World Wide Web (web-страницы) лежит язык программирования Hyper Text Markup Language (HTML). Язык HTML использует тэги, вводимые в текстовые документы, которые указывают, каким образом информация должна выводиться на экран. Все документы HTML – чисто текстовые. Web-браузеры, например Internet Explorer, считывают документы HTML и определяют, каким образом выводить содержащуюся в них информацию. Тэги определяют, какую часть текста следует отобразить более крупным шрифтом (в виде заголовков), каков должен быть формат абзацев, где помещать графику и каким образом ссылаться на другие WWW-страницы.
Поскольку HTML-документы чисто текстовые, для создания web-страницы можно использовать практически любой текстовый редактор - от Windows Notepad до Microsoft Word. Также для создания HTML-файлов можно использовать различные программы, например, CoffeeCup, HotDog, Webber и т.п. В данной работе рассматривается создание HTML-файлов непосредственно в самом простейшем текстовом редакторе Windows Notepad.
Тэги html
Управляющие конструкции языка HTML называются тэгами. Тэги – это наборы символов, с помощью которых выполняется разметка текста. Все тэги записываются в угловых скобках, которые формируются символами «меньше» (<) и «больше» (>). После открывающей скобки идёт ключевое слово, определяющее тэг.
Регистр букв в названиях тэгов не имеет значения. Однако принято записывать тэги прописными буквами, чтобы они отличались от основного текста.
Тэги бывают парные и непарные. Для воздействия на часть документа (например, на абзац) используют парные тэги: открывающий и закрывающий. Открывающий тэг создаёт эффект, а закрывающий прекращает его действие. Закрывающие тэги начинаются с символа косой черты (/).
Непарные тэги воздействуют на весь документ или дают разовый эффект в месте своего появления. В этом случае закрывающий тэг не употребляется.
Если по ошибке в тэге записано ключевое слово, отсутствующее в языке, то тэг полностью игнорируется.
При просмотре документа в браузере сами тэги не отображаются, но влияют на способ отображения документа.
На эффект, создаваемый тэгом, могут влиять атрибуты. Атрибуты – это служебные слова, отделённые от ключевого слова тэга и друг от друга пробелами. Если требуется указать значение атрибута, то оно записывается после знака равенства и заключается в кавычки.
В парных тэгах атрибуты добавляются только к открывающему тегу. Закрывающие тэги никогда не содержат атрибутов.
Язык HTML позволяет вводить в документ комментарии. Комментарии начинаются со специального тэга <!--. Любой текст, следующий за этим тэгом, рассматривается как комментарий и не выводится на экран при отображении документа. Комментарий может содержать любые символы, кроме символа >, и, таким образом, не может содержать тэги. Заканчивается комментарий символами -->, закрывающая угловая скобка не ставится.
Структура документа html. Некоторые важные тэги html
Независимо от того, как будет выглядеть создаваемая страница и какая информация будет на ней отображена, существует четыре тэга, которые в соответствии со стандартами HTML и WWW должны присутствовать на каждой web-странице:
<HTML> сообщает браузеру, что документ написан на языке HTML;
<HEAD> отмечает вводную и заголовочную части HTML-документа;
<TITLE> отмечает название страницы HTML-документа;
<BODY> отмечает основной текст и информацию;
<ADDRESS> содержит адрес электронной почты для получения более подробной информации об этой web-странице.
Эти тэги необходимы web-браузеру для определения различных частей HTML-документа, но они не оказывают прямого влияния на внешний вид web-страницы. Они необходимы для того, чтобы последующие нововведения в HTML правильно интерпретировали страницу, а также для того, чтобы она выглядела одинаково во всех web-браузерах.
<HTML> и </HTML>
Эти тэги сообщают браузерам, что текст между ними следует интерпретировать как текст HTML.
Создавая новый HTML-файл, в первую очередь необходимо ввести данную пару тегов. Для этого набрать <HTML> в самом начале файла. Затем набрать его напарника </HTML>. Теперь весь текст, который появится между этими тэгами, будет отмечен как текст формата HTML. Обратите внимание на символ «/» во втором тэге. Прямая косая черта используется для обозначения закрывающих тэгов. Большинство тэгов HTML парные - открывающий и закрывающий, они охватывают помечаемый ими текст. Закрывающий тэг в паре всегда начинается с прямой косой черты.
<HEAD> и </HEAD>
Теперь вводятся тэги <HEAD> и </HEAD>. Они отмечают ту информацию в HTML-документе, которая будет служить названием.
Набрать <HEAD> на экране между тэгами <HTML>, затем на следующей строке набрать его напарника – тэг </HEAD>.
<TITLE> и </TITLE>
Каждая страница должна иметь название. Это можно сделать с помощью тэгов <TITLE> и </TITLE>. Вводятся они между тэгами <HEAD> и </HEAD>. Название страницы выводится браузером на строке заголовка. Кроме того, когда устанавливается закладка на определенную страницу, выводится и ее название.
<BODY> и </BODY>
Тэги <BODY> и </BODY>, как и <HEAD>, предназначены для обозначения отдельной части HTML-документа. Текст, охваченный этими тэгами, является основной частью документа.
Сюда войдут большая часть текста и иная информация, составляющие основу документа. Введя в создаваемую web-страницу тэги <BODY> и </BODY>, документ принимает следующий вид (табуляция используется для облегчения чтения):
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<ADDRESS> и </ADDRESS>
Эти тэги используются для того, чтобы отделить информацию о том, к кому нужно обращаться в отношении данной страницы в том случае, если у кого-нибудь возникнут вопросы или замечания.
<ADDRESS> и </ADDRESS> вводятся между <BODY> и </BODY>, т.к. они уже непосредственно несут с собой информацию.
Пример заготовки для создания web-страницы приведен на рис. 45.
Рис. 45. Пример заготовки для web-страницы
Сохранив файл с расширением *.htm, в браузере можно увидеть (рис. 46):
Рис. 46. Макет web-страницы
Итак, при создании документа HTML желательно придерживаться следующих правил вложения элементов:
элементы не должны пересекаться. Если открывающий тэг находится внутри элемента, то и закрывающий тэг должен располагаться внутри этого же элемента;
блочные элементы могут содержать вложенные блочные и текстовые элементы;
текстовые элементы могут содержать вложенные текстовые элементы;
текстовые элементы не могут содержать вложенные блочные элементы.