«Создание сайтов»: 6 : УРОВЕНЬ 2 : ССЫЛКИ как способ перемещения в пространстве и подключения изображений

От Музея: Сегодня в нашем курсе «Создание сайтов. Основы html» — легкая версия для непраграммистов — мы вместе с Аней Амасовой будем учиться делать ССЫЛКИ — именно то, что является ГИПЕРТЕКСТОМ и способно не только обеспечить главную функцию — НАВИГАЦИЮ ПО СТРАНИЦАМ САЙТА, но и сделать наш сайт функционально-красивым, так как именно ссылками на материалы в папках сайта на его страницы вставляются, к примеру, ИЗОБРАЖЕНИЯ — картинки и фотографии. Также ссылки позволяют связать сайт с внешным миром — с ДРУГИМИ САЙТАМИ. 

Содержание лекции 6 «ССЫЛКИ как способ перемещения в пространстве и подключения изображений»: отображение контента по ширине девайса, создание внешней ссылки, знак копирайта, знак неразрывного фиксированного пробела, абсолютная ссылка, создание внутренних ссылок, относительные ссылки, включение изображений ссылками: изображение — фон для сайта, изображение — иллюстрация / заставка, изображение — ссылка.

Текст: Аня Амасова

Вступление

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

На моем учебно-показательном сайте «Сила волка» пять рубрик: Старт - Знакомство - Галерея - Прайс - Контакты.

Для рубрик и текста я сделала две элементарные таблички: одну - из одной строки и пяти ячеек (для рубрикации), вторую - из одной строки и одной ячейки.

Так как я хочу, чтобы сайт красиво смотрелся и читался и с компьютеров, и с мобильных телефонов (в наше время важно, чтобы сайт также умещался в размер стандартного телефона...) я сделала ширину моей таблички (то есть ширину области прочтения, где размещаются какие-то элементы) 600 пикселей. И хотя можно было бы и 700, и 800, но, во-первых, я забочусь о глазках читателей с мобильников, а во-вторых, мне просто много удобнее делить в уме цифру (600) и на 5 рубрик (по 120 пикселей на ячейку), и на 2 колонки будущего прайса (400 для описания и 200 для стоимости), и на 3 колонки планирующейся галереи (150 для вертикальных изображений и 450 для горизонтальных) и т.д...

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

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

Рис. 1. Вид разрабатываемого сайта с телефона
ДО подключения мозга

Для этого нам надо в голове страницы (в часть HEAD) заложить мета-тег: viewport, что означает «область просмотра», и записать в  мозгу, что у контента (содержимого) ширина должна быть равна ширине девайса. То есть добавить вот такую строчку:

Рис. 1. Строка записи в html

Итак, поздравляю! У нашей index-странички потихоньку начал развиваться мозг! И вот так она выглядит, к примеру, у меня:

Рис. 2. Html-запись на начало 6 лекции

Что изменилось? Теперь наш контент — содержательная часть страницы сайта — встает по ширине девайса, ура!

Рис. 3. Вид с телефона ПОСЛЕ добавления строки записи
о ширине контента по ширине девайса

Теперь мне бы хотелось, чтобы рубрики куда-то вели, то есть были действительно рубриками. А еще я хочу разместить красивую картинку... Ну и фончик бы моему пока черному сайту не помешал бы... И еще я хочу прописать, что этот сайт сделала именно я и дать ссылку на свою страничку для читателей... Думаю, у вас примерно такие же желания, верно? А значит, отступать нам некуда: пора учиться делать ссылки!

Система ссылок условно делится на:
- внешние ссылки — те, что ведут с вашего сайта на другие сайты;
- внутренние ссылки — те, что обеспечивают навигацию внутри вашего сайта - по другим его страницам;
- ссылки на изображения (фотографии или рисунки) — которые должны отражаться на странице;
- внешние ссылки с изображений, размещенных на страницах вашего сайта;
- встроенные ссылки со сторонних сайтов (например, встроенное видео с ВК или Ютуб) — если вы будете понимать общую теорию, то с с этим вы сами легко разберетесь;
- ссылки на материалы сайта - документы (pdf-файлы, например, но могут быть и mp3, mp4, программы и др.) — но в этом курсе «основ» мы этого не коснемся, однако знайте, что и это возможно.

Начнем с элементарного.

СОЗДАНИЕ ВНЕШНЕЙ ССЫЛКИ

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

Например, я создам для своего учебного сайта «Сила волка» ссылку, которая бы вела на сайт Музея как своего разработчика.

Для этого я, во-первых, добавлю в свою таблицу еще одну строку (и ячейку в ней! — не забыли, что просто строки недостаточно? см. лекцию 5), а во-вторых, размечу начало и конец своей ссылки. Получилась следующей запись:

Рис. 4. Оформление внешней ссылки

Теги строки и ячейки вам знакомы, а что здесь все остальное?

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

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

