introducción a xhtml
TRANSCRIPT
A. Elaboración de páginas Web estáticas mediante el
lenguaje XHTML.1.2.1 Desarrolla una página
Web en XHTML y hojas de estilo, sobre un tema de su interés, con
vínculos hacia otras páginas.
Objetivo de la Sesión
El alumno identificará y será capaz de utilizar las reglas básicas para la creación de páginas Web con el lenguaje XHTM así como de las etiquetas básicas para dar formato al texto de las mismas.
Competencias a Desarrollar
No. COMPETENCIA
C1Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante la utilización de medios, códigos y herramientas apropiados.
C2Desarrolla innovaciones y propone soluciones a problemas a partir de métodos establecidos.
C7Domina herramientas de desarrollo para sitios web mediante el uso de funcionalidades en la construcción de aplicaciones web, enlaces, presentación de datos y generación de información estática y dinámica en el Internet.
Conocimientos Previos
¿Qué es una página web?¿Qué es una etiqueta hablando del lenguaje XHTML?¿Qué entiendes por dar formato a un texto?
¿Qué es XHTML?
Actualmente el requerimiento para navegar en la Web no se reduce únicamente a la utilización de una computadora.Debido al uso cada vez más generalizado de dispositivos de navegación, fue necesario crear herramientas que permitan el manejo de la información de una manera estandarizada y lo más universalmente posible. Por esta razón surge XHTML (e X tensible H yper t ext M arkup L anguage o Lenguaje Extensible de Marcado de Hipertexto), con un etiquetado más estricto que HTML, que permite una correcta interpretación de la información, independientemente del dispositivo con que se accede a ella.
Primeros pasos hacia XHTML
Paso 1: indicarle al navegador el tipo de documento que va a recibir.
Actualmente existen tres tipos de documentos XHTML que podemos usar: Estricto, Transicional y Frameset. El primero implica que el documento en su totalidad se apega al 100% de las normas, el segundo permite omitir algunas de estas normas que aún son de uso común entre los desarrolladores, y la tercera permite desarrollar un sitio con marcos o frames.
Paso 1
Utilizaremos el tipo transicional por lo que al inicio de nuestra página deberemos colocar el siguiente código.
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//WC3//DTD XHTML 1.0 Transitional//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Paso 2: Las reglas
Apegarse a las reglas básicas de XHTML que son:1. Si no lo cierras, no sirve
En XHTML no puede haber elementos sin cierre. Un<p> debe cerrarse con un </p>, un <li> debe cerrarse con un </li>, y así todos los elementos.
Aquellos que son independientes como <br>, <hr> y los <input>, deben cerrarse a si mismos de esta forma: <br />, <hr /> y <input />
Reglas
2. Anida de forma lógica
Los elementos en un documento XHTML deben cerrarse en el orden inverso que fueron abiertos.De tal forma que <div><p><strong> debe cerrarse en el orden </strong></p></div>. No puedes saltarte un cierre, eso convertiría tu documento en "Mal Formado", y fallaría su validación.
Reglas
3. No uses mayúsculas
Tanto los nombres de las etiquetas como los nombres de los atributos deben escribirse en minúsculas.Esto quiere decir que la siguiente etiqueta: <DIV CLASS="EncabezadoPrincipal"> es incorrecta, su forma correcta sería: <div class="EncabezadoPrincipal">, nota que el valor del atributo si puede tener mayúsculas, la regla se aplica para los nombres de las etiquetas y atributos, no para los valores o contenido de los mismos.
Reglas
4. Usa las comillas
Todos los atributos de cualquier etiqueta deben encerrarse entre comillas.La forma correcta de asignar valores a los atributos de una etiqueta es la siguiente: <img src="mi_imagen.gif" height="50" width="150" alt="Mi Foto">.
Reglas5. No lo uses para diseñar
Piensa en XHTML como el medio para organizar y estructurar tu documento, no como un medio para darle formato. Olvidate de los <font>, los <… background>, <…align>, etcétera. Más adelante veremos como los estándares nos dan una herramienta para cada cosa, y las hojas de estilo se presentan como una excelente forma de dar color y vida a un documento XHTML.
Etiquetas
Las etiquetas son identificadores que permiten establecer el tipo de elemento o formato para todo aquello que contiene la página web.• Deben ir entre signos de < > <body>• Cuando se va a cerrar la etiqueta debe llevar
una / antes del nombre de la misma </body>
Las primeras etiquetas
<body> Todo lo que esté contenido entre esta etiqueta es lo que se verá en la página.
<head> No se muestra dentro del cuerpo de la página.<title> Va dentro de la anterior. Solo se muestra en la
barra de título y/o pestaña.<p> Funciona como un punto y aparte.<font> Permite establecer variantes para el tipo de
texto.<br> Funciona como un enter.<h > Encabezados.
La primera página con formato<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//WC3//DTD XHTML 1.0 Transitional//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head><title>Ejercicio 2</title>
</head><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"><body bgcolor="#00FFFF"> <h1> Datos personales</h1> <p> A continuación de muestran los <b><u>datos personales</u></b> de los alumnos dados de
alta en la <i>plataforma moodle.</i></p>Nombre: Juanito del Río Mares Edad: 15 años Dirección: Av. Siempre Viva #345 e-mail: [email protected]<p> Página creada por: Maria Matínez de Morales</p></body></html>
Página
Ejercicio
Elabore el código para una página web que tenga una apariencia similar a la siguiente imagen.
• El título de la página es Práctica 1.• El color de fondo es opcional pero debe ir en
formato hexadecimal.
Tarea
• Leer el documento con las etiquetas básicas para XHTML
¿Alguna pregunta?
M U C H A S