Изображения в html-документе
Чтобы добавить изображение в HTML- документ, существует тег <IMG>
Он имеет ряд атрибутов:
Src= “Название_документа.расширение” определяет адрес расположения картинки.
Height=высота (в пикселях)
Widht=ширина (также в пикселях)
Высоту и ширину указывать необязательно, тем не менее, это является хорошим тоном веб-программирования, поскольку в последствии это может значительно облегчить верстку страницы.
Добавляем изображение:
Шаг 1. Выбор изображения.
D:\pictures\london.jpg
Шаг 2. Определение параметров.
|
Способ 1
|
Способ 2
|
Как видно из рисунков ширина нашего изображения: 179 пикселей, высота: 207
Шаг 3. Создание страницы с изображением.
Копируем наше изображение в папку со страницей и прописываем следующий фрагмент кода:
<img src="london.jpg” width=179 height=207>
Если возможности скопировать нет, тогда нужно прописать адрес полностью:
<img src="D:/pictures/london.jpg” width=179 height=207>
Создание заголовка.
<Hi>…</Hi> - тег заголовка (где i – числовое значение от 1 до 6)
Пример использования заголовка Hi:
|
<H1>заголовокi=1</H1>
<H2>заголовокi=2</H2>
<H3>заголовокi=3</H3>
<H4>заголовокi=4</H4> <H5>заголовокi=5</H5>
<H6>заголовокi=6</H6>
|
|
Также заголовок можно выровнять на странице
Для этого существует атрибут:align=
Его возможные значения:
left – по левому краю
center - по центру
right - по правому краю
justify- по ширине страницы (поддреживается не всеми версиями браузеров)
Примеры выравнивания:
<H3align=left>заголовок. выравнивание по левому краю</H3>
<H3align=center>заголовок. выравнивание центру</H3>
<H3align=right>заголовок. выравнивание по правому краю</H3>
<H3align=justify>заголовок. выравнивание по ширине страницы</H3>
Работа со шрифтом.
<Basefont> - элемент, в котором указываются базовые значения шрифта документа, располагается он сразу после <Body> перед содержанием документа.
Атрибуты <Basefont>:
face=“…” определяет используемые шрифты (Arial,MScomicsansи др.).
Названия шрифтов обязательнодолжны писаться в кавычках, чтобы браузер корректно их отображал: face=“шрифт1, шрифт2, …”
size= - определяет размер основного шрифта документа (значения от 1 до 7)
color= цвет основного текстового документа.
<Font>…</Font> - Данный элемент изменяет начертание, размер, а так же цвет шрифта, оказавшегося внутри этого контейнера. Атрибуты те же, что и у <Basefont>.
Однако, если нам уже заданы параметры размера шрифта, здесь его можно изменить задавая значения от -2 , +2, -1… и т.д. это означает увеличить или уменьшить шрифт на 1 или 2 единицы относительно основного шрифта.
Пример использования атрибутов basefont и font:
<basefont face="Verdana, times new roman" size=5 >
основной текст, зависящий от атрибутов Basefont
<font face="times new roman" size=-1 color=red>
текст внутри контейнера Font
</font>
<br>
далее основной текст
Вот так это выглядит в обозревателе:
Физические стили текста
<i>..</i> - курсив
<b>..</b> - полужирный шрифт
<u>..</u> - подчеркивание
<s>..</s> - зачеркнутый текст
<big>..</big> - увеличенный относительно текущего
<small>..</small> - уменьшенный относительно текущего
<sup>..</sup> - «верхний индекс»
<sub>..</sub> - «нижний индекс»
Пример использования
текст <i>курсив</i>
текст
<b>полужирный шрифт </b>
текст <u>подчеркивание</u>
текст <s>зачеркнутый текст</s>
текст <big>увеличенный относительно текущего</big>
текст <small>уменьшенный относительно текущего </small>
текст <sup>«верхний индекс»</sup>
текст <sub>«нижний индекс»</sub>