В первую очередь давайте поговорим о ссылках - переходах с одной страницы на другую. Ссылки это базовый элемент без которого невозможно представить интернет.
Создать html ссылку очень просто. Для этого используется простенький элемент с одним атрибутом. Ну вот например:
<a href="http://www.1inform.ucoz.ru">Это ссылка на сайт 1inform.ucoz.ru </a>
будет выглядеть в браузере:
Это ссылка на сайт 1inform.ucoz.ru
Элемент а (ancor) является как бы якорем, т.е. текст, заключенный между открывающим <a> и закрывающим </a> тегом , будет текстом ссылки.
Атрибут href это сокращение от "hypertext reference/гипертекстовая ссылка", специфирует место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.
Если нужно сделать ссылку между собственными страницами?
Сделать html ссылку между страницами одного и того же веб-сайта гораздо проще. Например, если у нас есть две страницы(к примеру page1.htm и page2.htm) расположенные в одной папке , то код ссылки с page1 на page2 будет выглядеть так:
<a href="page2.htm"> Для перехода на page2 щелкни здесь! </a>
Т.е. надо просто написать название страницы, на которую мы хотим перейти.
Eсли страница page 2 находится в подпапке "subfolder", код ссылки выглядит так:
<a href="subfolder/page2.htm"> Для перехода на page2 щелкни здесь!</a>
Так будет выглядеть код html ссылки со страницы page 2 на page1(в обратную сторону):
<a href="../page1.htm"> Для перехода на page1 щелкни здесь! </a>
Т.е. сочетание "../" указывает как бы на папку, расположенную на один уровень выше от данной позиции файла, с которого делается ссылка.
А если надо сделать ссылку внутри страницы?
Бывают случаи когда необходимо сделать ссылку с начала страницы в конец или наоборот, или к примеру с оглавления на главы и.т.д. Сделать ее очень просто! Необходимо пометить место документа следующей конструкцией:
<!-- этот способ используется при маркировании заголовков -->
<h2 id="razdel1">Раздел 1</h2>
<!-- а такую метку можно поставить везде где понадобится-->
<h2> <a name="razdel1"></a> Раздел1: </h2>
Теперь вы можете ссылаться на помеченную область(в данном случае Раздел1) простым указанием ее имени после значка #.
Вот как будет выглядеть ссылка на раздел1:
<a href="#razdel1"> Ссылка на Раздел 1 </a>
Приведу более наглядный пример:
<h1 > Оглавление </h1> <br>
<a href="#razdel1">Раздел 1: как выглядеть хорошо</a> <br>
<a href="#razdel2">Раздел 2: как стать успешным</a><br>
<a href="#razdel3">Раздел 3: как быть в тонусе</a>
<h2 id="razdel1">Раздел 1: как выглядеть хорошо </h2>
<p> Для того, чтобы выглядеть хорошо необходимо очень много трудиться ..... </p>
<h2 id="razdel2">Раздел 2: как стать счастливым </h2>
<p>Для того чтобы быть успешным, нужно использовать каждую минуту...</p>
<h2>Раздел3:<a name="razdel3"></a> как быть здоровым</h2>
<p>Для того чтобы быть в тонусе нужно много заниматься физкультурой...</p>
Вот результат в браузере:
Для того чтобы выглядеть хорошо необходимо очень много трудится .....
Раздел 2: как быть успешнымДля того чтобы быть успешным, нужно использовать каждую минуту...
Раздел3: как быть в тонусеДля того чтобы быть в тонусе нужно много заниматься физкультурой...
А можно сделать ссылку на почту?
Конечно можно. Вот пример ссылки на е-mail сайта zvirec.com .
<a href="mailto:admin@1inform.ucoz.ru">Написать письмо админу zvirec.com</a>
В браузере будет выглядеть:
Написать админу 1inform.ucoz.ru
Как вы видите, используется mailto потом двоеточие и емаил получателя. При нажатии на ссылку запустится почтовая программа-клиент с заполненным полем имени получателя.
Парочка дополнительных атрибутов:
TARGET - указывает где открывать страницу на которую ведет html ссылка. По умолчанию она открывается в том же окне. Если хочется чтобы открывалась в новом, следует написать target ="_blank".
TITLE - указывает заголовок ссылки, который появляется при наведении на нее.
Смотрите пример:
<a href="http://www.1inform.ucoz.ru" target="_blank">
Это ссылка на сайт 1inform.ucoz.ru, откроется в новом окне
</a> <br> <br>
<a href="http://www.1inform.ucoz.ru" title="Учебник создания сайта ">
Эта - тоже на 1inform.ucoz.ru. При наведении появится заголовок.
</a>
Смотрите на результат:
Это ссылка на сайт 1inform.ucoz.ru откроется в новом окне
Эта тоже на 1inform.ucoz.ru.При наведении появится заголовок
Ну вот в принципе и всё. Можете сильно не зацикливаться, в программе Adobe Dreamweaver любая ссылка делается одним нажатием мышки. Главное для Вас, понять что к чему, а зазубривать не обязательно...
А можно ли изменить цвет ссылок?
Конечно можно. Чтобы изменять цвет ссылок во всем документе, существуют специальные атрибуты элемента BODY .
LINK - цвет просто ссылок.
ALINK(Active Link) - цвет активных ссылок (активная означает в момент нажатия на нее)
VLINK(Visited Link) - цвет уже посещенных ссылок
Все цвета задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
К примеру если при открытии тела документа, элементу body прописать:
<body link="red" vlink="green" alink="white">
то все ссылки в данном документе станут красными, уже посещенные ссылки станут зелеными а ссылки в момент нажатия будут белыми.
А если нужно чтобы в каком -то месте ссылка имела другой цвет? например по всему документу красные, а именно в одном месте зеленая?
Тогда нужно внутри html ссылки прописать уже знакомый элемент font с атрибутом цвета:
<a href="http://www.1inform.ucoz.ru"><font color="black">Черная ссылка</font></a>
Если сделать так, то данная ссылка будет черной.
Изображения - это неотъемлемая часть любого сайта в сети интернет. Они используются везде, поэтому давайте разберемся что к чему. Есть три типа файлов изображений, которые можно вставить на ваши страницы:
GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
Пара слов о форматах:
GIF - использует всего 256 цветов и соответственно лучше подходит для рисунков с малым кол-вом оттенков. Этот формат поддерживает прозрачность изображений.
JPEG - формат изображений, который использует до миллиона цветов. Обычно используется для фотографий и качественной графики(с огромным количеством оттенков).
PNG - сравнительно новый формат . По многим параметрам превосходит JPEG и GIF: миллионы цветов и эффективное сжатие. Также поддерживает прозрачность.
В каком формате брать изображения - дело Ваше, однако старайтесь добиться максимального качества при минимальном размере .
Вставить изображение на страницу очень просто. Вот пример если оно лежит в той же папке что и страница.
<img src="pchela.jpg">
В результате мы увидим:
Что нам понадобилось: элемент IMG не имеющий закрывающего тега и атрибут SRC (сокращение от source - положение) который указывает где находится изображение. Вы легко можете вставлять изображения, размещенные в других папках или на других сайтах. Просто укажите правильный путь (примерно так как при созданиии ссылок).
Вот еще несколько примеров с комментариями:
<!-- если бы изображение находилось в папке images -->
<img src="images/pchela.jpg">
<!-- если б находилось на сайте www.1inform.ucoz.ru -->
<img src="http://www.1inform.ucoz.ru/pchela.jpg">
<!-- если б находилось на сайте www.1inform.ucoz.ru в папке images -->
<img src="http://www.1inform.ucoz.ru/images/pchela.jpg">
Вот еще очень необходимые атрибуты:
ALIGN - определяет способ выравнивания картинки по горизонтали. Очень полезное свойство при обтекании картинки текстом. Обычно используют LEFT(выравнивание по левому краю, текст будет обтекать справа) и RIGHT(выравнивание по правому краю, текст обтекает слева) .Если на странице есть текст, то это обязательное свойство.
HSPACE и VSPACE - отступы в пикселях по горизонтали и по вертикали от картинки до других обьектов документа. Легко запомнить название если взять и просто перевести с английского. HSPACE - Horizontal Space - горизонтальный отступ и VSPACE - Vertical Space - вертикальный отступ.
HEIGHT и WIDTH - высота и ширина изображения в пикселах. Золотое правило web-мастера – всегда явно задавать размеры картинки в атрибутах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах (или при подключении к сети через модем) это смотрится просто отвратительно. Но в принципе, можно и не задавать размеры, просто будет дольше загружаться. И еще, не советую Вам искажать реальные размеры картинки.
Ладно, лучше все смотреть на примерах:
<!-- первый пример с отступами и выравниванием по левому краю-->
<p align="justify"> <img src="pchela.jpg" width="65" height="59" hspace="15" vspace="15" align="left">
Любой Интернет бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза "научиться создавать сайты" будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты.</p>
<!-- второй пример с отступами и выравниванием по правому краю-->
<p align="justify"> <img src="pchela.jpg" width="65" height="59" hspace="15" vspace="15" align="right">
Любой Интернет бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза "научиться создавать сайты" будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты.</p>
<!--третий пример без отступов, с выравниванием по левому краю-->
<p align="justify"> <img src="pchela.jpg" width="65" height="59" align="left">
Любой Интернет бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза "научиться создавать сайты" будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты.</p>
Вот результат браузере:
А есть ещё атрибуты, которые нам необходимы?
Вот еще пара полезных атрибутов - ALT и TITLE .
ALT - определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения. Смотрите пример:
<img src="pchela1.jpg" alt="пчела мая!!!" width="65" height="59">
В результате увидим:
Как видите, я поменял название файла, и браузер не смог его найти, поэтому показал текст, который указан в атрибуте ALT .
TITLE - Определяет заголовок картинки, т.е. при наведении на картинку высветится надпись с текстом из атрибута title . Ну вот например:
<img src="pchela.jpg" width="65" height="59" title="Пчела мая!!! " >
Попробуйте навести указатель на изображение:
А как можно изображение сделать ссылкой?
Для этого просто вместо текста ссылки, вставляете изображение. Вот например:
<a href="http://www.1inform.ucoz.ru">
<img src="pchela.jpg" width="65" height="59" title="Пчела мая!!! "border="0" >
</a>
Вот результат:
Что еще за border="0" спросите Вы, а дело в том, что когда делаешь изображение ссылкой, вокруг него появляется некрасивая рамка(border) и чтобы ее убрать пишут дополнительный атрибут border .
Ну вот впринципе и все с изображениями, как видите ничего сложного нет.
Мы уже знаем как менять цвет текста, но для этого нам нужно было заключать его в теги font , а это не всегда удобно. Иногда, лучше задать цвет текста для всего документа. Также, можно задать и фоновое изображение.
Вот необходимые атрибуты:
BACKGROUND – определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.
BGCOLOR – определяет цвет фона документа.
TEXT – определяет цвет текста в документе.
Все они прописываются для элемента BODY. Значения цветов задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
Пример1:
<!-- задаем фоновый цвет и цвет текста -->
<body bgcolor="#FFF8D2" text="red">
<p> Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный </p>
<font color ="green">
<p> В этом абзаце текст будет зеленый, потому что мы заключили его в теги font и придали соответсвующий цвет </p>
</font>
<p> Теперь текст снова будет красный </p>
</body>
Результат в браузере:
Пример 2:
<!-- задаем фоновое изображение и цвет текста -->
<body background="fon.jpg" text="red">
<p> Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный </p>
<p>Теперь тут тоже красное и только <font color ="green"> эти слова зеленые </font>
</p>
<p> Тут как вы поняли текст тоже красный</p>
</body>
Результат в браузере:
Ничего сложного нет. Эксперементируйте, практикуйтесь и все получится!