We have already seen the basic structure of an HTML page, now let’s see how to proceed when working with HTML and then the basic tags to start adding content to our pages.
Índice de contenidos del artículo
The first thing to keep in mind is that we write the web pages with HTML in a text editor and we view them in the browser, therefore, it is normal to have the document open with both applications at the same time, so that when we save the changes in HTML, we just have to refresh the page in the browser to see the changes.
When we save the HTML document with the extension .html, that file is associated with the predefined browser in the system, so that when you double-click to open it it will open in the browser.
To open it also with a text editor under Windows, we right-click, select the option Open with… and then the desired text editor, such as Notepad.
Summary of the procedure for working with HTML:
Web editors are applications that help us when writing code for web pages.
We can do it with any text editor, such as the Windows notepad, but the truth is that a specific editor helps us a lot, since it puts different colors on the labels and reserved words to facilitate reading, they have autocomplete systems, and endless other functions that undoubtedly make our lives much easier.
Additionally, in recent years the so-called Code Playgrounds have proliferated, web applications that include a code editor and interpreter in which we can directly see the results of those we program.
Well-known examples are JSFiddle or CodePen, with which you will see that I embed examples in other articles in this sequence of articles about web design.
All the text that we have in the body of the page appears on the same line, it does not matter if when we create the page we have each word in a different line, (that is, a browser does not take into account the ENTER key).
To indicate to the browser that we want it to continue in the next line we must do it with the HTML element
.
When the label appears
the browser continues with the text on the next line. It is one of the few HTML elements that has no closing clause.
Here is an example of a page showing car brand names, one per line:
<html>
<head>
</head>
<body>
Seat<br>
Opel<br>
Mercedes Benz<br>
Lancia<br>
Fiat
</body>
</html>As we can see we have only added the br> tag <every time we want to start a line. Keep in mind that it is the same if we place the br label on the same line or on the following:
PHP<br>it’s the same:
PHP
<br>To remember the names of the HTML elements it is good to see what the full word is:
<br> comes from break.
A paragraph is a phrase or set of sentences referring to the same topic. Everything we lock between the brands
Within a paragraph there may be line breaks.
Let’s see with an example how to have two paragraphs:
<html>
<head>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer.</p>
<p>Cum sociis natoque penatibus et magnis...</p>
</body>
</html>We have in this HTML page two paragraphs, when the browser interprets this page, it separates the contents of the two paragraphs with a horizontal space.
When we modify the browser window the paragraphs are automatically placed according to the width of the window.
To remember the name of this HTML mark:
<p> comes from paragraph.
Note: The Latin texts in this example have been generated with an automatic fill text generator. There are many, Blind Text Generator is a very useful one since it allows us to configure the number of words and paragraphs that we want to obtain.
Other HTML elements widely used are to indicate the titles, for this we have the elements:
The highest level title is H1. Depending on the importance of the title, we will use some of these HTML elements, creating a hierarchical structure as in a numbered scheme of several levels.
They require a closing clause.
Example of a page that contains a first-level
<html>
<head>
</head>
<body>
<h1>Data Types</h1>
<h2>varchar</h2>
<p>
It is used to store character strings. A chain
It is placed between quotes (single): 'Hello'.<br>
Besides...
</p>
<h2>int</h2>
<p>
Used to store integer numeric values, from -200..
approximately...
</p>
</body>
</html>
Each title always appears on a different line, it does not matter if we write it often in the file, that is, the result will be the same if we do:
<h1>Data types in MySQL</h1>
<h2>varchar</h2>or this:
<h1>Data types in MySQL</h1><h2>varchar</h2>The browser arranges each title on a new line.
Remember that HTML has no responsibility to indicate the size of fonts. The browser will define the font size according to the level of title that we indicate. The largest size is level 1.
<h1> comes from heading
We may include comments within our code. The comments are not seen in the browser, they serve to explain what we developers do internally.
<!--This is a comment
<B>As it is a <i>comment</i></B> it will not appear...
<p>Not even HTML tags will have value</p>-->It is highly recommended to get used to using comments to increase the readability of our code and thus facilitate its manipulation by third parties or by ourselves in the future.
Emphasizing something means enhancing the importance of a thing, for example a word or set of words.
To emphasize texts we have the elements and <em> and <strong>
The element of greatest strength of emphasis is strong and followed by
Let’s see an example of the use of these two HTML elements:
<html>
<head>
</head>
<body>
<p><strong>Data types</strong> in MySQL</p>
<p><em>TEXT</em>: To store text we use strings...</p>
<p><em>NUMBERS</em>: There are a variety of numerical types
to represent integers, negatives, decimals. </p>
<p><em>DATES AND TIMES</em>: to save dates and times you have
of several types: date (date), datetime (date and time),
and timestamp.</p>
</body>
</html>We can see that the syntax for the strong element is:
<strong>Types of data</strong>Most browsers display the text emphasized with strong with a bold text and for the em element they use italics.
Another important thing that we can note is that these HTML elements do not produce a line break like the title ones (h1,h2 etc.)
To remember the name of these HTML elements:
<em> comes from empathize which means emphasis. <strong> comes from strong which means strong.
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
Body of the page.
</body>
</html>The title tag serves to indicate the title of the page and is also what is displayed in the browser tab. Normally the pages have the name of the website or brand followed by the name of the page.
From now on do not forget to include the title on all pages. It is also of vital importance in SEO.
