Основой любого сайта является текст на особом языке, называемом HTML. Текст на этом языке выглядит для начинающего устрашающе.
Но не так страшен чёрт как его малюют. Разберемся в его основах.
Текст на языке HTML предназначен, чтоб специальная программа с названием браузер представила на экране содержимое страницы в удобном для чтения виде, приспособленном к имеющемуся дисплею. Слово «браузер» переводится примерно как «просмотрщик».
Теги и элементы
Текст HTML кроме собственно информативного текста содержит дополнительную информацию об оформлении текста (цвете, размерах, положении) и элементов, встроенных в текст (картинок, таблиц и того подобного). Дополнительная информация размещается внутри тегов. Теги — это тоже текст, просто заключенный между знаками угловых скобок (или знаков неравенства, если хотите): «<» и «>». Содержимое тегов напрямую не отображается, но лишь влияет на оформление браузером внутреннего гипертекста (цвет, размер и так далее).
Теги бывают двух родов: одинокие, вроде тега, означающего перенос текста на новую строку, и парными. У парных тегов один из них ставится в начале фрагмента некоего текста, а другой в конце. Такая пара вместе с заключенным внутри пары текстом называется элементом языка. У любого тега есть имя (или тип), которое пишется в начале тега. Одно и тоже имя находится и в отрывающем и в закрывающем тегах. Только в закрывающем теге после его имени размещается символ дроби. Например, следующая запись образует элемент типа Р с открывающим тегом <P> и закрывающим тегом <P />, а то, что между тегами, есть текст или внутренний контент элемента Р:
<P> Некий текст, может быть содержащий кроме просто текста другие элементы. <P />
Регистр букв P роли не играет. Кроме того наличие повторяющихся пробелов между словами внутреннего текста и разрывов текста на несколько строк, никак не влияет на отображение текста браузером. Следующий гипертекст будет воспринят любым браузером точно также, как и предыдущий:
<p> Некий текст, может быть содержащий кроме просто
текста
другие элементы. <P />
B тот и другой гипертекст означает одно и то же: его содержимое будет отображено как самостоятельный абзац (или параграф, отсюда и буква P в имени элемента.
Как именно будет выглядеть этот параграф в окне браузера, зависит от многих обстоятельств: текущих настроек браузера и даже типа браузера, размеров его окна, положения этого элемента P в окне браузера и по отношению к другим элементам и прочая… Даже в том, что браузер отобразит именно тот текст, что расположен внутри элемента, нельзя быть уверенным. По обстоятельствам текст может вовсе не отобразиться, может отобразиться частично, или может быть дополнен чем-то ещё, предусмотренным внутри кода. Но если нет всяких привходящих обстоятельств, указанный абзац, будет расположен браузером строго ниже подобного предыдущего абзаца, и строго выше последующего.
Добавим, что элемент P относится к типу блочных элементов. Блочность означает, что такой элемент по умолчанию будет занимать всю ширину элемента, в который он вложен (в простейшем случае занимать всю ширину окна браузера), и будет расположен всегда ниже предыдущего блочного элемента и выше последующего.
К другим блочным элементам, среди тех, что активно используются на сайте vrenitsa.ru, относятся элементы типов DIV и SECTION. Имя DIV есть сокращение от DIVISION, что по-русски значит подразделение, а SECTION и так ясно. По умолчанию разницы между элементами P, DIV и SECTION большой не обнаруживается, но это все зависит от настроек сайта. На сайте vrenitsa.ru их поведение по умолчанию все же отличается.
Текст размещенный внутри элемента P будет отображаться как абзац с отступом первой строки вправо.
Текст размещенный внутри элемента DIV не будет иметь такого отступа.
Текст размещенный внутри SECTION будет находится строго ниже любых других элементов, предшествующих ему в коде страницы. В отличие от содержимого SECTION текст и прочие элементы внутри P и DIV могут обтекать контуры картинки, расположенной в коде раньше, чем P или DIV.
Атрибуты элементов
Осложняют поведение элементов кодовые добавки, располагаемые внутри отрывающего тега элемента после имени тега и придающие новые свойства элементу. Эти добавки называются атрибутами, что по-русски и означает «свойство». Атрибутов в любом элементе может быть много. Они отделяются друг от друга пробелами или разрывами строки.
Каждый атрибут имеет имя, за которым без пробела следует знак равенства, а за ним в любых кавычках значение атрибута.
Простейший атрибут имеет имя «id» и назначает персональное имя (идентификатор) для элемента. Его можно использовать в частности для зрительного распознавания элемента. Когда код большой, однотипных элементов много и их без ID не просто отличать друг от друга.
Второй очень распространенный атрибут это «class». Классы могут совпадать у нескольких элементов, и их у любого элемента может быть несколько с разделением пробелами.
Еще заметим, что имена и тегов и атрибутов не могут начинаться с цифры, не могут содержать пробелов, но зато могут содержать знаки минуса и подчёркивания. Вот вам пример элемента с ариибутами:
<p id=»15″ сlass=»w50 h35 красная-рамка»> Внутренность элемента. <p/>
В этом примере у элемента три класса w50, h35, и красная-рамка. Названия и функции классов обычно назначаются администратором сайта и произвольно выбраться не могут. Если указать в качестве класса такой, что заранее не определен, то он будет просто не замечен браузером. Но зато он виден программисту, и может быть использовать для зрительного различения элементов как и атрибут ID.
Неблочные элементы IMG и А
Назовем теперь те неблочные элементы, которые встречаются на сайте vrenitsa.ru. В отличие от блочных они по умолчанию не влияют на вертикальное смещение своего содержимого.
Несколько следующих один за другим неблочных элементов, будут браузером расставляться слева направо пока в строке есть место. То есть они ведут себя как простые буквы. По вертикали они забирают столько места, каков размер самого высокого из их соседей. Если неблочный элемент содержит текст, то это замечательно. Если же в нем есть что-то громоздкое, вроде картинки, то это редко выглядит симпатично.
И тут настал черед описать элемент картинки-фотографии. Картинка размещается как элемент типа IMG. Это (а) неблочный элемент и (б) непарный элемент. У элемента IMG должен быть обязательно атрибут с именем «src», который определяет файл картинки. Значение атрибута может состоят просто из имени файла, если картинка находится на сайте vеrenitsa.ru. А может быть очень пространным, если картинка находится на другом сайте, как чаще всего и бывает, потому что так проще и это экономит место на сервере vеrenitsa.ru. Пример элемента картинки:
<img src=»vеrenitsa.ru/имя_файла_картинки.jpg» tytle=»Надпись»>
В этом примере у элемента присутствует дополнительный стандартный атрибут tytle=»Надпись». Значение этого атрибута «Надпись» будет всплывать над картинкой в браузере, пока указатель мыши держится над картинкой.
При таком определении размер картинку будет определяться исходным файлом картинки, то есть в большинстве случав будет непредсказуемым.
Теперь сначала опишем еще элемент типа А, потом объясним чем он полезен при выводе картинки.
У элемента А две функции: им можно помечать место в гипертексте для последующего быстрого перехода к этому месту, как бы «якорить» место. Отсюда и имя элемента А — от английского ANKER-анкер-якорь. Вторая функция анкера — определение ссылки на другую точку в сети. Другая точка может находится и на той же странице, что анкер, а может быть на любом сайте. Адресом ссылки может быть страница, место на странице, картинка или видео. В простом виде элемент ссылки выглядит так:
<a href=»vеrenitsa.ru/имя_файла_картинки.jpg»> Предмет ссылки. <a />
Мы в этом примере имеем атрибут href с тем же значением, что и атрибут src в предыдущем примере. Ссылка ведет себя так: при щелчке мышью по Предмету ссылки в этом случае будет открываться то изображение, которое указано как значение атрибута href. Этим значением мог бы бы быть адрес не изображения, а другой страницы — открылась бы она. Предмет ссылки тоже может быть просто текстом (тогда он выделяется в окне браузера цветом), а мог бы быть и другим элементом, например изображением.
Так мы и поступим в следующем примере:
<a href=»vеrenitsa.ru/имя_файла_картинки.jpg«>
<img src=»vеrenitsa.ru/имя_файла_картинки.jpg«>
</a>
Здесь внутрь элемента A вложен элемент img. Таким образом на странице будет отображена картинка, но не просто отображена — она здесь является предметом ссылки и ссылается сама на себя. Это значит, что сначала картинка отображается как часть страницы, но щелчок по картинке, вызовет открытие новой страницы, где картинка будет уже в одиночестве и во всей своей красе.
На деле и это решение половинчато. Размер исходной картинки здесь плохо предсказуем. Она будет занимать на странице место, отвечающее её исходному файлу.
Реальное решение несколько сложнее: все что мы написали выше помещается внутрь особого уже блочного элемента с типом DIV. Главная особенность этого DIV в значении его классов, которые и задают его поведение. Вот итоговый код:
<div class=»w50 h30″>
<a href=»https://verenitsa.ru/1kx1k.png» rel=»lightbox»>
<img src=»https://verenitsa.ru/1kx1k.png» />
</a>
</div>
Кроме всего прочего здесь у анкера появился атрибут rel=»lightbox».
Атрибут воспринимается браузером как знак не просто открыть ссылку, а открыть её в особом окне, которое может быть легко закрыто с возвратом к стартовой странице.
Классы внешней обертки class=»w50 h30″ здесь тоже не случайны. Указанным классам приписаны особые свойства, которые определяют, что находящееся внутри обертки DIV с этими классами, теперь занимает область окна, определяемыми не размерами картинки в исходном файле https://verenitsa.ru/1kx1k.png, а размерами внешнего элемента DIV.
Размеры же элемента DIV тоже определяются классами.
Первый класс w50 определяет ширину области изображения как 50 процентов от ширины области, занимаемой текущей страницей.
Второй класс h30 определяет уже высоту той же области изображения уже как 30 процентов от ширины текущей страницы.
Хотя исходное изображение квадратное по форме, оно натянулось на заданную область и его верх и низ не видны.
Справа вы видите результат работы обсуждаемого кода. Изображение активно, и если вы щелкните по нему оно откроется во весь экран в полном виде.