Слайд 1

Основы языка разметки гипертекста HTML ( h yper t ext m arking l anguage) Выполнила: Шалагина Екатерина Алексеевна Внеурочные занятия для 8 класса ГБОУ гимназия №293 Санкт-Петербург, 2020

Слайд 2

Что такое HTML ? HTML - это инструмент , используемый для написания основы веб-сайтов. По сути, HTML - довольно простой язык разметки (не язык программирования), состоящий из элементов, которые: придают различные параметры для отображаемых элементов на странице- абзац , списки, таблицы; разделяют документ на логические секции- шапка, колонки с контентом, меню, подвал; добавляют контент (содержимое) на страницу -фото, видео, формы для заполнения, блоки с программами и т.д.. Текст, составленный по правилам разметки гипертекста еще называют HTML- кодом. Для создания и редактирования HTML- кода достаточно самого простого текстового редактора (Блокнот, например), но гораздо удобнее использовать такие современные редакторы, как Notepad++, Visual Studio Code, Sublime Tex t и пр. (Я пользуюсь Notepad ++). Современные HTML редакторы имеют в себе множество встроенных механизмов, существенно упрощающих работу с сайтами. Выделение специальных синтаксических конструкций, проверка ошибок, подсказка и вставка часто используемых элементов кода HTML, механизмы автозаполнения – эти и многие другие механизмы современных HTML редакторов каждый день облегчают работу программистов, верстальщиков и дизайнеров . HTML- документ, как правило, запускается с помощью браузера ( Google Chrome ).

Слайд 3

Общий вид HTML- документа Элементы, заключенные в <> - это теги (управляющие команды). Минимальный обязательный набор тегов на странице: … - тег, который сообщает браузеру, что это html- документ. … - тег, в котором содержится техническая информация о текущей странице (кодировка, заголовок, подключаемые библиотеки и т.д.). … - тег, содержащий отображаемые на странице блоки, т.е. то, что увидит пользователь

Слайд 4

Структура HTML- документа В общем виде наша будущая страничка состоит из набора HTML- тегов , которые отвечают за разные виды информации Открывающий тег: Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри угловых скобок. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое. Закрывающий тег: выглядит как и открывающий, но содержит слэш перед названием тега. Он служит п ризнаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось. Содержимое: Как видно, в нашем случае содержимым является простой текст. Элемент: открывающий тег + закрывающий тег + содержимое = элемент. Вложенные элементы. Также теги могут быть вложены друг в друга. Например тег < strong > , который выделит нужное нам слово:

Мой кот < strong >очень сердитый

Теги бывают парные (

…

) и одиночные , не имеют закрывающего тега ( < img >, < br > и пр.) Большинство тегов могут иметь атрибуты со значениями , которые задают определенные характеристики данному элементу, например у тега может быть задан атрибут bgcolor , который указывает цвет фона страницы, со значением « #c0c0c0 » - серый цвет:

Слайд 5

Установка редактора, создание документа и работа в notepad++ Установить Notepad++ (см. предыдущий урок). Запустить редактор Notepad++ Создать новый документ: Меню-Файл-Новый Набрать код нашей первой страницы (слайд 3). Сохранить документ: Файл-Сохранить Создать новую папку, в которую будете сохранять все html- файлы, в ней задать имя файла английскими буквами в следующем формате: Закрыть окно редактора Notepad++ Открыть папку с html- документом, запустить сохраненный файл: дважды кликнуть левой клавишей мыши (ЛКМ) или через меню правой клавиш мыши (ПКМ) – Открыть. Чтобы вернуться к редактированию файла в текстовом редакторе: ПКМ- Edit with Notepad++ или ПКМ - Открыть с помощью – Notepad ++ Ответить на вопрос ы : -где отображается содержимое тега ? -что дела ю т одиночный тег < br > и парный тег ? Скрин-шот получившейся страницы прислать мне. Дополнительно: для тех кто с легкостью справился, на информационном портале htmlbook.ru найти и применить на своей странице атрибуты тега заголовка

, которые определяют цвет текста, фон и выравнивание.

Слайд 6

Первая страница