Знакомимся с HTML за один час

25.06.2018
11930

Приветствую всех, дорогие друзья! Сегодня мы с вами начнем изучать HTML – основу всех сайтов в сети Интернет. HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») – это стандартизированный язык разметки документов во всемирной паутине, Интернет. Пусть вас не пугают такие формулировки, на самом деле все достаточно просто.

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

Давайте с вами посмотрим, как выглядит простенькая страничка на данном языке:

<!doctype html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Моя первая HTML-страничка</title>
</head>
<body>
	<p>Привет, МИР!</p>
</body>
</html>

Давайте теперь скачаем редактор Notepad++, который будет вашим верным помощником на первых этапах курса, по ссылке. Я советую вам скачать 32 битную версию редактора, так как в 64 битной достаточно урезан функционал.

HTML за один час

Установите данный редактор и откройте его. Далее нам нужно создать новый документ (ctrl + N) и выбрать синтаксис HTML.

HTML за один час

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

ВАЖНО! Любая главная страница сайта должна называться именно как index, если в настройках сервера не указано другое.

HTML за один час

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

HTML за один час

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

Теги

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

<имятега></имятега>

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

Кроме того, у тегов могут быть атрибуты, которые указывают на те или иные свойства объекта HTML:

<имятега атрибут1=”значениеатрибута1” атрибут2=”значениеатрибута2”></имятега>

Более подробно на атрибутах мы с вами остановимся на примерах чуть ниже. Доступные теги и их атрибуты вы можете посмотреть по ссылке.

Также теги бывают двух видов:

  • Парные, где у нас есть открывающийся элемент и загрывающийся элемент, например, тег параграфа:
    <p></p>
    
  • Одинарные, где открывающийся и закрывающийся элемент объединены в один, например, тег переноса каретки на новую строку:
    <br/>
    

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

Давайте разберемся к структуре документов на HTML, для этого давайте снова взглянем на наш первый кусок кода:

<!doctype html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Моя первая HTML-страничка</title>
</head>
<body>
	<p>Привет, МИР!</p>
</body>
</html>

И разберем его более подробно. Данный кусок кода является куском HTML5, последней версии спецификации нашего языка разметки. Любой документ HTML начинается с указания типа документа с помощью тега DOCTYPE, что является указанием браузеру как именно интерпретировать текст документа. Далее идет открывающийся тег <html>, который указывает на начало документа, обязательно в конце должен быть закрывающийся тег, который укажет браузеру на конец документа.

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

Примеры

Теперь давайте с вами разберем на примерах как же работает наш HTML. А начнем мы с вами с текстовых тегов. Не секрет, что любая страница в сети имеет заголовок и подзаголовки, за данную конструкцию отвечает тег H и всего заголовков у нас 6 штук, чего вполне достаточно, чтобы полностью раскрыть содержание любой статьи, давайте мы с вами используем тег H1, заголовок первого уровня и озаглавим нашу страничку:

<!doctype html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Моя первая HTML-страничка</title>
</head>
<body>
	<h1>Примеры тегов HTML</h1>
	<p>Привет, МИР!</p>
</body>
</html>

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

<!doctype html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Моя первая HTML-страничка</title>
</head>
<body>
	<h1>Примеры тегов HTML</h1>
	<h2>Тег параграфа (абзаца текста)</h2>
	<p>Привет, МИР!</p>
</body>
</html>

Наши теги слились, давайте допишем тегу H1 атрибут align=”center”, чтобы он у нас с вами встал по центру.

<!doctype html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Моя первая HTML-страничка</title>
</head>
<body>
	<h1 align="center">Примеры тегов HTML</h1>
	<h2>Тег параграфа (абзаца текста)</h2>
	<p>Привет, МИР!</p>
</body>
</html>

HTML за один час

Отлично! Думаю, что мы можем с вами посмотреть, как выглядят другие заголовки для этого создадим еще один подзаголовок h2 и пропишем туда оставшиеся 4 тега заголовков.

<!doctype html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Моя первая HTML-страничка</title>
</head>
<body>
    <h1 align="center">Примеры тегов HTML</h1>
	<h2>Тег параграфа (абзаца текста)</h2>
	<p>Привет, МИР!</p>
	<h2>Теги заголовков h3-h6</h2>
	<h3>Заголовок 3</h3>
	<h4>Заголовок 4</h4>
	<h5>Заголовок 5</h5>
	<h6>Заголовок 6</h6>
