Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Html e tags
1. Modificare una pagina html significa modificare il
contenuto racchiuso tra i suoi tag.
HTML non è un linguaggio di programmazione ma un
linguaggio di “mark up”
HTMLHTML (tags principali)(tags principali)
Hyper Text Markup Language
è il linguaggio con cui si scrivono le pagine di internet
www -> world wide web
W3C è il Consorzio che definisce gli standard di questo
linguaggio
2. I < TAGS >I < TAGS >
• I tags sono etichette o marcatoriI tags sono etichette o marcatori
(racchiusi tra due apici) che(racchiusi tra due apici) che
spiegano al browser come devespiegano al browser come deve
essere interpretato il testoessere interpretato il testo..
<tag><tag> testotesto </tag></tag>
Possono venire nidificati e inseriti uno dentro l’altro. In questo
modo i tags figli (quelli che vengono dopo) ereditano il
comando dei tags padri (quelli che vengono prima)
3. Tags h1, h2, h3, h4, h5 e <p>
• “Titoletti”, inseriscono il testo con grandezza decrescente (secondo
una misura standard o prestabilita), risultano formattati in grassetto
e lasciano una riga vuota prima e dopo di sé.
<h1> testo </h1>
<h2> testo </h2>
<h3> testo </h3>
<h4> testo </h4>
<h5> testo </h5>
• <p> apre un paragrafo di testo e lascia una riga vuota prima
della sua apertura e dopo la sua chiusura. </p>
4. Il tag ancora <a> (link)
<a href=“index.html” >introduzione</a>
Introduzione
Tag di
apertura
Tag di
chiusura
Attributo che riferisce
ad un collegamento
verso la pagina web
“introduzione”
5. <html>
<head>
<title>titoletto </title>
<meta content=“Introduzione" />
</head>
<body>
<h1>TITOLO 1</h1>
<h2>TITOLO 2</h2>
<p>paragrafo</p>
<br /> (vai a capo)
<a href=“pagina.html”>vai a pagina</a>
</body>
Meta tags
Corpo della pagina
</html>
Tags principali di una paginaTags principali di una pagina
webweb
6. Ecco la visualizzazione dellaEcco la visualizzazione della
paginapagina
TITOLO 1
TITOLO 2
Paragrafo
vai a pagina
titoletto
File Modifica Visualizza Preferiti Strumenti ?
Pagina Strumentititoletto
7. LA MAPPA dei links di primo livelloLA MAPPA dei links di primo livello
(index.html)(index.html)
INTRODUZIONE
EDIFICIO Organizzazione e regole ATTIVITA’
<a href=“index.html”>introduzione</a> (avvio automatico)
<a href=“pagina.html”>pagina stesso livello</a>
Il nostro sito è un ipertesto di pagine collegate da
links
8. La visualizzazione di index.htmlLa visualizzazione di index.html
introduzione edificio organizzazione e regole attività
TITOLO 1
TITOLO 2
Paragrafo
TITOLO 2
Paragrafo
titoletto
File Modifica Visualizza Preferiti Strumenti ?
Pagina Strumentititoletto
9. <html>
<head>
<title>titoletto </title>
<meta content=“Introduzione" />
</head>
<body>
<a href=“index.html”>vai a pagina</a> <a href=“pagina.html”>vai a
pagina</a> <a href=“pagina.html”>vai a pagina</a>
<h1>TITOLO 1</h1>
<h2>TITOLO 2</h2>
<p>paragrafo</p>
<br></br>(vai a capo) => <br />
</body>
Meta tags
Corpo della
pagina
</html>
Tags principali diTags principali di
index.htmlindex.html
10. Sia il tag <div> che il tag <span> sono contenitori che possono
anche essere associati a dei fogli di stile CSS o a delle funzioni
javascript e tutto ciò che contengono reagisce di conseguenza.
<div id=“logo”> <a href=“index.html”><img scr=“logo.gif”/> </a> </div>
Tags <div> e <span>
Tag di
apertura
Tag di
chiusura
attributo che identifica
univocamente l’elemento
logo
<div class=“testoRosso”> Testo </div>
attributo che identifica una
classe di elementi che si
ritroveranno nella pagina
11. TagTag <!–<!– -- commentocommento -- ->->
• Il contenuti racchiuso dentro questi marcatori non ha
alcun effetto. Serve al programmatore per commentare i
blocchi di codice.
Utile per disattivare blocchi di codice che non servono
12. Alcune novità dell’HTML 5
- vengono rese più stringenti le regole per la strutturazione del testo
in capitoli, paragrafi e sezioni<section>;
-- vengono introdotti elementi di controllo per i menu di navigazione <nav>;
-- vengono introdotti elementi specifici per il controllo di contenuti multimediali
(<video> e <audio>);
-- vengono estesi a tutti i tag una serie di attributi finora previsti solo per alcuni tag;
-- viene supportato <canvas> che permette di utilizzare JavaScript per creare
animazioni e grafica bitmap;
-- introduzione della geolocalizzazione, dovuta ad una forte espansione di sistemi
operativi mobili (quali Android e iOS, tra i più diffusi);
-- standardizzazione di programmi JavaScript, chiamati Web Workers e possibilità di
utilizzare alcuni siti offline;
-- sostituzione dei vecchi doctype, con un semplice <!DOCTYPE html>.
