In this lesson, you will follow my instructions to create your first web page. For now, you don’t need to delve into what kind of incomprehensible symbols you will have to use. In this lesson we create a page, and in the next two lessons we will fully understand each character written.
The first thing we do is create a folder on the desktop and give it the name “Site”. All our further creation will take place in this folder.
Now we launch the Notepad++ notepad that we installed. (If you haven't done this yet, here are the installation instructions). By default, the program should be in the /Program Files/Notepad++/ directory, or you can launch it through Start. Open the program and paste it into it next text:
<html> <head> <title>My first website </title> </head> <body> Hello! This is my first web page! </body> </html>
Most RuNet sites consist of html pages written in UTF-8 encoding. In order for our pages to be displayed correctly in the browser, we will also use this encoding.
Now we need to save our file in html format.
Don't forget that Notepad++ is a text editor, which means that this moment we have regular text file with a set of characters. In order for our browser to display the created by us text page as a web page, we need to make it into a file with html extension.
To do this, click on top menu button "File", then "Save As", select the directory (path) where the file will be saved, save it in the folder we created: Desktop/Site/, then most importantly, select desired type file, in our case it is Hyper Text Markup Language (html).
Congratulations! You've just created your first web page! Now you can go to the "Site" folder and run the created file. The page will open using a browser, and you will see that instead of the incomprehensible symbols that we inserted, the browser displays completely understandable information on the screen.
Gentlemen, good mood to everyone) Today I decided to write an article on the topic - How to create your own web page. I was prompted to this topic by readers and friends who for some reason still do not distinguish between the types of sites and pages on the Internet. I very rarely call anything a web page))) However, many of my friends often say so. Especially for them, I decided to describe the main types of web pages that you can create for yourself in order to have some kind of representation of yourself online.
Before creating a web page, you definitely need to create an email or email address. I described the creation options in this article - . And if you have an email address, then let’s move on to the options for creating your personal web page. Read on for ways to help you create your own web page.
One page site
The most ancient method))) For it you need to learn the basics of the HTML language. Doing this in our time is not at all necessary; there are a million services, which will be discussed below. However, if you want to understand how a website and, in part, the Internet works, then try creating a one-page website yourself. I described how to do this in the article -. There are options for creating a one-page website using website builders and free platforms.
Page on the social network VKontakte
I think in our time the phrase: “I created a page for myself on the Internet” applies most of all to the social network Vkontakte. VK is the most popular social network in the CIS. Creating your page here takes just 1 minute. Moreover, dozens of useful functions for activities on the Internet. I have written a lot about Vkontakte and plan to write even more)) With this social network you can...
VKontakte also allows you to create a convenient URL to your web page, instead of the standard URL when registering http://vk.com/id8032931. Then you can change it to a beautiful one - http://vk.com/vasheimya.vashafamiliya.
Facebook page
If VKontakte is the most popular social network in the CIS, then Facebook is the No. 1 social network in the whole world. Facebook is considered to be for advanced Russian-speaking users))) But personally, I think that this is all because Facebook is very popular and convenient.
Just like on VKontakte, you can assign to yourself beautiful address your web page. I described the complete manual on how to create a web page on Facebook in the article -.
Blog
A blog is my most recommended option for creating your own web page. The blog provides thousands of opportunities for self-realization and is very easy to use. Often as free as social media web pages. I offer a selection of articles on creating a web page using a blog:
- fast, but with costs for hosting and a separate domain.
is a blogging platform from Google. Integrated with many Google services. Very convenient if you are a Google fan))
is the most dynamically developing blogging platform. I read statistics in one of the American publications that Tumblr is more popular among US children 12-13 years old than Facebook!!! I think this is an indicator of the convenience and development of this platform.
— here are manuals for almost all well-known blogging platforms, including the above.
Diary
Here are all the main options for creating your web page, or, in other words, web presence. Literally 1 minute and you are already immersed in space world wide web. Happy web browsing!
The site is actually a collection of code files in several languages. And the code can be written in any normal text editor, even in a notepad. Of course, it is better to use more advanced software, like Notepad++ or full-fledged programs for development. Well, okay, let's see how to make a website in notepad using html and css.
How to create a website from scratch in HTML in Notepad - step-by-step instructions
And here it is ours keyword– HTML. It is from this language that the creation of a website begins. It is impossible to imagine web development without it. It's like trying to cook soup without water. Don't rush to close the page if you are an absolute zero in html. In this step by step instructions We will create a simple website together, and I will try to explain the pieces of code that we will add to the notepad.
Step 1: Create files
Creating an html website in notepad, you need to start by creating two text document in some empty folder. One should receive the extension .html, and the second .css. The names can be anything. Please note, not site.html.txt, but site.html.
To do this, when saving the document manually, add an extension to it using a dot. We do the same manipulation with the second file, but we give it the .css extension. Oh yeah, don't forget to select the encoding UTF-8.
Step 2. Laying the structure
The files have been created and you can start working. Open the html document. This is where the main work will take place. The building block of this language is tags. special words in angle brackets that tell the browser what to display on the web page.
Let's insert something into our document, otherwise it's completely empty.
Hello, world!
Hello World!
So, we inserted a bunch of tags at once and maybe you don’t understand anything. Try opening the page in your browser. There you will see the words "Hello World" if everything is done correctly. This is, in fact, the simplest web page.
html is a container for all other tags. It contains the entire web page. At the very top we indicated the document type. The head tag is service information about the page. Here we are using the tag
set the name of the page, which will be displayed in the browser line at the top. Next, we set the encoding and included the css file using the tag <link> .</p><p>As you can see, there are paired and single tags. Now I will not dwell on this in detail, it depends on what functions the team performs.</p><h3>Step 3: Planning</h3><p>Now let's leave the code alone for a minute and think. What do you think a typical web resource consists of? Of course, there are many of them on the network and they are all different, but there are some identical structural elements, right? For example, vertical and <a href="https://gtavrl.ru/en/krasivoe-gorizontalnoe-menyu-na-css-plagin-navigacii-po-stranice/">horizontal menus</a>, side columns, headers (the very top where the logo is located) and the footer (the bottom of the site).</p><p>So, let’s plan how to make our first simple website. In this matter, everything needs to start with planning. It is necessary to highlight the structural parts of the future template, what it will consist of. Let's say our simple template will have a header, a body part, a side column and a footer or footer (the same thing).</p><h3>Step 4. Let's begin!</h3><p>This means we need 4 main blocks. In html it is possible to nest an unlimited number of other tags in a paired tag, so I suggest the following method: <br>Create one common container in which all our 4 main blocks will be located.</p><p>So let's get back to the code. We will write it in the body tag, since it represents the future page. You can safely remove the inscription <b>"Hello World"</b>, and write this:</p><p> <div id="main">
<div id="header">This is our hat</div>
<div id="sidebar">This is a sidebar</div>
<div id="content">This is content</div>
<div id="footer">Basement</div>
</div>
</p><p>Thus, we created one large block in which we placed the remaining 4. The block in html is created by a paired div tag, which does not have required attributes, but I immediately added a unique id to each of them in order to design it later <a href="https://gtavrl.ru/en/yarlyki-yandeksa-kak-skachat-russkii-yandeks-brauzer-besplatno/">appearance</a> via CSS.</p><p>Copy this code for yourself and refresh the page in your browser. For now you just see 4 lines of text in front of you, but that’s okay, now we’ll turn them into a website!</p><p><img src='https://i1.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/2-1.jpg' height="89" width="160" loading=lazy loading=lazy><br></p><h3>Step 5. CSS will help us</h3><p>Now let's start designing our blocks. Of course, you need to start with the largest container. We created a css file at the very beginning, but never wrote anything to it. It's time to fix this. Let's add the following code there:</p><p>*( box-sizing: border-box ) #main( width: 810px; margin: 0 auto; border: 5px solid black )</p><p>The first rule sets the behavior for blocks so that padding and borders do not increase their width. Further in the code we refer to the block with the identifier main , to do this, just put a hash and add the name of the identifier. Immediately after this they open <a href="https://gtavrl.ru/en/zanimatelnyi-javascript-bez-figurnyh-skobok-argument-kod-budet-rabotat/">braces</a>, which lists the appearance rules that will apply to the element.</p><p>We set the width of the overall container to 810 pixels, the margin: 0 auto rule sets the block to the center, that is, our site will be displayed nicely in the center, and not pressed to the left edge. Last thing <a href="https://gtavrl.ru/en/eksperimenty-s-obvodkoi-v-css-svoistvo-border-radius-okruglenie-uglov/">border property</a> adds a black solid border to each side of the block.</p><p><img src='https://i2.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/3-1.jpg' height="98" width="181" loading=lazy loading=lazy><br></p><p>Well, we have created styles for the main container. On the web page we still display 4 lines of text, but in a black frame. Go ahead.</p><p>Now is the time to customize the appearance of the four main building blocks of our page. I will immediately provide the code and comment on it below.</p><p>#header( height: 100px; border-bottom: 5px solid black ) #sidebar( width: 200px; height: 500px; float: left; border-right: 5px solid black ) #content( width: 600px; float: right; height : 500px ) #footer( height: 75px; clear: both; border-top: 5px solid black; )</p><p>As you can imagine, I'm simply referring to elements with different IDs, describing them from top to bottom. First, the styles are set for the header - I set the height to 100 pixels and a border at the bottom so that it is separated from the rest of the blocks.</p><p>But then things get more interesting. The fact is that by default blocks are displayed from top to bottom if you simply write them in html code and do not set any additional rules. But the side column is only a side column, to be displayed to the side of the main part of the page. And how to do it? Look, we set the sidebar’s height, width, frame and one more property (float: left).</p><p>This rule means that the element will be pushed to the left edge of the parent (that is, the parent element - the #main block). Great, now we’ll set the same property to the block with the content and it will also be pressed to the left edge, but after the side column.</p><p>Of course, the content gets more width, because that’s how it should be, but we set the height the same. On a real website, there will usually be a lot of information in the main block, so you don’t have to set the height at all. The same goes for a sidebar if information is constantly being added to it. But for the sake of example, we explicitly specified the height so that the sizes of the blocks can be clearly seen.</p><p>Finally, it remains to describe the last block - <b>footer</b>. It gets a small height, a frame with a height and another new property for us. This is the clear property with the value both . Why write it? We have pressed the two previous blocks to the left edge. They became the so-called floating blocks, but by default ordinary blocks may not notice floating blocks and run over them.</p><p>To prevent this from happening, our basement received the following command: they say, look, it’s an ordinary block, there are two floating ones above you. Notice them and position yourself lower than them. This is the command essentially given by the clear: both property, which forces a regular block to be positioned below all floating ones.</p><p>Great, now refresh the page in your browser. Well, it’s already much more like a website, at least in structure.</p><p><img src='https://i0.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/sajt-v-bloknote.jpg' width="100%" loading=lazy loading=lazy></p><h3>Step 6. Decorate the site</h3><p>The next, very interesting stage - let's add some colors to our site. Let him have more than one <a href="https://gtavrl.ru/en/kak-v-paint-sdelat-fon-belym-kak-sdelat-prozrachnyi-fon-v-paint-kak-ubrat/">White background</a>, but something more interesting. You can set the background in two ways:</p><ul><li>General background for the entire site at once, assigning it to the common container #main</li><li>If each of the main blocks should have its own shade of color, then you need to set a color for each separately. But it’s better not to get carried away too much - a red header, green content and a yellow basement will not look very good, I’ll tell you right away</li>
</ul><p>I suggest doing it using the first method. I found a nice light blue shade in an online service, which I propose to use as the background of the site. Add the following property to the general container styles:</p><p>#main( background: #B3C1E6 )</p><p><img src='https://i1.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/fon.jpg' width="100%" loading=lazy loading=lazy></p><p>We update the page and make sure that our site has a nice light blue color scheme. Now I propose to advance the design level a little - let the background of the header and footer be darker than that of the other blocks. You can add the following lines of code:</p><p>#header, #footer( background: #9091DA )</p><p><img src='https://i1.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/4-1.jpg' width="100%" loading=lazy loading=lazy></p><p>Here we applied <a href="https://gtavrl.ru/en/kuda-sdat-staryi-lampovyi-televizor-za-dengi-akcii-pri-pokupke/">new technology</a>– two blocks separated by commas and <a href="https://gtavrl.ru/en/mnozhestvennyi-bekgraund-mnozhestvennye-fony-i-obvodka-s-ispolzovaniem-css2-novyi-sposob-mnozhestve/">new background</a> will apply to both of them.</p><h3>Step 7. Working on the header</h3><p>Further work will consist of decorating individual blocks to a more attractive state. Let's start with the header. What do we usually have in our hat? Right, <a href="https://gtavrl.ru/en/redkie-i-krasivye-nazvaniya-grupp-prikolnye-nazvaniya-dlya-grupp/">beautiful name</a> website and logo. This is what we will add.</p><p>I suggest starting with the logo. Since we create the site with <a href="https://gtavrl.ru/en/sozdanie-html-stranic-s-pomoshchyu-php-html-css-php-javascript-sql-chto-i/">using html</a>, place the logo of this language in the left corner of the header. I found this cute logo on the Internet.</p><p>It needs to be downloaded and placed in the same folder where the html document is stored. <br>Now let's look:</p><p>#header( background: #9091DA url(html.jpeg) no-repeat 5% center )</p><p>I called the picture html, and its format is jpeg, so this is the entry. Then we also specified the following commands: the background image should not be repeated, but should be placed with a 5% horizontal offset from the beginning of the block and vertically centered. The horizontal position is always recorded first, and then the vertical.</p><p>Naturally, if your picture is called differently or has a different format, then you must slightly change the given code. Great, we have a logo. It's time to remove the inscription - this is the site header and put it instead <a href="https://gtavrl.ru/en/kak-napisat-krasivyi-zagolovok-luchshie-zagolovki-dlya-vashih-publikacii/">nice title</a>. Remove the text from the header and paste it there <a href="https://gtavrl.ru/en/html5-novyi-element-dialog/">new element</a>:</p><p> <div id="header">
<div id="title">Name of the site</div>
</div>
</p><p>Now you need to formalize it:</p><p>#title( font-size: 32px; float: left; margin-left: 200px; font-family: Tahoma; color: yellow; padding-top: 20px; text-shadow: 0 0 5px orange; )</p><p>We've set a decent amount of styling: font size, font family, header left alignment, left padding, color, top padding, and text shadow. There is no point in explaining how each property works now, so just copy the code and paste it into the style sheet (css file).</p><p>That's it, the simple hat is ready. Of course, on a real website it may contain some other links, addresses, etc. Well, let's add something for realism. This html code must be inserted into the content of the site header.</p><p> <ul id="about">
<li>About Us</li>
<li>Blog</li>
<li>Feedback</li>
</ul>
</p><p>It generates a list of their three links. In reality, they should lead somewhere, but for us they are just empty links. We will also create a list and links in it.</p><p>#about( float: right; list-style: none; margin-right: 50px ) #about a( color: yellow; )</p><h3>Step 8. Making a menu in the side column</h3><p>Typically, the side column contains the site menu and many other widgets. Let's make a simple menu there. Again, the list with which we have already displayed links in the header will help us with this, but since the main menu is supposedly larger, there will be more links.</p><p> <ul class="menu">
<li>Menu item1</li>
<li>Menu item2</li>
<li>Menu item3</li>
<li>Menu item4</li>
<li>Menu item5</li>
<li>Menu item6</li>
</ul>
</p><p>Menu( list-style: none )</p><p>Actually, I wrote down only one rule here - I removed the markers from the list items, everything else is fine. You can also add a title before the menu and design it somehow. You can do this yourself. Headings are written in paired tags <h1> - <h6>, where the first is the largest (article title) and the last is the smallest, often it is not used at all. For the menu title in the side column, it is optimal to use <h3>.</p><h3>Step 9. Design the content block</h3><p>Well, why formalize it there? You need to add some text to make it look like a real website with an article.</p><p> <h1>Article title</h1>
<p>And here there will be some article...</p>
<p>The content in the article is divided into paragraphs and subheadings...</p>
<h2>Subtitle of the article</h2>
</p><p>Any content can be inserted into a content block. The paragraphs in it form the main content, and the h1-h2 tags form the headings and subheadings. Tag <b>h1</b> must be the only one on the page.</p><p>Registration in <a href="https://gtavrl.ru/en/chto-takoe-vneshnie-mehanicheskie-vozdeistviya-trenie-vneshnee/">in this case</a> is to determine the color of the text. For example, you can put brown. Headings can be highlighted in a slightly different shade. I won’t give any code here, you can figure it out yourself.</p><h3>Step 10. Decorating the basement</h3><p>To be honest, I have no desire to shove anything into the basement right now. On real sites, it contains copyright information, sometimes it contains menus and links to other sites. I'll just write the word copyright there and center it like this:</p><p>#footer( text-align: center )</p><h3>Step 11. Oh no, no more steps</h3><p>That's all, actually. Process of creation <a href="https://gtavrl.ru/en/vstavka-slaidera-v-shablon-wordpress-prostoi-i-funkcionalnyi-slaider-na/">the simplest template</a> on html can be considered complete. We have a logo, a site name, a menu, an article, a footer. In general, this is a very primitive site, but still a site.</p><p><img src='https://i1.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/sajt-tselikom.jpg' width="100%" loading=lazy loading=lazy></p><p>Of course, the site looks in such a way that you want to never look at it again, but this does not change the essence. Looking good is the job of a web designer.</p><h3>What should we do with it next?</h3><p>The purpose of this article was simply to show you how to create a simple website using html and css. You can work on its design and the result may be something attractive. But you still need to remember that this is a static site. If you add new pages to it, then this is done manually, by creating new html documents.</p><p>This method of managing a website is a thing of the past, although it has its advantages. To put a website online, you must upload all the html files, style sheet and necessary images to some hosting, paid or free. You also need to register the name of the site so that it is called something. A third-level domain can be obtained for free from many companies, but you will have to pay for a second-level domain <b>(.ru, .com, .ua, etc.)</b></p><p>What we did with you during this article is called website layout. If you want to manage your site using a convenient <a href="https://gtavrl.ru/en/besplatnyi-onlain-html-redaktor-ochistitel-i-konverter-vizualnyi/">visual editor</a>, then the already made layout will need to be integrated with any of the popular engines. Best with <b>WordPress</b>.</p><p>This is a separate topic - integration is in many ways much more complicated than the layout itself. To learn how to create websites for the engine, you need to take a good training course. <a href="https://gtavrl.ru/en/programma-dlya-polnoi-sistemnoi-informacii-programmistan-besplatnye/">Free information</a> on the Internet you may not have enough. I described the process of creating a site on WordPress, but there you will not find information on how to integrate <a href="https://gtavrl.ru/en/lending-peidzh-shablony-na-html-5-shablony-landing-page/">html template</a> with an engine.</p><p>The article presented the so-called block layout method, that is, we placed all the content in blocks. Today this is still the most popular method. In general, it is advisable to use HTML5 tags in the process rather than just blocks, but for the sake of simplicity, the simplest option was used in this article.</p><p>I hope you have at least a minimal idea of how to make an html website in Notepad or any other text editor.</p>
<p>Instructions</p> <p>Everything that a visitor sees on the Web is recreated by the browser from the instructions sent by its server. These instructions are written in HTML (HyperText Markup Language) and the files in which they are stored are marked as htm and html. You can create such a file in a regular text editor - this will be the first step of creating <b>web pages</b>. Open, for example, <a href="https://gtavrl.ru/en/kak-naiti-standartnye-gde-nahoditsya-bloknot/">standard Notepad</a>, and create <a href="https://gtavrl.ru/en/fail-chm-pustoi-ne-otobrazhaetsya-fail-chm-tak-pochemu-voznikaet/">empty file</a> named index.html. When you type a website address without specifying a specific <b>page</b>(for example, ), first of all searches <b>page</b> with exactly this name - index.</p> <p>HTML instructions are called “tags” and each of them is enclosed in parentheses like this:<>. Some of the tags are paired, that is, they consist of an opening and closing tags, and information is placed between them. For example, a tag that tells the browser that the code below is in HTML, like this: <HTML>The closing tag, indicating that the HTML code is complete at this point, is written like this:</HTML> As you can see, the closing tag differs from the opening tag by the presence of a slash after the opening bracket (</).</p> <p>All the code you put between the tags <HTML>And</HTML>, should be divided into two parts - the header and the body of the document. The opening and closing header tags are written like this: <HEAD></HEAD> This is the “service” part of the page - information for the window title, keywords and descriptions for search robots, style descriptions, scripts, etc. are placed here. Enter the title of the page window into it: <TITLE>This is the title! The full text of your HTML page at this point should look like this:
