Docsity
Docsity
Prepara i tuoi esami
Prepara i tuoi esami

Studia grazie alle numerose risorse presenti su Docsity

Ottieni i punti per scaricare
Ottieni i punti per scaricare

Guadagna punti aiutando altri studenti oppure acquistali con un piano Premium

Guide e consigli
Guide e consigli
Vendi su Docsity
Vendi su Docsity
Docsity AI
Docsity AI
AccediRegistrati

Prepara i tuoi esami

Studia grazie alle numerose risorse presenti su Docsity

Cerca documenti

Prepara i tuoi esami con i documenti condivisi da studenti come te su Docsity

Cerca la tua università

Trova i documenti specifici per gli esami della tua università

Video Corsi

Preparati con lezioni e prove svolte basate sui programmi universitari!

Quiz

Rispondi a reali domande d’esame e scopri la tua preparazione

Docsity AINEW

Riassumi i tuoi documenti, fagli domande, convertili in quiz e mappe concettuali

Maturità 2026

Studia con prove svolte, tesine e consigli utili

Esplora domande

Togliti ogni dubbio leggendo le risposte alle domande fatte da altri studenti come te

Argomenti di studio

Esplora i documenti più scaricati per gli argomenti di studio più popolari

Ottieni i punti per scaricare

Guadagna punti aiutando altri studenti oppure acquistali con un piano Premium

Condividi documenti
download point icon20 Punti

Per ogni documento caricato

Rispondi alle domande
download point icon5 Punti

per ogni risposta data (max 1 al giorno)

Tutti i modi per ottenere punti gratis
Ottieni punti subito

Scegli un piano Premium con tutti i punti di cui hai bisogno

Opportunità di studio

Scegli il tuo prossimo programma di studio

Entra in contatto con le migliori università del mondo e scegli il tuo percorso di studi

Classifica delle migliori università

Scopri le migliori università italiane secondo gli studenti

Community

Chiedi alla community

Chiedi aiuto alla community e sciogli i tuoi dubbi legati allo studio

Guide Gratuite

I nostri eBook salva studente

Scarica gratuitamente le nostre guide sulle tecniche di studio, metodi per gestire l'ansia, dritte per la tesi realizzati da tutor Docsity

Appunti HTML e CSS (Cascading Style Sheets), Appunti di Elementi di Informatica

Università degli Studi di Verona (UNIVR)Elementi di Informatica

Appunti delle lezioni sugli argomenti HTML e CSS, integrati con le slides, del corso Introduzione all'Informatica Umanistica del prof. Marco Rospocher (A.A. 2019/2020)

Tipologia: Appunti

2019/2020

Caricato il 24/10/2020

martina-passanante
martina-passanante 🇮🇹

4.4

(16)

21 documenti

1 / 5

Toggle sidebar

Questa pagina non è visibile nell’anteprima

Non perderti parti importanti!

bg1
HTML & CSS
Ingredienti delle pagine WEB
HyperText Markup Language (HTML) è usato per organizzare la struttura di una pagina web.
Cascading Style Sheets (CSS)
Fogli di stile
Usato per definire l’aspetto visuale ed estetico di un sito web (colori, stili, font, configurazione avanzata,
etc.)
Tutte le istruzioni di “formattazione” vengono raccolte in questi file e poi possono essere “richiamate”
da ogni pagina del sito
HTML
HTML è un linguaggio di markup (annotazione), non è un linguaggio di programmazione!
Non stiamo programmando la macchina per svolgere un particolare task computazionale; stiamo annotando
un testo con degli elementi particolare (chiamati tag).
I tag servono ad assegnare una determinata caratteristica al testo, come per esempio, indicare un’intestazione,
un paragrafo, etc.
I tag vengono poi interpretati da un particolare software (il web browser) per mostrare il contenuto secondo
le specifiche dei tag usati
Prima versione di HTML pubblicata da Tim Berners-Lee nel 1991
Ultima versione: HTML 5.2, rilasciata come W3C Recommendation nel 2017
Strumenti necessari per creare un HTML:
Un browser web
o E.g., Google Chrome, che, in particolare, possiede una suite di strumenti chiamata Developer
Tools, che è molto utile per sviluppare siti web
Un editor di testi “semplici” –non un word processor come Microsoft Word
o E.g., VS code
o Sublime Text
o Notepad, Notepad ++
CODE FORMATTING E CONVENZIONI
I tag e i vari attributi vanno sempre scritti in minuscolo, questa restrizione è stata introdotta in XHTML – una
variante più rigida di HTML.
Nonostante il codice HTML possa essere scritto in un’unica riga, indentarlo aumenta la leggibilità del prodotto:
1. Facilita un intervento successivo
pf3
pf4
pf5

