Во второй части учебного цикла мы узнаем, как создавать ссылки на другие веб-страницы, а также ссылки на другие части наших собственных страниц. Наша главная страница начинает выглядеть немного загроможденной, поэтому мы собираемся создать совершенно новую веб-страницу, которая будет содержать ссылки на несколько наших любимых веб-сайтов.
Основные ссылки
Для начала откройте новую пустую страницу в текстовом редакторе, затем заполните базовую стартовую оболочку, которую мы видели в первой части. Установите заголовок для страницы:
<html>
<head>
<title>My Favorite Web Sites</title>
</head>
<body>
content
</body>
</html>Далее давайте добавим немного форматирования и несколько ссылок:
<html>
<head>
<title>My Favorite Web Sites</title>
</head>
<body>
<font size="+2">
My Favorite Web Sites
</font>
<p>
SitePoint - http://www.sitepoint.com <br>
Google - http://www.google.com <br>
AltaVista - http://www.altavista.com <br>
Slashdot - http://www.slashdot.com
</p>
</body>
</html>
Теперь, эта страница все хорошо, но если пользователь хочет посетить один из сайтов, которые вы перечислили, ему придется либо повторно набрать адрес в своем браузере, либо вырезать и вставить URL. Есть гораздо лучший способ сделать это, используя тег <a> Синтаксис для тега <a>
<a href="URL">TEXT TO DISPLAY</a>
Вам нужно заменить «URL» выше на полный адрес сайта, включая http: //, а затем заменить «TEXT TO DISPLAY» на текст, на который пользователь хотел бы нажать, чтобы перейти на URL. как только мы добавим этот код на нашу страницу, он будет выглядеть так:
<html>
<head>
<title>My Favorite Web Sites</title>
</head>
<body>
<font size="+2">
My Favorite Web Sites
</font>
<p>
<a href="http://www.sitepoint.com">SitePoint</a><br>
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.altavista.com">AltaVista</a> <br>
<a href="http://www.slashdot.com">SlashDot</a>
</p>
</body>
</html>
Теперь все, что нужно сделать пользователю, — это нажать на название сайта (например, SitePoint), чтобы немедленно перенести его на этот сайт.
Организация ссылок
На данный момент наша страница выглядит довольно хорошо. Однако, как только вы добавите еще несколько ссылок, пользователю будет намного сложнее перемещаться по странице и находить ссылку, которую он ищет. Итак, давайте разделим ссылки на категории (вы заметите, что я уже добавил еще несколько ссылок в список ниже):
<html>
<head>
<title>My Favorite Web Sites</title>
</head>
<body>
<font size="+2">
My Favorite Web Sites
</font>
<p>
<i>
Web Development <br>
Search Engines <br>
Miscellaneous
</i>
</p>
<p>
<b>Web Development</b><br>
<a href="http://www.sitepoint.com">SitePoint</a><br>
<a href="http://www.webmasterbase.com">WebmasterBase</a><br>
<a href="http://www.promotionbase.com">PromotionBase</a><br>
<a href="http://www.ecommercebase.com">eCommerceBase</a><br>
<a href="http://www.servicesbase.com">ServicesBase</a>
</p>
<p>
<b>Search Engines </b><br>
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.altavista.com">AltaVista</a> <br>
<a href="http://www.yahoo.com">Yahoo</a><br>
<a href="http://www.dmoz.org">Open Directory Project (DMOZ) </a>
</p>
<p>
<b>Miscellaneous </b><br>
<a href="http://www.slashdot.com">SlashDot</a> <br>
<a href="http://www.theregister.co.uk">The Register</a> <br>
<a href="http://www.f-free.net">F-Free</a>
</p>
</body>
</html>
Как вы можете видеть, я также включил список всех категорий в верхней части страницы, чтобы помочь пользователям найти нужную категорию.
На данный момент довольно легко перемещаться по странице ссылок. Но по мере того, как наш список ссылок растет, посетителю становится все труднее находить то, что он ищет. К счастью, другая функция тега <a> Он представляется пользователю точно так же, как любая другая ссылка, но позволяет ему перейти в другую позицию на той же странице или в позицию на другой странице на том же сайте.
У этого тега есть два основных элемента.
Указатель
Во-первых, мы должны разместить указатель в той позиции на странице, на которую мы хотим сослаться. Указатель:
<a name="myposition"></a>
Имя, указанное в теге, позволит вам перейти к этой области страницы по обычной ссылке. Это не меняет способ отображения страницы для пользователя; это выглядит точно так же, как и раньше.
Ссылка
Следующим шагом является создание ссылки на этот указатель. Ссылки на определенные области страниц работают так:
<a href="http://www.mysite.com/index.html#myposition">click here</a>
В нашем конкретном случае, поскольку пункт назначения находится на той же странице, что и сама ссылка, указывать полный URL не нужно — достаточно только части #myposition
Итак, после того, как названия категорий будут преобразованы в ссылки, наша страница будет выглядеть следующим образом:
<html>
<head>
<title>My Favorite Web Sites</title>
</head>
<body>
<font size="+2">
My Favorite Web Sites
</font>
<p>
<i>
<a href="#webdev">Web Development</a><br>
<a href="#search">Search Engines</a><br>
<a href="#misc">Miscellaneous</a>
</i>
</p>
<p>
<b><a name="webdev"></a>Web Development</b><br>
<a href="http://www.sitepoint.com">SitePoint</a><br>
<a href="http://www.webmasterbase.com">WebmasterBase</a><br>
<a href="http://www.promotionbase.com">PromotionBase</a><br>
<a href="http://www.ecommercebase.com">eCommerceBase</a><br>
<a href="http://www.servicesbase.com">ServicesBase</a>
</p>
<p>
<b><a name="search"></a>Search Engines</b><br>
<a href="http://www.google.com">Google</a><br>
<a href="http://www.altavista.com">AltaVista</a><br>
<a href="http://www.yahoo.com">Yahoo</a><br>
<a href="http://www.dmoz.org">Open Directory Project (DMOZ)</a>
</p>
<p>
<b><a name="misc"></a>Miscellaneous</b><br>
<a href="http://www.slashdot.com">SlashDot</a><br>
<a href="http://www.theregister.co.uk">The Register</a><br>
<a href="http://www.f-free.net">F-Free</a>
</p>
</body>
</html>
Теперь, если вы получите доступ к ссылке на определенную категорию, вы будете перемещены вниз по странице к этой категории, а не к отдельной странице. Имейте в виду, что этот пример может не работать, если вы просматриваете страницу на мониторе с высоким разрешением, просто потому, что экран не будет прокручиваться вниз, если все ссылки уместятся на одной странице. Однако, если на странице было больше ссылок или вы сократили окно браузера, вы увидите, что ссылки делают свое дело.
Ссылки на электронную почту
Есть еще один тип ссылок, на который мы еще не смотрели. Эта ссылка имеет возможность открыть почтовый клиент посетителя и позволить ему напечатать вам сообщение. Тег похож на те, на которые мы смотрели ранее:
<a href="mailto:[email protected]">Click here to email me!</a>
Часто называемые «ссылками на почту», они предоставляют быстрый и простой способ позволить посетителю отправить вам электронное письмо, возможно, с комментариями или предложениями о вашем сайте, или просто поздороваться!
Добавление изображений на ваш сайт
Теперь, когда вы создали страницу, которая может направлять посетителей на ваши любимые веб-сайты, как насчет страницы с парой изображений? Это могут быть вы, ваш дом, ваша машина — все, что вы захотите. Для примеров на этой странице я собираюсь предположить, что фотографии принадлежат моему дому, но, конечно, ваши фотографии могут быть любыми. Чтобы не загромождать страницы, я собираюсь начать еще одну пустую страницу для этого. Итак, давайте откроем пустую страницу в вашем текстовом редакторе и назовем ее pics.html. Заполните контур пустой страницы, который мы видели ранее. Теперь мы готовы.
Как и все в HTML, изображения используют теги. Тег для изображения — <img> У этого тега довольно много атрибутов, но сейчас мы просто рассмотрим два:
src="images/house.jpg"
Атрибут src Это может быть URL или путь на локальном веб-сайте, подобный тому, который я включил в приведенный выше пример. Например, «images / house.jpg» указывает, что мы хотим отобразить изображение, хранящееся в house.jpg, файле, который можно найти в подкаталоге images каталога, содержащего файл HTML для этой страницы.
alt="My House"
Атрибут alt Использование атрибута alt необязательно, но для этого есть много веских причин, как мы увидим позже.
Итак, давайте поместим пару картинок на HTML-страницу:
<html>
<head>
<title>
Pictures of My House
</title>
</head>
<body>
<p>
<font size="+2">
<b>
Pictures of My House
</b>
</font>
</p>
<p>
<img src="images/house1.jpg" alt="My Front Door">
<br>
<i>My Front Door</i>
</p>
<p>
<img src="images/house2.jpg" alt="My Back Yard">
<br>
<i>My Back Yard</i>
</p>
</body>
</html>
Как видите, я включил здесь только две картинки, но нет ограничений на количество, которое вы можете добавить на свою страницу.
Зачем использовать атрибут alt?
Вы можете задаться вопросом, почему люди используют атрибут alt, если он не требуется, и, как кажется, он ничего не делает при просмотре вашей страницы. На самом деле, есть ряд преимуществ использования атрибута alt.
Во-первых, если ваше изображение должно быть когда-либо удалено, повреждено или перемещено, то на его месте будет показано описание, установленное с атрибутом alt. Это, по крайней мере, даст зрителю некоторое описание изображения, которое должно появиться.
Во-вторых, это означает, что ваш сайт более дружественный для людей с ограниченными возможностями, так как текстовые браузеры и системы преобразования текста в речь, которые используют многие из этих посетителей, не воспринимают изображения, но распознают атрибуты alt.
Кроме того, последние браузеры, такие как Microsoft Internet Explorer, будут отображать описание, предоставленное в атрибуте alt, когда вы наводите указатель мыши на изображение. Возможно, единственным недостатком является то, что включение alt attrubutes сделает размер файла страницы немного больше; однако разница в скорости незначительна. Я конечно не вижу никакой реальной причины не использовать alt теги.
Дополнительные атрибуты для тега изображения
Тег изображения использует большое количество атрибутов, которые являются необязательными, но полезными. Здесь только несколько:
border="n"
Это помещает границу вокруг изображения. «N» указывает ширину границы в пикселях. Это особенно полезно, когда вы превращаете изображения в ссылки, потому что по умолчанию вокруг этих изображений отображается безобразная цветная рамка.
height="n"
Это сообщает браузеру высоту изображения в пикселях. Этот атрибут используется для того, чтобы при обработке и загрузке страницы браузер зарезервировал необходимое количество места для изображения. В результате макет вашей страницы будет всегда выглядеть идеально, даже когда изображения все еще загружаются.
width="n"
Этот атрибут служит той же цели, что и атрибут height, за исключением того, что он явно определяет ширину изображения. Опять же, это должно быть указано в пикселях.
Есть еще много атрибутов, но они дадут вам хорошее начало.
Вызов
Теперь, когда вы хорошо знакомы с основами HTML, пришло время для испытаний! В настоящее время у нас есть 3 страницы:
- Главная страница
- Страница ссылок
- Страница изображений
Однако на данный момент нет способа перемещаться между ними. Чтобы исправить это, нам нужно открыть главную страницу и создать ссылки, которые ведут пользователей на две другие страницы. На каждой из этих страниц должна быть ссылка для возврата на главную страницу. Если вы застряли, вот подсказка: вам нужно использовать тег <a>
Решение будет предоставлено в следующей части серии, когда мы также рассмотрим одну из самых полезных функций макета HTML — таблицы.