What is involved in the Hypertext Markup Language?
Content
1. What is HTML?
2. Structure of an HTML element.
3. Nesting of elements.
4. The empty elements.
5. Structure of HTML documents.
6. Images.
7. Text marking.
7.1 The headings.
7.2 Paragraphs.
7.3 The lists.
8. Links.
Developers use HTML to create web pages, the programs that are used produce pages written in HTML and the most recognized browsers such as Google Chrome, Opera and Mozila Firefox present web pages after reading and interpreting their content. HTML.
This tells us something very obvious, the Hypertext Markup Language is essential in web development.
HTML comes from its acronym in English Hypertext Markup Language. The design of a web page in HTML is something very easy to learn even for those who confess not technical and from which you can get a lot of benefit from it.
What is HTML?
It can be said that it is not exactly a programming language, but a marked language that establishes the structure of a content. It is a set of elements that the user uses to enclose various parts of the content so that they look and have a certain behavior.
Enclosure tags can convert a word, image, or hyperlink to another site. Words can be italicized, made bigger or smaller.
Take, for example, the sentence "My dog is very happy."
If you want to establish that it is a paragraph, you just have to enclose the text with the <p> tag, and it would look like this:
<p> My dog is very happy </p>
Structure of an HTML element
The main components are the following:
Opening tag : This is the name of the element, which is p, and is enclosed by opening and closing angle brackets (<>). It is to establish where the element begins to take effect, that is, where the paragraph begins.
Closing tag : Similar to the opening tag, only it includes a closing slash (/) before the tag name. Shows where the element ends, in other words where the paragraph ends.
Content : This is the content of the element that at this moment is only text.
The element : is the sum of the opening tag, the closing tag, and the content.
Attributes have additional data linked to the element, so you certainly don't want it to appear in the actual content of the element. The attribute must always have the following:
Space between this and the name of the element, or of the previous attribute, assuming that the element already has one or more elements.
The name of the attribute accompanied by the sign (=).
Opening and closing quotation marks, with the value of the attribute enclosed.
"Remember that attributes should always be included in the opening tag of an element, they should never be included in the closing tag."
Attributes with simple values and that do not contain ASCII blanks or these "'` = <> characters may still be without quotation marks, but it is recommended to enclose each attribute value, as this results in the code being more consistent and compressibility.
Let's take an example to better understand the idea:
<p class = "editor-note"> My dog is very happy </p>
In this case the attribute would be: class = "editor-note"
Element nesting
It is possible to place elements within other elements, and this is what is known as nesting. In case you want to highlight a word in the text, such as the word "very", you can enclose it within a <strong> element. Which means that word should be emphasized.
For example: <p> My dog is <strong> very <strong> happy. </p>
Try to ensure that the elements are nested properly. Each element should be opened and closed as it should, so that they can be clearly found inside or outside each other.
In case these are overlapping, the web browser will try to guess what you are trying to say, but you may get results that you do not expect.
The empty elements
Certain elements have no content and are known as "empty elements". Like for example the <img> element of our HTML.
<img src = "images / firefox-icon.png" alt = "My test image">
It has two attributes, but it does not have a closing </img> tag and no enclosed content. This is because a picture element does not contain content to affect. The goal is to display an image on the HTML page on the site that appears.
Structure of HTML documents
Individual HTML elements are not very useful on their own, as they are combined to create a complete HTML page.
1. <DOCTYPE html> It is the document type, in fact it is a necessary preamble. In the 1990s, document types behaved like links in relation to a set of rules that the page's HTML code must follow in order to be considered good.
This meant automatic error checking and other very useful things. Nowadays, it is considered old-fashioned, but it must be included for things to work properly.
2. <html> </html> It is responsible for enclosing all the content of the entire page and is sometimes known as the root element.
3. <head> </head> Its function is to contain everything that you want to include in the HTML page and that is not content that can be seen by those who visit the page.
Include keywords, that is keywords, a description of the page that you want to be visible in the search results, CSS code for the content to be styled, character set declarations, among others.
4. <meta charset = utf-8"> Its function is to establish the character set that your document will use in utf-8, it wraps almost all the characters belonging to all human languages.
Actually, it can handle whatever text content you want to include. Therefore, there is no reason why it should not be established, and it is capable of preventing future inconveniences.
5. <title> </title> It is used to establish the title that your page will carry, which is the same title that is seen in the tab and in the title bar of the browser when the page is loaded, and is used for the description of the page when it is added to bookmarks or favorites.
6. <body> </body> It serves to enclose all the content that you want to show to the visitors of your website, it could be text, image, video, games, audios, etc.
Images
His job is to embed images on a page, in the position in which it appears. It does this through the src (source) attribute which in turn contains the path or location of the image file.
<img src = "images / firefox-icon.png" alt = "My test image">
The alt attribute is included, which has a text that should describe the image and that users who cannot see the image can access it, for the following reasons:
They are completely blind or have poor eyesight.
These users often use tools known as "Screen Readers", which read the text contained in the alt attribute.
Some error occurred in the code preventing a certain image from loading.
Deliberately changes the location within the src attribute so that it is not correct. When saving and reloading the page, it should show something like this on the screen:
My test page.
The key phrase of the alt text above is "text that should describe the image." This text should give the reader the necessary data so that he can have an idea of what is seen in the image. So the current text "My test image" is not good at all.
Text marking
The headers.
They make it possible to specify some parts of the content. Just as a book has a main title, and at the same time it can have titles for each chapter and subtitles within these. Similarly, an HTML document can have them.
In HTML there are six levels, ranging from <h1> to <h6> although generally only 3 or 4 are used.
2. The paragraphs.
The <p> element is used to enclose paragraphs of text. Typically used for markup of regular text content.
3. The lists.
These are used in web content and HTML has special elements for them. This list markup is done on at least two elements. There are two kinds of lists: the unordered <ul> and the ordered <ol>
Links
Also known as links, these have a lot of relevance, since they turn the web into what it really is. To implement it you only require the <a> link.