-
-
Структура HTML-кода
-
Структура документа: родитель-потомок
-
Гиперссылка
-
Справочник HTML | CSS КЛИК
-
Гиперссылка
Гиперссылки — одно из самых интересных нововведений Интернета. Они были особенностью Сети с самого начала, но именно они превращают Интернет в Интернет. Они позволяют нам связывать наши документы с любым другим документом (или ресурсом), с которым мы хотим. С их помощью мы также можем связывать документы с их конкретными частями
Анатомия ссылки
Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите Ссылки-блоки), который вы хотите превратить в ссылку, в элемент <a>
, и придания этому элементу атрибута href
(который также известен как гипертекстовая ссылка, или цель), который будет содержать веб-адрес, на который вы хотите указать ссылку.
<a href="https://igsinter.net/">домашняя страницf IGS </a>.
URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так его никто не называет) — это просто строка текста, которая определяет, где что-то находится в Интернете. Например, домашняя страница Mozilla находится по адресу https://www.mozilla.org/ru/
.
URL-адреса используют пути для поиска файлов. Пути указывают, где в файловой системе находится файл, который вас интересует.
При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — index.html
и contacts.html
. На настоящем веб-сайте index.html
был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определённого раздела веб-сайта).
Перемещение вниз в подкаталоги: Если вы хотите подключить ссылку внутри index.html
(верхний уровень index.html), указывающую на
projects/index.html
, вам нужно спуститься ниже в директории projects
перед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слеш и затем имя файла. Итак, URL-адрес, который вы используете — golf/golf.html
:
<p>Посетите мою
<a href="golf/golf.html">домашнюю страницу проекта</a>.
</p>
Перемещение обратно в родительские каталоги: Если вы хотите подключить ссылку внутри projects/index.html
, указывающую на img/1234.png
, вам нужно будет подняться на уровень каталога, затем спустится в каталог img. «Подняться вверх на уровень каталога» обозначается двумя точками — ..
— так, URL-адрес, который вы используете ../img/1234.png
:
<p>Ссылка на
<a href="../img/1234.png">фотографию</a>.
</p>
target
Значения
_blank
- Загружает страницу в новое окно браузера.
- _self
- Загружает страницу в текущее окно.
- _parent
- Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
- _top
- Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.
Фрагменты документа (cсылки внутри документа)
Можно ссылаться на определённую часть документа HTML (известную как фрагмент документа), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут id
элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:
<h2 id="Почтовый_адрес">Почтовый адрес</h2>
Затем, чтобы связаться с этим конкретным id
, вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:
<p>Хотите написать мне письмо? Используйте наш
<a href="contacts.html#Почтовый_адрес">почтовый адрес</a>.
</p>
Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на другую часть того же документа:
<p>
<a href="#Почтовый_адрес">Почтовый адрес кампании</a>
можно найти в нижней части этой страницы.
</p>
Задание
1) создать сайт КЛИК