Descrizione Html

In informatica l'HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è il linguaggio di markup solitamente usato per la formattazione di documenti ipertestuali disponibili nel World Wide Web sotto forma di pagine web. In generale una pagina web, per essere visibile e intelligibile sul Web, deve essere opportunamente formattata. Il linguaggio di formattazione è l'HTML. La formattazione consiste nell'inserimento nel testo di marcatori o etichette, detti tag, che descrivono caratteristiche come la funzione, il colore, le dimensioni, la posizione relativa all'interno della pagina.

Sommario guide Html

Sommario versione 2.0

Con i nostri sommari cerchiamo di elencare tutti i possibili argomenti di un settore di studi di materie informatiche. 

elenco di tutti i marcatori e attributi Html a fondo pagina

 

Introduzione a HTML  ht01

    1. Modificare e visualizzare file in Html

        1. aprire/creare una pagina web ht09
        2. modificare una pagina web
    2. Impostare la struttura

        1. specificare il tipo di documento (!DOCTYPE) ht04
        2. schema del documento html5
        3. sezione head (metatag - charset - link css) ht05
        4. sezione body 
        5. titolo della pagina ht03
        6. marcatura della navigazione
        7. i nuovi tag strutturali (teoria) ht06
    3. Formattare il testo con i tag

        1. creare paragrafi
        2. creare intestazioni 
        3. applicare grassetto e corsivo
        4. allineare il testo ht02
        5. applicare apice e pedice 
        6. testo preformattato 
        7. citazioni 
        8. impostazioni visualizzazione
        9. testo enfatizzato 
        10. span
    4. Utilizzare elenchi e sfondi

        1. creare elenchi puntati e numerati 
        2. inserire caratteri speciali 
        3. inserire righe orizzontali
        4. scegliere i colori di sfondo e del testo
        5. definire il file immagine di sfondo
    5. Creare collegamenti ipertestuali e punti di ancoraggio

        1. collegamento ad una pagina web
        2. collegamento ad un indirizzo di posta elettronica
        3. collegamento ad un punto di ancoraggio ht07
        4. collegamenti verso altri contenuti
    6. Visualizzare le immagini

        1. selezionare un formato grafico
        2. preparare le immagini per il web
        3. inserire immagini
        4. disporre le immagini in una pagina
        5. controllare le dimensioni di una immagine
        6. creare collegamento ipertestuale grafico
        7. usare le miniature
        8. testo alternativo per le immagini
        9. didascalie alle figure
        10. immagini scalate
    7. Supporti alla navigazione

        1. barra di navigazione testuale
        2. barra di navigazione grafica
        3. mappare punti di una immagine
        4. reindirizzare ad un altro URL
    8. Layout basati su Division

        1. creare e formattare contenuti generici (div) ht08
        2. tag semantici in Html
        3. creazione di un article
        4. definizione di un section
        5. definizione di un aside
        6. creazione di un footer
    9. Tabelle

        1. tabella semplice
        2. dimensionare una tabella
        3. unire celle
        4. usare le tabelle per il layout di pagina
        5. applicare bordi
        6. applicare riempimenti
        7. modificare il padding, la spaziatura e l'allineamento di una cella
    10. Form utente

        1. creare un form
        2. creare caselle di controllo e pulsanti di opzione
        3. creare elenchi
        4. altri input
        5. strumenti avanzati
    11. Suoni e video

        1. codec
        2. formati audio video
        3. dimensioni dei file e qualità
        4. codificare i video
        5. incorporare clip video
        6. posizionare una clip video
        7. incorporare audio
        8. posizionare una clip audio
    12. JavaScript e contenuto esterno

        1. tag canvas
        2. introduzione a javaScript
        3. eventi javaScript e jQuery
    13. Progetti

        1. xxxx

 

Tutti i Marcatori (TAG) .... con i loro [attributi]   

non più supportati in HTML5

 

(link)            [href - target]

(grassetto)

BODY (corpo pagina)      [style]

BIG    (testo grande)

BLOCKQUOTE    (citazione) 

BR  (a capo) 

CITE   (testo con titolo di un opera)

EM  (testo enfatizzato) 

DEL  (testo barrato)

DFN   (istanza di definizione di un termine)

CODE   (testo come codice informatico)

FORM   (moduli)              [action - method - accept-charset - autocomplete - enctype - name - novalidate - target]

H1 - H2 - H3 - H4 - H5 - H6   (intestazioni)        [style]

(corsivo) 

IMG  (immagine)        [alt - crossorigin - height - ismap - longdesc src - usemap - width]

INPUT     (campo inserimento dati es. form)     [name - type - value]

INS     (testo inserito)

KBD   (testo come input da tastiera)

LI   (elenchi - voci elenco) 

MARK  (testo evidenziato)

META   (metadati)           [charset - name - content - http-equiv]

OL    (elenchi numerati)

P   (paragrafo)                  [style]

PRE   (preformatted text) 

S    (testo barrato)

SAMP   (testo come output di un programma computer) 

SMALL  (testo più piccolo)

STRONG  (testo importante)

SUB  (pedice) 

SUP  (apice)

TABLE  (tabella)

TD  (tabella - celle formattate come normale)

TH  (tabella - celle formattate come titolo)

TR  (tabella - righe)

TITLE  (titolo pagina)

U    (sottolineato)

UL  (elenchi puntati) 

VAR  (testo come definizione di una variabile)

___

 

 

Tutti gli attributi  

 

alt    (immagine ... testo collegato se non carica immagine)

action    (es. dove inviare dati/form .. URL)

charset   (set di caratteri --- META)

content     (specifica contenuto di un "oggetto" Html)

height    (altezza es. per immagine - in html5 solo pixel es "100")

href    (link)

