Урок №7.

Урок 7.

Вставляем картинку в HTML файл.

Освоил(а) элементы форматирования текстов? Правда, это довольно просто? Сейчас повторим пройденный материал и начнём вставлять в HTML документы картинки.
<BIG>-Выделяет текст крупным шрифтом;
- Выводит полужирный шрифт;
- Выводит жирный текст;
, - Выводит текст курсивом;
- Выводит текст мелким шрифтом;
<TT>-Телеграфный текст (фиксированной ширины);
-Подчёркнутый шрифт;
<S>, <STRIKE>-Выводит перечёркнутый шрифт;
- Текст выводится в виде нижнего индекса;
- Верхний индекс.
 Все эти элементы являются контейнерами, атрибутов не имеют. Закрывающий ярлык обязателен. Пример синтаксиса: <BIG>… Буква, слово предложение, блок, страница (любой текст)….</BIG>
 - Этот элемент является контейнером. Задаёт параметры шрифта.
Атрибуты: SIZE – размер шрифта;
COLOR – цвет шрифта ;
FASE – тип шрифта.
Синтаксис:… Буква, слово предложение, блок, страница (любой текст)….
 Рассмотрим немного хитростей. Ты уже, наверное, в прошлом уроке заметил применение style. Так вот, если добавить в ярлык . То text-indent: 20 – сделает абзац, а margin-left: 20 и margin-right: 20 создадут отступы на 20 писклей от левого и правого края страницы. Значения можешь указывать по своему усмотрению.
 А вот ещё одна небольшая хитрость. Допиши в свой файл first.html следующую надпись:  Теперь спокойно можешь работать с любым текстом. Открой его в браузере. Вот так выделяются слова и предложения в текстах.
 Где  - элемент являющийся контейнером. Он используется для задания фрагменту условий форматирования.
Атрибуты: STYLE
Синтаксис: ..Форматируемый текст.. .
 Вот и всё, что необходимо знать об элементах форматирования текстов. Этого достаточно чтобы создавать сайты.
 А теперь будем учиться вставлять в html файл картинки. Для этого используется ярлык <img>. Изображение - по английски image ( образ), сокращённый вариант этого слова и используется в качестве HTML ярлыка. Начнём как всегда с примера. В папку MyWeb помести любую картинку с расширением GIF или JPG. В любом файле (в том числе и картинки) после названия указывается расширение. В web- странички в основном вставляются картинки именно с этими расширениями. Я помещаю картинку pic1.jpg где pic1-название файла (в данном случае картиники), а jpg-расширение. А тебе необходимо поместить любую свою картинку или фотографию с расширением GIF или JPG. Теперь открой блокнот или приобретённую программу HTML редактора и создай новый HTML файл. Между ярлыками <title></title> напиши "Вторая страница" , а в основном поле между ярлыками <body> и </ body> напиши следующее: <img src="pic1.jpg">. Сохрани созданный html файл как my2.html.
 Загрузи этот файл в браузере и ты увидешь в его окне свою картинку или фото.
 В ярлыке <img> можно задавать слудущие свойства
Атрибуты: src - URL- адрес файла (картинки, фото). Понятие URL- адреса рассмотрим позже;
alt- текст, который будет показан при наведении курсора на картинку и вместо картинки, если картинка не загружена. Такое происходит при отключении автоматической загрузки изображений в браузер;
align - параметр выравнивания (bottom - задаёт выравнивание по основной линии, т.е. нижний край рисунка будет располагаться по основной текущкй линии в тексте; middle - соответсвует выравниванию центра рисунка по середине вертикали от текущей базовой линии; top - соответствует выравниванию по верхней границе рисунка с учётом верхней границы текушего текста; left - по левому краю; right - по правому краю);
height - высота картинки в пикселях;
width - ширина картинки в пикселях;
border - ширина границы картинки в пикселях;
hspace - горизонтальный отступ картинки в пикселях от края основного поля;
vspace - вертикальный отступ картинки в пикселяхот края основного поля;
usemap - URL- адрес карты ссылок ( будем рассматривать позже).
Синтаксис:<img src="pic1.jpg" атрибуты >
 Рисунки можно использовать не только в качестве элементов, объектов страницы, но и ввиде фона, на котором будет расположена страница. Файл рисунка с фоном указывается в ярлыке <body>: <body background="pic2.jpg">, где pic2.jpg - URL- адрес файла картинки.
 А вот пример использования ярлыка <img> с применением основных атрибутов <img src="pic1.jpg" alt="Моя первая картинка" height="480" width="640" border="5" hspace="100" vspace="100" >
 Если в проводнике windows в левой колонке нажмёшь на папку со своими картинками, то в правой колонке ты увидешь свои картинки. Нажми на кнопку вид --> плитка и ты увидешь фактические размеры своей картинки в пикселях.
 А сейчас потренируйся вставлять картинки в html файлы. Вставь картинку, наниши какой нибудь текст и поэкспериментируй с установкой различных атрибутов ярлыка <img>. Только имей ввиду, что размеры картинки устанавливай либо фактические, либо уменьшай или увеличивай их пропорционально. Иначе будет искажение картинок.
 Советую создать файл о себе или о друзьях, увлечениях и т.п. Напиши текст, отредактируй его с использованием полученных знаний, подбери необходимую картинку и вставь её в файл. Продумай фон будущего сайта, подбери соответствующую картинку и вставь её в свой файл. Этот файл тебе пригодится для будущего сайта.
 В следующием выпуске поговорим о гиперссылках.

Удачи тебе.

А очередной бонус здесь- это сборник смайликов для сайтов.

Хостинг от uCoz