Вот мы и подошли вплотную к тому, чтобы создать нашу первую Web -страницу.
Для начала это будет просто небольшой пример, нужный для того, чтобы изучить принципы создания Web -документов.HTML ( Hyper Text Markup Lenguage , язык гипертекстовой разметки) – это особый язык на котором пишутся Web -страницы. Этот язык включает в себя различные способы оформления гипертекстовых документов. Человек, изучивший этот язык, обретает возможность делать сложные вещи простыми способами и, главное, быстро. HTML как основа создания Web-страниц напрямую связан с таким направлением искусства как Web -дизайн. Художнику в Интернете недостаточно просто нарисовать красивые картинки, оригинальный логотип, создать новый фирменный стиль. Он должен разместить все это в сети, продумать связь между Web -страницами, чтобы все двигалось, откликалось на действия пользователя.
Технология HTML заключается в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу. Браузер, при загрузке Web-страницы представляет ее на экране в том виде, который задается тэгами.
Основными достоинствами HTML -документов являются:
При изучении урока №5 мы будем использовать два электронных учебника, один созданный учителем г. Заволжье Нижегородской обл. Смирновым Евгением Александровичем, и свободно распространяемым учебником, расположенным по адресу: http://postroika.ru автором которого является Алленова Наталья.
Внимательно изучив каждый шаг учебников, возможно создать очень неплохой сайт, проект которого был разработан на предыдущем занятии.
В качестве, же первого шага создадим две Web-страницы, содержащие текст и изображение, связанные между собой гиперссылками.
Создайте папку, в которой будут располагаться наши странички и скопируйте в нее же два рисунка переименовав их в one.jpg и two.jpg .
К оглавлениюСоздавать наши странички будем в простейшем текстовом редакторе Блокнот, но при сохранении документа, зададим имя документа index.html или index.htm, обязательно, указав расширение при задании имени файла.
( См учебник 2 ).
Для того, чтобы страница удовлетворяла всем стандартам, иначе говоря, была правильно оформленной, в ее код включаются теги, не отображающиеся в окне браузера.
( См учебник 1 ), ( См учебник 2 ).
Выполните практическое задание 1 , вставив заголовок страницы в контейнер <TITLE>…. </TITLE> и сохранив документ под именем index.htm.
Просмотрите полученный результат в браузере, не закрывая документ в редакторе Блокнот.
Добавим теперь в нашу страничку рисунок
( См учебник 2 ).
< IMG > - элемент для создания ссылки на графический файл ( image ). Он не содержит конечного тэга – вся необходимая информация задается при помощи атрибутов. Этот элемент является универсальным: с его помощью можно вставлять картинки в таблицы, использовать изображения в гиперссылках , просто размещать рисунки на Web - страницах. Необходимым атрибутом является src – указатель на графический файл.
Не забудьте изменить название рисунка на имя рисунка в вашей папке, (в нашем случае: one.jpg) . Вы можете поэкспериментировать с различными атрибутами тега <img src> например, изменяя размер изображения , или выравнивая рисунок .
Аналогичным образом создайте вторую Web-страницу, и сохраните под именем 2.htm, изменив заголовок страницы, текст и подключив рисунок two.jpgНам осталось связать Web -страницы между собой гиперссылками.
( См учебник 1 ), ( См учебник 2 ).
То есть, в документе index.htm пишем фразу «перейти на второй документ» и помещаем ее в контейнер (<a href="1.htm"> перейти на второй документ </a>) . Аналогично поступаем на втором документе создав ссылку на первый документ, (< a href=" index.htm "> перейти на первый документ </a> ).
Теперь вновь просмотрим получившийся результат в Web-обозревателе и проверим, насколько разобрались в материале, выполнив несколько тестов:
Тест_1 , Тест_2 , Тест_3 .
Итак, после создания простейших страничек можно приступать к реализации запланированного сайта.
Только пока страница выглядит не слишком привлекательно. Мелкий шрифт и черный текст на белом фоне мало привлекают к себе внимание. С помощью HTML тэгов можно задать различные параметры выравнивания, форматирования текста, задания заголовков.
Также
( См учебник 1 ), ( См учебник 1)
Довольно часто при размещении текста на Web -страницах удобно использовать списки в различных вариантах:
• нумерованные списки, когда элементы списка идентифицируются с помощью чисел,
( Пример),
• маркированные списки, когда элементы списка идентифицируются с помощью специальных символов .
( См учебник 1 ), ( См учебник 2 )
Для аккуратного размещения информации на сайте очень часто используются таблицы :
( См учебник 1 ), ( См учебник 2 ),
причем возможно задать различные параметры тэга <TABLE>, можно изменять параметры тэгов <TR> и <TD>.
Для удобного расположения элементов на странице возможны различные варианты разметки.
• Первый вариант. Разметка страницы, производится с использованием таблицы шириной на весь экран, независимо ль того, каково разрешение экрана ( wihth = «100%»). В данном случае удобно создавать таблицу, состоящую из двух строк и двух столбцов. Верхняя строка будет отведена под заголовок странички, левый столбец будет отведен под меню Web -сайта. При такой разметке страница всегда будет занимать весь экран, независимо от того, какое разрешение экрана стоит у посетителя.
К недостаткам такой разметки можно отнести «плавучесть» содержимого страницы, т.е. при уменьшении разрешения экрана содержимое должно поместится в более узкие рамки, следовательно текст «сползает» вниз. Чтобы этого не происходило нужно выбрать фиксированный размер таблицы, тогда при любом разрешении экрана таблица будет выглядеть неизменной.
• Второй вариант. Разметка страницы производится с использованием таблицы шириной 760 пикселов, выровненной по центру экрана. При этом посетитель, у которого разрешение экрана равно 800*600 пикселов будет видеть страничку шириной практически во весь кран, а посетитель, у которого разрешение монитора выше будет видеть таблицу шириной 760 пикселов по центру экрана и белые поля по бокам от нее.
В данном случае удобно создать таблицу, состоящую из трех строк и одного столбца. Верхняя строка будет отведена под заголовок странички, вторая строка будет отведена под меню Web -сайта, а третья строка – непосредственно под содержание сайта.
Если необходимо разместить внутри текста какие-либо иллюстрации, фотографии и пр., то в этом случае можно использовать вложенные таблицы .
Используя имеющийся материал создайте сайт, соответствующий проекту, разработанному на прошлом занятии.