Добавим к тексту тень

Делаем тень в тексте

Делаем тень в тексте

Делается все очень просто. Нужно вывести текст 2 раза так что бы один текст выводился поверх второго.

Сделаем все по порядку. Выведем два раза текст.

<p style="font-size: 30px; color: #cccccc;"> Делаем тень в тексте</p> <p style="font-size: 30px; color: #000000;"> Делаем тень в тексте</p>

Делаем тень в тексте

Делаем тень в тексте

Все что теперь осталось - сместить второй текст вверх и влево. Для этого добавим стиль position: relative.
Это говорит от том что положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.

<p style="font-size: 30px; color: #cccccc;"> Делаем тень в тексте</p> <p style="font-size: 30px; color: #000000; position: relative; top: -50px; left: -3px;"> Делаем тень в тексте</p>

Вот что мы получим

Делаем тень в тексте

Делаем тень в тексте

Московский городской суд отклонил кассационную жалобу защиты Нины Юровой, тем самым оставил ее под стражей, передает «Эхо Москвы»

Как сообщает издание, владелица рекламного агентства Нина Юрова обвиняется во взломе страницы Филиппа Киркорова на сайте «Одноклассники.ru».

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

http://proit.com.ua/news/internet/2009/07/29/175732.html

Картинки, фоны и музыку я взял их из постов Kapitoshka_70 и Inmira за что им огромное спасибо

Включите звук на компьютере :)))

Женщина, стоя на гребне скалы, Круто нависшей над ширью морскою, Взглядом бежала до полной луны, Тая в минорном аккорде прибоя. Море на берег роняло слезу, Рокотом нежным звало и манило, Волнами камни ласкало внизу, В брызгах соленых любовь ей дарило. В этой окутанной магией мгле Вдруг услыхала призывные звуки, И наяву, но как будто во сне, Счастью навстречу раскинула руки. И закричала – Люблю я тебя! Смерть не ищу, лишь хочу быть с тобою. В крике гортанном – боль, радость, тоска Шаг… И себя отдала она морю

Код открытки

<center> <table border="0" cellspacing="0" cellpadding="5" style="border-collapse: separate; width: 500px; background: url('//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif'); padding: 5px;"> <tbody valign="top" align="center"> <tr> <td style="background: url('//img1.liveinternet.ru/images/attach/c/0//46/678/46678707_47.jpg');"> [flash=400,27,http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=http://www.playcast.ru/uploads/2009/05/23/1000250.mp3&autoPlay=true?playerMode=embedded] <img style="position: relative; top: -40px;" src="//img1.liveinternet.ru/images/attach/c/0//46/159/46159698_1.gif" vspace="10" alt="" /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/160/46160251_ch.gif" alt="Разделитель" vspace="10" /> <div style="border: none; width: 100%; text-align: center; font-size: 1.4em; color: #333333; font-family: verdana;"> <pre> Женщина, стоя на гребне скалы, Круто нависшей над ширью морскою, Взглядом бежала до полной луны, Тая в минорном аккорде прибоя. Море на берег роняло слезу, Рокотом нежным звало и манило, Волнами камни ласкало внизу, В брызгах соленых любовь ей дарило. В этой окутанной магией мгле Вдруг услыхала призывные звуки, И наяву, но как будто во сне, Счастью навстречу раскинула руки. И закричала – Люблю я тебя! Смерть не ищу, лишь хочу быть с тобою. В крике гортанном – боль, радость, тоска Шаг… И себя отдала она морю </pre> </div> </td> </tr> </tbody> </table> </center>

При желании замените ссылку на музыкальный файл, картинку. Ну и текст вставьте тот который Вам нужен

Не забываем убирать галочку с "Сохранять переводы строк в тексте."

Ученые из Университета Восточной Англии и больницы Норвича ищут женщин, согласных есть шоколад каждый день на протяжении целого года. Таким образом врачи хотят выяснить, может ли шоколад снижать риск сердечно-сосудистых заболеваний. Всего для участия в исследовании необходимо 40 женщин.

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

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

http://www.isra.com/news/113531

Из-за своей природной лени я не стал искать для примера фотки в безбрежном просторе инета, а взял их из постов Kapitoshka_70 и Inmira за что им огромное спасибо

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

Коды самих рисунков

<img src="//img1.liveinternet.ru/images/attach/c/0//46/160/46160251_ch.gif" alt="Разделитель" vspace="10" /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/164/46164159_vvvvvvvvvodv.gif" vspace="10" alt="" /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/160/46160251_ch.gif" alt="Разделитель" vspace="10" /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/159/46159982_1.gif" alt="" vspace="10" /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/160/46160251_ch.gif" alt="Разделитель" vspace="10" />

Обратите внимание на то что в код картинок добавлен vspace="10" это сделанго для того что бы рисунки не "слипались" а между ними оставался отступ в 10 пикселей

Коды фоновых рисунков

//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif - рамка //s15.radikal.ru/i189/0907/73/6f274c9dd2a1.jpg - фон

Заходим на http://vln.dp.ua/li/liphoto.php и заполняем поля формы.

Жмем на "получить код" и вот он код нашей рамки

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

<center> <table border="0" style="border-collapse: separate; width: 500px; background: url('//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif'); padding: 5px;"> <tbody valign="top" align="center"> <tr> <td style="background: url('//s15.radikal.ru/i189/0907/73/6f274c9dd2a1.jpg');"> <img src="//img1.liveinternet.ru/images/attach/c/0//46/160/46160251_ch.gif" alt="Разделитель" vspace="10" /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/164/46164159_vvvvvvvvvodv.gif" vspace="10" alt="" /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/160/46160251_ch.gif" alt="Разделитель" vspace="10" /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/159/46159982_1.gif" alt="" vspace="10" /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/160/46160251_ch.gif" alt="Разделитель" vspace="10" /> </td> </tr> </tbody> </table> </center>

Вот и все :))))
Если у Вас есть посты с картинками и Вы хотите разместить их в рамку то нужно перед кодом первого рисунка добавть код который до подчеркнутой красным строкой, а после последнего рисунка - код который после подчеркнутой строки

Не забываем убирать галочку "сохранять переносы"

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

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

О работе испанцев сообщает на своих страницах специализированное издание Progress in Neuro-Psychopharmacology & Biological Psychiatry.

С часами в руках

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

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

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

"Стимулирующий эффект кофеина демонстрируют многочисленные эксперименты, - говорит ведущий исследователь Ана Адан. - Но ни один из них не изучал этого эффекта с учетом половых различий".

"Это исследование представляет собой интересную возможность взглянуть на то, как определенные продукты и питательные вещества влияют на мужчин и женщин", - соглашается с коллегой Анна Денни из британского Фонда питания.
http://www.ua.all-biz.info/news/index.php?newsid=289517

Основатель Microsoft и богатейший человек мира Билл Гейтс включился в борьбу с ураганами, сообщает InoPressa.ru со ссылкой на The Sunday Times. При помощи целого «флота» барж, расположенных цепочкой вдоль побережья США, он планирует охлаждать тропические воды и таким образом снижать силу этих разрушительных погодных явлений.

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

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

Некоторые опасения вызывают и последствия применения этого метода: неизвестно, как он скажется на экологии и не приведет ли, например, к «отражению» идущего на США урагана в сторону Кубы.

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

Газета напоминает, что попытки манипулировать погодой предпринимались в мире неоднократно. К примеру, в годы Ветнамской войны Пентагон провел так называемую операцию «Попай» — самолеты распыляли над облаками йодистое серебро, чтобы продлить сезон дождей в этой части Юго-Восточной Азии и тем самым «затопить» в джунглях войска Северного Вьетнама.

http://vlasti.net/news/53675

Сделать рамку такого вида? Нет ничего проще!

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

Возьмем 3 рисунка

Первый рисунок будет использован для рамки, второй - фон текста и третий просто рисунок :)

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

Вот ссылки на наши рисунки.

//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif //i029.radikal.ru/0904/25/910ce6bcf443.jpg //s46.radikal.ru/i113/0904/b4/17ffaba36df4.jpg

Все что осталось что бы получить код рамки это зайти на http://vln.dp.ua/cart.php и заполнить все поля формы

Если картинка в рамке не нужна то оставьте поле не заполненым и получите код рамки с текстом

Жмем на "получить код" и получаем код для вставки в дневник

Важно! Не забываем убирать галочку с "Сохранять переводы строк в тексте." в редакторе поста

Правоохранительные органы РФ получат доступ к письмам, посылкам, бандеролям и другим почтовым отправлениям россиян. Соответствующий приказ "Об утверждении требований к сетям и средствам почтовой связи для проведения оперативно-розыскных мероприятий" подписал министр связи и массовых коммуникаций России Игорь Щеголев, документ утвержден Минюстом страны 6 июля. Приказ вступает в силу с 21 июля, сообщает "Дело".

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

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

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

http://podrobnosti.ua/criminal/2009/07/17/616152.html

Разместим изображение в дневнике. Для этого просто прикрепим файл изображения к сообщению

Код солнышка:

<img src="//img0.liveinternet.ru/images/attach/c/0//46/290/46290064_solnuyshko.jpg" width="680" height="680" alt=" (680x680, 37Kb)" />

Сделаем всплывающую подсказку к рисунку. Для этого допишем в код рисунка title.

<img src="//img0.liveinternet.ru/images/attach/c/0//46/290/46290064_solnuyshko.jpg" width="680" height="680" alt=" (680x680, 37Kb)" title="Доброе утро! Удачного дня! Отличного настроения!"/>

Теперь при наведении мышки на рисунок будет появляться подсказка с нашим текстом

Есть еще один параметр рисунка который можно использовать для удобства при редактирования постов с рисунками. Это alt. Alt - Это текст который будет виден вместо картинки, если невозможно её показать.
Изначально в нем прописан размер рисунка, но этот текст можно изменить на любой другой. Например можно подписать рисунок.

<img src="//img0.liveinternet.ru/images/attach/c/0//46/290/46290064_solnuyshko.jpg" width="680" height="680" alt="Рисунок солнышка" title="Доброе утро! Удачного дня! Отличного настроения!"/>

width и height это ширины и высота рисунка. Можно показать рисунок другого размера просто указав в коде width и height

<img src="//img0.liveinternet.ru/images/attach/c/0//46/290/46290064_solnuyshko.jpg" width="200" height="200" alt="Рисунок солнышка" title="Доброе утро! Удачного дня! Отличного настроения!"/>

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

Рисунки можно использовать и в ссылках. Для примера загружу уменьшиную копию солнышка

Код маленького солнышка:

<img src="//img1.liveinternet.ru/images/attach/c/0//46/290/46290994_solnuyshko.jpg" width="100" height="100" alt=" (100x100, 3Kb)">

Для того что бы картинка была ссылкой сделаем вот такой код ( код я показал в сокращенном виде для простоты чтения)

<a target="_blank" href="http://....."><img src="http://...." /></a>

Сделаем код что бы видно было маленькое солнышко, а при клике на нем в новом окне выводилось солнышко в полном размере.
Для этого веред кодом маленького солнышка вставим код <a href="сслыка на большое солнце">, а после кода маленького солнышка - </a>

. <a target="_blank" href="//img0.liveinternet.ru/images/attach/c/0//46/290/46290064_solnuyshko.jpg" title="Посмотреть в полном размере"> <img src="//img1.liveinternet.ru/images/attach/c/0//46/290/46290994_solnuyshko.jpg" width="100" height="100" alt=" (100x100, 3Kb)"></a>

Обратите внимание на то что title прописан в коде ссылки, а не рисунка и на параметр ссылки target="_blank"!
Target Указывает где открывать ссылку. _blank - открыть в новом окне, Если вы не укажите target то ссылка откроется в текущем окне

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

<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=MP3_URL" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded" height="27" width="400">

Вместо MP3_URL нужно прописать ссылку на mp3 файл!!!!!!

Например ссылка на музыкалный файл:

//img1.liveinternet.ru/images/attach/c/0/3705/3705086_mail_128394_06__real_snow_white.mp3

код должен выглядеть следущим образом

<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=//img1.liveinternet.ru/images/attach/c/0/3705/3705086_mail_128394_06__real_snow_white.mp3" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded" height="27" width="400">

Вот какой вид плеера мы получим

Можно сделать что бы плеер открывался в новом окне при нажатии на кнопку "слушать":

Название песни: real_snow_white

Но для этого нужно разрешить в Вашем браузере всплывающие окна с сайта vln.dp.ua.

Код для такого варианта:

<span style="font-family: verdana; font-size: 15px;">Название песни: NAME</span><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://vln.dp.ua/au.php?mp3=MP3_URL"><img src="//img0.liveinternet.ru/images/attach/c/0/35/914/35914736_mp3.gif" border="0" align="absmiddle" /></a>

Не забываем вместо MP3_URL прописывать ссылку на mp3 файл, а вместо NAME - название песни!!!!!!

Ну и для тех кто не хочет возится с кодом, зайдите на http://vln.dp.ua/mp3.php, заполните два поля с названием песни и ссылкой на файл и вы получите готовые коды для вставки в дневник

Основные свойства чая заключаются в содержании в нем флавонидов, веществ, найденных в различных фруктах, овощах, травах, листьях чая и различных напитках. Ученые Университета Восточной Англии и Королевского колледжа Лондона рассмотрели результаты 133 исследований этих продуктов.

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

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

Флавониды, содержащиеся в значительном количестве в черном чае, уменьшают содержание холестерина в крови и повышают артериальное давление. Вывод британский ученых: какао и шоколад показан к употреблению людям, страдающим сердечнососудистыми заболеваниями. Употребление черного чая следует ограничить людям с нестабильным артериальным давлением.
http://dietolog.com.ua/news/example.php?subaction=...0&archive=&start_from=&ucat=1&

Сделаем открытку со стихами. Ввиду того что я ленивый и мне лень искать для примера фоны и текст стихов, я позаимствовал все это у inmira с её поста http://www.liveinternet.ru/users/inmira/post99542587/.

- Фон для рамки

- Фон для текста и картинки

- Картинка.

Коды картинок ( видны при редактировании черновика или поста )

<img alt="Фон таблицы" src="//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif" /> <img alt="Фон ячеек таблицы" src="//i029.radikal.ru/0904/25/910ce6bcf443.jpg" /> <img alt="Рисунок 1" src="//s46.radikal.ru/i113/0904/b4/17ffaba36df4.jpg" />

Размеры картинок уменьшены что бы они не занимали много места в посте

Сделаем рамку для открытки. Для этого построим таблицу 1х1 - одна строка, один столбец. Для таблицы пропишем background.
В background укажем ссылку на фоновую картинку для рамки

<table width="800" height="100" background="//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif"> <tbody> <tr> <td> </td> </tr> </tbody> </table>

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

<table width="800" height="100" background="//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif"> <tbody> <tr> <td background="//i029.radikal.ru/0904/25/910ce6bcf443.jpg"> </td> </tr> </tbody> </table>

Получилось не совсем то что мы хотели. Это потому что мы "забыли" указать отступ от границы таблицы до ячейки таблицы.
Исправим это дописав в тег <table> параметр cellspacing

<table width="800" height="100" background="//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif" cellspacing="8"> <tbody> <tr> <td background="//i029.radikal.ru/0904/25/910ce6bcf443.jpg"> </td> </tr> </tbody> </table>

И все равно ничего не получилось. Все это потому что в дневнике, для таблицы в глобальных стилях указано border-collapse: collape и из-за этого cellspacing игнорируется
Что бы это исправить нужно к <table> добавить стиль style="border-collapse: separate;"

<table width="800" height="100" background="//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif" cellspacing="8" style="border-collapse: separate;"> <tbody> <tr> <td background="//i029.radikal.ru/0904/25/910ce6bcf443.jpg"> </td> </tr> </tbody> </table>

Ура! У нас есть рамка :). Все что нам осталось это вставить в ячейку таблицы рисунок и текст стихов

<table width="800" height="100" background="//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif" cellspacing="8" style="border-collapse: separate;"> <tbody> <tr> <td background="//i029.radikal.ru/0904/25/910ce6bcf443.jpg"> <img style="width: 266px; height: 203px;" alt="Рисунок 1" src="//s46.radikal.ru/i113/0904/b4/17ffaba36df4.jpg" /> Весь год, не соврав никому ни на грошь, Мы ждем, как небесную манну, Тот день, когда можно удариться в ложь, Невинно придаться обману! Набрав арсенал завиральный идей, С кощунственным трепетом в теле Мы ловим доверчивых честных людей, Забывших о первоапреле. И мы их находим, смиренных ягнят, Простецки развесивших уши. И стрелы обмана со свистом летят В их светлые, чистые души. Но первоапрельский веселый обман - Сердечная наша потеха. И стрелы не кровь высекают из ран, А добрые искорки смеха. О, как же он весел и как же хорош, Пришедший на смену метелям, Тот праздник, во смех превращающий ложь! Сограждане, с первым апреля! </td> </tr> </tbody> </table>

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

Не все так просто :). Во первых текст расположен не справа от рисуна, а под ним. Во вторых текст нечитаемый из-за того что цвет текста черный и размер шрифта маленький.
Что бы текст располагался справа от рисунка добавим в код рисунка align="left" в этом случае рисунок будет располагаться слевой стороны ячейки, а текст будет "обтекать" его справа.
Что бы изменить цвет текста и размер шрифта добавим к <td> стиль style="color: #fffcfc; font-size: 18px;". Цвет текста #fffcfc, размер шрифта 18px.

<table width="800" height="100" background="//s39.radikal.ru/i084/0904/81/c5fa856cfa98.gif" cellspacing="8" style="border-collapse: separate;"> <tbody> <tr> <td background="//i029.radikal.ru/0904/25/910ce6bcf443.jpg" style="color: #fffcfc; font-size: 18px;"> <img style="width: 266px; height: 203px;" alt="Рисунок 1" src="//s46.radikal.ru/i113/0904/b4/17ffaba36df4.jpg" align="left" /> Весь год, не соврав никому ни на грошь, Мы ждем, как небесную манну, Тот день, когда можно удариться в ложь, Невинно придаться обману! Набрав арсенал завиральный идей, С кощунственным трепетом в теле Мы ловим доверчивых честных людей, Забывших о первоапреле. И мы их находим, смиренных ягнят, Простецки развесивших уши. И стрелы обмана со свистом летят В их светлые, чистые души. Но первоапрельский веселый обман - Сердечная наша потеха. И стрелы не кровь высекают из ран, А добрые искорки смеха. О, как же он весел и как же хорош, Пришедший на смену метелям, Тот праздник, во смех превращающий ложь! Сограждане, с первым апреля! </td> </tr> </tbody> </table>

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

Уже лучше :) Но есть недоработка. Текст заползает под рисунок. Что бы этого не было поместим рисунок текст стихов в тег <div>. со стилем style="float: left" для рисунка и style="float: right" для текста.
Я приведу пример сокрашенного кода что бы было понятнее

<table> ....... ....... <td> <div style="float: left: width: 300px;"> <img style="width: 266px; height: 203px;" alt="Рисунок 1" src="//s46.radikal.ru/i113/0904/b4/17ffaba36df4.jpg" align="left" /> </div> <div style="float: right; width: 450px;"> Текст стихов </div> </td> ....... ........ </table>

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

Получили практически то что хотели. Осталось привести текст стихов в "божеский" вид. Можно установить галочку "Сохранять переводы строк в тексте.", но я лучше уберу это галочку и добавлю еще один тег <pre>. Все что находится внутри этого тега будет выводится со всеми пробелами и переносами строк.

<table> ....... ....... <td> <div style="float: left; width: 300px;"> <img style="width: 266px; height: 203px;" alt="Рисунок 1" src="//s46.radikal.ru/i113/0904/b4/17ffaba36df4.jpg" align="left" /> </div> <div style="float: right; width: 450px;"> <pre> Текст стихов </pre> </div> </td> ....... ........ </table>

Вот мы и получили то что хотели.

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

Иногда нужно выложить код в дневник. Для этого используют тег .

<textarea> Если текст кода слишком длиный то появятся полосы прокрутки. Копировать такой текст не очень удобно. </textarea>

Если текст кода слишком длиный то появятся полосы прокрутки. Копировать такой текст не очень удобно.

Можно в добавить 2 параметра cols="30" - ширина области вывода 30 символов и rows="4" - высота области вывода 4 строки. Значение параметров взято для примера 30 и 4.

<textarea cols="30" rows="4"> Если текст кода слишком длиный то появятся полосы прокрутки. Копировать такой текст не очень удобно. </textarea>

Если текст кода слишком длиный то появятся полосы прокрутки. Копировать такой текст не очень удобно.

