The html web page is. Creation of Web pages. Learning the HTML language. Web Page Elements: Header

Before we begin our journey through HTML and CSS website building lessons, it is important to understand the differences between the two languages, the syntax of each language, and some basic terminology.

What are HTML and CSS?

HTML (HyperText Markup Language) defines the structure of content and its meaning, defining content such as headings, paragraphs or images. CSS (Cascading Style Sheets) is a presentation language created to style the appearance of content, using, for example, fonts or colors.

These two languages ​​- HTML and CSS - are independent of each other and should remain so. CSS should not be written inside an HTML document and vice versa. As a general rule, HTML will always represent the content, and CSS will always define the styling.

With this understanding of the difference between HTML and CSS, let's dive into HTML in more detail.

Basic HTML Terms

Before you start working with HTML, you'll likely come across some new and often strange terms. You'll become more familiar with all of them over time, but for now you should start with the three basic HTML terms - elements, tags, and attributes.

Elements

Elements specify how to define the structure and content of objects on a page. Some of the commonly used elements include multiple levels of headings (defined as elements with

before

) and paragraphs (defined as

); You can include elements in the list ,

, , And and many others.

Elements are identified using angle brackets<>, surrounding the element name. So the element will look like this:

Tags

Adding angle brackets< и >creates what is known as a tag around the element. Tags most often occur in pairs of opening and closing tags.

The opening tag marks the beginning of the element. It consists of a symbol<, затем идёт имя элемента и завершается символом >; For example,

.

The closing tag marks the end of the element. It consists of a symbol< с последующей косой чертой и именем элемента и завершается символом >; For example,

.

The content that appears between the opening and closing tags is the content of that element. The link, for example, will have an opening tag and closing tag. What is between these two tags will be the content of the link.

So, the link tags will look something like this:

...

Attributes

Attributes are properties used to provide additional information about the element. The most common attributes include the id attribute, which identifies the element; the class attribute, which classifies the element; the src attribute, which specifies the source of the embedded content; and an href attribute, which specifies a link to the associated resource.

Attributes are defined in the opening tag after the element name. In general, attributes include a name and a value. The format for these attributes consists of the attribute name followed by an equal sign, followed by the attribute value in quotes. For example, element with href attribute will look like this:

Shay Howe

Demonstration of basic HTML terms

This code will display the text "Shay Howe" on a web page and when clicked on this text will take the user to http://shayhowe.com. The link element is declared using an opening tag and closing tag covering the text, as well as the attribute and value of the link address declared via href="http://shayhowe.com" in the opening tag.

Rice. 1.01. HTML syntax in outline form includes element, attribute and tag

Now that you know what HTML elements, tags, and attributes are, let's take a look at our first web page. If anything looks new here, don't worry - we'll break it down as we go.

Customizing the HTML Document Structure

HTML documents are simple text documents saved with the extension .html rather than .txt. To start writing HTML you first need text editor, which is convenient for you to use. Unfortunately, this does not include Microsoft Word or Pages, since these are complex editors. The two most popular text editors for writing HTML and CSS are Dreamweaver and Sublime Text. Free Alternatives also Notepad++ for Windows and TextWrangler for Mac.

All HTML documents contain a required structure, which includes the following declarations and elements: , , And .

Document type declaration oris located at the very beginning of an HTML document and tells browsers which version of HTML is being used. Since we will be using latest version HTML, our document type will be simply. After this comes the element indicating the beginning of a document.

Inside element defines the top of the document, including various metadata (accompanying information about the page). Content inside an element does not appear on the web page itself. Instead, it may include the title of the document (which appears in the title bar of the browser window), links to any external files, or any other useful metadata.

All visible content of the web page will be contained in the element . The structure of a typical HTML document looks like this:

Hello World!

This is a web page.

Demonstration of HTML document structure

This code shows the document, starting with the document type declaration,, then immediately comes the element . Inside elements are coming And . Element contains the page encoding via the tag and the title of the document through the element

Time to check our work and see how our HTML and CSS work together. Opening the index.html file (or refreshing the page if it's already open) in the browser should show a slightly different result than before.

Rice. 1.04. Our Styles Conference site with CSS reset

Demo and source code

Below you can view the Styles Conference website in its current state, and also download source site at the moment.

Summary

So, everything is fine! We took some big steps in this tutorial.

Just think, now you know the basics of HTML and CSS. As we continue and you spend more time writing HTML and CSS, you will become much more comfortable working with these two languages.

To recap, we covered the following:

• Difference between HTML and CSS.
• Introduction to HTML elements, tags, and attributes.
• Setting up the structure of your first web page.
• Introduction to CSS selectors, properties and values.
• Working with CSS selectors.
• Pointer to CSS from HTML.
• The importance of CSS reset.

Now let's take a closer look at HTML and get a little familiar with the semantics.

Resources and links

• Common HTML terms via Scripting Master
• CSS Terms & Definitions via Impressive Webs
• CSS Tools: Reset CSS via Eric Meyer

The bulk of content presented on the Internet is web pages. This is historically the very first type of document intended for placement in a virtual network space, but it still remains relevant and has virtually no competing formats. What is the structure of web pages? What web development tools are they used to create?

What is a Web page?

“List the main elements of a Web page,” the examiner tells us in a computer science lesson. What can we say to him in response? First of all, we’ll talk about what a web page is in principle.

According to the generally accepted definition among IT specialists, this is a document that is intended to be opened in a specialized program - a browser, and which contains data for display on the computer screen using the appropriate type of software of various useful content - texts, links, graphics, videos, music and etc. A web page is a text document. The corresponding data for the browser is letters, numbers and Special symbols, used as markup language elements - 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.

The 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 it can contain links to them in its structure. Thus, the web page can be called the main component of the site in terms of its dominant role in displaying virtual content in front of 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 websites - when Web page markup languages ​​first appeared - did not include relevant content. Before the user's eyes there was only text and links.

The principle of using hypertext

So, a Web page is a document compiled on HTML language, which is used to mark up hypertext. 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 fast access to another - through links. This is impossible in a regular book - there is “simple text”. To access the desired page, the reader must make several turns, first reading the table of contents or footnotes. In hypertext mode, most of the work is done by the computer, using 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 quite correctly begin to talk about the components of the corresponding document that are created using the HTML markup language. Therefore, first, 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.

Essential elements of this language- these are tags. In most cases, they are paired - there is an opening one, and there is a closing one. The former are indicated using only angle brackets. The second ones are similar, but before the second bracket there is a slash - the symbol /. The browser is able to recognize them, and therefore displays the contents 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 in small letters. This is a standard that has become established among IT specialists. The browser will, of course, recognize the HTML command in any letters, but web developers are still advised to adhere to the marked tag writing scheme. This will make it easier, for example, for other specialists to improve the web page.

Attributes

Other important elements of the HTML language are attributes. With their help, the creator of a web page can set the properties of the content - for example, font height, its color, position relative to the page. The same goes for pictures, videos and other multimedia components. Attributes are written within the opening tag.

Content

Between the opening and closing tags lies 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. This could be text, a link, a picture, a video or another multimedia element.

Web Page Elements

“So list the main elements of a Web page, finally!” - the teacher repeats. “With pleasure,” we answer him. What is included in the structure of the type of document 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, may be different. And this is a feature of the HTML language: the desired image on a Web page can be displayed different ways. At the same time, they can be either equivalent in terms of the labor costs of the web page creator, or require a different amount of effort and time for their implementation.

Web Page Elements: Header

Standard elements of a Web page, as surprising as it may sound, are presented in very small quantities. In fact, there are only two of them - the title and the main body of the document. At the same time, each of them can have a rather complex structure.

What are the specifics of the title? It is located at the very top of the web page. The HTML code that forms the header is usually intended to “encrypt” only the text, but if necessary, small graphic inserts can also be placed in the corresponding element. And that, 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 that's not true. Web page titles are very significant from the point of view of site indexing in search engines - Yandex, Google. This element must be completely 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 header content, then 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 specific encoding. How can you ensure that your web document meets this criterion? Very simple. HTML algorithms must be placed in the document header structure, instructing 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 part of the web page

The main part of the web document opens with the BODY tag and closes with the corresponding element, including a slash. Moreover, between the opening and closing tags there can be a huge number of additional hypertext markup language commands. 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 corresponding types of content has its own tags. The structure of the main part of a web document may contain HTML commands, which are also used to format the text - for example, giving the font a certain color, size and other properties.

Let's look at the specifics of some commonly used HTML tags. In fact, they form the main elements of a 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 given some of them above - in particular those with the help of which the browser reads the headers of web pages and determines where the main part 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 using an additional tag - FONT. In this case, it will be placed inside the one that marks the boundaries of the paragraph - this will prevent the HTML command reflecting the type of preferred font from being distributed 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, specific borders, size and font color of the text in the table.

Responsible for processing images by the browser. You can also place various attributes in it that regulate the size of the image and its position on the page.

Links to other web documents or files are indicated using the A tag. As a rule, there are attributes inside it that indicate the fact that there is a hyperlink in the structure of the web page. In this case, the document, file or site to which it leads is indicated.

A common tag is FRAMESET. With its help, you can divide the space of a web page into several areas - frames. In each of them you can use separate web documents. That is, frames allow you to correctly position two or more pages on one screen at the same time.

A story about the key elements of web pages and a subsequent story about the means of formatting them using the HTML language - approximately this will be the algorithm for our answer to the question that the examiner asked us. If he came to us saying “list the main elements of a Web page,” then we, using the appropriate methodology, will have every chance of uncovering the topic. That is, by the term “elements” we can understand the key components of the structure of a web document, or the types of content - text, pictures, tables, frames, links that the webmaster generates using a tool such as the HTML language.

Specifics of web development tools

In addition to what has been said, we can explain that there are a huge number of tags and attributes provided by HTML standards. In addition to HTML, web developers can use additional formatting tools for hypertext documents. For example, with using JavaScript 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 challenges facing modern developers can be quite complex. For example, sometimes it is necessary to translate Web pages written in Russian into English. In this case, the developer's tools will be very diverse.

Goal of the work: familiarizing students with the basic concepts of the HTML language, the structure of an HTML document, mandatory tags, comments, methods of text formatting, physical and logical styles, acquiring skills in creating simple static Web documents.

In laboratory classes, we will use the Notepad text editor to prepare HTML files, and the Internet Explorer browser as a tool for monitoring what has been done.

Theoretical information

Basic Concepts

Hypertext- an information structure that allows you to establish semantic connections between text elements on a computer screen in such a way that you can easily transition from one element to another. In practice, in hypertext, some words are highlighted by underlining or coloring them in a different color (hyperlinks). Highlighting a word indicates a connection between this word and some document in which the topic associated with the highlighted word is discussed in more detail. A separate document, written in HTML format, is called:

HTML document;

Web document;

Web page.

Such pages are usually in NTM or HTML format.

A group of Web pages belonging to one author or one IEDV body and interconnected by common hyperlinks forms a structure called a Web node or Web site. Each HTML page has its own unique URL - adpec on the Internet.

Frame (Frame) - a term that has two meanings. The first value is the document area with its own scroll bars. The second is a 0DNN0H image in an animated graphic file (frame).

Applet (Applet) - a program transferred to the client computer as a separate file and launched when viewing a Web page.

Script (Script) , or script, is a program included in a Web page to expand its capabilities. In certain situations, the Internet Explorer browser displays the message: “Allow script execution on the page?” In this case we mean scripts.

CGI (Common Gateway Interface) - a general name for programs that, working on a server, allow you to expand the capabilities of Web pages. Without such programs it is impossible to create interactive Web pages.

Browser (Browser) - a program for viewing Web pages.

Element- HTML language design. You can think of it as a container that holds data and allows you to format it in a certain way. Any Web page is a set of elements. One of the main ideas of hypertext is the possibility of nesting elements. For example:

<Начало элемента>The content of the element, the data that the element formats

Tag(in English tag - label, descriptor, label) - the starting or ending marker of an element. Tags define the boundaries of the action of elements and separate elements from each other. In the text of a Web page, tags are enclosed in angle brackets< >, and the end tag is always followed by a slash. Text not between these brackets (< >), is completely visible when viewed in a browser. For example:

<Начальный тег>The content of the element, the data that

formats an element

<Р>This text will be located in a separate paragraph

Any Web page is a set of elements. One of the basic principles of HTML is the ability to nest one element within another.

Attribute- parameter or property of an element. Attributes are located inside the start tag and are separated from each other by spaces. If the cement contains text, then the attributes can set the font color and size, alignment text paragraph and so on. If the element contains a picture, then the attributes can specify the size of the picture, the presence and size of a frame around the picture, etc.

<Р align="center">This text will be aligned to the center of the screen

This example again uses a tag that defines the beginning and end of a paragraph. However, the start tag contains an align attribute, which sets the text alignment to the center of the screen.

Note:

Any useful information must appear between the start and end tags indicating its format;

All attributes are located in the start tag;

For ease of use, you can write the start tag with an uppercase (capital) letter (P), and the end tag with a lowercase (small) letter (/p), although this is not necessary;

Not all elements require an end (closing) tag;

Start writing each new element on a new line. Indent nested elements (tab). This again is not necessary, but it will make your job much easier.

A web page is a specially formatted document that can include text, graphics, hyperlinks, audio, animation, and video.

Several web pages that share a common theme, design, and links, and usually reside on the same web server, form a website.

Web site (from English. website: web- “web, network” and site- “place”, literally “place, segment, part of the network”) - a collection electronic documents(files) of an individual or organization in computer network, united under one address (domain name or IP address).

All sites together constituteWorld Wide Web, where communication (web) unites segments of information from the world community into a single whole - a database and communications on a planetary scale. A protocol was specially developed for direct access of clients to sites on servers HTTP .

A website is structured like a magazine that contains information on a particular topic or issue. Just as a magazine consists of printed pages, a Web site consists of computer Web pages.

The program that displays a web page is called a web browser.

Web sites are created using the hypertext document markup language HTML. HTML technology consists of inserting control characters (tags) into a regular text document and as a result we get a Web page. The browser, when loading a Web page, presents it on the screen in the form specified by tags.

HTML allows you to:

· format text;

· include images and multimedia in the document;

· Using this language, hypertext links to other Web pages are created.

HTML is used to create file information content and to define the structure and format of Web pages. Since HTML files are plain text files, such a file can be sent to virtually any computer.

To create Web pages, simple text editors are used that do not include text formatting control characters in the created document. As such an editor in Windows you can use standard application"Notebook".

Typically, a Web page file has a .html or .htm extension.

In addition, there are many technologies in which the basic steps for creating websites are already automated; all that remains is to make changes in accordance with your topic.

To view an HTML page, simply enter its URL in the address bar of your Web browser and then follow the hyperlinks. But this is precisely the main problem - how to find out the page address? Most often it happens that you know what you need to find, but you don’t know where exactly to look. To solve this problem, there are special search engines. From the user's point of view, search system- this is a regular site on home page which contains links to other sites, divided into categories (“Sports”, “Business”, “Computers”, etc.). In addition, the search engine allows the user to enter several keywords and returns links to pages containing those keywords.

Web site

A website (English Website, from web - web and site - “place”) is a collection of documents of a private person or organization united under one address on a computer network. By default, it is assumed that the site is located on the Internet. All Internet websites collectively make up the World Wide Web. The HTTP protocol was specially developed for clients to directly access websites on servers. Websites are otherwise called the Internet representation of a person or organization. When they say “your own page on the Internet,” it means an entire website or a personal page as part of someone else’s site. In addition to websites on the Internet, WAP sites for mobile phones are also available.

Initially, websites were collections of static documents. Currently, most of them are characterized by dynamism and interactivity. For such cases, experts use the term web application - ready-made software package to solve website problems. A web application is part of a website, but a web application without data is only technically a site.

In most cases on the Internet, one website corresponds to one domain name. Exactly according to domain names sites are identified in global network. Other options are possible: one site on several domains or several sites under one domain. Typically, several domains are used by large sites (web portals) to logically separate different types of services provided (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). There are also cases where separate domains are allocated for different countries or languages. For example, google.ru and google.fr are logically Google sites in different languages, but technically they are different sites. Combining several sites under one domain is typical for free hosting. To identify sites, the address contains a tilde and the site name after the host: example.com/~my-site-name/.

Popular in the category:

How to create a karaoke clip on a computer?

read

The Origin app is required to play, but it is not installed FIFA...

read

Registering a personal page on the social network Facebook

read

How to Run a Simple Nmap Nmap Scan

read