Книга ММ-1
БЕСПЛАТНО!

Заработок в интернет по системе MoneyMaster
Заработок в интернете для начинающих.



Работа на дому по системе Money Master
Разделы
  Новичку о заработке
  Обзор заработков
  С чего начать
  Основы HTML
  Партнерcкая программа
  Лохотроны
  Халява
  Заработать на форекс
  Доход с инвестиций
  Как привлечь деньги
  Электронные книги
  Компьютер для начинающих
  Как сделать ...?
  F.A.Q.
  По вашим письмам
Обучение
  Скептикам и сомневающимся
  Успехи учеников
  Основные курсы:

Книга ММ-1 бесплатно!
  Книга ММ-2
  Книга ММ-3
 
Доп. курсы:

ММ-Трейдинг
  ММ-недвижимость

Вебмастеру
  Куплю ваш сайт
  Клипарт
  Коллекция текстур 1
  Коллекция текстур 2
  Шаблоны сайтов
  Учебник 1 по HTML
  Учебник 2 по HTML
  Учебник 1 по PHP
  Учебник 2 по PHP
  Учебник по CSS
Общение
  Форум о заработке
  Блог MoneyMaster
  Контакты
  Переписка и прочее
  Об авторе сайта
Прочее
  Игры,приколы
  Реклама на сайте
  Сотрудничество





Волшебный баннер!
Поставь на сайт и убедись.

подробнее...


MoneyMaster на ТВ:







Надоело быть компьютерным чайником?

НОВЫЙ ВИДЕОКУРС
с нуля научит вас работать в самых популярных программах: от архиватора до антивируса, от почтового клиента до...

Подробности
уверенным юзерам
ВХОД ЗАПРЕЩЕН!





работа на дому
работа в интернете
нелинейная работа
работа вебдизайнером
делаем сайт за 5 минут
визуальные html-редакторы
Открыть кошелек Webmoney
как разархивировать файлы
как сделать скриншот


подробнее...





Пример создания сайта.

 

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

В этом уроке курса MM часть 1 мы сделаем 2х страничный сайт...например, о заработке в интернете.

Сначала определимся как это будет приблизительно выглядеть.

Вверху сайта мы сделаем "шапку сайта". Слева будет меню сайта с ссылками на другие страницы сайта, остальное место будет занимать контент (содержимое ) сайта.

Идея понятна ? Приступаем.

Запускаем Блокнот и пишем наш минимальный набор для создания страницы.

<html>

<head>
<title> </title>

</head>

 

<body>

</body>

</html>

Теперь напишем между тегами <title> </title> название нашей страницы, например вот так

<html>

<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>

</head>

 

<body>

</body>

</html>

Далее разместим теги <center> и </center>, чтобы все содержимое нашего сайта было размещено по центру страницы.
Если вы не забыли, теги <center> и </center> надо разместить между <body> и </body>, т.е. вот так

<html>

<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>

</head>

 

<body>

<center>

 

</center>

</body>

</html>

Для создания каркаса страницы мы будем использовать таблицу, но чуть более хитрую чем мы проходили в HTML-уроке о таблицах. Нам нужна таблица, в которой в первой строке будет 1 ячейка, а в другой строке будет 2 ячейки, т.е. вот такая нам нужна таблица :

ячейка 1
ячейка 2
ячейка 3

В ячейке 1 мы расположим шапку сайта, в ячейке 2 будет меню сайта, а в ячейке 3 будет содержимое страницы.

Для того чтобы сделать такую таблицу напишите вот такой код

<table>


<tr>
<td colspan="2"></td>
</tr>


<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>


</table>

Т.е. код нашей страницы будет вот такой :

<html>

<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>

</head>

 

<body>

<center>

<table>


<tr>
<td colspan="2"></td>
</tr>


<tr>
<td></td>
<td></td>
</tr>


</table>

</center>

</body>

</html>

Как видите, в такой вот "хитрой" таблице используется лишь 1 пара тегов <td> в первой строке таблицы, а не два, как при построении таблицы 2х2. Но зато появился параметр colspan="2". Этот параметр как бы говорит, какого размера должна быть ячейка. В данном случае ячейка должна быть шириной в 2 ячейки.

Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 750 пикселей. Из рассчета что кто-то из посетителей сайта может использовать монитор 800х600 точек, и просматривать более широкий сайт ему будет не комфортно.

Высоту таблицы сделаем 600 пикселей

Т.е. код нашей страницы теперь будет вот такой.

<html>

<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>

</head>

 

<body>

<center>

<table width="750" height="600">


<tr>
<td colspan="2">Здесь у нас будет шапка</td>
</tr>


<tr>
<td> Здесь будет меню</td>
<td> Здесь будет содержимое страницы </td>
</tr>


</table>

</center>

 

</body>

</html>

Чтобы стало видно границы частей сайта - "зальем" область меню и область шапки цветом. Например вот так

 

<html>

<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>

</head>

 

<body>

<center>

<table width="750" height="600">


<tr>
<td colspan="2" bgcolor="#00CC99">Здесь у нас будет шапка</td>
</tr>


<tr>
<td bgcolor="#CCCCCC"> Здесь будет меню</td>
<td> Здесь будет содержимое страницы </td>
</tr>


</table>

</center>

 

</body>

</html>

Сохраните файл под именем index.html , для того чтобы его можно было просмотреть как он будет выглядеть в браузере.

Страница должна выглядеть ТАК. Если у вас не так - ищите ошибку.

Возможно возник вопрос. Почему назвали файл страницы именно так ?

Есть правило. Главная страница сайта должна называться index.html, или index.htm . ! Или index.php если страница написана на языке PHP. Запомните это.

Тогда при обращении к сайту, т.е. когда набираешь адрес сайта в браузере, можно не набирать index.html или index.htm, достаточно набрать адрес вашего сайта.

 

Теперь вставим шапку нашего сайта.

Сохраните картинку шапки у себя на компьютере в той-же директории где находится файл страницы под ее "родным" именем sitelogo.jpg

(т.е. наведите курсор мышки на картинку, нажмите правую кнопку мышки и выберите "Сохранить рисунок как..." )

 

Где брать такие шапки ? Рисовать самим. О том как это делать будет рассказано в книге MM часть 2.

Теперь вставляем картинку шапки в наш сайт. О том как вставить картинку на сайте мы разбирали здесь.

 

<html>

<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>

</head>

 

<body>

<center>

<table width="750" height="600">


<tr>
<td colspan="2" bgcolor="#00CC99"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr>


<tr>
<td bgcolor="#CCCCCC"> Здесь будет меню</td>
<td> Здесь будет содержимое страницы </td>
</tr>


</table>

</center>

 

</body>

</html>

Теперь установим точные размеры ячейки таблицы, предназначенной для шапки. Т.к. картинка шапки у нас имеет размер 750х120, то и размер ячейки таблицы сделаем 750 х 120.

 

<html>

<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>

</head>

 

<body>

<center>

<table width="750" height="600">


<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="120"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr>


<tr>
<td bgcolor="#CCCCCC"> Здесь будет меню</td>
<td> Здесь будет содержимое страницы </td>
</tr>


</table>

</center>

 

</body>

</html>

 

Теперь наша страница будет выглядеть ТАК.

Установим ширину меню равной 200 пикселей, для этого добавим width="200" в соответствующий тег

<html>

<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>

</head>

 

<body>

<center>

<table width="750" height="600">


<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="120"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr>


<tr>
<td bgcolor="#CCCCCC" width="200" > Здесь будет меню</td>
<td> Здесь будет содержимое страницы </td>
</tr>


</table>

</center>

 

</body>

</html>

Задний план меню "зальем" вот таким фоном, для этого сохраните этот фон с его "родным" именем sv11.jpg в ту же директорию где находится файл страницы.

А теперь прописываем нужный код

 

<html>

<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>

</head>

 

<body>

<center>

<table width="750" height="600">


<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="120"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr>


<tr>
<td bgcolor="#CCCCCC" width="200" background="sv11.jpg"> Здесь будет меню</td>
<td> Здесь будет содержимое страницы </td>
</tr>


</table>

</center>

 

</body>

</html>

Теперь наша страница будет выглядеть ТАК.

У вас возможно возник вопрос, почему браузер не "отрабатывает" ширину меню 200 ? Меню ведь выглядит шире чем 200 пикселей. Да. Есть такой глюк браузера, но все встанет на свои места если начать писать текст в основном разделе страницы. (Или, можно задать жестко ширину ячейки в которой будет писать контент, дописав width="550")

Чтобы подтвердить это, добавим текста на наш сайт.

<html>

<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>

</head>

 

<body>

<center>

<table width="750" height="600">


<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="120"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr>


<tr>
<td bgcolor="#CCCCCC" width="200" background="sv11.jpg"> Здесь будет меню</td>
<td>Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.</td>
</tr>


</table>

</center>

 

</body>

</html>

Сайт будет выглядеть вот ТАК.

Теперь все почти ОК...Почти, потому что на лицо небольшие проблемки. Текст отображается ровно посередине (по вертикали), а следовало бы чтобы текст был расположен вверху ячеек.

Для этого нам надо прописать еще один параметр в теге <td> меню и основного содержимого страницы.

Этот параметр мы не проходили в уроке о таблицах, - это параметр выравнивания по вертикали valign="top".

Значение top означает что содержимое будет располагаться вверху.

<html>

<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>

</head>

 

<body>

<center>

<table width="750" height="600">


<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="120"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr>


<tr>
<td bgcolor="#CCCCCC" width="200" background="sv11.jpg" valign="top" > Здесь будет меню</td>
<td valign="top">Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.</td>
</tr>


</table>

</center>

 

</body>

</html>

Теперь наша страница будет выглядеть ТАК.

 

Далее делаем меню. Пока наш сайт будет 2х-страничный. Главная страница и страница ссылок.

Пусть пункты меню пусть называются Главная и Ссылки. Для того, чтобы "сдвинуть" текст на следующую строчку - используем тег <br> Два <br> сдвинут текст на 2 строки и т.д.

<html>

<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>

</head>

 

<body>

<center>

<table width="750" height="600">


<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="120"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr>


<tr>
<td bgcolor="#CCCCCC" width="200" background="sv11.jpg" valign="top" >

Главная <br><br>

Ссылки

</td>
<td valign="top">Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.</td>
</tr>


</table>

</center>

 

</body>

</html>

 

Теперь надо сделать текст меню в виде ссылок. Слово Главная залинкуем на страницу index.html, а слово Ссылки на страницу ssilki.html, которую мы создадим чуть позже.

Как сделать текст в виде ссылки мы проходили здесь.

 

<html>

<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>

</head>

 

<body>

<center>

<table width="750" height="600">


<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="120"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr>


<tr>
<td bgcolor="#CCCCCC" width="200" background="sv11.jpg" valign="top" >

<a href="index.html">Главная</a><br><br>

<a href="ssilki.html">Ссылки</a>

</td>
<td valign="top">Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.</td>
</tr>


</table>

</center>

 

</body>

</html>

 

Теперь наш сайт будет выглядеть ТАК.

 

Осталось сделать вторую страницу сайта. Для того, чтобы упростить работу сделаем так - сохраним нашу страницу index.html под другим именем ssilki.html, а затем подредактируем файл.

Выбираем в блокноте команду Файл->Сохранить как... , выбираем ту же директорию где находится файл index.html, пишем имя страницы под которой мы хотим сохранить файл ssilki.html . жмем ОК.

Т.е. на компьютере у вас должно быть 2 пока что одинаковых страницы - index.html и ssilki.html.

Теперь изменим название страницы (между тегами <title> и </title>), и изменим текст страницы, например вот так

<html>

<head>
<title>Ссылки на сайты о заработке в интернете</title>

</head>

 

<body>

<center>

<table width="750" height="600">


<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="120"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr>


<tr>
<td bgcolor="#CCCCCC" width="200" background="sv11.jpg" valign="top" >

<a href="index.html">Главная</a><br><br>

<a href="ssilki.html">Ссылки</a>

</td>
<td valign="top">На этой странице будут размещены ссылки на сайты о заработке в интернете<br><br>

<a href="http://moneymaster.ru">Сайт о заработке в интернете MoneyMaster</a>

</td>
</tr>


</table>

</center>

 

</body>

</html>

И сохраним... (Файл -> Сохранить)

Вторая страница сайта будет выглядеть ТАК.

 

Возможно у кого то возник вопрос. А почему столько много пустых строк, нельзя ли уплотнить код ?

Можно. Я сделал пропуски чтобы было наглядней видно структуру страницы. А так можно разместить весь код вообще в одну строчку
Но не стоит. Иначе будет трудно искать ошибки если что...

Если есть какие либо вопросы по этому примеру - пишите .

 

Вот мы и сделали простенький сайтик, который вы можете подредактировать и разместить в интернете.

Очень многие спрашивают, как разместить сайт в и нтернете, чтобы его можно было видеть не только на своем компьютере, а чтобы его могли видеть и другие люди. Ок. Забегу немного вперед.

Для того, чтобы ваш сайт был доступен из интернет всему миру, надо найти хостинг, который предоставит вам место для вашего сайта. Хостинг бывает бесплатный и платный. Бесплатный хостинг дает вам также и адрес сайта. Так например если вы зарегистрировались на хостинге narod.ru, указав при регистрации логин pupkin, то адрес вашего сайта будет http://pupkin.narod.ru Но бесплатные хостинги обладают кучей недостатков и их следует использовать лишь для тренировки. Если же делать серьезный сайт, то надо покупать домен и покупать хостинг, затем связать домен и хостинг (подробнее эти вопросы рассматриваются в книге MoneyMaster-3), тогда ваш сайт будет иметь желаемый вами адрес типа http://gadukino.ru (если домен не занят) и вы получите еще кучу преимуществ по сравнению с бесплатным хостингом, например возможность использовать скрипты, что позволит вам создавать динамические сайты. После того как вы определились с хостингом и получили место для вашего сайта, надо перебросить файлы сайта на хостинг. Сделать это можно с помощью специальных FTP- программ, например LeapFTP, CuteFTP, или можно сделать с помощью файловых оболочек Windows Commander, Total Commander и др. Вот здесь можете скачать видео-урок, из которого вы узнаете как сделать переброску файлов на хостинг.

 

ПОЗДРАВЛЯЮ!

Если вы дошли до этого момента и у вас все получилось, значит вы прошли своего рода тест-драйв и теперь с уверенностью можете двигаться дальше.

ЧТО ДАЛЬШЕ.

Конечно, сделанный для примера сайт не так крут. И даже в этом сайте пришлось использовать готовые картинки, которые вы скорей всего создавать не умеете.

А вы хотели бы научиться рисовать сами графический дизайн вашего сайта?

Этому вы можете научиться, пройдя обучение по книге MM-2.

 

Книга MM часть 2.

УЖЕ СЕГОДНЯ вы сможете сделать СВОЙ приличный, эксклюзивный дизайн для вашего сайта, не теряя недели/месяцы на изучение учебников и прочих материалов, не воруя дизайн у других и не используя темплейты.

ДАЖЕ ЕСЛИ ВЫ В ПРИНЦИПЕ НЕ ДИЗАЙНЕР - У ВАС ВСЕ РАВНО ПОЛУЧИТСЯ ПРИЛИЧНЫЙ ДИЗАЙН !

Как сделать красивый сайт, даже если вы пока не дизайнер.


Обучение необходимым навыкам и приемам для создания графических элементов сайта. Разновидности дизайна.
Основы композиции сайта.
Рекоммендуемые сочетания цветов.
Создание макета сайта в Adobe Photoshop.
Эффекты в Adobe Photoshop.
Нарезка сайта в Image Ready.
Верстка кода в DreamWeaver.
Таблицы стилей CSS.

Узнайте КАК ! Подробнее...

 

К сожалению, книга 2 не бесплатная, но я уверен, что вы не пожалеете о ее покупке. Наверняка, до прочтения книги MM-1 вы и представить не могли, что изучив ее вы научитесь создавать простенькие сайты. Скорей всего вам это казалось чем то очень сложным, "не для вашего ума". Но я вас провел по самой короткой дорожке к результату, держа вас как ребенка за руку. Точно также, изучив MM-2, вы научитесь делать графический дизайн сайта, при этом, опять же пройдя по самой короткой дорожке, т.е. СЭКОНОМИВ ВРЕМЯ, не тратя месяцы, на изучение различных книг. Потратив несколько вечеров на изучение MM-2, вы будете в силах делать свой дизайн для своих сайтов, значительно обогнав тех, кто решит купить книги в обычном магазине и будет месяцами их изучать.

Цена на книгу MM-2 также включает в себя цену на консультации.  Да.
Каждый покупатель получает право на консультации в соответствующих закрытых разделах форума. Наверняка у вас будут появляться вопросы, а спросить некого. Покупая книгу - у вас всегда будет возможность задать вопросы и получить на них ответы от меня или от опытных учеников! При таком подходе ваше обучение будет максимально эффективным! При таком подходе вы максимально быстро научитесь делать сайты и зарабатывать с их помощью.

Если у вас совсем уж туго с финансами, то можете заработать необходимые деньги вот здесь. Много там не платят, но для кого-то это будет спасительной соломинкой, чтобы купить книги.

 

Читайте далее :

О HTML-редакторах.

Финансовая подготовка 1. Электронные платежные системы.

Финансовая подготовка 2. Кредитные карты.

 



Нравится ли вам данная статья?

Нравится




Также можете добавить комментарий (СПАМ ЗАПРЕЩЕН! Даже не пытайтесь. + пожизненный бан):

ОСТОРОЖНО!
ЭТИ ОБУЧАЮЩИЕ КУРСЫ МОГУТ ИЗМЕНИТЬ ВАШУ ЖИЗНЬ К ЛУЧШЕМУ.

Книга ММ - 1
Книга ММ - 2
Книга ММ - 3

Общие сведения о заработке в интернете, понятие нелинейного заработка, создание простейшего сайта на html за 5 минут.

БЕСПЛАТНО. Читать...

Cоздание дизайна сайта с использованием Photoshop и Dreamweaver. Верстка кода и получение шаблона сайта. CSS-стили.

Подробное описание.

Цена: 748 руб.

Выбор темы сайта. Секреты создания сайта. Раскрутка сайта (SEO) - внутренняя и внешняя оптимизация. Заработок с помощью сайта.

Подробное описание.

Цена: 2790 руб.





























Открыли организацию? Узнайте как просто сделать сайт самому посетив наш ресурс. ; Сегодня спец цены, штрих сканер - штрих сканер. Низкая цена тут, высокое качество.
копирование материалов разрешено только при условии размещения гипер ссылки на сайт moneymaster.ru
moneymaster.ru (c) 2007-2014

Правовая оговорка о доходах | Политика конфиденциальности