And the last tag in our code is - . Also a paired tag ( And), inside which is the entire visible part of the site, i.e. texts, pictures, links, in general information that you want to place on the site.

In the next lesson we will talk about the types of tags and the rules for writing them.

Or, or better yet, all four, because many HTML elements display differently in different browsers, and it's best to keep that difference under control.

In addition to the browser, we will need at least some kind of text editor, for example, Notepad from Windows or Notepad, but ideally Dreamweaver. The program is needed to prepare HTML files, and the browser is needed to view and control what has been produced. Using these tools, we will create a WEB site on our own local computer, after which we will place it on one of the WWW servers on the Internet, thus making your WEB pages accessible to the whole world.

Preparing to create a WEB site

As an example, let's prepare WEB pages for a company. Let's call it "SD Company", let's say that it works in the field of automatic control systems. The purpose of the WEB site is to tell the world about the company, its scope of activity, and to find partners and customers.

Our WEB site files require a separate folder.

Make a folder named WEB on any hard drive of your computer. Now let’s launch the Notepad program and get to work.

Open a program, for example Notepad, by clicking the Start button on the Taskbar and selecting Programs - Accessories - Notepad from the menu that appears.

You can use any other text editor. But in this case, you should save the file as plain text to avoid including third-party formatting marks in the WEB document.

First, let's introduce the main tags that determine the structure of any HTML document. Let us remind you that in HTML code you can use any case of characters - upper or lower.

1st tags

Enter subsequent main tags using the keyboard, placing any of them, not counting the closing tag, in the newest line.

To enter paired tags, you will be able to use copy and paste operations via the Windows clipboard, followed by the addition of a slash /.

Let us remember that the 1st And last tags mean the beginning and end of the document, element … defines the WEB page title, element …- the body of the document, and in the element We will now indicate the title of the WEB page.

Between the opener use tags to insert the title of the document - SD Company. This element should look like this:

Let us remind you that the title of a WEB page should be small and show its content to the greatest extent.

Our next task is to insert into the body of the document between the tags … a small text greeting to the guests of the WEB page.

Insert a blank line between the tags And and enter the following text in it:

Welcome to the SD company page! Here you will learn about our activities, about the software products of our company and about the equipment that we produce.

For each WEB page you can find the background color and text color. This is done using the bgcolor and text attributes of the opening tag. . There are two options for defining a color as an attribute value:

• verbal indication of the color name, for example, white. HTML provides sixteen such names;
• a numerical designation in hexadecimal notation, for example, "#ffffff" - snow-white, which shows how the color is formed from the main colors - reddish, greenish and blue.

Coloring the first WEB page

Naturally, verbal indication of color is more comfortable and understandable. On the other hand, numerical designations provide more ability because they allow you to actually indicate any of the 16,777,215 colors, while verbal designations are limited to only sixteen colors.

Let's list some color names: black (dark), gray (grayish), red (reddish), green (greenish), aqua (blue).

As an example, we use a blue color for the background of our WEB page, and a yellowish color for the text.

Insert it into the opening tag attributes bgcolor="blue" and text="yellow". This tag should look like:

In addition to specifying the color, you can also use a sketch prepared in advance for the background of the WEB page. But we will talk about this in the future.

In the Notepad program window, select the menu command File - Save. The Save As dialog appears on the display.

Open the WEB folder you created earlier, in which all WEB site files must be saved.

In the File name input field, enter other.html - that’s what we’ll call this file.

Please note: you must specify the extension of the HTML file name so that the browser can open it. You can also write htm, but this is an outdated format and its use is strictly not recommended.

Let's see the result of the work

Now you can view the results of our work.

Without closing it, minimize the Notepad window.

Using Explorer (Windows Explorer), open the WEB folder in which you saved the other.html file, and double-click on its icon. The default browser will be launched and the other.html document will open in its window.

You see, the title of the browser window indicates the title of the document that we entered in the element , and the color of the background and text of the page is the same as indicated in the tag . The text appears in one paragraph and is aligned to the left.

The text font size may be larger or smaller in your browser than in the picture. In this case, select the menu command View - Font Size - Medium (View - Text Size - Medium) in the Internet Explorer browser to set the font size to medium.

It should be understood that different browsers may display the contents of the same HTML file differently. Therefore, when developing WEB pages, it is better to always view the results in all the more popular browsers - Internet Explorer, Opera, Mozilla. In this case, you will be convinced that the guest of your WEB site will see exactly what you want to show him.

View the created file in another browser. At this stage of work, the differences will not be noticeable.

Without closing, minimize browser windows.

Because in the element We entered text without breaking it into paragraphs, then in the browser it is displayed as the 1st paragraph and aligned to the left. Now we need to give the text a nicer look.

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 symbols that we inserted, the browser displays completely understandable information on the screen.

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 dialogue. 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 later be 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 the 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.

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 Notepad. Of course, it is better to use more advanced software, like Notepad++ or full-fledged development programs. Well, okay, let's see how to make a website in a notepad using html and css.

How to create a website from scratch in HTML in Notepad - step-by-step instructions

And here it is our 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 instruction, 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 documents 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 a web page.

Let's insert something into our document, otherwise it's completely empty.

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