30 Дек, 2023

Категории: Новости Школа

Краткий справочник по HTML

1. Элементы WEB-страницы

Таблица 1.1. Организующие страницу элементы:

Элемент

Назначение

Начальный и заключительный теги HTML-документа.

Элемент <head> (от англ. head — голова) предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.

Элемент определяет название страницы, которое выводится в строке заголовка окна браузера. Располагается внутри заголовка <html> WEB-страницы, учитывается при индексации страницы поисковыми машинами.

Description — HTML-тег, содержащий краткое описание страницы для поисковых роботов (а также роботов некоторых каталогов и рубрикаторов). По своей сути он является продолжением тега Title, только более развернутым и подробным. В коде он располагается в блоке <head>…</head>.

Мета-тег Keywords (от англ. «ключевые слова») – это специальный тег, который используется для SEO-продвижения и включает в себя слова-ключи. Они определяются в зависимости от того, какой контент размещен на веб-странице. С помощью тега можно выделить ключевые фразы, по которым потенциальный клиент сможет найти сайт в выдаче. <head>…</head>.

Определение "базового" URL каталога сайта. Все относительные ссылки на странице, содержащей этот элемент будут определяться относительно него. Располагается внутри элемента <head>

Между этими тегами находится основное содержание страницы.

Атрибуты:

