Jaume at 08:00, 22 February 2024

2024-02-22T08:00:55Z

Jaume: Protected "HTML" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))

2024-02-22T07:59:26Z

Protected "HTML" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))

81.33.29.20 at 19:01, 20 February 2024

2024-02-20T19:01:09Z

81.33.29.20 at 19:00, 20 February 2024

2024-02-20T19:00:54Z

81.33.29.20: /* Estructura d'un document HTML (pa que te enteres) */

2024-02-20T18:36:54Z

‎Estructura d'un document HTML (pa que te enteres)

81.33.29.20: /* Estructura d'un document HTML */

2024-02-20T18:36:13Z

‎Estructura d'un document HTML

Jaume: Created page with "== Introducció == Un document (pàgina) de Web pot incloure diferents tipus d'informació: text,imatges i enllaços hipertextuals.
Aquests enllaços poden activar la re..."

2022-04-19T15:48:35Z

Created page with "== Introducció == Un document (pàgina) de Web pot incloure diferents tipus d'informació: text,imatges i enllaços hipertextuals.<br /> Aquests enllaços poden activar la re..."

New page

== Introducció ==
Un document (pàgina) de Web pot incloure diferents tipus d'informació: text,imatges i enllaços hipertextuals.<br />
Aquests enllaços poden activar la recuperació d'una altra pàgina o la recepció d'un fitxer: una imatge, un programa, una animació...<br />
Per a la creació d'aquestes pàgines s'utilitza el llenguatge HTML, que permet definir els atributs del text, la posició de les imatges i els enllaços mitjançant unes marques que s'insereixen en el document.
Estructura d'un document HTML
Les marques que s'utilitzen en el llenguatge HTML són textos tancats entre els signes < >.<br />
Generalment, funcionen per parelles, l'una en començar i l'altra al final. Normalment, la marca de tancar és la mateixa que la d'obrir amb el caràcter / al davant.
Per identificar un document cal inserir la marca <HTML> al començament i </HTML> al final.

== Estructura d'un document HTML ==

Tot document HTML consta de dues parts:

La capçalera conté informació sobre el propi document. Entre les marques <HEAD> i </HEAD>.

Dins de la capçalera es posa el títol del document, entre les marques <TITLE> i </TITLE>. És el text que es pot llegir a la barra de títol del navegador.
El cos conté el text i les imatges visibles del document. Entre les marques <BODY> i </BODY>.

Exemple
<source language="html">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</source>

== Etiquetes d'un document HTML ==

=== Encapçalaments ===

Títols HTML es defineixen amb les etiquetes <nowiki><h1></nowiki> a <nowiki><h6></nowiki>.Etiquetes d'un document HTML

=== Paràgrafs. ===

Paràgrafs HTML es defineixen amb l'etiqueta <nowiki><p></nowiki>.
<source language="html">
<p>Benvinguts a M4</p>
</source>
Els navegadors afegeixen automàticament una línia en blanc abans i després d'un paràgraf.
El navegador traurà espais addicionals i línies addicionals quan es mostra la pàgina.
Qualsevol nombre d'espais, i qualsevol nombre de línies noves, compten com un sol espai.Etiquetes d'un document HTML

=== Enllaços ===

Enllaços HTML es defineixen amb l'etiqueta <a>.

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
– L'atribut href especifica la destinació de l'enllaç.
– L'atribut target especifica on obrir el document vinculat.
– Aquest exemple s'obrirà el document vinculat a una nova
finestra o en una nova pestanya.
*_blank Obre en una nova finestra o pestanya
*_self
*_parent
*_top
*(default) en la mateixa finestra o frame

En el frame pare.
Obre al cos complert de la finestra
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_target_top

=== Imatges ===
Les imatges HTML es defineixen amb l'etiqueta <img>.
<img src="url" alt="some_text">
*src és el fitxer d'origen, alt és el text alternatiu.
*L'etiqueta <img> està buida, conté atributs només, i no té una etiqueta de tancament.
*L'atribut alt especifica un text alternatiu que s'utilitzarà, quan un element HTML no es pot visualitzar.
*El valor de l'atribut pot ser llegida pels lectors de pantalla "".
D'aquesta manera, algú "escoltar" a la pàgina web, és a dir, una persona cega, pot "sentir" l'element.
*Si un navegador no pot trobar una imatge, es mostrarà el text alternatiu:
*Es requereix que l'atribut alt. Una pàgina web que no valida correctament sense.Etiquetes d'un document HTML
Imatges.
<source language="html"><img src="html5.gif" alt="HTML5 Icon" width="128" height="128"></source>
*La mida width and height donen la grandaria.
*La mida de la imatge s'especifica en píxels: width = "104" significa 104 píxels de pantalla ampla.
<source language="html"><img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;border:0;"></source>
*Podeu utilitzar l'atribut style per especificar l'amplada i alçada d'una imatge.
*Els valors s'especifiquen en píxels (fes servir px després del valor).
*Afegir "border: 0;" per evitar que IE9 (i anteriors) mostri una vora al voltant de la imatge.Etiquetes d'un document HTML

Les imatges poden estar al nostre directori de feina, o en un directori diferent.

Si l'imatge es troba l'imatge en un subdirectori del nostre directori:
<source language="html"><img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"></source>
Si es troben en altre ordinador o servidor:
<source language="html"><img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"></source>
Podeu inserir imatges animades, amb la mateixa estructura.

=== Taules ===
Les taules es defineixen amb l'etiqueta <nowiki><table></nowiki>.
Les taules es divideixen en files de la taula amb l'etiqueta <nowiki><tr></nowiki>.
Les files es divideixen en columnes que contenen les dades de la taula amb l'etiqueta <nowiki><td></nowiki>.
Una fila de la taula també pot dividir-se en capçaleres de la taula amb el <nowiki><th></nowiki> etiqueta.
Els <nowiki><td></nowiki> poden contenir tot tipus d'elements HTML com a text,imatges, llistes, altres taules, etc.
Si no especifica una vora de la taula, es mostrarà sense vores.
Una vora es pot afegir mitjançant l'atribut border, però és millor utilitzar un full d'estil.Etiquetes d'un document HTML
<source language="html">
<table border="1">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</source>
Per defecte, tots els navegadors visualitzen la fila <nowiki><th></nowiki> en negreta i centrada.
Per afegir un títol a una taula, utilitzeu l'etiqueta <nowiki><caption></nowiki>.

==== Colapsar cel·les ====
Per a colapsar més d'una columna, utilitzeu l'atribut colspan.
<source language="html">
<table>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</source>

Per a colapsar més d'una filera,
utilitzeu l'atribut rowspan.
<source language="html">
<table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</tr>
</table>
</source>

=== Llistes ===

==== Llistes no ordenades ====
Una llista desordenada comença amb l'etiqueta <nowiki><ul></nowiki>. Cada element de la llista comença amb l'etiqueta <nowiki><li></nowiki>.
Els elements de la llista es marcaran amb bales (petits cercles negres).

==== Llistes ordenades ====
Una llista ordenada comença amb l'etiqueta <nowiki><ol></nowiki>. Cada element de la llista comença amb l'etiqueta <nowiki><li></nowiki>.
Els elements de la llista seran marcats amb els números.
==== Llistes amb descripció ====
Una llista de descripció és una llista de termes, amb una descripció de cada terme.
L'etiqueta <nowiki><dl></nowiki> defineix la llista de vista general, l'etiqueta <nowiki><dt></nowiki> defineix el terme (nom), i <nowiki><dd></nowiki> etiqueta descriu cada terme

Llistes no ordenades.
<source language="html">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</source>
Llistes ordenades.
<source language="html">
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</source>
Llistes amb descripció.
<source language="html">
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl >
</source>

@@ Line 8: / Line 8: @@
 Per identificar un document cal inserir la marca <HTML> al començament i </HTML> al final.
-== Estructura d'un document HTML (pa que te enteres)==
+== Estructura d'un document HTML==
 Tot document HTML consta de dues parts:

← Older revision	Revision as of 07:59, 22 February 2024
(No difference)

@@ Line 1: / Line 1: @@
-== Introducció salvi eres medio tonto ==
+== Introducció ==
 Un document (pàgina) de Web pot incloure diferents tipus d'informació: text,imatges i enllaços hipertextuals.<br />
 Aquests enllaços poden activar la recuperació d'una altra pàgina o la recepció d'un fitxer: una imatge, un programa, una animació...<br />

HTML - Revision history