Когда и взрослые (и не очень) люди впервые интересуются программированием, они сталкиваются с кучей непонятных слов и аббревиатур. Хотя в итоге все оказывается не так сложно, первое знакомство может сильно напугать, отбить желание учиться.
Посудите сами, вот какие определения HTML – простейшего языка программирования – встречаются в сети:
HTML — стандартизированный язык разметки документов во Всемирной паутине.
HTML– это язык разметки гипертекста
HTML (Hypertext Markup Language) – это язык гипертекстовой разметки.
Сложно, да? Попробуем проще.
[aligned-text align=»right»]
[/aligned-text]
HTML от CSS недалеко падает
В интернете есть сайты, на сайтах есть страницы. HTML и CSS – это языки, на которых эти страницы пишутся. HTML отвечает за текстовое наполнение и структуру, а CSS — за внешний вид. Если вы хотите красивый сайт, то использовать придется обе эти составляющие.
Но HTML все же первая ступень в этой иерархии. Во-первых, потому что HTML может существовать без CSS, а вот CSS без HTML мы не увидим. Во-вторых, потому что HTML проще освоить.
Чтобы начать работу не нужны специальные приспособления, достаточно просто открыть блокнот и вставить туда теги. Дальше браузер объединяет HTML- и CSS-код и превращает их в привычный для нас сайт. Но об этом позднее.
Откуда теги растут?
В языке HTML теги – это «буквы», из которых складывается веб-страница. Их предназначение – рассказывать браузеру как он должен интерпретировать тот или иной фрагмент кода.
Все теги заключены вот в такие символы < >. Например, тег <i> – он превращает обычный текст в курсив. Теги бывают парными и одиночными. Парные теги состоят из двух частей: открывающего тега – < > и закрывающего – </ >. Если бы в примере выше мы не поставили бы после слова «курсив» закрывающий тег, то весь текст после открывающего тега остался бы таким.
Существует несколько десятков тегов, но запоминать все необязательно. Если всерьез увлечешься программированием, то выучишь самые необходимые во время работы, а остальные всегда сможешь подсмотреть в интернете. Самые употребляемые вроде служебных <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.