Upload
giocoscuola-chizzali
View
92
Download
2
Embed Size (px)
Citation preview
Tags HTMLTags HTML
Non è un linguaggio di programmazione E’ un insieme di comandi <TAGS> che
dicono al browser come deve leggere il testo
Esistono degli standard internazionali W3C che aiutano i costruttori di siti web a rendere le pagine accessibili a tutti
Per la formattazione e il design si usano fogli di stile separati CSS
Gli standard del www Consortium garantiscono un codice web più pulito in modo da poter essere più facilmente riutilizzato
Aiutano a compilare le pagine web con un codice corretto attraverso le DTD (DocType Declaration)
http://validator.w3.org/ http://www.w3.org/1999/xhtml/ http://www.w3.org/TR/html5/
I tags sono comandi che spiegano al browser come deve essere interpretato il testo.
<tag> testo </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)
<html><head><title>titoletto </title><meta content=“Introduzione" /></head>
<body><h1>TITOLO 1</h1><h2>TITOLO 2</h2><p>paragrafo</p><a href=“pagina.html”>vai a pagina</a></body>
Meta tags
Corpo della pagina
</html>
TITOLO 1
TITOLO 2
Paragrafo
vai a pagina
titoletto
File Modifica Visualizza Preferiti Strumenti ?Pagina Strumentititoletto
Serve per dividere parti diverse della pagina
Grammatica:
<div id/class="nomeElemento">elemento…</div>
Uno soloUn classe di elementi che compaiono più volte
Inizia un nuovo paragrafo e va a capo saltando una riga.
grammatica:
<p> testo del paragrafo</p>
Iniziano un campo di testo di altezza diversa.
grammatica:
<h1> TESTO</h1><h2> TESTO</h2>
Inserisce un’ancora o link Grammatica: <a href=‘’URL, indirizzo’’ title=‘’fumetto’’>link</a>
Assoluto: http:www.indirizzo.it
relativo: ../cartella/file
Inserisce un’immagine
grammatica:
<img src=‘’indirizzo della risorsa’’ alt=‘’descrizione’’ />
Aggiungono la grafica alla pagina html con immagini e sfondi
Funzionano a cascata, cioè le regole che vengono dopo ereditano dalle regole precedenti i comandi
#body { width= 100%; height=auto; background: #000000;}
.h1{ font-color: #FFFFFF;
font-family:’Times-Roman’;
font-size:14px;
}
id=unico
class=per tutti i tag così nominati
<body>
<header>
<head><title></title></head>
<menu>
<Layer_sx><Layer_dx>
<footer>
<pagina del contenuto>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>PaGiNaDiNaMiCa</title><meta name="keywords" content="html, corso base, css" /><meta name="description" content="corso html Venezia" /><meta name="author" content="Chizzali Marco" /><link media="all" rel="stylesheet" href="template/stile.css" /></head>
<body>
<div id="contenitore">
<div id="logo"><div id="nome">PaGiNaDiNaMiCa</div><div id="motto">Costruisci il tuo sito con noi!</div>
<div id="menualto"><a href="index.html" title="Homepage">Home</a><a href="chisiamo.html" title="Chisiamo">Chi siamo</a><a href=prodotti.html" title="prodotti" >prodotti</a><a href="carrello.html« title=carrello" >Acquista on line</a> </div>
</div> <!–- chiude il tag <logo> -- >
<div id="centrale">
<div id="sinistra"><h4> sinistra</h4><ul><li><a href="index.html« title=" homepage" > home </a></li><li><a href="storia.html“ title="la nostra storia">La storia </a></li><li><a href="dovesiamo.html" title=“dove siamo«> dove siamo</a></li></ul></div>
<div id="pagina">
<div class="titrovi">Ti trovi in:<a href=" index.html ">home</a></div>
<div class="Avviso"> <div class="titoloAvviso"> titolo</div> <div class="contenutoAvviso"> <p>Contenuto</p> <img src=«immagine.jpg" alt="descrizione"/> <a href="link.html" title="descrizione">link</a></div> </div></div>
<div id="destra"><h4>destra</h4><ul><li><a href="rss.asp">feed degli avvisi</a></li></ul></div></div>
<div id="footer"> <a href="mailto:[email protected]">Webmaster</a><a href="privacy.html" title="Privacy">privacy</a><a href="login.html title="Riservato">Account manager</a><h4>TEL. 3485640206</h4></div> <h5>Copyright © 2014 - All Rights Reserved</h5></div></div></body></html>
body {margin: 0;text-align: center;height: 100%;width: auto;background-image: url(../img/bg.gif);
}#contenitore {
width:1000px;height: 100%;margin-top: 2px;margin-right: auto;margin-bottom: 2px;margin-left: auto;
}
/* testata */#logo {
width: 996px;height: 250px;color: #002851;margin: 0px;background-image: url(../img/logo.jpg);}
#motto {font-family: "Century Gothic";font-size: 24px;height: 40px;width: 400px;margin-top: 180px;margin-left: 10px;
}