HTML

1. HTML

САЙТ

2. Фоновая растяжка

ФОНОВАЯ РАСТЯЖКА
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>

3. Где прописываем

ГДЕ ПРОПИСЫВАЕМ
<html>
<head>
<title>Картинка - фон в HTML</title>
</head>
<body style="background-image:url(../images/primer-img.jpg)">
<p>Какой-то произвольный текст.</p>
</body>
</html

4. Кнопки

КНОПКИ
тег button, введём атрибут style и сможем использовать
стилевые свойства.
А это значит, что кнопке можно будет придать более
оригинальное оформление.
Код:
<button style="background: #fdeaa8;
width: 80px; height: 40px;
border-radius: 5px;
box-shadow: 0px 1px 3px; font-size: 20px;">Кнопка</button>

5.

авайте подробно рассмотрим, какие свойства мы применили
для оформления.
1. background: #fdeaa8; — цвет кнопки;
2. width: 80px; — ширина кнопки;
3. height: 40px; — высота кнопки;
4. border-radius: 5px; — закруглённые уголки, если вместо 5px
поставить 50%/50%, то кнопка станет округлой;
5. box-shadow: 0px 1px 3px; — создаёт тень, делает кнопку
более выпуклой;
6. font-size: 20px; — размер текста;
В тег button можно вставить и картинку.

6. Плавающая кнопка сбоку сайта на CSS + HTML

ПЛАВАЮЩАЯ КНОПКА
СБОКУ САЙТА НА CSS +
HTML
<a class="add_palitra" href="адрес сайта/путь
ссылки"><img title="Кнопка палитра" src="адрес
сайта/wp-content/ваш шабллон/путь к картинке"
alt="buttons" /></a>
Как не сложно догадаться, мы добавляем картинку и
оборачиваем ее в ссылку. При желании картинку можно
заменить любым текстом, обернутым в <div>. Текст можно
сделать вертикальным, добавить отступы (padding) и залить
фон цветом. Будет похоже на кнопку.

7. Теперь осталось добавить подходящие стили для нашей плавающей кнопки:

ТЕПЕРЬ ОСТАЛОСЬ ДОБАВИТЬ
ПОДХОДЯЩИЕ СТИЛИ ДЛЯ НАШЕЙ
ПЛАВАЮЩЕЙ КНОПКИ:
.add_palitra { display: block; width: 80px; height: 150px;
position: fixed; right: 0; top: 200px; z-index: 99999; }
Параметры width и height — это ширина и высота изображения.
Корректируйте их под себя. Параметр top — это отступ от
верхнего края экрана. Если хотите скорректировать разную
высоту под разные разрешения экрана, то добавьте что-то такое:
@media screen and (max-width: 480px) { .add_palitra { top:
100px !important; } }
Элемент z-index задает расположения элемента поверх всех
остальных. Учтите, при изменении значения кнопка может
«провалиться» под другие элементы.
right:0 — «прилепляет» картинку или текст к правой части
экрана.

8. CSS

CSS — формальный язык описания внешнего вида
документа, написанного с использованием языка разметки.
Преимущественно используется как средство описания,
оформления внешнего вида веб-страниц, написанных с
помощью языков разметки HTML и XHTML, но может также
применяться к любым XML-документам, например, к SVG или
XUL.

9.

<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="image/girl.jpg" alt="Девочка">
</div>
</div>
</body>
</html>

10. Построение многостраничных сайтов на HTML

ПОСТРОЕНИЕ
МНОГОСТРАНИЧНЫХ САЙТОВ НА
HTML
Итак, у нас есть три html-страницы, которые нужно связать между собой. В
HTML для этого используются теги <a> </a>. Все, что вы поместите внутрь
этих тегов (текст или картинку) станет ссылкой. Это значит, что после
нажатия на то, что вы указали в тегах <a> </a> произойдет переход. Куда?
На страницу, которая указана в атрибуте href.
<tr>
<td colspan="2" width="780" height="38"
background="images/menu.jpg">
<table border="0" cellpadding="5" cellspacing="0">
<tr><td>
<font color="#FFFFFF" size="5">
главная ||шаблоны || контакты
</font>
</td></tr>
</table>
</td>
</tr>

11.

Нам необходимо, чтобы при нажатии на слово "главная" открывалась страница index.html, при
клике по "шаблоны" - html-страница pattern.html, а при клике по "контакты" - html-страница
contact.html. Внесем соответствующие изменения в эту часть кода:
<tr>
<td colspan="2" width="780" height="38"
background="images/menu.jpg">
<table border="0" cellpadding="5" cellspacing="0">
<tr><td>
<font color="#FFFFFF" size="5">
<a href="index.html"> главная ||</a>
<a href="pattern.html"> шаблоны ||</a>
<a href="kontact.html"> контакты </a>
</font>
</td></tr>
</table>
</td>
</tr>

12.

Обратите внимание, наши ссылки стали синего цвета - это
цвет ссылок по умолчанию. Но мы же помещали их в теги
<font> </font>? Это тот самый случай, когда порядок
вложенности тегов играет большую роль. Чтобы ссылки снова
стали белыми, следует теги <font> </font> поместить в теги
<a> </a>, и сделать это придется у всех трех ссылок.

13.

<tr>
<td colspan="2" width="780" height="38"
background="images/menu.jpg">
<table border="0" cellpadding="5" cellspacing="0">
<tr><td>
<font color="#FFFFFF" size="5">
<a href="index.html">
<font color="#FFFFFF" size="5">
главная
</font></a> ||
<a href="pattern.html">
<font color="#FFFFFF" size="5">
шаблоны
</font></a> ||
<a href="kontact.html">
<font color="#FFFFFF" size="5">
контакты
</font></a>
</font>
</td></tr>
</table>
</td>
</tr>

English Русский Rules