Что такое HTML и CSS простыми словами
Абсолютно каждый сайт, который вы находите через поисковики и открываете в браузере, основан на разметке HTML и стилях CSS. Увидеть что такое html и css можно на любом сайте, для этого достаточно нажать комбинацию клавиш CTRL + U. В основном вы увидите именно HTML разметку, которая отвечает за структуру всех блоков и данных сайта. CSS не всегда виден сразу в исходном коде который вы увидите, потому как чаще всего весь код стилей подключается отдельными файлами с расширением css, например style.css. Для того чтоб начать разрабатывать web сайты, необходимо понять все основы html и css. В данной статье я дам вам понять, что такое html и css и что нужно для того чтоб начать изучать их.
Что такое HTML
HTML (Hyper Text Markup Language) — это язык разметки который обрабатывается вашим браузером и выдает всю необходимую структуру сайта которая была размечена этим языком.
Простыми словами: HTML — это каркас сайта. Этот каркас определяет где будет находиться тот или иной текст, заголовок, картинка, таблица и более глобальные вещи такие как меню, форма авторизации, верх и низ сайта и т.д. и т.п.
Пример HTML кода:
В примере кода видно что на строчке 1 виден код говорящий о типе документа (doctype html). Далее, открывается тег «html» говорящий что в этом теге будет вся информация о странице. Далее строка 3, на ней открывается тег «head» говорящий о заголовках страницы которые не будут видны либо не так важны для глаз пользователя посетившего страницу. Именно там будут подключаться данные для поисковых систем, различные скрипты и стили и т.д. Например, в строке 4 есть тег «title» в который прописывается заголовок, именно этот заголовок вы видите в выдаче яндекс или google когда что то ищите.
Посмотрев разметку дальше, вы увидите тег «body» — это тело страницы, именно в этом теге прописывается сама верстка страницы которую будут видеть все кто посещает эту страницу. В данном примере есть заголовок страницы H1 и абзац P, в которых прописывается сам текст который возможно прочитать при переходе на эту страницу.
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<h1>Заголовок H1 на странице!</h1>
<p>Основной текст страницы в абзаце P.</p>
</body>
</html>
Для того чтоб этот код заработал, нужно создать файл с расширением «html», например, «index.html». Для создания подобных файлов вы можете скачать бесплатный редактор, например, Visual Studio Code или Notepad++.
Что такое CSS
CSS (Cascading Style Sheets) — это язык стилей, он в свою очередь дает внешний вид всем размеченным html тегам описанным выше. Например, с помощью CSS можно задать размер, цвет и расположение текста. А также, помимо текста можно проводить различные манипуляции с блоками, картинками, делать всплывающие подсказки и окна, анимацию, поворачивать объекты и т.д. и т.п.
Как описаны выше, html это каркас сайта который создает основу, ну а CSS в свою очередь задает внешний вид этого каркаса. Именно тот внешний вид который вам будет нужен, проще говоря, что вы пропишите в CSS то и увидят посетители вашего сайта.
Пример CSS кода:
Изначально пишется тег которому нужно задать тот или иной стиль, либо пишется класс который указан в теге которому нужно задать стиль, либо идентификатор. Класс в теге прописывается так: «<p class="myClass"></p>». Таким же образом прописывается идентификатор, только вместо class= прописываем id=. Классы могут повторяться неограниченное количество раз и в разных тегах, но идентификатор повторяться не может, потому как он уникален.
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
text-align: center;
}
В данном CSS коде мы задали для общего тела страницы, то есть, тега BODY фон и шрифт текста. А также, для заголовка H1 мы задали цвет и расположение по центру.
Как HTML и CSS работают вместе
Совместная работа HTML и CSS возможна основными двумя способами:
- В заголовке страницы между тегами HEAD прописываем тег STYLE и в него уже пишем CSS стили.
- В заголовке страницы между тегами HEAD прописываем подключение файла стилей <link rel="stylesheet" href="style.css" type="text/css">
Но возможно еще подключить стили в сам тег, воспользовавшись атрибутом тега style="color: blue;".
<!DOCTYPE html>
<html>
<head>
<title>Пример HTML и CSS</title>
<style>
h1 { color: green; }
p { font-size: 18px; }
</style>
</head>
<body>
<h1>Это заголовок</h1>
<p>А это абзац текста с CSS-оформлением.</p>
</body>
</html>
Почему важно начать с изучения HTML и CSS
- HTML и CSS — это основа WEB разработки.
- Без HTML и CSS невозможно профессиональное создание сайтов.
- Выучить на хорошем уровне HTML и CSS возможно за 1-3 месяца.
- Даже если вы не захотите стать программистом, HTML и CSS будут всегда полезны верстальщикам, Front-end разработчикам, SMM специалистам и текстовым блогерам.
Теперь вы имеете представление, что такое html и css, и можете уже попробовать сделать свою первую страницу. Даже просто создав файл html и скопировав туда весь код увиденный в этой статье, вы поймете как все работает и сможете внести свои правки в этот код. Если вас заинтересовали технологии web разработки, то вы всегда сможете найти на нашем сайте что то полезное для изучения..
