Manual de XHTML
Conceptos
CARACTERISTICAS BASICAS
Programa Hola Mundo
Comentarios
Etiquetas de inicio y fin de código
Cabecera (head) y cuerpo del documento (body)
Título
Párrafos
Validación de una página
FORMATEAR UN DOCUMENTO
Encabezados
Hipervínculos
Salto de Línea
Línea Horizontal
Letra Negrita
Superíndice
Subíndice
Tachado
Insertar Códigos Especiales
Envío de correo electrónico
IMAGENES
Insertar imágenes
Imágenes con hipervínculos
LISTAS
Listas sin Ordenar
Listas Ordenadas
Listas Ordenadas con Letras
Listas Ordenadas con Números Romanos
Listas Anidadas
TABLAS
Tablas
Tablas con Borde y Anchura
Tablas con Título, Encabezado y Pie de Página
CONCEPTOS BASICOS
XHTML ha reemplazado a HTML como la principal forma de escribir una página web. XHTML es mas robusto y con mas características extensibles que HTML. Las páginas XHTML al igual que las HTML conservan la misma extensión (.html ó .htm) y el mismo formato (texto plano TXT).
CARACTERISTICAS BASICAS
<?xml version = "1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Mi primera Página XHTML -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Programa Hola Mundo
</head>
<body>
Hola Mundo en XHTML!
</body>
</html>
Un comentario es un texto que inserta el programador en su código que sirve para hacerlo mas legible. Cuando el navegador lee un comentario no ejecuta ninguna operación:
<!-- Mi primera Página XHTML -->
Existen etiquetas de inicio fin de código las cuales son:
<html>
...
</html>
Entre estas etiquetas de inicio y fin se encuentra el código de la página.
Todo documento HTML esta compuesto por dos secciones: head y body y cada uno tiene sus etiquetas de inicio y fin. Se diferencian en cuanto a que la etiqueta de fin o cierre de etiqueta lleva incluida la diagonal (/):
<head>
...
</head>
<body>
...
</body>
La sección de cabecera (head) contiene información acerca del código XHTML, tal como el título del documento, instrucciones del formato del documento (como style sheets) y descripción de scripts a ejecutar (como javascript). En la sección del cuerpo del documento (body) se encuentra el contenido de la página web.
La etiqueta de titulo (<title>) nos indica el nombre de la página web. Este nombre es que aparecerá en la barra de título de la ventana del navegador:
<title>Programa Hola Mundo</title>
En las etiquetas de párrafos (<p>) se introduce el texto que el navegador mostrará en pantalla
<p>Hola Mundo en XHTML!</p>
Una página escrita en XHTML puede llegar a ser muy complicada, por lo cual se recomienda validar la sintaxis de la página, con el objetivo de que el navegador interprete adecuadamente lo que el programador trató de codificar. Para validar una página la W3C (World Wide Web Consortium) ha desarrollado un servicio de validación, la cual se encuentra en la siguiente dirección:
http://validator.w3.org/file-upload.html
Una vez en esta dirección se teclea la dirección de la página a verificar si es que ya se encuentra en internet, o se le indica el archivo local de mi computadora para que lo revise.
FORMATEAR UN DOCUMENTO
XHMTL tiene 6 tipos de encabezados, los cuales sirven para poner el título en alguna parte de una página web. El más grande de tamaño de letra es el 1 y el mas pequeño es el 6.
<body>
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>
</body>
y el resultado en pantalla se vería así:
Encabezado 1
Encabezado 2
Encabezado 3
Encabezado 4
Encabezado 5
Encabezado 6
Un hipervínculo es una liga que apunta hacia otra página web y sirve para ir navegando entre diferentes página. Para crear un hipervínculo se utiliza la etiqueta de anchura de elemento (<a>) seguida de la dirección a hacer referencia (href) y el texto que se oberva en el navegador donde se hará click:
<body>
<p><a href = "http://www.itmorelia.edu.mx">Página del ITM</a></p>
</body>
y el resultado en pantalla se vería así:
Para hacer un salto de línea:
<br />
Para insertar una línea horizontal:
<hr />
Para hacer que un texto en una página aparezca negrita (mas marcada, en inglés Bold) se utiliza la etiqueta <strong>:
<strong>Bienvenido a mi página</strong>
y el resultado en pantalla se vería así:
Bienvenido a mi página
Para insertar un caracter como superíndice:
1x10<sup>8</sup>
y el resultado en pantalla se vería así:
1x108
Para insertar un caracter como subindice:
H<sub>2</sub>O
y el resultado en pantalla se vería así:
H2O
Para tachar un texto:
<del>Tachado</del>
y el resultado en pantalla se vería así:
Para insertar códigos especiales:
Disco de 5 & frac14;
sin espacio en blanco después del &. Y el resultado en pantalla se vería así:
Disco de 5¼
Para ver una lista de todos los códigos especiales consultar:
http://www.w3.org/TR/REC-html40/sgml/entities.html
En una página web se puede insertar un hipervínculo especial que cuando se hace click encima de el, manda llamar al servicio de correo electrónico que se tenga por default en ese momento (por ejemplo Outlook) con el objeto de enviar un correo electrónico hacia cierta persona definida en el etiqueta href seguida de mailto:
<p>Mi dirección de correo electrónico es
<a href ="mailto:rogeplus@yahoo.com.mx">rogeplus@yahoo.com.mx</a>
</p>
y el resultado en pantalla se vería así:
Mi dirección de correo electrónico es rogeplus@yahoo.com.mx
IMAGENES
Los formatos de imágenes mas utilizados y que todos los navegadores soportan son GIF, JPEG y PNG . Para insertar una imagen en una página web se utiliza la etiqueta img y después con src se indica el nombre del archivo, y como atributos opcionales se utiliza width y height para indicar el ancho y altura de una imagen. Si se omiten los valores de width y height se utilizarán los valores del tamaño de la imagen original para ponerla dentro de una página web. A continuación se muestra el código sin parámetros:
<img src ="valid-xhtml10.png"/>
y el resultado en pantalla se vería así:
Ahora el código con parámetros:
<img src = "valid-xhtml10.png" height = "100" width = "100"/>
y el resultado en pantalla se vería así:
Aunque en esta última codificación hay que tener cuidado con los valores de ancho y altura, ya que si corresponden en proporción con los valores del tamaño de la imagen real, existirá una distorsión. También existe el comando alt cuando se inserta una imagen, y en este comando se le especifica un mensaje el cual aparecerá en pantalla cuando el cursor del mouse pase por encima de la imagen. El texto de alt por lo general hace una descripción de la imagen:
<img src ="valid-xhtml10.png" alt="logotipo de validación" />
y el resultado en pantalla se vería así:
Una imagen puede contener un hipervínculo, asi que al hacer click encima de ella se cargará una nueva dirección, para ello se pone el código de la imagen dentro del código de un hipervínculo. Por ejemplo para el siguiente código:
<a href="index.html"><img alt="Mi logotipo" src="rfe_di01.jpg" /></a>
Se carga una imagen que al hacer click sobre ella nos envía a la página principal, y pantalla aparecería así:
LISTAS
Para poner una lista sin ordenar (sin poner un número a cada renglón):
<ul>
<li>Lista 1</li>
<li>Lista 2</li>
</ul>
y el resultado en pantalla se vería así:
- Lista 1
- Lista 2
Para poner una lista ordenada (le pone un número a cada renglón):
<ol>
<li>Lista 1</li>
<li>Lista 2</li>
</ol>
y el resultado en pantalla se vería así:
- Lista 1
- Lista 2
Para poner una lista ordenada con letras:
<ol type="a">
<li>Lista 1</li>
<li>Lista 2</li>
</ol>
y el resultado en pantalla se vería así:
- Lista 1
- Lista 2
Para poner una lista ordenada con números romanos:
<ol type="I">
<li>Lista 1</li>
<li>Lista 2</li>
</ol>
y el resultado en pantalla se vería así:
- Lista 1
- Lista 2
Se pueden hacer listas una dentro de otra de diferentes tipos, por ejemplo:
<ul>
<li>primero
<ol type="a">
<li>inciso a</li>
<li>inciso b</li>
</ol>
</li>
<li>segundo
<ol type="I">
<li>uno</li>
<li>dos</li>
</ol>
</li>
</ul>
y el resultado en pantalla se vería así:
- primero
- inciso a
- inciso b
- segundo
- uno
- dos
TABLAS
Para crear una tabla de 2 x 2 (2 renglones y 2 columnas):
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
y el resultado en pantalla se vería así:
| 1 | 2 |
| 3 | 4 |
Tabla de 2x2 con borde y una anchura de 30% de la ventana:
<table border="1" width="30%">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
y el resultado en pantalla se vería así:
| 1 | 2 |
| 3 | 4 |
Tabla de 2x2 con borde y una anchura de 30% de la ventana, con titulo, encabezado y pie de página:
<table border="1" width="30%">
<caption>Ingresos</caption>
<thead>
<tr>
<th>Mes</th>
<th>Cantidad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Enero</td>
<td>$100.00</td>
</tr>
<tr>
<td>Febrero</td>
<td>$200.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<th>$300.00</th>
</tr>
</tfoot>
</table>
y el resultado en pantalla se vería así:
| Mes | Cantidad |
|---|---|
| Enero | $100.00 |
| Febrero | $200.00 |
| Total | $300.00 |
Portal de Tecnología desarrollado por: Rogelio Ferreira Escutia
