HTML Правила языка и его группы Лекция 1. HTML HTML - это язык структурной разметки, используемый для создания Web-страниц. Он представляет собой простой. - презентация

1 HTML Правила языка и его группы Лекция 1

2 HTML HTML - это язык структурной разметки, используемый для создания Web-страниц. Он представляет собой простой набор кодов, называемых элементами, который используется для определения структуры и формата документов.

3 Web-браузер Web-браузер - пользовательская программа, которая выводит данный документ на экран, интерпретируя значения этих кодов. Web-браузер - пользовательская программа, которая выводит данный документ на экран, интерпретируя значения этих кодов.

4 Элементы языка HTML Элементы в языке HTML состоят из буквенно-цифровых кодов, помещенных в угловые скобки, например: Элементы в языке HTML состоят из буквенно-цифровых кодов, помещенных в угловые скобки, например:,,,.,,,.

5 Большинство элементов состоят из пары тегов - открывающего и закрывающего. Большинство элементов состоят из пары тегов - открывающего и закрывающего. Открывающий тег - это просто мнемонический символ элемента, заключенный в угловые скобки. Например, символ, обозначающий жирный шрифт, - В (от слова Bold - жирный), а его открывающий тег -. Закрывающий тег идентичен открывающему за тем исключением, что перед символом ставится прямая наклонная черта. Действие элемента распространяется на всё, что находится между открывающим и закрывающим тегами: Открывающий тег - это просто мнемонический символ элемента, заключенный в угловые скобки. Например, символ, обозначающий жирный шрифт, - В (от слова Bold - жирный), а его открывающий тег -. Закрывающий тег идентичен открывающему за тем исключением, что перед символом ставится прямая наклонная черта. Действие элемента распространяется на всё, что находится между открывающим и закрывающим тегами: Этот текст набран жирным шрифтом Этот текст набран жирным шрифтом Элементы языка HTML

6 Хотя большинство тегов используются парами, существует несколько исключений. Хотя большинство тегов используются парами, существует несколько исключений.,, Элементы языка HTML

7 Синтаксис элемента HTML Имя Имя Значение Имя Имя Значение тега атрибута атрибута тега атрибута атрибута Заголовок Заголовок __атрибут__ содержимое закрывающий __атрибут__ содержимое закрывающий _элемента_ ____тег____ _элемента_ ____тег____ _____открывающий тег________ _____открывающий тег________ _______________________Элемент HTML_____________________ _______________________Элемент HTML_____________________

8 Правила языка HTML 1. Названия элементов можно писать в любом регистре. 1. Названия элементов можно писать в любом регистре. Элемент обозначает то же самое, что и или. Броузер не обращает внимания на то, буквами в каком регистре написаны имена элементов. Тем не менее, следует придерживаться определенного стиля: писать все элементы строчными или заглавными буквами. Элемент обозначает то же самое, что и или. Броузер не обращает внимания на то, буквами в каком регистре написаны имена элементов. Тем не менее, следует придерживаться определенного стиля: писать все элементы строчными или заглавными буквами.

9 2. Значения атрибутов не всегда можно писать в любом регистре. 2. Значения атрибутов не всегда можно писать в любом регистре. Значение атрибута часто чувствительно к регистру букв, в особенности когда дело касается имён файлов. Имя файла в элементе не всегда можно заменить на. Всё зависит от операционной системы: играет ли для неё какое-либо значение разница в регистре букв. Во избежание недоразумений всегда указывайте в точности то имя, которое было присвоено файлу при сохранении. Значение атрибута часто чувствительно к регистру букв, в особенности когда дело касается имён файлов. Имя файла в элементе не всегда можно заменить на. Всё зависит от операционной системы: играет ли для неё какое-либо значение разница в регистре букв. Во избежание недоразумений всегда указывайте в точности то имя, которое было присвоено файлу при сохранении. Правила языка HTML

10 3. Названия элементов не должны содержать пробелов. 3. Названия элементов не должны содержать пробелов. Броузеры рассматривают первый пробел, встречающийся в элементе, как конец названия элемента и начало его атрибутов. Броузеры рассматривают первый пробел, встречающийся в элементе, как конец названия элемента и начало его атрибутов. Например, не означает - тег вставки рисунка. Он будет обозначать - элемент курсива, - с двумя неопределенными атрибутами М и G. Например, не означает - тег вставки рисунка. Он будет обозначать - элемент курсива, - с двумя неопределенными атрибутами М и G. Правила языка HTML

11 4. Значения атрибутов могут содержать пробелы, если они помещены в кавычки. 4. Значения атрибутов могут содержать пробелы, если они помещены в кавычки. Некоторые атрибуты имеют известные значения, как правило, это строки типа LEFT, RIGHT или CENTER. Данные значения не требуется заключать в кавычки. Некоторые атрибуты имеют известные значения, как правило, это строки типа LEFT, RIGHT или CENTER. Данные значения не требуется заключать в кавычки. Если же значением атрибута надписи к рисунку ALT будет фраза My dog, она должна быть заключена в кавычки. Если кавычки не поставить, то атрибуту ALT будет присвоено значение My, a dog и Rover будут приняты за два неопределенных атрибута. Если же значением атрибута надписи к рисунку ALT будет фраза My dog, она должна быть заключена в кавычки. Если кавычки не поставить, то атрибуту ALT будет присвоено значение My, a dog и Rover будут приняты за два неопределенных атрибута. Правила языка HTML

12 5. Браузеры игнорируют несколько пробелов подряд и сжимают их в один. Браузеры сжимают последовательность из нескольких символов пробела, табуляции или перевода строки в один единственный символ. Эти символы не могут быть использованы для форматирования, если только текст с ними не помещен в специальный элемент. Он сохраняет значение каждого символа. 5. Браузеры игнорируют несколько пробелов подряд и сжимают их в один. Браузеры сжимают последовательность из нескольких символов пробела, табуляции или перевода строки в один единственный символ. Эти символы не могут быть использованы для форматирования, если только текст с ними не помещен в специальный элемент. Он сохраняет значение каждого символа. Правила языка HTML

13 6. HTML-документы могут содержать комментарии. 6. HTML-документы могут содержать комментарии. Язык HTML поддерживает использование комментариев, которые не выводятся браузером на экран. Язык HTML поддерживает использование комментариев, которые не выводятся браузером на экран. Комментарии начинаются с символов Комментарии начинаются с символов и могут содержать любое количество строк. Между дефисами и восклицательным знаком не должно быть пробелов. и могут содержать любое количество строк. Между дефисами и восклицательным знаком не должно быть пробелов. Правила языка HTML

14 7. Элемент, включающий в себя открывающий тег другого элемента, должен также включать в себя и закрывающий тег этого элемента. 7. Элемент, включающий в себя открывающий тег другого элемента, должен также включать в себя и закрывающий тег этого элемента. Пары тегов разных элементов должны вкладываться друг в друга, а их закрывающие теги не должны пересекаться. Должна соблюдаться четкая последовательность открытия и закрытия тэгов. Пары тегов разных элементов должны вкладываться друг в друга, а их закрывающие теги не должны пересекаться. Должна соблюдаться четкая последовательность открытия и закрытия тэгов. Правильно Правильно Правила языка HTML

15 Название документа Название документа... Здесь указывается прочая дополнительная информация Здесь указывается прочая дополнительная информация Здесь находится размеченный текст Здесь находится размеченный текст... Структура HTML - документа

16 Три группы элементов HTML: Элементы уровня блока Элементы уровня блока Элементы уровня текста Элементы уровня текста Символьные примитивы Символьные примитивы

17 Элементы уровня блока Заголовки Заголовки Существует 6 различных уровней заголовков: … Существует 6 различных уровней заголовков: … … … Уровни располагаются в порядке важности, начиная с - самого важного - до - наименее важного. Большинство браузеров выводят заголовки буквами большего размера и/или используют жирный шрифт. Уровни располагаются в порядке важности, начиная с - самого важного - до - наименее важного. Большинство браузеров выводят заголовки буквами большего размера и/или используют жирный шрифт.

18 Абзацы и переводы строки Абзацы и переводы строки Текст, окруженный тегами и, означает, что он является логическим абзацем. Текст, окруженный тегами и, означает, что он является логическим абзацем. Текст внутри элемента выводится с выравниванием по левому краю. С помощью атрибута ALIGN текст абзаца можно выровнять по ширине, правому краю или по центру. Так как по умолчанию ALIGN принимает значение LEFT, это значение никогда не ставят явно. Текст внутри элемента выводится с выравниванием по левому краю. С помощью атрибута ALIGN текст абзаца можно выровнять по ширине, правому краю или по центру. Так как по умолчанию ALIGN принимает значение LEFT, это значение никогда не ставят явно. … … rightcenterjustify Элементы уровня блока

19 Для создания нескольких пустых строк нужно пользоваться элементом. Для создания нескольких пустых строк нужно пользоваться элементом. - перенос строк. - перенос строк. Элементы уровня блока

20 Center как элемент уровня блока Center как элемент уровня блока Для того, чтобы выровнять текст или внедренные объекты, например изображения, достаточно окружить его тегами и. Для того, чтобы выровнять текст или внедренные объекты, например изображения, достаточно окружить его тегами и. Согласно описанию языка HTML 3.2 элемент - это просто укороченная запись элемента, который оказывает на текст тоже действие. Согласно описанию языка HTML 3.2 элемент - это просто укороченная запись элемента, который оказывает на текст тоже действие. Элементы уровня блока

21 Разделы Разделы Элемент используется для структуризации HTML-документов в виде разделов. С помощью атрибута ALIGN любую часть раздела можно выровнять по правой, левой стороне или по центру. По умолчанию текст в элементе выравнивается по левой стороне. Разделы также используются совместно со стилями. Элемент используется для структуризации HTML-документов в виде разделов. С помощью атрибута ALIGN любую часть раздела можно выровнять по правой, левой стороне или по центру. По умолчанию текст в элементе выравнивается по левой стороне. Разделы также используются совместно со стилями. Элементы уровня блока

22 Блоки цитат Блоки цитат Иногда при цитировании текста большого объёма нужно сделать так, чтобы он выделялся из остального текста. Для этой цели может служить элемент. В него можно включать в документ большие цитаты из других источников. Иногда при цитировании текста большого объёма нужно сделать так, чтобы он выделялся из остального текста. Для этой цели может служить элемент. В него можно включать в документ большие цитаты из других источников. Текст, помещаемый между тегами Текст, помещаемый между тегами,, как правило, выводится с отступом. Как и в случае с абзацами, все пробелы, символы табуляции и перевода строки внутри данного элемента игнорируются, а для изменения перехода текста на следующую строку и добавления нескольких пустых строк используется элемент или другие элементы. как правило, выводится с отступом. Как и в случае с абзацами, все пробелы, символы табуляции и перевода строки внутри данного элемента игнорируются, а для изменения перехода текста на следующую строку и добавления нескольких пустых строк используется элемент или другие элементы. Элементы уровня блока

23 Переформатированный текст Переформатированный текст Представьте себе, что в Web-страницу надо вставить строки стихотворения. Для этого потребуется директива, которая прикажет браузеру сохранить формат текста. Текст следует поместить между тегами и, и тогда он не будет отформатирован браузером. При изменении размера окна браузера текст не изменяется. Если строки выходят за пределы окна браузера, в окне появляются горизонтальная и вертикальная линейки прокрутки. Как правило, браузер выводит переформатированный текст с использованием моноширинного шрифта. Обычно это Courier. Внутри элемента можно пользоваться некоторыми элементами форматирования, например,, помещать ссылки. Представьте себе, что в Web-страницу надо вставить строки стихотворения. Для этого потребуется директива, которая прикажет браузеру сохранить формат текста. Текст следует поместить между тегами и, и тогда он не будет отформатирован браузером. При изменении размера окна браузера текст не изменяется. Если строки выходят за пределы окна браузера, в окне появляются горизонтальная и вертикальная линейки прокрутки. Как правило, браузер выводит переформатированный текст с использованием моноширинного шрифта. Обычно это Courier. Внутри элемента можно пользоваться некоторыми элементами форматирования, например,, помещать ссылки. Элементы уровня блока

24 Списки Списки В языке HTML используются три основных формы списков: В языке HTML используются три основных формы списков: упорядоченные списки ( ), упорядоченные списки ( ), неупорядоченные списки( ), неупорядоченные списки( ), списки определений( ). списки определений( ). Элементы уровня блока

25 УПОРЯДОЧЕННЫЕ СПИСКИ УПОРЯДОЧЕННЫЕ СПИСКИ Упорядоченный список, определяемый с помощью и, создаёт список с нумерацией. Для нумерации могут использоваться арабские цифры, буквы и римские цифры. Упорядоченные списки используются для создания простых перечислений или поэтапных указаний, так как каждый из пунктов списка нумеруется браузером автоматически. Пункты обозначаются с помощью элемента. Элемент не требует закрывающего тега. Пункты списка, как правило, выводятся браузером с отступом. Нумерация начинается с 1. Упорядоченный список, определяемый с помощью и, создаёт список с нумерацией. Для нумерации могут использоваться арабские цифры, буквы и римские цифры. Упорядоченные списки используются для создания простых перечислений или поэтапных указаний, так как каждый из пунктов списка нумеруется браузером автоматически. Пункты обозначаются с помощью элемента. Элемент не требует закрывающего тега. Пункты списка, как правило, выводятся браузером с отступом. Нумерация начинается с 1. Сам элемент имеет 2 основных атрибута - START и TYPE. Все они могут употребляться по желанию. Атрибут TYPE элемента может принимать следующие значения: Сам элемент имеет 2 основных атрибута - START и TYPE. Все они могут употребляться по желанию. Атрибут TYPE элемента может принимать следующие значения: а - для нумерации строчными буквами а - для нумерации строчными буквами А - для нумерации заглавными буквами А - для нумерации заглавными буквами I - для нумерации заглавными римскими цифрами I - для нумерации заглавными римскими цифрами i- для нумерации строчными римскими цифрами i- для нумерации строчными римскими цифрами 1 - для обычной нумерации. 1 - для обычной нумерации. В элементе может использоваться атрибут START, обозначающий с какого значения начинать нумерацию списка. Значение атрибута START всегда должно быть числом. Для того, чтобы начать нумерацию с буквы «j», необходимо набрать код, так как буква «j» является десятой в алфавите. В элементе может использоваться атрибут START, обозначающий с какого значения начинать нумерацию списка. Значение атрибута START всегда должно быть числом. Для того, чтобы начать нумерацию с буквы «j», необходимо набрать код, так как буква «j» является десятой в алфавите. Здесь должна быть буква «j» Здесь должна быть буква «j» Здесь должна быть буква «к» Здесь должна быть буква «к» Элементы уровня блока

26 НЕУПОРЯДОЧЕННЫЕ СПИСКИ НЕУПОРЯДОЧЕННЫЕ СПИСКИ и используется в тех случаях, когда при перечислении нумерация не важна. Браузер обычно добавляет к пункту списка какой-нибудь маркер (сплошной круглый маркер, квадрат или пустой круглый маркер) и выводит список с отступом. и используется в тех случаях, когда при перечислении нумерация не важна. Браузер обычно добавляет к пункту списка какой-нибудь маркер (сплошной круглый маркер, квадрат или пустой круглый маркер) и выводит список с отступом. Неупорядоченные списки могут вкладываться друг в друга. Каждый из вложенных Неупорядоченные списки могут вкладываться друг в друга. Каждый из вложенных списков выводится с увеличенным отступом, соответственно меняется маркер. Обычно на списков выводится с увеличенным отступом, соответственно меняется маркер. Обычно на первом уровне используются заполненный круглый маркер. На втором - пустой круглый первом уровне используются заполненный круглый маркер. На втором - пустой круглый маркер. На третьем уровне вложенных списков - квадрат. С помощью атрибута TYPE маркер. На третьем уровне вложенных списков - квадрат. С помощью атрибута TYPE можно менять тип маркера. Он может ставиться в элементе и определять тип можно менять тип маркера. Он может ставиться в элементе и определять тип маркера для всего списка. Атрибут TYPE может маркера для всего списка. Атрибут TYPE может принимать следующие значения: disc, circle или square. принимать следующие значения: disc, circle или square. Тип можно задать для Тип можно задать для всего списка или всего списка или Элементы уровня блока

27 СПИСКИ ОПРЕДЕЛЕНИЙ СПИСКИ ОПРЕДЕЛЕНИЙ Список определений представляет собой список терминов вместе с их определениями - нечто вроде словаря. Списки определений помещаются между тегами и. Список определений представляет собой список терминов вместе с их определениями - нечто вроде словаря. Списки определений помещаются между тегами и. Каждый из терминов помещается в элемент (от слов definition term - определяемый термин). Каждое определение помещается в элемент. Каждый из терминов помещается в элемент (от слов definition term - определяемый термин). Каждое определение помещается в элемент. Интернет Интернет Tак называется всемирная сеть сетей, которая использует набор сетевых Tак называется всемирная сеть сетей, которая использует набор сетевых протоколов TCP/IP. протоколов TCP/IP. Доменное имя Доменное имя Буквенно-цифровое название для обозначения сети или узла в сети (например, Буквенно-цифровое название для обозначения сети или узла в сети (например, apple.com, nic.serf.net). apple.com, nic.serf.net). Выводится данный список с отступом в тексте. Выводится данный список с отступом в тексте. Элементы уровня блока

28 Горизонтальные линейки Горизонтальные линейки Элемент - пустой и не требует закрывающего тега, т.к. не окружает никаких данных. Элемент - пустой и не требует закрывающего тега, т.к. не окружает никаких данных. Атрибут SIZE устанавливает толщину (высоту) линейки, WIDTH - ширину, ALIGN управляет выравниванием по горизонтали. Атрибут NOSHADE создает линейку без тени. Атрибут SIZE устанавливает толщину (высоту) линейки, WIDTH - ширину, ALIGN управляет выравниванием по горизонтали. Атрибут NOSHADE создает линейку без тени. Элементы уровня блока

29 Элементы уровня текста Текстовые элементы делятся на два основных вида - физические и логические. Текстовые элементы делятся на два основных вида - физические и логические. Физические элементы, такие как - жирный шрифт или - курсив, используются для указания того, как текст должен выводиться на экран. Физические элементы, такие как - жирный шрифт или - курсив, используются для указания того, как текст должен выводиться на экран. Логические элементы, как, например - и, обозначают, чем текст является, но не сообщают о том, как он будет выглядеть. Логические элементы, как, например - и, обозначают, чем текст является, но не сообщают о том, как он будет выглядеть.

30 Элементы уровня текста Элементы физического форматирования текста Элементы физического форматирования текста Это жирный Это жирный Это курсив Это курсив Это моноширинный Это моноширинный Это подчеркнутый Это подчеркнутый Это перечеркнутый Это перечеркнутый Это тоже перечеркнутый Это тоже перечеркнутый Это увеличенный шрифт (на один пункт больше) Это увеличенный шрифт (на один пункт больше) Это уменьшенный шрифт (на один пункт меньше) Это уменьшенный шрифт (на один пункт меньше) Это текст B нижнем индексе Это текст B нижнем индексе Это текст B верхнем индексе Это текст B верхнем индексе

31 Элементы уровня текста Элементы логического форматирования текста Элементы логического форматирования текста Это ЕМ - выделение Это ЕМ - выделение Это STRONG - сильное выделение Это STRONG - сильное выделение Это СIТЕ - цитата Это СIТЕ - цитата Это DFN - определение Это DFN - определение Это CODE - исходный код Это CODE - исходный код Это тоже KBD - набор на клавиатуре Это тоже KBD - набор на клавиатуре Это SАМР - пример Это SАМР - пример Это VAR - переменная в Программе Это VAR - переменная в Программе

32 Символьные примитивы Иногда необходимо вставить в документ определенные символы - например, символы с ударением, символы авторских прав и даже угловые скобки, используемые для обрамления HTML -элементов. Чтобы их можно было использовать в HTML-документах, их необходимо создать с помощью специального кода. Иногда необходимо вставить в документ определенные символы - например, символы с ударением, символы авторских прав и даже угловые скобки, используемые для обрамления HTML -элементов. Чтобы их можно было использовать в HTML-документах, их необходимо создать с помощью специального кода. Все коды символов имеют следующую модель: Все коды символов имеют следующую модель: &код; &код; где «код» - это слово или числовое значение, указывающее на конкретный символ, который необходимо вывести на экран. где «код» - это слово или числовое значение, указывающее на конкретный символ, который необходимо вывести на экран.