Html5 учебник для начинающих: HTML уроки с нуля — учебник для начинающих

Leave a Comment / Html / By /

Содержание

Учебник HTML5

260

Web-программирование — Учебник HTML5

С первого взгляда можно предположить, что HTML5 — это пятая версия языка HTML для создания веб-страниц. Но в действительности все не так просто.

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

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

Разобраться в HTML5 — задача не из легких. Самой большой проблемой является то обстоятельство, что термин «HTML5» используется для обозначения свыше дюжины отдельных стандартов. (Как мы узнаем, эта ситуация является результатом эволюции HTML5, который начинался как единый стандарт, но впоследствии был разделен на более управляемые части.)

В действительности, термин «HTML5» сейчас означает «HTML5 и связанные стандарты» и, в еще более широком понимании, «следующее поколение технологий разработки веб-страниц». Вот такую версию HTML5 мы и будем рассматривать: все от базового языка HTML5 до новых возможностей, сброшенных в одну кучу с HTML5, хотя они никогда и не были частью этого стандарта.

  • 1. Введение в HTML5

    • История HTML5
    • Простой документ HTML5
    • Синтаксис HTML5
    • Семейства элементов
    • Поддержка браузерами HTML5
    • Семантические элементы
    • Браузерная совместимость семантических элементов
    • Текстовые семантические элементы
    • Семантическая разметка и микроформаты

  • 2.

    Веб-формы
    • Формы HTML5
    • Валидация форм
    • Новые типы элемента <input>
    • Новые элементы форм
    • HTML редактор

  • 3. Аудио и видео

    • Аудио и видео
    • Поддерживаемые форматы аудио и видео
    • Управление плеером с помощью JavaScript

  • 4. Canvas

    • Элемент Canvas
    • Трансформации и прозрачность
    • Простая программа рисования
    • Браузерная совместимость элемента Canvas
    • Вставка изображений и текста
    • Тени и градиентная заливка
    • Интерактивные фигуры
    • Анимация
    • Простая игра на Canvas

  • 5.

    Web Storage API и File API
    • Обзор Web Storage
    • Работа с Web Storage
    • Пример приложения Web Storage
    • Чтение файлов

  • 6. Автономные приложения

    • Обзор автономных приложений
    • Файл манифеста
    • Практические методы кэширования

  • 7. Взаимодействие с веб-сервером

    • Объект XMLHttpRequest
    • Серверные события
    • Веб-сокеты

  • 8. Geolocation API, Web Workers и другие средства

    • Геолокация
    • Web Workers API — фоновые вычисления
    • Управление историей просмотров

Руководство по стилю и соглашения о кодировании HTML уроки для начинающих академия

❮ Назад Дальше ❯

Соглашения о кодировке HTML

Веб-разработчики часто не уверены в стиле кодирования и синтаксисе для использования в HTML.

Между 2000 и 2010, многие веб-разработчики преобразованы из HTML в XHTML.

С помощью XHTML разработчики были вынуждены писать корректный и «хорошо сформированный» код.

HTML5 немного более небрежен, когда дело доходит до проверки кода.

Будьте умны и будущие доказательства

Последовательное использование стиля, облегчает для других, чтобы понять ваш HTML.

В будущем такие программы, как читатели XML, могут захотеть читать ваш HTML.

Использование хорошо сформированного синтаксиса «close to XHTML» может быть умным.

Всегда держите код аккуратным, чистым и хорошо сформированным.

Использовать правильный тип документа

Всегда объявлять тип документа в качестве первой строки в документе:

<!DOCTYPE html>

Если требуется согласованность с тегами нижнего регистра, можно использовать:

<!doctype html>

Использовать имена элементов нижнего регистра

HTML5 позволяет смешивать прописные и строчные буквы в именах элементов.

Рекомендуется использовать имена элементов нижнего регистра, так как:

  • Смешивание прописных и строчных имен плохо
  • Разработчики обычно используют строчные имена (как в XHTML)
  • Нижний регистр выглядят чище
  • Строчные легче писать

Плохо:

<SECTION>
  <p>This is a paragraph.</p>
</SECTION>

Очень плохо:

<Section>
  <p>This is a paragraph.</p>
</SECTION>

Хорошо:

<section>
  <p>This is a paragraph.</p>
</section>

Закрытие всех элементов HTML

В HTML5 не нужно закрывать все элементы (например, элемент <p> ).

Рекомендуется закрыть все элементы HTML.

Плохо:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

Хорошо:

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph. </p>
</section>

Закрытие пустых элементов HTML

В HTML5 необязательно закрывать пустые элементы.

Разрешены:

<meta charset=»utf-8″>

Также разрешено:

<meta charset=»utf-8″ />

Однако в XHTML и XML требуется закрывающая косая черта (/).

Если вы ожидаете, что программное обеспечение XML для доступа к вашей странице, это хорошая идея, чтобы сохранить закрывающую косую черту!

Использовать имена атрибутов нижнего регистра

HTML5 позволяет смешивать прописные и строчные буквы в именах атрибутов.

Рекомендуется использовать имена атрибутов нижнего регистра, так как:

  • Смешивание прописных и строчных имен плохо
  • Разработчики обычно используют строчные имена (как в XHTML)
  • Нижний регистр выглядят чище
  • Строчные легче писать

Плохо:

<div>

Хорошо:

<div class=»menu»>

Значения атрибутов предложения

HTML5 позволяет значения атрибутов без кавычек.

Мы рекомендуем цитировать значения атрибутов, так как:

  • Смешивание прописных и строчных значений плохо
  • Цитируемые значения легче читать
  • Кавычки необходимо использовать, если значение содержит пробелы

Очень плохо:

Это не будет работать, так как значение содержит пробелы:

<table class=table striped>

Плохо:

<table class=striped>

Хорошо:

<table class=»striped»>

Атрибуты изображения

Всегда добавляйте атрибут alt к изображениям. Этот атрибут важен, когда изображение по какой-либо причине не может быть отображено. Кроме того, всегда определяйте ширину и высоту изображения. Это уменьшает мерцание, потому что браузер может зарезервировать место для изображения перед загрузкой.

Плохо:

<img src=»html5.gif»>

Good:

<img src=»html5.gif» alt=»HTML5″>

Пробелы и знаки равенства

HTML5 позволяет пробелы вокруг знака равенства. Но пространство-менее легче читать, и группирует сущности лучше вместе.

Плохо:

<link rel = «stylesheet» href = «styles.css»>

Хорошо:

<link rel=»stylesheet» href=»styles.css»>

Избегайте длинных строк кода

При использовании редактора HTML неудобно прокручивать вправо и влево, чтобы прочитать HTML-код.

Старайтесь избегать строк кода длиной более 80 символов.

Пустые строки и отступы

Не добавляйте пустые строки без причины.

Для удобочитаемости добавьте пустые строки для разделения больших или логических блоков кода.

Для удобочитаемости добавьте два пробела отступа. Не используйте клавишу TAB.

Не используйте ненужные пустые строки и отступы. Нет необходимости отступить каждый элемент:

Ненужные:

<body>

  <h2>Famous Cities</h2>

  <h3>Tokyo</h3>

  <p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>

Лучше:

<body>

<h2>Famous Cities</h2>

<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>

Пример таблицы:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

Пример списка:

<ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

Пропуск <html> и <body>?

В стандарте HTML5 тег <html> и тег <body> могут быть опущены.

Следующий код будет проверяться как HTML5:

Пример

<!DOCTYPE html>

<head>
  <title>Page Title</title>
</head>

<h2>This is a heading</h2>
<p>This is a paragraph.</p>

Не рекомендуется опускать <html> и тег <body>.

Элемент <html> является корнем документа. Это рекомендуемое место для указания языка страницы:

<!DOCTYPE html>
<html lang=»en-US»>

Объявление языка важно для приложений специальных возможностей (программы чтения с экрана) и поисковых систем.

Пропуск <html> или <body> может аварийно завершить работу DOM и XML программного обеспечения.

Пропуск <body> может привести к ошибкам в старых браузерах (IE9).

Опустить <head>?

В стандарте HTML5 тег <head> также можно опустить.

По умолчанию браузеры будут добавлять все элементы перед <body>, в элемент <head> по умолчанию.

Вы можете уменьшить сложность HTML, пропустив тег <head>:

Пример

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
  <h2>This is a heading</h2>

  <p>This is a paragraph.</p>
</body>

</html>

Не рекомендуется опускать тег <head>.

Пропуск тегов не знаком веб-разработчикам. Это требует времени, чтобы быть установлен в качестве ориентира.

Метаданных

Элемент <title> необходим в HTML5. Сделайте название как можно более осмысленным:

<title>HTML5 Syntax and Coding Style</title>

Чтобы обеспечить правильную интерпретацию и правильную индексацию поисковых систем, как язык, так и кодировка символов должны быть определены как можно раньше в документе:

<!DOCTYPE html>
<html lang=»en-US»>
<head>
  <meta charset=»UTF-8″>
  <title>HTML5 Syntax and Coding Style</title>
</head>

Настройка видового экрана

HTML5 ввел метод, позволяющий веб-дизайнерам управлять окном просмотра через тег <meta>.

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

На всех веб-страницах следует включить следующий элемент <meta> видового экрана:

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

Элемент видового экрана <meta> предоставляет обозревателю инструкции по управлению размерами страницы и масштабированию.

Ширина = устройство-ширина часть задает ширину страницы, чтобы следовать ширине экрана устройства (который будет варьироваться в зависимости от устройства).

Элемент начального масштаба = 1.0 задает начальный уровень масштабирования при первой загрузке страницы обозревателем.

Ниже приведен пример веб-страницы без мета-тега видового экрана и той же веб-страницы с мета-тегом видового экрана:

Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.


Без мета-тега видового экрана

с мета-тег видового экрана

Комментарии в формате HTML

Краткие комментарии должны быть написаны на одной строке, как это:

<!— This is a comment —>

Комментарии, охватывающие более одной строки, должны быть написаны так:

<!—
  This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example.
—>

Длинные комментарии легче заметить, если они имеют отступ двух пробелов.

Таблицы стилей

Используйте простой синтаксис для связывания с таблицами стилей (атрибут Type не требуется):

<link rel=»stylesheet» href=»styles.css»>

Короткие правила могут быть записаны сжатыми, на одной строке, вот так:

p.intro {font-family: Verdana; font-size: 16em;}

Длинные правила должны быть написаны на несколько строк:

