В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы возможно слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!
Что такое HTML?
HTML (HyperText Markup Language - язык гипертекстовой разметки) не является языком программирования; это язык разметки
, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда элементов , которые вы используете для того, чтобы охватить, обернуть или разметить
различные части содержимого, чтобы оно имело определенный вид или срабатывало определенным способом. Встроенные для ">", и что в пустых элементах закрывающий тег не требуется и не допускается. Если атрибуты не указаны, то для них применяются значения по умолчанию.">тэги могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:
Мой кот очень сердитый
Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как "параграф", заключив её в теги элемента "параграф" (Определяет собой абзац текста.">
), например:
Мой кот очень сердитый
Примечание
: Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег ) определяет заголовок документа, который отображается в заголовке окна браузера или на вкладке страницы. Он содержит только текст, а теги внутри элемента игнорируются.">
может быть записан как <title> , <TITLE> , <Title> , <TiTlE> , и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.</p>
<h2>Структура HTML элементов</h2>
<p>Давайте рассмотрим элемент "параграф" чуть подробнее:</p>
<p>Основными частями элемента являются:</p>
<ol><li><b>Открывающий тег:
</b> Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри <b>угловых скобок
</b>. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.</li>
<li><b>Закрывающий тег:
</b> выглядит как и открывающий, но содержит слэш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов - типичная ошибка новичков, которая может приводить к неопределённым результатам - в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось.</li>
<li><b>Содержимое:
</b> Как видно, в нашем случае содержимым является простой текст.</li>
<li><b>Элемент:
</b> открывающий тег + закрывающий тег + содержимое = элемент.</li>
</ol><h3>Активное изучение: создание вашего первого HTML элемента</h3>
<p>Отредактируйте строку текста ниже в поле <i>Ввод
</i>, обернув ее тегами <em> и </em> (вставьте <em> перед строкой, чтобы <i>указать начало элемента
</i>, и </em> после нее, чтобы <i>указать конец элемента
</i>) - эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле <i>Вывод
</i>.</p>
<p> <i>Reset
</i> <i>Show solution
</i> , чтобы увидеть правильный ответ.</p>
<h6>Playable code</h6>
<h2>Результат</h2>
<div class="output" style="min-height: 50px;">
</div>
<h2>Редактируемый код</h2>
<p class="a11y-label"></p>
<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%">
Это мой текст.
</textarea>
<div class="controls">
<input id="reset" type="button" value="Reset" />
<input id="solution" type="button" value="Show solution" />
</div>
html {
font-family: "Open Sans Light",Helvetica,Arial,sans-serif;
}
h2 {
font-size: 16px;
}
.a11y-label {
margin: 0;
text-align: right;
font-size: 0.7rem;
width: 98%;
}
body {
margin: 10px;
background: #f5f9fa;
}
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var solution = document.getElementById("solution");
var output = document.querySelector(".output");
var code = textarea.value;
var userEntry = textarea.value;
function updateCode() {
output.innerHTML = textarea.value;
}
reset.addEventListener("click", function() {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = htmlSolution;
solution.value = "Show solution";
updateCode();
});
solution.addEventListener("click", function() {
if(solution.value === "Show solution") {
textarea.value = solutionEntry;
solution.value = "Hide solution";
} else {
textarea.value = userEntry;
solution.value = "Show solution";
}
updateCode();
});
var htmlSolution = "<em>This is my text.</em><h3>Вложенные элементы</h3>
<h3>Nesting_elements</h3>
<p>Вы также можете вкладывать элементы внутрь других элементов - это называется <b>вложенностью
</b>. Если мы хотим подчеркнуть, что наш кот очень сердитый, мы можем заключить слово "очень" в элемент ) указывает на то, что его содержание имеет большое значение, серьезность или срочность. Браузеры обычно отображают содержимое жирным шрифтом."> <strong> , который означает, что это слово крайне важно в данном контексте:</p><p>
<p>Мой кот <strong>очень</strong> сердитый.</p>
</p><p>Вы так же должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем p элемент первым, затем элемент strong , затем мы закрываем элемент strong первым, затем p . Следующее не правильно:</p><p>
<p>Мой кот <strong>очень сердитый.</p></strong>
</p><p>Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!</p>
<h3>Блочные и строчные элементы</h3>
<h3>Block versus inline elements</h3>
<p>Существует две важных категории элементов в HTML, которые вам стоит знать - элементы блочного уровня и строчные элементы.</p>
<ul><li>Элементы блочного уровня формируют видимый блок на странице - они окажутся на новой строке после любого контента, который шел до них, и любой контент после них также окажется на новой строке. Чаще всего элементами блочного уровня бывают структурные элементы страницы, представляющие собой, например, параграфы (абзацы), списки, меню навигации, подвалы, и т. п. Элементы блочного уровня не вкладываются в строчные элементы, но иногда могут вкладываться в другие элементы блочного уровня.</li>
<li>Строчные элементы - это те, которые содержатся в элементах блочного уровня и окружают только малые части содержимого документа, не целые абзацы и группировки контента. Строчные элементы не приводят к появлению новой строки в документе: они обычно встречаются внутри абзаца текста, например, элемент определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован (в устаревшем варианте) для создания якоря - это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами."> <a> (ссылка) или акцентирующие элементы вроде <em> или ) указывает на то, что его содержание имеет большое значение, серьезность или срочность. Браузеры обычно отображают содержимое жирным шрифтом."> <strong> .</li>
</ul><p>Посмотрите на следующий пример:</p><p>
<em>Первый</em><em>второй</em><em>третий</em>
<p>четвертый</p><p>шестой</p>
</p><p> <em> - это строчный элемент, так что, как вы здесь видите, первые три элемента находятся на одной строке друг с другом без пробелов между ними. С другой стороны, определяет собой абзац текста."> <p> - это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется CSS-оформлением по умолчанию, которое браузеры применяют к абзацам).</p>
<p><b>Примечание
</b>: HTML5 переопределил категории элементов в HTML: смотри Категории типов содержимого элементов . Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.</p>
<p><b>Примечание
</b>: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноименными типами отображения в CSS . Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница - одна из причин, почему HTML5 отказался от этих терминов.</p>
<h3>Пустые элементы</h3>
<h3>Empty elements</h3>
<p>Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег. Некоторые элементы состоят из одного тега и обычно используются для вставки чего-либо в то место документа, где размещены. Например, элемент - элемент HTML, предназначенный для описания изображений."> <img> вставляет картинку на страницу в том самом месте, где он расположен:</p><p>
<img src='https://i1.wp.com/raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png' loading=lazy>
</p><p>Это выведет на вашу страницу следующее:</p>
<p><b>Примечание
</b>: Пустые элементы иногда называют <i>void-элементы
</i>.</p>
<h2>Атрибуты</h2>
<p>У элементов также могут быть атрибуты, которые выглядят так:</p>
<p>Src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"/></p>
<p>Атрибут должен иметь:</p>
<ol><li>Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).</li>
<li>Имя атрибута и следующий за ним знак равенства.</li>
<li>Значение атрибута, заключенное в кавычки.</li>
</ol><h3>Активное изучение: Добавление атрибутов в элемент</h3>
<h3>Active learning: Adding attributes to an element</h3>
<p>Возьмём для примера элемент определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован (в устаревшем варианте) для создания якоря - это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами."> <a> - означает anchor (якорь) и делает текст внутри него гиперссылкой. Может иметь несколько атрибутов, вот два из них:</p>
<ul><li>href: В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит когда вы по ней кликаете. Например, href="https://www.mozilla.org/" .</li>
<li>title: Атрибут title описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведет. Например, title="The Mozilla homepage" . Она появится в виде всплывающей подсказки, когда вы наведете курсор на ссылку.</li>
<li>target: Атрибут target определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, target="_blank" отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.</li>
</ul><p>Измените строку текста ниже в поле <i>Ввод
</i> так, чтобы она вела на ваш любимый вебсайт. Сначала добавьте элемент <a> затем атрибут href и атрибут title . Наконец, укажите атрибут target чтобы открыть ссылку на новой вкладке. Вы можете наблюдать сделанные изменения в реальном времени в поле <i>Вывод
</i>. Вы должны увидеть гиперссылку, при наведении курсора на которую появляется содержимое атрибута title , а при щелчке переходит по адресу в атрибуте href . Помните, что между именем элемента и каждым из атрибутов должен быть пробел.</p>
<p>Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой <i>Reset
</i>. Если упражнение вызывает у Вас затруднения, то нажмите кнопку <i>Show solution
</i> чтобы увидеть правильный ответ.</p>
<h6>Playable code2</h6>
<h2>Результат</h2>
<div class="output" style="min-height: 50px;">
</div>
<h2>Редактируемый код</h2>
<p class="a11y-label">Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).</p>
<textarea id="code" class="input" style="min-height: 100px;width: 95%">
<p>A link to my favorite website.</p>
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Reset">
<input id="solution" type="button" value="Show solution">
</div>
html {
font-family: sans-serif;
}
h2 {
font-size: 16px;
}
.a11y-label {
margin: 0;
text-align: right;
font-size: 0.7rem;
width: 98%;
}
body {
margin: 10px;
background: #f5f9fa;
}
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var solution = document.getElementById("solution");
var output = document.querySelector(".output");
var code = textarea.value;
var userEntry = textarea.value;
function updateCode() {
output.innerHTML = textarea.value;
}
reset.addEventListener("click", function() {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = htmlSolution;
solution.value = "Show solution";
updateCode();
});
solution.addEventListener("click", function() {
if(solution.value === "Show solution") {
textarea.value = solutionEntry;
solution.value = "Hide solution";
} else {
textarea.value = userEntry;
solution.value = "Show solution";
}
updateCode();
});
var htmlSolution = "<p>A link to my favorite website.</p>";
var solutionEntry = htmlSolution;
textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);
// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
textarea.onkeydown = function(e){
if (e.keyCode === 9) {
e.preventDefault();
insertAtCaret("\t");
}
if (e.keyCode === 27) {
textarea.blur();
}
};
function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
var front = (textarea.value).substring(0, caretPos);
var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
textarea.selectionEnd = caretPos;
textarea.focus();
textarea.scrollTop = scrollPos;
}
// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = function(){
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
if(solution.value === "Show solution") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
}
updateCode();
};
<h3>Булевы атрибуты</h3>
<h3>Boolean attributes</h3>
<p>Иногда вы будете видеть атрибуты, написанные без значения - это совершенно допустимо. Такие атрибуты называются булевы и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмем атрибут disabled , который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.</p><p>
<input type="text" disabled="disabled">
</p><p>Для краткости совершенно допустимо записывать их следующим образом (мы так же для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):</p><p>
<input type="text" disabled>
<input type="text">
</p><p>На выходе оба варианта будут выглядеть следующим образом:</p>
<h3>Опускание кавычек вокруг значений атрибутов</h3>
<h3>Omitting quotes around attribute values</h3>
<p>Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определенных условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом href так:</p><p>
favorite website
</p><p>Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:</p><p>
favorite website
</p><p>В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут title это на самом деле три разных атрибута - атрибут title со значением "The" и два булевых атрибута: Mozilla и homepage . Это, очевидно, не то, что имелось ввиду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть на что похож текст title!</p>
<p>Наш совет: всегда используйте кавычки в атрибутах - это позволит избежать подобных проблем, и следовательно, код будет более читабельным.</p>
<h3>Одинарные или двойные кавычки?</h3>
<h3>Single or double quotes?</h3>
<p>В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:</p><p>
A link to my example.
A link to my example.
</p><p>Однако, вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!</p><p>
A link to my example.
</p><p>Если вы используете один тип кавычек в своем HTML, то вы можете поместить внутрь их кавычки другого типа не вызывая никаких проблем:</p><p>
A link to my example.
</p><p>Если вы хотите вставить кавычки того же типа, то вы должны использовать объекты HTML . Например, это работать не будет:</p><p>
A link to my example.
</p><p>Поэтому вам нужно сделать так:</p><p>
A link to my example.
</p><h2>Структура HTML документа</h2>
<p>Ниже дан пример оборачивания основных, самостоятельных HTML элементов, которые не очень полезны сами по себе. Давайте посмотрим как самостоятельные элементы объединяются для формирования всей HTML страницы:</p><p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page
This is my page
