Html азы: Доступность | MDN

HTML5 — Основы — ИТ Шеф

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

Структура HTML-документа

Изучение структуры HTML-документа начнём с того, что вспомним устройство HTML-элемента. Любой HTML-элемент в документе состоит из открывающего тега (<имяэлемента>), закрывающего тега (</имяэлемента>) и контента, расположенного между этими тегами. Среди HTML-элементов есть исключения, т.е. имеются элементы, которые состоят только из одного открывающего тега, но эти элементы не определяют структуру HTML-документа и рассматриваться в этой статье не будут.

Контент, находящийся между открывающим и закрывающим тегом некоторого элемента (1), кроме текста может также содержать другой HTML-элемент (2) или другие HTML-элементы (3).

В этом случае этот элемент (2) или эти элементы (3) будут вложены в элемент(1). Т.е. между ними образуется связь родитель (1)-ребёнок (2) или родитель (1)-дети (3).

В свою очередь элемент (2) или каждый из HTML-элементов (3) могут в качестве контента тоже содержать HTML-элементы и т.д.

Таким образом получается древовидная (иерархическая) конструкция, структура которой определяется в зависимости от того в каком элементе находится тот или иной элемент.

Иерархические отношения между HTML-элементами

Родитель (parent). Каждый HTML-элемент имеет родителя. Для некоторого HTML-элемента родительским является тот элемент, в который он вложен.

Ребёнок (child). В каждый HTML-элемент (1) может быть вложен другой HTML-элемент (2) или несколько HTML-элементов (3). Каждый из этих элементов (2, 3) являются для элемента (1) ребёнком.

Предок (ancestor).

HTML-элемент (1) считается предком некоторого другого HTML-элемента (2), если он является родителем его родителя или имеет ещё более дальнюю родительскую связь.

Потомок (descendant). HTML-элемент (1) считается потомком некоторого другого HTML-элемента (2), если он (1) является ребёнком его ребёнка (2) или ребёнком ещё более дальнего прародителя.

Сиблинг (брат, сестра, сосед, sibling). HTML-элемент (1) считается сиблингом по отношению к другому HTML-элементу (2), если оба элемента имеют одного и того же родителя.

Как правильно писать HTML-код

Создавать HTML-код, чтобы потом в него было просто вносить изменения, необходимо с учётом вложенности одних элементов в другие. Чтобы это выполнить необходимо HTML-код (1), который вложен в некоторый HTML-элемент (2), сдвигать относительно него (2) на 2 пробела.

<div>
  <h2>Заголовок</h2>
  <div>
    <h3>Название раздела</h3>
    <p>Текст статьи...</p>
  <div>
  <div>
    <p>Текст комментариев...</div>
  </div>
</div>

Что такое веб-браузер (web-browsers)

Веб-браузер — это программное обеспечение для просмотра веб-страниц. Основные виды браузеров: Internet Explorer (Microsoft), Firefox (Mozilla), Chrome (Google), Safari (Apple), Opera (Opera).

Что такое user agent

User agent — это любое программное обеспечение, которое используется для доступа к веб-страницам от имени пользователей.

User agent-ами являются не только браузеры, но и программы-роботы поисковых систем Яндекс и Google.

Инструменты для создания HTML

Для создания HTML-документов использовать какие-то специализированные инструменты необязательно. Писать код HTML можно используя простые текстовые редакторы, такие как Notepad в Windows, TextEdit в MacOS, gedit в Ubuntu Linux и т.д.

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

При создании веб-страниц необходимо учитывать то, что их отображение в разных браузерах может немного отличаться. Т.е. их необходимо во время разработки проверять правильно ли они сделаны или нет в двух или более веб-браузерах.

Создание HTML-документа

Создание HTML-документа начинается с указания типа документа. Т.е. первое что необходимо указать при создании документа — это то, что документ является HTML 5.

<!DOCTYPE html>

После этого пишется элемент html. Данный элемент состоит из открывающего тега (<html>), контента и закрывающего тега (

</html>).

