Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
LR_informatika / лабораторки HTML №9.doc
Скачиваний:
13
Добавлен:
14.02.2016
Размер:
312.32 Кб
Скачать

Организация ссылок.

Тег <A> является одним из важных элементов HTML и предназначен для создания ссылок (якорей).

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

Параметры:

  • Href - Задает адрес документа, на который следует перейти.

  • Name - Устанавливает имя якоря внутри документа. Правильное оформление якоря:

<a href=”#nachalo”> Начало </a>

<a name=”#nachalo”> Начало </a>

  • Target - Имя окна или фрейма, куда браузер будет загружать документ.

  • _blank — загружает страницу в новое окно браузера.

  • _self — загружает страницу в текущее окно (по умолчанию).

  • Title - Добавляет всплывающую подсказку к тексту ссылки.

Задание.

  • Изменить файлIndex.html создав таблицу из 2-х строк и 3-х столбцов (объединив ячейки верхней строки) и поместить содержимое, как представлено на рисунке.

  • Создать две странички stix1.html и stix2.html, используя дизайн и структуру Index.html. Содержимым для 2-ой ячейки 2-ой строки страницы stix1.html будет:

Я помню чудное мгновенье:

Передо мной явилась ты,

Как мимолетное виденье,

Как гений чистой красоты

В томленьях грусти безнадежной

В тревогах шумной суеты,

Звучал мне долго голос нежный

И снились милые черты.

Шли годы. Бурь порыв мятежный

Рассеял прежние мечты,

И я забыл твой голос нежный,

Твой небесные черты.

В глуши, во мраке заточенья

Тянулись тихо дни мои

Без божества, без вдохновенья,

Без слез, без жизни, без любви.

Душе настало пробужденье:

И вот опять явилась ты,

Как мимолетное виденье,

Как гений чистой красоты.

И сердце бьется в упоенье,

И для него воскресли вновь

И божество, и вдохновенье,

И жизнь, и слезы, и любовь.

Для страницы stix2.html, соответственно:

Я вас любил: любовь еще, быть может,

В душе моей угасла не совсем;

Но пусть она вас больше не тревожит;

Я не хочу печалить вас ничем.

Я вас любил безмолвно, безнадежно,

То робостью, то ревностью томим;

Я вас любил так искренно, так нежно,

Как дай вам бог любимой быть другим.

  • В Index.html первые четверостишия стихов будут являться ссылка для перехода на страницы stix1.html и stix2.html. А на страницах stix1.html и stix2.html «Пушкин А.С.» должен быть ссылкой для возвращения на Index.html.

Контейнеры ­ элементы div и span

В HTML существует специальный элемент DIV, который может служить контейнером для любых других элементов HTML. Элементы, помещенные внутрь тега DIV, отделяются от остальною содержимого страницы абзацным отступом. С помощью атрибута align можно задавать выравнивание содержимого контейнера. Например, если мы захотим для целой группы элементов задать выравнивание по центру, то можно сделать это, поместив их внутрь контейнера и задав выравнивание для всего контейнера в целом, а не для каждого его элемента отдельно.

<DIV align="center">

l> Заголовок 1 </Нl>

<Н2> Заголовок 2 </Н2>

<НЗ> Заголовок 3 </Н3>

<Н4> Заголовок 4 </Н4>

<Н5> Заголовок 5 </Н5>

<H6> Заголовок 6 </Н6></DIV>

<DIV> ­ все заголовки будут выровнены по центру страницы. Это дает нам некоторые удобства и экономию в написании кода, а соответственно, и размер файла будет меньше. У контейнеров есть и другие области применения. Например, при использовании каскадных таблиц стилей и элемента DIV можно создавать блоки, задавать для них уникальные параметры оформления и позиционировать их на экране в нужное место.

Элемент SPAN, в отличие от элемента DIV, создает строчной блок. С его помощью можно вытащить не который фрагмент текста и потом задать для него своеобразное оформление при помощи каскадных таблиц стилей.

Задание.

  • Используя контейнер div для выравнивания текста на странице index.html по всей длине и для выравнивания по центру фотографий на странице Foto.html

6