Что такое html и почему его должен знать каждый веб-разработчик

Живые и неживые коллекции в JavaScript

Веб-разработка — это не только про вёрстку и знание HTML. Иногда приходится где-то что-то подпилить и написать код. А где код — там хранение данных. А где хранение данных — там переменные, хранение информации в массивах и другие странных словах.

Ещё информацию можно хранить в коллекциях (вспомните полку со старыми видеокассетами — это прям оно). Допустим, мы хотим получить информацию о всех картинках со страницы и что-то с ними сделать через JavaScript. Мы выполняем команду и получаем коллекцию объектов, которая вроде похожа на массив, но нет.

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

Подробности читайте в блоге HTML Academy. А ещё подпишитесь на нашу полезную рассылку, чтобы получать одно письмо в неделю со статьями о веб-разработке и уделять дополнительные 10-15 минут самообразованию.

И пусть живые позавидуют неживым!

Что такое HTML теги

HTML тег – это группа слов и символов, которые придают объекту, в отношении которого применяются, особые свойства.

Каждый тег имеет свое назначение и четко прописанный синтаксис (правила использования).

Все HTML теги имеют по краям скобки “<” “>”, обозначающие, соответственно, начало и конец тега.

Например, тег переноса строки выглядит так:

Многие теги всегда употребляются в паре в виде открывающего и закрывающего, в этом случае закрывающий тег имеет в начале прямой слэш “/”.

Например, пара тегов начинающих и заканчивающих абзац выглядит так:

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

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

Теги могут находится один внутри другого, вложенные как матрёшки, например так:

В этом примере внутри тегов абзаца находятся теги <b> и </b>, выделяющие текст внутри жирным.

Всё содержимое страницы, отформатированное с помощью тегов называется HTML код, часто его называют исходный код страницы. Чтобы посмотреть как выглядит HTML код конкретной страницы сайта, нажмите на клавиатуре одновременно “ctrl”+”U”.

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

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

Регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет (в отличие от XHTML). Элементы могут быть вложенными. Например, следующий код:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>HTML Document</title>
   </head>
   <body>
      <p>
         <b>
            Этот текст будет полужирным, <i>а этот — ещё и курсивным</i>.
         </b>
      </p>
   </body>
</html>

даст такой результат:

Этот текст будет полужирным, а этот — ещё и курсивным.

Кроме элементов, в HTML-документах есть и сущности (англ. entities) — «специальные символы». Сущности начинаются с символа амперсанда и имеют вид или , где NNNN — код символа в Юникоде в десятичной системе счисления.

Например,  — знак авторского права (). Как правило, сущности используются для представления символов, отсутствующих в кодировке документа, или же для представления «специальных» символов:  — амперсанда (&),  — символа «меньше» (<) и  — символа «больше» (>), которые некорректно записывать «обычным» образом, из-за их особого значения в HTML.

Подробнее по этой теме см. Элементы HTML.
Подробнее по этой теме см. Википедия:Специальные символы.

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

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">

Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

Далее обозначается начало и конец документа тегами и соответственно. Внутри этих тегов должны находиться теги заголовка () и тела () документа.

Варианты DOCTYPE для HTML 4.01

Строгий (Strict): не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated).

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">

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

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
     "http://www.w3.org/TR/html4/frameset.dtd">

Раздел HEAD.

Раздел HEAD содержит техническую информацию о веб-странице — заголовок, ее описание и ключевые слова для поисковых машин, данные об авторе документа, времени создания страницы, базовом адресе страницы, кодировке документа и т. д. Единственным обязательным тегом в разделе HEAD является тег <title>.

Текст, расположенный между тегами <title> и </title>, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, иначе он не полностью поместится в заголовке веб-браузера:
<title>Заголовок страницы</title>

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

С помощью одинарного тега <meta> можно задать описание содержимого веб-страницы, а также ключевые слова для поискового портала. Если текст между тегами <title> и </title> используется в качестве текста ссылки на эту страницу, то описание из тега <meta> будет отображено под ссылкой на веб-страницу:

<meta name="description" content="Описание содержимого страницы">
<meta name="keywords" content="Ключевые слова через запятую">
В разделе HEAD могут быть расположены также теги <base>, <link>, <script>, <style> и другие. Все эти теги мы рассмотрим в дальнейшем по мере изучения материала.

HTML Введение
HTML Базовые теги

Как долго учить HTML

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

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

Курс «Профессия frontend-разработчик»