Контент данного элемента — это содержимое HTML-документа (веб-страницы).

Элемент html всегда следует указывать с атрибутом lang. Атрибут lang предназначен для задания основного языка, который будет использоваться в содержимом данного элемента.

Например, lang="en" — означает, что текстовое содержимое элемента html будет соответствовать английскому языку. А например, указание атрибуту lang значения "ru" означает, что текст контента элемента html будет на русском языке.

<!DOCTYPE html>
<html lang="ru">

</html>

Если рассматривать HTML-документ как древовидную структуру, то в ней, элемент html является корнем.

Элемент html содержит в качестве контента всегда два элемента. Первый элемент — это

head, а второй элемент — это body. Элемент body всегда располагается после элемента head.

Элемент head также как и элемент html состоит из открывающего тега (<head>), контента и закрывающего тега (</head>). Он используется как контейнер для того чтобы содержать другие элементы, которые предназначены для того чтобы предоставить данные о странице (коллекцию метаданных HTML-документа). Т.е. он содержит HTML-элементы, которые предоставляют user agent информацию о заголовке страницы (title), кодировке символов, подключенных стилях CSS и многое другое.

Содержимое элемента head не отображается в окне или вкладки веб-браузера.

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

body (видимой части HTML-документа). Т.е. он (элемент head и его контент) в основном предназначен для сообщения браузеру (user agent) всей дополнительной (служебной) информации, которая необходима для правильного отображения содержимого элемента body.

<!DOCTYPE html>
<html lang="ru">
 <head>

 </head>
</html>

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

<!DOCTYPE html>
<html lang="ru">
 <head>

 </head>
 <body>

 </body>
</html>

Добавим в элемент head информацию о заголовке веб-страницы. Заголовок веб-страницы создаётся с помощью элемента title. Элемент title, состоит из открывающего тега (<title>), контента (заголовка страницы) и закрывающего тега (</title>).

<!DOCTYPE html>
<html lang="ru">
 <head>
   <title>Заголовок страницы</title>
 </head>
 <body>

 </body>
</html>

Добавим в элемент head информацию о кодировке символов, используемых в документе. Кодировка символов указывается с помощью элемента meta и атрибута charset. Элемент meta, состоит только из открывающего тега (<meta>) и предназначен для сообщения различной информации о странице посредством различных атрибутов.

<!DOCTYPE html>
<html lang="ru">
 <head>
   <title>Заголовок страницы</title>
   <meta charset="utf-8">
 </head>
 <body>

 </body>
</html>

Основной каркас HTML 5 страницы готов. Теперь добавим текстовое содержимое в элемент body, которое увидет пользователь при открытии данной страницы в браузере.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Заголовок страницы</title>
    <meta charset="utf-8">
  </head>
  <body>
    Я люблю HTML5.
  </body>
</html>

НОУ ИНТУИТ | Основы работы с HTML

 

Форма обучения:

дистанционная

Стоимость самостоятельного обучения:

бесплатно

Доступ:

свободный

Документ об окончании:

Уровень:

Для всех

Длительность:

9:40:00

Студентов:

23496

Выпускников:

9840

Качество курса:

4.30 | 4.02

Курс посвящен практике применения языка гипертекстовой разметки HTML.

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

Теги: acronym, css, e-mail, html, LRM, noframes, rich text, samp, SOH, WAIS, xhtml, акроним, анкер, браузеры, масштабирование изображения, поиск, редакторы, серверы, форматирование, цвета, шрифты, электронная почта, элементы

Дополнительные курсы

 

2 часа 30 минут

—

Введение в HTML

В этой лекции рассказывается о языке гипертекстовой разметки HTML, вводится понятие «тег» и рассматривается пример простейшей web-страницы, подробно рассматриваются теги и приводятся примеры их параметров. Рассматривается структура web-страницы. Рассматриваются теги параграфа, заголовка, отступа и способы организации комментария.

—

Форматирование символов

