Бизнес Форум | Как заработать в интернете ?

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Бизнес Форум | Как заработать в интернете ? » ВЕБ-МАСТЕРСКАЯ » Уроки по сайтостроению

Уроки по сайтостроению

Страница: 1

Сообщений 1 страница 8 из 8

1

  • Автор: pashkagan
  • Супер МАСТЕР
  • pashkagan
  • Откуда: Беларусь, Лида
  • Зарегистрирован: 16-03-2011
  • Приглашений: 0
  • Сообщений: 218
  • Уважение: [+2/-0]
  • Позитив: [+0/-0]
  • Пол: Мужской
  • Возраст: 34 [1990-01-18]
  • Провел на форуме:
    1 день 11 часов
  • Последний визит:
    03-12-2011 19:34:50

Данный раздел предназначен сугубо для уроков по сайтостроению. Вопросы и обсуждения в данной теме запрещены...Для этого создана отдельная тема Вопросы и обсуждение по теме "Уроки по сайтостроению"

0

2

  • Автор: pashkagan
  • Супер МАСТЕР
  • pashkagan
  • Откуда: Беларусь, Лида
  • Зарегистрирован: 16-03-2011
  • Приглашений: 0
  • Сообщений: 218
  • Уважение: [+2/-0]
  • Позитив: [+0/-0]
  • Пол: Мужской
  • Возраст: 34 [1990-01-18]
  • Провел на форуме:
    1 день 11 часов
  • Последний визит:
    03-12-2011 19:34:50

Раздел I.Web-программирование с помощью HTML
Глава 1. Введение

HTML относится к самым простым языкам web-программирования (создания сайтов), тем не менее с его помощью включая дополнительные языки(css, java-script и другие) Вы получаете возможность создавать многофункциональные  и профессиональные сайты.
HyperText Markup Language или сокращенно HTML – язык гипертекстовой разметки документов, продукт W3C консорциума – лежит в основе почти всех существующих web-страниц, что ставит его на первое место в иерархии инструментов для создания сайтов.
Будем проходить вместе этап начиная от самого легкого и закончим на более тяжелым, но я попытаюсь донести до Вас материал как можно проще и понятнее. Действуя моим инструкциям вы без особых трудностей освоите HTML. Повторяйте за мной, ну и если есть какое то желание можете проводить и свои эксперименты, но не нарушайте логической цепочки.
И так приступим.

Глава 2. Структура HTML

Для начала работы создаем Новую папку и называем ее как вздумается, например [inetdoxodu.ru]. В ней и будут храниться все файлы, которые необходимы для правильного функционирования нашего сайта. В папке создаем текстовый документ, будь то Word или Блокнот не столь важно, куда мы будем и вносить наши коды.
Открываем наш текстовый документ и вносим в него следующий код

Код:
<html>
<head>
<title>HTML структура документа</title>
</head>
<body>
<h3>Мой первый заголовок</h3>
<p>Мой первый параграф</p>
<p>Мой второй параграф</p>
</body>
</html>

Теперь поясню что мы сделали:
<html> </html>   - теги которые определяют то, что мы создаем сайт в HTML; требует как открывающий <html>, так и закрывающий </html> теги;
<head> </head> - определяют секцию со служебной информацией, содержат инструкции для поисковиков, для браузеров, скрипты; как и предыдущий требует как открывающего, так и закрывающего тега;
<title> </title>     - с помощью его вы вносите свой заголовок web-страницы; требует как открывающего, так и закрывающего тег;
<body> </body> –  определяют видимую часть документа, так называемое тело документа; требует как открывающего, так и закрывающего тег;
<h3> </h3> – определяют заголовок 3-го уровня;
<p> </p> – определяют параграф.
Все использованные теги Я Вам пояснил... Теперь сохраняем данный документ с расширением .html, например index.html. Открываем любимым браузером (Opera, Mozilla или другими) и смотрим на результат совместных трудов.

Глава 3. Заголовки и их выравнивание

В Главе 2 Вы познакомились с Заголовками 3 уровня, пришло время коснуться их поподробнее. Существует 6 уровней заголовков:

Код:
<html>
<head>
<title>HTML заголовки</title>
</head>
<body>
<h1>HTML заголовок 1-го уровня</h1>
<h2>HTML заголовок 2-го уровня</h2>
<h3>HTML заголовок 3-го уровня</h3>
<h4>HTML заголовок 4-го уровня</h4>
<h5>HTML заголовок 5-го уровня</h5>
<h6>HTML заголовок 6-го уровня</h6>
</body>
</html>

Внесите их в свой документ index.html и вы заметите, чем меньше цифра заголовка, тем больше размер.

Хотелось бы в данной главе затронуть так же и выравнивание заголовков. Их существует 4 вида: выравнивание по правому краю(right), выравнивание по центру(center), выравнивание по левому краю(align), по ширине(justify).
Задается данная команда с помощью тега  align="вид выравнивания"

Код:
<h3 align="left">Заголовок слева</h3>
<h3 align="center">Заголовок по центру</h3>
<h3 align="right">Заголовок справа</h3>
<h3 align="justify">Заголовок справа</h3>

Обратите внимание что я пишу только отдельные теги рассматриваемые в данном примере, Вам же необходимо прописывать код полностью, как показано на примере Главы 2.

0

3

  • Автор: pashkagan
  • Супер МАСТЕР
  • pashkagan
  • Откуда: Беларусь, Лида
  • Зарегистрирован: 16-03-2011
  • Приглашений: 0
  • Сообщений: 218
  • Уважение: [+2/-0]
  • Позитив: [+0/-0]
  • Пол: Мужской
  • Возраст: 34 [1990-01-18]
  • Провел на форуме:
    1 день 11 часов
  • Последний визит:
    03-12-2011 19:34:50

Глава 4. Работа с текстом

В данной главе я расскажу Вам о способах форматирования текста и изменение его цвета.

Для начала рассмотрим теги форматирования текста:

<strong> </strong>   →   жирный HTML текст (жирный шрифт).
<b> </b>                  →   жирный HTML текст (жирный шрифт).
<code> </code>        →   моноширинный HTML текст (моноширинный шрифт).
<big> </big>             →   HTML текст, размер больше обычного (крупный шрифт).
<small> </small>       →   HTML текст, размер меньше обычного (мелкий шрифт).
<i> </i>                    →   наклонный HTML текст (наклонный шрифт).
<ins> </ins>              →   подчеркнутый HTML текст (подчеркнутый шрифт).
<del> </del>              →   зачеркнутый HTML текст (зачеркнутый шрифт).
<sub> </sub>            →   HTML текст (шрифт) в нижнем индексе.
<sup> </sup>            →   HTML текст (шрифт) в верхнем индексе.
Все они требуют после себя закрывающих тегов, чтобы можно было знать на каком участке завершить ту или иную функцию работы с текстом. Обычно они применяются к небольшим участкам предложения или словам, если Вам нужно форматировать большие участки, тексты к примеру, обычно используют css.

Код:
<strong>жирный шрифт</strong> 
<code>моноширинный шрифт</code> 
<big>размер шрифта больше обычного</big> 
<small> размер текста меньше обычного</small> 
<i>наклонный шрифт</i> 
<ins>подчеркнутый текст (подчеркнутый шрифт)</ins> 
<del>зачеркнутый текст (зачеркнутый шрифт)</del> 
<sub>нижний индекс</sub> 
<sup>верхний индекс</sup>

Размер шрифта.

Обычно используется команда <p style="font-size:...px">Текст</p>, где вместо ... вставляется значение в пикселях(px)

Код:
<html>
<head>
<title>HTML размер шрифта</title>
</head>
<body>
<p style="font-size:5px">Текст высотой 5 пикселей</p>
<p style="font-size:10px">Текст высотой 10 пикселей</p>
<p style="font-size:15px">Текст высотой 15 пикселей</p>
<p style="font-size:20px">Текст высотой 20 пикселей</p>
</body>
</html>

