Теоретический материал. Всю работу по созданию Web-страницы можно разделить на несколько этапов
Всю работу по созданию 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-страницы приведен на рисунке 48.
Рисунок 45
Сохранив файл с расширением *.htm, в браузере можно увидеть (рис. 49):
Рисунок 46
Итак, при создании документа HTML желательно придерживаться следующих правил вложения элементов:
· элементы не должны пересекаться. Если открывающий тег находится внутри элемента, то и закрывающий тег должен располагаться внутри этого же элемента;
· блочные элементы могут содержать вложенные блочные и текстовые элементы;
· текстовые элементы могут содержать вложенные текстовые элементы;
· текстовые элементы не могут содержать вложенные блочные элементы.
Функциональные разделы документа
Язык HTML предназначен для описания функциональных разделов документа. Во многих обычных документах основными функциональными разделами являются заголовки и абзацы.
Заголовки
Текст заголовка должен располагаться между тегами <BODY> и </BODY>. Язык HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от <H1> и </H1> до <H6> и </H6>. На экране компьютера эти заголовки изображаются шрифтами разных размеров. В соответствии с идеологией языка HTML текст, который, по сути, является заголовком, надо пометить с помощью одного из этих тегов. Пользоваться тегами форматирования, которые изменяют размер и начертание шрифта, в данном случае не следует. Например:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<H1>Язык HTML (основы конструирования)</H1>
<H2>Зачем Вам изучать HTML?</H2>
</BODY>
</HTML>
Тег нового абзаца
Тег нового абзаца (<P>) предписывает браузеру разделить два фрагмента текста пустой строкой. Это полезно, когда необходимо отобразить большой объем текста, например книгу или подробную личную информацию, которая состоит более чем из одного длинного абзаца.
Тег перевода строки
Тег перевода строки <BR> аналогичен тегу нового абзаца, но он не вводит пустую строку после отделяемого им текста. После этого тега текст продолжает отображаться с начала следующей строки.
Примечание: при создании HTML документа следует учитывать, что кратные пробелы между словами и переходы на новую строку при воспроизведении документа браузером игнорируются.