href — атрибут тега а, расшифровывается как «гипертекстовая ссылка» (h - сокр. от hypertext, ref - с англ. «ссылка»), которому вы через знак равно задаете значение: полный адрес страницы, куда она ведет. То есть — абсолютная ссылка. Или адрес сайта без уточнения страницы, если вы ссылаетесь именно на главную страницу какого-либо сайта (потому что, вспоминаем лекцию 2 и лекцию 3, index.html - это то, что откроется по-умолчанию, если просто поставить адрес сайта). В моем примере именно так: ссылка на сайт Музея, без указания конкретной страницы, то есть — на главную страницу.

Рис. 5. Результат добавления

СОЗДАНИЕ ВНУТРЕННИХ ССЫЛОК

Логично, что в моем примере Старт - Знакомство - Галерея - Цены - Контакты — все, кроме Старта (мы сейчас как раз на ней — это наш index.html), это некие разделы, которые являются другими страницами. И для того, чтобы сделать на них ссылки, нам надо эти страницы создать!

Так как у меня в этой элементарной структуре все рубрики равнозначны по значению, то я просто создаю странички-html по образу и подобию index.html в той же корневой папке, но — с другими названиями. Чтобы не мучиться, можно просто сделать копии index.html и переименовывать (контент вы создадите для них потом). Я назвала их соответственно hello - gallery - price - contact.

Рис. 6. Вид корневой папки
после создания других страниц для разделов

Теперь у нас в корневой папке 5 html-страничек — по числу разделов сайта. И только теперь, когда все страницы получили свои имена, а мы — наконец-то знаем их полные адреса (и где они лежат относительно нашей главной страницы), можно приступать к созданию ссылок на них! Что делается также путем разметки в файле html.

Вновь открываем свой index.html, находим рубрикацию и размечаем ее все теми же тегами a и атрибутами href с одним лишь отличием - мы даем не абсолютные, а относительные ссылки — где расположена страница относительно этой, то есть ее относительный путь. Он нам понадобится и встретится еще, потому что он очень удобен. В случае с равнозначными страницами, находящимися в той же папке, что и страница, на которой вы делаете разметку, все предельно просто и элементарно:

Рис. 7. Разметка внутренних ссылок
на равноценные страницы

Очевидно, что находясь на странице «Старт», читатель может выбрать переход по ссылкам только на другие страницы. А значит, мы не ставим ссылку на страницу-раздел, где мы уже находимся, а размечаем только те страницы, куда можно перейти. И так как все страницы находятся в той же папке, что и index.html, то в описании «пути перехода» (относительная ссылка) нам достаточно указать всего лишь названия страниц-разделов! Вуаля!

В коде, создаваемом прямо в папке размещения сайта, выглядит визуально еще понятней:

Рис. 8. Код разметки, удобный для воспрития

Результат?

Рис. 9. Результат разметки внутренних ссылок

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

* Самые внимательные заметили, что в одном случае у меня значение атрибута без кавычек, а во втором — с кавычками. Насколько это важно? На самом деле — нет. Кавычки вошли в обиход, похоже, в процессе написания лекций для программистов, которые в своих работах копировали значения вместе с кавычками, в которые эти значения заключали преподаватели, дабы отделить от основного текста. Многим, наверное, в целом графически удобнее, когда информация отделена таким образом — это облегчает им быстрый поиск по тексту. Таким образом сложилась некая традиция (и некоторые программы также автоматически заключают пути-значения в кавычки), но на самом же деле ссылки будут работать вне зависимости от того, поставите вы эти кавычки или нет. Делайте так, как вам логически понятно и визуально комфортно. И не пугайтесь, если встретите другое начертание.

ВКЛЮЧЕНИЕ ИЗОБРАЖЕНИЙ ССЫЛКАМИ

Ну и наконец — подключение изображений!

Изображения нам необходимы в текстах, для украшения «шапки», а также ими можно создать фон. Для всего этого используются либо рисунки, либо фотографии. Обычно то и другое подключается в формате jpg.

ИЗОБРАЖЕНИЕ — ФОН ДЛЯ САЙТА

Начнем с простого: как сделать из изображения фон? Есть много разных вариантов, и если вы поймете принцип, вы разберетесь, как достичь того варианта, чтобы итоговый вид соответствовал вашим эстетическим ожиданиям. «По-умолчанию» в html фоновая картинка будет отражаться в свой оригинальный размер, и на мониторах разных девайсов с разной шириной будет либо обрезаться, либо наоборот — дублироваться до необходимого размера монитора (этот принцип называется «мощение»). Теперь показываю.

Для учебного сайта я выбрала для его главной страницы фоновым изображением вот такую фотографию c довольно большим размером изображения в пикселях: 900х1600. Хотя и очевидно, что ширины 900 пикселей не хватит для ширины монитора, а значит, к ней будет автоматически применено дублирование, что мне и нужно, чтобы показать вам принцип мощения! 

Рис. 10. Фотография, отобранная для фонового изображения

Первое, что нам необходимо сделать — это дать картинке имя. Причем такое, чтобы нам самим было понятно, что это. Если фон на сайте везде одинаковый, вы можете назвать его, к примеру, просто «fon». Так как я планирую на всех страницах использовать разный фон, то я могу назвать ее понятно для себя: «fon_index», или даже еще проще и короче: «fon0».

Второй шаг — это сделать картинку материалом сайта, то есть загрузить ее в нашу папку, к файлам html. Для этого мы создаем в основной директории Новую папку и называем ее, к примеру, «img» или любым другим понятным для вас набором латинских букв. Я предпочитаю максимально короткие, чтобы при создании на странице ссылок не вспоминать мучительно, где что лежит и как пишется...

Рис. 11. Создание новой папки-директории

Шаг три: кладем в эту новую папку свой файл с изображением:

Рис. 12. Размещение файла изображения

Именно здесь удобно объяснить про относительный путь. Так как основной файл index.html, к которому мы будем подключать ссылкой это изображение, лежит у нас в папке «public_html», то относительная ссылка будет рассказывать нам, где лежит файл «fon0» именно относительно самого файла. И он лежит, как видно на картинке: в папке «img», имея название «fon0» (и расширение «jpg»!), а следовательно сама относительная ссылка будет выглядеть следующим образом: «/img/fon0.jpg».

Теперь мы можем разместить эту ссылку в своем html-файле. Так как фон у нас ко всему документу, то  есть для всего тела, ссылка должна быть размещена рядом с тегом body. Сейчас у нас к тегу body стоит атрибут bgcolor (цвет) со значением "black" (черный). И мы просто меняем его на другой атрибут — background (фон) со значением "/img/fon0.jpg".

Рис. 13. Вставка фонового изображения

Рис. 14. Вид страницы сайта с подключенным фоном
(монитор компьютера)

Рис. 15. Вид страницы сайта с подключенным фоном
(с мобильного телефона)

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

ИЗОБРАЖЕНИЕ — ИЛЛЮСТРАЦИЯ / ЗАСТАВКА 

Теперь перейдем к изображениям, подключаемым как иллюстрации сайта...

Так, в своем примере я хочу, чтобы текстовый блок информации предварялся у меня шапкой-картинкой и включенным в эту картинку заголовком. Для этого я отоборала подходящую по смыслу фотографию, добавила в программе «Фотошоп» текст заголовка страницы index.html и сохранила в формате jpg для web с шириной 600 пикселей, так как таблица у меня имеет имеет именно такую максимальную ширину.

Рис. 16. Подготовленная картинка-заставка
 для заставки к странице сайта index.html

Дальше шаги те же, что и в предыдущем случае:

Шаг «ИМЯ». Я назвала картинку-иллюстрацию к странице index «index600» — чтобы мне всегда было понятно, что это и откуда. 
Шаг «РАЗМЕЩЕНИЕ В МАТЕРИАЛАХ САЙТА». Так как иллюстраций я запланировала немного, то положила (загрузила) эту картинку в ту же папку, что и фон.

Рис. 17. Загрузка иллюстрации в материалы сайта

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

Рис. 18. Создание таблице шапки с иллюстрацией

На рис. 18. видно: строка с фоном-картинкой для всего тела сайта, которую мы только что создали, начало первой таблицы с шириной в 600 пикселей, которая у нас уже была, и теперь мы создаем ей верхнюю строчку: тег tr. Так как у меня изображение 600х300 (что очень удобно!), я могу заранее создать высоту этой строки — атрибут height — 300 пикселей. И также я задаю некоторый отступ от рамки — атрибут cellpadding — в 5 пикселей с каждой стороны, чтобы все выглядело красиво (ну и чтобы у вас было больше знаний).

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

Третья дописанная строка — это и есть ссылка на включение материала в контекст страницы. Она оформляется по типу ссылок, но тегом img  — изображение, и атрибутом src — (source) источник. Дальше пишется относительный путь к этому «источнику».

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

- если вы не задаете ему параметров (высоты или ширины), то изображение встанет в размер оригинала;-

- если вы задаете один параметр (высоту или ширину), то вторая настраивается автоматически путем пропорционального масштабирования — то есть перед вами нет задачи указать оба параметра;

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

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

Рис. 19-20. Два варианта отображения вставленной иллюстрации.

Таким образом html-запись страницы index у нас выглядит так:

Рис. 21. Начало html-записи для страницы с шапкой

ИЗОБРАЖЕНИЕ — ССЫЛКА

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

Предположим, что наше изображение index600 должно при клике на него вести на страницу с контактами — contact.html. Тогда мы бы оформили это следующим образом:

Рис. 22. Изображение является ссылкой

То есть все совершенно логично: ссылку на материал мы заключаем в ссылку на страницу, куда этот материал ведет.

Итак, итог нашей сегодняшей лекции уже начинает представлять собой что-то интересно-симпатичное, давая пищу для воображения, и размышлений над аналогичным, но отличающимся дизайном других страниц сайта... И уже можно готовить изображения — как минимум, фоны и заставки — для следующих страниц: Знакомства, Галереи, Цен и Контактов...

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

Перейти к следующей лекции:

«Создание сайтов»: 7 : УРОВЕНЬ 3 :
ШРИФТЫ ДЛЯ САЙТА - где взять и как подключить?

[апрель, 2022]