пятница, 31 августа 2012 г.

 День 24, 25. Не теряем.

Друзья, не теряйте меня, все хорошо. Просто я решил несколько изменить подход у своему обучению, а значит и структуру своих рассказов.
Что за изменение? Расскажу позже. Сейчас лишь знайте, что проект 365.WEB живее всех живых.
Пока, друзья)))

среда, 29 августа 2012 г.

День 23. Галопом по Европам

Итак, переходим теперь непосредственно к применению CSS. Разбирать будем его пошагово,
по мере употребления различных элементов в коде.
Чтобы было к чему нам эти элементы применять давайте сразу определимся с кодом примера:

<html>
  <head>
   <title>Форматирование текста средствами CSS</title>
   <link href="mystyle.css" rel="stylesheet" />
  </head>
  <body>
   <h1><span>Форматирование текста средствами CSS</span></h1>
   <p class="epigraf">Главное в жизни - семья и дом. И эпитаксия.</p>
   <h2>Физические основы эпитаксиальной технологии</h2>
   <p>Промышленный прогресс в эпитаксиальной технологии в настоящее время связан с процессом эпитаксии
кремния из газовой формы. Поэтому рассмотрение методов получения эпитаксиальных слоев кремния из
газовой фазы, как промышленных, так и находящихся в стадии лаборыторных исследований, приобретает особое значение.
Первые работы по использованию процесса эпитаксии кремния в технологии микроэлектроники появились в начале
1960 г. В ряде случаев этот процесс пришел на смену процесса диффузии, занимавшего до недавнего времени
доминирующее положение при создании изотипных и<a href="#"> p-n переходов.</a> </p>
  </body>
</html>


Обратите внимание, у меня уже типа подключена таблица стилей mystyle.css. Вы тоже можете сразу ее внести в код,  браузер, не найдя ее в папке, просто ее забанит.
Также посмотрите внимание на парметры ссылки. Там указан атрибут href="#". Это значит, что при переходе по ссылке никакого переброса не будет, вы просто останетесь на той же странице.
Итак, давайте же теперь начнем форматировать текст. Начнем, например, с определения параметров абзаца.
Для этого создаем файл mystyle.css и вносим туда запись типа

p { text-align: justify; }

Смотрим на результат. Текст выравнился, что называется, по ширине. Но вы, естественно, можете выравнять его по center, left или right. 
Теперь, допустим, поменяем шрифт. Для этого добавим кое что:

p { text-align: justify;
text-family: monospace; }


Смотрим... Шрифт изменился на моноширинный. Здесь в качестве значений могут выступать как конкретные шрифты, так и семейства шрифтов. Собственно, monospace - это семейство шрифтов. Семейством называют набор шрифтов, объединенных
общим стилем, элементами и так далее... Всего есть пять семейств: monospace, serif, sans-serif, cursive и fantasy.

Дальше давайте поменяем цвет текста и цвет фона. Добавляем запись:

p { text-align: justify;
text-family: monospace;
background-color: rgb(232, 142, 234);
color: red; }


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

Ах, да, пока не забыл. Все вот эти параметры наследуются. То есть мы вот все указываем для элемента р, соответственно, эти самые параметры применяться ко всем элементам p, которые будут внутри body. Если нам нужно определить стиль для какого-то параметра отдельно, то следует поступить так:

p.exclusive { text-align: justify;
text-family: monospace;
background-color: rgb(232, 142, 234);
color: red; }


А потом при объявлении самого исключительного абзаца нужно сделать так:

<p class="exclusive">

Вот к этому абзацу и применится стиль exclusive.
Так, продолжаем форматировать.

Можем поменять толщину текста

p {
text-align : justify;
font-family : monospace;
font-weight: 900;
}


Понятно, какой элемент отвечает за это? Он может принимать любые значения от 100 до 900, но только в сотнях.
Сейчас изменим размер шрифта:

p {
text-align : justify;
font-size : 1pc;
font-family : monospace;
font-weight: 900;
}

В качестве единиц измерения могут использоваться следующие величины: pt- типографский пункт(1/7 дюйма), in- дюйм, pc - 12 пунктов, cm- сантиметр, mm - миллиметр. Это только некоторые из них, но наиболее распространенные.

Итог.


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

вторник, 28 августа 2012 г.

День 22. Лукавство простительно?

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

Псевдокласс : first-child


"Псевдокласс : first-child сопоставляется с элементом, который является первым дочерним элементом другого элемента"
Эта формулировка взята из одной умной книжки, вероятно поэтому формулировка и есть такая заумная. Поэтому давайте посмотрим пример.

p:first-child em {color:red}

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


Псевдоклассы ссылок.



Обычно наши с вами браузеры по-разному отображают посещенные и непосещенные ссылки и чтобы эти ссылки различить можно использовать псевдоклассы ссылок:
:link - используется для непосещенных ссылок
:visited - используется для просмотренных уже ссылок
Вот пример:

a.external:visited {color:red}

Где a.external - это стиль для элементов ссылок, :visited - псевдокласс, ну а {color:red} сам стиль, собственно.

Псевдоэлемент :first-line

Он используется для применения стиля к первой строке абзаца. Объявляется он следующим образом:

p:first-line {color:red}

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

Псевдоэлемент :first-letter


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

На сегодня все.


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

понедельник, 27 августа 2012 г.

День 21. Блэкджек.

Давайте разберемся с синтаксисом CSS. Для начала общие замечания.
Ключевые слова в CSS не выделяются кавычками, то есть red - это ключевое слово, а "red" -
нет. Комментарии, в отличии от HTML, обрамляются значками /* и */ .

Теперь переходим к селекторам. Селекторы - это название элементов, к которым применяются параметры стиля. То есть в записи p {color: red} p - будет селектором.
Давайте посмотрим на основные приемы работы с селекторами.

Группировка.


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

h1, p {color:red}

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

Селекторы потомков.


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

h1 em {color : red}

В этом случае красный цвет будет применен только к тем элементам em, которые находятся внутри элемента h1. Если в коде будут еще элементы em, но которые не находятся внутри h1, то к ним такой стиль пременяться не будет.

Селекторы атрибутов.


Можно задавать стиля только для элементов, к которым указаны соответствующие атрибуты.
Примерно вот так вот можно делать:

p[align] {color : blue}
p[align=center] {color : blue}


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

Id - селекторы.


Для элементов в HTML можно указать id идентификатор. С помощью этого идентификатора можно указывать к каким элементам применять стиль. То есть использовать конструкцию

#id1001{color : red }
<p id=id1001>Текст абзаца</p>


Здесь использован идентификатор id1001, и к элементам с таким идентификаторам(в примере это элемент абзаца) будет применен соответствующий стиль. Обратите внимание на знак # перед идентификатором, его наличие обязательно.
Он собственно и указывает на то, что используется ID - селектор.

Итог

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

День 20. Welcome to CSS

Как видно из заголовка, сегодня я приступил к изучению CSS - Cascading Style Sheets, они же каскадные таблицы стилей. 
Нужны они для оформления HTML страниц, потому как сам по себе язык разметки несет в себе весьма скудные возможности для этого. Кстати, в языке HTML 5, который сменит в скором будущем язык HTML 4,оформление страниц будет допускаться в принципе только с помощью CSS.
Давайте сначала поговорим о преимуществах, которые несет в себе использование CSS.

Преимущество 1. Широкий инструментарий.


Ну тут все вроде бы должно быть ясно. В языке CSS возможно сделать со страницей такие преобразования, которые при всем желании не получится сделать одним HTML.

Преимущество 2. Простота применения.


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

Преимущество 3. Ускорение.


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

Ну и, естественно, коли они крутые такие, эти самые каскадные таблицы, то их капец как надо выучить.
Начал я с простеньких примеров. Тут вы меня извините, ничего сверхъестественного я за сегодня не освоил, но это ведь только учеба-обучение.
Для того, чтобы вписать таблицу непосредственно в документ используется элемент STYLE, который следует поместить внутрь HEAD. Ну и для элемента STYLE нужно задать атрибут type со значением "text/css". Внутрь элемента STYLE нужно внести конструкцию типа: 
название элемента к которому хотим применить стиль{сами штуки стиля}. Понятнее станет, когда вы посмортите на пример.
<html>
  <head>
   <title>Первый опыт CSS</title>
   <style type="text/css">
    h1{color: blue}
   </style>
  </head>
  <body>
   <h1>Здесь текст заголовка</h1>
   <p>Здесь какой нибудь абзац</p>
  </body>
</html>



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

Для этого используется элемент LINK, который имеет три основных атрибута:
rel - умные люди говорят, что это тип соединения, когда я спросил что под этим понимать, мне сказали "Для таблиц пиши stylesheet и не парься". Пишу вот теперь и не парюсь.
href - ну это нам знакомо. Здесь надо указать ссыку на файл со стилями.
type - это тип присоединяемого элемента, для табоицы стилей это text/css.
В примере это выглядит вот так:
<html>
  <head>
   <title>Второй опыт CSS</title>
   <link rel="stylesheet" href="Связанный стиль.css" type="text/css">
  </head>
  <body>
   <h1>Здесь текст заголовка</h1>
   <p>Здесь какой нибудь абзац</p>
  </body>
</html>


Содержимое файла Связанный стиль.css:

h1 {
color: #000080;
font-family: Arial, Verdana, sans-serif;
text-align: center;
}
p {
padding-left: 20px;
}


Итог выглядит вот так:

Итог.

Говорят, что в CSS более 100 свойств, которые можно применять к странице. Жесть конечно. Завтра я начну разбирать CSS более подробно, так что ждите чего нибудь нового и красивого)
До завтра, друзья.

суббота, 25 августа 2012 г.

День 19. Умничаем.

Ну для начала вот:

