2. Общие сведения HTML Hyper Text Markup Language Код используется для создания Web сайтов Представляет собой совокупность команд, которые называются тегами Интерпретируется браузерами и отображается в виде документа Обеспечивает презентационный уровень приложния
3. История HTML 1991 – HTML теги 1995 – HTML 2.0 1997 – HTML 3.2 1997 – HTML 4.0 1999 – HTML 4.01 2000 – XHTML 1.0 2001 – XHTML 1.1 2002 – XHTML 2.0 2000 – XHTML 1.0 2004 – HTML 5.0
4. Назначение HTMLтегов Форматирование текста Форматирование таблиц и списков Организация ссылок на другие ресурсы Описание фреймов Вставка изображений и мультимедиа
5. Формат HTMLтегов HTMLтег записывается в угловых скобках и состоит из имени за которым может следовать список атрибутов Атрибуты – элементы, которые дают браузеру дополнительную информацию об отображении расширяемой информации Большинство тегов имеют два компонента – открывающий и закрывающий теги(парные теги) Закрывающий компонент имеет то же название, но при записи перед названием ставится символ « / »
9. Структура HTMLдокумента <!doctype html> <html> <head> <title>Заголовок</title> </head> <body> <p>Параграф</p> </body> </html> HTML HEAD TITLE BODY P
10. Структура HTMLдокумента Тег <HTML> указывает программе просмотра страниц что это HTML документ Тег <HEAD> определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа Тег <TITLE> - тег названия документа. Текст внутри него отображается не на странице, а как заголовок окна браузера. Тег <BODY> определяет видимую часть документа.В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты).
12. Тег META Определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных Атрибуты charset – задает кодировку документа content – устанавливает значение атрибута, заданного с помощью name или http-equiv http-equiv– предназначендля конвертирования метатега в заголовок HTTP name – Имяметатега, также косвенно устанавливает его предназначение
13. Тег LINK Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами Атрибуты charset – кодировка связываемого документа href– путь к связываемому файлу rel – определяет отношения между текущим документом и файлом, на который делается ссылка type – MIME-тип данных подключаемого файла
14. Тег SCRIPT Предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке Скриптымогут располагаться во внешнем файле и связываться с любым HTML-документом Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах Атрибуты language – устанавливает язык программирования на котором написан скрипт. src– адрес скрипта из внешнего файла для импорта в текущий документ rel – определяет отношения между текущим документом и файлом, на который делается ссылка type – определяет тип содержимого тега
15. Элемент DOCTYPE Предназначен для указания типа текущего документа — DTD (documenttypedefinition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensibleHyperTextMarkupLanguage, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.
23. Блочный элемент Блочным называется элемент, который отображается на веб-странице в виде прямоугольника Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки К блочным элементам относятся контейнеры <div>, <h1> и <p> Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы Запрещено добавлять внутрь встроенных элементов блочные
26. Блочный элемент Блочные элементы выступают в качестве основного строительного материала при верстке веб-страниц Такие элементы характерны тем, что всегда начинаются с новой строки и занимают всю доступную ширину области, в которой располагаются Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями height и width, но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы.
27. Встроенный элемент Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца К встроенным элементам относятся теги <span>, <a>, <q>, <code> и др. В основном они используются для изменения вида текста или его логического выделения.
28. Встроенный элемент <body> <div> <span class="pic"><imgsrc="images/mail.gif" width="45" height="38" alt=""></span> <span class="send">Отправить ссылку на эту статью другу</span></div> </body>
30. Встроенный элемент Встроенные элементы удобно использовать для изменения вида и стиля текста, в частности, отдельных символов и слов Для этой цели обычно применяется универсальный тег <span>, который самостоятельно никак не модифицирует содержимое, но легко объединяется со стилями через классы или идентификаторы С помощью этого тега можно легко управлять видом и положением отдельных фрагментов текста или рисунков
31. Отличия inlineи blockэлементов Встроенные элементы могут содержать только данные или другие встроенные элементы, а в блочные допустимо вкладывать другие блочные элементы, встроенные элементы, а также данные. Иными словами, встроенные элементы никак не могут хранить блочные элементы Блочные элементы всегда начинаются с новой строки, а встроенные таким способом не акцентируются Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина встроенных элементов равна их содержимому плюс значения отступов, полей и границ