http-equiv    (con tag meta per refresh pagina)

method    (es. come inviare dati/form .. send/post)

name    (specifica proprietà)

src    (immagine)

start   ("inizia da" es. elenchi)

style    (cambiare gli stili di default di elementi Html)

style="background-color:red"     (colore di sfondo)

style="color:blue"       (colore elemento)

style="font-family:verdana"         (font tipo)

style="font-size:300%"          (font dimensione)

style="text-align:center"        (allineamento testo)

target    (link dove ..)

type    (es. tipo oggetto di input per i form  .. bottone .. casella testo ...)

value    (assegna un valore di testo ad un oggetto es. bottone)

width   (larghezza es. per immagine - in html5 solo pixel es "100")

 ___

 

 

Esempi    marcatore  attributo  proprietà  valore           

 non più supportati in HTML5

 

<a href="www.guideinformaticagratis.it">Vai al nostro blog</a>   [link stessa pagina]

<a href="http://www.w3schools.com" target="_blank">Vai al sito W3Schools</a>


<b>qui testo in grassetto</b>                [grassetto]


<big>testo più grande</big>          [testo più grande]


<body>   </body>         [corpo della pagina]

<body style="background-color:red">


<br>       [a capo]


<cite>citazione … titolo di un opera</cite>  


<code>testo come codice informatico</code>             


<del>qui il testo da barrare</del>             [testo barrato]


<dfn>istanza di definizione di un termine</dfn>  


<em>testo enfatizzato</em>     


<form action="dove inviare i dati .. asp" method="get">
  Nome: <input type="text" name="nome form che vede amministratore"><br>
  Cognome: <input type="text" name="Cogn."><br>
  <input type="submit" value="testo del pulsante">
</form>                                                  memo: tanti tipi di input nuovi da fare  wink  


 <h1> qui testo come intestazione </h1> ....  <h6>__</h6>     [intestazioni da 1 a 6]

<h1 style="color:blue">intestazione colorata di blu</h1>

<h4 style="font-family:verdana">intestazione con font verdana</h4>

<h1 style="font-size:300%">intestazione dimensione grande</h1>

<h1 style="text-align:center">intestazione testo centrato</h1>

<h6 style= "background-color:red" >intestazione sfondo colorato</h6>

<h1 style="text-align:center" ; "color:blue">int. testo centrato e colorato</h1>     [più di uno]


<i>testo in corsivo</i>         [corsivo]


<img src="smiley.gif" alt="Smiley face">             [inserimento immagine]

<img src="smiley.gif" alt="Smiley face" width="42" height="42">         [+ testo sostitutivo e dimensioni]


<kbd>testo come un input da tastiera</kbd>           


<mark>questo testo è evidenziato</mark>  


<meta charset="UTF-8">    [oppure]   <meta charset="ISO-8859-1">
<meta name="description" content="...descrizione contenuto sito">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Mario Rossi">

<meta http-equiv="refresh" content="30">

<meta http-equiv="refresh"content="10;url=http://www.w3schools.com/">

<meta name="aplication-name" content="nome app ...">

<meta name="Generator" content="Joomla! - Copyright (C) 2005 - 2006 Open Source Matters. Tutti i diritti riservati.">


 <ol>                               [inizia elenco con numeri o lettere ol]
  <li>caffè</li>               [oggetto elenco]
  <li>Tea</li>
  <li>latte</li>
</ol>                                 [fine elenco]

<ol start="50">              [inizia partendo da 50]
  <li>Caffè</li>
  <li>Tea</li>
  <li>latte</li>
</ol>

<ul>                               [inizia elenco puntato ul]
  <li>Caffè</li>               [oggetto elenco]
  <li>Tea</li>
  <li>latte</li>
</ul>                         [fine elenco]    memo: da fare "reversed" e "type" wink  ...qualcuno lo farà prof  


<p>  questo è un paragrafo </p>        [paragrafo]

<p style="color:red">paragrafo colorato di rosso</p>

<p style="font-family:courier">paragrafo con font courier</p>

<p style="font-size:160%">paragrafo dimensione grande</p>

<p style="text-align:center">paragrafo testo centrato</p>

<p style= "background-color:red" >paragrafo sfondo colorato</p>

<p style="text-align:center" ; "color:blue">par. testo centrato e colorato</p>    [più di uno]   


<s>questo testo è barrato</s>  


 <samp>testo come output da un programma per computer </samp


<small>Copyright 1999-2050 by Refsnes Data</small>      [testo più piccolo]   


<strong>testo importante</strong>         


<sub>questa scritta compare sotto la linea</sub>           [pedice - sotto]   


 <sup>questa scritta compare sopra la linea</sup>           [apice - sopra]   


 <table>                            [inizio tabella]  


  <tr>                           [inizio riga 1 tabella]
    <th>titolo 1</th>       [cella 1 della riga 1 th formattato come intestazione tabella]
    <th>titolo 2</th>          [cella 2 della riga 1 th]
  </tr>                          [fine riga 1 tabella]
 

             <tr>                                [inizio riga 2 tabella]
         <td>normale 1</td>     [cella 1 della riga 2 td formattato come riga normale]
         <td>normale 2</td>         [cella 2 della riga 2 td]
      </tr>                          [fine riga 2 tabella]

 
</table>                          
[fine tabella]   


<title>Qui il titolo della pagina Html</title>                 [da inserire in "<head>"]


 <u>testo sottolineato</u>        [sottolineato]


<var>testo come una definizione di una Variabile</var>

_

 

 

Tipi di tag

 

Metadati:

meta - 

 

Flusso:

video - 

 

Sezione:

 

Intestazione:

 

Locuzione:

video - 

 

Inclusi:

video - 

 

Interattivi:

video - 

 

 

 

 

 

 

_