PW - 03 - HTML 03

Lecture Info

  • Date: [2018-03-13 mar]

  • Lecturer: Pierpaolo Loreti

  • Slides: ()

  • Argomenti:

    • Elenco elementi html per definire semantica a livello di testo.

    • Caratteri Unicode e fare l'escaping.

    • Block elements e inline elements.

    • Elemento e commenti in HTML.

    • Elementi meta e link per gestire i metadati.

    • Formato di un URL

    • Document Root

    • File di Default

    • Link esterni e link interni

    • Linkare a punti specifici di una pagina

1 Text-Level Semantics Elements

Link utile: textlevel-semantics

Andiamo adesso a vedere degli elementi di HTML che permettono di aggiungere della semantica a livello di testo.

1.2 ,

Il tag <em> viene usato per enfatizzare del testo. Un testo enfatizzato è normalmente mostrato in corsivo, anche se deve essere utilizzato solo per aggiungere informazioni ad un livello semantico. Deve essere sempre chiuso.

Il tag <strong> viene usato per enfatizzare fortemente del testo, che normalmente viene mostrato in grassetto. Deve essere sempre chiuso.

1.3

Il tag <br> viene utilizzato per rappresentare una line break e deve essere utilizzato solamente per line breaks che fanno parte del contenuto, come ad esempio in una poesia o in un indirizzo.

Non devono essere usati più di due <br> consecutivi.

Non deve essere chiuso.

1.4

Tag <q> per citare del testo.

A differenza di <blockquote> viene utilizzato per citare solo una piccola parte di un testo all'interno di un paragrafo.

Lo stile di <q> e <blackquote> non è uniforme sui vari browser e alcuni si comportano in modo diverso rispetto ad altri. Per forzare il comportamento di default possiamo definirlo attraverso altri metodi.

1.5

Tag <code> per scrivere del codice di un programma.

Deve essere sempre chiuso.

1.6

Utilizzato per rappresentare una abbreviazione, o un acronimo.

Opzionalmente si può inserire l'attributo title per fornire l'espansione della particolare abbreviazione in modo che si possa vedere quando ci si passa sopra con il mouse. 

   <abbr title = "Robe incredibile>

1.7

Tag <time> per specificare la data.

Il tag contiene poi può contenere l'attributo datetime che specifica la data in un formato machine-readable.

Il formato dell'attributo datetime è il seguente: 

YYYY-MM-DDThh:mm:ss+-HH:MM

Problema del fuso-orario.

Ad esempio, 

<p> We open at <time> 10.00 </time> every morning. </p>

<p> I have a date on <time datetime = "2008-02-14 20:00" Valentines day </time>.</p>

<time datetime = "1914"> rappresenta il 1914 </time>

2 Unicode Characters

https://www.w3schools.com/charsets/ref_html_utf8.asp

Alcuni caratteri devono essere sostituiti in quanto o non sono ASCII oppure sono usati nei tag HTML. La sequenza di escape inizia con & e si chiude con un ;

Ad esempio la sequenza di simboli &copy; rappresenta il simbolo del copyright.

Ogni carattere o ha un identificatore, ad esempio copy per il copyright, oppure un numero, che per il copyright è il 169. Per utilizzare il numero la sintassi è &#169;

3 Block and Inline elements

Una prima distinzione tra gli elementi HTML è quella tra blocco e inline element. In particolare troviamo

  • Block elements: Per gli elementi blocco (block element) il browser alla fine inserisce un accapo e spazio intorno. Alcuni elementi blocco sono: <h1> </h1> , <p> </p> .

  • Inline elements: Gli elementi inline (inline element) invece non iniziano una nuova linea ma rimangono nel flusso del paragrafo. Alcuni elementi inline sono: <em> </em> , <strong> </strong> .

4 Elemento

Il tag <img> viene utilizzato per inserire delle immagini nei documenti HTMl e ha due attributi:

  • src: specifica la URL dell'immagine.

  • alt: specifica il testo alternativo che viene visualizzato in caso l'immagine non può essere visualizzata.

Ad esempio, 

<img src="happyface.gif" alt="happy">

5 Commenti in HTML

I commenti in HTML vengono inseriti con la sintassi <!-- ... --> . Il testo all'interno di un commento non viene mostrato all'utente e non viene interpretato dal browser. 

<!-- This is a comment -->

6 Metadati di un documento HTML

Link utile: document-metadata

I metadati sono le informazioni relative alla pagina che vengono usati da altri agenti, come ad esempio browser, motori di ricerca etc. I metadati devono essere inseriti nello head della pagina.

Tra gli elementi che specificano i metadati troviamo l'elemento <meta> e l'elemento <link> .

6.1

Elemento utilizzato per rappresentare metadati generali che non possono essere rappresentati dagli altri elementi già presenti nel linguaggio. Normalmente viene utilizzato con due attributi: name e content. Alcuni tag usano l'attributo http-equiv al posto del name.

Il tag <meta> non deve essere chiuso.

La dichiarazione del charset è obbligatoria in HTML5 e viene fatta con <meta charset="UTF-8">

6.2

Viene utilizzato per allegare un file alla pagina corrente e va posizionato nella sezione head. 

<link href="filename" type="MIME type" rel="shortcun icon" />

Ad esempio per inserire il foglio di stile CSS si utilizza il tag link nel seguente modo. 

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

Per invece inserire la Favicon (icona associata ad una particolare pagina web e visualizzabile dal browser), invece si utilizza il tag link nel seguente modo. 

<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16">

6.3 Example

Il seguente esempio mostra come poter utilizzare i tags appena discussi. 

<head>
  <meta charset="UTF-8"> 
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, XML, JavaScript">
  <meta name="author" content="Hege Refsnes">
  <meta http-equiv="refresh" content="30">

  <link href="filename" type="MIME type" rel="shortcun icon" />
  <link rel="stylesheet" type="text/css" href="theme.css">
</head>

7 W3C HTML Validator

Può essere inserito in una pagina con il seguente codice e serve per validare il codice della pagina 

<p>
  <a href=http://validator.w3.org/check/referer>
    <img src="http://ppl.eln.uniroma2.it/pw/img/w3c-html.png"
         alt="Validate" />
  </a>
</p>

8 Management of URLs

Ogni pagina web e ogni risorsa nel web haun indirizzo che prende il nome di URL (Uniform Resource locator). Un url ha la seguente forma: 

http://www.example.com/2011/samples/first.html

In cui abbiamo 3 parti principali:

  • Protocollo: il protocollo utilizzato (http)

  • Dominio: il nome del server (www.example.com)

  • Path: il path della risorsa (/2011/samples/first.html).

8.1 Document Root

Quando un web server riceve una richiesta per un particolare URL, il server comincia a cercare i file localmente in base al path fornito a partire dalla Document Root, che rappresenta la cartella root del web server. Alcune locazioni standard per le document root sono: 

/var/www/html
C:/xampp/htdocs

Quindi, se richiedo una risorsa con una path-web /img/foto1.jpg , e il server web ha la document root nella cartella /var/www/html , allora la path-reale in cui si trova il file è /var/www/html/img/foto1.jpg .

Detto altrimenti, il path che specifichiamo nell'URL è, rispetto al file-system del web server, un path relativo alla document root del server. Questo pone il problema di come strutturare le risorse nel document root de server che gestiamo.

8.2 Default Files

Alcune URL non includono il nome del file, in questo caso il server web cerca il file di default, che solitamente è index.html . Il nome del file di default può essere configurato e può variare da server a server. Ad esempio può essere uno tra i seguenti:

  • index.html

  • index.htm

  • default.html

  • index.php

  • index.asp

8.3 External/Internal Links

Posso utilizzare due tipi di link:

  • Link esterni: rappresentati da URL assoluti, vengono utilizzati per creare dei collegamenti con dei server al di fuori del server web in cui mi trovo.

  • Link interni: sono URL che linkano a una risorsa nello stesso server web. I link interni poi possono essere link interni assoluti, cioè relativi alla root interna della macchina, oppure link interni relativi, che non solo sono relativi rispetto alla macchina, ma anche rispetto alla posizione del contenuto all'interno della macchina.

8.4 Anchors

Posso linkare delle pagine in punti specifici, identificati da ancore (anchors). La url completa è formata quindi dal path e, opzionalmente, dall'id dell'elemento da cui devo iniziare a vedere la pagina,

Attributo target: specifica in quale finistra il link deve essere aperto. 

Esempio <a href="..." target="_blank">O'Reilly</a>

Posso dare un nome ad una finestra ed usarla più volte. 

<a href="..."  target="display">O'Reilly</a>.

Spesso non ha un effetto piacevole, in quanto sembra che i link non funzionano. Con javascript riesco a cotrollare meglio la nuova finistra: gestisco i pop up. Viene oramai utilizzato per aprire pagine