View
995
Download
3
Category
Preview:
Citation preview
Структура HTMLдокумента
Общие сведения HTML
• Hyper Text Markup Language• Код используется для создания Web сайтов• Представляет собой совокупность команд,
которые называются тегами• Интерпретируется браузерами и
отображается в виде документа• Обеспечивает презентационный уровень
приложния
История 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
Назначение HTML тегов
• Форматирование текста• Форматирование таблиц и списков• Организация ссылок на другие ресурсы• Описание фреймов• Вставка изображений и мультимедиа
Формат HTML тегов
• HTML тег записывается в угловых скобках и состоит из имени за которым может следовать список атрибутов
• Атрибуты – элементы, которые дают браузеру дополнительную информацию об отображении расширяемой информации
• Большинство тегов имеют два компонента – открывающий и закрывающий теги(парные теги)
• Закрывающий компонент имеет то же название, но при записи перед названием ставится символ « / »
Формат HTML тегов
<p>Это параграф</p>
TAGоткрывающий
TAGзакрывающий
Назначение HTML тегов
<p class=“summary”>Это параграф</p>
АТРИБУТ
<p id=“main” class=“summary”>Это параграф</p>
АТРИБУТАТРИБУТ
Назначение HTML тегов
<p class=“summary”>Это параграф</p>
СОДЕРЖАНИЕ ЭЛЕМЕНТА
Структура HTML документа
<!doctype html><html>
<head><title>Заголовок</title>
</head><body>
<p>Параграф</p></body>
</html>
HTML
BODY
TITLE
HEAD
P
Структура HTML документа
•Тег <HTML> указывает программе просмотра страниц что это HTML документ
•Тег <HEAD> определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа
•Тег <TITLE> - тег названия документа. Текст внутри него отображается не на странице, а как заголовок окна браузера.
•Тег <BODY> определяет видимую часть документа. В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты).
Структура HTML заголовка
<head><title>Заголовок</title>
<meta name=“description”>Описание сайта</meta><meta name=“keywords”>фото, видео, музыка</meta>
<link type=“text/css” rel=“stylesheets” href=“style.css”><script type=“text/javascript” src=“script.js”></script>
</head>
Тег META
•Определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных
Атрибуты
charset – задает кодировку документа
content – устанавливает значение атрибута, заданного с помощью name или http-equiv
http-equiv – предназначен для конвертирования метатега в заголовок HTTP
name – Имя метатега, также косвенно устанавливает его предназначение
Тег LINK
• Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами
Атрибуты
charset – кодировка связываемого документа
href– путь к связываемому файлу
rel – определяет отношения между текущим документом и файлом, на который делается ссылка
type – MIME-тип данных подключаемого файла
Тег SCRIPT• Предназначен для описания скриптов, может содержать ссылку на
программу или ее текст на определенном языке• Скрипты могут располагаться во внешнем файле и связываться с любым
HTML-документом• Такой подход позволяет использовать одни и те же общие функции на многих
веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах
Атрибуты
language – устанавливает язык программирования на котором написан скрипт.
src – адрес скрипта из внешнего файла для импорта в текущий документ
rel – определяет отношения между текущим документом и файлом, на который делается ссылка
type – определяет тип содержимого тега
Элемент DOCTYPE
• Предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа).
• Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису.
• Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.
Элемент DOCTYPE HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
В HTML-документе применяются фреймы.
Элемент DOCTYPE HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
В HTML-документе применяются фреймы.
Элемент DOCTYPE HTML 5
<!DOCTYPE html>
Элемент DOCTYPE XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Строгий синтаксис HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Переходный синтаксис HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
В HTML-документе применяются фреймы.
Элемент DOCTYPE XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.
Элемент DOCTYPE синтаксис
• <!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">
Типы элементов
• Блочный элемент (block element)• Встроеный элемент (inline element)
Блочный элемент
• Блочным называется элемент, который отображается на веб-странице в виде прямоугольника
• Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки
• К блочным элементам относятся контейнеры <div>, <h1> и <p>
• Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы
• Запрещено добавлять внутрь встроенных элементов блочные
Блочный элемент
<html><head>
<title>Блочные элементы</title><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"> </head><body>
<div><p>Параграф</p></div><h2><a href="link1.html">Ссылка</a></h2>
</body> </html>
Блочный элемент
Блочный элемент
• Блочные элементы выступают в качестве основного строительного материала при верстке веб-страниц
• Такие элементы характерны тем, что всегда начинаются с новой строки и занимают всю доступную ширину области, в которой располагаются
• Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями height и width, но к ним еще плюсуется значение полей, отступов и границ.
• Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы.
Встроенный элемент
• Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца
• К встроенным элементам относятся теги <span>, <a>, <q>, <code> и др.
• В основном они используются для изменения вида текста или его логического выделения.
Встроенный элемент
<body><div>
<span class="pic"><img src="images/mail.gif" width="45" height="38" alt=""></span>
<span class="send">Отправить ссылку на эту статью другу</span></div>
</body>
Встроенный элемент
Встроенный элемент
• Встроенные элементы удобно использовать для изменения вида и стиля текста, в частности, отдельных символов и слов
• Для этой цели обычно применяется универсальный тег <span>, который самостоятельно никак не модифицирует содержимое, но легко объединяется со стилями через классы или идентификаторы
• С помощью этого тега можно легко управлять видом и положением отдельных фрагментов текста или рисунков
Отличия inline и block элементов• Встроенные элементы могут содержать только данные
или другие встроенные элементы, а в блочные допустимо вкладывать другие блочные элементы, встроенные элементы, а также данные. Иными словами, встроенные элементы никак не могут хранить блочные элементы
• Блочные элементы всегда начинаются с новой строки, а встроенные таким способом не акцентируются
• Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина встроенных элементов равна их содержимому плюс значения отступов, полей и границ
Recommended