1. ETIQUETES HTML
DOCTYPE
"-//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 doctype
Si 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. <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= projection
CSS <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 BLOC
TÍ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àgina
web.
</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. ELEMENTS EN LÍNIA
CITES 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">c'est 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és
emfasitzada</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. <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 CSS
background-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. 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 taula
colspan – Indica en nombre de columnes que ocuparà la fila
summary – Títol per als lectors de pantalla. Constitueix el resum de la taula
scope – Títol d’una columna o fila per als lectors de pantalla. Només s’utilitza dins de
l’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 i
les files.
cols – nombre de columnes
rows – nombre de files
<select></select> - Llista d’opcions en un menú desplegable. Només es pot escollir
una. Les opcions van etiquetades amb <option></option>
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 columnes
id=”exemple”...> Rows Especifica nombre de files
<select <option></option> Option va dintre de les etiquetes select. Hi ha
id=”exemple”> tantes option com opcions a escollir
</select>