Основы html: Основы HTML и CSS — Тренажёр «Знакомство с фронтендом» — HTML Academy

Конспект «Основы HTML и CSS» — Основы HTML и CSS — HTML Academy

HTML

HTML расшифровывается как «Hypertext Markup Language», то есть «язык гипертекстовой разметки».

Язык HTML отвечает за структуру и содержание страницы. HTML состоит из тегов, а тег состоит из имени, заключённого между знаками «меньше» и «больше». Примеры тегов: <h2&gt, <p&gt, <ul&gt.

Парные теги

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

<h2>Текст заголовка</h2>

В закрывающей части парных тегов перед именем ставится символ / («слэш»).

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

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

У вложенных тегов всегда нужно следить за правильным порядком закрытия. Вложенный тег не может закрываться позже родительского:

<ul><li>Элемент списка</ul></li> <!-- Плохо  -->
<ul><li>Элемент списка</li></ul> <!-- Хорошо -->

Не все теги можно вкладывать в другие теги, например, тег <h2> нельзя вкладывать в <p>.

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

Существуют не только парные, но и одиночные теги. Например, тег <img> позволяет добавить картинку в разметку.

Сам по себе <img> не имеет смысла. Чтобы этот тег был действительно полезен, необходимо написать внутри него адрес, ведущий к картинке. Делается это с помощью атрибута src:

<img src="keks.png">

У тега может быть несколько атрибутов. В этом случае они пишутся через пробел:

<тег атрибут1="значение1" атрибут2="значение2">

Например, картинке при желании можно задать размеры:

<img src="keks.png">

Комментарии

Код, заключённый между символами <!-- и -->, работать не будет. Если эти символы удалить, то код заработает, это называется «раскомментировать». С помощью комментариев обычно временно отключают какой-то код или оставляют подсказки и разъяснения.

<!-- Это комментарий в HTML -->

CSS

CSS расшифровывается как «Cascading Style Sheets», то есть «каскадные таблицы стилей».

Язык CSS отвечает за внешний вид страницы.

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

свойство: значение;

Например:

color: red;
padding: 10px;

Стили к тегам добавляются чаще всего при помощи атрибута class.

Например, если мы хотим, чтобы определённые стили, описанные, допустим, в классе feature-kitten, применились к тегу <p>, то в разметке напишем так:

<p>…</p> 
CSS-правила
 
Можно сказать, что CSS-правило — это группа свойств и их значений, которая целиком применяется к тем тегам, на которые указывает селектор.
  
И выглядит это так:
селектор {
  свойство1: значение;
  свойство2: значение;
}
Задавать стили можно не только с помощью атрибута class, но и по тегам. Селектор указывает, к каким тегам применятся свойства из CSS-правила. Селекторы по тегам работают проще всего: они выбирают все теги с подходящим именем.
p { color: red; }
В примере селектором является p, и он выбирает все теги с именем p (то есть теги <p>), а теги с другим именем, например 
 h2, не выбирает.
Когда же стилизация задаётся по классам, то стили применяются только к тегам с такими классами.
.название_класса {
  свойство: значение;
}
Миксование классов
У HTML-элемента может быть сколько угодно классов, в этом случае они перечисляются в атрибуте class через пробел, например:
<li>Товар</li>
<li>Товар, а ещё хит продаж</li>
<li>Товар, хит продаж и со ски-и-идкой!</li>
Обычно миксование используют так: в один класс выносят общее оформление, а в дополнительных классах описывают его модификации.
 
Комментарии
В CSS тоже существуют комментарии, их отличие от HTML-комментариев в том, что код или подсказки пишутся между символами /* и */.

 Продолжить
Основы HTML
Главная / Редактирование сайта / Что такое расширенный режим? / Что такое HTML и CSS? / Основы HTML
Итак, как мы уже упоминали, язык HTML необходим для описания структуры страницы.
Именно с помощью HTML-тегов браузеру отдается информация о том, что именно на странице будет заголовком первого уровня, что абзацем, что подзаголовком, где будет расположена ссылка, куда ссылка будет вести и т.д. 
К примеру:
 
Если Вам нужно выделить какой-либо текст на странице и сделать его заголовком первого уровня, Вам необходимо в начале заголовка поставить открывающий тег <h2> и в конце закрывающий тег </h2> (об открывающих и закрывающих тегам мы поговорим чуть ниже). 
Подобным же образом можно выделять подзаголовки других уровней (от <h3> до <h6>).
Чтобы выделить абзац, необходимо в HTML-документе заключить весь текст абзаца в теги <p> и </p> соответственно (открывающий и закрывающий теги).
Чтобы сделать перенос строки, достаточно просто поставить тег <br> там, где он необходим.
 
