Premessa e un po si storia.
All’inizio si è sentito l’esigenza di creare uno standard comune per tutti i computer di tutto il mondo. Questo traguardo doveva essere unico per molti tipologie di sistemi operativi e hardware di computer. Doveva essere compatibile con Windows, Mac OsX, Linux e BSD. Quindi si creo uno consorzio standard chiamato le tre “doppia Vi” detto in sigla W3C.
La sigla significa World Wide Web Consortium per questo motivo essendo che è troppo lungo il nome quindi si scelse di chiamarla semplicemente W3C.
All’inizio ogni ditta che promuoveva il proprio sistema operativo aveva già creato un suo standard però ovviamente non era compatibile con gli altri.
L’unico standard che si uso per le comunicazioni è quello di Apache BSD fatto dall’università di Berkley, Infatti BSD sta per Berkeley Software Distribution.
Non a caso il .Net di Microsoft è basato sul software Apache.
Linux e Mac ai tempi hanno già usato l’infrastruttura software uguale quindi Apache.
Microsoft lo capì un po più tardi ma si arrese a quest’idea.
In effetti attualmente tutti i telefoni tablet e computer sono basati su Apache.
Se non ci credete andate a controllare le informazioni di licenza del vostro telefono sicuramente troverete molto software BSD e Open Source.
Nella storia del software della Microsoft Internet Explorer è quasi sempre stato (escluso Edge) uno dei software web visuali con più problematiche di visualizzazione. Ovvero nello standard avevano messo una determinata caratteristica ma loro ne aggiungevano sempre di nuovi e quindi il software quello che doveva essere più consolidato non combaciava con gli altri browser web.
Che cosa è un Browser? Un Browser è letteralmente un navigatore per visualizzare pagine web e locali.
All’inizio il web non era fatto con le immagini ed ovviamente era molto più scarno.
I browser si dividono in locali e web.
Browser locali per sistema operativo
Mac OsX – > Finder
Windows -> Explorer
Linux -> Konquerror / Dolphin (ambiente KDE), Thunder ( ambiente XFCE ), Caja (Mate)
Browser web per sistema operativo
Mac OsX – > Safari
Windows -> Internet Explorer, Edge
Linux -> Firefox
BSD – > Non ha software preinstallato ( citazione )
Google -> Chrome OS
Questi sono i più usati per i vari sistemi operativi che sono dipendenti dal software base.
Che cosa è il metalinguaggio HTML?
Il linguaggio Html è l’acronimo di HyperText Markup Language letteralmente linguaggio a marcatori per ipertesti. Un ipertesto è un insieme di documenti messi in relazione tra loro per mezzo di parole chiave. Detto in parole povere un ipertesto è un collegamento a vari tipi di documenti tipo rtf, txt e pdf e i formati proprietari dei vari software.
Ricordatevi più avanti che un ipertesto alla fine la possiamo semplificare e definire anche come Ancora nautica.
L’ancora nautica infatti viene usata per collegare mare e i fondali.
Il metalinguaggio HTML si definisce con i marcatori che sono parole racchiuse tra parentesi acute oppure i simboli di maggiore o minore.
Vengono chiusi con lo stesso nome però alla chiusura bisogna mettere uno slash susseguito dal nome, senza spazi.
I marcatori spesso vengono abbreviati impropriamente come tag ma nell’uso colloquiale viene usata questa dicitura.
Un esempio di tag è questo qui: <miotag> Ciao </miotag> .
Dove il nome miotag varierà nel corso nel tempo, la scritta ciao verrà usata per altrettanti scopi.
Detto questo passiamo a “sporcarci” le mani con questi fantomatici tag!
Una pagina html inizia appunto con il tag html e al suo interno abbiamo altri due tag di nome head ( in italiano testa ) ed body ( in italiano corpo).
La differeza che fa tra testa e corpo risiede nel comportamento e quindi sull’eventuale collegamento a un po di intelligenza.
Ecco come si presentano i tag
<html>
<head>
INTELIGENZA
</head>
<! commento per dividere i due blocchi>
<body>
Nostri documenti ipertestuali
<body>
</html>
Nella zona che ho denominato come INTELLIGENZA è quella parte che si fa riferimento a collegamenti a linguaggi come Javascript, CSS, C#, PHP e Java.
l’unico tag degno di nota che possiamo mettere dentro head è il tag title, quindi metteremo.
<title> mio titolo </title >
Invece nella zona che ho scritto “Nostri documenti ipertestuali” possiamo metterci molte cose.
In quest’area dobbiamo descrivere che cosa apparirà a schermo del nostro visitatore.
Questi sono un elenco dei tag che possiamo inserire dentro body :
- a [ Ancora]
- p [ Paragrafo]
- div [ Divide/unisce un blocco di tag con determinate funzionalità]
- b [ Bold Grassetto ]
- i [ Italic type ovvero scrittura obligua detto in una parola Corsivo ]
- img [ Inserisce un immagine all’interno della pagina ]
- br ( eccezione alla regola che non vuole chiusura )
- hr (uguale a br)
- input [ inserisce un’are di testo piccola solo una riga]
- textarea [ inserisce un’are di testo grande per inserire molto testo multilinea ]
- table [inserisce una tabella ottima per gestire i nostri contenuti in modo ordinato e allineato ]
- per ulteriori tag potetete consultare il consorzio web in questo link.
Andiamo ad analizzare meglio i tag!
- Tag a Ancora
<a href="miodocumento.txt" > La mia prima ancora </a>
Il mio documento può essere di qualsiasi tipo html, txt, pdf o di altri formati proprietarie non.
- Tag P – Paragrafo
<p> Questo è il mio primo Paragrafo </p>
Serve a creare un blocco di scrittura per descrivere un qualsiasi argomento che vogliate inserire nelle vostre pagine web.
- Tag div
<div> </div>
Serve per dividere o inglobare del codice più inteligente dell’html!
L’html non sa fare calcoli sa solo fare visualizzare - Tag b
<b> Questo è il primo testo in grassetto </b>
Deriva dall’inglese Bold e significa grassetto
- Tag I Italic – Corsivo
<i> Questo è il primo testo in Corsivo </i>
- Tag Img
<img src="Documento.txt" height=100% >
Il parametro src sta per source ovvero sorgente.
- Tag br
<br>
Torna a capo
- Tag hr
<br>
Crea una linea orrizzontale
- Tag input
<input type="button>"
Crea input e crea un evento che è possibile gestire con un pulsante.
- Tag textarea
<textarea row="10" col="90">
Crea un input di testo in un area.
- table
<table> </table>
Crea una tabella la lista è molto lunga quindi meglio parlarne in un’altro tutorial apposta!
Potete inglobare il numero 1 con dentro il tag numero 6.
Per ulteriori informazioni guardate questo videotutorial!
Questo è tutto ci vediamo alla prossima!