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

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>

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

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>
<dt>Terme</dt>
</dl>

SUBLLISTES O LLISTES IMBRICADES
<ol>
<li>
<ol>
<li></li>
<li></li>
</ol>
</li>
</ol>

<ol>
<li>Capítol 1</li>
<li>Capítol 2
<ol>
<li>Secció 2.1</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>

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>
</tr>
<tr>
<th scope="row">títol fila 2</th>
</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>

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

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

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

More from Paquita Ribas

More from Paquita Ribas (20)

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