Подобным образом, зная необходимые Вам теги и правила их использования, Вы сможете формировать HTML-документы с описанием содержимого страниц.
Теперь перейдем к более детальному описанию нюансов работы с HTML.
Структура страницы
Любая страница на сайте — это текстовый файл с расширением .html.
Именно внутри этого файла лежит все содержимое страницы — тексты, теги и т.д.
Внутри любого такого файла должны обязательно присутствовать несколько обязательных тегов, таких как:
<!DOCTYPE html> в начале документа.
<html> в начале и </html> в конце документа — между этими двумя тегами должно находиться все содержимое страницы со всеми тегами (все что за пределами будет проигнорировано).
 
<head> в начале и </head> в конце перечисления служебных тегов.
<title> — служебный тег, им выделяется название страницы (им будет подписана вкладка в браузере).
<meta> — служебный тег, в нем прописывается кодировка страницы (обычно это utf-8).
<body> в начале и </body> в конце содержимого страницы — между этими двумя тегами уже приводится контент страницы, тексты, теги абзацев, заголовков и т.д.
Чтобы было нагляднее, мы приводим пример сформированного подобным образом документа:
<!DOCTYPE html>
 
<html>
<head>
<meta charset=»utf-8″>
<title>Это служебный заголовок</title>
</head>
<body>
Тут должно быть содержимое страницы 
</body>
</html>
Атрибуты и теги
Выше мы рассмотрели примерную структуру страницы сайта и обязательные теги, такие как <html>, <head> и <body>.
Теперь рассмотрим теги и атрибуты, которые могут Вам потребоваться при наполнении страницы (в частности, для содержимого внутри тега <body>).
 
Для начала расскажем, что такое теги и что такое атрибуты.
Тег — это именно то, что заключено в угловые скобки, например <b>. Чаще всего теги существуют в паре — открывающий и закрывающий. Открывающий тег ставится в начале элемента, а закрывающий, соответственно, в конце. Таким образом, мы очерчиваем границы действия тега. Например, если Вы хотите выделить текст жирным, поставьте в начале текста открывающий тег <b>, а в конце </b> — весь текст между <b> и </b> будет выделен жирным шрифтом. Некоторые теги не нуждаются в парном закрывающем теге (например, уже упоминавшийся тег <br> для переноса строки — его достаточно просто вставить в нужное место).
 
Атрибут — дополнительные свойства, прописываемые внутри тега, чтобы присвоить элементу (тексту, картинке и т.д.) какую-либо информацию. Чтобы было понятнее, приведем пример со ссылкой: <a href=»https://megagroup.ru»>Наш сайт</a>. Как видите, тут представлена ссылка на сайт Мегагрупп.ру. Чтобы вставить ссылку, мы обрамили сам текст, который будет выводиться в виде ссылки на сайте (он же анкор) в теги <a> и </a> — именно эти теги используются для вставки ссылки. Но чтобы указать URL (адресс ссылки), нам необходим атрибут href, в котором она и указывается в виде href=»тут вставляется ссылка». Изучая HTML, Вы в дальнейшем повстречаете и другие популярные атрибуты, такие как id, class, src и т.д.
 
Основные теги
Теперь, когда мы разобрались, что такое теги и что такое атрибуты, приведем для примера наиболее популярные и часто используемые теги.
Предполагают работу с открывающим и закрывающим тегами:
<p> — тег для обозначения абзаца в тексте. Весь абзац обрамляется в <p> и </p>
<h2>, <h3>, <h4>, <h5>, <h5>, <h6> — теги для создания заголовков разного уровня в тексте.
   В заголовке h2 рекомендуется прописывать основной заголовок всей страницы,  в h3 — название блоков страницы, в h4 — название подблоков и т.д. 
<b> — тег для выделения текста жирным шрифтом.
<i> — тег для выделения текста курсивом.
<a> — тег для вставки ссылки. Как уже упоминалось выше, обладает атрибутом href для указания самой ссылки. Тег целиком будет выглядеть так: <a href=»http://site.ru»>наш сайт</a>
Самозакрывающиеся теги (не требуют закрывающегося тега):
<br> — перенос строки.
<hr> — тег для вставки горизонтальной линии в текст.
<img> — тег для вставки картинки в текст. Обладает атрибутами src (для вставки ссылки на изображения) и alt (для вставки альтернативного текста). Таким образом, тег целиком выглядит как <img src=»URL картинки» alt=»альтернативный текст»>.
 
Кроме того, Вам может потребоваться тег для вставки комментария в HTML, такой текст будет проигнорирован браузером — на экране он будет не виден, но останется в исходном коде страницы. Чтобы вставить комментарий, заключить текст комментария между <!— и —>, у Вас должно получиться следующее:
<!— 
Тут текст комментария
 —>
Это лишь некоторые из возможных тегов.
С более полным перечнем Вы можете ознакомиться в подробном справочнике по ссылке.
Списки в HTML
Отдельное внимание хотелось бы уделить созданию маркированных и нумерованных списков в HTML-документах.
Для создания нумерованного списка Вам понадобятся теги <ol> (в начале и закрывающий </ol> в конце списка) и <li> (в начале и закрывающий </li> в конце каждого пункта). Таким образом у Вас должен получиться список примерно следующего вида.
<ol>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ol>
Для создания же маркированного списка Вам понадобятся теги <ul> и <li> соответственно.
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
Таблицы в HTML
Основным тегом в таблице будет <table>. Именно между <table> и </table> будет заключена вся информация о ячейках.
Следующим тегом, будет тег <tr>. Между <tr> и </tr> будет лежать информация о рядах таблицы.
Внутри каждого ряда должны быть теги <td>. Соответственно, между <td> и </td> необходимо указывать содержимое ячеек ряда.
Таким образом, в итоге таблица в HTML будет выглядеть примерно так:
<table border=»1″>
<tr>
<td>Ячейка 1 из ряда 1</td>
<td>Ячейка 2 из ряда 1</td>
</tr>
<tr>
<td>Ячейка 1 из ряда 2</td>
<td>Ячейка 2 из ряда 2</td>
</tr>
</table>
Как можно заметить, в самом начале у тега <table> есть атрибут border — в нем указывается толщина рамки в пикселах.
Помимо атрибута border, в таблицах может использоваться множество других тегов, например, для цвета фона таблицы (bgcolor), цвета рамки (bordercolor), отступа от рамки (cellpadding), расстояния между ячейками (cellspacing) и т. д.
С более подробной информацией по работе с таблицами и их атрибутами, Вы можете ознакомиться по ссылке.
Дополнительная информация
В данной инструкции мы привели лишь основную информацию о том, как работает HTML, что он из себя представляет, как с ним работать.
Само собой, для того чтобы создавать полноценные шаблоны страниц, наполнять их контентом и т.д. Вам понадобятся более обширные познания в этом языке разметки.
Попробовать самостоятельно изучить HTML Вы можете, например, на таких сайтах, как:
http://htmlbook.ru/
https://html5book.ru/
https://htmlacademy.ru/
Была ли статья вам полезна?
Да
Нет 
Укажите, пожалуйста, почему?
Рекомендации не помогли
Нет ответа на мой вопрос
Содержание статьи не соответствует заголовку
Другая причина
Комментарий
Читайте также
 Основы HTML (с примерами) 
 В этом руководстве вы узнаете об основах HTML и их реализации с помощью примеров.
 HTML (язык гипертекстовой разметки) — это язык разметки, используемый для структурирования и организации содержимого на веб-странице. Он использует различные теги для определения различных элементов на странице, таких как заголовки, абзацы и ссылки.
 Иерархия HTML 
 Элементы HTML являются иерархическими, что означает, что они могут быть вложены друг в друга для создания древовидной структуры контента на веб-странице.
 Эта иерархическая структура называется DOM (объектная модель документа) и используется веб-браузером для отображения веб-страницы. Например,
 

    <голова>
        
    
    <тело>
         
Привет, мир!
 
        
Это моя первая веб-страница.
        
Он содержит
             главный заголовок и  абзац .
        
    
 
  Вывод браузера 
 В этом примере элемент  html  является корневым элементом иерархии и содержит два дочерних элемента:  head  и  body  . Элемент  head , в свою очередь, содержит дочерний элемент, называемый  title , а элемент  body  содержит дочерние элементы:  h2  и  p .
 Давайте посмотрим, что означают различные элементы, использованные в приведенном выше примере.
   : корневой элемент DOM, содержащий все остальные элементы в коде
.
   : содержит метаданные о веб-странице, такие как заголовок и любые связанные файлы CSS или JavaScript
 
    
    <тело>
         
Моя первая HTML-страница
 
        
Привет, мир!
    
 

Содержание

Справочное руководство по основам HTML для начинающих и задний карман

Учебное пособие 23 июля 2019 г.

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

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

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

• Что такое HTML?
  • Тип документа
  • Теги
  • Разделители
  • Атрибуты
  • Текст на дисплее
  • Введение в CSS
• Справочник по заднему карману

Электронная почта HTML имеет свой собственный набор нюансов, чем HTML для Интернета. Итак, для начала мы рассмотрим базовые основы веб-HTML, а затем перейдем к HTML для электронной почты в следующем посте.

Что такое HTML?

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

Или, другими словами, это организация информации для демонстрации.

Основы HTML

Давайте начнем с самого начала (очень хорошее место для начала).

Что такое тип документа?

В самом верху любого HTML-кода электронной почты вы увидите:

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

«Тип документа» относится к DTD, определению типа документа, чтобы сообщить браузеру дисплея правила языка разметки, чтобы он точно отображал содержимое для зрителя.

Теги

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


Контент, контент, контент.


Вы можете иметь несколько открытых тегов одновременно, но они должны быть закрыты в том порядке, в котором они были открыты:

 
<дел>