Сайт за 5 минут

Да. Вы МОЖЕТЕ создать сайт. И свой первый сайт вы сделаете всего лишь за 5 минут !

Итак. Сначала нам нужен простейший текстовый редактор, например Блокнот.

Для того чтобы запустить Блокнот, жмем кнопку Пуск -> Все программы -> Стандартные -> Блокнот

Теперь выделите левой кнопкой мышки код, написанный ниже голубым цветом и скопируйте его в буфер (через правую кнопку мышки, или нажав Ctrl и кнопку C, или через меню Блокнота : Правка -> Копировать).

<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>

<body>

Сегодня замечательный день. <br>Я сделал свою первую интернет страничку.

</body>

</html>

Затем перейдите в Блокнот и вставьте из буфера скопированный код (через правую кнопку мышки, или нажав Ctrl и V, или выбрав в меню Блокнота пункт Правка -> Вставить).

Теперь выбираем в меню Блокнота : Файл - > Сохранить как ...

пример создания странички

Выбираем место на диске для сохранения файла, создав, например, для нашего обучения папку site на диске С.
Сохранять в "Мои документы" или "Рабочий стол" не надо! Затем вводим имя файла, под которым мы сохраним нашу страничку. Вводим, например, page.html, в типе файла устанавливаем (если возможно) Все файлы (*.*) и жмем кнопку "Сохранить"

пошаговое создание страницы

Тут такой нюанс, если блокнот сохранил ваш файл как page.html.txt (если нельзя было выбрать опцию тип файла "Все файлы (*.*) - то переименуйте его в page.html

Для удобной работы с файлами (копирование, перемещение, переименование, редактирование и т.д.) рекомендую установить программу Windows Commander или Total Commander. Легко найдете в интернете.

Расширение файла html - показывает, что данный файл является интернет-страницей.

Теперь найдите на вашем диске сохраненный файл page.html.

Теперь запустите файл page.html, нажав быстро мышкой по файлу 2 раза.

У вас запуститься ваш браузер, например Internet Explorer и откроется вот такая страничка.

Возможные проблемы:

Если у вас не запускается созданный файл в виде интернет-страницы и вместо интернет-страницы вы видите набранный вами код, то скорей всего файл сохранился как page.html.txt Проверьте! Зайдите на диск средствами Windows или через оболочку типа Total Commander и посмотрите. Блокнот иногда может добавить .txt Следовательно если обнаружен такой косяк - переименуйте файл в page.html

Если вдруг у вас на экране "кракозябры" [image] -значит надо установить в браузере кодировку страницы Cyrillic Win-1251, в Опере это делается так:

Если у вас Internet Explorer, то сменить кодировку можно через меню Вид - Кодировка - Кириллица (Windows).

Поздравляю ! Вы только что сделали свою первую интернет страницу !

Разве было сложно ? Думаю что нет и можно продолжить.

Как видите - создание интернет-страниц не такое уж непосильное дело. Это ДОСТУПНО КАЖДОМУ.

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

Теперь разберем подробней что есть что и для чего нужно.

Создание страниц производиться с помощью языка гипертекстовой разметки HTML (Hyper Text Marker Language).

Команды, которые пишутся между скобками < > называются тегами.

Теги бывают парные и не парные. Парные теги например <head> и </head> Один тег является открывающим <head>, а другой тег является закрывающим </head> . Как видите закрывающий отличается от открывающего - знаком "/". Какие теги парные, а какие нет следует запоминать.

Теперь о тегах которые мы употребили в нашей страничке.

тег <html> говорит компьютеру что начитается html-страница. Тег </html> говорит компьютеру что html-страница закончилась. Таким образом тег <html> будет всегда первым тегом на странице, а тег </html> самым последним. ! Запомните это. Все остальное пишется между этими тегами.

<html>

....

</html>

Далее страница состоит подобно человеку. Имеет голову <head> и тело <body>.

<html>

<head>

</head>

<body>

</body>

</html>

( в дальнейшем я буду выделять красным цветом то, что было добавлено или изменено в предыдущий код)

Между тегами <head> и </head> вставляются теги <title> и </title>. ! Запомните это.

Между тегами <title> и </title> пишется название страницы. Текст написанный между этими тегами будет отображаться в названии окна Интернет Эксплорера.

Между тегами <body> и </body> пишется непосредственно содержимое интернет страницы (иначе говоря контент страницы). Все что вы напишите - будет на вашей странице.

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

<html>

<head>
<title> </title>

</head>

<body>

</body>

</html>

тег <br> который я употребил на странице после текста "Сегодня замечательный день" является не парным, и служит для принудительного перевода текста на другую строку. Если не понятно - уберите этот тег и посмотрите что получиться.

А теперь имея начальные представления о языке HTML, можно двинуться дальше.

Раскрашиваем страницу

Итак, после того как вы создали свою первую интернет-страницу, наверняка у вас появилось желание раскрасить ее в те цвета какие вы хотите.

Этим мы сейчас и займемся.

Наш исходный код на данный момент, после прошлого урока такой :

<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>

<body>

Сегодня замечательный день. <br>Я сделал свою первую интернет страничку.

</body>

</html>

- Изменение цвета фона страницы.

Добавьте в тег <BODY> следующий параметр тега bgcolor="#00CCFF", чтобы в итоге получилось так

<body bgcolor="#00CCFF">

Внимание! наиболее частая проблема в этом уроке. 00 это цифры ноль, а не буквы ОО.
Также, нельзя писать слитно без пробела <bodybgcolor="#00CCFF">.
Кавычки следует писать именно такие " , нажимая 2 и удерживая при этом нажатым SHIFT. Некоторые пишут две вот таких кавычки ` или две вот таких ' , получающиеся при нажатии буквы э в англоязычной раскладке клавиатуры. Это не правильно.
Будьте внимательны!

Сохраните вашу страницу (Файл->Сохранить) и откройте вашу страницу (или нажмите обновить если вы не закрывали страницу).
Должно получиться так.

Для создания цветов на странице используется RGB-модель. Т.е. любой цвет "составляется" из 3 основных цветов - Red Green Blue.

запись из нашего примера #00CCFF расшифровывается так : 00 частей красного, СС частей зеленого, FF частей голубого.
каждый из знаков может быть от 0 до 9, или буквы от А до F. Таким образом вы можете синтезировать любой цвет.

Вот некоторые цвета и их код

FF0000

00FF00

0000FF

FFFF00

000000

FFFFFF

999999

009999

FFFFCC

CCFFFF

Некоторые стандартные цвета можно указывать соотвествующими английскими словами. Например, написав bgcolor="blue" , или red (красный), green(зеленый), black (черный), white (белый) и т.д. Но как вы понимаете, указание цветов в цифро-буквенном формате позволяет использовать бОльшую палитру цветов.

- изменение цвета текста

Для того чтобы изменить цвет текста на всей странице, или иными словами назначить цвет текста по умолчанию, надо в тег <body> добавить еще один параметр. Добавьте text="#FFFF00"

итого у нас тег <body> будет такой :

<body bgcolor="#00CCFF" text="#FFFF00">

Опять же будьте внимательны, отделяя параметры пробелами.

<body bgcolor="#00CCFF" text="#FFFF00"> -правильно
<bodybgcolor="#00CCFF"text="#FFFF00"> - не правильно

Сохраните файл и посмотрите что получилось. Должно получиться ТАК.

Если вы хотите в произвольном месте текста использовать цвет, отличный от цвета по умолчанию, то надо заключить нужный вам текст между тегами <font> и </font> и указать в теге требуемый цвет.

Добавьте на страницу следующее

<br><font color="#0000FF">я буду богатым и свободным человеком !</font>

Код вашей странице теперь будет такой :

<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>

<body bgcolor="#00CCFF" text="#FFFF00">

Сегодня замечательный день. <br>Я сделал свою первую интернет страничку.

<br><font color="#0000FF">я буду богатым и свободным человеком !</font>

</body>

</html>

тег <br> как я писал ранее служит для принудительного переноса текста на следующую строку.

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

Выравнивание материала сайта по центру

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

Т.е. на примере нашей предыдущей страницы, для выравнивания всего содержимого сайта по центру видоизменяем код страницы так :

<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>

<body bgcolor="#00CCFF" text="#FFFF00">

<center>

Сегодня замечательный день. <br>Я сделал свою первую интернет страничку.

<br><font color="#0000FF">я буду богатым и свободным человеком !</font>

</center>

</body>

</html>

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

Вставляем на сайт картинку

Допустим вы решили вставить на сайт вот такую картинку :

Сначала вам нужно сохранить эту картинку у себя на компьютере. Для этого наведите курсор мышки на картинку и нажмите правую кнопку мышки. Выберите "Сохранить рисунок как..." Укажите место для сохранения картинки (Как я рекомендовал ранее - сделайте отдельную папку site на диске С например и туда сохраняйте все файлы уроков.)
Сохраните картинку там-же, где находится страничка, которую мы делаем - page.html Имя файла картинки оставьте тоже самое money-master.jpg
Опять же будеть внимательны! Имя файла не money-master.ipg, не money-master.jpq, а money-master.jpg

Для вставки на страницу картинки - используется тег <img>. img это он аглийского слова image...изображение, картинка.В качестве параметра для этого тега, используется название картинки.Должен же компьютер знать какую картинку мы хотим вставить

В нашем случае для вставки картинки money-master.jpg вставляем в код страницы, в то место куда мы хотим вставить картинку, следующий код :

<img src=money-master.jpg>

или более грамотно писать вот так <img src="money-master.jpg"> , хотя код выше тоже будет работать.

через параметр src указывается имя файла-картинки.

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

<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>

<body bgcolor="#00CCFF" text="#FFFF00">

<center>

Сегодня замечательный день. <br>Я сделал свою первую интернет страничку.

<br><font color="#0000FF">я буду богатым и свободным человеком !</font>

<br><br>

<img src="money-master.jpg">

</center>

</body>

</html>

теги <br> вставлены чтобы расположить картинку на несколько строк ниже текста.

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

Желательно в параметрах картинки указать ее размеры. Для этого используется параметр width (ширина картинки) и height (высота картинки). Т.е. например вот так :

<img src="money-master.jpg" width="258" height="146" >

размеры картинки указываются в пикселях.

Если вы хотите чтобы при наведении мышки на картинку отображался какой-то текст, то это делается с помощью параметра alt

например вот так :

<img src="money-master.jpg" width="258" height="146" alt="Сайт о заработке в интернете" >

Этот текст также будет виден, если у вас выключено отображение графики в браузере (для экономии трафика например). Но этот параметр работает не во всех браузерах. В Internet Explorer работает.

внесите изменения в код и посмотрите что получится.

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

<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>

<body bgcolor="#00CCFF" text="#FFFF00">

<center>

Сегодня замечательный день. <br>Я сделал свою первую интернет страничку.

<br><font color="#0000FF">я буду богатым и свободным человеком !</font>

<br><br>

<img src="money-master.jpg" width="258" height="146" alt="Сайт о заработке в интернете">

</center>

</body>

</html>

Форматирование текста жирным и курсивом

Для того чтобы сделать текст жирными или курсивом используются парные теги

<b> и </b> для того чтобы сделать текст жирным. b- от слова bold, т.е. жирный

<i> и </i> для того чтобы сделать текст курсивом. i- от слова italic, т.е. курсив.

Сделаем текст нашей страницы в одном месте жирным, а в другом курсивом

<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>

<body bgcolor="#00CCFF" text="#FFFF00">

<center>

Сегодня замечательный день. <br><i>Я сделал свою первую интернет страничку.</i>

<br><font color="#0000FF"><b>я буду богатым и свободным человеком ! </b></font>

<br><br>

<img src="money-master.jpg" width="258" height="146" alt="Сайт о заработке в интернете">

</center>

</body>

</html>

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

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

Можно сделать так

<font color="#0000FF"><b>я буду богатым и свободным человеком ! </b></font>

или вот так

<b><font color="#0000FF">я буду богатым и свободным человеком ! </font></b>

А вот так <b><font color="#0000FF">я буду богатым и свободным человеком ! </b></font> делать нельзя !

Будьте внимательны при написании кода ! Иначе это вызовет ошибки в отображении страницы.

А можно ли сделать текст одновременно и жирным и курсивом ?
Конечно можно ! Например вот так

<b><i><font color="#0000FF">я буду богатым и свободным человеком ! </font></i></b>

или вот так

<i><b><font color="#0000FF">я буду богатым и свободным человеком ! </font></b></i>

или вот так

<font color="#0000FF"><i><b>я буду богатым и свободным человеком ! </b></i></font>

или даже так

<i><font color="#0000FF"><b>я буду богатым и свободным человеком ! </b></font></i>

Результат будет одинаков.

Надеюсь понятно объяснил как форматировать текст жирным или курсивом и как вкладывать одни теги внутрь других.

Как изменить размер шрифта

Для изменения размера шрифта есть несколько способов.

Через теги <H1>.... <H6> или через параметр шрифта size

Например вот так

<H1>текст</H1> Выглядеть это будет так

текст

или вот так :

<H3>текст</H3> Выглядеть это будет так

текст

Тег <H> как вы поняли является парным. Используется обычно для выделения абзаца. При этом текст, выделенный тегом будет располагаться как абзац...как будто вы перед текстом и после поставили еще теги <br>. Т.е. текст заключенный в тег <H> будет написан с новой строки.

Само собой текст можно сделать еще и жирным и курсивом. Например вот так <b><i><H3>текст</H3></i></b>Выглядеть это будет так

текст

второй способ изменения размера шрифта

использование параметра в теге <font>

Вернемся к нашей страничке.

В коде страницы есть вот такой кусок

<font color="#0000FF"><b>я буду богатым и свободным человеком ! </b></font>

здесь с помощью тега <font> и параметра color мы задаем цвет текста.

А с помощью параметра size можно задать размер текста, например вот так

<font color="#0000FF" size="4"><b>я буду богатым и свободным человеком ! </b></font>

тогда текст на странице будет выглядеть так
я буду богатым и свободным человеком !

Добавьте изменение в код страницы из предыдущего урока.

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

Как сделать ссылки на другие страницы сайта

Для создания ссылок на другие страницы вашего сайта, или ссылок на другие страницы сайта используется парный тег <a> с параметром, где указывается куда будет произведен переход в случае нажатия на ссылку.

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

Разберем на примерах.

если у вас на сайте есть страничка, рассказывающая о себе, например o-sebe.html, то для того чтобы сделать ссылку на эту страницу, надо написать так :

<a href="o-sebe.html">О себе</a>

В параметре href= мы написали адрес страницы, а между тегами <a> и </a> мы должны написать текст, нажав на который произойдет переход по ссылке.

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

Вернемся к нашему предыдущему примеру и добавим ссылки на этот сайт, вот так

<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>

<body bgcolor="#00CCFF" text="#FFFF00">

<center>

Сегодня замечательный день. <br><i>Я сделал свою первую интернет страничку.</i>

<br><font color="#0000FF" size="4"><b>я буду богатым и свободным человеком !</b></font>

<br><br>

<a href="http://moneymaster.ru"><img src="money-master.jpg"></a>

<br><br>

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

</center>

</body>

</html>

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

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

<img src="money-master.jpg" border="0">

сли вы хотите чтобы ссылка открывалась в новом окне, то надо дописать еще один параметр в тег <a>

<a href="http://moneymaster.ru" target="_blank">

Итого, код нашей страницы будет вот такой

<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>

<body bgcolor="#00CCFF" text="#FFFF00">

<center>

Сегодня замечательный день. <br><i>Я сделал свою первую интернет страничку.</i>

<br><font color="#0000FF" size="4"><b>я буду богатым и свободным человеком !</b></font>

<br><br>

<a href="http://moneymaster.ru"><img
src="money-master.jpg"
border="0"></a>

<br><br>

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

</center>

</body>

</html>

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

Некоторые спрашивают. А как сделать ссылку на файл? Точно так-же как и другие ссылки, только указывая в назначении имя файла. Например <a href="popsa.mp3">Скачать песню Киркорова</a>

Использование таблиц на странице

Теперь рассмотрим как делать таблицы на странице.

Вообще это ОЧЕНЬ ВАЖНАЯ тема. Поэтому не пропускайте этот раздел, хоть он пожалуй самый сложный.

Дело в том что таблицы в HTML используются в основном не для представления данных в виде таблицы, а для создания ДИЗАЙНА сайта...для создания каркаса страницы, в котором уже размещается содержимое страницы. Но обо всем по порядку.

Таблица описывается парным тегом <table> и </table>

<table> говорит браузеру , что начинается таблица, а </table> говорит о том, что таблица заканчивается. Запомнили ?

таким образом при создании таблицы пишем сразу 2 тега

<table>

</table>

Теперь надо описать строку таблицы. Для создания строки в таблице используется парный тег <tr> </tr>

Если у нас таблица состоит из одной строки, то будет так

<table>

<tr> </tr>

</table>

Если таблица состоит из 3 строк, то делаем так :

<table>

<tr> </tr>

<tr> </tr>

<tr> </tr>

</table>

Понятно ?

Но это еще не все

В каждой строке должна находиться как минимум 1 ячейка..или иначе говоря надо кроме строки, описать еще как минимум один столбец.

Столбцы в HTML описываются с помощью тегов <td> и </td>, которые должны находиться между тегами <tr> и </tr>

Например. если у нас в таблице 1 строка и 1 столбец, т.е. например вот такая

то таблица будет описана так :

<table>

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

</table>

Если таблица состоит из 1 строки и 3 столбцов, т.е. вот такая

то таблица будет описана вот так

<table>

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

</table>

Если мы хотим добавить еще одну строку в таблицу из 3 ячеек, т.е. сделать вот такую таблицу

то код таблицы будет такой

<table>

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

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

</table>

А вот содержимое ячеек пишется ТОЛЬКО МЕЖДУ тегами <td> и </td>

Писать контент между <tr> и <td>, между </td> и </tr> или между </td> и </td> - НЕЛЬЗЯ.

ВАЖНО. Для описания таблицы вы должны использовать именно такой порядок : сначала пишите теги таблицы, затем теги строки, затем теги ячеек.

Заполним нашу таблицу содержимым, расположив покрасивее теги

<table>

<tr>
<td> строка 1 ячейка 1</td>
<td> строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>

<tr>
<td>строка 2 ячейка 1</td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>

</table>

Таблица будет выглядеть так

строка 1 ячейка 1 | строка 1 ячейка 2 | строка 1 ячейка 3
строка 2 ячейка 1 | строка 2 ячейка 2 | строка 2 ячейка 3

Так..что-то мы в теорию погрузились сильно. Надо бы заняться и практикой.

Добавим код таблицы в наш учебный файл.

Итого, код нашей страницы будет вот такой

<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>

<body bgcolor="#00CCFF" text="#FFFF00">

<center>

Сегодня замечательный день. <br><i>Я сделал свою первую интернет страничку.</i>

<br><font color="#0000FF" size="4"><b>я буду богатым и свободным человеком !</b></font>

<br><br>

<a href="http://moneymaster.ru"><img src="money-master.jpg" border="0"></a>

<br><br>

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

<br><br>

<table>

<tr>
<td> строка 1 ячейка 1 </td>
<td>строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>

<tr>
<td>строка 2 ячейка 1 </td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>

</table>

</center>

</body>

</html>

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

А можно ли использовать на странице несколько таблиц ? Можно.

А можно ли использовать таблицу внутри другой таблицы ? Можно. Но осторожно. Чтобы не запутаться и соблюдать вложенность.

Давай создадим для примера одну таблицу в другой.

Сначала создадим таблицу, например 2 х 2

код таблицы будет такой

<table>

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

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

</table>

А теперь вставим в первую ячейку такую же таблицу 2х2, т.е. сделаем вот такую таблицу

Код нашей таблицы будет такой :

<table>

<tr>
<td>

<table>

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

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

</table>

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

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

</table>

Красным выделен код новой таблицы, вставленной в первую ячейку основной таблицы.

Да...Несколько заморочно [image] . Но вы должны четко понимать структуру таблицы.
Если чего-то не поняли - перечитайте все ЕЩЕ РАЗ, пока не поймете. Дело в том что в процессе работы у вас могут возникнуть ошибки..где нибудь забудете закрыть тег ячейки..или тег строки...или нарушите принцип вложенности...в итоге вместо желанной таблицы у вас будет черт знает что на странице. Знание того КАК правильно делать таблицу - позволит вам найти ошибку и исправить код.

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

Важно. Если в таблице нет данных - то вы может и не увидите таблицу.

Для того чтобы увидеть таблицу в которой не введены данные, надо задать параметр таблицы border. По умолчанию он равен 0, поэтому таблицу без данных - не видно. Вставьте в тег таблицы значение border="1"

<table border="1">

Также часто требуется задать размеры таблицы, для этого служат уже известные параметры WIDTH и HEIGHT. Эти параметры мы применяли в уроке по вставке картинки.

Например вот так

<table border="1" width="300" height="150"> - это будет таблица шириной 300 пикселей и высотой 150,

вот такая

код таблицы такой

<table width="300" border="1" height="150">
<tr>
<td> </td>
</tr>
</table>

Также можно указать ширину и высоту строк и ячеек, используя параметры WIDTH и HEIGHT.

т.е. использовать эти параметры в тегах <tr> и <td>

Вставим в таблицу еще одну ячейку

<table width="300" border="1" height="150">
<tr>
<td> </td><td> </td>
</tr>
</table>

т.е. получим вот такую таблицу

ячейка 1

ячейка 2

а теперь сделаем ширину первой ячейки = 50

<table width="300" border="1" height="150">
<tr>
<td width="50"> </td><td> </td>
</tr>
</table>

таблица будет выглядеть вот так:

чтобы было видно ячейки надо в них что нибудь написать

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

Еще один часто употребляемый параметр для таблиц - это бэкграунд, т.е. задний фон.

Для описания цвета фона используется параметр bgcolor. Например вот такой код

<table width="300" border="1" height="150">
<tr>
<td width="50" bgcolor="#CCCCCC"> </td>
<td bgcolor="#FFFF99"> </td>
</tr>
</table>

даст вот такую таблицу

Но и это еще не все ! В качестве фона в таблицах можно использовать изображения !

Вернемся к файлу с которым мы работаем и в котором прописан вот этот код

<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>

<body bgcolor="#00CCFF" text="#FFFF00">

<center>

Сегодня замечательный день. <br><i>Я сделал свою первую интернет страничку.</i>

<br><font color="#0000FF" size="4"><b>я буду богатым и свободным человеком !</b></font>

<br><br>

<a href="http://moneymaster.ru"><img src="money-master.jpg" border="0"></a>

<br><br>

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

<br><br>

<table>

<tr>
<td> строка 1 ячейка 1 </td>
<td>строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>

<tr>
<td>строка 2 ячейка 1 </td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>

</table>

</center>

</body>

</html>

Сохраните вот это изображение под его "родным" именем sv5.gif в той же директории где находится файл page.html, для этого наведите мышку на изображение, нажмите правую кнопку мышки и выберите "Сохранить рисунок как..". Выберите ту же директорию где находится файл page.html

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

<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>

<body bgcolor="#00CCFF" text="#FFFF00">

<center>

Сегодня замечательный день. <br><i>Я сделал свою первую интернет страничку.</i>

<br><font color="#0000FF" size="4"><b>я буду богатым и свободным человеком !</b></font>

<br><br>

<a href="http://moneymaster.ru"><img src="money-master.jpg" border="0"></a>

<br><br>

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

<br><br>

<table>

<tr background="sv5.gif">
<td> строка 1 ячейка 1 </td>
<td>строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>

<tr>
<td>строка 2 ячейка 1 </td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>

</table>

</center>

</body>

</html>

В итоге мы получим вот такую таблицу

строка 1 ячейка 1 | строка 1 ячейка 2 | строка 1 ячейка 3
строка 2 ячейка 1 | строка 2 ячейка 2 | строка 2 ячейка 3

а наша страница будет выглядеть так.

Возможно вы не увидели того, что требовалось увидеть. Так например Internet Explorer не понимает фоновую картинку в теге <tr>. Для того, чтобы не сталкиваться с такой проблемой - лучше писать параметр background в теге <td>.

Если мы хотим сделать фон только для конкретной ячейки, то параметр background="sv5.gif" надо прописать в нужном теге <td>, т.е. вот так например <td background="sv5.gif">

Замечательным свойством фонового изображения является его повторяемость ! Т.е. если у вас размер ячейки больше чем изображение - то оно будет дублироваться так, чтобы заполнить все пространство ячейки.

повторяемость фона.

Само собой, в таблице можно писать нужный текст или вставить картинку и таким образом осуществить некоторую двухслойность страницы.

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

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

В этом уроке курса Money Master часть 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

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

Где брать такие шапки ? Рисовать самим. О том как это делать будет рассказано в MoneyMaster часть 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>

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

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

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

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

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

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

ЧТО ДАЛЬШЕ.

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

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

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

Заработок в интернете по системе MoneyMaster-2

скачать Money Master часть 2
(демо-версия. бесплатно) 730кб

Money Master часть 2.

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

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

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

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

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