Utilización de lenguajes de marcas en entornos

web.

Caso práctico
Después de asociarse, María y Félix esperan aumentar el número de clientes de su negocio teniendo presencia en
Internet, para ello hablan con Juan, técnico superior en Administración de Sistemas Informáticos.

Juan les aconseja desarrollar una sencilla página web para la empresa, cuya funcionalidad puede ir aumentando a
medida que aumenten sus necesidades. Por lo que el primer paso, será encargárselo a alguien que conozca el
lenguaje HTML.

María le pregunta a Juan por su disponibilidad y capacidad para realizar dicha tarea. Juan le contesta que aprendió
HTML en 1998. El boom de Internet le animó a interesarse por este campo y en este lenguaje realizó su primera
página web. Desde entonces el lenguaje ha sufrido cambios en los que se ha ido actualizando.

Orientaciones para el alumnado

En esta unidad de trabajo estudiarás el lenguaje HTML y el uso de las hojas de estilos CSS. Al finalizar la unidad
podrás elaborar páginas web sencillas.

Ministerio de Educación y Formación Profesional. (Dominio

público)

Materiales formativos de FP Online propiedad del Ministerio de Educación y Formación

Profesional.
Aviso Legal
1.- Introducción a la utilización de lenguajes de
marcas en entornos web.

Orientaciones para el alumnado

En este primer apartado de la UT2 aprenderás sobre la evolución del lenguaje HTML y las características del
XHTML. Descubrirás cual es la estructura de un documento HTML y aprenderás a identificar las etiquetas y los
atributos que forman el lenguaje. Por último conocerás los atributos comunes a todas las etiquetas HTML.

Para poder aprovechar todo el contenido de la unidad es recomendable que a la vez que lees los contenidos tengas
preparado algún editor de HTML para ir probando los ejemplos que acompañan a las explicaciones.
1.1.- HTML: evolución y versiones.

HTML es el lenguaje utilizado para crear la mayor parte de las páginas web. Es un
estándar reconocido en todos los navegadores, por lo tanto, todos ellos visualizan
una página HTML de forma muy similar independientemente del sistema operativo
sobre el que se ejecutan.

El origen de HTML fue un sistema de hipertexto para compartir documentos

electrónicos en 1990. La primera propuesta oficial para convertir HTML en un
estándar se realizó en 1993. Ninguna de las dos primeras propuestas de estándar
que se hicieron (HTML y HTML+) consiguieron convertirse en estándares oficiales.

HTML 2.0 fue la primera versión oficial de HTML. El IETF publicó el

estándar en septiembre de 1995.
HTML 3.2 se publicó el 14 de Enero de 1997, por el W3C. Incorporaba ITE (Uso Educativo NC)

los applets de Java y texto alrededor de las imágenes.

HTML 4.0 se publicó el 24 de Abril de 1998. Entre las novedades que presentaba se encontraban las hojas de estilos CSS y
la posibilidad de incluir pequeños programas en las páginas web.
HTML 4.01 se publicó el 24 de diciembre de 1999, como actualización de la versión anterior. En ese momento el W3C detuvo
la actividad de estandarización de HTML hasta marzo de 2007, momento en que se retoma debido a la fuerza de las
empresas que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, que será la siguiente versión
de este lenguaje.
HTML 5 es la versión más avanzada y la que se considera estándar actualmente, aunque ha ido evolucionando por
diferentes especificaciones (HTML 5.1, HTML 5.2 y HTML 5.3). Es una versión viva en la que se sigue trabajando y su
estándar actual (HTML 5.3) fue definido el 18 de octubre de 2018. Puedes encontrar las especificaciones de la última versión
de HTML en el siguiente enlace.

Permite crear documentos interactivos que proporcionan información adicional cuando se solicita mediante "hiperenlaces", también
llamados "enlace", que relacionan dos recursos. Dichos recursos pueden ser otras páginas web, imágenes, documentos o
archivos.

Acrónimo. Inglés. IETF = Internet Engineering Task Force, significa Grupo Especial sobre Ingeniería de Internet. Institución sin
ánimo de lucro que establece las modificaciones de los protocolos y arquitectura de Internet.

Son pequeños programas escritos en lenguaje Java que puede incrustarse en un documento HTML permitiendo obtener una gran
variedad de efectos en las páginas web. Entre sus características es digno de mencionar un esquema de seguridad que impide
que los applets que se ejecutan en el equipo tengan acceso a partes sensibles del sistema, a menos que uno mismo le dé los
permisos necesarios.

(Web Hypertext Application Technology Working Group). Organización fundada por trabajadores de las empresas Apple, Mozilla y
Opera en 2004, su interés es ayudar a la organización W3C para regular todos los estándares que forman parte de la Web.

(Web Hypertext Application Technology Working Group). Organización fundada por trabajadores de las empresas Apple, Mozilla y
Opera en 2004, su interés es ayudar a la organización W3C para regular todos los estándares que forman parte de la Web.
1.2.- HTML y XHTML.

Caso práctico
Puesto que Juan ha aceptado realizar la página web se plantea el hacerla en HTML o en XHTML consulta con
Marina, trabajadora de su empresa informática.

Marina opina que, desde un punto de vista formal, no hay diferencias sustanciales entre utilizar uno u otro lenguaje,
y siguiendo la evolución lógica le parece que sería más apropiado utilizar XHTML y añade que este lenguaje tiene la
ventaja de ser compatible con navegadores antiguos.

Juan opina que es una buena opción, pero que algunos navegadores, a pesar de ser compatibles con el lenguaje no
interpretan los formatos.

El lenguaje XHTML (EXtensible HyperText Markup Language) es muy

similar al lenguaje HTML. De hecho, no es más que una adaptación
de HTML al lenguaje XML.

El estándar XHTML 1.0 sólo añade pequeñas mejoras y

modificaciones menores al estándar HTML 4.01, por lo que este
último está prácticamente incluido en el primero. Pasar del HTML 4.01
Strict a XHTML no requiere casi ningún cambio.

El lenguaje HTML tiene una sintaxis muy permisiva, por lo que es

posible escribir sus etiquetas y atributos de muchas formas diferentes.
Las etiquetas, por ejemplo, pueden escribirse en mayúsculas,
minúsculas e incluso combinando mayúsculas y minúsculas. El valor
de los atributos de las etiquetas se pueden indicar con o sin comillas.
Además, el orden en el que se abrían y cerraban las etiquetas no era
importante.

La flexibilidad de HTML da lugar a páginas con un código

desordenado, difícil de mantener y muy poco profesional. Ana Polo Arozamena desde imágenes openclipart-0.18-full (Uso Educativo NC)

XHTML soluciona estos problemas añadiendo ciertas normas en la

forma de escribir las etiquetas y atributos. Son las normas que vimos en el capítulo 1 para que un fichero XML se considera bien
formado. Así se consigue:

Sencillez a la hora de editar y mantener el código.

Al ser más regular, es más fácil escribir código que lo procese.
Como es XML se pueden utilizar fácilmente herramientas creadas para procesar documentos XML genéricos
(editores, XSLT, etc.).

Diferencias sintácticas y estructurales con HTML

Para que que el código HTML se pueda considerar XML bien formado, y por tanto, XHTML, tiene que cumplir:

Toda la página debe estar contenida en un elemento raíz, .

Los nombres de las etiquetas y atributos siempre se escriben en minúsculas.
El valor de los atributos, incluso los numéricos, siempre se encierra entre comillas.
En los atributos en los que el nombre coincide con su valor, no puede darse el valor por entendido, es decir, no se pueden
comprimir. Este tipo de atributos no son muy habituales.
Todas las etiquetas deben cerrarse siempre. XHTML permite que en lugar de abrir y cerrar de forma consecutiva la etiqueta (

) se puede utilizar la sintaxis

para indicar que es una etiqueta vacía que se abre y se cierra en ese mismo punto.

En general, los diseñadores web suelen trabajar con HTML. El XHTML es más apreciado por los desarrolladores, que aprecian la
regularidad adicional. De cualquier manera, los tres primeros puntos de la anterior lista se consideran una buena práctica y se
suelen cumplir siempre.

Por otro lado, hay que tener en cuenta que los navegadores no procesan HTML y XHTML exactamente igual. En concreto, en caso
de errores para HTML el navegador intentará mostrar el mayor contenido posible. Pero si el documento se sirve como XHTML (con
un tipo MIME XML), cualquier error de sintaxis causa que no se muestre el documento.

Para más información sobre HTML y XHTML, consulta la sección correspondiente en la especificación (inglés).
 Autoevaluación

Pregunta

La aparición del lenguaje XHTML hace que deje de evolucionar el lenguaje HTML:

Respuestas

Sí.

No.

Retroalimentación

Respuesta errónea. Te recomiendo volver a leer el apartado.

Respuesta correcta.

Solución

1. Incorrecto
2. Opción correcta

Pregunta

La principal diferencia entre HTML y XHTML es:

Respuestas

HTML permite usar las etiquetas en mayúsculas y XHTML no.

XHTML da lugar a códigos ordenados.

XHTML es compatible con XML.

HTML es permisivo.
Retroalimentación

No es correcto.

No es la opción correcta.

Correcto.

Incorrecto.

Solución

1. Incorrecto
2. Incorrecto
3. Opción correcta
4. Incorrecto
1.3.- Estructura de un documento HTML.

Caso práctico
Félix pregunta a Juan si existen grandes diferencias entre el XML y el HTML. Juan le explica que ambos lenguajes
tienen origen en otro lenguaje que es el SGML y que sus diferencias son, principalmente, funcionales ya que la
estructura del documento es semejante.

La estructura de una página HTML ha de ser coherente con la que hemos visto en el tema anterior para cualquier documento XML.
Por ello tendrá un prólogo y un ejemplar.

Prólogo

Todo documento HTML ha de tener una declaración del tipo de documento donde se le indica al navegador el tipo de documento
que se va a iniciar y la versión de HTML utilizada para la codificación del mismo y, además, le permite interpretarlo correctamente.

Para la versión HTML 4.0, hay tres prólogos distintos que definen tres tipos de documentos HTML:

HTML 4.0 Strict. Es la DTD utilizada por defecto con HTML 4.0. En estos documentos no se permite el uso de los elementos
declarados deprecated en otras versiones o Recomendaciones HTML. La declaración del tipo de documento correspondiente
es:

HTML 4.0 Transitional.

Permite el uso de todos los elementos que permite el HTML 4.0 Strict, además de los elementos deprecated.
La declaración del tipo de documento correspondiente es:

HTML 4.0 Frameset. Es una variante de HTML 4.0 Transitional para documentos que usan frames. En estos documentos el
elemento body hay que reemplazarlo por un elemento frameset. La declaración del tipo de documento correspondiente es:

En el caso de HTML5 solo existe una declaración de tipo de documento:

Ejemplar

Es un marco que permite visualizar simultáneamente, en una misma página web, varios apartados diferentes.

Autoevaluación
Pregunta

¿Cuál de las siguientes afirmaciones es verdadera?

Respuestas

Un documento HTML ha de tener título aunque no tenga cabecera.

Un documento HTML ha de tener cabecera aunque no tenga título.

Un documento HTML ha de tener título y cabecera.

Un documento HTML ha de tener ejemplar aunque no tenga título.

Retroalimentación

Incorrecto.

No es la opción correcta.

Correcto.

No es correcto.

Solución

1. Incorrecto
2. Incorrecto
3. Opción correcta
4. Incorrecto
1.4.- Identificación de etiquetas y atributos HTML.

Caso práctico
María, tras escuchar que XML y HTML tienen el mismo origen, se interesa por si utilizan las mismas etiquetas.

Juan le contesta que en HTML las etiquetas y los atributos están definidos previamente, mientras que en XML los
define el programador.

Un documento HTML está formado por etiquetas y atributos.

Al igual que en XML las etiquetas pueden ser de apertura, , o de cierre, . Una de las diferencias con XML es que la cantidad de
etiquetas de HTML está limitada a aquellas que están definidas por el lenguaje.

Aunque HTML define una gran cantidad de etiquetas, estas no son suficientes para crear páginas complejas ya que la definición
completa de ciertos elementos, como las imágenes y los enlaces, requiere información adicional. Como no es posible crear una
etiqueta por cada elemento diferente, se añade la información adicional a las etiquetas mediante los atributos, dando lugar a los
elementos.

Para cada uno de los atributos hay definido un conjunto de valores que se le puede asignar. Si el valor de un atributo no es válido,
el navegador lo ignora.

Cada una de las etiquetas HTML define los atributos que puede utilizar, aunque algunos de ellos son comunes a muchas
etiquetas.

Autoevaluación

Pregunta

Las etiquetas de HTML, al igual que las de XML, son ilimitadas:

Respuestas

Verdadero.

Falso.

Retroalimentación

No es correcto.

Correcto.
Solución

1. Incorrecto
2. Opción correcta
1.5.- Clasificación de los atributos comunes según
su funcionalidad.

Atributos básicos o globales: Se pueden usar en casi todas las etiquetas HTML.

Atributo Descripción

name = "texto" Permite asignar el nombre "texto" a un objeto HTML

Asigna un título a un elemento HTML, mejorando así la accesibilidad. Dicho título es mostrado por los
title = "texto" navegadores cuando el usuario pasa el ratón por encima del elemento. Es especialmente útil con los
elementos: a, link, img, object, abbr y acronym

Permite identificar al elemento HTML sobre el que se aplica de forma única mediante el identificador
"texto". Sólo es útil cuando se trabaja con CSS y con Javascript.
id = "texto"
No pueden empezar por números y sólo puede contener letras, números, guiones medios y/o guiones
bajos.

style = "texto" Permite aplicar al elemento HTML el estilo "texto" directamente.

Permite aplicar al elemento HTML el estilo "texto" definido en las CSS.

class= "texto" No pueden empezar por números y sólo puede contener letras, números, guiones medios y/o guiones
bajos.

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

Atributo Descripción

Indica la dirección del texto por lo que sólo puede tomar dos valores:
dir ltr (left to right) de izquierda a derecha. Es el valor por defecto.
rtl (right to left) de derecha a izquierda.

Especifica el idioma del elemento mediante un código predefinido. Los posibles valores de este atributo se
encuentran en el documento RFC 1766, algunos de los valores posibles son:

Código Idioma Código Idioma

en Inglés (Gran Bretaña) es Español

lang = "código"
en-US Inglés americano fr Francés

ja Japones fr-CA Francés de Canadá

xml:lang = "codigo" Especifica el idioma del elemento mediante un código definido según la recomendación RFC 1766.

En las páginas XHTML, el atributo xml:lang tiene más prioridad que lang y es obligatorio incluirlo siempre que se incluye el
atributo lang.

Atributos de eventos y atributos para los elementos que pueden obtener el foco: Sólo se utilizan en las páginas web
dinámicas creadas con JavaScript. Como no es nuestro objetivo no lo vamos a contemplar.

Lenguaje de programación interpretado con el mismo nombre (dialecto del estándar ECMAScript). Se define como orientado a
objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. Muy usado en la programación de páginas web para
completar el comportamiento de los documentos HTML.
2.- Elementos HTML.

Introducción
Un elemento HTML está formado por:

• Una etiqueta de apertura.

• Cero o más atributos.
• Opcionalmente, un texto, encerrado por la etiqueta. No todas las etiquetas pueden encerrar texto.
• Una etiqueta de cierre. Para algunos elementos no hay etiqueta de cierre o es opcional.

Según el modo en que ocupan el espacio disponible en la página, los elementos pueden ser de dos tipos:

• Elementos en línea. Sólo ocupan el espacio necesario para mostrar sus contenidos. Su contenido puede ser texto u otros
elementos en línea.

• Elementos de bloque. Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible
hasta el final de la línea, aunque sus contenidos no lleguen hasta allí. Su contenido puede ser texto, elementos en línea u
otros elementos de bloque.

El siguiente ejemplo muestra la diferencia entre ambos comportamientos

Al publicarlo en un navegador quedaría así:

Materiales educativos de la CAM (Uso educativo NC)

Autoevaluación

Pregunta

Los elementos de línea y de bloque se diferencian en:

Respuestas
Los de línea sólo actúan sobre una línea de texto y los de bloque actúan sobre más de una línea.

Los elementos de bloque pueden actuar como elementos de línea pero los de línea no pueden actuar como
elementos de bloque.

Los de línea ocupan el espacio imprescindible mientras que los de bloque no.

Tanto los de línea como los de bloque ocupan el espacio imprescindible.

Retroalimentación

Incorrecto.

No es la respuesta correcta.

Correcto.

No es correcto.

Solución

1. Incorrecto
2. Incorrecto
3. Opción correcta
4. Incorrecto

Pregunta

Todos los elementos de HTML están formados por:

Respuestas

Etiquetas de apertura y cierre.

Etiquetas de apertura y cierre, un solo atributo y su valor correspondiente.

Etiquetas de apertura, cierre, varios atributos y sus valores.

Etiquetas de apertura, cierre, ninguno o varios atributos y sus valores.

Retroalimentación
No es la opción correcta.

No es correcto.

Incorrecto.

Correcto.

Solución

1. Incorrecto
2. Incorrecto
3. Incorrecto
4. Opción correcta
2.1.- Elementos de la estructura básica de un
documento.

Al publicarlo en un navegador, por ejemplo en Firefox, tendríamos:

Materiales educativos de la CAM (Uso educativo NC)

Autoevaluación

Pregunta 1

La etiqueta body encierra los elementos que van a determinar el formato del documento:

Retroalimentación

Verdadero
2.2.- Elementos de la sección de cabecera.
Se clasifican en dos tipos:

Elementos contenedores:

Elemento Descripción

title Título del documento. Elemento obligatorio.

Script incrustado. Su contenido ha de ir situado entre las marcas de comentarios ya que no ha de ser
script
interpretado.

Estilo aplicado al documento utilizando CSS. Su contenido ha de ir situado entre las marcas de
style
comentarios ya que no ha de ser interpretado.

Elementos no contenedores:

Elemento Descripción

base URI base del documento

Prompt de entrada de datos. (Eliminado de los estándares web aunque todavía algún navegador lo
isindex
soporta)

link Enlaces a documentos externos de librerías

meta Metadatos sobre la página, como la codificación de caracteres, descripción o autores.

Ejemplo:

El título aparece en la barra del navegador y como nombre de la pestaña. El ejemplo anterior se vería así:

Materiales educativos de la CAM (Uso educativo NC)

Para que los acentos se vean bien hay que guardar el ejemplo con la codificación indicado en el documento, UTF-8
2.3.- Encabezados y párrafos.

Se vería así:

Materiales educativos de la CAM (Uso educativo

NC)

Más ejemplos
2.3.1.- Saltos de línea y espacios en blanco.
Al procesar el HTML los navegadores ignoran los saltos de línea y, si encuentran varios espacios consecutivos, los colapsan en
uno.

Ejemplo

Esta página

se verá así:

Materiales educativos de la CAM (Uso educativo NC)

2.3.2.- Comentarios.
Se pueden introducir comentario en los ficheros HTML así:

También pueden ser mulitlínea:

Los comentarios no son procesados por los navegadores, sirven para documentar el código.
2.4.- Semántica a nivel de texto.
Algunos elementos útiles son:

Este elemento hace que el texto encerrado entre las etiquetas sea un hipervínculo.

El atributo más importante es href, que indica la URL del vínculo, A veces se usa href="#" para refererirse a la misma página en
la que aparece el vínculo.

El atributo target permite elegir donde se abrirá el vínculo. Los valores más usados son:

• target = "_blank", para que se abra en una ventana/pestaña nueva.

• target = "_self", para que se abra en la misma. Es el valor por defecto.

Ejemplo:

El resultado sería:

Materiales educativos de la CAM (Uso educativo NC)

Aquí se puede consultar la lista completa de elementos para esta categoría. No todos tienen una representación visual en el
navegador.
2.5.- Elementos de listas.
Hay tres tipos de listas: ordenadas, desordenadas y listas de definición.

Elemento Descripción

ul Delimita los elementos que forman una lista desordenada

ol Delimita los elementos que forman una lista ordenada. Tiene varios atributos.

dl Delimita los elementos que forman una lista de definición

li Cada uno de los elementos de una lista ordenada o desordenada.

dt Cada uno de los términos que se definen de una lista de definición.

dd Cada una de las definiciones de una lista de definición.

Un ejemplo de un documento HTML que muestra la forma de utilizar estos elementos es:

Que al publicarse en el navegador quedaría:

Materiales educativos de la CAM (Uso educativo NC)

2.6.- Elementos de tablas.
Las tablas son una forma habitual de presentar información de manera compacta y fácil de entender para el que la lee. Aunque
hay muchas posibilidades, en general las tablas muestras una serie de datos (columnas) comunes para varios elementos (filas).
Como ejemplos, podemos pensar en un horario, o en una tabla comparativa de varios productos.

Los elementos para definir una tabla son los siguientes (no es necesario usar todos):

Elemento Descripción

table Delimita el contenido de una tabla.

tr Delimita cada una de las líneas de la tabla.

td Delimita el contenido de cada celda de la tabla.

colgroup Permite agrupar columnas.

tbody Permite agrupar líneas de la tabla.

thead Define la línea cabecera de la tabla.

th Delimita cada una de las celdas de la cabecera

tfoot Define la fila pie de la tabla.

caption Para añadir una leyenda a la tabla

Ejemplo de tabla básica

En el navegador se verá así:

 Materiales educativos de la CAM (Uso
educativo NC)

En este tutorial puedes ver ejemplos de tablas avanzadas.

NOTA IMPORTANTE: Aunque era habitual hace años, no es correcto usar tablas para la maquetación de la página.
2.7.- Elementos de formularios.
Los formularios permiten recoger información que el usuario introduce en el navegador.
Es importante validar estos datos, para detectar los errores en local (en el propio equipo), en caso de haberlos. De este modo se
evita sobrecargar la red con datos erróneos y sobrecargar al servidor con tareas innecesarias.
Normalmente se combinan los formularios con código JavaScript, que ayuda a realizar esas validaciones.

Es un elemento que permite a la página web solicitar información al usuario.

Ejercicio Resuelto
En la siguiente imagen puedes ver un ejemplo de un formulario con una muestra de algunos de los diferentes tipos
de campos existentes.

Materiales educativos de la CAM (Uso educativo NC)

¿Cuál podría ser el código HTML asociado al documento que se muestra en la siguiente imagen?

Retroalimentación

Puedes ver el código que genera el formulario de la imagen en este enlace (Recuerda que, una vez se ha
cargado una página en tu navegador, puedes visualizar el código que la generó. Basta con que pulses con el
botón derecho sobre el fondo de la página y selecciones "Ver código fuente de la página").
2.7.1.- Declaración de formulario

La apertura y cierre de un formulario se hace mediante el elemento form.

La etiqueta permite especificar una serie de atributos para ajustar sus características. Los principales son:

name– nombre del formulario

action– Acción que se ejecuta cuando se pulsa el botón de enviar formulario
enctype– Formato en el que se enviarán los valores del formulario, depende del contenido se enviarán de una u otra
manera.
method– Método de envío de la transmisión de datos, se puede elegir entre dos métodos GET y POST

La diferencia entre los métodos de envío GET y POST es la siguiente:

GET vs POST

GET POST

Permite pasar valores de variables y otros

Permite pasar valores en ASCII con un límite de 100 caracteres
elementos tales como archivos
Los valores de las variables que se transmiten se pueden ver en
Carece de restricciones de longitud como el
la URL y van concatenadas por el símbolo de AND (&)
método GET
por ejemplo: http://www.pagina.com/index.php?
Las variables y sus valores no son visibles en la
variable1=valor1&variable2=valor2&variable3=valor3
URL
2.7.2.- Campos de formulario - input
Dentro de un formulario puede haber varios tipos de controles: campos de texto normales, campos para contraseñas, fechas o
botones de radio, entre otros.

Además, de type, los atributos más importantes de la etiqueta son:

name –nombre del campo

size – número de caracteres visibles en el campo. Por defecto 20.
maxlengh – número máximo de caracteres que el usuario podrá introducir en el campo
value – valor por defecto del campo de texto
placeholder – valor sugerido, se presenta en color gris y desaparece al hacer foco con el cursor en el campo
readonly – El valor del campo no puede ser modificado por el usuario
autofocus – Sitúa el cursor del ratón en el campo una vez cargada la página
required – No se podrá enviar el formulario hasta que el campo esté cumplimentado

Ejemplo:

Se vería en el navegador así:

Materiales educativos de la CAM (Uso educativo NC)

2.7.3.- Campos de formulario - Área de texto

Atributos principales

name - nombre del campo

rows – número de filas. Reemplazable por la propiedad CSS height
cols – número de columnas. Reemplazable por la propiedad CSS width

También puede utilizar algunos de los atributos especificados para input:

placeholder
readonly
autofocus
maxlength
required

Por ejemplo, la siguiente línea de código HTML:

Quedaría en el navegador del siguiente modo:

Materiales educativos de la CAM (Uso educativo NC)

2.7.4.- Campos de formularios - Lista desplegable

En la siguiente imagen puedes observar cómo quedaría en un editor de HTML (en este caso Notepad++) y cuál es el resultado en
el navegador.

Materiales educativos de la CAM (Uso educativo NC)

2.7.5.- Campos de formulario - checkbox
Permite que el usuario indique si está conforme con una o varias opciones.

Etiqueta:

Atributos

name– obligatorio
checked– el atributo aparece marcado
value– valor que se transmitirá al enviar el formulario con ese campo seleccionado

Veamos un ejemplo de código HTML:

En el navegador se vería así:

Materiales educativos de la CAM (Uso educativo NC)

2.7.6.- Botones de formulario

2.7.6.1.- Botón de envío

Permite enviar el formulario a un destinatario, por ejemplo a una página determinada en un servidor web para que procese los
datos o una dirección de correo electrónico. Todo dependiendo del valor del atributo action de la etiqueta de apertura de
formulario.

Atributos

value– permite indicar el texto del botón

2.7.6.2.- Botón de anulación

Borra el contenido de los campos cumplimentados en el formulario

Atributos

value– permite indicar el texto del botón

Autoevaluación

Pregunta

Para crear un botón utilizaremos la etiqueta:

Respuestas

< button >

< input >

Ambas.

Ninguna.

Retroalimentación
Pero no sólo con esta.

Fíjate bien ya que hay una respuesta más correcta.

Correcto.

No es la opción correcta.

Solución

1. Incorrecto
2. Incorrecto
3. Opción correcta
4. Incorrecto
2.7.7.- Otros campos de formulario
Dependiendo de los valores que queramos recoger podemos utilizar definiciones de campos más apropiadas como las que se ven
en la siguiente tabla.

Campo Etiqueta Notas

(se abre en una nueva ventana)"

Oculto rel="noopener">< input
type=“hidden” >

(se abre en una nueva ventana)"

De contraseña rel="noopener">< input
type=“password” >

(se abre en una nueva ventana)"

Requiere formulario definido con post y
Para envío de ficheros rel="noopener">< input type=“file”
enctype=“multipart/form-data”
>

(se abre en una nueva ventana)"

Para recoger correo
rel="noopener">< input Valida formato automáticamente
electrónico
type=“email” >

(se abre en una nueva ventana)"

Para recoger una URL rel="noopener">< input type=“url” Valida formato automáticamente
>

Atributos:
(se abre en una nueva ventana)"
Para recoger números max – valor máximo
rel="noopener">< input
enteros en un rango min – valor mínimo
type=“number” >
step – incremento del contador
2.7.8.- Campos de formulario con formato de fecha
Dependiendo de la fecha que queramos recoger y sus características podemos utilizar diferentes variaciones en las etiquetas.

(se abre en una nueva ventana)" rel="noopener">< input type=“datetime-local” >

Permite seleccionar día, mes, año y hora

< input type=“date” >

Permite seleccionar día, mes y año

(se abre en una nueva ventana)" rel="noopener">< input type=“month” >

Permite seleccionar mes y año

(se abre en una nueva ventana)" rel="noopener">< input type=“week” >

Permite seleccionar una semana

(se abre en una nueva ventana)" rel="noopener">< input type=“time” >

Permite seleccionar una hora

Atributos

min– Menor hora seleccionable

max– Mayor hora seleccionable
step– Incremento del contador del campo en segundos
2.7.9.- Campos de formulario - Rangos
Permite seleccionar un valor dentro de un rango.

Etiqueta: (se abre en una nueva ventana)" rel="noopener">< input type=“range” >

Atributos

min– valor mínimo del rango

max– valor máximo del rango
step– valor del incremento del contador
value– valor inicial del contador
2.7.10.- Organización de formularios

Etiqueta < label >

Permite asociar a cada campo del formulario una etiqueta con su nombre. El texto mostrado entre las etiquetas < label > se
muestra y constituye además una ayuda de usabilidad a personas invidentes.

En el ejemplo la etiqueta label se asocia al campo tipo input mediante el atributo for que contiene el valor del identificador (id) de la
etiqueta input. En el navegador se vería:

Materiales educativos de la CAM (Uso educativo NC)

Etiqueta < fieldset >

Agrupa los campos de formulario que estén entre la etiqueta de apertura y cierre < fieldset > y los rodea con un borde.

Etiqueta < legend >

Escrita inmediatamente a continuación de la etiqueta de apertura < fieldset > agrega un texto relacionado con los campos
agrupados
2.7.11.- Un ejemplo de formulario

Ejercicio Resuelto
¿Podrías escribir el código HTML de este formulario?

Materiales educativos de la CAM (Uso educativo NC)

Retroalimentación

En este enlace puedes ver un posible código que genera un formulario como el que aparece en la imagen
inferior:

Caso práctico
Sin embargo verás que dicho código no sigue las reglas de organización de formularios que hemos indicado.
¿Podrías modificarlo? Si es así, entrégalo en esta Actividad voluntaria.
2.8.- Multimedia.
Otros elementos habituales son:

Elemento Descripción

img Permite insertar una imagen en una página web.

audio Para insertar audio

video Para insertar vídeo

object Para incrustar contenido multimedia (audio, vídeo, ficheros PDF, applets...)

Elemento < img >

Este elemento se usa para insertar una imagen. No tiene etiqueta de cierre. Los atributos más importante son:

src. Especifica la ruta de la imagen. Puede ser local, o una URL cualquiera. Los formatos soportados dependen de cada
navegador, pero en general se pueden utilizar JPG, PNG y GIF, entre otros.
alt. Texto alternativo. Se usa si no se puede cargar la imagen o para los lectores de pantalla. Es obligatorio.
height. Altura. Si no se especifica, se escoge el tamaño original. Si se especifica, se escala. Es de los pocos casos en
HTML5 en que un atributo tiene información de representación.
width. Anchura de la imagen. Como la anterior.

Se vería así:

Materiales educativos de la CAM (Uso educativo NC y

Dominio Público.)
Para la segunda etiqueta < img >, como no se encuentra la imagen, el navegador muestra el texto alternativo.

Para poder probar este ejemplo, descarga esta imagen y "guárdala como" index.jpeg en el mismo directorio que la el fichero html.

Acrónimo. Inglés. GIF = Graphics Interchange Format, que significa Formato de Intercambio de Gráficos. Formato gráfico para
animaciones e imágenes de baja calidad con compresión. Admite transparencias y animaciones.

Acrónimo. Inglés. JPG = Joint Photographic experts Group. Formato para imágenes con compresión muy utilizado en páginas web.

Acrónimo. Inglés. PNG = Portable Network Graphics, que significa Gráficos de Red Portátiles. Formato para imágenes con
compresión no sujeto a patentes muy utilizado en la páginas web. Admite transparencias.
2.9.- Secciones y etiquetas semánticas.
El elemento < div > se usa para agrupar otros elementos en secciones, tanto para organizar el contenido como para posicionarlo
mediante hojas de estilo.

En HTML5 aparecieron varias etiquetas semánticas para estructurar el contenido de la página, y por tanto solo se debería usar <
div > cuando no haya una etiqueta más apropiada

Estas etiquetas son:

< header > Contiene contenido introductorio para la sección de la página en que aparece. Es habitual que contenga los
elementos de encabezado, h1,...,h6.
< aside > Se utiliza para contenido parcialmente relacionado con el contenido principal. No tiene por qué mostrarse en un
lateral.
< footer > Contiene información sobre la sección correspondiente, como el autor. No tiene que estar necesariamente en la
parte de inferior.
< section > Una sección genérica dentro del documento.
< article > Representa un elemento que se puede distribuir de manera independiente o reutilizable.
< nav > Contiene vínculos, internos o externos.Suele usarse para la barra de navegación.

La siguiente imagen muestra una disposición habitual para estos elementos. Para obtenerla hay que usar CSS.

Materiales educativos de la CAM (Uso educativo NC)

Para saber más

Lectura recomendada: HTML semántico
2.10.- Elemento iframe.
El elemento iframe permite integrar una página web dentro de otra. En ciertos aspectos, sustituye a la especificación de marcos
(frameset) de HTML 4, ya obsoleta.

Atributos más importantes de iframe:

height: Altura, por defecto en píxeles. Si no cabe todo el contenido, se usa una barra de desplazamiento. También se puede
fijar con CSS.
width: Anchura, como el anterior.
src: La ruta al contenido inicial del iframe.
name: Nombre, para referirse al iframe desde un vínculo.

A continuación, vamos a ver un ejemplo de uso habitual.

Materiales educativos de la CAM (Uso educativo NC)

El contenido del iframe cambia al seguir los vínculos. Para conseguirlo, en los vínculos hay que poner como valor del atributo
target el valor del atributo name del iframe en que queramos que se cargue.

Es decir, para que se carguen en un iframe con name = "contenido"

se usará

El código del ejemplo anterior sería el siguiente:

Inicialmente, el iframe carga "listas.html". Luego cambia entre "listas.html" y "tablas.html" al seguir los vínculos. Estos ficheros son
los que se han utilizado en los ejemplos anteriores.

Para probar el ejemplo, tienes que tener los tres ficheros en el mismo directorio y abrir "iframe.html".
2.11.- Validación HTML.

Debes conocer
Es posible validar si nuestro código HTML cumple con la especificación de HTML5, para ello existen diferentes
páginas en Internet que nos facilitan este servicio:

W3C - https://validator.w3.org/
Validator.nu - https://html5.validator.nu/
3.- Hojas de estilo o CSS.

Caso práctico
Juan muestra a María y Félix una primera versión de la página web.

María muestra su conformidad con la estructura y contenidos de la futura web corporativa que Juan ha realizado,
aunque le gustaría probar otras gamas de colores y tipos de fuente.

Félix plantea que, quizás, resulte un trabajo demasiado laborioso ya que supondría modificar todos los ficheros de la
web.

Juan, sonriendo, comenta que de hecho no es exactamente así. En realidad los datos están separados de sus
formatos.

Introducción
CSS (Cascading Style Sheets) permite a los desarrolladores Web controlar el estilo y el
formato de múltiples páginas Web al mismo tiempo.

Antes del uso de CSS, los diseñadores de páginas web debían definir el aspecto de cada
elemento dentro de las etiquetas HTML de la página. El principal problema de esta forma de
definir el aspecto de los elementos es que habría que definir el formato de cada uno de los
elementos que formen la página, lo cual hace que sea muy difícil de actualizar.

CSS permite separar los contenidos de la página y su aspecto. Para ello se define en una
zona reservada el formato de cada uno de los elementos de la web. Cualquier cambio en el
estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a ella en
las que aparezca ese elemento. Las hojas de estilo están compuestas por una o más reglas
de estilo aplicadas a un documento HTML o XML.

Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los
contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo,
cabecera, texto destacado, etc. Una vez creados los contenidos, se utiliza el
lenguaje CSS para definir el formato de cada elemento.

CSS obliga a crear documentos semánticos HTML/XHTML, mejora la accesibilidad del

documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo ITE (Uso educativo NC)
documento en infinidad de dispositivos diferentes.

Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML, alrededor del año 1970. Desde la creación
de SGML, se observó la necesidad de definir un mecanismo que permitiera aplicar estilos a los documentos electrónicos. La
guerra de navegadores y la falta de un estándar para la definición de los estilos dificultaban la creación de documentos que
tuvieran igual apariencia en distintos navegadores.

En 1995, el W3C añadió a su grupo de trabajo de HTML el desarrollo y estandarización de CSS.

CSS 1, se publicó en 1996, es la primera recomendación oficial.

CSS 2, publicada en 1998, es la segunda recomendación oficial.

CSS 3, empezó a desarrollarse en 1998, sus primeros borradores se publicaron en junio de 1999. A diferencia de las versiones
anteriores la especificación se divide en varios documentos separados llamados módulos. Esto permite que diferentes módulos se
encuentren en diferentes estados de desarrollo y no todos pasen a ser recomendaciones oficiales del W3C. Un módulo debe
primero pasar por la fase de "candidato" antes de ser aprobado.

CSS 4, última versión sobre la que no existe una especificación integrada ya que al igual que CSS 3 se encuentra dividido en
diferentes módulos. A partir de la división en módulos que se hizo en CSS 3 la evolución de cada uno de ellos es independiente lo
que provoca que actualmente la mayoría de módulos estén es especificación de nivel 3 mientras que otros (por
ejemplo Selectores) se encuentre en nivel 4.

En el siguiente enlace encontrarás el soporte que cada uno de los navegadores más actuales tienen sobre las etiquetas CSS.

CSS Reference With Browser Support - W3shool

 Autoevaluación

Pregunta

Las hojas de estilo en casacada permiten:

Respuestas

Definir formatos que se aplican sobre varias páginas web de un sitio.

Separar el formato de la estructura de una página web.

Estructurar el contenido de la página web.

Ninguna respuesta es válida.

Retroalimentación

Correcto.

Incorrecto.

No es correcto.

No es la opción correcta.

Solución

1. Opción correcta
2. Incorrecto
3. Incorrecto
4. Incorrecto
3.1.- Cómo incluir CSS en un documento HTML o
XHTML.
Hay tres modos distintos de aplicar estilos CSS a los elementos de una página:

Declaración en línea: se declara el estilo en la misma línea en que se va a

aplicar. Esta opción está desaconsejada.
Declaración interna: se declaran los estilos a emplear en la página, en el
encabezado de dicha página, mediante la etiqueta < style >.
Declaración externa: se declara la hoja de estilo que se va a emplear en la
página, en el encabezado de dicha página, mediante la etiqueta < link >.

1.- Declaración en línea

ITE (Uso educativo NC)

Dentro de la propia etiqueta mediante el atributo style. Deben evitarse para

preservar el principio de separación de contenidos y formato.

2.- Declaración interna

En el encabezado del documento dentro de las etiquetas < style >

Ejemplo

El texto de los elementos < p > se mostrará en verde.

2.3. Declaración en archivo externo

En el encabezado mediante la etiqueta < link > dentro del elemento < head >:

El archivo de estilos tendrá extensión .css. El código del archivo de estilos no tendrá etiqueta de declaración de estilo, por ejemplo:

Otra forma de usar hojas de estilo externas es mediante la etiqueta @import. Es una directiva CSS no HTML.
Ejemplo

El siguiente documento HTML utiliza un archivo CSS externo:

El contenido del fichero CSS es:

El texto de los elementos < p > se mostrará en verde.

Almacena los dos ficheros en la misma carpeta para probar el ejemplo. El fichero CSS se tiene que llamar "parrafo_verde.css".

Autoevaluación

Pregunta

El mejor modo de aplicar formatos a una página web es:

Respuestas

Definiendo los formatos directamente a través de los atributos de los elementos HTML.

Incluyendo el formato CSS en los elementos de HTML.

Definiendo los estilos en la cabecera del documento HTML.

Definiendo un fichero CSS externo.

Retroalimentación
No es la opción correcta.

No es correcto.

Incorrrecto.

Corrrecto.

Solución

1. Incorrecto
2. Incorrecto
3. Incorrecto
4. Opción correcta
3.1.1.- Elemento span.
Este elemento se utiliza habitualmente para dar estilo a texto no marcado.

Ejemplo
3.2.- Sintaxis de las reglas de estilo.
Cada uno de los estilos que componen una hoja de estilos CSS se denomina regla. Cada regla se forma por:

Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS

Llave de apertura, {

Declaración: especifica los estilos que se aplican a los elementos.

< span "="" > Propiedad: permite modificar el aspecto de un atributo del elemento.

< span "="" > Valor: indica el nuevo valor del atributo modificado en el elemento.

Llave de cierre, }.

p { color: blue;}

En este caso el selector es "p" (párrafo), la declaración es "color: blue" donde encontramos la propiedad color y el valor blue.

Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener varios selectores y cada declaración puede estar
formada por diferentes declaraciones.

Autoevaluación

Pregunta

El elemento HTML sobre el que se aplica un estilo se especifica:

Respuestas

En etiquetas, es decir, entre < y >.

Entre paréntesis.

Entre llaves.

No va encerrado entre signos.

Retroalimentación

No es la opción correcta.

No es correcto.
Incorrecto.

Correcto.

Solución

1. Incorrecto
2. Incorrecto
3. Incorrecto
4. Opción correcta
3.3.- Cascada y herencia de estilos.
En ocasiones y dependiendo de cómo se haya hecho la definición de estilos es posible que el navegador se encuentre estilos
contradictorios. Ante esta situación el navegador aplicará la siguiente precedencia

1.- Declaración en línea

2.- Declaración interna
3.- Declaración externa
4.- Propiedades por defecto del navegador

Por otro lado las hojas de estilo también permiten la herencia de propiedades, Si tenemos varios elementos HTML anidados los
elementos más internos heredan los estilos de los externos en los que están anidados siempre y cuando ellos no los tengan
definidos
3.4.- Selectores.
A la hora de aplicar estilos a nuestros elementos HTML necesitamos un mecanismo que permita identificar sobre cuál o cuáles de
estos elementos queremos actuar. Para ello se utilizan los selectores, estos permiten identificar a qué elementos de nuestro
código HTML vamos a aplicar el estilo definido. Existe diferentes selectores, a continuación veremos los más importantes.

Selector universal (*)

Sirve para seleccionar todos los elementos de la página.

* {margin:10px; padding: 5px};

Selectores de etiqueta

En este caso los estilos se aplican solo a la etiqueta.

p { text-align: center}

En este ejemplo, los párrafos serán alineados al centro.

Si queremos ajustar los mismos estilos a dos etiquetas diferentes podemos ponerlos separados por comas.

P, h1, h2 { text-align: center}

En este ejemplo, tanto los párrafos como los encabezados de tipo 1 y 2 serán alineados al centro.
3.4.1.- Selectores de clase.
En ocasiones no vamos a querer aplicar el mismo formato en todas las etiquetas del mismo tipo. Para ello podemos asignar a las
etiquetas a una clase determinada, esto requiere que identifiquemos las etiquetas afectadas mediante el atributo class de la forma.

El selector se especificaría:

p.parrafoCentrado {text-align: center; }

De manera que este estilo se aplicaría a todas las etiquetas p que tengan el atributo class a valor parrafoCentrado.

Sin embargo si hacemos la misma definición pero omitimos el identificador de etiqueta:

.parrafoCentrado { text-align: center; }

Se aplicaría a todas las etiquetas que perteneciesen a la clase “parrafoCentrado” sean del tipo que sean. Por ejemplo a una que
fuese:

Veamos a continuación un código de ejemplo:

El resultado en el navegador sería:

Materiales educativos de la CAM (Uso educativo NC)

3.4.2.- Selectores de ID.
Permite seleccionar un elemento de la página por medio de su atributo id. El uso de este selector se suele asociar a elementos de
estilo que se van a aplicar de manera excepcional una única vez, por ello el valor del atributo id no debe repetirse en dos
elementos diferentes de la misma página.

Por ejemplo:

Se referencia mediante una de las siguientes posibilidades:

#unico { color: blue;}

p#unico {color: blue;}

3.4.3.- Selectores descendentes.
Permite seleccionar elementos que se encuentran dentro de otros elementos, por ejemplo:

p h1 {color: red; }:

Se aplicará a todas las etiquetas h1 que estén dentro de bloques p. Además hay que tener en cuenta que:

No tiene porqué ser descendiente directo.

El nivel de anidación puede tener varios niveles, por ejemplo:

p a b i {text-decoration: underline; }

Se aplica a los elementos en cursiva, dentro de etiquetas de negrita, anidados dentro de enlaces que se encuentren en párrafos.

Es importante tener en cuenta que si no tenemos cuidado podemos confundir el selector descendente con la aplicación del mismo
selector a distintas etiquetas

p a b i {color: blue; }

¡NO ES LO MISMO QUE...!

p,a,b,i {color: blue;}

También podemos combinar el selector universal con selectores descendentes, por ejemplo:

p * b {color: #0000FF;}

Se aplica a todas las etiquetas de tipo < b > que estén anidadas en cualquier otra etiqueta que a su vez esté dentro de una
etiqueta de tipo < p >.

Sin embargo no se aplicará a las etiquetas de tipo < b > que estén dentro de una etiqueta de tipo < p > directamente.
3.4.4.- Selector hijo.
Es parecido al anterior, pero solo afecta al primer nivel de anidamiento.

Ejemplo

Se vería así:

Materiales educativos de la CAM (Uso educativo NC)

3.5.- Propiedades principales.
En los siguientes subapartados vamos a ver las propiedades principales que se usan en CSS
como son:

Propiedades de color y fondo.

Propiedades de fuente.
Propiedades de texto.
Propiedades de caja.
Propiedades de clasificación.

Pasemos a verlos detenidamente.

ITE (Uso educativo NC)

3.5.1.- Propiedades de color y fondo.
Las propiedades de color y fondo son los que enumeramos a continuación:

Elemento Descripción

Indica el color del texto. Lo admiten casi todas las etiquetas de HTML. El valor de este atributo es un color,
color
con su nombre o su valor RGB.

background-
Indica el color de fondo del elemento. El valor de este atributo es un color, con su nombre o su valor RGB.
color

background- Permite colocar una imagen de fondo del elemento. El valor que toma es el nombre de la imagen con su
image camino relativo o absoluto

background- Indica si ha de repetirse la imagen de fondo y, en ese caso, si debe ser horizontal o verticalmente. Los
repeat valores que puede tomar son: repeat-x, repeat-y o no-repeat.

background- Especifica si la imagen ha de permanecer fija o realizar un scroll. Los valores que pueden tomar son: scroll o
attachment fixed.

Es una medida, porcentaje o el posicionamiento vertical u horizontal con los valores establecidos que sirve
background-
para posicionar una imagen. Los valores que puede tomar son: porcentaje, tamaño, o [top, center, bottom] [left,
position
center, rigth]

Establece en un solo paso cualquiera de las propiedades de background anteriores. Los valores que puede
background
tomar son: background-color, background-image, background-repeat, background-attachment, background-position.

Dado que no todos los nombres de colores son admitidos en el estándar, es aconsejable utilizar el valor RGB.

Un ejemplo de un documento XHTML en el que se utiliza este método para incluir formatos es:

En el navegador se ve del siguiente modo:

Materiales educativos de la CAM (Uso Educativo No Comercial)

(Red, Green, Blue;o Rojo, Verde, Azul) Es un modelo de color con el que es posible representar un color mediante la mezcla por
adición de los tres colores luz primarios. El modelo de color RGB no define exactamente ninguno de los colores primarios, por lo
que los mismos valores RGB pueden generar colores distintos en diferentes dispositivos. Para describir un color se indica con qué
proporción se mezcla cada color primario. Para ello, se asigna un valor a cada uno de los colores primarios, utilizando una escala
que va del 0 al 255, donde el 0 indica que ese color no interviene en la mezcla. Por ejemplo el color 126, 198, 240 estará formado
por un nivel 126 de rojo, 198 de verde y 240 de azul. Es habitual representar los colores RGB usando la codificación hexadecimal
del color, es decir expresando el valor de cada uno de los colores primarios en hexadecimal en lugar de en decimal. En el caso
anterior el color sería: 7EC6F0, ya que 7E=126, C6=198 y C0=240. Esta notación se utiliza, por ejemplo, en el lenguaje HTML.
 Para saber más
Accede al tutorial del uso de color de w3schools.com

https://www.w3schools.com/colors/default.asp

Autoevaluación

Pregunta

Cuál de los siguientes valores del atributo color no es válido:

Respuestas

rgb(33,33,0).

red.

#f06.

#ff06.

Retroalimentación

No es la opción correcta. Comprueba que es una opción correcta RGB.

No es correcto. Comprueba que es un nombre de color válido.

Incorrecto. Equivale a la opción hexadecimal #ff0066. Es una forma comprimida de indicar el color.

Correcto. Ya que sólo se indican 4 símbolos hexadecimales cúando tendrían que ser 6 o si usamos la forma
comprimida 3.
Solución

1. Incorrecto
2. Incorrecto
3. Incorrecto
4. Opción correcta
3.5.2.- Propiedades de fuente.
En este apartado vamos a ver las distintas propiedades que podemos utilizar referentes a las fuentes de nuestro documento y que
son:

Elemento Descripción

Indica el tamaño de la fuente. Puede ser un tamaño absoluto, relativo o en porcentaje. Toma valores de
font-size
unidades de CSS

Establece la familia a la que pertenece la fuente. Si el nombre de una fuente tiene espacios se utilizan
font-family
comillas para que se entienda bien. El valor es el nombre de la familia fuente.

font-weight Define el grosor de los caracteres. Los valores que puede tomar son: normal, bold, bolder, lighter, 100, 200, 300, 400, 500,
600, 700, 800 o 900

Determina si la fuente es normal o cursiva. El estilo oblique es similar al cursiva. Los valores posibles son:
font-style
normal, italic, oblique.

font-variant Determina si la fuente es normal o mayúsculas pequeñas. Los valores que puede tomar son: normal , small-caps

El alto de una línea y por tanto, el espaciado entre líneas. Es una de esas características que no se podían
line-height
modificar utilizando HTML.

Permite establecer todas las propiedades anteriores en el orden que se indica a continuación: font-style, font-
font variant, font-weight, font-size[line-height], font family. Los valores han de estar separados por espacios. No es obligatorio el
uso de todos los valores.

Un ejemplo de un documento XHTML en el que se utiliza este método para incluir formatos es:

En el navegador el resultado es:

Materiales educativos de la CAM (Uso educativo NC)

3.5.3.- Propiedades de texto.

En el apartado anterior vimos los atributos relacionados con las fuentes y en este vamos a ver los relacionados con el texto en sí y
son los siguientes:

Elemento Descripción

text- Establece si el texto está subrayado, sobrerayado o tachado. los valores que puede tomar son: none, underline,
decoration overline, line-through o blink

Indica la alineación del texto. Aunque las hojas de estilo permiten el justificado de texto no funciona en todos
text-align
los sistemas. Los valores que puede tomar son: left, right, center o justify

Determina la tabulación del texto. Los valores que toma son una longitud, en unidades CSS, o un porcentaje
text-indent
de la establecida.

Nos permite transformar el texto, haciendo que tenga la primera letra en mayúsculas de todas las palabras,
text-transform
todo en mayúsculas o minúsculas. Los valores que puede tomar son: capitalize, uppercase, lowercase o none

word-spacing Determina el espaciado entre las palabras. Los valores que puede tomar es un tamaño.

letter-spacing Determina el espaciado entre letras. Los valores que puede tomar es un tamaño.

Establece la alineación vertical del texto. Sus valores posibles son: baseline, sub, super, top, text-top, middle, bottom, text-
vertical-align
bottom o un porcentaje.

line-height Altura de la línea. Puede establecerse mediante un tamaño o un porcentaje

Un ejemplo de un documento XHTML en el que se utiliza este método para incluir formatos es:

Su aspecto en el navegador es el siguiente:

Materiales educativos de la CAM (Uso educativo NC)

3.5.4.- Propiedades de lista.
Hay cuatro propiedades de estilo para listas.

Elemento Descripción

Indica cual es el símbolo que se utiliza como marcador en las listas. Valores que puede tomar son: disc,
list-style-type
circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.

Permite utilizar el uso de una imagen como marcador en una lista. El valor que toma es la ruta del
list-style-image
fichero imagen

list-style-position Determinan la posición del marcador en una lista. Puede tomar los valores: outside o inside.

Permite establecer de una única vez todas las características de una lista. Hay que seguir el orden
list-style
siguiente: list-style-type, list-style-position y list-style-image.

Que en el navegador se ve del siguiente modo:

Materiales educativos de la CAM (Uso

educativo NC)
3.5.5.- Propiedad display.

Esta propiedad se puede usar para:

Hacer que un elemento sea de bloque o de línea.

Ocultarlo o hacerlo visible. Normalmente, a través de JavaScript.

Ejemplo

En este ejemplo, hay varios vínculos, que son elementos de línea. Pero hay una regla CSS que hace que los que tienen clase
"especial" sean de bloque.

Se verá así:

Materiales educativos de la CAM (Uso educativo NC)

3.6.- Avanzado: Modelo de cajas.
La W3C define lo que se denomina "Modelo de caja", que no es más que una zona rectangular como la siguiente que rodea cada
uno de los elementos de nuestra página web.

Materiales educativos de la CAM (Uso educativo NC)

Cada etiqueta HTML aplica ese modelo y por lo tanto tiene:

Contenido. Texto de la etiqueta

Margen interior. Distancia desde el contenido al borde del elemento. Propiedad HTML padding.
Borde. El borde del elemento. Propiedad HTML border.
Margen exterior. Distancia desde el borde del elemento a los elementos adyacentes. Propiedad HTML margin.

Cada uno de esos elementos puede definirse mediante propiedades CSS que veremos a continuación.
3.6.1.- Propiedades de caja.
A continuación veremos algunas de las propiedades que afectan a cada uno de los elementos del modelo de caja.

Contenido

FORMATO PROPIEDAD VALORES

anchura width auto | Longitud en px o equivalente

altura height auto | Longitud en px o equivalente

Tanto width como height especifican las dimensiones del contenido sin tener en cuenta borde y márgenes.

Margen interno

FORMATO PROPIEDAD VALORES

padding
padding-top
auto | valor de longitud | valor de
Relleno / margen interno padding-bottom
porcentaje
padding-right
padding-left

Si utilizamos padding con un solo valor se aplica a los cuatro lados, con dos valores el primero se aplica a superior e inferior y el
segundo a laterales, con tres valores se aplica el primero al superior, el segundo a los laterales y el tercero al inferior, con cuatro
valores se aplica a superior, derecho, inferior, izquierdo.

También es posible fijar el valor de cada una de los cuatro valores independientemente con la propiedad correspondiente.

borde

FORMATO PROPIEDAD VALORES

border-color
border-top-color
Color del borde border-bottom-color Color en alguna de las notaciones permitidas | transparent
border-right-color
border-left-color

border-width
Border-top-width
Grueso del borde Border-bottom-width Valor de longitud | thin | médium | thick
Border-right-width
Border-left-width

border-style
border-top-style
Solid | dashed | dotted | double | ridge | Groove | inset | outset |
Estilo del borde border-bottom-style
hidden | none
border-right-style
border-left-style

Si utilizamos border-color, border-width o border-style con un solo valor se aplican a los cuatro lados, con dos valores el primero se
aplica a superior e inferior y el segundo a laterales, con tres valores se aplica el primero al superior, el segundo a los laterales y el
tercero al inferior, con cuatro valores se aplica a superior, derecho, inferior, izquierdo.

También es posible fijar el valor de cada una de los cuatro valores independientemente con la propiedad correspondiente.

Margen externo

FORMATO PROPIEDAD VALORES

 margin
margin-top
Ancho del margen externo margin-bottom auto | valor de longitud | valor de porcentaje
margin-right
margin-left

Si utilizamos margin con un solo valor se aplica a los cuatro lados, con dos valores el primero se aplica a superior e inferior y el
segundo a laterales, con tres valores se aplica el primero al superior, el segundo a los laterales y el tercero al inferior, con cuatro
valores se aplica a superior, derecho, inferior, izquierdo.

También es posible fijar el valor de cada una de los cuatro valores independientemente con la propiedad correspondiente.

Autoevaluación

Pregunta

Para modificar el tamaño del borde izquierdo de una caja o utilizar el atributo:

Respuestas

border-left-width

border-width

Ambas.

Ninguna.

Retroalimentación

Incorrecto.

No es la opción correcta.

Correcto.

No es correcto.

Solución

1. Incorrecto
2. Incorrecto
3. Opción correcta
4. Incorrecto
3.6.2.- Unidades de tamaño.
A la hora de especificar tamaños CSS nos permite usar diferentes tipos de unidades, estas además pueden ser absolutas o
relativas:

Absolutas. Cualquier longitud expresada en una de estas unidades siempre se mostrará del mismo tamaño.
Relativas. Dependen del tamaño de otro elemento.

Normalmente se utilizan unidades absolutas para la secciones y la estructura de la página web porque se adaptan mejor a
diferentes tamaños de pantalla. Las más habituales son los porcentajes y la unidad em.

Para las dimensiones de imágenes y vídeos se suelen utilizar píxeles. Es la única unidad absoluta que se utiliza habitualmente.

Se debe especificar la unidad usada:

Por ejemplo si queremos especificar un tamaño de 13 píxeles utilizaremos: 13px

Unidades absolutas

cm Centímetros

mm Milímetros

In Pulgadas

px * Píxeles

pt Puntos

pc Picas
*: Los píxeles son relativos a la pantalla.

UNIDADES RELATIVAS

em Relativa al tamaño del tipo de letra por defecto

porcentajes (%) Relativos a las dimensiones del elemento contenedor

ex Relativa al valor de x-height de la fuente actual

ch Relativa al ancho del cero “0”

rem Relativa al tamaño de letra del elemento raíz

Ejemplo de porcentajes (1)

En esta página se crean dos secciones. La primera tiene fondo verde y su anchura la mitad que el elemento contenedor, < body >,
que al ser un elemento de bloque ocupa todo la anchura disponible.

Las dos secciones también ocuparían toda la anchura si no fuera por las reglas de estilo.
Se vería así:

Materiales educativos de la CAM (Uso educativo NC)

Ejemplo de porcentajes (2)

Con la altura (height) ocurre lo mismo, pero hay que tener en cuenta que depende del contenido que haya en la página, a no ser
que se fije un valor para el elemento como en este ejemplo. El elemento < body > tiene una altura fijada en píxeles. Las secciones
tienen la altura y anchura expresadas en porcentajes relativos a los del elemento < body >.

Se vería así:
 Materiales educativos de la CAM (Uso educativo NC)

Ejemplo de unidades em (3)

Para las fuentes es habitual utilizar la unidad em, que hace referencia al tamaño de la fuente actual.

Se vería así:

Materiales educativos de la CAM (Uso educativo NC)

Autoevaluación

Pregunta

Las unidades relativas especifican el tamaño en relación al tamaño de una letra determinada que escoge el
programador:

Respuestas
Verdadero.

Falso.

Retroalimentación

Incorrecto.

Correcto.

Solución

1. Incorrecto
2. Opción correcta
3.6.3.- Ejemplos del modelo de cajas.
Ejemplo de relleno y margen

Se verá así:

Materiales educativos de la CAM (Uso educativo NC)

El espacio en blanco (color de fondo de < body >) entre las secciones y azul y verde se debe al margen inferior de la primera.

Ejemplo de border
Se verá así:

Materiales educativos de la CAM (Uso educativo NC)

3.6.4.- Posicionamiento.

En los ejemplos vistos hasta ahora, el navegador representa los elementos en el orden en el que aparecen atendiendo a si son
elementos de bloque o de línea (entre otras cosas). Utilizando CSS, es posible modificar el posicionamiento por defecto de los
elementos. Las propiedades implicadas son position y float.

Con la propiedad float, los elementos "flotan" hacia la izquierda o derecha. Todos los elementos flotados se van situando uno junto
a otro. Si no hay espacio disponible, se pasan a una nueva línea. Se adapta bastante bien a diferentes tamaños de pantalla.

En este ejemplo se utiliza la propiedad float para maquetar una página sencilla, junto a las etiquetas semánticas.Los elementos <
nav > y < section > están flotados a la izquierda y se reparten la anchura disponible.

Es necesario fijar la altura porque en la página apenas hay contenido.

Se vería así:

Materiales educativos de la CAM (Uso educativo NC)

Para saber más

Los métodos de posicionamiento se describen en detalle en este vínculo (en el capítulo 5).
Aquí puedes ver más ejemplos de maquetación.
3.7.- Validador CSS.

Recomendación
Validador CSS online
Para saber más

Para saber más

Tutoriales de W3School:

HTML
CSS

Muy prácticos porque se pueden probar online.

Recursos para desarrolladores de Mozilla - MDN web docs. En español.

Página del W3C