A software tool that recognizes HTML language descriptors. What is a tag? A Brief History of the World Wide Web

And tongue HTML, the most important definition is “ tag"(from the English "tag", sometimes also written "tag"). Tag is a symbolic or text expression (for clarity, let us allow ourselves a not entirely correct analogy with the terms “command” or “operator” from programming languages), prescribing to take some specific action directly on marking And formatting screen presentation web pages.

That is, this is in no way an operator or a command, but just an instruction (for example, make an indent on the left, place an illustration of a specific size on the right, and under it - hyperlink).

In addition to the tags themselves, in the language hypertext markings their attributes are used.

Decor tag in the document array is carried out using angle brackets, which allows the interpreter to distinguish between text (thematic content) and directly HTML-code, correctly displaying information on the web page.

Tags can be paired (that is, used in close connection with each other). In this case the terms apply opening And closing tags The syntax for paired tags is invariably:

Document fragment...,

Moreover, the instructions prescribed by the tag apply to the entire document fragment specified between them. Tags can also be single, that is, a closing tag according to standards HTML not provided.

Elements of the HTML language

Without exception, all elements of the HTML language are either tags or their attributes; no commands, no conditions in language hypertext markup simply does not exist (see META tags below). Active elements and dynamic effects on web page are carried out by integrating independent and complete modules into hypertext code, implemented in one of the classical programming languages ​​(for example, JavaScrypt is very popular on websites), or by server programming methods.

META Symbols

HTML. Tag

Key topics:

Web design. HTML. Tag

Essay

1. Brief history of WWW

2. HTML language - building Web documents:

a) Web document template

b) text formatting

c) paragraph formatting

d) working with images of images:

I. background images

II. static and dynamic images

f) frames:

I. Vertical frames

II. Horizontal frame

III. Nested Frames

Alternative means of document preparation

1. A Brief History of the World Wide Web

It is well known that the Internet is, in particular, a huge repository of all kinds of information. Before the advent of the World Wide Web (WWW), navigating the Internet in search of the necessary information could not be called convenient. To receive a file from an FTP server, you had to download the client application separately. At the same time, you had to remember your password, you had to navigate through numerous directories in search of the desired file, not forgetting to install it before receiving it correct mode transfers; know numerous commands for working with FTP servers, etc. If you needed to view a conference, you had to launch another application, which had its own set of commands for reading, forwarding, and saving messages from conferences. All this was inconvenient.

About five years ago an attempt was made to organize information order V Internet networks. This led to the emergence of the World Wide Web service, which was born at the European Nuclear Research Center in Sweden. The WWW idea is based on the so-called hypermedia documents or Web documents, also called Web pages, designed to bring order to the organization and retrieval of data. These documents may contain both text and non-text text information(eg images, sound), as well as links. Links are pointers with which you can freely move from one place in a document to another, or even refer to a separate document, which may be located on the other side of the world. Although Web documents can contain the most various information, not only text, they are almost always called hypertext ( hypertext) documents, which in general is not entirely true.

On the screen, a typical Web document looks like a set of text with links; various illustrations may be present. You can flip through the document, viewing the contents, and quickly navigate through it or other documents using links.

With the advent of WWW, the Internet began to serve text and graphics; with the help of a mouse, it became possible to travel around the world and easily find necessary information with a simple point and click. It has become easy to download files and read conferences. This is why the WWW service has gained worldwide popularity and widespread use. Every day, large numbers of Web servers appear on the Internet and thousands of new documents are published.

To build Web documents on the WWW, a special language called HTML is used, which stands for HyperText Markup Language - a hypertext markup language, a data formatting language. Based on the Standard Generalized Markup Language (SGML), HTML defines the formatting and organization of data in Web documents. It doesn't define how exactly text will be placed on the screen; it defines the structure of the data. A Web document can contain more than just textual information, and therefore the HTML language would be more correctly called HyperMedia Markup Language, but in the literature the abbreviation HTML is almost always used. A document created in HTML is a regular file in ASCII format. It is based on special descriptors (tags), which determine the formatting of data in any Web document. Naturally, to view HTML documents on the World Wide Web you need a special software. Such programs are called browsers (from the English. browse– leaf through, browse). With their help, you can download and view Web pages, navigate the WWW, etc. IN currently There are quite a large number of browsers, of which the most popular are Microsoft browsers Internet Explorer, Netscape Navigator and NCSA Mosaic. The browser, having read the HTML file, uses descriptors to interpret the data contained in the document and display it on the computer screen accordingly. In Fig. 1 shows an example of a Web document:

Fig.1 Example of a Web document

The HTML language is evolving rapidly. In the process of its development, it acquired new capabilities and lost little-used and outdated ones. At the moment, the current official version of the HTML language is version 3.2, which has developed tools for constructing Web documents. Compared to HTML 2.0, the new version offers new features such as tables, text wrapping around images, embedding Java applets, and other features.

To date, except official version language there are also versions of HTML from Microsoft and Netscape that also support additional features, not described in the specification for the official version of HTML. To solve the problem of browser compatibility when displaying documents composed using elements of unofficial versions of the HTML language, the above-mentioned companies include support for an alternative version of the language in their products. Version 4.0 of the language, called Dynamic HTML, is on the way, promising improvements to old and exciting new features for designing Web documents. The W3C (World Wide Web Consortium - the World Wide Web standards organization) is already proposing this version of the language as a standard. There are options new version languages ​​from Microsoft and Netscape, which, however, are still incompatible with each other. This paper reveals the main tools for constructing documents from HTML version 3.2 from Netscape Communications.

2. HTML language. Building Web Documents

As mentioned above, the formatting of a document in HTML is specified by special descriptors. A descriptor is a data formatting command and is enclosed in angle brackets "<» и «>" There are opening and closing handles, between which the text to be formatted is placed. Opening descriptors specify the formatting method, while second descriptors override it. The difference between these descriptors is that in the closing descriptor the name is preceded by a slash. For example, descriptors. There are also handles that do not require a closing option.

HTML is not case sensitive, so all descriptors can be specified in either uppercase or lowercase letters. The browser will interpret them unambiguously in any spelling.

If you look at the source text of a typical Web page, you will see something like the following:

document title

text

text

text

text

Between handles And the entire document is located. Descriptors And define the scope for specifying the document title. Between a couple And The title of the document is placed. Its contents are visible in the title of the browser window. The header information is used by some web robots to index data when crawling WWW resources. In this area you can enter, for example, information about the author, short description document. Between handles And contains the data that will be displayed by the browser on the screen. Descriptors

And
contain information about the author that will be displayed on the screen, for example, the author’s first and last name, his email address, the date the document was created and modified, etc.

Strictly speaking, none of the above descriptors are mandatory when creating documents, but they help to structure documents and their definition is a sign of good style when composing Web pages.

Text formatting

Text formatting involves displaying text in a specific font or with specific attributes.

To format text, you need to enclose a line or lines of text between a pair of handles. The following is a basic list of descriptors and the results of text formatting:

For example, if you need to display a certain line on the screen in italics, then you need to enter the following into the body of the Web document:

This text is written in italics

As a result, the browser will display:

This text is written in italics

Descriptors can be combined with each other in any order, for example, the combination

This text is printed in bold italic

will produce the following result:

This text is printed in bold italic

Some Web documents contain flashing lines of text designed to attract the user's attention. For these purposes the descriptor is used :

This is flashing text

However, this Netscape language extension is rarely used and may soon become obsolete.

The design of Web pages often uses fonts of various sizes. You can output a line with a font size different from normal using descriptors text , where n is a number from 1 to 7 that determines the font size relative to normal. So the following text is in the body of the document

This text four sizes larger than usual

the screen will look like this:

This text is four sizes larger than normal.

It should be noted that pairs of descriptors And, and And are elements of Netscape's HTML version and may therefore not be supported by other browsers.

Formatting Paragraphs

Text information posted on Web pages is organized into paragraphs. The paragraph begins with a descriptor<Р>and ends with a closing handle

, however the latter is optional. HTML code example:

First paragraph

Second paragraph

As a result, the following result will appear on the screen:

First paragraph

Second paragraph

When composing a document, it is necessary to take into account that the browser ignores spaces between words and line breaks when formatting text, so it considers as a paragraph only the text that is between the descriptors. Forced line break is set by descriptor
, which does not have a closing option. Sample code:

First line

Second line

As a result, the browser will display:

First line

Second line

If you need to display text with the required number of spaces and line breaks, you need to enclose it in descriptors 

AND
. This is commonly used to display program source listings on the screen. In this case, the text will be displayed in a monospace font.

Creating Headers

Headings of different levels are specified using descriptors And, where n is a number from 1 to 6. The largest heading is specified by the descriptor

, the smallest one is a descriptor

. For example:

This is a level 1 heading

This is a level 3 header

This is a level 6 heading

As a result, the screen will display:

This is a level 1 heading

This is a level 3 header

This is a level 6 heading

Headings are one of the most commonly used document design elements on the WWW.

Creating lists

In HTML, it is possible to define three types of lists: numbered lists, unnumbered lists, definition lists. The beginning and end of the list are specified by special descriptors, and before each element of the list a descriptor is specified

  • , which does not have a closing option.

    Numbered list:

  • List item

  • List item

  • List item

    Result:

    Unordered list:

  • List item

  • List item

  • List item

    Result:

    * List item

    * List item

    * List item

    Definition lists are groups of text of two elements each, with the second element offset to the right of the first. Typically, such lists are used to explain various concepts. Example:

    First defined concept

    Explanation of the first concept

    Second Defined Concept

    Explanation of the second concept

    Result:

    The first concept to be defined.

    Explanation of the first concept.

    Second defined concept.

    Explanation of the second concept.

    Links

    Links are one of the basic elements of the HTML language. Links offer the user a quick and convenient way to navigate to a specific location in a document, or even to another document. For example, instead of flipping through a long Web document in search of the desired fragment, you can instantly move to the desired place with a simple mouse click (if, of course, a corresponding link is provided for this). If there are two different documents, then in order to provide access from one document to another, it is not necessary to combine them together; it is enough to make a link in one document to the other and everything will come down to a simple mouse click.

    On screen, links appear as a line or lines of text, highlighted in a different color and underlined with a thin line. If you move the mouse cursor to this section of the text, it will turn into an image of an index finger, and after clicking on this place, you will follow this link.

    The HREF attribute points to the name of the label in the current document.

    Of course, in this case it is necessary to indicate in the document the label for which the link will be set. For this purpose the descriptor is used with attribute :

    This is a mark

    On the screen, the label, unlike the links, does not stand out among the rest of the text.

    If you need to navigate to a label located in another document, then the above example will change slightly:

    The URL can be either relative or absolute. In addition, a link can point not only to a document, but also to images, binary files, sound files etc. The behavior of the browser when following a particular link depends on its specific settings. So, if the link points to a document, it will be downloaded, but if it is an audio or video file, it will be played. If it is a binary file, the browser will offer to copy it to the local disk.

    Embedding Images

    The use of images allows you to colorfully design Web documents; the combination of text and graphics gives any page a pleasant look and clarity.

    To insert illustrations into a document, use the descriptor :

    The attribute specifies the name of the image file. The file name can point to either a local file or deleted file, for which you need to specify the corresponding URL. The file can be a static image and have graphic format, understood by the browser, or a dynamic image presented in GIF89A format. In the latter case, the file will be displayed in the browser window as an animation.

    The ALT attribute specifies text that will be displayed in the browser window instead of an image if, for example, the user's browser does not support graphics or the option to load images is disabled. This attribute is optional, but its use is considered good style when composing Web documents.

    Often when preparing pages using graphics, it happens that the desired image size does not coincide with the actual one. For example, you need to place a picture in a certain area with a certain size. To do this, you need to use the WIDTH and HEIGHT attributes, which set the required image dimensions in width and height, respectively. For example, if you need to place a large image in an area 100 pixels high and 200 pixels wide, then you need to write the following in the body of the document:

    The order of these attributes can be arbitrary.

    The abundance of graphics in a document, on the one hand, improves its overall appearance, on the other hand, significantly increases its loading time. To find a compromise between the speed of loading a document and its clarity, Web page designers often resort to this technique: they place the image on the page in a smaller format and make it a link to themselves. If you click on such an image, the browser will download it and display it in its original dimensions. The link image is described in the document as follows:

    An interesting possibility is to “wrap” text around an image. This is a very popular way to design Web pages. In this case, the picture on the screen is surrounded by text, for example, on the left and bottom. Text wrapping is achieved using the ALIGN attribute, which has parameters such as:

    LEFT – the text will cover the image from the bottom left.

    RIGHT – text surrounds the image from the bottom right

    TOP – the image is surrounded by text on the top right

    BOTTOM – the image is surrounded by text at the bottom right

    MIDDLE – the image is surrounded by text in the middle right

    For example, when creating the Web page shown in Fig. 1, the following entry was used in the body of the document, describing the image:

    Images can also be used as document backgrounds. All text and illustrations in the document will be displayed by the browser on top of the background image. Background images are given quite simply as follows:

    If the image size is not large enough to fill the entire browser window, the browser will then simply multiply the image until the window is completely filled.

    Frames

    One of the latest innovations in the official version of the HTML language is the so-called frames. When using frames, the browser window is divided into several subwindows, in each of which you can display any Web documents and scroll them independently of other windows. A well-designed frame structure can greatly facilitate document navigation and improve the perception of information. An example is an electronic version of a book or magazine, when in one window you can select sections-links of content, and in the next window you can view information directly related to a specific section of the content.

    There are two types of frame documents: frame-containing documents and simple documents. Frame-containing documents define the structure of the frame document itself, i.e. specify data on how the browser window will be divided into subwindows. Such documents contain links to other documents. Ordinary documents are those documents that do not contain data that defines frames.

    The structure of a frame-containing document generally looks like this:

    title

    Text

    Frame structure setting area

    As can be seen from the example, the structure of such a document is somewhat different from the structure of a regular document. Availability of descriptors And instead of And This is what distinguishes a frame document from a regular one. Using descriptors And is another sign of good style. Between them you specify the text that will be displayed in a browser window that does not support frames.

    Below is an example of a frame document:

    Your browser does not support frames!

    Descriptor describes either a vertical arrangement of frames or a horizontal one. Example:

    This descriptor describes the horizontal arrangement of frames. For a vertical position, the entry changes slightly

    In the size string, elements are separated by a comma and can be specified as follows:

    value% – relative frame size in percentage. For example: 10%,40%,50% – 10% of the total browser window size is allocated to the first window, 40% to the second window, and 50% to the third window, respectively;

    value – absolute size in pixels. For example: 100,540 – an area 100 pixels wide is allocated to the first frame, and all the remaining space is allocated to the second frame (for the 640x480 video mode of the monitor).

    Using descriptors Only the frame structure is specified. Descriptors are used to place data in frames , which do not have a closing option. The number of these descriptors must necessarily correspond to the number of frames specified previously. Each handle points to the URL of some document that will be displayed in the corresponding frame. This is done using the SRC=DOCUMENT_URL attribute. When loading a frame-containing document, the browser window will be split into subwindows, and then the documents will be loaded into them. An example of using frames can be seen in Fig. 1, which shows a browser window divided into two frames.

    When you click a link in a regular document, its content completely disappears from the screen and is replaced by new content from another document. When using frames, it is possible, when activating links, to change the contents of a window in the current frame, the contents of a window in another frame, or the entire browser window. This is done using the descriptor combination and the TARGET attribute (from the English. target- target). In general, the format of this descriptor looks like this:

    Hypertext link text

    The TARGE_NAME parameter is a reserved word starting with an underscore '_'. Here is a list of the most commonly used parameters:

    TARGET=_TOP – the contents of the entire browser window are updated.

    TARGET=_BLANK – the document will be opened in a new browser window.

    At first glance, it may seem that the use of the _TOP and _BLANK parameters are equivalent, since in both cases the old contents of the window are completely replaced by the contents of another document. However, in the first case, you can return to the previous contents of the window using the browser itself (using the BACK button on the toolbar), and in the second case, the method of returning to the contents of the previous document rests with the compiler of the Web page or the user himself.

    3. Other elements of language HTML

    Along with the most popular elements of the HTML language, there are also those that, although not widely used, are still used when creating pages on the WWW.

    If, when preparing a publication (for example, preparing electronic news), it is necessary to place a certain quotation on the page, then simply specifying a test with quotation marks is not enough - the browser perceives quotation marks as control characters, and they will not be displayed on the screen. In this case, it is necessary to enclose the quotation text in special descriptors. Only in this case will the browser display the text enclosed in quotation marks.

    In addition to the quote character, there is also a set of characters that the browser considers to be control characters and in order to display them on the screen, it is necessary to insert special commands into the body of the document. Below is a list of commands for the most common characters:

    It was previously noted that the browser automatically wraps text if the line does not fit on the screen. However, there may be times when you need to display text in one line without a break. To do this, place a single descriptor before the line of text , which is an extension of Netscape's HTML language. No matter how long the line is, the browser will display it completely on the screen without wrapping.

    Traveling around the WWW in search of pages dedicated to music, you can often find documents, after loading which music begins to play in the background of the browser. This is an interesting feature that, although it takes a long time to load on slow connections, gives any music page some appeal. It is implemented this way:

    Descriptor used to work with music files, the SRC attribute indicates the file that will be downloaded. The AUTOSTART attribute tells the browser whether to play the file after loading or not. The HIDDEN attribute, like the AUTOSTART attribute, takes a logical value and tells the browser that buttons for controlling the file playback process cannot be displayed on the screen. If the last two attributes take the values ​​FALSE, then after loading the music file the browser will display playback control buttons, and the user can play the file, stop playback, or play the file again at any time.

    Data structures such as tables also find their use in Web pages. In certain cases, they help to conveniently organize some data, say, some summary of numbers, some calculations, etc. On the screen, such tables look similar to the tables we are used to on paper or in applications such as Microsoft Excel. In addition to presenting tabular data, tables can be used, for example, to design: arbitrary arrangement of images and text on the screen. Methods for constructing tables due to their volume and some complexity are not given in this work.

    Those who have at least once used search engines when navigating the World Wide Web to search for information have certainly encountered so-called forms. These are specific, although very popular, features of the HTML language. Forms are text entry fields, checkboxes, radio buttons, lists, and other forms of interactive communication with the user. Data entered into forms is sent to the Web server for further processing, after which the processing results are sent back to the user. Drawing up documents using forms is a sign of the professionalism of the designer, as it requires, in addition to good knowledge of the HTML language, also the ability to work with scripting languages, which is an integral part of working with forms. Tools for describing forms in documents are not included in this work.

    4. Alternative means of creating Web documents

    The HTML language is the main means of organizing data on the World Wide Web and there are no other languages ​​that would serve as a complete alternative to it. Therefore, there is no need to talk about in what ways this language is superior to other languages ​​or in what ways it is inferior to them. Although it should be noted that HTML has its limitations.

    Recently, the popular Java language, which is able to overcome the limitations of HTML, has been increasingly used in the design of Web documents. In conjunction with HTML, the Java language offers the user a means of document design that is difficult or even impossible to implement using HTML alone. This is, for example, creating three-dimensional animation on the screen, running applets (applications) on the user's machine, sent from the server. The Java language provides more flexible and convenient ways to communicate with users, such as more advanced data entry forms. Using this language, you can introduce some dynamics into any Web document, for example, make images on the screen replace each other with arbitrary frequency and order. In this way, Java adds more interactivity to documents. But Java itself does not allow you to develop Web pages as quickly as you can with HTML, and requires much more time to learn.

    In conclusion, the combination of HTML and Java is a powerful tool for creating colorful and professional Web documents.

    Essay

    1. Brief history of WWW

    2. HTML language - building Web documents:

    a) Web document template

    b) text formatting

    c) paragraph formatting

    d) working with images of images:

    I. background images

    II. static and dynamic images

    f) frames:

    I. Vertical frames

    II. Horizontal frame

    III. Nested Frames

    Alternative means of document preparation

    1. A Brief History of the World Wide Web

    It is well known that the Internet is, in particular, a huge repository of all kinds of information. Before the advent of the World Wide Web (WWW), navigating the Internet in search of the necessary information could not be called convenient. To receive a file from an FTP server, you had to download the client application separately. At the same time, you had to remember your password, you had to navigate through numerous directories in search of the desired file, not forgetting to set the correct transfer mode before receiving it; know numerous commands for working with FTP servers, etc. If you needed to view a conference, you had to launch another application, which had its own set of commands for reading, forwarding, and saving messages from conferences. All this was inconvenient.

    About five years ago an attempt was made to organize information order on the Internet. This led to the emergence of the World Wide Web service, which was born at the European Nuclear Research Center in Sweden. The WWW idea is based on the so-called hypermedia documents or Web documents, also called Web pages, designed to bring order to the organization and retrieval of data. These documents may contain both text and non-text information (for example, images, sound), as well as links. Links are pointers with which you can freely move from one place in a document to another, or even refer to a separate document, which may be located on the other side of the world. Although Web documents can contain a wide variety of information, not just text, they are almost always called hypertext ( hypertext) documents, which in general is not entirely true.

    On the screen, a typical Web document looks like a set of text with links; various illustrations may be present. You can flip through the document, viewing the contents, and quickly navigate through it or other documents using links.

    With the advent of the WWW, the Internet began to serve text and graphics, and with the mouse it became possible to travel around the world and easily find the information you need with a simple point and click. It has become easy to download files and read conferences. This is why the WWW service has gained worldwide popularity and widespread use. Every day, large numbers of Web servers appear on the Internet and thousands of new documents are published.

    To build Web documents on the WWW, a special language called HTML is used, which stands for HyperText Markup Language - a hypertext markup language, a data formatting language. Based on the Standard Generalized Markup Language (SGML), HTML defines the formatting and organization of data in Web documents. It doesn't define how exactly text will be placed on the screen; it defines the structure of the data. A Web document can contain more than just textual information, and therefore the HTML language would be more correctly called HyperMedia Markup Language, but in the literature the abbreviation HTML is almost always used. A document created in HTML is a regular file in ASCII format. It is based on special descriptors (tags), which determine the formatting of data in any Web document. Naturally, special software is required to view HTML documents on the World Wide Web. Such programs are called browsers (from the English. browse– leaf through, browse). With their help, you can download and view Web pages, navigate the WWW, etc. Currently, there are quite a large number of browsers, of which the most popular browsers are Microsoft Internet Explorer, Netscape Navigator and NCSA Mosaic. The browser, having read the HTML file, uses descriptors to interpret the data contained in the document and display it on the computer screen accordingly. In Fig. 1 shows an example of a Web document:

    Fig.1 Example of a Web document

    The HTML language is evolving rapidly. In the process of its development, it acquired new capabilities and lost little-used and outdated ones. At the moment, the current official version of the HTML language is version 3.2, which has developed tools for constructing Web documents. Compared to HTML 2.0, the new version offers new features such as tables, text wrapping around images, embedding Java applets, and other features.

    Today, in addition to the official version of the language, there are also versions of HTML from Microsoft and Netscape, which also support additional features not described in the specification for the official version of HTML. To solve the problem of browser compatibility when displaying documents composed using elements of unofficial versions of the HTML language, the above-mentioned companies include support for an alternative version of the language in their products. Version 4.0 of the language, called Dynamic HTML, is on the way, promising improvements to old and exciting new features for designing Web documents. The W3C (World Wide Web Consortium - the World Wide Web standards organization) is already proposing this version of the language as a standard. There are versions of the new version of the language from Microsoft and Netscape, which, however, are not yet compatible with each other. This paper reveals the main tools for constructing documents from HTML version 3.2 from Netscape Communications.

    2. HTML language. Building Web Documents

    As mentioned above, the formatting of a document in HTML is specified by special descriptors. A descriptor is a data formatting command and is enclosed in angle brackets "<» и «>" There are opening and closing handles, between which the text to be formatted is placed. Opening descriptors specify the formatting method, while second descriptors override it. The difference between these descriptors is that in the closing descriptor the name is preceded by a slash. For example, descriptors. There are also handles that do not require a closing option.

    HTML is not case sensitive, so all descriptors can be specified in either uppercase or lowercase letters. The browser will interpret them unambiguously in any spelling.

    If you look at the source text of a typical Web page, you will see something like the following:

    document title

    text

    text

    text

    text

    Between handles And the entire document is located. Descriptors And define the scope for specifying the document title. Between a couple And The title of the document is placed. Its contents are visible in the title of the browser window. The header information is used by some web robots to index data when crawling WWW resources. In this area you can enter, for example, information about the author, a brief description of the document. Between handles And contains the data that will be displayed by the browser on the screen. Descriptors

    And
    contain information about the author that will be displayed on the screen, for example, the author’s first and last name, his email address, the date the document was created and modified, etc.

    Strictly speaking, none of the above descriptors are mandatory when creating documents, but they help to structure documents and their definition is a sign of good style when composing Web pages.

    Text formatting

    Text formatting involves displaying text in a specific font or with specific attributes.

    To format text, you need to enclose a line or lines of text between a pair of handles. The following is a basic list of descriptors and the results of text formatting:

    For example, if you need to display a certain line on the screen in italics, then you need to enter the following into the body of the Web document:

    This text is written in italics

    As a result, the browser will display:

    This text is written in italics

    Descriptors can be combined with each other in any order, for example, the combination

    This text is printed in bold italic

    will produce the following result:

    This text is printed in bold italic

    Some Web documents contain flashing lines of text designed to attract the user's attention. For these purposes the descriptor is used :

    This is flashing text

    However, this Netscape language extension is rarely used and may soon become obsolete.

    The design of Web pages often uses fonts of various sizes. You can output a line with a font size different from normal using descriptors text , where n is a number from 1 to 7 that determines the font size relative to normal. So the following text is in the body of the document

    This text four sizes larger than usual

    Today's article touches on a very current topic among novice programmers and Web designers, namely the topic of choosing an HTML editor. Having presented the entire list of specialized software, it is difficult to make the optimal choice on the spot - each program is exclusive and has a number of its own features, advantages and disadvantages. Fortunately, among a large number of people in the above professions, over the years of their fruitful work, a “working list” of the most optimal programs for creating and editing HTML documents and, in particular, Internet sites has been formed. This material is devoted to the consideration of six HTML editors. Considering the considerable volume of the resulting article, we will not delay the introduction and will immediately get down to business.

    So, the first HTML editor that our eyes fell on was Macromedia HomeSite.

    Macromedia HomeSite is perhaps one of the most common HTML document editing tools among users who prefer to code pages manually. At the same time, HomeSite allows you to significantly speed up the creation process and make the developer’s work easier.

    Enlarge picture

    The program's workspace can be roughly divided into three parts: the first, largest, is the actual window with the contents of the document, the second part, located to the left, by default contains a list of documents available on the disk. And finally, at the top, in addition to the traditional menu, there are several panels with the most frequently used functions, the appearance of which, however, can be customized to your taste.

    Macromedia HomeSite provides convenient syntax highlighting not only for HTML pages, but also for PHP, Perl, ASP, MySQL and other popular development tools. This fact will appeal to experienced users who are not limited to hypertext markup language tools and use more complex web programming languages. If you are not satisfied with the current color scheme for syntax highlighting, then this is not a problem - you can edit the existing one, or even create your own document layout scheme. HomeSite has a powerful help system, which, in addition to describing the capabilities of the HTML language specification program, contains a tag reference book and includes convenient tooltips for the current descriptor - to call them, just press F2, and the user is shown all the possible attributes for a given tag.

    To speed up access to frequently used tag groups, there are several panels in the upper right corner, the appearance and location of which can also be changed.

    The panel is divided into several tabs, each of which contains tags related to one group. For example, the Fonts tab contains buttons for quickly increasing the font size, changing its style, position relative to the line, and inserting headings of three levels.

    An alternative way to manually enter all tag attributes is the so-called Tag Editor, which can be used to significantly simplify the process of assigning values ​​to various attributes.

    Separately, it is worth noting the tools for creating and configuring tables and frames - Table Wizard and Frame Wizard, which make life much easier for the developer when creating tables and frames of complex structures.

    Just imagine how much time it would take to create such a table manually!

    It should be noted that Homesite contains a built-in spell checker that checks not only the correctness of the descriptors used, but also the text itself, as well as a CSS file editor - cascading style sheets called TopStyle.

    To increase the speed of creating documents, you can use keyboard shortcuts - HomeSite provides a wide range of activities for keyboard lovers. For example, tegu
    corresponds to the key combination Ctrl+Break. However, the user is free to assign a keyboard shortcut that is convenient for him to almost any command.

    Pros. The advantages of the program include functionality, versatility, support for various programming languages, a clear interface, extensive capabilities and a powerful help system. Minuses. Lack of support for the Russian language, high price, you need at least a superficial knowledge of HTML to create pages, high price of the program.

    You can download the latest version of Macromedia HomeSite at this address.

    The SiteEdit program was created by the Russian company EdgeStile and is positioned by the developers as a site management system. Unlike HomeSite, SiteEdit belongs to the so-called visual development tools - WYSIWYG editors (from the capital letters of the expression What You See Is What You Get - “what you see is what you get”).

    After the first launch of the program, a ready-made website template appears.

    The structure of the entire site is presented in the form of various pages containing several sections. A section, in turn, can contain several records or objects. By switching to editing mode (F9 by default), we have the opportunity to edit existing sections and add new ones, change the text of an existing entry or add a new entry.

    After clicking on the “Change partition” button, a new window appears in which you can perform this simple operation:

    In addition to directly editing the text, the user has access to buttons for changing the font style, inserting a picture, the current date, adding a table, inserting a hyperlink, creating a bulleted or numbered list - and all this with a simple click of the mouse. For those who are familiar with the HTML language, you can not limit yourself to the above functions, but simply write the necessary code manually. Since the editing window does not have any frills such as syntax highlighting, you can call an external editor by clicking on the HTML button, in which you can make all the necessary changes.

    The program offers several design templates: book, galeon, kafe, palm_skin, stroitel, thanks to which you can significantly change the appearance of the entire site as a whole.

    All page elements are editable. To change the design more radically, there is a design editor that provides ample opportunities to change all the elements present on the page.



    enlarge picture

    On the left side there is a list of elements, on the right - their appearance on the page, and at the bottom there are windows for changing the values ​​of the attributes of a particular descriptor. For example, the following attributes are available for the Font tag: color, size, thickness, style, slant, underline, spacing. Beginners will like the way they fill out the windows - there is no need to enter anything manually, just select the desired element from the drop-down list. Choosing a color is also not difficult - a palette is at the user’s disposal; you just need to decide on the shade you like, and, voila, its hexadecimal code is already indicated in the appropriate field.

    The program includes a ready-made template that simulates a construction company’s website, which can be customized to suit your needs.

    It is curious that it is impossible to directly save the page code from the program; to do this, you need to select the “View page in the browser” option, and only from the browser you can save the page as an html file. This approach is apparently due to the fact that in the Standard and Business versions of the SiteEdit program it is possible to upload the entire project directly to the hosting, but in the free version of Start, unfortunately, this opportunity is not available. Hence such inconsistencies.

    Pros. Simple interface - practically no knowledge of HTML is required, functionality, light weight of the distribution, Russian interface language, free starting version.

    Minuses. Inability to save files directly from the program, spelling errors.

    SiteEdit is perfect for creating personal pages and simple web projects for beginner users and even for those who are completely unfamiliar with the HTML language.

    SiteEdit is available in three main versions - Start, Standard, Business, and two additional versions - Partner. You can download the Start version of SiteEdit from here.

    Another Freeware program that came to our review is HTML Source. The first thing that caught my eye was the small size of the program distribution kit - only 1.5 MB! This led to somewhat skeptical thoughts about the functionality of the program and its capabilities. However, we were pleasantly surprised.



    enlarge picture

    The program's interface resembles that of HomeSite, but, of course, there are much fewer tools and capabilities. On the left side there is an explorer window in which you can select the files you need to open. In the center is the web document editing window itself. On the right side of it there is a palette, and it works in a very convenient mode. When you hover the mouse cursor over a particular area of ​​the palette, the component of each color in the RGB palette is immediately shown, and just below - the color itself. Moreover, when you click on the desired area, a hexadecimal color code is immediately inserted into the document. Very convenient.

    At the top of the program's work area there is a regular toolbar, which contains buttons for creating a new document, opening existing files, printing a file, checking spelling, and other common actions. All icons are made in a good style, but the only disappointing thing is the lack of tooltips when you hover over one or another action icon. It is noteworthy that the program itself determines which browsers are installed on the system, and the toolbar contains icons for viewing the document in the user’s browsers. In my case, in addition to standard Internet Explorer, Opera and Mozilla FireFox were also installed, which is what the program demonstrated.

    Now let's move on to a description of the program's capabilities. HTML Source, as the name suggests, is intended only to make the coder’s work easier, and not completely replace it. The program does not have the ability to visually develop pages, i.e. For those who are not familiar with the basics of hypertext markup language, this product is not suitable. However, for those who prefer to develop web documents manually, HTML Source has a good set of tools to speed up the coding process.

    HTML Source offers syntax highlighting for HTML files, however, in my opinion, the implementation of this function in the program is somewhat inferior to that in HomeSite. Firstly, the part of the code related to defining styles was not highlighted at all. And secondly, there is no ability to independently customize the color scheme, which was present in the same HomeSite.

    In the "Insert" menu, the user has the opportunity to insert a date, special HTML characters, images, as well as a wide range of emoticons. A very original solution from the developers who included such an unusual feature in their program. Fans of virtual communication should like this.

    The "Tags" menu contains the main groups of HTML descriptors.

    Of greatest interest is the content of the “Tools” menu, which contains all the tools of this software. Let's look at its contents more closely.

    The "Convert Case" item allows you to change the case of letters, i.e. either invert it or reduce it to one specific one. The next item "Convert CodePage" allows you to quickly change the encoding of the entire page. Among the remaining items, it is necessary to note the built-in spell checker, and a tool for optimizing HTML code called Tidy, which brings the document appearance in accordance with the requirements of the W3C organization, which develops hypertext markup language standards.

    It is worth noting the advanced help system of the HTML Source program, which includes a complete description of the program's capabilities, as well as specifications of the HTML language, including CSS.

    Pros: Compact size of the distribution, original features, advanced help system.

    Cons: Lack of opportunities for visual development of documents, modest capabilities for customizing the program, lack of Russification.

    Thus, HTML Source will appeal to experienced developers, not only as a development tool, but also as a reference tool. You can download HTML Source here

    The next program we reviewed was Magic HTML Studio, developed by AG FreeSoft. After launching the program, an unusual picture appeared to our eyes - the design of Magic HTML Studio was very unusual.

    Some people may like such an interface, but, in my opinion, it is not a very good solution for a program of this type. I was also disappointed by the lack of any document syntax highlighting. Well, okay, let’s put aside all the complaints about the design, and let’s see how Magic HTML Studio is doing with the functional component.

    But here everything is at the highest level! Consider tools such as Java Constructor and CQI QuickBuilder. But first things first.

    On the left side there are buttons for quickly formatting text, changing the writing type and position of the text on the page. Icons are also provided for inserting headings of various levels into the document. On the right side, the user has access to buttons for inserting text of a certain color, but the space is used very irrationally - a separate button is allocated for each color, although it would be more convenient to use a regular palette, for example, as in the HTML Source program.

    Now let's move directly to the tools and tools that are unique to Magic HTML Studio. Java Constructor is a powerful and at the same time simple tool for creating scripts in the JavaScript language, and for this the user does not need any knowledge of this programming language. Using the designer, you can insert a calendar or clock onto your page, make a dynamic or drop-down menu, create a simple banner consisting of several pictures and some other useful dynamic elements.



    enlarge picture

    The designer automatically creates the necessary script, and you only need to paste it into the right place in the document.

    The program also includes a CGI script generator, with which you can create a conference, guest book or chat in just one click, after setting the script parameters.

    Unfortunately, we did not have the opportunity to test this tool in practice - for this it was necessary to upload the files to a server that supports CGI scripts. Let's move on to other features of the program. Thus, using the Options menu, you can add a Flash loading script, call the element editor, as well as change the font and add a form.

    It is also necessary to note a good help system in Russian, containing a description of all the main features of the program.

    Pros: advanced designers of JavaScript and CGI scripts, ample opportunities for adding dynamic elements, help system in Russian.

    Cons: not entirely successful design, lack of syntax highlighting, lack of visual development tools.

    Microsoft FrontPage, included in the Microsoft Office suite, is a classic WYSIWYG editor, which, however, has the ability to manually edit code.

    The program's interface is in many ways reminiscent of that of Microsoft Word, which is not at all surprising - the unification of the appearance will help beginners quickly master the basic capabilities of FrontPage.

    The program has three modes of working with a document: Normal, HTML and Preview. In Normal mode, the web page is a regular text file with the ability to edit all elements - from text to pictures.



    enlarge picture

    HTML mode allows you to view the page code and, accordingly, edit it. In this mode, FrontPage provides syntax highlighting, but it is quite mediocre - descriptors are highlighted in blue, everything else is black.

    Finally, Preview mode lets you see what your page will look like in a browser window.

    FrontPage, thanks to its close integration with other Microsoft products, allows you to insert into a web document Various types objects: from pictures and diagrams to Microsoft Excel sheets.

    Of course, FrontPage has a table designer that makes creating them much easier.

    One of the main advantages of the program is the large number of available templates, allowing the user not to rack his brains over the design of his project.

    Having selected the required template, you can proceed directly to filling the page with content. This is where the beauty of FrontPage comes into play: the process of creating an HTML page is no different from creating a regular text document in Microsoft Word. The user has access to the same tools for editing text, changing its formatting, creating and editing tables, and inserting various objects and images. The program allows you to easily create bulleted, numbered and multi-level lists - all without knowledge of HTML!

    FrontPage divides the work area into several blocks containing certain page elements - pictures, text, headings, etc. For each block, you can assign your own formatting parameters and its location relative to the page.

    There is also the other side of the coin - the complexity and cumbersomeness of the resulting code, which naturally affects the final size of the document. It will also be very difficult to make changes to such a document in the future. But this is rather a drawback not of a specific product, but of almost all WYSIWYG editors.

    Pros: familiar interface for MS Office products, a good set of templates, integration with other programs from the MS Office suite.

    Cons: small set of development tools, impossibility of purchasing the program separately. Microsoft FrontPage is a good choice as an HTML editor for the first time, but as the user's needs grow, its capabilities may not be enough.

    And finally, the last program in our review is Macromedia Dreamweaver MX 2004. The considerable size of the distribution kit (62 MB) allows you to expect a lot from this HTML editor. Indeed, the capabilities of Macromedia Dreamweaver MX 2004 are impressive. After installation, the user is asked to choose the appearance of the program, which differs depending on the approach to creating web documents. When you select "Code" the program interface will be adjusted to the needs of the encoder, and when you select "Design" - accordingly, the designer. However, it is always possible to switch between these two modes, and a third, combined mode is also available - the program’s work area is divided into two parts.



    enlarge picture

    On the right side there is another multi-level menu, in which, in particular, there are items for displaying help for the current descriptor, a list of used images, an explorer and some other items.

    Additional assistance to the developer is provided by context menus, which duplicate the main functions called from the main menu. For example, working in visual mode by right-clicking on any element, we can change the font used, its style, color and other attributes, and it is also possible to change the attributes of the tag used.

    The main capabilities of the program lie precisely in the use of visual mode. The icons on the toolbar are responsible for the most common actions: adding a hyperlink, inserting an image, constructing a table, adding the current date, etc.

    For users familiar with the capabilities of the HTML language, we can recommend using a tool called Tag Chooser, with which you can insert not only any HTML tag, but also basic expressions and operators of programming languages ​​such as JavaScript, ASP.Net, PHP, WML and ColdFusion. All this opens up new horizons for using the software when developing various complex projects using server programming languages.

    The convenience of the combined mode is that all changes made are displayed in both windows at once. That is, having made changes to the document code, you immediately see the result in the adjacent window and, conversely, when you select any element, the corresponding code is displayed.

    When working in "Code" mode, the program's workspace resembles that of HomeSite - it feels like the products have the same creator, but Dreamweaver still has better functionality. Consider just one table designer, which provides the developer with unprecedented flexibility when creating tables. Moreover, when creating a table, the program offers to use one of the design templates, of which there are several dozen, and when you select a specific template, you immediately have the opportunity to adjust it to your needs by adjusting some of its attributes. After creating a table and filling it with content, sorting the table by any column becomes available. And all this is in visual mode, while the code itself, of course, changes automatically.

    Macromedia Dreamweaver MX 2004 can be used in conjunction with other company products - Macromedia Fireworks, Flash, etc.

    If the choice of a user who prefers to create documents in visual mode is almost obvious, then the “encoder” faces a difficult task in choosing between two Macromedia products: HomeSite or Dreamweaver MX 2004? It can be noted that the capabilities of Dreamweaver MX 2004 will be superfluous for the coder, however, with a large amount of routine work, you can completely use the visual mode - if the program offers it, then why not try it? HomeSite users are deprived of this opportunity, but the program offers them the entire necessary set of tools for the comfortable development of web documents of varying complexity.

    Thus, everyone is free to choose the product they need independently, taking into account their goals and existing knowledge. Of course, there is also the issue of price - both Macromedia products are distributed as Shareware, but they are free to use during a 30-day trial period. This time is enough to make a choice.

    Pros: a huge set of tools for visual document development, a clear interface, the ability to work in encoder mode, a ready-made set of templates.

    Cons: large volume of distribution, high price of the product.

    8th grade

    Introduction to HTML


    Lecture No. 1: Introduction to HTML (12 hours)

    Topic 1: Introduction to HTML (1 hour)

    Plan

    1. Understanding HTML

    2. The concept of hypertext

    3. The concept of an html file

    4. The concept of HTML language tags

    5. Structural tags

    6. Create an HTML document template and your first Web page
    1. Understanding HTML

    HTML stands for HyperText Markup Language, or hypertext markup language.

    It is important to understand that HTML is not a programming language - it is a text markup language. It allows you to determine the appearance of the document. If conventional programming languages ​​are used to write programs (algorithms) designed to perform specific tasks, then the HTML markup language is used to represent a document in a certain form.

    ^ 2. The concept of hypertext

    Hypertext (hypertext) is special text that contains a link to another Web page or document. In this case, the prefix hyper means more than or above, because you see in front of you something more than just text. In most browsers, hypertext (or hyperlink) is usually underlined and in a different color from the rest of the text. If you click on the hypertext, its color will change. Clicking on a hyperlink causes the Web browser to request the document pointed to by the link and then load it into the browser window. Thus, thanks to hypertext, a Web page acquires the property of interactivity.

    Hypertext has neither beginning nor end. Most printed publications are designed to be read from the first to the last page. In this sense, they have a linear structure. And hypertext is more like a web with an undefined center. The art of creating good Web pages lies primarily in organizing information intelligently. The user must have the page structure or its summary in front of him in order to select what interests him.

    ^ 3. The concept of an html file

    To develop html files, you only need a text editor. Remember that although HTML pages are files with the extension .htm or .html, they are actually plain ASCII text files. In order to create an html page, you need to use the command File - Save As and save the file in text format and add the extension .htm or .html to its name, depending on the operating system you are using.

    The best way to organize your HTML files is to create a special directory (or folder) on your hard drive for storing Web pages. This is especially important if we are going to create several interconnected pages. First you need to determine the structure of the files on your hard drive. To create a simple Web server, you typically need a few text and graphics files and maybe a couple of media files. By creating a Web server that contains a relatively small number of pages and images, you can store all the files in one directory. If there are a lot of files, you should place them in several folders.

    ^ 4. The concept of HTML language tags

    As we have already said, markup language allows you to determine the appearance of the document. To do this, special codes, or descriptors (tags), are inserted into them. Moreover, this can be done using Notepad or another word processor. In general, when creating Web pages, you'll have to do many of the same things you're used to doing in a word processor, such as bolding text or converting individual phrases into headings.

    So what is a descriptor? Descriptor is the basic coding element adopted in the HTML standard. In HTML, almost everything depends on descriptors. They serve to draw attention to certain words in a document, thereby telling the browser what to highlight, where to display graphics, and where hyperlinks are located.

    Descriptors are enclosed in angle brackets (< >). For example, a paragraph descriptor is

    , and the horizontal line descriptor is <НР> . Descriptors can be written in either uppercase or lowercase letters. However, writing descriptors in capital letters greatly facilitates visual perception of the text.

    There are two types of handles: containers and single handles. A container is a descriptor pair consisting of a start (or opening) and an end (or closing) descriptor. The initial descriptor has the form , and the final one . Containers are designed to store some information, such as text or other descriptors. Therefore, the contents of the container are enclosed between the start and end handles. For example, an element representing a first-level heading is contained between descriptors

    And

    :

    My first HTML document!

    An empty handle differs from a container in that it does not contain any information. It only has an initial handle. An empty handle usually performs a separate task unrelated to specific text. For example, descriptor

    creates a horizontal line and does not perform any actions on the text, as opposed to the start and end handles of the container.

    The start and end handles of a container, along with the contents enclosed between them, are element HTML document. An element can be an image, a piece of text, a form, a table, a list, a link, a text field, a button, and even the title of the document or its main part (body). But note that an element is not only the descriptors, but also what is enclosed between them.

    ^ 5. Structural tags

    Let's get acquainted with the main descriptors that determine the structure of a Web page.

    HTML element descriptors ( ) are the most external, i.e. contain all other text and other descriptors. Initial descriptor , is the first thing you should type. And the final descriptor, , indicates the end of the document. Most browsers do not accept text outside of these two descriptors.

    An HTML document has a "head" (header) and a "body" (body).

    In any HTML document, the HEAD element precedes the body (or body) of the Web page. The contents of the HEAD element are enclosed between handles And . This text provides general information about the file and does not appear in the document itself. The HEAD descriptor can contain a number of other elements. We are primarily interested in the descriptor </b>, which specifies the title of the document. Text enclosed between handles <b><TITLE> </b> And <b> , is displayed at the top of the program window (title bar).

    And finally, the most important part of the HTML document is the BODY element, which is contained between a pair of descriptors And . This element is the most important because it includes all the text, images, and multimedia displayed on the page or links to them. The description of the BODY element immediately follows the description of the HEAD element.

    ^ 6. Create an HTML document template and your first Web page

    Open Notepad and enter the following text:


    Web page title

    Web page content: test, graphics, links, etc.



    Save the file in your folder as template.html.

    Now create a new document and upload the template we created into it. Then use the command ^Save as to give the new page a name.

    Replace the text enclosed between the handles And to "My first Web page!" Now replace the text between the handles And to the next one:

    This is my first Web page!

    The final version of your file should look like this:


    My first web page!


    This is my first Web page!




    Save the file in your folder and name it first.html.

    Topic 2: The main part of the Web page (1 hour)

    Plan

    1. Use of headings

    2. Paragraph break and line break symbols. Align paragraphs and headings

    3. Using a descriptor

    4. Formatting text using styles

    5. Adding lines and comments
    The bulk of all Web pages are defined by the BODY element, whose start and end descriptors indicate the beginning and end of information. The BODY container is not used in only one case - in a document with frames (frameset), where it is replaced by the FRAMESET container.

    ^ 1. Use of headings

    Typically, HTML developers start by creating headers. There are six levels of headings and each of them has its own font size. Using headings at different levels, you can create a clear hierarchical structure of the document. The same principle is used here as in book publishing, where chapter headings are highlighted in large font, section headings in smaller font, subsection headings in even smaller font, etc.

    The HTML standard supports six levels of headings, which are defined using containers: H1, H2, …, H6. There are standard font sizes for each heading level.

    ^ 2. Paragraph break and line break symbols

    Descriptors

    And
    allow you to add spaces to your document to separate one block of text from another.

    Descriptor

    used to insert a paragraph break character. By inserting this descriptor, we are giving the browser a command to complete the current paragraph and insert an empty line before the next paragraph.

    Descriptor
    used to insert a line break character. By inserting this descriptor, we give the browser a command to complete the current line and move on to the next one.

    ^ Align paragraphs and headings

    You can align paragraph or heading text to the left (default setting), to the right, or to the center of the browser window.

    The syntax for the header descriptor is:

    Where n is the title level;

    Alignment is a parameter that can take one of the following values: LEFT, RIGHT, CENTER.

    The syntax for a paragraph descriptor is:

    <Р ALIGN=выравнивание>

    ^ 3. Using a descriptor 

    

    If you want to put information into a Web page that is already contained in some document (but not in HTML code), then there is no need to waste time retyping the entire document.  You can use a rich text container instead 
    ^
 Formatting Quotes

    Descriptor 
    
 designed for long quotes, and allows you to indent a line.
    Into container 
    
 you can include other descriptors, such as text styles or line breaks.
    Descriptor 
 designed to display short quotes.  If using the handle 
    
 a separate fragment is created in a block of text, then when using the descriptor 
 the quotation continues on the same line as the previous text, i.e.  the block of text does not break into pieces.
    ^
 4. Formatting text using styles

    HTML provides several ways to format text.  This is explicit (or absolute) formatting using physical styles and implicit (or relative) formatting using logical styles, and finally, changing the font size.
    Physical style descriptors are absolute, meaning that text highlighted with a physical style is rendered the same in all browsers.  And logical styles, unlike physical ones, can be called relative.  This means that they appear differently in different browsers.
    ^
 Table - Physical style descriptors

     
    Descriptor
    		  
    Style
    		

     

    		  
    Bold 
    		

     

    		  
    Italics 
    		

     

    		  
    Monospace font, like a typewriter 
    		

     

    		  
    Underline 
    		

     

    		  
    Interlinear text 
    		

     

    		  
    Superscript text 
    		

     

    		  
    Crossing out 
    		

    ^
 Changing the font size

    The FONT element allows you to define the font size and color.  The SIZE attribute allows you to specify an absolute font size (it can range from 1 to 7) or a relative size relative to the font size used in the body of the page (it can range from -4 to +4).  The following syntax is used:
    

    To change the size of the document's main font, use the BASEFONT element.  The main font size can range from 1 to 7, and the standard browser font size is 3.
    To change the font color, use the COLOR attribute, using the following syntax:
    .

    ^
 5. Adding lines and comments

    To divide page text into parts, you can use horizontal lines that are created using the descriptor 
    .
 The appearance of a line can be changed using attributes.
    ^
 Table - Descriptor Attributes 
    


    The SIZE value is measured in pixels.
    The WIDTH value can be measured in either percentage or pixels, so there are two syntax options for the WIDTH attribute:
    

    .

    The ALIGN attribute can be LEFT, RIGHT, or CENTER.  It must be used in combination with the WIDTH attribute, otherwise the line will stretch across the entire screen:
    .

    The syntax for the NOSHADE attribute is:
    .

    Adding comments
    You can add comments to the source code of a Web page that will not be visible to visitors to your server.  They are designed to make it easy for you to understand your own code if necessary.
    The following syntax is used for comments:
    .

    Practical task
    Open the first.html file and save it as second.html.
    Change it to match the listing below:
     
     
     This is my first Web page!
     
     
     
    I'm learning HTML
     

     
    Change the font size and color
     

     
     
    This paragraph will be centered, unlike body paragraphs in the document, which are left aligned
     

     
     
    Save the document and open it in a browser window.
    Topic 3: Creating tables (1 hour)
    Plan
    1. Initial stage of creating table code
    2. Create table rows and columns
    3. Selecting a table type
    4. Aligning data in table cells horizontally and vertically
    5. Coloring tables and frames 
    ^
 1. Initial stage of creating table code

    Imagine a table containing the names of products and their prices.  This standard way using tables.  Now let's add pictures to the table, which are hyperlinks to HTML files containing larger images, as well as detailed information about the relevant products.  Video and audio recordings can also be table elements.  Thus, the user will be able not only to see a lot, but also to hear a lot.
    The HTML code that is used to create the tables is not overly complex;  rather, it is very bulky.  Building tables is not such a difficult task if you do it right.
    Before you start creating tables, you need to understand the structure of the code that is used to create them.  The HTML table code is contained in the TABLE container.  Before you create HTML for a table, you must determine the maximum number of rows and columns it can contain.  Then, as you write the code, you will define the cells one by one.  Cells are defined from left to right row by row and from top to bottom.
    Rows, columns, and cells are standard terms used to describe tables.
    ^
 2. Create table rows and columns

    To describe a table, you need to specify the number of rows and columns, as well as their location.
    A pair of descriptors is used to define one table row 
 And .
 They tell the browser that the cells defined between these handles belong to the same table row.
    Descriptors 
 And 
 define the table headings.
    Descriptors 
 And 
 determine the contents of the cell.
    Using the COLSPAN attribute contained within the descriptor 
 or ,
 You can make the corresponding cell span multiple columns.  To do this, you need to set the COLSPAN attribute to a value equal to the number of columns you want the cell to occupy. ROWSPAN attribute performs the same function only for strings.
    ^
 3. Selecting a table type

    Before we move on to describing the cells, we need to define some general characteristics of a table.  These include table width, spacing within cells, spacing between cells, etc.
    One of these general characteristics is a frame, i.e.  a border that separates a table from the rest of the document.  To do this, use the BORDER=n attribute, where n is the width of the border in pixels.  The BORDER attribute is placed in the descriptor 
    .  If you select a value of 0 or omit this attribute altogether, a table without a border will be created.
    To determine the width of the table, the WIDTH attribute is also used in the descriptor 
    

    .  The width value is specified either as a percentage or in pixels, and is enclosed in quotation marks.
    Using the COLS attribute placed in the descriptor 
    

    , you can determine the number of table columns:
    

    .

    Finally, the CELLSPACING and CELLPADDING attributes placed in the descriptor are used to define intervals in the table 
    .
 CELLSPACING attribute defines the distance between cells in pixels (the default value is 2).
    The CELLPADDING attribute specifies the distance, in pixels, between the cell's contents and its borders (the default distance is 1).
    ^
 4. Aligning data in table cells horizontally and vertically

    The ALIGN attribute allows you to align the contents of cells and can take the values ​​CENTER, JUSTIFY, CHAR, RIGHT, LEFT.
    If you set the ALIGN attribute to JUSTIFY, the cell's text content will be justified.
    If you set the ALIGN attribute to CHAR, the contents of the cell will be aligned to the character specified by the CHAR attribute.  For example, ALIGN="char" CHAR="," can be used for alignment natural numbers by fractional separator.
    ^
 Aligning data vertically in table cells

    The VALIGN attribute can be used in a container 
    , 
    , 
