Abstract: HTML language: html programming systems, language features and system implementation. Purpose, application programming examples. HTML, CSS, PHP, JavaScript, SQL – what and why

Reg.ru: domains and hosting

The largest registrar and hosting provider in Russia.

More than 2 million domain names in service.

Promotion, domain mail, business solutions.

More than 700 thousand customers around the world have already made their choice.

*Mouse over to pause scrolling.

Back Forward

In this material, I want to review the purpose of the main programming and markup languages ​​used in web development.

The idea to write this article was not born spontaneously, but under the influence of frequently repeated questions that were sent to me in letters and asked at the support service.

These are the following questions:

In what order should you learn website creation languages?
- Which is more difficult: JavaScript or PHP?
- Why do we need the SQL language?
- How do CSS versions differ from each other, and which one should you learn?
- How do dynamic sites work?
- What is PHP for?
etc...

In this article I will talk about the role of each of these languages ​​in creating websites and, I am sure that the vast majority general issues will disappear on its own.

There will be almost no code examples in this material, because... We are faced with another task - to get a general idea of ​​the purpose of each language and its place in web development.

So, let's go. We'll start with the HTML language.

File extensions: .htm, .html

HTML is a hypertext markup language (from the English. HyperText Markup Language).

This language is used to create web pages. It is interpreted (processed) by the browser and displayed as a document in a human-readable form.

HTML is an integral component and the basis of almost any web page. The HTML language primarily acts as a means of logical page layout.

It is HTML that allows us to give the content of a page a certain meaning, and this is implemented using so-called tags.

Tags are special markers that are interpreted in a certain way by the browser. The essence of tags is that page content enclosed in different tags is processed differently by the browser.

Let's say we can enclose the content of a page in a paragraph tag, and this content will be considered a paragraph by the browser.

We can wrap the content in a list tag, and then the information inside it will be interpreted as a list.

We can put the content in a table tag, and the content in the resulting document will appear as a table, etc.

In other words, each of the HTML tags intended for markup text information, gives this information some meaning.

The HTML language has a fairly long history of development, and during this time it has undergone significant changes. Most of the changes are related to the addition of new tags to the language and the “retirement” of obsolete ones. At the time of writing this article, development of HTML 5.1 has already begun.

For different versions HTML provides different declaration document type. Let's look at a couple of examples of declarations like HTML 4.01 (at the moment it can be considered obsolete).

1. Strict: Does not contain items marked as "deprecated" or "deprecated":

2. Transitional: contains legacy tags for compatibility purposes and to ease migration from older versions of HTML:

3. With frames (Frameset): similar to transitional, but also contains tags for creating framesets:

The document type declarations above will increasingly become a thing of the past over time, giving way to HTML 5.

HTML 5 only uses one option DOCTYPE(document type):

It should also be mentioned that there is also a language called XHTML. It is an extensible hypertext markup language. Extensible Hypertext Markup Language). At the moment its development has been stopped and it is recommended to use HTML. New versions of XHTML are not released.

In conclusion, I would also like to note the fact that HTML can still be used to control not only the logical structure of web pages, but also some aspects of its appearance.

However, this approach is considered incorrect and outdated, because There is a separate language for setting the appearance.

This concludes the HTML and moves on to the CSS language.

File extension: .css

CSS is a language for describing the appearance of a document written using a markup language. The name comes from English. Cascading Style Sheets- cascading style sheets.

Simply put, CSS language designed to give the necessary appearance HTML documents.

Giving appearance to HTML documents is, although the most popular, but only a special case of using the CSS language, because with its help you can give the appearance of other types of documents: XHTML, SVG And XUL. We will not talk about them separately, because... this is beyond the scope of the issue at hand.

So, the goal CSS creation there was a separation of the description of the logical structure of a web page from its appearance. As you already know, HTML is used to describe the structure, but CSS is used to describe how this logical structure will look.

Separate description of the logical structure and presentation of the document allows you to more flexibly control the appearance of the document and minimize the amount of repetitive code that would inevitably arise when using HTML to describe the appearance of the document.

Using CSS, a web developer can set different typefaces and font sizes, element colors, indentation of elements from each other, location of individual blocks on the page, etc. for a page and its individual elements.

Of course, in order to use CSS to give the appearance of an HTML document, this document needs to be somehow associated with styles, i.e. "tell" an HTML document that it will be styled using CSS.

There are various ways to do this CSS connections to the document, which let the browser know that styling should be applied to the page as a whole, or to some of its individual elements.

