You have probably come across such a concept as HTML code. We heard from friends, saw in the menu of their browser, etc. But what is it? Let's try to find out what kind of code it is and what elements it consists of.
Basic information
Let's start with a definition. HTML-code is the markup of any web page that is executed using the HTML language.
This code consists of tags, thanks to which the browser determines how this or that page looks. Its structure is divided into two parts: head - the title of the document, in which the name of the page is written, as well as information about the document itself, and body - the body of the document, in which the page parameters are set.
In order to create a more or less decent web page, written from scratch, you should study the tags used by this language, their parameters, and also know the codes hTML colors.
Tags
Tag is an element of the HTML language. It can be used to set the font, color, size of text, insert tables and pictures into it, format, create headings, links, and color the page.
Tags are always enclosed in angle brackets -<>, and this is what distinguishes them from the main text, which is displayed on the page when viewed. They are of two types - paired and single.
Paired ones consist of an opening tag and a closing tag, while the last tag is followed by a forward slash after the left angle bracket. For example: text.
Between the two tags there is a text, table, picture or other element that is displayed on the web page.
Singles consist of one tag and do not contain a forward slash. For example:
.
Tags can have parameters that can be set using special codes for HTML.
Also note that for most characters: dogs, brackets, greater than or equal, less than or equal to, and many others - there is a special table in which the codes of these characters are written. This code begins with an ampersand, followed by either its literal mnemonic designation, or a pound sign with a three-digit character code. A semicolon must be put at the end.
Main tags
We figured it out, now we will try to list the main tags that can be useful, if not when creating your own web pages, then at least when designing texts.
- < body> - contains the main parameters of the document, such as links, fields and others;
- < p> - indicates a paragraph;
- < b> - makes the text bold;
- < i> - italic;
- < u> - underlines the text;
- < s> - crosses out the text;
- < sup> - sets the text as superscript;
- < sub> - subscript;
- < font> - sets the parameters of the font: size, font, color;
- < div> - with it you can align your text;
- < h>- tag headers;
- < a> - with its help links are set;
- < table> - helps to insert tables into the document, tags are associated with it< tr> (string) and< td> (cell).
Single:
- single, transfers the text following it to new page;
- it can be used to insert a horizontal line into the text.
It should be noted that tags are usually written with new line... This is done for the convenience of not only the layout designer himself, but also those who will view the codes in HTML.
Tag parameters
We have already covered with you the main tags that you want to know. Of course, we have not listed everything, but even this minimum may be enough to create your first web pages.
But it's not enough to know some tags, you still need to study the parameters that can be set. In this article we will only do them. short review, we will describe the most frequently used ones. You can see them by opening any HTML code.
We will also not describe for which tag this parameter is suitable, since many of them are used in most web markup commands:
- face - sets the type of font;
- size - sets the size;
- color - sets the color;
- align - alignment;
- name - name;
- href - this parameter sets the link address;
- alt - alternative text;
- width - width;
- height - height;
- background - background image;
- bgcolor - background.
These are not all the parameters, we have listed only the most used and well-known ones.
The parameter is followed by an equal sign, and then its value is written in quotes. When developing sites and pages, we advise you to use special tutorials or manuals in order not only to know the basic parameters, but also to set them correctly.
Color chart
So, with the main tags and their parameters, we figured out, now let's look at the HTML color codes. It is with their help that you can set the color of the text, page or its individual elements.
Novice webmasters should know that there are special color tables that give codes for each shade. There are total 16 basic colors, which can be set not only using the table, but also simply by indicating their name on english language... You can also add words light and dark to them, setting the desired shade.
There is also which has 216 all kinds of edemas.
Note that tables are much more convenient to use. They are given a hexadecimal color code. In this case, you can immediately see this shade. Each code starts with a hash sign, followed by three pairs of signs that characterize the intensity of red, green, and blue.
It is enough to copy this code and substitute it into the parameters of the tag you need.
How to view the page code
If you are interested in creating web pages, then you will probably be interested in looking at the HTML code of a site that you like, or one that you visit quite often.
But how to do that? There are two ways that are pretty simple and straightforward. The first is to open the page you need and press the Ctrl + U key combination. A new window will show source page that you can view and study.
The second way is to press left button mouse and select the item "Source code". But we still recommend that you use the first method, since the use of hot keys is much easier and more convenient.
Note that while reading the code, you will also be able to view the comments to it written in the "Comment" tag, which looks like this:... In this case, the comment itself is written after exclamation mark... It is not displayed in the browser. And it is written mainly so that other programmers and web designers can understand what kind of information block is located below, why this or that piece of code was indicated.
conclusions
Writing HTML codes is not as difficult as it might seem at first glance. Especially if you are unassuming and want to create simple websites, electronic textbooks based on HTML, etc. Learning basic tags and the principle of markup does not take long. Even a couple of days will be enough for you to start creating your own projects.
Note that if you decide to study given language markup, then be careful. Most of the problems arise precisely because of inattention: unclosed paired tags, incorrectly spelled parameters, typos - all this threatens to turn into an error that you can search for a long time. But in general, learning HTML-markup of pages is quite interesting.
Traveling through the vastness World wide web, you could notice how different design and capabilities of web pages... But not all of you know that all this diversity is implemented based on the language. Html.
Everything that you see on the page - text, pictures, tables and other elements that form the semantic content of the web page, called content, are created using the markup language Html... Click right click mouse on any web page, and select the item "view HTML code" or "Source" - will appear text editor with incomprehensible symbols and icons - this is Html-page code.
Any WWW-document can contain stylized and formatted text, graphics and hyperlinks to various Internet resources. To implement all these possibilities, a special language for describing WWW documents was developed, called HyperText Markup Language (HTML), i.e, Hypertext Markup Language.
Description of the web page on hTML language is a set of instructions interpreted by a browser program.
A document written in HTML is text filecontaining the actual text that carries information to the reader, and markup tags. Tags are HTML-defined sequences of characters that are instructions for the browser.
According to these instructions, the program arranges the text on the screen, includes drawings stored in separate graphic files, and forms hyperlinks with other documents or Internet resources. Thus, an HTML file only becomes a Web document when it is interpreted by a browser.
However, in standard language HTML has one major drawback. For example, in order to describe the markup of paragraphs in content and their design, it is necessary to describe these properties for each paragraph, even if there are 10 or 20 paragraphs on one page. And, imagine that the site can have 100 pages. As a result, you need to insert the same piece of HTML code into the page twenty or two hundred times, increasing the file size.
And what a headache for programmers! To make life easier for poor webmasters, were invented Cascading Style Sheets (CSS) - cascading style sheets.
CSS acts in a different, more convenient and economical way. To design paragraphs in the content of the site, the code or style of design is prescribed once. This code or style description is saved in separate file... Further it is necessary only for hTML help mark the text into paragraphs, and CSS takes care of their design. The code is reduced tens and hundreds of times.
Placing style descriptions in a separate file is very convenient, especially if the site has more than one page. For example, to change registration all paragraphs on the site, just change the code in the stylesheet.
CSS, together with HTML, can work wonders, and all thanks to the division of labor for creating web pages. The layout of page elements is made on the basis of HTML, and the visual design of the elements is given using CSS tables
Tables cSS styles - an attempt to separate the details of the page design from its structure and content.
For now, this is a Chinese letter for you. And I will not pretend to be a guru and write another self-study guide "What is HTML and CSS". You will find a whole wagon of such information on the Internet, plus a lot of published textbooks. If you want to delve into the topic - the flag is in your hands. Do not be afraid, Html and CSS very simple, and any kettle can master them. But there is no need to rush into this yet.
From my own experience I know that it is better not to overload the kettle's brain with unnecessary information, otherwise it, i.e. the brain will boil ahead of time. Don't be fooled by the clever guys on various sites who claim to start building a website with learning HTML and CSS. I have good news for you - you don't have to write the HTML code yourself, because smart people came up with CMS .
| < Как работает браузер |
|---|
Monospace fonts are created using tags
,
and
... The results of applying these tags are usually identical: a monospaced font with fixed character and spacing.
Tag
Tag Tag serves to enter text without formatting, that is, preserving all spaces, tabs and line breaks. Most text formatting elements can be applied within this element. Attention: In language HTML hyphenation lines, consecutive spaces and tabs are ignored. Several spaces in a row are treated as one space. Inside element
- an inline container element that is used to insert small pieces of program code into it, for example, in a web document representing tutorial on programming. Browsers display this code in a monospaced font (for example, Courier New). If you use ero with an element
Example: using elements and
The browser duplicates every space or line break it encounters, keeping your original formatting.
If (document.getElementsByClassName) (x \u003d document.getElementsByClassName ("pagination") if (x.length\u003e y) (x.style.visibility \u003d "hidden";)
Inside the "pre" element, the browser duplicates every space or line break it encounters, keeping your original formatting.
if (document.getElementsByClassName) (x \u003d document.getElementsByClassName ("pagination") if (x.length\u003e y) (x.style.visibility \u003d "hidden";)
Tags and
Tag
marks a piece of code as keyboard input by the user. Some browsers mark such text with an additional background.
Tag
is used to generate computer output, such as text displayed in a console window after you enter a control script. This infrequently used element simply displays its content in a monospaced font like
, ,
.
Example: elements and
- Try it yourself "
Place the text that the user must enter from the keyboard in
the "kbd" container element.
Enter text: This is the text entered from the keyboard
This is the text that is placed in the "samp" container
Tag
Tag is used for the purpose of additional highlighting of variables in the program code. It defines a variable in mathematical expression or a program parameter and is usually displayed in italics.
Example: elements
- Try it yourself "
Kinetic energy of the body:
Kinetic energy of the body:
Wto = mv2/2
Tasks
Final task
In this lesson, you learned about tags that display their content in a monospaced font, highlight variables in the code, and a preformatting tag. All of them are important when working with math expressions and program code.
It's time to repeat what you learned and complete three simple tasks:
Variable
- Decide for yourself "
Using html elements, designate y as a variable in the above equation.
Parabola equation y \u003d Nx 2
Parabola equation y \u003d Nx 2
Preformatted text
- Decide for yourself "
Using hTML element make the text placed in the code element appear in the browser, keeping all whitespace and line breaks as they are.
If you open any web page, it will contain typical elements that do not change from the type and focus of the site. Example 4.1 shows the code simple documentcontaining the main tags.
Example 4.1. Source code of the web page
Title
First paragraph.
Second paragraph.
Copy content this example and save it in c: \\ www \\ as example41.html. After that launch the browser and open the file via the menu item File\u003e Open File (Ctrl + O)... In the Select Document dialog box, specify the file example41.html. The web page shown in Fig. 4.1.
Figure: 4.1. Example execution result
Element is intended to indicate the type of the current document - DTD (document type definition, document type description). This is necessary for the browser to understand how the current web page should be interpreted, since HTML exists in several versions, and there is also XHTML (EXtensible HyperText Markup Language), which is similar to HTML, but differs in syntax. So that the browser does not "get confused" and understands according to which standard to display the web page and it is necessary in the first line of code to set .
There are several types , they differ depending on the version of HTML they are targeting. Table 4.1. lists the main types of documents with their description.
| DOCTYPE | Description |
|---|---|
| HTML 4.01 | |
| Strict HTML syntax. | |
| Transitional HTML syntax. | |
| Frames are used in the HTML document. | |
| HTML 5 | |
| This version of HTML has only one doctype. | |
| XHTML 1.0 | |
| Strict XHTML syntax. | |
| Transitional XHTML syntax. | |
| The document is written in XHTML and contains frames. | |
| XHTML 1.1 | |
| The developers of XHTML 1.1 anticipate it will gradually replace HTML. As you can see, this definition has no division into types, since the syntax is the same and obeys clear rules. | |
The difference between strict and transient document descriptions is the different approach to writing document code. Strict HTML requires strict adherence to the HTML specification and is unforgiving. Transitional HTML is more "relaxed" about some code flaws, so this type is preferable in certain cases.
For example, in strict HTML and XHTML, the tag
Tag
Title
First paragraph.
Second paragraph.