Этот урок посвящен работе с текстом. Рассматриваются способы и теги форматирования текстовой информации. Рассказывается о способах вывода на экран специальных символов.

—

Гипертекстовые ссылки

Эта лекция посвящена способам организации связей между ресурсами с помощью гипертекстовых ссылок. Рассматриваются способы разбивки окна браузера на несколько независимых частей.

—

Таблицы

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

—

Списки HTML

Этот урок посвящен созданию списков, их оформлению и упорядочению.

—

Формы HTML и ввод данных

В этой лекции рассматриваются способы взаимодействия с пользователем и методы отправки пользовательских данных на web-сервер.

—

Изображения в HTML

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

—

Фон страницы в HTML

Этот урок посвящен оформлению фона web-страницы графическими элементами. А также на практическом примере рассматриваются аспекты работы HTML с цветовой палитрой.

—

Дополнительные возможности HTML

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

—

HTML и CSS.

Уровень 1. Создание сайтов на HTML 5 и СSS 3 X

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

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

РАЭК рекомендует курсы «Специалист»

Планируете сделать веб-технологии своей профессией? Хотите создавать сайты? Работать верстальщиком, web-дизайнером, а может, интернет-маркетологом? У вас есть онлайн-проект, который Вы продвигаете сами? В любом случае, Вам не обойтись без знания HTML и CSS  – языков разметки веб-страниц и их внешнего оформления. 

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

Во время обучения Вы получите начальные навыки работы в HTML и CSS, а также научитесь применять интерактивные возможности последних версий – HTML 5 и CSS 3.

В рамках курса ведется работа над проектом «Создание веб-сайта. Наполнение сайта текстом, изображениями и видео».

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

А еще во время обучения Вы узнаете, что важнее – дизайн или чёткая структура? И как спроектировать сайт таким образом, чтобы он успешно продвигался в дальнейшем?

Программа курса соответствует требованиям профессионального стандарта.

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

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

ПОЛЕЗНЫЕ МАТЕРИАЛЫ

Основы Web-программирования

264

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

Ниже представлены разделы, которые входят в данную тему:

HTML5

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

CSS3

Почти бессмысленно пытаться создать современный веб-сайт, не используя возможностей CSS (Cascading Style Sheet). Этот стандарт воткан в ткань Всемирной сети почти так же плотно, как и HTML. Каскадные таблицы стилей являются основным средством для любого типа деятельности в области веб-дизайна, будь то компоновка страниц, создание интерактивных кнопок и меню или простое декорирование. По сути, в то время как фокус HTML все больше смещается на содержимое и семантику, спецификация CSS стала центральной технологией веб-дизайна.

JavaScript, jQuery

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

ASP.NET

ASP.NET является основной технологией для построения серверных элементов веб-приложений от Microsoft. Заинтересовать разработчиков в ASP.NET совсем нетрудно. Без преувеличения, ASP.NET является наиболее полной платформой для веб-разработки из всех, которые когда-либо создавались.

PHP и MySQL

Сочетание PHP и MySQL является одним из самых удобных подходов к динамическому веб-конструированию, основанному на использовании базы данных. Благодаря открытости исходных кодов (в отличие от конкурирующей технологии ASP. NET) это технологическое сочетание можно использовать совершенно бесплатно, и поэтому оно приобрело очень большую популярность у веб-разработчиков. Любой претендующий на результативность разработчик, использующий платформу Unix/Linux или даже Windows/Apache, нуждается в серьезном освоении этих технологий.

Геймерская мышь Pulsefire FPS Pro с RGB-подсветкой

Форма

Симметричная

Эргономичная

Симметричная

Эргономичная

Эргономичная

Симметричная

Тип подключения

Тип подключения

Проводной

Проводной

Проводной

Проводное

Беспроводное 2,4 ГГц

Проводное

Подсветка

RGB

RGB

RGB — 360°

RGB

RGB

RGB

Кнопки

7

6

6

11

6

6

Надежность переключателей

Надежность переключателей

20 млн нажатий

20 млн нажатий

