HTML для самых маленьких

MSE-Helper · 10 Мар 2019

Часто, начинающий вебмастер сталкивается с проблемой настройки шаблона своего сайта из-за отсутствия соответствующих знаний. Мы подготовили краткий курс по HTML и CSS для новичков, который даст базовые знания о работе HTML страниц и позволит работать с кодом без вмешательств сторонних разработчиков.

HTML - HyperText Markup Language или язык разметки гипертекста. Из этой аббревиатуры можно сразу понять его предназначение - указывать браузеру где и какие элементы на странице будут размещены. Мы размечаем страницу, указываем, где будет расположено изображение, где текст, а где кнопка. Это основной фундамент страницы, ее каркас и краеугольный камень всех сайтов. HTML-код, по факту, является обычным текстом, который можно править в любом текстовом редакторе. Однако, код лучше редактировать в специальных редакторах, которые предоставляют множество плюшек и упрощают задачи. Пример такого редактора - Visual Studio Code.

Файлы с разметкой в большинстве случаев имеют расширение html, htm или tpl.
HTML код состоит из, так называемых, тегов. Каждый тег имеет свое предназначение и особенности. Их синтаксис достаточно прост:

HTML:

<имя_тега атрибут="значение">
   Содержимое тега</имя_тега>
<имя_тега />

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

HTML:

<img src=’img/poster.jpg’ alt=’Постер трека’ />,

а парный может содержать в себе другие теги:

HTML:

<div>
   <img src=’img/poster.jpg’ alt=’Постер трека’ />
</div>

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

HTML:

<img src=’img/poster.jpg’ alt=’Постер трека’ />

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

MSE-Helper · 10 Мар 2019

Основные HTML теги страницы

Основа страницы состоит из нескольких тегов верхнего уровня:

HTML:

<!DOCTYPE>
<html lang="ru">
    <head>
        <!-- Содержимое тега head -->
    </head>

    <body>
        <!-- Содержимое тега body -->
    </body>
</html>

<!DOCTYPE> - Указывает тип текущего документа. Необходим браузеру для корректной интерпретации страницы.

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

<html></html> - Задает начало и конец страницы, контейнер, в котором заключено все содержимое страницы. Данный тег является необязательным, но правила хорошего тона, диктуют его использование. Вложенное содержимое можно разделить на 2 части, расположенных в тегах <head> и <body>.

<head></head> - Содержит служебную информацию, такую как кодировка страницы, заголовок, meta-теги, подключение CSS и и.д.. Его содержимое не будет напрямую отображено в браузере, кроме тега <title>.

Теги, которые содержатся в этой секции называются тегами заголовка документа.

<body></body> - Интересный тег, который содержит элементы для построения страницы, другими словами, внутри него расположена вся разметка страницы.

MSE-Helper · 10 Мар 2019

HTML теги секции <head>

<title></title> - один из самых важных тегов, его содержимое определяет заголовок просматриваемой страницы. Этот заголовок можно увидеть как название вкладки браузера:

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

<meta name=”viewport” content=""> - контролирует масштаб страницы, используется для адаптации под мобильные устройства.

<meta charset="UTF-8"> - кодировка текущей страницы. Без этого тега возможны неполадки с отображением символов, так называемые “кракозябры”.

<meta name="description" content="Музыку скачать бесплатно"> - Краткое описание страницы. Данные тег оказывает существенное влияние на отображение сайта в поисковой выдаче, подробно в статье о поисковых сниппетах.

<meta name="keywords" content=”скачать, музыку, бесплатно"> - метатег, содержащий ключевые слова страницы. Он не оказывает существенного влияния на ранжирование сайта и его использование не обязательно.

<meta name="robots" content="all" /> - метатег, сообщающий поисковому роботу, как правильно сканировать и индексировать текущую страницу. Он может принимать значения:
all - страницу можно индексировать, можно переходить по ссылкам
noindex - запрещает индексировать страницу
nofollow - запрещает переход по ссылкам
noarchive - запрещает показывать ссылку на сохраненную копию
и др.

<link> - универсальный тег, служащий для подключения дополнительных данных к странице, например favicon-изображение или CSS-файл.

<link rel="icon" href="favicon.ico"> - подключение favicon-изображения к странице. Это маленьких значок, отображаемый рядом с названием сайта во вкладке браузера.

<link rel="stylesheet" href="style.css"> - подключение CSS-файла со стилями. О CSS мы поговорим в следующей статье.

Это основные элементы секции <head>, теперь перейдем непосредственно к секции <body>.

MSE-Helper · 10 Мар 2019

Теги секции <body>
Такие теги можно разделить на несколько видов:

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

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

