Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 4. Гиперссылки

Содержание курса

Структура документа в HTML5

Для упрощения написания кодов в HTML5 придумали специальные элементы для основной разметки HTML страницы. Это следующие элементы:

<!DOCTYPE html>
	<html>
		<head>
			<title>Заголовок документа.</title>
		</head>
		<body>
			<header>"Шапка" документа</header>
			<section>
				<!--Основное содержание документа-->
				<nav>Элемент для навигационного меню</nav>
				<article>
				<!--Какая-то статья-->
					<header>Заголовок статьи</header>
					<div>
						Содержание статьи
					<div>
					<aside>Дополнительная информация</aside>
				</article>
			</section>
			<footer>"Подвал" документа</footer>
		</body>
	</html>

В показанном выше примере содержание элементов описывает, для чего они служат. Изучите внимательно этот пример и попробуйте создать небольшую HTML страницу (со своей, пусть небольшой, статьей) у себя в текстовом редакторе Notepad++ (перед тем, как начнете писать свой код, установите в Notepad++ на вкладке "кодировки" кодировку "utf-8"), используя эти элементы, а затем запустите написанный код в браузере и посмотрите, что получилось.

После того, как закончите, попробуйте загрузить свой документ в валидатор и посмотрите, что он вам ответит, какие ошибки найдет. Валидатор для HTML5 вы легко найдете в интернете по запросу с поисковой строки.

Гиперссылки

Гиперссылки - важнейшие элементы HTML. Гиперссылки бывают двух типов - внутренние и внешние.

Внутренние гиперссылки позволяют перемещаться внутри документа.

Гиперссылка задается элементом <a></a>. У элемента<a></a>, задающего гиперссылку есть обязательный атрибут href, в значении которого указывается, куда ведет ссылка. Для того, чтобы указать, что ссылка внутренняя в значении href сначала ставиться знак решетки #.

<!DOCTYPE html>
	<html>
		<head><title>Внутренние ссылки</title></head>
		<body>
			<a href="#odin">Ссылка на статью 1</a>
			<a href="#dva">Ссылка на статью 2</a>
			<p id="odin">Длинная статья 1.</p>
			<p id="dva">Длинная статья 2.</p>
		</body>
	</html>

В примере выше мы вначале помечаем свои статьи при помощи универсального атрибута id (значение этого атрибута может быть любым - его вы придумываете сами, но только используя английские символы), а затем во внутренних ссылках указываем в значении href после знака решетки id нужной статьи.

Теперь при клике на ссылку "Ссылка на статью 1" документ промотается до статьи 1, а точнее до того места, где указан id этой статьи. Соответственно при клике на ссылку "Ссылка на статью 2" документ промотается до статьи 2. Таким образом мы передвигаемся по ссылкам внутри документа.

Внешние ссылки - это ссылки, при клике на которые в браузер загружается другой документ. Внешние ссылки также имеют обязательный атрибут href, но знак решетки (#) в значении уже не указывается. Внешние ссылки в свою очередь делятся на абсолютные и относительные.

Относительные ссылки указывают, что документ, который необходимо загрузить в браузер лежит там же, где исходный документ.

<!DOCTYPE html>
	<html>
		<head><title>Относительные внешние ссылки</title></head>
		<body>
			<a href="document1.html">Ссылка на документ 1</a>
			<a href="document2.html">Ссылка на документ 2</a>
			<p>документ 1 с именем файла document1.html</p>
		</body>
	</html>
		

В указанном примере в браузере загружен документ 1, который имеет имя файла "document1.html". При клике на ссылку "Ссылка на документ 2" в браузер будет загружен другой документ - документ 2 с именем файла "document2.html", при этом документ 2 лежит там же, в той же папке, что и документ 1. Обратите внимание, что при указании пути к документу в href пишется расширение файла, в нашем примере - это расширение .html.

Если документ2 лежит в другой папке, то это нужно указать в href следующим образом:

<!DOCTYPE html>
	<html>
		<head><title>Относительные внешние ссылки</title></head>
		<body>
			<a href="document1.html">Ссылка на документ 1</a>
			<a href="papka1/document2.html">Ссылка на документ 2</a>
			<p>документ 1 с именем файла document1.html</p>
		</body>
	</html>
		

В этом примере в href указано, что рядом с документом 1 - файлом "document1.html" есть папка с именем "papka1" и в этой папке лежит документ 2 - файл "document2.html".

Абсолютные внешние ссылки загружают файл в браузер уже с абсолютно другого сервера, href этих ссылок выглядит так:

<!DOCTYPE html>
	<html>
		<head><title>Абсолютные внешние ссылки</title></head>
		<body>
			<a href="http://site.ru/document1.html">Ссылка на
			документ 1</a>
			<a href="ftp://site.ru/document2.html">Ссылка на
			документ 2</a>
		</body>
	</html>

Указание протокола http://, ftp://, https:// или другого обязательно для абсолютных внешних ссылок, иначе браузер будет считать эту внешнюю ссылку относительной и начнет искать ее на том сервере, где лежит исходный файл.

Если файл лежит в папке выше, то в href указывается "../". Таким образом ../ - это указание подняться на один уровень вложенности папок вверх, таких подъемов может быть два или несколько, в этом случае ../ повторяется нужное количество раз. Если же перед значением в href стоит "/", то это означает, что отчет ведется от корневой папки сервера (или той папки, где лежит весь сайт).

При использовании / вначале href отпадает необходимость использования ../, т.к. вложенность считается от корневой папки, однако такой вариант работает только на сервере.

Указание у элемента <a></a> атрибута target со значением "_blank" откроет ссылку в новой вкладке браузера, значение "_self" - значение по умолчанию открывает ссылку в том же окне.

Это значение по умолчанию можно изменить, для этого в <head> нужно указать: <base target="_blank"> и все внешние ссылки будут по умолчанию открываться в новом окне.

<!DOCTYPE html>
	<html>
		<head><title>Варианты относительных ссылок</title></head>
		<body>
			<a href="document1.html">Ссылка на документ 1</a>
			<a href="folder/document1.html">Ссылка на документ 1</a>
			<a href="../document1.html">Ссылка на документ 1</a>
			<a href="/document1.html">Ссылка на документ 1</a>
			<a href="/document1.html" target="_blank">Ссылка на
			документ 1 (откроется в новой вкладке)</a>
		</body>
	</html>

Локальный сервер

Если вы хотите работать с сервером, то советую установить Denwer - локальный сервер с полным набором необходимых серверных программ. Denwer вы легко можете найти по запросу в поисковой строке.

Можно также использовать веб сервер для браузера Chrome, который вы можете установить в виде расширения в браузере в интернет-магазине Chrome.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля