Оглавление
Раздел 1: как стать богатым
Раздел 2: как стать счастливым
Раздел 3: как быть здоровым
Раздел 1: как стать богатым
Для того чтобы стать богатым, необходимо очень много трудиться.....
Раздел 2: как стать счастливым
Для того чтобы стать счастливым, нужно использовать каждую минуту...
Раздел3: как быть здоровым
Для того чтобы быть здоровым, нужно много заниматься физкультурой...
<h1> Оглавление </h1>
<BR>
<a href="#razdel1"> Раздел 1: как стать богатым </a><br>
<a href="#razdel2"> Раздел 2: как стать счастливым </a><br>
<a href="#razdel3"> Раздел 3: как быть здоровым </a><br>
<BR>
<h2 id="razdel1"> Раздел 1: как стать богатым </h2>
<p> Для того чтобы стать богатым, необходимо очень много трудиться... </p>
<h2 id="razdel2"> Раздел 2: как стать счастливым </h2>
<p> Для того чтобы стать счастливым, нужно использовать каждую минуту... </p>
<h2> Раздел3: <a name="razdel3"></a> как быть здоровым </h2>
<p> Для того чтобы быть здоровым, нужно много заниматься физкультурой... </p>
Ссылка на почту
Пример ссылки на произвольный e-mail:
<A HREF="mailto:admin@yandex.ru"> Написать письмо админу yandex </A>
Результат в браузере:
Написать письмо админу yandex
Опции mailto:
?subject= Тема письма
&Body= Текст вашего сообщения
&cc= copy@mail.ru (копии письма через запятую)
&bcc= hidden_copy@mail.ru (скрытые копии письма через запятую)
Пробелы в теме и тексте ставятся в виде %20
Перенос строки в тексте письма %0A (реже %0D%0A)
Вместе будет выглядеть так (пример):
<A HREF="mailto: admin@yandex.ru ?subject= Привет &Body= Привет!!! %0D%0
Я %20 соскучился, %20 админ! &cc= zamdirector@yandex.ru,
director@yandex.ru &bcc= putin@mail.ru "> Написать админу </A>
|
|
Результат:
Написать админу
Цвет ссылок
Атрибуты тега BODY (глобально):
LINK – цвет не посещенных ссылок.
ALINK – цвет активных ссылок, т.е. в момент нажатия (Active Link).
VLINK – цвет уже посещенных ссылок (Visited Link).
Все цвета задаются либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
Пример:
<body link="red" vlink="green" alink="white">
Все ссылки в данном документе станут красными, уже посещенные ссылки станут зелеными, а ссылки в момент нажатия будут белыми.
А если нужно чтобы в каком -то месте ссылка имела другой цвет? Например, по всему документу красные, а именно в одном месте зеленая? Тогда нужно внутри html ссылки прописать уже знакомый элемент font с атрибутом цвета: Локальное задание цвета:
<a href="https://www.yandex.ru"><font color="black"> Черная ссылка </font></a>
Если сделать так, то данная ссылка будет черной.
Задание 1. Ссылки на другие сайты
1. В папке со своей фамилией создайте простой Текстовый документ, откройте его с помощью программы Блокнот, наберите нижеследующий код, сохраните файл под названием links.html, при сохранении выберите кодировку UTF-8.
Внимание! Следите за пробелами между словами, за закрытием парных тегов!
2. Просмотрите полученную web-страницу в браузере. У вас должно получиться следующее:
3. Найдите сайт «Кинопоиск» в сети интернет (поисковик Google или другой), скопируйте адрес сайта из адресной строки браузера и создайте первую ссылку. Проверьте результат. Перейдите по ссылке.
4. Найдите сайт новостей 4725.ru в сети интернет, скопируйте адрес сайта из адресной строки браузера и самостоятельно создайте ссылку для него.
|
|
Проверьте результат. Если ссылка не перенаправляет на указанный сайт, значит, адрес был указан неверно, с ошибкой!
5. Дополните список ещё двумя-тремя своими любимыми источниками обзоров фильмов или касающимися Ваших хобби/занятий. Проверьте результат.
6. Научимся задавать открытие ссылок в текущем или новом окне (вкладке) браузера.
Большинство браузеров по умолчанию открывают ссылку в текущей вкладке.
Измените код первых двух ссылок:
В тег ссылки <a></a> добавьте атрибут target: для того, чтобы ссылка открывалась в текущей вкладке, значение атрибута следует установить равным _self, а для того, чтобы ссылка открывалась в новой вкладке, значение атрибута устанавливается равным _blank.
Проверьте, как работает страничка! Вторая ссылка теперь должна открываться в новой вкладке браузера, а первая теперь принудительно открывается в текущей.
Задание 2. Ссылки на страницы собственного сайта
1. В папке со своей фамилией создайте два простых Текстовых документа.
2. Откройте первый Новый текстовый документ.txt с помощью программы Блокнот, наберите нижеследующий код, сохраните файл под названием page1.html, при сохранении выберите кодировку UTF-8.
Поскольку файла page2.html у нас ещё нет, то ссылка работать не будет.
Можете проверить;)
3. Откройте второй Новый текстовый документ (2).txt с помощью программы Блокнот, скопируйте код, который уже содержит файл page1.html.
Измените код:
|
|
Заголовок страницы не Задание 2.1, на Задание 2.2
Ссылка ведёт не на page2.html, на page1.html
Сохраните файл под названием page2.html, при сохранении выберите кодировку UTF-8.
Таким образом, файлы page1.html и page2.html находятся в одной папке.
4. Обратите внимание, что мы НЕ указывали ПОЛНЫЙ путь к файлам, т.е. НЕ пользовались абсолютными адресами. Проверьте работоспособность ссылок обеих страничек.
ВНИМАНИЕ: Желательно всегда указывать НЕ абсолютный адрес (полный путь к расположению файла, который включает имя вашего компьютера и пользователя и т.д.), а относительный адрес, иначе ссылка не будет работать, например, если папку с Вашим сайтом переместить или даже разместить на хостинг.
Таким образом, мы написали
не
<p><a href=" D:\Ivanov\websitе\page2.html ">Ссылка на page2.html</a></p>,
а
<p><a href=" page2.html ">Ссылка на page2.html</a></p>,
поскольку оба файла находятся в одном каталоге друг относительно друга (относительная адресация).
Задание 3. Работа с относительными адресами
1. В папке со своей фамилией создайте папку Видео, внутри неё создайте две папки: Кинофильмы и Мультфильмы.
Внутри папки Кинофильмы, создайте папку Фантастика.
Внутри папки Мультфильмы создайте папку Смешные.
2. Внутри папки Фантастика с помощью программыБлокнот создайте файл Мстители.html с кодом, представленным ниже, и сохраните с кодировкой UTF-8.
3. Внутри папки Смешные с помощью программыБлокнот аналогичным образом создайте файл Рио.html (см. изображение ниже) и сохраните с кодировкой UTF-8.
4. Обращаясь к лекционным материалам, в файле Рио.html в последнем абзаце на месте слова «Мстители» создайте ссылку с относительным адресом, которой будет перенаправлять посетителя на страницу Мстители.html.
Это делается в два шага: сначала мы поднимаемся на два каталога выше (попадаем в папку Видео) с помощью конструкции ../, затем указываем адрес до файла, на который ссылаемся.
5. Самостоятельно создайте аналогичную ссылку внутри файла Мстители.html, ведущую на страницу Рио.html.
