HTML bàsic (SMX - M8 - UF5 - NF1)

APLICACIONS WEB
(M8 -UF5)
SMX 2A
IES Salvador Espriu - Salt
NF1: HTML
Mariona Batalla Taylor
mbatal11@xtec.cat

NA1: TAGS BÀSICS I ESTRUCTURA

Mariona Batalla Taylor - mbatal11@xtec.cat M8- UF5 - NF1:HTML (SMX)
Què és HTML?
Hiper Text Markup Language
● Defineix l’estructura d’una pàgina web
● Descriu els elements que formen la pàgina
● HIPER TEXT: Permet enllaçar amb altres documents
● MARKUP: Es basa en marques, que anomenem etiquetes o TAGS
No és un llenguatge de programació.
La seva sintaxi és molt senzilla, el vocabulari limitat i tots els navegadors l'interpreten correctament.

<tag>
obrir tancar

PROVEM! Mirem l’estructura d’una pàgina web.
● Aneu a qualsevol pàgina web.
● Feu clic amb el botó dret i seleccioneu “veure codi font”
● Veureu quelcom com això:
...i continua (és molt més llarg)

PROVEM! Mirem l’estructura d’una pàgina web.
● <html>(...contingut)</html>
● <head>(...contingut)</head>
● <body>(...contingut)</body>
Exploreu i cerqueu aquests elements:

Estructura d’un document HTML

Estructura d’un document HTML
li diem al navegador
la versió d’HTML que
utilitzarem
element arrel d’un
document HTML.
capçalera d’un document
HTML: dades sobre l’HTML
la part visible del
document HTML

Visual Studio Code:
editor de codi que
utilitzarem a classe.

PLANTILLA base.html
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Títol</title>
</head>
<body>
</body>
</html>
Treballarem sobre
aquesta plantilla
base, la podeu trobar
al moodle, seguint
aquest enllaç.
tipus de document
obrim el document
html iestablim
l’idioma
obrim capçalera
tanquem capçalera
definim la
codificació de
caràcters
més info sobre la
codificació de
caràcters
títol del document
obrim el body
tanquem el body
tanquem el
document html

<tag></tag>
obrir tag tancar tag
generalment:

<tag>
obrir tag no hi ha tancament
hi ha casos:
<hr>
<br>
<img>
<meta>
...entre altres

<tag atribut=”valor”>
<html lang=”ca”>
<meta charset=”utf-8”>
<img src=”logo.png”>
TAGS AMB ATRIBUTS
exemples:
proporcionen informació addicional sobre el TAG.

VALIDADOR D’HTML
Un dels validadors més importants per HTML és el validador
de W3C: https://validator.w3.org
exemple HTML correcte:
exemple HTML incorrecte:

CAPÇALERA D’UN HTML
<head>
Contingut que no es mostrarà,
conté informació sobre la pàgina.
Pot tenir diversos tags a dins:
més info
<title>
<base>
<link>
<style>
<script>
<meta>
s’obre i es tanca!
no té TAG de tancament
<head></head>
s’obre i es tanca
s’obre i es tanca
s’obre i es tanca
<title></title>
<style></style>
<script></script>

més ino
<title>
<base>
el títol de la web. Es mostra a la barra de títol del navegador.
<link>
<style>
<script>
<meta>
l’estil que tindrà la web. Ho veurem més endavant.
enllaça un document amb un altre recurs. Ho veurem més endavant.
metadades sobre el document HTML.
codi en JavaScript. Ho veurem més endavant.
estableix una URL base per totes les URL relatives.
<head>
</head>
exemple codi HTML:
<tag atribut=”valor”>

<p> un paràgraf de text
PARÀGRAFS
S’afegeix automàticament un salt de línia
abans del paràgraf i un altre salt després.
codi HTML:
com es veu al navegador:
s’obre i es tanca!!!

<h1>
<h1> <h2> <h3> <h4> <h5> <h6>
n’hi ha 6 de possibles:
HEADINGS
segueixen una jerarquia!!!
codi HTML
com es veu al
navegador:
<h1></h1>
s’obren i es tanquen!

<br>
BREAK LINE
insereix un salt de línia
(“punt i a part”)
més info
codi HTML com es veu al navegador:

