), 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 where text can be selected. 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.
— 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 assumed 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
- 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
This section of the site is entirely devoted to two languages for creating a site, namely HTML and CSS. Here you can learn languages step by step, learn everything from the basics to the most difficult moments.
This section is built on the principle of step-by-step study of the material, therefore, before each title of a lesson on HTML and CSS, there is a number corresponding to the serial number of the lesson. This is natural if you want to learn everything from the very basics and not make a mess in your head. If you already know something about the HTML and CSS languages, then you can also find here the knowledge you are missing, or deepen what you have already learned.
This section contains lessons on HTML5 and CSS3 language standards, respectively, if there are any newer versions of these languages, they will also be reflected in the new lessons in this section, and you will definitely find out.
Probably every person who has encountered the creation of a website at least once in their life has certainly heard about such a combination as html and css, I can confidently say that if you want to make websites yourself, then you cannot do without knowledge of these two things.
Once you have a general understanding of what html is in your head, you clearly have a mixed picture, and I think this is not surprising. It's time to move directly to practice and create your first HTML document.
Like the html language, CSS has its own characteristics, rules and structure. In this lesson I will tell you about the basic concepts of the CSS language, its structure, design, and we will make your first CSS style sheet and learn how to connect a style sheet to an HTML document.
Selectors in CSS are the basis of the language itself and learning and understanding them is very important, so in this lesson I will tell you about several more types of selectors and describe their capabilities.
A very important point in creating a website is working with text, and as you understand, you also need to be able to work with text in html, and know what tags there are and how they can be used.
After you have learned all the HTML tags for working with text, now it’s time to move directly to CSS working with text, which will significantly expand your knowledge and capabilities.
CSS has a huge number of all kinds of convenient properties that qualitatively change the appearance, and we continue to study CSS working with text, and in this lesson, we will delve deeper into the topic of working with text and look at new text properties.
Working with images when creating from a website is one of the key points, both when creating a design, as well as when simply laying out or writing any materials for your website.
CSS significantly expands the possibilities of working with any html objects; in this lesson I would like to tell you in detail about the parameters that can be applied to images.
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>
, <br>
, <p>
</i> etc. - all these are tags. <br>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.</p>
<p>There are many tags and they have different purposes.</p>
<p>There are tags that need to be closed. For example, <br>open the tag <i><p>
</i>
<br>and be sure to close the tag <i></p>
</i>
</p>
<p>And there are single tags, for example, this one <i><br>
</i>
.</p>
<p>A tag is a kind of container that can contain text, pictures and other tags...</p>
<p>○ Pay attention to the correct sequence of opening and closing tags:</p>
<p><тэг1>
<тэг2>
<тэг3>
... </тэг3>
</тэг2>
</тэг1>
<i>
</i></p>
<p>The tag that we opened first is closed last, the second one is penultimate, etc.</p>
<p>○ Here is an example of an incorrect sequence of opening and closing tags. With this order, there may be errors on the web page:</p>
<p><тэг1>
<тэг2>
<тэг3>
... </тэг3>
</тэг1>
</тэг2>
</p>
<p>The error was in<тэг1>And<тэг2>
.<br>Be careful when writing code.</p>
<p><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></p>
<p><b>Ready code.</b><br>This is what the finished standard mandatory HTML code for a web page looks like.</p><p>
<!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
In the modern world, sometimes having your own website is as important as, for example, having a phone number or email address. Unfortunately, not everyone can make a beautiful professional website on their own, and sometimes it doesn’t even work out. Ordering from programmers is also not an ideal solution, since not everyone can afford it.
Free HTML website templates will help you get out of this situation. An HTML website template is a set of ready-made static pages for a website on a specific topic. Using this template, you can create a simple website in just a couple of hours, provided you have basic knowledge of HTML markup. In the HTML section, you will gain this knowledge if you spend a couple more hours studying, and if you take the time to study the CSS section, you will be able to fully control the design of HTML website templates and customize them completely to suit your needs.
Another undeniable advantage of website templates is that in most cases they are written by professionals. A professional website template means not only a beautiful and modern design, but also the way the code is written. Search engines look at how your website is written, whether the code is SEO optimized or not, and based on this they lower or increase your position in the search results. Therefore, a good website should not only be beautiful and modern, which is important, but also correctly written in terms of code.
Download free HTML website templates and create your projects in no time.