The syntax of the HTML language is based on a standard. HTML5 syntax. Character Encoding Definition

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 and a unified addressing system.

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 common and popular Internet service today is WWW (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 the hypertext markup language HTML (H yperT ext M arkup L anguage)

Hypertext Markup Language HTML documents 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 are Microsoft Internet Explorer from Microsoft Corporation and Netscape Navigator 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 they use specialized editors 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, Microsoft FrontPage, HomeSite, 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 source text of the HTML document turns out to be extremely redundant and needs correction. It is much more efficient to use special HTML editors.

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). Names and attributes represent English words and abbreviations.

Tags can be divided into two groups:

Paired tags (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 (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 will be displayed in bold (the name of the tag is from English bold). Paired tags can be nested but must not overlap.

Unpaired tags (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:

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.

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.

The HTML 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.

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

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:

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

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

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 underline) - underlined;

... S > (from English s 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.

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, in order to display a series of consecutive spaces or several empty lines, you have to use different 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 the values ​​LEFT, CENTER, RIGHT and JUSTIFY, specifying the alignment respectively to left, center, right and width. The text enclosed in tags will also be centered.

If the closing component

omit, the specified alignment type is retained until next tag, which specifies the alignment, or to 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 an ordered or unordered list is enclosed in 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.

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

Tag has optional attributes:

Tag has an optional attribute

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

Tags

, ... ,

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

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

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). The URL consists of two parts, separated by a colon. The first part indicates the type 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 / character) 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 the path to a file, directory names are separated by a forward slash (the / symbol), navigating through directories 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

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

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

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

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

ü < IMG SRC =../ Images / Pict 1. jpg >(image Pict 1. jpg is 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 explicitly set both attributes, the image will be scaled along two axes in accordance with the specified dimensions. The height and width attributes do not change the loading time of the image, but only its appearance (size) on the screen.

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.

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

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

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, A LINK, V LINK attributes of the tag (or the default color).

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 relevant attributes.

For example , .

The tag allows you to make a text fragment or an entire image the active zone; In order for different fragments of one image to link to different target documents, you will have to use a tag that implements the map image.

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

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

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

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

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

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:

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).

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).

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	Direction of line movement: left - left (default), right - 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 goes out of view and then appears on the opposite side; slide - a 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 co ta in 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. Anything between these tags will not be displayed on the web page. Optional Tags If a tag is not listed, it does not mean that it is not represented at all. There are certain rules that allow you not to write some tags. In table 1 shows tags that can be omitted and the condition under which this occurs. Table 1. Optional tags Tag Condition If there are other elements inside. If empty and also contains something other than a space or a comment. If an element is followed by If an element is followed by or . If the element is followed by , or it is the last one of the parent. If the element is followed by , , , , , , , , , , ,..., , , , , , , , , , , , . and does not come before , or which have an omitted closing tag.or he is the last one with the parent. If an element is followed by or . If an element is followed by or . If the element is followed by or is the last element of the parent. If the element is followed by , or it is the last one of the parent. If the . comes first inside and does not come before another element. If an element is followed by or . If the first one inside is If the element is followed by or or it is the last element of the parent. If the element is followed by or is the last element of the parent. If an element is followed by If an element is followed by or or he is the last one with the parent. If an element is followed by or or he is the last one with the parent. If the opening tag contains one or more attributes, then the tag must be specified. Due to the fact that many tags may not be specified, because... they are implied by default, any document is reduced to the following parts. An optional byte order mark (BOM). . . You can insert any number of spaces or comments before and after the doctype. Thus, the doctype does not have to be on the first line of code. Example 1 shows the minimal HTML code to display a traditional greeting. Example 1: Minimal HTML HTML5 IE Cr Op Sa Fx Hello World! A byte order mark consists of a U+FEFF character code at the beginning of the document, where it is used to determine the encoding. It is recommended to remove this symbol, since its presence leads to errors in displaying the document in some browsers. To do this, you can use the Notepad++ editor, in the “Encodings” menu, select “Encode in UTF-8 (without BOM)” (Fig. 3). Rice. 3. Select encoding useful links More about byte order mark http://unicode.org/faq/utf_bom.html#bom1 Notepad++ editor indicates which HTML standard your Web page is written according to. DOCTYPE Description HTML5 For all documents. HTML 4.01 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 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, the align tag and 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 Cannot Required 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 a 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 Validity check in red. Compliance of HTML code with the declared standard is called validity, and checking for this compliance is called 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 Validity check Some of the text needed to be highlighted in red. 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. Let's start learning the language. HTML text is "plain text". All hypertext features of a document are specified using tags - special notes included in this text. Let there be text: Let's write this text differently, inserting instructions on how the text should be displayed. We highlight the instructions with angle brackets. In HTML, instructions are called tags. The browser executes the tag instructions, that is, without showing them, it makes text changes. Therefore, we will see the following on the screen: “Mom was washing the frame, and the cat was playing with a ball. The boy took the ball from the cat.” Tag – command in angle brackets. The tag name is the first thing written after the opening angle bracket, without spaces before it! There are single tags and container tags. Single tags are some command to the browser executed in the place where it is specified, for example, the command “draw a line”: Container tags consist of an opening tag and a closing tag, and their indication refers to all the text located between them, they say: "nested in the container." The closing tag has the same name as the opening tag, but the name is preceded by a slash character: “/”: Mom washed the frame. . A tag can have attributes. The attribute complements and explains the tag. The order of the attributes is not important. For example, the HR tag has the attribute WIDTH, which indicates the width of the line, SIZE, the thickness of the line, ALIGN, the location (alignment), and COLOR, the color. Attribute values ​​specify a given characteristic. The syntax rule is as follows: the tag name can be followed by at least one space, then, separated by spaces, triples can follow: attribute, “=” symbol, value. It is recommended that the value be enclosed in quotation marks, although the HTML standard allows values ​​consisting only of Latin letters and numbers not to be enclosed in quotation marks. The image on the screen will be something like this. _____________________________________ The standard allows you to omit the closing tag if it is implied. For example, tag It has a closing paragraph, but it can be omitted before opening the next paragraph. Tag Indicates a paragraph. Mom washed the frame. The daughter was playing with a ball. Some attributes have no values, or rather, they have a single meaning, and therefore it is enough to simply indicate or not indicate this attribute in the tag. For example, the FRAME tag has a NORESIZE attribute, which indicates that the user is not allowed to resize the frame. Tags (elements) in HTML can be nested within each other, similar to loops or conditional statements in programming languages. Intersections of tags without nesting are prohibited. An example of an erroneous entry: block example with nested paragraph Example of a correct entry: block example With nested paragraph In addition to tags and plain text, HTML code may contain so-called character objects or escape sequences: named and numbered entities. They are needed to represent characters in a document that are syntactically or physically prohibited, as well as characters that cannot be entered from the keyboard. For example, Case is not important for tag names and attribute names and values. Although it is recommended to maintain some style, for example, write the names of all tags in capital letters, or in small letters, or in small letters, but with the first capital letter. Such text is easier for a person to perceive. Very important note! The purpose of the browser is to show your page to the client. The browser's usual reaction to an error is to try to correct the error, and if that fails, then skip words or tags it doesn't understand. This is both good and bad. Since, on the one hand, as a result, the browser will try to show the user as much text as possible, but, on the other hand, this text may include a part with tags and scripts, or the actual text may not be included if the browser perceives it, for example, as a comment. For a website developer, this browser behavior is very disturbing. Be prepared for the fact that at first the browser will diligently correct your errors, but after a while it will get confused and previously working fragments will stop working for you. Therefore, advice: do not make mistakes, but rather use modern editors that are aware of html rules and point out errors to you. tell friends Twitter Device with... The touchscreen (sensor) on an Android phone or tablet does not work well Next article How to fill out a metric (poster of achievements) in Paint (built-in Windows program) Child metric in Photoshop Read also Office software for a tourism enterprise Automation program for a travel agency self-tour 2023-10-23 00:05:22 VKontakte: quick password recovery is not available 2023-10-22 00:02:31 Autoclickers for mouse and keyboard Download autoclicker is very fast 2023-10-22 00:02:31 Classmates don't work! 2023-10-22 00:02:31