<hr>
Divisor horitzontal
insereix una línia horitzontal
d’amplada màxima.
codi HTML

<ol>
LLISTES
ORDENADES DESORDENADES
<ul>
ordered list unordered list
<li>item</li>
<ol></ol>
<ul></ul>
s’obren i es tanquen!

<sub></sub>
SUPERÍNDEX I SUBÍNDEX
<sup></sup>
32
H O2
3<sup>2</sup> H<sub>2</sub>O

CARÀCTERS ESPECIALS
Hi ha caràcters especials que amb HTML s’escriuen amb aquesta notació:
&(nomsímbol);
amb anglès es diuen HMTL entities
llistat de caràcters
especials d’HTML
(de cheatography)
codi HTML:

NESTING TAGS
S’ha de tancar un TAG interior abans de tancar l’exterior que el conté!

COMENTARIS
És molt important (i útil) comentar el codi,
especialment quan és més complex.Serveixen per posar
anotacions per un mateix (o per qui hagi de llegir-se
el vostre codi).
Tot el que hi hagi comentat NO apareixerà per pantalla.

ESTRUCTURA DE DIRECTORIS
exemple senzill:
directori on hi haurà les imatges
directori on hi haurà els scripts
directori on hi haurà els fulls d’estil
directament al directori arrel
directori arrel

exemple
complert:
ESTRUCTURA
DE DIRECTORIS)
directori on hi ha les imatges
directori on hi ha els scripts
directori on hi ha els fulls d’estil
directori on hi ha les pàgines html
directori arrel
directori on hi ha els àudios
directori on hi ha els vídeos
és important tenir
els arxius ben
ordenats!

<img src=”imatges/logo.png”/>
IMATGES
és una URL d’un ﬁtxer
pot estar dins la nostra estructura la podem treure d’alguna altra web
<img src=”https://www.peanuts.com/wp-content/uploads/2017/09/snoopy-r.png”/>
per exemple:
(en aquest exemple, la imatge és dins la carpeta imatges)
URL interna URL externa

<img src=”imatges/logo.png” alt=”logotip”/>
IMATGES: atribut alt
text alternatiu que es
mostra si la imatge no
està disponible
<img src=”https://www.peanuts.com/wp-content/uploads/2017/09/snoopy-r.png”
alt=”Snoopy content” />
per exemple:

ENLLAÇOS
<a href=”http://www.imdb.com”/>IMDB</a>
igual que les imatges, l’enllaç pot ser intern (dins la nostra
estructura web) o extern (d’una altra web existent)
URL cap a on dirigeix l’enllaç
text a on clica l’usuari
codi HTML:
suposem aquesta estructura.

ENLLAÇOS EXTERNS
<a href=”http://www.imdb.com”/>IMDB</a>
enllaços que dirigeixen a altres webs.
tots els enllaços
porten a webs
externes
enllaços dins d’una
llista desordenada!

ENLLAÇOS INTERNS
<a href=”contacte.html”/>Contacte</a>
enllaços que dirigeixen a pàgines dins la nostra estructura.
enllaç relatiu
(dins la nostra estructura)

ENLLAÇOS DINS UNA WEB
exemple: tenim la següent estructura: index.html (a l’arrel de la web):
orfanato.html:(dins la carpeta pelis):
coco.html:(dins la carpeta pelis):
per accedir a les pàgines coco.html i
elorfanato.html hem d’entrar primer a
la carpeta pelis, per això posem la ruta:
/pelis/coco.html
els posters estan dins la carpeta
imatges, per això posem la ruta:
/imatges/nomdelaImatge

ENLLAÇOS A ENVIAR UN MAIL
enllaços que dirigeixen a l’enviament d’un mail
<a href=”mailto:mbatal11@xtec.cat”/>Mail</a>
codi HTML:
si es fa clic,
s’obre el client de correu
posa l’adreça del
destinatari
automàticament

OBRIR ENLLAÇ EN FINESTRA NOVA
<a href=”contacte.html” target=”_blank”/>Contacte</a>
enllaços que s’obren en una finestra nova al ser clicats:
Una de les raons més comunes perquè s’obri en una nova finestra
és que redirigeixi a una web externa, perquè no abandoni la
nostra web.

