русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

http://www.wisdomweb.ru/HTML


Дата добавления: 2014-12-01; просмотров: 1228; Нарушение авторских прав


<img src="..."> добавление рисунка в HTML-документ, тег не требует закрытия. Вместо трёх точек в кавычках ("...") необходимо подставить путь к картинке. Расширения картинки можете использовать любые ( *.gif, *.png, *.jpg). Для удобства можно размещать все картинки в отдельной папке. Для выравнивания изображения по центу используется тэг <CENTER>, для размещения на новой строке - тэг <BR>.

Например:

<p><center><img src="img/tigr.jpg" alt="Это изображение тигра"></center></p>

Если белый фон страницы вас не устраивает, то с помощью атрибута BACKGROUND тэга <BODY>, можно снабдить страницу любым графическим фоном.

Например:

<BODY background="img/fon.jpg">

<p><img src="img/teacher.jpg" border="3"></p>

</BODY>

Обтекание графики текстом в документе html

<img src="uzeron_pc.jpg"> Без атрибутов - текст по умолчанию находится снизу картинки
<img src="uzeron_pc.jpg" align="right"> align="right" - картинка справа, текст слева
<img src="uzeron_pc.jpg" align="left"> align="left" - картинка слева, текст обтекает справа
<img src="uzeron_pc.jpg" align="bottom"> align="bottom" - как и по умолчанию, текст внизу картинки
<img src="uzeron_pc.jpg" align="middle"> align="middle" - текст посередине картинки
<img src="uzeron_pc.jpg" align="top"> align="top" - текст вверху картинки
<img src="uzeron_pc.jpg" vspace="10"> vspace - задаёт расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel - самая маленькая единица изображения (точка). Например, если экран Вашего монитора 800х600, это значит, что он имеет 800 на 600 пикселей (точек). В примере расстояние равно 10 пикселям (точкам).
<img src="uzeron_pc.jpg" hspace="20"> hspace - задаёт горизонтальное расстояние между текстом и рисунком. Расстояние задаётся в пикселях. В примере отступ текста от картинки равен 20 пикселям (точкам)
<img src="uzeron_pc.jpg" alt="Сайт для сайтостроителей"> alt - задаёт название (описание) картинки (действует не во всех браузерах. В Internet Explorer – работает!). Работает, если ваш посетитель наведёт мышку на картинку и подержит несколько секунд. В этом конкретном примере появится надпись "Сайт для сайтостроителей". Я рекомендую Вам задавать атрибут alt, особенно тогда, если Ваша картинка является ссылкой (кнопкой).
<img src="uzeron_pc.jpg" width="150"> width - задаёт ширину картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по ширине.
<img src="uzeron_pc.jpg" height="150"> height - задаёт высоту картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по высоте.
<img src="uzeron_pc.jpg" border="0"> border - задаёт рамку вокруг картинки. По умолчанию рамка всегда есть. Если вы хотите убрать рамку, то задайте border=0.
<p align="center"><img src="uzeron_pc.jpg"> </p> <p></p> - размещает саму картинку туда, куда нам необходимо. Размещение зависит от атрибута align. Есть, например: align="left" - слева align="center" - в центре align="right" - справа

 



Основные возможности языка разметки гипертекстовых страниц HTML для создания дополнительных связанных Web-страниц. Гиперссылки. Структура HTML-приложения.

Web-сайт - Совокупность логически связанных Web-страниц, размещённых (обычно) на одном компьютере, которая включает в себя начальный файл, называемый домашней страницей, и другие, именуемые страницами.

Web-страница — это основная информационная единица WWW. Она представляет собой отдельный документ, хранящийся на Web-сервере. Страница имеет свое имя, по которому к ней можно обратиться.

Просматривать Web-страницы совсем не обязательно подряд, перелистывая их, как в книге. Важнейшим свойством WWW является гипертекстовая организация связей между Web-страницами. Причем эти связи действуют не только между страницами на одном сервере, но и между разными серверами WWW.

Гиперссылки являются основой HTML и всемирной паутины. Они представляют собой текст (или картинку), нажав на который, пользователь будет перемещен на другой документ или другое место в данном документе.

Гиперссылки выделяются на страницах подчеркнутым шрифтом синего цвета.

В HTML существует 2 вида гиперссылок:

– Внешние гиперссылки перемещают пользователя нажавшего на них на другой HTML документ.

– Внутренние гиперссылки перемещают пользователя на предварительно созданную закладку в документе, в котором они определены.

Создание внешней гиперссылки: <a href="адрес">Текст ссылки </a> (адрес указывает адрес документа, на который будет перемещен пользователь после нажатия на ссылку).

Создание внутренней гиперссылки:

1. Создание гиперссылки на закладку <a href="#bookmark">Текст ссылки </a>

2. Создание закладки <a id="bookmark">Текст закладки. </a> (bookmark имя закладки (может быть произвольным).

Создадим внешние ссылки ведущие на главную страницу нашего сайта.

<a href="http://www.wisdomweb.ru"> www.wisdomweb.ru </a>

<a href="http://www.wisdomweb.ru">

<img src='http://www.wisdomweb.ru/images/logo14.gif' width='200' height='60' />

</a>

В рамках HTML гиперссылки могут иметь следующие атребуты:

1. target указывает как будет открываться документ, на который указывает ссылка.

Данный атрибут может иметь следующие значения:

– _top документ откроется в текущем окне браузера;

– _blank документ откроется в новом окне браузера;

– _self документ откроется в текущем фрейме;

– _parent — документ откроется в родительском фрейме.

<a href="html://www.wisdomweb.ru" target="_blank">Это ссылка на сайт www.wisdomweb.ru</a>

 

 

2. title – позволяет создать текст подсказки, которая всплывает при наведении курсора мыши на гиперссылку. Например:

<a href=”http://sitename.com/” title=”Текст_всплывающей_подсказки”>Имя ссылки>

С помощью языка html можно создавать почтовые гиперссылки, щелчок по которым запускает программу почтового клиента.

Например:

<a href="mailto:webcodius@gmail.com">написать письмо</a>

Если щелкнуть по этой ссылке, то у вас запустится установленная по умолчанию почтовая программа и откроется диалог создания нового письма.

Создание изображения-ссылки:

<a href="http://webcodius.ru"><img src="image.png"></a>

Изменить цвет гиперссылки в HTML можно в параметрах тега : link – цвет ссылок веб-страницы; vlink – цвет посещённых гиперссылок веб-страницы; alink – цвет активных ссылок веб-страницы. Например: <body link=”black” vlink=” #8AA080” alink=”grey”>

 




<== предыдущая лекция | следующая лекция ==>
Общие сведения о языке разметки гипертекста (HTML). Синтаксис языка. Теги. Структура HTML-документа. | Фрезы корундовые для аппаратного маникюра и педикюра


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.161 сек.