html

<H1>html</H1>
<h2>Qué es el html y para qué sirve</h2>
Por Erika Montesdeoca

Qué es HTML
Lenguaje de Marcado más extendido

Qué es HTML
Lenguaje de Marcado más extendido
•Codificar un documento
•Industria Editorial
•Dictado a viva voz
Clases
•Presentación
•Procedimientos
•Descripttivo

1986
1991
SGML
Lenguaje de Marcado
Generalizado Standard
Qué es HTML
HTML
Lenguaje de Marcas de Hipertextos

Para qué sirve
Describir esttructtura y conttenido

Para qué sirve
Complementtar el texto con Objetos

Para qué sirve
Se escribe en forma de “Ettiquettas”

Para qué sirve
Se escribe en forma de “Ettiquettas”
Rodeada por Corchettes Angulares

Modularización (XHTML)
de elementos
Declaración / DOCTYPE

de elementos
Elemento Raiz / <httml>

de elementos
Elemento Raiz / <httml>
Modularización. Módulo de:
Esttructtura / body, head, html, title
Textto / abbr, acronym, address, etc.
Hiperttextto / a
Listta / dl, dt, dd, ol, ul, li.
Objettos / object, param.
Presenttación / b, big, hr, i, etc.
ettc. /

<a href=”” title=””>texto deenlace</a>
Estructura deElementos
Elementto

<Etiqueta inicial>
Elementto
</Etiqueta final >

<Etiqueta inicial>
Elementto
</Etiqueta final >
Contenido

<Etiqueta inicial>
Elementto
Atributo=”valor”
</Etiqueta final >
Contenido

<Etiqueta inicial>
Elementto
Atributo=”valor”
</Etiqueta final >
Contenido
<a href=”” ttiittllee==””””>>texto deeennllaaccee</a>

No es una etiqueta sino una
insttrucción
•Definición del Tipo de Documentto (DTD)
•E l 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">

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>

<html>
</html>
Estructura de documento

</html>
<html>
<head>
</head>

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

<body>
</body>
</html>
</head>
<html>
<head>
<title> y otros elementos
Módulos de:
•Estructura
•html, head, title, body
•Metainformación
•Estilos
•Link
•Base

</body>
</html>
</head>
<html>
<head>
<title> y otros elementos
<body>
elementos
Módulos de:
•Estructura
•html, head, title, body
•Metainformación
•Estilos
•Link
•Base
Módulos de:
•Texto
•p, code, div, em, strong, span, q,
pre, samp, h1, h2, h3, etc
•Hipertexto
•Lista
•Objetos
•Presentación
•Edición
•Formularios
•Tablas
•Imágen
•Otros

¿Para quién?
Usuarios
Comunicamos/Informamos

¿Para quién?
Humanos MáquinasUsuarios

¿Para quién?
Visible “Invisible”

¿Para quién?
Humanos
Titular principal
MáquinasUsuarios
➡ h1

¿Para quién?
Titular principal
Contenido del artículo
➡
➡
h1
p

¿Para quién?
Titular principal
Lista de elementos
➡
➡
➡
h1
p
ol, ul, li, li, li, li, li.

¿Para quién?
Titular principal
Lista de elementos
Datos en excel
➡
➡
➡
➡
h1
p
table, td, tr,

¿Para quién?
Titular principal
Lista de elementos
Datos en excel
➡
➡
➡
➡
➡
h1
p
table, td, tr,
Valores de atributos
www.maximiliano.cl

¿Para quién?
Titular principal
Lista de elementos
Datos en excel
➡
➡
➡
➡
➡
h1
p
table, td, tr,
Valores de atributos

<head> o cabecera
Contiene información sobre el documento que:
no se muestra directamente al usuario

<head> o cabecera
<html>
<head>
<title>Guía de Referencia RápidaXHTML</title>
</head>
<body>
...elementos del body...
</body>
</html>
no se muestra directamente al usuario
<ttittle>

<head> o cabecera
referencia a metaetiquetas

<head> o cabecera
<meta name="Description" conttentt="Qué es HTML y para qué sirve" />
<meta name="Keywords"
<meta name="Author"
<meta name="Copyright"
conttentt="HTML,XHTML,tutorial HTML" />
conttentt="Maximiliano Martin" />
conttentt="...
referencia a metaetiquetas
<metta>

<head> o cabecera
relaciona mediante vínculos a otras URL o archivos

<head> o cabecera
<link ttype="text/css" rel="stylesheet" href="css/base.css" />
<link ttype="text/css" media="print" rel="stylesheet" href="css/print.css" />
<link ttype="text/css" media="aural" rel="stylesheet" href="css/aural.css" />
relaciona mediante vínculos a otras URL o archivos
<link>

<body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador

...</body>
<body> o cuerpo
<body>...
Elementos en bloque Elementos en linea

...</body>
<body> o cuerpo
<body>...
Elementos en bloque Elementos en linea
p, div, ol, ul, li,
h1, h2, h3,etc.
a, img, em,
strong, span,
etc.

Valores de Atributos
Propiedad de algunos elementos a los que se les
asigna Valores específicos(Humanos/Robots)
<a> vínculo o ancla </a>

<a> vínculo o ancla </a>
<a href=”http://www.wikipedia.com/ancla/”
ttittle=”Definición de Wikipedia” rel=”External”> vínculo
o ancla </a>
•href
•title
• class
•i d
•hreflang
•accesskey
•r el
•tabindex

<img src=”URI” />
•scr
•alt
• class
•i d
<img src=”http://www.w3c.es/img/eslogo-20030729.png”
altt="Oficina española del W3C" heightt="52" widtth="279" />
•height
•longdesc
•width

+ Elementos
•Esttructtura: body, head, html, title
•Textto: abbr, acronym, address, blockquote, br,
cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd,
p, pre, q, samp, span, strong, var
•Presenttación: b, big, hr, i, small, sub, sup, tt
•Formularios: button, fieldset, form, input, label,
legend, select, optgroup, option, textarea
•Tablas: caption, col, colgroup, table, tbody, td,
tfoot, th,thead, tr
•M a p a de Imagen del lado Clientte: area, map
•M a p a de Imagen del lado Servidor: Attribute
ismap on img
•Hiperttextto: a
•Listta: dl, dt, dd, ol, ul, li
•Objettos: object, param
•Edición: del, ins
•Textto Bidireccional: bdo
•Módulo de Imagen: img
•Mettainformación: meta
•Scriptting: noscript, script
•H o j a de Esttilo: style element
•L i n k : link
•Base: base

WYSIWYG
What You See Is What You Get
Lo que ves es lo que obtienes

Validación
Verifica la correcta implementación del código según
el DTD declarado
http://validator.w3.org/

Accesibilidad
http://www.discapnet.es/web_accesible/tecnicas/html/WCAG10-HTML-
TECHS_es.html/
Proporciona alternativas para que lleguemos a más
usuarios con nuestro mensaje/información
•Metaetiquetas link
•Texto devínculos
•Atributos alt, longdesc, rel, Acceskey, tabindex
•Estructura de cabeceras h1, h2, h3
•Cambios deidioma

Ejercicio
Escribir las etiquetasidentificadas

Ejercicio
¿Cuántos elementos HTML puedes
nombrar en 5 minutos?

html

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a html

Similar a html (20)

Último

Último (20)

html