Изображения на странице

Подготовка эксперимента

Редактирование кода

В папке task_03 создайте копию файла float.htm и переименуйте её в img.htm, а документ назоваите Плавающие изображения. Теперь в новом файле произведём ряд изменений.

Первым делом во всех блоках текст поместим в абзацы-заголовки. Текст шапки в заголовок H1, а остальной — в H2. Текст заголовка первого уровня замените на Изображения в строке.

А теперь во внешнюю панель, в статью добавьте по 3 абзаца. Взять их можно из рефератов на Яндексе ?.

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

В предыдущей работе подобным образом настроенные стили были допустимы. А здесь — сами видите, без пояснений.

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

В BODY нужно задавать размер шрифта лишь для обычных абзацев. Измените значение свойства размер шрифта на 14px.

Теперь установлен базовый размер всех символов в документе. Текст и сами блоки приобрели приличный вид.

В BODY остались ещё два свойства, запланированные для оформления заголовков font-weight=... ? и text-transform=... ? . Их нужно поместить в новое правило для заголовков первого и второго уровней.

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

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

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

Создайте правило для шапки и переместите в него из правила для BODY выравнивание текста по центру.

Если у вас вид страницы примерно такой же, то теперь всё готово для новых исследований.

Место, где живут рисунки

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

В любом графическом редакторе, например в Paint в меню Файл >Свойства, установите размер листа 100×100px. Можете сменить цвет фона и диагональными линиями с контрастным к нему цветом соедините противоположные вершины квадрата. Сохраните рисунок в файл с именем picture.png в созданную для него папку. Теперь расскажем браузеру, где он лежит.

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

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

У этого элемента есть свои особенности. Так как само изображение в код вставить невозможно, то у IMG нет контента (содержимого), поэтому нет и закрывающего тега. Зато есть два обязательных атрибута.

Первый — src аббревиатура английского слова SouRCe (источник): IMG src=путь_доступа_к_файлу_с_изображением. В нём для браузера записывают адрес файла с изображением (путь доступа к нему). Но один и тот же путь доступа может быть определён и как абсолютный, и относительный.

Абсолютный путь доступа это цепочка контейнеров, начиная от главного «корневого», в которые нужно последовательно заходить, чтобы добраться до искомого объекта. В нашем случае искомый объект — файл с изображением, а контейнеры — папки (каталоги).
D:\рабочая_папка\task_03\float\img\dummy.png

Вот так это можно описать словами: D:\ выбери диск D:рабочая_папка\ открой папку рабочая папкаtask_03\ открой папку task_3float\ открой папку floatimg\ открой папку imgdummy.png прочти файл dummy.png и содержимое покажи на экране

Браузер, «читая» код в файле и «добравшись» до элемента IMG, пойдёт искать диск D: и цепочку папок из адреса… Но на компьютере читателя может не быть ни такого файла, ни таких папок, ни даже диска с таким именем. Поэтому абсолютный путь доступа ничем браузеру не поможет.

Но в то же время путь к файлу с изображением можно описать не абсолютным от диска D:, а относительным — от места размещения файла img.htm. Такой путь доступа так и называется относительный. Вы с ним уже знакомы, когда оформляли титульный лист для практических работ.

Старый стиль записи адреса с относительным путём доступа к файлу выглядит так:
./img/dummy.png.

./ в текущей папке, откуда взят файл imgfloat.htm img/ загляни во вложенную папку img dummy.png в ней прочти файл dummy.png и покажи его содержимое на странице!

В современном стиле записи первый пункт можно опустить:
img/dummy.png. img/ рядом с файлом imgfloat.htm, который читаешь, есть папка img dummy.png в ней файл dummy.png, прочти и покажи его содержимое на странице!

С первым атрибутом источник разобрались IMG src=img/dummy.png. Второй атрибут не менее важен. Он называется alt — альтернативный текст. Он нужен, когда вы пользуетесь доступом в интернет с лимитным (ограниченным) подключением.

Это может быть ограничение по объёму. Файлы с картинками и фотографиями бывают очень большого размера. Превысили объём скачиваемых данных, включается счётчик с дополнительной платой.

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

Если вы в отпуске читаете электронную книгу по сети, то иллюстрации к тексту загружать совсем не обязательно. Достаточно одних букв. У них малый объём и грузятся они очень быстро. Браузеры имеют настройку, отключающую загрузку рисунков. Это повышает скорость загрузки страницы и уменьшает объём загружаемых данных.

Если изображение отсутсвует на странице, вместо него будет добавлен текст, содержащийся в атрибуте alt=описание_отсуствующего_изображения. Вот теперь всё готово для добавления изображений на страницу.

Рисунок в тексте

Логотип

Логотип — отличительный знак компании. Его используют с целью привлечения внимания к ней, к её товарам и услугам. Логотипы бывают разными, от просто букв и слов, до рисунков. Но если только буквы, то они имеют оригинальную форму, чтобы отличаться от тех, которыми пишут все. К буквам может добавляться какой-нибудь нарисованный символ, который тоже играет роль логотипа, но сокращённого.

Вы тоже можете придумать логотип себе или своей команде. А пока попробуем добавить фиктивный «логотип» к заголовкам. У нас их три, поэтому добавлять будем разными способами.

Для начала нужно познакомиться и понять, как браузер работает с изображениями. Все три элемента будут иметь одинаковый текст в тегах: IMG src=img/dummy.png alt=Логотип.

Изображение можно добавлять внутрь любого блочного элемента. Добавьте тег элемента IMG его между открывающим тегом и первым словом заголовка. Запись и в других заголовках должна выглядеть так, как в примере.

····h1
IMG src=img/dummy.pngalt=Логотип.Плаванье изображений
····/h1

Почему открывающий тег IMG записан от края строки? Сначала можете выдвинуть предположение самостоятельно и убедиться верное оно или нет. Лишь потом выполните тройной щелчок в словах ПЛАВАНЬЕ, ВНЕШНЯЯ, СТАТЬЯ.

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

Теперь взглянем на страницу. Логотип основательно стоит на базовой линии шрифта. А раз он обычный символ, да ещё и высокий то увеличивает высоту строки. Включите панель веб-разработчика и в структуре кода HTML наведите мышь на открывающий или закрывающий тег любого заголовка.

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

Для перемещения текста вверх-вниз вдоль изображения к IMG нужно применить вертикальное выравнивание: свойство CSS vertical-align... ?. У этого свойства несколько значений, но познакомимся только с основными.

В коде CSS создайте правило для всех IMG. Добавьте в него вертикальное выравнивание со значением top. Обновите страницу и оцените результат. Снова наводите мышку на теги заголовков, чтобы увидеть, как размещены блоки с изображениями на странице.

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

Замените значение в свойстве vertical-align на ещё одно значение middle — установить логотип посередине.

Проверим действие на строку значения bottom.

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

Самостоятельная работа

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

Если никакого семантического (смыслового) содержания у подобного выделения нет и оно только оформительское, например, выделили только одну букву, то стоит использовать несемантический строчный элемент SPAN.

Для самостоятельного эксперимента скопируйте и вставьте 2-3 элемента IMG в начало, в середину, в конец любых абзацев. Также выделите несколько фрагментов текста элементами SPAN и создайте для них правило с увеличенным шрифтом до 2em ? .

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

Чтобы эксперимент получился общим и не пришлось добавлять элементу отдельное правило, соедините их в один класс. Каждому новому изображению и текстовым блокам добавьте атрибут class=vertical.

Создайте второе правило img.vertical для уменьшения логотипов входящих в класс vertical. Назначьте им ширину width и высоту height по 20px.

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

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

Плавающие изображения

Подготовка эксперимента

В папке task_03 создайте копию файла img.htm и переименуйте её в imgfloat.htm. Назовите документ Плавающий логотип. Сразу после заголовка добавьте абзац с текстом: Стиль баттерфляй.

Слово баттерфляй поместите в строчный элемент DFN. Он предназначен для выделения терминов и незнакомых слов, требующих толкование, пояснения. К этому элементу добавьте атрибут title=.... В его значении запишите фразу Баттерфляй — от англ. butterfly: бабочка. Стиль плаванья.

Удалите в тексте все добавленные изображения и элементы текстовых фрагментов. Удалите и правила CSS созданные для них. Другая задача — другие решения.

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

IMG src=img/dummy.pngalt=Логотип.
····h1
Плаванье изображений
····/h1

IMG src=img/dummy.pngalt=Логотип.
····p
текст абзаца во внешней панели...
····/p

····p
IMG src=img/dummy.pngalt=Логотип.
текст абзаца в статье...
····/p

Обновите страницу и наведите мышку на слово баттерфляй и задержите её без движения на 1,5–2 секунды. Во всплывающей подсказке отобразилась фраза, записанная в атрибуте title. Этот атрибут с пояснениями можно добавлять к любому элементу, как к строчному, так и к блочному.

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

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

Поплыли

Давайте создадим правило для всех IMG и добавим в него свойство floatleft. Все логотипы прижались к левому полю родительского элемента и были удалены из потока. Место под ними освободилось и строку, высотой 100px, заняли элементы, следующие за ними по структуре кода HTML.

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

«Тень»,оставленная в потоке плавающим элементом.

Хорошо видна и особенность плавающего элемента со свойством float отбрасывать тень, а текст обтекает её. Именно она не позволяет буквам прятаться под объектом, а быть прочитанными.

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

Плаванье и центрирование

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

Теперь слева 100px ширины занял логотип, и место для текста абзацев стало короче. Браузер продолжил центрирование текста, но уже не на всю ширину шапки, а на ширину свободного места. Горизонтальное выравнивание относительно страницы съехало вправо, но относительно шапки с плавающим логотипом всё правильно.

Вертикаль

А с вертикальным выравниванием, есть одна неприятность. Щель между нижними границами логотипа и родительского блока. Она образовалась потому, что суммарная высота места занимаемого заголовком и обычным абзацем выше 100px (высота логотипа). А насколько выше? Опять будем «состоятельными кротами». Начнём считать.

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

Задача в три действия.

  1. Используя инструменты веб-разработки записать реальные вертикальные размеры частей обоих блоков.
  2. Учитывая схлопывание вычислить суммарную высоту обоих элементов. Результат должен оказаться больше 100px.
  3. Вычислить: у какой части какого элемента и насколько уменьшить значение, чтобы высота height шапки стала равна 100px.

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

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

Вертикаль и горизонталь

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

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

Теперь нам достаточно модели в инструментах веб-разработчика. Проверять правильность вычислений или подбирать подходящее значение размера можно прямо в ней. Достаточно выполнить двойной щелчок по любому значению и ввести в него новое число — количество пикселов. Размерность указывать не обязательно.

Не трудно догадаться какие части блока можно увеличить, чтобы нижняя граница абзаца оказалась на расстоянии 100px от верха. Опустите заголовок на запланированное место. Результат не заставит себя долго ждать.

Однако здесь нас поджидала неприятность. Абзац-подзаголовок опустился и вышел из зоны влияния тени плавающего блока. В этом месте его буквам доступна вся ширина строки. Поэтому горизонтальный центр блока снова сместился к центру страницы.

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

Разобравшись с возможностью центрирования заголовков с плавающими изображениями, вы без труда сможете, по необходимости сдвигать изображения и влево и вправо, и по-разному выравнивать текст. Выбор за вами.

Изображения и абзацы

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

Чтобы не путать их с логотипом в шапке объединим их в общий класс. Добавьте им атрибут class=before-text (в переводе с английского: перед текстом). Это позволит создать одно общее правило для обоих логотипов с селектором класса img.before-text.

Буквы абзацев вплотную прильнули к правой границе изображений. Решить эту задачу не так уж сложно. Установите отступ от логотипа в 1em.

Текст, как и положено при плавании элементов, обтекает логотипы «сапогом» и выглядит это совсем неплохо. Однако бывают случаи, когда сапог неуместен.

Например, в колонке с текстом изображение занимает больше половины её ширины. Строчка сбоку может оказаться столь узкой, что длинные слова создают слишком широкие пробелы или не помещаются в одну строку. В этом случае изображение можно растянуть на всю ширину, задав свойство width100%. В этом случае высота изображения увеличится. Проверьте это предположение самостоятельно.

Но не забывайте, что при ширине 100% поля, границы и отступы, не равные нулю, могут сослужить плохую службу. Мы уже задавали BODY высоту 100% и при почти пустой рабочей области включалась вертикальная полоса прокрутки.

Не всегда подобные решения удачны. В CSS есть свойство очистки строк под плавающими блоками: clear ?. Оно уже использовалось в одной из предыдущих работ. Его применяют к элементу, следующему за последним плавающим.

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

Такой селектор в CSS существует и называется соседний. Соберём его для отдельного правила. В нём сначала нужно указать изображения, принадлежащие одному классу. Затем добавить следующий за ним абзац: imgbefore-text + p

Соседний селектор P + E. Правило применяется для любого E следующего коде HTML сразу после P ?.

Остаётся только в созданное правило добавить свойство очистки. Очистки слева, справа или с обеих сторон сразу? Решите самостоятельно, запишите и обновите страницу.

Засыпка

Для того чтобы убедиться, в том, что вы понимаете структуру кода HTML, знакомы с созданием правил CSS и, самое главное в веб-конструировании, понимаете, как подбирать селекторы для правил — вопрос на засыпку.

Почему правило применилось к абзацу лишь во внешней панели, а в статье — нет?

Да и вообще, пора бы уже познакомиться с селекторами ? серьёзнее. Это самая сложная часть языка CSS. Селекторы мало вызубрить, выучить, знать. Главное их нужно уметь составлять для разных элементов, расположенных в любых местах кода HTML.