Hypertext markup language HTML. HTML - hypertext markup language Basic element of hypertext markup language pascal

Hypertext Markup Language (Html)

The World Wide Web, or something the same as the World Wide Web, WWW is the main component of the global computer network Internet. Originating back in the 60s, the Internet for a long time was used only by a narrow circle of specialists to exchange information via e-mail. The network was controlled by the UNIX operating system - this was suitable for scientific purposes, but the rather complex UNIX text interface significantly limited the scope of application of network technologies. The year of birth of the World Wide Web is considered to be 1989 - this year the language was invented, which later became the main language of web documents - This language is HTML (HyperText Markup Language).

The author of the HTML language is Tim Berners-Lee, a graduate of the University of Oxford, who at that time was working under a contract in Geneva, at the European Particle Physics Laboratory (CERN, Conseil Europeen pour la Recherche Nucleaire) as a software consultant. CERN is a fairly large organization, and therefore, in order to better navigate its structure and not store data on a large number of projects, officials, etc. in memory, Tim Berners-Lee developed the Enquire program for his personal use, on the basis of which a few years later a kind of information space was created for the laboratory. The Enquire program allowed for the so-called “non-linear” search of documents - i.e. move from one document to another without referring to the table of contents or reference book.

The HTML language forms the basis of hypertext technology. A hypertext document contains so-called hyperlinks.

Document markup language is a set of special instructions, called tags, designed to form a structure in documents and define the relationships between the various elements of this structure. Language tags, or control tags as they are sometimes called, are somehow encoded in such documents, separated from the main document content, and serve as instructions to the program that displays the document content on the client side. The earliest systems used the symbols “<” и “>”, inside which the names of instructions and their parameters were placed. Now this way of designating tags is standard.

The use of hypertext breakdown of a text document in modern information systems is largely due to the fact that hypertext allows you to create a mechanism for nonlinear viewing of information. In such systems, data is presented not as a continuous stream of textual information, but as a set of interconnected components, which are navigated using hyperlinks.

HTML is not a programming language itself; it is a means of describing the structure of a document, its style and its connections with other documents. To view Web documents, special programs are used - so-called browsers (English: to browse - 1) graze, pluck shoots; 2) read, study randomly, in fits and starts.) Actually, the capabilities of browsers are much wider, but for now we will limit ourselves to their definition as a means of viewing web documents. The Internet owes its popularity to browsers.

I. Basic information aboutHTML.

In recent years, developments for the Internet have evolved from static pages to dynamic information systems. Some time ago, creating modern Web pages required little more than a perfect command of Hypertext Markup Language (HTML).

HTMLis a simple word processing language; in this language using a set of tags (tags) a document is created that can be viewed with a special viewerWeb (browser).

HTML is not a programming language in the same sense as C++ or Visual Basic; it is more like a document formatter using escape sequences. HTML coding is often compared to creating a Microsoft Word document by typing formatting codes directly into Notepad. Obviously, this has very little functionality.

Under hypertext document understand a document that contains links to another document. All this was implemented through Hypertext Transfer Protocol HTTP(Hyper Text Transfer Protocol).

Information in Web documents can be found using keywords. This means that each Web browser contains specific links that create hyperlinks that allow millions of Internet users to search for information around the world.

Hypertext documents are created based on HTML (Hyper Text Markup Language). This language is very simple; its control codes, which are actually compiled by the browser for display on the screen, consist of ASCII text. Links, lists, headings, pictures and forms are called elements of the HTML language.

Currently, there are a lot of Web page editors that do not require you to know the basics of HTML. But in order to be able to professionally prepare hypertext documents, you must know their internal structure, that is, the HTML document code.

HTML allows you to generate various hypertext information based on structured documents.

The browser identifies the generated links and, through the HyperText Transfer Protocol (HTTP), makes your document available to other Internet users. Of course, to successfully implement all this, you need software that is fully compatible with the WWW and supports HTML.

II. HTML Description

HTML document - this is a regular text file. Using any Web browser, you can view the result of your work by simply loading a text file created using HTML syntax into it.

Hypertext language provides read-only information. This means that only the person who created them, and not an ordinary Internet user, can edit Web pages.

Most main element of hypertext language- This links. On the World Wide Web, you simply click on a link and instantly find yourself at another point in the world on the page of your choice.

Tags.

Tag- formatted unit of HTML code.

Tag HTML consists of the following elements in a certain order:

• left corner bracket< (такого же, как "меньше чем" символа)
• an optional slash /, which means the tag is an end tag that closes some structure. So in this context you can read the / symbol as end...
• tag name, such as TITLE or PRE
• optional, even if the tag can have them, attributes. A tag can be without attributes or accompanied by one or more attributes, for example: ALIGN=CENTER
• right angle bracket > (same as the greater than symbol).

Most tags have opening element<> And closing. Between them are codes that the Web browser recognizes

In such cases, two tags and the part of the document separated by them form a block called HTML element. Some tags e.g.

For each tag, a set of possible attributes. Most tags allow one or more attributes, but there may be no attributes at all. Attribute specification consists of the following:

• attribute name, such as WIDTH
• equal sign (=)
• attribute value, which is specified by a character string, for example, "80".

Always useful enclose the attribute value in quotes, using either single quotes ("80") or double quotes ("80"). A quoted string must not contain quotes within itself. So, if a date is enclosed in double quotes, use single quotes to enclose it in quotes afterwards, and vice versa. You can also omit the quotes for attribute values ​​that consist only of the following characters:

• English alphabet characters (A - Z, a - z)
• numbers (0 - 9)
• periods of time
• hyphens (-)

In 1989, hypertext represented a promising new technology that had a relatively large number of implementations, on the one hand, and on the other hand, attempts were made to build formal models of hypertext systems that were more descriptive in nature and were inspired by the success of the relational approach to describing data.

HTML is a hypertext markup language used to encode documents. The HTML language is a set of commands according to which the browser displays the contents of a document; HTML commands are not displayed. The HTML language implements a hypertext linking mechanism that allows one document to be linked to others. These documents may be located on the same server as the page from which they are linked, or they may be hosted on a different server.

The HTML idea is an example of an extremely successful solution to the problem of building a hypertext system using a special display control tool.

Contextual hypertext links were recognized as the most effective form of hypertext organization, and in addition, the division into links associated with the entire document as a whole and with its individual parts was recognized.

All HTML documents have the same structure, defined by a fixed set of structure tags. An HTML document should always start with a tag< HTML >and end with the appropriate closing tag (). There are two main sections within a document: the headings section and the body of the document, in that order. The headers section contains information that describes the document as a whole and is limited by tags<НЕАD>And. In particular, the headings section should contain the general title of the document, delimited by the paired tag<ТITLE>.

). However, it is not recommended to omit structure tags when creating an HTML document. The simplest valid HTML document containing all the tags that define the structure might look like this:

< TITLE >Document title< /TITLE >

Document text

HTML elements.

For paired tags, the scope is defined by the portion of the document between the opening and closing tags. This part of the document is considered an element of the HTML language. So, we can talk about a “BODY element” that includes the tag, the body of the document and the closing tag. The entire HTML document. can be thought of as an "HTML element." For unpaired tags, the element is the same as the tag that defines it.

Most elements of the HTML language. describes parts of the document's content and is placed between tags . And, that is, inside the BODY structural element. Such elements are divided into block and text. Block elements refer to paragraph-level pieces of text. Text elements describe the properties of individual phrases and even smaller parts of text.

Now we can formulate rules for nesting elements.

Elements must not intersect. In other words, if the opening tag is located inside an element, then the corresponding closing tag must be located inside the same element.

Block elements can contain nested block and text elements.

Text elements can contain nested text elements.

Text elements cannot contain nested block elements.

Functional block elements.

In most documents, the main functional elements are headings and paragraphs. HTML language. supports six levels of headings. They are specified using paired tags from<Н1>to<Н6>. When displayed, Web documents are displayed using this method; tag (document on the computer screen, these elements are shown using fonts of different sizes.

Regular paragraphs are specified using a paired tag<Р>. HTML language. does not contain a means for creating a paragraph indent (“red line”), so when displayed on a computer screen, paragraphs are separated by a blank line. Closing tagis considered optional. It is understood that it comes before the tag, which specifies the beginning of the next paragraph of the document. For example:

Heading

<Р>First paragraph<Р>Second paragraph

Second level heading

A consequence of having a special tag that defines a paragraph is that the usual end-of-line character entered by pressing the ENTER key is not enough to create a paragraph indentation. HTML language. treats end-of-line characters and spaces in a special way. Any sequence; consisting only of spaces and end-of-line characters, is treated as a single space when the document is displayed. This, in particular, means that the end-of-line character does not even lead to a new line (a text element specified by an unpaired tag is used for this purpose
.

A horizontal ruler can also be used as a paragraph delimiter. This element is specified by an unpaired tag

---

. When a document is displayed on the screen, a ruler separates parts of the text from each other. Its length and thickness are specified by the tag attributes

---

.

---

This tag creates a 10 pixel wide horizontal ruler that takes up half the width of the window and is positioned to the right.

Website creation is one of the widely available opportunities in the modern Internet industry. The actual creation of websites is, in principle, not much more difficult than creating personal email accounts and electronic business cards.

To create a website, first of all, you need a server connected to the Internet on which you can place the necessary hypertexts. In addition, it is necessary to register the saiga name with the provider serving the selected server.

On the Internet you can find providers offering free opening of websites on their servers. Free sites can be opened on domestic servers narod.ru, boom.ru, hotmail.ru and on foreign servers, for example geocities.com, tripod.com.

On these servers you can register domain names like:

<имя>. narod.ru

name>.boom.ru,

Examples of registered domain names:

wdu.da.ru - website of the electronic university;

wduniv.newmail.ru - website of a distributed university.

After registering a site's domain name, you can host hypertexts on it. Hypertexts are placed on the site using special programs that allow you to create, edit, accumulate and copy a wide variety of hypertexts. Immediately after the placement of the very first (main) hypertext page, its information can be read using a browser in any country from any computer connected to the Internet. To do this, enter the website address on the Internet in the browser window. For example: http://bak.boom.ru

All posted files must be hypertexts, written in HTML format and having identifiers of the form<имя>.html.

HTML is a hypertext markup language.

By structure, hypertext is text with links to other hypertexts located on this server or on other servers. When you click on such a link, the browser automatically loads a hypertext page onto your computer screen, regardless of what server it is on and in what country it is located.

Using these tools and programs on the Internet, a wide variety of information sites and systems can be created - personal sites, company sites, electronic newspapers, magazines, electronic books, encyclopedias, as well as electronic archives and libraries.

The difference between sites is the amount of information, their structure and updating procedures. In general, for Internet sites, as for any organization, we can talk about the life cycles of their creation, development, modernization and liquidation.

The volume of information is determined by the owners - people or organizations that created sites and post their information on them. The amount of information on websites can range from several kilobytes to several gigabytes (millions of kilobytes).

The structure of sites can be very diverse. The simplest structure is a main page with links to a set of texts. These links can be in the text of the main page or highlighted in the table of contents at the beginning of the page.

Each page of the site can be provided with a title, which appears on the top line of the screen when the site is loaded by the browser.

In addition, on the main page of the site you can specify a list of keywords for search engines.

Search engines weekly scan all servers on the Internet and record the addresses of all sites and hypertexts found along with the keywords highlighted in them. For these reasons, no later than a week later, any information published on the Internet can be found using the keywords contained in them.

SGML(English: Standard Generalized Markup Language - standard generalized markup language; pronounced [s-ji-em-el]) - a meta-language in which you can define a markup language for documents. SGML is the successor to the GML (Generalized Markup Language) developed in 1969 at IBM, which should not be confused with the Geography Markup Language developed by the Open GIS Consortium.

SGML was originally developed for the sharing of machine-readable documents in large government and aerospace projects. It was widely used in the printing and publishing industries, but its complexity made it difficult to be widely adopted for everyday use.

Main parts of the SGML document:

SGML declaration - defines what characters and delimiters can appear in the application;

Document Type Definition - defines the syntax of markup constructs. The DTD may include additional definitions, such as symbolic references;

The semantics specification, which refers to markup, also gives syntax restrictions that cannot be expressed within a DTD;

Contents of the SGML document - at least there must be a root element.

SGML provides a variety of syntactic markup options for use by a variety of applications. By changing the SGML declaration, you can even abandon the use of angle brackets, although this syntax is considered standard, the so-called concrete reference syntax.

Example SGML syntax:

typically something like this

SGML is standardized by ISO: “ISO 8879:1986 Information processing-Text and office systems-Standard Generalized Markup Language (SGML)”

HTML and XML are derived from SGML. HTML is an application of SGML, and XML is a subset of SGML designed to simplify the process of machine parsing a document. Other SGML applications are SGML Docbook (documentation) and "Z Format" (typography and documentation).

XML- Extensible Markup Language, that is, the Extensible Markup Language, arose as a result of the development of the HTML language (HyperText Markup Language, hypertext markup language). However, it would be a grave mistake to perceive it only as some improved version of the HTML language. In essence, XML is a new generation of markup languages. Here you should keep in mind 3 points that fundamentally distinguish XML from HTML and its predecessors (GML - Generalized Markup Language, SGML - Standard General Markup Language):

XML, unlike HTML, DOES NOT HAVE PRE-DEFINED TAGS - more precisely, each developer can create HIS OWN XML tags - as many as needed. The number of such tags is practically unlimited. Thus, XML is a metalanguage that allows the creation of other markup languages, such as HTML.

As the HTML language evolved, the number of tags increased rapidly. Eventually, their number reached a “critical value” - it became difficult for web document developers to remember more and more new tags, but browser developers found themselves in an even worse position - they had to create new versions of browsers that would “understand” new tags. Smarter browsers are also becoming larger in size and placing ever-increasing demands on the computers on which they are used. The matter is aggravated by the fact that recently handheld devices have become increasingly popular (in particular, they are increasingly used in e-commerce), with limited memory and “weak” screens, and therefore the browsers used on them have only very limited possibilities. XML, which does not have a predefined tag system, solves this problem. The “payment” for versatility is greater rigor in the design of web documents. The rules for formatting XML documents are simple:

Unclosed tag containers are not allowed (but you can combine opening and closing tags in one, for example:
)

"nested" containers cannot "overlap"

lowercase and uppercase letters are treated as different characters

Keywords cannot be used as tag names

You cannot use spaces, punctuation marks, round, square or curly brackets in tag names

The underscore (_) and numbers can appear in tagnames, but a number cannot be the first character of a tagname

(If you need to use several words as a tag name, they should be written together, starting each word with a capital letter.)

Documents that meet these rules are called well-formed documents.

XML is used to DESCRIBE DATA STRUCTURES, mainly HIERARCHICAL STRUCTURES.

One of the main trends in the development of web technologies is the SEPARATION OF DATA, DOCUMENT STRUCTURE AND ITS STYLE DESIGN. As you know, one of the ways to separate data from the document structure is to dynamically link the DBMS with web documents through the ODBC (Open DataBase Connectivity) interface. Style separation is achieved through the use of cascading style sheets. XML allows you to describe non-relational databases. Since tags can be created by the developer, their names usually describe the meaning of the data.

XML, as a means of describing data structure, provides DATA EXCHANGE between different applications, thus acting as a kind of “glue”.

The importance of this XML "glue" function cannot be overstated. Thanks to the ability to exchange data between various applications, web technologies “reach” a whole new level.

Hypertext Markup Language (HTML) is a simple system for creating hypertext documents that are portable from one platform to another. In essence, HTML documents are SGML documents with common semantics that are suitable for representing information in a wide range of applications. HTML can be used to represent:

· Hypertext news, mail, documentation and hypermedia

Options menu

· Database query results

· Simple documents with embedded graphics

· And also for hypertext viewing of existing information arrays

The World Wide Web (WWW) project brings together information scattered around the world. To do this, WWW uses the Internet HyperText Transfer Protocol (HTTP) - the HyperText Transfer Protocol, which allows you to enter agreements on the methods of presenting data when interacting between a client and a server.

Data is transmitted in the body of the message in accordance with the MIME standard. HTML is one of the representations of information on the WWW. HTML is assumed to correspond to one of the MIME types, namely text/html. Additionally, HTML is developed in accordance with the International Standard ISO 8879 - Standard Generalized Markup Language (SGML), which is a system for defining structured document types.

HTML document

An HTML document is similar to a text file, except that some characters (lines) are control characters. These symbols are called tags and define the structure of the document.

HTML documents must start with the tag , located at the beginning of the file, and ends with the tag. Between these tags, the HTML document is organized as a HEAD and BODY document, similar to an email message. Inside the HEAD part, the TITLE and other information about the document as a whole are indicated. Inside the BODY part, using HTML tags, the text is structured into paragraphs, lists, etc. with the ability to highlight individual words and entire sentences with a style and create links to parts of this and external documents. Technically, opening and closing tags for HTML, HEAD and BODY elements do not need to be used. However, this is not recommended because the HEAD/BODY structure allows applications to determine document features (such as the header) without scanning the entire document.

Structure of HTML elements

In an HTML document, tags define the beginning and end of headings, paragraphs, lists, character highlighting, and links. Most HTML elements in a document are defined as an opening tag, which specifies the element's name and attributes, then the body of the element, followed by a closing tag. The delimiter characters for the opening tag are "<" и ">"; for closing - "". For example:

This is the title

This is a paragraph.

Some elements appear only as an opening tag. For example, to create a separator line, use the tag
. In addition, the closing tags for some elements (P, LI, DT, DD) may be omitted. The body of an element is a sequence of characters and nested elements. Some elements, such as elements that define links, cannot be nested. In this case, elements defining links and character selections can be placed inside other structures.

Displaying a Document

The specific display of a document may vary from client to client. HTML tags determine only the general display style of the document. Which means, for example, that HTML treats the first-level heading as just a first-level heading, but does not specify that the first-level heading should appear in 24-size Times font, centered at the top of the page. The advantage of this approach is that if the user decides to change the first level heading to Helvetica size 20 left aligned font, all he has to do is change the definition of the first level heading in his WWW viewer. Thus, the specific presentation of the document on the monitor screen is determined by the user of a particular client.

The main strength of HTML is its ability to link areas of text (and also images) to other documents. Viewers highlight these areas (usually with color and/or underlining) to indicate that they are hypertext links. An anchor is a piece of text that marks the beginning and/or end of a hypertext link. The text between the opening and closing tags is the starting point or destination of a hypertext link. The attributes of this tag are as follows: HREF

Optional. If the HREF attribute is present, Anchor is sensitive text: the starting point for the link. If the reader selects this text, he will be presented with another document whose network address was specified in the value of the HREF attribute. The network address format is similar to a URL. This allows the HREF="#identifier" structure to refer to another anchor in the current document, or in a remote document by specifying its address before the "#" sign.

Optional. If present, allows anchor to be used as a link destination. The value of the attribute is the anchor identifier. A regular text string can be used as the identifier value, except that within one document all such identifiers must be unique.

Optional. Allows you to specify the relationship between the document from which the link was made and the document to which the link was made.

3. Hypertext language HTML

Hypertexts must begin with a word and end with a word. Words in angle brackets are called tags in HTML, and descriptors in programming. Almost all HTML tags are paired - and, and, etc.

Paired tags highlight a certain fragment of hypertext - “title”, “body”, etc. The first tag begins the fragment, and the second completes it. Closing descriptors precede the name with a fraction sign / .

The general structure of hypertexts written in HTML:

hypertext::= title body

title::= title

title::= title

body::= text

According to HTML rules, hypertexts must have a “title” and a “body”. As publications, hypertexts can and should contain information about authors and copyright holders (sites).

The title of the hypertext must contain a “title”, which is displayed by browsers on the very top line of the computer screen. The title should express the main idea of ​​the publication (page). Hypertext without a title is like an article without a title.

The “body” of the hypertext should contain texts, tables, photographs and illustrations. The difference between electronic hypertexts and ordinary paper texts is the inclusion of hyperlinks, clicking on which causes the download of new hypertexts.

An example of hypertext and the result of its display by a browser on a computer screen:

Hypertext: Result:

The result of the browser is the loading and display of hypertext stored on the website at the address specified in the browser window. If the hypertext is too large, the browser displays hypertext drag buttons on the right or bottom of the screen.

The sizes of computer screens have the following range. The minimum screen size is 640 x 480 pixels. Further standard screen sizes are 800 x 600, 1024 x 768 and 1280 x 1024 pixels. Therefore, hypertexts may look different on different screens.

General structure of hypertexts and their display on a computer screen:

Hypertext: Result:

The text part can consist of lines and paragraphs with and without headings, with lists, tables and menus.

body::- text

text::= title ( text ) |

list(text) |

table(text) |

Headings in hypertexts are formatted as follows:

title::=

Name

title::=

Name

title::=

Name

where the tags H2, ..., h6 set the size of the headings in relation to the main text.

Paragraphs in hypertexts begin with a descriptor

hypertext |

The transition to a new line and paragraphs is indicated by a descriptor . The end of paragraph p> is optional, but is required when using parameters in the paragraph descriptor.

The main parameter of paragraphs is align - alignment of texts on the computer screen. Text alignment is performed automatically by browsers in accordance with the computer screen size:

align=center - center the screen:

align=left- to the left edge;

align=right - to the right edge;

align=justify - full screen.

To align paragraphs, a single common style must be chosen and applied to all of the hypertexts on the site.

For the design of hypertexts, the HTML markup language has a rich range of fonts, styles and resources. The simplest means of design is highlighting words in order to attract the attention of website readers to individual parts of the texts.

To highlight words in hypertexts, you can use bold or underlining using the following tags:

Large symbols

bold type

italics i>

underlining

crossing out

small characters

Font highlighting in hypertexts is specified by the tag :fonts::=text font>

Font parameters - their size and type. Font sizes are specified by the parameter size = size.

The size is indicated explicitly from 1 to 6, either in the form of an increase +1, +2 or a decrease - 1, - 2.

The font type is specified by the parameter

face = font

Here the font is one of the standard fonts: "Times", "Courier", etc.

The font color is specified by the parameter co1og = color, where color is the color of the selected hypertext fragment. For example, highlighting text in red:

text font >

Standard names of colors in the HTML language:

red - red, green - green, blue - blue, black-black,

white - white, gold - golden, yellow - yellow, etc.

To design hypertexts, it is best to take as a model a good book or magazine published by a professional publishing house, or someone’s professionally designed e-book, newspaper or Internet site.

A unified design style is an important property of any publication in books, magazines and websites. In the future, it is best to adhere to the accepted standard and design style for the entire period of creation and maintenance of the site.

Fragments of hypertexts can be located on the same site or on several sites or even on several servers. External hyperlinks indicate the names of the corresponding files on the site, server or on the Internet:

The general form of external hyperlinks is:

where “address” is the address of the hypertext within the site or on another Internet server.

Examples of external hyperlinks:

a) website address on the Internet:

http://bak2.nagod.gu

b) page address on the website:

http: // bak2.nagod.gu / inrogl.html.

c) the address of the page in the site folder;

http://bak2.nagod.gu/tests/test2.html.

tests 2 a>

With the help of hyperlinks, the placement of all drawings, photographs and other graphic illustrations on websites is organized. To do this, all files with graphic illustrations are pre-recorded on the site.

Graphic files are usually placed on websites and in a separate folder called image. Loading of illustrations onto the screens of user computers is carried out by browsers with the help of operators :

The general form of operators for loading graphic illustrations:

The location of illustrations on the computer screen is determined by the alignment parameters: align=left - along the left edge, align=right - along the right edge of the screen. The text then flows around the illustrations to the right or is blind.

Illustrations can be pressed to the top or bottom edge of the screen, which is set by the parameters: align =top - to the top edge, align=bottom - to the bottom edge of the screen, or aligned to the middle of the screen - align = middle.

To position illustrations on the computer screen, their width and height can be specified in the loading statement:

height:= height= "height"

width:= width= "length"

The dimensions of illustrations are specified by the number of screen pixels (in pixels) or as a percentage of the height or width of the computer screen. In the latter case, the illustrations will have different sizes on different screens. By calculating the placement of illustrations for minimum screen sizes, you can be sure of their placement on screens of any other size.

The sizes of illustrations are usually chosen so that they are visible in their entirety even on computer screens with a minimum size. If the computer crane is larger, then the illustrations will occupy only part of it.

Hypertext lists are lists with numbering or highlighting of list elements. All elements begin with tags