А как можно изображение сделать ссылкой?

Для этого просто вместо текста ссылки, вставляете изображение. Вот например:

<a href="http://www.zvirec.com">
<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>

Результат в браузере:

Ничего сложного нет. Эксперементируйте, практикуйтесь и все получится!


Разберемся с таблицами в html

Html таблицы - полезная штука . Обычно их используют не только для отображения таблиц как таковых, но и для создания невидимого каркаса страницы, помогающего расположить текст и изображения должным образом. Раньше все сайты имели табличную структуру, сейчас все большую популярность приобретает структура на дивах (с помощью <div> и CSS ). Вот классический пример табличной структуры:

Шапка сайта(логотип и все такое)
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4
Ссылка 5
Основное содержание Реклама и все такое
Блок копирайта

Давайте разбираться как построить простейшую таблицу. Для этого нам понадобятся как минимум три элемента .

TABLE - Элемент для создания html таблицы. Обязательно должен иметь начальный и конечный теги. По умолчанию html таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Сразу скажу, что здесь есть атрибут BORDERкоторый задает толщину рамки таблицы в пикселах.

TR (Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен.

TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.

Давайте попробуем создать таблицу из двух рядов и двух столбцов:

<table border="1">
<tr>
<td>ряд 1 ячейка1</td> <td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

Вот как это будет выглядеть в браузере:

ряд 1 ячейка1 ряд1 ячейка2
ряд 2 ячейка 1 ряд 2 ячейка 2

Разобрались? Т.е. таблица начинается с <table>, затем идёт <tr>, указывающий на начало нового ряда. В ряду вставлены две ячейки: <td>ряд 1 ячейка1</td> и <td>ряд1 ячейка2</td>. Ряд закрывается </tr>, и сразу начинается новый ряд <tr>. В новом ряду также две ячейки. Таблица закрывается </table>. Все довольно логично









Дата добавления: 2015-03-26; просмотров: 1034; ЗАКАЗАТЬ НАПИСАНИЕ РАБОТЫ


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию, введите в поисковое поле ключевые слова и изучайте нужную вам информацию.

Поделитесь с друзьями:

Если вам понравился данный ресурс вы можете рассказать о нем друзьям. Сделать это можно через соц. кнопки выше.
helpiks.org - Хелпикс.Орг - 2014-2021 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.008 сек.