365.WEB-программирование

пятница, 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. Самостоятельность.

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

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

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

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

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

Итог.

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

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

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

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

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

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

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

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

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

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

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

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

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

Итог

День 20. Welcome to CSS

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

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

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

Итог.

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

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

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

Итог.

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

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

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

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

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

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

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

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