50 млн нажатий

20 млн нажатий

50 млн нажатий

60 млн нажатий

Оптический датчик

Оптический датчик

Pixart 3327

Pixart 3389

Pixart 3389

Pixart 3389

Pixart 3389

Pixart 3335

Максимальное разрешение

Максимальное разрешение

6200 DPI

16000 DPI

16000 DPI

16000 точек на дюйм

16000 точек на дюйм

16000 точек на дюйм

Максимальная скорость

Максимальная скорость

220 IPS

450 IPS

450 IPS

450 дюйм. /с

450 дюйм./с

450 дюймов в секунду

Максимальное ускорение

Максимальное ускорение

30 G

50 G

50 G

50 G

50 G

40G

Частота опроса

Частота опроса

1 000 Гц (1 мс)

1000 Гц (1 мс)

1000 Гц (1 мс)

1000 Гц (1 мс)

1000 Гц (1 мс)

1000 Гц (1 мс)

Тип кабеля

С оплеткой

С оплеткой

С оплеткой

С оплеткой

Отсоединяемый кабель для зарядки и передачи данных

USB-кабель HyperFlex

Масса (без кабеля)

Масса (без кабеля)

87 г

95 г

100 г

95 г

112 г

59 г

Размеры (Ш х Д х В)

Размеры (Ш х Д х В)

64 x 119 x 41 мм

71 x 128 x 42 мм

63 x 120 x 41 мм

71 x 128 x 42 мм

74 x 125 x 44 мм

67 x 124 x 38 мм

Поддержка программного обеспечения NGENUITY

Поддержка программного обеспечения NGENUITY

Совместимость

Совместимость

ПК, PS5™, PS4™, Xbox Series X|S™ и Xbox One™

ПК, PS5™, PS4™, Xbox Series X|S™ и Xbox One™

ПК, PS5™, PS4™, Xbox Series X|S™ и Xbox One™

ПК, PS5™, PS4™, Xbox Series X|S™ и Xbox One™

ПК, PS5™, PS4™, Xbox Series X|S™ и Xbox One™

Азы HTML

Мурр. *потирая лапки*
Пора начинать то самое, зачем все, собственно, создавалось.
Итак, Вам пришла в голову гениальная идея создать свой сайт. Можно, конечно, сделать его по «народовским» шаблонам, но неохота. В общем, правильно. Я не поддерживаю шаблоны, хотя на первых порах и с ними можно жить. Но все таки развивать себя надо… Ой, кажись, я отвлеклась =))) В общем, пропустим нудные лекции на тему «Что такое Интернет». И приступим…
Все то, что мы видим в нашем браузере, содержится в документе HTML.
А он, в свою очередь, является обычным текстовым файлом.
В нем находятся программные коды, которые называются тегами,
то есть последовательностью символов, заключенных в угловые скобки.

В общем, для создания нашего сайта нам понадобится простой блокнот.
На рабочем столе создаем папку, где у нас будут лежать все необходимые материалы
(в виде, картинок, музыки и тд).
Соответственно, в этой папке создаем текстовый документ,
допустим, с именем 1.
(Правой кнопкой мыши — Создать — Текстовый документ)

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

Есть теги, которые используются
исключительно попарно (такие как мы тока что нарисовали).
Есть еще теги, которые используются по одиночке.
Например тег перехода на другую строку

Сам документ состоит из двух частей: «башки» (head) и тела (body).
На каждую из частей приходится по паре тегов с такими же названиями:

И в итоге в блокноте получается вот такая красота:

Для того, чтобы наша страничка как нибудь называлась
(то есть в ней сверху было что-то написано)
существует парный тег .
Ставится он после тега . И все в итоге выглядит так:

Теперь между тегами мы напишем какой-нибудь текст. Например:

И НАКОНЕЦ (!!!) пришло время из блокнота перебраться в Internet Explorer
и посмотреть, что получилось.
Для этого жмем: Файл — Сохранить как.. — и дописываем расширение html к имени файла.
Сохранили (надеюсь, что Вы сообразили: сохраняем все в одну и ту же папку!)
Теперь открываем и если все сделано правильно, то:

Все прекрасно, поработавшим — шоколадку, но…
Как то не очень это выглядит, да?
Тогда жми Дальше и перейдем к работе с текстом.

1 2 3 4 5 6 >>

Вы освоили азы JavaScript. Но что дальше? — CSS-LIVE

Перевод статьи So, you learned JavaScript — what now? с сайта christianheilmann.com для CSS-live.ru, автор — Кристиан Хайльман

Прежде всего, поздравляю — отличный выбор! JavaScript развился из «игрушечного языка», над которым «тру прогеры» смеялись, в полноценный, на котором держится весь веб и много чего еще.

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

JavaScript повсюду!

Начнем с того, что сейчас он действительно вездесущ. И с его помощью вы можете творить много чего удивительного.

• Можно использовать его прямо в браузере, чтобы делать всякие интерактивные штуки в вебе. Это могут быть сайты, с которыми пользователю приятнее и интереснее работать, когда JS включен. А могут быть приложения для телефона, которые пользователь устанавливает и не догадываясь, что они сделаны на HTML, CSS и JS. И даже сложные игры и целые миры виртуальной реальности.
• При помощи Node можно реализовать серверную часть. В этом случае JavaScript используют для создания API, служб и даже полноценных серверов. Он позволяет выстраивать процессы сборки и автоматизировать множество рутинных задач, которые раньше требовали сервер для своей работы.
• Благодаря JavaScript-фреймворкам можно легко выводить информацию как в вебе, так и в виде бинарников для iOS, Android и других ОС. Взяв JS за основу, его можно преобразовать во много чего еще, а вот сделать наоборот (т.е., например, взять за основу бинарник для iOS и сгенерить из него JS для веба — прим. переводчика) вряд ли вообще получится.
• Можно пуститься во все тяжкие и создавать роботов, получающих свои инструкции на JavaScript. Или автоматизировать операционные системы. Или писать расширения для браузеров и другие приложения.
• Можно публиковать пакеты npm и пользоваться его преимуществами. Это огромный источник готовых решений, которые можно комбинировать между собой и использовать для решения собственных — более сложных — задач. Звучит заманчиво, но при этом есть риск использовать слишком много всего, а также использовать то, что сам не до конца понимаешь. Так что, хоть мы и живем в мире JavaScript-пакетов, не надо забывать, что всё равно это прежде всего JavaScript.

Достичь мастерства в JavaScript непросто, но первые шаги в нем гораздо легче, чем в других языках. Вы не зависите от определенного редактора, и вам не требуется компилировать код, прежде чем запустить его. И, самое важное, вам не нужно тратить деньги, чтобы начать. Браузеры — бесплатные. Множество редакторов тоже бесплатны, некоторые из них доступны даже с исходным кодом. Ну и, помимо прочего, документация всегда под рукой в онлайн-режиме.

А знаете, в чем еще прикол? Я вам завидую!

Я работаю с JavaScript практически с момента его появления и поэтому тащу с собой кучу всего ненужного.

Гуляет такая шутка, где рядом с «Полным руководством по JavaScript» лежит книга Дугласа Крокфолда «Javascript — сильные стороны». Вторая — гораздо тоньше. Это не значит, что JavaScript — плохой язык. Это значит, что его универсальность иногда играет против него самого. JavaScript работает повсюду. За многие годы кривые среды выполнения оставили множество следов в виде ужасных API и методов. Процесс стандартизации JavaScript был похож на американские горки. «Полное руководство» объясняет это. Оно вобрало в себя всё, что происходило — и хорошее, и то, о чем хочется сказать: «мама дорогая, кому вообще взбрело в голову сделать это в JavaScript?!» «Сильные стороны» делает акцент на синтаксисе и том, как правильно писать чистый JavaScript. Вы можете представить себе «Полное руководство» как полный каталог музыкальной группы со всеми их прошлыми записями. В то время как «Сильные стороны» — сборник её хитов.

