439474
столько раз учителя, ученики и родители
посетили официальный сайт ООО «Инфоурок»
за прошедшие 24 часа
Добавить материал и получить бесплатное
свидетельство о публикации
в СМИ №ФС77-60625 от 20.01.2015

Скидка 0%

112 курсов профессиональной переподготовки от 3540 руб.

268 курсов повышения квалификации от 840 руб.

МОСКОВСКИЕ ДОКУМЕНТЫ ДЛЯ АТТЕСТАЦИИ

Лицензия на осуществление образовательной деятельности №038767 выдана 26 сентября 2017 г. Департаменотом образования города Москвы

Инфоурок Информатика ПрезентацииУрок 8. HTML ссылки

Урок 8. HTML ссылки

библиотека
материалов
Ссылки В создании презентации использованы контент сайта puzzleweb.ru
HTML: Как сделать ссылку В интернете размещены миллионы электронных документо...
Тег  Для создания ссылок в HTML-документах используется элемент , его содержи...
Тег  Ссылка Ссылка на страничку в и-нете.
HTML: Абсолютные и относительные ссылки Относительный адрес означает, что ука...
Части пути Описание Примеры значений имя_файла Если в качестве значения атриб...
Части пути Описание Примеры значений ../ Если нужно указать, что файл, на кот...
Абсолютный адрес Абсолютный адрес обычно применяется для указания пути к файл...
Абсолютный адрес Теперь давайте рассмотрим, что такое URL-адрес. Каждая веб-с...
HTML: Открытие ссылки в новой вкладке Для того чтобы страница, на которую вед...
Другая страница. Если вы установите для атрибута target значение _blank, т...
Значение Описание _blank Открывает документ в новом окне. _self Открывает до...
Тег  Вы наверное не раз замечали, что на многих сайтах в качестве ссылок испо...
Тег
Убираем рамку При использовании изображений в качестве ссылок браузеры автома...
Убираем рамку Этот способ подойдёт когда картинка ссылка всего одна. Но если...
HTML: Ссылка на раздел страницы ссылки можно также использовать для перехода...
HTML: Ссылка на раздел страницы нужно в качестве значения атрибута href элеме...
HTML: Ссылка на раздел страницы ссылка  ссылка Примечание: основная польза от...

Описание презентации по отдельным слайдам:

1 слайд Ссылки В создании презентации использованы контент сайта puzzleweb.ru
Описание слайда:

Ссылки В создании презентации использованы контент сайта puzzleweb.ru

2 слайд HTML: Как сделать ссылку В интернете размещены миллионы электронных документо
Описание слайда:

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

3 слайд Тег  Для создания ссылок в HTML-документах используется элемент , его содержи
Описание слайда:

Тег <a> Для создания ссылок в HTML-документах используется элемент <a>, его содержимое выступает в качестве метки, с помощью которой и будет производится переход. Для того, чтобы из элемента <a> сделать активную гиперссылку, нужно добавить к нему атрибут href. Атрибут href в качестве своего значения содержит адрес (относительный или абсолютный), на который будет вести ссылка. При щелчке на ссылку браузер получает и отображает документ, адрес которого указан в атрибуте href: <html> <body>

4 слайд Тег  Ссылка Ссылка на страничку в и-нете.
Описание слайда:

Тег <a> <p><a href="page.html">Ссылка</a></p> <p><a href="httр://www.mysite.ru">Ссылка</a> на страничку в и-нете.</p> </body> </html>

5 слайд HTML: Абсолютные и относительные ссылки Относительный адрес означает, что ука
Описание слайда:

HTML: Абсолютные и относительные ссылки Относительный адрес означает, что указание пути на нужный файл или страницу вашего сайта начинается относительно страницы, на которой расположена ссылка, либо относительно корневого каталога сайта. Рассмотрим компоненты (части), из которых может состоять относительный путь:

6 слайд Части пути Описание Примеры значений имя_файла Если в качестве значения атриб
Описание слайда:

Части пути Описание Примеры значений имя_файла Если в качестве значения атрибута указать только имя файла это значит, что нужный файл находится в той же папке, где и страница со ссылкой. "page.html" каталог/ Если файл, к которому нужно указать путь, расположен в дочернем каталоге относительно файла с ссылкой, это означает, что нам надо спуститься на один уровень вниз (в дочернюю папку текущего каталога), в этом случае путь начинается с указания имени дочернего каталога, после его имени указывается прямойслэш"/", он служит для разделения частей пути, после него указывается имя нужного нам файла. Примечание: опуститься можно ровно на столько папок вниз, сколько вы их создали. К примеру, если вы создали папку на 10 уровней ниже корневой, то можете указать путь, который приведет вас вниз на 10 папок. Однако, если у вас так много уровней, это, скорее всего, означает, что организация вашего сайта излишне неудобно составлена. "каталог/page.html" "каталог1/каталог2/page.html"

7 слайд Части пути Описание Примеры значений ../ Если нужно указать, что файл, на кот
Описание слайда:

Части пути Описание Примеры значений ../ Если нужно указать, что файл, на который вы ссылаетесь, находится в родительской папке, используйте символы .. (две точки), они означают подняться на один уровень вверх (в родительскую папку текущего каталога). Далее мы указываем прямойслэш"/", чтобы разделить части пути, и пишем имя нашего файла. Примечание: символы .. можно использовать сколько угодно раз подряд, используя их, вы поднимаетесь каждый раз на одну папку вверх. Однако, подниматься вверх можно до тех пор, пока не придете в корневую папку своего сайта. Выше этой папки подняться нельзя. "../page.html" "../../page.html" "../../../кат1/кат2/page.html" - поднимаемся из текущей папки на три каталога выше и уже из него спускаемся на два уровня ниже к требуемому файлу / Относительный путь не обязательно всегда должен начинаться относительно текущего расположения страницы со ссылкой, он также может начинаться относительно корневого каталога сайта. К примеру, если нужный файл находится в корневом каталоге, путь может начинаться с символа "/", после которого надо всего лишь указать имя нужного файла, который расположен в корневом каталоге. Примечание: когда символ "/" указывается первым, это означает начало пути от корневого каталога. "/page.html" "/кат1/кат2/car.png"

8 слайд Абсолютный адрес Абсолютный адрес обычно применяется для указания пути к файл
Описание слайда:

Абсолютный адрес Абсолютный адрес обычно применяется для указания пути к файлу, который расположен на другом сетевом ресурсе. Он представляет из себя полный URL-адрес к файлу или странице. Первым делом в адресе указывается используемый протокол, после которого идет название домена (имя сайта). Например: http://www.пример.ру - так выглядит абсолютный путь к конкретному веб-сайту. http:// - это протокол передачи данных, а www.пример.ру - имя сайта (домен). Абсолютный адрес можно использовать и на собственном сайте. Однако внутри сайта рекомендуется использовать в качестве значения ссылок относительный путь.

9 слайд Абсолютный адрес Теперь давайте рассмотрим, что такое URL-адрес. Каждая веб-с
Описание слайда:

Абсолютный адрес Теперь давайте рассмотрим, что такое URL-адрес. Каждая веб-страница в сети Интернет имеет свой собственный уникальный адрес, вот он как раз и называется URL. Аббревиатура URL расшифровывается как Uniform Resource Locator (унифицированный адрес ресурса), проще говоря URL - это определитель местонахождения ресурса. Этот способ записи адреса стандартизирован в сети Интернет. Пара примеров URL адресов: "httр://www.mysite.ru/" "httр://www.mysite.ru/html/all_tags.php"

10 слайд HTML: Открытие ссылки в новой вкладке Для того чтобы страница, на которую вед
Описание слайда:

HTML: Открытие ссылки в новой вкладке Для того чтобы страница, на которую ведет ссылка, открывалась в новом окне, нужно будет сообщить браузеру имя окна, в котором нужно открыть страницу. Если вы не указываете браузеру использовать какое-то определенное окно, то он откроет страницу в текущем окне. Для указания браузеру, что при открытие страницы нужно использовать другое окно, вместо текущего, добавьте в элемент <a> атрибут target. Его значение сообщает браузеру о целевом окне для страницы. Если в качестве значения атрибута target вы используете _blank, то браузер для каждой новой страницы всегда будет открывать новое окно:

11 слайд Другая страница. Если вы установите для атрибута target значение _blank, т
Описание слайда:

<html> <body> <p><a href="mypage.html" target="_blank">Другая страница</a>. Если вы установите для атрибута target значение _blank, то ссылка откроется в новом окне. </p> </body> </html> В таблице приведены все доступные значения для атрибута target.

12 слайд Значение Описание _blank Открывает документ в новом окне. _self Открывает до
Описание слайда:

Значение Описание _blank Открывает документ в новом окне. _self Открывает документ в том же окне, где была нажата ссылка (значение по умолчанию). _parent Открывает документ в родительском окне. _top Открывает документ на весь экран. имя_фрейма Открывает документ в указанном фрейме.

13 слайд Тег  Вы наверное не раз замечали, что на многих сайтах в качестве ссылок испо
Описание слайда:

Тег <img> Вы наверное не раз замечали, что на многих сайтах в качестве ссылок используются различные картинки, которые по принципу работы ничем не отличаются от текстовых ссылок. Для того чтобы заменить обычную текстовую ссылку на изображение, нужно внутрь элемента <a> поместить тег <img>, который указывает путь к изображению: <html> <body> <p>Посетите наш сайт, кликнув по картинке: <a href="httр://www.mysite.ru">

14 слайд Тег
Описание слайда:

Тег <img> <img src="logo.png" alt="ссылка" width="100" height="78"> </a> </p> </body> </html>

15 слайд Убираем рамку При использовании изображений в качестве ссылок браузеры автома
Описание слайда:

Убираем рамку При использовании изображений в качестве ссылок браузеры автоматически будут добавлять к ним рамку, которая легко убирается с помощью CSS свойства border со значением none. Чтобы убрать рамку у картинки ссылки, можно прописать свойство border в атрибут style: <a href="httр://www.mysite.ru"> <img src="logo.png" style="border: none;"> </a>

16 слайд Убираем рамку Этот способ подойдёт когда картинка ссылка всего одна. Но если
Описание слайда:

Убираем рамку Этот способ подойдёт когда картинка ссылка всего одна. Но если у вас много таких ссылок, то лучше прописать стиль сразу ко всем картинкам, которые вложены в тег <a>, сделать это можно так: a img { border: none; } Просто добавьте этот код к остальным стилям и он уберёт рамки у всех картинок, являющихся ссылками.

17 слайд HTML: Ссылка на раздел страницы ссылки можно также использовать для перехода
Описание слайда:

HTML: Ссылка на раздел страницы ссылки можно также использовать для перехода к определённому месту внутри страницы (не обязательно текущей). В качестве места на странице, к которому будет осуществлён переход по ссылке, используется любой HTML-элемент, который допустимо использовать внутри элемента <body>. Чтобы определить элемент, к которому будет осуществлён переход, ему нужно указать идентификатор с помощью атрибута id: <!-- Значение атрибута может быть произвольным --> <h2 id="a1">Заголовок</h2> Теперь, чтобы при клике по ссылке был выполнен переход к элементу, который находится на одной странице с ведущей на него ссылкой,

18 слайд HTML: Ссылка на раздел страницы нужно в качестве значения атрибута href элеме
Описание слайда:

HTML: Ссылка на раздел страницы нужно в качестве значения атрибута href элемента <a> написать символ решётки (#), после которого указать идентификатор элемента, к которому будет выполнен переход: <a href="#a1">ссылка</a> Чтобы перейти к определённому месту на другой странице, нужно указать решётку и необходимый идентификатор после URL-адреса: <!-- Абсолютный адрес -->

19 слайд HTML: Ссылка на раздел страницы ссылка  ссылка Примечание: основная польза от
Описание слайда:

HTML: Ссылка на раздел страницы <a href="httр://www.example.com#a1">ссылка</a> <!-- Относительный адрес --> <a href="example/page.html#a1">ссылка</a> Примечание: основная польза от ссылок внутри веб-страницы заключается в том, что на страницах с большим объёмом содержимого, пользователю не приходится прокручивать всю веб-страницу в поисках нужного раздела, а сразу щёлкнув по названию нужного раздела, перейти к нему.

Курс профессиональной переподготовки
Учитель информатики
Курс профессиональной переподготовки
Учитель математики и информатики
Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:
также Вы можете выбрать тип материала:
Общая информация
ВНИМАНИЮ УЧИТЕЛЕЙ: хотите организовать и вести кружок по ментальной арифметике в своей школе? Спрос на данную методику постоянно растёт, а Вам для её освоения достаточно будет пройти один курс повышения квалификации (72 часа) прямо в Вашем личном кабинете на сайте "Инфоурок".

Пройдя курс Вы получите:
- Удостоверение о повышении квалификации;
- Подробный план уроков (150 стр.);
- Задачник для обучающихся (83 стр.);
- Вводную тетрадь «Знакомство со счетами и правилами»;
- БЕСПЛАТНЫЙ доступ к CRM-системе, Личному кабинету для проведения занятий;
- Возможность дополнительного источника дохода (до 60.000 руб. в месяц)!

Пройдите дистанционный курс «Ментальная арифметика» на проекте "Инфоурок"!

Подать заявку

Вам будут интересны эти курсы:

Курс повышения квалификации «Методика преподавания информатики в начальных классах»
Курс повышения квалификации «Организация работы по формированию медиаграмотности и повышению уровня информационных компетенций всех участников образовательного процесса»
Курс повышения квалификации «Облачные технологии в образовании»
Курс повышения квалификации «Сетевые и дистанционные (электронные) формы обучения в условиях реализации ФГОС по ТОП-50»
Курс повышения квалификации «Использование компьютерных технологий в процессе обучения в условиях реализации ФГОС»
Курс повышения квалификации «Специфика преподавания информатики в начальных классах с учетом ФГОС НОО»
Курс профессиональной переподготовки «Управление в сфере информационных технологий в образовательной организации»
Курс профессиональной переподготовки «Теория и методика обучения информатике в начальной школе»
Курс повышения квалификации «Специфика преподавания дисциплины «Информационные технологии» в условиях реализации ФГОС СПО по ТОП-50»
Курс повышения квалификации «Современные языки программирования интегрированной оболочки Microsoft Visual Studio C# NET., C++. NET, VB.NET. с использованием структурного и объектно-ориентированного методов разработки корпоративных систем»
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.