Методическая разработка практической работы

Средства создания и сопровождения сайта.

Цели: познакомиться с созданием простейших Web-страниц с использованием текстового редактора (блокнот).

Оборудование:  ПК, ноутбук, мультимедийная доска.

Ход выполнения работы

1. Создание шаблона web-страницы. HTML- документ ( простой текстовый файл, содержащий текст и текстовые HTML – теги) всегда должен начинаться с открывающего тега и заканчиваться закрывающим тегом  . Внутри документа выделяют два раздела: раздел заголовков и тело документа. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами и  . Этот раздел должен включать в себя контейнер общего документа < TITLE> … . Содержимое   web- страницы размещается в теле документа, которое ограничивается тегами  и .

Создайте шаблон web-страницы. Для этого выполните следующие действия:

• создайте папку Страница на Рабочем столе. Все последующие файлы сохраняйте в данной папке;
• откройте текстовый редактор Блокнот;
• напечатайте команды в текстовом редакторе для создания web-страницы:

             

        содержимое web-страницы ( тело документа)

• сохраните готовый шаблон под именем шаблон.html в папку Страница на своем компьютере;
• закройте текстовый редактор;
• просмотрите файл шаблон.html;
• откройте файл шаблон.html с помощью редактора Блокнот;
• внесите изменения : заголовок « Дизайн отделка» и в тело документа введите текст « Первая web-страница будет посвящена стилям оформления квартир”;
• сохраните получившийся файл под именем index.html в папке Страница (index.html – это стандартное имя головного документа, с которого начинается загрузка сайта);
• просмотрите результат работы в браузере.

2. Создание заголовков разных уровней. В HTML предусмотрено шесть уровней заголовков, которые задаются с помощью парных тегов

   …

   ( первый заголовок самый крупный, а остальные мельче). По умолчанию заголовки выравниваются по левому краю ( 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. Формирование линий. Длину, ширину, цвет и расположение горизонтальных линий ( тег

   ---

   ) можно задавать с помощью дополнительных атрибутов.

Атрибут выравнивания (Align )

 Align=Left- выравнивание по левому краю;

 Align=Center – выравнивание по центру;

Align= Right –выравнивание по правому краю.

Атрибут размера ( Size )

• Size = число высоту линии в пикселях ( [ 1;100], целые числа);
• Size = число – задает длину линии в пикселях;
• Size = число % - задает длину линии в процентах от ширины окна браузера.

Атрибут цвета ( Color ): = цвет, где в качестве значения после знака равенства пишется название цвета английскими буквами и задается числовой код оттенка ( табл.)

                                                Палитра цветов

1. Откройте файл уровни.html и сохраните его под именем линии.html в папке Страница.
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- страницы оливковый фон с помощью команды

.

4.2 Измените фон сайта.

4.3 Результат выполненной работы сохраните в файле фон.html и покажите преподавателю.

5. Оформление текста на web-странице. Обособленный абзац текста в html- документе нужно заключать в контейнер

….

В этом случае абзацы разделяются небольшим промежутком. Если нужно начать какой – либо текст с новой строки, то необходимо использовать в требуемом месте разрыва строки одиночный тег < BR>.

 Выравнивание абзацев задается с помощью атрибута ALIGN, записываемого в  составе открывающего тега абзаца

.

Теги форматирования абзацев

С помощью контейнера < Font> …. можно менять такие параметры шрифта, как гарнитура), размер (size) и (Color).

Параметр size задает размер шрифта в условных единицах ( от 1 до 7).

Атрибут Color определяет цвет текста, который можно задавать с помощью названий цветов или в шестнадцатеричном формате.

   Контейнеры увеличения (…) и уменьшения  (…) размера шрифта могут быть многократно вложенными друг друга, чтобы увеличить или уменьшить текст до нужных размеров.

 Контейнеры для шрифтового выделения представлены в таблице.

        Примеры гарнитур шрифта

  Текст 

1. Откройте в Блокноте файл шаблон.html.
2. Сохраните файл в папке Страница под именем текст.html.
3. В файле текст.html введите текст.
4. Просмотрите результат ввода текста в браузере.
5. Заключите каждый абзац в контейнер абзаца, например

   Стили в интерьере.

   .
6. Заголовку « Стили в интерьере» назначьте вид заголовка первого уровня, расположенного по центру. Оформите заголовок с использованием полужирного, подчеркнутого текста и размером шрифта 6.    

  Стили в интерьере.

7.  Оформите названия стилей в интерьере полужирным шрифтом Arial.

Покажите преподавателю результат работы.