Практическая работа
Средства создания и сопровождения сайта
Цель работы:
1. сформировать навыки создания шаблона web- страницы;
2. научиться создавать заголовки разного уровня;
3. овладеть технологией форматирования линий;
4. получить представление, как оформляется текст на web- странице;
5. научиться создавать маркированные, нумерованные и многоуровневые списки на web- странице.
План работы:
1. создание шаблона web- страницы.
2. создание заголовков разных уровней.
3. форматирование линий.
4. задание фона web- страницы.
5. оформление текста на web- странице.
6. использование маркированного, нумерованного и многоуровневого списков на web- странице.
7. выполнение зачетного задания.
Все представленные в работе файлы представлены в электронном приложении.
Теоретические сведения
Технология создания сайта предусматривает:
1. выбор темы сайта;
2. планирование сайта в целом;
3. планирование отдельных страниц сайта;
4. создание web- страниц и сайта с использованием программного средства;
5. тестирование сайта (удобство навигации, целостность данных, корректность ссылок, орфография, просмотр сайта в целом);
6. публикацию сайта.
Инструментарий для создания сайта включает в себя: обычные текстовые редакторы, HTML- и WYSIWYG- редакторы.
Навигация – важнейший элемент сайта, показывающий посетителю место нахождения и место дальнейшего движения по сайту. Существуют линейная и параллельная навигации.
Ход выполнения работы
1. Создание шаблона web- страницы. HTML- документ (простой текстовый файл, содержащий текст и текстовые HTML – теги) всегда должен начинаться с открывающего тега <HTML> и заканчиваться закрывающим тегом </HTML>. Внутри документа выделяют два раздела: раздел заголовков и тело документа. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <HEAD> и </ HEAD>. Этот раздел должен включать в себя контейнер общего документа < TITLE> … </TITLE>. Содержимое web- страницы размещается в теле документа, которое ограничивается тегами <BODY> и </ BODY>.
Создайте шаблонweb- страницы. Для этого выполните следующие действия:
· создайте папку Страница на Рабочем столе. Все последующие файлы сохраняйте в данной папке;
· откройте текстовый редактор Блокнот;
· напечатайте команды в текством редакторе для создания web- страницы:
<html>
<head>
<title> Заголовок web - документа </title>
</ head>
<body> содержимое web- страницы (тело документа)
<!—Комментарии, которые не отображаются на web- странице -- >
</ body>
</ html>
· сохраните готовый шаблон под именем шаблон. html в папку Страница на своем компьютере;
· закройте текстовый редактор;
· просмотрите файл шаблон.html;
· откройте файл шаблон.html с помощью редактора Блокнот;
· внесите изменения: заголовок «Дизайн отделка» и в тело документа введите текст «Первая web- страница будет посвящена стилям оформления квартир”;
· сохраните получившийся файл под именем index.html в папке Страница (index.html – это стандартное имя головного документа, с которого начинается загрузка сайта);
· просмотрите результат работы в браузере.
2. Создание заголовков разных уровней. В HTML предусмотрено шесть уровней заголовков, которые задаются с помощью парных тегов <H1> …<H6> (первый заголовок самый крупный, а остальные мельче). По умолчанию заголовки выравниваются по левому краю (Left), также возможно выравнивание по центру (Center) и правому краю (Align).
· откройте файл index.html;
· сохраните его под именем уровни. html в папку Страница;
· в файле уровни. html оформите текст в виде заголовков различных уровней:
- заголовок первого уровня (выравнивание по центру)
< H1 Align =Center> Первая web- страница будет посвящена стилям оформления квартир! < /H1>
- заголовок второго уровня (выравнивание по левому краю)
< H2 Align = Left >Заголовок второго уровня < /H2>
- заголовок третьего уровня (выравнивание по правому краю)
< H3 Align = Right >Заголовок третьего уровня < /H3>
- заголовок четвертого уровня (выравнивание по центру)
< H4 Align =Center> Заголовок четвертого уровня < /H4>
- заголовок пятого уровня (выравнивание по левому краю)
< H5 Align = Left > Заголовок пятого уровня < /H5>
- заголовок шестого уровня (выравнивание по центру)
< H6 Align = Right >Заголовок шестого уровня < /H6>.
· сохраните изменения;
· просмотрите результат работы в браузере
3. Формирование линий. Длину, ширину, цвет и расположение горизонтальных линий (тег <HR>) можно задавать с помощью дополнительных атрибутов.
Атрибут выравнивания (Align)
Align=Left- выравнивание по левому краю;
Align=Center – выравнивание по центру;
Align= Right –выравнивание по правому краю.