Anteprima parziale del testo

Scarica Appunti HTML e CSS (Cascading Style Sheets) e più Appunti in PDF di Elementi di Informatica solo su Docsity!

HTML & CSS

Ingredienti delle pagine WEB HyperText Markup Language (HTML) è usato per organizzare la struttura di una pagina web. Cascading Style Sheets (CSS)  Fogli di stile  Usato per definire l’aspetto visuale ed estetico di un sito web (colori, stili, font, configurazione avanzata, etc.)  Tutte le istruzioni di “formattazione” vengono raccolte in questi file e poi possono essere “richiamate” da ogni pagina del sito HTML HTML è un linguaggio di markup (annotazione), non è un linguaggio di programmazione! Non stiamo programmando la macchina per svolgere un particolare task computazionale; stiamo annotando un testo con degli elementi particolare (chiamati tag ). I tag servono ad assegnare una determinata caratteristica al testo, come per esempio, indicare un’intestazione, un paragrafo, etc. I tag vengono poi interpretati da un particolare software (il web browser) per mostrare il contenuto secondo le specifiche dei tag usati  Prima versione di HTML pubblicata da Tim Berners-Lee nel 1991  Ultima versione: HTML 5.2, rilasciata come W3C Recommendation nel 2017 Strumenti necessari per creare un HTML:  Un browser web o E.g., Google Chrome, che, in particolare, possiede una suite di strumenti chiamata Developer Tools , che è molto utile per sviluppare siti web  Un editor di testi “semplici” – non un word processor come Microsoft Word o E.g., VS code o Sublime Text o Notepad, Notepad ++ CODE FORMATTING E CONVENZIONI I tag e i vari attributi vanno sempre scritti in minuscolo, questa restrizione è stata introdotta in XHTML – una variante più rigida di HTML. Nonostante il codice HTML possa essere scritto in un’unica riga, indentarlo aumenta la leggibilità del prodotto:

  1. Facilita un intervento successivo

a. Effettuare modifiche, sistemare problemi e/o estendere quanto fatto;

  1. Facilita l’intervento nostro o di altre persone  → indica che il documento è un documento HTML, ultima versione  → elemento principale, l’attributo “lang” indica la lingua principale del testo  L’elemento “head” raccoglie i metadati della pagina (e.g., titolo, autore, keyword, character set). Il contenuto dell’elemento “head” è usato dal browser, ma non è visualizzato nella pagina HTML  L’elemento “title” definisce il titolo della pagina; è molto importante anche in termini di indicizzazione sui motori di ricerca  L’elemento “body” è dove definiamo il contenuto della pagina HTML _GLI ELEMENTI INTESTAZIONE … _ Un elemento di intestazione descrive brevemente l’argomento della sezione che esso introduce. Le informazioni di intestazione possono essere usate dai programmi utente, ad esempio, per costruire automaticamente un sommario per un documento. In HTML ci sono sei livelli di intestazione: h1, h2, h3, h4, h5, h6 – dove h1 è il più importante ed h6 il meno importante. Non viene prodotta nessuna numerazione delle sezioni. PARAGRAFI E CONTENITORI La simbologia

    …

    rappresenta un paragrafo testuale, cioè l’unità base in cui suddividere un testo. Tipicamente (ma dipende dal foglio di stile) viene mostrato dal browser come separato dagli altri blocchi, prima e dopo, da una riga vuota o con la prima linea indentata. I blocchi di contenuto “generici” non sono associati ad un particolarre scopo di rappresentazione: vengono usati per raggruppare una parte di contenuto che condivide stile, visualizzazione o anche altri attributi (e.g., la lingua). ** … ** → separato dal blocco precedente da un’interruzione di linea senza lasciare spazi prima e dopo ** … ** → generico contenitore “in-line”, non va a capo, di conseguenza non spezza i conteniti in cui è inserito. SEPARATORI L’elemento
    indica esplicitamente un ritorno a capo
  • line break. Andare a capo nel testo non implica un ritorno a capo in HTML, il ritorno a capo va marcato esplicitamente. Quindi, per esempio, il tag
    , che è un tag unico e self-closing, può essere utilizato per scrivere i versi di una poesia o le linee che compongono un indirizzo.

La pagina di destinazione del collegamento viene specificata con l’attributo “href” nel tag di apertura, può far riferimento ad un altro file sul computer dove si trova la pagina di aprtenza o ad un altro indirizzo URL. COMMENTI Commentare un documento HTML può essere utile per documentare vari aspetti:

  1. Quello che si è fatto
  2. Come mai lo si è fatto in un determinato modo
  3. Il contenuto del documento HTML
  4. Etc. Per aggiungere un commento in HTML, il commento va preceduto da ****. I commenti sono visibili da chiunque accede il codice sorgente, ma sono ignorati dai web browser, e quindi non visualizzati nella pagina web risultante. ATTRIBUTI ID E CLASS Esistono degli attributi globali che possono essere usati in qualsiasi elemento di HTML: ID e CLASS.  ID: specifica un identicatico univoco per l’elemento. Solo un elemento può avere quel valore di id. Utile per: o Creare un collegamento ipertestuale ad un punto preciso all’interno della pagina o Definire uno stile specifico per un solo elemento  CLASS: permette di specificare uno o più classname (solitamente usati nei figli di stile) per un elemento o Permette di far riferimento ad una particolare definizione di stile. Tutti gli elementi aventi quella classe, saranno formattati nello stesso modo. VALIDARE UNA PAGINA HTML I web browser sono fin troppo buoni: molte volte riescono a visualizzare (almeno in parte) anche codici HTML non corretti. Le motivazioni possono essere varie:
  5. Mancanza del tag di chiusura di un elemento HTML;
  6. Errori di sintassi;
  7. Mix di tag (apertura con un tag e chiusura con un altro tag). Esistono vari strumenti per verificare la correttezza della pagina HTML. W3C HTML Validator HTML E STILE Sebbene sia nato come linguaggio per descrivere il contenuto e la struttura logina, HTML, nel corso degli anni, è diventato principalmente un linguaggio per la formattazione di pagine web, molto focalizzato sull’aspetto; per questa ragione è stato via via arricchito di tag ed attributi per definire stile e layout. Tuttavia, le buone pratiche di sviluppo web suggeriscono di tenere separata la definizione delle strutture e i contenuti della pagina (da esprimenre in HTML) dalla formattazione, domandando, quindi, la presentazione estetica del documento ad un altro liguaggio, il Cascading Style Sheets (CSS), cioè fogli di stile a cascata. CASCADING STYLE SHEETS (CSS) I CSS, fogli di stile a cascata, forniscono comandi per arricchire l’aspetto visuale ed estetico di una pagina, non si occupano di definirne la struttura ma solo gli aspetti estetici. La prima specifica di CSS, CSS 1, viene emanata da W3C nel 1996, la più recente è la CSS 3. È stato scelto il termine “cascading” perché:
  8. Le regole di stile possono esseree definite in più modi, e sono definite delle stratagie e priorità per risolvere eventuali conflitti;
  9. Gli stili personalizzati possono essere definiti, oltre che dal’’autore della pagina web, anche dal browser usato o dall’utente che visualizza la pagina. a. E.g., come utenti possiamo personalizzare il font ed i colori usati nel testo che visualizziamo con il browser.

ALTRI METODI PER PRODURRE HTML

Quello che abbiamo visto non è l’unico modo per produrre documenti HTML; esistono modi per generare documenti HTML senza che l’utente debba scrivere o conoscere il linguaggio HTML:  Usare editor WYSIWYG (What you see is what you get). o Microsoft Word o Con programmi online: https://htmlg.com/html-editor/ , https://htmled.it/  Usare un Content Management System (CMS) o E.g., WordPress, Google Sites, Drupal, Jommla, etc. o Documento HTML generato automaticamente “al volo” partendo da contenuti “non HTML” inseriti dall’utente  Molto usati per la creazione di blog, siti eCommerce, etc. In questi casi però il controllo della sorgente dell’HTML generato è completamente demandato ai programmi e non sempre è un codice pulito o minimale. Esistono, poi, ambienti per lo sviluppo Web “professionali”:  Adobe Dreamweaver  Microsoft Expression Web Questo tipo di programmi integrano molte funzioni per agevolare il lavoro degli sviluppatori  Integrazione con altri linguaggi per il web come PHP e Javascript  Funzioni automatizzate di ottimizzazione, validazione, versioning del codice e caricamento remoto su web server  Supporto per i Web Designer (e.g., Live View di Dreamweaver)