Презентация на тему "3 Внеурочные занятия 8 класс. Форматирование текста, списки на html-странице"

Содержание

• 
  Слайд 1

  форматирование текста, списки

  Выполнила: Шалагина Екатерина Алексеевна Внеурочные занятия для 8 класса ГБОУ гимназия №293 Санкт-Петербург, 2020

• 
  Слайд 2

  Заголовки, Текст, комментарии

  С тегами

  … и

  …

  мы повстречались на предыдущем занятии. Разберемся с ними более подробно. Как правило перед текстом всегда располагается заголовок. В HTML выделены для этого специальные теги: … … … … Абзац простого текста помещается в тег

  ..

  Задание 1: Вывести на странице все 6 заголовков с любым содержимым, чтобы увидеть их различия. Тег используется для написания комментария в коде HTML документа. HTML комментарии призваны улучшить читабельность кода. В комментариях обычно указывается объяснение участка кода, что упрощает процесс редактирования HTML страницы в дальнейшем. Если часть кода нужно временно удалить, а потом восстановить, то часто применяют комментирование этого фрагмента, т.е. помещают внутрь - браузер игнорирует это содержимое.
• 
  Слайд 3

  Форматирование текста

  Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста. Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов  и . Их порядок в данном случае не важен. Теги  и  выполняют те же функции, что теги  и , но написание последних короче, привычней и удобней. Следует отметить, что теги  и , также как  и  являются не совсем эквивалентными и заменяемыми. Первый тег  — является тегом физической разметки и устанавливает жирный текст, а тег  — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов  и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

• 
  Слайд 4

  Пример Форматирования текста

  Текст

  Он словно вырезан из камня, стоек и неподвижен в отличие от его противников. Дух и жизненная сила в нём достигла совершенства. Но вот беда — никто не смеет принять его вызов.

• 
  Слайд 5

  Задание 2

  Используя теги, из таблицы создать страничку, на которой будет отображаться следующий текст:

• 
  Слайд 6

  Списки

  Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде. Списки бывают маркированные и нумерованные. Любой список представляет собой контейнер (тег) 

  , который устанавливает маркированный список, или 

  , определяющий список нумерованный. Каждый элемент списка должен начинаться с тега 
  1. . Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера 
     , а каждый пункт списка начинается с тега 
     • , как показано ниже.
       • Первый пункт
       • Второй пункт
       • Третий пункт
       Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность, квадрат. Для выбора стиля маркера используется атрибут type тега 
       . Допустимые значения приведены в табл. Табл. 2. Стили маркеров списка
• 
  Слайд 7

  Списки (продолжение)

  Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега 

  , который и применяется для создания списка. Каждый пункт нумерованного списка обозначается тегом 
  1. , как показано ниже.
     1. Первый пункт
     2. Второй пункт
     3. Третий пункт
     Если не указывать никаких дополнительных атрибутов и просто написать тег 
     , то по умолчанию применяется список с арабскими числами (1, 2, 3,...) В качестве нумерующих элементов могут выступать следующие значения: арабские числа (1, 2, 3, ...); прописные латинские буквы (A, B, C, ...); строчные латинские буквы (a, b, c, ...); прописные римские числа (I, II, III, ...); строчные римские числа (i, ii, iii, ...). Для указания типа нумерованного списка применяется атрибут type тега 
     . Его возможные значения приведены в табл. 3. Табл. 3. Типы нумерованного списка Как и в обычном текстовом документе, на HTML-странице можно отображать вложенные и смешанные списки.
• 
  Слайд 8

  Список определений

  Часто к спискам относят и конструкцию типа: термин - определение Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера 

  , термин — тегом , а его определение — с помощью тега . Вложение тегов для создания списка определений продемонстрировано в примере : Список определений Тег Тег — это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др., и для изменения их вида. HTML-документОбычный текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код. Сайт Cайт — это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением. Термин 1 Определение 1 Термин 2 Определение 2 Список определений хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т.д. В следующем примере показано одно из возможных использований этого вида списка. Кстати! Запись каждого тега с новой строки – не обязательное требование. Весь HTML-код страницы можно записать в одну строку, и он будет верный. Но такой не структурированный код сложно читать и воспринимать. Пример:
• 
  Слайд 9

  Задание 3

  Cоздать смешанный список, вложенный в нумерованный список. Тип нумерации и маркировки выбрать на свое усмотрение. Например: Все задания данного занятия можно выполнить как на отдельных страницах, так и обобщить в одном файле. Для просмотра результата в браузере не забываем сохранять документ в формате name.html Результаты прислать в виде скрин-шота или сами файлы.