Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

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

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

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

⇐ ПредыдущаяСтр 4 из 9Следующая ⇒

Пример:

<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 ссылка может быть текстовой или изображением.

HTML ссылка на другую страницу
HTML ссылка на сайт
HTML ссылки внутри документа
Изображение в роли ссылки

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

Пример:

Используя полученные знания, сделайте в Блокноте наброски будущей страницы ⇒ сохраните ее под произвольным именем, например, как page2.html в папке D\My_first_site.
В другом документе, опять же в Блокноте, пропишите:

... <title>HTML ссылка на другую страницу</title> </head> <body> <p><a href="page2.html">Переходим</a> на вторую страницу</p> </body> </html>

Сохраните его как index.html. В итоге, папка D\My_first_site содержит файлы: index.html и page2.html.
Откройте в браузере файл 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" – откроет ссылку в новом окне браузера:

target="_self" – откроет ссылку в том же окне. Значение _self определено по умолчанию, поэтому его можно не указывать.
title="комментарий" – всплывающий комментарий – заголовок ссылки:

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

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

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

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

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

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

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

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

Код:

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

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

⇐ Предыдущая 1 2 345 6 7 8 9 Следующая ⇒

Читайте также:

Техника нижней прямой подачи мяча

Комплекс физических упражнений для развития мышц плечевого пояса

Стандарт Порядок надевания противочумного костюма

Общеразвивающие упражнения без предметов

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

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