HTML

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&gt - будет выглядеть на сайте так: <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="https://htmlacademy.ru">HTML Academy</a>
Абсолютный адрес - ссылка в Интернете, состоит:

https - протокол
//site.ru - имя сервера
/blog/index.html - путь
Если в адресе нет имени сервера или протокола, то это относительный адрес (с компьютера).
<a href="file.pdf" download>Браузер скачает меня, а не будет читать</a>
При скачивании или загрузке файлов со сторонних сайтов для безопасности можно использовать
атрибут rel="noopener".
<a href="#part1">Глава 1</a>

<article id="part1">Содержание первой главы</article>
Атрибут id может использоваться с любым тегом
Изображения
<img> - вставить фото/изображение (тег одиночный, не закрывается). Атрибус src указывает путь к
картинке.
<img src="logo.png">
Основные форматы изображений: JPEG, PNG, SVG и GIF
SVG - векторное, подходит для иконок и лого:
- подходит чтоб масштабировать изображение без потерь

- изменять цвет элементов изображения
- анимировать части изображения
JPEG:
- для полноцветных изображений, фотографий

- для изображений с плавным переходом яркости и контраста
- для рисунков с большим количеством разноцветных деталей
- сжимает изображения с потерей качества.
GIF:
- подходит для простейшей анимации, состоит из 256 цветов, полупрозрачность не поддерживается
- почти не используется.
Указать размер изображения:
<img src="logo.png" width="200" height="100">
width - ширина
height - высота
Альтернативный текст - используется, когда у пользователя не подгружаются картинки (вместо фото

будет текст).
<img src="cat.png" alt="Кот, который гуляет сам по себе">
Изображение-ссылка:
<a href="http://keksby.ru">
<img src="cat.png" 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%;

HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML

Загружено:

Авторское право:

Доступные форматы

HTML

HTML - отвечает за структуру и содержание страницы, не язык программирования – язык разметки.

Заголовок страницы, который отображается во вкладках браузера:

<link> - подключить стили к странице

<meta> - одиночный тег

<meta>, <link>, <title> включаемые в <head>,— метасодержимое, не отображаются на странице

Самые важные слова из содержания страницы:

<meta name="keywords" content="важные, ключевые, слова">

<main> - выделяет основное содержание страницы, которое не повторяется на других страницах. И

<header> - шапка, вводная часть страницы

<section> - крупный смысловой раздел (о компании, каталог, программа обучения).

Семейство заголовочных тегов:<h1> - <h6>

На главных страницах заголовок верхнего уровня часто добавляют в шапку сайта.

<p> -разметка параграфов (абзац).

<ul> - ненумерованный список

В теге <ul> могут находиться только <li>

В <ol> может быть несколько атрибутов: li,start, reversed и type.

Начать нумерацию с числа:

<ol reversed> - нумерация в обратном порядке

<pre> - сохранить/изменить пробелы в тексте. Используется для отображения примеров кода и

<q> - выделение цитаты внутри предложения

<blockquote> - выделяет цитату как отдельный блок текста с отступами.

<sup> - отображает текст в виде верхнего индекса (возведение в степень)

<time datetime="2016-11-18T09:54">09:54 утра</time>

<em> - выделить курсивом с целью сделать смысловой акцент на слове

<strong> - выделить слово жирным (с интонацией)

<a> - вставить ссылку

Абсолютный адрес - ссылка в Интернете, состоит:

<a href="file.pdf" download>Браузер скачает меня, а не будет читать</a>

<a href="#part1">Глава 1</a>

Основные форматы изображений: JPEG, PNG, SVG и GIF

SVG - векторное, подходит для иконок и лого:

- подходит чтоб масштабировать изображение без потерь

- для полноцветных изображений, фотографий

Указать размер изображения:

<img src="logo.png" width="200" height="100">

Альтернативный текст - используется, когда у пользователя не подгружаются картинки (вместо фото

<img src="cat.png" alt="Кот, который гуляет сам по себе">

Подпись к фото, схемы, графики, пример кода:

<a title="Ну какое назад? Вы на первой фотке!">Назад</a>

Добавить класс к тегу: <p class="feature-furniture">…</p>

/* так пишется комментарий в CSS*/

h1 { color: red; } /* выберет все заголовки 1 уровня */

.info { color: blue; } /* выберет только элементы с классом info *

Если у CSS-правил отличаются только селекторы, а свойства и значения одинаковые, то их можно

h1, .danger { color: red; }

.danger { color: red; }

Наследуемые свойства: font-size, font-family, font-style, font-weight, color, text-align, text-transform,

Ненаследуемые свойства: background, border, padding, margin, width, height, position.

font: 16px/26px "Arial", sans-serif;

Радиус границы/скругления (сделать круглую аватарку):

Вам также может понравиться