The html web page is. Creation of Web pages

The html web page is. Creation of Web pages
The html web page is. Creation of Web pages
22.02.2022

HTML (HyperText Markup Language) is a special language for formatting text documents (it is also called document markup language - WWW document viewer). HTML is a fairly simple set of commands that describe the structure of a document. HTML allows you to select separate logical parts in the text (headings, paragraphs, lists, etc.), place a separately prepared photo or picture on a Web page, organize links on the page to link to other documents.

HTML does not specify specific and precise document formatting attributes, such as Microsoft Word. The specific type of document is finally determined only by the program- browser on your computer. The need for just such an approach is associated with the heterogeneity of the hardware and software computers connected to the Internet. HTML is also not a programming language, but web pages may include embedded programs - scripts in Javascript and Visual Basic Script and programs- applets in the Java language.

From point of view Windows user, A web page is simply an *.htm or *.html file located on an Internet server, in local network or on your machine's hard drive.

Remember that HTML is not a programming language, it is only for marking up documents. Those. in fact, when creating an HTML page, you simply edit text using tags in much the same way as in a regular text editor. Each tag has its own property, but they are all enclosed between angle brackets "<" и ">", For example, , .

All tags in HTML are divided into two types - these are paired and unpaired. Pairs are those whose opening tag requires an end tag. Closing tags in html are marked with a slash and written like this . Unpaired tags do not require a closing tag. An example of such tags is the line break tag.
. There are also mandatory tags, which must be used on all pages, and optional tags, which are used as desired.

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 specialists, this is a document that is intended 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 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.

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 fast access to another through links. In a regular book, this is impossible - there is “plain text”. To gain access to desired page the reader must make several flips, having previously familiarized himself with 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 a story about the components of the corresponding document that are created using the language HTML markup. 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.

Essential elements given 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 may include a series 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 META tag, which, like the others, is 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, for the purpose detailed study of what the elements of a Web page are, let's take a closer look at 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.

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 that 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 it is possible to separate 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 funds formatting hypertext documents. For example, 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 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.

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

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

Web site ait (from English. website: web- "web, network" and site- "place", literally "place, segment, part in the network") - a set of electronic documents (files) of a private person or organization in computer network, combined under one address (domain name or IP address).

All sites together make up the world wide web , where communication (web) unites segments of information of the world community into a single whole - a database and communications on a planetary scale. For direct access of clients to sites on servers, a protocol was specially developed http .

A website is structured like a magazine that contains information about a topic or issue. Just as a magazine is made up of printed pages, a Web site is made up of computer-generated Web pages.

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

The creation of Web sites is implemented using the markup language of hypertext documents HTML. HTML technology is that control characters (tags) are inserted into a plain 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 the tags.

HTML allows:

Formatting text

include images, multimedia in the document;

This language creates hypertext links to other Web pages.

HTML is used to create the information content of a file 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 document being created. As such an editor in Windows, you can use standard application"Notebook".

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

In addition, there are many technologies in which the main steps for creating sites are already automated, it remains only to make changes in accordance with their subject matter.

Viewing an HTML page is as simple as typing its URL in your Web browser's address bar and then following the hyperlinks. But this is precisely the main problem - how to find out the address of the page? Most often it happens that you know what you need to find, but you don’t know exactly where 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 the main page of which there are links to other sites broken down by headings ("Sport", "Business", "Computers", etc.). In addition, the search engine allows the user to enter multiple keywords and returns links to pages containing those keywords.

Web site

Website (eng. Website, from web - web and site - "place") - a set of documents of a private person or organization united under one address in 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 designed for direct client access to websites on servers. Websites are otherwise known as the Internet representation of a person or organization. When they say "your own page on the Internet", it means a whole 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 software package to solve the problems of the website. A web application is part of a website, but a web application without data is only technically a website.

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

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

What is HTML and CSS?

HTML (HyperText Markup Language) defines the structure of content and its meaning by defining such content as, for example, headings, paragraphs, or images. CSS (Cascading Style Sheets) or Cascading Style Sheets is a presentation language designed to design 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 its 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 are likely to come across new and often strange terms. You'll get to know all of them in more detail 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

); items can be added to 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 an element. Tags most often occur in pairs of opening and closing tags.

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

.

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

.

The content between the start and end 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 would 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 the href attribute, which specifies a link to the related 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 equals sign, followed by the attribute's value in quotation marks. For example, element with the href attribute would 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, it will take the user to http://shayhowe.com. The link element is declared with a start tag and closing tag enclosing text, as well as the attribute and value of the address of the link declared with href="http://shayhowe.com" in the opening tag.

Rice. 1.01. Schema HTML syntax 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 together. If something looks new here, don't worry - we'll decipher it as we go.

Customizing the Structure of an HTML Document

HTML documents are plain 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, as these are complex editors. The two most popular text editors for writing HTML and CSS are Dreamweaver and Sublime Text. Free alternatives See also Notepad++ for Windows and TextWrangler for Mac.

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

Announcement document type orlocated at the very beginning of an HTML document and tells browsers which version of HTML is in use. Since we will be using latest version HTML, our document type will simply be. After that comes the element denoting the beginning of the 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 can 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 in the element . The structure of a typical HTML document looks like this:

Hello World!

Hello World!

This is a web page.

Demonstration of the structure of an HTML document

This code shows the document, starting with the declaration of the document type,, followed immediately by the element . Inside go elements And . Element contains the page encoding via the tag and the title of the document through the element . Element <body>includes header via element <h1>and a paragraph of text through<р>. Because both the heading and the paragraph are nested within the element <body>, they are visible on the web page.</p><p>When an element is inside another element, also known as a nested element, it's a good idea to add padding to it to keep the document structure well organized and readable. In the previous code, both elements <head>And <body>nested and shifted inside the element <html>. The padding structure for elements continues with new added elements inside <head>And <body> .</p><h3>Self-closing elements</h3><p>In the previous example, the element <meta>was the only tag that didn't include a closing tag. Don't worry, this was done on purpose. Not all elements consist of opening and closing tags. Some elements simply receive content or behavior through attributes within the same tag. <meta>is one of those elements. Element content <meta>in the example is assigned using the charset attribute and value. Other typical self-closing elements include:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>The cast structure, made with a document type declaration<!DOCTYPE html>and elements <html> , <head>And <body>, is fairly common. We want to keep this document structure handy as we will use it frequently when creating new HTML documents.</p><h3>Code validation</h3><p>No matter how carefully we write our code, mistakes are inevitable. Luckily, when writing HTML and CSS, we have validators to check our work. The W3C offers HTML and CSS validators that scan code for errors. Validating our code not only helps us render correctly in all browsers, but also helps us learn best practices when writing code.</p><h2>On practice</h2><p>As web designers and front-end developers, we have the luxury of attending a number of great conferences dedicated to our craft. We are going to organize our own Styles Conference and create a website for it during the next lessons. Like this!</p><br><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Let's switch a bit, step away from HTML and take a look at CSS. Remember, HTML defines the content and structure of our web pages, while CSS defines their visual style and appearance.</p><h2>Basic CSS terms</h2><p>In addition to HTML terms, there are a few basic CSS terms that you will need to become familiar with. These terms include selectors, properties, and values. As with HTML terminology, the more you work with CSS, the more these terms become second nature to you.</p><h3>Selectors</h3><p>When adding elements to a web page, they can be styled with <a href="https://passportbdd.ru/en/windows/nemarkirovannyi-spisok-html-numerovannye-spiski-formatirovanie/">using CSS</a>. A selector determines which element or elements in HTML to target and apply styles (such as color, size, and position) to them. Selectors can include a combination of different metrics to select unique elements, depending on how specific we want to be. For example, we want to select every paragraph on a page, or select only one particular paragraph.</p><p>Selectors are typically associated with an attribute value, such as an id or class value, or an element name, such as <h1>or<р> .</p><p>In CSS, selectors are paired with curly braces () which enclose the styles applied to the selected element. This selector targets all elements <span><p>P(...)</p><h3>Properties</h3><p>Once an element is selected, the property determines the styles that will be applied to it. Property names come after the selector, inside <a href="https://passportbdd.ru/en/windows/php-peremennaya-v-figurnyh-skobkah-kudryavye-skobki-v-stroke-v-php/">curly braces</a>() and immediately before the colon. There are many properties that we can use such as background , color , font-size , height and width and other commonly added properties. In the following code, we define the color and font-size properties that apply to all elements <span><p>P ( color: ...; font-size: ...; )</p><h3>Values</h3><p>So far, we have only selected the element through the selector and determined what style we would like to apply to it through the properties. Now we can set the behavior of this property through a value. Values ​​can be specified as text between a colon and a semicolon. Below we select all elements <p >And set the value of the color property to orange and the value of the font-size property to 16 pixels.</p><p>P ( color: orange; font-size: 16px; )</p><p>To test, in CSS our set of rules starts with a selector, followed immediately by curly braces. Within these curly braces are declarations consisting of pairs of properties and values. Each declaration starts with a property, followed by a colon, the value of the property, and finally a semicolon.</p><p>A common practice is to shift a pair of properties and values ​​within curly braces. As with HTML, indentation helps keep our code organized and clear.</p><p><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>Rice. 1.03. CSS syntax structure includes selector, properties and values</p><p>Knowing a few basic terms and general CSS syntax is a great start, but we have a few more points to learn before we jump into the depths. In particular, we need to take a closer look at how selectors work in CSS.</p><h2>Working with Selectors</h2><p>Selectors, as mentioned earlier, indicate which HTML elements will be styled. It is important to fully understand how to use selectors and how they work. The first step is to become familiar with the different types of selectors. We'll start with the most basic selectors: type selectors, classes, and identifiers.</p><h3>Type selectors</h3><p>Type selectors target elements by their type. For example, if we want to target all elements <div>we have to use the div selector. The following code shows the type selector for elements <div>, as well as the corresponding HTML.</p><p>Div(...)</p><p> <div>...</div> <div>...</div> </p><h3>Classes</h3><p>Classes allow you to select an element based on the value of the class attribute. Class selectors are a bit more specific than type selectors in that they select a specific group of elements rather than all elements of the same type.</p><p>Classes allow you to apply the same style to multiple elements at once by using the same class attribute value for multiple elements.</p><p>In CSS, classes are denoted with a leading dot followed by the value of the class attribute. The class selector below selects all elements that contain the awesome class attribute value, including elements <div>And <span><p>Awesome (...)</p><p> <div class="awesome">...</div> </p><h3>Identifiers</h3><p>Identifiers are even more precise than classes because they only target one unique element at a time. Just as class selectors use the value of the class attribute, identifiers use the value of the id attribute as the selector.</p><p>Regardless of the type of element being rendered, the value of the id attribute can only be used once per page. If id's are present, then they should be reserved for important elements.</p><p>In CSS, identifiers are denoted with a hash symbol in front, followed by the value of the id attribute. Here id will select only the element containing the id attribute with the value shayhowe .</p><p>#shayhowe ( ... )</p><p> <div id="shayhowe">...</div> </p><h3>Additional selectors</h3><p>Selectors are extremely powerful and the ones described above are among the most common selectors we come across. These selectors are just the beginning. There are many advanced selectors and they are readily available. Once you're comfortable with them, don't be afraid to look at some of the more advanced ones as well.</p><p>Okay, let's start putting everything together. We add elements to the page inside our HTML, then we can select those elements and style them with CSS. Now let's connect the dots between HTML and CSS so that the two languages ​​work together.</p><h2>CSS connection</h2><p>To make our CSS speak to our HTML, we must point to the CSS file from the HTML. It's good practice to include all of our styles in one external file that is pointed to inside the element. <head>our HTML document. Using one external CSS allows us to apply the same styles throughout the site and quickly make changes to it.</p><h3>Other Options for Adding CSS</h3><p>Other options for including CSS include using inline and inline styles. You can see these options in real life, but they are generally frowned upon as they make site updates cumbersome and cumbersome.</p><p>To create our external style sheet, we again want to use the selected text editor to create a new one. <a href="https://passportbdd.ru/en/theory-reviews/konvektor-tekstovyh-failov-v-fb2-kak-perevesti-knigu-iz-pdf-v/">text file</a> with .css extension. Our CSS file must be saved in the same folder or subfolder as our HTML file.</p><p>Inside an element <head>applied element <link>, which defines the relationship between HTML and CSS files. Since we are linking with CSS, we use <a href="https://passportbdd.ru/en/pc-and-health/tega-rel-canonical-atribut-rel-canonical-polnoe-rukovodstvo-po-ispolzovaniyu-kanonicheskih-ssyl/">rel attribute</a> with a stylesheet value to indicate their relationship. In addition, the href attribute is used to indicate the location or path to the CSS file.</p><p>In the following example HTML document, the element <head>points to an external style file.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>For CSS to render correctly, the path value of the href attribute must directly match where the CSS file is saved. In the previous example, the main.css file is stored in the same location as the HTML file, also known as the root folder.</p><p>If the CSS file is located in a subfolder, then the value of the href attribute should correspond to that path accordingly. For example, if our main.css file was saved in a subfolder named stylesheets, then the value of the href attribute would be stylesheets/main.css . Here, a forward slash (or slash) is used to indicate a move to a subfolder.</p><p>At the moment, our pages are starting to come alive, slowly but surely. We haven't delved too deeply into CSS yet, but you may have noticed that some elements have styles that we didn't declare in our CSS. It is the browser that imposes its own preferred styles on these elements. Luckily, we can override these styles quite easily, which we'll do next with a CSS reset.</p><h2>Using CSS Reset</h2><p>Each browser has its own default styles for various elements. How <a href="https://passportbdd.ru/en/work-with-pc/kak-udalit-sohranennye-paroli-v-google-chrome-kak-posmotret-sohranennye-paroli-v-google/">Google Chrome</a> displays headings, paragraphs, lists, and so on, may differ from how it does <a href="https://passportbdd.ru/en/theory-reviews/izmenit-parametry-seti-iz-eksplorera-kak-mozhno-nastroit-brauzer-internet/">Internet Explorer</a>. CSS reset has become widely used to ensure cross-browser compatibility.</p><p>Reset CSS takes all basic HTML elements with a given style and provides a consistent style across all browsers. These resets usually include removing sizes, padding, margins, or additional styles to lower these values. Since CSS cascading works from top to bottom (more on that soon) - our reset should be at the very top of our style. This ensures that these styles are read first and that's it. <a href="https://passportbdd.ru/en/adobe-photoshop/poisk-po-umolchaniyu-v-raznyh-brauzerah-kak-vosstanovit-poiskovuyu/">different browsers</a> will work from a common point of reference.</p><p>There are a bunch of different CSS resets available to use, all of which have their own strengths. One of the most popular by Eric Meyer, his CSS reset is adapted to include new HTML5 elements.</p><p>If you're feeling a little adventurous, there's also Normalize.css by Nicholas Gallagher. Normalize.css focuses not on using a hard reset on all major elements, but instead on setting common styles for those elements. This requires a deeper understanding of CSS, as well as knowing what you want from styles.</p><h3>Crossbrowser compatibility and testing</h3><p>As mentioned earlier, different browsers render elements differently. It's important to recognize the value of cross-browser compatibility and testing. Sites don't have to look exactly the same in all browsers, but should be close. Which browsers you want to support and to what extent is a decision you will need to make based on what is best for your site.</p><p>There are a few things to keep in mind when writing CSS. The good news is that it's doable and takes a little patience to master.</p><h2>On practice</h2><p>Let's go back to where we last left off on our conference site and see how we can add some CSS.</p><ol><li>Inside our styles-conference folder, let's create a new folder called assets. This is where we will store all the assets for our website like styles, images, videos, etc. For our styles, let's go ahead and add another stylesheets folder inside the assets folder.</li><li>Using a text editor, create a new file called main.css and save it in the stylesheets folder we just created.</li><p>Looking at the index.html file in the browser, we can see that the elements <h1>And <p>Already contain the default style. In particular, they have a unique font size and space around them. Using Eric Meyer's reset, we can soften these styles, allowing each of them to start from the same base. To do this, take a look at his website, copy the code and paste it at the top of our main.css file.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ) /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- collapse: collapse; border-spacing: 0; )</p><li>Our main.css file is starting to take shape, so let's include it in our index.html file. Open index.html in a text editor and add an element <link>V <head>, right after the element <title> .</li><li>Because we're pointing styles through the element <link>add a rel attribute with a value of stylesheet .</li><p>We will also include a link to our main.css file using the href attribute. Remember, our main.css file is saved in the stylesheets folder, which is located inside the assets folder. So the value of the href attribute, which is the path to our main.css file, should be assets/stylesheets/main.css .</p><p> <head> <meta charset="utf-8"> <title>Styles Conference

Time to test our work and see how our HTML and CSS fit 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 website with CSS reset

Demo and source code

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

Summary

So, all is well! We've taken 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.

Recall that we have considered the following:

  • The 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.
  • Importance of CSS reset.

Now let's take a closer look at HTML and get to know the semantics a bit.

Resources and links

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

Creating a high-quality web page is not easy, it requires not only the skills of a designer for a beautiful and stylish design, but also programming experience. The complexity and volume of programs required to create a particular site depend on many factors, such as the structure, purpose, functionality, reliability, and system for protecting the site from information attacks from “sticky” information (spam, garbage) and viruses.

Web technology (hypertext technology) made it possible to link the entire set of documents published on the Internet into a single system - WWW. A hypertext document contains hyperlinks. They are usually highlighted with color and underlining. Hyperlinks allow the user to immediately jump to the desired document, regardless of its physical location. This greatly facilitates the search for information on the Internet.

Using hypertext breakdown text document in modern information systems is largely due to the fact that hypertext makes it possible to create a mechanism for non-linear viewing of information. In such systems, data is not presented as a continuous stream. text information, but a set of interrelated components, the transition through which is carried out using hyperlinks.

If speak about creating HTML documents, we can imagine two ways of their formation.

The first is to manually mark up an existing (or being created) document. In this case, the author or editor adds markup tags to the document. This work can be done in a text editor or HTML editor, which has special controls to make it easier to enter tags. In both of these cases, the work is done using HTML language, and the person doing this work must know and be able to use this language.

The principles of another approach can be understood by studying how word processors work. Document formatting information can also be thought of as "markup" added to the document being formatted. However, using a word processor does not require any knowledge of the document format and "markup language": the changes displayed on the screen are made to the document automatically. This principle of matching the on-screen image to the real one was called WYSIWYG (weiseweg) (from the English What You See Is What You Get (voch yu si is voch yu gat) - What you see is what you get).

They allow you to create entire web-sites (portals) and use all modern technologies. Such web-editors are quite suitable for professionals. If you use MS Office, you can use FrontPage from this suite. There is also Netscape Composer as part of Netscape Communicator. You can also use the demo version of the Macromedia HomeSite web editor by getting it from the official Adobe website: www.adobe.com.



The first method allows you to create more versatile, higher quality and more diverse documents. The second method is easier to learn, since it does not require knowledge of the HTML language. However, in this case, formatting tools are used instead of description tools, which can sometimes lead to undesirable consequences.

So, to create web pages, you will need a text or web editor. It should be noted that all web editors must also contain a text editor, web editors now exist a large number of, but three are recognized as the most powerful:

1. Macromedia Dreamweaver (macromedia dreamweaver);

2. Allaire HomeSite (aller home site);

3. Microsoft Front Page(Microsoft Font Page).

They allow you to create entire web-sites (portals) and use all modern technologies. Such web-editors are quite suitable for professionals. If you use MS Office, you can use FrontPage from this suite. There is also Netscape Composer as part of Netscape Communicator. You can also use the demo version of the Macromedia HomeSite web editor by getting it from the official website of Adobe (adobe): www.adobe.com. Using a browser, go to the specified site in the Downloads / Trial Downloads section and select Macromedia, HomeSite.

You can use the Russian version of FrontPage Express from localized Internet Explorer - this is a shortened version of FrontPage, but very convenient to start with. The web editor Visual Workshop is also known in Russian (http://www.snkey.net/download/products/index.html).

Modern services on the Internet offer ready-made website builders. Consider them using the example of the site builder "My Site" (www.narod.yandex.ru). With it, you can get a place for your site ( home page) and in 5 minutes create your own website with pictures, photos, etc.

The website development process includes three steps:

1. entrance to the site constructor;

2. registration, site name assignment;

3. designing a site using blanks.

To create a one-of-a-kind handmade site, other web tools are required.

In addition to HTML and website builders, you can use other web page programming tools. One of the programming tools for sites is CGI (CGI AI) (Common Gateway, Common Gateway).

The principle of CGI is simple and natural: a server-side program takes some data, processes it, and produces a response in the form of a web page. This is a very common occurrence today, and sometimes you don’t even suspect that you are dealing not with an ordinary page, but with the result of a CGI script (code). The scope of CGI is wide and the purposes are varied. The programming language in which the script is written must be flexible and at the same time powerful, since there is not only constant work with files, but also with the database, OS and web server. The most suitable languages ​​for CGI programming are C (C++) and Perl. The latter is most often used for these purposes because of its simplicity, reliability and breadth of possibilities.

The C language is rightfully considered universal and has found its place in the CGI environment. Its use is natural in its native element - Unix, on the basis of which, in most cases, a web site is built.

For CGI programming, the C++ language is also used, which implies the creation and destruction of certain objects implemented through classes - in fact, user-defined data types. It is natural to create, for example, a Guestbook or DataBaseEntry class that would contain the necessary variables and functions. It is worth noting that almost all new programming languages ​​(Java, JavaScript, Perl) contain constructs similar to or similar to C constructs. exact copies. Therefore, it is recommended that you first learn this fundamental language.

The Perl language is unique. First, it lacks data types, which is good for writing CGI scripts. Secondly, a lot of constructions are taken from C. It should be noted that Perl often uses regular expressions similar to those used in Unix Shell scripts. There is a convenient foreach loop and beautiful, in fact, expression modifiers. Perl has a standard library that includes search, web server, graphics, and so on. From this we can conclude that for a programmer familiar with Unix, it will not be difficult to learn Perl. To write such a program, it is enough to be able to work with files from Perl and, a little, with web server environment variables.

The process of creating Web documents is similar to programming and is also prone to errors. Regardless of how a document is created, you should regularly check its consistency by viewing it in different browsers. For an artistic assessment of the resulting page, an independent opinion should be consulted.

Questions for self-control:

1. What does the concept of an HTML document mean?

2. What are the advantages of this type of document?

3. What does the term "tag" mean?

4. What kinds of tags are there?

5. What is included in the tag management objects?


www.univer.omsk.su/omsk/Edu/htmlbook/school/index2.htm

http://dvo.sut.ru/libr/ite/i280levc/index.htm Yu.P. Levchuk, E.P. Okhinchenko, A.D. Sotnikov, T.A. Fomenko INFORMATICS Part 2 INTERNET TECHNOLOGIES


1. Web page ( HTML document) represents:

a) a text file with the extension .txt or .doc;

b) text file with extension .htm or .html;

c) a binary file with the extension .com or .exe;

d) graphic file with extension .gif or .jpg.

2. To view Web pages on the Internet, the following programs are used:

a) Microsoft Word or Word Pad;

b) Microsoft Access or Microsoft Works;

c) Internet Explorer or NetScape Navigator;

d) HTMLPad or Front Page.

3. Tag is:

a) an instruction to the browser indicating how the text should be displayed;

b) text that uses special characters;

c) a pointer to another file or object;

d) a fragment of a program included in a web page.

4. Hypertext is:

a) very large text

b) text that uses a large font size