Hspace— создает боковые поля (слева и справа).
⇐ ПредыдущаяСтр 2 из 2 Значения этих атрибутов указывается в пикселях. Например, если мы немного дополним предыдущий пример: < 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с помощью тега< 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 Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...
|