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

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

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

Чтобы больше не вводить вас в заблуждение по этому вопросу, привожу целиком его сообщение: 

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

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

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

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

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

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

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

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

Элемент  IMG.

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

src="../IMG/Тут название картинки.jpg".

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

Пока что же давайте рассмотрим пример и попытаемся понять и работу адресов, и картиночек.

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

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

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

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

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

·         Top – для выравнивания верхней границы рисунка по самому верхнему элементу строки

·         Texttop - для выравнивания верхней границы рисунка по самому верхнему элементу текста

·         Middle – центр изображения выравнивается по базовой линии строки

·         Absmiddle – центр изображения выравнивается по середине строки

·         Baseline – нижняя граница изображения выравнивается по базовой линии строки

·         Bottom - аналогично

·         Absbottom – нижняя граница изображения выравнивается  по нижней границе текущей строки.

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

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

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