clase de xhtml

11
Facilitador: DUGLAS MORENO

Upload: duglas-oswaldo-moreno-mendoza

Post on 24-Dec-2015

3 views

Category:

Documents


1 download

DESCRIPTION

Clase de XHTML

TRANSCRIPT

Page 1: Clase de XHTML

Facilitador: DUGLAS MORENO

Page 2: Clase de XHTML

Introducción al HTMLEl HTML ( HiperText Markup Language ) es el lenguaje utilizado para representar

documentos en la WWW (World Wide Web). Además de texto normal incluye

también, elementos multimedia (gráficos, vídeo, audio) y existen enlaces (links)

que permiten saltar a otras partes del documento o a otro sitio cualquiera de

Internet.

Otra característica muy importante de este lenguaje es que es portable, es decir,

se pueden visualizar las páginas con cualquier sistema operativo y, por supuesto

también crearlas.

Las etiquetas constituyen la filosofía de este lenguaje. Por medio de ellas se pueden

controlar los elementos tipográficos del texto, así como también la inclusión de

tablas, listas, formularios, la inserción de fotos, sonidos, fondos, los enlaces

entre otros.

Page 3: Clase de XHTML

La sintaxis en HTML 4 y XHTML 1.0

La primera línea de todo documento HTML corresponde a la declaración del tipo

de documento, el doctype. Esta DTD (Document Type Declaration) sirve para

indicar qué versión del lenguaje HTML se ha utilizado en el documento.

Esta sería la DTD de un documento HTML 4.01 transicional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

Y esta sería la DTD de un documento XHTML 1.0 estricto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Page 4: Clase de XHTML

La sintaxis en XHTML 1.0El elemento <html> indica, en una página web, el inicio del contenido de la página

HTML. Esta sería la sintaxis completa en XHTML 1.0 estricto:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >

La codificación de los caracteresLa codificación de caracteres que se ha usado en una página web, es en un

elemento meta, en la cabecera http, y en el contenido, con el atributo charset.

En HTML 4.01 transicional:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

En XHTML 1.0 estricto:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Page 5: Clase de XHTML

El concepto de etiqueta (tag)

El HTML describe el aspecto visual que debe tener una página mediante la utilización

de etiquetas (tags). Las etiquetas le indicarán al navegador la posición relativa de los

elementos de la página, su tamaño, las tipografías y colores a utilizar, entre otros. Las

etiquetas son como instrucciones que le indican al navegador como mostrar la

información. Existen dos clases de etiquetas:

1-. Etiquetas vacías o Etiquetas abiertas Tiene el siguiente formato: <etiqueta>,

Se utilizan para introducir saltos de línea, líneas horizontales, y otros elementos no

asociados al formato de textos o imágenes.

2-. Etiquetas contenedora o Etiquetas cerrada Tiene el siguiente formato:

<etiqueta>….</etiqueta>,Estas etiquetas dan un formato al texto o porción del

documento que engloban.

Page 6: Clase de XHTML

El concepto del argumento

Las etiquetas pueden especificar, por ejemplo, que cierta palabra aparezca en negrita.

Pero si queremos que cierta palabra aparezca de color rojo, necesitamos suministrar

un parámetro: el color. La mayoría de las etiquetas tienen parámetros o atributos para

indicar múltiples aspectos del formato, como el color, el tamaño, la posición, entre

otros.

El formato de una etiqueta con parámetros es el siguiente:

<etiqueta parametro1="valor1" parametro2="valor2" ... > ... </etiqueta>

Es recomendable encerrar los valores de los atributos entre comillas dobles.

En la etiqueta inicial de un elemento puede aparecer cualquier número de parejas

(legales) atributo/valor, separadas por espacios. Pueden aparecer en cualquier orden.

Page 7: Clase de XHTML

Estructura de un documento en HMLToda página HTML debe comenzar por la etiqueta <html> y terminar con </html>.

Todo lo que figure entre estas etiquetas será interpretado por el navegador como un

documento HTML. Lo que quede fuera de ellas será, en la mayoría de los casos,

ignorado.

El documento HTML se divide siempre en dos partes: cabecera y cuerpo.

La cabecera figura entre las etiquetas <head> y </head>. En ella se especifica el

título, el autor, y otras características del documento que no se muestran físicamente

en la página y que sirven para facilitar su indexación (son lo que se conoce como

meta tags). En la cabecera también deben incluirse los scripts que necesite el

documento (JavaScript, JScript, etc.) y las definiciones de estilos (si se utilizan hojas

de estilos).

Page 8: Clase de XHTML

Estructura de un documento en HMLEl cuerpo es la parte del documento que se circunscribe entre las etiquetas <body>

y </body>. En esta parte se incluye la página propiamente dicha. Ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Mi primera pagina HTML</title>

</head>

<body>

Mi primera página HTML

</body>

</html>

Page 9: Clase de XHTML

Uso de las Etiquetas dentro del Head

Dentro de la etiqueta de cabecera <head>, se pueden utilizar algunas etiquetas que

permiten, colocar las especificaciones de la pagina, la codificación o el juego de

caracteres, el titulo de la pagina entre otras opciones.

Uso de la etiqueta <meta>

La etiqueta <meta> proporciona metadatos sobre el documento HTML. Los

metadatos no se muestra en la página, pero será apta para su procesamiento

máquina. Meta elementos se utilizan normalmente para especificar descripción de

páginas, palabras clave, autor del documento, la última modificación, y otros

metadatos. Los metadatos pueden ser utilizados por los navegadores (como mostrar

el contenido de la página), los motores de búsqueda (palabras clave), u otros

servicios web.

Page 10: Clase de XHTML

Uso de la Etiqueta <meta>

<meta name="keywords" content="HTML, CSS, XML, XHTML">

Se realiza la definición de palabras para los motores de búsqueda.

<meta name="description" content="Curso de Html">

Se define la descripción de la pagina.

<meta name="author" content="Duglas Moreno">

Se define el autor de la pagina

<meta http-equiv="refresh" content="30">

Actualiza la pagina cada cierto tiempo

<meta charset="UTF-8">

Codificación o juego de caracteres.

Page 11: Clase de XHTML

Uso de la Etiqueta <body> </body>

El <body> define el cuerpo del documento.

El elemento <body> contiene todo el contenido de un documento HTML, como texto,

hipervínculos, imágenes, tablas, listas, entre otros.

Entres los atributos del body que se encuentra son:

Alink, bgcolor, link, text, vlink donde el valor de cada uno de estos atributos es el

color.

Background en donde el valor de este atributo es una dirección o url.