1. S1 :: Introducci´n a HTML
o
Alejandro Henr´
ıquez Lazo
Taller de Aplicaciones para Internet
AIEP

2. Tabla de Contenidos
Un poco sobre Html
Historia
Caracter´ısticas
Etiquetas
Escribiendo c´digo
o
Ejemplo minimalista
Etiquetas b´sicas
a
body
header
Atributos id y class
2 de 12

3. Un poco sobre Html
Historia
HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
HTML es el lenguaje por excelencia en el que se escriben las
p´ginas web
a
Fue p´blicado por primera vez en Internet en 1991 por Tim
u
Berners-Lee
Actualmente esta en la versi´n 4.01
o
Ya existen avances sobre HTML5 que incorpora elementos de
sem´ntica en el lenguaje
a
3 de 12

4. Un poco sobre Html
Historia
HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
HTML es el lenguaje por excelencia en el que se escriben las
p´ginas web
a
Fue p´blicado por primera vez en Internet en 1991 por Tim
u
Berners-Lee
Actualmente esta en la versi´n 4.01
o
Ya existen avances sobre HTML5 que incorpora elementos de
sem´ntica en el lenguaje
a
3 de 12

5. Un poco sobre Html
Historia
HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
HTML es el lenguaje por excelencia en el que se escriben las
p´ginas web
a
Fue p´blicado por primera vez en Internet en 1991 por Tim
u
Berners-Lee
Actualmente esta en la versi´n 4.01
o
Ya existen avances sobre HTML5 que incorpora elementos de
sem´ntica en el lenguaje
a
3 de 12

6. Un poco sobre Html
Historia
HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
HTML es el lenguaje por excelencia en el que se escriben las
p´ginas web
a
Fue p´blicado por primera vez en Internet en 1991 por Tim
u
Berners-Lee
Actualmente esta en la versi´n 4.01
o
Ya existen avances sobre HTML5 que incorpora elementos de
sem´ntica en el lenguaje
a
3 de 12

7. Un poco sobre Html
Historia
HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
HTML es el lenguaje por excelencia en el que se escriben las
p´ginas web
a
Fue p´blicado por primera vez en Internet en 1991 por Tim
u
Berners-Lee
Actualmente esta en la versi´n 4.01
o
Ya existen avances sobre HTML5 que incorpora elementos de
sem´ntica en el lenguaje
a
3 de 12

8. Un poco sobre Html
Historia
HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
HTML es el lenguaje por excelencia en el que se escriben las
p´ginas web
a
Fue p´blicado por primera vez en Internet en 1991 por Tim
u
Berners-Lee
Actualmente esta en la versi´n 4.01
o
Ya existen avances sobre HTML5 que incorpora elementos de
sem´ntica en el lenguaje
a
3 de 12

9. Un poco sobre Html
Caracter´
ısticas
Los archivos que se crean tienen la extensi´n .html o .htm
o
Los archivos se abren por defecto con el navegador
Describe la estructura y el contenido en forma de texto
Se escribe en forma de ”etiquetas”, rodeadas por corchetes
angulares (<,>)
Puede describir, hasta un cierto punto, la apariencia de un
documento
Puede incluir un script (por ejemplo Javascript), el cual puede
afectar el comportamiento de navegadores web
4 de 12

10. Un poco sobre Html
Caracter´
ısticas
Los archivos que se crean tienen la extensi´n .html o .htm
o
Los archivos se abren por defecto con el navegador
Describe la estructura y el contenido en forma de texto
Se escribe en forma de ”etiquetas”, rodeadas por corchetes
angulares (<,>)
Puede describir, hasta un cierto punto, la apariencia de un
documento
Puede incluir un script (por ejemplo Javascript), el cual puede
afectar el comportamiento de navegadores web
4 de 12

11. Un poco sobre Html
Caracter´
ısticas
Los archivos que se crean tienen la extensi´n .html o .htm
o
Los archivos se abren por defecto con el navegador
Describe la estructura y el contenido en forma de texto
Se escribe en forma de ”etiquetas”, rodeadas por corchetes
angulares (<,>)
Puede describir, hasta un cierto punto, la apariencia de un
documento
Puede incluir un script (por ejemplo Javascript), el cual puede
afectar el comportamiento de navegadores web
4 de 12