.  With it, you can align text to the top or bottom border of the cell, as well as center it vertically.  The VALIGN attribute can take the following values: TOP, MIDDLE, BOTTOM.
    Adding table captions
    Using a container 
    Captions can be added to tables.  In this way, you can use captions to describe the table in more detail, for example by adding information about the units of measurement used in the table.
    By default, signatures are located above the table, but they can be placed in other places.  For example, to place captions under a table, use the following code:
    In addition to the BOTTOM attribute, you can use the TOP, LEFT, and RIGHT attributes in the CAPTION container.
    ^
 5. Coloring tables and frames

    You can add a background to a table that is a different color from the rest of the Web page.  You can also color rows or individual cells to make them stand out from the rest of the table.
    To do this, use the BGCOLOR attribute of the descriptor 
    
This is a signature

    .

    The value of the BGCOLOR attribute can be either a hexadecimal number (in the format #rrggbb) or text.
    Using a handle 
    

     and the BORDERCOLOR and BORDERLIGHT attributes can change the color of the table border.  The BORDER attribute must be placed in the descriptor 
    

    .  To change the border color inside a table, you need to use the BORDERCOLOR and BORDERLIGHT attributes in the descriptor  or 
    

    
.

    The value of the BORDERCOLOR attribute affects top part frames of the three-dimensional table, and the BORDERLIGHT value is set to the lower one (i.e., to the shadow).  Using these attributes, you can modify the standard presentation attributes of 3D table frames.
    ^
 Practical task

    Generate the HTML code for the following table 
     
    Surname
    		  
    days of the week
    		

     
    Monday
    		  
    Tuesday
    		  
    Wednesday
    		  
    Thursday
    		  
    Friday
    		

     
    Ivanov 
    		  
    6

    		  
    0
    		  
    0
    		  
    0
    		  
    0
    		

     
    Petrov 
    		  
    0
    		  
    6
    		  
    0
    		  
    0
    		  
    0
    		

     
    Sidorov 
    		  
    0
    		  
    0
    		  
    6
    		  
    0
    		  
    0
    		

     
    Sergeev 
    		  
    0
    		  
    0
    		  
    0
    		  
    6
    		  
    0
    		

     
    Vasiliev 
    		  
    0
    		  
    0
    		  
    0
    		  
    0
    		  
    6
    		


     
     Creating a table
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    Topic 4: Creating Lists (1 hour)
    Plan
    1. Lists as a structuring tool.  Types of lists
    2. Numbered lists
    3. Bulleted lists
    4. Lists of definitions
    5. Nesting and combining lists 
    ^
 1. Lists as a structuring tool.  Types of lists

    Lists are a very powerful way to structure a document.  With their help, you can ensure a clear and precise presentation of the material.  HTML provides the ability to create attractive yet functional lists.
    HTML provides the ability to create different types of lists.  Moreover, each of them can be used either independently or in combination with other types of lists.
    ^
 Table - Types HTML lists and their corresponding descriptors

    ^
 2. Numbered lists

    Ordered and numbered lists are the same thing.  These terms are used interchangeably.  A numbered list is created using a container.  Each list element is defined inside this container using a handle 
  • 
(which stands for list item).
    By default, list items are numbered using regular Arabic numerals.  But you can make sure that letters of the alphabet (lowercase or uppercase) or Roman numerals are used for numbering.  The list formatting style is defined using the following syntax:
      

      The type parameter can take the values ​​given in the table
      ^
 Table – Types of numbering of ordered lists in HTML

      The numbering method can also be changed in the middle of the list.  To do this, the corresponding list element must be defined as follows:
    1. 

      Numbering a list using numbers or letters can begin with any number or letter.  The START attribute is used for this. To start numbering with a certain letter or Roman numeral, use the TYPE and START attributes.  The syntax for this procedure is as follows:
        

        The value parameter is a number.
        To change the numbering scheme within a list, use the VALUE attribute of the descriptor 
      1. .

        ^
 3. Bulleted lists

        The most common type of list is an unordered or bulleted list.  In such lists, opposite each element of the unordered list there is a bullet, which can look like, for example, a large black circle or square.
        When creating bulleted lists, descriptors are used 
          
 And 
        
.  As with numbered lists, all elements of bulleted lists are defined using a handle 
      2. 
.
        To change the bullet type for an entire list, use the syntax 
          
, and for one list element – 
        • 
, where the type parameter is one of the values ​​given in the table
          ^
 Table - types of bullets for bulleted lists

          ^
 4. Lists of definitions

          Lists of definitions are somewhat reminiscent of explanatory dictionaries, since each term has a corresponding definition paragraph, indented.  This tool is indispensable if you need to create a list of elements with their detailed description(for example, for retail or real estate catalogs).
          The definition list is contained in the container 
          .
 Definition list items are created using descriptors 
          And 
          
, which are used to mark term and him definition respectively.
          ^
 5. Nesting and combining lists

          If desired, you can combine different types of lists, as well as nest them within each other, regardless of whether it is one or the other. different types they relate.
          The following listing shows an example of nesting a bulleted list within a numbered list.
           
           
           Nesting lists
           
           
          Nested Lists
           
          How to make the elixir of youth
           
        • Take equal parts of the following elements:
           
        • Crocodile tears
           
        • Ears from a dead donkey
           
        • Donut hole
           
        • Mix everything and grind into powder
           
        • Pour the powder with alcohol
           
        • Pour the resulting liquid into a bottle
           
        • Bury the bottle in the garden
           
        • Dig in exactly 1 year
           
        • Throw the bottle into the sea and don’t fool yourself!
          


          

          


                            
                        
                        
          
                            
          
                                
          Article rating:
          
                                
          1 Star2 Stars3 Stars4 Stars5 stars(No ratings yet) 
          
                                
          
                                    Loading...
          
                            
          
                            
          
                                
          Share with friends:
          
                                
                                
          
                            
          
                        
          



                
                    
                    
          
                        
          Articles on a similar topic
          
                        
                    
          
                    
                
            
        
        

        
            
        

        
          
            
          
                
          Close
          
                
                
          Find on the site
          
                
          
                    
          
                        
                        
                    
                
          
                
          For example: types of drywall
          
                
            
          
        
          

        
        
        
        
        

        


        


        


        


        
    
    


    



    
    

          

          



    • Surnamedays of the week
    MondayTuesdayWednesdayThursdayFridayIvanov60000Petrov06000Sidorov00600Sergeev00060Vasiliev00006