Сдам Сам

ПОЛЕЗНОЕ


КАТЕГОРИИ







Стилевое оформление ссылки





Bы пока еще не добрались в этом курсе до CSS, но будет полезно рассмотреть в этом месте, что способ представления ссылок очень важен, и что имеется несколько различных состояний ссылки, которые надо учитывать. Состояниями (которые позже свяжутся с псевдо селекторами CSS — это звучит угрожающе, но это не сложно) являются:

· link - состояние по умолчанию - оно определяет, как должны выглядеть ссылки в определенной части документа. По умолчанию непосещенные ссылки имеют синий цвет.

· visited - стиль ссылки, которая уже была посещена раньше (онa может уже находиться в кеше браузера). По умолчанию посещенные ссылки имеют пурпурный цвет.

· hover - стиль ссылки, когда курсор мыши находится над ней.

· active - стиль ссылки, когда она активируется, т.е. когда выполняется соединение с другим сайтом; это также стиль последней активированной ссылки, когда вы снова возвращаетесь к документу в своем браузере.

Заключение

Мы рассмотрели в этот раз достаточно много, но очень важно помнить, как работают ссылки, и что они должны делать. Вы узнаете много приемов и методов за свою карьеру разработчика Web, позволяющих переопределить это поведение по умолчанию, и я надеюсь, что вы остановитесь и задумаетесь, действительно ли нужно то, что вы собираетесь сделать. Мы рассмотрели следующие вопросы:

 

· Анатомия элемента a и его (неисключенные) атрибуты.

· Различие между элементами a в качестве ссылок (с атрибутом href) и анкеров (с name).

· Необходимость уникального имени анкера, так как ID также может быть анкером.

· Необходимость сообщить посетителям, что их ждет, когда они следуют по ссылке (какой формат файла и его размер).

· Как добавить информацию через атрибут title, которая выводится как всплывающая подсказка - и почему это не является безопасным способом предоставления критически важной информации.

· Различие между внешними (указывающими на сторонние сайты) и внутренними (указывающими на документы на том же сервере) ссылки.

· Устаревшие практики, такие как всплывающие окна и фреймы, и почему нужно избегать их.

· Преимущества использования ссылок и быть объектом ссылки других сайтов.

· Как правильно формулировать ссылки, чтобы они имели смысл из контекста, и почему это необходимо.

· Основы базового стилевого оформления ссылок.

С этими знаниями вы сможете создать документы HTML, которые правильно используют ссылки, и вы будете готовы двигаться дальше к рассмотрению меню и навигации по сайту.

Контрольные вопросы

· Что неправильно в следующей ссылке: <a href="report.pdf" title="report as PDF, 2.3MB">get our latest report</a>?

· Для чего в ссылках используется атрибут target, и имеются ли для него хорошие применения?

· Я говорил об отношениях между ссылками и связях между ссылками и анкерами. Существует ли также атрибут для ссылок, который описывает отношения между документами?

· Как можно написать ссылку, которая после щелчка на ней направляет посетителей в элемент дальше вниз на странице? Что необходимо сделать заранее?

Лекция 19:

Таблицы HTML

Аннотация: Рассказывается, как правильно использовать таблицы HTML, какие элементы и атрибуты для этого используются. А также, даются некоторые сведения, как с помощью CSS можно улучшить вид таблицы

Введение

Как использовать стандарты Web для организации множества данных? Сама идея множества вложенных элементов, необходимых для превращения всех данных в симпатичные строки и ячейки должна привести мозг в состояние тревоги, но к счастью решение есть — на помощь приходят таблицы! В Web -дизайне таблицы являются хорошим способом организации данных в табличной форме. Другими словами, благодаря таблицам, диаграммам, и другой графической информации, которая помогает увидеть и превратить большой объем информации в сводку, которая позволяет сравнивать и сопоставлять различные фрагменты данных. Вы встречаете их постоянно на Web -сайтах, где они представляют итоги сравнения результатов политических выборов, спортивной статистики, сравнения цен, таблицы размеров, или другие данные. Раньше в доисторические времена Интернет, прежде чем CSS стал популярен в качестве средства разделения представления и структуры HTML, таблицы использовались в качестве средства компоновки Web -страниц — для создания столбцов, боксов, и общей организации контента. Это неправильный способ решения этих вопросов; использование таблиц для компоновки приводит к громоздким, беспорядочным страницам с множеством вложенных друг в друга таблиц — т.е. большие размеры файлов, трудности с обслуживанием, трудности с модификацией после создания. Можно до сих пор видеть в Web такие сайты, но сегодня необходимо использовать таблицы только для того для чего они предназначены — табличных данных — и использовать CSS для управления компоновкой. Здесь мы рассмотрим, как правильно использовать таблицы HTML - лекция имеет следующую структуру:

· Самая общая таблица

· Добавление некоторых свойств

· Дополнительная структуризация таблицы

· Помощь CSS: улучшение вида таблицы

· Заключение

· Дополнительное чтение

· Контрольные вопросы

Самая общая таблица

Я начну с семантического кода HTML, требуемого для представления таблицы — этот конкретный пример сравнивает последние вулканические извержения в тихоокеанском регионе Северной Америки.

Первая таблица выглядит следующим образом:

<table> <tr> <td>Volcano Name</td> <td>Location</td> <td>Last Major Eruption</td> <td>Type of Eruption</td> </tr> <tr> <td>Mt. Lassen</td> <td>California</td> <td>1914-17</td> <td>Explosive Eruption</td> </tr> <tr> <td>Mt. Hood</td> <td>Oregon</td> <td>1790s</td> <td>Pyroclastic flows and Mudflows</td> </tr> <tr> <td>Mt.St. Helens</td> <td>Washington</td> <td>1980</td> <td>Explosive Eruption</td> </tr></table>

Это код представляет таблицу следующим образом:

Volcano Name Location Last Major Eruption Type of Eruption
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt.St. Helens Washington   Explosive Eruption

Давайте начнем с разбора разметки HTML, использованной в приведенном выше коде:

· <table></table>: Элемент table нужен, чтобы указать браузеру, что контент необходимо организовать в табличном виде.

· <tr></tr>: Элемент tr определяет строку таблицы. Это позволяет браузеру организовать содержимое между тегами <tr> и</tr> в горизонтальном виде, или все в строке.

· <td></td>: Элемент td определяет ячейку таблицы или каждое отдельное пространство для контента в строке. Используйте только столько ячеек таблицы td, сколько требуется для реальных данных. Не используйте пустые ячейки td для пробелов или заполнения - для требуемых пробелов или заполнения используется CSS, так как это не только хороший способ разделить представление и структуру, но также облегчает понимание таблицы для людей с недостатками зрения, которые используют считыватели экрана для чтения содержимого таблицы.

Отметим, что базовые элементы должны быть вложены друг в друга следующим образом:

<table> <tr> <td>контент </td> <td> контент </td> <td> контент </td> </tr></table>

Упорядочивание их в другом виде приведет к тому, что браузер представит таблицу странным образом, если вообще что-то сделает.







ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала...

ЧТО ТАКОЕ УВЕРЕННОЕ ПОВЕДЕНИЕ В МЕЖЛИЧНОСТНЫХ ОТНОШЕНИЯХ? Исторически существует три основных модели различий, существующих между...

Конфликты в семейной жизни. Как это изменить? Редкий брак и взаимоотношения существуют без конфликтов и напряженности. Через это проходят все...

ЧТО ПРОИСХОДИТ, КОГДА МЫ ССОРИМСЯ Не понимая различий, существующих между мужчинами и женщинами, очень легко довести дело до ссоры...





Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:


©2015- 2024 zdamsam.ru Размещенные материалы защищены законодательством РФ.