Что такое HTML и CSS? Объясняем подросткам ⋆ MAXIMUM Блог

Когда и взрослые (и не очень) люди впервые интересуются программированием, они сталкиваются с кучей непонятных слов и аббревиатур. Хотя в итоге все оказывается не так сложно, первое знакомство может сильно напугать, отбить желание учиться.

Посудите сами, вот какие определения HTML – простейшего языка программирования – встречаются в сети:

HTML — стандартизированный язык разметки документов во Всемирной паутине.
HTML– это язык разметки гипертекста
HTML (Hypertext Markup Language) – это язык гипертекстовой разметки.

Сложно, да? Попробуем проще.

[aligned-text align=”right”]

что такое html и css?

[/aligned-text]

HTML от CSS недалеко падает

В интернете есть сайты, на сайтах есть страницы. HTML и CSS – это языки, на которых эти страницы пишутся. HTML отвечает за текстовое наполнение и структуру, а CSS — за внешний вид. Если вы хотите красивый сайт, то использовать придется обе эти составляющие.

Но HTML все же первая ступень в этой иерархии. Во-первых, потому что HTML может существовать без CSS, а вот CSS без HTML мы не увидим. Во-вторых, потому что HTML проще освоить.

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

Откуда теги растут?

В языке HTML теги – это «буквы», из которых складывается веб-страница. Их предназначение – рассказывать браузеру как он должен интерпретировать тот или иной фрагмент кода.

Все теги заключены вот в такие символы < >. Например, тег <i> – он превращает обычный текст в курсив. Теги бывают парными и одиночными. Парные теги состоят из двух частей: открывающего тега – < > и закрывающего – </ >. Если бы в примере выше мы не поставили бы после слова «курсив» закрывающий тег, то весь текст после открывающего тега остался бы таким.

что такое html и css?

Существует несколько десятков тегов, но запоминать все необязательно. Если всерьез увлечешься программированием, то выучишь самые необходимые во время работы, а остальные всегда сможешь подсмотреть в интернете. Самые употребляемые вроде служебных <head> и <title> или текстовых <h1> и <p> запомнишь в любом случае.

На курсе «Создание сайта с нуля» мы рассказываем, как быстро и просто запомнить максимальное число тегов. Приходи!

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

1. Открой блокнот или, если у тебя Mac, программу вроде Sublime Text;
2. Вставь туда этот фрагмент:

<html>
<head>
<title>Моя первая веб-страница</title>
</head>
<body>
<h1>Мой первый сайт</h1>
<p>Это было просто!</p>
</body>
</html>

3. Сохрани документ с расширением HTML;
4. Нажми на него правой кнопкой мыши и открой с помощью браузера, которым пользуешься.

Получилось? Пиши в комментариях!

Мал CSS, да дорог

CSS – это язык, который описывает внешний вид документа. Чаще всего он сочетается с HTML, но может использоваться и с другими языками программирования.

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

Свойства заключены внутри селекторов. Они подсказывают браузеру как именно мы хотим оформить выделенные объекты.

Выглядят селекторы и свойства внутри кода так:

селектор {
свойство 1: значение;
}

h1 {
color: #000000;
}

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

Осваивать CSS нужно после или во время изучения основ HTML. Но лучше всего знакомиться с обоими понятиями на практике. Попробовать себя в роли начинающих программистов и создать свой сайт можно на наших курсах IT.