Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ETIQUETES HTMLDOCTYPE"-//W3C//DTD HTML 4.01//EN"“Document DTD publicat pel W3C, versió 4.01 de l’HTML /Idioma anglès”"http...
<body>                    <h1>Enunciat principal</h1>                    <h2>Títol secció</h2>                    <h3>Text...
ELEMENTS EN LÍNIACITES CURTES<q lang=”indica l’idioma de la cita”><q cite=”indica la pàgina web de la cita>           <p>A...
<ol>             <li>Capítol 1</li>             <li>Capítol 2               <ol>                 <li>Secció 2.1</li>      ...
TAULES <table></table><tr></tr> - Fila<th></th> - Encapçalaments per a les columnes de la taula<td></td> - Cel·la<caption>...
<label for”exemple”>aquí va el text</label>                  Type=”text”        Introduir una línia de text               ...
Upcoming SlideShare
Loading in …5
×

Etiquetes HTML bàsiques - Resum - Multimedia (UOC) - Paquita Ribas

1,529 views

Published on

Resum de les etiquetes més usades d'HTML, assignatura Llenguatges i Estàndards Web, del Grau Multimèdia de la UOC.

Published in: Education
  • Be the first to comment

Etiquetes HTML bàsiques - Resum - Multimedia (UOC) - Paquita Ribas

  1. 1. ETIQUETES HTMLDOCTYPE"-//W3C//DTD HTML 4.01//EN"“Document DTD publicat pel W3C, versió 4.01 de l’HTML /Idioma anglès”"http://www.w3.org/TR/html4/strict.dtd"Indica el document DTD utilitzat per a aquest doctypeSi el documen és HTML farem servir:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">Si el document és XHTML farem servir:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">DOCUMENT HTML <html> </html> – Inclou la capçalera i el document <html> <head> <title>Títol de la pàgina</title> </head> <body> <h1>Enunciat principal</h1> </body> </html>CAPÇALERA – Inclou idioma, títol, paraules clau I descripció <head> <title> </title> <meta name=”description” content=”el que conté la web”> <meta name=”keywords” content=”paraules clau”> </head>--- <html lang="en-GB"> <head> <title>Títol de la pàgina</title> <meta name="description" content="Això és una pàgina d’exemple per a poder memoritzar les etiquetes"> <meta name="keywords" content="etiquetes, capçalera, clau, uoc, codi"> <style type="text/css"> body{ background:#000; color:#ccc; font-family: helvetica, arial, sans-serif; } </style> </head>
  2. 2. <body> <h1>Enunciat principal</h1> <h2>Títol secció</h2> <h3>Text secció</h3> </body> </html>ESTILS - <style> </style> <style type="text/css" media="print"> body{ background:#fff; color:#000; font-family: helvetica, arial, sans-serif; font-size:300%; } </style>Pantalla= screen,impressió= print, aparells portàtils= handheld, presentacions= projectionCSS <link> - Atribut: href=”nom de l’arxiu CSS”Importar arxius externs<link rel="stylesheet" type="text/css" media="screen" href="styles.css"><link rel="stylesheet" type="text/css" media="print" href="printstyles.css">SCRIPS <script> </script> - Atribut: src=”nom del script”Importar arxius externs <script src="leaving.js"></script>ELEMENTS DE BLOCTÍTOLS<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6> <h1>Títol principal</h1> <h2>Inici de secció</h2> <h3>Subsecció</h3> <h4>Text</h4> <h5>Text més petit</h5> <h6>Text mínim</h6>PARÀGRAFS - <p> </p> <p>Els paràgrafs es delimiten entre aquestes dues etiquetes</p>CITAR FONTS - <blockquote cite”....”> <p> </p> </blockquote><p>HTML 4.01 és l’única versió que hem d’utilitzar quan dissenyem una pàginaweb.</p><blockquote cite="http://www.w3.org/TR/html401/"><p>This document obsoletes previous versions of HTML 4.0, although W3C will continue to make those specifications and their DTDs available at the W3C Web site.</p></blockquote>
  3. 3. ELEMENTS EN LÍNIACITES CURTES<q lang=”indica l’idioma de la cita”><q cite=”indica la pàgina web de la cita> <p>Això no pot acabar bé, <q lang="fr">cest la vie</q> va dir el francès.</p>ÈMFASI<p><em>Paraula o frase a emfasitzar</em></p><p><em>Frase a emfasitzar<strong>Paraula encara mésemfasitzada</strong></em></p> <p><em>Please note:</em> the kettle is to be unplugged at night.</p> <p><em>Please note: the kettle <strong>must</strong> be unplugged every evening, otherwise it will explode - <strong>killing us all</strong></em>.</p>LLISTA NO ORDENADA - <ul> <li></li> <li></li> </ul> <ul> <li>pa</li> <li>cafè</li> <li>llet</li> <li>mantega</li> </ul>LLISTA ORDENADA - <ol> <li></li> <li></li> </ol> <ol> <li>Tingueu tots els ingredients a mà</li> <li>Mescleu tots els ingredients</li> <li>Poseu la mescla en una safata per al forn</li> </ol>LLISTA DE DEFINICIÓ - <dl> <dt></dt> <dd></dd> </dl> <dl> <dt>Terme</dt> <dd>Definició del terme</dd> <dt>Terme</dt> <dd>Definició del terme</dd> <dt>Terme</dt> <dd>Definició del terme</dd> </dl>SUBLLISTES O LLISTES IMBRICADES<ol> <li> <ol> <li></li> <li></li> </ol> </li></ol>
  4. 4. <ol> <li>Capítol 1</li> <li>Capítol 2 <ol> <li>Secció 2.1</li> <li>Secció 2.2</li> <li>Secció 2.3</li> </ol> </li> <li>Capítol 3</li> <li>Capítol 4</li> </ol>IMATGES<img src=”nom-de-la-imatge” alt=”descripció de la imatge”title=”Comentari quan passa el ratolí” width=”amplada de la imatge”height=”altura de la imatge”> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd"> <html> <head> <title>Exemple d’una inserció d’imatge</title> </head> <body> <img src="balconyview.jpg" alt=”Vista des del meu balcó” title=”Des del meu blacó puc admirar la torre del castell” width=”400” height=”186”> </body> </html>IMATGES DE FONS AMB CSSbackground-image:url(imatge.gif);background-repeat:no-repeat;background-repeat:repeat-x;background-repeat:repeat-y;background-color:#eee;background-position:top left;background-position:bottom left;background-position:center left;background-position:center center;background-position:center right;ENLLAÇOS HTMLÀNCORA<a title=”informació addicional del recurs”href=http://pagina.com>Enllaç a pàgina</a> <body> <h1>A link to the YDN</h1> <p><a title=”The Yahoo Developer Network is the best” href="http://developer.yahoo.com">Yahoo Developer Network</a></p> </body>Enllaçar seccions dins de la pàgina Enllaç de destinació <ul id=”llista”> Utilitzaríem <a href=”#llista”>Tornar a la llista</a>
  5. 5. TAULES <table></table><tr></tr> - Fila<th></th> - Encapçalaments per a les columnes de la taula<td></td> - Cel·la<caption></caption> - Títol visible de la taula<thead> </thead> - Títols de les columnes de la taula<tbody></tbody> - Cos de la taula<tfoot></tfoot> - Peu de la taulacolspan – Indica en nombre de columnes que ocuparà la filasummary – Títol per als lectors de pantalla. Constitueix el resum de la taulascope – Títol d’una columna o fila per als lectors de pantalla. Només s’utilitza dins del’element th <table summary="Una taula"> <caption>Una taula</caption> <thead> <tr> <th>títol columna 1</th> <th>tílol columna 2</th> <th>títol columna 3</th> </tr> </thead> <tfoot> <tr> <td colspan="3">El peu ocuparà les tres columnes</td> </tr> </tfoot> <tbody> <tr> <th scope="row">títol fila 1</th> <td>fila 1 columna 2</td> <td>fila 2 columna 3</td> </tr> <tr> <th scope="row">títol fila 2</th> <td>fila 2 columna 1</td> <td>fila 2 columna 2</td> </tr> </tbody> </table>FORMULARIS <form></form><label for=”nombre_id”></label> - Associa un text a un camp, mitjançant una id.<input> - Defineix la majoria d’elements del formulari<textarea> - Per a introduir més d’una línia de text. Han d’especificar les columnes iles files.cols – nombre de columnesrows – nombre de files<select></select> - Llista d’opcions en un menú desplegable. Només es pot escolliruna. Les opcions van etiquetades amb <option></option>
  6. 6. <label for”exemple”>aquí va el text</label> Type=”text” Introduir una línia de text Type=”password” Contrasenya Type=”checkbox” Casella de verificació. Varies opcions Type=”radio” Casella de verificació. Una opció Type=”submit” Botó acceptar. Value=”nom_del_botó”<input Type=”reset” Torna als valors per defecte.id=”exemple”...> Value=”nom_del_botó” Type=”button” Botó estàndard. Value=”nom_del_botó” Type=”imatge” Imatge com a botó. Necessita l’atribut src=”boto.jpg” Type=”file” Adjunta un arxiu al formulari<textarea Cols Especifica nombre de columnesid=”exemple”...> Rows Especifica nombre de files<select <option></option> Option va dintre de les etiquetes select. Hi haid=”exemple”> tantes option com opcions a escollir</select>

×