"Разукрасить" вывод кода можно если добавить к стилевые параметры. Например цвет текст, фоновый цвет, размер шрифта, цвет и толщина рамки и тд.

<textarea readonly="readonly" cols="40" rows="4" style="font-size: 11px; color: #f00000; background-color: #ffffcc; border: solid 1px #0000f0;"> Если текст кода слишком длиный то появятся полосы прокрутки. Копировать такой текст не очень удобно. </textarea>

Вот и все :)

Если текст кода слишком длиный то появятся полосы прокрутки. Копировать такой текст не очень удобно.

Разместим в дневнике большое количество небольших по размеру рисунков. Для примера я взял 6 анимированных смыйликов

Для того что бы рисунки располагались горизонтально необходимо убрать галочку с "Сохранять переводы строк в тексте.".

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

Для этого построим таблицу из двух колонок и трех строк ( по количеству смайлов одного размера )

<table border="1"> <tbody> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </tbody> </table>

Коды рисунков смайлов ( видны при редактировании черновика или поста )

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

<img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197900_s1.gif" width="110" height="110" alt="большой1" /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/197/46197914_s3.gif" width="100" height="81" alt="Большой3" /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198162_big01.gif" width="53" height="32" alt="Маленький1" /> <img src="//img0.liveinternet.ru/images/attach/c/0//46/198/46198168_big02.gif" width="32" height="32" alt="Маленький2" /> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198178_big03.gif" width="32" height="32" alt="Маленький3" />

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

<table border="1"> <tbody> <tr> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197900_s1.gif" width="110" height="110" alt="большой1" /> </td> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198162_big01.gif" width="53" height="32" alt="Маленький1" /> </td> </tr> <tr> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" /> </td> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/198/46198168_big02.gif" width="32" height="32" alt="Маленький2" /> </td> </tr> <tr> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/197/46197914_s3.gif" width="100" height="81" alt="Большой3" /> </td> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198178_big03.gif" width="32" height="32" alt="Маленький3" /> </td> </tr> </tbody> </table>

Ширина первой и второй колонки не одинаковые что не всегда красиво. Добавим в нашу таблицу еще одну строку Эта строка задаст ширину колонок в 200 пикселей ( можно указать ширину в процентах от общей ширины таблицы )

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

<table border="1"> <col width="200px"></col> <col width="200px"></col> <tbody> ............. ............. </tbody> </table>

Осталась самая малость. Разместить рисунки по центру ячеек. Для этого в добавим valign="middle" и align="center"

<table border="1"> <col width="200px"></col> <col width="200px"></col> <tbody align="center" valign="middle"> .......... ........... </tbody> </table>

Подпишем колонки. Для этого добавим вначале еще одну строку в которой вместо пропишем

<table border="1"> <col width="200px"></col> <col width="200px"></col> <tbody align="center" valign="middle"> <tr> <th>Большие смайлы</th> <th>Маленькие смайлы</th> </tr> .......... ........... </tbody> </table>

Большие смалы	Маленькие смайлы

Добавим к каждому смайлу название.

<table border="1"> <col width="200px"></col> <col width="200px"></col> <tbody align="center" valign="middle"> <tr> <th>Большие смалы</th> <th>Маленькие смайлы</th> </tr> <tr> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197900_s1.gif" width="110" height="110" alt="большой1" />Большой1 </td> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198162_big01.gif" width="53" height="32" alt="Маленький1" />Маленький1 </td> </tr> <tr> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" />Большой2 </td> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/198/46198168_big02.gif" width="32" height="32" alt="Маленький2" />Маленький2 </td> </tr> <tr> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/197/46197914_s3.gif" width="100" height="81" alt="Большой3" />Большой3 </td> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198178_big03.gif" width="32" height="32" alt="Маленький3" />Маленький3 </td> </tr> </tbody> </table>

Вид таблицы мягко говоря не очень :)

Большие смалы	Маленькие смайлы
Большой1	Маленький1
Большой2	Маленький2
Большой3	Маленький3

Исправим это добавив еще 2 колонки для названий смайлов

Обратите внимание на то что добавилось еще две строки с и . Даже если в ячейках ничего не выводится количество ячеек в каждой строке должно быть одинаковым!!!!!

<table border="1"> <col width="200px"></col> <col width="200px"></col> <col width="200px"></col> <col width="200px"></col> <tbody align="center" valign="middle"> <tr> <th>Большие смалы</th> <th></th> <th>Маленькие смайлы</th> <th></th> </tr> <tr> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197900_s1.gif" width="110" height="110" alt="большой1" /> </td> <td>Большой1</td> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198162_big01.gif" width="53" height="32" alt="Маленький1" /> </td> <td>Маленький1</td> </tr> <tr> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" /> </td> <td>Большой2</td> <td> <img src="//img0.liveinternet.ru/images/attach/c/0//46/198/46198168_big02.gif" width="32" height="32" alt="Маленький2" /> </td> <td>Маленький2</td> </tr> <tr> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/197/46197914_s3.gif" width="100" height="81" alt="Большой3" /> </td> <td>Большой3</td> <td> <img src="//img1.liveinternet.ru/images/attach/c/0//46/198/46198178_big03.gif" width="32" height="32" alt="Маленький3" /> </td> <td>Маленький3</td> </tr> </tbody> </table>

Название колонок "Большие смайлы и маленькие смайлы" не совсем правильно расположены

Большие смалы		Маденькие смайлы
	Большой1		Маленький1
	Большой2		Маленький2
	Большой3		Маленький3

Объеденим попарно ячейки с названием колонок.

<table border="1"> <col width="200px"></col> <col width="200px"></col> <col width="200px"></col> <col width="200px"></col> <tbody align="center" valign="middle"> <tr> <th colspan="2" rowspan="1">Большие смалы</th> <th colspan="2" rowspan="1">Маленькие смайлы</th> </tr> ................... ................... </tbody> </table>

Большие смалы		Маденькие смайлы
	Большой1		Маленький1
	Большой2		Маленький2
	Большой3		Маленький3

Не нравится мне грозный красный смайл :)). Я его выделю каким то фоном что бы он бросался в глаза :). Добавлю в ячеку с этим смайлом фоновый цвет

Заодно и строку с названием колонок выделю фоном

<table> <tbody> <tr bgcolor="#ccf0cc"> <th colspan="2" rowsapn="1">Большие смалы</th> <th colspan="2" rowspan="1">Маденькие смайлы</th> </tr> ..... ..... <td bgcolor="#f0cccc"> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" /> </td> <td bgcolor="#f0cccc">Большой2</td> <td> ....... ....... </td></tbody> </table>

Большие смалы		Маденькие смайлы
	Большой1		Маленький1
	Большой2		Маленький2
	Большой3		Маленький3

Сделаем этот грозный смайл не таким грозным. Разместим его на этом фоновом рисунке :))

Для этого добавим в ячейку с этим смайлом параметр background

<table> <tbody> <tr bgcolor="#ccf0cc"> <th colspan="2" rowsapn="1">Большие смалы</th> <th colspan="2" rowspan="1">Маденькие смайлы</th> </tr> ..... ..... <td bgcolor="#f0cccc" background="//img1.liveinternet.ru/images/attach/c/0//46/199/46199719_images.jpg"> <img src="//img0.liveinternet.ru/images/attach/c/0//46/197/46197908_s2.gif" width="85" height="77" alt="большой2" /> </td> <td bgcolor="#f0cccc">Большой2</td> <td> ....... ....... </td></tbody> </table>

Большие смалы		Маденькие смайлы
	Большой1		Маленький1
	Большой2		Маленький2
	Большой3		Маленький3

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

ps: Добавьте в код рисунка title="текст" и при наведении мышки на рисунок будет выскакивать подсказка с текстом

<img src="//img1.liveinternet.ru/images/attach/c/0//46/199/46199719_images.jpg" width="116" height="116" alt=" (116x116, 2Kb)" title="Это фоновый рисунок" />

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

Создадим таблицу 4 строки 2 колонки

<table border="1" width="100%"> <thead align="left"> <tr> <td>Первая строка. Текст1</td> <td>Первая строка. Текст2</td> </tr> </thead> <tfoot align="right"> <tr> <td>Последняя строка. Текст1</td> <td>Последняя строка. Текст2</td> </tr> </tfoot> <tbody align="center"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </tbody> </table>

В первой строке текст размещен слева, в последней строке - справа, а в централной строке - посредине

Первая строка. Текст1	Первая строка. Текст2
Последняя строка. Текст1	Последняя строка. Текст2
Текст1	Текст2

Добавим заголовок к нашей таблице. Для этого используем тег . Для этого тега есть два параметра align - задает выравнивание заголовка и valign - определяет вверху таблицы или внизу будет выводится заголовок.

допустим только внутри тега сразу после открывающего тега.

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

• left - В браузере Internet Explorer и Opera располагает заголовок сверху и выравнивает его по левому краю таблицы. В Firefox заголовок располагается слева от таблицы.
• right -В браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. В браузере Netscape параметр игнорируется, а в Firefox заголовок располагается от таблицы справа.
• center - Заголовок располагается сверху таблицы по ее центру.
• top - Результат аналогичен действию параметра center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
• bottom - Заголовок размещается внизу таблицы по ее центру.

<table border="1" width="70%"> <caption valign="top">Заголовок таблицы</caption> <thead align="left"> <tr> <td>Первая строка. Текст1</td> <td>Первая строка. Текст2</td> </tr> </thead> <tfoot align="right"> <tr> <td>Последняя строка. Текст1</td> <td>Последняя строка. Текст2</td> </tr> </tfoot> <tbody align="center"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </tbody> </table>

Заголовок таблицы

Первая строка. Текст1	Первая строка. Текст2
Последняя строка. Текст1	Последняя строка. Текст2
Текст1	Текст2

Если задать align="bottom" то заголовок будет внизу таблицы

Заголовок таблицы

Первая строка. Текст1	Первая строка. Текст2
Последняя строка. Текст1	Последняя строка. Текст2
Текст1	Текст2

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

<table border="1" width="70%"> <tbody align="center"> <tr> <th>Заголовок1</th> <th>Заголовок2</th> </tr> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </tbody> </table>

Таблица с заголовками

Заголовок1	Заголовок2
Текст1	Текст2

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

<table border="1" width="70%"> <colspan> <col width="40%"></col> <col width="60%"></col> </colspan> <tbody align="center"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> <tr> <td>Текст3</td> <td>Текст4</td> </tr> </tbody> </table>

