Hardware and software setup

The markup language for hypertext pages is HTML. Create Web Pages Using HTML Create Web Pages Using HTML

Saint Petersburg State Polytechnic University

Faculty of Economics and Management

Department: Economics and Management in Electric Power Industry and Environmental Management

Course work

Information technology in energy

"Creation web -pages using language Html ».

Head: Vasilyeva Veronika Igorevna

Performed by a student of group 2073/2: Maryina Victoria.

St. Petersburg

Introduction …………………………………………………………………… 3

1. Basic concepts of the HTML language ……………………………………… ..4

1.1 History of the emergence of the HTML language ………………………………… .4

1.2. The structure of the file in HTML format …………………………… .... 6

1.3. Lists of basic HTML tags …………………………………… ..9

1.4. Creating tables in HTML ……………………………………… ..10

1.5 Creating hypertext links ……………………………… ..12

2. Description of the creation of the site "Archery" ... .. …………………… ..14

Conclusion ……………………………………………………………… .22

References ……………………………………………………… .... 23

Introduction.

The topic of my term paper " Web creation-pages using the HTML language ”is very relevant at the present time, since we live in the age of computer technology and the Internet occupies a huge place in the life of working and studying people. The Internet, which is inconceivable without the HTML language, with the help of which web pages are created, penetrates into all the most important parts of human life and is a limitless source of information.

My course project was developed on the example of a site that I created and which is the very same subject of work. Therefore, in the future, all materials used will be taken from it.

The goal of my work was to learn how to create a website and use the necessary algorithms for this, which will be described in my work.

To write my course project, I will use lectures in which the basic concepts that will be needed in further study are detailed and clearly stated. In addition, I will include information taken from the Internet.

1.1 History of the appearance of the languageHtml.

English Hyper Text Markup Language is a standard markup language for documents on the World Wide Web. Most web pages are created using HTML (or XHTML). HTML is interpreted by the browser and displayed as a document, in a human-readable form.

HTML is an application ("special case") of SGML (standard generalized markup language) and conforms to the international standard ISOXHTML, while it is an XML application.

British Tim Berners-Lee in about 199911992 within the walls of the European Council for Nuclear Research, Geneva, Switzerland). HTML was created as a language for the exchange of scientific and technical documentation, suitable for use by people who are not specialists in the field of layout. HTML successfully tackled the problem of SGML complexity by defining a small set of structural and semantic descriptors. Descriptors are also often referred to as "tags". WITH using HTML you can easily create a relatively simple yet beautifully designed document. In addition to simplifying document structure, HTML added support for hypertext. Multimedia capabilities were added later. Initially, HTML was conceived and created as a means of structuring and formatting documents without being tied to means of rendering (display). Ideally, text with HTML markup should have been reproduced without stylistic and structural distortions on equipment with various technical equipment (color screen of a modern computer, monochrome organizer screen, limited-sized screen of a mobile phone or device, and programs for voice playback of texts). but modern application HTML is far from its original purpose.

Over time, the main idea of ​​the platform independence of the HTML language has been given up as a kind of sacrifice to modern needs in multimedia and graphic design.

Text documents containing HTML code (such documents traditionally have extension.html or .htm) are processed by special applications that display the document in its formatted form. Such applications, called "browsers" or "Internet browsers", usually provide the user with a convenient interface for request web-pages, their viewing (and output to other external devices) and, if necessary, sending the data entered by the user to the server. The most popular browsers today are Internet ExplorerMozilla FirefoxSafariGoogle chromeOpera.


1.2 HTML file structure

To create a web page, first of all, we need to create a file with the "htm" or "html" extension and open it for editing in a text editor (working in Windows, you can use the standard Notepad program).

The text for the HTML document is typed in the form in which the browser should show it, and when highlighting fragments that are intended for marking up the document (tags), angle brackets ("" signs) are used.

Any HTML document starts with a start tag and ends with its corresponding end tag. The closing tag differs from the opening tag by the presence of a forward slash in front of the tag name. In HTML, there is no distinction between uppercase and lowercase letters when writing tags, but it is customary to write the opening tag in capital letters and the closing tag in small letters. The part of a document that ranges from a start tag to its corresponding end tag is called a container (to contain). Tags that have an opening and closing post variation are called paired, and those that are used only in one form (for example, the tag

) are called unpaired. An entire web page file is essentially one large HTML container.

Inside the HTML container, two containers are written sequentially:

1.Document title (). Parameters common to the entire page are written inside this container. For example, you can put a container here that allows you to place the text to display in the header of the browser window.

2.Document body (). This container contains everything that the browser needs to show inside its window when opening a document. If the document contains only text, then this text should be written exactly here, if there are other elements (graphics, tables, links, etc.). The BODY element must appear at most once in a document.

If you compare the source code of various Web pages, you can easily see the similarities in their structures. This is due to the fact that documents are created according to certain rules. The HTML syntax is based on the ISO 8879: 1986 “Information processing. Text and Office systems. Standard Generalized Markup Language (SGML) ". True, there is a big difference between the official standard and the actual standard.

Below is a template for a typical Web document. Using his example, we will look at the general principles of building HTML pages.

In order to understand the structure of a Web page, we need to take a closer look at all the elements that make up the example below.

initial

document body

If you explain the above example schematically, you get the following:

The diagram shows that the document consists of two main blocks - "title" and "body of the document". The title is defined using the HEAD element, and the body is defined with the BODY element.

The title contains "technical" information about the document, although it is most often used only to denote its title (see the TITLE element).

The body of the document is the most important component. It is in it that everything that is displayed on the page is located: text, pictures, tables.

A heading is created using the HEAD element, between which tags are placed elements containing technical information about the document. The heading usually goes before the body of the document.

Elements related to the title of the document:

HEAD - defines the beginning and end of the head of the document. It is a container for items containing technical information about the document.

TITLE - defines the name of the entire document, which is displayed in the title of the browser window. The name is usually displayed in the header of the browser window. This element is required for any HTML document and can be specified no more than once.

BASE - Indicates the base address of the current document (URL), which will be the starting point for calculating relative addresses within the document. The element has no end tag. The presence of at least one of the attributes is required.

1.3. Basic HTML tag lists

List of basic HTML tags required to form the text of a web page.

Starting

Final

Description

HTML document designation

Heading part of the document

Document title

Body of the document

First-level paragraph heading

Second-level paragraph heading

Third level paragraph heading

Level 4 paragraph heading

Level 5 paragraph heading

Sixth-level paragraph heading

Formatted text

Line feed without end of paragraph

You can also combine different types of styles, such as bold and oblique.

Additional styles:

1.4. Creating tables inHTML.

Tables in HTML are organized as a collection of columns and rows. Table cells can contain any HTML elements such as headings, lists, paragraphs, shapes, graphics, and form elements.

Basic table tags

...

These are the main tags that describe the table. All table elements must be inside these two tags. By default, the table has no borders or separators. The border is added with the BORDER attribute.

Table Row:

...

The number of table rows is determined by the number of found pairs of tags

.. ... Rows can have ALIGN and VALIGN attributes that describe the visual position of the contents of the rows in the table.

Table cell:

...

Describes a standard cell in a table. A table cell can only be described within a table row. Each cell should be numbered with the number of the column for which it is described. If one or more cells are missing in a row for some columns, the browser displays a blank cell. The default location of data in a cell is determined by the ALIGN = left and VALIGN = middle attributes. This arrangement can be corrected both at the line description level and at the cell description level.

Table header:

...

A table header cell is the width of the entire table; the text in this cell has the BOLD attribute and ALIGN = center.

Signature: ...

This tag describes the name of the table. The tag must be present inside

...
, but outside the description of any row or cell. It defaults to ALIGN = top, but can be explicitly set to ALIGN = bottom. ALIGN specifies where - at the top or bottom of the table - the signature will be placed. The signature is always centered within the width of the table.

Basic table attributes

BORDER - This attribute is used in the TABLE tag. If this attribute is present, the border of the table is drawn for all cells and for the table as a whole. BORDER can be a numeric value that defines the width of the border, for example BORDER = 3.

ALIGN - If the ALIGN attribute is present inside the tags and, then it defines the position of the caption for the table (top or bottom). ALIGN = top by default.
If the ALIGN attribute occurs inside

, or, it controls the horizontal position of data in cells. Can be left (left), right (right), or center (center).

VALIGN - This attribute occurs inside tags