Атрибут	Назначение
bgcolor="значение" Сейчас это свойство описывается в Стилях: body{background-color:#ddd;}	Задает фоновый цвет страницы. Переменная "значение" представлена в виде текстовой величины (принятые в WEB названия цветов), либо в виде шестнадцатиричного числа, обозначающего цвет — "#ddf112".
background="адрес" Сейчас это свойство описывается в Стилях: body{background-image:url("Адрес-фоновой-картинки");}	Задает фоновый рисунок страницы. "значение" — адрес файла изображения, которое станет фоновым рисунком страницы. При этом рисунок не растягивается, а заполняет всю страницу путем клонирования.

<!— ….. —>

Комментарий. Может располагаться в любом месте страницы. На экран браузера не выводится.

2. Элементы форматирования текста и SEO нагрузки

Таблица 2.1. Элементы стилей абзаца и списков:

Элемент

Назначение

Заголовок первого уровня

Заголовки второго уровня

Заголовки третьего уровня

Заголовки четвертого уровня

Заголовки пятого уровня

Заголовки шестого уровня

Простой абзац. Приведенные атрибуты могут быть использованы со всеми элементами, определяющими стиль абзаца, в том числе и с заголовками.

Атрибуты:

Атрибут

Назначение

align="значение"

Расположение текста абзаца относительно границ окна (выравнивание текста). Может принимать значения: "left" — выравнивание по левому краю, "right" — выравнивание по правому краю, "justify" — выравникание по ширине и "center" — выравнивание по центру.

Виртуальное выделение абзаца путем добавления отступа слева.

Преформатированный абзац. Выводится в окне браузера точно также, как был набран в редакторе. Учитывает пробелы и переводы строки при вводе. Результат выводится на экран моноширинным шрифтом.

<br>

Разрыв строки. Браузером распознается и выполняется как перевод строки. Может быть использован внутри элементов, определяющих абзац.

<hr>

Рисует горизонтальную линию.

Атрибуты:

Атрибут	Назначение
width="значение"	Длина линии, указанная либо в относительных единицах (процентах) либо в абсолютных — пикселях.
size="значение"	Ширина линии в пикселах.
align="значение"	Расположение: выравнивание по левому, правому краю либо по центру.
noshade="noshade"	Изменяет внешний вид линии, убирая тень линии.

Нумерованный список.

Атрибуты:

Атрибут

Назначение

type="значение"

Значение определяет вид нумерации:

"A" — Прописные буквы.

"a" — Строчные буквы.

"I" — Большие римские цифры.

"i" — Малые римские цифры.

"1" — Арабские цифры (по умолчанию).

start="значение"

Указывает, какое значение для данного списка будет являться стартовым.

Маркированный НЕнумерной список.

Атрибуты:

Атрибут

Назначение

type="значение"

Значение определяет вид маркера:

"disc" — Кружок (по умолчанию).

"square" — Квадратик.

"circle" — Кольцо.

Списки различных типов могут быть вложены один в другой. В этом случае отдельная строка списка должна содержать полностью оформленный список нижнего подуровня.

Таблица 2.2. Логические стили форматирования текста WEB-страницы:

Элемент	Назначение
<em> … </em>	Выделение курсивом
<strong> … </strong>	Выделение жирным
<cite> … </cite>	Цитата или ссылка на внешний источник
<dfn> … </dfn>	Исходный код программы
<samp> … </samp>	`Пример работы программы, бывает, отображается, как Исходный код`.
<kbd> … </kbd>	Текст, вводимый с клавиатуры.
<var> … </var>	`Переменная или значение.`
<q> … </q>	Цитируемый текст.
<abbr> … </abbr>	Аббревиатура.
<acronym> … </acronym>	Акроним.

Таблица 2.3. Физические стили форматирования текста WEB-страницы:

Элемент	Назначение
<b> … </b>	Жирный
<i> … </i>	Курсив
<u> … </u>	Подчеркнутый
<big> … </big>	Увеличенный размер
<small> … </small>	Уменьшенный размер
<tt> … </tt>	`Моноширинный`
<sup> … </sup>	^{Верхний индекс}
<sub> … </sub>	_{Нижний индекс}

3. Добавление объектов

Таблица 3.1. Добавление объектов на страницу:

Элемент

Назначение

<img>

Вставка изображения на страницу.

Атрибуты:

Атрибут	Назначение
src="адрес"	Указывает URL-адрес, по которому находится файл изображения. Может быть как относительным, так и абсолютным.
alt="значение"	Содержит текст, который выводится на экран браузера при невозможности вывести изображение.
align="значение"	Определяет порядок вывода текста относительно боковых сторон изображения: "top" — текст располагается рядом с верхней границей изображения; "middle" — текст располагается рядом с серединой изображения; "bottom" — текст располагается рядом с нижней границей изображения (по умолчанию), Еще два параметра, делающие изображения "плавающими", при этом текст обтекает изображение: "right" — помещает изображение к правой границе WEB-страницы; "left" — помещает изображение к левой границе WEB-страницы.
width="значение"	Ширина рисунка (резервируется место под изображение, создавая рамку.)
height="значение"	Высота рисунка (резервируется место под изображение, создавая рамку.)

Вставка гиперссылки на страницу. Между начальным и закрывающим тегами должен находиться текст или картинка, которые отображают гиперссылку на экране браузера.

Атрибуты:

Атрибут	Назначение
href="адрес"	Указывает URL-адрес, по которому находится документ, который должна открывать ссылка. Может быть как относительным, так и абсолютным.
title="значение"	Содержит поясняющий текст, который выводится на экран браузера при наведении курсора мыши на гиперссылку.
name="значение"	Устанавливает закладку на странице, используемую для переходов внутри страницы.
target="_blank"	Позволяет автоматически открывать гиперссылку в новом окне.
Пример: <a href="Адрес" title="Заголовок" target="_blank">Текст ссылки или картинка</a>

Таблица 3.2. Добавление таблиц на страницу:

Элемент

Назначение

Вставка таблицы на страницу.

Атрибуты:

Атрибут	Назначение
bgcolor=»значение»	Фоновый цвет таблицы. Значение — WEB-название цвета или его шестнадцатиричный код * — может применяться с элементами <td> и <tr>
width="значение"	Ширина таблицы. Задается либо в пикселях (абсолютный размер), либо в процентах от ширины страницы (относительный размер). * — может применяться с элементом <td>
align="значение"	Определяет порядок вывода таблицы относительно границ WEB-страницы: "left" — таблица располагается слева у границы страницы, обтекается текстом; "right" — таблица располагается справа у границы страницы, обтекается текстом; "center" — таблица расположена по центру страницы.
cellpadding="значение"	Определяет расстояние между границами ячеек и их содержимым (в пикселах).
cellspacing="значение"	Задает расстояние в пикселах между ячейками таблицы.
border="значение"	Задает ширину внутренних и внешних границ таблицы в пикселах.

Определяет строку таблицы.

Атрибуты:

Атрибут

Назначение

align="значение"

Определяет порядок вывода данных в ячейках:

"left" — с выравниванием по левому краю ячеек;
"right" — с выравниванием по правому краю ячеек;
"center" — с выравниванием по центру ячеек;

* может использоваться с элементом <td>.

valign="значение"

Определяет порядок вывода данных в ячейках:

"top" — вверху ячеек;
"bottom" — внизу ячеек;
"center" — по центру ячеек;
* может использоваться с элементом <td>.

* См. атрибуты элемента <table>

Определяет ячейки таблицы.

Атрибуты:

Атрибут	Назначение
colspan="значение"	Задает количество ячеек для объединения в строке таблицы.
rowspan="значение"	Задает количество ячеек для объединения в столбце таблицы.

* См. атрибуты элемента <tr> и <table>

Вставка описания таблицы.

Атрибуты:

Атрибут

Назначение

align="значение"

определяет размещение названия таблицы:

"top" — над таблицей;
"bottom" — под таблицей.

Пример HTML-кода страницы

<html>
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   <!— Задание русской кодировки "UTF-8" —>
     <meta http-equiv="content-language" content="ru, russian">    <!— Задание русского языка "ru, russian" —>
     <title>Заголовок страницы</title>
     <meta name="keywords" content="Здесь пишутся ключевые слова страницы">
     <meta name="description" content="Здесь кратко описывается страница.">
     <style>
     h1{text-align:center;} < — Выравнивание заголовка 1-го уровня H1 по центру.>
     </style>
</head>
<body>

<h1>Заголовок страницы</h1>

<table cellpadding="0" cellspacing="0" border="0">
<tr><td width="200">
<ul>
     <li><a href="page1.html" title="Страница 1">Страница 1</a></li>
     <li><a href="page2.html" title="Страница 2">Страница 2</a></li>
     <li><a href="page3.html" title="Страница 3">Страница 3</a></li>
     <li><a href="page4.html" title="Страница 4">Страница 4</a></li>
     <li><a href="page5.html" title="Страница 5">Страница 5</a></li>
     <li><a href="page6.html" title="Страница 6">Страница 6</a></li>

     <li><a href="https://www.mail.ru/" target="_blank">Внешняя ссылка</a></li>
</ul>
</td><td>
     <h2 style="text-align:center;">Подзаголовок страницы</h2>    <!— Заголовок второго уровня выравнен по центру —>
     <p>Первый тестовый абзац страницы</p>
     <p>Второй тестовый абзац страницы</p>
     <p>Третий тестовый абзац страницы</p>
</td></tr>
</table>

</body>
</html>

Напишите коментарий Отменить ответ

Рубрики

Гитара	(17)
Досуг	(34)
Новости	(82)
Плавание	(4)
Семья	(3)
Танцы	(18)
Школа	(19)

Последние Коментарии

adr
Май 15, 2023
Молодцы, Саша и Катя!
Дмитрий
Май 6, 2023
Доброго дня, Саша! Молодец! Практикуй игру на гитаре и даль...
Дмитрий
Май 4, 2023
Молодец, Саша! Экзамен сдан на отлично! )))

Архив новостей

Теги новостей

Мой Instagram

WebASasha

Контакты

Телефон: +7(995)655-35-33

Адрес: г.Москва, ул.Фомичевой, д.16

Email: mailsashi@bk.ru

Ответственность

Все права на предоставленные материалы принадлежат сайту asasha.ru

Копирование или распространение указанных материалов возможны только со ссылкой на данный сайт.

Ссылки

Краткий справочник по HTML

1. Элементы WEB-страницы

Таблица 1.1. Организующие страницу элементы:

2. Элементы форматирования текста и SEO нагрузки

Таблица 2.1. Элементы стилей абзаца и списков:

Таблица 2.2. Логические стили форматирования текста WEB-страницы:

Таблица 2.3. Физические стили форматирования текста WEB-страницы:

3. Добавление объектов

Таблица 3.1. Добавление объектов на страницу:

Таблица 3.2. Добавление таблиц на страницу:

Пример HTML-кода страницы

Напишите коментарий Отменить ответ

Рубрики

Последние Коментарии

Архив новостей

Теги новостей

Свежие записи

Свежие комментарии

Мой Instagram