 |
Hspace— создает боковые поля (слева и справа).
|
|
|
|
Значения этих атрибутов указывается в пикселях. Например, если мы немного дополним предыдущий пример:
< img src="http://internetzarabotoc.front.ru/%F4%E0%E9%EB%FB/logo.jpg" align="left" vspace="5" hspace="10">Это мой аватар.
,то получим следующее:
Это мой аватар.
Вокруг изображений можно создать черную рамку с помощью атрибутаborder. Значение этого атрибута указывается в пикселях и определяет толщину рамки. Например,HTML-код:
< img src="http://internetzarabotoc.front.ru/%F4%E0%E9%EB%FB/logo.jpg" border="5">
в браузере выглядит так:
На этом раздел о тегахHTML, которые нужны для добавления картинок на страницы сайта можно считать завершенным. В следующем разделе поговорим о том, как создаются ссылки вHTMLи о том, как сделать их графическими гиперссылками.
Теги HTML для создания гиперссылок:
Главным признакомHTML-документа является наличие в нем гиперссылок (или просто ссылок) на другие документы, сайты, файлы, картинки и т.д. Именно возможность добавлять в страницы ссылки на объекты вне нее и сделала Интернет столь популярным и удобным для использования. Поэтому при создании своего сайта не забывайте про магию ссылок.
Между собой ссылки различаются на внешние и внутренние, а также на текстовые и графические. Внешние ссылки ведут за «пределы»html-страницы, внутренние на различные части этой же страницы. Текстовые ссылки представляют из себя текст, а графические, в качестве объекта, по которому нужно щелкнуть для перехода, содержат какое-либо изображение. Все эти разновидности ссылок создаются вHTMLс помощью тега< A>< /A>(сокращение от англ.anchor— якорь). Рассмотрим его поподробнее.
Для создания ссылки на другой документ (внешняя ссылка) служит атрибут тега< A> href. В качестве значения этот атрибут принимаетURL-адрес документа или имя файла, если файл расположен в этом же каталоге, в противном случае нужно указывать полный путь. Текст ссылки (его еще называют анкором) может быть как обычным текстом (текстовая ссылка), так и графическим изображением (графическая ссылка). Графическая ссылка создается вставкой тегаIMGмежду тегами< A>и< /A>. В общем, синтаксис создания ссылки выглядит так:
|
|
|
< a href="URL-адрес или имя файла">текст ссылки< /a>
Например, чтобы создать текстовую ссылку на главную страницу этого сайта, нужно написать следующийHTML-код:
< a href=" http://internetzarabotoc.front.ru/">Главная.< /a>
В браузере это будет выглядеть так: Главная.
Цвет текста ссылок можно изменить с помощью атрибутов тегаBODY. Вообще, к тексту ссылок можно применять все те же атрибуты форматирования, что и к основному тексту страницы, т.е. выделять жирным, курсивом, использовать заголовки и т.д.
Чтобы создать графическую ссылку, как я уже сказал выше, нужно вместо текста ссылки воспользоваться тегомIMG. Пример этой ссылки выглядит так:
< a href=" http://internetzarabotoc.front.ru/">< img src="http://internetzarabotoc.front.ru/%F4%E0%E9%EB%FB/%E3%EB%E0%E2%ED%E0%FF.jpg">< /a>
А браузер покажет:
Текстовые и графические ссылки можно комбинировать. Если написать:
< a href=" http://internetzarabotoc.front.ru/">< img src="http://internetzarabotoc.front.ru/%F4%E0%E9%EB%FB/%E3%EB%E0%E2%ED%E0%FF.jpg">< br>Главная страница< /a>
,то ссылкой будет как картинка, так и текст «Главная страница»:
Главная страница
Опять-таки по умолчанию браузер при переходе по ссылке открывает страницу в этом же окне. Чтобы изменить это используется атрибут тега< A> target. Он имеет следующие значения:
_blank— открывает страницу в новом окне;
_parent— загружает ссылку в родительском окне;
_self— по умолчанию. Открывает ссылку в этом же окне.
Это не все значения атрибутаtarget, но это самые основные. Пример использования этого атрибута:
|
|
|
< a href=" http://internetzarabotoc.front.ru/" target="_blank">Главная страница< /a>
В теге< A>можно также использовать атрибутtitle. С его помощью можно создать всплывающую при наведении мыши на ссылку подсказку
< a href=" http://internetzarabotoc.front.ru/" title="Перейти на главную страницу">Главная.< /a>
а браузер покажет: Главная.
Внутренние ссылки создаются по тому же принципу, что и внешние. Только в значении атрибутаhrefуказывается якорь ссылки. Якорь создается атрибутомname:
< a name="имя якоря">текст< /a>
Имя якоря задается произвольно. Тут стоит сказать, что не все браузеры понимают русские имена якорей, поэтому рекомендую использовать латиницу. Текст между тегами< A>и< /A>для создания якоря не обязателен и чаще всего не указывается.HTML-код внутренней ссылки будет выглядеть так:
< a href="#zagolovok">К заголовку< /a>
,а в браузере так:К заголовку
Сам якорь находится рядом с заголовком этой страницы, туда вы и попадёте, если щелкните по ссылке. Якорь, как вы и сами, наверное, догадались, имеет вид:
< a name="zagolovok">< /a>
Это все, что я могу вам рассказать о создании ссылок вHTML. И этот раздел можно объявлять законченным. Рекомендую еще раз пробежаться по предыдущим разделам, а затем создать полноценнуюHTML-страницу, посвященную чему душе угодно. После чего выложить ее на какой-нибудь бесплатный хостинг (конечно, если у вас есть платный хостинг, то на него) и уже полноценно полюбоваться на свой первый сайт. В общем почувствовать себя владельцем сайта. А затем, переходить к следующему разделу, в котором я расскажу вам о создании таблиц вHTML.
Создание таблиц в HTML:
ВHTMLтаблицы применяются не только привычным нам образом (как набор данных, распределенных по строкам и столбцам), но и для удобства размещения информации наhtml-странице. Проще говоря, можно представить всюhtml-страницу в виде таблицы и, например, поместить меню в ее левый столбец, основную информацию в средний столбец, а дополнительные ссылки в правый столбец. Количество столбцов и строк выбирается только вами и может быть любым.
Сама таблица вHTMLзадается тегами< TABLE>и< /TABLE>, строки таблицы (помещаются между тегами< TABLE>и< /TABLE>) тегами< TR>и< /TR>, а столбцы таблицы (помещаются между тегами< TR>и< /TR>) тегами< TD>и< /TD>.
|
|
|
Например, создадим таблицу, состоящую из одной строки и двух столбцов.HTML-код будет выглядеть так:
< table>
< tr>
< td>Первая ячейка< /td>
< td>Вторая ячейка< /td>
< /tr>
< /table>
Этот код можно записать и так:
< table>< tr>< td>Первая ячейка< /td>< td>Вторая ячейка< /td>< /tr>< /table>
Но обычно строк и столбцов в таблице много и при такой записи вы будете постоянно путаться, поэтому поначалу рекомендую использовать первый способ. А в браузере этотHTML-код будет выглядеть так:
| Первая ячейка | Вторая ячейка |
По умолчанию таблица представляется в браузере без рамок. Чтобы рамки были видны, используется уже знакомый вам по предыдущим разделам атрибутborder:
< table border="1">
< tr>
< td>Первая ячейка< /td>
< td>Вторая ячейка< /td>
< /tr>
< /table>
И тогда браузер покажет:
| Первая ячейка | Вторая ячейка |
Значение атрибутаborderвлияет только на внешнюю рамку, рамки между ячейками изменять нельзя. Их можно либо показывать, либо нет. Например, если изменить значение атрибутаborderс1на10, то мы получим:.
| Первая ячейка | Вторая ячейка |
Чтобы изменить расстояние между соседними ячейками используется атрибутcellspacing. Для наглядности усложним таблицу: сделаем две строки по три столбца и применим атрибутcellspacing:
< table border="5" cellspacing="10">
< tr>
< td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td>
< /tr>
< tr>
< td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>
< /tr>
< /table>
Браузер покажет:
| Первая ячейка | Вторая ячейка | Третья ячейка |
| Четвертая ячейка | Пятая ячейка | Шестая ячейка |
Для того, чтобы задать отступы внутри ячеек применяется атрибутcellpadding. Если в нашемHTML-коде поменять первую строку вот так
< table border="5" cellpadding="10">
то мы получим:
| Первая ячейка | Вторая ячейка | Третья ячейка |
| Четвертая ячейка | Пятая ячейка | Шестая ячейка |
Чтобы расширить ячейки по горизонтали (столбцам) или по вертикали (строкам), вHTMLприменяются следующие атрибуты:
|
|
|
colspan— расширение ячеек по горизонтали (столбцам);
|
|
|
