HTML, CSS. Гиперссылки. Принципы навигации web-сайта

1. HTML/CSS

ГИПЕРССЫЛКИ. ПРИНЦИПЫ НАВИГАЦИИ WEB-САЙТА

2. Что такое гиперссылки?

ЧТО ТАКОЕ ГИПЕРССЫЛКИ?
• Какие составные части должны быть у ссылки?

3. a

A
<a href=“newpage.html" target=“_blank”>Ссылка</a>
target
_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно.
_parent
Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

4. Ссылка внутрь документа

ССЫЛКА ВНУТРЬ ДОКУМЕНТА
• <a href=“#id" target=“_blank”>Ссылка</a>
• ….
• <div id=“id>…</div>
• (HTML5, в версиях ниже используется атрибут name)

5. Смешанные ссылки

СМЕШАННЫЕ ССЫЛКИ
• <a href=“page2.html#anchor" target=“_blank”>Ссылка</a>
• Переход на элемент с id=“anchor” на странице page2.html

6. Оформление ссылок

ОФОРМЛЕНИЕ ССЫЛОК
• color – цвет
• text-decoration – подчеркивание
• display – сделать ссылки блочными

7. cursor

CURSOR
• Устанавливает форму курсора, когда он находится в пределах элемента. Вид
курсора зависит от операционной системы и установленных параметров
• cursor: [url('путь к курсору'),] | [ auto | crosshair | default | e-resize | help | move | nresize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text |
w-resize | wait ]

8.

9. Создание меню с помощью тега списков

СОЗДАНИЕ МЕНЮ С ПОМОЩЬЮ ТЕГА СПИСКОВ
• Отдельные пункты меню должны быть внутри списка
• оформление с помощью css:
• Убрать оформление списка
• Убрать оформление ссылок
• Добавить размеры
• Изменить способ отображения элемента на строчный

10. Псевдоклассы

ПСЕВДОКЛАССЫ
• Псевдоклассы определяют динамическое состояние элементов, которое
изменяется с помощью действий пользователя, а также положение в дереве
документа.

11. Псевдоклассы

ПСЕВДОКЛАССЫ
• a:link { ... } – все ссылки
• a:visited { ... } – посещённые ссылки
• a:hover { ... } – ссылки, на которые наведен курсор
• a:active { ... } – активные ссылки, мышь нажата
• hover можно использовать со всеми элементами

12.

• селектор: first-child { ... }
• селектор: last-child { ... }
• селектор: first-of-type { ... }
• селектор: last-of-type { ... }
• селектор:nth-child(odd | even | <число> | <выражение>) {...}

13. Псевдоэлементы

ПСЕВДОЭЛЕМЕНТЫ
• Псевдоэлементы позволяют задать стиль элементов не определённых в дереве
элементов документа, а также генерировать содержимое, которого нет в исходном
коде текста.

14. ::after, ::before

::AFTER, ::BEFORE
• Псевдоэлементы, который используется для вывода желаемого текста после
содержимого элемента, к которому он добавляется. Псевдоэлементы ::after и
::before работает совместно со свойством content.
• Запись
• selector::after либо selector:after
• ::after – CSS3
• :after – CSS2

15. Таблицы

ТАБЛИЦЫ

16. <table> <tr> <td>

<TABLE> <TR> <TD>
• <table>
• <tr> <td>...</td> </tr>
• </table>

17.

• <table border=‘’>
• Устанавливает толщину рамки в пикселах.
• css
• td {
• border:
• }
• border-top, border-bottom, border-left, border-right

18. cellspacing, cellpadding

CELLSPACING, CELLPADDING
• cellspacing
• Задает расстояние между внешними границами ячеек
• <table cellspacing=“”>
• css: border-spacing: 7px 11px;
• cellpadding
• Определяет расстояние между границей ячейки и ее содержимым.
• <table cellpadding="значение">...</table>
• css: padding

19. width height

WIDTH HEIGHT
• Любое целое значение в пикселах или процентах от доступного пространства.
• css
• table {
• width: 400px;
• height: 400px;
• }

20. align valign

ALIGN VALIGN
• <td align="left | center | right | justify ">...</td>
• <td valign="top | middle | bottom | baseline">...</td>
• css
• vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|inherit |
значение | проценты
• text-align: center | justify | left | right | start | end

21.

• <td bordercolor="цвет">...</td>
• <td bgcolor="цвет">...</td>
• <td background="URL">...</td>
• css
• border, background-image, background-color

22. colspan, rowspan

COLSPAN, ROWSPAN
• Устанавливает число ячеек, которые должны быть объединены
• <td colspan="число">...</td>
• <td rowspan="число">...</td>

23. thead tbody tfoot

THEAD TBODY TFOOT