HTML

What is HTML?

HTML is the language used to build web pages, which can be opened with browsers (for example Microsoft Edge, Google Chrome, Mozilla Firefox etc...). HTML is the acronym for Hyper Text Markup Language. The extension of an HTML file can be .htm or .html.

HTML

HTML pages are made up of tags, that is, words in angle brackets <...> that can be considered HTML commands, they attribute a certain visual or functional value to the elements that are inside them. There are three fundamental tags: HTML, HEAD and BODY, which in turn contain other tags that can contain other tags that can contain other tags etc...

HTML tag

The HTML tag is essentially used to delimit the beginning and end of the file.

<html>
</html>

These two lines can be considered a web page, albeit a minimal one.

HEAD tag

The HEAD tag is found inside the HTML tag:

<html>
    <head>
    </head>
</html>

As you may have noticed, most tags open (<...>) and close (</...>).

We will clarify what the HEAD is for later.

NB: Margin spacing helps keep your writing neat.

BODY tag

The BODY tag is also found inside the HTML tag, and is found after the HEAD:

<html>
    <head>
    </head>
    <body>
    </body>
</html>

 

P tag

The P tag is used inside the BODY tag, and is used to write a paragraph:

<html>
    <head>
    </head>
    <body>
        <p>Hi!</p>
    </body>
</html>

When you reopen the P tag, you start a new paragraph leaving a space according to the chosen style, thus starting a new paragraph:

<html>
    <head>
    </head>
    <body>
        <p>Hi!</p>
        <p>Greetings!</p>
    </body>
</html>

 

But without tags?

Without tags, you can insert text, but it will not be paragraphed. However, there is the BR tag for line breaks.

 

BR tag

The BR tag is used to start a new line, so as you can imagine it doesn't open or close, it's a single element:

<html>
    <head>
    </head>
    <body>
        Hi!
        <br /><br />
        Greetings!
    </body>
</html>

This way it goes to the next line twice, leaving a blank line, so it's similar to what I wrote before. Of course BR can be used inside the P tag, if you want to start a new line without starting a new paragraph.

 

H tag

The H tag is used to write a title, after H you need to insert a number from 1 to 6, the bigger the number the smaller the title will be written. For example you can use H1 for the title and H2 for the subtitle:

<html>
    <head>
    </head>
    <body>
        <h1>My first HTML site</h1>
        <p>Hi!</p>
        <p>Greetings!</p>
    </body>
</html>

 

B tag

It is used to write in bold:

<html>
    <head>
    </head>
    <body>
        <h1>My first HTML site</h1>
        <p><b>Hi!</b></p>
        <p>Greetings!</p>
    </body>
</html>

 

U tag

The U tag is used to underline:

<html>
    <head>
    </head>
    <body>
        <h1>My first HTML site</h1>
        <p><b>Hi!</b></p>
        <p><u>Greetings!</u></p>
    </body>
</html>

 

I tag

The I tag is used to write in italics:

<html>
    <head>
    </head>
    <body>
        <h1>My first HTML site</h1>
        <p><b>Hi</b>!</p>
        <p><i><u>Greetings</u>!</i></p>
    </body>
</html>

All these tags can be combined with each other, for example to make a text italic and bold, italic and underlined etc….

 

SUB tag

Writes the text in subscript:

<html>
    <head>
    </head>
    <body>
        <p>H<sub>2</sub>O</p>
    </body>
</html>

 

SUP tag

It is used to write in superscript:

<html>
    <head>
    </head>
    <body>
        <p>H<sub>2</sub>O</p>
        <p>3<sup>2</sup></p>
    </body>
</html>

 

BIG tag

It is used to write slightly larger:

<html>
    <head>
    </head>
    <body>
        <p>H<sub>2</sub>O</p>
        <p><big>3<sup>2</sup></big></p>
    </body>
</html>

 

SMALL tag

It is used to write slightly smaller:

<html>
    <head>
    </head>
    <body>
        <p><small>H<sub>2</sub>O</small></p>
        <p><big>3<sup>2</sup></big></p>
    </body>
</html>

 

STYLE attribute

It is used to change the font style:

<p style="font-size:12px;font-family:'courier new';color:black;background:white;text-align:right;">Text</p>

Where:

  • font-size is used to change the font size, can be used instead of size.
  • font-family is used to change the font type, can be used instead of face.
  • color is used to change the font color.
  • background is used to change the background color, can be used instead of bgcolor.
  • text-align specifies the alignment, i.e. right, left, center, or justified (justify).

NB for color and background: you can choose custom colors in RGB format using hexadecimal numbers. For example:

#000000

Each two digits corresponds to the quantity in hexadecimal number of that color tone (the first two are for red, the ones in the middle for green and the last two for blue). In this case the text would be black. Since you have to enter hexadecimal numbers, you can help yourself with the Windows calculator (go to View > Scientific and set to DEC, write a number in decimal from 0 to 255 and click on HEX to get the corresponding hexadecimal number).

 

To put a color you saw on a web page, open the page, find the color you want and press Print Screen. Go to Paint (Windows key + R and write MSPAINT), paste the image with Ctrl + V, choose the Pick Color tool and click on the desired color. Then go to Colors > Edit colors..., and (if you are on an old version of Windows) click on Define custom colors. At this point you will find some numbers on the left, copy the shade of red on the calculator and press on HEX, copy the result obtained on the HTML code. Do the same with green and then with blue. Newer versions of Paint should be able to give you the Hex code directly.

Example: The color has the following shades of color: Red: 22; Green: 102; Blue: 178. Go to the calculator, set DEC and write 22: you will get 16. Do the same thing with 102: you will get 66. Then with 178: you will get B2:

<p style="color:#1666b2;">Text</p>

Otherwise, it is possible to use a simpler but less precise formula, that is, through the English word associated with the desired color:

<p style="color:blue;">Text</p>

The STYLE attribute can also be used with the H tag and others.

 

CLASS attribute

It is used to assign a class (we will explain later what exactly it is used for):

<p class="fossils">Text</p>

Let's go back to the HEAD

The HEAD is used to change the title or the general character style.

 

STYLE tag

Specifies the font and background style that will always be retained throughout the page, unless you specify specializations or exceptions.

<style>
    body {
        color:#000000;
        background:#EEEEEE;
        font-family:"arial";
    }
    p {
        font-size:14px;
    }
    h1 {
        font-size:26px;
    }
    p.fossils {
        font-size:14px;
        color:#222222;
    }
    #uhuh {
        color:#888888;
    }
</style>

