<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Валидное открытие ссылки в новом окне

Валидное открытие ссылки в новом окне

Все, кто уже неплохо разбирается в HTML, прекрасно знают о существовании атрибута target у тега <a>. Однако, не все знают, что данного атрибута в спецификации XHTML Strict уже нет. И встаёт вопрос, как открыть ссылку в новом окне с валидным кодом. Об этом я и напишу сейчас.

Я приведу 2 способа открытия ссылки в новом окне с валидным кодом. Оба они используют JavaScript. Давайте разберём 1-й способ:

<a href="http://myrusakov.ru" onclick="return !window.open(this.href)">Как создать свой сайт</a>

Данный код достаточно хитрый, поскольку он ещё учитывает наличие блокировок окон в браузере. Если таковое имеется, то ссылка просто откроется в этом же окне (лучше, чем если вообще не откроется), а если нет, то всё хорошо, и ссылка откроется именно в новом окне.

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

<script type="text/javascript">
  function externalLinks() {
    if (!document.getElementsByTagName) return;
    var anchors = document.getElementsByTagName("a");
    for (var i=0; i < anchors.length; i++) {
      if (anchors[i].getAttribute("href") && anchors[i].getAttribute("rel") == "external")
      anchors[i].target = "_blank";
    }
  }
</script>
<a rel="external" href="http://myrusakov.ru">Как создать свой сайт</a>
<a rel="external" href="http://myrusakov.ru">Как создать свой сайт</a>
<a rel="external" href="http://myrusakov.ru">Как создать свой сайт</a>
<script type="text/javascript">
  externalLinks();
</script>

В данном коде мы в самом конце (перед закрывающим </body>) вызываем функцию externalLinks(), которая во все ссылки, у которых есть атрибут "rel" со значением "external", добавляет target="_blank". Но валидатор этого не видит и считает код валидным. Саму функцию можно вынести в отдельный файл, который подключать на каждой странице. А вызывать функцию необходимо в самом конце, опять же на каждой странице. Тогда останется лишь добавлять соответствующий атрибут в те ссылки, которые должны открываться в новом окне. Причём это будет работать всегда и во всех браузерах, независимо от их блокировок, а вставляемый код в такую ссылку будет минимальным и, главное, валидным.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (3):

arq12 arq12 28.09.2012 20:17:10

Поскажите новичку где ошибка, почему код не валидный. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> </title> <meta name="robots" content="INDEX,FOLLOW"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="Content-Language" content="ru"> <link href="iru.css" rel="stylesheet" type="text/css"> </head> <body> <p>Ни кротостью, ни негой ясной Черты любимых муз не привлекают нас. </p> </body> </html>

Ответить

Admin Admin 29.09.2012 10:16:06

Стоит лишний слеш после объявления кодировки. Надо так: charset=utf-8">

Ответить

Eric Eric 16.10.2014 12:54:07

Второй способ открывает ссылку в том же окне(точнее вкладке), даже если код не валидный

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.