ATRIBUT ID
atribut que serveix per identificar únicament una part de l’html. El
valor de la ID ha de ser únic en tot el document HTML (més endavant, ja
veurem com identificar múltiples elements).
● per enllaços àncores (ho veurem a la propera diapositiva)
● per afegir estils (ho veurem al NF2)
● per accedir a un element amb JavaScript (ho veurem al NF4)
quan s’utilitzen?
sintaxi:
<h2 id=”ingredients”>Ingredients</h2>
identiﬁca únicament l’h2 ingredients.

ÀNCORES / MARCADORS
<a href=”#ingredients”/>Ingredients</a>
enllaços que dirigeixen a un lloc específic dins la mateixa pàgina.
1) Haureu d’identificar els punts a on voleu posar enllaços.
2) Hi posem un atribut ID (ha de ser únic) per element que volem
enllaçar.
3) Creem els enllaços corresponents, però a l’atribut href hi
posarem la ID, precedida del símbol #.
“#” + nom de l’ID

ÀNCORES: exemple
<h2 id=”ingredients”>Ingredients</h2> <a href=”#ingredients”/>Ingredients</a>
definició de la ID: utilització de la ID:
quan es cliqui sobre “Estiu
1993”, es redirigirà l’usuari a
la secció que parla sobre
aquesta pel·lícula.
descarregueu-vos aquest exemple complet i
observeu com funcionen els enllaços àncores

ÀUDIO
Hi ha molts formats d’àudio,
però el millor format
comprimit per música és l’mp3
formats suportats per HTML

ÀUDIO
<audio></audio>
controls: afegeix els controls (play, pause..)
source: especifiquem les alternatives d’arxius de
vídeo que el navegador pot escollir. Escollirà el primer
format reconegut.
autoplay: comença a reproduir el vídeo
automàticament. No funciona en iPad ni iPhone.

ÀUDIO - exemple
el text que posem entre <audio> i </audio> només apareixerà en
navegadors que no suporten el tag audio.
afegim els controls a l’àudio
les diferents
alternatives d’arxiu d’
àudio

ÀUDIO - navegadors
Suport dels navegadors pels diferents formats d’àudio:

VÍDEO
Hi ha molts formats de vídeo:
formats suportats per HTML
recomanat per Youtube

VÍDEO
<video></video>
controls: afegeix els controls (play, pause..)
width: amplada del vídeo
height: alçada del vídeo
source: especifiquem les alternatives d’arxius de
vídeo que el navegador pot escollir. Escollirà el primer
format reconegut.
autoplay: comença a reproduir el vídeo
automàticament. No funciona en iPad ni iPhone.
si no els posem, la pàgina pot pampalluguejar mentre es carrega el vídeo

VÍDEO - exemple
el text que posem entre <video> i </video> només apareixerà en
navegadors que no suporten el tag vídeo.
deﬁnim l’amplada del vídeo afegim els controls al vídeo
les diferents alternatives
d’arxiu de vídeo

VÍDEO - formats
MP4 webm ogg
Hi ha tres formats de vídeo suportats amb HTML:

VÍDEO - navegadors
Suport dels navegadors pels diferents formats de vídeo:

NA2: ORGANITZACIÓ DE LA INFORMACIÓ I
FORMULARIS

TAULES
Estructura per mostrar les dades en ﬁles i columnes:
columnes
ﬁles

TAULES
tags:
<table></table>
<tr></tr>: ﬁla
<td></td>: cel·la
<th></th>: capçalera

TAULES - jerarquia
tags, exemple:
<table>
<tr></tr>: fila
<td></td>: cel·la
<tr>
<td><th> <td> <td> …
cel·la cel·la cel·la cel·les
fila
cel·les de
capçalera
<tr> fila <tr> …. files
<th> <th>

TAULES
tags, exemple:
<tr></tr>: ﬁla
<td></td>: cel·la

TAULES
tags, exemple amb codi:
<tr></tr>: ﬁla
<td></td>: cel·la

TAULES - exemple amb dades
exemple amb codi i dades:
<tr></tr>: ﬁla
<td></td>: cel·la

TAULES - afegir vora
afegirem un element d’estil al <head> (recordeu?)
gruix de la vora
color de la vora

TAULES - exemple afegir vora
afegirem un element d’estil al <head> (recordeu?)

TAULES - color de fons
com pintem una cel·la amb un color de fons?
?

TAULES - color de fons
com pintem una cel·la amb un color de fons?
SOLUCIÓ “PROVISIONAL”:
afegim un “estil” dins de l’element <td>:
element td original:
element td afegint l’estil:
li diem que volem afegir estil a l’element
li diem que volem modiﬁcar el color de fons
el color de fons que volem utilitzar
així es veurà al navegador:

FORMULARIS
per obtenir informació de
l’usuari
El formulari més conegut és potser la barra
de cerca de la pàgina principal de Google.
A més de permetre als usuaris fer una cerca, els
formularis també permeten altres funcions: per
registrar-se a una web, per fer una compra o per
inscriure’s a una newsletter.

FORMULARIS: com funcionen?
L’usuari emplena un formulari i clica un botó
per enviar la informació al servidor.
1
El nom de cada element (control) és
enviat al servidor, juntament amb els
valors que l’usuari entra o escull.
El servidor processa la informació
mitjançant un llenguatge de
programació (com ara PHP, C#, VB.net,
Java..) També pot emmagatzemar la
informació en una base de dades.
El servidor crea una nova pàgina per
enviar al navegador, basada en la
informació rebuda.
2
3
4

FORMULARIS: com funcionen?
La informació s’agrupa en parelles de nom=valor.
En aquest exemple seria:
● usuari = Mariona
● vot = Ella Fitzgerald
NOM
NOM
VALOR
VALOR

Com es recull informació amb formularis? CONTROLS
entrar text entrar contrasenya àrea de text
radio buttons checkboxes menú drop-down
botó per enviar botons amb imatge pujar arxius
Afegir text
Triar opcions
Enviar la informació

FORMULARIS: estructura bàsica
<form></form>
per enviar
les dades
per esborrar les dades

FORMULARIS: estructura bàsica

FORMULARIS
<form action=”pagina.php” method=”post”>
Els atributs de l’etiqueta FORM són ACTION i METHOD
és la URL de la pàgina del servidor que
rebrà la informació quan s’envii el formulari
(ex: una pàgina en PHP)
de quina manera s’envien les
dades al servidor

FORMULARIS
<form action=”pagina.php” method=”post”>
hi ha dues possibilitats
els valors enviats s’afegeixen a la URL
que li hem posat a l’”action”.
Es recomana quan:
● És un formulari curt
● Només es recuperen les dades del
servidor web
*si l’atribut method no està deﬁnit, es comporta com si fos GET
els valors enviats s’envien separadament,
mitjançant els HTTP headers.
Normalment es recomana utilitzar-los quan:
● es demana que pugin un arxiu
● és un formulari llarg
● conté dades sensibles (ex: password)
● afegeix o elimina dades d’una base de dades.
GET POST

FORMULARIS - enviament amb GET
els valors enviats s’afegeixen a la direcció
name
email
referrer
rating
subscribe

COMPARATIVA GET - POST

FORMULARIS - exemple inicial

FORMULARIS - elements
text input

password input

textarea

radio button
han de tenir el mateix nom (name) perquè
s’agrupin i només deixi seleccionar-ne un.

checkbox
checked: el selecciona inicialment
han de tenir el mateix nom!

drop down list

ﬁle input box

botó submit

botó submit amb imatge

FORMULARIS - agrupar elements
<label> és una etiqueta que associa un tros de
text a un control (element)
l’atribut ID al control (element)
i l’atribut for (a l’etiqueta) han de coincidir
SENSE LABEL: AMB LABEL:
Per l’accessibilitat!

FORMULARIS - agrupar elements
ﬁeldset i legend
conté el títol visible del grup d’elementstot el que es troba dins de ﬁeldset forma
part del mateix grup d’elements.

PRÀCTICA 9: Exemple de formulari

