Html справочник: Тег

Содержание

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
1.0+	1.0+	2.1+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис

<a href="URL">...</a>
<a name="идентификатор">...</a>

Атрибуты

accesskey: Активация ссылки с помощью комбинации клавиш.
coords: Устанавливает координаты активной области.
download: Предлагает скачать указанный по ссылке файл.
href: Задает адрес документа, на который следует перейти.
hreflang: Идентифицирует язык текста по ссылке.
name: Устанавливает имя якоря внутри документа.
rel: Отношения между ссылаемым и текущим документами.
rev: Отношения между текущим и ссылаемым документами.
shape: Задает форму активной области ссылки для изображений.
tabindex: Определяет последовательность перехода между ссылками при нажатии на кнопку Tab.
target: Имя окна или фрейма, куда браузер будет загружать документ.
title: Добавляет всплывающую подсказку к тексту ссылки.
type: Указывает MIME-тип документа, на который ведёт ссылка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="utf-8">
  <title>Тег А</title>
 </head>
 <body>
  <p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>
  <p><a href="tip.html">Как сделать такое же фото?</a></p> 
</body>
</html>

Строчные элементыСсылки

Атрибут target
Атрибуты ссылок
Блочные элементы
Изображение в качестве ссылки
Как сделать ссылку
Правила вложений для тега <a>
Свойства ссылок
Ссылка на адрес эл. почты
Ссылка на адрес электронной почты
Ссылка на новое окно

Ссылки
Ссылки без подчеркивания
Ссылки внутри страницы
Ссылки во фреймах
Строчные элементы
Что всё это значит?
Элемент base
Якоря

| HTML | WebReference

Содержание
- Синтаксис
- Закрывающий тег
- Атрибуты
- Пример
- Спецификация
- Браузеры

Элемент <html> является контейнером, который заключает в себе всё содержимое веб-страницы, включая элементы <head> и <body>. Открывающий и закрывающий теги <html> в документе не обязательны, но хороший стиль диктует непременное их использование. Как правило, <html> идёт в документе вторым, после определения типа документа (Document Type Definition, DTD), устанавливаемого через <!DOCTYPE>. Закрывающий тег <html> всегда стоит в документе последним.

Синтаксис

<html>
  . ..
</html>

Закрывающий тег

Не обязателен.

Атрибуты

manifest: Указывает файл манифеста, необходимый для создания оффлайнового приложения.
version: Задаёт версию DTD. Данный атрибут не нужен и избыточен, версия определяется через <!DOCTYPE>.
xmlns: Указывает пространство имён для XHTML-документов.

Также для этого элемента доступны универсальные атрибуты.

Пример

<!DOCTYPE HTML> <html> <head> <!— Этот раздел предназначен для заголовка страницы и технической информации. —> </head> <body> <!— А здесь надо размещать все, что хочется увидеть на странице. —> </body> </html>

Спецификация

Спецификация	Статус
WHATWG HTML Living Standard	Живой стандарт
HTML5	Рекомендация
HTML 4. 01 Specification	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.

Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры


1	12	1	1	1	1


1	1	6	1

Браузеры

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

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

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

Документ

См. также

Валидный HTML-документ
Создание первой веб-страницы

Практика

Атрибут lang
Структура HTML-кода

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30. 03.2018

Редакторы: Влад Мержевич

Пути к файлам HTML

❮ Предыдущий Далее ❯

Путь к файлу описывает расположение файла в структуре папок веб-сайта.

Примеры пути к файлу

Путь	Описание
	Файл «picture.jpg» находится в той же папке, что и текущая страница
	Файл «picture.jpg» находится в папке images в текущей папке
	Файл «picture.jpg» находится в папке с изображениями в корне текущей сети
	Файл «picture.jpg» находится в папке на один уровень выше текущей папки

Пути к файлам HTML

Путь к файлу описывает расположение файла в структуре папок веб-сайта.

Пути к файлам используются при ссылке на внешние файлы, например:

Веб-страницы
Изображения
Таблицы стилей
JavaScripts

Абсолютные пути к файлам

Абсолютный путь к файлу — это полный URL-адрес файла:

Пример

w3schools.com/images/picture.jpg» alt=»Mountain»>

Попробуйте сами »

Тег описан в главе: HTML-изображения.

Относительные пути к файлам

Относительный путь к файлу указывает на файл относительно текущей страницы.

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

Пример

Попробуйте сами »

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

Пример

Попробуйте сами »

В следующем примере путь к файлу указывает на файл в папке images, расположенной в папка на один уровень выше текущей папки:

Пример

Попробуйте сами »

Работа с файлами — Изучите веб-разработку

Предыдущий
Обзор: Начало работы в Интернете
Следующий

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

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

Выберите место для хранения проектов вашего сайта. В выбранном вами месте создайте новую папку с именем web-projects (или аналогичную). Здесь будут жить все проекты вашего сайта.
Внутри этой первой папки создайте еще одну папку для хранения вашего первого веб-сайта. Назовите ее test-site (или как-то более изобретательно).

Вы заметите, что на протяжении всей этой статьи мы просим вас называть папки и файлы полностью строчными буквами без пробелов. Это потому что:

Многие компьютеры, особенно веб-серверы, чувствительны к регистру. Так, например, если вы поместите изображение на свой веб-сайт по адресу test-site/MyImage.jpg , а затем в другом файле попытаетесь вызвать изображение как test-site/myimage.jpg , это может не сработать.
Браузеры, веб-серверы и языки программирования не всегда обрабатывают пробелы. Например, если вы используете пробелы в имени файла, некоторые системы могут рассматривать это имя как два имени файла. Некоторые серверы заменят области в ваших именах файлов на «%20» (код символа для пробелов в URL-адресах), в результате чего все ваши ссылки будут неработающими. Слова лучше разделять дефисом, а не подчеркиванием: my-file.html против my_file. html .

Короткий ответ: вы должны использовать дефис для имен файлов. Поисковая система Google воспринимает дефис как разделитель слов, но не воспринимает таким образом подчеркивание. По этим причинам лучше выработать привычку писать имена папок и файлов строчными буквами без пробелов и со словами, разделенными дефисами, по крайней мере, до тех пор, пока вы не поймете, что делаете. Таким образом, вы столкнетесь с меньшим количеством проблем в будущем.

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

index.html : Этот файл, как правило, будет содержать содержимое вашей домашней страницы, то есть текст и изображения, которые люди видят при первом посещении вашего сайта. С помощью текстового редактора создайте новый файл с именем index.html 9.0203 и сохраните его прямо в папке тестовой площадки .
изображения папка : Эта папка будет содержать все изображения, которые вы используете на своем сайте. Создайте папку с именем images внутри папки тестового сайта .
стили папка : эта папка будет содержать код CSS, используемый для оформления содержимого (например, для настройки цвета текста и фона). Создайте папку с именем styles внутри вашего тестовая папка .
scripts папка : Эта папка будет содержать весь код JavaScript, используемый для добавления интерактивных функций на ваш сайт (например, кнопки, которые загружают данные при нажатии). Создайте папку с именем scripts внутри папки тестового сайта .

Примечание: На компьютерах с Windows могут возникнуть проблемы с просмотром имен файлов, поскольку в Windows есть параметр Скрывать расширения для файлов известных типов включен по умолчанию. Как правило, вы можете отключить это, перейдя в проводник Windows, выбрав Параметры папки… , сняв флажок Скрыть расширения для известных типов файлов , затем нажав OK . Более подробную информацию о вашей версии Windows можно найти в Интернете.

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

Скопируйте изображение, которое вы выбрали ранее, в папку images .
Откройте файл index.html и вставьте в него следующий код точно так, как показано. Пока не беспокойтесь о том, что все это значит — мы рассмотрим структуры более подробно позже в этой серии.
```
 

  <голова>
    <метакодировка="utf-8" />
    Моя тестовая страница
  
  <тело>
    
  

 
```
Строка — это код HTML, который вставляет изображение на страницу. Нам нужно сообщить HTML, где находится изображение. Изображение находится внутри каталога images , который находится в том же каталоге, что и 9.0202 index.html . Чтобы перейти по файловой структуре от index.html к нашему изображению, нам понадобится путь к файлу images/your-image-filename . Например, наше изображение называется firefox-icon.png , поэтому путь к файлу — images/firefox-icon.png .
Вставьте путь к файлу в код HTML между двойными кавычками кода src="" .
Измените содержимое атрибута alt на описание включаемого изображения. В этом случае alt="Логотип Firefox: пылающий лис, окутывающий мир" .
Сохраните файл HTML, затем загрузите его в веб-браузере (дважды щелкните файл). Вы должны увидеть свою новую веб-страницу с вашим изображением!

Некоторые общие правила для путей к файлам:

Чтобы создать ссылку на целевой файл в том же каталоге, что и вызываемый файл HTML, просто используйте имя файла, например. my-image.jpg .
Чтобы сослаться на файл в подкаталоге, напишите имя каталога перед путем и косую черту, например. подкаталог/my-image.jpg .
Чтобы создать ссылку на целевой файл в каталоге выше вызывающего HTML-файла, напишите две точки. Так, например, если index.html находится внутри подпапки test-site , а my-image.jpg находится внутри test-site , вы можете сослаться на my-image. jpg из index. html с использованием ../my-image.jpg .
Вы можете комбинировать их сколько хотите, например ../подкаталог/другой-подкаталог/мое-изображение.jpg .

Пока это все, что вам нужно знать.

Примечание: Файловая система Windows обычно использует обратную, а не прямую косую черту, т.е. C:\Windows . В HTML это не имеет значения — даже если вы разрабатываете свой веб-сайт для Windows, вы все равно должны использовать косую черту в своем коде.

На этом пока все. Ваша структура папок должна выглядеть примерно так:

Предыдущий
Обзор: Начало работы в Интернете
Следующий

Установка базового ПО
Как будет выглядеть ваш сайт?
Работа с файлами
Основы HTML
Основы CSS
Основы JavaScript
Публикация вашего веб-сайта
Как работает сеть

Последнее изменение:

Html справочник: Тег | htmlbook.ru

Тег | htmlbook.ru

Спецификация

Описание

Синтаксис

Атрибуты

Закрывающий тег

| HTML | WebReference

Синтаксис

Закрывающий тег

Атрибуты

Пример

Спецификация

Спецификация

Браузеры

Браузеры

См. также

Практика

Автор и редакторы

Пути к файлам HTML

Примеры пути к файлу

Пути к файлам HTML

Абсолютные пути к файлам

Пример

Относительные пути к файлам

Пример

Пример

Пример

Рекомендации

COLOR PICKER

КОД ИГРЫ

Лучшие учебники

2 Top0 Examples Примеры HTML

Работа с файлами — Изучите веб-разработку

Добавить комментарий Отменить ответ