body {
  background-color: lightgrey;
  font-family: «Arial Black», Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

  • Поместите открывающую скобку на ту же линию, что и селектор
  • Используйте один пробел перед открывающей скобкой
  • Использовать два пробела отступа
  • Используйте точку с запятой после каждой пары значение свойства, включая последнюю
  • Используйте кавычки только вокруг значений, если значение содержит пробелы
  • Поместите закрывающую скобку на новую линию без пробелов
  • Избегайте линий более 80 символов

Загрузка JavaScript в HTML

Используйте простой синтаксис для загрузки внешних скриптов (атрибут Type не нужен):

<script src=»myscript. js»>

Доступ к элементам HTML с помощью JavaScript

Следствие использования «неопрятных» стилей HTML может привести к ошибкам JavaScript.

Эти два JavaScript-заявления будут давать разные результаты:

Пример

var obj = getElementById(«Demo»)

var obj = getElementById(«demo»)

Посетите руководство по стилю JavaScript.

Использовать имена файлов нижнего регистра

Некоторые веб-серверы (Apache, UNIX) чувствительны к регистру имен файлов: «London.jpg» не может быть доступен как «London.jpg».

Другие веб-серверы (Microsoft, IIS) не чувствительны к регистру: «London.jpg» можно получить как «London.jpg» или «London.jpg».

Если вы используете смесь верхнего и нижнего регистра, вы должны быть очень последовательны.

Если вы переходите от регистра, не чувствительного к регистру, то даже небольшие ошибки нарушают ваш веб-сайт!

Чтобы избежать этих проблем, всегда используйте имена файлов нижнего регистра.

Расширения файлов

HTML-файлы должны иметь расширение .HTML или .htm.

CSS-файлы должны иметь расширение .CSS.

Файлы JavaScript должны иметь расширение .js.

Различия между .htm и .HTML

Нет разницы между расширениями .htm и .HTML. Оба будут рассматриваться как HTML любым веб-браузером или веб-сервером.

Различия культурны:

.htm «пахнет» ранних систем DOS, где система ограничила расширения до 3 символов.

.HTML «пахнет» операционных систем UNIX, которые не имеют этого ограничения.

Технические отличия

Если URL-адрес не указывает имя файла (например, HTTPS://html5css.ru/CSS/), сервер возвращает имя файла по умолчанию. Общими именами файлов по умолчанию являются index.HTML, index.htm, Default.HTML и Default.htm.

Если сервер настроен только с «index.HTML» в качестве имени файла по умолчанию, файл должен иметь имя «index.HTML», а не «index. htm».

Тем не менее, серверы могут быть настроены с более чем одного имени файла по умолчанию, и обычно можно настроить столько имен файлов по умолчанию, как необходимо.

Во всяком случае, полное расширение для HTML-файлов является. HTML, и нет никаких причин, он не должен использоваться.

❮ Назад Дальше ❯

Как встроить аудио в HTML5

Рекламные объявления

В этом уроке вы узнаете, как встроить аудио в документ HTML.

Встраивание аудио в HTML-документ

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

В этой главе мы продемонстрируем некоторые из многих способов встраивания звука на вашу веб-страницу, от использования простой ссылки до использования новейшего HTML5 <аудио> элемент.

Использование элемента HTML5 audio

Недавно представленный элемент HTML5 обеспечивает стандартный способ встраивания звука в веб-страницы. Тем не менее, элемент audio является относительно новым, но он работает в большинстве современных веб-браузеров.

В следующем примере аудио просто вставляется в документ HTML5 с использованием набора элементов управления браузера по умолчанию, причем один источник определяется атрибутом src .

Пример
Попробуйте этот код »

Аудио, использующее набор элементов управления браузера по умолчанию, с альтернативными источниками.

Пример
Попробуйте этот код »

Трек «ogg» в приведенном выше примере работает в Firefox, Opera и Chrome, в то время как тот же трек в формате «mp3» добавляется, чтобы звук работал в Internet Explorer и Safari.

Связывание аудиофайлов

Вы можете создавать ссылки на свои аудиофайлы и воспроизводить их, отмечая их.

Давайте попробуем следующий пример, чтобы понять, как это в основном работает:

Пример
Попробуйте этот код »
 Дорожка 1
Дорожка 2

Использование элемента object

Элемент используется для встраивания различных типов мультимедийных файлов в документ HTML. Первоначально этот элемент использовался для вставки элементов управления ActiveX, но согласно спецификации объектом может быть любой медиа-объект, такой как аудио, видео, PDF-файлы, Flash-анимация или даже изображения.

Следующий пример кода встраивает простой аудиофайл в веб-страницу.

Пример
Попробуйте этот код »

Предупреждение: Элемент широко не поддерживается и во многом зависит от типа внедряемого объекта. Другие методы, такие как элемент HTML5 или сторонние аудиоплееры HTML5, во многих случаях могут быть лучшим выбором.

Использование элемента embed

Элемент используется для встраивания мультимедийного содержимого в документ HTML.

Следующий фрагмент кода встраивает аудиофайлы в веб-страницу.

Пример
Попробуйте этот код »

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

Предыдущая страница Следующая страница

Бесплатные учебные пособия по HTML5 — руководство для начинающих по HTML

HTML (язык гипертекстовой разметки) претерпел множество изменений за годы , как и путь веб-дизайна и разработки в целом.

Последняя итерация HTML — HTML5 — это то, что я расскажу здесь вместе с его партнером в преступлении CSS3 (каскадные таблицы стилей). С переходом на более адаптивный (удобный для мобильных устройств) веб-дизайн кодирование в соответствии с последними стандартами становится еще более важным.

Введение в HTML5 — руководство для начинающих

Эта отправная точка предполагает, что вы мало что знаете об HTML и хотели бы узнать больше. Он задуман как общее руководство для начинающих . Итак, начнем!

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

Чтобы начать изучение HTML, вам понадобится всего несколько основных инструментов:

  • Текстовый редактор: Windows поставляется с Блокнотом, Mac поставляется с TextEdit, а другие системы, зависящие от Linux, поставляются со своими собственными редакторами, такими как Nano.
  • Браузер — обычно подойдет любой браузер, но убедитесь, что вы используете самую последнюю версию, потому что старые браузеры часто не поддерживают последние стандарты кодирования.

Существует множество редакторов кода. Люди в моем офисе используют то, что им удобнее (я работаю в дизайнерском агентстве), но мы использовали несколько бесплатных примеров:

  • Atom (мой выбор)
  • Brackets
  • Komodo Edit (я использовал его в прошлом)
  • NotePad++
  • Sublime Text

Преимущество перед лучшим текстовым редактором, чем тот, который поставляется с Windows или Mac OSX заключается в том, что вы можете получить подсветку синтаксиса , номера строк и проверку ошибок , среди прочего. Некоторые редакторы также помогают автоматически дополнять часть вашего кода, чтобы вы не запомнили его.

HTML5 Foundation — Теги

HTML формируется с использованием так называемых тегов , называемых «метками» для определенных вещей на веб-странице. Многие из этих тегов требуют, чтобы вы указали, где начинается элемент на вашей странице («открывающий тег») и где он заканчивается («закрывающий тег»).

Итак, здесь вы можете видеть, что у нас есть тег

, который указывает начало «статьи» на странице. Затем у нас есть письменное предложение на английском языке, за которым следует
, что указывает на то, что статья завершена.

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

Примечание о новых строках

В отличие от документа текстового процессора, ввод новых строк или нескольких пробелов не влияет на окончательный документ.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *