Служба рассылок "Рассылки@Mail.Ru"

AGAVA.ru - вы полюбите наш хостинг
Тариф Normal. 300Мб от $7.2/мес. Домены .ru, .com и другие бесплатно при оплате хостинга от 3х месяцев. CGI, Perl, PHP, MySQL. Любой способ работы с почтой. Тариф Lite. 100Мб от $4/мес. Нет CGI. Домены .com бесплатно при оплате хостинга от года.
С╦ма.Ру | Профессиональная разработка веб-сайтов
"С╦ма.Ру" создала веб-сайты известным федеральным, промышленным и банковским структурам. Выбирая "С╦ма.Ру" в качестве подрядчика Вы не разочаруетесь в сво╦м выборе. Ваш веб-сайт будет эффектным, а изготовлен он будет профессионально и точно в срок.
Есть проекты, а есть internet-проекты
Дизайн, создание и сопровождение web-сайтов и порталов, полный комплекс услуг. БИАТ. Консалтинг.

Строим сайт от А до Я. Восьмой выпуск.
Строим сайт от А до Я. Восьмой выпуск.


Восьмой выпуск. От 22.07.2003
Ведущий рассылки: Troitskaya Ketee
Написать мне stroimsait@front.ru
Архивы рассылки:Здесь
Содержание рассылки:
    Изучаем HTML
  1. Ссылки
  2. Картинка в роли ссылки
  3. Закладки
  4. Контакты

Привет. Сегодня с основному выпуску будет приложение о виртуальные деньгах WebMoney. Не пропустите.
И как всегда напоминаю, что каждый новый выпуск рассылки является логическим продолжением предыдущих. Если Вы только что к нам присоединились, то настоятельно рекомендую Вам ознакомиться с предыдущими выпусками. Сделать это можно Здесь .

Ссылки

Все мы знаем, что сайт состоит из множества страниц. Переходить с одной страницы на другую позволяют ссылки.
Так же у каждого сайта есть главная страница. Допустим набирая адрес http://stroimsait.h10.ru вы попадаете на главную страницу сайта, а затем уже выбрав раздел, жмете на ссылку и попадаете в нужный раздел или на нужную страницу.
Главная страница должна обязательно называться index.html. И уже с нее мы делаем ссылки на другие страницы.
Остальные страницы могут называться как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html и тд. и тп.).

Для создания ссылки используем тег <a></a>

Используем следующую конструкцию
<a href="URL">Название ссылки </a>

Рассмотрим атрибуты.

HREF - определяет находящийся между начальным и конечным тэгами текст как гипертекстовую ссылку на документ, указанный в значении данного параметра.
У атрибута HREF могут быть следующие значения:

http://... - создает ссылку на www-документ;
ftp://... - создает ссылку на ftp-сайт или расположенный на нем файл;
mailto:... - запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&"; Это делается при помощи параметров (запомните указывать эти параметры не обязательно)

?subject - Тема пиcьма
&Body- Текст вашего сообщения
&cc- Копии письма через запятую
&bcc- Скрытые копии письма через запятую

Пример:
<a href="mailto:stroimsait@front.ru?subject=Вопрос&Body=text &cc=copy@mail.ua.net &bcc=hidden_copy@mail.ua.net ">Мое мыло</a>


news:.. - создает ссылку на конференцию сервера новостей;
telnet://... - создает ссылку на telnet-сессию с удаленной машиной;
wais://... - создает ссылку на WAIS - сервер;
gopher://...- создает ссылку на Gopher - сервер;

В значениях мы можем указать абсолютный путь, то есть указывается полный адрес странички (например, http://stroimsait.h10.ru) и относительный, (в качестве отправной точки используется адрес текущего документа. Например, линк <a href="stroit/title.html"> ссылка </a> будет ссылаться на файл title.html в подкаталоге stroit относительно текущего.



TARGET - определяет окно (фрейм), на которое указывает гипертекстовая ссылка.
Рассмотрим пока только одно значение (хотя есть и другие значения)

_blank- указывает, что документ должен отображаться в новом окне;


Примеры использования:

Ссылка на HTML файл
<a href="http://stroimsait.h10.ru/HTML/primer.html">Пример</a>
Пример

Ссылка на ZIP файл
<a href="http://stroimsait.h10.ru/HTML/primer.zip">Пример</a>
Пример

Ссылка на TXT файл
<a href="http://stroimsait.h10.ru/HTML/primer.txt">Пример</a>
Пример

Ссылка по протоколу ftp
<a href="ftp://ftp.cdrom.com">Пример</a>
Пример

Ссылка на e-mail
<a href="mailto:stroimsait@front.ru">Пример</a>
Пример

Ссылка на e-mail, с автоподставлением темы
<a href="mailto:stroimsait@front.ru?Subject=Teмa">Пример</a>
Пример

Ссылка на e-mail, с автоподставлением темы и текста послания
<a href="mailto:stroimsait@front.ru?Subject=Teмa &BODY=Тeкст послания">Пример</a>
Пример

Ссылка на e-mail, с автоподставлением темы, текста послания, а также адресов для отправки копии письма и скрытой копии
<a href="mailto:stroimsait@front.ru?Subject=Teмa &BODY=Тeкст послания&cc=name@domen.ru&bcc=name1234@domen.ru"> Пример</a>
Пример

Ссылка на группу новостей
<a href="news:comp.infosystems.www.announce">Пример</a>
Пример


Практика:

1) Создайте папку под названием site (ранее мы ее уже создавали, можете использовать ее).

2) Сделайте файл с названием index.html и поместим ее в папку. Это наша главная страница.

3) Сделайте еще 2 файла. С названиями me.html (тут будет изложена автобиография) и link.html (с ссылками).

4) На главной странице сделаем ссылки на 2 другие страницы (выделено красным цветом) и ссылку на e-mail (выделено синим цветом).

Итак, это нужно будет вставить в index.html.

<html>
<head>
<title> Главная страница </title>
</head>
<body>
<center>
<a href="me.html">автобиография</a> :::: <a href="link.html">ссылки</a>
</center>
<font color="#ff0000"> <h3 align ="center">Главная страница </h3> </font>
<p align ="justify"> Добрый день, усталый путник. Ты попал на личную страничку Василия Ивановича. Ну и т.д. и т.п. (придумайте сами, что ни будь)
<a href="mailto:name@domen.ru?Subject=Teмa ">Написать мне</a>
</body>
</html>

Надеюсь Вы разобрались что к чему.

5) Теперь рассмотрим файл me.html. Там будет 2 ссылки: Домой (возвращает на главную страницу) и ссылки (переносит на страницу с ссылками).

<html>
<head>
<title> Автобиография </title>
</head>
<body>
<center>
<a href="index.html">домой </a> :::: <a href="link.html">ссылки</a>
</center>
<font color="#ff0000"> <h3 align ="center">Автобиография </h3> </font>
<p align ="justify"> Я Василий Иванович родился в 1956 году, в селе Солнечное. Получил образование и поехал в Москву, где поступил в МГУ. Ну и так далее
</body>
</html>

6)Теперь рассмотрим файл link.html. Надеюсь Вы уже догадались, что эта страница будет содержать ссылки на другие Web-ресурсы. По этому путь будем указывать абсолютным, то есть указывать полный адрес (например, http://www.netscape.com). В нашем примере ссылки на другие Web-ресурсы выделены синим цветом.
P.S. Что бы ссылки на другие Web-ресурсы открывались в новом окне используем атрибут TARGET со значением _blank (выделено желтым цветом).

<html>
<head>
<title> Cсылки </title>
</head>
<body>
<center>
<a href="index.html">домой </a> :::: <a href="me.html">автобиография</a>
</center>
<font color="#ff0000"> <h3 align ="center"> Cсылки </h3> </font>
<a target="_blank" href="http://www.netscape.com">ссылка на www.netscape.com </a><br>
<a target="_blank" href="http://www.microsoft.com">ссылка на www.microsoft.com </a><br>
<a target="_blank" href="http://www.macromedia.com">ссылка на www.macromedia.com</a><br>
<a target="_blank" href="http://www.adobe.com ">ссылка на www.adobe.com </a>

</body>
</html>

Картинка в роли ссылки

Cсылкой можно сделать и любой графический файл. Для этого вместо в место названия ссылки нужно прописать графический элемент (выделен красным).

<a href="primer.html" target="_blank"> <img src="http://stroimsait.narod.ru/mat.gif" width="127" height="93" alt="картинка в качестве ссылки"> </a>

А вот что получиться:

картинка в качестве ссылки

Картинка стала ссылкой. А вокруг картинки появилась рамочка. Эту рамочку можно оставить (если она Вам нравиться), а можно убрать задав параметр у картинки border="0".

<a href="primer.html" target="_blank"> <img src="http://stroimsait.narod.ru/mat.gif" width="127" height="93" border="0" alt="картинка в качестве ссылки"></a>

картинка в качестве ссылки

Закладки

Иногда необходимо сделать ссылку на определенное место в тексте в том же или в другом документе. Допустим нажав сюда вы попадете в середину этой страницы.

Что бы сделать закладку нужно знать следующее:

Ссылка на закладку в том же документе имеет следующий вид:
<a href="#Имя закладки">Название раздела </a>

А так выглядит ссылка на закладку в другом документе:
<a href="Имя документа#Имя закладки">Название раздела </a>

Сама закладка будет такой:
<a name="Имя закладки" > </a>

Щелкнув на Название раздела пользователь будет попадать на определенную Вами закладку.

Пример:

Сделаем вверху страницы содержание, а чуть ниже текст.

Вставьте этот пример в html-файл и посмотрите. что вышло.


<html>
<head>
<title>Пример использования закладок </title>
</head>
<body>
<ol>
<li><a href="#1">1-я часть</a>
<li><a href="#2">2-я часть </a>
<li><a href="#3">3-я часть </a>
<li><a href="#4">4-я часть</a>
</ol>
<h4><a name="#1"> 1-я часть </a> </ h4>
<p>Из дневника канадского эмигранта...
<br>15-е августа. Вот мы и в Канаде!!! Я очарован этой страной! Здесь восхитительно! Горы так прекрасны. С нетерпением жду, когда увижу их покрытые снегом.
<br>14-е октября. КАНАДА! Это самое чудесное место на земле! Листья на деревьях пожелтели и приобрели все оттенки спектра, от красного до оранжевого. Вчера совершил увлекательную поездку за город, в сельскую местность. Вы не поверите! Видел диких оленей! На воле, они так красивы и грациозны. Поистине это самые очаровательные животные на планете. Ну просто милашки! Нет, здесь действительно рай!
<h4><a name="#2">2-я часть </a> </ h4>
<p>11-е ноября. Скоро открывается сезон охоты на оленей. Это ужасно! Не могу себе представить, что у кого-то может подняться рука на это милое, безобидное создание. Со дня на день ожидаем снег. Мне здесь нравится!
<br>2-е декабря. Наконец-то! Этой ночью выпал снег УРА!!! Проснувшись поутру, мы обнаружили очаровательную картину за окном. Все покрыто белоснежным, пушистым покрывалом. Вид как на удивительной рождественской открытке! Я восхищен! Мы с женой радостно выбежали из дому, и быстренько очистив крыльцо и парковку перед домом, мы с хохотом стали кидаться снежками (Я победил!) Внезапно снегоочиститель проехал мимо нас, завалив всю парковку снегом. Но это не расстроило нас, и я быстренько откидал снег обратно. Как здесь хорошо! Я люблю Канаду!
<h4><a name="#3">3-я часть </a> </ h4>
<p>12-е декабря. Этой ночью опять выпал снег. Снегоочиститель повторил свою выходку и завалил парковку.
<h4><a name="#4">4-я часть </a> </ h4>
<p>19-е декабря. Опять шел снег этой ночью. Я так и не смог очистить парковку и уехать на работу. Здесь, конечно, великолепно, но я уже обессилел, постоянно очищая парковку от снега. Идиотский снегоочиститель!
</body>
</html>

Контакты

Задать свои вопросы
Поделиться мнением, успехами и неудачами Вы можете по адресу stroimsait@front.ru
Основные вопросы будут рассматриваться в следующих рассылках.


© 2003 Troitskaya Ketee


"Сетевая Академия ЛАНИТ" - ведущий центр обучения по информационным технологиям.
Авторизованные курсы Microsoft, Novell, SCO, Intel, Oracle. Обучение по программам Certified Internet Webmaster, Security Certified Program, управлению проектами, ISO9000, системам управления предприятиями, управлению финансами, пользователей MSOffice.
Хостинг для самых требовательных
Профессиональный Unix хостинг на оборудовании Sun Microsystems. Самые гибкие тарифы в России! Оптимизированный хостинг-центр Nodex.

 Поиск: 
В Интернете  В Каталоге

Новости · Деньги · Спорт · Авто · Погода · Афиша · Музыка · ТВ · Софт
Аукцион · Покупки · Путешествия · Сувениры · Мой сайт · Работа
Знакомства · Открытки · Анекдоты · Гороскопы · Форумы · Чаты
Рейтинг · Каталог · Рассылки · Баннерные сети · Реклама на Mail.ru


Архив рассылки Редактирование подписки Помощь

Отписаться : Нажмите и отправьте это письмо, заменив pwd на свой пароль и сохранив кавычки. Узнать пароль можно здесь