Перечислите основные элементы web страницы кратко

Обновлено: 05.07.2024

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

Узнать подробнее о структуре сайта можно в этой статье: от иерархии страниц зависит успешное SEO-продвижение, удобство для посетителей и продажи.

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

Первый экран

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

Основные элементы

Заголовок. Часто это название того, что продается на сайте, слоган или вдохновляющая цитата.

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

На что обратить внимание

Не обязательно использовать все и сразу: фоновое изображение, заголовок и кнопку. Часто на главном экране — только картинка.

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

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

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

Основные элементы

Основные элементы web-страницы:

Заголовок/Логотип (Шапка)
Поиск
Рекламный Баннер
Содержание (Текстовое поле)
Элементы навигации
Информация о разработчиках сайта
Счетчик посещаемости

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

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

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

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

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

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

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

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

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

Краткая история развития HTML

Суть состояла в том, что бы создать разметку текста которую без проблем можно было распознать на любом компьютере (что было очень важно в те времена).

Если вы знаете основы компьютерных сетей, то SGML можно сравнить с моделью OSI. SGML это базовый принципы которые легли в основу HTML так же как модель TCP/IP основывается на модели OSI.

В 1991 году на британский ученый Тимо Бернерс Ли разрабатывает на основе SGML язык гипертекстовой разметки который получает название HyperText Markup Language (HTML).

Тим Бернерс Ли

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

Изначально HTML соответствовал особенностям и идеологии SGML. В 1993 году появилась версия языка HTML 1.2, которая имела сорок с небольшим тегов, три из которых не были рекомендованы к использованию, так как указывали на физические параметры предоставления документа. Этот факт, в свою очередь, противоречил идеологии SGML.

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

В это время был единственный браузер – Mosaic, который поддерживал графические возможности. Этот браузер был разработан в Национальном центре суперкомпьютерных приложений США (National Center for Supercomputer Applications — NCSA), там же, кстати, была разработана технология WWW (World Wide Web). По этой причине никаких противоречий между официальными стандартами и их реализацией в браузерах тогда не существовало.

Браузер Mosaic

В апреле 1994 года был образован Консорциум W3C (World Wide Web Consortium). Так как официальной спецификации HTML 1.0 не существовало, W3C начал заниматься подготовкой спецификации HTML следующей версии. Но чтобы стандартная версия отличалась от всех предыдущих, ей сразу присвоили номер 2.0. Разработка спецификации HTML 2.0 шла не спеша и лишь в сентябре 1995 года она была утверждена. Из больших дополнений был добавлен лишь механизм форм для отсылки информации с компьютера пользователя на сервер.

Тем временем Консорциум W3 в параллель со спецификацией 2.0 занимался обсуждением HTML 3.0. Она была предложена в марте 1995 года. Третья версия предлагала много новых возможностей: поддержка таблиц, обтекание изображения текстом, отображение сложных математических формул, примечания. Поддержка этого стандарта браузерами того времени была не удовлетворена.

Авторы HTML 3 добавили поддержку нового средства — иерархические стилевые спецификации (Cascading Style Sheets, CSS). Это нововведение нужно было для того, чтобы разрешить назревшее к тому времени противоречие между идеологией структурной разметки и потребностями пользователей, которым в первую очередь нужно было гибкость и обширные возможности визуального представления. CSS имеет свой синтаксис и является формально независимой от HTML.

Следующей версией HTML стала 3.2 и в ней были опущены многие нововведения из версии 3.0.

18 декабря 1997 года бала принята четвертая версия HTML. Она содержала как и третья много элементов, специфичных для отдельных браузеров. Хотя в HTML 4.0 произошла чистка элементов из предыдущих версий спецификаций. Многие элементы были помечены как устаревшие и не рекомендуемые к использованию. Вместо них рекомендовалось использовать таблицы стилей CSS.

HTML 4.01 утвердили 24 декабря 1999. Изменения, принятые в нем были более значительные, чем, кажется на первый взгляд.

Сейчас W3C занимается разработкой пятой версии языка HTML. Ее черновой вариант стал доступен 20 ноября 2007 года.

В параллель ведется также разработка XHTML (Extensible Hypertext Markup Language) — расширяемый язык разметки гипертекста. В нем предъявляются более строгие требования к синтаксису, чем в HTML. XHTML 1.0 был утвержден 26 января 2000 года в качестве рекомендации W3C. Вариант XHTML 1.1 одобрен в качестве рекомендации консорциума 31 мая 2001 года.

Версии HTML

HTML 2.0 — опубликован IETF как RFC 1866 в статусе Proposed Standard (24 ноября 1995 года) ;
HTML 3.0 — 28 марта 1995 года — IETF Internet Draft (до 28 сентября 1995 года);
HTML 3.2 — 14 января 1997 года;
HTML 4.0 — 18 декабря 1997 года;
HTML 4.01 — 24 декабря 1999 года;
ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года;
HTML5 — 28 октября 2014 года ;
HTML 5.1 начал разрабатываться 17 декабря 2012 года . Рекомендован к применению с 1 ноября 2016 года .
HTML 5.2 был представлен 14 декабря 2017 года .
HTML 5.3 был представлен 24 декабря 2018 года.

Структура и основные элементы

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

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

Теги могут иметь атрибуты которым присваиваются значения (об этом чуть позже).

Теги могут быть вложенными друг в друга.

Редактор HTML

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

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

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

Основные элементы web-страницы

Все базовые теги имеют закрывающие теги и являются вложенными друг в друга.

Структура простого HTML документа

Давайте наберем в редакторе следующий код:

Затем сохраните файл с расширением .html, в моем случае это файл html-1.html. Если у вас появились проблемы, просто скачайте этот файл.

Откройте файл в браузере и посмотрите результат.

Рассмотрим основные элементы подробнее.

Элемент

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

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

Атрибут	Описание	Возможные значения
manifest	Указывает путь к кешу манифеста.	URL.

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

Прописываются атрибуты так:

html — тег;
manifest — атрибут;
URL — значение атрибута.

Элемент

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

Элемент

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

Что такое web страница ? Это документ, написанный на языке разметки гипертекста ( HTML ), который можно просмотреть с помощью браузера. Доступ к веб-странице осуществляется путем ввода URL-адреса .

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

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

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

Когда была создана первая веб-страница?

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

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

Что такое веб-страница — примеры

Какие элементы содержит веб-страница?

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

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

Что пользователи могут сделать на веб-странице?

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

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

Пожалуйста, оставляйте ваши отзывы по текущей теме статьи. За комментарии, дизлайки, лайки, отклики, подписки низкий вам поклон!

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

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

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

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

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

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

С шапкой обычно связаны следующие вещи:

Top-Line Branding. Здесь, как правило, располагаются сведения об основной торговой марке. В этой области часто помещается суббренд или строка тегов. Логотип чаще всего занимает верхний левый угол, но это не обязательное правило, а лишь распространенный эталон, к которому привыкло большинство пользователей.

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

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

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

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

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

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

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

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

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

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

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

Распространенные элементы нижних колонтитулов. В нижний колонтитул часто помещают:

– Сведения об авторских правах и ссылки на правовую информацию, например политику конфиденциальности.

– Копию основной системы навигации сайта.

– Полную или частичную карту сайта.

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

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

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

Читайте также: