Td corrigé EDICIÓN HTML pdf

EDICIÓN HTML

12 Sep 2005 ... Es una opción acertada, ya que la utilización de CSS es un método mucho más versátil y potente que será ...... <td> Entre estas etiquetas irá el contenido de la primera celda </td> ...... Valida el documento y corrige el código.




part of the document







EDICIÓN HTML







ÍNDICE
 TOC \o "1-1" \h \z \u  HYPERLINK \l "_Toc224130606" Información General  PAGEREF _Toc224130606 \h 5
 HYPERLINK \l "_Toc224130607" Introducción - ¿Qué es un hipertexto?  PAGEREF _Toc224130607 \h 6
 HYPERLINK \l "_Toc224130608" Introducción>>Normas de estilo: lo esencial  PAGEREF _Toc224130608 \h 9
 HYPERLINK \l "_Toc224130609" Introducción>>Herramientas  PAGEREF _Toc224130609 \h 11
 HYPERLINK \l "_Toc224130610" La base>>Entorno de trabajo  PAGEREF _Toc224130610 \h 18
 HYPERLINK \l "_Toc224130611" La base>>Etiquetas html  PAGEREF _Toc224130611 \h 19
 HYPERLINK \l "_Toc224130612" La base>>Estructura básica  PAGEREF _Toc224130612 \h 20
 HYPERLINK \l "_Toc224130613" La base>>Texto - Tipos y Cuerpos  PAGEREF _Toc224130613 \h 23
 HYPERLINK \l "_Toc224130614" La base>>Colores y fondos de página  PAGEREF _Toc224130614 \h 27
 HYPERLINK \l "_Toc224130615" La base>>Imágenes de fondo  PAGEREF _Toc224130615 \h 33
 HYPERLINK \l "_Toc224130616" La base>>Etiquetas meta  PAGEREF _Toc224130616 \h 35
 HYPERLINK \l "_Toc224130617" Tablas>>Introducción  PAGEREF _Toc224130617 \h 38
 HYPERLINK \l "_Toc224130618" Tablas>>Crear tablas  PAGEREF _Toc224130618 \h 40
 HYPERLINK \l "_Toc224130619" Tablas>>Más opciones de las tablas  PAGEREF _Toc224130619 \h 43
 HYPERLINK \l "_Toc224130620" Multimedia>>Imagen  PAGEREF _Toc224130620 \h 52
 HYPERLINK \l "_Toc224130621" Multimedia>>Sonido  PAGEREF _Toc224130621 \h 57
 HYPERLINK \l "_Toc224130622" Vínculos>>Externos  PAGEREF _Toc224130622 \h 59
 HYPERLINK \l "_Toc224130623" Vínculos>>Internos  PAGEREF _Toc224130623 \h 65
 HYPERLINK \l "_Toc224130624" Vínculos>>Tablas de contenido  PAGEREF _Toc224130624 \h 71
 HYPERLINK \l "_Toc224130625" Vínculos>>De descarga  PAGEREF _Toc224130625 \h 73
 HYPERLINK \l "_Toc224130626" Vínculos>>Correo  PAGEREF _Toc224130626 \h 74
 HYPERLINK \l "_Toc224130627" Vínculos>>Mapas sensibles  PAGEREF _Toc224130627 \h 78
 HYPERLINK \l "_Toc224130628" Vínculos>>Enlaces antispam  PAGEREF _Toc224130628 \h 82
 HYPERLINK \l "_Toc224130629" Vínculos>>Redireccionamiento con etiquetas meta  PAGEREF _Toc224130629 \h 85
 HYPERLINK \l "_Toc224130630" Validación  PAGEREF _Toc224130630 \h 86
 HYPERLINK \l "_Toc224130631" Plantillas  PAGEREF _Toc224130631 \h 88
 HYPERLINK \l "_Toc224130632" Formularios>>El contenedor principal  PAGEREF _Toc224130632 \h 96
 HYPERLINK \l "_Toc224130633" Formularios>>Tipos de campo  PAGEREF _Toc224130633 \h 99
 HYPERLINK \l "_Toc224130634" Formularios>>Antispam  PAGEREF _Toc224130634 \h 110
 HYPERLINK \l "_Toc224130635" Formularios>>Servicios gratuitos de procesado y envýÿo  PAGEREF _Toc224130635 \h 111
 HYPERLINK \l "_Toc224130636" Marcos>>¿Qué son?  PAGEREF _Toc224130636 \h 112
 HYPERLINK \l "_Toc224130637" Marcos>>Crear marcos  PAGEREF _Toc224130637 \h 113
 HYPERLINK \l "_Toc224130638" Marcos>>El marco fantasma  PAGEREF _Toc224130638 \h 117
 HYPERLINK \l "_Toc224130639" Marcos>>Vínculos  PAGEREF _Toc224130639 \h 119
 HYPERLINK \l "_Toc224130640" Marcos>>Iframes  PAGEREF _Toc224130640 \h 123
 HYPERLINK \l "_Toc224130641" XHTML  PAGEREF _Toc224130641 \h 125
 HYPERLINK \l "_Toc224130642" Estilos>>Introducción  PAGEREF _Toc224130642 \h 130
 HYPERLINK \l "_Toc224130643" Estilos>>Primeros pasos  PAGEREF _Toc224130643 \h 132
 HYPERLINK \l "_Toc224130644" Estilos>>Estilos para el texto  PAGEREF _Toc224130644 \h 152
 HYPERLINK \l "_Toc224130645" Estilos>>Estilos para fuentes  PAGEREF _Toc224130645 \h 156
 HYPERLINK \l "_Toc224130646" Estilos>>Fondos  PAGEREF _Toc224130646 \h 160
 HYPERLINK \l "_Toc224130647" Estilos>>Bordes  PAGEREF _Toc224130647 \h 163
 HYPERLINK \l "_Toc224130648" Estilos>>Márgenes y rellenos  PAGEREF _Toc224130648 \h 166
 HYPERLINK \l "_Toc224130649" Estilos>>Listas  PAGEREF _Toc224130649 \h 171
 HYPERLINK \l "_Toc224130650" Estilos>>Diseño visual  PAGEREF _Toc224130650 \h 174
 HYPERLINK \l "_Toc224130651" Estilos>>Técnicas  PAGEREF _Toc224130651 \h 181
 HYPERLINK \l "_Toc224130652" Publicación>>gestor NVU  PAGEREF _Toc224130652 \h 184
 HYPERLINK \l "_Toc224130653" Publicación>>Filezilla  PAGEREF _Toc224130653 \h 191
 HYPERLINK \l "_Toc224130654" Publicación>>Explorador Win98  PAGEREF _Toc224130654 \h 196
 HYPERLINK \l "_Toc224130655" Publicación>>Windows XP  PAGEREF _Toc224130655 \h 198
 HYPERLINK \l "_Toc224130656" Publicación>>gFTP  PAGEREF _Toc224130656 \h 206
 HYPERLINK \l "_Toc224130657" Recursos>>Web de cole  PAGEREF _Toc224130657 \h 209
 HYPERLINK \l "_Toc224130658" Recursos>>Imágenes libres  PAGEREF _Toc224130658 \h 210
 HYPERLINK \l "_Toc224130659" Recursos>>Bookmarlets  PAGEREF _Toc224130659 \h 211
 HYPERLINK \l "_Toc224130660" Recursos>>Favicon  PAGEREF _Toc224130660 \h 212
 HYPERLINK \l "_Toc224130661" Recursos>>Extensiones  PAGEREF _Toc224130661 \h 213
 HYPERLINK \l "_Toc224130662" Recursos>>Parche Ie7  PAGEREF _Toc224130662 \h 215
 HYPERLINK \l "_Toc224130663" Recursos>>Estructuras  PAGEREF _Toc224130663 \h 216
 HYPERLINK \l "_Toc224130664" Recursos>>Sitios para aprender CSS  PAGEREF _Toc224130664 \h 218
 HYPERLINK \l "_Toc224130665" Recursos>>Carácteres especiales  PAGEREF _Toc224130665 \h 219
 HYPERLINK \l "_Toc224130666" Recursos>>Referencias web  PAGEREF _Toc224130666 \h 221
 HYPERLINK \l "_Toc224130667" Accesibilidad>>Directrices  PAGEREF _Toc224130667 \h 222
 HYPERLINK \l "_Toc224130668" Accesibilidad>>Programas y recursos  PAGEREF _Toc224130668 \h 223
 HYPERLINK \l "_Toc224130669" Errores  PAGEREF _Toc224130669 \h 228
 Información General
A continuación encontrarás un conjunto de páginas WEB en las que se ha pretendido combinar un mínimo de teoría con el máximo posible de práctica, de forma que se genere un proceso de experimentación que te permita un aprendizaje autónomo.
Los objetivos que se plantean son: 
Que conozcas la estructura básica de un documento HTML. 
Que aprendas a construir una página HTML utilizando los recursos elementales y algunos de nivel intermedio. 
Que adquieras las bases necesarias para poder continuar de forma autónoma el aprendizaje sobre elementos avanzados de lenguaje HTML. 
Para conseguir estos objetivos contamos con un tema central de trabajo: construir y publicar un sitio WEB de contenido educativo compuesto de varias páginas con sus correspondientes enlaces. Los recursos para llevar a cabo esta tarea los iremos trabajando paso a paso, pero deberías tenerla presente desde el momento de iniciar el curso.
Los materiales que encontrarás recogen una serie de explicaciones sobre los diferentes elementos que constituyen las páginas WEB y un conjunto de ejercicios intercalados para ir practicando los conceptos explicados.
La navegación por los contenidos del curso puede hacerse siguiendo una secuencia lineal, igual que si se fueran pasando una a una las páginas de un manual o bien de forma no secuencial para lo que se utilizará el menú que tendrás presente de forma constante en la zona izquierda de la pantalla. Puedes plantearte una división de los contenidos en dos fases:
Una fase de de iniciación te permitirá tomar contacto con los elementos básicos del lenguaje HTML para crear las primeras páginas. Incluye los contenidos correspondientes a los apartados Introducción, Formato, Tablas, Multimedia (Imágenes), Vínculos y Publicación.
Para adquirir una visión más completa se añadirían el resto de los módulos: Multimedia (Sonidos), Formularios, Marcos, Accesibilidad y, especialmente, Estilos.
La sección de recursos te brinda una selección de algunas páginas desde las cuales puedes encontrar multitud de fuentes con las que completar y enriquecer tu aprendizaje.
En cuanto a la presentación de la documentación, junto a las explicaciones mediante textos e imágenes encontrarás zonas del manual diferenciadas gráficamente:
Crear una sitio WEB es algo más que amontonar información más o menos correctamente relacionada. Como en todo medio de comunicación se han ido desarrollando una serie de normas de estilo que será conveniente respetar. No pretendemos ser estrictos, pero ten en cuenta que la habilidad para navegar se adquiere gracias a que las páginas por las que pasamos respetan un conjunto similar de convenciones y no tenemos que ir descubriendo nuevos indicadores a cada paso. Las encontrarás en este tipo de recuadros.
Detrás de cada página WEB hay unos códigos que permiten que la veamos tal como se presenta en nuestra pantalla. Aunque trabajarás fundamentalmente en un entorno gráfico en el que las herramientas que utilices irán construyendo el código hay algunos momentos en los que se hace imprescindible recurrir a la edición manual del mismo. La presentación en pantalla será como la de este bloque.
El tercer tipo de cuadros será el correspondiente a las prácticas. Siempre encontrarás un número identificativo de la actividad  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/numeracion/catorce.gif" \* MERGEFORMATINET que te permitirá localizar rápidamente los ejercicios.
Este tipo de señal te avisará de alguna cuestión relevante. Puede tratarse de un detalle que puede alterar la forma de llevar a cabo un procedimiento o provocar un error, de alguna advertencia importante respecto a códigos o estilos o, en general, alguna nota que te puede evitar más de un quebradero de cabeza.
La secuencia de prácticas se inicia trabajando con el bloc de notas o cualquier editor de texto plano si estás trabajando con Linux. Si ya has tenido algún contacto con alguna otra herramienta de diseño de páginas WEB puede parecerte que esta fase sobra. Como autor del curso considero que es un recurso metodológico necesario para hacer patentes las características del lenguaje HTML y por ello los tres primeros ejercicios son de este tipo. A partir de la cuarta práctica iniciaremos el trabajo con el editor gráfico.
SEGUIMIENTO Y DESARROLLO DEL CURSO
El seguimiento y desarrollo del curso implica la lectura detenida de la documentación del mismo, así como la realización de los ejercicios que en él se proponen
LOS EJERCICIOS
Los ejercicios prácticos proponen, de forma guiada, todas las actuaciones que el alumno ha de llevar a cabo.
Se aconseja a los alumnos y alumnas crear una carpeta o subdirectorio de trabajo en el ordenador del usuario para ir guardando en un mismo sitio el resultado de los ejercicios realizados cuando la actividad  lo requiera.
  USO Y CONSULTA DE LOS DOCUMENTOS
Este material está optimizado para una configuración de pantalla de 1024 x 768 con 16 bits de colores, por lo que si se utilizan configuraciones distintas pueden producirse algunas variaciones en la presentación en pantalla de la información.
Introducción - ¿Qué es un hipertexto? HYPERLINK "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_1/general3.htm" \o "avanzar" 
¿Qué es un hipertexto?
El concepto de hipertexto responde, fundamentalmente, a una forma de concebir el acceso a la información.
El texto impreso podría considerarse un modelo de presentación de la información de manera lineal: la página 2 sucede a la 1, y así sucesivamente, del prólogo al epílogo.
Sin embargo existen, incluso en soporte impreso, materiales en los que el lector es quien establece la secuencia de acceso a la información. Podemos mencionar ejemplos entre grandes obras literarias, como "Rayuela" de Julio Cortázar, en modestas obras de literatura infantil, del estilo "Construye tu propia aventura" o, en el entorno más cotidiano, la información contenida en un diario.
Posiblemente sea el modelo del diario el que más fácilmente nos pueda dar pistas sobre lo que es un hipertexto. Prácticamente nadie lee un periódico desde la primera a la última página: seleccionamos la información que consideramos más interesante a partir de lo que aparece en portada y es a ese artículo al que acudimos en primer lugar. Esta posibilidad de seleccionar el itinerario que vamos a seguir es uno de los elementos que definen al hipertexto.
Ahora bien, aunque pueda servirnos para asimilar de forma intuitiva el concepto de hipertexto, tendremos que considerar un segundo elemento para definirlo: la posibilidad de incluir, junto a la información escrita y la imagen fija, el sonido y la imagen en movimiento.
Aunque es posible seguir buscando signos identificativos del hipertexto podemos dejar esta primera aproximación en este punto. Por tanto, a los efectos de este curso, consideraremos hipertexto al conjunto de información en soporte multimedia que se estructura mediante enlaces entre los diversos elementos, de forma que el usuario pueda acceder a ella de forma ágil y teniendo la posibilidad de establecer su propio itinerario de "lectura".
¿Qué es el HTML?
Una de las primeras preguntas que se hace uno al acercarse a la creación de páginas WEB es qué significa eso de HTML.
Las siglas HTML son las iniciales de la expresión en inglés HyperText Markup Language. Traducido al castellano sería Lenguaje de Etiquetas de Hipertexto.
Se trata de un conjunto de etiquetas que se van intercalando entre el texto de forma que los programas que utilizamos para navegar por la Red sepan qué es lo que tienen que mostrar cuando accedemos a una página y cómo deben presentarlo en la pantalla.
Dada la constante evolución de Internet, el lenguaje HTML ha ido igualmente evolucionando de forma rápida e incorporando especificaciones a través de las sucesivas versiones del mismo.
Existe un organismo internacional independiente ( HYPERLINK "http://www.w3.org" \t "_blank"  World Wide Web Consortium  HYPERLINK "http://www.w3.org" \t "_blank" o HYPERLINK "http://www.w3.org" \t "_blank"  W3C) que se encarga de ir fijando cuáles son las etiquetas válidas pero, a pesar de ello, la batalla comercial que se ha desarrollado en torno a los navegadores para Internet ha originado situaciones en las que han aparecido etiquetas propietarias de un determinado programa. 
Llamamos etiquetas propietarias a aquellas que sólo son interpretadas correctamente por un navegador, mientras que el resto de los navegadores las ignora. Como consecuencia de ello hay efectos que se pueden ver cuando se visita una página con el navegador Internet Explorer de Microsoft y que no aparecen con otros navegadores o viceversa.
Antes de ponernos a trabajar con nuestras páginas WEB tendremos que considerar que algunas de las cosas que nos resultan muy sencillas de hacer con un procesador de texto no lo van a ser tanto cuando estemos creando una página para la Red. El motivo es que el lenguaje HTML surgió con la finalidad de permitir organizar de forma estructurada la información (fundamentalmente textual) para su consulta por la red, pero no tenía intención de preocuparse por el aspecto gráfico de dicha información. Por ello echarás de menos algunos de los recursos que nos ofrece un procesador de textos de alto nivel como el MS Word, el OpenOffice.org o el Corel WordPerfect, por ejemplo, aunque en el nivel de profundización podrás comprobar cómo las hojas de estilo en cascada (CSS) sí nos permiten definir de forma bastante flexible la apariencia.
Conceptos de Servidores y Clientes WEB
Tras este primer acercamiento a lo que es una página WEB veremos qué hay que hacer para que la información recogida en ella se convierta en algo público y accesible en Internet, o en una Intranet en el interior de nuestro centro de trabajo.
Para lograr que nuestras páginas WEB estén disponibles en Internet son necesarios varios requisitos:
Que se encuentren en un ordenador permanentemente conectado a Internet.
Que dispongamos de una dirección IP fija y conocida por los ordenadores que se encargan de traducir las peticiones de los internautas a direcciones IP.
Que el ordenador en el que se alojan nuestras páginas disponga del software adecuado para recibir conexiones exteriores y sea capaz de poner a disposición de los visitantes aquello que solicitan.
Los requisitos que acabamos de mencionar, aunque no exclusivos, son algunos de los que necesitamos para considerar que una máquina es un Servidor WEB.
Ya empieza a ser posible que un usuario particular disfrute de condiciones que le permitan cumplir el primer requisito, pero es bastante más difícil que se cumpla el tercero. Tengamos en cuenta que el software del servidor debe ser capaz de prestar el servicio a quien lo solicite, pero tiene también que disponer de las medidas adecuadas para evitar los accesos no autorizados y proteger la información que tiene almacenada el equipo en el que está instalado. Una buena política de seguridad requiere un alto nivel de capacitación técnica, por lo que lo más frecuente es que recurramos a una institución, pública o privada, que nos ofrezca espacio para alojar nuestras páginas, lo cual nos permitirá aprovechar su infraestructura técnica.
En el caso de las Intranets, donde el acceso sigue siendo público pero limitado al entorno de la propia institución, la preparación de un servidor WEB resulta menos problemática, ya que no requiere la configuración de seguridad exigida por un servidor abierto a Internet.
El otro extremo del hilo comunicativo lo establece cada uno de los usuarios que quiere consultar una página WEB. Para ello utilizará un software especializado en recibir la información ofrecida por el ordenador que hace las funciones de servidor. Se trata del Cliente WEB , Agente de usuario o navegador. El empleo del término "navegador" obedece a dos motivos: por una parte la metáfora de Internet como un mar de contenidos nos lleva a aplicar el nombre de "navegador" al programa cuya misión es transportarnos por ese mar. Por otra parte, el término es en parte una generalización por extensión del nombre del programa más utilizado durante la fase inicial de la expansión de Internet: el Navigator de Netscape.
Así pues, ya tenemos definida la estructura de relación entre ordenadores necesaria para que la WEB funcione: establecer un par Cliente-Servidor.
¿Cómo funciona el par Cliente-Servidor?
El proceso de distribución de información almacenada en páginas WEB se realiza en las siguientes etapas :
Un internauta solicita una determinada información tecleando el URL de la página o haciendo clic en un enlace.
El proveedor de acceso del internauta consulta a su servidor de nombres de dominio (DNS), traduce la petición recibida del navegador a la dirección IP del servidor correspondiente y se pone en contacto con dicho ordenador.
El servidor WEB recibe la petición y comprueba que la información solicitada existe y está disponible. Si es así envía la página solicitada al ordenador que le ha realizado la petición.
El navegador del internauta recibe, a través de su proveedor de acceso, los recursos que constituyen la página solicitada y los organiza para presentarlos en la pantalla según las instrucciones que contiene el código HTML de la página. Dichos recursos están formados por el texto y los elementos multimedia que componen la página: imágenes fijas, sonidos, imágenes en movimiento, pequeños programas.
Todos hemos visto páginas que tardan una barbaridad en cargarse hasta que se presentan en pantalla. Habitualmente, el contenido textual y los códigos de definición de una página tienen un tamaño bastante reducido. Pero no debemos olvidar que la página está compuesta también por el resto de elementos multimedia. La cantidad de información necesaria para presentar completamente una página es lo que constituye su "peso". ¡No lo dudes!: Si quieres garantizar la pérdida de visitas diseña tus páginas cargándolas con elementos multimedia irrelevantes o mal trabajados que aumenten innecesariamente el peso de las mismas. Si los visitantes no huyen desesperados por la lentitud de carga tienes el 99% de posibilidades de que no incluyan tu URL entre sus favoritos.

 Introducción>>Normas de estilo: lo esencial
Unas cuantas ideas esenciales
¿Cuántas veces hemos oído aquello de que el sentido común acaba por ser el menos común de los sentidos? Si este aforismo es, desgraciadamente, bastante acertado en la mayoría de los campos de nuestra existencia, parece que acrecentara su validez cuando se trata de una actividad en la que intervienen ordenadores. Es como si supusiéramos que la potencia de cálculo del ordenador va a ser capaz de suplantar nuestra capacidad de crear, pensar y organizar. Por ello quiero recordar algunos principios esenciales que, debido posiblemente a su obviedad, suelen acabar olvidándose.
Para comunicar hay que tener algo que decir
Desde luego, cuando no hay nada que contar lo máximo que podemos lograr, si dominamos la técnica para ello, es crear brillantes y atractivas burbujas vacías.
El primer paso que hemos de dar para crear nuestro sitio WEB es aclarar nuestras ideas sobre lo que pretendemos comunicar a través de sus páginas.
Una buena idea puede escribirse con mala caligrafía...
Podemos afirmar sin lugar a duda que todos los grandes genios de la literatura tuvieron que aprender a manejar un lápiz. Y es casi seguro que más de uno hizo sus primeras intentonas literarias con caligrafías temblorosas que, a pesar de todo, no ocultaban el talento que había tras esos trazos.
El lenguaje HTML va a ser la herramienta con la que plasmaremos nuestras ideas para publicarlas en Internet. Como ocurre con cualquier herramienta, la calidad de los trabajos realizados con ella dependerá de la familiarización que seamos capaces de adquirir con su manejo ... y eso tiene mucho que ver con la práctica.
...aunque es preferible que la caligrafía acompañe
Si atendemos a lo dicho en los párrafos anteriores puede ocurrir que desequilibremos la balanza hacia el platillo del fondo en detrimento del platillo de la forma. Aunque es verdad que el predominio de la forma nos acerca peligrosamente a los fuegos de artificio, no es conveniente que abandonemos un cierto grado de preocupación por la constante superación de nuestra "caligrafía".
En muchas ocasiones hay aspectos, que parecen meramente formales, cuya incidencia sobre la legibilidad y facilidad de transmisión de los contenidos los alejan del campo del adorno para llevarlos al terreno de la arquitectura del mensaje.
En el fondo tenemos gustos similares
Cuando hago esta afirmación no me refiero a los aspectos estéticos, donde está claro que encontraríamos casi tantos matices como seres humanos.
Pensemos el entorno en el que nos estamos moviendo: navegación por Internet en un entorno educativo. Hay algunas coordenadas que son comunes a la mayoría de los que trazamos esta singladura:
Nos gusta movernos rápido.
Nos impulsa la búsqueda de información relevante.
Agradecemos que nos brinden sistemas cómodos de navegación.
Nos molestan las visitas a sitios en obras (Me refiero a esos que lo único que tienen es un cartel que nos lo dice, porque la verdad es que una buena WEB siempre debería estar en obras).
¿Imágenes y sonidos? Todos los que pida el contenido, pero optimizados, que el que paga la conexión telefónica soy yo y no todos tenemos conexiones a velocidades de vértigo.
...
Seguro que encontramos bastantes más puntos de coincidencia. Así que ¿por qué no nos planteamos lo que pensaríamos del autor si fuéramos visitantes de la WEB que estamos creando? Por cierto, cuando intentes responder esta pregunta olvida las horas de esfuerzo que le has tenido que dedicar a lo que tienes en tu pantalla ;-)
Si en mi cabeza no está claro ¿cómo lo va a estar en la del visitante?
Una WEB educativa no debería ser uno de esos eventos que se dieron en llamar "performances" en los que cada uno reelaboraba y reinterpretaba la propuesta creativa. Seamos serios: si pretendo transmitir una información el proceso es, inicialmente, asíncrono y unidireccional. Otra cosa es que arbitre los procedimientos para que haya interactividad, pero el flujo inverso se tendrá que producir cuando el visitante tenga claro el mensaje y las ideas que le quiero transmitir. Si esas ideas no están organizadas en mi cabeza no podré plasmarlas de forma que el visitante las perciba como algo coherente.
Calor de hogar
No se trata de que todos los muebles sean iguales, de que todos los cuadros sean del mismo tamaño,... pero lo cierto es que cualquier casa tiene un estilo que hace que, por muy grande que sea, cuando cambias de habitación no sientas que te has mudado a casa de los vecinos. Desgraciadamente son muchos los sitios WEB en los que el salto de página me hace sentir que me he mudado, más que a casa del vecino, a otro país.
Cuando pensemos en nuestro sitio WEB deberíamos hacernos una idea de la "decoración" general para que los visitantes adquieran de forma inmediata una sensación de comodidad y de sitio conocido que les facilite la estancia en nuestra "casa virtual".
¡Viva la comunicación viva!
Juega a gusto con las palabras y dales el sentido que te plazca:
¿La exclamación jubilosa de un deseo?
¿Una orden, tal vez?
¿Quizás un simple eslogan publicitario arropado por ese tono imperativo?
La verdad es que mi intención era un poco más inmediata. Lo que quería decir en realidad es lo siguiente:
¡Haga usted el favor de no preocupar a sus visitantes haciéndoles creer que ha muerto!
Si en algún punto de la WEB situamos un enlace que apunte a nuestra dirección de correo tiene que ser con el propósito de contestar a los mensajes que se generen a través de él. Si no es así, es preferible que les ahorremos preocupaciones a nuestros visitantes ;-)
Introducción>>Herramientas
Herramientas
Para realizar el curso vamos a necesitar varias herramientas, todas ellas de carácter gratuito.
Una herramienta para edición de texto plano en Windows (puede usarse el bloc de notas, aunque recomendamos Notepad ++) o cualquier editor de textos de Linux
Un editor de páginas WEB: N|VU.
Un editor de mapas de imágenes: Gimp 2.2.8.
Un editor de imágenes: Gimp 2.2.8
Una herramienta de compresión de audio y vídeo y su reproductor asociado: Real Producer Basic y Real Player.
Un programa para realizar transferencias vía ftp: Filezilla o GFTP
Obtención e instalación
Según esté configurado tu ordenador dispondrás de unos u otros programas. Veamos lo que hay que hacer para instalar algunos de ellos.
N|VU
Es el programa con el que realizaremos la mayoría de las tareas propuestas en el curso. Toda la documentación está elaborada teniendo como referencia la versión 1.0 de 28 de junio de 2005.
En la  HYPERLINK "http://www.nvu.com" \t "_blank" página oficial del programa encontrarás como siempre la versión más actualizada.
Gimp
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/gimp/logogimp.png" \* MERGEFORMATINET Nadie discute la importancia de un buen tratamiento gráfico para aumentar la efectividad de una página WEB. Para conseguir que la riqueza gráfica no afecte a la agilidad de nuestras páginas será necesario conocer unos rudimentos de tratamiento de imagen y utilizar alguna herramienta que permita mantener a raya el tamaño de nuestras imágenes.
El programa elegido es potentísimo por lo que únicamente utilizaremos una parte mínima de sus posibilidades referida a los cambios de tamaño y a la creación de mapas sensibles para las páginas web.
Si utilizas Linux tendrás instalado Gimp puesto que forma parte de los componentes base de todas las distribuciones de usos común. En el caso de Windows tendrás sin embargo que obtenerlo de la red.
Para instalar Gimp para Windows es necesario haber instalado previamente una serie de bibliotecas denominadas GTK+. Así pues, el primer paso será ejecutar el archivo gtk+-2.6.9-setup.exe. Una vez completada esta primera fase habrá que ejecutar el instalador gimp-2.2.8-i586-setup.exe sin asustarte porque los mensajes aparezcan en inglés: el instalador no está traducido, pero el programa asumirá automáticamente el español como lenguaje.
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/gimp/instalaciondeusuario.png" \* MERGEFORMATINET La primera vez que arranques Gimp, tanto en Windows como en Linux, aparecerá una pantalla informándote que se va a iniciar la instalación de usuario para completar la instalación básica.
Lo único que tendrás que hacer será pulsar las veces que sea necesario en el botón continuar hasta que el programa recoja todos los datos necesarios y dé por finalizada la instalación.
El arranque del Gimp en Windows puede resultarte algo lento puesto que tiene que cargar todas las librerías y fuentes, pero una vez finalizado este primer paso su funcionamiento es el que corresponde a una aplicación de gran potencia. En Linux su arranque es mucho más ágil al contar con bibliotecas nativas.
Podrás instalar Gimp en Windows 98, aunque la recomendación para obtener el mejor rendimiento es hacerlo en un sistema Windows NT4, 2000 o XP. 
Cuando se realiza una instalación en un sistema con Windows 98 puede suceder que aparezcan algunos mensajes de advertencia indicando que no se han podido localizar alguna fuente o similares. Dado que estos mensajes aparecen en una pantalla negra de MS-DOS la respuesta habitual es cerrar esa ventana, pero no debes hacerlo, puesto que si se cierra esa ventana de advertencia se finalizará el programa. Así pues, si te encuentras en ese caso, limítate a minimizar la ventana y el programa seguirá su curso normal funcionando sin mayor dificultad. (Aunque, como se ha comentado, podría ser algo más inestable en sistemas Windows 98)
Si quieres comprobar la existencia de una versión más actualizada de Gimp puedes consultar  HYPERLINK "http://www.gimp.org" \t "_blank" www.gimp.org donde encontrarás zonas de descarga para sistemas basados en las plataformas de la familia Unix, Windows y también para Mac OS X.
Real Producer Basic 10 y Real Player Basic 10
Son varias las herramientas que pugnan por hacerse un hueco en el mercado de la compresión de sonidos e imágenes de vídeo para su transmisión por Internet. Hasta el momento, uno de los estándares "de facto" ha sido el conjunto de herramientas RealNetworks.
Para conseguir ambas herramientas tendrás que acudir a la WEB de Real Networks que, como suele ocurrir con las grandes empresas es muy dinámica. Eso puede provocar que las direcciones que se ofrecen en este momento no sean válidas en el futuro, aunque en ese caso habría que recurrir a la  HYPERLINK "http://spain.real.com/index.html?lang=es-es&loc=es" \t "_blank" página principal e iniciar desde allí la búsqueda.
En el momento de redactar este curso las páginas para iniciar las descargas eran las siguientes:  HYPERLINK "http://spain.real.com/freeplayer_r1p.html" \t "_blank" Real Player Basic para Windows (en castellano) o  HYPERLINK "http://www.real.com/linux/" \t "_blank" Real Player 10 para Linux (en inglés por el momento).
Filezilla
Filezilla es un gestor de descargas ftp creado para funcionar en plataformas con sistema operativo Windows
 Dado que se trata de un programa con una frecuencia de actualizaciones puuedes comprobar si ya está operativa alguna de las nuevas versiones visitando la página  HYPERLINK "http://sourceforge.net/projects/filezilla" \t "_blank" sourceforge.net/projects/filezilla
La página principal de Filezilla se enmarca dentro de Sourceforge.net que es una de las comunidades más activas en el desarrollo y difusión de sofware libre. Cuando accedas al sitio y pulses sobre el enlace Download correspondiente a la última versión verás que aparece una ventana en la que están señalados con un color especial los archivos correspondientes a la misma. Al tratarse de programas con licencia GPL comprobarás que se incluyen también las fuentes del programa (archivo src), aunque lo más habitual, es que descargues únicamente el ejecutable para Windows que lleva l, salvo que tengas conocimientos de programación y quieras ver cómo está hecho el programa.
PackageRelease & NotesFilenameDateSizeD/LArch.TypeFileZilla       HYPERLINK "http://sourceforge.net/project/shownotes.php?release_id=355924"  INCLUDEPICTURE "http://images.sourceforge.net/images/ic/manual16c.png" \* MERGEFORMATINET  2.2.16 2005-09-12 06:46 HYPERLINK "http://prdownloads.sourceforge.net/filezilla/FileZilla_2_2_16_dbg.zip?download" \t "_blank" Download FileZilla_2_2_16_dbg.zip 6552631 9875i386.zip HYPERLINK "http://prdownloads.sourceforge.net/filezilla/FileZilla_2_2_16.md5?download" \t "_blank" Download FileZilla_2_2_16.md5 234 1627i386text HYPERLINK "http://prdownloads.sourceforge.net/filezilla/FileZilla_2_2_16_setup.exe?download" \t "_blank" Download FileZilla_2_2_16_setup.exe 3459745 74346i386.exe (32-bit Windows) HYPERLINK "http://prdownloads.sourceforge.net/filezilla/FileZilla_2_2_16_src.zip?download" \t "_blank" Download FileZilla_2_2_16_src.zip 2332680 1515i386Source .zip HYPERLINK "http://prdownloads.sourceforge.net/filezilla/FileZilla_2_2_16.zip?download" \t "_blank" Download FileZilla_2_2_16.zip 4456627 9669i386.zip INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/publicacion/imagenes/sourceforgedownload.png" \* MERGEFORMATINET 
Tanto en el caso de Filezilla como en el de cualquier otro programa que descargues desde Sourceforge.net verás que, al pulsar sobre el archivo que quieres descargar se abre una ventana en la que te da la opción de elegir uno de los "mirrors" (servidores en espejo) de los que puedes descargarlo.
En la captura puedes ver que aparecen dos servidores en Europa y tres en Norteamérica. Lo más habitual es que los servidores más próximos geográficamente sean los más rápidos a la hora de realizar la descarga, pero no siempre tiene por qué ser así, puesto que puede darse la circunstancia de que se encuentre temporalmente fuera de servicio o saturado.
Para elegir uno de los servidores basta con pulsar sobre el icono  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/publicacion/imagenes/binary.gif" \* MERGEFORMATINET y eso nos llevará a una página en la que se nos informa del "mirror" que hemos seleccionado.
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/publicacion/imagenes/sourceforgedownloadinfo.png" \* MERGEFORMATINET En esa página de información nos avisa de que la descarga se iniciará de forma automática al cabo de unos segundos, indicándonos que tenemos dos posibilidades en caso de que no ocurra así: pulsar sobre el enlace directo o bien elegir otro "mirror" diferente, para lo cual tendríamos que utilizar el botón de vuelta atrás del navegador.
Si descargamos programas de forma habitual desde Sourceforge.net podemos marcar una de los servidores que aparecen en la zona inferior y utilizar el botón  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/publicacion/imagenes/sourceforgedownloadpreferred.png" \* MERGEFORMATINET lo cual hará que en el futuro no tengamos que pasar por la pantalla de seleccióna ya que, salvo que ocurriera una de las incidencias que hemos comentado se lanzará automáticamente la descarga desde el servidor que hayamos predeterminado con esa elección.
Instalación
Una vez completada la descarga tendrás en tu ordenador el archivo FileZilla_2_2_8_setup.exe, o una versión más actualizada. Recuerda que el archivo mencionado ya se encuentra en la carpeta de programas del CD ROM por lo que no tendrás que descargarlo. Sea cual sea el origen bastará con hacer un doble clic sobre el archivo para que se inicie la instalación.
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/publicacion/imagenes/idiomainstalacion.png" \* MERGEFORMATINET Es probable que te lleves un primer cuando el programa lance un panel de selección de idioma y compruebes que aparece el catalán o el chino tradicional, pero no el castellano. No te preocupes porque se trata del idioma que se utilizará en el instalador. Aunque puedes elegir otro idioma diferente del inglés si piensas que te puedes sentir más a gusto te comentamos los pasos esenciales y seguro que no te pierdes si los sigues.
Damos pues por supuesto que has elegido el inglés y lo primero que te presenta es la licencia GPL que tendrás que aceptar pulsando el botón  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/publicacion/imagenes/iagree.png" \* MERGEFORMATINET 
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/publicacion/imagenes/documentacionenfrances.png" \* MERGEFORMATINET A partir de aquí se inicia la instalación propiamente dicha y comprobarás que la opción que se ofrece por defecto es  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/publicacion/imagenes/standard.png" \* MERGEFORMATINET que es la que te recomendamos que utilices.
Aunque el funcionamiento del programa es bastante sencillo, la instalación Standard no dispone de una ayuda traducida al castellano, por lo que si te resulta más cómodo consultar una ayuda en francés puedes optar por marcar la casilla para que se instale la documentación en francés, aunque realmente no te lo recomendamos puesto que consideramos que no te va a resultar necesaria. Además, si decides instalar esta opción el programa te pedirá que estés conectado a Internet para descargar unos archivos complementarios. Sea pues con la documentación en francés o sin ella sólo te queda pulsar sobre el botón  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/publicacion/imagenes/next.png" \* MERGEFORMATINET  para continuar con el proceso.
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/publicacion/imagenes/modosdeinstalar.png" \* MERGEFORMATINET Las dos siguientes pantallas, como en prácticamente todas las instalaciones te ofrecen una carpeta por defecto para la instalación y el nombre del grupo de programas que se creará en el menú Inicio. Salvo que tengas alguna preferencia especial puedes aceptarlas con la pulsación de  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/publicacion/imagenes/next.png" \* MERGEFORMATINET para continuar, con lo que te aparecerá una pantalla que sí es interesante que tengas en cuenta. Las opciones que te muestra por defecto son las que aparecen en la imagen. La primera de ella es no utilizar el modo seguro, que será recomendable cuando se trate de tu ordenador personal puesto que el programa recordará las contraseñas. Sin embargo, si se trata de un ordenador compartido deberías modificarla y marcar use secure mode, lo cual te obligará a escribir las contraseñas cada vez que las necesites, pero impedirá que otros usuarios se aprovechen de la memorización de las mismas para acceder indebidamente a tus sitios personales.
En cuanto a la segunda opción el programa recomienda que se utilice la instalación a través de un archivo XML, salvo en el caso de que se trate de un ordenador en el que estén definidos diferentes perfiles de usuario, caso en el cual sería necesario utilizar el registro para que cada usuario tuviera sus propias preferencias. Llegados a este punto ya le hemos indicado al instalador las condiciones necesarias y basta con pulsar la tecla  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/publicacion/imagenes/install.png" \* MERGEFORMATINET que hará que vaya apareciendo una barra de progreso y el listado de los archivos que se van copiando en el disco duro. Una vez finalizado el listado aparecerá el botón  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/publicacion/imagenes/close.png" \* MERGEFORMATINET que utilizaremos para dar por concluida la instalación quedando el programa listo para su uso con el icono  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/publicacion/imagenes/icofilezilla.png" \* MERGEFORMATINET situado en el escritorio.
Si al arrancar el programa compruebas que el entorno sigue estando en inglés tendrás que modificarlo manualmente mediante la opción de menú edit  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/flechamenu.png" \* MERGEFORMATINET settings que desplegará la pantalla de preferencias, encontrando en la rama interface settings el apartado languages en el que podrás seleccionar el español.
Tras aceptar las opciones que nos ofrece el programa y completar la instalación dispondremos de un nuevo grupo de programas al que accederemos a traves de inicio  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/flechamenu.png" \* MERGEFORMATINET programas.
 Notepad ++
Si trabajas en Linux, independientemente de la distribución que estés usando, contarás con muchos editores de texto plano con prestaciones avanzadas. En el caso de Windows la situación es más deficitaria, contando únicamente con el Bloc de notas, que puede ser una herramienta válida pero es muy pobre en cuanto a prestaciones. Por ese motivo se sugiere la utilización del programa Notepad++ que es una herramienta que ofrece unas prestaciones muy superiores. 
Se trata también de un programa de código abierto cuya última versión podrás encontrar en  HYPERLINK "http://notepad-plus.sourceforge.net/es/site.htm" \t "_blank" notepad-plus.sourceforge.net/es/site.htm desde te dirigirán a Sourceforge cuyo funcionamiento ya conoces.
La utilización de Notepad++ es bastante intuitiva y no nos extenderemos en explicaciones al respecto. Su utilidad fundamental en este curso puede ser como aplicación complementaria para la edición de hojas de estilo, por lo que se usará en el nivel más avanzado.
La base>>Entorno de trabajo
Cuando visitamos una página WEB vemos textos, imágenes, colores de fondo, en algunos casos elementos que se desplazan por la pantalla, en fin, todo el conjunto de elementos que hacen de dicha página un espacio multimedia e interactivo.
Aunque podríamos pensar que todos esos elementos están incluidos en la página no es así. Realmente el único de todos ellos que pertenece al código de la propia página es el texto. Y, entonces, ¿cómo se ve lo que aparece en la página? La respuesta es que una página WEB no es más que un documento de texto acompañado de una colección de etiquetas que sirven para que el navegador
interprete de qué forma tiene que presentar el texto
sepa de dónde tiene que obtener las imágenes y sonidos y cómo mostrarlos
distribuya todos los contenidos de una forma determinada dentro de la pantalla
Podríamos decir que es el guión de la película.
Al tratarse de documentos de texto podemos afirmar que nos bastaría con cualquier programa genere texto plano para crear nuestras páginas HTML. Aunque este procedimiento resultaría bastante incómodo para su uso habitual, ya que nos obligaría a conocer todas las etiquetas del HTML, puede ser interesante para que comprendamos la estructura de una página WEB y será lo primero que hagamos.
Familiarizándonos con el entorno de trabajo
Nuestra herramienta de trabajo durante este curso va a ser el editor N|VU y lo primero que nos conviene hacer es familiarizarnos con las principales características de su entorno para lo cual disponemos del siguiente  HYPERLINK "javascript:void(0)" vídeo .
La configuración por defecto de N|VU opta por la utilización de estilos CSS para formatear los diferentes elementos de la página. Es una opción acertada, ya que la utilización de CSS es un método mucho más versátil y potente que será muy interesante estudiar con detalle cuando se consoliden los conocimientos básicos pero, para el nivel inicial, puede suponer una dificultad porque no nos presentará algunas etiquetas propias del lenguaje HTML. Una de las formas más eficientes de aprender el lenguaje HTML es viendo cómo están construidas otras páginas y, como muchas de ellas aun no utilizan CSS, nos interesa ir conociendo las diferentes etiquetas propias del HTML y por eso es preferible, para el nivel de iniciación, desactivar el empleo de CSS. 
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/numeracion/uno.gif" \* MERGEFORMATINET 
Abre N|VU
Accede al menú Herramientas  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/estilos/flechamenu.png" \* MERGEFORMATINET  Preferencias  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/estilos/flechamenu.png" \* MERGEFORMATINET  General
Encontrarás marcada la casilla que indica que se utilicen estilos CSS en lugar de elementos y atributos HTML. Desmárcala si vas a trabajar en el nivel de iniciación.  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/desmarcarcss.png" \* MERGEFORMATINET 
Si dejas activada la casilla de verificación para la utilización de CSS es posible que algunas referencias que aparezcan en la documentación no coincidan con lo que puedas comprobar al ir realizando las prácticas propuestas.
La base>>Etiquetas html
El formato de las etiquetas HTML
Las etiquetas HTML se escriben encerradas entre ángulos. Normalmente se utilizan dos etiquetas: una de inicio y otra de fin para indicar que ha terminado el efecto que queríamos presentar. La única diferencia entre ambas es que la de cierre lleva una barra inclinada "/" antes del código. 
texto que presentará el efecto Por ejemplo:Esto va en negrita lo veremos así: Esto va en negrita
Es probable que una de las primeras preguntas que te hagas sea si es obligatorio escribir las etiquetas en minúsculas o en mayúsculas. Hoy por hoy es indiferente escribirlas de una u otra manera: salvo raras excepciones los navegadores las interpretan correctamente en ambos casos. Sin embargo, las últimas especificaciones emitidas por el W3C(*) indican la necesidad de que vayan escritas siempre en minúsculas para considerar que el documento está correctamente creado si intentamos que cumpla con las normas del más avanzado y estricto lenguaje XHTML. Así pues ya que es algo que no nos cuesta trabajo acataremos la norma emitida por el W3C. (*)El W3C (World Wide Web Consortium) es el fórum internacional que se encarga desarrollar nuevas tecnologías relacionadas con la WEB dictando las normas que constituyen el estándar comúnmente aceptado para la creación de documentos web.



La base>>Estructura básica
La estructura básica de una página WEB
Para que un navegador reconozca que lo que está viendo es una página WEB se utiliza la siguiente estructura:
 (Etiqueta que indica le indica al navegador el tipo de documento que se va a iniciar y le permite interpretarlo correctamente. Verás que N|VU omite la última parte de la etiqueta: aunque es una opción posible no es la más correcta.)
(Etiqueta que indica que lo que viene a continuación es un documento HTML) (Etiqueta de apertura de la Título) Aquí va la información sobre el título de la página, el autor, palabras clave, etc. que no se presentarán en la ventana del navegador, salvo el título que aparecerá en la barra de título de la parte superior  (Etiqueta de cierre de la Título) (Etiqueta de apertura del cuerpo)  Aquí va el contenido de la página que será lo que se presente en pantalla.  (Etiqueta de cierre del cuerpo) (Etiqueta de cierre del documento)
No te preocupes por la aparente complejidad de la etiqueta inicial, ya que prácticamente todos los editores se encargarán de escribirla por ti.
Antes de comenzar los ejercicios prácticos comprueba que ya tienes creada una carpeta con el nombre "CursoHTML" para poder almacenar en ella el resultado de tu trabajo. 
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/numeracion/dos.gif" \* MERGEFORMATINET 
Arranca N|VU y abre el archivo  HYPERLINK "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/empezando.html" \t "_blank" empezando.html.
No verás nada en la pestaña  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/pestananormal.png" \* MERGEFORMATINET , así que vamos a utilizar la pestaña  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/pestanacodigofuente.png" \* MERGEFORMATINET .
Localiza las etiquetas que hemos mencionado antes y haz clic con el ratón para situarte en la zona correspondiente al cuerpo de la página (entre y )
Dale contenido al cuerpo escribiendo un renglón y pulsando la tecla  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/teclaintro.png" \* MERGEFORMATINET  para saltar al siguiente párrafo. 
Escribe otro renglón y pulsar dos veces la tecla  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/teclaintro.png" \* MERGEFORMATINET . 
Escribe un tercer renglón .
Si pulsas el icono  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/icoguardar.png" \* MERGEFORMATINET   obtendrás un mensaje de error   INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/fallo.png" \* MERGEFORMATINET  puesto que el archivo con el que trabajas procede del CD-ROM y no puedes escribir en él. 
Tendrás que utilizar el menú archivo  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/estilos/flechamenu.png" \* MERGEFORMATINET  guardar como y salvar el fichero en la carpeta CursoHTML con el nombre actividad2.html (para que puedas enlazar fácilmente las actividades con su enunciado las guardaremos siempre con el mismo número, por lo que es posible que, en alguna actividad referida a procedimientos no tengas ningún "producto" en tu carpeta de trabajo)
Utiliza la pestaña de  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/pestanavistapreliminar.png" \* MERGEFORMATINET  o bien el botón  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/iconavegar.png" \* MERGEFORMATINET  para cargar en el navegador el documento que acabamos de salvar y comprobar los resultados.
La primera vez que utilices el botón navegar el programa solicitará permiso para lanzar una aplicación externa. Sería conveniente que marcaras la casilla para que recordara esta decisión de forma que no te lo pregunte cada vez que vuelvas a pulsarlo.
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/ejecutaraplicacion.png" \* MERGEFORMATINET 
¡Vaya desastre!
Supongo que coincidiremos en que lo que hemos visto al comprobar cómo había quedado nuestra primera creación no ha sido muy alentador. 
La explicación del desaguisado es sencilla: en HTML hacen falta unas etiquetas especiales para indicar los saltos de línea y párrafo y no las habíamos escrito. ¡Las cosas no son tan sencillas como en un procesador de texto!
es la etiqueta que sirve para indicarle al navegador que debe hacer un salto de línea y, dada su función, no necesita etiqueta de cierre siempre que nos movamos en el tipo de documento determinado por las especificaciones de HTML 4.01. es la que nos sirve para indicar que lo que está comprendido entra la etiqueta de inicio y la de final forman un párrafo que se separa de lo anterior y lo posterior mediante el espacio que corresponde a un doble salto de línea.
Vamos a intentar solucionar este lío y para ello volveremos a N|VU y crearemos un nuevo documento que aparecerá en una nueva pestaña. Una vez que dispongamos de esta nueva pestaña usaremos el icono abrir para abrir de nuevo nuestro primer trabajo (con esto conseguiremos tener dos copias del mismo y podremos comparar las diferencias que se producen al introducir alguna modificación.)
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/numeracion/tres.gif" \* MERGEFORMATINET 
Volvemos a N|VU y vamos a abrir un  abrir el el editor de textos si lo habíamos cerrado. 
Cargamos nuestra anterior creación (actividad2.html).
introducimos la etiqueta donde habíamos pulsado una vez la tecla  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/teclaintro.png" \* MERGEFORMATINET .
Ponemos donde inicialmente habíamos pulsado dos veces la tecla  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/teclaintro.png" \* MERGEFORMATINET  y cerramos el párrafo de texto con . 
Guardamos el archivo como actividad3.html
Pasamos al navegador y cargamos esta nueva página para comprobar el resultado.
Aunque se sugiere el nombre actividadN.html puede que prefieras llamarlas de otro modo. No hay problema en que adoptes tu propia nomenclatura, pero es importante que tus archivos  y carpetas no lleven tilde en el nombre. Por ejemplo, tendrías que nombrarlos como practicaN.html en lugar de prácticaN.html, a pesar de que parece claro que su sentido es el que corresponde al sustantivo "práctica" y no a la forma verbal "practica". La explicación de esta situación tiene que ver con la forma en que los servidores van a tratar posteriormente los nombres de los archivos que almacenan y las peticiones que les realicen los navegadores: los caracteres no anglosajones (entre los que se cuentan nuestras vocales con tilde y la "eñe") así como los espacios en los nombres van a provocar errores y el servidor va a contestar que no encuentra la página. La recomendación es que no utilices estos caracteres en los nombres de las páginas o en sus archivos asociados. Si quieres utilizar nombres largos y que las palabras queden separadas hazlo sustituyendo el espacio por un guión bajo "_"
 ¡Cuidado! Cuando veas las páginas en tu ordenador no notarás ningún problema aunque utilices estos caracteres al nombrar el archivo. Ten en cuenta que te las está sirviendo tu propio ordenador, que tiene configurado el teclado en castellano y con un sistema operativo que admite los espacios.
Aunque pueda haber resultado algo duro para empezar puedes respirar con tranquilidad porque estos son los últimos trabajos que realizamos directamente escribiendo los códigos. A partir de aquí empezaremos a utilizar el editor gráfico desde la pestaña normal que, básicamente, se encarga de escribir por nosotros las etiquetas necesarias, pero es de suponer que gracias a esta introducción hayamos podido comprender cómo se escribe una página HTML. 
La importancia de asimilar la estructura básica reside en que una de las mejores formas de aprender a crear páginas HTML es viendo páginas creadas por otros autores. Si tenemos claro el sistema utilizado podremos reconocer los elementos que nos parezcan interesantes e irlos incorporando a nuestras páginas. 

La base>>Texto - Tipos y Cuerpos HYPERLINK "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/texto2.html" \o "avanzar" 
Unas cuestiones previas
N|VU nos va a facilitar muchísimo el trabajo traduciendo nuestras selecciones en un entorno visual a etiquetas HTML. Además puede hacerlo de dos formas diferentes: utilizando sólo etiquetas HTML o utilizando también etiquetas CSS (Hojas de estilo en cascada). Recuerda que si ésta es tu primera toma de contacto con la creación de páginas web sería preferible que desactivaras la utilización de CSS.
Por otra parte, ahora que ya sabes la diferencia entre un salto de renglón () y un salto de párrafo () tendrás que tener en cuenta un pequeño detalle: si estás trabajando en cualquier modo que no sea el párrafo, N|VU interpretará las pulsaciones de la tecla  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/teclaintro.png" \* MERGEFORMATINET como saltos de renglón.
Para que introduzca saltos de párrafo tendrás que tener cuidado de que en la zona izquierda de la barra de herramientas aparezca marcado el párrafo como forma de inserción de texto. Siendo así, el programa interpretará la pulsación simple de la tecla  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/teclaintro.png" \* MERGEFORMATINET  como salto de párrafo. Si quieres que se produzca únicamente un salto de renglón tendrás que pulsar las teclas  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/teclamayusc.png" \* MERGEFORMATINET +   INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/teclaintro.png" \* MERGEFORMATINET 
Tipos y cuerpos
El trabajo con procesadores de texto nos ha hecho adquirir una cierta habilidad en la maquetación o tratamiento del aspecto visual del texto. Esta situación se ha extendido también a la creación de documentos para la web. Si bien esto ha tenido una parte positiva, en tanto que ha ampliado el control sobre el aspecto visual de nuestras producciones también ha tenido una parte negativa: hemos perdido de vista una parte importante de la estructura de la información. Si te cuesta entender lo anterior puede que te resulte más fácil si te haces una pregunta: ¿podría un ciego interpretar correctamente un texto en el que los elementos que deseamos resaltar están en un tamaño más grande o en un color diferente?
Está claro que los elementos visuales son importantes, pero lo que no debemos perder nunca de vista es la organización de la información, de manera que siempre quede organizada de una forma clara, ordenada y comprensible, incluso si la despojamos de los atributos visuales.
Una vez hecha la salvedad anterior vamos a comenzar un recorrido por los recursos de los que disponemos para modificar el aspecto de un documento html Las primeras operaciones sobre las que podríamos practicar serían las referentes a la modificación del tipo de letra y su tamaño (al que se denomina cuerpo).
  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/tiposdeletra2.png" \* MERGEFORMATINET  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/tiposdeletra.png" \* MERGEFORMATINET 