Текст1	Текст2
Текст3	Текст4

Объеденим несколько ячеек таблицы. Для этого в теге нужно указать colspan - объеденяет горизонтальные ячейки, rowspan - вертикальные

Объеденим 2 ячейки первой строки в одну ячейку

<table border="1" width="70%"> <tbody align="center"> <tr> <td colspan="2" rowspan="1">Текст1</td> </tr> <tr> <td>Текст2</td> <td>Текст3</td> </tr> </tbody> </table>

Текст1
Текст2	Текст3

Объеденим 2 ячейки первого столбца в одну ячейку

<table border="1" width="70%"> <tbody align="center"> <tr> <td colspan="1" rowspan="2">Текст1</td> <td>Текст2</td> </tr> <tr> <td>Текст3</td> </tr> </tbody> </table>

Текст1	Текст2
	Текст3

И последнее. Параметры тега cellpadding - отступ от рамки до содержимого ячейки и cellspacing- расстояние между ячейками.

<table border="1" cellspacing="10" cellpadding="30"> <tbody align="center"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> <tr> <td>Текст3</td> <td>Текст3</td> </tr> </tbody> </table>

Текст1	Текст2
Текст3	Текст3

Вот собственно и все :))

Таблица определяется тегами и .
Внутри этих тэгов допускаются теги

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

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

Построим простейшую таблицу, состоящую из одной строки и двух столбцов.

<table> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </table>
Мы получим такую таблицу ( фоновый цвет сделан для того что бы выделить границы таблицы)

Текст1

Текст2

Добавим рамку к нашей таблице. Для этого нужно в тег добавить border="1" ( Этот параметр определяет ширину рамки таблицы ), если нужна рамка толщиной 1 пиксель то можно написать border без параметров

<table border="1"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </table>
Получим таблицу с рамкой

Текст1

Текст2

Рамка появилась, но она какая то мрачная :) Попробуем разукрасить рамку, добавив еще один параметр bordercolor который определяет цвет рамки. Сделаем нашу рамку ядовито-красного цвета :).

<table border="1" bordercolor="#FF0000"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </table>

Вот наша таблица с красной рамкой

Текст1

Текст2

Теперь изменим цвет фона таблицы. Для этого добавим bgcolor

<table border="1" bordercolor="#FF0000" bgcolor="#ffffcc"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </table>

Вот как выглядит наш пример

Текст1

Текст2

Сделаем нашу таблицу с фоновым рисунком

Для этого зальем фоновый рисунок в черновик

Код нашего фонового рисунка

<img src="//img1.liveinternet.ru/images/attach/c/0//46/139/46139423_images.jpg" width="116" height="116" alt=" (116x116, 2Kb)" />

Теперь добавим к нашей таблице параметр background и укажем ссылку на наш фоновый рисунок

<table border="1" bordercolor="#FF0000" bgcolor="#ffffcc" background="//img1.liveinternet.ru/images/attach/c/0//46/139/46139423_images.jpg"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </table>

Наша таблица теперь выглядит повеселее :)

Текст1

Текст2

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

Код рисунка

<img src="//img1.liveinternet.ru/images/attach/c/0//46/140/46140506_3Dgraphics_ICQ_flower_005283_.jpg" width="640" height="480" alt=" (640x480, 145Kb)" />

Код таблицы будет таким

<table border="1" bordercolor="#FF0000" bgcolor="#ffffcc" background="//img1.liveinternet.ru/images/attach/c/0//46/140/46140506_3Dgraphics_ICQ_flower_005283_.jpg"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </table>

Текст1

Текст2

Фоновый рисунок есть, но он обрезан по размеру таблицы. Что бы это исправить нужно добавить ширину width и высоту height таблицы. Ширину и высоту таблицы сделаем такими же как и ширина и высота фонового рисунка

<table border="1" bordercolor="#FF0000" bgcolor="#ffffcc" background="//img1.liveinternet.ru/images/attach/c/0//46/140/46140506_3Dgraphics_ICQ_flower_005283_.jpg" width="640" height="480"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </table>

Вот как будет выглядеть наша таблица

Текст1

Текст2

Наша таблица размещается на странице слева, разместим её посредине страницы добавив параметр align. Допустимы значения этого параметра left - слева, right - справа, center - разместить по центру

<table border="1" bordercolor="#FF0000" bgcolor="#ffffcc" background="//img1.liveinternet.ru/images/attach/c/0//46/140/46140506_3Dgraphics_ICQ_flower_005283_.jpg" width="640" height="480" align="center"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </table>

Вот как это будет выглядеть

Текст1

Текст2

Текст с ячейках таблицы расположен слева и по центру вертикали. Оставим первую ячейку без изменения, а во второй ячейке таблицы разместим текст в верхнем правом углу. Для этого добавим к ячейке 2 параметра align - выравнивание по горизонтале и valign - выравнивание по вертикале.

<table border="1" bordercolor="#FF0000" bgcolor="#ffffcc" background="//img1.liveinternet.ru/images/attach/c/0//46/140/46140506_3Dgraphics_ICQ_flower_005283_.jpg" width="640" height="480" align="center"> <tr> <td>Текст1</td> <td align="right" valign="top">Текст2</td> </tr> </table>

Текст1

Текст2

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

Обратите внимание что значения align и valign теперь прописаны в теге .

<table border="1" bordercolor="#FF0000" bgcolor="#ffffcc" background="//img1.liveinternet.ru/images/attach/c/0//46/140/46140506_3Dgraphics_ICQ_flower_005283_.jpg" width="640" height="480" align="center"> <tbody align="center" valign="top"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </tbody> </table>

Теперь в обеих ячейках таблицы текст располагается вверху и по центру.

valign может принимать значения top - вверху. middle - по центру, bottom - внизу

Текст1

Текст2

Рамка таблицы теперь портит весь вид. Уберем её и окончательно получим такую таблицу

<table background="//img1.liveinternet.ru/images/attach/c/0//46/140/46140506_3Dgraphics_ICQ_flower_005283_.jpg" width="640" height="480" align="center"> <tbody align="center" valign="top"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </tbody> </table>

Текст1

Текст2

Пожалуй пока все. В следущий раз расскажу о других возможностях вывода таблиц

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

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

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

http://www.ua.all-biz.info/news/index.php?newsid=287131

Для того что бы сделать отступы на странице можно применить стилевые параметры margin и padding.
Margin определяет отступ от границы текущего элемента до внутренней границы его родительского элемента. Родительский элемент это элемент внутри которого находится текущий элемент.
Например
1 <div> 2 <div> 3 <div></div> </div> 4 <div></div> </div>
Для 2-го дива родительским будет 1-й див. Для 3-го дива родительский - 2-й. Для 4-го дива родительский 1-й див
Отступы можно указывать в пикселях, процентах или других допустимых в css единицах. margin допускает до 4-х аргументов

• 1 агрумент - задает отступ для всех сторон элемента
• 2 аргумента - первый аргумент задает отступ сверху и снизу, а второй - слева и справа
• 3 аргумента - первый задает отступ от верхнего края, второй слева и справа, а трети от нижнего края
• 4 аргумента - задают отступы от верхнего, правого, нижнего и левого края

возможны варианты:

• margin-top - отступ сверху
• margin-bottom - отступ снизу
• margin-left - отступ слева
• margin-right - щтступ справа

Вариант без отсутпа:
<div style="border: solid 1px; width: 200px; height: 200px;"> <div style="border: solid 1px; width: 100px; height: 100px;">Текст</div> </div>
Делает отступы
<div style="border: solid 1px; width: 200px; height: 200px;"> <div style="border: solid 1px; width: 100px; height: 100px; margin: 20px;">Текст</div> </div>
Для того что бы таблица или див разместить посредине родительского элемента добавьте стиль margin-left: auto; margin-right: auto; тогда в любом браузере будет выводится по центру.
<div style="border: solid 1px; width: 200px; height: 200px; text-align: center;"> <div style="border: solid 1px; width: 100px; height: 100px; margin-top: 20px; margin-left: auto; margin-right: auto;">Текст</div> </div>

Все вышесказанное относиться и к padding - который задает отступ от края элемента до воображаемого прямоугольника, ограничивающего его содержание.
Делает отступы
<div style="border: solid 1px; width: 100px; padding: 10px;">Текст</div>
<p style="border: solid 1px; width: 100px; padding: 10px;">Текст</p>

Текст

Что бы сделать отступ от рисунка до текста, обтекающего его, добавте к коду рисунка 2 параметра vspace="10" - отступ по вертикале, и hspace ="10" - отступ по горизонтале. 10 - это значение отступа в пикселях.

<img src="//img1.liveinternet.ru/images/attach/c/0//45/993/45993147_111.gif" width="100" height="100" alt=" (100x100, 28Kb)" aling="left" hspace="10" vspace="10" />

Например. Нужно текст поместить в рамку. Если мы не делаем отступов то результат будет такой

<div style="background: url('//img1.liveinternet.ru/images/attach/c/0//46/1/46001042_Pic3.jpg'); width: 378px; height: 459px; border: solid 1px #ffffff;"> Текст </div>
Текст будет выведен в верхнем левом углу. Для того что бы это исправить заключим текст в див и для этого дива укажим отступы.
<div style="background: url('//img1.liveinternet.ru/images/attach/c/0//46/1/46001042_Pic3.jpg'); width: 378px; height: 459px; border: solid 1px #ffffff;"> <div style="margin-top: 80px; margin-left: 80px; width: 220px; height: 300px; border: solid 1px #0000f0;"> Текст </div> </div>
Все красиво, но текст вплотную прилегяет к рамке дива. Что бы этого не было нужен padding
<div style="background: url('//img1.liveinternet.ru/images/attach/c/0//46/1/46001042_Pic3.jpg'); width: 378px; height: 459px; border: solid 1px #ffffff;"> <div style="margin-top: 80px; margin-left: 80px; width: 220px; height: 300px; border: solid 1px #0000f0; padding: 10px;"> Текст </div> </div>
Пример использования padding
<span style="background-color: #89abcd;">Текст</span>
Текст Текст выглядит не совсеми красиво.
Добавим padding
<span style="background-color: #89abcd; padding: 2px 10px 2px 10px;">Текст</span>

Текст

По моим наблюдениям отступ сверху не работает в дневнике если нет border. Добавляйте в стили border: solid 1px #ffffff; Цвет рамки нужно подобрать под цвет общего фона, что бы рамки не было видно