Практическая
работа
Средства создания и сопровождения
сайта
Цель
работы:
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 –выравнивание по правому краю.
Атрибут размера ( Size )
·
Size = число высоту линии в
пикселах ( [ 1;100], целые числа);
·
Size = число – задает длину линии
в пикселях;
·
Size = число % - задает длину
линии в процентах от ширины окна браузера.
Атрибут цвета ( Color ): = цвет, где в качестве значения
после знака равенства пишется название цвета английскими буквами и задается
числовой код оттенка ( табл.)
Палитра цветов
Название
|
Русское название
|
Код
|
Aqua
|
|
#00FFFF
|
Black
|
|
#000000
|
Blue
|
|
#0000FF
|
Fuchsia
|
|
#FF00FF
|
Gray
|
|
#808080
|
Green
|
|
#008000
|
Lime
|
|
#00FF00
|
Maroon
|
|
#900000
|
Navy
|
|
#000080
|
Olive
|
|
#808000
|
Purple
|
|
#800080
|
Red
|
|
#FF0000
|
Silver
|
|
#C0C0C0
|
Teal
|
|
#008080
|
White
|
|
#FFFFFF
|
Yellow
|
|
#FFFF00
|
3.1
Откройте
файл уровни. html и сохраните его под
именем линии. html в
папке Страница.
3.2
Отделите
все заголовки горизонтальными линиями. Для этого выполните следующие действия:
·
после
заголовка первого уровня добавьте горизонтальную линию и расположите ее по
центру ( высота линии – 7 пикселов, длина – 650 пикселов, цвет – желтый ) с
помощью команд.
< HR Align = Center Size =7
Width = 650 Color = yellow>
·
после
заголовка второго уровня добавьте горизонтальную линию и расположите ее по
левому краю ( высота линии – 15 пикселов, длина – 400 пикселов, цвет –
малиновый) с помощью команд
< HR Align = Left Size =15
Width = 400 Color = maroon>
·
после
заголовка третьего уровня добавьте горизонтальную линию и расположите ее по
правому краю ( высота линии – 10 пикселов, длина – 300 пикселов, цвет –
лиловый) с помощью команд
< HR Align =Right Size =10
Width = 300 Color = fuchsia>
·
после
заголовка четвертого уровня добавьте горизонтальную линию и расположите ее по
центру ( высота линии – 200 пикселов, длина – 700 пикселов, цвет – по своему
выбору) ;
·
после
заголовка пятого уровня добавьте горизонтальную линию и расположите ее по
левому краю ( высота линии – 250 пикселов, длина – 500 пикселов, цвет –по
своему выбору) ;
·
после
заголовка шестого уровня добавьте горизонтальную линию и расположите ее по
правому краю ( высота линии – 200 пикселов, длина – 500 пикселов, цвет –по
своему выбору) ;
·
Сохраните
данные;
4.
Задание
фона web- страницы задается с помощью
параметра Bgcolor тега < Body> в виде шестнадцатеричного числа
или словесного названия оттенка, но на большинстве сайтов используются белый фон
и черный текст.
4.1. Задайте для web- страницы оливковый фон с помощью
команды
<Body Bgcolor=#808000> </Body>.
4.2 Измените фон сайта на
серебристый.
4.3 Результат выполненной работы
сохраните в файле фон. html и покажите преподавателю.
5. Оформление текста на web- странице. Обособленный абзац текста в html- документе нужно заключать в
контейнер <P>….</P>.
В этом случае абзацы разделяются
небольшим промежутком. Если нужно начать какой – либо текст с новой строки, то
необходимо использовать в требуемом месте разрыва строки одиночный тег < BR>.
Выравнивание абзацев задается с помощью
атрибута ALIGN, записываемого в составе открывающего
тега абзаца <P> ( тал.2)
Теги
форматирования абзацев
Тег
|
Описание
|
<P> текст абзаца </P>
|
Перед новым абзацем автоматически
добавляется небольшой отступ
|
< P Align = Left > текст </P>
|
Выравнивание абзаца по левому краю
|
< P Align =Right> текст </P>
|
Выравнивание абзаца по правому краю
|
< P Align =Center> текст </P>
|
Выравнивание абзаца по центру
|
< P Align =Justify> текст </P>
|
Выравнивание абзаца по ширине
|
Текст 1 <BR> Текст 2
|
Тег разрыва строки
|
< Nobr> Текст </Nobr>
|
Запрет разрывов и переносов слов
|
Текст 1 <WBR> Текст 2
|
Перенос строки в указанном месте
|
С помощью контейнера < Font> …. </Font> можно менять такие параметры
шрифта, как гарнитура ( Face, рис.6.15),
размер ( size) и ( Color).
Параметр size задает размер шрифта в условных
единицах ( от 1 до 7).
Атрибут Color определяет цвет текста, который
можно задавать с помощью названий цветов или в шестнадцатеричном формате.
Контейнеры увеличения ( < BIG>…</BIG>) и уменьшения (<SMALL>…</SMALL>) размера шрифта могут быть многократно
вложенными друг друга, чтобы увеличить или уменьшить текст до нужных размеров.
Контейнеры для шрифтового
выделения представлены в табл.6.3
Таблица
6.3
Тег
|
Описание
|
<B> Текст </B>
|
Полужирный
|
<STRONG> Текст </STRONG>
|
<I> Текст </I>
|
Курсив
|
<EM> Текст </EM>
|
Arial, Arial Black, Arial Narrow,
Book Antiqua, Bookman Old Style, Century Gothic, Gooper Black, Courier New,
Elephant, Impact, Mangal, Monotype Corsiva, Times New Roman, Tahoma, Verdana
|
Рис. 6.15. Примеры гарнитур шрифта
Окончание табл. 6.3
Тег
|
Описание
|
<U> Текст </U>
|
Подчеркнутый текст
|
E=mc < SUP> 2 </SUP>
|
Верхний индекс
|
H < SUP> 2 </SUP>0
|
Нижний индекс
|
<STRIKE> Текст </STRIKE>
|
Зачёркнутый текст
|
<PRE> Текст </PRE>
|
Обычный текст
|
5.1.Откройте в Блокноте файл шаблон.
html.
5.2.Сохраните файл в папке Страница
под именем текст. html.
5.3.В файле текст. Html введите следующий текст: Вводим
любой текст
5.4.Просмотрите результат ввода текста в
браузере.
5.5.Заключите каждый абзац в контейнер
абзаца, например <P> Стили в интерьере.</P>.
5.6.Заголовку « Стили в интерьере»
назначьте вид заголовка первого уровня, расположенного по центру. Оформите заголовок
с использованием полужирного, подчеркнутого текста и размером шрифта, равным 6,
т.е.
< P Align =Center> <B>
<U><Font size=6> Стили в интерьере.
</Font></U></B></P>
5.7 Оформите названия стилей в
интерьере полужирным шрифтом Arial и
размером, равном 4.
5.8 Результат проделанной работы
сравните с рис. 6.16 и покажите преподавателю.
5.9 Выполните задание № 1 и покажите
преподавателю результат работы.
Задание 1.
В конце всего текста задайте размеры
шрифта от 1 до 7 и примените теги шрифтового выделения.
6. Использование маркированного,
нумерованного и многоуровневого списков на web- странице. Набор элементов ( абзацев) со
специально выбранным символом - маркером ( круг по умолчанию, окружность,
квадрат) – представляет собой маркированный список. Данный список
задается с помощью контейнера
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.