Ready source code for html. An example of creating an html page in notepad

: HTML - Hypertext Markup Language (or Hypertext Markup Language).

So let's get to know him better.

First, create a file on your computer with any name and extension .html (title must be in English- for example index.html). To create such a file - create a regular Text Document ("Start" - "All Programs" - "Accessories" - "Notepad") and save ("File" - "Save As") it anywhere by entering the name and extension (it happens that when the extension is introduced, notepad still saves it as text file, but we need a web file. To do this, before saving, select the file type - "All files (*. *)").

This is not a prerequisite (since you can change the name of the first page in the server settings), but a rule of good form. The name of the first page is preferably index (index.html), since the server, when accessing it, issues a file with this name - index.

If saved correctly, the file icon should change to a browser icon (Internet Explorer by default).

Now open this file through notepad and copy this code there.

This is the first web page!

Save and open with a browser.

Congratulations, you've just created your first web page.

The text "This is the first web page!" you can change it to any other, for example, "This is my first web page !!!". save, update the browser, admire the result.

But our page doesn't have a title.

We need to fix this - we will slightly correct the code, or rather add the "Site Head" to it using tags and . <html> <head> <title>First page This is my first web page !!!

We save, update, admire. Our page now has headers.

Description of tags.

The very first tag is (this tag is paired, i.e. the closing tag required) - it is used as a container that contains all the content of the page (text, images, etc.). Although this tag ( and) is optional, but using it speaks of good form. Therefore, I advise you to use it.

The next tag is ... This is also a paired tag ( and). This tag is not displayed on the page (except for the title), but it is required to specify additional page parameters - page description (used by search engines), keywords(used by search engines), styles, scripts, title, etc.

Tag - paired tag ( <title>and) is required to specify the page title. Moreover, this tag needs to be placed only inside the tag. !

And the last, in our code, tag - ... Also a paired tag ( and

), inside which the entire visible part of the site is located, 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 rule of writing them.

If you are creating a template from scratch, then you need to build on something. Considering that the HTML5 standard "strides widely across the country", in this article I will give an example of an empty HTML5 template.
In the new standard, a lot has been simplified and now the basic part looks like this:
...

New HTML5 tags

HTML5 introduces several new tags for code structure:
,
,
,
,
, which in some cases replace the usual
... This was done for search robots so that they better recognize the page code and separate the main content from the auxiliary elements.

Using the new tags, an empty HTML5 template could look like this:

Page title

Navigation menu

Sidebar SideBar

Content is the main content of the page.

Site footer

Making DOCTYPE easier to write

Remember how it was before, in HTML4 the DOCTYPE tag looked like this:

Now the record is minimal, it's probably nowhere easier:

Similar simplifications have taken place for the rest of the tags, so the transition to the HTML5 standard makes writing much easier.

Optional tags in HTML5

The new standard brought a lot of relief to layout designers. In particular, the use of HTML, HEAD and BODY elements is no longer required for HTML5 markup. If they are not there, then the browser still thinks that they exist. In fact, of the mandatory in HTML5, only .

Interpretation of the Russian language as the main language of the HTML document

Tag defines the language of the document. Discussions regularly arise on the network about its correct spelling, in particular, the correct spelling of "ru-RU". I am leaning towards the option that "-RU" is redundant, since the Russian language does not have dialects and spellings like the English language (British and American). The suffix RU specifies where Russian is spoken. That is, if en-US means "English which is spoken in the USA", then ru-RU means "Russian which is spoken in Russia", which is redundant.

In other words, nothing bad will happen if you continue to use the "ru-RU" option.

If you open any web page, it will contain typical elements that do not change depending on the type and focus of the site. Example 1 shows the code for a simple document containing the basic elements.
Example 1. Source code of a web page
Sample web page
Heading

First paragraph.

Second paragraph.

Copy the contents of this example and save it in the c: \ www \ folder as example2.html. After that, launch the browser and open the file through the menu item File> Open File(Ctrl + O). In the dialog box for selecting a document, specify the file example2.html. The browser will open the web page shown in Fig. 1.
Rice. 1. The result of the example in the browser

Element(jarg. doctype) is intended to indicate the type of the current document - DTD (document type definition). This is necessary for the browser to understand how to interpret the current web page, since HTML exists in several versions - modern HTML5 or legacy HTML4 and XHTML. So that the browser does not "get confused" and understands according to which standard to display the web page and it is necessary to set in the first line of code.
Since we will only work with HTML5 in the future, we only need one short and modern doctype.
We mentioned that element names can be written in uppercase and lowercase letters. TOthis rule also applies and can be written in different ways. However, traditionally, the name of this element is written in uppercase.
Opening tag defines the beginning of an HTML document, inside it the "head" is stored ( ) and the "body" of the document ( ).
The content of this section is not shown directly on the page, except for the element ... Inside <head>the following elements can be located: <base> , <link> , <meta> , <script> , <style>or <title> . <meta charset="utf-8"> Element <meta>is universal and adds a whole class of capabilities, in particular, using the meta tag, as this element is generically called, you can change the page encoding, add keywords, document description and much more, intended for the browser or search engines. In particular, so that the browser understands that it is dealing with the UTF-8 (Unicode transformation format) encoding and this string is added. <title>Sample web page
Element defines the title of the web page. In the browser, it is displayed on the current tab (Fig. 2).<img src='https://i0.wp.com/webref.ru/assets/images/html-tutorial/title.png' height="62" width="367" loading=lazy loading=lazy>Rice. 2. The title of web pages in the browserElement <title>is required and must be present in the document code. Inside it is allowed to write only text and no other elements in <title>shouldn't be. But it is permissible to add different text characters, for example, like this: <title>Adobe ™ Photoshop® .
End tag indicates that the head of the document is complete.
The "body" of the document is intended to accommodate the elements and content of a web page.

Heading

HTML offers six text headings at varying levels that indicate the relative importance of the section after the heading. So, the element
represents the most important first-level heading, and the element
serves to denote a sixth level heading and is least significant. By default, the first level heading is displayed in the largest bold type, the headings of the next level are smaller in size. The elements
...
refer to block elements, they always start on a new line, and after them other elements are displayed on the next line. In addition, the browser adds white space before and after the title.

Some text can be hidden from display in the browser by making it a comment. Although the user will not see such text, it will still be transmitted in the document, so by looking at its source code, you can find hidden notes.

And use one of the editors.

Main Tags Text Links Frames Tables Lists Forms Images
Example 1. Structure of an HTML document

Document's name

This is where the Web document itself is located.

Hello everyone!

Hello world!

Example 2. The structure of the simplest web pages

Internet search engines.

Internet search engines

Below are some popular overseas
search engines and the domestic Rambler system. For searching
information, the Search window is used, into which the key
word and the Search button is pressed.

View examples:
ALTAVIST.HTM,
EXCITE.HTM,
YAHOO.HTM!

1.
2.
3.
4.
5.
6.

Use search engines for search for information on the Internet!

Example 3. Web page markup

Echo of Moscow.

24 hours a day!

Information on any topic!
Frequency on VHF 73.82 MHz or 91.2 MHz FM.

Listen to Echo of Moscow!
The rest is visibility!

Internet address:
http://www.echo.msk.ru

Example 4. Simple HTML example

Ordered and unordered lists

Unordered list

Element 1.

Element 2.

Element 3.

Ordered numbered list

Element 1.

Element 2.

Element 3.

Definition lists

Definition lists are:

Term name 1

Definition of term 1

Another definition of term 1

Term name 2

Definition of term 2

Another definition of term 2

Term name 3

Definition of term 3

Another definition of term 3

Petrov I.S., E-mail:

Forms

Dialogue elements

<Н2>ISINDEX element

<Н2>INPUT elements

Entering a text string

Password input

Checkboxes

Switches

Input confirmation button

Image button

Form clear button

File

<Н2>SELECT element

<Н2>TEXTAREA element
 Text input area 

This text is in bold.

This text is logically highlighted with a strong tag (may appear as plain text in some browsers or appear in bold). In some browsers, the action is the same as the b tag.

This text is displayed in a larger font (may appear in regular font in some browsers)

This text is logically highlighted with the em tag. In some browsers, the action is the same as the i tag.

This text is displayed in italics.

This text is displayed in a smaller font.

This text _below and this one ^above level of the main text.

This is preliminary
formatted text.
It stores
all spaces and blanks
the lines you provided.

The pre tag is good for displaying computer code.:

For i = 1 to 10
print i
next i

The code tag is designed to display one or more lines of text that is program code. This includes variable names, keywords, function texts, etc. Browsers usually render the contents of the code container as reduced-size monospaced text.

The kbd tag is used to indicate text that is typed on the keyboard or for the name of keys. Browsers usually mark the text in a kbd container with a monospaced font.

The text marked with the tt tag is displayed in monospaced text. This tag belongs to the group of physical formatting tags.

The samp tag is used to display text that is the output of a computer program or script. Browsers usually display text in a samp container using a monospaced font. Styles allow you to define your own appearance.

The var tag is used to highlight the variables of computer programs. Browsers usually mark text in a var container in italics.

Donald Duck

mailbox 555

Disneyland

USA

UN

WWW

The title attribute is used to display the text it contains when you hover over an acronym or abbreviation.

Quote block:

This is a long quote. This is a long quote. This is a long quote. This is a long quote.

The browser inserts a blank line and padding before and after the quote block.

Short quote:
This is a short quote.

The q element is not highlighted in any way and is displayed as normal text.

A dozen are
~~thirteen~~
twelve
units.

Most browsers strikethrough deleted text and underline inserted text.

Older browsers may display deleted text as plain text.

UN

This is a paragraph.

This is a different paragraph.

Formatting html

y = x ²-parabola equation.

H ₂ O-formula of water.

Formatting html

This is a first level heading

This is a second level heading

This is a third level heading

This is a level four heading
This is a fifth level heading
This is a sixth level heading
It's just text

And this text will lead you to the famous Youtube video hosting.

To html examples

If you set the target attribute to “_blank”, the link will open in a new browser window.

This is the link to send mail:
? subject = Hello% 20you ">
To send a letter!

Attention: Spaces between words must be replaced with "% 20" for you to be sure that the browser will display your text correctly.

name = ”showframe”>

Some older browsers do not support inline frames.

In this case, the line frame will not be displayed in the browser window.

Each table starts with a table tag.
Each line of the table begins with a tr tag.
Each table cell starts with a td tag.

Single column table:

100

One line of three columns:

100 200 300

Two lines of three columns:

100 200 300

400 500 600

A table with a regular border:

The first line

The second line

Wide bezel:

The first line

The second line

With a very wide bezel:

The first line

The second line

Table headers:

Name Telephone Telephone

Bill Gates 555 77 854 555 77 855

Vertical headers:

Name: Bill Gates

Telephone: 555 77 854

Telephone: 555 77 855

This table with a wide border and title

Name
100 200 300

400 500 600

The cell consists of two columns:

Name Telephone

Bill Gates 555 77 854 555 77 855

The cell consists of two lines:

Name: Bill Gates

Telephone: 555 77 854

555 77 855

Unordered list:

Coffee

Tea

Milk

Ordered list:

Coffee

Tea

Milk

Filled circle list icons:

Apples

Bananas

Lemons

Oranges

Circle bullets list:

Apples

Bananas

Lemons

Oranges

Filled square list icons:

Apples

Bananas

Lemons

Oranges

Numbered list:

Apples

Bananas

Lemons

Oranges

Numbering in capital letters:

Apples

Bananas

Lemons

Oranges

Numbering in lowercase letters:

Apples

Bananas

Lemons

Oranges

Numbering in capital Roman numerals:

Apples

Bananas

Lemons

Oranges

Numbering in lowercase Roman numerals:

Apples

Bananas

Lemons

Oranges

Nested list:

Coffee

Tea

Black tea

Green tea

Milk

Name:

Surname:

Username (login):

Password:

Remember that when you enter your password, the browser shows asterisks instead of characters.

Man:
name = ”Sex” value = ”male”>

Female:
name = ”Sex” value = ”female”>

The user can only select one value.

I have a motorcycle:

I have a car:

I have an airplane:

If you click on the "Confirm" button, you will send your data to new page called html1.asp.

Insert a simple image:
width = ”111 ″ height =” 111 ″>

Moving image (animation):
width = ”62 ″ height =” 62 ″>

Remember that the syntax for inserting an animation is the same as for inserting a simple image.

Take a look, we have inserted an image as a background!

You can insert gif, jpg / jpeg and png images.

If the image is smaller than the page, it will repeat until it fills the entire background.

align = ”left” width = ”48 ″ height =” 48 ″>
Paragraph with a picture. The "align" attribute was assigned the value "left". The image floats to the left of the text.

align = ”right” width = ”48 ″ height =” 48 ″>
Paragraph with a picture. The "align" attribute was assigned the value "right". The image floats to the right of the text.

width = ”20 ″ height =” 20 ″>

width = ”45 ″ height =” 45 ″>

width = ”70 ″ height =” 70 ″>

You can resize the image by changing the "height" and "width" attributes of the img tag.

So. It's time to create something more complex than we did before, but using the knowledge gained in the previous lessons.

In this lesson of the MM course part 1 we will make a 2-page website ... for example, about making money on the Internet.

First, let's decide how it will look approximately.

At the top of the site we will create a "site header". On the left there will be a site menu with links to other pages of the site, the rest of the space will be occupied by the content (content) of the site.

Do you get the idea? Let's get started.

Launch Notepad and write our minimal page creation kit.

Now let's write between the tags the name of our page, for example, like this

A site about making money on the Internet. Information and links to sites about making money on the Internet

Next, let's place the tags
and so that all content on our site is centered on the page.
If you haven't forgotten, tags and should be placed between and

, i.e. like this

We'll be using a table to create the wireframe for the page, but it's a little more tricky than we went through in the HTML Tutorial Tutorial. We need a table in which the first row will have 1 cell, and the other row will have 2 cells, i.e. we need such a table:

In cell 1 we will place the site header, in cell 2 there will be the site menu, and in cell 3 there will be the page content.

In order to make such a table, write the following code

Those. the code for our page will be like this:

A site about making money on the Internet. Information and links to sites about making money on the Internet

As you can see, in such a "tricky" table, only 1 pair of tags is used. in the first row of the table, and not two, as when building a 2x2 table. But the parameter colspan = "2" appeared. This parameter, as it were, says what size the cell should be. In this case, the cell should be 2 cells wide.

So. Now let's set the size of the table. Let's make the table width 750 pixels. Assuming that some of the site visitors can use an 800x600 pixel monitor, and they will be uncomfortable to view a wider site.

Let's make the table height 600 pixels

Those. the code of our page will now look like this.

A site about making money on the Internet. Information and links to sites about making money on the Internet

Here we will have a hat

There will be a menu here

To make the borders of the parts of the site visible - fill in the menu area and the header area with color. For example, like this

A site about making money on the Internet. Information and links to sites about making money on the Internet

Here we will have a hat

There will be a menu here This will be the content of the page

Save the file as index.html, so that you can see how it will look in the browser.

Now we insert the header image into our site. About, .

A site about making money on the Internet. Information and links to sites about making money on the Internet

There will be a menu here This will be the content of the page

Now let's set the exact size of the table cell intended for the header. Because our header picture has a size of 750x120, then we will make the table cell size 750 x 120.

A site about making money on the Internet. Information and links to sites about making money on the Internet

There will be a menu here This will be the content of the page

SO .

Set the width of the menu to 200 pixels by adding width = "200" to the corresponding tag

A site about making money on the Internet. Information and links to sites about making money on the Internet

There will be a menu here This will be the content of the page

Let's "fill" the background of the menu with such a background, to do this, save this background with its "native" name sv11.jpg in the same directory where the page file is located.

And now we register the required code

A site about making money on the Internet. Information and links to sites about making money on the Internet

There will be a menu here This will be the content of the page

Now our page will look like this.

You might be wondering why the browser doesn't "handle" the 200 menu width? The menu looks wider than 200 pixels after all. Yes. There is such a browser glitch, but everything will fall into place if you start writing text in the main section of the page. (Or you can hard-code the width of the cell in which we will write content by adding width = "550" )

To confirm this, let's add some text to our site.

A site about making money on the Internet. Information and links to sites about making money on the Internet

There will be a menu here

Now everything is almost OK ... Almost, because there are some small problems. The text is displayed exactly in the middle (vertically), and it should be that the text is located at the top of the cells.

To do this, we need to register one more parameter in the tag the menu and the main content of the page.

We did not go through this parameter in the lesson about tables, it is the parameter of vertical alignment valign = "top".

The top value means that the content will be at the top.

A site about making money on the Internet. Information and links to sites about making money on the Internet

There will be a menu here This site is dedicated to making money on the Internet. If you are a completely newbie, then this site will help you orient and tell you where and how you can make money online.

Now our page will look like this.

A site about making money on the Internet. Information and links to sites about making money on the Internet

home

This site is dedicated to making money on the Internet. If you are a completely newbie, then this site will help you orient and tell you where and how you can make money online.

Now we need to make the text of the menu in the form of links. The word Home will link to the index.html page, and the word Links to the ssilki.html page, which we will create a little later.

A site about making money on the Internet. Information and links to sites about making money on the Internet

home

Links

This site is dedicated to making money on the Internet. If you are a completely newbie, then this site will help you orient and tell you where and how you can make money online.

Now our site will look like this.

It remains to make the second page of the site. In order to simplify the work, let's do this - save our index.html page under a different name ssilki.html, and then edit the file.

Those. on your computer you should have 2 identical pages so far - index.html and ssilki.html.

Now let's change the title of the page (between the tags and), and change the text of the page, for example, like this

home

This page will contain links to sites about making money on the Internet.

Website about making money on the Internet MoneyMaster

The second page of the site will look like this.

Perhaps someone has a question. Why are there so many empty lines? Is it possible to condense the code?

Can. I made gaps to make the structure of the page more clearly visible. And so you can place all the code in general in one line.
But not worth it. Otherwise, it will be difficult to search for errors, if anything ...

If you have any questions about this example - write.

So we made a simple website that you can edit and place on the Internet.

Many people ask how to place a website on the internet so that it can be seen not only on your computer, but so that other people can also see it. OK. I'll run a little ahead.

In order for your site to be accessible from the Internet to the whole world, you need to find one that will provide you with a place for your site. Hosting can be free or paid. Free hosting also gives you a website address. So for example, if you registered on the hosting narod.ru, specifying the pupkin login during registration, then the address of your site will be http://pupkin.narod.ru But free hosting services have a lot of disadvantages and should be used only for training. If you make a serious site, then you need to buy and buy hosting, then link the domain and hosting (these issues are discussed in more detail in the book MoneyMaster-3), then your site will have the address you want like http://gadukino.ru (if the domain is not busy), and you get a lot more advantages over free hosting for example, the ability to use scripts, which will allow you to create dynamic sites. After you have decided on the hosting and got a place for your site, you need to transfer the site files to the hosting. This can be done using special FTP programs, for example LeapFTP, CuteFTP, or it can be done using Windows Commander file shells, Total commander and others, you can download a video tutorial from which you will learn how to transfer files to hosting.

CONGRATULATIONS!

If you get to this point and you succeed, then you have passed a kind of test drive and now you can move on with confidence.

Of course, the site I made for the example is not that cool. And even on this site I had to use finished pictures that you most likely do not know how to create.

Would you like to learn how to draw your own graphic design for your website?

You can learn this by following the MM-2 tutorial.

Book MM part 2.

ALREADY TODAY you can make YOUR decent, exclusive design for your site without wasting weeks / months studying textbooks and other materials, without stealing designs from others and without using templates.
EVEN IF YOU ARE NOT A DESIGNER IN PRINCIPLE, YOU WILL ALWAYS GET A GREAT DESIGN!
How to make a beautiful website, even if you are not a designer yet.
Training in the necessary skills and techniques for creating graphic elements of the site. Varieties of design.
Basics of site composition.
Recommended color combinations.
Website layout creation in Adobe Photoshop.
Effects in Adobe Photoshop.
Slicing the site in Image Ready.
Layout of the code in DreamWeaver.
CSS style sheets.

Unfortunately, Book 2 is not free, but I'm sure you won't regret buying it. Surely, before reading the MM-1 book, you could not have imagined that after studying it, you will learn how to create simple sites. Most likely, it seemed to you something very difficult, "not for your mind." But I took you along the shortest path to the result, holding you by the hand like a child. In the same way, having studied MM-2, you will learn how to make a graphic design of the site, while, again, going along the shortest path, i.e. SAVING TIME without spending months studying different books. After spending a few evenings studying MM-2, you will be able to design your own sites, significantly ahead of those who decide to buy books in a regular store and spend months studying them.

The price of the MM-2 book also includes the price of the consultation. Yes.
Each buyer gets the right to consult in the corresponding closed sections of the forum. Surely you will have questions, but there is no one to ask. Buying a book - you will always have the opportunity to ask questions and get answers to them from me or from experienced students! With this approach, your training will be as effective as possible! With this approach, you will quickly learn how to make websites and earn money with their help.

If your finances are really tight, you can make the money you need. They don't pay a lot there, but for some it will be a life-saving straw to buy books.

Did not find an answer to your question? Look at here

Bugs in Singularity?

Just Cause 2 crashes

Terraria won't start, what should I do?