This will set the color of all the text on the page to black (#000000), the background color to light gray (#EEEEEE) and the font to Arial. The text in the P tag should be 14 pixels wide, the text in the H1 tag should be 26 pixels wide and the text in the P tag with the fossil class should be 14 pixels wide and should be dark gray (#222222). The texts inside tags with id uhuh should be gray (#888888).

 

TITLE tag

Specifies the page title that will be displayed in the title bar.

<title>Title</title>

Title will appear in the title bar.

 

LINK tag

Defines the relationship between the HTML document and an external resource.

REL attribute

Specifies what is defined in the file. If we want to define styles (such as STYLE tags), we specify STYLESHEET:

<link rel="stylesheet" />

 

HREF attribute

Also present in the A tag, it indicates which file to use (usually with .css extension if it contains styles):

<link rel="stylesheet" href="C:\file.css" />

 

TYPE attribute

Also present in the SCRIPT tag, it indicates the file type and the language used:

<link rel="stylesheet" href="C:\file.css" type="text/css" />

 

META tag

A tag that is often ignored by the browser, it is usually used by search engine bots, for information and the like.

 

META TITLE

Indicates the title to be specified to the search engine.

<meta name="title" content="Rubbish" />

 

META DESCRIPTION

Specifies the description to add for the search engine.

<meta name="description" content="This site is trash." />

Typically, the description is 200-300 characters long at most.

 

META KEYWORDS

Specify keywords, this type of meta tag is not used by Google, but for example is used by Yahoo!.

<meta name="keywords" content="chicken,goofy,ninja,uncle,fossils" />

Usually you shouldn't put more than 20-25 KEYWORDS.

 

META ROBOTS

Specifies whether to index the site and whether the Bot can follow links on the page.

<meta name="robots" content="index,follow" />
  • INDEX is used to index the site;
  • NOINDEX is used to prevent the site from being indexed;
  • FOLLOW is used to make Bots follow the site's links;
  • NOFOLLOW is used to prevent bots from following links on the site.

By default, bots index sites and follow links if they think this might be useful.

 

META REVISIT

Specifies that the Bot should revisit the site after the specified number of days.

<meta name="revisit-after" content="7 days" />

 

META GENERATOR

Specifies the program or service used to build the site.

<meta name="generator" content="notepad" />

This META is discouraged and generally useless.

 

META COPYRIGHT

Specifies that the page is copyrighted.

<meta name="copyright" content="Copyright © Monkey" />

 

META EXPIRES

Specifies that the site should no longer be indexed on the specified day and time.

<meta http-equiv="expires" content="thu, 04 feb 2011 00:00:00 gmt" />

Remember to write everything in English, if you are not English-speaking.

 

META COOKIE

Set a cookie, and specify the path, and if you want you can set the expiration.

<meta http-equiv="set-cookie" content="cookievalue:2;path:'cookie path';expires:'thu, 04 feb 2011 00:00:00 gmt';" />
  • COOKIEVALUE specifies the value of the cookie;
  • PATH specifies the path to the cookie;
  • EXPIRES specifies the expiration date of the cookie.

 

META REFRESH

Refresh the page after the specified number of seconds or move to another page after the specified number of seconds.

<meta http-equiv="refresh" content="30;url:'http://site.com';" />

URL specifies the destination page. If not specified, it refreshes the page.

 

META LANGUAGE

Specifies the language of the page.

<meta name="language" content="en" />

 

META AUTHOR

Specify the name and surname of the site author.

<meta name="author" content="Nicholas Mintastes" />

This META is discouraged and generally useless.

 

Il META REPLY

Specify the email address to contact.

<meta name="reply-to" content="nick.min@coldmail.com" />

This META is discouraged and generally useless.

Let's go back to the BODY

We've come to this point:

<html>
    <head>
        <title>My first rubbish</title>
        <style>
            body {
                color:#000000;
                background:#EEEEEE;
                font-family:"arial";
            }
            p {
                font-size:14px;
            }
            h1 {
                font-size:26px;
            }
            p.fossils {
                font-size:14px;
                color:#222222;
            }
        </style>
    </head>
    <body>

    </body>
</html>

 

HR tag

Creates a horizontal line (not human resources):

<html>
    <head>
        <title>My first rubbish</title>
        <style>
            body {
                color:#000000;
                background:#EEEEEE;
                font-family:"arial";
            }
            p {
                font-size:14px;
            }
            h1 {
                font-size:26px;
            }
            p.fossils {
                font-size:14px";
                color:#222222;
            }
        </style>
    </head>
    <body>
        <p> 1 </p>
        <hr />
        <p> 2 </p>
    </body>
</html>

 

A tag

Creates a hyperlink.

HREF attribute

Specifies the destination, i.e. the page where the user should go after clicking on the specified text.

<p><a href="http://site.com">Text</a></p>

If the user clicks on Text, site.com will open.

 

NAME attribute

With the NAME attribute the text can be reached from another part of the page with the HREF attribute.

<p><a name="dumpling">Voila!<a></p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p><a href="#dumpling">Vai</a></p>

 

TARGET attribute

Specifies whether the page should be opened in another tab/window. Entering _blank as a value will open the page in another tab.

<p><a href="http//site.com" target="_blank">Click!</a></p>

 

DEL tag

Strikethrough the text.

<p><del>Strikethrough text</del></p>

 

CENTER tag

It is used to write centered text (deprecated in HTML5).

<center>Centered text</center>

 

DIV tag

Specifies a subdivision or section of text, usually by assigning an ID or class to the text, whose properties are defined in the HEAD.

<html>
    <head>
        <style>
            #goofy {
                font-size:14px;
                color:blue;
            }
        </style>
    </head>
    <body>
        <div id="goofy">
            <p>Hi</p>
        </div>
    </body>
</html>

 

IMG tag

It is a single element, upload an image from another site or an image from your local computer.

SRC attribute

Also present in the SCRIPT tag, it specifies the image to upload:

<img src="http://www.goofy.com/something.jpg" />

 

ALT attribute

It is used to display the specified text if the image is not available. It is also useful for the blind and for many search engines.

<img src="http://www.goofy.com/something.jpg" alt="Something" />

 

TABLE tag

It is used to create a table.

<table border="" cellspacing="" cellpadding="" width="" height="">
    <tr>
        <td></td><td>A</td><td>B</td><td>AB</td><td>0</td>
    </tr>
    <tr>
        <td>A</td><td>X</td><td></td><td>X</td><td></td>
    </tr>
    <tr>
        <td>B</td><td></td><td>X</td><td>X</td><td></td>
    </tr>
    <tr>
        <td>AB</td><td></td><td></td><td>X</td><td></td>
    </tr>
    <tr>
        <td>0</td><td>X</td><td>X</td><td>X</td><td>X</td>
    </tr>
</table>

The TR tag creates a row, so we have 5 rows in total. The TD tag creates a column in a row, so we have 5 columns. The BORDER attribute specifies the type of border, using different numbers will give different border styles. The CELLSPACING attribute specifies the width of the border in pixels. CELLPADDING is the space between the border and the text inside in pixels. WIDTH is the width of the table and HEIGHT is the height (also in pixels). In addition to these, the STYLE attribute can be used for text, background, etc.

 

LI tag

It is used to create an element of a list.

<li>Bread</li>
<li>Salami</li>
<li>Ham</li>

 

UL tag

Together with the LI tag it makes a bulleted list (unordered list) with a spacing from the margin.

<ul>
    <li>Bread</li>
    <li>Salami</li>
    <li>Ham</li>
</ul>

 

OL tag

Together with the LI tag it makes a numbered list (ordered list) spaced from the margin.

<ol>
    <li>Bread</li>
    <li>Salami</li>
    <li>Ham</li>
</ol>

 

STRONG tag

Similar to the B tag, it writes in bold.

 

EM tag

Similar to the I tag, it writes in italics (emphasis).

 

SPAN tag

It is a container that allows you to change styles without line breaks. To do this, you need to insert the STYLE attribute in the SPAN tag.

<p>Me: <span style="font-family='courier new';">Hi!</span></p>

 

! tag

Inserts a comment. Ignored by browsers and search engines.

<!-- Comment -->

 

SCRIPT tag

The SCRIPT tag allows the browser to execute codes in VBScript, JavaScript, etc…

<script src="C:\file.js" type="text/javascript"></script>

Serve per caricare gli script Javascript dal file specificato, può essere specificato anche un file .vbs:

<script src="C:\fancy_file.vbs" type="text/vbscript"></script>

NB: Using VBScript in web applications is not compatible with most browsers.

<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
            instructions
        </script>
    </body>
</html>

Instead of instructions, specify Javascript instructions.

NB: If there are errors in the Javascript syntax, subsequent instructions will not be executed.

See the JavascriptJavascript section.

 

INPUT tag

Specifies that text should be inserted or creates clickable or selectable buttons.

<input type="text" />

Creates a text box.

 

<input type="button" value="Click!" />

Creates a clickable button.

 

<input type="checkbox" /><p>Hello world!</p>

Creates a check box.

 

ONCLICK attribute (see JavascriptJavascript for more information)

Executes Javascript code or the specified function on mouse click.

<script type="text/javascript">
    function func() {
        document.write("<p>Hi!</p>");
    }
</script>
<input type="button" value="Click!" onclick="func()" />

When the mouse clicks on the Click! button, the specified function is executed.

 

Outside the HEAD and BODY tags

Outside the HEAD tag and the BODY tag there are a few tags: among them are FRAME and FRAMESET (not supported in HTML5).

FRAMESET tag

Using the FRAME tag opens the specified web page.

<frameset cols="300" rows="200">
    <frame src="http://site.com" name="showframe" />
</frameset>

The COLS attribute specifies the height and the ROWS attribute specifies the height of the popup in pixels.

 

Use the section below to comment or ask for help if you do not understand. Bye!

Comments

Post a Comment