***** 1 - Блог Стефанова М.А.
advertisement
HTML 5 • Позволяет более точно определить данные • Предоставляет более совершенные методы взаимодействия с сервером. • Позволяет страницам хранить данные на стороне клиента () • Работа с мультимедиа «из коробки» • Работа с 2D и 3D графикой • Множественные улучшения производительности • API для работы с устройствами • Стилизация Разработка Web-приложений Front-End • Верстка / Разметка • Стилизация • Оживление страниц Back-End Управление контентом Обработка данных клиентской стороны Работа с базами данных … Технологии Back-End PHP Python Ruby JavaScript Java ASP.NET … ПО Верстка Adobe Dreamweaver MS Expression Web Axure RP Rapid Weawer GoodPage Текстовые редакторы NotePad++ PSPad HtmlReader EditPlus TextPad Sublime Text Coda TextMate BlueFish ПО Браузеры Google Chrome Mozilla FireFox Opera Safari IE Валидаторы http://validator.w3.org Tidy Справочники по тэгам http://www.w3.org/TR/html4/index/elements.html Dash (справочник по многим технологиям) Спецификация http://www.w3.org/TR/2014/REC-html5-20141028/ ТЭГИ и АТРИБУТЫ Тэги закрывать не обязательно, но рекомендуется! <p> … </p> <img … /> Html не чувствителен к регистру. Рекомендуется имена тегов и атрибутов записывать строчными буквами Атрибуты внутри тэга разделяются пробелами (можно вставить и переход на новую строку, но это не рекомендуется) Браузер игнорирует «не верную» разметку АТРИБУТЫ Значения атрибутов следует (а иногда просто необходимо) указывать в кавычках “ ” или апострофах ‘ ‘ Если атрибут не указывается, используется значение по умолчанию Допустимо использовать некоторые атрибуты без значения <input type="submit" disabled> <input type="submit" disabled=true> Порядок атрибутов в тэгах ни на что не влияет Значение атрибутов должно соответствовать принимаемому ими типу (ширина – число, ссылка – строка, соответствующая URL) Структура HTML документа Определение DTD Корневой тэг html тэг head тэг body Простая страничка <!DOCTYPE HTML> <html lang="ru”> <head> <meta charset="utf-8"> <title> Моя первая страничка </title> </head> <body> <h1>Заголовок</h1> <p>Абзац</p> </body> </html> DTD <!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]"> HTML 4.01 Строгий синтаксис Переходный синтаксис С использованием фреймов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML5 <!DOCTYPE html> XHTML 1.0 XHTML 1.1 DTD рекомендации Всегда указывайте DTD Если используете HTML 4.01 или XHTML 1.0 лучше определять строгий DTD Группы тэгов Верхнего уровня Заголовок документа (metadata) Определяющие контент Блочные Строчные (inline) Изображения и мультимедиа Embedded content Scripting Таблиц Формы Интерактивные элементы Веб-компоненты Тэги «верхнего уровня» <html> <head> … </head> <body> … </body> </html> Атрибуты: title manifest xmlns <html> Содержит элементы: <head> <body> <!DOCTYPE HTML> <html lang="ru” title="опа опа опапа"> <head> <title> Моя первая страничка </title> </head> ... </html> <head> Может содержать элементы: <title> <meta> <link> <style> <script> <base> <title> Содержит только текст – название странички Разметка внутри тега в лучшем случае игнорируется <html> <head> <title>Awesome page title</title> </head> <body> ... </body> </html> <meta> Пустой тэг Атрибуты: name http-equiv content charset Определяет метаданные с помощью пар значений атрибутов: name – content http-equiv – content Возможные варианты использования тега: <meta name=“value” content=“value”> <meta http-equiv=“value” content=“value”> <meta charset=“value”> <meta charset=“IANA_char_set”> Указывает кодировку, используемую документом Значение атрибута charset – строка-имя набора символов, зарегистрированное в IANA Имена чарсетов здесь: http://www.iana.org/assignments/charactersets/character-sets.xhtml Стандартно используется UTF-8: <meta charset=“UTF-8”> В документе может быть только один тэг meta с атрибутом charset <meta name=“” content=“”> Стандартные значение атрибута name и, соответствующего ему, атрибута content name content application-name Имя веб-приложения, которое представляет страница author Автор страницы description Описание страницы generator Идентификатор программы, сгенерировавшей страницу keywords Список ключевых слов Ограничения на тег meta с атрибутом name тег с атрибутом name=“description” должен быть один в документе не используйте значение application-name, если ваша страница не представляет веб-приложение (например, это страница блога или landing-page) не используйте значение generator, если вы сами создавали разметку <meta name=“” content=“”> <!DOCTYPE HTML> <html lang="ru" title="Блог Стефанова М.А.”> <head> <title>Блог Стефанова М.А.</title> <meta charset="UTF-8"> <meta name="author" content="Стефанов М.А.”> <meta name="author" content="Соавторов Н.И.”> <meta name="description" content="блог, направленный на поддержку процесса обучения студентов в ПГУТИ. Ведет доцент кафедры ПОУТС, Стефанов М.А.”> <meta name="generator" content="WordPress 4.3.1”> <meta name="keywords" content="programming,software engineering”> <body> ... </body> </html> <meta http-equiv=“” content=“”> Стандартизированные значение атрибута http-equiv и, соответствующего ему, атрибута content name content content-type Альтернативный способ указать кодировку default-style Стили отображения по-умолчанию refresh Перенаправление (по таймеру) Ограничения на тег meta с атрибутом name форма записи тега с атрибутом name=“content-type” <meta http-equiv=“content-type” content=“text/html; charset=UTF-8”> вместо такой формы лучше использовать тег meta с атрибутом charset если http-equiv=“refresh”, то content может содержать значение: “[целое положительное число]” “[целое положительное число]; URL”
