Структура веб страницы: Правильная базовая структура веб-страницы & новости по созданию сайтов от ABCname

Правильная базовая структура веб-страницы & новости по созданию сайтов от ABCname

Базовая структура веб-страницы

• Базовые элементы страницы веб-сайта
• Составные части HTML-макета веб-страницы более подробно

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

Базовые элементы страницы веб-сайта

Заголовок веб-страницы

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

Панель навигации сайта

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

Основное содержание веб-страницы

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

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

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

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

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

Составные части HTML-макета веб-страницы более подробно

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

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

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

Заголовок: < header >.

Панель навигации: < nav >.

Основное содержимое: < main >, с различными подразделами содержимого, представленными элементами < article >, < section > и < div >.

Боковая панель: < aside >; часто помещается внутри < main >.

Нижний колонтитул: < footer >.

Итог

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

Помогла ли вам статья?

357 раз уже помогла

Комментарии: (0)

Структура веб-страницы

Для создания веб-страниц используется гипертекстовый язык описания документов — HTML (Hyper Text Markup Language).

Это язык программирования, имеющий свой набор команд.

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

Команды HTML называются тегами (от англ. tag — ярлык, метка). Чтобы отличить теги от текста документа их заключают в угловые скобки. Например, тег <br> означает команду “начало новой строки”. Теги могут быть как одиночными, так и парными. Одинарные задают действие на один раз. Парные теги указывают начало

и окончание действия команды. Тег, указывающий на окончание, помечается символом слеш (/).

Структура веб-страницы задается следующими парными тегами:

• Пара <html> и </html> указывает формат страницы и отмечает его границы

• Пара <head> и </head> указывает на начало и конец заголовка. Включают описание документа, ключевые слова (keywords) для поиска, название документа и другую информацию идентифицирующую страницу.

• Пара <title> и </title

  > указывает имя страницы.

• Пара <body> и </body> указывает на начало и конец “тела” страницы. Тело — это последовательность команд, обеспечивающая вывод в окно браузера форматированного текста, ссылок и других элементов веб-страницы.

Создавать веб-страницы можно как в HTML-редакторах (FrontPage), так и в текстовых редакторах разного уровня (Word, Блокнот).

Рисунки и другие объекты веб-страницы хранятся отдельно от HTML-кода.

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

Таким образом, веб-страница, как правило, хранится в виде файла формата .

html и папки с объектами.

Для работы с WWW используются:

• Панель Адресная строка — переход к новому сайту.

• Панель инструментов — работа с полученными данными.

• Элементы веб-страницы — работа с текущим сайтом или переход на другой сайт.

Адресную строку можно заполнять разными способами:

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

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

В Internet Explorer нет окон документов. Если нужно одновременно работать с несколькими веб-страницами, следует открыть новое окно программы:

• Новое окно с текущей страницей — команда Файл/Создать/Окно.

• Новое окно со страницей, указанной в ссылке — выбор команды Открыть в новом окне из контекстного меню ссылки.

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

Некоторые ссылки настроены так, что страница открывается в новом окне автоматически.

Руководство по различным типам структур веб-сайтов

Иллюстрация Тридиба Даса

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

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

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

Правильно спроектированная веб-структура помогает пользователям легко ориентироваться и достигать своих целей благодаря простой навигации и категоризации. Изображение предоставлено Adobe Stock.

Что такое структура сайта и зачем она нужна?

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

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

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

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

Существует ли идеальная структура сайта?

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

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

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

Типы структур веб-сайтов

Существует четыре основных типа структур веб-сайтов. Правильное понимание структуры веб-сайта облегчает дизайнерам создание осмысленной информационной архитектуры веб-сайта. Давайте рассмотрим их один за другим.

Иерархическая модель

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

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

Последовательная модель

Последовательная модель может использоваться для разработки потоков для процесса. Изображение кредита slickplan.

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

Матричная модель

Матричная модель веб-структуры позволяет пользователям выбирать, куда им двигаться дальше. Изображение кредита slickplan.

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

Модель базы данных

Модель базы данных веб-структуры определяет логическую структуру базы данных. Изображение кредита slickplan.

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

Почему вам следует начать со структуры сайта

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

Words by
Will Fanguy

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

Базовая структура веб-страницы

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

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

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

• <голова>
• <тело>

В совокупности эти три элемента описывают базовую структуру страницы:

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

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

  
  
  
 ... 
  
  
 ... 
 < /тело> 
 

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

После размещения каркаса XHTML необходимо добавить еще два соединителя в смесь.

Для каждой веб-страницы требуется элемент


< р>

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

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

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

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

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

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

Откроется пустой документ.

Введите следующий текст:

Когда он будет написан, сохраните его в папке с именем template. html

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

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

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

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

Допускаются только символы международного алфавита (английского).

Обратите внимание на следующие примеры:

• страница 1.htm неверна , так как содержит пробел и заглавную букву
• page/1.htm неверно , имеет недопустимый символ (черта)
• page1-htm является неверным , так как расширение не отделяется от имени точкой и потому что оно использует неразрешенный символ. (обычный сценарий).
• page.1.htm неверный , потому что точек больше одной. Следует использовать только один, чтобы отделить имя расширения
• page1.htm правильный
• page_1.html правильный
• page-1.html равен правильный

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

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

Еще одно важное правило — файлы имеют расширение, а папки, в которых мы их храним, — нет. Итак, в название папки мы никогда не включим точки.

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

Обратите внимание, что значок напоминает Explorer или Google Chrome (при условии, что один из них является вашим браузером по умолчанию).

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

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

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

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

Сначала мы нашли тег. Этот тег всегда используется для запуска html-кода.

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

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

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

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

Давайте посмотрим код заголовка:

Как и общий код, заголовок имеет начало, обозначенное, и конец, обозначенный.

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

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

Заголовок страницы заключен между тегами, которые указывают соответственно начало и конец заголовка.

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

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

После того, как заголовок завершен, мы переходим ко второму разделу всей веб-страницы: телу или телу.

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

Начинается с тега и заканчивается тегом. Как мы видим в созданном нами файле, на данный момент мы ничего не включили

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

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

Для этого закройте браузер и в папке, в которой вы работаете, перетащите значок template.html на блокнот. Таким образом, блокнот откроется и загрузит исходный код, который вы ранее набрали.

В области кода, зарезервированной для тела страницы, между строками и введите следующее:

Это строка текста.

Таким образом, ваш код будет следующим:

<
голова>
<название>
Название страницы


<тело>
Esto es una linea de texto



 

Затем щелкните меню ФАЙЛ и выберите в нем вариант СОХРАНИТЬ КАК.