Разное

Изучение html5: Синтаксис HTML5 | htmlbook.ru

17.04.2021

Содержание

Синтаксис HTML5 | htmlbook.ru

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

Элементы HTML

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

Элементы по типу

Пустые элементы

К ним относятся элементы, у которых нет закрывающего тега: <area>, <base>, <br>, <col>, <command>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track>, <wbr>.

Необрабатываемые текстовые элементы

Предназначены для вывода скриптов или стилей, имеющих синтаксис отличный от HTML: <script>, <style>.

RCDATA

Эти элементы могут содержать любой текст или спецсимволы, за исключением нестандартных спецсимволов, которые называются сомнительным амперсандом, например: &copi; или &#38T. К этой группе элементов относятся <textarea> и <title>.

Инородные элементы

Элементы, относящиеся к MathML или SVG.

Обычные элементы

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

Элементы по назначению

Корневой элемент

Элемент <html>.

Метаданные документа

<head>, а также элементы, которые располагаются внутри него.

Скрипты

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

Структурные элементы

Элементы, управляющие основными разделами веб-страницы, вроде <body>, <section>, <nav>, <article>, <aside> и др.

Группирование контента

Элементы, обрамляющие текст, списки, изображения.

Текст

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

Рецензирование

Элементы <ins> и <del> показывающие редактирования в документе.

Внедряемый контент

Элементы, вставляемые на страницу в виде разных объектов — изображения, видео, аудио и др.

Табличные данные

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

Формы

Формы являются одним из важных элементов любого сайта и предназначены для обмена данными между пользователем и сервером. В эту группу входят элементы для создания формы и её полей.

Интерактивные элементы

Специальные виджеты, с помощью которых пользователь может получать дополнительную информацию или управление.

Ссылки

Элементы <a> и <area>.

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

Теги

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

Рис. 1. Тег <a> с атрибутом href

Закрывающий тег похож на открывающий, но содержит слэш (/) внутри угловых скобок.

Пустые элементы не имеют закрывающего тега и содержимого (рис. 2).

Рис. 2. Пустой тег <img>

Атрибуты тегов расширяют возможности самих тегов и позволяют гибко управлять различными настройками отображения элементов веб-страницы. Общее количество атрибутов достаточно велико, но их значения, как правило, можно сгруппировать по разным типам, например, задающих цвет, размер, адрес и др.  Например, элемент <img> добавляет на веб-страницу изображение, при этом адрес графического файла мы указываем через атрибут src.

Доктайп

<!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа) для того, чтобы браузер понимал, с какой версией HTML он имеет дело. Если доктайп не указан, браузеры переходят в режим совместимости, в котором не работают многие возможности HTML5, а также возникают ошибки с отображением документа.
Доктайп не чувствителен к регистру и содержит всего два слова:

<!DOCTYPE html>

Это ключевой элемент и обычно он располагается в первой строке кода.

Комментарии

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

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

Необязательные теги

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

Табл. 1. Необязательные теги
ТегУсловие
<html> 
</html> 
<head>Если внутри имеются другие элементы.
</head> 
<body>Если пустой, а также содержит что-то кроме пробела или комментария.
</body> 
</li>Если после элемента следует <li> или он последний у родителя.
</dt>Если после элемента следует <dt> или <dd>.
</dd>
Если после элемента следует <dd>, <dt> или он последний у родителя.
</p>Если после элемента следует <address>, <article>, <aside>, <blockquote>, <dir>, <div>, <dl>, <fieldset>, <footer>, <form>, <h2>,…,<h6>, <header>, <hgroup>, <hr>, <menu>, <nav>, <ol>, <p>, <pre>, <section>, <table>, <ul>.
</rt>Если после элемента следует <rt> или <rp>.
</rp>Если после элемента следует <rt> или <rp>.
</optgroup>
Если после элемента следует <optgroup> или он последний у родителя.
</option>Если после элемента следует <option>, <optgroup> или он последний у родителя.
<colgroup>Если первым внутри идёт <col> и не следует перед другим элементом <colgroup>.
</colgroup> 
</thead>Если после элемента следует <tbody> или <tfoot>.
<tbody>Если первым внутри идёт <tr> и не следует перед <tbody>, <thead> или <tfoot> у которых опущен закрывающий тег.
</tbody>Если после элемента следует <tbody> или <tfoot> или он последний у родителя.
</tfoot>Если после элемента следует <tbody> или он последний у родителя.
</tr>Если после элемента следует <tr> или он последний у родителя.
</td>Если после элемента следует <td>  или <th> или он последний у родителя.
</th>Если после элемента следует <td>  или <th> или он последний у родителя.

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

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

  1. Необязательная метка порядка байтов (byte order mark, BOM).
  2. <!DOCTYPE html>.
  3. <title>.

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

