Basics of the WEB programming language HTML. HTML Basics for Beginners HTML Programming Language for Beginners

Hi all!!! I'm very glad that you decided to conquer the heights of HTML basics and this is the right choice. After all, before creating your first website, you need to know the basics of HTML. Moreover, you will have to deal with HTML coding on a website more than once. I highly recommend checking out the lessons. HTML for Beginners on my blog, and I guarantee that after completing this course, you will be able to easily create a web page or even a website yourself.

Let's get started! First, let's find out
HTML– (from English. H ypert ext M arkup L anguage) is a hypertext markup language. It was first developed by British scientist Tim Berners-Lee in 1991-1992. HTML was only intended to mark up text, pictures, and tables on web pages. Now programming languages such as JavaScript and VBScript can also be inserted into an HTML document.

HTML is not a programming language; it is intended only for marking up text documents.

To learn HTML you just need to have a Browser and Standard Notepad or .
To open Standard Notepad, do the following on your computer: “Start” => “Programs” => “Accessories” => “Notepad” .

If you have heard about programs that simplify the work of writing HTML code (Microsoft FrontPage, Adobe Dreamweaver), then I do not recommend using them at this stage of training. Practice your skills in a standard notepad or in the Notepad++ text editor, and when you complete this course, you will be able to use programs to speed things up. Subscribe to my blog updates and read how to use Microsoft FrontPage and Adobe Dreamweaver.

For better understanding, I have prepared an example. Look carefully at the picture:

Explanation.

1). Any HTML document begins with this line:

"https://www.w3.org/TR/html4/loose.dtd">

With this line we tell the browser that our HTML document complies with the international specification version 4.01. Thanks to this line, your page will look the same.
It is not necessary to remember this line; the HTML document will work without it. This is just so you are aware of what it is.

2). And- this is the beginning and end of the document.

3). And- head of the document. Additional service tags are often inserted here, one of these tags is . You will learn about other service tags in further lessons; at this stage of training, this information is enough.

4). And- title of the document.
This header will be displayed in the browser:

in search I am index or in Google.

5). And- body of the document.
Here is the content of the document, for example, text, pictures, tables, music, movies, etc. You will learn more about how to insert music, text, pictures into the body of the document in the following lessons.

Note:

You will often read and hear the word “tag”.
A tag is everything that is between the brackets< >. For example: , , <html> , <head> , , etc. - all these are tags. Tags are not visible when viewing the page in a browser, but everything that is not in brackets will be displayed in the browser when viewing. There are many tags and they have different purposes. There are tags that need to be closed. For example, open the tag and be sure to close the tag And there are single tags, for example, this one . A tag is a kind of container that can contain text, pictures and other tags... ○ Pay attention to the correct sequence of opening and closing tags: <тэг1> <тэг2> <тэг3> ... </тэг3> </тэг2> </тэг1> The tag that we opened first is closed last, the second one is penultimate, etc. ○ Here is an example of an incorrect sequence of opening and closing tags. With this order, there may be errors on the web page: <тэг1> <тэг2> <тэг3> ... </тэг3> </тэг1> </тэг2> The error was in<тэг1>And<тэг2> . Be careful when writing code. <img src='https://i2.wp.com/bloggood.ru/wp-content/uploads/2013/05/osnovi-html-100.jpg' align="center" width="100%" loading=lazy loading=lazy> Ready code. This is what the finished standard mandatory HTML code for a web page looks like. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Page title Page text, tables, pictures, music and video.

Do not be discouraged if you understand little or almost nothing from everything written above. In the second lesson there will be more practice, and you will be able to manually write everything yourself and see how HTML works.

Continue to the next lesson

I decided to continue this hot topic. I have compiled a list of the best resources for learning html and css to help those interested in learning these issues. I remember when I started out as a webmaster, I really missed such a selection of high-quality and useful resources.

First some definitions:

Html (from English "HyperText Markup Language" - hypertext markup language) is a standard markup language for web pages.

Css (from English "Cascading Style Sheets" - cascading style sheets) is a technology for describing the appearance of a web page.

Without knowledge of html and css, running your website will be very problematic - you won’t even be able to install a statistics counter or even a banner. Shouldn’t we run to specialists for help or create topic after topic on forums? You just need to take it and learn it.

From my own experience, I can say that html and css can be learned in 1 month. Of course, I’m not talking about professional heights - you can reach them yourself if you want.

In my opinion, the best way to learn html, css, and other topics, including website promotion, is to create your own website and practice on it. By the way, you can see the first website I created for maps for the game Counter-Strike, the creation of which I was then keen on. Here are the maps and their screenshots, created by old man Globator in those days when he did not yet know what the top 10, TCI and PR were, and carefreely frolicked in the sun creating three-dimensional maps :) I created this site in a month, learning html and css in practice.

You don't have to be a technical expert to learn html and css. For example, I’m generally a humanist and in mathematics I mostly got a “2” :) So anyone can learn html and css. The resources I have listed are also suitable so that at any time you can use them to find out any point you are interested in regarding html and css.

Websites for learning html and css

I’ll start a selection of useful resources for learning html and css from a site that I used myself. These are Wild html lessons written by Valentina Akhmetzyanova aka Dikarka. She described all the necessary points so cheerfully and interestingly that learning html and css with the help of her lessons turns into an exciting activity. By the way, you can read the site for the blog. Wild lessons are enough to learn html and css at the level necessary to work as a webmaster.

Can you imagine who I would be if I developed further in the topic of Photoshop? I would be a real monster! But I got involved with SEO and vegetate here, typing these letters with fingers cramped from the cold :) Just kidding, it’s also warm here and the food is good :)

HTML stands for H yper T ext M arkup L anguage, i.e. Hypertext Markup Language is the basic building block of web pages, used to create and visually present web pages.

HTML adds markup to plain text. Hypertext contains various links through which web pages are connected to each other. With HTML, anyone can create both static and dynamic websites. HTML is a language that describes the structure and semantics of the content of a web document. The content of a web page is marked up using tags that represent HTML elements. Examples of such elements are , ,
and so on. These elements form the building blocks for any website.

HTML was invented in 1991 by scientist Tim Berners-Lee, and was originally intended for the exchange of documents between scientists at different universities. With his invention, Tim Burns-Lee laid the foundations of the modern Internet.

There are several versions of HTML. The language standard is continuously updated and supplemented, and as a result, a new version of HTML is released almost every year. Version "HTML 2.0" was the first standard HTML specification, which was published in 1995. HTML 4.01 is the major version of HTML that was published in late 1999 and is widely used today. Today, the most popular version is HTML-5, which is an extension of HTML 4.01, published in 2012.

An HTML document or web page is a simple text document containing tags (which in turn are plain text enclosed in angle brackets<имя тэга>). A web page can be typed either in a regular text editor (Notepad, WordPad, Word, etc.) or in a specialized one with code highlighting (Notepad++, Sublime Text, etc.). HTML documents are stored as files with the extension .htm or .html.

Online examples in every lesson

As we present the material, each lesson will provide examples that will help you understand each code in detail and, through practice, enjoy learning. With our online HTML editor, you can edit an HTML document, and then click the orange "Run" button in the editor, which is located above the left editor window, to see the result. If you use a specialized HTML editor, then you can copy the example and view the results of your work in the browser installed on your computer.

Example HTML:
Try it yourself

Page title

This is the title

This is a paragraph.

Online HTML examples

The HTML tutorial provides you with more than 100 online examples that will help you easily master the markup language. It's better to see once than to hear a hundred times! Theory plus practice is the key to your success in mastering HTML.

I decided to pay more attention to beginners who want to acquire knowledge in the field of website building. My teacher pushed me to do this, because she made a lot of mistakes in the manuals for laboratory work. I would be happy to look at the resource from which the educational information was taken, and leave a couple of lines of my opinion there. But that’s not about that now. In my first lecture I will talk about

What is the structure of an HTML document?

Tag notifies that the structure of the html document begins, - which ends. Between tags Most of the information is stored for the browser and search engines. In tags contains the title of our page. Tag indicates that what follows is information intended for the user, This naturally means that the information for the user is running out.

Now let me explain a little. All tags ( tag - hypertext markup language element) are divided into two types: “single” and “closing”. Additionally, tags are enclosed in the following characters < And > , they are the ones that distinguish the tag from plain text html. Let's look at a few of the simplest “single” tags:

— a tag that is responsible for breaking to a new line in the place where this tag is installed. Let's look at the code using this tag.
My first site Hi all!
And this is my first site.
The result can be viewed.

— a tag that draws a horizontal line. This tag applies to block elements, the line always starts on a new line. Has 5 attributes:

align — Determines the alignment of the line. Can take the value left, center, right.

color — Sets the color of the line.

noshade - Draws a line without 3D effects.

size — Sets the line thickness.

width — Sets the width of the line.

Code using the tag
:
My first site Hi all!
And this is my first site.
A visual example can be found here.

Another “single” tag is . This tag is used to store information intended for browsers and search engines. Search engines look to meta tags to obtain site descriptions, keywords, and other data. You are allowed to use an unlimited number of meta tags, all of them must be located between And . The parameters of any meta tag have the form “name=value”, which is determined by keywords content, name or http-equiv. Because meta tags are intended for machines, they do not make any visual changes, so I will only provide the source code:

This line indicates that the page creator believes that the page is using UTF-8 encoding. In HTML5 everything has become simpler; in order to specify the encoding, all you need is the following line:

There are other single tags ( , ,
, , , ,
, , , , , , , , , ), but I will introduce you to them a little later.

Now let's talk about "closing" tags. The very name “closing tag” indicates that the tag requires a mandatory closing. This is done in order to clearly limit the part of the text that the tag affects.

For a clear example, let's look at the tag , which is used to highlight text, it sets the font to bold. Tags And are boundaries that define the area of text selection. Here is the code where they forgot to close the tag in the last line :
My first site Hi all! And this is my first site.
Hi all! And this is my first site.
As you can see, there is nothing complicated, now you can create several pages linked to each other.

Tags for highlighting text

There are several ways to highlight text on a page. This can be done using styles, or you can use tags. We are (for now) interested in the second option.

— sets the font to bold.

— sets italic font style.

— adds an underline to the text.

— intended to emphasize the text. Browsers display this text in italics.

- crosses out the text. This tag has been removed from HTML5, it is recommended to use it instead

— displays text as monospaced text. Removed from HTML5.

— displays the font as a superscript. The font appears above the text baseline and at a reduced size.

— displays the font as a subscript. The text is positioned below the baseline of the remaining characters in the line and is reduced in size.

— intended to emphasize the text. Browsers display this text in bold.

— reduces the font size by one compared to regular text. In HTML, font size is measured in arbitrary units from 1 to 7, the average default text size is 3. Tag reduces the text by one conventional unit. Nested tags are allowed , and the font size will be smaller by 1 with each nested level, but cannot be smaller than 1.

— increases the font size by one compared to regular text. In HTML, font size is measured in arbitrary units from 1 to 7, the average default text size is 3. Thus, adding a tag increases the text by one conventional unit. Nested tags are allowed , and the font size will be larger with each level.

- used to highlight quotes in the text. The contents of the container are automatically displayed in the browser in quotation marks.

— designed to highlight long quotes within a document. Text marked with this tag is traditionally displayed as an aligned block with padding on the left and right (approximately 40 pixels), as well as padding at the top and bottom.

— defines a block of pre-formatted text. Such text is usually displayed in a monospaced font and with all spaces between words. By default, any number of spaces in the code in a row are shown as one on the web page. Tag
Allows you to bypass this feature and display text as required by the developer.
— defines a text paragraph. Tag
It is a block element, always starts on a new line, paragraphs of text following each other are separated by padding. The amount of padding can be controlled using styles. If there is no closing tag, the end of the paragraph is considered to coincide with the beginning of the next block element.

..
..
- HTML offers six headings at different levels, which indicate the relative importance of the section after the heading. Yes, tag
represents the most important first level heading, and the tag
serves to indicate the sixth level heading and is the least significant. By default, the first level heading is displayed in the largest bold font, and subsequent level headings are smaller in size. Tags
,…,
Refer to block elements, they always start on a new line, and after them, other elements appear on the next line. Additionally, white space is added before and after the title. The tag has an attribute align, which defines the title alignment, can take the values left— header alignment to the left, center- center alignment, right- right alignment, justify— alignment by width (simultaneously along the right and left edges). This value only works for headers that are longer than one line.

— is a container for changing font characteristics, such as size, color and typeface. Although this tag is still supported by all browsers, it is considered obsolete and its use is recommended to be abandoned in favor of styles. The tag has 3 attributes: color— sets the text color, face— defines the font typeface, size— sets the font size in conventional units.

— marks the text as a quotation or footnote to other material. This highlighting is useful for changing the style of text via CSS, and is also used to separate HTML code into structural elements. Browsers usually set the text inside the container in italics.

— indicates that the sequence of characters is an abbreviation. Using attribute title a decoding of the abbreviation is given, which allows those people who are not familiar with it to understand the abbreviation. In addition, search engines index the full-text version of the abbreviation, which can be used to improve the ranking of the document.

By default, text is enclosed in a container underlined by a dotted line.

Below is the code in which I used all these tags:
My first site
HTML and CSS are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications. Learn more below about:

What is HTML?

HTML is the language for describing the structure of Web pages. HTML gives authors the means to:

Publish online documents with headings, text, tables, lists, photos, etc.
Retrieve online information via hypertext links, at the click of a button.
Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.
What is XHTML?

XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML ^tools with it (such as XSLT, a language for transforming XML content).

What is CSS?

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup ~~language~~ language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.

What is WebFonts?
WebFonts is a technology that enables people to use fonts on demand over the Web without requiring installation in the operating system. W3C has experience in downloadable fonts through HTML, CSS2, and SVG. Until recently, downloadable fonts have not been common on the Web due to the lack of an interoperable font format. The WebFonts effort plans to address that through the creation of an industry-supported, open font format _{for the Web} (called "WOFF").
The lecture has come to an end, I hope the acquired knowledge will be useful to you! In the next lecture I will tell you what the tag stores in itself , we will learn how to perform all kinds of manipulations with images, and get acquainted with tables.

When writing this article, the description of some tags was taken from here

Sandbox
Leonid Yakubovich May 26, 2015 at 11:18 am
HTML/CSS/JS training

CSS

HTML,

JavaScript

Youtube
www.youtube.com/user/agragregra- a very interesting channel that will help you get better at creating websites of varying complexity from scratch;

www.youtube.com/user/ArtSorax- a lot of useful material for beginners. The emphasis is on CSS and JS;

www.youtube.com/user/WebMagistersRu- I personally began to get acquainted with the web development environment from this channel. Everything is told in accessible and understandable language, the basics, so to speak.

www.youtube.com/user/loftblog- the LoftBlog team interviews aspiring and established IT specialists and developers, and also conducts video training;

www.youtube.com/user/TheSWAT727- the video channel contains information and training materials on Web development in general, covering Front-end, Back-end, reviews of text editors and other useful information for beginning developers and designers.

Internet resources
htmlbook.ru is a shrine for beginning specialists. This resource contains a huge amount of information in an accessible and understandable form + forum. This is where I recommend starting to get acquainted with HTML/CSS;

webdesign-master.ru - an educational site for a deeper acquaintance with web design and layout;

learn.javascript.ru - the name of the site speaks for itself. I advise you to start learning after familiarizing yourself with the basics of HTML5/CSS3.

Services
www.codecademy.com is an English-language service where you can test your knowledge in practice. Everything is intuitive; deep knowledge of the English language is not required;

htmlacademy.ru is a Russian-language service where the emphasis is on practice + a little theory. A very interesting resource, courses and assignments;

jsfiddle.net is a “sandbox” for web developers, so to speak. Here you can code online and immediately see the result. The service will help you point out errors;

validator.w3.org - here you can check your code for validity in order to correct your errors or shortcomings in the HTML code;

jigsaw.w3.org/css-validator - a similar service designed to check the validity of CSS code.

Bottom line

There is a lot of useful, correct and necessary information on the Internet, but no longer useful. Learn, practice, write code.
Tags: Training, material, websites, website development