Информатика Профильное обучение Спецкурс Основы веб-дизайна

Зарегистрируйтесь, чтобы просмотреть полный документ!

Информатика. Профильное обучение Спецкурс “Основы веб-дизайна” << Назад Раздел 2 Основы веб-дизайна Вперед>>

Текстовые гиперссылки Гиперссылка — это указание для браузера, до любого объекта в пределах или за пределами HTML-документа он должен обратиться. Для создания гиперссылки необходимо использовать теги <А> и </А>, определив для тега <А> атрибут HREF. Его значением должен быть адрес URL, на который указывает ссылка. Если веб-страница, на которую указывает ссылка, размещена на другом веб-сайте, то значением атрибута HREF должен быть полный URLадрес с названием протокола включительно; такие ссылки называют внешними. Если гиперссылка указывает на другую страницу того же сайта, то для поиска документа достаточно задать только относительный путь; такую ссылку называют внутренней. << Назад 2 Вперед >>

Текстовые гиперссылки Гиперссылка может указывать на определенное место внутри страницы, если туда предварительно встроить якорь-метку. Для определения якоря также используют теги <А> и </А>, но вместо атрибута HREF задают атрибут NAME, значением которого должно быть имя якоря. Оно может состоять из букв и цифр, но не должно содержать символов пробела. Если на странице есть несколько меток, то все они должны иметь разные названия. Для ссылки на установленный якорь нужно в теге <A> указать его имя в конце адреса URL после имени документа, отделив его символом #. Символ # указывает на то, что после него записано название метки, а не имя файла. Ссылка на метку внутри текущего документа задают так: <А НREF="#название_метки">Текст ссылки</А>. Если в атрибуте HREF задать адрес электронной почты со словом mailto: перед ней, то после выбора такой ссылки можно отправить электронное письмо, где в поле Кому будет записан этот адрес. << Назад 2 Вперед >>

Пример 2. 3. HTML-документ, в котором используются Гипперссылки и якоря << Назад 2 Вперед >>

Текстовые гиперссылки << Назад 2 Вперед >>

Текстовые гиперссылки Для изменения этих цветов добавим соответствующие атрибуты к тегу <BODY>: <BODY LINK=magenta ALINK=yellow>. Это означает, что после первой загрузки вебстраницы, все гиперссылки будут фиолетового цвета, а если посетитель воспользуется одним из них, то цвет текста станет желтым. Это удобно, когда на вебстранице есть много ссылок, и посетитель желает поочередно просмотреть их: тогда предоставления другого цвета посещенным гиперссылкам позволяет систематизировать такой просмотр. << Назад Вперед >> 2

Нумерованные и маркированные списки Для представления текста в структурированном виде, когда каждый абзац выделен с помощью отметки или номера, предназначены списки. В HTMLдокументах используют три вида списков: 1. 2. 3. • неупорядоченный (маркированный); • упорядоченный (нумерованный); • список определений. << Назад 2 Вперед >>

Маркированные списки В маркированном списке для выделения элементов используются определенные отметки (точки, квадраты и т. п). Начинается такой список с тега <UL>, а заканчивается — </UL>. Каждый элемент списка начинается с тега <LI>. Тег <UL> может иметь атрибут TYPE, который определяет форму отметки. Этот атрибут принимает следующие значения: 1. • disk — закрашенный круг; 2. • circle — круг; 3. • square — маленький черный квадрат. << Назад 2 Вперед >>

Нумерованный список В упорядоченном списке все элементы пронумерованы. Начинается список с тэга <OL>, а заканчивается </OL>. Каждый элемент такого списка начинается с тега <LI>. Тег <OL> может иметь атрибут TYPE, который определяет тип нумерации. Этот атрибут принимает следующие значения: А — большая буква; а— маленькая буква; і — маленькая римская цифра; I — большая римская цифра; 1 — арабская цифра. << Назад 2 Вперед >>

Нумерованный список В случае необходимости с помощью атрибута START можно задать отличный от единицы начальный номер элемента, например <0 L TYPE="I" START="5">. Нумерованный список, первый элемент которого обозначен латинской буквой Е, которая является пятой в алфавите, описывают так: <0 L TYPE="A" START="5"> <LI> Первый элемент списка </LI> <LI> Второй элемент списка </LI> <LI> Третий элемент списка </LI> <LI> Четвертый элемент списка </LI> </0 L> << Назад 2 Вперед >>

Cписок определений Возможно, возникнет необходимость разместить на сайте список слов (малознакомых, редко используемых или требующих объяснений) с пояснениями (определениями), что они означают. Для этого можно использовать списки определений. Список определений (definition list) по сравнению с маркированным или нумерованным имеет несколько более сложную структуру. Каждый элемент такого списка состоит из двух частей: термина и его определения. Таким образом могут быть оформлены словари и терминологические справочники. Списки определений можно создать с помощью тега <dl> с закрывающим тегом </dl>. При этом внутри этого списка для выделения слов (терминов) используется тег <dt>(</dt>), а для их определений используется тег <dd>(</dd>). В HTML закрывающие теги </dt> и </dd> можно не указывать. Элементы обозначенные тегом <dt> как сроки, отображаются браузерами практически без отступлений. Элементы обозначенные тегом <dd> как определения, отображаются браузерами с относительно большим отступом, эти теги не маркируются. << Назад 2 Вперед >>

Cписок определений Структура списка определений. Термин 1 Определение термина 1 Термин 2 Определение термина 2 Пример 1. Общая структура списка определений <html> <body> <dl> <dt>термин 1</dt> <dd>Определение термина 1</dd> <dt>термин 2</dt> <dd>Определение термина 2</dd> </dl> </body> </html> << Назад 2 Вперед >>

Cписок определений Пример 2. Создание списка определений <html> Результат данного примера. <body> <dl><dt>Лев</dt> Лев <dd>Хищное животное из семейства кошачьих. Характеризуется длинным хвостом с кисточкой на конце и гривой. Обитает в Африке. </dd> Обитает в Африке. <dt>Клетка</dt> Клетка <dd>Инструмент для поимки льва. Это большая коробка, боковые стенки которой большая коробка, боковые стенки сделаны из стальных прутьев. </dd> которой сделаны из стальных прутьев. </dl> </body> </html> << Назад Вперед >> 2

Пример маркированного списка Пример 2. 1. Маркированный список, в котором для обозначения элементов используют круг <HTML> <TITLE>Радуга</TITLE> <BODY> <BASEFONT SIZE=6> <ul TYPE=circle> <LI>Красный</LI> <LI>Оранжевый</LI> <LI>Желтый</LI> <LI>Зеленый</LI> <LI>Голубой</LI> <LI>Синий</LI> <LI>Фиолетовый</LI> </ul> </BODY> </HTML> << Назад 2 Вперед >>

Пример нумерованного списка Пример 2. 2. Нумерованный список, в котором для обозначения элементов используют малые римские цифры <HTML> <TITLE>Радуга</TITLE> <BODY> <BASEFONT SIZE=6> <OL TYPE=i> <LI>Красный</LI> <LI>Оранжевый</LI> <LI>Желтый</LI> <LI>Зеленый</LI> <LI>Голубой</LI> <LI>Синий</LI> <LI>Фиолетовый</LI> </OL> </BODY> </HTML> Выполнение практической работы № 3 2 << Назад Вперед >>

Скачать презентацию Информатика Профильное обучение Спецкурс Основы веб-дизайна

Раздел 2. Часть 2.pptx

Количество слайдов: 15