Html страница что это: Что такое HTML-код страницы?

Содержание

Что такое HTML-код страницы?

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

Все что вы видите на странице – текст, рисунки, таблицы и другие элементы, формирующие смысловое наполнение веб-страницы, именуемое контентом, создаются при помощи языка разметки HTML. Кликните правой кнопкой мыши по любой веб-странице, и в выпавшем меню выберите пункт «просмотр HTML кода» или «Исходный код» – появится текстовой редактор с непонятными, вам символами и значками – это и есть HTML-код страницы.

Любой WWW-документ может содержать стилизованный и форматированный текст, графику и гиперсвязи с различными ресурсами Интернет. Чтобы реализовать все эти возможности, был разработан специальный язык описания WWW-документов, названный HyperText Markup Language (HTML), то есть, Язык Разметки Гипертекста.

Описание Web-страницы на языке HTML представляет собой набор инструкций, интерпретируемый программой-браузером.

Документ, написанный на HTML, представляет собой текстовый файл, содержащий собственно текст, несущий информацию читателю, и теги разметки (markup tags). Теги – это определенные стандартом HTML, последовательности символов, являющиеся инструкциями для браузера.

Согласно этим инструкциям программа располагает текст на экране, включает в него рисунки, хранящиеся в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Интернет. Таким образом, файл на языке HTML приобретает облик Web-документа только тогда, когда он интерпретируется браузером.

Однако, в стандартном языке HTML есть один существенный недостаток. Например, для того чтобы описать разметку абзацев в контенте и их оформление, необходимо описывать эти свойства для каждого абзаца, даже если на одной страничке находится 10 или 20 абзацев. А, представьте, что на сайте может быть 100 страниц . В итоге нужно двадцать или двести раз вставить один и тот же кусок HTML-кода в страничку, увеличивая размер файла.

А какая головная боль для программистов! Для облегчения жизни бедным веб-мастерам, были придуманы Cascading Style Sheets(CSS)

— каскадные таблицы стилей.

CSS действует другим, более удобным и экономичным способом. Для оформления абзацев в контенте сайта один раз прописывается код или стиль оформления. Этот код или описание стиля, сохраняется в отдельном файле. Далее нужно только при помощи HTML разметить текст на абзацы, а уж CSS позаботится об их оформлении. Код уменьшается в десятки и сотни раз.

Размещение описания стилей в отдельном файле очень удобно, особенно если на сайте больше одной страницы. Например, чтобы изменить оформление всех абзацев на сайте, достаточно изменить код в таблице стилей.

CSS совместно с HTML, позволяют творить чудеса, и все благодаря разделению труда по созданию веб-страниц. Разметка элементов страниц производится на основе HTML, а визуальное оформление элементам придается при помощи таблиц CSS

Таблицы стилей CSS — попытка отделить детали дизайна странички от ее структуры и содержания.

Пока это для вас китайская грамота. А я не буду строить из себя гуру и писать очередной самоучитель «Что такое HTML и CSS». Подобной информации вы найдете в интернете целый вагон, плюс к этому множество изданных учебников. Захотите углубиться в тему – флаг вам в руки. Не бойтесь, HTML и CSS весьма просты, и освоить их может любой чайник. Но торопиться с этим пока не стоит.

По собственному опыту знаю, что лучше не перегружать мозг чайника излишней информацией, иначе он, т.е. мозг, вскипит раньше времени. Не верьте умникам на различных сайтах, которые утверждают, что создание сайта необходимо начинать с изучения HTML и CSS . У меня для вас хорошая новость – вам не придется писать самим HTML-код, потому что умные люди придумали CMS.

< Как работает браузер		Что такое домен? Уровни домена >

Учебник HTML 5. Статья «Создание первой страницы»

В этом учебнике для создания HTML файлов мы будем использовать редактор Notepad ++, он предназначен для пользователей

Microsoft Windows и все примеры будут выполнены именно в нем.

Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets, он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets, то он подходит и для пользователей Microsoft Windows, вы можете впоследствии выбрать, что вам ближе.

Рассмотрим, как вы будете создавать свой первый HTML файл с использованием программы Notepad++.

Шаг 1: Откройте текстовый редактор

Нажмите кнопки WIN + R одновременно (аналог Пуск — Выполнить) при этом откроется диалог «Выполнить» впишите notepad++ и нажмите Enter (откроется программа

Notepad++), либо запустите программу Notepad++ через её ярлык.

Перед Вами откроется основное окно программы:

Рис. 2 Текстовый редактор Notepad++.

Шаг 2: Напишите несколько HTML тегов

Запишите в редактор следующий HTML код:

<!DOCTYPE html> <!-- декларация сообщает, что в этом документе используется пятая версия HTML -->
<html> <!-- корневой элемент HTML документа (все остальные элементы должны быть его потомками) -->
	<head>
		<title>Моя первая страница</title> <!-- обеспечивает название для документа -->
	</head>
	<body>  <!-- описывает видимое содержимое страницы  -->
		<h3> Это заголовок </h3> <!-- описывает заголовок второго уровня -->
		<p>Это параграф.</p> <!-- определяет параграф (абзац) -->
	</body>
</html> <!--закрывающий элемент (после него не должно быть каких-либо элементов) -->

Давайте разберем по частям, что мы сделали в этом примере:

Объявили декларацию <!DOCTYPE html>, которая определяет тип документа и сообщает браузеру, что необходимо интерпретировать код на языке HTML 5.
Добавили элементы <html> и </html>, которые определяют границы нашего HTML кода. Обращаю Ваше внимание, что после закрывающего тега </html> не должно быть никаких элементов.
В заголовочной части (от слова голова) нашего документа (между тегами <head> и </head>) мы разместили элементы <title> и </title>, которые определяют наименование нашей страницы — «Моя первая страница». Наименование страницы, которое вы указали отображается на вкладке любого браузера.
В теле нашей страницы, элементы <body> и </body> мы разместили заголовок второго уровня (<h3>) и абзац (<p>). Еще раз обращаю Ваше внимание, что видимое содержимое страницы помещается между тегами <body> и </body>.

В коде примеров этого учебника я буду давать дополнительные комментарии, выделенные светло-зеленым цветом. В HTML для создания комментариев в вашем коде используется специальный тег <!— … —>, текст внутри такого элемента не отображается браузером. Подробно использование комментариев мы рассмотрим далее в учебнике в статье «Комментарии и якоря».

Код HTML нашего примера в редакторе Notepad++:

Рис. 3 Пример создания HTML документа.

Шаг 3: Сохраните HTML страницу

Чтобы сохранить файл на вашем компьютере как HTML документ выберите в редакторе Файл > Сохранить как (либо сочетание Ctrl-Alt-S).

Вы можете не искать в списке тип файла, а сразу указать название файла с разрешением html. Назовите файл «index.html» и файл автоматически сохранится как HTML документ в кодировке UTF-8.

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

index.*. Это связано с тем, что отсутствует необходимость изменять конфигурацию файла веб-сервера, установленную по умолчанию.

После того как Вы сохранили ваш текстовый документ как HTML файл, редактор начинает выделять весь HTML код цветом (визуализация кода) — это одно из основных достоиноств текстовых редакторов

Окно сохранения в редакторе Notepad++:

Рис. 4 Сохранение текстового файла как HTML документ.

Шаг 4: Просмотр HTML страницы в браузере

Откройте Ваш сохраненный файл в браузере, результат должен выглядеть следующим образом:

Рис. 5 Пример отображения HTML документа в браузере.

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

При создании собственного сайта в заголовочной части страницы необходимо обязательно указывать кодировку символов для текущего документа (подробнее об этом вы узнаете в конце учебника в статье «Метаданные в HTML»).

Изменение настройки кодировки в браузере Chrome:

Рис. 6 Пример настройки кодировки в браузере Chrome.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив с текстовым файлом:

Используя полученные знания составьте следующую HTML страницу:

Практическое задание № 1.

Подсказка: используйте для первого заголовка на странице, тег заголовка первого уровня.

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

Фрагмент страницы примера в инструментах разрабочика браузера Chrome.

HTML — Структура html-документа и теги для его создания / ProgLang

HTML — расшифровывается как «язык гипертекстовой разметки» (англ. HyperText Markup Language), который является наиболее широко используемым языком для написания веб-страниц.

Гипертекст относится к способу связывания веб-страниц (HTML-документов). Таким образом, ссылка, доступная на веб-странице, называется гипертекстом.
Как следует из названия, HTML — это язык разметки, что означает, что Вы используете HTML, чтобы просто «разметить» текстовый документ с тегами, которые сообщают веб-браузеру, как структурировать его для отображения.

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

Теперь HTML широко используется для форматирования веб-страниц с помощью различных тегов, доступных на языке HTML.

HTML-документ

В следующем примере показан HTML-документ в простейшей форме:

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h2>Заголовок</h2>
    <p>Здесь содержание документа...</p>
  </body>
</html>

Давайте сохраним код в HTML-файле document.html с помощью вашего любимого текстового редактора. И откройте файл с помощью веб-браузера, такого как Internet Explorer, Google Chrome или Firefox и др. Он должен показать следующий результат:

Теги для создания HTML-документа

Как уже говорилось ранее, HTML является языком разметки и использует различные теги для форматирования содержимого. Эти теги заключены в угловые скобки . Большинство тегов имеют соответствующие закрывающие теги, за исключением нескольких тегов. Например, тег <html> имеет закрывающий тег </html> и тег <body> имеет тег закрытия </body> и другие.

В приведенном выше примере используются следующие теги для создания HTML-документа:

Тег Описание
<!DOCTYPE…> Этот тег определяет тип документа и версию HTML.
<html> Этот тег охватывает полный HTML-документ и в основном состоит из заголовка документа, который представлен тегами <head>…</head> и телом документа, которое представлено тегами <body>…</body>.
<head> Этот тег представляет заголовок документа, который может содержать другие html-теги, такие как <title>, <link> и т.д.
<title> Тег <title> используется внутри тега <head>, чтобы указать название документа.
<body> Этот тег представляет тело документа, в котором хранятся другие html-теги, такие как <h2>, <div>, <p> и другие.
<h2> Этот тег представляет заголовок.
<p> Этот тег представляет абзац.
Знание этих тегов вполне хватит чтобы создать html-документ (html-страницу).

Чтобы изучить HTML, Вам нужно знать различные теги и понимать, как они ведут себя при форматировании текстового документа. Учить HTML легко, так как пользователям нужно только выучить использование разных тегов, чтобы отформатировать текст или изображения, тем самым сделать красивую веб-страницу.

Консорциум World Wide Web (W3C) рекомендует использовать строчные теги, начиная с HTML 4.

Структура HTML-документа

Структура типичного HTML-документа будет иметь следующий вид:

Тег декларации документа <html> <head> <title>Теги, связанные с заголовком документа</title> </head> <body> Теги, связанные с телом документа </body> </html>

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

Декларация <!DOCTYPE>

Тег декларация <!DOCTYPE> используется веб-браузером для понимания версии HTML, используемой в документе. Текущая версия HTML — 5, и она использует следующее объявление:

<!DOCTYPE html>

Существует много других типов объявлений, которые могут использоваться в документе HTML в зависимости от того, какая версия HTML используется. Мы увидим более подробную информацию об этом при обсуждении тега <!DOCTYPE…> вместе с другими тегами HTML.

Поделитесь:

Разбираем HTML документ — Как создать сайт

Разбираем код HTML-документа
Урок №3
Разбираем HTML код

Давайте разберём, что означает каждая часть нашего кода HTML-документа, введённого в Блокнот на прошлом уроке:

<html> <head> <title>Название страницы</title> </head> <body> <h2>Заголовок статьи</h2> <p> Абзац статьи.</p> </body> </html>

Но для начала узнаем, что такое HTML-тег или просто «тег»?

Тег — основа языка HTML

Основной частью языка HTML является — тег. HTML документ (как и весь html-код) и состоит и тегов. Тег содержит в себе имя и угловые скобки, которые расположены по бокам — <имяТега>:

<p> — это один из множества, различных HTML-тегов, означает абзац.

Теги бывают открывающими и закрывающими. У закрывающих тегов перед именем стоит косая черта (слэш) /

<p> — открывающий тег.
</p> — закрывающий тег.

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

У тегов разные имена и каждое имя означает какой либо элемент HTML-страницы: заголовок статьи, абзац (параграф) статьи, фотографию, ссылку, кнопку и т.п.

Рассмотрим другие теги используемые в нашем HTML коде.

Теги <html> </html> — начало и конец HTML-документа

Возвращаемся к нашему HTML документу:

<html> <head> <title>Название страницы</title> </head> <body> <h2>Заголовок статьи</h2> <p> Абзац статьи.</p> </body> </html>

Каждый HTML-документ начинается с открывающегося тега <html> и заканчивается закрывающимся тегом </html>

Теги <head> </head> и <body> </body> — голова и тело HTML-документа

Между тегами <html> </html> располагаются два блока.
1. Первый блок начинается и заканчивается тегами <head> </head> — их называют головой HTML-документа.
2. Второй блок начинается и заканчивается тегами <body> </body> — их называют телом HTML-документа.

<html> <head> <title>Название страницы</title> </head> <body> <h2>Заголовок статьи</h2> <p> Абзац статьи.</p> </body> </html>

1. <head> </head> — голова HTML-документа.
2. <body> </body> — тело HTML-документа, между этими тегами располагается основная информация страницы: заголовки, абзацы, фотографии, ссылки, кнопки и т.д.

Теги <title> </title> — название HTML-страницы

<html> <head> <title>Название страницы</title> </head> <body> <h2>Заголовок статьи</h2> <p> Абзац статьи.</p> </body> </html>

В голове между тегами <head> </head>, располагаются теги
<title> </title>. Между тегами <title> </title> помещают текст, который выступает в качестве названия страницы.

В нашем примере, между тегами <title> </title>, находится текст:
Название страницы

Текст помещённый между тегами <title> </title> появляется в двух местах, в виде названия окна браузера и в виде названия вкладки браузера:

Название страницы, которую вы сейчас читаете, содержит следующий текст:
Разбираем код HTML-документа. Выясняем что такое тег.

Теги <h2> </h2> и <p> </p> — заголовок и абзац статьи

<html> <head> <title>Название страницы</title> </head> <body> <h2>Заголовок статьи</h2> <p> Абзац статьи.</p> </body> </html>

В теле нашего HTML-документа, между тегами <body> </body>, располагаются два вида тегов:
<h2> </h2> — теги заголовока статьи,
<p> </p> — теги абзаца статьи.

<h2> </h2> — между этими тегами располагается текст, который является заголовком статьи.
Например, текст заголовока статьи, которую вы сейчас читаете содержит следующее:
Разбираем HTML код

<p> </p> — между этими тегами располагается текст, который является абзацем статьи.
Например, второй абзац статьи, которую вы сейчас читаете, содержит следующее:
Но для начала узнаем, что такое HTML-тег или просто «тег»?

Обобщаем материал по структуре HTML-документа:

Каждый HTML-документ начинается и заканчивается тегами <html> </html> Каждый HTML-документ состоит из двух блоков, головы и тела:
1. <head> </head> — голова HTML-документа,
2. <body> </body> — тело HTML-документа.

В голове HTML-документа между тегами <head> </head>, располагаются теги <title> </title> и некоторая служебная информация о странице (мета-теги), которую мы изучим чуть позже.

В теле HTML-документа между тегами <body> </body>, располагается основной контент: тексты, изображения, формы, которые обрамлены тегами заголовков h2, абзацев p, изображений img, ссылок a, кнопок input и т.д.

Читать далее: Добавляем статью в HTML-документ

Дата публикации поста: 3 апреля 2019

Дата обновления поста: 15 октября 2014

Навигация по записям

HTML-уроки. Моя первая страница | Заметки программиста

Осваивать язык html лучше всего самостоятельно создавая интернет странички. Для начала определим где будут хранится файлы нашего сайта. Например, я на диске D: создам папку «HTML-уроки», в ней подпапку «Урок 1». В дальнейшем у нас будут добавляться еще подпапки для картинок, css и т.п.
Теперь открываем редактор (например Блокнот Windows или Nodepad++) и набираем в нем html-код:

<html> <head> <title> Урок 1 <title> </head> <body> <h2>Моя первая html-страничка</h2> <p>А это текст моей первой html-странички.</p> </body> <html>

Теперь файл надо сохранить в нашу папку — жмем «Сохранить как…» -> «D:\HTML-уроки\Урок 1» и указываем имя index.html или index.htm Какая разница html с htm? Разница между html и htm в единственной лишней букве расширения имени файла. Больше распространено именно html, но ничто не мешает сокращать по своему усмотрению. Такое расширение происходит от полного названия языка гипертекстовой разметки – Hyper Text Markup Language. Последнее слово опускается, и получается htm.
После того как файл сохранен мы можем посмотреть нашу первую страничку открыв его в браузере.
Давайте теперь разберемся что мы написали в нашем файле index.htm:

Тег <hеаd> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Содержимое этого тега не отображается напрямую на веб-странице, за исключением тега.

Тег <titlе> определяет заголовок документа.

Тег <bоdy> предназначен для хранения содержания веб-страницы (контента).

Теги <Н1>, <Н2>, <Н3>, <Н4>, <Н5>, и <Н6> это заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Тег <Н1> наиболее важный заголовок первого уровня, а <Н6> является наименее значительным.

Тег <р> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой.

Похожие записи

Якорь в HTML | Закладка на веб-странице

Якорь в HTML | Закладка на веб-странице

Якорь в HTML – закладка на веб-странице, открывающая документ в месте установки якоря после перехода по ссылке на него.

По-умолчанию, html-документ открывается со своего начала. Чтобы направить пользователя в заданное место html-страницы, там устанавливают html-якорь и делают ссылку на него. Переход по ссылке на html-якорь откроет страничку сайта (блога) ИМЕННО в месте установки якорька. Якорь в html используется для целевого направления юзера сайта (читателя блога) в конкретное место веб-страницы, например – посредством создания меню-оглавления статьи со ссылками на расставленные в тексте якоря.

Сия статья сделана исключительно закладками-якорями. В ключевые разделы и заголовки текста установлены якори, а пункты меню оглавления – выступают ссылками на них. Кликая по ссылкам в оглавлении статьи, юзер посещает места установки якорей – требуемые разделы тела текста статьи. Перемещаясь по закладкам сего веб-документа легко понять назначение, устройство и принцип работы html-якорей

Создать (установить) якорь

Якорь «name»

Якорь «id»

Ссылка на якорь

Покрасить якорь

Якорь на картинку

Создать (установить) якорь

Создать (установить) якорь на веб-странице – вставить в html-документ код якоря с уникальным его именем в пределах устанавливаемой страницы. Уникальное имя якоря содержит минимум три латинских символа в любой комбинации, с добавлением (при желании) цифирь, дефиса («знак минус») и нижнего подчеркивания. Пробелы и служебные символы («,/><[]{}) в написании якорного имени не приветствуются. Количество якорей на веб-странице не ограничено, якоря с одинаковым именем – не работают. Различают якорь-«name» и «id»-якорь.

Якорь «name»

Код якоря «name» создается присутствием устаревшего и безобиднейшего атрибута «name» в теге «a». Код якоря устанавливается непосредственно в оформляемый элемент текста статьи-контента веб-страницы:

<a name=»уникальное_имя_якоря»> видимая часть текста </a>

Якорь «name» прост и безопасен в обращении, а потому – используется большинством журналистов-литераторов. Код якоря снова и опять поддерживается любимым сайтовым текстовым редактором TinyMCE. Абсолютная ссылка на якорь прекрасно индексируется поисковыми системами, при наличии уникальности видимой части ссылки и якоря.

Установка якоря «name» не требует особого познания HTML и делается в один клик текстового редактора TinyMCE (кнопка «Вставить якорь»). Якорь устанавливается курсором в любом месте текстовой части веб-страницы без тяжелых последствий для работы её шаблона.

Размеры name-якоря на экране монитора определяются видимой частью текста. При отсутствии буквей и цифрей наполнения видимой части – высота и ширина установленного якоречка равны нолю (невидимый якорь).

Судьба атрибута «name» в HTML сложна и полна противоречий. Долгие и нудные попытки отказаться от целенаправленного безопасного якоря-name в пользу распрекрасного универсального якоря-id ни к чему хорошему не привели. Якорь «name» остается любимым и безопасным инструментом веб-мастеров, не смотря на древность сюжета. Якорь-name рулит простым юзерам.

Якорь «id»

Якорь «id» создается присутствием универсального идентификатора – атрибута «id» в коде блочного элемента html-разметки веб-страницы:

<div> видимая часть </div>

Код «id»-якоря устанавливается исключительно редактированием исходного html-кода статьи-контента веб-документа или шаблона сайта (блога). Видимая часть, открывающий и закрывающий теги – обязательны! При необходимости, тег «div» – заменить на требуемый, вида <p> (абзац), <h5> (заголовок), <ol>, <ul> (списки), <table> (таблица) примерно так:
<table> тело таблицы …
<ol> нумерованный список …
<р> текст, абзац </р>

</Не забить на закрывающие теги!>

Без видимой части, якорь-«id» работает в браузере исправно. Однако, зачем на странице пустой абзац, список или заголовок – поисковикам понять не суждено.

HTML5, вместо устаревшего атрибута name – требует для якоря атрибут id. Использование универсального идентификатора атрибута id рекомендовано к применению опытным веб-мастерам (администраторам ресурса) и совершенно противопоказано рядовым сайто-литераторам многопользовательских сайтов. Ибо, нет лучше и проще способа сковырнуть работу шаблона страницы, чем указать в id-имени якоря имя существующего идентификатора id из шаблона разметки веб-документа. Отличный результат гарантирован. Два «id» с одним именем не работают! Замечательные сайтовые грабли! За сим, несмотря на старомодность и не совсем валидность, атрибут name рулит на многопользовательских сайтах в любом блочном элементе и классно индексируется поисковиками:

<h5><a name=»yakor»>Якорь</a></h5>

Редактор TinyMCE пропускает якорь «name» исключительно в невидимом состоянии и превращает верхнюю строчку в вид:

Принципиально, в «id»-якоре использовано свойство браузера выполнять навешенный код при переходе на «id». Прицепив кусок CSS-стиля к «id»-якорьку, раскрасить открываемую железяку не составит труда. Якорь «name» не красится в TinyMCE. Вариантов покраски якоряменять

Покрасить якорь

Покрасим открытый якорь, используя псевдокласс CSS «target», изменяющий стиль открываемого элемента. Переход на якорь, клик по ссылке >>> Покрасить якорь откроет текст акоря в новом виде, с красной заливкой. Уместно собственное форматирование CSS-стилей.

Текст крашенного открытого якоря красным (red) фоном отсвечивает пользователю, пока он находится по адресу якоря «#red».
Код открываемого крашенного якорька (соблюдать пробелы):
CSS
<style>
.red:target { background: red; } /* (red) фон открытого якоря */
</style>
HTML
<p>Текст абзаца с красным (red) фоном, после открытия якоря</p>

Код с тегом «а» не пропускает текстовый редактор движка, TinyMCE. Теги span, div и абзац (р) работают прекрасно. Зачем такие крайности? Например, якоря ведут на рядом стоящие слова. Соответственно, переходы открывают, практически одно и тоже место страницы. Покрасить – понятнее и точнее смысл перехода.

Ссылка на якорь

Ссылка на якорь создаётся присутствием атрибута href в теге «a». В ссылке на якорь, к адресу веб-документа с якорем добавляется решётка # + имя якоря. Подобно сородичам, ссылка на якорь бывает абсолютной и относительной. Абсолютная ссылка работает везде, относительная – в пределах родного сайта или страницы, в зависимости от указанного пути. Абсолютные ссылки используют для якорей расположенных на других страницах (сайтах, доменах). Количество и место расположения абсолютных ссылок на якорь не ограничено. Переход на якорь по абсолютной ссылке происходит с перезагрузкой веб-страницы в браузере. Использование абсолютной ссылки на одной странице с якорем не желательно – не экономно расходуется трафик и время открытия якоря. Пользователь обидится и уйдет.

Относительная ссылка, в пределах веб-страницы

<a href=»#razdel»>ТЕКСТ ССЫЛКИ</a>
где, razdel – уникальное имя якоря в пределах html-документа, а ТЕКСТ ССЫЛКИ – видимая текстовая часть (анкор). Якорь и ссылка на него находятся в пределах страницы сайта (блога). Полный путь к якорю в ссылке указать не обязательно, достаточно решётки и имени якоря. Браузер автоматом найдёт якорь на странице

Абсолютная ссылка на якорь, установленный на другой странице или домене

<a href=»http://tehnopost.info/adress-stranici.html#razdel»>ТЕКСТ ССЫЛКИ</a>
Якорь и ссылка на него находятся на разных страницах, сайтах, доменных именах (варианты). Абсолютная ссылка на якорь содержт полный путь (с указанием протокола, домена и т.д.) к веб-странице + решетка + имя якоря.

Ссылка с указанием полного пути называется абсолютной ссылкой.
Абсолютные ссылки можно использовать для любых якорей, даже находящихся на одной и той же странице. Абсолютные ссылки наиболее предпочтительны для SEO-оптимизации страницы и сайта, ибо, зачастую – якоря, на которые сделаны абсолютные ссылки – могут быть засчитаны поисковиком за абсолютно разные веб-адреса и тексты. И, даже – якоря, на которые сделаны абсолютные ссылки – могут предлагаться отдельными позициями при выдаче в СЕРП (страницу поисковой выдачи). По крайней мере, у Google такое иногда наблюдается.

Недостаток работы абсолютной ссылки на якорь – полная перезагрузка страницы из сервера. Т.е. переход на якорь происходит с полной перезагрузкой страницы в браузер, даже если якорь и ссылка на него находятся на одной странице. Полная перезагрузка страницы занимает дополнительное время, создаёт дополнительную нагрузку на сетевое подключение, дополнительно жрёт трафик пользователя и самое главное – не работает без подключённого Интернета (в локальном или автономном режиме).

Якоря на сайте нужны, чтобы направить пользователя СРАЗУ в заданное конкретное место веб-страницы и избавить бедолагу от ненужного листания и просмотра всего материала. При переходе по такой «заякореннной» ссылке – браузер сам автоматически прокрутит веб-страницу ИМЕННО до того места, где этот якорь установлен.

Назначение якоря на сайте

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

Из самых известных событий и проишествий на сайте, для которых могут понадобиться якоря – это отработка CSS-кода и Java-сценариев, а также автоматическое листание (скроллинг) браузером веб-страницы. О последнем событии и пойдёт речь в этой статье.

Зачем на сайте якоря

(вернуться к оглавлению)

Так уж устроены все веб-браузеры во всём мире, что абсолютно любой веб-документ они открывают, как новую книгу – исключительно! и только! со своего начала. Далее, каждый пользователь веб-ресурса должен сам листать и «скроллить» свою интернет-страничку. Происходит такое листание при помощи нехитрых приспособлений – клавиш, колёсика мышки, специальных боковых кнопок или простого и банального ёрзанья пальцем по экрану (при условии конечно, что этот экран сенсорный).

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

Чтобы направить пользователя СРАЗУ в заданное конкретное место веб-страницы и избавить бедолагу от ненужного листания и просмотра всего материала – в HTML используют якорь и ссылку на этот якорь. При переходе по такой «заякореннной» ссылке – браузер сам автоматически прокрутит веб-страницу ИМЕННО до того места, где этот якорь установлен. Пользователь будет спасён. Наступит всеобщий «тип-топ» и обильный «OK!».

Подведём-же теперь итоги и ответим на главный вопрос этой темы – зачем на сайте якоря:
– Якоря на сайте (в HTML) используются для целевого перенаправления пользователя в нужное место веб-страницы. Такое перенаправление может понадобиться в рекламных целях, или просто – по желанию другого пользователя. Например, если нужно сделать интерактивное меню-оглавление для большой статьи, типа как в настоящей статье.

Теория якорного дела

(вернуться к оглавлению)
Если коротко, то якорь в тексте веб-страницы и ссылка на этот якорь – это два различных и независимых элемента веб-разметки HTML, которые создаются при помощи одного и того-же тега – тега «а». Только атрибуты у этого тега используются разные. Атрибут «href» – для ссылки, атрибуты «name» и «id» – для якоря

При этом, атрибут «href» служит для создания параметров ссылки и задаёт путь (url), по которому отправится браузер после клика, сделанного по созданной ссылке. В свою очередь, атрибуты «name» и «id» создают идентификаторы для завершения этого пути в пределах веб-страницы, по которым браузер, собственно и находит «заякоренный текст» и которые, по сути своей и являются якорями – главной темой для этой статьи.

Общий вид конструкции кода ссылки выглядит так:
<a href=»URL»>текст ссылки</a>
в то время, когда код якоря имеет вид
<a name=»имя якоря»>текст якоря</a>, или

<a>текст якоря</a>

Якорь в HTML – как это работает

(вернуться к оглавлению)

Якорь – он якорь и есть.
Уже одно только слово «якорь» говорит о фиксации чего-либо.
В разметке HTML, якорь используется для фиксации места после открывания веб-страницы. В этом и проявляется главное назначение якоря в HTML – указать, наметить, «заякорить» точку на поле веб-страницы для последующего перехода к ней браузера пользователя после отрытия веб-страницы. В задачу якоря входит продолжение и дополнение действия обычной ссылки после открывания веб-страницы. При переходе по ссылке с якорем, браузер не просто откроет веб-страницу, а будет прокручивать и листать её до места установки якоря. Если, конечно этот якорь был предварительно установлен.

Технически, такой эффект вертикального прокручивания (скроллинга) при открывании веб-документа обеспечивается браузером после обработки им служебного символа «#» – решетки (без кавычек). Находясь в тексте ссылки, этот символ (#) делит её на две части, которые будут обработаны браузером последовательно и независимо друг от друга.

Это очень важно, что две части ссылки обрабатываются браузером раздельно и независимо. Рассмотрим на примере. Вот текст ссылки на веб-страницу с якорем, установленным на ней:
http://tehnopost.info/10-yakor-ankor-na-veb-stranice.html#zachem_nuzhnyi_yakorya

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

Сначала браузер обработает первую часть ссылки, до #. При этом, он найдёт веб-страницу в Интернете по указанному пути, скачает её код и отрисует веб-страницу на экране монитора.

Потом браузер обработает вторую часть ссылки, после #. При этом он будет читать полученный код страницы в поисках кода якоря – «zachem_nuzhnyi_yakorya».

Дальше будет так: Если браузер найдёт код якоря в полученном коде страницы – он пролистает её и откроет в месте установки кода якоря. Если нет – страница останется открытой, как и была – с самого своего начала.

Это и есть наше замечательное умозаключение:
Если якоря на странице нет, а ссылка на него есть – то такая веб-страница откроется всё равно. Просто она останется открытой с самого своего начала и браузер не будет ее прокручивать и листать. А куда крутить-то, ведь крутить-то некуда. Якорь-то не найден. Но страница – уже открыта в браузере и отрисована.на экране монитора. Там она и останется, пока пользователь не закроет её.

И это важно для SEO – поисковой оптимизации сайта

Якоря и SEO (поисковая оптимизация)

(вернуться к оглавлению)

Наличие якорей в тексте – очень актуально для больших статей и повышает общее ранжирование текста страницы у поисковиков, для которых, наличие якорей на странице – это один признаков, отличающих её от «портянки» (текста без форматирования).

Переход по ссылке на якорь фиксируется многими следящими (наблюдающими) системами, как поведенческий фактор. Ведь такой переход – это целевое направление пользователя, облегчающее его Интернет-жизнь. Стало быть, такой подход к разметке html-документа повышает юзабилити (удобство использования) ресурса, ибо скорость навигации по нём возрастает в разы.

Если якорей на странице много, то их можно просто нумеровать, придумав имя по теме статьи. Например, razdel1, razdel2, razdel3, и т.д.

Очень часто якорь делают невидимым и «АНКОР ЯКОРЯ» просто не указывают. В этом случае, анкор почти любой ссылки на такой якорь будет «в масть» для поискового продвижения страницы.

Если якорь видимый и «АНКОР ЯКОРЯ» указан, то с точки зрения SEO-оптимизации, анкоры (видимые части текста) якоря и ссылки на него должны, если не совпадать, то хотя-бы быть близкими по смыслу.

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

Якоря и верстальщики

Верстальщики очень часто используют в своей работе якоря. При чём, верстальщики невероятно любят локальные якоря – якоря в пределах домена. Такими якорями делается верстка простых менюшек. Преимущество – увеличении скорости навигации и возможность работа в не Сети.

Ограничения на количество якорей

(вернуться к оглавлению)

Не последним вопросом при установке якорей на странице, обстоит дело с их предельныи количеством. Есть-ли вообще какие-либо ограничения на количество якорей, расположенных на одной веб-странице?

Ответ, более чем прост – ограничения на количество якорей нет и быть не может. Поисковики относят якоря к обычным элементам управления (как кнопки), на количество которых ограничения накладывает только здравый смысл. Поэтому, якорей на веб-странице может быть сколько угодно. Если пользователю это нравится, то он может на каждое слово или букву – установить отдельный якорь.

Семантический HTML — Основы современной вёрстки
Основы современной вёрстки
При создании вёрстки нужно учитывать семантику, то есть смысловое (логическое) значение элементов.

Основная цель любой HTML-вёрстки — передача смысла блоков. Часто, помимо пользователей, по нашим страницам ходят и роботы. Они собирают и анализируют информацию страницы. К примеру, поисковые роботы просматривают всю страницу и определяют её полезность, а также уникальность. И если для человека достаточно просто поделить страницу на части и найти шапку, основной контент, футер, то для робота это достаточно сложная задача. Робот видит исключительно нашу вёрстку и не может «глазами» отделить части макета.

Вторая важная причина необходимости создания семантической вёрстки — использование страниц людьми с ограниченными возможностями. Слабовидящие пользователи используют «скринридеры» — устройства или приложения, воспроизводящие голосом элементы страницы. Чтобы скринридер мог правильно понять, где содержится основная информация, меню, поясняющие блоки и так далее, мы должны правильно разметить страницу. Это поможет устройствам правильно разбить страницу на логические блоки и дать возможность посетителям корректно перемещаться по странице. Такая концепция называется «Доступный WEB».

Запомните: минимальная доступность лучше, чем её отсутствие.

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

Шапка сайта

Верхняя область макета зачастую называется «шапкой» сайта. Она содержит название компании, основное меню, контактную информацию. Эта область очень важна для быстрой навигации по сайту, так как обычно содержит меню с основными разделами сайта.

Чтобы создать шапку сайта, используется парный тег header, внутри которого мы и располагаем необходимую информацию.

Один из примеров шапки сайта:

<header> <img src="/logo.png" alt="Логотип">  <div>  <ul> <li><a href="/">Главная</a></li> <li><a href="/about">О нас</a></li> <li><a href="/contacts">Контакты</a></li> </ul> </div> </header>

По своему поведению тег header работает так же, как и простой div. Почти все семантические элементы являются блочными и не имеют стилей по умолчанию. Это позволяет очень быстро добавить семантику в уже существующие проекты. Если стили в этих проектах не завязаны на тегах, то достаточно просто сменить название с div на header и мы получим уже семантичную шапку сайта.

Навигация

Попробуйте взглянуть на шапку сайта из примера выше глазами компьютера. Что он там видит?

Картинку.

Блочный элемент div.

Маркированный список.

Набор ссылок.

Если вы ещё не сверстали пару своих макетов, то по такому набору можете и не понять, что набор ссылок не что иное, как основное меню сайта. Вот и роботам не всегда просто это сделать. Конечно, они уже достаточно обучены, чтобы в таком простом наборе найти меню, но меню обычно может быть не одно и быть контекстно-зависимым. Тогда робот может принять за основное меню не то, что бы мы хотели.

Как же нам ему помочь? Для этого в стандарте HTML5 появился тег nav. Он обозначает навигационную область. Причём помочь отделить основное меню от меню раздела можно с помощью других тегов, речь о которых пойдёт ниже.

Заменим простой блочный элемент div на его семантичного брата nav:

<header> <img src="/logo.png" alt="Логотип">  <nav>  <ul> <li><a href="/">Главная</a></li> <li><a href="/about">О нас</a></li> <li><a href="/contacts">Контакты</a></li> </ul> </nav> </header>

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

Уникальный контент

Основной смысл каждой страницы — уникальный контент. Это самое главное, что должно быть на вашей странице. Пользователь вполне справится без меню или футера, но если на странице нет своего уникального контента, то страница бесполезна.

Для разметки уникального контента в стандарте HTML5 появился специальный тег main. Именно он поможет обозначить область с самым важным контентом на странице. Старайтесь в нём держать только контент. Обычно меню, боковые панели и футер в эту область не входят. Исключением может быть только ситуация, если эти блоки действительно уникальны для данной страницы. Например, меню может вести по разделам страницы. В таком случае оно на полных правах может быть включено в область уникального контента.

Добавим такую область в нашу вёрстку:

<header> <img src="/logo.png" alt="Логотип">  <nav>  <ul> <li><a href="/">Главная</a></li> <li><a href="/about">О нас</a></li> <li><a href="/contacts">Контакты</a></li> </ul> </nav> </header> <main> <h2>Хекслет — практические курсы по программированию</h2> <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p> <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p> <p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p> </main>

Наличие тега main также очень важно для мобильных браузеров. Вы могли видеть, что многие из них имеют функцию «Режим чтения». При его включении браузер автоматически удалит всё оформление и все ненужные блоки, оставив только главный контент. Этим контентом и будет являться область, заключённая в тег main. Такой режим отлично подходит для людей, у которых, в настоящий момент, слабое подключение к интернету.

Так как внутри main содержится уникальный контент страницы, то разрешено использовать только один такой тег на странице.

Секции

Контент на странице не является однородным. Обычно это цепочка логических областей, каждая из которых описывает что-то конкретное. Например, на странице могут присутствовать область с описанием преимуществ, цены, формы и так далее. Их хочется как-то выделить. И на это есть несколько причин:

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

Правильная группировка разделов — важная часть при создании доступного web’а.

Для таких самостоятельных логических единиц существует специальный тег section, который внутри себя может содержать одну конкретную секцию. Добавим её в наш пример:

<header> <img src="/logo.png" alt="Логотип">  <nav>  <ul> <li><a href="/">Главная</a></li> <li><a href="/about">О нас</a></li> <li><a href="/contacts">Контакты</a></li> </ul> </nav> </header> <main> <h2>Хекслет — практические курсы по программированию</h2> <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p> <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p> <p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p> <section> <h3>Преимущества</h3> <ul> <li>Много теории</li> <li>Много практики</li> <li>Много менторов</li> </ul> </section> </main>

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

Как быстро определить, стоит ли включать участок контента в отдельную секцию? Всё очень просто: если вы можете описать участок контента в одном или двух словах (преимущества, цены, форма заказа, каталог, контакты и так далее), то с большой вероятностью этот участок является самостоятельной секцией.

Независимые секции

Другим способом выделить логический участок текста является использование тега article. Может показаться, что какой смысл иметь два различных тега для выделения одного и того же?

Между section и article есть одна существенная разница: article является независимой секцией, то есть её можно перенести на любую страницу сайта или даже на другой сайт, и при этом она не потеряет своего контекста.

Представьте себе блог и отдельную статью в нём. Можем ли мы понять статью, если она вдруг окажется не в блоге, а, например, на странице с услугами? Конечно! Ведь статья — это законченный текст. Следовательно, такую статью можно обернуть в тег article.

Добавим колонку новостей в наш пример вёрстки. Сразу подумаем, как она может быть разделена. Сами по себе новости являются достаточно уникальным элементом, ведь даже если их перенести на другую страницу, то они не потеряют свою актуальность. В этом случае каждую новость можно обернуть в article. А что делать с обёрткой блока? Она объединяет по смыслу несколько различных новостей, её можно спокойно назвать одним словом, и она точно будет иметь свой заголовок. Следовательно, ей подойдёт тег section.

<header> <img src="/logo.png" alt="Логотип">  <nav>  <ul> <li><a href="/">Главная</a></li> <li><a href="/about">О нас</a></li> <li><a href="/contacts">Контакты</a></li> </ul> </nav> </header> <main> <h2>Хекслет — практические курсы по программированию</h2> <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p> <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p> <p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p> <section> <h3>Преимущества</h3> <ul> <li>Много теории</li> <li>Много практики</li> <li>Много менторов</li> </ul> </section> <section> <h3>Новости</h3> <article> <h4>Новость 1</h4> <p>Текст новости 1</p> <a href="#">Подробнее</a> </article> <article> <h4>Новость 2</h4> <p>Текст новости 2</p> <a href="#">Подробнее</a> </article> <article> <h4>Новость 3</h4> <p>Текст новости 3</p> <a href="#">Подробнее</a> </article> </section> </main>

Дополняющие секции

Ещё одним крупным контейнером для нашего контента служит тег aside. Это область с дополнительной информацией. Она может быть как связана с текущей страницей, так и не очень. Подобные секции вы можете встречать в виде боковых панелей на сайтах. Там содержится дополнительное меню, баннеры, реклама и другая информация.

Обратите внимание, что aside не обязан являться боковой панелью по внешнему виду. Это может быть даже дополнительная информация внутри статьи. Но чаще всего внешнее оформление у такого тега именно в виде боковой панели.

Давайте добавим такую информацию в нашу вёрстку. Внутри этой дополнительной секции будет находиться ещё одно меню, которое не будем оборачивать в nav, так как оно не является основным.

<header> <img src="/logo.png" alt="Логотип">  <nav>  <ul> <li><a href="/">Главная</a></li> <li><a href="/about">О нас</a></li> <li><a href="/contacts">Контакты</a></li> </ul> </nav> </header> <aside> <div> <a href="#">Необязательный пункт 1</a> <a href="#">Необязательный пункт 2</a> <a href="#">Необязательный пункт 3</a> </div> </aside> <main> <h2>Хекслет — практические курсы по программированию</h2> <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p> <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p> <p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p> <section> <h3>Преимущества</h3> <ul> <li>Много теории</li> <li>Много практики</li> <li>Много менторов</li> </ul> </section> <section> <h3>Новости</h3> <article> <h4>Новость 1</h4> <p>Текст новости 1</p> <a href="#">Подробнее</a> </article> <article> <h4>Новость 2</h4> <p>Текст новости 2</p> <a href="#">Подробнее</a> </article> <article> <h4>Новость 3</h4> <p>Текст новости 3</p> <a href="#">Подробнее</a> </article> </section> </main>

Дополнительное задание

Создайте файл index.html на своём компьютере и создайте собственное резюме. Используйте изученные в этом уроке теги.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.
Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

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

расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;

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

Об обучении на Хекслете

HTML-теги на HTML.com

Элемент HTML Figure: вот как он определяет автономное содержимое Элемент
определяет автономное содержимое, связанное с основным содержимым, например изображение, таблицу или диаграмму . Элемент
часто вложен в элемент
, чтобы добавить заголовок к содержимому, идентифицированному тегами
.

Как выровнять текст по центру с помощью CSS [HTML не рекомендуется] Элемент использовался для определения текста, который должен быть центрирован при отображении в браузере.Однако этот элемент устарел, и правильный и современный способ выравнивания текста по центру — с помощью CSS.

HTML-код: его можно использовать, но поддерживает ли его ваш браузер? Элемент используется для определения значений автозаполнения для связанного элемента . Предлагаемые значения автозаполнения добавляются в список данных путем вложения одного или нескольких элементов

Как использовать (для создания гиперссылок) в HTML Элемент или элемент привязки, он используется для создания гиперссылки на другую веб-страницу или другое место на той же веб-странице.Гиперссылка, созданная элементом привязки, применяется к тексту, изображению или другому содержимому HTML, вложенному между открывающим и закрывающим тегами .

Заголовок таблицы HTML: вот код для его создания Элемент
используется для добавления заголовка к таблице HTML. должен появляться в документе HTML как первый потомок родительского , но он может быть расположен визуально внизу таблицы с помощью CSS.

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

Элемент Blink в коде: вот почему это плохая идея Элемент был экспериментальной функцией, с помощью которой можно было заставить замкнутый текст мигать. Он никогда не добавлялся в спецификацию HTML и не должен использоваться современными веб-сайтами.

Создание кнопки с помощью элемента HTML Button: вот как Элемент

Правильное использование сильного элемента в HTML (пример кода Plus) Элемент используется для идентификации текста, который имеет большее значение, чем окружающий текст. По умолчанию все браузеры отображают текст жирным шрифтом.

: Это код для объявления DOCTYPE в HTML5 Объявление используется для информирования браузера посетителя веб-сайта о том, что отображаемый документ является документом HTML. Хотя на самом деле это не элемент HTML, каждый документ HTML должен иметь объявление DOCTYPE, чтобы соответствовать стандартам HTML.

Элемент статьи HTML: узнайте, когда (и где) использовать его сейчас Элемент
идентифицирует автономный фрагмент контента, который теоретически может быть распространен на другие веб-сайты и платформы как отдельная единица.Элемент
— хороший выбор для размещения целых сообщений в блогах, новостных статей и подобного контента.

HTML-тег Элемент генерирует пару открытого и закрытого ключей и отправляет открытый ключ на сервер с отправкой формы. Предполагается, что этот элемент устарел и не имеет широкой поддержки браузерами.

HTML-тег

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

HTML-заголовки: полное руководство по добавлению заголовков для структуры документа Элементы
,
,
,
,
и
используются для создания заголовков в по убыванию важности, где
является наиболее важным, а
наименее важным.

Тег HTML

Элемент
может дополнительно использоваться для группировки связанных полей в форме HTML.

Тег HTML Элемент

Тег комментария HTML: вот как его использовать в вашем коде Этот элемент используется для добавления комментария к документу HTML.Комментарий HTML начинается с , а закрывается с ––> . Комментарии HTML видны всем, кто просматривает исходный код страницы, но не отображаются при отображении документа HTML в браузере.

Быстрое и легкое создание HTML-таблицы с помощью нашего примера кода Элемент используется вместе с дочерними элементами, такими как ,
, и другими, для добавления табличных данных в документ HTML.

Новый аудиоэлемент HTML: освоите это сейчас с помощью нашего примера кода Элемент

Дополнительный элемент HTML5: вот хорошее (и не очень) его использование Элемент
используется для идентификации контента, который связан с основным контентом веб-страницы, но не является основным содержание страницы.Информация об авторе, связанные ссылки, связанный контент и рекламные объявления - это примеры контента, который может быть найден в элементе aside.

Abbr HTML-тег: когда его использовать с сокращениями Элемент используется вместе с атрибутом title для связывания полнотекстового объяснения с аббревиатурой или акронимом. Посетители веб-сайта не видят текст в атрибуте title, но браузеры, поисковые системы и вспомогательные технологии используют эту информацию.

Все еще используете теги HTML Marquee? Узнайте, почему их не рекомендуют Элемент использовался для определения текста, который должен перемещаться по определенному разделу веб-страницы в горизонтальном или вертикальном направлении. Элемент устарел и больше не должен использоваться. Для создания подобных эффектов можно использовать CSS или JavaScript.

Как использовать ввод для создания полей формы в HTML: Easy Tutorial Элемент используется для создания полей формы, которые принимают вводимые пользователем данные.Элементы формы могут быть представлены множеством различных способов, включая простые текстовые поля, кнопки, флажки, раскрывающиеся меню и т. Д., Путем установки соответствующего значения атрибута type элемента ввода.

Код HTML-формы для начинающих (и когда его использовать) Элемент
используется для создания HTML-формы. Элемент на самом деле не создает поля формы, но используется как родительский контейнер для хранения полей формы, таких как элементы и .</td> </tr> <tr> <td> Тег HTML Body: Master Самый важный элемент HTML сейчас </td> <td> Элемент <body> содержит все содержимое веб-страницы. Это должен быть второй элемент внутри родительского элемента <html>, следующий только за элементом <head>. </td> </tr> <tr> <td> Лучший HTML-элемент для добавления мультимедиа? Узнать сейчас </td> <td> Элемент <embed> создает встроенную панель, на которой может запускаться стороннее приложение, например объект на основе Flash. </td> </tr> <tr> <td> Использование тега HTML для создания встроенных фреймов: вот как </td> <td> <iframe> создает встроенный фрейм, который встраивает независимый документ HTML в текущий документ.</td> </tr> <tr> <td> Что делает в HTML: простое руководство с примером кода </td> <td> Элемент <label> используется для связывания текстовой метки с полем формы <input>. Метка используется, чтобы сообщить пользователям значение, которое следует ввести в соответствующее поле ввода. </td> </tr> <tr> <td> Использование br для вставки разрывов строк в HTML: вот как </td> <td> Элемент <br> используется для вставки разрыва строки или возврата каретки в родительский элемент, например абзац, без выхода за пределы родительского контейнера.</td> </tr> <tr> <td> Почему B для жирного шрифта является допустимым HTML (но не рекомендуется) </td> <td> Элемент <b> используется для привлечения внимания к заключенному тексту, не придавая особого значения или акцента. Текст, окруженный тегами <b>, отображается жирным шрифтом. </td> </tr> <tr> <td> Пример кода для тегов HTML Hr (и какие браузеры их поддерживают) </td> <td> Элемент <hr> используется для представления тематического разрыва между элементами уровня абзаца. Обычно он отображается как горизонтальная линия.</td> </tr> <tr> <td> Решение проблем с макетом Td в HTML5 - Краткое руководство </td> <td> Элемент <td> создает одну ячейку данных в HTML <table>. Ячейки данных должны использоваться как дочерние элементы родительского <tr>, а результирующая группа элементов <td> будет отображаться как одна строка таблицы в <table>. </td> </tr> <tr> <td> HTML-теги Руководство по добавлению изображений в ваши веб-документы </td> <td> Тег <img> используется для вставки изображения в документ.</td> </tr> <tr> <td> Роль в HTML-формах (для создания раскрывающихся списков) </td> <td> Элемент <select>, используемый вместе с одним или несколькими элементами <option>, создает раскрывающийся список параметров для веб-формы. Элемент <select> создает список, и каждый элемент <option> отображается как доступный параметр в списке. </td> </tr> <tr> <td> Узнайте, что делает заголовок HTML (новый тег семантического документа) </td> <td> Элемент <header> используется для идентификации содержимого, которое предшествует основному содержимому веб-страницы и часто содержит брендинг веб-сайта, элементы навигации, формы поиска и т. Д. контент, который дублируется на всех или большинстве страниц веб-сайта.</td> </tr> <tr> <td> Пример кода для Tr в HTML (для организации строк таблицы) </td> <td> Элемент <tr> используется для группировки значений <th> или <td> в одну строку заголовка таблицы или значений данных. Элемент <tr> может быть прямым потомком элемента <table> или быть вложенным в родительский элемент <thead>, <tfoot> или <tbody>. </td> </tr> <tr> <td> Как использовать для добавления правил стиля CSS в документы HTML </td> <td> Элемент <style> используется для добавления правил стиля CSS в документ HTML.Ожидается, что элемент появится в документе <head>, но также будет приемлемо отображаться при использовании в <body> документа. </td> </tr> <tr> <td> Элемент HTML P: код для идентификации текста абзаца </td> <td> Элемент <p> используется для идентификации блоков текста абзаца. Закрывающий тег <p> является необязательным и подразумевается открывающим тегом следующего HTML-элемента, встречающегося в HTML-документе после открывающего тега <p>. </td> </tr> <tr> <td> Атрибуты HTML5 Textarea: вот что вам следует знать </td> <td> Элемент <textarea> используется для создания области ввода текста неограниченной длины.По умолчанию текст в <textarea> отображается моноширинным шрифтом или шрифтом фиксированной ширины, а текстовые области чаще всего используются в родительском элементе <form>. </td> </tr> <tr> <td> Тег HTML <head> </td> <td> Элемент <head> содержит информацию о документе HTML, который используется браузерами и поисковыми роботами, но не отображается для посетителей веб-сайта. </td> </tr> <tr> <td> HTML-тег <app> </td> <td> Элемент <app> был предшественником элемента <applet>, который не рекомендуется использовать в HTML 4.01 и полностью удален из спецификации в HTML5. Современные эквиваленты включают <объект> и <embed>. </td> </tr> <tr> <td> <nav> HTML-тег </td> <td> Элемент <nav> определяет группу навигационных ссылок. Ссылки в элементе <nav> могут указывать на другие веб-страницы или на разные разделы одной и той же веб-страницы. </td> </tr> <tr> <td> HTML-тег <comment> </td> <td> Элемент <comment> был экспериментальным способом добавления комментариев к HTML-коду, которые не отображались браузером.Он никогда не добавлялся в спецификацию HTML и не поддерживается современными браузерами. </td> </tr> <tr> <td> HTML-тег <noframes> </td> <td> Элемент <noframes> использовался в родительском <frameset> для предоставления резервного содержимого для пользователей, чьи браузеры не поддерживали содержимое <frame>. Фреймы устарели, поэтому элемент <noframes> не должен использоваться на современных веб-сайтах. </td> </tr> <tr> <td> Как использовать в вашем HTML </td> <td> Элемент <noscript> содержит HTML-контент, который будет отображаться, если пользователь, просматривающий веб-страницу, сделает это с помощью браузера, который не поддерживает сценарии или отключил сценарии.</td> </tr> <tr> <td> <div> HTML-тег </td> <td> Элемент <div> определяет произвольный блок содержимого, который может быть размещен и оформлен как единый блок. </td> </tr> <tr> <td> Как использовать теги <frame> в вашем HTML-коде </td> <td> Элемент <frame> использовался для разбиения одного окна браузера на несколько независимых контекстов просмотра. Фреймы устарели и не должны использоваться на современных веб-сайтах. </td> </tr> <tr> <td> HTML-тег <address> </td> <td> Элемент <address> определяет контактную информацию, относящуюся к текущему сайту, странице, документу, разделу или статье.Его не следует использовать для идентификации адресов в каком-либо другом контексте. </td> </tr> <tr> <td> HTML-тег <applet> </td> <td> Элемент <applet> использовался для добавления Java-апплетов в HTML-документ. Этот элемент объявлен устаревшим в HTML 4.01 и полностью удален из спецификации HTML с выпуском HTML5. Современные эквиваленты включают <объект> и <embed>. </td> </tr> <tr> <td> HTML-тег <area> </td> <td> Элемент <area> используется как дочерний элемент <map> для определения интерактивной области на карте изображения.Различные области карты изображения могут быть связаны гиперссылками с разными местоположениями, вложив несколько элементов <area> в один элемент <map>. </td> </tr> <tr> <td> HTML-тег <base> </td> <td> Элемент <base> используется для идентификации базового URL-адреса, на основе которого строятся все относительные URL-адреса, появляющиеся на веб-странице. Кроме того, если элемент <base> имеет целевой атрибут, целевой атрибут будет использоваться как атрибут по умолчанию для всех гиперссылок, появляющихся в документе.</td> </tr> <tr> <td> HTML-тег <basefont> </td> <td> Элемент <basefont> использовался для установки размера шрифта по умолчанию для HTML-документа. Устаревший в HTML 4.01 и полностью удаленный из HTML5, <basefont> не поддерживается современными браузерами, и стиль шрифта следует контролировать с помощью CSS. </td> </tr> <tr> <td> Тег HTML <bgsound> </td> <td> Элемент <bgsound> использовался для встраивания фоновой звуковой дорожки в документ HTML. Это было правильно реализовано только в Internet Explorer и больше не поддерживается.Элемент <audio> теперь можно использовать для добавления фоновых звуков, но звуковые дорожки, которые воспроизводятся автоматически и не могут быть отключены пользователем, настоятельно не рекомендуется в современном веб-дизайне. </td> </tr> <tr> <td> <big> HTML-тег </td> <td> Элемент <big> использовался для того, чтобы выделенный текст выглядел на один размер больше, чем окружающий текст. Этот чисто презентационный тег был удален из HTML5 и не должен использоваться. Вместо этого используйте CSS для управления размером шрифта. </td> </tr> <tr> <td> HTML-тег <blockquote> </td> <td> Элемент <blockquote> определяет блок текста, который является прямой цитатой.Элемент <quote> следует использовать, когда цитата представлена внутри окружающего текста, но когда цитата представлена в виде отдельного абзаца, <blockquote> является подходящим элементом для идентификации цитаты. </td> </tr> <tr> <td> <cite> HTML-тег </td> <td> Элемент <cite> определяет источник цитаты или творческой работы. Используйте элемент, чтобы идентифицировать имя, а не автора или создателя упомянутой творческой работы. </td> </tr> <tr> <td> <code> HTML-тег </td> <td> Элемент <code> используется для определения заключенного текста как компьютерного кода.Он часто сочетается с элементом <pre>, чтобы сохранить разрывы строк и отступы при представлении блоков компьютерного кода. </td> </tr> <tr> <td> Тег HTML <col> </td> <td> Элемент <col>, обычно реализуемый как дочерний элемент родительского элемента <colgroup>, может использоваться для нацеливания на столбец в таблице HTML. </td> </tr> <tr> <td> Тег HTML <colgroup> </td> <td> Элемент <colgroup> используется в качестве родительского контейнера для одного или нескольких элементов <col>, которые используются для целевых столбцов в таблице HTML.</td> </tr> <tr> <td> <dd> Тег HTML </td> <td> Элемент <dd> используется для объединения описания определения с термином определения родственного уровня, заключенным в теги <dt> в родительском списке определений. </td> </tr> <tr> <td> HTML-тег <ins> </td> <td> Элемент <ins> используется для идентификации текста, который был вставлен в документ. Он часто сочетается с элементом <del>, который идентифицирует удаленный текст, замененный текстом, содержащимся в элементе <ins>.</td> </tr> <tr> <td> Тег HTML <dfn> </td> <td> Элемент <dfn> используется для идентификации определяющего экземпляра термина в документе HTML. Когда термин заключен в теги <dfn>, браузеры и поисковые роботы поймут, что ближайший текст содержит определение термина. </td> </tr> <tr> <td> <dir> HTML-тег </td> <td> Элемент <dir>, устаревший начиная с HTML 4.01, использовался для создания списка имен файлов или содержимого каталога. Неупорядоченный список, созданный с помощью элемента <ul>, является подходящей современной заменой элемента <dir>.</td> </tr> <tr> <td> <dl> Тег HTML </td> <td> Элемент <dl> определяет список описаний. </td> </tr> <tr> <td> <dt> Тег HTML </td> <td> Элемент <dt> определяет термин в списке описания. </td> </tr> <tr> <td> <em> Тег HTML </td> <td> Элемент <em> используется для обозначения текста, который должен получить больший акцент, чем окружающий текст. </td> </tr> <tr> <td> Тег HTML </td> <td> Элемент <font> использовался для указания стилей типографского отображения.Он устарел, и вместо этого шрифты следует стилизовать с помощью CSS. </td> </tr> <tr> <td> HTML-тег <frameset> </td> <td> Элемент <frameset> использовался для создания группы фреймов, которые можно было стилизовать и контролировать как единое целое. Фреймы устарели и больше не должны использоваться. </td> </tr> <tr> <td> <html> Тег HTML </td> <td> Элемент <html> используется как контейнер для всего HTML всего документа. </td> </tr> <tr> <td> HTML-тег <hype> </td> <td> Элемент <hype> использовался для создания специфичного для браузера эффекта «Пасхальное яйцо».Он никогда не был добавлен в официальную спецификацию HTML и больше не поддерживается ни одним браузером. Не используйте это. </td> </tr> <tr> <td> <i> Тег HTML </td> <td> Элемент <i> используется, чтобы отличать слова от окружающего текста, выделяя выделенный текст курсивом без дополнительного выделения выделенных курсивом слов. </td> </tr> <tr> <td> HTML-тег <isindex> </td> <td> Элемент <isindex> использовался для создания однострочного запроса поиска для запроса содержимого документа.Реализация элемента была непоследовательной, а функциональность дублировалась элементами <form> и <input>. В результате <isindex> устарел в HTML 4.01. </td> </tr> <tr> <td> <kbd> Тег HTML </td> <td> Элемент <kbd> используется для идентификации текста, который представляет ввод с клавиатуры. Текст, окруженный тегами <kbd>, обычно отображается моноширинным шрифтом браузера по умолчанию. </td> </tr> <tr> <td> HTML-тег <legend> </td> <td> Элемент <legend> используется для добавления заголовка к группе связанных элементов <input> формы, которые были сгруппированы в <fieldset>.</td> </tr> <tr> <td> <li> Тег HTML </td> <td> Элемент <li> определяет элемент списка, который является частью упорядоченного и неупорядоченного списка элементов. </td> </tr> <tr> <td> <listing> HTML-тег </td> <td> Элемент <listing> был задуман как способ отображения HTML-кода на странице. Он никогда не поддерживался должным образом и теперь является устаревшим. Использование <listing> почти наверняка приведет к неожиданным результатам. Вместо этого используйте <code> или поместите содержимое в <div> с соответствующим стилем CSS.</td> </tr> <tr> <td> HTML-тег <map> </td> <td> Элемент <map> используется вместе с одним или несколькими элементами <area> для определения гиперссылок на карте изображения. </td> </tr> <tr> <td> <menu> HTML-тег </td> <td> Элемент <menu> определяет экземпляр меню. Эта экспериментальная функция HTML имеет очень ограниченную поддержку браузером, но вскоре может стать эффективным способом добавления пунктов меню в контекстные меню и создания интерактивных меню веб-приложений. </td> </tr> <tr> <td> HTML-тег <meta> </td> <td> Элемент <meta> используется для добавления машиночитаемой информации в HTML-документ.Информация, добавленная с помощью тега <meta>, не отображается для посетителей веб-сайта, но предоставляется для использования браузерами и поисковыми роботами. </td> </tr> <tr> <td> HTML-тег <multicol> </td> <td> Элемент <multicol> был экспериментальной функцией, которая теперь устарела и использовалась для создания макета текстового содержимого в стиле газеты. Современное свойство столбцов CSS можно использовать для создания того же эффекта. </td> </tr> <tr> <td> <nobr> HTML-тег </td> <td> Элемент <nobr> определяет текст, который не должен разбиваться на несколько строк, что может заставить пользователей выполнять горизонтальную прокрутку для просмотра содержимого.Этот элемент устарел, и его следует использовать. </td> </tr> <tr> <td> HTML-тег <noembed> </td> <td> Элемент <noembed> был задуман как способ предоставления резервного содержимого пользователям, чьи браузеры не поддерживали элемент <embed>. В HTML 4.02 <noembed> устарел в пользу <object> для обеспечения резервного содержимого. </td> </tr> <tr> <td> <ol> HTML-тег </td> <td> Элемент <ol> используется для создания упорядоченного списка. Упорядоченный список создается вложением одного или нескольких элементов <li> между открывающим и закрывающим тегами <ol>.</td> </tr> <tr> <td> HTML-тег <option> </td> <td> Элемент <option> используется вместе с элементом <select> для создания раскрывающегося меню в веб-форме. Каждый элемент <option> отображается как доступный вариант в выпадающем меню. </td> </tr> <tr> <td> <param> HTML-тег </td> <td> Элемент <param> используется для указания параметров, которые применяются к содержимому подключаемого модуля, встроенному с элементом <object>. </td> </tr> <tr> <td> HTML-тег <plaintext> </td> <td> Элемент <plaintext> использовался для отображения HTML-кода в виде простого текста.Поскольку все, что находится после открывающего тега, отображалось как обычный текст, закрывающего тега <plaintext> не было. Этот элемент устарел и не должен использоваться. Вместо этого используйте элементы <code> или <pre>. </td> </tr> <tr> <td> <pre> HTML-тег </td> <td> Элемент <pre> используется для идентификации текста, который должен отображаться с неповрежденными разрывами строк и пробелами. Он часто используется для сохранения отступов и разрывов строк при отображении блоков кода. </td> </tr> <tr> <td> <s> Тег HTML </td> <td> Элемент <s> используется для идентификации текста, который больше не является точным или актуальным.Он похож на элемент <del>, который используется для идентификации изменений документа, но семантически отличается от него. По умолчанию браузеры отображают содержимое элемента <s> с зачеркиванием. </td> </tr> <tr> <td> HTML-тег <samp> </td> <td> Элемент <samp> используется для идентификации текста, который следует интерпретировать как образец вывода компьютерной программы. По умолчанию браузер отображает содержимое элемента <samp> моноширинным шрифтом. </td> </tr> <tr> <td> Тег HTML <script> </td> <td> Элемент <script> содержит код, написанный на языке программирования, отличном от HTML, или указывает расположение внешнего ресурса сценария.Чаще всего он используется для добавления JavaScript и jQuery на веб-страницы напрямую или путем ссылки на внешние файлы <em> .js </em>. </td> </tr> <tr> <td> HTML-тег <small> </td> <td> Элемент <small> определяет текст для отображения на один размер меньше окружающего текста. В HTML5 этот элемент предназначен для идентификации элементов второстепенной важности, таких как уведомления об авторских правах, боковые комментарии и юридические уведомления. </td> </tr> <tr> <td> HTML-тег <sound> </td> <td> Элемент <sound> использовался в браузере Mosaic для добавления звуковых файлов в HTML-документы.Он никогда не был официально принят в стандарте HTML и не поддерживается современными браузерами. Вместо этого используйте современный элемент HTML5 <audio>. </td> </tr> <tr> <td> HTML-тег <spacer> </td> <td> Элемент <spacer> использовался для добавления пробелов на веб-страницы путем репликации эффекта добавления небольшого изображения на веб-страницу того же цвета, что и цвет фона веб-страницы. Этот элемент устарел. Используйте современные эквиваленты CSS, чтобы добавить пространство между элементами веб-страницы. </td> </tr> <tr> <td> Тег HTML <span> </td> <td> Элемент <span> является встроенным эквивалентом элемента <div> на уровне блока.Он используется для выбора встроенного контента в чисто стилистических целях. </td> </tr> <tr> <td> HTML-тег <sub> </td> <td> Элемент <sub> используется для идентификации символов, которые должны отображаться в позиции нижнего индекса. Этот элемент следует использовать для обозначения текста в соответствии с типографскими соглашениями, а не в стилистических целях. Текст, который должен отображаться в качестве нижнего индекса в чисто стилистических целях, должен быть оформлен с помощью CSS. </td> </tr> <tr> <td> HTML-тег <thead> </td> <td> Элемент <thead> используется для идентификации одной или нескольких строк таблицы, которые содержат метки столбцов, а не данные таблицы.</td> </tr> <tr> <td> <th> HTML-тег </td> <td> Элемент <th> используется для идентификации ячеек таблицы, которые содержат значения заголовков столбцов, а не данные таблицы. Строка значений заголовка таблицы создается вложением нескольких значений <th> в родительский элемент <tr>. </td> </tr> <tr> <td> Тег HTML <title> </td> <td> Элемент <title> - это обязательный элемент HTML, используемый для присвоения заголовка HTML-документу. Заголовки страниц не отображаются в окне браузера, но они используются в качестве имени страницы поисковыми системами и отображаются браузерами в строке заголовка, на вкладке страницы и в качестве имени страницы веб-страниц, отмеченных закладками.</td> </tr> <tr> <td> <tt> HTML-тег </td> <td> Элемент <tt> использовался для идентификации текста, который должен отображаться с использованием моноширинного шрифта браузера по умолчанию или шрифта фиксированной ширины, как он будет отображаться на устройстве фиксированной ширины, таком как телетайп. Этот элемент устарел, и элемент <code> является подходящей современной заменой для <tt>. </td> </tr> <tr> <td> <u> HTML-тег </td> <td> Элемент <u> изначально использовался для идентификации текста, который должен быть подчеркнут.Этот элемент устарел в HTML 4.01, но в HTML5 он был переопределен для представления текста, который должен отображаться неартикулированным образом </em>, но стилистически отличным от окружающего текста. Например, одним из правильных способов использования элемента <u> является определение терминов с ошибками. </td> </tr> <tr> <td> <ul> HTML-тег </td> <td> Элемент <ul> используется для определения неупорядоченного списка элементов. Используйте неупорядоченный список, чтобы содержать элементы <li>, которые не нужно указывать в числовом порядке и которые можно переставлять без изменения значения списка.</td> </tr> <tr> <td> <var> HTML-тег </td> <td> Элемент <var> используется для идентификации переменной в математическом уравнении или компьютерной программе. Текст, помеченный тегами <var>, в большинстве браузеров отображается курсивом. </td> </tr> <tr> <td> <wbr> Тег HTML </td> <td> Элемент <wbr> используется для определения возможности разрыва слова в строке текста. Это особенно полезно, когда вы хотите определить возможности разрыва слова в длинной непрерывной строке текста, которая в противном случае могла бы неправильно разорваться.</td> </tr> <tr> <td> Тег HTML <xmp> </td> <td> Элемент <xmp> использовался для окружения текста примера HTML, который должен отображаться без интерпретации каких-либо элементов HTML между открывающим и закрывающим тегами <xmp>. Этот элемент объявлен устаревшим в HTML 3.2 и теперь устарел. </td> </tr> <tr> <td> Тег HTML <del> </td> <td> Тег <del> используется для идентификации текста, который был удален из документа, но сохранен для отображения истории изменений, внесенных в документ.Соедините элемент <del> с элементом <ins>, чтобы идентифицировать вставленный текст, который заменил удаленный текст. </td> </tr> <tr> <td> <sup> HTML-тег </td> <td> Надстрочные индексы OIOpublisher супер! Сценарий <sup> используется для идентификации текста, который должен отображаться в позиции надстрочного индекса относительно… Подробнее ... </td> </tr> <tr> <td> <acronym> HTML-тег </td> <td> Элемент <acronym> и атрибут заголовка использовались для связывания полного текстовое объяснение с аббревиатурой.Элемент <acronym> устарел в HTML5, и вместо него следует использовать <abbr>. </td> </tr> <tr> <td> HTML-тег <bdi> </td> <td> Элемент <bdi> используется для выделения небольшого фрагмента текста, который может быть отформатирован для движения в направлении, противоположном направлению текста вокруг него (например, справа налево в контекст слева направо). Это полезно, когда язык с направлением письма справа налево, например арабский или иврит, используется вместе с языками с письмом слева направо. </td> </tr> <tr> <td> <bdo> HTML-тег </td> <td> Элемент <bdo> используется для переопределения направленности текста по умолчанию.Он используется для отображения символов языков, которые читаются справа налево, таких как иврит и арабский. </td> </tr> <tr> <td> HTML-тег <canvas> </td> <td> Элемент <canvas> создает прямоугольную панель произвольного размера, которую можно использовать для рисования графики, управления фотографиями и создания анимации с помощью JavaScript. </td> </tr> <tr> <td> HTML-тег <details> </td> <td> Элемент <details> используется для объединения оператора <summary> с дополнительными связанными деталями.Отображается <summary>, и пользователь может просмотреть или скрыть дополнительные сведения, щелкнув сводку. </td> </tr> <tr> <td> <dialog> HTML-тег </td> <td> Элемент <dialog> используется для создания диалогового окна, такого как всплывающее или модальное окно, которое отображается в активном окне браузера. Для определения поведения элемента <dialog> обычно требуется использование JavaScript. </td> </tr> <tr> <td> HTML-тег <figcaption> </td> <td> Элемент <figcaption> используется в качестве дочернего элемента родительского элемента <figure> для прикрепления заголовка к изображению, таблице или диаграмме, содержащимся в элементе <figure>.</td> </tr> <tr> <td> Тег HTML <main> </td> <td> Элемент <main> используется для обозначения содержимого веб-страницы, относящегося к центральной теме этой страницы или приложения. Он должен включать контент, который является уникальным для этой страницы, и не должен включать контент, который дублируется на нескольких веб-страницах, например верхние и нижние колонтитулы и основные элементы навигации. </td> </tr> <tr> <td> <mark> HTML-тег </td> <td> Элемент <mark> используется для выделения текста внутри другого элемента, такого как абзац, список или таблица.Текст, к которому был добавлен элемент <mark>, считается особенно актуальным в конкретном контексте. </td> </tr> <tr> <td> <menuitem> HTML-тег </td> <td> Элемент <menuitem> используется для добавления пунктов меню и команд в контекстные всплывающие меню (меню, которые появляются при щелчке правой кнопкой мыши в веб-браузере). </td> </tr> <tr> <td> HTML-тег <meter> </td> <td> Элемент <meter> используется для создания визуального представления измерителя, демонстрирующего отношение значения к установленным минимальным и максимальным значениям.</td> </tr> <tr> <td> HTML-тег <object> </td> <td> Элемент <object> используется для встраивания объекта в HTML-документ. Он обычно используется для встраивания элементов веб-страницы, таких как элементы Flash и Java, которые обрабатываются подключаемыми модулями браузера. </td> </tr> <tr> <td> HTML-тег <optgroup> </td> <td> Элемент <optgroup> используется для группировки связанных элементов <option> в родительском раскрывающемся списке <select>. </td> </tr> <tr> <td> <output> HTML-тег </td> <td> Элемент <output> используется для отображения результата вычисления.Элемент <output> обычно используется вместе с родительскими элементами <form> и родственными элементами <input> для выполнения вычислений. Фактический расчет обычно выполняется с использованием JavaScript. </td> </tr> <tr> <td> HTML-тег <progress> </td> <td> Элемент <progress> используется для создания индикатора выполнения, который служит визуальной демонстрацией прогресса в направлении выполнения задачи или цели. Атрибуты max и value используются для определения того, насколько продвинуто (значение) до завершения задачи (max).</td> </tr> <tr> <td> <q> HTML-тег </td> <td> Элемент <q> используется для идентификации и встроенной цитаты, не требующей разрывов абзаца. Более длинные цитаты, требующие разрывов абзаца, должны использовать элемент <blockquote>. </td> </tr> <tr> <td> <rp> Тег HTML </td> <td> Определяет контент, который должен отображаться в браузерах, не поддерживающих аннотации на рубиновом языке (система для отображения определенных символов на нескольких азиатских языках). </td> </tr> <tr> <td> <rt> HTML-тег </td> <td> Определяет объяснения и произношение символов в аннотациях на рубиновом языке (система для отображения определенных символов на нескольких азиатских языках).</td> </tr> <tr> <td> HTML-тег <ruby> </td> <td> Элемент <ruby> используется для пары символов некоторых азиатских языков с информацией о произношении. Элемент <ruby> используется вместе с элементами <rp> и <rt>. </td> </tr> <tr> <td> Тег HTML <section> </td> <td> Элемент <section> - это структурный элемент HTML, используемый для группировки связанных элементов. Каждый <section> обычно включает в себя один или несколько элементов заголовка и дополнительных элементов, представляющих связанный контент.</td> </tr> <tr> <td> HTML-тег <source> </td> <td> Элемент <source> используется как дочерний элемент <picture>, <audio> или <video> и определяет URL-адрес одного или нескольких медиаресурсов. Элемент <source> обычно используется для добавления медиаресурсов в нескольких форматах для наилучшей совместимости между браузерами. </td> </tr> <tr> <td> HTML-тег <summary> </td> <td> Элемент <summary> используется как дочерний элемент <details>, чтобы предоставить сводку содержимого элемента <details>.В настоящее время <summary> плохо поддерживается браузерами. </td> </tr> <tr> <td> HTML-тег <tbody> </td> <td> Элемент <tbody> должен быть прямым потомком элемента <table> и использоваться для идентификации элементов <tr>, составляющих тело таблицы. Элемент <tbody> всегда должен идти после элемента <thead> и может стоять до или после элемента <tfoot>. </td> </tr> <tr> <td> HTML-тег <tfoot> </td> <td> Элемент <tfoot> определяет один или несколько элементов <tr> как содержащих сводное содержимое столбцов таблицы.Элемент <tfoot> должен быть прямым потомком элемента <table>. В HTML5 <tfoot> может быть размещен до или после элементов <tbody> и <tr>, но должен появляться после любых элементов <caption>, <colgroup> и <thead>. </td> </tr> <tr> <td> <time> HTML-тег </td> <td> Определяет дату и время. Содержимое элемента времени обычно представляет собой удобочитаемые дату и время, а машиночитаемая версия того же времени помещается в атрибут datetime.</td> </tr> <tr> <td> HTML-тег <track> </td> <td> Элемент <track> используется в качестве дочернего элемента <audio> или <video> и добавляет источник данных с привязкой ко времени к родительскому медиа-элементу. Например, элемент <track> можно использовать для добавления синхронизированных субтитров к видео и скрытых субтитров к аудиоконтенту. </td> </tr> </table> <h2><span class="ez-toc-section" id="HTML-3"> HTML-ТЕГИ </span></h2> Вирджиния Монтечино | montecino@gmu.edu | <i> Образование и технологические ресурсы </i> <br/> © авторское право 1996 Virginia Montecino <br/> <p> <b> HTML-ТЕГИ </b> </p> <p> базовый формат веб-страницы | Поисковые мета-теги | базовый теги | ссылки | внутренний ссылки | ссылка на электронную почту <br/> шрифт и цвет | блокировать цитата | открыть в новом окне | вставлять графический | столы | специальный символ </p> <p> <b> БАЗОВЫЙ ФОРМАТ ВЕБ-СТРАНИЦЫ </b> [Эти теги используются для создания базовых веб-страниц без использования программы для создания веб-страниц. например DreamWeaver или Front Page.Эти теги являются основными, обычными Теги веб-страниц, используемые не только на серверах UNIX.] </p> <p> <b> <html> </b> Этот тег означает, что это HTML-документ. </p> <p> <b> <head> </b> Этот тег обозначает начало информации заголовка. </p> <p> <b> <title> </b> Заголовок находится здесь - он отображается в верхней части браузера - но не на вашей веб-странице. <b> </title> </b> </p> <p> <b> </head> </b> Этот тег обозначает конец информации заголовка.</p> <p> <b> [Информация над тегом <body> не отображается на веб-странице.] </b> </p> <p> <b> <body> </b> Этот тег обозначает начало HTML-материала. </p> <p> <b> <h2> </h2> </b> Ваш первый заголовок или заголовок должны располагаться между этими символами. <b> </h2> </b> </p> <p> <b> <p> </b> Этот тег обозначает абзац. <<b> / p </b>> </p> <p> <b> <p> </b> А это <b> второй абзац </b>...и так далее. <<b> / p </b>> </p> <p> <b> </body> </b> Этот тег обозначает конец тела документа. </p> <p> <b> </html> </b> Этот тег обозначает конец HTML-документа. <br/> </p> <hr/> <br/> [<b> Примечание. </b> Новые соглашения html (xhtml) со временем потребуют нижний регистр для тегов html, закрывающие теги в окончании абзаца: <b> </p> </b> и другие «открытые» теги, такие как теги горизонтальной линии: <b> <hr /> - </b> Примечание. пробел после "hr" - и другие изменения.Эти условности совместимы с xhtml. Эти изменения соответствуют HTML. Текущий браузеры не используют XHTML; однако можно написать XHTML, который совместим с HTML и будет работать в существующих браузерах на основе HTML. [<b> Рекомендация W3C </b>. Доступ 26 января 2000 г.] <p> <b> Теги мета-поиска </b> [Все информация в скобках носит пояснительный характер и не является частью HTML-кода.] <b>: </b> </p> <p> <b> <meta http-Equiv = "keywords" content = "английский, английский, расстояние обучение, компьютерное обучение, компьютерное обучение, Интернет-грамотность, университет, колледж, оценка веб-сайтов, веб-класс, стипендия, композиция "> </b> [Этот тег находится между <head> и </head> теги.Вставьте термины в кавычки для поиска поисковыми системами, чтобы найти содержимое вашей страницы. Некоторые поисковые системы распознают различие в нижнем или верхнем регистре. Вам не обязательно создавать раздел содержимого. <i> Вышеупомянутые термины позволяют прямым поисковым системам найти мои веб-ресурсы. </i>] </p> <p> <b> БАЗОВЫЕ теги </b> <br/> <b> <h2> </h2> </b> Поместите здесь заголовок <b> </h2> </b> Размер 1 заголовок больше размера 2.Вы можете начать с любого размера по вашему выбору, обозначается, например, h2, h3, h4. </p> <p> <b> <p> </b> [Этот тег <b> </b> обозначает абзац. Без финала требуется тег абзаца. Конечные теги, если они используются, имеют спереди "<b> /" </b>. букв html.] </p> <p> <b> <br> </b> [Этот тег в конце строки означает разрыв строки.] </p> <p> <b> <center> </b> Текст между этими двумя символами будет по центру страница.<b> </center> </b> Например, если вы разместите эти теги перед и после тегов <h3><span class="ez-toc-section" id="i-32">, </span></h3> ваш заголовок будет центрирован.] </p> <p> <b> <hr> _________________________________________________________________ </b> <br/> [Символ hr, помещенный между разделами текста, образует горизонтальную разделитель для разделения материалов на странице. Строка, которую вы видите выше, имитирует строка, которая появится на вашей домашней странице, если вы используете опцию <HR>.] </p> <p> <b> <b> </b> <b> Слова между этими тегами будут отображаться полужирным шрифтом </b> </b> </p> <p> <b> <i> </b> <i> Слова между этими тегами будут отображаться курсивом </i> <b> </i> </b> </p> <p> <b> Тег ссылки: <a href="http://www.abc.def/ghi.edu/"> </b> Имя для веб-документа, который вы хотите разместить на веб-странице <b> </a> </b> [Вот как вы создаете тег, который позволит кому-либо использовать вашу веб-страницу щелкнуть и перейти на другую веб-страницу или веб-сайт.Заменить http: // адрес в кавычках: <b> http: //www.abc.def ... </b> с <b> точный адрес </b> веб-документа, на который вы хотите создать ссылку. Веб-адрес не будет отображаться на вашей веб-странице, а будет отображаться только имя которому вы даете адрес. Замените текст «Имя веб-документа». ... "с заголовком веб-страницы, на которую вы хотите создать ссылку - <b> не адрес http: //. </b> Например, адрес моей веб-страницы в html является: <br/> <b> <a href = "index.html "> Образовательные и технологические ресурсы </a> </b> Название «<b> Образовательные и технологические ресурсы, </b>» отображается на веб-браузер. Обязательно закройте тег гиперссылки с помощью <b> </a> </b> символ.] </p> <p> <b> Ссылка на конкретное место в ваш документ: </b> [<i> Эта операция связывания требует, чтобы вы использовали оба тега <b> link </b> и цель <b> </b> тег. </i>] </p> <table border="0" cols="1"> <tr> <td> <b> - Тег ссылки для установки ссылки на другую место: </b> <br/> <b> <a href="# </b> name" <b>> </b> <b> поместите здесь текст, который хотите показать в браузере </a> </b> <br/> [Замените <b> <i> name </i> </b> термином, который вы хотите назвать этим тегом сразу после символа #.Вы должны включить символ # и цитату марок.] </td> </tr> <tr> <td> <b> - Целевой тег для определения места, на которое вы хотите создать ссылку: </b> <br/> <b> <a name = "укажите то же имя, что и после символа #, но без символ # "</ a> </b> <br/> [Убедитесь, что имя, которое вы поместили между этими кавычками, совпадает с именем с символ # выше. Включите кавычки, но <b> не </b> символ. Вставьте этот тег прямо перед местом в документе, чтобы которую вы хотите связать.] </td> </tr> <tr> <td> </td> </tr> </table> <b> Создайте ссылку для электронной почты: <адрес> </b> напишите мне по адресу: <b> <a href = "mailto: укажите свой адрес электронной почты с расширением here "> </b> Добавьте сюда свой адрес электронной почты с расширением <b> </a> </address> </b> <br/> [Приведенные выше теги позволят людям отправлять вам сообщения электронной почты, щелкнув по ссылке, созданной при вводе тегов html выше.] <p> <b> Установить размер и цвет шрифта </b> Другое чем настройки по умолчанию: <br/> <b> <font size = 5 color = red> текст </font> </b> <br/> [Поэкспериментируйте с цветом и размером шрифта, чтобы найти то, что вам нравится.Легче использовать HTML-редактор, чтобы опробовать различные размеры шрифтов и цветов.] </p> <p> <b> Отступ цитируемый материал: </b> <br/> <b> <blockquote> </b> Вставьте блокируемый материал между этими тегами <b> </blockquote> </b> </p> <p> <b> Открыть новое окно для отображения связанный сайт: </b> <br/> <b> <a href="http://home.cox.rr.com/edtech/" target="_blank"> </b> Образование и технологические ресурсы <b> </a> </b> <br/> [Тег target = "blank", вставленный сразу после веб-адреса, примет пользователь веб-сайта образовательных и технологических ресурсов, пока сохранение исходной страницы сайта, с которой возникла ссылка.] </p> <p> <b> Вставить графические файлы: </b> <br/> <b> <img src = "picture.jpg" align = left> </b> [Графика обычно а. <b> jpg или .gif с расширением файла </b>. Вставьте имя вашего файла изображения между кавычками, чтобы заменить имя файла "picture.jpg". Файл может иметь расширение .gif. Тег "ALIGN = left" означает изображение должно быть выровнено по левому краю веб-страницы. Ты можешь выбрать слева, справа, по центру.] </p> <p> <b> Таблицы </b> <br/> <b> <CENTER> <table BORDER = 1 CELLSPACING = 1 CELLPADDING = 1 > </b> <br/> <b> <tr> </b> <br/> <b> <td> содержимое ячейки </td> </b> </p> <p> <b> <td> содержимое ячейки </td> </b> <br/> <b> </tr> </b> <br/> <b> </table> </CENTER> </b> <br/> <b> [ПРИМЕЧАНИЕ: </b> Эта таблица находится по центру экрана.Этот стол имеет две колонки. Каждый столбец начинается с тега <td> и заканчивается тег </td>. Вы также можете выбрать выравнивание по левому или правому краю, изменив «ЦЕНТР» в «влево» или «вправо» в начале и в конце <CENTER> теги. Эта таблица имеет границу в 1 пиксель, интервал между ячейками в 1 пиксель и заполнение ячейки размером 1 пиксель. Ширина 90% окна. Ты можно изменить ширину границы до 0 и выше. Вы также можете изменить ячейку интервал и заполнение ячеек. Ширина стола может достигать 100% экрана. или обозначается в пикселях (например, 650).Просто замените "90%" числом пикселей. Например :: "650". <b>] </b> </p> <p> <b> Теги HTML для специальных символов: </b> </p> <table border="" cols="3"> <caption> </caption> <tr> <td align="CENTER" valign="TOP"> <b> Характер </b> </td> <td> <b> HTML </b> </td> <td align="CENTER" valign="TOP"> <b> Описание </b> </td> </tr> <tr> <td> <b> <</b> (<b> менее </b> ) </td> <td> <b> & lt; </b> </td> <td> <b> Полезно, когда вы хотите, чтобы теги отображались - при демонстрации html </b> </td> </tr> <tr> <td> <b>> </b> (<b> больше </b>) </td> <td> <b> & gt; </b> </td> <td> <b> "" "" «» </b> </td> </tr> <tr> <td> и </td> <td> <b> & amp; </b> </td> <td> <b> амперсанд </b> </td> </tr> <tr> <td> <b> "</b> </td> <td> <b> & quot; </b> </td> <td> <b> кавычка </b> </td> </tr> <tr> <td valign="TOP"> <b> Зарегистрированный TM </b> ® </td> <td> <b> и рег. </b> </td> <td> <b> зарегистрированный товарный знак, символ </b> </td> </tr> <tr> <td> <b> Зарегистрированный TM </b> ® </td> <td> <b> & # 174; </b> </td> <td> <b> альтернативная бирка товарного знака </b> </td> </tr> <tr> <td> <b> Авторские права </b> © </td> <td valign="TOP"> <b> и копия; </b> </td> <td> <b> стандартный формат: © Copyright 1996 Virginia Montecino </b> </td> </tr> <tr> <td> <b> Авторские права </b> © </td> <td> <b> & # 169; </b> </td> <td> <b> альтернативный символ авторского права </b> </td> </tr> <tr> <td> <b> Пробел (</b> без перерыва) </td> <td> <b> & nbsp; </b> </td> <td> <b> используется для пустых строк в таблицах или пробелов в тексте.</b> </td> </tr> <tr> <td> <b> Дж </b> </td> <td> <b> <font face = "Wingdings"> & # 74; </font> </b> </td> <td> <b> смайлик </b> </td> </tr> </table> <p> <i> к началу </i> </p> <hr/> Вирджиния Монтечино | <i> montecino@gmu.edu | </i> Образование и технологические ресурсы <h2><span class="ez-toc-section" id="_-_Indexhtml"> Основы веб-страницы Index.html по умолчанию </span></h2> <p> Одна из самых первых вещей, которую вы узнаете, когда начнете погружаться в воду дизайна веб-сайтов, - это как сохранять свои документы в виде веб-страниц.Многие учебники и статьи о начале работы с веб-дизайном предложат вам сохранить исходный HTML-документ с именем файла <strong> index.html </strong>. Давайте посмотрим на значение этого конкретного соглашения об именах, которое действительно является отраслевым стандартом. </p> Дерек Абелла / Lifewire <h3><span class="ez-toc-section" id="i-33"> Домашняя страница по умолчанию </span></h3> <p> Страница index.html - это наиболее распространенное имя, используемое для страницы по умолчанию, отображаемой на веб-сайте, если другая страница не указана, когда посетитель запрашивает сайт.Другими словами, index.html - это имя, используемое для домашней страницы веб-сайта. </p> <h3><span class="ez-toc-section" id="_Indexhtml"> Архитектура сайта и Index.html </span></h3> <p> Веб-сайты создаются внутри каталогов на веб-сервере. Для вашего веб-сайта вы должны сохранить каждую веб-страницу как отдельный файл. Например, ваша страница «О нас» может быть сохранена как <strong> about.html </strong>, а ваша страница «Свяжитесь с нами» может иметь вид <strong> contact.html </strong>. Ваш сайт будет состоять из этих HTML-документов. </p> <p> Иногда, когда кто-то посещает веб-сайт, он делает это, не указывая один из этих конкретных файлов в адресе, который они используют для URL-адреса.Например: </p> <pre> http://www.lifewire.com <br/> </pre> class = "ql-syntax"> <p> Несмотря на то, что в URL-запросе, отправленном на сервер, нет страницы, этот веб-сервер все равно должен доставить страницу для этого запроса, чтобы браузеру было что отображать. Доставленный файл является страницей по умолчанию для этого каталога. Обычно, если файл не запрашивается, сервер знает, какой из них обслуживать по умолчанию. На большинстве веб-серверов страница по умолчанию в каталоге называется </p> <pre> индекс.html <br/> </pre> class = "ql-syntax"> <p> По сути, когда вы переходите по URL-адресу и указываете конкретный файл, это то, что сервер доставит. Если вы не укажете имя файла, сервер ищет файл по умолчанию и отображает его автоматически - почти так, как если бы вы ввели это имя файла в URL-адрес. </p> <h3><span class="ez-toc-section" id="i-34"> Другие имена страниц по умолчанию </span></h3> <p> Помимо index.html, существуют другие имена страниц по умолчанию, которые используют некоторые сайты, в том числе: </p> <ul> <li> index.htm </li> <li> по умолчанию.htm или default.html </li> <li> home.htm или home.html </li> </ul> <p> Реальность такова, что веб-сервер можно настроить так, чтобы он распознавал любой файл, который вы хотите использовать по умолчанию для этого сайта. В этом случае рекомендуется использовать index.html или index.htm, потому что он сразу распознается на большинстве серверов без какой-либо дополнительной настройки. Хотя default.htm иногда используется на серверах Windows, использование index.html практически гарантирует, что независимо от того, где вы решите разместить свой сайт, в том числе если вы решите сменить хостинг-провайдера в будущем, ваша домашняя страница по умолчанию будет по-прежнему распознаваться и отображаться. . </p> <h3><span class="ez-toc-section" id="_indexhtml"> У вас должна быть страница index.html во всех ваших каталогах </span></h3> <p> Всякий раз, когда у вас есть каталог на вашем веб-сайте, рекомендуется иметь соответствующую страницу index.html. Даже если вы не планируете отображать контент на индексных страницах выбранных каталогов с любыми фактическими ссылками на страницы, наличие файла на месте - это разумный шаг для пользователя, а также функция безопасности. </p> <h3><span class="ez-toc-section" id="_indexhtml-2"> Использование имени файла по умолчанию, например index.html, также является функцией безопасности </span></h3> <p> Большинство веб-серверов начинают со структурой каталогов, видимой, когда кто-то заходит в каталог без файла по умолчанию.Это представление показывает им информацию о веб-сайте, который в противном случае был бы скрыт, например каталоги и другие файлы в этой папке. Эта прозрачность может быть полезна во время разработки сайта, но после того, как сайт запущен, разрешение просмотра каталогов может быть уязвимостью безопасности. </p> <p> Если вы не поместите файл index.html в каталог, по умолчанию большинство веб-серверов будут отображать список всех файлов в этом каталоге. Хотя это поведение можно отключить на уровне сервера, это означает, что вам нужно привлечь администратора сервера, чтобы заставить его работать.</p> В установках <p> IIS просмотр каталогов по умолчанию отключен. Если документ по умолчанию не найден и просмотр документов и каталогов по умолчанию отключен, пользователь получит ошибку 404. </p> <p> Если у вас мало времени и вы хотите контролировать это самостоятельно, простой обходной путь - просто написать веб-страницу по умолчанию и назвать ее index.html. Загрузка этого файла в ваш каталог поможет закрыть эту потенциальную дыру в безопасности. Кроме того, неплохо также связаться с вашим хостинг-провайдером и попросить отключить просмотр каталогов. </p> <h3><span class="ez-toc-section" id="_HTML-15"> Сайты, не использующие файлы .HTML </span></h3> <p> Некоторые веб-сайты, например те, которые работают на системе управления контентом или те, которые используют более надежные языки программирования, такие как PHP или ASP, могут не использовать страницы .html в своей структуре. Для этих сайтов вы по-прежнему хотите убедиться, что указана страница по умолчанию, а для выбранных каталогов на этом сайте по-прежнему желательно иметь страницу index.html (или index.php, index.asp и т. Д.) По описанным причинам. над. </p> <p> Спасибо, что сообщили нам! </p> <p> Расскажите, почему! </p> Другой Недостаточно подробностей Сложно понять <h2><span class="ez-toc-section" id="_10_HTML"> Ваши первые 10 HTML-тегов </span></h2> <p> Вы только начинаете работать с HTML? Вот 10 основных HTML-тегов, которые вам нужно знать при создании веб-страниц.Если вы узнаете, как работают эти 10 тегов, у вас будет достаточно знаний, чтобы составить базовую страницу. </p> <p> В конце руководства вы найдете код для примера веб-страницы, который включает все 10 тегов, чтобы вы могли увидеть, как их использовать. </p> <h3><span class="ez-toc-section" id="i-35"> Теги и элементы </span></h3> <p> Тег </dfn> HTML </dfn> - это специальное слово или буква, заключенная в угловые скобки <и>. Вы используете теги для создания элементов </dfn> HTML </dfn>, таких как абзацы или ссылки. </p> <p> Многие элементы имеют открывающий тег и закрывающий тег - например, элемент <code> p </code> (абзац) имеет тег <code> <p> </code>, за которым следует текст абзаца, за которым следует закрывающий тег <code> </p> </code>.</p> <p> У некоторых элементов нет закрывающего тега. Они называются <dfn> пустыми элементами </dfn>. Например, элемент <code> br </code> для вставки разрывов строки просто записывается как <code> <br> </code>. </p> <p> Если вы работаете с XHTML, вы пишете пустые элементы с помощью <dfn> самозакрывающихся тегов </dfn>, например <code> <br /> </code>. </p> <p> Теперь давайте посмотрим на эти 10 тегов! </p> <h3><span class="ez-toc-section" id="1"> 1. </span></h3><code> <html> </code>… <code> </html> </code> - корневой элемент </h3> <p> Все веб-страницы начинаются с элемента <code> html </code>.Его также называют корневым элементом <dfn> </dfn>, потому что он находится в корне дерева элементов, составляющих веб-страницу. </p> Элемент <code> html </code> находится в корне дерева элементов веб-страницы. <p> Чтобы создать элемент <code> html </code>, вы пишете открывающий тег <code> <html> </code>, за которым следует закрывающий тег <code> </html> </code>. Все остальное на вашей веб-странице затем помещается между этими двумя тегами: </p> <pre> <code> <html> <var> (все остальные элементы страницы находятся здесь) </var> </html> </code> </pre> <h3><span class="ez-toc-section" id="2"> 2.</span></h3><code> <head> </code>… <code> </head> </code> - Заголовок документа </h3> <p> Элемент <code> head </code> содержит информацию о веб-странице, в отличие от самого содержимого веб-страницы. Есть много элементов, которые вы можете поместить внутрь элемента <code> head </code>, например: </p> <ul> <li> <code> название </code> (описано ниже) </li> <li> <code> ссылка </code>, которую вы можете использовать для добавления таблиц стилей и значков на вашу страницу </li> <li> <code> мета </code>, для определения таких вещей, как наборы символов, описания страниц и ключевые слова для поисковых систем </li> <li> <code> скрипт </code>, для добавления кода JavaScript на страницу </li> </ul> <p> Вот типичный элемент головки <code> </code>: </p> <pre> <code> <head> <title> Приключения моего кота Лаки </title> <meta http-Equiv = "Content-Type" content = "text / html; charset = utf-8"> <meta name = "description" content = "Приключения моего любимого домашнего кота Лаки с рассказами, изображениями и фильмами."> <meta name = "keywords" content = "кошка, Счастливчик, домашнее животное, животное"> <link rel = "stylesheet" type = "text / css" href = "/ style.css"> <link rel = "ярлык" href = "/ favicon.ico"> </head> </code> </pre> <h3><span class="ez-toc-section" id="3"> 3. </span></h3><code> <title> </code>… <code> </title> </code> - Заголовок страницы </h3> <p> Элемент <code> title </code> содержит заголовок страницы. Заголовок отображается в строке заголовка браузера (строка в верхней части окна браузера), а также в закладках, результатах поиска и во многих других местах.</p> <p> Заголовок должен кратко и точно описывать содержание страницы. Постарайтесь дать каждой странице вашего сайта свое уникальное название. </p> <p> Вот пример: </p> <pre> <code> <title> Приключения моего кота Лаки </title> </code> </pre> <h3><span class="ez-toc-section" id="4"> 4. </span></h3><code> <body> </code>… <code> </body> </code> - Содержание страницы </h3> <p> Элемент <code> body </code> появляется после элемента <code> head </code> на странице. Он должен содержать все содержимое вашей веб-страницы: текст, изображения и так далее.Все веб-страницы имеют 1 единственный элемент <code> body </code>, за исключением страниц с набором фреймов, которые вместо этого содержат <code> элемента frame </code>. </p> <p> Вот общий формат элемента <code> body </code>: </p> <pre> <code> <body> <var> (здесь идет весь контент) </var> </body> </code> </pre> <h3><span class="ez-toc-section" id="5"> 5. </span></h3><code> <h2> </h2> </code>… <code> </h2> </code> - Заголовок раздела </h3> <p> Заголовки позволяют разбивать содержимое страницы на читаемые фрагменты. Они работают так же, как заголовки и подзаголовки в книге или отчете.</p> <p> HTML фактически поддерживает 6 элементов заголовка: <code> h2 </code>, <code> h3 </code>, <code> h4 </code>, <code> h5 </code>, <code> h5 </code> и <code> h6 </code>. <code> h2 </code> - для наиболее важных заголовков, <code> h3 </code> - для менее важных подзаголовков и т. Д. Обычно вам не нужно использовать более <code> h2 </code>, <code> h3 </code> и <code> h4 </code>, если только ваша страница не очень длинная и сложная. </p> <p> Вот пример элемента заголовка <code> h2 </code>: </p> <pre> <code> <h2><span class="ez-toc-section" id="i-36"> Приключения моего кота Лаки </span></h2> </code> </pre> <h3><span class="ez-toc-section" id="6"> 6.</span></h3><code> <p> </code>… <code> </p> </code> - А абзац </h3> <p> Элемент <code> p </code> позволяет создавать абзацы текста. Большинство браузеров отображают абзацы с вертикальным промежутком между абзацами, красиво разбивая текст. </p> <p> Хотя вы можете создавать «абзацы» текста, просто используя теги <code> <br> </code> для вставки пустых строк между фрагментами текста, вместо этого лучше использовать элементы <code> p </code>. Это не только более аккуратно, но и дает браузерам, поисковым системам и другим людям, не относящимся к людям, лучшее представление о том, как структурирована ваша страница.</p> <p> Вот пример абзаца: </p> <pre> <code> <p> У моего кота Лаки много приключений. Вчера поймала мышь, а сегодня утром две! </p> </code> </pre> <p> Хорошее практическое правило при написании текста для Интернета - убедиться, что каждый абзац содержит одну точку, тему или мысль. Если вы хотите поговорить о двух разных вещах, используйте два абзаца. </p> <h3><span class="ez-toc-section" id="7"> 7. </span></h3><code> <a> </code>… <code> </a> </code> - Ссылка </h3> <p> Один из самых важных элементов на веб-странице, элемент <code> a </code> позволяет создавать ссылки на другой контент.Контент может быть либо на вашем собственном сайте, либо на другом сайте. </p> <p> Чтобы создать ссылку, вы оберните теги <code> <a> </code> и <code> </a> </code> вокруг содержимого, которое хотите использовать для ссылки, и укажите URL-адрес для ссылки в теге <code> <a> </code> <code> href </code> атрибут. </p> <p> Вот как создать текст, который ссылается на <code> www.example.com </code>: </p> <pre> <code> <a href="http://www.example.com/"> Посетите этот замечательный веб-сайт! </a> </code> </pre> <h3><span class="ez-toc-section" id="8"> 8.</span></h3><code> <img> </code> - Изображение </h3> <p> Элемент <code> img </code> позволяет вставлять изображения на ваши веб-страницы. Чтобы вставить изображение, вы сначала загружаете изображение на свой веб-сервер, а затем используете тег <code> <img> </code> для ссылки на имя файла загруженного изображения. Вот пример: </p> <pre> <code> <img src = "myphoto.jpg" alt = "Мое фото"> </code> </pre> <p> Атрибут <code> alt </code> требуется для всех тегов <code> img </code>. Он используется браузерами, которые не отображают изображения, чтобы дать посетителю альтернативный текст.</p> <p> Узнайте больше об использовании изображений на веб-страницах. </p> <h3><span class="ez-toc-section" id="9"> 9. </span></h3><code> <div> </code>… <code> </div> </code> - Контейнер уровня блока для контента </h3> <p> Элемент <code> div </code> - это общий контейнер, который можно использовать для добавления дополнительной структуры к содержимому страницы. Например, вы можете сгруппировать несколько абзацев или заголовков, которые служат для одной и той же цели, внутри элемента <code> div </code>. Обычно элементы <code> div </code> используются для таких вещей, как: </p> <ul> <li> Верхние и нижние колонтитулы страниц </li> <li> Столбцы содержимого и боковые панели </li> <li> Выделенные поля в текстовом потоке </li> <li> Области страницы с определенным назначением, например рекламные места </li> <li> Галерея изображений </li> </ul> <p> Добавив атрибуты <code> class </code> и / или <code> id </code> к вашим элементам <code> div </code>, вы затем можете использовать CSS для стилизации и позиционирования <code> div </code> s.Это основа для создания макетов страниц на основе CSS. </p> <p> Вот пример, в котором <code> div </code> используется для содержания боковой панели на странице: </p> <pre> <code> <div> <h2><span class="ez-toc-section" id="i-37"> Заголовок боковой панели </span></h2> <p> Текст боковой панели </p> <p> Больше текста на боковой панели </p> </div> </code> </pre> <h3><span class="ez-toc-section" id="10"> 10. </span></h3><code> <span> </code>… <code> </span> </code> - Встроенный контейнер для содержимого </h3> <p> Элемент <code> span </code> похож на <code> div </code> в том, что он используется для добавления структуры к вашему контенту.Разница в том, что <code> div </code> является элементом уровня блока, а <code> span </code> является встроенным элементом: </p> <ul> <li> <strong> Элементы уровня блока </strong>, такие как <code> div </code>, <code> h2 </code> и <code> p </code>, представляют собой элементы, которые предназначены для хранения относительно больших или отдельных блоков контента, таких как абзацы текста. Элемент уровня блока всегда начинается с новой строки. </li> <li> <strong> Встроенные элементы </strong>, такие как <code> span </code>, <code> a </code> и <code> img </code>, предназначены для хранения небольших фрагментов содержимого, например нескольких слов или предложения, в более крупном блоке содержимого.Добавление встроенного элемента не приводит к созданию новой строки. Элементы уровня блока могут содержать встроенные элементы, но встроенные элементы не могут содержать элементы уровня блока. </li> </ul> <p> Как и в случае с div <code> </code>, вы часто добавляете атрибут <code> class </code> и / или <code> id </code> к диапазону <code> </code>, чтобы вы могли стилизовать его с помощью CSS. </p> <p> В следующем примере используются элементы <code> span </code> для обозначения названий продуктов в абзаце. Эти названия продуктов затем можно было выделить с помощью CSS.Система настраиваемого поиска также потенциально может использовать информацию, предоставленную элементами <code> span </code>, для идентификации продуктов на странице. </p> <pre> <code> <p> Некоторые из наших продуктов включают <span> SuperWidgets </span>, <span> MegaWidgets </span> и <span> WonderWidgets </span>. </p> </code> </pre> <h3><span class="ez-toc-section" id="i-38"> Собираем все вместе </span></h3> <p> Теперь, когда вы изучили эти 10 основных тегов HTML, давайте объединим их все на одной веб-странице: </p> <pre> <code> <html> <head> <title> Приключения моего кота Лаки </title> <meta http-Equiv = "Content-Type" content = "text / html; charset = utf-8"> <meta name = "description" content = "Приключения моего любимого домашнего кота Лаки с рассказами, изображениями и фильмами."> <meta name = "keywords" content = "кошка, Счастливчик, домашнее животное, животное"> <link rel = "stylesheet" type = "text / css" href = "/ style.css"> <link rel = "ярлык" href = "/ favicon.ico"> </head> <body> <h2><span class="ez-toc-section" id="i-39"> Приключения моего кота Лаки </span></h2> <div> <p> У моего кота Лаки много приключений. Вчера она <a href="mouse.html"> поймала мышь </a>, а сегодня утром - две! </p> <p> Вот изображение Счастливчика: </p> <img src = "повезло.jpg "alt =" Lucky "> </div> <div> <h3><span class="ez-toc-section" id="i-40"> Покупайте наши вещи! </span></h3> <p> Некоторые из наших продуктов включают <span> SuperWidgets </span>, <span> MegaWidgets </span> и <span> WonderWidgets </span>. </p> </div> </body> </html> </code> </pre> <p> Как видите, вы можете создать целую веб-страницу, используя только эти 10 тегов HTML. Теперь вы готовы изучить еще несколько тегов, просмотрев другие наши руководства по HTML. Радоваться, веселиться! </p> <h2><span class="ez-toc-section" id="_-_HTML_-_HTML"> Базовая структура веб-страницы HTML - Базовые теги HTML </span></h2> <p> </p> Веб-страница, созданная с использованием HTML, имеет базовую и существенную структуру.Страница всегда начинается с начального тега элемента <code> html </code> и всегда заканчивается конечным тегом элемента <code> html </code> следующим образом: <p> Пример 1 </p> <br/> <code> <html> <p> <code> <i> ... веб-страница ... </i> </code> </p> <p> </html> </p> </code> <br/> Элемент <code> html </code> в основном сообщает вашему компьютеру, что это документ HTML. Все остальные теги элементов «вложены» в начальный и конечный теги <code> html </code>. Затем веб-страница подразделяется на два основных раздела: «голова» и «тело».<p> Раздел заголовка начинается с начального тега <code> <head> </code> и заканчивается конечным тегом <code> </head> </code>. Сразу за ним идет начальный тег <code> <body> </code>, а непосредственно перед конечным тегом <code> html </code> идет конечный тег <code> </body> </code>. </p> <p> Есть только <i> один набор </i> из <code> тегов <html> ... </html> </code> тегов, <i> один набор </i> из <code> <head> ... </head> </code> тегов и <i> один набор </i> из <code> < тело>... </body> </code> тегов. Эту базовую структуру веб-страницы HTML можно проиллюстрировать следующим примером: </p> <br/> <code> <html> <p> <code> <head> </code> </p> <p> </head> </p> <p> <body> </p> <p> </body> </p> </code> <p> </html> </p> <p> Заголовок или заголовок документа <i> </i> имеет мало содержимого и в основном содержит инструкции в коде HTML о том, как присвоить заголовок, категоризировать и «запустить» веб-страницу. Раздел body или <i> body </i>, с другой стороны, содержит почти все содержимое, которое вы разместите на своей веб-странице, и это содержимое - обычно текст, но также может быть изображениями и звуками - форматируется с использованием большего количества кода HTML.Весь текст, который вы поместите за пределы любых угловых скобок, станет «видимым текстом» и будет отображаться в вашем веб-браузере на вашей веб-странице. Поместив этот текст между начальным и конечным тегами определенных элементов HTML, вы можете указать веб-браузеру, где и как отображать этот текст. </p> <br/> <h3><span class="ez-toc-section" id="i-41"> Добавление заголовка на вашу веб-страницу </span></h3> <br/> Хорошо, давайте продолжим работу с Примером 2. (Нажмите здесь, чтобы прочитать предыдущую страницу в этом руководстве, если вы не знакомы с тем, как создавать и редактировать HTML-документ.) <p> Веб-страницы обычно имеют заголовок, который появляется в строке заголовка в самом верху веб-страницы. Этот заголовок создается с помощью тегов <code> <title> ... </title> </code>, которые сами всегда вложены в теги <code> <head> ... </head> </code>. Весь текст, появляющийся после начального тега <code> <title> </code> и перед конечным тегом <code> </title> </code>, будет отображаться как заголовок вашей веб-страницы. Следовательно, следующий HTML-код создаст веб-страницу под названием «Моя домашняя страница»: </p> <p> Пример 3 </p> <br/> <code> <html> <p> <head> </p> <p> <code> <title> </code> <code> Моя домашняя страница </code> <code> </title> </code> </p> <p> </head> </p> <p> <body> </p> <p> </body> </p> <p> </html> </p> </code> <p> Добавление заголовка на вашу веб-страницу </p> <h3><span class="ez-toc-section" id="i-42"> Добавление содержимого на вашу веб-страницу </span></h3> <br/> Теперь, чтобы добавить контент на вашу веб-страницу, все, что вам нужно сделать, это ввести текст между <code> <body>... </body> </code> тегов. Так что давайте, например, поставим слова «ПРИВЕТ, МИР!» на вашей веб-странице. <br/> <code> <html> <p> <head> </p> <p> <title> <code> Моя домашняя страница </code> </title> </p> <p> </head> </p> <p> <code> <body> </code> </p> <p> <code> ПРИВЕТ, МИР! </code> </p> <p> <code> </body> </code> </p> <p> </html> </p> </code> <p> Это создаст веб-страницу, которая будет выглядеть так: </p> <p> Конечно, вы, вероятно, захотите сделать гораздо больше, чем просто создать сеть страница с заголовком и простым текстом на пустом белом фоне.Итак, давайте завершим этот набор руководств изучением того, как использовать элементы HTML в сочетании с атрибутами HTML ... </p> <h2><span class="ez-toc-section" id="_HTML-16"> Создание обычной HTML-страницы </span></h2> Документация Руководства и руководства <p> Преобразование HTML в AMP </p> <p> В каталоге проекта вы найдете файл с именем <code> article.html </code>. Это новостная статья, для которой мы создаем страницу, эквивалентную AMP. </p> <ol> <li> <strong> Скопируйте </strong> весь код из файла <code> article.html </code> и вставьте его в новый файл.</li> <li> <strong> Сохраните </strong> новый файл как <code> article.amp.html </code>. </li> </ol> <p> <strong> ПРИМЕЧАНИЕ - </strong> Вам не нужно называть файлы AMP как <code> .amp.html </code>. Фактически, файлы AMP могут иметь любое расширение по вашему желанию. Часто можно увидеть, как издатели отличают AMP-страницы от их канонических версий с помощью параметров в URL-адресе. Например: <code> http://publisher.com/article.html?amp </code>. </p> <p> Ваш файл <code> article.amp.html </code> должен выглядеть следующим образом: </p> <pre> <code> <! Doctype html> <html lang = "ru"> <head> <title> Новостная статья </title> <link href = "base.css "rel =" таблица стилей "/> <script type = "text / javascript" src = "base.js"> </script> </head> <body> <заголовок> Новостной сайт </header> <статья> <h2><span class="ez-toc-section" id="i-43"> Название статьи </span></h2> <p> Lorem ipsum dolor sit amet, conctetur adipiscing elit. Etiam Egestas Tortor Sapien, non tristique ligula accumsan eu. </p> </article> <img src = "mountains.jpg"> </body> </html> </code> </pre> <p> Это намеренно упрощенная страница с общими статическими элементами новостной статьи: CSS, JavaScript и тегом изображения.</p> <p> Наша AMP-версия статьи на данный момент является копией оригинальной статьи. Преобразуем его в AMP. </p> <p> Для начала добавим файл библиотеки AMP. Одно это не сделает ваш новый файл действительной страницей AMP, но ниже мы увидим, как библиотека AMP может помочь нам выяснить, что нам нужно сделать, чтобы исправить это. </p> <p> Чтобы включить библиотеку AMP, <strong> добавьте </strong> эту строку в конец тега <code> <head> </code>: </p> <pre> <code> <script async src = "https: // cdn.ampproject.org/v0.js "> </script> </code> </pre> <p> <strong> Загрузите </strong> новую страницу <code> article.amp.html </code> в своем браузере по адресу http: // localhost: 8000 / article.amp.html, а затем <strong> откройте </strong> Консоль разработчика в Chrome (или в предпочтительном браузере) . </p> <p> Когда вы проверяете вывод JavaScript в консоли разработчика (убедитесь, что у вас выбрана вкладка «Консоль»), вы должны увидеть следующую запись журнала: </p> <p> Библиотека AMP включает валидатор AMP, который сообщит вам, есть ли что-то, что мешает вашей странице быть действительным документом AMP.<strong> Включите </strong> валидатор AMP, добавив этот идентификатор фрагмента в URL вашего документа: </p> <p> Например: </p> <pre> <code> http: // localhost: 8000 / article.amp.html # development = 1 </code> </pre> <p> В консоли разработчика вы должны получить несколько ошибок проверки (вам может потребоваться вручную обновить страницу в браузере, чтобы увидеть их): </p> Ошибки проверки AMP для нашего образца <p> Чтобы сделать этот документ AMP действительным, нам нужно исправить все эти ошибки - именно этим мы и займемся в этой лаборатории кода.</p> <p> Прежде чем мы это сделаем, давайте <strong> смоделируем </strong> мобильное устройство в инструментах разработчика браузера, поскольку мы работаем с мобильной новостной статьей. Например, в Chrome DevTools щелкните значок мобильного телефона и выберите мобильное устройство в меню. </p> <p> Вы должны увидеть в своем браузере смоделированное для мобильных устройств разрешение, например: </p> Мобильная симуляция нашей AMP-страницы <p> Теперь мы готовы приступить к работе! Давайте рассмотрим ошибки проверки одну за другой и выясним, как они связаны с AMP.</p> <h2><span class="ez-toc-section" id="HTML-4"> HTML: тег </span></h2> <hr/> <p> В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом <strong> <body> </strong>, с синтаксисом и примерами. </p> <h3><span class="ez-toc-section" id="i-44"> Описание </span></h3> <p> Тег HTML <strong> <body> </strong> определяет основное содержимое документа HTML или раздел документа HTML, который будет непосредственно отображаться на вашей веб-странице. Этот тег также обычно называют элементом <body>. </p> <h3><span class="ez-toc-section" id="i-45"> Синтаксис </span></h3> <p> В HTML синтаксис тега <strong> <body> </strong>: </p> <pre> <code> <body> </body> </code> </pre> <h3><span class="ez-toc-section" id="i-46"> Атрибуты </span></h3> <p> В дополнение к глобальным атрибутам, ниже приводится список атрибутов, относящихся к тегу <body>: </p> <table> <thead> <tr> <th> Атрибут </th> <th> Описание </th> <th> HTML-совместимость </th> </tr> </thead> <tbody> <tr> <td> alink </td> <td> Цвет текста выбранных гиперссылок </td> <td> Устарело в HTML 4.01, Устарело в HTML5, используйте CSS </td> </tr> <tr> <td> фон </td> <td> Изображение для использования в качестве фона </td> <td> Устарело в HTML 4.01, Устарело в HTM L5, используйте CSS </td> </tr> <tr> <td> bgcolor </td> <td> Цвет фона </td> <td> Устарело в HTML 4.01, Устарело в HTML5, используйте CSS </td> </tr> <tr> <td> ссылка </td> <td> Цвет текста непосещенных гиперссылок </td> <td> Устарело в HTML 4.01, Устарело в HTML5, используйте CSS </td> </tr> <tr> <td> после печати </td> <td> Функция вызова пользователя распечатала документ </td> <td> HTML5 </td> </tr> <tr> <td> до печати </td> <td> Функция вызова, когда пользователь запрашивает распечатку документа </td> <td> HTML5 </td> </tr> <tr> <td> перед выгрузкой </td> <td> Функция вызова при выгрузке документа </td> <td> HTML5 </td> </tr> <tr> <td> onblur </td> <td> Функция для вызова, когда документ потерял фокус </td> <td> HTML5 </td> </tr> <tr> <td> ошибка </td> <td> Функция вызова при сбое документа </td> <td> HTML5 </td> </tr> <tr> <td> onfocus </td> <td> Функция для вызова, когда документ находится в фокусе </td> <td> HTML5 </td> </tr> <tr> <td> в обмен на </td> <td> Функция для вызова, когда часть идентификатора фрагмента адреса документа изменилась </td> <td> HTML5 </td> </tr> <tr> <td> загрузка </td> <td> Функция для вызова при загрузке документа </td> <td> HTML5 </td> </tr> <tr> <td> в сообщении </td> <td> Функция вызова, когда документ получил сообщение </td> <td> HTML5 </td> </tr> <tr> <td> онлайн </td> <td> Функция вызова при сбое сетевой связи </td> <td> HTML5 </td> </tr> <tr> <td> онлайн </td> <td> Функция вызова при восстановлении связи по сети </td> <td> HTML5 </td> </tr> <tr> <td> onpopstate </td> <td> Функция вызова, когда пользователь просматривает историю сеансов </td> <td> HTML5 </td> </tr> <tr> <td> онредо </td> <td> Функция для вызова, когда пользователь переместился вперед в истории отмен </td> <td> HTML5 </td> </tr> <tr> <td> по размеру </td> <td> Функция для вызова при изменении размера документа </td> <td> HTML5 </td> </tr> <tr> <td> на складе </td> <td> Функция вызова при изменении области хранения </td> <td> HTML5 </td> </tr> <tr> <td> онундо </td> <td> Функция для вызова, когда пользователь переместился назад в истории отмен </td> <td> HTML5 </td> </tr> <tr> <td> вкл. Разгрузка </td> <td> Функция вызова при выгрузке документа </td> <td> HTML5 </td> </tr> <tr> <td> текст </td> <td> Цвет текста переднего плана </td> <td> Устарело в HTML 4.01, Устарело в HTML5, используйте CSS </td> </tr> <tr> <td> vlink </td> <td> Цвет текста посещенных гиперссылок </td> <td> Устарело в HTML 4.01, Устарело в HTML5, используйте CSS </td> </tr> </tbody> </table> <h3><span class="ez-toc-section" id="i-47"> Примечание </span></h3> <ul> <li> HTML-элемент <body> находится внутри тега <html>. </li> <li> Наиболее распространенными элементами, помещаемыми в тег HTML <body>, являются: теги <h2><span class="ez-toc-section" id="i-48">, </span></h2> <p>, <div>, <table>. </li> </ul> <h3><span class="ez-toc-section" id="i-49"> Совместимость с браузером </span></h3> <p> Тег <body> имеет базовую поддержку в следующих браузерах: </p> <ul> <li> Хром </li> <li> Android </li> <li> Firefox (Gecko) </li> <li> Мобильный Firefox (Gecko) </li> <li> Internet Explorer (IE) </li> <li> Edge Mobile </li> <li> Опера </li> <li> Opera Mobile </li> <li> Safari (WebKit) </li> <li> Мобильный Safari </li> </ul> <h3><span class="ez-toc-section" id="i-50"> Пример </span></h3> <p> Мы обсудим тег <body> ниже, исследуя примеры использования тега <body> в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1. </p> <h4><span class="ez-toc-section" id="_HTML5"> Документ HTML5 </span></h4> <p> Если вы создали новую веб-страницу в HTML5, ваш тег <body> может выглядеть так: </p> <pre> <code> <! Doctype html> <html> <head> <meta charset = "UTF-8"> <title> Пример HTML5 от www.techonthenet.com </title> </head> <body> <h2><span class="ez-toc-section" id="i-51"> Заголовок </span></h2> <p> Это содержание. </p> </body> </html> </code> </pre> <p> В этом примере документа HTML5 тег <body> содержит два элемента - заголовок в теге <h2><span class="ez-toc-section" id="i-52"> и абзац в теге </span></h2> <p>.</p> <h4><span class="ez-toc-section" id="HTML_401"> HTML 4.01 Переходный документ </span></h4> <p> Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег <body> может выглядеть так: </p> <pre> <code> <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-Equiv = "Content-Type" content = "text / html; charset = UTF-8"> <title> HTML 4.01 Transitional Example by www.techonthenet.com </title> </head> <body> <h2><span class="ez-toc-section" id="i-53"> Заголовок </span></h2> <p> Это содержание.</p> </body> </html> </code> </pre> <p> В этом примере переходного документа HTML 4.01 тег <body> содержит два элемента - заголовок в теге <h2><span class="ez-toc-section" id="i-54"> и абзац в теге </span></h2> <p>. </p> <h4><span class="ez-toc-section" id="XHTML_10"> XHTML 1.0 Переходный документ </span></h4> <p> Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег <body> может выглядеть так: </p> <pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http: // www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-Equiv = "Content-Type" content = "text / html; charset = UTF-8" /> <title> Переходный пример XHTML 1.0 </title> </head> <body> <h2><span class="ez-toc-section" id="i-55"> Заголовок </span></h2> <p> Это содержание. </p> </body> </html> </code> </pre> <p> В этом примере переходного документа XHTML 1.0 тег <body> содержит два элемента - заголовок в теге <h2><span class="ez-toc-section" id="i-56"> и абзац в теге </span></h2> <p>.</p> <h4><span class="ez-toc-section" id="_XHTML_10"> Строгий документ XHTML 1.0 </span></h4> <p> Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег <body> может выглядеть так: </p> <pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-Equiv = "Content-Type" content = "text / html; charset = UTF-8" /> <title> Строгий пример XHTML 1.0 от www.techonthenet.com </title> </head> <body> <h2><span class="ez-toc-section" id="i-57"> Заголовок </span></h2> <p> Это содержание.</p> </body> </html> </code> </pre> <p> В этом примере XHTML 1.0 Strict Document тег <body> содержит два элемента - заголовок в теге <h2><span class="ez-toc-section" id="i-58"> и абзац в теге </span></h2> <p>. </p> <h4><span class="ez-toc-section" id="XHTML_11"> XHTML 1.1 Документ </span></h4> <p> Если вы создали новую веб-страницу в XHTML 1.1, ваш тег <body> может выглядеть так: </p> <pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http: // www.w3.org/1999/xhtml "> <head> <meta http-Equiv = "Content-Type" content = "text / html; charset = UTF-8" /> <title> XHTML 1.1 Пример с сайта www.techonthenet.com </title> </head> <body> <h2><span class="ez-toc-section" id="i-59"> Заголовок </span></h2> <p> Это содержание. </p> </body> </html> </code> </pre> <p> В этом примере документа XHTML 1.<div class='yarpp-related yarpp-related-none'> <p>No related posts.</p> </div> </div> </div> <div class="post-sharrre group"> <div id="twitter" data-url="https://ylianova.ru/html/html-stranicza-chto-eto-chto-takoe-html-kod-straniczy.html" data-text="Html страница что это: Что такое HTML-код страницы?" data-title="Tweet"></div> <div id="facebook" data-url="https://ylianova.ru/html/html-stranicza-chto-eto-chto-takoe-html-kod-straniczy.html" data-text="Html страница что это: Что такое HTML-код страницы?" data-title="Like"></div> <div id="googleplus" data-url="https://ylianova.ru/html/html-stranicza-chto-eto-chto-takoe-html-kod-straniczy.html" data-text="Html страница что это: Что такое HTML-код страницы?" data-title="+1"></div> <div id="pinterest" data-url="https://ylianova.ru/html/html-stranicza-chto-eto-chto-takoe-html-kod-straniczy.html" data-text="Html страница что это: Что такое HTML-код страницы?" data-title="Pin It"></div> </div> <script type="text/javascript"> // Sharrre jQuery(document).ready(function(){ jQuery('#twitter').sharrre({ share: { twitter: true }, template: '<a class="box group" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-twitter"></i></div></a>', enableHover: false, enableTracking: true, buttons: { twitter: {via: ''}}, click: function(api, options){ api.simulateClick(); api.openPopup('twitter'); } }); jQuery('#facebook').sharrre({ share: { facebook: true }, template: '<a class="box group" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-facebook-square"></i></div></a>', enableHover: false, enableTracking: true, click: function(api, options){ api.simulateClick(); api.openPopup('facebook'); } }); jQuery('#googleplus').sharrre({ share: { googlePlus: true }, template: '<a class="box group" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-google-plus-square"></i></div></a>', enableHover: false, enableTracking: true, urlCurl: 'https://ylianova.ru/wp-content/themes/anew/js/sharrre.php', click: function(api, options){ api.simulateClick(); api.openPopup('googlePlus'); } }); jQuery('#pinterest').sharrre({ share: { pinterest: true }, template: '<a class="box group" href="#" rel="nofollow"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-pinterest"></i></div></a>', enableHover: false, enableTracking: true, buttons: { pinterest: { description: 'Html страница что это: Что такое HTML-код страницы?' } }, click: function(api, options){ api.simulateClick(); api.openPopup('pinterest'); } }); }); </script> </div> </article> <ul class="post-nav group"> <li class="next"><a href="https://ylianova.ru/maket/psd-maket-sajta-skachat-besplatno.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Psd макет сайта: Скачать бесплатно</span></a></li> <li class="previous"><a href="https://ylianova.ru/raznoe-2/href-a-atribut-accesskey-htmlbook-ru.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Href a: Атрибут accesskey | htmlbook.ru</span></a></li> </ul> <section id="comments" class="themeform">  <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/html-stranicza-chto-eto-chto-takoe-html-kod-straniczy.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required">
Имя *

Email *

Сайт

Рубрики
Css

Html

Http

Javascript

Photoshop

Верстка

Вопросы и ответы

Макет

Развитие сайтов

Сайт

Шаблон

Шрифт

Разное

Рубрики

Css

Html

Http

Javascript

Photoshop

Адаптив

Верстка

Вопросы и ответы

Макет

Развитие сайтов

Разное

Сайт

Советы

Шаблон

Шаблоны

Шрифт

Шрифты

Блог сумасшедшего сисадмина © 2023. Все права защищены.

Карта сайта

Тег	Описание
<!DOCTYPE…>	Этот тег определяет тип документа и версию HTML.
<html>	Этот тег охватывает полный HTML-документ и в основном состоит из заголовка документа, который представлен тегами <head>…</head> и телом документа, которое представлено тегами <body>…</body>.
<head>	Этот тег представляет заголовок документа, который может содержать другие html-теги, такие как <title>, <link> и т.д.
<title>	Тег <title> используется внутри тега <head>, чтобы указать название документа.
<body>	Этот тег представляет тело документа, в котором хранятся другие html-теги, такие как <h2>, <div>, <p> и другие.
<h2>	Этот тег представляет заголовок.
<p>	Этот тег представляет абзац.