Веб-страница

Типы веб-редакторов

Редакторы для написания сайта бывают: визуальные и текстовые. Текстовые веб-редакторы нужны для создания HTML- кода «вручную». Такими редакторами, как правило, пользуются профессионалы сайтостроения. Текстовые веб-редакторы отличаются от обычного редактора, типа «Блокнот», тем, что еще имеют дополнительные функции, позволяющие удобно писать код. Например, во всех таких редакторах реализована подсветка синтаксиса (код визуально отличается от обычного текста страницы, теги и атрибуты окрашиваются в различные цвета), сочетания горячих клавиш позволяют вставлять в код готовые конструкции и специальные символы. Но сразу же посмотреть на страницу в таком редакторе не получится, для этого её придётся запустить в браузере. В визуальном редакторе веб-страницу можно «составлять» из готовых элементов, текст можно форматировать почти так, как в редакторе Word, а ссылки, картинки, таблицы и другие объекты вставлять на страницу с помощью специальных кнопок и перемещать по ней с помощью мыши. При этом редактор будет автоматически формировать код страницы. Часто такие редакторы еще называют WYSIWYGWhat You See Is What You Get )-редакторами. Выходит, что ты «рисуешь» страницу такой, какой хочешь видеть её в браузере, а редактор пишет за тебя соответствующий код. По сути, для использования визуального редактора не обязательно даже знать язык HTML и другие веб-технологии. К сожалению, первые визуальные веб-редакторы, стремясь полностью сохранить внешний вид «нарисованной» веб- странички, вставляли в код слишком много лишних конструкций, что значительно увеличивало вес страницы и делало код нечитабельным («грязным»). Поэтому до недавнего времени считалось, что такие редакторы предназначены исключительно для новичков, и они не признавались профессионалами. Однако современные WYSIWYG-редакторы позволяют не только просматривать созданный редактором HTML-код, но и работать с ним с помощью встроенного текстового веб-редактора. Для этого предназначены дополнительные режимы: режим редактирования кода и комбинированный режим. В режиме редактирования кода можно работать точно так же, как в текстовом редакторе, а визуальный режим использовать для просмотра полученной страницы (как в браузере). Если же включить комбинированный режим, то окно веб-редактора будет поделено на две части, в одной из которых отобразится исходный код страницы, а в другой — её внешний вид. При этом можно будет наблюдать, как любое действие в визуальном редакторе тут же приводит к изменению кода, и наоборот, изменения в коде моментально отражаются на странице. Любой из этих режимов позволяет одновременно работать и с кодом, и с визуальным представлением веб-страницы, что, несомненно, очень удобно. К тому же, код, генерируемый визуальными веб-редакторами, в последнее время уже не содержит множества лишних конструкций и удовлетворяет современным стандартам. В связи с этим, некоторые WYSIWYG-редакторы стали активно использовать даже профессиональные веб-мастера.

2.2.4 Работа с гиперссылками

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

Адрес
URL, на который указывает ссылка,
отображается в строке состояния. При
щелчке на гипер­ссылке соответствующая
Web-страница загружается вместо текущей.
Если гиперссылка указывает на произвольный
файл, его загрузка происходит по протоколу
FTP.

Что такое тег?

Теперь поговорим подробнее о структуре страницы. Рассмотрим фрагмент:

Здесь мы видим текст, который отображается на странице как заголовок, заключенный в тег «h1». Что же такое тег в html языке?

Также тег «h1» и тег «/h1» называются парными тегами. Вместе открывающий тег плюс содержимое плюс закрывающий тег образуют элемент html-документа. Бывают еще элементы состоящие из одного открывающего тега:

Так парный тег «h1» определяет элемент заголовка первого уровня. Всего существует шесть уровней заголовков, это элементы «h1» — «h6».

Элементы бывают блочные и строчные (текстовые). Блочные элементы осуществляют структурное форматирование страницы. Блочные элементы всегда отображаются на странице с новой строки и имеют отступ от соседних элементов. Строчные элементы осуществляют непосредственное форматирование текста или логическое форматирование. Элемент h1 является блочным элементом.

Далее идет парный тег «p», который создает на HTML-странице абзац. Содержимое данного тега станет текстом этого абзаца. Элемент «p» также является блочным элементом и как мы видим он начинается с новой строки и между заголовком h1 и абзацем есть отступ.

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

Данный тег «strong» вложен внутрь содержимого тега «p». Это значит, что содержимое тега strong будет отображаться как часть абзаца. Такие вложенные теги называются дочерними, а теги в которые вложены другие теги называются родительскими. Таким образом, тег «strong» является дочерним, а тег «p» — родительским. Такая вложенность тегов встречается в HTML сплошь и рядом.

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

Кстати, элемент strong является строчным элементом. И как мы видим никаких переносов строк, ни отступов при отображении этого элемента не осуществляется

И очень важно упомянуть, по правилам языка html строчные элементы не могут иметь вложенных тегов

Вы могли заметить, что открывающий тег «h1» кроме названия содержит еще какой-то текст: align=»center». Это атрибут тега, который задает его параметры. Каждый атрибут имеет имя, после которого идет знак =, и далее идет его значение взятое в кавычки:

В наше конкретном случае, атрибут align тега h1 задает выравнивание текста. Так значение center указывает браузеру, что содержимое тега h1 необходимо выровнять по центру.

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

Что понимается под web-страницей и web-сайтом

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

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

Вот вы сейчас читаете эту статью, которая как раз и располагается на такой странице.

А вот объединение этих самых веб-страниц между собой одной тематикой, веб-дизайном и ссылками называют web-сайтом.

Веб-сайты, как правило, объединены под одним адресом (домен) и принадлежат они частному лицу или организации.

Вот небольшой пример:

Возьмем этот блог – он принадлежит мне Александру Зырянову (частное лицо) и его адресом является домен webnub.ru (имя сайта)

Но есть и такие варианты как:

1. Один сайт располагается на нескольких доменах
2. Один домен включает в себя несколько сайтов

Первым вариантом, как правило, пользуются веб-порталы (большие сайты) для того чтобы удобно представлять свои услуги вот к примеру Mail.ru:

• e.mail.ru – почтовый сервис
• go.mail.ru – поиск
• news.mail.ru – новости

Второй вариант в большинстве случаев используют бесплатные хостинги.

Для примера вот один из самых популярных Wix.com.

Не будем отвлекаться и продолжим

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

А предоставляют эти услуги хостинги, которые арендуют веб-серверы.

А вот так они выглядят уже загруженные страница и сайт.

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

И так определение разобрали, теперь давайте рассмотрим, как их создают.

Форматы в зависимости от цели использования

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

	Фотографические изображения	Графика, логотипы, иконки
Лучший выбор	WebP; JPEG (с оптимальной степенью сжатия).	SVG; PNG; WebP.
Худший выбор	GIF; SVG.	JPEG (сжатие добавляет артефакты, смазывается текст, края линий, пропадает прозрачность).
Лучшее качество	JPEG (минимальное сжатие); PNG; WebP.	PNG; SVG; WebP.
Наименьший размер файла	JPEG (максимальное сжатие); WebP.	SVG; GIF.

Виды страниц

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

1. статические
2. динамические
3. персональные

Статические

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

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

Динамические

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

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

Информация таких страниц выводится из баз данных. А применяются для этого такие технологии как PHP, Java,

Персональные

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

Самый простой пример это личная страничка ВКонтакте.

Популярные веб-редакторы

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

Notepad++

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

• подсветка синтаксиса;
• автодополнение кода;
• функции нумерации строк и сворачивания блоков кода.

К тому же эта программа обладает простым и понятным интерфейсом, она русифицирована, имеет небольшой размер и достаточно быстро работает. Ещё одним неоспоримым плюсом этого редактора является то, что он распространяется бесплатно. Но, к сожалению, Notepad++ устанавливается только под операционной системой Windows. В качестве близкой по функциям альтернативы для операционной системы Linux можно назвать редактор juffEd.

Что значит сообщение «веб-страница замедляет браузер»

Часто при просмотре сайтов возникает отображается текст «Веб-страница замедляет ваш браузер». Как правило, замедление происходит из-за того, что браузер автоматически загружает много ненужных скриптов на данной странице. Чтобы решить проблему, необходимо поменять настройки веб-обозревателя с целью быстрой загрузки скриптов. Для этого заходим в меню браузера, ищем «Инструменты», затем жмем пункт «Добавить». Ищем специализированный плагин «Shockwave Flash» и устанавливаем его. Затем в настройках плагина выбираем пункт «Спрашивать перед активацией» и ставим рядом с ним галочку

Обратите внимание, что наименование пунктов может меняться в зависимости от используемого браузера, главное – уловить смысл

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

Язык HTML и его теги

Первая версия языка HTML появилась еще в 1992 году. На момент 2013 года разрабатывается спецификация новой версии HTML под номером 5. Разработкой данной спецификации занимается организация World Wide Web Consortium, или сокращенно W3C.

Организация W3C занимается разработкой и других Web-стандартов. Ознакомится с этими стандартами вы можете на их сайте www.w3.org. Кстати, Многие Web-браузеры уже поддерживают некоторые возможности HTML 5.

Предлагаю начать изучение языка HTML сразу с примера. Поэтому давайте создадим нашу первую Web-страничку. Для создания WEB-страниц подойдет любой текстовый редактор.

Я предлагаю для начала воспользоваться встроенным в Windows Блокнотом (Notepad)(вообще в дальнейшем для редактирования html-кода я советую использовать бесплатный текстовый редактор Notepead++). Найти его можно: «Пуск — Все программы — Стандартные — Блокнот». Давайте создадим страничку об автомобилях. Итак, откроем Блокнот и наберем в нем текст:

Далее сохраним созданную web-страницу в файл с именем index.html. При этом в диалоговом окне сохранения файла необходимо задать кодировку UTF-8 и заключить имя файла в кавычки, иначе Блокнот добавит к нему расширение txt, и наш файл получит имя index.htm.txt:

Теперь осталось открыть созданный файл в браузере и посмотреть на результат. Для этого можно воспользоваться поставляемым в составе Windows браузером Microsoft Internet Explorer, либо любым другим установленным на вашем компьютере браузером, щелкнув два раза мышкой по файлу index.html или перетаскиванием файла на значок браузера. Открываем и видим примерно такой результат:

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

Веб-страницы

Ключевые слова:

• статические веб-страницы	
• динамические веб-страницы	
• язык HTML
• веб-программирование	
• хостинг
• веб-приложение
• система управления
		содержимым (CMS)
• скрипт

Веб-сайт состоит из веб-страниц. Веб-страницы — это обычные текстовые файлы (в формате «только текст», англ. plain text). Для того чтобы определить структуру документа (заголовки, абзацы, списки и др.), используют язык HTML. Это именно язык разметки, а не полноценный язык программирования: в нём нет переменных, циклов, ветвлений, процедур и функций.

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

В языке HTML используются команды особого типа — тэги. Существуют тэги для выделения заголовков, абзацев, списков. С помощью тэгов в веб-страницы добавляют рисунки, звуки, анимацию, видео, которые хранятся на сервере в виде отдельных файлов. Часто для дополнительных данных на сайте создаются специальные каталоги, например рисунки могут быть размещены в каталоге images, звуковые и видеофайлы — в каталоге media (рис. 1.15).

Рис. 1.15

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

На веб-странице размещены 5 рисунков (каждый в виде отдельного файла), 2 звуковых файла и 4 ссылки на видео на сервере youtube.com. Сколько запросов направит браузер веб-серверу?

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

Веб-страницы можно разделить на два типа:• статические веб-страницы (они обычно имеют расширения htm или html) хранятся на сервере в готовом виде;
• динамические веб-страницы (с расширениями php, asp и др.) — полностью или частично создаются на сервере в момент запроса.

Используя дополнительные источники, выясните, на каких языках программирования написаны динамические веб-страницы с расширениями php, asp, ру, рl.

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

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

Практически все крупные сайты состоят из динамических вебстраниц. Однако создание динамического веб-сайта — достаточно сложная задача, для решения которой нужно (кроме знания языка HTML) уметь программировать на одном из серверных языков (РНР, Python, ASP, Perl).

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

Постройте в тетради таблицу, в которой сравниваются достоинства и недостатки статических и динамических веб-страниц.

Следующая страница Веб-программирование

Cкачать материалы урока

Веб страница не отвечает: что делать и как решить проблему

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

Сначала стоит обратить внимание на URL. Проверьте, чтобы в адресной строке был правильно указан адрес страницы

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

Второй способ — удалить файлы. Это специальные файлы, которые создаются для сохранения информации о созданном профиле. Иногда cookie файлы повреждаются. Это приводит к тому, что страницы не отображаются. Чтобы их удалить, открываем настройки браузера, выбираем пункт «Дополнительно» и затем «Личные данные». Открываем настройки контента и выбираем интересующие нас файлы. Удаляем «Все файлы cookie и данные сайтов».

Следующий способ — изменить прокси-сервер. Иногда подключение через прокси-сервер может приводить к медленной загрузке веб-страниц или ошибках в их отображении. Чтобы решить проблему, зайдите в настройки, затем откройте пункт «Сеть» и укажите наименование сети. Далее откройте настройки прокси сервера и введите необходимые параметры. Если вы не знаете эти параметры, обратите к администратору вашей сети. Дале интернет-соединение прервется. Переподключитесь к сети интернет и продолжите работу.

Настройки

  Большинство настроек расширения просты и понятны.

Анализировать только избранные сайты

  Установите положение переключателя в позицию ВКЛ чтобы расширение анализировало только страницы избранных сайтов. В поле Домены укажите домены сайтов через запятую с пробелом. При этом не нужно указывать протокол (https:// или http://):

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

  Чтобы расширение анализировало все просматриваемые сайты, то эту настройку установите в положение ВЫКЛ.

Проверять длину Meta Description

  Данная настройка будет проверять количество символов в Meta Description. При этом вы можете задать интервал для длины Meta Description:

  Если Meta Description веб-страницы будет выходить за пределы указанных значений, то расширение просигнализирует об этом как ошибка и выведет Meta Description в блоке ошибок:

Проверять повторяющийся Meta Description

  Данная настройка делает проверку на повторение текста Meta Description. Укажите здесь домен и мета-описание сайта:

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

Искать форматы изображений

  Эта опция будет искать заданные форматы изображений

  Будет полезно для поиска устаревших форматов изображений. Например, можно искать картинки форматов png и заменять их на webp.

Удалять в отчёте префиксы из путей url-адресов изображений

  Если на сайте для оптимизации используется технология Lazy Load (ленивая загрузка изображений), то в путях изображений добавляются префиксы. Их можно удалить, чтоб видеть в отчёте правильные пути. Посмотрите на скриншоты ниже, где на первом есть префиксы в путях, на втором — их уже нет:

  Укажите в поле «Префиксы» повторяющуюся в пути изображения часть префикса и расширение будет удалять из путей указанный префикс и всё что после него (номер хеша). Так для примера со скриншотов выше я указываю

2.2.3 Открытие и просмотр Web-страниц

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

Если
URL-адрес Web-страницы известен, его можно
ввести в поле панели Адрес и щелкнуть
на кнопке Переход. Страница с указанным
адресом открывается вместо текущей.

Наличие
средства автозаполнения адресной строки
упрощает повторный ввод адресов. Вводимый
адрес автоматически сравнивается с
адресами ранее про­сматривавшихся
Web-страниц. Все подходящие адреса
отображаются в раскрыва­ющемся списке
панели Адрес. Если нужный адрес есть в
списке, его можно выбрать клавишаами
ВВЕРХ и ВНИЗ, после чего щелкнуть на
кнопке Переход. При отсутствии нужного
адреса ввод продолжают как обычно.

Текстовый редактор с подсветкой html кода

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

Notepad++

Один из лучших, на мой взгляд, текстовых редакторов. Самое главное то, что программа абсолютно бесплатна и скачать ее можно на сайте разработчиков. Notepad++ умеет выделять синтаксис не только языка html, но и языка стилей CSS, синтаксис Javascript и еще многих языков программирования. Кроме подсветки синтаксиса html, Notepad++ предоставляет множество других полезных функций, облегчающих создание web-страниц. Подробное описание возможностей этого редактора можете почитать в статье «Бесплатный текстовый редактор Notepad++». К тому же возможности Notepad ++ можно расширять при помощи плагинов, найти которые можно в интернете. В общем я советую вам этот текстовый редактор, а выбор за вами.

PSPad

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

Dreamweaver

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

Как они создаются

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

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

Но давайте не будем спешить и разберем все по порядку.

В области создания сайтов можно выделить два способа:

1. С помощью HTML
2. С помощью CMS

В первом случае создается один или несколько документов в формате html или htm в зависимости, что именно нужно сделать страницу или сайт.

И с помощью специального языка разметки HTML и специалиста в этой области (верстальщик) пишется код, где прописывается расположение картинок, текста, таблиц и.т.д

После написания кода данные файлы загружаются на хостинг где и находятся в корневой папке сервера.

Во втором случае используется целая система управления контентом (CMS) в народе ее называют «движок».

Сейчас существует несколько видов движков вот самые популярные:

• WordPress
• Drupal
• Joomla

Вот кстати этот блог создан на движке WordPress.

И если вам интересно узнать, как все этапы создания выглядят изнутри обязательно подпишитесь на обновления и следите за рубрикой «Реалити по созданию блога на WordPress»

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

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

Для полноценной реализации все ваших задумок для них создаются специальные плагины. Установить их тоже не составит труда.

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

На сегодняшний день это способ создания сайтов наиболее популярен.

Экспресс анализ

  Расширение в фоновом режиме проводит ряд тестов с содержимым просматриваемой в браузере веб-страницы и оповещает о найденных ошибках индикатором на иконке расширения в панели браузера:

Состояния индикатора иконки расширения:

— найдены ошибки; — есть предупреждения; — ошибок и предупреждений нет.

  Просто кликните на иконку расширения чтобы просмотреть детали анализа.

• Проверка наличия семантической разметки
• Проверка title
• Проверка Meta Description
• Проверка повторяющегося Meta Description
• Проверка длины Meta Description
• Проверка Meta Keywords
• Проверка заголовков
• Проверка у изображений атрибута alt
• Поиск изображений заданных форматов
• Проверка фактических и номинальных размеров изображений
• Проверка пустых ссылок
• Поиск внешних ссылок на странице

Векторные форматы

GIF, JPEG, PNG, и WebP — растровые форматы, основанные на дискретном (пиксельном, точечном) представлении изображения, в то время как векторные форматы основаны на математических формулах (геометрическом представлении фигур). Подробнее о векторной графике можно прочитать в статье «Растровая и векторная графика».

SVG (Scalable Vector Graphics)

SVG переводится как — масштабируемая векторная графика. Формат существует с 1999 года.

Размер объектов SVG намного меньше размера растровых изображений, а сами изображения не теряют в качестве при масштабировании. В отличие от растровых форматов мы можем взаимодействовать с изображениями в формате SVG — при помощи CSS можно изменять параметры графики: цвет, прозрачность или границы, а при помощи JavaScript — анимировать изображение.

SVG поддерживается почти всеми браузерами за исключением Internet Explorer 8 и ниже, но и это можно решить подключением JavaScript-библиотек, например, SVGeezy.

Формат SVG отлично подходит для малоцветных схем, логотипов и иконок.

Примеры SVG (источники изображений: Roundicons Freebies www.flaticon.com/authors/roundicons-freebies
и HTML Academy)

Таким образом, формат SVG подходит если:

• нужно анимировать части изображения;
• изменять цвет элементов изображения;
• необходимо масштабировать изображение без потерь.