HTML Пути к файлу
Путь к файлу описывает расположение файла в структуре папок веб-сайта.
Примеры пути к файлу
| Путь | Описание |
|---|---|
| <img src="picture.jpg"> | Файл "picture.jpg" находится в той же папке, что и текущая страница |
| <img src="images/picture.jpg"> | Файл "picture.jpg" находится в папке изображений в текущей папке |
| <img src="/images/picture.jpg"> | Файл "picture.jpg" находится в папке изображений в корне текущего веб-сайта |
| <img src="../picture.jpg"> | Файл "picture.jpg" находится в папке на один уровень выше текущей папки |
HTML Пути к файлу
Путь к файлу описывает расположение файла в структуре папок веб-сайта..
Пути к файлам используются при ссылках на внешние файлы, например:
- Веб-страницы
- Изображения
- Таблицы стилей
- JavaScripts
Абсолютный путь к файлу
Абсолютный путь к файлу — это полный URL-адрес файла:
Пример
Относительный путь к файлу
Относительный путь к файлу указывает на файл относительно текущей страницы.
В следующем примере путь к файлу указывает на файл в папке изображений, расположенный в корне текущего веб-сайта:
Пример
В следующем примере путь к файлу указывает на файл в папке изображений, находящейся в текущей папке:
Пример
В следующем примере путь к файлу указывает на файл в папке изображений, расположенный в папке на один уровень выше текущей папки:
Пример
Лучшая практика
Лучше всего использовать относительные пути к файлам (если возможно).
При использовании относительных путей к файлам ваши веб-страницы не будут привязаны к вашему текущему базовому URL. Все ссылки будут работать на вашем собственном компьютере (localhost), а также в вашем текущем общедоступном домене и ваших будущих общедоступных доменах.
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш
Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Как сделать ссылку на html файл
Тег <link> (от англ. link — ссылка, связь) устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.
Элемент <link> обычно размещается внутри контейнера <head> и не создаёт ссылку, в отличие от элемента <a> .
Синтаксис¶
Закрывающий тег не требуется.
Атрибуты¶
Также для этого элемента доступны универсальные атрибуты.
Путь к файлу, на который делается ссылка.
Синтаксис
Значения
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
media¶
Определяет устройство, для которого следует применять стилевое оформление. Это позволяет сделать разный стиль для отображения документа на экране монитора и при его печати. Допускается писать несколько значений через запятую.
Синтаксис
Значения
all Все устройства. print Печатающее устройство вроде принтера. screen Экран монитора. speech Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
В HTML5 в качестве значений могут быть указаны медиа-запросы.
Значение по умолчанию
Атрибут rel определяет отношения между текущим документом и файлом, на который делается ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый документ.
Синтаксис
Значения
alternate Альтернативный тип, используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей. author Указывает ссылку на автора текущего документа или статьи. help Указывает ссылку на контекстно-зависимую справку. icon Адрес картинки, которая символизирует текущий документ или сайт. license Сообщает, что основное содержание текущего документа распространяется по лицензии, описанной в указанном документе. next Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на следующий документ. prefetch Указывает на предварительно кэшированный ресурс текущей страницы или сайта целиком. prev Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на предыдущий документ. search Указывает ссылку на ресурс, который применяется для поиска по документу или сайту. stylesheet Определяет, что подключаемый файл хранит таблицу стилей (CSS).
Значение по умолчанию
sizes¶
Указывает размер иконок для визуального отображения. Сама иконка может применяться браузером для отображения в адресной строке, при сохранении в избранное, а также поисковыми системами для придания наглядности результатам поиска (именно так поступает Яндекс).
Синтаксис
Значения
Вначале указывается ширина иконки в пикселах без указания единиц (например, 16), затем пишется латинская буква x в верхнем (X) или нижнем регистре (x), после чего идёт высота иконки. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться в любой размер, к примеру, если она хранится в векторном формате SVG.
Значение по умолчанию
Сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS.
Синтаксис
Значения
Имя MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css .
5.2. Создание ссылок на документы и файлы.
Адресная часть указывает браузеру, на какой документ или место в документе организована ссылка.
Указатель отображается на экране и служит для указания на ссылку.
Тэг <BASEHREF> — указывает базовый адрес, относительно которого построена вся адресация.
5.3. Ссылки внутри документа.
Для задания ссылки внутри документа необходимо определить закладку, на которую будет происходить ссылка. Это осуществляется указанием атрибута NAME в тэге якоря. Ссылка на закладку осуществляется стандартным образом.
<marquee>Houdy! This is proba. </marquee>
<p> <a href =»#proba»> Ссылка на закладку под именем proba.</a> </p>
<FONT FACE=»ARIAL» SIZE=»2″ COLOR=»YELLOW»>
<a name =»#proba»> На этот текст осуществляется внутренняя ссылка.</p>
Тема 6. Списки в html-документах.
6.1. Упорядоченный (нумерованный) список.
<li>1-й элемент списка
<li>i-й элемент списка
Вложенный список:
<li>1-й элемент списка
<li>i-й элемент списка
6.2. Неупорядоченный (маркированный) список.
<li>1-й элемент списка
<li>i-й элемент списка
6.4. Список определений.
Глоссарий (список определений). Состоит из определяемого термина и абзаца, раскрывающего его значение. Удобен для составления каталога.
<dd>Определение (описание) термина
6.5. Комбинированные списки.
Бывают случаи, когда в список одного типа требуется включить список (списки) другого типа. Например:
<title>Пример комбинированного списка</title>
<li>Roman god of commerce and travel
<dd>The smallest of the planets and the one nearest the sun.
<li>Roman goddess of love and beauty
<dd>The second planet from the sun.
6.6. Дополнительные возможности форматирования списков.
Для организации неупорядоченного списка можно использовать собственные маркеры (например, рисунки). Тогда вместо тэга <li> необходимо вставить код маркера, например:
Стандартные ссылки
Ссылки — вот что заставляет Web двигаться!
Ссылки создаются в HTML с помощью тега <а>. Кроме того, следует включить атрибут ссылки — href и закрывающий тег </а>.
Броузер не выводит на экран саму ссылку, а показывает только текст, заключенный между угловыми скобками > и < (текст_ссылки).
Можно создавать ссылки не только на другие документы, но и на определенные точки внутри одной и той же страницы HTML.
Для определения места ссылки в HTML-документе необходимо создать метку (иначе — закладку или якорь).
Метка (закладка, якорь) также создается при помощи тега <а>, но уже с другим атрибутом — name (или id).
Обратите внимание на атрибут id!
В последених двух стандартах XHTML и XML (которые со временем могут вытеснить HTML) — Консорциумом W3C предусмотрен новый атрибут тега <а> — атрибут id, который должен заменить атрибут name.
Для того, чтобы не пришлось редактировать ваши Web-страницы после введения нового стандарта, уже сейчас можно использовать оба этих атрибута.
Например: The Third Rule can be found here.
Это ссылка на определенное место в документе.
А вот как это должно быть написано в вашем HTML-документе:
Здесь #Anchor — метка, на которую указывает атрибут ссылки. Символ # обязателен перед меткой. Он необходим для того, чтобы отличить метку от имени файла.
Конечно, если ваш документ помещается в окне броузера и не требует прокрутки, использовать такие ссылки бесполезно. Но если вы создали длинный (а может быть и нудный документ) — то ссылки необходимы. Хотя бы развлечете своего читателя.
А вот в случае, когда вы создаете большой (длинный) документ, который вы предваряете его содержанием, желательно использовать в таблице содержания ссылки на заголовки вашего документа.
По умолчанию, текст ссылки в HTML-документе подчеркнут и окрашен в синий цвет.
НО! Как только вы воспользуетесь этой ссылкой (прочитаете ее), «щелкнув» по ней, она изменит свой цвет на бордовый. Это подскаывает пользователю, что в этом уголке страны Интернет его «уже видели».
Разумеется, вы можете изменить эти цвета и удалить подчеркивание текста ссылки, воспользовавшись таблицами стилей.
Этот результат можно получить при помощи тега <body>, используя атрибут <link> для непрочитанной ссылки и <vlink> — для прочитанной ссылки. Например:
Подумайте хорошенько, следует ли вам изменять стандартные значения цветов для ссылок. Пользователь — консерватор, не старайтесь запутать его!
А это в HTML-документе записано так:
Можно сделать ссылки на другие Web-страницы вашего собственного Web-сайта или на отдельные файлы, которые расположены на жестком диске вашего компьютера. Для этого необходимо указать путь поиска файла.
Путь поиска может быть абсолютным или относительным.
Абсолютный путь описывает местоположение файла, начиная с самого высокого уровня, и включает имена всех каталогов, ведущих к файлу.
Формат абсолютного пути для файла на жестком диске выглядит так:
Относительный путь описывает местоположение файла относительно места расположения текущего HTML-документа.
Таким образом, если вы указываете просто имя файла (например, content.htm), это означает, что вы указываете его относительный адрес. Если перед именем файла поставить (например, ..\content.htm, то броузер будет искать файл в каталоге, находящимся на один уровень выше ,чем тот, в котором находится текущий документ.
Попробуйте открыть документ, щелкнув на моей гиперссылкe .
Попробовали? Отлично! В HTML-документе это записано так: Здесь указан относительный адрес. А теперь попробуем открыть документ, находящийся в другой папке Галерея Клода Моне.
В HTML-документе это записано так: Здесь тоже указан относительный адрес. Чтобы создать ссылку на другую страницу, необходимо убедиться, что эта ссылка действительно создает связь с этой страницей.Для этого есть несколько методов.
Надеюсь, вы заметили, что в одном случае употрбляются «прямые » косые черты /, а в другом обратные \?
Это связано с тем, что прямые косые черты используются для разделения имен папок файлового сервера в World Wide Web.
Обратные косые черты предназначены для разделения имен папок в файловых системах ОС Windows и DOS.
Предположим, вы создаете длинный документ и разбиваете его на разделы. Каждый раздел начинается с заголовка. В этом случае вы можете вставить метку в заголовок. Например, пусть имеется заголовок:
Вы можете сделать этот заголовок потенциальной меткой, включив в него тег <a name= identifier > . </a>
Теперь вы можете использовать эту метку, например как это сделано на странице «Содержание».
Обратите внимание — в качестве метки используется имя файла страницы «Содержание» ref.htm, которое предваряет метку #метка_1
Не забывайте о символе # перед именем метки!
Если необходимо создать ссылку на конкретное место Web-документа, опубликованного во «всемирной паутине», в качестве метки указывается Web-адрес документа + символ # + метка конкретного места в документе. Например, если адрес документа «http://www.bath.co.uk/», то ссылка на этот документ будет выглядеть так:
В качестве ссылки может быть указан только Web-адрес документа. В этом случае ссылка делается на весь документ.
Зайдем в галерею Клода Моне во всемирной паутине?
В HTML-документе это выглядит так:
Обратите внимание на новый атрибут ссылки target !
Он используется для того, чтобы HTML-документ (в данном случае страница gallery2.htm) загрузился в тот же фрейм, из которого он вызывался. Подробно понятие фреймов и работа с ними описаны в документе Фреймы.
Можно сделать ссылку на любой электронный адрес. Для этого в код ссылки необходимо включить префикс mailto:.
Например, Напишите мне, пожалуйста, была ли понятна и полезна вам эта статья.
В HTML-документе эта ссылка выглядит так: Таким образом, чтобы отправить сообщение по электронной почте, пользователю нет необходимости самому открывать программу электронной почты. Эта программа будет запущена автоматически, как только пользователь щелкнет по ссылке.
Графические ссылки
Структура графической ссылки имеет вид:
Например, полюбуемся цветами!
В HTML-коде это записано так:
К графической ссылке можно добавить поясняющий текст и всплывающую надпись:
А вот результат:
Разумеется графическая ссылка может быть применена для ссылки на любой HTML-документ. Например,
Создание графической карты ссылок
Существует возможность создания графической карты ссылок для Web-сайта (группы Web-страниц). Для этого необходимо сопоставить одному изображению сопоставить несколько ссылок, сопоставив каждую из них к какой-либо области этого изображения.
Эти области могут быть различной формы: прямоугольной, многоугольной, в виде окружности. Это очень удобный прием оформления группы ссылок.
При выборе изображения, служащего основой карты ссылок, необходимо стремиться к тому, чтобы границы областей были хорошо очерченными и не пересекались.
Используйте пояснительные тексты, для того, чтобы пользователь понял, что это карта ссылок, а не просто красивая картинка.
При наведении на область ссылки курсор мыши изменяет свою форму, как и при использовании обычных ссылок. При щелчке мыши на этой области ее границы становятся видимыми.
Графическая карта создается с помощью нескольких тегов.
Первым является тег <map> с атрибутом name для указания имени карты. Имя карты выбирается как имя переменной. В контейнере внешних тегов <map> и </map> содержатся теги <area> (область) для задания областей ссылок.
Тег <area> имеет атрибуты, определяющие ссылку, форму и положение области ссылки.
- href — строка, определяющая адрес ссылки
- shape — определяет форму области; возможны значения
- rect — прямоугольник
- polygone — мноугольник
- circle — круг
После закрывающего тега следует указать тег, вставляющий графическое изображение и реализующий привязку карты к нему — тег <img>,подробно описанный в документе «добавление изображений»
Кроме атрибутов, описанных раннее в этом случае в теге <img> добавляется атрибут связи с картой:
В качестве имени карты указывается аргумент атрибута name тега </map>
Рассмотрим пример:
Перед вами усеченный вариант карты ссылок этого сайта. Попробуйте подвести курсор мыши к прямоугольной или круглой области и вы увидете «всплывающее» название страницы. Щелкнув мышкой по любому из выбранных объектов вы можете перейти на интересующую вас страницу. В HTML-код это записано так:
Здесь атрибут src тега img определяет графический элемент «map.jpg».
Атрибут usemap ссылается на элемент карты как на Web-адрес, следовательно указывается символ #. В качестве атрибута границы border указан «0».
В теге map указывается какие области графического элемента (карты) «работают» как гиперссылки. Атрибут name соответствует атрибуту usemap тега img и «работает» как атрибут name в теге якоря <a>.Желательно, чтобы все элементы карты находились в том же файле, что и гоафический элемент, определяемый в теге img.
Теги area используется для определения областей на карте графических ссылок, которые будут связаны с Web-адрессами. Атрибуты shape определяют типы областей, в данном случае «rect» и «circle». В этом же теге area определяются координаты объектов (различные для каждого типа объекта) с помощью атрибута coords.
Если две или более областей на карте перекрывают друг друга, то преимущество имеет та область, описание которой появилось в HTML-документе раньше (т.е. пользователю будет предоставлена возможность использовать описание и ссылку первой появившейся в документе области.
В некоторых случаях удобно созавать перекрывающиеся области, делая одну из них неактивной исползуя атрибут nohref, например:
В этом случае первая окружность создает неактивную область, находящуюся в пределах большой окружности — созданной вторым тегом area. Чтобы получить ожидаемый эффект, необходимо, чтобы неактивная область была описана первой (иначе она будет скрыта активной формой).
Посмотрим, что получится?