Menu
homeConnection

How to make a page in html. An example of creating an html page in notepad

MOSCOW INSTITUTE OF OPEN EDUCATION
DEPARTMENT OF MATERIAL AND INFORMATION TECHNOLOGIES

Distance course materials
"Information technologies and education"

Polilova Tatyana Alekseevna
[email protected]

How to create a web page

The easiest way to create a web page is to use Microsoft Office tools. The latest versions of this package provide the ability to convert a regular document into HTML format with good code quality.

Word Features

A document prepared in the Word text editor can be easily converted into a web page. However, it will not look as attractive as you would like if additional steps are not taken. Let's look at a few examples.

Let's take some text.

We convert the document into a web page using the Save as web page... operation (called from the main menu - File item). Then the html representation of the document will look like:

The first thing that catches your eye is that the text takes up the entire screen space. The string length is too long. For comfortable reading on the screen, the number of characters per line should be in the range of 50-65.

Using a table

In this case, you can do it quite simply: create a table in the source document and place the desired text in it. You can set a frame in the table. Then the appearance of the web page will be much improved, and the page will look more attractive in the browser.

Background and style

It is advisable to choose a background that is not too bright so that the text can be read clearly on it. Such a background in the proposed list is, for example, Rice paper. The page view has changed noticeably:

Inserting a picture

You can add a picture to a document, taking it, for example, from a collection of clips.

You need to right-click on the picture, perform a copy operation, and then in the document specify the location for the picture and perform the paste operation of the copied object.

If you insert a picture inside a paragraph, then it is better to change the properties of the picture by setting the text to wrap around the picture (you need to select the main menu item Format and then Picture):

This will not create any extra empty space in the document.

Finally, you can add a frame and shadow to the picture using the buttons on the Drawing panel - Line Type and Shadow Style. Such nuances significantly add expressiveness to the page.

If the Drawing panel is not on the page, you need to install it by selecting the main menu item View and then Toolbars and Drawing.

Ticker

Word allows you to add other design elements to a web page, such as a “creeping line”. To use this feature, you need to open the web components panel on the screen (from the main menu - View, then Toolbars and Web Components). Clicking the Ticking Line operation button opens an additional window for specifying the text of the creeping line parameters.

As usual, you can change the font and attributes of a line: font size and character color. The web page will look like this on your screen:

We have given an example of only a very modest set of design techniques with which you can design a web page based on an existing document in Word format.

Using design templates

If you are starting to create a page from scratch, you can use the Web Page Wizard, which will help you create a document in a dialog. Or you can use a ready-made page design template, choosing it from a fairly representative set. To do this, in the Create operation, select the Create using a template mode and then General templates. A form will appear on the screen in which you need to select the Web pages tab:

The user can choose the color and style independently, for example, using the Format - Theme settings.

Creating hyperlinks and bookmarks

The last issue that we plan to consider in this section is the creation of hyperlinks in a document.

If we want to refer in a document to another document or another site on the Internet, then such a hyperlink can be made like this: select a piece of text (a word) in the document and perform the operation Insert - Hyperlink... A form will appear on the screen in which you specify the hyperlink address. The address can be entered explicitly or the file can be selected in the window.

Here you should remember that the address of the selected file on your computer may change when you create your site. Therefore, the implicit method of specifying an address is only suitable if the structure of your folder on your computer and on the Internet site is the same.

If a hyperlink should refer to another part of the same document, then you must first insert a bookmark at the beginning of the desired fragment. You need to perform the operation Insert - Bookmark, and enter the name of the bookmark in the form that appears on the screen.

Web Presentation in PowerPoint

PowerPoint is a program designed for creating presentations on a computer. However, it has the function of converting a prepared presentation into a web format.

You can open the prepared presentation and perform the operations (from the main menu) File - Save as web page. As usual, you need to specify the name of the web presentation in the window that opens. As a result of converting the presentation, a file with the specified name and extension .htm and a folder of the same name with additional materials will be created.

If you now call the web presentation from the browser, you can see the result of the conversion on the screen.

A special line is created at the bottom of the screen, where buttons for moving to slides and buttons for setting various parameters for viewing presentations are located.

The presentation can be viewed with the slide structure shown. But if this information is not of interest, then the field on the screen reserved for displaying the structure can be removed (operation expand/collapse structure in the bottom line).

Using the Show Stores button, you can view the slides in full screen.

Creating hyperlinks

In a presentation, you can create hyperlinks that link objects on a slide, for example, to other slides. In this way, it is possible to create a hypermedia structure that will naturally correspond to the ideology of the Internet. Let us explain this technique with an example.

Let us have several prepared slides on the topic of the flora of Lake Baikal, compiled from a collection of photographs. Let's create a new slide - a table of contents for the collection.

If the new slide is not the first in the sequence, then you need to go to the slide sorter mode (from the main menu using the View - Slide Sorter operations) and drag the new slide to the beginning of the collection.

Place small copies of all photographs on a new slide. The easiest way to do this is in the most straightforward way: copy all the photographs in the collection sequentially onto an empty slide, reduce their size and place them, for example, in two lines. The pictures can be further decorated with frames with shadows. You can add the title of your presentation to the table of contents slide. The presentation view in Slide Sorter mode is shown below:

Let's switch to the normal slide viewing mode (commands View and then Normal). On the table of contents slide, select the photo and execute the command Insert - Hyperlink. In the window that opens, set the transition via hyperlink - the number of the slide with a large photograph from which the smaller sample for the table of contents was copied.

Similarly, we will link other pictures on the table of contents slide with the corresponding slides with the original photographs.

If we now run our presentation, it will work like a hypermedia structure: when you click on a small photo, it will go to a slide with a larger photo.

It remains to improve our structure quite a bit. Let's add an arrow to each slide with a photo in its upper left part (AutoShape on the Drawing toolbar), and make a hyperlink from this arrow that will go to the table of contents slide. Now the movement through the hypermedia structure we have created will become “two-way”: from the table of contents you can go to slides with photographs, and from any slide you can return to the table of contents.

After converting the presentation to web format, our first page will look like this:

Clicking on a picture from the menu will take you to a slide with a large photo, and clicking on the arrow (at the top left of the slide) will take you to the collection's table of contents page.

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.

How to create a website in notepad
To begin with, you need a little familiarity with the theory and general terms. The vast majority of website pages are ordinary text documents that are designed in a special way - hypertext markup language, abbreviated as HTML. Some people classify HTML markup as a programming language, but this is not true.

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

So the tag starts with< после которого следует название тега table и вся конструкция завершается знаком >. Tags come in pairs, like text in bold And and unpaired as line feed
. In case of using paired tags, it is mandatory to use it as an opening tag , and closing. The closing tag is a tag with a slash /.

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

There are about a hundred tags in total, but the ten considered are already enough to design a simple website page in a notepad. Basic document tags , , , <body>are distributed in a strict order. Inside a tag <body>the remaining descriptors may be in different orders within the HTML language standards. The easiest way to understand this is by creating a simple web page. <ol><li><span>Launch Notepad and in the very first line, set the element<!DOCTYPE html>, which tells the browser how to interpret your document. <p> <!DOCTYPE html></p></span></li><li><span>Make a line break and add a paired tag <html>. Translate the closing tag</html> two lines down. <p> <!DOCTYPE html><br><html></p></span></li><li><span>Add a paired tag <head>in the line between the tags <html>and translate the closing tag</head> two lines down. <p> <!DOCTYPE html><br><html><br><head></p><p></head><br></html></p></span></li><li><span>In line between tags <head>And</head> write a pair tag <title> in one line.






  • Enter the title of your web page between the tags And. For example, this one.




    My first page of the site

  • Place the cursor on the line after the closing tag and perform a line feed. Enter the paired tag in the empty line that appears .




    My first page of the site


  • Make a double translation between inside tags And. In the line that appears, enter the paired title tag

    . Type inside the tag

    page subtitle.




    My first page of the site


    About me



  • After the closing title tagmake a line break and set paired paragraph tags in the new line. Write text between them. For example, like this.




    My first page of the site


    About me


    My name is Ivanov Ivan. I'm creating my own website.



  • Enclose the first and last name in a paired tag to highlight them in bold.




    My first page of the site


    About me


    My name is Ivanov Ivan. I'm creating my own website.



  • After the closing paragraph tag

    perform a line feed and enter a paired tag in the new line

    . Enter some text between the tags.




    My first page of the site


    About me


    My name is Ivanov Ivan. I'm creating my own website.


    My successes



  • After the closing subtitle tagmake a line break again, enter paired paragraph tags and write arbitrary text between these tags.




    My first page of the site


    About me


    My name is Ivanov Ivan. I'm creating my own website.


    My successes




  • Of the tags listed in the article, two remained unexplored - line feed
    and the most important tag for creating links     . Let's apply them. Before the last closing tag, enter a descriptor
    , and between
    And

    type design. You should get the following.




    My first page of the site


    About me


    My name is Ivanov Ivan. I'm creating my own website.


    My successes


    Basic HTML syntax has been mastered and the first page of the future site has been created.
    In the learning process, materials from the website were used



  • Between quotes in a tag enter the address of the page to which you will link. Before the tag you can enter the word Link, and between the tags And enter the text that will be displayed on the page.




    My first page of the site


    About me


    My name is Ivanov Ivan. I'm creating my own website.


    My successes


    Basic HTML syntax has been mastered and the first page of the future site has been created.
    In the learning process, materials from the website were used

    Link: website



  • At this point, the creation of a simple page for the site can be completed. In principle, it could also be completed in step 9, but if you are serious about learning the HTML language, then additional practice will not be superfluous. Save the page with the *.html extension and you can open it in any browser to view the results of your work. If everything is done correctly, you should see something like the following.
    • If after reading the article you are still determined to create a website, then be sure to familiarize yourself with the full syntax of the HTML language, and also learn the use of cascading CSS styles to design pages.

    Every novice webmaster should know how to create html page, and this is done very easily and simply. I can confidently tell you that after you read this article, you will create html pages without any difficulties.

    You can write html code in any text editor (even notepad), but I recommend that you first use such a wonderful editor as notepad++. It is very convenient and easy to use. You can download it from the official website https://notepad-plus-plus.org.

    The main advantage of this editor is that it has code highlighting. Believe me, this is very convenient, because... You can immediately see where the tag opens and where it closes.

    Open the program and how did you notice a new file with the name new 1, was created automatically.


    Stages of creating an html page

    Now from the new file we create html document in the following way:
    1. Go to the file menu and select the item save as… or press hotkeys ( Ctrl+Alt+S)

    2. In the window that appears, select the location where we want to save the file.

    3. In the field file name we write index and choose file type Hyper Text Markup Language file (*html; *htm; *shtml; *shtm; *xhtml;*hta).


    Once selected file type, is automatically inserted at the end of the file name


    Close Notepad++ and go to the specified folder where you saved the file. A file was created there index with the html extension and with the browser icon that is installed by default. When you double click, the file opens in your browser. My default browser is Opera, so the saved file looks like this:

    After opening the file in the browser, we do not see anything because our file is empty, there is not a single line of html code in it. Let's correct the situation by writing a couple of lines of code in the file. To do this, go to the folder with our file, right-click on it and select the item in the menu that appears .

    The file will open in the Notepad++ editor. Now let's write the following code in the file:

    html file   

    Hello World

    There is also another way to save the file, you need to click on the floppy disk icon located on the toolbar.

    Lesson 2.

    Let's create the first html page.

    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 the following text into it:

    <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 at the moment we have a regular text file with a set of characters. In order for our browser to display the text page we created as a web page, we need to make it a file with the html extension.

    To do this, click the “File” button in the top menu, 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 the desired file type, in 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 characters that we inserted, the browser displays completely understandable information on the screen.

    2016-11-06


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

    Hello dear visitor!

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

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

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

    Creating a virtual host on a local web server

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

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

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


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


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

    Creating a web page file and testing the local web server

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

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

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

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


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

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


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


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

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

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


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

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

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


    Skeletonizing an HTML page

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

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

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

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

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

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

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

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

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

    Now, let's move on to creating the skeleton of the HTML page, i.e. to the formation of its main blocks. Below is shown 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" />

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

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

    4. "wrapper" >

      A cap

      Rotator

      Main content

      Sidebar

      Basement

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Regarding the paired tag

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

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

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

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


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

    Site source files

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