
Второе издание, январь 2008
Вкратце по розовому
Это всё, что вам нужно знать. Дальше идут бесчисленные пояснения, объяснения, ненужные в обычной жизни фокусы и другие способы делать мир лучше. Не читайте! Оно вам нужно, как собаке пятая нога.Чтобы обратить внимание на написанные слова, напишите
<B>жирный текст внутри такой штучки</B>
чтобы обратить внимание с хитринкой, поступайте
<I>почти точно так же</I>
если буквы должны быть большими или маленькими, то пусть будут<BIG>большими</BIG> или <SMALL>маленькими</SMALL>
Ссылка делается примерно так:<A HREF="http://адрес">ссылка</A>
а картинка:<IMG SRC="адрескартинки">
Вот вам простой пример:Привет! Сегодня дождь и скверно, а мы не виделись, наверно, <I>сто лет.</I> Тебе в <A HREF="http://www.metro.ru/">метро?</A> Скажи на милость, а ты совсем не изменилась, <B>нет-нет.</B> Привет!

Вот так выглядят первые две главы
с высоты птичьего полета:

Кому это нужно?
Бездельницам, не ведающим никакого рукоделия —это не нужно.
Барышням, нескромно заполняющим девичьи дневники —
для полного счастья хватит и примеров выше.
Этот рассказ посвящен подневольным красавицам, кому злой рок каждый день наказывает:
- «заходить в администраторскую панель сайта»;
- «написать на этом интернет-портале новую новость»;
- или даже «дорогая, исправьте информацию о нашей компании на страничке».
Содержание
- Введение,
абсолютное волшебство и обрамлять
поясняющие что такое хтмл и с чем его едят - Понедельник: самые простые и популярные
о простых тегах, делающих текст жирным, наклонным, ссылающимся и еще каким-то - Вторник: как верстать книги не выходя из дома
о тегах которые делают загаловки, параграфы и цитаты - Среда: далее по списку
о том, как делать красивые списки (вот как это содержание) - Четверг: лучший способ самовыражаться
о том, как вставлять картинки - Пятница: еноты в жестких рамках
о создании таблиц и сращивании ячеек - Суббота: подведение итогов и что дальше
выпускной бал со стихами и танцами
§1. Введение
Абсолютное волшебство
Обычный текст, который вы можете напечатать на вашем компьютере потому и зовётся обычным, что никаких чудес не содержит — только буквы, цифры и :-)Разумеется, для спасения мира одних смайликов недостаточно. Тёмные джедаи выбирают странный путь, на котором в пучинах майкрософт ворда, фотошопа и другими демонами рисуются слова самых кошмарных форм и самых мрачных оттенков радуги. Истинные волшебницы — те, кто милы и очаровательны — познают тайны хтмл (HTML). Тайны хтмл заключаются в том, что мы пишем обычный текст, но в нужный момент вставляем заклинание, и текст преображается. Мы как бы говорим «ОП!», и все происходит.

ОП! на голубом!
ОП!
Как-то так.
Обрамлять
Конечно же, всё волшебство заключается в том, какие именно «оп!» используются. Заклинания называются тэгами (tags). Их много, но та, кто познает все теги мира — становится Великой Чародейкой и получает Нестареющую Красоту в награду. Значит оно того стоит.Чтобы не путать теги с обычным текстом, пишутся они английскими буквами внутри < > вот таких треугольных скобочек. Например, английская буква B заставит все буквы стать жирными (bold), что твой кот:
и все потолстело.
И тут же мы с вами убеждаемся, что если вовремя не закончить волшебство, то толстеть прийдётся всю жизнь. Как и в сказке про «горшочек вари и горшочек не вари», на помощь нам приходят закрывающие теги:
Закрывающие теги отличаются только лишь косой чертой, перед заклинанием. Вот и получается, что наши слова и предложения мы вынуждены писать между открывающим и закрывающим тегами. Мудрые женщины называют этот процесс обрамлением (obramlenie):
Теперь вы можете хорошенько выспаться, чтобы с понедельника начать новую жизнь. Полную удивительных заклинаний, тегов и метатегов.
Обрамлять — несомненно одно из самых приятных, что можно делать рабочими буднями. Единственное что не позволяет обрамлению стать культом, это необходимость переключать клавиатуру на английский язык, а потом обратно для написания русского текста.
В этом смысле лучше всего вышли из положения жительницы британских островов — общаясь между собой на английском языке и используя его для переписки, они ликвидировали необходимость постоянного переключения раскладки.
![]()
§2. Понедельник: самые простые и популярные
Любая школьница техникума «Интерьер и дизайн» знает что такое <b>, <i> и <a> — так что понедельничное занятие можно пропустить или же смешать с книгами Полины Дашковой и раннего Бродского. Хотя, конечно же, мы затронем сегодня не только перечисленные теги.Самые простые и популярные теги очень просты и весьма популярны:
— А у вас мандарины с косточками?
— Нет-нет, специальный сорт без косточек. Берите — очень сладкие.
— Жаль.
(ушёл)
или то же самое, но с показанными тегами:
— А у вас <A href="http://en.wikipedia.org/
wiki/Mandarin_orange">мандарины</A> с косточками?<BR>
— Нет-нет, <B>специальный сорт без косточек.</B> Берите — очень сладкие.<BR>
— Жаль.<BR>
<I>(ушёл)</I>*
Давайте разберем наши мандарины по косточкам.
Жирный и курсив
Про тег <B> вы уже знаете (найдите его в примере) — весь обрамленный собою текст он делает жирным. Очень похож на него и тег <I> (italic) — текст становится наклонным или (более красивое имя) текст становится курсивом.Это очень-очень простые теги, главное не забывайте про «горшочек не вари» и расставляйте закрывающие теги
Это очень-очень популярные теги. Зачем вам нужно делать какие-то слова или фразы в тексте жирными и наклонными — решайте сами. А в последних лекциях, когда мы с вами будем подводить итоги, разведем нудные лекции о некоторых правилах приличия.
Ссылка
Ссылки во всем интернете делаются с помощью тега <A> (anchor — якорь; на первый взгляд логика якорь-ссылка кажется непонятной, но есть некоторые логические предпосылки объясняющие эту морскую терминологию, что впрочем не делает… да, согласен, логика кажется непонятной).Как и любой порядочный тег, делает ссылкой весь текст внутри открывающих и закрывающих тегов:
Но логический вопрос «эй, а куда ведет нас эта ссылка?» заставляет нас делать сложности и писать атрибут HREF.
Правила такие: в открывающем теге, после (названия тега) буквы A, после пробела, надо обязательно писать HREF= и адрес, на который ведет наша ссылка. Обязательно с волшебной комбинацией http://
С ума сойти, да. Но после двух-трех пробных ссылок все эти правила, как правило, запоминаются.
(Этого не было в примере), большие и маленькие, штучки сверху и снизу
Для того чтобы вы уже сейчас могли щеголять своими познаниями, я вам кратко рассскажу о нескольких красивых тегах, которые не редко востребованы в жизни каждой волшебницы:<SMALL>ой, маленький текст</SMALL>
<BIG>текст, чуть побольше обычного</BIG>
штучка <SUP>вверху</SUP>
и штучка <SUB>внизу</SUB>
и особенный шик:
Брр, новая строка
Самые прозорливые заметили в примере странный тег <BR> в каждой строчке. Это тег новая строка (break).Если бы этого <BR> не было, то всё нами написанное будет вытягиваться в одну строчку (или перетекать со строчки на строчку, если текст длинный), даже если мы тысячу раз нажмем клавишу enter:
Кстати, дома перед родными можете попробовать следующий фокус: напишите в хтмл два слова и поставьте между ними десять… нет, пятнадцать пробелов. Теперь посмотрите результат. Оп! Только один пробел!
Зачем нужны такие фокусы? Оставим вопрос мужчинам-философам. Нам остаются факты: куча пробелов сливается в один, а для перехода на новую строчку надо каждый раз писать <BR> (кстати, этот тег холост и у него нет закрывающей пары).
Для успокоения отмечу пару неплохих фактов:
Во-первых, почти все наши с вами форумы, жжы и другие блоги, сайты знакомств и удовольствий — почти везде, где мы вводим тексты, умные роботы следят за нами и вместо каждого нажатия на клавишу enter вставляют невидимый <BR>. Это очень удобно, вы даже можете забыть о существовании такого тега. Но если не забудете, то в случае неожиданной поломки робота — вы первой окажетесь в дамках.
Во-вторых, на самом деле, если очень правильно писать хтмл, то нам никогда не надо будет переходить на новую строчку. Но об этом в следующих лекциях.
Домашнее задание
-
Найдите недоразумение:
Жирная ссылка курсивом
-
Напишите текст внутри пары тегов:
<B> <I>текст</I> </B>
посмотрите результат.
Теперь напишите тот же самый текст, но поменяйте теги местами:
<I> <B>текст</B> </I>
Почуствуйте разницу!
(подсказка: нет разницы)
-
Искаверкайте очередность открывающих и закрывающих тегов:
<B> <I>текст</B> </I>
(подсказка: никогда так не делайте)
-
Напишите три тысячи постов в ЖЖ
Это не шутка. Только упорными практическими занятиями можно заставить себя пользовать теги. О чем бы вы ни писали, рано или поздно они (теги) появятся в вашем тексте. А вы увидите собственными глазами во что они превращаются для читателей.
§3. Вторник: как верстать книги не выходя из дома
Все книги, которые когда-либо попадались мне в руки, выглядели следующим образом:подзаголовок
цитата-эпиграф
текст
подзаголовок
текст
Поэтому, я попробую написать сказку:
Глава I. Неожиданный суженый
И мое сердце остановилось, и мое сердце замерло (народная песня)
Однажды наказала матушка Аленушке сходит в магазин, купить баранок, сметаны и икры красной. Взяла Аленушка зонтик, одела праздничные туфельки и вышла на улицу.
А на улице ярко-ярко! От солнца в небе глаза слезятся, деревенские мальчишки все в очках темных, барышни телеса богатые в купальники прячут. Смотрит Аленушка на небо без единого облачка и говорит зонтику: «Зачем я только взяла тебя, неподумавши. Засмеют теперь меня люди. Надо мне тебя выкинуть подобру-поздорову.»
А зонтик отвечает человеческим голосом: «Не выкидывай меня прекрасна девица. Поцелуй меня лучше. Я ведь не простой зонтик, а принц заколдованный.»
Глава II. Тяжелые сумки
В магазине Анатолий Яковлевич взвесил девушке и баранок, и сметаны, и немного икры к блинам, и даже сладости сестренкам. Вышла Аленушка из магазина и заплакала — сумки тяжелые, а до дома идти семь верст.
«Сними с меня проклятие», вновь заговорил принц-зонтик. «Раскрой и поцелуй. В миг человеком стану — сумки до дому донесу.»
Аленушка испугалась, но раскрыла и поцеловала. Вмиг, вместо старого зонтика, возник перед ней красавец-мужчина. Взял на руки и сумки, и Аленушку. Два шага сделал — вот и матушкин дом.
«Вот и сметана пригодилась!», обрадовалась матушка. «Сейчас картошечка сварится и будем свадьбу празновать!»
Конечно же, я мечтаю о том, чтобы моя сказка была приятна глазу и легка прочтению. Надо выделить заголовки, чтобы они не сливались с текстом! Можно конечно воспользоваться
БОЛЬШИМИ БУКВАМИ ВЫДЕЛЯЮЩИМИСЯ В ТЕКСТЕ
или, уже знакомым, жирным текстом
Но это не пролетарские методы. Истинные волшебницы используют теги заголовков.
Теги заголовков
Их шесть, но они похожи как братья:
<H1>Принц-зонтик</H1>
<H2>Принц-зонтик</H2>
<H3>Принц-зонтик</H3>
<H4>Принц-зонтик</H4>
<H5>Принц-зонтик</H5>
<H6>Принц-зонтик</H6>
Можно выбрать заголовок (header) и для всей книги, и для главы, и для эпизода — должно хватить на всех.
Тег параграфа
А еще было бы здорово сам текст сказки разбить на небольшие параграфы — чтобы глаза не терялись.<P>Однажды наказала матушка Аленушке сходит в магазин, купить баранок, сметаны и икры красной. Взяла Аленушка зонтик, одела праздничные туфельки и вышла на улицу.</P>
<P>А на улице ярко-ярко! От солнца в небе глаза слезятся, деревенские мальчишки все в очках темных, барышни телеса богатые в купальники прячут. Смотрит Аленушка на небо без единого облачка и говорит зонтику: «Зачем я только взяла тебя, неподумавши. Засмеют теперь меня люди. Надо мне тебя выкинуть подобру-поздорову.»</P>
Этот тег <P> (paragraph) ничего больше и не делает, как просто напросто отделяет один кусок текста от второго. Он даже красную строку почти никогда не делает — а в школе всегда надо было. Но у этого тега, как и у тега для заголовков есть одна важная особенность…
Жадность пространства
Если вы попробуете в строчку написать:То результат вам совсем не будет в строчку.
Каждая штучка захочет стоять на собственной строке, вдобавок еще и пустого пространства отхватит себе, для жадности:
Привет!
А что ты делаешь?
Как дела?
Помните я говорил, что нам не прийдется все время перескакивать на новую строчку тегом <BR>? За нас это будут делать жадные теги.
Оп! Книга!
Напоследок осталось показать специальный тег для цитат:И теперь можно еще раз написать нашу сказку, по всем правилам волшебства:
<H2>Глава I. Неожиданный суженый</H2>
<BLOCKQUOTE>И мое сердце остановилось, и мое сердце замерло <I>(народная песня)</I></BLOCKQUOTE>
<P>Однажды наказала матушка Аленушке сходит в магазин, купить баранок, сметаны и икры красной. Взяла Аленушка зонтик, одела праздничные туфельки и вышла на улицу.</P>
<P>А на улице ярко-ярко! От солнца в небе глаза слезятся, деревенские мальчишки все в очках темных, барышни телеса богатые в купальники прячут. Смотрит Аленушка на небо без единого облачка и говорит зонтику: «Зачем я только взяла тебя, неподумавши. Засмеют теперь меня люди. Надо мне тебя выкинуть подобру-поздорову.»</P>
<P>А зонтик отвечает человеческим голосом: «Не выкидывай меня прекрасна девица. Поцелуй меня лучше. Я ведь не простой зонтик, а принц заколдованный.»</P>
<H2>Глава II. Тяжелые сумки</H2>
<P>В магазине Анатолий Яковлевич взвесил девушке и баранок, и сметаны, и немного икры к блинам, и даже сладости сестренкам. Вышла Аленушка из магазина и заплакала — сумки тяжелые, а до дома идти семь верст.</P>
<P>«Сними с меня проклятие», вновь заговорил принц-зонтик. «Раскрой и поцелуй. В миг человеком стану — сумки до дому донесу.»</P>
<P>Аленушка испугалась, но раскрыла и поцеловала. Вмиг, вместо старого зонтика, возник перед ней красавец-мужчина. Взял на руки и сумки, и Аленушку. Два шага сделал — вот и матушкин дом.</P>
<P>«Вот и сметана пригодилась!» обрадовалась матушка. «Сейчас картошечка сварится и будем свадьбу празновать!»</P>
И взглянуть на результат:
Принц-зонтик
Глава I. Неожиданный суженый
И мое сердце остановилось, и мое сердце замерло (народная песня)
Однажды наказала матушка Аленушке сходит в магазин, купить баранок, сметаны и икры красной. Взяла Аленушка зонтик, одела праздничные туфельки и вышла на улицу.
А на улице ярко-ярко! От солнца в небе глаза слезятся, деревенские мальчишки все в очках темных, барышни телеса богатые в купальники прячут. Смотрит Аленушка на небо без единого облачка и говорит зонтику: «Зачем я только взяла тебя, неподумавши. Засмеют теперь меня люди. Надо мне тебя выкинуть подобру-поздорову.»
А зонтик отвечает человеческим голосом: «Не выкидывай меня прекрасна девица. Поцелуй меня лучше. Я ведь не простой зонтик, а принц заколдованный.»
Глава II. Тяжелые сумки
В магазине Анатолий Яковлевич взвесил девушке и баранок, и сметаны, и немного икры к блинам, и даже сладости сестренкам. Вышла Аленушка из магазина и заплакала — сумки тяжелые, а до дома идти семь верст.
«Сними с меня проклятие», вновь заговорил принц-зонтик. «Раскрой и поцелуй. В миг человеком стану — сумки до дому донесу.»
Аленушка испугалась, но раскрыла и поцеловала. Вмиг, вместо старого зонтика, возник перед ней красавец-мужчина. Взял на руки и сумки, и Аленушку. Два шага сделал — вот и матушкин дом.
«Вот и сметана пригодилась!» обрадовалась матушка. «Сейчас картошечка сварится и будем свадьбу празновать!»
Нравится? Если нет — идите ужинать.

Домашнее задание
- Возмите в руки любую книгу. Карандашем пририсуйте хтмл-теги ко всем заголовкам, параграфам и цитатам. Соблюдайте иерархию заголовков.
§4. Среда: далее по списку
Списки — это моё любимое волшебствоЧто делают списки?
- ласкают глаз
- разбавляют серость
- творят добро
- и многое другое
Создаются списки с помощью тега <OL> (ordered list), а помогает ему тег <LI> (list item):
<LI>ласкают глаз
<LI>разбавляют серость
<LI>творят добро
<LI>и многое другое
</OL>
Это делают роботы
Пока не было хтмл, женщины ненавидили узнавать опосля, что первым пунктом должна идти фраза «объясняют суть». Ведь приходилось брать уже написаный список, вставлять строчку «1. объясняют суть», после чего менять старую цифру 1 на цифру 2, старую цифру 2 на 3 и так далее.Современные технологии позволяют нам не заниматься такими глупостями. Мы просто вставим строчку
в нужное место, и получим результат, в котором несчастный робот поменял цифры вместо нас:
Что делают списки?
- объясняют суть
- ласкают глаз
- разбавляют серость
- творят добро
- и многое другое
Бывают еще случаи, когда мы отвлеклись на новую серию Доктора Хауса, а потом продолжили писать список. Например с пятого пункта. Короткое дополнение к тегу <OL> радует нас:
|
<OL start=5> <LI>творят добро <LI>и многое другое </OL> |
= |
|
Но еще бывают случаи, когда кто-то с детства ненавидит цифры. И опять короткое дополнение радует:
|
<OL type=a> <LI>объясняют суть <LI>ласкают глаз <LI>разбавляют серость <LI>творят добро </OL> |
= |
|
Можно писать <OL type=a>, еще можно писать <OL type=A> (и тогда список будет нумероваться заглавными буквами), а еще можно писать <OL type=I>:
- объясняют суть
- ласкают глаз
- разбавляют серость
- творят добро
Русских букв буржуи не знают, но всегда можно попробовать. Вдруг вы читаете эту книгу через сто лет.
Балет буллетов
Стремление к равноправию, заставляет нас иногда поменять тег <OL> на тег <UL> (unordered list). Это сделает все пункты нашего списка равными, и каждого наградят буллетом:|
<UL> <LI>объясняют суть <LI>ласкают глаз <LI>разбавляют серость <LI>творят добро </UL> |
= |
|
Этот <UL>, тоже позволяет нам сделать красиво с помощью небольших дополнений:
<UL type=circle>
или даже <UL type=square>
В результате чего, мы получим для каждого элемента в списке:

- буллет
- кружочек
- или даже квадрат
Это просто маленькие радости. А вас наверняка мучает вопрос…
Зачем писать эти OL и UL?
когда можно просто мужу в магазин написать:- сметану
- ведро пластмассовое
Если муж сообразительный, тогда конечно же, не надо себя мучать. Но посмотрите что будет с нашим красивым списком, если каждый пункт содержит более одной строчки:
Если морковь будет свежая, то надо брать три,
если не очень, то надо брать два.
А если морковь — зеленая и в пупырышках, то это огурцы.
Возьми штук семь.
- сметану (посмотри обязательно на вязкость сметаны,
если менее 4 паскалей на секунду — поругайся на кассе)
- ведро пластмассовое
синее (или желтое, но не зеленое)
Куда приятнее воспользоваться волшебством:
- морковь (два или три килограмма)
Если морковь будет свежая, то надо брать три,
если не очень, то надо брать два.
А если морковь — зеленая и в пупырышках, то это огурцы.
Возьми штук семь.
- сметану (посмотри обязательно на вязкость сметаны,
если менее 4 паскалей на секунду — поругайся на кассе)
- ведро пластмассовое
синее (или желтое, но не зеленое)

Несколько строк? А может можно что-то большее?
Да, вы угадали. После каждого тега <LI> мы можем писать не только строчки, но и все ранее изученные теги. Включая теги заголовков и параграфов. И более того — мы можем писать вложенные списки. Главное, только, вовремя все обрамлять.И да, я совсем забыл сказать, что к тегу <LI> можно добавить закрывающий тег:
а можно и не добавлять.
Под настроение.
Вы ведь уже предвкушаете списки, которые прямо сейчас напишите мужу и собаке? Дерзайте.
Завтра мы с вами будем обсуждать таблицы. А таблицы в хтмл - это ого-го! Таблицы в хтмл это настоящий ужас! Кошмар! Подумайте сто раз, прежде чем прийти на завтрашнюю лекцию.
Домашнее задание
-
Можете так сделать?
-
герои
- Робинзон Крузо
- Мальчиш Кибальчиш
- Мейсон Кепфелл
-
не герои
- Санта Клаус
- Толик
- Скарлетт Йоханссон
Тогда сделайте.
-
герои
-
Вспомните самый длинный список, который вы когда-либо составляли. Теперь попробуйте составить список на один элемент длиннее.
- Расскажите, как правильно, с точки зрения русской грамматики, оформлять списки знаками препинания.
§5. Четверг: лучший способ самовыражаться
Как настоящий мужчина я вас, конечно же, обманул с приятным для вас результатом. Не тот день сегодня, чтобы разбирать таблицы. А вот картинки — изысканное лакомство для многих.Для любой порядочной женщины любимый способ самовыражаться — показать всем свою фотографию-портрет. Или не свою. Или даже не фотографию, а картинку с котенком.

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

Известная топ-модель самовыражает себя тегом IMG.
Можно еще рассказать, что <IMG> не обладает жадностью пространства. А значит, две подряд написанные кратинки, захотят встать на одной строчке, даже если у них разная высота.
Можно еще намекнуть, что картинка может стать ссылкой, если обрамить ее тегом <A>.
На этом сегодняшнюю лекцию о картинках можно было бы и закончить. Но нас ждет длинное отступление…
«А как мне положить картинку в интернет?»
Для мужчин, заставить женщину прекратить постить картинки в жж, все равно, что заставить эту же женщину замолчать во время футбольного матча. То есть — неосуществимая мечта. И мужчины постоянно создают сложности для самовыражения.
«Как мне положить картинку в интернет?» — самый популярный вопрос вставших на путь хтмл. Признаюсь, что вопрос достаточно сложный, на пальцах не покажешь.
Когда картинка лежит на вашем компьютере — это файл, например файл с именем supermodel.jpg
Для того чтобы показывать файл в интернете у него должен быть адрес. Точно также, как у любого сайта в интернете есть адрес, так и любой файл может его иметь. Для этого файл надо положить на сервер.
Здесь и начинаются трудности. Поскольку иметь доступ на сервер — это как идеальная фигура — не у каждой есть (но каждая может получить).
Когда вы положите картинку в интернет — у нее появится адрес. Например:
- Сначала спросите у вашего мужа, может ли он положить картинку в интернет. Если может — вам повезло.
- Если не сложилось с мужем, попробуйте найти какой-нибудь сайт, который разрешает любому посетителю сохранить картинку у себя. Их много, например flickr.com. Но помните, что в этом случае вам прийдется вникать в инструкции выбранного сайта.
- Попробуйте для начала полностью прочитать книгу «ХТМЛ для Женщин», затем дождаться и освоить книги «Протоколы передачи данных для Женщин», «Серверное администрирование для Женщин», «Логин и Пассворд для Женщин». После чего заведите себе собственный сервер.
У меня есть доступ на сервер на котором лежит лучший в мире новостной сайт yetinews.com. Моей жене повезло и она может попросить положить в интернет фотографию своего маленького мусика. Я это делаю, и маленький мусик получает адрес:
http://www.yetinews.com/littlemoosic.jpg
Теперь, именно эту строчку моя жена может вставить в тег <IMG>. Обратите внимание, что последняя часть адреса — это имя файла.
Знаете ли вы что...?
Чтобы у вас никогда не было никаких проблем — знахарки рекомендуют делать так, чтобы имя файла состояло только из строчных английских букв, цифр и знака подчеркивания «_». Знахарки не любят использовать русские буквы, пробелы, запятые, восклицательные знаки и другие хитрые символы.
Домашнее задание
-
Найдите возможность хранения картинок в интернете любой ценой
Если для этого потребуется выйти замуж за системного администратора — сделайте это!
-
Опубликуйте в ЖЖ три тысячи фотографий себя
Это не шутка. Во-первых, только практика закрепляет теорию, во-вторых, большое количество фотографий красивых женщин в сети делает мир лучше.

§6. Пятница: еноты в жестких рамках
Давным, давно, целовались на крылечкеКак говорила другая команда-КВН: «Не время шутки шутить. Вот изучим таблицы в хтмл, тогда и шутки шутить будем.» Я прекрасно осознаю, что сегодня пятница, а вот нате вам.
Давным, давно, подарил тебе аптечку
Аптечка, аптечка, апцо!
(фарс мажор)
Создадим простую таблицу
| Собака | Кот | Енот | |
| Лает: | Да | Нет | Да |
| Кусает: | Да | Да | Да |
| Спит: | Иногда | Всегда | Никогда |
И «чисто, чтобы испугаться» посмотрим ее волшебный код:
<TR>
<TD></TD>
<TD>Собака</TD>
<TD>Кот</TD>
<TD>Енот</TD>
</TR>
<TR>
<TD>Лает:</TD>
<TD>Да</TD>
<TD>Нет</TD>
<TD>Да</TD>
</TR>
<TR>
<TD>Кусает:</TD>
<TD>Да</TD>
<TD>Да</TD>
<TD>Да</TD>
</TR>
<TR>
<TD>Спит:</TD>
<TD>Иногда</TD>
<TD>Всегда</TD>
<TD>Никогда</TD>
</TR>
</TABLE>
Самое простое, это понять работу тега <TABLE> — он как бы говорит нам «Сейчас будет таблица!»
Дальше сложнее — нам надо увидеть готовую таблицу глазами, и найти в ней первую строчку. В этой первой строчке мы найдем четыре ячейки (каждая ячейка расположена в своей колонке). Закончили с первой строчкой.
Увидели вторую строчку таблицы, в этой строчке так же увидели четыре ячейки. Закончили со второй строчкой таблицы. Смотрим на третью. И так далее до конца.
Таблицы в хтмл именно таким методом и строятся.
Строчкой командует тег <TR>. «Сейчас будет строчка в таблице!», говорит нам этот тег.
Как только выдана команда для строчки, в дело вступает тег <TD>. И вот уже внутри него можно писать кота, барсука, енота и любое другое содержимое ячейки.
Как только написали всех енотов, каждого в своей ячейке — <TD>Енот</TD> — закрываем строчку тегом </TR> и открываем следующую.
Изнуряет, выматывает, бесит и плющит. Да, это хтмл, детка! Это темная сторона его силы.
Соблюдая количество ячеек
Логично, что в каждой строчке нашей таблицы, должно быть одинаковое количество ячеек (что в итоге на экране превращается в количество колонок). Посмотрите на наш звериный пример — видите, самая первая ячейка у нас пустая, и мы вынуждены были написать пустую пару <TD></TD> в первой строчке таблицы.Если бы мы этого не сделали, у нас бы сдвинулись ячейки. А если наша таблица была бы размером сто на сто, и если бы мы забыли написать пустую пару тегов где-то в середине этой таблицы, то сдвинулись бы не только ячейки но и полушария мозга.
Наведение красоты
Но давайте представим, что все вышеописанные сложности нам побоку, и мы вообще не паримся по этому поводу.Теперь мы хотим сделать нашу таблицу красивее. Например выделить заголовки таблицы и отделить их от содержания.
Непролетарске методы вы уже держите в уме: выделить это значит обрамить енота тегом <B> и соответсвующую ячейку писать как:

Но еноты не любят лишнего обрамления. Чтобы раз и навсегда сказать ячейке, что она заголовок — мы вместо <TD> напишем <TH>.
Изменим первую строку нашей таблицы:
<TR>
<TD></TD>
<TH>Собака</TH>
<TH>Кот</TH>
<TH>Енот</TH>
</TR>
…
| Собака | Кот | Енот | |
|---|---|---|---|
| Лает: | Да | Нет | Да |
| Кусает: | Да | Да | Да |
| Спит: | Иногда | Всегда | Никогда |
Как-то все кривенько. Давайте добавим таблице рамку. Для этого напишем волшебный border в теге <TABLE>
…
| Собака | Кот | Енот | |
|---|---|---|---|
| Лает: | Да | Нет | Да |
| Кусает: | Да | Да | Да |
| Спит: | Иногда | Всегда | Никогда |
Енотам не нравится теснота. Напишем для того же <TABLE> волшебный cellspacing — он позволит нам управлять расстоянием между ячейками:
…
| Собака | Кот | Енот | |
|---|---|---|---|
| Лает: | Да | Нет | Да |
| Кусает: | Да | Да | Да |
| Спит: | Иногда | Всегда | Никогда |
Теперь енотам не нравится то, что коты-еноты вместе с ответами да-иногда прилипают к стенкам. Удовлетворяя енотов, нам прийдется каждой(!) ячейке с ответами добавить волшебную фразу align=center:
<TD align=center>Да</TD>
…
| Собака | Кот | Енот | |
|---|---|---|---|
| Лает: | Да | Нет | Да |
| Кусает: | Да | Да | Да |
| Спит: | Иногда | Всегда | Никогда |
(а еще я незаметно поменял <TH> вместо <TD> для лает-спит-кусает в первом столбике)
Совмещение ячеек
Всем своим видом, наша таблица как бы говорит нам: «Кусают все!». Говорит настолько явно, что нам хочется избежать повторяющихся да-да-да в третьей строчке. Мы сделаем это очередным волшебством, и вместо:<TR>
<TH>Кусает:</TH>
<TD align=center>Да</TD>
<TD align=center>Да</TD>
<TD align=center>Да</TD>
</TR>
…
<TR>
<TD>Кусает:</TD>
<TD colspan=3 align=center>Кусают все!</TD>
</TR>
…
Волшебная фраза colspan заставляет одну ячейку растянуться на три ячейки (именно это число мы и написали). Получается, что в третей строчке у нас всего две ячейки, но их как бы в сумме четыре. Попробуйте представить, что это как бы очень просто.
| Собака | Кот | Енот | |
|---|---|---|---|
| Лает: | Да | Нет | Да |
| Кусает: | Кусают все! | ||
| Спит: | Иногда | Всегда | Никогда |
А еще можно соединять ячейки по вертикали. Но давайте не будем об этом… Впрочем я вам скажу волшебное слово rowspan, а вы уже сами делайте что хотите.
Удовлетворительный результат
Теперь давайте уберем эту ужасную рамку и восхитимся таблицей. Мы специально напишем border=0, чтобы ни у кого и в мыслях не было рисовать ее.…
| Собака | Кот | Енот | |
|---|---|---|---|
| Лает: | Да | Нет | Да |
| Кусает: | Кусают все! | ||
| Спит: | Иногда | Всегда | Никогда |
И посмотрим в последний раз на получившийся волшебный код для этой таблицы:
<TR>
<TD></TD>
<TH align=center>Собака</TH>
<TH align=center>Кот</TH>
<TH align=center>Енот</TH>
</TR>
<TR>
<TH>Лает:</TH>
<TD align=center>Да</TD>
<TD align=center>Нет</TD>
<TD align=center>Да</TD>
</TR>
<TR>
<TH>Кусает:</TH>
<TD colspan=3 align=center>Кусают все!</TD>
</TR>
<TR>
<TH>Спит:</TH>
<TD align=center>Иногда</TD>
<TD align=center>Всегда</TD>
<TD align=center>Никогда</TD>
</TR>
</TABLE>
Внутри ячеек, опять таки, вместо обычных слов могут находиться любые изученные нами теги (даже другие таблицы, но сделайте вид, что вы этого не слышали).
Именно с появлением таблиц в хтмл по всему миру начали появляться эти ужасные веб-сайты. Посмотрите на них — видите? Логотип сайта в одной ячейке, баннер сверху в той же строке, но в другой ячейке, меню сайта в левой колонке, текст написан в самой большой центральной колонке. И так далее.Все, закончили.
Ужас, таблицы поедают мозг!
Завтра — выпускной бал.
Домашнее задание
-
Попробуйте к таблице, рассматриваемой на уроке, добавить еще кого-нибудь кусающегося. Какое число вам прийдется поставить в атрибуте colspan?
-
Переведите таблицу Менделеева в хтмл.
Как вы думаете, Дмитрию Ивановичу такое снилось?
§7. Суббота: подведение итогов и что дальше
Давайте окинем взглядом наши нынешние возможности.Например, мы можем написать отличный пост в ЖЖ. Но не просто написать «Ой, девченки! Вчера была такая классная вечеринка!», а все подробно и досканально доложить. Кто куда смотрел, кто сколько ел и пил, о чем говорили в туалете. И все это с хронологическим перечислением, с полным анализом, со сводными таблицами и даже с графиками (если предварительно нарисовать их в фотошопе).
Мы еще не можем сделать свой сайт, но мы уже начинаем об это думать. Впрочем…
<HEAD>
<TITLE>Мой сайт</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=1251" />
</HEAD>
<BODY>
<H1>Я хочу написать, что:</H1>
…
</BODY>
</HTML>
Вот вам все необходимые обрамления для простейшего сайта. Вставьте вместо троеточия все, о чем вы хотите написать (нумерованным списком, с таблицами и картинками) сохраните получившийся текстовой файл с расширением .html и засовывайте в интернет. (В самой страшной строчке из показанных — мы просто постарались сказать, что пишем на русском языке. На всякий случай.)
Соседка относится к нам с гораздо большим уважением. Это факт.
В конце концов, мы теперь обрамляем все. Даже то, что не относится к хтмл.
Но давайте не будем забывать главной задачи, поставленной перед началом обучения. С этих пор на вверенных вам сайтах будут царить чистота и порядок. Босс на семь, или даже на девять процентов поднимет вам жалование, а те ребята из отдела программистов будут бегать к вам с цветами.
Не забывайте хтмл, берегите его.
Что дальше?
- Более глубокие знания о HTML и о его применении вы теперь можете самостоятельно узнавать из интернет-справочников. Есть еще много возможностей, которые мы не затронули за эту неделю.
- CSS - это то, что сделает ваш HTML еще более красивым. Для вас настало подходящее время узнать об этом подробнее.
- Слова XML, XHTML, WML, любойML больше не должны вас пугать. «XML/XSLT? Ха! Дайте мне учебник и неделю времени», должен быть ваш ответ.
- Но, на мой взгляд, самое правильное это ничего дальше не делать. Посвятите себя семье, мужу и малому бизнесу. Займитесь собою, сходите на аэробику. Вы только что научились штопать носки, а вышивание крестиком — это уже профессия.
Завершать полагается стихами
Если что-то хлопает,
То это пистон.
Если кто-то топает —
Скорее всего слон.
Но если вы слышите (или видите),
Кто-то танцует, дудя (дудея) в трубу,
То знайте, что видите (или слышите)
Трех волнующихся кенгуру!

Зиновий Липинский
иллюстрации автора