Начиная с гораздо более чистого листа

И вот появляетесь вы. Я даже не хочу, чтобы вы думали о сильных сторонах языка. Этим вы займетесь позже, если углубление в синтаксис языка и конструкции щекочет воображение. А сейчас я завидую вам, потому что у вас есть возможность быстро влиться в поток. И я хочу чтобы вы, как новичок, не повторяли ошибок более опытных коллег.

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

В первую очередь — куда идти для изучения JavaScript?

Неудивительно, что это сложный вопрос. JavaScript сейчас крайне популярен. Многие начинают им зарабатывать, не желая как следует разобраться в основах. Это приводит к существованию ужасных источников со странными материалами, которые учат «простым» способам что-то сделать на JavaScript. Окажите себе услугу — не поддавайтесь этим соблазнам. Также будьте осторожными с ответами в интернете в стиле «вот быстрое решение». Зачастую это однобокие, поверхностные решения, которые гуляют из источника в источник и популярны только потому, что могут дать быстрый результат. Если что-то звучит слишком хорошо, чтобы быть правдой, то, скорее всего, что-то здесь не так.

В этом вопросе мой выбор пал на MDN Web Docs. Это беспристрастный, открытый ресурс, с хорошей поддержкой. Над ним работают не только представители Mozilla. Многие другие разработчики вносят свою лепту в контент и поддержку актуальности. Эти документы даже доступны для редактирования — вы можете что-то поменять в них, когда найдете ошибку.

Очень здорово, что Web Docs — это больше, чем просто документация. Этот ресурс содержит также примеры кода и сводные таблицы поддержки браузеров для всех вещей, о которых говорится в документе. Многие другие ресурсы, которые пытались документировать открытый веб, приходили и уходили. MDN остался в строю и процветает.

Говоря о поддержке браузерами, я горячо рекомендую ресурс «Can I use». Он подробно показывает поддержку, и информация на нем всегда актуальна. Также он содержит ссылки на спецификацию, где можно прочитать о том, какое поведение ожидать. Еще он показывает странности и проблемы, которые встречаются в различных версиях браузеров, и способы их преодоления.

Ладить с браузерами стало проще

В плане браузеров сейчас вообще царит прекрасное время. Мы проделали долгий путь, чтобы прийти к нему. В прошлом браузеры были чем-то вроде черных дыр. Пока они не решили следовать спецификациям, мы просто пытались отгадать, по какой логике всё работало. По сути, наша карьера держалась на знании браузерных глюков. Такой подход был по-своему простым, но в долгосрочной перспективе не удовлетворял всех нужд. Сейчас браузеры играют гораздо большую роль, определяя и вдохновляя спецификации. Браузеры сами по себе стараются шагать в ногу со временем. Та их функциональность, которая еще не стала стандартом, работает за флагом или доступна только в версиях для разработчиков и ночных сборках.

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

Создатели браузеров также понимают важность разработчиков. Более того — что веб-разработчик в той же степени инженер, что и пишущий на Java или C++. Инженерия требует большего, чем просто «дайте нам код и мы сделаем так, чтобы он заработал». Нам нужно углубленное понимание работы кода и её последствий. Вот потому-то все создатели браузеров тратят огромное количество времени на создание инструментов для разработчиков. Они дают нам достаточно глубокое понимание, чтобы писать код JavaScript с высоким уровнем производительности и безопасности.

Изучение инструментов для разработчиков в браузере

Отличная идея для JavaScript-разработчика — как можно лучше освоиться с инструментами для разработчиков в браузере. Каждый из браузеров их предоставляет, и они в чем-то различаются между собой. Но они все дают вам глубокое понимание. Вы можете изучать то, что вам доступно, инспектируя объекты, которые браузер предоставляет в консоли. Вы можете изучать, что происходит, когда страница рендерится, искать проблемные места. Вы можете инспектировать, редактировать и тестировать то, что в итоге отображается на странице и видеть CSS код, который в результате генерируют браузеры.