<html>
<head>
<title>Форма регистрации</title>
</head>
<body>
<h2 align="center">Уважаемый пользователь, заполните, пожалуйста,<br/> регистрационную анкету!</h2>
<form>
<fieldset>
<legend align="center"> Персональные данные</legend>
<table>
<tr><td align="center" width="50%">Фамилия: <input type="text" maxlength="20" /> <br/>
Имя: <input type="text" maxlength="20" size="26" /> <br/>
Отчество: <input type="text" maxlength="20" /> <br/></td>
<td align="left">Дата рождения
<select size="1">
<option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option>
<option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option>
<option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option>
<option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option>
<option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option>
<option>31</option>
</select>
<select>
<option>Январь</option><option>Февраль</option><option>Март</option><option>Апрель</option><option>Май</option>
<option>Июнь</option><option>Июль</option><option>Август</option><option>Сентябрь</option><option>Октябрь</option>
<option>Ноябрь</option><option>Декабрь</option>
</select>
<select>
<option>2000</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option>
<option>2005</option><option>2006</option><option>2007</option><option>2008</option>
<option>2009</option><option>2010</option>
</select></br>
Ваш пол<Input type="radio" name="Gender" id="M"/><label for="M">М</label><Input type="radio" name="Gender" id="W"/><label for="W">Ж</label>
</td></tr>
</table>
</fieldset>
<fieldset>
<legend align="center">Деятельность</legend>
Укажите вашу профессию:
<select>
<optgroup label="Медицина">
<option>Хирург</option>
<option>Стоматолог</option>
<option>Терапевт</option>
<option>другое...</option>
<optgroup label="Преподавательство">
<option>Учитель истории</option>
<option>Учитель физики</option>
<option>Учитель математики</option>
<option>Другой учитель)</option>
</select> </br>
Укажите ваше хобби: <input type="text" size="50"/>
</fieldset>
<fieldset>
<legend align="center">Контактные данные</legend>
Город: <input type="text" size="53"/></br>
Телефон: <input type="text" size="50"/></br>
Email:<input type="text" size="55"/></br>
</fieldset>
<input type="reset" value="Сбросить">
<input type="submit" value="Отправить">
</form>
</body>
</html>


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


Ладно, сегодня поговорим о валидации.

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

Что это такое?

Это, скажем так, некая проверка кода страницы на соответствие общепринятым стандартам.
Есть некие правила, в соответствии с которыми должен писаться код, называются эти правила спецификацией, разрабатывает их W3C. И в общем то это это здорово, что есть какие то правила, что хоть в какой-то области знаний возникает систематизация, так ведь?

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

Итог.

Валидация это совершенно неоднозначная вещь, которая, по-моему, абсолютно необходима. W3C, разработчики браузеров могут спорить, вступать друг с другом в противоречие, но работа разработчиков сайтов, на мой херовенький взгляд, станет проще и понятнее, если они будут придерживаться спецификаций. Это поможет упростить код, добиться максимальной "читабельности", элементарно перестать им сраться друг с другом из за того, чей код круче! Сделал валидный код - молодец, сделал невалидный код - иди делай валидный.
У каждого человека, разработчика, организации может быть свой взгляд на вопрос валидации.
И я свой выбор сделал. Впредь, я буду стараться использоваться только валидные и неустаревшие теги.
До завтра, друзья.

пятница, 24 августа 2012 г.

День 18. Самостоятельность.

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

четверг, 23 августа 2012 г.

День 17. Появилась идея.


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

Итак.

Для создания списков используется элемент SELECT. Он имеет два атрибута : size и multiple. Первый отвечает за количество элементов, видимых на экране по умолчанию. Если size равен 1, а элементов больше, чем 1, то появится раскрывающийся список.
Если size больше 1, а количество элементов больше, чем size, то появится окно с полосой прокрутки, если меньше - то в окне будет пустое поле.
Атрибут же multiple позволяет выбрать в одном списке несколько элементов при нажатой клавише Ctrl.
Сами элементы списка указываются внутри элемента OPTION.
Вот пример:

<html>
  <head>
   <title>Списки</title>
  </head>
  <body>
   <form>
    Место проживание:
  <select type="radio" name="Reg_place" size="1"><br/>
   <option value="SPb">Санкт-Петербург</option>
   <option value="Mos">Москва</option>
   <option value="Ekb">Екатеринбург</option>
   <option value="Nsk">Новосибирск</option>
  </select></br>
   Профессия:<br/>
  <select name="Reg_job[]" size="4" multiple="multiple">
   <option value="Journ">Журналистика</option>
   <option value="Progr">Программирование</option>
   <option value="Sport">Спорт</option>
   <option value="Issk">Исскуство</option>
   <option value="Med">Медицина</option>
  </form>
 </body>
</html>


А еще можно систематизировать элементы в списке.

Для этого используется элемент OPTGROUP, у него всего один атрибут label, в нем собственно и указывается имя заголовка группы.
Пример позволит вам разобраться с этим подробнее:

<html>
  <head>
   <title>Списки с заголовками</title>
  </head>
  <body>
   <form>
    Место проживания:
    <select name="Reg_place" size="1">
    <optgroup label="Россия">
     <option value="SPb">Санкт-Петербург</option>
     <option value="Mos">Москва</option>
     <option value="Ekb">Екатеринбург</option>
     <option value="Nsk">Новосибирск</option>
    <optgroup label="Франция">
     <option value="Par">Париж</option>
     <option value="Lion">Лион</option>
     <option value="Mars">Марсель</option>
     <option value="Tul">Тулуза</option>
    <optgroup label="США">
     <option value="Wash">Вашингтон</option>
     <option value="New">Нью-Йорк</option>
     <option value="Orl">Орландо</option>
     <option value="Det">Детройт</option>
    </select><br/>
   </form>
  </body>
</html>



И, наконец, сегодня я изучил элемент LABEL, который позволил улучшить мне мои вчерашние флажки. Для того, чтобы им воспользоваться необходимо установить атрибут id элемента INPUT, в качестве значения которого может быть все, что угодно, но лучше какое нибудь кодовое сочетание букв, а затем установить это же самое значение для атрибута for элемента LABEL. Для тех, кто не понял - пример:
<html>
 <head>
  <title>Флажки</title>
 </head>
 <body>
  <form>
   Любимые фильмы:</br>
   <input name="Films[]" type="checkbox" id="Mol"/><label for="Mol">Молчание ягнят</label><br/>
   <input name="Films[]" type="checkbox" id="Bur"/><label for="Bur">Приключения Буратино</label><br/>
   <input name="Films[]" type="checkbox" id="Vlast"/><label for="Vlast">Властелин колец</label><br/>
   <input name="Films[]" type="checkbox" id="Gar"/><label for="Gar">Гарри Поттер</label><br/>
   <input name="Films[]" type="checkbox" id="Vod"/><label for="Vod">Воды слонам</label><br/>
   <input name="Films[]" type="checkbox" id="Opust"/><label for="Opust">Опустевший город</label><br/>
   <input name="Films[]" type="checkbox" id="Avst"/><label for="Avst">Австралия</label><br/>
   <input name="Films[]" type="checkbox" id="ohota"/><label for="ohota">Охота на уток</label><br/>
  </form>
 </body>
</html>


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

Итог.

Развиваемся, однако.
До завтра, друзья.

среда, 22 августа 2012 г.

День 16. Очень круто. Только не работает.

Ребят, меня стало напрягать то, что я изучаю-изучаю, а толку от этого немного. Я ВЕДЬ ВСЕ РАВНО НЕ МОГУ НАПИСАТЬ ОБРАБОТЧИК ДЛЯ СВОИХ КРУТЕЙШИХ ФОРМ!!! Серьезно, это все равно, что выращивать бриллианты, но не иметь прибора, который бы их отковыривал от подложки.(Ну может я льщу себе конечно, но суть вы уловили). Ладно, придет время, решу эту проблему.

А пока создадим переключатели.

Переключатели - это те самые кружочки, в которые мы тыкаем, желая отметитиь ОДИН,подходящий нам, ИЗ НЕСКОЛЬКИХ нам же предложенных вариантов. Для того, чтобы сделать переключатель нужно в качестве значения атрибута type элемента INPUT задать radio. Для того чтобы в рамках одной группы вы могли выбрать только один вариант ответа нужно для всех элементов этой группы задать одинаковое имя в атрибуте name. Есть еще атрибут value, который передает выбранное значение долбаному обработчику. Если в среди вариантов есть какой-то, выбор которого наиболее вероятен, тогда можно использовать атрибут checked, он поставит для элемента с этим атрибутом изначально активное положение.
Пример переключателей:
<html>
 <head>
  <title>Переключатели</title>
 </head>
 <body>
  <form>
Ваш пол:<input name="Gender" type="radio"/>Мужской<input name="Gender" type="radio"/>Женский<br/>
Ваш возраст:<input name="Age" type="radio"/>До 18<input name="Age" type="radio"/>18-25<input name="Age" type="radio"/>25-40
   <input name="Age" type="radio"/>Не помню</br>
  </form>
 </body>
</html>




Флажки.

Флажки можно применять аналогично переключателям, только для каждого вопроса можно выбрать несколько вариантов ответа.
Здесь есть существенный момент: в переключателях обработчику передавалось только одно выбранное значение, двух и более быть не могло. Здесь же в качестве ответа на один и тот же вопрос может быть выбрано несколько ответов, соответственно и обработчику их будет передаваться несколько. То есть несколько значений одновременно будут определены для одной и той же переменной. Тут не нужно быть осведомленным программистом, а достаточно вспомнить математику, где для линейных уравнений переменная имела только одно значение. А у нас их несколько. Как быть? А нужно в качестве значения name задать не просто имя
переменной в обработчике(строго говоря это задача программиста, наверное), а массив перменных. Есть такая штука в языках программирования, кому интересно, можете поинтересоваться. Для нас вся разница сводится к тому, что к имени переменной
добавляются[]. Думаю этого пояснения пока будет достаточно.
Значение type для флажков - checkbox. В остальном нет существенной разницы между переключателями и флажками.

Пример:

<html>
 <head>
  <title>Флажки</title>
 </head>
 <body>
  <form>
Любимые фильмы:</br><input name="Films[]" type="checkbox"/>Молчание ягнят<br/>
   <input name="Films[]" type="checkbox"/>Приключения Буратино<br/>
   <input name="Films[]" type="checkbox"/>Властелин колец<br/>
   <input name="Films[]" type="checkbox"/>Гарри Поттер<br/>
   <input name="Films[]" type="checkbox"/>Воды слонам<br/>
   <input name="Films[]" type="checkbox"/>Опустевший город<br/>
   <input name="Films[]" type="checkbox"/>Австралия<br/>
   <input name="Films[]" type="checkbox"/>Охота на уток<br/>
  </form>
 </body>
</html>


Поел(найдите ошибку в слове) для выбора файла.

Ну это вообще нереальное что-то. Я когда сделал, я чуть не помер от того, какой я крутой(правда я через 15 минут узнал, что наши ученые создали мины(мины, которые на земле) для вертолетов(а они так-то в воздухе) и чуть-чуть мой пыл поубавился).
Так или иначе поле это создается достаточно просто. Для атрибута type назначаете значение file и все.
Ну можно еще длину поля установить с помощью атрибута size.
Пример:
<html>
 <head>
  <title>Загрузка файлов</title>
 </head>
 <body>
  <form>
   Ваше фото:<input name="Reg_photo" type="file">
  </form>
 </body>
</html>


Итог дня.

Зла не хватает. До завтра, друзья.

вторник, 21 августа 2012 г.

День 15. Формы. Без фреймов. Только формы.

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

Основным атрибутом является атрибут action. Именно он указывает на обработчик данных
для формы. Название файла-обработчика будет являться значением для атрибута action. Но вы
помните, что такого файла у нас нет, поэтому для проверки работоспособности наших форм мы
будем использовать в качестве значения адрес электронной почты, указав перед ним ключевое
слово mailto. После того, как форма будет заполнена и мы нажмем на кнопку отправить, откроется почтовый клиент и вроде бы нам должны предложить отправить на заданную электронную почту письмо с данными.
Неудобно? неудобно. Зато сможем проверить работает ваще наша форма или не работает.

Есть еще важный атрибут enctype. Он сообщает тип объекта, который отправляется вместе с формой.
Например, вы можете фотографию свою отправлять, а это уже не просто текст вам натыкивать.
Вообще, в качестве значения атрибута enctype должен быть MIME-тип объекта, пересылаемого вместе с формой.

Коли мы заговорили, что формы че-то куда-то отправляют(реально они отправляют данные на сервер, наверное), то важным становится способ отправки. Он задается атрибутом method, который может иметь два значения - get и post. Get отправляет текстовую информацию через адресную строку. Вы наверняка видели как у вас в браузере, после нажатия на ссылку, в адресной строке появляется длиннюююющая запись в которой много & и ?.
Вот это и реализуется метод get.
Метод же post передает большие объемы информации, данные содержатся не в строке, а в сообщении, который пересылает компьютер на сервер.

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

СОЗДАНИЕ ПОЛЕЙ ФОРМ.


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

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

Для определения поля как поля пароля(смешно звучит, правда?)))))), нужно в качестве значения атрибута type задать password.
Тогда текст, который мы вводим, будет отображаться не символами, а точками или звездочками.
Еще есть полезный атрибут value, который задает значение по умолчанию для поля. Это полезно, т.к. с его помощью можно поставить в поле пример заполнения и человек, которму нужно заполнить форму, сможет это делать как бы по образцу.
А это калево.

Вот вам пример:
<html>
 <head>
  <title>Простая форма</title>
 </head>
 <body>
  <form action="mailto:alexeyhan@ya.ru" enctype="text/plain" method="post" name="simpleform" target="_blank">
Имя:<input type="text" name="Reg_name" value="Ваше имя"/><br/>
Фамилия:<input type="text" name="Reg_surname" value="Ваша фамилия"/><br/>
Отчество:<input type="text" name="Reg_patronym" value="Ваше отчество"/><br/>
Введите логин:<input type="text" name="Reg_login"/><br/>
Пароль:<input type="password" name="Reg_pass"/><br/>
  </form>
 </body>
</html>



Форма с кнопками:
Без кнопок то и форма не форма. Как же люди будут нам отправлять готовые формы нам, если у них некуда тыкнуть даже для этого.
Чтобы тыкать было куда нужно придать атрибуту type значение submit для выполнения того, что написано в action,
либо reset, чтобы сбросить все к чертовой бабушке.
С помощью атрибута value можно задать надпись, отображаемую на кнопке.
Пример формы с кнопками:
<html>
 <head>
  <title>Простая форма</title>
 </head>
 <body>
  <form action="mailto:alexeyhan@ya.ru" enctype="text/plain" method="post" name="simpleform" target="_blank">
Имя:<input type="text" name="Reg_name" value="Ваше имя"/><br/>
Фамилия:<input type="text" name="Reg_surname" value="Ваша фамилия"/><br/>
Отчество:<input type="text" name="Reg_patronym" value="Ваше отчество"/><br/>
Введите логин:<input type="text" name="Reg_login"/><br/>
Пароль:<input type="password" name="Reg_pass"/><br/>
   <input type="submit" name="submit" value="Отправить данные">
   <input type="reset" name="reset" value="Сбросить данные">
  </form>
 </body>
</html>

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

Итог

Формы - клевые. Серьезно. Это очень полезная вещь.
До завтра, друзья.

понедельник, 20 августа 2012 г.


День 14. Фреймы-формы.


Закончил я работу со фреймами. Не без обиды за потраченное время, должен я вам сказать. Как оказалось, создавать сайты на основе фреймов-моветон, никто так не делает. Почему? Мне сложно судить, я пока не заметил, да и не мог заметить, каких – то особенных неудобств или недостатков. Вероятно есть в них что-то такое отталкивающее, раз их использование выбрасывает человека из рядов Homo Programikus.

Но давайте все таки рассмотрим последнюю из рассмотренных мною возможностей использования фреймов – плавающие фреймы.

Плавающие фреймы можно использовать внутри <body>, в любом месте страницы. То есть с их помощью можно добавлять любые независимые элементы на страницу, по сути обходя фреймовый механизм страницы.
Добавляется плавающий фрейм с помощью элемента IFRAME, которому необходим  закрывающий тег. Также к этому элементу применимы атрибуты width, height, hspace, vspace, align. Значения для этих атрибутов и их назначение полностью совпадает с соответствующими атрибутами элемента IMG.


Вот пример

<html>
 <head>
  <title>Плавающий фрейм</title>
 </head>
 <body>
  <iframe width="20%" height="20%" hspace="10" vspace="10" align="left">
   <p>Это плавающий фрейм такой!</p> 
  </iframe>
  <h1>Сибирь выиграла предсезонный турнир в Финляндии!</h1>
  <p>C 16 по 18 августа в Финляндии прошел предсезонный турнир. Несмотря на то, что в турнире принимали участие четыре команды, турнир
проходил в два круга.В соперники нашей "Сибири" достались ХК Сайпа и ХПК. В первом матче, который наши хоккеисты прводили с ХК Сайпа,
проигрывая по ходу матча со счетом 1:3, наши хоккеисты проявили силу характера и вырвали победу по буллитам со счетом 4:3.
Уже на следующий день нашим ребятам пришлось играть в финале турнира с ХПК, который также по буллитам накануне обыграл Пеликанс.
В интереснейшем матче нашим хоккеистам удалось одолеть соперника со счетом 2:0 и завоевать кубок турнира</p>
 </body>
</html>
Как вы видите - ничего особенного в этом нет, полезно исключительно для ознакомления.


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


Формы!!!




Так, с чего бы тут начать... Начну с пояснения о своей осведомленности. Понимаете, друзья, я далек от всего, что связано с программированием, поэтому мне нелегко подбирать те или иные формулировки. Тем не менее это еще хоть как-то удавалось сделать, когда я описывал принципы и основы HTML. Но сейчас вот дела обстоят так, что последующие области и аспекты HTML, а точнее его прикладное использование жестко связано с языками программирования, типа PHP или Pеrl, а здесь я, как вы понимаете, не силен.

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

 Поэтому я остаюсь верным выбранной стратегии в освоении WEB-создания, просто для объяснения некоторых моментов, а точнее моего понимания этих моментов, я буду использовать «воздушные замки», ни на чем не основанные аргументы и образы. Простити.

Итак, что же такое формы.

Те из вас, кто может быть когда нибудь видел MS Access, то понятие формы не будет новым. В общем виде это инструмент взаимодействия вас с сайтом. Вот когда вы пишите в контакте сообщение – это форма. Когда вы регистрируетесь на форме каком нибудь – это вы тоже работаете с формой. Ставите галочки, пишите логин-пароль – все это делается с помощью форм.

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

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

Это был странный день.

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


До завтра друзья)

воскресенье, 19 августа 2012 г.

День 13. Убираем тело.

Сегодня я весь день просидел на форумах, прообщался с людьми, которые вроде бы хоть что-то понимают в создании сайтов, и получил от них настоятельную рекомендацию изучить работу со фреймами(на тот момент я довольно слабо представлял себе что это такое). Ну что ж, фреймы значит фреймы.
Фреймы - это элементы HTML, позволяющие разделить страницу на несколько независимых окон. В каждый их фреймов можно поместить свою страницу, на которой может находиться ссылка из одного окна в другое. В основном они применяются для организациии постоянно находящихся на экране меню, в то время как в другом окне будет располагаться само содержимое. Ярким примером такой структуры может быть всеми нами любимый ВКонтакте.
Также с помощью фреймов можно фиксировать на страницах логотипы, графику и т.д.
Чтобы страница содержала фрейм необходимо пару тегов <body> </body> заменить на <frameset>  </frameset> . Для элемента FRAMESET нужно указать значения для атрибутов cols и rows, иными словами сказать браузеру на сколько частей делить окно. В качестве значений для этих атрибутов нужно указать не количество фреймов, а их размеры. При этом пользоваться можно тремя способами задания этих самых размеров:
  1. Первый способ. Самый неудобный и ваще забудьте про него. Это простое задание размеров фрейма в пикселях. То есть запись будет иметь вид типа: cols="100, 210, 70" rows="58,140,89". Это очень неудобно, потому что разные браузеры имеют разные размеры окон, раз, разные пользователи имею разные размеры мониторв, два. Так что ну не получится сделать таким образом сайт универсально читабельным.
  2. Второй способ. Указать размеры в процентах. Это ваще крутой способ. Просто укажите в процентах от окна браузера ширины и высоты каждого фрейма и вуа-ля. Только следите чтобы в сумме по ширине и высоте у вас набралось сто процентов. То есть запись должна быть примерно такая: cols="30%,40%",30%"  rows="30%,70%".
  3. Третий способ. Это если вам нужно, чтобы один или два фрейма были фиксрованных размеров, а остальное да и хрен с ним. Тогда просто укажите запись такую вот:  cols="30%,*"   rows="*,70%" , где знак * обозначает "Все остальное место". Как будет выглядеть картина в окне, заданная этими двумя строками проверьте сами.

Еще уточнение: вам совсем не обязательно указывать оба атрибута, ведь окно можно делить всего на два фрейма.
Пример:
<html>
 <head>

  <title>Страница с фреймами</title> 
 </head>
 <frameset cols="45%,*" rows="30%,*" frameborder=0>
  <frame src="Вложенный список.htm">
  <frame src=Волейбол.jpg>
  <frame src="заголовки со стилями.htm">
  <frame src="заголовки без стилей.htm">
 </frameset>
