Инфоурок Информатика Другие методич. материалыИнструкционная карта ко второй практической работе "Форматирование HTML-документа", проводимая в рамках темы: Создание сайта при помощи языка гипертекстовой разметки HTML

Инструкционная карта ко второй практической работе "Форматирование HTML-документа", проводимая в рамках темы: Создание сайта при помощи языка гипертекстовой разметки HTML.

Скачать материал

СОЗДАНИЕ САЙТА ПРИ ПОМОЩИ ЯЗЫКА РАЗМЕТКИ ГИПЕРТЕКСТА HTML

(практические работы)

Чегодаева Анастасия Владимировна

преподаватель информатики и информационных технологий в профессиональной деятельности, БПОУ ВО «Кадуйский энергетический колледж»

высшее образование

 

Практическая работа № 2. «Форматирование HTML-документа»

 

Цель: познакомиться с тегами форматирования HTML-документа; научиться выравнивать текст и заголовки, задавать начертание и цвет фрагментам текста, создавать горизонтальную линию.

Оборудование: компьютер, браузер, инструкционная карта практической работы.

 

ЗАДАНИЕ 1: Задайте основному тексту сайта выравнивание по ширине, используя значение justify параметра ALIGN, и размер шрифта, например, 4 (не больше размера шрифта заголовка).

 

Для этого:

1.      Откройте папку «Proekt» → откройте первую страницу сайта при помощи программы Блокнот.

2.      В html-коде первой страницы после тега <BODY> наберите следующее:

<P><font ALIGN=justify COLOR="black" size=4>, а закрывающийся тег следует поставить в конце основного текста. Это позволит всему тексту задать один формат.

3.      Сохраните изменения Нtml-кода первой страницы сайта.

4.      Посмотрите, как теперь изменилась web-страница в браузере.

5.      Если необходимо откорректировать информацию страницы, то: снова открываете файл Str1.htm при помощи программы Блокнот, вносите в html-код соответствующие изменения, сохраняете и смотрите вашу страницу после редактирования, выбрав вверху окна браузера  команду Обновить (значок ).

 

ЗАДАНИЕ 2: В Нtml-коде первой страницы задайте параметры форматирования для заголовка (цвет, шрифт, размер) или необходимому фрагменту текста при помощи тега <FONT> и его атрибутов (см. дополнительную информацию к ПР № 2), а также задайте начертание текста при помощи тегов, задающих начертание текста (см. дополнительную информацию к ПР № 2).

 

Для этого:

1.      Аналогично примерам 1 и  2 задайте цвет и начертание фрагментам текста и заголовку страницы.

Пример 1: задание параметров форматирования и начертания для заголовка страницы:

<h2 ALIGN=Center><font  COLOR="FF3333"><B>Компьютерные сети</B></h2></font>

(в данном примере цвет заголовка красный, начертание - полужирное)

Пример 2: форматирование фрагмента текста - выделение в тексте определения «Сетевые технологии»:   <font color="FF0066"><B>сетевые технологии</B></font>

      (в данном примере цвет текста розовый, начертание текста - полужирное)

 

2.      Сохраните изменения Нtml-кода первой страницы сайта.

3.      Посмотрите, как теперь изменилась web-страница в браузере.

4.      Если необходимо откорректировать информацию страницы, то: снова открываете файл Str1.htm при помощи программы Блокнот, вносите в html-код соответствующие изменения, сохраняете и смотрите вашу страницу после редактирования, выбрав вверху окна браузера  команду Обновить (значок ).

 

ЗАДАНИЕ 3: Создайте горизонтальную линию при помощи тега <HR>, которая занимает всю ширину окна браузера. Кроме того, задайте линии цвет и толщину, при помощи параметров тега <HR> (см. дополнительную информацию к ПР № 2).

 

Для этого:

1.      В Нtml-коде первой страницы перед тегом <BODY> после тегов форматирования заголовка наберите следующее: 

<hr  WIDTH=100% NOSHADE SIZE=2 COLOR="FF3333">

(цвет горизонтальной линии – красный, размер – 2, длина - во всю ширину окна браузера)

2.      Сохраните изменения Нtml-кода первой страницы сайта, посмотрите изменения в браузере и, при необходимости, откорректируйте содержимое страницы.

3.      Аналогично отформатируйте другие страницы сайта.

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

 

Дополнительная информация к практической работке № 2:

 

1.      Тег <FONT> и его атрибуты.

Тег <FONT> и его атрибуты позволяют задать параметры форматирования шрифта любого фрагмента текста.

Для тега <FONT> могут задаваться следующие атрибуты:

·        FASE позволяет задавать гарнитуру шрифта (например, FASE=”Arial”);

·        SIZE задаёт размер шрифта  в неких "абсолютных" единицах  от 1 до 7 (например, SIZE=4);

·        COLOR устанавливает цвет шрифта, который может задаваться с помощью стандартных имён или в формате #RRGGBB (например, COLOR=”green” или COLOR=”#00000FF”).    

 

2.      Теги, задающие начертание текста.

 

Название контейнера

Действие

<B></B>

Отображает текст полужирным шрифтом

<I></I>

Отображает текст курсивом

<TT></TT>    

Отображает текст моноширинным шрифтом

<U></U>       

Отображает текст подчёркнутым

 

3.      Горизонтальные линии.

Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы.

Тег <HR> позволяет провести горизонтальную линию в окне большинства браузеров.

Этот тег не является контейнером, поэтому не требует закрывающего тега.

До и после линии автоматически вставляется пустая строка.

 

Параметры тега <HR>:

Align - выравнивает линию по краю или центру и имеет значения: left, right, center;

Width - устанавливает длину линии в пикселах или процентах от ширины окна браузера;

Size - устанавливает толщину линии в пикселах;

Noshade - отменяет рельефность линии;

Color - указывает цвет линии, при этом используется формат RGB или стандартное имя.

 

Например: <HR WIDTH=100% NOSHADE SIZE=3 COLOR="FF3333">.

(цвет горизонтальной линии – красный, размер – 3, длина - во всю ширину окна браузера)

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Инструкционная карта ко второй практической работе "Форматирование HTML-документа", проводимая в рамках темы: Создание сайта при помощи языка гипертекстовой разметки HTML"

Методические разработки к Вашему уроку:

Получите новую специальность за 3 месяца

Флорист

Получите профессию

Методист-разработчик онлайн-курсов

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Краткое описание документа:

Практическая работа № 2. «Форматирование HTML-документа» Цель: познакомиться с тегами форматирования HTML-документа; научиться выравнивать текст и заголовки, задавать начертание и цвет фрагментам текста, создавать горизонтальную линию. Оборудование: компьютер, браузер, инструкционная карта практической работы. ЗАДАНИЕ 1: Задайте основному тексту сайта выравнивание по ширине, используя значение justify параметра ALIGN, и размер шрифта, например, 4 (не больше размера шрифта заголовка).

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 743 235 материалов в базе

Материал подходит для УМК

Скачать материал

Другие материалы

  • 12.01.2023
  • 130
  • 1
«Информатика (базовый уровень)», Угринович Н.Д.
Практическая работа "Графическое представление табличных данных в ЭТ
  • Учебник: «Информатика (изд. "БИНОМ. Лаборатория знаний")», Угринович Н.Д.
  • Тема: 4.3. Построение диаграмм и графиков в электронных таблицах
  • 12.01.2023
  • 485
  • 15
«Информатика (изд.

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 12.01.2023 90
    • DOCX 34 кбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Чегодаева Анастасия Владимировна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    • На сайте: 3 года и 9 месяцев
    • Подписчики: 0
    • Всего просмотров: 6163
    • Всего материалов: 15

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Мини-курс

Психоаналитический подход: изучение определенных аспектов психологии личности

4 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 21 человек из 14 регионов

Мини-курс

Концепции управления продуктом и проектом: стратегии и практика.

10 ч.

1180 руб. 590 руб.
Подать заявку О курсе

Мини-курс

Освобождение от манипуляции: стратегии защиты и восстановления

2 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 20 человек из 15 регионов