1. <H1>html</H1>
<h2>Qué es el html y para qué sirve</h2>
por Maximiliano Martin - www.maximiliano.cl
www.maximiliano.cl
2. Qué es HTML
Lenguaje de Marcado más extendido
www.maximiliano.cl
3. Qué es HTML
Lenguaje de Marcado más extendido
•Codificar un documento
•Industria Editorial
•Dictado a viva voz
Clases
•Presentación
•Procedimientos
•Descriptivo
www.maximiliano.cl
4. Qué es HTML
SGML
1986
Lenguaje de Marcado
Generalizado Standard
HTML
1991
Lenguaje de Marcas de Hipertextos
www.maximiliano.cl
6. Para qué sirve
Describir estructura y contenido
www.maximiliano.cl
7. Para qué sirve
Describir estructura y contenido
Complementar el texto con Objetos
www.maximiliano.cl
8. Para qué sirve
Describir estructura y contenido
Complementar el texto con Objetos
Se escribe en forma de “Etiquetas”
www.maximiliano.cl
9. Para qué sirve
Describir estructura y contenido
Complementar el texto con Objetos
Se escribe en forma de “Etiquetas”
Rodeada por Corchetes Angulares
www.maximiliano.cl
< >
19. Declaración / DOCTYPE
No es una etiqueta sino una
instrucción
•Definición del Tipo de Documento (DTD)
•El DTD especifica las reglas para el
lenguaje de marcado
•XHTML 1.0 Strict / XHTML 1.0 Transitional
•XHTML 1.1
•HTML 4.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
www.maximiliano.cl
21. Elemento Raiz / <html>
Etiqueta que contiene todo el HTML
•Informa al navegador que lo contenido
por él debe ser interpretado como HTML
•Inicio y término del documento
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
...elementos del head...
</head>
<body>
...elementos del body...
</body>
</html>
www.maximiliano.cl
26. Estructura de documento
Módulos de: <html>
•Estructura
•html, head, title, body <head>
•Metainformación
•Estilos <title> y otros elementos
•Link
•Base </head>
<body>
</body>
</html>
www.maximiliano.cl
27. Estructura de documento
Módulos de: <html>
•Estructura
•html, head, title, body <head>
•Metainformación
•Estilos <title> y otros elementos
•Link
•Base </head>
Módulos de:
•Texto <body>
•p, code, div, em, strong, span, q,
pre, samp, h1, h2, h3, etc elementos
•Hipertexto
•Lista
•Objetos
•Presentación
•Edición
•Formularios </body>
•Tablas
•Imágen </html>
•Otros
www.maximiliano.cl
32. ¿Para quién?
Humanos Usuarios Máquinas
Comunicamos/Informamos
Visible “Invisible”
Titular principal ➡ h1
Contenido del artículo ➡ p
www.maximiliano.cl
33. ¿Para quién?
Humanos Usuarios Máquinas
Comunicamos/Informamos
Visible “Invisible”
Titular principal ➡ h1
Contenido del artículo ➡ p
Lista de elementos ➡ ol, ul, li, li, li, li, li.
www.maximiliano.cl
34. ¿Para quién?
Humanos Usuarios Máquinas
Comunicamos/Informamos
Visible “Invisible”
Titular principal ➡ h1
Contenido del artículo ➡ p
Lista de elementos ➡ ol, ul, li, li, li, li, li.
Datos en excel ➡ table, td, tr,
www.maximiliano.cl
35. ¿Para quién?
Humanos Usuarios Máquinas
Comunicamos/Informamos
Visible “Invisible”
Titular principal ➡ h1
Contenido del artículo ➡ p
Lista de elementos ➡ ol, ul, li, li, li, li, li.
Datos en excel ➡ table, td, tr,
➡ Valores de atributos
www.maximiliano.cl
36. ¿Para quién?
Humanos Usuarios Máquinas
Comunicamos/Informamos
Visible “Invisible”
Titular principal ➡ h1
Contenido del artículo ➡ p
Lista de elementos ➡ ol, ul, li, li, li, li, li.
Datos en excel ➡ table, td, tr,
➡ Valores de atributos
www.maximiliano.cl
37. <head> o cabecera
Contiene información sobre el documento que:
no se muestra directamente al usuario
www.maximiliano.cl
38. <head> o cabecera
Contiene información sobre el documento que:
no se muestra directamente al usuario
<title>
<html>
<head>
<title>Guía de Referencia Rápida XHTML</title>
</head>
<body>
...elementos del body...
</body>
</html>
www.maximiliano.cl
39. <head> o cabecera
Contiene información sobre el documento que:
referencia a metaetiquetas
www.maximiliano.cl
40. <head> o cabecera
Contiene información sobre el documento que:
referencia a metaetiquetas
<meta>
<meta name="Description" content="Qué es HTML y para qué sirve" />
<meta name="Keywords" content="HTML,XHTML,tutorial HTML" />
<meta name="Author" content="Maximiliano Martin" />
<meta name="Copyright" content="...
www.maximiliano.cl
41. <head> o cabecera
Contiene información sobre el documento que:
relaciona mediante vínculos a otras URL o archivos
www.maximiliano.cl
42. <head> o cabecera
Contiene información sobre el documento que:
relaciona mediante vínculos a otras URL o archivos
<link>
<link type="text/css" rel="stylesheet" href="css/base.css" />
<link type="text/css" media="print" rel="stylesheet" href="css/print.css" />
<link type="text/css" media="aural" rel="stylesheet" href="css/aural.css" />
www.maximiliano.cl
43. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
www.maximiliano.cl
44. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
...</body>
www.maximiliano.cl
45. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
...</body>
www.maximiliano.cl
46. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
...</body>
www.maximiliano.cl
47. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
...</body>
www.maximiliano.cl
48. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
p, div, ol, ul, li, a, img, em,
h1, h2, h3, etc. strong, span,
etc.
...</body>
www.maximiliano.cl
49. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
p, div, ol, ul, li, a, img, em,
h1, h2, h3, etc. strong, span,
etc.
...</body>
www.maximiliano.cl
50. Valores de Atributos
Propiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots)
<a> vínculo o ancla </a>
www.maximiliano.cl
51. Valores de Atributos
Propiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots)
<a> vínculo o ancla </a>
•href •hreflang
•title •accesskey
•class •rel
•id •tabindex
<a href=”http://www.wikipedia.com/ancla/”
title=”Definición de Wikipedia” rel=”External”> vínculo
o ancla </a>
www.maximiliano.cl
52. Valores de Atributos
Propiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots)
<img src=”URI” />
•scr •height
•alt •longdesc
•class •width
•id
<img src=”http://www.w3c.es/img/eslogo-20030729.png”
alt="Oficina española del W3C" height="52" width="279" />
www.maximiliano.cl
53. + Elementos
Propiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots)
•Estructura: body, head, html, title •Hipertexto: a
•Texto: abbr, acronym, address, blockquote, br, •Lista: dl, dt, dd, ol, ul, li
cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, •Objetos: object, param
p, pre, q, samp, span, strong, var •Edición: del, ins
•Presentación: b, big, hr, i, small, sub, sup, tt •Texto Bidireccional: bdo
•Formularios: button, fieldset, form, input, label, •Módulo de Imagen: img
legend, select, optgroup, option, textarea •Metainformación: meta
•Tablas: caption, col, colgroup, table, tbody, td, •Scripting: noscript, script
tfoot, th, thead, tr •Hoja de Estilo: style element
•Mapa de Imagen del lado Cliente: area, map •Link: link
•Mapa de Imagen del lado Servidor: Attribute •Base: base
ismap on img
www.maximiliano.cl
63. Accesibilidad
Proporciona alternativas para que lleguemos a más
usuarios con nuestro mensaje/información
•Metaetiquetas link
•Texto de vínculos
•Atributos alt, longdesc, rel, Acceskey, tabindex
•Estructura de cabeceras h1, h2, h3
•Cambios de idioma
http://www.discapnet.es/web_accesible/tecnicas/html/WCAG10-HTML-
TECHS_es.html/
www.maximiliano.cl
64. Ejercicio
Escribir las etiquetas identificadas
www.maximiliano.cl
65. Ejercicio
¿Cuántos elementos HTML puedes
nombrar en 5 minutos?
www.maximiliano.cl
66. Gracias
Maximiliano Martin
www.maximiliano.cl
www.maximiliano.cl