Лекции на ВТОРОЙ СЕМЕСТР (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 позволяет вводить в документ комментарии. Комментарии начинаются со специального тэга

Новые версии web-браузеров поддерживают тэг , который позволяет управлять стилем, цветом, размером и видом шрифта в гораздо большей степени, чем стандартные тэги и .

Задание фактического размера шрифта

Тэг дает такие же возможности для отображения на экране основного текста. Текст может быть выведен шрифтом семи различных размеров – от 1 (наименьший) до 7 (наибольший). Текст без использования тэга выводится шрифтом размера 3. Это означает, что есть четыре варианта увеличения размера шрифта (4-7) и два варианта уменьшения (1-2). Все, что требуется сделать, — это поставить в начале и в конце фрагмента тэги , причем в начало добавить ключевое слово SIZE=, как показано ниже:

Фрагмент текста

В приведенном примере тэг устанавливает размер шрифта фрагмента равным 5 — на два номера больше, чем обычно.

Изменение цвета с помощью тэга FONT>

Использование ключевого слова COLOR= тэга дает возможность задавать один из нескольких цветов для отображения текста, например:

Красный текст

Существует 16 стандартных цветов, имеющих легко запоминающиеся названия:

Black

Черный

Navy

Темно-синий

Silver

Светло-серый

Blue

Синий

Maroon

Малиновый

Purple

Сиреневый

Red

Красный

Fuchsia

Розовый

Green

Темно-зеленый

Teal

Голубой

Lime

Зеленый

Aqua

Бирюзовый

Olive

Оливковый

Gray

Темно-серый

Yellow

Желтый

White

Белый

Примечание. Ключевое слово COLOR можно применять в сочетании с описанным выше ключевым словом SIZE.

Таблицы

Таблицы содержат информацию, расположенную по строкам и столбцам, и играют большую роль в организации web-страницы. Они отображаются практически всеми web-браузерами.

Таблицы очень удобны для представления большого количества связанной между собой информации в формате, который легко воспринимается и хорошо располагается на странице. Все, что можно организовать в столбцы, стоит представить в виде таблицы. Компании часто используют таблицы для представления информации о товарах и ценах.

Таблица располагается между тэгами

и
, каждая новая строка задаётся тэгом , а каждая новая ячейка в строке — тэгом . Ниже приведено полное описание тэгов таблиц.

Тэги

Описание

и

Эти тэги охватывают таблицу. Тэг

сообщает браузерам, что далее следует описание таблицы. Если требуется, чтобы была видна сетка, разделяющая строки и столбцы, необходимо добавить ключевое слово BORDER (получится
) и

и

Текст, отмеченный этими тэгами, выводится в виде заголовка. Для задания заголовка можно также применять тэги и

и

Тэги отображают текст заголовка строки или столбца немного более крупным полужирным шрифтом

Тэги определяют каждую строку таблицы. Тэг необязателен, но он делает HTML-код более полным и понятным

и

Эта пара тэгов отделяет текст каждой ячейки таблицы

Примечание. При добавлении к тэгу

атрибута, например,
, задаётся толщина рамки таблицы. Чем больше величина атрибута, тем толще рамка.

Для выравнивания таблицы служит атрибут ALIGN=»», который работает точно так же, как при выравнивании абзаца. Для этого используется конструкция

. Таким же образом можно выровнять содержимое каждой ячейки
. Данные в ячейках можно выравнивать и по вертикали, для этого используется атрибут VALIGN=»». В кавычках указывается, как выровнять данные (bottom, middle, top). При данные будут выровнены по нижнему краю ячейки, при VALIGN=»TOP» — по верхнему и при VALIGN=»MIDDLE» — по центру. Естественно, можно совмещать атрибуты.

Пример

Первый шаг – ввод родового тэга

:

Чтобы все ячейки таблицы были разделены тонкими линиями, в тэг

добавляется атрибут BORDER=1. Без него ячейки будут автоматически выровнены, но сетки в таблице не будет.

Теперь создаются одна за другой ячейки таблицы. Сначала задается строка:

После этого задаются ячейки, которые будут заголовками столбцов. Браузеры отображают заголовки немного более жирным шрифтом, чем остальной текст.

Год Модель Марка

Сейчас таблица состоит из одной строки, причем каждая ячейка отмечена как заголовок столбца. Далее вводятся остальные строки. Необходимо помнить, что в каждой строке должно быть одинаковое число столбцов (в данном случае три).



Страницы: 1 | 2 | Весь текст