1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
---
language: html
filename: html-ca.md
contributors:
- ["Christophe THOMAS", "https://github.com/WinChris"]
translators:
- ["Marc Auledas", "https://github.com/Auledas"]
lang: ca-es
---
HTML significa llenguatge de marques d'hipertext (HyperText Markup Language).
És un llenguatge que permet escriure pàgines pel sistema web (World Wide Web).
És un llenguatge de marques que permet escriure pàgines web fent servir codi per indicar
com s'ha de visualitzar el text i les dades. De fet, els fitxers html són simples
fitxers de text.
Què són les 'marques'? Són un mètode d'organitzar les dades d'una pàgina mitjançant
etiquetes d'obertura i tancament. Aquestes marques serveixen per donar
significat al text que hi ha entre les etiquetes. Com d'altres llenguatges de marques,
hi ha moltes versions de l'HTML. Aquí es desenvoluparà l'HTML5.
**NOTA:** Pots provar les diferents etiquetes i elements a mesura que progressis a través
del tutorial a pàgines web com [codepen](http://codepen.io/pen/). D'aquesta manera podràs
veure'n els efectes, entendre com funcionen i familiaritzar-te amb el llenguatge. Aquest
article tracta principalment la sintaxi de l'HTML i alguns consells útils.
```html
<!-- Els comentaris s'escriuen com aquesta línia! -->
<!--
Els comentaris
poden
ocupar
múltiples
línies!
-->
<!-- #################### Les etiquetes #################### -->
<!-- Aquí hi ha un exemple de fitxer HTML que analitzarem. -->
<!doctype html>
<html>
<head>
<title>El meu lloc web</title>
</head>
<body>
<h1>Hola, món!</h1>
<a href="http://codepen.io/anon/pen/xwjLbZ">
Fes una ullada a com es veu això.
</a>
<p>Això és un paràgraf.</p>
<p>Això és un altre paràgraf.</p>
<ul>
<li>Això és un element d'una llista no enumerada (llista de punts).</li>
<li>Això és un altre element.</li>
<li>I aquest és l'últim element de la llista.</li>
</ul>
</body>
</html>
<!--
Un fitxer HTML sempre comença indicant al navegador que la pàgina és HTML.
-->
<!doctype html>
<!-- Després d'això, es comença obrint l'etiqueta <html>. -->
<html>
<!-- Aquesta etiqueta s'ha de tancar al final del fitxer amb </html>. -->
</html>
<!-- No s'ha d'escriure res més després d'aquesta etiqueta final. -->
<!-- Entremig (entre les etiquetes d'obertura i tancament <html></html>), trobem: -->
<!-- Una capçalera definida per <head> (que s'ha de tancar emprant </head>). -->
<!--
La capçalera conté descripcions i informació addicional que no es mostra,
això són les metadades.
-->
<head>
<!--
L'etiqueta <title> indica al navegador el títol que s'ha de visualitzar
a la finestra del buscador, a la barra del títol, i al nom de la pestanya.
-->
<title>El meu lloc web</title>
</head>
<!-- Després de la secció <head>, trobem l'etiqueta <body> -->
<!-- Fins a aquest punt, res del que s'ha fet apareixerà a la finestra del navegador. -->
<!-- Hem d'emplenar el cos amb el contingut per visualitzar. -->
<body>
<!-- L'etiqueta h1 crea el títol. -->
<h1>Hola, món!</h1>
<!--
També es poden fer subtítols per <h1>, que van des del més important <h2>
fins al més precís <h6>.
-->
<!-- També es poden crear enllaços fent servir l'atribut href="" -->
<a href="http://codepen.io/anon/pen/xwjLbZ">
Fes una ullada a com es veu això.
</a>
<!-- L'etiqueta <p> permet incloure text a una pàgina HTML. -->
<p>Això és un paràgraf.</p>
<p>Això és un altre paràgraf.</p>
<!-- L'etiqueta <ul> crea una llista de punts. -->
<!--
Per tenir una llista enumerada s'hauria de fer servir <ol>, en comptes d'<ul>.
El primer element seria 1, el segon element 2, etc.
-->
<ul>
<li>Això és un element d'una llista no enumerada (llista de punts).</li>
<li>Això és un altre element.</li>
<li>I aquest és l'últim element de la llista.</li>
</ul>
</body>
<!-- I això és tot, crear un fitxer HTML pot ser molt simple. -->
<!-- Però és possible afegir molts altres tipus d'etiquetes HTML addicionals. -->
<!-- L'etiqueta <img /> es fa servir per afegir imatges. -->
<!--
L'origen de la imatge s'indica fent servir l'atribut src=""
L'origen pot ser una adreça URL o la ruta a un arxiu del teu ordinador.
-->
<img src="http://i.imgur.com/XWG0O.gif"/>
<!-- També es poden crear taules. -->
<!-- L'etiqueta <table> obre la taula. -->
<table>
<!-- <tr> permet crear files. -->
<tr>
<!-- <th> permet posar títol a la columna d'una taula. -->
<th>Primera capçalera</th>
<th>Segona capçalera</th>
</tr>
<tr>
<!-- <td> permet crear cel·les d'una taula. -->
<td>Primera fila, primera columna</td>
<td>Primera fila, segona columna</td>
</tr>
<tr>
<td>Segona fila, primera columna</td>
<td>Segona fila, segona columna</td>
</tr>
</table>
```
## Ús
Els arxius HTML acaben amb les extensions `.html` o `.htm`. El tipus MIME és `text/html`.
**HTML NO és un llenguatge de programació**
## Per aprendre'n més
* [Viquipèdia](https://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language)
* [Tutorial HTML](https://developer.mozilla.org/ca/docs/Web/HTML)
* [W3School](http://www.w3schools.com/html/html_intro.asp)
|
