Учебник html5 css3: УЧЕБНИК HTML5 CSS3 скачать

Leave a Comment / Html / By /

HTML5 | Введение

Последнее обновление: 08.04.2016

HTML (HyperText Markup Language) представляет язык разметки гипертекста, используемый преимущественно для создания документов в сети интернет. HTML начал свой путь в начале 90-х годов как примитивный язык для создания веб-страниц, и в настоящий момент уже трудно представить себе интернет без HTML. Подавляющее большинство сайтов так или иначе используют HTML.

В 2014 году официально была завершена работа над новым стандартом — HTML5, который фактически произвел революцию, привнеся в HTML много нового.

Что именно привнес HTML5?

  • HTML5 определяет новый алгоритм парсинга для создания структуры DOM

  • добавление новых элементов и тегов, как например, элементы video, audio и ряд других

  • переопределение правил и семантики уже существовавших элементов HTML

Фактически с добавлением новых функций HTML5 стал не просто новой версией языка разметки для создания веб-страниц, но и фактически платформой для создания приложений, а область его использования вышла далеко за пределы веб-среды интернет: HTML5 применяется также для создания мобильных приложений под Android, iOS, Windows Mobile и даже для создания десктопных приложений для обычных компьютеров (в частности, в ОС Windows 8/8.

1/10).

В итоге, как правило, HTML 5 применяется преимущественно в двух значениях:

  • HTML 5 как обновленный язык разметки гипертекста, некоторое развитие предыдущей версии HTML 4

  • HTML 5 как мощная платформа для создания веб-приложений, которая включает не только непосредственно язык разметки гипертекста, обновленный HTML, но и язык программирования JavaScript и каскадные таблицы стилей CSS 3.

Кто отвечает за развитие HTML5? Этим занимается World Wide Web Consortium (сокращенно W3C — Консорциум Всемирной Паутины) — независимая международная организация, которая определяет стандарт HTML5 в виде спецификаций. Текущую полную спецификацию на английском языке можно посмотреть по адресу https://www.w3.org/TR/html5/. И надо отметить, что организация продолжает работать над HTML5, выпуская обновления к спецификации.

Поддержка браузерами

Надо отметить, что между спецификацией HTML5 и использованием этой технологии в веб-браузерах всегда был разрыв. Большинство браузеров стало внедрять стандарты HTML5 еще до их официальной публикации. И к текущему моменту большинство последних версий браузеров поддерживают большинство функциональностей HTML5 (Google Chrome, Firefox, Opera, Internet Explorer 11, Microsoft Edge). В то же время многие старые браузеры, как например, Internet Explorer 8 и более младшие версии, не поддерживают стандарты, а IE 9, 10 поддерживает лишь частично.

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

Для проверки поддержки HTML5 конкретным браузером можно использовать специальный сервис http://html5test.com.

Необходимые инструменты

Что потребуется для работы с HTML5? В первую очередь, текстовый редактор, чтобы набирать текст веб-страниц на html. На данный момент одним из самых простых и наиболее популярных текстовых редакторов является Notepad++, который можно найти по адресу http://notepad-plus-plus. org/. К его преимуществам можно отнести бесплатность, подсветка тегов html. В дальнейшем я буду ориентироваться именно на этот текстовый редактор.

Также стоит упомянуть кроссплатформенный текстовый редактор Visual Studio Code. Данный редактор обладает несколько большими возможностями, чем Notepad++, и кроме того, может работать не только в ОС Windows, но и в MacOS и в операционных системах на основе Linux.

И также потребуется веб-браузер для запуска и проверки написанных веб-страничек. В качестве веб-браузера можно взять последнюю версию любого из распространенных браузеров — Google Chrome, Mozilla Firefox, Microsoft Edge, Opera.

СодержаниеВперед

Элемент head и метаданные веб-страницы

Последнее обновление: 08.04.2016

Основная часть документа html, фактически все, что мы увидим в своем браузере при загрузке веб-страницы, располагается между тегами <body> и </body>. Здесь размещаются большинство элементов html.

Хотя большинство элементов в HTML5 остаются теми же, что и в ранних версиях, но несколько изменился способ их использования. Рассмотрим базовые элементы HTML5, их предназначение и использование.

Как правило, одним из первых элементов html-документа является элемент head, задача которого состоит в установке метаданных страницы и ряда сопроводительной информации. Метаданные содержат информацию о html-документе.

Заголовок

Для установки заголовка документа, который отображается на вкладке браузера, используется элемент title


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Элемент title</title>
	</head>
	<body>
		<p>Содержание документа HTML5</p>
	</body>
</html>

Элемент base

Элемент base позволяет указать базовый адрес, относительно которого устанавливаются другие адреса, используемые в документе:


<!DOCTYPE html>
<html>
	<head>
		<base href="content/">
		<meta charset="utf-8">
		<title>Элемент base</title>
	</head>
	<body>
		<a href="newpage.
  html">Перейти</a>
	</body>
</html>

Хотя для ссылки в качестве адреса указана страница newpage.html, но фактически ее адресом будет content/newpage.html. То есть в одной папке с текущей страницей должна быть подпапка content, в которой должен находится файл newpage.html

Можно также указывать полный адрес:


<base href="http://www.microsoft.com/">

В это случае ссылка будет вести по адресу http://www.microsoft.com/newpage.html

Элемент meta

Элемент meta определяет метаданные документа.

Чтобы документ корректно отображал текст, необходимо задать кодировку с помощью атрибута charset. Рекомендуемой кодировкой является utf-8:


<meta charset="utf-8">

При этом надо помнить, что указанная элементе

meta кодировка должна совпадать с кодировкой самого документа. Как правило, текстовый редактор позволяет указать кодировку документа. Если мы хотим ориентироваться на utf-8, то в настройках текстового редактора надо выбирать UTF-8 w/o BOM. Например, выбор кодировки в Notepad++:

Элемент meta также имеет два атрибута: name и content. Атрибут name содержит имя метаданных, а content — их значение.

По умолчанию в HTML определены пять типов метаданных:

  • application name: название веб-приложения, частью которого является данный документ

  • author: автор документа

  • description: краткое описание документа

  • generator: название программы, которая сгенерировала данный документ

  • keywords: ключевые слова документа

Надо отметить, что наиболее актуальным является тип description. Его значение поисковики часто используют в качестве аннотации к документу в поисковой выдаче.

Добавим в документ ряд элементов meta:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<base href="content/">
		<title>Элемент title</title>
		<meta name="description" content="Первый документ HTML5">
		<meta name="author" content="Bill Gates">
	</head>
	<body>
		<a href="newpage. html">Содержание документа HTML5</a>
	</body>
</html>

НазадСодержаниеВперед

Учебник по HTML5 и CSS3: теги, атрибуты и селекторы

Перейти к содержимому
  • Дом
  • Обзор
  • Курсы

Интерактивный

Расширенная библиотека

Дрю Баронтини

Попробуйте бесплатно

Получить это интерактивный курс плюс самые популярные технические навыки и другие популярные темы.

Начало работы

45,00 $

в месяц после 10-дневного пробного периода

Ваша 10-дневная бесплатная пробная версия Premium включает

Расширенная библиотека

Этот курс и более 7000 дополнительных курсов из нашей полной библиотеки курсов.

Практическая библиотека

Практикуйтесь и применяйте знания быстрее в реальных сценариях с проектами и интерактивными курсами.

*Доступно только в версии Premium

Для команд

Предоставьте до 10 пользователям доступ к нашей полной библиотеке, включая этот курс бесплатно на 14 дней

Информация о курсе

Что вы узнаете

Откройте для себя последние версии HTML и CSS, включая теги HTML5, элементы форм, атрибуты, типы ввода, стили CSS и многое другое. Этот интерактивный курс ранее назывался Front-end Formations on Code School.

Содержание

Обзор и обновления

1 Видео • 8 испытаний