Слайд 1

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

Слайд 2

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

…

и

…

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

…

…

…

Абзац простого текста помещается в тег

..

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

Слайд 3

Форматирование текста Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста. Табл. 1. Теги для форматирования текста Код HTML Описание Пример Текст Жирное начертание текста Текст Текст Курсивное начертание текста Текст ^{Текст Верхний индекс e=mc 2 _{Текст Нижний индекс H 2 O}}

 Текст Текст пишется как есть, включая все пробелы Текст  Текст Курсивный текст Текст  Текст Жирное начертание текста Текст Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов  и < i> . Их порядок в данном случае не важен. Теги < strong > и < em > выполняют те же функции, что теги  и  , но написание последних короче, привычней и удобней. Следует отметить, что теги  и < strong > , также как  и < em > являются не совсем эквивалентными и заменяемыми. Первый тег  — является тегом физической разметки и устанавливает жирный текст, а тег < strong > — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов  и < strong > , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
Слайд 4
Пример Форматирования текста < html > < head > < meta http-equiv = " Content-Type " content = " text / html ; charset =utf-8 " > < title > Текст   < body > 
 Он словно вырезан из < b> камня  , стоек и неподвижен в отличие от его противников.  Дух и жизненная сила  в нём достигла  совершенства  . Но вот беда — никто не смеет принять его вызов. 
  
Слайд 5
Задание 2 Используя теги, из таблицы создать страничку, на которой будет отображаться следующий текст:
Слайд 6
Списки Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде . Списки бывают маркированные и нумерованные. Любой список представляет собой контейнер (тег) < ul > , который устанавливает маркированный список, или < ol > , определяющий список нумерованный. Каждый элемент списка должен начинаться с тега < li > . Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера < ul > , а каждый пункт списка начинается с тега < li > , как показано ниже . 
 
 Первый пункт  
 Второй пункт  
 Третий пункт  
 Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность, квадрат . Для выбора стиля маркера используется атрибут type тега < ul > . Допустимые значения приведены в табл. Тип списка Код HTML Пример Список с маркерами в виде круга 
 
...
 
 Первый Второй Третий Список с маркерами в виде окружности 
 
...
 
 Первый Второй Третий Список с квадратными маркерами 
 
...
 
 Первый Второй Третий Табл. 2. Стили маркеров списка
Слайд 7
Списки (продолжение) Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега < ol > , который и применяется для создания списка. Каждый пункт нумерованного списка обозначается тегом < li > , как показано ниже. 
 < li> Первый пункт  < li> Второй пункт  < li> Третий пункт   Если не указывать никаких дополнительных атрибутов и просто написать тег < ol > , то по умолчанию применяется список с арабскими числами (1, 2, 3 ,...) В качестве нумерующих элементов могут выступать следующие значения: арабские числа (1, 2, 3, ...); прописные латинские буквы (A, B, C, ...); строчные латинские буквы (a, b, c, ...); прописные римские числа (I, II, III, ...); строчные римские числа (i, ii , iii , ...). Для указания типа нумерованного списка применяется атрибут type тега < ol > . Его возможные значения приведены в табл. 3. Табл. 3. Типы нумерованного списка Тип списка Код HTML Пример Арабские числа 
 
...
 
 1. Чебурашка 2. Крокодил Гена 3. Шапокляк Прописные буквы латинского алфавита 
 
...
 
 A. Чебурашка B. Крокодил Гена C. Шапокляк Строчные буквы латинского алфавита 
 
...
 
 a. Чебурашка b. Крокодил Гена c. Шапокляк Римские числа в верхнем регистре 
 
...
 
 I. Чебурашка II. Крокодил Гена III. Шапокляк Римские числа в нижнем регистре 
 
...
 
 i. Чебурашка ii . Крокодил Гена iii . Шапокляк Как и в обычном текстовом документе, на HTML- странице можно отображать вложенные и смешанные списки.
Слайд 8
Список определений Часто к спискам относят и конструкцию типа: термин - определение Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера < dl > , термин — тегом < dt > , а его определение — с помощью тега < dd > . Вложение тегов для создания списка определений продемонстрировано в примере : < html > < head > < meta http-equiv =" Content-Type " content =" text / html ; charset =utf-8" > < title > Список определений   < body > < dl > < dt > Тег  < dd > Тег — это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др., и для изменения их вида.  < dt > HTML-документ  < dd > Обычный текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код.  < dt > Сайт  < dd > Cайт — это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.     < dl > < dt > Термин 1  < dd > Определение 1  < dt > Термин 2  < dd > Определение 2   Список определений хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т.д. В следующем примере показано одно из возможных использований этого вида списка . Кстати! Запись каждого тега с новой строки – не обязательное требование. Весь HTML- код страницы можно записать в одну строку, и он будет верный. Но такой не структурированный код сложно читать и воспринимать. Пример:
Слайд 9
Задание 3 C оздать смешанный список, вложенный в нумерованный список. Тип нумерации и маркировки выбрать на свое усмотрение. Например: Все задания данного занятия можно выполнить как на отдельных страницах, так и обобщить в одном файле. Для просмотра результата в браузере не забываем сохр а нять документ в формате name.html Результаты прислать в виде скрин-шота или сами файлы.