lenguaje xhtml

LENGUAJE XHTML

Instituto de Educación Superior Tecnológico Publico de «La Joya»

Computación e Informática

Ing. Wilfredo Chávez Ilasaca

Introducción

XHTML significa lenguaje de marcado de hipertexto extendido.Se utiliza para generar documentos y contenidos de hipertexto generalmente publicados en la WEB. Es además una reformulación del lenguaje HTML que se puede jactar de ser ahora compatible con XML.Un lenguaje de marcado nos permite dejar indicaciones (marcas) en un documento que sirven para diferenciar distintos tipos de contenidos, estructuras o secciones. Por ejemplo hay marcas (elementos, etiquetas) que pueden "marcar" qué es un título, y su lugar en una jerarquía de importancia, o advertir que una palabra debe estar enfatizada, o bien que una oración es además un enlace hacia otro recurso.

Introducción

Una de sus virtudes es que está ideado para mantener una saludable separación entre el contenido y el diseño. Es decir, que uno no afecte al otro, y se puedan modificar independientemente.A medida que avancen y conozcan la aplicación de CSS (hojas de estilo) a los documentos notarán tal separación de manera evidente.El XHTML está diseñado para que sea funcional no sólo a los navegadores sino a varios dispositivos WEB (teléfonos móviles, portátiles, etc). A lo largo del curso haremos uso del término agente de usuario para referirnos a estos dispositivos capaces de interpretar documentos XHTML.

Fichero XHTML, editor y navegador web

El fichero de un documento XHTML, en sí, es un archivo de texto plano generalmente con alguna de estas extensiones: .html, .htm, o bien .xhtml. Los agentes de usuario interpretan estos archivos y procesan el código para mostrarlos en pantalla.

Pueden editar los ficheros utilizando un editor de textos planos y para poder visualizar los resultados del documento un navegador web (o cualquier otro agente de usuario que interprete XHTML).

Utilicen el editor que ustedes quieran, y al guardarlo se recomienda elegir alguna de estas extensiones, para que su sistema operativo reconozca rápidamente el tipo de fichero (.html, .htm, .xhtml.)

Estructura de una página HTML

Todos los documentos HTML tienen la siguiente estructura, que se muestra a continuación, aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de páginas que dividen la ventana del navegador en varios cuadros (frames).<html> < head > <title>Título de la página</title> </head> < body > Aquí iría el contenido de la página </body> </ html >


Todos los documentos HTML tienen la siguiente estructura, que se muestra a continuacion, aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de páginas que dividen la ventana del navegador en varios cuadros (frames).<html> < head > <title>Título de la página</title> </head> < body > Aquí iría el contenido de la página </body> </ html >


Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo:

<meta name="description" content="Información sobre el contenido de la pagina"><meta name="keywords" content="educación, enseñanza, instituto, profesores, alumnos">

La cabecera es la sección comprendida entre <head> y </head>. En ella se encuentra necesariamente el título (entre las etiquetas <title> y </title>).

El título de la página debe describir su contenido por ejemplo:<TITLE>Colegio Público de Villamañán</TITLE>

Estructura de una página HTML Ejemplo:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="Introduccion a la estructura de un documento xhtml" /><meta name="keywords" content="cabecera, cuerpo, contenido de la pagina, pie de pagina" /><meta name="language" content="es" /><title>Estructura Basica xhtml</title></head>

<body>Contenido de la pagina.</body></html>

EL CUERPO (BODY)

El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc.

El cuerpo está delimitado por las etiquetas <body> y </body> La etiqueta <body> suele contener algunos atributos, a saber:

BGCOLOR, parámetro usado para especificar el color de fondo de la página. El color se define como una terna de números (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red, Green, Blue). También se puede usar el nombre en inglés de los colores predefinidos en los navegadores.

Sintaxis: <BODY BGCOLOR=#0000FF> o

<BODY BGCOLOR=blue>

EL CUERPO (BODY)

TEXT, parámetro usado para definir el color del texto por omisión. Su formato es el mismo que el de BGCOLOR. Si no se pone nada es negro.

Sintaxis: <BODY text=“color">

BACKGROUND, parámetro usado para especifica la ruta y nombre de archivo (URL) de la imagen que será usada como fondo del documento.

Sintaxis: <BODY BACKGROUND="ruta/archivo.gif">

Es conveniente especificar la ruta de modo relativo, (si cambiamos el directorio completo donde están nuestras páginas), la ruta especificada debe seguir siendo válida. Ejemplo:

