Все коды,смотреть,скачать,скопировать,#Всекоды,#смотреть,#скачать,#скопировать,

Код простой страницы скопировать.

#Кодпростойстраницыскопировать,#Кодпростойстраницы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ Без Имени</title>
</head>
Напишем текст, чтобы мы, могли его увидеть!
<body>
</body>
</html>

Кодировка страницы.

Как сделать мета теги?

Тема мета теги.

Meta content language.

Как сделать рамку в css?

img { background-color: #FFFFFF; border: 1px solid #B7B7B7; padding: 10px; }

background-color – цвет заднего фона

border - толщина рамки

solid - сплошная рамка

padding – отступ от фото.

Текст.

Тема №1 - Как изменить расстояние между строк в css?

line-height

p.Primer-line-height {
font-size: 17px;
line-height: 1em;
}

Тема № 2 - Установить шрифты на сайте.

/* CSS Document */
/* butter.ttf */
@font-face {
font-family: 'Beast vs Buttercrumb';
src: url('../../1969/fonts/butter.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

p.Beast-vs-Buttercrumb {
text-decoration: none;
font-family: Beast vs Buttercrumb;
font-size: 25px;
color: #000000;
}

<p class="Beast-vs-Buttercrumb">Пример шрифта подключенного через фонт файсе и церез ЦСС.</p>

<p class="Beast-vs-Buttercrumb">I eti ge slova mogno napisat v latinitse - simple @font-face in css</p>

----------------------------------------------------------------------------

@font-face {
font-family: 'Beast vs Buttercrumb';
src: url('../../1969/fonts/butter.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

#rightPan p.Beast-vs-Buttercrumb {
text-decoration: none;
font-family: Beast vs Buttercrumb;
font-size: 25px;
color: #000000;
}
-->
</style>

<p class="Beast-vs-Buttercrumb">Текст со стилем, и шрифтом прописанным через @font-face, который втроен в саму страницу!</p>

Тема № 3 - Размер шрифта css

p .Razmer-shrifta-css-Primer {
color:#000000;
font-size: 25px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}

<p class="Razmer-shrifta-css-Primer">Пример шрифта, который мы изменили</p>

<div class="Razmer-shrifta-css-Primer">
<p>Здесь будет располагаться текст, который в диве</p>

<p>Здесь будет располагаться текст-2, который в диве</p>
</div>

.Razmer-shrifta-css-Primer p{
color:#000000;
font-size: 35px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}

#rightPan .Razmer-shrifta-css-Primer p{
color:#000000;
font-size: 25px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}
-->
</style>

<p class="Razmer-shrifta-css-Primer ">Текст на странице, к которому будет прикреплён новый стиль, и он будет отличаться от основного текста, своим размером!</p>

Тема № 4 -Цвет шрифта на сайте .

/* CSS Document */
p{
color:#000000;
font-size: 17px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}
.Tsvet-shrifta-Primer{
color: #F50B0E;
font-size: 17px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}
.Tsvet-shrifta-Primer p{
color: #2E06F9;
font-size: 17px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}

<p>Этот текст, заключён в абзац, и он будет на странице по умолчанию, т.е., как только вы создадите абзац, с текстом, то он будет именно этого цвета!</p>
<p class="Tsvet-shrifta-Primer">Этот текст будет написан с именным цветом шрифта на красный.</p>
<div class="Tsvet-shrifta-Primer">
<p>Этот текст наспан в диве, к которому прикреплён класс, с изменённым цветом шрифта на синий.</p>
</div>

--------------------------------------------------

#rightPan p.Razmer-shrifta-css-Primer{
color: #F50B0E;
font-size: 17px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}

Тема № 5 - Текст справа

<p align="right">Пример текста, который поставлен справа.</p>

--------------------------------------------

<p class="Text-sprava-Primer">Наш текст написан справа, к нему прикреплён класс - Text-sprava-Primer.</p>
<p class="Text-sprava-Primer"> И любой текст, к которому вы прикрепите данный класс на этой странице, окажется справа.</p>

-------------------------------------------

<p class="Text-sprava-Primer">Данный текст, размещён на странице к которой прикреплён файл css!</p>
<p class="Text-sprava-Primer"> В котором прописан класс, а в нём свойство текст справа.</p>

/* CSS Document */
.Text-sprava-Primer{
text-align:right;
}

Смотрим на файл ccs, в котором прописано свойство текста справа.

Смотрим, что у нас получилось!

Тема №6 - Как сделать текст жирным .

<strong>Ваш текст, который нужно сделать жирным!</strong>

. Girniy-text{
font:10pt/normal Verdana, Arial, Helvetica, sans-serif;
color:#003366;
font-weight: bold;
}

<p class="Girniy-text">Этот текст, который вы читаете написан жирным потому, что к нему прикреплён класс, в котором эта жирность прописана!</p>

Смотрим на файл css, смотрим пример старницы с жирным текстом внутри.

Ссылки.

Тема № 1.- Сделать ссылку в Dreamweaver.

Тема № 2. - Ссылка в блокноте,

<p><a href="http://doing-sites.narod.ru/">Код ссылки в блокноте.</a></p>

Код ссылки в блокноте.

Где:

<p> - начало нового абзаца.

</p> - конец абзаца.

<a href="ваша,ссыдка"> - начало ссылки.

Текст между верхним и нижним элементом – будет выглядеть как текст, на котором поставлена ссылка.

</a> - конец ссылки.

Тема №3- Ссылка на картинке, как сделать,

Где:

Расположение картинки по центру:

p align="center"

Сама ссылка, куда пойдет странник.

a href="http://doing-sites.narod.ru/

Абсолютный путь к файлу изображения.

src="../../1_foto/9/image002.jpg"

Ширина изображения:

width="229"

Высота изображения :

height="33"

Окантовка:

border="1"

Тема № 4- target-blank - Ссылка в новом окне.

<p>Вот <a href="http://doing-sites.narod.ru/" target="_blank">ссылка</a> на мой сайт. </p>

Вот ссылка на мой сайт.

Тема №5 - Цвет ссылки.

1.1.

------------------------------------------------------

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример цветной ссылки.</title>
<style type="text/css">

</style>

</head>

<body>
<p><a href="#">Код цветной ссылки.</a></p>
</body>
</html>

1.2.

--------------------------------------------------------------

------------------------------------------------------------

#rightPan a{
padding: 0 10px 0;
color: #2F5958;
background-color: #D3F1EF;
text-decoration: none;
font-size: 16px;
}

Тема № 6 - Цвет текста ссылки.

<a href="#">Код цвета текста ссылки.</a>

Где:

<a href="#"> начало ссылки.

</a> - конец ссылки

# - сама ссылка.

"Код цвета текста ссылки" – текст ссылки.

<a>

Код стиля цветного текста ссылки.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример цвета текста ссылки.</title>
<style type="text/css">

</style>
</head>
<body>
<p><a href="#">Код цвета текста ссылки.</a></p>
</body>
</html>

Цвет красный:

#rightPan .Primer-ismenennogo-tsveta-texta-ssilki-1 a{
color: #F4F307;
background-color: #F4F307;
font-size: 20px;
}

