Самоучитель по html

Содержание

  1. Введение

  2. Знакомство с html

  3. Теги, обязательные к использованию

  4. Заголовки и абзацы

  5. Непарные теги

  6. Стили текста

  7. Списки

  8. Предварительно форматированный текст

  9. Связь между веб-страницами

  10. Фреймы

  11. Работа с изображениями

  12. Музыка как фон html-документа

  13. Вставка произвольных объектов в html-код

  14. Таблицы

  15. Формы в html

  16. Карты навигации по сайту

  17. Мета-теги

  18. Заключение

  19. Самоучитель по html скачать бесплатно

Работа с изображениями в html-документах

В любой html-документ можно вставить изображение. Делается это с помощью тега . Вставляется изображение следующим образом:

С помощью обязательного атрибута src браузер обращается к названию (имени) картинки, расширение изображения обязательно должно быть указано! Атрибут alt нужен на тот случай, если браузер пользователя не загружает изображения по какой-либо причине. Если изображение не будет загружаться, тогда вместо него на экране монитора появится надпись, указанная в атрибуте alt. Посмотрим ниже результат записи .

Бывают случаи, когда размер изображения на веб-странице необходимо изменить (для красоты например). Для этого существуют атрибуты width - ширина и hight - высота. Задаются в пикселях или процентах от ширины экрана. Зададим их нашему рисунку (в пикселях). Получим запись следующего вида: . Выглядеть после этого наша картинка будет следующим образом:



В данном случае изображение на веб-странице было уменьшено относительно оригинала, его можно также и увеличить, только в случае увеличения качество изображения уменьшится!

Также изображение можно поместить в рамку с помощью атрибута border. Ширина рамки обозначается в пикселях, например border=2.





По отношению к тексту html-документа можно также выровнять рисунок. Делается это с помощью атрибута align. Этот атрибут имеет несколько значений.

  • align="texttop". Значение атрибута align="texttop" обозначает, что нижняя часть изображения будет выравнена по нижнему краю текста той строки, на которой находится данное изображение. Возьмём, например такой тест с изображением:

    На данном рисунке>изображена планета Земля с астероидами вокруг неё.

    Результат смотри ниже.

    На данном рисунке изображена планета Земля с астероидами вокруг неё.


  • align="top". align="top" обозначает, что изображение будет выравнено по самому высокому текстовому элементу текущей строки .Рассмотрим тот же пример, только вместо align="texttop" напишем align="top":

    На данном рисунке изображена планета Земля с астероидами вокруг неё.


  • align="middle". Середина изображения выравнивается по базовой линии текущей строки.

    На данном рисунке изображена планета Земля с астероидами вокруг неё.


  • align="absmiddle". Середина изображения выравнивается по середине базовой линии текущей строки. На глаз разница не заметна, если сравнивать с предыдущим случаем.

    На данном рисунке изображена планета Земля с астероидами вокруг неё.


  • align="baseline". Изображение выравнивается по базовой линии строки. Очень похоже на align="texttop".

    На данном рисунке изображена планета Земля с астероидами вокруг неё.


  • align="bottom". Здесь выравнивание нижней границы изображения осуществляется по окружающему тексту. Ниже это можно увидеть.

    На данном рисунке изображена планета Земля с астероидами вокруг неё.


  • align="left". Текст находится справа от изображения, другими словами говоря, выравнивание изображения происходит по левому краю. Только в этом случае необходимо расписывать теги в таком порядке:

    >На данном рисунке изображена планета Земля с астероидами вокруг неё.

    То есть, сначала нужно указать рисунок и его параметры и только после этого напечатать текст. Вот и пример данной записи:

    На данном рисунке изображена планета Земля с астероидами вокруг неё.






  • align="right". В этом случае выравнивается изображение по правому краю, вот как это будет выглядеть (в тегах всё прописывается, как и в случае align="left" только вместо left пишется right):

    На данном рисунке изображена планета Земля с астероидами вокруг неё.







Как видно, из параметров атрибута align тест можно располагать с разных сторон от изображения (или изображение от текста). Но текст располагается очень близко к изображению. Иногда это не очень красиво смотрится. Чтобы "отодвинуть" текст от рисунка на n-ное расстояния в html используются атрибуты hspace (отступы по горизонтали, то есть справа и слева) и vspace (отступы по вертиками, снизу и сверху от изображения). Напишем такую строчку:

>На данном рисунке изображена планета Земля с астероидами вокруг неё.

Значение параметра hspace="10" указывается в пикселях. Получается следующее, а именно текст расположился на расстоянии 10 пикселей от изображения:

На данном рисунке изображена планета Земля с астероидами вокруг неё.







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



Результатом данной записи будет кликабельная картинка space.JPG размером 150х150 пикселей, нажав на которую пользователь перейдёт в новой вкладке к изображению space.JPG в полном размере. Вот, кстати, и она:

| следующая>>

© 2011-2012 «Мути в сети»