<BODY BACKGROUND="../gifs/fondo.gif">

EL CUERPO (BODY)

Los navegadores por defecto, presentan el texto de una página ajustando los contenidos a la esquina superior izquierda de la pantalla. BODY tiene parámetros que permiten modificar los márgenes por defecto. Cada navegador los interpreta de una manera. Netscape utiliza solamente dos instrucciones:

marginwidth="pixels", para los márgenes izquierdo y derecho.

marginheight="pixels", para los márgenes superior e inferior.

En cambio, el Internet Explores, utiliza uno para cada cual:

leftmargin="pixels", para el margen izquierdo topmargin="pixels", para el margen superior rightmargin="pixels", para el margen derecho bottommargin="pixels", para el margen inferior

Bloques o Párrafos

Para definir y separar bloques de texto, se emplean una serie de marcas que definen párrafos, entre otras tenemos:

<P>

Se utiliza para separar párrafos, es el que indica el principio y fin de un párrafo.

Atributos:

Align: left/center/right/justify

<PRE>

Marca que indica que el texto a insertar será visualizado con el mismo formato, con el que fue escrito en el código fuente.

Separadores Horizontales

En la creación de un documento HTML, podemos también utilizar una línea como separador de párrafos, el cual será con el comando HR. El comando hr es una etiqueta abierta, es decir no tiene etiqueta de cierre.

Formato:<hr align=«center/left/right» Size=«Numero» Width=«Numero %»>

Align, determina la alineación horizontal de la línea.

Size, determina el ancho o espesor de la línea.

Width, determina el largo de la línea horizontal (%).

Noshade, permite desactiva el efecto de sombra.

Efectos en el texto

Texto Centrado:

Una o varias líneas de texto, pueden estar centradas respecto a los márgenes de la ventana. Esto afecta sólo al texto que hay entre <CENTER> y </CENTER>, pero no a todo el párrafo. Por ejemplo:

texto texto texto texto texto texto texto texto texto texto texto texto <CENTER>texto centrado texto centrado</CENTER> texto texto texto texto texto texto texto texto texto texto texto texto Texto realzado:

<STRONG>Texto realzado</STRONG>

Texto con énfasis:

<EM>Texto con énfasis</EM>

Efectos en el texto

Texto en negrita: <B>Texto en negrita</B>Texto en itálica: <I>Texto en itálica</I>Texto ejemplo de código: <CODE>Texto ejemplo de código</CODE> Texto teletipo: <TT>Texto teletipo</TT> Texto subrayado: <U>Texto subrayado</U> Texto tachado: <STRIKE>Texto tachado</STRIKE>

Efectos en el texto

Texto de dirección:

<ADDRESS>Texto de dirección</ADDRESS>

Texto Superindice:

Texto normal <SUP>Texto Superíndice</SUP>

Texto subindice:

Texto normal <SUB>Texto Subíndice</SUB>

Texto grande:

<BIG>Texto grande</BIG>

Texto pequeño:

Texto normal <SMALL>Texto pequeño</SMALL>

Encabezados

Para definir distintos tamaños de letra, en HTML se utiliza el elemento lleno <Hx> y </Hx> donde x es un número que puede variar entre 1 y 6, siendo 1 el tamaño mayor. Se escribirán así: <H1> Texto de prueba (H1)</H1> <H2> Texto de prueba (H2)</H2> <H3> Texto de prueba (H3)</H3> <H4> Texto de prueba (H4)</H4> <H5> Texto de prueba (H5)</H5> <H6> Texto de prueba (H6)</H6>

Este tipo de elemento se suele utilizar para escribir encabezamientos, ya que después del cierre automáticamente el visualizador inserta un salto de párrafo.

Formato de fuente

<FONT>

La marca FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del documento específicos.

Aquí tienes la sintaxis correcta de la marca:<FONT FACE="arial" SIZE=5 COLOR=red>Tipo para formatear</FONT>Atributos de font:

Color: indica el color del texto (que puede expresarse asimismo en valores hexadecimales).

Face: indica el tipo de fuente que se visualizará.

Size: el tamaño de la fuente, que puede estar comprendido entre 1 y 7.

Uso de códigos

Dado que el HTML pretende ser un lenguaje universal, y que una página debe verse como su creador desea, sin importar si estamos ante un ordenador que "habla" en inglés o en español, o que tiene tal o cual sistema operativo, se ha creado una tabla de caracteres "conflictivos" (en realidad están todos, pero generalmente sólo se usa para caracteres especiales) que se escriben con un código en lugar de pulsar la tecla que lo contiene directamente. Por ejemplo, nuestra "Ñ" se escribirá: Ñ o bien Ñ Esto habrá que hacerlo con todos los caracteres que no sean las letras del alfabeto (mayúsculas y minúsculas), los números y unos pocos signos, como el punto, la coma, el guión y algunos otros.

Uso de códigos

Como se escriben ciertos caracteres o símbolos en Html. Las letras acentuadas, la letra ñ y otros símbolos no son reconocidos en HTML. En su lugar, al escribir directamente en Html hay que poner, por ejemplo: ejemplo: á en lugar de á é en lugar de éí en lugar de í ó en lugar de óú en lugar de ú ñ en lugar de ñetc... Y para letras mayúsculas acentuadas o la letra "ñ" mayúscula:Á É Í Ó Ú Ñ

Marquesinas y sonidos

<MARQUEE>

La etiqueta MARQUEE permite crear una banda (Marquesinas) con un texto en su interior que se desplaza.Aquí tienes la sintaxis correcta de la marca:<MARQUEE align=“Valor” Bgcolor=“Valor” Direction=“Valor” Scrolldelay=“Num” Loop=“Num”>Parametros de marquee :Align: indica si el texto se alinea en la zona top/bottom/middle.Behavior: tipo de movimiento del texto scroll/slide/Alternate .Bgcolor: indica el color de fondo de la marquesina.Width: indica la anchura de la marquesina puntos/porcentaje.Hspace: numero de pixeles de margen a la derecha/izquierda.Vspace: numero de pixeles de margen superior/inferior.

Marquesinas y sonidos

<BGSOUND>

La etiqueta BGSOUND es un comando que se utiliza en el IE, para insertar un sonido a la pagina al entrar.Aquí tienes la sintaxis correcta de la marca:<BGSOUND src=“Archivo midi o wav” Loop=“Num”>Parametros de BGSOUND:SRC: Fija la ruta en la que se encuentra el archivo de audio a reproducir.Loop: Determina el numero de veces que se debe ejecutar el archivo de audio.Balance: Determina el balance del sonido entre los dos altavoces del equipo.Volumen: Determina el volumen al que se oirá el sonido.

Listas y menús

Hay elementos que permiten crear texto con varios formatos de listado: Estos pueden ser ordenados <OL> (se refiere a numerados, no ordenados por algún criterio), desordenados <UL> (no numerados) y listados de definición <DL>. Veamos cómo es la sintaxis básica y apariencia de estos elementos. Esto es una lista ordenada (numerada):

1. Primera linea 2. Segunda linea

Se escribe (Sintaxis): <OL> <LI>Primera linea </LI><LI>Segunda linea </LI></OL>

Listas y menús

Esto es una lista desordenada (no numerada): Primera linea Segunda linea

Se escribe (Sintaxis): <UL type=SQUARE> <LI>Primera linea </LI><LI>Segunda linea </LI></UL>

Esto es una lista de definición: Primera linea

Segunda linea <DL> <DT>Primera linea </DD><DD>Segunda linea </DD> </DL>

Tablas

Las tablas son sin duda uno de los elementos más potentes del HTML. Con pocos elementos se pueden conseguir efectos espectaculares. En el interior de las celdas de una tabla, que pueden ser con borde visible o invisible, se puede poner cualquier cosa: texto de cualquier tamaño y color, imágenes, links... Por supuesto, además de permitir cualquier contenido, tienen sus propios atributos de alineación tanto horizontal como vertical, y atributos de dimensionado.

El elemento básico de definición de tabla es <TABLE> </TABLE> y en su interior se disponen los sub elementos <TR> para definir una fila (Row) <TH> para definir una cabecera (Header) <TD> para definir una celda de datos (Data). Estos sub elementos también han de llevar sus correspondientes cierres: </TR> </TH> </TD>.

Tablas

Una cabecera <TH> es lo mismo que una celda de datos <TD> pero de forma automática el texto de su contenido recibe los atributos de negrita y centrado. Sólo es posible definirlas al principio de las filas, de las columnas o de ambas a la vez.

Tablas