<header></header> - Контейнер, в котором располагается “шапка” сайта или “шапка” какого-либо другого элемента. Шапка сайта - один из основных частей сайта расположенная вверху страницы, в которой обычно расположен логотип, слоган, контакты. По факту, <header> является обычным тегом <div>, только более корректным с точки зрения семантики.

<footer></footer> - Противоположный тегу <header>, определяющий, как можно догадаться из названия, - “подвал” сайта. Обычно в подвале размещается дополнительное меню, ссылки на правила и определения, контактная информация.

<main></main> - Блок, определяющий основной контент страницы. Новость, запись, пост и т.д.. Данный элемент должен быть уникальным.

<aside></aside> - Блок, имеющий второстепенное отношение к основному контенту. Например сайдбар.

<nav></nav> - Навигационно меню.

<h1></h1> - Определяет заголовок секции. Кроме <h1> также существуют теги <h2></h2>, <h3></h3>...<h6></h6> определяющие заголовки по важности, где <h1> - самый важный заголовок (например название сайта), а <h6> наименее важный.

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

HTML:

<p>Форум о создании и продвижении музыкальных сайтов <span>mse-script.ru</span></p>

MSE-Helper · 10 Мар 2019

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

<a href=””></a> - Ссылка на другую страницу. Один из самых важных элементов. Имеет обязательный атрибут href, в котором указывается URL куда должна вести ссылка. Может иметь атрибут name=””, в котором указывается другой элемент, так называемый якорь. При переходе по такому якорю, браузер прокрутит страницу до указанного элемента.

HTML:

<p>Форум о создании и продвижении музыкальных сайтов <a href=”https://mse-script.ru/”>mse-script.ru</a></p>

<strong></strong> - Используется для акцентирования текста. Заключенный в этот тег текст приобретает жирное начертание.

<em></em> - Как и <strong> используется для акцентирования текста, в браузере выделяется курсивом.

<br /> - Создает разрыв строки. Следующий за ним текст начнется с новой строки

<img src="" /> - Изображение. Требует обязательный атрибут src="", кторый содержит путь до нужного изображения. Хорошим тоном является использование атрибута alt="" с текстовым описанием изображения. Может быть вложенным в ссылку <a>.

<span></span> - универсальный тег, создающий контейнер внутри строки. Может использоваться для стилизации отдельного фрагмента или взаимодействия с пользователем посредством JS.

MSE-Helper · 10 Мар 2019

Списки
<ul></ul> - Маркированный список. Каждый элемент маркированного списка начинается с маркера.

<ol></ol> - Нумерованный список. Работает по принципу маркированного списка, но вместо маркеров выводится порядковый номер элемента.

<li></li> - Элемент списка, должен быть вложен в тег списка. Количество элементов не ограничено.

HTML:

<ul>
   <li>Элемент списка 1</li>
   <li>Элемент списка 2</li>
   <li>Элемент списка ...</li>
</ul>

MSE-Helper · 10 Мар 2019

Теги для фреймов
<iframe> - тег, позволяющий вставить на сайт “внешний” контент. Иными словами, это контейнер в который можно вставить какой-то документ. В качестве примера можно рассмотреть плеер на киносайте (думаю все смотрят фильмы в онлайн кинотеатрах). Для вставки плеера в большинстве случаев используется фрейм.

Кроме <iframe> можно встретить теги <video> и <audio>, которые используются для вставки видео и аудио соответственно. С помощью тега <audio> пользователи слушают музыку на музыкальных сайтах.

Мы рассмотрели самые популярные HTML теги, с которыми вы будете встречаться чаще всего. Существует еще множество других тегов, таких как <table>, <dd> и другие. При желании, ознакомится с ними вы можете в любом html-справочнике, например htmlbook.ru.
В следующий раз поговорим о CSS, так называемых каскадных таблиц стилей, которые сделают разметку страниц красочной и привлекательной.

Nahimic · 10 Мар 2019

Отличное название темы. Юнных веб разработчиков готовим в пираты ???

Nahimic · 19 Мар 2019

Блин видос посмотрел, привет соседу, нафиг он там молотком стучит =)

MSE-Helper · 19 Мар 2019

Nahimic написал(а):
Блин видос посмотрел, привет соседу, нафиг он там молотком стучит =)

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

HTML для самых маленьких

MSE-Helper

Бывалый

MSE-Helper

Бывалый

MSE-Helper

Бывалый

MSE-Helper

Бывалый

MSE-Helper

Бывалый

MSE-Helper

Бывалый

MSE-Helper

Бывалый

Nahimic

Эксперт

Nahimic

Эксперт

MSE-Helper

Бывалый

Похожие темы