Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

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— расширение ячеек по горизонтали (столбцам);

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...