Most of the content on the Internet is web pages. This is historically the very first type of documents intended for placement in the virtual network space, but still retains its relevance and has practically no competing formats. What is the structure of web pages? What web development tools are used to create them?
What is a Web page?
“List the basic elements of a Web page,” an examiner tells us in a computer science class. What can we say to him in response? First of all, let's talk about what a web page is in principle.
According to the definition generally accepted among IT professionals, this is a document that is designed to be opened in a specialized program - a browser, and which contains data for displaying various useful content on a computer screen using the appropriate type of software - texts, links, graphics, videos, music, etc. etc. A web page is a text document. The relevant data for the browser is letters, numbers, and special characters used as elements of the markup language, HTML. It is with the help of it that the creator of the web page “explains” to the browser how to display this or that content on the screen.
Place and role of web pages in the structure of sites
Can we say that a Web page is the main component of a website? This is partly true. However, as we noted above, a web page is just a text document. The site, as a rule, also contains pictures, videos and other multimedia elements. A web page cannot contain them, but in its structure it can contain links to them. Thus, a web page can be called the main component of the site in terms of the leading role in displaying virtual content to users.
In rare cases, of course, the document in question will be the only component of the site - if for some reason it does not provide for the display of graphics, video and other multimedia elements. In particular, the very first sites - when the markup languages of Web pages first appeared - did not include the corresponding content. Before the eyes of the user was only text and links.
The principle of using hypertext
So, a Web page is a document written in HTML, with the help of which hypertext markup is carried out. But what is this phenomenon? What is hypertext? Without delving too deeply into theory, we note that this is a text that in one way or another allows you to get quick access to another - through links. In a regular book, this is impossible - there is “plain text”. To gain access to the desired page, the reader must make several flips, having previously read the content or footnotes. In the "hypertext" mode, the main part of the work is done by the computer - due to the information reflected in the HTML elements of the page.
If a computer science teacher tells us, "List the main elements of a Web page," then we can correctly start talking about the components of the corresponding document, which are created using the HTML markup language. Therefore, to begin with, let's look at some theoretical points regarding HTML.
HTML language structure: tags
How does a browser read the necessary data about a web page from an HTML document? Very simple.
The main elements of this language are tags. In most cases, they are paired - there is an opening one, and there is a closing one. The former are denoted using only angle brackets. The second ones are similar, but the second bracket is preceded by a slash - the / symbol. The browser is able to recognize them, and therefore displays the content of web pages without any problems in accordance with the algorithms created by the document developer.
The opening tag is usually written in capital letters, the closing tag is written in small letters. This is a standard that has become established among IT professionals. The browser will certainly recognize the HTML command in any letters, but web developers are still advised to stick to the marked tag writing scheme. This will facilitate, for example, the completion of a web page by other specialists.
Attributes
Other important elements of the HTML language are attributes. With their help, the creator of a web page can set content properties - for example, font height, color, position relative to the page. The same applies to pictures, videos and other multimedia components. Attributes are written within the opening tag.
Content
Between the opening and closing tags is the next key component of a web page, the content. This is, in fact, the very content that should be displayed in front of the user on the screen. It can be text, link, picture, video or other multimedia element.
Web page elements
“So list the basic elements of a Web page, finally!” - repeats the teacher. "With pleasure," we answer him. What is included in the structure of the type of documents under consideration? Let's agree that we will consider this aspect in the context of the HTML elements of the web page. That is, their display in the browser - what the user sees on the screen - will interest us to a lesser extent. The fact is that the corresponding HTML algorithms, on the basis of which the program displays content in the same way, can be different. And this is the peculiarity of the HTML language: the desired image on a Web page can be displayed in different ways. At the same time, they can be either equivalent in terms of the labor costs of the creator of the web page, or they can imply a different amount of effort and time for their implementation.
Web page elements: header
The standard elements of a Web page, surprising as it may sound, are present in very small numbers. In fact, there are only two of them - the heading and the body of the document. However, each of them can have a rather complex structure.
What is the specifics of the header? It is located at the very top of the web page. The HTML that generates the heading usually assumes that only the text is "encrypted", but if necessary, small graphic inserts can also be placed in the corresponding element. And this, in fact, is all that can be said about the title. It would seem that its role in the structure of the corresponding document is insignificant. But it's not. Web page titles are very important in terms of indexing sites in search engines - Yandex, Google. This element must be fully relevant to the content of the web page, as well as the thematic specifics of the site.
How is the title of a web page captured using HTML? Very simple. First, the opening tag is written, which always looks like HEAD with angle brackets, then the content of the heading, after that, the closing tag. They are written, of course, at the very top of the web document.
The title of a web document can include a number of additional elements. Sometimes the format of a Web page may require text to be displayed in a particular encoding. How to ensure that the web document meets this criterion? Very simple. The document header structure should contain HTML algorithms that instruct the browser to use a specific language encoding - for example, Cyrillic. The corresponding commands are placed within the META tag, which, like others, can be opening and closing.
Main body of the web page
The main body of a web document opens with the BODY tag and closes with the corresponding element, which includes a slash. At the same time, there can be a huge number of additional commands of the hypertext markup language between the opening and closing tags. This is due to the fact that the main part of the web page contains its useful content - texts, links, graphics, videos, various forms to fill out.
Each of the respective content types has its own tags. The structure of the main part of a web document may contain HTML commands that can also be used to format text, for example, giving the font a specific color, size, and other properties.
Let's take a look at the specifics of some commonly used HTML tags. Actually, they also form the main elements of the web page.
Basic HTML tags
So, in order to study in detail what the elements of a Web page are, let's study in more detail the essence of basic HTML tags. We have already listed some of them above - in particular, those with which the browser reads the headers of web pages and determines where the main body of the document is located.
The P tag is quite common. It, like other similar elements of the hypertext markup language, can be opening and closing. This tag allows you to format a single paragraph of a document. You can, for example, set a specific font type or color for it. However, this is done with the help of an additional tag - FONT. At the same time, it will be placed inside the one that indicates the limits of the paragraph - this will allow you not to distribute the HTML command that reflects the preferred font type to other elements of the web page.
Tables are created using the TABLE tag. Using the corresponding attributes, you can determine the required number of columns and rows, set their width, the specifics of the borders, the size and color of the text font in the table.
The IMG tag is responsible for processing images by the browser. You can also place various attributes in it that regulate the size of the image, its position on the page.
Links to other web documents or files are indicated using the A tag. As a rule, attributes are located inside it, which indicate the fact that the structure of the web page is a hyperlink. This indicates the document, file or site to which it leads.
A common tag is FRAMESET. With it, you can divide the space of a web page into several areas - frames. In each of them, you can place links to individual web documents. That is, frames allow you to correctly place two or more pages on the same screen at the same time.
The story about the key elements of web pages and the subsequent story about the means of formatting them using the HTML language - something like this will be the algorithm of our answer to the question that the examiner asked us. If he contacted us, saying "list the main elements of the Web page," then we, using the appropriate methodology, will have every chance of revealing the topic. That is, by the term "elements" we can understand the key components of the structure of a web document, or content types - text, pictures, tables, frames, links that the webmaster forms using a tool such as the HTML language.
Specifics of web development tools
In addition to what has been said, we can clarify that there are a huge number of tags and attributes provided by the HTML standards. In addition to HTML, web developers can use additional formatting tools for hypertext documents. For example, using the JavaScript scripting language, you can create dynamic Web pages - that is, those in which the content is constantly updated (both due to the actions of the user himself, and in accordance with algorithms pre-written in scripts).
It would be useful to add that a web developer can use full-fledged programming languages in his work, such as, for example, Perl, PHP, Java, Python, with the help of which the possibilities of working with hypertext documents become even wider. The need for this may be due to the fact that the areas of application of web technologies today are very different. The tasks that modern developers face can be quite complex. For example, sometimes it is required to translate Web pages written in Russian into English. In this case, the developer's toolkit will be the most diverse.
Websites differ from each other:
Sizes (from a few pages to Web servers with gigabytes of information).
Design (general color scheme, font format, illustrations used, etc.).
Structure (system of links, connection of pages within the site, as well as connection with other sites).
At the same time, any web page is built from standard elements that can be divided into two groups:
Passive (illustrative) elements
animation
Active elements
input fields
switches
frames (English)frame- frame, frame) is a technology that allows you to divide a web page into several parts (windows) and makes it possible to change the content of each part, regardless of other parts. For example, the site's table of contents is often placed in one immutable frame, and the content in another.
Topic 9. Electronic communication. Email addresses
E-mail (E-mail from English. Electronic mail) is the main type of network services. Messaging is implemented through the system mail servers.
Each user on the mail server has its own mailbox is the location on the server disk where e-mail messages are stored. When going through the procedure for registering an e-mail address, the user receives a name (login) and a password, by which he later gets access to his mailbox. The user himself gives the name (login, login) to the mailbox. The server only makes sure that the name is unique.
An email address consists of two parts, separated by an @ sign (this sign is commonly called a “dog”):
the user's mailbox name (chosen by him, in our example - irina).
domain name of the mail server (in our example - mail. en) .
For example, irina@ mail. en
Email addresses are written without spaces using Latin letters, numbers or symbols (permitted for use).
According to the registration of the e-mail address on the user's computer, aAccount , which contains the information required to contact the mail service, including the username (login) and a password.
Based on this record, the server identifies the user.
Internet security Planning for protection
The object of the attack can be both information transmitted over the network, and a computer connected to the Internet.
It is impossible to ensure complete security when browsing the Internet, but planning ahead for protection greatly reduces the likelihood of attacks. Since the Internet is constantly evolving, new security issues are constantly emerging, so updating protection tools is a mandatory part of keeping a computer system up and running.
Defense lines:
Blocking possible attacks:
Use special software and hardware that blocks insecure and unnecessary data.
Use authentication and encryption.
Reducing sources of risk:
Use only those Internet services that you really need.
Use flawless software and keep it up to date.
Set up the software correctly (the less allowed, the more secure).
Do not advertise information about yourself online.
Limit access to your computer resources.
Preparing to recover from an attack:
Create and regularly update backups of your work data.
Always have software distributions on hand.
Authentication (fromrpEuropeanauthenticos- authenticity) - confirmation of authenticity.
Web page elements
Any web page contains a certain set of standard elements that are mandatory components of each Internet resource. Of course, the range and number of such objects may vary depending on the thematic focus of the site, the volume of materials published on it, as well as on the goals and objectives that the creator of this resource sets for himself. The layout of such elements, designing their relative position is one of the main tasks of the webmaster.
The first element of a web page that we need to consider is its title. It can be made in both text and graphic versions, however, in both cases, it should be located at the top of the document. Sometimes the heading is combined with a Cyrillic encoding selection menu and buttons for switching from the Russian-language to the English-language version of the site, if this web resource is presented in two languages. As a rule, the space allotted for placing an advertising banner is located directly in the subheading of the document. The inclusion of a banner in the upper part of the web page in most cases is a prerequisite for registering a site in banner exchange services - systems that advertise the resource you created in exchange for displaying advertisements of other members of the banner exchange network on your site's pages. The standard size of banners published under the title of a document is usually 468x60 pixels. If you are using a static page layout, your document's title width will be approximately 640 pixels: this value is primarily due to the need to ensure that the document displays correctly on monitors with a screen resolution of 640x480 pixels and to avoid horizontal scrollbars that make it difficult to see it. Obviously, the width of the banner in this case will be much smaller than the width of the header, due to which, in the part of the page where you plan to allocate space for advertising, an unused space is formed that can be filled with the logo of the company that owns this site or a link to the server that implements the web-site. hosting. Of course, the logo is not always necessary: as a rule, it is included in the web page only if the site has a commercial focus.
The main part of the document is occupied by the so-called text field - the area where the semantic content of the page is placed: meaningful informational text and illustrations. The listed elements are also called content (from English, content - content). The location of the text field depends primarily on how the web designer will place the rest of the document elements.
The next obligatory component of a web page is navigation elements - hyperlinks that link this document with other sections of the site. Navigation elements can be in the form of text strings, graphical objects, i.e. buttons, or active components, such as Java applets. The latter are the same buttons that, unlike their traditional sisters, are able to respond to mouse movements, performing some simple actions when hovering over them (turning on the backlight, creating a clicking effect, changing the shape, etc.). As I already mentioned in the Basic "postulates" of web design section, navigation elements should be positioned in such a way that they are always in sight, at hand, that is, so that the user does not have to rewind the page back if the text field takes several physical screens, and then look for links to other sections for a long time. The most established approach is to place navigation elements at the left border of the page.
At the bottom of the document, it is customary to publish information about the developers of the site and an e-mail address by which visitors to the resource can send their feedback, suggestions and wishes to the owners of the page. If the web page is a start document, a hit counter is also placed at the bottom of the web page - a small script that calls a CGI script installed on the server that records each time the document is opened in the user's browser, changing the value of the counter indicator. Thanks to this, the webmaster can easily determine the number of visitors who visited his page for any time. I note that the hit counter is set only on the first page called when accessing the site, it is absent in other resource documents. It is also not recommended to place several different counters on one page.
So, we have analyzed all the main components of a web page and their possible location relative to each other.
In practice, there are often websites in the design of which navigation elements are positioned along the right border of the screen. In this case, the text field is shifted to the left, the rest of the document components are arranged based on the principle of maximum aesthetics of their combination.
As can be seen from the figure, the logo in this case is placed on the same level as the title of the document, and the advertising banner is positioned relative to the center of the page. With this approach, it is recommended to maintain the graphic design of the header, logo and advertising field in a single color and artistic style - then the asymmetry of the position of these objects will not be so obvious and will not hurt the eyes of supporters of a strict, tabular design aesthetic.
Navigation elements can be placed not only near the right and left borders of the page, but also at the top of the document. This layout option, in my opinion, is most suitable for creating home pages: in this case, all page objects harmoniously fit into the specified width of the invisible table, while preparing the table itself is greatly simplified. The only drawback of this approach is the need to duplicate the navigation elements at the bottom of the document, because when scrolling vertically on the page, they disappear beyond the top of the screen, and to get to them, the user will have to rewind the screen, which, you see, is very inconvenient.
Of course, everything that has been said in this section is not a panacea, but a guide to action. I'm only trying to outline the general principles that apply when laying out the structure of a site, but the final decision is always left to the webmaster. Ultimately, no matter what design you use as the basis for your future project, the result of your work will still be correct: there is neither censorship on the Internet, nor any regulations that force the site creator into one or another rigid framework. An example of a design solution that does not fall into any of the above categories is the so-called mixed layout.
As you can see from the figure, in this example, part of the controls is built directly into the page header - we are talking about buttons for switching between the Russian and English versions of the site, as well as navigation buttons: this can be a link to the email address of the resource creators, duplicated at the bottom document, and a link to one of the thematic sections, for example, a news page. The main block of navigation elements is positioned relative to the left border of the document, but the Cyrillic encoding selection menu is located directly below the advertising banner at the top of the page. The text field is divided into two non-symmetrical columns, and the right one contains brief announcements of the thematic headings that make up the resource, including links to these sections.
Obviously, there can be a great variety of mixed layout options for a web page: specific solutions depend on the number of sections that make up the resource, the amount of text prepared for placement on the site, and, finally, on the imagination of the designer himself. It is only important that the appearance of the site does not cause complaints from visitors. In the end, only you as a developer, you and no one else, have the right to use all your abilities and talents and compose the page to your liking. The creators of some homepages, without hesitation, place a hit counter in the upper right corner of the document, write the name of the site in small, small print and publish it under an advertising banner, and for some reason the navigation elements are unexpectedly found right in the middle of the text block, between the story about themselves and photos of the favorite dog of the author of the project. For taste and color, as they say, there are no comrades. But personally, this disease seems incurable to me.
Any web page contains a certain set of standard elements that are mandatory components of each Internet resource. The layout of such elements, designing their relative position is one of the main tasks of the webmaster.
The first element of a web page is its header. It can be made in both text and graphic versions, however, in both cases, it should be located at the top of the document. Sometimes combined with the title Cyrillic encoding selection menu and buttons to switch from Russian to English version of the site if the given Web resource is presented in two languages.
Directly under the subheading of the document, as a rule, is the space allotted for placement advertising banner. The inclusion of a banner in the upper part of the Web page in most cases is a prerequisite for registering the site in banner exchange services - systems that advertise the resource you created in exchange for displaying advertisements of other members of the banner exchange network on your site pages.
The main part of the document is occupied by the so-called text field- a section where the semantic content of the page is located: meaningful informational text and illustrations. The listed elements are also called "content" (from English, content - content). The location of the text field depends primarily on how the web designer will place the rest of the document elements.
The next mandatory component of the web page are navigation elements- hyperlinks linking this document to other sections of the site. Navigation elements can be made in the form of text lines, graphic objects, that is, buttons, or active components.
Entities, such as Java applets. The latter are the same buttons that, unlike their "traditional" sisters, are able to respond to mouse movements, performing some simple actions when the cursor is hovered over them (turning on the backlight, creating a "click" effect, changing the shape, etc.). d.).
The most established approach is to place navigation elements at the left border of the page.
At the bottom of the document, it is customary to publish information about the site developers and email address, by which visitors to the resource can send their feedback, suggestions and wishes to the owners of the page.
If the web page is a start document, at the bottom of it is also placed visit counter is a small script that calls a CGI script installed on the server that records each opening of a document in the user's browser by changing the value of the counter indicator. It is not recommended to place several different counters on one page.
We all read a huge number of articles on how to select keywords and correctly list them, how to use keywords to make a site relevant to certain search queries. Let's take a closer look at the placement of keywords on web pages.
Knowing where and how to place keywords on a web page will determine the success or failure of your SEO campaign.
There are 5 elements on every web page where keywords should be placed:
- Page title (title tag)
- Page Keywords (Meta keywords tag)
- Page description (Meta description tag)
- Alternative text for pictures (Alt tag)
- Web page content (body tag)
Of all the above elements of a web page, the most important of all is the content of the page (point 5). More on this below.
For now, let's take this list in order.
Element #1. Page title (title tag)
First, consider the title of the page (title tag). This element is the very first and most important of all the other elements in the head block of any web page.
You can see the title of the web page in the very top line of the Internet browser. To verify this, fire up any browser, such as Internet Explorer, Opera, or Mozilla Firefox, go to any website, and compare the contents of the title tag with the top line in those browsers. Search engines use this tag for their own purposes - to collect information about the site and determine its subject matter, and also use it in the search results (SERP) as the title of the web page.
Remember! The title of a web page is a brief description of the web page.
In addition to the above, the content of the title tag is used as the title of the web page when adding it to the Internet browser's Favorites.
Element number 2. Page Keywords (Meta keywords tag)
Now let's talk about the keywords and description meta tags. Some time ago, the keywords meta tag was used when adding a site to the search engine index. But those times have passed. Now search engines simply ignore this tag, because. there are frequent cases of its use for "dirty" purposes. Some search engines pay attention to this tag to determine the subject of the site.
From what has been said, it follows that this tag is not required, but you can use it solely for its intended purpose.
Keywords should be separated by a comma. Place the most important keywords at the top of the list, then in descending order of importance. Search engines no longer pay attention to the case in which keywords are typed, so now all keywords can be printed in lower case.
Element number 3. Page description (Meta description tag)
The description meta tag is another site element where keywords should be placed. Search engines look at this tag for keywords and compare its content with the content of the site itself (the content of the body tag). A very important circumstance is that search engines use the content of the description tag as a description of a web page in search results (SERP).
This tag should contain a brief description of the web page, but no more than 50 words.
Element number 4. Alternative text for pictures (Alt tag)
Alt tags are a textual description of the content of the picture, i.e. if for some reason the picture is not loaded, and this picture has an alt-text, then this text will be displayed instead of the picture.
If the picture is loaded, and the picture also has alt-text, then we can see it when we hover the mouse cursor over the picture. Alt-tags are used for the convenience of those Internet users who for some reason do not display graphics.
Many search engines index the contents of this tag, so keywords may be contained there. Just don't forget that the alt text must match the image, describe it, be its text equivalent. Don't use an alt tag for markup images like separator lines, bullets...
Element number 5. Web page content (body tag)
So, finally, we got to the most basic element of the site - the body tag, the element whose content is of most interest to Internet users. Major search engines will no longer give you 1 SERP just because there are multiple occurrences of a keyword on your website page. Only the web page that is most relevant to a particular search query will appear there.
To achieve this, you should embed selected keywords into the code of web pages, respecting the frequency of their repetition. Proceed as follows: for each specific page, select 1-2 keywords and optimize the corresponding page for them.
Imagine that you are preparing a presentation of your new website or product. Then, for example, the slides of your PowerPoint presentation are paragraphs. They should be short and clear. Just like in a PowerPoint presentation, you can use lists to list the benefits of your site or product, each time focusing on selected keywords.
Incorporate your chosen keywords into the above 5 elements of every web page and you will improve your current rankings and results by a lot.
