Слайд 1

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

Слайд 2

HTML- код web -страницы Рассмотреть код любой страницы можно разными способами: 1 СПОСОБ . Применить сочетание клавиш: Ctrl + Shift+I или вызвать меню правой клавиши мыши (ПКМ) – Просмотреть код (или Исходный код); Задание: открыть HTML- код любой страницы в интернете (например, свою страничку , созданную в он- лайн конструкторе), беглым взглядом просмотреть код, прокрутив страницу от начала до конца. Любая web -страница может содержать текст, графику и гиперссылки на другие ресурсы Интернета. Чтобы реализовать все эти возможности, был разработан специальный язык описания web -документов, названный HyperText Markup Language (HTML), то есть, Язык Разметки Гипертекста. Описание Web -страницы на языке HTML представляет собой набор инструкций, интерпретируемый программой-браузером. В основе любой web- страницы заложен код, написанный на HTML, который представляет собой текстовый файл, содержащий собственно текст, несущий информацию читателю, и теги разметки ( markup tags ). Теги – это определенные стандартом HTML, последовательности символов, являющиеся инструкциями для браузера. Согласно этим инструкциям программа располагает текст на экране, включает в него рисунки, хранящиеся в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Интернет. Таким образом, файл на языке HTML приобретает облик Web -документа только тогда, когда он интерпретируется браузером.

Слайд 3

2 способ. Просмотр и Редактирование HTML- кода страницы с использованием меню настроек браузера - Дополнительные инструменты - Инструменты разработчика В браузере Google Chrome в правом верхнем углу развернуть «Управление и настройки браузера» (иконка с тремя точками)- Дополнительные инструменты - Инструменты разработчика В правой части окна браузера откроется панель разработчика, в которой не только виден HTML- код, но и есть возможность вносить в него изменения и наблюдать, как изменяется содержимое страницы. ЗАДАНИЕ. Найти web- страницу: https :// ru.wikipedia.org/wiki /Эрмитаж Находясь на этой странице открыть панель «Инструменты разработчика»

Слайд 4

Рассмотрим HTML -код страницы HTML- код состоит из тегов, заключенных в угловые скобки, атрибутов тегов, значений атрибутов и содержимого , расположенного между открывающей и закрывающей частью тега. Теги – это определенные стандартом HTML, последовательности символов, являющиеся инструкциями для браузера, по которым определяется тип блока, отображаемого на странице (текст, изображение, ссылка, форма для заполнения и пр.), атрибут определяет свойства данного блока, а содержимое сообщает, что конкретно будет отображаться на странице в данном блоке . Содержимое тега может включать в себя большое количество вложенных тегов . Чтобы открыть вложенные теги, нажать на стрелочку слева от тега.

Слайд 5

Практическая работа: 1. Развернуть следующие вложенные теги : 2 . Изменить содержимое: - навести курсор на содержимого тега заголовка

, в меню правой клавиши мыши (ПКМ) выбрать «Редактировать HTML » ( « Edit as HTML » ) , - вместо текста «Эрмитаж» напечатать «Музейный комплекс Государственный Эрмитаж», - нажать клавишу «Ввод» ( Enter ) и посмотреть, как изменился соответствующий заголовок на странице. Сделать фотографию или скрин-шот экрана, прикрепить изображение к сообщению в беседе. Произведенный таким образом изменения не меняют исходный код-сайта , будут видны только на данном компьютере и до обновления страницы. Сильно подпортить страничку в Wikipedia не удастся  Данный инструмент широко используется web- разработчиками для анализа и кода, поиска примеров реализации кода.

Слайд 6

Практическая работа ( продолжение ) : 3 . В меню правой клавиши мыши (ПКМ) на панели разработчика выбрать для тегов и - «Удалить элемент» ( Delete element ) 5. Кликнуть мышью за пределами панели разработчика - получилась совсем новая страница. Как результат - сделать фотографию или скрин-шот экрана, прикрепить изображение к сообщению в беседе. Данный HTML- код сохранить не удастся. По этому, на следующем занятии мы приступим к работе в специальной программе, предназначенной для создания и редактирования HTML- документов – NotePad ++ Программа распространяется бесплатно, можно установить с официального сайта разработчика: https://notepad-plus-plus.org/downloads/v7.9/ 4 . ПКМ- «Редактировать как HTML » (Edit as HTML) добавить следующие теги: