День 6. Строим доски для серфинга.
Для начала вот вам ответ на домашнее задание.Вложенные списки могут формироваться (но не обязательно именно так) следующим образом:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB" lang="ru">
<head>
<title>Списки</title>
</head>
<body>
<h1>Как стать миллионером</h1>
<ol type="1">
<li>Придумать суперидею</li>
<ul type="disc">
<li>Рассказать другу</li>
<li>Выслушать рассказ о том, что ты придурок и это не сработает</li>
</ul>
<li>Начать ее реализовывать</li>
<ul type="disc">
<li>Заработать первые деньги</li>
<li>Поржать над другом</li>
</ul>
<li>Стать миллионером</li>
</ol>
</body>
</html>
И вот результат выполнения такого кода
Теперь переходим к делу.
Интернет по сути своей это безграничный объем различных HTML документов, объединенных в сайты. При этом между этими документами есть некий механизм соединения, который позволяет объединить эти страницы во всемирную паутину. Ведь для того чтобы перейти с одной страницы на другую нам не требуется писать в адресную строку браузера адрес новой страницы, вместо этого мы просто нажимаем на ссылку и вот мы уже сидим и на абсолютно новой странице, может даже другогой сайта.
Именно ссылками мы сегодня и займемся.
Ссылки бывают двух видов: внешние и внутренние. Внешние ссылки позволяют нам перемещаться между разными страницами, внутренние же ссылки отправляют нас в другое место на этой же странице.
Элементом для ссылок является элемент А. Его основным атрибутом является атрибут href, в качестве значения для которого и записывается адрес новой страницы. Элемент А требует наличия закрывающего тега и как раз между открывающим и закрывающим тегами и записывается текст ссылки, то есть тот текст, который увидит пользователь.
Внешние ссылки
Ниже я привожу код примера работы внешних ссылок. Будьте внимательны, при работе с сылками не достаточно просто переписывания кода, нужно следить за тем, чтобы в том случае, когда вы не вводите полный адрес новой страницы в качестве значения href, сам файл новой страницы находился в той же директрии, что и файл исходной страницы. Если же файлы с кодами лежат в разных директориях, то необходимо указывать полный адрес новой страницы.Если что-то непонятно, посмотрите внимательно на пример, думаю, многое разъяснится.
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ссылки</title>
<meta http-equiv="content-type" content="text/html" charset="windows-1251" />
</head>
<body>
<a href="Нумерованные списки + Ссылка.html">Нумерованные списки</a></br>
<a href="G:\WEB.365\Для блога\Изображения\блог.jpg">Фото</a>
</body>
<html>
И вот результаты работы кода
Кстати к элементу А применим атрибут title, дающий подсказки нам, и новый для нас атрибут target определяющий в какое окно должен загружаться новый документ:
_blanc - в новое окно
_self - в текущее окно.
Внутренние ссылки
В том случае, если на странице много информации иногда нужно перемещаться между отдельными блоками. Для этого и нужны собственно внутренние ссылки.Их применение во многом аналогично внешним ссылкам, за исключением лишь того момента, что так как мы переходим к какому то конкретному месту, а не просто к новой странице, то на это новое место нужно поставить какой то маячок. Маячкок правильно назвается метка .
Порядок действия при создании внутренней ссылки такой:
- Создается метка. Создается она с помощью атрибута name элемента А. В качестве значения атрибута name может быть любое слово, но желательно чтобы оно характеризовало свое местоположение.
- Создается ссылка не метку путем придания атрибуту href значения имени метки. То есть вот такой конструкции <a href="#Имя метки">
И снова пример разъясняет все непонимания, которых у меня самого, к слову, возникло на этом месте немало и только самостоятельно придуманный пример использования разъяснил их.
Пример использования внутренних ссылок:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="Внутренняя ссылка" lang="ru">
<head>
<meta http-equiv="content-type" content="text/html" charset="windows-1251" />
<title>365.WEB</title>
</head>
<body>
<h1>Первый проход</h1>
<ol type="1">
<li><a href="#met1" title="Нажмите для перехода в конец документа">Причудницы большого света!</a></li>
<li>Всех прежде вас оставил он;</li>
<li>И правда то, что в наши лета</li>
<li>Довольно скучен высший тон;</li>
<li>Хоть, может быть, иная дама</li>
<li>Толкует Сея и Бентама,</li>
<li>Но вообще их разговор</li>
<li>Несносный, хоть невинный вздор;</li>
<li>К тому ж они так непорочны,</li>
<li>Так величавы, так умны,</li>
<li>Так благочестия полны,</li>
<li>Так осмотрительны, так точны,</li>
<li>Так неприступны для мужчин,</li>
<li>Что вид их уж рождает сплин. </li>
<li>И вы, красотки молодые,</li>
<li>Которых позднею порой</li>
<li>Уносят дрожки удалые</li>
<li>По петербургской мостовой,</li>
<li>И вас покинул мой Евгений.</li>
<li>Отступник бурных наслаждений,</li>
<li>Онегин дома заперся,</li>
<li>Зевая, за перо взялся,</li>
<li>Хотел писать — но труд упорный</li>
<li>Ему был тошен; ничего</li>
<li>Не вышло из пера его,</li>
<li>И не попал он в цех задорный</li>
<li>Людей, о коих не сужу,</li>
<li>Затем, что к ним принадлежу.</li>
</ol>
<h1>Второй проход</h1>
<ol type="1">
<li type="1" value="29">Причудницы большого света!</li>
<li>Всех прежде вас оставил он;</li>
<li>И правда то, что в наши лета</li>
<li>Довольно скучен высший тон;</li>
<li>Хоть, может быть, иная дама</li>
<li>Толкует Сея и Бентама,</li>
<li>Но вообще их разговор</li>
<li>Несносный, хоть невинный вздор;</li>
<li>К тому ж они так непорочны,</li>
<li>Так величавы, так умны,</li>
<li>Так благочестия полны,</li>
<li>Так осмотрительны, так точны,</li>
<li>Так неприступны для мужчин,</li>
<li>Что вид их уж рождает сплин. </li>
<li>И вы, красотки молодые,</li>
<li>Которых позднею порой</li>
<li>Уносят дрожки удалые</li>
<li>По петербургской мостовой,</li>
<li>И вас покинул мой Евгений.</li>
<li>Отступник бурных наслаждений,</li>
<li>Онегин дома заперся,</li>
<li>Зевая, за перо взялся,</li>
<li>Хотел писать — но труд упорный</a></li>
<li>Ему был тошен; ничего</li>
<li>Не вышло из пера его,</li>
<li>И не попал он в цех задорный</li>
<li>Людей, о коих не сужу,</li>
<li>Затем, что к ним принадлежу.</li>
</ol>
</ol>
<h1>Третий проход</h1>
<ol type="1">
<li type="1" value="57">Причудницы большого света!</li>
<li>Всех прежде вас оставил он;</li>
<li>И правда то, что в наши лета</li>
<li>Довольно скучен высший тон;</li>
<li>Хоть, может быть, иная дама</li>
<li>Толкует Сея и Бентама,</li>
<li>Но вообще их разговор</li>
<li>Несносный, хоть невинный вздор;</li>
<li>К тому ж они так непорочны,</li>
<li>Так величавы, так умны,</li>
<li>Так благочестия полны,</li>
<li>Так осмотрительны, так точны,</li>
<li>Так неприступны для мужчин,</li>
<li>Что вид их уж рождает сплин. </li>
<li>И вы, красотки молодые,</li>
<li>Которых позднею порой</li>
<li>Уносят дрожки удалые</li>
<li>По петербургской мостовой,</li>
<li>И вас покинул мой Евгений.</li>
<li>Отступник бурных наслаждений,</li>
<li>Онегин дома заперся,</li>
<li>Зевая, за перо взялся,</li>
<li>Хотел писать — но труд упорный</a></li>
<li>Ему был тошен; ничего</li>
<li>Не вышло из пера его,</li>
<li>И не попал он в цех задорный</li>
<li>Людей, о коих не сужу,</li>
<li><a name="met1">Затем, что к ним принадлежу.</a></li>
</ol>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html title="Внутренняя ссылка" lang="ru">
<head>
<meta http-equiv="content-type" content="text/html" charset="windows-1251" />
<title>365.WEB</title>
</head>
<body>
<h1>Первый проход</h1>
<ol type="1">
<li><a href="#met1" title="Нажмите для перехода в конец документа">Причудницы большого света!</a></li>
<li>Всех прежде вас оставил он;</li>
<li>И правда то, что в наши лета</li>
<li>Довольно скучен высший тон;</li>
<li>Хоть, может быть, иная дама</li>
<li>Толкует Сея и Бентама,</li>
<li>Но вообще их разговор</li>
<li>Несносный, хоть невинный вздор;</li>
<li>К тому ж они так непорочны,</li>
<li>Так величавы, так умны,</li>
<li>Так благочестия полны,</li>
<li>Так осмотрительны, так точны,</li>
<li>Так неприступны для мужчин,</li>
<li>Что вид их уж рождает сплин. </li>
<li>И вы, красотки молодые,</li>
<li>Которых позднею порой</li>
<li>Уносят дрожки удалые</li>
<li>По петербургской мостовой,</li>
<li>И вас покинул мой Евгений.</li>
<li>Отступник бурных наслаждений,</li>
<li>Онегин дома заперся,</li>
<li>Зевая, за перо взялся,</li>
<li>Хотел писать — но труд упорный</li>
<li>Ему был тошен; ничего</li>
<li>Не вышло из пера его,</li>
<li>И не попал он в цех задорный</li>
<li>Людей, о коих не сужу,</li>
<li>Затем, что к ним принадлежу.</li>
</ol>
<h1>Второй проход</h1>
<ol type="1">
<li type="1" value="29">Причудницы большого света!</li>
<li>Всех прежде вас оставил он;</li>
<li>И правда то, что в наши лета</li>
<li>Довольно скучен высший тон;</li>
<li>Хоть, может быть, иная дама</li>
<li>Толкует Сея и Бентама,</li>
<li>Но вообще их разговор</li>
<li>Несносный, хоть невинный вздор;</li>
<li>К тому ж они так непорочны,</li>
<li>Так величавы, так умны,</li>
<li>Так благочестия полны,</li>
<li>Так осмотрительны, так точны,</li>
<li>Так неприступны для мужчин,</li>
<li>Что вид их уж рождает сплин. </li>
<li>И вы, красотки молодые,</li>
<li>Которых позднею порой</li>
<li>Уносят дрожки удалые</li>
<li>По петербургской мостовой,</li>
<li>И вас покинул мой Евгений.</li>
<li>Отступник бурных наслаждений,</li>
<li>Онегин дома заперся,</li>
<li>Зевая, за перо взялся,</li>
<li>Хотел писать — но труд упорный</a></li>
<li>Ему был тошен; ничего</li>
<li>Не вышло из пера его,</li>
<li>И не попал он в цех задорный</li>
<li>Людей, о коих не сужу,</li>
<li>Затем, что к ним принадлежу.</li>
</ol>
</ol>
<h1>Третий проход</h1>
<ol type="1">
<li type="1" value="57">Причудницы большого света!</li>
<li>Всех прежде вас оставил он;</li>
<li>И правда то, что в наши лета</li>
<li>Довольно скучен высший тон;</li>
<li>Хоть, может быть, иная дама</li>
<li>Толкует Сея и Бентама,</li>
<li>Но вообще их разговор</li>
<li>Несносный, хоть невинный вздор;</li>
<li>К тому ж они так непорочны,</li>
<li>Так величавы, так умны,</li>
<li>Так благочестия полны,</li>
<li>Так осмотрительны, так точны,</li>
<li>Так неприступны для мужчин,</li>
<li>Что вид их уж рождает сплин. </li>
<li>И вы, красотки молодые,</li>
<li>Которых позднею порой</li>
<li>Уносят дрожки удалые</li>
<li>По петербургской мостовой,</li>
<li>И вас покинул мой Евгений.</li>
<li>Отступник бурных наслаждений,</li>
<li>Онегин дома заперся,</li>
<li>Зевая, за перо взялся,</li>
<li>Хотел писать — но труд упорный</a></li>
<li>Ему был тошен; ничего</li>
<li>Не вышло из пера его,</li>
<li>И не попал он в цех задорный</li>
<li>Людей, о коих не сужу,</li>
<li><a name="met1">Затем, что к ним принадлежу.</a></li>
</ol>
</body>
</html>
Не пугайтесь размера, этот код вам разрешается контрлцеконтрлвекнуть.
Как итог выполучите такую штуку:
После перехода по ссылке:
Домашнее задание.
В предыдущем примере вы при переходе в конец документа были лишены возможности вернуться в начало столь же стремительно. Собственно такую возможность я и предлагаю вам реализовать. Попробуйте сделать первую и последнюю строчки на странице одновременно и ссылками и метками, дав таким образом самим себе возможность тыкать и радоваться.Мой вариант реализации - завтра.
Да прибудет с вами сила, друзья.
P.S. А сюрпризы никто не отменял...
Комментариев нет:
Отправить комментарий