Веб–страница — Определение, элементы и типы
Вы когда-нибудь задумывались, что это за экраны, которые мы постоянно переключаем на веб-сайте?
Есть ли термин для этих динамических экранов? Как мы переключаемся с одного экрана на другой? Сегодня на все подобные вопросы будут даны ответы в этой статье, так что продолжайте читать.
Всякий раз, когда мы открываем страницу на веб-сайте, например, на том, который вы сейчас читаете, это часть самого веб-сайта. Этот экран называется веб-страницей или просто страницей. Веб-страница является частью веб-сайта, который, в свою очередь, является частью Интернета.
Давайте прочитаем, что такое веб-страница? В деталях.
Что такое веб-страница?
P.S. Веб-страница — это HTML-документ, предоставляемый любым веб-сайтом, который отображается в вашем веб-браузере. Веб-сайт содержит не только одну, но и группу взаимосвязанных веб-страниц. Эти веб-страницы содержат информацию, графику, видеоконтент и т.д.
Другими словами, веб–страница – это просто страница из большой книги — веб-сайт, который является частью библиотеки — Интернета.
Например, вы, возможно, слышали или не слышали о таких словах, как веб–сайт, HTML и другие ключевые слова. Итак, позвольте мне упростить концепцию веб-страницы, объяснив эти ключевые слова.
Веб-браузер
Веб-браузер — это приложение, через которое осуществляется доступ ко всем веб-сайтам. Chrome, Mozilla Firefox, Internet Explorer, Safari являются примерами некоторых распространенных веб-браузеров. Это веб-браузер, который отображает HTML конкретной веб-страницы, которую вы искали.
HTML
Язык разметки гипертекста полезен для структуры и дизайна любой веб-страницы. Он просто предоставляет первичную структуру, которой помогают более продвинутые языки программирования, такие как javascript и Django.
Вебсайт
Веб-сайт — это набор веб-страниц, которые связаны между собой под одним доменным именем, то есть если веб-сайт. Этот веб-сайт может быть представлен отдельной отраслью, учебным заведением, частным лицом или любой другой организацией. Например, Facebook — это веб-сайт, который имеет множество веб-страниц.
URL
У каждого из нас есть свой домашний адрес. Адрес определяет, где мы живем. Аналогично, URL (Uniform Resource Locator) — это указатель адресов каждой веб-страницы или веб-сайта. URL-адрес также обычно называют веб-адресом.
Как только мы вводим URL-адрес любой веб-страницы или веб-сайта в веб-браузере, страница появляется на экране. Так же, как и наши домашние адреса, каждая веб-страница имеет уникальный URL.
Элементы веб-страницы
- Каждый веб-сайт имеет свой собственный набор веб-страниц, и все они отличаются друг от друга. Однако каждый из них содержит некоторые общие элементы. Вот список этих элементов, составляющих веб-страницу.
- Логотип или название веб-сайта вверху. Размещение не имеет значения. Он определяет веб-страницу, которая принадлежит какому веб-сайту.
- Панель поиска позволяет пользователям искать соответствующую информацию на конкретной странице или на всем веб-сайте.
- Под него кладутся панировочные сухари. Они помогают читателю определить, где он находится на веб-сайте, и помогают ему перейти на предыдущую страницу или домашнюю страницу.
- Заголовок или подзаголовок веб-страницы должен быть размещен. Это должно быть с тегом HTML <h1>.
- Под ним начинается содержание, разделенное на разные абзацы для сохранения ясности. Эти пункты могут быть помещены под разными заголовками. Эти заголовки могут быть созданы с тегами от <h2> до <h6> в зависимости от их важности.
- Многие информативные веб-страницы содержат ссылку для обратной связи. Хорошая веб-страница всегда спросит читателя, была ли информация полезной или нет.
- В конце концов, появляется нижний колонтитул. Нижний колонтитул включает название и любую другую информацию о веб-сайте.
- Авторское право и юридическое уведомление должны быть указаны в конце каждого веб-сайта. Это предохраняет доступную информацию от любой кражи контента. Это гарантирует, что предоставленная информация остается уникальной.
Как открыть веб-страницу?
Если на вашем устройстве установлен стабильный веб-браузер, открыть веб-страницу не составит труда.
Выполните следующие действия, чтобы открыть веб-страницу.
- Загрузите веб-браузер, доступный на вашем устройстве.
- Введите URL-адрес веб-сайта, который вы ищете.
- Альтернативой этому является ввод названия веб-сайта (доменного имени) в строку поиска/ поисковую систему.
- Вы также можете скопировать и вставить ссылку, если она доступна, непосредственно в строку поиска. Веб-браузер автоматически перенаправит вас на соответствующую веб-страницу или сайт.
Обзор URL-адреса веб-страницы
1. Protocol – Протокол — это самое главное в любом URL. Он используется браузером для запроса информации с ресурса.
2. Domain name – Доменное имя — это название веб-сайта, на котором есть веб-страница, которую вы хотите просмотреть. Это номинальная стоимость организации, которая им управляет.
3. Webpage — название веб-страницы определяет, на какой части веб-сайта вы находитесь в данный момент.
4. Anchor- Привязка – это определяется символом ‘#’ и используется для обозначения того, что страница связана с ресурсом. Якорь находится где-то внутри самой страницы. Нет необходимости запрашивать сервер для его загрузки.
Активное обучение: изучение кода для нашего примера
Мы бы хотели, чтобы вы посмотрели на приведенный выше пример, а затем просмотрели список ниже, чтобы увидеть, какие части составляют тот или иной раздел визуального представления.
<!DOCTYPE html>
<html lang=»en-US»>
<head>
<meta charset=»utf-8″ />
<meta name=»viewport» content=»width=device-width» />
<title>My page title</title>
<link
href=»https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One»
rel=»stylesheet» />
<link rel=»stylesheet» href=»style.css» />
</head>
<body>
<!— Here is our main header that is used across all the pages of our website —>
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li><a href=»#»>Home</a></li>
<li><a href=»#»>Our team</a></li>
<li><a href=»#»>Projects</a></li>
<li><a href=»#»>Contact</a></li>
</ul>
<!— A Search form is another common non-linear way to navigate through a website. —>
<form>
<input type=»search» name=»q» placeholder=»Search query» />
<input type=»submit» value=»Go!» />
</form>
</nav>
<!— Here is our page’s main content —>
<main>
<!— It contains an article —>
<article>
<h2>Article heading</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
congue enim, ut porta lorem lacinia consectetur.
</p>
<h3>Subsection</h3>
<p>
Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem.
Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.
</p>
<p>
Pelientesque auctor nisi id magna consequat sagittis. Curabitur
dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet.
Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.
</p>
<h3>Another subsection</h3>
<p>
Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum
soclis natoque penatibus et manis dis parturient montes, nascetur
ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem
facilisis semper ac in est.
</p>
<p>
Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi
diam iaculis velit, is fringille sem nunc vet mi.
</p>
</article>
<!— the aside content can also be nested within the main content —>
<aside>
<h2>Related</h2>
<ul>
<li><a href=»#»>Oh I do like to be beside the seaside</a></li>
<li><a href=»#»>Oh I do like to be beside the sea</a></li>
<li><a href=»#»>Although in the North of England</a></li>
<li><a href=»#»>It never stops raining</a></li>
<li><a href=»#»>Oh well…</a></li>
</ul>
</aside>
</main>
<!— And here is our main footer that is used across all the pages of our website —>
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
</body>
</html>
Потратьте некоторое время на то, чтобы просмотреть код и понять его — комментарии внутри кода также должны помочь вам понять его. Мы не просим вас делать что-то еще в этой статье, потому что ключом к пониманию макета документа является написание надежной HTML-структуры, а затем ее оформление с помощью CSS. Мы подождем этого, пока вы не начнете изучать CSS layout как часть темы CSS.
Вывод
На этом мы подошли к концу этой статьи о том, что такое веб–страница?
Интернет — это огромное пространство с почти тысячами веб-сайтов. На этих веб-сайтах есть, даже больше, почти бесчисленные веб-страницы. Поэтому для удобства был создан этот URL-адрес. Кроме того, вам не нужно специально искать URL-адреса каждой веб-страницы.
На странице всегда слишком много ссылок, которые приведут вас к выбранному вами контенту. Поэтому всегда внимательно следите за такими гиперссылками на веб-странице.
ЛИТЕРАТУРА.
- https://xn—-7sbbaqhlkm9ah9aiq.net/news-new/structura-web-stranicy.html
- http://edu.tltsu.ru/er/book_view.php?book_id=218&page_id=2862
- https://s1-agency.ru/dizain/osnovnye-elementy-veb-stranicy-saita.html
- https://envybox.io/blog/jelementy-stranicy-sajta/
- https://borodaboroda.com/blog/elementy-interfejsa-sajta/