</html>
 
Как видите в каждый из фреймов с помощью атриба src вписан либо документ, либо изображение, но в общем-то не налагается никаких ограничений на содержание фрейма.

После того, как вы сделаете себе страницу со фреймами, вы увидите, что между ними есть границы, которые вы можете двигать меняя размеры фреймов. 
Если же вам границы не нужны совсем, то испoльзуйте атрибут frameborder элемента FRAMESET. В качестве его значений нужно указать либо 1, либо yes, если вам границы нужны,  либо 0, либо no, в обратном случае.
Только тут учтите, что разные браузеры воспринимают разные значения для этого атрибута, поэтому для страховки указывайте оба значения(0 и no, или 1 и yes).
Также при работе с границами можно использовать все атрибуты, применяемые для границ в таблицах. 
Пример того же окна, но без границ.
<html>
 <head>
  <title>Страница с фреймами</title>
 </head>
 <frameset cols="45%,*" rows="30%,*" frameborder=0>
  <frame src="Вложенный список.htm">
  <frame src=Волейбол.jpg>
  <frame src="заголовки со стилями.htm">
  <frame src="заголовки без стилей.htm">
 </frameset>
</html> 

Здесь нет границ, а значит и нет возможности менять размер окон, что в принципе и бывает необходимо.
Обратите внимание, что картинка не помещается в окно фрейма, а соответственно для этого фрейма в обоих примерах появляются полосы прокрутки, наличие или отсутствие которых можно регулировать с помощью атрибута scrolling
Yes - всегда вызывает полосы прокрутки, независимо от того, нужны они или нет.
No  никогда не вызывает полосы прокрутки, независимо от того, нужны они или нет.
Auto - полосы отображаются при необходимости(это значение стоит по умолчанию)
<html>
 <head>
  <title>Страница с фреймами</title>
 </head>
 <frameset cols="45%,*" rows="30%,*" frameborder=0 >
  <frame src="Вложенный список.htm">
  <frame src=Волейбол.jpg scrolling="no">
  <frame src="заголовки со стилями.htm">
  <frame src="заголовки без стилей.htm">
 </frameset>
</html>

Это пример использования scrolling'а, где намерено убраны полосы прокрутки для фрейма с изображением, которое не поместилось во фрейм.

Усе.

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


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

пятница, 17 августа 2012 г.


День 12. Музыкальная шкатулка.


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




Атрибут classid указывает адрес программы, которая будет обрабатывать объект. В принципе можно указывать абсолютный либо относительный адрес программы, но тут возникает такая проблема, что ведь ни у каждого посетителя наших крутейших сайтов нужные программы установлены в одном и том же месте. Соответственно, нужен какой–то такой инструмент, который позволил бы сказать браузеру какую программу нужно запустить. Делать это по имени неудобно, файлы могут быть переименованы, поэтому у каждой лицензированной программы есть код-идентификатор, который можно вводить  в качестве значения для classid, только предварительно нужно указать ключевое слово CLSID, как ниже в примере. Идентификаторы для различных программ запросто можно найти в интернете, так что не волнуйтесь.
Атрибут codetype предназначен для указания типа файла(говоря в общем, там должен быть указан какой-то MIME-тип, что это и где это узнать я разберусь позже, а может быть вы мне подскажите ).
Второй немаловажный элемент для встройки аудио , это PARAM. Парам – парам- пам –пам. Шутка.  На самом деле это сокращение от Parametr, вроде.  Он указывает параметры проигрывателя, который будет воспроизводить файл. У него есть два основных атрибута name и value. Первый задает параметр, который будет установлен, а второй задает его значение.
Для этих атрибутов есть множество возможных значений, с которыми вы можете ознакомиться здесь.


Встраивание аудио.


Давайте же перейдем к примеру. Вот код:

<html>
 <head>
  <title>Встраивание аудио</title>
 </head>
 <body>
  <object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codetype="audio/mp3" />
   <param name="filename" value="Sleep Away.mp3" />
   <param name="autostart" value="false" />
  </object>
 </body>
</html>




Здесь 22D6F312-B0F6-11D0-94AB-0080C74C7E95 это идентификатор Windows Media Player'а, а параметры ширины и высоты определяют соответствующие размеры проигрывателя в окне.

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




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

Музыка фоном.


А вот если взять и указать размеры проигрывателя нулевыми, то получите играющую фоном музыку. А чтобы музыка не останавливалась и играла не один раз, использован элемент PARAM c соответствующими атрибутами: playcount разрешает повтор музыки столько раз, сколько вы укажете в качестве значения для value

<html>
 <head>
  <title>Фоновая музыка</title>
 </head>
 <body>
  <object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codetype="audio/mp3" width="0" height="0">
   <param name="filename" value="Sleep Away.mp3" />
   <param name="autostart" value="true" />
   <param name="playcount" value="10" />
  </object>
 </body>
</html>

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

Дома. 

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


четверг, 16 августа 2012 г.

Ошибаются все, даже "святые".

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

