HTML Basics. Creating an html page in a notepad: explanations for dummies Download a ready-made html web page on computer science

So. It's time to create something more complex than we did before, but using what we learned in 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 what it will approximately look like.

We will create a “site header” at the top of the site. 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 of the site.

Is the idea clear? Let's get started.

Let's launch Notepad and write our minimum set for creating a page.

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

Next we will place the tags

And, so that all content on our site is centered on the page.
If you haven't forgotten, tags And must be placed between And, i.e. like this

To create the page frame, we will use a table, but a little more tricky than we went through in the HTML lesson about tables. We need a table in which the first row will have 1 cell, and the other row will have 2 cells, i.e. This is the table we need:

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.

To make such a table, write the following code:

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

As you can see, in such a “cunning” table only 1 pair of tags is used in the first row of the table, and not two, as when constructing a 2x2 table. But then the parameter colspan="2" appeared. This parameter seems to say what size the cell should be. In this case, the cell should be 2 cells wide.

So. Now let's set the table dimensions. Let's make the width of the table 750 pixels. Based on the assumption that one of the site visitors can use an 800x600 pixel monitor, and viewing a wider site will be uncomfortable for him.

Let's make the table height 600 pixels

Those. The code for our page will now be like this.

Here we will have a hat
There will be a menu here

To make the boundaries of parts of the site visible, we will “fill” the menu area and the header area with color. For example, like this

Here we will have a hat
There will be a menu here	Page content will go here

Save the file under the name index.html, so that you can preview how it will look in the browser.

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

There will be a menu here	Page content will go here

Now let's set the exact dimensions of the table cell intended for the header. Because Our header image has a size of 750x120, then we’ll make the table cell size 750x120.

There will be a menu here	Page content will go here

SO .

Let's set the menu width to 200 pixels by adding width="200" to the corresponding tag

There will be a menu here	Page content will go here

Let's fill the background of the menu with this background. To do this, save this background with its “native” name sv11.jpg in the same directory where the page file is located.

Now let’s write the required code

There will be a menu here	Page content will go here

Now our page will look like this.

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

To confirm this, we will add text to our site.

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), when the text should be located at the top of the cells.

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

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

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

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

Now our page will look like this.

home	This site is dedicated to making money on the Internet. If you are a complete beginner, then this site will help guide you and tell you where and how you can make money online.

Now we need to make the menu text 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.

home Links	This site is dedicated to making money on the Internet. If you are a complete beginner, then this site will help guide you 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, we will do this - we will 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 - index.html and ssilki.html.

Now let's change the page title (between the tags ), 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 clearer. And this way you can put all the code in one line
But it's not worth it. Otherwise it will be difficult to find errors, if anything...

If you have any questions about this example, write.

So we have made a simple website that you can edit and post 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 see it. OK. I'll get ahead a little.

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 narod.ru hosting, specifying the pupkin login during registration, then the address of your site will be http://pupkin.narod.ru But free hosting has a lot of disadvantages and should be used only for training. If you make a serious website, then you need to buy and buy hosting, then connect the domain and hosting (these issues are discussed in more detail in the book MoneyMaster-3), then your website will have the address you want, like http://gadukino.ru (if the domain is not busy), and you will get a lot more advantages compared to free hosting, for example, the ability to use scripts, which will allow you to create dynamic sites. After you have decided on hosting and received space 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 you can do it using file Windows shells Commander, Total Commander etc. you can download a video tutorial from which you will learn how to transfer files to hosting.

CONGRATULATIONS!

If you have reached this point and everything worked out for you, then you have passed a test drive of sorts and can now move on with confidence.

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

Would you like to learn how to draw the graphic design of your website yourself?

You can learn this by completing the training in the MM-2 book.

Book MM part 2. ALREADY TODAY you can make YOUR own decent, exclusive design for your website , 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 STILL GET A DECENT 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 website composition. Recommended color combinations. Creating a website layout in Adobe Photoshop. Effects in Adobe Photoshop. Cutting the site in Image Ready. Code layout 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 book MM-1, you could not even imagine that after studying it, you would learn how to create simple websites. Most likely, it seemed to you something very difficult, “not for your mind.” But I led 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 do graphic design of a website, while again following the shortest path, i.e. SAVE TIME by not spending months studying different books. After spending a few evenings learning MM-2, you will be able to design your own websites, far ahead of those who decide to buy books in a regular store and spend months studying them.

The price for the MM-2 book also includes the price for consultation. Yes.
Each buyer receives the right to consultation in the corresponding closed sections of the forum. Surely you will have questions, but there is no one to ask. When buying a book, you will always have the opportunity to ask questions and get answers 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 make money with them.

If your finances are really tight, you can earn the money you need. They don’t pay much there, but for some it will be a saving grace to buy books.

Now a few words about the tags that we used to make this page.

Description of html tags from the example

1. - these tags must be present on every web page. They tell browsers and search engines that this is an HTML page.

Any html page has the following structure:

... Heading tags ... ... Page body ...

2. - between these tags lies all the visible content of the page.

4. - between these tags the page title is written, which is displayed at the very top of the browser. By the way, when you search for something in search engines, the first thing that is displayed is the name of the page. Tag often abbreviated to "title". I advise you to read the article: how to create a tag

Creating a page is easier than you think

Many may think that creating websites is difficult, even impossible. To do this you need to study, learn, and do a lot. In fact, there are about 100 tags that you don't even need to learn. It is only important to understand what is used and where. You can look up information in various cheat sheets, and over time you will begin to remember the tags automatically.



A simple code allows you to make text red

It's not much harder to write in bold

We've reached the very bottom

Now you know a little more about tags and can use them. Let's try to insert a link to link several pages together..

OK it's all over Now. Your first page is ready

The file must be named index.html. Ending ".html" indicates the file extension. If you simply enter the index name, the document will be saved as a text file and will not be opened by the browser.

I saved the document to my desktop. Now you need to find it, right-click and open it using any browser. I will 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 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 switch to the NotePad++ program. It has a number of advantages compared to 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 by help 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 a place to your site 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. The square bracket opens, all the basic information about the image is entered into it, and 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 took the simple route. 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 the desired image, and in which direction to look - you write it yourself.

Text formatting

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 number of horizontal stripes when you open the page in the 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!

In the sample program for computer science and ICT on the topic “Communication Technologies”, only 12 hours are allocated and it is proposed to create a Web page using templates. 8 hours are allocated on the topic “Multimedia technologies”, but if in an educational institution computer science is studied at the propaedeutic level already in grades 5, 6 and 7, then it is advisable to transfer the study of multimedia technologies to the propaedeutic course and then you can increase the time for studying communication technologies, or rather , you can add the topic “Creating Web sites in HTML” in 8th grade.

It is recommended to start mastering the technology of website creation with the hypertext markup language HTML in the Notepad program, which is the fundamental basis in this direction. Of course, it is impossible to learn the entire HTML language in 8 hours, but you can show the purpose and application of the main tags of the language. If a student becomes interested in website creation technology, he can continue to study the material independently or in appropriate courses, clubs or electives.

The presented methodological manual has undergone repeated testing in the 8th grade of gymnasium No. 441 in the Frunzensky district of St. Petersburg and includes material for theoretical and practical classes, the implementation of which is first demonstrated through a projector, and then students perform independently on a computer, using handouts for lesson.

For students who quickly completed the planned work in the lesson, additional tasks are provided.

The material is effectively mastered when students, together with the teacher, complete a common project, for example, on a topic from the history of St. Petersburg “Drama Theaters of St. Petersburg”, and then, as a final work, create their own small project, using as a template a website created jointly with teacher.

As a test, students answer test questions on knowledge of HTML tags and present a website they created themselves.

The main objectives of training: the formation of cognitive interest, the development of intellectual and creative abilities in the field of Web technologies.

Educational:

• to form a knowledge system on the technology of creating Web sites;
• teach the hypertext markup language HTML for creating websites;
• introduce the stages of project activities.

Educational:

• develop creative abilities for self-expression through website creation;
• develop the ability to compare, search for analogues and transfer knowledge to a new subject area of ​​Web technologies;
• develop computer skills

Educational:

• develop a conscientious attitude to work;
• foster a sense of camaraderie and personal responsibility for the created site;
• cultivate artistic and aesthetic taste;
• to educate a competent and correct Internet user.

Lesson 1

1. General information about Web sites and HTML

Publications on the World Wide Web are implemented in the form of Web sites. A website is structured like a magazine that contains information on a particular topic or issue. Just as a magazine consists of printed pages, a Web site consists of computer Web pages connected by hyperlinks. Web pages can contain text, pictures, tables, multimedia and dynamic objects. Web sites can be created using HTML.

HTML – Hyper Text Markup Language - hypertext markup language. HTML is in no way a programming language; it is only responsible for the arrangement of elements (text, pictures) in the browser window. HTML is the language for creating Web sites on the World Wide Web. The HTML language consists of simple commands - tags. Tags control the presentation of information on the screen when an HTML document is rendered. Tags are enclosed in angle brackets<>…and there are paired and unpaired (single<>).

An HTML document is a text file with the extension . html or. htm, containing a set of tags.

Browser – a program for viewing Web pages. Microsoft Internet Explorer, Opera, etc. browsers are widely used. When a browser receives an HTML document, it analyzes it, builds an object model of the document, and then displays the result on the monitor.

2. HTML document structure

3. Formatting characters

The characters between the following tags display:

Font options

Text enclosed between tags …….. has a given size, color and typeface. The following attributes are used for this: SIZE = value from 1 to 7 and COLOR= color (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), each color has its own hexadecimal code from 000000 to FFFFFF.

If the text contains several spaces between words or tab characters, the browser displays only one space on the screen. If additional spaces are needed, then between words you need to add a character primitive.

Single tag
breaks the text stream and inserts an empty line. Several of these tags add multiple empty lines. Line spacing is single.

4. Practical task No. 1.

Creation of the first HTML document “Drama Theaters of St. Petersburg”, working with fonts, setting the color and font size. Mastering work technology.

Lesson #2

1. Formatting text in paragraphs

Tag - starts a paragraph on a new line. A new paragraph is separated from the previous one by double line spacing.

Aligning text to paragraphs:

2. Set the color of all text and background in a document

Described in the start tag of the document body

TEXT=text color >.

3. Headings at different levels

Tags …. format the text contained in them. The n values ​​range from 1 to 6, with text displayed from larger to smaller. Tags …. may have attributes ALIGN=CENTER, LEFT, RIGHT.

4. Simple lists

5.Practical task No. 2

Text formatting in paragraphs, background color, headings of different levels, lists.

Lesson #3

1. Inserting graphics

All browsers support formats .gif, .jpg. These formats are raster. GIF– supports transparency and animation, well suited for hand-drawn images. JPG– for full-color images, well suited for scanned images and photographs, does not support animation.

Single tag inserts graphics into a text stream anywhere:

>

Optional tag attributes :

To keep the picture centered, you can use the tag

……./

2. Practical task No. 3

Inserting and formatting graphics. Independent creation of Web pages for drama theaters.

Lesson #4

Communication with other documents is organized by tags<A>….

> hyperlink text .

>< IMG SRC =’graphic file name’ >

2. Practical task No. 4

Design of a list of theaters on the main page glavn.htm, as hyperlinks to the corresponding Web pages of theaters.

Lesson #5

1. Tables

They are used not only for arranging data in cells, but for the purpose of positioning fragments of text and images relative to each other.

Using tables it is convenient to create site navigation.

An example of a table with two rows (rows) containing two cells:

Table cells can contain text or images, as well as text with HTML tags and hyperlinks. You should not leave table cells blank; you must place at least a non-breaking space

Basic tag attributes

And

set table, row or cell parameters: ALIGN=left, right, center – alignment ( , , ) BGCOLOR=’color’ – background color ( , , ) HSPACE=value – free space to the left and right of the table in pixels ( ) VSPACE=value - free space above and below the table in pixels ( ) WIDTH=value – table (cell) width – in pixels, or as a percentage ( , ) HEIGHT = value – table height (cell, row) – in pixels, or as a percentage ( , ) BORDER= value – thickness of the border around the table and its cells, default value=1, if value=0, then there is no border ( , , , ) BORDECOLOR=’color’ – frame color ( >) VALIGH=bottom, middle, top – align content vertically ( ) 2. Practical task No. 5 Creating site navigation in the form of a one-row table Lessons No. 6 and No. 7 1. Header section , meta tags The header section on each page specifies information about the document that is used to display it. Text enclosed between tags , appears in the title bar of the browser window. The header section usually contains a number of tags. with various attributes that provide additional information (metainformation) about the Web site: > - - (the type of code table is indicated ( windows-1251, Koi8-R and others) used in preparing the text part of the document. - information about HTML tags- 15 minutes. 2. Reflection. Presentation of the project and its evaluation by class students and the teacher - 30 minutes. Test questions - Appendix 2. Literature for teachers Thomas A. Powell “Web design. The most complete guide. In the original”, 2nd edition, BHV-SPB, 2005. Brown M. “HTML 3.2. The most complete guide. In the original”, BHV-SPb, 1999 Zakharkina V.V. “Basics of creating Web pages”, methodological manual, St. Petersburg, 2000. K. Akhmetov, “Microsoft Internet Explorer 4.0 for everyone”, Computer Publishing House, Moscow, 1997. Literature for students Usenkov D. “Lessons of a Webmaster”, Moscow, BINOM, 2004. Smirnova I. “The beginnings of Web design,” St. Petersburg, BHV, 2004. List of Internet resources http://htmlbook.ru - Merzhevich Vlad. A short but information-rich textbook on website creation technology, HTML, CSS, design, graphics, etc. http://html.manual.ru - Gorodulin Vladimir. HTML reference. http://winchanger.narod.ru - A. Klimov. A quick reference guide to HTML language tags. Did you like the article? Share with your friends: Facebook Twitter My world In contact with Google+ 05.04.2020 Internet The most interesting: Label each polygon and measure the lengths of the sides of each Connecting YouTube to TV Names of large numbers Solving a compound problem Friends, I use cookies to give you the best experience on my website. If you agree, click "Ok".OK