Ну что, друзья, после наших последних изменений (Паутина Шарлотты, пауки и футером по хэдеру), у меня, например, надеюсь, и у вас, получился такой файл:

Теперь поставили мышку под <p>Hello, world!</p>, нажали Enter (чтобы переехать на следующую строку) и… Сначала нам нужно узнать, что такое КОПИПАСТА.

Копипаста — это вовсе не зубная паста, и даже не итальянские спагетти. Что же это за паста такая?

Слово является сленгом у программистов. То есть сейчас, когда ты уже начал быть программистом, то можешь пользоваться крутым сленгом, чтобы они сразу поняли — это свой человек!

Поисходит от английских слов: copy и paste.

Copy — это копия, или копировать. А paste — это вставить. Наиболее понятно происходящее по этой картинке с двойняшками:

То есть сделать копипасту — значит скопировать текст и вставить его к себе в код. Для этого выдели всю следующую строку и нажми 2 клавиши одновременно: Ctrl+C

<a href="http://blog.awebdesign.ru/wp-content/uploads/2016/09/link.jpg" target="_blank">Нажми на меня, я LINK!</a>

Выделить — это значит кликнуть мышкой в начале строки, а потом, не отпуская, перетащить мышь в конец строки, вся строка станет синей:

После того, как строка посинела, жми Ctrl+C. Теперь открой свой файл index.html в notepad++, поставь мышку под <p>Hello, world!</p>, и жми одновременно Ctrl+V.

Строка должна была перенестись! То есть скопироваться оттуда сюда:

Если получилось — ты сделал свою первую копипасту, а если нет — попроси помочь старшего.

Запомнить «горячие клавиши» Copy и Paste очень просто:

Ctrl+C — скопировать (первая буква С)

Ctrl+V — вставить (первая буква — V, то есть В по-нашему)

Итак, вставили в файл строку, теперь нажми Ctrl+S (как мы помним, это значит сохранить, от слова Save [Сэйв] — помнишь — сейф произошел от этого слова). Ctrl+S нужно жать как можно чаще! Вдруг свет погаснет, компьютер выключится, и вся твоя работа пропадет!

После сохранения файла открываем его в браузере (нашли в папке и дважды кликнули на файл, он сам откроется в нужном браузере).

И что мы видим? У меня вот так:

Ну так чего ты ждешь? Перейди на свой файл в браузере и нажми на Link!

Та-даам! Знакомься, это Link (Линк) — самый популярный персонаж компьютерных игр Nintendo, вот его детская фотография:

Игра называется The Legend of Zelda, то есть — Легенда Зельды. Так как в детстве Линк был очень похож на девочку, то многие ошибочно называли его Зельдой. На это он реагирует так:

Когда ты запомнил слово Link, я объясню, что это такое в HTML.

Link в HTML — это ССЫЛКА. То, что ты скопипастил к себе в файл — это ссылка. То есть — запись, которая ведет куда-то. Когда интернет был древним и скучным, его использовали ученые, чтобы делиться своими научными работами. Например, сидит старый бородатый ученый в Англии и хочет рассказать своему старому бородатому другу из Африки про новую игру «Легенда Зельды» (это, конечно, шутка! )) таких игр тогда еще не было). И говорит ему — нажми на этот линк, и ты увидишь, как выглядит главный герой игры!

Ты уже знаешь отсюда, что интернет — это паутина, которая соединяет несколько компьютеров между собой. Ну вот, один стоит в Англии, второй — в Африке, а третий, с картинкой Линка — в Японии. И чтобы оба ученых в Англии и Африке могли посмотреть фотографию нашего красавчика Линка, им нужно пройти по ссылке и загрузить картинку с компьютера в Японии!

Итак, как же нам правильно писать линки (ссылки):

<a href="">...</a>

Атрибут тега <a> href — это адрес. То есть мы пишем href равен «здесь адрес на удаленный ресурс».

Ты можешь например написать:

<a href="https://www.google.com">нажми на меня!</a>

Сохрани файл, обнови в браузере и нажми на новую ссылку — откроется Гугл-поиск. Нажми на стрелочку «Назад» в браузере, чтобы вернуться на свою страничку.

Откуда же нам брать этот адрес? Открой опять Гугл или любой другой сайт, посмотри наверх, в адресной строке браузера ты увидишь АДРЕС страницы:

Если скопипастить этот адрес и вставить между кавычками в href=»сюда», то вот ты и получишь адрес линка!

Еще один атрибут тега <a> — это 

target=""

Target [тагет] — цель. Например, target может быть такой:

Как видишь, охотник ни разу не попал в Кролика, так что Кролик уже просто издевается над ним — достал target и говорит: «Попробуй еще разок, Сэм!»

В нашем случае аттрибут target говорит браузеру, в каком окне открывать ссылку (link).

Наш первый линк открывается в ОТДЕЛЬНОМ окне, потому что тагет поставлен следующий:

target="_blank"

blank [бланк] — переводится как бланк, пустой лист бумаги.

Второй линк без тагета — без цели. Если цель не указана, то по умолчанию линк будет открываться В ТОМ ЖЕ окне.

Если аттрибут target нужно указать обязательно, но ты хочешь открывать ссылку в том же окне, пиши так:

target="_self"

Self [сэлф] — это «сам себя, свой». Слово селфи произошло именно от него! То есть — фотографировать самого СЕБЯ!

Селфи может быть таким:

Итак, что ты должен выучить

Ссылка выглядит вот так:

<a href="адрес ссылки на ресурс" target="цель">Нажми на меня, я LINK!</a>

Ссылка состоит из открывающего и закрывающего тегов

<a> и </a>

Ссылка имеет атрибуты: 

target="цель" и href="адрес ссылки на ресурс"

Чтобы быстро вставлять код, адреса ссылок и большие куски текста, вместо того, чтобы печатать все вручную самому, можно сделать копипасту. Делается она с помощью «горячих» клавиш:

Ctrl+C

Ctrl+V

Горячими они называются потому что очень часто используются, и как будто уже плавятся от постоянного тыканья…