ПрограммированиеПохожие презентации:
Самые популярные html-теги
1.
{ Самые популярныеhtml-теги
< Чтобы сверстать простой сайт, необязательно
знать все HTML-теги. Для начала можно изучить
самые популярные — их достаточно для создания
примитивной страницы с текстом, ссылками,
картинками, подключенными стилями и скриптами >
...
}
2.
{ СодержаниеТеги <html>, <head> и <body>
Тег <div>
Тег <a>
Тег <span>
Тег <ul> и <li>
Тег <p>
Тег <img>
Тег <br>
Тег <link>
Тег <script>
Тег <meta>
}
3.
{ Теги <html>,<head> и
<body>
На каждой веб-странице есть
три обязательных тега — они
формируют структуру
документа и содержат
информацию для браузеров и
поисковых систем.
...
<html> — контейнер для содержимого
страницы.
<head> содержит служебную
информацию. Здесь подключаются
стили, указывается заголовок
страницы, подключаются метатеги.
<body> содержит контент — всё, что
отображается в браузере.
}
4.
Тег <div>Тег <div> — самый популярный. Он
используется как контейнер для HTMLэлементов. В него можно добавить заголовок,
абзацы текста, списки, формы или что-то ещё,
а потом стилизовать.
<div class="content">
<h2>О нас</h2>
<p>Мы очень любим Семёна Алексеевича и
веб-разработку.</p>
</div>
}
..
5.
Тег <div>Тег не имеет семантического значения, то
есть не передает никакой информации о своём
содержании. Он нужен для визуального
форматирования и разметки.
Некоторые разработчики создают на <div>
смысловые блоки, например, шапку, подвал
или меню. Так можно делать, но это плохая
практика. Лучше использовать специальные
семантические теги: <header>, <nav>,
<main>, <section>, <aside> и <article>.
Они дают больше информации о содержимом и
делают код более читабельным.
6.
Тег <a>HTML-тег <a> используется для создания ссылок. У тега есть атрибут
href — в нём указывается URL-адрес страницы, на которую должен
попасть пользователь. Когда адрес неизвестен, в href ставится
заглушка:
<a href="https://htmlacademy.ru/">Обычная
сылка</a>
<a href="#">Ссылка с заглушкой</a>
7.
{ Тег <span>Тег <span> — несемантический, как и
<div>. Он используется для
стилизации отдельных слов и фраз в
блоке текста. Например, вы можете
использовать тег, чтобы изменить
цвет слова в абзаце, применить
другой шрифт или начертание.
<p>В этом параграфе часть слов
написана <span
style="color:red">красным</span>
цветом.</p>
}
8.
Тег <ul> и <li><ul> создаёт неупорядоченный список, то есть элементы в
нём не пронумерованы, а помечены маркером. Внутри тега с
помощью <li> добавляются элементы списка.
<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
С помощью таких списков разработчики создают
навигацию, каталог с карточками товаров, пагинацию,
раздел с отзывами и прочее. То есть блоки, которые
содержат несколько однородных и равноправных
элементов.
9.
Тег <p>Тег <p> создаёт абзацы — отделяет одну
часть текста от другой. Например, все
абзацы на этой странице размечены тегом
<p>.
<p>Если вы верстаете личный блог, сайтвизитку или целый интернет-магазин, не
забудьте правильно разметить текст.
Неважно, для каких целей вы создаете
продукт и сколько в нём будет текста — в
любом случае абзацы важны.</p>
<p>В письменной речи принято в одном абзаце
раскрывать одну идею. Но в HTML абзац — не
смысловая, а скорее структурная единица. Он
лишь явно выделяет параграфы. Притом в тег
можно вкладывать не только текст, но и,
например, картинки.</p>
10.
{ Тег <img>Тег <img> добавляет графики,
иллюстрации и фотографии.
Обычно его используют, когда
на страницу нужно вставить
контентное изображение — то
есть которое доносит до
пользователей полезную
информацию. Например,
показывает продукт или
покупателей. Фоны и
декоративные элементы чаще
добавляют с помощью CSS или
тега <svg>.
...
У <img> есть четыре обязательных
атрибута:
alt — альтернативный текст, описывающий
изображение. Нужен на случай, если
картинка не загрузится.
src — адрес, по которому находится
изображение.
width — ширина изображения.
height — высота изображения.
<img src="images/keks.jpg" width="480"
height="240" alt="Лысый кот Локи сидит
на клавиатуре.">
}
11.
Тег <br>Тег <br> переносит текст на другую строку,
не начиная нового абзаца.
<p>Санкт-Петербург, <br>
набережная реки Карповки, 5.
</p>
Распространённая ошибка разработчиковновичков — использовать <br> для
деления текста на абзацы. Тег не
подходит для таких задач — для абзацев
есть <p>.
12.
Тег <link>Тег <link> подключает CSS-файлы. В отличие от <script>,
он ставится в начале документа, в теге <head>.
У <link> два обязательных атрибута:
rel со значением stylesheet означает, что файл содержит
таблицу стилей.
href указывает адрес файла.
<link rel="stylesheet" href="styles/style.css">
}
..
13.
Тег <script>Тег подключает на страницу JavaScript. <script> ставится в
конце документа, перед закрывающим тегом </body>. Если
сделать наоборот и подключить JS в начале, страница будет
отрисовываться медленнее.
У тега есть обязательный атрибут src, в котором указывается
путь до файла.
<script src="scripts/script.js"></script>
*
14.
Тег <meta>Тег содержит метаданные — информацию,
которая может влиять на страницу.
Атрибут charset указывает кодировку
страницы, чтобы браузер правильно
отобразил текст. Самая распространенная
современная кодировка — utf-8.
<meta charset="utf-8">