С нуля до разработчика с зарплатой от 60 000 рублей за 6 месяцев. Научитесь верстать сайты и создавать интерфейсы, соберите два проекта в портфолио и получите современную профессию.

  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

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

Думаю, вы поняли, что такое язык HTML. Как говорилось выше – этот язык полностью состоит из дескрипторов (тегов). У любой веб страницы есть начало и конец, они обозначаются парным тегом . Рассмотрим простой HTML документ:

Код HTML

Как вы видите, HTML документ начинается с — каждая веб страница должна начинаться именно с него. Раньше было огромное количество вариантов тега , но в соответствии с новой версией HTML, нужен только этот , который в примере. Что такое ? Это тег, который сообщает браузеру версию HTML. Этот тег должен быть написан на первой строчке HTML документа. В нашем примере указана пятая версия HTML (т.е. HTML5). Более подробная информация указана на сайте Консорциума Всемирной Паутины.

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

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

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

Обратите внимание, что они находятся внутри тега. Более подробно разберем выше представленный код в следующих параграфах.

Что такое HTML?

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

Мой кот очень сердитый

Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как «параграф», заключив её в теги элемента «параграф»  (), например:

<p>Мой кот очень сердитый</p>

Примечание: Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег может быть записан как , , , , и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.

Как создаются HTML файлы

Создание HTML файла – это по сути создание страницы сайта. Это совместная работа веб дизайнера, который придумывает внешний вид и верстальщика, который обрамляет в код весь контент, чтобы получить нужную картинку.

Самый простой (но не легкий) вариант создания HTML файлов – использование текстового редактора “Блокнот” или его более адаптированного для программирования аналога “Notepad++”. С их помощью создается текстовый файлик, в него прописываются все коды, после чего расширение меняется на htm или html.

Более комфортный способ создания веб страниц – визуальные HTML редакторы, например MS Frontpage, NVU, DreamWeaver. Работа в них похожа на использование Microsoft Word, а конечный код генерируется самой программой. Можно делать страницы даже непосредственно в Microsoft Word, только при сохранении указать “Веб-страница htm, html”. У всех этих программ есть один огромный минус – получаемый код избыточен и не оптимизирован (много лишних тегов), что приводит к медленной работе и проблемам с последующим редактированием (трудно разобраться).

Чаще всего современные сайты создаются с помощью систем управления контентом (CMS – content managment system). В них уже зашиты основные части кода (блоки), имеются сменяемые шаблоны оформления (причем их можно менять не трогая содержимое), а создание страниц сводится к банальному наполнению материалами. Кроме того, CMS работают не только с HTML разметкой, но и языками программирования (чаще PHP), благодаря чему в них реализованы самые разные функции, недоступные для простого HTML. В этой статье приведена подробная инструкция по самостоятельному созданию сайта с помощью CMS WordPress.

CSS стили

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

Float

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

Свойство float имеет четыре значения: none, right, left, inherit.

Нас интересует значение «слева» и «справа».

Значение float указывает на то, с какой стороны будет отображаться наш блок. Все прочие блоки будут обтекать его с противоположной стороны.

В нашем случае, для блока навигации мы должны указать значение left, а для основного контента значение right. Вот как это будет выглядеть в файле стилей:

.nav {
float:left;
}

.content {
float:right;
}

Кстати, можно задать свойство только для блока навигации. Блок с контентом будет автоматически расположен справа от навигации. Это будет достигнуто, благодаря обтеканию, которое получается при задании свойства float.

Отступы в CSS: margin и padding

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

Давайте представим, что нам необходимо сделать таким образом, чтобы наш основной блок MAIN, имел небольшой отступ от шапки сайта. Это можно реализовать, если назначить для блока div с классом main, свойство margin. Оно отвечает за внешние отступы блока.

Свойство margin имеет следующие значения: {1,4} | inherit.

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

Есть возможность задавать только определенный отступ, например с верхней стороны. Это как раз наш случай. Вот как это будет реализовано:

.main {
margin-top:10px;
}

Теперь наш блок main будет иметь верхний отступ в 10 пикселей.

Теперь давайте оформить блок с навигацией и контентом. Представьте, что у нас уже есть готовый сайт. Все ссылки в навигации вплотную прилегают к левому краю страницы. А текст в блоке контента наоборот, вплотную прилегает к правой стороне. Довольно не приятное оформление. Нам нужно сделать внутренние отступы.

За это отвечает свойство padding, имеющее следующие значения: {1, 4} | inherit

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

Давайте для начала отодвинем ссылки в навигации от левого края на 15 пикселей. Затем текст в блоке контента на 20 пикселей от правой стороны. В итоге наш CSS код немного дополнится:

.nav {
float:left;
padding-left: 15px;
}

.content {
float:right;
padding-right: 20px;
}

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

Видео к статье:

Теги блочного уровня

Три тега уровня блока, которые каждый HTML-документ должен содержать: <html>, <head> и <body>.

  1. Тег <html> </html> — это элемент самого высокого уровня, который охватывает каждую HTML-страницу.
  2. Тег <head> </head> содержит метаинформацию, такую ​​как заголовок страницы и кодировка.
  3. Наконец, тег <body> </body> содержит всё содержимое, отображаемое на странице.
 <html>
    <head>
      <!-- META INFORMATION -->
    </head>
    <body>
      <!-- PAGE CONTENT -->
    </body>
 </html>
  • Заголовки имеют 6 уровней в HTML. Они варьируются от <h1> </h1> до <h6> </h6>, где h1 — заголовок наивысшего уровня, а h6 — самый низкий. Абзацы прилагаются <p> </p>, в то время как в блочных комментариях используется тег <blockquote> </blockquote>.
  • Разделы — это более крупные секции контента, которые обычно содержат несколько абзацев, изображений, иногда блок-записей и других меньших элементов. Мы можем пометить их, используя тег <div> </div>. Элемент div может содержать ещё один тег div внутри него.
  • Вы можете также использовать теги <ol> </ol> для упорядоченных списков и <ul> </ul> для неупорядоченных. Отдельные элементы списка должны быть заключены в тег <li> </li>. Например, вот как выглядит основной неупорядоченный список в HTML:
 <ul>
    <li>Элемент списка 1</li>
    <li>Элемент списка 2</li>
    <li>Элемент списка 3</li>
 </ul>

Как научиться писать на HTML

Одной зубрёжкой тегов не обойтись. Изучайте основные элементы и экспериментируйте. Поставьте сами конкретную задачу (например, сделать сайт-визитку) или возьмите платное задание как фрилансер и пробуйте его реализовать.

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

Копипаст чужой работы — нормальное явление в программировании, здесь это называется Open Source, очень модное и продвинутое течение.

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

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

Погрузившись в обучение, вы научитесь создавать свои собственные веб-проекты и сможете претендовать на позицию junior-разработчика.

Ссылки

Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — — a это сокращение от «anchor» («якорь»). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:

  1. Выберите некоторый текст. Мы выбрали текст «Манифест Mozilla».
  2. Оберните текст в элемент , например так:
    <a>Манифест Mozilla</a>
  3. Задайте элементу атрибут href, например так:
    <a href="">Манифест Mozilla</a>
  4. Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку:
    <a href="https://www.mozilla.org/ru/about/manifesto/details/">Манифест Mozilla</a>

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

сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как hypertext reference («гипертекстовая ссылка»).

Теперь добавьте ссылку на вашу страницу, если вы еще не сделали этого.

Что нельзя сделать на HTML

Простыми словами, HTML — это каркас сайта. В нем могут быть прописаны:

  • ссылки;
  • таблицы;
  • изображения;
  • блоки;
  • абзацы;
  • формы;
  • заголовки и так далее.

Также есть ограниченные возможности по изменению внешнего вида:

  • поменять цвет;
  • указать фоновое изображение;
  • изменить шрифт;
  • сделать текст жирным, курсивным, подчеркнутым, зачеркнутым и так далее.

На данный момент выпущено пять версий языка. Первая версия была разработана между 1986 и 1991 годами, а последняя (5.2) — в 2017. Изначально он должен был стать независимым от каких-либо платформ — отображаться везде одинаково. Но этого не случилось, потому что у пользователей росли требования к мультимедиа.

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

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

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

Появился встроенный плеер — теперь не нужно подключать Adobe Flash Player или другие плагины. Визуальная часть перетаскивания элементов теперь реализуется на HTML и CSS, если добавить атрибут draggable.

Что такое html и почему его должен знать каждый веб-разработчик

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

Работа с действиями пользователей пока в основном реализуется на JS. Атрибут draggable хоть и создает видимость перетаскивания, но на самом деле событие должно обрабатываться на JavaScript. HTML позволяет обмениваться данными с другими страницами, но чтобы их обработать, пригодится PHP.

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

Новые приключения в HTML Academy

Приём-приём, вызываем любителей приключений!

26 июля стартовала битва за кодий на Джаваскриптоне. Вступайте в одну из трёх команд, бесплатно проходите онлайн-тренажёры по вёрстке и программированию и зарабатывайте за это кодий. Чем больше участников, тем больше кодия у команды, и тем быстрее открываются новые курсы. Команда, которая к 31 июля наберёт больше всех кодия, станет победителем и получит шикарные призы.

Каждый попаданец из фракции-победителя получит:

  • Доступ ко всем платным тренажёрам до 10 августа включительно.
  • Скидку 50% на навыки.
  • Скидку 70% на макеты и проекты
  • Скидки от 1500 до 5500 рублей на курсы и профессии.

Ещё есть время подготовиться и заработать немного кодия, разгадывая загадки бортового компьютера. В общем, всех нас ждёт настоящая космоопера.

Основные теги

Вот основ­ные теги, кото­рые исполь­зу­ют­ся в HTML:

<head>…</head> — слу­жеб­ная область на стра­ни­це, кото­рая не пока­зы­ва­ет­ся в бра­у­зе­ре, но вли­я­ет на стра­ни­цу в целом.<title>…</title> — нахо­дит­ся внут­ри <head>. Текст, кото­рый напи­сан внут­ри это­го тега, отоб­ра­жа­ет­ся в назва­нии вклад­ки и в заклад­ках бра­у­зе­ра.<body>…</body> — види­мая часть стра­ни­цы. Всё, что вы види­те, про­ис­хо­дит внут­ри этих тегов.<h1>…</h1>, <h2>…</h2> и так далее — заго­лов­ки раз­но­го уров­ня.<p>…</p> — абзац.<a href=»…»>…</a> — гиперс­сыл­ка. Свой­ство «href» отве­ча­ет за адрес ссыл­ки.<img src=»…»> — кар­тин­ка. Свой­ство «src» отве­ча­ет за адрес, по кото­ро­му лежит изоб­ра­же­ние, что­бы бра­у­зер мог запро­сить её отту­да, ска­чать и пока­зать на экране.<ul><li>…</li></ul> — нену­ме­ро­ван­ный спи­сок с одним эле­мен­том внут­ри. Что­бы эле­мен­тов было боль­ше, добавь­те <li>…</li> внутрь <ul>…</ul>.<ol><li>…</li></ol> — нуме­ро­ван­ный спи­сок.<div>…</div> — уни­вер­саль­ный блок внут­ри стра­ни­цы. Его мож­но настро­ить, что­бы содер­жи­мое выгля­де­ло и рабо­та­ло как угод­но, от назой­ли­вой всплы­ваш­ки до кноп­ки под­твер­жде­ния.<span>…</span> — с помо­щью это­го тега мож­но менять внеш­ний вид выбран­но­го тек­ста. Напри­мер, выде­лить его жёл­тым, как мар­ке­ром на бума­ге.<table><tbody><tr><td>…</td><td>…</td></tr></tbody></table> — мини­маль­ный набор тегов, что­бы сде­лать таб­ли­цу. TR отве­ча­ет за стро­ки в таб­ли­це (table row), а TD — за ячей­ки в этой стро­ке (table division). Мы вкла­ды­ва­ем один тег в дру­гой: ячей­ки живут внут­ри строк, стро­ки — внут­ри <tbody>, и всё это живёт внут­ри тега <table>.Ещё есть <TH>, кото­рый отве­ча­ет за первую стро­ку таб­ли­цы (её назы­ва­ют голов­кой), но мы туда сей­час не поле­зем.

HTML файлы и программы для их просмотра

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

Подобные файлы имеют следующие варианты расширений:

  • .html;
  • .htm.

Они ничем не отличаются.

Помимо стандартных для разметки страниц форматов, HTML код может содержаться в файлах с расширением .php и некоторых других языков программирования.

Для открытия файлов с HTML кодом используются специальные программы – браузеры (Яндекс Браузер, Opera, Google Chrome, Mozilla Firefox, Internet Explorer и другие). Они преобразуют исходный код страницы в удобный восприятию вид.

Когда мы посещаем Интернет сайты, то не видим никаких тегов, но благодаря браузерам видим результаты их работы.

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

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

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

История развития HTML

  • HTML 1.0 (1986) — самая первая версия, в которой отсутствовало множество важных тегов. Официально не существует.
  • HTML 2.0 (22 сентября 1995) — появление тега form
  • HTML 3.2 (14 января 1997) — появление тега table, а также различные эффекты обтекания текста изображения
  • HTML 4.0, 4.01 (24 декабря 1999)— добавлена поддержка скриптов и фреймов, введена таблица стилей CSS
  • HTML 5.0 — новая версия, которая вступила в силу с 2014 году. Советую прочитать: особенности оптимизации сайта в html5

Кстати, в выше рассмотренном примере, чтобы подчеркнуть использование стандарта HTML 5.0 мы использовали специальный тег <!DOCTYPE> в начале документа.

На нашем сайте Вы можете найти уроки по html с множеством примеров и пояснений. После их прочтения Вы должны освоить азы HTML.

Туториал. Список задач с drag & drop

Дословный перевод с английского — «потяни и брось» — отражает суть эффекта, это хорошо знакомое любому пользователю перетаскивание элементов интерфейса.

В этом туториале Саша Смыгина из HTML Academy покажет, как реализовать эффект drag & drop на ванильном JavaScript.

Drag & drop может понадобиться в разных ситуациях, например:

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

Нужно ли это учить?

В интер­не­те пол­но инфор­ма­ции про HTML, поэто­му нет необ­хо­ди­мо­сти что-то заучи­вать спе­ци­аль­но. Но если вы буде­те регу­ляр­но что-то вер­стать в HTML, вы и сами всё выучи­те. Это как ходь­ба или езда на вело­си­пе­де.

Если поду­мать, то при­выч­ные веб-страницы в каком-то смыс­ле уми­ра­ют, и HTML мед­лен­но теря­ет свою акту­аль­ность. 20 лет назад веб-страницы были един­ствен­ным спо­со­бом раз­ме­стить что-то в Сети, а для это­го абсо­лют­но точ­но нуж­но было знать HTML. Теперь у нас есть соци­аль­ные сети и плат­фор­мы для пуб­ли­ка­ций, кото­рые не тре­бу­ют зна­ния HTML. А у тех плат­форм, кото­рые тре­бу­ют, есть WYSIWYG-редакторы — они сра­зу поз­во­ля­ют фор­ма­ти­ро­вать текст как в Microsoft Word. Поэто­му в буду­щем может появить­ся поко­ле­ние интернет-пользователей, кото­рые ни разу в жиз­ни не столк­нут­ся с HTML-кодом в сво­их про­ек­тах.

С дру­гой сто­ро­ны, HTML очень лег­ко выучить и начать исполь­зо­вать, а поль­за от него огром­ная и пря­мо сей­час. В буду­щем, может быть, исчез­нут вело­си­пе­ды, но катать­ся пря­мо сего­дня никто не запре­ща­ет.

Ско­ро всё пока­жем!

Добавление JavaScript-кода

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

Атрибут language=»JavaScript» не является обязательным, т. к. если не указан какой-либо другой язык сценариев (а поскольку JavaScript — единственный широко-поддерживаемый язык сценариев для HTML, то вероятность такого развития ничтожно мала), браузеры автоматически предполагают, что используется JavaScript. Но даже ссылаясь на внешний файл с кодом JavaScript, все равно нужно помнить о закрывающем теге </script>. Если упустить этот тег по недосмотру или при попытке укоротить код, используя синтаксис пустых элементов, то страница не будет работать должным образом.

Если вы уделяете много времени тестированию своих страниц с JavaScript в Internet Explorer, может быть полезным добавление метки MOTW (Mark of the Web — метка особенности сети) в блок <head> сразу же после строки кодировки. Делается это таким образом:

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

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

Что должен уметь верстальщик, чтобы его все хотели

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

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

О том, как выглядит идеальная вакансия для верстальщика в 2020 году, какие навыки и знания востребованы, и что обо всём этом думают специалисты из индустрии — читайте в блоге HTML Academy.

Знакомство с HTML

Что такое HTML – это язык разметки документов. Он применяется во всем мире. Браузер интерпретирует код HTML для отображения его на компьютере, планшете или телефоне. Язык HTML был разработан британцем Тимом Бернерсом-Ли, в ЦЕРНе. В первую очередь язык HTML предназначался для обмена научными документами. Верстка документов происходит при помощи специальных дескрипторов (но чаще всего их называют тегами, это слово, думаю, многим знакомо). Если ответить проще на вопрос: «Что такое HTML документ?» — это простой текст, содержащий много тегов, который образует веб-страницу.

Было множество версий HTML, но я не хочу в них вдаваться. На данный момент самая последняя версия – HTML5. Первая бета версия HTML5 появилась осенью 2007 года. Для упрощения и удобства было введено понятие «гипертекст». Гиперссылка (или просто ссылка), является частью гипертекста, и она ссылается на другой HTML документ.

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