HTML Ссылки — переход на документы или ресурсы — schoolsw3.com
❮ Назад Далее ❯
Ссылки встречаются почти на всех веб страницах. Ссылки позволяют пользователям переходить со страницы на страницу.
HTML Ссылки — Гиперссылки
HTML ссылки — это гиперссылки.
Вы можете нажать на ссылку и перейти к другому документу.
Когда вы наведете курсор мыши на ссылку, стрелка мыши превратится в маленькую руку.
Примечание: Ссылка не обязательно должна быть текстовой. Ссылка может быть изображением или любым другим HTML элементом!
HTML Ссылки — синтаксис
HTML тег <a>
определяет гиперссылку. Он имеет следующий синтаксис:
<a href=»url«>текст ссылки</a>
Самый важный атрибут элемента <a>
— это атрибут href
,
что указывает на пункт назначения ссылки.
Текст ссылки это та часть, которая будет видна читателю.
Нажав на текст ссылки, читатель отправится на указанный URL-адрес.
Пример
В этом примере показано, как создать ссылку на Schoolsw3.com:
<a href=»https://schoolsw3.com/»>Посетить Schoolsw3.com!</a>
Попробуйте сами »По индексу ссылки будут отображаться следующим образом во всех браузерах:
- Не посещенная ссылка подчеркнута синим цветом
- Активная ссылка подчеркнута красным цветом
Совет: Ссылки, конечно, можно стилизовать с помощью CSS, чтобы получить другой вид!
HTML Ссылки — атрибут target
По индексу связанная страница будет отображаться в текущем окне браузера. Чтобы изменить это, необходимо указать другой целевой объект для ссылки.
Атрибут target
указывает, где открыть связанный документ.
Атрибут target
может иметь одно из следующих значений:
_self
— По умолчанию. Открывает документ в том же окне / вкладке, в котором он был нажат_blank
— Открывает документ в новом окне или вкладке_parent
— Открывает документ в родительском фрейме_top
— Открывает документ во всем теле окна
Пример
Используйте target="_blank"
, чтобы открыть связанный документ в новом окне браузера или на новой вкладке:
<a href=»https://schoolsw3.com/» target=»_blank»>Посетить Schoolsw3!</a>
Попробуйте сами »Абсолютные и относительные ссылки
В обоих приведенных выше примерах используется абсолютный URL (полный веб-адрес) в атрибуте href
.
Локальная ссылка (ссылка на страницу внутри того же веб-сайта) указывается с помощью относительного URL (без "https://www")
:
Пример
<h3>Абсолютные URLы</h3><p><a href=»https://www. sw3.org/»>sw3C</a></p>
<p><a href=»https://www.google.com/»>Google</a></p>
<h3>Относительные
URLы</h3>
<p><a href=»html_images.php»>HTML Изображения</a></p>
<p><a href=»/css/index.php»>CSS
Учебник</a></p>
HTML Ссылки — использование изображения в качестве ссылки
Чтобы использовать изображение в качестве ссылки, просто поместите тег
<img>
внутри тега <a>
:
Пример
<a href=»index.php»>
<img src=»smiley.gif» alt=»HTML учебник»>
</a>
Ссылка на адрес электронной почты
Используйте mailto:
внутри атрибута href
, чтобы создать ссылку, которая открывает пользователя программы электронной почты (чтобы позволить им отправить новое сообщение электронной почты):
Пример
<a href=»mailto:someone@example.
com»>Отправлять электронную почту</a> Попробуйте сами »Кнопка как ссылка
Чтобы использовать HTML кнопку в качестве ссылки, вы должны добавить некоторый код JavaScript.
JavaScript позволяет указать, что происходит при определенных событиях, таких как нажатие кнопки:
Пример
<button>HTML Учебник</button>
Попробуйте сами »Совет: Узнайте больше о JavaScript в разделе JavaScript Учебник.
Названия ссылок
Атрибут title
задает дополнительную информацию об элементе.
Эта информация чаще всего отображается в виде текста всплывающей подсказки при наведении курсора мыши на элемент.
Пример
<a href=»https://schoolsw3.com/html/» title=»Идти к Schoolsw3 HTML раздел»>Посетите HTML Учебник</a>
Попробуйте сами »Подробнее об абсолютных и относительных URL-адресах
Пример
Используйте полный URL-адрес для ссылки на веб страницу:
<a href=»https://schoolsw3. com/html/index.php»>HTML учебник</a>
Попробуйте сами »
Пример
Ссылка на страницу, расположенную в папке html на текущем веб сайте:
<a href=»/html/index.php»>HTML учебник</a>
Попробуйте сами »
Пример
Ссылка на страницу, расположенную в той же папке, что и текущая страница:
<a href=»index.php»>HTML учебник</a>
Попробуйте сами »
Подробнее о путях к файлам вы можете прочитать в этой главе HTML Пути к файлам.
Краткое содержание главы
- Используйте элемент
<a>
для определения ссылки - Используйте атрибут
href
для определения адреса ссылки - Используйте атрибут
target
для определения места открытия связанного документа - Используйте элемент
<img>
(внутри<a>
) чтобы использовать изображение в качестве ссылки - Используйте
mailto:
схему внутри атрибутаhref
, чтобы создать ссылку, которая открывает программу электронной почты пользователя
HTML Упражнения
Проверьте себя с помощью упражнений
Упражнение:
Используйте правильный HTML код, чтобы превратить приведенный ниже текст в ссылку на «index. html».
>Посетите HTML учебник.
HTML Ссылки теги
Тег | Описание |
---|---|
<a> | Определяет гиперссылку |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.
❮ Назад Далее ❯
|
Самый простой шаблон для index.
htmlКаждый веб-проект, независимо от того, большой он или маленький, начинается с файла index.html. Начните с этого шаблона.
Published By Dim NikovCategorized as HTML
Файл index.html отображается в браузере пользователя, когда он посещает URL-адрес каталога, в котором он хранится.
<голова>Здесь находится заголовок вашей страницы <тело>Это заголовок
А это абзац.
Теперь, когда вы увидели, как выглядит простой HTML-документ, давайте разберем его структуру и потратим пару минут на то, чтобы поговорить о том, почему каждый из этих тегов существует.
Тег
предназначен для объявления типа документа . Он сообщает веб-браузерам, что документ является документом HTML5 и что он должен отображаться в соответствии со стандартами, определенными в спецификации HTML5.
В отличие от большинства других тегов в HTML-документе, объявление doctype не нужно закрывать, и внутри него нет вложенных элементов. Думайте об этом как о своего рода преамбуле, которая сообщает веб-браузерам, что за этим последует.
Тег
предназначен для корневого элемента вашего HTML-документа. Его атрибут lang
сообщает поисковым системам и веб-браузерам о языке страницы и может опционально информировать их о стране.
Теги
и
должны быть единственными двумя прямыми потомками тега
для корневого элемента. Все остальные теги должны быть вложены внутрь них (фактически становясь косвенными потомками корневого элемента).
Тег
предназначен для заголовка вашего HTML-документа . Вложите в него заголовок документа, фавиконку, метатеги, стили и скрипты.
Тег
предназначен для тела вашего HTML-документа . Вложите контейнеры вашего документа (разделы, статьи, отступления, div и т. д.) и содержимое (заголовки, абзацы, списки, рисунки, аудио, видео и т. д.) внутрь него.
Куда перейти
Этот шаблон настолько прост, насколько это возможно, и он предназначен для того, чтобы помочь вам ознакомиться с HTML, если вы новичок в веб-разработке. Однако для разработки полнофункционального веб-сайта на HTML/CSS/JS требуется гораздо больше.
В качестве следующего шага я рекомендую вам взглянуть на HTML5 Boilerplate. Это бесплатный начальный шаблон с открытым исходным кодом, который я использую для всех своих проектов веб-разработки, и, без тени сомнения, это один из лучших начальных шаблонов.
Дим Ников
Редактор Maker’s Aid. Наполовину программист, наполовину маркетолог. Создавать вещи в Интернете и помогать другим делать то же самое с 2000-х годов. Да, у меня были Friendster и Myspace.
Посмотреть все сообщения Дима Никова. сообщить об этом объявлении- Создайте хэш в Zapier с помощью этих простых шагов
- Рабочие области Диспетчера тегов Google, объяснение
- Нужен ли вам SSL на домене с переадресацией 301?
- Самые лучшие легкие браузеры для Mac
- 3 лучших редактора JSON для Mac
- Предыдущий
- Обзор: Джанго
- Следующий
Теперь мы готовы добавить код, который отображает нашу первую полную страницу — домашнюю страницу веб-сайта LocalLibrary. На главной странице будет показано количество записей, которые у нас есть для каждого типа модели, а также ссылки на боковую панель для перехода на другие наши страницы. Попутно мы приобретем практический опыт написания базовых карт и представлений URL-адресов, получения записей из базы данных и использования шаблонов.
Необходимые условия: | Прочтите введение в Джанго. Выполните предыдущие разделы руководства (включая часть 4 руководства по Django: административный сайт Django). |
---|---|
Цель: | Научитесь создавать простые карты и представления URL-адресов (где данные не закодированы в URL-адресе), получать данные из моделей и создавать шаблоны. |
После того, как мы определили наши модели и создали некоторые начальные библиотечные записи для работы, пришло время написать код, который представляет эту информацию пользователям. Первое, что нам нужно сделать, это определить, какую информацию мы хотим отображать на наших страницах, и определить URL-адреса, которые будут использоваться для возврата этих ресурсов. Затем мы создадим преобразователь URL-адресов, представления и шаблоны для отображения страниц.
Следующая диаграмма описывает основной поток данных и компоненты, необходимые для обработки HTTP-запросов и ответов. Поскольку мы уже реализовали модель, мы создадим следующие основные компоненты:
- Преобразователи URL-адресов для пересылки поддерживаемых URL-адресов (и любой информации, закодированной в URL-адресах) в соответствующие функции просмотра.
- Функции просмотра для получения запрошенных данных от моделей, создания HTML-страниц, отображающих данные, и возврата страниц пользователю для просмотра в браузере.
- Шаблоны для использования при отображении данных в представлениях.
Как вы увидите в следующем разделе, у нас есть 5 страниц для отображения, что слишком много информации для документирования в одной статье. Поэтому в этой статье основное внимание будет уделено тому, как реализовать домашнюю страницу, а остальные страницы мы рассмотрим в следующей статье. Это должно дать вам хорошее полное представление о том, как на практике работают сопоставители URL, представления и модели.
Поскольку эта версия LocalLibrary по существу доступна только для чтения для конечных пользователей, нам просто нужно предоставить целевую страницу для сайта (домашнюю страницу) и страницы, которые отображать список и подробные представления для книг и авторов.
URL-адреса, которые нам понадобятся для наших страниц:
-
каталог/
— домашняя (индексная) страница. -
каталог/книги/
— Список всех книг. -
каталог/авторы/
— Список всех авторов. -
catalog/book/
— Подробное представление для конкретной книги с первичным ключом поля -
catalog/author/
— Подробное представление для конкретного автора с полем первичного ключа/catalog/author/11
.
Первые три URL вернут индексную страницу, список книг и список авторов. Эти URL-адреса не кодируют никакой дополнительной информации, и запросы, извлекающие данные из базы данных, всегда будут одинаковыми. Однако результаты, возвращаемые запросами, будут зависеть от содержимого базы данных.
Напротив, последние два URL будут отображать подробную информацию о конкретной книге или авторе. Эти URL-адреса кодируют идентификатор отображаемого элемента (представленный
выше). Преобразователь URL-адресов извлечет закодированную информацию и передаст ее в представление, а представление будет динамически определять, какую информацию нужно получить из базы данных. Кодируя информацию в URL-адресе, мы будем использовать единый набор сопоставления URL-адресов, представления и шаблона для обработки всех книг (или авторов).
Примечание: С помощью Django вы можете создавать свои URL-адреса так, как вам нужно — вы можете кодировать информацию в теле URL-адреса, как показано выше, или включать параметры GET
в URL-адрес, например, /book/?id=6
. Какой бы подход вы ни использовали, URL-адреса должны быть чистыми, логичными и удобочитаемыми в соответствии с рекомендациями W3C.
Документация Django рекомендует кодировать информацию в теле URL-адреса для улучшения дизайна URL-адреса.
Как упоминалось в обзоре, оставшаяся часть этой статьи описывает, как создать индексную страницу.
Первая страница, которую мы создадим, — это индексная страница ( каталог/
). Страница индекса будет включать в себя некоторый статический HTML, а также сгенерированное «количество» различных записей в базе данных. Чтобы это работало, мы создадим сопоставление URL-адресов, представление и шаблон.
Примечание: В этом разделе стоит уделить немного больше внимания. Большая часть информации применима и к другим страницам, которые мы создадим.
Сопоставление URL-адресов
Когда мы создали каркас веб-сайта, мы обновили locallibrary/urls.py , чтобы каждый раз при получении URL-адреса, начинающегося с catalog/
, модуль URLConf catalog.urls
обрабатывал оставшуюся подстроку.
Следующий фрагмент кода из locallibrary/urls.py включает модуль catalog. urls
:
urlpatterns += [ путь('каталог/', включить('каталог.urls')), ]
Примечание: Всякий раз, когда Django встречает функцию импорта django.urls.include()
, он разбивает строку URL-адреса на указанный конечный символ и отправляет оставшуюся подстроку включенному модулю URLconf для дальнейшей обработки.
Мы также создали файл-заполнитель для модуля URLConf с именем /catalog/urls.py . Добавьте в этот файл следующие строки:
шаблоны URL = [ путь('', views.index, имя='индекс'), ]
Функция path()
определяет следующее:
- Шаблон URL, представляющий собой пустую строку:
''
. Мы подробно обсудим шаблоны URL при работе с другими представлениями. - Функция просмотра, которая будет вызываться при обнаружении шаблона URL:
views.index
, которая является функцией с именемindex()
в файле views. py .
Функция path()
также задает параметр имени
, который является уникальным идентификатором для этого конкретного сопоставления URL-адреса. Вы можете использовать это имя для «реверсирования» преобразователя, т. е. для динамического создания URL-адреса, указывающего на ресурс, для обработки которого предназначен преобразователь.
Например, мы можем использовать параметр name для ссылки на нашу домашнюю страницу с любой другой страницы, добавив следующую ссылку в шаблон:
Главная.
Примечание: Мы можем жестко закодировать ссылку как в Главная
), но если мы изменим шаблон для нашей домашней страницы, например, на / каталог/индекс
) шаблоны больше не будут корректно связываться. Использование обратного сопоставления URL более надежно.
Представление (на основе функции)
Представление — это функция, которая обрабатывает HTTP-запрос, извлекает необходимые данные из базы данных, отображает данные на HTML-странице с использованием HTML-шаблона, а затем возвращает сгенерированный HTML-код в HTTP-запросе. ответ для отображения страницы пользователю. Индексное представление следует этой модели — оно извлекает информацию о числе 9.0015 Book , BookInstance
, available BookInstance
и Author
записи, которые у нас есть в базе данных, и передает эту информацию в шаблон для отображения.
Откройте catalog/views.py и обратите внимание, что файл уже импортирует функцию быстрого доступа render() для создания HTML-файла с использованием шаблона и данных:
из django.shortcuts import render # Создайте свои представления здесь.
Вставьте следующие строки внизу файла:
из импорта .models Книга, Автор, Экземпляр книги, Жанр Индекс защиты (запрос): """Функция просмотра главной страницы сайта.""" # Сгенерировать количество некоторых основных объектов num_books = Book.objects.all().count() num_instances = BookInstance.objects.all().count() # Доступные книги (status = 'a') num_instances_available = BookInstance. objects.filter(status__exact='a').count() # 'all()' подразумевается по умолчанию. num_authors = Автор.объектов.счетчик() контекст = { 'num_books': количество_книг, 'количество_экземпляров': num_instances, 'количество_экземпляров_доступно': num_instances_available, 'количество_авторов': количество_авторов, } # Визуализировать HTML-шаблон index.html с данными в контекстной переменной вернуть рендеринг (запрос, 'index.html', контекст = контекст)
Первая строка импортирует классы моделей, которые мы будем использовать для доступа к данным во всех наших представлениях.
Первая часть функции представления извлекает количество записей, используя атрибут objects.all()
классов модели. Он также получает список из объектов BookInstance
, которые имеют значение «a» (доступно) в поле статуса. Вы можете найти больше информации о том, как получить доступ к данным модели, в нашем предыдущем руководстве Django Tutorial Part 3: Using models > Searching for records.
В конце функции просмотра мы вызываем функцию render()
для создания HTML-страницы и возврата страницы в качестве ответа. Эта функция быстрого доступа объединяет ряд других функций, чтобы упростить очень распространенный вариант использования. Функция render()
принимает следующие параметры:
- исходный
запрос
объект, который являетсяHttpRequest
. - HTML-шаблон с заполнителями для данных.
- и
контекст
, которая представляет собой словарь Python, содержащий данные для вставки в заполнители.
Подробнее о шаблонах и переменной контекста
мы поговорим в следующем разделе. Давайте приступим к созданию нашего шаблона, чтобы мы могли что-то показать пользователю!
Шаблон
Шаблон — это текстовый файл, определяющий структуру или макет файла (например, HTML-страницы). В нем используются заполнители для представления фактического содержимого.
Приложение Django, созданное с использованием startapp (подобно скелету этого примера) будет искать шаблоны в подкаталоге с именем « templates » ваших приложений. Например, в представлении индекса, которое мы только что добавили, функция render()
ожидает найти файл index.html в /locallibrary/catalog/templates/ и вызовет ошибку, если файл нет.
Вы можете проверить это, сохранив предыдущие изменения и зайдя на 127.0.0.1:8000
в вашем браузере — он отобразит довольно интуитивное сообщение об ошибке: « TemplateDoesNotExist at /catalog/
» и другие подробности.
Примечание: Основываясь на файле настроек вашего проекта, Django будет искать шаблоны в нескольких местах, по умолчанию выполняя поиск в ваших установленных приложениях. Вы можете узнать больше о том, как Django находит шаблоны и какие форматы шаблонов он поддерживает, в разделе «Шаблоны» документации Django.
Расширение шаблонов
Для шаблона указателя потребуется стандартная HTML-разметка для заголовка и основной части, а также разделы навигации для ссылок на другие страницы сайта (которые мы еще не создали) и разделы, отображающие вводный текст и данные книги.
Большая часть HTML и структура навигации будут одинаковыми на каждой странице нашего сайта. Вместо того, чтобы дублировать шаблонный код на каждой странице, вы можете использовать язык шаблонов Django для объявления базового шаблона, а затем расширить его, заменив только те биты, которые отличаются для каждой конкретной страницы.
Следующий фрагмент кода представляет собой пример базового шаблона из файла base_generic.html .
Вскоре мы создадим шаблон для LocalLibrary.
Пример ниже включает в себя общий HTML-код с разделами для заголовка, боковой панели и основного содержимого, отмеченных именованными тегами шаблона block
и endblock
.
Вы можете оставить блоки пустыми или включить содержимое по умолчанию для использования при отображении страниц, полученных из шаблона.
Примечание: Шаблон 9Теги 0129 — это функции, которые можно использовать в шаблоне для циклического просмотра списков, выполнения условных операций на основе значения переменной и т. д. В дополнение к тегам шаблона синтаксис шаблона позволяет ссылаться на переменные, которые передаются в шаблон из представления, и использовать фильтры шаблона для форматирования переменных (например, для преобразования строки в нижний регистр).
<голова> {% заголовок блока %}Локальная библиотека {% конечный блок%} <тело> {% заблокировать боковую панель %} {% конечный блок%} {% заблокировать содержимое %} {% конечный блок%}
При определении шаблона для конкретного представления мы сначала указываем базовый шаблон с помощью тега шаблона extends
— см. пример кода ниже. Затем мы объявляем, какие разделы из шаблона мы хотим заменить (если есть), используя разделы block
/ endblock
, как в базовом шаблоне.
Например, приведенный ниже фрагмент кода показывает, как использовать тег шаблона extends
и переопределить блок содержимого
. Сгенерированный HTML будет включать код и структуру, определенные в базовом шаблоне, включая содержимое по умолчанию, которое вы определили в блок заголовка
, но новый блок контента
вместо блока по умолчанию.
{% расширяет "base_generic.html" %} {% заблокировать содержимое %}Главная страница местной библиотеки
<р> Добро пожаловать на LocalLibrary, веб-сайт, разработанный Сеть разработчиков Mozilla! {% конечный блок%}
Базовый шаблон LocalLibrary
Мы будем использовать следующий фрагмент кода в качестве базового шаблона для веб-сайта LocalLibrary . Как видите, он содержит HTML-код и определяет блоки для заголовок
, боковая панель
и контент
. У нас есть заголовок по умолчанию и боковая панель по умолчанию со ссылками на списки всех книг и авторов, которые заключены в блоки, чтобы их можно было легко изменить в будущем.
Примечание: Мы также вводим два дополнительных тега шаблона: url
и load static
. Эти теги будут описаны в следующих разделах.
Создайте новый файл base_generic.html в /locallibrary/catalog/templates/ и вставьте в файл следующий код:
<голова> {% заголовок блока %}Локальная библиотека {% конечный блок%} <метакодировка="utf-8" /> <ссылка href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min. css" отн = "таблица стилей" целостность = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" кроссоригин = "анонимно" /> {% статическая загрузка %} <тело> <дел> <дел> <дел> {% заблокировать боковую панель %} <ул>