Презентация на тему "Язык HTML для описания Web-страниц" 11 класс

Содержание

• 
  Слайд 1

  HTML Язык описания Web-страниц

• 
  Слайд 2

  Что такое HTML?

  это не язык программирования, а «язык разметки» (HyperText Markup Language);

  определяет содержание и структуру страницы, но не внешний вид;

  элементы языка имеют структуру дерева (вложенные элементы);

  пробелы либо игнорируются, либо заменяются одним пробелом;

  узлы дерева представляют собой либо текст (содержание), либо «структурные элементы», маркируемые «тегами» и имеющие «атрибуты».

  Текст на языке HTML и его структура

   

  Hello, World!

  html

  title

  body

  p

  My first page

  Hello, World!

  head

• 
  Слайд 3

  Структура элементов языка

  Элемент, маркированный тегом, имеет следующую структуру:

  внутреннее содержание

  Если тег не имеет внутреннего содержания, то он может иметь упрощенную структуру:

• 
  Слайд 4

  Структура страницы

  Правильная страница имеет две части – заголовок (информация о странице)и тело (содержание страницы)

  информация о странице

  внутреннее содержание

• 
  Слайд 5

  XHTML – более современный HTML (2000 год)

  HTML + XML (eXtended Markup Language) = XHTML

  Браузеры отображают пришедшую к ним по запросу страницу. Страницаможет быть написана как на «старом» HTML, так и на более новых XML

  и XHTML. Мы будем использовать «современный» XHTML. Почему?

  Более строгий и хорошо структурированный язык

  Лучшая «переносимость» между различными браузерами

  Лучше использовать более современные средства, чтобы не пришлось в будущем переделывать ваши замечательные страницы

  XHTML допускает вставки на других «языках разметки» XML, SVG, MathML, MusicML и т.д.

• 
  Слайд 6

  Структура документа в формате XHTML

  информация о странице

  внутреннее содержание

  Основное отличие во внутреннем содержании документов HTML и XHTML:

  если браузер видит ошибку в HTML-документе, то он обязан постараться

  понять, что имел в виду автор документа. Если ошибка обнаружена в

  XHTML документе, то браузер просто сообщает об ошибке.

  Кроме того, форматирование элементов XHTML-документа должно быть

  оформлено с помощью CSS-стилей. Многие теги, такие как fontи

  атрибуты, такие как bgcolorи alignне поддерживаются в XHTML.

• 
  Слайд 7

  Ошибки XHTML, которые допустимы в HTML

  Все элементы должны быть закрыты.

  Все обязательные атрибуты должны присутствовать.

  В теле документа текст не может быть вложен непосредственно.

  «Блочные» элементы не могут быть вложены в «строчные».

  Атрибуты должны заключаться в кавычки.

  Вложенность элементов должна быть правильной.

  Спецсимволы всегда должны быть представлены мнемоническими ссылками.

  Теги и атрибуты записываются только строчными буквами.

  Неправильно :

  Правильно :

• 
  Слайд 8

  Блочные и строчные элементы

  Блочные элементы содержат фрагменты текста, которые всегда отображаются в отдельных блоках. Браузеры всегда визуально отделяютблочные элементы друг от друга.

  Примеры

• 
  Слайд 9

  Некоторые элементы HTML и их атрибуты

  Видимое здесь содержимое отображается в браузере в виде одного абзаца.Повторяющиеся пробелы и переходы со строки на строку игнорируются.

  Абзац (параграф) – блочный элемент

  Видимое здесь содержимое отображается в браузере в виде одного абзаца.Повторяющиеся пробелы и переходы со строки на строку игнорируются.

  Если необходимо сделать переход на следующую строку внутри абзаца,то это достигается с помощью элемента

  Это первая строка параграфа, а это уже вторая

  А вот это уже следующий абзац.

  Это первая строка параграфа,а это уже вторая

  А вот это уже следующий абзац.

• 
  Слайд 10
  
• 
  Слайд 11

  Гиперссылка

  Пользуйтесь поиском Гиперссылка – строчный элемент Пользуйтесь поиском Google - самым распространенным поисковиком в мире!

  И удачи вам в поиске!

  – самым распространенным поисковиком в мире!

  Будьте аккуратны с вложенностью элементов!

  Здесь две ошибки: блочный элемент внутри строчного и неправильнаявложенность элементов. Тем не менее, HTML-браузер может корректно

  отобразитьэти элементы!

• 
  Слайд 12

  Картинки

  Вставка изображений – строчный элемент

  Дополнительные атрибуты

  Изображение может служить ссылкой так же, как и текст:

• 
  Слайд 13

  Списки

  • Первая строка списка
  • Вторая строка списка
  • Третья строка списка

  Список (нумерованный или ненумерованный) – блочный элемент,

  Содержащий внутри себя блочные элементы – члены списка

  Первая строка списка

  Вторая строка списка

  Третья строка списка

  Атрибуты списка могут задавать вид маркеров (не поддерживается в

  «строгом» XHTML), например

  • Первая строка списка
• 
  Слайд 14

  Нумерованные списки

  1. Вымыть посуду
  2. Постирать носки
  3. Купить жене цветы

  Нумерованный список

  Вымыть посуду

  Постирать носки

  Купить жене цветы

  Атрибуты списка могут задавать тип и способ нумерации

  (не поддерживается в «строгом» XHTML)

  1. Сделать домашнее задание
  2. Купить билеты на концерт
  3. Сделать домашнее задание Купить билеты на концерт
• 
  Слайд 15

  Вложенные списки

  1. Документы:
     • Паспорт
     • Билеты
     • Гостиница - бронь
  2.  
  3. Предметы личной гигиены:
     • Зубная щетка
     • Паста
     • Мыло
  4. Один список может быть вложен в другой

  Документы:

  Паспорт

  Билеты

  Гостиница - бронь

  Предметы личной гигиены:

  Зубная щетка

  Паста

  Мыло

• 
  Слайд 16

  Цитирование

  Каркнул ворон:Никогда!

  Цитирование может быть коротким (строчным) и длинным (блочным)

  Каркнул ворон: “Никогда!"

  В своем выступлении перед рабочими Леонид Ильич Брежнев, в частности, сказал:

  Мы еще теснее сплотимся вокруг родной Коммунистической Партии и стройными рядами будем двигаться вперед к полному торжеству коммунизма!

  В своем выступлении перед рабочими Леонид Ильич Брежнев, в частности,

  сказал:

  Мы еще теснее сплотимся вокруг родной Коммунистической Партии и

  стройными рядами будем двигаться вперед к полному торжеству

  коммунизма!

• 
  Слайд 17

  Выделение фрагментов текста

  Выделение производится с помощью тегов

  Изучая HTML следует обратить особое внимание на различие между

  нумерованными списками <ol> и ненумерованными списками <ul>.

  <p>Изучая <code>HTML следует обратить

  особое внимание на

  различие между нумерованными списками

  <ol> и ненумерованными

  списками <ul>.

  Фрагменты кода можно выделять с помощью блочного тега

  <em><strong data-redactor-tag="strong"><pre> <strong>public static void</strong> main(String[] args) { System.out.println("Hello, World!"); } </strong></em>

  Этот фрагмент выводится в точности так же, как он напечатан, включая

  все пробелы и переводы строк.

• 
  Слайд 18

  Элементы заголовка HTML

   

  Отображается в заголовке страницы в браузере.

  Описывает содержимое страницы.

  Описывает ключевые слова (часто используется поисковыми машинами).

  Указание на автора.

  Указание на программу, которая сгенерировала этот текст.

• 
  Слайд 19
  

  Описывает формат и кодировку страницы.

  Определяет основной язык, на котором написана страница.

  Описывает частоту перезагрузки страницы (в секундах)

  и, возможно, делает “redirection" на другую страницу.

  Описывает иконку, ассоциирующуюся со страницей (устаревший вариант:

  поместить в корневой каталог сайта файл с именем favicon.ico).

• 
  Слайд 20

  MIME-типы

  Internet media type (MIME – Multipurpose Internet Mail/Media Extension)

• 
  Слайд 21

  Мнемоники

  Специальные символы отображаются в текстах в виде специальныхслов (entities). Вот примеры некоторых мнемоник:

  Полный список см.