Изучение html5: HTML уроки с нуля - учебник для начинающих

Содержание

Руководство по стилю и соглашения о кодировании 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 необязательно закрывать пустые элементы.

Разрешены:

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

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

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

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

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

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

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

Плохо:

<div>

Хорошо:

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

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

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

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

Очень плохо:

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

Плохо:

Хорошо:

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

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

Плохо:

Good:

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

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

Плохо:

Хорошо:

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

При использовании редактора 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> предоставляет обозревателю инструкции по управлению размерами страницы и масштабированию.

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

Элемент начального масштаба = 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 не требуется):

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

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 не нужен):

Доступ к элементам 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, и нет никаких причин, он не должен использоваться.

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

Обучение HTML 5 и CSS с нуля

О курсе

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

Этот курс входит в специальности:

Frontend Developer Верстальщик сайтов Ruby Developer

Предварительные Требования

Данный видеокурс рассчитан на верстальщиков, веб-программистов и тех, кто уже владеет технологиями HTML, CSS и JavaScript (завершили курс JavaScript Advanced).

Вы научитесь

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

Скачать материалы курса Для получения материалов курса нужно авторизоваться

Получить сертификат Для получения сертификата нужно авторизоваться

Дмитрий Охрименко

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

Другие курсы автора

Длительность: 11 ч 49 м
Курс создан: 15.07.2013
Уроков: 11
Обновлен: 01.02.2018
Язык: русский

Что входит в курс

11 видео уроков
Домашние задания
Тестирование
Сертификат
Проверка ДЗ

СМОТРЕТЬ

Для прохождения теста нужно авторизироваться

Войти Регистрация

Вы открыли доступ к тесту! Пройти тест

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

Войти Регистрация

№1

Знакомство с курсом HTML5&CSS3

0:06:43

Материалы урокаДомашние заданияТестирование

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

№2

Введение в HTML5