1. L’HTML és un llenguatge per descriure pàgines web.
HTML significa ”Hyper Text Markup Language”.
No és un llenguatge de programació, és un llenguatge de
marques.
“Markup Tags” Les anomenem etiquetes HTML
Les etiquetes html són paraules clau envoltades per
parèntesis angulars, com per exemple : <html>
Normalment van en parelles : <html> </html>
Les anomenarem etiqueta d’inici ( o d’obertura ) i etiqueta
de tancament ( o fi ).
2. ● Contenen etiquetes html i text, i estan
formats bàsicament per dues parts :
● Capçalera
●<head> … </head>
Conté informació del document : títol, tipus de document, llenguatge en que
està escrit, quines són les paraules clau, una breu descripció, …
● Cos
● <body> … </body>
Conté tot allò que es vol mostrar a la pàgina web: textos, imatges, gràfics,
formularis, ...
4. Elements HTML
Capçaleres HTML :
Estan definides mitjançant les etiquetes següents :
de <h1> fins <h6>
Sintaxi : <h1>Això és una capçalera</h1>
Paràgrafs HTML :
Estan definits mitjançant les etiquetes : <p> </p>
Sintaxi : <p>Això és un paràgraf</p>
5. Elements HTML
Enllaços HTML :
Estan definits dins les etiquetes <a> </a>
amb l’atribut href
Sintaxi :
<a href=http://www.google.com> Això és un enllaç</a>
Imatges HTML :
Es defineixen amb l’etiqueta <img> i l’atribut src
Sintaxi : <img src=“imatge.jpg" width="104" height="142" />
6. Atributs HTML:
Els atributs s’especifiquen sempre dins l’etiqueta d’inici.
Es defineixen amb el nom i el valor exemple:
nom="valor“
Els noms dels atributs i dels seus valors no són sensibles
a les majúscules.
Línies HTML :
L’etiqueta <hr /> crea una línia horitzontal a la pàgina
HTML.
Sintaxi : <p>Això és un paràgraf</p>
<hr/>
<p>Això és un altre paràgraf</p>
7. Comentaris HTML :
Els comentari són ignorats pel navegador i no es mostren.
Sintaxi : <!– Això és un comentari -->
Salts de línia HTML :
Utilitza l’etiqueta <br /> si vols fer un salt de línia sense
començar un nou paràgraf.
Sintaxi : <p>Això és <br/> un paràgraf <br/> amb
salts de línia </p>
8. Etiquetes de format i atributs d’estil HTML :
Etiquetes de format de text
Etiqueta Descripció
<b> Text en negreta
<i> Text en cursiva
<sub> Text inferior (subíndex)
<sup> Text superior (superíndex)
<ins> Text subratllat
<del> Text ratllat
<center> Contingut centrat
<s> i <strike> text ratllat
<u> Text subratllat
<font> Defineix fonts html
Atributs Descripció
align Defineix l’alineació del text
bgcolor Defineix el color de fons
color Defineix el color del text
12. HTML Hyperlinks (Links):
Un hyperlink (o link) és una paraula, grup de paraules o imatge on pots
clicar per saltar a un nou document o una secció d’un mateix
document.
Els links (enllaços) en HTML s’especifiquen utilitzant l’etiqueta <a>
utilitzant l’atribut href
<a href="url">Link text</a>
<a href=http://www.google.com/> web de Google</a>
13. Taules HTML :
o Les taules es defineixen amb l’etiqueta <table>
o Es divideix en files amb l’etiqueta <tr>
o Cada fila es divideix en cel·les amb l’etiqueta <td>
o Les capçaleres de les taules es defineixen amb l’etiqueta <th>
EXEMPLE :
<table border=“1”>
<tr> <td> fila 1 cel·la 1 </td> <td> fila 1 cel·la2 </td> </tr>
<tr> <td> fila 2 cel·la 1 </td> <td> fila 2 cel·la2 </td> </tr>
</table>
fila 1 cel·la 1 fila 1 cel·la 2
fila 2 cel·la 1 fila 2 cel·la 2
14. Taules HTML :
Etiqueta Descripció
<table> Defineix una taula
<th> Defineix la capçalera d’una taula
<tr> Defineix les files
<td> Defineix una cel·la
<caption> Defineix un títol de taula
<colgroup> Defineix un grup de columnes
<col> Defineix valors d’un atribut per una o
+ columnes
<thead> Grup de capçaleres de taula
<tbody> Grup de cos de taula
<tfoot> Grup de peu de pàgina de taules
15. Llistes HTML :
o Amb html es poden fer llistes ( ordenades o no )
o Una llista ordenada es defineix amb l’etiqueta <ol>
o I una llista no ordenada amb l’etiqueta <ul>
o La diferència és que una està numerada i l’altre no ( marques )
o Cada element de la llista es marca amb l’etiqueta <li>
EXEMPLE
<ol> Resultat :
<li> primer </li>
<li> segon </li> 1. primer
</ol> 2. segon
16. Formes HTML :
o Les formes s’utilitzen per diferents tipus d’entrada de text
o S’utilitzen per entrar tot tipus de dades com per exemple :
o text
o menús desplegables
o caselles de verificació
o botons ( tipus radio )
EXEMPLE
<form>
Nom:
<input type=“text” name=“nom” /> Nom:
<br/>
Cognom: Cognom:
<input type=“text” name=“cognom” />
</form>
17. Formes HTML :
EXEMPLE [ botons radio ]
<form>
<input type=“radio” name=“opció” value=“si” /> SI <br/>
<input type=“radio” name=“opció” value=“no” /> NO
</form>
SI
NO
18. Formes HTML :
EXEMPLE [ comprovació (checkboxes) ]
<form>
Cotxe: <input type=“checkbox” name=“vehicle” value=“cotxe” />
<br/>
Moto: <input type=“checkbox” name=“vehicle” value=“moto” />
</form>
Cotxe:
Moto:
20. Fulls d’estil CSS:
La majoria de programes permeten treballar amb fulls
d’estil en cascada ( Cascading Style Sheets )
Un full d’estil és un conjunt de regles que permeten
assignar un format determinat als documents HTML
Es poden incloure dins els document html, o ser un fitxer
independent que es vincula a la pàgina web.
Informa al navegador de la manera que ha de presentar
el contingut de la pàgina web.
21. Publicació de pàgines WEB :
El procés de publicació és necessari quan no es disposa
d’un servidor web propi : amb adreça IP i programa
servidor de fitxers HTML
S’ha de contractar el servei d’un proveïdor d’allotjament
web. ( Gratuït amb publicitat )
Un cop contractat disposes d’un espai on pots accedir
mitjançant programes FTP ( file transfer protocol )
