руслан белый

Я вебмастер с ИП. Опыт работы — 10 лет.

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

В свободное время ищу ошибки на сайтах и учу делать контентники

Рассылка
Популярное

Как решить любую техническую проблему

Сколько денег надо
вложить в сайт

Как самому сделать сайт

Как выбрать нишу сайта

Бесплатный аудит сайта

Мероприятия

Пока мероприятий нет.

Что такое HTML и как им пользоваться

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

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

HTML — это структура и семантика

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

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

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

Вот пример элемента:

<h1 class="post_header">Заголовок</h1>

Тут h1 парный тег, а class — атрибут.

Вот еще пример:

<img src="picture.jpg" alt=”картинка” />

Тут img непарный тег, а src и alt — атрибуты

Тегов и атрибутов очень много: текущий список определен в спецификации HTML5. Вот ссылки на оригинал на английском языке и на неофициальный перевод спецификации.

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

  • strong, em, del
  • ul, ol, li
  • blockquote, a, hr
  • h1, h2, h3, h4, h5, h6
  • img
  • table, tr, th, td
  • специальные символы HTML

О них мы и будем говорить в следующей статье.

Семантические элементы HTML

Как мы уже говорили ранее, семантика означает смысл. Семантические элементы — элементы которые придают смысл заголовкам, параграфам, спискам и др. Важно использовать их по назначению, так как они влияют на форматирование документа и SEO оптимизацию статьи.

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

При изучении HTML важно понимать концепцию блочных и строчных элементов.

Блочные элементы —  элементы, которые занимают всю ширину экрана браузера или родительского элемента и начинаются с новой строки:

<h1>Заголовок</h1>

Строчные элементы — элементы, которые остаются на той же строке на экране браузера, внутри родительского элемента или рядом с соседними строчными элементами:

<a href="yandex.ru">Яндекс</a>

или

<em>текст</em>

Родительские и дочерние теги

Теги можно вкладывать друг в друга. Например так:

<p>текст<em>еще текст</em>продолжение текста</p>

или так

<a href=«index.html»><img src=«logo.jpg»></a>

В таких случаях, о тегах который снаружи, в наших примерах <p> и <a>, говорят, что они родительские, а внутри — дочерние. Правило вложенности тегов такое:

Внутрь блочных можно помещать блочные и строчные, а внутрь строчных элементов можно только строчные.

Сведем всю теоретическую кашу к единому целому.

Как сделать HTML страницу

Чтобы создать HTML страницу, необходимо использовать базовые HTML теги:

  • doctype;
  • html;
  • head, meta, title;
  • body.

Базовая структура страницы

Вот так выглядит минимальная html страница:

<!doctype html>

<html>

<head>

<meta charset="utf-8"/>

<title>Заголовок документа</title>

</head>

<body>

<h1>Заголовок первого уровня</h1>

<p>Обычный абзац</p>

<!-- <p>Пример комментария в html</p> -->

</body>

</html>

Тег !doctype

Тег <!doctype> указывает на стандарт документа. Сегодня используется HTML5.

Тег html

Тег <html> родительский элемент для всех остальных элементов документа. Он указывает, что перед нами HTML страница.

Тег head

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

Тег meta

Тег <meta> используется для разных целей. Конкретно в примере при помощи атрибута charset мы определили кодировку документа как utf-8.

UTF-8 — кодировка, которая корректно отображает все символы латинского и кириллического (русского) алфавитов. Я рекомендую использовать только ее.

Помимо атрибута charset у тега <meta> есть другие атрибуты: description или keywords.

Тег title

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

Тег body

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

<! — образец комментария -->

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

Практика по созданию HTML страницы

Начнем с простого утверждения: HTML страница - это обычная текстовая страница с расширение .html: index.html — главная страница сайта, about.html — страница о нас. Оба документа представляют собой обычный текст, такой же как эта статья — буквы.

Для того, чтобы создать HTML страницу, следует воспользоваться любым текстовым редактором, но не текстовым процессором word, а таким как Notepad++ или Sublime 2.

Я использую 2 варианта создания HTML документа:

1 Вариант

  1. Открываю текстовый редактор Notepad++
  2. Выставляю в настройках синтаксиса HTML
  3. Пишу  HTML  код  страницы
  4. Сохраняю файл, указывая имя index.html

2 Вариант

  1. Делаю щелчок правой кнопкой мыши
  2. Выбираю «создать» → «текстовый документ»
  3. В качестве имени документа ввожу, например index
  4. В качестве расширения файл (3 символа после точки) вместо txt ввожу html
  5. Открываю файл двойным кликом или правой кнопкой мыши → "открыть с помощью"

Второй вариант хорошо показывает идею того, что HTML документ — это просто текст.

Как установить Notepad++

Рассмотрим установку текстового редактора на примере Notepad++.

Установка Notepad++

1. Скачайте последнюю версию программы официального сайта

2. Начните установку, нажимая все время «Далее»

3. Когда дойдете до шага выбора компонентов, снимите галочку с Auto-Updater

Первый шаг установки Notepad++

4. На следующем этапе поставьте галочку Create Shortcut on Desktop

Второй шаг установки Notepad++

5. Запустится установка, по окончанию которой нажимайте «Готово»

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

Создание документа

Рассмотрим создание HTML документа по 1 Варианту. Кстати, не обращайте внимание на открытый документ, который будет в редакторе после запуска. Продолжайте работу.

1. В меню программы выберите раздел «Файл»

2. В выпадающем списке выберите «Новый»

Создание документа в Notepad++

3. Откроется новый документ в новой вкладке

4. В меню программы выберите раздел «Синтаксис»  → «H» → «HTML»

Настройки подсветки синтаксиса в Notepad++

Теперь можно начинать вводить код страницы.

Введение кода страницы

Введите код, который я приводил ранее в статье:

<!doctype html>

<html>

<head>

<meta charset="utf-8"/>

<title>Заголовок документа</title>

</head>

<body>

<h1>Заголовок первого уровня</h1>

<p>Обычный абзац</p>

<!-- <p>Пример комментария в html</p> -->

</body>

</html>

1. Переключитесь в латинскую раскладку

2. Введите код, указанный в блоке выше

Вид HTML кода в редакторе Notepad++

Сохранение документа

1. В меню программы выберите раздел «Файл»

2. В выпадающем списке выберите «Сохранить»

Сохранение документа в Notepad++

3. В открывшемся окне, в поле «Имя файла» введите «index»

4. В качестве места сохранения выберите «Рабочий стол»

Имя и тип сохраняемого документа в Notepad++

Обратите внимание, что "Тип файла" уже стоит html.

4. Нажмите «Сохранить»

Поздравляю! Вы создали свою первую HTML страничку!

Предлагаю Вам открыть документ в Вашем браузере и увидеть нечто подобное:

Отображение HTML документ в браузере Firefox

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

как самому сделать сайт