Ссылка

История: Путешествие с помощью магического портала

Представь, что у тебя есть книга с волшебными заклинаниями, и на каждой странице есть специальное слово, написанное золотыми буквами. Если ты произнесёшь это слово, перед тобой откроется портал, переносящий тебя в другой мир, в новое приключение или к сокровищам.

В вебе таким магическим словом является тег <a>. Он создаёт портал (ссылку), через который пользователь может мгновенно переместиться:

• На другой сайт (другой мир).
• На конкретное место внутри одной и той же страницы (например, в конец документа — как если бы ты прыгнул к последней странице книги).
• К запуску какого-то действия, например, отправке письма.

Пример магического портала:

<p>
  Ты видишь перед собой древний свиток. Чтобы открыть портал, 
  <a href="https://example.com">произнеси магические слова</a>.
</p>

1. Как работает портал:
• Слово "произнеси магические слова" — это видимая часть ссылки, которую можно кликнуть.
• Атрибут href="https://example.com" задаёт, куда портал перенесёт тебя — в данном случае, на сайт example.com.
2. Варианты порталов:
• Если нужно переместиться к сокровищам внутри текущей страницы, портал будет выглядеть так:

<a href="#treasure">Перейти к сокровищам</a> 

А сам клад будет спрятан ниже:

<h2 id="treasure">Сокровища здесь!</h2> 

• Если портал отправляет сообщение волшебнику, он может выглядеть так:

<a href="mailto:wizard@example.com">Отправить письмо волшебнику</a> 

1. Почему <a> волшебный?
• Он позволяет мгновенно перемещаться, как если бы ты открыл портал в другой мир.
• Всё, что нужно, — это "волшебное слово" в href, указывающее, куда переместиться.

Таким образом, <a> — это настоящий магический инструмент веба, который делает интернет похожим на мир, полный приключений.

ДЗ

Описание задания:

Ты создаёшь страницу, которая рассказывает историю путешественника, открывающего магические порталы. Каждый портал будет представлять собой гиперссылку.

Шаги выполнения:

1. Создай файл magic_portals.html. Это будет твоя страница с историей.

2. Почитай про тэги <ol>, <ul>, <li>

3. Добавь текст истории.
Начни с простого описания, например:

<p>Ты стоишь перед древним свитком. На нём записано три портала:</p> 
<ol> 
   <li>Портал в загадочные земли.</li> 
   <li>Портал к скрытым сокровищам.</li> 
   <li>Портал для связи с магом.</li> 
</ol>                                                                                      

4. Создай портал на другой сайт.
Первый портал должен переносить путешественника в загадочные земли (например, на сайт example.com). Добавь такую ссылку:

<a href="https://example.com" target="_blank">Войти в портал к загадочным землям</a> 

Что делать: При клике на ссылку ты должен попасть на сайт. Атрибут target="_blank" откроет портал в новой вкладке в браузере.

Создай портал для перемещения внутри страницы.
Добавь скрытые сокровища внизу страницы:

<h2 id="treasures">Сокровища</h2> <p>Ты нашёл гору золота и драгоценных камней!</p> 

Теперь добавь портал к этим сокровищам:

<a href="#treasures">Перейти к сокровищам</a> 

Что делать: При клике на ссылку страница автоматически прокрутится вниз к разделу "Сокровища".

5. Создай портал для связи с магом.
Если у путешественника возникли вопросы, он может отправить письмо магу:

<a href="mailto:wizard@example.com">Отправить письмо магу</a> 

Что делать: Кликни на ссылку. Откроется почтовая программа с готовым письмом для мага.

Добавь завершающий текст. В конце истории напиши:

<p>Все порталы активированы. Теперь решай, какой из них ты выберешь!</p> 

Итоговый результат:

У тебя получится HTML-страница с историей путешественника, где три магических портала позволяют:

• Перейти на внешний сайт.
• Прокрутить страницу к сокровищам.
• Отправить письмо магу.

Как проверить:

1. Открой файл в браузере.
2. Протестируй все три портала.
3. Убедись, что каждый выполняет свою функцию.