В примере 1 показан минимальный код HTML для вывода традиционного приветствия.

Пример 1. Минимальный HTML

HTML5IECrOpSaFx

<!DOCTYPE html>
<title> </title>
Привет, мир!

Метка порядка байтов состоит из кода символа U+FEFF в начале  документа, где она используется для определения кодировки. Рекомендуется убирать этот символ, поскольку его наличие приводит к ошибкам отображения документа в некоторых браузерах. Для этого можно использовать редактор Notepad++, в меню «Кодировки» выбрать пункт «Кодировать в UTF-8 (без BOM)» (рис. 3).

Рис. 3. Выбор кодировки

Полезные ссылки

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

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

Информация про HTML

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

Каждый год разработчики языка разметки html5 трудятся над его улучшением. На сегодня актуальный стандарт – HTML5, который официально был выпущен в 2014 году. Это революционный стандарт, который позволил языку выйти на новый уровень.

Нововведения в HTML5:

  • Изменился алгоритм парсинга во время разработки DOM-структуры;
  • Появились новые теги, вроде audio, video и прочих. Кстати, теперь только силами HTML можно создать веб-проигрыватель. Раньше приходилось использовать Adobe Flash Player;
  • Переопределение части правил и семантики использования HTML-элементов.

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

Всё пришло к тому, что HTML5 стал применяться в двух ключевых направлениях:

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

Важный момент

«HTML – язык программирования». Многие начинающие разработчики неверно воспринимают категорию языка HTML. Он не является языком программирования, а лишь является языком разметки

По этой причине вам не стоит использовать говорить «язык программирования», так как это ошибочное название. 

Кто занимается модернизацией HTML5?

Над языком работает W3C или полное название — World Wide Web Consortium – это организация международного уровня, которая сохраняет независимость от конкретных разработчиков. Она же выпускает спецификации, определения и стандарты к HTML5. Оригинальная и полноценная спецификация доступна на официальном сайте по ссылке (доступна на английском). Организация не завершила работу над языком, напротив — всё ещё продолжает его развивать.

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

Важно понимать, что спецификация HTML5 и реализация данной технологии в конкретных браузерах – это разные понятия. Многие активно разрабатываемые веб-обозреватели начали понемногу внедрять функции HTML5 ещё до релиза этой версии. К сегодняшнему дню большинство свежих браузеров поддерживают все функции HTML5. Полную поддержку обеспечивают: Chrome, IE 11, Firefox, Edge, Safari, Opera. Относительно старые версии не имеют поддержки новых стандартов, например, IE 8 и младше. В версии IE 9 и 10 уже реализованы стандарты, но только частично.

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

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

Что нужно для работы?

Что пригодится во время разработки под HTML5? Ключевой инструмент – текстовый редактор, в котором и будет набираться код для будущей веб-страницы. Одним из популярнейших и многофункциональных редакторов является Notepad++. Он доступен на официальном сайте абсолютно бесплатно. Помимо бесплатного распространения, ещё обладает всеми необходимыми функциями, имеет массу полезных плагинов, подсвечивает открытие и закрытие тегов.

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

Также прочитайте нашу статью на тему «5 лучших редакторов кода для программистов».

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

План курса

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

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

Программа обучения

Также на нашем сайте есть более углубленные курсы HTML, что будут пройдены в программе по изучению разработки веб сайтов. Ознакомится с программой обучения по Front-end можно по этой ссылке и с программой обучения Full Stack по этой ссылке.

Должен ли я начать изучать основы HTML или перейти непосредственно к HTML5?