Style sheets can be located either directly inside the document to which they will be applied, or in a separate file with the extension .css.

It is important to understand that The CSS file is a regular one. text file . It contains special instructions describing the appearance of the element and its positioning on the page, as well as comments (arbitrary explanations regarding the written instructions).

CSS styles can be connected to (or embedded in) a page in the following four ways:

1. If the style sheet is in a separate file, then it is connected to the document using a special tag link, which should be located in this document inside a tag head:

In attribute href In this case, the path to the included styles file is indicated.

2. The second connection method is also used if the styles are in a separate file. In this case, the directive is used @import, which should be located in this document inside tags style head):

@import url(style.css);

Here, as you can see, the path to the included file is indicated in parentheses after the word url.

3. The third method is used when CSS styles located within the document to which they are to be applied. In this case, the styles should be located in this document inside tags style(which, in turn, must be inside tags head):

body ( color: red; )

In the example above, inside the tags style located style that sets the red text color for the element body web pages.

4. The fourth method is also used in cases where the style sheet is described in the document itself. In this case, the style is set for a specific element of the web page (tag) by using its attribute style.

In this case, all CSS rules specified in this way will be applied only to the current tag (web page element).

We use built-in style sheets.

In the example above, we are setting the font size and color for one specific paragraph of text within the document.

To summarize the methods of connecting styles, we can say that in the first two cases external style sheets were applied to the document, while in methods 3 and 4 we are dealing with built-in (or internal) styles.

The style rules themselves are specified in the form of pairs "property: value;". These rules apply to so-called selectors. Let's say in example 3 we are dealing with an element selector ( body). The property is color, and as a value – red.

There are 10 types of selectors in total, the consideration of which, for obvious reasons, is beyond the scope of this review.

It is important that you understand the general principle.

A selector defines one or a group of elements to which style rules will be applied(in our case this is the entire contents of the tag body)

A property can be defined as the type of transformation that will be applied to an element (in our case it is color, i.e. text color).

The value directly determines the value of a certain type of transformation (in our example it is red, i.e. red).

In the process of its development, the CSS language has already come a long way, and currently there are several levels: CSS1, CSS2, CSS2.1, CSS3. Since the end of 2011, CSS4 has been developed.

The meaning of the different levels is that existing errors are corrected, new properties are added, the selector mechanism is expanded, etc.

In other words, each next level is not something separate, but a logical development and continuation of the previous level, allowing you to more subtly and flexibly control the appearance of web pages.

This concludes our review of CSS and moves on to the next link - the PHP language.

File extension: .php

When you have already understood at least a little about HTML and CSS, the question immediately arises: “What next?”. You wanted to create cool websites, but using HTML and CSS just can’t do this...

Here you need a language of a completely different type and purpose.

PHP has been consistently on the list of the most popular programming and web development languages ​​for many years.

What is PHP?

PHP stands for Hypertext PreProcessor(something like an "HTML preprocessor").

What does this mean? Let's start a little from afar: there are two types of languages. One type is called "client", and the other - "server".

This means that client languages ​​run in each individual's browser. A typical representative of client languages ​​is JavaScript, which you've probably heard of.

All actions and commands that we give, say, to JavaScript, are executed by the browser (for simplicity, we do not consider server-side JavaScript).

This means that the same code written by us is processed in one case Internet browser Explorer, in another - Firefox, in the third - Opera, in the fourth - Google Chrome, i.e. the browser that each specific person uses to view our page.

The browser thus has an alternative name - client.

In the case of server-side languages ​​(which includes PHP), we see a different picture.

Our website is always located on some server, i.e. a powerful computer specifically designed to accommodate many people's websites.

All commands and scripts written in PHP are executed on the server and nothing else. After the PHP script is executed on the server, the server “gives” the result of its work to the browser, which converts this result into a form convenient for us.

It is important to understand the following point here: by the source code of the web page, which can be viewed in any browser through an option like " Source code page" it is impossible to determine whether PHP was used to create a given page or not.

It is impossible to do this precisely because PHP scripts are processed on the server, and the ready-made, processed version is transferred to the browser. Basically just HTML code.

The difference compared to regular static HTML pages is one additional code processing step.

In the case of an HTML page, there is only one stage: the browser processes the HTML code, i.e. page layout in accordance with certain rules, as a result of which we see the web page in its normal form.

In the case of a PHP page, there are two stages: first, the so-called PHP interpreter (handler) executes the PHP code (resulting in simple HTML code), and after that the browser processes the result of this processing, i.e. in fact, the same stage is performed, which is the only one in the case of an HTML page.