, and... It defines the vertical placement of data in cells. It can take the values ​​top (top), bottom (bottom), middle (in the middle) and baseline (all cells of the line are pressed up).

NOWRAP - This attribute indicates that the data in a cell cannot be logically split into several lines and must be represented as a single line.

COLSPAN - Indicates how many cells will be horizontally merged for the specified cell. The default is 1.

ROWSPAN - Indicates how many cells will be vertically merged for the specified cell. The default is 1.

COLSPEC - This parameter allows you to set a fixed column width, either in characters or in percent, for example COLSPEC = "20%".

1.5. Hypertext links.

Hypertext links are a key component of making the web attractive to users. By adding hypertext links, you can make a set of documents connected and structured, which allows the user to get the information he needs as quickly and conveniently as possible.

You can also use links both to move through the document, and to move from one document to another. However, HTML does not support going back to the previous link if the movement was within the document. If you use links within the document, and then press the Back key, then you will not go to the previous link, but return to the part of the document that you viewed before.

The following tags are used to create hyperlinks



2. Description of the creation of the site "Archery"

Figure 1 shows a notebook in which my Archery site was made, namely the original page or the home page of the site.

Were set the background color (gray), font color (black, red, etc.), Fig. one; font size, hyperlinks to other pages were also made at the top in the form of a table:

In personal and

team competition, women's and men's teams, since 1972 ....

(fig. 3)

Fig. 4 shows a notebook in which 2 pages were made, namely "Origin of origin", the background color, font color, font size were also set (Fig. 4), unchanged hyperlinks were made in the form of a table to other pages:

(Figure 5)

as well as to the necessary sections of the text:

(fig. 6)

Notebook in which the production of 3 pages was carried out, namely "The largest competition"

All the same settings for colors and font sizes were used as on the previous pages, the top table with hyperlinks to other pages also remained unchanged.

Figure 7 shows a notebook in which 4 pages were made, namely "Inventory"

All settings remained the same as on the previous pages, hyperlinks were added with the names of paragraph topics, when you click on which you get directly to the desired section of the page (Fig. 7)

Fig. 8 shows a notebook in which 5 pages were produced, namely "Rules"; settings are unchanged, added hyperlinks of the same type as on the previous page

f

Fig. 9 shows a notebook in which page 6 was made, namely "Olympic Winners", where all the previous settings were retained, but tables with data were added.

Conclusion.

In the course of this work, I learned how to create a website using the HTML language and used the necessary algorithms for this, which are described in my work.

To write my course project, I used materials from the Internet and lectures, thanks to them the tasks that I set before writing the work were completed.

Bibliography:

1.http://html.find-info.ru/html/

2.http://scriptic.narod.ru/html/

3. http://html.manual.ru/book/html/

Send your good work in the knowledge base is simple. Use the form below

Students, graduate students, young scientists who use the knowledge base in their studies and work will be very grateful to you.

    • Introduction
    • 1. Basic information
    • 1.1 About html
    • 1.2 Website development
    • 1.3 Basics
    • 1.4 Document structure
    • 1.5 Document body tags
    • 1.6 List of basic html tags
    • 2. Additional information
    • 2.1 List tags
    • 2.2 Hypertext links
    • 2.3 Graphics within a document
    • 2.4 Adding styles to the document
    • 2.5 Special html tags
    • 2.6 Html forms
    • 2.7 Html frames
    • 2.8 Html tables
    • 2.9 Optimizing graphics for the web
    • 2.10 CSS basics
    • 3. Description of site creation
    • 3.1 Preparation
    • 3.2 Creating a home page
    • 3.3 Create a second page
    • 3.4 Creating a page with city description
    • 3.5 Photo page
    • 3.6 Program page
    • 3.7 Thank you page
    • Conclusion
    • List of used literature

Introduction

This thesis is about the HTML language. This language is used to create files with the * .htm and * .html extensions, which are Web pages. Sites of the Internet consist of them.

A website is attached to the thesis as an example of what can be created using the HTML language.

All work is divided into 3 sections. The first section is completely devoted to describing basic HTML tags. It contains all the information you need to know how to create simple Web pages. The second section provides information on how to improve the appearance of your document and embed it into it. additional features... And the third section contains a description of how the site was created, attached to this thesis... It describes in detail a month and a half of hard work on creating a site, tells about various errors during creation and their correction, about the difficulties encountered and methods of their elimination.

After reading this work, anyone, even completely unfamiliar with programming, will be able to understand the basics of programming in HTML. And those in the know, perhaps, will find something new for themselves.

1. Basic information

1.1 OlanguageHtml

Hyper Text Markup Language (HTML) is a standard language for creating hypertext documents in the WEB environment. HTML documents can be viewed different types WEB browsers. When the document is created with using HTML, WEB-browser can interpret HTML to highlight various elements of the document and their primary processing. Using HTML allows you to format documents for presentation using fonts, lines, and other graphic elements on any system that views them.

Most documents have standard elements such as headings, paragraphs, or lists. Using HTML tags, you can label these elements, providing Web browsers with minimal information to display these elements, while maintaining the overall general structure and informational completeness of documents. All that is needed to read an HTML document is a WEB browser that interprets the HTML tags and renders the document on the screen in the form the author gives it.

In most cases, the author of the document strictly defines the appearance of the document. In the case of HTML, the reader, based on the capabilities of the WEB-browser, can, to a certain extent, control the appearance of the document (but not its content). HTML allows you to mark where a heading or paragraph should be in a document using an HTML tag, and then tells the web browser to interpret those tags. For example, one WEB browser can recognize the paragraph start tag and render the document in the desired form and the other does not have this capability and presents the document in one line. Users of some WEB-browsers also have the ability to customize the size and type of font, color and other parameters that affect the display of the document.

HTML tags can be roughly divided into two categories:

1. Tags defining how the body of the document as a whole will be displayed by the WEB-browser.

2. Tags describing general properties of the document, such as the title or author of the document.

Remember that the main advantage of HTML is that your document can be viewed on various types of WEB browsers and on various platforms.

1.2 CreationWebsite

HTML documents can be created using any text editor or specialized HTML editors and converters. The choice of the editor that will be used to create HTML-documents depends solely on the concept of convenience and personal preferences of each author.

For example, HTML editors such as Netscape Navigator Gold from Netscape let you create documents graphically using What You See Is What You Get (WYSIWYG) technology. On the other hand, most traditional document creation tools have converters that allow you to convert documents to HTML.

1.3 The mainprovisions

All HTML tags start with "<" (левой угловой скобки) и заканчиваются символом ">"(right angle bracket). Typically, there is a start tag and an end tag. For example, here are the heading tags that define the text inside the start and end tags and describe the title of the document:

Document title

The end tag looks the same as the start tag, and differs from it by a forward slash before the text inside angle brackets. In this example, the tag tells the WEB browser to use the header format, and the tag- about the completion of the title text.

Some tags such as

(the tag defining a paragraph) do not require a trailing tag, but using it gives the original text of the document improved readability and structure.

HTML is not case-sensitive, and the previous example might look like this:

Document title

Attention! Extra spaces, tabs and carriage returns added to the source text of an HTML document for better readability will be ignored by the WEB browser when interpreting the document. HTML document can include the above elements only if they are placed inside tags

AND
... Learn more about tags
It will be written below.

1.4 Structuredocument

When the web browser receives a document, it determines how the document should be interpreted. The very first tag that appears in the document must be a tag ... This tag tells the web browser that your document is written using HTML. A minimal HTML document would look like this:

Document body ...

Heading part of the document ... The heading tag of the document must be used immediately after the tag and nowhere else in the body of the document. This tag is a general description of the document. Avoid placing any text inside the tag ... Start tag placed immediately before the tag and other tags describing the document, and the ending tag</HEAD> placed immediately after the end of the document description. For instance:</p> <p><TITLE>A list of employees

Attention! Technically, start and end tags like , and optional. But it is strongly recommended to use them, since the use of these tags allows the WEB-browser to confidently separate the heading part of the document and the semantic part itself.

Document title ... Most WEB browsers display the content of the tag <TITLE>in the title of the window containing the document and in the bookmarks file, if supported by the WEB-browser. Title delimited by tags <TITLE>and, placed inside -tags as shown in the example above. The document title does not appear when the document itself is displayed in the window.

Comments. Like any language, HTML allows you to insert comments into the body of the document, which are retained when the document is transmitted over the network, but are not displayed by the browser. Comment syntax:

Comments can appear anywhere in the document and in any quantity.

1.5 Tagsbodydocument

Document body tags identify the components of an HTML document that are displayed in the window. The body of a document can contain links to other documents, text, and other formatted information.

Body of the document ... The body of the document must be between tags and... This is the part of the document that is displayed as text and graphic (semantic) information in your document.

Heading levels ... When you write an HTML document, the text is structurally divided into plain text, headings of portions of the text, higher level headings, etc. The first level of headings (the largest) is indicated by the number 1, the next - 2, and so on. Most browsers support the interpretation of six levels of headings, each with its own style. Headings above the sixth level are not standard and may not be supported by the browser. The top-level heading has a "1" attribute. The syntax for a Level 1 header is as follows:

First level heading

Headings at another level can generally be represented as follows:

Level x heading

where x is a number from 1 to 6 that defines the heading level.

Paragraph tag

Unlike most word processors, carriage returns are usually ignored in an HTML document. The physical paragraph break can be located anywhere in the original text of the document (for ease of readability). However, the browser only splits paragraphs if the tag is present.

If you do not separate paragraphs with the tag

Your document will look like one big paragraph.

Additional tag parameters

Allows you to align a paragraph to the left, center, and right, respectively.

Centering the elements of the document. You can center all elements of the document in the browser window. To do this, you can use the tag

.

All elements between tags

and
will be in the center of the window.

Preformat tag

Preformat tag, 
Allows the presentation of text with specific formatting on the screen.  Preformatted text ends with a trailing tag
... Inside preformatted text, it is allowed to use:

a) line feed

b) tab characters (shift 8 characters to the right)

c) a non-proportional font set by the browser.

Using tags that define the format of the paragraph, such as or

, will be ignored by the browser when placed between tags

A list of employees

This list contains surnames, first names and patronymics

all employees of our company.

The list can be used for business purposes only.

Attention! The heading "List of employees" is not displayed in the browser as part of the document. It will appear in the title bar of the browser window.

Line break
... Tag
notifies the browser of a line break. The best example of using this tag is a formatted address or any other sequence of lines where the browser must display them one below the other. For instance:

Alexey Yartsev
Dmitrov highway,
9B, office 326

An additional parameter allows you to expand the capabilities of the tag
.


This option allows you not only to perform a line feed, but to place the next line, starting at the blank left (left), right (right) or both (all) borders of the browser window. For example, if there is a picture next to the text on the left, then you can use the tag
to offset the text below the picture:

As you can see, this diagram demonstrates the relationship
Master / Detail

.

Unbreakable string ... If you do not want the browser to automatically wrap the line, then you can mark it with tags and... In this case, the browser will not wrap the line even if it goes off-screen; instead, the browser will allow the window to scroll horizontally. For instance: which does not admit any partitioning anywhere

If you still want to allow splitting this line into two, but in a strictly planned place, then insert the tag to this place. For instance: This line is the longest line in the document. which does not admit any partitioning anywhere

This line is the longest line in the document.

which does not admit any partitioning anywhere.

Quote

... This tag is intended to indicate in the document a quotation from another source. Text denoted by tag
, indents 8 spaces from the left edge of the document. For example: At the opening of this conference, the head of the representative office said:

Today is one of the greatest days for our company.
We have discovered a new technology that allows our customers to increase the performance of their desktop systems several times.

When displayed by a browser, this text will look like this:

At the opening of this conference, the head of the representative office said:

Today is one of the greatest days for our company. We have discovered a new technology that allows our customers to increase the performance of their desktop systems several times.

1.6 ListbasictagsHtml

Table 1: Main tags

Starting

Final

Description

HTML document designation

Heading part of the document

Document title

Body of the document

First-level paragraph heading

Second-level paragraph heading

Third level paragraph heading

Level 4 paragraph heading

Level 5 paragraph heading

Sixth-level paragraph heading

Formatted text

Line feed without end of paragraph

The tags described earlier are all you need to get started with HTML.

Using the described tags, you can create a simple HTML document. However, the following sections will allow you to dramatically improve the appearance of your documents and describe the new features of HTML.

2. additional information

2.1 Tagslists

There are three main types of lists in an HTML document:

a) numbered

b) unnumbered

c) list of descriptions

You can create nested lists by using different list tags or by repeating one within the other. To do this, you just need to place one pair of tags (start and end) inside another. Whether the items in the nested list have the same markers as the list item is browser dependent. For more details see the "Nested Lists" section.