Переход от console.log() к отладке с точками останова

Вот то, что мне действительно сильно помогло — это переход от мышления с console.log() к использованию точек останова. Вместо необходимости «спрашивать» обо всем, что вы хотите узнать, вы получаете гораздо больше. Отладка с точками останова имеет то преимущество, что выполнение JavaScript полностью прекращается. Вы можете получить картину того, что вообще происходит в браузере. Вы не только получаете значение, к примеру, переменной, но также видите эффект, который производит это изменение. И у вас есть прямой способ пошагово отладить свой код без необходимости его править. Одна точка останова часто стоит десятка строчек console.log().

Здорово, что мы теперь можем отлаживать наш JavaScript код. Но будет гораздо лучше, если мы вообще не будем делать в нем ошибок, не так ли? Мы — люди, нас иногда настигает усталость, скука и даже небрежность. Вот было бы хорошо, если бы при написании кода нам указывали на ошибки прямо в режиме реального времени. В текстовом процессоре Word это реализовано в виде проверки правописания и грамматики — проблемные места подчеркиваются красной волнистой линией.

Линтинг — чтобы не писать код, в котором могут быть баги

В разработке есть понятие линтинга. Линтер — это программа, которая анализирует код сразу в момент написания. Он запускает кусочки кода в фоновом режиме и говорит вам, когда что-то идет не так. Раньше вы должны были устанавливать и настраивать линтеры сами. Теперь многие из них идут в качестве дополнений к редакторам кода с уже настроенными правилами. Эти правила — результат многолетних споров и осмысленных решений, к которым пришли эксперты. Инструменты для разработчика Google в браузере Chrome дают вам примерно то же. Разбор результатов работы линтера — хорошее упражнение для тех, кто набирается опыта. Они не только говорят о том факте, что что-то не так, но и почему именно, какие последствия это имеет и как можно исправить.

Выбор редактора кода для большей эффективности

Вот еще один момент, где хороший редактор вас выручает. Как я говорил выше, можно использовать какой угодно для написания JavaScript. Что касается меня, то я впечатлен продуктивностью работы с Visual Studio Code. Этот редактор — с открытым кодом и сопровождается сотнями дополнений в помощь самым различным задачам. У него есть встроенный линтер и возможность добавлять точки останова прямо в редакторе. Еще у него есть интерфейс командной строки для более продвинутых задач и встроенная система контроля версий Git. Это довольно здорово — отсутствие необходимости переключаться между редактором, браузером и командной строкой. Конечно, рано или поздно вам придется освоить все три. Но почему не начать с такого удобного упрощения?

Кстати, догадайтесь, на каком языке написан этот редактор? Правильно, на JavaScript.

Используя JavaScript, вы обнаружите множество споров и идей насчет того, какие редакторы и их конфигурации лучше. Поскольку есть десятки вариантов и сотни их комбинаций, то стоит попробовать в это углубиться. Каждые несколько лет я мигрирую из одной среды разработки в другую и прямо сейчас абсолютно доволен редактором Visual Studio Code. И многие другие со мной солидарны. Он позволяет вам быстро начать, поскольку обеспечивает интеграцию с процессами сборки прямо «из коробки». Он кроссплатформенный и достаточно легкий, по сравнению с другими средами разработки, подобными по возможностям. Вы можете сами править его код и расширить его возможности, используя JavaScript.

Процессы сборки и публикации

На самом деле, редакторы — это не единственное место, где помогает линтинг. Он также может быть частью процесса публикации. К примеру, Sonar — это инструмент, который запрашивает URL и, после анализа, говорит обо всех вещах, которые стоит улучшить. Это включает производительность, совместимость, безопасность и много чего еще. Сервис типа Sonar может выступать в качестве финальной проверки в процессе релиза вашего продукта. Баг, который обнаружен вами, гораздо лучше того, о котором сообщили пользователи. И еще лучше того, из-за которого продуктом вообще не пользуются, а вы о нем даже не подозреваете, потому что никто не сообщает о проблеме.

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

