|
|
Ссылки на другие документы и файлы.Одним из важнейших понятий для HTML-документов являются ссылки. Гипертекстовый документ – это документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому. Ссылка состоит из двух частей. Первая – это то, что вы видите на Web-странице; она называется указатель ссылки. Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL-адрес). Указателем ссылки может быть слово или изображение. Внешний вид ссылки зависит от его типа, способов создания и установок программы просмотра читателя. Указатели бывают двух типов – текстовые и графические. Пример, записи для текстового указателя ссылки: <a href=”example.html”> Этот текст является указателем ссылки </a>. Пример графического указателя ссылки: <a href=”example.html”> <img src=”picture.gif”> </a>. Правила записи ссылок. Для организации ссылки необходимо сообщить браузеру, что является указателем ссылки, а также указать адрес документа, на который вы ссылаетесь. Оба действия выполняются при помощи тэга <a>. Этот тэг имеет параметр href, значением которого является URL-адрес. Указатель может быть как относительным, так и абсолютным. Внутренние ссылки. Кроме ссылок на другие документы, часто бывает полезно включить ссылки на разные части текущего документа. Например, большой документ читается лучше, если он имеет оглавление со ссылками на соответствующие разделы. Для построения внутренней ссылки сначала нужно создать указатель, определяющий место назначения. Например, если необходимо сделать ссылку на текст определенной главы документа, нужно разместить там указатель и дать ему имя при помощи параметра name тэга <a>. При этом, параметр href не используется, и браузер не выделяет содержимое тэга <a>. Например, <a name=chapter_5> </a>. После того как место назначения определено, можно приступить к созданию ссылки на него. Для этого, вместо указания в параметре href адреса документа нужно поместить туда имя ссылки с префиксом #, говорящим о том, что это внутренняя ссылка. Контрольные вопросы:
1. В чем отличии между тэгами логического и физического форматирования? 2. Какова структура HTML-документа? 3. Что такое внутренние ссылки и для чего они используются? 4. Что такое тэг? 5. В каком году была разработана первая спецификация HTML?
Список использованных источников 1. Ливингстон Д., Белью К., Браун М. Perl 5. Web-профессионалам:Пер. с англ.- К.:BHV.2001. 2. Косентино К. PHP. Web-профессионалам: Пер. с англ. – К.: BHV,2001. 3. Кузнецов С.Д РНР 4.0. Руководство пользователя. – М.:Майор, 2001 4. Леонтьев Б. Web-дизайн: Хитрости и тонкости: - М.: МиК, 2001. 5. Николенко Д.В. Практические занятия по Java Script. СПб.:2002. 6. Гультяев А.К. Машин В.А. Уроки Web-мастера. СПб.:2002. 7. Рик Дарнелл. Javascript-справочник.2001.
ТЕМА 5. ТЕХНОЛОГИЯ ПОЛЬЗОВАНИЯ В HTML CSS. ОСОБЕННОСТИ DHTML, XHTML, XML. ТЕХНОЛОГИИ ИСПОЛНЯЮЩИЕСЯ НА СТОРОНЕ КЛИЕНТА И СЕРВЕРА. Цель: Описать принцип работы технологии пользования в HTML CSS. Формирование умений создания HTML-документов с применением каскадных таблиц стилей.Рассмотреть особенности DHTML, XHTML, XMLи технологии исполняющиеся на стороне клиента и сервера.
План: Технология пользования В HTML CSS Особенности DHTML, XHTML, XML Динамический НТМL в Internet Explorer. Технология пользования В HTML CSS Основные проблемы, с которыми сталкивались разработчики сайтов до появления CSS: o Проблема позиционирования (разметка страниц). Хотя для этого стали использовать таблицы (они небыли для этого предназначены изначально), они не решили всех проблем. Не возможно осуществить следующее: o Вторая проблема заключалась в том, что приходилось каждый раз задавать на страницах размер и цвет шрифта, свойства ячеек таблицы и т.д. Это сильно увеличивало размеры страницы, а значит, она медленнее загружается. В случае если вам захотелось изменить цвет или размер шрифта, вам пришлось бы редактировать все страницы. o Третья проблема заключалась в том, что все браузеры имеют индивидуальные настройки. Например, в браузере можно увеличить шрифт, что приведет к искажению всей страницы. С помощью CSS эти проблемы можно решить. Способы применения CSS Существует три способа применения таблиц стилей: o Внутренние таблицы стилей (Inline Style Sheets) - при помощи специального атрибута помещаются прямо в HTML теги. Пример CSS: Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать, только если необходимо задать определенному элементу свой индивидуальный стиль. o Глобальные таблицы стилей (Global Style Sheets) - определяют стиль элементов во всем документе. Пример: <html> <body> Теперь эти стили можно применять в любом месте html-кода. Для этого используются следующие конструкции: <h1> Этот заголовок написан крупным красным курсивом </h1> В данном примере все элементы H1 будут написаны крупным красным курсивом, все элементы с указанным классом BLUE будут синими. o Связанные таблицы стилей (Linked Style Sheets) - могут быть использованы для нескольких документов сразу и хранятся во внешнем файле. Пример внешнего файла: Файл main.css
В самих же HTML документах делается ссылка на этот файл при помощи тега <LINK>. Выглядит это так: Пример: Файл Index.html <html> Это самый удобный способ, и для основной таблицы стилей рекомендуется пользоваться именно им. Почему каскадные? Каскадность заключается в том, что стили могут переопределяться. Приведенный ниже список способов внедрения стилей соответствует порядку переопределения. Нижерасположенный способ может переопределять вышерасположенный. Способы внедрения стилей на странице: o использование отдельного стилевого файла и вставка его при помощи тега <link> o описание стиля в заголовке документа o применения стиля как параметра в теге. Например, мы определили во внешнем стилевом файле, что текст в теге <p> должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге <p> должен быть написан шрифтом в 12 пунктов, то текст будет выведен шрифтом 12 пунктов - т.е. стиль в заголовке странички переопределил стиль во внешнем файле. Для чего это нужно? Предположим, что для всех ссылок в заголовке на нашей страничке определен следующий стиль: <style type="text/css"> И, следовательно, любой текст, который является гиперссылкой, автоматически становится красным и перестает быть подчеркнутым. И вот мы решили в конце странички указать ссылку на сайт автора странички, но сделать это не сильно заметно, чтобы не акцентировать на этом внимание. Сделать это нам нужно всего лишь в одном месте странички и определять для этого дополнительный класс нецелесообразно. Достаточно локально переопределить цвет ссылки: <a href="http://www.pupkin.ru"><span style="color: #000000;">Вася Пупкин</span></a> или так Сделали мы это при помощи атрибута style, а он действует лишь в пределах того тега, в котором был определен. Тег <span></span> определяет некую область, к которой мы можем применить стиль. Наследование Некоторые значения наследуются дочерними элементами (тегами). Предположим, что имеется элемент H1, в котором расположен элемент выделения EM: <H1>Данный заголовок <EM>очень</EM> важен!</H1> Если для элемента EM не задан цвет, то слово "очень" унаследует цвет родительского элемента. Таким образом, если для H1 определен синий цвет, то и элемент EM будет представлен, синим цветом. Определение свойств стиля, используемого в документе по умолчанию, можно осуществить в корневом элементе дерева данного документа. Например, в языке HTML эту возможность можно реализовать с помощью элементов HTML или BODY.
Например, свойство 'color' является наследуемым, поэтому все потомки элемента BODY унаследуют цвет 'black': BODY { color: black; } Значения, заданные в процентах, не наследуются, а вычисляемые значения наследуются. Пример(ы): Пусть задана следующая таблица стиля: BODY { font-size: 10pt } и фрагмент документа: <BODY> Свойство 'font-size' элемента H1 будет иметь вычисленное значение '12pt' (120% от 10pt, являющегося значением свойства родительского элемента). Так как вычисляемое значение свойства 'font-size' является наследуемым, то элемент EM также будет иметь вычисленное значение '12pt'. Синтаксис CSS Все объявления CSS (официально они называются "селекторы") записываются в фигурных скобках:
Описание каждого класса делается при помощи конструкции, подобной этой: .small { font-size: 9pt; } Сначала указывается имя класса - оно может быть произвольным, но желательно все-таки давать осмысленное название. Далее, в фигурных скобках {} перечисляются все необходимые параметры для данного класса. Параметры отделяются друг от друга точкой с запятой. Вот еще один пример, в котором используется более длинное описание: .small { font-size: 9pt; color: #eeeeee; text-align: center; } Универсальный класс - может быть применен к любому тегу, имя класса начинается с точки. Пример: <p class=small>Накладываем стиль на этот текст</p> Теговые классы - может быть применен к конкретному тегу, имя класса начинается с указания тега, после точки записывается имя класса. Пример: p.small { font-size: 9pt; } Класс, определенный таким образом, сработает только в том теге, для которого он предназначен, а для всех остальных будет проигнорирован:
Мы можем определять параметры не только для одного тега, но и сразу для нескольких. Для этого в определении стиля достаточно перечислить их через запятую: P, TD, LI { font-size: 9pt; color:green;} В случае переопределения существующих тегов, в описании стиля можно указывать не все параметры, а лишь те из них, которые мы хотим изменить. Все остальные параметры примут значения по умолчанию, которые для разных тегов различны. Псевдоклассы В CSS есть такое понятие как псевдокласс. В отличие от обычного класса, действие псевдокласса распространяется не на весь текст, к которому применен данный стиль, а лишь на его часть и возможно лишь в определенном состоянии. Чтобы было понятнее, давайте разберем эффект, при котором ссылки подчеркиваются лишь при наведении на них курсора. Эффект достаточно распространенный, и его можно наблюдать в том числе и на этом сайте. Вот фрагмент таблицы стилей, который позволяет достигать вышеописанного эффекта: a { text-decoration: none; } Верхняя строчка - это переопределение стандартного тега <a>, которое запрещает подчеркивать ссылки, а вот нижняя - это определение стиля для псевдокласса hover, который описывает стиль ссылки в момент, когда курсор находится над ней. А вот и другой пример псевдокласса - определение буквицы вначале абзаца: p:first-letter { font-size: 200%; font-weight: bold; } Заметьте, что и в том, и в другом случае действие стиля распространяется либо на определенное состояние (пользователь собирается щелкнуть по ссылке), либо на фрагмент текста (изменяется только первая буква абзаца). В этом и заключается смысл псевдоклассов.
Как и в любом достаточно сложном языке, при создании таблицы стилей можно пользоваться комментариями. Пример: /* Этот текст является комментарием */ Для небольших сайтов эта возможность вам вряд ли пригодится, а вот при создании сложных, многоуровневых таблиц стилей комментарии могут пригодиться. Кстати, здесь будет уместно привести золотое правило - чем понятнее названа переменная (в данном случае имя класса), тем меньше комментариев необходимо. Некоторые параметры CSS Некоторые параметры шрифта Некоторые параметры абзаца padding-left: number - отступ от текста слева margin-left: number - отступ от границы слева Единицы измерения в CSS В свойствах, которым требуется указание размеров, можно использовать несколько способов для их задания: o относительный размер в процентах (%) o относительный размер при помощи словесного описания (larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large) o абсолютный размер в типографских единицах - размер может задаваться в пунктах (pt), пиках (pc), средней шириной буквы "m" (em), средней шириной буквы "x" (eх) o абсолютный размер в стандартных единицах длины - размер может задаваться в сантиметрах (cm), миллиметрах (mm), дюймах (in) o абсолютный в пикселях (px) Задание цвета в CSS Цвет для тех свойств, где это нужно, может быть определен одним из трех способов: o при помощи названия цвета: yellow, red, green, grey,.. o шестнадцатеричным заданием цвета в формате #RRGGBB: #ff0000, #883490, #ffffff,.. o десятичным заданием составляющих цвета в формате rgb(red, green, blue): rgb(255,0,0), rgb(100,23,78),.. Пример использования CSS Назначим для всех состояний ссылок цвета и сделаем так, чтобы ссылки во всех состояниях не имели подчеркивания, а в момент нахождения курсора над ссылкой появлялось подчеркивание.
- ссылка (link) - синий цвет (#0000CC); Используя CSS, мы может отменить или переназначить эффект для ссылок. Для этого используем свойство text-decoration, которое может иметь следующие значения: none - без оформления
Не нашли, что искали? Воспользуйтесь поиском по сайту: ©2015 - 2024 stydopedia.ru Все материалы защищены законодательством РФ.
|