), but I will introduce them to you a little later.
Now let's talk about "closing" tags. The very name "closing tag" indicates that the tag requires a mandatory closure. This is done in order to clearly limit the part of the text that the tag acts on.
For an illustrative example, take a look at the tag , which is used to highlight text, it sets the font weight to bold. tags And are the borders that define the text selection area. Here is the code where the last line forgot to close the tag :
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. You can do this with styles, or you can use tags. We are (so far) interested in the second option.
- sets the font weight to bold.
- Sets the font to italic.
- Adds underlining to text.
- Designed to emphasize text. Browsers display such text in italics.
- Strikes out text. This tag has been deprecated from HTML5 and is recommended to be used instead.
- Displays text in monospaced text. Removed from HTML5.
- Displays the font as a superscript. The font is displayed above the baseline of the text and at a reduced size.
- displays the font as a subscript. The text is located below the baseline of the remaining characters of the line and reduced in size.
- Designed to emphasize text. Browsers display such text in bold.
- reduces the font size by one compared to normal text. In HTML, font size is measured in conventional units from 1 to 7, and the default average text size is 3. Tag reduces the text by one conventional unit. Nested tags are allowed , with the font size decreasing by 1 with each nested level, but cannot be less than 1.
- increases the font size by one compared to normal text. In HTML, font size is measured in arbitrary units from 1 to 7, and the default average text size is 3. Thus, adding a tag increases the text by one conventional unit. Nested tags are allowed , with the font size getting larger with each level.
- used to highlight quotes in the text. The content of the container is automatically displayed in the browser in quotation marks.
- designed to highlight long quotes within the document. Text marked with this tag is traditionally rendered as an aligned box with indents on the left and right (about 40 pixels) and padding on the top and bottom.
— defines a block of preformatted text. Such text is usually displayed in a monospaced font with all spaces between words. By default, any number of consecutive spaces in the code is shown as one on the web page. Tag
Allows you to bypass this feature and display the text as required by the developer.
— defines a text paragraph. Tag It is a block element, it always starts on a new line, paragraphs of text following one after another are separated by a space between them. The amount of padding can be controlled using styles. If there is no closing tag, the end of the paragraph is considered to be the beginning of the next block element.
.. ..
- HTML offers six headings of different levels, which show the relative importance of the section located after the heading. yes, tag
represents the most important first-level heading, and the tag serves to designate a sixth-level heading and is the least significant. By default, the first level heading is displayed in the largest bold font, the next level headings are smaller. tags ,…,are block-level elements, they always start on a new line, and after them, other elements appear on the next line. In addition, a blank space is added before and after the heading. The tag has the attribute align , which specifies the header alignment, can take the values left - left alignment of title center - center alignment right - right alignment justify — alignment in width (simultaneously on the right and left edges). This value only works for a header that is more than one line long.
- is a container for changing font characteristics, such as size, color, and typeface. Although this tag is still supported by all browsers, it is deprecated and should be deprecated in favor of styles. The tag has 3 attributes: color - sets the color of the text, face - defines the typeface, size — sets the font size in conventional units.
- marks the text as a quote or a footnote to other material. This selection is useful for changing the style of text through 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 character sequence is an abbreviation. With an attribute title a transcript of the abbreviation is given, which allows the abbreviation to be understood by those people who are not familiar with it. In addition, search engines index the full-text version of the abbreviation, which can be used to increase the ranking of the document.
By default, the text enclosed in the container underlined with 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 spreadsheets, 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 Web Fonts?
web fonts 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 about what the tag stores in itself.
, 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
or learn HTML lessons on your own and for free
Do you want to create your website on the Internet? - Very good! HTML lessons will help you with this.
HyperText Markup Language or abbreviated HTML - hypertext markup language of documents, a product of the W3C consortium - underlies almost all existing web pages, which puts it in first place in the hierarchy of tools for creating sites. Particular attention should be paid to studying the lessons in this section.
HTML Lessons These are tutorials on how to create web pages.
HTML Lessons - the first step towards mastering the development of Internet sites.
HTML Lessons and web design lessons are completely different concepts.
New, modern HTML lessons specially designed for beginners .
Syntax HTML quite simple and easy to understand, but this does not mean that the learning process will go smoothly and without errors. There is no need to be afraid of them - they are inevitable. Making mistakes, you get information about how not to act in the future, this information is worth some effort, time, and therefore is especially valuable. This is how knowledge and experience are accumulated.
As you create your first pages, you will enjoy the thought that you are discovering a world that you did not know before and maybe did not even know about its existence - a world of other possibilities - the world of the Web.
Be careful! You may become addicted to a new activity.
New HTML Lessons | HTML code example
Consider its elements:
Tags that define the beginning and end of a document.
Service section. Here are commands for browsers, instructions for search robots, links to remote files, scripts.
Tags that define the main title of the document.
This section contains the entire visible part of the web page.
In the browser we will see Hello World! :
For studying HTML Notepad required. In it, we will manually type the code. That's all... The code is interpreted by web browsing software, ie Internet Explorer, Firefox, Opera, Chrome and other browsers.
This course will present HTML 5 , XHTML and CSS inclusions. This combination is optimal for learning and allows you to significantly accelerate the development of the material.
At present, the specification is already available on the official website of the W3C consortium HTML 5 . The development of the fifth version began in 2007, it is based on XML and in fact it is, supplemented by new elements and attributes, XHTML -eat. Fifth version HTML offers more functionality and simplifies the process of creating interactive sites and web applications. Besides, HTML 5 contains additional elements that provide placement of multimedia content inside the web page.
New HTML has not yet received the status of a recommendation, and its tags, at this stage, are recognized only by some browsers. But despite this, HTML 5 lessons are available today.
Post Scriptum: The Internet consists of an infinite number of pages linked together by hyperlinks through the "Hypertext Transfer Protocol" - HyperText Transfer Protocol or HTTP for short - a protocol for transferring data in the form of hypertext documents. What is HTML ? HTML - Hyper Text Markup Language or hypertext markup language documents.
This article does not claim to be an exhaustive guide to the HTML markup language. It describes the basics of HTML - the basic principles, concepts and definitions of this technology, having mastered which, you can easily move on to learning HTML coding.
cool
Pin it
To study the lesson, download the archive with the necessary files.
HTML is a markup language documents . Correct pronunciation - HTMEL .
Have you ever worked in the Word document editor or similar office applications? You probably know that this species editor has rich features for editing text, arranging elements, inserting pictures, etc.
Why, you ask, write in an article about HTML about word processors? But why. If you figure out what is an office editor? This is an application for editing and displaying documents.
The key word here is document
. That is, we create, edit and view a document in some program, in this case, in an office editor. If we open such a document in a simple text editor, such as Notepad, we will see a lot of strange symbols and signs. This mess of symbols is incomprehensible to mankind, but understandable to computers. Thanks to this internal language, the Word document takes on a certain structure and appearance in the editor itself, and the document appears before us in all its glory with formatted text and pictures in its place.
HTML is a markup language for browser . Word "here is the browser, and the document is the HTML page. This is the very basis of HTML technology, the understanding of which is necessary in order not to confuse the markup language of web documents with programming languages. The name speaks for itself - with the help of HTML we mark up , where the element, image, or text will be shown on the page, and in what order they will appear next to each other.
Yes, simple typing and text formatting in office applications have nothing to do with programming. But the observant reader will notice an important detail - in a word processor we type, edit and format text and pictures using visual buttons and menus, but why is HTML code written by hand? Why study so many technical details of writing markup for a document?
In fact, there are many editors with which you can create and edit HTML pages by analogy with Word. That is, the source HTML code is hidden for us and we do not climb into it.
A sort of Word for HTML. These visual editors are called:
WYSIWYG
editors - W hat Y ou S ee I s W hat Y ou G et. That is, if translated into Russian: what we see is what we get.
I call them "woozies". Although this is not phonetically correct, it clearly indicates the futility of this invention. Beginners very often use such editors to create their first sites. Of course, this is convenient - there is no need to delve into the study of tags, design styles and other, at first glance, unpleasant and complex things. The editor itself will automatically convert our actions into HTML code.
But, as they say, nothing just happens. More specifically, this approach has very serious drawbacks. What prevents everyone in a row from using visual editors to design HTML pages? The fact is that pages formed in this way usually have a lot of extra code, a lot of errors from a semantic point of view. Now, of course, there are no problems with high-speed Internet connection and the difference in page size of 400 kb and 100 kb is not significant for speed, however, an optimized and correctly written HTML code eliminates many problems and provides a lot of advantages, namely:
Competent HTML code has a positive effect on search engine optimization, the speed of crawling a site by a search robot. The generated kilobytes of code here are not acceptable and even harmful;
The HTML code generated by the WYSIWYG editor has many semantic errors. That is, the tags generated by such an editor are used for other purposes, where it is necessary to use, for example, lists , the editor will generate another tag that we don't need. It depends, of course, on the editor, but here we mean complex solutions for creating sites, and not simple text editing in a text area using WYSIWYG tools.
A lot of unnecessary tags are generated and the structure of the document is bloated. Let's say you move an element in such a program, first to the right, then to the left, then to the center - each action leaves a trace in the source HTML code. The editor is a program and it cannot know what exactly you want to get as a result, it generates tons of code, taking into account all possible behaviors of the document in the browser.
As a rule, editors for the visual design of HTML code quickly become obsolete. And due to the lack of interest on the part of professionals, they generally lose support and stop in development. And HTML is evolving. Everything develops, except vuzivugi. Accordingly, they cannot generate correct and up-to-date code that would involve new features and solutions.
To support and develop such projects is heavenly punishment. There can be no talk about using patterns and reusing code at all.
So, we will write HTML only with pens. Adequate tools for visual HTML editing not yet invented, and they are unlikely to appear. The HTML markup language is easy to learn and understand, and there are many automation tools for writing HTML code, but more on that in other lessons.
After fiddling around with the WYSIWYG editor for a bit, young HTML gurus leave this futile task and move on.
HTML document structure
I recommend downloading and installing the Sublime Text editor for classes. I strongly do not recommend using the Notepad built into Windows for HTML layout if you do not want to break your psyche in the early stages of learning HTML.
We decided that the code HTML document we will write by hand, that is typeset . HTML layout - the process of creating an HTML document. In the common people and knowledgeable circles - just layout. Any document has a structure and certain construction rules. What elements does the code consist of, what is the structure of HTML?
Let's create an initial template on the computer - file index.html , open it with an editor and paste the following code into it:
header
Document Body
Note that HTML documents have the extension .html .
So, in order from the example.
- document type (doctype)
This construction is always indicated at the beginning of the document so that the browser correctly "understands" which version of HTML is used when building the document.
Due to the fact that HTML is constantly evolving, it has several versions, like any software product. The current HTML version is the fifth and given in the example doctype is up to date.
In principle, there is no point in delving into the study of document types, because with the release of HTML5, this design has become the standard. Just paste it at the beginning of the document every time you start laying out the layout of the site.
- the beginning of the document
The first tag we see after the doctype is .
HTML tag - structural unit of markup of an HTML document. HTML code is made up of building blocks called tags. Each tag has its own function, and learning the HTML markup language is ultimately about learning the tags and their properties in the document.
I would like to note that learning HTML is not such a difficult task as it might seem at first glance. Learning the tags used in document markup is not such a big load on the brain.
So, the document markup starts with the tag and ends with a closing tag. Each tag that contains other tags or elements must be closed closing tag . For example, , ,
, etc.
Tag is required because it contains the entire structure of the document and wraps the rest of the elements.
Tag
Next, we see tag
, which contains other elements that are not yet clear to us. Contains other elements - this means that the elements or tags are between the opening and closing tags of the construct:
<тег>content or other tagsтег>
Tag
is designed to store the meta-information of an HTML document, that is, information that is not displayed in the document itself, but is important and largely determines how the document will look and behave. This tag is required in the document.
Tag - title of the document
header
header
is an required tag A that contains textual meta-information that is displayed in the title of the browser or tab. Tag must be in the tag . Also, the content of this tag is used by search engines to display the document in the search results.
Meta tag
Meta tag - a specialized tag designed to provide structured data about a page. Meta tags are most often used in a tag
. Meta tags are optional in structure HTML document.
Favicon (favicon)
Attaches a file with a favicon image to the document. Favicon (favicon) - a miniature icon displayed next to the document name in the browser tab. A favicon is a 16 x 16 (or 32 x 32) pixel graphic file that can be in various formats such as png, jpg, ico, gif. The ico format is traditionally used. Animated favicons are gif files containing animation. You can watch an animated favicon, for example, on VKontakte when a new message arrives.
CSS document styles
Attaches an HTML styling file to a CSS document.
css - cascading styling of the HTML document. Each tag that is in the tag
, there is a set of properties, such as - color, width, height, position relative to other elements. All these properties are CSS styles that can be taken out to an external file. Design connects external files to the HTML document, including CSS styles.
Note: property href designs specifies the location of the external file. In our example, the file style.css And favicon.ico , are located in the same folder as the file index.html . does not have a closing tag.
Tag
Tag