Несколько дней назад я написал о том, что такое таблицы, зачем они нужны и как с ними работать. И вот сегодня один мой знакомый, квалифицированный программист, сообщает мне, что я совсем неправильно, а точнее черезчур буквально понял все то, о чем рассказал вам.
Чтобы больше не вводить вас в заблуждение по этому вопросу, привожу целиком его сообщение: 
"Леха, ты в своем блоге ошибку допускаешь: ты неправильно воспринял слово таблицы в контексте компоновки и разработки страницы, и оно не означает элемент <table>. Эквивалент же правильного значения в английском языке является Grid, что правильней переводить как сетка. Чуть подробнее я написал об этом в коментариях к посту, где впервые упоминались таблицы."

И вот тот самый комментарий:

"Эм, табличный макет ты воспринял слишком буквально. Верстать на таблицах сейчас считается моветоном и их применяют лишь в тех случаях когда они действительно необходимы. Во всех остальных случаях используются блочные элементы со специальными стилями. Помимо этого, ввиду унификации, размеры колонок и отступы между ними рекомендуется делать строго определенными. Ну и, что бы не изобретать велосипед, существуют уже готовые стили элементов, находящиеся в свободном доступе. Одним из таких является http://960.gs/

По поводу экзотических шрифтов. Используемый шрифт не обязательно должен быть установлен у пользователя, поскольку сервер может отдавать легковесную версию шрифта, которая вполне воспринимается браузером. Для генерации таких версий и сопутствующего к ним кода можно воспользоваться http://www.fontsquirrel.com/ . Так же сервером может быть даже Google, если воспользоваться его сервисом веб шрифтов http://www.google.com/webfonts/ . Ну и, помимо этого, атрибут face может воспринимать несколько параметров. То есть шрифты будут применяться по порядку: если не найден первый по списку, то будет применен второй, а если же и он не был найден, то третий и так далее по порядку.
"

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

Всё, переходим к новым штукам.

День 11. Картина мира.

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

Элемент  IMG.

Этот элемент применяется для включения изображения в страницу.  Хотя, если сказать точнее, он говорит о том, что сейчас изображения будет включено, а непосредственно включение производит атрибут src, в качестве значения которого нужно указать адрес расположения картинки на вашем компьютере. При этом, как выяснилось, нет необходимости указывать абсолютный адрес вашей картинки, если картинка и документ страницы лежат в разных местах, что в принципе было бы логично. Вместо полного адреса достаточно указать относительный адрес расположения картинки, сделав это в формате ../IMG.jpg, где символы ../ обозначают переход на более высокий уровень в иерархии каталогов. Например, если картинка лежит у вас по адресу  C:\Users\Сашенька\Desktop\365.WEB 16.08.2012\IMG, а документ страницы по адресу   C:\Users\Сашенька\Desktop\365.WEB 16.08.2012\papka, то для того чтобы включить картинку из паки IMG в документ лежащий в папке papka, достаточно использовать следующую запись :
src="../IMG/Тут название картинки.jpg".

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

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB">
  <head>
   <title>Изображения</title>
  </head>
  <body>
   <img title="Коала" src="../IMG/Koala.jpg" width="200"/>
  </body>
</html>



Как вы видите, по отношению к элементу IMG можно применять атрибут  title для создания всплывающей подсказки. Атрибут же width  работает так же, как и в таблицах.(Разумеется, по отношению к рисункам может использоваться и атрибут height, просто его не рекомендуют использовать вместе с width, т.к. можно испортить пропорции картинки).

Совмещение картинки и текста.

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

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

·         Top – для выравнивания верхней границы рисунка по самому верхнему элементу строки
·         Texttop - для выравнивания верхней границы рисунка по самому верхнему элементу текста
·         Middle – центр изображения выравнивается по базовой линии строки
·         Absmiddle – центр изображения выравнивается по середине строки
·         Baseline – нижняя граница изображения выравнивается по базовой линии строки
·         Bottom - аналогично
·         Absbottom – нижняя граница изображения выравнивается  по нижней границе текущей строки.

Здесь есть интересный момент. Базовая линия – это линия на которой расположены все элементы строки. При этом некоторые буквы, например, «р» выступают за эту линию, при этом эта вот палочка у буквы «р» выступает за эту линию и ее окончание и будет нижней линией строки. А заглавные буквы, наоборот, кстати, выступают вверх за нее.

Давайте посмотрим пример:
<html title="365.WEB">
  <head>
   <title>Изображения</title>
  </head>
  <body>
   <img src="../IMG/Koala.jpg" align="right" width="200" />
Текст написанный при горизонтальном выравнивании должен плотно обтекать картинку однако этого не происходит по непонятным мне причинам. Однако, после того, как я сделал, честно признаться
непонятно что, текст вроде бы начал отображаться корректно. Сейчас проверим прав ли я. Да я прав, Мишаня гений, он предположил,
  что браузер при обработке текста не знает как переносить слова по слогам, в том случае, когда строка кончилась, а слово не дописано в ней.
  </body>
</html>
Текст, записанный в коде имеет колоссальное значение для понимания, по крайней мере для меня, так что не поленитесь, а прочитайте эту несуразицу.


Вместо отступа можно использовать рамку, с ней, по моему, даже как-то красивей)



<html title="365.WEB">

  <head>

   <title>Изображения</title>

  </head>

  <body>

   <img src="../IMG/Koala.jpg" align="right" width="200" border="20" />

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

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

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

  </body>

</html>




Домашнее задание.

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