Il World Wide Web Consortium, anche conosciuto come W3C, è un'organizzazione non governativa internazionale che ha come scopo quello di sviluppare tutte le potenzialità del World Wide Web.

Al fine di riuscire nel proprio intento, la principale attività svolta dal W3C consiste nello stabilire standard tecnici per il World Wide Web inerenti sia i linguaggi di markup che i protocolli di comunicazione.

Un metalinguaggio è soltanto un linguaggio che permette di definire altri linguaggi. Uno dei metodi più diffusi è aggiungere dei marcatori al contenuto di un documento, per questo è molto usato per sistemi linguistici.

I linguaggi di markup di tipo procedurale specificano quali sono le procedure di trattamento del testo e indicano le istruzioni da eseguire affinché la porzione di testo referenziata possa essere visualizzata.

I linguaggi di markup di tipo descrittivo lasciano che sia il software a scegliere quale rappresentazione debba essere applicata al testo.

Possiamo dire che i linguaggi di programmazione sono in grado di utilizzare variabili, cicli, funzioni e altre strutture per rendere la programmazione dinamica. Praticamente con i linguaggi di programmazione possiamo inserire della logica all’interno dei nostri programmi.

Prima di iniziare l’analisi dovremmo fare una piccola precisazione, HTML non è un metalinguaggio ma è un linguaggio di marcatura.

In informatica il termine inglese open source (che significa sorgente aperta) viene utilizzato per riferirsi ad un software di cui i detentori dei diritti rendono pubblico il codice sorgente, favorendone il libero studio e permettendo a programmatori indipendenti di apportarvi modifiche ed estensioni. Questa possibilità è regolata tramite l'applicazione di apposite licenze d'uso. Il fenomeno ha tratto grande beneficio da Internet, perché esso permette a programmatori distanti di coordinarsi e lavorare allo stesso progetto.

HTML: Siti web

  • Il sito web deve comunicare in modo immediato di cosa si occupa e quale target si rivolge
  • Deve essere accessibile
  • una piattaforma web può essere definita usabile quando risulta essere di immediata comprensione, fruizione e interazione.
  • Disposizione logica e coerente delle informazioni all'interno della pagina
  • L'interfaccia di navigazione deve essere facile e intuitiva, il design user-friendly per agevolare gli spostamenti delle persone da una pagina all'altra e all'interno del menù.

HTML

HTML

Tasto destro:

  • View Page source
  • Inspect Element

HTML

  • Rispetta la struttura gerarchica
  • Ogni tag di apertura deve avere il suo tag di chiusura
  • Rispetta la regola di Matriochka: i tag sono sempre annidati l'uno dentro l'altro (non si sovrappongono mai!)



<html>
    <body>
        <h1>Questo è un titolo</h1>
    <body>
</html>

HTML

  • È possibile utilizzare elementi vuoti
  • I tag dovrebbero essere scritti in minuscolo (buona pratica)

<html>
    <head>
        <title>My first web page</title>
    </head>
    <body>   
        <h1>My first head</h1>
        <p>My first opragraph</p>
    </body>
</html>

HTML

  • Gli elementi HTML sono costituiti da un tag di apertura (ad esempio <strong>) e un tag di chiusura (/ strong)

    <strong> Importante! </ strong>

HTML

HTML non è difficile

Marcatura giusta:
<strong> <em>  HTML </em> </strong>


Markup errato: <strong> <em> HTML </em> </ strong>
 

Elementi vuoti

L'unica eccezione alla regola consiste in alcuni elementi, chiamati elementi vuoti perché non contengono dati: i tag finali saranno superflui.

Ad esempio: il tag <br>, che inserisce un'interruzione di riga singola.

Elementi sempre in minuscolo:

Dobbiamo scrivere
<title>
e non
<Titolo> o <TITOLO>

Era una regola con XHTML, non è obbligatorio con HTML5 ... ma è una buona pratica!

Elementi HTML:

<!DOCTYPE html>: dichiarazione definisce questo documento come HTML5 (versione HTML)
<html>: elemento radice di una pagina HTML che contiene <head> e <body>

 A cosa serve l'elemento <head>?

<title>:il titolo della pagina (nella barra degli strumenti del browser).


<stile>: definisce le informazioni di stile per un documento (importante!)


<meta>: definisce i metadati relativi a un documento HTML (descrizione della pagina, parole chiave, autore del documento, ultima modifica e altri metadati)


<link>: definisce la relazione tra un documento e una risorsa esterna (CSS o Javascript)

Il tag <meta>

 

  •  Codifica di livello 0 o di basso livello. Riguarda la rappresentazione binaria della sequenza ordinata dei caratteri (la codifica dei caratteri, UnicodeUTF8)

 

  • Codifica di alto livello. Arricchisce il testo codificato al livello zero con informazioni di tipo strutturale

Elementi HTML:

Titoli e paragrafi

<h1> ... <h6>: intestazioni HTML


<p>: definisce un paragrafo


<br>: inserisce un'interruzione di riga singola

PRIMO ESERCIZIO!

 

Make your first web page!

ATTRIBUTI

 

  • Tutti gli elementi HTML possono avere attributi
  • Gli attributi forniscono informazioni aggiuntive su un elemento
  • Gli attributi sono sempre specificati nel tag di inizio

ATTRIBUTI

 

<img src=bertolucci.jpg alt=“Bertolucci”>

ATTRIBUTI importanti:

 

  • alt: testo alternativo per un'immagine, quando l'immagine non può essere visualizzata
  • src: URL (indirizzo web) per un'immagine

Il collegamento ipertestuale

<a>: definisce un collegamento

 

Attributo

@href: definisce l'indirizzo del collegamento

       LISTE & COMMENTI

  • <ul>: elenco non ordinato
  • <ol>: elenco ordinato
  • <li>: elemento della lista

 
 

<! -- Questo è un commento -->

 

   <html>
    <head>
        <title>Esempio</title>
    </head>
    <body>
        <ul>
          <li>About</li>
          <li>Project</li>
          <li>Team</li>
          <li>Contatto</li>
        </ul>
    </body>
   </html>

       LISTE & COMMENTI

  • i commenti non vengono visualizzati dal browser, ma possono aiutare a documentare il codice sorgente HTML

 
 

<! -- Questo è un commento -->

 

   <html>
    <head>
        <title>Esempio</title>
    </head>
    <body>
        <!-- menù -->
        <ul>
          <li>About</li>
          <li>Project</li>
          <li>Team</li>
          <li>Contatto</li>
        </ul>
    </body>
   </html>

Il tag DIV egli attributi CLASS e ID

Attributi globali HTML (gli attributi di seguito possono essere utilizzati su qualsiasi elemento HTML)


Tra gli attributi globali c'è la classe di identificazione

I CSS non sarebbero uno strumento così potente come ID e CLASS

CSS - Cascading Style Sheets

Il CSS è un linguaggio che descrive lo stile di un documento HTML.

CSS descrive come dovrebbero essere visualizzati gli elementi HTML.

CLASS

Aggiungiamo al div l'attributo class="header":

<div
class="header"> Testo + immagine </ div>

Il valore dell'attributo class è definito nel file css

.header {color: blue;}
       
L'attributo della classe HTML consente di definire stili uguali per elementi con lo stesso nome di classe

ID

Aggiungiamo al div l'attributo ID

Il valore dell'attributo class è definito nel file css

# header {color: blue;}
       
L'attributo id specifica un ID univoco per un elemento HTML (il valore deve essere univoco all'interno del documento HTML)

SPAN

Il tag <span> è usato per raggruppare elementi inline in un documento

Il tag <span> fornisce un modo per aggiungere un hook a una parte di un testo o una parte di un documento

INLINE STYLE SHEET

<p style="color: green;">Green text</p>

Uno CSS all'interno del tag perde molti dei vantaggi di un foglio di stile (mescolando il contenuto con la presentazione). Usa questo metodo con parsimonia.

INTERNAL STYLE SHEET




                    <html>
                      <head>
                        <style>
                         p { color: green; }
                        </style>
                      </head>
                      <body>
                        <p>Green text</p>
                      </body>
                    </html>

Può essere usato se una singola pagina ha uno stile unico

CSS ESTERNO
La scelta migliore

  • È possibile modificare lo stile di un documento HTML in modo efficiente e rapido.
  • Lo stesso stile può essere utilizzato per molte pagine Web.
  • Il codice HTML è pulito e il download dei documenti è più veloce.

CSS ESTERNO
La scelta migliore

<link rel="stylesheet" type="text/css" href="prova_1.css">

CSS
LE REGOLE

 Selector   {
                property1 : value1;
                property2 : value2;
                …
                propertyN : valueN;
                            }

CSS
LE REGOLE

SELECTOR

h1

Css declarations

{

margin-top: 50px;
font-style: italic;
color: red;


}

CSS
LE REGOLE

Text

h1 {
      color: #dd5500;
      font-family: Arial;
      }

p {
     margin-top: 50px;
     color: blue;
     font-style: italic;
     }

CSS
LE REGOLE: ID E CLASS

.className {
            proprietà1: valore1;
            proprietà2: valore2;
                    …….…
                proprietàN: valoreN;

#idName {
            proprietà1: valore1;
            proprietà2: valore2;
               …..…
                proprietàN: valoreN;

CSS
LE REGOLE: ID E CLASS

.header {
         background-color: blue;
         width: 200px;
          margin-top: 20px;              }

#header {
         background-color: blue;
         width: 200px;
          margin-top: 20px;              }

RISORSE:

Made with Slides.com