Первые шаги.

Главная | Словарь тэгов | Оглавление Главная страница.

Здравствуйте,

Уважаемый Читатель, мы рады, что вы решили постигать азы HTML при помощи нашего учебника. Если вам понравится каким образом изложена информация в нашем учебнике, если вы хотите получить полный комплекс материалов по азам сайтостроительства, то мы ждем вас на нашей "Постройка.ру". Там, если у вас возникнут вопросы, вы сможете задать их авторам, мы обязательно ответим и поможем вам в решении возникшей проблемы.

От автора

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

Автором учебника является Алленова Наталья.
Родной сайт учебника располагается по адресу: http://postroika.ru.

ОГЛАВЛЕНИЕ СЛОВАРЬ

Условия распространения учебником

  1. Данный учебник распространяется бесплатно в сети интернет.
  2. Любой желающий может разместить у себя на сайте архив (*.zip) с учебником, при условии указания автора и ссылки на родной сайт учебника. Автором учебника является Алленова Наталья. Родной сайт учебника располагается по адресу: http://postroika.ru.
  3. Автор не разрешает распространение учебника в открытом виде (т.е. иначе, чем в архиве).

Ссылки на полезные материалы

  • Спецификация HTML 4.01 (перевод)
  • HTML-справочник.
  • Заметки HTML кодера
  • Рецепты Html
  • Коллекция ссылок по Html от Махаона
  • World Wide Web Consortium


Первые шаги. Ступенька 1-ая.

Главная | Словарь тэгов | Оглавление > Учебник по Html. Ступенька 1-ая.

Учебник по Html для чайников. Инструментарий.

Ступенька 1-ая.

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

D:\первые шаги\

У себя на компьютере я создала такую папку на диске D, и назвала ее Первые Шаги. Вы, естественно, можете создать вашу папку, где угодно, и назвать ее, как угодно. Теперь откроем блокнот – notepad (start – programs – accessories – notepad или пуск – программы – стандартные – блокнот) и скопируем туда следующий текст:

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать! :)
</body>
</html> (посмотреть)

Сохраним этот документ, присвоив ему имя *.html

D:\первые шаги\index.html

Многие читатели спотыкаются на фразе: "А теперь сохраним этот документ, присвоив ему имя *.html", они пишут письма, о том, что у них получается сохранить, только как текстовой документ *.txt, а вот как *.html - никак. Чтобы в дальнейшем избежать этого глупого недоразумения, я и пишу это примечание.

Если вы сохраняете документ, через Файл -> Сохранить (File -> Save), то, естественно, что он сохраняется как *.txt. Надо сохранять ваш документ следующим образом:

- Файл -> Сохранить Как (File -> Save as)
- Дальше вводите имя своего документа, например: index.html (а не просто index; приписочка *.html должна быть обязательно).
- Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл -> Сохранить (File -> Save).

Вот и все. Надеюсь, теперь у всех все будет в порядке.

Теперь откроем броузер, допустим, Internet Explorer (не закрывайте блокнот, он нам еще пригодится), и откроем в броузере наш документ.

Файл - Открыть - кнопка Обзор - Наш документ (index.html)
File – Open – Browse – index.html

Если мы чего-то изменим в нашем *.html документе (в блокноте), то, чтобы посмотреть, как это выглядит в нашем броузере, надо не забывать нажимать в броузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.

Посмотрим теперь, что у нас получилось, и разберемся, как оно так получилось :)
Далее: Ступенька 2-ая >>>


Первые шаги. Ступенька 2-ая.

Главная | Словарь тэгов | Оглавление Ступенька 2-ая.

Учебник по Html для чайников. Инструментарий.

Ступенька 2-ая.

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать! :)
</body>
</html> (посмотреть)

Первое, что нам нужно усвоить: хтмл (html) - это то, что мы сейчас изучаем. Второе, что нам нужно усвоить: html не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы размечаем текст, таблицы, картинки и т.д. на нашей странице). То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (tags или тэги).

Пример тэга: <br> (перенос текста на другую строку). Попробуйте вставить еще несколько тэгов <br> в нашем документе перед «добро пожаловать!». Сохраните. Посмотрите в вашем броузере, что получилось.

Итак, все, что находится между < и > - это тэг. Текст, не находящийся между такими скобками < > - весь виден при просмотре в броузере.

Как мы видим на нашем примере: тэгов много, и они разные :). Обратите внимание на картинку, она тут не просто так, она показывает нам обязательные тэги. Обязательные теги, это такие теги, которые вы всегда должны прописывать для каждой своей страницы, даже не смотря на бури, ураганы и другие стихийные бедствия.

<html>

Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий:

</html>

Некоторые тэги, вроде <br>, не требуют закрывающего тэга.

Итак, вернемся, к нашему документу и рисунку.
<<< Ступенька 1-ая: Назад | Далее: Ступенька 3-ая >>>


Первые шаги. Ступенька 3-ая.

Главная | Словарь тэгов | Оглавление Ступенька 3-ая.

Учебник по Html для чайников. Инструментарий.

Ступенька 3-ая.

<html>
<head>
<title>Мой первый шаг</title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать! :)
</body>
</html> (посмотреть)

<head> </head> - голова документа
<body> </body> - тело документа

Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации (наша служба и опасна и трудна, и на первый взгляд как будто не видна:). Например <title>- заголовок. Зачем он? Откройте IE (Internet Explore) с нашим документом и устремите свой взгляд на заголовок окна... Увидели?:)

Все тэги, расположенные между <body> </body> - непосредственное содержание документа. Следующие несколько ступенек будут посвящены именно этим тэгам: мы узнаем, как менять цвет текста, фона, как делать текст крупнее-мельче, поговорим о картинках, таблицах и многом другом. Но прежде, все-таки закончим наш разговор о тэгах, в общем.

<тэг> </тэг> - не просто тэг, это контейнер - тэг, который может содержать внутри себя другие тэги (и текст).

Обратите внимание:

<тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>

Только такая очередность закрывающих тэгов верна: тэг, который мы открыли первым - закрываем последним, второй – предпоследним и т.д.

Т.е. следующая очередность нежелательна и не верна, она может привести к ошибкам на вашей страничке:

<тэг1><тэг2><тэг3> ... </тэг3></тэг1></тэг2>

Так что будьте внимательны, и пишите код своих страничек аккуратно и вдумчиво.
<<< Ступенька 2-ая: Назад | Далее: Ступенька 4-ая >>>


Первые шаги. Ступенька 4-ая.

Главная | Словарь тэгов | Оглавление Ступенька 4-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 4-ая.

Начнем с малого, легкого, и даже интересного, и постепенно перейдем к сложному, большому, и, возможно, даже нудному, без чего не обходится ни одно обучение. Но не буду вас расстраивать заранее. Итак, на этой ступеньке мы будем учиться раскрашивать. Для начала нам будет нужна палитра (все цвета интернета - http://www.artlebedev.ru/tools/colors/). Лучше всего сохраните палитру у себя на компьютере, она вам еще не раз пригодится:

Файл – Сохранить как (File – Save as)

Зачем все это? А затем, что все обозначения цвета в Html прописываются именно таким способом. Например, белый цвет – ffffff. Но вернемся к нашей страничке. Давайте окрасим слова Добро Пожаловать в красный.

<font color="#CC0000"> Добро пожаловать! :) </font>

Color – параметр (атрибут) для тэга font, он отвечает, в данном случае, за цвет заключенного в контейнер текста. Атрибут color, как и другие атрибуты, не принадлежит только одному тэгу, он может быть присвоен и некоторым другим тэгам.

Попробуйте вместо СС0000 подставить другие значения цветов для атрибута color. Обратите внимание, что значению цвета обязательно должен предшествовать значок «решетка» - #.

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

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать! :) </font>
</body>
</html> (посмотреть)

Тэг <font></font> - многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта (Arial), но об этом чуть позже.

Как же еще задавать цвета в документе? - вспомним об открывающем тэге <body>:

<body text="#336699">

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

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :)
</body>
</html> (посмотреть)

С цветами для текста мы разобрались, теперь подумаем о фоне. Шагаем дальше:)
<<< Ступенька 3-ая: Назад | Далее: Ступенька 5-ая >>>


Первые шаги. Ступенька 5-ая.

Главная | Словарь тэгов | Оглавление Ступенька 5-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 5-ая.

На этой ступеньке мы узнаем, как изменять цвет фона документа, и поговорим немного об этике.

Цвет фона устанавливается в уже знакомом нам тэге <body>:

<body bgcolor="#000000">

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

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :)
</body>
</html> (посмотреть)

Обратите внимание: мы одновременно можем прописать в тэге <body> и цвет текста в документе, и цвет фона (это на всякий случай, если вы еще не поняли – одному тэгу может быть присвоено несколько атрибутов :).

<body text="#336699" bgcolor="#000000">

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

Я хочу попросить вас, мой дорогой спутник, не злоупотреблять яркими фонами (желтым, красным, салатовым, ну, и черным с яркой смесью текста на нем). Почему? Да, просто пожалейте глаза ваших друзей, знакомых и случайного посетителя. Не следует также употреблять слишком много различных цветов на вашей страничке, это, как и яркий фон, отвлекает от содержания, мешает прочтению и выставляет вас самого не в лучшем свете.

Пример: Девочка в ярко-розовых джинсах и противном салатовом топике с надписью Kiss me, безусловно, привлечет внимание, но надолго ли? Что вы о ней подумаете? Не уподобляйтесь такой не очень разумной девочке:).

Кстати, о внимании, давайте переключим его на следующую главу моего повествования и шагнем на другую ступеньку.
<<< Ступенька 4-ая: Назад | Далее: Ступенька 6-ая >>>


Первые шаги. Ступенька 6-ая.

Главная | Словарь тэгов | Оглавление Ступенька 6-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 6-ая.

В этой главе мы поговорим о параграфах. Параграфы вводятся тэгом:

<p></p>

С помощью параграфов мы можем центрировать текст:

<p align="center">текст</p>

С помощью параграфов мы можем выровнять текст по левому краю:

<p align="left">текст</p>

По правому краю документа:

<p align="right">текст</p>

По обоим краям документа:

<p align="justify">текст</p>

Теперь введем параграфы в наш документ и посмотрим наглядно, что получится (в наш пример я подставила параграф с атрибутом центрирования текста (align="center"), попробуйте подставить в параграф атрибут align с другими значениями: Left, Right, Justify).

Кстати, правильно говорить не выравнивание, а выключка: выключка по левому краю, правому, центру, по обоим краям. Если вы позже будете углубляться в область дизайна, то вам наверняка этот термин встретится. Между прочим, HTML не имеет к дизайну ни малейшего отношения, не считайте, что, изучив HTML, вы станете вдруг дизайнером, это большое заблуждение многих начинающих в области сайтостроительства.

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<p align="center">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </p>
</body>
</html> (посмотреть)

Но, вернемся к нашему HTML и параграфам. Запомните: никогда нельзя вводить в документ подобную конструкцию:

<p></p>

Пустые элементы <p> без какого-либо содержания (других тэгов или текста) могут игнорироваться броузерами. Не забывайте это. Заметьте, что текст в документе, если не задавать параграфы, всегда выравнивается по умолчанию по левому краю. Также запомните, что после закрывающего тега </p> автоматически происходит перенос строки. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный <p align="center">:

<center> текст </center>

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
</body>
</html> (посмотреть)

«Однако», - может возмутиться, мой читатель, - «а как же относительно других типов выравнивания? Вы рассказали только об альтернативе центрирования».

Не волнуйтесь, я еще просто не успела рассказать вам все:). Я вовсе не молчаливый партизан: секреты HTML выдам и другу, и врагу абсолютно бесплатно.

Конечно, тэг <center> хорош, но остался нам он еще с прошлых версий HTML (да, их было несколько, все в этом мире развивается, HTML не исключение). Пока что этот тэг никто не отменял, и его можно использовать, но это не слишком желательно.

Как же лучше поступить? Лучше использовать тэг <div></div>, одно из назначений которого выравнивание содержимого вашего документа. Все четыре значения атрибута align можно употреблять с <div>:

<div align="center"> текст </div>
<div align="left"> текст </div>
<div align="right"> текст </div>
<div align="justify"> текст </div>

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </div>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появться еще один виртуальный друг? :)
</p>
</body>
</html> (посмотреть)

Я тут за вас набросала примерный текст вступления, вы придумаете, конечно, что-нибудь свое. Но прежде мы завершим наш разговор о <div> и <p>. Параграф не может содержать в себе другие параграфы, и также тэг <div></div>. Т.е. следующие конструкции будут не верны, и вводить их в документ нельзя даже под страхом смерти:

<p align="right">
<p>текст</p>
<p>текст</p>
<p>текст</p>
</p>

и

<p align="right">
<div>текст</div>
<p>текст</p>
<div>текст</div>
</p>

Однако <div> может содержать в себе параграфы: с помощью него мы можем сгруппировать их, допустим, по правому краю.

<div align="right">
<p>текст первого абзаца</p>
<p>текст второго абзаца</p>
<p>текст третьего абзаца</p>
</div>

Конечно, <p> и <div> не несут в себе исключительно функцию выравнивания элементов. Но поскольку я хотела в этой главе освоить с вами только выравнивание, то к другим возможностям использования <div> и <p> мы вернемся гораздо позже, т.к. это уже более сложная тема для разговора, и вы, мой читатель, пока что к ней не готовы.
<<< Ступенька 5-ая: Назад | Далее: Ступенька 7-ая >>>


Первые шаги. Ступенька 7-ая.

Главная | Словарь тэгов | Оглавление Ступенька 7-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 7-ая.

В этой главе мы научимся выделять текст при помощи заголовков и узнаем еще одну функцию тэга <font></font>.

Начнем с заголовков. Существуют шесть уровней заголовков:

<H1> текст </H1>

<H2> текст </H2>

<H3> текст </H3>

<H4> текст </H4>

<H5> текст </H5>
<H6> текст </H6>
Итак, h1 – самый важный, h6 – наименее важный. Вводя заголовки в текст, вы позволяете вашему посетителю более легко ориентироваться на странице. Заголовками вы определяете структуру внутри текста.

Давайте теперь введем заголовок в наш документ. Мне кажется, что фраза "Здравствуйте, это моя первая страница" так и просится, чтобы ее выделили:

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </div>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :)
</p>
</body>
</html> (посмотреть)

В пример я ввела заголовок третьего уровня <h3></h3> (мой любимый размер:). Смотрите, что получилось. Как мы видим, визуально заголовки отображаются не только более крупным шрифтом, но к тому же и полужирным. Также после закрывающего </hx> происходит автоматически перенос на другую строку.

Заголовки предназначены для выделения небольшой части текста (строки, фразы). Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тэга <font></font>, который устанавливает желаемый размер шрифта:

<font size="+4"> текст </font>
<font size="+3"> текст </font>
<font size="+2"> текст </font>
<font size="+1"> текст </font>
<font size="+0"> текст </font>
<font size="-1"> текст </font>
<font size="-2"> текст </font>

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

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </div>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <font size="+1"> еще один виртуальный друг? :)</font>
</p>
</body>
</html> (посмотреть)

Прежде, чем мы двинемся дальше, хочу предупредить, что есть такая опасная болезнь у начинающих сайтостроителей, как гигантомания. Ее симптомы: непомерно большие размеры шрифта, гигантские кнопища на пол экрана, вместо маленьких и милых кнопочек, и толстый (жирный) во всех случаях текст. Поэтому напоминаю: стандартный size (по умолчанию) ="+0".

Жалейте глаза своих посетителей, и они к вам потянутся.

Фух:) топаем дальше.
<<< Ступенька 6-ая: Назад | Далее: Ступенька 8-ая >>>


