***** 1 - Блог Стефанова М.А.

реклама
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”
Скачать