From the author: Hi all. We all want to better understand website building in order to engage in interesting projects and bring our ideas to life. But what if you are a complete beginner? Our html tutorial for dummies with practical lessons will help you finally make such an important breakthrough in website building from the zero level to at least a basic understanding.

In learning website building, as in almost any other business, practice is important. You can re-read the recipe for borscht 1000 times, but this will not make you cook it. You can learn the basic principles of driving a car, but until you get behind the wheel, all this is up to the light bulb. There is undoubtedly some benefit from knowing the theory, but not as much as from real skills.

So, if we are talking about learning html, then there is also theory, but there is practice. The theory in this case is just some kind of series of articles, lessons on the topic of the language, basic tags and their application, etc.

Practice for you begins when you create an html file yourself, write the start code there and begin to study with your own hands how it all works. Wrote a tag, looked how it works. Inserted a picture - checked. Added some attributes, etc. It is practice that makes it possible to quickly understand and remember the main tags. Then you just write them on the machine and you do not need to remember for half an hour how to create a list.

Well, for rare tags, you should always use a dictionary. No one, not a single super layout designer and web developer, I think, knows all the tags by heart. It's just not necessary. If you use a tag once every 10 years, then why keep it in your head? I think it's understandable.

But I would call such a practice just a kind of sandbox game. You just write different tags, trying to deal with everything as detailed as possible, but all for what? There must be some purpose. Usually html and css are studied in order to then create their own web pages and full-fledged sites.

So, the best practice is to take a ready-made website layout and lay it out. Layout is precisely the process of creating web pages from a multi-layered drawing using html and css languages. They can also use frameworks, javascript and application libraries during layout, but this is a topic for another conversation. All this is an addition. Html is a basic technology that needs to be understood very well.

But I will please you - it is basic, it is the simplest. Learning how certain tags work and how to apply them is very easy. In html, there are no complex algorithms, functions, methods, classes, as is the case in programming languages. This is a markup language, it is enough to study it a little, and everything will be very clear.

How to learn the language and where to get practice?

Again, I'm talking about easy learning only if you go the right way. That is, watch sensible video tutorials, where the necessary things are explained step by step, from simple to complex. If you watch lessons that are not built according to this format, then most likely you will simply not understand most of the material.

Fortunately, on our site all the lessons are structured and arranged from simple to complex. Therefore, if you study html according to our lessons, then there will be no problems with mastering the material.

I can assure you that css is more fun to learn! And in some respects even easier. Firstly, css also has quite a few properties and rules that you have to remember. Secondly, this language has a very simple syntax, so even a beginner will have no problems writing code in it. Thirdly, since css is responsible for the appearance of the page, at first you will be delighted that you made the page turn red, and you made a frame for that picture.

In general, learning css is simple and interesting, so I recommend not to delay and start immediately after you finish with the basics of html.

Your final practice

Finally, you have an exam. But don't worry, it will be easy. Moreover, you will not have to do it yourself, but only according to the instructions that are in the lessons. This exam is a course. In it, you will finally achieve the main intermediate goal - make up your first site and get an understanding of how to use html and css in real site building. Let it be a simple site, but the knowledge gained will be enough for you to grow further and create more complex layouts.

HTML is the hypertext markup language that made the web the way we know and love it. It is thanks to this wonderful tool that the sites look beautiful and modern, and the convenience of their use is also ensured. HTML simply arranges the elements of a web page into a user-friendly way. His work is comparable to what MS Word or OpenOffice do. They turn a featureless mass of letters into a document that has paragraphs, bold text, italics, tables, and even images. Approximately the same language does HTML, with the only difference that its documents are displayed in the browser, and the possibilities of this tool are much wider than those of a text editor. For markup, tags are used - special commands that describe the structure of a web page. They are enclosed in angle brackets -<тег>so that the browser can distinguish them from the bulk of the text. Next, we'll cover the basics of HTML for beginners.

Visual editors

Beginners who just set foot on the path of learning HTML often start their work with programs that allow you to create sites without any knowledge. In them, you can simply arrange the elements on the screen as they will be displayed in the browser. It would seem that here it is - a source of eternal grace, allowing you to get rid of most web developers. But not everything is so simple, since visual editors have a lot of shortcomings that make it impossible to use them in serious projects.

All these programs create a lot of unnecessary tags that make the final version of the page cumbersome and suboptimal. Of course, in this age of high-speed Internet, this matters less than before, but there are a number of reasons why a concise and well-written site turns out to be more practical than its counterpart created in a visual editor. A web page made in such a program will be poorly processed by search robots, since every kilobyte of code is important for them, and cumbersome and illogical code with a bunch will hardly be to their liking. In addition, editors are often behind the times, becoming irrelevant, and it is not worth spending resources on their development, since not a single professional uses these products. Therefore, anyone who wants to work in the field of creating websites should know the basics of HTML.

tags

As mentioned above, tags describe the structure of a web page to the browser. Most of them have an opening and closing tag, but not all of them. For example, , where the content is instead of dots. The first one shows where the tag starts and the second closes it. There may be other page markup elements inside, they can be nested inside each other like a nesting doll. It is important to close the tags in a timely manner so that the page is displayed correctly.

There are also single tags that do not need to be closed. In them, the content is inside, just as it can be written for most HTML tags and sets the properties of the element. It is indicated in the opening tag and looks something like this: attribute = "...", where instead of dots there is an attribute value. Knowing the tags is the first and most important step in mastering HTML. The basics of this art also involve understanding the structure of a web page.

Document structure

Every HTML document has a corresponding extension, such as Index.html. So the browser can understand what it is dealing with and display the page correctly. It is advisable to store all the files used to create the site in one directory, which will greatly facilitate your life in the future. The basics of the HTML hypertext markup language require a clear understanding of the structure of a document. It starts with the tag, which tells the browser the version of HTML that is used in this document. At the moment, the fifth version of the language is relevant, so there is no need to invent anything, you can safely insert the above tag at the beginning of any page.

Then come the main paired structures that make up the "skeleton" of the site. The first tag in which all others are nested − .... Anything outside of it is not recognized as a web page by the browser, so it opens the document and closes it. This tag is required for any document. It also contains a few more required tags, which will be discussed below.

head

Inside the tag ... contains technical information that will not be displayed on the page, but is nevertheless an important part of the HTML document. The foundations of the site are laid in this place, here the encoding is selected and the page name is entered. It is contained within a required tag . The name is displayed at the top of the browser, where you can also place a small icon that characterizes the content of the page. It is advisable to immediately specify the encoding of the document for its correct display. This can be done with the tag . Meta tags provide information about the structure of the page and are usually located inside the head.

Link

Knowing the basics of HTML also involves using cascading styles, or css. They set the properties of the elements that will be displayed on the page. The modern approach to this task involves the removal of such characteristics as the color, height and location of the element in an external file for greater convenience. The tag is used to connect the css file . When finished, it looks like this: , where href indicates the location of the file and type indicates its type.

Body

It is in this part of the HTML document that the visible part of the page is created. Everything that is done inside the "body" will be shown by the browser. IN a huge number of HTML tags are used. The basics are text formatting, working with links, and the simplest tools for structuring a web page. To get started in HTML, it is enough to know the basic tags and be able to use them. Below are the most popular ones:

• - used to select a substring that will be subject to a special style described in css;
• - creates a link on a web page; the jump address is set by the href attribute;
• - one of the most popular tags of our time; everyone who decides to learn the basics of the HTMLl language should pay special attention to it, since this is a block element, on the basis of which the lion's share of modern sites is made (parameters for blocks

  are set in css, and other blocks can be placed inside this tag);

• Selects a paragraph from text; the content of the paragraph is between the opening and closing tags;

• - numbered list, the elements of which are enclosed in a pair tag
  1. - a bulleted list, in which, as in a numbered list, elements are indicated by a tag

     • -

       - document headings (the number indicates the level of the heading, that is

       - the main heading, and subsequent options are its subheadings, by the way, the level headings

       ,

       almost impossible to find on the Internet), it is also important to remember that there can only be one heading per page

       ;

     • - thumbnail;
     • - italics;
     • - inserting an image on a web page (this is a single tag, it does not need a closing tag, but it must contain the alt attribute, which specifies the text for the image);

     These are not all the tags you need to create your own web page, but they are enough to lay the foundations of HTML for beginners.

     css

     The development of the HTML language has led to the fact that each tag has acquired a mass of attributes, and the requirements for the appearance of web pages have increased significantly. The code became cumbersome and inconvenient, it was difficult to read it, let alone adapt or change it. In addition, if you have ten pages on your site that have a lot of headings marked in green, and you suddenly want to make them red, then you have to work hard changing each one manually. With the advent of Cascading Style Sheets, this process has become simple and logical, and HTML code has become much more readable.

     

     Applying CSS

     To create web pages, you need to know the basics of HTML and CSS, because today there is nothing to do in this area without knowledge of cascading style sheets. They set attributes for any element that apply to the entire document. Thus, you can set the color for all elements at once

     Or writing only one rule. Given the modern requirements for the appearance of web pages, the use of cascading style sheets is mandatory.

     In order to link a css file to a document, there is a link tag. The principle of its use was described a little higher, but it is not the only option for combining all styles in one place. There is another tag

     using element . The element does not require a closing tag. This element defines the relationship between the current page and other documents. There can be several such elements on a page. The entry will look like this:

     Table 4. Tag attributes

     Attribute	Description, accepted value
     crossorigin	Specifies whether CORS (a browser technology that allows a web page to access resources from a different domain) should be used when fetching an image from a site. anonymous - in a cross-domain request, the browser automatically adds an Origin header containing the name of the domain from which the request was made. If the server does not respond with a CORS header Access-Control-Allow-Origin: * (or a domain name instead of an asterisk), then the image will be blocked from loading. use-credentials - if the server does not provide credentials with Access-Control-Allow-Credentials: true , then the image will be blocked from loading.
     href	The main attribute of the tag, the value is the path to the file with styles.
     hreflang	Specifies the language of the text in the linked document.
     media	Specifies the type of device to which the link resource is to be applied.
     nonce	A server-randomly generated string variable that sets the rules for using inline styles to protect content. The value of the attribute is a string of text.
     rel	The attribute defines the relationship between the current document and the referenced document. alternate - a link to the same document but in a different format (for example, printable pages, translation, mirror, RSS or Atom feed), . archives indicates that the linked document is of historical interest. The link can point to a collection of records, documents, and other materials. author link to the page about the author of the document or to the page with the author's contact details. bookmark A reference to the closest ancestor of the article that is the link, or to the section of the article that is most closely related to the element if there is no ancestor. external is used to indicate that the linked page is not part of this site. first specifies a link to the first document in a sequence of documents. help link to a help document. icon specifies the path to the icon to be used for the current document. last specifies a link to the last document in a sequence of documents. license A link to the copyright information for the document. next indicates that this document is part of a series, and that the link points to the next document in the series. nofollow indicates that the link is not approved by the author of the page, or that the link is commercial. noreferrer specifies that the client request header containing the request source url should not be passed when following the link. pingback specifies the address of the pingback server, which allows the blog to automatically notify sites linking to it. prefetch specifies that the referenced file should be cached beforehand. prev indicates that this document is part of a series and that the link points to the previous document in the series. search indicates that the referenced document contains a search interface and related resources. sidebar indicates that the linked document will, if possible, be shown in an additional browser context, and some browsers, when the hyperlink is clicked, will open a window to add the link to the bookmarks bar. stylesheet is a reference to an external file that will be used as the stylesheet for this document. tag indicates that the tag to which the hyperlink leads belongs to this document. up indicates that the page is part of a hierarchical structure, and that the hyperlink leads to a higher level resource in the structure.
     sizes	Specifies the size of icons for visual display. The sizes attribute is only used in conjunction with rel="icon" , and can take the following values: widths height - defines a list of sizes separated by spaces, each size must be in the format - widths height (icon sizes are specified in pixels), for example: ; any - the icon can be scaled to any size.
     title	Specifies the title of the link or the name of the set of alternative style sheets. The attribute value is text.
     type	Specifies the MIME type of the document being linked to. In this case, it takes the value "text/css" .

     1.2.5. Element

     Tells the browser that everything between these tags should be displayed in your browser window. Here are the main tags that can be present in absolutely every document. The body tag serves as the main body of the page, which includes all of its content. It is desirable to open this tag and do not forget to close it at the end of the document.

     Page titles h1 h2 h3

     Let's move on, we see the tag

     which also opens and closes. This tag denotes the main heading of the text, in most cases under the heading H1 is the title of the page. In fact, there are only six data headers.

     . They are also used in SEO, but this is a slightly different topic. I will definitely highlight one article for this and give a detailed description for them, subscribe to blog updates so as not to miss anything.

     The presence of such a title in the article will play an important role in promoting the page. In addition, using them gives you a clear page structure, its heading, subheadings, highlights, subparagraphs, and so on. Always use them and put them into practice. On many CMS, such as WordPress, when writing text, you will notice "Heading 1", "Heading 2", "Heading 3" and so on. They are responsible for h1, h2 and h3.

     If you write body text from a new paragraph, you write a tag

     At the beginning and close it at the end

     . Designating a paragraph in html is equivalent to creating a new paragraph in a MS Word document. I didn't add anything new to the document. But, this is not all that should be present in the html document. Let's look at another example, the description will be a little later.

     This text will be bold, and this one is in italics

     < ! DOCTYPE html > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < title >HTML document< / title > < / head > < body > < p > < b > < / b > < / p > < / body > < / html >

     Basic Head and Title Elements

     

     Every document has a head element and a title element. The first one , which comes immediately after the first tag . This tag contains all the information about the page, it also contains the element \Page content

     < / html >

     As you can see, there is nothing complicated. Here are the most basic tags that should be present in every html document. Do not forget to close each of them, otherwise the browser will not be able to perceive the full picture of the code. This must be known and remembered always. Then you start to insert text, pictures, videos and so on. But this will be in other articles.

     Notepad++ editor

     

     Use Notepad++ to work with the code. It's free and easy to find online. Very convenient for the perception of any code, it is also convenient to show the opening and closing tags. We support the syntax of more than 40 programming languages. Just what you need to learn the basics of html.

     Notepad is superior in every way to a regular notepad. For maximum convenience, simplicity and study, this editor must first be installed on a computer. The most basic advantage and convenience, the Notepad++ editor shows hints when writing code, which makes your work faster and better at times.

     DOCTYPE element

     Each document must also specify the following doctype element. Why is it needed and what should be in it. Usually people are not very fond of these lines, they copy them into documents and work calmly. These elements tell the browser which version of html is used in the document, which description of the page, which encoding is used, which keywords are included, who the author is, and what the page is called.

     They are usually placed at the very beginning. There are several options and they are all different from each other, I will write one example that is used most often. This blank can be used as a ready-made template. Next, there will be a clear description of each line, there should be no problems with this.

     Briefly in plain language about the basics of html: This line tells the browser that this document is XHTML version 1.0, English is used and all this mess is located at this address. Next, in the meta tag, specify the encoding that is used. Windows 1251 is the most commonly used.

     Description - the topic of SEO is affected, one of the three main tags that must be present in absolutely every document, this tag indicates the description of the page. What is written on this page, a short description, no more than two sentences. The keywords tag also affects the topic of SEO, this tag is required. It contains keywords by which Internet users will find you through search engines.

     The title tag contains the name of the document itself, its title, which we see in the browser. Probably the most important tag in the entire document that has the most impact on page promotion. The article on adding and designing describes this tag in more detail.

     What you need to remember from this lesson about the basics of html:

     1. Almost all tags open and close;
     2. The document starts with a tag ;
     3. Tag presence ;
     4. Tag presence ;
     5. The clear structure of the html document.

     All master pages should always be named with the word index. This is how it is accepted and everyone is used to it, no matter what the extension of the file will be, it can be both html and php. It's always called that.

     Watch the html basics video from Webformyself.

     hypertext markup language, basic elements and structure. All this and much more I will try to describe on my blog. First of all, useful information will be written for beginners, an example code will be provided and the opportunity to download the example itself along with the finished page.

     Everyone uses the Internet and everyone browses various sites, and probably everyone would like to put their site on the Internet, but this is not easy to do, there are many reasons for this. However, in order for you to be able to host a quality site, you just need to know the basics of " WEB programming", which is HTML language. In this article, we will look at the main elements, tags, attributes, and even write the first web page.

     Hyper Text Markup Language- "HTML" ( hypertext markup language) many have long ceased to consider it just a programming language. Since the very concept of HTML includes various methods of designing hypertext documents, design, hypertext editors, browsers, and much more. A user who has mastered this language acquires the ability to do serious things with simple methods and, most importantly, quickly, which is considered very good in the modern world!

     In HTML, you can create your own multimedia products and distribute them on CDs, and all these products, made in the form of sets of HTML pages, do not require the development of specialized software tools, since everything necessary to work with data ( Web browsers) have become part of the standard software of most personal computers.

     • Element (element) is an HTML language construct. This is an object that contains data and allows you to format it in a certain way. Any Web page is a set of elements. One of the main ideas of hypertext is the ability to nest elements.
     • Tag (tag) are the start or end markers of the element. Tags define the scope of elements and separate elements from each other. In the text of a Web page, tags are enclosed in angle brackets, and the end tag is always followed by a slash.
     • Attribute(attribute) - A parameter or property of an element. In other words, this is a variable that has a standard name and which can be assigned a certain set of values: standard or arbitrary. Attribute character values ​​are expected to be enclosed in straight quotes, but some browsers allow quotes not to be used. This is because the attribute type is always known in advance. Attributes are located inside the start tag and are separated from each other by spaces.
     • Hyperlink- a piece of text that is a pointer to another file or object. Hyperlinks are necessary in order to provide the ability to navigate from one document to another.
     • frame (frame) - this term has two meanings. The first is the document area with its own scrollbars. The second value is one image in a complex ( animation) image file (similar to a frame from a movie). It is also possible that instead of the term "frame" in the specialized literature and localized software products, you can find the term "frame" or "frame".
     • HTML file or HTML page - a document created in the form of hypertext based on the HTML language. Such files have the extensions htm or html.
     • Applet (applet) is a program that is transferred to the client's computer as a separate file and launched when viewing a Web page.
     • Script or script ( script) is a program included with a Web page to enhance its capabilities.
     • Extension (extension) is an element that is not part of the language specification, but is used, providing the ability to create a new interesting formatting effect.
     • CGI (Common Gateway Interface) is a general name for programs that, while running on a server, allow you to extend the capabilities of Web pages. For example, without such programs it is impossible to create interactive pages.
     • HTML code - hyper Text Document in its original form, when all elements and attributes are visible.
     • Web page— a document (file) prepared in hypertext format and posted on the World Wide Web.
     • Website (site) is a set of web pages located in one place and interconnected.
     • Browser (browser) is a web browser.
     () - copying files from the server to the client computer.
     • URL (Uniform Resource Locator) or Uniform Resource Locator, the address of some object on the Internet, i.e. a typical WWW URL looks like this: http://www.name.domain/filename.

     All elements of the language can be conditionally divided into three groups. The first includes elements that create the structure of a hypertext document. The use of such elements is a necessary formality that cannot be neglected. The second group includes elements that create formatting effects. Their use is dictated by the specific requirements for the document, the imagination and competence of the developer. The third group includes elements that allow you to control the software installed and running on the client computer. Often such elements are created automatically when a developer uses a hypertext editor or similar program to insert some object into a document.

     Even though the HTML specification is a standard, the language is augmented with new elements ( extensions). Therefore, some Web pages are easier to view with certain browsers. Extensions are created only by well-known companies that develop software for the WWW, and ordinary users can improve their Web pages through programming. Applets allow you to remove the limitations of HTML and give free rein to the developer's imagination.

     HTML Versions

     The first version of the HTML language was developed in the early 90s by Tim BenersLee for one of the popular Mosaic browsers in the past. But back then, neither the browser nor HTML itself had a good use yet. In 1993, HTML+ appeared, and this version also went largely unnoticed. But the spread of the HTML language was due to version 2.0, which appeared in June 1994. And since then there has been an increase in the popularity of the WWW around the world. The standards included in version 2 have taken root so well that they are still used today.

     HTML version 3.0, which appeared about a year later, introduced the ability to draw mathematical symbols ( integral signs, infinity, fractions, brackets, etc.) using elements of the language. But the development of this project slowed down and did not receive further distribution.

     In 1996, HTML version 3.2 appeared. It was a brilliant decision, suffice it to mention that frames were introduced into the language specification and are now very popular with website developers. To this day, all browsers support this version of HTML.

     The official HTML 4 specification ( Dynamic HTML) was developed in 1997. At that time, it was already obvious that the further development of hypertext would be carried out through web programming. This turned out to be much more efficient than introducing new elements into the language.

     Web page structure

     Below is the code of the Web page, which is made in HTML, and using this page as an example, we will analyze its structure, but first, copy all the code into a regular text notepad and click "Save As" and save the file with the html extension, i.e. . write .html after the name

     The structure of the web document Jump to the end of the document<НR> <Н1>Heading 1

     <Н2>Heading 2 <НЗ>Heading 3 <Н4>Heading 4 <Н5>Heading 5 <Н6>Heading 6 <НR>Here is located first link<а name ="list2"> <НR> <р>Should be located here
     the main text of the web page.
     And I, for example, will insert here
     several transfers,
     so that you can
     visually observe,
     how does it work for you
     links within the document
     but if you have a large resolution,
     You just won't notice the transition on the links
     <НR> <а name="list1"

     Go to<а href ="#list">Beginning of document

     In order to understand the structure of a Web page, it is necessary to consider all of its elements that are included in the above code.

     < html>

     Document designation in HTML. One of the principles of the language is multilevel nesting of elements. This element is the outermost element because the entire Web page must be between its start and end tags. According to the idea, this element can be considered as a formality. It has version, lang, and dir attributes, which are rarely used in this case, and allows nesting of HEAD, BODY FRAMESET, and other elements that define the overall structure of the Web page. Naturally, the end tag all such documents are terminated.

     < head>

     The header area of ​​the Web page. In other words, its first part. Just like the previous element, HEAD serves only to form the general structure of the document. This element can have lang and dir attributes.

     < title>

     An element to place the title of the Web page. The line of text located inside this element is displayed not in the document, but in the title bar of the browser window. This element greatly affects the promotion in the search engine. search engines pay special attention to the TITLE tag. My advice: never make a very long text in this tag ( 65 characters is enough).

     <МЕТА>

     This element contains service information that is not displayed when viewing a Web page. Inside it there is no text in the usual sense, so there is no end tag. Each META element contains two main attributes, the first of which defines the data type and the second defines the content.

     < body>

     This element contains hypertext that defines the actual Web page. This is the visible part of the document that the page auto develops and that is displayed by the browser. Accordingly, the end tag of this element should be looked for at the end of the Web page. Inside the BODY element, you can use all the elements for designing a Web page. Inside the start tag of the BODY element, you can place many attributes that serve to set the entire page. Let's consider them in order.

     One of the most useful attributes of this tag, which has an impact on page design, is

     background="path to background file"

     A simpler background design comes down to setting its color

     bgcolor="#FFFFFF"

     The background color is specified by three two-digit hexadecimal numbers that define the intensity of red, green, and blue (rbg).

     Since you can change the background of the page, you can also change the color of the text. This has the following attribute

     text="#RRGGBB"

     The following attribute is used to set the text color of hyperlinks.

     link="#RRGGBB"

     You can also specify a color change for the last hyperlink selected by the user

     <Н1>

     Header element. There are six levels of headings, which are designated as follows.
     <Н1>header
     <Н2>header
     <Н3>header
     <Н4>header
     <Н5>header
     <Н6>header

     Level 1 header is the largest and Level 6 provides the smallest header. For headings, you can use an attribute that sets the alignment to the left, center, or right:

     align="left" align="center" align="right"

     The tag is used to create a new paragraph.

     And to move to a new line without creating a paragraph - tag
     i.e. there is a transfer. These tags do not need to be closed. Of course, if you do not use in the tag

     The ALIGN element, which can set the paragraph alignment:

     Left

     Centered

     Right

     The text between these elements is justified.

     <НR>

     Horizontal line ( horizontal rule) is a very common element. Firstly, because with its help it is very easy and convenient to divide the page into parts. Secondly, because the author of the page has very little choice of such design elements. The element does not have an end tag, but has a number of attributes to align left, center, right, justified:

     • align="left"
     • align="center"
     • align="right"
     • align="justify"

     An HTML document can be very cumbersome, and not very convenient for the user who needs to quickly move to the desired section of the document. To do this, you can use the mechanism of hyperlinks. To do this, place the appropriate labels in the right places in the text.

     <а name=»метка»>Free text

     In this case, a given document line is given a name, and hence another part of the document, or even another document, can be hyperlinked to that label.

     To insert images ( Pictures) in an HTML document, the following tag is used ( provides a full description of the attributes of this tag):
     

     Lists

     (list) were developed in HTML, no doubt influenced by the success of text editors. The list differs from plain text, first of all, in that the user does not need to think about the numbering of its items: HTML takes on this task. If the list is supplemented with new items or shortened, the numbering continues automatically. In the case of unordered lists, HTML prefixes each item with circles, rectangles, diamonds, and other images. In the end, the list takes a decent, form. There are two groups of such tags: one defines the general appearance of the list ( and allow you to specify attributes), while others define its internal structure. Lists can use standard attributes. There are several types of lists.

     The most common is an unordered list ( unordered list). It is presented below:

     • Item 1 of the list
     • Item 2 of the list
     • Item 3 of the list

     The ul element is a kind of selection of the list. It allows you to separate one list from another. The li element stands for each of the items.

     tables

     They are one of the most necessary means of formatting data on a Web page. The main convenience is that the browser takes over the drawing of the entire table. The size of the frame can be automatically adjusted to the size of the browser's viewport and, of course, to the size of the lines of text and figures in the cells of the table. Among other things, tables allow you to solve many design tasks: align parts of the page relative to each other, place images and text side by side, control color design, and so on. When creating tables, the nesting principle is applied: inside the main element of the table (TABLE), a number of elements are created that define rows (TR), and inside these elements there are elements to describe each cell in the row (TD, TH).

     In order to understand the structure of an existing table or develop a new table, there is one rule that the sequence of elements describes the table from top to bottom and from right to left. For example, if a TR element is specified after the TABLE element, this indicates that the description of a new table row begins. Everything after this element will be placed on one line (from right to left). It can be a sequence of TD elements ( cells), another table, and so on. After a new TR element appears, the description of the next line will begin, and so on until the end of the table (tag).
     A table can be aligned horizontally using the align attribute:

     • align="left" - to the left;
     • align="center" - centered;
     • align="right" - to the right.

     The table width can be set exactly in pixels or as a percentage of the page width in the browser window. For example: width=400 or width=50%

     Two attributes are used to control the appearance of the frame. The fact is that the browser creates an image of the frame, simulating its three-dimensionality ( convex) using the difference in the illumination of the faces

     Scenarios

     Almost all webmasters want their pages on the site to have a modern look, be multifunctional, beautiful and dynamic. Standard means HTML is not possible, so various means are used: applets, objects, cascading style sheets, and so on. But the most popular and widespread type ( reception) is the use of scripting.

     A script is a program code that is included in the text of a page in the form source code and executed by the browser when the page is viewed. The script can be written in JavaScript, developed by Netscape, or in Visual Basic Script ( VBScript) developed by Microsoft.

     This tag allows you to separate the text of the script program from other information on the page. The SCRIPT tag must include the language attribute, which defines the language and can take the following values:

     • javascript - JavaScript code;
     • vbscript - VBScript code.

     The type attribute can also indicate a language type, although its use is optional. In order not to break all the rules, you can put the following definition inside the element:

     type="text/javascript"

     One of the coolest features of scripting is the ability to change the content of a page as a result of program execution. But this is only a feature, not a rule. The defer attribute (which takes no value) can be used to “tell” the browser that no such changes will be made. In some cases, this allows you to speed up page loading.

     Of the standard attributes, you can use the charset attribute.

     Script tag ( or a number of such elements) can be placed either inside a HEAD element or inside a BODY element. If the script is inside the BODY element, it is also possible that some browser that does not support the SCRIPT element will perceive the program code as plain text and display it on the screen. To prevent this from happening, the script code is entered as a comment:

     —
     —
     —

     All modern browsers recognize this trick and ignore comment characters. If you need to enter a comment in the text of the script, then a different notation is used for this: two slashes // are entered at the beginning of the line.
     The script code is executed when the page is loaded, i.e. while the content is still visible on the screen. Below is an example of a simple script ( displaying a message in a window).

     —
     —
     —
     —
     —
     —
     —
     —

     This is a simple page, but it includes a one-line script. The alert method displays a message before loading. And it will hang until the user clicks on the OK button, the download will continue.
     There may be a case, for example, the page will be viewed in a browser that does not support scripting, for this the NOSCRIPT element is provided. Modern viewers ignore its content. This element can be used in several ways. For starters, you can display an ad like this inside it: Your browser cannot execute the script required to view this web page!» Secondly, inside the element, you can develop a simplified version of the page, without scripts. Thirdly, you can create a link to another HTML document. The NOSCRIPT element must have an end tag.

     Here we are with you and examined the basics of such a WEB programming language as HTML. Even after reading this short article, you already have an idea, and even the ability to program in this language. Good luck!