My First Heading

My first paragraph.

This is a heading

This is a paragraph.

Basic HTML Table

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Font Awesome Icons

Some Font Awesome icons:

Styled Font Awesome icons (size and color):

Without Clearfix

This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...

With New Modern Clearfix

Add the clearfix hack to the containing element, to fix this problem:

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...

What Can JavaScript Do?

JavaScript can change HTML content.

JavaScript in Head

A Paragraph.

JavaScript Template Literals

Template literals allows variables in strings:

Template literals are not supported in Internet Explorer.

JavaScript Template Literals

Template literals allows variables in strings:

Template literals are not supported in Internet Explorer.

The JavaScript this Keyword

In this example, this represents the person object.

Because the person object "owns" the fullName method.

Bootstrap Example

My First Bootstrap Page

This part is inside a .container class.

The .container class provides a responsive fixed width container.

Bootstrap 4 Example

My First Bootstrap Page

This is some text.

Bootstrap Example

Three equal width columns

Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.

.col
.col
.col
Bootstrap Example

Responsive Columns

Resize the browser window to see the effect.

The columns will automatically stack on top of each other when the screen is less than 576px wide.

.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
Bootstrap Example

Striped Rows

The .table-striped class adds zebra-stripes to a table:

Distanza 16 km
Ascesa 600 m

da Colle San Magno a Montecassino

Bella traversata a mezza costa sul versante meridionale del Monte Cairo che con i suoi 1669 m domina panoramico su molti rilievi dell’Appennino centrale e la pianura della Valle el Liri. Da Colle San Magno* (530 m) ci si incammina in direzione di Villa Santa Lucia. In costante leggera salita si superano antichi casali rurali e la piccola panoramica cima del Pizzo Corno (945 m). In discesa si raggiunge il Pozzo di S. Lucia  quindi, superando Colle Sant’Angelo e la Masseria Albaneta, l’Abbazia di Montecassino (516 m).
Casa madre delle abbazie benedettine, è uno dei più famosi monasteri della cristianità. Fondata da San Benedetto sui resti  dell’acropoli e di un tempio pagano, vi fu codificata la “regola” dell’ora et labora. Fu per molti secoli, grazie all’opera dei monaci “amanuensi”, centro di studi e di custodia dell’intera cultura occidentale. Completamente ricostruita dopo le distruzioni della seconda guerra mondiale, l’Abbazia è un imponente complesso di chiese e di edifici ricchi di testimonianze storiche ed artistiche.

Responsive Iframe

Maintain Aspect Ratio 16:9

Resize the window to see the effect.

W3.CSS

Photo Card

Escursionismo
Alps

The Italian / Austrian Alps

W3.CSS

Making the Web!

Making the Web!

Making the Web!

Responsive Iframe

Maintain Aspect Ratio 16:9

Resize the window to see the effect.

touch-action:auto - This means you can pan anywhere on screen