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

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

День 10. Юбилей? Нет, день рождения.

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

Сегодня я рассмотрел три важных возможности в работе с таблицами.

Объединения ячеек.

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

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

Для объединения ячеек используются атрибуты rowspan для объединения ячеек по вертикали, colspan – для объединения ячеек по горизонтали. Эти атрибуты следует применять к элементам TR и TH, в зависимости от того, какого типа ячейки нам нужно объединять. В качестве значений для этих атрибутов указывают количество объединяемых ячеек. Прежде чем переходить к примеру, одно замечание: когда вы будете проектировать и создавать собственные таблицы, нарисуйте их сначала на бумаге, по крайней мере мне с визуальной картинки «перерисовывать» таблицу кодом, гораздо проще и нагляднее.

Вот код таблицы, в которой некоторые ячейки были объединены:

<! 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>
<meta http-equiv="content-type" content="text/html" charset="windows-1251">
</head>
<body>
<table style="color:blue" border="3" bordercolor="blue" cellspacing="0" cellpadding="5" align="center" valign="middle">
<tr><th colspan=3>Ячейка во всю длину</th></tr>
<tr><td rowspan=2>Ячейка на две строки</td><td>Ячейка22</td><td>Ячейка23</td>
<tr><td>Ячейка32</td><td>Ячейка33</td></tr>
<tr><td rowspan=2>Ячейка на две строки</td><td>Ячейка42</td><td>Ячейка43</td>
<tr><td>Ячейка52</td><td>Ячейка53</td></tr>
</table>
</body>
</html>

И результат работы кода:

Анализ кода даст вам ответы на все ваши вопросы.

Установка фона ячеек.

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

Цвет фона задается атрибутом bgcolor элементов TR, TH, и TD. Значение атрибута bgcolor задается обычным уже для нас(ЕЕЕЕЕЕЕЕЕ!)способом.

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

<! 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>
<meta http-equiv="content-type" content="text/html" charset="windows-1251">
</head>
<body>
<table style="color:blue" border="3" bordercolor="blue" cellspacing="0" cellpadding="5" align="center" valign="middle">
<tr><th colspan=3 bgcolor="red">Ячейка во всю длину</th></tr>
<tr><td rowspan=2 bgcolor="grey">Ячейка на две строки</td><td>Ячейка22</td><td>Ячейка23</td>
<tr><td>Ячейка32</td><td>Ячейка33</td></tr>
<tr><td rowspan=2>Ячейка на две строки</td><td>Ячейка42</td><td>Ячейка43</td>
<tr><td>Ячейка52</td><td>Ячейка53</td></tr>
</table>
</body>
</html>

Результат:

Понятно? Не слышу. Понятно? Вот так то.

Вложенные таблицы.

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

То же самое касается и элементов таблицы, а это значит, что мы можем создавать «таблицы в таблице», так называемые вложенные таблицы.

Вот вам пример такой таблицы:

<! 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>
<meta http-equiv="content-type" content="text/html" charset="windows-1251">
</head>
<body>
<table border="3" cellspacing="0" cellpadding="5" align="center" valign="middle">
<tr><td>Ячейка 11</td><td>Ячейка12</td><td>Ячейка13</td><td>Ячейка14</td></tr>
<tr><td colspan=4>
<table border="3" cellspacing="0" cellpadding="5" align="center" valign="middle">
<tr><th>Заголовок 1</th><th>Заголовок2</th><th>Заголовок3</th>
<tr><td>Ячейка1</td><td>Ячейка2</td><td>Ячейка3</td></tr>
</table>
</td></tr>
</table>
</body>
</html>

Такая вот вещчь:

Здесь нет никаких новых элементов или атрибутов, просто внутрь одной таблицы «вложили» другую мы.

Домашняя работа.

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

До встречи, друзья.

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

День 9. Границы возможного.

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

Атрибут border.

Для тех, кто в танке, говорю - за границы таблицы отвечает атрибут border элемента TABLE. Если точнее он отвечает за толщину линий внешних границ. Давайте посмотрим вчерашний пример, внеся в него границу.
<!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 >
<table border="4">
<caption>Медали сборной России</caption>
<tr><th>Золото</th><th>Серебро</th><th>Бронза</th></tr>
<tr><td>24</td><td>25</td><td>29</td></tr>
</table>
</body>
</html>

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

Атрибут bordercolor.

Этот атрибут отвечает за цвет границы. Здесь следует быть внимательным. На одном из моих компьютеров стоит старая версия Oper'ы и вот она неккоректно отображает цвет границы, на остальных браузерах и текущей версии Oper'ы такой ерунды не наблюдал.
В качестве значения для этого атрибута нужно внести либо английское название цвета(red, blue, green и т.д.), либо его код из таблицы цветов.
Давайте теперь внесем этот атрибут в код и полюбуемся.
<!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 >
<table border="4" bordercolor="red">
<caption>Медали сборной России</caption>
<tr><th>Золото</th><th>Серебро</th><th>Бронза</th></tr>
<tr><td>24</td><td>25</td><td>29</td></tr>
</table>
</body>
</html>

Атрибуты frame и rules.

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

above-отображается только верхняя линия границы
below-видна только нижняя линия границы
box-отображается вся анешняя граница
border-аналогично
hsides-отображаются только горизонтальные линии
lhs-только левая граница
rhs-только правая граница
void-ваще без границ таблица
vsides-видны только вертикальные линии

Атрибут rules принимает значения:

all-отображаются все внутренние границы
cols-только вертикальные линии между столбцами
groups-отображаются только вертикальные и горизонтальные линии между группами строк и столбцов(завтра расскажу)
none-не отображаются границы
rows-видны только горизонтальные границы между строками

Учтите при использовании, что эти атрибуты новые, для их отображения нужны последние версии браузеров.

Дома.

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

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

День 8. Удаляем пятна.

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

Элементы для форматирования относительно больших блоков текста.

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

Элемент FONT

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

За размер шрифта отвечает атрибут size. Значение задается в относительных величинах(т.е. от 1 до 7). Можно задать значение в формате +N или -N, тогда размер текста в элементе увеличится или уменьшится на соответствующее количество пунктов N, относительно остальной страницы.

Элемент BLOCKQUOTE

Этот элемент определяет текст как цитату и задает для него отступы сверху, снизу и слева.
В принципе этот элемент не делает ничего сверхъестественного, просто имейте его ввиду.

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

Давайте рассмотрим пример:

	<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<html title="365.WEB" lang="ru">
	<head>
	<title>Проба пера</title>
	<meta http-equiv="content-type" content="text/html" charset="windows-1251" />
	</head>
	<body background="desert.jpg">
	<blockquote>
	<font color="red" face="Impact" size="5">
	Сборная России по волейболу - <font size="5">Олимпийский чемпион!!! </font>
	</font><br/>
	<font color="red" face="Segoe script" size="7">Урррррааааа!!!</font>
	</blockquote>
	</body>
	</html>

Вот итог:

Подробный анализ кода не оставит вам никаких вопросов.

Планирование страниц.

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

Элементы таблиц.

Элемент table.

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

Элемент TR, TD, TH.

Для начала нужно определится с количеством строк, а затем эти строки разделить на столбцы. Количество пар тегов <tr> </tr> и определяет количество строк, другими словами, сколько вам надо строк, столько раз и вводите эту пару.
Внутри этой пары тегов, в первой строке следует разместить столько пар тегов <th></th>, сколько планируется столбцов в таблице, внутри этих элементов напишите название столбцов, тем самым вы создадите шапку вашей новой таблицы.
Во всех же остальных строках создайте такое же количество столбцов, только парами тегов <td></td> и вы получите структуру готовой таблицы.
Давайте посмотрим пример создания таблицы:
<!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 >
<table>
<caption>Медали сборной России</caption>
<tr><th>Золото</th><th>Серебро</th><th>Бронза</th></tr>
<tr><td>24</td><td>26</td><td>32</td></tr>
</table>
</body>
</html>
И вот что получаем:

Дамашка.

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

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

День 7. Е - мае, неделя прошла уже.

И вновь в начале решение домашнего задания. Вот примерно так должен выглядеть ваш код:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="Внутренняя ссылка" lang="ru">
<head>
<meta http-equiv="content-type" content="text/html" charset="windows-1251" />
<title>365.WEB</title>
</head>
<body>
<h1>Первый проход</h1>
<ol type="1">
<li><a name="met2" href="#met1" title="Нажмите для перехода в конец документа">Причудницы большого света!</a></li>
<li>Всех прежде вас оставил он;</li>
<li>И правда то, что в наши лета</li>
<li>Довольно скучен высший тон;</li>
<li>Хоть, может быть, иная дама</li>
<li>Толкует Сея и Бентама,</li>
<li>Но вообще их разговор</li>
<li>Несносный, хоть невинный вздор;</li>
<li>К тому ж они так непорочны,</li>
<li>Так величавы, так умны,</li>
<li>Так благочестия полны,</li>
<li>Так осмотрительны, так точны,</li>
<li>Так неприступны для мужчин,</li>
<li>Что вид их уж рождает сплин. </li>
<li>И вы, красотки молодые,</li>
<li>Которых позднею порой</li>
<li>Уносят дрожки удалые</li>
<li>По петербургской мостовой,</li>
<li>И вас покинул мой Евгений.</li>
<li>Отступник бурных наслаждений,</li>
<li>Онегин дома заперся,</li>
<li>Зевая, за перо взялся,</li>
<li>Хотел писать — но труд упорный</li>
<li>Ему был тошен; ничего</li>
<li>Не вышло из пера его,</li>
<li>И не попал он в цех задорный</li>
<li>Людей, о коих не сужу,</li>
<li>Затем, что к ним принадлежу.</li>
</ol>
<h1>Второй проход</h1>
<ol type="1">
<li type="1" value="29">Причудницы большого света!</li>
<li>Всех прежде вас оставил он;</li>
<li>И правда то, что в наши лета</li>
<li>Довольно скучен высший тон;</li>
<li>Хоть, может быть, иная дама</li>
<li>Толкует Сея и Бентама,</li>
<li>Но вообще их разговор</li>
<li>Несносный, хоть невинный вздор;</li>
<li>К тому ж они так непорочны,</li>
<li>Так величавы, так умны,</li>
<li>Так благочестия полны,</li>
<li>Так осмотрительны, так точны,</li>
<li>Так неприступны для мужчин,</li>
<li>Что вид их уж рождает сплин. </li>
<li>И вы, красотки молодые,</li>
<li>Которых позднею порой</li>
<li>Уносят дрожки удалые</li>
<li>По петербургской мостовой,</li>
<li>И вас покинул мой Евгений.</li>
<li>Отступник бурных наслаждений,</li>
<li>Онегин дома заперся,</li>
<li>Зевая, за перо взялся,</li>
<li>Хотел писать — но труд упорный</a></li>
<li>Ему был тошен; ничего</li>
<li>Не вышло из пера его,</li>
<li>И не попал он в цех задорный</li>
<li>Людей, о коих не сужу,</li>
<li>Затем, что к ним принадлежу.</li>
</ol>
<h1>Третий проход</h1>
<ol type="1">
<li type="1" value="57">Причудницы большого света!</li>
<li>Всех прежде вас оставил он;</li>
<li>И правда то, что в наши лета</li>
<li>Довольно скучен высший тон;</li>
<li>Хоть, может быть, иная дама</li>
<li>Толкует Сея и Бентама,</li>
<li>Но вообще их разговор</li>
<li>Несносный, хоть невинный вздор;</li>
<li>К тому ж они так непорочны,</li>
<li>Так величавы, так умны,</li>
<li>Так благочестия полны,</li>
<li>Так осмотрительны, так точны,</li>
<li>Так неприступны для мужчин,</li>
<li>Что вид их уж рождает сплин. </li>
<li>И вы, красотки молодые,</li>
<li>Которых позднею порой</li>
<li>Уносят дрожки удалые</li>
<li>По петербургской мостовой,</li>
<li>И вас покинул мой Евгений.</li>
<li>Отступник бурных наслаждений,</li>
<li>Онегин дома заперся,</li>
<li>Зевая, за перо взялся,</li>
<li>Хотел писать — но труд упорный</a></li>
<li>Ему был тошен; ничего</li>
<li>Не вышло из пера его,</li>
<li>И не попал он в цех задорный</li>
<li>Людей, о коих не сужу,</li>
<li><a name="met1" href="#met2" title="Нажмите для перехода в начало документа">Затем, что к ним принадлежу.</a></li>
</ol>
</body>
</html>
Итог работы этого кода представлен ниже:

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

Форматирование текста

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

Элемент B.

Элемент В применяется для задания полужирного начертания текста.
<b>365.WEB</b>

Элемент I.

Элемент I применяется для задания курсивного начертания текста.
<i>365.WEB</i>

Элемент ТТ.

Элемент ТТ задает моноширинное написание текста(это когда каждая буква имеет одну и ту же ширину).
<tt>365.WEB</tt>

Элемент U.

Элемент U отображает текст подчеркнутым.
<u>365.WEB</u>

Элемент S.

Элемент S зачеркивает текст горизонтальной линией.
<s>365.WEB</s>

Элемент BIG.

Элмент ВIG отображает текст, заключенный в него, шрифтом большего размера, чем весь остальной текст. Всего в HTML шрифт имеет размеры от1 до 7, по умолчанию шрифт имеет размер 3.
<big>365.WEB<big>365.WEB</big></big>

Элемент SMALL.

Действует аналогично предыдущему, просто в обратную сторону.
<small>365.WEB<small >365.WEB</small ></small >

Элементы SUB и SUP.

Эти элементы задают подстрочное и надстрочное написание символов.

Элементы SPАN.

Элемент SPAN позволяет определить особые параметры отображения для небольшого куска текста.
<span style="background-color:#00FF00">365.WEB</span>

Если теперь, дорогой мой читатель, ты возьмешь и обобщишь все написанные выше элементы в единый код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/html/loose.dtd">
<html title="365.WEB">
<head>
<title>Форматирование текста</title>
</head>
<body>
<b title="Полужирный">365.WEB</b><br/>
<i>365.WEB</i><br/>
<tt>365.WEB</tt><br/>
<u>365.WEB</u><br/>
<s>365.WEB</s><br/>
<big>365.WEB<big>365.WEB</big></big><br/>
<small>365.WEB<small>365.WEB</small></small><br/>
<sub>365.</sub>WEB<br/>
<sup>365.</sup>WEB<br/>
<span style="background-color:#00FF00">365.WEB</span>
<body>
<html>
То получишь вот такую штуку:

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

Логические элементы.

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

Элемент АBBR

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

Элемент ACRONYM

Это элемент для определения текста как акронима. Браузер никак не выделяет этот текст.

Элемент CITE

В этот элемент помещают цитату или сноску. Такой текст отображается курсивом.

Элемент CODE

Этот элемент отображает моноширинным шрифтом фрагменты кода программ, например.

Элемент DEL

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

Элемент DFN

Это элемент для выделения текста как определения. Браузер такой текст определяет курсивом.

Элемент EM

Текст в этом элементе воспринимается как важный и отбражается курсивом.

Элемент KBD

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

Элемент Q

Элемент цитаты. Используется для их добавления в текст. Отображается цитата курсивным шрифтом.

Элемент STRONG

Элемент этот предназначен для постановки акцента в тексте. Текст этого элемента выделяется полужирным шрифтом.

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

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

