Menu
homeWord

Creating a simple html page in notepad. How to create an HTML page: step-by-step instructions, technology and recommendations

2016-11-06


Create a web page and host it on a local web server

Hello dear visitor!

This article is about how to create a web page and host it on a local web server virtual host.

And, for this we need, as shown in the picture: a local web server, a text editor, a language for describing the structure of web pages, HTML, and a CSS style language.

  • Creating a virtual host on a local web server
  • Creating a web page file and testing the local web server
  • Skeletonizing an HTML page
  • Site source files

Creating a virtual host on a local web server

A regular web page is a text file in HTML format, so such a page is also often called an HTML page. And before we begin, we will first create a virtual host on a previously installed local web server, where in the future we will test our future website.

Here, we will consider working with a local web server using the example of assembling Denwer (Denver) programs. But this is not important, since all this can be done on other similar software products.

After installing Denver, the “WebServers/home/” directory already contains configured virtual hosts, such as “localhost”, “test1.ru”, “custom”. Let’s create a new host for our site and call it, for example, “newsite.local”, meaning by this name that this is a new site and it is hosted on a local server (due to possible confusion in the future, you should not assign real host names domain zone, such as "ru", "com", etc.


In this folder “newsite.local” we will create a new folder “www”, in which we will place the site files, and also copy the auxiliary folders “subdomain” and “cgi” here from existing hosts.


After the operations have been completed, you need to restart the server so that it makes the appropriate changes to its operation. This can be done through the "Restart Denwer" shortcut, which can be created when installing Denver, or (if it is not there) through a special file Restart.exe in the "denwer" folder.

Creating a web page file and testing the local web server

Well, now let's move on to creating a web page. To do this, first of all, using the Notepad++ text editor, we will create a file “index.html”, which will contain the code of our main page. How to install a text editor is shown in the article Installing the nodepad++ text editor.

It should be noted that when opening a website with an address containing a domain name, without any other directories, browsers always open the file located in the root directory under the name "index". Therefore, we will begin creating pages of our site from this file. In this case, it will have the extension "html", since its code will be based on HTML.

But, before that, in order to avoid further unnecessary misunderstandings with the display of HTML pages, it is advisable to check the encoding that is set in the Notepad++ editor at the very beginning when opening new documents.

This can be done as follows: through the "Options" menu, open the "Settings" window and in the "New Document" options, check that the universal encoding is set to "UTF-8 without the BOM tag", as shown below.


Now let's create a new file through the "File" menu by clicking on the "New" button. In the new tab that opens, to check the operation of the web server and the correctness of the encoding settings, write some phrase, for example, “Check” (such a check is not necessary when creating an HTML page and is provided here only for a better understanding of the actions being performed).

Now let's save this file in the "www" folder of the newly created host "newsite.local". To do this, select “Save As” from the “File” menu, enter the file name “index.html”, specify the desired folder and click “Save”.


Next, let's check how our page is displayed. To do this, update the browser by entering the name of our host “newsite.local” in its address field. If everything is done correctly, an inscription with some hieroglyphs should appear on the screen, as shown in the screenshot (I note once again that such details are discussed here only for those who do this for the first time, in order to clearly show what usually happens when done incorrectly). encoding compliance. In general, you can skip this check and go straight to the next step).


Such strange signs appeared due to a mismatch between the browser encodings and the displayed page. To prevent this from happening in the future, you need to specify the required encoding in the additional configuration file ".htaccess" of the web server.

In this case, browsers will always use the correct encoding when opening pages of our site and, accordingly, display them correctly.

In order to do this, you need to create a new file in the Notepad++ editor in the same way as with “index.html” and save it in the same folder under the name “.htaccess”. In this case, in the file itself you need to write the following line “AddDefaultCharset UTF-8”, as shown in the screenshot.


Well, now, if you update the browser again with the address of our host “newsite.local”, you can make sure that the text that we originally wrote in the file “index.html” appears on the page.

This means that our page hosted on the created web server host is displayed correctly when opened by a browser, which confirms the correct operation of the web server and the correct setting of encodings.

If this does not work, then before moving on to the next steps, you need to go back and fix the problem.


Skeletonizing an HTML page

After we have verified that the local web server is working and that our web page is displayed correctly, we will move on to filling it with HTML code.

But, in order to write HTML pages, you must first become familiar with the basics of the language for describing the structure of HTML web pages.

There are a large number of different reference books, video courses and other educational materials that help in mastering the HTML language. Here on the site, there are also a number of video courses devoted to this topic, both in paid and free versions. For example, you can use the free video course HTML Basic Course, which covers all the basic HTML tags and attributes in great detail.

Undoubtedly, video courses that clearly show and explain the training material are very useful for general familiarization and understanding of the subject of study. But, nevertheless, they are not always convenient for use as a reference source of information when you periodically need to clarify something as you work.

This fully applies to writing HTML pages, because you won’t have to scroll through the video for every, and especially not significant, issue in search of the necessary information.

Therefore, when creating web pages it is convenient to use reference books. What reference books are best to use? It is very difficult to answer this question unambiguously; probably, everyone has their own preferences, especially since there are a large number of them on the Internet.

On my own behalf, I can recommend such an information resource as an online directory "http://www.puzzleweb.ru/html/all_tags.php". Its peculiarity is that it provides not only quite detailed background information on the main languages ​​used in website building, such as HTML, CSS, JavaScript, PHP, but it also has self-instruction sections that are very concise, but at the same time The basics of these languages ​​are explained quite informatively, with illustrative examples.

You can also note the online reference resource "https://webref.ru/", which contains fairly complete information on modern versions of HTML5 and CSS3, which also includes training courses on web technologies. To this, you can add the reference book "http://htmlbook.ru/html/", from which you can also glean a lot of useful information and can also be useful when writing web pages.

In general, everyone will definitely select for themselves, from the variety of reference materials, the most convenient and suitable reference books on these issues.

Now, let's move on to creating the skeleton of the HTML page, i.e. to the formation of its main blocks. Below is shown what our framework will look like, built on the basis of the site design layout created earlier in the article Creating a web page design layout.

  2. "utf-8" />

    <span><b>Page title</b> </span>

    "Description" content = "Brief description of page content" >

  4. "wrapper" >

    A cap

    Rotator

    Main content

    Sidebar

    Basement

In order to write the HTML code of the framework into the file "index.html", you need to open it in the Notepad++ text editor and type the code using the example given, or copy it there.

In addition, at the end of each article, starting with this one, an archive of the source files of the “www” folder of the site being created for the current state will be attached. Therefore, you can simply use these additional materials and download the "index.html" file from the link provided at the end of this article.

This is what the HTML code of the file "index.html" should look like in the Notepad++ text editor, compiled in accordance with the example given.


Let's take a closer look at what is shown in the figure.

The first line is very important, as it tells the browser the type of document so that it can understand it correctly. The need for this entry is due to the fact that HTML exists in several versions, which differ not only in the presence or absence of any elements, but also in the syntax of the language.

Therefore, if there is no such indication, the browser will simply “get confused” when processing the page. This line, in particular, indicates that the document was created in HTML version 5.

More details about the elementcan be found in the reference book htmlbook.ru at the link "http://htmlbook.ru/html/!doctype".

Next, there are elements called “tags” - symbols enclosed in angle brackets. These elements are, in a way, language constructs that tell the browser what to do, and are essentially the basis of the HTML language.

Tags can be formatting or special. Formatting tags are responsible for creating elements of the visible part of pages, such as paragraphs, headings, links, pictures, etc.

Special tags are needed to tell the browser and search engines information about the document, the so-called metadata, for example, what encoding the page is made in, what title it should have, what style sheets should be included, etc.

In addition, tags are divided into single and double tags. Paired tags always consist of two parts, in the first part they open, in the second, indicated by the slash “/” symbol, they close (opening and closing tags). What is between them will be processed in accordance with the rules for using this element.

So the 2nd and 17th lines contain the "html" tag, which essentially represents a container with all the contents of the page. This tag is always specified in such an order that any HTML code must be inside this container.

The next part of the framework is the "head" area, where all the special tags are placed. This area covers lines 3 through 7. The information contained in this area is auxiliary and is not displayed by the browser, with the exception of the "title" header, which is shown in the browser tab.

As such special tags, line 4 contains a meta tag with the "charset" attribute, indicating the "utf-8" encoding, line 5 contains the "title" tag, which defines the title of the document, and line 6 contains a meta tag with the "name" attributes " and "content", intended to briefly describe the content of the page.

In the future, as the layout progresses, the “head” area will be supplemented with other special elements.

The next area, "body", spanning lines 8 to 16, is intended to contain formatting elements responsible for creating the visible part of web pages.

In accordance with the design layout, in our case, the “body” area consists of five main blocks: “Header”, “Rotator”, “Main Content”, “Sidebar” and “Footer”, where:

  • the 10th line contains the “Header” block (the “header” element);
  • in the 11th line - the "Rotator" block (el "section");
  • in the 12th line - the block "Main content" (el-t "main");
  • in the 13th line - the "Sidebar" block (el "aside");
  • in the 14th line - the "Basement" block (el "footer");

At the same time, the blocks placed here are shown in a very enlarged form. For example, "header" and "footer" will also include (in accordance with the design layout) a navigation menu, and "main", in turn, will be divided into blocks containing articles and comments. And this division into smaller blocks will continue until all the markup of the HTML page is completely completed.

Regarding the paired tag

, located in lines 9 and 15, then it here performs the function of a “wrapper” block to set the minimum and maximum page width within the specified limits of the rubber layout. This tag has been assigned the "wrapper" class attribute so that it can be further assigned appropriate CSS styles.

Please note that in the past, before HTML 5, block-level "div" elements were commonly used to create a wireframe. You can still use them for these purposes, in this form the sites will still be able to work normally.

Therefore, now that HTML5 has rightfully taken the main place in website development, we will try from the very beginning to keep up with the times, and, if possible, use new elements of this language.

If you now open the created page in a browser, you can only see the words that are contained in the tags located in the “body” container. The text located in the “head” area, as noted above, will not be displayed. The exception is the "title" header (in our case "Page Title"), which will be visible in the browser tab.


With this, we will complete this stage of website creation, and in the next article we will mark up the web page in accordance with the previously created design layout.

Site source files

The source files of the site with the updates that were made in this article can be downloaded from the attached additional materials.

The lesson “How to create an HTML page” is devoted to the layout of the simplest web page. You will learn how to correctly save an HTML file, set the necessary encoding to correctly display an HTML page in a browser, and place texts, lists, and images on a web page.

After studying this lesson, you will already learn how to create your first web page, as in Figure 1.

Picture 1

1. HTML document structure

HTML files have the extension .htm or .html.

Tags are usually paired: start and end tags. Initial -<>, final, For example

And

A paired tag is also called container .

Some tags do not have a required tag pair, this tag is called single . Such a tag is closed by writing a right slash before the closing angle bracket, for example

The structure of the html document looks like this (Figure 2).

Figure 2

Explanations for the listing in Figure 2

In the first line, the DOCTYPE construction means one of the web page layout standards.

Between tags And contains the header part. It includes a design </b> And <b>. This name appears in the browser title bar when loading a document (Figure 3).

Figure 3

Record means the Cyrillic encoding so that the letters are displayed correctly in the browser. If the encoding is not specified, fonts can sometimes be displayed as follows (Figure 4)

Figure 4

The same page after inserting the encoding (Figure 5)

Figure 5

Note: instead of encoding charset="windows-1251" you can use encoding charset=" utf -8" , which allows you to create multilingual websites, since all the characters existing in the world are present in it. In this case, in Notepad++ is necessary before layout and savinghtml-select file from the top menu Encodings - Encode to UTF -8 without BOM (UTF-8 without BOM)

This information is enough to create the first document.

Practice 1

1. Create a folder, name it myhouse. The names of all folders and files must be created in Latin lowercase letters, Russian names cannot be used. Keep names short and meaningful.

We will write the web page code in Notepad. It is better to use not the Notepad that comes with Windows, but a more “advanced” one, for example Notepad++. Distribution Notepad++ is in the folder CD/distr.

2. Open Notepad++. Make sure that the ANSI encoding is set, to do this in the menu in the item Encodings, set position Encode to ANSI.

3. Type the code from the listing in Figure 2 into Notepad++.

The code in the listing in Figure 2 will serve as a template for us in the future so that we don’t have to type out the structure of the HTML document every time. Copy the DOCTYPE construction from here (no need to memorize or memorize it).

4. Save the file as template.html in folder myhouse, while in the field File type install All types(Figure 6), otherwise your web page will not open in the browser.

Figure 6

5. After saving, run template. html double click. As a result, your file will look like this (Figure 7).

Figure 7

If you do not get the result as in the figure above, it means that there is most likely an error in the code. One wrong character is enough and the web page will not be displayed correctly. Check the code again with the listing in Figure 2.

6. Inside the folder myhouse create a folder public_ html. This name is usually the folder in which the site is stored when hosted on real hosting (this folder can also be called www).

7. Save the file template. html in folder public_ html under a new name main. html.

8. From a folder CD/ html_css_1 open the file text_main.txt in Notepad++, and also open the file saved under the name main. html

9. Copy all the text from the file text_main.txt and paste it into the file main. html instead of the phrase “Web page content”. In the tag write the word "Home". Like this <b><title>home.

10. Save changes and preview the file main. html in the browser. You will see unformatted text. The browser does not even do line breaks that are in the source text (Figure 8).

Figure 8

2. Formattingweb-pages taggedHTML

This How to Create an HTML Page tutorial covers the basic tags that are used to mark up a web page.

Tags are designed to format the text of a web page. The list of tags can be viewed in more detail in the folder CD/DirectoryHTML in the directory html401_en.chm(in the top menu item elements).

Let's look at some of the tags.

Elements h 1, h 2, h 3, h 4, h 5, h 6

Structuring the body of the document is done inside the element < body> using headings specified by the elements h1, h2, h3, h4, h5, h6.

Heading elements are paired, so they must have an opening < h1> and closing h1> tags.

HTML has six heading levels: h1 (topmost), h2, h3, h4, h5 and h6 (bottommost). The functionality of heading elements is similar to regular heading styles in text editors.

The effects of these six tags are shown in the figures below. One picture shows the source code (Figure 9), the other shows the view in the browser (Figure 10).

Figure 9

Figure 10

Dividing text into paragraphs

Tag < p> sets the beginning of a paragraph and inserts a space at the top of the paragraph - an indent to separate this paragraph from the previous one.

Force line break

Tag
allows you to wrap the remaining text of a paragraph to the next line. This is an unpaired tag and, unlike the paragraph tag, does not increase the spacing between lines.

Practice 2

1. Format the title “Catalogue of architectural projects” using tags

And

.

2. Format the title “Projects for your future home” using tags

And

.

3. Format the headings “House Projects” and “House Areas” using tags

And

.

4. Divide the main text into paragraphs using a tag

Inside the first two paragraphs, use the tag
to break a line. As a result, your code should look like this (Figure 11).

5. View the result in a browser.

Figure 11

Bulleted and numbered lists

Using HTML, you can create any lists: numbered (numeric and alphabetic) and bulleted with different types of markers.

Tag < ul>…ul> generates a bulleted list.

Tag < ol>…ol> generates a numbered list.

Single list item as in

    , and in
      formed using a tag < li> .

      Practice 3

      1. Create a numbered list under the heading “House Projects.”

      2. Create a bulleted list under the heading “House Areas.” Your code will look like this (Figure 12).

      Figure 12

      3. View the page in a browser.

      Lists can be nested inside each other using different markers.

      An example of a nested list is shown in Fig. 13

      Practice 4

      1. Implement the code shown in Figure 13 in a new file.
      2. Save the file in a folder myhouse under the name spisok_ vlozh. html. The result in Fig. 13

      Figure 13. Example of a nested list

      Font styles

      Tag … - allows you to display text in bold font.

      Tag … - allows you to display text in italics.

      Tag … - displays underlined text.

      For example:

      In this case the text will be displayed bold italic , but not underlined.

      And in this case the text will be written bold underlined italics .

      Subscripts and superscripts

      Tag < sub> And sub> allows you to lower text half a line below normal text.

      Tag < sup> And sup> allows you to raise text half a line above normal text. Text located between these tags will appear in a smaller font than regular text.

      Practice 5

      1. Format the name myhouse.ru in bold in the first paragraph (Figure 14).

      Figure 14

      2. Format the phrase “More than 95% of projects” in underlined italics in the second paragraph (Figure 15).

      Figure 15

      3. Format superscripts where square meters are used (Figure 16).

      Figure 16

      4. Save the file. View via browser. The web page should look like this (Figure 17).

      Figure 17

      3. Inserting images

      In our How to Create an HTML Page article, we'll look at how to place images on a web page.

      The tag is used to insert images . The required attribute for this tag is src(from English SouRCe - source). It defines the path to the graphic file, the image of which should be displayed on the web page.

      To insert an image, use the command

      For example: " image1.jpg" alt="Picture" /> !}

      The alt attribute is necessary so that when viewing a web page in the disabled images mode, instead of the missing image there will be an inscription that is written in the alt attribute. It is also recommended to always use alt texts, because search engines analyze them as keywords when searching for images.

      Graphic files can be in the format jpg, gif, png and always in the color modelRGB.

      Practice 6

      1. After the list of house areas, insert images of cottage projects into the web page project_1.jpg And project_2.jpg from folder CD/html_css_1 . To do this, first copy these two images to the folder where the main.html file is located. The image insertion code will look like this (Figure 18).

      Figure 18

      2. View the result in the browser (Figure 19).

      Figure 19

      Basically the principle of using tagsHTMLshould be clear. They are used according to the same principle: if the tag is container, then there is an opening and closing tag. If the tag is single, then there is no closing tag; in this case, the right slash is written before the closing angle bracket, for example< br/>. Whether the tag is container or single, you can always look in the specificationhtml401_ru.chm in the “elements” section.

      4. Addressing within the site

      In our first lesson, How to Create an HTML Page, we'll explore the concepts of addressing in HTML.

      Let's consider addressing options when you need to place images in an html file that may be located in different folders of the site.

      There are two types of addressing:

      • absolute;
      • relative.

      Absolute addressing (using computer drive names) not used(Figure 20)

      Figure 20

      Used relative addressing - addressing within a document or a set of documents on one server. To refer to a file within a site, you need to tell the browser which path it should take to get to the desired file.

      Example 1

      The image is located in the same folder as the HTML document (Figure 21). That is, the image and the HTML file are at the same level in the file system and the HTML document can immediately attach the image. In this case, inserting an image into a web page will look like this.

      / >

      Figure 21

      Practical task7

      Implement example 1 (create a folder, a doc.html file, take any image). Image

      Example 2

      Image pic. jpg is in the folder folder_1 . The HTML document is located outside of folder_1. Those. In the site's file system, the HTML document is located one level higher than the image (Figure 22). You need to enter the folder folder_1, then attach the image

      Figure 22

      Practical task8

      Implement example 2 (create a folder, a doc.html file, take any image). The image must be inserted into the doc.html web page.

      Example 3

      Image pic. jpg is in the folder folder_1 , which in turn lies in the folder folder_2 . The HTML document is located outside of these folders (Figure 23). Thus, the HTML document is two levels higher than the image. Necessary:

      • enter the folder folder_2,
      • then enter the folder folder_1,
      • then attach the image.

      Figure 23

      Practical task9

      Implement example 3 (create folders, doc.html file, take any image). The image must be inserted into the doc.html web page.

      Example 4

      folder_1 . The image is located outside of folder_1. Those. The HTML document is located one level below the image (Figure 24). You need to exit folder_1, then attach the image. Leaving a folder is indicated by the construction ../ (two dots and a slash to the right).

      / >

      Figure 24

      Practical task10

      Implement example 4 (create a folder, a doc.html file, take any image). The image must be inserted into the doc.html web page.

      Example 5

      The HTML document is located in the folder folder_1 , which in turn is located in the folder folder_2 . The image is outside of these folders. Thus, the HTML document is located two levels lower than the image (Figure 25). Necessary:

      • exit folder folder_1,
      • exit folder folder_2,
      • attach an image.

      Since you need to exit twice, the design ../ repeated twice.

      / >

      Figure 25

      Practice 11

      Implement example 5 (create folders, doc.html file, take any image). The image must be inserted into the doc.html web page.

      Example 6 (Figure 26)

      Necessary:

      • exit folder folder_1,
      • exit folder folder_2,
      • go to the folder folder_3,
      • go to the folder folder_4,
      • attach image pic.jpg

      Figure 26

      Practice 12

      Implement example 6 (create folders, doc.html file, take any image). Image

      must be inserted into the doc.html web page.

      Example 7 (Figure 27)

      Necessary:

      • exit folder folder_1,
      • exit folder folder_2,
      • exit folder folder_3,
      • enter the folder folder_4,
      • attach image pic.jpg.

      Since you need to exit three times, the design ../ repeated three times.

      Figure 27

      Practice 13

      Implement example 7 (create folders, doc.html file, take any image). Image

      must be inserted into the doc.html web page.

      Thus, no matter how many times you need to exit, we put the construction ../ so many times, and if we enter, we list the names of the folders encountered along the way.

      Practice 14

      1. Create an html document and insert an image into it so that the path to the image is as follows.

      " ../../../../../../folder_1/folder_2/folder_3/image.jpg" / >

      2. Develop your own example of inserting an image into an html document so that it contains and exit from folders, and entrance into folders. The example should be different from all the examples above.

      As a result of completing this topic, you should have the following files created:

      • template.html
      • main.html
      • spisok_vlozh.html
      • inside the foldermyhousethere should be a folderpublic_ htmlwith files of the future site
      • seven examples on relative addressing and two examples as control ones from practical task 14

      Or, or better yet, all four, because many HTML elements display differently in different browsers, and it's best to keep that difference under control.

      In addition to the browser, we will need at least some kind of text editor, for example, Notepad from Windows or Notepad, but ideally Dreamweaver. The program is needed to prepare HTML files, and the browser is needed to view and control what has been produced. Using these tools, we will create a WEB site on our own local computer, after which we will place it on one of the WWW servers on the Internet, thus making your WEB pages accessible to the whole world.

      Preparing to create a WEB site

      As an example, let's prepare WEB pages for a company. Let's call it "SD Company", let's say that it works in the field of automatic control systems. The purpose of the WEB site is to tell the world about the company, its scope of activity, and to find partners and customers.

      Our WEB site files require a separate folder.

      Make a folder named WEB on any hard drive of your computer. Now let’s launch the Notepad program and get to work.

      Open a program, for example Notepad, by clicking the Start button on the Taskbar and selecting Programs - Accessories - Notepad from the menu that appears.

      You can use any other text editor. But in this case, you should save the file as plain text to avoid including third-party formatting marks in the WEB document.

      First, let's introduce the main tags that determine the structure of any HTML document. Let us remind you that in HTML code you can use any case of characters - upper or lower.

      1st tags

      Enter subsequent main tags using the keyboard, placing any of them, not counting the closing tag, in the newest line.

      To enter paired tags, you will be able to use copy and paste operations through the Windows clipboard with the following addition of a slash /.

      Let us remember that the 1st And last tags mean the beginning and end of the document, element … defines the WEB page title, element …- the body of the document, and in the element We will now indicate the title of the WEB page.

      Between the opener and closing use tags to insert the title of the document - SD Company. This element should look like this:

      SD Company

      Let us remind you that the title of a WEB page should be small and show its content to the greatest extent.

      Our next task is to insert into the body of the document between the tags … a small text greeting to the guests of the WEB page.

      Insert a blank line between the tags And and enter the following text in it:

      Welcome to the SD company page! Here you will learn about our activities, about the software products of our company and about the equipment that we produce.

      For each WEB page you can find the background color and text color. This is done using the bgcolor and text attributes of the opening tag. . There are two options for defining a color as an attribute value:

      • verbal indication of the name of the color, for example, white (snow-white). HTML provides sixteen such names;
      • a numerical designation in hexadecimal notation, for example, "#ffffff" - snow-white, which shows how the color is formed from the main colors - reddish, greenish and blue.

      Coloring the first WEB page

      Naturally, verbal indication of color is more comfortable and understandable. On the other hand, numerical designations provide more ability because they allow you to actually indicate any of the 16,777,215 colors, while verbal designations are limited to only sixteen colors.

      Let's list some color names: black (dark), gray (grayish), red (reddish), green (greenish), aqua (blue).

      As an example, we use a blue color for the background of our WEB page, and a yellowish color for the text.

      Insert it into the opening tag attributes bgcolor="blue" and text="yellow". This tag should look like:

      In addition to specifying the color, you can also use a sketch prepared in advance for the background of the WEB page. But we will talk about this in the future.

      In the Notepad program window, select the menu command File - Save. The Save As dialog appears on the display.

      Open the WEB folder you created earlier, in which all WEB site files must be saved.

      In the File name input field, enter other.html - that’s what we’ll call this file.

      Please note: you must specify the extension of the HTML file name so that the browser can open it. You can also write htm, but this is an outdated format and its use is strictly not recommended.

      Let's see the result of the work

      Now you can view the results of our work.

      Without closing it, minimize the Notepad window.

      Using Explorer (Windows Explorer), open the WEB folder in which you saved the other.html file, and double-click on its icon. The default browser will be launched and the other.html document will open in its window.

      You see, the title of the browser window indicates the title of the document that we entered in the element , and the color of the background and text of the page is the same as indicated in the tag . The text appears in one paragraph and is aligned to the left.

      The text font size may be larger or smaller in your browser than in the picture. In this case, select the menu command View - Font Size - Medium (View - Text Size - Medium) in the Internet Explorer browser to set the font size to medium.

      It should be understood that different browsers may display the contents of the same HTML file differently. Therefore, when developing WEB pages, it is better to always view the results in all the more popular browsers - Internet Explorer, Opera, Mozilla. In this case, you will be convinced that the guest of your WEB site will see exactly what you want to show him.

      View the created file in another browser. At this stage of work, the differences will not be noticeable.

      Without closing, minimize browser windows.

      Because in the element We entered text without breaking it into paragraphs, then in the browser it is displayed as the 1st paragraph and aligned to the left. Now we need to give the text a nicer look.

      Hello, dear blog readers. With this article, we will begin to learn the basics of the HTML language.

      You probably already know that the main language of the Internet is hypertext markup language HTML (HyperText Markup Language). In this article, we will learn the basic concepts of HTML and learn how to create simple WEB pages.

      Let's start with the most important thing, let's look at how it works World Wide Web - Internet. To produce web pages, you create files written in HTML and place them on a web server. After this, any browser installed on a device with Internet access, be it a computer, phone or tablet, can find your web pages.

      Web server- This is an ordinary computer with special software that has access to the Internet. It continuously listens for requests from browsers for web pages, images, audio and video files. Having received a request for one of these resources, the server looks for it and sends it to the browser.

      Browser is a special program designed for viewing websites, such as Internet Explorer. Using a browser, you browse websites by clicking on links. Any such click causes the browser to make a request for the HTML page to the web server, receive a response and display the page in its window. It is when the page is displayed that the HTML language begins to work; it tells the browser everything about the structure and content of the web page. Using commands - tags, HTML tells the browser where paragraphs of text begin, what part of the text is a heading, and where to insert tables, and even pictures. And tags are words in angle brackets, for example

      ,

      , .

      You urgently need an online store, but you don’t have time to learn HTML, CSS, PHP and other technologies. Then you can simply rent an online store with fully implemented functionality and optimization for search engines.

      HTML language and its tags

      The first version of the HTML language appeared back in 1992. At the time of 2013, the specification of a new version of HTML, number 5, is being developed. The development of this specification is carried out by the World Wide Web Consortium, or W3C for short. The W3C organization develops other Web standards. You can familiarize yourself with these standards on their website www.w3.org. By the way, many Web browsers already support some HTML 5 features.

      I suggest starting to learn HTML right away with an example. So let's create our first Web page. Any text editor is suitable for creating WEB pages. I suggest first using the built-in Windows Notepad(in general, in the future, I recommend using to edit html code). You can find it: “Start->All Programs->Accessories->Notepad”. Let's create a page about cars. So, open Notepad and type the following text in it:





      Example Web Page


      Website about cars.


      Welcome to our automotive website. Here you will find many interesting and useful articles about cars. The site contains descriptions of many imported and domestic cars.



      Next, save the created web page to a file named index.html. In this case, in the file saving dialog box, you must set the encoding to UTF-8 and enclose the file name in quotes, otherwise Notepad will add the txt extension to it, and our file will be named index.htm.txt:

      Now all that remains is to open the created file in the browser and look at the result. To do this, you can use the Microsoft Internet Explorer browser that comes with Windows, or any other browser installed on your computer, by double-clicking on the index.html file or dragging the file onto the browser icon. Open it and see something like this:

      Thus, we created a Web page in Notepad, although a little nondescript, but already containing a large heading and a paragraph of text that is automatically broken into lines and contains a fragment in bold.

      What is a tag?

      Now let's talk more about the page structure. Let's look at the fragment:

      Website about cars

      . Here we see the text that appears on the page as a title, enclosed in tags

      And

      . What is a tag in HTML?

      HTML tag are ordinary words and symbols enclosed in angle brackets, for example

      ,

      , . So tag

      is the opening tag, tag

      closing tag, and the text between them is called the content of the tag. Also tag

      and tag

      are called paired tags. Together, the opening tag plus the content plus the closing tag form an HTML document element. There are also elements consisting of one opening tag:

      So paired tag

      defines a first-level header element. There are six levels of headings in total, these are the elements

      —

      .

      Elements can be block or inline (text). Block Elements carry out structural formatting of the page. Block elements are always displayed on a new line on the page and are indented from adjacent elements. Inline elements perform direct text formatting or logical formatting. Element

      is a block element.

      That's all for me!!! See you in the next posts!