Вёрстка на HTML 5 Следует понимать что несмотря

Скачать презентацию Вёрстка на HTML 5 Следует понимать что несмотря

Вёрстка на HTML5.pptx

Количество слайдов: 19

Вёрстка на HTML 5 Следует понимать, что, несмотря на схожесть названий, HTML 5 не является продолжением HTML 4 или XHTML. Скорее речь идёт о новом языке Web Applications 1. 0, который в маркетинговых целях назван знакомой аббревиатурой и построен на базе HTML.

Теги Команды для браузера, говорящие, как отображать текст, вставлять таблицы, изображения и другие объекты, называются тегами (от англ. tag - ярлык, признак). Сами теги (команды) не отображаются на экране. Имя тега пишется в треугольных скобках, например, - тег, говорящий браузеру записывать весь последующий текст жирным шрифтом. Имя тега можно записывать на любом регистре (прописными или строчными буквами), то есть будет воспринято браузером так же, как и . Теги бывают парные и непарные. Например, тег говорит браузеру записывать жирным шрифтом весь последующий текст до команды . В таком случае тег, дающий команду, называют открывающим, а тег, отменяющий команду, закрывающим.

Атрибуты HTML содержит ограниченный набор тегов, выучить их несложно. Каждый тег, в свою очередь, может иметь какое-то количество атрибутов, либо не иметь их вовсе. Некоторые атрибуты в тегах могут быть обязательными, некоторые — опциональные. ТЕГ АТРИБУТ ЗНАЧЕНИЕ АТРИБУТА

Структура кода HTML-документ имеет следующую структуру: <--Определяет тип документа--> <-- Теги являются обязательными и определяют вид HTML документа. --> Описание документа (не отображается на самой страничке) Содержание (отображается на страничке с учетом заданной разметки)

Описание тега Тег добавляет комментарий в код документа. Тег предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Содержимое тега не отображается напрямую на веб-странице, за исключением тега устанавливающего заголовок окна веб-страницы. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Пример 1. 1 В Windows откройте программу Блокнот Наберите или скопируйте код в Блокноте" src="https://present5.com/presentation/8864879_69407630/image-6.jpg" alt="Пример 1. 1 В Windows откройте программу Блокнот Наберите или скопируйте код в Блокноте" /> Пример 1. 1 В Windows откройте программу Блокнот Наберите или скопируйте код в Блокноте <!DOCTYPE html> <html> <head> <meta charset=windows-1251> <title>Пример страницы
Страница на HTML 5
1. 2.

Описание тега определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Закрывающий тег Не требуется. Атрибуты charset Задает кодировку документа.

Отображение страницы в браузере 3. Сохраните готовый документ (Файл > Сохранить как. . . ) под именем primer. html, при этом обязательно поставьте в диалоговом окне сохранения тип файла. Обратите внимание, что расширение у файла должно быть именно html. 4. Закройте блокнот. Найдите сохраненный primer. html и двойным щелчком произведите загрузку вашей странице в браузер установленный на вашем компьютере по умолчанию.

Описание тега Теги <title> должны быть расположены внутри секции Теги определяют основной заголовок документа.

Описание тега
Определяет текстовый абзац. Тег
является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента. Используется внутри блока
Страница на HTML 5

Описание тега Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. размещается всегда внутри контейнера и не создает ссылку. Закрывающий тег Не требуется. ПРИМЕР

Атрибуты тега Атрибуты href Путь к связываемому файлу. media Определяет устройство, для которого следует применять стилевое оформление. rel Определяет отношения между текущим документом и файлом, на который делается ссылка. sizes Указывает размер иконок для визуального отображения. type MIME-тип данных подключаемого файла.

Использование тега Установление иконки сайта в адресной строке браузера:

Описание тега Тег является одним из важных элементов HTML и предназначен для создания ссылок. Пример страницы
Страница на HTML 5
Ссылка на страницу tip. html

Подключение таблицы стилей Содержимое страницы primer. html Пример страницы
Страница на HTML 5
Содержимое файла tab. css p { color: red; }

Пример задания свойств color: #fff; /* Цвет текста */ background: #5 f 6 a 72; /* Цвет фона */ background: #fc 0 url(images/hand. png) repeat-y; /* Цвет фона, путь к фоновому изображению и повторение фона по вертикали */ text-align: center; /* Выравнивание по центру */ text-align: justify; /* Выравнивание по ширине */ text-align: left; /* Выравнивание текста по левому краю. */ text-align: right; /* Выравнивание текста по правому краю*/

font-style: Синтаксис font-style: normal | italic | oblique | inherit Значения normal Обычное начертание текста. italic Курсивное начертание. oblique Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо. inherit Наследует значение родителя. ПРИМЕР p {font-style: italic; /* Курсивное начертание */ }

Использование блоков Элемент
является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Содержимое тега
всегда начинается с новой строки. После него также добавляется перенос строки.

Справочные материалы http: //ab-w. net/HTML 5/html 5. php http: //htmlbook. ru