Урок №1
Сайт за 5 минут
Да. Вы МОЖЕТЕ создать сайт. И свой первый сайт вы сделаете всего лишь за 5 минут !
Итак. Сначала нам нужен простейший текстовый редактор, например Блокнот.
Для того чтобы запустить Блокнот, жмем кнопку Пуск -> Все программы -> Стандартные -> Блокнот
Теперь выделите левой кнопкой мышки код, написанный ниже голубым цветом и скопируйте его в буфер (через правую кнопку мышки, или нажав Ctrl и кнопку C, или через меню Блокнота : Правка -> Копировать).
<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>
<body>
Сегодня замечательный день. <br>Я сделал свою первую интернет страничку.
</body>
</html>
Затем перейдите в Блокнот и вставьте из буфера скопированный код (через правую кнопку мышки, или нажав Ctrl и V, или выбрав в меню Блокнота пункт Правка -> Вставить).
Теперь выбираем в меню Блокнота : Файл - > Сохранить как ...
Выбираем место на диске (запомните куда вы сохраняете файл !), затем вводим имя файла, под которым мы сохраним нашу страничку. Вводим например page.html и жмем кнопку "Сохранить"
Расширение файла html - показывает, что данный файл является интернет-страницей.
Теперь найдите на вашем диске сохраненный файл page.html.
Тут такой нюанс, если блокнот сохранил ваш файл как page.html.txt - то переименуйте его в page.html
Теперь запустите файл page.html, нажав быстро мышкой по файлу 2 раза.
У вас запуститься ваш браузер, например Internet Explorer.
Поздравляю ! Вы только что сделали свою первую интернет страницу !
Разве было сложно ? Думаю что нет и можно продолжить.
Как видите - создание интернет-страниц не такое уж непосильное дело. Это ДОСТУПНО КАЖДОМУ.
И вам жизненно необходимо этому научиться, если вы действительно хотите зарабатывать в интернете ! И я помогу вам в этом !
Большая часть денег, которые можно заработать в интернете - зарабатываются при помощи сайтов !
Теперь разберем подробней что есть что и для чего нужно.
Создание страниц производиться с помощью языка гипертекстовой разметки 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, можно двинуться дальше.
Урок №2
Раскрашиваем страницу
Итак, после того как вы создали свою первую интернет-страницу, наверняка у вас появилось желание раскрасить ее в те цвета какие вы хотите.
Этим мы сейчас и займемся.
Наш исходный код на данный момент, после прошлого урока такой :
<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>
<body>
Сегодня замечательный день. <br>Я сделал свою первую интернет страничку.
</body>
</html>
- Изменение цвета фона страницы.
Добавьте в тег <BODY> следующий параметр тега bgcolor="#00CCFF", чтобы в итоге получилось так
<body bgcolor="#00CCFF">
Сохраните вашу страницу (Файл->Сохранить) и откройте вашу страницу (или нажмите обновить если вы не закрывали страницу).
Для создания цветов на странице используется RGB-модель. Т.е. любой цвет "составляется" из 3 основных цветов - Red Green Blue.
запись из нашего примера #00CCFF расшифровывается так : 00 частей красного, СС частей зеленого, FF частей голубого.
каждый из знаков может быть от 0 до 9, или буквы от А до F. Таким образом вы можете синтезировать любой цвет.
Вот некоторые цвета и их код
FF0000 - красный
00FF00 - зеленый
0000FF - синий
FFFF00 - желтый
000000 - черный
FFFFFF - белый
999999 - серый
CCFFFF - голубой
- изменение цвета текста
Для того чтобы изменить цвет текста на всей странице, или иными словами назначить цвет текста по умолчанию, надо в тег <body> добавить еще один параметр. Добавьте text="#FFFF00"
итого у нас тег <body> будет такой :
<body bgcolor="#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> как я писал ранее служит для принудительного переноса текста на следующую строку.
Итак, после того как вы создали свою первую интернет-страницу, наверняка у вас появилось желание раскрасить ее в те цвета какие вы хотите.
Этим мы сейчас и займемся.
Наш исходный код на данный момент, после прошлого урока такой :
<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>
<body>
Сегодня замечательный день. <br>Я сделал свою первую интернет страничку.
</body>
</html>
- Изменение цвета фона страницы.
Добавьте в тег <BODY> следующий параметр тега bgcolor="#00CCFF", чтобы в итоге получилось так
<body bgcolor="#00CCFF">
Сохраните вашу страницу (Файл->Сохранить) и откройте вашу страницу (или нажмите обновить если вы не закрывали страницу).
Должно получиться так.
Для создания цветов на странице используется RGB-модель. Т.е. любой цвет "составляется" из 3 основных цветов - Red Green Blue.
запись из нашего примера #00CCFF расшифровывается так : 00 частей красного, СС частей зеленого, FF частей голубого.
каждый из знаков может быть от 0 до 9, или буквы от А до F. Таким образом вы можете синтезировать любой цвет.
Вот некоторые цвета и их код FF0000
00FF00
0000FF
FFFF00
000000
FFFFFF
999999
009999
FFFFCC
CCFFFF
- изменение цвета текста
Для того чтобы изменить цвет текста на всей странице, или иными словами назначить цвет текста по умолчанию, надо в тег <body> добавить еще один параметр. Добавьте text="#FFFF00"
итого у нас тег <body> будет такой :
<body bgcolor="#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> как я писал ранее служит для принудительного переноса текста на следующую строку.
Урок №3
Выравнивание материала сайта по центру
Если вы хотите выровнять содержимое вашей страницы по центру, или только какую либо часть - то надо заключить интересующий вас кусок страницы между тегами <center> и </center>
Т.е. на примере нашей предыдущей страницы, для выравнивания всего содержимого сайта по центру видоизменяем код страницы так :
<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>
<body bgcolor="#00CCFF" text="#FFFF00">
<center>
Сегодня замечательный день. <br>Я сделал свою первую интернет страничку.
<br><font color="#0000FF">я буду богатым и свободным человеком !</font>
</center>
</body>
</html>
Урок №4
Вставляем на сайт картинку
Допустим вы решили вставить на сайт вот такую картинку :
Сначала вам нужно сохранить эту картинку у себя на компьютере. Для этого наведите курсор мышки на картинку и нажмите правую кнопку мышки. Выберите "Сохранить рисунок как..." Укажите место для сохранения картинки. Сохраните картинку там-же, где находиться страничка, которую мы делаем - page.html Имя файла картинки оставьте тоже самое - money-master.jpg
Для вставки на страницу картинки - используется тег <img>. В качестве параметра для этого тега, используется название картинки. Должен же компьютер знать какую картинку мы хотим вставить
В нашем случае для вставки картинки 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="Сайт о заработке в интернете" >
внесите изменения в код и посмотрите что получиться.
Таким образом код нашей страницы будет такой :
<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>
Урок №5
Форматирование текста жирным и курсивом
Для того чтобы сделать текст жирными или курсивом используются парные теги
<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>
Результат будет одинаков.
Надеюсь понятно объяснил как форматировать текст жирным или курсивом и как вкладывать одни теги внутрь других.
Урок №6
Как изменить размер шрифта
Для изменения размера шрифта есть несколько способов.
Через теги <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>
тогда текст на странице будет выглядеть так
я буду богатым и свободным человеком !
Добавьте изменение в код страницы из предыдущего урока.
Урок №7
Как сделать ссылки на другие страницы сайта
Для создания ссылок на другие страницы вашего сайта, или ссылок на другие страницы сайта используется парный тег <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>
Урок №8
Использование таблиц на странице
Теперь рассмотрим как делать таблицы на странице.
Вообще это ОЧЕНЬ ВАЖНАЯ тема. Поэтому не пропускайте этот раздел, хоть он пожалуй самый сложный.
Дело в том что таблицы в 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>
ВАЖНО. Для описания таблицы вы должны использовать именно такой порядок : сначала пишите теги таблицы, затем теги строки, затем теги ячеек.
Заполним нашу таблицу содержимым, расположив покрасивее теги
<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>
Так..что-то мы в теорию погрузились сильно. Надо бы заняться и практикой.
Добавим код таблицы в наш учебный файл.
Итого, код нашей страницы будет вот такой
<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>
Да...Несколько заморочно . Но вы должны четко понимать структуру таблицы.
Если чего-то не поняли - перечитайте все ЕЩЕ РАЗ, пока не поймете. Дело в том что в процессе работы у вас могут возникнуть ошибки..где нибудь забудете закрыть тег ячейки..или тег строки...или нарушите принцип вложенности...в итоге вместо желанной таблицы у вас будет черт знает что на странице. Знание того КАК правильно делать таблицу - позволит вам найти ошибку и исправить код.
Если кто-то начал делать приведенные последние примеры, то возможно столкнулся с проблемой.
Да. Я немножко слукавил, но все для того чтобы вас не запутать.
Важно. Если в таблице нет данных - то вы может и не увидите таблицу.
Для того чтобы увидеть таблицу в которой не введены данные, надо задать параметр таблицы 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>
а теперь сделаем ширину первой ячейки = 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>
Возможно вы не увидели того что требовалось увидеть. Так например Internet Explorer не понимает фоновую картинку в теге <tr>. Для того чтобы не сталкиваться с такой проблемой - лучше писать параметр background в теге <td>.
Если мы хотим сделать фон только для конкретной ячейки, то параметр background="sv5.gif" надо прописать в нужном теге <td>, т.е. вот так например <td background="sv5.gif">
Замечательным свойством фонового изображения является его повторяемость ! Т.е. если у вас размер ячейки больше чем изображение - то оно будет дублироваться так, чтобы заполнить все пространство ячейки.
Само собой, в таблице можно писать нужный текст или вставить картинку и таким образом осуществить некоторую двухслойность страницы.
Окончание можно посмотреть в меню "Пример создания сайта"
