<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 имя закладки (может быть произвольным).
Создадим внешние ссылки ведущие на главную страницу нашего сайта.
Изменить цвет гиперссылки в HTML можно в параметрах тега : link – цвет ссылок веб-страницы; vlink – цвет посещённых гиперссылок веб-страницы; alink – цвет активных ссылок веб-страницы. Например: <body link=”black” vlink=” #8AA080” alink=”grey”>