plan-de-trabajo-colegiado en una institucion educativa
Introducción a xhtml
1. 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.
2. 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.
3. Competencias a Desarrollar
No.
COMPETENCIA
C1
Escucha, interpreta y emite mensajes pertinentes en distintos
contextos mediante la utilización de medios, códigos y
herramientas apropiados.
C2
Desarrolla innovaciones y propone soluciones a problemas a
partir de métodos establecidos.
C7
Domina 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.
4. Conocimientos Previos
¿Qué es una página web?
¿Qué es una etiqueta hablando del lenguaje
XHTML?
¿Qué entiendes por dar
formato a un texto?
5. ¿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.
6. 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.
7. 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">
8. 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 />
9. 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.
10. 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.
11. 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">.
12. Reglas
5. 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.
13. 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>
14. 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.
15. 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: JuanitoSimpson@gmail.com
<p> Página creada por: Maria Matínez de Morales</p>
</body>
</html>
17. 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.
18.
19. Tarea
• Leer el documento con las etiquetas básicas
para XHTML