Html1

CURSO DE H.T.M.L. Parte 1/4
Autor Autor Luis Marco Giménez Luis Marco Giménez Agencia Tributaria Agencia Tributaria Dpto. Informática Tributaria de Madrid Dpto. Informática Tributaria de Madrid Colaboradores Colaboradores Javier Álvarez Javier Álvarez Eloy García Eloy García Instituto de Salud Carlos III de Madrid Instituto de Salud Carlos III de Madrid

¿Que es H.T.M.L.?
p p

HyperTextMarkup Language Lenguaje basado en el uso de etiquetas (tags). Es interpretado y multiplataforma. Un documento HTML está escrito en ASCII (texto plano) y no incluye ningún formato. Extensiones .htm o .html. Parte del SGML (Lenguaje de Marcado Generalizado Estándar)

p

p p

¿Que es H.T.M.L.?
Tecnologías SGML

SGML

XML
XSL SVG SMIL

HTML
CSS DHTML

XHTML

¿Que es H.T.M.L.?Versiones del HTML
p

HTML 1.0: HTML 2.0: HTML 3.2:

Sólo enlaces.

p p

Soporte de imágenes y formularios.

Tablas, códigos internacionales, envío de ficheros locales, soporte JAVA y mapas de imágenes.

p

de accesibilidad e internacionalización.

HTML 4.0: Hojas de estilo en cascada (CSS). Mejoras

Herramientas web (I)
Procesadores de texto
p

Un editor de texto que noformatee el texto.
n

Ej.: Notepad de Windows, vi o emacs de Unix/Linux, o SimpleText en Macintosh

p

Editores avanzados.
n

Ej.: UltraEdit, HomeSite, HotDog, ...

p

Herramientas WYSIWYG.
n

Ej.:Microsoft FrontPage, Macromedia Dreamweaver, HotMetal

p

Conversores de código: Microsoft Word, Excel, ..

Herramientas web (II)
Navegadores
p

Un navegador web
n

Ej.: NetscapeNavigator, Microsoft Internet Explorer, Opera ...

p

Aplicación:
n n n

presentación, ...).

Son programas cliente (agente de usuario) que proporcionan la interfaz para la navegación. Interpretan el código HTML y otras tecnologías según su DOM. Nos permiten gestionar ciertas características de la comunicación cliente-servidor (seguridad,

Herramientas web (III)
Editores Gráficos
pUna herramienta gráfica
n

Ej.: Adobe Photoshop, Macromedia Fireworks, Jasc Paint Shop Pro, Microsoft Photo Editor, …

p

Aplicación:
n n

n

Son básicas en el diseño web actual. Permiten definir la composición de las páginas y de sus elementos imagen de forma rápida y sencilla (maquetas, logos, botones, ...) Deben admitir capas, paletas de color, generar formatos estándar web, ...Herramientas web (IV)
Otras aplicaciones
p

Adobe Acrobat, para la generación de PDF’s para web. Macromedia Flash MX, generación de animaciones web.

p

Convenciones utilizadas en la presentación
p

? , etiqueta desaconsejada en el estándar HTML
4.0, pero que aún sigue siendo muy utilizada. X , etiqueta obsoleta o en desuso. (IE) , solo en Internet Explorer. (NC) , solo enNetscape Navigator 4.

p

p

p

El documento HTML (I)
Estructura de Etiquetas (tags)
p

El Principio del lenguaje HTML es el uso de etiquetas:
n n

Inicio de una etiqueta Cierre de una etiqueta

p

Válido usar etiquetas en mayúsculas o minúsculas, indistintamente Todo lo que hay dentro de ellas se ve afectado por su acción.

p

El documento HTML (II)
Estructura general de undocumento
p

Todo el documento HTML debe estar contenido entre las etiquetas:
….

p

El documento se divide en dos zonas:
n

Encabezamiento: ...
p

Parte de definición: ,,,, ...

n

Cuerpo:
p

Parte visible: , , , , ...

…

El documento HTML (III)
Esqueleto
… …

El documento HTML (IV)
Etiqueta
p

Tipo de documento HTML:
n n n

Estricta(strict.dtd) De transición o “blando” (loose.dtd) De marcos (frameset.dtd)

p

Se define previamente a la etiqueta , no es obligatoria.
n

Ejemplo:

El documento HTML (V)
Cabecera Meta datos
p p

Se utiliza la etiqueta Permite identificar distintas propiedades del documento:
n n

name; Identificador del meta dato (Author, copyright, keywords, date, ...) content; Valor asignado. Facilita...