Лекция: Выравнивание картинок на web страничке

Чтоб выровнять набросок по центру, следует, пользоваться дополнительными тегами для выравнивания, записать строчку кода HTML, вставляющего набросок, последующим образом:

<div class=«text-align:center;»><img src=«image.gif» style=«border-width:1px;»></div>

Откорректируйте обозначенную строчку в файле other.html.

При подготовке web документов неприемлимо использовать картинки, фото и остальные изображения, взятые с других веб-сайтов, потому что это нарушает права автора их создателей. Если картинки для вас все таки нужны, то следует получить разрешение создателя на их внедрение. В сети вы сможете отыскать огромное количество коллекций изображений общего использования.

Ссылки

В первую очередь давайте поговорим о ссылках — переходах с одной страницы на другую. Ссылки это базовый элемент без которого невозможно представить интернет.

Создать html ссылку очень просто. Для этого используется простенький элемент с одним атрибутом. Ну вот например:

<a href=«www.zvirec.com»>Это ссылка на сайт zvirec.com </a>

будет выглядеть в браузере:

Это ссылка на сайт zvirec.com

Элемент а (ancor) является как бы якорем, т.е. текст, заключенный между открывающим <a> и закрывающим </a> тегом, будет текстом ссылки.
Атрибут href это сокращение от «hypertext reference/гипертекстовая ссылка», специфирует место, на которое выполняется переход по данной ссылке — обычно это internet-адрес и/или имя файла.

Если нужно сделать ссылку между собственными страницами?

Сделать html ссылку между страницами одного и того же веб-сайта гораздо проще. Например, если у нас есть две страницы(к примеру page1.htm и page2.htm) расположенные в одной папке, то код ссылки с page1 на page2 будет выглядеть так:

<a href=«page2.htm»>Для перехода на page2 щелкни здесь! </a>

Т.е. надо просто написать название страницы, на которую мы хотим перейти.

Eсли страница page 2 находится в подпапке «subfolder», код ссылки выглядит так:

<a href=«subfolder/page2.htm»>Для перехода на page2 щелкни здесь!</a>

Так будет выглядеть код html ссылки со страницы page 2 на page1(в обратную сторону):

<a href="../page1.htm">Для перехода на page1 щелкни здесь!</a>

Т.е. сочетание "../" указывает как бы на папку, расположенную на один уровень выше от данной позиции файла, с которого делается ссылка.

А если надо сделать ссылку внутри страницы?

Бывают случаи когда необходимо сделать ссылку с начала страницы в конец или наоборот, или к примеру с оглавления на главы и.т.д. Сделать ее очень просто! Необходимо пометить место документа следующей конструкцией:

<!-- этот способ используется при маркировании заголовков -->
<h2 id=«razdel1»>Раздел 1</h2>
<!-- а такую метку можно поставить везде где понадобится-->
<h2> <a name=«razdel1»></a>Раздел1:</h2>

Теперь вы можете ссылаться на помеченную область(в данном случае Раздел1) простым указанием ее имени после значка #.

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

<a href="#razdel1"> Ссылка на Раздел 1</a>

А можно сделать ссылку на почту?

Конечно можно. Вот пример ссылки на е-mail сайта zvirec.com .

<a href=«mailto:admin@zvirec.com»>Написать письмо админу zvirec.com </a>

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

Написать письмо админу zvirec.com

Как вы видите, используется mailto потом двоеточие и емаил получателя. При нажатии на ссылку запустится почтовая программа-клиент с заполненным полем имени получателя.

Парочка дополнительных атрибутов:

TARGET — указывает где открывать страницу на которую ведет html ссылка. По умолчанию она открывается в том же окне. Если хочется чтобы открывалась в новом, следует написать target ="_blank".

TITLE — указывает заголовок ссылки, который появляется при наведении на нее.

А можно ли изменить цвет ссылок?

Конечно можно. Чтобы изменять цвет ссылок во всем документе, существуют специальные атрибуты элемента BODY .

LINK — цвет просто ссылок.

ALINK(Active Link) — цвет активных ссылок (активная означает в момент нажатия на нее)

VLINK(Visited Link) — цвет уже посещенных ссылок

Все цвета задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

К примеру если при открытии тела документа, элементу body прописать:

<body link=«red» vlink=«green» alink=«white»>

то все ссылки в данном документе станут красными, уже посещенные ссылки станут зелеными а ссылки в момент нажатия будут белыми.

А если нужно чтобы в каком -то месте ссылка имела другой цвет? например по всему документу красные, а именно в одном месте зеленая?

Тогда нужно внутри html ссылки прописать уже знакомый элемент font с атрибутом цвета:

<a href=«www.zvirec.com»><font color=«black»>Черная ссылка</font></a>

Если сделать так, то данная ссылка будет черной.

Списки

В этом уроке мы разберем такую немаловажную часть языка html как списки. Различают списки двух видов: упорядоченные (пронумерованные) и неупорядоченные (непронумерованные). Единственным отличием является то, что перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.

Элементы:

UL (Unsorted List) — Создает неупорядоченный список. Обязательно наличие закрывающиего тега, причем между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.

Например:

<ul>
<li>Первый пункт списка </li>
<li>Второй пункт списка </li>
<li>Третий пункт списка </li>
<li>Четвертый пункт списка </li>
</ul>

OL (Ordered List)- Создает упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.

Атрибуты:

START– определяет первое число, с которого начинается нумерация пунктов. (только целые числа). Если не указывать, начинается с начала.

TYPE – определяет стиль нумерации пунктов списка.

Возможные значения:

«A» – заглавные буквы A, B, C ...
«a» – строчные буквы a, b, c ...
«I» – большие римские числа I, II, III ...
«i» – маленькие римские числа i, ii, iii ...
«1» – арабские числа 1, 2, 3 ...

Значение по умолчанию <OL TYPE=«1»>.

LI (List Item) — Создает пункт в списке. Располагается внутри элементов OL или UL. Закрывающий тег писать желательно, но не обязательно, это уже решать Вам.

Атрибуты:

VALUE– изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.