- •Базовые тэги html. Создание простейшего сайта
- •Между этими строками внесите теги:
- •2. Самостоятельная работа
- •Лабораторная работа № 2 Форматирование текста: физическое и логическое
- •2. Самостоятельная работа
- •Лабораторная работа № 3 Использование объектов
- •2. Самостоятельная работа
- •Лабораторная работа № 4 Работа с графикой
- •Лабораторная работа № 5 Работа с таблицами
- •2. Самостоятельная работа
- •Лабораторная работа № 6 Фреймы и формы
- •2. Самостоятельная работа
- •2. Самостоятельная работа
- •Лабораторная работа № 7 Каскадные таблицы стилей
- •Параметры линии:
- •Способы подключения стилей к web-странице
- •2. Самостоятельная работа и содержание отчета
- •Лабораторная работа № 8 Свойства элементов
- •Изучаем Html
- •Лабораторная работа № 9 Навигационные карты. Map. Как сделать часть картинки ссылкой Цель: Изучить тэг Map, тэг Area,
- •Лабораторная работа № 11 Ссылка внутри документа, якоря, anchor. Цель: изучить атрибуты name, id.
2. Самостоятельная работа
Задание:
1. Перепишите способы форматирования в отчет.
2. Оформите сайт, используя атрибуты тега <Body>, проверьте, как работают атрибут тега <P> и тег <CENTER> и запишите в отчет результаты.
3. Добавьте в сайт несколько заголовков разной величины и запишите в отчет их действие.
4. В окне сайта отобразите несколько раз формулу X0=y2 +3.
5. Отредактируйте свою страницу используя тег <Font> и вставку специальных символов.
6. Проверьте работу тегов логического форматирования.
7. Приложите к отчету листинг готового html-документа.
Лабораторная работа № 3 Использование объектов
Цель: освоить теги html, синтаксис языка
Результат обучения: Студент должен научиться использовать гиперссылки, вставлять разделители, бегущую строку, создавать списки.
Ход работы
Атрибуты тега <body>
О теге <body>, обозначающем тело (основную часть) документа Html, мы уже говорили в предыдущих лабораторных работах. Необходимо добавить лишь то, что в общем виде синтаксис записи тега со семи допустимыми атрибутами выглядит так:
<body background=”URL” bgcolor=”значение1” text=”значение2” link=”” vlink=” значение3” alink=” значение4”> тело документа </body>
Атрибут background позволяет поместить дизайнеру некий фоновый рисунок, записав в качестве URL его адрес. Допускается просто указывать имя графического файла, если он хранится в той же директории, что и использующий его Html файл. Данное изображение может иметь любой размер, поскольку при интерпретации кода оно многократно повторяется, заполняя все доступное пространство в окне броузера.
Атрибут text позволяет задать цвет текста для всего документа в целом. Однако, Вы можете изменить цвет участка текста путем использования команды <font> с атрибутом <color>.
Атрибут bgcolor используется для назначения фонового цвета всему документу. Атрибуты background и bgcolor не исключают друг друга, однако у первого имеется приоритет. Это означает, что в случае, когда заданы оба эти атрибуты, сначала выполняется заливка web-страницы цветом, поверх которого помещается изображение.
Атрибут link дает мастеру возможность назначить цвет не посещенной гиперссылки, т.е. ссылки, к которой еще не обращались. По умолчанию ей присваивается значение "blue"
Атрибут vlink указывает цвет посещенной ссылки, значение которой по умолчанию "purple".
Атрибут alink определяет цвет активной гиперссылки, который она принимает с момента нажатия на нее курсором до момента загрузки вызываемого ею ресурса. По умолчанию данный атрибут также имеет значение "purple".
Списки
Маркированные и нумерованные списки были разработаны для отображения упорядоченной информации в виде позиционированных по смыслу вхождений. Например, маркированный список:
Вхождение 1
Вхождение 2
Вхождение 3
На языке HTML подобный список можно представить при помощи команды <ul>:
<ul type="параметр">
<li>Вхождение 1</li>
<li>Вхождение 2</li>
<li>Вхождение 3</li>
</ul>
Атрибут type позволяет программисту управлять буллет-стилем (т.е.внешним видом) и формой обозначающих каждое вхождение меток. Параметр этого атрибута может принимать одно из трех значений:
Disc - метки в виде окружностей, заполненных черным цветом
Circle - в виде полых окружностей
Square - в виде квадратов, заполненных черным цветом.
По умолчанию type= "Disc"
Нумерованный список можно представить с использованием тега <ol>:
<ol type= "параметр" start="значение">
<li> Вхождение 1 </li>
<li> Вхождение 2 </li>
<li> Вхождение 3 </li>
</ol>
Атрибут type может принимать одно из следующих значений:
"1" - обычные арабские цифры 1,2,3 и т.д.
"I" - римские цифры в заглавном регистре I, II, III, IV и т.д.
"i" - римские цифры в строчном регистре i, ii, iii и т.д.
"А" - символьная маркировка в заглавном регистре А, В, С и т.д.
"а" - символьная маркировка в строчном регистре a, b, c и т.д.
Атрибут start позволяет задать позицию, с которой следует начать маркировку. Например, если ввести type= "1" start="5", то нумерация начнется с цифры 5. Если ввести type= "А" start="D", то маркировка начнется с символа D.
По умолчанию значение атрибута type принимается как "1", нумерация начинается с первого элемента в каждом из типов маркировки.
Возможно создание так называемых вложенных списков, реализуемых посредством размещения одной пары тегов в другой. Например, для создания списка:
1. Вхождение 1
Вхождение 1-а
Вхождение 1-б
2. Вхождение 2
Вхождение 2-а
Вхождение 2-б
Введем следующий набор команд
<OL>
<LI>Вхождение 1 </LI>
<UL>
<LI> Вхождение 1-а </LI>
<LI> Вхождение 1-б </LI>
</UL>
<LI> Вхождение 2 </LI>
<UL>
<LI> Вхождение 1-а </LI>
<LI> Вхождение 1-б </LI>
</UL>
</OL>
Следует отметить, что тег <LI> может включать те же атрибуты, что и теги самих списков <UL> и </OL>. То есть, если необходимо одно из вхождений пометить другим маркером, то для данного элемента можно записать тег:
<LI TYPE="значение"> Вхождение </LI>
Помимо нумерованных и маркированных списков язык HTML позволяет создавать списки определений, для чего применяются команды <DL>. Итак, для создания списка
Заголовок группы вхождений 1
Вхождение 1-а
Вхождение 1-б
Заголовок группы вхождений 2
Вхождение 2-а
Вхождение 2-б
Введем следующее:
<DL>
<DT> Заголовок группы вхождений 1
<DD> Вхождение 1-а
<DD> Вхождение 1-б
<DT> Заголовок группы вхождений 2
<DD> Вхождение 2-а
<DD> Вхождение 2-б
</DL>
Закрывающие теги <DT> и <DD> списка определений можно опустить.
Разделители
Для того, чтобы визуально отделить часть объектов html-документов от других, например горизонтальной чертой, применяется тег <HR>. Общий синтаксис тега выглядит следующим образом:
<HR ALIGN= "параметр" WIDTH="значение" SIZE= "значение" COLOR= "значение">
Атрибут ALIGN определяет положение горизонтальной черты: center, left и right.
Атрибут WIDTH определяет длину линии, причем его значение можно задавать либо в пикселях простым целым числом, либо в процентах от ширины экрана при помощи чисел от 1-100 с добавлением символа %.
Атрибут SIZE задает толщину линии в пикселях, значение которого - целое число.
Атрибут COLOR определяет цвет заливки линии.
Например:
<HR ALIGN="CENTER" WIDTH="80%" SIZE="1" COLOR="#0000FF">
Очевидно, что команда HR не имеет закрывающего тега. По умолчанию, без указаний атрибутов, броузер отобразит серо-белую вогнутую линию, толщиной в 3 пикселя, длиной во весь экран.
Бегущая строка
Для задания бегущей строки используется тег:
<marquee>текст бегущей строки</marquee> с атрибутами:
width=”…” – задаёт ширину бегущей строки в пикселях или в процентах от ширины экрана.
height=”…” - задаёт высоту бегущей строки в пикселях или в процентах от ширины экрана.
bgcolor=”…”- задаёт цвет фона бегущей строки.
behavior=”…”-задаёт тип движения бегущей строки и может иметь следующие значения: scroll-циклическая прокрутка из одного конца в другой, slide-текст появляется с одного края и останавливается у другого, alternate-текст перемещается от одного края к другому
(маятник).
direction=”…”-задаёт направление движения бегущей строки и может иметь следующие значения: left, right, Up,down.
scrollamout=”…”задаёт число пикселей, который отделяют один текст от последующего.
scrolldelay=”…” – указывает задержку в миллисекундах перед появлением следующего текстового блока.
loop=”…”-задаёт число повторений (любое положительное число. По умолчанию или при указании –1 или infinite, броузер будет прокручивать текст бесконечное количество раз.
Гиперссылки
Гиперссылкой может быть текст, изображение, часть изображения. Текст, который является гиперссылкой, выделяется цветом и подчёркивается. Текстовые гиперссылки можно разделить на четыре условных категории: ссылки на документы, ссылки на разделы, ссылки на адрес электронной почты и на файловые объекты. Начнем по порядку.
Ссылки на документы
Для назначения гиперссылки на другую Web-страницу используется тег <A>, синтаксис записи которого имеет следующий вид:
<A href=”URL”> target=”параметр”
title=”альтернативный текст”> текст_гиперссылки </A>
Атрибут href указывает на адрес страницы, с которой Вы планируете установить гиперсвязь. Этот адрес может быть представлен как в виде полного URL (например, http://www.server.ru/page.html), если целевой документ физически расположен на другом сервере, так и в виде сокращенного URL с указанием пути к искомой страницы в пределах локального сервера (например, “/folder/page.html”). Если искомый документ расположен в одной директории с текущим, в качестве параметра атрибута href достаточно записать его название.
Атрибут target содержит директивы, описывающие правила открытия целевого документа в броузере, эти директивы выделяются в коде символом подчеркивания. Например, часто встречающееся значение атрибута target= «_blank» отображает открываемый по ссылке документ в новом окне броузера.
Атрибут title предназначен для создания всплывающей подсказки, появляющейся в небольшом прямоугольнике, если пользователь задержит указатель мыши над гиперссылкой на несколько секунд.
Следует помнить, что одну гиперссылку нельзя разместить внутри другой.
Ссылки на разделы
Иногда возникает необходимость разместить на web-странице гиперссылку не на другой документ, а на расположенный в пределах этой же страницы раздел или участок текста. При активизации подобной гиперссылки броузер «отматывает» таким образом, что искомый раздел или фраза оказываются в верхней его части.
Процесс создания ссылки на раздел условно делится на два этапа. Первый – подготовка «закладки» - специальной метки с уникальным в пределах данного документа именем. Для этого, в том участке текста, где необходимо разместить метку, применяется следующая команда:
<A name=”имя_закладки”> ключевое слово или заголовок раздела </A>
Второй этап – создание самой ссылки при помощи команды:
<A href=”#имя_закладки”> текст ссылки </A>
Помните, что для задания имени закладки лучше использовать латинские символы.
Если Вы хотите разместить ссылку на раздел другого документа, описанный выше алгоритм сохраняется, за исключением того, что в вызывающем теге перед именем закладки указывается URL документа. В этом случае рекомендуется использовать атрибут TARGET с параметром _BLANK. Подобная команда в обобщенном виде будет выглядеть следующим образом:
<A href=” http://www.server.ru/page.html #имя_закладки”
target= «_blank»> текст ссылки </A>
Ссылки на адрес электронной почты
При активизации подобных ссылок автоматически запускается установленная на Вашем компьютере почтовая программа и на экране формируется готовый к отправке бланк письма с заполненным адресным полем. Подобные гиперссылки реализуются с использованием тега <A>:
<A href=”mailto:user-1@server.ru?cc=user-2@server.ru.user-3@server.ru
&subject=тема письма”> текст ссылки </A>
Директива mailto: указывает на основной адрес электронной почты, куда отправляется созданное автоматически письмо. В минимальной записи атрибута href можно указать только эту директиву и какой-либо адрес e-mail.
Функция ?cc позволяет определить адреса пользователей, которым будет отправлена копия сообщения. Если таких адресов больше одного, они записываются подряд, через запятую без пробелов.
С помощью функции &subject можно задать тему отсылаемого сообщения.
Например,
<A href=”mailto:alvion@rednet.ru&subject=комментарии читателей”> Жду писем! </A>
Ссылки на файловые объекты
Гиперссылка на некий файловый объект подразумевает организацию гиперсвязи документа HTML с каким-либо файлом, хранящимся на сервере, например архивом ZIP. При нажатии мышью на такой гиперссылке автоматически открывается сессия загрузки данного файла с удаленного сайта на локальный пользовательский компьютер. Мнемоника записи команды следующая:
<A href=”http://www.myserver.com/files/archive.zip”> текст гиперссылки </A>
Иногда для реализации гиперсвязи с файловым объектом в записи URL этого объекта используется префикс “file://” , однако такой подход применяется в основном для организации ссылок на файловый объект, расположенный на локальном компьютере. Если загрузку файла планируется осуществлять по протоколу FTP, используется префикс “ftp://". Если искомый файл расположен в той же директории, что и вызывающий его документ, то можно просто указать его имя.