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

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

Учебник по 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, но и других броузеров.

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

Рубрики:

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

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

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

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

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

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

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

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

<ol> ... </ol>

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

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

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

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

Для упорядоченных списков также может употребляться атрибут 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>

Получаем:

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

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

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

Рубрики:

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

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

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

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

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

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

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

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

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

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

Текст один
Текст другой
Текст сякой
Текст эдакий

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

Сначала сделаем это.
Затем мы сделаем то.
А также действие третье.
И с ним нас четвертое ждет.

Различные типы списков можно употреблять одновременно друг с другом. Неупорядоченные списки вводятся тэгом <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>

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

Рубрики:

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

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

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

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

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

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

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

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

Рубрики:

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

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

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

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

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

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

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

Рубрики:

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

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

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

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

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

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

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

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

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

(1) - < - < (2) - > - > (3) - " - " (4) -   - пробел (5) - & - &

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

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

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

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

слово1 слово2 слово3 = слово1 слово2 слово3

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

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

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

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

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

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

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

Рубрики:

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

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

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

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

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

Учебник по 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 документов вашей страницы.

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

Рубрики:

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

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

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

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

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

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

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

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

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

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

Рубрики:

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

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

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

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

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

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

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

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

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

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

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

За сим все

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

<table> <tr> <td width="200" valign="top" background="blue.gif" align="center">С каждым днем в интернете появляется все больше бяк и бук. Это особенные существа, роль которых в развитии современного общества не понятна, но тем не менее само их присутсвие заметно. Буки и бяки требуют особого обращения к себе, если обращаться к ним как к нормальным человеческим особям, то вы поняты не будете.</td> <td width="10" background="white.gif"> </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"> </td>

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

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

Рубрики:

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

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

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

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

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

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

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

Рубрики:

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

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

LiveInternetLiveInternet

-Рубрики

-Ссылки

-Музыка

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

-Метки

-Приложения

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

-Интересы

-Друзья

-Статистика

--марина--

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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