HTML code. HTML color codes

HTML - Standard Hypertext Markup Language. (English abbr. HyperText Markup Language ).

The HTML language was invented back in the 20th century to display text (in the beginning it was just text) and then as it developed computer technology Videos, audio, images, etc. began to appear. (in the 21st century this information was called “content”), which naturally led to the need to expand the Internet. Thanks to this, the HTML language began to develop.

Today, besides HTML, there are other programming languages ​​- PHP, CSS, MSQ, Java scripts and others. Their number is constantly growing, as is the quality of code writing.

The HTML language essentially only performs page markup, what should be displayed on the site, and other languages ​​give the page “colors” and combine into a single whole, giving the site beauty and meaning.

In the 21st century, such a concept as the Web-2.0-age of multimedia is already in full use, in which the text is already fading into the background. But on at the moment Text is still used on websites, as a rule, to describe some actions or elements of the site, be it video or audio material. Therefore, you still need to learn the HTML language, without which you will not be able to write and beautifully design text and other elements of the site.

The HTML language has many versions, but as a rule they have not undergone many changes. Currently the main version HTML language is HTML 4.01 Transitional - the transitional language from HTML 4.01 Transitiona to HTML 5.0 latest on given time HTML versions.

IN this course HTML 4.01 Transitiona language will be considered since the fifth version is still under development.

So let's start learning the HTML language. I will give you a description of only those tags that are often found when writing websites, and the rest are either not used at all or are used very rarely.

Table of HTML tags and attributes.

Tags and attributes:	Description of tags and attributes:
	Paired tag (has an opening and closing tag with a "/" in the closing tag). Is a generic tag HTML. This is a common container that everyone fits into. existing tags. This tag and the following three are required for any HTML-pages.
	.This tag contains the name of the site page. Search engines look for this name first.
	Paired tag. It's written inside tag pair .This tag contains; sticky table CSS styles, site page title, page description, scripts, page encoding.
	Paired tag. Written inside the paired tag after the pair tag . This tag contains all other tags HTML which give page appearance and volume. The entire process of creating a website takes place in this tag.
	Paired tag. Written inside the paired tag . This tag is used to highlight headings on the site. The higher the number in the tag, the lower the heading value. Accordingly, the smaller the title, the less its influence on search engines in terms of site optimization. This tag plays a big role, as does the tag in finding the site in search queries.
	Paired tag. Written inside a paired tag . The main purpose of this tag is to divide texts into paragraphs.
	Paired tag. Written inside the paired tag . Is a link to other sections of the same HTML page or a link to another site.
	. The purpose is the same as the tag, but can divide all content into parts by placing spaces between them. Has little physical activity.
	Unpaired tag. Written inside the paired tag . The tag shows that in this place there is an image.
	Paired tag. Written inside the paired tag . Inserts a table into the site.
, ,	. The main purpose of these tags is to make sections of text bold And italic to attract the human eye. These tags allow you to highlight the main idea of ​​the text.
	Paired tag. Written inside the paired tag . The tag has no meaning, but using this tag you can highlight any area HTML pages with which you can make any changes in terms of design in the CSS style sheet.
	Paired tag. Written inside the paired tag . The purpose is the same as the tag , but with a smaller radius of action that operates inside the tag .
, , , , ,	Paired tags. Written inside the paired tag . Divide the text into lists with bullets.
Paired tags. Written inside the paired tag . Divide the table into rows and columns.
		Paired tag. Written inside the paired tag . Selects the main row in the table, makes the text bold and aligns it to the center of the cell.
src="", href=""	Two attributes whose essence is that they give the address of the information that is indicated in them. That is, they indicate the place where this or that content is located. And this can be either regular text or a resource, or some kind graphic information; image, video, audio, etc. But these attributes are strictly separated by purpose. The src="" attribute gives addresses only to graphic sources, that is, the place where they are located. And the href="" attribute gives addresses only to other pages of the site or to other resources, that is, in fact, it is a banal hyperlink to another source that is located on another page of the site.
class=""	An attribute that can be assigned to almost every tag. The essence of this attribute is to give a name to a specific piece of content when it is further examined and modified using CSS style sheets.
title="", alt=""	The essence of which is to give two attributes to some graphic source, for example; image, description. But since there are two of them, their description is different. IN title attribute="" a description is written that will be highlighted when you hover the mouse cursor over this object so that the visitor knows what is hidden under this object. Typically this is a link. IN alt attribute="" a description of this object is written that makes it clear to the search engine what kind of object it is so that it can be entered into the database for indexing. This description invisible to site visitors, but visible to search engines.
align="", valign=""	The essence of these two attributes is to align a certain area of ​​the site horizontally or vertically. That is, they make it clear to the browser in which area of ​​the site it should be located. this information. The align="" attribute aligns specific or all content horizontally. The valign="" attribute aligns some or all content vertically.
width="", height=""	Two attributes whose essence is to stretch or shrink some object on the site. Essentially these attributes make certain objects deform for example; tables, in height and width, thereby changing their sizes.
border=""	Table frame attribute. Using this attribute you can make visible and invisible frame table, and also set the thickness of the frame.
cellpadding="", cellspacing=""	The essence of the two attributes is the same as in the border="" attribute, but the only difference is that borders are assigned not to the entire table, but to its row and column elements.
bgcolor=""	An attribute that specifies the color of the table border.

If you open any web page, it will contain typical elements that do not change depending on the type and focus of the site. Example 4.1 shows the code simple document, containing the main tags.

Example 4.1. Source code web pages

Heading

First paragraph.

Second paragraph.

Copy the contents this example and save it in the c:\www\ folder as example41.html. After that, launch the browser and open the file through the menu item File > Open File (Ctrl+O). In the document selection dialog, select the file example41.html. The web page shown in Fig. 1 will open in the browser. 4.1.

Rice. 4.1. Result of running the example

Elementis intended to indicate the type of the current document - DTD (document type definition, description of the document type). This is necessary so that the browser understands how to interpret the current web page, because HTML exists in several versions, in addition, there is XHTML (EXtensible HyperText Markup Language), which is similar to HTML, but differs from it in syntax. So that the browser “does not get confused” and understands according to which standard to display the web page, it is necessary to set in the first line of code .

There are several types, they differ depending on the version of HTML they are targeting. In table 4.1. The main types of documents with their descriptions are given.

The difference between a strict and transitional document description is a different approach to writing document code. Strict HTML requires strict adherence to the HTML specification and is unforgiving of errors. Transitional HTML is more relaxed about some code flaws, so this type is certain cases preferable to use.

For example, in strict HTML and XHTML the presence of the tag is required

Tag


Textpages

In the site code itself, the case of letters does not matter; you can write both “HTML, BODY...” and “html, body...”.

T egi And serve to ensure that the document code is recognized as html.

– indicates that the “head” of the page begins – the page title and its technical information.

– page title. What is written between these two tags will be displayed in the browser header.

– the “head” of the page is over.

There are opening tags <тег> and closing . There are tags that do not need to be closed. Some tags, even if not closed, do not cause errors, but always close if they need to be closed.

Page text – between these tags there is all the content of the page – text, pictures, links, etc.

– the document has ended. Typically this is t tag y mill is added at the very end of the document.

Text formatting tags

-

- these are the headings.

The smaller the number, the larger the font in the title; you can adjust the size of each type of title. It is believed that tags

,

the most “favorite” tags by search engines; through these tags, search engines determine the topic of the content. Tags

-

must be closed.

Examples:

Second level title tag

- hsecond level header

Fourth level heading

- h fourth level header

Tags are also often used to format text - , , , , .

The text will appear in bold The text will appear in bold – tag analog Italic text - analogue Underlined text Crossed out text Increased And decreased text compared to the current one.
Superscript -X 2 Subscript -X 2 Monospace text - like a typewriter

All these tags are double-sided and should be closed. Tags can be used in combination. For example:

Bold, italic and underlined text

As a rule, tags are closed in the order in which they were opened. If you change the order, nothing may change, but if you have complex text formatting, you will have problems.

Line feed and text blocks

Title tags (

-

) translate the line after them (“press enter”), unless otherwise specified in the style sheets. When you write text in “naked html” your line breaks will not be taken into account, the text will go in a row until headings or special tags.

– translates the line. The closing tag is not needed. If you need big gap You can use several such tags between lines, for example,




– five line feeds.

---

– horizontal dividing line:

Many tags can use special attributes, e.g.

---

You can specify its thickness:

---

http://site.ru/image.png - Thisimage address.

http://site.ru/"> Go to Site.ru

Wherehttp://site.ru/ - the site to which the link leads,Go to Site.ru – link name , the so-called anchor.

The link code contains the attributetarget=" _blank " - the link will open in a new window, and there will be pictures in the codeborder="0″ - the picture will not have a frame.

Lists

Lists are created with the following html codes:

• First list item


• Second list item


• Third item on the list

Tables

Tables are a more complex element than these html tags, you can devote a whole post to them, here I’ll just show an example of the code for the simplest table:

Content

A line break is placed after each tag in the code for ease of editing the html code. The same table code can be inserted like this:

Content

This is the main structure of the site page. Knowing the basics, you can move on to more complex ones.

Basic html codes updated: April 10, 2017 by: admin

Traveling across the expanses World Wide Web, you were able to notice how different design and capabilities of web pages. But not every one of you knows that all this diversity is implemented on the basis of language HTML.

Everything 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 markup language HTML. Click right click mouse over any web page, and select the item from the drop-down menu "view HTML code" or "Source code"– will appear text editor with symbols and icons that are incomprehensible to you - this is HTML-page code.

Any WWW document can contain stylized and formatted text, graphics and hyperlinks to various Internet resources. To realize all these possibilities, it was developed special language descriptions of WWW documents called HyperText Markup Language (HTML), that is, 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 file, containing the actual text that carries information to the reader, and markup tags. Tags are sequences of characters defined by the HTML standard that serve as instructions to the browser.

According to these instructions, the program places text on the screen and includes pictures stored in separate graphic files, and forms hyperlinks with other documents or Internet resources. Thus, an HTML file takes on the appearance of a Web document only when it is interpreted by the browser.

However, in standard HTML there is one significant drawback. For example, in order to describe the layout 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.

What a headache for programmers! To make life easier for poor webmasters, they were invented Cascading Style Sheets(CSS) - cascading tables styles.

CSS operates in a different, more convenient and economical way. To design paragraphs in the site content, a code or design style is written once. This code or style description is saved in separate file. Further it is necessary only when HTML help mark up the text into paragraphs, and CSS will take 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 style sheet.

CSS together with HTML can work wonders, all thanks to the division of labor in creating web pages. The markup of page elements is based on HTML, and visual design elements are given using CSS tables

CSS Style Sheets- an attempt to separate the details of the page design from its structure and content.

For now, this is a Chinese letter for you. But I won’t pretend to be a guru and write another tutorial “What is HTML and CSS”. You will find a whole carload of similar information on the Internet, plus many published textbooks. If you want to go deeper into the topic, the flag is in your hands. Don't be afraid HTML And CSS are very simple, and any teapot can master them. But there is no need to rush into this yet.

By own experience I know that it is better not to overload the teapot’s brain with unnecessary information, otherwise it, i.e. the brain will boil ahead of time. Don’t believe the smart guys on various sites who claim that creating a website needs to start with learning HTML and CSS. I have for you good news– you don’t have to write the HTML code yourself, because smart people came up with CMS .

< Как работает браузер

HTML page and its structure defined by the main tags

Let's see what the most ordinary Internet page looks like from the inside.

• HTML structure By by and large lies at the heart of every web page.
• Today there are several types HTML documents. Each document type has its own HTML structure(details at the bottom of the page).
• Correct initial HTML structure is collateral cross-browser site compatibility.

In the system Start menu or Start, go to the Programs section (All Programs), open the Accessories folder, select Notepad. Of course, this is not the only tool for writing code, but at this stage it is what you need.

Example document structure:

Let's consider HTML tags, defining the structure of the page

• - mandatory, determine HTML document.
• - define a section with service information, contain instructions for search engines, browsers, and scripts.
• - determine the main title of the web page.
• 
  
  - mandatory, determine the visible part of the document.

• - define the 3rd level heading.
• - define the paragraph. See the lesson HTML paragraphs

HTML document structure | Writing the page code

The sequence of actions is as follows:

1. Write the code in Notepad HTML pages:

4. Open IE ( Internet Explorer) or another default browser. In its menu we try to find and open the file index.html saved on the computer. You can also find and open a file in any browser in the window that appears after typing a combination of two keys on the keyboard: Ctrl and O - hold down Ctrl and then press Latin letter O.

To further study the material, you need the following:
You simply must have several different browsers on your computer. Download Mozilla Firefox, Opera for free and continue our lesson.

Open index.html when Firefox help. IN earlier versions this browser, you would not be able to read the text you wrote, it would display strange symbols. This incorrectness can be eliminated by simply including in HTML code of two tags with a set of attributes that are also required.

Correct HTML 4.01 structure

This should be the initial structure HTML pages :

Add paragraphs and a title yourself and see what comes out. Do not forget to refresh the contents of the browser window after each saving of the document by clicking the button in Mozilla Firefox or buttons in Internet Explorer, or F5 for the changes to take effect.

Did everything work out for you? - So you were careful and did everything right.