HTML и CSS – языки создания статических веб-страниц HTTP – это простой запросно-ответный протокол, протокол передачи гипертекстовых файлов (HyperText. - презентация

1

2 HTML и CSS – языки создания статических веб-страниц HTTP – это простой запросно-ответный протокол, протокол передачи гипертекстовых файлов (HyperText Transfer Protocol). Язык HTML (HyperText Markup Language) используется для разметки структуры документа. Язык CSS (Cascading Style Sheets) используется для описания форматирования документа.

3 HTML и CSS – языки создания статических веб-страниц В настоящее время самыми последними являются стандарты HTML5 и CSS3. Разработкой стандартов занимается комитет W3C (World Wide Web Consortium). На сайте комитета W3C по адресу org можно найти всю информацию по текущему состоянию языков HTML и CSS.

4 Понятие элемента Языки HTML и CSS – это декларативные языки, которые указывают, как нужно относиться к той или иной части веб- страницы и как нужно её форматировать. Основным понятием в языке HTML является элемент.

5 Понятие элемента Элемент – это часть документа, имеющая определённое назначение. Обычно элемент состоит из открывающего тега, содержимого и закрывающего тега. Тег – это специальная последовательность символов, которая распознаётся браузером и интерпретируется в соответствии со значением этого тега. Заголовок

6 Структура веб-страницы HTML и CSS...

7 Основные правила использования элементов Все HTML-теги не зависят от регистра и могут быть написаны как прописными, так и строчными буквами. Большинство элементов относятся к группе обычных элементов. Обычные элементы состоят из открывающего тега, содержимого и закрывающего тега.

8 Основные правила использования элементов Открывающий тег имеет следующий формат: открывающая угловая скобка; имя тега; необязательные атрибуты, отделённые одним или несколькими пробелами; закрывающая угловая скобка. Закрывающий тег имеет следующий формат: открывающая угловая скобка; слеш; имя тега; закрывающая угловая скобка.

9 Основные правила использования элементов В некоторых случаях закрывающий тег обычного элемента может быть опущен. Обычно содержимое элемента body состоит из набора других элементов, вложенных друг в друга. Однако существуют определённые ограничения. Разделители (пробел, табуляция, перевод строки), расположенные в начале и в конце содержимого элемента, игнорируются. Другие подряд идущие разделители группируются в один пробел.

10 Пустые элементы Кроме обычных элементов, существуют так называемые пустые элементы. Пустые элементы состоят только из открывающего тега. К пустым элементам относятся br, hr, img, link, meta и несколько других элементов.

11 Специальные символы >> ⊂ ρρÙÙ << ⊃ ΡΡûû &&εεááÛÛ μμÁÁôô ¾¾ΜΜééÔÔ ⅝ππÉÉõõ ®®ΠΠèèÕÕ ∩φϕÈÈñÑ ∑ΦΦùùÑÑ

12 Атрибуты элементов Открывающий тег элемента может содержать атрибуты, которые влияют на поведение и отображение элемента. Атрибуты имеют имя и значение. Имя атрибута состоит из набора символов и не может содержать пробельные символы, знаки «больше» и «меньше», кавычки, апострофы и знак равенства.

13 Значения атрибутов Пустое значение. В некоторых случаях достаточно указания имени атрибута, например,. Запись значения атрибута без ограничителей. Если значение атрибута не содержит пробельных символов, амперсандов, апострофов, кавычек, знаков «больше» и «меньше» и знака равенства, то значение атрибута можно записывать без кавычек и апострофов, например,. Запись значения атрибута в апострофах. Значение атрибута может быть записано в апострофах. В этом случае значение может содержать любые символы, кроме амперсанда и апострофов, например,. Запись значения атрибута в кавычках. Значение атрибута может быть записано в кавычках. В этом случае значение может содержать любые символы, кроме амперсанда и кавычек, например,.

14 Глобальные атрибуты Атрибут title задаёт дополнительную информацию для элемента. Атрибут lang задаёт язык содержимого элемента. Атрибут style позволяет задать оформление элемента по стандартным синтаксическим правилам CSS. Атрибут id задаёт уникальный идентификатор элемента. Атрибут class позволяет определить принадлежность элемента к одному или нескольким классам.

15 Элемент img Элемент img представляет изображение. Элемент имеет следующие атрибуты: src – задаёт url-адрес изображения; alt – задаёт описание изображения, которое отображается, если изображение не доступно или если в браузере отключены изображения; width и height – задают ширину и высоту изображения, которые могут отличаться от реальных размеров изображения.

16 Элемент img Пример

17 Пути index.htmlHTML.gif

18 Пути index.html HTML.gif Images

19 Пути index.html HTML.gif Images

20 Элемент a Элемент a представляет гиперссылку на другую веб-страницу или на другую часть текущей страницы. Элемент должен содержать атрибут href, который задаёт url-адрес для перехода.

21 Элемент a Пример Лекция 1. Алфавит и основные понятия языка C++ Типы данных языка C++

22 Элемент p Элемент p представляет абзац текста. Элемент не имеет атрибутов.

23 Элемент p Пример Язык C++ – это язык программирования общего назначения, цель которого – сделать работу серьёзных программистов более приятным занятием. За исключением несущественных деталей, язык C++ является надмножеством языка С. Помимо возможностей, предоставляемых языком С, язык C++ обеспечивает гибкие и эффективные средства определения новых типов.

24 Элементы h1, h2, h3, h4, h5,h6 Данные элементы представляют заголовки соответствующего уровня. Элементы не имеют атрибутов.

25 Элементы h1, h2, h3, h4, h5,h6 Пример 2. Структура программы Программа на языке С++ состоит из директив препроцессора, указаний компилятору, объявлений переменных и/или констант, объявлений и определений функций Объявление переменной Объявление переменной задаёт имя и атрибуты переменной.

26 Элемент hr Элемент hr представляет тематический разрыв между частями документа. Отображается в виде линии. Элемент не имеет атрибутов.

27 Элемент hr Пример Абзац 1 Абзац 2

28 Элемент li Элемент li представляет элемент нумерованного или маркированного списка. Если элемент входит в нумерованный список, он может иметь атрибут value, который задаёт номер элемента списка. Таким образом, элементы списка могут иметь непоследовательную нумерацию.

29 Элемент ol Элемент ol представляет нумерованный список. Элементы списка должны быть элементами li. Элемент ol может иметь следующие атрибуты – start, type и reversed. Атрибут start задаёт номер первого элемента списка. Атрибут type задаёт тип нумерации: 1 – числа, a – малые латинские буквы, A – большие латинские буквы, i – римские цифры, I – большие римские цифры. Атрибут reversed задаёт нумерацию в обратном порядке.

30 Элемент ol Пример Элемент 1 Элемент 2 Элемент 3 Элемент 4 Элемент 5

31 Элемент ol Пример Элемент 1 Элемент 2 Элемент 3 Элемент 4 Элемент 5

32 Элемент ol Пример Элемент 1 Элемент 2 Элемент 3 Элемент 4 Элемент 5

33 Элемент ol Пример Элемент 1 Элемент 2 Элемент 3 Элемент 4 Элемент 5

34 Элемент ul Элемент ul представляет маркированный список. Элементы списка должны быть элементами li. Элемент не имеет атрибутов. Хотя элемент ul не имеет атрибута type, как элемент ol, тип маркировки можно изменить с помощью таблиц стилей CSS.

35 Элемент ul Пример Элемент 1 Элемент 2 Элемент 3 Элемент 4 Элемент 5

36 Элемент br Элемент br представляет разрыв строки. Элемент не имеет атрибутов.

37 Элемент br Пример Строка 1 Строка 2

38 Элементы i и b Элементы i и b позволяют выделить определённые части текста. По историческим причинам содержимое элемента i выделяется курсивом, а содержимое элемента b – жирным шрифтом. Однако таблицы стилей CSS позволяют изменить способ выделения содержимого элементов. Элементы не имеют атрибутов.

39 Элементы i и b Пример Различные способы выделения текста.

40 Элементы em и strong Элемент em позволяет выделить часть текста. Элемент strong позволяет выделить особо важные части текста. Элементы не имеют атрибутов.

41 Элементы em и strong Пример Различные способы выделения текста.

42 Элементы sup и sub Элементы sub и sup позволяют задать надстрочные и подстрочные индексы. Элементы не имеют атрибутов.

43 Элементы sup и sub Пример x 2

44 Другие элементы Элемент span не имеет определённого значения. Он используется для выделения части текста. Элемент div не имеет определённого значения. Это элемент-контейнер, который используется для объединения нескольких элементов в единое целое. Элемент section представляет семантически объединённую часть документа, например, главу или раздел.

45 Другие элементы Элемент article представляет независимую часть содержимого документа. Элемент не имеет атрибутов. Элемент nav представляет часть веб- страницы, содержащую ссылки на части страницы или на другие страницы сайта. Элемент aside представляет часть страницы, которая содержит дополнительную информацию.

46 Другие элементы Элементы header и footer представляют заголовок раздела и заключительную информацию раздела. Элемент address содержит контактную информацию. Элемент pre представляет часть текста документа, которая отображается в соответствии с форматированием, используемым в HTML-файле.

47 Другие элементы Элемент blockquote представляет цитату из другого источника. Элемент может иметь атрибут cite, который должен содержать url-адрес источника цитаты. Элемент q представляет часть текста, являющуюся цитатой. Элемент может иметь атрибут cite, который должен содержать url-адрес источника цитаты. Элемент abbr представляет аббревиатуру или сокращение. Элемент может иметь атрибут title, который в этом случае должен содержать расшифровку аббревиатуры.