PRÀCTICA 10: Reserva d’habitacions
Enunciat de la pràctica:
Crea el següent formulari amb HTML tenint en
compte que:
● Comprova automàticament els camps
obligatoris
● Comprova que el correu electrònic sigui
vàlid
● Comprova que les dates estiguin dins el
rang
● Comprova que els números estiguin dins el
rang
● Botó de reset
● Paràmetre autofocus

PRÀCTICA 10: Reserva d’habitacions
typeselect
number
range
text
email
date
date
tel
color
textarea
submit
reset

FORMULARIS: camps obligatoris
Camps obligatoris són camps que l’usuari ha
d’emplenar sí o sí per poder completar el
formulari.
<input name=”nom” required=””>
a l’usuari normalment se li indica que és un camp obligatori mitjançant un asterisc(*)
falten més atributs: size, type...

FORMULARIS: correu electrònic
Podem validar que el que ens ha entrat l’usuari
tingui un format de correu electrònic:
text@text.domini
<input name=”correu” type=”email”>
poden haver-hi més atributs: size, required...

FORMULARIS: dates
Podem validar que les dates siguin dins d’un rang
especiﬁcat
<input name=”data” type=”date” min=”2020-12-9” max=”2020-12-31”>
data mínima
data màxima

FORMULARIS: números entre mínim i màxim
Podem especiﬁcar que una entrada numèrica per
part de l’usuari sigui només entre números d’un
rang.
<input name=”persones” type=”number” min=”1” max=”10” value=”1”>
valor mínim valor màxim valor inicial
el que surt al navegador a l’obrir el formulari: al clicar sobre el quadrat:

FORMULARIS: rang de números
Podem especiﬁcar que una entrada numèrica per
part de l’usuari sigui només entre números d’un
rang, amb una bola que podem arrossegar per
indicar el número desitjat.
<input name=”num” type=”range” min=”1” max=”5” value=”1”>
valor mínim
valor màxim valor inicial

FORMULARIS: botó de reset
Elimina totes les dades entrades al formulari per
l’usuari.
<input value=”Reset” type=”reset”>
valor que surt al botó

FORMULARIS: seleccionador de color
Permet a l’usuari triar un color
<input name=”color” type=”color”>
al clicar...

FORMULARIS: autofocus
Camp que obté el focus quan es carrega el formulari i se selecciona d’un altre color:
<input name=”nom” autofocus=”autofocus”>

RECURSOS EXTRA: BONES PRÀCTIQUES

BONES
PRÀCTIQUES
a l’hora de nomenar fitxers.
● són CASE SENSITIVE, es recomana sempre
utilitzar lletres minúscules
(TREBALLS.HTML)(treballs.html)
● no posar accents ni caràcters especials
com ara ç, ñ, l·l…
(índex.html)(index.html)
● no posar espais en els noms d’arxius, com
a molt separar amb lletra majúscula
(la meva trajectoria.html)(laMevaTrajectoria.html)
● posar noms breus als arxius
(paginadecontacteambformulari.html)(contacte.html)
● posar noms rellevants als arxius
(pagina1.html) (portfolio.html)
INCORRECTE CORRECTE

BONES
PRÀCTIQUES
a l’hora d’escriure codi
INDENTAR EL CODI COMENTAR EL CODI

BONES
PRÀCTIQUES
INDENTAR EL CODI
augmenta la llegibilitat
i que el codi es vegi NET.
exemple:

BONES
PRÀCTIQUES
COMENTAR EL CODI
● facilita la comprensió
del codi tant per un
mateix com per si l’ha
de llegir algú altre
● tindrà més sentit un
cop afegim CSS i
JavaScript.
evitar comentaris redundants:

BIBLIOGRAFIA i
WEBGRAFIA
Recursos utilitzats per
elaborar el material de
les diapositives.
DUCKET, JOHN (2011). HTML & CSS. Design
and build websites. Ed.John Wiley &
Sons, Inc. ISBN:978-1-118-00818-8
ROBSON, E. i FREEMAN, E. (2012). Head
First HTML and CSS. Ed. O’Reilly.
ISBN:978-0-596-15990-0
Apunts de l’IOC.
W3Schools.

HTML bàsic (SMX - M8 - UF5 - NF1)

Recommended

Recommended

More Related Content

Featured

Featured (20)

HTML bàsic (SMX - M8 - UF5 - NF1)