12. Un poco sobre Html
Caracter´
ısticas
Los archivos que se crean tienen la extensi´n .html o .htm
o
Los archivos se abren por defecto con el navegador
Describe la estructura y el contenido en forma de texto
Se escribe en forma de ”etiquetas”, rodeadas por corchetes
angulares (<,>)
Puede describir, hasta un cierto punto, la apariencia de un
documento
Puede incluir un script (por ejemplo Javascript), el cual puede
afectar el comportamiento de navegadores web
4 de 12

13. Un poco sobre Html
Caracter´
ısticas
Los archivos que se crean tienen la extensi´n .html o .htm
o
Los archivos se abren por defecto con el navegador
Describe la estructura y el contenido en forma de texto
Se escribe en forma de ”etiquetas”, rodeadas por corchetes
angulares (<,>)
Puede describir, hasta un cierto punto, la apariencia de un
documento
Puede incluir un script (por ejemplo Javascript), el cual puede
afectar el comportamiento de navegadores web
4 de 12

14. Un poco sobre Html
Caracter´
ısticas
Los archivos que se crean tienen la extensi´n .html o .htm
o
Los archivos se abren por defecto con el navegador
Describe la estructura y el contenido en forma de texto
Se escribe en forma de ”etiquetas”, rodeadas por corchetes
angulares (<,>)
Puede describir, hasta un cierto punto, la apariencia de un
documento
Puede incluir un script (por ejemplo Javascript), el cual puede
afectar el comportamiento de navegadores web
4 de 12

15. Un poco sobre Html
Caracter´
ısticas
Los archivos que se crean tienen la extensi´n .html o .htm
o
Los archivos se abren por defecto con el navegador
Describe la estructura y el contenido en forma de texto
Se escribe en forma de ”etiquetas”, rodeadas por corchetes
angulares (<,>)
Puede describir, hasta un cierto punto, la apariencia de un
documento
Puede incluir un script (por ejemplo Javascript), el cual puede
afectar el comportamiento de navegadores web
4 de 12

16. Un poco sobre Html
Etiquetas
< e t i q u e t a a t r i b u t o =’ v a l o r ’>
E s t e e s e l c o n t e n i d o de l a e t i q u e t a
</ e t i q u e t a>
Se˜alan el inicio y fin de un elemento
n
A su vez poseen atributos que pueden ser modificados
Las etiquetas existentes, atributos y valores est´n definidos por la
a
W3C 1
1
http://www.w3.org/
5 de 12

17. Un poco sobre Html
Etiquetas
< e t i q u e t a a t r i b u t o =’ v a l o r ’>
E s t e e s e l c o n t e n i d o de l a e t i q u e t a
</ e t i q u e t a>
Se˜alan el inicio y fin de un elemento
n
A su vez poseen atributos que pueden ser modificados
Las etiquetas existentes, atributos y valores est´n definidos por la
a
W3C 1
1
http://www.w3.org/
5 de 12

18. Un poco sobre Html
Etiquetas
< e t i q u e t a a t r i b u t o =’ v a l o r ’>
E s t e e s e l c o n t e n i d o de l a e t i q u e t a
</ e t i q u e t a>
Se˜alan el inicio y fin de un elemento
n
A su vez poseen atributos que pueden ser modificados
Las etiquetas existentes, atributos y valores est´n definidos por la
a
W3C 1
1
http://www.w3.org/
5 de 12

19. Un poco sobre Html
Etiquetas
< e t i q u e t a a t r i b u t o =’ v a l o r ’>
E s t e e s e l c o n t e n i d o de l a e t i q u e t a
</ e t i q u e t a>
Se˜alan el inicio y fin de un elemento
n
A su vez poseen atributos que pueden ser modificados
Las etiquetas existentes, atributos y valores est´n definidos por la
a
W3C 1
1
http://www.w3.org/
5 de 12

20. Ejemplo minimalista
<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4 . 0 1 / /EN”
” h t t p : / /www. w3 . o r g /TR/ html4 / s t r i c t . d t d ”>
<html l a n g =’ es ’>
<head>
< t i t l e>E j e m p l o</ t i t l e>
</head>
<body>
<p>e j e m p l o</p>
</body>
</ html>
6 de 12

21. Etiquetas b´sicas
a
En el body
< h1 > T´
ıtulo nivel 1
< h6 > T´
ıtulo nivel 6
< p > P´rrafo
a
´
< em > Enfasis it´lico o cursiva
a
´
< strong > Enfasis fuerte negrita
< cite > Para la inserci´n de citas
o
< br / > Salto de l´
ınea
Visualizaci´n
o
Las etiquetas no define c´mo se ver´ el elemento, pero la existe una
o a
estandarizaci´n entre los distintos navegadores.
o
7 de 12

22. Etiquetas b´sicas
a
En el body
< h1 > T´
ıtulo nivel 1
< h6 > T´
ıtulo nivel 6
< p > P´rrafo
a
´
< em > Enfasis it´lico o cursiva
a
´
< strong > Enfasis fuerte negrita
< cite > Para la inserci´n de citas
o
< br / > Salto de l´
ınea
Visualizaci´n
o
Las etiquetas no define c´mo se ver´ el elemento, pero la existe una
o a
estandarizaci´n entre los distintos navegadores.
o
7 de 12

23. Etiquetas b´sicas
a
En el body
< h1 > T´
ıtulo nivel 1
< h6 > T´
ıtulo nivel 6
< p > P´rrafo
a
´
< em > Enfasis it´lico o cursiva
a
´
< strong > Enfasis fuerte negrita
< cite > Para la inserci´n de citas
o
< br / > Salto de l´
ınea
Visualizaci´n
o
Las etiquetas no define c´mo se ver´ el elemento, pero la existe una
o a
estandarizaci´n entre los distintos navegadores.
o
7 de 12

24. Etiquetas b´sicas
a
En el body
< h1 > T´
ıtulo nivel 1
< h6 > T´
ıtulo nivel 6
< p > P´rrafo
a
´
< em > Enfasis it´lico o cursiva
a
´
< strong > Enfasis fuerte negrita
< cite > Para la inserci´n de citas
o
< br / > Salto de l´
ınea
Visualizaci´n
o
Las etiquetas no define c´mo se ver´ el elemento, pero la existe una
o a
estandarizaci´n entre los distintos navegadores.
o
7 de 12

25. Etiquetas b´sicas
a
En el body
< h1 > T´
ıtulo nivel 1
< h6 > T´
ıtulo nivel 6
< p > P´rrafo
a
´
< em > Enfasis it´lico o cursiva
a
´
< strong > Enfasis fuerte negrita
< cite > Para la inserci´n de citas
o
< br / > Salto de l´
ınea
Visualizaci´n
o
Las etiquetas no define c´mo se ver´ el elemento, pero la existe una
o a
estandarizaci´n entre los distintos navegadores.
o
7 de 12

26. Etiquetas b´sicas
a
En el body
< h1 > T´
ıtulo nivel 1
< h6 > T´
ıtulo nivel 6
< p > P´rrafo
a
´
< em > Enfasis it´lico o cursiva
a
´
< strong > Enfasis fuerte negrita
< cite > Para la inserci´n de citas
o
< br / > Salto de l´
ınea
Visualizaci´n
o
Las etiquetas no define c´mo se ver´ el elemento, pero la existe una
o a
estandarizaci´n entre los distintos navegadores.
o
7 de 12

27. Etiquetas b´sicas
a
En el body
< h1 > T´
ıtulo nivel 1
< h6 > T´
ıtulo nivel 6
< p > P´rrafo
a
´
< em > Enfasis it´lico o cursiva
a
´
< strong > Enfasis fuerte negrita
< cite > Para la inserci´n de citas
o
< br / > Salto de l´
ınea
Visualizaci´n
o
Las etiquetas no define c´mo se ver´ el elemento, pero la existe una
o a
estandarizaci´n entre los distintos navegadores.
o
7 de 12

28. Etiquetas b´sicas
a
En el body
< h1 > T´
ıtulo nivel 1
< h6 > T´
ıtulo nivel 6
< p > P´rrafo
a
´
< em > Enfasis it´lico o cursiva
a
´
< strong > Enfasis fuerte negrita
< cite > Para la inserci´n de citas
o
< br / > Salto de l´
ınea
Visualizaci´n
o
Las etiquetas no define c´mo se ver´ el elemento, pero la existe una
o a
estandarizaci´n entre los distintos navegadores.
o
7 de 12

29. Imagenes
<img width =’x ’ h e i g h t =’y ’
s r c =’ path ’
a l t =’ t e x t o a l t e r n a t i v o ’
t i t l e =’ t i t u l o ’>
width Ancho de la imagen
height Alto de la imagen
src Ubicaci´n de la imagen
o
alt Texto alternativo de no encontrar la imagen
title Titulo de la imagen
8 de 12

30. Imagenes
<img width =’x ’ h e i g h t =’y ’
s r c =’ path ’
a l t =’ t e x t o a l t e r n a t i v o ’
t i t l e =’ t i t u l o ’>
width Ancho de la imagen
height Alto de la imagen
src Ubicaci´n de la imagen
o
alt Texto alternativo de no encontrar la imagen
title Titulo de la imagen
8 de 12

31. Imagenes
<img width =’x ’ h e i g h t =’y ’
s r c =’ path ’
a l t =’ t e x t o a l t e r n a t i v o ’
t i t l e =’ t i t u l o ’>
width Ancho de la imagen
height Alto de la imagen
src Ubicaci´n de la imagen
o
alt Texto alternativo de no encontrar la imagen
title Titulo de la imagen
8 de 12

32. Imagenes
<img width =’x ’ h e i g h t =’y ’
s r c =’ path ’
a l t =’ t e x t o a l t e r n a t i v o ’
t i t l e =’ t i t u l o ’>
width Ancho de la imagen
height Alto de la imagen
src Ubicaci´n de la imagen
o
alt Texto alternativo de no encontrar la imagen
title Titulo de la imagen
8 de 12

33. Imagenes
<img width =’x ’ h e i g h t =’y ’
s r c =’ path ’
a l t =’ t e x t o a l t e r n a t i v o ’
t i t l e =’ t i t u l o ’>
width Ancho de la imagen
height Alto de la imagen
src Ubicaci´n de la imagen
o
alt Texto alternativo de no encontrar la imagen
title Titulo de la imagen
8 de 12

34. Imagenes
<img width =’x ’ h e i g h t =’y ’
s r c =’ path ’
a l t =’ t e x t o a l t e r n a t i v o ’
t i t l e =’ t i t u l o ’>
width Ancho de la imagen
height Alto de la imagen
src Ubicaci´n de la imagen
o
alt Texto alternativo de no encontrar la imagen
title Titulo de la imagen
8 de 12

35. Es importante saber
Los tama˜os de ancho y largo pueden ser especificados en em, px y
n
%
Las path deben ser relativas desde la ra´ del sitio
ız
Las etiquetas de t´
ıtulo aparecen como tooltip cuando ponemos el
cursor sobre el objeto
9 de 12

36. Es importante saber
Los tama˜os de ancho y largo pueden ser especificados en em, px y
n
%
Las path deben ser relativas desde la ra´ del sitio
ız
Las etiquetas de t´
ıtulo aparecen como tooltip cuando ponemos el
cursor sobre el objeto
9 de 12

37. Es importante saber
Los tama˜os de ancho y largo pueden ser especificados en em, px y
n
%
Las path deben ser relativas desde la ra´ del sitio
ız
Las etiquetas de t´
ıtulo aparecen como tooltip cuando ponemos el
cursor sobre el objeto
9 de 12

38. Es importante saber
Los tama˜os de ancho y largo pueden ser especificados en em, px y
n
%
Las path deben ser relativas desde la ra´ del sitio
ız
Las etiquetas de t´
ıtulo aparecen como tooltip cuando ponemos el
cursor sobre el objeto
9 de 12

