Презентация на тему "2 Внеурочные занятия 8 класс. Основы языка разметки гипертекста html"

Содержание

• 
  Слайд 1

  Основы языка разметки гипертекста HTML (hyper text marking language)

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

• 
  Слайд 2

  Что такое HTML?

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

• 
  Слайд 3

  Общий вид HTML-документа

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

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

  Структура HTML-документа

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

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

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

  …

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

• 
  Слайд 5

  Установка редактора, создание документа и работа в notepad++

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

  ? -что делают одиночный тег и парный тег ? Скрин-шот получившейся страницы прислать мне. Дополнительно: для тех кто с легкостью справился, на информационном портале htmlbook.ru найти и применить на своей странице атрибуты тегазаголовка , которые определяют цвет текста, фон и выравнивание.
• 
  Слайд 6

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