Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

HTML изображение справа – текст слева

Поиск

Пример:

<html> <head> <title>HTML изображение справа – текст слева</title> </head> <body> <img src="../images/2121.png" align="right" width="128" height="128" /> <p>Изображение обтекает текст справа</p> <p>Изображение обтекает текст справа Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа</p> </body> </html>

Результат:

Посмотреть в новом окне: HTML изображение обтекает текст справа

Рассмотрим простейший способ верстки web-страниц

Подведем итоги... Внизу представлен один из возможных результатов первых 11-ти уроков нашего HTML курса. Вы, уважаемый читатель, спросите: Почему в заголовке написано Пример XHTML верстки? Ответ: Потому что XHTML является расширенной и более модной версией HTML, и некоторые его элементы мы уже использовали в предыдущих уроках, а теперь пришло время познакомиться с ним поближе, конечно, если вы не сделали это еще в первом уроке.

Итак, пример XHTML верстки:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>XHTML верстка</title> </head> <body style="background-color:#ffffcc; color:#008800"> <br /> <h2 align="center">Пробная XHTML страничка</h2> <br /> <div align="center"> <img src="../images/bee3.jpg" width="400" height="250" alt="Пчела на цветке" vspace="20" /> </div> <p align="center" style="font-size:17px">Среди полей и диких трав,<br /> Жужжа на встречу ветру,<br /> Она летит, свой дикий нрав<br /> Вплетая в песню лета.</p> <p align="center"><em>Эргэл</em></p> <br /> <hr /> </body> </html>

Результат: XHTML верстка

Обратите внимание на структуру XHTML документа, то есть на содержимое тегов <!DOCTYPE>, <html> и на то, как было отцентрированo изображение – с помощью <div> </div>, так как атрибут align="" тега <img /> не имеет значения center. Остальное думаю понятно – не зря же мы предыдущие 11 уроков прошли!

HTML теги, определяющие HTML ссылки

В этом уроке мы подробно рассмотрим, как связать между собой отдельные страницы.

  • HTML ссылки связывают между собой миллиарды web-страниц и миллионы сайтов.
  • HTML ссылка определяется тегами <a> </a>.
  • HTML ссылки могут быть любого размера и цвета – эти свойства определяются с помощью CSS.
  • HTML ссылка может быть текстовой или изображением.
  1. HTML ссылка на другую страницу
  2. HTML ссылка на сайт
  3. HTML ссылки внутри документа
  4. Изображение в роли ссылки

HTML ссылка на другую страницу

Пример:

  1. Используя полученные знания, сделайте в Блокноте наброски будущей страницы ⇒ сохраните ее под произвольным именем, например, как page2.html в папке D\My_first_site.
  2. В другом документе, опять же в Блокноте, пропишите:
... <title>HTML ссылка на другую страницу</title> </head> <body> <p><a href="page2.html">Переходим</a> на вторую страницу</p> </body> </html>
  1. Сохраните его как index.html. В итоге, папка D\My_first_site содержит файлы: index.html и page2.html.
  2. Откройте в браузере файл index.html ⇒ нажмите на ссылку.

HTML ссылка на сайт

Пример:

... <title>HTML ссылка на сайт</title> </head> <body> <p>Посетите <a href="http://www.ab-w.net/">ab-w.net</a></p>

Атрибуты и значения

  • href="" – обязательный атрибут тега <a>, указывает адрес ссылки.
  • target="_blank" – откроет ссылку в новом окне браузера:
<a href="page2.html" target="_blank"> </a>
  • target="_self" – откроет ссылку в том же окне. Значение _self определено по умолчанию, поэтому его можно не указывать.
  • title="комментарий" – всплывающий комментарий – заголовок ссылки:
<a href="page2.html" target="_blank" title="комментарий"> </a>

HTML ссылка может быть окрашена в любой цвет, что подробно рассматривается в курсе по CSS.

HTML ссылки внутри документа

Буквы-ссылки в главе HTML теги осуществляют переход в пределах одной web-страницы.

Как это реализовано:

Имеем 2-е буквы D. Первая выступает в роле HTML ссылки, а вторая – в роли элемента на который ссылаемся. Второй присваиваем идентификатор со значением:

<h2 id="d">D</h2>

Код ссылки на букву с идентификатором:

<a href="#d">D</a>

Изображение в роли ссылки

Следующее изображение является ссылкой наверх страницы:

Код:

<title>HTML изображение в роле ссылки</title> </head> <body> <p> <a href="#"><img src="../images/strelkavverx.png" alt="" border="0" /></a> </p>

border="0" – отменяет границу у изображения-ссылки.



Поделиться:


Последнее изменение этой страницы: 2016-08-01; просмотров: 488; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.141.21.199 (0.006 с.)