Основы html. Часть 2. Цвет, ссылки, изображения

Продолжаем знакомиться с основами html. В этой статье я расскажу о том, как на веб-страницу добавлять ссылки, картинки и менять цвет текста.

Продолжаем знакомиться с основами html. В этой статье я расскажу о том, как на веб-страницу добавлять ссылки, картинки и менять цвет текста.

Чтобы придать тексту цвет, используйте тег <font color=»# «> </font>. После решетки нужно указать цифровой RGB код нужного цвета. Таблицу основных веб-цветов можно посмотреть здесь. Так же можно использовать английское название основных цветов.

<html>
<head>
<title>Моя первая страница</title>
</head>
<body >
<p >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, дарящий много радости, подарков и сюрпризов. </p>
</body>
</html>

Чтобы придать тексту цвет, используйте тег <font color=

А теперь изменим цвет фона страницы. Для этого внутри тега <body> добавим признак bgcolor=» «. В кавычках ставим код нужного цвета. Пользуясь таблицей веб-цветов поэкспериментируйте с цветом фона и текста.

<body bgcolor=»#C6EBEC»>
<p >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, дарящий много радости, подарков и сюрпризов. </p>
<p >Пусть наступающий год Кролика подарит Вам много «капусты», принесет счастья, успеха и достаток. </p>
</body>

изменим цвет фона страницы

А теперь изменим цвет фона страницы. Для этого внутри тега <body> добавим признак bgcolor=» «. В кавычках ставим код нужного цвета. Пользуясь таблицей веб-цветов поэкспериментируйте с цветом фона и текста.

<body bgcolor=»#C6EBEC»>
<p >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, дарящий много радости, подарков и сюрпризов. </p>
<p >Пусть наступающий год Кролика подарит Вам много «капусты», принесет счастья, успеха и достаток. </p>
</body>

изменим цвет фона страницы

Современную вебстраничку нельзя представить без различных изображений. Давайте и мы добавим на свою страничку пару изображений. Для этого положите нужные фотографии в папку, в которой Вы сохранили свою страничку. Теперь пишем <img src=»название фото » />. Обратите внимание, что название фото нужно указывать с расширением. Закрывающего тега не нужно.

<body bgcolor=»#C6EBEC»>
<p ><img src=»medved2.gif» >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, дарящий много радости, подарков и сюрпризов. </p>
<p >Пусть наступающий год Кролика подарит Вам много «капусты», принесет счастья, успеха и достаток. </p>
</body>

добавим на свою страничку пару изображений.

Фото появилось, но текст не красиво обтекает его. Сделаем выравнивание для фото по левому краю align=»left»

<p ><img src=»medved2.gif» align=»left» >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, дарящий много радости, подарков и сюрпризов. </p>
<p >Пусть наступающий год Кролика подарит Вам много «капусты», принесет счастья, успеха и достаток. </p>

Сделаем выравнивание для фото по левому краю

Фото появилось, но текст не красиво обтекает его. Сделаем выравнивание для фото по левому краю align=»left»

<p ><img src=»medved2.gif» align=»left» >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, дарящий много радости, подарков и сюрпризов. </p>
<p >Пусть наступающий год Кролика подарит Вам много «капусты», принесет счастья, успеха и достаток. </p>

Сделаем выравнивание для фото по левому краю

Совсем другое дело. Соответственно, чтобы выровнять изображение по правому краю, нужно подставить align=»right», например вот так:

<body bgcolor=»#C6EBEC»>
<p ><img src=»medved2.gif» align=»left» ><img src=»medved1.gif» align=»right» >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, дарящий много радости, подарков и сюрпризов. </p>
<p >Пусть наступающий год Кролика подарит Вам много «капусты», принесет счастья, успеха и достаток. </p>
</body>

чтобы выровнять изображение по правому краю, нужно подставить align=

У меня в примере используются анимированные картинки с прозрачным фоном, поэтому здесь не видно, что текст вплотную подходит к изображениям. Если Вы вставили jpeg-картинку, то наверняка это заметили. Чтобы увеличить отступы текста от изображения используйте признаки hspace=» « (отступ по горизонтали) и vspace=» » (отступ по вертикали ). В кавычках укажите числовое значение в пикселях. У меня в примере горизонтальный отступ равен 10 пикселям.

<p ><img src=»medved2.gif» hspace=»10″ align=»left» ><img src=»medved1.gif» hspace=»10″ align=»right» >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, дарящий много радости, подарков и сюрпризов. </p>

Изображение не обязательно должно лежать рядом с html-файлом. В таком случае нужно прописать путь к нему, например так:

<img src=»Photoshop/lesson/medved1.gif» hspace=»10″ align=»left» />

<img src=»http://www.work-navigator.ru/images/banners/work-navigator1.gif» />

Как видите, картинка может лежать не только в другой папке на Вашем компьютере, но и быть размещена где-нибудь в Интернете. Нужно только знать и прописать правильно ее адрес. Сделайте еще одну страницу с приведенным ниже кодом и увидите страницу, которую я делал в примере.

<title>Моя первая страница</title>
</head>
<body bgcolor=»#C6EBEC»>
<p ><img src=»http://work-navigator.ru/images/stories/html/medved2.gif» hspace=»10″ align=»left» ><img src=»http://work-navigator.ru/images/stories/html/medved1.gif» hspace=»10″ align=»right» >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, дарящий много радости, подарков и сюрпризов. </p>
<p >Пусть наступающий год Кролика подарит Вам много «капусты», принесет счастья, успеха и достаток. </p>
</body>
</html>

Познакомлю Вас еще с несколькими атрибутами тега <img src = » «/> . Это alt=» « и title=» «— описание картинки; width=» « и height=» « — ширина и высота картинки в пикселях. Если в браузере навести мышку на картинку, то появится текст, написанный в title=» » . Текст, написанный в alt=» «отображается, если в браузере отключено отображение изображений, так что не ленитесь и заполняйте эти теги. Размеры изображения также рекомендуется указывать, причем если Вы укажите размеры больше реальных (например картинка 150х100, а Вы указали 300х200), то и в браузере она увеличится.

<p ><img src=»http://work-navigator.ru/images/stories/html/medved2.gif» title=»с новым годом» alt=»с новым годом» width=»100″ height=»120″ hspace=»10″ align=»left» ><img src=»http://work-navigator.ru/images/stories/html/medved1.gif» hspace=»10″ align=»right» >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, дарящий много радости, подарков и сюрпризов. </p>
<p >Пусть наступающий год Кролика подарит Вам много «капусты», принесет счастья, успеха и достаток. </p>

Если в браузере навести мышку на картинку, то появится текст, написанный в title=

У меня в примере используются анимированные картинки с прозрачным фоном, поэтому здесь не видно, что текст вплотную подходит к изображениям. Если Вы вставили jpeg-картинку, то наверняка это заметили. Чтобы увеличить отступы текста от изображения используйте признаки hspace=» « (отступ по горизонтали) и vspace=» » (отступ по вертикали ). В кавычках укажите числовое значение в пикселях. У меня в примере горизонтальный отступ равен 10 пикселям.

<p ><img src=»medved2.gif» hspace=»10″ align=»left» ><img src=»medved1.gif» hspace=»10″ align=»right» >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, дарящий много радости, подарков и сюрпризов. </p>

Изображение не обязательно должно лежать рядом с html-файлом. В таком случае нужно прописать путь к нему, например так:

<img src=»Photoshop/lesson/medved1.gif» hspace=»10″ align=»left» />

<img src=»http://www.work-navigator.ru/images/banners/work-navigator1.gif» />

Как видите, картинка может лежать не только в другой папке на Вашем компьютере, но и быть размещена где-нибудь в Интернете. Нужно только знать и прописать правильно ее адрес. Сделайте еще одну страницу с приведенным ниже кодом и увидите страницу, которую я делал в примере.

<title>Моя первая страница</title>
</head>
<body bgcolor=»#C6EBEC»>
<p ><img src=»http://work-navigator.ru/images/stories/html/medved2.gif» hspace=»10″ align=»left» ><img src=»http://work-navigator.ru/images/stories/html/medved1.gif» hspace=»10″ align=»right» >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, дарящий много радости, подарков и сюрпризов. </p>
<p >Пусть наступающий год Кролика подарит Вам много «капусты», принесет счастья, успеха и достаток. </p>
</body>
</html>

Познакомлю Вас еще с несколькими атрибутами тега <img src = » «/> . Это alt=» « и title=» «— описание картинки; width=» « и height=» « — ширина и высота картинки в пикселях. Если в браузере навести мышку на картинку, то появится текст, написанный в title=» » . Текст, написанный в alt=» «отображается, если в браузере отключено отображение изображений, так что не ленитесь и заполняйте эти теги. Размеры изображения также рекомендуется указывать, причем если Вы укажите размеры больше реальных (например картинка 150х100, а Вы указали 300х200), то и в браузере она увеличится.

<p ><img src=»http://work-navigator.ru/images/stories/html/medved2.gif» title=»с новым годом» alt=»с новым годом» width=»100″ height=»120″ hspace=»10″ align=»left» ><img src=»http://work-navigator.ru/images/stories/html/medved1.gif» hspace=»10″ align=»right» >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, дарящий много радости, подарков и сюрпризов. </p>
<p >Пусть наступающий год Кролика подарит Вам много «капусты», принесет счастья, успеха и достаток. </p>

Если в браузере навести мышку на картинку, то появится текст, написанный в title=

