7.1.  Инструменты создания веб-страниц

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

В качестве инструментов для созда­ния веб-страниц можно использовать:

1. Текстовые редакторы (напри­мер, Блокнот). Создание веб-страниц в этом случае представляет собой тру­доемкий процесс.
2. Редакторы с подсветкой html- кода. Такие редакторы обычно имеют интеллектуальный режим ввода (под­сказка при вводе), что оптимизирует и упрощает работу (пример 7.1).
3. Визуальные веб-редакторы. С по­мощью таких редакторов можно соз­давать веб-страницу, не зная языка HTML. Содержание в процессе редак­тирования выглядит максимально по­хожим на конечную продукцию (при­мер 7.2).
4. Конструкторы сайтов — интернет-сервисы, которые предоставля­ют возможность быстро создать сайт с современным дизайном без знаний языка HTML и без использования спе­циального программного обеспечения (пример 7.3).
5. После написания кода html- документа в каком-либо редакторе его требуется сохранить как файл с рас­ширением .html.

7.2.  Элементы оформления веб-страниц

Любая веб-страница содержит определенный набор стандартных эле­ментов. Безусловно, этот набор может варьироваться в зависимости от тема­тической направленности, а также от целей и задач сайта. Создание таких элементов и проектирование их взаим­ного расположения является одной из главных задач веб-разработки.

Основные элементы оформления веб-страниц:

1. Заголовок (шапка сайта, header). Располагается в верхней части каждой страницы сайта. Может быть выпол­нен как в текстовом, так и в графиче­ском варианте (часто это логотип).
2. Основная часть. Занимает боль­шую часть веб-страницы. Здесь разме­щается содержательный информацион­ный текст и иллюстрации — контент (от. англ. content — содержание).
3. Элементы навигации (меню). Ос­новное меню обычно располагается под шапкой, а вспомогательное — в левой части страницы. Представля­ет собой совокупность гиперссылок.
4. Нижний колонтитул (подвал, footer). Располагается на каждой странице сайта. Обычно здесь разме­щается информация о разработчике, контактная информация, иконки со­циальных сетей и т. д.
5. Боковые панели. Вертикальные полосы справа и/или слева от основной части. В них располагаются, например, ссылки, рекламные блоки, форма голо­сования и т. д.

(Рассмотрите пример 7.4.)

 7.3.  Текст на веб-странице

Как правило, основу контента веб­страниц составляет текстовая инфор­мация. Поэтому очень важно научить­ся вводить и форматировать блоки текста на странице. Для работы с тек­стом в языке HTML имеется большое количество тегов.

Обычно текст разделяют на абза­цы. Это облегчает чтение большого текста. В языке HTML для создания абзаца используется контейнер <p>. При просмотре html-страницы в брау­зере абзацы отделяются небольшими интервалами (пример 7.5).

Для выравнивания текста в абзаце тег <p> поддерживает атрибут align (пример 7.6). Он может принимать од­но из четырех значений:

• left — выравнивание текста по левому краю (по умолчанию);
• center — выравнивание текста по центру;
• right — выравнивание текста по правому краю;
• justify — выравнивание по ширине.

Для выделения разделов текста на веб-странице применяются заголовки. В языке HTML существует шесть уров­ней заголовков. Самым верхним уров­нем является уровень 1 — тег <h1>, а самым нижним — уровень 6, тег <h6>. Содержимое заголовка первого уровня отображается самым крупным шриф­том жирного начертания, а заголов­ка последнего, шестого уровня —самым мелким (пример 7.7). В тегах <h1>…<h6> аналогично тегу <p> исполь­зуют атрибут align для выравнивания текста.

Иногда возникает необходимость вставить в текст html-документа пере­нос строки, не создавая при этом аб­зац. Например, при разметке стихов или текстов песен. Для этого преду­смотрен непарный тег <br>, который указывает на место переноса текста.

Для разделения или дополнитель­ного выделения блоков текста в языке HTML существует непарный тег <hr> — горизонтальная линия (пример 7.8). Горизонтальная линия растягивается на всю ширину веб-страницы и имеет один-два пикселя в толщину в зависи­мости от используемого браузера.

Тег <hr> поддерживает следующие атрибуты:

• align — определяет выравнивание линии;
• size — устанавливает толщину линии в пикселях;
• width — определяет ширину ли­нии в пикселях или в процентах по отношению к ширине окна браузера;
• color — задает цвет линии.

Задавать цвет в html-документе можно двумя способами: с помощью названия (английские слова для наи­менования цвета) или с помощью числового шестнадцатеричного кода (пример 7.9). Перед кодом ставится знак #. В соответствии с цветовой моделью RGB две первые цифры кода задают интенсивность красного (red) цвета, третья и четвертая — зеленого (green), две последние — синего (blue).

Использование контейнера <div> позволяет сгруппировать различные элементы веб-страницы в блок.

В примере 7.10 в блок выде­лено несколько абзацев. Атрибут align=”center” определяет выравнива­ние по центру для всех абзацев, объ­единенных в блок.

7.4.  Гиперссылки на веб-странице

Гиперссылки в html-документе соз­даются с помощью контейнера <a>. Внутри его могут быть: слово, группа слов или изображение.

Тег <а> поддерживает атрибуты:

• href — обязательный атрибут, который указывает на абсолютный либо относительный адрес ссылки или на имя закладки для внутренней ссылки;
• target — определяет, где будет от­крыт ссылаемый документ (например, _blank — в новой вкладке или окне).

Контейнер <a> может быть исполь­зован двумя способами:

1. Для ссылки на другой документ — локальная ссылка (пример 7.11).
2. Для ссылки на элемент внутри документа — внутренняя ссылка.

Большие документы читаются луч­ше, если они имеют внутренние ссыл­ки (пример 7.12). Значением атрибута href в данном случае будет так назы­ваемый якорь — ссылка на иденти­фикатор объекта (id). id — уникаль­ный признак объекта, позволяющий отличать его от других объектов, т. е. идентифицировать. Имя для иденти­фикатора лучше выбирать в соответ­ствии с назначением ссылки.