Para acceder a los tipos de letra disponemos de las dos posibilidades que se muestran en las imágenes:
un desplegable en la 2ª barra de formato 
la opción de menú formato  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/estilos/flechamenu.png" \* MERGEFORMATINET  tipo de letra que nos da acceso a las fuentes instaladas.
Tanto si estás trabajando en Windows como si lo haces en Linux verás que los dos primeros grupos son idénticos ya que se refieren a grandes categorías el primero y a las principales familias de letras el segundo, pero en cuanto empezamos a desarrollar el listado vemos que las coincidencias desaparecen, ya que las fuentes empleadas en ambos sistemas son diferentes, por lo que no te recomiendo que utilices fuentes especiales de las que aparecen en el listado inferior.
Si lees las siguientes anotaciones de estilo podrás entender las razones de esta recomendación.
¿Cuántos tipos de letra tienes instalados en tu ordenador? ¿Cincuenta?... ¿Ochenta?... ¿Más de cien?...
Seguramente estarás pensando que tienes un montón de posibilidades a la hora de diseñar tus páginas... pero, ¿qué ocurrirá cuando un visitante de tu página no tenga en su ordenador esa fuente caligráfica tan maravillosa con la que tu página lucía tan espectacular?
Lo que sucederá es que el navegador del visitante volverá a darle formato a toda la página utilizando la fuente por defecto, que habitualmente suele ser de la familia serif o Times New Roman, ... y adiós a tu preciosa composición de la página.
Teniendo en cuenta lo anterior la recomendación es que te ciñas a las fuentes que están instaladas en la mayoría de los equipos: Times y Arial-Helvética>
Tras esta recomendación funcional vamos a entrar en una segunda anotación de claro matiz estético:
Times New Roman :
Se llama así por haber sido popularizada por el diario "The Times". Pertenece a la familia de las fuentes de tipo serif o "con tacón" (por las curvas que rematan los extremos). Suele dar un tono más formal a los escritos. Es de buena legibilidad en papel y algo menos en pantalla.
Arial
Es la fuente de mayor uso de la familia de las helvéticas, sans-serif o "de palo seco". Su carácter es algo más informal y moderno que el de la Times. Su legibilidad en pantalla es algo más alta que la de la Times, ya que es ligeramente mayor a igualdad de cuerpo.
Comic Sans MS : 
No habíamos mencionado esta fuente que pertenece al grupo de las fuentes de tipo caligráfico aunque tiene la característica de que, al tratarse de una fuente sin ligazón entre los caracteres, es muy legible en pantalla. Es, entre las tres, la que aporta un carácter más ligero e informal al texto, con un alto grado de legibilidad. Sin embargo no la habíamos incluido en el listado de fuentes más comunes por una cuestión esencial: es exclusiva de los sistemas Windows, por lo que los navegadores que corren bajo Linux la sustituyen por una letra de la familia arial-helvética con una dimensión algo mayor. Ten en cuenta este dato si quieres garantizar la compatibilidad y la estabilidad del diseño interplataforma.
Y ahora una pregunta: ¿has visto alguna vez una de esas cuartillas de publicidad de una imprenta que acaba de comprar un nuevo ordenador? Digo lo del ordenador porque es sorprendente la cantidad de fuentes diferentes que caben en tan poco papel,... al fin y al cabo lo importante es lo potente que es el ordenador, no que podamos enterarnos de lo que pone. Así que ya sabes, una de las formas de conseguir que tu página resulte impresentable es mezclar diez o doce tipos de letra,... aunque puede que tengas la suerte de que el navegador del visitante las sustituya por la fuente por defecto ;-)
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/tamaniotexto.png" \* MERGEFORMATINET Además del tipo de letra podemos jugar con el cuerpo de las mismas, esto es, su tamaño. Antes de recurrir a los iconos  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/tamaniotexto2.png" \* MERGEFORMATINET que aparecen en la barra de formato vamos a tomar en consideración la opción de menú formato  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/estilos/flechamenu.png" \* MERGEFORMATINET  tamaño. Cuando accedes a ella verás que hay una serie de tamaños limitada y es importante que lo tengas en cuenta porque los navegadores antiguos pueden tener problemas con especificaciones de tamaño diferentes a la que se consigue seleccionándolos desde aquí.
En el siguiente recuadro de códigos puedes ver una explicación sobre los tamaños en las especificaciones iniciales del lenguaje HTML. 
En lenguaje HTML existen siete tamaños de letra. El tamaño mayor sería equivalente, aproximadamente, a los 36 puntos de un procesador de textos y el menor a un cuerpo de 8 puntos.
La forma de reflejarlo según el programa con el que trabajemos es diferente. Mientras que algunos programas los numeran correlativamente de 1 a 7, N|VU toma como punto neutro el tercer nivel y numera como pasos negativos o positivos a partir de ese tamaño. Encontraremos pues etiquetas de los siguientes tipos.
y sucesivas
hasta que son las que crea N|VU. (También podrías adjudicar manualmente el tamaño +4 para el que no hay una opción en el menú Formato  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/estilos/flechamenu.png" \* MERGEFORMATINET  Tamaño)
Cualquiera de los siguientes códigos produciría el mismo efecto:
CódigoResultadoejemploejemploejemplo ejemploejemploejemploejemploejemploejemploejemploejemploejemploejemploejemploejemploColores y fondos de página
Diseñando el aspecto general
Hasta el momento las páginas que hemos creado editando directamente el código eran de color blanco. Sin embargo, es extraño encontrar páginas WEB que se asemejen a una hoja de papel; lo habitual es que se incluyan colores que hagan más agradable su presentación. Pero, antes de lanzarte a una desenfrenada pasión carnavalesca por el color no estaría de más que reflexionaras sobre la siguiente aportación de estilo.
El uso indiscriminado de colores e imágenes no aumenta la calidad de una página, más aún, tiende a reducirla. No estaría de más respetar unas sencillas reglas:
Los colores, de fondo o de texto, se utilizan con el objetivo de contribuir a la legibilidad de los textos. Salvo que sirvan para diferenciar contenidos las páginas que constituyen una sede WEB deberían tender a un diseño uniforme que transmita al visitante la sensación de que se encuentra en un lugar con señas de identidad propias.  
Los archivos de imágenes ocupan espacio... mucho espacio. Transmitirlos lleva tiempo... mucho tiempo. Por tanto, habrá que minimizar en lo posible el tamaño de las imágenes y utilizarlas cuando sean significativas, no meramente como elementos decorativos. Si utilizamos imágenes para enlazar unas páginas con otras hagámoslo siempre con las mismas: contribuiremos a la "imagen de marca" y aceleraremos la navegación puesto que sólo se descargarán la primera vez.
Color de fondo
La forma más elemental de modificar el aspecto de una página es variando el color del fondo. Hay unas cuantas explicaciones sobre la forma de representar el color en una pantalla de ordenador, pero antes de verlas vamos a hacer una práctica sencilla para cambiar el color del fondo de nuestra página.
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/numeracion/dieciseis.gif" \* MERGEFORMATINET 
Localiza en la barra de herramientas el icono que representa el color de fondo  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/seleccionarcolorfondo.png" \* MERGEFORMATINET y haz clic sobre él.
Para empezar puedes optar por marcar uno de los colores que aparecen como predefinidos y pulsar el botón Aceptar.
Hay un procedimiento algo que nos ofrece alguna posibilidad más para ayudarnos a elegir correctamente los colores para nuestra página, pero, tras haber visto el procedimiento más sencillo vamos a detenernos para entender cómo se definen los colores en una página WEB. 
Para que el navegador sepa cuáles son los colores que tiene que presentar se utiliza la denominada combinación RVA (Rojo-Verde-Azul) que en muchos sitios verás en sus siglas en inglés (RGB por Red-Green-Blue).
Este tipo de definición del color se basa en la combinación de 256 posibles cantidades de cada uno de los colores. Es como si tuviéramos un cuentagotas con capacidad para ir depositando sobre cada punto de la pantalla desde 0 a 255 gotas de cada uno de los colores básicos. Con esta forma de trabajar tendríamos desde el negro absoluto que correspondería a la ausencia total de color, hasta el blanco absoluto que sería la mezcla de las 255 gotas de cada uno de los colores. Entre ambos extremos quedan las posibles combinaciones de "gotas" de colores: 256 x 256 x 256 que hacen un total de 161777.216 colores diferentes.
Para representar esta gama de combinaciones se utilizan tres pares de números que indican respectivamente la cantidad de rojo, verde y azul que componen cada color. Por cierto, seguro que te estás preguntando cómo se hace para expresar una cantidad mayor de 99 "gotas" con un solo par de números. El misterio está en que no se utiliza la base 10, sino la notación hexadecimal o base 16, donde la A equivale al 10 decimal, la B al 11 y así sucesivamente hasta la F que equivale al 15. Además, para pasar de un orden de unidades al siguiente hay que juntar 16 unidades de cada orden en vez de 10 que es a lo que estamos habituados. Por ejemplo, la notación 12 en hexadecimal equivaldría a nuestro 18 ya que es una "decena hexadecimal", o sea 16 unidades, y dos unidades sueltas. Veamos algunos ejemplos:
Valores  Color resultante Valores Color resultante Valores Color resultanteFF0000   00FF00   0000FF  FFFF00  FF00FF  00FFFF 25A7BB  ACB312  6047B6 El otro procedimiento para modificar el color de fondo de la página lo encontramos a través del menú formato  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/estilos/flechamenu.png" \* MERGEFORMATINET  colores y fondo de la página.
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/colores.png" \* MERGEFORMATINET En el panel que aparece se muestra la combinación básica que se aplica por defecto a las nuevas páginas: fondo blanco, texto en negro y color para los enlaces en diferentes situaciones (enlace simple, activo o visitado) pero sin darnos la posibilidad de modificar ninguno de ellos.
Si optamos por marcar el botón de verificación para usar colores personalizados se activan los botones que acompañan a cada uno de los elementos.
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/colores2.png" \* MERGEFORMATINET 
Comprobamos que en la zona derecha del panel se presenta un recuadro que sirve de testigo visual para mostrarnos el efecto visual que produce la combinación de colores que se está aplicando.
Cuando pulsamos sobre algunos de los botones se lanza la paleta de selección de color para ese elemento a la que la dedicamos ahora algo más de atención.
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/colores3.png" \* MERGEFORMATINET Además de los colores predefinidos que hemos utilizado previamente podemos elegir cualquiera de los 16,8 millones de colores arrastrando la cruceta que se muestra en el cuadro principal para modificar el tono y la saturación. El brillo del color se modifica arrastrando cursor hacia la izquierda o derecha de la barra que aparece bajo el cuadro de tono y saturación.
A medida que modificamos la posición de estos dos indicadores veremos como se van produciendo variaciones en los indicadores numéricos de la zona inferior, tanto en la combinación de RVA como en la traducción de esa combinación a valores hexadecimales.
El lenguaje HTML también utiliza nombres, en inglés, para identificar algunos colores. Cuando el valor seleccionado coincide con alguno de los colores que tienen un nombre asignado dicho nombre aparece en la caja correspondiente, permaneciendo esta vacía si la combinación no se corresponde con ningún color con nombre. En el ejemplo que se muestra en la imagen aparece el nombre yellow (amarillo) que identifica a la combinación hexadecimal ffff00.
Una vez localizado el color que deseamos basta con pulsar el botón Aceptar para que se aplique ese valor al elemento desde el que habíamos lanzado el panel de selección de colores y volvamos al panel anterior para poder dar por finalizado el proceso o elegir el color de otro elemento. 
Es importante en este momento comprobar que las combinaciones entre los colores del fondo y de los diferentes tipos de texto y enlaces es armoniosa y facilita la legibilidad.
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/colores4.png" \* MERGEFORMATINET Ya conocías la forma rápida de acceder a la modificación del color de fondo de la página desde la barra de herramientas. También podemos desde ella modificar el color del texto que tengamos seleccionado, o del que se escriba a partir de ese momento. Como ya es habitual en la mayoría de los programas el recuadro que figura más "abajo" (en nuestro ejemplo el blanco) representa el color de fondo, mientras que el que se encuentra más "arriba" indica el color del primer plano. Pulsando pues sobre el cuadro de "primer plano" se abriría el panel de selección de color que acabamos de comentar. 
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/numeracion/diecisiete.gif" \* MERGEFORMATINET 
Aprovecharemos la página que tenemos abierta y, modificamos su color de fondo aplicando el procedimiento descrito de selección de colores desde el menú.
Variamos también el color del texto normal y aceptamos las modificaciones.
Escribimos una frase.
Recurrimos a la pestaña  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/pestanacodigofuente.png" \* MERGEFORMATINET para comprobar cómo se han recogido las modificaciones en el código de la página.
Si pulsamos sobre el botón  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/botonnavegar.png" \* MERGEFORMATINET para mostrar los resultados en el navegador comprobaremos que, como aún no hemos salvado la página, el programa nos pide que le demos un título para la página así como un nombre y una ubicación al archivo. Utiliza el título que te parezca más adecuado y nombra el archivo como actividad17.html
Modifica los colores hasta encontrar una combinación que no dificulte la legibilidad.
Guardamos definitivamente el trabajo con el nombre que le habías adjudicado: actividad17.html
 
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/atencion.gif" \* MERGEFORMATINET El color del fondo de página es un atributo de la etiqueta Si vemos el código de una página que tenga el fondo de color verde puro sería así: (El símbolo # es el equivalente anglosajón de nuestra abreviatura nº)
El código que crea N|VU recoge de forma diferente las combinaciones de color dependiendo de que se haya activado o no la utilización de estilos en el menú herramientas  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/flechamenu.png" \* MERGEFORMATINET preferencias Si se trabaja sin estilos el código que se genera será del siguiente tipo: Sin embargo, si se activa la utilización de estilos, quedaría: Lo importante es que, cuando se activan los estilos, el color del texto y el del fondo se reflejan con notación decimal en lugar de hexadecimal
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/numeracion/dieciocho.gif" \* MERGEFORMATINET 
Si habías cerrado el ejercicio anterior vuelve a abrirlo
Utiliza la opción de menú ver  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/estilos/flechamenu.png" \* MERGEFORMATINET código fuente html o, más cómodamente, la pestaña  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/pestanacodigofuente.png" \* MERGEFORMATINET  para localizar el código del color de fondo.
Modifica el color de fondo para que tenga el valor FFCC66 y guarda el archivo como actividad18.html
Vamos a hacer ahora un ejercicio de estimación, para lo que tendrás que responderte mentalmente a la pregunta ¿Qué combinación de las siguientes estará más cerca de los tonos salmón: FEBBAA, 55AAAA, 32BC7A?. (Utiliza los valores 254,187,170 / 85,170,170 / 50,188,122 si tienes activados los estilos).
Intenta justificar mentalmente tu respuesta y luego comprueba la validez de tu estimación introduciendo el dato manualmente. Puedes comprobar también los otros dos datos.
Puedes hacer pruebas en este  HYPERLINK "javascript:void(0)" \o "Visualizador de combinaciones de color proveniente de pagetutor.com" visualizador para comprobar los resultados de algunas combinaciones de color.
Ahora que ya sabes cómo hacer que tu página muestre diferentes colores de fondo es el momento de que pongas en juego tu sentido estético.
¿Te parece agradable que cada una de las páginas de un sitio WEB tenga un color diferente o, por el contrario, te provoca cierto sobresalto?
¿Podría ser útil un cambio de color para identificar secciones dentro de un sitio WEB? ¿De hacerlo, utilizarías un cambio brusco o lo harías dentro de una gama tonal para todo el sitio?
Seguro que con esas dos preguntas puedes empezar tus reflexiones, pero te apunto otra cuestión que deberías tener en cuenta: hay combinaciones estéticas y muy legibles que pueden ser inadecuadas si pretendemos que la información de la página se destine a imprimir. ¿Que ocurriría si alguien pretende imprimir una página que tiene el texto en blanco sobre un fondo de tono azul oscuro?

Cada vez es más habitual que se utilicen recursos para que los enlaces no aparezcan subrayados. Sin embargo, la opción que utilizan los navegadores como alternativa predeterminada es mostrar el enlace en color azul y subrayado, lo cual ha creado un aprendizaje condicionado en el que hemos asociado esas características visuales a la función de enlace.
Por cierto, a pesar de que ya has visto que los enlaces entre las páginas de este curso no aparecen subrayados ¿no has intentado pinchar en la palabra enlace para ver a dónde te llevaba? Está claro que no deberíamos, bajo ningún concepto, utilizar el color azul y el subrayado para resaltar algún término, ya que inducimos a error al visitante al alterar el esquema perceptivo propio de la WEB.


La base>>Imágenes de fondo
Imagen de fondo
Además de los colores seguro que has visto alguna página que tiene una textura como fondo. Aunque últimamente está empezando a caer en desuso puede ser un recurso interesante para la construcción estética de nuestro sitio WEB.
Lo que hacemos cuando elegimos una imagen para colocarla como fondo de nuestra página es considerar la pantalla como el suelo de una habitación que iremos rellenando desde la esquina superior izquierda con baldosas. Las baldosas serán tan grandes o pequeñas como la imagen que hayamos elegido.
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/imagenfondo.png" \* MERGEFORMATINET Para elegir la imagen que deseamos utilizar como fondo de la página accederemos al panel que ya conocemos mediante la opción de menú formato  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/estilos/flechamenu.png" \* MERGEFORMATINET  colores y fondo de la página.
Si la imagen se encuentra fuera de la carpeta en la que estamos trabajando podemos tener un problema cuando se publique la página, por lo que se recomienda que, antes de insertar una imagen, sea como fondo o como componente de la página, se copie a la carpeta de trabajo o a una subcarpeta que cuelgue de ella.
Si la imagen que deseamos poner de fondo se encuentra en la carpeta o en una subcarpeta de la misma, será muy conveniente marcar  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/urlrelativa.png" \* MERGEFORMATINET para que la referencia no sea la  HYPERLINK "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/pag2.html" \l "absoluta#absoluta" ruta absoluta hasta ella, sino su  HYPERLINK "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/pag2.html" \l "relativa#relativa" ruta relativa
Si la página a la que le estamos aplicando el fondo no ha sido guardada todavía verás que no se activa la casilla para indicar que la URL es relativa a la página, ya que al no conocer aún cuál será la ubicación de la misma es imposible establecer rutas relativas hacia ella.
Ruta absoluta:
Llamamos de esta forma a la ruta que recoge la ubicación de un determinado archivo sin tener en cuenta el punto desde el que se solicita la referencia. Por ejemplo: http://platea.pntic.mec.es/~rluna/index.html También sería una ruta absoluta una referencia a un archivo dentro de nuestro disco duro del tipo file:///F:/WEBs/HTML/imagenes/lateralespiral.gif
Ruta relativa: 
En este caso tenemos en cuenta el punto desde el que damos la referencia del tipo imagenes/lateralespiral.gif donde hemos eliminado la referencia inicial e indicamos que, desde el punto donde estamos, encontraremos una subcarpeta en la que estará la imagen lateralespiral.gif
Cuando creamos un sitio WEB es importante que todas las rutas sean relativas para que al hacer una réplica de nuestro sitio en el servidor todas las referencias sigan siendo válidas igual que en nuestro disco duro. Por cierto, supongo que ya te habrás dado cuenta que todos los archivos que formen parte del sitio WEB deben estar en la carpeta principal o en subcarpetas de la misma. (Por utilizar la metáfora de la casa: no podemos guardar trastos en el cuarto del ascensor porque, a lo mejor, en el nuevo edificio que sería el servidor WEB no hay ascensor o está en otro sitio. Todo debe estar en habitaciones situadas de la puerta de casa hacia adentro) Ni que decir tiene que si tenemos que enviar a alguien a la "casa de un amigo" tendremos que darle la dirección completa para que no se pierda, esto es, la ruta absoluta.
Para hacer la siguiente práctica puedes utilizar alguna de las imágenes que encontrarás en la carpeta imagenes (sin tilde para garantizar la compatibilidad). También puedes recurrir a cualquiera de la multitud de páginas en la red que ofrecen la posibilidad de obtener este tipo de imágenes. Tendremos que "bajarlas" a nuestro ordenador, para lo que pulsaremos con el botón derecho del ratón sobre la imagen que queramos conseguir, y copiarlas en el directorio de trabajo para poder incluirlas en nuestra página. (Aunque se podrían guardar en cualquier directorio resulta más cómodo hacerlo en el directorio en el que estamos trabajando nuestras páginas, para no tener que irlas buscando por todo el disco duro y, además, permitir la creación de rutas relativas que funcionen posteriormente). Puedes probar a bajar alguna imagen para el próximo ejercicio desde  HYPERLINK "http://www.areas.net/colorvivo.htm" \t "_blank" ColorVivo
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/numeracion/diecinueve.gif" \* MERGEFORMATINET 
Arranca N|VU para crear una nueva página.
Copia en tu carpeta del curso, o en una subcarpeta de ésta, una imagen para aplicarla como imagen de fondo a tu página. (Puedes utilizar alguna que hayas obtenido de Internet).
Abre el panel de colores y fondo de la página y elige una imagen para aplicarla como fondo a tu página. (Puedes utilizar alguna de las que tienes en la carpeta imágenes o cualquier otra que tuvieras previamente o hayas obtenido de Internet).
Antes de aceptar comprueba que está desmarcada  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/urlrelativa2.png" \* MERGEFORMATINET  y observa que la referencia a la imagen es una ruta absoluta. Déjalo así por el momento
Utiliza la pestaña  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/pestanacodigofuente.png" \* MERGEFORMATINET para localizar la etiqueta  y comprobar que el atributo de imagen de fondo de la página  tiene por ahora la referencia a la imagen en forma de ruta absoluta.
Guarda la página en tu carpeta de trabajo con el nombre actividad19.html
Vuelve a la pestaña  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/pestananormal.png" \* MERGEFORMATINET  y recurre nuevamente a colores y fondo de la página para marcar la casilla  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/urlrelativa.png" \* MERGEFORMATINET  para indicar que la URL de la imagen está relacionada con la dirección de la página.
Comprueba en la vista   INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/pestanacodigofuente.png" \* MERGEFORMATINET que ha desaparecido la ruta absoluta.
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/atencion.gif" \* MERGEFORMATINET Si la imagen se encuentra en una unidad diferente a la que alberga la página no tendrás posibilidad de indicar que se trata de una ruta relativa
Si tenías activada la utilización de estilos ve a edición  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/estilos/flechamenu.png" \* MERGEFORMATINET  preferencias y desactívala (o viceversa). Si eliminas la imagen de fondo y vuelves luego a incluirla podrás comprobar que la forma de materializar el código es diferente, aunque el efecto es el mismo.
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/numeracion/veinte.gif" \* MERGEFORMATINET 
En esta práctica verás la importancia del tamaño cuando pretendemos utilizar un fondo lateral.
En la carpeta de "imagenes" del CD-ROM tienes tres fondos back640.gif, back800.gif y back1200.gif que simulan la espiral de un cuaderno y un margen. La única diferencia entre las tres es su longitud.
Crea una página y aplícale como fondo la imagen back1200.gif. Guarda la página como actividad20a.html. Suponiendo que tu pantalla esté configurada para mostrar una resolución de800x600 o 1024x768 píxeles que son las dos más habituales, o incluso si tienes hasta 1200 píxeles de ancho, no habrá ningún problema en la visualización.
Cambia el fondo y utiliza la imagen back800.gif. Guarda la página como actividad20b.html. Si tu pantalla está a 800x600 seguirá viéndose correctamente, pero si tienes una resolución mayor comprobarás que aparece un efecto de repetición muy desagradable
Prueba con último con la imagen back640.gif. Guarda la página como actividad20c.html. Salvo que tu monitor sea muy pequeño y utilice aún una resolución de 640x480 comprobarás que nuestra "baldosa" se repite horizontalmente.
Ten en cuenta que ya empieza a haber monitores que utilizan resoluciones bastante altas, por lo que cuando quieras usar una imagen lateral será conveniente que la modifiques para hacerla más larga y evitar las repeticiones horizontales.
 
La base>>Etiquetas meta
Etiquetas en la cabecera del documento
Una vez que hemos decidido el "papel" sobre el que se mostrarán nuestras páginas vamos a completar la configuración de algunos elementos esenciales de la página.
Es probable que hayas observado que hay ocasiones en las que vemos un texto en la barra de título de la ventana del navegador. En otras ocasiones lo único que aparece es el nombre del archivo que define la página. Lo que ocurra en esa zona de la pantalla dependerá de que le hayamos dado un título a nuestra página o no lo hayamos hecho. ¿No recuerdas que cada vez que has ido a guardar por primera vez aparecía una ventana a la que probablemente no le has hecho mucho caso?
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/titulo.png" \* MERGEFORMATINET Si prestamos un poco de atención podemos ver que se nos explica con mucha claridad la utilidad del título que está solicitando.
Si ya habíamos guardado la página y queremos hacer modificaciones podemos utilizar el menú Formato  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/estilos/flechamenu.png" \* MERGEFORMATINET  Título y propiedades de la página e introducir el nuevo título en el campo correspondiente, aprovechando incluso para completar el nombre del autor y una pequeña descripción de la página. También puede resultar cómodo utilizar la visualización   INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/pestanacodigofuente.png" \* MERGEFORMATINET y escribir el nuevo título entre las etiquetas y .

 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/numeracion/veintiuno.gif" \* MERGEFORMATINET 
Abre con N|VU cualquiera de las páginas que has guardado hasta el momento en las que no hayas escrito nada al aparecer el mensaje pidiéndote título, o bien crea una nueva página.
En la pestaña  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/pestananormal.png" \* MERGEFORMATINET  elige formato  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/estilos/flechamenu.png" \* MERGEFORMATINET  título y propiedades de la página
Rellena los diferentes campos (Consulta la información sobre códigos que aparece después de este ejercicio para saber para qué sirve cada uno de los campos que aparecen)
Puedes utilizar la vista   INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/pestanacodigofuente.png" \* MERGEFORMATINET para agregar alguna etiqueta más de las que aparecen en la ventana.
Guarda la página en tu carpeta con el nombre actividad21.html
Aunque puedes comprobarlo de forma inmediata en la propia barra de título de N|VU puedes utilizar el icono  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/imagenes/botonnavegar.png" \* MERGEFORMATINET  y ver que el navegador recoge también el título que hemos introducido.
 INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/unidad_2/img/propiedadesdepagina.png" \* MERGEFORMATINET El panel al que accedemos al pulsar formato  INCLUDEPICTURE "http://pformacion.educa.jcyl.es/archivos/_59/scorm/4_html/contenidos/estilos/flechamenu.png" \* MERGEFORMATINET  título y propiedades de la página  nos muestra en primer lugar un bloque dedicado a los campos principales de información general: el título, el autor y la descripción.
El campo descripción es esencial cuando queremos dar publicidad a nuestra página y hay que procurar darle un contenido claro y significativo, porque muchos buscadores lo utilizan como primera referencia para ofrecerle al usuario información sobre el contenido de la página.
En cuanto a los campos de internacionalización, el idioma y la dirección de escritura no son realmente etiquetas meta, sino atributos del elemento html. 

Los campos que aparecen en la ventana de propiedades son invisibles para el visitante, salvo el de título. Entonces ¿para qué rellenarlos?
Su utilidad es de cara a los programas araña que lanzan los índices y motores de búsqueda para buscar direcciones de páginas. Estos programas buscan en la cabecera del documento y recogen información de las etiquetas meta, algunas de las cuales son:
No tiene más validez que la de "firmar" la autoría.
Si no hay una etiqueta de descripción los robots suelen utilizar las primeras palabras del texto.
Los índices agrupan las páginas por categorías. Si tenemos palabras que coincidan con las categorías del índice nuestra página se incluirá en ese grupo.
Si definimos con acierto los términos por los que esperamos que nos puedan buscar nuestros visitantes conseguiremos que los buscadores ofrezcan el enlace a nuestra página en una posición relevante cuando un internauta busque uno de esos términos. La cantidad máxima de palabras clave es de cincuenta.
Indica a los robots de los buscadores que tienen que indexar todas las páginas del sitio web.
Indica a los robots de los buscadores que tienen que indexar la página pero no deben seguir los enlaces que pueda haber en ella.
Indica a los robots de los buscadores que no tienen que indexar la página ni seguir los enlaces que pueda haber en ella.
Indica a los robots de los buscadores que tienen que no tienen que indexar la página pero que sí deben seguir los enlaces que pueda haber en ella para indexar el resto de páginas.
Permite redirigir de forma automática el navegador a una determinada página al pasar el número de segundos especificado en content. Es útil cuando se cambia una página de dirección después de llevar tiempo en la red, para que los que lleguen a la página antigua a través de algún enlace puedan ir a la nueva localización sin necesidad de tener la dirección de ésta.
Hace que nuestra página se cargue automáticamente en una ventana nueva evitando que quede encerrada en una estructura de marcos desde la que se la haya llamado.
 :