- Вставка изображений и других элементов страниц
- Результат: Рис. 3 Горизонтальные линииТег
- Пример 6: Результат
- Bottom
- Ссылки на любое место в WWW
- Общий формат URL
- Пример 8: Список цирков Yahoo После того как ссылки помещены на странице, можно легко перемещаться с одной страницы на другую.Цвет ссылки
- Результат: Рис.10 Пример маркированного спискаНумерованный список
- Списки определений (глоссарии)
- Результат: Рис.12 Пример списка определенийВложенные списки
ЛР_№2 Элементы HTML. Лабораторная работа 2. Добавление различных элементов на webстраницу
 Скачать 285 Kb.
|
|
Лабораторная работа №2. Добавление различных элементов на web-страницу Цель работы: Научиться создавать основные элементы web-страницы такие как: вставка изображений, создание гиперссылок, различного вида списки и динамические кнопки. Вставка изображений и других элементов страниц Тег Тег выводит на странице горизонтальную линейку. Атрибуты align = center | left | right Если линейка короче окна, то этот тег управляет горизонтальным выравниванием линейки. Значение по умолчанию center. noshade Линейка выводится в виде сплошного прямоугольника (без тени). size= число Задает толщину линейки в пикселях. width= число или % Задает длину линейки в пикселях или в процентном отношении к ширине страницы. По умолчанию длина линейки равна ширине полного окна браузера. Пример 5: Результат:  Рис. 3 Горизонтальные линии Тег Тег Атрибуты src=url Задает URL графического файла, который должен быть выведен на экран. Таким образом, минимальный тег для размещения изображения на странице будет иметь вид alt= текст Задает строку альтернативного текста, который появляется, если вывести изображение невозможно. border= число Задает ширину (в пикселах) границы, которая окружает просматриваемое изображение. Значение border=0 на практике используется для отмены вывода границы. vspace= число Используется совместно с атрибутом a1ign=1eft или a1ign=right. Задает в пикселах свободный интервал сверху и снизу от изображения. height= число Задает высоту изображения в пикселах. Атрибут не является обязательным, но желательно его использовать для увеличения скорости вывода Web-страницы. width= число Задает ширину изображения в пикселах. Атрибут не является обязательным, но его использование желательно, так как позволяет ускорить отображение Web-страницы. Пример 6:  Результат:  Рис. 4 Вставка изображений Имея эту информацию, браузеры получают возможность разметить страницу перед загрузкой изображения. Без значений ширины и высоты сначала выводится страница, а затем, после получения графического файла, вся страница выводится во второй раз с размещенным изображением (этот процесс может состоять и из нескольких проходов). Поэтому разумно затратить некоторое время на включение в тег информации о размерах изображения. align= тип Задает выравнивание изображения, используя один из приведенных в таблице атрибутов (рассмотрены наиболее распространенные). Bottom Выравнивает нижнюю часть изображения по основанию текста. Это значение вертикального выравнивания по умолчанию center В соответствии со спецификацией W3C этот атрибут обеспечивает горизонтальное центрирование изображения на странице. На практике браузеры трактуют его так же, как и align=middle left Выравнивает изображение по левому полю и позволяет последующему тексту обтекать его middle Выравнивает середину изображения по базовой линии текста right Выравнивает изображение по правому полю и позволяет последующему тексту обтекать его top Выравнивает вершину изображения по самым высоким точкам строки Ссылки на web-страницах Гиперссылки на Web-страницы —одно из основных свойств WWW. Любой документ может содержать ссылку на другой WWW-документ, заданную с помощью специального тега HTML. Создание ссылки Теперь введите тег . Тег называется якорным тегом. Он применяется для ссылок на другие Web-страницы. Ключевое слово href якорного тега сообщает браузеру, на что вы ссылаетесь. Не забудьте про закрывающий тег . Пример 7: новости Фраза «новости» появится на экране в виде текста ссылки. Когда посетители щелкнут мышью на этом тексте, они откроют файл index.html. Необходимо указывать путь к файлам, на которые ссылаетесь. Ссылки на любое место в WWW Для таких ссылок вам понадобится полный URL документа, а не только путь и имя файла, как в предыдущих примерах. Для адресации ресурсов Internet используется унифицированный указатель на ресурс (адрес) - URL (Uniform Resource Locator). Общий формат URL: <�протокол>://<�сервер><�локальный адрес> Протокол — это набор соглашений о правилах формирования и форматах сообщений Internet, о способах обмена информацией между абонентами. В качестве протокола чаще всего указываются http, ftp, gopher. В качестве локального адреса указывают либо путь к странице (для http), либо путь к файлу (для ftp). Если путь к конкретной странице не указан, подразумевается начальная страница сайта или Web-сервера. Если не указан путь к файлу (или подкаталогу), подразумевается корневой каталог данного FTP-сервера. Как любой элемент HTML, ссылка задается парой тегов. Открывающий тег (называемый якорным тегом) — это тег <�А>. Затем вы задаете файл, на который ссылаетесь, а также текст ссылки. Все это завершается закрывающим тегом </А>. Пример 8: Список цирков Yahoo После того как ссылки помещены на странице, можно легко перемещаться с одной страницы на другую. Цвет ссылки Выше мы рассматривали, как можно задать стандартные цвета текста страницы с помощью тега . Подобным же образом вы можете управлять цветом текста гиперссылки. Атрибуты: link = "#rrggbb" или имя цвета Устанавливает цвет по умолчанию для всех ссылок, имеющихся в документе. vlink= "#rrggbb" или имя цвета Устанавливает цвет посещенных ссылок. alink "#rrggbb" или имя цвета Устанавливает цвет активной ссылки. Графические ссылки Для того чтобы создать графическую ссылку, поместите внутрь тегов якоря тега изображения следующим образом: < a href="document.html">  Когда рисунок используется в качестве ссылки, браузер выводит границу размером в один пиксель вокруг изображения (обычно голубым). Часто такая голубая рамка неприемлема, тогда используя атрибут border отображение рамки следует отключить. Атрибут border определяет ширину границ в пикселях. Задавая нулевое значение, вы отменяете появление рамки вокруг изображения, как это показано в следующем примере: < a href=“document.html”> Списки Списки — это элементы HTML, облегчающие представление информации в удобном формате. Списки используются для перечисления элементов по пунктам. Существует несколько форматов списков, позволяющих выделить определенные фрагменты информации в стандартном тексте. В обычном абзаце текст переносится со строки на строку. Текст в списках выглядит по-другому. Пункты списка отступают от полей, отделены от остальных абзацев текста и, кроме того, часто маркированы или нумерованы. При правильном использовании Списки делают большие объемы информации легко читаемыми и хорошо заметными. Списки могут быть вложены друг в друга, образуя сложную структуру. Списки удобны для перечисления информации по пунктам. Пример 10, приведённый ниже, отображает запись маркированного списка. Пример 10: Мои интересы:
Списки помогают организовать информацию. Такую страницу посетители скорее прочтут, поскольку, бегло взглянув на список, можно быстро найти в нем то, что нужно. Различные типы списков. Существует три основных типа списков:
Есть и другие типы, но эти три наиболее часто используются. Они сходны в том, что все они располагают каждый пункт на новой строке, и вы можете выделить нужный текст. Главное различие перечисленных типов состоит в способе нумерации и структуре. Создать список довольно легко. Сначала введите теги открытия и закрытия списка (
Наберите текст первого пункта после тега
Пример 11: Результат:__Рис.10_Пример_маркированного_спискаНумерованный_список'>Результат:  Рис.10 Пример маркированного списка Нумерованный список В нумерованном списке (Ordered List) каждому элементу предшествует его порядковый номер. Нумерованный список задается с помощью тегов
<�В>График моего путешествия по Европе</В> Результат:  Рис.11 Нумерованный список По умолчанию списки HTML автоматически нумеруются с помощью арабских цифр — 1,2,3 и т. д. Вы можете задать другой способ нумерации, например буквы (прописные или строчные) или римские цифры (I, II, III, IV и т. д.). Чтобы изменить стандартный тип нумерации, добавьте в тег
• TYPE=1 Стандартная цифровая нумерация — 1,2, 3,4, 5. • ТУРЕ=А Прописные буквы - А, В, С, D, Е. • TYPE=a Строчные буквы — а, Ь, с, d, e. • TYPE=I Римские цифры - I, II, III, IV, V. • TYPE=i Строчные римские цифры — i, И, iii, iv, v. Иногда нужно, чтобы список начинался не с 1 (или А). Для задания другого начального номера вы можете использовать ключевое слово SEQNUMT тега
Списки определений (глоссарии) Cписки определений (Definition List) используются не так часто, как маркированные или нумерованные списки, они также могут быть полезны в некоторых случаях. В списке определений для каждого пункта предоставляется не одна, а две строки, что может быть полезно, когда вы приводите дополнительную информацию. Списки определений выглядят несколько иначе, другие типы списков. Для описания каждого пункта списка в этом случае применяется два тега, а не один тег Пример 11: ТерминыРезультат:  Рис.12 Пример списка определений Вложенные списки Одно из замечательных свойств списков — это возможность вкладывать их друг в друга. Вложение списков в списки позволяет вам создать несколько уровней организации информации. Вы можете использовать несколько уровней списка на одной странице, что поможет вам упорядочить информацию. Вложенный список (Nested lists) включает элементы нумерованного и маркерованного списков, поэтому для его создания используются теги этих двух списков: Пример 13: Советы по изготовлению страничек |