HTML — это язык гипертекстовой разметки, с помощью которого
верстальщики непосредственно создают структуру web-страниц.
HTML неспроста назван языком разметки. Метки, или же тэги, которые заключены в угловые скобки, формируют те элементы, из которых и состоит код HTML. В большинстве своем, элементы данного языка имеют открывающий и закрывающий тэг.
Как показано на примере HTML-кода выше, он всегда начинается с <!DOCTYPE html>. Для браузера появление этого элемента указывает на то, что ему следует отображать HTML-структуру. Это самый базовый исходный код web-страницы. В открывающем и закрывающем тэге <html></html> располагаются 2 основных тэга нашей web-страницы: <head> и <body>
Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Единственное, что отображается на странице внутри данного тега - это тег <title>, который устанавливает заголовок web-страницы.
Элемент <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.
Тегов у HTML достаточно много, всех их можно посмотреть в справочнике.
CSS (Cascading Style Sheets) — это код, который используется для стилизации веб-страницы. Для придания ей приемлемого вида.
Если объяснять простыми словами, то HTML - тело т.к. формирует структуру web-страницы , а CSS - одежда, т.к. определяет ее внешний вид.
Также важно понимать, что HTML и CSS - не являются языками программирования. Но CSS в свою очередь не является также и языком разметки, CSS - язык таблицы стилей. Это означает, что он позволяет применять стили выборочно к элементам в документах HTML.
Примеры страниц со стилями и без:
Как и HTML, CSS обладает определенным набором правил:
- Селектор (Selector) - Имя HTML элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор.
- Объявление (Declaration) - Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать.
- Свойства (Properties) - Способы, которыми вы можете стилизовать определённый HTML элемент. В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.
- Значение свойства (Property value) - Справа от свойства, после двоеточия, у нас есть значение свойства, которое выбирает одно из множества возможных признаков для данного свойства (существует множество значений color, помимо red).
Все доступные стили вы сможете найти в справочнике CSS.