23
Tags HTML Tags HTML

Html TAGS 2

Embed Size (px)

Citation preview

Page 1: Html TAGS 2

Tags HTMLTags HTML

Page 2: Html TAGS 2

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

Page 3: Html TAGS 2

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/

Page 4: Html TAGS 2

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)

Page 5: Html TAGS 2

<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>

Page 6: Html TAGS 2

TITOLO 1

TITOLO 2

Paragrafo

vai a pagina

titoletto

File Modifica Visualizza Preferiti Strumenti ?Pagina Strumentititoletto

Page 7: Html TAGS 2

Serve per dividere parti diverse della pagina

Grammatica:

<div id/class="nomeElemento">elemento…</div>

Uno soloUn classe di elementi che compaiono più volte

Page 8: Html TAGS 2

Inizia un nuovo paragrafo e va a capo saltando una riga.

grammatica:

<p> testo del paragrafo</p>

Page 9: Html TAGS 2

Iniziano un campo di testo di altezza diversa.

grammatica:

<h1> TESTO</h1><h2> TESTO</h2>

Page 10: Html TAGS 2

Inserisce un’ancora o link Grammatica: <a href=‘’URL, indirizzo’’ title=‘’fumetto’’>link</a>

Assoluto: http:www.indirizzo.it

relativo: ../cartella/file

Page 11: Html TAGS 2

Inserisce un’immagine

grammatica:

<img src=‘’indirizzo della risorsa’’ alt=‘’descrizione’’ />

Page 12: Html TAGS 2

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

Page 13: Html TAGS 2

#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

Page 14: Html TAGS 2

<body>

<header>

<head><title></title></head>

<menu>

<Layer_sx><Layer_dx>

<footer>

<pagina del contenuto>

Page 15: Html TAGS 2

<!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>

Page 16: Html TAGS 2

<body>

<div id="contenitore">

<div id="logo"><div id="nome">PaGiNaDiNaMiCa</div><div id="motto">Costruisci il tuo sito con noi!</div>

Page 17: Html TAGS 2

<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> -- >

Page 18: Html TAGS 2

<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>

Page 19: Html TAGS 2

<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>

Page 20: Html TAGS 2

<div id="destra"><h4>destra</h4><ul><li><a href="rss.asp">feed degli avvisi</a></li></ul></div></div>

Page 21: Html TAGS 2

<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 &copy; 2014 - All Rights Reserved</h5></div></div></body></html>

Page 22: Html TAGS 2

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;

}

Page 23: Html TAGS 2

/* 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;

}