Когда вы думаете о html, 4 или 5, вам нужно в первую очередь увидеть, что это язык для описания документов и данных, которые они содержат. По своей сути, html-это именно то. Он набирает новые возможности, но все еще является языком markup для документов. Люди пытаются смотреть на него как на надежный язык программирования, но даже новые динамические функции требуют javascript, чтобы помочь его функциональности. Не обманывайтесь, думая, что html5 сильно отличается от html4 — они по большей части делают то же самое.

Ключом к написанию хорошего, полезного html (независимо от версии) является правильное использование семантики и чистых/эффективных методов создания кода. Если вы используете правильные теги и пишете очень чистый код, вы уже делаете лучше, чем некоторые ‘professionals’, с которыми я работаю. Это большое дело.

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

Это, по сути, основа документа html. Вы можете вывести его с помощью php или ruby или чего угодно, но правильный документ всегда будет содержать некоторые (а иногда и все) из этих вещей. Идеальный документ будет содержать эти вещи в правильных местах (чистое, последовательное кодирование), чтобы служить цели, для которой они предназначены (семантика).

То, что html5 вводит, — это дополнительные элементы для удовлетворения семантических требований, а также полезные динамические элементы, которые хорошо согласуются с растущими требованиями, основанными на том, как люди используют и разрабатывают веб-сайты. Например, есть canvas, скриптовый прямоугольный элемент для представления визуальной информации. Затем есть локальное хранилище — возможность сохранять данные стиля пары ключей в базу данных веб-клиента пользователя для последующего доступа, что было бы чрезвычайно полезно для сохранения изменений, внесенных в contenteditable элементы (еще одна функция html5) на сайте, возможно, если бы вы знали, что всегда будет использоваться один и тот же клиент. Есть еще кое-что, но я думаю, вы поняли картину.

Новые функции html5 не имеют отношения к написанию ‘good html’. Они полезны, но вы можете научиться писать отличные html без них. Собственно, именно этим я и занимался последние десять лет, пока не появился html5. Я рекомендую начать с основ-узнать о семантике, что они означают, почему мы их используем, и даже включить новые теги html5 (вне canvas — Canvas-полезный элемент, но использование его не обязательно означает использование html). Узнайте о поддержке браузером элементов, а затем научитесь связывать ресурсы в голове, такие как таблицы стилей и javascript. В конце концов, у вас будет хорошее чувство базового html, и вы начнете хотеть использовать более продвинутые методы.

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

edit: что касается ресурсов, проверьте эти сайты:

Как правило, полезные ресурсы

Quirksmode -хороший блог, таблицы совместимости браузеров

html собака -очень простая, хорошо бы начать

HTML5 семантика и другая информация

HTML5 Doctor -легкое чтение; узнать немного о новых тегах html5, но в основном об их семантическом замысле (это важно)

Список отдельно — хороший взгляд на семантику, опять же.

Погрузитесь в html5 -для тех случаев, когда вам просто хочется немного почитать

Обучение HTML5 и CSS3. Мне тоже нужно javascript?



Я знаком с тем, как html & css работают вместе. Недавно я просматривал некоторые демо-версии контента html5 от apple и увидел, что они используют html5/css/javascript. Я нахожусь в той точке, где мне нужно знать, является ли javascript обязательным для изучения; или если я могу найти аналогичные обходные пути с CSS3 & HTML5.

Отредактировано для уточнения намерений:

Моя цель-иметь страницу блога roll-your-own с лентой twitter и некоторыми базовыми анимациями.

Нужно ли мне учиться javascript?

javascript html css
Поделиться Источник samfu_1     09 июня 2010 в 19:20

5 ответов


  • Как появление HTML5 и CSS3 влияет на jQuery?

    Около года назад я взял свою первую книгу HTML (XHTML). С тех пор я построил два простых веб-сайта с XHTML и CSS. Я также изучил основы JavaScript.

    Теперь я хочу узнать jQuery. Я не уверен, как, если вообще, HTML5 и CSS3 делают некоторые части jQuery избыточными — не так ли? Согласно отзывам,…

  • От чего зависят html5 и css3?

    Зависят ли функции html5 и css3 от браузера (только)? Мне просто нужно это прояснить, спасибо.



11

Да, вы должны выучить Javascript.

Нет, тебе не нужно учить Javascript.

Длинная версия:

Javascript нужен только в том случае, если вы хотите, чтобы ваша страница делала больше, чем просто отображала статический контент. Если страница статична, она не нужна. Однако некоторые вещи могут быть не очень интересными без него ( на ум приходят <audio> , <video> и <canvas> ).

Более конкретно, в ответ на ваш вопрос, примеры Apple, вероятно, не статичны (я предполагаю, что многие из них связаны с тремя тегами, о которых я упоминал ранее), поэтому, если вы хотите делать такие вещи, вам нужно изучить Javascript.

Поделиться Brendan Long     09 июня 2010 в 19:23



4

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

Разработка — это все о добавлении вещей в ваш набор инструментов. Если у вас есть HTML5 и CSS3 и вы хорошо понимаете JS, вы будете более ценны для клиентов, чем если бы вы знали только HTML5 и CSS3. Для разработки на основе браузера JavaScript (и его библиотеки) бесценны.

Поделиться Nate Noonen     09 июня 2010 в 19:28



1

Глядя вперед, куда идут веб-сайты и пользовательский опыт, изучение Javascript кажется мне чем-то вроде ‘must-learn’. Когда я узнал больше о веб-дизайне, я также начал видеть мудрость в разделении контента (HTML), стиля (CSS), действий/интерактивности (JS). Хотя лично я им не пользуюсь, я знаю, что отличное место для быстрого перехода в Javascript-это использование jQuery . Лично я использую библиотеку YUI от Yahoo, потому что нашел поддержку, которую предоставляет их сайт (примеры, документы API и видео), более простой для изучения. Еще один gem из YUI-это их YUI театр , который отлично говорит о YUI и общем javascript развитии. Надеюсь, это поможет!

Поделиться Justin     10 июня 2010 в 03:33


  • HTML5 И CSS3 Веб-Приложение

    Я хочу создать APP для android, используя HTML5 & CSS3. Я только начал изучать HTML5 и CSS3. Я скачал следующий мобильный шаблон : http://themeforest.net/item/faller-mobile-retina-html5-css3-with-webapp/6087395 Итак, теперь у меня есть все необходимые файлы(файлы .html,.css,.javascript)….

  • Только HTML5 и CSS3

    Мне было интересно, знает ли кто-нибудь о каких-либо сайтах, на которых есть разные проекты для изучения HTML5 и CSS3. Я пока не хочу учиться Javascript. Я просто хочу посмотреть, насколько хорошим может быть сайт только с HTML5 и CSS3. Любые учебные пособия или проекты, которые начинаются с нуля…



1

Моя цель-иметь страницу блога roll-your-own с лентой twitter и некоторыми базовыми анимациями .

Да. Изучите основы JavaScript, а затем загляните в jQuery.

Поделиться Dave Ward     09 июня 2010 в 19:28



1

Зависит от того, какую страницу вы разрабатываете. Большинство новых сайтов очень динамичны, и их пользователи ожидают такой рабочий стол, как performance и UI, в этом случае вам WILL нужен javascript (такие сайты, как facebook, gmail, portals, stackoverflow. ..)

Поделиться Ricardo Villamil     09 июня 2010 в 19:28


Похожие вопросы:


Поддерживает ли IE8 HTML5 и CSS3?

У меня есть требование, когда клиент должен разработать свой веб-сайт в html5 и css3 годах . Однако похоже, что ie6 , ie7 не поддерживают HTML5 и CSS3. Клиент сказал , что HTML5 и CSS3…


Wannabe WebDev: HTML5&CSS3 против CSS фреймворков

Как новичок в веб-разработке, я задаюсь вопросом, с чего мне начать обучение. Должен ли я начать с большой хорошей книги о HTML5&CSS3 и надеяться, что FF и Chrome поддержат то, что я делаю, OR…


Хороший редактор HTML5/CSS3

Недавно я переключился с Aptana Studio 2 на Aptana Studio 3 (оба в качестве плагина Eclipse [Helios]), надеясь, что новая версия принесет поддержку HTML5/CSS3, но до сих пор поддержка была в лучшем…


Как появление HTML5 и CSS3 влияет на jQuery?

Около года назад я взял свою первую книгу HTML (XHTML). С тех пор я построил два простых веб-сайта с XHTML и CSS. Я также изучил основы JavaScript. Теперь я хочу узнать jQuery. Я не уверен, как,…


