Basic Elements of HTML

In the last chapter we could see the mmost basic HTML structure using tags like html, head, body, title….

IN this chapter we’ll see important HTML tags becouse are the most basic and used.

  Paragraph:

The first is <p></p>, this tag allow us to write a paragraph. Example:

<p>Paragraph.</p>

Each time a <p> is open, It will create another paragraph.

Headings:

The headings allow to write titles and subtitles, heading is limited to 6.

Example: <h1>The european arrived to America</h1> and second: <h2>Europeans explored America in few years</h2>.

The point is that a heading text will be seen larger and bold. And the size will be less in the each new heading, in this way <h1> heading will be seen larger than a <h2> heading. You can use h1-h6, there are not more heading in HTML.

Maybe there is a problem, you can use more heading for more sections on your HTML document, don’t worry, It is possible to create titles and subtitles without using heading, heading is really for create titles and subtitles, sections will be created in another way.

Any way, you can use h1 twice and It will be seen great by any browser but It is really wrong.

Links

Links are more important that anything, internet are links!

This is the way:

It’s very simple, you must use the “a” tags:

<a href=”https://yourcodeweb.com”>Text</a>

You can see between quotation marks the URL link and the conent between <a></a> is the text that will appear like the link.

This will be the result:

Text

Very important don’t forget the “http” or “https”, in another way the link will not work.

Links are very simple but in another chapters will be explained how create target links, button links, links inside the same document and more.

Images

An  HTML image example:

<img src=”https://yourcodeweb.com/wp-content/uploads/2017/04/cropped-terminal-command-line-console-cmd-512-e1493162384432.png”>

The tag <img> is a example for unclosed HTML tags, there is not </img>. Dont’t exist for this tag.

In this image case the image will be seen enormous in any browser, but you can use attributes  “width” and “height” to define the image size:

<img height=”100″ width=”120″ src=”https://yourcodeweb.com/wp-content/uploads/2017/04/cropped-terminal-command-line-console-cmd-512-e1493162384432.png”>

In adittion you could use the “alt” attribute, this let show a text when the image link is wrong, the image is down or any other problem.

<img height=”100″ width=”120″ alt=”the image is not available” src=”https://yourcodeweb.com/wp-content/uploads/2017/04/cropped-terminal-command-line-console-cmd-512-e1493162384432.png”>

Exercise: Open your note pad and make all this chapter points, change the size attributes and refresh your document in the browser.

The image is necessary to copy the right document location in your PC and the image must be in the same folder that the HTML document to be displayed.

Then delete the image and open again yout document in your browser, you must see the “alt” text.