Está en la página 1de 324

Table of Contents  

1
1
1
1
1
1
1
1
1
1
1
1
3
  

1
1  

1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
5 2
.

1
2  
1

1
1
1
1
1
1
1
1
1
1
1
1
1
7 1
.

1
1
3  

1
4  

1
7 5
.

1
1
1
.
7
.
8
  

1
1
1
2  

1
1
1
1
1
1
1
1
3  

1
1

3  
1

1
1
1
1
1
1
1  
1

1
.1  

1
1
1
1
1
1
2.
1  

1
1
.3  

1
1
 

1
1

4  
Presentación  

Presenta
ción  
Este curso es gratu
ito y lo puedes reali
zar incluso si no s
abes nada de prog
ramación, 
sólo hace falta tener 
ganas de aprender. 
A pesar de esto, ta
mbién puede serte ú
til si ya  
sabes HTML pero q
uieres perfeccionar 
o refrescar tus cono
cimientos sobre HT
ML5, CSS3 o 
JavaScript.  

A lo largo del mismo 
te voy a:  

Enseñar los element
os más comunes de 
HTML5, CSS3 y Jav
aScript, osea los qu

usaremos el día día
.  
Mostrar dónde podr
ás resolver tus duda
s cuando tengas pro
blemas.  
Explicar cómo trabaj
ar con algunas de la
s herramientas que 
usan los profesional
es del 

Es importante sab
er que en el mundo 
de la programación 
hay muchas formas 
de resolver 
un mismo problema, 
y que todas ellas pu
eden ser igualmente 
válidas. Dicho esto, 
quiero  
aclarar que el objeti
vo del curso no es 
aprender todas y ca
da una de las forma
s de 
resolver un problem
a (esto se va aprend
iendo con años de p
ráctica), y es por ell
o que no  
entraré en profund
idad en todos y ca
da uno de los elem
entos y característ
icas de 
cada lenguaje.  

Las definiciones e
starán simplificad
as, esto está hecho 
a conciencia ya que 
como decía 
antes, no he querido 
asumir que tengas n
ingún conocimiento 
previo sobre desarr
ollo web.  
Por eso, para facilita
rte la comprensión y 
evitar distraerte del 
objetivo del curso, t
e explicaré 
conceptos en much
as ocasiones que n
o serán 100% precis
os pero que sí corre
ctos.  

En muchas ocasion
es encontrarás enla
ces a la Wikipedia, 
he elegido hacerlo a
sí por 
varias razones:  

1.  Usa un lenguaje 
bastante coloquial  
2.  Incluye enlaces 
a las palabras más 
complejas  
3.  Son definiciones 
consensuadas en la

A pesar de esto incl
uiré enlaces al W3C 
con las definiciones 
formales, aunque pu
ede que 
estas sean más difí
ciles de entender.  

Así que no tomes t
odas las definicion
es al pie de la letra
, tómalas como defi
niciones lo 
suficiente buenas co
mo para ayudarte a 
entender el contexto
. De todos modos, si
empre  
que se dé este caso 
te añadiré un enlace 
a un recurso con má
s información o aña
diré un 
 con aclaraciones al 
final de la página.  

5  
Presentación  

El objetivo del cur
so es dotarte de u
na buena base que 
te permita sentirte lo 

suficientemente seg
uro   para afrontar c
ualquier proyecto y 
así seguir aprendien
do. Para  
ello nos centraremo
s solamente en los c
onocimientos y herr
amientas más impor
tantes de 
un 

Formato  
Este es el material e
scrito del  
 

Estas ediciones que 
se celebran periódic
amente consisten e
n ver una serie de ví
deo- 
tutoriales y hacer un
os ejercicios que te 
enviaré semanalme
nte. La carga de tra
bajo  
pretende ser menor 
a 3 horas semanale
s e incluyen una ses
ión online (en grupo
) de 1h a la 
semana para resolv
er dudas.  

El formato MOOC te
ndrá una duración 
aproximada de 6 s
emanas.  
Snippets i
nteractivo
s  
A lo largo de todo el 
libro utilizaré ejempl
os de código (snipp
ets) interactivos par
a facilitar la 
compresión y la inte
racción con el códig
o ,  

Además de como a
poyo al libro, tienen 
un segundo propósit
o: servirte de "libreta
" en el 
futuro para tener un
a lista de ejemplos 
para tus propios des
arrollos.  

Dudas, id
eas, suger
encias, y 
contribuci
ones  
Además de resolver 
dudas en la sesione
s online semanales, 
podrás realizar cual
quier 

Recuerda, que no te 
de vergüenza pregu
ntar cualquier duda 
que te surja, por sim
ple que te 
parezca, si te ha sur
gido a ti, ten por seg
uro que le surgirá a 
más personas. Así 
me  
ayudarás también 
saber qué aclaraci
ones añadir o qué 
mejoras puedo hac
er al 
contenido del curs
o para facilitarles el 
aprendizaje a otras 
personas que venga
n detrás.  

6  
Presentación  

Además si consigue
s terminar el curso s
in ninguna duda, e
l día que estés haci
endo un 
proyecto y algo no t
e funcione sabrás m
ucho mejor por dón
de empezar a busca
r los  
errores.  

Y si te sientes cómo
do usando   

Autor(es)  
Mi nombre es 

 mejor 
de cada curso/tutori
al que he encontrad
o en estos años en I
nternet.  

Aunque inicialmente 
me he lanzado sólo 
a crear este curso, 
mi objetivo es anima
r a que 
otros profesionales 
aporten su granito d
e arena para mejora
r el contenido y man
tener este  
curso actualizado d
urante mucho tiemp
o, es por eso que h
e decidido liberar e
ste libro 
licenciándolo com
o Creative Commo
ns (

En el siguiente apart
ado veremos las dif
erentes maneras de 
contribuir a mejorar 
el curso. 
Por supuesto, las pe
rsonas que contribu
yan tendrán su reco
nocimiento no sólo 
en 

Motivació
n - ¿Por q
ué?  
¿Por qué otro curso 
de HTML/HTML5?, 
pues las razones qu
e me han llevado a l
anzarme a 
esta aventura son:  

1.  Compartir los tr
ucos y consejos: a 
lo largo de estos añ
os he ido aprendien
do 
muchos trucos y 
muchas lecciones s
obre cómo ser más 
productivo y me gus
taría  
compartirlos con
tigo.  
2.  Asentar una bu
ena base: después 
de revisar muchos c
ursos (algunos de el
los muy 
buenos), tengo l
a sensación de que 
ninguno explica tod
os los conceptos ne
cesarios  
para crear una b
uena base que te pe
rmita sentirte cómod
o a la hora de contin
uar 
creciendo por tu 
cuenta.  
3.  Creo que los tie
mpos han cambia
do: y creo que hay 
muchísimas person
as con 
mucho potencial 
a las que saber HT
ML, CSS y JavaScri
pt les "daría alas" y l
es abrirían  
muchas puertas 
profesionales.  
4.  Disfruto compa
rtiendo lo que sé y 
ayudando a los de
más: siempre quise 
montar 
una empresa par
a crear algún produ
cto que mejorase au
nque fuese un poco 
la vida de  
miles/millones de 
personas, pero desp
ués de 6 años me h
e dado cuenta de qu
e  

7  
Presentación  

también es posible c
ambiar la vida de m
uchas personas ens
eñándoles lo que sé
.  

Todo esto ha sido m
ás que suficiente pa
ra que decida a dedi
car muchas horas 
(y cariño) 
de mi tiempo libre p
ara ir creando poco 
a poco los contenid
o de este curso.  

Aclaraciones:  
1. A lo largo de todo 
el libro usaré el mas
culino por facilitar la 
lectura evitando los: 

"seguro/a", o los "se
gur@", espero que 
nadie se ofenda ;-P. 
 
2. Un programador f
ront-end no es más 
que un programador 
que domina HTML, 
CSS y 
JavaScript.  
8  
Contribuciones  

Contribuc
iones  
Cualquier persona pu
ede contribuir de difer
entes formas:  

1.  Ayudando a mejor
ar los contenidos del  
 
 

Para facilitar la comun
icación entre todas las 
personas que quieran 
contribuir se ha cread

un 

Contenido
s del curso 
 
Libro  
Estado de las tareas:  

Cualquier persona pu
ede ayudar a introduci
r mejoras, corregir err
ores tipográficos, 
gramaticales, etc.  
9  
Contribuciones  

Para "poder editar" un
a página (aclaración: 
en  realidad  lo  que es
tarás  haciendo es  en
viarme 
una propuesta de me
jora que tendré que r
evisar y aceptar), hac
e falta tener una cue
nta y  
estar identificado en 
Github.  
Por último, añadir que 
los contenidos están e
scritos en el lenguaje 
de marcas Markdown 

que veremos en la pr
óxima lección.  

10  
Contribuciones  

Ejercicios  
Estado de las tareas:  

Por definir.  

Página web 
 
Estado de las tareas:  

Por definir.  

Aplicacion
es móviles  
Estado de las tareas:  

Por definir.  
11  
Markdown  

Markdo
wn  
Esta lección la he 
creado para las p
ersonas que esté
n pensando en c
ontribuir con los 
contenido del cur
so y no saben 

WIP (simplicar el 
tutorial aquí)  
12  
¿Qué vamos a necesitar?  

¿Qué vamos a 
necesitar?  

Es habitual encontrar profesional
es que usen otros programas co
mo: , 
 , 

Nota: Es posible que hayas oído 
hablar de Dreamweaver, Frontpa
ge, Aptana, etc. 
Personalmente no te recomiendo 
ninguno de ellos para aprender p
orque incluyen botones  
que introducen código, cosa que 
muchas veces nos incita a introd
ucir código innecesario o 
código que no sabemos qué signi
fica, y por tanto que no sabremos 
arreglar en caso de que  
contenga algún fallo.  

El tercero no lo recomiendo porq
ue además de ser un programa q
ue consume bastantes 
recursos, considero que como de
cimos habitualmente en España: 
es matar moscas a  
cañonazos.  
13  
Conceptos básicos  

Conceptos 
básicos  
En esta primera lección v
amos a ver qué son y cóm
o funcionan:  

Los servidores web y HTT
P  
Los navegadores  
Las URLs  
Peticiones HTTP  

Por tanto empezaremos p
or aprender los concepto
s fundamentales a la ho
ra de entender 
el funcionamiento de una 
página web para adquirir u
na base que nos permita e
ntender de  
dónde pueden venir los er
rores que cometamos en 
el futuro.  

Es importante conocer e 
interiorizar bien estos c
onceptos ya que los usar
emos y nos 
los encontraremos continu
amente tanto en este curs
o como en cualquier otro r
ecurso de  
Internet.  
14  
Alojamiento y servidores HTTP  

Alojamiento y ser
vidores HTTP  
Para este curso nos vale con entender 
las siguientes definiciones (informales)
:  

Un 

En este curso usarás tu máquina como 
servidor mientras estés haciendo prue
bas, y 
posteriomente usarás el hosting gratuit
o y el servidor HTTP que ofrece Github 
para entregar  
los ejercicios.  

En el apartado Peticiones  HTTP vere
mos en detalle cómo se comunica un s
ervidor que 
tenga un servidor HTTP instalado con 
nuestro navegador.  

Algunos de los servidores webs y emp
resas que ofrecen alojamiento web:  

Alojamiento web: 1and1, AWS, Linode, 
etc. (
Servidores web:   

A continuación tienes una gráfica que 
muestra el porcentaje de los servidore
s web más 
usados:  
15  
Alojamiento y servidores HTTP  

Fuente: 

Aclaraciones:  
1. No siempre tiene que ser con un na
vegador, puede ser con otro tipo de so
ftware. 
2. Hay muchos 
 
16  
Navegadores  

Navegad
ores  
Un navegador es un 
programa (complejo) 
que entiende y trans
forma el código que 
recibe 
desde un servidor   
en algo entendible p
ara un humano (una 
página web, imágen
es, etc).  

Entre algunas de las 
responsabilidades q
ue debe garantizar u
n navegador se enc
uentran:  

Integridad: para tra
nsmitir páginas web 
se utiliza una forma 
de comunicación lla
mada 
HTTP (o protocolo 

Seguridad: dado q
ue los navegadores 
reciben código escrit
o normalmente por o
tras 
personas, el navega
dor implementa algu
nas reglas de seguri
dad. Estas reglas se 
 
definen a diferentes 
niveles: durante la c
onexión entre las m
áquinas y el envío 
(), al ejecutarse en e
l navegador (

Optimización: al m
ismo tiempo que rec
iben la información, l
os navegadores inte
gran 
mecanismos para ac
elerar la carga y mej
orar la experiencia d
el usuario, por ejem
plo  
acelerar el tiempo d
e carga utilizando un
a memoria de almac
enamiento temporal 
(memoria caché), o 
comprimiendo los m
ensajes durante las 
comunicaciones.  

Aunque existen mult
itud de 

Aquí te dejo además 
una gráfica que mue
stra la cuota de uso 
de los navegadores 
más 
populares:  

17  
Navegadores  

Fuente:   

Aclaraciones:  
1. Normalmente a tr
avés de un servidor 
web HTTP  
18  
URLs  

URLs 
 
Para accede
r a un ficher
o/recurso a t
ravés de un 
navegador u
samos la U
RL (Uniform 
Resource Lo
cator). Cual
quier URL si
gue el siguie
nte formato:  

scheme:[//
[user:passw
ord@]host[:
port]]
[/]path[?
query]
[#fragment]  

Aclaración
: En informát
ica se suele
n utilizan los 
corchetes [ ] 
para indicar 
que lo que s

encuentra c
ontenido ent
re ellos es o
pcional.  

Vamos a ha
cer un pequ
eño repaso 
a cada una 
de las parte
s de la URL: 
 

scheme (o
bligatorio): 
este suele s
er "http" o "h
ttps", aunqu
e podría ser 
también: file, 

ftp, mailto, d
ata, skype, e
tc.  
user:pass
word@: us
uario y contr
aseña (p.e. 
hhkaos:mipa
ss@). Esto 
por ejemplo 
se 
utiliza en otr
o tipo de co
nexiones    
 

host: nombr
e de domini
o (p.e. raulji
menez.info), 
subdominio   
o dirección I
P del 
servidor we
b (p.e. 79.8
2.123.1)  
port: 
path (oblig
atorio): ruta 
al fichero (p.
e. blog/inde
x.php)  
query: pará
metros/varia
bles (p.e. pr
eview=true)  
fragment: p
unto de ancl
aje   (p.e. #i
ntroducción) 
 

Así una URL 
válida podrí
a ser:  

19  
URLs  

n-html5  

Donde:  

scheme = ht
tps  
user:passwo
rd@ = (vací
o)  
host = hhka
os.gitbooks.
io  
port = 80  
path = curs
ohtml5desd
ecero/conte
nt/chapter1.
html  
query = (vac
ío)  
fragment = 
#primeros-
pasos-con-
html5  

Otro ejempl
o de URL vá
lida podría s
er: 

En este cas
o le estamos 
indicando al 
navegador q
ue acceda a 
un fichero q
ue se encue
ntra 
en nuestro d
isco duro.  

Aclaracione
s:  
1. Un subdo
minio es un 
prefijo que l
e ponemos 
al dominio, p
or ejemplo: 
mail.google.
com, y 
se puede co
nfigurar para 
que apunte 
a distintas I
Ps o "carpet
as de nuestr
o disco duro
". Así  
por ejemplo 
www sería t
ambién un s
ubdominio  
2. Los puert
os son núm
eros enteros 
que nos per
miten especi
ficar a qué "
puerta" o "c
anal" 
de una máq
uina nos qu
eremos con
ectar. Por ej
emplo en la 
web se suel
e usar el 80 
para los  
servidores H
TTP (aunqu
e Skype tam
bién lo usa), 
el 21 para el 
FTP, el 22 p
ara el SFTP, 
etc 
3. Un punto 
de anclaje n
os permite i
ntroducir un
a URL al abr
irla hace scr
oll hasta un 
punto  
de la página 
determinado 
(
20  
Peticiones HTTP  

Peticiones 
HTTP  
Cuando nuestro navega
dor quiere acceder a un
a página web a través d
e HTTP (scheme = 
http), lo que hace es co
municarse con un servid
or HTTP. Para ello desc
ompone la URL en  
diferentes partes que le 
permite conocer la direc
ción de la máquina (hos
t) y la ruta (path) del 
recurso que al que quier
e acceder (o al que le v
a a enviar información), 
y envía un mensaje  
al servidor, lo que forma
lmente se conoce como 
una petición.  

Algunas de las acciones 
que provocan que un na
vegador realice una peti
ción HTTP son: 
escribir una URL en la b
arra de direcciones, pul
sar un enlace, refrescar 
una pestaña o  
enviar un formulario.  

Existen varios 

GET: para solicitar infor
mación.  
POST: para enviar infor
mación.  

Los mensajes de respu
esta del servidor puede
n ser de 
200: que se ha encontr
ado correctamente el fic
hero/recurso.  
403: que no tenemos p
ermiso para acceder al f
ichero/recurso.  
404: que el fichero/recu
rso que le hemos solicit
ado no se ha podido en
contrar en el 
disco duro (puede ser p
orque no esté o porque 
la ruta es incorrecta).  

El siguiente gráfico mue
stra un esquema simplifi
cado que nos permite h
acernos una idea 
sobre cómo funciona la 
comunicación entre am
bos:  

21  
Ejercicio  

Ejercic
io  
En esta primer
a lección sólo q
uiero que haga
s un ejercicio ti
po test para ver 
si has 
entendido todo
s los conceptos
. Lo que se pre
gunta en el test 
es lo que realm
ente me  
importa que re
cuerdes.  

Ah! por cierto, 
puedes repetirl
o tantas veces 
como quieras.  

Si hay algo que 
no te haya que
dado claro, rec
uerda que pued
es preguntar cu
alquier duda 
en los 
22  
Recursos  

Recurs
os  
Aunque no es i
mprescindible 
para entender y 
aprender a crea
r webs con HT
ML5, 
CSS3 y JavaSc
ript, los siguient
es conceptos sí 
pueden serte útil
es si quieres apr
ender a  
alojar un sitio w
eb en un servido
r tuyo propio.  

Dominios 
y subdomi
nios  
En este curso n
o aprenderemo
s a comprar y c
onfigurar un do
minio ya que n
o se ha 
considerado imp
ortante para los 
objetivos plante
ados (

Dicho esto creo 
que es interesan
te conocer qué 
es un dominio y 
qué es un subdo
minio:  
 

Aunque el 

Servidore
s  
Como 

Recordatorio: E
n este curso us
aremos nuestra 
máquina si nin
gún servidor H
TTP ya 
que no nos har
á falta de mom
ento.  

23  
Recursos  

Estos ordenador
es no tienen por 
qué tener nada 
en especial, nue
stra máquina pu
ede hacer 
de servidor web, 
pero dado que (
entre otras muc
has cosas), una 
web se espera q
ue  
funcione 24 hora
s, 7 días a la se
mana y que nue
stra máquina la t
enemos que apa
gar de 
vez en cuando, 
normalmente se 
alquila parte de 
una máquina (o 
una máquina co
mpleta) a  
una empresa qu
e se dedica excl
usivamente a es
to: empresas de 

Se puede acced
er y gestionar es
tas máquinas qu
e alquilamos en 
remoto de difere
ntes 
maneras: usand
o  ,  
  

TCP  
Ignora este apa
rtado si no has 
estudiado nada 
relacionado co
n informática o 
telecomunica
ciones. Simple
mente quería ha
cer referencia q
ue tanto los prot
ocolos HTTP,  
como FTP, SSH
, ,    

24  
HTML5: Primeros pasos  

Primeros paso
s con HTML5  
En esta segunda lección verem
os:  

Una introducción a HTML5  
Qué son y cómo funcionan las 
etiquetas  
Qué es y cómo se hace la anid
ación de etiquetas  
La estructura básica de una pá
gina  
Algunas etiquetas básicas  

El objetivo es empezar a familia
rizarnos con HTML5 y preparar
nos para la siguiente lección 
en la que configuraremos nuest
ro Google Chrome para poder e
mpezar a escribir código.  

ue  
no te la saltes.  
25  
Introducción a HTML5  

Introducción 
a HTML5  
HTML ( 
 

HTML fue creado y es mante
nido por una organización sin 
ánimo de lucro llamada 
 

Desde el consorcio trabajan 
continuamente en definir cóm
o debe evolucionar este leng
uaje 
y otros estándares que confor
man la web. Posteriormente l
os fabricantes de navegador
es  
preparan los mismos intentan
do conseguir que un código f
uncione igual en todos los 
navegadores. Aunque desafo
rtunadamente no siempre es 
así, cada vez es una realidad 
 
más cercana.  

Por tanto, 

Snippets intera
ctivos  
Vamos a ver una breve introd
ucción al funcionamiento de l
a interfaz:  
26  
Introducción a HTML5  

1.  Permite navegar entre las 
diferentes lecciones 
2.  Permite navegar entre los 
diferentes snippets  
3.  Ejemplo de código HTML 
(con la sintaxis resaltada) 
4.  Resultado del código (3) e
n embebido en la página  
5.  Nos permite abrir la previs
ualización a pantalla complet
a  
6.  Nos permite usar el editor 
web 

Puedes acceder a esta interfa
z a través de la siguiente UR
L: 
27  
Etiquetas  

Etiquet
as  
En el último est
ándar de HTML 
(HTML5) existe

Por esto vamos 
a empezar por e
ntender qué asp
ecto tienen. Lo p
rimero es saber 
que las 
etiquetas sólo p
ueden ser de do
s tipos:  

1) Las que tien
en una apertur
a y un cierre co
mo en el siguien
te caso:  

<elemento atribu
to="valor">Conte
nido</elemento>  

Por ejemplo:  

<a href=

En este caso de
cimos que: "tene
mos un element
o a  donde el va
lor del  atributo 
href  es 

Si nos fijamos la
s etiquetas sie
mpre están con
tenidas entre los 
símbolos < >, y 
el cierre 
sólo incluye el n
ombre del elem
ento precedido 
de una barra lat
eral "/" (p.e. </el
emento>).  

2) Por otro lado 
están los eleme
ntos auto-
contenidos (lo
s que no se cier
ran 
explícitamente)
:  

<elemento atribu
to="valor">  

Por ejemplo:  

<img src="html-
css-js.png" alt
="Logotipos de H
TML5, CSS3 y Ja
vaScript">  

Es importante d
estacar que el a
tributo y el valo
r son opcionale
s.  

Vamos a ver alg
unos ejemplos d
e nombres de et
iquetas:  

elemento: htm
l, head, meta, ti
tle, body, img... 
 
atributo: chars
et, src, alt, ...  

28  
Etiquetas  

valor: UTF-8, 
"url" (la URL a u
n recurso), "text
o", ...  

A mi siempre me 
gusta tener una 
"chuleta" (o che
atsheet) a mano 
que resuma tod
os los 
elementos y alg
unos de los atrib
utos que acepta
n. Pero por ahor
a no hace falta q
ue te  
distraigas con e
sto, lo important
e es que entiend
as el formato.  
29  
Anidación  

Anidaci
ón de et
iquetas  
También es imp
ortante saber qu
e unas etiquetas 
pueden contener 
a otras (una o va
rias), o 
como se suele d
ecir "que se pue
den anidar".  

Por ejemplo:  

<head>  
    <title>Títul
o de la página</
title>  
    <meta name="
author" content="
Raúl Jiménez Orte
ga - @hhkaos">  
</head>  

En este caso ve
mos que la etiqu
eta head tiene c
omo contenido a 
otra etiqueta titl
e. En este 
caso se dice que
:  

La etiqueta hea
d es el padre de 
la etiqueta title y 
meta.  
Y que la etiqueta 
title y meta son 
hijas de la etiqu
eta head.  
La etiqueta title y 
meta son herm
anas.  

Si nos fijamos, a
demás, la etiquet
a anidada (title) 
está en una nue
va línea y con un 
nivel de 
 

Orden d
e apertu
ra y cierr
e  
Cuando anidamo
s etiquetas unas 
dentro de otras e
s muy importante 
cerrarlas en  ord
en. 
Esto quiere decir 
que la primera et
iqueta en cerrars
e tiene que ser l
a última que se a
brió,  
así por ejemplo e
ste ejemplo sería 
incorrecto:  

<p>El orden es <
strong>muy import
ante</p></strong
>  

La forma correc
ta de hacerlo se
ría:  

<p>El orden es <
strong>muy import
ante</strong></p
>  

Recordemos que 
hay etiquetas qu
e no es necesari
o cerrarlas por lo 
que esto sería 
correcto:  
30  
Anidación  

<p>  
    El orden es <
strong>muy import
ante</strong>.<br
>  
    Así introducía
mos un salto de 
línea.  
</p>  

Otros as
pectos  
Me gustaría punt
ualizar otros dos 
detalles:  

1.  No todas las 
etiquetas son ani
dables entre sí; p
or ejemplo: una 
etiqueta body n
o puede 
contener una 
etiqueta head. P
ero no te preocu
pes de momento 
por esto, en otra  
lección verem
os cómo podemo
s saber qué etiq
uetas son anidab
les entre sí.  
2.  Es importante 
indentar bien el 
código porque e
n muchos casos 
nos encontrarem
os 
muchos nivel
es de anidación, 
etiquetas que co
ntienen etiquetas 
que a su vez con
tienen  
etiquetas, etc. 
ya que no existe 
un límite máxi
mo de anidami
ento.  
31  
Estructura básica de una página  

Estructura básica 
de una página  
Primero me gustaría hacer una pequeñ
a aclaración sobre terminología que voy 
a usar, 
diferenciaremos:  

Página web: como una página individu
al dentro de un sitio web (p.e: 

Sitio web (o web): como el conjunto de 
todas las páginas en las que podemos 
navegar 
dentro de un mismo dominio (p.e: 
 

Dicho esto, toda página web que haga
mos en HTML5 debe tener una estructu
ra inicial 
similar a la siguiente:  

<!DOCTYPE html>  
<html lang="es">  
<head>  
    <meta charset="UTF-8">  
    <title>Título de la página</title>  
</head>  
<body></body>  
</html>  

A continuación explicamos la función q
ue cumple cada etiqueta:  

 <!DOCTYPE html> : indicar al navegador 
que el código HTML en el que está escri
ta la 
página es en la versión 5, osea que es 
HTML5. 
 <html lang="es">... </html> : indica la r
aíz del documento y todas las etiqueta
s deben 
estar incluidas dentro. Además se espe
cifica el idioma en el que está escrita, e
s =  
Español (
 <head> ... </head> : se usa para envolv
er otras etiquetas que ofrecen informaci
ón 
principalmente a: el navegador, a los bu
scadores y a otras páginas (como pued
en ser  
redes sociales, etc). La información esp
ecificada dentro del head no se muestr

dentro    de la página web que ve el usu
ario.  
 <meta charset="UTF-8"> : indica al nave
gador qué tipo de caracteres contiene l
a página. 
Con el atributo charset indicamos cuál d

  

 <title> ... </title> : indica el título de 
nuetra página. Este se muestra en: la p
estaña 
del navegador, el enlace que indexan lo
s buscadores, etc.  
 <body> ... </body> : contiene todo el co
ntenido visible por el usuario dentro de 
nuestra  

32  
Estructura básica de una página  

página.  

Observa que la etiqueta html contiene d
os hijas: head y body, esto ya no es obl
igatorio en 
HTML5 ya que se puede omitir las etiqu
etas html, body y head, pero por conv
ención es  
recomendable usarlas.  

Aquí puedes ver el ejemplo interactiv
o: Lección 1 - Snippet 1  

Aclaraciones:  

1. Cuando digo dentro me refiero al co
ntenido de la página, lo que no incluye l
a pestaña del 
navegador ni la barra de direcciones.  
33  
Etiquetas básicas  

Etiquetas b
ásicas  
Para terminar esta lecció
n vamos a aprender el si
gnificado de ocho de las 
etiquetas que con 
más frecuencia tendrem
os que usar cuando cree
mos páginas web:  

 <p></p> : representa un 
párrafo ().  

 <br> : representa un salt
o de línea ().  

 <h1></h1> : esta etiquet
a se utiliza para represe
ntar el encabezado de u
na página, 
como si fuera el índice d
e un libro. Puede variar d
esde 1 hasta 6 para difer
enciar  
subniveles (

 <ul></ul> : representa u
na lista de elementos, do
nde el orden de los elem
entos no es 
importante - esto quiere 
decir que el cambio del 
orden no modifica el sign
ificado.  
(

 <ol></ol> : representa u
na lista de elementos, do
nde el orden de los elem
entos sí es 
importante - esto quiere 
decir que el cambio del o
rden modifica el significa
do. (

 <li></li> : representa u
n elemento de la lista y s
u padre siempre tiene qu
e ser una 
etiqueta ol o ul. (

 <strong></strong> : repr
esenta algo muy importa
nte, serio (para avisos o 
precauciones) o urgente 
(que debe ser leído ante
s). (

 <em></em> : sirve para enf
atizar en el contenido. ().  

 <!-- --> : se utiliza para 
añadir comentarios dentr
o del código que el usuar
io no podrá 
ver. Por ejemplo para añ
adir notas de tareas pen
dientes, aclaraciones qu
e nos ayuden  
a nosotros o a otras pers
onas a entender el códig
o, etc. (

Puedes consultar los eje
mplos en la lección 2 - S
nippet 1-5).  

Truco: Para que recuerd
es mejor qué significa ca
da elemento, las etiqueta
s piensa en los 
acrónimos en inglés:  

h1 = heading1; h2 = hea
ding 2; ...  
p = paragraph  
br = break line  
ul = unordered list  
ol = ordered list  
li = list item  
em = emphasis  

34  
Etiquetas básicas  

El siguiente ejemplo mue
stra una página web que 
combina todas ellas:  

<!DOCTYPE html>  
<!-- TODO: añadir la eti
queta lang -->  
<html>  
<head>  
    <meta charset="UTF-
8">  
    <title>Ejemplo con 
etiquetas básicas</title
>  
</head>  
<body>  
    <h1>Etiquetas HTML</
h1>  
    <p>  
        Este ejemplo muestr
a cómo combinar algunas 
de las etiquetas más bási
cas de HTM  
L5. <br>  
        Recuerda que <str
ong>es importante enten
der la diferencias entre 
ellas</strong>  
.  
    </p>  

    <h2>Etiqueta ul+li</
h2>  
    <p>  
        Si listamos person
as nominadas a los Osc
ars, dado que el orden 
no altera el si  
gnificado, debemos usar <
em>ul</em>. 
    </p>  
    <ul>  
        <li>David Verdag
uer</li>  
        <li>Jesús Castro
</li>  
        <li>Israel Elejal
de</li>  
        <li>Dani Rovira<
/li>  
    </ul>  

    <h2>Etiqueta ol+li</
h2>  
    <p>  
        En el caso de que e
stemos listando element
os donde el orden es imp
ortante, com  
o por ejemplo la clasifica
ción de un mundial de fút
bol, debemos usar <em>o
l</em>.  
    </p>  
    <ol>     
        <li>España</li>  
        <li>Países Bajos
</li>  
        <li>Alemania</li
>  
        <li>Uruguay</li> 
 
    </ol>  
</body>  
</html>  

Esto generaría una pági
na como la siguiente:  

35  
Etiquetas básicas  

Si quieres puedes ver el 
ejemplo en vivo aquí: Le
cción 1 - Snippet 2  

Es importante destacar q
ue aunque el navegador 
le añade un estilo (CSS) 
por defecto a las 
etiquetas, por ejemplo:  

 h1  h2  una fuente mayo
r y negrita  
 strong en negrita  

 ul
 ol  con un margen a l
a izquierda y un punto 
o número respectivam
ente  
 em  en cursiva  

Esto no es responsabilid
ad del HTML, esto lo pod
remos personalizar en u
n futuro con CSS. 
Así que insisto, recuerda 
que HTML sólo sirve pa
ra dotar de estructura y 
semántica al  
contenido.  

Este valor semántico es 
muy importante entre 
otras cosas para por eje
mplo:  

Que los buscadores (que 
no son más que program
as automatizados) pued
an 
"entender" el contenido d
e nuestra página y así p
oder detectar de qué est
amos  
hablando y qué es impo
rtante.  
Para que otras herramie
ntas como por ejemplo lo
s navegadores para invid
entes (p.e.  

36  
Etiquetas básicas  

37  
Ejercicio  

Ejercic
io tipo 
test  

Recuerda que 
puedes repetirl
o tantas veces 
como quieras.  

Dudas  
 
38  
Recursos  

Recurs
os  
Aquí te dejo dos 
tipos de recurso
s. Los avanzado
s míralos sólo si 
ya tenías un con
ocimiento 
previo de progra
mación web (XH
TML, HTML4, et
c) o... si no le tie
nes miedo a nad
a ;D:  

Básicos:  
Chuleta de etiqu
etas HTML5  

Avanzados:  
39  
Chrome DevTools  

Chrome De
vTools  
En esta lección vamos a 
empezar a trabajar con l
as herramientas de Goog
le Chrome para 
desarrolladores (

Como en las lecciones a
nteriores, si crees que ya 
dominas esta materia pu
edes probar a 
hacer el 

Pestañas  
De momento sólo vamos 
a ver 3 grupos de herram
ientas que se encuentra
n organizadas 
por pestañas:  

Red (Network): esta pest
aña nos permite ver los r
ecursos que recupera n
uestro 
navegador usando petici
ones HTTP mientras car
gamos y usamos la pági
na.  

Elementos (Elements): 
nos permite ver y modific
ar el código   que repres
enta la página 
que estamos viendo.  

Fuentes (Sources): nos 
permite navegar por todo
s los ficheros (HTML, CS
S y 
JavaScript) que utiliza la 
página que estamos vien
do.  

La barra de herramientas 
la podemos abrir en cual
quier página que estemo
s viendo. Para 
abrir esta barra podemos 
hacerlo mediante un ataj
o de teclado o mediante 
el menú de  
herramientas del Chrom
e:  

En Windows pulsando: F
2 o Control + Shift + I  
En Mac pulsando: Cmd + 
Opt + I  
Pulsando el botón de 
menú: "Botón de menú" 
-> "Más herramientas" -> 

"Herramientas para des
arrolladores".  
Como podemos ver en la 
siguiente imagen.  

40  
Chrome DevTools  

Una vez hecho esto nos 
aparecerá la barra de he
rramientas:  

La barra podemos ajusta
rla a la derecha, abajo o 
desacoplarla en una nue
va ventana como 
vemos a continuación:  

Vayamos ahora analizan
do las pestañas.  

Aclaraciones:  
41  
Chrome DevTools  

para los más avanzados 
en el curso 

42  
Pestaña network  

Pestaña ne
twork  
Como decíamos, esta p
estaña nos permite ver l
os recursos que solicita 
el navegador de un 
servidor usando peticio
nes HTTP. También no
s permite ver los detalle
s de las mismas: tipo  
del mensaje (GET/POS
T), código de respuesta 
(200, 404, ...), etc  .  

Si abres las DevTools d
espués de haber cargad
o la página, la pestaña "
Network" te saldrá 
vacía, si es así, refresca 
la página y verás como 
te aparece algo parecid
o   a esto:  

Cada fila representa un
a petición HTTP, y si te 
fijas, dejando el cursor 
encima de una 
petición te mostrará la 
URL completa del recur
so y si pulsamos el botó
n derecho tendremos  
varias opciones, entre e
llas la de abrir el recurs
o en una nueva ventana
, eliminar todos los 
ficheros de la memoria 
caché, etc.  

Nota: 
Podemos vaciar la mem
oria caché   de dos form
as distintas, una es puls
ando el icono 
de refrescar con el botó
n derecho y luego "Emp
ty Cache and Hard Relo
ad", y otra es  
pulsando el botón derec
ho sobre cualquiera de l
as peticiones HTTP y p
ulsar "Clear 
browser cache"  

Si haces clic en cualqui
era de las peticiones po
drás ver los contenidos 
del recurso y 
algunos detalles que no 
nos preocuparán en est
e curso.  

43  
Pestaña network  

Para cerrar el detalle de 
la petición puedes pulsa
r en el aspa.  

Además de filtrar las pet
iciones también puedes 
reordenarlas pulsando e
n el título de cada 
campo: Name, Method
, Status, etc.  

Veamos ahora algunas 
  de las cosas que pode
mos hacer en esta pest
aña. Si te fijas, las 
opciones en esta image
n no coinciden exactam
ente con las de la imag
en anterior (y  
posiblemente tampoco 
con las tuyas), esto se d
ebe a que este "pantalla
zo" es de una 
versión anterior del nav
egador (no importa), ve
amos que significan:  
Preserve log: si marca
s esta opción, el efecto 
será justo el contrario, n
unca se  

44  
Pestaña network  

borrarán las peticiones 
HTTP, ni cambiando de 
página ni de dominio (s
e irán añadiendo 
una tras otra).  
Clear records: este bot
ón nos permite limpiar l
a información de las pet
iciones.  
Filter: nos permite filtra
r las peticiones, se busc
arán URLs que conteng
an el texto 
introducido.  
Hide/show filter butto
ns: para ocultar/mostrar 
los botones para filtar.  
Filter buttons: estos b
otones nos permite ver 
sólo las peticiones HTT
P que ha 
recuperado un tipo de r
ecurso. De momento n
o lo usaremos mucho.  
Summary view: podem
os ver cuántas peticione
s HTTP se han necesita
do para cargar 
la página (requests), cu
ando ocupa la suma de 
todos los recursos recu
perados (XXX  
transferred), el tiempo e
xacto que ha tardado en 
descargar los recursos (
ms = 
milisegundos), y en la si
guiente lección veremos 
qué es el DOM y qué si
gnifica el  
DOMContentLoaded.  
No throttling (se ve en 
la imagen anterior): esto 
permite simular que tu c
onexión a 
Intenet es más lenta  . L
o usaremos más adelan
te cuando queramos ver 
si nuestra  
página carga lo suficient
emente rápido usando u
n dispositivo conectado 
por 3G.  

Por último y antes de pa
sar a la siguiente lecció
n, te animo a que dediq
ues un par de 
minutos a jugar con est
a pestaña, y si te surge 
alguna duda... no olvide
s preguntarla en los  

Aclaraciones:  
1. Es la página de  
.
 

45  
Pestaña elements  

Pestaña ele
ments  
La pestaña "Elements" r
epresenta lo que llamare
mos el "

El DOM lo construye el n
avegador a partir del códi
go HTML que recibe tras 
hacer la petición 
HTTP inicial. Además, el 
navegador intenta arregl
ar cualquier error que se 
encuentre en el  
código, por ejemplo: si se 
nos olvida cerrar una etiq
ueta, si anidamos etiquet
as que no son 
anidables, etc. Por ese m
otivo y porque el DOM se 
puede modificar  , este s
e parece pero  
no suele ser exactament
e igual al código HTML re
cibido en la petición HTT
P.  

Además de poder ver el 
DOM, podemos editarlo, 
buscar texto en él y hast
a reordenar las 
etiquetas arrastrándolas 
con el ratón.  

En la siguiente imagen v
emos las diferentes parte
s de esta pestaña:  
Emulador: esta opción 
nos permitirá simular que 
estamos usando un móvil 
o tablet y 
hacer throttling (simular 
otro tipo de conexión) al i
gual que hemos visto en 
la pestaña  
"Network".  
Inspeccionar elemento
s: activando esta opción 
podrás hacer clic sobre c
ualquier 
parte de la página y el in
spector señalará en el D
OM el código que repres
enta el  
elemento seleccionado.  
Menú contextual: pulsa
ndo el botón derecho sob
re el código veremos vari
as opciones:  
Add attribute: permite a
ñadir un atributo, por eje
mplo: charset="UTF-8" (
atajo de 
teclado: Enter).  
Edit as HTML: nos permi
te añadir, editar o quitar c
ualquier cosa (atajo de te
clado: 
F2 tanto en Windows co
mo en Mac)  
Copy: nos permite copia
r el código (outerHTML), 
el selector (ya veremos l
o que 
significa cuando veamos 
CSS), el 

Ocultar elemento: cam
bia la visibilidad a "no visi
ble" usando CSS.  

46  
Pestaña elements  

Delete element: permite 
eliminar el elemento (ataj
o de teclado: Suprimir o 
Borrar).  
:active, :hover, :focus, 
:visited: nos permite ca
mbiar el estado del elem
ento (esto 
lo usaremos en el aparta
do de CSS)  
Scroll into View...: en c
aso de ser necesario se 
hace scroll hasta que se 
muestre 
el elemento.  
Break on...: nos permite 
establecer puntos de par
ada indicando que se de
be 
detener la ejecución de c
ualquier código JavaScri
pt si:  
Se modifica alguno de su
s hijos.  
Se modifica algún atribut
o.  
O si se elimina el código. 
 
Buscar: Nos permite bu
scar cualquier palabra de
ntro del DOM (atajo de te
clado: Ctrl + 
F en Windows ó Cmd + 
F en Mac).  
Jerarquía: nos muestra 
todos los ancestros del e
lemento y nos permite se
leccionarlos.  

Los cambios que hagas s
obre esta pestaña no se 
guardarán ya que no est
amos 
modificando el fichero de 
código   sino el DOM (y y
a hemos visto la diferenci
a), por tanto al  
refrescar la página todos 
los cambios desaparecer
án.  
WindowM
s/Linux
F

Ctrl  Deshacer los 
+ Z   cambios reali
zados  

Abrir DevTools c
Ctrl + Cmd
hift + + on la herramient
  a para "Inspecc
Shift
+ ionar 
elementos" acti
vada por defecto 
 

←, → Navegar por lo
, ↑, ↓ s elementos de
l DOM  

El panel que sale a la der
echa es el del código CS
S que se le ha aplicado a
l elemento 
seleccionado, pero esto 
ya lo veremos más adela
nte.  

Aclaraciones:  
1. Puedes encontrar la d
efinición formal del DOM 
en la 

 
"

47  
Pestaña sources  

Pestaña so
urces  
La pestaña "Sources" 
nos muestra las fuentes 
de contenido que se ha
n utilizado para 
construir la página. Des
de esta pestaña podem
os escribir y modificar fi
cheros que estén  
vinculados a nuestro dis
co duro, pero veremos c
ómo hacer esto en la si
guiente lección.  

Empecemos por descri
bir los distintos paneles: 
 

Sources: aquí encontr
aremos por cada domini
o desde el cual nuestro 
navegador haya 
obtenido recursos   (HT
ML, CSS o JavaScript) 
una jerarquía de fichero
s. Haciendo clic  
en cualquiera de ellos s
e abrirá el código en un 
panel derecho.  
(

 
Panel de co
ntenido  
 

48  
Pestaña sources  

Es importante saber qu
e: a diferencia de los ca
mbios del DOM, en la p
estaña "Elements" 
para poder ver los cam
bios reflejados en la pá
gina que estamos viend
o es necesario  
guardar los cambios y 
refrescar la página.  

En cuanto a los atajos 
me gustaría destacar ci
nco que usaremos con 
mucha frecuencia:  

Windo M F
ws/Lin
ux  
Buscar (y adi
Ct cionalmente r
rl  eemplazar) t

exto dentro 
F  
de un fichero 
 

Ctrl  C Guardar 
+ S   m un ficher
d o  
+
S

Ctrl + Cm Refrescar 
R, F5 d  la página  

Ctrl  Buscar fich
+ P  eros por n
  ombre  

Ctrl + CmdAcceder direc
+ :num +  tamente a un 
  +  número de lín
:nu ea  
m

Por último, la opción "Pr
ety print" veremos que 
es especialmente útil cu
ando estemos 
depurando  

Recursos y aclaracione
s:  
1. Normalmente median
te peticiones HTTP aun
que puede que también 
mediante las 
extensiones de Chrome
.  
2. En este repositorio d
e Github podrás encontr
ar una 
49  
Configuración  

Configur
ación  
Ahora vamos a ver c
ómo podemos config
urar Google Chrome 
para poder modificar 
ficheros 
que se encuentren e
n nuestro disco duro. 
 

Para hacer esto usar
emos los "Workspa
ces", estos nos per
mitirán realizar camb
ios 
 en nuestro código si
n tener que ejecutar 
otro editor de código. 
 

Para ello vamos a se
guir los siguientes pa
sos:  

1.  Creamos una car
peta (de prueba) en 
nuestro disco duro (p
or ejemplo "html").  
2.  Creamos un fiche
ro vacío dentro de la 
carpeta llamado: "in
dex.html" 
3.  Abrimos el fichero 
con Google Chrome  
4.  Abrimos las DevT
ools y nos vamos a l
a pestaña "Sources
"  
5.  Hacemos clic en 
el panel izquierdo so
bre la ruta del directo
rio y seleccionamos "
Add 
Folder to Works
pace": 
6.  Y por último pulsa
mos "Allow" para au
torizar a DevTools a 
realizar cambios 
persistentes en el 
disco duro: 

Nota:  
Si nos equivocamos 
al añadir un directori
o al Workspace podr
emos eliminarlo 
simplemente pulsand
o con el botón derec
ho sobre el directorio 
y seleccionando la  
opción "Remove Fol
der from Workspac
e".  

Ahora tenemos que "
mapear" (vincular) el 
recurso que ha obten
ido el navegador con 
el 
fichero del disco dur
o que queremos mod
ificar (osea, con él mi
smo), para ello:  

1.  Hacemos clic con 
el botón derecho sob
re el nombre del fich
ero (index.html que 
cuelga 
de "file://")  

50  
Configuración  

2.  Elegimos la opció
n "Map to File Syste
m Resource": 

3.  Seleccionamos el 
fichero dentro del es
pacio de trabajo (Wo
rkspace). 
4.  Y refrescamos la 
página.  

Y ya estamos listos 
para empezar a prog
ramar usando las Ch
rome DevTools.  

También puedes con
sultar las 

Gestión de 
ficheros  
Una vez hecho todo 
esto podemos añadir 
y eliminar ficheros dir
ectamente desde De
vTools:  

1.  Añadir ficheros: p
ulsando con el botón 
derecho sobre la car
peta y seleccionando 
"New 
File".  
2.  Eliminar ficheros: 
pulsando con el botó
n derecho y seleccio
nando "Delete"  
Sin embargo no pod
emos crear y elimina
r directorios, esto lo t
endremos que hacer 
directamente desde l
a carpeta que hemos 
creado en nuestro di
sco duro.  

Aclaraciones:  
1. A pesar de que no 
vamos a usar aún un 
servidor web, lo llam
aremos así para ir 
acostumbrándonos a 
este nombre. Por def
ecto los servidores w
eb cuando reciben la 
 
petición de un recurs
o y no se indica explí
citamente el nombre 
del recurso, busca e
n la 
carpeta un fichero co
n nombre "index.html
", y lo devuelve en c
aso de encontrarlo.  

51  
Ejercicio  

Ejercic
io  

Una vez más, r
ecuerda que pu
edes repetirlo t
antas veces co
mo quieras.  

El ejercicio prá
ctico es muy si
mple, tan sólo c
onsiste en aña
dir el código qu
e hemos visto e

el capítulo "HT
ML5: Primeros 
pasos > Etiqu
etas básicas" (
lo puedes enco
ntrar al final de  
esta lección) al 
fichero index.h
tml que hemos 
creado.  

Luego quiero q
ue te familiaric
es un poco con 
las pestañas q
ue hemos visto 
e intentes:  

Usar los atajos 
de teclado en l
a pestaña "So
urces".  
Buscar la petici
ón HTTP que s
e envía al carg
ar la página en 
"Network".  
Editar el código 
en la pestaña "
Elements":  
Modifica el cont
enido y el HTM
L de la etiqueta 
h1  
Elimina una eti
queta  
Reordena otra 
etiqueta  
Haz una búsqu
eda y encuentr
a por ejemplo: 
Rovira  
Haz clic en la je
rarquía para ac
ceder al eleme
nto "ul".  
Ejecuta el emul
ador y activa la 
opción de Appl
e iPhone 5.  

52  
Ejercicio  

<!DOCTYPE html>  
<!-- TODO: añ
adir la etiqueta 
lang -->  
<html>  
<head>  
    <meta chars
et="UTF-8">  
    <title>Eje
mplo con etique
tas básicas</tit
le>  
</head>  
<body>  
    <h1>Etiqueta
s HTML</h1>  
    <p>  
        Este ejemp
lo muestra cóm
o combinar algu
nas de las etiqu
etas más básica
s de HTM  
L5. <br>  
        Recuerda 
que <strong>es 
importante ent
ender la difere
ncias entre ella
s</strong>  
.  
    </p>  

    <h2>Etique
ta ul+li</h2>  
    <p>  
        Si listamo
s personas no
minadas a los 
Oscars, dado q
ue el orden no 
altera el si  
gnificado, debe
mos usar <em>u
l</em>. 
    </p>  
    <ul>  
        <li>Da
vid Verdaguer</
li>  
        <li>Jes
ús Castro</li>  
        <li>Isr
ael Elejalde</l
i>  
        <li>Da
ni Rovira</li>  
    </ul>  

    <h2>Etique
ta ol+li</h2>  
    <p>  
        En el caso 
de que estemo
s listando elem
entos donde el 
orden es import
ante, com  
o por ejemplo l
a clasificación 
de un mundial 
de fútbol, debe
mos usar <em>o
l</em>.  
    </p>  
    <ol>     
        <li>Esp
aña</li>  
        <li>Paí
ses Bajos</li>  
        <li>Ale
mania</li>  
        <li>Uru
guay</li>  
    </ol>  
</body>  
</html>  

Dudas  
 

53  
Ejercicio  

54  
Recursos  

Recurs
os  
Definiciones que 
hemos visto:  

Recursos sobre 
Chrome y las D
evTools:  

  

Si es tu primera 
vez con DevTo
ols no  te lo  re
comiendo, per
o si quieres, pue
des encontrar 
más información 
sobre cómo sac
arle más provec
ho a Google Chr
ome en los sigui
entes  
cursos:  
55  
HTML5: Mi Curriculum Vitae  

HTML5: Mi Curri
culum Vitae  
En este capítulo vamos a aprender t
odo lo necesario para crear el códig
o HTML de una 
página con nuestro CV, y en el sigui
ente aprenderemos cómo podemos 
subir nuestro  
curriculum a un repositorio de Githu
b y a ponerlo accesible para cualqui
er persona usando 
gh-pages.  
56  
HTML5: Mi Curriculum Vitae  

Así que vamos a empezar por ver lo
s elementos HTML que nos faltan p
or aprender para 
poder llegar a hacerla.  
57  
Etiquetas - Parte 2  

Etiquetas - 
Parte 2  
Ahora vamos a ver las eti
quetas básicas para traba
jar con: enlaces o hiperví
nculos, 
imágenes, tablas, formula
rios, separadores y otras 
consideraciones.  

Esta vez tampoco veremo
s todos los atributos posib
les aunque añadiré enlac
es a la 
documentación:  

Enlaces o hi
pervínculos  
Una de las características 
más destacables de HTM
L es la posibilidad de enla
zar unas 
páginas con otras, para h
acer esto utilizamos el ele
mento "

<a href=

Hay 3 tipos de enlaces:  

Absoluto: es un enlace q
ue incluye todas las parte
s de una URL como vimo
s en el 
capítulo 1: 
 scheme:[//
[user:password@]host[:p
ort]][/]path[?query]
[#fragment] 

Relativo: hace referencia 
a un recurso que se encu
entra en una posición rela
tiva a 
nuestra URL, así podemo
s establecer rutas relativa
s, por ejemplo:  

<a href="img/imagen1.jpg">
enlace a una imagen</a>  

Donde indicamos que si p
or ejemplo la URL actual 
es 

<a href="../img/imagen1.j
pg">enlace a una imagen</
a>  

Que hará referencia a la s
iguiente URL: 

Ancla (o anchor): a difer
encia de los dos anteriore
s, este enlace se utilizar p
ara indicar 
un elemento dentro de la 
misma página que estam
os viendo. Para ello tene
mos que  
explicar un nuevo tipo de 
atributo que tienen todos l
os elementos en HTML, el 

58  
Etiquetas - Parte 2  

(unique identifier), como 
su nombre indica es un id
entificador único y por tan
to no 
podemos ponerle a dos el
ementos HTML el mismo i
d. Luego para añadir un  
hipervínculo a este eleme
nto sólo tenemos que est
ablecer el atributo href de
l enlace al 
id del elemento precedid
o de una almohadilla (#), 
por ejemplo:  

<a href="#leccion1">Lecció
n 3</a>  
...  
<!-- aquí vendría todo el 
contenido -->  
<h2 id="leccion1">Lección 
3</h2>  

Esto estamos acostumbra
do a verlo en la Wikipedia
, por ejemplo: 

Ver: Lección 2 - Snippet 6 
 

Imágenes  
Para mostrar una imagen 
en una página tenemos d
os formas de hacerlo, una 
es usando el 
elemento 

Esta etiqueta sólo requier
e de dos atributos obligat
orios que son: src (de so
urce) y el otro 
es alt (de alternative), po
r ejemplo:  

<img src= 
de HTML5">  
Como podemos deducir d
el código anterior, el atrib
uto src lo usaremos para 
indicar la URL 
(absoluta o relativa) a la i
magen, y alt como el text
o (alternativo) que mostra
rá el navegador  
en caso de no encontrar l
a imagen  .  

Ver: Lección 2 - Snippet 7 
 

Tablas  
Podemos crear tablas en 
HTML usando el element

59  
Etiquetas - Parte 2  

<table>  
    <tr>  
        <td>Fila 1, colum
na 1</td>  
        <td>Fila 1, colum
na 2</td>  
    </tr>  
    <tr>  
        <td>Fila 2, colum
na 1</td>  
        <td>Fila 2, colum
na 2</td>  
    </tr>  
</table>  

Que daría un resultado c
omo el siguiente:  

F F
il il
a  a 
1 1
,  , 
c c
o ol
l u
u m
m n
n a 
a  2 
1   
 

F F
il il
a  a 
2 2
,  , 
c c
o ol
l u
u m
m n
n a 
a  2 
1   
 

Como podemos comproba
r las columnas (td) siempr
e van contenidas dentro d
e las filas 
(tr). En caso de querer ag
rupar celdas de una mism
a fila o columna lo harem
os así:  
Misma fila: la usaremos el 
atributo colspan (column 
span = número celdas a 
abarcar)  
Agrupar dos celdas de un
a misma columna usarem
os el atributo rowspan (r
ow span = 
número de celdas a abar
car)  

Por ejemplo:  

<table>  
    <tr>  
        <td>Fila 1, colum
na 1</td>  
        <td colspan="3"> F
ila 1, columnas 2, 3 y 4</
td>  
    </tr>  
    <tr>  
        <td rowspan="2">Fi
la 2, columna 1 + Fila 3, c
olumna 1</td>  
        <td>Fila 2 column
a 2</td>  
        <td>Fila 2 column
a 3</td>  
        <td>Fila 2 column
a 4</td>  
    </tr>  
    <tr>  
        <td>Fila 3 column
a 2</td>  
        <td>Fila 3 column
a 3</td>  
        <td>Fila 3 column
a 4</td>  
    </tr>  
</table>  

Quedando algo como est
o:  

60  
Etiquetas - Parte 2  

Como podemos ver el atri
buto afecta a las celdas d
e las siguientes columnas
/filas y el valor 
indica cuántas celdas deb
e abarcar.  

Ver: Lección 2 - Snippet 8 
 

Formularios  
Vamos a hablar muy brev
emente de los formularios
, algunos de los elemento
s y de sus 
propiedades:  

action: indica la URL a la 
que se enviará la petición 
HTTP con toda la informa
ción 
del formulario  
method: indica si la petic
ión HTTP será GET o PO
ST  

type (obligatorio): este va
lor puede tener 

id: este atributo es obligat
orio si en el elemento lab
el tiene un atributo for, e
n tal 
caso deberá contener un i
dentificador único   en la 
página.  
name: este atributo es op
cional y representa el no
mbre asignado al campo 
cuando 
se envíe la petición HTTP
.  
value: este valor es opcio
nal pero representa el val
or que se asignará al cam
po 
cuando se envíe la petició
n HTTP.  

id: igual que el elemento i
nput  
name: igual que el campo 
input  

value: igual que el atribut
o value del campo input. 
 

61  
Etiquetas - Parte 2  

etc.  
id: igual que el elemento i
nput y select.  
name: igual que el campo 
input y select.  

for: tiene que tener el mis
mo valor que el atributo id 
del campo (input, select o 
textarea) al que hace refe
rencia la etiqueta.  

type: define el comporta
miento del botón cuando 
está activado y puede con
tener 

Existen muchos otros atri
butos que no veremos da
do que no les daremos us
o en este curso 
ya que para sacarle el má
ximo provecho sería nece
sario tener conocimientos 
en  
programación.  

Por último añadir que el el
emento input no requiere 
una etiqueta de cierre (o l
o que es lo 
mismo, que está autocon
tenido).  

Aquí tenemos un ejemplo 
de formulario:  

<form action="miScript.php
" method="GET">  
    <label for="to">Para:
</label>  
    <input id="to" type="e
mail">  

    <label for="topic">Te
mática: </label>  
    <select id="topic" nam
e="topic">  
      <option>-- Elige un t
ema --</option>  
      <option value="prop
osal">Propuesta</option>  
      <option value="repo
rt">Reporte</option>  
      <option value="othe
r">Otro</option>  
    </select>  

    <label for="subject">
Asunto: </label>  
    <input id="subject" na
me="subject" type="text"
>  

    <label for="body">Cue
rpo:</label>  
    <textarea id="body" na
me="body"></textarea>  

    <button type="submit"
>Enviar</button>  
</form>  

Que nos dará como result
ado algo así:  

62  
Etiquetas - Parte 2  

Como ves los estilos por 
defecto serán muy poco a
tractivos, pero no te preoc
upes, ya 
aprenderemos a solucion
ar esto usando CSS.  

Por último comentar que 
en muchos de los eleme
ntos   podemos añadir (o
pcionalmente) 
otros atributos como:  

required a un elemento p
ara que el navegador se e
ncargue de validar que es
te campo 
está relleno  
readonly si queremos qu
e sea de sólo lectura  
placeholder si queremo
s que aparezca un texto d
e ayuda para rellenar el c
ampo  
value para introducir un v
alor por defecto en el cam
po  

Por ejemplo:  

<label for="to">Para:</la
bel>  
<input id="to" type="emai
l" placeholder=

<label for="subject">Asu
nto: </label>  
<input id="subject" type=
"text" value="Formulario 
de contacto" readonly>  

Ver: Lección 2 - Snippet 9 
 

Separadores  
Existe un elemento que n
os permite añadir un sepa
rador (una línea horizontal
), este 
elemento es hr.  
Ver: Lección 2 - Snippet 1
0  

Otras consid
eraciones  
Para terminar este capítul
o hay una última cosa que 
me gustaría comentar:  

En HTML se ignoran todo
s los espacios a partir del 
primero, por lo tanto nunc

podremos (ni se debe) ali
near usando espacios.  
Las entidades HTML (HT
ML  entities) se usan para 
pintar palabras, caractere
s o 
símbolos reservados o qu
e puede que no tengas en 
tu teclado como por ejem
plo: <, >,  
©, &, €, etc. 
Existen 

Para representar la entida
des HTML se usa el sigui
ente formato:  

63  
Etiquetas - Parte 2  

&código_de_la_entidad;  

Veamos un ejemplo para 
entender mejor por qué e
xisten las entidades HTM
L y cómo se 
usan.  

Imaginemos que estamos 
escribiendo un libro como 
este y necesitamos hablar 
sobre la 
etiqueta 

<p>La etiqueta <hr> se u
tiliza para ...</p>  

En este caso cuando el na
vegador esté intepretando 
el código HTML encontrar
á "<hr>" y 
en lugar de mostrar la cad
ena de texto (que es lo qu
e queremos) nos mostrar
á un  
separador horizontal.  

Para evitar este problema 
usaríamos el siguiente có
gido HTML:  

<p>La etiqueta &lt;hr&gt
; se utiliza para ...</p>  

En este caso hemos modi
ficado el símbolo "menor 
que" (Lower Than) por la 
entidad HTML 
lt y "mayor que" (Greater 
Than) por gt, así el naveg
ador podrá representarlo 
sin ningún  
problema.  

En alguna ocasión puede 
que navegues por una pá
gina con una codificación 
(encoding) 
que no soporte los acento
s agudos (á, é, í, ó, ú), en 
ese caso usarán las entid
ades HTML  
(  

Aclaraciones:  

1.  Puede que no se encu
entre la imagen porque al
guien la borre del servidor 
o porque 
nos equivoquemos al i
ntroducir la URL.  
2.  Las tablas sólo deben 
usarse para mostrar datos 
que tengan sentido en un
a tabla y 
nunca para maquetar. 
 
3.  Con esto nos referimo
s a un nombre (o cadena 
de texto) que no contenga 
ningún otro 
elemento, por ejemplo 
no puede haber dos elem
entos con id="email".  
4.  En la documentación d
el W3C podemos ver qué 
atributos admite cada ele
mento: 
 

64  
Etiquetas - Parte 2  

65  
Anidación - Parte 2  

Anidación - 
Parte 2  
En el primer capítulo de H
TML vimos que las etiquet
as se pueden anidar, pero 
comentamos 
que no todas las etiquetas 
son anidables entre sí, por 
ejemplo esto sería incorr
ecto:  

<body>  
    <head></head>  
</body>  

Ya que una etiqueta body 
no puede contener a otra 
head, pero... ¿cómo pode
mos saber 
qué etiquetas son anidabl
es?.  

Con la práctica aprenderá 
algunas anidaciones que e
stán prohibidas y desarroll
arás una 
capacidad de razonar algu
nas anidaciones obvias, p
ero al principio podrás ser
virte de tres  
recursos principalmente:  

La pestaña Elements del 
navegador. Como decíam
os el navegador es un pro
grama 
bastante complejo, y entre 
otras cosas que se encarg
a es de construir el DOM. 
Si  
durante el proceso de con
strucción del DOM el nave
gador se encuentra una a
nidación 
incorrecta intentará resolv
erla. Por eso si inspeccion
amos el DOM de nuestra 
página,  
podremos ver si el propio 
navegador ha encontrado 
etiquetas mal anidadas y n
os ha 
modificado el código.  
El validador de código del 
W3C que veremos cómo 
usar en el siguiente aparta
do.  
Pero nuestro principal rec
urso debe ser 

Usar la espec
ificación del 
W3C  
En la descripción de todo 
elemento HTML nos enco
ntraremos un apartado qu
e se llama 

Por ejemplo el elemento "
"

66  
Anidación - Parte 2  

Sin embargo si vas a la es
pecificación del elemento "
"

Esta es la mejor forma de 
saber qué etiquetas son a
nidables y cuales no.  
67  
Validación y accesibilidad  

Validación  
Que el código se muestre en nue
stro navegador web como quería
mos no implica 
necesariamente que lo hayamos 
escrito bien. En muchas ocasion
es el navegador es capaz  
de detectar errores humanos y c
orregirlos de manera automática 
para que el usuario vea 
bien la página, pero esto no es si
empre así. Si queremos asegura
rnos de que nuestra  
página está correctamente escrit
a podemos usar 

Si abres el enlace verás que tien
es 3 formas de validar código:  

1.  Validate URI: que te permite i
ntroducir la URL de una página p
ara comprobar su 
código. Como nosotros aún n
o hemos alojado nuestra página 
en ningún servidor web  
no usaremos esta opción (aú
n).  
2.  Validate by File Upload: que 
nos permite subir un fichero HTM
L  
3.  Validate by Direct Input: qu
e nos permite introducir el códig
o dentro de un elemento 
textarea.  

Usaremos las opciones 2 y 3 has
ta que en la siguiente lección apr
endamos cómo alojar 
nuestra página en un servidor w
eb accesible desde Internet.  

Aunque el naegador sea capaz d
e solucionar algunos de nuestros 
errores, es importante 
crear código válido porque:  
Aunque el navegador sea capaz 
de resolver un problema, no todo
s los navegadores 
son iguales, y por tanto puede qu
e algunos no lo resuelvan o la so
lución que aplique  
provoque un efecto no deseado. 
 
Hace tu página más accesible co
mo veremos a continuación.  

Accesibilidad  
Vamos a ver este apartado muy 
por encima, pero no quería dejarl
o completamente de lado.  

Existe una iniciativa que tiene co
mo objetivo hacer la web más ac
cesible, especialmente 
para personas cualquier tipo de 
discapacidad: visual (completa o 
parcial), auditiva,  
cognitiva, etc. Esta iniciativa se ll
ama: Web Accessibility Initiativ
e - Accessible Rich 

68  
Validación y accesibilidad  

Cualquiera puede aplicar alguna
s prácticas de accesibilidad con 
poco esfuerzo, como por 
ejemplo usar los   
 
  

Si hablas inglés te recomiendo v
er 

Por último, si estos argumento n
o son suficientes, me gustaría añ
adir que haciendo una 
página accesible hacemos que e
sta esté mejor posicionada por lo
s buscadores, dado que a  
las arañas   de los motores de bú
squeda a fin de cuentas tienen u
na forma de navegar   por 
nuestra página igual que las per
sonas con problemas de accesib
ilidad.  

Aclaraciones:  
1. Pequeño vídeo explicativo en 
inglés sobre .  
  

 
69  
Convenciones  

Convenci
ones  
Antes de terminar me 
gustaría explicarte al
gunas de las principal
es convenciones o bu
enas 
prácticas que debere
mos de tener en cuen
ta a la hora de escribi
r código HTML:  

Los nombres de los e
lementos HTML y sus 
atributos se deben es
cribir en minúsculas  

<!-- MAL -->  
<p>  
  <IMG SRC="html5.gif
" ALT="Logo HTML5">  
</p>  
<!-- BIEN -->  
<p>  
  <img src="html5.gif
" alt="Logo HTML5">  
</p>  

Los valores de los atr
ibutos en HTML debe
n ir entre comillas do
bles:  

<!-- MAL -->  
<img src='html5.gif' 
alt='Logo HTML5'>  
<!-- BIEN -->  
<img src="html5.gif" 
alt="Logo HTML5">  

La indentación se de
be hacer con 2 espac
ios (prácticamente to
dos los editores de 
código permite config
urar este valor).  

<p>  
  <img src="html5.gif
" alt="Logo HTML5">  
</p>  

No introducir espacio
s antes o después de
l signo "igual":  

<!-- MAL -->  
<img src = "html5.gif" 
alt = "Logo HTML5">  
<!-- BIEN -->  
<img src="html5.gif" 
alt="Logo HTML5">  

Usar UTF-8 como en
coding.  
No cerrar eleme
 <br>
 <br/> 
ntos autoconteni
lugar
dos, por ejempl
o usa 
 style  lo veremos en 
el siguiente apartado
)  
Evita el uso de  <  y  
ades HTML siempre
que sea posible
vo por ejemplo 
 & )  

70  
Convenciones  

<!-- MAL -->  
<h1>P&áacute;gina sob
re &lt; HTML5 &amp; C
SS3</h1>  
<!-- BIEN -->  
<h1>Página sobre &lt; H
TML5 &amp; CSS3</h1
>  

Especifica el atributo 
lang en el elemento 
html:  

<html lang="es">  

Especifica siempre el 
atributo for cuando a
ñadas un elemento l
abel  

<label for="field-
email">email</label> 
 
<input type="email" i
d="field-email" name
="email" value="" />  

Internet Explore sopo
rta el uso de una etiq
ueta de compatibilida
d meta indicando có
mo 
tratar el código, usar 
siempre que se pued
a:  

<meta http-equiv="X-
UA-Compatible" conte
nt="IE=Edge">  

Esta recopilación ha 
sido extraída de algu
nas guías de estilo.  

  

Otras conv
enciones  
Nombres de f
icheros  
Es recomendable se
guir las siguientes co
nvenciones:  

Establecer los nombr
es de los ficheros en 
minúsculas, Window
s no hace distinción 
entre mayúsculas y 
minúsculas pero otro
s sistemas sí, y esto 
puede provocar que 
una  
ruta funcione en un si
stema operativo pero 
no en otro. Por ejemp
lo si tenemos un 
fichero llamado Logo
_HTML5.jpg y una p
ágina que hace refer
encia a él con 
src="logo_html5.jpg" al
t="Logo HTML5"> . Es
to funcionará en Win
dows pero en un 
sistema basado en U
nix (Linux o Mac) no f
uncionará.  
Dale un nombre que r
epresente lo que cont
iene, esto no sólo por 
usabilidad sino por 
posicionamiento (SE
O  )  
En lugar de espacio u
sa un guión "-".  
Nunca uses acentos 
ni caracteres especial
es: ñ, ",", etc.  

71  
Convenciones  

Extensiones 
de ficheros  
Es recomendable qu
e cada tipo de fichero 
tenga una extensión:  

HTML: ".html"  
JPEG: ".jpg"  
GIF: ".gif"  
PNG: ".png"  

Estructura de 
directorios  
Conforme crezca tu p
royecto agradecerás t
ener una estructura l
ógica que te ayude a 
organizar todos los fi
cheros. Basándome 
en 

resources/  
    css/  
        main.css  
    images/  
        logo-
html5.jpg  
    js/  
vendors/  
    jquery/  
        jquery.min.js 
 
index.html  

Donde:  

resources: es un dir
ectorio que incluye lo
s elementos que tú 
has creado y que 
contiene tantos direct
orios como tipos de r
ecursos (css -> estilo
s, images -> imágen
es,  
js -> JavaScript).  
vendors: para alma
cenar recursos cread
os por terceros  
Y en el fichero raíz c
olocar los ficheros H
TML que necesites.  

Aclaraciones:  
1. SEO es el acrónim
o de Search Engine 
Optimization, o lo que 
viene a ser lo mismo: 

72  
Convenciones  

3. No todos los proye
ctos se deben organi
zar igual, en muchas 
ocasiones dependerá 
de las 
tecnologías que esté
s usando, pero para 
este curso esta estru
ctura será suficiente
mente  
buena.  
73  
Errores frecuentes  

Errores frec
uentes  
Este es un listado de algu
no de los errores más frec
uentes en HTML:  

No poner el encoding UT
F-8 hará que algunos car
acteres se muestren de m
anera 
extraña  
Poner dos identificadores 
iguales (suele pasar al co
piar y pegar código). Esto 
nos dará 
problemas de validación y 
al intentar acceder al ele
mento usando JavaScript  
Introducir & en las URLs; 
en su lugar se debe usar 
&  
Anidamiento incorrecto, y
a sea por no cerrar tags e
n el orden correcto como 
por anidar 
elementos de bloque en e
lementos en linea, por eje
mplo: 
</a> 

Utilizar los elementos 
Usar múltiples 
consecutivamente en lug
ar de usar estilos  

Estos son sólo algunos er
rores frecuentes, pero en 
ningún libro, manual, tutor
ial o curso 
encontrarás todos los erro
res que te pueden sucede
r, por eso es importante q
ue aprendas a  
buscar las soluciones a lo
s problemas que te vayan 
surgiendo, mis consejos:  
Lee atentamente el erro
r  
Usa Google para buscar t
u error (a ser posible bus
ca en inglés)  
Intenta reducir la frase a l
as palabras clave como el 
lenguaje, el número de er
ror, ...  

Cuando encuentres algun
a página donde parezca h
aber una respuesta, fíjate 
en:  

Que la fecha de la respue
sta sea relativamente nue
va (no más de 2 años)  
Busca en la documentaci
ón oficial  
Si estás en Stackoverflow 
revisa el número de valor
aciones positivas de la re
spuesta  

Fíjate en la siguiente ani
mación:  

74  
Errores frecuentes  

Aquí se sigue el proceso r
ecomendado salvo que s
e ha seleccionado una re
spuesta que 
tiene una sola valoración. 
 

Cómo pedir 
ayuda  
Lo más normal es que cu
alquier error que te ocurra 
cuando estés empezando 
ya lo haya 
preguntado otra persona, 
insiste en la búsqueda y s
i después de un buen rato 
(~30min) no  
encuentras el error pregu
nta en cualquier foro y co
menta lo que te ocurre (e
n inglés), pero 
unos consejos:  

Especifica que ya has bus
cado antes el error  
Explica cómo lo has busc
ado (por si te pueden da
r algún consejo para mej
orar tu forma 
de buscar)  
Y finalmente haz la pregu
nta dando el máximo núm
ero de detalles  

Es importante que cuand
o preguntes algo el resto 
vea que te has molestado 
en investigar 
previamente y también qu
e te esfuerzas en explicar 
lo que te pasa, sino es pr
obable que  
alguien te de una mala re
spuesta porque piense qu
e no te has molestado en 
solucionar el 
problema por ti mismo.  

75  
Ejercicio  

Ejercic
io  
76  
Recursos  

Recurs
os  

Mozilla CDN  
77  
Git & Github  

Github  
En esta lección va
mos a aprender a u
sar Github, una de 
esas herramientas 
que no conoces 
hasta que alguien t
e habla maravillas 
de ella, y cuando l
a entiendes se co
nvierte en una  
herramienta sin la 
que no puedes vi
vir.  

Para que te hagas 
una idea rápida,  e
s un 

Por tanto con Git s
e acabó el tener m
últiples copias de u
na carpeta "por seg
uridad", es una 
forma mucho más 
cómoda de evoluci
onar el código.  

Vamos a empezar 
a crear una cuenta 
y te iré explicando l
os conceptos que t
e van a hacer 
falta entender para 
este curso sobre la 
marcha.  

Aclaraciones:  
1. 
 

78  
Configurar nuestra cuenta  

Configurar nue
stra cuenta  
Vamos a empezar por crear una 
cuenta en Github.  

Primero vamos a la 

Nota: El username definirá la UR
L de nuestra cuenta: 
79  
Configurar nuestra cuenta  

A continuación elegimos el plan g
ratuito:  

80  
Configurar nuestra cuenta  

Ahora vamos a crear un nuevo re
positorio. Crearemos un reposito
rio para cada proyecto 
que vayamos a crear, para que n
os hagamos una idea tendremos 
un repositorio por cada  
carpeta raíz que tengamos en nu
estros disco duro.  

A este repositorio le daremos un 
nombre que Github tratará de ma
nera especial  , el nombre 
debe ser: username.github.io, e
n mi caso raulEsri.github.io.  

Luego puedes ponerle una descri
pción del contenido del proyecto, 
por ejemplo: Mi página 
personal en  Github. Y selecciona
mos que será un proyecto público 
(el código será accesible  
por cualquier persona).  
81  
Configurar nuestra cuenta  

Y ya está, ¡enhorabuena!, ya tien
es una cuenta en Github. Cualqui
er persona podrá ver 
todos tus repositorios públicos en

 

Aclaraciones:  
1. El código que tengamos en est
e repositorio nos los servirá usan
do un servidor HTTP a 
través del dominio 
  
82  
Enviar y recibir cambios  

Enviar y recibi
r cambios  

Instalar y config
urar Github Des
ktop  
Vamos a empezar por descarg
ar, instalar y configurar 

Una vez descargado e instalad
o lo abrimos y nos identificamo
s con nuestra cuenta.  

Una vez hecho volvemos a la o
pción de clonar y seleccionamo
s el repositorio que 
acabamos de crear.  

Esto nos pedirá que selecciona
mos una carpeta en nuestro dis
co duro donde se va a clonar 
el repositorio (se creará una ca
rpeta nueva en nuestro disco d
uro lista para controlar los  
cambios). La seleccionamos y l
e damos a "OK".  

Una vez clonada el repositorio 
vamos a ver una forma básica 
de usarlo.  

Enviar y recibir 
cambios  
83  
Enviar y recibir cambios  

Pendiente  

Ver el histórico 
de cambios  
Pendiente  

Aclaraciones:  
1. Mi recomendación es que h
agas el curso gratuito 
84  
Funcionalidades  

Funcionali
dades  
Issues, readme, etc.  
85  
Publicar una web en Github  

Publicar una we
b en Github  
86  
Colaborar con un proyecto  

Colaborar con 
un proyecto  
fork, pull request, issues  
87  
Ejercicio  

WIP (W
ork In 
Progre
ss)  
Esta sección a
ún está pendie
nte de escribir  
88  
CSS: Primeros pasos  

CSS: Primero 
pasos  
CSS es el acrónimo de Casc
ading Style Sheet; este tamb
ién un 

En este capítulo vamos a ap
render:  

Qué es CSS y cómo lo pode
mos usar para aplicar estilos 
 
Qué estilos podemos aplicar 
a cada elemento HTML  
Cómo combinar HTML y CS
S  
Cómo funciona la herencia d
e estilos  
89  
Introducción a CSS  

Introducció
n a CSS  
Por si aún no lo sabes, me 
gustaría empezar comentá
ndote que a los profesional
es que 
diseñan páginas usando H
TML y CSS se les suele lla
mar maquetadores web. 
Si a un  
maquetador web le añadi
mos conocimientos en pro
gramación con JavaScript 
ya podemos 
hablar de un front-end de
veloper.  

Antes de empezar a habla
r de código me gustaría ex
plicarte dos aspectos muy 
importantes 
que venimos sufriendo hist
óricamente los que nos de
dicamos a esto y sitiéndolo 
mucho, tú  
tampoco te vas a escapar. 
 

Inconsistenci
a de estilos  
No sé si te has dado cuent
a, pero aunque tú aún no h
ayas escrito aún ninguna lí
nea de 
CSS, la página que has cr
eado ya contenía algunos 
estilos, los estilos por defe
cto que  
incluye el navegador.  

Es muy importante que s
iempre tengas en cuenta 
que cada navegador incl
uye estilos 
propios por defecto que 
aplica a los distintos elem
entos HTML, por ejemplo:  

 <p>  tiene
n estilos para que se prod
uzca un salto entre el párr
afo y los 
elementos anterior y poste
rior. (pero la distancia  pu
ede  variar  entre  navegad
ores  

El eleme
 <strong>  para que s
nto  e muestre en negrita.  

 <li>  para 
que aparezca un punto a l
a izquierda y una ligera 
indentación. (pero el marg
en  puede variar)  

 
<h2> , etc para que se mue
stren de un tamaño mayor 
que el 
del resto (pero los  tamaño
s pueden variar).  

Etc  

Esto sucede en todos los n
avegadores, el problema c
omo vemos es que no tod
os definen 
los estilos exactamente de 
la misma manera y si no ti
enes esto en cuenta desde 
el principio  
lo vas a sufrir en el futuro.  

Aunque lo lógico sería que 
todos los navegadores se 
pusiesen de acuerdo en d
efinir unos 
estilos por defectos comun
es, ya hemos asumido que 
esto no va a pasar nunca, 
por este  
motivo quiero presentarte 
  
90  
Introducción a CSS  

uniformizar los estilos en t
odos los navegadores, lo q
ue nos ayudará a que el re
sultado final 
después de aplicar nuestr
os estilos sean el mismo i
ndependientemente del na
vegador  
desde la que la abramos.  

Soporte a est
ándares  
Por otro lado quería come
ntarte que vamos a empez
ar centrándonos en las pro
piedades de 
CSS3 que vienen heredad
as de la 

¿Por qué?, la versión resu
mida es: qué por evitarte q
uebraderos de cabeza inici
ales. La 
versión extendida la he dej
ado como un "

Mi primer CS
S  
Hay múltiples formas de a
ñadir CSS a nuestra págin
a, una forma es utilizando 
el elemento  
 <style>  dentro de nuesto 
HTML, por ejemplo:  

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8"> 
 
    <title>Mi primer CSS<
/title>  
    <!-- Aquí definimos los 
estilo CSS para esta pági
na -->  
    <style>  
      h1{  
        color: red;  
      }  
    </style>  
    <!-- Fin del CSS -->  
</head>  
<body>  
    <h1>Encabezado 1</h1>  
</body>  
</html>  

De este modo estamos le i
ndicamos al navegador qu
e queremos que nos color
ee el texto 
de todos los elementos h1 
en color rojo, para ello usa
mos la propiedad "color" y 
 
establecemos su valor a "r
ed".  

Los estilos aplicados a un 
elemento en CSS siempre 
tienen que estar envueltos 
entre llaves 
("{}"). Por cada propiedad 
definida (en este caso 
punto y coma.  

Por tanto los estilos se def
inen de la siguiente maner
a:  

91  
Introducción a CSS  

nombre-de-la-etiqueta-html 
{  
    propiedad-css: valor-
de-la-propiedad;  
    propiedad-css-2: valor-
de-la-propiedad-2;  
}  

Una buena práctica es tab
ular las propiedades de un 
elemento (igual que se hac
e con el 
código HTML).  

Siempre que se use el ele
mento "style" debe estar a
nidado dentro del element
o "head", 
aunque si lo ponemos dent
ro del "body" lo más prob
able es que funcione bien, 
pero no  
sería válido según el W3C 
y por tanto no pasaría 

Snippets inte
ractivos  
Puedes acceder a los snip
pets interactivos de CSS a 
través de la siguiente URL: 
 

Aclaraciones:  

1.siendo los que más sopo
rtan (ordenados de mayor 
a menor): Chrome, Firefox, 
Edge y 
Safari.  
92  
Propiedades  

Propieda
des  
Hemos visto una for
ma de aplicar estilo
s a nuestro HTML, 
en el siguiente capít
ulo veremos 
otras formas, pero 
de momento nos va
mos a quedar aquí 
y vamos a ver en d
etalle algunas  
de las propiedades 
más usadas en CS
S.  

Modificar 
el color  
La propiedad 

Existen múltiples fo
rmas de 

Ahora vamos a ver 
tres formas equival
entes de representa
r el color rojo:  

h1{  
    color: rgb(255, 
0, 0);  
}  

h1{  
    color: #F00;  
}  
h1{  
    color: rgba(255
, 0, 0, 1);  
}  

Ejemplo interacti
vo: Lección 1 - Snip
pet 1.  

En RGB si indica e
n cada uno de los v
alores la cantidad d
e Rojo (Red), Verde 
(Green) y 
Azul (Blue) que tien
e que combinar. Est
e valor puede ser u
n porcentaje o un v
alor  
comprendido entre 
0 y 255, siendo 255 
equivalente a 100%
.  

93  
Propiedades  

Por otro lado come
ntar que el valor 

Cuando lleguemos 
al apartado de "Esti
los con DevTools" 
veremos una maner
a sencilla de 
usar un 

Modificar 
la fuente  
Para modificar las p
ropiedades de la 

 it
ali
c ) 
 

Ejemplo interacti
vo: Lección 1 - Snip
pet 2.  

font-size  
En cuanto al tamañ
o hay 

px: representan un 
tamaño absoluto.  
em: representan un 
valor relativo respe
cto al elemento DO
M padre.  
rem (root em): repr
esentan un valor rel
ativo respecto al el
emento 

Un elemento puede 
tener múltiples estil
os como vemos a c
ontinuación:  

h1{  
    color: #F00;  
    font-size: 16px; 
 
}  

Al igual que con los 
colores, veremos c
ómo jugar con esto
s valores usando C
hrome 
DevTools.  

font-style  

94  
Propiedades  

Los valores que pu
ede contener son: 

h1{  
    color: #F00;  
    font-size: 16px; 
 
    font-style: ital
ic;  
}  

font-family  
Esta propiedad indi
ca la fuente que qu
eremos usar, por d
efecto   sólo se pue
den especificar 
fuentes que tenga e
l usuario instaladas 
en su sistema oper
ativo, ¿pero cómo s
abemos  
cuales son?. Bueno
, existen 

Además de esto po
demos introducir un
a lista de fuentes se
paradas por comas, 
de este 
modo en caso de q
ue no se encuentre 
la primera fuente es
pecificada se intent
ará con las  
posteriores.  

Aquí podemos ver 
un ejemplo:  

body{  
    font-family: "Ti
mes New Roman", Ti
mes, serif;  
}  
Si nos fijamos tamb
ién veremos que aq
uellas fuentes que t
engan nombres co
mpuestos 
(con espacios) deb
en ir encerradas en
tre comillas dobles.  

En la siguiente lecci
ón veremos una for
ma sencilla de utiliz
ar fuentes que no e
stén 
instaladas en el sist
ema operativo usan
do CSS3.  

font-weight  
Esta propiedad hac
e referencia al gros
or de la fuente y pu
ede tomar múltiples 
valores: 
```normal | bold | bol
der | lighter | 100 | 2
00 | 300 | 400 | 500 
| 600 | 700 | 800 | 9
00 |  
inherit````  

De aquí merece la 
pena mencionar:  

Que "normal" es si
nónimo de "400" y "
bold" de "700", est
e último representa
ría una 
negrita  
No todos los valore
s están disponibles 
para todas las fuent
es, de hecho salvo 
que se  

95  
Propiedades  

usen fuentes perso
nalizadas es difícil 
encontrar fuentes c
on anchos distintos 
a 400 o 
700.  

Un ejemplo:  

body{  
    font-family: "Ti
mes New Roman", Ti
mes, serif;  
    font-weight: 70
0;  
}  

font  
Como comentábam
os esta es una form
a de agrupar múltipl
es valores en una s
ola 
propiedad, no es tri
vial de recordar y p
or tanto no te reco
miendo que la uses 
mientras estás  
empezando porque 
puede darte proble
mas.  

Para que te suene 
si te lo encuentras 
en el código de alg
uien tiene este asp
ecto:  

h1{  
   font: bold 1.2em 
Helvetica, Arial, s
ans-serif;  
}  

Modificar 
el texto  
Para modificar el 
Puedes ver el detall
e de cada una de la
s propiedades haci
endo clic sobre el e
nlace en cada 
una.  

Por simplificar aquí 
te mostramos algun
os ejemplos:  

96  
Propiedades  

h1{  
    text-align: cen
ter;  
    text-decoration: 
underline;  
    text-transform: 
uppercase;  
}  

.p{  
    line-height: 1.5
em;  
}  

Otras etiq
uetas hab
ituales  
No es el objetivo de 
este curso ver toda
s las propiedades C
SS ya que son muc
has y la 
mejor forma de apr
enderlas es con la 
práctica, pero antes 
de terminar esta lec
ción me  
gustaría nombrarte 
algunas más:  

background y ba
ckground-color: 
que como su nombr
e indica nos permit
e cambiar el 
fondo de un elemen
to (
list-style, list-
style-image y list-
type: nos permite 
modificar la imagen 
que precede a 
los elementos de u
na lista, etc (

Ejemplos:  
body{ background-
color: #efefef; }  
h1{ background: url
("fondo-
encabezado.jpg") no
-repeat center; }  

li{ list-style: non
e; }  
li{ list-style: squ
are outsite; }  
li{ list-style-
image: url("punto.
jpg"); }  
li{ list-style-type: 
upper-roman; }  

Ejemplo interacti
vo:  

Lección 1 - Snippet 
4: propiedad "back
ground".  
Lección 1 - Snippet 
5: propiedad "list"  

Luego veremos có
mo usar DevTools 
para editar estos es
tilos "en caliente", a
prender los 
valores que admite
n las propiedades y 
en definitiva cómo e
xperimentar de man
era rápida y  
sencilla.  

Nota: en ocasiones 
cuando a elemento 
sólo se le define un
a propiedad te enco
ntrarás 
que algunas person
as lo escriben en u
na sola línea.  

97  
Propiedades  

Chuleta 
CSS  
Ya hemos visto uno
s pocos estilos, con
forme avancemos s
eguramente te cues
te 
recordarlos así que 
al igual que con HT
ML aquí te dejo una 
  
 
  
  

Aclaraciones:  

1.  En este artículo 
se puede leer cómo 
98  
Añadiendo los estilos  

Formas de a
ñadir CSS  
Ahora vamos a repasar las tr
es formas que existen de añ
adir estilos a nuestro HTML 
y una 
muy breve presentación a lo
s selectores.  

Estilos en líne
a  
Voy a explicarte esta forma 
de aplicar estilos, aunque de
bes evitarla siempre que te s
ea 
posible ya que es una mala 
práctica estilar tu página de 
esta manera.  

A cualquier etiqueta HTML p
uedes añadirle la propiedad "
style" y dentro de ella añad
ir 
tantos estilos como desees 
separados por punto y coma
, por ejemplo:  

<h1 style="color:red; font-
size:2em">Título de la pági
na</h1>  

Esta práctica está totalment
e des-recomendada ya que 
a la larga complica el mante
nmiento 
de los estilos de tu página in
citándote a escribir más códi
go del necesario como vere
mos a  
continuación.  
Estilos interno
s  
Este es el ejemplo que hem
os visto hasta ahora, añadie
ndo la etiqueta "<style>" de
ntro del 
"<head>" de nuestra página 
HTML.  

Estilos extern
os  
Y por último la forma recome
ndada (siempre) de aplicar 
estilos: creando un fichero c
on 
extensión ".css" e indicarle 
al navegador que cargue dic
ho dichero, para ello usarem
os un  
elemento auto-contenido lla
mado <link> del siguiente 
modo:  

<link rel="stylesheet" href=
"resources/css/main.css">  

Nota: Una página puede incl
uir varias etiquetas link, o lo 
que es lo mismo: múltiples 
hojas de  estilos. En caso de 
que una regla   esté duplicad
a siempre prevalecerá la qu
e  
se cargue en último lugar  . 
Cuando veamos la herencia 
veremos qué significa esto.  

99  
Añadiendo los estilos  

Selectores d
e etiquetas  
Ya que hemos visto todas la
s formas de cargar estilos C
SS en nuestras páginas y có
mo 
aplicar estilos a etiquetas HT
ML usando el nombre de la 
etiqueta, vamos a ver otras 
dos  
formas de seleccionar etiqu
etas HTML para aplicarles e
stilos:  

Asignando un identificador (ú
nico) al elemento: para ello 
añadiremos la propiedad 
id="valor" a la etiqueta.  
Asignando una o varias clas
es al elemento: en este caso 
usaremos la propiedad 
class="valor1 valor2 ...".  

Veamos un ejemplo:  

<!-- index.html -->  
<h1 id="experiencia">Experie
ncia <strong class="destacad
o">profesional<strong></h1>  

<p class="destacado">  
    A lo largo de los últimos 
16 años blah blah blah...  
</p>  

<style>  
    #experiencia{  
        font-size: large;  
    }  
    .destacado{  
        color: blue;  
    }  
    strong{  
        font-weight: normal;  
    }  
</style>  

En este caso se ha añadido 
un identificador a la etiqueta 
"h1" y la misma clase 
("destacado") a dos etiquet
as: "strong" y "p". Dados lo
s estilos definidos el resultad
o será  
el siguiente:  

La frase "Experiencia prof
esional" se le aplicará un ta
maño mayor (  
La palabra profesional apare
cerá con un ancho de fuente 
"  
Y todo salvo la palabra "Exp
eriencia" aparecerá en colo
r azul.  

Nota importante: los identif
icadores son únicos por cad
a página HTML. Por tanto 
dentro de un mismo fichero "
.html" no podemos asignar 
el mismo valor a dos "id" o  
nos encontraremos con pro
blemas e inconsistencias.  

Fuentes perso
nalizadas  
100  
Añadiendo los estilos  

Una novedad de CSS3 frent
e a las versiones anteriores 
es que se permite el uso de f
uentes 
personalizadas. El repositori
o de fuentes más popular es 

Para para poder usarlas ten
dremos que:  

1.  Añadir la hoja de estilos e
n nuestro HTML usando la e
tiqueta "<link>".  
2.  Añadir la propiedad font-
family en los elementos que 
queramos aplicar la fuente e

nuestro CSS.  

Por ejemplo:  

<!-- index.html -->  
<link href=
700' rel='stylesheet' type='
text/css'>  

/* main.css */  
body{  
    font-family: 'Open Sans', 
sans-serif, arial;  
}  

Nota: al añadir múltiples no
mbres de fuente separados 
por coma lo que estamos 
indicándole al navegador es 
que si tuviese problemas par
a cargar la primera fuente lo  
intente con la segunda, y si t
uviese problemas con la seg
unda lo intentase con la 
tercera, y así tantas veces c
omo queramos. Por ejemplo: 
el problema podría deberse 
a  
que el navegador no soporte 
CSS3 y fuentes personaliza
das o por ejemplo porque el 
fichero que contiene la fuent
e y que tiene que descargar 
el navegador no estuviese  
disponible.  

Aclaraciones:  

1.  Una regla no es más que 
la forma de específicar el ele
mento HTML a los que se le

debe aplicar un estilo def
inido.  

2.  El navegador cargará y le
erás los ficheros de manera 
secuencial, esto significa qu
e lee 
empezando por la primer
a línea de un fichero y termi
na por la última, por tanto pa
ra  
facilitarnos la compresión 
podemos imaginarnos que c
uando se carga un fichero c
on 
una etiqueta (link o scri
pt), esta etiqueta es reempla
zada por el contenido del fic
hero  
al que haga referencia di
cha etiqueta.  

101  
Añadiendo los estilos  

102  
Selectores y herencia  

Selectores y h
erencia  
La palabra CSS viene de Ca
scading StyleSheets, esto q
uiere decir: Hojas de Estilo e

Cascada. La palabra casca
da hace referencia a una pro
piedad muy importante de 
las  
hojas de estilo, y es que los 
estilos aplicados a un eleme
nto padre son heredados por 
su 
hijo.  

Por ejemplo:  

<ul style="color: red">  
    <li>Inicio</li>  
    <li style="color: blue">
Experiencia</li>  
</ul>  

En este caso el color de la fu
ente "Inicio" aparecerá en roj
o y la de "Experiencia" en az
ul.  

Nota: te recuerdo que no es
tá recomendado aplicar los 
estilos usando atributos. En 
este caso lo he hecho así po
rque creo que queda más cl
ara la explicación.a  

Del mismo modo y como ya 
adelantábamos al principio d
el capítulo, si un estilo se def
ine 
dos veces, el último definido 
será el que prevalecerá, por 
ejemplo si en nuestro fichero 

escribimos:  
/* main.css */  
p { 
    color: orange; 
    font-size: 24px; 

p { 
    color: green; 
}  

En este caso el color de toda
s las etiquetas <p> será verd
e.  

Ocurre lo mismo si la misma 
regla está definida en dos ho
jas CSS distintas que hayan 
sido 
cargadas usando la etiqueta 
<link>, en este caso prevale
nce el estilo definido en la últ
ima  
hoja cargada.  

Si por error definiésemos la 
misma propiedad dos veces 
en un elemento también 
prevalecerá la segunda, por 
ejemplo:  

103  
Selectores y herencia  

/* main.css */  
strong {  
    background: orange;  
    background: yellow;  
}  

En este caso el fondo de la e
tiqueta prevalecerá en amaril
lo como se puede ver aquí: 

Predominancia 
del estilo más 
específico  
Ya hemos visto que podemo
s aplicar los estilos de tres fo
rmas, estas formas son de m
enos 
a más específicas:  

Por nombre de etiqueta  
Por clase (class)  
Por identificador (id)  

Si asignamos estilos a un ele
mento de diferentes formas s
iempre predominará el más 
específico, esto quiere decir 
por ejemplo que si definimos 
lo siguiente:  

<head>  
    <style>  
        #food { 
            color: green; 
        } 
        p { 
            color: orange; 
        }  
    </style>  
</head>  
<body>  
    <p id="food">Mi fruta fav
orita es el mango.</p>  
    <p>Mi cereal favorito es 
el trigo</p>  
</body>  
La frase "Mi fruta favorita e
s el mango" aparecerá en c
olor verde, dado que un 
identificador es más específi
co que el nombre de la etiqu
eta. Sin embargo "Mi cereal  
favorito es el trigo" aparece
rá en naranja, porque el estil
o más específico para esa 
etiqueta es el de la etiqueta "
p".  

104  
Selectores y herencia  

Nota: la especificidad se cal
cula de una manera más co
mpleja como se puede ver e

Combinar sele
ctores  
Hasta el momento hemos vis
to cómo utilizar un selector p
ara especificar un elemento, 
pero 
podemos combinar cualquie
ra estos selectores siguiend
o las siguientes reglas:  

Si escribimos los selectores 
separados por un espacio es
tamos haciendo referencia al 

etiquetas anidadas dentro de 
otras.  
Si añadimos los selectores si
n separar por un espacio est
amos haciendo referencia a 
un mismo elemento de una 
manera más específica.  
Para entender cómo se aplic
an los selectores debes leerl
os de derecha a izquierda  
El último selector antes del c
aracter "{" será al que se le a
plique el estilo.  

De este modo podemos sele
ccionar todos los elemento H
TML que contienen una clas

predefinida, etc. En este eje
mplo vamos a ver cómo com
binar nombres de etiquetas 
HTML  
con clases:  

<head>  
    <style>  
        h1 span{  
            color: red;  
        }  
        p.big{  
            font-size: 2rem;  
        }  
        p.big span{  
            font-weight: bold
;  
        }  
    </style>  
</head>  
<body>  
    <h1>Mi <span>Curriculum 
Vitae</span></h1>  
    <p class="big"><span>Nom
bre</span>: Raúl Jiménez Orte
ga</p>  
    <p class="big"><span>Lug
ar de nacimiento</span>: Mála
ga</p>  
    <p>Fecha de nacimiento: 
11/03/1984</p>  
</body>  

Aquí estamos indicando:  

Que el color del texto de las e
tiquetas span que sean desc
endientes (no 
necesariamente hijos directos
) de las etiquetas h1 aparezc
an en rojo.  

105  
Selectores y herencia  

Que los párrafos con que co
ntengan la clase "big" tenga
n un tamaño de fuente de 
"2rem".  
Que el ancho de la fuente de 
las etiquetas span que sean 
descendientes de las 
etiquetas p con la clase big 
sea negrita.  

Esto al principio puede parec
er un poco lioso, pero al final 
verás que aprenderás a usarl

por sentido común.  

Notas:  

1.  Del mismo modo podríam
os hacemos combinaciones 
usando identificadores, 
aunque dado que un iden
tificador es único para un ele
mento y es el más  
específico no debería ser 
necesario usarlo nunca.  

2.  Al combinar los selectores 
la especifidad cambia como 
podemos leer en el tutorial 
antes mencionado.  

Múltiples clases  
Es habitual utilizar varias cla
ses en un mismo elemento  , 
por ejemplo:  

<a class="btn btn-
primary">Entrar</a>  

A este elemento se le aplicar
án los estilos de la clase ".bt
n" y la clase ".btn-primary". 
 

Si se diese caso de que amb
as clases especifican una mi
sma propiedad, por ejemplo 
color 
predominará la de la última i
ndicada, en este caso la de l
a clase ".btn-primary".  

Otros selectores  
Por último añadir que se pue
de aplicar el mismo estilo a v
arios selectores o conjunto d

selectores separándolos por 
una coma, por ejemplo  

.bold,  
strong,  
p.title{  
    font-weight: bold;  
}  

Esto significa que tanto a las 
etiquetas con la clase "bold" 
como las "<strong>" como l
as " 
<p>" que contengan la clase 
"title" se les aplicará el estilo 
"font-weight: bold;".  

También se puede usar el ca
racter ">" para especificar un 
hijo directo de un elemento, y 

otros 

106  
Selectores y herencia  

Aclaraciones:  

1.  Esto lo veremos frecuente
mente si usamos herramient
as como "
.
107  
Estilos con DevTools  

Estilos con 
Chrome Dev
Tools  
Las modificaciones del CSS 
en elements ...  
108  
Recursos  

Recurs
os  
109  
Anexo: Navegadores y estándares soportados  

Anexo: Navegadores y es
tándares 
soportados  
Tanto CSS3 como HTML5 son estándares creados po
r el W3C que recordemos que 
incluyen muchos elementos, propiedades, etc. Por tant
o el trabajo que implica adaptar cada  
uno de los navegadores para comprendan estos están
dares es costoso y conlleva tiempo, 
es por eso que el soporte en los mismos evoluciona pr
ogresivamente. Además cada  
empresa u organización responsable de dicha adaptac
ión prioriza (bajo su propio criterio) 
en qué orden soportará cada característica. Al final est
o conlleva a que el soporte de las  
nuevas características de los estándares a día de hoy 
(17 Sept. 2016), dos años después 
de su publicación no estén completamente soportados 
en ningún navegador, pero ni  
siguiera estén las mismas características en cada nav
egador  .Si te preguntase, ¿de 
cuántos navegadores crees que te deberías preocupa
r? (los más importantes). Supongo  
que te respuesta sería: tres o cuatro (Chrome, Internet 
Explorer, Firefox y Safari) o algo 
similar, ¿no?.Bueno, ojalá fuese tan fácil, al final cada 
uno de estos navegadores no sólo  
dispone de versiones para distintos sistemas operativo
s (Windows, Mac, Linux, Android, 
iOS, Windows Phone, etc), sino que además los usuar
ios no siempre usan la última versión  
de cada navegador. Y el problema añadido que supon
e esto, es que para nuestra 
desgracia, un mismo navegador (por ejemplo Chrome)
, no necesariamente tiene que  
soporta exáctamente igual las características en Wind
ows que en Android.Pero no todo son 
malas noticias, para nuestra fortuna existe un proyect
o llamado: 
110  
Anexo: Navegadores y estándares soportados  

111  
CSS: Modelo de caja  

CSS: Modelo 
de caja  
112  
Elementos HTML  

Elementos 
HTML  
Existen dos elementos q
ue utilizaremos para env
olver el contenido pero q
ue no tienen 
ningún valor semántico. 
 
113  
Propiedades - Parte 2  

Propiedades - 
Parte 2  

#  

Borde (Border) 
 
border-width:  
border-style:  
border-color:  
border:  

Modificar el f
ondo de un el
emento  

Fondo (Backgr
ound)  
Ejemplos  

114  
Propiedades - Parte 2  

body{  
    background-color: #efefe
f;  
}  

h1{  
    background: url("fondo-
encabezado.jpg") no-repeat c
enter;  
}  

Modificar una 
lista  

Lista (List)  

Ejemplos  
li{  
    list-style: none;  
}  

li{  
    list-style: square outsit
e;  
}  

li{  
    list-style-image: ur
l("punto.jpg");  
}  

li{  
    list-style-type: upper-
roman;  
}  

115  
Propiedades - Parte 2  

116  
Posicionar el contenido  

Posicionar el 
contenido  

Propiedad posit
ion  
static  
relative  
absolute  
fixed  

Propiedad z-
index  
Esta propiedad establece el or
den en el que aparecen las caj
as en el eje Z (profundidad) y 
se establece como un número 
entero.  

Ejemplo:  

div{  
    z-index: 999;  
}  
117  
CSS: Refinando el diseño  

CSS: Refinand
o el diseño  
118  
Tipografías  

Tipograf
ías  
tamaños %, em, ..
.  
119  
JS: Primeros pasos  

JS: Primero
s pasos  
JavaScript (JS) es un leng
uaje de programación, un l
enguaje con su propio voc
abulario, 
sintaxis, semántica, expres
iones, errores, etc.  

JavaScript nos permite dar
le vida a la web, hacerla m
ás dinámica e interactiva, y 
por tanto 
mostrar algo más que infor
mación de manera estátic
a.  

¿Qué se puede hacer con 
JavaScript?:  

Operaciones matemáticas, 
lógicas, etc.  
Controlar el flujo del progr
ama  
Validar formularios  
Cargar contenidos mediant
e peticiones HTTP  
Modificar el DOM  
Acceder a información co
mo la versión del navegad
or, tamaño de la ventana, 
sistema 
operativo, localización, etc. 
 
Etc.  

Mi primer scri
pt  
Este es el script más simpl
e que podemos hacer:  

<!DOCTYPE html>  
<html lang="es">  
<head>  
  <meta charset="UTF-8">  
  <title>Mi primer script<
/title>  
</head>  

<body>  
  <script>  
    document.writeln('Hola 
Mundo!');  
  </script>  
</body>  
</html>  

Vamos a ver cómo interpre
tar este script. Lo que esta
mos haciendo es:  

 writel
n    que escribe en el DOM 
lo que recibe como parám
etro 
seguido de un salto de líne
a, en este caso 
 \n ).  

2  

120  
JS: Primeros pasos  

 document    y que rep
resenta al DOM y que tien
e otras 
funciones para acceder a e
lementos del DOM, etc.  

 'use strict'; al prin
cipio de tus scripts. 
El modo estricto significa e
ntre otras cosas que hay q
ue declarar todas las varia
bles y  
objetos  .  

Así quedaría:  

<!DOCTYPE html>  
<html lang="es">  
<head>  
  <meta charset="UTF-8">  
  <title>Mi primer script<
/title>  
</head>  

<body>  
  <script>  
    'use strict';  
    document.writeln('Hola 
Mundo!');  
  </script>  
</body>  
</html>  

Sintaxis  
Algunas de las característi
cas de JavaScript son:  

1.  Es sensible a mayúscul
as y minúsculas (o lo que 
es lo mismo, es case-
sensitive), por 
tanto:  

var variable;  

no es equivalente a  

var Variable;  
2.  No es obligatorio (pero 
sí recomendado) declarar l
as variables 
3.  No se define el tipo de 
las variables  
4.  No es necesario (pero s
í recomendado) terminar c
ada expresión con el carác
ter de 
punto y coma (;)  
5.  Se pueden incluir come
ntarios en una línea usand

 /* */ .  

121  
JS: Primeros pasos  

 window  que represe
nta a la ventana 
del navegador donde está 
cargado el DOM y donde s
e almacena mucha más inf
ormación.  
Añadir la palabra 

</small>  


122  
Variables  

Variabl
es  
Las variables en 
los lenguajes de 
programación s
e asemejan a la
s variables utiliz
adas en 
matemáticas, se 
utilizan para alm
acenar y hacer r
eferencia a valo
res, gracias a ell
as  
podemos darle 
vida a la web.  

Para declarar/d
efinir una variabl
e utilizaremos la 
palabra clave 
la variable y un 
punto y coma (  

var counter;  

En este caso he
mos declarado 
una variable co
n el nombre 
asignado ningú
n valor.  

Consejos:  

Aunque no es o
bligatorio, acaba 
siempre las sent
encias con punt
o y coma (por 
convención).  
Escribe siempre 
el código en ingl
és (se consider
a más profesion
al).  
El nombre de un
a variable debe 
cumplir las sigui
entes normas:  

El primer caráct
er no puede ser 
un número.  
Sólo puede esta
r formado por let
ras, números y l
os símbolos: dól
ar (  
(  

Por tanto, las si
guientes variabl
es estarían bien 
definidas:  

var $num1;  
var _$name;  
var $$
$otherNumber;  
var $_a__$4;  

Consejo: elige 
nombres de vari
ables que sean 
representativos 
del valor que 
almacenan para 
facilitar la compr
ensión del códig
o.  

Por ejemplo:  

123  
Variables  

var counter = 0; 
var name = "Raul
";  

// En lugar de:  
var aux = 0;  
var tmp = "Raul"
;  

Palabra
s reserv
adas  
Antes de contin
uar me gustaría 
comentarte que 
existen palabras 
reservadas que 
tienen un 
significado en el 
lenguaje y que 
no podremos us
ar como nombre
s de variables: 
boolean, break, 
byte, case, catc
h, char, class, c
onst, continue, 
debugger, defa
ult, delete,  
do, double, els
e, enum, expo
rt, extends, fal
se, final, finally
, float, for, func
tion, goto,  
if, implements, 
import, in, inst
anceof, int, int
erface, long, n
ative, new, null
, package,  
private, protect
ed, public, retu
rn, short, static
, super, switch, 
synchronized, t
his,  

throw, throws, 
transient, true, 
try, typeof, var
, volatile, void, 
while, with .  
Tipos d
e variab
les  
En todos los len
guajes de progr
amación existen 
distintos tipos d
e variables, en J
avaScript 
tendremos:  

// Númericas (in
teger & floats)  
// --------------
---------------  
var counter = 16
;   // variable t
ipo entero  
var price = 19.9
9;  // variable t
ipo decimal  

Que nos permit
en almacenar n
úmeros enteros 
y con decimales 
para realizar op
eraciones.  

// Cadenas de t
exto (strings)  
// --------------
---------------  
var msg = 'Bienv
enido a nuestro 
sitio web';  
var txt = 'Una f
rase con "comill
as dobles" dentr
o';  
var txt = 'Una f
rase con \'comil
las simples\' de
ntro';  

Que nos permit
en trabajar con 
cadenas de text
o. Para ello tene
mos con encerr
ar la cadena 
entre comillas si
mples o dobles, 
pero normalmen
te se recomiend
a hacerlo con co
millas  
simples. En cas
o de querer intro
ducir una comill
a simple dentro 
de una cadena 
podemos 
hacerlo incluyen
do el carácter c
ontra-barra (\) ju
sto delante, par
a evitar que se c
ierre la  
cadena.  

124  
Variables  

// Colecciones (
arrays)  
// --------------
---------------  
// Definiendo los 
días de la sema
na en cadenas d
e texto  
var day1 = 'Lun
es', day2 = 'Ma
rtes', ... , 'Do
mingo';  

// Definición eq
uivalente en un 
Array  
var days = ['Lun
es', 'Martes', '
Miércoles', 'Ju
eves', 'Viernes'
, 'Sábado', 'Do
mingo'];  

// days[0] = 'Lu
nes'  
// days[1] = 'M
artes'  
// ...  
// days[6] = 'Do
mingo'  

 Arrays o colecci
ones nos permit
en añadir varios 
valores dentro d
e un elemento.  

// Booleanos (bo
olean)  
// --------------
---------------  
var valid = fals
e;  
var prime = true
;  

 false .  

Funcion
es  
Existen múltiple
s funciones para 
trabajar con nú
meros: Para los 
números hay un
a función 
muy útil:  

var n = 231.827
3;  
n.toFixed(2); // 
231.82  

cadenas de text
o, por ejemplo:  

var hello = 'Hol
a ';  
var world = 'Mu
ndo!';  

// Para contar el 
número de cara
cteres  
console.log(hell
o.length); // 5  

// Para concaten
ar cadenas  
console.log(hell
o + ' ' + world
); // Hola Mundo! 
 
console.log(hello
.concat(' ' + w
orld));  // Hola 
Mundo!  

// Para busacar s
ubcadenas en un
a cadena  
var pos = hello.i
ndexOf('a'); // 
pos = 3  
var pos = hello.i
ndexOf('b'); // 
pos = -1  

125  
Variables  

 split , 

etc.  
otr
os 
m
ét
od
os

Al igual para tra
bajar con Arrays
:  

var fruits = ['ba
nana', 'melon, '
orange'];  

// Para contar  
var n = fruits.l
ength; // n = 3  

//Para añadir ele
mentos  
fruits.push('ap
ple', 'peach'); /
/ fruits = ['ban
ana', 'melon, '
orange', 'apple
', 'peac  
h']  

 conta
 join
 pop
 shi  re
ct ft ,  ve
Y ot rs
ras  e . 
com  
o: 
126  
Operadores  

Operado
res  
Los operadores no
s vas a servir para 
modificar y compro
bar el valor de las 
variables, vamos 
a ver diferentes tip
os de operadores:  

Matemáticos  
Lógicos  
Relacionales  

Operador
es matem
áticos  
Los operadores m
atemáticos nos va
n a permitir realizar 
operaciones mate
máticas sobre las 
variables, veamos 
algunos ejemplos:  

// Asignación (=)  
var pi = 3.1416;  

Nos permite darle 
un valor a una vari
able.  

Consejo: Añade s
iempre un espacio 
antes y otro despu
és de cualquier op
erador (  
 < , ..).  

// Incremento (++) 
y decremento (--)  
var x = 1, y = 4;  
x++; // x = 2  
y--; // y = 3  

Nos permite incre
mentar o decreme
ntar en una unidad 
el valor de una vari
able.  

// Suma (+) y rest
a (-)  
var x = 2, y = 3, z
;  
z = x + y // z = 5; 
 
z = x - y // z = -
1;  

// División (/) y 
multiplicación (*) 
 
var x = 4, y = 2, z
;  
z = x / y // z = 2; 
 
z = x * y // z = 8
;  

127  
Operadores  

// Abreviaciones  
var x = 5;  
x += 3;  // x = x + 
3 => 8  
x -= 1;  // x = x - 
1 => 4  
x *= 2;  // x = x * 
2 => 10  
x /= 5;  // x = x / 
5 => 1  

// Módulo (%) num
ero1 %= 4; // nume
ro1 = numero1 % 4 
= 1  

Operador
es lógico
s  
Los operadores lóg
icos son imprescin
dibles para realizar 
aplicaciones compl
ejas, ya que se 
utilizan para tomar 
decisiones sobre la
s instrucciones que 
debería ejecutar el 
programa en  
función de ciertas 
condiciones.  

El resultado de cua
lquier operación qu
e utilice operadore
s lógicos siempre e
s un valor 
lógico o booleano. 
 

var visible = true; 
 
!visible;  // Devu
elve "false" y no "
true"  

x !
t f
f t
Operación AND (
&&)  

La operación lógic
a AND obtiene su r
esultado combinan
do dos valores boo
leanos. El 
operador se indica 
mediante el símbol
o && y su resultad
o solamente es 
operandos son 

x x
t t
t f
f f
f f
128  
Operadores  

var x = true;  
var y = false;  
result = x && y; // 
result = false  

x = true;  
y = true;  
result = x && y; // 
result = true  

Operación OR (||)  

La operación lógic
a OR también com
bina dos valores b
ooleanos. El opera
dor se indica 
mediante el símbol
o || y su resultado 
es 

x x
t t
t t
f t
f f
var x = true;  
var y = false;  
result = x || y; // 
result = true  

x = false;  
y = false;  
result = x || y; // 
result = false  

Operador
es relacio
nales  
Los operadores rel
acionales definidos 
por JavaScript son 
los mismos que los 
matemáticos:  

Mayor que: 
Menor que: 
Mayor o igual:
 >= 

Menor o igual:
 <= 

Igual que: == 
Distinto de: 

Aunque también e
xiste el operador 

129  
Operadores  

0 == ""         // t
rue  
0 === ""        // f
alse  

0 == false      // t
rue  
0 === false     // f
alse  

2 == '2'        // 
true  
2 === '2'       // f
alse  

Vamos a ver en la 
siguiente lección q
ue estos operador
es son imprescindi
bles a la hora de 
controlar el flujo d
e un programa.  

El resultado de tod
os estos operador
es siempre es un v
alor booleano:  

var even = 2;  
var odd = 5;  
result = even > od
d; // result = fals
e  
result = even < od
d; // result = true 
 

a = 5;  
b = 5;  
result = a >= b; // 
result = true  
result = a <= b; // 
result = true  
result = a == b; // 
result = true  
result = a != b; // 
result = false  

Se debe tener esp
ecial cuidado con e
l operador de igual
dad (==), ya que e
s el origen de la 
mayoría de errores 
de programación, i
ncluso para los us
uarios que ya tiene
n cierta  
experiencia desarr
ollando scripts. El 
operador == se utili
za para comparar 
el valor de dos 
variables, por lo qu
e es muy diferente 
del operador =, qu
e se utiliza para asi
gnar un valor a  
una variable:  

130  
Operadores  

// El operador "=" 
asigna valores  
var x = 5;  
y = x = 3;  // y = 
3 y x = 3  

// El operador "==" 
compara variables  
var x = 5;  
y = x == 3; // x = 
5 y y = false  

/* 
   Los operadores r
elacionales tambié
n se pueden  
   utilizar con vari
ables de tipo cad
ena de texto:  
*/  
var txt1 = "hola";  
var txt2 = "hola";  
var txt3 = "adios";  

result = txt1 == t
xt3; // result = fal
se  
result = txt1 != t
xt2; // result = fa
lse  
result = txt3 >= t
xt3; // result = fal
se  

Cuando se utilizan 
cadenas de texto, l
os operadores "ma
yor que" (  
siguen un razonam
iento no intuitivo: s
e compara letra a l
etra comenzando d
esde la 
izquierda hasta qu
e se encuentre una 
diferencia entre las 
dos cadenas de te
xto. Para  
determinar si una l
etra es mayor o m
enor que otra, las 
mayúsculas se con
sideran menores 
que las minúsculas 
y las primeras letra
s del alfabeto son 
menores que las úl
timas (a es  
menor que b, b es 
menor que c, A es 
menor que a, etc.)  

131  
Ejercicio  

Ejercic
ios  

1) Instal
ar Subli
me Text 
 
Instalar  
líneas (sino añ
adirlas):  

{  
    "indent": 2
,  
    "tab_size": 
2,  
    "translate_ta
bs_to_spaces"
: true  
}  

2) Oper
aciones 
simples 
 
Realiza un scri
pt que realice l
o siguiente:  

Almacenar en u
na variable el r
esultado de su
mar 1 y 2  
Almacenar en u
na variable el r
esultado de divi
dir 6 entre 2  
Almacenar en u
na variable el pr
ecio de un artíc
ulo de 20€ aplic
ándole el 21% 
de IVA .  
Definir una vari
able con el valo
r 4 y utilizar el o
perador (  
su valor.  
Definir una vari
able que almac
ene la concate
nación de dos c
adenas de text
o.  

 
dividirlo
 1.21  para o
entre
btener el pre
cio sin IVA.  
Asignar a dos v
ariables valore
s booleanos y 
hacer al menos 
una operación 
combinando un 
operador lógico
: AND (  
Realizar 4 expr
esiones que util
icen operadore
s relacionales (  
almacenen los 
valores en tres 
variables distint
as.  

Finalmente imp
rime todos val
ores en la con
sola del naveg
ador usando  
 console.log(no
mbre_de_la_var
iable) , por eje
mplo:  

var result = 1 
+ 2;  
console.log(res
ult);  

Nota: Como la 
mayoría de los 
lenguajes, Java
Script se ejecut
a secuencialme
nte (de 
arriba a abajo), 
por lo que el or
den de las instr
ucciones import
a.  

132  
Ejercicio  

3) Punt
os de p
arada  
Utiliza la pesta
ña sources y h
az clic en algun
a línea donde h
aya una expres
ión para 
establecer un p
unto de parada 
(se debe marca
r en azul) y rec
arga la página:  

Juega con el in
spector.  

Opcion
al: Insta
lar W3C
Validat
ors  
Recuerda que 
en las leccione
s de HTML utili
zábamos el 

Dudas  
 

Si tienes proble
mas o dudas c
on tu código sú
belo a Github, 
abre un issue e
n un proyecto 
con la duda/pro
blema y envía
me un correo a 

133  
Recursos  

Recurs
os  
Playlist de Youtu
be con introducc
ión a 

Otras a
claraci
ones  

Objeto 
window  
Otras funciones 
comunes definid
as en el objeto 

 console  que im
plementa funcio
nes para imprimi
r mensajes en la 
consola de error 

(  

Otras ca
racteríst
icas de 
JS  
Existen más car
acterísticas, co
mo que si la eje
cución de un scr
ipt dura demasia
do tiempo 
(por un error, po
r ejemplo de pro
gramación) el na
vegador puede i
nformarle al usu
ario de  
que hay un scrip
t que está consu
miendo demasia
dos recursos y d
arle la posibilida
d de 
detener su ejec
ución.  

Orden d
e definic
ión de la
s variabl
es  
Definirlas en la 
parte superior d
el script  

134  
Estructuras de control  

Estructuras d
e control  

Estructura 
var printMsg = true;  

if(printMsg) {  
  console.log('Hola Mundo');  
}  

if(printMsg == true) {  
  console.log('Hola Mundo');  
}  

Un ejemplo usando un comp
arador lógico:  

var printMsg = false;  

if(!printMsg) {  
  console.log('Me imprimo');  
}  

var isFirstMsg = true;  

if(!printMsg && isFirstMsg) {  
  console.log('Mi primer mens
aje');  
}  

Un error típico es introducir 
una asignación (  

// Error - Se asigna el valo
r 'false' a la variable  
if(printMsg = false) {  
  ...  
}  

Estructura 
135  
Estructuras de control  

var age = 18;  

if(age >= 18) {  
  console.log('Eres mayor de e
dad');  
}  
else {  
  console.log('Eres menor de e
dad');  
}  

E  
s
t
r
u
c
t
u
r
a
 
l e
s

if(age < 18) {  
  console.log('Eres menor de e
dad');  
}  
else if(age < 30) {  
  console.log('Aún eres joven'
);  
}  
else {  
  console.log('La sabiduría la 
da la experiencia');  
}  

Estructura 
for(initialization; condition; 
increment) {  
  ...  
}  

var i;  
var days = ['Lunes', 'Martes
', 'Miércoles', 'Jueves', 'Vie
rnes', 'Sábado', 'Domingo'];  

for(i = 0; i < days.length; i
++) {  
  alert(days[i]);  
}  

136  
Objetos, funciones y ámbitos  

Objetos y funcio
nes  
Iterar sobre objetos callbacks  

ámbitos  

// Objetos (objects)  
// -----------------------------  
var obj = {  
    name: 'Raul',  
    last_name: 'Jimenez Ortega',  
    age: 31  
};  

// obj.name = 'Raul'  
// obj.last_name = 'Jimenez Ortega'  
// obj.age = 31  

Los objetos nos permiten definir estr
ucturas de datos con distintos tipos 
de valores, ya verás 
que esto te será muy útil en el futuro
.  
137  
Peticiones AJAX  

Peticiones 
AJAX  
 
138  
Expresiones regulares  

Expresiones r
egulares  
139  
Aplicaciones web offline  

Aplicaciones 
web offline  
140  
Bibliotecas de terceros  

Bibliotecas d
e terceros  
Gráfica  

jQuery  

Dojo  
141  
Ejercicio  

Ejercic
ios  

Instalar 
JSHint  
142