Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Приветствие для новых посетителей

.

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

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

Рис. 2.14. Главная страница, принявшая новый вид

Ну вот, ваша страница уже почти похожа на множество главных страниц других сайтов: на ней есть простой текст, приветствующий новых посетителей, но, правда, больше ничего нет. О чем конкретно этот сайт или, если быть более точным, для чего именно он создавался?

О чем наш сайт?

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

1. После уже имеющегося контента страницы добавьте еще один заголовок, на этот раз третьего уровня: «О нас» (помните о необходимости и открывающего и закрывающего тега для заголовка).

2. Затем добавьте такой текст:

«Вubble Under — группа энтузиастов дайвинга, основанная на юго-востоке Великобритании, которая регулярно встречается для дайвинг-вылазок в летние месяцы, когда погода хорошая и по воде плывут барашки. Мы проводим уик-энд, собираясь небольшими группами, чтобы сократить расходы на проживание и проезд, а также быть уверенными, что каждый получает надежного напарника.

Хотя мы располагаемся на юго-западе, мы не ограничиваемся только нашей территорией: в последних поездках мы посетили реку Скапа в Шотландии и Мальту.

Когда мы не занимаемся дайвингом, мы часто встречаемся в местных пабах, чтобы поболтать о грядущих приключениях (на самом деле это только повод, да?)».

3. Затем добавьте раздел «Наши контакты», обозначив его заголовком третьего уровня.

4. И наконец, добавьте какие-нибудь контакты для примера:

Напомню, что разные уровни заголовков означают важность различных частей и параграфов, находящихся внутри документа. Если это понятно, то разметка должна получиться вот такой:

Главная страница показана на рис. 2.15.

Рис. 2.15. Отображение файла index.html

Ничего сверхъестественного, да? Поверьте мне, это еще не все. Сейчас следует сконцентрироваться на контенте сайта и на том, как он должен быть структурирован. Мы только подбираемся к обширным вопросам структуры документа, обсудив лишь использование уровней заголовков. Вы увидите, как можно оформить документ, то есть изменить шрифт, цвет, отступы и т. д., но сейчас сосредоточимся на содержании и структуре.

Пока страница выглядит немного скучноватой, да? Украсим ее немного. Например, добавим цвета — вставим в документ изображение, воспользовавшись элементом img. Он используется для вставки изображения на веб-страницу, а атрибуты src, alt, width, height описывают параметры рисунка. Атрибут s (от source — «источник») — имя файла изображения. В данном случае это divers-circle.jpg, который вы можете взять из архива кода. Атрибут alt — альтернативный текст. Если по каким-то причинам изображение не загрузилось, вместо него будет показан альтернативный текст. Это полезно для слабовидящих посетителей вашего сайта, поисковых систем, пользователей с медленной скоростью интернет-соединения. И наконец, width и height — соответственно ширина и высота изображения в пикселах (точках). Мы еще поговорим о пикселах, когда будем подробно обсуждать изображения.

Найдите изображение в архиве с кодом и поместите его в папку сайта. Изображение показано на рис. 2.16.

Рис. 2.16. Дайверы собираются в круг

Откройте файл i ndex. html в своем редакторе и добавьте следующую разметку сразу после заголовка второго уровня (h2):

chapter2\website_files\05_clickable_email_and_image\index.html
(фрагмент)

pimg src=divers-circle.jpg width=200 height=162 alt=Tpynna дайверов тренируется//p

Сохраните изменения и посмотрите, как страница выглядит в браузере. Она должна отображаться, как показано на рис. 2.17.

Рис. 2.17. Отображение главной страницы в браузере

.

Читайте так же:
Not found