Как написать хтмл код - Правописание и грамматика

Обзор: Начало работы
Далее

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

Необходимые знания:	Умение работать с компьютером, наличие необходимого ПО, базовые знания о работе с файлами.
Цель:	Познакомиться с языком HTML и научиться описывать некоторые его элементы.

Что такое HTML?

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

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

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

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

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

Структура HTML-элементов

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

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

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

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

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

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

<h2>Результат</h2>
<div class="output" style="min-height: 50px;">
</div>

<h2>Редактируемый код</h2>
<p class="a11y-label">Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).</p>

<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%">
  Это мой текст.
</textarea>

<div class="controls">
  <input id="reset" type="button" value="Сбросить" />
  <input id="solution" type="button" value="Показать решение" />
</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 = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '<em>Это мой текст.</em>';
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 === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Атрибуты

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

<p class="editor-note">My cat is very grumpy</p>

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

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

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

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

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

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

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

<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%">
  &lt;p&gt;Ссылка на мой любимый веб-сайт.&lt;/p&gt;
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить">
  <input id="solution" type="button" value="Показать решение">
</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 = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '<p>Ссылка на мой <a href="https://www.mozilla.org/" title="Домашняя страница Mozilla" target="_blank">любимый веб-сайт</a>.</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 === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

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

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

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

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

<input type="text" disabled>

<input type="text">

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

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

Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом 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!

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

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

В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в 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't this fun?'>A link to my example.</a>

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

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

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

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

<!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> — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .
<html></html>: Элемент <html> содержит в себе всё содержимое на всей странице, и иногда его называют «корневой элемент».
<head></head>: Элемент <head>. Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. Он включает такие вещи, как ключевые слова и описание страницы, которые вы хотели бы показывать в поисковых запросах, CSS для стилизирования вашего контента, объявление поддерживаемого набора символов и многое другое. Вы узнаете больше об этом из следующей статьи данного руководства.
<meta charset="utf-8">: Этот элемент устанавливает в качестве символьной кодировки для вашего документа utf-8 , который включает большинство символов из всех известных человечеству языков. По существу, теперь страница сможет отобразить любой текстовый контент, который вы сможете в неё вложить. Нет причин не устанавливать эту кодировку, это также позволит избежать некоторых проблем позднее.
<title></title>: Элемент <title>. Этот элемент устанавливает заголовок вашей страницы, который появляется во вкладке браузера, загружающей эту страницу, также это заглавие используется при описании страницы, когда вы сохраняете её в закладках или избранном.
<body></body>: Элемент <body>. Он содержит весь контент, который вы хотите показывать посетителям вашей страницы, — текст, изображения, видео, игры, проигрываемые аудио дорожки или что-то ещё.

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

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

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

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

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

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

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

<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%">
  &lt;p&gt;Это — моя страница&lt;/p&gt;
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить">
  <input id="solution" type="button" value="Показать решение">
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

img {
  max-width: 100%;
}

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 = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '<p>Мне очень нравится <strong>играть на барабанах</strong>. Мой любимый барабанщик — Нил Пирт, который играет в группе <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">"Rush"</a>. Мой любимый альбом Rush — <a href="http://www.deezer.com/album/942295">"Moving Pictures"</a>.</p> <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">';
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 === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Пробелы в HTML

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

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

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

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

Ссылки на сущности: Включение специальных символов в HTML

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

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

Буквенный символ	Символьный эквивалент
<	<
>	>
«	"
‘	'
&	&

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

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

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

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

HTML комментарии

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

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

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

<!-- <p>А теперь есть!</p> -->

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

Подведение итогов

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

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

Смотрите также

В этом модуле

Источник

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

Шаг 1. Качаем текстовый редактор

Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.

Зайдите на сайт и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если OS X или Linux — нажмите Other platforms.

Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.

Шаг 2. Запускаем редактор и осматриваемся

Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.

Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.

По шагам на скриншоте:

Add workspace folder — открывает меню выбора папки.
Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
Нажмём Add.

После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.

Шаг 3. Добавляем файлы

После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.

Шаг 4. Делаем работу удобнее

Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down,чтобы увидеть результат.

Шаг 5. Добавляем код

Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.

index.html

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Сайт начинающего верстальщика</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <nav>
        На главную
      </nav>
    </header>
    <main>
      <article>
        День первый. Как я забыл покормить кота

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

        Взгляд упал на кота. Кот издал настойчивое «Мяу». И я понял — пришло время для первой записи в блог. И покормить кота.
      </article>
      <aside>
        Здесь могла быть ваша реклама.
      </aside>
    </main>
    <footer>
      Подвал сайта
    </footer>
  </body>
</html>

style.css

Скопируем код со стилями из файла — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.

Шаг 6. Запускаем код и смотрим на результат

Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html. Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.

Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.

Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.

После установки расширения Windows может попросить разрешение на доступ к сети. Это нужно, чтобы запускать локальный сервер, Разрешайте, это безопасно.

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

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

Что мы сделали

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

В следующих частях — о добавлении и проверке кода на JavaScript, и о том, как сделать работу с кодом ещё удобнее.

Внеклассное чтение

Веб-разработка: с чего начать
Какие бывают редакторы кода
Что такое валидный код

Источник

Download Article

Creating and Saving a New HTML Document

Writing the Head and Body

Writing Text

Adding Other Elements

Tips

HTML stands for HyperText Markup Language. It is one of the most basic programming languages, primarily used in web design. It may seem a little complicated at first, but it’s actually one of the easier programming languages to learn. This wikiHow teaches you how to write some basic HTML. But soon, you’ll be creating your own amazing websites by hand.

1
Open a text editor. You can use any text editor that came pre-installed on your system to write HTML. On Windows, you can open Notepad. On Mac, open TextEdit. Use the following steps to open a text editor:
- Windows:
  - Click the Windows Start icon.
  - Type «Notepad«.
  - Click Notepad.
- Mac:
  - Click the magnifying glass in the upper-right corner.
  - Type «TextEdit» in the search bar and press Enter.
  - Click New Document.
2

Type <!doctype html> at the tip of the page. This tag tells the web browser that the document type is an HTML document.

Advertisement
3

Click File. It’s in the menu bar at the top.
4
Click Save as. It’s in the «File» menu.
- On Mac, simply click Save.
5

Type a name for the document. You will want to create a separate HTML document for each web page of your websites. On many websites, the front page is titled «index.html», but you can name it anything you want. Enter the file name you want to name the document next to «File name».
6
Change the file extension to .html. By default, Notepad saves files as «.txt» files, and TextEdit saves files as «.rft» files. Use one of the following steps to save the document as an HTML document:
- PC: Use the drop-down menu next to «Save as type:» and select «All Files (*,*)». Then manually erase the «.txt» extension at the end fo the file name and replace it with «.html».
- Mac: Click the drop-down menu next to «File format» at the bottom of the save window. Then click select «Web Page (.html)» in the drop-down menu. This will add the «.html» extension at the end of the file name automatically
7

Click Save. This saves the document as an HTML document. From now on, if you need to save your work, just click File followed by Save.

1

Type <html> in the next line. This is the opening tag for your HTML document. This should go in the second line after the «<!doctype html>» tag. This tag tells the web browser that the following text is in HTML format.
2
Press ↵ Enter a few times and type </html>. This provides a few blank lines and then adds the closing tag for the opening «<html>» tag.
- In HTML, everything has an opening tag and a closing tag. When you create a new HTML tag, you must always remember to add a closing tag. Otherwise, it won’t work.
- The «<html>» tag should always remain at the top of the document, and the «</html>» tag should always remain at the bottom of the document. The rest of your HTML code will go in between these two tags.
3
Type <head> in the third line. This is a opening tag for the HTML Head of the HTML document. The Head contains meta-information that typically doesn’t appear on-screen when people view your website. The opening tag for the head should go in the line just below the line with the «<html>» tag.^[1]
- It usually contains the document title, templates, links to related pages, and special coding instructions for the web browser. It can also contain a style language known as CSS (Cascading Style Sheets).
4

Press ↵ Enter type <title>. This is the tag that contains the document title. When viewed in a web browser, the title is the text that appears in the tab at the top. This tag should go just below the opening tag of the Head.
5

Type a title for the web page. You can type any title you want for your web page. It should come directly after the «<title>» tag, or on the next line.
6

Type </title>. This is the closing tag for the title tag. This goes after the title in the HTML document. It can be on the same line or separate line. What’s important is that we close the title tag of the HTML document.
7

Press ↵ Enter and type </head>. This tag closes the Head of the HTML document. If you want to add anything else to the Head of the document, make sure you enter it in between the «<head>» and «</head>» tags. You can use as many lines as you need.
8
Type <body> after the Head. This is the opening tag for the Body of the HTML document. The body contains visual elements of a web page that appear in your entire HTML document.
- This includes text, images, clickable buttons, links, the background color, background image, or anything else that appears on-screen when viewing your website from within a web browser.^[2]
9
Press ↵ Enter twice and type </body>. This provides a space before closing the Body of the HTML document. You can use this space to start writing the contents of your HTML document. All the contents of your web page are going to be written in between the «<body>» and «</body>» tags. So far your entire document should look something like this:

1
Type <h1> in the Body to add a header. All the contents of your HTML document are going to go between the «<body>» and «</body>» tags. The «<h1>» tag is the opening tag to write a header.
- There are six header tags you can use in HTML that are of different sizes. «<h1>» is the largest header, and «<h6>» is the smallest header. </li
2

Write a heading after the header tag. The text your write after the «<h1>» tag will appear in a large header format. If you want the title of your page to appear at the top in large letters, write «<h1>» followed by the title.
3

Type </h1> to close the header tag. Unless you want the entire text of your HTML document to appear in the header format, you’ll want to close the header tag. Type «</h1>» after your header text to close the header.
4

Type <br> to add a line break. If you want to add a space after some text, type «<br>». This creates a break in the text and adds another line. You can type the «<br>» tag for as many lines as you need. The line break tag is one of the few HTML tags that doesn’t require a closing tag.
5

Type <p> to add paragraph text. When you want to add paragraph text in HTML, use the «<p>» tag as the opening for the paragraph text.
6

Type your paragraph text. Any text you type after the «<p>» tag will be formatted as paragraph text. You can add as much text as you need.
7

Type </p> to close the paragraph text. When you are done writing your paragraph text, use the «</p>» tag to close the «<p>» paragraph tag.
8
Add a stye element to an HTML text tag. If you want to spice up your tag a little, you can type «style=» inside the HTML text tag and then add an HTML element to style the text. You can add multiple style elements to a tag by separating them with a semicolon (;).The following are some options you can use to style your text tags:^[3]
- Color: To change the color of the text, type «color:[color name];» after «style=» in the HTML tag. Type the actual name of a color, or a hexadecimal color code in place of «[color name]». For example, to change the header color to red, you would type <h1 style=»color:red;»> as the opening tag.
- Font: To change the text font, type «font-family:[font name];» after «style=» in the HTML tag. For example, to change the paragraph text to Garamond, you would type <p style=»font-family:garamond;»>. It’s important to remember that not all fonts are accessible from any computer. Web safe fonts that you can use include; Arial, Arial Black, Roboto, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Bookman, Comic Sans MS, Candara, and Impact.^[4]
- Text size: To change the size of the text, type «font-size:[size in percent (%) or pixels (px)];» after «style=» in the HTML tag. For example, if you want to change the header size to 50 pixels tall, you would type <h1 style=»font-size=50px;>«.
- Alignment: You can align your text to the left, center, or right, by typing «text-align:[alignment];» after «style=» in the HTML tag. For example, if you want your header to be centered at the top of the page, you would type <h1 style=»text-align:center;»>.
9
Adding a list. You can add a numbered or bulleted list to your HTML. Use the following steps to add a list to your HTML:
^[5]
- Type «<ol>» to start a numbered list, or «<ul>» to start a bulleted list.
- Type «<li>» to create a new listed item.
- Use the «<p>» tag to add text for the listed item.
- Type the text for the list item.
- Type </p> to close the text portion of the listed item.
- Type «</li>» to close the listed item tag.
- Repeat for all other list items.
- Type «</ol>» or «</ul>» to close your list tag at the end of the list.
10
Review your HTML document. It’s a good idea to periodically check your work. If you haven’t already done so. Go ahead and save your work. Then right-click the HTML document and select Open with. Select a web browser to view it in a web browser. So far your entire HTML code should look something like this:
- ```
  <!doctype html>
<html>
  <head>
    <title>Peanut Butter and Jelly Sandwich</title>
  </head>
  <body>
     <h1 style="color:red; align:center;">How to Make a Peanut Butter and Jelly Sandwich </h1>
<br>
<h2>Ingredients:</h2>
<ul>
<li>Peanut Butter</li>
<li>Jelly</li>
<li>Bread</li>
</ul>
<br>
<p>Smear the peanut butter on the bread and put jelly on top.  Then place a slice of bread on top.  Cut it in half</p>

  </body>
</html>
```

1
Add a color style to the Body background. If you want to change the background color of the body, edit the «<body>» tag to say «<body style=»». Then type «background-color:[color name];» after «style=» Replace «[color name]» with the name of a color or a hexadecimal color code. For example, if you wanted to change the background color to black, you would type the body tag as <body style=»background-color:black;»>.
- Alternatively, you can also set a background image in the Body tag. To do so, type <body style=»background-image:[image url]»> as the body tag. Replace «[image URL]» with the web address or location of the image you want to use.
2
Add an image. Type <img src=»[image url]»> to add an image to your web page. Replace «[image url]» with the web address of the image. For example, «<img src=»https:\www.mywebsite.com/image.png»>». Image tags do not need a closing tag.
- You can adjust the size of an image by adding «height=» and «width=» followed by the height and width of the image in pixels in the image tag. For example, «»'<img src=»https:\www.mywebsite.com/image.png» width=»500″ height=»600″>
- You can also center an image by typing the opening tag <center> before the tag, and </center> after the image tag.
3
Add a link to another web page. Linking back to other web pages is important in web design. Use the following steps to create a link that people can click to be directed to another web page:
- Type <a href= to start the link tag.
- Add the URL of the page you want to link to in quotations after «a href=».
- Type > to close the opening tag of the link.
- Type text you want to use for your link after the opening tag. Alternatively, you can use an image tag to use an image as a clickable link.
- Type </a> to close the HTML link tag. An example, the tag <a href=»https://www.wikihow.com/Create-a-Link-With-Simple-HTML-Programming»>Click here to learn how to link</a> renders Click here to learn how to link.
4

Type <hr> to add a horizontal line. A horizontal line can be used as a thematic break in text. To add a horizontal line, simply type <hr>. This tag does not need a closing tag.

Review your work. Once you’ve made significant progress on your HTML document, go ahead and save it and view it in a web browser to see what it looks like. Your HTML code should look something like this:

  <!doctype html>
<html>
  <head>
    <title>Document title</title>
  </head>
  <body style="background-color:black;">
     <center>
       <img src="https://www.mywebsite.com/logo_banner.png>
       <br>
       <a href="https://www.mywebsite.com/home><img src="https://www.mywebsite.com/home_button.jpg>
       <a href="https://www.mywebsite.com/page2><img src="https://www.mywebsite.com/next_button.jpg>
        </center>
        <br>
        <h1 style="color:white;">About Us</ht>
        <br>
        <p style='color:white;">A little about us...</p>
        <hr>
     </body>
</html>

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Don’t forget to close the tags, otherwise, your text will become one big mess!
Although you can make a fairly good website with plain HTML, it might be a good idea to learn CSS, as you can decorate your website with it.
Your website looks good, but how much does it actually do? Try learning some languages like Javascript, Ruby, and PHP to add functionality!

References

About This Article

Article SummaryX

1. Open a new text document in NotePad or Text Edit and save it as an «.html» file.

2. Type «» to start your document.
3. Type ‘ and ‘ to create the opening and closing tags of your HTML.
4. Type ‘ and ‘ to create the opening and closing tags for the head of your HTML document.
5. Type Document title in the head to create a document title.

6. Type ‘ and ‘ to create the opening and closing tags of the HTML body.
7. Type Header text in the body to create a header in your HTML document.
8; Type Paragraph text to add paragraph text to your document.
9. Type ‘ to create a line break in the text.

10. Type ‘ to add an image to your HTML document.

12. Type Link Text to add a link to your HTML.

Did this summary help you?

Thanks to all authors for creating a page that has been read 82,653 times.

Is this article up to date?

Источник

Download Article

Creating and Saving a New HTML Document

Writing the Head and Body

Writing Text

Adding Other Elements

Tips

1
Open a text editor. You can use any text editor that came pre-installed on your system to write HTML. On Windows, you can open Notepad. On Mac, open TextEdit. Use the following steps to open a text editor:
- Windows:
  - Click the Windows Start icon.
  - Type «Notepad«.
  - Click Notepad.
- Mac:
  - Click the magnifying glass in the upper-right corner.
  - Type «TextEdit» in the search bar and press Enter.
  - Click New Document.
2

Type <!doctype html> at the tip of the page. This tag tells the web browser that the document type is an HTML document.

Advertisement
3

Click File. It’s in the menu bar at the top.
4
Click Save as. It’s in the «File» menu.
- On Mac, simply click Save.
5

Type a name for the document. You will want to create a separate HTML document for each web page of your websites. On many websites, the front page is titled «index.html», but you can name it anything you want. Enter the file name you want to name the document next to «File name».
6
Change the file extension to .html. By default, Notepad saves files as «.txt» files, and TextEdit saves files as «.rft» files. Use one of the following steps to save the document as an HTML document:
- PC: Use the drop-down menu next to «Save as type:» and select «All Files (*,*)». Then manually erase the «.txt» extension at the end fo the file name and replace it with «.html».
- Mac: Click the drop-down menu next to «File format» at the bottom of the save window. Then click select «Web Page (.html)» in the drop-down menu. This will add the «.html» extension at the end of the file name automatically
7

Click Save. This saves the document as an HTML document. From now on, if you need to save your work, just click File followed by Save.

1

Type <html> in the next line. This is the opening tag for your HTML document. This should go in the second line after the «<!doctype html>» tag. This tag tells the web browser that the following text is in HTML format.
2
Press ↵ Enter a few times and type </html>. This provides a few blank lines and then adds the closing tag for the opening «<html>» tag.
- In HTML, everything has an opening tag and a closing tag. When you create a new HTML tag, you must always remember to add a closing tag. Otherwise, it won’t work.
- The «<html>» tag should always remain at the top of the document, and the «</html>» tag should always remain at the bottom of the document. The rest of your HTML code will go in between these two tags.
3
Type <head> in the third line. This is a opening tag for the HTML Head of the HTML document. The Head contains meta-information that typically doesn’t appear on-screen when people view your website. The opening tag for the head should go in the line just below the line with the «<html>» tag.^[1]
- It usually contains the document title, templates, links to related pages, and special coding instructions for the web browser. It can also contain a style language known as CSS (Cascading Style Sheets).
4

Press ↵ Enter type <title>. This is the tag that contains the document title. When viewed in a web browser, the title is the text that appears in the tab at the top. This tag should go just below the opening tag of the Head.
5

Type a title for the web page. You can type any title you want for your web page. It should come directly after the «<title>» tag, or on the next line.
6

Type </title>. This is the closing tag for the title tag. This goes after the title in the HTML document. It can be on the same line or separate line. What’s important is that we close the title tag of the HTML document.
7

Press ↵ Enter and type </head>. This tag closes the Head of the HTML document. If you want to add anything else to the Head of the document, make sure you enter it in between the «<head>» and «</head>» tags. You can use as many lines as you need.
8
Type <body> after the Head. This is the opening tag for the Body of the HTML document. The body contains visual elements of a web page that appear in your entire HTML document.
- This includes text, images, clickable buttons, links, the background color, background image, or anything else that appears on-screen when viewing your website from within a web browser.^[2]
9
Press ↵ Enter twice and type </body>. This provides a space before closing the Body of the HTML document. You can use this space to start writing the contents of your HTML document. All the contents of your web page are going to be written in between the «<body>» and «</body>» tags. So far your entire document should look something like this:

1
Type <h1> in the Body to add a header. All the contents of your HTML document are going to go between the «<body>» and «</body>» tags. The «<h1>» tag is the opening tag to write a header.
- There are six header tags you can use in HTML that are of different sizes. «<h1>» is the largest header, and «<h6>» is the smallest header. </li
2

Write a heading after the header tag. The text your write after the «<h1>» tag will appear in a large header format. If you want the title of your page to appear at the top in large letters, write «<h1>» followed by the title.
3

Type </h1> to close the header tag. Unless you want the entire text of your HTML document to appear in the header format, you’ll want to close the header tag. Type «</h1>» after your header text to close the header.
4

Type <br> to add a line break. If you want to add a space after some text, type «<br>». This creates a break in the text and adds another line. You can type the «<br>» tag for as many lines as you need. The line break tag is one of the few HTML tags that doesn’t require a closing tag.
5

Type <p> to add paragraph text. When you want to add paragraph text in HTML, use the «<p>» tag as the opening for the paragraph text.
6

Type your paragraph text. Any text you type after the «<p>» tag will be formatted as paragraph text. You can add as much text as you need.
7

Type </p> to close the paragraph text. When you are done writing your paragraph text, use the «</p>» tag to close the «<p>» paragraph tag.
8
Add a stye element to an HTML text tag. If you want to spice up your tag a little, you can type «style=» inside the HTML text tag and then add an HTML element to style the text. You can add multiple style elements to a tag by separating them with a semicolon (;).The following are some options you can use to style your text tags:^[3]
- Color: To change the color of the text, type «color:[color name];» after «style=» in the HTML tag. Type the actual name of a color, or a hexadecimal color code in place of «[color name]». For example, to change the header color to red, you would type <h1 style=»color:red;»> as the opening tag.
- Font: To change the text font, type «font-family:[font name];» after «style=» in the HTML tag. For example, to change the paragraph text to Garamond, you would type <p style=»font-family:garamond;»>. It’s important to remember that not all fonts are accessible from any computer. Web safe fonts that you can use include; Arial, Arial Black, Roboto, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Bookman, Comic Sans MS, Candara, and Impact.^[4]
- Text size: To change the size of the text, type «font-size:[size in percent (%) or pixels (px)];» after «style=» in the HTML tag. For example, if you want to change the header size to 50 pixels tall, you would type <h1 style=»font-size=50px;>«.
- Alignment: You can align your text to the left, center, or right, by typing «text-align:[alignment];» after «style=» in the HTML tag. For example, if you want your header to be centered at the top of the page, you would type <h1 style=»text-align:center;»>.
9
Adding a list. You can add a numbered or bulleted list to your HTML. Use the following steps to add a list to your HTML:
^[5]
- Type «<ol>» to start a numbered list, or «<ul>» to start a bulleted list.
- Type «<li>» to create a new listed item.
- Use the «<p>» tag to add text for the listed item.
- Type the text for the list item.
- Type </p> to close the text portion of the listed item.
- Type «</li>» to close the listed item tag.
- Repeat for all other list items.
- Type «</ol>» or «</ul>» to close your list tag at the end of the list.
10
Review your HTML document. It’s a good idea to periodically check your work. If you haven’t already done so. Go ahead and save your work. Then right-click the HTML document and select Open with. Select a web browser to view it in a web browser. So far your entire HTML code should look something like this:
- ```
  <!doctype html>
<html>
  <head>
    <title>Peanut Butter and Jelly Sandwich</title>
  </head>
  <body>
     <h1 style="color:red; align:center;">How to Make a Peanut Butter and Jelly Sandwich </h1>
<br>
<h2>Ingredients:</h2>
<ul>
<li>Peanut Butter</li>
<li>Jelly</li>
<li>Bread</li>
</ul>
<br>
<p>Smear the peanut butter on the bread and put jelly on top.  Then place a slice of bread on top.  Cut it in half</p>

  </body>
</html>
```

1
Add a color style to the Body background. If you want to change the background color of the body, edit the «<body>» tag to say «<body style=»». Then type «background-color:[color name];» after «style=» Replace «[color name]» with the name of a color or a hexadecimal color code. For example, if you wanted to change the background color to black, you would type the body tag as <body style=»background-color:black;»>.
- Alternatively, you can also set a background image in the Body tag. To do so, type <body style=»background-image:[image url]»> as the body tag. Replace «[image URL]» with the web address or location of the image you want to use.
2
Add an image. Type <img src=»[image url]»> to add an image to your web page. Replace «[image url]» with the web address of the image. For example, «<img src=»https:\www.mywebsite.com/image.png»>». Image tags do not need a closing tag.
- You can adjust the size of an image by adding «height=» and «width=» followed by the height and width of the image in pixels in the image tag. For example, «»'<img src=»https:\www.mywebsite.com/image.png» width=»500″ height=»600″>
- You can also center an image by typing the opening tag <center> before the tag, and </center> after the image tag.
3
Add a link to another web page. Linking back to other web pages is important in web design. Use the following steps to create a link that people can click to be directed to another web page:
- Type <a href= to start the link tag.
- Add the URL of the page you want to link to in quotations after «a href=».
- Type > to close the opening tag of the link.
- Type text you want to use for your link after the opening tag. Alternatively, you can use an image tag to use an image as a clickable link.
- Type </a> to close the HTML link tag. An example, the tag <a href=»https://www.wikihow.com/Create-a-Link-With-Simple-HTML-Programming»>Click here to learn how to link</a> renders Click here to learn how to link.
4

Type <hr> to add a horizontal line. A horizontal line can be used as a thematic break in text. To add a horizontal line, simply type <hr>. This tag does not need a closing tag.

  <!doctype html>
<html>
  <head>
    <title>Document title</title>
  </head>
  <body style="background-color:black;">
     <center>
       <img src="https://www.mywebsite.com/logo_banner.png>
       <br>
       <a href="https://www.mywebsite.com/home><img src="https://www.mywebsite.com/home_button.jpg>
       <a href="https://www.mywebsite.com/page2><img src="https://www.mywebsite.com/next_button.jpg>
        </center>
        <br>
        <h1 style="color:white;">About Us</ht>
        <br>
        <p style='color:white;">A little about us...</p>
        <hr>
     </body>
</html>

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Don’t forget to close the tags, otherwise, your text will become one big mess!
Although you can make a fairly good website with plain HTML, it might be a good idea to learn CSS, as you can decorate your website with it.
Your website looks good, but how much does it actually do? Try learning some languages like Javascript, Ruby, and PHP to add functionality!

References

About This Article

Article SummaryX

Did this summary help you?

Thanks to all authors for creating a page that has been read 82,653 times.

Is this article up to date?

Источник

Загрузить PDF

Вас интересует веб-дизайн? Чтобы попробовать свои силы в создании веб-страниц, необязательно пользоваться сложными программами. Веб-страницу можно создать в Блокноте, предустановленном на компьютерах с Windows. В качестве языка программирования будет использован HTML — HyperText Markup Language (язык гипертекстовой разметки). Вы можете написать HTML-код страницы в Блокноте или любом другом текстовом редакторе, а затем просто сохранить файл как HTML-документ. Этот язык легко изучить, даже если у вас нет навыков программирования. Итак, в нашей статье мы расскажем, как создать простую веб-страницу с помощью Блокнота.

1

Откройте меню «Пуск»

. Нажмите на логотип Windows в нижнем левом углу экрана. На экране появится меню «Пуск».
2

Найдите Блокнот. Введите блокнот в меню «Пуск». Вверху меню появятся результаты поиска.
3

Щелкните по Блокнот. Это голубой значок в виде блокнота верхней части результатов поиска. Откроется Блокнот.
4

Откройте меню Файл. Оно находится в верхнем левом углу окна Блокнота.
5

Нажмите Сохранить как…. Эта опция находится в открывшемся меню «Файл». Откроется окно «Сохранить как».
6

Откройте выпадающее меню «Тип файла». Оно находится в нижней части окна; в нем отобразится опция «Текстовые документы (*.txt)». Нажмите на нее, чтобы появилось выпадающее меню.
7

Щелкните по Все файлы. Эта опция находится в выпадающем меню. Теперь файл можно сохранить как HTML-документ.
8
Выберите папку для сохранения. Для этого нажмите на нужную папку на левой панели окна.
- Например, чтобы сохранить документ на рабочем столе, прокрутите вверх и нажмите «Рабочий стол» на левой панели.
9
Введите имя файла и расширение «html». Нажмите на текстовое поле «Имя файла», введите имя файла, а затем введите .html.
- Например, чтобы назвать файл веб-страницы «hello», введите hello.html.
10
Нажмите Сохранить. Текстовый документ будет сохранен как документ HTML. Теперь можно перейти к созданию структуры веб-страницы.
- Если Блокнот неожиданно закрылся или вы хотите вернуться к документу позже, щелкните правой кнопкой мыши по HTML-файлу и в меню выберите «Изменить».
Реклама

1

Добавьте языковой тег. Первый тег, который нужно добавить в Блокнот, указывает всему документу, что будет использоваться язык HTML. В Блокноте введите следующее:
2
Добавьте теги «head». Этот раздел HTML-документа содержит метаданные веб-страницы. В веб-браузере они не отображаются. Здесь может содержаться такая информация, как имя страницы, таблицы стилей (CSS), скрипты и так далее. Сейчас просто введите <head> после тега <html>, дважды нажмите ↵ Enter, чтобы вставить пустые строки, а затем введите </head>.
- Каждый HTML-элемент должен находиться между двумя тегами. Когда мы добавляем новый элемент, например тег «<head>», открывающий соответствующий раздел, нам нужно добавить и закрывающий тег. В данном случае это «</head>».
3

Введите имя страницы. Оно должно находиться внутри раздела «head», так что его нужно ввести между открывающим тегом «<head>» и закрывающим «</head>». Чтобы добавить имя, наберите открывающий тег <title>, затем введите текст (собствнно имя) и сразу за ним добавьте закрывающий тег </title>. Например, если именем вашей страницы будет «Мой сайт», введите следующее:
4

Добавьте теги «body». Все, что будет отображаться на вашей странице в веб-браузере, должно находиться между этими тегами. Под тегом </title> введите:
5

Закройте тег языка HTML. Последним тегом документа будет закрывающий тег «html», чтобы обозначить конец страницы. Введите </html> под тегом </body>, чтобы закрыть тег HTML.
6
Просмотрите HTML-документ. На данном этапе документ должен выглядеть следующим образом:
```
<!DOCTYPE html>
<html>

<head>
<title>Мой сайт</title>
</head>

<body>

</body>

</html>
```
7

Сохраните документ. Для этого нажмите «Файл» и затем «Сохранить» на панели меню. В качестве альтернативы для сохранения документа можно нажать Ctrl+S. Не забывайте чаще сохранять его в процессе работы.

Реклама

1

Запомните, что все элементы веб-страницы должны находиться между тегами «body». Любой элемент — будь то заголовок или абзац — нужно вводить после тега <body> и перед тегом </body>.
2
Добавьте основной заголовок сайта. Введите <h1></h1> между тегами «body», а затем введите заголовок внутри тегов <h1></h1>. Например, чтобы создать страницу с заголовком «Добро пожаловать», введите следующее:
```
<h1>Добро пожаловать</h1>
```
- Используйте теги от <h2></h2> до <h6></h6>, чтобы создать заголовки меньшего размера.
3
Добавьте текст на страницу. Введите теги абзаца <p></p>, а затем введите текст внутри этих тегов. Результат должен выглядеть примерно так:
```
<p>Это мой сайт. Голосуйте за меня на выборах!</p>
```
4
Вставьте разрыв абзаца. Чтобы добавить пустые строки между абзацами или заголовками, введите <br> после закрывающего тега строки. Например, чтобы создать разрыв строки после абзаца, введите следующее:
```
<p> Это мой сайт. Голосуйте за меня на выборах!</p><br>
<p>А еще я люблю картошку</p>
```
- После первого тега <br> можно ввести такой же тег, чтобы добавить еще один разрыв строки, то есть между двумя абзацами будут две пустые строки.
- Для разрыва абзаца закрывающий тег не нужен.
5
Отформатируйте текст. Полужирным, наклонным или подчеркнутым, а также надстрочным и подстрочным можно сделать слово, предложение или блок текста, если они находится между тегами абзаца. Для форматирования используйте следующие теги:
```
<b>Полужирный текст</b>
<i>Наклонный текст</i>
<u>Подчеркнутый текст</u>
<sub>Подстрочный текст</sub>
<sup>Надстрочный текст</sup>
```
6
Добавьте на страницу изображение. Чтобы изображение можно было добавить на веб-страницу, оно должно быть загружено на сервер в интернете, и вам нужно знать веб-адрес этого изображения. Наберите <img src=, затем адрес изображения в кавычках. В конце добавьте закрывающий значок >. Вот пример, как это должно выглядеть:
```
<img src="https://www.mywebsite.me/images/me.jpg">
```
- Если изображение хранится не в интернете, а на вашем компьютере, вместо веб-адреса можете использовать путь к его местоположению. Например: <img src="C:UsersusernamePicturesme.jpg">
7
Добавьте на страницу ссылку. Ссылки — важнейший аспект веб-разработки. Они позволяют пользователям переходить с одной страницы на другую. Чтобы добавить ссылку, вам нужно знать адрес веб-страницы, на которую она будет вести. Наберите <a href=, затем веб-адрес нужной страницы в кавычках. В конце добавьте закрывающий значок >. Затем сразу за ним наберите текст ссылки и закрывающий тег </a>. Вот пример того, как добавить на веб-страницу ссылку:
```
<a href="https://www.mywebsite.me/ipage2">Вторая страница</a>
```
- Вы также можете добавить ссылку на адрес электронной почты или использовать вместо текста ссылки изображение.

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

<!DOCTYPE html>
<html>

<head>
<title>Мой сайт</title>
</head>

<body>

<h1>Добро пожаловать!</h1>
<a href="https://www.mywebsite.me/ipage2">Вторая страница</a>
<img src="https://www.mywebsite.me/images/me.jpg">
<p>Это мой сайт. Надеюсь, он вам понравится!</p>
<p><b>Полужирным текстом выделены главные моменты.</b></p>
<p><i>Курсив выглядит зловеще.</i></p>

</body>
</html>

1

Сохраните документ. Для этого нажмите Ctrl+S. Теперь, когда вы откроете документ HTML, отобразится последняя версия вашей веб-страницы.
2

Щелкните правой кнопкой мыши по HTML-документу. Откроется меню.
3

Выберите Открыть с помощью. Эта опция находится в меню. Откроется новое меню.
4

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

Реклама

Об этой статье

Эту страницу просматривали 210 322 раза.

Была ли эта статья полезной?

Источник

1. Написание HTML кода
2. Изменяем цвета
3. Изменяем шрифты
4. Добавляем навигацию
5. Украшаем ссылки
6. Добавляем горизонтальные линии
7. Подключаем внешний CSS
Дальнейшее изучение

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

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

В конце данной статьи Вы создадите HTML файл который будет
выглядеть как этот:

Полученная HTML страница с цветами и разметкой сделанной при
помощи CSS.

Заметьте, что я не претендую на то, что это очень красиво ☺

Разделы помеченные даным знаком необязательны. Они содержат дополнительные объяснения HTML и
CSS кода в приведенных примерах. Знак “внимание!” в начале абзаца
обозначает более расширенную информацию чем остальной текст.

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты,
например Блокнот от Windows, TextEdit на Mac или KEdit под KDE
вполне подойдут под задачу. Как только Вы поймете основные
принципы, вы можете переключиться на использование более
продвинутых инструментов разработки, например на такие коммерческие
программы как Style Master или DreamWeaver. Но для создания первого
CSS файла не стоит отвлекаться на множество расширенных
возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или
OpenOffice. Эти программы обычно создают файлы, которые не могут
быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные
текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового
редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и
наборе в нем следующего текста:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

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

(Если вы используете TextEdit на Макинтоше, не забудьте указать
TextEdit’у, что это действительно простой текстовый файл, открыв
меню Format и выбрав опцию “Make plain text”.)

Первая строчка нашего HTML файла говорит браузеру
о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем
случае — это HTML версии 4.01.

Слова между < и > называются тэгами и как вы
можете видеть, документ содержится между <html> и
</html> тэгами. Между <head> and </head>
находится различная информация, которая не отображается в самом
документе. Например там содержится заголовок документа. Позже мы
добавим туда и связь с CSS файлом.

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

Тэг <ul> в нашем примере задает отображение
“неупорядоченного списка” (Unordered List), т.е. списка, элементы
которого непронумерованы. Тэги <li> начинают “элементы
списка” (List Item). Тэг <p> является “параграфом”. А тэг
<a> — “якорь” (Anchor), с помощью которого создаются
гиперссылки.

Код HTML в редактор KEdit.

Если вы хотите узнать какие бывают тэги в скобках <…>, то вы
можете изучить Начало работы с HTML. Но сначала пару слов о
структуре нашей HTML страницы.

Тэг “ul” — список состоящий из одной ссылки на каждый элемент
списка. Эта структура послужит нам “навигацией” по нашему сайту
связывая с нами другие страницы нашего гипотетического сайта .
Предполагается, что все страницы нашего сайта будут иметь схожее
или идентичное меню.
Элементы “h1” и “p” задают содержимое уникальное каждой
страницы, в то время как подпись (“address”) снизу снова будет
повторяться на всех страницах.

Отметьте, что я не закрыл “li” и “p” элементы. В HTML (но не в
XHTML), можно опускать закрывающие тэги </li> и </p>,
что я и сделал в данном случае, для того чтобы было проще текст.
Но вы можете добавить их, если считаете необходимым.

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

Выберите “Сохранить как…” или “Save As…” из выпадающего меню
Файл или File, укажите каталог для сохранения файла (например
Рабочий Стол) и сохраните данный файл как “mypage.html”. Не
закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем
10.4, вы увидите опцию «Don’t append the .txt extension» в
диалоговом окне «Save as». Выберите эту опцию, потому что имя файла
“mypage.html” уже включает в себя расширение. Более новые версии
TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим
образом: найдите файл вашим файловым менеджером (Проводник, Windows
Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на
нем. Если вы делали все как описано то имя файла будет
“mypage.html”. У вас должен открыться файл в браузере,
установленном по умолчанию. (Если нет, то откройте браузер и
перетащите файл в его окно.)

Как Вы видите, страница выглядит достаточно скучно…

ШАГ 2: изменяем цвета

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

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

Нам нужно добавить элемент <style> к HTML файлу.
Определения стилей будут внутри этого тэга. Возвращаемся к
редактору и добавляем следующие пять строчек в заголовок HTML кода
между тэгами <head> и </head>. Строки, которые надо
добавить выделены красным (с 5-й по 9-ю).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[и т.д.]

Первая строка говорит браузеру о том, что это таблица стилей и
что она написана на CSS (“text/css”). Вторая строка говорит, что мы
применяем стиль к элементу “body”. Третья устанавливает цвет текста
в пурпурный, а следующая устанавливает цвет фона в желто-зеленый
оттенок.

Таблицы стилей CSS создаются согласно правилам. Каждое
правило состоит из трех частей:

селектор (в нашем примере: “body”), которые
говорит о том, к какой части документа применить правило;
свойство (в нашем примере свойствами являются
‘color’ и ‘background-color’), которое указывает что именно мы
устанавливаем у данного элемента, выбранного селектором;
и значение (‘purple’ и ‘#d8da3d’), которое
устанавливает значение атрибута.

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

body { color: purple }
body { background-color: #d8da3d }

но поскольку оба правила относятся к body мы записали “body”
один раз и поместили свойства и значения вместе. Для получения
большей информации о селекторах смотрите главу 2 из Lie & Bos.

Фон элемента body так же является фоном целого документа. Мы
явно не назначили другим элементам (p, li, address…) фона, так что
по умолчанию у них его нет (или он прозрачный). Свойство ‘color’
устанавливает цвет текста элемента body, но все остальные элементы
внутри body наследуют этот цвет, пока для них не задан другой в
виде другого правила. (Мы добавим другие цвета позже.)

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

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

В CSS
можно задавать цвета несколькими способами. Наш пример показывает
два из них: по имени (“purple”) и по шестнадцатиричному коду
(“#d8da3d”). Существует порядка 140 имен цветов и 16
шестнадцатиричных значений. Добавляя прикосновение стиля
объясняет детали относительно этих кодов.

ШАГ 3: изменяем шрифты

Еще одна вещь которую можно сделать — шрифтовое разнообразие
разных элементов на странице. Давайте напишем шрифтом “Georgia”
весь текст, исключая заголовки, которые мы напишем “Helvetica.”

Поскольку в Web никогда нельзя быть целиком уверенным в том,
какие шрифты установлены на компьютерах посетителей, мы добавим
альтернативные способы отображения: если Georgia не найдена, то мы
будем использовать Times New Roman или Times, а если и он не
найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы
можем попробовать использовать Geneva, Arial или SunSans-Regular
поскольку они очень похожи по начертанию, ну а если у пользователя
нет таких шрифтов, то браузер может выбрать любой другой шрифт без
засечек.

В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы сохраните файл снова и нажмете “обновить” в браузере, то
у вас должны быть разные шрифты в заголовках и в тексте.

Сейчас шрифт заголовков и основного текста различается.

ШАГ 4: добавляем навигацию

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

Навигация уже на странице. Это список <ul> вверху. Ссылки
в нем не работают, потому что наш “сайт” пока что состоит только из
одной страницы, но это неважно в данный момент. Конечно же, на
настоящем сайте не должно быть неработающих ссылок.

Нам нужно переместить список налево и сдвинуть остальное
содержимое немного вправо, чтобы создать пространство для него.
Свойства CSS которые мы будем использовать для этого —
‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’
(для сдвига меню).

Есть и другие пути. Если вы поищете термины “столбец” или
“верстка” на странице изучая CSS, вы найдете несколько готовых к
использованию шаблонов. Но для наших целей сгодится и такой.

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы снова сохраните файл и обновите его в браузере то список
ссылок получится у вас слева от основного текста. Это уже смотрится
интереснее, не так ли?

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

Свойство ‘position: absolute’ говорит что элемент ul расположен
независимо от любого текста который предшествовал или будет
следующим за этим элементом, а свойства ‘left’ и ‘top’ обозначают
это расположение. В нашем случае это 2em сверху и 1em от левого
края окна.

‘2em’ обозначает 2 раза по растоянию, равному размеру текущего
шрифта. Т.е., если меню отображается шрифтом в 12 пунктов, то 2em
будет равняться 24 пунктам. `em` очень полезная единица измерения
в CSS, поскольку может адаптироваться автоматически к шрифту,
используемому браузером. Большинство браузеров имеют возможность
изменять размеры шрифта: вы можете попробовать увеличить или
уменьшить размер и увидеть, что меню будет изменяться в
зависимости от размера шрифта, чего бы не случилось, если бы мы
указали отступ в пикселях

ШАГ 5: украшаем ссылки

Навигационое меню все еще по-прежнему выглядит как список,
вместо меню. Давайте стилизуем его. Мы уберем маркеры списков и
переместим элементы налево, где были маркеры. Так же мы нарисуем
каждый элемент списка на белом фоне в своем черном квадрате (зачем?
просто так, потому что можем).

Мы так же не сказали какими должны быть цвета ссылок, так что
давайте добавим и это свойство: синими будут ссылки которые
пользователь еще не смотрел, пурпурными — те которые он уже
посещал. (строки 13-15 и 23-33):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>
[etc.]

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

В HTML гиперссылки создаются тэгами <a> поэтому для
указания цвета нам надо создать правило в CSS для “a”. Для того,
чтобы различать посещенные и непосещенные ссылки, CSS
предоставляет два “псевдо-класса” (:link и :visited). Они
называются “псевдо-классами” для отличия от HTML атрибутов, которые указываются в HTML напрямую, т.е. в
нашем случае class="navbar".

ШАГ 6: добавляем горизонтальные линии

Последним добавлением к нашей таблице стилей станет
горизонтальная полоса для разделения текста и подписи снизу. Мы
используем свойство ‘border-top’ для того чтобы добавить
прерывистую линию над элементом <address>
(строки 34-37):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[и т.д.]

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

ШАГ 7: внешний CSS

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

Для создания отдельного файла таблицы стилей нам нужен другой
пустой текстовый документ. Вы можете выбрать пункт “Новый” из меню
«Файл» в редакторе , для создания пустого файла. (Если вы
используете TextEdit, не забудьте сделать его текстовым снова,
используя меню Format.)

Затем вырежьте и вставьте все содержимое внутри <style> из
HTML в это новое окно. Не копируйте элементы разметки <style>
и </style>. Они принадлежат HTML коду, а не CSS. В новом окне
у вас теперь должен быть полная таблица стилей:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Выберите “Сохранить как…” из меню «Файл», убедитесь что вы в той
же директории/папке что и файл mypage.html, и сохраните таблицу
стилей под именем “mystyle.css”.

Теперь вернитесь к HTML коду. Уберите все содержимое от
<style> до </style> включительно и замените убранное
элементом <link> как показано (строка
5):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

Такая конструкция скажет браузеру о том, что таблица стиле
располагается в файле под названием “mystyle.css”, и поскольку
директория не упомянута, браузер будет искать этот файл там же, где
лижит HTML файл.

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

Конечный резульат

Следующий шаг — положить оба файла mypage.html и mystyle.css на
ваш сайт. (Конечно, вы можете захотеть слегка изменить их сперва…)
Как положить файлы на сайт зависит от вашего интернет провайдера.

Источник

Создание веб-сайтов не так

ое сложное дело, как кажется. Узнайте, как закодировать простую страницу с помощью HTML — языка разметки для Web.

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

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

Введение в HTML

HTML — это язык гипертекстовой разметки.

Гипертекст — это текст, который работает как ссылка.

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

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

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

HTML5

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

HTML5 — один из мощных инструментов для разработки веб-страниц. С HTML5 потоковая передача мультимедиа возможна без использования сторонних плагинов, таких как Flash. HTML5 также поддерживает хранение данных на стороне клиента. Это можно использовать для поддержки веб-приложений, когда клиент находится в автономном режиме.

Веб и HTML

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

HTML остается фундаментальным навыком для всех веб-разработчиков и дизайнеров.

Согласно обзору W3Techs, HTML — это язык, используемый на 74,3% всех сайтов.

Среди подкатегорий, HTML5 используется на 82,9% всех сайтов, которые используют HTML.

Как создать простую HTML-страницу

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

Кодирование HTML с помощью текстового редактора

Документ HTML — это в основном текстовый документ. Существует множество доступных редакторов текста, которые можно использовать для написания HTML. Два самых популярных: Dreamweaver и Sublime Text. Бесплатные редакторы — Notepad ++ для Windows и Text Wrangler для Mac. На самом деле сделать веб-страницу можно и в Microsoft Word, но делать это не стоит, поскольку он добавляет дополнительный и ненужный код в документы HTML.

Для примера мы будем использовать Notepad ++ в качестве редактора. Вы можете выбрать любой редактор по вашему выбору.

Создание и редактирование HTML

Создание нового документа HTML такое же, как и для любого другого типа документа. Выберите «Файл» — «Новый», чтобы открыть новый документ в Notepad ++. Внесите изменения в документ и нажмите «Сохранить».

Сохранение HTML

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

Если вы написали код в «Блокноте» и сохранили его как текстовый документ, то перевести его в html-страничку можно с помощью программы Total Commander. Выбираем команду «Переименовать» и меняем расширение файла из .txt на .html.

Формат HTML-страницы

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

Элементы HTML

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

<element-name>

Теги

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

Например:

Открывающий тег: <div>

Закрывающий тег: </ div>

Содержимое между открывающим и закрывающим тэгами является содержимым элемента.

Теги могут использоваться двумя способами:

Использование тегов в паре

Парные теги содержат открывающий и закрывающий теги. Вот как они выглядят:

<paragraph>Здесь какой-то текст</paragraph>

Существует открывающий тег (<paragraph>) и закрывающий тег (</ paragraph>), указывающий конец абзаца. Это означает, что все, что находится между этими двумя тегами, является абзацем.

Одиночные теги

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

Эти элементы пишутся так:

<image/>

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

Атрибуты

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

Тег с атрибутом будет выглядеть так:

<html lang=”en-US”/>

Тег «HTML» выше имеет атрибут «lang» со значением «en-US».

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

Каждый HTML-документ имеет базовую структуру, определенную с помощью следующих элементов:

DOCTYPE или DTD: Декларация типа документа указывает версию используемого HTML. Этот тег помещается в начале документа.

HTML: Пара тегов HTML определяет начало и конец документа HTML.

Раздел HEADER <head>: этот раздел определяет общую информацию для страницы, и обычно короткий. Содержимое этого элемента не отображается на странице. Заголовок содержит тег TITLE, который определяет название документа, отображаемое в строке заголовка браузера. HEADER также может содержать метаданные, или ссылки на внешние файлы.

Раздел BODY: Этот раздел содержит основную часть страницы. Его содержимое отображается в браузере. Большая часть кода HTML-страницы находится внутри элемента body.

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

Простая страница HTML

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

Шаг 1: Первая строка добавляемого HTML-кода указывает элемент DOCTYPE как «html». Это означает, что используется последняя версия HTML.

<!DOCTYPE html>

Шаг 2: Далее мы добавляем теги начала и конца для документа html. Мы также определяем язык как английский (en).

<!DOCTYPE html>

<html lang=”en”>

</html>

Шаг 3: Затем мы добавляем тег заголовка с тегом Title и сведениями о наборе символов.

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<title>Hello World</title>

</head>

</html>

Шаг 4: После этого пишется тег BODY.

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<title>Hello World</title>

</head>

<body>

</body>

</html>

Шаг 5: Теперь пустой HTML-документ готов. Давайте начнем добавлять текст для отображения. Мы добавляем тег заголовка <h1> и тег <p>. Они определяют заголовок первого уровня и абзац под ним.

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>Hello World</title>

</head>

<body>

<h1>Hello World</h1>

<p> Простая страница HTML</p>

</body>

</html>

Основная HTML-страница готова, и мы можем сохранить ее в папке по нашему выбору.

Просмотр страницы HTML

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

Он откроется в браузере, и мы видим очень простую страницу. Вы можете проверить, что он показывает:

Заголовок как «Hello World»

Заголовок первого уровня как «Hello World»

Абзац с текстом «Простая страница HTML»

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

Расширенное форматирование текста

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

Уровни заголовков можно задавать с помощью тегов <h1> </ h1> — <h6> </ h6>. Всего доступно 6 уровней для заголовков. Причем <h1> </ h1> — это самый большой из них по размеру, <h6> </ h6> — самый маленький.

Теги <p> </ p> используются для указания начала нового абзаца. Браузер обычно добавляет одну пустую строку между двумя абзацами.

Элементы форматирования используются для отображения специальных типов текста. Текст может быть отформатирован такими тегами:

Жирный – <b> </b>

Курсив – <i> </i>

Подчеркнутый – <u> </u>

Шрифт – <font> </font>

Полный список этих тегов доступен по ссылке.

Добавление ссылок

Вы можете создать гиперссылку на другую веб-страницу с помощью тега <a> </a>. Добавьте URL-адрес веб-страницы, используя атрибут href, как показано ниже.

<a href=”https://www.xyz.com/SimpleHTMLPage”>Это текст ссылки </a>

Добавление изображений

Тег <img> является одиночным тегом, без тега закрытия. Вы можете указать атрибуты изображения.

Атрибут src указывает местоположение изображения.

Атрибут style имеет много параметров, включая ширину и высоту изображения в пикселях.

Атрибут alt дает краткое описание изображения. Используется, если по какой-либо причине изображение не загружается.

<img src = http: //www.xyz.com/ images / testlogo.png style = «width: 324px; height: 84px» alt = «Тестовый логотип»>

Добавление заголовка

Тег <header> является новым для HTML5 и указывает самый верхний элемент веб-страницы. Заголовки обычно содержат логотип компании, контактную информацию, ссылки навигации и т. д. В одном документе может быть несколько элементов <>.

Расширенные понятия в HTML

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

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

Проверка HTML-кода

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

Валидация также дает рекомендации по коду, который не соответствует последнему стандарту HTML. Недействительный HTML сделает сайт непригодным для использования. Это может вызвать проблемы с загрузкой или несогласованность вывода с различными браузерами. Многие сервисы проверки бесплатны, например, validator.w3.org

Добавление дополнительных тегов

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

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

Загрузка веб-сайта

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

Добавление CSS и JavaScript

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

JavaScript — это язык программирования, и его можно использовать для добавления дополнительных функций HTML-страницам. Команды JavaScript вставляются между тегами <script> </script>. Они могут быть использованы для добавления интерактивных кнопок, выполнения математических расчетов и т. д.

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

How to Create Simple HTML Page | Step by Step DIY Tutorial

Источник

Что такое HTML?

Структура HTML-элементов

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

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

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

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

Атрибуты

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

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

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

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

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

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

Пробелы в HTML

Ссылки на сущности: Включение специальных символов в HTML

HTML комментарии

Подведение итогов

Смотрите также

В этом модуле

Шаг 1. Качаем текстовый редактор

Шаг 2. Запускаем редактор и осматриваемся

Шаг 3. Добавляем файлы

Шаг 4. Делаем работу удобнее

Шаг 5. Добавляем код

Шаг 6. Запускаем код и смотрим на результат

Что мы сделали

Внеклассное чтение

References

About This Article

Is this article up to date?

References

About This Article

Is this article up to date?

Об этой статье

Была ли эта статья полезной?

Оглавление

ШАГ 1: написание HTML кода

ШАГ 2: изменяем цвета

ШАГ 3: изменяем шрифты

ШАГ 4: добавляем навигацию

ШАГ 5: украшаем ссылки

ШАГ 6: добавляем горизонтальные линии

ШАГ 7: внешний CSS