<p class="Primer-ismenennogo-tsveta-texta-ssilki-1"><a href="#" >Код цветной ссылки.</a> </p>

Сделать ярлык сайта

Prop3=19,2
[InternetShortcut]
URL=http://doing-sites.narod.ru/

Фото.

Тема - № 1 - Поставить фото на страницу сайта

<img src="../1_foto/Foto/Foto.jpg" width="500" height="362" alt="ракушка для примера"/>.

ракушка для примера

Таблицы:

Тема - таблицы, № 1 - Как сделать таблицу.

Тема - таблицы, № 2 - Как сделать таблицу в Dreamweaver? + Как сделать таблицу в блокноте html

<table width="500" border="1">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table

Тема - таблицы, № 3 - Как изменить границу у таблицы html?

Код таблицы, с границей в 10 пикселей:

Тема - таблицы, № 4 - Как изменить ширину таблицы.

Тема - таблицы, № 5 - Как изменить цвет фона у таблицы в html.

<tr>

</tr>

</table>

CSS.

Тема CSS, № 1 - Что такое float!?

fpoat-primer-left

fpoat-primer-right

Код:

<div class="fpoat-primer-left">Div –позиция слева</div>

<div class="fpoat-primer-right">Div – позиция справа </div>

И там же на старнице создадим два разных стиля, в них отличается лишь значение Float.

1.Стиль Float- слева:

.fpoat-primer-left { float: left; /* Обтекание по правому краю */

background: #fd0; /* Цвет фона */

border: 1px solid black; /* Параметры рамки */

padding: 10px; /* Поля вокруг текста */

margin-right: 20px; /* Отступ справа */

width: 20%; /* Ширина блока */

2. Стиль Float- справа:

.fpoat-primer-right { float: right; /* Обтекание по левому краю */

background: #fd0; /* Цвет фона */

border: 1px solid black; /* Параметры рамки */

padding: 10px; /* Поля вокруг текста */

margin-right: 20px; /* Отступ справа */

width: 20%; /* Ширина блока */

Тема № 2 - Как сделать отступ абзаца через CSS.

p { text-indent: 10px;}

#rightPan p{
color:#000000;
font-size: 17px;
letter-spacing: 0.08em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
}

Тема № 3- Как прикрепить таблицу стилей css?

файл стилей вы можете посмотреть по этой ссылке:

/* CSS Document */
/*----------------- Primer ------------------*/
.primer-s-tsvetom{
background-color:#D7EB0E;
width: 500px;
height:500px;
}
/*----------------- /Primer ------------------*/

Код нашей страницы, которую вы можете посмотреть вот по этому адресу:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример, как прикрепить таблицу стилей!</title>
<link href="../../css/New-css/Prikrepit-tablitsu-stiley-Primer.css " rel="stylesheet" type="text/css" />
</head>
<body>
<div class="primer-s-tsvetom"></div>
</body>
</html>

DIV.

Тема № 1 - Цвет div, фон, код,css,пример.

Вариант №1.

style="background-color:red"

<div style="background-color:red" >Пример div с цветным фоном.</div>

Вариант №2.

/* CSS Document */
/*----------------- Primer ------------------*/

.primer-s-tsvetom{
background-color:#D7EB0E;
width: 500px;
height:500px;
}

/*----------------- /Primer ------------------*/

Тема № 2 - Div слева.

<div class="fpoat-pologenie-sleva">Div –позиция слева</div>

/* CSS Document */
/*----------------- Primer ------------------*/
. fpoat-pologenie-sleva {
float: left; /* Обтекание по правому краю */
background: #fd0; /* Цвет фона */
width: 300px; /* Ширина */
height:300px; /* Высота */
}

/*----------------- /Primer ------------------*/

Тема № 3 - Div справа.

<div class="fpoat-pologenie-sprava">Div –позиция слева</div>

/* CSS Document */
/*----------------- Primer ------------------*/
. fpoat-pologenie-sprava {
float: right; /* Обтекание по левому краю */
background: #fd0; /* Цвет фона */
width: 300px; /* Ширина */
height:300px; /* Высота */
}
/*----------------- /Primer ------------------*/

Тема № 4 - div по центру

<div class=" Div-pologenie-po-tsentru ">Div –позиция слева</div>

/* CSS Document */
/*----------------- Primer ------------------*/
. Div-pologenie-po-tsentru {
margin:0 auto;/* Положение по центру */
background: #fd0; /* Цвет фона */
width: 300px; /* Ширина */
height:300px; /* Высота */
}
/*----------------- /Primer ------------------*/

Фон.

Тема № 1. - Фон страницы.

Пример -1.

Пример - 2.

Файл css .

/* CSS Document */
body{
background-color: #CCCEEB;
}

Тема № 2 - Как поставить картинку на задний фон страницы

body{
background-image: url(../1_foto/Oboi-na-zadniy-Fon/Venice.jpg);
}

--------------------------------------------------------