Содержание

что надо знать о первой странице сайта

Главная страница — самая первая страница, которая появляется при заходе на сайт.

Главная страница есть у всех сайтов, от солидных интернет-магазинов до популярных форумов. Основная функция главной страницы – это привлечение внимания целевой аудитории и конвертации пользователей в реальных клиентов.

В Рунете главную страницу часто называют «мордой». Данный термин прочно вошел в обиход ввиду своей ясности и краткости. Главную страницу можно именовать и «хомяком». Происхождение этого определение может быть объяснено искаженным произношением английского «home page», или «домашняя страница». Впоследствии вторая часть словосочетания «page» отсеялась, и «home» превратился в «хомяка».

А вот английское «doorway», или «входная дверь», на русской почве сократилось до «дорвея» или «дора» и стало причисляться к методам черного SEO. Дорвей – это чаще всего одностраничный сайт с высокочастотным запросом. При попадании на дор пользователя автоматически перекидывает на страницу настоящего сайта, оптимизированную уже под совсем другие запросы.

Визитная карточка

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

Способ продвижения

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

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

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

Строение сайта и его компоненты.

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

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

Рассмотрим основные технические компоненты и строение сайта.

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

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

  2. Верстка представляет собой процесс написания особого кода для браузеров. У такого файла расширение html, и отображается он только в браузерах. Нужно следить, чтобы сверстанный макет одинаково выглядел во всех браузерах, будь то Opera, Mozilla Firefox, Google Chrome или Internet Explorer. Дополнительно можно узнать о таком термине, как «валидность верстки» в специальной статье о ней.
  3. Программирование составляет примерно 50-70% работы над сайтом. Программная часть ресурса – довольно обширное понятие. Программирование отвечает за то, чтобы многочисленные страницы сайта отображались с одинаковым дизайном, но разным содержимым. Также программный код ответственен за визуальные эффекты и многое другое. Благодаря ему сайт становится «живым» и динамичным.
  4. Веб-сервер – это компьютер с установленным на нем программным обеспечением, которое предназначено для того, чтобы отвечать на запросы веб-клиента круглосуточно в режиме реального времени. Под веб-клиентом подразумевается браузер, который отправляет серверу запрос на определенную страницу, и если она доступна, то пользователь может увидеть ее. Чтобы пользователь увидел нужную ему страницу, его браузер должен получить от сервера соответствующий html-код. После чего код и все визуальные элементы распознаются и предстают перед пользователем в виде готовой понятной любому страницы.
  5. Клиентская часть представляет собой код, загружаемый вместе с кодом html. Это может быть CSS, JavaScript, ActionScript.
  6. Контент сайта, то есть все содержимое сайта. Сюда входят тексты, картинки, видео, flash и прочие файлы. Контент часто путают с элементами дизайна, но это совершенно разные вещи. Оформление сайта отвечает на вопрос «как разместить», а контент отвечает на вопрос «что разместить». Что касается текстового наполнения, то именно оно наполняет любой веб-ресурс смыслом, благодаря которому пользователи могут найти сам сайт в поисковых системах. Интересный контент – это ключ к увеличению посещаемости, читаемости и коммерческих показателей, таких как звонки, продажи или подписки на e-mail рассылки.
  7. CMS тоже можно отнести к одному из элементов сайта. Система управления содержимым позволяет управлять всеми элементами ресурса через административную часть. Использование CMS не обязательно, однако оно необходимо всем, кто хочет самостоятельно контролировать и редактировать содержимое сайта. Существует целый ряд разнообразных CMS, отличающихся друг от друга удобством пользования, набором свойств и принципами работы.
  8. Доменное имя и хостинг. Доменное имя – это уникальный адрес сайта в Сети (например, www.site.by). А хостинг – это услуга, которая предоставляется специальными компаниями, хранящими на своих серверах все необходимые для работы сайта данные. Без этих компонентов строение было бы неполным, а сам сайт — недоступен для пользователей и посетителей. Хостинг предполагает выделение свободного места на сервере для размещения и хранения какого-либо сайта. Чтобы владелец был уверен в том, что его сайт всегда виден пользователям Интернета, он обязательно должен обзавестись уникальным доменным именем, а также надежным хостингом. Чтобы выбрать правильный хостинг, предлагаем Вам прочитать нашу статью с более подробными рекомендациями.

Визуальные части сайта

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

Верхняя часть. Шапка. Что и зачем?

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

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

Боковые части. Левая или правая – как лучше?

Наверняка каждому доводилось не раз видеть сайты с боковым меню, так называемым сайдбаром. Он бывает правым и левым. Более распространенным считается левое расположение, так как оно более привычно для глаза. Однозначного ответа, где лучше располагать боковое меню не существует. Каждый владелец сайта или веб-дизайнер имеют свои предпочтения, которые и реализуются в целостной картине. Цель размещения сайдбара – помочь пользователю в удобстве навигации по страницам веб-ресурса.

Центр – лучшее место для контента

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

Нижняя часть – место для того, что не уместилось выше

Как только не называют низ сайта: и подвал, и футер (foot– с англ. — нога). Многие владельцы сайтов попросту игнорируют эту немаловажную часть, оставляя ее пустой. Между тем, в ней можно разместить дополнительную информацию, которой не нашлось места в других частях ресурса, а также продублировать важные данные, такие как контактные телефоны и адреса.

Послесловие

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

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

Ключевые элементы хорошего сайта ⇒

15 лучших примеров дизайна главной страницы сайта


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


Что же делает дизайн главной страницы интересным и привлекательным? И чего следует избегать, чтобы он не казался пресным и скучным?


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


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


Содержание статьи

Семь правил оформления главных страниц
1. FreshBooks: классика жанра
2. Airbnb: ориентация на действие
3. Pixelgrade: игра на контрасте
4. Mint: минимализм еще в тренде
5. Dropbox Business: ничего лишнего
6. 4 Rivers Smokehouse: вкусная фотография
7. Melyssa Griffin: личный бренд
8. Evernote: гармоничные цвета
9. Basecamp: мультяшный стиль
10. charity: water: убедительный призыв
11. TechValidate: баланс во всем
12. Medium: белый дизайн
13. Digiday: внимание на главном
14. KIND Snacks: яркая гамма
15. Ahrefs: четкий заголовок
Вместо заключения

Семь правил оформления главных страниц

1. Хорошая homepage четко отвечает на вопросы: «Что это за компания?», «Чем она занимается?» и/или «Что вы (посетитель) можете здесь делать?»


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


О том, почему это остается важным, лучше всех объясняет Стивен Кругг (Steven Krugg), автор бестселлера «Не заставляй меня думать» (Don’t make me think): «Если посетители не могут за пару секунд определить, чем именно вы занимаетесь, надолго они не задержатся».

2. Контент должен резонировать с потребностями целевой аудитории


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

3. Главная страница содержит убедительный оффер


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

4. Сайт оптимизирован под разные устройства и экраны


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

5. Дизайн включает в себя призывы к действию (CTA)


Все примеры из списка эффективно используют первичные и вторичные призывы к действию, указывающие посетителям на действия, которые те могут совершить: «Получить бесплатную пробную версию», «Начать поиск», «Читать далее» и т.д.


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

6. Тренды всегда меняются


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

7. Дизайн должен быть профессиональным


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


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

Читайте также: Лендинг vs главная страница: ключевые отличия

1. FreshBooks: классика жанра 

«Многофункциональное решение для выставления счетов и учета в малом бизнесе. Наше облачное ПО позволяет быстро, просто и безопасно справляться с бухгалтерскими отчетами. Тратьте меньше времени на счета — и больше на работу, которую вы любите. Начать»


Главная страница сайта компании FreshBooks, занимающейся облачным бухгалтерским программным обеспечением, была выбрана в качестве классического примера дизайна потому что:


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

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

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

  • подзаголовок рядом CTA в футере также хорош: «Присоединяйтесь к более 24 миллионам владельцев малого бизнеса, использующих FreshBooks». Компания ловко использует социальное доказательство, чтобы обеспечить аудиторию достаточной мотивацией попробовать продукт и присоединиться к огромному сообществу тех, кто уже это сделал.

2. Airbnb: ориентация на действие 


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


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

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

  • главный призыв к действию («Начать поиск») контрастирует с фоном и поэтому хорошо заметен; дополнительный призыв для владельцев недвижимости виден не так хорошо, но ему тоже нашлось место на первом экране сайта.

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

Читайте также: Секреты юзабилити: намерение пользователя и поисковые фильтры

3. Pixelgrade: игра на контрасте

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


Главную страницу этой студии дизайна, которая создает темы для WordPress, отличают следующие черты:


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

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

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

4. Mint: минимализм еще в тренде 

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


Чем интересен этот пример от бесплатного персонального сервиса по управлению финансами:


  • супер-простой минималистичный дизайн вкупе с сильным заголовком и оригинальным подзаголовком.

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

  • призыв к действию прост, прямолинеен и убедителен: «Зарегистрируйся бесплатно». Дизайн CTA заслуживает отдельного упоминания: во-первых, благодаря ему, кнопка хорошо заметна, а во-вторых, размещенная рядом с текстом иконка запертого замка в шапке сайта негласно сообщает потенциальным пользователям приложения о том, что Mint — это абсолютно безопасно и беспокоиться просто не о чем.

Читайте также: 10 трендов веб-дизайна на 2020 год


Дизайн сайта файлового хостинга Dropbox:


  • продолжает удивлять своей простотой и минимализмом. На первом экране присутствует только то, что действительно важно: большое вполне уместное изображение с поясняющим текстом и CTA-кнопка «Попробуйте бесплатно (30 дней)».

  • главная страница да и весь веб-сайт Dropbox — это показательный пример незамысловатого, но вместе с тем эффективного дизайна. Здесь не так много текста и визуальных элементов, при этом сайт совсем не кажется пустым или пресным.

  • подзаголовок такой же простой, но весьма убедительный: «Безопасное хранилище для файлов. Это умное рабочее пространство, в котором собраны рабочие группы, инструменты и данные». Понять, что предлагает Dropbox, можно за считанные секунды.

6. 4 Rivers Smokehouse: вкусная фотография

«Грудинка. 18 лет опыта. Вкус, который нужно смаковать»


Чем интересен этот дизайн:


  • в сочетании с великолепной фоновой фотографией заголовок действительно пробуждает желание попробовать говядину.

  • удачное применение такой зрелищной технологии, как параллакс-скроллинг, который придает знакомству с сервисом и меню особый шик и настроение.

Читайте также: 36 потрясающих примеров использования эффекта параллакс-скроллинга на лендингах

«Получите мой рабочий бизнес-план бесплатно. Ответьте на быстрый вопрос, и мы немедленно отправим вам книгу! Нажмите тут для регистрации»


Преимущества дизайна этого сайта, принадлежащего Мелиссе Гриффин, которая помогает предпринимателям монетизировать свой оффер и развивать свое сообщество:


  • первой строкой идет мощное социальное доказательство: «Присоединись к 200 000 других…».

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

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

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

8. Evernote: гармоничные цвета 


Чем привлекает этот дизайн от Evernote, популярного веб-сервиса для создания и хранения заметок:


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

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

  • от простого заголовка и подзаголовка взгляд пользователя естественно перемещается на CTA-кнопку «Зарегистрируйтесь бесплатно».

  • Evernote позволяет оформить регистрацию в один клик с помощью аккаунта Google: это очень удобно и экономит время.

Читайте также: F-паттерн: неверно понятый, но все еще актуальный (даже на мобильных)

9. Basecamp: мультяшный стиль


Чем интересная главная страница этого инструмента для управления проектами, совместной работы и постановки задач:


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

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

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

  • отзыв клиента, оформленный в виде цитаты, — это смелое и выразительное заявление решение.

Читайте также: Когда главную страницу сайта лучше заменить лендингом?

10. charity: water: убедительный призыв


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


  • это не типичный некоммерческий сайт. Здесь много визуальных элементов и глубокого текста, а использование интерактивного веб-дизайна делает призыв особенно заметным.

  • анимированное изображение в шапке — отличный способ привлечь внимание к заголовку.

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

11. TechValidate: баланс во всем

«Социальное доказательство в масштабе. Наш софт собирает и преобразовывает отзывы клиентов в тематические исследования, отзывы, обзоры и многое другое. Получить демо»


Достоинства дизайна:


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

  • заголовок ясен и убедителен, как и призывы к действию.

  • иерархическое расположение информации, которое обеспечивает быстрое и легкое восприятие страницы пользователем.

Читайте также: Все, что вам нужно знать о визуальном восприятии и дизайне сайтов

12. Medium: белый дизайн

«Истории, которые всегда при тебе. Приложение для читающих на ходу»


Чем примечателен этот пример дизайна от платформы для социальной журналистики:


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

  • на главной странице размещено социальное доказательство, которое помогает найти контент, качество которого подтверждено другими людьми.

13. Digiday: внимание на главном  


Что интересного:


  • в отличие от других новостных интернет-изданий, которые наводняют главные страницы своих сайтов как можно большим количеством заголовков и изображений, над «линией сгиба» Digiday внимание читателей сосредоточено только на одной статье. Вполне подходящее ее теме изображение (в данном случае, довольно пугающее) бросается в глаза, а заголовок так и просит, чтобы по нему кликнули, ведь теперь у посетителя есть представление о том, что ему предстоит прочитать.

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

Читайте также: Нейромаркетинг: как привлечь внимание на лендинге?

14. KIND Snacks: яркая гамма


Достоинства дизайна:

  • смелые цвета усиливают контраст, позволяя словам и изображениям хорошо смотреться на странице и быть заметными.

  • слоган KIND Snacks прост и гениален: «Ингредиенты, которые ты сможешь увидеть и произнести». Таким образом компания прямо говорит, что эти снеки из натуральных продуктов, знакомых каждому. Никаких консервантов и труднопроизносимых компонентов.

15. Ahrefs: четкий заголовок

«Инструменты для увеличения вашего поискового трафика, исследования ваших конкурентов и мониторинга вашей ниши. Ahrefs поможет вам понять, почему ваши конкуренты имеют такой высокий рейтинг и что вам нужно сделать, чтобы опередить их. Начать 7-дневный тестовый период за $7»


Почему эта страница достойна внимания:


  • контраст между синим, белым и оранжевым цветами бросается в глаза и делает заголовок и CTA еще более заметными;

  • подзаголовок и CTA прекрасно дополняют друг друга: получить возможность разгадать секреты конкурентов и превзойти их — кто в здравом уме способен от этого отказаться?

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

Читайте также: Анатомия шрифта: визуальный гайд по типографике

Вместо заключения


В этой статье мы рассмотрели 15 отличных примеров оформления главных страниц сайтов различной тематики. Все homepage, показанные выше, очень удобны: на них легко ориентироваться, они не содержат «кричащих» объектов, например, флэш-баннеров, анимаций или других чрезмерно сложных и ненужных элементов. Многие также оптимизированы для мобильных устройств, что очень важно в современном веб-маркетинге.


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


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


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


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


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


Высоких вам конверсий! 

По материалам blog.hubspot.com Изображение: freepik.com

11-01-2013

что это такое, какими они должны быть и что на них писать

Делаем вашу страницу интересной и стимулируем подписчиков почаще заглядывать к вам на страницу или на сайт за покупками

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


Подпишись на рассылку и получи книгу в подарок!

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

Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

Рассмотрим пример. Аналогию можно провести с библиотекой. На стеллажах стоят книги — веб-сайты. Они могут быть из 1-2 страниц, а также содержать более 1 млн. Каждая страница книги (веб-сайта) и есть веб-страница.

Как мы уже говорили выше, каждая единица веб-ресурса (веб-страница) создается при помощи языка HTML, и обязательно содержит главный заголовок (Title), описывающие мета-теги (Keywords, Description) и тело (Body) — ее основную часть. В теле можно видеть подключаемые изображения, тексты, ссылки и т.д. Все это можно просмотреть при помощи интернет-браузера.

Какие страницы должны быть на сайте и как их продвигать

Самой важной единицей любого веб-ресурса считается Главная. Она, как правило, располагается в корневой директории и имеет название index.php, index.html и т.п.

Попасть на нее можно по следующему URL: http://домен/index.html или просто http://домен. С главной можно перейти на все остальные разделы веб-ресурса. Совокупность разделов (веб-страниц) в виде путей по ним называется структурой интернет-сайта.

Пример структуры сайта:

Главная
— Информация
— Статьи
— Услуги
— Грузоперевозки
— Аренда машин
— Контакты

Как видно из представленного примера, у веб-документов может быть несколько уровней вложенности. Первый — главная страница, второй — документы “Информация”, “Статьи”, “Услуги”, “Контакты”, третий — “Грузоперевозки”, “Аренда машин”. Уровней может быть больше трех.

При работе над продвижением веб-проекта следует придерживаться правила 3-х кликов: переход на самый дальний документ не должен занимать более 3 кликов с главной. В представленном нами примере документы третьего уровня находятся в 2-х кликах (“Услуги” — первый клик от Главной, “Грузоперевозки” — второй клик. Теоретически из раздела “Грузоперевозки” можно сделать еще 1 клик на внутренний документ, доступный для продвижения.

Как поисковый робот индексирует веб-сайты

Поисковик изначально приходит на главную страницу. Затем собирает с нее ссылки и проходит по ним. Так в его базу попадают документы второго уровня. Следом начинается обработка документов второго уровня по такому же принципу. Часто до документов далее 3-го уровня робот-поисковик просто не доходит.

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

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

На каждую HTML-страницу следует распределять от 1 до 10 ключей, в зависимости от их частотности и тематики проекта.

Что писать на страницах сайта

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

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

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

Структура страницы

  • Шапка (хедер) — главная часть вверху, сообщающая посетителю, о чем сайт.
  • Контентная часть — содержимое: тексты, картинки, видео, формы отправки, калькуляторы и многое другое.
  • Подвал (футер) — нижняя “закрывающая” часть.

Подробнее про структуру страницы можете почитать тут.

Что еще может быть на каждой веб-странице

  • Меню — список доступных разделов.
  • Навигационная строка — чтобы посетитель знал, где находится, и всегда мог вернуться в предыдущий раздел.

Как создается каждая страница

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

Какие HTML-страницы любит поисковая система

  • Поисковик предпочитает текст. Если на сайте много красивых картинок, но мало текста — это плохо.
  • Откажитесь от тяжелых изображений, java-скриптов и сложной анимации. Уделите больше внимания текстам, которые должны быть уникальными, интересными и грамотными.
  • Тексты должны быть структурированы, наполнены ключевыми словами и синонимами “в меру”. Иначе может последовать наказание за переспам.
  • До каждой веб-страницы можно дойти с помощью кликов по ссылкам. То есть у вас не должно быть страниц, на которые не ссылается ни одна другая.
  • Придерживайтесь правила трех кликов.
    URLы должны быть человекопонятнми и короткими. Желательно применять в URL ключи на латинице. К примеру, сайт.ru/domen/price. Избавляйтесь от динамических URL и огромного количества слеш в адресе (не более 3 слешей).
  • Динамическая веб-страница генерируется программно в виде HTML, и имеет адрес типа сайт/index.php?id=1039.
  • Если на конечный документ ведет ссылка сайт.ru/str/, то это плохо, потому что слеш в конце URL сообщает боту о том, что на там еще есть вложенные страницы (и ссылки на них), которые нужно проиндексировать. Если робот не находит их, сайт.ru может быть понижен в выдаче.
  • Код должен быть коротким и валидным (безошибочным). Все стили оформления (тексты, блоки, картинки и т.п.) следует выносить в отдельный файл CSS.
  • Нельзя копировать чужой текст и размещать его на своем проекте. Поисковики любят уникальные тексты. Если без копирования не обойтись, то количество такого текста не должно превышать 10%, и под каждым из них должна стоять прямая ссылка на ресурс-первоисточник.

Сайт-одностраничник — хорошо или плохо

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

Но о том, каким должен быть объем “правильного” полноценного веб-проекта, никто сказать не сможет. Количество страниц веб-ресурса зависит от тематики и степени продвинутости ваших конкурентов.

Веб-страницы, веб-сайты, веб серверы и поисковики — Изучение веб-разработки

В этой статье мы расскажем о различных понятиях связанных с Веб: о веб-страницах, веб-сайтах, веб-серверах и о поисковых системах. Эти термины часто ставят в тупик как начинающих работу с Веб, так и людей, редко пользующихся сетью. Давайте же разберёмся, что именно эти понятия означают!

Необходимые знания:

Вы должны знать,  как работает Интернет.

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

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

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

Веб-страница
Документ, который может быть отображён веб-браузерами, такими как: Firefox, Google Chrome, Microsoft Internet Explorer / Edge или Safari от Apple. Само понятие «веб-страница» для краткости будем называть просто «страница».
Веб-сайт
Коллекция веб-страниц, связанных между собой какими-либо способами. Употребление в лексике: «веб-сайт» или просто «сайт».
Веб-сервер
Компьютер, предоставляющий компьютерное и программное обеспечение, необходимое для функционирования веб-сайта.
Поисковая система
Веб-сайт, помогающий в поиске других веб-страниц, например такие как: Google, Bing или Yahoo.

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

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

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

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

Примечание: браузеры зачастую могут отображать некоторые документы в формате PDF файла или изображения, но термин веб-страница больше относится непосредственно к HTML-документам. До конца статьи, в данном случае, мы будем использовать понятие  документ.

Все веб-страницы в сети имеют свой уникальный адрес. Чтобы получить доступ к нужной странице просто наберите её адрес в адресной строке вашего браузера:

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

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

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

Веб-сервер

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

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

Поисковая система

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

Наиболее популярные поисковые системы: Google, Bing, Yandex, DuckDuckGo, и многие другие. Некоторые из них универсальны, а какие-то ориентированы на определённую область. Используйте тот поисковик, который удобен вам.

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

Ниже пример того, как браузер Firerox по умолчанию отображает окно поиска Google на стартовой (домашней) странице:

Как называется одностраничный сайт | ЗЕКСЛЕР

Сайт-визитка

Вид одностраничного сайта, выполняющего функции своеобразного интернет-представительства для физических и юридических лиц. Основная задача – ознакомить посетителей с осуществляемой владельцем сайта деятельностью и предоставить им необходимый объем полезной информации.

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

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

​   ​

Продающий сайт

Как антипод представительской визитке, рассмотрим еще один вид одностраничников – landing page. Эти сайты предназначены для решения узкой задачи – заставить посетителя совершить запланированное разработчиком целевое действие. Звучит несколько запутанно, но на самом деле все просто. Если ваш лендинг создан для сбора базы электронных адресов – значит это и есть поставленная цель, которую решает одностраничник. А запланируете продажи – лендинг должен будет продавать. Ну говорим, естественно, о хороших сайтах, сделанных профессиональными веб-агентствами.

Рассматриваем характерные особенности продающих одностраничников.

Соблюдение правила «Одна страница – одна цель». Это, пожалуй, краеугольный камень лендингов. Все остальные параметры способны изменяться, но только не этот. В нем заложена продающая философия целевой страницы.
Вторым отличительным признаком объявим мотивирование к совершению действия. Здесь используются любые доступные инструменты: текстовый и графический контент, внедрение видео и аудио, акцентирование достоинств и конкурентных преимуществ. Любая фактура, способная привлечь покупателя или клиента, рассматривается и подается с точки зрения ее полезного стимулирования к достижению цели.
Отдельный признак продающего одностраничника – лид-формы и обратная связь. Это конкретные атрибуты, свойственные всем лендингам – инструменты, приводящие посетителя страницы к результативному действию.

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

​ ​

Красота и полезность: совмещаем на одной странице

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

  ​ ​ ​

Футер сайта (footer): что это такое, как правильно называется низ (подвал) ресурса и примеры оформления

В статье мы поговорим про интересный структурный элемент, без которого сейчас не обходится практически ни один виртуальный ресурс. Мы узнаем футер (footer), подвал сайта, что это такое, примеры использования в различных ролях на веб-ресурсах.

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

Что разместить в футере сайта, и для чего он нужен

Этот элемент выполняет сразу несколько важных задач. И в зависимости от оформления может быть направлен на некоторые из них или сразу на все.

Итак, основные функции:

  • Информационная. Сведения о компании, партнерах и иных аспектах, которые пользователь может теоретически захотеть узнать. А также, гарантийные обязательства, доставка и сведения, которые покажутся интересными.
  • Перелинковка. Простой и изящный вариант выполнить эту задачу.
  • Адреса, маршруты, контакты на сторонних площадках. Одновременно и возможность раскрутить все остальные ресурсы компании.
  • Стильный элемент дизайна. Этот блок сейчас уже несет важное стилистическое значение. Без него ресурс выглядит как-то непривычно, неказисто, отталкивающе.

Как сделать подвал сайта

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

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

Что должно быть в подвале сайта

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

Далее мы рассмотрим все варианты, что помещать в нижнюю часть. Это не означает, что все указанные ниже методики нужно обязательно использовать. Напротив, необходимо ограничиться лишь подходящими для вас. Хотя совмещать почти все – вполне возможно. Главное — эргономично и не отталкивающе все это разместить. А это уже зачастую задача для профессионалов.

Сведения об авторстве

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

Информация о партнерах

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

Контакты

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

Социальные сети

Не секрет, что сейчас это один из главных источников притока лидов. Их популярность просто огромна. Разумеется, качественные показатели зависят от конкретной сети, в какой-то сфере лучше работает Инстаграм, в другой Вконтакте. Фейсбук, Твиттер, Дзен – все зависит от того, в каких именно социальных сетях у проекта есть свои сообщества. И здесь не работает принцип, больше – лучше. Логично ограничиться 3-4 вариантами. И разместить прямые ссылки на эти сообщества в нижней зоне. Разумеется, необходимо четко выбрать размер иконок.

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

Лид формы

Различные вариации перехода на заказ или связь с консультантом. Разумеется, у нас уже есть здесь контакты. Но, помимо них, возможно, хорошей идеей будет расположить прямые переходы в каталог или, что чаще, в корзину. А также на форму отправки письма в техническую поддержку или для получения консультации. Хотя, стоит помнить, что если на ресурсе есть функция живого чата, то надобность в такой форме сомнительная. Захламлять поле тоже не очень логично, так же как и слишком навязчивое давление на пользователей. Лучше все стараться оформить скромно и со вкусом. Помните, как называется низ сайта – подвал. То есть, помещение со вспомогательными функциями. Они не должны быть «громче», чем основные.

Карта

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

Политика конфиденциальности

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

Возрастное ограничение

Если у вас содержится контент, который не допускается для распространения лицам моложе определенного возраста. 18+ или 16+. В нижнее поле заносится просто маркер с пометкой. Чтобы пользователь не забывал об этом. Но в большинстве случае лучше всего поставит еще и модуль-барьер на сайте, который перед заходом уточнит у посетителя его возраст. И просто заблокирует вход, если он не подходит по параметрам. Разумеется, посетителю ничего не мешает соврать, но уведомить о возрастном ограничении разработчик строго обязан.

Иные сведения

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

Карта ресурса

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

Дополнительное меню

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

Облако тегов

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

Кнопка быстрого перехода наверх

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

Счетчики

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

Варианты использования футера

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

Дочитка

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

Быстрый скролл

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

Оформление

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

  • Правильная иерархия. Обязательно должно наличествовать визуальное разделение заголовков и подзаголовков, чтобы четко было видно, какой подпункт куда относится.
  • Блочная система. Для общей наглядности принято использовать подачу информации четкими геометрическими блоками. И пока такая система остается наиболее эффективной.

Варианты отображения

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

Бесконечный скролл

 

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

Контекстный

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

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

Наиболее распространенные проблемы

Чаще всего сложности кроются в следующем:

  • Слишком много уровней иерархии. Пользователь банально путается, нужно их уменьшать.
  • Смазанные имена переходов. Неясно, куда именно ведет ссылка, нет четкой тематической привязки. Следует менять названия.
  • Слишком мелкий шрифт. Чтобы уместить побольше сведений и ссылок часто его уменьшают до самых пределов. И посетитель банально не может его прочесть. А увеличивать масштаб из-за этого никто не будет. А многие просто не умеют.

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

частей веб-сайта: шпаргалка для нетехнических специалистов

Смущает терминология веб-сайта?

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

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

Базовая анатомия веб-сайта

Начнем с определения различных частей веб-сайта.

Заголовок

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

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

Навигация (также известная как панель навигации или главное меню)

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

Когда сайт просматривается на мобильном устройстве, навигация обычно трансформируется в значок с 3 составными линиями (он же «гамбургер», потому что он выглядит как гамбургер сбоку), поскольку пространство на мобильном устройстве ограничено. При нажатии на значок мобильной навигации обычно открывается вертикальное или горизонтальное переключаемое меню.

На сложных сайтах с множеством страниц вы иногда можете увидеть «мегаменю», которое представляет собой раскрывающееся меню, запускаемое при наведении курсора на ссылку в основной навигации. Затем в раскрывающемся мегаменю отображается множество ссылок, организованных по категориям и подкатегориям, вроде карты сайта.

Изображение функции (также известное как изображение героя)

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

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

Слайдер

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

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

Контент веб-сайта

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

Боковая панель

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

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

Нижний колонтитул

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

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

Посадочная страница

Когда вы запускаете рекламу в Google или Facebook (или где-либо еще), вы должны предоставить целевую страницу для человека, который попадет на , когда он щелкнет объявление — отсюда и название целевой страницы.

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

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

Домашняя страница (или Домашняя страница)

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

Блог

Блог — это на самом деле разновидность веб-сайта.

Так в чем разница между блогом и веб-сайтом? Немного. В основном это сводится к тому, как контент структурирован и представлен.

  • Когда вы публикуете что-то в блоге, это называется сообщением , и сообщения блога публикуются в хронологическом порядке, как записи в дневнике. Слово «блог» происходит от сокращения веб-журнала .
  • Когда вы публикуете что-то на веб-сайте, это называется страницей , и веб-страницы не отображаются последовательно.Это просто страницы коллекций (то есть домашняя страница, страница о нас, страница контактов и т. Д.), Которые связаны между собой.
  • Сообщения в блогах позволяют взаимодействовать с читателями с помощью комментариев. На стандартных веб-страницах нет раздела для комментариев.
  • Веб-страницы обычно носят информационный характер о продуктах или услугах компании. Они, как правило, используют более формальный и официальный язык. Сообщения в блогах имеют более непринужденный и разговорный тон.

Блог может быть отдельным веб-сайтом или частью большого веб-сайта.

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

Призыв к действию (он же CTA)

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

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

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

Дизайн карты (также известный как мозаичный или сеточный дизайн)

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

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

Дополнительная терминология современных веб-сайтов

WordPress

WordPress поддерживает миллионы веб-сайтов по всему миру.

Думайте о WordPress как об операционной системе вашего веб-сайта … как операционная система ноутбука — это Windows, для MacBook Pro это macOS, а для iPhone — iOS.

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

Тема WordPress делает WordPress похожим на веб-сайт. Доступны тысячи тем — некоторые бесплатные, некоторые платные.Большинство тем WordPress требуют некоторой настройки, чтобы они соответствовали бренду вашей компании. Но использовать тему НАМНОГО лучше, чем начинать с нуля, как нам приходилось делать в былые времена (с начала до середины 2000-х). Темы WordPress — одна из основных причин, по которой вы можете создать собственный высококачественный веб-сайт за небольшую часть того, что раньше стоило.

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

Страница

WordPress по сравнению с публикацией в WordPress

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

Хостинг

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

Доменное имя (также известное как URL)

Amazon.com, CNN.com и markbrinker.com — все это примеры доменных имен. За кулисами каждый веб-сайт идентифицируется IP-адресом, который представляет собой длинную строку чисел, например 143.398.884.342. Но кто может вспомнить все эти цифры? Таким образом, доменное имя связано с каждым IP-адресом, потому что для идентификации веб-сайта легче использовать слова, а не числа.

Интересный факт: URL — это аббревиатура от Uniform Resource Locator.

Регистратор домена

Так же, как вы получаете номерной знак своего автомобиля в Департаменте транспортных средств, вы получаете свое доменное имя у регистратора доменов.В сети есть множество регистраторов доменов. Мы используем NameCheap.com.

DNS

DNS — это аббревиатура от имени сервера доменного имени. Это телефонная книга Интернета.

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

HTML

HTML — это аббревиатура от языка разметки гипертекста, который является стандартным языком для создания веб-сайтов и веб-страниц. Его изобрел Тим Бернерс-Ли (известный как изобретатель всемирной паутины) в 1991 году.

CSS

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

Конструктор веб-сайтов (он же конструктор страниц)

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

Конструкторы

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

ПРИМЕЧАНИЕ. Хотя хороший конструктор веб-сайтов — отличный инструмент, это не панацея. Вам * понадобится * базовое понимание HTML и CSS для точной настройки вашего сайта. Простите за дождь на параде.: -o

Мобильный Адаптивный

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

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

Гугл со мной согласен.

SSL

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

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

Небезопасный веб-сайт имеет URL-адрес, который начинается с «http» в адресной строке, тогда как защищенный веб-сайт начинается с «http s », где «s» означает «безопасный».

http => протокол передачи гипертекста

http s => протокол передачи гипертекста безопасный

SEO

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

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

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

  • Супер высокого качества.
  • Люди действительно хотят.
  • Люди делятся или ссылаются на.
  • Правильно отформатирован на вашем веб-сайте (он же SEO на странице).

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

Google Analytics

Google Analytics — это бесплатный сервис от Google, который предоставляет вам статистику о вашем веб-сайте: сколько посетителей посещает ваш сайт, какие страницы они просматривают, сколько времени проводят на каждой странице и т. Д.

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

Google Analytics устраняет предположения, предоставляя вам данные о том, что работает на вашем сайте, а что нет.

Поставщик услуг электронной почты (ESP)

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

Несколько примеров популярных поставщиков услуг электронной почты включают MailChimp, Aweber (мы используем Aweber), Constant Contact, ConvertKit, GetResponse и ActiveCampaign.

Есть несколько причин для использования услуг электронной почты:

  • Автоматика . Пользователи могут автоматически добавлять или удалять себя из вашего списка. Вы также можете отправлять электронные письма автоматически в зависимости от действий пользователя.
  • Масштабируемость . Вы можете отправить широковещательное сообщение сотням или тысячам своих подписчиков одним щелчком мыши. Сделать это вручную практически невозможно.
  • Возможности доставки . Большинство поставщиков услуг электронной почты занесены в белый список, поэтому ваши электронные письма не будут помечены как спам.Если вы попытаетесь отправить более нескольких десятков электронных писем в быстрой последовательности с помощью Outlook или Gmail, это, скорее всего, вызовет спам-фильтр у вашего интернет-провайдера, и ваши электронные письма не будут отправлены.
  • Соответствие . Соблюдайте Закон о CAN-SPAM и избегайте штрафов.
  • Отчетность и отслеживание . Узнайте, какой процент людей открыл ваше электронное письмо, сколько людей щелкнули ссылку в вашем письме, какая строка темы письма показала наилучший результат и т. Д.

Заключение

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

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

Со временем я буду добавлять в этот удобный глоссарий модных веб-сайтов. Если я пропустил термин, который нужно добавить, сообщите мне об этом в комментариях ниже. Спасибо. 😉

частей веб-сайта: объяснение терминов веб-дизайна

Заголовки, боковые панели, сообщения в блогах, нижние колонтитулы…? Хотя мы очень стараемся говорить на простом английском языке, мы знаем, что веб-дизайнеры могут использовать множество жаргонов.

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

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

Домашняя страница

Домашняя страница веб-сайта — это начальная страница, обычно расположенная по URL-адресу вашего основного веб-сайта. Обычно его цели:

  • Приветствуем посетителей
  • Помогите им понять, что они в нужном месте
  • Сразу дайте понять, что вы делаете
  • Направлять посетителей дальше на сайт

Пример домашней страницы, которую мы разработали для Rose Jewelers

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

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

Слайдер

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

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

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

Заголовок

Заголовок веб-сайта — это согласованная область в верхней части сайта, которая включает логотип и меню навигации.

Пример заголовка веб-сайта Naylor Landscape, выделенного красным

Заголовок может включать:

  • Логотип
  • Меню навигации
  • Tagline
  • Телефон
  • Адрес
  • Поле поиска
  • Пуговицы
  • Иконки социальных сетей
  • Войти или ссылка «Моя учетная запись»
  • Поле для допуска

В 11Web мы стараемся сделать заголовок очень простым и вести пользователя к меню навигации.

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

Меню навигации

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

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

Первичная / вторичная навигация

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

Веб-сайт Vitale-Robinson включает главное меню (большее) и дополнительное меню (меньшее, в черной полосе).

Основное меню включает в себя основные, наиболее заметные ссылки. Как правило, это ссылки на важные страницы веб-сайта, такие как страницы «Услуги» и «Контакты».

Второстепенное меню включает другие ссылки, которые могут быть не такими важными или важными. Это могут быть ссылки на «Вход», «Моя учетная запись» или «Работа».

Боковая панель

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

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

Веб-сайт с выделенной боковой панелью.

. Боковые панели раньше были очень модными местами, где размещалось все, что вы не хотели, чтобы посетитель веб-сайта пропустил. Сегодня, однако, все чаще говорят о том, что боковые панели просто добавляют отвлекающий беспорядок на сайт. См. Эту замечательную статью: «Нужны ли на вашем сайте боковые панели?» Что говорят исследования.

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

Призыв к действию

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

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

Я написал больше о призывах к действию в этих двух сообщениях:

Нижний колонтитул

Нижний колонтитул веб-сайта — это единообразная область содержимого в нижней части каждой страницы вашего веб-сайта.Считайте это нижней булочкой на сайте чизбургера (если заголовок — верхняя булочка).

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

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

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

Нижний колонтитул — это также место, где пользователи ожидают найти контактную информацию, ссылку «Моя учетная запись» (если применимо) и юридические страницы, такие как ваша Политика конфиденциальности.

Вооружившись этой информацией, вы должны быть готовы «говорить о веб-дизайне!» Не знаете, что такое другие термины веб-дизайна? Оставьте мне комментарий, и я добавлю их в эту статью.

В чем разница между веб-страницей, веб-сайтом, веб-сервером и поисковой системой? — Изучите веб-разработку

В этой статье мы описываем различные концепции, связанные с Интернетом: веб-страницы, веб-сайты, веб-серверы и поисковые системы.Новички в Интернете часто путают эти термины или используют их неправильно. Давайте узнаем, что они означают!

Предварительные требования: Вы должны знать, как работает Интернет.
Цель: Уметь описывать различия между веб-страницей, веб-сайтом, веб-сервером и поисковой системой.

Как и в любой другой области знаний, в Интернете много жаргона. Не волнуйтесь, мы не будем перегружать вас всем этим (у нас есть глоссарий, если вам интересно).Однако есть несколько основных терминов, которые вам необходимо понять с самого начала, поскольку вы будете слышать эти выражения все время, пока читаете. Иногда эти термины легко спутать, поскольку они относятся к связанным, но различным функциям. Фактически, вы иногда увидите, что эти термины неправильно используются в новостях и в других местах, так что путаницу их можно понять!

Мы рассмотрим эти термины и технологии более подробно по мере дальнейшего изучения, но эти быстрые определения станут для вас отличным началом:

веб-страница
Документ, который может отображаться в веб-браузере, таком как Firefox, Google Chrome, Opera, Microsoft Internet Explorer или Edge или Apple Safari.Их также часто называют просто «страницами».
сайт
Набор веб-страниц, которые сгруппированы вместе и обычно связаны друг с другом различными способами. Часто называется «веб-сайтом» или «сайтом».
веб-сервер
Компьютер, на котором размещен веб-сайт в Интернете.
поисковая машина
Веб-служба, помогающая найти другие веб-страницы, например Google, Bing, Yahoo или DuckDuckGo. Доступ к поисковым системам обычно осуществляется через веб-браузер (например,грамм. вы можете выполнять поиск в поисковых системах непосредственно в адресной строке Firefox, Chrome и т. д.) или через веб-страницу (например, bing.com или duckduckgo.com).

Давайте рассмотрим простую аналогию — публичную библиотеку. Вот что вы обычно делаете при посещении библиотеки:

  1. Найдите поисковый индекс и найдите название нужной книги.
  2. Запишите каталожный номер книги.
  3. Перейдите в конкретный раздел, содержащий книгу, найдите правильный каталожный номер и получите книгу.

Сравним библиотеку с веб-сервером:

  • Библиотека похожа на веб-сервер. Он имеет несколько разделов, что похоже на веб-сервер, на котором размещено несколько веб-сайтов.
  • Различные разделы (естественные науки, математика, история и т. Д.) В библиотеке похожи на веб-сайты. Каждый раздел похож на уникальный веб-сайт (два раздела не содержат одинаковых книг).
  • Книги в каждом разделе похожи на веб-страницы. На одном веб-сайте может быть несколько веб-страниц, например, в разделе «Наука» (веб-сайт) будут книги по теплу, звуку, термодинамике, статике и т. Д.(веб-страницы). Каждую веб-страницу можно найти в уникальном месте (URL).
  • Индекс поиска похож на поисковую систему. Каждая книга имеет свое уникальное место в библиотеке (две книги нельзя хранить в одном месте), которое определяется каталожным номером.

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

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

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

  • информация о стиле — управление внешним видом страницы
  • скрипты — которые добавляют интерактивности странице
  • медиа — изображения, звуки и видео.

Примечание. Браузеры также могут отображать другие документы, такие как файлы PDF или изображения, но термин веб-страница конкретно относится к документам HTML.В противном случае мы используем только термин документ .

Все веб-страницы, доступные в сети, доступны по уникальному адресу. Чтобы получить доступ к странице, просто введите ее адрес в адресной строке браузера:

Веб-сайт

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

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

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

Веб-сервер

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

Не путайте веб-сайтов и веб-серверов . Например, если вы слышите, как кто-то говорит: «Мой веб-сайт не отвечает», это на самом деле означает, что веб-сервер не отвечает и, следовательно, веб-сайт недоступен.Что еще более важно, поскольку веб-сервер может размещать несколько веб-сайтов, термин веб-сервер никогда не используется для обозначения веб-сайта, так как это может вызвать большую путаницу. В нашем предыдущем примере, если мы сказали: «Мой веб-сервер не отвечает», это означает, что несколько веб-сайтов на этом веб-сервере недоступны.

Поисковая машина

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

Их много: Google, Bing, Яндекс, DuckDuckGo и многие другие. Некоторые из них являются общими, некоторые специализируются на определенных темах. Используйте то, что вам больше нравится.

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

Вот пример Firefox, показывающий окно поиска Google в качестве начальной страницы по умолчанию:

Что такое домашняя страница?

Обновлено: 31.12.2020, Computer Hope

Домашняя страница или домашняя страница — это имя главной страницы веб-сайта, где посетители могут найти гиперссылки на другие страницы сайта.По умолчанию домашняя страница на всех веб-серверах — index.html; однако это также может быть index.htm, index.php или что угодно, что решит разработчик.

Кончик

Домашняя страница также может называться «главная страница», «страница приветствия» или «целевая страница».

Домашняя страница веб-сайта и домашняя страница браузера

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

Домашняя страница браузера — это документ по умолчанию, который отображается при первом открытии браузера.Его можно настроить для отображения определенного веб-сайта в настройках браузера. Например, у вас может быть Google в качестве домашней страницы вашего браузера, чтобы открывать поиск при первом открытии браузера. Если бы вы выполнили поиск «Компьютерная справка» из домашней страницы вашего браузера и нажали ссылку Computer Hope, вы были бы перенаправлены на домашнюю страницу нашего веб-сайта.

Как вернуться на главную страницу браузера

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

  • Щелкните кнопку главного экрана браузера, которая должна напоминать одну из кнопок главного экрана на этой странице.
  • Большинство интернет-браузеров поддерживают сочетание клавиш Alt + Home для перехода на вашу домашнюю страницу.
  • В веб-браузерах Mac попробуйте Command + Home или Option + Home .
  • Наконец, вы также можете закрыть браузер и все открытые вкладки.При повторном открытии браузер открывает домашнюю страницу.

Как попасть на главную страницу сайта

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

К сожалению, некоторые плохо оформленные веб-страницы могут не дать посетителю возможности вернуться на домашнюю страницу. Для этих страниц вам необходимо отредактировать адрес (URL) веб-страницы. Ниже приведен пример того, как вы можете вернуться на страницу Computer Hope, изменив адрес этой страницы.

URL-адрес этой страницы:

 https://www.computerhope.com/jargon/h/homepage.htm

В адресной строке удалите все после домена веб-сайта (как показано ниже) или определите домен (например,g., computerhope.com) и введите его в адресную строку. После того, как любой из этих вариантов будет выполнен, нажатие Enter откроет домашнюю страницу.

 https://www.computerhope.com

Зачем веб-сайту домашняя страница?

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

Зачем браузеру домашний?

Когда Интернет и браузеры были впервые представлены, поиск вещей в Интернете был не таким простым и быстрым, как сегодня. Домашняя страница браузера была создана, чтобы люди могли открывать в браузере веб-порталы или свой любимый веб-сайт, чтобы получить доступ к тому, что их интересует. Хотя многие люди по-прежнему используют домашнюю страницу своего браузера каждый день, все больше людей используют поиск (например,g., Google) в качестве своей домашней страницы, выполняя поиск того, что их интересует, и используя закладки.

Какая домашняя страница у компьютера?

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

Должен ли я использовать «домашнюю страницу» или «домашнюю страницу» в моем письме?

В целом обе версии правильные. Однако большинство людей и гидов по стилю сегодня используют «домашнюю страницу» (одно слово), когда говорят о главной странице веб-сайта.

Руководства по стилю, в которых используется «домашняя страница», включают: International Literacy Association , The Associated Press Stylebook и The Guardian . Руководства по стилям, в которых используется «домашняя страница», включают: Microsoft Manual of Style и Oxford Dictionary of Computing .

FrontPage, Домашняя страница, Интернет, Условия использования Интернета, Веб-страница

4 самых важных страницы на вашем веб-сайте (и способы их оптимизации)

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

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

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

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

Что такое оптимизация сайта?

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

Оптимизация, которую я собираюсь объяснить, приведет к созданию страниц, оптимизированных для пользователей.В погоне за SEO и CRO легко упустить из виду более широкую идею. Прежде всего, сайт должен быть оптимизирован для пользователя. Лучшее место для быстрого получения больших результатов — это начать оптимизацию наиболее посещаемых страниц вашего сайта.

Самые важные веб-страницы для оптимизации конверсий

  1. Домашняя страница
  2. О странице
  3. Блог
  4. Свяжитесь с нами Страница

Давайте перейдем к делу.Каждый веб-сайт индивидуален, но, в целом, вот четыре самых важных (и часто наиболее посещаемых) страницы на веб-сайте:

Домашняя страница

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

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

О странице

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

Страница блога

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

Свяжитесь с нами Страница

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

Как оптимизировать веб-страницу

Общие рамки оптимизации вашего сайта для конверсии одинаковы для вашей домашней страницы, страницы «О нас», блога и страницы «Свяжитесь с нами».У каждой страницы есть две простые цели, и специфика оптимизации этих страниц вытекает из этих целей.

Первая цель — это пользователь, а вторая — вы. Поехали:

Укажите информацию, которую ищет пользователь.

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

  • Откуда они взялись? Идея здесь в том, чтобы понять, как пользователь попал на ваш сайт, чтобы вы могли доставлять релевантный контент.
    • Они пришли из поисковой системы? (Если да, то что они искали, чтобы найти вас?)
    • Электронная почта? (Какое письмо? Кто его отправил?)
    • Переход на другой сайт? (Что это был за сайт? Как долго он ссылался на ваш URL?)
  • Что им нужно знать? Одна страница может предоставить ограниченный объем информации, поэтому вам необходимо определить, какой это будет информация. Вы хотите, чтобы они что-то знали, чтобы что-то делать (это рассматривается в следующем вопросе).Помните: на веб-странице меньше значит больше. Чем больше информации вы загружаете на свои основные страницы, тем меньше вероятность того, что пользователь ее запомнит. Дайте им меньше, и они с большей вероятностью запомнят и сделают то, что вы от них хотите.

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

Как только вы ответите на вопрос, что ищет пользователь, вы на полпути.Это подводит нас ко второму вопросу.

Определите цель для пользователя, как только он найдет информацию.

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

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

Почему я так настаиваю на этом? Потому что каждое знание, которым вы делитесь на своем веб-сайте, требует ответа. Итак, что вы хотите, чтобы пользователь сделал? Посетите другую страницу вашего сайта? Смотреть видео? Заполните форму? Подпишитесь на бесплатную пробную версию? Любой из них или все это может стать вашей целью для пользователя, просто убедитесь, что предоставили ему один или два варианта на странице, которые четко и четко определены.

Примеры оптимизации веб-страниц

Пример оптимизированной домашней страницы веб-сайта

Домашняя страница

HubSpot хорошо продумана и содержит четкий призыв к действию, спереди и по центру. Пользователь находится на домашней странице HubSpot по какой-то причине, и, возможно, эта причина заключается в том, чтобы развивать свой бизнес. Заголовок отвечает на вопрос «что я ищу?» и кнопки CTA сообщают мне, пользователю, что мне делать дальше.

Теперь давайте посмотрим, что происходит с HubSpot на странице «О программе».

Пример оптимизированного веб-сайта О странице

Пользователь может щелкнуть страницу «О программе» по разным причинам. Некоторые могут быть:

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

Я мог бы продолжать и продолжать.Есть масса причин, которые могут привести сюда пользователя, но все они сводятся к желанию получить информацию. Посмотрим, что делает HubSpot. Вот страница о компании:

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

Попутно пользователю понадобится более подробная информация, а это значит, что призывы к действию должны стать более конкретными, чтобы помочь им найти эту информацию.Чем более детализирована и детализирована информация, тем более подробным становится CTA. В середине страницы я вижу видео об истории HubSpot с участием генерального директора Брайана Халлигана.

Есть еще кое-что. О каждом продукте HubSpot есть блок контента, включая CRM, каждый Hub и интеграции. Я могу щелкнуть любой из них, чтобы узнать больше о тех, которые могут помочь в развитии моего бизнеса.

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

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

Пример страницы блога оптимизированного веб-сайта

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

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

Пример оптимизированного веб-сайта Свяжитесь с нами Страница

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

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

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

Советы по оптимизации каждой страницы

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

1. Домашняя страница

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

2. О странице

  • Размещайте самую важную и актуальную информацию в верхней части страницы. Пользователь находится на вашей странице «О нас» по какой-то причине — отвечайте на их вопросы, не заставляя их прокручивать страницу.
  • Включите хотя бы один призыв к действию. Помните, что большинство людей не просто ищут дополнительную информацию, они стремятся к более глубокому взаимодействию.

3. Блог

  • Четко организуйте информацию в своем блоге и убедитесь, что информация соответствует причинам, по которым пользователи могут находиться в вашем блоге.Большинство пользователей захотят прочитать самые свежие статьи, поэтому предоставьте их. Вы также можете организовать категории на домашней странице блога, такие как «самые последние», «самые популярные» или другие формы категоризации.
  • Включите призывы к действию, которые упростят пользователю подписку на блог, загрузку бесплатного ресурса и т. Д. Даже если пользователь пришел за информацией, вы хотите, чтобы он заинтересовался и подключился. (Щелкните здесь, чтобы увидеть 8 типов CTA, которые вы можете попробовать в своем блоге.)
  • Добавьте призывы к действию в основном дизайне вашего блога, чтобы они отображались в каждом отдельном сообщении блога.По моему опыту, большинство посетителей блогов попадают на отдельные статьи блога через обычный поиск, вместо того, чтобы попасть на «домашнюю» страницу вашего блога. Чтобы заинтересовать этих пользователей, разместите призывы к действию на боковых панелях, в нижнем колонтитуле и в других местах. (Узнайте, как выбрать идеальный призыв к действию для каждого сообщения в блоге.)

4. Свяжитесь с нами Страница

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

Попросите пользователя действовать в соответствии с вашим контентом

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

Примечание редактора: этот пост был первоначально опубликован в декабре 2014 года и был обновлен для полноты.

1. Создание вашей первой страницы

Глава 1. Создание вашей первой страницы

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

Технически веб-страница — это особый тип документа, написанный на компьютерном языке под названием HTML (сокращенно от языка гипертекстовой разметки). Веб-страницы написаны для веб-браузеров — таких программ, как Internet Explorer, Google Chrome и Safari. У этих браузеров простая, но чрезвычайно важная задача: они читают HTML в документе веб-страницы и отображают идеально отформатированный результат, чтобы вы могли его прочитать.

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

HTML: язык Интернета

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

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

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

Примечание

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

Взлом Открытие файла HTML

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

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

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

Рисунок 1-1. Каждый документ HTML на самом деле является обычным текстовым файлом. Вверху: веб-браузер отображает простой HTML-документ, демонстрируя все его великолепное форматирование. Внизу: но когда вы открываете тот же документ в текстовом редакторе, вы видите весь текст из исходного документа, а также несколько дополнительных фрагментов информации внутри угловых скобок <> . Эти HTML-теги передают информацию о структуре и форматировании документа.

Тип используемого текстового редактора зависит от операционной системы вашего компьютера:

  • Если у вас компьютер Windows, вы используете простой редактор Notepad.Переходим к следующему разделу.

  • Если у вас компьютер Mac, вы используете встроенный редактор TextEdit. Но сначала вам нужно внести коррективы, описанные ниже.

Поклонникам Mac необходимо настроить способ работы TextEdit, потому что в программе есть «представление HTML», которое скрывает теги в файле HTML и вместо этого показывает отформатированную страницу. Такое поведение нацелено на упрощение жизни новичков, но представляет серьезную опасность для всех, кто хочет написать настоящую веб-страницу.Чтобы избежать путаницы и убедиться, что вы пишете настоящий, необработанный HTML, вам необходимо отключить просмотр HTML. Вот как это сделать:

  1. Выберите TextEdit → Настройки .

    Откроется окно с вкладками параметров TextEdit (рис. 1-2).

    Рисунок 1-2. В окне настроек TextEdit есть две вкладки с настройками: «Новый документ» (слева) и «Открыть и сохранить» (справа).

  2. Щелкните «Новый документ», а затем в разделе «Формат» выберите «Обычный текст.”

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

  3. Нажмите «Открыть и сохранить» и включите первую опцию «Отображать файлы HTML как HTML-код вместо форматированного текста».

    Это указывает TextEdit, чтобы вы могли видеть (и редактировать) реальную разметку HTML, теги и все остальное, а не отформатированную версию страницы, как она будет отображаться в веб-браузере.

  4. Закройте окно настроек, а затем закройте TextEdit .

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

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

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

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

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

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

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

В следующем списке описаны самые популярные браузеры на сегодняшний день:

  • Google Chrome — нынешний король веб-браузеров, несмотря на то, что это самый новый ребенок на рынке.Технически подкованным поклонникам Интернета нравятся его функции, такие как закладки, которые можно синхронизировать на разных компьютерах, и его невероятная скорость.

    Загрузите Google Chrome на www.google.com/chrome.

  • Internet Explorer — это самый долговечный браузер и официальный стандарт во многих корпоративных и правительственных средах. Это также браузер, который предустановлен в Windows, поэтому его используют люди, не являющиеся техническими специалистами, если они не хотят (или не знают, как) устанавливать что-то новое.Даже горячие веб-дизайнеры должны проверять, понимает ли Internet Explorer их страницы, потому что даже старые версии IE, такие как IE 8, остаются популярными.

    Чтобы загрузить самую последнюю версию Internet Explorer, посетите www.microsoft.com/ie.

    Рисунок 1-4. Статистика использования браузера, которая оценивает процент людей, использующих каждый из основных браузеров, варьируется в зависимости от того, какие сайты вы изучаете и как вы подсчитываете посетителей, но на момент написания этой статьи это одна разумная оценка. (Чтобы узнать текущую статистику использования браузера, посетите http: // tinyurl.com / stats-browsers.)

  • Firefox начал свою жизнь как современный ответ Internet Explorer. Он по-прежнему впереди всех со своими невероятно гибкими надстройками , крошечными программами, которые другие люди разрабатывают для улучшения Firefox с дополнительными функциями, такими как уведомление веб-почты и эскизы сайтов, которые отображаются на странице результатов поиска. Лучше всего то, что армия программистов-добровольцев постоянно обновляет Firefox.

    Попробуйте Firefox на www.mozilla.org / firefox.

  • Safari — это браузер, разработанный Apple, который поставляется с текущими версиями операционной системы Mac OS. В таких продуктах Apple, как iPhone, iPad и iPod Touch, также используется браузер Safari (хотя его мобильная версия ведет себя немного иначе). Прекрасные люди в Apple создали воплощение Safari для компьютеров с Windows, но с тех пор отказались от него, сделав Safari доступным только для Apple.

    Откройте Safari по адресу www.apple.com/safari.

  • Opera — это упрощенный и простой в установке браузер, который существует уже более десяти лет и служит противоядием от огромных размеров и бессмысленных излишеств Internet Explorer.В течение многих лет Opera сдерживала неприятная деталь: если вы хотели версию без рекламы, вам нужно было заплатить. Сегодня Opera бесплатна и не содержит рекламы, как и другие браузеры из этого списка. У него немного, но преданных последователей, но он занимает отдаленное пятое место в рейтинге веб-браузеров.

    Посетите Opera на сайте www.opera.com.

Учебное пособие: создание файла HTML

Теперь, когда вы подготовили свою веб-кухню, вы готовы создать свою собственную веб-страницу. В этом руководстве вы создадите базовую страницу, показанную на рис. 1-1.

Совет

Как и все учебные пособия в этой книге, вы найдете решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с именем Tutorial-1-1 (что означает «Глава 1, первое руководство», если вам интересно).

Готовы начать? Вот что нужно сделать:

  1. Запустите текстовый редактор .

    На компьютере с Windows это Блокнот. Чтобы открыть Блокнот, нажмите кнопку «Пуск», введите «блокнот» и щелкните появившийся значок Блокнота.

    На Mac это TextEdit. Чтобы запустить его, перейдите в папку «Приложения» и дважды щелкните TextEdit.

    Когда вы загружаете текстовый редактор, он запускает вас с новым пустым документом, а это именно то, что вам нужно.

  2. Начните писать свой HTML-код .

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

     
     United Popsicle Workers Union 
    

     Мы боремся за ваши права.

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

  3. Когда вы закончите свою веб-страницу, выберите Файл → Сохранить .

    При этом открывается окно «Сохранить» или «Сохранить как», в котором вы вводите сведения о своем новом файле (рис. 1-5).

    Рисунок 1-5. Независимо от того, используете ли вы Блокнот (показан здесь) или TextEdit, в сохранении файла нет ничего сложного. Просто не забудьте включить «.htm» или «.html» в конце имени файла, чтобы идентифицировать его как документ HTML.

  4. Выберите место для сохранения файла и дайте ему имя popsicles.htm .

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

    Когда вы называете файл, убедитесь, что вы добавили расширение .htm или .html в конце имени файла. Например, используя имя popsicles.htm или popsicles.html , вы гарантируете, что ваш компьютер распознает ваш документ как файл HTML.

    Примечание для параноиков: нет разницы между файлами .htm и .html. Оба они на 100% одинаковы — текстовые файлы, содержащие HTML-контент.

    Примечание

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

  5. При необходимости измените способ кодирования файла в текстовом редакторе на UTF-8 .

    Это стандарт TextEdit, поэтому пользователи Mac могут пропустить этот шаг. Но в Блокноте вам нужно выбрать UTF-8 в списке «Кодировка» в нижней части окна «Сохранить как».

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

  6. Щелкните Сохранить, чтобы сделать его официальным .

    Если вы используете TextEdit, программа может спросить, действительно ли вы хотите использовать .htm или .html вместо .txt , стандартного текстового файла; нажмите «Использовать .htm». В Блокноте такой шаг не требуется. Однако на самом деле вы не увидите свои HTML-файлы в списке, если не выберете «Все файлы (*. *)» В поле «Сохранить как тип» (в котором изначально выбрано «Текстовые документы (* .txt)»).

  7. Чтобы просмотреть свою работу, откройте файл в браузере (рис. 1-6) .

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

    Рисунок 1-6. Адресная строка браузера показывает, где на самом деле находится текущая веб-страница. Если вы видите в адресе «http: //», это значит, что он исходит от веб-сервера в Интернете (вверху). Если вы посмотрите на веб-страницу, которая находится на вашем собственном компьютере, вы увидите обычный адрес локального файла (посередине, показывающий расположение файла Windows в Internet Explorer), или вы увидите URL-адрес, который начинается с префикса «file: // / ”(Внизу, где показано расположение файла в Chrome).

  8. По окончании редактирования закройте текстовый редактор .

    В следующий раз, когда вы захотите изменить документ, просто запустите текстовый редактор, выберите «Файл» → «Открыть», а затем выберите нужный файл или перетащите его в уже открытое окно текстового редактора.

Tip

Вот трюк, который поможет вам быстро открывать файлы HTML. Найдите свой файл, затем щелкните его правой кнопкой мыши (на Mac нажмите, удерживая клавишу Control), и выберите «Открыть с помощью». Откроется список программ, которые можно использовать для открытия файла.Щелкните Блокнот (или TextEdit) в списке, чтобы запустить новое окно текстового редактора и открыть HTML-файл одним махом.

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

Просмотр HTML действующей веб-страницы

Большинство текстовых редакторов не позволяют открывать веб-страницы в Интернете.Однако веб-браузеры – дают вам возможность заглянуть в необработанный HTML-код, который скрывается за любой веб-страницей.

Если вы используете Internet Explorer, Chrome, Firefox или любой другой браузер, кроме Safari, вы можете использовать ярлык. После того, как вы перейдете на веб-страницу, которую хотите изучить, щелкните правой кнопкой мыши в любом месте страницы и выберите «Просмотр исходного кода» или «Просмотр исходного кода страницы» (точная формулировка зависит от браузера). Появится новое окно, показывающее необработанный HTML-код, лежащий в основе страницы.

Если вы используете Safari на Mac, вам нужно перепрыгнуть через лишнюю петлю, чтобы увидеть HTML-код веб-страницы. Сначала включите меню «Разработка», выбрав Safari → «Настройки» → «Дополнительно», а затем установите флажок «Показать меню разработки в строке меню». Как только вы это сделаете, посетите страницу, которую хотите проанализировать, и выберите «Разработка» → «Показать исходный код страницы».

Совет

Firefox имеет удобную функцию, которая позволяет вам сосредоточиться на части HTML на сложной веб-странице. Просто выделите интересующий вас текст на самой странице, щелкните его правой кнопкой мыши и выберите «Просмотреть источник выделения».

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

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

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

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

Например, один простой тег — это тег , который означает «полужирный» (по соглашению имена тегов обычно пишутся в нижнем регистре).Когда браузер встречает этот тег, он включает полужирное форматирование, которое влияет на весь текст, следующий за тегом. Вот пример:

 Этот текст не полужирный.  Этот текст выделен жирным шрифтом.

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

Конечный тег можно легко распознать. Они выглядят так же, как начальные теги, за исключением того, что начинаются с косой черты. Это означает, что они начинаются так вместо этого <. Таким образом, конечный тег для полужирного форматирования - . Вот пример:

 Это не жирный шрифт.  Обратите внимание!  Теперь мы вернулись к нормальной жизни.

Отображается в браузере как:

Это не выделено жирным шрифтом. Обратите внимание! Теперь мы вернулись к нормальной жизни.

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

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

Примечание

Добавление тегов к обычному тексту называется разметкой документа, а сами теги известны как разметка HTML . Когда вы смотрите на необработанный HTML, вас может заинтересовать содержимое (текст, заключенный между тегами) или разметка (сами теги).

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

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

Рисунок 1-7.Чтобы получить жирный текст, вам нужно начать с правильного контейнера. Это элемент .

Примечание

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

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

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

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

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

Примечание

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

На рис. 1-8 показаны два типа элементов в перспективе.

Рисунок 1-8. Вверху: этот фрагмент HTML показывает как элемент контейнера, так и отдельный элемент. Внизу: браузер показывает получившуюся веб-страницу.

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

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

 Это word  выделено полужирным шрифтом и курсивом.

Когда браузер просматривает этот фрагмент HTML, он создает текст, который выглядит следующим образом:

Это слово выделено полужирным шрифтом и курсивом.

Между прочим, не имеет значения, поменяете ли вы порядок тегов и . Следующий HTML дает точно такой же результат.

 Это word  выделено курсивом и полужирным шрифтом.

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

 Это word  выделено курсивом и полужирным шрифтом.

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

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

Note

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

Общие сведения о документах HTML

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

Определение типа документа

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

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

Интернет-сообщество остановилось на простом решении. При разработке новой современной веб-страницы вы указываете этот факт, добавляя код, называемый определением типа документа (DTD) или doctype , который идет в самом начале вашего HTML-документа (рис. 1-9).

Рисунок 1-9. Определение типа документа (DTD) - это первая часть информации в файле HTML.Он сообщает браузеру, какой стандарт разметки вы использовали для написания страницы.

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

Но когда браузер встречает HTML-документ, у которого нет документа, все ставки отключены. Internet Explorer, например, переключается в ужасный режим quirks , где он пытается вести себя так же, как 10 лет назад, с причудами и всем остальным.Это гарантирует, что действительно старые веб-страницы сохранят вид, который они имели при первом создании, даже если они полагаются на старые ошибки браузера, которые уже давно исправлены. К сожалению, разные браузеры по-разному ведут себя при просмотре страницы без документа. Скорее всего, вы получите разные размеры текста, несогласованные поля и границы, а также неправильно расположенное содержание. По этой причине веб-страницы без доктайпов - плохая новость, и вам следует избегать их создания.

Раньше веб-дизайнеры использовали разные типы документов для обозначения разных версий разметки HTML (например, XHTML, HTML5 или действительно старый HTML 4.01). Но сегодня веб-разработчики почти всегда используют простой универсальный тип документа HTML5:

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

Для сравнения, вот более многословный тип документа для XHTML 1.0, который вы все еще можете встретить на старых веб-страницах:

Даже опытным веб-разработчикам приходилось копировать тип документа XHTML 1.0 с существующей веб-страницы, чтобы избежать неправильного ввода.

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

Примечание

В этой книге вы будете использовать только функции HTML5, которые работают во всех современных браузерах. Но если вам интересно узнать о более экспериментальных частях языка, которые все еще не очень хорошо поддерживаются браузерами, ознакомьтесь с HTML5: отсутствующее руководство (O’Reilly).

Теперь вы готовы заполнить остальную часть веб-страницы.

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

Этот элемент обертывает все (кроме документа) на вашей веб-странице.

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

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

Есть только один правильный способ использовать эти три элемента на странице.Вот их правильное расположение с типом документа HTML5 в начале страницы:

 


...


...

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

Когда у вас есть скелет HTML, вам нужно добавить в смесь еще два элемента контейнера.Для каждой веб-страницы требуется элемент </code>, который находится в разделе заголовка страницы, и вам необходимо создать контейнер для текста в разделе <code><body> </code> страницы. Один универсальный текстовый контейнер - это элемент <code></p><p> </code>, который представляет абзац.</p><p> Вот элементы, которые вам нужно добавить:</p><dl><dt> <code><title> </code></dt><dd><p> Этот элемент устанавливает заголовок для вашей веб-страницы. В названии играет несколько ролей.Сначала веб-браузеры отображают его на вкладке браузера или в верхней части окна браузера. Во-вторых, когда посетитель добавляет вашу страницу в закладки, браузер использует название в качестве метки закладки. В-третьих, когда ваша страница появляется в веб-поиске, поисковая система обычно отображает этот заголовок в качестве первой строки результатов, за которым следует фрагмент контента со страницы.</p></dd><dt> <code></p><p> </code></dt><dd><p> Обозначает абзац. Веб-браузеры не делают отступы между абзацами, но они добавляют небольшой промежуток между последовательными абзацами, чтобы они оставались разделенными.</p></dd></dl><p> Вот веб-страница с этими двумя новыми ингредиентами (выделены жирным шрифтом):</p><pre> <! DOCTYPE html> <html> <head> <strong> <code> <title> Все, что я знаю о веб-дизайне

Если вы откроете этот документ в веб-браузере, вы обнаружите, что страница пуста, но отображается заголовок (как показано на рисунке 1-10).

Рисунок 1-10.Когда браузер отображает веб-страницу, он показывает заголовок страницы на вкладке браузера или в верхней части окна. Но учтите: название не всегда подходит.

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

Учебное пособие: создание полного HTML-документа

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

Подсказка

Как и все учебные пособия в этой книге, вы можете найти решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с именем Tutorial-1-2 (сокращение от «Chapter 1, second tutorial»). По мере того, как вы создаете эту страницу, добавляя список, изображение и заголовки, она проходит несколько итераций.Учебные файлы включают отдельный файл для каждого этапа улучшения.

Независимо от того, какую страницу вы хотите создать, вы всегда начинаете одинаково:

  1. Запустите текстовый редактор .

    Это Блокнот или TextEdit.

  2. Введите скелет HTML в новый файл .

    Это doctype, корневой элемент и два основных раздела каждой веб-страницы: и .Выглядит это так:

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

  3. Добавьте заголовок в раздел раздел .

    Добавьте элемент </code> в новую строку между открывающим тегом <code><head> </code> и закрывающим тегом <code></head> </code>:</p><pre> <strong> <code> <title> Hire Me!

  4. Добавьте свой контент в раздел .

    Например, предположим, вы хотите написать простую страницу резюме. Вот очень простой пример:

     


    Найми меня!   


   
     Меня зовут Ли Пак.Наймите меня в свою компанию, потому что мой рабочий номер  
    прямо сейчас .

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

  5. Сохраните HTML-файл как резюме .htm и откройте его в веб-браузере .

    Если ваша страница отображается правильно (см. Рис. 1-11), вы можете быть уверены, что у вас хорошее начало.

Рисунок 1-11. Добро пожаловать в Интернет. На этой странице не так много полезных функций HTML (и Ли, вероятно, не получится нанять), но она представляет собой одну из самых простых HTML-страниц, которые вы можете создать.

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

Когда вы начнете создавать более подробные веб-страницы, вы быстро обнаружите, что создание страницы не так просто, как, скажем, создание страницы в Microsoft Word. Например, вы можете улучшить страницу резюме, создав список навыков. Вот разумная первая попытка:

 


 Наймите меня! 



 Я Ли Пак.Наймите меня в свою компанию, потому что моя работа  вне пределов
шепот .
   Мои навыки включают:  
   * Быстрый набор текста (почти 12 слов в минуту).  
   * Невероятная заточка карандашей.  
   * Изобретательское оправдание.  
   * Ведение переговоров с мирными офицерами.

Проблема возникает, когда вы открываете этот, казалось бы, невинный документ в своем веб-браузере (рис. 1-12).

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

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

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

Чтобы иметь дело с этим диапазоном опций отображения, HTML использует элементы для определения структуры вашего документа. Вместо того, чтобы сообщать браузеру: «Здесь вы переходите к следующей строке, а здесь вы добавляете четыре дополнительных пробела», HTML сообщает браузеру: «Вот два абзаца и маркированный список». Браузер должен отображать страницу, используя инструкции, которые вы включаете в свой HTML.

Чтобы исправить пример резюме, вам нужно использовать больше элементов абзаца и два новых элемента контейнера:

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

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

      . Другими словами, каждый элемент списка (

    • ) должен находиться в элементе списка (
        ).

    Вот исправленная веб-страница (показанная на рис. 1-13), где структурные элементы выделены жирным шрифтом:

     


 Наймите меня! 


   
       Я Ли Пак. Наймите меня в свою компанию, потому что моя работа  вне пределов
шепот .   
      
   
       Мои навыки включают:   
      
   
        
     
    •    Быстрый набор текста (почти 12 слов в минуту).  
      •   
     
    •    Невероятная заточка карандашей.   
      •   
     
    •    Придумывание оправданий изобретательности.   
      •   
     
    •    Ведение переговоров с мирными офицерами.   
      •

    Рисунок 1-13. При наличии правильных элементов (как показано в коде на этой странице) браузер понимает структуру вашего HTML-документа и знает, как его отображать.

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

  • ) имеют отступ. Это не влияет на браузер, но упрощает просмотр структуры HTML-документа и оценку того, как браузер будет отображать его.

    Рисунок 1-14 анализирует HTML-документ с использованием древовидной модели . Древовидная модель - удобный способ познакомиться с анатомией веб-страницы, поскольку она сразу показывает общую структуру страницы. Однако по мере того, как ваши веб-страницы станут более сложными, они, вероятно, станут слишком сложными для использования древовидной модели.

    Рисунок 1-14. Вот еще один способ взглянуть на созданный вами HTML-код. Модель дерева показывает, как вы вкладываете элементы HTML. Следуя стрелкам, вы увидите, что элемент верхнего уровня содержит элементы и .Внутри элемента находится элемент </code>, а внутри элемента <code><body> </code> находятся два абзаца и маркированный список с четырьмя элементами. Если вы посмотрите на модель дерева достаточно долго, вы поймете, почему HTML называет все эти элементы «элементами-контейнерами».</p><p> Если вы мазохист, вам не нужно использовать пробелы. Предыдущий пример в точности эквивалентен следующему гораздо менее читаемому HTML-документу:</p><pre> <! DOCTYPE html> <html> <head> <title> Hire Me!

    я Ли Парк.Наймите меня в свою компанию, потому что моя работа без шума .

    Мои навыки:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Изобретательность поиск оправданий.
    • Ведение переговоров с мирными офицерами.

    Конечно, человеку почти невозможно написать такой HTML, не допустив ошибки.

    Где все картинки?

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

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

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

    Хотя вы узнаете все, что когда-либо хотели знать о веб-графике, в главе 4, сейчас стоит рассмотреть простой пример. Чтобы попробовать это, вам понадобится готовое для Интернета изображение. (Наиболее часто поддерживаемые типы файлов изображений - это JPEG, GIF и PNG.) Если у вас нет изображения под рукой, вы можете загрузить образец изображения leepark.jpg из папки Tutorial-1-2. Вот пример элемента , который использует файл leepark.jpg :

      Lee Park Portrait

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

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

    Пример включает два атрибута, разделенных пробелом.Каждый атрибут состоит из двух частей: имени (которое сообщает браузеру, что делает атрибут) и значения (часть информации, которую вы предоставляете). Имя первого атрибута - src , что является сокращением от слова «источник»; он сообщает браузеру, где взять нужное изображение. В этом примере значение атрибута src равно leepark.jpg , что является именем файла со снимком в голову Ли Пака.

    Имя второго атрибута - alt , что является сокращением от «альтернативного текста.Он сообщает браузеру, что вы хотите, чтобы он отображал текст, если он не может отображать изображение. Его значение - это текст, который вы хотите отобразить, в данном случае это «Lee Park Portrait».

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

     


 Наймите меня! 



     Я Ли Пак. Наймите меня в свою компанию, потому что моя работа  вне пределов
шепот .  Lee Park Portrait  

    

     Мои навыки включают: 
    

      
  
    •  Быстрый набор текста (почти 12 слов в минуту). 
      • 
  
    •  Невероятная заточка карандашей. 
      • 
  
    •  Изобретательное придумывание оправданий. 
      • 
  
    •  Ведение переговоров с мирными офицерами. 
      •

    На рис. 1-15 показано, где именно заканчивается изображение.

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

    Note

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

    10 самых важных элементов (и еще несколько)

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

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

    Примечание

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

    Некоторые элементы, такие как элемент

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

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

    Таблица 1-1. Базовые блочные элементы.

    9

    9

    ЭЛЕМЕНТ

    НАИМЕНОВАНИЕ

    ТИП ЭЛЕМЕНТА

    ОПИСАНИЕ

    Контейнер

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

    ,

    ,

    ,

    ,

    ,

    Заголовок

    Контейнер

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

    дает самый большой заголовок. К тому времени, когда вы дойдете до

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

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

    Горизонтальная линия (или горизонтальная линия на языке HTML)

    Автономный

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

      ,

    Неупорядоченный список, элемент списка

    Контейнер

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

      на

        , чтобы получить автоматически пронумерованный список вместо маркированного списка (ol означает «упорядоченный список»).

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

    Таблица 1-2. Основные встроенные элементы.

    9

    Полужирный и курсив

    ЭЛЕМЕНТ

    НАИМЕНОВАНИЕ

    ТИП

    ОПИСАНИЕ

    Контейнер

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


    Разрыв строки

    Автономный

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

    Изображение

    Автономный

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

    Якорь

    Контейнер

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

    Чтобы образец резюме выглядел более респектабельно, вы можете использовать несколько ингредиентов из таблиц 1-1 и 1-2. На рис. 1-16 показана измененная версия веб-страницы, в которую добавлены некоторые новые элементы.

    Рисунок 1-16. Этот HTML-документ, содержащий больше заголовков, списков и горизонтальную линию, добавляет немного больше стиля резюме.

    Вот обновленный HTML с новыми заголовками и горизонтальной линией, выделенными жирным шрифтом:

     


   Наймите меня! 


  
     Наймите меня! 
    
  
     Я Ли Пак.Наймите меня в свою компанию, потому что моя работа  вне пределов
шепот . Как доказательство моих потрясающих компьютерных навыков и монументальной работы
этика, пожалуйста, оцените это электронное резюме. 
    
     
     Незаменимые навыки 
              
  
     Мои навыки включают: 
    
  
      
    
    •  Быстрый набор текста (почти 12 слов в минуту). 
      • 
    
    •  Невероятная заточка карандашей. 
      • 
    
    •  Изобретательное придумывание оправданий. 
      • 
    
    •  Ведение переговоров с мирными офицерами.
      • 
  
    
  
     А еще я знаю HTML! 
    
     
     Предыдущий опыт работы 
              
  
     У меня долгая и блестящая карьера в самых разных профессиях.
     Вот некоторые основные моменты: 
    
  
      
    
    •  2008-2009 - работал машинисткой в ​​ Flying Fingers  
      • 
    
    •  2010-2013 - Выполнение передовых веб-дизайнеров в  Riverdale
     Ферма  
      • 
    
    •  2014–2015 гг. - отмечен в главе 1 книги  Создание веб-сайта: The
     Отсутствует руководство  
      •

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

    Проверка страниц на наличие ошибок

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

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

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

    Вот некоторые потенциальные проблемы, которые может обнаружить валидатор:

    • Отсутствуют обязательные элементы (например, элемент).</p></li><li><p> Начальный тег контейнера без соответствующего конечного тега.</p></li><li><p> Неправильно вложенные теги.</p></li><li><p> Теги с отсутствующими атрибутами (например, элемент <code> <img> </code> без атрибута <code> src </code>).</p></li><li><p> Элементы или контент в неправильном месте (например, текст, помещенный непосредственно в раздел <code><head> </code>).</p></li></ul><p> В Интернете можно найти множество инструментов для проверки.Следующие шаги показывают, как использовать популярный валидатор, предоставляемый организацией по стандартизации W3C (официальные владельцы языка HTML). Попробуйте это с помощью файла <em> resume.htm </em>, который вы создали во втором учебном пособии (Учебное пособие: создание полного HTML-документа). Или дайте валидатору повод для жалоб с помощью файла <em> popsicles.htm </em>, который вы создали в первом руководстве (Учебник: Создание файла HTML). Поскольку это фрагмент HTML, а не полный документ HTML, валидатор быстро пожалуется на недостающие биты, такие как обязательные элементы <code><html> </code>, <code><head> </code> и <code><body> </code>.</p><p> После того, как вы решите, что вы хотите проверить, выполните следующие действия:</p><ol type="1"><li><p> <strong> Убедитесь, что ваш документ имеет тип документа </strong> (Общие сведения о документах HTML).</p><p> Тип документа сообщает валидатору, какие правила использовать при проверке вашего документа. В этой книге мы придерживаемся универсального документа HTML5 («Базовый скелет»).</p></li><li><p> <strong> В веб-браузере перейдите по адресу </strong> http://validator.w3.org (рис. 1-17).</p><p> Валидатор W3C предоставляет вам три варианта, представленные тремя вкладками: Проверить по URI (для страницы, которая уже находится в сети), Подтвердить с помощью загрузки файла (для страницы, которая хранится на вашем компьютере) и Подтвердить с помощью прямого ввода (для разметки). вы вводите прямо в предоставленное поле).</p><p> Рисунок 1-17. На веб-сайте http://validator.w3.org есть три варианта проверки HTML. Вы можете ввести адрес страницы в Интернете, вы можете загрузить свой собственный файл (показанный здесь) или ввести разметку напрямую.</li><li><p> <strong> Щелкните нужную вкладку и введите содержимое HTML </strong>.</p><p> <strong> Проверить по URI </strong> позволяет проверить существующую веб-страницу. Просто введите URL-адрес (это полный Интернет-адрес) страницы в поле «Адрес» (например, www.MySloppySite.com/FlawedPage.html).</p><p> <strong> Подтвердить загрузкой файла </strong> позволяет загружать любой файл с вашего компьютера. Сначала нажмите кнопку «Обзор» (которая называется «Выбрать файл в Chrome»), чтобы увидеть стандартное диалоговое окно «Открыть». Перейдите к местоположению вашего HTML-файла, выберите его и нажмите «Открыть». Это самый простой способ убедиться, что вы все правильно поняли со страницей <em> resume.htm </em>, которую вы создали ранее.</p><p> <strong> Проверка прямым вводом </strong> позволяет проверять любую разметку - вам просто нужно ввести ее в предоставленное большое поле.Самый простой способ использовать эту опцию - скопировать разметку из текстового редактора и вставить ее в поле.</p><p> Перед тем, как продолжить, вы можете щелкнуть «Дополнительные параметры» в любом из окон с вкладками, чтобы установить другие параметры, но вы, вероятно, этого не сделаете. Лучше всего позволить валидатору автоматически определять тип документа; Таким образом, валидатор будет использовать тип документа, указанный на вашей веб-странице. Точно так же оставьте для параметра «Кодировка символов» значение «обнаруживать автоматически», если вы не написали свою страницу не на английском языке, и у валидатора возникнут проблемы с определением правильного набора символов.</p></li><li><p> <strong> Нажмите кнопку «Проверить» </strong>.</p><p> После небольшой задержки валидатор сообщает, прошел ли ваш документ проверку валидации или, в случае неудачи, какие ошибки обнаружил валидатор (см. Рисунок 1-18).</p><p> Валидатор также может предложить несколько безобидных предупреждений для совершенно корректного HTML-документа, включая предупреждение о том, что кодировка символов была определена автоматически, и предупреждение о том, что служба проверки HTML5 считается экспериментальной, незаконченной функцией.</p></li></ol><p> Рисунок 1-18. В этом файле валидатор обнаружил 10 ошибок, связанных с двумя ошибками. Во-первых, на странице отсутствует обязательный элемент <code><title> </code>. Во-вторых, он закрывает элемент <code></p><li> </code> перед закрытием элемента <code> <b> </code>, вложенного внутрь. (Чтобы решить эту проблему, замените <code></li><p> </b> </code> на <code> </b></li><p> </code>.) Между прочим, этот файл все еще достаточно близок, чтобы исправить его, чтобы браузеры могли отображать его правильно.</p><h2><span class="ez-toc-section" id="_WordPress_WordPressorg"> Первые шаги с WordPress | WordPress.org </span></h2><p> Примечание. Эта страница относится к WordPress, использующему редактор блоков. Если вы используете более старую версию WordPress или пользуетесь классическим редактором, обратитесь к этой странице.</p><p> Вы только что завершили 5-минутную установку WordPress или установку в один клик с вашего веб-хостинга. Итак, каков ваш следующий шаг?</p><p> Давайте проведем пошаговый тур по вашему сайту WordPress и посмотрим, как работают различные функции и как сделать ваш новый сайт своим.Во время первой части этого руководства, пожалуйста, <em> ничего не меняйте в программе </em>, если это не является частью учебника. Выполнив эти действия, вы скоро все измените.</p><h4 tabindex="-1"><span class="ez-toc-section" id="i-122"> Войти # Войти </span></h4><p> Начните с входа в административную или внутреннюю часть вашего веб-сайта. Посетите страницу входа на свой сайт, разместив <em> wp-admin </em> после имени домена (например, http://example.com/wp-admin). Некоторые темы также предоставляют ссылку для входа или форму на интерфейсе пользователя.Теперь войдите в WordPress, используя имя пользователя и пароль, которые вы создали во время 5-минутной установки.</p><p> Вверх ↑</p><h4 tabindex="-1"><span class="ez-toc-section" id="i-123"> Старт с вершины # Старт с вершины </span></h4><p> После входа в систему вы попадаете на главный экран администрирования, называемый приборной панелью. Здесь начинается организация вашего сайта.</p><p> В верхней части экрана находится область под названием <em> панель инструментов </em>. Нажмите на название вашего сайта; это ссылка, которая приведет вас к просмотру вашего нового сайта WordPress.Нравится? Не нравится? Неважно, просто посмотрите на это. Здесь вы будете проводить много времени!</p><p> Наверх ↑</p><p> Найдите время, чтобы взглянуть на сайт, прежде чем начинать его изменять и выяснять, как все это работает; Важно увидеть, как устроена тема WordPress Twenty Twenty-One и как она работает. Считайте это тест-драйвом, прежде чем начинать добавлять все специальные функции.</p><p> Макет, который вы смотрите, определяется темой WordPress.Это внешний вид вашего веб-сайта, стилизация внешнего вида сайта и оформление содержимого. Тема WordPress Twenty Twenty-One имеет «заголовок» вверху с заголовком и слоганом для вашего сайта. Ниже ваше меню, если оно у вас есть. Основная средняя часть страницы - это область содержимого.</p><p> Прокрутите страницу вниз, и вы увидите окно поиска, последние сообщения и недавние комментарии. Это так называемые виджеты.</p><p> Обратите внимание на полосу в конце страницы. Это называется «нижний колонтитул».«Сайт работает на WordPress».</p><p> Наверх ↑</p><h4 tabindex="-1"><span class="ez-toc-section" id="i-124"> Совершите быстрое путешествие # Совершите быстрое путешествие вокруг </span></h4><p> На данный момент у вас только одно сообщение. Он находится на странице, которая является вашей домашней страницей <em>, </em> или главной страницей. Если вы нажмете на заголовок сообщения, вы перейдете на конкретную страницу этого сообщения. На первой или домашней странице вашего сайта представлены самые последние сообщения на вашем сайте. Заголовок каждого сообщения будет ссылаться на фактическую страницу сообщения.Некоторые дизайнеры тем создают свои <em> одиночные </em> страниц сообщений, чтобы они выглядели иначе, чем домашняя страница.</p><p> В отдельном посте обратите внимание на макет и обратите внимание на то, что отличает элементы дизайна. Заголовок другой? Меньше, больше или другого цвета? Есть ли боковая панель?</p><p> Все эти изменения создаются из нескольких файлов, называемых файлами шаблонов. Вы можете узнать больше о том, как они работают, в Руководстве разработчика тем. А пока давайте посмотрим, как работает остальная часть WordPress.</p><p> Наверх ↑</p><p> Теперь, когда у вас есть представление о том, как выглядит ваш сайт и как называются различные разделы макета, пора протестировать администрирование WordPress. Это похоже на знакомство с серверной частью вашего нового веб-сайта. Фактически, первая страница, которую вы видите после входа в систему, называется Dashboard, набором информации и данных о действиях и действиях на вашем сайте WordPress.</p><p> Панель инструментов содержит список последних действий, которые вы выполняли на своем сайте, и помогает держать вас в курсе новой и интересной информации из многих ресурсов WordPress.</p><p> В левой части экрана находится главное меню <strong> навигации </strong>, в котором подробно описаны все административные функции, которые вы можете выполнять. Переместите указатель мыши вниз по списку, и подменю «вылетят», чтобы вы могли переместить указатель мыши и щелкнуть. Как только вы выберете «родительский» раздел навигации, он откроется, чтобы отобразить параметры в этом разделе.</p><p> Различные пункты меню следующие:</p><p> Наверх ↑</p><h4 tabindex="-1"><span class="ez-toc-section" id="i-125"> Начнем с экрана пользователя # Начнем с экрана пользователя </span></h4><p> Щелкните вкладку <strong> Пользователи </strong>.Экран изменится, и вы увидите экран «Все пользователи», на котором отображается список всех ваших пользователей; отсюда вы можете добавлять или изменять существующие учетные записи пользователей и авторов. В меню навигации щелкните пункт меню «Ваш профиль». Здесь вы вводите информацию о себе, авторе и администраторе сайта. Введите информацию и нажмите <strong> Обновить профиль </strong>, когда закончите.</p><p> Теперь давайте посмотрим на некоторые другие мощные функции администратора WordPress.</p><p> Наверх ↑</p><h4 tabindex="-1"><span class="ez-toc-section" id="i-126"> Изменение внешнего вида # Изменение внешнего вида </span></h4><p> Экран «Внешний вид, темы» позволяет изменять внешний вид вашего сайта с помощью различных тем.Темы - это стили презентации, которые полностью меняют внешний вид вашего сайта. Созданные разработчиками и пользователями, вам доступны сотни тем на выбор. На экране внешнего вида вы увидите список установленных в настоящее время тем, включая тему WordPress Twenty Twenty-One. Чтобы быстро изменить тему, просто нажмите кнопку «Активировать» под одной из перечисленных тем, затем щелкните имя своего сайта на верхней панели инструментов, чтобы посмотреть, как он выглядит. Вау, вы еще посмотрите. Это так просто.Вернитесь в «Внешний вид <strong>»> «Тема </strong>» и нажмите кнопку «Активировать» под темой WordPress Twenty Twenty-One, чтобы вернуть дизайн к тому, что было у вас. Чтобы увидеть это снова, щелкните название своего сайта на панели инструментов, и вот оно.</p><p> Наверх ↑</p><h4 tabindex="-1"><span class="ez-toc-section" id="i-127"> Создание поста # Создание поста </span></h4><p> Вернувшись на экран администрирования, взгляните на экран сообщений. Вы можете использовать вкладки в меню «Сообщения», чтобы писать и управлять своими сообщениями. Начнем с создания вашего первого тестового сообщения на вкладке "Добавить".</p><p> При первом использовании редактора блоков вы увидите краткое руководство.</p><p> Добавьте заголовок статьи в отведенное место. Затем напишите текст в разделе «<em> Начать писать или набрать /, чтобы выбрать блок </em>». Это просто для теста, так что вы можете писать все, что захотите. Когда вы закончите, нажмите кнопку <strong> Опубликовать </strong> в правом верхнем углу страницы, затем нажмите второй раз, чтобы подтвердить публикацию. Теперь, когда вы научились писать сообщения, вы можете просматривать их, щелкнув название своего сайта на панели инструментов в верхней части экрана.</p><p> Наверх ↑</p><p> Часть удовольствия от WordPress - это возможность заставлять зрителей оставлять комментарии на вашем сайте. Это создает динамический обмен между вами и зрителем. Вы хотите комментарии к своим сообщениям? Комментарии к сообщениям бывают самых разных форм: от <em> похлопывания по спине </em> (<em> Хорошая работа! Нравится пост! </em>) до обширных обсуждений и комментариев к сообщениям. Или, может быть, вы ищете комментарии, которые дополняют опубликованную вами информацию. Ответ на комментарии и их модерирование также может занять много времени.Если они имеют решающее значение для вашего сайта, включите их и подумайте, как вы хотите, чтобы они были представлены. Вы можете сами прокомментировать созданный вами пост. Посмотрите, как они устроены, и подумайте, как вы хотите, чтобы они выглядели, чтобы они вписывались в дизайн и макет вашего сайта. Когда вы приняли решение о том, как вы хотите обрабатывать комментарии, найдите время, чтобы прочитать статью о комментариях и параметрах обсуждения WordPress, которые помогут вам настроить эти функции.</p><h5 tabindex="-1"><span class="ez-toc-section" id="i-128"> Предотвращение спама # Предотвращение спама </span></h5><p> Когда дело доходит до комментариев на вашем сайте, есть еще над чем подумать.К сожалению, мы живем в мире, где спам - это реальность. Рекомендуется начать борьбу со спамерами в комментариях с полезной статьи «Введение в работу со спамом в комментариях».</p><p> Наверх ↑</p><h4 tabindex="-1"><span class="ez-toc-section" id="i-129"> Создать категории # Создать категории </span></h4><p> сообщений обычно хранятся в категориях и / или тегах, поэтому вы можете хранить связанные темы вместе. Сейчас у вас есть только одна категория, но скоро вы захотите больше. На вкладке «Сообщения <strong>»> «Категории </strong>» в области «<strong> Добавить новую категорию </strong>» введите информацию о своей категории.Продолжайте добавлять свои <em> родительские категории </em>, двигаясь вниз по списку. Отложите ввод подкатегорий до тех пор, пока не будут введены все основные категории.</p><p> <strong> ПРИМЕЧАНИЕ: </strong> <em> Вы можете добавить любую новую категорию в любое время, но обратите внимание на тот факт, что категории могут быть отсортированы в WordPress двумя способами: по имени (в алфавитном порядке) или по идентификационному номеру. Когда вы вводите категории, им присваивается идентификационный номер. Это сложно изменить, поэтому, если вы не хотите, чтобы ваши категории были отсортированы в алфавитном порядке, введите их в том порядке, в котором они должны отображаться на экране.</em></p><p> Наверх ↑</p><p> Прежде чем приступить к графическому оформлению своего сайта, давайте еще немного займемся администрированием, чтобы настроить его. Вы можете установить плагины, чтобы увеличить нагрузку на свой сайт, и не забудьте активировать плагин Akismet WordPress, который доступен на всех сайтах WordPress, чтобы защитить его от спама в комментариях. Когда вы введете родительские категории, введите свои подкатегории. В раскрывающемся меню для родительской категории вы можете выбрать <em> родительский </em> для подкатегории, которую вы добавляете.Когда вы просматриваете свои категории на экране «Управление»> «Категории», вы увидите следующие категории:</p><ul><li> Компьютерные подсказки</li><li> Интернет-новости</li><li> Дизайн веб-страниц</li><li> WordPress</li></ul><p> Наверх ↑</p><h4 tabindex="-1"><span class="ez-toc-section" id="i-130"> Поместить сообщения в категории # Поместить сообщения в категории </span></h4><p> Давайте разберем несколько ваших тестовых сообщений по категориям, чтобы вы могли увидеть, как это работает. На экране «Сообщения <strong>»> «Категория </strong>» щелкните вкладку <strong> «Все сообщения </strong>».Вы должны увидеть введенные здесь тестовые сообщения. Когда вы наводите указатель мыши на заголовок каждого сообщения под заголовком, вы должны увидеть Edit | Быстрое редактирование | Корзина | Просмотр ссылок. Нажмите «Изменить», чтобы отредактировать одну из публикаций. В правой части экрана редактирования сообщения вы увидите свои категории. Выберите один из них, щелкнув поле рядом с ним. Затем в модуле публикации выше нажмите кнопку <strong> Обновить </strong>. Повторите это для других ваших тестовых сообщений, поместив каждый в отдельную категорию. Теперь просмотрите свою страницу, щелкнув название своего сайта на панели инструментов в верхней части экрана администрирования.Вы сейчас видите категории, перечисленные на боковой панели? Отлично. Если вам не хватает категории, это обычно означает, что в ней нет сообщений. Это функция WordPress по умолчанию, так что не беспокойтесь. Когда вы добавляете сообщение в категорию «отсутствующих», оно появляется на ваших веб-страницах. Щелкните одну из категорий, и вы попадете на страницу именно этой категории. Вы должны увидеть сообщения, которые попали в эту категорию. Это сгенерированная страница <em> категории </em>. Теперь нажмите <strong> Архив </strong> для текущего месяца.Теперь вы посещаете сгенерированную страницу ваших сообщений, перечисленных в хронологическом порядке за этот месяц - ну, конкретно только за сегодня. Два метода поиска одинаковой информации.</p><p> Наверх ↑</p><h4 tabindex="-1"><span class="ez-toc-section" id="i-131"> Что дальше # Что дальше </span></h4><p> Вы сделали все основы для своего нового веб-сайта WordPress. Вы знаете, как написать сообщение, создать категорию и как просмотреть информацию о вашем сайте по категориям и архивам. Вы можете начать процесс настройки, а когда закончите, не забудьте удалить свои тестовые сообщения! Тогда начните писать замечательную информацию, чтобы поделиться со своей новообретенной публикой!</p><p> Наверх ↑</p><p> Существуют сотни тем WordPress на выбор.Все они в основном делают одно и то же, но графически представляют информацию множеством способов. Выберите несколько из них, которые вам интересны и соответствуют потребностям и желаниям вашей аудитории, а затем протестируйте их, следуя приведенным выше инструкциям по тест-драйву. Просмотрите весь сайт, категории и архивы, а также отдельные сообщения, чтобы увидеть, как Тема обрабатывает каждое из них. На главной странице может быть красиво, но если она обрабатывает вещи так, как вам не нравится в отдельном сообщении, вам придется покопаться в коде и внести изменения.Не готов к этому, попробуйте другую тему.</p><p> Наверх ↑</p><h4 tabindex="-1"><span class="ez-toc-section" id="i-132"> Создание собственной темы # Создание собственной темы </span></h4><p> Если вы знакомы с CSS, HTML и даже с PHP и MySQL, подумайте о том, чтобы настроить тему под свои нужды или создать свою собственную тему.</p><p> Наверх ↑</p><p> Плагины</p><p> WordPress также известны как надстройки или расширения. Это программные скрипты, которые добавляют на ваш сайт функции и события. Они охватывают весь спектр: от актуальных прогнозов погоды до простой организации ваших публикаций и категорий.Плагины разрабатываются добровольными участниками и энтузиастами, которым нравится решать задачи и решать проблемы. Обычно их довольно просто установить через экран плагина администратора WordPress, просто следуйте инструкциям, предоставленным автором плагина. Помните, что это бесплатно и не обязательно. Если у вас есть какие-либо проблемы с плагинами, сначала свяжитесь с веб-сайтом автора плагина или источником плагина, затем поищите в Интернете помощь по этому конкретному плагину, а если вы не нашли решения, посетите форумы WordPress для получения дополнительной помощи.</p><p> Наверх ↑</p><h4 tabindex="-1"><span class="ez-toc-section" id="i-133"> Создание собственного подключаемого модуля # Создание собственного подключаемого модуля </span></h4><p> Если вы знакомы с PHP, HTML и, возможно, даже с MySQL, вы можете настроить WordPress для работы так, как вы хотите, создав свой собственный плагин.</p><p> Наверх ↑</p><p> Самое интересное в WordPress то, что здесь есть несколько ограничений. Тысячи людей используют WordPress для ведения блогов и ведения своих веб-сайтов. Например, посмотрите на некоторые записи под WordPress.org Theme Showcase. Все они имеют разный вид и разные функции на своих сайтах. Что вы будете делать дальше, зависит от вас, но вот несколько мест, где можно сделать первый шаг, помимо основ:</p><h5></h5><p><strong> История изменений </strong></h5><ul><li> Обновлено 01.01.2021<ul><li> Добавлен журнал изменений</li><li> Обновлены все скриншоты до WordPress 5.6</li><li> Добавлены ссылки на WordPress Code Reference and Learn WordPress</li><li> Изменены все ссылки с темы Twenty Nineteen на Twenty Twenty-One</li><li> Переработано язык о виджетах и ​​удален язык о боковой панели для согласования с темой Twenty Twenty-One.<br /></div><div class="clear"></div><div class="post-meta-bottom"><p class="post-categories"><span class="category-icon"><span class="front-flap"></span></span> <a href="https://1agenstvo.ru/category/raznoe" rel="category tag">Разное</a></p><div class="clear"></div><div class="post-nav"> <a class="post-nav-older" href="https://1agenstvo.ru/raznoe/razrabotchik-eto-razrabotchik-v-it-professiya-skrupulyoznyh-sozidatelej.html"><h5>Previous post</h5> Разработчик это: Разработчик в ИТ — профессия скрупулёзных созидателей </a> <a class="post-nav-newer" href="https://1agenstvo.ru/raznoe/elektronnuyu-pochtu-registrirovat-registracziya-pochtovogo-yashhika-help-mail-ru-mobilnaya-pochta.html"><h5>Next post</h5> Электронную почту регистрировать: Регистрация почтового ящика — Help Mail.ru. Мобильная Почта </a><div class="clear"></div></div></div><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/pervaya-stranicza-sajta-kak-nazyvaetsya-chto-nado-znat-o-pervoj-stranicze-sajta.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://1agenstvo.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='11736' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></div></div><div class="sidebar right" role="complementary"><div class="widget widget_categories"><div class="widget-content"><h3 class="widget-title">Рубрики</h3><ul><li class="cat-item cat-item-6"><a href="https://1agenstvo.ru/category/veb">Веб</a></li><li class="cat-item cat-item-7"><a href="https://1agenstvo.ru/category/dizajner">Дизайнер</a></li><li class="cat-item cat-item-8"><a href="https://1agenstvo.ru/category/idei">Идеи</a></li><li class="cat-item cat-item-5"><a href="https://1agenstvo.ru/category/portfolio">Портфолио</a></li><li class="cat-item cat-item-4"><a href="https://1agenstvo.ru/category/rabota">Работа</a></li><li class="cat-item cat-item-3"><a href="https://1agenstvo.ru/category/raznoe">Разное</a></li><li class="cat-item cat-item-10"><a href="https://1agenstvo.ru/category/sovet">Совет</a></li><li class="cat-item cat-item-1"><a href="https://1agenstvo.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-9"><a href="https://1agenstvo.ru/category/frilanser">Фрилансер</a></li></ul></div><div class="clear"></div></div></div><div class="clear"></div></div><div class="footer section large-padding bg-dark"><div class="footer-inner section-inner"><div class="clear"></div></div></div><div class="credits section bg-dark no-padding"><div class="credits-inner section-inner"><p class="credits-right"> 2024 © Все права защищены.</p><div class="clear"></div></div></div></div><noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://1agenstvo.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script><link rel='stylesheet' id='pgntn_stylesheet-css' href='https://1agenstvo.ru/wp-content/cache/autoptimize/css/autoptimize_single_c8efdae50f1371e97abc6e9cbe03420c.css' type='text/css' media='all' /></body></html>