Basic HTML tutorial: create your own web project – Part 2

In this Tutorial I will discuss about a brief introduction of Intro to HTML: create your first page and how to structure text with tags in HTML. So let’s learn about this.

Index

1. Intro to HTML: create your first page
2. Basic HTML: how to structure text with tags

 

Intro to HTML: create your first page

In the first step of our HTML tutorial, we will show how to create a simple page that can be viewed in the browser. This page is not a valid HTML document, structured according to certain quality standards, but a mere test page. Both for creating this page and the rest of the�examples contained in this basic�HTML manual, the�Notepad ++ editor is used as a reference tool, so if you use a different program, you will have to bear in mind that the steps may vary.

Open the editor and save a new document with the test’s name as�the file format choose�“Hypertext markup language file” so that the browser can later understand that it is an HTML page and open it as such. In case you use the simple text editor, select “All files” as the file format and the UTF-8 encoding. In this editor, you have to indicate that it is an HTML document manually. We will do this by saving the file with the name�test.html.

This document should be displayed in your browser by double-clicking on it, but since it does not have any content yet, you will see a blank page. In the next step, we then add a�test text like ”�This is my first webpage! ” (“This is my first webpage”). We save the document and reopen it. You should see something like this when you open it in your browser:

Basic HTML: how to structure text with tags

This way, you will have created a first web page, even without having written a single line of code. If, in the same way, you try to add�well-articulated text with headings and paragraphs, you will soon realize that it is impossible to do it without labels. Any formatting added, for example, with a word processor, will�disappear from view in the browser when you open the HTML document: the dots disappear, the spaces are removed, and so on. The solution inevitably involves marking all the formal text components as such by means of the appropriate structuring elements, which is nothing more than delving into the world of HTML tags.

Define paragraphs with the <p> tag

This element, whose nomenclature comes from the English “paragraph” (“paragraph”), is necessary to create separations by paragraphs. The starting tag�<p> marks where the paragraph begins and the closing�</p> tag where it ends. The text is written between these two labels.

In all versions of HTML, except XHTML,�the closing tag is optional, although it is a good idea to get used to using it not only during training but also because it denotes good style.

You can try marking paragraphs with the�<p> tag on your test page by adding another sentence (”�This is the second paragraph of my first webpage” in this example or “This is the second paragraph of my first web page”) to that first and marking them with the label, for example, like this:

<p>This is my first webpage!</p><p>This is the second paragraph of my first webpage.</p>

Note: it would not really be necessary to separate the phrases as we have done here, since the browser, which is only capable of interpreting the labels, does not care how we read it. If it has been written like this, it is merely for better visualization.

This would be the result in the browser window:

Add titles and subtitles with the <h> tag.

Titles are also among the basic elements of a well-structured text. Thanks to the structural markers, you can not only mark a title as such, but you also can create a hierarchy of main and secondary titles. For this, you have the tags�<h1> to�<h6>, although�<h1> represents the main headline of each subpage, and it should only be used once, unlike all the others from�<h2>.

Here, it is important to maintain the�correct hierarchy and not use the different levels randomly so that both the reader and the searcher can understand the text’s structure from the different titles.

To add a main title and a secondary title to this first test page, you can use the following commands:

 

<h1>Main heading: my first webpage</h1> <p>This is my first webpage!</p> <h2>Second heading</h2> <p>This is the second paragraph of my first webpage.</p>

Note: as it is a very simple HTML document without metadata, some browsers, such as Firefox, do not display accents or special characters correctly. For this test, it would be advisable to use Google Chrome or translate them to�HTML entities.

In the explorer, it will look like this:

Highlight words or text fragments: <i>, <em>, <b> and <strong>

Among the basic elements of HTML formatting, there are also those tags that allow individual words, phrases, or text fragments to be highlighted in some way, to direct the reader’s attention to key content or functional elements and help them to perceive them. To�accentuate phrases, technical expressions, quotes or reflections�in italics, we can use the�<i> (italic) and�<em> (emphasis) tags�.�However, use italics with caution, as it slows down reading. More important, however, are�the�<b> (bold) and�<strong> (strong emphasis) elements, which are highlighted in bold, although with differences in their use. The�<b> tag should be used to mark those elements that should be particularly drawn to the user’s attention, while�<strong> is intended to highlight�relevant content.

We’ll see it by expanding our test page with some formatting tags:

 

<h1>Main heading: <i>my first webpage</i></h1> <p>This is my<strong>first</strong>first webpage!</p> <h2>Second heading</h2> <p>This is the second paragraph of my <em>first webpage</em>.</p> <p><b>Note</b>:Typical example for the<b>-tag.</p>

Note : so that the HTML code example of the added passage is not displayed as plain text we have translated the brackets (<and>) as HTML entities ( & lt; and & gt; ). You still need to take accents and other special characters into account.

Create lists with the <ul>, <ol> and <li> tags

Not only when making the purchase, but we also resort to the lists. Also, in text editing, they are revealed as a very useful means to�decongest paragraphs and optimize reading. With HTML you can create lists with or without numbering (with bullets or periods) with the tags�<ol> (“ordered list” = ordered list) or�<ul> (“unordered list” = unordered list) respectively. To define the list points, use�<li>, which�can only be used if combined with the two mentioned�list tags.

Now you can test it on your test page:

<ul> <li>first unordered-list item</li> <li>second unordered-list item</li> <li>third unordered-list item</li> </ul>

Create lists with the <ul>, <ol> and <li> tags

Not only when making the purchase, but we also resort to the lists. Also, in text editing, they are revealed as a very useful means to�decongest paragraphs and optimize reading. With HTML you can create lists with or without numbering (with bullets or periods) with the tags�<ol> (“ordered list” = ordered list) or�<ul> (“unordered list” = unordered list) respectively. To define the list points, use�<li>, which�can only be used if combined with the two mentioned�list tags.

Now you can test it on your test page:

If, on the other hand, you want to create a numbered list, you just have to change the label that defines the type of list and mark it as an ordered list with�<ol> :

 

<ol> <li>first ordered-list item</li> <li>second ordered-list item </li> <li>third ordered-list item </li> </ol>

As a consequence, a numbered list appears instead of the bullets:

Test page with a three-element numbered list

Present information in tables: <table>, <tr> and <td>

It was common for a long time to use HTML tables to�present complex data in a simpler way and structure the entire design of a web page or subdivide the text into several columns. However, with the increase in the popularity of CSS, this�extra role of tables went into the background, in such a way that today tables only assume the function for what they were intended, that is, the presentation of data in an orderly way. Tables are made up of at least these three elements:

• <�table>: this tag marks the beginning and the end of a table in HTML, although by itself it does not inform the browser of aspects necessary to display such as the number of rows or columns.
• <tr>: with the “table row” element, as many rows are added to the table as necessary.
• <td> – Columns complete the basic structure of a table. For this, we need the “table data” tag, which is subordinate to a <tr> tag, since, within a row, several cells are created (one per column). The content of a cell is placed between the starting <td> and closing </td> tags.

We create below a simple table to understand the table structure in HTML. In our test, it consists of only one line and two columns:

 

<table> <tr> <td>first data field</td> <td>second data field</td> </tr> </table>

When displaying the preview in the browser, it is soon discovered that the table is not displayed as it should, as the two columns are not distinguished, nor is it even recognized if it is a table. The explanation is simpler than it seems and is that, by default,�HTML cells have no border. This characteristic, so typical of tables, is marked by expanding the�<table> tag with the�border attribute and the variable�1, as in our example:

<table border="1"> <tr> <td>first data field</td> <td>second data field</td> </tr> </table>

Now open your HTML document in your browser and look at the resulting table.

Note : HTML5 no longer supports the�border attribute , a function assumed by CSS.

Despite its simple format, HTML also makes�column headings stand out. In order to do this, the corresponding row must be marked with the�<thead> (table head) tag, and the cells must be marked as�<th>. With this code below, you design a table with four rows, three columns, and titles:

<table border="1"> <thead> <tr> <th>Column heading 1</th> <th>Column heading 2</th> <th>Column heading 3</th> </tr> </thead> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>

Dear visitors and learners, Please stay with us for our next series articles about HTML. Please continue reading our Next Articles Part-3 where we will guide you in details.