HTML for greens - HTML

Document structure

What does a typical HTML document look like? What are subpages?

Creating a website is similar to creating a regular text document. After launching an HTML editor, select the option from the menu: File/New. Now you can start writing your page. However, since an HTML document is not just a plain text file (it contains hypertext, embedded images, and must be displayed correctly on various operating systems worldwide), a special HTML document template has been designed, which should be followed.

Here's an example of what every HTML document should look like (there are other similar templates as well):

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="description" content="Enter your page description here">
	<title>Enter your page title here</title>
</head>
<body>

Insert your page content here

</body>
</html>

ATTENTION!
The above template applies to the so-called source code. If you use a graphical editor (e.g., FrontPage), you must switch to the direct HTML source code editing mode. Additionally, if you use a plain text editor (e.g., Windows Notepad), some diacritic characters may be incorrectly encoded - they may appear as "question marks"! I strongly recommend using an HTML editor.

Most HTML editors automatically insert their own template when creating a new document - similar to the one shown above. If you prefer, you can modify it by changing the sections described below. However, it's a good idea to use the template presented in this section. In this case, all changes should be made directly in the HTML source code editing mode. If you have a graphical editor, you need to switch to it, while text editors usually only have this mode - in that case, no switching is necessary.

Tip for absolute beginners
You don't need to rewrite the entire text of the template every time you create a new page. In your web browser, simply move the mouse pointer to the beginning of the text (the pointer should change its shape) and click the left mouse button. While holding down the left button, drag the mouse to the end of the template text, then release the button - the text will be selected. Now press the Ctrl+C keys on your keyboard, which will copy the selected text to the system clipboard. Then, in your HTML editor, after opening a new file, simply press Ctrl+V, and the text from the clipboard will be pasted into the document.
If you are a more experienced computer user, such tips may seem funny to you. But please be understanding - everyone has to start somewhere. Remember your own beginnings...

Most of the text in the template above should not be changed. However, you should change the text that is highlighted - the relevant sections will be described in detail below.

The content between <head> and </head> (in the above template) is called the document header (meta content), while everything between <body> and </body> constitutes the so-called document body (actual content).

Now, let's clarify the most important lines.

In place of the text: Enter your page description here, you should enter a written description of what is on your website. Search engines like Google use this information. The text you enter here will appear in the search results when your page is found by a search engine. If you leave this field empty, the search engine will display the first few lines it finds on the page. A catchy but not too long description can encourage internet users to visit your site! Each individual page in your website should have its own description, reflecting its content.
Between <title> and </title> (in place of the text: Enter your page title here), you should enter the title for your page. It can contain any text, but it's recommended not to be too long (just a few words at most). It should relate to the content of the page. The title appears in the browser's title bar (at the top of the program window) and in search engines after your page is found - that's why it should not be too long. A relevant title can also encourage users to check out your page!
Most importantly, in place of the text: Insert your page content here (between <body> and </body>), you should enter the actual content of the page. It can be plain text that you want to display on the page. These are also the so-called control tags that determine the appearance of the document (which will be described later).

ATTENTION!
Under no circumstances should you omit the following line in the template above:
<meta charset="utf-8">

What are subpages?

Practically all websites consist of a number of subpages, not just one very long main page. Each subpage is simply a separate file (with the extension *.html or *.htm), created in the same way as the main page (using the template shown above). For example, this website consists of the following subpages (see in the table of contents): "HTML for Beginners," "Header and Content," "Text," etc. This content organization makes it easier for users to navigate and prevents unnecessary loading of the entire website at once, which would likely take a very long time.
All subpages are usually saved in the same directory as individual files, or in different directories (if you want to organize them thematically). From one subpage, users can automatically navigate to others by clicking on the appropriate links (if you include them).

One more thing:
The file that serves as the main page (the homepage) must be named index.html or index.htm. Your website can consist of any number of subpages - each of them is a separate file, created in the same way as the main page. Other subpages can be named as you like, as long as they have the extension *.html or *.htm. However, using very long names can be inconvenient - especially when an internet user wants to go directly to one of your subpages by entering its address in the browser (each page has its own unique address that can be referenced).

ATTENTION! Very important: in file names, it's better not to use:

capital letters
special characters, e.g., \ / : * ? " < > |
spaces (if necessary, use an underscore "_")
Diacritic3 characters (ą, ć, ę, ł, ń..., etc.)

If you don't follow these recommendations, it may turn out that after uploading the page to the Internet, such files will not load (even if everything is fine on your computer)!

In the following sections on this page, we'll provide descriptions of basic commands that can help you create your very first simple webpage. All of them should be placed between <body> and </body> (as part of the actual content of the page). If you want to add plain text to the page, you can simply type it directly without using any additional commands.

Questions and Answers

What is the structure of an HTML document?

An HTML document consists of a header section <head>...</head> and the actual body of the document <body>...</body>. In the header, you can include the title and description of the page. The body of the document contains text and other elements that will be displayed in the browser window.

What sections make up an HTML document?

An HTML document consists of a header section <head>...</head> and the body of the document <body>...</body>.

How to set diacritic characters in HTML?

To ensure correct display of diacritic characters, you should insert a character set declaration in the document's header: <meta charset="utf-8">. Additionally, it is necessary to use the appropriate HTML editor.

How to create subpages in HTML?

Websites typically consist of multiple subpages. To create a subpage, open any HTML editor and create a new file in the same way you would when creating the main page of the website. Then, input the appropriate content and save the file on your disk with the extension *.html or *.htm.

How to open an HTML file in a browser?

There are two ways to open an HTML file in a web browser. The first method is to use the appropriate keyboard shortcut in the web browser (in Windows, it would be Ctrl+O), and then, in the dialog box, locate the file on your disk and click the "Open" button. The second method is to locate the HTML file on your disk using the built-in file explorer in the operating system, and then double-click its name - this will open the file in the default web browser.