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 html pages. 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. This is rather a seed that is designed to show you the simplicity of the work and give you the desire to move on, learn more, 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 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.



A simple code allows you 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..

OK it's all over Now. Your first page is ready

The file should be called index.html. Ending ".html" indicates the file extension. If you simply enter the name index, the document will be saved as text file and will not open in the browser.

I saved the document to my desktop. Now you need to find it, click right button mouse and open using any browser. I will 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 tag highlighting 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 by help 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 went in a simple way. 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 horizontal line. It is single and is used only when closed. If you write several times, you will get exactly the same amount horizontal stripes when opening a page in a 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 .

If you want to know more about html tags and learn to insert not only pictures, but also videos, create buttons, various forms, lists, paragraphs, then I can offer you free course Evgenia Popova " HTML Basics" Only 33 lessons will help you reach the next level.

I would also like to recommend you a video course that explains how websites are designed. The whole process is shown in real examples, which is especially good. The course is intended both for beginners who don’t even know HTML yet, and for those who already know both HTML and CSS well, but don’t know how to layout websites well. You can get more complete information by following the link: www.srs.myrusakov.ru/makeup

In addition, take away Free book on website creation! This book is intended for beginners, and this is where the website is created FROM and TO. That is, the design is prepared, then the pages are laid out, written software part, and then the site is posted on the Internet. The author carefully comments on everything, and the book contains a lot of screenshots and illustrations. Moreover, the peculiarity of the book is that it is not creating some abstract site, but a completely real one that exists on the Internet.

Today you have done a lot, because the first step is the most difficult.

Subscribe to the newsletter and VKontakte group, and find out also: how and why you need a website engine, what block layout is and modular grid, how to write websites correctly and much more.

See you again and good luck!

Do you urgently need to make a website using only HTML and put it on the Internet? Then it will not be difficult for you to copy the finished code and follow my instructions.

True, it is difficult to create a full-fledged resource using one programming language, but a business card website of several pages is quite possible.

If someone has this as their goal and has no desire to learn other languages, then this article is for them.

In short, in a self-written version, without using a CMS, nothing simpler exists.

And for those who need something cooler, at the end of the article there are links to articles with the block template code, with using CSS, and dynamic site code using PHP.

We will create a website in pure html right on this page, so to speak - a website within a website, fully functional and ready to be filled with content.

Let's divide the whole process into three parts.

1. Create a site directory on your computer.

2. Website creation.

3. Transfer of the site from our computer to hosting, that is, to the Internet.

Creating a website directory on your computer

The first point is the simplest. How to create a directory is very clearly shown in the article (all links from this page open in a separate window so as not to get lost).

I’ll show you in detail after the code what and in which folder to put it. home page, so that you already have something to go to the directory with.

Then let's move on to the second point, the most creative one.

To create a template, you will need an editor into which you will need to paste the code below.

This can be either a simple Windows Notepad or any other text editor.

Let's take a multi-layer HTML table as the basis for the template. Previously, before the advent of CSS, all websites were written in tables, but now block layout has become more popular.

But to this day, the table structure is not outdated and is successfully used.

For example, an investment CMS H-script with complex functionality, entirely designed on the basis of tables.

So, here is a website with minimal design.

How to design tables in the future is shown in great detail in the article.

Name of the site

Read Also Contacts, SMS How to download games and applications for free on iPad and iPhone Application with a hare to download paid games 2024-03-09 04:09:33 Safety AirDrop - how to use? 2024-02-21 03:53:31 Synchronization To add an account in Windows Mail 2024-02-18 04:13:32 Multimedia First launch, synchronization and charging 2024-02-10 04:42:26 Liked? Like us on Facebook