Web-страницы и Web-сайты. Структура Web-страницы

"Web-страницы и Web-сайты. Структура Web-страницы"

8 класс

Учитель по информатике

Васильева Ольга Владимировна

Информация во Всемирной паутине хранится в форме Web-сайтов .

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

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

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

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

Обычно в качестве гиперссылок используют часть текста (слово или несколько слов) и графические изображения (рисунки или фотографии).

Поскольку в первом случае для создания гиперссылок используется текст, то такая гиперссылка называется текстовой . Весьма часто текстовая гиперссылка представляет собой подчеркнутый текст синего цвета.

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

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

Вэб-страницы создаются с использованием языка разметки гипертекстовых документов  HTML (Hyper Text Markup Language).

Выделяют две основные группы методов разработки веб-сайтов : визуальные и ручные (программные).

Визуальные методы позволяют производить разработку веб-страниц с высокой степенью автоматизации и не требуют знание языка разметки HTML. Процесс создания очень нагляден, т.к. производится в таком режиме - от английского What You See Is What You Get, что означает «Что видишь, то и получишь».

Разработано немало веб-редакторов, с помощью которых, при создании веб-страницы, соответствующий HTML-код создаётся автоматически. Эти редакторы позволяют выполнять всю работу по созданию сайта без подключения к сети Интернет, или, как говорят, в режиме оффлайн.

Наиболее известными такими редакторами являются Microsoft FrontPage, Macromedia Dreamweaver .

Конечно, трудно создать хороший сайт, не зная основ языка разметки HTML.

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

Рассмотрим этапы создания вэб - сайта :

·   определение тематики сайта, его целей и задач;

· разработка дизайна, проектирование структуры сайта, определение разделов и связей между страницами;

·  подготовка материалов (текста и графики) для размещения на веб-страницах;

- конструирование страниц сайта, т.е. создание HTML-кода;

·        протестировать, т.е. проверить правильность работы;

·        размещение в сети Интернет.

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

В дальнейшем, конечно, сайту необходимо рекламирование и сопровождение.

Web-страница состоит из команд и текста. Команды, написанные для браузера, иначе называются тегами . Теги и составляют основу языка разметки гипертекста HTML. Тег всегда начинается со знака «меньше» и заканчивается знаком «больше». Теги набирают латинскими буквами. Заглавные и строчные буквы при написании тегов не различаются.

Существует два типа тегов - парные и непарные. Парные теги содержат открывающий и закрывающий тэги.

. " width="640"

Открывающим тегом описывается команда и начинается её действие. Закрывающим тегом, который повторяет открывающий, но содержит слэш перед обозначением, это действие прекращает.

Такая пара тегов называется контейнером .

Например, тег задаёт жирное начертание. Размеченный текст:

браузером будет отображаться так:

Обратите внимание, этот тег парный.

А теперь рассмотрим структуру простейшего HTML-документа.

HTML-документ начинается открывающимся тегом html , а заканчивается - закрывающимся тегом html . Без этих тегов браузер не сможет определить формат документа и правильно его интерпретировать.

Внутри этих тегов расположены два контейнера. В контейнере head размещается неотображаемая на странице служебная информация, а так же название страницы,  которое отображается в заголовке окна браузера. Название страницы помещается в контейнер title .

. Созданная Веб-страница сохраняется в виде файла с разрешением «*.htm» или «*.html» Например: «uroki.htm», «planet.html». Так же рекомендуется создать отдельную папку, в которую будут размещаться и сохраняться все файлы разрабатываемого сайта. А теперь создадим HTML-документ, который будет содержать текст: Открываем редактор Блокнот. Для этого отрываем Пуск, все программы, стандартные, Блокнот. Мы уже знаем, что HTML-документ начинается с открывающегося тега html . Я рекомендую сразу же парные теги и закрывать, чтобы потом не забыть. Ведь, если мы откроем уже готовый сайт с помощью редактора блокнот, то увидим, что тегов в нём очень-очень много. Итак, тег открыли и сразу закрыли. Внутри этих тегов расположены два контейнера. Первый контейнер head . Опять тег открыли и закрыли. В этом контейнере помещаем заголовок окна в парном теге title . Заголовок напишем ИНФОРМАТИКА . После контейнера head следует контейнер body , в котором, как вы уже узнали, размещается содержание страницы. Между открывающимся и закрывающимся тегами мы пишем текст, который будет размещаться на нашей веб-странице: «Это моя первая web-страница!!!» " width="640"

Вся отображаемая браузером информация: тексты, рисунки, ссылки, звуки, видеофрагменты - помещается в контейнер body . Созданная Веб-страница сохраняется в виде файла с разрешением «*.htm» или «*.html»

Например: «uroki.htm», «planet.html».

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

А теперь создадим HTML-документ, который будет содержать текст:

Открываем редактор Блокнот. Для этого отрываем Пуск, все программы, стандартные, Блокнот. Мы уже знаем, что HTML-документ начинается с открывающегося тега html . Я рекомендую сразу же парные теги и закрывать, чтобы потом не забыть. Ведь, если мы откроем уже готовый сайт с помощью редактора блокнот, то увидим, что тегов в нём очень-очень много.

Итак, тег открыли и сразу закрыли. Внутри этих тегов расположены два контейнера. Первый контейнер head . Опять тег открыли и закрыли. В этом контейнере помещаем заголовок окна в парном теге title . Заголовок напишем ИНФОРМАТИКА . После контейнера head следует контейнер body , в котором, как вы уже узнали, размещается содержание страницы.

Между открывающимся и закрывающимся тегами мы пишем текст, который будет размещаться на нашей веб-странице: «Это моя первая web-страница!!!»

Сохраним документ в формате HTML. Т.к. редактор Блокнот сохраняет документы по умолчанию с расширением: . txt , воспользуемся меню Файл - Сохранить как , выберем вариант Все файлы , введём имя Проект с расширение HTML .

Далее откроем созданный документ в браузере. В контекстном меню выберем команду, открыть с помощью браузера Internet Explorer . Текст «Это моя первая web-страница!!!» отображается на странице. Обратите внимание, где располагается заголовок окна.

Итак, наш первый сайт готов!

Форматирование текста на Web-странице

Давайте посмотрим на веб-страницу одного восьмиклассника:

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

Мы уже знаем, что создавать веб-страницу можно в текстовом редакторе Блокнот . Чтобы отформатировать текст на веб-странице, надо её открыть с помощью редактора Блокнот. И приступить к форматированию.

Первое с чего можно начать - это с заголовка.

Размер заголовка задаётся парами тегов от H1 до Н6 . Н1 - это самый крупный, а Н6 - самый мелкий. Сделаем наш заголовок самым крупным. Откроем тег Н1 перед словом «берёза» и закроем тег после слова.

Некоторые теги имеют атрибуты . Каждый атрибут имеет название (имя) и определённое значение, которое записывается в кавычках после знака «равно». Тег может содержать несколько атрибутов, которые перечисляются через пробелы, например:

Порядок следования атрибутов в теге не важен.

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

По умолчанию текст выравнивается по левому краю страницы.

Значит, что бы выровнять наш заголовок, в теге Н1 допишем атрибут ALIGN и задаём значение выровнять по центру. Обратите внимание на то, что атрибуты , в отличие от тегов, закрывать не надо. И атрибут действует только в том теге, в котором мы его написали.

. При просмотре в браузере абзацы отделяются друг от друга интервалами. " width="640"

Форматирование шрифта осуществляется с помощью тега FONT и его атрибутов. Атрибут FACE позволяет задавать название шрифта (например, Arial, Times New Roman), атрибут SIZE -размер шрифта. По умолчанию принято значение размера 3. И атрибут COLOR - цвет шрифта. Значение атрибута COLOR можно задать либо названием цвета (например, «red», «green»), либо его шестнадцатеричным значение в RGB -формате, где две первые шестнадцатеричные цифры задают интенсивность красного цвета, две следующие - зелёного, а две последние цифры задают интенсивность синего цвета. Например:

Дайте сделаем фамилию и имя красным цветом, шрифт «колибри» и размер 5. Откроем тег FONT перед именем Сергей, внутри которого зададим параметры следующих атрибутов: используя атрибут FACE запишем шрифт «колибри», с помощью атрибута SIZE зададим значение 5 и с помощью атрибута COLOR зададим красный цвет шрифта. Обязательно закрываем тег FONT .

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

. Для этого перед первым словом абзаца откроем тег р . И после последнего слова абзаца не забудем поставить закрывающийся тег. С остальными абзацами сделаем тоже самое. А если вы внимательно смотрели, то уже заметили, что в каждом абзаце у нас 4 строки. И когда мы набираем стихотворение в текстовом редакторе, для перехода на новую строку мы нажимаем клавишу Enter . Но мы уже говорили про то, что переходы на новые строки браузером не воспринимаются. Для принудительного перехода на новую строку без создания абзаца используют непарный тег br . Этот тег надо поставить там, где бы вы нажали клавишу Enter в текстовом редакторе. " width="640"

Разделим наш текст на 4 абзаца. Первый столбик стихотворения поместим в контейнер р . Для этого перед первым словом абзаца откроем тег р . И после последнего слова абзаца не забудем поставить закрывающийся тег. С остальными абзацами сделаем тоже самое.

А если вы внимательно смотрели, то уже заметили, что в каждом абзаце у нас 4 строки. И когда мы набираем стихотворение в текстовом редакторе, для перехода на новую строку мы нажимаем клавишу Enter . Но мы уже говорили про то, что переходы на новые строки браузером не воспринимаются.

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

. В третьем абзаце сделаем текст размером 2. Для этого используем тег FONT и атрибут SIZE со значением 2. И закрываем тег FONT . Четвёртый абзац выравним по центру. Нередко между абзацами помещают разделительную линию, которая задаётся непарным тегом hr . Поместим разделительную линию после названия стихотворения и после всего стихотворения. Не забывайте так же периодически сохранять ваши действия. " width="640"

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

Для этого применим тег FONT и зададим следующий атрибут: COLOR со значением bluе . И, конечно, не забудем закрыть тег FONT .

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

В третьем абзаце сделаем текст размером 2. Для этого используем тег FONT и атрибут SIZE со значением 2. И закрываем тег FONT .

Четвёртый абзац выравним по центру. Нередко между абзацами помещают разделительную линию, которая задаётся непарным тегом hr .

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

Теперь веб-страница выглядит более привлекательно.