</body>
</html>

Класс! У нас с вами все замечательно получается. Теперь давайте повыделяем текст курсивом и жирным написанием. Для этого у нас существует тег i (em) и тег strong (b). Давайте в наш абзац напишем побольше текста и выделим некоторые слова.

<!doctype html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Моя первая HTML-страничка</title>
</head>
<body>
    <h1 align="center">Примеры тегов HTML</h1>
	<h2>Тег параграфа (абзаца текста)</h2>
	<p>Всю не слишком долгую историю российского футбола последний матч группового турнира означал и последний на чемпионате, потому, что сборная никогда не выходила из группы. Две победы над Саудовской Аравией и Египтом позволили россиянам сделать это первыми из всех участников. Сегодня наша команда поспорит за <b>первое место</b> с Уругваем, который тоже набрал шесть очков.</p>
	<p>По сути встреча спортивной значимости не имеет. Соперниками России и Уругвая будут скорее всего сборные Испании и Португалии и по большому счету неважно с кем из них соперничать. Тем не менее, главный тренер российской команды <i>Станислав Черчесов</i> заявил, что никаких специальных замен делать не будет и на поле выйдут те, кто находится в лучшей форме. Сборные Саудовской Аравии и Египта, которые покидают Чемпионат мира, сыграют за престиж.</p>
	<h2>Теги заголовков h3-h6</h2>
	<h3>Заголовок 3</h3>
	<h4>Заголовок 4</h4>
	<h5>Заголовок 5</h5>
	<h6>Заголовок 6</h6>
</body>
</html>

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

<!doctype html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Моя первая HTML-страничка</title>
</head>
<body>
    <h1 align="center">Примеры тегов HTML</h1>
	<h2>Тег параграфа (абзаца текста)</h2>
	<div style="max-width: 600px; width: 100%;">
	<p>Всю не слишком долгую историю российского футбола последний матч группового турнира означал и последний на чемпионате, потому, что сборная никогда не выходила из группы. Две победы над Саудовской Аравией и Египтом позволили россиянам сделать это первыми из всех участников. Сегодня наша команда поспорит за <b>первое место</b> с Уругваем, который тоже набрал шесть очков.</p>
	<p>По сути встреча спортивной значимости не имеет. Соперниками России и Уругвая будут скорее всего сборные Испании и Португалии и по большому счету неважно с кем из них соперничать. Тем не менее, главный тренер российской команды <i>Станислав Черчесов</i> заявил, что никаких специальных замен делать не будет и на поле выйдут те, кто находится в лучшей форме. Сборные Саудовской Аравии и Египта, которые покидают Чемпионат мира, сыграют за престиж.</p>
	</div>
	<h2>Теги заголовков h3-h6</h2>
	<h3>Заголовок 3</h3>
	<h4>Заголовок 4</h4>
	<h5>Заголовок 5</h5>
	<h6>Заголовок 6</h6>
</body>
</html>

В атрибуте style у нас с вами 2 параметра:

  • Max-width – максимальная ширина равная 600 пикселям
  • Width – ширина равная 100% документа

То есть фактически мы ограничили расширение текста до 600 пикселей и при этом не потеряди в адаптивности страницы.

HTML за один час

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

  • Маркированный (ul)
  • Цифровой (ol)

Элемент списка выделяется тегом li.

<!doctype html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Моя первая HTML-страничка</title>
</head>
<body>
    <h1 align="center">Примеры тегов HTML</h1>
	<h2>Тег параграфа (абзаца текста)</h2>
	<div style="max-width: 600px; width: 100%;">
	<p>Всю не слишком долгую историю российского футбола последний матч группового турнира означал и последний на чемпионате, потому, что сборная никогда не выходила из группы. Две победы над Саудовской Аравией и Египтом позволили россиянам сделать это первыми из всех участников. Сегодня наша команда поспорит за <b>первое место</b> с Уругваем, который тоже набрал шесть очков.</p>
	<p>По сути встреча спортивной значимости не имеет. Соперниками России и Уругвая будут скорее всего сборные Испании и Португалии и по большому счету неважно с кем из них соперничать. Тем не менее, главный тренер российской команды <i>Станислав Черчесов</i> заявил, что никаких специальных замен делать не будет и на поле выйдут те, кто находится в лучшей форме. Сборные Саудовской Аравии и Египта, которые покидают Чемпионат мира, сыграют за престиж.</p>
	</div>
	<h2>Теги заголовков h3-h6</h2>
	<h3>Заголовок 3</h3>
	<h4>Заголовок 4</h4>
	<h5>Заголовок 5</h5>
	<h6>Заголовок 6</h6>
	<h2>Списки</h2>
	<p>Кто может быть соперниками сборной России в 1/8 ЧМ мира по футболу 2018:</p>
	<ul>
		<li>Испания</li>
		<li>Португалия</li>
	</ul>
	<p>Группа A ЧМ мира по футболу 2018:</p>
	<ol>
		<li>Россия</li>
		<li>Уругвай</li>
		<li>Саудовская Аравия</li>
		<li>Египет</li>
	</ol>
</body>
</html>

Теперь мы с вами познакомились и со списками. Давайте теперь сделаем ссылку на какой-нибудь сайт. За ссылку отвечает тег a, у которого есть атрибут href, который указывает браузеру какую страницу открыть при клике на ссылку. Также есть атрибут target, который указывает как открыть ссылку. Если данный атрибут не указан, то новая страница открывается в этой же вкладке. Мы с вами еще укажем дополнительную ссылку с атрибутом target=”_blank”, который откроет нашу ссылку в новой вкладке.

<!doctype html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Моя первая HTML-страничка</title>
</head>
<body>
    <h1 align="center">Примеры тегов HTML</h1>
	<h2>Тег параграфа (абзаца текста)</h2>
	<div style="max-width: 600px; width: 100%;">
	<p>Всю не слишком долгую историю российского футбола последний матч группового турнира означал и последний на чемпионате, потому, что сборная никогда не выходила из группы. Две победы над Саудовской Аравией и Египтом позволили россиянам сделать это первыми из всех участников. Сегодня наша команда поспорит за <b>первое место</b> с Уругваем, который тоже набрал шесть очков.</p>
	<p>По сути встреча спортивной значимости не имеет. Соперниками России и Уругвая будут скорее всего сборные Испании и Португалии и по большому счету неважно с кем из них соперничать. Тем не менее, главный тренер российской команды <i>Станислав Черчесов</i> заявил, что никаких специальных замен делать не будет и на поле выйдут те, кто находится в лучшей форме. Сборные Саудовской Аравии и Египта, которые покидают Чемпионат мира, сыграют за престиж.</p>
	</div>
	<h2>Теги заголовков h3-h6</h2>
	<h3>Заголовок 3</h3>
	<h4>Заголовок 4</h4>
	<h5>Заголовок 5</h5>
	<h6>Заголовок 6</h6>
	<h2>Списки</h2>
	<p>Кто может быть соперниками сборной России в 1/8 ЧМ мира по футболу 2018:</p>
	<ul>
		<li>Испания</li>
		<li>Португалия</li>
	</ul>
	<p>Группа A ЧМ мира по футболу 2018:</p>
	<ol>
		<li>Россия</li>
		<li>Уругвай</li>
		<li>Саудовская Аравия</li>
		<li>Египет</li>
	</ol>
	<h2>Ссылки</h2>
	<a href="https://google.com/">Google</a> <a href="https://google.com/" target="_blank">Google (в новой вкладке)</a>
</body>
</html>

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

<!doctype html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Моя первая HTML-страничка</title>
</head>
<body>
    <h1 align="center">Примеры тегов HTML</h1>
	<h2>Тег параграфа (абзаца текста)</h2>
	<div style="max-width: 600px; width: 100%;">
	<p>Всю не слишком долгую историю российского футбола последний матч группового турнира означал и последний на чемпионате, потому, что сборная никогда не выходила из группы. Две победы над Саудовской Аравией и Египтом позволили россиянам сделать это первыми из всех участников. Сегодня наша команда поспорит за <b>первое место</b> с Уругваем, который тоже набрал шесть очков.</p>
	<p>По сути встреча спортивной значимости не имеет. Соперниками России и Уругвая будут скорее всего сборные Испании и Португалии и по большому счету неважно с кем из них соперничать. Тем не менее, главный тренер российской команды <i>Станислав Черчесов</i> заявил, что никаких специальных замен делать не будет и на поле выйдут те, кто находится в лучшей форме. Сборные Саудовской Аравии и Египта, которые покидают Чемпионат мира, сыграют за престиж.</p>
	</div>
	<h2>Теги заголовков h3-h6</h2>
	<h3>Заголовок 3</h3>
	<h4>Заголовок 4</h4>
	<h5>Заголовок 5</h5>
	<h6>Заголовок 6</h6>
	<h2>Списки</h2>
	<p>Кто может быть соперниками сборной России в 1/8 ЧМ мира по футболу 2018:</p>
	<ul>
		<li>Испания</li>
		<li>Португалия</li>
	</ul>
	<p>Группа A ЧМ мира по футболу 2018:</p>
	<ol>
		<li>Россия</li>
		<li>Уругвай</li>
		<li>Саудовская Аравия</li>
		<li>Египет</li>
	</ol>
	<h2>Ссылки</h2>
	<a href="https://google.com/">Google</a> <br/> <a href="https://google.com/" target="_blank">Google (в новой вкладке)</a>
</body>
</html>

Перейдем к более сложным объектам страницы, состоящим из нескольких тегов. Это теги таблицы. Таблица обозначается тегом table, строка таблицы тегом tr, ячейка таблицы тегом td. И давайте выведем состав группы A на ЧМ мира по футболу 2018 с набранными очками на 2 тур.

<h2>Таблицы</h2>
<table border="1">
	<tr>
		<td><b>Страна</b></td>
		<td><b>Очки</b></td>
	</tr>
	<tr>
		<td>Россия</td>
		<td>6</td>
	</tr>
	<tr>
		<td>Уругвай</td>
		<td>6</td>
	</tr>
	<tr>
		<td>Египет</td>
		<td>0</td>
	</tr>
	<tr>
		<td>Саудовская Аравия</td>
		<td>0</td>
	</tr>
</table>

Ну, и напоследок перейдем к формам, без которых никуда. С помощью них пользователи могут отправить сообщение в ВК, сделать заказ в интернет-магазине, задать вопрос на форуме. Рассмотрим мы с вами 5 основных элементов форм:

  • Input – текстовое поле
  • Textarea – большое текстовое поле
  • Checkbox – флажки
  • Radio – переключатели
  • Button – кнопка отправки
<div><input type="text" name="name" placeholder="Ваше имя"></div>
<div><textarea name="text" id="" cols="30" rows="10" placeholder="Сообщение"></textarea></div>
<div>
	<input type="checkbox" name="option1"> Опция 1
	<input type="checkbox" name="option2"> Опция 2
</div>
<div>
	<input type="radio" name="option3"> Опция 3
	<input type="radio" name="option3"> Опция 4
</div>
<div>
	<button type="submit">Отправить</button>
</div>

Обязательно всегда указывайте атрибут name у полей формы, иначе данные с нее могут не отправиться. Кроме того, я указал дополнительный атрибут placeholder, который отвечает за подсказку в поле ввода.

У полей ввода типа переключателей должно быть одинаковое значение у атрибута name иначе они будут интерпретироваться, как 2 физически разных поля.

Вот и все! Надеюсь, что данный урок был полезен вам и желаю вам успехов в дальнейшем изучении HTML! Также в скором времени ждите курс по CSS.

Знакомимся с HTML за один час

0 Число голосов: 11
4
5
1
11

Комментарии ()

  1. Витька 05 июля 2019, 12:00 # 0
    попал в тупик не успев начать, перепробовал почти все версии с оф.сайта npp не в одной версии нету преобразовать без BOM
    а вообще все доходчиво, автору большое спасибо!
    1. Игорь 14 ноября 2021, 17:59 # 0
      Большое спасибо:)

      Наши клиенты

      Многие компании уже доверяют нам. Будьте в их числе!

      Хотите реализовать проект?

      Контакты

      Напишите нам - мы расскажем вам много интересного!


      Пермь, ул. Крупской 34, офис 510