№ 3.7* ИНТЕРНЕТ: СОЗДАНИЕ WEB-САЙТА НА ЯЗЫКЕ HTML
Цель работы: освоение приемов создания Web-страниц и Web-сайтов на языке HTML: знакомство с элементами HTML и структурой HTML-документа; управление форматами текста и шрифтами; организация гиперсвязей между документами.
Используемое программное обеспечение: текстовый редактор “Блокнот”.
Справочная информация
Структура HTML-документа. Существует много различных инструментальных средств для создания Web-страниц. Для работы с ними можно ничего не знать о языке разметки гипертекста — HTML. Однако любой HTML-редактор на основе создаваемой визуальной модели документа строит в памяти компьютера код страницы с использованием команд этого языка. Таким образом, независимо от способа создания, основа каждой Web-страницы — язык HTML. Документ, который написан на этом языке, представляет собой обычный текстовый файл в формате ASCII, в который вставлены дескрипторы, или тэги.
Файлы, содержащие информацию на языке HTML, обычно имеют расширение htm или html. Они могут создаваться либо с помощью простейших текстовых редакторов (например, «Блокнота»), либо с помощью специальных HTML-редакторов. Основной файл каждого каталога обычно имеет имя index. Если при загрузке страницы в адресе не указывать имя файла, то обычно будет производиться поиск.
Тэги (флаги, дескрипторы, контейнеры) — это специальные кодовые слова, определяющие внешний вид текста и графики, выводимой на экран, и формирующие связи с другими web-сайтами и ресурсами Интернета.
Тэги представляют собой определенные последовательности символов, заключенные между знаками < и >. Тэги бывают парные и непарные, открывающие и закрывающие. Область действия парного тэга начинается с того места, где стоит открывающий тэг, а кончается там, где стоит закрывающий тэг. Отличительный признак закрывающего дескриптора — символ /.
HTML-документ начинается с тэга <HTML> и заканчивается тэгом </HTML>. Между ними располагается то, что будет выводиться на экран
программой просмотра: текст, картинки, видеофрагменты и т. д. Любой HTML-документ состоит из двух частей: заголовка и тела. Кроме того, допускается использование комментариев. Комментарий должен начинаться с <!- и заканчиваться ->. Всё, что располагается между этими тэгами, на экран выводиться не будет. Комментарии помогают лучше разобраться в коде HTML-доку мента.
Таким образом, общая структура HTML-документа имеет вид:
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
Заголовок документа чаще всего содержит тэг заголовка окна и некоторые метатэги, содержимое которых на экран не выводится. Заголовок окна формируется с помощью следующего кода:
<TITLE> название документа </TITLE>
Тело документа — это содержимое Web-страницы. Оно располагается между тэгами <BODY> и </BODY>. Тэг <BODY> может содержать ряд атрибутов для глобальных установок, относящихся ко всему документу: цвета гиперссылок, цвет текста, фона, фоновый рисунок и т. д.
Некоторые атрибуты тэга <BODY>:
- • аlinк=цвет — цвет загружаемой гиперссылки;
- • link=цвет —цвет невыбранной гиперссылки;
- • vlink=цвет — цвет посещенной гиперссылки;
- • bgcolor=цвет — фоновый цвет страницы;
- • background=”имя графического файла” — повторяющаяся фоновая графика. Рисунок, хранящийся в указанном файле, будет размножен по всему экрану и перекроет цвет фона. Можно использовать форматы файлов GIF и JPEG;
- • text=цвет — цвет текста;
- • topmargin=n — расстояние между верхним краем окна браузера и содержимым страницы (задается в пикселях);
- • leftmargin=n — расстояние между левым краем окна браузера и содержимым страницы.
Цвет указывается с помощью либо его имени, либо его шестнадцатеричного кода.
Некоторые цвета:
black —черный(000000);
aqua —бирюзовый(00ffff);
blue —синий(0000ff);
gray —серый(808080);
green —зеленый(008000);
red —красный(ff0000);
white —белый(ffffff);
yellow —желтый(ffff00);
maroon —коричневый(800000);
fuchsia —розовый(ff00ff);
lime —светло-зеленый(008000);
navy —ультрамариновый(000080);
olive —оливковый(808000);
purple —пурпурный(800080);
silver —серебряный(c0c0c0);
teal —темно-зеленый(008080).
Форматирование текста. Шрифты. Тэги форматирования служат для определения внешнего вида текста и задания его расположения на странице.
- 1) <DIV> — выделение абзаца:
- <DIV align-тип выравнивания>….</DIV>
- Значения параметра align:
- left — по левому краю;
- right — по правому краю;
- center — по центру;
- justify — по центру.
- 2) <P align=тип выравнивания>. . . </P> — выделение абзаца текста.
- В отличие от тэга <DIV>, здесь между отдельными абзацами по умолчанию вставляется пустая строка.
- 3) <CENTER>. . . </CENTER> — центрирование всех элементов, расположенных между этими тэгами (текста, таблиц, графики).
- 4) <BR> — принудительный разрыв строки в месте установки данного тэга.
- 5) <H1 align=тип выравнивания >…</H1>
- <H2 align=тип выравнивания >…</H2>
- …..
- <H6 align=тип выравнивания >…</H6>
Это форматирование заголовков. Тэги с номерами 1-3 пригодны для вывода заголовков (большой размер шрифта). Тэги с номерами 4-6 задают размер шрифта, равный или меньший размеру шрифта текущего текста.
По умолчанию текст выводится на экран тем шрифтом, который задан в установках браузера. Для изменения шрифта используется тэг <FONT>:
<FONT fасе=название шрифта size=размер color=цвет> … </FONT> — определение шрифта.
Атрибут face определяет тип шрифта (Arial, Times New Roman, Courier New, Impact и т. д.). По умолчанию текст будет выводиться тем шрифтом, который задан в настройках программы-браузера. То же самое будет происходить, если указанный шрифт не установлен на компьютере. Возможно задание сразу нескольких шрифтов через запятую. Тогда сначала будет искаться первый, в случае его отсутствия — второй и т. д.
size — размер шрифта; может задаваться абсолютным значением в диапазоне от 1 до 7 и относительным (по отношению к базовому значению). При относительном задании необходимо перед числом поставить знак +(увеличение) или – (уменьшение). Рекомендуется использовать относительное значение.
color — цвет; задается так же, как цвет фона.
Для изменения начертания шрифта используются тэги;
- 1) <В>. . .</В> — полужирный шрифт;
- 2) <I>. . .</I> — курсив;
- 3) <U>. . .</U> — подчеркивание;
- 4) <SUB>. . .</SUB> — нижний индекс;
- 5) <SUP>. . .</SUP> — верхний индекс.
Гиперсвязи и гиперссылки.
Реализуемые в Интернет-документах ссылки можно разделить на две категории:
- 1) ссылки на другие позиции внутри того же документа;
- 2) ссылки на другой документ.
Для задания этих типов гиперсвязей используется один тэг <А>, имеющий следующий вид:
<А HREF=целевой адрес> текст или графика </А>
В качестве гиперссылки можно использовать текст или графическое изображение. Информация, которая располагается между тэгами <А> и </А>, будет выведена на экран. Если это текст, то он будет выделен подчеркиванием и специальным цветом (по умолчанию синим). При размещении указателя мыши над гиперссылкой он принимает вид руки. При выборе ссылки будет осуществлен переход по заданному адресу. Если указывается относительный адрес (например, только имя файла), то он будет искаться в текущей папке.
При работе с большими документами рекомендуется вставлять в них метки с помощью этого же тэга с параметром NAME:
<А NAME=метка></А>
Сама метка на экране не отображается. Для организации перехода к меткам документа следует записать следующий HTML-код:
<А HREF=#метка> текст или графика </А>
Если нужно перейти к заданной метке в другом документе, то необходимо записать такой код:
<A HREF=aдpec документа#метка> текст или графика </А>
Пример
Файл index.htm:
<HTML>
<HEAD>
<TITLE>Страничка Компьютерной школы ПГУ</TITLE>
</HEAD>
<BODY bgcolor=gray link=white vlink=yellow>
<H1 align=center><FONT color=navy>Компьютерная школа ПГУ</FONT></H1>
<BR><BR>
<H2 align=center><A HREF="history.htm">История создания</А></H2>
<BR><BR>
<H2 align=center><A HREF="prepod.htm">Преподаватели</А></H2>
<BR><BR>
<H2 align=center><A HREF="kurs.htm">Курсы</A></H2>
</BODY>
</HTML>
Файл history.htm:
<HTML>
<HEAD>
<TITLE> История Компьютерной школы ПГУ</TITLE>
</HEAD>
<BODY bgcolor=gray link=white vlink=yellow>
<H1 align=center><FONT color=navy>История создания</FONT></H1>
<p align=justify>Компьютерная школа была основана в <b>сентябре 1994 года</b>. Первый набор учеников составил <b>100</b> человек.
</p>
<p align=justifу>В <i>1995</i> году в школе появилось старшее, а в <i>1996</i> году - младшее отделение.
</p>
</BODY>
</HTML>
- 1. Создать Web-сайт «Моя домашняя страница», состоящий из пяти страниц.
Страница 1 должна содержать:
- • заголовок;
- • четыре гиперссылки: «Обо мне», «Моя семья», «Друзья», «Мои увлечения».
Страницы 2, 3,4 и 5 должны содержать:
- • заголовок;
- • по 2 два или более отформатированных абзаца текста (один абзац — не менее трех полных строк);
- • фотографии (минимум по одной на каждой странице).
- Сайт должен содержать информацию о вас, а также ваших родственниках, друзьях, одноклассниках и т. д.
Требования к сайту:
- • заголовки и гиперссылки выравнивать по центру;
- • для абзацев текста использовать различные варианты выравнивания (по ширине, по левому краю, по правому краю);
- • использовать разные способы выравнивания фотографий;
- • обязателен фоновый цвет страницы;
- • на каждой странице должен быть заголовок окна;
- • для заголовков использовать шрифт Arial, для основного текста — Verdana (размеры подобрать самостоятельно).
- 2. Протестировать работоспособность сайта в браузере (по возможности в двух различных браузерах).
- 3. Протестировать работоспособность сайта при выключенной графике.
- 4. Изменить в настройках браузера шрифт по умолчанию на Courier New, размер 14 и убедиться, что это не повлияло на внешний вид страниц вашего сайта.
- 5. Разместить созданный сайт на любом бесплатном хостинге (например, на
- Проверить его работоспособность.
- 1. Создать сайт на тему «Времена года», «Животные» или «Природа», состоящий не менее чем из пяти страниц. Перед созданием сайта найти соответствующие вашей теме фотографии (скачать из Интернета, отсканировать или сфотографировать).
- Первая страница сайта должна содержать заголовок и графические миниатюры ваших изображений (их уменьшенные копии). Изменение размеров изображений выполнить в Adobe Photoshop, ACDSee или другом графическом приложении, работающем с форматом JPEG. Каждая графическая миниатюра должна являться гиперссылкой на соответствующую страницу сайта (обязательно наличие всплывающих подсказок).
- Требования к сайту:
- • обязательно использовать текстуру (фоновый рисунок) на каждой странице;
- • обязателен текст (минимум два абзаца из трех полных строк) на каждой странице;
- • обязательны заголовки на всех страницах;
- • обязательны заголовки окон;
- • для заголовков и основного текста использовать различные шрифты.
- 2. Протестировать работоспособность сайта в браузере (по возможности в двух различных браузерах).
- 3. Протестировать работоспособность сайта при выключенной графике.
- 1. Создать Web-сайт произвольной фирмы, состоящий не менее чем из четырех страниц. Сайт должен содержать страничку новостей, информацию об оказываемых услугах и ценах на них, информацию о сотрудниках фирмы, контактную информацию. Для перемещения по сайту пользователь не должен возвращаться на главную страницу (панель навигации должна присутствовать на всех страницах сайта). Заголовок сайта должен содержать логотип (разработать самостоятельно) и название (в графическом виде). Для этого использовать любой известный вам графический редактор, а затем полученное изображение преобразовать в формат JPEG с помощью Photoshop. Сайт должен быть выдержан в едином дизайнерском стиле (одинаковые шрифты для однотипных элементов, единая цветовая гамма, одинаковое расположение гиперссылок на всех страницах сайта).
- 2. Протестировать работоспособность сайта в браузере (по возможности в двух различных браузерах).
- 3. Протестировать работоспособность сайта при выключенной графике.
- 1. Разработать Web-сайт вашего класса (не менее 6-8 страниц).
- 2. Протестировать Web-сайты ваших одноклассников и отметить слабые стороны каждого сайта.
- 3. Провести голосование по выбору лучшего сайта класса.
- 4. Разместить лучший сайт на любом бесплатном хостинге или сервере вашей школы (если таковой имеется).
Написать письмо
