Типичная веб-страница представляет собой HTML-файл такого типа

Обновлено: 30.06.2024

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

Браузеры и серверы

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

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

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

Классический вариант использования вводящей в заблуждение ссылки — Рик Роллинг. Вы делаете кого-то Рикроллом, обманом заставляя его посмотреть видео Рика Эстли «Never Gonna Give You Up» (смотрите, если осмелитесь).

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

Файловый протокол

Вы можете открыть файл на своем компьютере в браузере, используя файловый протокол. Обратите внимание, что это не Интернет! Это не клиент-сервер и не использует http/https. Предположим, вы являетесь пользователем m169999 и у вас есть файл на рабочем столе с именем Vacation.jpg . Ввод следующего URL-адреса в адресную строку браузера приведет к тому, что браузер покажет вам это изображение: Обратите внимание, что «серверная» часть URL-адреса свернута до нуля, поэтому в строке есть три символа /, указывающие, что мы обращаемся к файлу на нашей локальной машине. Используя ctrl+o, вы можете просмотреть файловую систему, чтобы открыть файл, что может быть более удобным, чем ввод URL-адреса. Файловый протокол очень полезен при создании веб-сайтов, поскольку вы можете быстро просмотреть страницу еще до того, как поместите ее на веб-сервер.

Проще говоря, HTTP — это просто язык запросов и ответов на запросы, который позволяет получать файлы с веб-серверов по всему Интернету. Ваш браузер использует этот язык для получения файла, указанного в URL-адресе, с сервера (также указанного в URL-адресе). На самом деле он использует команду http "GET". Ключевым моментом является то, что ВАШ браузер делает запрос на удаленный сервер ОТ ВАШЕГО ИМЕНИ. обычно для того, чтобы на него был отправлен данный файл. На самом деле вы можете отправлять запросы на веб-сервер самостоятельно, то есть без использования браузера. Однако, как и во многих других случаях, будьте осторожны с тем, что вы просите! Мы будем использовать инструмент под названием netcat ( nc ), который позволяет отправлять сетевые запросы на низком уровне. Давайте сравним то, что вы видите, когда заходите на http://intranet.usna.edu/1stCo/index.html, с тем, что видит браузер и что он делает, чтобы показать вам эту красивую страницу. Красным — то, что мы печатаем, зеленым — то, что отправляет сервер. Я вырезал большую часть ответа, чтобы избавить вас от необходимости смотреть на все это. Если вы действительно хотите это увидеть, ознакомьтесь с полной стенограммой. Ответ от сервера также следует протоколу HTTP, и мы можем понять это. «HTTP/1.1 200 OK» означает, что сервер смог успешно ответить на запрос. « Content-Type: text/html » особенно важен: с помощью строки Content-Type сервер сообщает браузеру, какой файл он обслуживает. В этом случае сервер сообщает браузеру, что далее следует обычный текстовый файл в формате html. Это обеспечивает отличный переход к .

HTML (язык гипертекстовой разметки)

< /p>

На этой странице два абзаца. В первом есть изображение и ссылка.

Вторая имеет разные цвета , и это круто. В нем также есть несколько забавных персонажей: Σ ⇨ ▲

< /p>

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

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

< /p>

Журналы: бумажный след . электронный след?

Что такое «Всемирная паутина»?

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

Предварительные требования:	Основные знания HTML, описанные в разделе Начало работы с HTML. Форматирование текста HTML, описанное в разделе Основы работы с текстом HTML. Как работают гиперссылки, как описано в разделе Создание гиперссылок.
Цель:	Узнать, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта.

Основные разделы документа

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

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

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

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

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

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

"Типичный веб-сайт" может иметь примерно следующую структуру:

HTML для структурирования контента

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

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

Примечание. Примерно 8 % мужчин и 0,5 % женщин страдают дальтонизмом; или, другими словами, примерно 1 из каждых 12 мужчин и 1 из каждых 200 женщин. Слепые и слабовидящие люди составляют примерно 4–5 % населения мира (в 2012 году таких людей в мире было 285 миллионов, а общая численность населения составляла около 7 миллиардов).

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

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

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

Активное обучение: изучение кода для нашего примера

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

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

Подробнее об элементах HTML-макета

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

уникального для этой страницы.

один раз

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

Несемантические оболочки

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

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

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

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

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

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

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

Разрывы строк и горизонтальные линейки

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

: элемент разрыва строки

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

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

: элемент тематического перерыва

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

Будет отображаться следующим образом:

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

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

Активное обучение: создайте собственную карту сайта

Попробуйте выполнить описанное выше упражнение для собственного веб-сайта. О чем бы вы хотели сделать сайт?

Примечание. Сохраните свою работу где-нибудь; он может понадобиться вам позже.

Проверьте свои навыки!

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

Обзор

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

См. также

: Расширенное руководство по семантическим элементам HTML5 и алгоритму структуры HTML5.

В этом модуле

Нашли проблему с этой страницей?

Последнее изменение: 19 марта 2022 г., участниками MDN

Ваш план улучшения Интернета.

Поддержка

Наши сообщества

Разработчики

уникального для этой страницы.

один раз

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

<р>">>,

: элемент разрыва строки

: элемент тематического перерыва

Будет отображаться следующим образом:

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

Попробуйте выполнить описанное выше упражнение для собственного веб-сайта. О чем бы вы хотели сделать сайт?

Примечание. Сохраните свою работу где-нибудь; он может понадобиться вам позже.

<р>">>,

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

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

Клиенты и серверы

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

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

Другие части набора инструментов

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

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

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

Так что именно происходит?

Когда вы вводите веб-адрес в браузере (по аналогии с походом в магазин):

Браузер обращается к DNS-серверу и находит реальный адрес сервера, на котором живет веб-сайт (вы находите адрес магазина).
Браузер отправляет сообщение HTTP-запроса на сервер с просьбой отправить копию веб-сайта клиенту (вы идете в магазин и заказываете товары). Это сообщение и все другие данные, передаваемые между клиентом и сервером, передаются через ваше подключение к Интернету с использованием протокола TCP/IP.
Если сервер одобряет запрос клиента, сервер отправляет клиенту сообщение "200 OK", что означает "Конечно, вы можете посмотреть этот веб-сайт! Вот он", а затем начинает отправлять файлы веб-сайта в браузер. в виде серии небольших фрагментов, называемых пакетами данных (магазин дает вам ваши товары, а вы приносите их домой).
Браузер собирает небольшие фрагменты в полноценную веб-страницу и отображает ее вам (товары доставляются к вашей двери — новые блестящие вещи, круто!).

Порядок, в котором анализируются файлы компонентов

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

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

HTML-файл, открытый в Adobe Dreamweaver 2021

HTML был представлен в 1991 году Тимом Бернерсом-Ли и другими инженерами ЦЕРН как способ интерпретировать и отображать веб-страницы в веб-браузерах. С момента своего выпуска он стал стандартом в веб-разработке и претерпел множество изменений, включая HTML 2 (1995 г.), HTML 3 (январь 1997 г.), HTML 4 (декабрь 1997 г.) и HTML 5 (2014 г.).

Рабочая группа по технологиям веб-гипертекстовых приложений (WHATWG) разрабатывает и продвигает HTML. Группа была основана в 2004 году и состоит из крупных разработчиков браузеров, включая Google, Microsoft, Apple и Mozilla.

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

Некоторые примеры основных элементов включают:

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

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

Со временем для улучшения веб-страниц были внедрены другие веб-технологии, такие как каскадные таблицы стилей (CSS) и JavaScript. Скорее всего, вы найдете код CSS или JavaScript или ссылки на файлы .CSS или .JS на современных веб-страницах HTML.

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

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

Google Chrome (Windows) – выберите Дополнительные инструменты → Инструменты разработчика.
Google Chrome (Mac): выберите «Просмотр» → «Разработчик» → «Просмотреть исходный код».
Mozilla Firefox: выберите «Веб-разработчик» → «Исходный код страницы».
Microsoft Edge: выберите Дополнительные инструменты → Инструменты разработчика.
Apple Safari: выберите «Разработка» → «Показать исходный код страницы».

ПРИМЕЧАНИЕ. Большинство страниц статических веб-сайтов имеют расширение .html, тогда как страницы динамических веб-сайтов могут иметь расширение .php или .asp.

Распространенные имена файлов HTML

default.html — индексный файл, часто используемый веб-серверами Windows, такими как Microsoft IIS.

Как открыть файл HTML

Вы можете открывать и редактировать HTML-файлы с помощью различных редакторов исходного кода и приложений для веб-разработки. Microsoft Visual Studio Code (мультиплатформенная версия) — это полезный редактор исходного кода, а Adobe Dreamweaver (мультиплатформенная версия) — популярное приложение для веб-разработки.

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

Вы можете просмотреть веб-страницу в формате HTML, открыв ее в веб-браузере, таком как Google Chrome (мультиплатформенный), Microsoft Edge (мультиплатформенный), Mozilla Firefox (мультиплатформенный) или Apple Safari (Mac и iOS).

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