Текстовые ссылки
Текстовые ссылки позволяют щелчком по выделенному слову или фразе перейти на другую Web-страницу. Эта возможность называется гипертекстом . Ниже показаны разные способы отображения гипертекста:
Самая простая ссылка: <a href="http://osnovihtml.do.am/publ/">Каталог статей</a>
Ссылка откроется в новом окне: <a href="http://osnovihtml.do.am/publ/" target="_blank">Каталог статей</a>
Всплывающая подсказка при наведении на ссылку курсора мыши: <a href="http://osnovihtml.do.am/publ/" title="Редактирование шрифта и абзацев">Каталог статей</a>
Ссылка в виде картинки (баннера): <a href="http://osnovihtml.do.am/publ/" title="Редактирование шрифта и абзацев" <img src=ссылка на картинку></a>
Ссылка в виде кнопки (формы):
Начало формы
Конец формы
<form action="http://osnovihtml.do.am/publ/" target="_blank"><input type=submit value="Каталог статей"></form>
! Аргумент target="_blank" открывает ссылку в новом окне, если это не нужно, уберите его.
Ссылки в пределах одного документа
Текстовые ссылки могут указывать не только на другие Web-страницы, но и на разделы в пределах одной Web-страницы. Такие ссылки требуют наличия двух частей: якоря и самой ссылки. Якорь определяет точку на странице, куда происходит переход. Такая ссылка ничем почти не отличается от обычной ссылки, только в ней используется не адрес страницы, а якорь. Вот пример записи таких ссылок: Сама ссылка: <a href="#text">Текстовые ссылки</a> Якорь: <a name="text">Текстовые ссылки</a>
Пример такого типа ссылки можно увидеть на этой странице, оглавление и есть этот пример :)
Размер графического изображения
Время загрузки графических изображений является одной из основный проблем, которые нужно учитывать при создании и обработки Web-страниц. Существует 2 способа решения этой проблемы: первый - добавления в тег IMG атрибута lowsrc , или второй - установка атрибутов ширины ( width) и высоты ( height) изображения.
Стандарт
Изменена
ширина
Изменена
высота
Атрибуты
размера изображения width
и height,
которые измеряются в пикселях,
предупреждают браузер до приема всего
графического файла о том, какой будет
размер загружаемого изображения. Со
всеми учетами размеров, браузер сначало
выделяет место, требуемое для изображения,
готовит макет документа, показывает
текст и только после этого загружает
графику. Это значит что клиент может
прочитать содержимое до того, как
загрузится изображение.
Вот так
выглядит тег добавления изображения с
атрибутами изменения размера изображения:
<img
scr="photo1.gif" width="170" Height="73">
Как
создать рамку вокруг вокруг изображения.
Для
картинок в браузере так же существуют
рамки, ими можно управлять, их можно
создать, отменить и изменить толщину,
она, кстати, измеряется в пикселях.
Изображение без рамки
Изображение с рамкой
Рамки для картинок - это конечно же хорошо, однако не все хотят видеть эту черную полосу вокруг изображения. По этому еще есть функция поля вокруг изображения . Как создать поле вокруг изображения. Пустые поля над и под изображением создаются с помошью атрибута VSpace в теге <img>. Поля слева и справа - атрибутом HSpace . Размеры полей так же как и размеры рамки задаются в пикселях. Ниже 2 примера, без рамки и с рамкой:
В
обычных условиях графика встраивается
вплотную к тексту. Текст плотно обтекает
картинку со всех сторон. Иногда это
выглядит нелепо, или не красиво, по этому
вокруг изображения делают пустые поля.
В обычных условиях графика встраивается вплотную к тексту. Текст плотно обтекает картинку со всех сторон. Иногда это выглядит нелепо, или не красиво, по этому вокруг изображения делают пустые поля.
Разделительные полосы
Для разбиения Web-страницы на части используют разделительные полосы, они проходят по всей ширине страницы и вставляются тегом <hr>. В месте вставки полосы текст разбивается. Разные браузеры изображают полосы по-разному, но все они масштабируют длину полосы в соответствии с шириной окна браузера.
Вставка разделительных полос Вот так выглядит стандартная полоса:
Но их можно форматировать, изменить, например: - длину полосы и способ расположения её
- толщину полосы
- наличие или отсутствие оттенения
Какие атрибуты и за что отвечают, читайте ниже
Вид разделительных полос можно изменить некоторыми атрибутами, встраиваемые в тег <hr>. Атрибут size задает толщину полосы, которая измеряется в пикселях. Атрибут wight задает длину полосы. она может измеряться либо в пикселях, либо в процентах от ширины окна. Атрибут noshade позволяет создать полосу без обычного оттенения. Если длина полосы меньше ширины окна, можно выбрать её положение, за это отвечает атрибут align
Списки
Существует два вида основных списков: упорядоченные (по алфавиту или по цифрам) и неупорядоченные (с вводным маркетом). Упорядоченные списки задаются парным тегом <ol>, а неупорядоченные - тегом <ul>. Оба вида используют для элементов списка одиночный тег <li>.
Для неупорядоченных списков есть три вида вводных маркеров. Это делается с помощью атрибута type= внутри тега <ul>. Возможные атрибуты - disc(круг), circle(окружность), square(квадрат). Для упорядоченных списков существуют следующие способы индексации: арабские цифры, прописные буквы, строчные буквы, римские цифры. Это делается при помощи атрибута type= с соответствующем аргументом (1, А, а, i).
<ol type=1 start10>
Этот список прописывается арабскими цифрами и начинает счет от числа 10
Этот список прописывается арабскими цифрами и начинает счет от числа 10
Этот список прописывается арабскими цифрами и начинает счет от числа 10
Этот список прописывается арабскими цифрами и начинает счет от числа 10
Этот список прописывается арабскими цифрами и начинает счет от числа 10
Этот список прописывается арабскими цифрами и начинает счет от числа 10
</ol>
<ul type=circle>
А этот список будет прописываться окружностью
А этот список будет прописываться окружностью
А этот список будет прописываться окружностью
А этот список будет прописываться окружностью
А этот список будет прописываться окружностью
А этот список будет прописываться окружностью Можно так же и квадратом или кругом, как я писал ранее:
Вот пример квадратного маркера, в вводится он вот так: <li type="square"> Элемент списка
А для маркера в виде круга нужно набирать тег вот так: <li type="disc"> Элемент списка
</ul>