От чего зависят html5 и css3?

Зависят ли функции html5 и css3 от браузера (только)? Мне просто нужно это прояснить, спасибо.


HTML5 И CSS3 Веб-Приложение

Я хочу создать APP для android, используя HTML5 & CSS3. Я только начал изучать HTML5 и CSS3. Я скачал следующий мобильный шаблон :…


Только HTML5 и CSS3

Мне было интересно, знает ли кто-нибудь о каких-либо сайтах, на которых есть разные проекты для изучения HTML5 и CSS3. Я пока не хочу учиться Javascript. Я просто хочу посмотреть, насколько хорошим…


CSS3 и HTML5 div двигаются без JavaScript

Могу ли я использовать только CSS3 и HTML5 для перемещения div или таблицы мышью на странице без JavaScript? Я уже делаю это, но div перемещается автоматически при наведении курсора.


Нужно ли мне изучать CSS3 и основы HTML, чтобы сделать HTML5 игр и динамических веб-приложений?

Мне очень интересно создавать HTML5 игр и динамических веб-приложений. Как человек с фоном Flash, я хочу переделать свои flash игры, а также некоторые из полноценных flash веб-сайтов (большинство из…


Использование HTML5, CSS3 и Javascript для разработки приложений Windows Phone 8.1

Я работаю в области веб-дизайна и некоторых разработок уже почти три года и хорошо знаком с HTML5, CSS3, надежным Javascript как JQuery. Теперь я хочу углубиться в разработку Windows телефонных…

Начало работы с HTML — Изучение веб-разработки

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

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

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

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

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

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

Давайте рассмотрим элемент «параграф» чуть подробнее:

Основными частями элемента являются:

  1. Открывающий тег: Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри угловых скобок. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.
  2. Закрывающий тег: выглядит как и открывающий, но содержит слеш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось.
  3. Содержимое: Как видно, в нашем случае содержимым является простой текст.
  4. Элемент: открывающий тег + закрывающий тег + содержимое = элемент.

Активное изучение: создание вашего первого HTML элемента

Отредактируйте строку текста ниже в поле Ввод, обернув её тегами <em> и </em> (вставьте <em> перед строкой, чтобы указать начало элемента, и </em> после неё, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.

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

Вложенные элементы

Nesting_elements

Вы также можете вкладывать элементы внутрь других элементов — это называется вложенностью. Если мы хотим подчеркнуть, что наш кот очень сердитый, мы можем заключить слово «очень» в элемент <strong> , который означает, что это слово крайне важно в данном контексте:

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

Вы должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем p элемент первым, затем элемент strong, затем мы закрываем элемент strong первым, затем p. Следующее писать неправильно:

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

Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!

Блочные и строчные элементы

Block versus inline elements

Существует две важных категории элементов в HTML, которые вам стоит знать — элементы блочного уровня и строчные элементы.

  • Элементы блочного уровня формируют видимый блок на странице — они окажутся на новой строке после любого контента, который шёл до них, и любой контент после них также окажется на новой строке. Чаще всего элементами блочного уровня бывают структурные элементы страницы, представляющие собой, например, параграфы (абзацы), списки, меню навигации, футеры, или подвалы, и т. п. Элементы блочного уровня не вкладываются в строчные элементы, но иногда могут вкладываться в другие элементы блочного уровня.
  • Строчные элементы — это те, которые содержатся в элементах блочного уровня и окружают только малые части содержимого документа, не целые абзацы и группировки контента. Строчные элементы не приводят к появлению новой строки в документе: они обычно встречаются внутри абзаца текста, например, элемент <a> (ссылка) или акцентирующие элементы вроде <em> или <strong>.

Посмотрите на следующий пример:

<em>Первый</em><em>второй</em><em>третий</em>

<p>четвёртый</p><p>пятый</p><p>шестой</p>

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

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

Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.

Пустые элементы

Empty elements

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

<img src="https://raw. githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Это выведет на вашу страницу следующее:

Примечание: Пустые элементы иногда называют void-элементами.

У элементов также могут быть атрибуты, которые выглядят так:

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

Атрибут должен иметь:

  1. Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).
  2. Имя атрибута и следующий за ним знак равенства.
  3. Значение атрибута, заключённое в кавычки.

Активное изучение: Добавление атрибутов в элемент

Active learning: Adding attributes to an element

Возьмём для примера элемент <a> — означает anchor (якорь) и делает текст внутри него гиперссылкой. Может иметь несколько атрибутов, вот несколько из них:

  • href: В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит, когда вы по ней кликаете. Например, href="https://www.mozilla.org/".
  • title: Атрибут title описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведёт. Например, title="The Mozilla homepage". Она появится в виде всплывающей подсказки, когда вы наведёте курсор на ссылку.
  • target: Атрибут target определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, target="_blank" отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.

Измените строку текста ниже в поле Ввод так, чтобы она вела на ваш любимый веб-сайт. Сначала добавьте элемент <a>затем атрибут href и атрибут title. Наконец, укажите атрибут target чтобы открыть ссылку на новой вкладке. Вы можете наблюдать сделанные изменения в реальном времени в поле Вывод. Вы должны увидеть гиперссылку, при наведении курсора на которую появляется содержимое атрибута title, а при щелчке переходит по адресу в атрибуте href. Помните, что между именем элемента и каждым из атрибутов должен быть пробел.

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

Булевые атрибуты

Boolean attributes

Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо.  Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмём атрибут disabled, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.

<input type="text" disabled="disabled">

Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):

<input type="text" disabled>

<input type="text">

На выходе оба варианта будут выглядеть следующим образом:

Опускание кавычек вокруг значений атрибутов

Omitting quotes around attribute values

Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек.  Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом href так:

<a href=https://www.mozilla.org/>любимый веб-сайт</a>

Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>

В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут title — это на самом деле три разных атрибута — атрибут title со значением «The» и два булевых атрибута: Mozilla и homepage. Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть, на что похож текст title!

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

Одинарные или двойные кавычки?

Single or double quotes?

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

<a href="http://www.example.com">Ссылка к моему примеру.</a>

<a href='http://www.example.com'>Ссылка к моему примеру.</a>

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

<a href="http://www.example.com'>Ссылка к моему примеру.</a>

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

<a href="http://www. example.com" title="Isn't this fun?">A link to my example.</a>

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

<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>

Поэтому вам нужно сделать так:

<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>

Ниже дан пример оборачивания основных, самостоятельных HTML элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Тестовая страница</title>
  </head>
  <body>
    <p>Это — моя страница</p>
  </body>
</html>

Вот что мы имеем:

  1. <!DOCTYPE html>: Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Однако в наши дни никто особо не думает о них, и типы документа стали историческим артефактом, которые должны быть включены везде, чтобы всё работало правильно. <!DOCTYPE html> — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .
  2. <html></html>: Элемент <html> содержит в себе всё содержимое на всей странице, и иногда его называют «корневой элемент».  
  3. <head></head>: Элемент <head>. Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. Он включает такие вещи, как ключевые слова и описание страницы, которые вы хотели бы показывать в поисковых запросах, CSS для стилизирования вашего контента, объявление поддерживаемого набора символов и многое другое. Вы узнаете больше об этом из следующей статьи данного руководства.
  4. <meta charset="utf-8">: Этот элемент устанавливает в качестве символьной кодировки для вашего документа utf-8 , который включает большинство символов из всех известных человечеству языков. По существу, теперь страница сможет отобразить любой текстовый контент, который вы сможете в неё вложить. Нет причин не устанавливать эту кодировку, это также позволит избежать некоторых проблем позднее.
  5. <title></title>: Элемент <title>. Этот элемент устанавливает заголовок вашей страницы, который появляется во вкладке браузера, загружающей эту страницу, также это заглавие используется при описании страницы, когда вы сохраняете её в закладках или избранном.
  6. <body></body>: Элемент <body>. Он содержит весь контент, который вы хотите показывать посетителям вашей страницы, — текст, изображения, видео, игры, проигрываемые аудио дорожки или что-то ещё.

Активное изучение: Добавление элементов в ваш HTML-документ

Active learning: Adding some features to an HTML document

Если вы хотите поэкспериментировать с написанием HTML на своём компьютере, то можете:

  1. Скопировать пример HTML-страницы, расположенный выше.
  2. Создать новый файл в текстовом редакторе.
  3. Вставить код в ваш новый текстовый файл.
  4. Сохранить файл как index.html.

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


Для этого упражнения вы можете редактировать код локально на своём компьютере, как предлагается выше, а можете работать в редакторе, расположенном ниже. В редакторе показано только содержимое элемента <body>. Попробуйте сделать следующее:

  • Добавьте заголовок страницы сразу за открывающим тегом <body>. Текст должен находиться между открывающим тегом <h2> и закрывающим </h2> .
  • Напишите в параграфе о чём-нибудь, что кажется вам интересным.
  • Выделите важные слова, обернув их в открывающий тег <strong> и закрывающий </strong>
  • Добавьте ссылку на свой абзац так, как объяснено ранее в статье.
  • Добавьте изображение в свой документ под абзацем, как объяснено ранее в статье. Если сможете использовать другую картинку (со своего компьютера или из интернета). Вы большой молодец!

Если вы запутались, всегда можно запустить пример сначала кнопкой Сбросить. Сдаётесь — посмотрите ответ, нажав на Показать решение.

Пробелы в HTML

Whitespace in HTML

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

<p>Собаки глупы.</p>

<p>Собаки
         глупы.</p>

Не важно, сколько пустого места вы используете в разметке (что может включать пробелы и сдвиги строк): браузер при анализе кода сократит всё пустое место до одного пробела. Зачем использовать много пробелов? Ответ: это доступность для понимания — гораздо легче разобраться, что происходит в вашем коде, если он удобно отформатирован, а не просто собран вместе в одном большом беспорядке. В нашем коде каждый вложенный элемент сдвинут на два пробела относительно элемента, в котором он находится. Вы можете использовать любое форматирование (в частности, количество пробелов для отступа), но лучше придерживаться одного стиля.

В HTML символы <, >, ", ' и & являются специальными. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.

Мы должны использовать ссылки-мнемоники  — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях. Каждая ссылка-мнемоник начинается с амперсанда (&) и завершается точкой с запятой (;).

Буквенный символСимвольный эквивалент
<&lt;
>&gt;
«&quot;
&apos;
&&amp;

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

<p>В HTML вы определяете параграф элементом <p>.</p>

<p>В HTML вы определяете параграф элементом &lt;p&gt;.</p>

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

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

Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры <!-- и -->, например:

<p> Меня нет в комментариях( </p>

Как вы увидите ниже, первый параграф будет отображён на экране, а второй нет.

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

Примечание: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или CSS. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймёте, HTML и CSS созданы друг для друга.

PHP — с чего начать изучение

PHP — с чего начать изучение.

Следуя древнему стратегу Сунь-цзы — начать стоит с предварительных расчетов, и чем лучше вы всё просчитаете — тем больше шансов на успех, и единственное на что вы в состоянии повлиять — это на вероятность упомянутого успеха.

Давайте для начала рассмотрим банальные ошибки, которые снижают вероятность достижения поставленной цели. Пожалуй самая распространенная ошибка — это неразбериха. Что имеется ввиду под словом неразбериха: непонимание мотивации ( для нужно овладевать навыком ), неизвестность в отношении тех базовых навыков, которые на данный момент потребуются на рынке труда, накопление вопросов, на которые некому ответить и т.д. Словом, желающий изучить язык PHP начинает выкачивать кучу разных книг, а стоило бы сначала посетить курс PHP для начинающих , на каком-то моменте запутывается и некогда возникшее желание освоить популярный язык программирования растворяется в непрерывной череде будней… Некогда подобная ситуация возникла и в моей жизни, и изучение также было отброшено на длительный срок, а архивы скачанных книг так и пылились, вернее десятки гигабайт занимали почетное место на HDD.

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

Ошибка вторая: «школьный подход»

Раньше я мыслил так: 1) вначале теория -> 2), а после практика. Но самым рабочим и эффективным оказался вариант от противоположного: 1) сначала практика ( имеется и некая идея, которую хочется воплотить, и пускай корявые, но всё же попытки эту самую идею воплотить ), 2) а теория естественным образом подтягивается по мере возникновения различных моментов. Первый подход больше напоминает школьную программу, которая была также оторвана от жизни, и оставалась лишь теорией…, а по прошествии 5 и более лет успешно забывалась ( а у кого-то намного раньше ). Так что попытка перенести «школьный подход» к обучению закончилась примерно тем же. Через года 3 я толком уже не помнил о чем читал.

Пожалуй на этом закончу первую часть статьи. Главный вывод: человек — это всё же не машина, потому приступать к освоению новых навыков стоит с учетом человеческих особенностей, психологических аспектов мышления и поведения.

Вам также могут быть интересны следующие статьи:

атрибуты class, title, style, lang, dir

class

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

В каскадной таблице стилей CSS порядок следования имен не имеет значения, но важен в таблице:

http://google.com»>Текст ссылки

title

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

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

style

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

При просмотре кода в Web Inspector, DragonFly, Firebug, стили, которые добавляют JavaScript черз отладчик, отображаются внутри строки как значение style. Этот код динамически генерируется. Браузер может делать такую работу. Вам не стоит.

lang

Один из двух глобальных атрибутов интерационализации. Второй – dir.

С помощью атрибута, который относится к элементу <html>, можно задавать для страницы основной язык. Заголовок Content-Language также можно использовать для это цели.

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

lang позволяет поисковым ботам проиндексировать контент по языковому признаку. На основании атрибута применяются международные правила произношения. lang помогает оформить текст на языке, на котором написан. Элемент <q> нужен для отображения кавычек, соответствующих языку, который указан в атрибуте lang.

dir

Используется вместе с lang. Его применяют для изменения направления текстом на всех языках, где он пишется справа налево.

Атрибут dir в HTML5 имеет три значения: auto, ltr, rtl.

Основные атрибуты HTML5, которые вышли из HTML 4


tabindex

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

В новой версии все элементы приобретают фокусируемость – распространение не только на элементы ссылки и форм. Атрибут tabindex получает целое число в качестве значения.

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

Не стоит использовать tabindex с положительными значением, если не можете подставить tabindex к каждому интерактивному элементу. Применяйте атрибут, когда есть причины для переупорядочивания. Будьте уверены, что можете поддерживать правильный порядок элементов во время создания приложения. В противном случае примените стандартный.

accesskey

Атрибут напоминает предыдущий. Отличие в навигации: переход фокуса идет не к элементу со следующим значением по возрастанию к элементу с активным ключом доступа.

Горячие клавиши присваивают операциям на основании значений accesskey. Код <input accesskey=»s» name=»search» type=»text»/> создает поле поисковых запросов. accesskey равен при этом s. Когда пользователь жмет кнопку S, он перемешается в текстовое поле.

Значение accesskey – один и более символов, разделенных пробелами. Спецификация допускает присвоение нескольких горячих клавиш одному элемента. Синтаксис accesskey напоминает синтаксис class, так как его значение – упорядоченное множество маркеров, которые разделены пробелами. Порядок в этом случае важен.

Изучите HTML5 в этом бесплатном интерактивном курсе для начинающих

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

Итак, чтобы повысить технологическую грамотность мира, мы объединились с разработчиком, дизайнером и преподавателем Эриком Тирадо и создали бесплатный курс по HTML5.

Щелкните здесь , чтобы перейти на страницу курса

На протяжении всего курса Эрик проведет вас от новичка до опытного в HTML, показывая, как создать веб-сайт.И что самое приятное: на прохождение курса у вас уйдет меньше часа!

Теперь давайте посмотрим, как он устроен.

Содержание курса

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

Урок № 1: Введение в Интернет

Он начинается с того, что вы немного знакомите с Интернетом в целом, рассматриваете клиентов, серверы и три языка, на которых говорят браузеры: HTML, CSS и JavaScript.

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

Урок № 2: Создание документа HTML

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

Урок № 3: Вложенность элементов

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

Урок №4: Элементы заголовка и скрипты
  
   Изучение HTML 
  
  
  
  
  
  <стиль>
    h2 {
      выравнивание текста: центр;
    }
  
  <сценарий>
    document. getElementById ("h2"). innerHTML = "Привет, Вселенная!";
  

  

Элемент head — это первый тег HTML после самого тега . Это контейнер для метаданных, который часто определяет заголовок **, ** набор символов, стили, ссылки, скрипты и другую метаинформацию.

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

Урок 5: Элементы макета

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

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

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