We create a web page and host it on a local web server. Creating an HTML page in Notepad: explanations for dummies

Hello everyone, dear friends and guests of my blog! Oh. I just noticed that Yandex awarded me a TIC of 20, although just yesterday it was 0. I understand that the TIC doesn’t really mean anything anymore, but it’s still very nice and joyful. Well, in general, I wanted to continue the recently started series of articles on website building. And the first thing I would like to start with is the basics of the hypertext markup language (not programming!) HTML.

HTML is still the basis of everything, and even if you are not a cool web developer, but will make your sites on engines, then knowledge of the HTML language will be a huge and bold plus. Therefore, in my article today I want to tell you how to create an html website using notepad.

Of course, what we will do today will hardly be called a website, so I’ll say right away that today we will not create a cool website, but I will tell you the structure of how everything happens with this method of creating your own web resource. I think you shouldn't have any difficulties. We'll end up creating a very basic web page to start with. And if you're ready, let's go!

To get started, create a plain text document or open Notepad. To open notepad, you can call the “Run” line and enter notepad there. Have you opened it? Well done!

Any HTML document or website is marked up using special tags. A tag is a special sign that tells the site how to correctly display a particular piece of content contained within it. Now I won’t dwell on this in detail, since I’m going to tell you about tags in my .

Let me just say that most tags are paired, that is, the opening tag is placed first, and after we have written the information, we need to close the tag. It closes in the same way as it opens, only before closing you need to put a “/” sign.

In general, for it to function, we need to put in several required tags. Let's see what they are.

• - this is the main tag, thanks to which we tell the site that now we will write here in HTML, so don’t worry. The site should start with it and close with it.
• — official information is entered here, such as the title of the document, description and many others. Placed immediately after the open tag.
• — Between these values ​​we write the page title, that is, this title will not be displayed in the site content itself, but in the browser tab. This type is placed between and .
• — this tag is responsible for displaying content on the site. That is, everything you write between these tags will be displayed on the web page.

I feel that not everyone understood everything, and some were left with a mess in their heads, so I will show you everything with a living example.

So, create a text document and write the following content there:

Have you written? Well done! Here I specifically gave you the information in the form of a picture, and not in the form of text, so that you will not copy it. I'm a scoundrel, right?)) Did you notice that the tags are nested inside each other like nesting dolls? That's how it should be.

Advice! Try not to copy the content, but to rewrite it yourself. This way you will learn all the material much better and faster.

After this, save your document in html format. To do this, when saving, after you have named your document, put a dot and write html. That is, you should get index.html. Then your document will automatically be saved not as a text document, but as a web page. And when saving the document, change the encoding to UTF-8. You can open this file using any browser. Let's do this and see what we got.

Look how much we wrote, but only our welcome text remained in the final document. Why? Yes, because the tags themselves are not displayed in the final version, and the displayed information is displayed only between the body tags. That's why it all turned out that way. But look, what we wrote in the head, or rather in the title, is now displayed in the browser tab.

If you want to edit something here again, then you just need to open this already saved document again in Notepad. In general, look, we made our first website using a notepad. Yes...it’s hard to call it a site, but essentially it is. We have made the basis (framework) and if we upload it to the hosting, it will already be displayed on the Internet.

But try adding a few spaces and writing more text, or just write a few lines of text and save it in the same document.

Now access this document using your browser. What do we see? And the fact is that your spaces and line breaks did not affect the document and everything goes on one line. Ugly, right? And all because html itself does not understand your spaces (except for one) or hyphens. In order to break lines, everything needs to be marked with other tags, which we will talk about in other articles.

Many will probably think something like: “And this is your website? Yes, you fell out of your mind." Yes, my dears. This primitive web page can also be called a website. And I will repeat once again that the point of this article was not to create a mega-cool website, but to show you the basis of any website, what it looks like, how everything happens.

But don't worry. These are all introductory lessons. Next, we will dive deeper and deeper into the html markup, and we will be able to format and arrange everything correctly. In general, everything will be cool and we will create a full-fledged web resource. It’s just that all this won’t fit into one article, and I won’t crumple and shorten it either, otherwise it will turn out to be garbage.

But still, we will no longer use this prehistoric tool, since there is a more convenient and sophisticated notepad for developers, and it is absolutely free. Download it from here and install it in the most usual way.

In the future, I will work specifically through the Notepad++ editor. Install it and you will understand why it is convenient. There are no advanced settings there, but if you suddenly installed the English version, then go to the “Preference” menu and select Russian in the “Localization” column.

Yes, and also go to the “Encoding” menu and select “UTF-8”. Well, immediately save this file in html format. To do this, select the “File” - “Save As” menu and name the document index, selecting the “html” format from the drop-down list. This is done so that the program understands what we are doing and highlights the necessary tags and commands for us.

Why do I even call the page index? The fact is that when you go to any website, by default it looks for the index.html or index.php page. These files are generally accepted as the main ones, but in general this can be changed on the server.

Of course, if you want to learn everything quickly, I recommend that you watch the recently released course on HTML5 and CSS3. Everything is explained there in detail and shown with a live example, in addition, you will learn how to make several types of websites. Overall, very interesting and informative lessons.

Well, I recommend that you subscribe to my blog updates so as not to miss the next lessons, as well as other interesting things. Also, be sure to check out my other blog articles. I'm sure you will find many of them useful. In general, I wish you good luck. See you in other articles. Bye bye!

Best regards, Dmitry Kostin.

As you know, everything great always starts small. If you are interested in the answer to the question of how to create a website using a notepad, then you have probably heard about this possibility somewhere. This is indeed possible. But it’s worth mentioning right away that most likely no one will currently create a modern dynamic interactive website using a notepad, since there are special programs for this that greatly speed up and simplify the development process. But creating a full-fledged web page is quite possible.

HTML is simply a way of standardizing document markup that is uniquely interpreted by browsers to be displayed on computer screens in a user-friendly form. The main tool of the HTML language are special structural elements with the help of which the document is drawn up. These are called descriptors or tags.

In general, a tag is a construction of the form

Let's look at the main types of tags and their purpose.

• Element . It is installed at the very beginning of the page and serves to indicate to the browser how to interpret this document. It is optional, but highly recommended on the page to avoid possible problems with its display.
  
• Tag. It is a paired tag and consists of two parts and . Each page of the site begins and ends with this tag.
  
• Tag. It is also a pair tag and consists of two parts and . This tag contains various important information about the page: its title, links to the design styles used, plug-in scripts, and special metadata.
  
• Tag. and and is located inside the tag. This tag defines the title of the page with which it will be visible in the browser.
  
• Tag. It is a paired tag, consists of two parts and follows the tag on the page. It is the <body> tag that contains all the information that is displayed on the page in the browser.
  
• Tag. Is single. Serves to indicate a line break in a document.
  
• Tag . Refers to paired tags, is written in a slightly different form from other tags and is used to create links. It is an essential element of the entire concept of the HTML language, as well as the Internet as a whole.
  
• Tag

  . Refers to paired tags and consists of two parts. It is used to create a text paragraph.
  

• Tags , , , , , . They are classified as paired tags because they consist of two tags, for example and . These tags serve to create six levels of subheadings and at the same time indicate the importance of the text contained in them relative to the entire document.
  
• Tag. It is also a paired tag consisting of two parts and sets the font to bold.
  

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.

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.

Type subsequent main tags using the keyboard, placing any of them, not counting the closing tag, on 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 recall that the 1st and last tags mean the beginning and end of the document, respectively, the element ... defines the title of the WEB page, the element ... - the body of the document, and in the element we currently indicate the title of the WEB page.

Between the opening and closing tags, 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 color name, for example, 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.

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 the attributes bgcolor="blue" and text="yellow" into the opening tag. 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 is strictly not recommended.

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 background and text colors of the page are the same as those 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 we entered text in the element without breaking it into paragraphs, it is displayed in the browser as the 1st paragraph and aligned to the left. Now we need to give the text a nicer look.

Welcome to the pages of the Start-Luck blog. Today I would like to show you how to use the code. Writing websites is an interesting activity that may seem impossibly difficult to many. In fact, a simple page can be created in just 5 minutes.

In this article I will talk about creating an html page. We'll complete this task in less than 10 minutes, and then we'll look at the main tags in more detail. It would be wrong to call such a publication a lesson. It’s more of a seed that’s designed to show you the simplicity of the work and give you the desire to move on, learn more, and do better.

I suggest you make the first page in a notepad. The simplest one, which is located in the Start menu, is the “Accessories” folder. There is no need to download anything yet. Try to use what you have.

Open the document.

Paste this code into it.

My first page "https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg" > We've reached the very bottom Now you know a little more about tags and can use them. Let's try to insert a link to link several pages together. For example, here is a link to my blog - Start-Luck - it simply talks about “difficult things”.

My first page Creating a page is easier than you think Many may think that creating websites is difficult, even impossible. To do this you need to study, learn, and do a lot. In fact, there are about 100 tags that you don't even need to learn. It is only important to understand what is used and where. You can look up information in various cheat sheets, and over time you will begin to remember the tags automatically.



Simple code to make text red

It's not much harder to write in bold

We've reached the very bottom

Now you know a little more about tags and can use them. Let's try to insert a link to link several pages together..

Well, that's all. Your first page is ready

The file should be called index.html. End ".html" indicates the file extension. If you simply enter the index name, the document will be saved as a text file and will not be opened by the browser.

I saved the document to my desktop. Now you need to find it, right-click and open it using any browser. I'll choose Google Chrome.

This is what the page I just created looks like. Yours will be no different. Everything is exactly the same: with pictures and color font.

Now I’ll talk about tags in more detail, but for now let’s just remove “ from the title center" and insert a line containing the word "Color". By the way, I already wrote. It's very simple, I recommend reading it.

Save the document again, this time you can simply use the keyboard shortcut Ctrl + S, and then refresh the page in the browser using the F5 button

Remember, almost any tag must open and close. That is, the code with a slash must be located somewhere. In this case it looks like this: .

You see the title has turned red. In the same way, you can give the desired shade to any part of the text.

