The Internet is a worldwide network that connects computer networks around the world on the basis of uniform standard agreements (protocols) on methods of information exchange unified system addressing.

To date, the Internet has gained unprecedented popularity. According to experts, the Internet connects more than 100 million computers. More than 300 million people in 170 countries use Internet services.

From a functional point of view, the Internet is:

ü an inexpensive, fast means of communication between subscribers around the world;

ü an unparalleled repository of information on any field of knowledge;

ü a new promising environment for activity.

The influence of the Internet extends not only to the technological field of computer communications, it also has a social dimension and permeates the entire society as operational means gaining knowledge, e-commerce.

The most widespread and in demand today is such an Internet service as WWW (World Wide Web − World Wide Web). Information on the WWW is presented in the form of so-called hypertext (or, more broadly, hypermedia) documents, which can contain formatted text, graphics, audio and video fragments. The main feature of hypertext documents is the presence of active zones that are sensitive to a mouse click. Fragments of text can be active , whole images and their parts; clicking on the active zone causes the download of the (target) document associated with this zone.

To learn how to post materials on the Internet, you first need to become familiar with hypertext markup language HTML (H yper T ext M arkup L English)

HTML Basics

The markup language for hypertext documents HTML is a set of commands called tags (from English tag). HTML tags found in the text of a document are interpreted by the browser when displaying the document.

Viewing HTML documents is carried out using programs - browsers(from English browser), which display the document according to HTML markup and provide hyperlink navigation. The most common browsers areMicrosoftInternetExplorer Microsoft Corporation and NetscapeNavigator from Netscape Communications Corporation.

Since an HTML document is text file, it can be prepared in the simplest text editor, for example, in notepad ( Notepad), but it is very labor-intensive. More often, specialized editors are used, designed specifically for preparing HTML documents, which allow you to insert tags using toolbar buttons or menu commands, and set tag attributes in dialog boxes, For example, Macromedia dreamweaver, MicrosoftFrontPageHomeSite and etc.

An HTML document can be obtained by converting to an HTML format, for example from a package document format Microsoft Office. It should be noted that with such a transformation the original HTML text- the document turns out to be extremely redundant and needs correction. It is much more effective to use special HTML editors.

HTML Tag Syntax

An HTML tag is written in angle brackets (characters) and consists of a name, which can be followed by a list of attributes (optional for most tags). The names and attributes are English words and abbreviations.

Tags can be divided into two groups:

Doublestags (also called containers) have two components: opening (initial) and closing (final); the closing component has the same name, but when written, the name is preceded by a slash (the symbol / ). Document text and other tags can be located between the opening and closing components. The document fragment located between the opening and closing elements of the container tag is formatted by the browser according to the meaning of the tag. For example, the text located between the tags And, will be displayed in bold (the name of the tag is from English bold). Paired tags can be nested but must not overlap.

Unpairedtags (also called autonomous) do not have a final component. When they are interpreted, one or another object is inserted into the displayed document. For example, tag , occurring in the text of an HTML document, causes an insertion graphic image from the pict.gif file.

The attributes in the list are separated from each other by one or more spaces, or tab characters, or newline characters; the order in which the attributes are written is not important. The vast majority of attributes are used as a pair attribute name = attribute value. When the attribute value is more than one word or one number, it should be enclosed in single or double quotes. Attributes are not specified in the closing components of tags.

Here is an example of a tag with attributes:

Tag name Attribute name

Attribute value

Attribute name

Attribute value

Hello !

Having encountered such a tag in an HTML document, the browser interprets it, displaying the text following the tag in characters increased relative to the base size (SIZE=+2) and red color (COLOR=RED); this text formatting is applied until the closing tag is encountered.

The case of characters in tag and attribute entries does not matter.

HTML Document Structure

An HTML document is enclosed in the and tags. Between these tags there are two sections: the header section (between the and tags) and the body section of the document (between the and tags). The header section contains a description of the parameters used when displaying the document, but not reflected directly in the browser window .The document body section contains the main text intended for display by the browser, formatting tags, placement of pictures, tables, hyperlinks, etc.

HTML - the code of the simplest document suitable for posting on the Internet looks like this:

< TITLE > Our first pageTITLE >

The simplest HTML document

This code can be typed in the Notepad text editor and saved as a file with the extension . htm or. html − in this case, the document will open in the default browser installed on your computer. The browser will display this document by displaying in its window the line "The simplest HTML document" located in the body section of the document. The phrase "Our first page" will appear in the title bar of the browser.

HEAD Section

The header section usually contains tags that are invisible to the user, but nevertheless can actively influence appearance document.

Tag	Purpose
	Specifies the name of the entire document. The name is usually displayed in the title bar of the browser window. This element is required for any HTML document and can be specified no more than once.
	Specifies the current document's base address (URL), which will be the starting point for calculating relative URLs within the document. The element does not have an end tag. At least one of the arguments must be present: HREF- determines the base address (URL) of the current document. TARGET- defines the frame name that will be used in hyperlinks by default. This may come in handy if you want to open all the links in a document in a different frame.
< STYLE TYPE= "text/css ">	Used to insert cascading style sheets (CSS - Cascade Style Sheet) into a document. TYPE is a required attribute whose value is usually " text/css".
< МЕТА …>	The META element is used for technical description document. Using this element, additional information is inserted into the document title helpful information, invisible to the user, but sometimes simply irreplaceable for the correct indexing of your page by search engine robots. The element does not have an end tag. NAME - defines the name of the meta post. There are many predefined names, some of which you can see in the example below. CONTENT - assigns the value to the meta entry defined in the NAME parameter.

BODY section

This section includes the main content of the web page - document text, images, tables, etc. The BODY element must appear no more than once in a document and can include the following attributes:

Attribute syntax	Purpose
MARGINHEIGHT= number	Specifies the width (in pixels) of the document's top and bottom margins. Works only in Netscape browsers
TOPMARGIN= number	Specifies the width (in pixels) of the document's top and bottom margins. Only works in Internet browsers Explorer
MARGINWIDTH= number	Specifies the width (in pixels) of the document's left and right margins. Works only in Netscape browsers
LEFTMARGIN= number	Specifies the width (in pixels) of the document's left and right margins. Works only in Internet Explorer browsers
BACKGROUND= URL	Specifies the image to "fill" the background (background image). The value is specified in the absolute or relative address of the image (see section Placement of drawings)
BGCOLOR= color	Specifies the background color of the document. MicrosoftInternetExplorersupports 16 standard color names ( aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white) Another way is to use a color code in the form of a six-digit hexadecimal number that specifies the intensity of the red (first two digits), green (next two digits) and blue (last two digits) components. The intensity of each component in hexadecimal form ranges from 00 to FF. When specifying color as an attribute value of some tag before hexadecimal number the # symbol is inserted. For example, record COLOR="#0000 FF " means blue color Despite the fundamental possibility of specifying millions of colors, it must be taken into account that browsers display only 256 colors, and each browser has its own color palette. In this palette, the browser will select the color closest to the specified one
TEXT= color	Specifies the color of text in a document
LINK= color	Specifies the color of hyperlinks in a document
ALINK= color	Defines the highlight color of hyperlinks when clicked.
VLINK	Defines the color of hyperlinks to already viewed documents

Text formatting

Character Formatting

All character formatting tags have both an opening and a closing component and act on the text enclosed between them.

The main one is the tag ... FONT>, necessarily used with one or more attributes that change the size, color and typeface of the font:

Attribute syntax	Purpose
SIZE = meaning	The size is specified either as an absolute value (a number from 1 to 7) or relative to the base font size (in the form +n or -n).
COLOR= color	Color
FACE = font list	Typefaces for displaying text; names are listed in order of preference separated by commas, for example,FACE="Verdana,Helvetica,Arial,Sans-Serif" You can also specify one of the typefaces, but keep in mind that this font may not be installed on the user’s computer, and “exotic” fonts will not be displayed by the browser

In addition, tags are used to change the style of characters:

. .. (from English bold) − bold font;

.. . (from English italic) - italics;

... (from English TeleType) – monospace font;

... (from English u underline) – underlined;

... S > (from Englishs trikethrough) - crossed out;

... (from English s ub script) – subscript;

... (from English sup erscript) is the superscript.

Text enclosed between tags

and (from English pre formatted), is displayed as it was pre-formatted, with all spaces and line breaks.

Formatting Paragraphs

The text is displayed in the browser window word by word; when the right border of the window is reached, the next word is automatically moved to a new line. Even if several spaces were entered in the page code or the text was written on a new line, these actions will not be displayed when viewed in a browser. Therefore, to display a series of consecutive spaces or several empty lines in the text, you have to use various tags.

Tag
(from English b reak)breaks the text stream and inserts a new line without creating a new paragraph. Multiple consecutive tags
are interpreted as several empty lines. The line spacing is single. The tag has no closing component and no attributes.

Tag(from English p aragraph)begins a paragraph; a new paragraph is separated from the previous one by double line spacing. A paragraph cannot be empty, that is, several consecutive tags

are interpreted as one (as opposed to the tag
).Closing component

optional, since the previous paragraph ends where the new one begins. The tag has an optional ALIGN attribute indicating the alignment type of the paragraph, which can take values ​​LEFT, CENTER, RIGHT, and JUSTIFY , which set the alignment to left, center, right, and width, respectively. The text enclosed in tags will also be centered.

...

If the closing component

omit, the specified alignment type is retained until the next tag that specifies the alignment, or until the end of the document.

HTML allows you to create paragraphs formatted as numbered or bulleted lists. A text fragment, which is a list, is enclosed in tags:

ordered (numbered) list (from English o rdered l ist)

unordered (bulleted) list (from English u nordered l ist)

Each element of the ordered or unordered list consists of tags... (from English l ist i tem). When displaying text, each list element will be placed on a new line, indicated by a number or marker. In addition, the list can have a title, which is specified by a tag (from English l ist h eader). Closing tags are not required.

	Numbered list	Bulleted list
Code element	< O L> Heading First element Second element Third element	< U L> Heading First element Second element Third element U L>
Browser display	Heading 1. First element 2. Second element 3. Third element	Heading · First element · Second element · Third element

A multi-level list can be organized through a combination of numbered and bulleted lists.

Tag has optional attributes:

Attribute syntax	Purpose
TYPE = format	The numbering format can have the following values:
		Arabic numerals (default)
		capital letters
		lower case
		large roman numerals
		small roman numerals
START = value	first number in the list (default 1)

Tag has an optional attribute

Attribute syntax	Purpose
TYPE = format	The token format can have the following values:
	Disc	disk (default)
	Circle	circle
	Square	Square

Paragraphs can also be formatted as level headings (from n =1 to n =6), for this purpose tags like n >... n >. The first level heading is displayed in the largest font.

Tags

, ... ,

can have an alignment attribute ALIGN with the values ​​LEFT, RIGHT and CENTER.

Placement of drawings

The images displayed by the browser when viewing a web page are stored in separate files format gif, jpg (jpeg) or png , and in the page code a link is made to required file. For this, an unpaired tag is used, which has one mandatory and a number of optional attributes.

Required attribute:
SRC = url	Address graphic file(relative or absolute)
ALT= text	Alternative text displayed in browser mode without loading images (must be enclosed in quotes)
BORDER = meaning	Border thickness in pixels, 0 means no border (default)
BORDERCOLOR = color	Sets the border color
HEIGHT = meaning	Image height in pixels (original by default) or as a percentage of the browser window height
WIDTH = meaning	Image width in pixels (original by default) or as a percentage of the browser window width
HSPACE = meaning	Free space to the left and right of the image in pixels
VSPACE = meaning	Free space above and below the image in pixels
ALIGN = meaning	Aligns the image horizontally. If values ​​are given LEFT or RIGHT , the image will be aligned horizontally accordingly, setting these values ​​will ensure text wraps around the image

Let's take a closer look at the absolute and relative methods of addressing a file.

Addressing in absolute form used when referring to resources located on other servers. The universal address that determines the location of an information resource is called URL(Uniform Resource Locator - unified resource address). The URL consists of two parts, separated by a colon. The first part indicates the type of network protocol, which depends on the type of resource. For example, if the resource is located on a WWW server, this is the protocol http.The second part includes the name of the computer (server) in the domain name system and (if required) the path name of the file. When writing a pathname, directory names are separated by a forward slash (the symbol / ), in file and directory names differentiate between uppercase and lowercase letters, spaces are not allowed. Here are examples of URLs:

http://www. vshu. kirov .ru/ site / images / picture 1. jpg

http://195.21.123.13:8110

ftp://everything.com/soft/prog.zip

mailto: This email address is being protected from spambots. You need JavaScript enabled to view it.

Last URL pointing to the protocol mailto and address Email, does not link to any information resource; This is the only type of URL that does not include two forward slashes after the colon.

Addressing pictures in absolute form is practically not used when creating a website.

Addressing in relative form used when referring to resources located on the same server. When writing a file path, directory names are separated by a forward slash (the symbol / ), navigate through catalogs file system one level up is indicated by two dots (symbols .. ). To make it clearer, imagine a computer, for example, with the following directory structure containing HTML files:

SHAPE\* MERGEFORMAT

MySite

Pa ges

Images

Page1.htm Page2.htm Pict1.jpg Pict2.jpg

Index.htm Picture.jpg

In this case, for example, the following tag recording options are possible: IMG:

ü < IMG SRC = Picture . jpg >(Picture . jpg located on the page Index. htm)

ü < IMG SRC = Images / Pict 1. jpg >(Pict 1 image. jpg located on the page Index. htm)

ü < IMG SRC =../ Picture . jpg >(Picture . jpg located on the page Page 1.htm)

ü < IMG SRC =../ Images / Pict 1. jpg >(Pict 1 image. jpg located on the page Page 1.htm)

Despite the fact that formally only the SRC attribute is required, in practice it is also necessary to specify alternative text (ALT attribute), since many people work with the browser in mode without loading images.

The height and width of the area in which the drawing is displayed are specified using the width and height attributes in pixels or as a percentage of the screen size. When one of these attributes is specified, the drawing is scaled so that its height or width matches the specified one. The second size is set automatically, in the appropriate proportion. Applying only one of the attributes changes both dimensions of the drawing.
If you set both attributes explicitly, the image will be scaled along two axes in accordance with given dimensions. The height and width attributes do not change the loading time of the image, but only its appearance (size) on the screen.

Hyperlinks

A hyperlink is an object (text, image, image fragment) that, when clicked with the mouse, leads to a new document or document fragment. It is hyperlinks that allow you to organize transitions between any documents posted on the Internet.

Text hyperlinks

The connection between HTML documents and document fragments is organized using the tag ... (from English anchor - anchor).

The tag is used both to create a link to another document and to link to a fragment of a document.

Required attribute:
HREF = url	Address of the target document (can be presented in absolute and relative form)
Basic optional attributes:
NAME=" Name"	Marks the one between< A > and A > document fragment as a possible link object. As a value you need Latin alphabet write any indicator word unique to of this document. For example, tag Section 1 creates a so-called mark (bookmark) to go to section 1 . In this case, you can refer to the marked area by simply specifying its name after the document name (the mark name is preceded by a #). So, < AHREF="Index.html #part 1">To section 1A>will send you to the section " part 1" of the Index.html file, and < AHREF="#part 2"> To section 2A > − to the "part" section 2" of the current document, provided that the document has a corresponding mark
TARGET = " Name"	The name of the frame (frame) or window for displaying the target document. This attribute is used only in conjunction with the HREF parameter. The value must be either the name of one of the existing frames or one of the following reserved names: _self- indicates that the document specified in the HREF parameter should be displayed in the current frame; _parent- indicates that the document should be displayed in the parent frame of the current frame (entirely occupy the browser window); _blank- specifies that the document should be displayed in a new window
TITLE= " text!}"	Displays a tooltip when you hover the mouse over a hyperlink

Text and images placed between tags become the active area of ​​the document, sensitive to a mouse click that causes the target document to load. Hyperlink text is highlighted with underlining and colors specified as the value of the LINK attributes, A LINK, V LINK tag (or default color).

Hyperlinks-pictures

To make a whole image a hyperlink, you can also use the tag ... ., only instead of text (or together with text) between < A> And A>tag is located< IMG …> with all the corresponding attributes.

For example , .

Hyperlink map

The tag allows you to make a text fragment or image the active zone entirely; for the same thing different fragments If the same image was linked to different target documents, you will have to use a tag that implements the map image.

The only required attribute of a container tag is NAME, whose value will be a name (for example, NAME=" mymap", which must be used when describing the attribute USEMAP IMG tag describing the image intended to serve as a map (with a # appended to the map name on the left) USEMAP="# mymap")

Inside the container, each mouse-sensitive area of ​​the image must have a tag with the following attributes:

Attribute syntax	Purpose
COORDS= list	Comma separated list of coordinates of the active zone (depending on the type of the given zone shape)
HREF = url
SHAPE = form	Defines the shape of the core. Possible values ​​for this attribute: circle(circle – specified by the coordinates of the center and radius in pixels); rect(rectangle - specified by the coordinates of the upper left and lower right corners); poly(polygon - defined by the coordinates of its vertices) In all cases, coordinates are measured from the upper left corner of the image in pixels, the X axis is directed to the right, the axis Y - down.
NOREF	sometimes it is necessary to indicate that a given zone (specified by the SHAPE attribute and COORDS coordinates) is not active, there is no reaction to a mouse click

Tables

Tables in HTML documents are used not so much for the purpose of arranging data in framed cells, but for the purpose of arranging pieces of text and images relative to each other.

Tables in HTML are built line by line. All tabular data is enclosed in tags

; the description of each row of cells (rows) is contained in tags ... ; the contents of each cell are contained in tags ... (regular cells) or H>...H>(headings) .

Thus, to describe, for example, a table of two rows, each containing two cells, you will have to create the following construction:

Table cells can contain text, images, nested tables, etc. You should not leave table cells blank; if any cell should appear empty, place a non-breaking space in it.

Text placed in table cells is automatically placed by the browser by default; the text is displayed word by word; When the right border of the cell is reached, the next word is moved to a new line.

Table cells can span multiple rows or columns; when describing such cells, the attributes ROWSPAN (a cell whose tag contains this attribute is “stretched” by the specified number of rows) and COLSPAN (the cell is “stretched” by several columns) are used. Here is an example of organizing a table with merged cells:

< TR >

< TD ROWSPAN=2> 1-1 TD >

Tags that describe tables have a number of optional attributes.

Tag attributes specify the parameters of the table as a whole:

	Attribute syntax		Purpose
ALIGN = value		Alignment relative to the text flow; possible values ​​are left, right and center
BACKGROUND = url		Background image for the entire table
BGCOLOR= color		Background color
BORDERCOLOR = color		Border color
BORDERCOLORDARK = color		Colors the right and bottom edges of the main frame and the left and top edges of each cell with the specified color
BORDERCOLORLIGHT = color		Colors the left and top edges of the main frame and, accordingly, the right and bottom edges of each cell in the specified color
CELLPADDING = value		Distance from cell borders to its contents in pixels
CELLSPACING = value		Distance between cells in pixels
HSPACE = meaning		Free space to the left and right of the table in pixels
VSPACE = meaning		Free space above and below the table in pixels
WIDTH = meaning		Table width (set in pixels or as a percentage of the current browser window width)

Tag attributes specify the parameters of a given series (if contradictions arise, the attributes specified in the tag are canceled).Alignment of cell contents; possible values ​​are left, right and center

BACKGROUND = url

Background image for cells of a given table row

BGCOLOR= color

Background color for cells in this row

BORDER = meaning

The thickness of the border surrounding the cells of this row; BORDER=0 indicates an invisible border

VALIGN = meaning

Vertical alignment of cell contents; possible values ​​are top, center and bottom

Tag attributes specify the parameters of a given cell (if inconsistencies occur, the attributes specified in and tags are canceled).

Attribute syntax	Purpose
ALIGN = meaning	Align cell contents; possible values ​​are left, right and center
BACKGROUND = ur l	Background image for a table cell
BGCOLOR= color	Background color for cell
BORDER = meaning	Thickness of the frame surrounding the cell
VALIGN = meaning	Vertical alignment of cell contents; possible values ​​are top, center and bottom
WIDTH = meaning	Cell width in pixels or percentage of table width
ROWSPAN= meaning	Indicates the number of rows covered by a cell
COLSPAN = meaning	Specifies the number of columns covered by a cell

When working with tables, keep in mind that the specified value for the WIDTH attribute is in many cases only "noted" by the browser. The given proportions are rarely maintained exactly; the browser tries to display the table as best as possible (in its understanding).

Ticker

Using a ticker on a web page makes it more dynamic and allows you to create the effect of an object moving. Creating a ticker using a tag< MARQUEE> … MARQUEE>.

Between< MARQUEE> and MARQUEE> text fragments and pictures can be located. Text can be formatted using appropriate tags and graphics are inserted using .

Attribute syntax	Purpose
BGCOLOR=color	Background color. If the background is specified, the browser draws a colored stripe on the screen along which the text or image moves.
HEIGHT=meaning	The height of the background bar. The value is specified in pixels or as a percentage of the browser window height. For example, if you specify the HEIGHT=25% attribute, the ticker bar will occupy a quarter of the window height
WIDTH =meaning	The width of the ticker bar, indicated in pixels or as a percentage of the width of the browser window
DIRECTION=meaning	Line movement direction:left − left (default),right - to the right,up - up,down − down
BEHAVIOR=meaning	The attribute controls the behavior of the ticker: scroll (default) - having reached the edge of the window, the line leaves the field of view and then appears on the opposite side; slide − the line appears from the edge of the window, reaches the opposite one and stops; alternate − the line moves to the right or left, “reflecting” from the edges of the window and changing the direction of movement
HSPACE = pixel offset	Shift the ticker bar horizontally to the right
VSPACE = You coT ain pixels	Creating empty space above and below the strip
LOOP=meaning	Number of line transitions across the screen
SCROOLAMOUNT= meaning	The number of pixels the line traverses each step. The default mode is approximately 10 px/step. This attribute allows you to adjust the speed of line movement
SCROLLDELAY =meaning	Defines the time interval (in milliseconds) between steps, using this attribute you can make the line move jerkily
TRUESPED	When this flag (an attribute without a value) is set, the specified SCROLLDELAY value will be used. If the flag is not set, the value is SCROLLDELAY<= 59 будет округлено до 60

Horizontal line

The horizontal line is specified by the tag R> and does not require a closing tag. By default, the line is drawn across the entire width of the page and looks something like this:

Specifies the line length in pixels or percentage of the browser window width

SIZE= meaning

Specifies the line thickness in pixels

ALIGN= meaning

Determines the alignment of the horizontal line. The parameter can take the following values:

left - on the left edge,

right - on the right edge,

center - centered (used by default)

NOSHADE

Determines how the line will be filled as solid. The parameter is a flag and does not require a value. Without this parameter, the line is displayed as three-dimensional

COLOR= color

Defines the color of the line (only valid inInternetExplorer)

HTML stands for HyperText Markup Language ( hypertext markup language):

• language means it can be read by both humans and computers;
• marking means that the code you write is marked with keywords;
• hypertext means it uses HTTP as part of the Internet.

Like any language, HTML comes with a set of rules. These rules are relatively simple and boil down to the definition borders to know where something begins and where it ends.

Below is an example of a paragraph in HTML:

<p> Today I'm learning HTML syntax on the website</p>

What you see in angle brackets< и >called tags HTML. They determine where something begins and where it ends.

I already created a post with an HTML reference where I found full list all tags and their meanings. Link to this entry –

Each of the tags carries a specific meaning. In our case<р>stands for paragraph text.

As a rule, they come in pairs:

• opening tag<р>defines the beginning of a paragraph;
• closing tag
  determines its end.

The only difference between the opening and closing tags is the slash / that precedes the tag name.

When you combine the opening, closing and everything in between tags, you get HTML element.

If you view this example in your browser, you will notice that HTML tags are not displayed in the browser. They are only read by the browser to know what type content you wrote.

Tag groups

All tags are divided into 2 types, inline and block.

Block elements like:

• paragraphs<р> ;
• lists: unordered (with bullet)
  or ordered lists (with numbers)
  ;
  1. headings: from the first level

     up to the sixth level

     ;

  2. articles
     ;
  3. sections
     ;
  4. long quotes

     .

  Lowercase elements like:

  • links ;
  • highlighted words ;
  • important words ;
  • short quotes ;
  • abbreviations .

  Block items are designed for structuring the main parts of your page by dividing the content into logically related blocks.

  Lowercase elements are designed to delimit a portion of text and give it a specific function or meaning. Inline elements typically contain one or more words.

  Attributes

  Tags can also contain attributes– special commands that expand the action of the tag. For some tags, they are required to function properly. For example, in order for a link to lead to a specified address, you need to add an additional attribute. The link will look like this:

  Attributes are placed inside the opening tag in the following format: <тег атрибут1=”значение” атрибут2=”значение”> .

  Quotes can be anything - single or double; it is acceptable not to put them at all if the attribute value consists of one word (but this is not advisable).

  Where to write HTML

  You've probably encountered simple text files, those with the .txt extension. For such a text file to become HTML document(instead of text), you need to use the .html extension.

  In principle, to work with HTML, you can even use a regular text document, which is standard on every computer. To do this, you need to create a new document, write the code into it and save it in .html format.

  To make working with HTML files convenient, you can use a special editor that is designed to work with this type of file. One of these editors is Sublime Text 3, I have already written about it in my previous posts. Here is the link to the recording -

  What to write in the file

  In order to visually view your site in a browser, you need to write the following code in the site file.

  
  
  

  This is a basic template that is used to write web pages using HTML. Let's look at it in detail.

  • – this is the code that tells the browser that we are using the latest version of HTML – HTML5
  • – inside this tag there are all the tags that are responsible for the functionality of the site. Here we include third-party files, include scripts, specify encodings and much more
  • body – inside this tag there are tags that will be displayed and whose work we can visually examine.

  Let's try to visually see how the code works and display the text:

  This is my first site!

  
  
  

  How could you replace each of these tags with a closing tag, which is what we talked about earlier. The entire structure of the HTML code resembles a “matryoshka doll”. One tag is nested inside another.

  This system has a special hierarchy. In this system, tags are divided into sibling tags, parent tags, and ancestor tags. Everything is relative here, each tag will have its own ancestors, parents and brothers.

  Parent called the tag within which the tag in question is located.

  Ancestors are called tags that are located inside the tag in question.

  Brotherly are tags that are at the same level as the tag in question.

  This connection is easy to understand from this example:

  <article> <h1> Famous football quotes</h1> <p>Sir<strong>Alex Ferguson</strong> once said about Filippo Inzaghi:<q>This guy should have been born offside</q> . </p> <p> When criticized by John Carew,<strong> Zlatan Ibrahimovic</strong> replied:<q>What Carew does with a ball, I can do with an orange.</q> </p> <p> <strong> George Best</strong>said:<q>I spent a lot of money on booze, girls and fast cars. I just squandered the rest</q> , - when asked about his lifestyle.</p> </article>

  In this structure:

  • is ancestor for any other element;
  • is parent For

    and three<р> ;

  • and three<р>are fraternal for each other;

  • every<р>is parent For And which they contain;
  • every

    ,

    , And - this is all descendants

    .

  The family tree analogy also applies when going through multiple layers of HTML attachments:

  • descendant element X is any element inside X;
  • child- it's simple straight descendant;
  • ancestor element Y is any element;
  • parent- this is just the first straight ancestor.

  Here's what we learned from this lesson

  1. We learned that HTML has tags that store information and display it on website pages. Each of the tags carries a specific meaning.
  2. That files with .html resolution are used to work with HTML. In order to work with HTML, you need to create a new document, write code into it and save it in .html format.
  3. The fact that HTML has a special hierarchy. Tags are divided into sibling, parent and ancestor tags. Everything is relative here, each tag will have its own ancestors, parents and brothers.

  indicates which HTML standard your Web page is written according to.

  
  

  DOCTYPE	Description
  HTML5
  	For all documents.
  HTML 4.01
  "http://www.w3.org/TR/html4/strict.dtd">	Strict HTML syntax.
  	Transitional HTML syntax.
  	An HTML document uses frames.
  XHTML 1.0
  	Strict XHTML syntax.
  	Transitional XHTML syntax.
  	The document is written in XHTML and contains frames.
  	XHTML mobile profile, adds specific elements for mobile phones.
  XHTML 1.1
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	This definition has no division into types; the syntax is the same and obeys clear rules.

  So, there are several doctypes (strict and transitional, for HTML and XHTML). Which standard to choose is the question.

  HTML and XHTML Standards

  HTML is a standard markup language for Web documents.

  In HTML 4.01 and HTML5, the appearance of a page is separated from its content. Content and structure (headings, paragraphs, links) are specified in HTML. The design (alignment, fonts, colors) is specified by CSS styles.

  For example, tag and the align attribute have been deprecated.

  XHTML is an extensible Web document markup language based on XML. The XHTML standard is a list of differences between HTML 4.01 and XHTML.

  XHTML Requirements	It is forbidden	Need to
  All tags must be closed.
  All tags, attributes and CSS properties must be in lowercase.
  All tag attribute values ​​must be enclosed in quotation marks.
  The hierarchy must be strictly followed: the first tag is closed last.	...	...
  A block tag cannot be nested within an inline tag. (After a block element, further output on the page occurs on a new line. An inline element does not produce a line break.)	...	...
  Boolean attributes are written in expanded form.
  Images must have a description

  The advantages of the XHTML language are not the strictness of the syntax, but the ability to come up with your own tags.

  However, on July 2, 2009, the World Wide Web Consortium (W3C) announced the termination of work on XHTML 2.0, considering the concept of XHTML to be incorrect. A group of programmers switched to working on the HTML5 standard. And although the HTML5 standard has not yet been approved, many sites have already been written on it.

  Anyone wondering when HTML5 will be finished can check out the original sources:

  The official version of the HTML5 standard is located at: www.w3.org/TR/html5/

  Let's make a choice. It's not difficult to do: you shouldn't use the XHTML standard if you don't intend to extend the HTML language.

  We won’t dwell on!DOCTYPE, intended for documents using frames: the day before yesterday.

  The next question is: which syntax to choose - strict or transitive?

  Strict and transitional HTML 4.01 syntax

  Transition syntaxes exist to ease the transition to new standard. They will skip a lot of what strict syntax would consider errors.

  It’s easier to understand what’s what here with an example. First, let's set the strict syntax.

  Strict syntax

  Validity check

  red color.

  
  
  

  Compliance of HTML code with the declared standard is called validity, and checking for this correspondence is validation.

  To track layout errors, install the FireFox Html Validator add-on.

  Let's open our page at FireFox browser, move the mouse over the validator sign:

  Double clicking on the validator sign will give a detailed list of errors:

  
  

  Let's change!DOCTYPE to transition syntax:

  Transitional syntax

  Validity check

  Part of the text needed to be highlighted red color.

  
  
  

  Launch FireFox. No errors:

  
  

  Everything seems fine. Maybe we should stop there?

  My advice: do a valid layout either in accordance with the strict syntax of HTML 4.01, or directly in HTML5. HTML should be used for its intended purpose, and the design should be left to CSS. In addition, if the site has a valid layout, but it does not display correctly in any browser, then this is definitely a browser problem. New versions of the browser will better comply with the standard and not make mistakes in interpreting valid code. If a complex layout is implemented in an invalid way, then there is no guarantee that new versions of browsers will not crumble it into pieces.

  Don't be tempted by the loyalty of transitional syntax, only strict compliance with standards!

  Why is a valid layout needed?

  It would seem, why bother? After all, browsers often correct small layout flaws automatically, and the site works absolutely fine. But these small, practically unnoticeable errors are nevertheless noticed by search engines. Even one missing tag

  - this is a minus in assessing the quality of the site.

  It is precisely because of the ability search engines notice any shortcomings in the HTML code and it is recommended to maintain the validity of the layout. In addition, by checking the code for validity, you can find, along with minor flaws, serious errors that were not noticed before.

  
  
  

  Creation date: 2012-03-04 00:50:20
  Last edited: 2012-10-25 07:15:35
  

  Modern life is almost impossible to imagine without the Internet. What would we do without all kinds of Odnoklassniki, VKontakte and Live Journals? It’s even scary to imagine how impoverished our lives would be if HE suddenly disappeared! How would we live without funny pictures, stupid videos, megabytes of African spam? No, friends, I refuse to live in such a terrible world!

  What is the Internet? (Internet)

  The Internet is all the computers (computing devices) in the world connected to each other.

  A synonym for the concept of the Internet is the web. Word web - tracing paper with English web(web). And the web, in turn, is part of the concept of the World Wide Web (World Wide Web). A huge portion of the Internet is occupied by all kinds of sites.

  What are sites (Site)

  A site is a number of text files in html format. Those. These are ordinary files that are stored on some computer.

  And here we come to our topic: what kind of format is this - HTML, and why is it needed?

  What is HTML?

  HTML (HyperText Markup Language) is a special language. But we must immediately note that this is not a programming language. This is a text markup language.

  HTML takes its history from special programs for marking up newspaper articles. These programs allowed you to specify how to place text on the page where there would be pictures. HTML allows you to do the same thing, only on the screen of a digital device (computer, phone...).

  If you open any text file in Notepad, you will only see boring text. HTML allows you to turn such boring text into more interesting: add a picture somewhere, break the text into blocks somewhere.

  One more distinctive feature HTML is hypertext. Hypertext is links. Those. This is an opportunity to mark text in a special way and clicking on this text will lead to a transition to another page. Those. hypertext (links) allows you to link different pages (files) together, since every page on the Internet is a file.

  Using HTML - Markup Language Syntax

  HTML text consists of tags that contain information.

  A tag consists of two parts: an opening tag and a closing tag. Both the opening and closing tags contain the tag name. But in the closing one there is a slash before the name / - to distinguish the closing one from the opening one. Here are some examples:

  Tag content

  Tag content
  Tag content
  Tag content