Цвет.

При выборе цвета можно использовать несколько параметров.
Цветовая гамма может указываться как в виде кода (#ff0000), так и задаваться словом на анг. языке(red, black, blue и тд.).

Код:
<html>
<head>
<title>HTML цвет текста</title>
</head>
<body>
<h1 style="color:#ff0000">Заголовок 1-го уровня</h1>
<p style="color:#ffff00">Желтый цвет</p>
<p style="color:#00ff00">Зеленый цвет</p>
<p style="color:red">Красный цвет</p>
</body>
</html>

Думаю будет не лишним дать вам парочку шаблонов с цветами:
Black #000000
Navy #000080
DarkBlue #00008B
Indigo #4B0082
MidnightBlue #191970
Maroon #800000
Purple #800080
DarkRed #8B0000
MediumBlue #0000CD
DarkMagenta #8B008B
DarkGreen #006400
DarkSlateGray #2F4F4F
SaddleBrown #8B4513
Blue #0000FF
Green #008000
DarkViolet #9400D3
Teal #008080
DarkSlateBlue #483D8B
DarkOliveGreen #556B2F
Olive #808000
Brown #A52A2A
DarkCyan #008B8B
FireBrick #B22222
Sienna #A0522D
ForestGreen #228B22
MediumVioletRed #C71585
DimGray #696969
OliveDrab #6B8E23
Crimson #DC143C
SeaGreen #2E8B57
DarkGoldenrod #B8860B
DarkOrchid #9932CC
Red #FF0000
Chocolate #D2691E
BlueViolet #8A2BE2
Fuchsia #FF00FF
Magenta #FF00FF
OrangeRed #FF4500
SlateBlue #6A5ACD
DeepPink #FF1493
RoyalBlue #4169E1
IndianRed #CD5C5C
Gray #808080
SlateGray #708090
SteelBlue #4682B4
DarkOrange #FF8C00
LightSeaGreen #20B2AA
Peru #CD853F
MediumOrchid #BA55D3
DodgerBlue #1E90FF
DarkTurquoise #00CED1
LightSlateGray #778899
Goldenrod #DAA520
Orange #FFA500
MediumSeaGreen #3CB371
CadetBlue #5F9EA0
DeepSkyBlue #00BFFF
Tomato #FF6347
PaleVioletRed #DB7093
MediumSlateBlue #7B68EE
MediumPurple #9370DB
LimeGreen #32CD32
Coral #FF7F50
Orchid #DA70D6
YellowGreen #9ACD32
RosyBrown #BC8F8F
Salmon #FA8072
Gold #FFD700
LightCoral #F08080
HotPink #FF69B4
DarkKhaki #BDB76B
CornflowerBlue #6495ED
MediumSpringGreen #00FA9A
Lime #00FF00
DarkSalmon #E9967A
SpringGreen #00FF7F
SandyBrown #F4A460
LawnGreen #7CFC00
Aqua #00FFFF
Cyan #00FFFF
MediumTurquoise #48D1CC
DarkGray #A9A9A9
Violet #EE82EE
Chartreuse #7FFF00
DarkSeaGreen #8FBC8F
MediumAquamarine #66CDAA
Turquoise #40E0D0
LightSalmon #FFA07A
Yellow #FFFF00
Tan #D2B48C
BurlyWood #DEB887
Plum #DDA0DD
GreenYellow #ADFF2F
Silver #C0C0C0
SkyBlue #87CEEB
LightSteelBlue #B0C4DE
LightSkyBlue #87CEFA
Thistle #D8BFD8
LightPink #FFB6C1
LightGreen #90EE90
Khaki #F0E68C
LightBlue #ADD8E6
Pink #FFC0CB
LightGrey #D3D3D3
PowderBlue #B0E0E6
PaleGoldenrod #EEE8AA
PaleGreen #98FB98
Wheat #F5DEB3
Aquamarine #7FFFD4
NavajoWhite #FFDEAD
PeachPuff #FFDAB9
Gainsboro #DCDCDC
PaleTurquoise #AFEEEE
Moccasin #FFE4B5
Bisque #FFE4C4
BlanchedAlmond #FFEBCD
AntiqueWhite #FAEBD7
MistyRose #FFE4E1
PapayaWhip #FFEFD5
Lavender #E6E6FA
Beige #F5F5DC
LemonChiffon #FFFACD
LightGoldenrodYellow #FAFAD2
Linen #FAF0E6
Cornsilk #FFF8DC
OldLace #FDF5E6
LavenderBlush #FFF0F5
WhiteSmoke #F5F5F5
LightYellow #FFFFE0
Seashell #FFF5EE
LightCyan #E0FFFF
AliceBlue #F0F8FF
FloralWhite #FFFAF0
Honeydew #F0FFF0
GhostWhite #F8F8FF
Ivory #FFFFF0
Azure #F0FFFF
Snow #FFFAFA
MintCream #F5FFFA
White #FFFFFF
Все положения я перечислил попробуйте все их повторить и поэкспериментировать на практике. Удачи.

0

4

  • Автор: pashkagan
  • Супер МАСТЕР
  • pashkagan
  • Откуда: Беларусь, Лида
  • Зарегистрирован: 16-03-2011
  • Приглашений: 0
  • Сообщений: 218
  • Уважение: [+2/-0]
  • Позитив: [+0/-0]
  • Пол: Мужской
  • Возраст: 34 [1990-01-18]
  • Провел на форуме:
    1 день 11 часов
  • Последний визит:
    03-12-2011 19:34:50

Глава 5. Горизонтальная линия. Фон страницы.

Горизонтальная HTML линия определяется непарным тегом <hr />.

Код:
<html>
<head>
<title>Горизонтальная линия в HTML</title>
</head>
<body>
<hr align="center" width="500" size="2" color="#ff0000" />
</body>
</html>

<hr align="center" width="500" size="2" color="#ff0000" /> - означает что это горизонтальная линия, размещенная по центру длиной 500, толщиной 2 и имеет красную окраску.

Фон страницы.

Фон задается тегом background-color:(номер или название цвета), который в свою очередь записывается внутри тела документа

Код:
<body style="color:red; background-color:blue">

Код означает, что текст имеет красный цвет, а фон документа синий.
Так же вместо обычной цветовой гаммы можно вставить и картинку на фон нашей страницы

Код:
<html>
<head>
<title>Картинка - фон </title>
</head>
<body style="background-image:url(image.jpg)">
</body>
</html>

(image.jpg)-путь к нашему изображению, если он находится в одной папке с нашей страницей, то просто указываете название и расширение изображения, если он к примеру находиться в другой папке к примеру [backgroundimage], то путь будет выглядеть следующим образом <body style="background-image:url(backgroundimage/image.jpg)">
Буду надеяться, что Вы уловили смысл...

0

5

  • Автор: pashkagan
  • Супер МАСТЕР
  • pashkagan
  • Откуда: Беларусь, Лида
  • Зарегистрирован: 16-03-2011
  • Приглашений: 0
  • Сообщений: 218
  • Уважение: [+2/-0]
  • Позитив: [+0/-0]
  • Пол: Мужской
  • Возраст: 34 [1990-01-18]
  • Провел на форуме:
    1 день 11 часов
  • Последний визит:
    03-12-2011 19:34:50

Глава 6. Перенос строки.Тег определяющий параграф, пробел

Перенос

Тег <br /> осуществляет перенос строки

Код:
<html>
<head>
<title>Расстояние между строками по вертикали, HTML перенос строки</title>
</head>
<body>
<p>Тег &lt;br /&gt; осуществляет перенос, то есть текст,<br /> размещенный за ним, будет отображен с новой строки.</p>

Параграф.

HTML параграф определяется тегами <p> </p>.

Код:
<html>
<head>
<title>HTML параграфы и блоки</title>
</head>
<body>
<p>Первый параграф</p>
<p>Второй параграф</p>
</body>
</html>


Пробел.

Если вам понадобится увеличить растояние – используйте символ пробела &nbsp; .

0

6

  • Автор: pashkagan
  • Супер МАСТЕР
  • pashkagan
  • Откуда: Беларусь, Лида
  • Зарегистрирован: 16-03-2011
  • Приглашений: 0
  • Сообщений: 218
  • Уважение: [+2/-0]
  • Позитив: [+0/-0]
  • Пол: Мужской
  • Возраст: 34 [1990-01-18]
  • Провел на форуме:
    1 день 11 часов
  • Последний визит:
    03-12-2011 19:34:50

Глава 7. Работа с изображениями.

Для удобства работы предлагаю в нашей папке с документом index.html создать папку [image], в которую мы и будем "складировать" все наши изображения.
Вставка изображения происходит с помощью тега <img src="image/image.jpg"  width="100" height="80" /> - вставка изображения под названием image с расширением jpg c шириной 100px, длиной 80px с папки [image], которую мы не так давно и создали.

Код:
<html>
<head>
<title>Вставка изображения</title>
</head>
<body>
<img src="image/image.jpg" width="100" height="80" />
</body>
</html>

Отступы по горизонтали и по вертикали

    hspace="" – определяет расстояние между изображением и текстом по горизонтали.
    vspace="" – определяет расстояние между изображением и текстом по вертикали.

Код:
<html>
<head>
<title>Отступы между изображением и текстом</title>
</head>
<body>
<p>Текст вверху изображения на дополнительном расстоянии в 20 пикселей</p>
<img src="image/image.jpg" align="left" width="195" height="157" hspace="50" vspace="20" />
<p>Текст справа от изображения на дополнительном расстоянии в 50 пикселей</p>
<p>Текст</p>
<p>Текст</p>
<p>Текст</p>
<p>Текст</p>
<p>Текст</p>
<p>Текст внизу изображения на доболнительном расстоянии в 20 пикселей</p>
</body>
</html>


Изображение - ссылка

Код:
<title>HTML изображение - ссылка</title>
</head>
<body>
<p>
<a href="http://inetdoxodu.ru"><img src="image/image.jpg" border="0" /></a>
</p>

И так разберем представленный мною тег <a href="http://inetdoxodu.ru">...</a>- представляет собой ссылку, дальше идет тег самого изображения, да кстати тег border="0" говорит о том, что изображение не содержит рамки, если же стоит 1 - то вокруг изображения обрисуется рамка.
Ну вот и еще одна глава с успехом пройдена. Жду Ваших вопросов или предложений в данной  ТЕМЕ .

0

7

  • Автор: pashkagan
  • Супер МАСТЕР
  • pashkagan
  • Откуда: Беларусь, Лида
  • Зарегистрирован: 16-03-2011
  • Приглашений: 0
  • Сообщений: 218
  • Уважение: [+2/-0]
  • Позитив: [+0/-0]
  • Пол: Мужской
  • Возраст: 34 [1990-01-18]
  • Провел на форуме:
    1 день 11 часов
  • Последний визит:
    03-12-2011 19:34:50

Глава 8. Ссылки. Бегущая строка.

Ссылки.
Мы уже немного поговорили о ссылке в виде картинки, аналогично происходит и с текстовой ссылкой.

Код:
<html></head>
<body>
<a href="http://inetdoxodu.ru">Форум, который поощряет за активность</a>
</body></html>

Ничего сложного я тут не вижу, по этому задерживаться не стоит.

Бегущая строка.

Бегущая строка может быть текстовой, а может быть графической( движется изображение)

Код:
<marquee behavior="alternate" direction="right">Бегущая строка</marquee>

если же Вам нужно изменить цвет, то пожалуйста:

Код:
<span style="color:#f25100">Бегущая строка</span>

Пример графической бегущей строки:

Код:
<marquee behavior="scroll" direction="right"> <img src="image/image.png" /> </marquee>

0

8

  • Автор: pashkagan
  • Супер МАСТЕР
  • pashkagan
  • Откуда: Беларусь, Лида
  • Зарегистрирован: 16-03-2011
  • Приглашений: 0
  • Сообщений: 218
  • Уважение: [+2/-0]
  • Позитив: [+0/-0]
  • Пол: Мужской
  • Возраст: 34 [1990-01-18]
  • Провел на форуме:
    1 день 11 часов
  • Последний визит:
    03-12-2011 19:34:50

Глава 9. Таблицы.

Таблицы

Сразу же рассмотрим пример кода, а затем разберемся, что к чему:

Код:
<html>
<head>
<title>HTML код таблицы, примеры</title>
</head>
<body>
<table border="1">
<tr>
<td>ячейка 1, первый ряд</td>
<td>ячейка 2, первый ряд</td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td>ячейка 2, второй ряд</td>
</tr>
</table>
</body>
</html>

В нашем случае мы создали 2 строки и 2 столбца.
<table> </table> – объявляют о создании HTML таблицы.
border="1" – устанавливает границу HTML таблицы и ее ячеек в 1 пиксел. Если атрибут border отсутствует или его значение равно 0 – границ не будет.
<tr> </tr> – определяют табличный ряд.
<td> </td> – определяют ячейку HTML таблицы.
Я думаю все гениально и просто и особо заострять внимание на этом не стоит.

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

HTML высота ячеек и их ширина, размер

Код:
<html>
<head>
<title>Пример таблицы: HTML высота ячейки и ее ширина, размеры ячеек</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="12">
<tr>
<td width="200" height="100">ячейка 1, первый ряд</td>
<td>ячейка 2, первый ряд</td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td>ячейка 2, второй ряд</td>
</tr>
</table>
</body>
</html>

Горизонтальное HTML выравнивание в таблице и в ячейке, текст

Код:
<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="17" width="450">
<tr height="100">
<td align="left">ячейка 1</td>
<td align="right">ячейка 2</td>
<td align="center">ячейка 3</td>
</tr>
</table>
</body>
</html>

HTML выравнивание в таблице. Текст вверху, внизу, по центру ячеек таблицы:

Код:
<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="17" width="450">
<tr height="100">
<td valign="top">ячейка 1</td>
<td valign="bottom">ячейка 2</td>
<td valign="middle">ячейка 3</td>
</tr>
</table>
</body>
</html>

Горизонтальное расположение HTML таблицы внутри web-страницы:

Код:
<html>
<head>
<title>Примеры HTML таблиц</title>
</head>
<body>
<table align="center" width="220" bgcolor="#006699">
<tr height="220">
<td>
<p>align="center"</p>
</td>
</tr>
</table>
   <table align="left" width="220" height="220" bgcolor="#cc0000">
   <tr>
   <td>
   <p>align="left"</p>
   </td>
   </tr>
   </table>
<table align="right" width="220" height="220" bgcolor="#66cc66">
<tr>
<td>
<p>align="right"</p>
</td>
</tr>
</table>
</body>
</html>

HTML таблица расположена внутри ячейки

Код:
<html>
<head>
<title>Примеры HTML таблицы</title>
</head>
<body>
<table border="1" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="150" height="100"> &nbsp; </td>
<td width="150" align="center">
    <table border="1" cellspacing="5" style="background-color:#ffffff; width:80px; height:60px">
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    </table>
</td>
</tr>
</table>
</body>
</html>

Вот мы и рассмотрели все возможные варианты по работе с таблицами...

0

Страница: 1

Вы здесь » Бизнес Форум | Как заработать в интернете ? » ВЕБ-МАСТЕРСКАЯ » Уроки по сайтостроению