Агрия • Ответить

Смайлик

Оформить текст

Жирным Наклонным Подчеркнутым Зачеркнутым Подстрочным Надстрочным

Выровнять текст

- Слева - - По центру - - Справа -

Вставить в текст

URL cсылку Изображение Видео Youtube Скрытый текст Тег для кода Тег для цитаты Тег для цвета Аудио SoundCloud

Код подтверждения:: Введите код в точности так, как вы его видите. Регистр символов не имеет значения.

[quote=Ranger post_id=6218 time=1292810094 user_id=2]
Вот такая вот вкратце банальная история как в басне Крылова про лебедя, рака и щуку. Теперь в познавательных целях мельком рассмотрим логику верстки шаблона, и роли браузера в этом процессе.

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

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

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

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

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

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

Расположение содержимого (картинка слева/справа, текст слева/справа…) и визуальные эффекты (текст жирный/косой/ссылки на другую страницу…) – все это задается путем обрамления содержимого так называемыми тегами, эти теги и есть наши слова двусторонних карточек говорящие браузеру, как, что и где необходимо отображать. Большинство тегов работает по принципу помещения содержимого между двумя тегами, открывающим тегом (начало эффекта), и закрывающим тегом (конец эффекта) – такая конструкция называется контейнером, из-за смыслового соответствия.

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

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

Пока такие теги используются в базовом виде, проблем с отображением в разных браузерах не возникает (хотя и здесь все зависит от версий браузеров). Но когда начинают использоваться конструкции посложнее, с тегами, где такие значения задаются через CSS, вот здесь и начинаются все проблемы, один браузер считает что по умолчанию для картинки положен отступ, другой что нет… И чем сложнее используется конструкция, тем больше у разных браузеров возникает разногласий по интерпретации кода.
[/quote]

Настройки

Отключить в этом сообщении BBCode

Отключить в этом сообщении смайлики

Не преобразовывать адреса URL в ссылки