Это еще не все. Можно использовать изображение как фон для своей веб-страницы. Для этого используют признак background=» «

<body background=»fon-ng.gif»>
<p ><img src=»http://work-navigator.ru/images/stories/html/medved2.gif» hspace=»10″ align=»left» ><img src=»http://work-navigator.ru/images/stories/html/medved1.gif» hspace=»10″ align=»right» >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, дарящий много радости, подарков и сюрпризов. </p>
<p >Пусть наступающий год Кролика подарит Вам много «капусты», принесет счастья, успеха и достаток. </p>
</body>

Можно использовать изображение как фон для своей веб-страницы

Если Вы хотите поставить этот фон на свою страницу, то вот его адрес background=»http://work-navigator.ru/images/stories/html/fon-ng.gif»

Ну и конечно же, главная особенность вебстраниц — это возможность перехода с одной страницы на другую с помощью гиперссылок. Сссылки в вебстраницы вставляют с помощью тега <a href=» «> </ a>. В кавычках прописываете путь к странице, на которую надо перейти, а внутри тега размещается текст, при нажатиии на который происходит переход на эту страницу. Ссылки бывают внутренние, ведущие на другие страницы сайта, и внешние, ссылающиеся на другие сайты. Создайте еще одну страницу и сохраните рядом с первой (я назвал свою proba-1.html) и сделаем ссылку на нее.

<body background=»fon-ng.gif»>
<p ><img src=»medved2.gif» title=»с новым годом» alt=»с новым годом» width=»100″ height=»120″ hspace=»10″ align=»left» ><img src=»medved1.gif» hspace=»10″ align=»right» >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, <a href=»proba-1.html»>дарящий много радости</a>, подарков и сюрпризов. </p>
<p >Пусть наступающий год Кролика подарит Вам много «капусты», принесет счастья, успеха и достаток. </p>
</body>

Сссылки в вебстраницы вставляют с помощью тега a href=<p ><a href=»proba-1.html» title=»море счастья» target=»_blank»><img src=»medved2.gif» hspace=»10″ align=»left» ></a><img src=»medved1.gif» hspace=»10″ align=»right» >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, <a href=»proba-1.html» target=»_blank» >дарящий много радости</a>, подарков и сюрпризов. </p>

Если Вы хотите поставить этот фон на свою страницу, то вот его адрес background=»http://work-navigator.ru/images/stories/html/fon-ng.gif»

Ну и конечно же, главная особенность вебстраниц — это возможность перехода с одной страницы на другую с помощью гиперссылок. Сссылки в вебстраницы вставляют с помощью тега <a href=» «> </ a>. В кавычках прописываете путь к странице, на которую надо перейти, а внутри тега размещается текст, при нажатиии на который происходит переход на эту страницу. Ссылки бывают внутренние, ведущие на другие страницы сайта, и внешние, ссылающиеся на другие сайты. Создайте еще одну страницу и сохраните рядом с первой (я назвал свою proba-1.html) и сделаем ссылку на нее.

<body background=»fon-ng.gif»>
<p ><img src=»medved2.gif» title=»с новым годом» alt=»с новым годом» width=»100″ height=»120″ hspace=»10″ align=»left» ><img src=»medved1.gif» hspace=»10″ align=»right» >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, <a href=»proba-1.html»>дарящий много радости</a>, подарков и сюрпризов. </p>
<p >Пусть наступающий год Кролика подарит Вам много «капусты», принесет счастья, успеха и достаток. </p>
</body>

Сссылки в вебстраницы вставляют с помощью тега a href=<p ><a href=»proba-1.html» title=»море счастья» target=»_blank»><img src=»medved2.gif» hspace=»10″ align=»left» ></a><img src=»medved1.gif» hspace=»10″ align=»right» >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, <a href=»proba-1.html» target=»_blank» >дарящий много радости</a>, подарков и сюрпризов. </p>

Чтобы избавиться от рамочки, которая появилась вокруг картинки, используйте атрибут border=»0″ (размер границы)

<p ><a href=»proba-1.html» title=»море счастья» target=»_blank»><img src=»medved2.gif» border=»0″ hspace=»10″ align=»left» ></a><img src=»medved1.gif» hspace=»10″ align=»right» >Скоро <font color=»red»>Новый год</font>, <font color=»#0000FF»>самый лучший праздник</font>, <a href=»proba-1.html» target=»_blank» >дарящий много радости</a>, подарков и сюрпризов. </p>

Чтобы избавиться от рамочки, которая появилась вокруг картинки, используйте атрибут border (размер границы)

Я Вам показал лишь малую часть возможностей языка html. Изучить его в совершенстве Вам поможет Базовый курс по обучению языку HTML и CSS

Наверх

Понравилась статья? Поделиться с друзьями:

Отправить ответ

Оставьте первый комментарий!

Уведомить
avatar
wpDiscuz