Useful Tips

Lesson 1


In the first lesson, we already examined a small example of creating an html page. Now create a more complex page. I want to note that I will explain how to do this without the use of special software. All that is needed for work is a regular notepad from Windows. For more convenient work, I recommend downloading Notepad ++ (an advanced notebook with the ability to highlight html tags). So, let's begin.

Open notepad and copy the following into it:

Next, click "save as", in the file type box, select "all files", and write index.html in the name. Be sure to include the extension .html (not .txt) at the end of the name, otherwise browsers will not interpret it as a web document.

If for some reason you are unable to create an html page, then you can download the previous example from the link: index.rar.

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

Description of tags.

The very first tag is (this tag is paired, i.e. the closing tag is required) - it is used as a container, inside which is located all the contents of the page (text, images, etc.). Although this tag (s) is optional, its use speaks of a good tone rule. Therefore, I advise you to use it.

The next tag is. This is also a paired tag (s). This tag does not appear on the page (except for the title), but it is necessary to indicate additional page parameters - page description (used by search engines), keywords (used by search engines), styles, scripts, title, and more.

Tag - paired tag (s), required to indicate the page title. Moreover, this tag should be placed only inside the tag!

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

Case Studies

Open any site and see the source code. This can be done directly in the browser using the keyboard shortcut Ctrl + U.

Now you see how professionals write HTML code and get a lot of money for it. Different from our first page, right? But this can also be learned in a few months. And if you want to get a complete education with knowledge of CSS and JavaScript, with a job as a junior programmer, you will have to study for a whole year.

HTML5 Technology Suite

HTML5 is the latest and most powerful version of the HTML standard, with new elements, new attributes, and new behavior. The term HTML5 also means a set of technologies, allowing you to create a variety of sites and web applications.

In fact, the term HTML5 is used to mean over ten separate standards. And some of the HTML5 technologies have not yet been finalized. Not all browsers support them (or each browser is different).

When we talk about interactive sites and AJAX, we are almost always talking about HTML5 technologies.

HTML5 has programming interfaces (APIs) for transmitting video and sound, for chats, including video chats via a browser, and many other interesting interactive things. HTML5 allows you to create browser games. Even YouTube is now working through HTML5, although previously it required Flash.

Formally, switching from regular HTML (HTML4) to HTML5 is very simple: just write the tag at the beginning of the web page code to indicate the type of document.

How to learn to write HTML

You have already learned how to write a simple page in HTML. Just learn the basic elements - and experiment. Set yourself a specific task (for example, make a business card site for your IP) or take a paid task as a freelancer and try to implement it.

You can peek into the directory, google, ask for advice on forums and sites with questions and answers. Or find the most similar site, open its code - and understand how it works. You can change it for your needs, just remember to erase the copyrights and comments of the authors.

Copy-paste of someone else's work is a normal phenomenon in programming, here it is called Open Source, a very fashionable and advanced stream.

People share with each other their programs and code snippets. Some developers do not want to open their code, they encrypt (obfuscate) scripts on sites, but they can also be parsed with special tools.

To create interactive sites with more complex functionality, with a modern and beautiful design, you need to further study CSS, JavaScript, web design and some other subjects. Here more fundamental preparation is required.

The Web Profession Profession annual training program is ideal for beginners who want a clean slate on HTML, CSS styles, and JavaScript and PHP programming languages. As a result, you will learn how to create your own web projects and will be able to claim the position of junior developer.

A practical one-year course for those who want to become a professional web developer, launch their Internet project or web service and receive their first development orders.

  • Live feedback from teachers
  • Unlimited access to course materials
  • Internship in partner companies
  • Graduation project from a real customer
  • Guarantee of employment in partner companies for graduates who have defended their thesis

We will need

1) Choose text editor. Enough for the first time Notepad (Notepad) (in it we need only a team Save as)

If you immediately want to start programming in specialized text editors, then pay attention to:
1) for Windows
NotePad ++ (download or here)
Intype (download)

Their difference from conventional text editors is that they indent automatically! make it possible to re-save the file in a different encoding (note that you will encounter it in the future), color tags in various colors, such as the code at the bottom of the lesson. In a regular editor, it will be the same color.

2) Any internet browser, for example, Internet explorer for windows or Safari for Mac OS X and iOS. Yes yes you can also Mozilla, Google chrome, Opera, Yandex and Mail browsers and so on.

Let's create an HTML page

1) create a folder on the desktop html . We will do this so that the lessons are structured and contained in one place.

2)Create our file in a text editor, for example in Notepad (NotePad). Further Save as.

The encoding is better to choose UTF-8, then choose all file types and select the name of the file with .html at the end, for example index.html

We choose as a directory (folder) where to save our html
Push save. Done!

Often ask the question that file extension not visible. Let’s take it in order

File name extension - a sequence of characters added to the file name and intended to identify the type (format) of the file. Simply put, this is .txt .doc .exe .jpg and so on at the end of the file name

The ability to see file extensions can help in accurately determining the type of file and allows you to manually (with the command rename) change not only the extension, but also the file type (for example, from txt to html)

it should NOT look like this: photo, text document, game
It should look like this: photo.jpg, text document.txt, game.exe

But if you still have the file names look like in the first version (WITHOUT, for example, .txt, jpg, .exe at the end of the file name), do the following:

We look at the settings of files and folders:

For Win XP Open any folder - Tools (in the upper panel) - Folder properties - View - Hide extensions for registered files (uncheck) - Apply

For Win 7 Open any folder - Arrange - File and search options -View - Hide extensions for registered file types (uncheck) - Apply

For Mac OS Click on the desktop - Finder - Preferences (Advanced) - Advanced - select the check box in Show all file extensions (Apply extensions)

3) insert into it the entire code (along with the comments) indicated below:

4) open the file. You can choose another browser to open this file, for this, right-click on our file index.html - To open with and select a browser from the list, for example, Internet Explorer, Google Chrome, Mozilla, Yandex Browser, etc.

As a result, opening the resulting Internet Browser index.html , You should see a page of this kind:

Picture 1.

On Figure 1 we see how, as a result, the browser displayed your page. The text of the following elements is highlighted in red:

In the code presented below, you can see the basic minimum of the html document. It is necessary to learn it and not confuse the opening and closing tags in places.

Tag head highlights the head of the document. It prescribes elements that are mainly associated with the help of the Browser in processing the elements of your page (name, keywords, authorship, etc.) We will talk about its contents later.

Tag title stands for Page Name. This is the only tag contained in headthat is displayed on the page. What to enter after the opening and before the closing tag will be the title of your page on the Internet

All indentation to the left of the tags in the examples are optional. They are made for illustration so that you see a pair of tags.

Tag body indicates the body of the page. What to enter after the opening and closing tags body and will be the content of your page

Almost all tags in HTML opening and closing (exception, for example, the img tag, which indicates the insertion of an image).

Once again, I recall that it is important not to forget to write closing tags for all other types of tags, otherwise the Browser will not understand exactly where you wanted to finish this or that element. As below:

After the word bold, we intentionally forgot the closing tag b. As a result, the browser displayed the following

I want to highlight the text bold, and this one is already in italics

As you can see, the text will be highlighted in bold until the end, and the one that was implied in italics will be bold and italics. So be careful!

5) If you want to edit something in your file index.html (and it is now opened by default only by the browser), then click the right mouse button on our file index.html - choose To open with and from the list we select a text editor, it will either Notepad (in English Notepad), or another text editor you have installed.

In principle, explained the basics. While the html page looks simple enough, but in the next lessons I will tell you in detail about these and other elements and their purpose - we will insert images, make links and many other interesting things)