Mappa concettuale HTML/CSS - Tecnologie web, Schemi e mappe concettuali di Programmazione e Tecnologie Web

Scarica Mappa concettuale HTML/CSS - Tecnologie web e più Schemi e mappe concettuali in PDF di Programmazione e Tecnologie Web solo su Docsity! <article>: sezione usata per un <section>: raccolta di diversi contenuto completato ed contenuti associati allo stesso autoconsistente tema <nav>: sezione con riferimenti (link) ad altri documenti o a parti dello stesso documento <aside>: sezione con contenuti diversi da quelli del documento, ma ad essi correlati <header>: sezione con contenuti introduttivi della porzione del documento per la quale è definita <footer>: sezione con contenuti generali relativi alla porzione del documento per la quale è definita <address>: sezione con informazioni di contatto relative alla porzione del doc per la quale è definita <hn>: identifica uno dei n livelli di titolo di sezione predefinito <hr>: introduce un separatore di paragrafi nel documento <p>: definisce il contenuto di un paragrafo del documento <!— commento —>: inserisce un commento <i>...</i>: testo in linguaggio diverso da quello del contesto <b>...</b>: testo da evidenziare _...: pedice ^...: apice <cite>...</cite>: citazione breve <abbr>...</abbr>: abbreviazione <q>...</q>: citazione estesa <dfn>...</dfn>: definizione <strong>...</strong>: testo con forte rilevanza SCHEMA SEQUENZIALE: l’utente deve rispettare un rigido sistema seq. SCHEMA SEQ. INDICIZZATO: | riferimenti che gli elementi appartenenti all’indice creano, è riferito a sezioni del doc corrente SCHEMA GERARCHICO: La home si articola in tanti sotto concetti, che a loro volta hanno la stessa struttura SCHEMA PERSONALIZZATO: Misto tra i schemi sovrastanti E’ un collegamento che permette di accedere ad un’altra sezione del documento o ad un documento dello stesso sito web o ad un documento che si trova in un altro sito Relativamente alla posizione del documento: <a href=“.../poeti/ Dante.html”">...</a> <a>Ancora</a>: crea un hyperlink all’interno della stessa pagina o ad un’altra pagina web | path relativi al link dei documenti possono essere In modo assoluto: <a href="/ specificati in due modi poeti/Dante.html”></a> <base>: specifica i riferimenti di base di un documento Attraverso link che consentono di accedere a contenuti non html esterni alla pagina Una pagina web è legata a Attraverso l'inclusione dei risorse non html contenuti non html nella pagina stessa <video>: inserisce una risorsa video in un documento <img>: inserisce un immagine in un documento <audio>: inserisce una risorsa TAG HTML audio in un documento <iframe>: inserisce una sotto- finestra di visualizzazione Le mappe d'immagine consentono la definizione di aree all’interno di un immagine la cui sezione, in fase di visualizzazione, determina l'attivazione di particolari eventi da parte del browser <map>: definisce una mappa d’immagine <area>: definisce coordinate e link di un’area della mappa | dati inseriti nella form possono essere inviati al server usando type="password”: definisce un diversi formati; lo standard predefinito codifica i dati in un’unica stringa <label>: definisce un’etichetta per un elemento della form elemento testuale che in fase di inserimento dati visualizza tutti caratteri * type="text”: definisce un elemento di tipo testuale type="checkbox”: definisce un elemento di input a valore predefinito che l'utente può selezionare spuntando type=“file”: definisce un elemento di tipo file type="reset”: definisce un bottone che riporta lo stato degli elementi della form a quello iniziale type="radio”: definisce singoli elementi di una lista analoghi ai checkbox, ma selezionabili in mutua esclusione type="button”: definisce un bottone che non ha alcuna azione predefinita associata type="submit”: definisce un bottone che invia al server i dati degli elementi della form type="hidden”: definisce un elemento invisibile all'utente, i cui valori degli attributi name e value vengono inviati al server assieme agli altri dati della form <select>: definisce un elenco di opzioni visualizzate in un menu a tendina <legend>: definisce una legenda Sono strutture html per la creazione di pagine interattive <form>: definisce una form, specificando le sue caratteristiche generali <input>: crea un elemento di input in una form; type è un suo attributo e specifica il tipo di dato dell'elemento e l'eventuale tipo di controllo da effettuare TAG HTML <textarea>: definisce un box per l'input di testo <fieldset>: definisce un raggruppamento di elementi per il fieldset della form <option>: definisce le singole opzioni di un elemento <select> TAG DI SEZIONE SEMANTIC TAG GLI HYPERLINK MULTIMEDIA LE FORM A livello di visualizzazione, il documento genera una pagina con LAYOUT DIPENDENTE dal E' un linguaggio di MARKUP browser utilizzato per descrivere il contenuto dei documenti visualizzati dai browser Due organismi di W3C standardizzazione WHATWG Viene interpretata dai browser senza errori di sintassi, è supportata da tutti i browser, viene associata ai documenti HTML5 con MIME-type text/html Deriva dal linguaggio XML, il browser interrompe il processo al verificarsi di un errore sintattico, non è supportata da tutti i browser, viene associata ai documenti con MIME-type application/xhtml+xml SINTASSI HTML XHTML5 INCOMPATIBILITA' CROSS BROWSER: | browser possono interpretare in maniera diversa i tag in html Il documento himl è un contenitore di info che vengono ad es. visualizzate in relazione alle dimensioni della finestra del browser aperto | tag sono termini racchiusi tra parentesi angolare, possono essere annidati, sono CASE- INSENSITIVE | tag possono essere di due tipi Il linguaggio HTML rappresenta un documento utilizzando i TAG CONTENITORI <body>...</b0dy>, <p>...</p> VUOTI <br>, <hr> | tag vuoti e quelli iniziali dei tag contenitori possono includere ATTRIBUTI; alcuni di questi sono CROSS-TAG, cioè Attributi COMUNI: class, dir, hidden, id, lang, style, title... possono essere utilizzati in tutte le tag dell’html <html>: racchiude l’intero documento html <head>: identifica le info enerali associate al documento TAG FONDAMENTALI <title>: definisce il titolo del documento <div>: raggruppa un insieme di elementi del documento Liste ordinate E’ un elenco strutturato di elementi testuali Liste non ordinate Liste di definizioni <ol>: definisce un elenco ordinato di elementi HTML TAG HTML <ul>: definisce un elenco non ordinato di elementi Può contenere metadati <dl>: definisce una lista di coppie (nome, valore) creando una struttura analoga al glossario Attributi RISERVATI: border, action, method, href, target, start,.. Può essere preceduto dal tag <! DOCTYPEhtmb> <body>: identifica il contenuto (corpo) di una pagina web <li>: definisce i singoli elementi della lista <dt>: definisce il nome dell'’elemeno Consentono di organizzare le informazioni contenute in un documento secondo una sequenza di celle <table>: definisce una tabella <dd>: definisce il valore dell'elemento <tr>: definisce una riga di una tabella TABELLE <td>: definisce una cella di una tabella TAG HTML <caption>: definisce il testo della didascalia di una tabella <col>: identifica le singole colonne o gruppi di colonne <th>: definisce l’intestazione di una tabella <colgroup>: definisce gruppi di colonne nella tabella CSS La modalità di visualizzazione di un documento HTML è definita tramite fogli di stile che sono CSS mette a disposizione molte proprietà modificabili relative a colore, altezza, larghezza, font, text-align, colore, border, background colore/image, font- ecc. , e una serie di particolari size/family/style,.. selettori un’insieme di regole di formattazione degli elementi «E EF E>F EF EA, E[A] E[A=VI], E:link, E:visited, .... <link>: identifica i file esterni collegati al documento <style>: definisce le regole di TAG formattazione degli elementi E’ possibile associare ad una regola di stile in <style> un nome, creando così una classe di stile che può essere utilizzata per formattare il contenuto di tag selezionate nel documento Classi GENERICHE: possono essere applicate a tutti i tag Classi SPECIFICHE: possono essere applicate a particolari tag CLASSI DI STILI Ordine di precedenza: stili inline, stili interni al documento, stili esterni definiti nei file .cSS, stili standard impostati dal browser BLOCK-BOX: elementi successivi di questo tipo vengono visualizzati in sequenza verticale, dall’alto verso il basso INLINE-BOX: vengono visualizzati in sequenza orizzontale, da sinistra a destra (per default) Due tipologie di box: STATIC: la posizione è calcolata secondo la modalità di default RELATIVE: l'elemento viene inizialmente calcolata come nel caso static, poi viene spostato in Possibilità di alterare il accordo con le varie proprietà La visualizzazione di un documento html da parte del browser avviene associando a ciascun elemento un’area (box) e collocando le aree all’interno della finestra di visualizzazione posizionamento standard degli elementi: (top, right, bottom, left) ABSOLUTE: la posizione dell'elemento è determinata dai valori delle proprietà top, right, bottom, left FIXED: la posizione (viewport) dell'elemento è fissa FLOAT: definisce come l'elemento si posiziona rispetto a quello che lo segue nel documento (left, right) Possibilità di alterare il posizionamento orizzontale degli elementi: CLEAR: elimina le conseguenze sul posizionamento dell'elemento per cui è specificato dovute alla presenza di elementi float accanto ad esso (left, right, both) Margin (auto, px, %, cm, pt, em,..) Border Padding (%,px, pt, cm, em, ..) Proprietà elementi: . Width (auto, %, px, pt, cm, em, ..) Height (auto, %, px, pt, cm, em, ..)