What is a web page and what are the ways to create one? Basic HTML Terms

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. 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.

How to create a page

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.

The file must be named index.html. End ".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'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 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.

Tags

With your permission I will go to NotePad program++. It has a number of advantages compared to with 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.

Basic

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.

Picture

Next comes the tag img , that is, image, picture. Square bracket opens, all the basic information about the image is entered into it, 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 desired image, and in which direction to look - you write yourself.

Formatting text

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.

Links

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. .

After the main part of the page is written, you close the tag body , since the body is finished. And indicate that you stop using it for today html .

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

I would also like to recommend you a video course that tells you how websites are designed. The whole process is shown with 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, a design is prepared, then the pages are laid out, the software part is written, 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 learn also: how and why you need a website engine, what block layout and modular grid are, how to write websites correctly, and much more.

See you again and good luck!

06.09.17 1.5K

What is a web page? This is a document written in hypertext markup language ( HTML), which can be viewed using a browser. The web page is accessed by entering the URL.

A web page may contain text, graphics, and hyperlinks to other pages and files.

How to open a web page

A browser is required to view the web page ( for example Internet Explorer, Edge, Safari, Firefox or Chrome). In your browser, you can open a web page by entering the URL in the address bar. For example, by entering " https://www.computerhope.com/esd.htm", you will open the ESD Computer Hope page.

If you don't know the URL of the site you want to visit, you can use a search engine to find the web page or use Site Search.

When was the first web page created?

The first web page was created in CERN by Tim Berners-Lee August 6, 1991. Before that, you can visit and view the first site and the first web page at http://info.cern.ch/.

What is the difference between a site and a web page?

A website is a place that contains more than one web page. For example, our resource is a site that includes thousands of different web pages, including the one you are reading now:

In the URL example above, "url.htm" is the web page, it is always the last part of the URL. For URLs that do not end in .htm, .html, .php, .cgi, .pl, or other file extension, the server loads the web page index.htm by default. For example, there is no web page for the contact page URL. In this case, the default index file is loaded from the /contact directory.

Web page examples

We have already mentioned that browsers are used to view web pages. A web page consists of several elements, including CSS, images, and JavaScript. The body of the web page is created using HTML. This code can be created using an HTML editor, written by a human, or generated using server-side scripts. Typically, a human-created web page ends with a .htm or .html extension. For example, this page has the file name " webpage.htm" Pages generated by the script may end in .cgi, .php, .pl, etc.

What elements does a web page contain?

Below is a breakdown of the main elements so that web designers can understand what the logical web page structure:

1. The site title, logo, or company name is almost always found in the top left corner of every web page. It's also a good idea to use a tagline or short description of the page to give new visitors an idea of ​​the site. This web page element is usually a link that leads to the home page;
2. The search bar allows visitors to quickly find a web page. It should be present on every page;
3. The navigation bar or menu is usually found at the top or left side of every web page. It should include links to each of the main sections of the site;
4. Banner advertisements can appear in different places on a web page. They are typically displayed at the top, left, right, or bottom of a web page, or included in the main content;
5. Social buttons allow visitors to share a link to a web page on social networking sites;
6. In created web pages, breadcrumbs help the visitor understand where he is, as well as move to other sections of the site;
7. The title should be at the top of every web page. It is created using HTML tag

   .

8. The opening paragraph is one of the most important elements of a web page. It should interest the visitor to read the contents of the web page. One way to grab visitors' attention is to insert an image next to the opening paragraph;
9. Every web page should be broken down into lower-level headings that allow the visitor to easily scan the content and find what's most interesting to them on the page. When creating a web page, this can be done using HTML tags

   …

   ;

10. It's a good idea to provide visitors with a link or button that redirects to a feedback form so they can tell you whether the web page was useful to them or not;
11. Additional information and tools, such as a button to print the page, may also be useful to users;
12. The footer should include additional information that is important to the company or site. As well as links to other web pages;
13. Copyright and any legal or confidential notice must also be posted on all web pages. In web page design basics, this element not only can link to relevant legal information. It also indicates that visitors have reached the end of the web page;
14. A Top of Page button can help visitors quickly navigate back to the top of a web page to access menu links.

What can users do on a web page?

Most web pages have interesting hyperlinks that you click to find more information. You can also listen to music, watch videos, make purchases, chat and much more.

In this article, for beginners and ordinary users, I will look at what a web page is, as well as the nuances associated with it.

Today the Internet is already commonplace, accessible for use even by the most novice users. The Internet provides access to entertainment resources, communication sites (for example, social networks), search engines, and much more. However, few people even have the slightest idea what a “web page” is. This is neither bad nor good, but it is still useful to know at least some basics, which will be discussed further.

Note: I also advise you to read the article on what the web is.

First of all, you should know that all sites, blogs, forums and other Internet resources consist of these same web pages. Moreover, these pages are interconnected through Internet links, by clicking on which in the browser you go from one page to another. This article is also a web page. Moreover, all the contents of this page are called content. That is, text, pictures, etc. Even video and audio are included in the concept of content.

Thus, web page- this is a special document containing a number of meta-data for display in the browser (and other technical things), as well as content (text, pictures, etc.) that can be viewed, listened to, etc.

Most often, web pages are divided into two types:

1. Static web pages. This phrase is periodically misunderstood by users and all because of the presence of the word “static”. The point is that the word "static" is only there because this entire special document remains the same. In this case, the page can be animated (blocks move smoothly and other beautiful things), it can contain video, audio and other media elements. However, these pages are a regular, immutable HTML document, as well as accompanying files that are downloaded by the browser for correct display web pages (special files CSS styles, allowing you to format the display of content, pictures, video, audio, etc.).

2. Dynamic web pages. Unlike the previous type of web pages, this type stipulates that the content of the same page may change. For example, pages in forums where people leave their comments. Various pages search and many other examples. It is worth noting that these pages are also an HTML document with accompanying files, but their content is generated separate computer, which is usually called a server. At least once, you’ve probably heard about languages ​​such as PHP, Asp.Net C#, Java and others. It is with their help that pages are generated.

Pages can also be divided according to their purpose (I will give several options):

1. Personal page. This is a web page whose information relates to a certain person. It should be understood that such a page may or may not be official. Treated as to a real person, and to the fictitious. For example, in forums there are pages called “user profile” - this, in fact, is personal page. If we consider another example, then your page in social network can also be called personal.

2. Media pages. On this kind of web pages, the content usually contains some kind of media information in a predominant form. For example, various galleries with photographs, collections of audio or video.

3. Information web page. In principle, any web page can be called informational, since it contains some content. However, it is usually customary to call information pages those pages whose main purpose is to provide information to the user. Moreover, the information can be associated with anything. For example, this article - good example information page.

4. Search page. This page is designed so that you, as a user of the site, can search for the information you need. Typically, such a page contains fields for entering phrases that will be searched, and various controls for customizing the search scope (for example, search the entire site or only in comments).

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 virtual host local web server.

And, for this we need, as shown in the picture: a local web server, text editor, structure description language HTML web pages and CSS styling 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
• Source files site

Creating a virtual host on a local web server

A regular web page is a text file in HTML format therefore, such a page is also often called an HTML page. And before we start, first of all we will 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 an assembly Denwer programs(Denver). 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 local server(due to possible confusion in the future, you should not assign real hostnames domain zone, such as "ru", "com", etc.

In this folder "newsite.local" we will create 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 does not exist) through 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 home 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 site with an address that indicates domain name, without any other directories, browsers always open the file located in 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 Notepad editor++ when opening new documents.

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

Now let's create 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, through the "File" menu, select "Save As", enter the file name "index.html", indicate 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, additional configuration file".htaccess" of the web server specify the desired encoding.

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 next 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 correct work web server and correct installation 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.

Exists large number various reference books, video courses and others educational materials, which help in mastering HTML language. Here on the site there are also a number of video courses devoted to this topic, both paid and free options. 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 this one information resource as an online reference "http://www.puzzleweb.ru/html/all_tags.php". Its peculiarity is that it provides not only sufficiently detailed background information on the main languages ​​used in website building, such as HTML, CSS, JavaScript, PHP, but it contains self-instruction sections that very concisely, but at the same time quite informatively explain the basics of these languages ​​with illustrative examples.

You can also note the online reference resource "https://webref.ru/", which contains quite full information according to 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 learn a lot useful information and it can also be useful when writing web pages.

In general, everyone will definitely choose for themselves, from all the variety 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 how our framework will look, built on the basis of the site design layout created earlier in the article Creating a web page design layout.

2. "utf-8" />

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

4. "wrapper" >

   Cap

   Rotator

   Main content

   Sidebar

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 communicate to the browser and search engines information about the document, 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.

A website, often abbreviated as a site, is nothing more than a collection of logically interconnected web pages, or simply one page. Site pages are accessible on the Internet using the HTTP or HTTPS protocols. A website has its own place on the Internet, determined by a personal address for each site, which is usually called a URL. Any website has its owner; the owner can be either an individual or a legal entity.

The website consists of pages

A website consists of pages united by a common root URL and, as a rule, a common logical structure, theme, layout (design) and technical device. In turn, the World Wide Web is nothing more than a collection of all websites. Web pages are text files written in the hypertext markup language HTML or XHTML.

When viewing a web page, in a special program called a browser, HTML files are downloaded to the user's computer. Once loaded, the browser displays web pages on the user's screen. Various devices can be used as hardware for accessing the Internet in order to view the contents of web pages: a personal computer, a PDA, some models of game consoles and other devices, all of these devices support HTML / XHTML language standards and web pages are displayed identically on them .

The HTML / XHTML language makes it possible to format pages, place text, hyperlinks, tables, pictures and other objects on them. A CSS style sheet that can be used in HTML documents gives additional options for creating the appearance of web pages.

JavaScript and some other scripting languages

On web pages you can also use JavaScript and some other scripting languages ​​supported by the browser, and add interactivity to the web document. Hypertext links, or hyperlinks for short, are used to link web pages within a site and link between different websites on the World Wide Web. If a hyperlink is used to link pages within a site, it is called an internal link, and if it links different sites, it is called an external link.

Site pages

Pages on a website can be static, that is, they are stored on a web server in the form of immutable files, or they can be dynamic, that is, generated directly on the server by a special program, which is also called the site engine. The site engine can provide a wide range of capabilities for changing the content of web pages, adding new web pages, and performing other actions to configure the website and edit information on it through a web-based administration interface, which is called a content management system or CMS.

Creating a website is a labor-intensive process that combines the work of different specialists: web designers, programmers, HTML layout designers, optimizers, managers, journalists to fill the site with information, etc. The time and cost of creating a website depends on the degree of complexity of the project, its structure and the quality of the design.

A little history of website development

The world's first website was created on August 6, 1991. American Tim Berners-Lee posted a publication on the website about World Wide Web technology. The basis of World Wide Web technology is the HTTP data transfer protocol, the hypertext markup language HTML and the URL addressing system. The site also described other basic principles of the Internet, such as the operation of servers, web browsers, etc. The site, created by Tim Berners-Lee, also became the world's first Internet catalogue, because... it later contained links to other resources of the then Internet.

The necessary tools for the site to work were prepared even earlier; at the end of 1990, the first browser appeared, which was called WorldWideWeb; it additionally included the function of a hypertext editor. Tim Berners-Lee also prepared the first web server based on NeXTcube.