Первые шаги. Ступенька 8-ая.

Главная | Словарь тэгов | Оглавление Ступенька 8-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 8-ая.

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

Сначала рассмотрим курсив и полужирный текст:

<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>

Как видите, все просто. Можете их сами понатыкать в тексте, где хочется, для пробы, а в примере я снова помучаю виртуального друга:

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </div>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :)</b>
</p>
</body>
</html> (посмотреть)

Теперь пара строк о моширинном шрифте. Что это такое за шрифт? Это шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки. А тэг для него следующий:

<tt> моноширинный шрифт </tt>

В наш пример я его вводить не буду (сделайте это самостоятельно).

Также моноширинным шрифтом отображается текст заключенный в тэг <pre></pre>:

<pre>
текст     (куча пробелов)     текст
             текст     (куча пробелов)     текст
       текст     (куча пробелов)     текст
</pre>
У тэга <pre> есть одна замечательная особенность: текст, заключенный в него, выводится с точностью до пробела так, как вы его набили в блокноте. Этот тэг вам может быть полезен, допустим, для форматирования стихотворений.

К одному фрагменту текста может применяться сразу несколько тэгов:

<tt><b><i> текст </i></b></tt>

В нашем примере текст моноширинный, полужирный, и выделен курсивом (вот так-то:). Не бойтесь использовать различные комбинации тэгов, экспериментируйте, но с умом:)

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

Подчеркнутый текст вводится при помощи тэга <u>:

<u> Подчеркнутый текст </u>

Тэги <strike> и <s> представляют текст перечеркнутым шрифтом, можете использовать какой вам угодно из них, принципиальной разницы между ними нет:

<strike> Перечеркнутый </strike>
<s> Перечеркнутый </s>

Тэг <big> представляется крупным шрифтом, а <small> малым шрифтом относительно основного текста:

<small> Малый </small>
Нормальный текст
<big> Большой </big>

Тэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний, Sub - нижний. Где они могут пригодиться? Ну, например, при написании какой-нибудь формулы - H2O (все, что мы выносим со школьной скамьи:).

Верхний индекс <sup> sup </sup>
Нижний индекс <sub> sub </sub>

Вот, собственно, и все. Можем переходить на следующую ступеньку.
<<< Ступенька 7-ая: Назад | Далее: Ступенька 9-ая >>>


Первые шаги. Ступенька 9-ая.

Главная | Словарь тэгов | Оглавление Ступенька 9-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 9-ая.

Мы уже с вами ознакомились с атрибутами size и color для тэга <font>. В этой главе, мы завершим наше знакомство с тэгом <font>, изучив атрибут face. С помощью face мы можем задать тип шрифта.

Попробуйте ввести следующую конструкцию в наш документ для части текста, чтобы задать шрифт Arial:

<font face="arial"> текст (шрифт Arial)</font>

Какие же типы шрифтов являются стандартными, и по идее должны находиться на компьютере каждого пользователя - это:

  • Times;
  • Times New Roman;
  • Arial;
  • Helvetica;
  • Courier;
  • Verdana;
  • Tahoma;
  • Cosmic Sans;
  • Garamond
Вы можете безбоязненно использовать любой из них.

В атрибуте face можно указать сразу несколько типов шрифтов:

<font face="arial, verdana, courier"> текст (шрифт Arial) </font>

В этом случае если у посетителя не окажется на компьютере шрифта Arial, то текст будет отображен шрифтом Verdana. Если и Verdana нет на компьютере вашего посетителя, то текст будет отображен шрифтом Courier. Т.е. в атрибуте face мы можем задать список разделенных запятыми названий шрифтов, которые броузер вашего посетителя должен попытаться найти у него на компьютере и отобразить в порядке приоритета.

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

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

Однако если вам нужно ввести на страницу лишь несколько надписей, выполненных вашим экзотическим шрифтом, то сделайте их картинками (в графическом редакторе вы пишете нужным шрифтом нужную надпись и сохраняете ее как картинку).

Как ввести картинку на вашу страничку, и что можно делать с картинками, вы узнаете на следующих ступеньках. Шагайте дальше :)
<<< Ступенька 8-ая: Назад | Далее: Ступенька 10-ая >>>


Первые шаги. Ступенька 10-ая.

Главная | Словарь тэгов | Оглавление Ступенька 10-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 10-ая.

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

Пока мы все еще сидим, я себе позволю немного почитать вам, мой читатель, нравоучения. Запомните, страница (сайт) не должна представлять собой супер графического изыска, который весит сотни килобайт, т.к. это жестоко, и ни одна живая душа не выдержит подобной пытки (грузить долго). Вот, например, эта страница, содержание которой вы сейчас тщательно изучаете, весит в картинках не более 70 килобайт (это общий вес всех картинок, а не вес каждой), что вполне допустимо, и не слишком тяжело.

Также я посоветую не изощряться с анимированными картинками: они отвлекают внимание от содержания странички, а анимированная картинка не к месту смотрится как золотое колье на немытой шее – нелепо. Постарайтесь также создавать свои картинки для своего сайта, а не собирать их по бесплатным коллекциям с графикой, пусть ваш сайт будет уникальным.

Теперь я с чистой совестью поведаю вам, как вставлять картинки в документ:

<img src="my.jpg">

Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории (в папке, которая лежит в вашей основной папке), то ссылка на неё будет выглядеть так:

<img src="my/my.jpg">

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

<img src="../my.jpg">

Если картинка лежит на другом сайте, то путь прописывается полностью:

<img src="http://www.homepage.ru/my/my.jpg">

Для вашего удобства кладите картинку в ту же папку, что и документ, тогда путаницы будет меньше:) Также я хочу обратить ваше внимание на то, что MY.jpg, my.JPG, my.jpg и MY.JPG – это разные имена файлов. Никогда не забывайте, что регистр нужно учитывать.

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

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </div>
<p align="justify">
<img src="primtocodephoto.gif"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :)</b>
</p>
</body>
</html> (посмотреть)

Посмотрите, что у нас получилось. Не очень симпатично, не так ли? Было бы лучше, если бы текст аккуратно располагался, например, сбоку от картинки. Идем дальше, чтобы узнать, как это сделать.
<<< Ступенька 9-ая: Назад | Далее: Ступенька 11-ая >>>


Первые шаги. Ступенька 11-ая.

Главная | Словарь тэгов | Оглавление Ступенька 11-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 11-ая.

Итак, мы задались вопросом как же сделать так, чтобы текст располагался весь рядом с картинкой, а не только одна его строчка. Все очень просто. Давайте вспомним об атрибуте align, который отвечает за выравнивание. Атрибут align есть и у картинок:

<img src="pr1.png" align="left">

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать right:

<img src="pr1.png" align="right">

Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):

(1) - <img src="pr1.png" align="bottom">
(2) - <img src="pr1.png" align="middle">
(3) - <img src="pr1.png" align="top">

Кроме атрибута align для тэга <img> можно ввести еще несколько атрибутов:

(1) - <img src="pr1.png" vspace="10">
(2) - <img src="pr1.png" hspace="30">
(3) - <img src="pr1.png" alt="моя фотография">
(4) - <img src="pr1.png" width="100">
(5) - <img src="pr1.png" height="200">
(6) - <img src="pr1.png" border="5">

Теперь последуют объяснения по пунктам.

(1) - атрибут vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel - минимальная единица изображения, точка. Например, разрешение экрана 800х600 - 800 на 600 точек. В нашем примере расстояние равно 10 пикселям.

(2) - атрибут hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).

(3) - атрибут alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что нажимать (если картинка является ссылкой или кнопкой в меню), т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего картинка предназначена.

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

(5) - атрибут height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, те же умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой...

(6) – атрибут border - рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут border равным нулю.

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

<img src="pr1.png" align="left" hspace="30" vspace="5" alt="моя фотография">

Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись - "моя фотография".

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </div>
<p align="justify">
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
</p>
</body>
</html> (посмотреть)

Советую вам прежде, чем двинуться дальше, поподставлять и другие атрибуты и их значения в наш пример: задать разное значение в пикселях для атрибутов и т.д. - это поможет вам лучше усвоить наш урок, все-таки тема большая и уже не такая простая:)

Вот мы узнали о том, как расположить текст относительно картинки (+ еще несколько нужных атрибутов), но мы не говорили, как расположить саму картинку в центре экрана (справа, слева). Здесь все очень просто, вспомните параграфы (<p></p>) или другие тэги для выравнивания текста, о которых мы говорили, ведь они не только текст выравнивают (см. наш пример, наша картинка заключена в параграф, как и текст).

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

<body text="#336699" bgcolor="#000000" background="ваш_фон.jpg">

Атрибут background указывает на то, где лежит фоновая картинка, в нашем примере он указывает на то, что наша фоновая картинка лежит в той же директории (папке), что и наш документ.

Но зачем оставлять атрибут bgcolor, если есть background? А вдруг фоновая картинка не загрузится (представьте, такое может быть), тогда сами поймете зачем.

Если вы достаточно поигрались с параметрами картинок, то продолжим наше обучение.
<<< Ступенька 10-ая: Назад | Далее: Ступенька 12-ая >>>


Первые шаги. Ступенька 12-ая.

Главная | Словарь тэгов | Оглавление Ступенька 12-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 12-ая.

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

Еще в самом начале обучения, в самых первых главах, я говорила о тэге <br>, который осуществляет принудительный перевод текста на другую строку (т.е. аналогичен нажатию клавиши Enter, когда мы форматируем текст в обычном текстовом редакторе).

В этой главе мы поговорим об атрибуте тэга <br> - clear. Зачем он нужен? Допустим, текст обтекает какой-либо объект (например, картинку):

А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам. "Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."

Нам нужно, чтобы текст после слов "к моим гранитным ногам" обрывался, и "кушай, великий предок" - уже продолжалось под картинкой. Вы, конечно, можете ввести несколько тэгов <br> и решить эту проблему. Но если вдруг картинка (объект) будет большой, а текста много, то тут вы уже явно не обойдетесь несколькими <br>, тут вам придется употребить их с десяток и больше. Так вот, чтобы вам не пришлось мучаться в таких ситуациях, и существует атрибут clear:

А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам.
"Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."

Теперь пример кода:

<img src="clearpri.gif" align="left">
А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам.
<br clear="left">
"Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."

У атрибута clear существует несколько значений - all, left, right.

All - завершить обтекание объекта текстом. Left - завершить обтекание текстом объекта, выровненного по левому краю. Right - завершить обтекание текстом объекта, выровненного по правому краю.

В нашем примере мы задали clear="left", т.к. наша картинка выровнена по левому краю.

Вот и вся премудрость. Текст примера - это отрывок из стихотворения "Первый!" одного моего знакомого, который в виртуальной реальности величает себя Мирзавчиком, не имеет никакого отношения к нашему обучению, и упомянут лишь из уважения к авторскому праву.
<<< Ступенька 11-ая: Назад | Далее: Ступенька 13-ая >>>


Первые шаги. Ступенька 13-ая.

Главная | Словарь тэгов | Оглавление Ступенька 13-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 13-ая.

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

Наша страничка может состоять из нескольких документов. Один из них главный (index.html) - он открывается первым и должен обязательно лежать на вашем сайте в интернете. Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных.

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

Ссылкой на эти другие документы (части нашей странички) может быть текст (фраза, слово), а может быть и картинка. На этой ступеньке мы рассмотрим только текстовую ссылку.

Для начала создадим новый документ (в нашем примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами, у вас для этого уже достаточно знаний.

Пусть prf.html - документ с вашими фотографиями. Тогда мы можем без зазрения совести фразу "посмотреть мои фотографии" сделать ссылкой на prf.html:

<a href="prf.html">посмотреть мои фотографии</a>

Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути мы уже знаем:

(1) - <a href="prf.html">мои фотографии</a>
(2) - <a href="photos/prf.html">мои фотографии</a>
(3) - <a href="http://www.homepage.ru/prf.html">мои фотографии</a>

В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.

Первые два примера (1) и (2) – называют относительными путями. (3) – абсолютный, т.е. указанный полностью, включая имя сайта (в нашем случае - http://www.homepage.ru/). Абсолютный путь мы используем, когда ссылаемся на чужие странички, относительный мы используем, когда ссылаемся на документы внутри нашего сайта.

Для всех ссылок в нашем документе мы можем прописать цвета: link - цвет просто ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки.

<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">

Как и цвет для всего текста в документе, цвета ссылок мы прописываем в <body>. В нашем примере цвета для просто ссылки, активной и посещенной - одинаковые, но они могут быть разными – это на ваше усмотрение.

Итак, пропишем цвета для ссылки и саму ссылку в нашем документе:

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<div align="center">
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </div>
<p align="justify">
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href="prf.html">посмотреть мои фотографии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
</p>
</body>
</html> (посмотреть)

Как видите, ничего сложного.

Как вы помните, мы можем задать различные цвета для разных блоков текста в нашем документе (<font color="…"></font>). Для текстовых ссылок мы тоже можем задать разный цвет – это делается при помощи тэга <font> и его атрибута color:

<a href="prf.html"><font color="#CC0000">посмотреть мои фотографии</font></a>

Обратите внимание, <font color="…"></font> - прописывается внутри тэга <a></a>, если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.

Давайте теперь перейдем на следующую ступеньку и продолжим знакомства с ссылками.
<<< Ступенька 12-ая: Назад | Далее: Ступенька 14-ая >>>


Первые шаги. Ступенька 14-ая.

Главная | Словарь тэгов | Оглавление Ступенька 14-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 14-ая.

В этой главе мы научимся прописывать ссылки на почтовый ящик (e-mail), а также узнаем, как сделать подсказку к текстовой ссылке, которая будет появляться при наведении на нее.

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

<a href="mailto:pochta@mail.ru"> pochta@mail.ru </a>

Запомните это раз и навсегда и не пытайтесь ее прописать по другому. Ссылка на документ, картинку или файл - одно дело, а ссылка на почтовый ящик – другое.

У mailto есть еще некоторые опции:

- ?subject=Тема пиcьма
- &Body=Текст вашего сообщения
- &cc=copy@mail.ru,copy2@mail.ru (копии письма через запятую)
- &bcc=hidden_copy@mail.ru,hidden_copy2@mail.ru (скрытые копии письма через запятую)

Все вместе это будет выглядеть так:

<a href="mailto:pochta@mail.ru?subject=Hello&Body=text&cc=copy@mail.ru&bcc=hidden_copy@mail.ru"> pochta@mail.ru </a>

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

Кстати, как-то одна из читательниц задала мне такой вопрос: "Как сделать, чтобы при наведении мышки на ссылку была подсказка?". Я удивилась, зачем это нужно, но тем не менее вопрос был задан, вопрос был интересен, и в новую версию учебника я включаю ответ на него:)

В старых спецификациях Html (3.2 и ниже) такое не предусмотрено, стало быть и старые броузеры того, о чем пойдет речь в этом примечании, не поддерживают (IE ниже 5.0 и NN 4.x и ниже). Зато в спецификации Html 4.0 порывы пользователя задать примечание к тексту учитываются. Итак, господа, знакомьтесь - атрибут title.

Атрибут title (не путать с тэгом <TITLE>) предлагает информацию об элементе, для которого он устанавливается. Мы можем установить его, например, для тэга <a>:

<a href="ssilka.html" title="Ваша подсказка"> текст-ссылка </a>

Наведите курсор мыши на слова "текст-ссылка", и, если ваш броузер поддерживает спецификацию Html 4.0, то вы увидите то самое желанное.

Справедливости ради, скажу, что читая спецификацию Html 4.0, я не обратила должного внимания на атрибут title (собственно, к новым элементам и атрибутам я отношусь с большой осторожностью, т.к. старые броузеры их не понимают).

Поближе ознакомиться с этим атрибутом, меня побудила статья "Об ACRONYM'е замолвите слово" на сайте "Заметки Html Кодера", поэтому хочу сказать Александру Шуркаеву спасибо, что помог мне встретить во всеоружии очередной вопрос:)

На этом наш разговор о ссылках не заканчивается. Шагаем дальше.
<<< Ступенька 13-ая: Назад | Далее: Ступенька 15-ая >>>


Первые шаги. Ступенька 15-ая.

Главная | Словарь тэгов | Оглавление Ступенька 15-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 15-ая.

Как я уже упоминала, ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом, только в тэг <a></a> вставляется не текст, а картинка:

<a href="prf.html"><img src="primtocodephoto.gif"></a>

Если вы хотите сделать картинку ссылкой на ваш почтовый ящик, то принцип тот же:

<a href="mailto:pochta@mail.ru"><img src="primtocodephoto.gif"></a>

Итак, сделаем ссылкой картинку primtocodephoto.gif на документ с фотографиями (prf.html):

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<div align="center">
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </div>
<p align="justify">
<a href="prf.html"><img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"></a> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href="prf.html">посмотреть мои фотографии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
</p>
</body>
</html> (посмотреть)

Теперь посмотрите в броузере, что у нас получилось. Картинка primtocodephoto.gif стала ссылкой. Если вы заметили (а если не заметили, то обратите внимание): вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке атрибут border="0" (о нем мы уже говорили с вами).

<img src="primtocodephoto.gif" align="left" hspace="30" vspace="5" alt="моя фотография" border="0">

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

Итак, вопрос первый: "Как задавать цвет рамки вокруг картинки?”

Цвет рамки вокруг картинки задается атрибутом bordercolor, например:

<img src="picture.gif" border="3" bordercolor="#CC0000">

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

Но, если ваша картинка будет ссылкой, то рамка вокруг нее будет того цвета, который мы задали для ссылок в тэге body с помощью link, vlink, alink, т.е. атрибут bordercolor в этом случае уже не влияет на цвет рамки вокруг картинки.

Вопрос второй: “Используют ли профессионалы рамки?”

Когда как, все зависит от ситуации. Может быть картинка, обрамленная рамкой, придаст аккуратности вашему сайту, и его оформление только выиграет от этого. А может быть наоборот - вам эти рамки совсем не нужны, т.к. портят внешний вид вашего сайта, тогда их можно убрать. "Думайте сами, решайте сами”, использовать рамки вокруг картинок или нет :)

Если вы думаете, что на этом ваше мучение с изучением ссылок закончилось, то напрасно:) - у нас впереди еще несколько замечательных ступенек.
<<< Ступенька 14-ая: Назад | Далее: Ступенька 16-ая >>>


Первые шаги. Ступенька 16-ая.

Главная | Словарь тэгов | Оглавление Ступенька 16-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 16-ая.

Если вы уже достаточно попутешествовали по интернету, то вы должны были заметить, что ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:) Как это делается? Да все по тому же известному нам принципу:

<a href="http://www.melody.ru/music.mp3"> скачать песню </a>

Знаете, что будет при нажатии на такую ссылку? У пользователя появится окошко, предлагающее сохранить ему музыкальный файл на его компьютере. Т.е. если файл не является текстовым документом (*.doc, *.txt) или, например, *.html документом, то броузер вашего пользователя обязательно предложит ему скачать такой файл. К чему я это? Отвечаю на очень частый вопрос моих читателей, как предложить посетителю вашей страницы сохранить музыкальный файл или программу :)

Кстати, вы, возможно, удивитесь, но если адрес указан таким способом:

<a href="http://www.melody.ru/"> музыкальный сайт </a>

То это означает, что в указанном каталоге есть файл вроде index.html, который загрузится по умолчанию, когда пользователь зайдет по указанному адресу. Вот такие дела.

Но поговорим особо о картинках, многие из вас, наверное, сталкивались с таким явлением: когда нажимаешь на маленькую картинку, то загружается большая в том же или в новом окне. Как это делается? Тут никаких хитростей: делаем ссылкой картинку (допустим small.jpg) и ссылаемся на другую картинку (допустим big.jpg):

<a href="big.jpg"> <img src="small.jpg"> </a>

В этом случае большая картинка откроется в том же окне. Но как же сделать так, чтобы картинка (или любой другой файл-документ) открылась в новом окне? Дело в том, что у тэга <a></a> есть атрибут target:

<a href="big.jpg" target="_blank"> <img src="small.jpg"> </a>

Итак, target="_blank" - указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне броузера. В наш большой пример я это вводить не буду, т.к. считаю, что вы уже можете и должны самостоятельно подставлять в код изменения.

Поймите меня правильно, если вы не начнете практиковаться и экспериментировать сами, то никто не сможет сделать этого за вас, знания нужно закреплять, а для этого не достаточно просто пробежаться глазами по строчкам учебника.
<<< Ступенька 15-ая: Назад | Далее: Ступенька 17-ая >>>


Первые шаги. Ступенька 17-ая.

Главная | Словарь тэгов | Оглавление Ступенька 17-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 17-ая.

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

Вы, может быть, знаете, что можно сделать так, чтобы при нажатии на разные области (части) одной и той же картинки, вы попадали на разные страницы, это называется - навигационная карта. Разговор о том, как создавать навигационные карты, растянется на несколько глав, но не пугайтесь, на самом деле это совсем не трудно.

Я понимаю, что, возможно, разговор о ссылках затянулся и вам уже порядком надоел, но увы, обучение не развлечение, и если вы действительно хотите делать сайты своими руками и изучить html, то придется потерпеть :)

Итак, сначала теория.

Навигационные карты задаются тэгом <map></map>. Тэг <map> включает себя тэг(и) <area>, которые определяют геометрические области внутри карты (в этой главе это будут прямоугольники) и ссылки, связанные с каждой областью (т.е. куда вы попадете при нажатии на какую-либо часть нашей карты).

<map>
<area ...>
<area ...>
...
<area ...>
</map>

Дальше уже будем тренироваться на кошках :) (на конкретных примерах)

Для начала нам нужна картинка. Возьмем такую:

Картинка простая - всего лишь голубой прямоугольник (240х140 пикселов). Представьте, что прямоугольники №1 и №2, нарисованные на нем, - это изображения каких-либо кнопок, а голубое - какой-то сложный фон. Чтобы не создавать сложную таблицу (о них, о таблицах, мы поговорим немного позднее), вы решили не резать картинку на много частей и не вычленять кнопки, вы решили поступить проще - создать навигационную карту, где области №1 и №2 (прямоугольники) будут ссылками.

Итак, мы уже знаем, что геометрические области и то, куда пользователь попадет при нажатии на них, определяет тэг <area>, естественно, при помощи своих атрибутов. Это атрибуты shape и coords.

Атрибут shape - определяет форму области: будет ли она прямоугольником (shape="rect"), кругом (shape="circle") или многоугольником (shape="poly"). Сейчас мы будем работать с прямоугольной областью, поэтому:

<map>
<area shape="rect">
</map>

Атрибут coords - определяет координаты (положение нашей геометрической формы). Число координат и порядок их значений зависят от выбранной нами формы.

"Стоп! стоп!" - скажете вы, - "Какие координаты?" - Те самые, вспоминайте школу и уроки геометрии :)

Полагаю, что это всем должно быть ясно. Отсчет ведется от левого верхнего угла картинки, считайте его началом координат (0;0). Если мы работаем с прямоугольной областью, то нам нужны координаты верхнего-левого и нижнего-правого углов области. Порядок записи координат для атрибута coords следующий:

<area shape="rect" coords="x1,y1,x2,y2">

В нашем примере у прямоугольника №1 координаты такие:

x1=25, y1=36, x2=114, y2=98

Значит, код будет выглядеть следующим образом:

<map>
<area shape="rect" coords="25,36,114,98">
</map>

Теперь пропишем, куда будет ссылаться наша область, для этого нам понадобится уже знакомый нам атрибут href:

<map>
<area href="drugoy_document.html" shape="rect" coords="25,36,114,98">
</map>

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

У тэга <map> есть атрибут name - имя карты, давайте назовем карту - karta1:

<map name="karta1">
<area href="drugoy_document.html" shape="rect" coords="25,36,114,98">
</map>

Для того, чтобы связать карту с картинкой, надо использовать атрибут usemap="#имя_карты" для картинки:

<img src="bluerects.gif" usemap="#karta1">

... Куча текста и всякого содержания, или ничего...

<map name="karta1">
<area href="drugoy_document.html" shape="rect" coords="25,36,114,98">
</map>

Смотрим результат (нажмите на прямоугольник №1):

Теперь сами пропишите <area> для прямоугольника №2 для тренировки (x1=153, y1=11, x2=219, y2=127), а затем шагайте на следующую ступеньку, где мы продолжим разговор о картах.
<<< Ступенька 16-ая: Назад | Далее: Ступенька 18-ая >>>


Первые шаги. Ступенька 18-ая.

Главная | Словарь тэгов | Оглавление Ступенька 18-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 18-ая.

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

Укажем тип области:

<map>
<area shape="circle">
</map>

Для создания круглой области нам будут нужны координаты ее центра (x и y) и длина радиуса (R) в пикселях. Т.е. порядок записи следующий:

<area shape="circle" coords="x,y,R">

Давайте, будем опять работать с геометрической областью №1. В нашем случае координаты для маленького круга будут такие: x=46, y=48; а длина радиуса - R=35. Запишем:

<map>
<area shape="circle" coords="46,48,35">
</map>

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

<img src="mapcircle.gif" usemap="#karta2">

... Куча текста и всякого содержания, или ничего...

<map name="karta2">
<area href="drugoy_document2.html" shape="circle" coords="46,48,35">
</map>

Кстати, для карты мы можем прописать атрибут alt для каждой области, сейчас у нас только одна область, но все равно, пропишем для нее alt:

<img src="mapcircle.gif" usemap="#karta2">

... Куча текста и всякого содержания, или ничего...

<map name="karta2">
<area href="drugoy_document2.html" shape="circle" coords="46,48,35" alt="маленький круг">
</map>

Теперь при наведении на область №1 будет всплывать подсказка. В нашем случае это будут слова "маленький круг".

Давайте, посмотрим результат (нажмите на первый круг):

маленький круг

Теперь вы самостоятельно сделаете ссылкой второй круг (x=158, y=75, R=53), чтобы закрепить пройденное. А затем следующая ступенька ждет вас.
<<< Ступенька 17-ая: Назад | Далее: Ступенька 19-ая >>>


Первые шаги. Ступенька 19-ая.

Главная | Словарь тэгов | Оглавление Ступенька 19-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 19-ая.

Вот мы, наконец, добрались и до многоугольников.

Бу-бу-бу! :) Страшно?

На самом деле тут нет ничего страшного. Вы указываете точки (координаты углов), они как бы соединяются между собой линиями, и мы можем таким образом получить очень разнообразные фигуры (посмотрите на фигуру 2, правда здорово?). Используя poly, мы можем делать самые разнообразные области, от скромного треугольника до шикарной звезды.

Сейчас мы будем работать с фигурой №2, потому что у нее меньше углов (да, ленивая я, решила облегчить себе жизнь на один угол:).

Для начала зададим тип области:

<map>
<area shape="poly">
</map>

Координаты пишутся по следующему принципу:

<area shape="poly" coords="x1,y1,x2,y2,...,xN,yN">

Расшифровывается это так: "координаты первого угла (x1,y1), координаты второго угла (x2,y2), еще много углов и их координат (...), координаты последнего угла (xN,yN)". Т.е. для нашего пятиугольника запись полностью будет выглядеть так:

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5">

Теперь подставим реальные значения координат в наш код:

<map>
<area shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>

Дальше уже прописываем ссылку, имя карты, и привязываем карту к рисунку (это везде по одному и тому же принципу):

<img src="mappoly.gif" usemap="#karta3">

... Куча текста и всякого содержания, или ничего...

<map name="karta3">
<area href="drugoy_document3.html" shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>

Теперь проверим, получилось ли у нас это безобразие (в этот раз вторая фигура, нажмите):

Не забудьте прописать самостоятельно первую область (шестиугольник) - x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58.

Теперь я расскажу еще о нескольких нюансах, и мы завершим наш разговор о картах:

1 - Мы можем одновременно использовать разные области, например круг и многоугольник:

<img src="mappoly.gif" usemap="#karta3">

... Куча текста и всякого содержания, или ничего...

<map name="karta3">
<area href="drugoy_document3.html" shape="circle" coords="46,48,35,">
<area href="drugoy_document3.html" shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>

2 - Наши области могут пересекаться (бывает, руки кривые). Это не смертельно, главное помнить, что в этом случае при нажатии на область пересечения приоритет имеет область, которая указана первой (т.е. посетитель пойдет на ту страницу, куда она ссылается).

3 - Будьте внимательны, если вы пропишите для картинки usemap=#KARTA, а имя (name) вашей карты будет karta - то возможны ошибки, т.к. karta и KARTA - разные имена. Регистр всегда учитывается, не забывайте.

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

Надеюсь, с картами вам теперь все ясно, и вы можете продолжать обучение :)
<<< Ступенька 18-ая: Назад | Далее: Ступенька 20-ая >>>


Первые шаги. Ступенька 20-ая.

Главная | Словарь тэгов | Оглавление Ступенька 20-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 20-ая.

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

Способ первый - с помощью атрибута name (имя закладки) тэга A:

<H2>Григорий Остер, "Вредные советы.<BR>
Книга для непослушных детей и их родителей".</H2>
<A href="#stih1">Ссылка на стих первый</A><BR>
<A href="#stih2">Ссылка на стих второй</A><BR>
<A href="#stih3">Ссылка на стих третий</A><BR><BR>
<PRE>
Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.
</PRE>
<H3><A name="stih1">Стих первый</A></H3>
<PRE>
... тра-ля-ля 1...
</PRE>
<H3><A name="stih2">Стих второй</A></H3>
<PRE>
... тра-ля-ля 2...
</PRE>
<H3><A name="stih3">Стих третий</A></H3>
<PRE>
... тра-ля-ля 3...
</PRE> (посмотреть)

Заголовки (стих первый, стих второй, стих третий) в нашем примере мы сделали закладками, использовав атрибут тэга A - name:

<A name="stih3">Стих третий</A>

Затем, без стеснения, мы сделали на них ссылки:

<A href="#stih3">Ссылка на стих третий</A>

Заметьте - <A href="#stih3"> - символ решетки (#) перед именем закладки, на которую мы ссылаемся, обязателен. Вы можете ссылаться на закладку и из других документов, тогда ссылка будет выглядеть следующим образом:

<A href="ancorpri.html#stih3"> Ссылка на стих третий из какого-то другого документа </A>

или

<A href="http://www.mysite.ru/ancorpri.html#stih1"> Ссылка на стих третий из какого-то другого документа </A>

(имя сайта, имя документа + имя закладки)

Способ второй - есть такой атрибут - id, который назначает тэгу (элементу) уникальное имя в пределах одного документа (кроме тэгов Base, Head, Html, Meta, Script, Style, Title). Что мешает нам задать id, например, тэгу H3 (заголовкам)? Ничего.

<H2>Григорий Остер, "Вредные советы.<BR>
Книга для непослушных детей и их родителей".</H2>
<A href="#stih1">Ссылка на стих первый</A><BR>
<A href="#stih2">Ссылка на стих второй</A><BR>
<A href="#stih3">Ссылка на стих третий</A><BR><BR>
<PRE>
Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.
</PRE>
<H3 id="stih1">Стих первый</H3>
<PRE>
... тра-ля-ля 1...
</PRE>
<H3 id="stih2">Стих второй</H3>
<PRE>
... тра-ля-ля 2...
</PRE>
<H3 id="stih3">Стих третий</H3>
<PRE>
... тра-ля-ля 3...
</PRE> (посмотреть)

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

Также хочу вас предостеречь, никогда не делайте так:

<A href="#stih">Ссылка на ...</A><BR>
...
<A name="STIH">Закладка</A>

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

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

Шагаем дальше, к таблицам.
<<< Ступенька 19-ая: Назад | Далее: Ступенька 21-ая >>>


Первые шаги. Ступенька 21-ая.

Главная | Словарь тэгов | Оглавление Ступенька 21-ая.

Учебник по Html для чайников. Таблицы.

Ступенька 21-ая.

Долго ли, коротко ли, но мы добрались до таблиц. При создании сайтов таблицы используются очень часто. Например, Постройка.ру не обошлась бы в своем оформлении без таблиц никак: картинки, тексты – все размечено и размещено относительно друг друга при помощи таблиц (собственно, весь сайт, грубо говоря, расположен в большой сложной таблице). Или вот еще вот еще пример сайта, оформление которого тоже не обошлось бы без таблиц (заметьте, ни одной картинки, когда вы пройдете главы о таблицах без труда сможете сверстать подобное).

Таблица задается тэгом:

<table></table>

Увы, это далеко не все: таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще указать и их.

<tr></tr> - строчка таблицы
<td></td> - столбец (ячейка) таблицы

Итак, перед вами таблица из двух строк и трех столбцов (ячеек). Для наглядности я выделила ячейки таблицы разными цветами. Границы таблицы не заданы, поэтому вы их не видите. Как же такая красота получилась? Итак следите за движениями моих рук:

<table>
<tr></tr>
<tr></tr>
</table>

Сначала мы задали строки. В нашем примере их две. Теперь в каждой строке зададим по три столбца (ячейки):

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

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

Итак, теперь нам надо заполнить получившийся каркас:

<table>
<tr>
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
</tr>
<tr>
<td>2x1</td>
<td>2x2</td>
<td>2x3</td>
</tr>
</table>

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

1x1 | 1x2 | 1x3
2x1 | 2x2 | 2x3

Увы, фона (голубенького или желтенького, как в примере) еще не видно. Фон задается атрибутом bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для ячейки (в пределе одного ряда). В нашем случае мы задаем фон для каждой ячейки.

<table>
<tr>
<td bgcolor="#FFCC33">1x1</td>
<td bgcolor="#336699">1x2</td>
<td bgcolor="#FFCC33">1x3</td>
</tr>
<tr>
<td bgcolor="#336699">2x1</td>
<td bgcolor="#FFCC33">2x2</td>
<td bgcolor="#336699">2x3</td>
</tr>
</table>

Вот, что у нас получилось:

Если вы хотите задать фон для ряда, то атрибут bgcolor мы прописываем для тэга <tr>:

<tr bgcolor="#FFCC33">

Если вы хотите задать фон для всей таблицы, то атрибут bgcolor мы прописываем для тэга <table>:

<table bgcolor="#FFCC33">

Однако, если при заданном фоне для всей таблицы, вы задаете свой фон для ряда или ячейки, то этот ряд или ячейка будут иметь фон отличный от всей таблицы.

Попробуйте самостоятельно задать фон для таблицы и для ряда (это для усвоения материала). Когда все усвоится переходите к следующей ступеньке, и мы продолжим разговор о таблицах.
<<< Ступенька 20-ая: Назад | Далее: Ступенька 22-ая >>>


Первые шаги. Ступенька 22-ая.

Главная | Словарь тэгов | Оглавление Ступенька 22-ая.

Учебник по Html для чайников. Таблицы.

Ступенька 22-ая.

Итак, как помнится, мы решили с вами создать вот такую таблицу:

А получилось у нас еще только вот такая таблица:

В чем же дело? А в том, что мы не задали высоту и ширину ячейкам таблицы нашей:) Вспомним об атрибутах height и width - вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).

<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> 1x1 </td>
<td width="50" bgcolor="#336699"> 1x2 </td>
<td width="50" bgcolor="#FFCC33"> 1x3 </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> 2x1 </td>
<td width="50" bgcolor="#FFCC33"> 2x2 </td>
<td width="50" bgcolor="#336699"> 2x3 </td>
</tr>
</table>

Предвижу вопрос: - А почему высота задана только для двух ячеек (столбцов), а ширина для всех? Все очень просто: Если в ряду вы задаете для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей:) вот так-то. Тоже самое с рядами, если вы зададите для какого-то ряда наибольшую длину, то все остальные ряды выровняются по этому наибольшему ряду (помните ряд - это не ячейка, поэтому я задала в нашем примере ширину для каждой ячейки (столбца)).

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

Кстати, атрибуты height и width можно задать в процентах:

<td width="30%"> содержимое ячейки </td>

Если мы задали для ячейки ширину в 30 процентов, как в нашем примере, то это значит, что на остальные ячейки у нас осталось еще 70 процентов, т.е. сумма их ширин не должна превышать 70 процентов. Почему? Простая арифметика: в сумме это все должно равняться 100%. Считаем: 100 – 30 = 70. :)

Вернемся к нашему примеру: теперь мы почти получили то, что хотели:)

Теперь нам осталось лишь выровнять содержимое (текст) внутри таблицы:

<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> <center> 1x1 </center> </td>
<td width="50" bgcolor="#336699"> <center> 1x2 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center>1x3 </center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> 2x1 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center> 2x2 </center> </td>
<td width="50" bgcolor="#336699"> <center> 2x3 </center> </td>
</tr>
</table>

И... готово!:)

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

Вы должны помнить и другие тэги для выравнивания содержимого, кроме <center>, а также атрибут align, который мы прописывали для них. Этот атрибут можно задать и для ячеек таблицы:

<td align=”center”>2x2</td>

Соответственно, атрибут align может принимать еще значения right и left. Значение justify при употреблении с тэгом <td> атрибут align принимать не может. В нашем случае атрибут align выравнивает содержимое внутри ячейки (на всякий случай, если вы еще не поняли его назначение).

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

Давайте шагнем на следующую ступеньку и продолжим разговор о таблицах.
<<< Ступенька 21-ая: Назад | Далее: Ступенька 23-ая >>>


Первые шаги. Ступенька 23-ая.

Главная | Словарь тэгов | Оглавление Ступенька 23-ая.

Учебник по Html для чайников. Таблицы.

Ступенька 23-ая.

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

Вернемся к нашему примеру, и поговорим о вертикальном выравнивании содержимого таблицы, т.е. о том, как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу. Вертикальное выравнивание задается следующим атрибутом - valign="middle" (top, bottom) - содержимое конкретной ячейки будет находится в середине ячейки (наверху или внизу):

Вот вам и наглядный пример, как это выглядит. А теперь разберемся, как это пишется:

<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33" valign="top"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom"> <center>1x3</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699" valign="top"> <center>2x3</center> </td>
</tr>
</table>

Я прописала valign не для всех ячеек, только для тех, где я захотела чтобы текст располагался сверху или снизу, чтобы зря не тратить время и усилия. Существование атрибута valign значительно облегчает нашу с вами жизнь, страшно даже подумать, как пришлось бы мучиться, если бы его не было:).

А теперь, когда мы знаем, что align, задает горизонтальное выравнивание содержимого ячейки, а valign – вертикальное, перейдем к следующей ступеньке, чтобы узнать о других атрибутах, облегчающих нашу трудную жизнь.
<<< Ступенька 22-ая: Назад | Далее: Ступенька 24-ая >>>


Первые шаги. Ступенька 24-2 - дополнительная.

Главная | Словарь тэгов | Оглавление Ступенька 24-2 - дополнительная.

Учебник по Html для чайников. Таблицы.

Ступенька 24-2 - дополнительная.

Эта ступенька дополнительная, здесь вы можете посмотреть ответы на задание предыдущего урока. Те, кто справился с заданием сам – молодцы, можете взять конфетку с полки и продолжить обучение на следующей ступеньке. Двоечникам же придется задержаться :)

Первое задание:

Растягиваем ячейку 1х3 на два ряда.

<table>
<tr>
<td height="35" bgcolor="#FFCC33"> <center>1x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>1x2</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x3</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>

Второе задание:

<table>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>

Если вы посмотрели ответы, т.к. сами не смогли решить поставленную мной задачу, то советую вам самостоятельно придумать себе задание, и попытаться выполнить его. Таблицы достаточно важный материал для тех, кто хочет в дальнейшем делать качественные сайты. Так или иначе, вам придется их освоить.
<<< Ступенька 24-ая: Назад | Далее: Ступенька 25-ая >>>


Первые шаги. Ступенька 24-ая.

Главная | Словарь тэгов | Оглавление Ступенька 24-ая.

Учебник по Html для чайников. Таблицы.

Ступенька 24-ая.

В этой главе мы поговорим об атрибутах colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда)). Теперь, чтобы было все понятно, обратимся к примерам.

Итак, наша задача растянуть ячейку 1х1 на два столбца (ячейки). Для этого мы используем атрибут colspan="2", прописав его для ячейки 1х1. Код будет выглядеть следующим образом:

<table>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699"> <center>2x3</center> </td>
</tr>
</table>

Как вы видите, ячейка 1х1 простирается на длину двух ячеек. Соответственно, ее длина равняется суммированной длине этих двух ячеек (100 пикселов). Мы не прописали атрибут width для ячейки 1x1, но если бы мы решили это сделать, то width мы задали бы равным ста пикселам. И еще, прошу вас обратить внимание, что в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, почему – мы уже это обсудили – ячейка 1х1 равна двум ячейкам, благодаря атрибуту colspan.

Если бы мы по оплошности прописали ячейку 1х3, тогда у нас получилась бы следующее:

Аккуратнее обращайтесь с параметрами colspan и rowspan. Ошибка может привести к тому, что ваш сайт «поедет». Теперь, когда мы разобрались с параметром colspan, разберемся с параметром rowspan. Принцип действия тут тот же:

Попробуйте сами написать код для такой таблицы (подсказываю, тут у нас должна исчезнуть ячейка 2х3). А для полного закрепления полученных знаний можете написать еще и код для такой таблицы (я не издеваюсь, просто вы так лучше усвоите):

Если ничего не получится, то вы можете посмотреть коды для этих таблиц на следующей ступеньке. А кто все понял и все сделал, тот молодец и может даже перешагнуть через ступеньку.
<<< Ступенька 23-ая: Назад | Далее: Ступенька 24-2 >>>


Первые шаги. Ступенька 25-ая.

Главная | Словарь тэгов | Оглавление Ступенька 25-ая.

Учебник по Html для чайников. Таблицы.

Ступенька 25-ая.

Итак, мы остановились на такой таблице:

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

Такая красота достигается с помощью атрибута cellspacing, равного нулю:

<table cellspacing="0">
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>

Можно наоборот увеличить пространство между ячейками, допустим, пусть cellspacing="5", тогда получим следующее:

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

Обычно атрибут cellspacing, рассматривается в руководствах и учебниках в паре с атрибутом cellpadding, который задает верхнее, нижнее, правое и левое поля ячейки. Чтобы было видно нагляднее, я для начала прижму текст ячеек первого ряда к верху, и нижнего - к низу, используя атрибут valign:

Теперь зададим атрибут cellpadding="5":

В этих примерах мы отчетливо видим верхнее и нижнее поля (левое и правое тоже присутствуют, но на данном примере это не очевидно). Теперь вам должно быть понятно, что поля отделяют содержание ячейки от ее краев. Убрать поля можно, задав атрибут cellpadding равный нулю (по умолчанию небольшие поля все-таки у таблиц есть, как и пространство между ячеек). Для тех, кто все еще не может составить код сам - вот он (для последнего варианта таблицы):

<table cellpadding="5">
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2" valign="top"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2" valign="top"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom"> <center>2x2</center> </td>
</tr>
</table>

Теперь я могу с чистой совестью завершить этот урок и перейти к следующему, в котором мы узнаем о вложенных таблицах.
<<< Ступенька 24-2: Назад | Далее: Ступенька 26-ая >>>


Первые шаги. Ступенька 26-ая.

Главная | Словарь тэгов | Оглавление Ступенька 26-ая.

Учебник по Html для чайников. Таблицы.

Ступенька 26-ая.

Когда мы учились делать таблицы, то я упоминала о вложенных таблицах. Что же это такое и в чем их особенность? - это обычные таблицы, которые располагаются в ячейках другой таблицы, и больше ничего особенного в них нет... почти.

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

С каждым днем в интернете появляется все больше бяк и бук. Это особенные существа, роль которых в развитии современного общества не понятна, но тем не менее само их присутсвие заметно. Буки и бяки требуют особого обращения к себе, если обращаться к ним как к нормальным человеческим особям, то вы поняты не будете. Вот таблица, которая показывает сколько бук, бяк и других обитает в интернете:

буки | 65% населения
бяки | 20% населения
др. | 15% населения

За сим все

Итак, перед нами таблица из одного ряда, с тремя ячейками (столбцами), в третьей ячейке нельзя не заметить вложенную таблицу (с буками и бяками). Теперь код:

<table>
<tr>
<td width="200" valign="top" background="blue.gif" align="center">С каждым днем в интернете появляется все больше бяк и бук. Это особенные существа, роль которых в развитии современного общества не понятна, но тем не менее само их присутсвие заметно. Буки и бяки требуют особого обращения к себе, если обращаться к ним как к нормальным человеческим особям, то вы поняты не будете.</td>
<td width="10" background="white.gif">&nbsp;</td>
<td width="200" valign="top" background="blue.gif" align="center">Вот таблица, которая показывает сколько бук, бяк и других обитает в интернете:
<br><br>

<table cellspacing="3">
<tr>
<td width="50" background="white.gif">буки</td><td background="white.gif">65% населения</td>
</tr>
<tr>
<td width="50" background="white.gif">бяки</td><td background="white.gif">20% населения</td>
</tr>
<tr>
<td width="50" background="white.gif">др.</td><td background="white.gif">15% населения</td>
</tr>
</table>

<br><br>
За сим все</td>
</tr>
</table>

Увы, код получился объемный, но зато в нем нет ничего сложного: вложенная таблица от обычной ничем не отличается. Благодаря вложенным таблицам гораздо проще управлять содержимым сайта. Так и в случае с Постройкой.ру – было гораздо проще ввести вложенные таблицы (что мы и сделали, например, для правой колонки с дополнительной информацией), чем размечать очень сложную таблицу (теперь только представьте, что это было бы одной таблицей, ужас, да и только).

Теперь поговорим, о некоторых нюансах, на которые следует обратить внимание: background="картинка.gif" - раньше мы говорили об атрибуте bgcolor, который задает цвет фона для таблицы (ряда, ячейки), а атрибут background задает фоновую картинку для таблицы (ряда, ячейки).

А теперь сам нюанс: вроде было бы логичнее прописать просто белый фон для вложенной таблицы (bgcolor="#ffffff"), а не мучиться, создавая просто белую картинку и делая ее фоном (background="white.gif"), ведь так оно быстрее. Да, быстрее, но дело в том, что если IE (Internet Explorer) отображает атрибут bgcolor для вложенных таблиц, то некоторые другие броузеры отказываются этот атрибут для вложенных таблиц отображать, поэтому приходиться идти обходным путем, используя background.

Вот так мы и убили двух зайцев сразу: узнали, что можно задать атрибут background для таблиц, и при этом ознакомились с некоторыми тонкостями ремесла :). Теперь будем добивать оставшихся заек:

<td width="10" background="white.gif">&nbsp;</td>

Давайте обратимся к коду нашей таблицы и вспомним, что эту ячейку мы ввели для красоты. Чтобы ячейка не пустовала, в нее введен &nbsp; (символ неразрывного пробела, это спецсимвол, с ними мы ознакомимся подробно чуть позже). Это не просто так. Дело в том, что есть любители использовать конструкцию типа: <td></td>. Вот такую конструкцию некоторые броузеры просто-напросто игнорируют, т.к. не любят пустых ячеек, поэтому для корректного отображения вашей таблицы везде вставляйте в пустые ячейки или &nbsp;, или мелкую картинку размеров 1х1 пиксела.

Вот, пожалуй, и все. Охота за остальными зайками переноситься в следующие главы.
<<< Ступенька 25-ая: Назад | Далее: Ступенька 27-ая >>>


Первые шаги. Ступенька 27-ая.

Главная | Словарь тэгов | Оглавление Ступенька 27-ая.

Учебник по Html для чайников. Таблицы.

Ступенька 27-ая.

В этой последней главе, посвященной таблицам, мы поговорим о рамках. Рамка вводится параметром border. Зададим рамку равную 3 пикселям:

<table border="3">

Остальную таблицу допишете сами. Выглядеть это будет вот так:

таблица с рамкой

Нашей рамке мы можем задать цвет. Пусть он будет черным в нашем примере:

<table border="3" bordercolor="#000000">

таблица с рамкой

Все очень просто.

Если вы хотите создать однотонную рамку (допустим черную), то мы используем таблицу с черным фоном и атрибутом cellpadding, который, как мы помним, задает размер поля ячейки. В нашу таблицу мы вкладываем другую таблицу – в итоге получится, что вокруг вложенной таблицы образовалась рамка с толщиной в пикселах, которую мы задали для атрибута cellpadding, и цветом, который мы задали для фона (bgcolor="#000000", в нашем случае) основной таблицы.

Для наглядности пример кода:

<table border="0" cellspacing="0" cellpadding="5" bgcolor="#000000">
<tr>
<td>
<table width="100%" border="0" bgcolor="цвет фона"> ... </table>
</td>
</tr>
</table>

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

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

Кстати, если мы уж говорим о тонкостях, то часто мне задают вопрос, как сделать скругленные углы таблицам – очень просто, если вы видите на сайте таблицу со скругленными углами, то знайте, что на самом деле это всего лишь четыре картинки, которые помещены по углам таблицы и создают иллюзию, что таблица имеет скругленные углы. Без картинок такое не было бы возможным :)

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

Зато самое трудное, чтобы то, что мы сверстали, выглядело под разными броузерами одинаково. Возьмем те же рамки тех же таблиц:

Различные таблицы в IE | Различные таблицы в NN

Полагаю, это достаточно наглядный пример (есть над чем задуматься). Опытные кодеры стараются просматривать сверстанную ими страницу под разными типами броузеров, чтобы везде все выглядело одинаково, у каждого броузера свои капризы, так что сверстать сайт, чтобы везде выглядело все одинаково, задача сложная.

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

Ну, уж если вы можете махнуть рукой на тех, кто не желает использовать Internet Explorer и любит другие броузеры, то вот на то, что у разных пользователей разное разрешение экрана махнуть рукой нельзя, это уже совсем не прилично. Для тех, кто не знал: два самых используемых разрешения - 800x600 и 1024x768.

Никогда не стоит забывать о том, что вашу страницу могут смотреть под бОльшим или меньшим разрешением, и что нет абсолютной гарантии, что вы мастерский верстальщик (кодер) и ваши таблицы не поедут куда-нибудь, например, к бабушке черта (да-да, сколько раз говорилось, сколько написано об этом, а толку практически никакого, интересно, почему многие не желают этого понимать).

И еще раз хочу напомнить (для тех, кто еще не понял): мы используем таблицы, чтобы управлять элементами оформления на нашем сайте. Благодаря таблицам мы можем много чего: от просто расположения текста рядом в три колонки, до создания сложного оформления, где ваши чудесные картинки будут разнесены по разным ячейкам таблицы, а в итоге сложатся чудный и сложный узор.

Так что вопросы от вас, мои читатели, как расположить текст рядом с картинкой с двух сторон, и прочие подобные я буду уже воспринимать, как личное оскорбление :) или злую шутку.

В следующей главе мы сделаем с вами несложный сайт с таблицами, используя полученные навыки, как показали несколько лет жизни учебника, необходимость в такой главе есть, чтобы вся информация уложилась в вашей голове окончательно.
<<< Ступенька 26-ая: Назад | Далее: Ступенька 28-ая >>>


Первые шаги. Ступенька 28-ая.

Главная | Словарь тэгов | Оглавление Ступенька 28-ая.

Учебник по Html для чайников. Таблицы.

Ступенька 28-ая.

Итак, возьмем за основу один, из рассмотренных нами примеров:

<table cellspacing="5">
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>

Давайте, попытаемся на основе его сделать полноценную страницу. Первое, что мы сделаем, введем обязательные тэги и атрибуты для них:

<html>
<head>
<title>Мой первый сайт с таблицами</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">

<table cellspacing="5">
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>

</body>
</html> (посмотреть)

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

<html>
<head>
<title>Мой первый сайт с таблицами</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">

<table cellspacing="5" width="700">
<tr>
<td width="400" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="300" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td bgcolor="#336699"> <center>2x1</center> </td>
<td bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>

</body>
</html> (посмотреть)

Мы задали для всей таблицы ширину 700 пикселов. Соответственно, общая сумма ширин ячеек не может превышать 700 пикселов: 300+400=700. Мы задали ширину только двум ячейкам, т.к. оставшиеся ячейки сами распределят выделенные под них 400 пикселов поровну. Мы не задали высоту (height), т.к. нельзя задать стопроцентную высоту (во весь экран) для таблиц, это не предусмотрено спецификацией, так что, наша таблица сама растянется, когда мы введем в нее какое-либо содержание (текст, картинки).

<html>
<head>
<title>Мой первый сайт с таблицами</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">

<center>
<table cellspacing="5" width="700">
<tr>
<td width="400" bgcolor="#FFCC33" colspan="2">
<div align="left">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится <b>еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть, мы и в реальной жизни станем друзьями:)
</div>
</td>
<td width="300" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td bgcolor="#336699"> <center>2x1</center> </td>
<td bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
</center>

</body>
</html> (посмотреть)

Итак, мы ввели в таблицу уже знакомый вам текст с виртуальным другом. Мы выровняли текст по левому краю при помощи тэга DIV. Саму таблицу мы расположили по центру экрана при помощи тэга CENTER.

Если вы обратите внимание, то заметите, что текст слишком близко расположен к краям нашей ячейки и это смотрится не красиво. Что мы можем сделать? Конечно, ввести атрибут cellpadding для таблицы.

<html>
<head>
<title>Мой первый сайт с таблицами</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">

<center>
<table cellspacing="5" width="700" cellpadding="20">
<tr>
<td width="400" bgcolor="#FFCC33" colspan="2" valign="top">
<div align="left">
<h3>Добро пожаловать на мою страницу!</h3>
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится <b>еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть, мы и в реальной жизни станем друзьями:)
</div>
</td>
<td width="300" bgcolor="#336699" rowspan="2" valign="top">

<div align="center"><img src="primtocodephoto.gif" alt="моя фотография"><br><br><img src="ptimtocodephoto2.gif" alt="моя фотография"></div>

</td>
</tr>
<tr>
<td bgcolor="#336699"> <center>2x1</center> </td>
<td bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
</center>

</body>
</html> (посмотреть)

Кроме атрибута cellpadding мы ввели заголовок, чтобы ваш посетитель смог понять, куда он попал, а также мы ввели содержимое для второй колонки. Также, введя атрибут valign, мы расположили текст и картинки вверху наших ячеек (как мы помним, по умолчанию, если атрибут valign не вводить, содержимое располагается по центру ячейки).

Давайте введем содержание для оставшихся двух ячеек:

<html>
<head>
<title>Мой первый сайт с таблицами</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">

<center>
<table cellspacing="5" width="700" cellpadding="20">
<tr>
<td width="400" bgcolor="#FFCC33" colspan="2" valign="top">
<div align="left">
<h3>Добро пожаловать на мою страницу!</h3>
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится <b>еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть, мы и в реальной жизни станем друзьями:)
</div>
</td>
<td width="300" bgcolor="#336699" rowspan="2" valign="top">

<div align="center"><img src="primtocodephoto.gif" alt="моя фотография"><br><br><img src="ptimtocodephoto2.gif" alt="моя фотография"></div>

</td>
</tr>
<tr>
<td bgcolor="#336699">
<div align="center"><a href="mailto:admin@postroika.ru">напиши мне письмо</a></div>
</td>
<td bgcolor="#FFCC33">
<div align="center"><a href="#">посмотри мои фотографии</a></div>
</td>
</tr>
</table>
</center>

</body>
</html> (посмотреть)

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

<a href="#"> … </a> - заметьте, что мы не прописали путь к документу с фотографиями, и вместо него подставили значок решетки. Как вы помните, значок решетки используется при создании закладок внутри страницы. Однако, в нашем случае имя закладки не указано, и самой закладки в нашей странице нет. А это значит, что при нажатии на такую странную ссылку, которую мы прописали, ваш посетитель никуда не перейдет с вашей страницы. Т.е. это пустая ссылка. Такие ссылки кодеры очень часто используют при создании макета сайта, когда еще точно не известно, какие будут имена у *.html документов вашей страницы.

Итак, подводим итоги: как видите, все достаточно просто. Мы получили с вами аккуратненький и даже оригинальный для начинающего сайтостроителя сайт, которым даже можно немножко гордиться. Такой сайт уже не стыдно показать знакомым и друзьям. Такой сайт уже не стыдно выложить в интернет. Конечно, над ним еще можно поработать, усложнить его, ввести несколько оригинальных изображений, чтобы придать индивидуальности, но это уже работа для вас и вашей фантазии. А я же закончу повествование о таблицах, и мы переходим к разделу Дополнительные.
<<< Ступенька 27-ая: Назад | Далее: Ступенька 29-ая >>>


Первые шаги. Ступенька 29-ая.

Главная | Словарь тэгов | Оглавление Ступенька 29-ая.

Учебник по Html для чайников. Дополнительные.

Ступенька 29-ая.

Чтобы не затягивать повествование мы пропустили несколько нужных глав, уступив место таблицам, чтобы вы побыстрее освоили тот минимум, который вам необходим, чтобы построить (сверстать) сайт. Однако, чтобы сделать хороший и удобный сайт знания одного минимума не достаточно, поэтому я продолжаю свое повествование, и отдаю дань обиженным главам, выделяя для них целый раздел: Дополнительные.

Эта глава о спецсимволах. Они не так часто употребляются, но, тем не менее, они необходимы, с одним из спецсимволов мы познакомились, когда говорили о вложенных таблицах (символом неделимого пробела). Познакомимся еще с некоторыми наиболее часто употребляемыми спецсимволами:

(1) - &lt; - <
(2) - &gt; - >
(3) - &quot; - "
(4) - &nbsp; - пробел
(5) - &amp; - &

Т.к. все заключенное между < и > броузер воспринимает как тэг, то, чтобы ввести символ скобки > в текст для него придумали спецсимвол (1 или 2). Теперь вы знаете, на какое мучение я была обречена, когда начала писать это руководство, ох уж эти примеры:)

Кавычка (3). В принципе, не обязательно ее так прописывать, броузеры понимают этот значок прекрасно, но кто знает: береженого - бережет.

Символ пробела (4). Зачем он нужен? Ну, допустим, вам понадобилось пять пробелов подряд, а тэг <pre> с его принудительным переносом строки вам вовсе не нужен, вот тогда вам понадобится спецсимвол, ведь спецсимвол пробела можно написать хоть тысячу раз (если вы забыли или не знали – обычные пробелы игнорируются броузером, если их больше одного между словами или тэгами).

Но тут существует одно но:

слово1&nbsp;слово2&nbsp;слово3 = слово1 слово2 слово3

Ни одно из этих слов не перенесется на другую строку без двух других, и хотя посетитель увидит обычную фразу, где между словами стоит пробел, но по идее это уже одно длинное слово, а не три, т.к. &nbsp; - неразрывный (неделимый) символ пробела:) - учтите и используйте с умом.

И последний символ &, т.к. он несчастный используется для написания спецсимволов, то для него добрые люди тоже придумали спецсимвол &amp; (бр..:).

Спецсимволы не надо включать ни в какие тэги, надеюсь, вы это поняли, считайте их просто текстом.

Полную коллекцию спецсимволов вы можете изучить здесь. А можете и не изучать.

Кстати, очень часто читатели задаются вопросом: “А как сделать Красную Строку - отступ первой строки в блоке текста, абзаца?”

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

Конечно, есть и другой путь – вставить небольшую прозрачную картинку перед первым словом в абзаце, допустим 1х10 пикселей (высота х ширина), и опять же вы получите отступ.
<<< Ступенька 28-ая: Назад | Далее: Ступенька 30-ая >>>


Первые шаги. Ступенька 30-ая.

Главная | Словарь тэгов | Оглавление Ступенька 30-ая.

Учебник по Html для чайников. Дополнительные.

Ступенька 30-ая.

В последнее время я все реже и реже встречаю такой элемент, как линии. Теперь их увидишь разве что в гостевых книгах, или на форумах. Линия задается тэгом <Hr> и не требует закрывающего тэга:

Вот такая она, в форме канавочки. У линии есть много разных параметров:

(1) <Hr align="right"> (center или left)
(2) <Hr width="30%"> (ширина линии в процентах/пикселях)
(3) <Hr size="6"> (толщина линии)

(4) <Hr NoShade> (отмена объемности)
(5) <Hr color="cc0000"> (цвет линии, только в IE)

Выглядит все это так - Первый (1):

Второй (2):

Третий (3):

Четвертый (4):

Пятый (5):

Вот и вся премудрость с линиями.

Не злоупотребляйте атрибутом Color, т.к. он действует только в Интернет Иксплорер (если вам все же хочется цветную линию, то сделайте, допустим красную картинку 1x1 пиксель и вставьте ее в свой документ. Тут пригодятся уже известные вам атрибуты height и width. Пусть height=1, а width=500 - вот вам и линия:).

Пунктирную и другие типы нестандартных линий мы опять же создаем при помощи картинок.

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

Не считайте линию изжившей себя, я думаю, как элемент дизайна она может быть вполне полезной.
<<< Ступенька 29-ая: Назад | Далее: Ступенька 31-ая >>>


Первые шаги. Ступенька 31-ая.

Главная | Словарь тэгов | Оглавление Ступенька 31-ая.

Учебник по Html для чайников. Дополнительные.

Ступенька 31-ая.

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

Многие, когда верстают сайт, сталкиваются со следующей проблемой: поля по краям документа, которые, они не знают, как убрать. Что я имею ввиду – посмотрите пример, и вы увидите те самые поля, которые так нам часто мешают жить: посмотрите пример.

К счастью, если нам нужно мы можем управлять ими: мы можем увеличить их, если они нам нужны, а если они нам не нужны, то мы можем убрать их. Рассмотрим вариант, когда нам нужно убрать поля документа:

<Body text="#000000" bgcolor="ffffff" topmargin="0" leftmargin="0">

Topmargin - определяет ширину верхнего поля документа, leftmargin - определяет ширину левого поля документа. Чтобы убрать поля мы приравняли эти параметры к нулю. Можете посмотреть, что у нас получилось.

Вы можете удивиться, в чем же специфичность этих параметров. Дело в том, что topmargin и leftmargin поддерживаются только Internet Explorer.

Но не стоит расстраиваться, Нетскейп (Netscape Navigator) не окажется за бортом, т.к. для этого броузера есть свои аналогичные специфические атрибуты для тега Body - marginheight и marginwidth. Marginheight - аналогичен topmargin, а marginwidth - аналогичен leftmargin.

Теперь, чтобы убрать отступы и для NN, и для IE, надо просто прописать все эти атрибуты вместе для тэга BODY:

<Body text="#000000" bgcolor="ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">

Таким образом, и в IE все будет хорошо, и NN будет не обижен, и многие другие броузеры тоже :).

Но не торопитесь перебежать на следующую ступеньку.

Topmargin и leftmargin в Интернет Иксплорер убирает только верхнее и левое поля документа. Чтобы убрать правое и нижнее надо ввести еще атрибуты rightmargin и bottommargin для тэга Body.

<Body text="#000000" bgcolor="ffffff" rightmargin="0" bottommargin="0" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">

Итак, мы узнали, как убирать поля в IE и NN. Но, что же с другими броузерами?

<style type="text/css"><!--
body{margin:0px;padding:0px;}
--></style>

Вставьте этот загадочный код между тегами <head></head>, и проблему с полями можно считать решенной.

Сразу предвижу вопросы относительно приведенного мной загадочного кода. Что это такое? Это CSS – таблицы каскадных стилей, дополнительное средство, при помощи которого вы можете управлять содержимым ваших страниц, CSS, по сути, дополняет HTML, но при этом это отличный от html стандарт. Как вводить стили в документ и о их возможностях мы поговорим позже, в уроках, в которых мы рассмотрим и другие средства, которые помогают сделать наш неуклюжий html-документ динамичным.
<<< Ступенька 30-ая: Назад | Далее: Ступенька 32-ая >>>


Первые шаги. Ступенька 32-ая.

Главная | Словарь тэгов | Оглавление Ступенька 32-ая.

Учебник по Html для чайников. Дополнительные.

Ступенька 32-ая.

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

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

Тоже самое и со списками, они также определяют структуру документа. Визуально списки отображаются следующим образом:

  • Текст один
  • Текст другой
  • Текст сякой
  • Текст эдакий
Это называется неупорядоченный список. Кроме неупорядоченных списков существуют еще и упорядоченные списки:

  1. Сначала сделаем это.
  2. Затем мы сделаем то.
  3. А также действие третье.
  4. И с ним нас четвертое ждет.
Различные типы списков можно употреблять одновременно друг с другом. Неупорядоченные списки вводятся тэгом <ul>:

<ul>
...
</ul>

Чтобы ввести элементы списка (текст один, текст другой…), нам нужно ввести в нашу конструкцию тэг <li> (не требует закрывающего тэга):

<ul>
<li>Текст один
<li>Текст другой
<li>Текст сякой
<li>Текст эдакий
</ul>

В итоге получим:

  • Текст один
  • Текст другой
  • Текст сякой
  • Текст эдакий
У тэга <li> есть атрибут type, он отвечает за стиль элемента списка, визуально это выглядит так:

  • По умолчанию - (1)
  • Полый кружок - (2)
  • Не будь таким квадратным - (3)
В случае (1) - <li type="disk">,
в случае (2) - <li type="circle">,
в случае (3) - <li type="square">.

Атрибут type может вводиться не только для каждого элемента списка <li>, но и для всего списка в целом:

<ul type="square">
<li>Текст один
<li>Текст другой
<li>Текст сякой
<li>Текст эдакий
</ul>

Очень часто тэг <ul></ul>, которым вводятся неупорядоченные списки, используется кодерами немного нестандартно, для создания отступа (табуляции). Если вы пользовались текстовыми редакторами (допустим Вордом), то вы знаете, что такое табуляция (это когда вы жмете на кнопочку Tab и весь текст сдвигается, допустим, вправо), тоже самое мы можем сделать средствами html:

<ul>Ваш текст</ul>

В этом случае мы не использовали тэг <li>, и не ввели элементы списка. Как я уже говорила, такое применение тэга <ul></ul> не стандартно, а значит нежелательно, т.к. не предусмотрено спецификацией, однако, если вам это нужно, то я считаю, что, в данном случае, не страшно нестандартно воспользоваться тэгом <ul>, ведь визуально это отобразиться всеми броузерами, а также избавит вас от необходимости вводить лишние таблицы в ваш документ, чтобы достичь того же эффекта стандартными средствами. Чтобы отступ (табуляция) был больше, можно вложить тэг <ul> в самого себя:

<ul><ul>Два отступа</ul></ul>
<ul><ul><ul>Три отступа</ul></ul></ul>

На этом с неупорядоченными списками мы закончили, теперь поговорим об упорядоченных списках, но уже на следующей ступеньке.
<<< Ступенька 31-ая: Назад | Далее: Ступенька 33-ая >>>


Первые шаги. Ступенька 33-ая.

Главная | Словарь тэгов | Оглавление Ступенька 33-ая.

Учебник по Html для чайников. Дополнительные.

Ступенька 33-ая.

Упорядоченные списки вводятся тэгом <ol>:

<ol>
...
</ol>

Как и в случае с неупорядоченными списками, нам нужно ввести в нашу конструкцию тэг <li>:

<ol>
<li>Сначала сделаем это
<li>Затем мы сделаем то
<li>А также действие третье
<li>И с ним нас четвертое ждет
</ol>

В итоге получим:

  1. Сначала сделаем это
  2. Затем мы сделаем то
  3. А также действие третье
  4. И с ним нас четвертое ждет
Для упорядоченных списков также может употребляться атрибут type. Для упорядоченных списков возможны следующие значение атрибута type:

1 | арабские цифры | 1, 2, 3, ...
a | буквы нижнего регистра | a, b, c, ...
A | буквы верхнего регистра | A, B, C, ...
i | римские цифры в нижнем регистре | i, ii, iii, ...
I | римские цифры в верхнем регистре | I, II, III, ...

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

<ol type="I">
<li>Сначала сделаем это
<li>Затем мы сделаем то
<li>А также действие третье
<li>И с ним нас четвертое ждет
</ol>

Получаем:

  1. Сначала сделаем это
  2. Затем мы сделаем то
  3. А также действие третье
  4. И с ним нас четвертое ждет
С упорядоченными списками на этом наше знакомство закончилось. Кроме упорядоченных и неупорядоченных списков еще существуют и списки определений. Но о них мы говорить не будем. Почему? Потому что вашим заданием после того, как мы прошли несколько разделов, будет самостоятельное знакомство с этим типом списков посредством спецификации HTML, которая должна стать вашим другом, а также быть сохранена на вашем компьютере. Поверьте, вам порой придется обращаться к этому официальному документу за уточнениями, к тому же я ставлю целью ваше ознакомление с HTML, и некоторыми специфическими моментами, а не пересказ спецификации.

Кстати, спецификация это официальный документ по стандарту HTML от разработчиков стандарта. Существует такая организация, как W3C – World Wide Web Consortium, которая разрабатывает различные стандарты для веб, чтобы вы могли видеть странички в своих броузерах, чтобы вы могли передавать друг другу информацию и многая прочая. Организация W3C существует уже очень давно, и будет существовать еще долго, в конце концов, вы же не думали, что интернет и интернет технологии сами когда-то упали к нам с неба и развиваются до сих пор сами по себе, это все творение голов и рук людских, ничего сверхъестественного :)
<<< Ступенька 32-ая: Назад | Далее: Ступенька 34-ая >>>


Первые шаги. Ступенька 34-ая.

Главная | Словарь тэгов | Оглавление Ступенька 34-ая.

Учебник по Html для чайников. Дополнительные.

Ступенька 34-ая.

Эту главу мы с вами посвятим специфическом тэгу, речь пойдет о тэге Marquee - бегущей строке (текста).

Тэг Marquee поддерживается только Internet Explorer, но многих людей, начинающих осваивать сайтостроение, это не останавливает, и они с удовольствием его употребляют. Т.к. это болезнь массовая, то мне придется рассказать подробно о тэге Marquee (те, у кого броузер не IE, не будут в этой главе оставлены за бортом, для них я бросила спасательный круг в конце главы).

<marquee height="10" width="270" bgcolor="#99CCFF">
Бегущая строка, высота - 10, ширина - 270 пикселов, фон - 99CCFF
</marquee>

Как видите, все просто. Текст, который мы помещаем в тэге <marquee></marquee>, становится бегущей строкой.

Все атрибуты тэга <marquee></marquee> вам уже знакомы: bgcolor - цвет фона бегущей строки, height - высота строки, width - ширина строки.

Также для бегущей строки можно задать и другие знакомые вам атрибуты - hspace, vspace и align (тот, кто их не помнит, срочно возвращается к Простейшим ступенькам и освежает свою память). В наш пример я их вводить не буду, вы можете сами.

<marquee height="10" width="270" loop="2">
Бегущая строка
</marquee>

Атрибут loop задает сколько раз прокрутится строка, в нашем примере указано loop="2" - 2 раза, а это значит, что к тому моменту, когда вы дойдете до этого примера, строка может уже не бежать, поэтому обновите страницу и убедитесь в правоте моих слов - строка пробежит только два раза.

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

Direction - задает направление движения бегущей строки - direction="left" (right, up, down) - движение влево (вправо, вверх, вниз).

Behavior - поведение строки - behavior="scroll" (slide, alternate). Scroll - обычная прокрутка (можно не прописывать, оно так и есть по умолчанию). Slide - прокрутка с остановкой, строка пробегает до края и останавливается. Если одновременно с behavor="slide" употребить параметр loop, то строка прокрутится установленное количество раз и остановится у края. Alternate - строка будет двигаться от края к краю.

Scrollamount - скорость движения строки, scrollamount="1". Может принимать значения от 1 до 10. 1 - самое медленное движение, 10 - самое быстрое.

Уф! Все :)

Теперь, когда мы разобрались со всеми параметрами тэга Marquee, я немного позанудничаю, призывая читателя все же быть разумным и не особо злоупотреблять этим тэгом. Вернитесь хотя бы к первому примеру. Посмотрите на бегущую строку задумчиво и признайтесь, что она мешала вам сосредоточиться на чтении и ознакомиться с этой главой, а также смотрится она не очень, непрофессионально, любительски. Уже эти два аргумента должны заставить вас задуматься, нужны ли бегущие строки вам на вашем сайте. Кроме того, текст самой бегущей строки не удобно читать, что опять же служит аргументом против нее. Итак, это не красиво и не удобно, а значит не особо и нужно, только если вы хотите побаловаться в пределах вашей домашней страницы ради интереса.

Итак, что делать, если вы не признаете Internet Explorer, или хотите, чтобы пользователи других броузеров увидели вашу бегущую строку. Помните, в предыдущих главах я упоминала CSS – таблицы каскадных стилей, дополнительное средство, при помощи которого вы можете управлять содержимым ваших страниц.

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

Но почему я завела о них разговор? Дело в том, что при помощи скриптов мы можем ввести бегущую строку в наш документ, это будет правильнее, и это увидят пользователи не только Internet Explorer, но и других броузеров.

Коды скриптов с бегущей строкой в можете посмотреть здесь и здесь, чтобы потом ввести бегущую строку на ваш сайт, если вам этого очень хочется.
<<< Ступенька 33-ая: Назад | Далее: Ступенька 35-ая >>>


Первые шаги. Ступенька 35-ая.

Главная | Словарь тэгов | Оглавление Ступенька 35-ая.

Учебник по Html для чайников. Фреймы.

Ступенька 35-ая.

Вот мы добрались и до фреймов (frames). Что же это такое и чем они замечательны? Фреймы позволяют нам открыть в окне броузера - не один, а одновременно несколько документов (допустим, документ menu.html, который содержит меню, logo.html - документ, который содержит логотип, шапку страницы, и content.html - документ с непосредственным содержанием нашего сайта).

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

Вы могли слышать на форумах или где-то еще о том, что фреймы это плохо. Отсюда у вас вполне закономерно может возникнуть ко мне вопрос: "Фреймы это хорошо, или все же плохо?"

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

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

Что же касается моей позиции - то я всегда считала, что фреймы - это хорошо, очень хорошо, если их использование оправдано, если они смотрятся красиво и эстетично, и использованы они с умом. С умом, это значит, что, когда мы вводим фреймы в наш документ, мы не ограничиваемся средствами HTML, мы также вводим скрипты для корректной работы фреймов. Но об этом все в правой колонке, наша же с вами задача научиться создавать фреймы при помощи стандартных средств, не более того.

Итак, для того, чтобы наш любимый броузер показал одновременно несколько документов, надо создать специальный фрейм-документ, в котором мы укажем, сколько документов откроется в одном несчастном окне броузера, сколько места будет занимать каждый, каким образом они будут располагаться относительно друг друга (не все так просто, как хотелось бы:).

Т.к. первый документ на сайте, который показывается посетителю это index.html (или вроде него), то мы его и будем мучить, пусть он будет фрейм-документом. Создадим документ index.html:

<html>
<head>
<title>Хождение по фреймам</title>
</head>
</html>

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

Что ж, не будем грустить о тэге body, и найдем ему вполне достойного заместителя:

<html>
<head>
<title>Хождение по фреймам</title>
<frameset></frameset>
</head>
</html>

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

Теперь надо найти frameset достойных помощников и задать ему некоторые жизненно необходимые атрибуты, но это на следующей ступеньке.
<<< Ступенька 34-ая: Назад | Далее: Ступенька 36-ая >>>

Правой колонки в оффлайн версии нет, поэтому нужные ссылки переселились сюда:

  • Я люблю фреймы
  • Почему фреймы не так страшны
  • Фреймы как средство навигации


Первые шаги. Ступенька 36-ая.

Главная | Словарь тэгов | Оглавление Ступенька 36-ая.

Учебник по Html для чайников. Фреймы.

Ступенька 36-ая.

Прежде, чем что-нибудь предпринимать дальше, надо решить по какому принципу мы будем размещать наши документы, и вообще, какие документы мы будем показывать посетителю одновременно. Предлагаю классический вариант - logo.html, menu.html, content.html - о котором я упоминала в предыдущей главе.

Расположить мы можем это по-разному, вот для примера четыре варианта из множества возможных:

При помощи фреймов мы делим броузер на несколько окон, заданного размера, в которых помещаем независимые друг от друга документы. Это нам позволит оставлять некоторую информацию видимой, в то время как другая информация прокручивается или заменяется (так, например, мы будем постоянно видеть в одном окне документ с меню, в другом – документ с нашим логотипом, а в третьем окне у нас будут при нажатии на ссылки в документе меню загружаться разные документы с текстом, картинками и прочим).

Т.к. документы, которые мы размещаем во фреймах независимые, то соответственно каждый документ может содержать в себе что угодно (и текст, и картинки, и таблицы). Почему я особо оговариваю этот момент: некоторые неразумные читатели почему-то воображают, что фреймы – это альтернатива таблицам. ЭТО НЕ ВЕРНО!

Итак, сначала создадим такой вариант (предварительно не забудьте создать обычные *.html документы с логотипом, меню и основным содержанием):

<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="content.html">
<frame src="menu.html">
</frameset>
</head>
</html> (посмотреть)

Давайте разберемся, что и для чего. При помощи атрибута rows тэга <frameset> мы указали, что наши фреймы будут расположены горизонтально (рядами). В значении атрибута rows мы прописали высоту каждого фрейма (rows="100,*,150"). Высота первого фрейма - 100 пикселов, третьего - 150, а второй занимает все оставшееся пространство по высоте (это мы указали значком *), - полагаю, здесь должно быть все ясно.

Тэг frame сообщает броузеру какие же документы у нас будут загружены во фреймах. В нашем случае: в первом фрейме будет загружен - logo.html (документ с логотипом), второй фрейм займет документ с непосредственным содержанием (content.html), а третий - меню. Если вы хотите, чтобы меню было во втором ряду (фрейме), то вам следует поменять его местами с content.html

<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
</html> (посмотреть)

Посмотрите что у нас получилось. Опаньки... Поменять-то мы их местами - поменяли, а вот теперь надо задать новые значения атрибуту rows, чтобы меню у нас снова занимало только 150 пикселов по высоте, а содержание - все остальное:

<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,150,*">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
</html> (посмотреть)

Вот теперь другое дело:) Все-таки от перемены мест слагаемых кое-что меняется...
<<< Ступенька 35-ая: Назад | Далее: Ступенька 37-ая >>>


Первые шаги. Ступенька 37-ая.

Главная | Словарь тэгов | Оглавление Ступенька 37-ая.

Учебник по Html для чайников. Фреймы.

Ступенька 37-ая.

Эту главу мы начнем с небольшого фокуса: замените атрибут rows, на cols:

<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,150,*">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
</html> (посмотреть)

Ну-ка, посмотрите наш пример. Ловкость рук и никакого мошенства :)

Итак, атрибут cols говорит нашему броузеру, что наши фреймы будут расположены вертикально (столбцами). Т.е. значения атрибута cols (cols="100,150,*") задают уже не высоту, а ширину каждого фрейма. Ширина первого фрейма – 100 пикселов, ширина второго – 150, а третий фрейм занимает по ширине все оставшееся пространство.

Кстати, мы получили еще один из четырех вариантов, которые собирались сделать:

Итак, подведем итоги. Мы можем расположить наши фреймы горизонтально (рядами) или вертикально (колонками) относительно друг друга, делаем мы это с помощью параметров тэга <frameset> Cols и Rows. Другого способа деления не существует. Одновременно эти параметры использовать нельзя.

При помощи rows мы разбиваем располагаем фреймы горизонтально (рядами) и задаем какую высоту будет иметь каждый фрейм, при помощи cols располагаем фреймы вертикально (столбцами) и задаем какую ширину будет иметь каждый фрейм.

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

<frameset cols="10%,15%,75%">

Помните, что в сумме это все должно равняться 100%. А то бывают же умники...
<<< Ступенька 36-ая: Назад | Далее: Ступенька 38-ая >>>


Первые шаги. Ступенька 38-ая.

Главная | Словарь тэгов | Оглавление Ступенька 38-ая.

Учебник по Html для чайников. Фреймы.

Ступенька 38-ая.

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

или

В предыдущей главе я говорила, что не можем использовать атрибуты rows и cols одновременно применительно к одному тэгу <frameset>. Тогда как же расположить наши документы в окне так, как указано на рисунках? Просто, ввести в наш фрейм документ еще одного господина <frameset>, но обо всем по порядку.

Начнем с первого рисунка:

Каким образом мы будем делить окно? - На ряды. В первом ряду у нас будет располагаться logo.html, а второй ряд мы поделим на два столбца, в которых будут располагаться документы menu.html и content.html.

<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*">
<frame src="logo.html">
<???>
</frameset>
</head>
</html>

Принцип построения ясен, только вот как обозначить ряд, разбитый на два столбца? Как я уже говорила, тут нам поможет господин Frameset.

<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*">

<frame src="logo.html">
<frameset cols="150,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>

</frameset>
</head>
</html> (посмотреть)

Для тех, кто не уследил за движениями моих рук, поясняю. Первый ряд мы оформили как положено, при помощи тэга frame. Во втором ряду на сцену выгодит тэг <frameset></frameset>.

С помощью атрибута cols тэга <frameset></frameset> мы делим второй ряд на два столбца (первый шириной 150 пикселов, второй по ширине занимает все оставшееся пространство). А тэги <frame>, которые содержит <frameset></frameset>, определяют, какие документы будут показаны загружены в вертикальных фреймах во втором ряду (menu.html и content.html).

Теперь разберем вариант, изображенный на втором рисунке:

Здесь мы будем делить окно на столбцы. Второй столбец будет содержать в себе документ content.html (содержание), а первый столбец мы разобьем на два ряда, и поместим в них документы logo.html и menu.html.

<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*">

<frameset rows="100,*">
<frame src="logo.html">
<frame src="menu.html">
</frameset>
<frame src="content.html">

</frameset>
</head>
</html> (посмотреть)

Вот так. Ничего сложного здесь нет:)

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

А мы же с теми, у кого не возникает проблем с предметом, перешагнем на следующую ступеньку, чтобы узнать, что еще можно сделать с фреймами.
<<< Ступенька 37-ая: Назад | Далее: Ступенька 39-ая >>>


Первые шаги. Ступенька 39-ая.

Главная | Словарь тэгов | Оглавление Ступенька 39-ая.

Учебник по Html для чайников. Фреймы.

Ступенька 39-ая.

Допустим, мы решили остановиться на последнем варианте фреймовой структуры для нашей страницы, значит будем приводить его в более-менее нормальный вид. Для начала избавимся от полосы прокрутки (скрулинга) во фрейме, содержащим документ logo.html.

<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*">

<frameset rows="100,*">
<frame src="logo.html" scrolling="no">
<frame src="menu.html">
</frameset>
<frame src="content.html">

</frameset>
</head>
</html> (посмотреть)

Scrolling - атрибут тэга <frame>. Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна.

Собственно, scrolling="auto", можно не прописывать, т.к. если атрибут scrolling не задан, то полоса прокрутки появится, если она нужна, а если нет - ее не будет.

Если вы подведете мышку к границе какого-либо фрейма, то увидите, что потянув за нее, вы можете изменить размеры фрейма. Как же запретить вашему посетителю это делать? При помощи атрибута noresize для тэга <frame>:

<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*">

<frameset rows="100,*">
<frame src="logo.html" scrolling="no" noresize>
<frame src="menu.html" noresize>
</frameset>
<frame src="content.html" noresize>

</frameset>
</head>
</html> (посмотреть)

Теперь давайте избавимся от рамок между фреймами. Для этого мы используем параметр border, с которым мы раньше уже встречались. Итак, border="0".

<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*" border="0">

<frameset rows="100,*">
<frame src="logo.html" scrolling="no">
<frame src="menu.html">
</frameset>
<frame src="content.html">

</frameset>
</head>
</html> (посмотреть)

Так уже лучше :). Но все же, что-то еще хочется исправить... А! Картинку с чёртом так и хочется прижать в левый верхний угол:

<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*" border="0">

<frameset rows="100,*">
<frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0">
<frame src="menu.html">
</frameset>
<frame src="content.html">

</frameset>
</head>
</html> (посмотреть)

Атрибуты marginwidth и marginheight вам уже знакомы, они определяют ширину полей фрейма. В нашем документе мы убрали поля, задав значения этим атрибутам равные нулю для фрейма, содержащего документ с нашим чертом (logo.html).

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

Вот такие пироги:) Остальное будет на других ступеньках.
<<< Ступенька 38-ая: Назад | Далее: Ступенька 40-ая >>>


Первые шаги. Ступенька 40-ая.

Главная | Словарь тэгов | Оглавление Ступенька 40-ая.

Учебник по Html для чайников. Фреймы.

Ступенька 40-ая.

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

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

Для начала, господа, познакомьтесь с новым атрибутом тэга <frame> - name (кстати, name, мне кажется, что мы с вами уже знакомы:). Пустим name в дело:

<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*" border="0">

<frameset rows="100,*">
<frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0">
<frame src="menu.html">
</frameset>
<frame src="content.html" name="window-1">

</frameset>
</head>
</html>

Параметр name задает уникальное имя для фрейма (в нашем случае для того, который содержит документ content.html).

Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью атрибута тэга <a> target (target="имя_фрейма"), с которым мы, кстати, тоже уже знакомы.

Введем атрибут target в документе со ссылками - menu.html.

<html>
<head>
<title>Документ с Меню</title>
<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html">Главная</a>
<a href="tumki.html">Тумки</a>
<a href="bumki.html">Бумки</a>
<a href="tururumki.html">Турурумки</a>
<a href="tra-la-la.html">Траляля</a>
</center>
</body>
</head>
</html>

Вот такой он (menu.html), в нашем случае. Теперь для каждой ссылки укажем параметр target="window-1", где window-1 - это имя фрейма, в котором у нас располагается документ с основным содержанием (content.html).

<html>
<head>
<title>Документ с Меню</title>
<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html" target="window-1">Главная</a>
<a href="tumki.html" target="window-1">Тумки</a>
<a href="bumki.html" target="window-1">Бумки</a>
<a href="tururumki.html" target="window-1">Турурумки</a>
<a href="tra-la-la.html" target="window-1">Траляля</a>
</center>
</body>
</head>
</html> (посмотреть)

Теперь, все ссылки открываются в нужном нам фрейме, а меню никуда не исчезает, при этом мы не приложили никаких особых усилий, а только изменили немного два документа :) – наш фрейм-документ (index) и документ, содержащий ссылки (меню).

Бывают ситуации, когда нам нужно, чтобы открываемый документ открылся во все окно, для этого надо параметру target задать значение _top:

<a href="project.html" target="_top">Мой проект о рыбках</a>

Страница с проектом о рыбках откроется в полное окно, закрыв (уничтожив) остальные кадры (фреймы).
<<< Ступенька 39-ая: Назад | Далее: Ступенька 41-ая >>>


Первые шаги. Ступенька 41-ая.

Главная | Словарь тэгов | Оглавление Ступенька 41-ая.

Учебник по Html для чайников. Фреймы.

Ступенька 41-ая.

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

Итак, что такое Iframe, и чем он отличается от просто фреймов. IFrame - "плавающий" или встроенный фрейм. Вы, наверняка встречали его уже много раз на разных сайтах. Для Iframe нам не нужно создавать фрейм-документ, и прописывать в нем фреймовую структуру нашей страницы. Iframe позволяет нам вставить один html-документ в другой html-документ.

Как это выглядит:

Как вы видите, появляется форма заданного размера, в которой отображается нужный нам документ. Это очень удобно, вы уже наверняка встречались с "плавающим" фреймом, когда регистрировались на каких-либо сайтах, как правило соглашения с пользователем заключены для удобства в "плавающий фрейм", чтобы вы могли ознакомиться с соглашением, не переходя на другую страницу сайта, сразу.

«Плавающий» фрейм вводится в наш обычный html-документ при помощи тэга <iframe></iframe>:

<IFRAME src="ancorpri.html" width="300" height="250" scrolling="auto" frameborder="1"></IFRAME>

В атрибуте src мы указываем путь к документу, который отобразиться во встроенном фрейме.

Атрибуты height и width отвечают за ширину и высоту встроенного фрейма.

Атрибут scrolling (полоса прокрутки) и его значения мы тоже уже знаем из уроков по фреймам: он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна.

Атрибут frameborder указывает отображать или нет границы встроенного фрейма, возможные значения 1 (да, отображать) и 0 (нет, не отображать).

Границы встроенного фрейма растягивать при помощи мыши ваш посетитель не может, поэтому атрибута noresize встроенные фреймы не имеют.

Iframe может выравниваться относительно содержимого страницы: текста и картинок, и может, соответственно, быть заключен в тэги выравнивания и таблицы.

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

На этом наш разговор о фреймах завершен, напоминаю о полезных ссылках в правой колонке, советую изучить, а после переходить к следующей ступеньке, на которой мы начнем новую тему поговорим об объектах и дополнительных средствах, которые облегчают нашу жизнь, делают html-документы динамичными, расширяют наши возможности при создании страниц.
<<< Ступенька 40-ая: Назад


About Chm4You!

О программе Chm4You!
Разработчик: Сергей Тарасенко (aka Tarantul)
Версия: Chm4You! 1.2
Веб-сайт: http://supex.by.ru
Почта: tarantuls@ukr.net

Компилятор: hhc.exe 4.78.8702.0 (Microsoft)
Динамическая библиотека: hha.dll 4.78.8702.0 (Microsoft)
Декомпилятор: hh.exe 4.78.8702.0 (Microsoft)


Первые шаги. Словарь тэгов.

Главная | Словарь тэгов | Оглавление Словарь тэгов.

Первые Шаги - Словарь тэгов.

Тэг Назначение и атрибуты, рассматриваемые в учебнике Ступеньки
A ссылка
href="другой_документ.html" - путь к документу
target=_blank - открывает ссылку в новом окне
name="anchor1" - имя закладки
title="Ваша подсказка" - подсказка к ссылке (текстовой)
13, 15, 17, 18, 19
16
20
14
AREA определяет геометрические области внутри карты и ссылки для них
shape="rect" (circle, poly) - тип области
coords="x1,y1,..." - координаты области
alt="описание" - описание, подсказка
href="document.html" - ссылка
 17, 18, 19
B выделение текста полужирным шрифтом 8
BIG выделение текста более крупным шрифтом, чем основной 8
BODY тело документа, обязательный тэг
text="#cc0000" - задает цвет текста всего документа
bgcolor="#000000" - задает цвет фона документа
background="картинка.jpg" - задает фоновую картинку
link="#ff9999" - задает цвет ссылки
alink="#ff9999" - задает цвет активной (нажатой) ссылки
vlink="#ff9999" - задает цвет посещенной ссылки
topmargin="0" - ширина верхнего и нижнего полей документа для IE
leftmargin="0" - ширина левого и правого полей документа для IE
marginheight="0" - ширина верхнего и нижнего полей документа для NN
marginwidth="0" - ширина левого и правого полей документа для NN
3
4
5
11
13

31
BR принудительный перенос текста на другую строку
clear="all" (left, right) - завершение обтекания текстом объекта 		12
CENTER центрирование текста и объектов 6
DIV выравнивание текста и объектов
align="center" - центрирование
align="right" - выравнивание по правому краю документа
align="left" - выравнивание по левому краю документа
align="justify" - выравнивание по обоим краям документа 		6
FONT управление шрифтами
color="#cc0000 - задает цвет для блока текста
size="+0" - задает размер шрифта текста (от -2 до +4)
face="Arial" - задает определенный тип шрифта
4
7
9
FRAME определяет содержимое и вид одного фрейма
marginheight="0" - ширина верхнего и нижнего полей фрэйма
marginwidth="0" - ширинау левого и правого полей фрэйма
scrolling="yes" (no, auto) - линейка прокрутки
name="window-1" - имя фрейма
noresize - запретить посетителю менять размеры фреймов 		35, 36, 37, 38, 39, 40
FRAMESET определяет макет основного окна в виде прямоугольных пространств
rows="100,200,*" - определяет расположение горизонтальных фреймов
cols="10%,20%,70%" - определяет расположение вертикальных фреймов
border - определяет ширину рамок фрэймов в пикселах 		35, 36, 37, 38, 39, 40
Hx заголовки (H1, H2, H3, H4, H5, H6) 7
HEAD голова документа, обязательный тэг 3
HR линия
align="right" (center или left)
width="30%" (ширина линии в процентах)
size="6" (толщина линии)
NoShade (отмена объемности)
color="cc0000" (цвет линии, только в IE) 		30
HTML указывает на тип документа, обязательный тэг 2
I выделение текста курсивом 8
IFRAME "плавающий" фрейм
src="ancorpri.html" - путь к подгружаемому документу
width="300" - вширина "плавающего" фрейма
height="250" - высота "плавающего" фрейма
scrolling="auto" (yes, no) - полоса прокрутки
frameborder="1" (0) - отображать или нет границы фрейма 		41
IMG подгрузка изображений (картинок)
Border="5" - рамка покруг картинки
width="500" - ширина картинки
height="100" - высота картинки
align="left" - расположение текста по отношению к картинке
vspace="10" - расстояние от картинки до текста по вертикали
hspace="30" - расстояние от картинки до текста по горизонтали
alt="описание" - описание картинки
usemap="#karta1" - ссылка на карту 		10, 11, 12

17, 18, 19
LI определяет элемент списка
 32, 33
MAP определяет клиентскую навигационную карту
name="karta1" - имя карты 		17, 18, 19
OL упорядоченные списки
type="I" (i, 1, a, A) - стиль элемента списка 		33
P параграф, выравнивание текста и объектов
align="center" - центрирование
align="right" - выравнивание по правому краю документа
align="left" - выравнивание по левому краю документа
align="justify" - выравнивание по обоим краям документа 		6
PRE форматированный текст 8
S перечеркнутый текст 8
SMALL выделение текста более мелким шрифтом, чем основной 8
STRIKE перечеркнутый текст 8
SUB нижний индекс 8
SUP верхний индекс 8
TABLE таблица
bgcolor="#FFCC33" - цвет фона таблицы (строки, ячейки)
background="картинка.gif" - задает фоновый рисунок
width="50" или width="50%"- ширина таблицы
height="45" или height="45%"- высота таблицы
cellspacing="5" - расстояние между ячейками
cellpadding="5" - расстояние внутри ячеек
border="3" - задает толщину рамки таблицы
bordercolor="#000000" - задает цвет рамки таблицы 		21, 22, 23, 24, 25, 26, 27, 28
TD ячейка данных таблицы
bgcolor="#FFCC33" - цвет фона
background="картинка.gif" - задает фоновый рисунок
width="50" или width="50%"- ширина
height="45" или height="45%"- высота
align="center" (right, left) - горизонтальное выравнивание содержимого
valign="middle" (top, bottom) - вертикальное выравнивание содержимого
colspan="2" - растянуть ячейку на несколько стобцов
rowspan="2" - растянуть ячейку на несколько рядов
cellspacing="5" - расстояние между ячейками 		21, 22, 23, 24, 25, 26, 27, 28
TITLE заголовок документа 3
TR строка таблицы
bgcolor="#FFCC33" - цвет фона
background="картинка.gif" - задает фоновый рисунок
width="50" или width="50%"- ширина
height="45" или height="45%"- высота 		21, 22, 23, 24, 25, 26, 27, 28
TT шрифт пишущей машинки (моноширинный) 8
U подчеркнутый текст 8
UL неупорядоченные списки
type="disk" (circle, square) - стиль элемента списка 		32


Первые шаги - Ступенька тридцать шестая.

Григорий Остер, "Вредные советы.
Книга для непослушных детей и их родителей".

Ссылка на стих первый
Ссылка на стих второй
Ссылка на стих третий

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

Стих первый

     Рукам никогда нигде
     Не трогай ничего.
     Не впутывайся ни во что
     И никуда не лезь.
     В сторонку молча отойди,
     Стань скромно в уголке
     И тихо стой, не шевелясь,
     До старости своей.

     Нет приятнее занятья,
     Чем в носу поковырять.
     Всем ужасно интересно,
     Что там спрятано внутри.
     А кому смотреть противно,
     Тот пускай и не глядит.
     Мы же в нос к нему не лезем,
     Пусть и он не пристает.
     Если вас поймала мама

     За любимым делом вашим,
     Например, за рисованьем
     В коридоре на обоях,
     Объясните ей, что это -
     Ваш сюрприз к Восьмому марта.
     Называется картина:
     "Милой мамочки портрет".

     Если ты весь мир насилья
     Собираешься разрушить,
     И при этом стать мечтаешь
     Всем, не будучи ничем,
     Смело двигайся за нами
     По проложенной дороге,
     Мы тебе дорогу эту
     Можем даже уступить.

     Не соглашайся ни за что
     Ни с кем и никогда,
     А кто с тобой согласен, тех
     Трусливыми зови.
     За это все тебя начнут
     Любить и уважать.
     И всюду будет у тебя
     Полным полно друзей.

Стих второй

     Если вы по коридору
     Мчитесь на велосипеде,
     А навстречу вам из ванной
     Вышел папа погулять,
     Не сворачивайте в кухню,
     В кухне - твердый холодильник.
     Тормозите лучше в папу.
     Папа мягкий. Он простит.

     Если вас навек сплотили,
     Озарили и ведут,
     Не пытайтесь уклониться
     От движенья к торжеству.
     Все равно на труд поднимет
     И на подвиг вдохновит
     Вас великий и могучий,
     И надежный наш оплот.

     Главным делом жизни вашей
     Может стать любой пустяк.
     Надо только твердо верить,
     Что важнее дела нет.
     И тогда не помешает
     Вам ни холод, ни жара,
     Задыхаясь от восторга,
     Заниматься чепухой.

     Бейте палками лягушек.
     Это очень интересно.
     Отрывайте крылья мухам,
     Пусть побегают пешком.
     Тренируйтесь ежедневно,
     И наступит день счастливый -
     Вас в какое-нибудь царство
     Примут главным палачом.

     Начиная драку с папой,
     Затевая с мамой бой,
     Постарайся сдаться маме, -
     Папа пленных не берет.
     Кстати, выясни у мамы,
     Не забыла ли она -
     Пленных бить ремнем по попе
     Запрещает Красный Крест.

Стих третий

     Если вы собрались другу
     Рассказать свою беду,
     Брать за пуговицу друга
     Бесполезно - убежит,
     И на память вам оставит
     Эту пуговицу друг.
     Лучше дать ему подножку,
     На пол бросить, сверху сесть
     И тогда уже подробно
     Рассказать свою беду.

     Если ты пришел к знакомым,
     Не здоровайся ни с кем.
     Слов: "пожалуйста", "спасибо"
     Никому не говори.
     Отвернись и на вопросы
     Ни на чьи не отвечай.
     И тогда никто не скажет
     Про тебя, что ты болтун.

     Если что-нибудь случилось,
     И никто не виноват,
     Не ходи туда, иначе
     Виноватым будешь ты.
     Спрячься где-нибудь в сторонке.
     А потом иди домой.
     И про то, что видел это,
     Никому не говори.

     Если не купили вам пирожное
     И в кино с собой не взяли вечером,
     Нужно на родителей обидеться,
     И уйти без шапки в ночь холодную.
     Но не просто так
     Бродить по улицам,
     А в дремучий темный
     Лес отправиться.
     Там вам сразу волк
     Голодный встретиться,
     И, конечно, быстро
     Вас он скушает.
     Вот тогда узнают папа с мамою,
     Закричат, заплачут и забегают.
     И помчатся покупать пирожное,
     И в кино с собой
     Возьмут вас вечером.

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

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

Все!


Хождение по фреймам

бумки - бумки

бум-бум-бум-бум
бум-бум-бум-бум
бум-бум-бум-бум, ну и т.д...


Хождение по фреймам

Ну, а здесь содержание...

много, очень много
всякого и разного
текста, картинок, ну и т.д...


Первые шаги. Оглавление.

Главная | Словарь тэгов | Оглавление Оглавление учебника.

Учебник по Html для чайников - Оглавление

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

Инструментарий. Основные понятия.

  • Ступенька 1: Основной инструментарий, учимся работать руками.
  • Ступенька 2: Что такое тэги?
  • Ступенька 3: Обязательные тэги. Зачем телу голова, а голове тело?

Простейшие.

  • Ступенька 4: Раскрась сам. Изменяем цвет текста.
  • Ступенька 5: Как изменять цвет фона страницы. Немного об этике цветов.
  • Ступенька 6: Параграфы и DIV. Учимся выравнивать текст.
  • Ступенька 7: Что такое заголовки и как задавать размер буковок.
  • Ступенька 8: Курсив, жирный текст, подчеркнутый и другие.
  • Ступенька 9: Стандартные шрифты. Как прописать свой шрифт.
  • Ступенька 10: Что такое путь? Как вставлять картинки.
  • Ступенька 11: Что можно сделать с картинкой. Картинка, как фон документа, и т.д..
  • Ступенька 12: О любителе сосисок и принудительном прерывании обтекания текстом картинки.
  • Ступенька 13: Ссылка и как с нею бороться.
  • Ступенька 14: Ссылка на е-майл. Подсказка к текстовой ссылке.
  • Ступенька 15: Может ли картинка быть ссылкой.
  • Ступенька 16: Куда податься, на что ссылаться. Новое окно при нажатии на ссылку.
  • Ступенька 17: Карты. Как часть картинки сделать ссылкой.
  • Ступенька 18: Карты. Как часть картинки сделать ссылкой 2.
  • Ступенька 19: Карты. Как часть картинки сделать ссылкой 3.
  • Ступенька 20: Закладка. Как сделать ссылку внутри документа.

Таблицы.

  • Ступенька 21: Учимся создавать таблицы.
  • Ступенька 22: Учимся создавать таблицы. Продолжение.
  • Ступенька 23: Таблицы, вертикальное выравнивание (valign).
  • Ступенька 24: Таблицы, учимся растягивать ячейки (rowspan, colspan).
  • Ступенька 24-2: Дополнительная глава. Ответы на домашнее задание.
  • Ступенька 25: Таблицы, что такое cellspacing и cellpadding. Что делать с пространством.
  • Ступенька 26: Вложенные таблицы и некоторые нюансы.
  • Ступенька 27: О рамках таблиц, и брюзжание о таблицах напоследок.
  • Ступенька 28: Создаем простой сайт с таблицами.

Дополнительные.

  • Ступенька 29: Спецсимволы, или головная боль.
  • Ступенька 30: О линиях. Просто и полезно.
  • Ступенька 31: Как убрать отступы (поля) документа, topmargin, leftmargin, marginwidth, marginheight.
  • Ступенька 32: О списках. Неупорядоченные списки.
  • Ступенька 33: Упорядоченные списки. Ремарка: что такое спецификация и консорциум.
  • Ступенька 34: Cпецифические тэги, бегущая строка текста.

Фреймы.

  • Ступенька 35: Вступление. Зачем они (фреймы) нужны.
  • Ступенька 36: Учимся создавать фреймы.
  • Ступенька 37: Учимся создавать фреймы. Продолжение.
  • Ступенька 38: Учимся создавать фреймы. Продолжение.
  • Ступенька 39: Убираем полосу прокрутки, избавляемся от рамок, регулируем ширину полей фрейма.
  • Ступенька 40: При нажатии на ссылку документ открывается в другом фрейме, в полное окно.
  • Ступенька 41: Последняя глава о фреймах. Что такое IFrame.
Уважаемый Читатель, к сожалению, оффлайн версия учебника ограничивается 41-ой главой. Остальные главы, а также полный комплекс материалов по азам сайтостроительства, вы можете получить на нашем портале "Постройка.ру". Там, если у вас возникнут вопросы, вы сможете задать их авторам, мы обязательно ответим и поможем вам в решении возникшей проблемы.


Хождение по фреймам

Главная Тумки Бумки Турурумки Траляля


Документ с Меню

Главная Тумки Бумки Турурумки Траляля


Мой первый шаг

Здравствуйте, это моя первая страница.

Мои Фотографии :)


Мой первый шаг

 Здравствуйте, это моя первая страница.
Добро пожаловать! :)


Мой первый шаг

 Мой первый шаг Здравствуйте, это моя первая страница.
Добро пожаловать! :)


Мой первый шаг

Здравствуйте, это моя первая страница.

Добро пожаловать! :)

Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :)


Мой первый шаг

Здравствуйте, это моя первая страница.

Добро пожаловать! :)

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

А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :)

На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:)

Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)


Мой первый шаг

Здравствуйте, это моя первая страница.
Добро пожаловать! :)

Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появться еще один виртуальный друг? :)


Пример простого сайта.

Добро пожаловать, на самый простой сайт!
.: Главная : Другая : Третья : Четвертая : Последняя страница :.
.
Это самая главная страница Новости

Дистрофик зовет медсестру: Сестра, сестра убери паука, который ползет подо мной. Сестра... Hу куда ты меня понес, СТОЙ! Сестра...

Обьявление в газете: "Умного, нежного, внимательного, pаботящего, щедpого, непьющего мужчину хотелось хоть pаз пpосто увидеть" (Hосоpог очень плохо видит. Hо пpи его весе это уже не его пpоблемы). Пиво - величайшее изобpетение. Колесо, конечно, тоже ничего, но колесо с pыбой - все-таки не то... (Умер Альберт Эйнштейн и попал к Богу. Бог ему и говорит: - Ты очень хорошо прожил жизнь, и за это я исполню одно твое желание. Эйнштейн: - Hапиши-ка мне формулу Мира. Бог начинает писать, писать, писать... Hаписал большущую формулу и выжидающе смотрит на Эйнштейна. - Бог ты мой! Да y тебя же здесь ошибка! - восклицает Эйнштейн. Бог смущенно: - Я знаю...)

Почему у евреев две Торы. Как известно, есть две Торы - письменная и устная, основа талмуда, которая была записана только под угрозой полного забвения ввиду рассеивания и ассимиляции евреев. И когда евреев спрашивают, почему Тор две, они рассказывают такую историю. Решил Бог обзавестись избранным народом. Пришел... ну, скажем, к моавитянам и говорит: - Давайте договор заключим? Вы будете моим избранным народом, а я вам Тору дам, закон. - А что у тебя там? - поинтересовались те. - Hу... не прелюбодействуй, например... - Hе! - решительно отказались моавитяне. - Это не для нас. Бог пошел к аммонитянам - та же фигня, этих, понимаешь, "не убий" не устраивает. Совсем отчаялся, пришел к евреям и за свое: - Давай вы будете мой избранный народ, договор заключим, я вам Тору дам... - А сколько стоит? - деловито спросили евреи. - Да даром! - обрадовался Бог. - Тогда давай две. И теперь у еврейского народа две Торы.

         . .

20.12.01 - Скажите! А зачем этому боксеpу такие большие контактные линзы? - Это сейчас они контактные, а до пеpвого pаунда это были очки. ;)

11.12.01 - Разговор двух программистов Microsoft: - Шо пишешь ? - Hезнаю, сейчас запустим - увидим!

05.12.01 - Сидят два программиста в кафе. Мимо шествует девушка. - Классные у неe: properties, - говорит один. - Вчера проверял... всe: read only, - с грустью отвечает другой.

01.12.01 - Нацарапано гвоздем на памятнике Кириллу и Мефодию: "Ребята, спасибо за KOI-8!"

29.11.01 - Как говоpится, не пpи детях бyдет сказано... хотя им это тоже очень интеpесно...

25.11.01 - Папа, я хочу быть патологоанатом. - Только чеpез мой тpуп.

20.11.01 - Лежат два програмиста на берегу моря один другому: - Смотри какие облака... - Да это они умеют!

. . . . .
Копи, райты и прочее важное, что игнорировать нельзя.


Мой первый сайт с таблицами

1x1 |  | 1x2
2x1 | 2x2


Мой первый сайт с таблицами

Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится еще один виртуальный друг? :) На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть, мы и в реальной жизни станем друзьями:) |  | 1x2
2x1 | 2x2


Мой первый сайт с таблицами

Добро пожаловать на мою страницу!

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

А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится еще один виртуальный друг? :)

На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:)

Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть, мы и в реальной жизни станем друзьями:)

2x1
2x2


Мой первый сайт с таблицами

Добро пожаловать на мою страницу!

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

А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится еще один виртуальный друг? :)

На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:)

Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть, мы и в реальной жизни станем друзьями:)

напиши мне письмо
посмотри мои фотографии


Хождение по фреймам

тра-ля-ля - тра-ля-ля

ля-ля-ля-тра-ля
тра-ля-тра-ля-ля
вот-дурью-маюсь-ля-тра-ля, ну и т.д...


Хождение по фреймам

тумки - тумки

тум-тум-тум-тум
тум-тум-тум-тум
тум-тум-тум-тум, ну и т.д...


Хождение по фреймам

турурумки - турурумки

турум-тум-тум
тум-тум-турурум
турум-тум-тум, ну и т.д...