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

Вторник, 07 Февраля 2012 г. 11:35 + в цитатник

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

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

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

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

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

<table> <tr> <td height="35" bgcolor="#FFCC33"> <center>1x1</center> </td> <td width="50" bgcolor="#336699"> <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>

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

Рубрики:

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

Метки: Учебник по Html для чайников.

Комментарии (0)

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

Вторник, 07 Февраля 2012 г. 11:33 + в цитатник

Учебник по 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). А для полного закрепления полученных знаний можете написать еще и код для такой таблицы (я не издеваюсь, просто вы так лучше усвоите):

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

Рубрики:

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

Метки: Учебник по Html для чайников

Комментарии (0)

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

Вторник, 07 Февраля 2012 г. 11:32 + в цитатник

Учебник по 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 – вертикальное, перейдем к следующей ступеньке, чтобы узнать о других атрибутах, облегчающих нашу трудную жизнь.

Рубрики:

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

Метки: Учебник по Html для чайников.

Комментарии (0)

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

Вторник, 07 Февраля 2012 г. 11:31 + в цитатник

Учебник по 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 выравнивает содержимое внутри ячейки (на всякий случай, если вы еще не поняли его назначение).

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

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

Рубрики:

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

Метки: Учебник по Html для чайников.

Комментарии (0)

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

Вторник, 07 Февраля 2012 г. 11:30 + в цитатник

Учебник по 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">

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

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

Рубрики:

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

Метки: Учебник по Html для чайников.

Комментарии (0)

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

Вторник, 07 Февраля 2012 г. 11:29 + в цитатник

Учебник по 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>

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

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

Шагаем дальше, к таблицам.

Рубрики:

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

Метки: учебник по Html для чайников

Комментарии (0)

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

Вторник, 07 Февраля 2012 г. 11:28 + в цитатник

Учебник по 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 - Вы можете не мучаться с картами, а найти на просторах интернета специальную программу, с помощью которой вы без труда сможете карту расчертить, и не прописывать все вручную - это может сэкономить ваше время, силы, нервы.

Надеюсь, с картами вам теперь все ясно, и вы можете продолжать обучение :)

Рубрики:

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

Метки: учебник по Html для чайников

Комментарии (0)

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

Вторник, 07 Февраля 2012 г. 11:26 + в цитатник

Учебник по 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), чтобы закрепить пройденное. А затем следующая ступенька ждет вас.

Рубрики:

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

Метки: Учебник по Html для чайников

Комментарии (0)

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

Вторник, 07 Февраля 2012 г. 11:25 + в цитатник

Учебник по 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), а затем шагайте на следующую ступеньку, где мы продолжим разговор о картах.

Рубрики:

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

Метки: Учебник по Html для чайников

Комментарии (0)

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

Вторник, 07 Февраля 2012 г. 11:23 + в цитатник

Учебник по 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" - указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне броузера. В наш большой пример я это вводить не буду, т.к. считаю, что вы уже можете и должны самостоятельно подставлять в код изменения.

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

Рубрики:

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

Метки: Учебник по Html для чайников

LiveInternetLiveInternet

-Рубрики

-Ссылки

-Музыка

-Всегда под рукой

-Метки

-Приложения

-Подписка по e-mail

-Интересы

-Друзья

-Статистика

--марина--

Перейти к полной формеБыстрая запись

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поиск по блогу

по комментариям по друзьям