HTML лекция часть2
advertisement
HTML Урок 3. Tags css.
Позиционирование тегов на экране.
Стиль Position:
Описание
Устанавливает способ позиционирования элемента относительно окна браузера
или других объектов на веб-странице.
Синтаксис
position: absolute | fixed | relative | static | inherit
Значения
absolute
Указывает, что элемент абсолютно позиционирован, при этом другие элементы
отображаются на веб-странице словно абсолютно позиционированного элемента и
нет. Положение элемента задается свойствами left, top, right и bottom, также на
положение влияет значение свойства position родительского элемента. Так, если у
родителя значение position установлено как static или родителя нет, то отсчет
координат ведется от края окна браузера. Если у родителя значение position задано
как fixed, relative или absolute, то отсчет координат ведется от края родительского
элемента.
Fixed -По своему действию это значение близко к absolute, но в отличие от него
привязывается к указанной свойствами left, top, right и bottomточке на экране и не
меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не
отображает полосы прокрутки, если положение элемента задано фиксированным, и
оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются
полосы прокрутки, но они никак не влияют на позицию элемента.
Relative -Положение элемента устанавливается относительно его исходного места.
Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его
в ту или иную сторону от первоначального расположения.
Static - Элементы отображаются как обычно. Использование
свойств left, top, right и bottom не приводит к каким-либо результатам.
Inherit - Наследует значение родителя.
Пример
1
HTML Урок 3. Tags css.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style>
.layer1 {
position: relative; /* Относительное позиционирование */
background: #f0f0f0; /* Цвет фона */
height: 200px; /* Высота блока */
}
.layer2 {
position: absolute; /* Абсолютное позиционирование */
bottom: 15px; /* Положение от нижнего края */
right: 15px; /* Положение от правого края */
line-height: 1px;
}
</style>
</head>
<body>
<div class="layer1">
<div class="layer2">
<img src="images/girl.jpg" alt="Девочка" />
</div>
</div>
</body>
</html>
Тег <img>
Тег <img> предназначен для отображения на веб-странице изображений в
графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся
через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на
другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения
отображается рамка, которую можно убрать, добавив атрибут border="0" в
тег <img>.
Рисунки также могут применяться в качестве карт-изображений, когда картинка
содержит активные области, выступающие в качестве ссылок. Такая карта по
внешнему виду ничем не отличается от обычного изображения, но при этом оно
может быть разбито на невидимые зоны разной формы, где каждая из областей
служит ссылкой.
Синтаксис
HTML
<img src="URL" alt="альтернативный текст">
2
HTML Урок 3. Tags css.
XHTML <img src="URL" alt="альтернативный текст" />
Атрибуты
alt - Альтернативный текст для изображения.
width – Ширина изображения.
height – Высота изображения.
Src - Путь к графическому файлу.
Закрывающий тег
Не требуется.
Пример
<img src="images/girl.png" width="189" height="255" alt="Фото моей дочки">
ТЕГ <a>
Тег <a> является одним из важных элементов HTML и предназначен для
создания ссылок. В зависимости от присутствия
атрибутов name или hrefтег <a> устанавливает ссылку или якорь. Якорем
называется закладка внутри страницы, которую можно указать в качестве цели
ссылки. При использовании ссылки, которая указывает на якорь, происходит
переход к закладке внутри веб-страницы.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а
также указать адрес документа, на который следует сделать ссылку. В качестве
значения атрибута href используется адрес документа (URL, Universal Resource
Locator, универсальный указатель ресурсов), на который происходит переход.
Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса
работают везде и всюду независимо от имени сайта или веб-страницы, где
прописана ссылка. Относительные ссылки, как следует из их названия,
построены относительно текущего документа или корня сайта.
Синтаксис
<a href="URL">...</a>
<a name="идентификатор">...</a>
Атрибуты
Title - Добавляет всплывающую подсказку к тексту ссылки.
Href - Задает адрес документа, на который следует перейти.
3
HTML Урок 3. Tags css.
Тег <NAV>
Тег <nav> задает навигацию по сайту. Если на странице несколько блоков
ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо
использовать несколько тегов <nav> в документе. Запрещается
вкладывать <nav> внутрь <address>.
Синтаксис
<nav>ссылки</nav>
Задание 1.
Сделать сайт с меню. И по каждой ссылке разместить картинку героя из мультфильма.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nav</title>
</head>
<body>
<header>
<h1>Чебурашка и крокодил Гена</h1>
</header>
<nav><a href="1.html">Чебурашка</a> | <a href="2.html">Гена</a> |
<a href="3.html">Шапокляк</a> | <a href="4.html">Лариска</a></nav>
<article>
<h2>Добро пожаловать!</h2>
</article>
</body>
</html>
Создаем таблицы <TABLE><TR><TD>
Описание
Элемент <table> служит контейнером для элементов, определяющих
содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются
с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать
следующие
элементы: <caption>, <col>, <colgroup>,<tbody>, <td>, <tfoot>, <th>, <th
ead> и <tr>.
Таблицы с невидимой границей долгое время использовались для верстки вебстраниц, позволяя разделять документ на модульные блоки. Подобный способ
применения таблиц нашел воплощение на многих сайтах, пока ему на смену не
пришел более современный способ верстки с помощью слоев.
Синтаксис
<table>
4
HTML Урок 3. Tags css.
<tr>
<td>...</td>
</tr>
</table>
Закрывающий тег
Обязателен.
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Таблица размеров обуви</title>
</head>
<body>
<table border="1">
<caption>Таблица размеров обуви</caption>
<tr>
<th>Россия</th>
<th>Великобритания</th>
<th>Европа</th>
<th>Длина ступни, см</th>
</tr>
<tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr>
<tr><td>35,5</td><td>4</td><td>36⅔</td><td>23–23,5</td></tr>
<tr><td>36</td><td>4,5</td><td>37⅓</td><td>23,5</td></tr>
<tr><td>36,5</td><td>5</td><td>38</td><td>24</td></tr>
<tr><td>37</td><td>5,5</td><td>38⅔</td><td>24,5</td></tr>
<tr><td>38</td><td>6</td><td>39⅓</td><td>25</td></tr>
<tr><td>38,5</td><td>6,5</td><td>40</td><td>25,5</td></tr>
<tr><td>39</td><td>7</td><td>40⅔</td><td>25,5–26</td></tr>
<tr><td>40</td><td>7,5</td><td>41⅓</td><td>26</td></tr>
<tr><td>40,5</td><td>8</td><td>42</td><td>26,5</td></tr>
<tr><td>41</td><td>8,5</td><td>42⅔</td><td>27</td></tr>
<tr><td>42</td><td>9</td><td>43⅓</td><td>27,5</td></tr>
<tr><td>43</td><td>9,5</td><td>44</td><td>28</td></tr>
<tr><td>43,5</td><td>10</td><td>44⅔</td><td>28–28,5</td></tr>
<tr><td>44</td><td>10,5</td><td>45⅓</td><td>28,5–29</td></tr>
<tr><td>44,5</td><td>11</td><td>46</td><td>29</td></tr>
<tr><td>45</td><td>11,5</td><td>46⅔</td><td>29,5</td></tr>
<tr><td>46</td><td>12</td><td>47⅓</td><td>30</td></tr>
<tr><td>46,5</td><td>12,5</td><td>48</td><td>30,5</td></tr>
<tr><td>47</td><td>13</td><td>48⅔</td><td>31</td></tr>
<tr><td>48</td><td>13,5</td><td>49⅓</td><td>31,5</td></tr>
</table>
</body>
</html>
5
HTML Урок 3. Tags css.
Тег SPAN
Описание
Тег <span> предназначен для определения строчных элементов документа. В
отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью
тега <span> можно выделить часть информации внутри других тегов и
установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно
изменить цвет и размер первой буквы, если добавить начальный и конечный
тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз
стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега
добавить атрибут class или id с именем селектора.
Синтаксис
<span>...</span>
Закрывающий тег
Обязателен.
Атрибуты
Для этого тега доступны универсальные атрибуты и события.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег SPAN</title>
<style>
body {
font-family: Arial, sans-serif; /* Рубленый шрифт */
}
.letter {
color: red; /* Красный цвет символов */
font-size: 200%; /* Размер шрифта в процентах */
font-family: serif; /* Шрифт с засечками */
6
HTML Урок 3. Tags css.
position: relative; /* Относительное позиционирование */
top: 5px; /* Сдвиг сверху */
}
</style>
</head>
<body>
<p><span class="letter">Р</span>азумные люди приспосабливаются к
окружающему миру.
Неразумные люди приспосабливают мир к себе. Вот почему прогресс
определяется
действиями неразумных людей.</p>
<p>Бернард Шоу</p>
</body>
</html>
Списки <UL> <LI>
Описание
Тег <ul> устанавливает маркированный список. Каждый элемент списка должен
начинаться с тега <li>. Если к тегу <ul> применяется таблица стилей, то
элементы <li> наследуют эти свойства.
Синтаксис
<ul>
<li>элемент маркированного списка</li>
</ul>
Закрывающий тег
Обязателен.
Пример
7
HTML Урок 3. Tags css.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег UL</title>
</head>
<body>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
</body>
</html>
8