HTML
HTML - отвечает за структуру и содержание страницы, не язык программирования – язык разметки.
Код, заключённый между символами <!-- и -->, работать не будет (это комментарий)
Абзацы добавляются с помощью тега <p>, а элементы списка с помощью тега <li>.
Не все теги можно вкладывать в другие теги, например, тег <h1> нельзя вкладывать в <p>.
Теги HTML:
<!DOCTYPE html> - тип документа, чтобы браузер мог определить версию HTML и правильно
отобразить страницу
<html> - после доктайпа и содержит все остальные теги, включая <head> и <body>. Тегу <html>
обычно добавляют важный атрибут lang («language»), в котором задаётся язык сайта:
<html lang="ru">
Внутри <head> - заголовок, ключевые слова, описание страницы, стили. Содержание тега <head> не
отображается на странице.
Заголовок страницы, который отображается во вкладках браузера:
<head>
<title>Тренажёры — HTML Academy</title>
</head>
<link> - подключить стили к странице
+ атрибут href - адрес стилевого файла, значение stylesheet + атрибут rel - говорит браузеру, что мы
подключаем именно стили, а не что-то другое.
<head>
<link href="адрес_файла_стилей.css" rel="stylesheet">
</head>
<meta> - одиночный тег
<meta>, <link>, <title> включаемые в <head>,— метасодержимое, не отображаются на странице
напрямую, служат для хранения информации о документе и для взаимосвязи документа с другими
документами и системами.
<meta charset="utf-8">
utf-8 - самая распространенная кодировка текста HTML-страницы
Самые важные слова из содержания страницы:
<meta name="keywords" content="важные, ключевые, слова">
<meta name="description" content="краткое описание страницы">
Краткое описание (или аннотация) страницы часто используется поисковиками при отображении
результатов поиска.
<body> - содержание страницы, отображается в окне браузера.
<main> - выделяет основное содержание страницы, которое не повторяется на других страницах. И
обычно на странице используется один <main>.
<header> - шапка, вводная часть страницы
<footer> - подвал (контактные данные и тд.)
<header>
Я шапка сайта. Могу повторяться на других страницах.
</header>
<main>
Я основной контент! Живу только на этой странице.
</main>
<footer>
Я подвал сайта, я как шапка.
</footer>
<section> - крупный смысловой раздел (о компании, каталог, программа обучения).
<article> - цельный, законченный и самостоятельный фрагмент информации.
<nav> - ссылки на другие страницы или навигацию по текущей странице
Семейство заголовочных тегов:<h1> - <h6>
<h1>Спецификация HTML</h1>
<h2>Раздел 1 Введение</h2>
<h3>Раздел 1.1 Происхождение языка</h3>
На главных страницах заголовок верхнего уровня часто добавляют в шапку сайта.
На внутренних страницах заголовок первого уровня находится внутри тега <main>
<p> -разметка параграфов (абзац).
Виды списков
<ul> - ненумерованный список
<ol> - нумерованный список
<li> - элементы списка
В теге <ul> могут находиться только <li>
<ul>
<li>Я пункт списка, могу быть на любом месте</li>
<li>И я пункт списка, и мне тоже не важен порядок</li>
</ul>
В <ol> может быть несколько атрибутов: li,start, reversed и type.
Начать нумерацию с числа:
<ol start="3">
<li>раз</li>
<li>два</li>
</ol>
<ol reversed> - нумерация в обратном порядке
<dl> - список описаний
<dt> - термин
<dd> - описание/определение
Теги <dt> и <dd> пишутся внутри <dl>.
<pre> - сохранить/изменить пробелы в тексте. Используется для отображения примеров кода и
картинок ASCII Art.
<code> - для обозначения фрагментов кода.
Мнемоники:
<ul> - будет выглядеть на сайте так: <ul>
& - амперсанд
<q> - выделение цитаты внутри предложения
+cite - ссылка цитаты (автор Маяковский,выделяет курсивом)
<blockquote> - выделяет цитату как отдельный блок текста с отступами.
<br> - перенос строки внутри абзаца, например в стихах, текстах песен, режим работы (одиночный
тег - нет закрывающей части)
<sup> - отображает текст в виде верхнего индекса (возведение в степень)
<sub> - в виде нижнего индекса.
Их используют для указания единиц измерения или написания простых формул. Например:
20м<sup>2</sup>
H<sub>2</sub>O
<time datetime="2016-11-18T09:54">09:54 утра</time>
<em> - выделить курсивом с целью сделать смысловой акцент на слове
<i> - выделить курсивом термин, название, иностранные слова, мысли героя.
<strong> - выделить слово жирным (с интонацией)
<b> - выделить слово жирным (без акцента и интонации)
<del> - зачеркнуть слово/фразу
<ins> - подчеркнуть линией слово/фразу
<a> - вставить ссылку
Атрибут href - адрес ссылки в URL-формате
<a href="[Link] Academy</a>
Абсолютный адрес - ссылка в Интернете, состоит:
https - протокол
//[Link] - имя сервера
/blog/[Link] - путь
Если в адресе нет имени сервера или протокола, то это относительный адрес (с компьютера).
<a href="[Link]" download>Браузер скачает меня, а не будет читать</a>
При скачивании или загрузке файлов со сторонних сайтов для безопасности можно использовать
атрибут rel="noopener".
<a href="#part1">Глава 1</a>
<article id="part1">Содержание первой главы</article>
Атрибут id может использоваться с любым тегом
Изображения
<img> - вставить фото/изображение (тег одиночный, не закрывается). Атрибус src указывает путь к
картинке.
<img src="[Link]">
Основные форматы изображений: JPEG, PNG, SVG и GIF
SVG - векторное, подходит для иконок и лого:
- подходит чтоб масштабировать изображение без потерь
- изменять цвет элементов изображения
- анимировать части изображения
JPEG:
- для полноцветных изображений, фотографий
- для изображений с плавным переходом яркости и контраста
- для рисунков с большим количеством разноцветных деталей
- сжимает изображения с потерей качества.
GIF:
- подходит для простейшей анимации, состоит из 256 цветов, полупрозрачность не поддерживается
- почти не используется.
Указать размер изображения:
<img src="[Link]" width="200" height="100">
width - ширина
height - высота
Альтернативный текст - используется, когда у пользователя не подгружаются картинки (вместо фото
будет текст).
<img src="[Link]" alt="Кот, который гуляет сам по себе">
Изображение-ссылка:
<a href="[Link]
<img src="[Link]" alt="Кекс">
</a>
Подпись к фото, схемы, графики, пример кода:
<figure>
Схема, график, диаграмма или код
<figcaption>Подпись к содержимому</figcaption>
</figure>
Тег <a> можно использовать без адреса, удалив атрибут href. Это ссылка-заглушка, чтобы показать,
что мы находимся на текущей странице:
<ul>
<li><a>1 страница</a></li>
<li><a href="2">2 страница</a></li>
<li><a href="3">3 страница</a></li>
</ul>
Когда мы удаляем атрибут href у ссылки, то лучше оставить подсказку о том, почему мы это сделали.
Подсказку можно добавить с помощью атрибута title. Подсказка появится, когда курсор задержится
над ссылкой некоторое время.
<a title="Ну какое назад? Вы на первой фотке!">Назад</a>
CSS (Cascading Style Sheets) — "каскадные таблицы стилей"; язык для оформления HTML-
документов. Состоит из CSS-правил. CSS-правило состоит из селектора и перечня свойств и их
значений:
селектор {
свойство: значение;
свойство: значение;
}
Добавить класс к тегу: <p class="feature-furniture">…</p>
/* так пишется комментарий в CSS*/
h1 { color: red; } /* выберет все заголовки 1 уровня */
.info { color: blue; } /* выберет только элементы с классом info *
Если у CSS-правил отличаются только селекторы, а свойства и значения одинаковые, то их можно
сгруппировать через запятую.
h1, .danger { color: red; }
/* То же самое, что и */
h1 { color: red; }
.danger { color: red; }
Наследуемые свойства: font-size, font-family, font-style, font-weight, color, text-align, text-transform,
text-indent, line-height, letter-spacing, word-spacing, white-space, direction, list-style, cursor, visibility,
border-collapse
Ненаследуемые свойства: background, border, padding, margin, width, height, position.
font-size - размер шрифта.
font — задаёт сразу шесть параметров: размер и название шрифта, высоту строки и др.
font: 16px/26px "Arial", sans-serif;
Радиус границы/скругления (сделать круглую аватарку):
border-radius: 50%;