ПоделитьсяTweetПоделитьсяGoogle
Продолжаем наши уроки по HTML. Чтобы стать хорошо оплачиваемым мастером, то есть веб мастером в интернете прийдётся изучить CSS и PHP, но без знания HTML соваться в эти языки нет резона. Хочешь не хочешь а прийдётся корпеть над HTML, здесь здорово поможет знания английского языка. Всё программное обеспечение написано почему-то на английском, хотя достоверно известно , что в разработках языков участвовали русские специалисты.
Итак, сегодня разберём ссылки в HTML.
Существует несколько видов ссылок и вариантов (механизмов) перехода по ним.
Допустим у вас есть две страницы и Вам нужен переход с одной страницы на другую, например со страницы главной на страницу с файлами, пусть будут картинки.
Пишем нужную страницу в любом блокноте, желательно в notepad++, и назовём её page-1.html.
Существует тег < a> от английского anchor-якорь. В этот тег можно заключить как текст так и рисунок . У тега есть атрибут href он задаёт путь и имя к документу. Вот как пишется:
Картинки
Понятно что «Картинки» это текст обозначенный в первом файле, то есть ссылка на вторую страницу. Если у нас главная страница index.html и в ней стоит такая ссылка то ясное дело,что кликнув по тексту «Картинки»
мы попадём на страницу page-1.html
Картинки — Такая запись означает, что страница page-1.html находится в папке page
Картинки — Это обозначает, что файл page-1.html размещен на уровень выше от документа
ЧИТАТЬ: Комбинации клавиш на клавиатуре.
Картинки — документ находится на блоге www.blog.ru
Давайте пропишем ссылки в наших двух документах
Файл index.html:
Текстовая ссылка
Для чего существуют на свете пчёлы?
В Правильно!!!
Файл page-1.html:
Перешли по ссылке сюда
Для того чтобы делать мёд!
А мёд существует для того чтобы я его ел…
То что ссылка окрашивается синим цветом это понятно, для того чтобы прописать её жирным я заключил в теги … и ещё раз указал цвет …
где цвет 0000ff — синий. Он по умолчанию синий, но можно прописать и другим цветом. Для этого существует таблица цветов
Картинка ссылка
Ссылкой можно сделать и изображение
Вот так:
Перед тем как привести очередной пример с картинкой укажу про то, как при переходе по ссылке открыть страницу в новом окне браузера, то есть как указать в html. Пишем атрибут target (цель) и его значение _blank.
Пишется так:
открыть в новом окне
Пример:
Файл index-2.html:
Картинка
Интересно!.. Медведи могут летать?..
Файл page-3.html:
итог..
За мёдом могут!
В этом примере использован атрибут тега border=»0″ — рамка для рисунка. 0 — это значит что здесь рамки нет, но иногда рамка нужна чтобы как то отделить рисунок от текста и подчеркнуть его , тогда поставим цифровое значение, в пределах разумого 🙂 . В варианте когда рисунок является ссылкой нужно помнить, что рамка окрашивается в цвета ссылки: link — цвет ссылки, alink — цвет нажатой, активной ссылки,vlink — цвет посещенной ссылки тега .
ЧИТАТЬ: Мобильная версия сайта wordpress
link — цвет ссылки.
alink — цвет нажатой, активной ссылки.
vlink — цвет посещенной ссылки.
Пишется так:
Ссылка на эл. почту
Чтобы сделать кусочек текста или картинку ссылкой на e-mail — почтовый ящик их нужно заключить в тег с использованием mailto
Выглядит это так:
Написать письмо…
Кликнув по тексту ссылке «Написать письмо…» пользователь попадет в свою почтовую программу, которая выдаст ему бланк для отправки письма, где уже будет указан почтовый ящик ваш ящик@mail.ru
В почтовом бланке можно сразу прописать следующие вещи:
?subject= — Тема пиcьма
&Body= — Текст сообщения
&cc=
Помимо этого в почтовом бланке можно заранее прописать следующие вещи:
?subject= — Тема пиcьма
&Body= — Текст сообщения
&cc= ваш ящик-2@mail.ru,ваш ящик-3@mail.ru — Копии письма
&bcc= ящик компаньона@mail.ru,ящик компаньона-2@mail.ru — Скрытые копии письма
Все ящики в перечислении пишутся через запятую.
Ссылки на закладки
Это переход по якорям которые Вы заложили в в тексте в нужном Вам месте. Данные ссылки, прежде всего предназначены для навигации внутри страницы.
Допустим на странице находится некое содержание или меню… по принципу:
Глава1
Глава2
Глава3
И далее по тексту вниз есть содержание этих глав, чтобы пользователь мог нажав на такую закладку переместится в нужное место или часть текста нам нужно сделать пару вещей:
Первое это присвоить индивидуальное имя каждой Закладке, то есть главе. Ищем, значит, в большом-большом тексте нужные главы и делаем их адресами ссылок закладок, присваиваем им имена.
Вот так:
Глава1
Глава2
Глава3
Имя можно присвоить любое необязательно glava1
А теперь собственно прописываем на них ссылки в нашем меню, содержании.
Вот так:
Глава1
Глава3
Глава3
Смотрите внимательнее, перед каждым именем стоит знак решётки #.
Пример:
А.С. Пушкин
Ссылки на закладки
А. С. ПУШКИН
Посвящение
Песнь первая
Песнь вторая
Посвящение
……..содержимое первой закладки……
Песнь первая
……..содержимое второй закладки……
Песнь первая
……..содержимое третьей закладки……
смотреть чё получилось B-)
На этом о закладках и ссылках пожалуй всё.
Всем всего хорошего , пока, пока…
ПоделитьсяTweetПоделитьсяGoogle