In general, PHP works great when paired with HTML. Moreover, you can insert PHP code into HTML code, and with using PHP output HTML markup.

It's important to remember this simple point: It doesn't matter how complex your PHP code is, it will eventually end up as plain HTML.

Why use PHP?

HTML is 100% static. By embedding PHP code into our pages, we can ensure that the content of the same page is different depending on certain conditions (dynamic pages).

Over the many years of its existence, the PHP language has established itself as an excellent solution for creating dynamic websites.

What do you need to get started with PHP?

For full-fledged work with PHP on your computer you need the following things:

1. Apache web server(it is used in most cases);
2. Database Management System (DBMS) MySQL (the content of the site is stored in the database);
3. Installed PHP interpreter;
4. Text editor in which you will write code;
5. Browser.

Now a little more about the first three points.

1. A web server is designed to simulate on your computer the very server on which your website will then be hosted on Internet hosting. This is necessary so that you can write any PHP scripts on your computer and watch how they work, make changes and edits to them. In a word, this is necessary for so-called debugging.

2. MySQL DBMS is needed to store information that will be on your website. In the case of HTML pages, all the content of the site is located directly in them. Each page contains a certain amount of information (content).

When using PHP, a database is usually used to store useful website content. In the vast majority of cases this is MySQL.

3. The PHP interpreter is a kind of program that processes PHP code on a web server. Without it, we will not be able to execute our PHP scripts and see the result of their work.

To tell the web server to process PHP code, you must use the following syntax when adding PHP to an HTML document:

In this case, the web server, having reached the PHP opening tag ( ) the PHP interpreter stops working.

Let's now return to the role of PHP in website creation.

To begin with, let's imagine that we have a simple static website written in HTML. It consists of a number of pages and is simply a collection of immutable files.

There is no way to create a form on this site feedback, comments, user registration, search, etc.

In addition, such a site cannot have a control panel from which we could add new pages, or edit and delete existing ones.

When using only the HTML language, we are severely limited in creating truly convenient and functional sites, since we do not have any “control levers” for each specific page.

All we can do is manually open a separate HTML page in a code editor and modify it somehow.

Using the PHP language allows us to create truly powerful websites due to the fact that we can think through and implement the “behavior” of our website.

In other words, we can make our site behave differently in different situations, acting according to the algorithms we have prescribed, depending on the fulfillment or non-fulfillment of certain conditions.

The ability to set the logic of the site’s “behavior” that we need is one of the most important and most valuable in the PHP language.

Along with the advantages already mentioned, it should be mentioned that PHP provides us with many tools for working with data various types.

Most often you have to deal with text data and data presented in the form of arrays. To facilitate these tasks, PHP provides numerous functions that allow you to easily manipulate any information.

In addition, the PHP language allows us to work with files and folders. We can use it to create, edit and delete files and folders. We can move and rename them and perform many other operations.

Of course, one cannot ignore such important point as an opportunity using PHP to organize more convenient user interaction with the site.

These are things like:

Feedback form;
- the ability to comment;
- user registration;
- site search;
- storing information entered by the user (based on the “shopping cart” principle); etc.

And, of course, PHP is actively used to create a variety of admin panels, from where you can easily and conveniently manage your website.

Adding new materials, editing categories, moderating comments, changing site menu items, managing settings - all this and much, much more can be done using PHP.

Summarizing the overview of the PHP language, we can say that the next step after mastering HTML and CSS should be learning the PHP language, because It is this that will allow you to move to a fundamentally different level in website creation.

We finish with PHP and move on to another language - JavaScript.

File extension: .js

JavaScript is the programming language most widely used in browsers to add interactivity to web pages.

It is important to understand that this is far from the only area of ​​​​application of JavaScript, however, within the framework of our topic, it is most appropriate to consider this particular use of this language.

The main task of JavaScript in the context we are considering is to manipulate elements of the DOM model of a web page.

Let's figure out what DOM is.

DOM is the Document Object Model. Document Object Model).

According to the DOM, a document (for example, a web page) can be represented as a tree of objects that have a number of properties that allow various manipulations with it:

Receiving nodes;
- change of nodes;
- changing connections between nodes;
- removal of nodes.

It is these manipulations that the JavaScript language allows us to perform on page elements.

To add JavaScript code to a page, you can use the tag script. It is recommended to place it inside a tag head, although this is not necessary.

Containers script there can be as many as you like in one document. In this case, the attribute "type="text/javascript"" It is not necessary to indicate, because meaning javascript is the default value.

Below is an example of a script that outputs the so-called modal window with classic inscription "Hello, World!" inside the browser:

alert("Hello, World!");

You can also place JavaScript code inside a tag. The HTML specification describes a set of attributes used to define event handlers. Consider this example:

Delete

In this case, if the answer is negative (i.e. “no”, if we are not sure), the link will be blocked.

Please note that this practice using JavaScript is not considered good.

The correct use of JavaScript would be this approach. First we provide an identifier ( id="alertLink") link:

Delete After this, write the following code in a separate JavaScript file (how to connect it to the document will be shown below): window.onload = function() ( var linkWithAlert = document.getElementById("alertLink"); linkWithAlert.onclick = function() ( return confirm("Are you sure?"); );

In this example, we are creating a function that fires when a web page loads. This function finds the element with id alertLink and tracks the click event on it (i.e. on the “Delete” link).

Upon a click event, we display a modal window with a message that is already familiar to us.

You might find this example a little complicated if you don't know anything about JavaScript, but at this stage it's not that important.

It is important that you understand the principle itself, the approach to work when using JavaScript.

And finally, as I promised just above, let's look at how you can connect JavaScript from an external file.

Here the situation is very similar to what was in the case of CSS, only instead of CSS code we write JavaScript code in a file (with the .js extension), and then connect it to the file we need in the tag head using the design:

After such manipulation, we will have access to all the functions that we wrote in the JavaScript file.

So, we can say that JavaScript is a language that allows you to actively control the structure of your page, manipulate its elements.

In practice, this finds its application in creating various animation effects, effects of moving, dissolving, enlarging and reducing objects.

JavaScript is used to create various photo galleries, the so-called content sliders or rotators, the essence of which is that in a certain limited space there is an alternation of various objects (for example, images).

JavaScript is often used for initial data verification, which the user enters into forms.

Speaking about JavaScript, one cannot fail to mention special JavaScript libraries ( jQuery, Prototype, MooTools etc.)

The point of JavaScript libraries is to provide cross-browser interface to DOM methods.

This means that you can use certain functions already written within a particular library and get the result you need, working equally well in all browsers.

In addition, libraries relieve web developers of the need to learn JavaScript itself in detail, providing a number of easy-to-use tools that make it easy to manage object model document.

To summarize, we can say that JavaScript can become the “highlight” of your site, both in terms of its decoration and in terms of additional functionality that can be provided using this language.

We're done with JavaScript, so we move on to last language– SQL

File extensions: .sql

SQL is an information logical language designed to describe, modify, and retrieve data stored in relational databases.

In order to better understand this definition, we will start with the most basic concepts, without which it is simply pointless to go further.

Why do you need a database anyway?

Nowadays, when developing serious web applications, databases are almost always used. They store information necessary for the operation of the site - starting from the content itself (content), and ending with user logins and passwords and various site settings.

Despite the fact that the database can store not only text information, but also, say, pictures, some documents, etc., as a rule, it is still used specifically for storing text information, and information of other types is stored in the form files.

Databases have a number of advantages compared, for example, with storing text information in files:

1. High speed of obtaining information;

2. They allow random access to data. (i.e. it is easy to access one specific entry in the database);

3. From the database we can extract data that meets certain criteria that interest us;

4. Using a database allows us not to worry about parallel access to data. Those. In this case, it doesn’t matter to us that several dozen people can simultaneously request the same record.

If we were dealing with files, it would be much more difficult for us.

Therefore, parallel access to data is one of the most important advantages of databases.

Difference between a database and a DBMS

It is important to distinguish between terms "database" And "database management system" (DBMS).

A database is the information that we store and the structure of this information, while a DBMS is a program that provides external applications access to databases.

A database is something that we independently design for each specific project, setting its structure based on the functions of our future application.

The DBMS is selected by us from a certain limited list (Oracle, MySQL, PostgreSQL, etc.)

Most often you can find a combination of PHP + MySQL. In most cases, you will also work with it.

Let us now consider the concept of a relational database.

Today, so-called relational databases are the most popular.

Relational databases are databases consisting of tables.

The very word “relational” comes from the English. relation- attitude.

A “relationship” refers to the relationship between different tables in a database.

What is typical is that the tables in the database are really ordinary tables, which are essentially identical to any tables you have come across in life - starting from the multiplication table and ending with tables in Microsoft Excel.

The table has a limited number of columns (usually small) and as many rows as desired.

How can you insert new data into the database, change it, delete it, and perform other manipulations?

That's why it exists special language SQL (from English. Structured query language- structured query language).

Those. SQL is a universal computer language designed specifically for managing relational databases data.

With its help, we can perform almost any operation: from creating a database to retrieving any set of information from the database.

Typically, SQL queries are sent to the DBMS through an external program. In this case, the DBMS executes the specified request and returns a certain result in response.

Each SQL command is either a request for data from a database or a call to the database that causes data in the database to change. According to what changes occur in the database, there are following types requests:

Requests to create or change new or existing objects in the database (in this case, the request describes the type and structure of the object being created or changed);
- requests for data;
- requests to add new data (records)
- requests to delete data;
- calls to the DBMS.

So the SQL language is the one link, which allows the web application to interact with the database and the information stored in it.

The SQL language can hardly be called simple, and its full use will require quite a lot of effort on your part to learn it.

That is why in many web development tools (for example, in the CodeIgniter framework), the interaction of a site with a database is implemented using a kind of “add-on” that allows you to perform all the necessary actions with it without learning the SQL language itself.

However, if you don't use tools like CodeIgniter, then to create a full-fledged database-driven web application, you will, of course, need to master SQL.

Well, let's summarize this review a little.

The foundation of web development has been and remains the HTML language. Without it, everything else is practically meaningless, because it is the HTML markup that is converted by the browser into the final picture that we see on the monitor screen.

CSS is a tool for defining the appearance and positioning of various elements of a web page, which allows us to flexibly control the appearance of our web application.

PHP allows us to create powerful dynamic websites that have a certain behavioral logic. PHP also gives us practically unlimited possibilities to expand the functionality of the site.

JavaScript is an important, but not always required, addition. It can significantly improve the usability of your site and its interactivity, and add a certain “zest” to it.

Finally, SQL allows us to organize the interaction of the site with the database, which allows us, in conjunction with PHP language create truly powerful, functional websites.

Best regards, Dmitry Naumenko.

P.S. Some things are clear, but where to go next? Take a closer look at premium lessons on various aspects of website building, as well as free course to create your own CMS system in PHP from scratch. All this will help you master web technologies faster and easier: from HTML and CSS to JavaScript, PHP and SQL.

Did you like the material and want to thank me?
Just share with your friends and colleagues!

Hello dear beginning webmasters. Let's start learning programming languages.

And we will start studying them with html.

I’ll say right away that at the end of the course you will be able to write a website yourself in pure html and post it on the Internet. But I still recommend taking your time, and after html, get acquainted with css.

Then you will make the site cooler, and you will be able to correct the appearance of the site created on a ready-made CMS (content management system).

Learning a programming language and learning a foreign language are not the same thing, and it is much easier. Moreover, it is not scary, but very exciting.

It’s just that the incomprehensible always frightens you, but I promise you that after the very first lessons, all fears will pass.

We will learn using the editor, which you need to install on your computer.

In this file editor, you can write code and immediately see how the browser displays it. Very convenient.

Come on, first I’ll tell you a little about what HTML is, and this will be the boring part of our course, and then we’ll get into the most interesting practice. It certainly won't be boring there.

HTML (HyperText Markup Language) literally means hypertext markup language. It is used to create web pages.

And if, in our understanding, a collection of simply pages united by one topic is a book, or even, better said, a thick magazine, then a collection of web pages united by one domain name- this is the site.

Each web page has its own unique text, written by you and enclosed in html code.

Code is instructions to the browser on how to display a particular element. Let's say you wrote a word, but in what form it will appear on the screen depends on what code you enclose it in.

The html code consists of the following elements:

2. Tag attributes.

3. Attribute values.

Let's look at them in order.

The html tag is the main element of the code. It is written like this:

As you can see, it consists of two parts. The first angle brackets are the opening part, and the second ones, with a slash, are the closing part.

Between these two parts, the rest of the page code that will be displayed on the screen is written.

The tag tells the browser that this is an HTML document and is the main (parent) tag for all other elements.

In the remaining tags, code elements, a letter or word is written in angle brackets, which will be the name of the tag and determine which element will be displayed on the screen by this tag.

For example, if you put the letter h1 in angle brackets, the text will be displayed on the screen as a heading.

Hello

That is, the font of the word “Hello” will be larger and bolder than the rest of the text.

If you put the letter p in angle brackets, then the text enclosed in the tag will be displayed as a paragraph.

Hello

That is, the font will be normal, but everything written after this tag will start on a new line.

There are several dozen such letters, and even words that determine the type of command, in html, although no more than 10-15 tags are often used.

We will look at each of them in more detail along the way.

The following are tag attributes. Frequently used, also no more than a dozen. And in lately and even less, since all attribute functions are transferred to css.

But more about this later, but for now we’ll still find out what an attribute is, since some of them have not lost their relevance and will never lose.

Attribute is additional command. It is written in the opening part of the tag. For example, if you want to make the title colored, then you need to insert the color attribute into the opening part of the h1 tag

And let's go straight to the attribute values. The point is that the attribute must have a value. That is, if you gave the command that the title should be colored, then you need to indicate what color it will be.

This indication will be the attribute value. It looks like this:

This is red.

In the same way, but using other attributes, you can set the text size, indents, alignments, and much more.

Although, design is increasingly moving to CSS, and design attributes are gradually becoming outdated and out of practice.

And now we draw a conclusion from all of the above:

HTML is a language that browsers understand. We need it in order to communicate with the browser, or, one might say, to control it, that is, to give it commands on how to perceive and display on the screen what we write.

I would like to add that tags, attributes, and their meanings are easy to remember during practical classes, which is essentially what all subsequent articles will be.

There you immediately see the tag, you find out its meaning, in what case and in what place it is used, what signs it is accompanied by, and how it is written, so now I will not show you all the tags and attributes, we will see everything in practice.

Full list of tags and html attributes, if anyone is interested, you can always look at . .

Although, if you are not going to engage in professional programming, it will be enough to know a few (about a dozen) basic tags and several attributes.

Well, that’s all, I guess. Few? And for now there’s no need for more. We will learn the rest during the learning process using specific examples.

I think it will be better understood with examples. Our goal is to make a website and understand how it all works, so go ahead and practice.

Change

As soon as you sit down to study, some bastard is bound to wake you up!!!

At school, the teacher tells the students:
- Which of you finally considers yourself stupid? Stand up.
After a long pause, one student stands up:
- So you think you're stupid?
- Well, not exactly, but it’s somehow awkward that you’re standing alone.

Introduction

Programming Language Basics

1 About the html language

2 Creation of a Web site

3 Basic provisions

4 Document structure

5 Document body tags

Description of site creation

2 Graphics inside a document

3 Adding styles to a document

4 Optimizing graphics for the web

Algorithm for practical work

1 Preparation

2 Creation of the website “Master of Digital Information Processing”

Conclusion

List of used literature

Application

In the age of digital technology and mass computerization, the Internet has become an integral part of our lives, and web programming and design are a prestigious and sought-after profession. After all, the Internet cannot exist on its own and someone must create Internet pages, update websites every day and even every hour so that the user always has access to up-to-date and verified information in a form that is understandable to him. Thus, the issue of web programming and design is very relevant. Therefore, the topic of my work is related to the creation of a website in the language HTML programming and programs with which you can write web pages. I attach a website to my work as an example of what can be created if you know the HTML programming language.

Object - website. Subject - website programming in HTML.

The purpose of the work is to study the HTML programming language.

Reveal basic information about the language;

Consider the process of creating a website;

Create a website based on the developed algorithm.

Structure: the work consists of an introduction, three chapters, a conclusion and a list of references.

Text Markup Language (HTML) is a standard language designed for creating hypertext documents in the WEB environment. HTML documents can be viewed by different types of WEB browsers. When a document is created using HTML, a WEB browser can interpret the HTML to highlight the various elements of the document and process them first. Using HTML allows you to format documents to be presented using fonts, lines, and other graphic elements on any WEB viewing software.

Most documents have standard elements such as a heading, paragraphs, or lists. Using HTML tags, you can label these elements, providing WEB browsers with the minimum information to display these elements, while preserving the overall general structure and information completeness of documents. All that is needed to read an HTML document is a WEB browser that interprets the HTML tags and displays the document on the screen in the form that the author gives it.

In most cases, the author of the document strictly determines the appearance of the document. In the case of HTML, the reader, based on the capabilities of the WEB browser, can, to a certain extent, control the appearance of the document (but not its content). HTML allows you to mark where a heading or paragraph should appear in a document using an HTML tag, and then lets the WEB browser interpret those tags. For example, one WEB browser can recognize the beginning of a paragraph tag and present the document in the desired form, while another does not have this ability and presents the document in one line. Users of some WEB browsers also have the ability to customize the font size and type, color and other parameters that affect the display of the document. Tags can be divided into two categories:

Tags that determine how the body of the document as a whole will be displayed by the WEB browser.

Tags that describe general document properties, such as the title or author of the document.

The main advantage of HTML is that the document can be viewed on various types of WEB browsers and on various platforms.

documents can be created using any text editor or specialized HTML editors and converters. The choice of editor that will be used to create HTML documents depends solely on the convenience and personal preferences of each author.

For example, HTML editors, such as Netscape Navigator Gold from Netscape, allow you to create documents graphically using WYSIWYG (What You See Is What You Get) technology. On the other hand, most traditional document creation tools have converters that allow you to convert documents to HTML format.

All HTML tags begin with "" (right angle bracket). Typically, there is a start tag and an end tag. For example, here are title tags that define the text located inside the start and end tags and describe the title of the document; case is not important when entering text:

Document Title or Document Title.

The end tag looks the same as the start tag, and differs from it by a forward slash before the text inside angle brackets. IN in this example the tag tells the WEB browser to use the heading format, and the tag tells the heading text to end.

Some tags such as

(tag that defines a paragraph) do not require an end tag, but its use gives the source text of the document improved readability and structure.

Attention! Extra spaces, tabs, and carriage returns added to the source text of an HTML document for better readability will be ignored by the WEB browser when interpreting the document. An HTML document can only include the above elements if they are placed inside tags.

When a WEB browser receives a document, it determines how the document should be interpreted. The very first tag that appears in the document must be the . This tag tells the WEB browser that your document is written using HTML. A minimal HTML document would look like this:

Body of the document...

The header part of the document. The document head tag should be used immediately after the tag and nowhere else in the body of the document. This tag represents general description document. Avoid placing any text inside the . The start tag is placed immediately before the tag and other tags that describe the document, and the end tag is placed immediately after the end of the document description. For example:

List of employees

Document title. Most WEB browsers display the contents of the tag in the title bar of the window containing the document and in the bookmarks file, if supported by the WEB browser. The title, delimited by the and tags, is placed inside the - tags, as shown in the example above. The document title does not appear when the document itself is displayed in the window.

Document body tags identify the HTML document components displayed in the window. The body of the document may contain links to other documents, text, and other formatted information.

Document body. The body of the document must be between the and tags. This is the part of the document that is displayed as text and graphic (semantic) information of your document.

Heading levels. When an HTML document is written, the text is structurally divided into just text, headings of parts of the text, higher-level headings, etc. The first level of headings (the largest) is indicated by the number 1, the next - 2, etc. Most browsers support the interpretation of six levels of headings, giving each one its own style. Headers above level six are not standard and may not be supported by the browser. The title itself top level has the sign "1". The level 1 header syntax is as follows:

First level header

Headings at another level can generally be represented as follows:

X-level heading, x is a number from 1 to 6 that determines the heading level.

Paragraph tag

Unlike most word processors, carriage returns are generally ignored in an HTML document. A physical paragraph break can be located anywhere in the source text of the document (to make it easier to read). However, the browser only separates paragraphs if there is a tag

If you don't separate paragraphs with the tag

Your document will appear as one large paragraph.

Additional tag parameters

Allows you to align a paragraph to the left, center, and right, respectively.

Centering document elements. You can center all document elements in the browser window. You can use the tag for this.

All elements between the tags will be in the center of the window. Reformatting Tag Reformatting Tag Allows text to be presented with specific formatting on the screen. The preformatted text ends with an end tag. Within pre-formatted text you are allowed to use:

a) line feed

b) tab characters (shift 8 characters to the right)

c) disproportionate font installed by the browser.

The use of paragraph formatting tags, such as or , will be ignored by the browser when placed between the tags

Group list

List of group 6-M-11

This list contains last names, first names and patronymics.

The list may be used for official purposes only.

This is what you will see on your browser screen:

Attention! The "Group List" header is not displayed by the browser as part of the document. It will appear in the title bar of the browser window.

Line break
. Tag
notifies the browser about a line break. Best example using this tag is a formatted address or any other sequence of lines where the browser should display them one below the other. For example:

Alexey Yartsev
Dmitrovskoe highway,
9B, office 326

An additional parameter allows you to expand the capabilities of the tag
.

This option allows you not just to perform a line feed, but to place the next line starting from the blank left (left), right (right) or both (all) borders of the browser window. For example, if there is a picture next to the text on the left, then you can use the tag
to offset text below the picture:

As you can see, this diagram shows the connection

Links to points within a document. You can link to different areas or sections of the same document by using a special hidden marker for those sections. This allows you to quickly move from section to section within a document without scrolling the screen. As soon as you click on the link, the browser will take you to the specified section of the document, and the line containing the section marker (usually the first line of the section or section heading) will be placed on the first line of the browser window (if this line is not already present on the screen browser).

Create a section marker. The syntax for this marker is as follows:

Text-that-will-appear-on-the-first-line

Text

For example:

List of sections

• Section 1
• Section 2

Section 1

Section 1 text

Section 2

Section 2 text





The "#ex1" symbol tells your browser to look for a marker called "ex1" in this HTML document.

When the user clicks on the "Section 1" line, the browser will go directly to Section 1.


2.2 Graphics within a document

One of the most attractive features of the Web is the ability to include links to graphics and other types of data in an HTML document. This is done using a tag . Using this tag can significantly improve the appearance and functionality of documents.

There are two ways to use graphics in HTML documents. The first is the embedding of graphic images into a document, which allows the user to see images directly in the context of other elements of the document. This is the most used technique in document design, sometimes called "inline image". Tag syntax:



Let's describe the elements of the tag syntax::

A required parameter that has the same syntax as a standard URL. This URL tells the browser where the image is located. The drawing must be stored in a graphic format supported by the browser. Today, GIF and JPG formats are supported by most browsers.="text":

This optional element specifies the text that will be displayed in a browser that does not support graphics display or with image swapping disabled. Typically, this is a short description of the image that the user could or will be able to see on the screen. If this parameter is missing, then in place of the picture, most browsers display a pictogram (icon), by activating which the user can see the image. The ALT tag is recommended if your users are using a browser that does not support graphical mode, such as Lynx.=n1:

This optional parameter is used to specify the height of the image in pixels. If this parameter is not specified, the original height of the image is used. This option allows you to shrink or stretch images vertically, allowing you to more clearly define the appearance of your document. However, some browsers do not support this option. On the other hand, your client's screen resolution may be different from yours, so be careful when setting the absolute value of a graphic object.=n2:

The parameter is also optional, like the previous one. Allows you to set the absolute width of the image in pixels.: This parameter is used to tell the browser where to place the next block of text. This allows you to more strictly define the arrangement of elements on the screen. If this option is not used, then most browsers place the image on the left side of the screen and the text to the right of it:

This parameter tells the browser that this image allows the user to perform some action by clicking on a specific location in the image. This feature is an HTML extension.

Here is an example of using this tag:



Since HTML 2.0, the tag additional parameters have appeared:



New options::

Allows you to set the size in pixels of the empty space above and below the image so that the text does not overlap the image. This is especially important for dynamically generated images, when it is impossible to see the document in advance:

Same as VSPACE, but only horizontally.

Background pictures. Most browsers allow you to include a background image in your document, which will be matrixed and displayed in the background of the entire document. Some users like background graphics, some don't. An unobtrusive, translucent pattern (wallpaper) usually looks good as a background for most documents.

The description of the background image is included in the BODY tag and looks like this:

.

Each of the parameters determines the color of a particular element. Let's describe these parameters:

Document background color:

Document plain text color:

Link color. The color is specified as a six-digit number in hexadecimal format using the RGB scheme (Red, Green, Blue). The color #000000 is black, and the color #FFFFFF is white. For example:

This line defines white document background, black text and silver links.

Horizontal line. Using the tag, you can separate text with a horizontal line.

Tag format:

Tag parameters::

Line thickness in pixels:

Line width in pixels or percentage of the browser window width.: Screen location (left | center | right).: By default, the line is presented in 3D view with a shadow. NOSHADE allows you to present a line as simply a monochromatic dark stripe.


2.3 Adding styles to a document

allows you to use different font styles to highlight text information in your documents. Here short list styles supported by most browsers: (bold)(italic)spaced (type writer - using fixed fonts)

You can combine various types styles, such as bold and italic.


Table No. 1: Basic text styles




Combining styles allows you to display multiple elements in one line with different styles, for example:

Life - this is a song!

Life is a song!

Attention!Addition large quantity styles and their combinations make it difficult to read the text!

Additional styles:

big

· small (small)

· sub (interlinear)

· sup (superscript)


Table No. 2: Additional text styles




Font size. You can change the font size using the tag:

The font size can be from 1 to 7. You can directly specify the font size with a number, or specify an offset relative to the base value (default - 3) in a positive or negative direction. The base value can be changed using the tag:

For example:

change

Change font color. You can change the font color using the tag: