HTML (SM.3.7 / IT.6.4)

Tateo’s Interdisciplinary Lifelong Learning Project

T I L L L

LEARNING - SHARING - NETWORKING

Learning, knowledge sharing and Communities engagement about:

Artificial Intelligence, Augmented / Virtual / Mixed Reality, Automation, Electronics, Computer Science and Information Technology, Mobile Technologies, Problem Solving, Readings, Social Media, Simulation, Artificial Vision, Work and Soft Skills

by Tateo Giovanni Battista

_________________

LEARNING

SOCIAL MEDIA

The Hypertext Markup Language.

Il linguaggio di marcatura dell'ipertesto.

Hashtag keywords: #socialMedia #web20 #hyperTexts #markupLanguage #computerScience #HTML #TILLL #TateoBlog 

Summary. The HTML language for web page formatting, history and programming fundamentals. 

Il linguaggio HTML per la formattazione delle pagine web, storia e fondamenti di programmazione.

~ o ~

You are here (>>>) within the TILLL project

Ti trovi qui (>>>) all'interno del progetto TILLL

HOME

|

+->>> TILLL 

      |

      +-> LEARNING

      |   |

      |   +->>> SM. SOCIAL MEDIA

      |         +->>> 3. WEB 2.0

      |               +->>> 1. WEB 1.0

      |               +->>> 2. SOCIAL NETWORKING

      |               +->>> 3. PROFESSIONAL NETWORKING

      |               +->>> 4. BLOG

      |               +->>> 5. COLLECTIVE INTELLIGENCE

      |               +->>> 6. SM MARKETING

      |               +->>> 7. HTML

      |

      +->>> SHARING

      |     +->>> BLOG

      |

      +->>> NETWORKING

      |

      +->>> ABOUT ME

~ o ~

§1. Publishing content on the web.

La pubblicazione di contenuti sul web.

  If we want to publish content on the web, i.e. web pages, it is necessary to know a simple language that allows you to write web pages that are generally hypertexts, i.e. texts that contain links within them that are useful for directing the reader. to other web pages. The language we are talking about is the HyperText Markup Language, known in abbreviated form with the acronym HTML.

A markup language is a set of conventional rules that describe how text should be represented on the layout of a document.

  Se vogliamo pubblicare dei contenuti sul web, ossia delle pagine web, è necessario conoscere un semplice linguaggio che permette di scrive le pagine web che generalmente sono degli ipertesti, ossia dei testi che al loro interno contengono dei collegamenti (link) utili per indirizzare il lettore verso altre pagine web. Il linguaggio di cui parliamo è l'HyperText Markup Language, noto in forma abbreviata con l'acronimo HTML.

Un linguaggio di marcatura (markup) è un insieme di regole convenzionali che descrivono come un testo deve essere rappresentato sul layout di un documento.

  So in practice an HTML document is a file that contains both the actual information and the description of how this information must be arranged and represented within the document.

  When the application responsible for displaying a web page, called a browser, opens an HTML file, it identifies the HTML codes within the text and uses them to define the page layout, insert images, or create links for other pages.

  Quindi in pratica un documento in HTML è un file che contiene sia le informazioni vere e proprie, che la descrizione di come queste informazioni devono essere disposte e rappresentate all'interno del documento.

  Quando l'applicazione preposta alla visualizzazione di una pagina web, detto browser, apre un file HTML individua all'interno del testo i codici HTML e li usa per definire il layout della pagina, inserire immagini, o creare link per altre pagine.

Hashtag keywords: #socialMedia #web20 #hyperTexts #markupLanguage #HTML #TILLL #TateoBlog 

~ o ~

§2. HyperText Markup Language

  The HyperText Markup Language (briefly HTML) is a set of formatting codes, called tags, which when inserted into a text file determine the formatting of a document.
  L’ HyperText Markup Language (brevemente HTML) e’ un insieme di codici di formattazione, denominati tags, che inseriti all'interno di un file di testo ne determinano la formattazione di un documento.

  This method is well suited for creating content intended to be distributed on the web by means of a browser, which is a program that allows you to browse the Internet, such as Firefox, Internet Explorer or Google Chrome. The tags provide the browser with information about the color of the writing, the position of the images on the page, how to scroll the text, and other things of this kind. For example, a sentence contained between the <u> </u> tags, when called from a browser, is displayed as underlined (u = underline, underline):

  Questo metodo si presta bene per creare i contenuti destinati ad essere distribuiti sul web per mezzo di un browser, che è un programma che permette di navigare in Internet, come per esempio Firefox, Internet Explorer o Google Chrome. I tags forniscono al browser le indicazioni sul colore delle scritte, sulla posizione delle immagini all'interno della pagina, su come far scorrere il testo, e altre cose di questo genere. Per esempio una frase contenuta tra i tags <u> </u>, quando viene richiamata da un browser, viene visualizzata come sottolineata (u=underline, sottolinea):

<u>Hello!</u> it is displayed like this by the browser: Hello!

<u>Hello!</u> viene visualizzata così dal browser: Hello!

~ o ~

§3. HTML history.

Storia dell'HTML.

  HTML was invented in 1990 by Tim Berners-Lee and Robert Caillau at CERN. The first HTML page was hosted on a server that had only 8 MB of RAM, 256 MB of hard disk, and a 25 MHz processor, which is a computer about 100 times less powerful than the current ones.

  L'HTML è stato inventato nel 1990 da Tim Berners-Lee e Robert Caillau, presso il CERN. La prima pagina HTML fu ospitata in un server che disponeva soltanto di 8 MB di RAM, 256 MB di Hard Disk, ed un processore da 25 MHz, ossia un calcolatore circa 100 volte meno potente di quelli attuali.

  Note that the HTML code was not created for writing the contents, but for their representation. There are writing programs, called Editors, such as the common WinWord, which allow the user to easily choose the formatting of the content, and then to generate the equivalent HTML source code. However, more and more frequently, mainly when the writer is familiar with programming, the contents are written directly in HTML source code.

  Si osservi che il codice HTML non è stato creato per la scrittura dei contenuti, ma per la loro rappresentazione. Esistono dei programmi di scrittura, detti Editors, come per esempio il comune WinWord, che permettono all'utente di scegliere in modo agevole la formattazione del contenuto, e quindi a generare il codice sorgente HTML equivalente. Tuttavia sempre più frequentemente, prevalentemente quando lo scrittore ha dimestichezza con la programmazione, i contenuti sono scritti direttamente in codice sorgente HTML.

“I never expected the HTML source code to be visible to users. A browser / editor would make the user see or edit only the language of a hypertext page, as if he were using a word processor. For me, and I believed for others, the idea of asking the audience to type in parentheses was as unacceptable as asking someone to write a document in Microsoft Word by laying out the format in binary code. But the readability of HTML proved to be an unexpected boon. To my surprise many people quickly became familiar with the tags, and started writing their own HTML documents."

“Non ho mai previsto che il codice sorgente di HTML fosse visibile agli utenti. Un browser/editor avrebbe fatto vedere o editare all'utente soltanto il linguaggio di una pagina di ipertesto, come se stesse usando un word processor. Per me, e credevo anche per gli altri, l'idea di chiedere al pubblico di battere a mano le parentesi era inaccettabile quanto chiedere a qualcuno di scrivere un documento in Microsoft Word stendendo il formato in codice binario. Ma la leggibilità dell'HTML si rivelò una manna inaspettata. Con mia grande sorpresa molte persone si familiarizzarono alla svelta con i tag, e iniziarono a scrivere direttamente propri documenti in HTML.“

(Tim Berners Lee, L'architettura del nuovo Web, Feltrinelli, Milano, 2001)

~ o ~

§4. HTML coding.

Scrittura di codice HTML.

  When the Internet content is written directly in HTML code it is good practice to use the so-called "indentation" method, well known to code developers, and which consists in using the indentation of the text to give the content a structure that allows to isolate and easily identify sections that share the same characteristics. For example, in programming, the same level of indentation is made to coincide with all the program lines that must be repeated in a cycle, or that must be executed only if a condition occurs. In HTML code, on the other hand, indentation is used to separate sections of an article, or to group sections that share the same formatting. For instance:

  Quando il contenuto Internet è scritto direttamente in codice HTML è buona norma utilizzare il metodo della cosiddetta "indentazione", ben nota agli sviluppatori di codice, e che consiste nell'usare la rientranza del testo per conferire al contenuto una struttura che permetta di isolare e identificare facilmente delle sezioni che condividono le stesse caratteristiche. Per esempio nella programmazione si fa coincidere lo stesso livello di indentazione a tutte le linee di programma che devono essere ripetute in un ciclo, oppure che devono essere eseguite solo se si verifica una condizione. Nel codice HTML, invece, la indentazione è utilizzata per separare le sezioni di un articolo, oppure per raggruppare le sezioni che condividono la stessa formattazione. Per esempio:

<html> 
    <head>
         <title>ARTICLE TITLE</title>
    </head>
    <body>
        Hello world!
    </body>
</html>

  It should be noted that the structured writing of web pages is only useful for writers who use the HTML code directly, in fact the Editing programs write the same content all on the same line, and the browser in both cases displays the same thing on the screen.

  Si osservi che la scrittura strutturata delle pagine web è utile soltanto per gli scrittori che utilizzano direttamente il codice HTML, infatti i programmi di Editing scrivono lo stesso contenuto tutto su una stessa riga, ed il browser in entrambi i casi visualizza la stessa cosa sullo schermo.

<html><head><title>ARTICLE TITLE</title></head><body>Hello world!</body></html>

  You will agree that structured writing is enormously more convenient when you want to directly exercise control of the content.

  Converrete che la scrittura strutturata è enormemente più conveniente quando si vuole esercitare in modo diretto il controllo del contenuto.

Nei sotto-paragrafi seguenti sono annotati alcuni esempi di codice che ho sperimentato personalmente per la scrittura delle mie pagine utilizzando l'editor HTML invece di quello di scrittura.

§4.1. Esempi di codice

1) Definire un paragrafo con testo giustificato a sinistra:
<p style="text-align: left;">
</p>

2) Andare a capo in un paragrafo:
In HTML, dentro un paragrafo <p>...</p>, se vuoi andare a capo senza chiudere il paragrafo devi usare il tag di interruzione di riga:<br>
<p>
  Primo rigo di testo.<br>
  Secondo rigo di testo.<br>
  Terzo rigo di testo.
</p>
🔹 <br> significa break line ed è un tag auto-chiudente (non serve </br>).
👉 Attenzione: se invece vuoi iniziare un nuovo paragrafo vero e proprio, conviene usare un altro <p>

§5. Più in generale

Il linguaggio HTML, con le sue regole per la formattazione degli ipertesti, è una delle basi che hanno reso possibile il Web 2.0, l’epoca in cui la rete si è trasformata in uno spazio di dialogo, condivisione e partecipazione attiva. Dietro ogni pagina che leggiamo oggi si nasconde questa grammatica digitale, semplice ma rivoluzionaria, che ha dato forma a blog, comunità virtuali e ambienti di apprendimento.

Se desideri approfondire il tema del Web 2.0 e continuare il viaggio tra idee, strumenti e pratiche educative, ti invito a proseguire la lettura degli altri articoli della sezione Learning del Lifelong Learning Lab.

Il paradigma "dinamico" del Web 2.0

( SM.3 )

~ o ~

§6. Stay up to date.

Rimani aggiornato.

If you are interested in the topics covered in the current article and want to be updated on my latest compositions dealing with them, then I invite you to register: 

on the Facebook page

“Social Media by Tateo's Interdisciplinary Lifelong Learning" (>)

and at the Pinterest dashboard

“Social Media by Tateo's Interdisciplinary Lifelong Learning" (>)

which I dedicated specifically for sharing the most recent changes made to the corresponding thematic area of Tateo~Learning.

{Se sei interessato agli argomenti trattati nell'articolo corrente e vuoi essere aggiornato sulle mie ultime composizioni che trattano di essi, allora ti invito a registrarti:

alla pagina Facebook

“Social Media by Tateo's Interdisciplinary Lifelong Learning" (>)

alla bacheca Pinterest

“Social Media by Tateo's Interdisciplinary Lifelong Learning" (>)

che ho dedicato appositamente per la condivisione delle modifiche più recenti apportate all'area tematica corrispondente di Tateo~Learning}

~ o ~

§7. Let's keep in touch.

Teniamoci in contatto.

  I hope you enjoyed this article, belonging to the Learning (>) section of the Tateo's Interdisciplinary Lifelong Learning (TILLL) project (>), and that the notes and observations I gathered within it meets your interests. 

  If you want stay tuned with the TILLL project evolution, then I invite you to follow the next upgrades that are published on the TILLL's Blog and on the social media pages dedicated to the TILLL community.

  {Spero che questo articolo, appartenente alla sezione Learning (>) del progetto Tateo's Interdisciplinary Lifelong Learning (TILLL) (>), ti sia piaciuto e che le note e le osservazioni che ho raccolto al suo interno soddisfino i tuoi interessi. 

  Se vuoi rimanere aggiornato sull'evoluzione del progetto TILLL, allora ti invito a seguire i prossimi aggiornamenti che vengono pubblicati sul Blog di TILLL e sulle pagine social dedicate alla community TILLL}

  (>) Tateo-Blog, official blog of TILL project

  (>) LinkedIn page dedicated to TILL project

  (>) Facebook page dedicated to TILL project

  (>) Twitter account dedicated to TILL project

  (>) Pinterest account dedicated to TILL project

  (>) Instagram account dedicated to TILL project

~ o ~ 

§8. Something about me, the founder and author of Tateo~Blog Project.

Qualcosa su di me, il fondatore e sull'autore del progetto Tateo~Blog.

First of all, thank you for visiting one of the pages of my blog. My name is Giovanni Battista Tateo (shortly Bat) and I am the founder and author of a project of Interdisciplinary Lifelong Learning of which the Tateo~Blog (:::) blog is the means of sharing. I was initially an Information Technology expert, and later I became an electronic engineer, specializing in industrial Automation. I'm passionate about Artificial intelligence, Virtual Reality, Simulation, and I'm an expert in Artificial Vision applied to industrial Automation. Currently, and starting four years ago, I am employed as a Proposal Engineer at Mer Mec S.p.A. (:::) company. Previously, starting in 2004, I was employed, always at the same company, as a Designer of Artificial Vision Systems and Image Processing Algorithms, applied in particular to Railway Diagnostics. I am a supporter and promoter of Lifelong Learning, Social Networking and Knowledge Sharing by means of the web. If you want more details about me, visit the About Me (:::) page.

{Innanzitutto ti ringrazio per aver visitato una delle pagine del mio blog. Mi chiamo Giovanni Battista Tateo (brevemente Bat) e sono il fondatore e l'autore di un progetto Lifelong Learning Interdisciplinare di cui il blog Tateo~Blog (:::) ne è il mezzo di condivisione. Sono stato in principio un esperto di Informatica, e in seguito sono diventato un Ingegnere Elettronico, specializzato in Automazione Industriale. Sono un appassionato di Intelligenza Artificiale, Realtà Virtuale, Simulazione, e sono un esperto di Visione Artificiale applicata all'Automazione Industriale. Attualmente, ed a partire dall'anno 2016, sono impiegato come Proposal Engineer presso la società Mer Mec S.p.A. (:::). Precedentemente, a partire dal 2004, sono stato impiegato, sempre presso la stessa società, come Progettista di Sistemi di Visione Artificiale e di Algoritmi di Elaborazione delle Immagini, applicati in particolare alla Diagnostica Ferroviaria. Sono un sostenitore e promotore dell'apprendimento permanente, dei social network e della condivisione delle conoscenze tramite il web. Se vuoi ulteriori dettagli su di me, visita la pagine About Me (:::)}

  References to contact me. Following you can find my personal references that you can use if you want to contact me directly, and the links to my social accounts that you can use to follow me or to keep in touch with me by means of social media networks.

  {Riferimenti per contattarmi. In seguito puoi trovare i miei riferimenti personali che puoi utilizzare se vuoi contattarmi personalmente, ed i collegamenti ai miei account social che puoi utilizzare per seguirmi e rimanere in contatto con me tramite le reti di social media}

Eng. Tateo Giovanni Battista

    - e-mail: tateogb@libero.it (send e-mail)

    - phone / WhatsApp : (+39) 388 8419726

    - Skype (link)

    - LinkedIn account (link)

    - Facebook account (link)

    - Twitter account (link)

    - Instagram account (link)

    - Pinterest account (link)

-----------------------------------------

TILLL~Learning © February 12, 2022