Благодарим за выбор нашего сервиса!
Тестовое сообщение
Страница: 1
Сообщений 1 страница 10 из 10
Поделиться12009-01-12 08:12:37
- Администратор
- Зарегистрирован: 2009-01-12
- Приглашений: 0
- Сообщений: 10
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
41 минуту - Последний визит:
2009-03-04 14:18:49
Поделиться22009-02-03 19:06:32
- Администратор
- Зарегистрирован: 2009-01-12
- Приглашений: 0
- Сообщений: 10
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
41 минуту - Последний визит:
2009-03-04 14:18:49
привет
Поделиться32009-03-04 07:16:03
- Администратор
- Зарегистрирован: 2009-01-12
- Приглашений: 0
- Сообщений: 10
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
41 минуту - Последний визит:
2009-03-04 14:18:49
начнём
Да. Вы МОЖЕТЕ создать сайт. И свой первый сайт вы сделаете всего лишь за 5 минут !
Итак. Сначала нам нужен простейший текстовый редактор, например Блокнот.
Для того чтобы запустить Блокнот, жмем кнопку Пуск -> Все программы -> Стандартные -> Блокнот
Теперь выделите левой кнопкой мышки код, скопируйте его в буфер (через правую кнопку мышки, или нажав Ctrl и кнопку C, или через меню Блокнота : Правка -> Копировать).
<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>
<body>
Сегодня замечательный день. <br>Я сделал свою первую интернет страничку.
</body>
</html>
Затем перейдите в Блокнот и вставьте из буфера скопированный код (через правую кнопку мышки, или нажав Ctrl и V, или выбрав в меню Блокнота пункт Правка -> Вставить).
Теперь выбираем в меню Блокнота : Файл - > Сохранить как ...
Выбираем место на диске (запомните куда вы сохраняете файл !), затем вводим имя файла, под которым мы сохраним нашу страничку. Вводим например page.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, можно двинуться дальше.
продоление
Поделиться42009-03-04 07:16:42
- Администратор
- Зарегистрирован: 2009-01-12
- Приглашений: 0
- Сообщений: 10
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
41 минуту - Последний визит:
2009-03-04 14:18:49
раскрасим
Раскрашиваем страницу
Итак, после того как вы создали свою первую интернет-страницу, наверняка у вас появилось желание раскрасить ее в те цвета какие вы хотите.
Этим мы сейчас и займемся.
Наш исходный код на данный момент, после прошлого урока такой :
<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 белый
- изменение цвета текста
Для того чтобы изменить цвет текста на всей странице, или иными словами назначить цвет текста по умолчанию, надо в тег <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> как я писал ранее служит для принудительного переноса текста на следующую строку.
А выглядеть это будет вот ТАК.
продоление
Поделиться52009-03-04 07:17:05
- Администратор
- Зарегистрирован: 2009-01-12
- Приглашений: 0
- Сообщений: 10
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
41 минуту - Последний визит:
2009-03-04 14:18:49
Выравнивание материала сайта по центру
Если вы хотите выровнять содержимое вашей страницы по центру, или только какую либо часть - то надо заключить интересующий вас кусок страницы между тегами <center> и </center>
Т.е. на примере нашей предыдущей страницы, для выравнивания всего содержимого сайта по центру видоизменяем код страницы так :
<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>
<body bgcolor="#00CCFF" text="#FFFF00">
<center>
Сегодня замечательный день. <br>Я сделал свою первую интернет страничку.
<br><font color="#0000FF">я буду богатым и свободным человеком !</font>
</center>
</body>
</html>
продоление
Поделиться62009-03-04 07:17:28
- Администратор
- Зарегистрирован: 2009-01-12
- Приглашений: 0
- Сообщений: 10
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
41 минуту - Последний визит:
2009-03-04 14:18:49
картинка
Сначала вам нужно сохранить эту картинку у себя на компьютере. Для этого наведите курсор мышки на картинку и нажмите правую кнопку мышки. Выберите "Сохранить рисунок как..." Укажите место для сохранения картинки. Сохраните картинку там-же, где находиться страничка, которую мы делаем - 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>
продоление
Поделиться72009-03-04 07:22:34
- Администратор
- Зарегистрирован: 2009-01-12
- Приглашений: 0
- Сообщений: 10
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
41 минуту - Последний визит:
2009-03-04 14:18:49
шрифт
Форматирование текста жирным и курсивом
Для того чтобы сделать текст жирными или курсивом используются парные теги
<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>
Результат будет одинаков.
Надеюсь понятно объяснил как форматировать текст жирным или курсивом и как вкладывать одни теги внутрь других.
продоление
Поделиться82009-03-04 07:27:19
- Администратор
- Зарегистрирован: 2009-01-12
- Приглашений: 0
- Сообщений: 10
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
41 минуту - Последний визит:
2009-03-04 14:18:49
таблицы
Использование таблиц на странице
Теперь рассмотрим как делать таблицы на странице.
Вообще это ОЧЕНЬ ВАЖНАЯ тема. Поэтому не пропускайте этот раздел, хоть он пожалуй самый сложный.
Дело в том что таблицы в 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>
Таблица будет выглядеть так строка 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>
Красным выделен код новой таблицы, вставленной в первую ячейку основной таблицы.
Да...Несколько заморочно . Но вы должны четко понимать структуру таблицы.
Если чего-то не поняли - перечитайте все ЕЩЕ РАЗ, пока не поймете. Дело в том что в процессе работы у вас могут возникнуть ошибки..где нибудь забудете закрыть тег ячейки..или тег строки...или нарушите принцип вложенности...в итоге вместо желанной таблицы у вас будет черт знает что на странице. Знание того КАК правильно делать таблицу - позволит вам найти ошибку и исправить код.
Если кто-то начал делать приведенные последние примеры, то возможно столкнулся с проблемой.
Да. Я немножко слукавил, но все для того чтобы вас не запутать.
Важно. Если в таблице нет данных - то вы может и не увидите таблицу.
Для того чтобы увидеть таблицу в которой не введены данные, надо задать параметр таблицы 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">
Замечательным свойством фонового изображения является его повторяемость ! Т.е. если у вас размер ячейки больше чем изображение - то оно
будет дублироваться так, чтобы заполнить все пространство ячейки.повторяемость фона.
Само собой, в таблице можно писать нужный текст или вставить картинку и таким образом осуществить некоторую двухслойность страницы.
продоление
Поделиться92009-03-04 07:28:09
- Администратор
- Зарегистрирован: 2009-01-12
- Приглашений: 0
- Сообщений: 10
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
41 минуту - Последний визит:
2009-03-04 14:18:49
таблицы
Использование таблиц на странице
Теперь рассмотрим как делать таблицы на странице.
Вообще это ОЧЕНЬ ВАЖНАЯ тема. Поэтому не пропускайте этот раздел, хоть он пожалуй самый сложный.
Дело в том что таблицы в 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>
Таблица будет выглядеть так строка 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>
Красным выделен код новой таблицы, вставленной в первую ячейку основной таблицы.
Да...Несколько заморочно . Но вы должны четко понимать структуру таблицы.
Если чего-то не поняли - перечитайте все ЕЩЕ РАЗ, пока не поймете. Дело в том что в процессе работы у вас могут возникнуть ошибки..где нибудь забудете закрыть тег ячейки..или тег строки...или нарушите принцип вложенности...в итоге вместо желанной таблицы у вас будет черт знает что на странице. Знание того КАК правильно делать таблицу - позволит вам найти ошибку и исправить код.
Если кто-то начал делать приведенные последние примеры, то возможно столкнулся с проблемой.
Да. Я немножко слукавил, но все для того чтобы вас не запутать.
Важно. Если в таблице нет данных - то вы может и не увидите таблицу.
Для того чтобы увидеть таблицу в которой не введены данные, надо задать параметр таблицы 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">
Замечательным свойством фонового изображения является его повторяемость ! Т.е. если у вас размер ячейки больше чем изображение - то оно
будет дублироваться так, чтобы заполнить все пространство ячейки.повторяемость фона.
Само собой, в таблице можно писать нужный текст или вставить картинку и таким образом осуществить некоторую двухслойность страницы.
продоление
Поделиться102009-03-04 07:28:31
- Администратор
- Зарегистрирован: 2009-01-12
- Приглашений: 0
- Сообщений: 10
- Уважение: [+0/-0]
- Позитив: [+0/-0]
- Провел на форуме:
41 минуту - Последний визит:
2009-03-04 14:18:49
сайт
Пример создания сайта.
Итак. Пришло время создать нечто более сложное, чем мы делали до этого, но используя полученные знания в предыдущих уроках.
В этом заключительном уроке курса 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> </td>
<td> </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 пикселей. Да. Есть такой глюк браузера, но все встанет на свои места если начать писать текст в основном разделе страницы.
Чтобы подтвердить это, добавим текста на наш сайт.
<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>
<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>
И сохраним... (Файл -> Сохранить)
Вторая страница сайта будет выглядеть ТАК.
Вот мы и сделали простенький сайтик, который вы можете подредактировать и разместить в интернете.
Возможно у кого то возник вопрос. А почему столько много пустых строк, нельзя ли уплотнить код ?
Можно. Я сделал пропуски чтобы было наглядней видно структуру страницы. А так можно разместить весь код вообще в одну строчку
Но не стоит. Иначе будет трудно искать ошибки если что...
Если есть какие либо вопросы по этому примеру - пишите .
продоление
Страница: 1