2. INTRODUCCIÓ
● HyperText Markup Language
● Llenguatge d'etiquetes que descriu l'estructura i
informació que tindrà una pàgina web.
● Les etiquetes van entre símbols < >
● Per afegir funcionalitat, es poden incloure scripts
(per al curs vinent)
● Referències: http://librosweb.es/xhtml/
3. INTRODUCCIÓ
● Tipus de pàgines web:
● Estàtiques: html i css
● Dinàmiques: html, css, php, javascript,
ajax, xml...
● Versions d'html:
● Apareix html en 1991 fins la versió 4 en
1997.
● Es crea després xhtml → molt reestrictiu
● En 2007 comença a treballar-se amb html
5 → noves etiquetes, atributs, millor suport
de so, vídeo, gràfics...
4. INTRODUCCIÓ
● Una pàgina web és un document de text escrit
amb html.
● El navegador l'interpreta i ens mostra les imatges
i la informació estructurada.
● Activitat: Per començar a crear una web, crea un
document buit amb extensió .html
● Si fas doble clic en ell, el navegador l'obrirà i
apareixerà en blanc.
5. INTRODUCCIÓ
● Inconvenient: és un llenguatge nou, no tots els
navegadors el suporten completament, això vol
dir que ens podrem trobar en ocasions que les
etiquetes no siguen executades de forma correcta.
7. ETIQUETES HTML
● Sintaxi bàsica d'una web:
<html> etiqueta per obrir un full html
<head> obrim el head, anirem veient-lo poc
a poc
elements del head
</head> tanquem el head
<body> ací va tota l'estructura de la nostra
web
elements del body
</body> tanquem el body
</html> etiqueta per tancar un full html
● (Quasi)Totes les etiquetes han de ser tancades.
● No es distingeix entre majúscules i minúscules.
8. ETIQUETES HTML
● Declaració doctype: indica al navegador que ha
de interpretar tot el codi que el segueix d'acord a
unes línies específiques:
abans:
ara:
● S'inclourà abans de l'etiqueta <html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN”
"http://www.w3.org/TR/html4/strict.dtd">
<!doctype html>
9. ETIQUETES HTML
● Etiquetes de head:
● <title>títol</title>: és el títol que apareixerà
en la pestanya del navegador.
● Etiquetes de body:
● <h1>text</h1>: fica en un estil determinat
el text que va entre les etiquetes. Tenim h1,
h2, h3, h4, h5 i h6.
10. ETIQUETES HTML
● Aqua #00FFFF
● Black #000000
● Blue #0000FF
● Fuchsia #FF00FF
● Gray #808080
● Green #008000
● Lime #00FF00
● Brown #800000
● Navy #000080
● Olive #808000
● Purple #800080
● Red #FF0000
● Silver #C0C0C0
● Teal #008080
● White #FFFFFF
● Yellow #FFFF00
11. ETIQUETES HTML
● Opcions de body: <body background=" Arxiu per
al fons" bgcolor="Color de fons">
● Activitat: crea una web amb l'estructura bàsica,
fica-li de títol ''primera web'' i prova amb el text
''enunciat amb estil'', les etiquetes h1, h2, h3, h4,
h5 i h6. Escriu després dins del body i sense
etiquetes ''Text sense cap estil''. Canvia el color
de fons de la web.
12. ETIQUETES HTML
● Totes les etiquetes que veurem a continuació
seran per a ficar entre les etiquetes
<body></body>
<p>paràgraf</p> per escriure un paràgraf, es fica
un salt abans i després del paràgraf. Ací podem
utilitzar també <em><blockquote> i <strong>
● Ficar una imatge:
<img src=“ruta de la imatge“></img>
<img src=“ruta de la imatge“ />
13. ETIQUETES HTML
● Dins les etiquetes podem ficar atributs que
modificaran el seu estil. Són acceptats per
diverses etiquetes. Per exemple:
● <img id=“imatge1“ src=“imatge.jpeg“
width=“200“ height=“300“ border=“1“
align=“left/right/bottom/top/middle“ />
● L'atribut id=“nom“ serveix per a totes les
etiquetes, no és necessari però si convenient.
● Els estils sempre aniran a un fitxer css, mai en
el html.
14. ETIQUETES HTML
● Exemple: <p id=“paragraf1“
align=“left/right/center/justify“>Text del primer
paràgraf</p>
● Activitat: insereix una imatge dins d'un paràgraf i
observa com canvia la seua posició segons
l'atribut align.
15. ETIQUETES HTML
● Salt de línia: <br/>
● Línia horitzontal: <hr>
● Requadre: <fieldset> i <legend>
● Caràcters especials:
&_acute (á),&_agrave (à),ñ (ñ),ü (ü),
ç (ç)
● Incloure la codificació de caràcters:
<meta charset=“utf-8“>
17. ETIQUETES HTML
● Llistes: podem crear llistes amb pics i
numeracions:<ul><ol><li>
● Llistes de definicions: <dl><dt><dd>
18. ETIQUETES HTML
● Enllaços: serveixen per crear link a altres pàgines
web o diferents part d'una mateixa pàgina.
<a href=“http://www.google.es“> Buscador </a>
<a href=“contacte.html“>Contacte</a>
<a name=“inici“></a>
<a href=“#inici“>A l'inici de la pàgina</a>
19. ETIQUETES HTML
● Activitat: prova els diferents tipus de links. Per a
fer-ho hauràs de crear també un altra pàgina html.
Esbrina com fer que una imatge siga un link a un
altre lloc.
20. ETIQUETES HTML
● Taules: podem crear taules de la mida que ens interesse.
Les taules es crearan fila a fila.
<table>
<tr><td>cel·la1</td><td>cel·la2</td></tr>
<tr><td>cel·la3</td><td>cel·la4</td></tr>
</table>
Hem creat una taula de dos files (<tr>) i dos columnes
(<td>)
● En la primera fila es pot utilitzar l'etiqueta <th>. Així
aconseguirem remarcar el títol de cada columna.
24. ETIQUETES HTML
● Activitat: Crea la següent taula:
Pots utilitzar l'etiqueta <b></b> per ficar el
negreta el text. De fons pots ficar una imatge
qualsevol o un color que vulgues.
26. ETIQUETES HTML
● <div> Etiqueta per a formar una capa o bloc de
contingut, contindrà altres etiquetes.
● Serveixen per ordenar el contingut d'una web.
● <div id="capa" style="position:absolute; top:30%;
left:40%; width:200px; height:115px; z-index:3;
visibility: visible; background-color: #0099CC;
background-image: url(imagenes/fondocapa.gif); ">Este
text està dins d'una capa. </div>
27. ETIQUETES HTML
● Etiqueta <span>: similar a <div>, però utilitzada
en paràgrafs.
● Activitat: creeu 3 capes de colors, mides i posició
diferent. Dins podeu insertar qualsevol de les
etiquetes que hem vist fins ara.
28. CSS
● Com hem dit anteriorment, tots els estils hauran
d'anar a un full d'estils css.
● Açò facilitarà el manteniment de les webs i
mantindrem separada l'estructura de la web dels
seus estils.
● Ara farem un parèntesi en l'aprenentatge de les
etiquetes per aprendre css.
29. Àudio i video
● El vídeo en html5 està destinat a substituir el flash.
<video src=“video.ogg“ autoplay />
<video>
<source src="mipelicula.mp4" type="video/mp4" />
<source src="mipelicula.webm" type="video/webm" />
<source src="mipelicula.ogg" type="video/ogg" />
</video>
● Amb l'etiqueta source permetem al navegador agafar el
primer format amb el que siga compatible.
30. Àudio i video
● Width i height: per indicar la mida del rectangle
on es veurà el vídeo.
● Autoplay: li indica al navegador que engegue el
vídeo només estiga carregat.
● Loop: repetir la reproducció
● Controls: mostra els controls de pause, play i
stop.
● Preload: carrega el vídeo al carregar la pàgina
32. Àudio i vídeo
● <audio src=“musica.mp3“ autoplay />
● <audio autoplay controls loop preload>
<source src=“arxiu.ogg“ type=“audio/ogg“ />
<source src=“arxiu.mp3“ type=“audio/mp3“/>
<source src=“arxiu.wav“ type=“audio/wav“/>
</audio>
● Com en el cas del vídeo, podem especificar
diversos formats per a que agafe el que vulga.
33. Àudio i video
● Activitat: descarregueu-se un video de menys d'1
minut i inseriu-lo en la vostra web amb 3 mides
diferents.
● Activitat: inseriu una cançó i feu que es
reproduisca només entrar a la pàgina.
34. Formularis
● Els formularis serveixen per entrar informació a
una pàgina web per a que aquesta puga ser
tractada.
● L'aspecte del formulari es treballarà amb html i el
tractament es farà amb javascript o php, açò últim
ja queda lluny de l'abast d'aquest curs.
35. Formularis
● Elements:
● Etiquetes: per ficar noms
● Caixes d'entrada: per introduir informació.
● Botons: acceptar, enviar, netejar...
● Menús desplegables: despleguen diverses
opcions
● Àrees de text: per introduir més informació
● Checkbox: quadrats marcables, opcions
● Radiobutton: cercles marcables, opcions
41. Formularis
● Etiquetes: estructuren millor la informació
<label for="nom">nom:</label><br>
<input type="text" id="nom" name="nom">
● Podem agrupar els camps utilitzant legend i
fieldset:
<fieldset>
<legend> Nom del requadre </legend>
Elements del formulari
</fieldset>
42. Formularis amb CSS
● Podem tocar opcions com:
● Padding, width, height, padding,
background, margin
● box-shadow: 0px 5px 10px #B5C1C5, 0 0 0
10px #EEF5F7 inset; //dona una hombra
● Quasi sempre s'utiltzen imatges de fons en
fieldset i es toquen les característiques
dels elements input.
44. Marcs de pàgina
● S'utilitzaven per a dissenyar l'estructura de les
pàgines. Encara continuen utilitzant-se encara
que el seu ús no és recomanable. Actualment és
millor utilitzar div, però cal programació
dinàmica.
● Utilitzant marcs busquem dividir les pàgines web
en diverses seccions i evitar repetir codi (menú,
encapçalament, peu de pàgina...) que sempre es
mostra igual. Podríem repetir-lo i tot
funcionaria igual.
45. Marcs de pàgina
● Abans s'utilitzava l'etiqueta <frame> (no la
utilitzeu), ara <iframe> i <object>.
● Depenet del navegador podrem tindre un resultat
o un altre.
● Solució perfecta: utilitzar les noves etiquetes de
html5 en compte de divs: <header>, <nav>,
<article>, <aside>, <footer>, <section>
46. Marcs de pàgina
● Ús de <iframe>:
< iframe width="400" height="400"
scrolling="no" frameborder="0"
src="http://www.lapaginaweb.loquesea">
< /iframe>
● Ús de <object>:
< object type="text/html"
data="http://www.lapaginaweb.loquesea"
width="400" height="400"> < /object>
● És més recomanable l'ús de object.
47. Marcs de pàgina
● Hem de donar un nom a cada marc. D'aquesta
manera podem obrir pàgines utilitzant l'atribut
target dels enllaços i el nom dels marcs:
en index.html -> <iframe/object ............
name="contingut">
en menu.html -> <a href="noticies.html"
target="contingut"> Noticies </a>
<a href="contacte.html" target="contingut">
Contacte </a>
48. Marcs de pàgina
● Activitat: creeu una estructura de pàgina amb
encapçalament, menú i contingut. Açò ho fareu
utilitzant tres vegades l'etiqueta iframe o object.
● En l'encapçalament ficareu la pàgina
titol.html (l'heu de crear) amb el títol “Primera
Web“.
● En el marc del menú carregareu la pàgina
menu.html (l'heu de crear) i en ella creareu
dos enllaços, un a principal.html i l'altre a
secundari.html (també els heu de crear). En
cadascun d'ells ficareu una imatge i els obrireu
en el marc de contingut.
49. Empotrar codi
● Les nostres web poden contenir videos d'altres
pàgines, podcast o qualsevol altre element. Sols
hem de copiar el codi html que ens ofereixen i
enganxar-lo a la nostra web. Normalment
s'inclouen utilitzant iframe.
<iframe width="560" height="315"
src="http://www.youtube.com/embed/B-
mTR2sq6aI" frameborder="0"
allowfullscreen></iframe>
