Загрузка изображений на страницу

Спецсимволы

Используя спецсимволы в HTML, можно либо заменять уже имеющиеся на клавиатуре компьютера символы, либо при помощи них можно указать символы, которые отсутствуют на клавиатуре, например, значок копирайта.

Любые теги никак не показываются в окне браузера, поскольку воспринимаются браузером как команды для вставки элементов и изменения их свойств. Но иногда требуется на веб-странице вывести теги, например, для демонстрации HTML-кода. В этом случае используйте спецсимволы &lt; и &gt; для замены угловых скобок < и >.

Вот некоторые варианты спецсимволов:

Код в HTML	Внешний вид	Описание
 		неразрывный пробел
©	©	знак copyright
"	“	Одинарные кавычки
« и »	«и»	двойные кавычки
&lt; и &gt;	< и >	символы
&prime;	′	одиночный штрих

 

Комментарии

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

Комментарии еще можно применять для того, чтобы не отображать теги в браузере, это может пригодиться при редактировании веб-страницы, при этом вы можете комментировать целые блоки кода.

Пример:

<!--Текст, который не будет отображаться на сайте-->

<p>Текст основной части сайта</p>

 

Гиперссылки.

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

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

Тег ссылки называется <a> и у нее есть обязательный атрибут href, в значении которого мы указываем на тот файл, на то место в документе, или на ту страницу другого сайта, куда хотим перейти. В содержимом этого тега необходимо написать тот текст, который увидит пользователь.

Виды ссылок

Относительные ссылки используются для перемещения внутри документа или сайта.

<a href="file_name.html">

текст ссылки, который видит пользователь  </a>

 

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

<a href="http://yandex.ru" target="_blank">      страница yandex.ru откроется в новой вкладке </a>

 

У тега ссылки существует атрибут target. Если указать target="_blank", то страница откроется в новой вкладке браузера. Раньше это значение официально не поддерживалось в HTML, но люди все равно использовали его, поскольку оно работало. Теперь в HTML5 оно полностью поддерживается.

Когдаиспользовать target="_blank"

● Если необходимо открыть сторонний ресурс и не потерять страничку вашего сайта

● Если пользователь работает над чем-то, что может быть потеряно если текущая страница изменится.

Когда не использовать target="_blank"

● В меню (иначе пункты меню будут открываться в новых вкладках)

● Из-за личных предпочтений

● Если клиент думает, что так будет лучше

Якоря в гиперссылках

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

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

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

<a href="#p10"> Прочитать 10 параграф </a>

<p id="p1">Текст параграфа №1</p>

<p id="p2">Текст параграфа №2</p>

…

<p id="p10">Вот и долгожданный параграф №10</p>

 

Изображения

В настоящее время в веб-документах используются четыре формата изображений: jpeg, gif, png, svg. Рассмотрим каждый из этих форматов поподробнее.

JPEG

Плюсы:

● Небольшой размер файла

● Поддерживает 16 млн. цветов

● Можно управлять качеством изображения при сохранении

  Минусы:

● При сжатии размеров теряется качество

● Не поддерживает прозрачность

GIF

Плюсы:

● Поддерживает анимацию

● Поддерживает прозрачность

● При сжатии не теряет в качестве

Минусы:

● Кол-во цветов до 256

PNG

Растровый графический формат PNG, набирающий всё большую популярность, появился в 1995 году как замена GIF. Формат PNG в свою очередь подразделяется на форматы PNG-8 (аналог формата gif, за исключением того, что PNG-8 не поддерживает анимацию) и PNG-24.

Еще существует формат PNG-32 — в этом формате растровой графики для одного пикселя возможно использовать четыре байта информации. Три отвечают за формирование полноцветного изображения, а четвертый байт выделяется отдельно для формирования альфа-канала, позволяющего использовать PNG-32 для получения картинок с прозрачным фоном.

Проблема поддержки 32-битной (полной) прозрачности картинки формата PNG в Microsoft Internet Explorer была решена в седьмой версии браузера.

PNG – 8

Плюсы:

● Поддерживает прозрачность

● При сжатии не теряет в качестве

Минусы:

● Кол-во цветов до 256

PNG – 24

Плюсы:

● При сжатии не теряет в качестве

● Использует 16 млн. цветов

● Плавный переход от прозрачной области к цветной

Минусы:

● Большой размер файла

SVG

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

Широко доступно использование растровой графики в SVG документах. Имеется возможность вставлять элементы с изображениями в форматах PNG, GIF или JPG.Текст в графике SVG является текстом, а не изображением, поэтому его можно выделять и копировать, он индексируется поисковыми машинами, не нужно создавать дополнительные метафайлы для поисковых роботов.

Плюсы:

● Небольшие размеры файлов, отличное сжатие;

● Возможно увеличить любую часть изображения SVG без потери качества Минусы:

● Большой размер файла

● Сложность использования

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

Для анимированных изображений единственный вариант — использовать формат gif, а для сохранения качественных изображений, в которых используется прозрачность лучше всего подойдет формат png-24. Для растровой графики идеально подойдёт svg.

Загрузка изображений на страницу

Для отображения изображений на странице существует тег <img>, который является одиночным тегом. У этого тега есть обязательный атрибут src, в значении которого мы указываем путь к изображению. Этот путь может быть, как относительным, так и абсолютным.

<img src="img/my_foto.jpg"       alt="это моя фотография"      title="это моя фотография"      height="300"  />

 

У тега <img /> можно указать дополнительные атрибуты. 

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

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

Любому изображению можно задать ширину и высоту, указав эти значения в атрибутах width и height соответственно. При помощи этих атрибутов изображение лучше не увеличивать, а то получится очень плохое качество. Если задать ширину и высоту изображению, то браузер при загрузке страницы будет сразу выделять заданную область под картинку. 

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

Списки

Списки в html-документах бывают двух видов: маркированные и нумерованные. Отличаются они тем, что у маркированных элемент списка начинается с маркеров, а у нумерованного с цифр или букв. Структура маркированного списка

<ul>

<li>Первый элемент списка</li>

<li>Второй элемент списка</li>

<li>Третий элемент списка</li>

</ul>

 

Структура нумерованного списка

<ol>

<li>Первый элемент списка</li>

<li>Второй элемент списка</li>

<li>Третий элемент списка</li>

</ol>

Как видно из примеров структура обоих типов списков одинаковая, и единственное различие в том, что в случае с маркированным списком, контейнер будет называться <ul>, а в нумерованном <ol>. В нумерованном списке иногда может потребоваться начинать список с какой-нибудь определенной цифры или буквы. Для этого существует атрибут start, в значении которого указывается, с какого элемента будет начинаться список. В списках есть возможность менять вид маркеров, или арабские цифры изменить, например, на римские, либо вообще убрать маркеры.