Практическое занятие 2 - ЭУМК по Информатике - UNREGISTERED VERSION

Перейти к контенту

Главное меню:

Практическое занятие 2

Раздел 5. Телекоммуникационные технологии > Тема 5.2. Методы создания и сопровождения сайта

Практическое задание 2 (2 часа).
Методы и средства  сопровождения сайта.
Методы и средства сопровождения сайта образовательной организации.

Создание шаблона 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 в папке Страница.
Отделите все заголовки горизонтальными линиями. Для этого выполните следующие действия:
после заголовка первого уровня добавьте горизонтальную линию  и расположите ее по центру ( высота линии – 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 пикселов, цвет –по своему выбору) ;
Сохраните данные;
Задание фона web- страницы задается с помощью параметра Bgcolor тега < Body> в виде  шестнадцатеричного числа или словесного названия оттенка, но на большинстве сайтов используются белый фон и черный текст.
4.1. Задайте для web- страницы оливковый фон с помощью команды
<Body  Bgcolor=#808000> </Body>.
4.2 Измените фон сайта на серебристый.
4.3 Результат выполненной работы сохраните в файле фон. html и покажите преподавателю.
5. Оформление текста на web- странице. Обособленный абзац текста в html- документе нужно заключать в контейнер <P>….</P>.
В этом случае абзацы разделяются небольшим промежутком. Если нужно начать какой – либо текст с новой строки, то необходимо использовать в требуемом месте разрыва строки одиночный тег < BR>.
Выравнивание абзацев задается с помощью атрибута ALIGN, записываемого в  составе открывающего тега абзаца <P>
сохраните готовый шаблон под именем шаблон. html в папку Страница на своем компьютере;
закройте текстовый редактор;
просмотрите файл шаблон.html;
откройте файл шаблон.html с помощью редактора Блокнот;
внесите изменения : заголовок « Дизайн отделка» и в тело документа введите текст « Первая web- страница будет посвящена стилям оформления квартир";
сохраните получившийся файл под именем index.html в папке Страница (index.html – это стандартное имя головного документа, с которого начинается загрузка сайта);
просмотрите результат работы в браузере.
Создание заголовков разных уровней. В 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>.
сохраните изменения;
просмотрите результат работы в браузере
Формирование линий. Длину, ширину, цвет и расположение горизонтальных линий ( тег <HR>) можно задавать с помощью дополнительных атрибутов.
Атрибут выравнивания (Align )
 Align=Left- выравнивание по левому краю;
Align=Center – выравнивание по центру;
Align= Right –выравнивание по правому краю.
Атрибут размера ( Size )
Size = число высоту линии в пикселах ( [ 1;100], целые числа);
Size = число – задает длину линии в пикселях;
Size = число % - задает длину линии в процентах от ширины окна браузера.
Атрибут цвета ( Color ): = цвет, где в качестве значения после знака равенства пишется название цвета английскими буквами и задается числовой код оттенка (табл.)

  С помощью контейнера < Font> …. </Font> можно менять такие параметры шрифта, как гарнитура ( Face, рис.6.15), размер ( size) и ( Color).
 Параметр size задает размер шрифта в условных единицах ( от 1 до 7).
  Атрибут Color определяет цвет текста, который можно задавать с помощью названий цветов или в шестнадцатеричном формате.
  Контейнеры увеличения ( < BIG>…</BIG>) и уменьшения  (<SMALL>…</SMALL>) размера шрифта могут быть многократно вложенными друг друга, чтобы увеличить или уменьшить текст до нужных размеров.
  Контейнеры для шрифтового выделения представлены в таблице

 Откройте в Блокноте файл шаблон. html.
Сохраните файл в папке Страница под именем текст. html.
В файле текст. Html введите следующий текст: Вводим любой текст
Просмотрите результат ввода текста в браузере.
Заключите каждый абзац в контейнер абзаца, например <P> Стили в интерьере.</P>.
Заголовку « Стили в интерьере» назначьте вид заголовка первого уровня, расположенного по центру. Оформите заголовок с использованием полужирного, подчеркнутого текста и размером шрифта, равным 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 и примените теги шрифтового выделения.
Использование маркированного, нумерованного и многоуровневого списков на web- странице. Набор элементов ( абзацев) со специально выбранным символом -  маркером ( круг по умолчанию, окружность, квадрат) – представляет собой маркированный список. Данный список задается с помощью контейнера   



 
 
Назад к содержимому | Назад к главному меню