Сайты - строим сами
Сайты - строим сами |
| Главная | Введение | Основы HТМЛ | Формат и цвет | Картинки и ссылки | Таблицы | Фреймы | Основы CSS |
|---|
| Вёрстка сайта | Формы в html |
|---|
Для внедрения картинок на страницу используется тег <img> с обязательным атрибутом src, который указывает URL (адрес) по которому эта картинка находится. С адресом нужно разбираться подробно.
Чем и займемся. Код будет выглядеть вот так: <img src="01.jpg"> где 01 имя картинки, а jpg расширение файла, один из графических форматов допускаемый в HTML. Кроме того поддерживаются jpeg, gif, png. А всё то, что в кавычках, является адресом. Но так адрес будет выглядеть только если картинка находится в той же папке (каталоге), что и Ваша страница.
Вообще грамотно будет создать в рабочем каталоге (папке где Ваша страница, или страницы сайта) папку picture, и в неё поместить все графические файлы. Тогда код такой:
<img src="picture/01.jpg"> .
Если картинка на уровень выше, тогда это выглядит так: <img src="../01.jpg"> . Если же картинка лежит где то далеко в стороне,и переместить или скопировать поближе её нельзя, то значит не повезло и придется прописывать полный путь к ней. Например: <img src="C:\Documents and Settings\All Users\Документы\Мои рисунки/01.jpg">
Или, к примеру, файл который Вам нужен находится на другом сайте, путь опять же (а кому легко) прописывается полностью:
<img src="http://img-fotki.yandex.ru/get/3/zhanna-konst.2/NLO.jpg"> .
Просто скопировать рисунок не всегда удобно.К примеру Вы решили разместить у себя на сайте фотографию дня, а добывать её, на тематическом сайте, где есть такая рубрика. Будет проще прописать полный путь, чем каждый день копировать новую фотографию. Могут быть другие варианты, но суть я думаю понятна.
Атрибутов довольно много, поэтому я решил выделить для них отдельный подзаголовок. Кроме обязательного src, который определяет путь к файлу, есть еще: align, который выравнивает рисунок и может принимать значения:
Далее атрибут alt, задает надпись которая появляется при наведении курсора на картинку. Рекомендуется этот атрибут использовать всегда, на тот случай, когда графика в браузере отключена. В этом случае посетитель страницы будет видеть хотя бы тему рисунка, ну или что Вы там напишите.
border Устанавливает толщину рамки вокруг картинки, по умолчанию рамка отсутствует.
hspace и vspace отделяет текст от изображения, определяет размер свободного пространства, первый атрибут слева и справа, второй сверху и снизу. Размер определяется в пикселях. Пиксель это точка, самая малая единица. Например, разрешение монитора (обычно 15-ти дюймового) 800 пиксилей в ширину и 600 пикселей в высоту, 800х600.
width ширина и height высота картинки, в пикселях или процентах, наличие этих параметров ускоряет загрузку картинки браузером. Тут есть один момент. Чем больше натуральный размер
картинки, тем больше она "весит" в Kbt-тах, тем дольше грузится. Если вы с помощью вышеназваных атрибутов зададите маленький размер на странице, большой картинке, "вес" её никуда не денется, и грузиться она всё равно будет долго.
Уменьшать изображение в этом случае нужно при помощи графических редакторов или специальных программ. Размеры графических файлов, при высоком разрешении, могут достигать десятков Mbt, поэтому прежде чем поместить изображение на веб страницу, обязательно проверьте этот момент. Иначе посетители будут уходить от Вас, не дождавшись окончания загрузки Вашей страницы.
Теперь попробуйте вставить картинку сами. Найдите подходящее изображение, или скопируйте моё прямо отсюда, щелкнув на нём правой кнопкой мыши. В появившемся контекстном меню выберите пункт "сохранить рисунок как..." и сохраните его как 01.jpg, в той же папке где находится Ваша страница. Далее код:
<img src="01.jpg" align="right" alt="Напишите сами, что хотите" hspace="40" width="200">
Посмотрите, что получилось, с таким параметром width="200" картинка будет примерно в два раза меньше. Поэксперементируйте сами с размером, растоянием до текста, попробуйте добавить рамку. Одним словом больше практики.
Вариант a на примере Картинка нажимите и сразу на картинке, в верхней части этой страницы. Можно в начале страницы поместить содержание, а потом нажимая на пункты этого содержания, сразу попадать на нужный текст. Вобщем мне эта штука очень нравится. Делается это так: сначала в том месте, на которое надо перейти помещается закладка.
<a name="ups"> </a> в таком виде, она на странице не видна, хотите, чтобы было видно поместите, текст сюда > < вот только зачем? А в то место с которого надо перейти помещается ссылка:
<a href="#ups"> Переход на ups</a> Чтобы перейти на другую страницу на этом же сайте (при условии, что страницы находятся в одной папке) ссылка будет выглядеть так:
<a href="index.html">Главная</a> переход на главную страницу, можете нажать Главная Только потом придется возвращаться. Если нужно перейти в определенное место другой страницы, сначала помещаете закладку там, а потом даете на неё ссылку.
<a href="03.html#ups1"> Переход на описание размера шрифта</a> Переход на описание размера шрифта Всё просто, легко и удобно. Это я, как вы догадались, я описал вариант b .
И, наконец, вариант c . Просто помещаете в кавычки адрес Интернета, а между значками больше-меньше > < помещаете название ресурса, у которого этот адрес.
<a href="http://yandex.ru"> <font size="5"> <font color="red">Я</font;>ndex</font></a> Получается так: Яndex Щелкните или кликните, если так привычней, по ссылке, попадете на Яндекс (откроется в другом окне).
Таким же образом можно открыть файл, который находится на своем компьютере или в сети. Для этого в кавычках надо задать полный путь, указать имя файла и расширение. Попробуйте создать на диске C текстовый файл, назовите его как нибудь попроще, скажем 00.txt, и введите в него какую нибудь фразу. Скажем: Проверка ссылки удалась. Иначе говоря откройте блокнот, забейте указанную фразу, в меню файл нажмите сохранить, в появившемся окне выберите диск С, дайте имя 00 и всё. Теперь изготовим ссылку, код такой:
<a href="file://localhost/C:/00.txt"> <font size="2" color="blue">Открыть текстовый файл</font></a>
Открыть текстовый файл Файл может быть не только текстовый, тогда будет другое расширение, но это потом, как нибудь.
Специальная ссылка для вызова программы электронной почты, выглядит так:
<a href="mailto:xxxxx@mail"> Пишите</a>, где xxxxx@mail адрес электронной почты на который Вы предлагаете написать посетителю вашей странички. Можно даже сделать заготовку письма, так, что посетителю останется только отправить его. Например:
"Напишите мне"
И последнее о чем хочу сказать, прежде, чем закрыть тему как картинку сделать ссылкой. Для этого надо подставить картинку в то место, где обычно задаем название ссылки.
<a href="#ups"><img border="0" src="01.jpg" width="100" title="Перейти на картинку"></a>
И вот, что получается:
В обязательном порядке нужно прописывать атрибут border="0" если не хотите чтобы появилась рамка того цвета, который у Вас на странице определен для ссылок.
Кстати, делается это, довольно просто, в теге <body>.
Код выглядит следующим образом:
<body link="#ffffff" vlink="#000000" alink="#9688B4">
Здесь link - цвет ссылки, vlink - цвет посещенной ссылки, alink - цвет активной ссылки при наведении на неё курсора. Правда не во всех браузерах это работает правильно.
Вот пожалуй пока и все по картинкам и ссылкам. И опять хочу напомнить, больше практики. Даже нет, вот так:
Собирался на этом тему закрыть, однако нужно продолжить. Поисковые запросы, по которым посетители приходят на сайт, подсказали мне, что один важный момент из темы картинок и ссылок я упустил. Спешу это исправить.
То есть понимаете, о чём речь. Кликая на разные области одного рисунка переходишь по разным адресам. Обычно это используется в графическом меню. Панель переходов со всеми кнопками рисуется, допустим в фотошопе, а затем размещается на веб-странице. В коде html указывается на какие области делится рисунок и задаётся персональная ссылка для каждой области. Но изначально это было задумано для географических карт, поэтому тег-контейнер который для этого используется, называется: <map>, то есть по английски карта.
У тега <map> имеется атрибут name, который задаёт имя рисунка, для этого тега. Имя придумываете сами и помещаете в код вставки рисунка с помощью атрибута usemap. Например:
< img src="picture/graf_menu.jpg" usemap="#gm">
Затем используете его непосредственно в тег-контейнере.
<map name="gm">
Эта строка открывает тег-контейнер <map>, внутри которого используется тег <area>, по английски область, зона - ареал одним словом. На нём мы остановимся более подробно.
Это основные атрибуты тега <area>, остальные нужны постольку поскольку, если вам понадобятся вы их легко найдёте с помощью поисковика. И теперь, как это будет выглядеть в целом.
<img src="picture/graf_menu.jpg"usemap="#gm">
<map name="gm">
<area shape="rect" coords="10,10,100,90" href="http://zdorovya-obraz.ru" target="_blank" alt="Сайт о здоровье">
<area coords="130,10,230,90" href="http://www.bogateem-vmeste.ru" target="_blank" alt="Сайт о заработке">
<area coords="250,10,350,90" href="http://yandex.ru" target="_blank" alt="Поиск">
</map>
Обратите внимание атрибут >shape со значением rect(прямоугольная область), я использовал только один раз, но можно было и этого не делать, это значение по умолчанию. И ещё, начало координат в левом верхнем углу. По X координата увеличивается вправо, по Y - вниз. И вот на этом, пожалуй, тему можно будет считать закрытой.
