Как сделать ссылку на html файл в html
Обновлено: 30.06.2024
После того, как вы сможете создавать HTML-страницы, вам захочется научиться создавать ссылки между ними, чтобы вы могли приступить к созданию сайта. Ссылки — это сущность HTML, именно они делают его уникальным.
Пока вы изучаете ссылки, я также научу вас основам организации и структуры сайта.
Первые ссылки
Хорошо, у вас есть страница, которую вы научились писать на первом уроке. Теперь вам понадобится еще одна страница. Это не должно быть чем-то выдающимся, достаточно простой страницы. Вы можете скопировать первую страницу и просто сохранить ее под другим именем, если хотите. Просто убедитесь, что вы знаете имена двух файлов и что они находятся в одной папке. Не забудьте назвать свою домашнюю страницу index.html .
Совет: всегда используйте строчные буквы в названиях html-файлов, изображений и папок. Большинство веб-серверов (компьютеров, на которых вы в конечном итоге разместите свой сайт) чувствительны к регистру, а это означает, что для них важно, используются ли в ваших файлах заглавные буквы или нет. При создании ссылок на страницы или вводе URL-адресов вам не нужно запоминать регистр каждой буквы, поэтому, если все используют строчные буквы, проблема исчезнет.
Структура ссылок
Как и все теги, ссылки имеют определенную структуру и имеют начальные и конечные теги. Поместите эту строку кода на одну из своих страниц.
- a : a означает Anchor, что означает ссылку. Это тег, благодаря которому все это происходит.
- href : означает гипертекстовую ссылку. Часть href — это еще один атрибут, значением которого является местоположение другой страницы. Просто измените theotherpage.html на имя второго файла. Не забудьте кавычки!
Все, что вы поместите в теги ссылок, станет ссылкой, окрашенной в синий цвет и подчеркнутой. Когда вы наведете на нее указатель мыши, ваш курсор превратится в руку, а URL-адрес страницы появится в строке состояния вашего браузера (в нижней части окна). Если вы хотите сделать ссылки на другие части вашей страницы (например, ссылку на верхнюю часть страницы), настройте несколько внутренних ссылок. Изменение цветов ссылок по умолчанию осуществляется в атрибутах body.
Ссылки на адреса электронной почты
Если вы хотите, чтобы люди могли отправлять вам электронные письма, нажав на ссылку, используйте этот код:
чтобы создать это — напишите мне — откроется программа электронной почты пользователя с вашим адресом в поле Кому:.
Ссылки на изображения
Ссылка на файл изображения практически такая же, как и на файл html. Просто укажите имя файла и не забудьте правильный суффикс — например, если это gif или jpg. Для краткого изложения форматов файлов изображений в Интернете прочитайте это. Если вы хотите использовать изображение в качестве ссылки, прочитайте следующее руководство.
Ссылки на файлы
Вы ссылаетесь на файл так же, как на изображение. Разница лишь в том, что он не откроется в браузере, а загрузится в указанное место на жестком диске ридера. Пример:
Встраивание файла непосредственно в страницу — это другой процесс. У нас также есть страница о форматах файлов в Интернете.
Абсолютные и относительные ссылки
Относительные ссылки могут вести только на страницу того же сайта. Адрес всегда относится к позиции второго файла. Если бы вы ссылались на ту же страницу со страницы в том же каталоге, href был бы просто page1.html. Если бы вы устанавливали ссылку со своей домашней страницы, то есть из корневого каталога, ссылка выглядела бы как , так как вам нужно было бы сначала перейти в каталог, а затем получить файл.
Подсказка: если вы называете файлы index.html в своих каталогах, вы можете делать ссылки на эти страницы, просто ссылаясь на имя каталога. Ваш браузер всегда будет использовать index в качестве главной страницы для этой папки. Это означает, что вы можете сжать href="folder/index.html" в href="folder/" . Косая черта говорит браузеру, что он должен искать папку, а не файл. Не забудьте!
Линкал Гимнастика
Если вам нужно подняться вверх по каталогу, а затем вернуться в другой, вам нужно понять, как устроен ваш сайт. Используя исходный код HTML в качестве примера, мы сейчас находимся в разделе «myfirstsite». Посмотрите на адресную строку, чтобы увидеть. Если бы мы хотели сделать ссылку относительно раздела «images», нам пришлось бы перейти на один каталог вверх, а затем вниз в каталог изображений. Таким образом, полный относительный адрес href будет выглядеть так:
"../images/index.html"
Видите две точки? Они означают «перейти вверх по каталогу» к вашему корню. Таким образом, независимо от того, насколько глубоко вы погрузились в свой сайт, вы всегда можете вернуться к нему с помощью пары ../../. Просто считайте каталоги, пока не окажетесь на нужном уровне.
Совет источника: если вы хотите сделать ссылку на страницу, которая находится в верхней части вашего сайта (не глубоко в каталогах), вы можете начать ссылку с косой черты. Это означает «начать с корневого каталога». Итак, href выше может быть просто /images/ . Это избавляет вас от необходимости вводить множество ../../s. Ссылка на главную страницу всегда href="/"
Внешние ссылки
Структура сайта
Без простого плана игры на вашем сайте скоро будет очень трудно найти что-то для вас, учитывая все файлы, которые вы продолжаете накапливать на нем. Таким образом, вам следует сгруппировать страницы схожей тематики в папки (каталоги). Храните все изображения в одной папке, отдельно от html-файлов (назовите папку «images» или «media» или что-то в этом роде).
Я бы также посоветовал вам поработать над шаблоном вашего дизайна. Возможно, сейчас это не важно, так как ваш сайт может не иметь отличительного дизайна, но позже этот файл сэкономит вам часы времени. Что вы делаете, так это сохраняете файл без содержимого, только макет ваших страниц как TEMPLATE.html в каждом каталоге вашего сайта (заглавными буквами, чтобы он выделялся), со всеми правильными ссылками. Затем, когда вы добавляете страницу в папку, вы просто открываете этот файл, добавляете в него свой контент и сохраняете под другим именем, оставляя template.html пустым, готовым к другому использованию. Чтобы увидеть наш шаблон для этого каталога, см. это. Проверьте, у нас есть по одному в каждом каталоге.
Скажем, у вас есть сайт о солнечной системе (просто скажите). Храните все файлы о Марсе в папке «mars», а все изображения Марса — в папке «images» в папке «mars». И сохраните фотографии Урана… нет. Я выше этого.
В этом уроке вы узнаете, как включать ссылки в HTML-документ.
В это время на вашем экране должны быть открыты три окна. Окно Netscape с этим учебным пособием, экспериментальное окно для просмотра HTML-документа и окно, в котором вы будете вводить HTML-документ.
Ссылка на локальные документы
В этой части руководства вы создадите три HTML-документа: один документ будет содержать ссылки на два других.
Все эти три документа будут локальными документами, поскольку вы будете сохранять их на дискете или жестком диске.
Создайте HTML-документ, в котором будет отображаться только ваше имя.
Сохраните этот файл и назовите его по имени .
Создайте другой HTML-документ, в котором будет отображаться только ваша фамилия.
Сохраните этот файл и назовите его фамилией.
Наконец, вы создадите документ, в котором будут две гиперссылки. Первая гиперссылка свяжет вас с файлом вашего имени, а вторая гиперссылка свяжет вас с файлом вашей фамилии.
Пришло время создать третий HTML-документ, который будет содержать ссылки на файлы с вашим именем и файл с фамилией.
Введите следующий источник, но не дословно. Вы должны указать URL файлов с вашим именем и фамилией, заключенные в двойные кавычки.
Обратите внимание на новые теги:
и
Эти теги составляют две части ссылки.
Тег – это первая часть ссылки. Тег означает, что идет ссылка, а имя файла является целью ссылки (куда вы перейдете).
Текст между тегом и закрывающим тегом является второй частью ссылки. Этот текст будет выделен в вашем документе. Когда читатель нажимает на этот выделенный текст, он переходит к цели (то есть к имени файла, которое вы ввели в теге).
В приведенном выше примере имя и фамилия будут выделены в вашем третьем документе и свяжут вас с именем и фамилией файлов.
То есть ваш третий HTML-документ должен выглядеть так:
Сохраните этот файл и назовите его ссылки.
Нажмите на экспериментальное окно и просмотрите ссылки на файлы.
Нажмите на две ссылки, чтобы узнать, добились ли вы успеха. Если что-то пошло не так, внимательно проверьте синтаксис и убедитесь, что вы ввели правильный URL.
Создание графической ссылки
В качестве ссылки можно использовать изображение.
В уроке мы будем использовать цветок в качестве графической ссылки.
Когда вы нажимаете на цветок, вы должны перейти к файлу, содержащему ваше имя (имя). Для создания этой графической ссылки вам нужно скачать изображение цветка и вспомнить, где вы его сохранили.
Загрузите приведенное ниже изображение цветка и сохраните его на дискете или жестком диске. Запомните, куда вы его сохранили.
Нажмите на окно, содержащее ссылки на HTML-документы. В исходном тексте замените текст «имя», который содержится между первым набором тегов и, следующим:
и сохраните изменения.
Вы только что заменили текст "имя" изображением цветка.
Нажмите на экспериментальное окно и откройте документ со ссылками. Должно появиться изображение цветка, вокруг которого должна быть окантовка, указывающая на то, что это ссылка.
Нажмите на новую графическую ссылку и посмотрите, работает ли она.
В этом уроке вы узнаете, как создавать ссылки на другие страницы в HTML.
Создание ссылок в HTML
Ссылка или гиперссылка — это соединение одного веб-ресурса с другим.Ссылки позволяют пользователям беспрепятственно переходить с одной страницы на другую на любом сервере в любой точке мира.
Ссылка имеет два конца, которые называются анкорами. Ссылка начинается с исходной привязки и указывает на целевую привязку, которая может быть любым веб-ресурсом, например, изображением, аудио- или видеоклипом, файлом PDF, документом HTML или элементом в самом документе и т. д. вкл.
По умолчанию в большинстве браузеров ссылки отображаются следующим образом:
- Непосещенная ссылка подчеркнута и окрашена в синий цвет.
- Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет.
- Активная ссылка подчеркнута и окрашена в красный цвет.
Однако вы можете перезаписать это с помощью CSS. Узнайте больше о стилях ссылок.
Синтаксис ссылки HTML
Ссылки указываются в HTML с помощью тега.
Ссылка или гиперссылка может быть словом, группой слов или изображением.
Все, что находится между открывающим и закрывающим тегами, становится частью ссылки, которую пользователь видит и нажимает в браузере. Вот несколько примеров ссылок:
Пример
Атрибут href указывает цель ссылки. Его значение может быть абсолютным или относительным URL-адресом.
Установка целей для ссылок
Атрибут target сообщает браузеру, где открыть связанный документ. Существует четыре определенных цели, и имя каждой цели начинается с символа подчеркивания ( _ ):
- _blank — открывает связанный документ в новом окне или вкладке.
- _parent — открывает связанный документ в родительском окне.
- _self — открывает связанный документ в том же окне или вкладке, что и исходный документ. Это значение по умолчанию, поэтому явно указывать это значение не требуется.
- _top — открывает связанный документ в полном окне браузера.
Попробуйте следующий пример, чтобы понять, как в основном работает цель ссылки:
Пример
Совет. Если ваша веб-страница размещена внутри iframe, вы можете использовать target="_top" в ссылках, чтобы выйти из iframe и отобразить целевую страницу в полном окне браузера.
Создание привязок к закладкам
Вы также можете создавать привязки закладок, чтобы пользователи могли переходить к определенному разделу веб-страницы. Закладки особенно полезны, если у вас очень длинная веб-страница.
Пример
Создание ссылок для скачивания
Вы также можете создать ссылку для скачивания файла точно так же, как текстовые ссылки. Просто укажите целевой URL-адрес файла, который вы хотите сделать доступным для загрузки.
В следующем примере мы создали ссылки для загрузки файлов ZIP, PDF и JPG.
Пример
Примечание. Если щелкнуть ссылку, указывающую на файл PDF или изображение, файл не будет загружен на жесткий диск напрямую. Он откроет файл только в вашем веб-браузере. В дальнейшем вы можете сохранить или скачать его на жесткий диск на постоянной основе.
Взгляните на этот пример, который является ссылкой на популярную поисковую систему Google:
поисковая система Google
После адреса идет правая угловая скобка ( > ). Затем идет текст, который люди видят, текст, на который вы хотите, чтобы они нажали. Чтобы закрыть якорную ссылку, вы используете конечный тег якоря. Что это:
Но давайте проведем практическую работу.
Откройте текстовый файл шаблона. Нажмите «Файл» > «Сохранить как» в меню Блокнота (или любого другого текстового редактора, который вы используете). Когда появится диалоговое окно «Сохранить как», перейдите в папку HTML:
Поэтому мы собираемся сохранить новую веб-страницу за пределами папки pages.
В поле имени файла введите index.html. Убедитесь, что в области «Тип файла» указано «Все файлы», если вы используете Windows. Перед тем, как вы нажмете кнопку «Сохранить», окно вашего Проводника должно выглядеть так:
При нажатии кнопки "Сохранить" в папке HTML должна появиться веб-страница с именем index.html:
Что мы собираемся сделать, так это разместить гиперссылку на нашей индексной странице. Когда эта гиперссылка будет нажата, мы укажем браузеру загрузить страницу с именем about.html. Мы сохраним эту новую страницу о себе в папке наших страниц.
Итак, используйте текстовый файл шаблона для создания новой веб-страницы. При сохранении страницы дважды щелкните папку страниц, чтобы перейти в нее. В поле имени файла введите about.html. Затем сохраните свою страницу:
Итак, у нас есть веб-страница в папке HTML и веб-страница в папке pages. Теперь нам нужно связать их вместе.
Откройте свой код для страницы index.html. Вставьте следующую строку между двумя тегами BODY:
Ваш код должен выглядеть так (мы добавили НАЗВАНИЕ):
Сохраните свою работу и загрузите страницу в браузере. Вы должны увидеть это:
А это гиперссылка! Обратите внимание, что единственное, что на странице доступно для просмотра посетителю, это текст «Об этом сайте». Код, который мы написали, превращает обычный текст в ссылку, по которой люди могут щелкнуть. Сам код был таким:
Об этом сайте
Поэтому, чтобы превратить текст в ссылку, вы должны начать с угловой скобки, за которой следует буква A. После пробела введите HREF.Далее идет знак равенства. Страница, на которую вы хотите сослаться, заключена в кавычки. Но обратите внимание, мы начали с имени папки: pages/about.html. Это говорит: «Ищите страницу с именем about.html. Эта страница находится в папке страниц».
При переходе по ссылке в браузере должна загружаться пустая страница. Если вы посмотрите на адресную строку, то увидите в конце about.html. Вы успешно установили ссылку на новую страницу!
Чтобы вернуться на главную страницу, вам нужна еще одна ссылка.
Откройте свой код для страницы about.html. Для страницы about нам нужно построить правильный HREF. Мы не можем этого сделать:
Перейти на главную страницу
Приведенный выше HREF указывает на индексную страницу в папке pages. Но наша индексная страница находится не в этой папке. Он находится в папке HTML, которая находится на одну папку выше страниц. Как и в случае с изображениями, мы можем использовать две точки и косую черту:
Помните, две точки и косая черта означают "Перейти на одну папку вверх".
Поэтому вставьте следующий код на страницу about.html:
Перейти на главную страницу
Сохраните свою работу и обновите страницу в браузере. Щелкните гиперссылку на странице about.html. Вы должны обнаружить, что индексная страница загрузится. Когда вы нажмете ссылку на главной странице, загрузится страница «О нас».
Упражнение
Создайте третью веб-страницу. Сохраните его в папке ваших страниц и назовите его contact.html. Создайте ссылку со страницы индекса на эту новую страницу. Создайте обратную ссылку со страницы контактов на главную страницу.
После выполнения вышеуказанного упражнения у вас будет две ссылки на главной странице. Они могут выглядеть так:
Вы можете использовать методы HTML, которые вы уже изучили, чтобы улучшить внешний вид этих ссылок. Например, вы можете захотеть, чтобы ссылки шли вертикально, а не горизонтально. В этом случае окружите код гиперссылок тегами P. Вот код для двух вертикальных ссылок на главной странице:
Результат будет выглядеть следующим образом:
Однако пока не слишком беспокойтесь о презентации, так как чуть позже вы увидите, как улучшить навигационные ссылки с помощью списков CSS и HTML. Но попробуйте это упражнение.
Упражнение
Разместите по две ссылки на каждой из трех страниц. На странице about.html должны быть ссылки, ведущие на главную страницу и страницу контактов. На странице conact.html должны быть ссылки на главную страницу и страницу сведений.
Самое сложное в приведенном выше упражнении — это правильно понять часть HREF. Просто помните, что когда html-страницы находятся в одной папке, вам нужно только ввести имя страницы, на которую вы ссылаетесь. Итак:
вместо этого:
Вы просто используете те же правила ссылки на файлы, которые вы узнали в разделе изображений.
Целевой атрибут
Как и тег IMG, тег A HREF может принимать атрибуты. Один из них называется TARGET. Атрибут TARGET используется, чтобы сообщить браузеру, где вы хотите открыть ссылку. Например, вы можете указать браузеру открыть связанную страницу в новом окне браузера. Есть несколько значений на выбор:
Однако единственным действительно полезным элементом HTML версии 5 является BLANK. По умолчанию используется значение SELF, поэтому в большинстве случаев вам не нужно указывать атрибут TARGET. Если вы хотите, чтобы ссылка открывалась в новом окне, используйте следующий код:
Обратите внимание на символ подчеркивания перед словом "blank". Пропустите это, и ваш атрибут TARGET не будет работать.
Два других атрибута TARGET предназначены для случаев, когда на вашем веб-сайте используется нечто, называемое FRAMES. Однако фреймы больше не используются и не рекомендуются для HTML5.
Цвета гиперссылок
Вы можете настроить собственные цвета для гиперссылок. По умолчанию используется то, что пользователь установил в браузере, обычно синего цвета с синим подчеркиванием. Но вам не обязательно иметь синий цвет. Тег A имеет три атрибута, которые могут помочь вам переопределить настройки браузера по умолчанию:
ССЫЛКА
Установите цвет ссылки перед нажатием на нее
ALINK
Установите цвет ссылки при нажатии на нее
VLINK
Установить цвет ссылки после нажатия на нее
А и V выше означают "Активно" и "Посещено". Вы используете их так:
Вы выбираете атрибут, который хотите использовать, а затем выбираете цвет для своих ссылок. Это также может быть шестнадцатеричное значение или значение RGB.
Попробуйте сами, используя ссылки на любой из трех ваших веб-страниц. Имейте в виду, однако, что люди ожидают, что гиперссылка будет синего цвета с подчеркиванием — это визуальный признак того, что вы ссылаетесь на какой-то дополнительный контент. Кроме того, цвета ссылок, используемые таким образом, сейчас вышли из моды. Для гиперссылок лучше использовать стили CSS. Вы увидите, как это сделать, в следующем уроке.
В следующем уроке вы узнаете о других типах гиперссылок.
сообщить об этом объявлении
Совет
Зарегистрируйте бесплатную учетную запись Jotform, чтобы создавать мощные онлайн-формы за считанные минуты — без кодирования.
Простая разметка в заголовке
Если импортируемый файл содержит дополнительные элементы «стиль» или «сценарий», они также будут импортированы. Неважно, размечены ли эти элементы в заголовке или в теле документа. Одним из вариантов использования импорта HTML5 может быть сбор всех таблиц стилей и сценариев, необходимых в данном проекте, и добавление их в один HTML-файл, который затем импортируется во все остальные файлы проекта. Это значительно упрощает обслуживание больших проектов.
Хотя импортированный документ содержит таблицы стилей, они будут применены напрямую. Ранее определенные таблицы стилей родительского документа будут перезаписаны. Чтобы этого не произошло, позаботьтесь о положении ссылки импорта в родительском документе. То же самое верно и для JavaScripts. Даже внешние элементы импортированного документа будут загружены в родительский документ.
Доступ к содержимому файла импорта
Другое содержимое из импортированного документа будет загружено, но не отображено. Все тексты, изображения и другие медиафайлы не будут видны, поскольку они не являются частью дерева DOM родительского документа. Однако вы по-прежнему можете получить к ним доступ через JavaScript.
В нашем примере предполагается, что первый элемент «ссылка» загружает HTML-файл. Используя свойство JavaScript «import», мы записываем полную древовидную структуру импортированного файла в переменную. Оттуда мы можем получить доступ к отдельным узлам через JavaScript.
Отсюда мы можем получить доступ ко всем узлам и прочитать их, используя распространенные методы JavaScript, такие как «getElementsByTagName()». Теперь мы можем удобно добавлять их в дерево DOM родительского документа. В более радикальном подходе мы могли бы также полностью заменить элемент «body» содержимым импортированного файла.
В нашем примере содержимое элемента body заменяется с помощью функции replaceChild(). Чтобы гарантировать, что замена не начнется до загрузки всех элементов, функция привязана к прослушивателю событий, добавленному с помощью «addEventListener()».
Поддержка браузера
На момент написания этой статьи только Chrome поддерживает импорт HTML5. Также вы должны включить функциональность вручную. Вызовите «chrome://flags» из адресной строки, что даст вам доступ к экспериментальным функциям. Найдите «Активировать импорт HTML» и активируйте его. После нового запуска Chrome HTML5 Imports будет доступен.
Используйте следующую функцию, чтобы проверить, поддерживает ли данный браузер импорт HTML5.
В старых браузерах можно использовать полифилл, который эмулирует импорт HTML5 в неподдерживаемых браузерах. Таким образом, в современных веб-проектах нет необходимости обходиться без импорта HTML5.
Читайте также: