Monografia de Ejemplo Prueba de Fuego

UNIVERSIDAD CIENTÍFICA DEL PERÚ
FACULTAD DE INGENIERÍA
CARRERA PROFESIONAL DE INGENIERÍA INFORMÁTICA Y
DE SISTEMAS
HERRAMIENTAS DE PROGRAMACIÓN PARA INTERNET
“Desarrollo de páginas Web con HTML”
Autores:
Domper Rodríguez, Amado
Gonzales Collazos, Junior
Vásquez Ramírez, Branco
Lozano del Castillo, Israel Loo
Zevallos, Ray
Iquitos – Perú
2010
DEDICATORIA
Con mucho amor, dedicamos este trabajo a nuestros padres quienes siempre están
apoyándonos en nuestra formación profesional y espiritual, formando en nosotros
personas de éxito.
Los autores
ÍNDICE
Pag.
CAPITULO I: Introducción……………………………………………..………………4
1.1. ¿Qué es HTML? …………………………………………………………….4
2
1.2. Historia del HTML…………………………………………..………………
4
1.3. Especificación oficial …………………………………………..…………...6
1.4. HTML Y XHTML…………………………………………………………..6
CAPITULO II: Características básicas…….……...…………………………………….5

2.1. Lenguajes de etiquetas………………………………………………….…..8
2.2. El documento HTML…………………………………………………..……9
2.3. Etiquetas y atributos………………………………………………………..10
2.4. Elementos HTML…………………………………………………….……12
2.5. Sintaxis de las etiquetas XHTML………………………………………….66
CAPITULO III: Texto ………………………………………………………......66
3.1. Estructurar………………………………………………………………….66
3.2. Marcado básico de texto…………………………………………………...66
3.3. Marcado avanzado de texto………………………………………………..66
3.4. Espacios en blanco y nuevas líneas………………………………………..66
3.5. Codificación de caracteres…………………………………………………66
CAPITULO IV: Enlaces……………………………………………………………….66

4.1. Enlaces básicos…………………………………………………………….66
CAPITULO V: Listas
…………………………………………………………………..66
5.1. Listas no ordenadas………………………………………………………..66
5.2. Listas ordenadas……………………………………………………………66
5.3. Listas de definición……………………...…………………………………66
CAPITULO VI: Imágenes y Objetos………………………………………………….66
6.1. Imágenes………………………………………………………….………..66
6.2. Objetos………………………………………………………….………….66
CAPITULO VII: Tablas………………………………………………………….…….66

7.1. Tablas………………………………………………………………………66
CAPITULO VIII:
Formularios…………………………………………………………66
8.1. Formularios básicos………………………………………………………..66
3
8.2. Elementos de formulario…………………………………………………...66
8.3. Formularios avanzados…………………………………………………….66
8.4. Otros elementos de formulario………………………………………….…66
CAPITULO IX: Otras etiquetas importantes …………………………………….….66

9.1. Comentarios………………………………………………………………66
9.2. Iframes……………………………………………………………………66
BIBLIOGRAFÍA………………………………………………………………….......66
CAPITULO 1. Introducción
1.1. ¿Qué es HTML?
4
HTML son la siglas de HyperTextMarkupLanguage (Lenguaje de Marcado de
Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas
web. Es usado para describir la estructura y el contenido en forma de texto, así como
para complementar el texto con objetos tales como imágenes. HTML se escribe en
forma de "etiquetas", rodeadas por corchetes angulares (<,>).
El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define

un organismo sin ánimo de lucro llamado World Wide Web Consortium, más conocido
como W3C. Como se trata de un estándar reconocido por todas las empresas
relacionadas con el mundo de Internet, una misma página HTML se visualiza de forma
muy similar en cualquier navegador de cualquier sistema operativo.
1.2. Historia del HTML
El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador

del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo
sistema de "hipertexto" para compartir documentos.
Los sistemas de "hipertexto" habían sido desarrollados años antes. En el ámbito de la

informática, el "hipertexto" permitía que los usuarios accedieran a la información
relacionada con los documentos electrónicos que estaban visualizando. De cierta
manera, los primitivos sistemas de "hipertexto" podrían asimilarse a los enlaces de las
páginas web actuales.
Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo presentó a

una convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet.
Después de unir sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron
la propuesta ganadora llamada WorldWideWeb (W3).
El primer documento formal con la descripción de HTML se publicó en 1991 bajo el

nombre "HTML Tags" (Etiquetas HTML) y todavía hoy puede ser consultado online a
modo de reliquia informática.
La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por
parte del organismo IETF (Internet EngineeringTaskForce). Aunque se consiguieron
avances significativos (en esta época se definieron las etiquetas para imágenes, tablas y
formularios) ninguna de las dos propuestas de estándar, llamadas HTML y HTML+
consiguieron convertirse en estándar oficial.
5
En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue
publicar, el 22 de septiembre de ese mismo año, el estándar HTML 2.0. A pesar de su
nombre, HTML 2.0 es el primer estándar oficial de HTML.
A partir de 1996, los estándares de HTML los publica otro organismo de

estandarización llamado W3C (World Wide Web Consortium). La versión HTML 3.2 se
publicó el 14 de Enero de 1997 y es la primera recomendación de HTML publicada por
el W3C. Esta revisión incorpora los últimos avances de las páginas web desarrolladas
hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes.
HTML 4.0 se publicó el 24 de Abril de 1998 (siendo una versión corregida de la

publicación original del 18 de Diciembre de 1997) y supone un gran salto desde las
versiones anteriores. Entre sus novedades más destacadas se encuentran las hojas de
estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web,
mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los
formularios.
La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se

denomina HTML 4.01. Se trata de una revisión y actualización de la versión HTML 4.0,
por lo que no incluye novedades significativas.
Desde la publicación de HTML 4.01, la actividad de estandarización de HTML se

detuvo y el W3C se centró en el desarrollo del estándar XHTML. Por este motivo, en el
año 2004, las empresas Apple, Mozilla y Opera mostraron su preocupación por la falta
de interés del W3C en HTML y decidieron organizarse en una nueva asociación llamada
WHATWG (Web HypertextApplicationTechnologyWorkingGroup).
La actividad actual del WHATWG se centra en el futuro estándar HTML 5, cuyo primer
borrador oficial se publicó el 22 de enero de 2008. Debido a la fuerza de las empresas
que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en
marzo de 2007 el W3C decidió retomar la actividad estandarizadora de HTML.
De forma paralela a su actividad con HTML, W3C ha continuado con la estandarización

de XHTML, una versión avanzada de HTML y basada en XML. La primera versión de
XHTML se denomina XHTML 1.0 y se publicó el 26 de Enero de 2000 (y
posteriormente se revisó el 1 de Agosto de 2002).
6
XHTML 1.0 es una adaptación de HTML 4.01 al lenguaje XML, por lo que mantiene
casi todas sus etiquetas y características, pero añade algunas restricciones y elementos
propios de XML. La versión XHTML 1.1 ya ha sido publicada en forma de borrador y
pretende modularizarXHTML. También ha sido publicado el borrador de XHTML 2.0,
que supondrá un cambio muy importante respecto de las anteriores versiones de
XHTML.
1.3. Especificación oficial
El organismo W3C (World Wide Web Consortium) elabora las normas que deben seguir
los diseñadores de páginas web para crear las páginas HTML.
Normas actual:
• Especificación oficial de HTML 4.01

• Especificación oficial de XHTML 1.0
El estándar XHTML 1.0 incluye el 95% del estándar HTML 4.01, ya que sólo añade
pequeñas mejoras y modificaciones menores.
1.4. HTML Y XHTML
El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es más

que una adaptación de HTML al lenguaje XML. Técnicamente, HTML es descendiente
directo del lenguaje SGML, mientras que XHTML lo es del XML (que a su vez,
también es descendiente de SGML).
7
Figura 1.1. Esquema de la evolución de HTML y XHTML
Las páginas y documentos creados con XHTML son muy similares a las páginas y
documentos HTML. Las discusiones sobre si HTML es mejor que XHTML o viceversa
son recurrentes en el ámbito de la creación de contenidos web, aunque no existe una
conclusión ampliamente aceptada.
Actualmente, entre HTML 4.01 y XHTML 1.0, la mayoría de diseñadores escogen

XHTML. En un futuro cercano, si los diseñadores deben elegir entre HTML 5 y
XHTML 1.1 o XHTML 2.0, quizás la elección sea diferente.
CAPITULO 2. Características básicas
2.1. Lenguajes de etiquetas
Uno de los retos iniciales fue cómo almacenar la información en los archivos digitales.
Como los primeros archivos sólo contenían texto sin formato, la solución era muy
sencilla: se codificaban las letras del alfabeto y se transformaban en números.
De esta forma, se utiliza una tabla de conversión que transforma cada carácter en un
número. Una vez almacenada la secuencia de números, el contenido del archivo se
puede recuperar realizando el proceso inverso.
8
Figura 2.1. Ejemplo sencillo de codificación de caracteres
El proceso de transformación de caracteres en secuencias de números se denomina

codificación de caracteres y cada una de las tablas para realizar la transformación se
conocecomopáginas de código. Una de las codificaciones más conocidas (y una de las
primeras) es la codificación ASCII.
Una vez resuelto el problema de almacenar el texto simple, se presenta el reto de

almacenar los contenidos de texto con formato. En otras palabras, ¿cómo se almacena
un texto en negrita? ¿y un texto de color rojo? ¿y otro texto azul, en negrita y
subrayado?
La solución que se emplea para guardar la información con formato es mucho más
sencilla: el archivo electrónico almacena tanto los contenidos como la información
sobre el formato de esos contenidos. Por ejemplo se quiere dividir el texto en párrafos y
se desea dar especial importancia a algunas palabras, se podría indicar de la siguiente
manera:
<parrafo>
Contenido de texto con <importante>algunas palabras</imp
ortante> resaltadas de
forma especial.
</parrafo>
El principio de un párrafo se indica mediante la palabra <parrafo> y el final de un

párrafo se indica mediante la palabra </parrafo>. De la misma manera, para asignar más
importancia a ciertas palabras del texto, se encierran entre <importante> y
</importante>.
El proceso de indicar las diferentes partes que componen la información se denomina

marcar (markup en inglés). Cada una de las palabras que se emplean para marcar el
inicio y el final de una sección se denominan etiquetas.
9
2.2. El documento HTML
Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera

incluye información sobre la propia página, como por ejemplo su título y su idioma. El
cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.
Figura 2.2. Esquema de las partes que forman un documento HTML
El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la

cabecera (llamada head en inglés) contiene todo lo que no se ve (con la única excepción
del título de la página, que los navegadores muestran como título de sus ventanas).
Es importante conocer las tres etiquetas principales de un documento HTML (<html>,

<head>, <body>):
Figura 2.3. Esquema de las etiquetas principales que contiene un documento HTML
2.3. Etiquetas y atributos
HTML define 91 etiquetas que los diseñadores pueden utilizar para marcar los
diferentes elementos que componen una página:
10
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button,
caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form,
frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd,
label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p,
param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td,
textarea, tfoot, th, thead, title, tr, tt, u, ul, var.
Muchas etiquetas requieren cierta información adicional para estar completamente

definidos por lo que se le adicionan los atributos.
Ejemplo:
La etiqueta <a> por ejemplo se emplea para incluir un enlace en una página. Utilizando
sólo la etiqueta <a> no es posible establecer la dirección a la que apunta cada enlace.
<html>
<head>
<title>Ejemplo de atributos en las etiquetas
</title>
</head>
<body>
<p>
Los enlaces son muy fáciles de indicar:
<a>Soy un enlace incompleto, porque no tengo dirección de destino
</a>.
<ahref="http://www.google.com"
>Este otro enlaceapunta a la página de
Google</a>.
</p>
</body>
</html>
Figura 2.4. Los atributos permiten personalizar las etiquetas HTML
Algunos de los atributos son comunes a muchas o casi todas las etiquetas. De esta
forma, es habitual explicar por separado los atributos comunes de las etiquetas para no
tener que volver a hacerlo cada vez que se explica una nueva etiqueta. Los atributos
comunes se dividen en cuatro grupos según su funcionalidad:
11
1) Atributos básicos: se pueden utilizar prácticamente en todas las etiquetas
HTML
Atributo Descripción
id = "texto" Establece un identificador único a cada elemento dentro de una página HTML
class = Establece la clase CSS que se aplica a los estilos del elemento
"texto"
style = Establece de forma directa los estilos CSS de un elemento
"texto"
title = Establece el título a un elemento (mejora la accesibilidad y los navegadores lo
"texto" muestran cuando el usuario pasa el ratón por encima del elemento)
2) Atributos para internacionalización: los utilizan las páginas que muestran sus
contenidos en varios idiomas o aquellas que quieren indicar de forma explícita el
idioma de sus contenidos:
lang = "codigo Indica el idioma del elemento mediante un código predefinido

de
idioma
"
xml:lang = "codigo Indica el idioma del elemento mediante un código predefinido
de
idioma
"
di Indica la dirección del texto (útil para los idiomas que escriben de
r derecha a izquierda)
3) Atributos de eventos: sólo se utilizan en las páginas web dinámicas creadas con
JavaScript.
onclick, ondblclick, onmousedown, Permiten controlar los eventos

onmouseup, producidos sobre cada elemento de
onmouseover, onmousemove, onmouseout, onkeypress la página
,
onkeydown,
onkeyup
Cada vez que el usuario pulsa una tecla, mueve su ratón o pulsa cualquier botón del
ratón, se produce un evento dentro del navegador. Utilizando JavaScript y los atributos
anteriores, es posible responder de forma adecuada a cada evento.
12
4) Atributos para los elementos que pueden obtener el foco:
Los elementos de las páginas web también pueden obtener el foco de la aplicación (en
este caso, el foco del navegador) y HTML define algunos atributos específicos para
controlar cómo se seleccionan los elementos.
accesskey Establece una tecla de acceso rápido a un elemento HTML

=
"letra
"
tabindex Establece la posición del elemento en el orden de tabulación de la página. Su
=
"numero valor debe estar comprendido entre 0 y 32.76
" 7
onfocus, Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene
onblur o pierde el foco
2.4. Elementos HTML
Un elemento HTML es mucho más que una etiqueta, ya que está formado por:
• Una etiqueta de apertura.

• Cero o más atributos.
• Texto encerrado por la etiqueta.
• Una etiqueta de cierre.
Figura 2.5. Esquema de las partes que componen un elemento HTML
2.5. Sintaxis de las etiquetas XHTML
El lenguaje HTML original era muy permisivo en su sintaxis, por lo que era posible
escribir sus etiquetas y atributos de muchas formas diferentes. Las etiquetas por ejemplo
podían escribirse en mayúsculas, en minúsculas e incluso combinando mayúsculas y
minúsculas. El valor de los atributos de las etiquetas se podían indicar con y sin comillas
("). Además, el orden en el que se abrían y cerraban las etiquetas no era importante.
13
La flexibilidad de HTML puede parecer un aspecto positivo, pero el resultado final son
páginas con un código HTML desordenado, difícil de mantener y muy poco profesional.
Afortunadamente, XHTML soluciona estos problemas añadiendo ciertas normas en la
forma de escribir las etiquetas y atributos.
A continuación se muestran las cinco restricciones básicas que introduce XHTML

respecto a HTML en la sintaxis de sus etiquetas:
1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:
Ejemplo correcto en XHTML:
<p>Este es un párrafo con <a>un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<p>Este es un párrafo con <a>un enlace</p></a>
2) Los nombres de las etiquetas y atributos siempre se escriben en minúsculas:
<p>Este es un párrafo con <ahref="http://www.google.com">un enlace</a></p>
<P>Este es un párrafo con <AHREF="http://www.google.com">un enlace</A></P>
3) El valor de los atributos siempre se encierra con comillas:
<p>Este es un párrafo con <ahref="http://www.google.com">un enlace</a></p>

<p>Este es un párrafo con <ahref=http://www.google.com>un enlace</a></p>
4) Los atributos no se pueden comprimir:
<dlcompact="compact">...</dl>
14
<dlcompact>...</dl>
Este tipo de atributos en los que el nombre coincide con su valor no son muy habituales.
5) Todas las etiquetas deben cerrarse siempre:
<br/>
<br>
CAPITULO 3. Texto
La mayor parte del contenido de las páginas HTML habituales está formado por texto,
llegando a ser más del 90% del código de la página.
HTML define etiquetas para estructurar el contenido en secciones y párrafos y define

otras etiquetas para marcar elementos importantes dentro del texto.
La tarea inicial del editor de contenidos HTML consiste en estructurar el texto original
definiendo sus párrafos, titulares y títulos de sección.
15
El proceso de estructurar un texto simple consiste en indicar las diferentes zonas o
secciones que componen el texto. De esta forma, los textos estructurados utilizan
etiquetas para delimitar cada párrafo y títulos de sección para delimitar cada una de las
secciones que forman el texto.
3.1. Estructurar
La forma más sencilla de estructurar un texto consiste en separarlo por párrafos.

Además, HTML permite incluir títulos que delimitan cada una de las secciones.
3.1.1. Párrafos
Una de las etiquetas más utilizadas de HTML es la etiqueta <p>, que permite definir los
párrafos que forman el texto de una página. Para delimitar el texto de un párrafo, se
encierra ese texto con la etiqueta <p>, como muestra el siguiente ejemplo:
<html>
<head>
<title>Ejemplo de texto estructurado con párrafos
</title>
</head>
<body>
<p>Este es el texto que forma el primer párrafo de la página.
Los párrafos pueden ocupar varias líneas y el navegador se encarga
de ajustar su longitud al tamaño de ventana.
la </p>
<p>El segundo párrafo de la página también se define encerrando

su texto con la etiqueta p. El navegador también se encarga de
separar automáticamente cada párrafo.
</p>
</body>
</html>
El ejemplo anterior se visualiza de la siguiente manera:
16
Figura 3.1. Ejemplo de texto HTML estructurado con párrafos
La siguiente tabla recoge la definición formal de la etiqueta <p>:

<p> Párrafos
Atributos comunes básicos, i18n y eventos

Atributos específicos -
Descripción Delimita el contenido de un párrafo de texto
3.1.2. Secciones
Las páginas HTML habituales suelen tener una estructura más compleja que la que se
puede crear solamente mediante párrafos. De hecho, es habitual que las páginas se
dividan en diferentes secciones jerárquicas.
Los títulos de sección se utilizan para delimitar el comienzo de cada sección de la

página. HTML permite crear secciones de hasta seis niveles de importancia. De esta
forma, aunque una página puede definir cualquier número de secciones, sólo puede
incluir seis niveles jerárquicos.
Las etiquetas que definen los títulos de sección son <h1>, <h2>, <h3>, <h4>, <h5> y
<h6>. La etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los
titulares de la página. La importancia del resto de etiquetas es descendiente, de forma
que la etiqueta <h6> es la que se utiliza para delimitar las secciones menos importantes
de la página.
A continuación se muestra la definición formal de la etiqueta <h1>, siendo idéntica la

definición del resto de etiquetas referidas a los títulos de sección:
17
<h1> Sección (titular) de nivel 1

Descripción Define los títulos de las secciones de mayor importancia de la página.
El siguiente ejemplo muestra el uso de las etiquetas de título de sección:

<html>
<head>
<title>Ejemplo de texto estructurado con secciones </title>
</head>
<body>
<h1>Titular de la página</h1>
<p>Párrafo de introducción...</p>
<h2>La primera sub-sección</h2>
<p>Párrafo de contenido...</p>
<h2>Otra subsección</h2>
<p>Más párrafos de contenido...</p>

</body>
Figura 3.2. Ejemplo de texto HTML estructurado con párrafos y secciones
3.2. Marcado básico de texto
Una vez estructurado el texto en párrafos y secciones, el siguiente paso es el marcado de

los elementos que componen el texto. Los textos habituales están formados por
elementos como palabras en negrita o cursiva, anotaciones y correcciones, citas a otros
18
documentos externos, etc. HTML proporciona varias etiquetas para marcar cada uno de
los diferentes tipos de texto.
Entre las etiquetas más utilizadas para marcar texto se encuentran <em> y <strong>. La
definición formal de estas dos etiquetas se muestra a continuación:
<em> Énfasis

Descripción Realza la importancia del texto que encierra
<strong>
Énfasis más acentuado

Descripción Realza con la máxima importancia el texto que encierra
La etiqueta <em> marca un texto indicando que su importancia es mayor que la del resto
del texto. La etiqueta <strong> indica que un determinado texto es de la mayor
importancia dentro de la página. Ejemplo:
<html>
<head>
<title>Ejemplo de etiqueta em y strong</title>
</head>
<body>
<p>El lenguaje HTML permite marcar algunos segmentos de texto
como<em>muy importantes</em> y otros segmentos como <strong>los
másimportantes</strong>.</p>
</body>
</html>
19
Figura 3.3. Ejemplo de uso de las etiquetas em y strong
HTML también permite marcar de forma adecuada las modificaciones realizadas en el

contenido de una página. En otras palabras, HTML permite indicar de forma clara el
texto que ha sido eliminado y el texto que ha sido añadido a un determinado texto
original. Las etiquetas utilizadas son <ins> y <del>, cuya definición formal es la
siguiente:
<ins> Inserción
Atributos básicos, i18n y eventos

comunes
Atributos cite = - Indica la URL de la página en la que se puede
específicos "url" obtener
más información
datetime = sobre el motivo por el que se realizó la modificación.
el "fecha" - Especifica la fecha y hora en la que se realizó
cambio
Descripción Se emplea para marcar una modificación en los contenidos originales
consistente en la inserción de un nuevo contenido
<del> Borrado

comunes
Atributos cite = - Indica la URL de la página en la que se puede
específicos "url" obtener
más información
datetime =sobre el motivo por el que se realizó la modificación.
el "fecha" - Especifica la fecha y hora en la que se realizó
cambio
Descripción Se emplea para marcar una modificación en los contenidos originales
consistente en el borrado de cierto contenido
Ejemplo:
20
<html>
<head><title
>Ejemplo de etiqueta ins y </title></head
del >
<body>
<h3>Ejemplo de etiqueta ins y </h

del
3>
<p>El HTML, acrónimo inglés de Hyper Text MarkupLanguage (lenguaje de

<deldatetime
="20091025"
cite="http://www.librosweb.es/mas_informacion.html"
>m
arcado de
hipertexto
</del><insdatetime
="20091026"
cite="http://www.librosweb.es/mas_inf
ormacion.html"
>
marcashipertextuales
</ins>) es un lenguaje de marcación diseñado para
estruct
urar textos y
presentarlos en forma de hipertexto.
</p>
</body>
</html>
Figura 3.4. Ejemplo de uso de las etiquetas ins y del
Por otra parte, en muchos tipos de páginas (artículos, noticias) es habitual citar
literalmente un texto externo. HTML define la etiqueta <blockquote> para incluir citas
textuales en las páginas web. La definición de la etiqueta HTML con el nombre más
largo se muestra a continuación:
<blockquote> Citas

Atributos cite = - Indica la dirección de la página web original de la
específicos "url"
que se extrae la
cita
Descripción Se emplea para indicar que el texto que encierra es una cita textual de
otro texto externo
Al igual que <ins> y <del>, la etiqueta <blockquote> permite indicar mediante el

atributo cite la dirección de un documento del que se ha extraído la cita.
21
Ejemplo:
<html>
<head><title>
Ejemplo de etiqueta ins y</title></head
del >
<body>
<h3>Ejemplo de etiqueta ins y</h

del
3>
<p>El HTML, acrónimo inglés de Hyper Text MarkupLanguage (lenguaje de

<deldatetime
="20091025"
cite="http://www.librosweb.es/mas_informacion.html"
>m
arcado de
hipertexto
</del><insdatetime
="20091026"
cite="http://www.librosweb.es/mas_inf
ormacion.html"
>
marcashipertextuales
</ins>) es un lenguaje de marcación diseñado para
estructurar textos y
presentarlos en forma de hipertexto.
</p>
</body>
</html>
Figura 3.5. Ejemplo de uso de la etiqueta blockquote
3.3. Marcado avanzado de texto
La etiqueta <abbr> marca las abreviaturas de un texto y la etiqueta <acronym> se

emplea para marcar las siglas o acrónimos del texto. Su definición es la siguiente:
<abbr> Abreviaturas
22
comunes
Atributos title = - Indica el significado completo de la abreviatura
específicos "texto"
Descripción Se emplea para marcar las abreviaturas del texto y proporcionar el

significado de esas abreviaturas
<acronym> Acrónimos o siglas

comunes
Atributos title = - Indica el significado completo del acrónimo o
sigla
Descripción Se emplea para marcar las siglas o acrónimos del texto y proporcionar el
significado de esas siglas
En ambos casos, el atributo title se puede utilizar para incluir el significado completo de
la abreviatura o sigla.
Ejemplo:
<html>
<head>
<title>Ejemplo de etiqueta acronym</title>
</head>
<body>
<p>El lenguaje<acronymtitle="HyperText Markup
Language">HTML</acronym>esestandarizado
por el <acronymtitle="World Wide Web Consortium">W3C</acronym>.</p>
</body>
</html>
23
Figura 3.6. Ejemplo de uso de la etiqueta acronym
Por otra parte, en ocasiones resulta útil incluir la definición de una palabra extraña o
cuyo uso está restringido a un entorno muy determinado. HTML incluye la etiqueta
<dfn> para proporcionar al usuario la definición de todas las palabras para las que se
considere apropiado. La definición formal de esta etiqueta se muestra a continuación:
<dfn> Definición

comunes
Atributos title = - Indica el significado completo del término
Descripción Se emplea para marcar las definiciones de ciertos términos y proporcionar

el significado de esos términos
Ejemplo:
<p>Con estos síntomas, podría tratarse de un<dfntitle

caso de="Imagen o
sensación subjetiva,
propiade un sentido, determinada por otra sensación que afecta a un sentido
diferente"
>sinestesia
</dfn></p
>
El ejemplo anterior se visualiza de la siguiente

: manera
Figura 3.7
. Ejemplo de uso de la etiqueta
dfn
HTML incluye una etiqueta que se puede utilizar para marcar un texto como una
citación:
<cite> Cita
24
Descripción Se emplea para marcar una cita o una referencia a otras fuentes
En ocasiones, no está clara la diferencia entre <cite> y <blockquote>. El elemento

<cite> marca el autor de la cita (persona, documento, etc.) y <blockquote> marca el
contenido de la propia cita. En el siguiente ejemplo, <blockquote> encierra el contenido
de una frase célebre y <cite> encierra el nombre de su autor:
Como dijo
<cite>Mahatma Gandhi
</cite
>:
<blockquote
>Vive como si fueras a morir mañana y aprende como si fueras a vivir
para siempre.
</blockquote
>
Figura 3.8. Ejemplo de uso de la etiqueta cite
3.4. Espacios en blanco y nuevas líneas
El aspecto más sorprendente del lenguaje HTML cuando se desarrollan los

primeros documentos es el tratamiento especial de los "espacios en blanco" del
texto. HTML considera espacio en blanco a los espacios en blanco, los
tabuladores, los retornos de carro y el carácter de nueva línea (ENTER o Intro).
3.4.1. Nuevas líneas
La definición formal de <br> se muestra a continuación:

<br> Nueva línea
Atributos comunes básicos

25
Descripción Fuerza al navegador a insertar una nueva línea
Ejemplo:
<html>
<head>
<title>Ejemplo de etiqueta <br
/title>
</head>
<body>
<p>Este primer párrafo no contiene saltos de línea ni otro tipo de
espaciado.
</p>
<p>Este segundo párrafo sí que contiene saltos

<br/>
de<br/>
línea<br/>
y otro tipo de espaciado.
</p>
</body>
</html>
Figura 3.9. Ejemplo de uso de la etiqueta br
3.4.2. Espacios en blanco
Para incluir espacios en blanco adicionales, se debe sustituir cada nuevo

espacio en blanco por el texto (es importante incluir el símbolo & al
principio y el símbolo ; al final).
Ejemplo:
26
<html>
<head>
<title>Ejemplo de entidad </title>
</head>
<body>
<p>Este primer párrafo no contiene saltos de línea ni otro tipo de
espaciado.
</p>
<p>Este segundo párrafo sí que contiene saltos

<br/>
de<br/>
línea<br/>
y otro tipo de espaciado.
</p>
</body>
</html>
Figura 3.10. Ejemplo de uso de espacios en blanco en HTML
3.4.3. Texto preformateado
La etiqueta <pre>, que muestra el texto tal y como se ha escrito, respetando

todos los espacios en blanco y todas las nuevas líneas. La definición formal
de la etiqueta se muestra a continuación:
<pre> Texto preformateado

Atributos -
específicos
Descripción Muestra el texto que encierra tal y como está escrito (respetando los
espacios en blanco)
27
Ejemplo:
<html>
<head><title>Ejemplo de etiqueta pre</title></head>
<body>
<pre>
La etiqueta pre
respeta los espacios en blanco
y
muestra el texto
tal y como
está escrito
</pre>
<p>
La etiqueta pre
respeta los espacios en blanco
y
muestra el texto
tal y como
está escrito
</p>
</body>
</html>
Figura 3.16. Ejemplo de uso de la etiqueta pre
Otra etiqueta relacionada con <pre> es la etiqueta <code>, que se utiliza para mostrar
código fuente de cualquier lenguaje de programación. La definición formal de <code>
es la siguiente:
<code> Código fuente

Descripción Delimita el texto considerado un fragmento de código fuente
28
En la mayoría de páginas web, no tiene sentido utilizar la etiqueta <code>. Sin embargo,
en muchas páginas web técnicas que incluyen listados de programas, trozos de código o
etiquetas HTML, lo correcto es emplear la etiqueta <code>.
Ejemplo:
<html>
<head><title>Ejemplo de etiqueta code</title></head>
<body>
<code>
La etiqueta code
no respeta los espacios en blanco
</code>
<p>La etiqueta <code>code</code> es similar a la

etiqueta<code>pre</code>, sobre todo en el formato
del texto.</p>
</body>
</html>
Figura 3.18. Ejemplo de uso de la etiqueta code
3.5. Codificación de caracteres
Una consideración importante directamente relacionada con el texto de las páginas

HTML es la codificación de los caracteres y la inserción de caracteres especiales.
Algunos de los caracteres que se utilizan habitualmente en los textos no se pueden
incluir directamente en las páginas web:
• Los caracteres que utiliza HTML para definir sus etiquetas (<, > y ") no se
pueden utilizar libremente.
29
• Los caracteres propios de los idiomas que no son el inglés (ñ, á, ç, ¿, ¡, etc.)
pueden ser problemáticos dependiendo de la codificación de caracteres utilizada.

La solución a la primera limitación consiste en sustituir los caracteres reservados de
HTML por unas expresiones llamadas entidades HTML y que representan a cada
carácter:
Entid ad Carácter Traducción
< < signo de menor que
> > signo de mayor que
& & ampersand
" " comillas
(espacio en blanco) espacio en blanco
' ' apóstrofo
Ejemplo:
<p>Los caracteres <,>, " y & pueden dar problemas con los
textos en HTML</p>
Figura 3.19. Ejemplo de uso de entidades
Por otra parte, los caracteres propios de los idiomas diferentes al inglés también pueden
ser problemáticos. Ya que el navegador del usuario mostrará caracteres extraños en
todos los acentos y en todas las letras como la ñ.
La solución más sencilla para asegurar que todos estos caracteres potencialmente
problemáticos se van a visualizar correctamente en el navegador del usuario consiste en
sustituir cada carácter problemático por su entidad HTML:
30
Entidad Carácter
ñ ñ
Ñ Ñ
á á
é é
í í
ó ó
ú ú
Á Á
&Eacute ; É
Í Í
Ó Ó
Ú Ú
€ €
Ejemplo:
<p>Este pá
rrafo contiene caracteres acentuados y se almacena en formato
UTF-8</p>
Figura 3.20. Ejemplo de uso de entidades
Capítulo 4. Enlaces
31
Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayoría
de enlaces relacionan páginas web, también es posible enlazar otros recursos como
imágenes, documentos y archivos.
Una característica que no se suele tener en cuenta en los enlaces es que están formados
por dos extremos y un sentido. En otras palabras, el enlace comienza en un recurso y
apunta hacia otro recurso. Cada uno de los dos extremos se llaman"anchors" en inglés,
que se puede traducir literalmente como "anclas".
4.1. Enlaces básicos
Los enlaces en HTML se crean mediante la etiqueta <a> (su nombre viene del inglés
"anchor", literalmente traducido como "ancla"). A continuación se muestra la definición
simplificada de <a> y más adelante se muestra su definición completa:
<a> Enlaces
Atributos comunes básicos, i18n, eventos y foco

Atributos name = - Permite nombrar al enlace para que se pueda
específicos "texto" enlaces
acceder desde otros Indica la URL del recurso que se quiere enlazar
href =-
"url"
Descripción Se emplea para enlazar todo tipo de recursos
El atributo más importante de la etiqueta <a> es href, que se utiliza para indicar la URL
a la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador se
dirige a la URL del recurso indicado mediante href. Las URL de los enlaces pueden ser
absolutas, relativas, internas y externas.
Con la definición anterior, para crear un enlace que apunte a la página principal de
Google solamente habría que incluir lo siguiente en un documento HTML:
<a href="http://www.google.com">Página principal de Google</a>
Como el atributo href indica una URL, un enlace puede apuntar a cualquier tipo de
recurso al que pueda acceder el navegador. El siguiente enlace apunta a una imagen, que
se mostrará en el navegador cuando el usuario pinche sobre el enlace:
<a href="http://www.ejemplo.com/fondo_escritorio.jpg">Imagen interesante

para un fondo de escritorio</a>
32
El otro atributo básico de la etiqueta <a> es name, que permite definir enlaces dentro de
una misma página web. Si una página es muy larga, puede ser útil mostrar enlaces de
tipo "Saltar hasta la segunda sección", "Volver al principio de la página", etc.
Este tipo de enlaces son especiales, ya que la URL de la página siempre es la misma
para todas las secciones y por tanto, debe añadirse otra parte a las URL para identificar
cada sección
<a name="primera_seccion"></a>
<p>Loremipsum dolor sitamet, consectetueradipiscingelit. Mauris id

ligulaeufelisadipiscing ultrices. Duisgravida leo ut lectus.
Praesentcondimentummattisligula. </p>
...
<a name="segunda_seccion"></a>
<p>Pellentesquemalesuada. In inlacus. Phasellus erat erat, lacinia a,
convallis eu, nonummy et, odio. Aenean urna elit, ultrices id,
placeratvarius, facilisiseget, dolor.</p>
...
El atributo name permite crear "enlaces vacíos" que hacen referencia a secciones dentro
de una misma página. Una vez definidos los "enlaces vacíos", es posible crear un enlace
que apunte directamente a una sección concreta de una página:


< ahref="http://www.ejemplo.com/pagina1.html">Enlace a la página 1</a>
<! -- Enlace directo a la segunda sección de la página -->
<ahref="http://www.ejemplo.com/pagina1.html#segunda_seccion">Enlace a la sección 2
de la página 1 </a>
La sintaxis que se utiliza con estos enlaces es la misma que con los enlaces normales,
salvo que se añade el símbolo # seguido del nombre de la sección a la que se apunta.
Cuando el usuario pincha sobre uno de estos enlaces, el navegador accede a la página
apuntada por la URL y baja directamente a la sección cuyo nombre se indica después
del símbolo #.
También es posible utilizar este tipo de enlaces con URL relativas en una misma página.
El siguiente ejemplo añade enlaces de tipo "Volver al inicio de la página" en varias
secciones:
33
<a name="inicio"></a>
<p>Loremipsum dolor sitamet, consectetueradipiscingelit.

Mauris id
ligulaeufelisadipiscing ultrices. Duisgravida leo ut lectus.
Praesentcondimentummattisligula.</p>
<a href="#inicio">Volver al inicio de la página</a>
...
<p>Pellentesquemalesuada. In inlacus.Phasellus erat erat, lacinia a,

convallis eu, nonummy et, odio.Aenean urna elit, ultrices id,
placeratvarius, facilisiseget, dolor.
</p>
<a href="#inicio">Volver al inicio de la página
</a>
...
Figura 4.1. Ejemplo de uso de enlaces
Ejemplo 2 (Parte 1):
34
<!DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=UTF
-8" />
<title>MiSitio</title>
</head>
<body>
<h1>Mi Sitio</h1>
<p>Contenido de mi sitio.
</p>
<h2>Ultimos proyectos
</h2>
<p>Estos son mis ultimos proyectos.

</p>
<p><ahref="portfolio/indice.html"title="Ultimos proyectos realizados por Mi

Sitio">Acceder a los ultimos proyectos de Mi Sitio
</a></p>
</body>
</html>
Figura 4.2. Ejemplo de uso de enlaces parte 1
Ejemplo 2 (Parte 2):
35
Figura 4.2. Ejemplo de uso de enlaces parte 2

Capítulo 5. Listas
36
En ocasiones, es posible agrupar determinadas palabras o frases en un conjunto de
elementos que tienen más significado de forma conjunta. El menú de navegación de un
sitio web por ejemplo está formado por un grupo de palabras.
El lenguaje HTML define tres tipos diferentes de listas para agrupar los elementos: listas
no ordenadas (se trata de una colección simple de elementos en la que no importa su
orden), listas ordenadas (similar a la anterior, pero los elementos están numerados y por
tanto, importa su orden) y listas de definición (un conjunto de términos y definiciones
similar a un diccionario).
5.1. Listas no ordenadas
Las listas no ordenadas son las más sencillas y las que más se utilizan. Una lista no
ordenada es un conjunto de elementos relacionados entre sí pero para los que no se
indica un orden o secuencia determinados. La etiqueta <ul> encierra todos los elementos
de la lista y la etiqueta <li> cada uno de sus elementos.
<ul> Lista no ordenada

Descripción Se emplea para definir listas no ordenadas
<li> Elemento de una lista

Descripción Se emplea para definir los elementos de las listas (ordenadas y no
ordenadas)
El siguiente có digo HTML muestra un ejemplo sencillo de lista no ordenada:

<html>
<head><title>Ejemplo de etiqueta UL</title></head>
<body>
<h1>Menú</h1>
<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Artículos</li>
<li>Contacto</li>
</ul>
</body>
</html>
37
Figura 5.1. Ejemplo de uso de la etiqueta ul
5.2. Listas ordenadas

Las listas ordenadas son casi idénticas a las listas no ordenadas, salvo que en este caso
loselementos relacionados se muestran siguiendo un orden determinado. Cuando se crea
por ejemplo una lista con las instrucciones de un producto, es importante el orden en el
que se realiza cada paso. Cuando se muestra un índice o tabla de contenidos en un libro,
es importante el orden de cada elemento del índice.
En todos estos casos, la lista más adecuada es la lista ordenada, que se define mediante
la etiqueta <ol>. Los elementos de la lista se definen mediante la etiqueta <li>, la misma
que se utiliza en las listas no ordenadas.
<ol> Lista ordenada

comunes
Atributos -
específicos
Descripción Se emplea para definir listas ordenadas
El siguiente código HTML muestra un ejemplo sencillo de lista ordenada:
38
<html>
<head><title>Ejemplo de etiqueta OL</title></head>
<body>
<h1>Instrucciones</h1>
<ol>
<li>Enchufar correctamente</li>
<li>Comprobar conexiones</li>
<li>Encender el aparato</li>
</ol>
</body>
</html>
Figura 5.2. Ejemplo de uso de la etiqueta ol
El navegador muestra la lista de forma muy parecida a las listas no ordenadas, salvo que
en este caso no se emplean viñetas gráficas en los elementos, sino que se numeran de
forma consecutiva. El tipo de numeración empleada también se puede modificar
aplicando hojas de estilos CSS a los elementos de la lista.
5.3. Listas de definición
Las listas de definición apenas se utilizan en la mayoría de páginas HTML. Su

funcionamiento es similar al de un diccionario, ya que cada elemento de la lista está
formado por términos y definiciones. La etiqueta <dl> crea la lista de definición y las
etiquetas <dt> y <dd> definen respectivamente el término y la descripción de cada
elemento de la lista.
<dl> Lista de definición
39
Descripción Se emplea para definir listas de definición
<dt> Término de una definición

Descripción Se emplea para definir los términos de los elementos de una lista de
definición
<dd> Descripción de una definición

Descripción Se emplea para indicar las definiciones de los elementos de una lista
de definición
El siguiente código HTML muestra un ejemplo sencillo de lista de definición:
<html>
<head><title>Ejemplo de etiqueta DL</title></head >

<body>
<h1>Metalenguajes</h1>
<dl>
<dt>SGML</dt>
<dd>Metalenguaje para la definición de otros lenguajes de marcado</dd>
<dt>XML</dt>
<dd>Lenguaje basado en SGML y que se emplea para describir datos </dd>
</dl>
</body>
</html>
Figura 5.2. Ejemplo de uso de la etiqueta dl
40
Capítulo 6. Imágenes y objetos
6.1. Imágenes
Las imágenes son uno de los elementos más importantes de las páginas Web. Dentro de
las imágenes que se pueden incluir en una página HTML se deben distinguir dos tipos:
las imágenes de contenido y las imágenes de adorno.
Las imágenes de contenido son las que proporcionan información y complementan la

Información textual. Las imágenes de adorno son las que se utilizan para hacer bordes
redondeados, para mostrar pequeños iconos en las listas de elementos, para mostrar
fondos de página, etc.
Las imágenes de contenido se incluyen directamente en el código HTML mediante la

etiqueta <img> y las imágenes de adorno no se deberían incluir en el código HTML,
sino que deberían emplearse hojas de estilos CSS para mostrarlas.
<img> Imagen
comunes
▪src = "url" - Indica la URL de la imagen que se muestra
▪alt = "texto" - Descripción corta de la imagen
▪longdesc = "url" - Indica una URL en la que puede encontrarse una descripción
más detallada de la imagen
▪name = "texto" - Nombre del elemento imagen
▪height = "unidad_de_medida" - Indica la altura con la que se debe mostrar la
Atributos imagen (no es obligatorio que coincida con la altura original de la imagen) ▪width
específicos = "unidad_de_medida" - Indica la anchura con la que se debe mostrar
Descripción Se emplea para incluir imágenes en los documentos
Ejemplo sencillo para incluir una imagen:
<img src="logotipo.gif" alt="Logotipo de Mi Sitio" />
6.2. Objetos
Además de las imágenes, HTML permite incluir en las páginas web otros elementos
mucho más complejos, como applets de Java y vídeos en formato QuickTime o Flash.
La mayoría de este tipo de contenidos no los interpreta el navegador directamente, sino
que hace uso de pequeños programas llamados plugins y que se encargan de tratar con
este tipo de elementos complejos.
41
La etiqueta <object> es la que permite "embeber" o incluir en las páginas HTML
cualquier tipo de contenido complejo:
<object> Objeto
▪ data = "url" - Indica la URL de los datos que utiliza el objeto
▪ classid, codebase, codetype - Información específica que depende del tipo
Atributos de objeto
específicos ▪ type - Indica el tipo de contenido de los datos
▪ height = "unidad_de_medida" - Indica la altura con la que se debe mostrar
el objeto
▪ width = "unidad_de_medida" - Indica la anchura con la que se debe
mostrar el objeto
Descripción Se emplea para embeber objetos en los documentos
El atributo data se emplea para indicar la URL del recurso que se va a incluir. El
atributo type indica el tipo de contenido de los datos del objeto. Los posibles valores de
type están estandarizados y coinciden con los del atributo type de la etiqueta <a> que se
explicó anteriormente.
El propio estándar de HTML incluye ejemplos de uso de esta etiqueta. Incluir un vídeo
en formato MPEG:
<object data="PlanetaTierra.mpeg" type="application/mpeg" />
Capítulo 7. Tablas
42
Desde sus primeras versiones, HTML incluyó el soporte para crear tablas de datos en las
páginas Web. Además de ser sencillo, el modelo definido por HTML es muy flexible y
bastante completo.
Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y
títulos que los que se utilizan en cualquier otro entorno de publicación de documentos:
Figura 7.1. Partes que componen una tabla compleja
Las tablas de HTML pueden contener elementos simples, agrupaciones de filas y de

columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros
elementos complejos. A pesar de que las tablas HTML son fáciles de comprender y
utilizar, son uno de los elementos más polémicos de HTML. El problema de las tablas
es que no siempre se utilizan adecuadamente. Aunque parezca obvio, las tablas se deben
utilizar para mostrar información tabular.
Aunque algunos malos diseñadores siguen utilizando hoy en día las tablas para definir la
estructura completa de las páginas web, se trata de una técnica obsoleta y nada
recomendable.
El motivo es que se complica en exceso el código HTML y su mantenimiento es muy

complejo. La solución correcta para definir la estructura de las páginas consiste en la
utilización de hojas de estilos CSS.
7.1. Tablas
Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr>
para crear cada fila y <td> para crear cada columna.
43
A continuación se muestra el código HTML de una tabla sencilla:
<html>
<head><title>Ejemplo de tabla sencilla</title></head>
<body>
<h1>Listado de cursos</h1>
<table>
<tr>
<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td>
</tr>
<tr>
<td>CSS</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>HTML</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>Dreamweaver</td>
<td>60</td>
<td>16:00 - 20:00</td>
</tr>
</table>
</body>
</html>
44
Figura 7.2. Ejemplo de tabla sencilla creada con las etiquetas table, tr y td
La etiqueta <table> encierra todas las filas y columnas de la tabla. Las etiquetas <tr>
(del inglés "tablerow") definen cada fila de la tabla y encierran todas las columnas. Por
último, la etiqueta <td> (del inglés "table data cell") define cada una de las columnas de
las filas, aunque realmente HTML no define columnas sino celdas de datos.
Al definir una tabla, se debe pensar en primer lugar en las filas que la forman y a
continuación en las columnas. El motivo es que HTML procesa primero las filas y por
eso las etiquetas <tr> aparecen antes que las etiquetas <td>.
<table> Tabla

Atributos específicos summary = - Permite describir el contenido de la tabla (lo
"texto" los buscadores y las personas discapacitadas)
utilizan
Descripción Se emplea para definir tablas de datos
<tr> Fila de tabla

Descripción Se emplea para definir cada fila de las tablas de datos
<td> Celda de tabla

Atributos específicos abbr = "texto" - Permite describir el contenido de la celda (se
45
emplea sobre todo con los navegadores de voz utilizados por
personas discapacitadas)
- Indica las celdas que actúan como
headers = "lista_de_id"
cabeceras para esta celda (los títulos de las columnas y filas). Se
indica como una lista de valores del atributo "id" de celdas scope
= "col, row, colgroup, rowgroup" - Indica las celdas para las que
esta celda será su cabecera. Ej: scope="col" indica que esta
celda es la cabecera de todas las demás celdas que están en la
misma columna
colspan = "numero" - Número de columnas que ocupa esta celda
rowspan = "numero" - Número de filas que ocupa esta celda
Descripción Se emplea para definir cada una de las celdas que forman las filas
de una tabla, es decir, las columnas de la tabla
Las tablas complejas suelen disponer de una estructura irregular que junta varias
columnas para formar una columna ancha o une varias filas para formar una fila más
alta que las demás. Para fusionar filas o columnas, se utilizan los atributos rowspan y
colspan respectivamente.
La siguiente imagen muestra una tabla compleja que ha fusionado dos columnas simples
para formar una columna más ancha:
Para obtener una tabla como la de la imagen anterior, se debe utilizar el siguiente
código:
46
<table>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
De forma equivalente, si se quiere diseñar una tabla HTML que fusiona filas como la de
lasiguiente imagen:
El código HTML que se debe utilizar para obtener la tabla de la imagen anterior es:
<table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
<td>C</td>
</tr>
</table>
Normalmente, algunas de las celdas de la tabla se utilizan como cabecera de las demás
celdas de la fila o de la columna. En este caso, HTML define la etiqueta <th> (del inglés
"table header cell") para indicar que una celda es cabecera de otras celdas.
47
<th> Celda cabecera de tabla

comunes
Atributos abbr = - Permite describir el contenido de la celda (se emplea sobre
específicos todo
"texto"
con los navegadores de voz utilizados por personas discapacitadas)
headers - Indica
= las celdas que actúan como cabeceras para
esta celda (los
"lista_de_id" títulos de las columnas y filas). Se indica como una lista de
de celdas
ID
scope = "col, row, colgroup, rowgroup" - Indica las celdas para las que esta
celda será su cabecera. Ej: scope="col" indica que esta celda es la cabecera de
todas las demás celdas que están en la misma columna
colspan = - Número de columnas que ocupa esta celda
"numero"
rowspan = - Número de filas que ocupa esta celda
"numero"
Tipo de Bloque
elemento
Descripción Se emplea para definir las celdas que son cabecera de una fila o de una
columna de la tabla
Por otra parte, HTML define la etiqueta <caption> para establecer la leyenda o título de
una tabla. La etiqueta debe colocarse inmediatamente después de la etiqueta <table> y
cada tabla sólo puede incluir una etiqueta <caption>.
<caption> Leyenda o título de tabla

Tipo de elemento En línea
Descripción Se emplea para definir la leyenda o título de una tabla
Capítulo 8. Formularios
48
HTML es un lenguaje de marcado cuyo propósito principal consiste en estructurar los
contenidos de los documentos y páginas web. Sin embargo, HTML también incluye
elementos
para crear aplicaciones web. El estándar HTML/XHTML permite crear formularios para
que los usuarios interactúen con las aplicaciones web.
Los años transcurridos desde la publicación de los estándares de HTML y XHTML ha

provocado que no estén disponibles todos los elementos utilizados por los formularios
más avanzados y modernos. No obstante, HTML/XHTML incluye los suficientes
elementos de formulario para crear desde los formularios sencillos que utilizan los
buscadores hasta los formularios complejos de las aplicaciones más avanzadas.
8.1. Formularios básicos
Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas:
<form> y <input>. Si se considera el formulario que muestra la siguiente imagen:
Figura 8.1. Formulario sencillo definido con las etiquetas form e input
El código HTML necesario para definir el formulario anterior se muestra a

continuación:
49
<html>
<head><title>Ejemplo de formulario sencillo</title></head
>
<body>
<h3>Formulario muy sencillo</h
3>
<form action="http://www.librosweb.es/maneja_formulario.php"
method="post">
Escribe tu nombre:
<input type="text" name="nombre" value=""
> /
<br/>
<inputtype="submit" value="Enviar" />
</form>
</body>
</html>
</table>
<td>C</td>
</tr>
</table>
La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros de
texto, listas desplegables) y la etiqueta <input> permite definir varios tipos diferentes de
elementos (botones y cuadros de texto).
<form> Formulario
▪ action = "url" - Indica la URL que se encarga de procesar los datos del
formulario
▪ method = "POST o GET" - Método HTTP empleado al enviar el formulario
▪ enctype = "application/x-www-form-urlencoded o multipart/ form-data" -
Atributos Tipo de codificación empleada al enviar el formulario al servidor (sólo se
específicos indica de forma explícita en los formularios que permiten adjuntar archivos)
▪ accept = "tipo_de_contenido" - Lista separada por comas de todos los tipos
de archivos aceptados por el servidor (sólo para los formularios que permiten
adjuntar archivos)
▪ Otros: accept-charset, onsubmit, onreset
Descripción Se emplea para insertar un formulario en la página
La mayoría de formularios utilizan sólo los atributos action y method. El atributo action
indica la URL de la aplicación del servidor que se encarga de procesar los datos
introducidos por los usuarios. Esta aplicación también se encarga de generar la respuesta
que muestra el navegador. El atributo method establece la forma en la que se envian los
datos del formulario al servidor. Este atributo hace referencia al método HTTP, por lo
que no es algo propio de HTML. Los dos valores que se utilizan en los formularios son
GET y POST. De esta forma, casi todos los formularios incluyen el atributo
method="get" o el atributo method="post".
50
Al margen de otras diferencias técnicas, el método POST permite el envío de mucha
más información que el método GET. En general, el método GET admite como máximo
el envío de unos 500 bytes de información. La otra gran limitación del método GET es
que no permite el envío de archivos adjuntos con el formulario. Además, los datos
enviados mediante GET se ven en la barra de direcciones del navegador (se añaden al
final de la URL de la página), mientras que los datos enviados mediante POST no se
pueden ver tan fácilmente.
Si no sabes que método elegir para un formulario, existe una regla general que dice que
el método GET se debe utilizar en los formularios que no modifican la información (por
ejemplo en un formulario de búsqueda). Por su parte, el método POST se debería
utilizar cuando el formulario modifica la información original (insertar, modificar o
borrar alguna información).
8.2. Elementos de formulario
Los elementos de formulario como botones y cuadros de texto también se denominan

"campos de formulario" y "controles de formulario". La mayoría de controles se crean
con la etiqueta <input>, por lo que su definición formal y su lista de atributos son muy
extensas:
<input> Control de un formulario
51
▪ type = "text | password | checkbox | radio | submit | reset|file | hidden
| image | button" - Indica el tipo de control que se incluye en el
formulario
▪ name = "texto" - Asigna un nombre al control (es imprescindible para
que el servidor pueda procesar el formulario)
▪ value = "texto" - Valor inicial del control
▪ size = "unidad_de_medida" - Tamaño inicial del control (para los
campos de texto y de password se refiere al número de caracteres, en
el resto de controles se refiere a su tamaño en píxel)
Atributos específicos ▪ maxlength = "numero" - Máximo número de caracteres para los
controles de texto y de password
▪ checked = "checked" - Para los controles checkbox y radiobutton
permite indicar qué opción aparece preseleccionada
▪ disabled = "disabled" - El control aparece deshabilitado y su valor no
se envía al servidor junto con el resto de datos
▪ readonly = "readonly" - El contenido del control no se puede
modificar
▪ src = "url" - Para el control que permite crear botones con imágenes,
indica la URL de la imagen que se emplea como botón de formulario ▪
alt = "texto" - Descripción del control
Descripción Se emplean para insertar un control en un formulario
A continuación se muestran ejemplos para los diez controles que se pueden crear con la
etiqueta <input>.
8.2.1. Cuadro de texto
Se trata del elemento más utilizado en los formularios. En el caso más sencillo, se
muestra un cuadro de texto vacío en el que el usuario puede escribir cualquier texto:
Figura 8.1. Ejemplo de etiqueta input (type=text)
A continuación se muestra el código HTML correspondiente al ejemplo anterior:

Nombre <br/>
<input type="text" name="nombre" value="" />
El atributo type diferencia a cada uno de los diez controles que se pueden crear con la
etiqueta <input>. Para los cuadros de texto, su valor es text. El atributo name es el más
importante en los campos del formulario. De hecho, si un campo no incluye el atributo
name, sus datos no se envían al servidor. El valor que se indica en el atributo name es el
52
nombre que utiliza la aplicación del servidor para obtener el valor de este campo de
formulario.
El atributo value se emplea para establecer el valor inicial del cuadro de texto. Si se crea
un formulario para insertar datos, los cuadros de texto deberían estar vacíos. Por lo
tanto, o no se añade el atributo value o se incluye con un valor vacío value="". Si por el
contrario se crea un formulario para modificar datos, lo lógico es que se muestren
inicialmente los datos guardados en el sistema. En este caso, el atributo value incluirá el
valor que se desea mostrar: <input type="text" name="nombre" value="Juan Pérez" />
El atributo size permite establecer el tamaño, en caracteres, con el que se muestra el

cuadro de texto. Su uso es imprescindible en muchos formularios, en los que algunos
campos como la dirección deben mostrar más caracteres de lo normal (<input
size="100”...) y otros campos como el código postal deben mostrar menos caracteres de
lo normal (<input size="5"...). Por último, el atributo readonly permite que el usuario
pueda ver los contenidos del cuadro de texto pero no pueda modificarlos y el atributo
disabled deshabilita un cuadro de texto de forma que el usuario no pueda modificarlo y
además, el navegador no envía sus datos al servidor.
8.2.2. Cuadro de contraseña
La única diferencia entre este control y el cuadro de texto normal es que el texto que el
usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su lugar, los
navegadores ocultan el texto utilizando asteriscos o círculos, por lo que es ideal para
escribir contraseñas y otros datos sensibles.
Figura 8.2. Ejemplo de etiqueta input (type=password)
A continuación se muestra el código HTML correspondiente al ejemplo anterior:
Contraseña<br/>
<input type="password" name="contrasena" value="" />
8.2.3. Checkbox
Los checkbox o "casillas de verificación" son controles de formulario que permiten al

usuario seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se
53
muestran varios checkbox juntos, cada uno de ellos es completamente independiente del
resto. Por este motivo, se utilizan cuando el usuario puede activar y desactivar varias
opciones relacionadas pero no excluyentes.
Figura 8.3. Ejemplo de etiqueta input (type=checkbox)
A continuación se muestra el código HTML correspondiente al ejemplo anterior
Puestos de trabajo buscados <br/>

<input name="puesto_directivo" type="checkbox" value="direccion"/> Dirección
<input name="puesto_tecnico" type="checkbox" value="tecnico"/> Técnico <input
name="puesto_empleado" type="checkbox" value="empleado"/> Empleado
El valor del atributo type para estos controles de formulario es checkbox. Como se
muestra en el ejemplo anterior, el texto que se encuentra al lado de cada checkbox no se
puede establecer mediante ningún atributo, por lo que es necesario añadirlo
manualmente fuera del control del formulario. Si no se añade un texto al lado de la
etiqueta <input /> del checkbox, el usuario sólo ve un pequeño cuadrado sin ninguna
información relativa a la finalidad de ese checkbox.
8.2.4. Radiobutton
Los controles de tipo radiobutton son similares a los controles de tipo checkbox, pero
presentan una diferencia muy importante: son mutuamente excluyentes. Los radiobutton
se utilizan cuando el usuario solamente puede escoger una opción entre las distintas
opciones relacionadas que se le presentan. Cada vez que se selecciona una opción,
automáticamente se deselecciona la otra opción que estaba seleccionaba.
54
Figura 8.4. Ejemplo de etiqueta input (type=radio)
Sexo<br/>
<input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre
<input type="radio" name="sexo" value="mujer" />Mujer
El valor del atributo type para estos controles de formulario es radio. El atributo name se
emplea para indicar los radiobutton que están relacionados. Por lo tanto, cuando varios
radiobutton tienen el mismo valor en su atributo name, el navegador sabe que están
relacionados y puede deseleccionar una opción del grupo de radiobutton cuando se
seleccione otra opción.
8.2.5. Botón de envío de formulario
La mayoría de formularios dispone de un botón para enviar al servidor los datos

introducidos por el usuario:
Figura 8.5. Ejemplo de etiqueta input (type=submit)
<input type="submit" name="buscar" value="Buscar" />
El valor del atributo type para este control de formulario es submit. El navegador se
encarga de enviar automáticamente los datos cuando el usuario pincha sobre este tipo de
botón. El valor del atributo value es el texto que muestra el botón. Si no se establece el
atributo value, el navegador muestra el texto predefinido Enviar consulta.
8.2.6. Ficheros adjuntos
Los formularios también permiten adjuntar archivos para subirlos al servidor. Aunque
desde el punto de vista de HTML y del navegador no existe ninguna limitación sobre el
número, tipo o tamaño total de los archivos que se pueden adjuntar, todos los servidores
añaden restricciones por motivos de seguridad.
55
Figura 8.6. Ejemplo de etiqueta input (type=file)
Ficheroadjunto
<input type="file" name="adjunto" />
El valor del atributo type para este control de formulario es file. El navegador se encarga
de mostrar un cuadro de texto donde aparece el nombre del archivo seleccionado y un
botón que permite navegar por los directorios y archivos del ordenador del usuario.
Si se incluye un control para adjuntar archivos, es obligatorio añadir el atributo enctype

en la etiqueta <form> del formulario. El valor del atributo enctype debe ser
multipart/form-data, por lo que la etiqueta <form> de los formularios que permiten
adjuntar archivos siempre es:
<form action="..." method="post" enctype="multipart/form-data">
8.2.7. Botón de imagen
El aspecto de los botones de formulario se puede personalizar por completo, ya que

incluso es posible utilizar una imagen como botón:
Figura 8.7. Ejemplo de etiqueta input (type=image)
<input type="image" name="enviar" src="accept.png" />

El valor del atributo type para este control de formulario es image. El atributo src indica
la URL de la imagen que debe mostrar el navegador en lugar del botón normal.
Su principal ventaja es que permite personalizar por completo la estética de los botones
y mostrarlos con un aspecto homogéneo en todos los navegadores. El principal
inconveniente es que ralentiza la carga del formulario y que si se quiere modificar su
aspecto, es necesario crear una nueva imagen.
8.2.8. Botón
56
Algunos formularios complejos necesitan botones más avanzados que los de enviar
datos (type="submit") y resetear el formulario (type="reset"). Por ese motivo, el
estándar HTML/XHTML define un botón de tipo genérico:
Figura 8.9. Ejemplo de etiqueta input (type=button)
<input type="button" name="guardar" value="Guardar Cambios" / >
El valor del atributo type para este control de formulario es button. Si pruebas a pulsar
un botón de este tipo, verás que el navegador no hace nada: no envía los datos al
servidor y no borra los datos introducidos. Este tipo de botones sólo son útiles si se
utilizan junto con el lenguaje de programación JavaScript. Si la página incluye código
JavaScript, los botones de este tipo se pueden programar para que realicen cualquier
tarea compleja cuando se pulsa sobre ellos.
8.3. Formularios avanzados
Utilizando solamente las etiquetas <form> y <input> es posible diseñar la mayoría de

formularios de las aplicaciones web. No obstante, HTML define algunos elementos
adicionales para mejorar la estructura de los formularios creados.
La siguiente imagen muestra un formulario que agrupa sus elementos y añade etiquetas
a cada campo para mejorar su estructura:
57
Figura 8.10. Ejemplo de uso de las etiquetas fieldset y legend
La etiqueta <fieldset> agrupa campos del formulario y la etiqueta <legend> asigna un

nombre a cada grupo.
<fieldset> Agrupación de campos
Atributos -
específicos
Descripción Se emplea para agrupar de forma lógica varios campos de un
formulario
<legend> Título o leyenda de un fieldset

Descripción Se emplea para definir el título o leyenda de un conjunto de campos

de formulario
agrupados con la etiqueta fieldset
58
A continuación se muestra el código HTML del formulario correspondiente a la imagen
anterior y que hace uso de <fieldset> y <legend> para agrupar los campos del formulario:
<form action="maneja_formulario.php" method="post">

<fieldset>
<legend>Datospersonales</legend>
Nombre<br/>
<input type="text" name="nombre" value="" >/
<br/>
Apellidos<br/>
<input type="text" name="apellidos" value=""
>/
<br/>
DNI <br/>
<input type="text" name="dni" value="" size="10" maxlength="9"
> /
</fieldset>
<fieldset>
<legend>Datos de conexión</legend>
Nombre de usuario<br/>
<input type="text" name="nombre" value="" maxlength="10"> /
<br/>
Contraseña<br/>
<input type="password" name="password" value="" maxlength="10" > /
<br/>
Repite la contraseña<br/>
<input type="password" name="password2" value="" maxlength="10" />
</fieldset>
</form>
La etiqueta <fieldset> agrupa todos los controles de formulario a los que encierra. El
navegador muestra por defecto un borde resaltado para cada agrupación. La etiqueta
<legend> se incluye dentro de cada etiqueta <fieldset> y establece el título que muestra
el navegador para cada agrupación de elementos.
8.4. Otros elementos de formulario
La etiqueta <input> permite crear diez tipos diferentes de controles de formulario. Sin
embargo, algunas aplicaciones web utilizan otros elementos de formulario que no se
pueden crear con <input>. Las listas deplegables y las áreas de texto disponen de sus
propias etiquetas (<select> y <textarea> respectivamente).
Las áreas de texto son útiles cuando se debe introducir una gran cantidad de texto, ya
que es mucho más cómodo de introducir que en un campo de texto normal:
59
Figura 8.11. Ejemplo de uso de la etiqueta textarea
El código HTML del ejemplo anterior se muestra a continuación:
<form action="insertar_producto.php" method="post"> <labelfor="nombre">Nombre

del producto</label><br/>
<input type="text" id="nombre" name="nombre" value="" />

<labelfor="descripcion">Descripción del producto</label><br/>
<textarea id="descripcion" name="descripcion" cols="40" rows="5"></textarea>
</form>
La definición formal de la etiqueta <textarea> es:

<textarea> Área de texto
60
▪ rows = "numero" - Número de filas de texto que mostrará el
Atributos textarea
específicos ▪ cols = "numero" - Número de caracteres que se muestran
en cada fila del textarea
▪ Otros: name, disabled, readonly, onselect, onchange, onfocus,
onblur
Descripcón Se emplea para incluir un área de texto en un formulario
Los atributos más utilizados en las etiquetas <textarea> son los que controlan su anchura
y altura. La anchura del área de texto se controla mediante el atributo cols, que indica
las columnas o número de caracteres que se podrán escribir como máximo en cada fila.
La altura del área de texto se controla mediante rows, que indica directamente las filas
de texto que serán visibles.
Por otra parte, el otro control disponible para los formularios es el de las listas
desplegables:
Figura 8.12. Ejemplo de uso de la etiqueta select
La imagen anterior muestra los tres tipos de listas desplegables disponibles. El primero
es el de las listas más utilizadas que sólo muestran un valor cada vez y sólo permiten
seleccionar un valor. El segundo tipo de lista es el que sólo permite seleccionar un valor
61
pero muestra varios a la vez. Por último, el tercer tipo de lista desplegable es aquella que
muestra varios valores y permite realizar selecciones múltiples
El código HTML del ejemplo anterior se muestra a continuación:
<label for="so">Sistemaoperativo</label><br/>
<select id="so" name="so">
<option value="" selected="selected">- selecciona -</option>
<option value="windows">Windows</option>
<option value="mac">Mac</option>
<option value="linux">Linux</option>
<option value="otro">Otro</option>
</select>
<label for="so2">Sistemaoperativo</label><br/>
<select id="so2" name="so2" size="5">
<option value="windows" selected="selected">Windows</option>
</select>
<label for="so3">Sistemaoperativo</label><br/>
<select id="so3" name="so3" size="5" multiple="multiple">
<option value="windows" selected="selected">Windows</option>
<option value="otro">Otro</option> </select>
Los tres tipos de listas desplegables se definen con la misma etiqueta <select> y cada
elemento de la lista se define mediante la etiqueta <option>:
<select> Lista desplegable

62
▪ size = "numero" - Número de filas que se muestran de la lista (por
defecto sólo se muestra una)
Atributos ▪ multiple = "multiple" - Si se incluye, se permite seleccionar más
específicos de un elemento
▪ Otros: name, disabled, onchange, onfocus, onblur
Se emplea para incluir una lista desplegable en un formulario

Descripción
<option> Lista desplegable

▪ selected = "selected" - Indica si el elemento aparece seleccionado
Atributos por
específicos defecto al cargarse la página
▪ value = "texto" - El valor que se envía al servidor cuando el
usuario elige esa opción ▪ Otros: label, disabled
Descripción Se emplea para definir cada elemento de una lista desplegable
La inmensa mayoría de listas desplegables que utilizan las aplicaciones web son
simples, por lo que el código HTML habitual de las listas desplegables es:
<label for="so">Sistemaoperativo</label><br/>
<select id="so" name="so">
<option value="" selected="selected">- selecciona -</option>
<option value="windows">Windows</option>
</select>
La etiqueta <select> define la lista y encierra todas las opciones que muestra la lista.
Cada una de las opciones de la lista se define mediante una etiqueta <option>. El
atributo value de cada opción es obligatorio, ya que es el dato que se envía al servidor
cuando el usuario envía el formulario. Para seleccionar por defecto una opción al
mostrar la lista, se añade el atributo selected a la opción deseada.
La etiqueta <select> define la lista y encierra todas las opciones que muestra la lista.
Cada una de las opciones de la lista se define mediante una etiqueta <option>. El
atributo value de cada opción es obligatorio, ya que es el dato que se envía al servidor
63
cuando el usuario envía el formulario. Para seleccionar por defecto una opción al
mostrar la lista, se añade el atributo selected a la opción deseada. Por otra parte, las
listas desplegables permiten agrupar sus opciones de forma que el usuario pueda
encontrar fácilmente las opciones cuando la lista es muy larga.
Figura 8.13. Ejemplo de uso de la etiqueta optgroup
<form id="formulario" method="post" action="">

<labelfor="programa">Programa seleccionado</label><br/>
<select id="programa" name="programa">
<optgroup label="SistemasOperativos">
<option value="Windows" selected="selected">Windows</option>
<option value="Mac">Mac</option>
64
<option value="Linux">Linux</option> <option
value="Other">Otro</option>
</optgroup>
<optgroup label="Navegadores">
<option value="Internet Explorer" selected="selected">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Safari">Safari</option>
<option value="Opera">Opera</option>
<option value="Other">Otro</option>
</optgroup>
</select>
</form>
La etiqueta <optgroup> permite agrupar opciones relacionadas dentro de una lista

desplegable.
Su definición formal se muestra a continuación:
<optgroup> Agrupación de elementos de una lista desplegable

Atributos ▪ label = "texto" - Texto que se muestra como título de la
específicos agrupación de opciones ▪ Otros: disabled, selected
Descripción Se emplea para definir una agrupación lógica de opciones de una

lista desplegable
El único atributo que suele utilizarse con la etiqueta <optgroup> es label, que indica el
nombre de cada agrupación. Los navegadores muestran de forma destacada el título de
cada agrupación, de forma que el usuario pueda localizar más fácilmente la opción
deseada.
Capítulo 9. Otras etiquetas importantes
9.1. Comentarios
HTML permite incluir comentarios dentro de su código para añadir información que no
se debe mostrar por pantalla.
65
La sintaxis de los comentarios es la siguiente:
• Apertura del comentario: 
El siguiente ejemplo muestra el uso de los comentarios HTML para indicar el comienzo
y final de cada sección.

<divid="menu">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>



<divid="publicidad"> ...</div>

9.2. Iframes
Aunque su uso no es muy común, la etiqueta <iframe> puede ser muy útil en
determinadas ocasiones, ya que permite insertar un documento HTML dentro de otro
documento HTML. Un iframe puede considerarse como un agujero que se abre en una
página web y a través del cual se muestra otra página web.
En ocasiones se utiliza para mostrar contenidos externos al sitio web como si fueran
parte del mismo sitio. Otra veces se emplea para incluir una aplicación común a varios
sitios web de una misma empresa.
La página principal de Google Analytics emplea un <iframe> para incluir en un

pequeño recuadro la página correspondiente a la validación de usuario.
66
Figura 9.1. Ejemplo de página con un iframe
<iframe> Marco (frame) en línea
Atributos básicos
comunes
Atributos src =- URL del documento HTML que se visualiza en el iframe

específicos "url" - Altura que ocupará el iframe en el documento
height =
- Anchura que ocupará el iframe en el documento
"longitud" width =
- Nombre que identifica al iframe
"longitud" name =
- Dirección en la que puede encontrarse una
"texto" longdesc =
descripción larga del contenido del iframe
"url"
scrolling = "yes | no | auto" - Indica si el iframe debe mostrar barras de
scroll (horizontal y vertical) cuando el contenido incluido no cabe
en el
iframe
Tipo de Bloque y en línea
elemento
67
Descripción Se emplea para incluir en la página un marco que muestra otro
documento HTML
BIBLIOGRAFÍA
68

Monografia de Ejemplo Prueba de Fuego

Cargado por

Copyright:

Formatos disponibles

Monografia de Ejemplo Prueba de Fuego

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Monografia de Ejemplo Prueba de Fuego

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD CIENTÍFICA DEL PERÚ

HERRAMIENTAS DE PROGRAMACIÓN PARA INTERNET

“Desarrollo de páginas Web con HTML”

CAPITULO II: Características básicas…….……...…………………………………….5

CAPITULO III: Texto ………………………………………………………......66

CAPITULO IV: Enlaces……………………………………………………………….66

CAPITULO VII: Tablas………………………………………………………….…….66

CAPITULO IX: Otras etiquetas importantes …………………………………….….66

1.1. ¿Qué es HTML?

El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define

1.2. Historia del HTML

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador

Los sistemas de "hipertexto" habían sido desarrollados años antes. En el ámbito de la

Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo presentó a

El primer documento formal con la descripción de HTML se publicó en 1991 bajo el

A partir de 1996, los estándares de HTML los publica otro organismo de

HTML 4.0 se publicó el 24 de Abril de 1998 (siendo una versión corregida de la

La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se

Desde la publicación de HTML 4.01, la actividad de estandarización de HTML se

De forma paralela a su actividad con HTML, W3C ha continuado con la estandarización

1.3. Especificación oficial

• Especificación oficial de HTML 4.01

1.4. HTML Y XHTML

El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es más

Actualmente, entre HTML 4.01 y XHTML 1.0, la mayoría de diseñadores escogen

CAPITULO 2. Características básicas

2.1. Lenguajes de etiquetas

El proceso de transformación de caracteres en secuencias de números se denomina

Una vez resuelto el problema de almacenar el texto simple, se presenta el reto de

El principio de un párrafo se indica mediante la palabra <parrafo> y el final de un

El proceso de indicar las diferentes partes que componen la información se denomina

Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera

Figura 2.2. Esquema de las partes que forman un documento HTML

El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la

Es importante conocer las tres etiquetas principales de un documento HTML (<html>,

2.3. Etiquetas y atributos

Muchas etiquetas requieren cierta información adicional para estar completamente

Figura 2.4. Los atributos permiten personalizar las etiquetas HTML

lang = "codigo Indica el idioma del elemento mediante un código predefinido

onclick, ondblclick, onmousedown, Permiten controlar los eventos

accesskey Establece una tecla de acceso rápido a un elemento HTML

2.4. Elementos HTML

• Una etiqueta de apertura.

Figura 2.5. Esquema de las partes que componen un elemento HTML

2.5. Sintaxis de las etiquetas XHTML

A continuación se muestran las cinco restricciones básicas que introduce XHTML

1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:

Ejemplo correcto en XHTML:

<p>Este es un párrafo con <a>un enlace</a></p>

Ejemplo incorrecto en XHTML (pero correcto en HTML):

<p>Este es un párrafo con <a>un enlace</p></a>

2) Los nombres de las etiquetas y atributos siempre se escriben en minúsculas:

Ejemplo correcto en XHTML:

<p>Este es un párrafo con <ahref="http://www.google.com">un enlace</a></p>

Ejemplo incorrecto en XHTML (pero correcto en HTML):

<P>Este es un párrafo con <AHREF="http://www.google.com">un enlace</A></P>

3) El valor de los atributos siempre se encierra con comillas:

Ejemplo correcto en XHTML:

<p>Este es un párrafo con <ahref="http://www.google.com">un enlace</a></p>

<p>Este es un párrafo con <ahref=http://www.google.com>un enlace</a></p>