День 6. Строим доски для серфинга.

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

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB" lang="ru">
<head>
<title>Списки</title>
</head>
<body>
<h1>Как стать миллионером</h1>
<ol type="1">
<li>Придумать суперидею</li>
<ul type="disc">
<li>Рассказать другу</li>
<li>Выслушать рассказ о том, что ты придурок и это не сработает</li>
</ul>
<li>Начать ее реализовывать</li>
<ul type="disc">
<li>Заработать первые деньги</li>
<li>Поржать над другом</li>
</ul>
<li>Стать миллионером</li>
</ol>
</body>
</html>

И вот результат выполнения такого кода

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

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

Внешние ссылки

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

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ссылки</title>
<meta http-equiv="content-type" content="text/html" charset="windows-1251" />
</head>
<body>
<a href="Нумерованные списки + Ссылка.html">Нумерованные списки</a></br>
<a href="G:\WEB.365\Для блога\Изображения\блог.jpg">Фото</a>
</body>
<html>

И вот результаты работы кода

Обратите внимание на различие первой и второй ссылок. В первой указано название файла, т.к. он лежит там же, где и основная страница, ссылка же на фотографию указана в полном виде(на самом деле я почти уверен, что есть способ избежать набора полного адреса, но я еще не разобрался с ним). И,разумеется, когда вы будете писать свой код, позаботьтесь о том, чтобы у вас на компьютере действительно существовали страницы к которым вы собираетесь перейти.
Кстати к элементу А применим атрибут title, дающий подсказки нам, и новый для нас атрибут target определяющий в какое окно должен загружаться новый документ:
_blanc - в новое окно
_self - в текущее окно.

Внутренние ссылки

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

Создается метка. Создается она с помощью атрибута name элемента А. В качестве значения атрибута name может быть любое слово, но желательно чтобы оно характеризовало свое местоположение.
Создается ссылка не метку путем придания атрибуту href значения имени метки. То есть вот такой конструкции <a href="#Имя метки">

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

Пример использования внутренних ссылок:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="Внутренняя ссылка" lang="ru">
<head>
<meta http-equiv="content-type" content="text/html" charset="windows-1251" />
<title>365.WEB</title>
</head>
<body>

<h1>Первый проход</h1>
<ol type="1">
<li><a href="#met1" title="Нажмите для перехода в конец документа">Причудницы большого света!</a></li>
<li>Всех прежде вас оставил он;</li>
<li>И правда то, что в наши лета</li>
<li>Довольно скучен высший тон;</li>
<li>Хоть, может быть, иная дама</li>
<li>Толкует Сея и Бентама,</li>
<li>Но вообще их разговор</li>
<li>Несносный, хоть невинный вздор;</li>
<li>К тому ж они так непорочны,</li>
<li>Так величавы, так умны,</li>
<li>Так благочестия полны,</li>
<li>Так осмотрительны, так точны,</li>
<li>Так неприступны для мужчин,</li>
<li>Что вид их уж рождает сплин. </li>
<li>И вы, красотки молодые,</li>
<li>Которых позднею порой</li>
<li>Уносят дрожки удалые</li>
<li>По петербургской мостовой,</li>
<li>И вас покинул мой Евгений.</li>
<li>Отступник бурных наслаждений,</li>
<li>Онегин дома заперся,</li>
<li>Зевая, за перо взялся,</li>
<li>Хотел писать — но труд упорный</li>
<li>Ему был тошен; ничего</li>
<li>Не вышло из пера его,</li>
<li>И не попал он в цех задорный</li>
<li>Людей, о коих не сужу,</li>
<li>Затем, что к ним принадлежу.</li>
</ol>
<h1>Второй проход</h1>
<ol type="1">
<li type="1" value="29">Причудницы большого света!</li>
<li>Всех прежде вас оставил он;</li>
<li>И правда то, что в наши лета</li>
<li>Довольно скучен высший тон;</li>
<li>Хоть, может быть, иная дама</li>
<li>Толкует Сея и Бентама,</li>
<li>Но вообще их разговор</li>
<li>Несносный, хоть невинный вздор;</li>
<li>К тому ж они так непорочны,</li>
<li>Так величавы, так умны,</li>
<li>Так благочестия полны,</li>
<li>Так осмотрительны, так точны,</li>
<li>Так неприступны для мужчин,</li>
<li>Что вид их уж рождает сплин. </li>
<li>И вы, красотки молодые,</li>
<li>Которых позднею порой</li>
<li>Уносят дрожки удалые</li>
<li>По петербургской мостовой,</li>
<li>И вас покинул мой Евгений.</li>
<li>Отступник бурных наслаждений,</li>
<li>Онегин дома заперся,</li>
<li>Зевая, за перо взялся,</li>
<li>Хотел писать — но труд упорный</a></li>
<li>Ему был тошен; ничего</li>
<li>Не вышло из пера его,</li>
<li>И не попал он в цех задорный</li>
<li>Людей, о коих не сужу,</li>
<li>Затем, что к ним принадлежу.</li>
</ol>
</ol>
<h1>Третий проход</h1>
<ol type="1">
<li type="1" value="57">Причудницы большого света!</li>
<li>Всех прежде вас оставил он;</li>
<li>И правда то, что в наши лета</li>
<li>Довольно скучен высший тон;</li>
<li>Хоть, может быть, иная дама</li>
<li>Толкует Сея и Бентама,</li>
<li>Но вообще их разговор</li>
<li>Несносный, хоть невинный вздор;</li>
<li>К тому ж они так непорочны,</li>
<li>Так величавы, так умны,</li>
<li>Так благочестия полны,</li>
<li>Так осмотрительны, так точны,</li>
<li>Так неприступны для мужчин,</li>
<li>Что вид их уж рождает сплин. </li>
<li>И вы, красотки молодые,</li>
<li>Которых позднею порой</li>
<li>Уносят дрожки удалые</li>
<li>По петербургской мостовой,</li>
<li>И вас покинул мой Евгений.</li>
<li>Отступник бурных наслаждений,</li>
<li>Онегин дома заперся,</li>
<li>Зевая, за перо взялся,</li>
<li>Хотел писать — но труд упорный</a></li>
<li>Ему был тошен; ничего</li>
<li>Не вышло из пера его,</li>
<li>И не попал он в цех задорный</li>
<li>Людей, о коих не сужу,</li>
<li><a name="met1">Затем, что к ним принадлежу.</a></li>
</ol>
</body>
</html>

Не пугайтесь размера, этот код вам разрешается контрлцеконтрлвекнуть.

Как итог выполучите такую штуку:

После перехода по ссылке:

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

В предыдущем примере вы при переходе в конец документа были лишены возможности вернуться в начало столь же стремительно. Собственно такую возможность я и предлагаю вам реализовать. Попробуйте сделать первую и последнюю строчки на странице одновременно и ссылками и метками, дав таким образом самим себе возможность тыкать и радоваться.
Мой вариант реализации - завтра.
Да прибудет с вами сила, друзья.
P.S. А сюрпризы никто не отменял...

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

День 5. Вместо каллиграфии.

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

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

Так, переходим собственно к делу, думаем и вникаем.

Тег обрыва строки <br>

Представьте, что вам нужно написать стихотворение на своей странице.

Скажем что то вроде:

А дом, заставленный добром - еще не дом,
И даже с люстрой над столом еще не дом,
И на окне с живым цветком еще не дом,
И даже с чайника баском еще не дом.

Когда вечерняя сгустится темнота,
Так эта истина понятна и проста,
Что от ладони до окна наполнен дом
Твоим теплом, твоим теплом.

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

Утираем слезы умиления и думаем о том, что если использовать элемент абзаца <p>

то есть вот такую конструкцию,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru" dir="LTR" title="Привет">
<head>
<title>365.WEB-программирование</title>
</head>
<body>
<p>
А дом, заставленный добром - еще не дом,
И даже с люстрой над столом еще не дом,
И на окне с живым цветком еще не дом,
И даже с чайника баском еще не дом.

Когда вечерняя сгустится темнота,
Так эта истина понятна и проста,
Что от ладони до окна наполнен дом
Твоим теплом, твоим теплом.

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

А дом, заставленный добром - еще не дом,
И даже с люстрой над столом еще не дом,
И на окне с живым цветком еще не дом,
И даже с чайника баском еще не дом.
</p>
</body>
</html>

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

Не очень удобно в таком варианте отображения читать стихотворение, не правда ли?

Зато если применить тег <br>, то есть сказать браузеру: "Так дорогой, вот до сюда пишешь строку, а потом сматываешь удочки и переходишь на строку ниже", то можно получить вот такой вариант кода:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru" dir="LTR" title="365.WEB">
<head>
<title>365.WEB-программирование</title>
</head>
<body>
<p>
А дом, заставленный добром - еще не дом,<br/>
И даже с люстрой над столом еще не дом,<br/>
И на окне с живым цветком еще не дом,<br/>
И даже с чайника баском еще не дом.<br/>
<br/>
Когда вечерняя сгустится темнота,<br/>
Так эта истина понятна и проста,<br/>
Что от ладони до окна наполнен дом<br/>
Твоим теплом, твоим теплом.<br/>
<br/>
Все вещи тихо растворила темнота,<br/>
И стала комната бездонная и пуста,<br/>
И среди этой мирозданной пустоты<br/>
Весь мир мой ты и дом мой ты.<br/>
<br/>
А дом, заставленный добром - еще не дом,<br/>
И даже с люстрой над столом еще не дом,<br/>
И на окне с живым цветком еще не дом,<br/>
И даже с чайника баском еще не дом.<br/>
</p>
</body>
</html>

И соответственно вот такой результат:

Посмотрите внимательно на тег <br/>. У него довольно своеобразная форма записи. Он не открывается и как бы сразу закрывается. На самом деле возможна и привычная нам запись:
<br> </br>, но, когда такую структуру нужно ввести много раз, это становится проблемой. Так что запомните первый вариант, впредь будет использоваться именно он.
И обратите внимание на один новый и очень важный момент: посмотрите внимание на отступы от левого края в записи кода. Чем "глубже" элемент вставлен в код, тем дальше он отстоит от левого края. То есть прилипает к нему только заглавный тег <html>, теги <head> и <body> встроены в него и на один шаг стоят дальше. Внутри <head> и <body> также есть теги и они стоят еще дальше.
К чему эти сложности? В коде моей амебной страницы не так много элементов и это правило размещения элементов может показаться сейчас излишним, но при создании более глобальных страниц конструкции кодов могут быть на порядок сложнее и разработчику необходимо ориентироваться в структуре, а делать это когда все твои теги размещены списком, довольно сложно. Этот принцип написания кодов на самом деле является общепринятым для всех программистов, пишущих на любых языках.

Заголовки

Заголовки статей очень нужны при написании больших объемов текста, они позволяют легко ориентироваться в нем. Собственно, чтобы их создавать в языке HTML имеется элемент с хитрым названием H, тег его выглядит так: <h>. При этом так как в тексте есть главный и заголовок и подзаголовки, то в HTML предусмотрено 6 уровней заголовков.Называются они соответственно: <h1> <h2> <h3> <h4> <h5> <h6>. Давайте рассмотрим пример создания заголовков.
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB" lang="ru">
<head>
<title>Заголовки</title>
<meta htttp-equiv="content type" content="text/html" charset="windows-1251" />
</head>
<body>
<h1 align="center">Заголовок 1</h1>
<h2 align="center">Загловок 2</h2>
<h3 align="center">Загловок 3</h3>
<h4 align="center">Заголовок 4</h4>
</body>
</html>
Результат:

К заголовкам с помощью атрибута style можно добавлять стиль оформления, в этом случае код будет выглядеть так:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB" lang="ru">
<head>
<title>Заголовки</title>
<meta htttp-equiv="content type" content="text/html" charset="windows-1251" />
</head>
<body>
<h1 style="color:#0000FF; word-spacing:20px;" align="center">Заголовок 1</h1>
<h2 style="color:#00FF00; word-spacing:20px;" align="center">Заголовок 2</h2>
<h3 style="color:#4567AC; word-spacing:20px;" align="center">Заголовок 3</h3>
<h4 align="center">Заголовок 4</h4>

</body>
</html>

Результат:

Я надеюсь в вашей памяти еще не стерлись данные об элементе style? Если нет, то точно также, как и в элементе, стиль организуется и в атрибуте. Если забыли, то можете перечитать об этом здесь.
Также элементы заголовка поддерживает атрибут title, который позволяет добавлять всплывающую подсказку для заголовка. И снова код:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB" lang="ru">
<head>
<title>Заголовки</title>
<meta htttp-equiv="content type" content="text/html" charset="windows-1251" />
</head>
<body>
<h1 title="Заголовок" style="color:#0000FF; word-spacing:20px;" align="center">Заголовок 1</h1>
<h2 style="color:#00FF00; word-spacing:20px;" align="center">Заголовок 2</h2>
<h3 style="color:#4567AC; word-spacing:20px;" align="center">Заголовок 3</h3>
<h4 align="center">Заголовок 4</h4>
</body>
</html>

И снова результат:

Списки

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

circle - окружность
square - квадрат
disc - круг

При этом к элементу UL применимы атрибуты title и style. Они нам уже знакомы, их применения абсолютно аналогичны предыдущим.

Внутри элемента UL для внесения записей в список используется элемент LI. Этим элементом задаваться каждая запись.

Пример:

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB" lang="ru">
<head>
<title>Списки</title>
</head>
<body>
<h1>Рыцари круглого стола</h1>
<ul type="circle" style="color:#0000FF">
<li>Гавейн</li>
<li>Ланселот</li>
<li>Галахад</li>
</ul>
</body>
</html>

Результат:

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

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

А - заглавные латинские буквы
а - строчные латинские буквы
1 - арабские цифры
I - заглавные римские цифры
i - строчные римские цифры

Вот вам пример нумерованного списка:

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB" lang="ru">
<head>
<title>Списки</title>
</head>
<body>
<h1>Рыцари круглого стола</h1>
<ol type="1" style="color:#0000FF">
<li type="1" value="7">Гавейн</li>
<li>Ланселот</li>
<li>Галахад</li>

</ol> </body>
</html>

Вот картинка:

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

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

Друзья, я не привел пример сложного списка с вложенными элементами. Его то я и предлагаю создать вам самим. Для этого нужно внутрь элемента UL(или OL) вложить другой элемент списка(какой это будет элемент - OL или UL - не имеет значения). Особое внимание стоит обратить на то, где заканчивается один список и начинается другой, иначе вы рискуете не создать нужную структуру. В дополнение создайте подсказки для каждого элемента главного списка. Мой вариант такого спика вы сможете увидеть в завтрашнем рассказе.

Итог.

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

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

День 10. Юбилей? Нет, день рождения.

Объединения ячеек.

Установка фона ячеек.

Вложенные таблицы.

Домашняя работа.

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

День 9. Границы возможного.

Атрибут border.

Атрибут bordercolor.

Атрибуты frame и rules.

Дома.

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

День 8. Удаляем пятна.

Элементы для форматирования относительно больших блоков текста.

Элемент FONT

Элемент BLOCKQUOTE

Планирование страниц.

Элементы таблиц.

Элемент table.

Элемент TR, TD, TH.

Дамашка.

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

День 7. Е - мае, неделя прошла уже.

Форматирование текста

Элемент B.

Элемент I.

Элемент ТТ.

Элемент U.

Элемент S.

Элемент BIG.

Элемент SMALL.

Элементы SUB и SUP.

Элементы SPАN.

Логические элементы.

Элемент АBBR

Элемент ACRONYM

Элемент CITE

Элемент CODE

Элемент DEL

Элемент DFN

Элемент EM

Элемент KBD

Элемент Q

Элемент STRONG

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

День 6. Строим доски для серфинга.

Внешние ссылки

Внутренние ссылки

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

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

День 5. Вместо каллиграфии.

Тег обрыва строки <br>

Заголовки

Списки

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

Итог.

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

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

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

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

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