39. Etiquetas b´sicas
a
En el header
< title > Especifica el t´
ıtulo de la p´gina
a
< link > Para vincular hojas de estilo o iconos
< style > Especifica estilos dentro de la p´gina
a
< script > Especifica script dentro de la p´gina
a
< meta > Especifica informaci´n sobre el documento
o
10 de 12

40. Etiquetas b´sicas
a
En el header
< title > Especifica el t´
ıtulo de la p´gina
a
< link > Para vincular hojas de estilo o iconos
< style > Especifica estilos dentro de la p´gina
a
< script > Especifica script dentro de la p´gina
a
< meta > Especifica informaci´n sobre el documento
o
10 de 12

41. Etiquetas b´sicas
a
En el header
< title > Especifica el t´
ıtulo de la p´gina
a
< link > Para vincular hojas de estilo o iconos
< style > Especifica estilos dentro de la p´gina
a
< script > Especifica script dentro de la p´gina
a
< meta > Especifica informaci´n sobre el documento
o
10 de 12

42. Etiquetas b´sicas
a
En el header
< title > Especifica el t´
ıtulo de la p´gina
a
< link > Para vincular hojas de estilo o iconos
< style > Especifica estilos dentro de la p´gina
a
< script > Especifica script dentro de la p´gina
a
< meta > Especifica informaci´n sobre el documento
o
10 de 12

43. Etiquetas b´sicas
a
En el header
< title > Especifica el t´
ıtulo de la p´gina
a
< link > Para vincular hojas de estilo o iconos
< style > Especifica estilos dentro de la p´gina
a
< script > Especifica script dentro de la p´gina
a
< meta > Especifica informaci´n sobre el documento
o
10 de 12

44. Etiquetas b´sicas
a
En el header
< title > Especifica el t´
ıtulo de la p´gina
a
< link > Para vincular hojas de estilo o iconos
< style > Especifica estilos dentro de la p´gina
a
< script > Especifica script dentro de la p´gina
a
< meta > Especifica informaci´n sobre el documento
o
10 de 12

45. Atributos id y class
Etiqueta
< e t i q u e t a i d =’nombre−id ’ c l a s s =’nombre−c l a s e ’>
E s t e e s e l c o n t e n i d o de l a e t i q u e t a
</ e t i q u e t a>
id Especifica el identificador del elemento (que debe ser
unico)
´
class Especifica el grupo al que pertenece el elemento (puede
repetirse)
11 de 12

46. Atributos id y class
Etiqueta
< e t i q u e t a i d =’nombre−id ’ c l a s s =’nombre−c l a s e ’>
E s t e e s e l c o n t e n i d o de l a e t i q u e t a
</ e t i q u e t a>
id Especifica el identificador del elemento (que debe ser
unico)
´
class Especifica el grupo al que pertenece el elemento (puede
repetirse)
11 de 12

47. Atributos id y class
Etiqueta
< e t i q u e t a i d =’nombre−id ’ c l a s s =’nombre−c l a s e ’>
E s t e e s e l c o n t e n i d o de l a e t i q u e t a
</ e t i q u e t a>
id Especifica el identificador del elemento (que debe ser
unico)
´
class Especifica el grupo al que pertenece el elemento (puede
repetirse)
11 de 12

48. Atributos id y class
Estilo
<s t y l e t y p e=” t e x t / c s s ”>
e t i q u e t a −h t m l {
a t r i b u t o −1 : v a l o r −a t r i b u t o −1;
a t r i b u t o −2 : v a l o r −a t r i b u t o −2;
}
#nombre−i d {
a t r i b u t o −1 : v a l o r −a t r i b u t o −1;
a t r i b u t o −2 : v a l o r −a t r i b u t o −2;
}
. nombre−c l a s s {
a t r i b u t o −1 : v a l o r −a t r i b u t o −1;
a t r i b u t o −2 : v a l o r −a t r i b u t o −2;
}
</ s t y l e>
etiqueta nombre
id #nombre
class .nombre
12 de 12