), but I'll introduce you to them a little later.
Now let's talk about closing tags. The very name "closing tag" means that the tag requires mandatory closing. 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 to bold. Tags: and are the borders that define the selection area of the text. Here is the code where the last line forgot to close the tag :
My first site
Hello everybody! And this is my first site. Hello everybody! And this is my first site.
As you can see, there is nothing complicated, now you can create several linked pages.
Tags for highlighting text
There are several ways to highlight text on a page. You can do this using styles, or you can use tags. We are (for now) interested in the second option.
- sets the font to bold.
decreases the text by one conventional unit. Nested tags are allowed , while the font size will be smaller by 1 with each nested level, but cannot be less than 1.
increases the text by one conventional unit. Nested tags are allowed , the font size will be larger with each level.
- designed to highlight long quotes within a document. Text designated with this tag is traditionally displayed as an aligned box with left and right padding (approximately 40 pixels) and padding at the top and bottom.
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, always starts on a new line, paragraphs of text following each other are separated by a padding. The amount of padding can be controlled using styles. If there is no end tag, the end of the paragraph is considered to be the beginning of the next block element.
..
represents the most important first-level heading, and the tag serves to denote a sixth level heading and is least significant. By default, the first level heading is displayed in the largest bold type, the headings of the next level are smaller in size. Tags: ,…,refer to block elements, they always start on a new line, and after them other elements are displayed on the next line. In addition, white space is added before and after the heading. The tag has an attribute align , which determines the alignment of the title, can be left - alignment of the title to the left, center - center alignment, right - right alignment, justify - justified alignment (both right and left). This value only works for a header that is more than one line in length.
color - sets the color of the text, face - defines the typeface, size - sets the font size in conventional units.
in italics.
title the decoding of the abbreviation is given, which makes it possible to understand the abbreviation for 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 improve the ranking of the document.
By default, the text enclosed in the container underlined by a dotted line.
Below is the code where 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. 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 about what the tag stores in itself.
, we will learn how to perform all sorts of image manipulations, and get acquainted with tables.
When writing this article, the description of some of the tags was taken from here
HTML ( H yper t ext M arkup L anguage) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.
So what is HTML?
HTML is not a programming language; it is a markup language that defines the structure of your content. HTML consists of a series of elements , which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing for paragraph. Note that the end tag "s name is preceded by a slash character>", and that in empty elements the end tag is neither required nor allowed. If attributes are not mentioned, default values are used in each case. "> Tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:
My cat is very grumpy
If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:
My cat is very grumpy
Anatomy of an HTML element
Let "s explore this paragraph element a bit further.
The main parts of our element are as follows:
The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets ... This states where the element begins or starts to take effect - in this case where the paragraph begins.The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends - in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.The content: This is the content of the element, which in this case, is just text.The element: The opening tag, the closing tag and the content together comprise the element.Elements can also have attributes that look like the following:
Attributes contain extra information about the element that you don "t want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value ... The class attribute allows you to give the element an identifier that can be used later to target the element with style information and other things.
An attribute should always have the following:
A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
The attribute name followed by an equal sign.
The attribute value wrapped by opening and closing quotation marks.
Note : Simple attribute values that don "t contain ASCII whitespace (or any of the characters" "'=< >) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable.
Nesting elements
You can put elements inside other elements too - this is called nesting ... If we wanted to state that our cat is very grumpy, we could wrap the word "very" in a) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type. "> element, which means that the word is to be strongly emphasized:
My cat is very grumpy.
You do however need to make sure that your elements are properly nested. In the example above, we opened the element represents a paragraph. ">
element first, then the) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type. "> element; therefore, we have to close the) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type. "> element first, then the element represents a paragraph. "> element. The following is incorrect:
My cat is very grumpy.
The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. So don "t do it!
Empty elements
Some elements have no content and are called empty elements ... Take the element embeds an image into the document. ">
This contains two attributes, but there is no closing tag and no inner content. This is because an image element doesn "t wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.
Anatomy of an HTML document
That wraps up the basics of individual HTML elements, but they aren "t handy on their own. Now we" ll look at how individual elements are combined to form an entire HTML page. Let "s revisit the code we put into our index.html example (which we first met in the Dealing with files article):
My test page
Here, we have the following:
- the doctype. It is required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However these days, they don "t do much, and are basically just needed to make sure your document behaves correctly. That" s all you need to know for now.
- the element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element. "> element. This element wraps all the content on the entire page and is sometimes known as the root element.
- the element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets. "> element. This element acts as a container for all the stuff you want to include on the HTML page that isn "t the content you are showing to your page "s viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations and more.
element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark / favorite it.</li>
<li><body></body>- the element. This contains <i>all</i> the content that you want to show to web users when they visit your page, whether that "s text, images, videos, games, playable audio tracks or whatever else.</li>
</ul><h2>Images</h2>
<img src='https://i0.wp.com/images/firefox-icon.png' loading=lazy loading=lazy>
<p>As we said before, it embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.</p>
<p>We have also included an alt (alternative) attribute. In this attribute, you specify descriptive text for users who cannot see the image, possibly because of the following reasons:</p>
<ol><li>They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.</li>
<li>Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your src attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:</li>
</ol><p><img src='https://i1.wp.com/mdn.mozillademos.org/files/9349/alt-text-example.png' height="36" width="108" loading=lazy loading=lazy></p>
<p>The keywords for alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth."</p>
<p>Try coming up with some better alt text for your image now.</p>
<h2>Marking up text</h2>
<p>This section will cover some of the essential HTML elements you "ll use for marking up the text.</p>
<h3>Headings</h3>
<p>Heading elements allow you to specify that certain parts of your content are headings - or subheadings. In the same way that a book has the main title, chapter titles and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1> – <h6>, although you "ll commonly only use 3 to 4 at most:</p><p>
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
</p><p>Now try adding a suitable title to your HTML page just above your element embeds an image into the document. "> <img>element.</p>
<p><b>Note</b>: You "ll see that your heading level 1 has an implicit style. Don" t use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO. Try to create a meaningful sequence of headings on your pages, without skipping levels.</p>
<h3>Paragraphs</h3>
<h3>Lists</h3>
<p>A lot of the web "s content is lists and HTML has special elements for these. Marking up lists always consist of at least 2 elements. The most common list types are ordered and unordered lists:</p>
<ol><li><b>Unordered lists</b> are for lists where the order of the items doesn "t matter, such as a shopping list. These are wrapped in a element represents an unordered list of items, typically rendered as a bulleted list."> <ul>element.</li>
<li><b>Ordered lists</b> are for lists where the order of the items does matter, such as a recipe. These are wrapped in an element represents an ordered list of items, typically rendered as a numbered list. "> <ol>element.</li>
</ol><p><img src='https://i2.wp.com/mdn.mozillademos.org/files/9351/finished-test-page-small.png' width="100%" loading=lazy loading=lazy></p>
<p>If you get stuck, you can always compare your work with our finished example code on GitHub.</p>
<p>Here, we have only really scratched the surface of HTML. To find out more, go to our topic.</p>
<p>HTML is the hypertext markup language that made the Internet what we know and love. It is thanks to this wonderful tool that sites look beautiful and modern, as well as their ease of use is ensured. HTML simply arranges the elements of a web page into a user-friendly way. Its work is comparable to what they do like MS Word or OpenOffice. They transform a faceless mass of letters into a document that contains paragraphs, bold text, italics, tables, and even images. The HTML language does roughly the same thing, with the only difference that its documents are displayed in a browser, and the capabilities of this tool are much wider than that 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 go over HTML basics for beginners.</p><h2>Visual editors</h2><p>Newbies who have 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, as visual editors have a lot of drawbacks that make it impossible to use them in serious projects.</p><p>All of these programs create a lot of unnecessary tags that make the final page cumbersome and sub-optimal. Of course, in our age of high-speed Internet, this is less important than before, but there are a number of reasons why a laconic 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 to them, and cumbersome and illogical code with a bunch will hardly be to their taste. In addition, editors often lag behind the times, becoming irrelevant, and spending resources on their development is impractical, since no professional uses these products. Therefore, anyone who wants to work in the field of website building should know the basics of HTML.</p><h2>Tags:</h2><p>As mentioned above, tags describe the structure of a web page to the browser. Most of them have start and end tags, but not all. For example, <title>... where content is instead of dots. The first one shows where the tag starts and the second one closes it. Inside there can be other elements of the page markup, they can be nested into each other like a nesting doll. It is important to close tags in a timely manner so that the page is displayed correctly.There are also single tags that do not need to be closed. They contain the content 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 the attribute value is located instead of dots. Knowing tags is the first and most important step to 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, for example Index.html. This will allow the browser to understand what it is dealing with and render the page correctly. All files used to create a site should be stored in one directory, which will make your life much easier in the future. The basics of the hypertext markup language, HTML, presuppose a clear understanding of the structure of a document. It starts with a tagwhich 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 here, you can safely insert the above tag at the beginning of any page.
Then there are the main paired structures that make up the "skeleton" of the site. The first tag in which all the others are nested - ...... Anything outside of it is not recognized by the browser as a web page, 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 appear on the page, but is nevertheless an important part of the HTML document. The foundations of the site are laid exactly in this place, here you select the encoding and enter the name of the page. It is contained within a required tag ... ... The title is displayed at the top of the browser, where you can also place a small icon characterizing the page content. It is advisable to immediately indicate the encoding of the document for its correct display. This can be done using the tag Link Knowing the basics of HTML also involves using cascading stylesheets, or css. They set the properties of the elements that will be displayed on the page. The modern approach to this task involves transferring characteristics such as color, height and location of an element to an external file for greater convenience. To connect the css file, use the tag
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 basic tools for structuring a web page. To get started in HTML, you just need to know and use basic tags. Below are the most popular ones:- it is used to highlight a substring that will be covered by a special style described in css; - creates a link on a web page; the jump address is specified 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 located inside this tag);
Extracts a paragraph from the text; the content of the paragraph is between the opening and closing tags;
- a numbered list, the elements of which are enclosed in a paired tag - a bulleted list, in which, as well as in a numbered list, elements are indicated by a tag -- headings of the document (the number indicates the heading level, that is - the main heading, and the subsequent variants are its subheadings, by the way, the headings of the levels , almost impossible to find on the Internet), it is also important to remember that there can be only one heading on a page ; - thumbnail; - italic; - inserting video into a web page; - a tag that inserts an audio file into the document. These are just a few of 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. Plus, if your site has ten pages with a lot of headings marked in green, and you suddenly want to make them red, then you have to sweat, changing each one by hand. With the advent of Cascading Style Sheets, this process has become simple and logical, and the HTML code has become much more readable.
Applying CSS To create web pages, you need to know the basics of HTML and CSS, as nowadays 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 by writing just one rule. Considering modern requirements for the appearance of web pages, the use of cascading style sheets is a must.
In order to connect a css file to a document, there is a link tag. The principle of its use was described a little above, but it is not the only option for combining all the styles in one place. There is also a tag'); var formated_str = arr_splits [i] .replace (/ \ surl \ (\ '(?! data \:) / gi, function regex_function (str) (return' url (\ '' + dir_path + '/' + str.replace (/ url \ (\ '/ gi,' ') .replace (/ ^ \ s + | \ s + $ / gm,' ');)); splited_css + = "";) var td_theme_css = jQuery ('link # td-theme-css'); if (td_theme_css.length) (td_theme_css.after (splited_css);))));))) ();
