Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
WEB-дизайн
Лабораторная работа №1
Списки, ссылки, изображения в HTML
Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный атрибут src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
alt Альтернативный текст для изображения.
border Толщина рамки вокруг изображения.
heightВысота изображения.
hspace Горизонтальный отступ от изображения до окружающего контента.
ismap Говорит браузеру, что картинка является серверной картой-изображением.
ongdesc Указывает адрес документа, где содержится аннотация к картинке.
src Путь к графическому файлу.
vspace Вертикальный отступ от изображения до окружающего контента.
width Ширина изображения.
usemap Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.
Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name илиhref тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.
Атрибут name используется для определения якоря внутри страницы. Вначале следует задать в соответствующем месте закладку и установить ее имя при помощи атрибута name тега <a>. Имя ссылки на закладку начинается символом #, после чего идет название закладки. Название выбирается любое, соответствующее тематике. Можно также делать ссылку на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки.
Между тегами <a name=...> и </a> текст писать не обязательно, так как требуется лишь указать местоположение перехода по ссылке.
Элемент <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.
Тег <body> также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство атрибутов до сих пор поддерживается разными браузерами.
Часто тег <body> используется для размещения обработчика событий, например, onload, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.
Открывающий и закрывающий теги <body> на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа.
alink Устанавливает цвет активной ссылки.
background Задает фоновый рисунок на веб-странице.
bgcolor Цвет фона веб-страницы.
bgproperties Определяет, прокручивать фон совместно с текстом или нет.
bottommargin Отступ от нижнего края окна браузера до контента.
leftmargin Отступ по горизонтали от левого края окна браузера до контента.
link Цвет ссылок на веб-странице.
rightmargin Отступ от правого края окна браузера до контента.
scroll Устанавливает, отображать полосы прокрутки или нет.
text Цвет текста в документе.
topmargin Отступ от верхнего края окна браузера до контента.
vlink Цвет посещенных ссылок.
Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.
align Задает выравнивание содержимого тега <div>.
title Добавляет всплывающую подсказку к содержимому.
Тег <dl> входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина.
<dl>
<dt>Термин 1</dt>
<dd>Определение термина 1</dd>
<dt>Термин 2</dt>
<dd>Определение термина 2</dd>
</dl>
Тег <ol> устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ol> применяется таблица стилей, то элементы <li> наследуют эти свойства.
<ol>
<li>элемент нумерованного списка</li>
<li>элемент нумерованного списка</li>
</ol>
type Устанавливает вид маркера списка.
reversed Нумерация в списке становится по убыванию (3,2,1).
start Задаёт число, с которого будет начинаться нумерованный список.
Тег <ul> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ul> применяется таблица стилей, то элементы <li> наследуют эти свойства.
<ul>
<li>элемент маркированного списка</li>
</ul>
type Устанавливает вид маркера списка.
Задание
Создать четыре веб-страницы на которых задать:
1. на каждой странице различный фон.
2. на первой странице три рисунка с различным выравниванием(по левому краю, по центру, по правому краю), сделать их ссылками на остальные страницы. Создать всплывающие подсказки.
3. на второй задать список определений, содержащий пять пунктов
4. на третьей задать маркированный и нумерованный списки, состоящие из трех пунктов каждый, сделать эти пункты ссылками на соответствующие страницы, изменить параметры оформления ссылок. Ниже создать нумерованный список, начинающийся с числа 5, с тремя пунктами, нумерованными в обратном порядке, а также маркированные списки из трех пунктов с маркерами в форме незакрашенных кругов и квадратов. Создать всплывающие подсказки.
5. на четвертой задать пять абзацев текста, организовав внутренние ссылки из начала документа в его конец, из конца в начало, из начала в середину, изменить оформление ссылок, создать всплывающие подсказки.