Step 6 (S-44722)

From Stepik Wiki
Revision as of 23:30, 5 August 2017 by Admin (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Step on Stepik: https://stepik.org/lesson/14820/step/6

Step 6 (S-44722) 1.png

[00:00 - 00:16] теперь перейдем к важному крайне важному для веб разработки тегов гиперссылки а зачем нужны гиперссылки мы уже обсуждали для того чтобы можно было переходить от 1 документа другому это основа навигации в сети world wide web


[00:16 - 00:34] а теперь давайте подробно рассмотрен как они задаются гиперссылка сдается очень просто с помощью тэга а а у этого тэга есть атрибут href гипертония гипертония reference видимо сокращения в котором указывается некоторой


Step 6 (S-44722) 2.png

[00:34 - 00:53] а соответствующие гиперссылки а содержимое гиперссылки как правило это некоторый текст обычно очень небольшой несколько слов но а такого ограничения принципиального нет внутрь гиперссылки можно разместить картинку


[00:53 - 01:09] а в принципе внутрь гиперссылки можно поместить очень сложную конструкцию то есть а если вы видите ли какие нибудь современное витрина например google play плиточные витрина а плиточный сайта а вы видели что интерфейс построен на


[01:09 - 01:27] таких плитках внутри плитки размещается картинка название еще какое то описание а на всю картинку можно щелкнуть как на 1 гиперссылку это потому что внутрь гиперссылки можно разместить довольно сложную верстку а


[01:27 - 01:42] какие есть атрибутов гиперссылок а важный атрибут href собственно говоря по которому идет браузер когда пользователь щелкнет на


[01:42 - 01:59] эту гиперссылку а атрибут target target указывает в каком окне будет открыта а данный гиперссылка есть атрибут target нет а браузер откроет гиперссылку в текущем окне то есть


[01:59 - 02:17] у вас перезагрузиться текущая страница если указать target blank а гиперссылка откроется в новом окне а так например в этом можете увидеть на странице поисковой выдачи когда вы щелкаете часто


[02:17 - 02:33] открывается в новом окне результаты а общие правила правила хорошего тона такой бы справиться с заключается в следующем если гиперссылка ведет на ваш сайт то есть это навигации внутри вашего сайта ее следует открывать


[02:33 - 02:48] а в этом же окне если гиперссылка ведет на внешний сайт ее можно открывать в новом окне а да бы пользователь потом каким то образом вернулся к вам вместо


[02:48 - 03:03] гиперссылки вместо о вместо атрибутах реф гиперссылки может быть указан атрибут name а в этом случае гиперссылка не кликабельно она является якорем


[03:03 - 03:19] такая гиперссылка а сдает некоторые места на странице то есть а то я обычно так и гиперссылки идут в пар а как выглядят и коря вас езде гиперссылки 1 атрибутом


[03:19 - 03:37] 1 с атрибутом name 1 например а 2 гиперссылка где то в другом месте с атрибутом хренов


[03:37 - 03:55] а новый атрибуте href а указан относительной причем не просто относительная вот начиная с якоря решетка 1 а вот вот эта гиперссылка она сдает положение на странице


[03:55 - 04:12] а вот эта гиперссылка на кликабельно и когда пользователь щелкает на такую гиперссылку происходит прокрутка вниз до того места где определена где определен механизм кореи


[04:12 - 04:29] почему он сделал в виде того же а мы видимо так было удобно какой то момент дикаря используется для часто используются для организации а оглавление в длинном документе


[04:29 - 04:47] чтобы можно было прокрутить чтобы документ можно было прикрутить к всегда а давайте посмотрим какие мог бы действие браузера при переходе по гиперссылке действие браузера сильно зависят от


Step 6 (S-44722) 3.png

[04:47 - 05:05] того что написано в атрибуте href в большинстве случаев там написан какой то если это угол с протоколом http пьес а б в теперь браузер по нему перейдет но если он имеет в этом


[05:05 - 05:23] показывать и сайта теперь спец любом случае это будет переход по новому урлу а гиперссылки может быть э со схемой mail to пример такой


[05:23 - 05:42] mail to а mail to me дальше почтовый ящик а при клике на такую гиперссылку браузер


[05:42 - 05:57] запустят почтовый клиент а и предложат составить письмо по данному адресу а такую вещь удобно сделать например для того чтобы пользователи могли написать в службу поддержки


[05:57 - 06:14] а кроме того гиперссылка может располагаться javascript код именно в тексте хрен выглядит так javascript двоеточие дальше какой то код при клике по данной гиперссылки браузер запустят данный код


[06:14 - 06:29] отличать а вот такой способ когда код указан href в атрибуте от обработчиков которые добавляют добавляет javascript и он может добавить на любой


[06:29 - 06:45] ну и собственно говоря если содержимое href начинается с решетки эта прокрутка указанному на странице якоря а вот общем то весь функционал а ссылок


[06:45 - 06:53] ссылок есть множество дополнительных атрибутов которые можно почитать в документации но они не столь критично для разработки