0% encontró este documento útil (0 votos)

481 vistas

Manual de Introducción Al Lenguaje HTML. Formación para El Emple-1 PDF

Este manual introduce el lenguaje HTML y sus aplicaciones. Explica los orígenes e historia de HTML, la estructura básica de documentos HTML, y las etiquetas principales para controlar texto, imágenes, enlaces, tablas y otros contenidos. También cubre hojas de estilo CSS, contenidos multimedia, novedades de HTML5 y el uso de programas como Dreamweaver. El objetivo es que los estudiantes aprendan los principios básicos de HTML para crear y publicar páginas web.

Cargado por

Mauricio

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

0% encontró este documento útil (0 votos)

481 vistas

Manual de Introducción Al Lenguaje HTML. Formación para El Emple-1 PDF

Cargado por

Mauricio

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

Está en la página 1/ 165

MANUAL INTRODUCCIÓN AL

LENGUAJE HTML
Formación para el Empleo

45
FUNDACIÓN PUBLICEP - Más formación, mejor futuro!!
Grupo Publicep está orgulloso de presentar su último proyecto: la
FUNDACIÓN PUBLICEP. Una entidad destinada a la promoción de
la enseñanza y la formación de profesores en las zonas más
necesitadas de Hispanoamérica.

Para ello, FUNDACIÓN PUBLICEP desea promover la formación

y adiestramiento de profesores especializados y una política de
ayudas para la educación, que permita a los jóvenes estudiantes
con talento continuar sus estudios el tiempo necesario.

Un porcentaje del precio de venta al público de cada libro de

Editorial Cep irá destinado a la FUNDACIÓN PUBLICEP. De este
modo, nuestros clientes se convertirán en protagonistas del
proyecto y contribuirán al éxito del mismo.

Más información: http://fundacion.grupopublicep.com

 Julio Terán Anciano

 Edita: EDITORIAL CEP, S.L.
C/ Dalia nº 20. Polígono El Lomo
28970 Humanes de Madrid (Madrid)
Tlf. 902 108 209
Edición: octubre 2010

ISBN papel: 978-84-6811-022-6 / ISBN pdf:978-84-681-6314-7

Depósito Legal: M-45902-10

Cualquier forma de reproducción, distribución, comunicación pública o

transformación de esta obra sólo puede ser realizada con la autorización de sus
titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de
Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún
fragmento de esta obra

Imprime: PUBLICEP, S.L.

C/ Violeta nº 19. Polígono El Lomo
28970 Humanes de Madrid (Madrid). Tfl. 91 609 4176
AUTOR
Julio Terán Anciano
Índice
MODULO ÚNICO: INTRODUCCIÓN AL LENGUAJE HTML

TEMA 1. ORÍGENES Y EVOLUCIÓN DE HTML ..............................................................................13

- Los servicios que ofrece Internet

- Los componentes principales del servicio Web

- El funcionamiento del servicio Web

- El lenguaje de marcas HTML

- Origen y versiones de HTML

- Publicar documentos HTML en un servidor Web

LO QUE HEMOS APRENDIDO ................................................................................................................................21

TEMA 2. ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML ........................................................25

- ¿Qué es un documento HTML?

- ¿Qué se necesita para crear un documento HTML?

- Nombrar correctamente los documentos HTML

- Los componentes y las etiquetas

- Estructura básica de un documento HTML

LO QUE HEMOS APRENDIDO ................................................................................................................................39

TEMA 3. ETIQUETAS PRINCIPALES ..............................................................................................43

- Estructura general de las etiquetas

- Comportamiento del texto en HTML

- Clasificación de las etiquetas según los contenidos que definen

LO QUE HEMOS APRENDIDO ................................................................................................................................57

TEMA 4. EL CONTROL DEL TEXTO ..............................................................................................61

- Introducir texto

- Organizar el texto
- Aplicar formato y estilo al texto

LO QUE HEMOS APRENDIDO ................................................................................................................................77

TEMA 5. EL CONTROL DE LAS IMÁGENES ..................................................................................81

- Los formatos gráficos en HTML

- Insertar imágenes en las páginas

- Los mapas de imagen

LO QUE HEMOS APRENDIDO ................................................................................................................................89

TEMA 6. LOS ENLACES ................................................................................................................91

- El concepto de enlace

- Tipos de enlaces

- Enlaces internos

- Enlaces locales

- Enlaces externos

- Enlaces de correo electrónico

LO QUE HEMOS APRENDIDO ................................................................................................................................99

TEMA 7. LAS TABLAS ................................................................................................................101

- El origen y el uso actual de las tablas

- Estructura básica de las tablas

- El uso de tablas complejas

- Modificar tablas ya creadas

- El contenido de las tablas

LO QUE HEMOS APRENDIDO ................................................................................................................................111

TEMA 8. LOS FORMULARIOS ......................................................................................................113

- ¿Qué es y para qué sirve un formulario?

- ¿Cómo funciona un formulario?

- Estructura básica de un formulario

- Aplicar estilo a un formulario

LO QUE HEMOS APRENDIDO................................................................................................................................119

TEMA 9. LOS MARCOS................................................................................................................121

- ¿Qué son los marcos?

- Ventajas e inconvenientes del uso de los marcos

- Diseñar páginas con marcos

- Los marcos flotantes

LO QUE HEMOS APRENDIDO ..............................................................................................................................131

TEMA 10. LAS HOJAS DE ESTILO CSS ......................................................................................133

- ¿Qué son las hojas de estilo?

- Tipos de hojas de estilo

- Etiquetas principales de las hojas de estilo

- Propiedades controlados por las hojas de estilo

LO QUE HEMOS APRENDIDO ..............................................................................................................................139

TEMA 11. OTROS CONTENIDOS MULTIMEDIA ............................................................................141

- ¿Qué son los plug-ins?

- Añadir contenedores. La etiqueta <DIV>

- Añadir texto en movimiento. La etiqueta <MARQUEE>

- Añadir efecto de sonido. La etiqueta <BGSOUND>

- Añadir applets de Java. La etiqueta <APPLET>

- Añadir plug-ins externos. La etiqueta <EMBED>

- Añadir objetos varios. La etiqueta <OBJECT>

LO QUE HEMOS APRENDIDO ..............................................................................................................................149

TEMA 12. NOVEDADES DE HTML 5 ............................................................................................151

- Intención general de la versión HTML 5

- Nuevas etiquetas para organizar el texto

- Nuevas etiquetas para mejorar la estructura del documento

- Nuevas etiquetas de ayuda al navegador

- Nuevas etiquetas de mejora de la interactividad

LO QUE HEMOS APRENDIDO ..............................................................................................................................155

TEMA 13. PASAR DE HTML A ADOBE DREAMWEAVER ..............................................................157

- Diseño frente a programación de páginas web

- ¿Por qué emplear un programa de edición de contenidos para la Web?

- ¿Cómo utiliza el código HTML Adobe Dreamweaver?

LO QUE HEMOS APRENDIDO ..............................................................................................................................161

MÓDULO ÚNICO
INTRODUCCIÓN AL LENGUAJE HTML

TEMA 1. Orígenes y evolución de HTML

TEMA 2. Estructura básica de un documento HTML
TEMA 3. Etiquetas principales
TEMA 4. El control del texto
TEMA 5. El control de las imágenes
TEMA 6. Los enlaces
TEMA 7. Las tablas
TEMA 8. Los formularios
TEMA 9. Los marcos
TEMA 10. Las hojas de estilo CSS
TEMA 11. Otros contenidos multimedia
TEMA 12. Novedades de HTML 5
TEMA 13. Pasar de HTML a Adobe Dreamweaver

OBJETIVOS:
Conocer los principios del lenguaje de hipertexto con marcas HTML.
Conocer la evolución del lenguaje HTML en sus sucesivas versiones.
Conocer la sintaxis de este lenguaje.
Conocer las etiquetas básicas para la edición de páginas web.
Aprender a crear páginas web escribiendo código HTML directamente.
Facilitar la compresión de los programas de edición de páginas web como Adobe
Dreamweaver.
A efectos prácticos este manual se basará en la versión HTML 4, vigente a fecha de hoy,
pero se hará mención de las novedades previstas para la versión HTML 5, sobre la que se
está trabajando en la actualidad.
TEMA 1
Orígenes y evolución de HTML
Los servicios que ofrece Internet
Los componentes principales del servicio Web
El funcionamiento del servicio Web
El lenguaje de marcas HTML
Origen y versiones de HTML
Publicar documentos HTML en un servidor Web

OBJETIVOS:
Mostrar una visión general de Internet y los servicios que ofrece.
Conocer el servicio Web para optimizar su funcionamiento.
Entender el funcionamiento de un lenguaje con marcas como HTML.
Conocer la evolución y las tendencias futuras del lenguaje HTML.
Conocer la posibilidad de crear documentos para la Web utilizando sólo código HTML.
Tema 1. Introducción al lenguaje HTML

LOS SERVICIOS QUE OFRECE INTERNET

Internet es una red mundial formada por redes de ordenadores interconectados entre sí y que basan su funcionamiento
en el uso común de los protocolos denominados TCP/IP.

Internet es un vehículo de comunicación multimedia que permite, a sus usuarios, acceder a diferentes servicios como el
correo electrónico (Mail), los grupos de discusión para el intercambio de opiniones (News), la comunicación simultánea en
tiempo real (Chat), el acceso remoto a ordenadores (Telnet), la transferencia de ficheros (Ftp), la telefonía vía Internet (Audio
Ip), la vídeo conferencia vía Internet (Audio y vídeo Ip) y el acceso a información en formato multimedia (www).

LOS COMPONENTES PRINCIPALES DEL SERVICIO WEB

El servicio Web, World Wide Web, WWW o W3 es el servicio de Internet más extendido y más utilizado actualmente. Es
un sistema de intercambio de información hipermedia y multimedia que emplea los recursos disponibles en Internet.

El servicio Web se basa en tres componentes principales, que son: el uso de protocolos comunes de acceso HTTP,
dentro de los protocolos generales TCP/IP, la utilización de un sistema único de identificación de recursos mediante un
esquema único de direcciones URL y un lenguaje universal para la distribución de información multimedia dentro de
documentos de hipertexto HTML.

El desarrollo actual del servicio Web ha sido posible en gran medida gracias a la utilización de estos tres componentes
universalmente aceptados, lo que ha permitido a los desarrolladores de software, -navegadores, editores, etc.-, y a los
desarrolladores de contenidos, disponer de unas normas comunes estandarizadas y supervisadas por organizaciones
internacionales dedicadas a ello.

El protocolo HTTP

TCP/IP (Transmision Control Protocol/Internet Protocol), es un conjunto de normas que definen la transmisión de datos
entre ordenadores, a través de la red Internet. Dentro de este conjunto de protocolos, el protocolo Http (Hiper Text Transfer
Protocol), es un protocolo específico empleado para la transmisión de documentos hipertexto.

El esquema de direcciones URL

El segundo componente sobre el que se basa el servicio Web, es el sistema identificación de recursos situados en el
WWW denominado URL (Uniform Resource Locator). Mediante este sistema, cada recurso, -documento Html, imagen,
audio, vídeo, etc.-, dispone de una identificación única.

El lenguaje HTML

El lenguaje HTML (Hyper Text Markup Languaje), es el tercer componente sobre el que se basa el servicio Web. Este
lenguaje, facilita mediante el uso de etiquetas, -marcas o tags-, la inclusión, en los documentos publicados, de texto, tablas,
imágenes, audio, vídeo, enlaces a otros recursos, etc.

EL FUNCIONAMIENTO DEL SERVICIO WEB

El servicio Web es un servicio del tipo cliente-servidor. Los contenidos, lo que denominamos páginas web, están alojados
en ordenadores de tipo servidor, abiertos al público. Los usuarios acceden a esos contenidos desde sus ordenadores
personales utilizando programas clientes web que se denominan navegadores, exploradores o visualizadores de contenidos
Web.

Editorial CEP 15
Manual Introducción al lenguaje HTML

Exploradores Web

Estos programas interpretan el lenguaje HTML con el que están creadas las páginas web publicadas, y nos permiten
verlas tal y como estamos acostumbrados al navegar por Internet.

Actualmente se dispone de numerosos programas de navegación, siendo los más conocidos y más utilizados los
siguientes: Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Ópera y Netscape. Existen además otros navegadores
menos conocidos y utilizados.

Navegadores más utilizados

Plug-ins y extensiones

Cada vez es mayor la variedad de contenidos que se pueden incluir en las páginas Web, pero los navegadores utilizados
actualmente no son capaces de interpretarlos y visualizarlos directamente; para poder hacerlo necesitan de unos
complementos denominados plugins y extensiones. Los más frecuentes son los necesarios para poder interpretar los
contenidos de más reciente incorporación a las páginas Web.

Algunos de estos plugins son los siguientes:

- Adobe Reader, para visualizar documentos en formato PDF.

- Adobe Flash Player, para visualizar animaciones en formato SWF.

- Apple Quick Time, para visualizar vídeos.

- Windows Media Player, para visualizar videos.

- Networks Real Audio y Real Vídeo, para visualizar audio y vídeo

Plug-ins más utilizados

Editores HTML

Para poder crear un documento web es necesario utilizar un programa editor mediante el que escribir el código que
posteriormente será interpretado por el explorador. Los editores de HTML se pueden dividir en dos categorías: programas
procesadores de texto y programas específicamente desarrollados para la edición de contenidos HTML.

16 Editorial CEP
Tema 1. Introducción al lenguaje HTML

En la primera categoría de editores estarían desde los simples asistentes de texto de los sistemas operativos, como el
Bloc de Notas, TeachText o WordPad, hasta los procesadores de texto más avanzados como Microsoft Word, WordPerfect,
Open Office, etc. En la segunda categoría estarían los programas desarrollados específicamente para la edición de
documentos HTML, entre los que destaca Adobe Dreamweaver como el más utilizado profesionalmente. Dreamweaver es
un editor de contenidos para la Web de tipo WYSIWYG (What you see is what you get/Lo que ves es lo que tienes), lo que
quiere decir que el diseñador puede escribir código HTML directamente o asistido por el programa, pero en todo momento
está viendo lo que finalmente verá el usuario de ese documento cuando se publique en la Web.

Adobe Dreamweaver y Open Office

Formatos de archivo de los contenidos HTML

Cada vez es posible mostrar nuevos tipos de contenidos en las páginas Web. Esto es posible a tres factores
determinantes, el ancho de banda, la estandarización de formatos de los contenidos y la evolución del WWW.

Los anchos de banda actuales permiten que las empresas, los profesionales y los particulares puedan disponer de
conexiones tipo ADSL lo suficientemente rápidas como para que sea posible la visualización de contenidos pesados, y por
tanto más lentos de descarga, como el sonido, el vídeo, las animaciones, etc.

Se han estandarizado los formatos de archivo de los diferentes contenidos que soporta HTML; siendo los más utilizados,
los siguientes:

- Texto: HTML.

- Imágenes: JPEG/GIF/PNG.

- Audio: WAV/AIF/MP3/MP4/Real Audio/Real Player/QuickTime.

- Animaciones: SWF.

- Vídeo: MPEG/QuickTime/Real Player/Real Vídeo/DivX/FLV.

- Realidad virtual y 3D: VRML.

La evolución actual del WWW hace que los usuarios demanden páginas web con contenidos cada vez más ricos y
visuales, y que aprovechen todos los medios disponibles hoy en día.

Documentos de Hipertexto

Un documento de hipertexto es un formato de documento que permite incluir, además de texto, enlaces que facilitan el
acceso a otras partes del mismo documento, a otros documentos vinculados con él o a cualquier otro recurso de Internet.

Este sistema de vinculación entre documentos y recursos es la base de lo que conocemos como navegación y nos
permite mediante clicks de ratón o toques táctiles "saltar" de un contenido a otro y disponer de toda la información colocada
en la Web.

Editorial CEP 17
Manual Introducción al lenguaje HTML

EL LENGUAJE DE MARCAS HTML

El lenguaje HTML (Hyper Text Markup Languaje), es un lenguaje que permite la distribución de contenidos multimedia
incluidos en documentos de hipertexto en el WWW.

HTML no es un lenguaje de programación tipo JAVA o C++ o Perl, ni un lenguaje de descripción de páginas tipo
Postscript o PDF, si no que es un lenguaje que describe la estructura y la semántica del documento. Para ello utiliza un
lenguaje de etiquetas, -tags-, basado en el estándar DTD SGML (Document type definition. Standard Generalized Markup
Language).

SGML es un metalenguaje, es decir una norma estándar utilizada para la descripción de lenguajes de etiquetas como
HTML.

Mediante el uso de estas etiquetas, marcas o tags, permite la inclusión de elementos de texto, listas, tablas, imágenes,
audio, vídeo, animaciones, enlaces a otros documentos y recursos, etc.; así como el intercambio interactivo de información.

Gracias al cumplimiento de las especificaciones en las que se basa HTML, los documentos creados utilizándolo son
independientes de las plataformas de trabajo que se hayan usado para crearlos, -desarrolladores, programadores y
diseñadores-, de las plataformas que se utilicen para publicarlos y distribuirlos, -proveedores de Internet y alojadores de
contenidos-, como de las plataformas que utilicen los usuarios que acceden a ellos. Entendiéndose por plataforma el
conjunto formado por el hardware, el sistema operativo y el software empleados en cada caso.

Lenguajes de programación

ORIGEN Y VERSIONES DE HTML

El lenguaje HTML fue desarrollado en año 1989 por Tim Berners-Lee, y a partir de ese momento y hasta la actualidad
se han ido incorporando nuevas especificaciones y etiquetas para adaptarlo a los requerimientos de los usuarios, así como
a la propia evolución técnica de Internet y a la evolución conceptual de la Web.

Para marcar las directrices de estandarización del desarrollo del WWW se creó un consorcio internacional denominado
W3C que está formado por diferentes instituciones internacionales de investigación y educación y grandes empresas
vinculadas con la informática y las tecnologías de Internet.

A cada desarrollo y ampliación importante se le asignó un número de versión. Las versiones existentes de HTML, y las
características principales que incorporan, son las siguientes:

- HTML 0: Establece la estructura básica de un documento en Internet.

- HTML 1: Añade estilos para el texto.

- HTML 1.0: Reúne en una sola versión las dos anteriores.

- HTML 2.0: Añade formularios.

- HTML 3.0: Añade tablas.

18 Editorial CEP
Tema 1. Introducción al lenguaje HTML

- HTML 3.2: Incluye desarrollos de Netscape.

- HTML 4.0: Incluye hojas de estilo, JavaScript, marcos, objetos multimedia, mejoras en la accesibilidad, etc.

- HTML 5.0: Incluye gestión directa de vídeo además de otros avances.

PUBLICAR DOCUMENTOS HTML EN UN SERVIDOR WEB

Una vez creados los documentos HTML, hay que hacerlos públicos para que estén disponibles para los usuarios
interesados. Para esto hay que publicarlos en un ordenador conectado a Internet.

Publicar documentos en un servidor Web consiste en colocar los documentos HTML en un directorio de del disco duro
de un ordenador que disponga de un programa servidor y que esté conectado, a la red Internet, para que cualquier usuario
pueda acceder a ellos desde su ordenador. La publicación puede ser gratuita o previo pago de una cantidad establecida por
el servicio de alojamiento.

La publicación de los contenidos HTML se puede realizar de tres maneras:

- En un ordenador propio, conectado a Internet, que tenga instalado el software de servidor Web.

- En un servidor que facilite la publicación gratuita de documentos HTML, -centro educativo, institución, etc.-.

- En los ordenadores de un proveedor de servicio de alojamiento WWW, previo pago de las tarifas establecidas en
función de diversos parámetros, cantidad de información alojado, servicios complementarios ofrecidos, etc.

Editorial CEP 19
Tema 1. Introducción al lenguaje HTML

LO QUE HEMOS APRENDIDO: tema 1

Æ Internet es una red mundial formada por redes de ordenadores interconectados entre sí y que basan su
funcionamiento en el uso común de los protocolos denominados TCP/IP.
Æ El servicio Web, World Wide Web, WWW o W3 es el servicio de Internet más extendido y más utilizado actualmente.
Es un sistema de intercambio de información hipermedia y multimedia que emplea los recursos disponibles en
Internet.
Æ El servicio Web se basa en tres componentes principales, que son: el uso de protocolos comunes de acceso HTTP,
dentro de los protocolos generales TCP/IP, la utilización de un sistema único de identificación de recursos mediante
un esquema único de direcciones URL y un lenguaje universal para la distribución de información multimedia dentro
de documentos de hipertexto HTML.
Æ TCP/IP (Transmision Control Protocol/Internet Protocol), es un conjunto de normas que definen la transmisión de
datos entre ordenadores, a través de la red Internet.
Æ El segundo componente sobre el que se basa el servicio Web, es el sistema identificación de recursos situados en
el WWW denominado URL (Uniform Resource Locator).
Æ El lenguaje HTML (Hyper Text Markup Languaje), es el tercer componente sobre el que se basa el servicio Web. El
servicio Web es un servicio del tipo cliente-servidor.
Æ Los exploradores web interpretan el lenguaje HTML con el que están creadas las páginas web publicadas, y nos
permiten verlas tal y como estamos acostumbrados al navegar por Internet.
Æ Los exploradores, para poder interpretar todos los contenidos, necesitan de unos complementos denominados
plug-ins y extensiones.
Æ Para poder crear un documento Web es necesario utilizar un programa editor mediante el que escribir el código que
posteriormente será interpretado por el explorador.
Æ Dreamweaver es un editor de contenidos para la Web de tipo WYSIWYG (What you see is what you get/Lo que ves
es lo que tienes).
Æ Cada vez es posible mostrar nuevos tipos de contenidos en las páginas Web.
Æ La evolución actual del WWW hace que los usuarios demanden páginas web con contenidos cada vez más ricos y
visuales, y que aprovechen todos los medios disponibles hoy en día.
Æ Un documento de hipertexto es un formato de documento que permite incluir además de texto, enlaces que facilitan
el acceso a otras partes del mismo documento, a otros documentos vinculados con él o a cualquier otro recurso de
Internet.
Æ El lenguaje HTML (Hyper Text Markup Languaje), es un lenguaje que permite la distribución de contenidos
multimedia incluidos en documentos de hipertexto en el WWW.
Æ El lenguaje HTML, mediante el uso de estas etiquetas, marcas o tags, permite la inclusión de elementos de texto,
listas, tablas, imágenes, audio, vídeo, animaciones, enlaces a otros documentos y recursos, etc.; así como el
intercambio interactivo de información.
Æ El lenguaje HTML fue desarrollado en año 1989 por Tim Berners-Lee.

Editorial CEP 21
Manual Introducción al lenguaje HTML

Æ Para marcar las directrices de estandarización del desarrollo del WWW se creó un consorcio internacional
denominado W3C que está formado por diferentes instituciones internacionales de investigación y educación y
grandes empresas vinculadas con la informática y las tecnologías de Internet.
Æ Publicar documentos en un servidor Web consiste en colocar los documentos HTML en un directorio de del disco
duro de un ordenador que disponga de un programa servidor y que esté conectado a la red Internet, para que
cualquier usuario pueda acceder a ellos desde su ordenador.

22 Editorial CEP
Tema 1. Introducción al lenguaje HTML

# ANOTACIONES
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
....................................................................................................................................................................................................
...................................................................................................................................................................................................

Editorial CEP 23
Manual Introducción al lenguaje HTML

24 Editorial CEP
TEMA 2
Estructura básica de un documento HTML
¿Qué es un documento HTML?
¿Qué se necesita para crear un documento HTML?
Nombrar correctamente los documentos HTML
Los componentes y las etiquetas
Estructura básica de un documento HTML

OBJETIVOS:
Entender que es un documento HTML.
Aprender a crear documentos básicos HTML.
Conocer las limitaciones del código HTML.
Entender la sintaxis del código HTML.
Conocer las etiquetas mínimas necesarias para crear un documento HTML.
Tema 2. Estructura básica de un documento HTML

¿QUÉ ES UN DOCUMENTO HTML?

Un documento HTML es un archivo ASCII o archivo de texto plano, que mediante una serie de marcas o etiquetas va
definiendo los elementos que lo componen. Para crear un archivo ASCII se puede utilizar cualquier editor de texto. En el
tema anterior se indicaron algunos editores de texto básicos, cualquiera de ellos es suficiente para crear un documento
HTML. La única precaución que hay que tener es, al terminar, guardar el fichero en formato ASCII y no en el formato propio
del editor.

Para crear un documento HTML se puede utilizar el Bloc de Notas de Windows o SimpleText de Macintosh. Es
indiferente, por tanto, si se utiliza un ordenador Windows o un ordenador Macintosh o un ordenador Unix.

Una vez creado el documento HTML, hay que guardarlo en formato ASCII y añadirle la extensión .html o .htm. Para
visualizar el documento HTML creado hay que abrirlo con un navegador WWW.

Las marcas o etiquetas que se incorporan en el documento HTML, indican al navegador, con el que se visualice, la
manera en la que tiene que representar los contenidos incluidos en el documento, textos, listas, tablas, gráficos, imágenes,
etc.

Por tanto, el proceso de creación de documentos HTML es muy sencillo y se divide en dos partes: primero se crea el
documento con los contenidos y las etiquetas que lo van controlando y se guarda en formato ASCII y con extensión .html o
.htm; después se visualiza el documento con un navegador para comprobar el aspecto que tendrá una vez publicado
definitivamente. Cada vez que se hagan cambios en el código y contenidos del documento, habrá que usar la función
"actualizar" o "recargar" del navegador para que este actualice los cambios.

Bloc de notas de Windows

¿QUÉ SE NECESITA PARA CREAR UN DOCUMENTO HTML?

Crear documentos HTML de hipertexto es un proceso realmente sencillo, y para ello se necesita solamente lo siguiente:

- Un ordenador con un sistema operativo estándar de los que existen en el mercado actualmente: Microsoft Windows,
Apple MacOS, Unix, etc.

- En segundo lugar es necesario disponer de un editor o procesador de texto. Cualquiera de los editores que
acompañan a los diferentes sistemas operativos es suficiente. Como alternativa se puede utilizar un editor
específico de código HTML, de los de tipo WYSIWYG: Microsoft FrontPage, Adobe Dreamweaver, etc. Estos
editores facilitan la inserción del código HTML de una manera intuitiva mediante menús, botones y paletas; pero

Editorial CEP 27
Manual Introducción al lenguaje HTML

siempre es interesante conocer previamente los fundamentos del código HTML antes de pasar a utilizar un editor
específico de HTML.

- En tercer lugar hay que disponer de un navegador o explorador: Microsoft Explorer, Mozilla Firefox, Ópera, Apple
Safari, Google Chrome, etc., que permita visualizar los documentos creados mediante su publicación en local, es
decir, sin salir del ordenador con el que se ha creado el documento.

- Por último hay que conocer las diferentes etiquetas o marcas que permiten colocar cada tipo de contenido que se
quiera mostrar en el documento HTML.

NOMBRAR CORRECTAMENTE LOS DOCUMENTOS HTML

Debido a que el lenguaje HTML fue creado inicialmente en inglés y a las limitaciones de Internet para nombrar archivos,
es necesario conocer los caracteres especiales para escribir los acentos y otros signos de puntuación. También es
imprescindible seguir unas normas para el nombre de los archivos HTML.

Caracteres especiales para signos de puntuación

Para representar los caracteres especiales que sustituyen a los signos de puntuación en castellano existen dos maneras,
unas de ellas se basa en el empleo de abreviaturas de los signos de puntuación más habituales. Los caracteres especiales
más frecuentes son los indicados en la lista siguiente:

- á: á

- é: é

- í: í

- ó: ó

- ú: ú

- Á: Á

- É: É

- Í: Í

- Ó: Ó

- Ú: Ú

- ñ: ntilde;

- Ñ: Ntilde;

- >: >

- <: <

- &: &

- ": "

28 Editorial CEP
Tema 2. Estructura básica de un documento HTML

Notación para escribir caracteres especiales

Normas para el nombre de los archivos HTML

Para evitar errores en la gestión de los documentos y contenidos, una vez publicados, es conveniente tener en cuenta
las siguientes indicaciones al asignar el nombre a un archivo HTML:

- No usar espacios para separar los diferentes elementos que componen el nombre de un documento HTML.

- No utilizar mayúsculas.

- Evitar los siguientes caracteres:

· Punto (.): se usa para indicar extensiones de archivos.

· Comillas ("): se usa en la sintaxis de HTML.

· Barra derecha (/): indica anidación de archivos en carpetas.

· Barra izquierda (\): no se admite en MS Windows.

· Dos puntos (:): se usa en comandos de script.

· Exclamación (¡): se usa en la sintaxis de HTML.

LOS COMPONENTES Y LAS ETIQUETAS

Un documento HTML está fundamentalmente compuesto por texto, pero también puede incluir otro tipo de componentes
como listas, tablas, enlaces, gráficos, imágenes, sonidos, vídeos, animaciones, etc. Cada uno de estos contenidos se define
mediante una etiqueta o marca específica para ese contenido.

Cualquier contenido se describe mediante tres partes: una etiqueta de apertura, un contenido y una etiqueta de cierre.
Hay etiquetas sin contenido, son aquellas que producen una acción, como un salto de línea, un salto de párrafo o la inclusión
de una línea separadora del texto.

Editorial CEP 29
Manual Introducción al lenguaje HTML

Tipos de etiquetas

Las etiquetas, también denominadas marcas, tags o directivas, son palabras en inglés escritas entre el signo < y el signo
>. Por ejemplo, la etiqueta de apertura de un documento HTML, que indica al navegador que comienza un documento HTML
se escribe: <HTML>. De manera general la sintaxis de cualquier etiqueta es la siguiente:

Existen dos tipos de etiquetas:

- Etiquetas abiertas o unarias: sólo se escriben una vez, cuando aparece la acción que indican. Por ejemplo, la
etiqueta que indica que se produce un salto de línea en el texto: <BR>

- Etiquetas delimitadoras o contenedores: se escriben dos veces, una al principio del contenido, <Texto de la
directiva>, y otra al final del contenido, </Texto de la directiva>. Por ejemplo, la etiqueta que indica texto en negrita
se escribiría: <B>Texto en negrita</B>. La etiqueta de cierre se escribe igual que la etiqueta de apertura incluyendo
el carácter barra derecha (/) delante del nombre de la etiqueta.

Para indicar un texto en negrita, se escribiría de la siguiente manera:

<B>Texto en negrita</B>

La etiqueta de apertura, <B> indica que comienza un texto en negrita, y la etiqueta de cierre </B> indica que acaba el
texto en negrita.

Estructura completa de las etiquetas

La estructura completa de una etiqueta se compone de tres partes: etiqueta, atributo y valor. Tanto el atributo como su
valor se escriben a continuación del texto de la etiqueta. Cada uno de estos elementos significa lo siguiente:

- Etiqueta: indica al navegador como debe interpretar el contenido que viene a continuación de la etiqueta, para
mostrarlo con un aspecto determinado.

- Atributo: modifica el significado de una etiqueta. Los atributos se escriben separados de su etiqueta mediante un
espacio y pueden tener diferentes valores.

- Valor: especifica las características de un atributo.

El atributo se escribe a continuación del nombre de la etiqueta, separado por un espacio, y seguido del signo igual.

Los valores de los atributos deben ir escritos entre comillas.

La estructura completa de una etiqueta con atributo y valor se escribiría de la siguiente manera:

Los atributos de una etiqueta sólo se incluyen en la etiqueta de apertura, no es necesario repetirlos en la etiqueta de
cierre. La etiqueta anterior se cerraría de la siguiente manera:

</Etiqueta>

Una etiqueta puede tener diversos atributos que se escribirán uno a continuación de otro, en cualquier orden y separados
por un espacio entre ellos.

30 Editorial CEP
Tema 2. Estructura básica de un documento HTML

El nombre de la etiqueta, su atributo y el valor de este, se pueden escribir en caracteres en mayúsculas o en minúsculas
indistintamente.

La sintaxis completa de un contenido definido por una etiqueta con varios atributos y sus correspondientes valores, sería
la siguiente:

<Etiqueta Atributo 1="Valor" Atributo 2="Valor"> Contenido </Etiqueta>

Los comentarios

HTML utiliza los comentarios igual que hacen los lenguajes de programación puros. Un comentario es un texto escrito
en el código HTML del documento, que no lo tiene en cuenta el navegador y que por lo tanto no es visible para el usuario
de la página Web.

Los comentarios se utilizan para dejar información útil para la modificación y mantenimiento posterior del código del
documento.

Los comentarios se escriben como texto normal precedido de los caracteres <! y seguido del carácter >. Un comentario
se escribiría de la siguiente manera:

<!Esto es un comentario>

Comportamiento de los navegadores

Debido a que los usuarios utilizan navegadores de diferentes versiones, no está garantizado que la versión del
navegador utilizado reconozca todas las etiquetas y especificaciones definidas en HTML 4.0.

En el caso de que un navegador no reconozca un atributo lo debe ignorar junto con su valor asociado. Si se da el caso
de que el navegador no reconoce un valor para un atributo determinado, debe aplicar el valor por defecto de ese atributo.

También se da el caso de etiquetas que han quedado en desuso, en este caso se recomienda no utilizarlas al crear los
documentos HTML.

Por todos estos motivos el aspecto final de una página Web va a depender del navegador y de la versión del mismo que
se esté usando en cada caso. Esto quiere decir que es imposible controlar el aspecto final exacto que tendrán nuestros
documentos HTML. Para minimizar este problema es conveniente comprobar cómo se visualizan, los documentos HTML
que se van creando, en los diferentes navegadores en uso en el mercado para hacer los cambios pertinentes.

Acceso al código de un documento HTML

Cuando se está visualizando desde un navegador un documento html, es posible ver el código con el que se ha creado.
Todos los navegadores tienen un menú que permite ver o mostrar el código fuente de la página que se está visitando en
ese momento. También es posible guardar la página visitada para navegar por ella sin conexión, e incluso abrirla con un
editor de páginas Web y comprobar su estructura y construcción. Esta es una opción muy recomendable para aprender a
hacer páginas Web, viendo cómo están realizadas aquellas que nos gustan.

Editorial CEP 31
Manual Introducción al lenguaje HTML

Menú Ver código fuente del navegador Explorer

Ventana de código fuente abierta desde el navegador Explorer

ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

Con el fin de conseguir una mayor universalidad y compatibilidad de los documentos creados con HTML, se ha
establecido una estructura mínima para que un documento pueda ser reconocido con documento HTML por cualquier
navegador. Esta estructura mínima divide el documento en tres partes definidas por un grupo de etiquetas.

Las partes en que se divide un documento estándar HTML 4 son las siguientes:

- Información sobre la versión HTML correspondiente al documento. <DOCTYPE>.

- Encabezado o sección declarativa. <HEAD>.

- Cuerpo del documento. <BODY>.

Información sobre la versión HTML del documento

La primera parte de un documento HTML indica la versión de HTML 4 que se está utilizando en el documento. Para ello
se utiliza un elemento de declaración de versión, y se pueden dar tres casos diferentes:

- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/PR-html4.01/strict.dtd>: Define

documentos que sólo incluyen elementos y atributos aprobados para HTML 4.01 y no incluyen los elementos
obsoletos o en desuso de versiones anteriores de HTML.

32 Editorial CEP
Tema 2. Estructura básica de un documento HTML

- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/PR-html4.01/loose.dtd>: Define

documentos que también incluyen elementos y atributos en desuso en la versión HTML 4.01. Esta especificación
asegura la máxima compatibilidad con versiones anteriores.

- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/PR-html4.01/framest.dtd>:

Define documentos con elementos y atributos que no han sido aprobados.

Este elemento no es imprescindible para que un navegador pueda visualizar el documento HTML.

Elemento de apertura de un documento HTML

Al comienzo de un documento se coloca la etiqueta <HTML> que indica al navegador que el archivo que está
visualizando es un documento que contiene código HTML. Esta etiqueta se complementa con la etiqueta correspondiente
de cierre </HTML> para delimitar la extensión del documento.

Dentro del espacio definido por estas etiquetas se incluyen las dos partes principales en las que se divide un documento
HTML, la cabecera y el cuerpo.

La primera parte es la cabecera del documento, definida por las etiquetas <HEAD> y </HEAD> y contiene información
útil para el navegador y los buscadores pero no es visible para el usuario cuando navega por la página.

La segunda parte es el cuerpo del documento, definido por las etiquetas <BODY> y </BODY> y contiene los elementos
que son visibles por el usuario, es decir, lo que muestra la página cuando se navega por ella.

Por tanto, un documento escrito en código HTML se abre con la etiqueta <HTML> y se cierra con la etiqueta </HTML>.
Entre las dos definen y acotan el documento.

El código básico necesario para crear un documento HTML sería el siguiente:

<HTML>

<HEAD> Aquí iría la información adicional del documento</HEAD>

<BODY> Aquí irían los contenidos del documento</BODY>

</HTML>

Encabezado o sección declarativa

Este primer apartado del documento HTML se define con las etiquetas <HEAD> y </HEAD>. Identifican y delimitan la
cabecera del documento que contiene información de gran utilidad para los programas buscadores que rastrean la red en
busca de páginas relevantes.

Dentro de la cabecera del documento se incluyen una serie de etiquetas que aportan, de manera organizada,
información de diverso tipo sobre el documento. Las principales etiquetas que se incluyen en este bloque son las siguientes:

- <TITLE>: Su función es definir el título del documento. Es un contenedor que delimita un bloque de texto que
aparecerá en la barra de título de la página cuando la visualice un navegador. Es importante que el texto del título
defina con precisión los contenidos del documento, ya que será utilizado por los buscadores para indexar la página,
y como referencia para la creación de páginas favoritas de los usuarios. Es un elemento único y obligatorio y no
puede contener otras etiquetas. Esta etiqueta requiere la correspondiente etiqueta de cierre, </TITLE>.

Editorial CEP 33
Manual Introducción al lenguaje HTML

- <BASE>: Su función es definir un directorio base para las referencias relativas al documento (URL). Este directorio
se utilizará para referenciar todos los contenidos del documento. No requiere etiqueta de cierre.

- <LINK>: Identifica las relaciones entre el documento y otros documentos.

- <META>: Permite definir combinaciones de identificadores y valores para facilitar información sobre el documento, tales
como el autor, la fecha de creación o modificación, o un listado de palabras clave relacionadas con el contenido del
documento. Generalmente, los buscadores recurren al contenido de esta etiqueta para incluir, las páginas Web
publicadas, en sus bases de datos. Esta etiqueta no requiere etiqueta de cierre. Esta etiqueta dispone de varios atributos:

· NAME: Identifica el tipo de información que se va a incluir, por ejemplo que se van a incluir palabras clave.

· CONTENT: Identifica la información que se va a incluir, por ejemplo un listado de palabras clave.

El código de un encabezado de una página estándar sería el siguiente:

<HEAD>

<TITLE> Aquí iría el título de la página <TITLE>

<BASE> Aquí iría el directorio de referencia <BASE>

<LINK> Aquí iría la relación de documentos vinculados <LINK>

<META NAME="DESCRIPTION" CONTENT="Aquí iría la descripción de la información">

<META NAME="KEYWORDS" CONTENT="Aquí iría el listado de palabras clave">

<HEAD>

Cuerpo del documento

Esta segundo apartado del documento se define con las etiquetas <BODY> y </BODY> que acotan la parte de
contenidos visibles de la página. Todos los elementos que se incluyan entre las dos etiquetas se mostrarán en la pantalla
de los usuarios cuando naveguen por la página.

La etiqueta <BODY> tiene una serie de atributos que sirven para modificar el aspecto y ciertas características de la
apariencia general del documento cuando es visualizado por un navegador. A partir de la versión HTML 4 se recomienda
utilizar hojas de estilo CSS para modificar la apariencia pero se siguen utilizando los atributos de la etiqueta <BODY>
cuando se quiere conseguir la máxima compatibilidad con cualquier versión de navegador. La tendencia actual es separar
los contenidos de su aspecto y apariencia; definiendo esta mediante las hojas de estilo CSS. Esta forma de crear páginas
facilita hacer cambios en el aspecto de una página web de una manera muy rápida y eficiente.

Los atributos principales de la etiqueta <BODY> son los siguientes:

- TEXT: Describe el color del texto.

- LINK: Describe el color de los enlaces de los textos y los marcos de las imágenes.

- ALINK. Describe el color de los enlaces que están activados en ese momento.

- VLINK: Describe el color de los enlaces que han sido ya visitados.

- BGCOLOR: Describe el color del fondo de la página.

- BACKGROUND: Indica la imagen que se va a utilizar como mosaico para el fondo de la página.
34 Editorial CEP
Tema 2. Estructura básica de un documento HTML

El color en HTML

Los colores en HTML son creados a partir de una combinación de los tres colores básicos del modelo de color RGB
(Rojo, verde y azul), basado en la síntesis aditiva del color. Este modelo de color se basa en las propiedades físicas del
color como componente de la luz blanca una vez descompuesta. La suma de los tres colores compone de nuevo la luz
blanca.

Es un modelo de color que utilizan los dispositivos digitales, -tv, monitores, escáneres, cámaras digitales, etc.-, y que se
basa en el principio de que sumando diferentes cantidades de luz, de cada uno de los colores básicos rojo, verde y azul,
se puede obtener cualquier color.

Para sistematizar la gestión del color en todos los dispositivos de tipo RGB que utilizan este modelo, se ha establecido
que cada componente RGB puede adquirir un valor de 0 a 255 unidades, siendo 0 la ausencia de luz y 255 la máxima luz
que puede emitir el dispositivo para ese color. Por tanto, un color cualquiera se representa, en el modelo RGB, por tres
componentes de 0 a 255 separadas por comas; la primera para indicar la cantidad de rojo, la segunda para la cantidad de
verde y la tercera para la cantidad de azul. Con este modelo los colores básicos se representarían de la siguiente manera:

- Blanco: 255, 255, 255.

- Rojo: 255, 0, 0.

- Verde: 0, 255, 0.

- Azul: 0, 0, 255.

- Amarillo: 255, 255, 0.

- Cian: 0, 255, 255.

- Magenta: 255, 0, 255.

- Negro: 0, 0, 0.

Modelo de color aditivo RGB

El código HTML utiliza los valores RGB de los colores, pero expresados en notación hexadecimal. En el sistema
hexadecimal, que es un sistema de numeración en base 16 en lugar de en base diez como lo es el sistema decimal, se
utilizan como dígitos 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, y F; a partir del cual se combinan de dos en dos para formar
las cifras hexadecimales de dos dígitos 00, 01, 02, …10, 11, 12, … FD, FE, FF.

Editorial CEP 35
Manual Introducción al lenguaje HTML

Para expresar un color, a cada valor de las componentes rojo, verde y azul, le asigna dos caracteres, que van de 00 a
99 y de AA a FF. Siendo 00 el valor hexadecimal que correspondería a un valor 0 en RGB, y FF el valor hexadecimal que
correspondería a un valor 255 en RGB. De esta manera cada color es representado por tres pares de dos cifras cada uno,
separados por comas. El primer para de cifras representa el color rojo, el segundo par de cifras, representa el color verde
y el tercer para de cifras representa el color azul. En un sistema hexadecimal se pueden obtener 256 combinaciones
posibles de valores formados por dos dígitos, que irían desde el valor 00 al valor FF

Con el modelo HTML, la tabla anterior de colores básicos, se representaría de la siguiente manera:

- Blanco: FF, FF, FF.

- Rojo: FF, 00, 00.

- Verde: 00, FF, 00.

- Azul: 00, 00, FF.

- Amarillo: FF, FF, 00.

- Cian: 00, FF, FF.

- Magenta: FF, 00, 00.

- Negro: 00, 00, 00.

Los monitores usados actualmente trabajan con sistemas de vídeo configurados a 256 colores, pero estos no son
siempre los mismos, ya que varían en función de que el sistema operativo sea Windows o MacOs. Cada uno de estos
sistemas se reserva una parte de los 256 colores para uso interno, a los que hay que añadir los que utilizan los navegadores,
con lo que la paleta común disponible queda reducida a 216 colores. Esta paleta se denomina Paleta Web Segura y está
formada por colores compuestos por pares de dígitos iguales, como CC,00,CC o FF,99,CC.

Cuándo se indica un color como valor de un atributo determinado en el código HTML, se coloca delante el carácter #
(almohadilla).

El código correspondiente a una página con fondo de color azul sería el siguiente:

Paleta de color Web segura 216 de Adobe Dreamweaver

36 Editorial CEP
Tema 2. Estructura básica de un documento HTML

Las imágenes en HTML

Las imágenes que se van a colocar como contenidos en un documento HTML deben pasar por un proceso de
optimización previa, y deben cumplir varios requisitos con el fin de que no ralenticen la navegación por la página y se
adecúen a los objetivos previstos. La finalidad de este proceso de optimización de las imágenes, -que se puede realizar con
los programas de Adobe, Photoshop e Fireworks-, consiste en conseguir el equilibrio entre el peso en kb y la calidad de la
imagen necesaria para la función que cumple en la página.

En primer lugar deben estar creadas a una resolución suficiente para su adecuada visualización en una pantalla de ordenador.
Normalmente basta con que las imágenes estén ajustadas a una resolución de entre 72 y 96 ppp (pixels por pulgada).

En segundo lugar deberán estar guardadas en cualquiera de los siguientes formatos de imagen compatibles con HTML:

- JPEG/PPG: Indicado para fotografías.

- GIF: Indicado para gráficos con pocos colores.

- PNG-24/PNH-8: Similares a JPEG y GIF.

Comparativa de formatos gráficos compatibles con HTML

En tercer lugar deberán estar ajustadas al tamaño en píxeles de ancho y alto al que se ve a utilizar en el documento
HTML, para no tener que escalarlas al colocarlas en la página Web. Si una imagen se amplía al colocarla en la página web,
puede perder calidad al mostrarse pixelizada; por el contario, si una imagen se reduce de tamaño, pesará innecesariamente
y hará más lenta la navegación por la página.

Una imagen se puede colocar en un documento HTML de varias maneras: como fondo de la página, como fondo de una
estructura de tabla, sobre la página, en un contenedor especial como una capa, etc.

Las imágenes se pueden colocar en los documentos HTML mediante las etiquetas correspondientes o mediante el uso
de hojas de estilo CSS.

Cuando una imagen se coloca como fondo, por defecto lo hace en modo mosaico, es decir, se repite, automáticamente a su
tamaño real tantas veces como sea preciso para cubrir por completo el fondo del documento. El número de veces que se repetirá
la imagen, como azulejo del mosaico que forma como fondo de la página, dependerá del tamaño de la ventana del navegador de
cada usuario en particular. Este caso se da cuando se utiliza el atributo BACKGROUND para la etiqueta <BODY>.

Recomendaciones al escribir el código HTML y crear páginas Web

A la hora de escribir el código HTML de una página web es recomendable seguir unas mínimas pautas que facilitarán
su revisión y comprobación futura.
Editorial CEP 37
Manual Introducción al lenguaje HTML

- Ser metódico y ordenado.

- Escribir cada etiqueta en una línea de texto.

- Utilizar sangrías para jerarquizar las etiquetas anidadas en otras.

- Utilizar mayúsculas para las etiquetas y minúsculas para los atributos y valores.

- No crear documentos muy largos, es preferible dividirlos en documentos de menor extensión y enlazarlos.

- Se recomienda que ninguna página exceda de una pantalla y media en longitud vertical.

- Las páginas importantes no deberían exceder de una pantalla en vertical.

El código de una página básica debería tener el siguiente aspecto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/PR-html4.01/strict.dtd>

<HTML>

<HEAD>

<TITLE> Aquí iría el título de la página </TITLE>

<BASE> Aquí iría el directorio de referencia </BASE>

<LINK> Aquí iría la relación de documentos vinculados </LINK>

<META NAME="DESCRIPTION" CONTENT="Aquí iría la descripción de la información">

<META NAME="KEYWORDS" CONTENT="Aquí iría el listado de palabras clave">

</HEAD>

<BODY> Aquí irían los contenidos visibles del documento</BODY>

</HTML>

38 Editorial CEP
Tema 2. Estructura básica de un documento HTML

LO QUE HEMOS APRENDIDO: tema 2

Æ Un documento HTML es un archivo ASCII o archivo de texto plano, que mediante una serie de marcas o etiquetas
va definiendo los elementos que lo componen.
Æ Para crear un archivo ASCII se puede utilizar cualquier editor de texto.
Æ Una vez creado el documento HTML, hay que guardarlo en formato ASCII y añadirle la extensión .html o .htm.
Æ Las marcas o etiquetas que se incorporan en el documento HTML, indican al navegador, con el que se visualice,
la manera en la que tiene que representar los contenidos incluidos en el documento, textos, listas, tablas, gráficos,
imágenes, etc.
Æ Crear documentos HTML de hipertexto es un proceso realmente sencillo, y para ello se necesita solamente lo
siguiente: un ordenador, un editor de texto y un navegador.
Æ Debido a que el lenguaje HTML fue creado inicialmente en inglés y a las limitaciones de Internet para nombrar
archivos, es necesario conocer los caracteres especiales para escribir los acentos y otros signos de puntuación.
Æ Para evitar errores en la gestión de los documentos y contenidos, una vez publicados, es conveniente tener en
cuenta una serie de indicaciones al asignar el nombre a un archivo HTML.
Æ Un documento HTML está fundamentalmente compuesto por texto, pero también puede incluir otro tipo de
componentes como listas, tablas, enlaces, gráficos, imágenes, sonidos, vídeos, animaciones, etc.
Æ Cada uno de los contenidos se define mediante una etiqueta o marca específica para ese contenido.
Æ Cualquier contenido se describe mediante tres partes: una etiqueta de apertura, un contenido y una etiqueta de
cierre.
Æ Las etiquetas, también denominadas marcas, tags o directivas, son palabras en inglés escritas entre el signo < y el
signo >.
Æ Existen dos tipos de etiquetas: etiquetas abiertas o unarias y sólo se escriben una vez, cuando aparece la acción
que indican; y etiquetas delimitadoras o contenedores que se escriben dos veces, una al principio del contenido,
<Texto de la directiva>, y otra al final del contenido, </Texto de la directiva>.
Æ La estructura completa de una etiqueta se compone de tres partes: etiqueta, atributo y valor. Tanto el atributo como
su valor se escriben a continuación del texto de la etiqueta.
Æ El atributo se escribe a continuación del nombre de la etiqueta, separado por un espacio, y seguido del signo igual.
Los valores de los atributos deben ir escritos entre comillas.
Æ Los atributos de una etiqueta sólo se incluyen en la etiqueta de apertura, no es necesario repetirlos en la etiqueta
de cierre.
Æ Una etiqueta puede tener diversos atributos que se escribirán uno a continuación de otro, en cualquier orden y
separados por un espacio entre ellos.
Æ HTML utiliza los comentarios igual que hacen los lenguajes de programación puros. Un comentario es un texto
escrito en el código HTML del documento, que no lo tiene en cuenta el navegador y que por lo tanto no es visible
para el usuario de la página Web.
Æ El aspecto final de una página Web va a depender del navegador y de la versión del mismo que se esté usando en
cada caso. Esto quiere decir que es imposible controlar el aspecto final exacto que tendrán nuestros documentos
HTML.

Editorial CEP 39
Manual Introducción al lenguaje HTML

Æ Todos los navegadores tienen un menú que permite ver o mostrar el código fuente de la página que se está
visitando en ese momento.
Æ La estructura mínima del código HTML divide el documento en tres partes definidas por un grupo de etiquetas.
Información sobre la versión HTML correspondiente al documento. <DOCTYPE>, encabezado o sección
declarativa. <HEAD> y cuerpo del documento. <BODY>.
Æ La primera línea de código de un documento HTML indica la versión de HTML 4 que se está utilizando en el
documento.
Æ Al comienzo de un documento se coloca la etiqueta <HTML> que indica al navegador que el archivo que está
visualizando es un documento que contiene código HTML.
Æ La primera parte de un documento HTML es la cabecera del documento, definida por las etiquetas <HEAD> y
</HEAD>
Æ La segunda parte de un documento HTML es el cuerpo del documento, definido por las etiquetas <BODY> y
</BODY>.
Æ Dentro de la cabecera del documento se incluyen una serie de etiquetas que aportan, de manera organizada,
información de diverso tipo sobre el documento.
Æ La etiqueta <BODY> tiene una serie de atributos que sirven para modificar el aspecto y ciertas características de
la apariencia general del documento cuando es visualizado por un navegador.
Æ Los colores en HTML son creados a partir de una combinación de los tres colores básicos del modelo de color RGB
(rojo, verde y azul), basado en la síntesis aditiva del color.
Æ El código HTML utiliza los valores RGB de los colores, pero expresados en notación hexadecimal.
Æ Cuando se indica un color como valor de un atributo determinado en el código HTML, se coloca delante el carácter
# (almohadilla).
Æ Las imágenes que se van a colocar como contenidos en un documento HTML deben pasar por un proceso de
optimización previa.
Æ Una imagen se puede colocar en un documento HTML de varias maneras: como fondo de la página, como fondo
de una estructura de tabla, sobre la página, en un contenedor especial como una capa, etc.
Æ Las imágenes deberán estar guardadas en cualquiera de los siguientes formatos de imagen compatibles con HTML:
JPEG/PPG: Indicado para fotografías, GIF: Indicado para gráficos con pocos colores y PNG-24/PNH-8: Similares a
JPEG y GIF.
Æ Cuando una imagen se coloca como fondo, por defecto lo hace en modo mosaico, es decir, se repite,
automáticamente a su tamaño real tantas veces como sea preciso para cubrir por completo el fondo del documento.
Æ A la hora de escribir el código HTML de una página web es recomendable seguir unas mínimas pautas que
facilitarán su revisión y comprobación futura.

40 Editorial CEP
Tema 2. Estructura básica de un documento HTML

Editorial CEP 41
Manual Introducción al lenguaje HTML

42 Editorial CEP
TEMA 3
Etiquetas principales
Estructura general de las etiquetas
Comportamiento del texto en HTML
Clasificación de las etiquetas según los contenidos que definen

OBJETIVOS:
Consolidar el conocimiento del funcionamiento de las etiquetas.
Conocer las peculiaridades del comportamiento del texto en HTML.
Establecer una clasificación general de las etiquetas.
Tema 3. Etiquetas principales

ESTRUCTURA GENERAL DE LAS ETIQUETAS

Una de los factores que hacen que trabajar con código HTML sea sencillo y asequible para cualquier persona, aunque
no tenga experiencia en programación, es la estructura simple y común que se aplica a todas las etiquetas.

En el tema anterior, se describió la sintaxis que se aplica a las etiquetas y que se basa en los siguientes puntos:

- Las etiquetas se comportan como marcas que definen dónde se coloca un contenido y que características y aspecto
van a tener ese contenido al mostrase en un navegador.

- La mayoría de las etiquetas, -delimitadoras o contenedores-, se colocan dos veces, una delante del contenido que
definen, y otra después del mismo.

- Hay algunas etiquetas, -abiertas o unarias-, que se colocan sólo una vez, en el punto que en que se produce la
acción que definen.

- Las etiquetas disponen de atributos que modifican el significado de las mismas.

- Los atributos pueden adquirir diferentes valores.

La escritura de las etiquetas es siempre la misma, y se basa en los siguientes criterios.

- Las etiquetas de apertura se escriben entre los signos mayor que y menor que, (< >).

- Las etiquetas de cierren se escriben entre los signos mayor que y menor que y con el signo barra a la derecha
delante de su nombre, (</>).

- Los atributos se escriben, a continuación del nombre de la etiqueta, separados por un espacio uno de otro.

- Los valores se escriben entre comillas, a continuación de su atributo, y separados por el signo igual, (=).

- En las etiquetas de cierre no se vuelven a escribir los atributos ni sus valores.

- El atributo color se escribe precedido del signo almohadilla, (#)

COMPORTAMIENTO DEL TEXTO EN HTML

La primera vez que se escribe texto, en un documento HTML, se notan algunas diferencias en su comportamiento al
visualizarlo en un navegador con respecto al aspecto que tienen en el editor de texto. Estas diferencias de comportamiento
sorprenden al usuario novel que está acostumbrado, por ejemplo, a que para pasar a la línea de texto siguiente sólo haya
que pulsar la tecla de retorno de carro y seguir escribiendo. Cuando se escribe texto en un documento HTML esto no ocurre
así, ya es necesario saber que para forzar saltos de línea, saltos de párrafo, espacios extras, etc., es necesario utilizar
etiquetas específicas para esas acciones.

Otro de los comportamientos que producen desconcierto, cuando se escribe código HTML por primera vez, es que los
contenidos no se pueden colocar en cualquier lugar de la página, como se está acostumbrado a hacer con los programas
de diseño y maquetación. En HTML, los contenidos sucesivos que se insertan en una página, se van colocando siempre
alineados a la derecha y en la parte superior de la misma. Para colocarlos en otra ubicación, hay que utilizar etiquetas que
funcionan a modo de cajas contenedoras, como en los programas de maquetación. Estas etiquetas son las que definen las
estructuras denominadas tablas, capas y contenedores y que permiten salvar las limitaciones del código básico HTML para
colocar los contenidos en cualquier lugar de la página.

Editorial CEP 45
Manual Introducción al lenguaje HTML

Saltos de línea, saltos de párrafo y espacios vacíos

Para indicar al explorador que debe finalizar una línea y pasar a la siguiente, es necesario colocar la etiqueta de nueva
línea de texto:

<BR>

Esta es una etiqueta unaria o abierta, y por lo tanto, no es necesario cerrarla. Las etiquetas <BR>, sin contenido a
continuación, se acumulan cuando se escriben varias seguidas, con lo que se pueden provocar varios saltos de línea
consecutivos vacíos.

Para indicar al explorador que debe finalizar el párrafo y comenzar uno nuevo, es necesario colocar la etiqueta de nuevo
párrafo de texto:

<P>

La etiqueta de párrafo puede funcionar como una etiqueta unaria o abierta, y tampoco es necesario cerrarla, aunque se
puede hacer para dar más coherencia a la estructura del código de la página. Esta etiqueta separa la siguiente línea de texto
en una distancia mayor que la etiqueta de anterior de salto de línea. Las etiquetas <P> no se acumulan, por lo que si se
escriben varias seguidas sólo se visualizará un único salto de párrafo. Para conseguir varios saltos de párrafo consecutivos,
que hay que colocar un espacio sin ruptura, mediante al notación &nbsp. Así el código para varios saltos de párrafo
acumulados, quedaría de la siguiente manera:

Los espacios añadidos mediante la barra espaciadora, no se acumulan al visualizar el documento con un navegador. Para
añadir más de un espacio de separación entre dos palabras, es necesario insertar la notación &nbsp tantas veces como espacios
se quieran sumar. Así, el código para escribir dos palabras separadas entre sí cuatro espacios, sería el siguiente:

Palabra 1 &nbsp &nbsp &nbsp &nbsp Palabra 2

Salto de párrafo y espacios vacíos con la etiqueta <P> y la notación &nbsp

46 Editorial CEP
Tema 3. Etiquetas principales

Alineación del texto

El texto se alinea por defecto a la izquierda. Para conseguir superar esta limitación hay que utilizar etiquetas como
<CENTER>, en desuso; <P>. o <DIV>. Una de las etiquetas clásicas de HTML es la etiqueta <CENTER>. Colocada al
principio de la página es capaza de centrar todos los contenidos que vayan a continuación, sean del tipo que sean. Es una
etiqueta que empieza a estar en desuso por la recomendación de utilizar las etiquetas <P> y <DIV> y las hojas de estilo
CSS.

También se puede alinear un párrafo con la etiqueta <P> y su atributo ALIGN, que puede tener los valores left, center,
right o justify, para alinear a la izquierda, en el centro, a la derecha o justificado.

El código para alinear, de las cuatro maneras mencionadas, mediante el uso de la etiqueta <P> sería el siguiente:

<P ALIGN="LEFT"> Texto alineado a la izquierda</P>

<P ALIGN="CENTER"> Texto centrado</P>

<P ALIGN="RIGHT"> Texto alineado a la derecha</P>

<P ALIGN="JUSTIFY"> Texto justificado</P>

Alineación, izquierda, centrada, derecha y justificada, con la etiqueta <P ALIGN>

Por último, se puede utilizar para alinear, la etiqueta <DIV> y su atributo ALIGN, que puede tener los mismos valores
que la etiqueta <P>, para alinear a la izquierda, en el centro, la derecha o justificado.

Editorial CEP 47
Manual Introducción al lenguaje HTML

El código para alinear, de las cuatro maneras mencionadas, mediante el uso de la etiqueta <DIV> sería el siguiente:

<DIV ALIGN="LEFT"> Texto alineado a la izquierda</P>

<DIV ALIGN="CENTER"> Texto centrado</P>

<DIV ALIGN="RIGHT"> Texto alineado a la derecha</P>

<DIV ALIGN="JUSTIFY"> Texto justificado</P>

CLASIFICACIÓN DE LAS ETIQUETAS SEGÚN LOS CONTENIDOS QUE DEFINEN

Una manera de ordenar las diferentes etiquetas más utilizadas en la creación de páginas con código HTML es
agrupándolas según el tipo de contenidos que van a definir. Para ello debemos establecer un listado de los contenidos
habituales en una página Web: aspecto general del documento, texto, imágenes, enlaces, tablas, marcos, formularios y
otros contenidos multimedia.

Etiquetas que definen el aspecto general del documento

El aspecto general del documento se define mediante la etiqueta <BODY>. Esta etiqueta delimita todo el contenido
visible de la página Web, todo aquello que van a ver los usuarios cuando naveguen por ella. Mediante los diversos atributos
de esta etiqueta se pueden aplicar cambios generales en el aspecto de todo el documento, como el color de fondo, la
imagen de fondo, el color por defecto del texto, la alineación del mismo, el color de los enlaces, márgenes del documento,
eventos generados al abrirse el documento, etc. Muchos de estos atributos se gestionan, en la actualidad, desde las hojas
de estilo CSS, lo que permite una mayor efectividad al asignar un aspecto determinado, y aplicar futuros cambios, a un grupo
de páginas que comparten atributos comunes.

Los principales atributos de la etiqueta <BODY> son los siguientes:

- TEXT: Color del texto.

- LINK: Color de los enlaces de texto y marco de las imágenes con enlace.

- ALINK: Color de los enlaces activos.

- VLINK: Color de los enlaces visitados.

- BGCOLOR: Color del fondo del documento.

- BACKGROUND: Imagen mosaico de fondo.

- TOPMARGIN: Margen superior del documento.

- LEFTMARGIN: Margen izquierdo del documento.

- BOTTOMMARGIN: Margen inferior del documento.

- RIGHTMARGIN: Margen derecho del documento.

- ONLOAD: Evento generado al abrirse el documento.

- ONUNLOAD: Evento generado al descargarse el documento.

48 Editorial CEP
Tema 3. Etiquetas principales

También se puede utilizar la etiqueta <BASEFONT> para establecer un tamaño, diferente al valor por defecto, para todo
el texto del documento. Más adelante se hablará del tamaño del texto en HTML. El tamaño base estándar por defecto en
el que se visualiza el texto de un documento es 3, en una escala de 1 a 7. Si no se especifica nada con la etiqueta
<BASEFONT> ni con cualquier otra etiqueta que modifique el tamaño del texto, este se mostrará a tamaño 3 en todo el
documento.

Color del fondo y color del texto

Etiquetas para organizar el texto

El texto es uno de los principales contenidos de las páginas Web y está presente, en mayor o menor medida, en todas
ellas. HTML ofrece, por tanto, numerosas etiquetas para organizarlo y dotarlo de estilo. Como en el caso anterior, la mayor
parte de los atributos que asignan estilo al texto se recomienda aplicarlos desde las hojas de estilo CSS por las ventajas
que ya hemos indicado. No obstante se recomienda utilizar algunas etiquetas, como las <H>, que asignan cabeceras y que
siguen siendo muy útiles para ayudar a posicionar bien las páginas en los buscadores principales, como Google.

"Las principales etiquetas y atributos para organizar el texto son las siguientes:

- <BR>: Salto de línea.

- <P ALIGN="LEFT/RIGHT/CENTER/JUSTIFY">: Salto de párrafo con alineación.

- <CENTER>: Texto centrado.

- <DIV ALIGN="LEFT/RIGHT/CENTER/JUSTIFY">: Texto con alineación.

- <B>: Texto en negrita.

- <I>: Texto en itálica.

- <U>: Texto subrayado.

Editorial CEP 49
Manual Introducción al lenguaje HTML

- <S>: Texto tachado.

- <SUB>: Subíndice.

- <SUP>: Superíndice.

- <BIG>: Texto mayor.

- <SMALL>: Texto menor.

- <FONT SIZE="valor">: Aplica un tamaño al texto.

- <FONT COLOR="#color">: Aplica un color al texto.

- <FONT FACE="tipo de letra">: Aplica un tipo de letra al texto.

- <H1>: Asigna aspecto de cabecera al texto. Tamaño mayor.

- <H2>…<H5>: Asigna aspecto de cabecera al texto. Tamaños intermedios.

- <H6>: Asigna aspecto de cabecera al texto. Tamaño más pequeño.

· ALIGN="LEFT/CENTER/RIGHT": Alineación izquierda, centrado y derecha.

- <HR>: Añade una barra horizontal separadora.

· SIZE="valor": Grosor en píxeles de la barra horizontal.

· WIDTH="valor/%": Anchura en píxeles o % de la barra horizontal.

· ALIGN="LEFT/CENTER/RIGHT": Alineación de la barra.

Las principales etiquetas para aplicar formato de lista al texto son las siguientes:

- <UL>: Comienzo de una lista ordenada.

· TYPE= "DISC/CIRCLE/SQUARE": Círculo relleno círculo vacío y cuadrado vacío.

- <OL>: Comienzo de una lista numerada.

· TYPE="A/a/I/i/1": Mayúsculas, minúsculas, romanos, romanos en minúsculas, árabes.

· START="nº": Número en el que comienza la lista numerada.

- <LI>: Cada una de las entradas de las listas.

- <DL>: Lista de definición.

- <DT>: Primer nivel, título.

- <DD>: Segundo nivel, definición.

50 Editorial CEP
Tema 3. Etiquetas principales

Estilos físicos y cabeceras con etiquetas <H>

Etiquetas para las imágenes y contenidos en movimiento

Las imágenes están cada vez más presentes en las páginas Web debido a que los anchos de banda contratados por
los usuarios y las empresas permiten una tasa de transferencia cada vez más elevada, y esto hace que las imágenes se
descargan con más rapidez.

Para el control de las imágenes, HTML dispone de la etiqueta <IMG>. Los atributos principales de esta etiqueta son los
siguientes:

- SRC="imagen": Inserta la imagen indicada.

- ALT="texto": Añade una etiqueta alternativa de texto a la imagen.

- ALIGN="TOP/MIDDLE/BOTTOM": Alineación de la imagen con respecto al texto.

- BORDER="valor": Añade un borde en píxeles a la imagen.

- HEIGHT="valor": Altura de la imagen en píxeles.

- WIDTH="valor": Anchura de la imagen en píxeles.

Editorial CEP 51
Manual Introducción al lenguaje HTML

Para hacer que un contenido se desplace recorriendo horizontalmente la pantalla se utiliza la etiqueta <MARQUEE>.
Esta etiqueta pone en movimiento cualquier contenido que se coloque a continuación, tanto si es un texto, una tabla o una
imagen. Los atributos principales de esta etiqueta son los siguientes:

- ALIGN="TOP/MIDDLE/BOTTOM": Alineación del letrero.

- BEHAVIOR= "SCROLL/SLIDE/ALTERNATE": Comportamiento del letrero en su desplazamiento.

- BGCOLOR="#color". Color del fondo del letrero.

- DIRECTION="LEFT/RIGHT": Dirección de desplazamiento del letrero.

- HEIGHT="valor/%": Altura del elemento en píxeles o %.

- LOOP="valor/infinite": Número de veces que se repite la visualización del letrero.

- WIDTH="valor/%": Anchura del elemento en píxeles o %.

Imagen colocada con la etiqueta <IMG>

Etiquetas para los enlaces

Los enlaces permiten pasar de un documento a otro haciendo un simple clic sobre él. Los enlaces pueden estar basados
en un texto, -enlace de hipertexto-, o en cualquier otro contenido multimedia, -enlace hipermedia-, y son la base de la
navegación por Internet. El enlace contiene una referencia al documento con el que va a enlazar, y lo muestra en pantalla
al hacer clic sobre el mismo. Cuando un texto o una imagen contienen un enlace, cambian su aspecto mediante un
subrayado en otro color, -en el caso del texto-, o un recuadro en otro color, -en el caso de la imagen-. Además el cursor
cambia de aspecto para indicar que se está sobre una zona activa.

Dependiendo de la relación entre el documento que contiene el enlace y el documento enlazado, se pueden establecer
tres tipos de enlaces:

52 Editorial CEP
Tema 3. Etiquetas principales

- Enlaces locales: Son aquellos que vinculan con un documento sin salir del sitio Web que contiene el enlace.

- Enlaces internos. Son los que permiten ir de una zona a otra del mismo documento.

- Enlaces externos: Son los que saltan de un documento a otro situado en un sitio Web diferente.

La etiqueta que asigna un enlace a un contenido es la etiqueta <A>. Los atributos principales de esta etiqueta son los
siguientes:

- HREF="documento": Enlace a un documento.

- NAME="nombre": Marca un punto en el propio documento para enlaces internos.

- TARGET="PARENT/TOP/SELF/BLANK": Indica el destino en que se mostrará el documento enlazado.

Etiqueta <A> y página enlazada y abierta con TARGET

Etiquetas para tablas

Las tablas son una estructura que originalmente se creó para ordenar datos numéricos. Casi todos los programas de
tratamiento de texto utilizan las tablas. En HTML, las tablas tienen un uso más amplio; no sólo pueden contener texto, si no
que pueden mostrar también imágenes, y lo más significativo, se pueden utilizar como estructura subyacente para la
ordenación y distribución de los contenidos. En realidad se comportan como una estructura para establecer el diseño de la
página.

Editorial CEP 53
Manual Introducción al lenguaje HTML

Las tablas están formadas por filas horizontales y columnas verticales, que al cruzarse definen las celdas. Para cada
uno de estos elementos, tabla, fila y celda, existe una etiqueta que lo define. Las etiquetas principales, que definen las tablas
y sus componentes, son las siguientes:

- <TABLE>: Añade una tabla nueva.

- <CAPTION>: Añade título a la tabla.

- <TH>: Añade una cabecera a la tabla.

- <TR>: Delimita una fila.

- <TD>: Delimita una celda.

Los atributos principales de las etiquetas para tablas son los siguientes:

- BORDER="valor": Añade un borde en píxeles a la tabla.

- CELLPACING="valor": Añade una separación en píxeles entre las celdas.

- CELLPADDING="valor". Añade un espacio reservado entre el borde de la celda y su contenido.

- WIDTH="valor/%": Ancho de la tabla o de la celda en píxeles o en %.

- BGCOLOR="#color": Color del fondo de la tabla, fila o celda.

- BACKGROUND="imagen": Imagen de fondo de la tabla, fila o celda.

- HEIGHT="valor". Altura de la celda en píxeles.

- COLSPAN="valor". Columnas ocupadas por la celda.

- ROWSPAN="valor": Filas ocupadas por la celda.

Etiqueta <TABLE> para una tabla de 2 x2

54 Editorial CEP
Tema 3. Etiquetas principales

Etiquetas para marcos

Los marcos, o frames, permiten dividir la ventana en que se muestra la página en varios documentos HTML
independientes. Ha sido una estructura muy utilizada por su sencillez y las ventajas de su uso, pero que actualmente está
un poco devaluada por los errores que se han cometido en su aplicación. No obstante, se siguen utilizando para aprovechar
las ventajas que tienen. Las etiquetas para el control de los marcos son las siguientes:

- <FRAMEST>: Define el número de marcos que compondrán la estructura, así como dónde se mostrarán. Conforma
la estructura general del documento.

· COLS="valor": Número de columnas en que se dividirá el conjunto de marcos.

· ROW="valor": Número de filas en que se dividirá el conjunto de marcos.

- <FRAME>: Define cada uno de los marcos que componen el conjunto de marcos.

Las etiquetas para formularios

Mediante los formularios se consigue obtener información de los usuarios de la página Web. La creación de formularios
tiene dos partes; por una el aspecto que van tener los campos de datos con el fin de hacer el formulario atractivo a los
usuarios de la página, y en segundo lugar la programación necesaria para enviar al servidor de alojamiento y procesar en
su caso los datos del formulario. Las etiquetas para la construcción de formularios son las siguientes.

- <FORM>: Abre una sección de formulario.

· METHOD="GET/POST": Forma de envío de los datos.

- <INPUT>: Define una entrada de datos.

· TEXT: Entrada de datos de texto.

· PASSWORD: Entrada de datos de texto codificados.

· HIDDEN: Campo de datos oculto.

· CHECKBOX: Casilla de selección.

· RADIO: Botones de selección.

· FILE: Permite enviar ficheros.

· RESET: Botón de limpieza de los campos del formulario.

· SUBMIT: Botón de envío de datos del formulario.

- <TEXTAREA>: Campo de datos de varias líneas.

- <SELECT>: Menú desplegable de datos seleccionables.

Etiquetas para contenidos multimedia

Cada vez es mayor la cantidad y variedad de contenido multimedia que se insertan en las páginas Web. Para que los
navegadores puedan visualizar algunos contenidos de este tipo, es necesario disponer de

Editorial CEP 55
Manual Introducción al lenguaje HTML

Plug-ins complementarios al navegador utilizado.

Las principales etiquetas para el control de elementos multimedia son las siguientes:

- <APPLET>: Permite introducir programas Java ejecutables por los navegadores.

- <PARAM>: Se emplea para definir parámetros que son usados por los applets y objetos insertados.

- <EMBED>: Indica dónde se encuentran los ficheros que se tienen que reproducir.

- <OBJECT>: Permite la inserción de objetos multimedia.

56 Editorial CEP
Tema 3. Etiquetas principales

LO QUE HEMOS APRENDIDO: tema 3

Æ Una de los factores que hacen que trabajar con código HTML sea sencillo y asequible para cualquier persona,
aunque no tenga experiencia en programación, es la estructura simple y común que se aplica a todas las etiquetas.
Æ Las etiquetas se comportan como marcas que definen dónde se coloca un contenido y que características y
aspecto van a tener ese contenido al mostrase en un navegador.
Æ Las etiquetas disponen de atributos que modifican el significado de las mismas.
Æ Los atributos pueden adquirir diferentes valores.
Æ Los atributos se escriben, a continuación del nombre de la etiqueta, separados por un espacio, uno de otro.
Æ Los valores se escriben entre comillas, a continuación de su atributo, y separados por el signo igual, (=).
Æ Cuando se escribe texto en un documento HTML es necesario saber que para forzar saltos de línea, saltos de
párrafo, espacios extras, etc., hay que utilizar etiquetas específicas para esas acciones.
Æ En HTML, los contenidos sucesivos que se insertan en una página, se van colocando siempre alineados a la
derecha y en la parte superior de la misma.
Æ Para colocarlos en otra ubicación, hay que utilizar etiquetas que funcionan a modo de cajas contenedoras, como
en los programas de maquetación.
Æ Para indicar al explorador que debe finalizar una línea y pasar a la siguiente, es necesario colocar la etiqueta de
nueva línea de texto: <BR>.
Æ Para indicar al explorador que debe finalizar el párrafo y comenzar uno nuevo, es necesario colocar la etiqueta de
nuevo párrafo de texto: <P>.
Æ Las etiquetas <P> no se acumulan, por lo que si se escriben varias seguidas sólo se visualizará un único salto de
párrafo.
Æ Para conseguir varios saltos de párrafo consecutivos, que hay que colocar un espacio sin ruptura, mediante al
notación &nbsp.
Æ Para añadir más de un espacio de separación entre dos palabras, es necesario insertar la notación &nbsp tantas
veces como espacios se quieran sumar.
Æ El texto se alinea por defecto a la izquierda. Para conseguir superar esta limitación hay que utilizar etiquetas como
<CENTER>, en desuso; <P>. o <DIV>.
Æ El aspecto general del documento se define mediante la etiqueta <BODY>.
Æ El texto es uno de los principales contenidos de las páginas Web y está presente, en mayor o menor medida, en
todas ellas. HTML ofrece, por tanto, numerosas etiquetas para organizarlo y dotarlo de estilo.
Æ Las imágenes están cada vez más presentes en las páginas Web debido a que los anchos de banda contratados
por los usuarios y las empresas permiten una tasa de transferencia cada vez más elevada, y esto hace que las
imágenes se descargan con más rapidez.
Æ Para el control de las imágenes, HTML dispone de la etiqueta <IMG>.
Æ Para hacer que un contenido se desplace, como si fuese un letrero, recorriendo horizontalmente la pantalla se
utiliza la etiqueta <MARQUEE>.

Editorial CEP 57
Manual Introducción al lenguaje HTML

Æ Los enlaces permiten pasar de un documento a otro haciendo un simple clic sobre él. Los enlaces pueden estar
basados en un texto, -enlace de hipertexto-, o en cualquier otro contenido multimedia, -enlace hipermedia-, y son
la base de la navegación por Internet.
Æ Dependiendo de la relación entre el documento que contiene el enlace y el documento enlazado, se pueden
establecer tres tipos de enlaces. Enlaces locales, son aquellos que vinculan con un documento sin salir del sitio
Web que contiene el enlace. Enlaces internos, son los que permiten ir de una zona a otra del mismo documento.
Enlaces externos, son los que saltan de un documento a otro situado en un sitio Web diferente.
Æ La etiqueta que asigna un enlace a un contenido es la etiqueta <A>.
Æ Las tablas están formadas por filas horizontales y columnas verticales, que al cruzarse definen las celdas. Para
cada uno de estos elementos, tabla, fila y celda, existe una etiqueta que lo define.
Æ Los marcos, o frames, permiten dividir la ventana en que se muestra la página en varios documentos HTML
independientes.
Æ Mediante los formularios se consigue obtener información de los usuarios de la página Web.
Æ Para que los navegadores puedan visualizar algunos contenidos de este tipo, es necesario disponer de plug-ins
complementarios al navegador utilizado.

58 Editorial CEP
Tema 3. Etiquetas principales

Editorial CEP 59
Manual Introducción al lenguaje HTML

60 Editorial CEP
TEMA 4
El control del texto
Introducir texto
Organizar el texto
Aplicar formato y estilo al texto

OBJETIVOS:
Aprender a trabajar el texto en los documentos HTML.
Profundizar en el conocimiento de las peculiaridades del comportamiento del texto en
HTML.
Aprender a estructurar y organizar el texto.
Aprender a dar formato y aplicar estilo al texto.
Conocer la estructura del código para crear listas.
Tema 4. El control de texto

INTRODUCIR TEXTO
El texto sigue siendo el principal contenido de las páginas Web en Internet; y lo sigue siendo por varios motivos, porque es
imprescindible para trasmitir, describir e informar, y en segundo lugar porque los programas que rastrean la Red, en busca de
páginas para indexarlas y hacer que aparezcan en los procesos de búsqueda, leen las páginas para conocer su temática, relevancia
e interés antes de ofrecerla como resultado de una búsqueda. Si un programa buscador de contenidos no encuentra texto HTML
en una página, no puede indexar esa página. Esto ocurre cuando una página está completamente realizada con tecnología Flash,
o cuando predominan en ella los desarrollos en Javascript no accesibles a los programas rastreadores de contenidos.

Se produce una paradoja, que consiste en que las páginas Web desarrolladas con tecnologías de última generación, es
decir, aquellas en las que predominan los efectos visuales, e interactivos muy potentes, necesitan en mayor medida del texto
en sus páginas para no resultar opacas a los buscadores.

El texto se puede introducir, en los documentos HTML, de varias maneras. La forma elegida va a depender de la entidad
de las páginas, de la cantidad de texto, de la función que cumpla este en la página y del método de trabajo seguido. El texto
se puede introducir de la siguiente manera:

- Escribiéndolo directamente sobre el documento abierto para escribir el código HTML de la página.

- Tratándolo en un programa de edición de texto y copiando y pegando al documento HTML.

Los textos cortos, como titulares, cabeceras, pies, enlaces, etc., es más práctico escribirlos directamente, mientras que
los bloques extensos de texto es mejor escribirlos en documentos independientes, guardarlos y después copiar y pegar para
trasladarlos al documento HTML.

Es importante tener en cuenta las siguientes cuestiones:

- El texto escrito en programas bitmap, y el texto contenido en imágenes o ilustraciones, se convierte en píxeles
cuando se exporta desde los programas con los que se han creado; por lo tanto es un texto no accesible a los
programas buscadores.

- Para que un texto se vea en la pantalla de un usuario que accede a una página Web, exactamente igual que como
se ve en la pantalla del diseñador, aquel tiene que tener instaladas en su ordenador las mismas tipografías que se
han utilizado al diseñar las páginas.

- Si accede a una página Web sin tener las mismas tipografías que se han empleado en su diseño, estas serán
sustituidas por tipografías del sistema operativo.

- Si se cambia la tipografía con la que se visualiza la página cambiará la maquetación del texto y el aspecto de la
página.

- Para evitar esa disfunción, se pueden tomar las siguientes decisiones:

· Convertir el texto en bitmap para que no dependa de tener instalada o no la tipografía en el ordenador de los
usuarios.

· Utilizar tipografías del sistema operativo, que van a estar instaladas en todos los ordenadores.

Esta última alternativa es la que hace que las páginas Web tengan un aspecto tipográfico muy similar. Hay que tener en
cuenta también que la resolución base de los monitores utilizados por los equipos que trabajan con Windows no es la misma
que las de los monitores que trabajan con MacOs de Apple. Los monitores de Apple se han basado siempre en una

Editorial CEP 63
Manual Introducción al lenguaje HTML

resolución de 72 ppp, mientras que los monitores de Windows lo han hecho en una resolución de 96 ppp. Con la tecnología
actual empleada en los monitores de pantalla plana, compatibles para ambos sistemas operativos, esa diferencia ha
desaparecido, pero conviene tener en cuenta que se podría dar el caso de que la tipografía se mostrase a un tamaño menor
o mayor, dependiendo de la resolución de la pantalla desde la que se visualice la página.

Una manera de comprobar si el texto de una página Web es texto HTML o bitmap, consiste en intentar seleccionarlo
directamente arrastrando el ratón sobre él; si se puede copiar el texto, se trata de texto HTML.

Texto HTML escrito y texto como imagen bitmap insertado con la etiqueta <IMG>

ORGANIZAR EL TEXTO
Una vez que se escribe o se pega texto en un documento HTML, se muestra en una línea única del tamaño de la ventana
del navegador, desde del primer carácter al último del texto, formando un único párrafo. Esto se debe a que HTML no
reconoce los saltos de línea o de párrafo que introducen los editores de texto al pulsar la tecla retorno de carro.

Para organizar el texto en líneas o en párrafos en su caso, hay que colocar, en el punto en que se quiere provocar un
salto de línea, un marcador que los navegadores interpreten correctamente. Estos marcadores son las etiquetas <BR> (salto
de línea) y <P> (salto de párrafo). La etiqueta <BR> es una etiqueta abierta que no necesita cierre, mientras que la etiqueta
<P> es una etiqueta contenedora que conviene cerrar con </P> al finalizar el párrafo. No obstante, aunque no se cierre el
párrafo, el navegador interpreta que al encontrar una nueva etiqueta <P> debe finalizar el párrafo anterior.

Otra manera de organizar el texto en columnas de ancho determinado, y que se verá en tema 7, consiste en utilizar
tablas de ancho fijo, y ajustar el ancho de las columnas al ancho requerido para las líneas de texto.

64 Editorial CEP
Tema 4. El control de texto

Salto de línea con etiqueta <BR>

Saltos de línea, saltos de párrafo y espacios vacíos

Cuando un navegador se encuentra una etiqueta <BR> finaliza la línea de texto en ese punto y continua con el texto en
la siguiente línea. Si se encuentra dos o más etiquetas <BR> consecutivas, el navegador las tiene en cuenta y deja tantas
líneas libres como etiquetas se encuentre.

En cambio, cuando el navegador se encuentra varias etiquetas <P> consecutivas las resume todas en una y sólo deja
una línea vacía. Para que los saltos de párrafo se sumen hay que incluir la entidad especial &nbsp para que las etiquetas
<P> no delimiten espacios vacíos, y se acumulen. El espacio de separación entre líneas producido con la etiqueta <P> es
mayor que el que produce la etiqueta <BR>.

Los navegadores tampoco reconocen más de un espacio consecutivo de barra espaciadora entre palabras; igual que el
caso anterior, para que los espacios de separación se acumulen hay que añadir la entidad &nbsp tantas veces como
espacios se quieran sumar.

Salto de párrafo con etiqueta <P>

Editorial CEP 65
Manual Introducción al lenguaje HTML

Alineación del texto

Ya sabemos que la alineación de los párrafos de texto es por defecto izquierda. Utilizando el atributo ALIGN de la
etiqueta <P> se puede modificar la alineación de los párrafos. Los valores posibles para ALIGN son left, para alineación a
la izquierda, que además es el valor por defecto; center, para colocar el párrafo centrado en la ventana; right, para alineación
a la derecha y por último justify, para justificar a derecha e izquierda el texto.

La etiqueta <CENTER> ha ido quedando en desuso frente a la recomendación de utilizar la etiqueta <DIV>, y más
recientemente las hojas de estilo CSS.

Centrar texto con etiquetas <CENTER>, <P> y <DIV>

Encabezamientos

También denominados encabezados o cabeceras de texto son un recurso existente desde las primeras versiones de
HTML y que permite distinguir los títulos de distinto nivel cuando se crean secciones en el texto. La etiqueta que se utiliza
para esta función es la etiqueta <H>. En realidad forman un grupo de 6 etiquetas que van aumentando el tamaño del texto
desde el nivel aplicado por la etiqueta <H6>, que es el más pequeño, hasta el nivel asignado por la etiqueta <H1>, que es
el mayor. Las etiquetas <H> tienen las siguientes características:

- Aplican estilo negrita o bold al texto.

- Provocan un salto de línea al final, con lo que no es necesario añadir etiquetas <BR>.

- Pueden asignar alineaciones mediante el atributo ALIGN y sus valores left, center y right.

Texto destacado con etiquetas <H1>, <H2>…<H6>

66 Editorial CEP
Tema 4. El control de texto

Elementos separadores

A veces es necesario incluir una línea o barra horizontal para separar bloques de contenido. Esta línea se puede insertar
como una imagen, es decir creándola previamente con un programa gráfico o mediante la etiqueta unaria <HR>. Esta
etiqueta inserta una barra horizontal sombreada que se puede configurar mediante los siguientes atributos:

- SIZE="valor": Aplica un grosor en píxeles.

- WIDTH="valor/%": Indica el ancho que va a tener la barra. Puede ser en píxeles o en % del ancho de la pantalla
del navegador.

- ALIGN="left/center/right": Asigna una alineación cuando la barra no ocupa todo el ancho de la pantalla.

- COLOR="#color": Aplica el color elegido a la barra.

- NOSHADE: Elimina el efecto sombreado.

En caso de no especificar un ancho para la barra, esta se extenderá a toda la pantalla del navegador.

Barras separadoras <HR> con distintos atributos

Organizar el texto mediante listas

Estructurar ciertos contenidos en modo lista es algo utilizado habitualmente por los programas de edición de texto. Es
un recurso muy utilizado porque refuerza visualmente la comprensión de clasificaciones complejas de atributos. Una lista
organiza el texto mediante líneas independientes señaladas en su comienzo por una marca determinada. Dependiendo de
la clase de marca las listas pueden ser de los siguientes tipos:

- Listas ordenadas.

- Listas numeradas.

- Listas de definición.

- Listas de varios niveles o listas subordinadas.

Editorial CEP 67
Manual Introducción al lenguaje HTML

Listas ordenadas

En las listas ordenadas cada entrada está marcada por un punto o bullet. La etiqueta que define este tipo de lista es la
etiqueta <UL>; es una etiqueta contenedora y por tanto hay que cerrarla con </UL> al finalizar la lista. Para definir cada
entrada de la lista ordenada se utiliza la etiqueta <LI>. Las entradas de la lista pueden ir marcadas con diferentes tipos de
bullets, que se definen mediante el atributo TYPE y los siguientes valores:

- DISC: Marca la entrada con un círculo relleno.

- CIRCLE: Marca la entrada con un círculo hueco.

- SQUARE: Marca la entrada con un cuadrado.

Si el atributo se aplica a la etiqueta <UL>, todas las entradas de la lista se definirán con el mismo marcador. Si se aplica
a una etiqueta <LI>, esa entrada y todas las siguientes se definirán con ese marcador.

Lista ordenada con las etiquetas <UL> y <LI>

Listas numeradas

Las listas numeradas son similares a las ordenadas, con la diferencia de que cada entrada se marca con un valor que
va aumentando por cada entrada. El valor utilizado puede ser un número o una letra, y se define por el atributo TYPE, igual
que en las listas ordenadas.

La etiqueta que define una lista numerada es la etiqueta <OL>. Una lista numerada también hay que cerrarla, al terminar,
con la etiqueta </OL>. Las diferentes entradas de una lista numerada se definen con la misma etiqueta <LI> utilizada para
las listas ordenadas.

Las entradas se pueden marcar con los siguientes caracteres definidos por los valores que se pueden asignar al atributo
TYPE:

- A: Marca la lista con una letra en mayúsculas, A, B, C, D…

- a: Marca la lista con una letra en minúsculas, a, b, c, d…

68 Editorial CEP
Tema 4. El control de texto

- I: Marca la lista con números romanos en mayúsculas, I, II, III, IV…

- I: Marca la lista con números romanos en minúsculas, i, ii, iii, iv…

- 1: Marca la lista con números árabes, 1, 2, 3, 4…

Si el atributo se aplica a la etiqueta <OL>, todas las entradas de la lista se definirán con el mismo marcador. Si se aplica
a una etiqueta <LI>, esa entrada y todas las siguientes se definirán con ese marcador.

Se puede modificar el número de orden con el que se marcará una entrada, utilizando el atributo START para la etiqueta
<OL> ó el atributo VALUE para la etiqueta <IL>. Si se define una lista con el siguiente código: <OL TYPE="A" START="5">,
la lista comenzará con la numeración E.

Lista ordenada con las etiquetas <OL> y <LI>

Listas de definición

Las listas de definición son listas con entradas a dos niveles, el primer nivel define un término y el segundo nivel incluye
la definición del término anterior. Tienen la estructura habitual de un diccionario, término y definición.

Las etiquetas que se utilizan para crear este tipo de listas son las siguientes:

- <DL>: Define el comienzo de una lista de definición.

- <DT>: Define el primer nivel, el término.

- <DD>: Define el segundo nivel, la definición del término.

Las tres etiquetas deben cerrarse con las correspondientes etiquetas </DL>, </DT> y </DD>.

Editorial CEP 69
Manual Introducción al lenguaje HTML

Lista definición con las etiquetas <DL>, <DT> y <DD>

Otros tipos de listas

Hay otros tipos de listas, las listas de menú y las listas de directorio. Estos dos tipos de listas no son interpretadas bien
por todos los navegadores, por lo que se usan de manera limitada.

Las listas de menú son similares a las listas ordenadas con la diferencia de que muestran las entradas de forma más
compacta. Se definen con las etiquetas siguientes:

- <MENU>: Define el comienzo de una lista de menú.

- <LI>. Define cada una de las entradas.

Las listas de directorio permiten distribuir las entradas tanto vertical como horizontalmente mediante tabuladores. Se
definen con las etiquetas siguientes:

- <DIR>: Define el comienzo de una lista de directorio.

- <LI>: Define cada una de las entradas.

Listas anidadas

A veces es conveniente estructurar los contenidos mediante listas combinadas, en las que aparece un tipo de lista
diferente subordinada a otra de nivel superior. Se trata de listas anidadas que se definen combinando las etiquetas de ambos
tipos de listas. El aspecto final es como el de un índice de materias.

70 Editorial CEP
Tema 4. El control de texto

Lista anidadas con las etiquetas <UL> y <OL>

APLICAR FORMATO Y ESTILO AL TEXTO

Una vez que se ha estructurado el texto, el siguiente paso es aplicarle formato y estilo. Las recomendaciones actuales
sugieren separar, los contenidos y su estructura y organización, de su aspecto y estilo visual, con el fin de que una misma
estructura de contenido se pueda mostrar visualmente de diferente manera. Este planteamiento implica especializar las
etiquetas en dos grupos, aquellas que organizan los contenidos y aquellas que modifican el aspecto de estos contenidos.
Esta segunda función se reserva actualmente a las hojas de estilo CSS. A las hojas de estilo se le dedicará el tema 10 de
este manual.

Aunque el uso de las hojas de estilo CSS se va imponiendo, todavía es necesario utilizar en muchos casos los
mecanismos de aplicación de estilo a los contenidos, sobre todo al texto como contenido principal de los documentos Web.
Las etiquetas que existen para aplicar estilo al texto, se pueden dividir en dos grupos, estilos físicos y estilos lógicos.

Estilos físicos

Los estilos físicos aplican un cambio al texto independientemente de la función que cumpla el texto afectado. El cambio
aplicado será el mismo para cualquier tipo de texto y cumpla la función que cumpla en el contexto.

Los estilos físicos son la forma habitual de aplicar cambios en el aspecto del texto. Los utilizan todos los programas de
edición de texto, diseño y maquetación. Una característica de los estilos físicos es su gran compatibilidad con todos los
navegadores y versiones de los mismos. Las principales etiquetas que aplican estilos físicos son las siguientes:

- <B>: Destaca el texto en negrita.

- <I>: Destaca el texto en cursiva.

Editorial CEP 71
Manual Introducción al lenguaje HTML

- <S>: Destaca el texto tachándolo.

- <TT>: Aplica un tipo de letra no proporcional.

- <U>: Destaca el texto subrayándolo.

- <SUB>: Convierte, el texto marcado, en subíndice.

- <SUP>: Convierte, el texto marcado, en superíndice.

- <BIG>: Aumenta el tamaño del texto marcado.

- <SMALL>: Disminuye el tamaño del texto marcado.

Las etiquetas que aplican estilos físicos al texto, se deben cerrar para marcar el final del estilo aplicado, mediante las
etiquetas de cierre </B>, </I>, </S>, </TT>, </U>, </SUB>, </SUP>, </BIG> y </SMALL>.

Etiquetas de estilos físicos

Estilos lógicos

Los estilos lógicos aplican cambios en el texto que, a diferencia de los estilos físicos, varía dependiendo de la función
que el texto marcado cumpla en el contexto. Las principales etiquetas que aplican estilos lógicos son las siguientes:

- <ADDRESS>: Aplica cursiva a las firmas de documentos.

- <BLOCKQUOTE>: Delimita un bloque de texto como si fuese una anotación o cita.

- <CITE>: Aplica cursiva a las notas.

- <CODE>: Aplica un tipo de letra fijo y tamaño reducido a códigos.

- <DFN>: Aplica cursiva a las definiciones.

72 Editorial CEP
Tema 4. El control de texto

- <EM>: Aplica negrita a textos enfatizados.

- <KBD>: Aplica negrita a atajos de teclado.

- <SAM>: Aplica un tipo de letra fijo y tamaño reducido a ejemplos.

- <STRIKE>: Muestra el texto como tachado.

- <STRONG>: Muestra el texto resaltado en negrita.

- <VAR>: Aplica un tipo de letra fijo y tamaño reducido a variables.

Las etiquetas que aplican estilos físicos al texto, se deben cerrar para marcar el final del estilo aplicado, mediante las
etiquetas de cierre </ADDRESS>, </BLOCKQUOTE>, </CITE>, </CODE>, </DFN>, </EM>, </KBD>, </SAM> y </STRIKE>,
</STRONG> y </VAR>.

Etiquetas de estilos lógicos

Texto preformateado

Cuando se quiere mostrar, en la página publicada, el texto escrito en el código tal cual se ha escrito se puede utilizar la
etiqueta <PRE>. Mediante esta etiqueta el texto se muestra según se ha escrito, con una fuente de ancho fijo; además, los
navegadores interpretan los espacios extras de barra espaciadora, los tabuladores y los saltos de línea, sin necesidad de
incluir notaciones especiales. Esta etiqueta tiene que cerrarse al final del texto marcado, mediante la etiqueta de cierre
</PRE>. Después del cierre de esta etiqueta se añade automáticamente un salto de línea.

La etiqueta <PRE> tiene dispone del atributo WIDTH que fija al ancho de las líneas de texto afectadas por la etiqueta,
aunque no todos los navegadores la interpretan correctamente.

Editorial CEP 73
Manual Introducción al lenguaje HTML

Texto pre formateado con la etiqueta <PRE>

El uso de la etiqueta <FONT>

Algunos de las variables tipográficas más utilizadas para diferenciar un texto de otro son el tipo de letra, el tamaño y el
color. Para modificar estas tres características básicas de los textos se utiliza la etiqueta <FONT>. Esta etiqueta necesita
de la correspondiente etiqueta de cierre </FONT>, y los atributos que regulan esas tres variables son los siguientes:

- FACE="familia tipográfica": Aplica un tipo de letra.

- SIZE="valor": Asigna un tamaño de letra. El tamaño puede estar entre 1 y 7. Siendo 3 el valor por defecto y 7 el
más grande.

- COLOR="#color": Muestra el texto en el color indicado.

Mediante el atributo FACE se pude definir dos o más familias tipográficas, simplemente escribiéndolas seguidas y
separadas por comas. Si en la instalación de un usuario determinado no se encuentra instalada la primera familia tipográfica,
el navegador irá a buscar la segunda familia tipográfica indicada y así sucesivamente. Esto es muy útil para indicar
diferentes familias tipográficas instaladas por defecto por diferentes sistemas operativos.

Esta etiqueta es muy utilizada por su alta compatibilidad, aunque está siendo sustituida por las hojas de estilo CSS.

74 Editorial CEP
Tema 4. El control de texto

Etiqueta <FONT>para definir un tamaño y un color de letra

Secuencias de escape

Cuando se necesita escribir como parte del texto un determinado carácter especial empleado por el código HTML, el
navegador puede interpretar este carácter como parte del código de la página. Para evitar esto y poder escribir dichos
caracteres especiales como parte del texto, se utilizan las denominadas secuencias de escape. Una secuencia de escape
es una sucesión de caracteres que representa a su vez a un carácter Todas las secuencias de escape empiezan por el
carácter (&) y finalizan con el carácter (;).

Los caracteres (<), (>) y (&) tienen un uso especial y reservado para el código HTML y para escribirlos como texto se
deben utilizar las siguientes secuencias:

- Para representar el carácter <: <

- Para representar el carácter >: >

- Para representar el carácter &: &

Existen muchas más secuencias de escape para representar otros caracteres menos frecuentes.

Editorial CEP 75
Manual Introducción al lenguaje HTML

Secuencias de escape para los caracteres <, > y &

76 Editorial CEP
Tema 4. El control de texto

LO QUE HEMOS APRENDIDO: tema 4

Æ El texto sigue siendo el principal contenido de las páginas en Internet.
Æ El texto se puede introducir, en los documentos HTML, de varias maneras: escribiéndolo directamente sobre el
documento abierto para escribir el código HTML de la página, ó Tratándolo en un programa de edición de texto y
copiando y pegando al documento HTML.
Æ Se produce una paradoja, que consiste en que las páginas Web desarrolladas con tecnologías de última
generación, es decir, aquellas en las que predominan los efectos visuales, e interactivos muy potentes, necesitan
en mayor medida del texto en sus páginas para no resultar opacas a los buscadores.
Æ El texto escrito en programas bitmap, y el texto contenido en imágenes o ilustraciones, se convierte en píxeles
cuando se exporta desde los programas con se han creado; por lo tanto es un texto no accesible a los programas
buscadores.
Æ Para que un texto se vea en la pantalla de un usuario que accede a una página Web, exactamente igual que como
se ve en la pantalla del diseñador, aquel tiene que tener instaladas en su ordenador las mismas tipografías que se
han utilizado al diseñar las páginas.
Æ Si accede a una página Web sin tener las mismas tipografías que se han empleado en su diseño, estas serán
sustituidas por tipografías del sistema operativo.
Æ Si se cambia la tipografía con la que se visualiza la página cambiará la maquetación del texto y el aspecto de la
página.
Æ Una vez que se escribe o se pega texto en un documento HTML, se muestra en una línea única, del tamaño de la
ventana del navegador, desde del primer carácter al último del texto, formando un único párrafo.
Æ Para organizar el texto en líneas o en párrafos en su caso, hay que colocar, en el punto en que se quiere provocar
un salto de línea, un marcador que los navegadores interpreten correctamente. Estos marcadores son las etiquetas
<BR> (salto de línea) y <P> (salto de párrafo).
Æ Cuando un navegador se encuentra una etiqueta <BR> finaliza la línea de texto en ese punto y continua con el texto
en la siguiente línea. Si se encuentra dos o más etiquetas <BR> consecutivas, el navegador las tiene en cuenta y
deja tantas líneas libres como etiquetas se encuentre.
Æ En cambio, cuando el navegador se encuentra varias etiquetas <P> consecutivas las resume todas en una y sólo
deja una línea vacía. Para que los saltos de párrafo se sumen hay que incluir la entidad especial &nbsp para que
las etiquetas <P> no delimiten espacios vacíos, y se acumulen.
Æ Utilizando el atributo ALIGN de la etiqueta <P> se puede modificar la alineación de los párrafos. Los valores
posibles para ALIGN son left para alineación a la izquierda, que además es el valor por defecto; center para colocar
el párrafo centrado en la ventana; right para alineación a la derecha y por último justify para justificar a derecha e
izquierda el texto.
Æ Los encabezamientos, también denominados encabezados o cabeceras de texto son un recurso existente desde
las primeras versiones de HTML y que permite distinguir los títulos de distinto nivel cuando se crean secciones en
el texto. Se aplican con la etiqueta <H>.
Æ A veces es necesario incluir una línea o barra horizontal para separar bloques de contenido. Esta línea se puede
insertar como una imagen, es decir creándola previamente con un programa gráfico o mediante la etiqueta unaria
<HR>.

Editorial CEP 77
Manual Introducción al lenguaje HTML

Æ Una lista organiza el texto mediante líneas independientes señaladas en su comienzo por una marca determinada.
Dependiendo del tipo de marca las listas pueden ser de los siguientes tipos: listas ordenadas, listas numeradas,
listas de definición, listas de varios niveles o listas subordinadas.
Æ En las listas numeradas cada entrada está marcada por un punto o bullet. La etiqueta que define este tipo de lista
es la etiqueta <UL>.
Æ Las listas numeradas son similares a las ordenadas, con la diferencia de que cada entrada se marca con un valor
que va aumentando. La etiqueta que define este tipo de lista es la etiqueta <OL>.
Æ Las listas de definición son listas con entradas a dos niveles, el primer nivel define un término y el segundo nivel
incluye la definición del término anterior. La etiqueta que define este tipo de lista es la etiqueta <DL>, <DT> y <DD>.
Æ A veces es conveniente estructurar los contenidos mediante listas combinadas, en las que aparece un tipo de lista
diferente subordinada a otra de nivel superior. Se trata de listas anidadas que se definen combinando las etiquetas
de ambos tipos de listas.
Æ Una vez que se ha estructurado el texto, el siguiente paso es aplicarle formato y estilo. Las recomendaciones
actuales sugieren separar, los contenidos y su estructura y organización, de su aspecto y estilo visual, con el fin de
que una misma estructura de contenido se pueda mostrar visualmente de diferente manera.
Æ Los estilos físicos aplican un cambio al texto, independientemente de la función que cumpla el texto afectado. El
cambio aplicado será el mismo para cualquier tipo de texto y cumpla la función que cumpla en el contexto.
Æ Las etiquetas que aplican estilos físicos al texto son: <B>, <I>, <S>, <TT>, <U>, <SUB>, <SUP>, <BIG> y
<SMALL>.
Æ Los estilos lógicos aplican cambios en el texto que, a diferencia de los estilos lógicos, varían dependiendo de la
función que el texto marcado cumpla en el contexto.
Æ Las principales etiquetas que aplican estilos físicos son las siguientes: <ADDRESS>, <BLOCKQUOTE>, <CITE>,
<CODE>, <DFN>, <EM>, <KBD>, <SAM> y <STRIKE>, <STRONG> y <VAR>.
Æ Cuando se quiere mostrar, en la página publicada, el texto escrito en el código tal cual se ha escrito se puede utilizar
la etiqueta <PRE>.
Æ Algunos de las variables tipográficas más utilizadas para diferenciar un texto de otro son el tipo de letra, el tamaño
y el color. Para modificar estas tres características básicas de los textos se utiliza la etiqueta <FONT>.
Æ Una secuencia de escape es una sucesión de caracteres que representa a su vez a un carácter utilizado en el
código, y que permite que forme parte del texto. Todas las secuencias de escape empiezan por el carácter (&) y
finalizan con el carácter (;).

78 Editorial CEP
Tema 4. El control de texto

Editorial CEP 79
Manual Introducción al lenguaje HTML

80 Editorial CEP
TEMA 5
El control de las imágenes
Los formatos gráficos en HTML
Insertar imágenes en las páginas
Los mapas de imagen

OBJETIVOS:
Conocer los diferentes formatos gráficos compatibles con HTML.
Aprender a insertar imágenes en las páginas Web.
Aprender a modificar las imágenes colocadas.
Aprender a crear mapas de imagen.
Tema 5. El control de las imágenes

LOS FORMATOS GRÁFICOS EN HTML

Las imágenes, bien sean fotografías o bien sean ilustraciones o dibujos, son un recurso muy potente a la hora de aportar
valor a las páginas Web. Las imágenes son un contenido habitual, pero no cualquier imagen vale para colocarla en una
página. El primer requisito que debe cumplir una imagen es que esté guardada en un formato de archivo gráfico compatible
con HTML. El segundo requisito que debe cumplir es que pese lo imprescindible para mostrar una buena calidad de
visualización sin ralentizar la descarga de la página. Este proceso de adecuación de las imágenes, antes de colocarlas en
una página Web, se denomina proceso de optimización de imágenes, y se realiza con programas de tratamiento de
imágenes, como Adobe Photoshop, o mejor aún, Adobe Fireworks que está especializado en esta tarea. Una imagen
sometida a un proceso de optimización pasa por las siguientes fases:

- Adecuación de la resolución adecuada para el soporte de salida, 96 ppp.

- Ajuste de las dimensiones en píxeles para el tamaño al que se va a visualizar.

- Elección del formato de archivo más adecuado al tipo de original.

- Ajuste de los valores de compresión, disminución de calidad y reducción de la paleta de color adecuados.

El objetivo final del proceso de optimización de una imagen consiste en obtener la mejor relación entre la calidad final
de la imagen y su peso en kb. Para ello hay que tener en cuenta varias consideraciones:

- La carga gráfica total de una página se obtiene con la suma de los pesos en kb de todas las imágenes colocadas
en la misma.

- La calidad final de una imagen es un proceso subjetivo, pues depende de la función que cumpla la imagen, del
tamaño en píxeles al que haya colocado y del lugar que ocupe en la página, y por tanto de la relevancia que se le
asigne.

Formatos de imagen compatibles con HTML

Existen numerosos formatos de archivo de imágenes, pero no todos ellos son compatibles con el lenguaje HTML. De
todos los formatos posibles, sólo tres son validos para colocarlos en un documento HTML y que los interpreten
correctamente los navegadores. Estos formatos son JPEG, GIF y PNG. Cada uno de estos formatos tiene unas ventajas e
inconvenientes que les hace más apropiados para un tipo de original que para otro.

Formato JPEG

Las siglas JPEG significan Join Photographic Experts Group. Es un formato que actúa reduciendo el peso final en kb de
la imagen a base de bajar su calidad, es por tanto un formato que comprime con pérdida de calidad. La cuestión es que la
pérdida de calidad aplicada es asumible para la calidad máxima con la que se va a ver la imagen comprimida en la pantalla
de un ordenador. Las principales características de este formato de archivo de imagen son las siguientes:

- Trabaja con imágenes de 24 bits de profundidad de color por pixel.

- Necesita imágenes en modo de color RGB.

- Guarda las imágenes con una paleta de color de 16,7 millones de colores.

- Comprime la imagen con algoritmos que implican pérdida de calidad por eliminación de información.

- Utiliza el formato, propio, JPEG para comprimir.

Editorial CEP 83
Manual Introducción al lenguaje HTML

- La pérdida de calidad, correspondiente al nivel de compresión aplicado, se puede regular.

- La escala habitual de calidad va de 100%, mínima compresión, a 0%, máxima compresión.

- No soporta transparencia en zonas de la imagen.

- Admite descarga progresiva de la imagen colocada en la página; indicada para imágenes grandes.

- Está especialmente indicado para originales fotográficos y gráficos con muchos colores.

- Tiene una compatibilidad máxima con navegadores y editores Web.

- Se identifica con la extensión .jpeg o .jpg.

Imagen JPEG

Formato GIF

Las siglas GIF significan Graphics Interchange Format. A diferencia de JPEG, este formato actúa reduciendo el peso final
en kb de la imagen a base de eliminar colores no necesarios para representarla. Comprime, por tanto, sin pérdida de calidad,
y reduciendo la paleta de color necesaria para reproducir correctamente la imagen original. Las principales características
de este formato de archivo de imagen son las siguientes:

- Trabaja con imágenes de 8 bits de profundidad de color por pixel.

- Necesita imágenes en modo de color Indexado.

- Guarda las imágenes con una paleta de color máxima de 256 colores.

- Comprime la imagen con algoritmos que implican reducción de la paleta color.

- Utiliza el formato de compresión LZW.

- La reducción de la paleta de color, se puede regular.

- La paleta de color final puede mostrar entre 2 y 256 colores.

- Soporta transparencia en zonas de la imagen.

- Está especialmente indicado para originales corporativos como logos marcas, pictogramas, etc., con pocos colores.

- Admite secuencias de imágenes fijas para mostrarlas en modo animado, GIF Animado.

- Tiene una compatibilidad máxima con navegadores y editores Web.

- Se identifica con la extensión .gif.

84 Editorial CEP
Tema 5. El control de las imágenes

Imagen GIF

Formato PNG

Sus siglas significan Portable Network Graphics. Es un formato de creación más reciente que GIF y JPEG, que obtiene
mayores niveles de compresión y calidad final, pero que es menos compatible que JPEG y GIF. En realidad son dos
formatos, PNG-24 bits y PNG-8 bits; y cada uno de ellos se desarrolló como alternativa a JPEG, el primero y a GIF, el
segundo.

PNG utiliza el sistema de compresión ZIP. Las características de cada formato son similares a sus equivalentes. PNG-
24 bits es similar a JPEG, mientras que PNG-8 bits es similar a GIF. Es un formato de uso cada vez más extendido, y supone
una buena alternativa cuando lo que prima es la mayor calidad frente al déficit de compatibilidad. Estos formatos se
identifican con la extensión .png.

Imagen PNG

INSERTAR IMÁGENES EN LAS PÁGINAS

Para colocar imágenes en los documentos HTML hay que utilizar la etiqueta <IMG>, es una etiqueta que no hay que
cerrar. La etiqueta se escribe en el lugar de la página en el que se quiera insertar la imagen. Cada etiqueta gestiona sólo
una imagen, que ya deberá estar optimizada previamente. Las imágenes son contenidos opacos a los programas
buscadores, para compensar esto y como deferencia hacia los usuarios y hacer la página más usable, se suele añadir a la
imagen un texto, a modo de cartel, que se despliega al detener el cursor sobre la imagen. Este cartel añade información y
se activa mediante el atributo ALT de la propia etiqueta <IMG>. Los atributos de la etiqueta <IMG>, y que nos permiten
modificar sus características son las siguientes:

- ALIGN=“top/middle/bottom”. Establece la alineación en vertical de la imagen con respecto a la línea de texto en que
se encuentra.

· Top: Alinea el texto con la parte superior de la imagen.

· Middle: Alinea el texto con la parte central de la imagen.

· Bottom: Alinea el texto con la parte inferior de la imagen.

Editorial CEP 85
Manual Introducción al lenguaje HTML

- ALIGN=“left/right”: Establece la alineación en horizontal de la imagen con respecto a la página.

· Left: Sitúa la imagen por debajo del texto en el margen izquierdo.

· Right: Sitúa la imagen por debajo del texto en el margen derecho.

- ALT=“texto”: Texto alternativo que se muestra al detener el cursor sobre la imagen.

- BORDER=“valor”: Grosor, en píxeles, del borde de la imagen.

- HEIGHT=“valor”: Altura, en píxeles, de la imagen.

- HSPACE=“valor”: Espacio horizontal en píxeles de separación de la imagen al texto colocado antes y después de
la misma.

- SRC=“Url”: Indica la ruta o dirección de almacenamiento de la imagen.

- VSPACE=“valor”: Espacio vertical de separación de la imagen al texto colocado antes y después de la misma.

- WIDTH=“valor”: Anchura en píxeles de la imagen.

La etiqueta <IMG> se puede colocar en cualquier lugar de la página. Una imagen se puede insertar en una celda de una
tabla o en un contenedor flotante como una capa; para ello hay que insertar la etiqueta <IMG> entre las etiquetas que
definen la celda o la capa.

La etiqueta <IMG> siempre tendrá el atributo SRC que indica el nombre de la imagen con su extensión, y la ruta para
encontrarla. Cuando un navegador no localiza una imagen muestra en pantalla un icono genérico de imagen no encontrada.

Insertar imagen con la etiqueta <IMG> y sus atributos

86 Editorial CEP
Tema 5. El control de las imágenes

LOS MAPAS DE IMAGEN

En el tema 6 de este manual, al hablar de los enlaces, se verá que una imagen sólo puede contener un enlace. Cuando
se necesita que una misma imagen soporte más de un enlace es necesario marcar la imagen con diferentes áreas
geométricas para que cada una de ellas tenga su propio enlace.

Existen dos tipos de mapas de imagen, los mapas de imagen en el servidor y los mapas de imagen en el cliente. Los
mapas de imagen en el servidor están en desuso y se recomienda emplear los de cliente.

La definición de mapas de imagen es algo compleja porque implica la utilización de varias etiquetas:

- <IMG>: Define la imagen que sirve de base para el mapa. Esta etiqueta no hay que cerrarla. Necesita los siguientes
atributos:

· SRC=“nombre de la imagen”: Define el nombre y la ruta de la imagen.

· USEMAP=“#nombre del mapa”: Define el nombre del mapa de imagen.

- <MAP>: Identifica el mapa de imagen. Esta etiqueta hay que cerrarla con </MAP>. Tiene asociado obligatoriamente
el siguiente atributo.

· NAME=“nombre del mapa”: Indica el nombre del mapa, que coincidirá con el indicado en USEMAP.

- <AREA>: Define cada una de las áreas geométricas en las que se divide el mapa. Esta etiqueta no hay que cerrarla.
Tiene asociados obligatoriamente los siguientes atributos:

· SHAPE=“rect/circle/poly”: Define la forma geometría de cada elemento de área. Pueden ser rectangular,
circular o poligonal.

· COORDS=“coordenadas”: Indica las coordenadas en píxeles correspondientes al vértice superior izquierdo de

cada área.

· HREF=“dirección de destino”: Indica la dirección a la que se accede al pulsar sobre el área. Esta dirección se
muestra en la barra inferior del navegador.

Editorial CEP 87
Manual Introducción al lenguaje HTML

Mapa de imagen con enlace asociado

Conviene definir una última área que coincida con la imagen completa para direccionar por defecto cuando no se pulse
sobre un área definida del mapa.

La manera de definir cada área de un mapa de imagen es la siguiente:

- En el área rectangular (rect), se especifican las coordenadas de la esquina superior izquierda y de la esquina
inferior derecha.

- En el área circular (circle), se especifican las coordenadas del centro y el valor correspondiente al radio.

- En el área poligonal (poly), se especifican las coordenadas de todos los vértices del polígono de forma consecutiva.

La tarea más complicada a la hora de trabajar con mapas de imagen es definir las coordenadas de las áreas. Para ello
es necesario utilizar algún programa que indique las coordenadas al señalar un punto con el cursor. Puede utilizarse el
mismo programa empleado para la optimización de las imágenes, -Adobe Fireworks-, o algún programa específico para esta
tarea como CuteMap o MapEdit.

88 Editorial CEP
Tema 5. El control de las imágenes

LO QUE HEMOS APRENDIDO: tema 5

Æ Las imágenes, bien sean fotografías o bien sean ilustraciones o dibujos, son un recurso muy potente a la hora de
aportar valor a las páginas Web.
Æ El primer requisito que debe cumplir una imagen es que esté guardada en un formato de archivo gráfico compatible
con HTML.
Æ El segundo requisito que debe cumplir es que pese lo imprescindible para mostrar una buena calidad de
visualización sin ralentizar la descarga de la página.
Æ El objetivo final del proceso de optimización de una imagen consiste en obtener la mejor relación entre la calidad
final de la imagen y su peso en kb.
Æ Existen numerosos formatos de archivo de imágenes, pero no todos ellos son compatibles con el lenguaje HTML.
Æ De todos los formatos posibles, sólo tres son validos para colocarlos en un documento HTML y que los interpreten
correctamente los navegadores. Estos formatos son JPEG, GIF y PNG.
Æ Las siglas JPEG significan Join Photographic Experts Group. Es un formato que actúa reduciendo el peso final en
kb de la imagen a base de bajar su calidad, es por tanto un formato que comprime con pérdida de calidad.
Æ Las siglas GIF significan Graphics Interchange Format. A diferencia de JPEG, este formato actúa reduciendo el
peso final en kb de la imagen a base de eliminar colores no necesarios para representarla.
Æ Sus siglas significan Portable Network Graphics. Es un formato de creación más reciente que GIF y JPEG, que
obtiene mayores niveles de compresión y calidad final, pero que es menos compatible que JPEG y GIF. En realidad
son dos formatos, PNG-24 bits y PNG-8 bits; y cada uno de ellos se desarrolló como alternativa a JPEG, el primero
y a GIF, el segundo.
Æ Para colocar imágenes en los documentos HTML hay que utilizar la etiqueta <IMG>, es una etiqueta que no hay
que cerrar.
Æ La etiqueta <IMG> se puede colocar en cualquier lugar de la página. Una imagen se puede insertar en una celda
de una tabla o en un contenedor flotante como una capa; para ello hay que insertar la etiqueta <IMG> entre las
etiquetas que definen la celda o la capa.
Æ La etiqueta <IMG> siempre tendrá el atributo SRC que indica el nombre de la imagen con su extensión, y la ruta
para encontrarla.
Æ En el tema 6 de este manual, al hablar de los enlaces, se verá que una imagen sólo puede contener un enlace.
Cuando se necesita que una misma imagen soporte más de un enlace es necesario marcar la imagen con
diferentes áreas geométricas para que cada una de ellas tenga su propio enlace.
Æ Existen dos tipos de mapas de imagen, los mapas de imagen en el servidor y los mapas de imagen en el cliente.
Los mapas de imagen en el servidor están en desuso y se recomienda emplear los de cliente.
Æ La tarea más complicada a la hora de trabajar con mapas de imagen es definir las coordenadas de las áreas. Para
ello es necesario utilizar algún programa que indique las coordenadas al señalar un punto con el cursor.

Editorial CEP 89
Manual Introducción al lenguaje HTML

90 Editorial CEP
TEMA 6
Los enlaces
El concepto de enlace
Tipos de enlaces
Enlaces internos
Enlaces locales
Enlaces externos
Enlaces de correo electrónico

OBJETIVOS:
Entender el concepto de hipertexto.
Conocer los diferentes tipos de enlaces.
Aprender a asignar y configurar los enlaces.
Tema 6. Los enlaces

EL CONCEPTO DE ENLACE
Los enlaces son la principal característica diferenciadora de los documentos de hipertexto, por tanto del código HTML.
Es lo que más ha colaborado al desarrollo actual del servicio Web en Internet. Mediante un enlace podemos saltar de un
documento a otro y seguir ampliando la información que se esté buscando. La capacidad de poder enlazar unos
documentos con otros es lo que popularmente conocemos como navegar por la Web. Un enlace es una referencia a otro
documento o a otro recurso almacenado en Internet, y que se escribe de una manera universalmente aceptada. Los enlaces
se representan visualmente mediante un subrayado, para los textos, y un marco, para las imágenes, en otro color,
normalmente azul oscuro. También se indica el enlace mediante el cambio del aspecto del cursor a puntero de interactividad.

Para que se produzca un enlace tiene que haber dos documentos. El primero es el documento origen y contiene la
referencia del documento enlazado. El segundo es el documento destino y es el que contiene la información que se quiere
ampliar. El enlace se ejecuta, haciendo clic con el ratón, sobre el texto que contiene la referencia del enlace; inmediatamente
se mostrará en pantalla el contenido enlazado en destino.

El enlace se puede asignar, en el documento origen, a cualquier contenido, en definitiva a cualquiera de los siguientes
elementos:

- Un bloque de texto de cualquier extensión.

- Una imagen.

- Un área de un mapa de imagen.

- Una animación.

- Un sonido.

- Un vídeo.

El destino del enlace puede ser cualquiera de los siguientes:

- Otro documento HTML dentro del mismo servidor.

- Un punto dentro del mismo documento.

- Un documento HTML en otro servidor.

- Una página Web.

- Una imagen.

- Un programa.

TIPOS DE ENLACES
Los enlaces se pueden clasificar con arreglo a varios criterios.

En primer lugar, dependiendo del tipo contenido que soporta la referencia del documento enlazado, pueden ser:

- Enlaces de hipertexto, o enlaces basados en un texto.

- Enlaces de hipermedia, o enlaces basados en contenidos media.

Editorial CEP 93
Manual Introducción al lenguaje HTML

En segundo lugar, dependiendo del tipo de destino al que se dirige el enlace, pueden ser:

- Enlaces internos: Llevan a una zona determinada del mismo documento.

- Enlaces locales: Llevan a otro documento situado en el mismo servidor.

- Enlaces externos: Llevan a otro documento situado en otro servidor.

- Enlaces a otros recursos de Internet: Permiten acceder a los servicios de Internet, como el correo.

Los enlaces se definen mediante la etiqueta <A> que hay que cerrar con </A> Un enlace está formado técnicamente por
la referencia del documento enlazado, que se define con el atributo HREF; y por modo en el que se muestra dicho
documento enlazado, que se define por el atributo TARGET.

El código de un enlace tipo basado en texto sería el siguiente:

<A HREF=“nombre del documento enlazado”>Texto que soporta el enlace</A>

El código de un enlace tipo basado en una imagen sería el siguiente:

<A HREF=“nombre del documento enlazado”>

<IMG SRC=“nombre de la imagen que soporta el enlace </A>

Enlace con la etiqueta <A> sobre imagen y sobre texto

94 Editorial CEP
Tema 6. Los enlaces

ENLACES INTERNOS
Un enlace interno es un enlace que nos lleva a otra zona del mismo documento. Este tipo de enlaces es muy útil en
documentos extensos, ya que permiten acceder rápidamente la información contenida en cualquier lugar de un documento
sin tener que recurrir a las barras de desplazamiento.

Para que funcione este tipo de enlace es necesario disponer, en la cabecera del documento, de un índice en el que se
definirán los enlaces. Esto se combinará con unas marcas colocadas en el comienzo de cada bloque de información
referenciado en el índice. Estas marcas se realizan con el atributo NAME de la etiqueta <A>.

El código completo, dividido en dos partes, de un enlace interno con un salto sería el siguiente.

En la cabecera, -índice-, del documento:

<A HREF=“#punto 1”>

En el comienzo del punto 1:

<A NAME=“punto 1”

Código de enlace interno con la etiqueta <A>

Editorial CEP 95
Manual Introducción al lenguaje HTML

Texto de enlace interno con la etiqueta <A>

ENLACES LOCALES
Se denominan enlaces locales a los que vinculan documentos alojados en el mismo servidor, habitualmente en un
directorio próximo y que, normalmente forman parte del mismo sitio Web. Los enlaces de este tipo son los más frecuente-
mente utilizados y se definen con la etiqueta <A>. Para este tipo de enlace, la etiqueta <A> emplea los atributos HREF y
TARGET, cuyas funciones son las siguientes:

- HREF=“nombre del documento enlazado”: define el documento enlazado.

- TARGET=“self/blank/top/parent”: Define la ventana en la que se mostrará el documento enlazado.

· Self: El documento enlazado se carga en la misma ventana que contiene el documento con el enlace.

· Blank: Se abre una ventana nueva para mostrar el documento enlazado.

· Top: Se muestra el documento enlazado en el frame superior, cuando se trabaja con marcos.

· Parent: El documento enlazado se muestra fuera de la estructura de marcos.

En los enlaces locales se recomienda utilizar self como destino, mientras que en los enlaces externos se recomienda
utilizar blank como destino.

Los enlaces de este tipo pueden estar basados en un texto o en una imagen. El código completo de un enlace local
basado en texto y con destino la misma ventana nueva sería el siguiente:

<A HREF=“nombre del documento enlazado” TARGET=“self”>

Texto que soporta el enlace</A>

96 Editorial CEP
Tema 6. Los enlaces

El código completo de un enlace local basado en imagen y con destino la misma ventana nueva sería el siguiente:

<A HREF=“nombre del documento enlazado” TARGET=“self”>

<IMG SRC=“nombre de la imagen”> </A>

En los enlaces locales, al definir el nombre del documento enlazado, solamente hay que escribir el nombre seguido de la
extensión HTML, ya que todos los documentos de un mismo sitio suelen estar almacenados en el mismo directorio.

ENLACES EXTERNOS
Un enlace externo es el que se produce entre un documento y otro documento alojado en otro servidor y que pertenece
a otro sitio Web diferente. Estos enlaces se definen con la etiqueta <A>. En este tipo de enlaces, al definir el nombre del
documento enlazado hay que añadir la ruta completa, -la Url del documento-, para localizarlo en Internet, incluyendo el
direccionador del servicio Web.

Los enlaces de este tipo pueden estar basados en un texto o en una imagen. El código completo de un enlace externo
basado en texto, y con destino una ventana nueva, sería el siguiente:

<A HREF=“http://www.editorialcep.com/publicaciones/publicaciones.aspado” TARGET=“blank”>

Texto que soporta el enlace</A>

El código completo de un enlace externo basado en imagen, y con destino una ventana nueva, sería el siguiente:

<A HREF=“ http://www.editorialcep.com/publicaciones/publicaciones.asp” TARGET=“blank”>

<IMG SRC=“nombre de la imagen”> </A>

En los enlaces externos se recomienda utilizar blank como destino, para que el documento enlazado se abra en una
venta nueva y se mantenga abierta la ventana que contiene el documento original. Esta recomendación es menos necesaria
para la navegación con exploradores que muestran los contenidos en pestañas en lugar de ventanas.

ENLACES DE CORREO ELECTRÓNICO

Se pueden realizar enlaces a otros tipos de contenidos que no sean documentos HTML. Se puede enlazar con
servidores ftp para transferencia de ficheros, con servidores news de noticias, servidores de correo, y con el resto de los
servicios que ofrece Internet. El enlace más interesante de este tipo, es el que facilita el envío de mensajes de correo elec-
trónico desde el navegador. Una vez definido el enlace, simplemente con hacer clic sobre él se activa el gestor de correo
que tenga instalado el usuario y abre un mensaje nuevo preparado ya con la dirección del destinatario y listo para enviar.

Este tipo de enlace se define también con la etiqueta <A> y el atributo HREF y la expresión ?SUBJECT. El atributo
HREF define la dirección de correo y la expresión ?SUBJECT indica el asunto del mensaje. El código completo para un
enlace a una dirección de correo sería el siguiente:

<A HREF=“mailto:[email protected]” ?SUBJECT=Consulta técnica>

Contactar con CEP </A>

Editorial CEP 97
Manual Introducción al lenguaje HTML

Enlace local, externo y de correo con la etiqueta <A>

98 Editorial CEP
Tema 6. Los enlaces

LO QUE HEMOS APRENDIDO: tema 6

Æ Los enlaces son la principal característica diferenciadora de los documentos de hipertexto, por tanto del código
HTML. Es lo que más ha colaborado al desarrollo actual del servicio Web en Internet.
Æ Un enlace es una referencia a otro documento o a otro recurso almacenado en Internet, y que se escribe de una
manera universalmente aceptada.
Æ Los enlaces se representan visualmente mediante un subrayado, para los textos, y un marco, para las imágenes,
en otro color, normalmente azul oscuro.
Æ Los enlaces, dependiendo del tipo contenido que contiene la referencia del documento enlazado, pueden ser:
enlaces de hipertexto, o enlaces basados en un texto y enlaces de hipermedia, o enlaces basados en contenidos
media.
Æ Los enlaces, dependiendo del tipo de destino al que se dirige el enlace, pueden ser: Enlaces internos: llevan a una
zona determinada del mismo documento. Enlaces locales: llevan a otro documento situado en el mismo servidor.
Enlaces externos: llevan a otro documento situado en otro servidor. Enlaces a otros recursos de Internet.
Æ Los enlaces se definen mediante la etiqueta <A> que hay que cerrar con </A> Un enlace está formado
técnicamente por la referencia del documento enlazado, que se define con el atributo HREF; y por modo en el que
se muestra dicho documento enlazado, que se define por el atributo TARGET.
Æ Un enlace interno es un enlace que nos lleva a otra zona del mismo documento. Este tipo de enlaces es muy útil
en documentos extensos, ya que permiten acceder rápidamente la información contenida en cualquier lugar de un
documento sin tener que recurrir a las barras de desplazamiento.
Æ Las marcas internas se realizan con el atributo NAME de la etiqueta <A>.
Æ Se denominan enlaces locales a los que vinculan documentos alojados en el mismo servidor, habitualmente en un
directorio próximo y que, normalmente forman parte del mismo sitio Web. Los enlaces de este tipo son los más
frecuentemente utilizados y se definen con la etiqueta <A>.
Æ Para los enlaces locales, la etiqueta <A> emplea los atributos HREF y TARGET.
Æ En los enlaces locales, al definir el nombre del documento enlazado, solamente hay que escribir el nombre seguido
de la extensión HTML, ya que todos los documentos de un mismo sitio suelen estar almacenados en el mismo
directorio.
Æ Un enlace externo es el que se produce entre un documento y otro documento alojado en otro servidor y que
pertenece a otro sitio Web diferente. Estos enlaces se definen con la etiqueta <A>.
Æ En los enlaces externos, al definir el nombre del documento enlazado hay que añadir la ruta completa, -la Url del
documento-, para localizarlo en Internet, incluyendo el direccionador del servicio Web.
Æ Se pueden realizar enlaces a otros tipos de contenidos que no sean documentos HTML. Se puede enlazar con
servidores ftp para transferencia de ficheros, con servidores news de noticias, servidores de correo, y con el resto
de los servicios que ofrece Internet.
Æ El enlace de correo electrónico se define también con la etiqueta <A> y el atributo HREF y la expresión ?SUBJECT.
El atributo HREF define la dirección de correo y la expresión ?SUBJECT indica el asunto del mensaje.

Editorial CEP 99
Manual Introducción al lenguaje HTML

100 Editorial CEP

TEMA 7
Las tablas
El origen y el uso actual de las tablas
Estructura básica de las tablas
El uso de tablas complejas
Modificar tablas ya creadas
El contenido de las tablas

OBJETIVOS:
Conocer el origen y evolución de las tablas.
Aprender a definir tablas.
Aprender a modificar tablas ya definidas.
Entender el uso de las tablas como estructura básica de diseño.
Tema 7. Las tablas

EL ORIGEN Y EL USO ACTUAL DE LAS TABLAS

Las tablas se han utilizado siempre y se siguen utilizando en los programas de texto, como Microsoft Word; en los de
maquetación, como QuarkXPress o Adobe Indesign y por supuesto en los de diseño de páginas web, como Adobe
Dreamweaver. Las tablas se utilizaron originalmente para mostrar, de forma ordenada y accesible, datos numéricos prove-
nientes de las hojas de cálculo. HTML recoge ese uso y le añade muchas más prestaciones, tanto en las posibilidades
personalizar su aspecto, como en el uso que se hace de ellas.

En cuanto a la personalización del aspecto de las tablas, HTML permite configurar, a medida, todos los elementos que
intervienen en una estructura de tabla, como los fondos, las líneas de separación y los contenidos.

Respecto al uso que se hace actualmente de las tablas, conviene destacar que es una estructura que ya forma parte de
las ayudas principales para el diseño de las páginas. Es decir, la reticulación que permiten aplicar al cuerpo del documento,
se aprovecha para distribuir el espacio de la página de manera equilibrada y con arreglo a criterios puramente de diseño y
composición.

Trabajar con tablas tiene una ventaja añadida y es que las etiquetas que definen las tablas se incorporan al código
HTML desde su versión 3, por lo tanto son altamente compatibles.

Utilizándolas con criterios actuales, siguen siendo una opción interesante para el diseño de las páginas. Una estructura
de tabla no tiene por qué ser visible y trasmitir así un cierto valor de antigüedad, si no que se pueden aprovechar sus
características sin que la estructura como tal de la tabla sea visible.

Tabla de 12 celdas de Microsoft Word formada por 4 filas y tres columnas

ESTRUCTURA BÁSICA DE LAS TABLAS

La estructura actual de las tablas sigue siendo la misma que la de las primeras tablas utilizadas. Una tabla es una
estructura geométrica rectangular formada por filas horizontales y columnas verticales, que al cruzarse definen áreas
rectangulares denominadas celdas. Las etiquetas que definen una tabla básica son las tres siguientes:

- <TABLE>: Define el comienzo y final de una tabla. Hay que cerrarla con </TABLE>.

- <TR>: Define el comienzo y final de cada fila. Hay que cerrarla con </TR>.

- <TD>: Define el contenido de cada celda. Hay que cerrarla con </TD>.

Cuando se crea una tabla no hay que definir necesariamente, desde el principio, el número definitivo de filas y columnas
que la compondrán. Es conveniente prever la estructura necesaria, pero en cualquier momento se pueden añadir o eliminar
filas y columnas a la tabla original. Desde este aspecto y desde el de las posibles combinaciones y divisiones de las celdas
entre sí, se puede considerar que las tablas representan una estructura muy flexible.

Editorial CEP 103

Manual Introducción al lenguaje HTML

Una de las grandes aportaciones de las tablas es que pueden mostrar en sus celdas, cualquier tipo de contenido
compatible con HTML. Por este motivo son una estructura muy útil para dividir el espacio de la página y colocar de forma
armónica y equilibrada imágenes, y salvar así las limitaciones iniciales del código HTML a la hora de permitir colocar los
contenidos en cualquier lugar de la página.

Las etiquetas para la definición de tablas disponen de un gran número de atributos que permiten configurar
detalladamente el aspecto que tendrán. El desglose detallado de todos los atributos de las etiquetas de tabla se verá en el
siguiente punto.

El código básico de una tabla de tres filas y tres columnas sería el siguiente:

<TABLE>

<TR> <TD> contenido a.1 </TD> <TD> contenido a.2</TD> <TD> contenido a.3</TD> </TR>

<TR> <TD> contenido b.1</TD> <TD> contenido b.2</TD> <TD> contenido b.3</TD> </TR>

<TR> <TD> contenido c.1</TD> <TD> contenido c.2</TD> <TD> contenido c.3</TD> </TR>

</TABLE>

Las celdas deben tener contenido para que no se colapsen y aparezcan como sólidas al visualizarlas. En el caso de que
una celda tenga que permanecer vacía hay incluir como contenido un espacio vacío mediante la notación &nbsp, o bien un
pixel vacío. Un pixel vacío es un documento bitmap, en formato GIF, de un solo pixel y fondo transparente. Este tipo de
documentos se crean con programas como Adobe Photoshop o Adobe Fireworks, y son muy útiles cuando se trabaja con
tablas.

Tabla básica con las etiquetas <TABLE>, <TR> y <TD>

104 Editorial CEP

Tema 7. Las tablas

EL USO DE TABLAS COMPLEJAS

Las etiquetas para definir las tablas disponen de numerosos atributos y etiquetas complementarias que permiten
personalizarlas. A una tabla se le puede añadir un título que se mostrará sobre la tabla y se puede asignar a una fila,
normalmente la primera, la función de cabecera destacando en negrita el texto que contiene.

Las etiquetas complementarias y sus atributos, que se utilizan junto con la etiqueta <TABLE> son las siguientes:

- <CAPTION>: Añade un título a la tabla. Se muestra por encima de la tabla.

· ALIGN=“top/bottom/left/right”: Alinea el título de la tabla.

- <TH>: Funciona como cabecera de la tabla. Está formada por las celdas de la primera fila destacando en negrita
su contenido.

· ALIGN=“left/center/right”: Alinea a la izquierda, en el centro o a la derecha, el contenido de la celda de

cabecera.

· BGCOLOR=“#color”: Aplica un color al fondo de la celda de cabecera.

· BORDERCOLOR=“#color”: Aplica un color al borde de la celda de cabecera.

· BORDERCOLORLIGHT=“#color”: Aplica un color al borde claro de la sombra de la celda de cabecera.

· BORDERCOLORDARK=“#color”: Aplica un color al borde oscuro de la sombra de la celda de cabecera.

· COLSPAN=“valor”: Indica el número de columnas ocupadas por la celda de cabecera.

· HEIGHT=“valor”: Indica la altura en pixels de la celda de cabecera.

· ROWSPAN=“valor”: Indica el número de filas ocupadas por la celda de cabecera.

· VALIGN=“top/middle/bottom”: Asigna alineación vertical al texto de la celda de cabecera.

· WIDTH=“valor/%”: Asigna el ancho a la celda de cabecera, bien como un tamaño fijo en pixels, o como un
% del tamaño de la tabla.

Los principales atributos de la etiqueta <TABLE>, que define la tabla son los siguientes:

- ALIGN=“left/center/right”: Alinea a la izquierda, en el centro o a la derecha, el conjunto de la tabla.

- BORDER=“valor”: Añade un marco en pixels a la tabla.

- CELLSPACING=“valor”: Añade un espacio, en pixels, de separación entre celdas.

- CELPADDING=“valor”: Añade un espacio reservado, en pixels, de separación entre los bordes de las celdas y su
contenido.

- WIDTH=“valor/%”: Asigna el ancho a la tabla, bien como un tamaño fijo en pixels, o como un % del tamaño de la
ventana del navegador.

- BGCOLOR=“#color”: Aplica un color al fondo de la tabla.

- BACKGROUND=“imagen”: Aplica una imagen como mosaico al fondo de la tabla.

Editorial CEP 105

Manual Introducción al lenguaje HTML

- FRAME=“none/above/below/hsides/lhs/rhs/vsides/box”: Indica los bordes externos de la tabla que se mostrarán,

ninguno, superior, inferior, superior e inferior, lado izquierdo, lado derecho/los dos laterales/todos.

- RULES=“all/none/cols/rows”. Indica los bordes internos que se mostrarán, todos, ninguno, bordes de columnas,
bordes de filas.

Los principales atributos de la etiqueta <TR>, que define las filas, son los siguientes:

- ALIGN=“left/center/right”: Alinea a la izquierda, en el centro o a la derecha, el contenido de la fila.

- BGCOLOR=“#color”: Aplica un color al fondo de la fila.

- BORDERCOLOR=“#color”: Aplica un color al borde de la fila.

- BORDERCOLORLIGHT=“#color”: Aplica un color al borde claro de la sombra de la fila.

- BORDERCOLORDARK=“#color”: Aplica un color al borde oscuro de la sombra de la fila.

- VALIGN=“top/middle/bottom”: Asigna alineación vertical al texto de la fila.

Los principales atributos de la etiqueta <TD>, que define las celdas, son los siguientes:

- ALIGN=“left/center/right”: Alinea a la izquierda, en el centro o a la derecha, el contenido de la celda.

- BGCOLOR=“#color”: Aplica un color al fondo de la celda.

- BORDERCOLOR=“#color”: Aplica un color al borde de la celda.

- BORDERCOLORLIGHT=“#color”: Aplica un color al borde claro de la sombra de la celda.

- BORDERCOLORDARK=“#color”: Aplica un color al borde oscuro de la sombra de la celda.

- COLSPAN=“valor”: Indica el número de columnas ocupadas por la celda.

- HEIGHT=“valor”: Indica la altura en pixels de la celda.

- ROWSPAN=“valor”: Indica el número de filas ocupadas por la celda.

- VALIGN=“top/middle/bottom”: Asigna alineación vertical al texto de la celda.

- WIDTH=“valor/%”: Asigna el ancho a la celda de cabecera, bien como un tamaño fijo en pixels, o como un % del
tamaño de la tabla.

El código completo de una tabla centrada en la página, de 800 px de ancho, sin borde, con título, una cabecera, tres
filas, y tres columnas; con los contenidos centrados sobre un fondo de color y un valor de 5 px. de separación entre celdas,
más otros 10 px de espacio reservado, sería el siguiente:

106 Editorial CEP

Tema 7. Las tablas

<TABLE WIDTH=“800” BORDER=“0” CELLSPACING=“5” CELPADDING=“10” BGCOLOR=“#color”

ALIGN=“center”>

<CAPTION> Título de la tabla </CAPTION>

<TR ALIGN=“center”> <TH> cabecera 1 </TH> <TH> cabecera.2</TH>

<TH> cabecera.3</TH> </TR>

<TR ALIGN=“center”> <TD> contenido a.1 </TD> <TD> contenido a.2</TD>

<TD> contenido a.3</TD> </TR>

< TR ALIGN=“center”> <TD> contenido b.1</TD> <TD> contenido b.2</TD>

<TD> contenido b.3</TD> </TR>

< TR ALIGN=“center”> <TD> contenido c.1</TD> <TD> contenido c.2</TD>

<TD> contenido c.3</TD> </TR>

</TABLE>

Tabla con la etiqueta <TABLE>y atributos

MODIFICAR TABLAS YA CREADAS

Una vez definida una tabla, se pueden modificar sus columnas y filas de manera que ocupen más o menos con respecto
a sus medidas iniciales. Para combinar celdas se utilizan los atributos de la etiqueta <TD>, COLSPAN y ROWSPAN. Con
COLSPAN se indica el número de columnas que va a abarcar una celda y con ROWSPAN se indica el número de filas que
va abarcar.

Editorial CEP 107

Manual Introducción al lenguaje HTML

El código de una tabla con dos filas y dos columnas, de manera que la primera fila esté ocupada por una sola celda del
ancho de las dos columnas, sería el siguiente:

<TABLE>

<TR> <TD COLSPAN=“2”> contenido a.1 + a.2</TD> </TR>

<TR> <TD> contenido b.1</TD> <TD> contenido b.2</TD></TR>

</TABLE>

El código de una tabla con dos filas y dos columnas, de manera que la primera columna esté ocupada por una sola
celda de la altura de las dos filas, sería el siguiente:

<TR> <TD> contenido a.1</TD><TD ROWSPAN=”2”> contenido a.2 +b.2</TD></TR>

<TR> <TD> contenido b.1 </TD> </TR>

</TABLE>

Tablas modificadas con los atributos COLSPAN y ROWSPAN

108 Editorial CEP

Tema 7. Las tablas

EL CONTENIDO DE LAS TABLAS

Las tablas pueden mostrar cualquier contenido. Generalmente las celdas de las tablas se utilizan para mostrar texto e
imágenes, pero pueden contener cualquier otro elemento. También pueden contener enlaces y por lo tanto son una buena
opción para crear barras de navegación. Así mismo se pueden utilizar para diseñar estructuras de maquetación como texto
a dos columnas, o un texto principal y una columna menor para notas. Es frecuente utilizarlas como contenedores para los
campos de los formularios. En resumen, las tablas son una estructura muy útil, muy versátil, altamente compatibles y que
pueden dar mucho juego en el diseño de páginas web.

Tabla con imagen, texto y enlace

Editorial CEP 109

Tema 7. Las tablas

LO QUE HEMOS APRENDIDO: tema 7

Æ Las tablas se han utilizado siempre y se siguen utilizando en los programas de texto, como Microsoft Word; en los
de maquetación, como QuarkXPress o Adobe Indesign y por supuesto en los de diseño de páginas web, como
Adobe Dreamweaver.
Æ Las tablas se utilizaron originalmente para mostrar, de forma ordenada y accesible, datos numéricos provenientes
de las hojas de cálculo. HTML recoge ese uso y le añade muchas más prestaciones, tanto en las posibilidades
personalizar su aspecto, como en el uso que se hace de ellas.
Æ Trabajar con tablas tiene una ventaja añadida y es que las etiquetas que definen las tablas se incorporan al código
HTML en su versión 3, por lo tanto son altamente compatibles.
Æ Una tabla es una estructura geométrica rectangular formada por filas horizontales y columnas verticales, que al
cruzarse definen áreas rectangulares denominadas celdas.
Æ Las etiquetas que definen una tabla básica son las tres siguientes: <TABLE>, <TR> y <TD>.
Æ Una de las grandes aportaciones de las tablas es que pueden mostrar en sus celdas, cualquier tipo de contenido
compatible con HTML.
Æ Las celdas deben tener contenido para que no se colapsen y aparezcan como sólidas al visualizarlas.
Æ En el caso de que una celda tenga que permanecer vacía hay incluir como contenido un espacio vacío mediante
la notación &nbsp, o bien un pixel vacío.
Æ Un pixel vacío es un documento bitmap, en formato GIF, de un solo pixel y fondo transparente. Este tipo de
documentos se crean con programas como Adobe Photoshop o Adobe Fireworks, y son muy útiles cuando se
trabaja con tablas.
Æ Las etiquetas para definir las tablas disponen de numerosos atributos y etiquetas complementarias que permiten
personalizarlas.
Æ A una tabla se le puede añadir un título que se mostrará sobre la tabla y se puede asignar a una fila, normalmente
la primera, la función de cabecera destacando en negrita el texto que contiene.
Æ Las etiquetas complementarias y sus atributos, que se utilizan junto con la etiqueta <TABLE> son las siguientes:
<CAPTION> y <TH>.
Æ Una vez definida una tabla, se pueden modificar sus columnas y filas de manera que ocupen más o menos con
respecto a sus medidas iniciales. Para combinar celdas se utilizan los atributos de la etiqueta <TD>, COLSPAN y
ROWSPAN.
Æ Las tablas pueden mostrar cualquier contenido. Generalmente las celdas de las tablas se utilizan para mostrar texto
e imágenes, pero pueden contener cualquier otro elemento.
Æ También pueden contener enlaces y por lo tanto son una buena opción para crear barras de navegación.

Editorial CEP 111

Manual Introducción al lenguaje HTML

112 Editorial CEP

TEMA 8
Los formularios
¿Qué es y para qué sirve un formulario?
¿Cómo funciona un formulario?
Estructura básica de un formulario
Aplicar estilo a un formulario

OBJETIVOS:
Entender la función que cumplen los formularios.
Familiarizarse con las etiquetas que definen los formularios.
Entender la importancia de un formulario bien diseñado.
Tema 8. Los formularios

¿QUÉ ES Y PARA QUÉ SIRVE UN FORMULARIO?

La función que cumplen los formularios es la de recabar datos de los usuarios de las páginas Web y enviarlos al servidor
de alojamiento para procesarlos. El procesamiento de los datos recibidos se realiza mediante programas especializados de
tipo CGI, y las finalidades pueden ser múltiples. Desde crear un directorio de datos de clientes, responder a encuestas de
todo tipo, participar en promociones y sorteos, conocer el perfil de los usuarios de la página para adaptarla a sus
necesidades, cumplimentar un proceso de compra, etc.

Un formulario está formado básicamente por una serie de campos de texto para que los usuarios puedan escribir los
datos que se les solicitan. También suelen incluir menús desplegables, casillas y botones de confirmación y botones de
borrado y envío para facilitar la interactividad con el usuario y aumentar la funcionalidad del formulario.

El diseño, la operatividad, la facilidad y la sencillez de uso de un formulario son factores decisivos para que la consulta a
los usuarios tenga éxito. Un formulario mal diseñado, difícil de cumplimentar o poco operativo, es con toda probabilidad un
formulario fallido.

¿CÓMO FUNCIONA UN FORMULARIO?

Ya hemos indicado en el punto anterior que un formulario está básicamente compuesto por campos de texto y otros
elementos para recabar datos de los usuarios, y que esos datos son enviados a un programa de procesamiento tipo CGI.
Por lo tanto el trabajo con los formularios se desarrolla en cuatro fases:

- Diseño de los campos necesarios para obtener los datos previstos.

- Envío y recepción de esos datos en el servidor de alojamiento de la página Web.

- Procesamiento de los datos en función de la finalidad del formulario.

- Respuesta al usuario para confirmar la recepción, y en su caso agradecer la participación.

En la primera parte fase del proceso interviene el diseñador de la página para conseguir un formulario que cumpla los
requisitos señalados en el punto anterior.

La segunda y tercera fase requiere el trabajo de un programador que configure adecuadamente el envío, recepción y
procesamiento de los datos.

Por último, la cuarta fase, y no menos importante, tiene que llevarla a cabo el responsable de comunicación de la
página.

Para el diseño del formulario se dispone de un conjunto de etiquetas y atributos HTML especializados. Para la
programación necesaria de los datos enviados, hay que asociar, cada campo de datos del formulario, a una variable. Una
vez que el formulario se haya recibido, en la dirección en que se aloje el programa capaz de interpretarlos, este procesará
las variables para obtener los resultados previstos. Existen diversas maneras de hacer llegar los datos al servidor y
numerosos programas externos para procesar adecuadamente esos datos.

Editorial CEP 115

Manual Introducción al lenguaje HTML

ESTRUCTURA BÁSICA DE UN FORMULARIO

Los formularios se definen mediante un conjunto de etiquetas especializadas, la principal es la etiqueta <FORM>, que es
la que define el formulario y que hay cerrar con </FORM>. Entre estas dos etiquetas se incluirán todos los demás elementos
que compongan el formulario. Existen otras etiquetas que permiten añadir todo tipo de objetos para la toma de datos de los
formularios.

Etiqueta <FORM>

La principal etiqueta para el control de formularios es la etiqueta <FORM>. Los atributos principales de la etiqueta
<FORM> son los siguientes:

- ACTION=“dirección completa del programa procesador”: Indica el nombre y la ubicación del programa que se va a
emplear para procesar los datos del formulario.

- ACTION=“mailto:dirección de correo electrónico”: Indica la dirección de correo a la que se van a enviar los datos
del formulario.

- METHOD=“get/post”: Indica el método que se va a utilizar para transferir las variables al servidor en el que se
encuentre el programa de procesamiento.

· Get envía los pares de datos del formulario, -identificador del campo y el valor respondido-, y los envía sin
introducir cambios. Está en desuso.

· Post envía los pares de datos sin las limitaciones del método get. Es el que se emplea actualmente.

- ENCTYPE=“aplication/x-www-form-urlenconded”: Describe el método de codificación utilizado.

- NAME=“nombre del formulario”: Nombre asignado al formulario.

- FRAME=“nombre de la ventana de destino”: Indica la ventana o frame de destino del resultado de procesar el
formulario.

La etiqueta <INPUT>

Cada uno de los objetos que sirven para obtener datos de los usuarios, se denomina campos de entrada. Existen
diferentes campos de entrada como texto, casillas de selección, envío, etc. Para añadir un campo de entrada a un
formulario se emplea la etiqueta <INPUT>. Esta etiqueta dispone de los siguientes atributos:

- TYPE: Indica el tipo de campo que se va a definir. Este atributo dispone de los siguientes valores:

· Text: Introduce líneas de texto.

· Password: Introduce texto que en pantalla aparece como asteriscos.

· Radio: Permite elegir un valor entre varios. Casillas de selección excluyente.

· Checkbox: Permite elegir más de un valor entre varios. Casillas de selección múltiple.

· File: Permite enviar los datos del formulario a la dirección indicada.

· Submit: Permite enviar los datos del formulario a la dirección indicada.

116 Editorial CEP

Tema 8. Los formularios

· Reset: Permite borrar todos los datos de todos los campos.

· Image: Permite enviar los datos del formulario a la dirección indicada.

- NAME: Indica el nombre que se le va a dar a ese campo.

- VALUE: Indica el valor inicial del campo.

- SIZE: Indica el tamaño en caracteres o píxeles que se mostrarán en pantalla.

- MAXLENGH: Indica el número máximo de caracteres para el texto a introducir.

- CHECKED: Permite preseleccionar un valor de una casilla por defecto.

La etiqueta <BUTTON>

Existe otra manera de enviar datos o borrarlos de forma personalizada usando la etiqueta <BUTTON>, que hay que
cerrar con la etiqueta </BUTTON>. Sus atributos principales son los siguientes:

- NAME: Indica el nombre que se le va a dar al botón.

- VALUE: Indica el valor que se va a asociar al botón.

- TYPE: Indica el tipo de botón, submit, reset o button.

El resultado de utilizar la etiqueta <BUTTON TYPE=“submit”> es similar al obtenido con la etiqueta <INPUT
TYPE=“submit”>. Lo mismo sucede entre las etiquetas <BUTTON TYPE=“reset”> e <INPUT TYPE=“reset”>.

La etiqueta <TEXTAREA>

Esta etiqueta se emplea cuando es necesario un campo de texto de varias líneas. Esta etiqueta debe cerrarse con la
etiqueta </TEXTAREA>. Los atributos principales de esta etiqueta son los siguientes:

- NAME: Indica el nombre que se le va a dar a ese campo.

- COLS. Indica el número de columnas de texto que se verán en la pantalla.

- ROWS: Indica el número de filas de texto que se verán en la pantalla.

- WRAP: Justifica el texto dentro del campo de texto.

Las etiquetas <SELECT> y <OPTION>

Estas etiquetas se utilizan para mostrar una lista desplegable de opciones a elegir. Se debe cerrar con la etiqueta
</SELECT>. Los atributos principales de esta etiqueta son los siguientes:

- NAME: Indica el nombre que se le va a dar a ese campo.

- SIZE: Indica el número de opciones visibles en la ventana del navegador.

- MULTIPLE: Permite seleccionar más de un valor para el campo de opciones.

Cada una de las opciones de la lista se especifican con la etiqueta <OPTION> que hay que cerrar con </OPTION>. Los
atributos principales de esta etiqueta son los siguientes:

Editorial CEP 117

Manual Introducción al lenguaje HTML

- VALUE: Indica el valor del campo seleccionado.

- SELECTED: Indica la opción seleccionada por defecto.

Las etiquetas <FIELDSET> y <LEGEND>

Mediante estas dos etiquetas se pueden agrupar por temas, los campos de un formulario complejo. Ambas etiquetas hay
que cerrarlas con </FIELDSET> y </LEGEND>.La etiqueta <FIELDSET> agrupa los campos comunes, mientras que la
etiqueta <LEGEND> da nombre al grupo de campos asociados.

APLICAR ESTILO A UN FORMULARIO

Entre las etiquetas <FORM> y </FORM> es posible emplear todos los recursos del código HTML para aplicar estilo al
formulario y hacerlo más agradable visualmente. Una de las soluciones más utilizadas consiste en emplear una estructura
de tabla para maquetar y distribuir, de una manera ordenada, la identificación de los datos y los campos para recoger los
datos solicitados. Aplicando toda la capacidad de personalización de las tablas se pueden conseguir formularios con una
maquetación que añada valor al formulario. Otra manera de ordenar los diferentes campos de un formulario es mediante el
uso de listas. En resumen, cuando se inserta un formulario es primordial tener presente que del aspecto que tenga
dependerá en gran medida el éxito del mismo.

Formulario básico con la etiqueta <FORM>

118 Editorial CEP

Tema 8. Los formularios

LO QUE HEMOS APRENDIDO: tema 8

Æ La función que cumplen los formularios es la de recabar datos de los usuarios de las páginas Web y enviarlos al
servidor de alojamiento para procesarlos.
Æ El procesamiento de los datos recibidos se realiza mediante programas especializados de tipo CGI, y las finalidades
pueden ser múltiples. Desde crear un directorio de datos de clientes, responder a encuestas de todo tipo, participar
en promociones y sorteos, conocer el perfil de los usuarios de la página para adaptarla a sus necesidades,
cumplimentar un formulario de compra, etc.
Æ Un formulario está formado básicamente por una serie de campos de texto para que los usuarios puedan escribir
los datos que se les solicitan. También suelen incluir menús desplegables, casillas y botones de confirmación y
botones de borrado y envío para facilitar la interactividad con el usuario y aumentar la funcionalidad del formulario.
Æ Para el diseño del formulario se dispone de un conjunto de etiquetas y atributos HTML especializadas.
Æ Para la programación necesaria de los datos enviados, hay que asociar, cada campo de datos del formulario, a una
variable.
Æ Existen diversas maneras de hacer llegar los datos al servidor y numerosos programas externos para procesar
adecuadamente esos datos.
Æ La principal etiqueta para el control de formularios es la etiqueta <FORM>.
Æ Cada uno de los objetos que sirven para obtener datos de los usuarios, se denomina campos de entrada.
Æ Para añadir un campo de entrada a un formulario se emplea la etiqueta <INPUT>.
Æ La etiqueta <TEXTAREA> se emplea cuando es necesario un campo de texto de varias líneas.
Æ Las etiquetas <SELECT> y >OPTION>se utilizan para mostrar una lista desplegable de opciones a elegir.
Æ Mediante las etiquetas <FIELDSET> y <LEGEND> se pueden agrupar por temas, los campos de un formulario
complejo.
Æ Entre las etiquetas <FORM> y </FORM> es posible emplear todos los recursos del código HTML para aplicar estilo
al formulario y hacerlo más agradable visualmente.
Æ Una de las soluciones más utilizadas para maquetar y distribuir, de una manera ordenada, la identificación de los
datos y los campos para recoger los datos solicitados es emplear una estructura de tabla.
Æ Otra manera de ordenar los diferentes campos de un formulario es mediante el uso de listas.
Æ En resumen, cuando se inserta un formulario es primordial tener presente que del aspecto que tenga dependerá
en gran medida el éxito del mismo.

Editorial CEP 119

Manual Introducción al lenguaje HTML

120 Editorial CEP

TEMA 9
Los marcos
¿Qué son los marcos?
Ventajas e inconvenientes del uso de los marcos
Diseñar páginas con marcos
Los marcos flotantes

OBJETIVOS:
Entender el concepto de marco.
Conocer los aspectos positivos y negativos del uso de los marcos.
Aprender a crear páginas basadas en marcos.
Conocer las ventajas de los marcos flotantes.
Tema 9. Los marcos

¿QUÉ SON LOS MARCOS?

Los marcos o frames son una técnica que permite dividir la pantalla del navegador en varias ventanas independientes.
Cada una de esas ventanas, o marcos, mostrará un documento HTML diseñado expresamente para mostrarse en ella. Al
ser documentos independientes, cada uno de ellos tendrá su propio código HTML y se podrá modificar sin tener que cambiar
el resto de las páginas. Del hecho de que lo que se muestra en pantalla como una unidad, en una página diseñada con
marcos, en realidad sean varias páginas independientes, se derivan las ventajas e inconvenientes del uso de esta técnica.

Una manera habitual de trabajar con marcos consiste en dividir la ventana principal del navegador en varias ventanas
con contenidos determinados. Por ejemplo dividirla en tres ventanas, una fila superior que cumpliría una función puramente
corporativa con la inclusión del nombre de la empresa, el logo etc. Una columna a la izquierda con el menú principal de
navegación y los enlaces a los contenidos. Por último una ventana central en la que se mostrarán todos los contenidos.

Plantillas de marcos de Adobe Dreamweaver

VENTAJAS E INCONVENIENTES DEL USO DE LOS MARCOS

Desde que se incorporaron en la versión HTML 2, los marcos se han utilizado mucho por las ventajas que aportan y por
la relativa sencillez de su uso. Pero también ha sido una técnica muy criticada por los inconvenientes que muestran.

Las principales ventajas del uso los marcos son las siguientes:

- Se agilizan los tiempos de descarga de las páginas ya que sólo tiene que cargar la zona central de contenidos,
permaneciendo fijas el resto de las ventanas.

- Se ahorra en los tiempos de mantenimiento y actualización de las páginas, debido a que sólo hay que cambiar la
ventana dedicada a contenidos y no las que contienen información fija, como la zona corporativa y la zona de
navegación.

- Se puede evitar que se vea la estructura de división de la página en áreas, mostrándose como un área única.

- Estructura de código altamente compatible con los navegadores actuales.

Los inconvenientes del uso de los marcos son los siguientes:

- Puede verse reducido excesivamente el tamaño de la ventana disponible para los contenidos, cuando la pantalla
del equipo utilizado para navegar es pequeña.

- Puede darse la sensación de demasiados compartimentos.

Editorial CEP 123
Manual Introducción al lenguaje HTML

- Dificultad al imprimir lo que se muestra en pantalla, debido a que en realidad son varias páginas.

- Dificultad al ir hacia atrás en la navegación, por la misma razón del punto anterior.

- Riesgo de que en los marcos de menor tamaño salten las barras de desplazamiento porque no quepan los
contenidos.

- Riesgo de que la página parezca visualmente antigua.

En resumen, los marcos son una técnica no exenta de polémica, pero que sigue siendo muy adecuada en determinadas
páginas de contenidos.

Página con marcos con borde activado

DISEÑAR PÁGINAS CON MARCOS

Para definir documentos con marcos, HTML dispone de las etiquetas <FRAMESET> y <FRAME> y numerosos atributos
y valores asociados a ellos.

Los editores de páginas web actuales disponen de bibliotecas de plantillas de marcos que simplifican el diseño de
páginas basadas en ellos.

Cuando entramos en una página diseñada con marcos, lo que tenemos a la vista son varios documentos reunidos en
una misma ventana; esto hace que el código que define el documento cambie con respecto al de una página diseñada sin
marcos. El primer cambio que se aprecia es que no aparece la etiqueta <BODY> para definir el contenido visible del
documento. En este caso aparece la etiqueta <FRAMESET>, o conjunto de marcos, que agrupa los diferentes marcos que
componen la página. Cada uno de los marcos o frames en los que se subdivide la página se definen con la etiqueta
<FRAME>.

Etiqueta <FRAMESET>

La etiqueta <FRAMESET> hay que cerrarla con </FRAMESET>. Esta etiqueta se encarga de establecer las divisiones
que va a contener, indicando su posición y sus dimensiones. Las divisiones pueden ser en columnas verticales o en filas
horizontales. Para facilitar el control de las páginas con marcos, el código HTML permite anidar una estructura de marcos
dentro de otra; aunque en este caso, el resultado final puede dificultar la navegación por la página.

124 Editorial CEP

Tema 9. Los marcos

Los atributos de la etiqueta <FRAMESET> son los siguientes:

- ROWS=“valor/%/*”: Permite dividir la pantalla por filas, siendo el primer valor para la primera fila desde arriba y el
segundo valor para la siguiente hacia abajo. El valor puede indicar un tamaño fijo en píxeles, un %, de 0 a 100, del
ancho de la ventana total, o indicar al navegador que el marco debe ocupar todo el espacio sobrante. Esto último
se indica mediante el carácter *

- COLS=“valor/%/*”: Permite dividir la pantalla por columnas, siendo el primer valor para la primera columna desde
la izquierda y el segundo valor para la siguiente hacia la derecha. El valor puede indicar un tamaño fijo en píxeles,
un %, de 0 a 100, del alto de la ventana total, o indicar al navegador que el marco debe ocupar todo el espacio
sobrante. Esto último se indica mediante el carácter *

El código de una página divida en dos marcos horizontales que se repartiesen la pantalla en un 25% y 75% sería el
siguiente:

<HTML>

<HEAD>

<TITLE> Título de la página </TITLE>

</HEAD>

<FRAMESET ROWS=“25%, 75%”>

<FRAME SRC=“contenido marco superior”>

<FRAME SRC=“contenido marco inferior”>

</FRAMESET>

</HTML>

El código de una página divida en dos marcos verticales que se repartiesen la pantalla en un 25% y 75% sería el
siguiente:

<HTML>

<HEAD>

<TITLE> Título de la página </TITLE>

</HEAD>

<FRAMESET COLS=“25%, 75%”>

<FRAME SRC=“contenido marco izquierdo”>

<FRAME SRC=“contenido marco derecho”>

</FRAMESET>

</HTML>

Editorial CEP 125

Manual Introducción al lenguaje HTML

La etiqueta <FRAME>

Para cada una de las divisiones creadas es necesario utilizar una etiqueta <FRAME>. Esta etiqueta define las
propiedades del marco, frame o ventana que se encarga de gestionar. Los atributos principales de esta etiqueta son los
siguientes:

- NAME=“texto”. Asigna nombre a la ventana.

- SRC=“documento.html”: Indica el documento que se mostrará en la ventana.

- MARGINWIDTH=“valor”. Indica, en píxeles, el margen izquierdo y derecho de la ventana.

- MARGINHEIGHT=“valor”: Indica, en pixels, el margen superior e inferior de la ventana.

- SCROLLING=“yes/no/auto”: Indica si se activa una barra de desplazamiento en la ventana en el caso de que el

contenido de la página no quepa completo en las dimensiones de la ventana.

· Yes: Muestra siempre la barra desplazamiento de la ventana.

· No: No la muestra nunca.

· Auto: La muestra sólo si es necesario para poder ver la página completa. Este es el valor por defecto.

- NORESIZE: Indica que el usuario de la página no podrá redimensionar las ventanas de los marcos.

- FRAMEBORDER=“1/0”: Indica si el marco muestra un borde visible o no.

· 1: Si muestra un borde.

· 0: No muestra un borde.

Lo más habitual es que la estructura de marcos pase desapercibida, y por lo tanto los bordes estarán desactivados en
la mayoría de los casos.

Página con marcos sin borde

126 Editorial CEP

Tema 9. Los marcos

El destino de los contenidos mediante el atributo TARGET

Cuando la estructura de marcos se emplea para separar la página principal en un marco fijo de navegación, que contiene
los enlaces a los diferentes contenidos, y un marco principal en el que se van mostrando dichos contenidos, hay que utilizar
el atributo TARGET de la etiqueta <A> para direccionar los enlaces a un marco concreto, en este caso, al marco principal.
El código de un enlace un documento con destino el marco principal, sería el siguiente:

<A HREF=“documento.html” TARGET=“frame_principal”>

La etiqueta <NOFRAMES>

Uno de los inconvenientes de las páginas diseñadas con marcos es que o bien el navegador utilizado por el usuario no
los reconozca, o bien el propio usuario haya desactivado la navegación con marcos en las opciones de su navegador.
Cuando un usuario accede a una página con marcos en alguna de estas dos circunstancias, no verá nada en su pantalla.
Para evitar este problema se utiliza la etiqueta <NOFRAMES>, que se cierra con </NOFRAMES> y que contiene una
versión sin marcos para aquellos usuarios que su navegador no los interprete correctamente. La etiqueta <NOFRAMES> y
el contenido que define se inserta dentro del área definido por la etiqueta <FRAMESET>. Un ejemplo del código de una
página con esta opción incorporada sería el siguiente:

<HTML>

<HEAD>

<TITLE> Título de la página </TITLE>

</HEAD>

<FRAMESET ROWS=“25%, 75%”>

<FRAME SRC=“contenido marco superior”>

<FRAME SRC=“contenido marco inferior”>

Contenido para los navegadores que no reconocen marcos

</NOFRAMES>

</FRAMESET>

</HTML>

Una posible solución para no cargar la página innecesariamente consiste en sustituir, dentro de la etiqueta
<NOFRAMES>, el contenido completo alternativo por una nota de advertencia y un enlace a un documento sin marcos. El
código anterior quedaría de la siguiente manera:

Editorial CEP 127

Manual Introducción al lenguaje HTML

<HTML>

<HEAD>

<TITLE> Título de la página </TITLE>

</HEAD>

<FRAMESET ROWS=“25%, 75%”>

<FRAME SRC=“contenido marco superior”>

<FRAME SRC=“contenido marco inferior”>

Hacer clic sobre el siguiente enlace para acceder a una versión sin marcos:

<A HREF=“documento sin marcos.html”

</NOFRAMES>

</FRAMESET>

</HTML>

LOS MARCOS FLOTANTES

Un marco flotante es un marco que se puede colocar en cualquier parte de la ventana y que puede mostrar cualquier
contenido desde una página convencional hasta un contenido específico. Cualquier contenido que se pueda mostrar en un
marco convencional se puede mostrar en un marco flotante. Este tipo de marco es de incorporación más reciente, y la
etiqueta que lo define es la etiqueta <IFRAME>, que hay que cerrar con la etiqueta </IFRAME>. Los atributos principales
de esta etiqueta son los siguientes:

- ALIGN=“left/right/center/top/bottom”: Indica la alineación del marco y del texto que lo rodea.

- FRAMEBORDER=“1/0-yes/no”: Indica si el marco va a tener borde o no.

- HEIGHT=“valor”: Define la altura en pixels del marco.

- MARGINHEIGHT=“valor”: Define el valor en pixels del margen superior e inferior.

- MARGINWIDTH=“valor”. Define el valor en píxeles del margen izquierdo y derecho.

- NAME=“texto”: Indica el nombre que tendrá el marco.

- SCROLLOLING=“yes/no”: Indica si se activarán las barras de desplazamiento del marco.

- SRC=“documento”. Indica el documento que se mostrará en el marco como contenido.

- WIDTH=“valor”: Define anchura en pixels del marco.

128 Editorial CEP

Tema 9. Los marcos

Un ejemplo de código de una página con un marco flotante sería el siguiente:

<HTML>

<HEAD>

<TITLE> Título de la página </TITLE>

</HEAD>

<BODY>

<IFRAME NAME=“marco flotante” SRC=“documento.html” HEIGHT=“600” WIDTH=“600”

FRAMEBORDER=“no”>

</IFRAME>

</BODY>

</HTML>

Los marcos flotantes se utilizan con frecuencia para insertar mensajes flotando en la página.

Página con marco flotante <IFRAME>

Editorial CEP 129

Tema 9. Los marcos

LO QUE HEMOS APRENDIDO: tema 9

Æ Los marcos o frames son una técnica que permite dividir la pantalla del navegador en varias ventanas
independientes. Cada una de esas ventanas, o marcos, mostrará un documento HTML diseñado expresamente
para mostrarse en ella.
Æ Desde que se incorporaron en la versión HTML 2, los marcos se han utilizado mucho por las ventajas que aportan
y por la relativa sencillez de su uso. Pero también ha sido una técnica muy criticada por los inconvenientes que
muestran.
Æ Las principales ventajas del uso los marcos son las siguientes: se agilizan los tiempos de descarga de las páginas
y se ahorra en los tiempos de mantenimiento y actualización de las páginas.
Æ Los marcos son una técnica no exenta de polémica, pero que sigue siendo muy adecuada en determinadas páginas
de contenidos.
Æ Para definir documentos con marcos, HTML dispone de las etiquetas <FRAMESET> y <FRAME> y numerosos
atributos y valores asociados a ellos.
Æ El primer cambio que se aprecia en una página diseñada con marcos es que no aparece la etiqueta <BODY> para
definir el contenido visible del documento. En este caso aparece la etiqueta <FRAMESET>.
Æ La etiqueta <FRAMESET> hay que cerrarla con </FRAMESET>. Esta etiqueta se encarga de establecer las
divisiones que va a contener, indicando su posición y sus dimensiones.
Æ Para cada una de las divisiones creadas es necesario utilizar una etiqueta <FRAME>. Esta etiqueta define las
propiedades del marco, frame o ventana que se encarga de gestionar.
Æ Hay que utilizar el atributo TARGET de la etiqueta <A> para direccionar los enlaces a un marco concreto, en este
caso, al marco principal.
Æ Uno de los inconvenientes de las páginas diseñadas con marcos es que o bien el navegador utilizado por el usuario
no los reconozca, o bien el propio usuario haya desactivado la navegación con marcos en las opciones de su
navegador.
Æ Para evitar este problema se utiliza la etiqueta <NOFRAMES>, que se cierra con </NOFRAMES> y que contiene
una versión sin marcos para aquellos usuarios que su navegador no los interprete correctamente.
Æ La etiqueta <NOFRAMES> y el contenido que define se inserta dentro del área definido por la etiqueta
<FRAMESET>.
Æ Una posible solución para no cargar la página innecesariamente consiste en sustituir, dentro de la etiqueta
<NOFRAMES>, el contenido completo alternativo por una nota de advertencia y un enlace a un documento sin
marcos.
Æ Un marco flotante es un marco que se puede colocar en cualquier parte de la ventana y que puede mostrar
cualquier contenido desde una página convencional hasta un contenido específico.
Æ Este tipo de marco es de incorporación más reciente, y la etiqueta que lo define es la etiqueta <IFRAME>, que hay
que cerrar con la etiqueta </IFRAME>.
Æ Los marcos flotantes se utilizan con frecuencia en publicidad, para insertar mensajes flotando sobre la página.

Editorial CEP 131

Manual Introducción al lenguaje HTML

132 Editorial CEP

TEMA 10
Las hojas de estilo CSS
¿Qué son las hojas de estilo?
Tipos de hojas de estilo
Etiquetas principales de las hojas de estilo
Propiedades controlados por las hojas de estilo

OBJETIVOS:
Entender el concepto de hoja de estilo.
Diferenciar los tipos de hojas de estilo.
Conocer las diferentes etiquetas y atributos de las hojas de estilo.
Conocer las diferentes propiedades de estilo que definen las hojas CSS.
Tema 10. Las hojas de estilo CSS

¿QUÉ SON LAS HOJAS DE ESTILO?

Las hojas de estilo permiten aplicar estilo a los contenidos de una manera más efectiva que mediante la aplicación de
estilos físicos y lógicos con etiquetas nativas HTML. Las hojas de estilo se incorporan a HTML, con sus primeras
recomendaciones CSS1, en el año 1996. Con ellas se pretendía hacer realidad la separación entre el contenido y el aspecto
del mismo, de manera que el aspecto que adquiere un contenido no dependa de cómo interprete el navegador las
instrucciones del código para visualizar la página de una manera o de otra. Las hojas de estilo tienen otra ventaja importante
a la hora de facilitar los cambios y actualizaciones en el aspecto de los contenidos. Cuando se crea una hoja de estilo esta
queda vinculada a los contenidos a los que se aplica; de esta manera, con un simple cambio en la hoja de estilo, los
contenidos vinculados a ella quedan automáticamente actualizados. Una hoja de estilo se puede aplicar a un bloque de
texto, a un documento entero o a un grupo de documentos. Al vincular una hoja de estilo a un grupo de documentos, se
pueden hacer cambios directamente a todas las páginas que forman un sitio, con el ahorro de tiempo y aumento de calidad
en el trabajo que esto supone.

Una hoja de estilo puede residir en el propio documento o estar contenida en un documento especial, separado del
documento al que afecta y vinculada con él.

Las hojas de estilo abarcan aspectos muy diversos de los contenidos, y no sólo afectan al texto. El concepto de hoja de
estilo CSS para la Web es más amplio que el que conocemos para la maquetación de los documentos gráficos impresos.
Las hojas de estilo CSS admiten propiedades que afectan al texto, a las imágenes, a los fondos de los documentos, a las
tablas, etc.

TIPOS DE HOJAS DE ESTILO

Las hojas de estilo, según la manera de aplicarse, se pueden dividir en dos grupos:

- Hoja de estilo interna o residente: Sólo afecta al documento en el que se crea. Se define con la etiqueta <STYLE>,
que se inserta en la cabecera del documento, entre las etiquetas <HEAD> y </HEAD>.

- Hoja de estilo externa: Puede afectar a cualquier documento que se vincule con ella. Contiene toda la información
en un documento independiente del documento HTML. Se almacena con extensión .css.

Las hojas de estilo, según al contenido al que afectan, se pueden dividir en tres tipos:

- De clase: Afecta al bloque de texto sobre el que se aplique. Por tanto puede modificar cualquier contenido
simplemente con aplicar la hoja a ese contenido concreto. Por ejemplo, se puede aplicar un estilo a un párrafo
determinado dentro de un documento, y no a los demás párrafos del mismo.

- De etiqueta: Se aplica a una etiqueta determinada y afectará a cualquier contenido definido por la etiqueta
vinculada. Por ejemplo, se puede aplicar un estilo a todos los textos que estén definidos con la etiqueta <H1> en
todo el documento.

- De identificador Id: Mediante un identificador se pueden marcar los textos a los que afectará el estilo.

ETIQUETAS PRINCIPALES DE LAS HOJAS DE ESTILO

La forma de aplicar estilo a los documentos es diferente dependiendo de que se trate de una hoja de estilo interna
residente, o una hoja de estilo externa vinculada.

Editorial CEP 135

Manual Introducción al lenguaje HTML

Hojas de estilo internas

La principal etiqueta que utilizan las hojas de estilo internas es la etiqueta <STYLE> que se debe cerrar con </STYLE>.
Esta etiqueta indica al navegador el estilo que debe aplicar a cada contenido. La etiqueta <STYLE> se escribe en la
cabecera del documento, entre las etiquetas <HEAD> de apertura y cierre.

Esta etiqueta dispone de un atributo principal que es TYPE.

- TYPE=“text/css”: Define el lenguaje de hojas de estilo a utilizar en el documento.

A continuación del atributo, y por cada una de los estilos que se modifican, se define la propiedad y su valor. Algunos
ejemplos, para la modificación de los estilos que afectan al tamaño y tipo de letra de un bloque de texto, serían los
siguientes:

font-size: 18px;

font-family: Georgia, Times New Roman, Times;

El código completo que modificaría el tamaño y el tipo de letra con una hoja de clase interna, denominada Tit1, sería
el siguiente:

<!— .Tit1 {

font-size: 18px;

font-family: Georgia, “Times New Roman”, Times, serif;

} —>

</style>

Cuando se trabaja con hojas de estilo internas, es necesario crear una hoja en cada documento, ya que el código
que define el estilo reside en la cabecera del documento y sólo afecta a ese documento.

Página con hoja de estilo interna

136 Editorial CEP

Tema 10. Las hojas de estilo CSS

Hojas de estilo externas

Por cuestiones de coherencia de estilo es interesante que una misma hoja de estilo defina el aspecto de los contenidos
de varios documentos HTML; para ello hay que definir la hoja de estilo como externa, creándose un documento con
extensión .css al que se vincularán todos los documentos .html que deban mostrar el mismo estilo.

Los documentos afectados por la hoja de estilo se vincularán a esta mediante la etiqueta <LINK>. El código de una hoja
de estilo externa, denominada Titulares y vinculada a un documento HTML, se escribiría en la cabecera del documento y
sería el siguiente:

<link href=”file:Titulares.css” rel=”stylesheet” type=”text/css” />

Si en lugar de vincular una hoja de estilo, se importa dicha hoja, esta aparecerá definida como hoja de estilo interna y
se incluirá automáticamente en la cabecera del documento con el código indicado en el apartado anterior.

Página con hoja de estilo externa

PROPIEDADES CONTROLADOS POR LAS HOJAS DE ESTILO

Las hojas de estilo permiten definir una gran cantidad de propiedades que afectan a la apariencia de los contenidos.
Estás propiedades se pueden dividir en varios grupos:

- Propiedades tipográficas: Afectan a los atributos tipográficos principales.

- Propiedades del fondo: Afectan al aspecto de los fondos, color imagen como mosaico, etc.

- Propiedades de los bloques de texto: Afectan a los atributos tipográficos de los bloques de texto.

- Propiedades de los contenedores: Afectan a las cajas que contienen texto e imágenes.

- Propiedades de los bordes: Afectan a los bordes de las cajas contenedoras.

- Propiedades de las listas: Afectan al aspecto de las listas.

- Posición de los contenedores flotantes: Afectan a la posición de las capas dinámicas.

- Propiedades complementarias: Afectan a algunos aspectos complementarios, como los cursores.

Editorial CEP 137

Manual Introducción al lenguaje HTML

A la hora de crear las hojas de estilo es conveniente seguir un criterio lógico para facilitar su posterior localización e
identificación para hacer las modificaciones que puedan surgir. Así sería conveniente dividir las hojas de estilos en grupos
comunes de propiedades como el color, los tipos de letras, los formatos de texto, etc. De esta manera se facilitará cualquier
revisión posterior.

138 Editorial CEP

Tema 10. Las hojas de estilo CSS

LO QUE HEMOS APRENDIDO: tema 10

Æ Las hojas de estilo permiten aplicar estilo a los contenidos de una manera más efectiva que mediante la aplicación
de estilos físicos y lógicos con etiquetas nativas HTML. Las hojas de estilo se incorporan a HTML, con sus primeras
recomendaciones CSS1, en el año 1996.
Æ Cuando se crea una hoja de estilo esta queda vinculada a los contenidos a los que se aplica; de esta manera, con
un simple cambio en la hoja de estilo, los contenidos vinculados a ella quedan automáticamente actualizados.
Æ Una hoja de estilo se puede aplicar a un bloque de texto, a un documento entero o a un grupo de documentos. Al
vincular una hoja de estilo a un grupo de documentos, se pueden hacer cambios directamente a todas las páginas
que forman un sitio, con el ahorro de tiempo y aumento de calidad que esto supone.
Æ Una hoja de estilo puede residir en el propio documento o estar contenida en un documento especial, separado del
documento al que afecta y vinculada con él.
Æ Las hojas de estilo CSS admiten propiedades que afectan al texto, a las imágenes, a los fondos de los documentos,
a las tablas, etc.
Æ Las hojas de estilo, según la manera de aplicarse, se pueden dividir en dos grupos: hojas de estilo internas o
residentes y hojas de estilo externas.
Æ Las hojas de estilo, según al contenido al que afectan, se pueden dividir en tres tipos: de clase, de etiqueta y de
identificador Id.
Æ La principal etiqueta que utilizan las hojas de estilo internas es la etiqueta <STYLE>, que se debe cerrar con
</STYLE>.
Æ La etiqueta <STYLE> se escribe en la cabecera del documento, entre las etiquetas <HEAD> de apertura y cierre.
Esta etiqueta dispone de un atributo principal que es TYPE.
Æ Cuando se trabaja con hojas de estilo internas, es necesario crear una hoja en cada documento, ya que el código
que define el estilo reside en la cabecera del documento y sólo afecta a ese documento.
Æ Por cuestiones de coherencia de estilo es interesante que una misma hoja de estilo defina el aspecto de los
contenidos de varios documentos HTML; para ello hay que definir la hoja de estilo como externa, creándose un
documento con extensión .css al que se vincularán todos los documentos .html que deban mostrar el mismo estilo.
Æ Los documentos afectados por la hoja de estilo se vincularán a esta mediante la etiqueta <LINK>.
Æ Si en lugar de vincular una hoja de estilo, se importa dicha hoja, esta aparecerá definida como hoja de estilo interna
y se incluirá automáticamente en la cabecera del documento.
Æ Las hojas de estilo permiten definir una gran cantidad de propiedades que afectan a la apariencia de los contenidos.
Estas propiedades se pueden dividir en varios grupos: Propiedades tipográficas. Propiedades del fondo.
Propiedades de los bloques de texto. Propiedades de los contenedores. Propiedades de los bordes. Propiedades
de las listas. Posición de los contenedores flotantes. Propiedades complementarias.
Æ A la hora de crear las hojas de estilo es conveniente seguir un criterio lógico para facilitar su posterior localización
e identificación para hacer las modificaciones que puedan surgir.
Æ Sería conveniente dividir las hojas de estilos en grupos comunes de propiedades como el color, los tipos de letras,
los formatos de texto, etc. De esta manera se facilitará cualquier revisión posterior.

Editorial CEP 139

Manual Introducción al lenguaje HTML

140 Editorial CEP

TEMA 11
Otros contenidos multimedia
¿Qué son los plug-ins?
Añadir contenedores. La etiqueta >DIV>
Añadir texto en movimiento. La etiqueta <MARQUEE>
Añadir efecto de sonido. La etiqueta <BGSOUND>
Añadir applets de Java. La etiqueta <APPLET>
Añadir plug-ins externos. La etiqueta <EMBED>
Añadir objetos varios. La etiqueta <OBJECT>

OBJETIVOS:
Entender el concepto de plug-in o extensión.
Conocer las diferentes maneras de insertar contenidos multimedia en las páginas HTML.
Conocer las etiquetas que insertan objetos y contenidos multimedia.
Tema 11. Otros contenidos multimedia

¿QUÉ SON LOS PLUG-INS?

Los navegadores actuales no son capaces de mostrar, de forma nativa, toda la variedad de contenidos multimedia que
se pueden incluir en una página Web. Para poder mostrarlos necesitan de unos complementos externos denominados
extensiones o plug-ins. Estos complementos enriquecen la capacidad de mostrar todo tipo de contenidos en la Web. Los
contenidos se pueden mostrar de dos maneras, o bien insertados directamente, en el cuerpo del documento, mediante una
etiqueta específica que reconoce el formato en el que está guardado el contenido; o mediante un enlace que llama a un
contenido que a su vez requiere de un plug-in o un programa externo que lo interprete.

Existen numerosos tipos de plug-ins que permiten colocar, en una página Web, animaciones, sonidos, vídeos, realidad
virtual, rutinas de Java, etc.

Plugins Adobe Reader, Adobe Flash Player, Apple QuickTime y Real Player

AÑADIR CONTENEDORES. LA ETIQUETA <DIV>

Para estructurar mejor los contenidos y facilitar la división de un documento en secciones o partes, se recomienda utilizar
la etiqueta <DIV>. Esta etiqueta es muy práctica para acotar contenidos a los que se les va a aplicar un estilo común, por
ejemplo una alineación. En el tema 10 ya se ha hablado del uso de esta etiqueta muy vinculada a la aplicación de las hojas
de estilo CSS.

Como contenedor básico dispone de un atributo principal.

- ALIGN: Define la alineación del bloque de contenido definido entre <DIV> y </DIV>.

· Left: Define el contenido como alineado a la izquierda.

· Center: Define el contenido como alineado al centro.

· Right. Define el contenido como alineado a la derecha.

Alineaciones con etiqueta <DIV>

Editorial CEP 143

Manual Introducción al lenguaje HTML

AÑADIR TEXTO EN MOVIMIENTO. LA ETIQUETA <MARQUEE>

Se puede conseguir que un texto se desplace a lo largo de la pantalla como si fuese un cartel publicitario. Para aplicar
este efecto se utiliza la etiqueta <MARQUEE>. Esta etiqueta hay que cerrarla con la etiqueta </MARQUEE>, y cualquier
contenido colocado entre las dos etiquetas se desplazará por la pantalla según los atributos que tenga definidos la etiqueta.

Los principales atributos de esta etiqueta son los siguientes:

- ALIGN: Define la alineación en vertical del texto.

· Top: Parte superior.

· Middle: Centro.

· Bottom: Parte inferior.

- BEHAVIOR: Define el movimiento aplicado al letrero.

· Scroll: Cruza la ventana.

· Slide: Cruza la ventana y se detiene.

· Alternate: Cruza la ventana y vuelve hacia atrás.

- BGCOLOR: Define el color del fondo.

- DIRECTION: Define la dirección que lleva el texto.

· Left: Hacia la izquierda.

· Right: Hacia la derecha.

- HEIGHT: Define la altura del cartel en movimiento.

· Valor: En píxeles.

· %: Porcentaje sobre la altura de la pantalla.

- HSPACE: Define los márgenes verticales.

- LOOP: Indica el número de veces que se repetirá el movimiento.

· Infinite: Indica que el movimiento se repetirá sin parar.

· Valor: Indica el número de veces que se repetirá.

- SCROLLAMOUNT: Indica el número de píxeles que desplaza el texto en cada salto de su movimiento. A mayor
valor, mayor velocidad.

144 Editorial CEP

Tema 11. Otros contenidos multimedia

Texto en movimiento con etiqueta <MARQUEE>

- SCROLLDELAY: Indica el número de mili segundos entre salto y salto del movimiento.

- VSPACE: Define los márgenes horizontales.

- WIDTH: Define la anchura del cartel en movimiento.

· Valor: En píxeles.

· %: Porcentaje sobre la altura de la pantalla.

La etiqueta <MARQUEE> no es totalmente compatible ya que no la reconocen todos los navegadores.

AÑADIR EFECTO DE SONIDO. LA ETIQUETA <BGSOUND>

Con la etiqueta <BGSOUND> se puede añadir un sonido que se reproducirá al navegar por la página Si la etiqueta se
coloca en la cabecera del documento el sonido se reproducirá al cargarse la página.

Los principales atributos de esta etiqueta son los siguientes:

- SRC=“sonido”: Define el sonido que se reproducirá.

- LOOP=“valor/infinite”. Indica el número de veces que se reproducirá o si lo hará constantemente.

Editorial CEP 145

Manual Introducción al lenguaje HTML

Sonido insertado con la etiqueta <BGSOUND>

AÑADIR APPLETS DE JAVA. LA ETIQUETA <APPLET>

Un applet de Java es una aplicación de tamaño reducido, escrita en lenguaje Java y que una vez insertada en el código
de una página Web, permite que el navegador ejecute las instrucciones que contiene. Los applets de Java se utilizan para
incorporar efectos visuales avanzados, juegos, personalización de cursores y barras de desplazamiento, validación de
formularios, etc. Para que las instrucciones contenidas en un applet sean ejecutadas es necesario que el usuario tenga
instalado un software denominado JVM (Java Virtual Machine), que interprete el código Java del applet. Este software no
está siempre instalado y activado, y necesita acceder al disco duro del ordenador del usuario, lo que puede interpretarse
como una intrusión.

Para insertar applets de Java hay que utilizar la etiqueta <APPLET>. Hay que cerrarla, con la etiqueta </APPLET>, y
sus principales atributos son los siguientes:

- ALIGN: Define la alineación horizontal.

- ALT: Define un texto alternativo para el applet, como en las imágenes.

- CODE: Define la clase Java que contiene el applet.

- CODEBASE: Define la Url del archivo Java y todo los recursos necesarios para su ejecución.

- HEIGHT: Define la dimensión vertical en píxeles del área que mostrará el applet.

- HSPACE: Define el margen horizontal en píxeles.

- NAME: Define el nombre del applet.

- VSPACE: Define el margen vertical en píxeles.

- WIDTH: Define la dimensión horizontal en píxeles del área que mostrará el applet.

Se recomienda sustituir esta etiqueta por la etiqueta <OBJECT>.

146 Editorial CEP
Tema 11. Otros contenidos multimedia

AÑADIR PLUGINS EXTERNOS. LA ETIQUETA <EMBED>

Esta etiqueta se utiliza para insertar en las páginas Web plug-ins necesarios para que los navegadores interpreten
algunos contenidos no reconocidos directamente. Por ejemplo, se utiliza para insertar vídeo en formato .avi, o animaciones
en formato .swf de Adobe Flash.

La etiqueta <EMBED> hay que cerrarla con </EMBED>, y los atributos más utilizados son los siguientes:

- HEIGHT: Define la altura en píxeles de la ventana que mostrará el contenido.

- NAME: Define el nombre del objeto contenido.

- PALETTE: Define los colores de primer plano y fondo.

- SRC: Define la dirección del objeto contenido.

- UNITS: Define las unidades empleadas para las dimensiones de la ventana.

- WIDTH: Define la anchura en píxeles de la venta que mostrará el contenido.

Vídeo insertado con la etiqueta <EMBED>

AÑADIR OBJETOS VARIOS. LA ETIQUETA <OBJECT>

La etiqueta <OBJECT> se incorpora al código HTML para sustituir y reunir, en una sola directiva, todas aquellas
utilizadas para insertar contenidos y objetos multimedia. Es tal la variedad de contenidos y la cantidad de directivas y
extensiones desarrolladas para cada uno de ellos, que se hacía necesario tratar de reunir en una sola todos los

Editorial CEP 147

Manual Introducción al lenguaje HTML

requerimientos actuales y futuros, con el fin de facilitar la programación de las páginas Web con mucha carga de contenidos
multimedia. Esta etiqueta hay que cerrarla con la etiqueta <OBJECT> y sus atributos principales son los siguientes:

- ALIGN: Define la alineación del objeto insertado.

- ARCHIVE: Define la Url del archivo que contiene los recursos que necesita el objeto.

- BORDER: Define la anchura en píxeles del borde del objeto.

- CLASSID: Define la Url del objeto.

- CODEBASE: Define la Url en la que están almacenadas las direcciones de archive, classid y data.

- DATA: Define la Url con los datos del objeto.

- HEIGHT: Define la altura en píxeles o % del objeto.

- HSPACE: Define los márgenes horizontales del objeto.

- ID: Define el número del objeto.

- STANDBY: Define el texto que verá el usuario mientras espera que se descargue el objeto.

- TABINDEX: Define el número de orden que ocupa el objeto en el total de los contenidos en el documento.

- USERMAP: Define un mapa de imagen asociado al objeto.

- VSPACE: Define los márgenes verticales del objeto.

- WIDTH: Define la anchura en píxeles o % del objeto.

Animación insertada con la etiqueta <EMBED>

148 Editorial CEP
Tema 11. Otros contenidos multimedia

LO QUE HEMOS APRENDIDO: tema 11

Æ Los navegadores actuales no son capaces de mostrar, de forma nativa, toda la variedad de contenidos multimedia
que se pueden incluir en una página Web.
Æ Para poder mostrarlos necesitan de unos complementos externos denominados extensiones o plug-ins.
Æ Los contenidos se pueden mostrar de dos maneras, o bien insertados directamente, en el cuerpo del documento,
mediante una etiqueta específica que reconoce el formato en el que está guardado el contenido; o mediante un
enlace que llama a un contenido que a su vez requiere de un plug-in o un programa externo que lo interprete.
Æ Existen numerosos tipos de plug-ins que permiten colocar, en una página Web, animaciones, sonidos, vídeos,
realidad virtual, rutinas de Java, etc.
Æ Para estructurar mejor los contenidos y facilitar la división de un documento en secciones o partes, se recomienda
utilizar la etiqueta <DIV>.
Æ La etiqueta <DIV> es muy práctica para acotar contenidos a los que se les va a aplicar un estilo común, por ejemplo
una alineación.
Æ Se puede conseguir que un texto se desplace a lo largo de la pantalla como si fuese un cartel publicitario. Para
aplicar este efecto se utiliza la etiqueta <MARQUEE>.
Æ Con la etiqueta <BGSOUND> se puede añadir un sonido que se reproducirá al navegar por la página Si la etiqueta
se coloca en la cabecera del documento el sonido se reproducirá al cargarse la página.
Æ Un applet de Java es una aplicación de tamaño reducido, escrita en lenguaje Java y que una vez insertada en el
código de una página Web, permite que el navegador ejecute las instrucciones que contiene.
Æ Los applets de Java se utilizan para incorporar efectos visuales avanzados, juegos, personalización de cursores y
barras de desplazamiento, validación de formularios, etc.
Æ Para insertar applets de Java hay que utilizar la etiqueta <APPLET>.
Æ La etiqueta <EMBED> se utiliza para insertar en las páginas Web plug-ins necesarios para que los navegadores
interpreten algunos contenidos no reconocidos directamente. Por ejemplo, se utiliza para insertar vídeo en formato
.avi, o animaciones en formato .swf de Adobe Flash.
Æ La etiqueta <OBJECT> se incorpora al código HTML para sustituir y reunir, en una sola directiva, todas aquellas
utilizadas para insertar contenidos y objetos multimedia.

Editorial CEP 149

Manual Introducción al lenguaje HTML

150 Editorial CEP

TEMA 12
Novedades HTML 5
Intención general de la versión HTML 5
Nuevas etiquetas para organizar el texto
Nuevas etiquetas para mejorar la estructura del documento
Nuevas etiquetas de ayuda al navegador
Nuevas etiquetas de mejora de la interactividad

OBJETIVOS:
Conocer la filosofía que inspira la nueva versión HTML 5.
Conocer las nuevas tendencias en la Web.
Disponer de información sobre las nuevas etiquetas.
Conocer la sintaxis y el funcionamiento teórico de las nuevas etiquetas.
Tema 12. Novedades HTML 5

INTENCIÓN GENERAL DE LA VERSIÓN HTML 5

La versión HTML 5 sigue estando en desarrollo y la gran mayoría de las versiones actuales de los navegadores no la
han asumido aún, aunque algunos si lo han hecho, por lo que es difícil poder comprobar su funcionamiento y efectividad a
fecha de hoy. Lo que sí está claro es que esta nueva versión está desarrollada con un enfoque que pretende aprovechar al
máximo el grado de desarrollo y madurez que ha alcanzado la Web actual. Con esta versión, el organismo regulador W3C
ha pretendido dotar a las páginas de una mayor accesibilidad e incorporar una estructura semántica que facilite una mejor
interpretación de las partes que definen un documento en función de su significado. Según el consorcio W3C la Web
semántica es:

“La Web Semántica es una Web extendida, dotada de mayor significado en la que cualquier usuario en Internet podrá
encontrar respuestas a sus preguntas de forma más rápida y sencilla gracias a una información mejor definida. Al dotar a la
Web de más significado y, por lo tanto, de más semántica, se pueden obtener soluciones a problemas habituales en la
búsqueda de información gracias a la utilización de una infraestructura común, mediante la cual, es posible compartir,
procesar y transferir información de forma sencilla. Esta Web extendida y basada en el significado, se apoya en lenguajes
universales que resuelven los problemas ocasionados por una Web carente de semántica en la que, en ocasiones, el acceso
a la información se convierte en una tarea difícil y frustrante.” (http://www.w3c.es/divulgacion/guiasbreves/websemantica).

En resumen, la nueva tendencia de dotar a la Web de semántica, va dirigida a conseguir que los navegadores puedan
“comprender” mejor los contenidos y facilitar así la búsqueda de información con más precisión y rapidez. Una parte
importante de las nuevas etiquetas se incorporan con esa intención.

La Web semántica en W3C

NUEVAS ETIQUETAS PARA ORGNIZAR EL TEXTO

El grupo de etiquetas principales dedicadas a la organización del texto en función de lo que significa, por el lugar que
ocupa en el documento, son las siguientes:

- <ARTICLE>: Representa un contenido independiente en un documento, como las entradas de un blog.

- <FOOTER>: Representa el pie de una sección con información acerca de la página, como el autor o la fecha.

- <HEADER>: Representa la cabecera de una sección, cómo un titular de un artículo.

- <NAV>: Representa una sección dedicada a la navegación dentro del sitio, como la barra de navegación.

Editorial CEP 153

Manual Introducción al lenguaje HTML

- <SECTION>: Representa una sección dentro de un documento, como un capítulo de un libro.

NUEVAS ETIQUETAS PARA MEJORAR LA ESTRUCTURA DEL DOCUMENTO

Las siguientes etiquetas están pensadas para facilitar una comprensión mayor de la estructura del documento:

- <ASIDE>: Representa un contenido poco relacionado con el resto de la página, como una nota o una explicación
al margen.

- <DIALOG>: Se utiliza para escribir conversaciones, como en un chat. Se completa con dos etiquetas
complementarias, una para identificar al autor, <DT> y otra para identificar la conversación, <DD>.

- <FIGURE>: Se utiliza para asociar una imagen o un contenido multimedia a un texto. Requiere de dos etiquetas
vinculadas, una para la imagen, <IMG> y otra para el texto, <LEGEND>.

- <VIDEO>: Se utiliza para la reproducción de archivos de vídeo, independientemente del formato que tengan. Esta
etiqueta dispone del atributo SRC que define la dirección de almacenamiento del vídeo.

- <AUDIO>: Se utiliza para la reproducción de archivos de audio, independientemente del formato que tengan. Esta
etiqueta se complementa con los atributos SRC, -define la dirección de almacenamiento del archivo de audio-,
AUTOPLAY, -define si la reproducción es automática-, y LOOP, -define el número de veces que se repetirá el
sonido.

NUEVAS ETIQUETAS DE AYUDA AL NAVEGADOR

La función de las siguientes etiquetas es facilitar la comprensión por parte del navegador de ciertos contenidos
habituales en las páginas:

- <MARK>: Indica texto resaltado, por ejemplo para destacar una búsqueda.

- <METER>: Representa una medida, expresada con un valor numérico asociado a una unidad.

- <TIME>: Representa una fecha o una hora reconocible por el navegador.

Los principales navegadores soportan HTML 5 en sus nuevas versiones

NUEVAS ETIQUETAS DE MEJORA DE LA INTERACTIVIDAD

El siguiente grupo de etiquetas está dirigido a conseguir mejoras en la interactividad de las páginas:

- <DATAGRID>: Representa datos de manera interactiva de actualización automática.

- <DETAILS>: Representa un bloque de información adicional, como una ventana emergente.

- <MENU>: Define un menú con sus opciones.

- <PROGRESS>: Indica el estado de una tarea, como una barra de progreso personalizada.
154 Editorial CEP
Tema 12. Novedades HTML 5

LO QUE HEMOS APRENDIDO: tema 12

Æ La versión HTML 5 sigue estando en desarrollo y la gran mayoría de las versiones actuales de los navegadores no
la han asumido aún, por lo que es difícil poder comprobar su funcionamiento y efectividad a fecha de hoy.
Æ Con esta versión, el organismo regulador W3C ha pretendido dotar a las páginas de una mayor accesibilidad e
incorporar una estructura semántica que facilite una mejor interpretación de las partes que definen un documento
en función de su significado.
Æ La Web Semántica es una Web extendida, dotada de mayor significado en la que cualquier usuario en Internet
podrá encontrar respuestas a sus preguntas de forma más rápida y sencilla gracias a una información mejor
definida.
Æ La nueva tendencia, de dotar a la Web de semántica, va dirigida a conseguir que los navegadores puedan
"comprender" mejor los contenidos y facilitar así la búsqueda de información con más precisión y rapidez.
Æ Hay un grupo de etiquetas dedicadas a la organización del texto en función de lo que significa, por el lugar que
ocupa en el documento.
Æ Existe otro grupo de etiquetas que están pensadas para facilitar una comprensión mayor de la estructura del
documento.
Æ Hay otro grupo de etiquetas, cuya función es facilitar la comprensión, por parte del navegador, de ciertos contenidos
habituales en las páginas.
Æ Por último hay un grupo de etiquetas dirigido a conseguir mejoras en la interactividad de las páginas.

Editorial CEP 155

Manual Introducción al lenguaje HTML

156 Editorial CEP

TEMA 13
Pasar de HTML a Adove Dreamweaver
Diseño frente a programación de páginas web
¿Por qué emplear un programa de edición de contenidos para la Web?
¿Cómo utiliza el código HTML Adobe Dreamweaver?

OBJETIVOS:
Conocer la evolución del diseño y programación de páginas Web.
Entender la necesidad de ayudarse de un editor de páginas Web.
Conocer la oferta actual de editores de contenidos web.
Entender cómo utiliza HTML el programa Adobe Dreamweaver.
Tema 13. Pasar de HTML a Adobe Dreamweaver

DISEÑO FRENTE A PROGRAMACIÓN DE PÁGINAS WEB

Las primeras páginas Web estaban creadas por programadores, directamente escribiendo el código HTML. Con el paso
del tiempo, y siguiendo una evolución en paralelo a la que ha tenido Internet, se fueron incorporando, poco a poco,
diseñadores gráficos que aportaba un aspecto más visual y comunicativo a las páginas. Este proceso de incorporación de
los diseñadores al proceso de desarrollo de páginas Web, ha sido posible porque a la vez se han ido desarrollando
programas del tipo WYSIWYG, -lo que ves es lo que obtienes-, frente a los editores de sólo código disponibles en un
principio.

Las primeras páginas Web tenían un aspecto muy duro, eran como documentos de texto con alguna palabra subrayada
que indicaba un enlace. Hoy en día las páginas Web son documentos muy visuales, muy accesibles, muy interactivos, con
mucha variedad y riqueza de contenidos multimedia de todo tipo y de rápida descarga. Esto ha sido posible gracias al
trabajo combinado de programadores y diseñadores, ayudados por las herramientas de desarrollo y optimización de
contenidos que se han puesto a su disposición durante estos años y a la mejora de la velocidad de las conexiones a
Internet.

Actualmente, la dialéctica diseño-programación, ya no existe cómo en los primeros momentos, ahora no se discute que
el proyecto de diseño de un sitio Web requiere de un equipo multidisciplinar, en el que conviven programadores y
diseñadores además de otros muchos especialistas en temas muy diversos.

¿POR QUÉ UTILIZAR UN PROGRAMA DE EDICIÓN DE CONTENIDOS PARA LA WEB?

Una vez incorporados los diseñadores al proceso de desarrollo de páginas Web, se ha ido haciendo cada vez más
necesario disponer de programas de edición que facilitasen el trabajo a aquellas profesionales que no eran expertos en
programación.

Dreamweaver, Adobe GoLive, HTML-kit, Kompozer, TsWebEditor, Ñandú, Editplus, Arachnophilia, HTMLed pro,
CoffeeCup Free y Frontpage son algunos de esos programas que facilitan el trabajo de edición de páginas Web.

Estos programas permiten crear documentos HTML sin ser programador y sin tener grandes conocimientos de código, y
han supuesto un gran avance en el desarrollo actual de la Web. No obstante es muy útil conocer las bases del código HTML
para entender mejor como trabajan estos programas, incluso a pesar de la facilidad de uso que tienen a través de sus
interfaces de usuario, hay casos en los que se accede más rápidamente a la estructura del documento directamente desde
el código, que todos ellos permiten de una manera rápida y sencilla.

Editores de páginas Web: Adobe Dreamweaver, Kompozer, HTMLkit y Adobe GoLive

¿CÓMO UTILIZA EL CÓDIGO HTML ADOBE DREAMWEAVER?

Sin duda, el programa de edición de contenidos para la Web más utilizado profesionalmente es Adobe Dreamweaver.
Este programa lo presentó públicamente la casa Macromedia en el año 1.997 y fue desarrollando, con gran éxito, sucesivas
versiones hasta la versión 8 en el año 2.005. Ese mismo año, la casa Adobe hizo pública la adquisición de Macromedia.

Editorial CEP 159

Manual Introducción al lenguaje HTML

En esas fechas Adobe pone en el mercado la versión 9 denominada CS; y la sigue desarrollando hasta la actualidad en que
tiene recién publicada la última versión CS5 en Mayo de 2.010.

El éxito de Dreamweaver se debe en gran parte a su interface y a que ha dado respuesta a las necesidades de los
programadores y a las de los diseñadores. En las últimas versiones ha incorporado prestaciones para la creación de
páginas Web de última generación de contenido dinámico con programación con acceso a bases de datos, comercio
electrónico, etc.

Otra de las razones del éxito de Dreamweaver se basa en su forma de trabajar el código HTML. Dreamweaver es un
programa denominado de Round Trip HTML, es decir de código HTML de ida y vuelta. Esto significa que, con Dreamweaver
se puede trabajar en modo gráfico mediante menús y paletas o directamente en código HTML. El programa muestra en dos
ventanas independientes el aspecto real de la página y el código HTML que la soporta, de manera que se pueden insertar
contenidos o hacer modificaciones tanto desde el código como desde la ventana de diseño. Tanto en un caso, como en otro,
automáticamente los cambios se actualizan en las dos ventanas; es decir, cualquier cambio en la ventana de código tiene
repercusión en la ventana de diseño y viceversa. Es una manera de trabajar que potencia los dos aspectos por igual y
permite obtener resultados muy satisfactorios tanto a diseñadores como a programadores.

Ventana doble de trabajo de Adobe Dreamweaver, con vista código y vista diseño

160 Editorial CEP

Tema 13. Pasar de HTML a Adobe Dreamweaver

LO QUE HEMOS APRENDIDO: tema 13

Æ Las primeras páginas Web estaban creadas por programadores, directamente escribiendo el código HTML.
Æ Con el paso del tiempo, y siguiendo una evolución en paralelo a la que ha tenido Internet, se fueron incorporando,
poco a poco, diseñadores gráficos que aportaba un aspecto más visual y comunicativo a las páginas.
Æ Las primeras páginas Web tenían un aspecto muy duro, eran como documentos de texto con alguna palabra
subrayada que indicaba un enlace.
Æ Hoy en día las páginas Web son documentos muy visuales, muy accesibles, muy interactivos, con mucha variedad
y riqueza de contenidos multimedia de todo tipo y de rápida descarga.
Æ Una vez incorporados los diseñadores al proceso de desarrollo de páginas Web, se ha ido haciendo cada vez más
necesario disponer de programas de edición que facilitasen el trabajo a aquellas profesionales que eran expertos
en programación.
Æ Dreamweaver, Adobe GoLive, HTML-kit, Kompozer, TsWebEditor, Ñandú, Editplus, Arachnophilia, HTMLed pro,
CoffeeCup Free y Frontpage son algunos de esos programas que facilitan el trabajo de edición de páginas Web.
Æ Estos programas permiten crear documentos HTML sin ser programador y sin tener grandes conocimientos de
código, y han supuesto un gran avance en el desarrollo actual de la Web.
Æ No obstante es muy útil conocer las bases del código HTML para entender mejor como trabajan estos programas.
Æ Sin duda, el programa de edición de contenidos para la Web más utilizado profesionalmente es Adobe
Dreamweaver.
Æ Este programa lo presentó públicamente la casa Macromedia en el año 1.997.
Æ En el año 2005, la casa Adobe hace pública la adquisición de Macromedia. En esas fechas Adobe pone en el
mercado la versión 9 denominada CS; y la sigue desarrollando hasta la actualidad en que tiene recién publicada la
última versión CS5 en Mayo de 2.010.
Æ El éxito de Dreamweaver se debe en gran parte a su interface y a que ha dado respuesta a las necesidades de los
programadores y a las de los diseñadores.
Æ Otra de las razones del éxito de Dreamweaver se basa en su forma de trabajar el código HTML. Es un programa
denominado de Round Trip HTML, es decir de código HTML de ida y vuelta.
Æ El programa muestra en dos ventanas independientes el aspecto real de la página y el código HTML que la soporta,
de manera que se pueden insertar contenidos o hacer modificaciones tanto desde el código como desde la ventana
de diseño.

Editorial CEP 161

Manual Introducción al lenguaje HTML

162 Editorial CEP

También podría gustarte

MF0973 - 1 Grabación de Datos (2a. Ed.) PDF
100% (7)
MF0973 - 1 Grabación de Datos (2a. Ed.) PDF
381 páginas
Modelos de Referencia, Dispositivos y Datos de Red
100% (5)
Modelos de Referencia, Dispositivos y Datos de Red
6 páginas
Psicología Del Desarrollo Dé La Niñez - Ana Faas
100% (7)
Psicología Del Desarrollo Dé La Niñez - Ana Faas
388 páginas
Programacion Shell PDF
75% (4)
Programacion Shell PDF
291 páginas
Analisis en Cadena (19 Pasos)
100% (3)
Analisis en Cadena (19 Pasos)
6 páginas
10.tarjetas de Registro SESIàN INDIVIDUAL (DBT)
100% (3)
10.tarjetas de Registro SESIàN INDIVIDUAL (DBT)
2 páginas
LIBROIntroduccionaLaEntrevistaPsicologica PDF
90% (10)
LIBROIntroduccionaLaEntrevistaPsicologica PDF
79 páginas
Capitulo 7 Orientando Al Adolescente y A Su Familia Final PDF
Aún no hay calificaciones
Capitulo 7 Orientando Al Adolescente y A Su Familia Final PDF
23 páginas
Diseño de Sitios Web Administrables Con Joomla 3 - Luis Angulo Aguirre PDF
100% (1)
Diseño de Sitios Web Administrables Con Joomla 3 - Luis Angulo Aguirre PDF
273 páginas
Libro de Programacion Web
Aún no hay calificaciones
Libro de Programacion Web
195 páginas
02 Ofimatica para Las Ciencias Economicas y Empresariales
Aún no hay calificaciones
02 Ofimatica para Las Ciencias Economicas y Empresariales
268 páginas
Libro1 EnDe Completo
100% (1)
Libro1 EnDe Completo
364 páginas
Fundamentos de Programación Piensa en C 1ra Edicion Osvaldo C. Battistutti PDF
0% (1)
Fundamentos de Programación Piensa en C 1ra Edicion Osvaldo C. Battistutti PDF
395 páginas
Java Cliente Servidor
Aún no hay calificaciones
Java Cliente Servidor
150 páginas
4 Ejercicios UNIX Solucion
Aún no hay calificaciones
4 Ejercicios UNIX Solucion
3 páginas
Linux para Usuarios
Aún no hay calificaciones
Linux para Usuarios
238 páginas
Manual de HTML CSS PDF
Aún no hay calificaciones
Manual de HTML CSS PDF
164 páginas
Libro PHP Español
Aún no hay calificaciones
Libro PHP Español
696 páginas
Bases de Datos II
Aún no hay calificaciones
Bases de Datos II
118 páginas
La Biblia Completa de C# (Anaya Multimedia)
Aún no hay calificaciones
La Biblia Completa de C# (Anaya Multimedia)
837 páginas
Manual de Ofimatica
67% (3)
Manual de Ofimatica
150 páginas
CURSO PHP - MySQL
Aún no hay calificaciones
CURSO PHP - MySQL
15 páginas
Administración de Linux
Aún no hay calificaciones
Administración de Linux
472 páginas
Edoc - Pub Java Intermediopdf
Aún no hay calificaciones
Edoc - Pub Java Intermediopdf
83 páginas
Quinto Semestre Guia Didactica Estudiante Desarrollo de Software
Aún no hay calificaciones
Quinto Semestre Guia Didactica Estudiante Desarrollo de Software
281 páginas
Matemática I
100% (2)
Matemática I
212 páginas
Silabo 2021-II Estructura de Datos y Algoritmos A
Aún no hay calificaciones
Silabo 2021-II Estructura de Datos y Algoritmos A
13 páginas
Curso Linux para Novatos, Brutos y Extremadamente Torpes
Aún no hay calificaciones
Curso Linux para Novatos, Brutos y Extremadamente Torpes
476 páginas
Javascript
Aún no hay calificaciones
Javascript
75 páginas
Dam M05 03 1909 Qa03
Aún no hay calificaciones
Dam M05 03 1909 Qa03
133 páginas
Fundamentos y Prácticas de Programación
100% (1)
Fundamentos y Prácticas de Programación
169 páginas
PDF M6 Java PDF
Aún no hay calificaciones
PDF M6 Java PDF
184 páginas
Taller Mysql PDF
Aún no hay calificaciones
Taller Mysql PDF
117 páginas
Programación A - Material Didáctico
Aún no hay calificaciones
Programación A - Material Didáctico
107 páginas
Clase 02. HTML 2
Aún no hay calificaciones
Clase 02. HTML 2
30 páginas
Excel 2003 - Completo
100% (1)
Excel 2003 - Completo
179 páginas
1 - Manual Introducción A La 1fin V 1
Aún no hay calificaciones
1 - Manual Introducción A La 1fin V 1
88 páginas
UF2176 - Definición y manipulación de datos
De Everand
UF2176 - Definición y manipulación de datos
Antonio Cala Hurtado
Aún no hay calificaciones
Dominio de SQL
De Everand
Dominio de SQL
Jonathan S. Walker
Aún no hay calificaciones
UF0348 - Utilización de las bases de datos relacionales en el sistema de gestión y almacenamiento de datos
De Everand
UF0348 - Utilización de las bases de datos relacionales en el sistema de gestión y almacenamiento de datos
Rafael Manuel Pérez López
Aún no hay calificaciones
Organización y operaciones con hojas de cálculo y técnicas de representación gráfica de documentos. ADGG0108
De Everand
Organización y operaciones con hojas de cálculo y técnicas de representación gráfica de documentos. ADGG0108
Jesús Francisco Camuña Rodríguez
Aún no hay calificaciones
YEPESIN HTML 1216
Aún no hay calificaciones
YEPESIN HTML 1216
5 páginas
Curso de HTML Desde 0
Aún no hay calificaciones
Curso de HTML Desde 0
113 páginas
HTML
Aún no hay calificaciones
HTML
5 páginas
Upo Eidos PDF
83% (6)
Upo Eidos PDF
57 páginas
Curso Sobre HTML5
Aún no hay calificaciones
Curso Sobre HTML5
6 páginas
Manual de HTML
Aún no hay calificaciones
Manual de HTML
60 páginas
HTML
Aún no hay calificaciones
HTML
64 páginas
Curso HTML
100% (3)
Curso HTML
61 páginas
Manual de HTML
Aún no hay calificaciones
Manual de HTML
68 páginas
Programación en HTML
Aún no hay calificaciones
Programación en HTML
51 páginas
Manual Básico de Creación de Páginas Web PDF
Aún no hay calificaciones
Manual Básico de Creación de Páginas Web PDF
44 páginas
Manual de HTML
Aún no hay calificaciones
Manual de HTML
38 páginas
HTML Manual
33% (3)
HTML Manual
79 páginas
Trabajo Ken
Aún no hay calificaciones
Trabajo Ken
17 páginas
Introducción HTML
Aún no hay calificaciones
Introducción HTML
7 páginas
Tutorial HTML Basico
Aún no hay calificaciones
Tutorial HTML Basico
68 páginas
Lenguaje de programación HTML
Aún no hay calificaciones
Lenguaje de programación HTML
11 páginas
Fundamentos HTML
Aún no hay calificaciones
Fundamentos HTML
19 páginas
HTML Juan Jose Lopez
Aún no hay calificaciones
HTML Juan Jose Lopez
37 páginas
Aprende HTML y CSS en Un Fin de Semana - Munoz, Alfredo Moreno
Aún no hay calificaciones
Aprende HTML y CSS en Un Fin de Semana - Munoz, Alfredo Moreno
177 páginas
Manual HTML Actualizado2
Aún no hay calificaciones
Manual HTML Actualizado2
107 páginas
Manual HTML Actualizado
Aún no hay calificaciones
Manual HTML Actualizado
107 páginas
Introducción HTML
Aún no hay calificaciones
Introducción HTML
22 páginas
Desarrollo de Aplicaciones Web
Aún no hay calificaciones
Desarrollo de Aplicaciones Web
10 páginas
Manual de HTML de Alonso Cornejo
100% (2)
Manual de HTML de Alonso Cornejo
97 páginas
Diccionario Computo
Aún no hay calificaciones
Diccionario Computo
1 página
Disfasia Diagnostico
Aún no hay calificaciones
Disfasia Diagnostico
30 páginas
Familiares de Personas Con TLP Estudio Pre Experimental de Una Intervencion Grupal PDF
Aún no hay calificaciones
Familiares de Personas Con TLP Estudio Pre Experimental de Una Intervencion Grupal PDF
8 páginas
Manual Básico de Nutrición Clínica y Dietética - Borras
96% (24)
Manual Básico de Nutrición Clínica y Dietética - Borras
312 páginas
Linehan Capitulo 8 Estrategias Centrales Parte I Validacion Final PDF
Aún no hay calificaciones
Linehan Capitulo 8 Estrategias Centrales Parte I Validacion Final PDF
26 páginas
DBT en 5 Pasos 280310
100% (3)
DBT en 5 Pasos 280310
194 páginas
Conceptualizacion de Caso
Aún no hay calificaciones
Conceptualizacion de Caso
3 páginas
DBT Coaching Telef Nico
Aún no hay calificaciones
DBT Coaching Telef Nico
1 página
Hoja de Registro para Consultantes Con Trastorno Bipolar
Aún no hay calificaciones
Hoja de Registro para Consultantes Con Trastorno Bipolar
1 página
Compartir Un Calendario de Outlook Con Otras Personas PDF
Aún no hay calificaciones
Compartir Un Calendario de Outlook Con Otras Personas PDF
9 páginas
ProtocoloIdeaciónSuicidaGagliesi2010 230211 PDF
0% (1)
ProtocoloIdeaciónSuicidaGagliesi2010 230211 PDF
19 páginas
201 Ingeniera de Sistemas - Mapa Curricular 01 07 2015 PDF
Aún no hay calificaciones
201 Ingeniera de Sistemas - Mapa Curricular 01 07 2015 PDF
2 páginas
Metodología de Programación en Páginas Web Manual Teórico PDF
Aún no hay calificaciones
Metodología de Programación en Páginas Web Manual Teórico PDF
199 páginas
Manual para El Tecnico Instalador, Electricista Domiciliario PDF
100% (9)
Manual para El Tecnico Instalador, Electricista Domiciliario PDF
94 páginas
Manual Plantas Medicinales Formación para El Empleo PDF
Aún no hay calificaciones
Manual Plantas Medicinales Formación para El Empleo PDF
160 páginas
Manual Windows 7. Formación para El Empleo PDF
100% (1)
Manual Windows 7. Formación para El Empleo PDF
147 páginas
Practica 6 Computacion en Red I 2023
Aún no hay calificaciones
Practica 6 Computacion en Red I 2023
13 páginas
Evaluación Final CISCO
Aún no hay calificaciones
Evaluación Final CISCO
40 páginas
UD05 Solucionario Internet TIC 4 ESO
100% (3)
UD05 Solucionario Internet TIC 4 ESO
4 páginas
Soporte y Mantenimiento de Equipos de Computacion
Aún no hay calificaciones
Soporte y Mantenimiento de Equipos de Computacion
14 páginas
Diseño Implementacion Plan Piloto Sistema Comunicación Volp
Aún no hay calificaciones
Diseño Implementacion Plan Piloto Sistema Comunicación Volp
84 páginas
Access List
Aún no hay calificaciones
Access List
7 páginas
Arquitectura de Redes
100% (1)
Arquitectura de Redes
53 páginas
Ebook en PDF Redes de Ordenadores Protocolos
Aún no hay calificaciones
Ebook en PDF Redes de Ordenadores Protocolos
168 páginas
Guia de Funciones Centrales Panasonic NCP500 NCP1000
Aún no hay calificaciones
Guia de Funciones Centrales Panasonic NCP500 NCP1000
238 páginas
Tarea PLC S1200
Aún no hay calificaciones
Tarea PLC S1200
13 páginas
Clases de Direcciones Ip PDF
Aún no hay calificaciones
Clases de Direcciones Ip PDF
6 páginas
Cómo Configurar Un Router de Cisco Básico Paso A Paso
Aún no hay calificaciones
Cómo Configurar Un Router de Cisco Básico Paso A Paso
7 páginas
Inf 4º Ejercicios Unidad 3 Redes
Aún no hay calificaciones
Inf 4º Ejercicios Unidad 3 Redes
7 páginas
REDES
Aún no hay calificaciones
REDES
4 páginas
Schneider Electric - EcoStruxure-Panel-Server - PAS800L
Aún no hay calificaciones
Schneider Electric - EcoStruxure-Panel-Server - PAS800L
4 páginas
TESIS - Evaluacion de Parametros de QoS para Una VPNMPLS
Aún no hay calificaciones
TESIS - Evaluacion de Parametros de QoS para Una VPNMPLS
165 páginas
Guía de Comandos Básicos Cisco
Aún no hay calificaciones
Guía de Comandos Básicos Cisco
15 páginas
SEGUNDO BLOQUE TEORICO PRACTICO VIRTUAL TELECOMUNICACIONES ENTREGA 2 SEMANA 5
Aún no hay calificaciones
SEGUNDO BLOQUE TEORICO PRACTICO VIRTUAL TELECOMUNICACIONES ENTREGA 2 SEMANA 5
9 páginas
Configuracion de Directorio Activo
0% (1)
Configuracion de Directorio Activo
6 páginas
Protocolo Profinet
Aún no hay calificaciones
Protocolo Profinet
48 páginas
Taller Numero 3
Aún no hay calificaciones
Taller Numero 3
2 páginas
Informe Ruteo
Aún no hay calificaciones
Informe Ruteo
5 páginas
RCMS460-490 TGH Es
Aún no hay calificaciones
RCMS460-490 TGH Es
104 páginas
Porfolio MÁSMÓVIL Negocios
Aún no hay calificaciones
Porfolio MÁSMÓVIL Negocios
40 páginas
Lab3 Final
Aún no hay calificaciones
Lab3 Final
11 páginas
Packet Tracer: Situación de División en Subredes 1
100% (1)
Packet Tracer: Situación de División en Subredes 1
4 páginas
Capitulos I,II y III + Avance Capitulo IV - 01.05.25
Aún no hay calificaciones
Capitulos I,II y III + Avance Capitulo IV - 01.05.25
57 páginas
3.2.1. Redes Separacion de Hosts en Grupos Comunes
Aún no hay calificaciones
3.2.1. Redes Separacion de Hosts en Grupos Comunes
6 páginas
Lab12 Subredes
Aún no hay calificaciones
Lab12 Subredes
4 páginas