HTML beginner

Antonio Pierro @antonio_pierro_

Per consigli, suggerimenti, eventuali errori o altro potete scrivere una email a antonio.pierro[at]gmail.com

Getting Started

To start writing in HTML, you need a simple text editor.
Create a folder called "html" and save a file as "myFirstPage.html".

TAGS Comments

<!DOCTYPE html> is a document type declaration and it lets the browser know which flavor of HTML you’re using (HTML5, in this case).
The HTML <html> element represents the root of an HTML document. All other elements must be descendants of this element.
The HTML <body> element represents the content of an HTML document. There is only one element in a document.

Headings - Page Titles

To add a title to your page, change your code so that it looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>My first web page</title>
  </head>
  <body>
    This is my first web page
  </body>
</html>

The head element contains information about the page.

Paragraphs

Add a new line in your body so that they look like this:

<!DOCTYPE html>
<html>
  <head>
    <title>My first web page</title>
  </head>
  <body>
    <p>This is my first web page</p>
    <p>How exciting</p>
  </body>
</html>

Line breaks

The HTML <br> element produces a line break in text.

<!DOCTYPE html>
<html>
  <head>
    <title>My first web page</title>
  </head>
  <body>
    <p>This is my first web page</p>
    <p>How exciting</p>
    <p>first line<br>second line</p>
  </body>
</html>

Lists

A list can be unsordered or ordered. The former is used for non-sequential lists and the latter is for sequential lists.

Unsorted list:

<ul>
  <li>To learn HTML</li>
  <li>To show off</li>
</ul>

Sorted list:

<ol>
  <li>To learn HTML</li>
  <li>To show off</li>
</ol>

Heading elements

Heading elements implement six levels of document heading
<h1> is the most important.
<h6> is the less important.
A heading element briefly describes the topic of the section it introduces.

Heading elements examples

The following code shows all the heading levels, in use.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Anchor

The HTML <a> Element defines a hyperlink, the named target destination for a hyperlink, or both.
Attributes:
- download: this attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource
- href: it indicates the link target, either a URL or a URL fragment.

Anchor example

Example: linking to an external location or file:

<a href="http://www.mozilla.com/">External Link</a>

Example: creating an email link

<a href="mailto:nowhere@mozilla.org">Send email</a>

The HTML <img> element

The HTML <img> element represents an image of the document.
This element includes the following attributes:
- alt: this attribute defines the alternative text describing the image.
- src: image URL, this attribute is obligatory for the element.

The HTML <img> element example

Example 1: image linking to an external location or file
```
<img src="http://some-image.png" alt="my image" />
```

Example 2: Image link

<a href="http://some-page.html"> 
    <img src="http://some-image.png" alt="some image" /> 
</a>

Acronymous

URL: uniform resource locator. It is also known as web address.

References

HTML element reference