Должно ли создание собственного первого проекта включать настройку собственного сервера?

Несомненно, вы многому учитесь, начиная собственные проекты и ведя их по-профессиональному. Но нет необходимости в именно таком старте. Я настаиваю на том, что есть смысл начинать с чего-то меньшего. JSBin, CodePen, Glitch и другие платформы — отличные места для опробования новых штук и обучения. Они позволяют использовать препроцессоры, фреймворки и менеджеры пакетов для сборки различных проектов. Вы не застреваете на установке этого всего и настройке собственного компьютера снова и снова. Вы можете пробовать и выяснять, подходят эти инструменты вам или нет. Без необходимости учиться чему-то и затем пытаться это забыть как ненужное. Работая младшим разработчиком, будучи в команде, очень вряд ли, что вам самому придется настраивать среду разработки. Так что оставьте это до тех времен, когда это будет необходимо.

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

Говоря об обучении, мы живем в удивительное время. Почти каждую неделю проходят конференции по JavaScript. Есть встречи, участие в которых бесплатно. Есть Slack-сообщества, почтовые рассылки и бесплатные онлайн-ресурсы. Множество книг доступно для бесплатного чтения онлайн. И почти все выступления, за которые нужно платить большие деньги, чтобы посмотреть вживую, попадают в свободный доступ на YouTube через несколько часов. Откровенно говоря, у нас столько много материала, что его фильтрация стала необходимостью. Так что вместо того, чтобы пытаться следить за всем подряд, найдите людей, которым вы доверяете сбор и комментирование этой информации. Затем в своем собственном режиме следите за тем, что происходит. Я смотрю выступления в спортивном зале на телефоне — за один доклад по JavaScript я сжигаю 500 калорий на тренажере.

Участие в проектах и взаимодействие с людьми

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

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

Вы здесь новичок. Будьте этим новичком — более достойным человеком, чем те, кто пытается вам досадить

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

У нас есть превосходный набор технологий. И если я что-то и узнал, так это то, что перемены — единственное, что остается постоянным. Сегодня, здесь и сейчас, я питаю надежду, что вы будете частью этих перемен, которые нам нужны.

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

На этом я заканчиваю и с нетерпением жду, что вы предпримете дальше. Спасибо вам за это путешествие. Оно сделало меня лучше, и я надеюсь, так же будет и у вас.

P.S. Это тоже может быть интересно:

Что такое HTML? Основы языка гипертекстовой разметки

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

HTML не является языком программирования, что означает, что он не может создавать динамические функции. Вместо этого он позволяет организовывать и форматировать документы аналогично Microsoft Word.

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

и закрывающий тег

.

 
 Вот как вы добавляете абзац в HTML. 
 У вас может быть больше одного! 
 

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

История HTML

HTML был изобретен Тимом Бернерс-Ли, физиком из исследовательского института ЦЕРН в Швейцарии. Он придумал идею гипертекстовой системы на базе Интернета.

Гипертекст — это текст, содержащий ссылки (ссылки) на другие тексты, к которым зрители могут получить немедленный доступ. Он опубликовал первую версию HTML в 1991 году, состоящую из 18 тегов HTML. С тех пор каждая новая версия языка HTML добавляла в разметку новые теги и атрибуты (модификаторы тегов).

Согласно справочнику по элементам HTML Mozilla Developer Network, в настоящее время существует 140 тегов HTML, хотя некоторые из них уже устарели (не поддерживаются современными браузерами).

В связи с быстрым ростом популярности HTML теперь считается официальным веб-стандартом. Спецификации HTML поддерживаются и разрабатываются Консорциумом World Wide Web (W3C). Вы можете в любое время узнать о последних версиях языка на веб-сайте W3C.

Самым большим обновлением языка стало введение HTML5 в 2014 году.Он добавил в разметку несколько новых семантических тегов, раскрывающих значение собственного содержимого, например

,

и