Как работает веб-страница

Без HTML - не было бы и WWW...

Как работает веб-страница

Изображения

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

Уменьшить рисунок практически в точку и просто вставлять тег желаемого изображения в списках, вместо использования тега <ul>.

Длинное, тонкое изображение может использоваться в качестве разделителей. Большие изображения могут быть использованы для логотипов и иллюстраций — почти всего, что только можно себе представить.

Существует два способа, откуда Вы можете получить графические изображения: либо загрузить их с Веб-сайтов с графикой или можете создать их сами.

Изображения вставляеются в Веб-страницу с помощью тега:

<img src="имя файла">

Вы также можете использовать изображения в качестве ссылки на другую страницу или элемент. Чтобы сделать это, достаточно просто вставить img src после тега-тега привязки. Обязательно включите border=0, иначе граница может появиться вокруг вашего изображения.

Пример: <a href="http://www.qriosity.ru"><img src="logo.jpg" border=0></a>

В данном примере, если пользователь нажмет на изображение logo.jpg, то он будет перенаправлен на домашнюю страницу http://www.qriosity.ru

Любое цифровое изображение может также использоваться в качестве фона для страницы. Для этого добавьте в теге <body>

background="имя файла изображения"
Пример: <body background="logo.jpg">

 

Описание изображений

Еще одна полезный, но не обязательный тег, который вы можете добавить к изображению — тег «alt»

Этот тег дает изображению метку, появляющуюся, когда пользователь наводит указатель мыши на картинку. Показывается также, пока изображение не появилось на странице, загружающейся в браузер. Вы можете вставить любое сообщение с помощью тега «alt».

Пример: <img src="logo.jpg" alt="Популярно обо всем">

 

Если Ваши изображения не работают

Иногда изображения появляются на страницах, как маленький красный X.

Это означает одно: было введено неправильное имя файла для изображения. Проверьте путь к изображению и правильность написания имени картинки. UNIX-системы чувствительны к регистру символов!

 

Выравнивание изображений

Мы уже рассматривали методы выравнивания текстов. Здесь представлен краткий обзор:

<Div align=.".."> тег перед изображением. Принимает значения center, right, left

Используйте </div> тег конца выравнивания.

<Align=.".."> тег в рамках "img src” для текста, обтекающего изображение.

Вставьте эти теги в рамках img src для вертикального выравнивание изображения по отношению к тексту:

align="bottom" Текст на одной линии с нижней частью изображения.
<img src="http://qriosuty.ru/ logo.gif" alt="qriosity.ru" border=0 align="bottom">
align="top" Текст на одной линии с верхней частью изображения.
<img src="http://qriosuty.ru/ logo.gif" alt="qriosity.ru" border=0 align="top">
align="middle" Текстовые строки на уровне с серединой изображения.
<img src="http://qriosuty.ru/ logo.gif" alt="qriosity.ru" border=0 align="middle">

В каждом из приведенных выше примеров, изображение выравнивается по умолчанию, так что текст отображается справа от него. Если вы хотите, чтобы текст находился слева или справа от изображения, вы можете добавить теги <div align> для выравнивание изображения,  которые обсуждались выше.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Оставить комментарий

Ваш email не будет опубликован.

*


two × 4 =


Поиск Google

(function() { var cx = '013762819107762716451:zn5azro-xtc'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })();

Мы Вконтакте

Top
Follow

Get every new post delivered to your Inbox

Join other followers