Veamos el significado de cada atributo: BORDER: Indica el ancho de los bordes de la tabla. Se mide en píxels. Si no se escribe este atributo, es equivalente a BORDER=0. BORDERCOLOR: Establece el color de los bordes de la tabla. No funciona igual en todos los navegadores. CELLSPACING: Indica el número de píxels que separan una celda de otra. Aunque pueda parecerlo, no hace lo mismo que BORDER. CELLPADDING: Indica los píxels de separación entre el borde de la celda y su contenido. Su valor por defecto es 1. WIDTH: Según donde se escriba, sirve para controlar el ancho de toda la tabla o de sus columnas. ALIGN: Indica la alineación horizontal de los datos dentro de las celdas. Puede tener tres valores: LEFT (izquierda), RIGHT (derecha) y CENTER (centro).

Tablas

Veamos el significado de cada atributo: VALIGN: Indica la alineación vertical de los datos dentro de las celdas. Puede tener tres valores: TOP (arriba), BOTTOM (abajo) y MIDDLE (centro). ROWSPAN: Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de filas. COLSPAN: Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de columnas. NOWRAP: Para impedir que las líneas de texto dentro de una celda se trunquen en los espacios en blanco. EVENTS: Se pueden capturar todos los eventos típicos de los navegadores en cualquiera de las partes de una tabla.

Tablas

Ejemplos de tablas Tabla básica de 3x2

<table border> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>d</td> <td>e</td> <td>f</td> </tr> </table>

Tablas

Ejemplos de tablas Ejemplos de línea expandida <ROWSPAN>

<TABLE BORDER> <TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD> </TR> <TR> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE>

Tablas

Ejemplos de tablas Ejemplo de columna expandida <COLSPAN>

<table border> <tr> <td>item 1</td> <td colspan=2>item 2</td> </tr> <tr> <td>item 3</td> <td>item 4</td> <td>item 5</td> </tr> </table>

Tablas

Ejemplos de tablas Dimensionado de celdas.

<table border cellpadding=10 cellspacing=0> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>d</td> <td>e</td> <td>f</td> </tr> </table>

Tablas

Ejemplos de tablas Dimensionado de celdas.

<table border cellpadding=0 cellspacing=10> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>d</td> <td>e</td> <td>f</td> </tr> </table>

Creación de enlaces (links)

El siguiente es sin duda el elemento más importante del HTML, ya que permite realmente "navegar" por uno o varios documentos, que pueden residir en cualquier parte, pareciéndonos que siempre estamos en el mismo; a esto se le llama hipertexto ya que con esta posibilidad, en realidad, nuestro documento puede ser infinito...

Todo esto lo consigue el elemento <A> (por Anchor, en inglés = ancla o punto de anclaje). En lo sucesivo le llamaremos enlace o simplemente link (en inglés link=eslabón o enlace). Sintaxis: <a Href=“dirección/referencia”>Texto, imagen</a>Ejemplo:<A HREF="http://www.google.com.pe"> Google</A>. Y se vería así: Google


PARÁMETROS DE A:Href: indica la referencia a un documento o una marca.Name: indica el lugar donde el browser , visualizara al saltar.Target: indica en que marco debe quedar visualizado el documento.Title: define un texto como comentario al pasar el mouse.Mailto: para establecer un enlace a un correo electrónico.MARCAS.Cuando un hiperenlace puede llevarnos a una zona de nuestro documento o de otro documento (punto de fijación) es necesario MARCAR el documento, este se realiza a través del parámetro name. La sintaxis es:

<A name=“Sección”>Texto, imagen</A>


El atributo NAME se utiliza para definir algo así como "un punto de aterrizaje" en cualquier línea del documento de destino. Se escribirá así: En el documento activo: <A HREF="http://www.miservidor.es/mifichero.htm#punto1"> Ir al punto 1</A> En el documento destino: <A NAME="punto1"></A> NAME también puede utilizarse para saltar de una línea a otra dentro de un mismo documento. Se escribirá así: Dentro del documento activo En la línea de partida: <A HREF="#punto1">Ir al punto 1</A> En la línea de destino <A NAME="punto1"></A>

Insertar Imágenes (img)

Insertar imágenes en un documento permite crear páginas mucho más atractivas. Según el tipo de gráficos utilizado se pueden conseguir efectos realmente sorprendentes. Para insertar una imagen en un documento HTML se utiliza el elemento <IMG>. Este elemento puede ir acompañado de los atributos SRC ALT ISMAP ALIGN WIDTH HEIGHT BORDER VSPACE HSPACE.

Las imágenes utilizadas pueden estar en formato GIF o JPG. Estos formatos son interpretados directamente por el navegador. La diferencia entre estos dos formatos es su nivel de compresión. En efecto, el JPG tiene una compresión mucho mayor que el GIF, por lo que suele ser el formato más utilizado en el mundo web, donde siempre se debe perseguir que las páginas sean lo más ligeras posible.


Atributos de la etiqueta <IMG>.

Src. Se utiliza para indicar el nombre y la ubicación del archivo de la imagen que se desea insertar en la pagina.

Alt. Se utiliza para insertar un comentario.

Width y height. Permite determinar el ancho y alto de la imagen.

Hspace y Vspace. Permite establecerla distancia en pixel de la imagen de los objetos que se encuentran a los cuatro lados.

Align. Define la posición de la imagen en relación al texto existente antes y despues de la misma. Existen varias opciones: top, middle, bottom, lefth, right.

Border. Permite aplicar border a la imagen.


Veamos ejemplos del uso de <IMG>:

Imagen alineada a la izquierda (texto a la derecha).

<IMG SRC="sugeren.gif“ALIGN=“LEFT” >texto texto texto texto texto texto.

texto texto texto texto texto texto.

Imagen alineada a la derecha y texto alineado a la izquierda.

<IMG SRC="sugeren.gif" ALIGN=“RIGHT”> texto texto texto texto texto texto texto texto.

texto texto texto texto texto texto texto texto.


Veamos ejemplos varios :

Imagen alineada a la izquierda.Texto alineado arriba

<IMG SRC="sugeren.gif" ALIGN=TOP> texto texto texto texto texto texto exto texto texto texto texto texto.

Imagen alineada a la izquierda.Texto alineado al centro

<IMG SRC="sugeren.gif" ALIGN=MIDDLE> texto texto texto texto texto texto exto texto texto texto texto texto.

Imagen redimensionada a más.Texto alineado a la derecha de la imagen

<IMG SRC="sugeren.gif" align=“left” width=272 height=92 > texto texto texto texto texto texto texto texto texto texto texto texto.


Veamos ejemplos varios :Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen. Espacios verticales y horizontales vacíos forzados.

texto texto texto texto texto texto texzto texto texto texto texto texto <IMG SRC="sugeren.gif"> ALIGN=LEFT HSPACE=100 VSPACE=30> texto texto texto texto texto texto texto texto texto texto texto texto.

Usar una imagen como punto de montaje de un link

texto texto <A HREF="indice.htm"><IMG SRC="sugeren.gif" ></A>texto texto.

Imagen alineada a la izquierda con marco. Texto alineado a la derecha de la imagen

<IMG SRC="sugeren.gif" ALIGN=LEFT BORDER=5> texto texto texto texto texto texto texto texto texto texto texto texto.

Marcos o Frames

Los frames (marcos o cuadros) permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se cargue una página html distinta.

Las paginas que contiene marcos no pueden contener el comando Body inicialmente, solo pueden contener una sección Head y una Frameset, pero pueden incluirse dentro del Frame.

Sintaxis:

<frameset>

Esta etiqueta indica al navegador donde empiezan y donde acaban los marcos, el tipo y la forma que tendrán. Los parámetros de esta etiqueta son: Cols: Parámetro que permite establecer el numero de

columnas. Los valores que se asignan determinan el ancho en pixeles o en porcentaje de la ventana.

Marcos o Frames

Rows: Parámetro que permite establecer el numero de filas. Los valores que se asignan determinan el alto en pixeles o en porcentaje de la ventana.

Frameborder: Permite definir si los marcos van a tener un borde o no.

Border: Define el grosor del borde a traves de un valor numerico (pixeles).

Framespacing: A traves de un numero entero permite definir el espacio entre los marcos.

BorderColor: indica el color del frame o marco.

<Frame>

Esta etiqueta permite tan solo definir las características de un determinado marco. Este comando tiene los siguientes argumentos:

Marcos o Frames Name, Parámetro que asigna un nombre al marco. SRC, Indica el nombre y la ubicación del documento o

archivo que ocupara dicho marco. Scrolling, Permite visualizar o no la barra de

navegación. Noresize, Permite no cambiar el tamaño de los

marcos. Frameborder, Permite establecer o eliminar los

bordes del marco. Marginwidth, Permite cambiar los márgenes

horizontales dentro de un marco. Se representa en pixeles.

Marginheight, Permite cambiar los márgenes verticales dentro de un marco. Se representa en pixeles.

Target, Lo más interesante de los frames es la posibilidad que tienen de interactuar entre si. Para conseguir esto hay que darle un nombre a los frames y luego indicar en el enlace donde se va a cargar mediante el atributo TARGET.

lenguaje xhtml

Documents