✅ Без входа можно
⛔ Без входа нельзя
Все теги и свойства курсов по занятиям. Можно распечатать (Ctrl+P).
Включаем компьютер, осваиваем мышь и клавиатуру, находим файлы и открываем сайты · 7 занятий
⏻Кнопка питанияПуск → ⏻ → Завершение работыПравильно выключить компьютерПуск → ⏻ → ПерезагрузкаПерезапустить, если что-то завислоПуск → ⏻ → Спящий режимБыстро «усыпить» компьютерWin + LЗаблокировать компьютер, когда отходишьЩелчокВыбрать, нажать кнопку или ссылкуДвойной щелчокОткрыть файл, папку или программуПравый щелчокМеню действий с предметомПеретаскиваниеНажать, держать, двигать, отпуститьКолёсикоПрокрутка вверх и внизДва пальца на тачпадеПрокрутка и правый щелчокBackspaceСтереть символ слева от курсораDeleteСтереть символ справа от курсораShift + букваЗаглавная букваWin + ПробелСменить язык вводаAlt + ShiftСменить язык (другой способ)Shift + Б / ЮСимволы < и > (раскладка ENG)Shift + Х / ЪСимволы { и } (раскладка ENG)WinОткрыть меню Пуск— ☐ ✕Свернуть, развернуть, закрыть окноAlt + TabПереключиться между окнамиWin + ← / →Окно на половину экранаWin + DПоказать рабочий столCtrl + Shift + EscДиспетчер задачWin + EОткрыть ПроводникСоздать → ПапкуНовая папка (правый щелчок)F2ПереименоватьDeleteУдалить в Корзинуindex.htmlНазвание index, расширение .htmlmy-cat.jpgХорошее имя файла для сайтаCtrl + AВыделить всёCtrl + CКопироватьCtrl + XВырезатьCtrl + VВставитьCtrl + ZОтменитьCtrl + YВернуть отменённоеCtrl + SСохранитьEnter в адресной строкеПерейти на сайт или начать поискF5Обновить страницуCtrl + T / Ctrl + WОткрыть / закрыть вкладкуCtrl + Shift + TВернуть закрытую вкладкуCtrl + DДобавить в закладкиCtrl + JЗагрузкиCtrl + + / - / 0Масштаб страницыОт первого тега до собственного многостраничного сайта · 33 занятия
HTMLЯзык разметки: что есть на страницеCSSЯзык стилей: как это выглядит<тег>…</тег>Открывающий и закрывающий тегF12Открыть инструменты разработчика в браузереcode.visualstudio.comОфициальный сайт, откуда скачивать VS CodeCtrl + Shift + XРасширения VS Code (русский язык: Russian Language Pack)index.htmlГлавная страница сайтаCtrl + SСохранить файлF5Обновить страницу в браузере! + TabКаркас HTML в VS Code<h1>Большой заголовок<!DOCTYPE html>Тип документа<html lang="ru">Корень страницы, язык — русский<head>Служебная часть<meta charset="UTF-8">Кодировка, чтобы не было «кракозябр»<title>Название вкладки<body>Видимая часть<h1>…<h6>Заголовки 1–6 уровня<p>Абзац<br>Перенос строки<hr>Горизонтальная линия<strong>Важный (жирный) текст<em>Выделение (курсив)<!-- -->Комментарий<ul>Маркированный список<ol>Нумерованный список<li>Пункт списка<ol start="5">Нумерация с 5<ol reversed>Обратная нумерация<a href="…">Ссылкаtarget="_blank"Открыть в новой вкладкеid="name"Имя места на страницеhref="#name"Ссылка-якорь на это местоhref="page.html"Ссылка на свою страницу<img src="…" alt="…">Изображениеwidth="200"Ширина в пикселяхimages/photo.jpgПуть к файлу в папке images<figure>Картинка вместе с подписью<figcaption>Подпись к картинке<table>Таблица<caption>Название<tr>Строка<th>Ячейка-заголовок<td>Ячейкаcolspan="2"Объединить 2 ячейки в строке<header>Шапка<nav>Меню<main>Главное содержимое<section>Раздел<article>Отдельная статья/карточка<footer>Подвал<div>Блок без смысла<form>Форма<label for="name">Подпись к полю с id="name"<input type="text">Текстовое полеtype="checkbox" / "radio"Флажок / переключатель<textarea>Большое поле<select><option>Выпадающий списокrequiredОбязательно заполнить<video controls>Видео с кнопками<audio controls>Аудиоплеер<iframe src="…">Встроенный сайт/картаwidth / heightРазмеры окнаposter="img.jpg"Обложка видеоheader / nav / main / footerКаркасh1–h6, p, strong, emТекстul / ol / liСпискиa href, img altСсылки и картинкиtable / tr / tdТаблицаform / input / buttonФорма<link rel="stylesheet" href="style.css">Подключить внешний CSSселектор { свойство: значение; }CSS-правилоcolorЦвет текстаbackground-colorЦвет фона#ff6b35HEX-цвет/* */Комментарий в CSSfont-familyШрифтfont-size: 18pxРазмерfont-weight: 700Жирностьtext-align: centerВыравниваниеline-height: 1.5Межстрочный интервалtext-transform: uppercaseЗАГЛАВНЫЕ БУКВЫwidth / heightШирина / высотаpadding: 16pxВнутренний отступborder: 2px solid #333Рамка: толщина, стиль, цветmargin: 20px autoВнешний отступ, auto — по центруbackground: #fffФонbox-sizing: border-boxУдобный подсчёт размеров.nameСелектор класса#nameСелектор idclass="a b"Два класса сразу.card pВсе p внутри .cardh1, h2Сразу несколько селекторовid > класс > тегСила селекторовdisplay: flexВключить Flexboxjustify-content: space-betweenРаздвинуть по краямalign-items: centerПо центру поперёкgap: 16pxПромежуткиflex-wrap: wrapПеренос на новую строкуflex: 1Ребёнок занимает свободное местоposition: relativeТочка отсчётаposition: absoluteПо координатам внутри родителяtop / right / bottom / leftКоординатыposition: fixedПрибит к окнуposition: sticky; top: 0Липкое менюz-index: 10Слой: кто сверху:hoverПри наведении:activeПри нажатии:focusЭлемент в фокусеtransition: 0.3sПлавностьtext-decoration: noneБез подчёркиванияcursor: pointerКурсор-рукаtransform: scale(1.05)Увеличитьborder-radius: 16pxСкруглениеbox-shadow: 0 8px 20px rgba(0,0,0,.15)Теньlinear-gradient(135deg, a, b)Линейный градиентbackground-size: coverФон на весь блокopacity: 0.8Прозрачностьtransform: translateY(-5px)Приподнятьdisplay: gridВключить сеткуgrid-template-columns: repeat(3, 1fr)3 равные колонкиgap: 16pxПромежуткиgrid-column: span 2Занять 2 колонкиminmax(150px, 1fr)Не уже 150pxobject-fit: coverКартинка заполняет ячейку<meta name="viewport" …>Обязательный тег для телефонов@media (max-width: 600px) { }Стили для узких экрановmax-width: 900pxНе шире 900px%, rem, vw, vhОтносительные единицыflex-direction: columnКолонка вместо рядаCtrl+Shift+M (в F12)Режим устройстваheader / main / footerКаркасdisplay: flexРядdisplay: gridСеткаpadding / margin / gapВоздухborder-radius / box-shadowДетали@mediaТелефонhref="about.html"Ссылка на страницу сайтаhref="../index.html"На уровень папки вышеhref="css/style.css"Файл в папке cssclass="active"Текущая страница в менюindex.htmlГлавная открывается первойWireframeСхема страницы из блоковКарта сайтаСписок страниц и связейПалитра2–3 основных цветаКонтентТексты и картинкиЛицензияМожно ли использовать картинку<header> + <nav>Шапка и меню.heroПервый экран.btnКнопка-призыв.featuresБлоки с карточками<footer>Подвал<title>Своё на каждой страницеhref="about.html"Ссылка на страницу.activeТекущий пункт меню<section> + <h2>Разделы страницы<figure>Картинка с подписью:root { --main: #0984e3; }Объявить переменнуюcolor: var(--main)Использовать переменнуюmax-width + margin: 0 autoКонтейнер по центруdisplay: flex / gridРаскладка:hover + transitionЖивые элементы<meta name="viewport" content="width=device-width, initial-scale=1">На каждой странице@media (max-width: 600px)Стили для телефонаimg { max-width: 100%; }Картинки не вылезаютflex-wrap: wrapПеренос пунктовgrid-template-columns: 1frОдна колонка<details><summary>Раскрывающийся блокdetails[open]Стиль открытого блокаtransform: scale(1.1)Увеличениеinput:focusПоле в фокусе<iframe>Картаvalidator.w3.orgПроверка HTMLF12 → ConsoleОшибки загрузки файловalt=""Описание у каждой картинкиAlt + Shift + FФорматировать код в VS Code2–3 минутыДлительность рассказаТема → Экскурсия → ФишкаПлан рассказа«Бутерброд»Плюс → совет → плюсHTMLСтруктураCSSОформлениеJavaScriptСледующий шагGitHub PagesПубликация сайта