html, css .1
Основы HTML, CSS, JS: бесплатный вводный курс
продолжение telegra.ph/html-css-2-07-21
Темы курса
1. Первый код
2. Что такое HTML и CSS
1.Что такое HTML и CSS, или первые шаги в настоящей вёрстке
2.Теги HTML
3.Как устроены HTML-элементы
4.Заголовки
5.Абзац
6.Ссылки
7.Необязательные атрибуты
8.Изображения
9.Блоки
10.Структура HTML-документа
11.Метаданные
12.Введение в стили
13.Несколько стилей
14.Правила CSS
15.Связь CSS и HTML. Тег style
16.HTML отдельно, CSS отдельно
17.Связь CSS и HTML. CSS-файл
18.Высота строки
19.Отступы
20.Заключение
1. Первый код
HTML
Начнём с HTML.
Доступный в интернете документ называется веб-страница. Она состоит из блоков текста, картинок, ссылок и других элементов. В нужном порядке их расставляет разметка — код на языке HTML.
HTML расшифровывается как Hyper Text Markup Language (англ. «язык разметки гипертекста»). Обычный текст, написанный на любом из человеческих языков, разметка превращает в гипертекст (в буквальном переводе «больше, чем текст») — с устойчивым форматированием и работающими ссылками.
Это каркас видимой части сайта. Конструкции HTML (теги) можно узнать по угловым скобкам. Теги несут информацию о роли каждого элемента. По ним браузер отличает, например, простой текст от надписи на кнопке, которую пользователь может нажать.
Теперь теории достаточно, чтобы выполнить первые практические задания.
Перейти к заданию
CSS
Если HTML сообщает браузеру о содержании веб-страницы, то CSS — о том, как её элементы выглядят и где располагаются. Стиль — это внешний вид элемента, а CSS — язык описания этого стиля.
Например, вы хотите поменять цвет текста и расположить его по центру экрана. Всё это можно сделать на языке CSS.
К вашему HTML-коду мы добавили стили для большинства элементов. Поисковая строка уже преобразилась, теперь вы сделаете финальные штрихи на CSS.
Перейти к заданию
JavaScript
CSS позволил сделать форму поиска визуально привлекательной. Только она пока не работает. Включить её может JavaScript. Это он вдыхает жизнь в элементы веб-страниц, управляя их поведением.
Код на JavaScript называется «скрипт», что в переводе значит «сценарий». Когда скрипт запускается, браузер совершает операции, прописанные в определённом сценарии.
Во вкладке script.js мы уже создали заготовку сценария поведения поисковой строки. Самую приятную часть работы оставили вам.
Перейти к заданию
2. Что такое HTML и CSS
1.Что такое HTML и CSS, или первые шаги в настоящей вёрстке
4 минуты
2.Теги HTML
5 минут
3.Как устроены HTML-элементы
5 минут
4.Заголовки
6 минут
5.Абзац
5 минут
6.Ссылки
6 минут
7.Необязательные атрибуты
5 минут
8.Изображения
10 минут
9.Блоки
10 минут
10.Структура HTML-документа
10 минут
11.Метаданные
14 минут
12.Введение в стили
10 минут
13.Несколько стилей
15 минут
14.Правила CSS
5 минут
15.Связь CSS и HTML. Тег style
7 минут
16.HTML отдельно, CSS отдельно
15 минут
17.Связь CSS и HTML. CSS-файл
20 минут
18.Высота строки
10 минут
19.Отступы
6 минут
20.Заключение
2 минуты
Теги HTML
Каждый сайт — конструктор из элементов. За их создание отвечает язык HTML. Любая веб-страница содержит код на этом языке и сохраняется в HTML-файле. Именно его открывают и смотрят в браузере. HTML расшифровывается как Hyper Text Markup Language (англ. «язык гипертекстовой разметки»).
Разметка состоит в том, что блоки текста заключают в управляющие конструкции — теги (от англ. tag, «бирка»). Такие «бирки» указывают браузеру, как отобразить то, что в них «обёрнуто».
Перейти к заданию
Как устроены HTML-элементы
Обычно HTML-элемент состоит из тегов и размещённого между ними содержания — «контента».
У любого тега HTML есть имя и угловые скобки. Например, тег самого главного заголовка носит имя h1 (от англ. heading 1, «заголовок-1»).
Теги расставляются как дорожные знаки с названием города. На въезде в город знак объявляет его имя, а на выезде перечеркнутое имя сообщает, что город закончился. Так и в начале HTML-элемента ставят открывающий тег с именем тега, а в конце — закрывающий тег, где имя будто перечеркнуто косой чертой. Созданный элемент называют по имени тега.
Перейти к заданию
Заголовки
В HTML существует шесть тегов заголовков разного калибра: h1, h2, h3, h4, h5, h6. Идея заимствована из книг, где есть название на форзаце (h1), заголовки частей (h2), разделов (h3) и более мелких глав (h4, h5, h6). Заголовок первого уровня — самый крупный, шестого — мельче простого текста. Если они правильно распределены в тексте по важности, поисковым системам легче анализировать сайт, а пользователям проще его читать.
Перейти к заданию
Абзац
Основная часть текста на сайте состоит из абзацев. Они размечаются специальным тегом p (от англ. paragraph, «абзац»). Вот какой пример создатель языка HTML Тим Бернерс-Ли приводил в первом руководстве для разработчиков:
Скопировать код HTML <p>The quick brown fox jumps over the lazy dog. In Hertford, Hereford and Hampshire, hurricanes hardly happen.</p> <p>This is a test paragraph. It is separated from the previous one by a P paragraph mark.</p>
Перейти к заданию
Ссылки
Всемирную паутину и вашу будущую профессию создал тег <a>. Он добавляет ссылки, превращая текст веб-страницы в гипертекст, то есть «больше, чем текст».
Имя a происходит от слова anchor, «якорь». Контент между тегами <a> и </a> — гиперссылка — та часть текста, где ссылка «бросает якорь», крепится. Если ресурс, адрес которого прописан в гиперссылке, существует, клик по ней открывает этот ресурс.
Для дополнительных сведений у тегов есть атрибуты (по-латыни «признаки»). Так, адрес хранится в атрибуте с именем href (от англ. hypertext reference, «гипертекстовая ссылка»).
Имя атрибута говорит браузеру, какой признак нужно поменять, а значение — каким этот признак должен стать. Значение атрибута href представляет собой адрес ресурса, на который можно перейти.
Как устроена гиперссылка, ведущая на сайт ya.ru
Важное об атрибутах
- Атрибуты присутствуют в любых тегах там, где нужна дополнительная информация.
- Атрибут встраивается в открывающий тег.
- Cначала пишется имя атрибута. Например, href.
- За именем следует знак равенства и значение атрибута в кавычках
href="https://ya.ru". - Вместо двойных кавычек можно использовать одинарные
'https://ya.ru'. - Если значение атрибута не содержит пробелов, кавычками можно пренебречь
href=https://ya.ru. Несмотря на это, мы рекомендуем размечать все атрибуты одинаково (только двойными или только одинарными кавычками — на ваш выбор).
Перейти к заданию
Необязательные атрибуты
Атрибуты бывают необязательными.
Помимо непременного href, тег a может иметь необязательный атрибут target(англ. target, «мишень»). Он «нацеливает» браузер, указывая вкладку, где нужно открыть страницу, на которую ведёт ссылка. Без атрибута target она откроется в текущей вкладке.
Посмотрите, как это выглядит в коде:
Скопировать код HTML <a href="http://info.cern.ch" target="_blank">Сайт о первом веб-сайте</a>
Если добавлен атрибут target со значением “_blank”(от англ. blank, «чистый»), то другая страница будет показана в новой, пустой вкладке. Так лучше поступать со ссылками на внешние ресурсы. Тогда ваша страница останется открытой в браузере пользователя, и вы не потеряете трафик.
Перейти к заданию
Изображения
Тег добавления картинки img (от англ. image, «изображение») устроен приблизительно как тег ссылки. С той разницей, что путь к картинке указан атрибутом src (от англ. source, «источник»). Тег img особенный: он одинарный. У него нет закрывающего, потому что нет смысла говорить браузеру, где заканчивается картинка — она и так имеет определённые размеры.
У тега img есть ещё атрибут alt (от англ. alternate, «заместитель»). Его значение — текст, который пользователь видит, когда картинка по разным причинам не загружается.
Скопировать код HTML <img src="desktop/image.jpg" alt="здесь должна быть картинка, но что-то пошло не так">
Хотя по стандартам языка HTML это атрибут обязательный, <img> срабатывает и без него.
Перейти к заданию
Блоки
Веб-страница внешне делится по смыслу на блоки из HTML-элементов. Например, новость на сайте представляет собой абзац со ссылкой. Чтобы собрать несколько элементов в общий блок, их нужно отделить от остального контента. Это делается универсальным тегом div (от англ. division, «разделение»).
Любой элемент с открывающим и закрывающим тегами в HTML устроен как коробка. Особенность div в том, что это пустая коробка с особой функцией — вмещать в себя. Без содержимого он ничего собой не представляет, и часто пользователь может не увидеть его физически. Но div объединяет элементы, оказавшиеся внутри него.
Как дом из кирпичей, страница складывается из блоков div. Это необходимый элемент при разработке сайта на языке HTML.
Важно!
Когда вы вкладываете один элемент внутрь другого, то вложенный называется дочерним, а внешний — родительским. Код дочернего элемента нужно сдвигать на одну табуляцию правее кода родителя. Много спорят, отбивать ли табуляцию клавишей Tab или пробелами. Делайте это как хотите, только делайте. Когда ваш код вырастет до сотен строк, вы сразу увидите разницу: читать код с такой разметкой намного проще, а исправлять — быстрее.
Перейти к заданию
Структура HTML документа
Встречая на улице людей, мы считываем видимое — одежду, цвет глаз, улыбку. Но нам неизвестно, как зовут прохожих и о чём они думают. Назовём внешнее телом (body, от англ. «тело»), а скрытое — тем, что в голове (head, от англ. «голова»). Происходящее в голове определяет внешний вид.
Так устроена любая веб-страница: есть видимый контент, на который влияет скрытая дополнительная информация — заголовок страницы, подключаемые файлы и шрифты, кодировка. Всё это собирается в элементе head. Пользователю видно только содержимое элемента body.
Важно!
Правила организации структуры страницы:
- head идет перед body, body идет после head.
- Cтроительные теги (h1, p, a, div) не должны попадать в head.
- head и body находятся внутри общего элемента html.
- Элементу html всегда предшествует декларация
<!DOCTYPE html>. Она сообщает браузеру, что этот файл размечен на языке HTML .
Перейти к заданию
Метаданные
В первую очередь элемент head содержит заголовок веб-страницы — текст, который попадает в название вкладки браузера, поисковые результаты и закладки. Он заключается в теги <title></title>.
Другие важные сведения заключены внутри метатегов. Это теги с именем meta, что по-гречески значит «о себе».
Метаданные — это данные о данных. В headобязательно нужен одиночный метатег <meta charset="UTF-8">. Он подключает к HTML-документу алфавиты всех живых языков Земли. Без этого метатега браузер может неверно отобразить буквы кириллицы и вообще символы, не входящие в базовый латинский алфавит. Желательно использовать и метатег <meta name="viewport" content="width=device-width, initial-scale=1">. Он задает масштаб страницы 1:1 в любом браузере на любом устройстве.
Атрибут name сообщает браузеру, о чём будет метаинформация. Сейчас речь идёт о viewport, то есть о видимой пользователю области страницы. Атрибут content передаёт содержание инструкции для этой области: width=device-width означает, что по ширине страница занимает весь экран устройства; initial-scale=1 — что страница на любом «девайсе» отображается в одном и том же масштабе.
Чаще всего оба метатега просто копируют из проекта в проект. Вот типовая структура, включающая содержимое head. С этого шаблонного кода начинается работа над любой веб-страницей:
Скопировать код
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
Важно:
Внутри head также:
- Подключаются внешние файлы, например, стили CSS.
- Задаётся информация для отображения в соцсетях на случай, если сайтом кто-нибудь поделится.
- Добавляется favicon — иконка для вкладки браузера.
Перейти к заданию
Введение в стили
HTML-документ с текстом, ссылками и заголовком — уже сайт, хоть и очень простой. Первый в мире сайт, которому около 30 лет, выглядел похоже:
http://info.cern.ch/hypertext/WWW/TheProject.html
В наше время этого мало. Нужны разные цвета, шрифты, отступы, а элементы должны быть уложены в какую-то сетку. За внешность веб-страницы отвечают стили на языке CSS (от англ. Cascading Style Sheets, «Каскадные Таблицы Стилей»). Изучить CSS несложно: практически это американский английский.
Чтобы придать элементу индивидуальный стиль, в тег встраивается атрибут style (англ. style, «стиль»). Его значением становятся название свойства (то, что нужно изменить) и значение этого свойства (как именно это нужно менять).
Для примера сделаем заголовок h1 красным. Нужное свойство называется color (англ. «цвет»), а значение — red (англ. «красный»).
Важно!
В данном случае color — свойство (англ. property), а red — значение (англ. value) этого свойства. Свойства и значения разделены двоеточием, после значения всегда стоит точка с запятой.
Интересно:
Даже если вы не собирались задавать никаких стилей, они всё равно работают на вашей странице. Это собственные стили браузера, который на своё усмотрение назначает цвет, размер и тип шрифта. Плохая новость в том, что браузеров полсотни, и у каждого свой набор стилей.
Перейти к заданию
Несколько стилей
Один элемент может иметь много свойств, которые мы захотим определить.
Никто не запрещает писать внутри атрибута style несколько свойств друг за другом.
Главное — не забыть разделять их точками с запятой.
Например:
Скопировать код HTML <h1 style="color: red; font-size: 72px;">Владимир Маяковский</h1>
Перейти к заданию
Правила CSS
Стиль, заданный внутри тега, называется встроенным или инлайновым (от англ. in line, «в строке»). Такой стиль подходит для уникального элемента, который должен бросаться в глаза. Но что, если на странице много (100, 500) абзацев и нужно, чтобы все они выглядели одинаково?
На такой случай в CSS есть правила стиля. Они состоят из селектора и свойств со значениями.
Селектор (по-латыни «тот, кто проводит отбор») — это отличительный признак элементов, которым данное правило установит единый стиль. Например, у абзацев общим признаком будет имя тега p.
Вот код, предписывающий всем заголовкам первого уровня небесно-голубой цвет и размер шрифта 32 пикселя. В роли селектора выступает имя тега:
Важно!
- Селектор — общая отличительная черта элементов, которым приписываются одни и те же свойства. Это не обязательно и далеко не всегда имя тега.
- После селектора в фигурных скобках указывают свойство с названием и значением.
- Например,
{color: black;} - Фигурные скобки вмещают сколько угодно пар «свойство-значение».
- Каждую новую пару принято писать на следующей строке. Не забывайте точку с запятой.
Перейти к заданию
Связь CSS и HTML. Тег style
Вернёмся к HTML-документу и постараемся понять, каким образом к нему подключают CSS-код.
CSS — это отдельный язык. Надо разделять зоны ответственности HTML и CSS. В самом простом случае внутри элемента <head></head>создаётся элемент <style></style>. Пространство внутри тегов style — это зона языка CSS. Там неуместны угловые скобки, а каждое выражение заканчивается точкой с запятой. Другой момент: никогда не следует помещать styleвнутрь элемента body, держите его в head. Стиль — это закон для всей веб-страницы, а законы должны быть в голове.
Перейти к заданию
HTML отдельно, CSS отдельно
Теперь давайте объясним пошагово правила оформления CSS-кода.
Шаг 1. Вводится имя тега (например, h4) и пробел.
Шаг 2. Открывается фигурная скобка.
Шаг 3. Нажимаем клавишу Enter.
Как правило, текстовые редакторы (и наш тренажёр) помогают в оформлении кода. Поэтому после нажатия клавиши Enter сразу добавляется закрывающая скобка, а мы попадаем на следующую строку с отступом вправо. Теперь CSS-свойства можно вкладывать внутрь селектора.
Перейти к заданию
Связь CSS и HTML. CSS-файл
Важно разделять ответственность между блоками кода, в первую очередь — между HTML и CSS. Разработчики предпочитают хранить код на разных языках в разных файлах. Так, все файлы с расширением .html хранят исключительно HTML-код, а файлы с расширением .css — только код на CSS.
Когда стили выносят в отдельный файл, необходимо указать, где этот файл находится, наладить канал связи с ним.
Скопировать код HTML <head> <meta charset="UTF-8"> <title>Workflow</title> <link rel="stylesheet" href="style.css"> </head>
У тега link атрибут rel (от англ. relation, «отношение») указывает, в каких отношениях с HTML-документом состоит подключаемый файл. В нашем случае значением rel должно быть слово “stylesheet” (англ. style sheet, «таблица стилей»). Так браузер узнаёт, что по этому каналу связи передаются стили. Второй атрибут, уже знакомый нам href, сообщает адрес CSS-файла. В этом текстовом файле нет тегов — только набор правил на CSS.
Перейти к заданию
Высота строки
Наш макет почти готов. Чтобы довести его до идеала, надо уменьшить расстояние по вертикали между заголовками и абзацем. Технически это расстояние между линиями, по которым выровнены нижние края букв соседних строк. Верстальщики бумажных книг обозначают такую дистанцию словом интерлиньяж.
Соответствующее свойство в CSS носит название line-height (англ. line height, «высота строки»). Его значение задаётся, например, в пикселях. По умолчанию браузер берёт интерлиньяж из собственной таблицы стилей.
Перейти к заданию
Отступы
Браузер назначил нашему документу ещё и отступы. Нужно показать, кто здесь хозяин, прописав отступам собственные значения.
Мы очень подробно разберём отступы в следующих курсах. Сейчас достаточно знать, что внешний отступ от элемента (поле) называется в CSS margin(от латинского margines — «поля, края листа»). Это свойство создает пустое пространство между элементом, которому оно присвоено, и его соседями.
Отступы можно задавать отдельно для верхнего, правого, нижнего или левого соседа. Тогда имя свойства обозначается не просто словом margin, а соответственно margin-top, margin-right, margin-bottom или margin-left.
Если написать margin: 20px;, отступы в 20 пикселей появятся со всех четырёх сторон, а если margin-left: 20px;— только слева.
Перейти к заданию