home › Education › What are the main elements of a web page? Basic elements of web pages. HTML language structure: tags

What are the main elements of a web page? Basic elements of web pages. HTML language structure: tags

Any web page contains a certain set of standard elements that are mandatory components of each resource Internet networks. 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 title. It can be made in either text or graphic form, but 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 the Russian to the English version of the site, if this Web resource is presented in two languages.

Directly in the subtitle of the document, as a rule, is the space allocated for placing advertising banner. Including a banner at the top of the Web page in most cases is a prerequisite for registering a site in banner exchange services - systems that advertise the resource you have created in exchange for displaying advertisements of other participants in the banner exchange network on the pages of your site.

The main part of the document is occupied by the so-called text field- the area where the semantic content of the page is located: content information text and illustrations. The listed elements are also called “content” (from English, content). The location of the text field depends primarily on how the web designer will place the remaining elements of the document.

The next mandatory component of the web page is navigation elements- hyperlinks connecting this document with other sections of the site. Navigation elements can be made in the form of text strings, graphic objects, that is, buttons, or active components.

nents, for example Java applets. The latter are the same buttons that, unlike their “traditional” sisters, can respond to mouse movements, performing some simple actions when the cursor is hovered over them (turning on the backlight, creating a “click” effect, changing shape, etc.). d.).

The most established approach is to place navigation elements on the left edge of the page.

It is customary to publish at the bottom of the document information about the site developers and address Email , through which resource visitors can send their responses, suggestions and wishes to the page owners.

If the web page is a starting document, at the bottom of it is also placed hit counter- a small script that calls a CGI script installed on the server, which records each opening of a document in the users browser, changing the value of the counter indicator. It is not recommended to place several different counters on one page.

Websites differ from each other:

Sizes (from several 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, which can be divided into two groups:

Passive (illustrative) elements

animation

Active elements

input fields
switches

Framesframe- frame, framework) 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 the other parts. Thus, the table of contents of a site is often placed in one immutable frame, and the content in another.

Topic 9. Electronic communication. Email addresses

Electronic mail (E-mail) is the main type of network service. Messaging is carried out through the system mail servers.

For each user on the mail server, there is a separate Mailbox is the location on the server disk where email messages are stored. When completing the email address registration procedure, the user receives a login and password, which will then be used to gain access to his mailbox. The name (login) of the mailbox is given by the user himself. The server only makes sure that the name is unique.

An email address consists of two parts, separated by the @ sign (this sign is commonly called a “dog”):

Name mailbox user (selected by him, in our example - irina).

Domain name mail server(in our example - mail. ru) .

For example, irina@ mail. ru

Email addresses are written without spaces using Latin letters, numbers or symbols (allowed for use).

Based on the registration data of the email address on the user’s computer, aAccount , which contains information necessary to contact the mail service, including the username (login) and password.

Based on this record, the server identifies the user.

Internet Security Planning for Protection

The target of an attack can be both information transmitted over the network and a computer connected to the Internet.

It is impossible to ensure complete security when using the Internet, but advance security planning significantly reduces the likelihood of attacks. Because the Internet is constantly evolving, new security issues constantly arise, so updating security tools is an essential part of maintaining the health of your computer system.

Lines of defense:

Blocking possible attacks:

Use special software and hardware that blocks unsafe and unnecessary data.

Use authentication and encryption.

Reducing sources of risk:

Use only those Internet services that you really need.

Use bug-free software and keep it updated regularly.

Configure the software correctly (the less allowed, the higher the security).

Do not advertise information about yourself online.

Limit access to your computer resources.

Preparing to recover from an attack:

Create and update regularly backups working data.

Always have software distribution kits at hand.

Authentication (fromrpecologicalauthenticos- authenticity) – confirmation of authenticity.

We have all read a huge number of articles about how to select keywords and correctly compile a list of them, how to use keywords to create a website that is relevant to certain search queries. Let's take a closer look at placing keywords on web pages.

Knowing where and how to place keywords on a web page can make or break your SEO company.

There are 5 elements on every web page where you should place your keywords:

Page title (title tag)
Page keywords (Meta tag keywords)
Page description (Meta description tag)
Alternative text for images (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 look at this list in order.

Element #1. Page title (title tag)

First, let's look at the page title (title tag). This element is the 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, launch any browser, for example, Internet Explorer, Opera or Mozilla Firefox, go to any website and compare the content of the title tag with the very 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 search engine results (SERP) as the name of the web page.

Remember! The title of a web page is its short description.

In addition to the above, the contents of the title tag are used as the title of the web page when adding it to the Internet browser Favorites.

Element No. 2. Page keywords (Meta tag keywords)

Now let's talk about the keywords and description meta tags. Some time ago, the Meta keywords tag was used when adding a site to the search engine index. But those times are gone. 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 all that 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 beginning 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 typed in lowercase.

Element No. 3. Page description (Meta description tag)

The description meta tag is another site element in which keywords should be placed. Search engines scan this tag for the presence of keywords, and also compare its contents with the content of the site itself (the contents of the body tag). A very important circumstance is that search engines use the contents of the description tag as a description of the web page in the search results (SERP).

This tag should contain a brief description of the web page, but no more than 50 words.

Element No. 4. Alternative text for images (Alt tag)

Alt tags are a text description of the contents of the image, i.e. if for some reason the picture does not load, and this picture has 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 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 it may contain keywords. Just remember that the alt text must correspond to the image, describe it, and be its text equivalent. Do not use the alt tag with markup images such as dividing lines, bullets...

Element No. 5. Web page content (body tag)

So, we finally got to the most basic element of the site - the body tag, the element whose content is most interesting to Internet users. The major search engines will no longer give you a 1st position in the SERPs just because there are multiple repetitions of a keyword on a page on your website. Only the most relevant to a specific search query webpage.

To achieve this, you should implement selected keywords into the code of web pages, observing 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, your slides PowerPoint presentations– 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.

Implement selected keywords into the above 5 elements of each web page, and you will greatly improve your current rankings and results.

HTML language

Web pages can exist in any format, but the standard is Hyper Text Markup Language, a hypertext markup language designed to create rich text rich in images, sound, animation, video clips and hypertext links to other documents scattered throughout the Web. space, and located on the same server or being an integral part of the same Web project.

You can work on the Web without knowledge HTML language, since HTML texts can be created by various special editors and converters. But writing directly in HTML is not difficult. It may even be easier than learning an HTML editor or converter, which are often limited in their capabilities, buggy, or produce poor HTML that doesn't work across platforms.

The HTML language comes in several flavors and continues to evolve, but HTML constructs will likely continue to be used in the future. By learning HTML and understanding it more deeply, creating a document at the beginning of learning HTML and expanding it as much as possible, we are able to create Web pages that can be viewed by many Web browsers, both now and in the future. This does not exclude the possibility of using other methods, such as the advanced method provided by Netscape Navigator, Internet Explorer, or some other programs.

Working with HTML is a way to learn the ins and outs of creating documents in a standardized language, using extensions only when really necessary.

HTML has been ratified by the World Wide Web Consortium. It is supported by several widely used browsers, and will probably be the basis of almost everything software, which is related to the Web.

Principles of creating a web page, basic elements of a web page

To create Web pages, a special language called HTML (HyperText Markup Language) is used. This language defines a set of special commands called tags that are used to specify the formatting or purpose of certain elements of a Web page. Special tags are used for placement on Web pages graphic images, audio and video clips and other so-called embedded objects.

Web pages are ordinary text files created in standard Notepad or a similar simple text editor. And they contain text, the same text that you want to put on the pages, only marked up in a special way. In order to various programs In order for Web browsers to display the same Web page correctly, HTML must be standardized.

In practice, the HTML standard is greatly influenced by the presence of tags proposed and supported by the most famous browsers, such as Microsoft Internet Explorer and Google Chrom. These tags in this moment may or may not be part of the current HTML specification.

There are editing tools designed specifically for writing HTML. They save time because they contain keys quick access for performing repetitive operations, such as setting initial settings for documents, tables, or simply applying styles to text. HTML editors differ from WYSIWYG authoring tools in that they require knowledge of the rules for compiling HTML manually; editors only simplify and speed up this process. In addition to the WWWC-standardized HTML tags (standard tags), Web browsers support many non-standard tags. These tags were introduced by the developers of a particular Web browser program to gain an advantage over competitors. They hoped that these proprietary extensions would later become part of the HTML standard, but these hopes were never realized. However, the tags remain and are still supported.

To create Web pages you will need any browser - Internet Explorer or Google Chrome Mozilla Firefox, or better yet both, since many HTML elements are displayed differently in different viewing programs and it is highly desirable to control this difference.

In addition, you need any text editor, for example, to prepare HTML files, and a browser to view and control what has been done.

In order to create a Web page, the first step is to create a site structure. A website is a server with a unique name and permanent address, physically connected to the WWW, or virtually hosted on another, larger server.

After creating the site structure, run text editor Word, create new document and save it as a Web page, then proceed to create a Web page. It makes our work easier and better. In it we determine the timing of creating a Web site, its debugging, its subject matter, as well as its filling.

There are several simple rules that allow the site interface to be understood by the visitor [No. 10].

1. The site should not contain useless information, the font should be easy to read. Graphic elements had to be clear, expressive and fast to load.

2. The human eye scans website pages from top to bottom. The most attention is focused on the top left side of the page. Therefore, at the top of the site page, as a rule, the most important information: company name, logo, website name, etc.

3. A site visitor should easily find the information he is interested in and be able to obtain comprehensive information (description in text plus several photographs).

4. Information should be distributed among groups. It is possible to provide the ability to search for products by name and description.

5. The website must have information sections:

with information about the company (field of activity, address, contact numbers, etc.);

Basic elements of Web pages:

1. Header / Logo (Header)

3. Content/Contents (Text field)

4. Navigation elements

5. Information about the site developers

Any Web page contains a certain set standard elements, which are mandatory components of every Internet resource.

The first element of a Web page that we have to look at is its title. The logo or name of the site plays the same role for it as a sign at the entrance to any institution. The Internet is another matter: here the main method of movement is teleportation, and therefore I need to see this “sign” on every page.

The main part of the document is occupied by the so-called Text field - the area where the semantic content of the page is located: meaningful information text and illustrations.

The listed elements are also called “Content” (from English, content - Content). The placement of the text field depends primarily on how the Web designer places the rest of the document elements.

Figure 1. Example of site content

Figure 2. Contact information

Before you start creating your website, take a very responsible approach to the problem of arranging page elements. In general, a web page is divided into page content, navigation, and related information. These elements are in turn divided into smaller elements.

As a result, the sequence of actions for developing a Web site comes down to the following simple algorithm:

1. Setting goals and defining main tasks.

2. Creating a list of future thematic sections.

3. Development of the logical and physical structure of the resource.

4. Preparation of a design sketch, site layout, invisible layout table.

5. Preparation of text materials.

6. Preparation of graphic materials in vector form.

7. Export vector drawings to raster format.

8. Optimization of all images.

9. Creating Web page templates.

10. Assembling Web pages and debugging code.

11. Checking the display identity of Web pages with different screen resolutions and color palettes and different browsers.

Any web page contains a certain set of standard elements that are mandatory components of every 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 have to look at is its title. It can be made in either text or graphic form, but in both cases it should be located at the top of the document. Sometimes the header is combined with a menu for selecting the Cyrillic encoding and buttons for switching from the Russian to the English version of the site, if this web resource is presented in two languages. Directly under the document's subtitle, as a rule, is the space allocated for placing an advertising banner. Including a banner at the top of the web page in most cases is a prerequisite for registering a site in banner exchange services - systems that advertise the resource you have created in exchange for displaying advertisements of other participants in the banner exchange network on the pages of your site. The standard size of banners published under the document title is usually 468x60 pixels. If you're using a static page layout, your document's header width will be approximately 640 pixels, primarily to ensure that your document displays correctly on 640x480-pixel monitors and to avoid having a horizontal scroll bar that makes it difficult to view. Obviously, the width of the banner in this case will be significantly less than the width of the header, due to which in the part of the page where you plan to allocate space for advertising, unoccupied space will appear, which can be filled with the logo of the company that owns this site or a link to the server that implements the web. hosting. Of course, a logo is not always necessary: as a rule, it is included in a 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 located: meaningful information text and illustrations. The listed elements are also called “content” (from English, content). The location of the text field depends primarily on how the web designer will place the remaining elements of the document.

The next mandatory component of a web page are navigation elements - hyperlinks that connect this document with other sections of the site. Navigation elements can be made in the form of text strings, graphic objects, that is, buttons, or active components, such as Java applets. The latter are the same buttons that, unlike their “traditional” sisters, can respond to mouse movements, performing some simple actions when the cursor is hovered over them (turning on the backlight, creating a “click” effect, changing shape, etc.). d.). As I already mentioned in the section “Basic “postulates” of web design”, 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 occupies several physical screens in height, then spend a long time looking for links to other sections. The most established approach is to place navigation elements on the left edge of the page.

At the bottom of the document, it is customary to publish information about the site developers and an email address to which visitors to the resource can send their responses, suggestions and wishes to the page owners. If the web page is the start document, a visit counter is also placed at the bottom of it - a small script that calls a CGI script installed on the server, which records each opening of the document in the users browser, changing the value of the counter indicator. Thanks to this, the webmaster can easily determine the number of visitors who visited his page over a period of time. I note that the visit counter is installed only on the first page called when accessing the site; it is not present in other documents of the resource.

So, we have examined all the main components of a web page and their possible location relative to each other. An example of a website layout containing a complete set of the components described above is shown in Fig. 3.6. It selects the navigation elements to be positioned along the left edge of the document.

Rice. 3.6. An example of a web page layout with left positioning of navigation elements

In practice, we often encounter websites in which the design of navigation elements is positioned along the right edge of the screen. In this case, the text field is shifted to the left, the remaining components of the document are arranged based on the principle of maximum aesthetics of their combination. An example of such a site implementation is shown in Fig. 3.7.

Rice. 3.7. An example of a web page layout with right-hand positioning of navigation elements

As can be seen from the figure, in this case the logo is placed on the same level as the document title, 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 field for advertising 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 is most suitable, in my opinion, when creating home pages: in this case, all page objects “fit” harmoniously into the given 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, since when scrolling vertically on the page, they disappear behind the top border of the screen, and to get to them, the user will have to “rewind” the screen, which, you see, is very inconvenient. An example of the design of a page with top navigation elements is shown in Fig. 3.8.

Rice. 3.8. Example of a web page layout with top positioning of navigation elements

Of course, everything that has been said in this section is not a panacea, but a guide to action. I am trying to outline only the general principles that are used when laying out the structure of a site, but the final decision always remains with 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: on the Internet there is neither censorship nor any regulations that force the site creator into one or another strict framework. An example of a design solution that does not fall into any of the above categories is the so-called mixed layout, an approximate diagram of which is shown in Fig. 3.9.

As can be seen from the figure, in this example some of the control elements are built directly into the page header - we're talking about about buttons for switching between the Russian and English versions of the site, as well as about navigation buttons: this can be a link to the email address of the resource creators, duplicated at the bottom of the 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 menu for selecting the Cyrillic encoding is located directly below the advertising banner at the top of the page. The text field is divided into two asymmetrical columns, and the right one contains brief announcements of the thematic sections 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: concrete solutions depend on the number of sections that make up the resource, the volume of text prepared for placement on the site and, finally, on the imagination of the designer himself. It is only important that appearance the site did not cause any complaints from visitors. In the end, only you as a developer, you and no one else, have the right to show all your abilities and talents and arrange the page to your own taste. The creators of some home pages, without tormented by doubts, place the hit counter in the upper right corner of the document, the name of the site is written in small, neat font and published under an advertising banner, and for some reason navigation elements unexpectedly appear right in the middle of the text block, between the story about yourself and photographs of the beloved dog of the author of the project. There are no comrades for taste and color, as they say. But personally, this disease seems incurable to me.