Numbered lists. In a numbered list, the browser automatically inserts the item numbers in order. This means that if you delete one or more elements of the numbered list, the rest of the numbers will be automatically recalculated.

    and ends with the tag
  • ... For instance:

    1. Programming
    2. Algorithmization
    3. Design

    1. Programming

    2. Algorithmization

    3. Design

    Tag

      may have parameters:

        Counter type:

        A - large Latin letters (A, B, C ...)

        a - small Latin letters (a, b, c ...)

        I - large Roman numerals (I, II, III ...)

        i - small Roman numerals (i, ii, iii ...)

        1 - regular numbers (1,2,3 ...)

        The number from which the countdown begins

        For instance:

        1. Programming
        2. Algorithmization
        3. Design

        XV. Programming

        Xvi. Algorithmization

        XVII. Design.

        Unnumbered lists. For unnumbered lists, the browser usually uses bullets to mark the list item. The type of marker is usually configured by the user of the browser.

        A numbered list begins with a start tag

          and ends with the tag
        ... Each list item starts with a tag
      1. ... For instance:

        • Programming
        • Algorithmization
        • Design

        Programming

        Algorithmization

        Design

        Tag

          may have a parameter:

            Tag type

              defines the appearance of the marker as the default (disc), round (circle), or square (square). For instance:

              • Programming
              • Algorithmization
              • Design

              § Programming

              § Algorithmization

              § Design

              Nested lists. Let's give an example of nested lists:

              A list of employees

              List of employees of our company

              Done: 30 July 1996

              This list contains the last names, first names and patronymics of all employees of our company.

              The list can be used for business purposes only.

              1. Directorate
                • Ivanov I.I.
                • Petrov K.V.
              2. Marketing department
                • Varshavskaya E.L.
                • Samsonov D.M.

              This is what you will see on the browser screen:

              List of employees of our company

              This list contains the last names, first names and patronymics of all employees of our company.

              The list can be used for business purposes only.

              1. Directorate

              o Ivanov I.I.

              o Petrov K.V.

              2. Marketing department

              o Varshavskaya E.L.

              o Samsonov D.M.

              List item

            • .

              Tag

            • may have parameters:

                or

                  depending on what kind of list the given element is in.

                  Marker type (see.

                    ) or counter (see OL)

                    The value for the item in the numbered list (its number). All further numbers of list items will be counted from this number.

                    For instance:

                    1. Programming
                    2. Algorithmization
                    3. Design

                    XV. Programming

                    Xvi. Algorithmization

                    XVII. Design

                    List of definitions.

                    The definition list starts with a tag

                    and ends with the tag
                    ... This list is used to create lists of the "term" - "description" type. Each term begins with the tag
                    and the description is tagged
                    ... For instance:

                    Marketing department
                    Financial department
                    Human Resources Department

                    The Departmentmarketing

                    This department is engaged in the promotion of products and services

                    Financialthe Department

                    This department deals with all financial transactions

                    The Departmentcadres

                    This department deals with the registration and recruitment of new employees of the company, distribution of vacations, tracking sick leaves, etc.

                    Hypertext links are a key component in making the WEB attractive to users. By adding hypertext links (hereinafter referred to as links), you make the set of documents coherent and structured, which allows the user to receive the information he needs as quickly and conveniently as possible.

                    Links have a standard format that allows the browser to interpret them and perform the necessary functions (call methods) depending on the type of the link. Links can point to another document, a special place in this document, or perform other functions, such as requesting a file via FTP to display it in a browser. The URL can point to a special place on the absolute access path, or point to a document in the current access path, which is often used when organizing large structured WEB sites.

                    Attention! You can use links both to move around the document and to move from one document to another. However, HTML does not support going back to the previous link if the movement was within the document. If you use links within the document, and then press the Back key, then you will not go to the previous link, but return to the part of the document that you viewed before.

                    URL. HTML uses a URL (Uniform Resource Locator) to represent hypertext links and links to network services within an HTML document. The first part of the URL (before the colon) describes an access method or network service. The other part of the URL (after the colon) is interpreted depending on the accessor method. Usually, two forward slashes after a colon denote the name of the machine:

                    method: //machine-name/path/foo.html

                    The following example is a call to the HTML document index.html from the www.softexpress.com server using the HTTP protocol:

                    http://www.softexpress.com/index.html

                    The Uniform Resource Locator has the following format:

                    method: // servername: port / pathname # anchor

                    Let's describe each of the URL components:

                    METHOD. The name of the operation to be performed when interpreting the given URL. The most commonly used methods are:

                    reading a file from a local disk. The filename is interpreted for the user's local machine. This method is used to display a file located on the user's machine. For example: file: /home/alex/index.html - displays the index.html file from the / home / alex directory on the user's machine

                    access to a web page on the network using the HTTP protocol. (This is the most commonly used method of accessing any HTML document on the web.) For example: http://www.softexpress.com/ - access to SoftExpress Homepage

                    file request from anonymous FTP server. For example: ftp: // hostname / directory / filename

                    activates a mail session with the specified user and host. For example: mailto: [email protected]- activates the session of sending a message to the user info on the softexpress.com machine, if the browser supports the launch of e-mail. Note that the mailto: method does not require slashes after the colon (as a rule, the subscriber's email address immediately follows the colon)

                    telnet service call

                    Calling a news service if the browser supports it. For example: news: relcom.www.support

                    SERVERNAME. An optional parameter describing the fully qualified network name of the machine. For example: www.softexpress.com - full network name of the SoftService server.

                    If the server name is not specified, then the link is considered local, and the full path specified in the URL below is calculated on the machine from which the HTML document containing this link was taken. An IP address can be used instead of a symbolic hostname, but this is not recommended due to the possible overlap with fixed local addresses on the internal network.

                    PORT. TCP port number on which the WEB server operates. If port is not specified, port 80 is used "by default". This parameter (port) is not used in the vast majority of URLs.

                    PATHNAME. Partial or full path to the document to be called as a result of the URL interpretation. Different WEB servers are configured differently to interpret the document access path. For example, when using CGI scripts (executable programs), they are usually collected in one or several dedicated directories, the path to which is recorded in special parameters of the WEB-server. For these directories, a special logical path is allocated by the WEB server, which is used in the URL. If the WEB server sees this path, then the requested file is interpreted as an executable module. Otherwise, the requested file is interpreted simply as a data file, even if it is an executable module. For example: http://www.softexpress.com/cgi-win/handle.exe

                    In this example, the HTTP server must invoke a CGI script named handle.exe located on a machine named www.softexpress.com. The path to this script - / cgi-win / - is actually a virtual path (a dedicated server for executable modules). Note that the path description uses UNIX-like syntax, where, unlike DOS and Windows, forward slashes are used instead of backslashes. If the name of the document immediately follows the network name of the machine, then it must be located in the root directory on the remote machine or (more often) in the directory designated by the WEB server as the root. If the URL ends with the machine's network name, then the document is requested from the root directory of the remote machine with the name specified in the WEB-server settings (as a rule, this is index.html).

                    #ANCHOR. This element is a link to a string (dot) within an HTML document. Most browsers, meeting this element after the name of the document, place the document on the screen in such a way that the specified line of the document is placed in the top line of the working window of the browser. Points referenced by #anchor are specified in the document using the NAME tag, as described later.

                    The structure of links in an HTML document. So far, we've only covered the look and feel of the URL. In order for the browser to display the link to the URL, you need to mark the URL with special tags in the HTML document. The HTML syntax for doing this is as follows:

                    text-to-be-highlighted-as-link

                    The tag opens the link description, and the tag closes it. Any text between these two tags is highlighted in a special way by the Web browser. Typically, this text is displayed underlined and highlighted in blue (or other user-defined) color. The text that denotes the URL is not displayed by the browser, but is only used to perform its prescribed actions when the link is activated (usually when the mouse is clicked on the highlighted or underlined text). Here's an example of a segment of an HTML document:

                    For an example see Text-to-be-displayed-in-the-first-line-of-the-browser

                    Text

                    For instance:

                    List of sections

                    • Section 1
                    • Section 2

                    Section 1

                      Section 1 text

                    Section 2

                      Section 2 text

                      List of sections

                      o Section 1

                      o Section 2

                      Section 1 text

                      Section 2 text

                      The characters "# ex1" tell your browser to look for a marker named "ex1" in this HTML document.

                      When the user clicks on the "Section 1" line, the browser will jump directly to Section 1.

                      Attention! As previously shown in the URL syntax, a section marker can be placed either in the same document that is currently being viewed, or in another document. In the second case, the browser will load another document and go to the section specified for it.

                      2.3 Graphicsinsidedocument

                      One of the most compelling features of the Web is the ability to include links to graphics and other types of data in an HTML document. This is done using the tag ... Using this tag can significantly improve the appearance and functionality of documents.

                      There are two ways to use graphics in HTML documents. The first is the embedding of graphics into a document, which allows the user to see the images directly in the context of other elements in the document. This is the most used technique in document design, sometimes referred to as "inline image". Tag syntax:

                      Let's describe the elements of the tag syntax:

                      Required parameter and has the same syntax as the standard URL. This URL tells the browser where the picture is located. The drawing must be stored in a graphical format supported by the browser. Today, GIF and JPG formats are supported by most browsers.

                      This optional element specifies the text that will be displayed by a browser that does not support displaying graphics or with paging disabled. Typically, this is a short description of an image that the user might or will be able to see on the screen. If this parameter is absent, then in place of the picture most browsers display a pictogram (icon), activating which, the user can see the image. The ALT tag is recommended if your users are using a non-graphical browser such as Lynx.

                      This optional parameter is used to specify the height of the picture in pixels. If this parameter is not specified, then the original height of the picture is used. This option allows you to shrink or stretch images vertically, which allows you to more clearly define the appearance of your document. However, some browsers do not support this option. On the other hand, your client's screen resolution may differ from yours, so be careful when specifying the absolute size of the artwork.

                      The parameter is also optional, like the previous one. Allows you to set the absolute width of the picture in pixels.

                      This parameter is used to tell the browser where to place the next block of text. This allows you to more strictly define the arrangement of elements on the screen. If this parameter is not used, then most browsers will position the image on the left side of the screen, and the text on the right side of it.

                      This parameter tells the browser that this image allows the user to perform any action by clicking on a specific location in the image. This feature is an extension of HTML and will be discussed by us later.

                      Here is an example of using this tag:

                      Since HTML 2.0, the tag has additional parameters appeared:

                      New parameters:

                      Allows you to set the size, in pixels, of the white space above and below the picture so that the text does not run over the picture. This is especially important for dynamically generated images, when you cannot see the document in advance.

                      The same as VSPACE, but horizontally.

                      Background pictures. Most browsers allow you to include a background image in your document, which will be matrixed and displayed against the background of the entire document. Some users like background graphics, some don't. An unobtrusive translucent pattern (wallpaper) usually looks good as a background for most documents.

                      The wallpaper description is included in the BODY tag and looks like this:

                      .

                      where each of the parameters determines the color of a particular element. Let's describe these parameters:

                      Document background color

                      Plain text color of the document

                      This line defines White color document background, black text and silvery links.

                      Horizontal line. Using the tag


                      , you can separate the text with a horizontal line.

                      Tag format:


                      number | percent ALIGN = left | right | center NOSHADE>

                      Tag parameters:

                      Line width in pixels.

                      Line width in pixels or as a percentage of the width of the browser window.

                      Position on screen (left | center | right).

                      By default, the line is shown in 3D with a shadow. NOSHADE allows you to present a line with a simple, solid dark stripe.

                      2.4 Addingstylesvdocument

                      HTML allows you to use a variety of font styles to highlight text information in your documents. Here is a short list of the styles supported by most browsers:

                      bold (bold)

                      italic (oblique)

                      mono spaced (type writer - using fixed fonts)

                      You can combine different kinds of styles, such as bold and oblique.

                      Table # 2: Basic Text Styles

                      Combining styles allows you to display multiple elements with different styles on one line, for example:

                      A life - it song!

                      A life - it song!

                      Attention! Adding a large number of styles and their combinations makes it difficult to read the text!

                      Additional styles:

                      Big (big)

                      Small (small)

                      Sub (interlinear)

                      Sup (superscript)

                      · Table # 3: Additional Text Styles

                      Font size ... You can change the font size using the tag:

                      The font can have a size from 1 to 7. You can directly specify the font size in numbers, or specify an offset relative to the base value (3 by default) in the positive or negative direction. The base value can be changed using the tag:

                      For instance:

                      and sm en en and e

                      the change

                      Font color ... You can change the font color using the tag:

                      Red Green Blue

                      Red Green Blue

                      2.5 SpecialtagsHtml

                      The following tags will allow you to make your HTML document more functional.

                      Address tag

                      ... Tag
                      used to highlight the author of the document and his address (for example, e-mail). Syntax:

                      Escape sequences. Some characters are control characters in HTML and cannot be used directly in a document:

                      1) left angle bracket "<"

                      2) right angle bracket ">"

                      3) ampersand "&"

                      4) double quotes "" "

                      To use these characters in a document, you must replace them with escape sequences:

                      Table 4: Escape sequences

                      There are many escape sequences for special characters, such as "" for the © and ® for the ®, which were introduced in HTML 2.0. One of the features is the replacement of characters in the 2nd part of the character table (after the 127th character) with escape sequences for transferring text files with national languages ​​over 7-bit channels.

                      Warning: Escape sequences are case sensitive: DO NOT use instead of<.

                      2.6 HtmlForms

                      Some WWW browsers allow the user, filling in a special form that returns the received value, to perform some actions on your WWW server. When a form is interpreted by a web browser, special on-screen GUI elements are created, such as input fields, checkboxes, radiobuttons, dropdown menus, scrolling lists, buttons, etc. When the user fills out the form and clicks the "Submit" button (SUBMIT is a special type of button that is set when describing the document), the information entered by the user into the form is sent to the HTTP server for processing and transmission to other programs running under the server, in accordance with the CGI (Common Gateway Interface) interface.

                      When you describe a form, each data entry element has a tag ... When the user places data into a form element, the information is placed in the VALUE section of that element.

                      Syntax. All forms begin with the tag

                      and end with the tag
                      .

                      Form_Elements_and_Other_HTML_Elements.

                      METHOD. A method for sending a message with data from a form. Depending on the method used, you can send the results of data entry to the form in two ways:

                      GET: Information from the form is appended to the end of the URL that was specified in the form header description. Your CGI program (CGI script) receives data from the form as a parameter of the QUERY_STRING environment variable. Using the GET method is deprecated.

                      POST: This method transmits all information about the form immediately after accessing the specified URL. Your CGI program receives data from the form on standard input. The server will not send you a message that it has finished sending data to standard input; instead, the CONTENT_LENGTH environment variable is used to determine how much data you need to read from standard input. This method is recommended for use.

                      ACTION: ACTION describes the URL that will be called to process the form. The given URL almost always points to the CGI program processing the given form.

                      Form tags:

                      Tag

                      Attributes used inside a tag necessary even when the input field is initially empty. Description of attributes:

                      NAME - the name of the input field

                      ROWS - the height of the input field in characters

                      COLS - the width of the input field in characters

                      If you want some text to be displayed in the default input field, then you need to insert it inside the tags .

                      Tag is used to enter one line of text or one word. Tag attributes:

                      CHECKED - means that CHECKBOX or RADIOBUTTON will be selected.

                      MAXLENGTH - Determines the number of characters that users can enter in the input field. If the number of allowed characters is exceeded, the browser responds to an attempt to enter a new character with a sound signal and does not allow it to be entered. Not to be confused with the SIZE attribute. If MAXLENGTH is greater than SIZE, then the field is scrolled. By default, MAXLENGTH is infinity.

                      NAME - the name of the input field. This name is used as a unique identifier of the field, by which, later, you can get the data placed by the user in this field.

                      SIZE - defines the visual size of the input field on the screen in characters.

                      SRC - URL ,. pointing to a picture (used in conjunction with the IMAGE attribute).

                      TYPE - defines the type of the input field. By default, this is a simple input field for one line of text. The rest of the types must be explicitly specified:

                      CHECKBOX: Used for BOOLEAN values. The value associated with the name of this field, which will be passed to the called CGI program, can be ON or OFF.

                      HIDDEN: Fields of this type are not displayed by the browser and do not allow the user to change the default value assigned to this field. This field is used to pass static information to the CGI program, such as a user ID, password, or other information.

                      This type of input field allows you to associate a graphic image with a field name. When you click on any part of the drawing, the associated CGI program will be immediately called. The values ​​assigned to the NAME variable will look like this - two new variables are created: the first has the name indicated in the NAME field with the appended .x at the end of the name. This variable will contain the X-coordinate of the point in pixels (assuming the origin of the upper-left corner of the picture), which the mouse cursor pointed to at the moment of clicking, and the variable with the name contained in NAME and added .y will contain the Y-coordinate. All values ​​for the VALUE attribute are ignored. The description of the picture itself is carried out through the SRC attribute and by syntax coincides with the tag .

                      The same as the TEXT attribute, but the user input is not displayed on the screen by the browser.

                      This attribute allows you to enter one value from several alternatives. To create a set of alternatives, you need to create several input fields with the TYPE = "RADIO" attribute with different values ​​for the VALUE attribute, but with the same values ​​for the NAME attribute. A value of the type NAME = VALUE will be passed to the CGI program, and VALUE will take the value of the VALUE attribute of the input field that is currently selected (will be active). When you select one of the input fields of the RADIO type, all other fields of this type with the same name (NAME attribute) will automatically become unselected on the screen.

                      This type denotes a button, when pressed, all form fields will take the values ​​described for them by default.

                      This type denotes a button that, when clicked, will invoke the CGI program (or URL) described in the form header. The VALUE attribute can contain a string that will be highlighted on the button.

                      This type of input field describes a single-line input field. Use the MAXLENGTH and SIZE attributes to define the maximum length of the input value in characters and the size of the input field to display on the screen (20 characters by default).

                      VALUE - assigns a default value to the field or a value that will be selected when using the RADIO type (this attribute is required for the RADIO type).

                      Selection menu in forms. A selection menu in forms is understood as an interface element such as LISTBOX. There are three types of select menu tags for forms:

                      Select - the user selects one value from a fixed list of values ​​represented by OPTION tags. This view is presented as a drop-down LISTBOX.

                      Select single is the same as Select, but the user sees three selection items at the same time on the screen. If there are more of them, then automatic vertical scrolling is provided.

                      Select multiple - allows you to select multiple items from the LISTBOX.

                      SELECT: The SELECT tag allows the user to select a value from a fixed list of values. This is usually represented by a dropdown menu.

                      SELECT tag has one or more parameters between the start tag ... By default, the first item is displayed in the selection bar. Here is an example tag

                      SELECT SINGLE: The SELECT SINGLE tag is the same as Select, but the user sees multiple selections on the screen at the same time (three by default). If there are more of them, then automatic vertical scrolling is provided. The number of elements displayed at the same time is determined by the SIZE attribute. Example:

                      Pentium PRO

                      If several values ​​are selected at the same time, the server receives the corresponding number of parameters NAME = VALUE with the same NAME values, but different VALUE.

                      Submitting files using forms. Forms can be used to send not only small informational messages in the form of parameters, but also to send files.

                      Attention! Since this feature requires support for receiving files by the WEB-server, then, accordingly, it is necessary that the server supports receiving files!

                      For instance:

                      Send this file:

                      .

                      2.7 HtmlFrames

                      By using frames that allow you to split Web pages into multiple scrollable subwindows, you can dramatically improve the appearance and functionality of information systems and Web applications. Each subwindow, or frame, can have the following properties:

                      Each frame has its own URL, which allows it to be loaded independently of other frames

                      Each frame has its own name (NAME parameter), allowing you to jump to it from another frame

                      The size of the frame can be changed by the user directly on the screen using the mouse (if it is not prohibited by specifying a special parameter)

                      These properties of frames allow you to create advanced interface solutions, such as:

                      · Placing static information, which the author considers necessary to constantly show the user, in one static frame. It can be a graphic company logo, copyright, a set of control buttons

                      Placement in a static frame of the table of contents of all or part of the WEB-documents contained on the WEB-server, which allows the user to quickly find the information of interest

                      Create windows of query results, when the query itself is in one frame, and query results in another

                      · Create forms of "master-part" type for WEB-applications serving databases.

                      Frame syntax. The format of a document using frames looks very much like the format of a regular document, only instead of the BODY tag, a FRAMESET container is used, which contains a description of internal HTML documents, containing the information itself, placed in frames.

                      ... ...

                      However, a frame document is a specific kind of HTML document, since it does not contain a BODY element and any payload, respectively. It only describes the frames that will contain information (except in the case of a double document, which we will look at later).

                      Here's the general syntax for frames:

                      ...

                      The common FRAMESET container describes all the frames into which the screen is divided. You can split the screen into multiple vertical or multiple horizontal frames. The FRAME tag describes each frame individually. Let's take a closer look at each component.

                      Currently, creating a website will not cause any particular difficulties, since there are enough portals on the Internet that offer their services for creating a website. But the site created for such a service is not its own creation, but a semblance of a clone grown in a test tube.

                      Self-created site - will always be a favorite child, suffered in the joyful throes of creativity. You can create a site using the HTML programming language, the so-called static site.

                      An HTML editor is used to create the site. To create a website on your own, based on HTML, you need knowledge of the HTML programming language, certain concepts of Photoshop, some skills in writing articles, a little imagination and design art.

                      A site created using the PHP programming language is a dynamic site. Most of the existing sites on the Internet are based on PHP, on CMS (content management system) engines. On this site, you can learn how to create a site and get expert assistance in creating a site on your own using CMS engines:
                      - creation of a site on Joomla;

                      Starting to do something is always difficult. The main thing here is to set a specific goal. First, choose a theme and a sample site, what you want to make, draw up a plan for its implementation. And move along the path of achieving the main goal.

                      Before we begin our journey through the lessons of creating websites in HTML and CSS, it is important to understand the differences between the two languages, the syntax of each language, and some basic terminology.

                      What are HTML and CSS?

                      HTML (HyperText Markup Language) defines the structure of content and its meaning, defining such content as, for example, headings, paragraphs or images. CSS (Cascading Style Sheets) or Cascading Style Sheets is a presentation language designed to style the appearance of content using, for example, fonts or colors.

                      These two languages ​​- HTML and CSS are independent of each other and should remain so. CSS should not be written inside an HTML document and vice versa. Typically, HTML will always represent the content, and CSS will always dictate how it is styled.

                      With this understanding of the difference between HTML and CSS, let's dive into HTML in more detail.

                      Basic HTML terms

                      Before getting started with HTML, you are likely to come across new and often strange terms. Over time, you will become more familiar with all of them, but for now you should start with three basic HTML terms - elements, tags, and attributes.

                      The elements

                      Elements indicate how to define the structure and content of objects on a page. Some of the commonly used elements include multiple levels of headings (defined as elements with

                      before

                      ) and paragraphs (defined as

                      ); you can include items in the list ,

                      , , and and many others.

                      Items are identified using angle brackets<>surrounding the element name. Thus, the element will look like this:

                      Tags

                      Adding angle brackets< и >around the element creates what is known as a tag. Tags are most commonly found in pairs of start and end tags.

                      An opening tag marks the beginning of an element. It consists of the symbol<, затем идёт имя элемента и завершается символом >; For example,

                      .

                      An end tag marks the end of an element. It consists of the symbol< с последующей косой чертой и именем элемента и завершается символом >; For example,

                      .

                      The content that falls between the start and end tags is the content of this element. A link, for example, will have an opening tag and the closing tag... What's in between these two tags will be the content of the link.

                      So, link tags will look something like this:

                      ...

                      Attributes

                      Attributes are properties used to provide additional information about an element. The most common attributes include the id attribute, which identifies the element; the class attribute that classifies the element; the src attribute, which identifies the source of the embedded content; and an href attribute that indicates a link to the associated resource.

                      Attributes are defined in the start tag after the element name. In general, attributes include name and value. The format for these attributes consists of the attribute name followed by an equal sign followed by the value of the attribute in quotation marks. For example, element with the href attribute would look like this:

                      Shay howe

                      Demonstration of basic HTML terms

                      This code will display the text "Shay Howe" on the web page and when clicked will take the user to http://shayhowe.com. The link element is declared with an opening tag and the closing tag covering the text, as well as the attribute and value of the URL of the link declared through href = "http://shayhowe.com" in the opening tag.

                      Rice. 1.01. The schema HTML syntax includes an element, an attribute, and a tag

                      Now that you know what HTML elements, tags, and attributes are, let's take a look at our first web page. If something looks new here, don't worry - we'll decipher everything along the way.

                      Setting up the structure of the HTML document

                      HTML documents are simple text documents saved with the extension .html rather than .txt. To start writing HTML you first need text editor which is convenient for you to use. Unfortunately, this does not include Microsoft Word or Pages as they are complex editors. The two most popular text editors for writing HTML and CSS are Dreamweaver and Sublime Text. Free alternatives are also Notepad ++ for Windows and TextWrangler for Mac.

                      All HTML documents contain a mandatory structure that includes following declarations and elements: , , and .

                      Announcement document type oris located at the very beginning of the HTML document and tells browsers which version of HTML is being applied. Since we will be using latest version HTML, our document type will be just... This is followed by the element denoting the beginning of the document.

                      Inside element defines upper part document, including various metadata (accompanying information about the page). Content inside element does not appear on the web page itself. Instead, it can include the title of the document (which appears in the title bar of the browser window), links to any external files, or any other useful metadata.

                      All visible content of the web page will be in the element ... The structure of a typical HTML document looks like this:

                      Hello World!

                      Hello World!

                      This is a web page.

                      Demonstration of the structure of an HTML document

                      This code shows the document starting with the document type declaration,, then immediately comes the element ... Inside items go and ... Element contains the encoding of the page through the tag and the title of the document through the element ... Element <body>includes a header through an element <h1>and a paragraph of text through<р>... Since both the heading and paragraph are nested within the element <body>, they are visible on the web page.</p><p>When an element is inside another element, also known as a nested element, it is a good idea to add indentation to it to keep the document structure well organized and readable. In the previous code, both elements <head>and <body>nested and shifted within an element <html>... The padding structure for elements continues with new added elements inside <head>and <body> .</p><h3>Self-closing elements</h3><p>In the previous example, the element <meta>was the only tag that did not include an end tag. Don't worry, this was intentional. Not all elements have start and end tags. Some elements simply receive content or behavior through attributes within the same tag. <meta>is one such element. Element content <meta>in the example is assigned using the charset attribute and value. Other typical self-closing elements include:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Reduced structure made with document type declaration<!DOCTYPE html>and elements <html> , <head>and <body>, is quite common. We want to keep this document structure handy as we will use it frequently when creating new HTML documents.</p><h3>Code validation</h3><p>No matter how carefully we write our code, mistakes are inevitable. Fortunately, when writing HTML and CSS, we have validators to validate our work. The W3C offers HTML and CSS validators that scan code for errors. Validating our code not only helps it display correctly in all browsers, it also helps teach best practices for coding.</p><h2>On practice</h2><p>As web designers and front-end developers, we have the luxury of attending a number of great conferences about our craft. We are going to organize our own Styles Conference and create a website for it in the following lessons. Like this!</p><br><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Let's switch a little away from HTML and take a look at CSS. Remember, HTML defines the content and structure of our web pages, while CSS defines their visual style and appearance.</p><h2>Basic CSS terms</h2><p>In addition to HTML terms, there are a few basic CSS terms that you will need to familiarize yourself with. These terms include selectors, properties, and values. As with HTML terminology, the more you work with CSS, the more these terms become second nature to you.</p><h3>Selectors</h3><p>When elements are added to a web page, they can be styled using CSS. The selector determines which element or elements in HTML to target and apply styles (such as color, size, and position) to them. Selectors can include a combination of different metrics to select unique elements, depending on how specific we want to be. For example, we want to select every paragraph on a page, or select only one specific paragraph.</p><p>Selectors are usually associated with an attribute value, such as an id or class value, or an element name, such as <h1>or<р> .</p><p>In CSS, selectors are combined with curly braces () to encompass the styles applied to the selected element. This selector targets all elements <span><p>P (...)</p><h3>Properties</h3><p>Once an element is selected, the property determines the styles that will be applied to it. Property names come after the selector, inside <a href="https://polarize.ru/en/game/kak-v-vorde-obedinit-figurnoi-skobkoi-kvadratnye-i-figurnye/">curly braces</a>() and just before the colon. There are many properties we can use, such as background, color, font-size, height and width, and other commonly added properties. In the following code, we define the color and font-size properties that apply to all elements. <span><p>P (color: ...; font-size: ...;)</p><h3>The values</h3><p>So far, we have only selected an element through the selector and determined which style through the properties we would like to apply to it. Now we can set the behavior of this property through the value. Values ​​can be specified as text between colon and semicolon. Below we select all the elements <p >And set the value of the color property to orange and the value of the font-size property to 16 pixels.</p><p>P (color: orange; font-size: 16px;)</p><p>To test, in CSS, our ruleset starts with a selector, followed immediately by curly braces. These curly braces contain declarations of pairs of properties and values. Each declaration begins with a property, followed by a colon, the property value, and finally a semicolon.</p><p>It is a common practice to shift a pair of properties and values ​​within curly braces. As with HTML, indentation helps keep our code organized and understandable.</p><p><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>Rice. 1.03. The structure of the CSS syntax includes selector, properties and values</p><p>Knowing a few basic terms and general CSS syntax is a great start, but we have a few more points to learn before we jump in depth. In particular, we need to take a closer look at how selectors work in CSS.</p><h2>Working with selectors</h2><p>Selectors, as mentioned earlier, indicate which HTML elements will be styled. It is important to fully understand how to use selectors and how they work. The first step is to become familiar with the different types of selectors. We'll start with the most basic selectors: type selectors, classes, and identifiers.</p><h3>Type selectors</h3><p>Type selectors target elements by their type. For example, if we want to target all elements <div>we have to use a div selector. The following code shows a type selector for elements <div>as well as the corresponding HTML.</p><p>Div (...)</p><p> <div>...</div> <div>...</div> </p><h3>Classes</h3><p>Classes allow you to select an item based on value <a href="https://polarize.ru/en/computer/javascript-i-jquery-vyborka-elementa-po-klassu-atribut-class-organizaciya-poiska-po/">class attribute</a>... Class selectors are a little more specific than type selectors in that they select a specific group of elements rather than all elements of the same type.</p><p>Classes allow you to apply the same styles to different elements at once by using the same class attribute value for multiple elements.</p><p>In CSS, classes are denoted with a period in front, followed by the value of the class attribute. Below class selector selects all elements containing the awesome class attribute value, including elements <div>and <span><p>Awesome (...)</p><p> <div class="awesome">...</div> </p><h3>Identifiers</h3><p>IDs are even more accurate than classes, as they only target one unique element at a time. Just as class selectors use the value of the class attribute, identifiers use the value of the id attribute as the selector.</p><p>Regardless of the type of element displayed, the value of the id attribute can only be used once per page. If ids are present, then they should be reserved for important elements.</p><p>In CSS, identifiers are denoted with a hash symbol in front, followed by the value of the id attribute. Here, the id will only select the element containing the id attribute with the value shayhowe.</p><p>#shayhowe (...)</p><p> <div id="shayhowe">...</div> </p><h3>Additional selectors</h3><p>Selectors are extremely powerful and those described above are among the most common selectors we come across. These selectors are just the beginning. There are many advanced selectors available and readily available. Once you're comfortable with them, don't be afraid to look at some of the more progressive ones.</p><p>Okay, let's start putting everything together. We add elements to the page inside our HTML, then we can select those elements and style them with CSS. Now let's connect the dots between HTML and CSS to make the two languages ​​work together.</p><h2>Connecting CSS</h2><p>To make our CSS speak to our HTML, we need to point to the CSS file from the HTML. It is good practice to include all of our styles in one <a href="https://polarize.ru/en/components/devcon-ne-yavlyaetsya-vnutrennei-ili-vneshnei-komandoi-imya-faila/">external file</a>, to which there is a pointer inside the element <head>our HTML document. Using one external CSS allows us to apply the same styles throughout the site and quickly make changes to it.</p><h3>Other options for adding CSS</h3><p>Other options for connecting CSS include using inline and inline styles. You may come across these options in reality, but they are usually discouraged, as they make updating sites cumbersome and cumbersome.</p><p>To create our external stylesheet, we want to use the selected text editor again to create a new one <a href="https://polarize.ru/en/mobile/avtomatizirovannaya-zagruzka-failov-na-ftp-i-otpravka-failov-na/">text file</a> with the extension .css. Our CSS file must be saved in the same folder or subfolder as our HTML file.</p><p>Inside element <head>element applied <link>which defines the relationship between HTML and CSS files. Since we are linking to CSS, we use the rel attribute with a stylesheet value to indicate their relationship. In addition, the href attribute is used to indicate the location or path to the CSS file.</p><p>In the following example HTML document, the element <head>points to an external style file.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>For CSS to render correctly, the path value of the href attribute must directly match where the CSS file is saved. In the previous example, the main.css file is stored in the same location as the HTML file, also known as the root folder.</p><p>If the CSS file is located in a subfolder, then the value of the href attribute must correspond to this path accordingly. For example, if our main.css file was saved in a subfolder named stylesheets, then the value of the href attribute would be stylesheets / main.css. It uses a forward slash (or slash) to indicate a move to a subfolder.</p><p>At this point, our pages are starting to come to life, slowly but surely. We haven't dug into CSS too deeply yet, but you may have noticed that some elements have styles that we did not declare in our CSS. This browser enforces its own preferred styles on these elements. Fortunately, we can rewrite these styles quite easily, which we'll do next with a CSS reset.</p><h2>Using reset CSS</h2><p>Each browser has its own default styles for different elements. How <a href="https://polarize.ru/en/program/gde-nahoditsya-menyu-brauzera-google-chrome-skrytye-nastroiki-v-brauzere-google/">Google chrome</a> renders headings, paragraphs, lists, and so on, may differ from how it does <a href="https://polarize.ru/en/mobile/capicom-ne-rabotaet-v-ie-nastroika-internet-explorer-a-dlya-raboty-na-etp/">Internet Explorer</a>... To ensure compatibility with different browsers, CSS reset has become widely used.</p><p>Resetting CSS takes all the basic HTML elements with a given style and provides a consistent style across all browsers. These resets usually involve removing dimensions, padding, margins, or additional styles to lower these values. Since CSS cascading works from top to bottom (you will find out about this soon), our reset should be at the very top of our style. This will ensure that these styles are read first and that's it. <a href="https://polarize.ru/en/components/kak-izmenit-glavnuyu-stranicu-brauzera-nastroika-startovoi/">different browsers</a> will work from a common point of reference.</p><p>There are tons of different CSS resets available to apply, they all have their own. <a href="https://polarize.ru/en/windows/rabotaet-internet-smart-non-stop-opisanie-silnyh-storon/">strengths</a>... One of the most popular from Eric Meyer, his CSS reset is adapted to include the new HTML5 elements.</p><p>If you're feeling a bit adventurous, there is also Normalize.css, created by Nicholas Gallagher. Normalize.css focuses not on usage <a href="https://polarize.ru/en/components/sbros-parolya-s-zhestkogo-diska-hitachi-kak-snyat-parol-s-zhestkogo-diska/">hard reset</a> for all basic elements, but instead on establishing common styles for these elements. This requires a deeper understanding of CSS as well as knowledge of what you would like to get out of styles.</p><h3>Cross-browser compatibility and testing</h3><p>As mentioned earlier, different browsers render elements differently. It's important to recognize the importance of cross-browser compatibility and testing. Websites don't have to look exactly the same across all browsers, but they do need to be close. Which browsers you want to support and to what extent is a decision you will have to make based on what is best for your site.</p><p>There are several things to watch out for when writing CSS. The good news is that this can be done and it takes a little patience to master it.</p><h2>On practice</h2><p>Let's go back to where we last left off on our conference site and see how we can add some CSS.</p><ol><li>Inside our styles-conference folder, let's create <a href="https://polarize.ru/en/graphics/windows-10-kak-pomenyat-nazvanie-papki-polzovatelya-sozdanie-novogo/">new folder</a> named assets. This is where we will store all the resources for our website, such as styles, images, videos, etc. For our styles, let's go ahead and add another stylesheets folder inside the assets folder.</li><li>Using a text editor, create a new file called main.css and save it in the stylesheets folder we just created.</li><p>By looking at the index.html file in a browser, we can see that the elements <h1>and <p>Already contain the default style. In particular, they have a unique font size and space around them. By using Eric Meyer's reset we can soften these styles so that each one starts from the same base. To do this, take a look at his website, copy the code and paste it at the top of our main.css file.</p><p>/ * http://meyerweb.com/eric/tools/css/reset/ 2.v2.0 | 20110126 License: none (public domain) * / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video (margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ;) / * HTML5 display-role reset for older browsers * / article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section (display: block;) body (line-height: 1;) ol, ul (list-style: none;) blockquote, q (quotes: none;) blockquote: before, blockquote: after, q: before, q: after (content: ""; content: none;) table (border- collapse: c ollapse; border-spacing: 0; )</p><li>Our main.css file is starting to take shape, so let's include it in our index.html file. Open index.html in a text editor and add the element <link>v <head>, immediately after the element <title> .</li><li>Since we are pointing to styles through the element <link>add the rel attribute with the value stylesheet.</li><p>We will also include a link to our main.css file using the href attribute. Remember, our main.css file is saved in the stylesheets folder, which is located inside the assets folder. So the value of the href attribute, which is the path to our main.css file, should be assets / stylesheets / main.css.</p><p> <head> <meta charset="utf-8"> <title>Styles conference

                Time to test our work and see how our HTML and CSS get along. Opening the index.html file (or refreshing the page if it's already open) in a browser should show a slightly different result than before.

                Rice. 1.04. Our Styles Conference Website With CSS Reset

                Demo and source code

                Below you can view the Styles Conference website in its current state, as well as download the source code of the website at the moment.

                Summary

                So, it's okay! We've taken a few big steps in this tutorial.

                Just think, now you know HTML basics and CSS. As we move on and you spend more time writing HTML and CSS, you will become much more comfortable working with these two languages.

                Recall that we looked at the following:

                • Difference between HTML and CSS.
                • Familiarity with HTML elements, tags, and attributes.
                • Setting up the structure of your first web page.
                • Acquaintance with CSS selectors, properties and values.
                • Working with CSS selectors.
                • Pointer to CSS from HTML.
                • The importance of CSS reset.

                Now let's take a closer look at HTML and get a little familiar with the semantics.

                Resources and links

                • Common HTML terms via Scripting Master
                • CSS Terms & Definitions via Impressive Webs
                • CSS Tools: Reset CSS via Eric Meyer

                Hypertext Markup Language (HTML) is a language designed specifically for creating Web documents. It defines the syntax and placement of special instructions (tags) that are not displayed but tell the browser how to display the contents of the document. It is also used to create links to other documents, local or networked, such as those on the Internet.

                The HTML standard and other standards for the Web were developed under the leadership of the World Wide Web Consortium (W3C). Standards, specifications and draft new proposals can be found at http://www.3w.org/. Currently, the HTML 4.0 specification is in force, and support for it from major browsers is constantly growing.

                In practice, the HTML standard is greatly influenced by the presence of tags proposed and supported by the most famous browsers such as Microsoft Internet Explorer and Netscape Navigator. These tags may or may not be part of the current HTML specification at this time.

                Compendium HTML Tag Information (HTML Quick Start Guide) by Ron Woodall. The compendium contains an alphabetical list of tags and their attributes, as well as updated information on browser support for each.

                HTML documents are plain ASCII text files. This means that you can use any text editor to create them, even with minimal capabilities. There are editing tools designed specifically for writing HTML. They save time as they contain shortcut keys for performing repetitive operations, such as setting initial settings for documents, spreadsheets, or simply applying styles to text. HTML editors differ from authoring WYSIWYG tools (discussed below) in that they require knowledge of the rules for composing HTML by hand, editors only simplify and speed up this process.

                Windows users should definitely check out HomeSite, powerful and inexpensive HTML editor by Allaire Corporation. It includes HTML syntax colorization, FTP functionality, syntax and spelling control, multi-file search, and replace. In addition, it contains special commands and templates for creating more complex elements (frames, JavaScript scripts and DHTML).

                On Macintosh computers, consider BBEdit, a commercial HTML editor from Bare Bones Software, Inc. It really does matter among Web developers for Macintosh computers. It includes convenient and fast HTML tools, multi-file search and replace, built-in FTP function, support for 13 programming languages, table builder, HTML syntax control and many more functions.

                Recent years have been characterized by a sharp growth in the market for copyright instruments. WYSIWYG (What You See Is What You Get) HTML editors have graphical interfaces which make writing HTML more like a text editing or page markup program. The original goal of these programs was to free users from HTML tags, much like the way markup programs protect a developer from a set of PostScript commands. Today they have grown in importance as they increase the efficiency and level of automation of document production while providing access to the HTML source at the same time.

                The most popular WYSIWYG editors at present are: Macromedia DreamWeaver, Golive CyberStudio (only for Macintosh computers), Microsoft FrontPage, FileMaker Claris, Home Page, Adobe PageMill.

                HTML document contains text (page content) and inline tags - structure instructions, appearance and content functions. An HTML document is divided into two main parts: the head, and the body, body. The title contains information about the document, such as its title and methodological information describing the content. The body contains the content of the document itself (what is displayed in the browser window).

                Each tag consists of a name, which can be followed by a list of optional attributes, all of which are inside angle brackets< >... The contents of the brackets are never displayed in the browser window. The tag name is usually an abbreviation for its function, making it easier to remember. Attributes are properties that expand or refine the function of a tag. Typically, the name and attributes within a tag are not case sensitive. Tag will work the same as ... However, the values ​​of certain attributes can be case sensitive. This applies in particular to file names and URLs.

                Most of the tags are containers. This means that they have a start (start or start) and end (end) tags. The text between the tags will follow the instructions they contain.

                The end tag has the same name as the start tag, but is preceded by a slash (/). It can be thought of as a "switch" tag. The end tag never contains any attributes.

                In some cases, the end tag is optional and the browser determines the end of the tag from the context. Most often omitted end tag<р>(paragraph). Browsers used to support this tag without appropriate completion, which is why many Web authors are used to using the short form. Not all tags are allowed to do this, and not all browsers will forgive their absence. Therefore, when in doubt, include an end tag in your text. This is especially important when you use cascading style sheets in your document.

                Some tags do not have trailing tags because they are used to position individual (stand-alone) elements on the page. One of them is the image tag , it just puts the graphics on the page stream. Other standalone tags are line breaks (
                ), horizontal line (


                ) and tags that contain information about the document and do not affect the content displayed on the screen, such as and .

                Attributes are added to a tag to extend or modify its actions. Multiple attributes can be added to one tag. If tag attributes follow the tag name, they are separated by one or more spaces. The order is not important. Most attributes have values ​​that follow an equal sign (=) after the attribute name. Values ​​are limited to 1024 characters. Values ​​can be case sensitive. Sometimes values ​​must be quoted (double or single). The rules for writing the value are as follows:

                • - if the value is a single word or number and consists only of letters (a-z), numbers (0-9) and special characters (period<.>
                • - if the value contains several words separated by commas or spaces, or contains special characters other than a period or a hyphen, then it must be enclosed in quotation marks. For example, URLs require quotation marks because they contain ": //" characters. Also, quotes are required when specifying color values ​​using the "#rrggbb" format.

                If you are unsure whether to use quotes, always use quotes for all values.

                Other HTML tags can be placed in HTML tags to effect multiple tags on a single element. This is called nesting, and for it to work properly, the start and end tags of the nested tag must be between the start end tags of the outer tag.

                Overlapping tags is a common mistake. While some browsers display content marked this way, many do not allow the rule to be broken, so it is important to place the tags correctly. The following example shows invalid tag nesting (note that the tag<В>closes before closing ):

                The weather is gorgeous today - this information ignored by browsers.

                Information ignored by browsers. The following is the information contained in HTML document including, certain tags that will be ignored when viewed by browsers. It includes:

                • - line breaks. Line breaks in HTML documents are ignored. The text and elements will wrap until the tag is encountered in the flow of the document text.
                • - tabs and multiple spaces. When the browser encounters a tab and several consecutive spaces in an HTML document, it displays only one space. Thus, if the document contains: "far, far away", the browser will print "far, far away". Additional spaces can be added to the text stream by using the non-breaking space character (Snbsp;). In addition, all spaces are output if the text is formatted (found in tags
                • - multiple
                • - unrecognizable tags. If the browser does not understand the tag or it was incorrectly set, then the browser simply ignores it. This can lead to different results depending on the tag and browser. Either the browser will display nothing, or it may display the content of the tag as plain text;
                • - text in comments. Browsers do not display text between special elements
  • Did you like the article? Share with your friends!
    Was this helpful?
    Yes
    Not
    Thanks for your feedback!
    Something went wrong and your vote was not counted.
    Thank you. Your message has been sent
    Found a mistake in the text?
    Highlight it, click Ctrl + Enter and we will fix everything!