metoda / Kl_ITIn_2014
.pdf
Например, чтобы увеличить наше изображение в 1,5 раза, можно написать:
<img src="img/1.png" width="264"> или <img src="img/1.png" width="264" height="219">
Результат будет один:
Еще параметры width и height могут принимать значения в процентах. Но! Следует учесть, что это проценты от размера окна браузера. В таком случае тоже можно указать только один параметр, а второй - опустить.
Например, если мы хотим, чтобы изображение по ширине занимало ровно половину нашей странички, надо написать следующее:
<img src="img/1.png" width="50%">
И мы получим:
Рамка вокруг изображения
У тега <img> есть еще один необязательный параметр border. С его помощью можно задать толщину рамки вокруг изображения. По умолчанию толщина рамки изображения нулевая, т.е. рамки нет.
Например, так можно добавить к нашей картинке рамку толщиной 2 пиксела:
<img src="img/1.png" border="3">
Вот что покажет нам браузер:
Цвет рамки совпадает с цветом текста на странице, заданным с помощью параметра text тега <body> (См. Урок 6. Свойства страницы - параметры тега body), по умолчанию это черный цвет.
Но если изображение является ссылкой, то у него толщина рамки по умолчанию = 1, а его цвет совпадает с цветом ссылок:
И если Вы не хотите видеть рамку, принудительно присвойте параметру border нулевое значение:
<img src="img/1.png" border="0">
Альтернативный текст
Альтернативный текст отображается браузером на месте картинки, пока та не загрузится. Или вместо картинки, если она по какой-либо причине не отобразилась.
Когда и если картинка загрузилась, альтернативный текст будет показываться при наведении курсора мыши на эту самую картинку.
Чтобы добавить альтернативный текст, используется параметр alt тега <img>, которому присваивается строковое значение, обязательно заключенное в кавычки.
<img src="img/1.png" alt="Альтернативный текст">
Можно создать многострочный альтернативный текст.
Наведите курсор на картинку
Для этого достаточно вставить перенос строки в html-документе.
<img src="img/1.png" alt="Альтернативный текст">
Выравнивание изображения
Для изображения, как и для параграфа, существует понятие выравнивания относительно текста и других изображений на странице. Задать тип выравнивания можно также с помощью параметра align тега <img>.
Ниже приведена таблица возможных значений параметра align:
Значение |
Описание |
Результат |
|
|
|
<img src="sample.gif" |
Верхняя граница |
Хотя Карлсон и был |
|
|
|
align="texttop"> изображения выравнивается по самому высокому текстовому элементу текущей строки.
<img src="sample.gif" align="top">
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.
лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.
Хотя Карлсон 
и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.
<img src="sample.gif" align="middle">
Выравнивание середины изображения по базовой линии текущей строки.
Хотя Карлсон 
и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.
<img src="sample.gif" align="absmiddle">
Выравнивание середины изображения по средине текущей строки.
Хотя Карлсон 
и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.
<img src="sample.gif" align="baseline">
Выравнивание изображения по базовой линии текущей строки.
Хотя Карлсон 
и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.
<img src="sample.gif" align="bottom">
Выравнивание нижней границы изображения по окружающему тексту.
Хотя Карлсон 
и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось
|
|
целое денатуратное озеро. |
|
|
|
<img src="sample.gif" |
Выравнивает |
Хотя Карлсон и был |
align="left"> |
изображение по |
лучшим в мире |
|
левому краю окна. |
специалистом по паровым |
|
|
машинам, денатурат он |
|
|
наливал весьма неуклюже и |
|
|
даже пролил его, так что на |
|
|
полке образовалось целое |
|
|
денатуратное озеро. |
|
|
|
<img src="sample.gif" |
Выравнивает |
Хотя Карлсон и был |
align="right"> |
изображение по |
лучшим в мире |
|
правому краю окна. |
специалистом по паровым |
|
|
машинам, денатурат он |
|
|
наливал весьма неуклюже и |
|
|
даже пролил его, так что на |
|
|
полке образовалось целое |
|
|
денатуратное озеро. |
|
|
|
Параметры texttop, top, middle, absmiddle, baseline, bottom задают выравнивание изображения по вертикали. А параметры left и right дают браузеру понять, с какой стороны текст должен обтекать изображение.
Отступы вокруг изображения
Чтобы при обтекании текст не прилегал близко к изображению, можно задать отступы вокруг изображения. Сделать это можно с помощью параметров hspace (отступы слева и справа) и vspace (отступы сверху и снизу) тега
<img>.
В следующем примере продемонстрирован случай, когда текст обтекает изображение, при этом изображение выровнено по левому краю и имеет отступы вокруг, равные 5 пикселам:
<img src="img/1.png" align="left" hspace="5" vspace="5">В городе Стокгольме, на самой обыкновенной улице, в самом обыкновенном доме живет самая обыкновенная шведская семья по фамилии Свантесон. Семья эта состоит из самого обыкновенного папы, самой обыкновенной мамы и трех самых обыкновенных ребят -Боссе, Бетан и Малыша.
Вот результат в браузере:
В городе Стокгольме, на самой обыкновенной улице, в самом обыкновенном доме живет самая обыкновенная шведская семья по фамилии Свантесон. Семья эта состоит из самого обыкновенного папы,
самой обыкновенной мамы и трех самых обыкновенных ребят -Боссе, Бетан и Малыша.
Разбиение изображения на части
Бывают случаи, когда на странице необходимо поместить большое изображение. Но тогда страница будет долго грузиться. Что же делать?
Один из возможных вариантов выхода из положения - разрезать изображение на части и разместить его на странице с помощью таблицы. A чтобы изображение выглядело как целое, необходимо у таблицы удалить границу и все отступы внутри и между ячейками. Т.е. присвоить соответствующим параметрам тега <table> нулевые значения: border="0", cellspacing="0", cellpadding="0".
В следующем примере мы разбили изображение на 4 части. Вот как будет выглядеть таблица:
<table border="0" cellspacing="0" cellpadding="0"> <tr>
<td><img src="img/part1.png"></td> <td><img src="img/part2.png"></td> </tr>
<tr>
<td><img src="img/part3.png"></td> <td><img src="img/part4.png"></td> </tr>
</table>
А вот результат:
Такой прием может пригодиться и в других случаях. Здесь Вы можете видеть пример наложения 2-х изображений с текстовыми вставками.
6.Свойства страницы - параметры тега body
Цвет текста
Цвет фона
Фоновое изображение
Цвет ссылок
Отступы вокруг контента
Упражнение
Как Вам уже известно, между открывающим тегом <body> и закрывающим тегом </body> помещается тело страницы или само содержимое страницы. Его еще называют словом контент (от англ. content - содержимое).
Параметры тега <body> определяют свойства контента в целом. В этом уроке мы и рассмотрим некоторые из них.
Цвет текста
Цвет текста всего документа определяется параметром text. Ему присваивается либо название цвета, либо шестнадцатеричное значение цвета, как и параметру color тега <font> (см. Урок 2. Форматирование теста):
<body text="#FF0000"> или <body text="red">
В результате использования этого примера весь текст на странице будет красным.
Параметр text не является обязательным. Если его опустить, то текст на странице по умолчанию будет черным. Вы, наверное, уже успели в этом убедиться, выполняя предыдущие упражнения. :)
Цвет фона
Цвет фона страницы определяется параметром bgcolor. Он принимает значениями либо название цвета, либо шестнадцатеричное значение цвета, как и параметр text.
<body bgcolor="#FF0000"> или <body bgcolor="red">
В результате использования этого примера фон страницы будет красным.
Параметр bgcolor не является обязательным. Если его опустить, то фон страницы по умолчанию будет белым. В чем Вы тоже уже убедились, выполняя предыдущие упражнения. :)
Фоновое изображение
С помощью параметра background можно сделать, чтобы у странички был не однотонный фон, а фоном было бы изображение. Для этого параметру background надо присвоить путь к изображению, которое Вы хотите сделать фоновым, так же как параметру src тега <img> (См. Урок 5. Изображения):
<body background="img/fon.png">
Таким способом можно, например, замостить фон странички каким-нибудь узором. Но не стоит злоупотреблять этой возможностью и делать фоном большие изображения, чтобы слишком не утяжелять страницу.
Например, ну нас есть вот такой фрагмент узора: 
Если мы сделаем его фоновым изображением, получится страничка с таким фоном:
Параметр background также не является обязательным. Если его опустить, то фон страницы по умолчанию будет белым.
Цвет ссылок
Для задания цвета ссылок существуют 3 параметра тега body:
link - цвет ссылки в первоначальном состоянии;
alink - цвет активной ссылки (active link), т.е. в момент нажатия;
vlink - цвет посещенной ссылки (visited link).
Этим параметрам присваивается название цвета или его шестнадцатеричное значение аналогично другим параметрам, отвечающим за цвет чего-либо.
Например, пусть ссылки будут красные, активные ссылки - синие, посещенные ссылки - зеленые:
<body link="#FF0000" alink="#0000FF" vlink="#00FF00">
Вот как это будет выглядеть на странице (чтобы увидеть все состояния ссылки, запомните, какой она была изначально, нажмите и, не отпуская, посмотрите, какой она стала, и , наконец, отпустите, вернитесь на эту страницу, и посмотрите, какого она цвета):
Ссылка
Эти параметры не обязательные. Если их опустить, то цвета ссылок примут значения по умолчанию (синий, красный, фиолетовый соответственно).
Отступы вокруг контента
Если Вы хотите, чтобы содержимое страницы отступало от краев окна браузера на некоторую величину, на этот случай у тега body есть 4 параметра:
leftmargin - отступ от левого края;
rightmargin - отступ от правого края;
topmargin - отступ от верхнего края;
bottommargin - отступ от нижнего края.
Эти параметры принимают значение в пикселах. Они не обязательные, и можно использавать как все сразу так и поотдельности. Например, можно сделать отступы только слева и справа, или только сверху и снизу и т.д.:
<body leftmargin="30" rightmargin="30"> или <body topmargin="30" bottommargin="30">
7.Ссылки
Как сделать текст ссылкой
Как сделать изображение ссылкой
Цвет ссылок
Ссылки внутри страницы
Ссылка на новое окно
Ссылки во фреймах
Ссылка на адрес электронной почты
Упражнение
Как сделать текст ссылкой
Для создания ссылки используется парный тег <a>. Чтобы сделать текст ссылкой, нужно поместить его между тегами <a> и </a> и указать, куда ведет эта ссылка, т.е. адрес документа, где мы окажемся после нажатия на ссылку. Для этого нужно параметру href тега a присвоить адрес документа. Адрес документа, на который мы ссылаемся, называется адрес ссылки.
Вот, например:
<a href="http://www.mysite.com/about/1.html">Текст ссылки</a>
Такая строчка означает, что при нажатии на фразу Текст ссылки мы перейдем на страничку 1.html, которая лежит в каталоге about сайта http://www.mysite.com.
http://www.mysite.com/
about/
1.html
Адрес ссылки может быть абсолютным или относительным. В приведенном выше примере мы использовали абсолютный адрес, т.е. полный путь до документа 1.html. Относительный адрес - путь к документу, составленный относительно текущего документа. Приведем примеры использования относительных адресов.
Пример 1:
<a href="1.html">Пример 1</a>
Такая строчка означает, что при нажатии на фразу Пример 1 мы перейдем на страничку 1.html, которая лежит в том же каталоге, что и текущий документ.
текущий каталог/ текущий документ
1.html
Пример 2:
<a href="about/1.html">Пример 2</a> или <a href="/about/1.html">Пример 2</a>
Обе эти строчки означают, что в каталоге, где лежит текущий документ, есть подкаталог about, в котором лежит страничка 1.html, на которую мы перейдем при нажатии на фразу Пример 2.
текущий каталог/ about/
1.html
текущий документ
Пример 3:
<a href="../1.html">Пример 3</a>