Добавить материал

и получить 10 документов
и свидетельство автора

Изображение пользователя Шумская Лариса Анатольевна Шумская Лариса Анатольевна

Практическая работа №39 Средства создания и сопровождения сайта.

  • docx
  • 19.11.2021
Публикация на сайте для учителей

Публикация педагогических разработок

Бесплатное участие. Свидетельство автора сразу.
Мгновенные 10 документов в портфолио.

Добавить материал
Иконка файла материала Л2-002564.docx

Практическая работа №39

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

 

Цель работы:

  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- страницы:

 Заголовок web - документа

head>

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

web- странице -- >

body>

</ html>

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

  • сохраните изменения;
  • просмотрите результат работы в браузере
  1. Формирование линий. Длину, ширину, цвет и расположение горизонтальных линий ( тег <HR>) можно задавать с помощью дополнительных атрибутов.

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

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

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

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

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

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

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

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

 

  1.  

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 пикселов, цвет –по своему выбору) ;
  • Сохраните данные;
  1. Задание фона web- страницы задается с помощью параметра Bgcolor тега < Body> в виде шестнадцатеричного числа или словесного названия оттенка, но на большинстве сайтов используются белый фон и черный текст.

4.1. Задайте для web- страницы оливковый фон с помощью команды

<Body Bgcolor=#808000> Body>.

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

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

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

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

Выравнивание абзацев задается с помощью атрибута ALIGN, записываемого в составе открывающего тега абзаца <P> ( тал.2)

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

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

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

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

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

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

Таблица 6.3

Рис. 6.15. Примеры гарнитур шрифта

Окончание табл. 6.3

  1.  

1.      Откройте в Блокноте файл шаблон. html.

2.      Сохраните файл в папке Страница под именем текст. html.

3.      В файле текст. Html введите следующий текст: Вводим любой текст

4.      Просмотрите результат ввода текста в браузере.

5.      Заключите каждый абзац в контейнер абзаца, например <P> Стили в интерьере.P>.

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

< P Align =Center> Стили в интерьере.

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

5.8 Результат проделанной работы сравните с рис. 6.16 и покажите преподавателю.

5.9 Выполните задание № 1 и покажите преподавателю результат работы.

Задание 1.

В конце всего текста задайте размеры шрифта от 1 до 7 и примените теги шрифтового выделения.

  1. Использование маркированного, нумерованного и многоуровневого списков на web- странице. Набор элементов ( абзацев) со специально выбранным символом - маркером ( круг по умолчанию, окружность, квадрат) – представляет собой маркированный список. Данный список задается с помощью контейнера

 

 

Практическая работа №39 Средства создания и сопровождения сайта Страница на своем компьютере; закройте текстовый редактор; просмотрите файл шаблон Атрибут цвета ( Color ): = цвет, где в качестве значения после знака равенства пишется название цвета английскими буквами и задается числовой код оттенка (… С помощью контейнера < Font> …

Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.

Посмотрите также