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

1,007 views
969 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,007
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
70
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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>

×