Well, that's it, the example is ready, and you should be proud of yourself. Of course, it is not yet online; for this, the web page must be posted on, which is provided by the hosting. You also need to connect your domain so that other people can see your creation.

For now, only you can see the page. But you must admit, such a site can only surprise a person from the Iron Age. But this is the first attempt, let's make it even more successful by understanding the tags that we used. This will help you learn how to create your own projects without anyone's help.

With your permission, I will switch to the NotePad++ program. It has a number of advantages compared to a regular notepad. Now I will really need the highlighting of tags to show you the elements that I will talk about. In general, if you are going to learn html, then I highly recommend installing this free program.

She is not the only one and I can offer you a few more if someone is interested in alternatives. We will move on to the theoretical part.

The page begins and ends with tags . They show the browser that this is a web document created using html.

Next comes or title. It contains the most important information about the page, in our case - . If you have not yet found the phrase “My first page”, which is present in the code, pay attention to the tab itself, above the search line.

It's the tags are responsible for the beginning and end of the main information about the page.

Tag indicates that the phrase is a heading. By default, it is slightly larger than the main text and is highlighted in bold. If you and I now wrote not only in html, but also created a CSS file with which our file overlapped, we could control the size, font and even color of all the headings on the page without writing font style, as we did in the example. Although it’s too early to talk about this too.

By the way, Title and H1 have their influence when assigning your site a place in search results. You need to treat them with great attention and not write anything inside just for the sake of it. They are related to. In addition to h1, there are also h2, h3, h4.

In the same line there is an opening and closing . Thanks to this element, you can align text in the middle. If this tag is removed, the text will be aligned to the right.

- one of the few single tags. That is, it works on its own. Thanks to this, you jump elements from one line to another. Simply put, you indent. We wrote it once, which means we moved down once, twice, like I did, and the indentation turned out to be a little larger.

Next comes the tag img, that is, image, picture. The square bracket opens, all the basic information about the image is entered into it, and only after that it closes. It should be noted that img is a tag, and all other code elements that fit inside are its attributes.

The first thing is alt, that is, a description. This is also necessary for optimization. Sometimes it is also added title. When you hover over the image with the mouse, a tooltip appears next to the cursor when the page is already open in the browser.

It was possible to upload the drawing to the site folder and write the path to it, but I took the simple route. I found a picture among Pixabay, opened it in a new window and pasted the link.

In the tag src the path to the image is specified. It is he who tells the browser what to move next to find the desired image, and in which direction to look - you write it yourself.

is responsible for giving part of the text some special style, for example, as in our case, a different color. style=”color:red” indicates that the color will be red. If you want yellow, write yellow, green - green. You can use color codes from Photoshop.

helps make text bold.

draws a horizontal line. It is single and is used only when closed. If you write several times, you will get exactly the same number of horizontal stripes when you open the page in the browser.

tells the browser that there will be a link next. You want to redirect the reader to a different address. This tag comes with a required attribute href=”address”. The quotes contain the path where the browser should take the page visitor. After this tag is written, a description, a word or several, is inserted, which, when clicked, will take the reader further. Once these conditions are met, you can insert a second, closing tag .

Adding Images

Tag is a single tag, without a closing tag. You can specify image attributes.

The src attribute specifies the location of the image.

The style attribute has many parameters, including the width and height of the image in pixels.

The alt attribute gives a short description of the image. Used if for some reason the image does not load.

Adding a title

The tag is new to HTML5 and indicates the topmost element of a web page. Headings typically contain a company logo, contact information, navigation links, etc. There can be multiple elements in a single document.

Advanced Concepts in HTML

HTML is an easy technology to learn, so many designers just work with basic concepts. If you want to make full use of HTML, you will need to become familiar with advanced concepts. This will help you create an attractive website with less effort.

We will mention a few concepts that will help you further. You can continue to learn more and use advanced HTML and its features.

HTML Code Validation

HTML Validation is used to check for errors in HTML code. If your web page is not loading, you can use a check to find the cause of the problem.

Validation also provides guidance on code that does not comply with the latest HTML standard. Invalid HTML will make the site unusable. This may cause loading problems or inconsistent output across different browsers. Many verification services are free, such as validator.w3.org

Adding additional tags

There are many more HTML tags and attributes than we have discussed here. Two good resources for learning are w3schools and HTML Dog, which have more tutorials and a comprehensive list of tags.

You can also use View Source Page in your browser to examine the code of well-designed websites and see new techniques.

With a web hosting service, you can add multiple HTML pages to your web domain. You may need FTP upload software to transfer your HTML files to the web server. There are many web hosting services that provide FTP functionality.

Adding CSS and JavaScript

CSS can be used to quickly improve the appearance of your website. You can use CSS to add color, fonts, and change the placement of elements. With a CSS stylesheet linked to an HTML page, you can change the style of all text.

JavaScript is a programming language and can be used to add additional functionality to HTML pages. JavaScript commands are inserted between . They can be used to add interactive buttons, perform mathematical calculations, etc.

The wonderful world of web development opens up before you. Go for it! It’s easy to conquer this peak, you just need to start.