Scarica Introduzione all'HTML5: struttura e marcatori e più Appunti in PDF di Elementi di Informatica solo su Docsity!
LINGUAGGIO HTML
HTML è un acronimo: Hyper Text Markup Language ➢ Linguaggio per marcare (=annotare) ipertesti. Attualmente è arrivato alla versione 5 (HTML5) ed è ancora usata la penultima versione (HTML 4.01).
MARCATORI (TAG)
➢ HTML è un linguaggio che utilizza marcatori, detti TAG, per dare una struttura agli ipertesti. ➢ Ogni tag inizia con “<” e finisce con “>” Es: tag …. per i titoli di primo livello Questo è un titolo ….(titolo del documento, non è il titolo del documento ma del browser→si vede nella barra in alto della ricerca del sito: www….) ➢ Quasi tutti i tag hanno un’apertura (<h1>) e una chiusura (</h1>) contraddistinta dalla barra “/”
MAIUSCOLE E MINUSCOLE
➢ HTML non fa differenze tra maiuscole e minuscole (in inglese si dice “case-insensitive”): per esempio anche <H1>….</H1> andrebbe bene Es: <H1>Anche questo è un titolo</H1> Convenzione per questo corso: tutte minuscole
INIZIO DI UN DOCUMENTO
➢ Un documento HTML deve iniziare dichiarando quale variante di HTML usa: Per HTML 4.01 la dichiarazione è: <DCOTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN> Per HTML5 è invece semplicemente: <!DOCTYPE html> ➢ Tutto quel che segue, è racchiuso tra i due tag : <html>…...</html>
STRUTTURA DI UN DOCUMENTO
➢ Due parti:
- Intestazione: <head>….</head>
- Corpo del testo: <body>….</body> ➢ Quello che si vede nel browser (sito web) è solo quello che c’è nel corpo (body)→cioè compreso tra i tag <body> ….</body> <head> INTESTAZIONE ➢ Informazioni generali sulla pagina
Es: ... Ma non si vede come titolo nel documento! E’ il titolo del pannello del browser. ➢ Informazioni sul set di caratteri (charset) Es: Europa occidentale, orientale, Cina, universale… ➢ Link a file aggiuntivi Es: stile CSS, script Javascript ➢ Parole chiave (keywords) per i motori di ricerca – ormai poco (ab)usate ** CORPO DEL TESTO** ➢ Tutto quello che un utente vede nel browser Titoli, paragrafi Immagini Tabelle Liste Ecc… ESEMPIO DI PAGINA HTML
Pagina su Viterbo
Benvenuti a Viterbo
Ultima modifica di questa pagina: 4/10/2017
STRUTTURA DEL TESTO
Titolo primo livello header Titolo secondo livello …. Titolo sesto livello
Paragrafo
paragraph
A capo break line Linea orizzontale horizontal rule
e senza chiusura!
MARCATORI DI PAROLE SINGOLE (O FRASI)
Enfatizzato emphasized Rinforzato Evidenziato
Secondo la leggenda, Viterbo fu fondata...
due celle unite in orizzontale due celle unite in verticale L’ATTRIBUTO id ➢ L’attributo id identifica univocamente un elemento all’interno di una pagina Es:
➢ Necessario nel seguito per: Dare uno stile a quell’elemento (con i CSS) Predisporre il suo comportamento (con Javascript)
LINK (COLLEGAMENTI)
testo cliccabile ➢ href è un attributo obbligatorio per i collegamenti ➢ Il valore di href è un URL di un’altra pagina ➢ L’URL può essere assoluto o relativo ➢ Oltre ad href, se l’attributo target è assegnato come target=“blank”, l’altra pagina si apre in una nuova finestra URL ASSOLUTI E RELATIVI ➢ URL relativo: Esempio: citta/viterbo.html Sono validi relativamente ad una cartella Se si sposta il file in un’altra cartella, non funzionano più ➢ URL assoluto: Esempio: http://www.didattica.unitus.it Sono validi sempre (se la pagina esiste) Ormai “http://” può essere omesso (è sottinteso) URL RELATIVI Il collegamento citta/viterbo.html funziona se i file sono organizzati così: Cartella del sito che contiene il _file con _ e la cartella “citta”, la quale contiene il file viterbo.html PERCORSI RELATIVI ➢ Per “scendere” nelle sottocartelle basta inserire il nome della cartella seguito dalla barra “/” viterbo ➢ Per “risalire” nelle cartelle contenitrici basta inserire un doppio punto seguito da barra “../” torna su ESEMPIO DI PERCORSO RELATIVO CHE RISALE CON “..”
Cartella del sito che contiene una sottocartella la quale contiene il _file con _ e un’altra sottocartella “citta” che contiene il file viterbo.html
RIQUADRI
➢ Spesso occorre incapsulare alcuni contenuti in un riquadro …. ➢ Il bordo del riquadro è invisibile a meno che non sia specificato con i CSS ➢ Serve per “impaginare” il contenuto (layout) RIQUADRI IN HTML …. per una figura …. “navigare” il sito (link) …. un articolo …. una sezione …. parte “a latere” …. pie’ di pagina POSIZIONE DEI RIQUADRI ➢ I riquadri in HTML5 , ecc.. non sono posizionati automaticamente Es: “footer” non è messo automaticamente in fondo alla pagina Vanno posizionati con i CSS UTILITA’ DEI RIQUADRI ➢ Anche senza posizione, i riquadri “semantici” sono utili per i motori di ricerca ➢ , , ecc..qualificano il loro contenuto ➢ Il riquadro invece non fa “capire” di che tratta il suo contenuto ➢ Se un sito è ben indicizzato (per es. in Google), ottiene molte più visite
