Commands for creating a web page. How to create an HTML page: step-by-step instructions, technology and recommendations

Basics of HTML: the basic rules of the HTML language, a description of the structure of the HTML page, notes on the structure of the HTML document between HTML elements.

An HTML document is a basic text document that can be created both in a basic text editor (Notepad) and in specialized code (Notepad++, Visual Studio Code, etc.). The HTML document is extension.html.

An HTML document consists of a tree of HTML elements and text. The skin element is indicated in the output document by the head (opens) and end (closes) tags (behind the rare mark).

The start tag shows where the element begins, and the end tag shows where it ends. The tag that closes is created by adding a slash / before the tag name: … . Between the front and closing tags there is a content tag instead.

Single tags cannot be stored in the middle, they are written as attribute values, for example, the tag create a button with the text Button in the middle.

Tags can be nested one into the other, for example,

Text

. When inserting traces, follow the order in which they are closed (the “Matrioshka” principle), for example, the leading entry will be incorrect:

Text

HTML elements can have attributes (global ones, which apply to all HTML elements and are valid). Attributes are written to the element's name and value, which is specified in the attribute name="value" format. Attributes allow you to change the power and behavior of the element for which the smell is specified.

A skin element can be given a class value and at least one id value. Multiple class values are written using a pass, . The class and id values must be formed from letters, numbers, hyphens and lower letters and must begin from letters and numbers.

The browser looks (interprets) the HTML document, its structure (DOM) and displays it according to the instructions included in the file (style sheets, scripts). If the layout is correct, the browser window will display an HTML sidebar to contain HTML elements - headers, tables, images, etc.

The process of interpretation (parsing) begins, the first lower web page is imported into the browser. Browsers parse HTML documents sequentially, parsing CSS and matching style sheets with side elements.

An HTML document and two sections - a header - between tags ... and a subpart - between tags ... .

Web site structure 1. HTML document structure

The HTML language follows the rules that apply to the file type of document (Document Type Definition, or DTD). A DTD is an XML document that identifies tags, attributes, and their meanings for a specific type of HTML. For the skin version of HTML there is a local DTD.

DOCTYPE indicates that the web page is displayed correctly by the browser. DOCTYPE indicates not only the HTML version (for example, html), but also the DTD file on the Internet.

...

The elements found in the middle of the tag create the document tree, the so-called document object model, DOM (document object model). This element is the root element.

Small 1. The simplest structure of a web page

To understand the interaction between the elements of the web page, you need to look at the relationships between the elements. The entries between multiple inserted elements are divided into father's, daughter's and sister's.

An ancestor is an element that contains other elements from itself. For the little one, the ancestor of all elements is є. At the same time, the element is the ancestor for all tags that are located in the new one: ,

, , etc.

A pad is an element formed in the middle of one or more types of elements. For example, it is a flatbed, and an element

Є on the ground one hour for і.

Batkovsky element is an element associated with other elements of the lower level, and is found on the tree for them. 1 per baby. Tag

And even more so for Father's sake.

A child element is an element that is directly subordinate to another element of a higher level. For the little one 1 lishe elementi, ,

I have 100% subsidiaries.

The sister element is an element that is similar to the ancient Father’s element from the analyzed ones, so called elements of the same level. For the little one there are 1 elements of the same level, just like elements, and

And among themselves as sisters.

1.1. Element 1.2. element

Section ... contains technical information about the page: title, description, keywords for sound machines, coding, etc. The information entered does not appear in the browser window, so you must enter data that tells the browser to process the page.

1.2.1. element

The obov'yazkovy tag of the section is the tag. The text placed in the middle of this tag appears in the title row of the web browser. The length of the title must be no more than 60 characters to fit within the title. The header text must provide as much description as possible instead of the web page.

1.2.2. element

The unnecessary tag for a section is a single tag. With this help, you can set a description instead of the page and keywords for search engines, the author of the HTML document and other metadata authorities. An element can contain a number of elements, which means that when combined with the attributes that are used, they carry different information.

The description instead of the page and keywords can be indicated in many languages, for example, Russian and English:

You can block this additional tag or allow indexing of the web page by search engines:

To automatically re-enable the page after an hour, you need to quickly update the refresh values:

The page will be re-visited in 30 seconds. To transfer the message to another page, you need to specify the URL in the url parameter:

. In practice, it is possible to determine the place of formation of these main tags based on their nature. Because tags, as well as related ones, close tags are omitted, then the browser program itself can determine where the culprit is. However, it is not recommended to omit these tags when creating Web pages.

The simplest correct HTML document.

< HEAD >

< TITLE >Document title TITLE >

HEAD >

< BODY >

BODY >

TagsHTML

HTML language is made up of special indicators - tags. They can also be called commands, instructions or HTML codes.

A tag is an instruction to the browser indicating how the text should be rendered. All tags begin with the less-than symbol (). A couple of different symbols are called heel arches. After the open shroud, go keyword What does the tag mean?

The skin tag in HTML has special purposes. The register of letters in the names of tags is not significant - you can edit both small and large letters, if you want to edit large letters so that the tags are consistent with the original text of the document.

There are two types of tags – paired and unpaired.

Guys tags– what opens and closes, similar to the round arms of an algebraic expression. The stench flows into the text from the place where it is written to the place where the end sign is indicated (tags that are closed begin with the oblique rice symbol (/).

For example,< HTML >HTML >,P>, H 3>

Unpaired tags give a one-time effect at the place of their appearance, there is no need for the one that closes.

For example,
, ,

The tag carries information about the Web site and is not displayed on the browser screen: it provides information about the coding of the Web page, about the author, as well as a set of search keywords that display the site.

butt.

Butt of the table

From the butt you can see that the page of the vikory code W Windows-1251 is the most expanded to date, it is enough to immediately insert this tag in this view on your page; author of the story – Ivan Ivanov; The side is dedicated to creatures.

When the document is displayed in the browser, the tags themselves are not displayed, but rather affect the way the document is displayed. If a tag in the abstract specifies a keyword that is not present in the HTML text, the tag is ignored entirely.

Tag attributes

Tags that are added can often obscure attributes that contribute to the effect created by the tag.

Attributes are additional keywords, reinforced with the tag keyword and one with spaces.

Attributes can have meanings written after the equal sign (=). First, place the attribute values in the tabs (single or double). A row of paws is not guilty of placing the same paws in the middle. You can omit the tabs for attribute values that consist of the following symbols:

symbols of the English alphabet;

between hours;
hyphens (-).

You can also lower the tabs for attribute values that are formed from the next symbols (return to technical concept ):

characters of the English alphabet (A - Z, a - z)

digits (0 - 9)

between hours

hyphens (- )

Thus, WIDTH=80 and ALIGN=CENTER - shortcuts are allowed for WIDTH="80" and ALIGN="CENTER" .
Tags that are closed do not interfere with attributes.

apply it. FONT >

Comments

Just as with all programming, there is the ability to add comments to programs (text rows, which are not part of programs), as well as in HTML. The comment starts with a special tag. A comment can include any symbols other than the “greater than” symbol (>), and therefore cannot include tags.

The principle of tag decay

Container tags.
We already know that great tags are made up of two parts - the opener (but not the attributes) and the closer, that is, the “end” of the tag. Setting the parameters in the tag to act only between its head and end, and only in the middle of the tag:

text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text

Entries on the left edge are not visible - they are automatically set by programs that generate HTML code to simplify the process. It is important to understand that the farther to the left edge there is a tag, the “further” it lies, the more “senior” tags can be used in a new activity.

Also note that some attributes of nested tags can be applied to other “older” tags. For example, this is typical for a table, the entries are one in one.
If the internal table has a task size of 100, then the external one cannot be less than 100 pixels + frame width. In this way, the table is inserted as if it “expands” the one in which it is inserted. If you indicate that it does not have tasks of size, but the amount of text in it is important, then expand the “senior” table to the size necessary for displaying the same number of rows of text. This is called a “turning link”.

Practical robot No. 1

“Creation of the simplest Web story”

Meta: learn how to create Web pages in the text editor Notepad.

Vkazivka before Vikonanny

Type in the structure of the HTML document shown below:

About our little brothers.

The Web site will be located here

Save the file by giving your name index .htm .

Open the creation file. You can see how the created file looks in your browser window.

Close your browser.

Go back to the file saved in Notepad.

Make changes until next time: replace the words “The site of the Web site will be placed here”, type the following: This is my first story .

In a row< TITLE >say: “Home page (your name and nickname).”

Save the file as page 2.htm.

Look at the result in your browser; if necessary, edit the file using Notepad.

Topic 2: HTML Tags

Tags for physical and logical formatting of text

Font formatting . There are a lot of elements needed to format text. You can format the text using additional traditional elements: see fragments in italics, bold font, select the font, size and color of the font, and verify text fragments. If the author does not have simple options for formatting text, he can go to style sheets, which significantly expand the capabilities of his HTML formatting.

Let's take a look at the standard HTML language elements that allow you to format text.

Font- This table replaces the code with visible images.
The skin key of the keyboard provides a unique code that is recognized by the OS (operating system, most often Windows or Linux/Unix).
Thus, having selected the desired font, the system replaces the code entered from the keyboard with the font image of the letter or icon. Kozhen font is a file. A file that contains images of letters, numbers and symbols that are assigned to the button. Installing a font means including a file with additional tables. On MS Windows systems, there are a number of fonts that are supplied with the system - this is:

Arial

Courier New

Comic Sans

Times New Roman

Verdana

These fonts are identical in design and style. The largest expansion is Arial. All these fonts are used by 90% of all types of text on your next page. The skin font is an independent file in the Windows folder/fonts/*.ttf. How can HTML give a font a different look?
… FONT > Depending on the type, size and color of the font. All these parameters are assigned using additional attributes.

The absolute size of the font is indicated by the si ze (size) attribute. This attribute can have a value from 1 to 7, with the 1st size font being the smallest, and the 7th size being the largest.
apply it.

text size 1
text size 2
text size 3
text size 4
text size 5

text size 6
text size 7

If you walk more quietly, you will continue to be ONT>.
The design has a lot of different dimensions. All that is more, the vile tone and a sign of amateurism, because it occupies a very rich place and is important to read. It’s true that larger sizes tend to stagnate. For example, with the same size you can write a letter (first letter to the cob): text text text text text text text text text text text text text text text text text text text text text text text text text text.
In addition, we can choose the font itself that is used to display the text. Avoid using the face attribute.

apply it. This is an arial font size 3 ONT >
text FONT >
As a matter of fact, these two attributes - size and type of font - can be placed in any order in the tag:
You can also customize the color attribute. The name of the color is given either by a number, written in the hexadecimal system, for example, color="#ff 0000", or simply by its name, written in English, for example, color = "red". apply it. This is a blue color font FONT >
This is an arial font, size 3, blue color FONT >
The font can also be: heavy (italics), bold, under-chairs, cross-overs, super-order, sub-row, and also includes a number of significant types. This can be reached, obviously, with the tags:
 text I>
text B >
 textU>
< S >text S >
SUP text >
text SUB >,
and also to their dues, for example, text U>B >
Paragraph formatting. Most basic documents have the main functional sections: headersі paragraphs. Web documents are the culprit. To designate the main paragraphs in the mov HTML, use the vikory tag

…P (Paragraph). Moreover, you can only select the cob tag, as well as the offensive element

means the beginning of the first paragraph, and the end of the previous one. In these situations, if you need to mark the end of the paragraph after the substitution, you can use the ending tag.
Along with the paragraph tag, you can add the align attribute:
align = "left" - aligned to the left;
align = "right" - aligned to the right;
align = "center" - aligned in the center.
butt.

Section 1P >

Animation >

side 3P >

English HTML doesn't have any way to create paragraph indents ("heart rows"), so to make it easier to read the text between paragraphs, the browser requires you to enter an empty row. If you need to make a transition to a new row without creating a paragraph, a single tag is selected
. At the place where it is placed, the row will end, and the text that is missing will be added to the new row. This tag should be manually vikorized, so that, for example, write verses in the column:
They let the medic in under false pretenses,
They tore off the witch's paw,
Anyway, I won’t throw it away,
Because he is kind.
On the browser screen we use the standard order of spelling chotirivirsh.

An important way to create separators in the text is the horizontal lines, which visually reinforce the different parts of the document one at a time. A horizontal line is created with a single tag. It will help you to easily divide the side into parts. Thesis is allowed low attributes:

Virivnyuvnya

align = "left"

align="center"

align = "right"

align="justify"

Towishchina and dowzhina line in pixels.

Size = 3 (width in pixels)

width = 300 (doubles in pixels)

width = 100% (douzhine for hundreds)

Line colors

color = "red"

Language HTML supports six levels of internal document headers. Stinks are identified by tags:

… before … .
The title of the first rank is the largest, and the sixth rank is the smallest. For headings, you can set the attributes to be aligned to left, center, or right.
butt. Biggest headline
Smallest title

Pets

Logical format for text . At this point we will take a look at the tags, which, behind their effect, suggest tags that set the size, color and image of the font. What is important is that these tags effectively describe the real power of the text. This means that the text may be displayed differently in different browsers, but this effect is guaranteed in the case where for some reason it is not possible to stagnate font effects. All these tags are merged into the text, placed between the tags that open and close. The closing tag is binding.
Tag... vikorist for quotes, book names. Zazvichay is shown in italics.
The fragments of HTML were created by people associated with computers, a whole group of tags intended to represent the texts of computer programs and the results of the interaction between the computer program and them.
Tag< CODE >... CODE > indicates the output text of a computer program, which is usually displayed in a monospaced font (usually the Courier font), or a font with a fixed size.
Tag< KBD >... KBD > formats text that may be entered behind the keyboard, so it is displayed in monospaced, bold font. Type of English keyboard - keyboard
butt.

To start Windows, type: win.
Code:
To start Windows, type: win
The tag ... designates the text as a sample. Vikorist is used to assign text that appears in programs. Displayed in monospace font.
butt.
This is the original text
The tag... is used to see the changes in the listed programs. Please note, this text is displayed in italics. The English version is var iable – changeable.
butt.
A, B, C
Code:
A , B , C var >

Tag… EM > vikorystvuyatsya to see the elements of the text (in italics).
Tag… STRONG > is used to emphasize elements in the text (in bold).
butt.
This is the original text
And here is the text from the tag's wiki.
Since there is a sense of vikorism here instead of design, it is recommended to vikorize these tags instead of tags і.

Practical robot No. 2

"Format text on the Web page"

Meta: learn how to format font and text on a Web page.

Vkazivka before Vikonanny

In element< TITLE >enter the name of the page “P/r No. 2”.

Format the leading text with insets (and in italics at the edges), as shown in the picture.

Pets

(TitleH 1)

(Verified in the center)

Dogs

(TitleH 2)

(Verified in the center)

Watchmen

(Evil font, bold font)

Myslivski

(right-handed, bold font)

Training

(Centered, bold italics)

Klubi Exhibitions Maidanchiki

(Centered, font size 10, font color red, fontArial )

Virsh

(font color blue, font size 6, centered)

I am modest in my life,

Ovation is not required

Ale yak I'm great

I marvel at the shell!

(Left-aligned, font size 6)

Creation of lists

Marked lists. The list differs from the original text in that the operator does not have to think about the numbering of each item: you take on the given program yourself. As the list is supplemented with new items or shortened, the numbering is automatically adjusted. For unnumbered lists, the program places markers in front of each item: circles, rectangles, diamonds or other images. As a result, the list looks easy to read.

Tags for the unnumbered list:

< LI >UL >
Tag

є own framed list. It allows you to add one list to another. Tag
indicates skin from points.
butt.
Screen view:
Tags for the numbered list:< O L> < LI >OL >

Numbered lists. The structure of a numbered list is similar to the structure of an unnumbered list. Only for framing the vikoryst tag
. Each item is numbered using Arabic and Roman numerals and letters of the Latin alphabet.

butt.

Item 1 on the list
Item 2 on the list
Item 3 on the list
O L>

Screen view:

Item 1 on the list

Item 2 on the list

Item 3 on the list

The numbering method is specified behind the additional type attribute. The table shows all the numbering methods:

Type of numbering

Practical robot No. 3

“Creation of numbered and unnumbered lists”

Meta: learn how to create lists on Web pages.

Vkazivki before Vikonanny:

1 . Create a new Web page in the Notepad editor.

2. In the element, enter the name of the page “P/r No. 3”.

3. Format the following text exactly to the inserts (data in italics), as shown in the little picture:

Sontse maє buti:

(Font size 8, red color,

aligned in the center)

1. Keep it warm.

2. Let's go round.

3. Zhovtim.

It's snowing:

(Font size 6, blue color,

aligned in the center)

V. Cold.

S. Pukhnastim.

(The font of both lists is black, size 3).

Hyperpower
See hyperpower. < A >... A > creation of hypertext communication.
This thesis has an obligatory href attribute. These values are the URLs as indicated by the message. The text of the message should be placed between tags< A >... A>. When the document is displayed in the browser, the text sent is highlighted and displayed in a blue color. Click on the link to go to the specified URL.

You can see a number of types of hyperpower.

Outsiders (link a Web page with documents that do not belong to this Web site).

Internal (link documents in the middle of the same Web site).

Absolute way. If the hyperpower is external, then the URL of the document called an absolute mess.
butt. Microsoft A >
The main insecurity of the absolute way lies in the fact that when transferring files to another server on the Internet, you need to change the hyperpower.

Vidnosny Way. If hyperpowered internally, then only that part of the URL is indicated, which appears in the two documents that are connected (so called Vidnosny Shlyakh), for example, if two documents are located in the same folder, it is enough to indicate the name of the file, which indicates hyperbole.
If the documents are located in different folders, first enter the folder name, then the file name, which is indicated by overload.

apply it. My special side A >
Long distance running A >
It is easier to verify internal messages, because when moving a Web site to another server, you do not need to make changes to other documents.

Anchors. Hypertext messages can be indicated in the right place in the middle of the page, if necessary, insert them in front yakir. Yakir also vikorist tags ta A >, but instead of the href attribute for the new language, there is the name attribute. The meaning of this attribute is I have an anchor. You can also use Latin letters, numbers and it is not necessary to clean up the clearings.
To send an anchor, you need to enter the name of the anchor, like the URL address after the name of the document, followed by the “#” symbol.

Inserting postal address in hyper-enforced format . If you are prompted to enter an email address, this option will not take you to a new document, but will launch the email program on your computer to send the message to the specified recipient. Please make sure to place the pages at the end of the page to ensure communication with the Webmaster or the author of the page, for example, Ivanov Oleksiy A >

butt.

Posilannya and anchorsTITLE >
HEAD >

New versions of standard operating system programs and latest drivers can be found on the company's Web site
Microsoft A >

And now you can go to my special page A >

Those who contact the author are discussed in
Finally, these are the sides
The main part of the page is here
address”>E-mail addressesA >
BODY >
HTML >

Practical robot No. 4

"Creation hyperpower"

Commandment 1. Creation of the simplest hyperpower.

Meta: learn how to link two HTML documents using hyperlink.

Vkazivki before Vikonanny:

Create two Web pages in the Notepad editor. Call one page 1.htm, the other page 2.htm. Save your offending pages in one folder under the name site. Please note that the names of the folders and pages are in English and begin in small letters.

In the element, enter the name of the page "P/r No. 4. Room 1".

To the side 2

Back to side 1

Open the first page in your browser and re-open so that the offensive hyperpower works correctly.

Zavdannya 2. Creation of hyperpower.

Meta: learn how to link three HTML documents with the help of hyperlink.

You can conquer another mission if you have successfully escaped from Mission 1.

Create third side page 3.htm.

On the page 3.htm page, create a message to go to the page 1.htm and page 2.htm pages.

On the pages page 1.htm and page 2.htm, add extra power to go to the page 3.htm side.

Open the first page in your browser and go over, so you can now go from any page to any other of the three pages.

Zavdannya 3. Color hyper-posylan.

Meta: learn how to designate colors overpoweringly.

It is possible to conquer the task if you have successfully broken through from the task 2.

On the pages page 1.htm, page 2.htm and page 3.htm, the tag has a hyper-color color:

Open the first side of your browser and, going to the side to get your orders, go to the right side to see the color of the hyper-loaded tasks is correct.

Little ones onWeb -story.

Illustrations (little pictures, photographs) play an important role in the design of Web pages. The little ones themselves are saved in separate files and HTML documents, and then displayed by the browser in the middle. For which there is a single tag< IMG >. The primary attribute of this tag is the src attribute, the values of which lead to the file with the baby or photo,

If the picture is in the same folder as the Web page, then simply go to the file name, for example: . If the picture is in another folder, then you need to indicate this folder, for example: . If the picture is on another site, then it should be written in full:
.

U tezi You can also select attributes such as:
height, width – set the height and width of the area where the baby is displayed. If the tasks lack one of these attributes, then another size is set at the same proportion. Please note that scaling will reduce the brightness of the image. The size of the baby varies in pixels or hundreds, for example: , Border – sets the size of the frame around the picture (in pixels). This attribute does not have to be placed, because, as usual, the frame next to the picture is permanent. Ale, if you want to tidy up, then set the value of the border attribute to zero,
bordercolor – sets the color of the border around the image, for example:
< IMG src="picture.gif" border="3" bordercolor="#CC0000">
In our application, the color of the task frames is red, and, of course, the border attribute (the size of the frame) does not have to be set to zero, if you want to put a border around the picture,
align—aligns the image with other objects:
the image will be pushed to the left edge of the screen, and the text will flow around the right hand,
The picture is right-handed, the text is Zliva.

The text can also appear at the bottom of the picture (at the same time) - (1), in the middle - (2), and at the top - (3):
(1) -
(2) -
(3) -

vspace - sets the space between the text and the small space (vertically):
,
hspace - sets the space between the text and the small space (horizontally):

< imgsrc=" pr1. png" hspace="30">
The value is specified in pixels.

For further help tag You can select images in hyperlinks, insert pictures into tables, and customize the design.

Practical robot No. 5

“Vikoristannya little yak hyperpower”

Meta: learn to vikorize the little ones as hyperpower.

On the pages page 1.htm, page 2.htm and page 3.htm instead of text hyperpowers, vikorist little ones. For whom:

Open the folder specified by your teacher (your dad has files from the images of color buttons), insert the image of the color buttons on the first side and create hyperbole to go to the other side:

Insert an image of an orange button to move from the first page to the third;

Set the border to both images equal to 2;

Open the first page in your browser and, going to the other side for your messages, check to make sure the buttons work correctly.

Insert images of buttons on pages 2.htm and 3.htm yourself and set the type of hyperpower.

Open the first page in your browser and, when going to that page for your messages, check to make sure the buttons on all pages work correctly.

Alternative text. The web page can be displayed by a browser that does not have the ability to display images. Correspondents often fade images to speed up the receipt of the document. And in this and in other cases, it is necessary to be able to recognize what is depicted in the picture, as it cannot be studied. For whom is the alternative text specified in the abstract< IMG>with the alt attribute (or title), this attribute displays text on the place where the image is retouched according to the hour of its attraction. For example:

Vikoristannya Malyunka Yak Fonu . If you want to vikorize the little ones as part of the side (“trellises”), then in the vikorist tag this attribute is added to the designated address of the image. For example:

Framey

Placing multiple documents on one web page. The HTML language allows you to split your browser program into several parts and display the entire document in each of them. These areas are called personnel.
How does the structure of an HTML document vary in order to place frames in the original HTML document? Such a document does not interfere with the “body” section of the document and does not interfere with any text at all. It is important to include a description of the frames and names of documents that will be located in the surrounding area.
< FRAMESET >… FRAMESET > frame tag.
Between tags< FRAMESET >...FRAMESET > describes the size and order of placement of areas in the browser window, as well as sets the documents that are responsible for encroaching on the skin of these areas.
The tag is responsible for replacing the binding attribute cols or rows, which indicates the method of displaying the window. The values of these attributes indicate the height (or width) of the window panels. They can be asked through whom in pixels or in vids. As another parameter, you can use the “star” symbol (*). Under such a frame one can see the entire spacious expanse.
When the cols attribute is used, it is possible to divide the area with vertical lines, and when the rows attribute is used, it can be divided into horizontal lines, for example,
,
If you are offended by the attributes of the task, a grid of sub-areas is created in the window, for example,

frameset >
As a result, the screen is divided into four sub-areas: two horizontal and two vertical. Moreover, the third value of the attribute itself is rows Allows you to move to the vertical subarea on the screen.

< FRAM E>- a single tag, an attachment to the tag, is responsible for the src attribute, the original document that will be imported into the local area, for example,
butt.

head >
Side with navigation panel >

frameset >
html >
A

The quality of HTML documents.

The creative nature of creating HTML documents is similar to programming, so there may be problems that can make it difficult or even impossible to read the created document on the Internet. In addition, the large number of computers connected to the Internet makes it impossible to transfer the document as it appears on the screen of a particular customer.

Web pages are considered a wide audience, even when preparing HTML documents to keep in mind the specificity. To create a good HTML document, you need to follow a number of simple rules.

3. In order for the HTML document to be accessible to the widest audience, follow the “one-time” approach to the rest of the reach of the HTML language development. The remaining innovations are not immediately implemented in browsers, and new versions will take an hour to reach the majority of users. Documents containing the latest innovations are available to a limited audience.

4. The advantage, as newbies often worry about, is that they are obsessed with design elements, especially different colors and fonts. This kind of side looks very flashy at first. In the worst case, the text will not be readable on computers with a non-standard color scheme or due to the lack of necessary fonts.

5. Avoid using graphic images and multimedia files. The fatigue of such objects of interest on the page may be delayed and the reader may lose interest in it even before the ability to read it is lost.

6. The creation of HTML documents is similar to programming; the process of searching for and correcting errors known to programming as a function is also necessary when creating a Web page. Most importantly, not all errors can be detected even before the page becomes available to third-party readers. Before the amends that need to be corrected, there are also grammatical amends and amends.

7. Frames - a very difficult, and even more unsafe process for designing Web pages. Behind the help of frames, many more nearby Web pages have been created, even more so in the distance. A single criterion for the literacy of frames is the handiness of the correspondent. Just because the frames the side becomes richly beautiful, but a little less manual, the frames need to be sure not to be confused. Nothing, besides irritation, is worse for the readers.

8. People value turbos and respect them. Placing the most important information at the top of the page allows them to spend an hour in a hurry, during which time they will be interested in the document Supervid with an illustration of alternative text not from the great ancestors, but at a high price Yes. The discovery of a large number of red hyper-powers on the site not only encourages people to appreciate the vastness of the Internet, but also prompts them to immediately turn to the page that gave them such power.

Practical robot No. 6
"Placement of multiple documents on one Web site"

Meta: learn how to create frames using the text editor Notepad.
Vkazivki before Vikonanny:

Open the text editor Notepad.

Create a new Web page that looks like this in the browser:

In the element, enter the name of the page “P/r No. 6”.

Look at the created Web page in your browser window.

Make these changes before: attribute rows change the first two values, Select the third value.

Save your money.

Look at the result in your browser. What has changed?

Touch the change, turn to the front page of the web page.

Look at the web page in your browser window.

Elements of the theory of computer graphics

Color model.

The images can be black and white, neutral (shades of the same color) or colorful. However, color images in the same category may be in a different palette of colors. The RGB palette is used on computer monitors, then. for images that will be viewed on the monitor. The CMYK palette is used to create images for each other.

The most expanded color model is called RGB Red - red, Green - green, Blue - blue after the names of the three basic colors that are added to them to create all the others. The RGB color model is illustrated with a picture of three groups moving around. At the center there is a webbing with three colors to give a white color. A pair of bristles of the shoulder collars gives additional colors: yellow, blue, purple.

The RGB model has three channels - red, green and blue, while RGB is a three-channel color model.

Skins from three color RGB components can be set to one of 256 values - from maximum intensity (255,2555,255 - white) to zero intensity (0,0,0 - black), then. Absolutely any color and shade of color can be combined with red, green and blue colors in different proportions

In order to create a harmonious composition of colors, it is necessary to know the characteristics of the colors. There are naturally a lot of such characteristics, but we can’t look at the basics.

Characteristics of color

One of the color schemes characterizes the natural power of any kind - this is the HSV scheme (tone, richness, brightness)

Hue tone is one point of color, as bright and intense as possible.

Saturation saturation is a combination of the main color and the same brightness of gray.

Value brightness – extreme brightness color (extreme positions – black and the brightest tones)

Practical robot No. 6

“Working with the RGB color model”

Task 1. The importance of colors in the formatRGB

Meta: learn how to determine color in RGB format.

Vkazivki before Vikonanny:

Launch the graphic editor Paint (Start – Programs – Accessories)

Find out what color of records the RGB model has and fill out the table:

To do this, select the command Palette – Change palette. In the dialog box Change panel, click on the button Value colors, enter numerical values for colors in the text field at the bottom of the field. The acceptable range for the skin block is 0 to 255, with 0 being the darkest and 255 being the lightest.

Task 2. Mixing colors of different intensities in a graphics editor Paint

Meta: learn to work with colors of different intensities in a simple graphic editor.

Vkazivki before Vikonanny:

Know which color will be selected as a result of mixing two colors of maximum intensity (255):

red and green;

green and blue;

red and blue.

Know which color will be obtained by mixing two colors at half intensity (127):

red and green;

green and blue;

red and blue.

green and blue

red and blue

maximum intensity

half intensity

Design 3. Painting with a specified color in the graphic editorPaint .

Meta: learn how to designate colors.

Vkazivki before zastosuvannya:

In the new file, paint the following geometric shapes, given the color:

Square(205, 44, 100);

Orthocutaneous (0, 230, 69);

Colo (30, 30, 30);

Oval(200, 100, 20);

Tricutnik (10, 10, 10);

Trapezium (50, 50, 250).

Color schemes

Knowing the peculiarities of applying skin color and color combinations, you can use a whole range of ready-made schemes. The skin of these schemes, being ingrained into life, sounds in its own way, introducing a singing mood to the composition.

If we want to achieve a harmonious combination of colors, we can take a bunch of extra ones, spread one by one on a color wheel. For example, the butt is yellow and yellowish-green.

To create contrast, choose opposite colors, arranged opposite one another. Such colors are called those that add value. The stagnant order, the stench of stopping one bright and living. Pair yellow - violet, purple - green - add colors to complement.

In a mixture of different colors, mixed together one by one, you can try different colors of the same color, at different levels of saturation.

However, the most reliable and unique source of colorful schemes is nature. People are part of it, and nothing soothes their eyes like the harmony of natural tenderness and beauty.

Prestigious colors: gold, silver, dark gray, black. Their mission is to convey solidity, sweetness, stability and high quality.

Pastel colors: soft, beige, rye, black - feminine, soft, relaxing.

“Healthy” colors: from American psychology - cleanliness, health, splendor, family (yellow-green color from the addition of black color).

Natural colors: close to natural organic components.

“Highlights” as an option for a different color – this means tonal shades of one color and as an accent – an active color

It is better to follow the time-tested recipe: use a minimum of colors, but the colors themselves, and select them according to the possibility of contrast. The main use of up to a number of colors for the background and text is sufficient contrast between them, which is necessary for comfortable reading.

Safe palette.

It should not be forgotten that the creator of a Web page has a lot to do with what model of computer and what programs his site will be viewed under. There is no need to sing that this “green yalinka” will not be transformed into a red or orange on the screens of koristuvachs.

Therefore, all popular programs for viewing Web pages (browsers) are previously adjusted to one fixed palette. This panel does not have 256 colors, but only 216. This is due to the fact that not all computers can support 256 colors.

Such a fixed palette, which strictly determines the indices for coding 216 colors, is called a safe palette.

Raster graphics

The basis of the raster representation of graphics is a pixel (dot) with assigned colors. When describing, for example, a red ellipse on a white aphid, it is necessary to indicate the color of the skin point of both the ellipse and the background. The image is presented with a large number of dots - the more there are, the clearer the image and the size of the file.

Raster data is used for photographic-type images with a large number of details or shades. The scaling of such pictures, no matter what, becomes increasingly saturated.

Vector graphics

The vector expression appears in the description of the image elements with mathematical curves from the meaning of their colors and surfaces. The red ellipse on a white aphid will be described by more than two mathematical formulas - the rectum and the ellipse of different colors, sizes and shading. Obviously, such a description takes much less time than in connection with raster graphics. Another advantage is the clear scaling of any kind.

Select a raster or vector format for the purpose of working with images. If photographic accuracy of color transfer is required, then a raster is used. Logos, diagrams, design elements are best suited to vector format.

Graphic file formats for the Internet

GIF and JPEG are the two most popular graphic formats, which have actually become standards for content on the WWW.

Photos are best saved in JPEG format, and illustrations in GIF format.

Graphics optimization.

For Web pages, maintaining the size of the photo is especially important.

The first stage of optimization is to look at the photograph of the head with the data and decide to focus on the illustrated element. This is achieved through the additional operation of framing and finding the most diverse part that conveys the sense of photography. After this operation, you can optimize the images to achieve the smallest size. When it comes to the size of the photographs, it is necessary to achieve a fair compromise - do not make them too different. And don’t be afraid of them being great. The photo is 250 x 300 pixels in size and takes up about 6-10 KB. This does not mean that all photographs of the guilty mother are the same dimensions, but that the area of the photograph is equivalent. So, for example, a file with a size of 45.93 KB for the speed of downloading 28.8 KB per second will be downloaded to the browser in 17 seconds.

"Placement of graphics on the Web site"

Decoration 1. Decorated with colorsWeb -Storinki.

Meta: learn how to create a color body for a Web page, use different color fonts and place horizontal lines on the pages.

Vkazivki before Vikonanny:

Create a new Web page in the Notepad editor.

In the element, enter the name of the page “P/r No. 8. Zavdannya 1.”

For the front element, use the secondary attribute to color the side background black.

Try writing in a white color “For good.” Verify in the middle of the page. Font size 12.

Insert a horizontal line of the red color.

Learn to write the yellow color “Welcome Dreams.” Verify in the middle of the page. Font size 8.

Insert a horizontal line of blue color 10 pixels in size, 50% of the screen width, and align it to the center.

Task 2. Placing graphics on the Web page.

Meta: learn how to place graphic images on a Web page.

Vkazivki before Vikonanny:

Create a new Web page in the Notepad editor.

In the element, enter the name of the page "P/r No. 8. Zavdannya 2".

If the abstract does not indicate the color of the side, the background will be white.

Place the small football sword on the side. The file with the name soccer .gif is in the possession of my father, who is designated as a teacher. To place an image you need to specify the path to the file in the element . To easily describe the way to this graphic file, copy this file to the same folder in which the Web page will be saved. This element looks like this:

If the file is not located in the same folder as the Web site, you must provide a link to that file.

Create a subscription to the little “Football” for the additional alt (title) attribute.

Create a frame around the little one with a width of 2 pixels.

Above the little one, place the headline “World of Football” in the largest possible size and align it in the center of the page.

Topic 4. HTML tags. Tables

C view and format table
Setting up rows and tables. A table is one of the most convenient ways of presenting great obligations of data. Language HTML has the greatest capabilities for creating different types of tables.
When the table is created, the nesting principle is introduced: in the middle of the main element of the table

Butt (a table that consists of two rows and columns).

PowerCapital
Russia Moscow
France Paris
TABLE >
This is what the axis looks like on the screen:

Phone number

Petrova A.I.

Smirnov V.P.

Specify the width of the table frame. Using the additional border attribute, you can set the width of the table frame in pixels, for example:

You can make the boundaries between tables invisible, for which the width of the table frame needs to be set to 0, for example,

Setting the width and height of the table . The width and height of the table can be set exactly in pixels or in pixels relative to the width of the page in the browser window. There are standard attributes:
width – width;
height – height.
For example, if we need to specify a song table of size, for example, 500 pixels wide, then we would say:

Since we want to display the table across the entire width of the screen, without affecting the size of the monitor of the person viewing our Web page, we will set the width of the page to 100%.

This is what the axis looks like on the screen:

Phone number

Petrova A.I.

Smirnov V.P.

If we need a high row height, for example, 300 pixels, then we need one more attribute:

Specify the color of the background and the color of the table . For the entire table, you can specify a color color, for which the bgcolor attribute is used. The meaning of this attribute can be either an English word, for example red, or a hexadecimal code, for example #FF0000.
For example, if the first table we created needs to have a shiny background, we will say:

This is what the axis looks like on the screen:

Phone number

Petrova A.I.

Smirnov V.P.

You can specify the color of the middle in the table. In this case, the bgcolor attribute is placed in the middle of the element

For example,

PowerCapital
Gold>RussiaYellow>Moscow
Maroon>FranceOrange>Paris
TABLE >

This is what the axis looks like on the screen:

Verify the data in the middle of the table.
There is a set of attributes used to validate data in the middle of the table. The align attribute allows you to align data in the middle horizontally. VIN takes on the following values:
Left - turn to the left;
Right – right-handed;
Center – alignment in the center.
The valign attribute allows you to align text vertically. The values may be:
Top - ranking along the top edge of the middle;
Middle - aligned in the center;
Baseline - ranking according to the first row
butt.

Horizontal alignment B >TD >

Centered
left> Along the left edge
Right-handed

Vertical alignment B >TD >
valign=top > Along the top edge of TD >

Centered TD >

Along the bottom edge TD >
TR >
TABLE >
As a result, we come up with the following table: Horizontal alignment

Centered

Livoruch

Right-handed

Virus according to
verticals

Along the top edge

Centered

Along the bottom edge

< table width =500 border =3>

Success

N p/n Nickname School Class

Practical robot No. 9
“Creation and formatting of tables”

Meta: learn how to create and format simple tables using the text editor Notepad.
Vkazivki before Vikonanny:

Create a new Web page that may look like this in the browser:

Nickname

Phone number

Petrova A.I.

31-74-16

Smirnov V.P.

46-29-89

The color of the table background is gray, the width of the table frame is 1.

In the element, enter the name of the page “P/r No. 14”.

Look at the created Web page in your browser window.

Go back to the file saved in Notepad.
Make the next change so that the Web page in the browser looks like this:

Telephone registry

Nickname

Phone number

Petrova A.I.

31-74-16

Smirnov V.P.

46-29-89

The background color for the middle of the first row is light green, the background color for the middle of the other rows is silver, the width of the table frame is 5.

Look at the web page in your browser window.

Save your money.

Combining rows or standing in the middle .

When folding the table, it is necessary to merge (merge) a number of rows or stacks into one center. For which there are attributes: colspan - indicates the number of rows combined in one middle (per row = 1), rowspan - indicates the number of rows combined in one middle (per row = 1). Apply:

All the importance of such a table lies in the appearance of the rowspan="2" parameter, the number in which indicates the number of "sub-rows", then. literally how many rows were angry in the middle. Since in the symmetrical table we read left-handed-right-handed, then the same applies here, but why does the code have a number three in front of the number two? Everything is very simple - literally the code for the first row is deciphered as “composition, to place 1”, “complex, to place 3, which consists of two rows”, the code for the other row is deciphered as “composite, to place 2”. Yak bachimo, physical middle 3 lay down to the first row!

Since we have rooms that are connected horizontally, then instead of the rowspan tag, the colspan tag is substituted, naturally, in this space, which occupies the area of many people). For example:

1
2	3

Practical robot No. 10
“Combining rows or standing in the middle of the table”

Meta: learn how to create folding tables using the text editor Notepad.
Vkazivki before Vikonanny:

Open the text editor Notepad.

Create a new Web page that looks like this in the browser:

Success

p/p

Nickname

School

Class

Chemistry scores

1 p/y

2 p/y

Ivanov

Petrov

Sidorov

The color of the first row of the table is aquamarine, the width of the table is 500, the width of the table frame is 3.

In the element, enter the name of the page “P/r No. 10”.

Look at the created Web page in your browser window.

Go back to the file saved in Notepad.

Layout of a Web page behind an additional table. The layout of the Web page can be manually combined with an additional table. Various layout options are possible. Let's take a look at their actions.
First option. The layout of the side is created behind an additional side with the width of the entire screen, regardless of the screen size (width = “1000%”). In this case, manually create a table that consists of two rows and two columns. The top row will be placed under the page title, the left column will be placed under the website menu. For such layouts, the side will take up the entire screen, regardless of which screen is placed at the outlet (Fig. 4.12).

Small 4.12. An example of web site layout. First option

Before such a layout, you can introduce “buoyancy” instead of the side, so that with a change in the size of the screen, the space has to fit in a narrower frame, so the text “flows” down. To avoid this, you need to select a fixed size for the table, so that the table appears unchanged even on a separate screen.

Another option. The layout of the page is created behind an additional table with a width of 760 pixels, aligned in the center of the screen. In which case the screen size is less than 800x600 pixels, the width of the page is almost the entire screen, and in case the screen size is less than 800x600 pixels є 1024x768 and larger, create a table with a width of 760 pixels in the center of the screen and white fields on the sides of it.

In this case, you can manually create a table that consists of three rows and one column. The top row will be under the page title, the other row will be under the Website menu, and the third row will be directly under the site (Fig. 4.13).

Small 4.13. An example of web site layout. Another option

If it is necessary to place pages in the middle of the text, be it illustrations, photographs, etc., then in this case tables are also used. At the bottom of the butt to the other center of the other row, a table is inserted, which consists of two rows and three columns. The first and third boxes of the first row have baby ones inserted, and the other box of the first row has the name of the side. Text is entered before all the middles of the other row (Fig. 4.14).

Small 4.14. An example of web site layout. Third option

Topic 5. Pidsumkov’s work “Creation of a Web site on a topic in the Notepad TR”

Students at home develop and draw up a project for a Web site on paper that looks like a creative work, and then implement it in class using HTML language.

_____________________________________________________________________________

A course of developments based on book I. Smirnov "To Web Design".

Are you wondering how to create an HTML side page? For this you will need to spend a few hours, and you will know that you can create your first page for 5 dollars.

HTML stands for HyperText Markup Language. In translation, this means “the language of hypertext markup”. It is important to understand that HTML is the programming of the site itself.

All modern browsers can recognize it. Then they display the information in a manual way for the reader, as was previously intended by the author.

This video has special tags. The skin tag determines its function. It's so rich. Ideally, you need to read everything. But basic knowledge is completely sufficient to get started.

HTML Basics

Before you create an HTML page, you need to know what it consists of. This movie has two concepts: element and tag.

To indicate which element opens and closes, use the What Opens and Closes tag is displayed. It looks like this.

instead

As you read, the tag that opens and closes only “/” appears.

The entire HTML document is a collection of these elements. You can create songs based on the structure of the document. The entire page is located between two tags. When you write the code, take charge of the icon and immediately put a tag that opens and closes.

Also remember that the structure of an HTML movie has a hierarchy. Otherwise it is called investment. They are the most important, since all others are in the middle.

HTML has two child elements:

... ;
.. .

The HEAD block displays various service information. This information is not displayed in the browser. For example, inserts for retailers, for any programs, for robots and much more.

The most important thing is that there is no content here.

The BODY section specifies the location of the document that will be displayed.

You will immediately begin to open and close tags, which may contain up to 10 nested elements. In addition, for ease of use, it is recommended to insert tags to work with access. For example, yes.

So, let’s make sure that the tags that are equal to each other for the significance of the tags are equal to one, and the daughter tags are “in the middle”. This makes it much easier to find and search for the required items in the code. Otherwise, you can get lost. Also, to save space and body, you can work without access. So shy, so that the decision does not have an intruder. Rashtu needs to be creamed.

How to create a simple side page in HTML

To write code you need some kind of editor. It's so rich. Popular ones are Notepad++ and Adobe Dreamweaver. You can also use Vikorist's notepad.

This is what the Notepad++ editor looks like.

This is a very handy editor and at the same time costless. The main purpose of Adobe Dreamweaver is paid. The importance of editors assigned to writing in a notepad lies in the fact that special tags are highlighted. If you were not highlighted, then you wrote incorrectly.

In order for the support to correspond to your language, it must be specified in the settings.

Let's take a look at how to create an HTML side in a notepad. Let’s finish the technical part and then move on to adding tags.

How to create a web page in HTML notepad

To get started, open the notepad.

Then dial from someone what is indicated on the next screenshot.

Call to write with your hands, and not just copy. If you write with your hands, you will better remember the entire basis of tags.

After this file you can open it in your browser and enjoy the results. Now you can figure out how to create a web page in an HTML notepad.

World Wide Consortium W3C

There is an organization like W3C that develops and promotes all standards for the Internet. All browsers comply with these standards and compile page markups (codes) in accordance with these rules.

On the official website of HTML distributors you can find a table with all the tags and the rules for their use. Within the framework of this article, we consider the most important ones.

Can you think what the rules might be? All these tags carry their own recommendation. Ix decal:

Non-linguistic mark.
Fencing.
Empty tag.
Elderly
Spending.

Tags in HTML

Before you create an HTML page, you need to take a look at what the HEAD service part contains.

In the HEAD area there are both mandatory and optional tags. Place a title before the language tag. VIN is designated Heading. This applies to every document. And those that you see in the results of the Google search engine are the title tag.

Let's move on to the BODY section. Find out what elements are and are not displayed in the browser. For example, comments are not displayed in the comments. They can be used for notes or as tips for other specialists who work in a team.

It smells like

Everything that is in between is evaluated by the program itself. Please note that you cannot insert a comment tag into another comment tag. Because only you will open it.

An example of this contribution:

continuation of the first comment -->

The result will be better for the browser

continuation of the first comment -->

And the axis of the items won't be visible. Another tag, What's popping up Another text