HTML & Css

GUIA HTML & CSS
INTRODUCCIÓN
El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi
infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea
posible encontrar lo que se busca. La unidad básica donde está almacenada esta
información son las páginas Web. Estas páginas se caracterizan por contener texto,
imágenes, animaciones... e incluso sonido y video.
Una de las características más importantes de las paginas Web es que son hipertexto. Esto
quiere decir que las paginas no son elementos aislados, sino que están unidas a otras
mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet
puede pulsar sobre un texto de una página para navegar hasta otra pagina. Será cuestión
del programador de la pagina inicial decidir que palabras o frases serán activas y a donde
nos conducirá pulsar sobre ellas.
HTML
Entendiendo que las paginas web son hipertexto, aquí es donde entra HTML. El Lenguaje
de Marcado de Hipertexto o Hyper Text Markup Languange (HTML) es el código que se
utiliza para estructurar y desplegar una página web y sus contenidos. HTML es el lenguaje
con el que se escribe el contenido de las páginas web. Las páginas web pueden ser vistas
por el usuario mediante un tipo de aplicación llamada cliente web o más comúnmente
"navegador". Podemos decir por lo tanto que el HTML es el lenguaje usado para especificar
el contenido que los navegadores deben representar a la hora de mostrar una página web.
Este lenguaje nos permite aglutinar textos, imágenes, enlaces... y combinarlos a nuestro
gusto. La ventaja del HTML a la hora de representar el contenido en un navegador, con
respecto a otros formatos físicos como libros o revistas, es justamente la posibilidad de
colocar referencias a otras páginas, por medio de los enlaces hipertexto.
Cuando nos referimos al contenido queremos indicar párrafos, imágenes, listas, tablas y
todo aquello que forma parte de "el qué". Nunca debemos usar HTML para definir cómo se
debe de ver un contenido, si el texto debe tener color rojo, con una fuente mayor, o si se
debe alinear a la derecha. Para especificar el aspecto que debe tener una web se usa un
lenguaje complementario, llamado CSS.
HTML LENGUAJE DE MARCADO

HTML no es un lenguaje de programación; es un lenguaje de marcado que define la
estructura de tu contenido. Basa su sintaxis en un elemento base al que llamamos marca,
tag o simplemente etiqueta. A través de las etiquetas vamos definiendo los elementos del
documento, como enlaces, párrafos, imágenes, etc. Así pues, un documento HTML estará
constituido por texto y un conjunto de etiquetas para definir la función que juega cada
contenido dentro de la página. Todo eso le servirá al navegador para saber cómo se tendrá
que presentar el texto y otros elementos en la página.
Existen etiquetas para crear negritas, párrafos, imágenes, tablas, listas, enlaces, etc. Así
pues, aprender HTML es básicamente aprenderse una serie de etiquetas, sus funciones,
sus usos y saber un poco sobre cómo debe de construirse un documento básico.
1
Es una tarea muy sencilla de afrontar, al alcance de cualquier persona, puesto que el
lenguaje es muy entendible para los seres humanos.
Por ejemplo, toma la siguiente línea de texto:
Mi gato es muy gruñon
Si quieres especificar que se trata de un párrafo, podrías encerrar el texto con la etiqueta
de párrafo (<p>):
<p> Mi gato es muy gruñon </p>
ANATOMIA DE UNA ETIQUETA HTML
Las partes principales de la etiqueta completa llamada elemento son:
1. La etiqueta de apertura: consiste en el nombre de la etiqueta (en este caso, p),

encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde
comienza o empieza a tener efecto la etiqueta ,en este caso, dónde es el comienzo del
párrafo.
2. La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una
barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina la etiqueta,
en este caso dónde termina el párrafo.
3. El contenido: este es el contenido de la etiqueta, que en este caso es sólo texto.
4. El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido

equivale al elemento.
ANIDAR ETIQUETAS
Puedes también colocar etiquetas dentro de otros etiquetas, esto se llama anidamiento. Si,
por ejemplo, quieres resaltar una palabra del texto (en el ejemplo la palabra «muy»),
podemos encerrarla en una etiqueta <strong>, que significa que dicha palabra se debe
enfatizar:
<p> Mi gato es <strong>muy</strong> gruñon </p>
Debes asegurarte que las etiquetas estén correctamente anidadas: en el ejemplo, creaste
la etiqueta de apertura del elemento <p> primero, luego la del elemento <strong>, por lo
tanto, debes cerrar esta etiqueta primero, y luego la de <p>.
Las etiquetas deben abrirse y cerrarse ordenadamente, de forma tal que se encuentren
claramente dentro o fuera el uno del otro. Si estos se encuentran solapados, el navegador
web tratará de adivinar lo que intentas decirle, pero puede que obtengas resultados
inesperados.
2
ANATOMIA DE UN DOCUMENTO HTML
Hasta ahora has visto lo básico de elementos HTML individuales, pero estos no son muy
útiles por sí solos. Ahora verás cómo los elementos individuales son combinados para
formar una página HTML entera.
Los documentos html van a ser archivos de texto con la extensión .html y tienen la
siguiente anatomía:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi pagina de prueba</title>
</head>
<body>
<p> Cooperacion Humana </p>
</body>
</html>
Tienes:
• <!DOCTYPE html>: el tipo de documento. Es un preámbulo requerido. Anteriormente,

cuando HTML era joven (cerca de 1991/2), los tipos de documento actuaban como
vínculos a un conjunto de reglas que el código HTML de la página debía seguir para ser
considerado bueno, lo que podía significar la verificación automática de errores y
algunas otras cosas de utilidad. Sin embargo, hoy día es simplemente un artefacto
antiguo que a nadie le importa, pero que debe ser incluido para que todo funcione
correctamente. Por ahora, eso es todo lo que necesitas saber.
• <html></html>: la etiqueta <html>. Esta etiqueta encierra todo el contenido de la página

entera y, a veces, se le conoce como la etiqueta raíz (root element).
• <head></head>: la etiqueta <head>. Esta etiqueta actúa como un contenedor de todo

aquello que quieres incluir en la página HTML que no es contenido visible por los
visitantes de la página. Incluye cosas como palabras clave (keywords), una descripción
de la página que quieres que aparezca en resultados de búsquedas, código CSS para
dar estilo al contenido, declaraciones del juego de caracteres, etc.
• <meta charset="utf-8">: esta etiqueta establece el juego de caracteres que tu

documento usará en utf-8, que incluye casi todos los caracteres de todos los idiomas
humanos. Básicamente, puede manejar cualquier contenido de texto que puedas
incluir. No hay razón para no establecerlo, y puede evitar problemas en el futuro.
3
• <title></title>: la etiqueta <title> establece el título de tu página, que es el título que
aparece en la pestaña o en la barra de título del navegador cuando la página es
cargada, y se usa para describir la página cuando es añadida a los marcadores o como
favorita.
• <body></body>: la etiqueta <body>. Encierra todo el contenido que deseas mostrar a

los usuarios web que visiten tu página, ya sea texto, imágenes, videos, juegos, pistas de
audio reproducibles, y demás. Estos, delimitados a su vez por otras etiquetas como las
que hemos visto.
ELEMENTOS EN BLOQUE Y EN LÍNEA

El lenguaje HTML clasifica a todos los elementos en dos grupos: elementos en línea o inline
elements y elementos en bloque o block elements. La diferencia entre ambos viene dada
por el modelo de contenido, por el formato y la dirección.
Los elementos en bloque siempre empiezan en una nueva línea y ocupan todo el espacio
disponible hasta el final de la línea, mientras que los elementos en línea sólo ocupan el
espacio necesario para mostrar sus contenidos.
ATRIBUTOS ETIQUETAS
Las etiquetas son la estructura básica del HTML. Estas etiquetas se componen y contienen
otras propiedades, como son los atributos y el contenido.
HTML define un total de 91 etiquetas, de las cuales 10 se consideran obsoletas. Sin

embargo, una etiqueta por sí sola a veces no contiene la suficiente información para estar
completamente definida. Para ello contamos con los atributos: pares nombres-
valor separados por "=" y escritos en la etiqueta inicial de un elemento después del nombre
del elemento. El valor puede estar encerrado entre "comillas dobles" o 'simples'. Existen,
también, algunos atributos que afectan al elemento por su presencia en la etiqueta de
inicio.
Esta sería la estructura general de una línea de código en lenguaje HTML:
<etiqueta atributo1="valor1" atributo2="valor2">contenido</etiqueta>
<a href="http://www.enlace.com" target="_blank">Ejemplo de enlace</a>
Donde:
• <a> es la etiqueta inicial y </a> la etiqueta de cierre.
• href y target son los atributos.
• http://www.enlace.com y _blank son las variables.
• Ejemplo de enlace es el contenido.
Nota: las etiquetas <img> y <a> las veremos en mayor profundidad más adelante.
TIPOS DE ATRIBUTOS
Aunque cada una de las etiquetas HTML define sus propios atributos, encontramos algunos
comunes a muchas o casi todas las etiquetas, que se dividen en cuatro grupos según su
funcionalidad:
4
• Atributos básicos
• Atributos de internacionalización
• Atributos de eventos
• Atributos de foco
En esta guía solo vamos a ver los básicos. Ya que el resto de atributos son para el uso de
otro lenguaje.
ATRIBUTOS BASICOS
Los atributos básicos se utilizan en la mayoría de etiquetas HTML y XHTML, aunque
adquieren mayor sentido cuando se utilizan hojas de estilo en cascada (CSS):
Atributo Descripción
id="texto" Establece un indicador único a cada elemento
class="texto" Establece la clase CSS que se aplica a los estilos del elemento
style="texto" Aplica de forma directa los estilos CSS de un elemento
title="texto" Establece el título del elemento (Mejora la accesibilidad)
Nota: los atributos de id, class y style los veremos en mayor profundidad en la parte de
CSS.
SINTAXIS HTML
LAS MAYÚSCULAS O MINÚSCULAS SON INDIFERENTES AL
ESCRIBIR ETIQUETAS
En HTML las mayúsculas y minúsculas son indiferentes. Quiere decir que las etiquetas
pueden ser escritas con cualquier tipo de combinación de mayúsculas y minúsculas.
Resulta sin embargo aconsejable acostumbrarse a escribirlas en minúscula ya que otras
tecnologías que pueden convivir con nuestro HTML (XML por ejemplo) no son tan
permisivas y nunca viene mal hacernos a las buenas costumbres desde el principio, para
evitar fallos triviales en un futuro.
COMENTARIOS EN HTML
En un documento HTML, los comentarios se escriben entre los caracteres "". Por
ejemplo: 
5
SALTOS DE LÍNEA EN HTML
Otra de las cosas importantes de conocer sobre la sintaxis básica del HTML es que los
saltos de línea no importan a la hora de interpretar una página. Un salto de línea será
simplemente interpretado como un separador de palabras, un espacio en blanco. Es por
ello que para separar líneas necesitamos usar la etiqueta de párrafo, o la etiqueta BR que
significa un salto de línea simple.
Esto es una línea
<br>
Esto es otra línea
Esto en una pagina se vería así
La etiqueta BR no tiene su correspondiente cierre. Es un detalle que quizás te haya llamado

la atención.
FORMATO DE PARRAFOS HTML

Previamente en nuestra guía habíamos visto la etiqueta <strong> que nos permitía darle
formato a nuestro texto, más concreto ponerlo en negrita. Ahora veremos con más detalle
las más ampliamente utilizadas y ejemplificaremos algunas de ellas posteriormente.
Formatear un texto pasa por tareas tan evidentes como definir los párrafos, justificarlos,
introducir viñetas, numeraciones o bien poner en negrita, itálica, etc.
Hemos visto que para definir los párrafos nos servimos de la etiqueta P que introduce un
salto y deja una línea en blanco antes de continuar con el resto del documento.
Podemos también usar la etiqueta <br>, de la cual no existe su cierre correspondiente, para
realizar un simple salto de línea con lo que no dejamos una línea en blanco sino que solo
cambiamos de línea. Cabe destacar que la etiqueta <br>, no es la única etiqueta sin cierre.
Podéis comprobar que cambiar de línea en nuestro documento HTML sin introducir alguna
de estas u otras etiquetas no implica en absoluto un cambio de línea en la página
visualizada. En realidad el navegador introducirá el texto y no cambiara de línea a no ser
que esta llegue a su fin o bien lo especifiquemos con la etiqueta correspondiente.
ALINEAR TEXTO
Los párrafos delimitados por etiquetas P pueden ser fácilmente justificados a la izquierda,
centro o derecha especificando dicha justificación en el interior de la etiqueta por medio
de un atributo "align". Recordemos que los atributos no son más que un parámetro incluido
en el interior de la etiqueta que ayudan a definir el funcionamiento de la etiqueta de una
forma más personalizada.
6
Es importante tener muy en cuenta lo siguiente, que ya hemos comentado
anteriormente. El HTML se usa para definir el contenido. Por lo tanto, los atributos align que
vamos a conocer a continuación se estarían metiendo en una terreno que no le
corresponde al HTML, porque están definiendo la forma en la que un párrafo debe de
representarse, su estilo, y no el contenido. Es importante señalarlo para aprender que estas
cosas se deben hacer mediante el lenguaje CSS, que sirve para definir el estilo, la forma.
Usamos este ejemplo también para reforzar el uso de los atributos de una manera más
practica.
Así, si deseásemos introducir un texto alineado a la izquierda escribiríamos:
<p align="left">Texto alineado a la izquierda</p>
Para una justificación al centro:
<p align="center">Texto alineado al centro</p>
Para alinear a la derecha:
<p align="right">Texto alineado a la derecha</p>
Esto en una pagina se vería así:
Como veis, en cada caso el atributo align toma determinados valores que son escritos
entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el
correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor
definido por defecto. Para el caso de align, el valor por defecto es left.
FORMATEO DE LETRA
Además de todo lo relativo a la organización de los párrafos, uno de los aspectos
primordiales del formateo de un texto es el de la propia letra. Resulta muy común y
práctico presentar texto resaltado en negrita, itálica y otros. Todo esto y mucho más es
posible por medio del HTML a partir de multitud de etiquetas entre las cuales vamos a
destacar algunas.
Pero antes de comenzar cabe hacer una reflexión sobre por qué son interesantes estas
etiquetas y se siguen usando, a pesar que están entrando prácticamente en el terreno de
CSS, ya que en la práctica están directamente formateando el aspecto de las fuentes. Son
importantes porque las etiquetas en si no están para definir un estilo en concreto, sino una
función de ciertas palabras dentro de un contenido.
NEGRITA
Podemos escribir texto en negrita incluyéndolo dentro de las etiquetas strong y su cierre.
Recordemos que ya la habíamos visto previamente.
<p><strong> Texto en negrita </strong> y texto normal</p>
7
ITÁLICA
En este caso existen dos posibilidades, una corta: i y su cierre (italic) y otra un poco más
larga: EM y su cierre. En esta guía vamos a usar, y en la mayoría de las páginas que veréis
por ahí, os encontraréis con la primera forma sin duda más sencilla a escribir y a acordarse.
<p><i> Texto en italica </i> y texto normal</p>
SUBRAYADO
El HTML nos propone también para el subrayado la etiqueta: U (underlined). Sin embargo, el
uso de subrayados ha de ser aplicado con mucha precaución dado que los enlaces
hipertexto van, a no ser que se indique lo contrario, subrayados con lo que podemos
confundir al lector y apartarlo del verdadero interés de nuestro texto.
Además, cabe decir que la etiqueta U se ha quedado obsoleta, debido a que es algo que
realmente se debe hacer del lado del CSS, al ser básicamente un estilo.
<p><u> Texto subrayado</u> y texto normal</p>
ENCABEZADOS
Existen otras etiquetas para definir párrafos especiales, que funcionaran como títulos de
nuestra pagina. Son los encabezados o headings en inglés. Como decimos, son etiquetas
que formatean el texto como un titulo, pero el hecho de que cambien el formato no es lo
que nos tiene que preocupar, sino el significado en sí de la etiqueta. Es cierto que los
navegadores asignan un tamaño mayor de letra y colocan el texto en negrita, pero lo
importante es que sirven para definir la estructura del contenido de un documento HTML.
Así los navegadores para ciegos podrán informar a los invidentes que esta es una división
nueva de contenido y que su titulo es este o aquel. También motores de búsqueda sabrán
interpretar mejor el contenido de una página en función de los títulos y subtítulos.
Hay varios tipos de encabezados, que se diferencian visualmente en el tamaño de la letra

que utilizan. La etiqueta en concreto es la H1, para los encabezados más grandes, H2 para
los de segundo nivel y así hasta H6 que es el encabezado más pequeño. Pero lo
importante, insistimos es la estructura que denotan. Una página tendrá generalmente un
encabezado de nivel 1 y dentro varios de nivel 2.
8
Luego, dentro de los H2 encontraremos si acaso H3, etc. Nunca debemos usar los
encabezados porque nos formateen el texto de una manera dada, sino porque nuestro
documento lo requiera según su estructura.
Los encabezados se verán de esta manera en la página:
Los encabezados implican también una separación en párrafos, así que todo lo que
escribamos dentro de H1 y su cierre (o cualquier otro encabezado) se colocará en un
párrafo independiente.
Podemos ver cómo se presentan algunos encabezados a continuación.
<h1> Encabezado de nivel 1 </h1>
Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Veremos un
ejemplo de encabezado de nivel 2 alineado al centro, aunque repetimos que esto debería
hacerse en CSS.
<h2 align=”center”> Encabezado de nivel 2 </h2>
LISTAS EN HTML
Las posibilidades que nos ofrece el HTML en cuestión de tratamiento de texto son
realmente notables. No se limitan a lo visto hasta ahora, sino que van más lejos todavía.
Varios ejemplos de ello son las listas, que sirven para enumerar y definir elementos.
Las listas originalmente están pensadas para citar, numerar y definir cosas a través de
características, o al menos así lo hacemos en la escritura de textos. Sin embargo, las listas
finalmente se utilizan para mucho más que enumerar una serie de puntos, en realidad son
un recurso muy interesante para poder maquetar elementos diversos, como barras de
navegación, pestañas etc.
Por ahora, trataremos las listas desde el punto de vista de su construcción y veremos los
diferentes tipos que existen, y que podemos utilizar para resolver nuestras distintas
necesidades a la hora de escribir textos en HTML.
Podemos distinguir dos tipos de listas HTML:
• Listas desordenadas
• Listas ordenadas
9
LISTAS DESORDENADAS
Son delimitadas por las etiquetas UL y su cierre (unordered list). Cada uno de los elementos
de la lista es citado por medio de una etiqueta LI (La LI tiene su cierre, aunque si no lo
colocas el navegador al ver el siguiente LI interpretará que estás cerrando el anterior). La
cosa queda así:
<p>Países del mundo</p>
<ul>
<li>Argentina</li>
<li>Perú</li>
<li>Chile</li>
</ul>
Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos
especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura UL, si
queremos que el estilo sea válido para toda la lista, o dentro de la etiqueta LI si queremos
hacerlo específico de un solo elemento. La sintaxis es del siguiente tipo:
<ul type="tipo de viñeta">
Donde tipo de viñeta puede ser uno de los siguientes:
• circle
• disc
• square
Vamos a ver un ejemplo de lista con un cuadrado en lugar de un redondel, y en el último
elemento colocaremos un círculo. Para ello vamos a colocar el atributo type en la etiqueta
UL, con lo que afectará a todos los elementos de la lista.
<ul type="square">
<li>Elemento 1 </li>
<li type="circle">Elemento 4
</ul>
10
LISTAS ORDENADAS
Las listas ordenadas sirven también para presentar información, en diversos elementos o
items, con la particularidad que éstos estarán predecidos de un número o una letra para
enumerarlos, siempre por un orden.
Para realizar las listas ordenadas usaremos las etiquetas OL (ordered list) y su cierre. Cada
elemento sera igualmente indicado por la etiqueta LI, que ya vimos en las listas
desordenadas.
Pongamos un ejemplo:
<p>Reglas de comportamiento en el trabajo</p>
<ol>
<li>El jefe siempre tiene la razón </li>
<li>En caso de duda aplicar regla 1 </li>
</ol>
Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la
posibilidad de modificar el estilo. En concreto nos es posible especificar el tipo de
numeración empleado eligiendo entre números (1, 2, 3...), letras (a, b, c...) y sus mayúsculas
(A, B, C,...) y números romanos en sus versiones mayúsculas (I, II, III,...) y minúsculas (i, ii, iii,...).
Para realizar dicha selección hemos de utilizar, como para el caso precedente, el atributo
type, el cual será situado dentro de la etiqueta OL. Los valores que puede tomar el atributo
en este caso son:
11
Puede que en algún caso deseemos comenzar nuestra enumeración por un número o letra
que no tiene por qué ser necesariamente el primero de todos. Para solventar esta situación,
podemos utilizar un segundo atributo, start, que tendrá como valor un número. Este
número, que por defecto es 1, corresponde al valor a partir del cual comenzamos a definir
nuestra lista. Para el caso de las letras o los números romanos, el navegador se encarga de
hacer la traducción del número a la letra correspondiente.
Un ejemplo de todo esto sería:
<p>Ordenamos por números</p>
<ol type="1">
<li> Elemento 2 </li>
</ol>
<p>Ordenamos por letras</p>
<ol type="a">
<li>Elemento a </li>
<li> Elemento b </li>
</ol>
<p>Ordenamos por números romanos empezando por el 10</p>
<ol type="i" start="10">
<li>Elemento x </li>
<li> Elemento xi </li>
</ol>
12
ANIDANDO LISTAS
Nada nos impide utilizar todas estas etiquetas de forma anidada como hemos visto en
otros casos. De esta forma, podemos conseguir listas mixtas como por ejemplo:
<p>Ciudades del mundo</p>

<ul>
<li>Argentina </li>
<ol>
<li>Buenos Aires </li>
<li>Bariloche </li>
</ol>
<li>Uruguay </li>
<ol>
<li>Montevideo </li>
<li>Punta del Este </li>
</ol>
</ul>
ENLACES EN HTML
Hasta aquí, hemos podido ver que una página web es un archivo HTML en el que podemos
incluir, entre otras cosas, textos formateados a nuestro gusto e imágenes (las veremos con
detalle enseguida). Del mismo modo, un sitio web podrá ser considerado como el conjunto
de archivos, principalmente páginas HTML e imágenes, que constituyen el contenido al que
el navegante tiene acceso.
Sin embargo, no podríamos hablar de navegante o de navegación si estos archivos HTML

no estuviesen debidamente conectados entre ellos y con el exterior de nuestro sitio por
medio de enlaces hipertexto. En efecto, el atractivo original del HTML radica en la posible
puesta en relación de los contenidos de los archivos introduciendo referencias bajo forma
de enlaces que permitan un acceso rápido a la información deseada. De poco serviría en la
red tener páginas aisladas a las que la gente no puede acceder y desde las que la gente no
puede saltar a otras.
Un enlace puede ser fácilmente detectado por el usuario en una página. Basta con deslizar
el puntero del ratón sobre las imágenes o el texto y ver como cambia de su forma original
transformándose por regla general en una mano con un dedo señalador.
13
Adicionalmente, estos enlaces suelen ir, en el caso de los textos, coloreados y subrayados
para que el usuario no tenga dificultad en reconocerlos.
SINTAXIS DE UN ENLACE
Para colocar un enlace, nos serviremos de las etiquetas a y su cierre. Dentro de la etiqueta
de apertura deberemos especificar asimismo el destino del enlace. Este destino será
introducido bajo forma de atributo, el cual lleva por nombre "href".
La sintaxis general de un enlace es por tanto de la forma:
<a href="destino">contenido</a>
Siendo el "contenido" un texto o una imagen. Es la parte de la página que se colocará

activa y donde deberemos pulsar para acceder al enlace. Por su parte, "destino" será una
página, un correo electrónico o un archivo.
Por ejemplo, un enlace a la home de EggEducación, se vería así:
<a href="https://eggeducacion.com/es-AR/">Home de EggEducación.com</a>
Ahora, si queremos que el contenido del enlace sea una imagen y no un texto, podremos
colocar la correspondiente etiqueta IMG dentro de la etiqueta a.
<a href="https://eggeducacion.com/es-AR/"><img src="logo.jpg"></a>
Nota: veremos la etiqueta de imágenes más adelante.
EL ASPECTO DE LOS ENLACES

Nosotros mediante el HTML, y las hojas de estilo CSS, podemos definir el aspecto que
tendrán los enlaces en una página. Sin embargo, ya de manera predeterminada el
navegador los destaca para que los podamos distinguir. Generalmente encontraremos a
los enlaces subrayados y coloreados en azul, aunque esta regla depende del navegador
del usuario y de sus estilos definidos como predeterminados.
TIPOS DE ENLACES
Para estudiar en profundidad los enlaces tenemos que clasificarlos por su tipo, porque
dependiendo ese tipo algunas cosas cambiarán a la hora de construirlos.
En función del destino los enlaces son clásicamente agrupados del siguiente modo:
• Enlaces locales: los que se dirigen a otras páginas del mismo sitio web.
• Enlaces remotos: los dirigidos hacia páginas de otros sitios web. Estos son los que
vimos en el ejemplo anterior.
14
ENLACES LOCALES
Como hemos dicho, un sitio web esta constituido de páginas interconexas, que se
relacionan mediante enlaces de hipertexto. Para cumplir con esto es que vamos a utilizar
los enlaces locales.
Los enlaces locales se tratan de un tipo de enlace mucho más común en el día a día del
desarrollo. De hecho, es el tipo de enlace que más se produce en lo general. Estos enlaces
locales nos permiten relacionar distintos documentos HTML que componen un sitio web.
Gracias a los enlaces locales podremos convertir varias páginas sueltas en un sitio web
completo, compuesto de varios documentos.
Para crear este tipo de enlaces, hemos de usar la misma etiqueta A que ya conocemos, de
la siguiente forma:
<a href="archivo.html">contenido</a>
RUTAS DE LOS ENLACES
Hacer un enlace en si no es para nada complejo. No requiere muchas explicaciones con lo

que ya hemos visto en la guía alcanza, sin embargo hay que abordar con detalle un tema
importante: las rutas de los enlaces. Como rutas nos referimos al destino del enlace, o sea,
lo que ponemos en el atributo "href" y es importante que nos paremos aquí porque nos
puede dar algunos problemas al desarrollar, sobre todo para las personas que puedan
tener menos experiencia en el trabajo con el ordenador.
Por regla general, para una mejor organización, los sitios suelen estar ordenados por
directorios. Estos directorios suelen contener diferentes secciones de la página, imágenes,
scripts, estilos, etc. Es por ello que en muchos casos no nos valdrá con especificar el
nombre del archivo, sino que tendremos que especificar además el directorio en el que
nuestro archivo.html esta alojado.
Para aquellos que no saben como mostrar un camino de un archivo, aquí van una serie de
indicaciones que los ayudaran a comprender la forma de expresarlos. No resulta difícil en
absoluto y con un poco de practica lo haréis prácticamente sin pensar.
1. Hay que situarse mentalmente en el directorio en el que se encuentra la página

donde vamos a crear el enlace.
2. Si la página destino está en el mismo directorio que el archivo desde donde vamos
a enlazar podemos colocar simplemente el nombre del archivo de destino, ya que
no hay necesidad de cambiar de directorio.
3. Si la página de destino está en una carpeta o subdirectorio interior al directorio

donde está el archivo de origen, hemos de marcar la ruta enumerando cada uno de
los directorios por los que pasamos hasta llegar al archivo de destino, separándolos
por el símbolo barra "/". Al final obviamente, escribimos el nombre del archivo
destino.
4. Si la página destino se encuentra en un directorio padre (superior al de la página del

enlace), hemos de escribir dos puntos y una barra "../" tantas veces como niveles
subamos en la arborescencia hasta dar con el directorio donde esta emplazado el
archivo destino.
15
5. Si la página se encuentra en otro directorio no incluido ni incluyente del archivo
origen, tendremos que subir como en la regla 3 por medio de ".." hasta encontrar un
directorio que englobe el directorio que contiene a la página destino. A
continuación haremos como en la regla 2. Escribiremos todos los directorios por los
que pasamos hasta llegar al archivo.
Imagina que tienes la siguiente estructura de carpetas y archivos. La que aparece en la

siguiente imagen.
1) Para hacer un enlace a index.html
<a href="index.html">Ir a index.html</a>
2) Para hacer un enlace desde index.html hacia pagina1.html:
<a href="seccion1/paginas/pagina1.html">Ir a pagina1.html</a>
3) Para hacer un enlace desde pagina2 hacia pagina1:
<a href="../seccion1/paginas/pagina1.html">Ir (también) a pagina1.html</a>
4) Para hacer un enlace desde pagina1 hacia pagina2:
<a href="../../seccion2/pagina2.html">Ir ahora a pagina2.html</a>
IMÁGENES EN HTML
Sin duda uno de los aspectos más vistosos y atractivos de las páginas web es el grafismo.
La introducción en nuestro texto de imágenes puede ayudarnos a explicar más fácilmente
nuestra información y darle un aire mucho más estético. El abuso no obstante, puede
conducirnos a una sobrecarga que se traduce en una distracción para el navegante, quien
tendrá más dificultad en encontrar la información necesaria.
El uso de imágenes también tiene que ser realizado con cuidado porque aumentan el
tiempo de carga de la página, lo que puede ser de un efecto nefasto si nuestro visitante no
tiene una buena conexión o si es un poco impaciente. Por ello es recomendable siempre
optimizar las imágenes para Internet, haciendo que su tamaño en bytes sea lo mínimo
posible, para facilitar la descarga, pero sin que ello comprometa mucho su calidad.
En esta guía no explicaremos como crear ni tratar las imágenes, únicamente diremos que
para ello se utilizan aplicaciones como Paint Shop Pro, Photoshop o Gimp. Tampoco
explicaremos las particularidades de cada tipo de archivo: GIF, JPG o PNG y la forma de
optimizar nuestras imágenes.
La etiqueta que utilizaremos para insertar una imagen es IMG (image). Esta etiqueta no
posee su cierre correspondiente y en ella hemos de especificar obligatoriamente el
paradero de nuestro archivo gráfico mediante el atributo src (source).
16
La sintaxis queda entonces de la siguiente forma:
<img src="camino_hacia_el_archivo.jpg">
Para expresar el camino, lo haremos de la misma forma que vimos para los enlaces. Las
reglas siguen siendo las mismas, lo único que cambia es que, en lugar de una página
siendo el destino, el destino es un archivo gráfico. En el código anterior estamos enlazando
un archivo con extensión .jpg, pero podrá ser otro tipo de archivo como .gif o .png.
Aparte de este atributo, indispensable obviamente para la visualización de la imagen, la

etiqueta IMG nos propone otra serie de atributos de mayor o menor utilidad, que listamos a
continuación:
ATRIBUTO ALT
Dentro de las comillas de este atributo colocaremos una brevísima descripción de la
imagen. Esta etiqueta no es indispensable pero presenta varias utilidades. La sintaxis te
quedaría de esta manera:
<img src="mi_archivo.png" alt="Descripción de esta maravillosa imagen">
Primeramente, sirve para el posicionamiento de la página en buscadores. De los atributos

alt el buscador puede extraer palabras clave y le ayuda a entender qué función o
contenido tiene la imagen, y por lo tanto la página.
Otra utilidad importante la encontramos en determinadas aplicaciones, usadas por

personas con discapacidad. Navegadores para ciegos, por ejemplo, no muestran las
imágenes y por tanto los alt ofrecen la posibilidad de leerlas. Nunca esta de más pensar en
crear páginas accesibles.
Por último, durante el proceso de carga de la página y cuando la imagen no ha sido todavía
cargada, el navegador podría mostrar esta descripción, con lo que el navegante se puede
hacer una idea de lo que va en ese lugar. Si hubo problemas de conexión y no se pudo
mostrar la imagen, también podría usarse ese alt para mostrar al menos su descripción.
En general podemos considerar como aconsejable el uso de este atributo, salvo para
imágenes de poca importancia. Si la imagen es usada como cuerpo de un enlace todavía
se hace más indispensable.
ATRIBUTOS HEIGHT Y WIDTH

Estos atributos definen la altura y anchura respectivamente de la imagen en píxeles.
Aunque estas dimensiones forman parte del estilo de la imagen, y por tanto podrían ir en el
CSS, todavía puede ser interesante definirlas dentro del HTML. Esto, ya no es tan
indispensable, puesto que muchos sitios creados con "Responsive Web Design" prefieren
que las imágenes se adapten al tamaño de la pantalla donde se va a visualizar.
Todos los archivos gráficos poseen unas dimensiones de ancho y alto. Estas dimensiones
pueden obtenerse a partir del propio diseñador grafico o bien haciendo clic con el botón
derecho sobre la imagen, vista desde el explorador de archivos de tu ordenador, para
luego elegir "propiedades" o "información de la imagen" sobre el menú que se despliega.
Un ejemplo de etiqueta IMG con sus valores de anchura y altura declarados te quedaría así:
17
<img src="mi-imagen.gif" width="200" height="300">
IMÁGENES QUE SON ENLACES Y EL ATRIBUTO BORDER

Si un texto puede servir de enlace, una imagen puede cumplir la misma función:
<a href="archivo.html"><img src="imagen.gif"></a>
El problema de hacer esto en ciertos navegadores es que se crea un borde en la imagen,

del mismo color que el color configurado para los enlaces, lo que suele ser un efecto poco
deseado.
Sin embargo, en HTML podemos indicar que una imagen tenga borde. Mediante el atributo
"border" se define el tamaño en píxeles del cuadro que rodea la imagen. De esta forma
podemos recuadrar nuestra imagen si lo deseamos. No es algo que se use mucho, pero
resulta particularmente útil cuando deseamos eliminar el borde que aparece cuando la
imagen sirve de enlace. En dicho caso tendremos que especificar border="0".
TABLAS EN HTML
Una tabla es un conjunto de celdas organizadas dentro de las cuales podemos alojar
distintos contenidos. HTML dispone de una gran variedad de etiquetas para crear tablas,
con sus atributos.
En un principio nos podría parecer que las tablas son raramente útiles y que pueden ser
utilizadas principalmente para listar datos como agendas, resultados y otros datos de una
forma organizada. En general, sirven para representar información tabulada, en filas y
columnas. Esto es una realidad en los últimos años, desde que las tablas se han
descartado para fines relacionados con la maquetación.
Como veremos a continuación, existen diversas etiquetas que se deben utilizar en una
forma determinada para la creación de tablas. Por ello, puede que en un principio nos
resulte un poco complicado trabajar con estas estructuras pero, con un poco de práctica
podremos crear tablas con absoluta soltura. Si deseamos mostrar datos de una manera
sencilla de leer, dispuestos en filas y columnas, tarde o temprano observaremos que las
tablas son la mejor solución y apreciaremos las posibilidades nos ofrecen.
ETIQUETAS BÁSICAS PARA TABLAS EN HTML

Para empezar, nada más sencillo que por el principio: las tablas son definidas por las
etiquetas TABLE y su cierre.
Dentro de estas dos etiquetas colocaremos todas las otras etiquetas de las tablas, hasta
llegar a las celdas. Dentro de las celdas ya es permitido colocar textos e imágenes que
darán el contenido a la tabla.
Las tablas son descritas por líneas de arriba a abajo (y luego por columnas de izquierda a
derecha). Cada una de estas líneas, llamada fila, es definida por otra etiqueta y su cierre: TR
(table row).
Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será
definida por otra etiqueta: TD (table data). Dentro de ésta y su cierre será donde
coloquemos nuestro contenido, el contenido de cada celda.
18
Aquí tenéis un ejemplo de estructura de tabla:
<table>
<tr>
<td>Celda 1, linea 1</td>
<td> Celda 2, linea 1</td>
</tr>
<tr>
</tr>
</table>
También existe la etiqueta TH (table header), que sirve para crear una celda cuyo contenido
esté formateado como un título o cabecera de la tabla. En la práctica, lo que hace es poner
en negrita y centrado el contenido de esa celda, lo que se puede conseguir aplicando las
correspondientes etiquetas dentro de la celda.
Aquí tenéis un ejemplo de estructura de tabla con la etiqueta th:
<table>
<tr>
<th>Titulo Celda 1</th>
<th> Titulo Celda 2</th>
</tr>
<tr>
<td>Celda 1, linea 1</td>
</tr>
<tr>
</tr>
</table>
19
ATRIBUTOS PARA TABLAS, FILAS Y CELDAS
A partir de esta idea simple y sencilla, las tablas adquieren otra magnitud cuando les
incorporamos toda una cantidad de atributos aplicados sobre cada tipo de etiquetas que
las componen.
En cuanto a atributos para tabla hay unos cuantos. Muchos los conoces ya de otras
etiquetas, como width, height, align, etc. Hay otros que son especialmente creados para las
etiquetas TABLE.
• cellspacing: es el espacio entre celdas de la tabla.

• cellpadding: es el espacio entre el borde de la celda y su contenido.
• border: es el número de píxeles que tendrá el borde de la tabla.
• bordercolor: es el rbg que le vas a asignar al borde de la tabla.
En cuanto a las etiquetas "interiores" de una tabla, nos referimos a TR y TD, ten en cuenta:
• Podemos usar prácticamente cualquier tipo de etiqueta dentro de la etiqueta TD

para, de esta forma, escribir su contenido.
• Las etiquetas situadas en el interior de la celda no modifican el resto del
documento.
• Las etiquetas de fuera de la celda no son tenidas en cuenta por ésta.
Así pues, podemos especificar el formato de nuestras celdas a partir de etiquetas
introducidas en su interior o mediante atributos colocados dentro de la etiqueta de celda
TD o bien, en algunos casos, dentro de la etiqueta TR, si deseamos que el atributo sea
valido para toda la línea. La forma más útil y actual de dar forma a las celdas es a partir de
las hojas de estilo en cascada que ya tendréis la oportunidad de abordar más adelante.
Veamos a continuación algunos atributos útiles para la construcción de nuestras tablas.

Empecemos viendo atributos que nos permiten modificar una celda en concreto o toda
una línea:
• align: Justifica el texto de la celda del mismo modo que si fuese el de un párrafo.
• valign: Podemos elegir si queremos que el texto aparezca arriba (top), en el centro
(middle) o abajo (bottom) de la celda.
• bgcolor: Da color a la celda o línea elegida.
• bordercolor: Define el color del borde.
Otros atributos que pueden ser únicamente asignados a una celda y no al conjunto de
celdas de una línea son:
• background: Nos permite colocar un fondo para la celda a partir de un enlace o una
imagen.
• height: Define la altura de la celda en pixeles o porcentaje.
20
• width: Define la anchura de la celda en pixeles o porcentaje.
• colspan: Expande una celda horizontalmente.
• rowspan: Expande una celda verticalmente.
Estos últimos cuatro atributos descritos son de gran utilidad. Concretamente, height y
width nos ayudan a definir las dimensiones de nuestras celdas de una forma absoluta (en
pixeles o puntos de pantalla) o de una forma relativa, es decir por porcentajes referidos al
tamaño total de la tabla.
Los atributos rowspan y colspan son también utilizados frecuentemente. Gracias a ellos es
posible expandir celdas fusionando éstas con sus vecinas. El valor que pueden tomar estas
etiquetas es numérico. El número representa la cantidad de celdas fusionadas.
Así:
<td colspan="2">
Por otro lado:
<td rowspan="2">
El resto de los atributos presentados presentan una utilidad y uso bastante obvios. Los
dejamos a vuestra propia investigación.
FORMULARIOS HTML
Hasta ahora hemos visto la forma en la que el HTML gestiona y muestra la información,
esencialmente mediante texto, imágenes y enlaces. Nos queda por ver de qué forma
podemos intercambiar información con nuestro visitante. Desde luego, este nuevo aspecto
resulta primordial para gran cantidad de acciones que se pueden llevar a cabo mediante la
Web: comprar un articulo, rellenar una encuesta, enviar un comentario al autor, registrar un
usuario, etc.
Los formularios son esas famosas cajas de texto y botones que podemos encontrar en
muchas páginas web. Son muy utilizados para realizar búsquedas o bien para introducir
datos personales por ejemplo en sitios de comercio electrónico. Los datos que el usuario
introduce en estos campos son enviados al correo electrónico del administrador del
formulario o bien a un programa que se encarga de procesarlo automáticamente. Nosotros
en esta guía no vamos a mostrar como enviar la información al mail, ya que nos interesa,
más adelante poder manejar esa información.
21
QUÉ SE PUEDE HACER CON UN FORMULARIO
Usando HTML podemos únicamente enviar el contenido del formulario a un correo
electrónico, es decir, construir un formulario con diversos campos y, a la hora pulsar el
botón de enviar, generar un mensaje de que se ha registrado con éxito la información.
Pero para todo lo que sea manejar esa información y guardarla, por ejemplo, en una base
de datos vamos a tener que utilizar Java. Como lo haremos lo veremos más adelante en el
curso.
Así pues, en resumen, con HTML podremos construir los formularios, con diversos tipos de
campos, como cajas de texto, botones de radio, cajas de selección, menús desplegables,
etc. Sin embargo, debe quedar claro que desde HTML no se puede manejar esta
información para guardarla o enviarla a algún correo, etc. Eso será trabajo de Java.
CÓMO HACER UN FORMULARIO EN HTML

Los formularios son definidos por medio de las etiquetas FORM y su cierre. Entre estas dos
etiquetas colocaremos todos los campos y botones que componen el formulario. Dentro
de esta etiqueta FORM debemos especificar algunos atributos:
action: define el tipo de acción a llevar a cabo con el formulario. Como ya hemos dicho,
existen dos posibilidades:
• El formulario es enviado a una dirección de correo electrónico. Para esto hay que
poner el mail en el action.
• El formulario es enviado a un programa o script que procesa su contenido. Esta es
la posibilidad que más no interesa.
<form action="ruta del método que va a manejar la información"></form>
method: Este atributo se encarga de especificar la forma en la que el formulario es enviado.

Los dos valores posibles que puede tomar esta atributo son POST y GET. A efectos
prácticos y, salvo que se os diga lo contrario, daremos siempre el valor POST. Estos
conceptos de POST y GET, lo veremos más adelante en el curso.
enctype: Se utiliza para indicar la forma en la que viajará la información que se mande por
el formulario. En el caso más corriente, enviar el formulario por correo electrónico, el valor
de este atributo debe de ser "text/plain". Así conseguimos que se envíe el contenido del
formulario como texto plano dentro del email. Si fuéramos a enviar una imagen dentro del
formulario, este atributo debería ser “multipart/form-data”. También todos estos conceptos
vamos a verlos más adelante.
Este ultimo atributo puede que esté como que no esté, las otras dos si vamos a guardar la
información de nuestro formulario en Java, van a estar siempre.
EJEMPLO DE ETIQUETA FORM COMPLETA
Entonces con todo lo anterior ya explicado, la etiqueta completa nos quedaría así:
<form action="ruta del metodo que va a manejar la información" method="POST"

enctype="multipart/form-data"></form>
22
Entre esta etiqueta y su cierre colocaremos el resto de etiquetas que darán forma a nuestro
formulario.
CAMPOS DE TEXTO
El lenguaje HTML nos propone una gran diversidad de alternativas a la hora de crear
nuestros formularios, es decir, una gran variedad de elementos para diferentes propósitos.
Estas van desde la clásica caja de texto, hasta la lista de opciones en un menú
desplegable, pasando por las cajas de validación, etc.
Las etiquetas que tenemos que utilizar para crear campos de texto, pueden ser de dos
tipos. Veamos en qué consiste cada una de estas modalidades y como podemos
implementarlas en nuestro formulario.
ETIQUETA INPUT
Las cajas de texto son colocadas por medio de la etiqueta INPUT. Dentro de esta etiqueta
hemos de especificar el valor de dos atributos: type y name.
<input type="text" name="nombre">
Como todos sabrán un input se ve así:
De este modo expresamos nuestro deseo de crear una caja de texto cuyo contenido será
llamado "nombre" (por ejemplo, en el caso de la etiqueta anterior, pero podemos poner
distintos nombres a cada uno de los campos de texto que habrán en los formularios).
ATRIBUTO TYPE
Como hemos visto el atributo type nos sirve para especificar el tipo de dato que se va a
ingresar en nuestro input, en el ejemplo anterior lo habíamos puesto como tipo text, para
que sea una caja de texto y poder ingresar texto. Pero existen otros tipos de valores para el
atributo type
NUMBER
Este tipo permite al usuario ingresar números. Los navegadores vienen con validaciones
para evitar que el usuario ingrese algo que no sea números. Además, en los navegadores
modernos, los campos numéricos suelen venir con controles que permiten a los usuarios
cambiar su valor de forma gráfica.
<input type="number">
Se vería así:
23
DATE
Este le permite al usuario ingresar una fecha, ya sea mediante una caja de texto o una
interfaz grafica con selector de fecha.
<input type="date">
Se vería así:
EMAIL
Este tipo permite al usuario ingresar un mail. Los navegadores vienen con validaciones
para validar que se esté ingresando con el formato correcto de un mail. Este input se va a
ver como un input de texto común y corriente.
<input type="email">
TEXTO OCULTO
Hay determinados casos en los que podemos desear esconder el texto escrito en el
campo input, por medio de círculos negros, de manera que aporte una cierta
confidencialidad. Para esto vamos a usar el type password.
<input type="password">
Se vería así:
Más adelante veremos otros valores para el atributo type con otras utilidades
ATRIBUTO NAME
Si vemos de nuevo el ejemplo del principio:
En este ejemplo creamos una caja de texto cuyo contenido será llamado "nombre”,
elegimos nombre, pero podemos ponerles el nombre que queramos.
24
El nombre del elemento del formulario es de gran importancia para poder identificarlo en
nuestro programa de procesamiento (Java).
Además de estos dos atributos, esenciales para el correcto funcionamiento de nuestra

etiqueta, existen otra serie de atributos que pueden resultarnos de utilidad pero que no son
imprescindibles:
size: define el tamaño de la caja de texto, en número de caracteres visibles. Si al escribir el

usuario llega al final de la caja, el texto que escriba a continuación también cabrá dentro
del campo pero irá desfilando, a medida que se escribe, haciendo desaparecer la parte de
texto que queda a la izquierda.
maxlength: indica el tamaño máximo del texto, en número de caracteres, que puede ser
escrito en el campo. En caso que el campo de texto tenga definido el atributo maxlength, el
navegador no permitirá escribir más caracteres en ese campo que los que hayamos
indicado.
value: en algunos casos puede resultarnos interesante asignar un valor definido al campo
en cuestión. Esto puede ayudar al usuario a rellenar más rápidamente el formulario o darle
alguna idea sobre la naturaleza de datos que se requieren. Este valor inicial del campo
puede ser expresado mediante el atributo value. Veamos su efecto con un ejemplo
sencillo:
<input type="text" name="instituto" value="Egg Educación">
Genera un campo de este estilo:
placeholder: este atributo especifica una pequeña pista que describe el valor esperado de
para el campo (input).
La pequeña sugerencia se muestra en el campo de entrada antes de que el usuario ingrese

un valor. Una vez que escriba, esa pista va a desaparecer.
<input type="text" name="nombre " placeholder="Nombre del usuario ">
Genera un campo de este estilo:
Nota: recordemos que todos estos ejemplos de input deben ir entre las etiquetas de
apertura y de cierre form.
<form>
<input type="text" name="instituto" value="Egg Educación">
</form>
25
ETIQUETA TEXTAREA PARA TEXTO LARGO
Si deseamos poner a la disposición de usuario un campo de texto donde pueda escribir
cómodamente sobre un espacio compuesto de varias líneas, hemos de invocar una nueva
etiqueta: TEXTAREA y su cierre correspondiente.
Este tipo de campos son prácticos cuando el contenido a enviar no es un nombre, teléfono,
edad o cualquier otro dato breve, sino más bien, un comentario, opinión, etc. en los que
existe la posibilidad que el usuario desee rellenar varias líneas.
Dentro de la etiqueta textarea deberemos indicar, como para el caso visto anteriormente, el
atributo name para asociar el contenido a un nombre que será asemejado a una variable
en un lenguaje de programación. Además, podemos definir las dimensiones del campo a
partir de los atributos siguientes:
• rows: define el número de líneas del campo de texto.

• cols: define el número de columnas del campo de texto.
La etiqueta queda por tanto de esta forma:
<textarea name="comentario" rows="10" cols="40"></textarea>
El resultado es el siguiente:
Asimismo, es posible predefinir el contenido del campo. Para ello, no usaremos el atributo
value, sino que escribiremos dentro de la etiqueta el contenido que deseamos atribuirle.
Veámoslo:
<textarea name="comentario" rows="10" cols="40">Escribe tu comentario…</textarea>
Esta etiqueta al igual que el input debe ir dentro de la etiqueta form.
ETIQUETA LABEL
El elemento LABEL y su etiqueta de cierre, provee una descripción corta para el campo de
texto y que puede ser asociada a un campo de texto. Podemos asociar una etiqueta label a
un campo de texto para que el usuario pueda acceder al campo de texto con solo clickear
el label. También, como veremos más adelante, cuando veamos las cajas de opciones,
clickear en el nombre de la opción para acceder a ella, “tickear” esa opción.
26
La etiqueta se ve de esta forma:
<label>Nombre del Usuario</label>
Podríamos poner un salto de línea para que el label quede arriba del input, si lo
quisiéramos.
ATRIBUTO LABEL
La etiqueta label solo consta del atributo for. Mediante la utilización del atributo for
podemos asociar el label con el input. Para lograr esto vamos a tener que utilizar también
el atributo ID, este atributo lo explicamos previamente y lo vamos a ver más en detalle en la
parte de CSS.
La manera que anclamos un label a un input es, al label le vamos a dar un valor en su
atributo for, este va a representar el dato que se va a ingresar en el input y en el input
vamos a poner el mismo valor pero en el atributo ID. Entonces, el primer elemento input en
el documento con un ID que coincida con el dispuesto en el atributo for puesto en el
label, será el control etiquetado para este elemento.
Esto se vería así:
<label for="nombre">Nombre del Usuario</label>
<input type="text" id="nombre" name="nombre">
El label y el input se verán igual pero ahora cuando el usuario clickee el label se va a activar
el campo de texto del input para poder ingresar el valor que el usuario necesite. Después
vamos a ver un ejemplo más útil con las cajas de opciones.
OTROS ELEMENTOS DE FORMULARIOS

Seguramente hayan notado que los input son un manera muy practica de hacernos llegar
la información del navegante. No obstante, en muchos casos, permitir al usuario que
escriba cualquier texto permite demasiada libertad y puede que la información que éste
escriba no sea la que nosotros estamos necesitando.
Por ejemplo, pensemos que queremos que el usuario indique su país de residencia. En ese
caso podríamos ofrecer una lista de países para que seleccione el que sea. Este mismo
caso se puede aplicar a gran variedad de informaciones, como el tipo de tarjeta de crédito
para un pago, la puntuación que da a un recurso, si quiere recibir o no un boletín de
novedades, etc...
Este tipo de opciones predefinidas por nosotros pueden ser expresadas por medio de
diferentes campos de formulario. Veamos a continuación cuales son:
27
LISTAS DE OPCIONES
Las listas de opciones son ese tipo de menús desplegables que nos permiten elegir una (o
varias) de las múltiples opciones que nos proponen. Para construirlas emplearemos una
etiqueta SELECT, con su respectivo cierre.
Como para los casos ya vistos, dentro de esta etiqueta definiremos su nombre por medio
del atributo name. Cada opción será incluida en una línea precedida de la etiqueta
OPTION.
Podemos ver, a partir de estas explicaciones, la forma más típica y sencilla de esta
etiqueta:
<select name="estacion">
<option>Primavera</option>
<option>Verano</option>
<option>Otoño</option>
<option>Invierno</option>
</select>
Y cuando el usuario clickea en el select muestra las opciones así:
Esta estructura puede verse modificada principalmente a partir de otros dos atributos:
size: indica el número de valores mostrados a la vez en la lista. Lo típico es que no se

incluya ningún valor en el atributo size, en ese caso tendremos un campo de opciones
desplegable, pero si indicamos un valor para el atributo size aparecerá un campo donde
veremos las opciones definidas por size y el resto podrán ser vistos por medio de la barra
lateral de desplazamiento.
multiple: permite la selección de más elementos de la lista. Este atributo se expresa sin
valor alguno, es decir, no se utiliza con el igual, simplemente se pone para conseguir el
efecto, o no se pone si queremos una lista desplegable común.
<select name="estacion" size="3" multiple>
28
La etiqueta OPTION puede asimismo ser modificada por medio de otros atributos.
selected: del mismo modo que multiple, este atributo no toma ningún valor sino que
simplemente indica que la opción que lo presenta esta elegida por defecto.
<option selected>Otoño</option>
BOTONES DE RADIO
Existe otra alternativa para plantear una elección, en este caso, obligamos al usuario a
elegir únicamente una de las opciones que se le proponen.
La etiqueta empleada en este caso es INPUT en la cual usaremos el atributo type con el de
valor radio. Este atributo colocara una casilla pinchable al lado del valor del input. Veamos
un ejemplo:
<input type="radio" name="estacion" value="1">Primavera

<br>
<input type="radio" name="estacion" value="2">Verano
<br>
<input type="radio" name="estacion" value="3">Otoño
<br>
<input type="radio" name="estacion" value="4">Invierno
En este tipo de input para elegir una opción debemos tocar en la casilla clickeable, pero
habíamos explicado previamente en la etiqueta label, que podíamos hacer que la etiqueta
label al clickearla se active la caja de texto del input. Ahora, podemos usar eso para que
cuando el usuario clickee la palabra primavera se seleccione esa opción. Esto se vería así:
<input type="radio" id="primavera" name="estacion" value="1">

<label for="primavera">Primavera</label>
<br>
<input type="radio" id="verano" name="estacion" value="2">
<label for="verano">Verano</label>
<br>
29
<input type="radio" id="otonio" name="estacion" value="3">
<label for="otonio">Otoño</label>
<br>
<input type="radio" id="invierno" name="estacion" value="4">
<label for="invierno">Invierno</label>
Esto en la pagina se verá igual que el anterior:
La única diferencia va a ser que el usuario va a poder clickear el nombre de la estación que
quiere para seleccionar esa opción, además de poder clickear la casilla.
CAJAS DE VALIDACIÓN
Este tipo de elementos pueden ser activados o desactivados por el visitante por un simple
click sobre la caja en cuestión. Para esto vamos a usar la etiqueta INPUT con el valor
checkbox en el atributo type.
<input type="checkbox" name="estacion" value="1">Primavera
Esto se vera así:
ENVIO, BORRADO Y DEMÁS

Ha llegado el momento de explicar cómo podemos hacer un botón para provocar el envío
del formulario, entre otras cosas.
Como podremos imaginarnos, en formularios no solamente habrá elementos o campos

donde solicitar información del usuario, sino también habrá que implementar otra serie de
funciones. Concretamente, han de permitirnos su envío mediante un botón. También
puede resultar práctico poder proponer un botón de borrado o bien acompañar el
formulario de datos ocultos que puedan ayudarnos en su procesamiento.
BOTÓN DE ENVÍO DE FORMULARIO (BOTÓN DE SUBMIT)

Para dar por finalizado el proceso de relleno del formulario y hacerlo llegar a su gestor, el
usuario ha de enviarlo por medio de un botón previsto a tal efecto. Para esto vamos a
utilizar la etiqueta BUTTON y su respectivo cierre. Dentro el elemento button se puede
poner texto ( y etiquetas como <i>, <b>, <strong>, <br>, <img>, etc.). Se vería así:
<button type="submit">Enviar</button>
30
Esto en la pagina se verá así:
Como puede verse, tan solo hemos de especificar que se trata de un botón de envío
(type="submit") y hemos de definir el mensaje que queremos que aparezca escrito en el
botón.
BOTÓN DE BORRADO (BOTÓN DE RESET)

Este botón nos permitirá borrar el formulario por completo, en el caso de que el usuario
desee rehacerlo desde el principio. Su estructura sintáctica es parecida a la anterior:
<button type="reset">Borrar</button>
A diferencia del botón de envío, indispensable en cualquier formulario, el botón de borrado

resulta meramente optativo y no es utilizado frecuentemente. Hay que tener cuidado de no
ponerlo muy cerca del botón de envío y de distinguir claramente el uno del otro, para que
ningún usuario borre el contenido del formulario que acaba de rellenar por error.
BOTONES NORMALES
Dentro de los formularios también podemos colocar botones normales, pulsables como
cualquier otro botón. Estos botones por si solos no tienen mucha utilidad pero podremos
necesitarlos para realizar acciones en el futuro. Su sintaxis es la siguiente:
<button type="button">Borrar</button>
DATOS OCULTOS (CAMPOS HIDDEN)

En algunos casos, aparte de los propios datos rellenados por el usuario, puede resultar
práctico enviar datos definidos por nosotros mismos que ayuden al programa en su
procesamiento del formulario. Este tipo de datos, que no se muestran en la página pero si
pueden ser detectados solicitando el código fuente, no son frecuentemente utilizados por
páginas construidas en HTML, son más bien usados por páginas que emplean tecnologías
de servidor. No se asusten, veremos más adelante qué quiere decir esto. Tan solo
queremos dar constancia de su existencia y de su modo creación. He aquí un ejemplo:
<input type="hidden" name="instituto" value="Egg Educación">
Esta etiqueta, incluida dentro de nuestro formulario, enviara un dato adicional al programa
encargado de la gestión del formulario.
EJEMPLO COMPLETO DE FORMULARIO

Con esto ultimo finalizamos el tema de formularios. Pasemos ahora a ejemplificar todo lo
aprendido a partir de la creación de un formulario.
<form action="ruta del metodo que va a manejar la información" method="POST"

enctype="multipart/form-data"></form>
<label>Nombre del usuario</label> <br>

<input type="text" name="nombre"> <br>
31
<label>Edad del usuario</label> <br>
<input type="number" name="edad "> <br>
<label>Fecha de nacimiento del usuario</label> <br>
<input type="date” name="fechanac"> <br>
<label>Sexo del usuario</label> <br>
<input type="radio" name="sexo" value="Hombre"> Hombre <br>
<input type="radio" name="sexo" value="Mujer"> Mujer <br>
<label>Pais nacimiento del usuario</label> <br>
<select name="pais">
<option>Argentina</option>
<option>Brasil</option>
<option>Chile</option>
<option>Uruguay</option>
</select>
<br>
<button type="submit">Enviar</button>
<button type="reset">Borrar</button>
Este formulario se verá así:
SECCIONES EN HTML
Las paginas web se trabajan con lo que se conoce como un esquema. El esquema (outline)
de una página web es un índice de los apartados de una página web que muestra la
relación de jerarquía entre los diferentes apartados y subapartados. El concepto de
esquema se formalizó en HTML 5 con más precisión que en HTML 4 / XHTML 1 y explica
algunas características y formas de utilización de las etiquetas de secciones y bloques de
contenido.
32
En relación a esto se pensó que las páginas de HTML se pueden dividir en secciones y en
HTML 5 se introdujo una serié de etiquetas que nos van a ayudar con la división de nuestra
pagina en secciones. Dentro de cada sección van a haber más etiquetas, esto es
simplemente para que podemos tener un índice de los apartados de la pagina web.
La pagina dividida en secciones con sus respectivas etiquetas se ve así:
<section>: se utiliza para representar una sección "general" dentro de un documento o

aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo
acompañamos de h1-h6 podemos estructurar mejor toda la página creando jerarquías del
contenido, algo muy favorable para el buen posicionamiento web.
<article>: representa un componente de una página que consiste en una composición

autónoma en un documento, página, aplicación, o sitio web con la intención de que pueda
ser reutilizado y repetido.
33
<aside>: representa una sección de la página que abarca un contenido relacionado con el
contenido que lo rodea, por lo que se le puede considerar un contenido independiente.
Este elemento puede utilizarse para efectos tipográficos, barras laterales, elementos
publicitarios u otro contenido que se considere separado del contenido principal de la
página.
<header>: representa un grupo de artículos introductorios o de navegación. Está destinado

a contener por lo general la cabecera de la sección (un elemento h1-h6 o un elemento
hgroup).
<nav>: representa una sección de una página que enlaza a otras páginas o a otras partes
dentro de la página. No todos los grupos de enlaces en una página necesita estar en un
elemento nav, sólo las secciones que constan de bloques de navegación principales son
apropiadas para el elemento de navegación.
<footer>: representa el pie de una sección, con información acerca de la página/sección

que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.
<hgroup>: representa el encabezado de una sección. El elemento se utiliza para agrupar un

conjunto de elementos h1-h6 cuando el título tiene varios niveles, tales como subtítulos o
títulos alternativos.
ETIQUETAS EXTRAS
En este apartado que va a ser el ultimo de nuestra parte de html vamos a ver unas
etiquetas que no hemos visto todavía y que son importantes.
ETIQUETA DIV
La etiqueta div se conoce como etiqueta de división. La etiqueta div se usa en HTML para
hacer divisiones de contenido en la página web como (texto, imágenes, encabezado, pie
de página, barra de navegación, etc.). La etiqueta Div tiene etiquetas de apertura (<div>) y
de cierre (</div>) y es obligatorio cerrar la etiqueta. Div es la etiqueta más útil en el
desarrollo web porque nos ayuda a separar datos en la página web y podemos crear una
sección particular para datos o funciones particulares en las páginas web. Cabe aclarar
que la etiqueta div genera un salto de linea.
• La etiqueta Div es una etiqueta de nivel de bloque

• Es una etiqueta de contenedor genérica
• Se utiliza para agrupar varias etiquetas de HTML para que se puedan crear
secciones y aplicarles estilo.
Un ejemplo que podríamos usar para la etiqueta div es, supongamos que tenemos 3
párrafos que queremos alinear a la izquierda, esto recordemos lo haríamos con el atributo
align. Nosotros haríamos algo así:
<p align="left">Parrafo 1</p>

34
Una forma de simplificar nuestro código anterior y de evitar introducir continuamente el
atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta DIV. Vamos a
usar un div para generar una sección de todos los párrafos y le pones el atributo align al
div.
Esto se vería asÏ:
<div align="left">
<p>Parrafo 1</p>
<p>Parrafo 2</p>
<p>Parrafo 3</p>
</div>
Como hemos visto, la etiqueta DIV marca divisiones en las que definimos un bloque de
contenido, y a los que podríamos aplicar estilo de manera global, aunque lo correcto sería
aplicar ese estilo del lado del CSS.
ETIQUETA SPAN
El elemento span HTML es un contenedor en línea genérico para elementos y contenido en
línea. Solía agrupar elementos con fines de estilo (mediante el uso de los atributos de clase
o id). La mejor manera de usarlo es cuando no hay ningún otro elemento semántico
disponible. span es muy similar a la etiqueta div, pero div es una etiqueta a nivel de bloque
y span es una etiqueta en línea. La etiqueta Span es una etiqueta emparejada, lo que
significa que tiene una etiqueta de apertura (<) y de cierre (>), y es obligatorio cerrar la
etiqueta.
• La etiqueta span se utiliza para agrupar elementos en línea.

• La etiqueta span no realiza ningún cambio visual por sí misma.
• span es muy similar a la etiqueta div, pero div es una etiqueta a nivel de bloque y
span es una etiqueta en línea.
Un ejemplo de la etiqueta span, es poner una parte de un párrafo de un color concreto, ya
que es una etiqueta en linea, la podemos meter dentro de una etiqueta p.
<p>My mother has <span style="color: blue">blue</span> eyes.</p>
La etiqueta span no crea un salto de línea similar a una etiqueta div, sino que permite al
usuario separar cosas de otros elementos a su alrededor en una página dentro de la misma
línea. Al evitar el salto de línea, solo da como resultado el texto seleccionado para cambiar,
manteniendo todos los demás elementos a su alrededor iguales.
Nota: en el apartado de CSS vamos a ver mejor el atributo style y el atributo color. Ahora los
estamos usando para el ejemplo.
35
CSS
INTRODUCCIÓN
CSS es el acrónimo de Cascading Style Sheets, o lo que sería en español Hojas de Estilo
en Cascada. Es un lenguaje que sirve para especificar el estilo o aspecto de las páginas
web. CSS se define en base a un estándar publicado por una organización llamada W3C,
que también se encarga de estandarizar el propio lenguaje HTML.
POR QUÉ EXISTE CSS

El lenguaje HTML está limitado a la hora de aplicar forma a un documento. Sirve de manera
excelente para especificar el contenido que debe tener una página web, pero no permite
definir cómo ese documento se debe presentar al usuario.
Otro motivo que ha hecho necesaria la creación de CSS ha sido la separación del
contenido de la presentación. Al inicio las páginas web tenían mezclado en su código
HTML el contenido con las etiquetas necesarias para darle forma. Esto tiene sus
inconvenientes, ya que la lectura del código HTML se hace pesada y difícil a la hora de
buscar errores o depurar las páginas. Además, desde el punto de vista de la riqueza de la
información y la utilidad de las páginas a la hora de almacenar su contenido, es un gran
problema que los textos están mezclados con etiquetas incrustadas para dar forma a
éstos, pues se degrada su utilidad.
CSS SOLVENTA ESTOS PROBLEMAS

Como hemos visto, para facilitar un correcto mantenimiento de las páginas web y para
permitir que los diseñadores pudieran trabajar como sería deseable, había que introducir
un nuevo elemento en los estándares y éste fue el lenguaje CSS.
CSS se ideó para aplicar el formato en las páginas, de una manera mucho más detallada,
con nuevas posibilidades que no estaban al alcance de HTML. Al mismo tiempo, gracias a
la posibilidad de aplicar el estilo de manera externa al propio documento HTML, se
consiguió que el mantenimiento de las páginas fuese mucho más sencillo.
CARACTERÍSTICAS Y VENTAJAS DE CSS

El modo de funcionamiento de CSS consiste en definir, mediante una sintaxis especial, la
forma de presentación que le aplicaremos a los elementos de la página.
Podemos aplicar CSS a muchos niveles, desde un sitio web entero hasta una pequeña
etiqueta. Estos son los principales bloques de acción.
• Una web entera: de modo que se puede definir en un único lugar el estilo de toda
una web, de una sola vez.
• Un documento HTML o página en particular: se puede definir la forma de cada uno
de los bloques de contenido de una página, en una declaración que afectará a un
solo documento de un sitio web.
• Una porción del documento: aplicando estilos visibles en un trozo de la página,
como podría ser la cabecera.
36
• Una etiqueta en concreto: llegando incluso a poder definir varios estilos diferentes
para una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra
programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en
azul, con márgenes, sin ellos...
La potencia de la tecnología salta a la vista. Pero no solo se queda ahí, ya que además esta
sintaxis CSS permite aplicar al documento formato de modo mucho más exacto. Si antes el
HTML se nos quedaba corto para maquetar las páginas y teníamos que utilizar trucos para
conseguir nuestros efectos, ahora tenemos muchas más herramientas que nos permiten
definir esta forma:
• Podemos definir la distancia entre líneas del documento.

• Se puede aplicar identado (sangrado) a las primeras líneas del párrafo.
• Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores.
• Y mucho más, como definir la visibilidad de los elementos, márgenes, subrayados,
tachados, etc.
Otra ventaja importante de CSS es la capacidad de especificar las medidas con diversas
unidades. Si con HTML tan sólo podíamos definir atributos en las páginas con pixeles y
porcentajes, ahora podemos definir utilizando muchas más unidades como:
• Pixeles (px) y porcentaje (%), como antes.

• Pulgadas (in).
• Puntos (pt).
• Centímetros (cm).
• Y otras que veremos más adelante
SINTAXIS HTML
La meta básica del lenguaje Cascading Stylesheet (CSS) es permitir al motor del
navegador pintar elementos de la página con características específicas, como colores,
posición o decoración. La sintaxis CSS refleja estas metas y estos son los bloques básicos
de construcción.
• La propiedad que es un identificador, un nombre leíble por humanos, que define qué
característica es considerada.
• El valor que describe como las características deben ser manejadas por el motor.
Cada propiedad tiene un conjunto de valores válidos, definido por una gramática
formal, así como un significado semántico, implementados por el motor del
navegador.
DECLARACIONES DE CSS
Configurando propiedades CSS a valores específicos es la función principal del lenguaje
del CSS. Una propiedad y su valor son llamados una declaración, y cualquier motor de CSS
calcula qué declaraciones aplican a cada uno de los elementos de una página para
mostrarlos apropiadamente y estilizarlos.
37
Ambos propiedades y valores son sensibles a mayúsculas y minúsculas en CSS. El par se
separa por dos puntos, “ : ”, y los espacios en blanco antes, entre ellos y después, pero no
necesariamente dentro de ellos, son ignorados.
Declaración CSS:
background-color : red
Propiedad Los dos puntos Valor

separan las dos
entidades.
Hay más de 100 propiedades diferentes en CSS y cerca de un número infinito de diferentes
valores. No todos los pares de propiedades y valores son permitidos, cada propiedad
define que valores son válidos. Cuando un valor no es válido para una propiedad
específica, la declaración es considerada inválida y es completamente ignorada por el
motor del CSS.
BLOQUES DE DECLARACIONES EN CSS

Las declaraciones son agrupada en bloques, que es una estructura delimitada por una llave
de apertura, ‘{‘, y una de cierre, ‘}’. Los bloques en ocasiones puedes anidarse, por lo que las
llaves de apertura y cierre deben de coincidir.
Bloque css:
{
Aquí puede ir cualquier
contenido, incluso
ningún contenido.
}
Las llaves delimitan el inicio y el final del bloque.
Esos bloques son naturalmente llamados bloques de declaraciones y las declaraciones

dentro de ellos están separadas por un punto y coma, “ ; ”. Un bloque de declaración puede
estar vacío, que es contener una declaración nula. Los espacios en blanco alrededor de las
declaraciones son ignorados. En cuanto a la última declaración de un bloque, esta no
necesita terminar en un punto y coma, aunque es usualmente considerado una buena
práctica porque previene el olvidar agregarlo cuando se extienda el bloque con otra
declaración.
Bloque css con declaraciones:
{
background-color : red ;
background-style: none;
}
38
CSS define una serie de términos que permiten describir cada una de las partes que
componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo
CSS muy básico:
Los diferentes términos se definen a continuación:
Regla: cada uno de los estilos que componen una hoja de estilos CSS.
Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una
o más propiedades CSS.
Propiedad: permite modificar el aspecto de una característica del elemento.
Valor: indica el nuevo valor de la característica modificada en el elemento.
INCLUIR CSS A NUESTRO HTML

CSS sirve para definir el aspecto de las páginas web, eso ya debe haber quedado claro. No
obstante, hay diferentes niveles a los que podemos aplicar los estilos. Vamos a ir por orden,
describiendo los puntos desde el más específico al más general, de manera que también
iremos aumentando la dificultad e importancia de los distintos usos.
PEQUEÑAS PARTES DE LA PÁGINA

Para definir estilos en secciones reducidas de una página se puede utilizar el
atributo style en la etiqueta sobre la que queremos aplicar estilos. Como valor de ese
atributo indicamos en sintaxis CSS las características de estilos. Lo vemos con un ejemplo,
pondremos un párrafo en el que determinadas palabras las vamos a visualizar en color
verde.
<p>My mother has <span style="color: green">blue</span> eyes.</p>
ESTILO DEFINIDO PARA UNA ETIQUETA

De este modo podemos hacer que toda una etiqueta muestre un estilo determinado. Por
ejemplo, podemos definir un párrafo entero en color rojo y otro en color azul. Para ello
utilizamos el atributo style, que es admitido por todas las etiquetas del HTML.
<p style="color: #990000">

Esto es un párrafo de color rojo.
</p>
39
<p style="color: #000099">
Esto es un párrafo de color azul.
</p>
ESTILO DEFINIDO EN UNA PARTE DE LA PÁGINA

Con la etiqueta <div> podemos definir secciones de una página y aplicarle estilos con el
atributo style, es decir, podemos definir estilos de una vez a todo un bloque de la página.
<div style="color: #000099; font-weight: bold">

<h3>Estas etiquetas van en <strong>azul y negrita</strong></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>
Hasta aquí hemos visto los usos de las CSS más específicos, que se consiguen usando el
atributo style en las etiquetas. Sin embargo, hay otras formas más avanzadas de usar las
CSS, que deberías tener en cuenta porque son todavía más versátiles y recomendadas.
ESTILO DEFINIDO PARA TODA UNA PÁGINA

Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la
página. Es una manera muy cómoda de darle forma al documento y muy potente, ya que
estos estilos serán seguidos en toda la página y nos ahorraremos así "ensuciar" las
etiquetas HTML colocando el atributo style.
Además, es común que los estilos declarados se quieran aplicar a distintas etiquetas
dentro del mismo documento. Gracias a la aplicación de estilos para toda la página,
podemos escribir los estilos una vez y usarlos para un número indefinido de etiquetas. Por
ejemplo podremos definir el estilo a todos los párrafos una vez y que se aplique
igualmente, sea cual sea el número de párrafos del documento. Por último, también
tendremos la ventaja que, si más adelante deseamos cambiar los estilos de todas las
etiquetas, lo haremos de una sola vez, ya que el estilo fue definido una única vez de
manera global.
A grandes rasgos, entre <style> y </style>, se coloca el nombre de la etiqueta (o selector)

para la que queremos definir los estilos y entre llaves -{ }- colocamos en sintaxis CSS las
características de estilos. El concepto de selectores lo veremos más adelante.
<html>
<head>
<title>Ejemplo de estilos para toda una pagina</title>
<style>
h1 { text-decoration: underline; text-align: center }
p { font-Family: arial,verdana; color: white; background-color: black }
body { color: black; background-color: #cccccc; text-indent: 1cm }
</style>
40
</head>
<body>
<h1>Pagina con estilos</h1>
<p>Pagina con estilos de ejemplo</p>
</body>
</html>
Como se puede apreciar en el código, hemos definido que la etiqueta <h1> se presentará
• Subrayado
• Centrada
También, por ejemplo, hemos definido que el cuerpo entero de la página (etiqueta <body>)
se le apliquen los estilos siguientes:
• Color del texto negro

• Color del fondo grisáceo
• Margen lateral de 1 centímetro
Cabe destacar que muchos de los estilos aplicados a la etiqueta <body> son heredados
por el resto de las etiquetas del documento, como el color del texto o su tamaño. Esto es
así, siempre y cuando no se vuelvan a definir esos estilos en las etiquetas hijas, en cuyo
caso el estilo de la etiqueta más concreta será el que mande. Puede verse este detalle en
la etiqueta <p>, que tiene definidos estilos que ya fueron definidos para <body>. Los estilos
que se tienen en cuenta son los de la etiqueta <p>, que es más concreta.
ESTILO DEFINIDO PARA TODO UN SITIO WEB

Una de las características más potentes del desarrollo con hojas de estilos es la posibilidad
de definir los estilos de todo un sitio web en una única declaración.
Esto se consigue creando un archivo de extensión .css donde tan sólo colocamos las
declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese
archivo. De este modo, todas las páginas comparten una misma declaración de estilos,
reutilizando el código CSS de una manera mucho más potente.
Este es el modelo más ventajoso de aplicar estilos al documento HTML y por lo tanto el
más recomendable. De hecho, cualquier otro modo de definir estilos no es considerado
una buena práctica y lo tenemos que evitar siempre que se pueda.
Algunas de las ventajas de este modelo de definición de estilos son las siguientes:
• Se ahorra en líneas de código HTML, ya que no tenemos que escribir el CSS en la

propia página (lo que reduce el peso del documento y mejora la velocidad de
descarga).
• Se mantiene separado correctamente lo que es el contenido (HTML) de la
presentación (CSS), que es uno de los objetivos de las hojas de estilo y una de las
máximas de todo desarrollador: cada cosa en su sitio.
41
• Se evita la molestia de definir una y otra vez los estilos con el HTML y lo que es más
importante, si cambiamos la declaración de estilos, cambiarán automáticamente
todas las páginas del sitio web. Esto es una característica muy deseable, porque
aumenta considerablemente la facilidad de mantenimiento del sitio web.
Veamos ahora cómo el proceso para incluir estilos con un fichero externo.
1- Creamos el fichero con la declaración de estilos
Es un fichero de texto normal con la extensión .css para aclararnos qué tipo de archivo es.
El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es decir,
sería erróneo incluir código HTML en él: etiquetas y demás. Podemos ver un ejemplo a
continuación.
El nombre de este archivo va a ser estilos.css.
p{
font-size: 12cm;
font-family: arial, helvetica;
font-weight: normal;
}
h1 {
font-size: 36cm;
font-family: verdana, arial;
text-decoration: underline;
text-align: center;
background-color: Teal;
}
body {
background-color: #006600;
font-family: arial;
color: White;
}
2- Enlazamos la página web con la hoja de estilos
Para ello, vamos a colocar la etiqueta <link> dentro de la etiqueta <head></head> con los
atributos siguientes:
• rel: indica el tipo de relación que tiene el recurso enlazado y la página HTML. Para
los archivos CSS, siempre se utiliza el valor stylesheet.
• href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede
ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
Veamos una página web entera que enlaza con la declaración de estilos anterior:
42
<html>
<head>
<link rel="stylesheet" href="estilos.css">
<title>Ejemplo de pagina que lee estilos </title>
</head>
<body>
<h1>Pagina con estilos</h1>
<p>Pagina con estilos de ejemplo</p>
</body>
</html>
SELECTORES CCS
Teniendo en cuenta que ya podemos asignarle estilos a todo un sitio web, mediante un
archivo css que usa selectores para elegir las etiquetas a las que asignarles los estilos,
también tenemos que entender que existen varios tipos de selectores
Selector Universal
Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el
margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la
parte de la declaración de la regla CSS):
Selector de Etiqueta
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del
selector. El siguiente ejemplo selecciona todos los párrafos de la página:
Selector Descendente
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es

descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del
otro elemento.
El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que
se encuentren dentro de un elemento <p>.
43
Selector de Clase
¿Como hago para aplicarle estilos solo al primer párrafo?
Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página
consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente
la regla CSS que se le debe aplicar. Ejemplo:
HTML:
<body>
<p class="destacado">Parrafo 1</p>
<p class="error">Parrafo 2</p>
<p>Parrafo 3</p>
</body>
CSS:
.destacado {
font-size: 15px;
}
.error {
color: red;
}
En nuestro archivo CSS para especificar una clase, vamos a poner punto(‘.’) y el nombre de
la clase que queremos que coincida que con valor que pongamos en nuestro atributo class
en el html.
Entonces, en el ejemplo podemos ver como el primer párrafo tiene el valor destacado y el
segundo párrafo el valor error para el atributo class y en nuestro archivo CSS, hemos
definido un estilo para esas clases.
El beneficio del atributo class, además de dejarnos asignar estilos a un solo elemento, es
que después podemos reutilizar esa class para asignarle ese estilo a otros párrafos
concretos o a otras etiquetas, solo deberemos ponerle el valor de un estilo que ya existe en
el atributo class.
Selector de Id
En un documento HTML, los selectores de ID de CSS buscan un elemento basado en el

contenido del atributo id. El atributo ID del elemento seleccionado debe coincidir
exactamente con el valor dado en el selector. Este tipo de selectores sólo seleccionan un
elemento de la página porque el valor del atributo id no se puede repetir en dos elementos
diferentes de una misma página.
Ejemplo:
44
HTML:
<div id="identificador">¡Este div tiene un ID especial!</div>

<div>Este solo es un div regular.</div>
CSS:
#identificador{
background-color: blue;
En nuestro archivo CSS para especificar un ID, vamos a poner el numeral (‘#’) y el nombre
del ID que queremos que coincida que con valor que pongamos en nuestro atributo ID en
el html.
Como podemos ver el ID, es muy parecido al atributo class pero la diferencia es que el ID
se puede usar para identificar un solo elemento, mientras que una clase se puede usar
para agrupar más de uno.
PRIORIDAD EN APLICACIÓN DE ESTILO

Ahora que entendemos los selectores en CSS, tenemos que entender como prioriza los
estilos CSS.
Herencia
Los hijos heredan los estilos de sus elementos padres, no es necesario declarar sus estilos
si estos se mantienen igual.
Cascada
Todo estilo sobrescribe a uno anterior.
Especificidad
Cuando hay conflictos de estilos el navegador aplica sólo el de mayor especificidad.
45
UNIDADES DE MEDIDA CSS
Los valores que se pueden asignar a los atributos de estilo se pueden ver en una tabla más
adelante en la guía. Muchos de los valores que podemos asignarle son unidades de
medida, por ejemplo, el valor del tamaño de un margen o el tamaño de la fuente. Las
unidades de medida CSS se pueden clasificar en dos grupos, las relativas y las absolutas.
Más la posibilidad de expresar valores en porcentaje.
Absolutas: las unidades absolutas son medidas fijas, que deberían verse igual en todos los
dispositivos. Como los centímetros, que son una convención de medida internacional. Pese
a que en principio pueden parecer más útiles, puesto que se verían en todos los sistemas
igual, tienen el problema de adaptarse menos a las distintas particularidades de los
dispositivos que pueden acceder a una web y restan accesibilidad a nuestro web. Puede
que en tu ordenador 1 centímetro sea una medida razonable, pero en un móvil puede ser
un espacio exageradamente grande, puesto que la pantalla es mucho menor. Se aconseja
utilizar, por tanto, medidas relativas.
• pt (puntos): Un punto es 1/72 pulgadas.

• in (pulgadas)
• cm (centimentros)
• mm (milímetros)
• px (pixeles): Es la unidad mínima de resolución de la pantalla. En realidad suele
considerársela una unidad absoluta, relativa o híbrida dependiendo del criterio que
se analice. Un pixel equivale a 0.26 milímetros.
Relativas: se llaman así porque son unidades relativas al medio o soporte sobre el que se
está viendo la página web, que dependiendo de cada usuario puede ser distinto, puesto
que existen muchos dispositivos que pueden acceder a la web, como ordenadores o
teléfonos móviles. En principio las unidades relativas son más aconsejables, porque se
ajustarán mejor al medio con el que el usuario está accediendo a nuestra web. Son las
siguientes:
Unidad em
La unidad em se utiliza para hacer referencia al tamaño actual de la fuente que ha sido
establecida en el navegador, que habitualmente es un valor aproximado a 16px (salvo que
se modifique por el usuario). De esta forma, podemos trabajar simplificando las unidades a
medidas en base a ese tamaño.
Por ejemplo, imaginemos que el tamaño de la fuente establecida en el navegador del

usuario es exactamente 16px. Una cantidad 1em equivaldría a 16px, mientras que una
cantidad de 2em sería justo el doble: 32px. Por otro lado, una cantidad de 0.5em sería justo
la mitad: 8px.
46
Unidad porcentaje
Porcentaje (%), es una de las unidades relativas más utilizadas. Su valor está calculado
siempre en base a otro elemento. Si lo aplicamos sobre una fuente es relativo al tamaño de
la fuente declarada en el contexto, pero si lo aplicamos al width de un elemento entonces
es relativo al ancho de su contenedor.
El porcentaje se utiliza para definir una unidad en función de la que esté definida en un
momento dado. Imaginemos que estamos trabajando en 12pt y definimos una unidad
como 150%. Esto sería igual al 150% de los 12pt actuales, que equivale a 18pt.
COLORES EN CSS
Con CSS se puede especificar colores para cada elemento HTML de la página, incluso hay
elementos que podrían admitir varios colores, como el color de fondo o el color del borde.
Pero bueno, vamos a ver ahora es las distintas maneras de escribir un color en una
declaración CSS.
Porque lo más habitual es que especifiquemos un color con su valor RGB. Pero en CSS
tenemos otras maneras de declarar colores que pueden interesarnos, como mínimo para
poder entender el código CSS cuando lo veamos escrito.
NOTACIÓN HEXADECIMAL RGB

Se especifican los tres valores de color (rojo, verde y azul) con valores en hexadecimal
entre 00 y FF.
background-color: #ff8800;
NOMBRE DEL COLOR

También podemos definir un color por su nombre. Los nombres de colores son en inglés,
los mismos que sirven para especificar colores con HTML.
color: red;
border-color: Lime;
NOTACIÓN DE COLOR CON PORCENTAJES DE RGB

Se puede definir un color por los distintos porcentajes de valores RGB. Si todos los valores
están al 100% el color es blanco. Si todos están al 0% obtendríamos el negro y con
combinaciones de distintos porcentajes de RGB obtendríamos cualquier matiz de color.
color: rgb(33%, 0%, 0%);
47
NOTACIÓN POR VALORES DECIMALES DE RGB, DE 0 A 255
De una manera similar a la notación por porcentajes de RGB se puede definir un color
directamente con valores decimales en un rango desde 0 a 255.
color: rgb(200,255,0);
De entre todas estas notaciones podemos utilizar la que más nos interese o con la que nos
sintamos más a gusto. Nosotros en nuestros ejemplos venimos utilizando la notación
hexadecimal RGB por habernos acostumbrado a ella en HTML.
COLOR TRANSPARENTE
Para finalizar, podemos comentar que también existe el color transparente, que no es
ningún color, sino que específica que el elemento debe tener el mismo color que el fondo
donde está. Este valor, transparent, sustituye al color. Podemos indicarlo en principio sólo
para fondos de elementos, es decir, para el atributo background-color.
background-color: transparent;
PROPIEDADES CSS
Tanto para practicar en tu aprendizaje como para trabajar con las CSS lo mejor es disponer
de las distintas propiedades y valores de estilos que podemos aplicarle a las páginas web.
Aquí puedes ver las propiedades CSS más fundamentales para aplicar estilos a elementos
básicos, que te vendrá perfectamente para comenzar con las CSS. Pero antes debemos
explicar el concepto de el modelo de caja para poder entender algunas de las
propiedades de css.
EL MODELO DE CAJA
El modelo de cajas o "box model" es seguramente la característica más importante del
lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El
modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las
páginas se representen mediante cajas rectangulares.
Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta
HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento. La
siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML
que incluye la página:
Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran
ningún color de fondo ni ningún borde.
Los navegadores crean y colocan las cajas de forma automática, pero CSS permite
modificar todas sus características. Cada una de las cajas está formada por cuatro partes,
tal y como muestra la siguiente imagen:
48
• Contenido (content): se trata del contenido HTML del elemento (las palabras de un
párrafo, una imagen, el texto de una lista de elementos, etc.)
• Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
• Borde (border): línea que encierra completamente el contenido y su relleno.
• Margen (margin): separación opcional existente entre la caja y el resto de cajas
adyacentes.
Existen otras dos partes de una caja que son:
• Imagen de fondo (background image): imagen que se muestra por detrás del
contenido y el espacio de relleno.
• Color de fondo (background color): color que se muestra por detrás del contenido y
el espacio de relleno.
El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se
muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el
margen se muestra el color o imagen de fondo de su elemento padre (si están definidos).
Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o
imagen de fondo de la propia página (si están definidos).
Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad
y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del
elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo.
Combinando imágenes transparentes y colores de fondo se pueden lograr efectos gráficos
muy interesantes.
Teniendo esto en cuenta podemos ver las siguientes propiedades de css:
Ancho
La propiedad CSS que controla la anchura de la caja de los elementos se denomina width.
49
Alto
La propiedad CSS que controla la anchura de la caja de los elementos se denomina height.
Margen
CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y
verticales de un elemento.
Relleno
CSS define cuatro propiedades para controlar cada uno de los espacios de relleno
horizontales y verticales de un elemento.
50
Bordes - Tamaño
CSS permite definir el aspecto de cada uno de los cuatro bordes horizontales y verticales
de los elementos. Para cada borde se puede establecer su anchura, su color y su estilo.
Bordes - Color
El color de los bordes se controla con las cuatro propiedades siguientes:
51
Bordes - Estilo
El color de los bordes se controla con las cuatro propiedades siguientes:
Bordes - Forma Resumida
Todos los estilos de los bordes se controlan con la siguiente siguientes:
Fondo - Color
El color de fondo se establece con esta propiedad:
52
La imagen de fondo se establece con esta propiedad:
Fondo - Repetición
La repetición de la imagen de fondo se configura con esta propiedad:
Fondo - Posición
La posición de la imagen de fondo se configura con esta propiedad:
53
Fondo - Imagen de Fondo
Para controlar la manera de visualizar la imagen de fondo:
Fondo - Resumida
Establecer todas las propiedades de fondo:
Tipografía - Resumida
CSS define numerosas propiedades para modificar la apariencia del texto. A pesar de que
no dispone de tantas posibilidades como los lenguajes y programas específicos para crear
documentos impresos, CSS permite aplicar estilos complejos y muy variados al texto de las
páginas web. La propiedad básica que define CSS relacionada con la tipografía se
denomina color y se utiliza para establecer el color de la letra.
Tipografía - Fuente
La otra propiedad básica que define CSS relacionada con la tipografía se denomina font-
family y se utiliza para indicar el tipo de letra con el que se muestra el texto.
54
Tipografía – Tamaño
Una vez seleccionado el tipo de letra, se puede modificar su tamaño mediante la

propiedad font-size.
Tipografía – Tamaño
Además de todas las unidades de medida relativas y absolutas y el uso de porcentajes,

CSS permite utilizar una serie de palabras clave para indicar el tamaño de letra del texto:
Tamaño Absoluto: indica el tamaño de letra de forma absoluta mediante alguna de las
siguientes palabras clave: xx-small, x-small, small, medium, large, x-large, xx-large.
Tamaño Relativo: indica de forma relativa el tamaño de letra del texto mediante dos
palabras clave (larger, smaller) que toman como referencia el tamaño de letra del elemento
padre.
Tipografía – Grosor
Una vez indicado el tipo y el tamaño de letra, es habitual modificar otras características
como su grosor (texto en negrita) y su estilo (texto en cursiva). La propiedad que controla la
anchura de la letra es font-weight.
55
Una vez indicado el tipo y el tamaño de letra, es habitual modificar otras características
como su grosor (texto en negrita) y su estilo (texto en cursiva). La propiedad que controla la
anchura de la letra es font-weight.
Texto - Alineación
Para establecer la alineación del contenido del elemento. La propiedad text-align no sólo
alinea el texto que contiene un elemento, sino que también alinea todos sus contenidos,
como por ejemplo las imágenes.
Texto - Interlineado
El interlineado de un texto se controla mediante la propiedad line-height, que permite

controlar la altura ocupada por cada línea de texto:
Texto - Decoración
El valor underline subraya el texto.
El valor overline añade una línea en la parte superior del texto.
El valor line-through muestra el texto tachado con una línea continua, por lo que su uso
tampoco es muy habitual.
El valor blink muestra el texto parpadeante.
56
Texto - Transformación
El valor capitalize transforma a mayúsculas la primera letra de las palabras del texto.
El valor uppercase transforma a mayúsculas todo el texto.
El valor lowercase transforma a minúsculas todo el texto.
Imágenes – Ancho / Altura
Utilizando las propiedades width y height, es posible mostrar las imágenes con cualquier
altura/anchura, independientemente de su altura/anchura real:
#destacada {
width: 120px;
height: 250px;
<img id="destacada" src="imagen.png" />
No obstante, si se utilizan alturas/anchuras diferentes de las reales, el navegador deforma

las imágenes y el resultado estético es muy desagradable.
Imágenes – Bordes
Cuando una imagen forma parte de un enlace, los navegadores muestran por defecto un
borde azul grueso alrededor de las imágenes. Por tanto, una de las reglas más utilizadas en
los archivos CSS es la que elimina los bordes de las imágenes con enlaces:
img {
border: none;
57
Listas – Viñetas Personalizadas
Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una
viñeta formada por un pequeño círculo de color negro. Los elementos de las listas
ordenadas se muestran por defecto con la numeración decimal utilizada en la mayoría de
países.
No obstante, CSS define varias propiedades para controlar el tipo de viñeta que muestran
las listas, además de poder controlar la posición de la propia viñeta. La propiedad básica es
la que controla el tipo de viñeta que se muestra y que se denomina list-style-type.
La siguiente imagen muestra algunos de los valores definidos por la propiedad list-style-
type:
Listas – Viñetas Posición
La propiedad list-style-position permite controlar la colocación de las viñetas.
La diferencia entre los valores outside y inside se hace evidente cuando los elementos
contienen mucho texto, como en la siguiente imagen:
58
Utilizando las propiedades anteriores (list-style-type y list-style-position), se puede
seleccionar el tipo de viñeta y su posición, pero no es posible personalizar algunas de sus
características básicas como su color y tamaño.
Listas – Viñetas Aspecto
Cuando se requiere personalizar el aspecto de las viñetas, se debe emplear la

propiedad list-style-image, que permite mostrar una imagen propia en vez de una viñeta
automática.
Las imágenes personalizadas se indican mediante la URL de la imagen. Si no se encuentra

la imagen o no se puede cargar, se muestra la viñeta automática correspondiente (salvo
que explícitamente se haya eliminado mediante la propiedad list-style-type).
La siguiente imagen muestra el uso de la propiedad list-style-image mediante tres

ejemplos sencillos de listas con viñetas personalizadas:
Las reglas CSS correspondientes al ejemplo anterior se muestran a continuación:
ul.ok { list-style-image: url("imagenes/ok.png"); }
ul.flecha { list-style-image: url("imagenes/flecha.png"); }
ul.circulo { list-style-image: url("imagenes/circulo_rojo.png"); }
59
Listas – Menú Vertical
Los sitios web correctamente diseñados emplean las listas de elementos para crear todos
sus menús de navegación. Utilizando la etiqueta <ul> de HTML se agrupan todas las
opciones del menú y haciendo uso de CSS se modifica su aspecto para mostrar un menú
horizontal o vertical.
A continuación se muestra la transformación de una lista sencilla de enlaces en un menú

vertical de navegación.
<ul>
<li><a href="#">Elemento 1</a></li>
</ul>
Aspecto final del menú vertical:
El proceso de transformación de la lista en un menú requiere de los siguientes pasos:
1) Definir la anchura del menú:
ul.menu { width: 180px; }
2) Eliminar las viñetas automáticas y todos los márgenes y espaciados aplicados por
defecto:
ul.menu {
list-style: none;
margin: 0;
padding: 0;
width: 180px;
}
60
3) Añadir un borde al menú de navegación y establecer el color de fondo y los bordes de
cada elemento del menú:
ul.menu {
border: 1px solid #7C7C7C;
border-bottom: none;
list-style: none;
margin: 0;
padding: 0;
width: 180px;
}
ul.menu li {
background: #F4F4F4;
border-bottom: 1px solid #7C7C7C;
border-top: 1px solid #FFF;
}
4) Aplicar estilos a los enlaces: mostrarlos como un elemento de bloque para que ocupen
todo el espacio de cada <li> del menú, añadir un espacio de relleno y modificar los colores
y la decoración por defecto:
ul.menu li a {
color: #333;
display: block;
padding: .2em 0 .2em .5em;
text-decoration: none;
Tablas – Bordes Celdas
Cuando se aplican bordes a las celdas de una tabla, el aspecto por defecto con el que se
muestra en un navegador es el siguiente:
El código HTML y CSS del ejemplo anterior se muestra a continuación:
61
.normal {
width: 250px;
border: 1px solid #000;
}
.normal th, .normal td {
}
<table class="normal" summary="Tabla genérica">

<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
<th scope="col">E</th>
</tr>
</table>
El estándar CSS 2.1 define dos modelos diferentes para el tratamiento de los bordes de las
celdas. La propiedad que permite seleccionar el modelo de bordes es border-collapse:
El modelo collapse fusiona de forma automática los bordes de las celdas adyacentes,
mientras que el modelo separate fuerza a que cada celda muestre sus cuatro bordes. Por
defecto, los navegadores utilizan el modelo separate, tal y como se puede comprobar en el
ejemplo anterior. Ejemplo collapase:
El código CSS completo del ejemplo anterior se muestra a continuación:
62
.normal {
width: 250px;
border-collapse: collapse;
}
.normal th, .normal td {
}
<table class="normal" summary="Tabla genérica">
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
<th scope="col">E</th>
</tr>
</table>
Si se opta por el modelo separate (que es el que se aplica si no se indica lo contrario) se

puede utilizar la propiedad border-spacing para controlar la separación entre los bordes de
cada celda.
Si solamente se indica como valor una medida, se asigna ese valor como separación
horizontal y vertical. Si se indican dos medidas, la primera es la separación horizontal y la
segunda es la separación vertical entre celdas.
La propiedad border-spacing sólo controla la separación entre celdas y por tanto, no se

puede utilizar para modificar el tipo de modelo de bordes que se utiliza. En concreto, si se
establece un valor igual a 0 para la separación entre los bordes de las celdas, el resultado
es muy diferente al modelo collapse:
63
Formularios – Campos de Texto
Por defecto, los campos de texto de los formularios no incluyen ningún espacio de relleno,
por lo que el texto introducido por el usuario aparece pegado a los bordes del cuadro de
texto.
Añadiendo un pequeño padding a cada elemento <input>, se mejora notablemente el

aspecto del formulario:
La regla CSS necesaria para mejorar el formulario es muy sencilla:
form.elegante input {
padding: .2em;
Formularios – Labels Alineadas y Formateadas
Los elementos <input> y <label> de los formularios son elementos en línea, por lo que el
aspecto que muestran los formularios por defecto, es similar al de la siguiente imagen:
64
Aprovechando los elementos <label>, se pueden aplicar unos estilos CSS sencillos que
permitan mostrar el formulario con el aspecto de la siguiente imagen:
Para mostrar un formulario tal y como aparece en la imagen anterior no es necesario crear
una tabla y controlar la anchura de sus columnas para conseguir una alineación perfecta.
Sin embargo, sí que es necesario añadir un nuevo elemento (por ejemplo un <div>) que
encierre a cada uno de los campos del formulario (<label> y <input>). El esquema de la
solución propuesta es el siguiente:
Por tanto, en el código HTML del formulario se añaden los elementos <div>:
<form>
<fieldset>
<legend>Alta en el servicio</legend>
<div>
<label for="nombre">Nombre</label>
<input type="text" id="nombre" />
</div>
<div>
<label for="apellidos">Apellidos</label>
<input type="text" id="apellidos" size="35" />
</div>
</fieldset>
</form>
Y en el código CSS se añaden las reglas necesarias para alinear los campos del formulario:
div {
margin: .4em 0;
}
65
div label {
width: 25%;
float: left;
}
PSEUDO-CLASES
CSS también permite aplicar diferentes estilos a un mismo enlace en función de su estado.
De esta forma, es posible cambiar el aspecto de un enlace cuando por ejemplo el usuario
pasa el ratón por encima o cuando el usuario pincha sobre ese enlace.
Como con los atributos id o class no es posible aplicar diferentes estilos a un mismo
elemento en función de su estado, CSS introduce un nuevo concepto llamado pseudo-
clases. En concreto, CSS define las siguientes cuatro pseudo-clases:
• :link, aplica estilos a los enlaces que apuntan a páginas o recursos que aún no han
sido visitados por el usuario.
• :visited, aplica estilos a los enlaces que apuntan a recursos que han sido visitados
anteriormente por el usuario. El historial de enlaces visitados se borra
automáticamente cada cierto tiempo y el usuario también puede borrarlo
manualmente.
• :hover, aplica estilos al enlace sobre el que el usuario ha posicionado el puntero del
ratón.
• :active, aplica estilos al enlace que está clickeado el usuario.
Esto se vería asi:

/* link sin visitar */
a:link {
color: red;
}
/* link visitado*/
a:visited {
color: green;
}
/* mouse sobre el link*/

a:hover {
color: pink;
}
/* link clickeado */
a:active {
color: blue;
}
66
BOOTSTRAP
Es un framework de interfaz de usuario, de código abierto, creado para un desarrollo web
más rápido y sencillo. Mark Otto y Jacob Thornton fueron los creadores iniciales. El
framework combina CSS y JavaScript para estilizar los elementos de una página HTML.
Contiene todo tipo de plantillas de diseño basadas en HTML y CSS para diversas funciones
y componentes, como navegación, sistema de cuadrícula, carruseles de imágenes y
botones.
Si bien Bootstrap ahorra tiempo al desarrollador de tener que administrar las plantillas
repetidamente, su objetivo principal es crear sitios responsive. Permite que la interfaz de
usuario de un sitio web funcione de manera óptima en todos los tamaños de pantalla, ya
sea en teléfonos de pantalla pequeña o en dispositivos de escritorio de pantalla grande.
Por lo tanto, los desarrolladores no necesitan crear sitios específicos para dispositivos y
limitar su rango de audiencia.
ARCHIVOS PRIMARIOS DE BOOTSRAP

Ya sabemos qué es Bootstrap; consiste en una colección de sintaxis que realizan funciones
específicas. Debido a esto, tiene sentido que el marco tenga solo tres diferentes tipos de
archivos. A continuación, detallamos los tres archivos principales que administran esta
interfaz de usuario y la funcionalidad de un sitio web.
BOOTSTRAP.CSS
Esta es la hoja de estilos de bootstrap, gracias a esta podremos implementar estilos ya

definidos y asi estilizar nuestra pagina de una manera sencilla. Además las plantillas que
contiene bootstrap, usan esta hoja de estilos.
BOOTSTRAP.JS
Este archivo es la parte principal de Bootstrap. Consiste en archivos JavaScript que son
responsables de la interactividad del sitio web.
CÓMO USAR BOOTSTRAP

Para utilizar bootstrap lo único que vamos a tener que hacer es ir a estas dos paginas:
https://getbootstrap.com/docs/4.5/getting-started/introduction/#css
https://getbootstrap.com/docs/4.5/getting-started/introduction/#js
Dentro de estas dos paginas vamos a encontrar una etiqueta link para el CSS de Bootstrap
y unas etiquetas script para el Javascript de Bootstrap.
Para poder usar Bootstrap lo que haremos es pegar el link con la hoja de estilos de
Bootstrap en la etiqueta <head> de nuestro html y las etiquetas script antes de la etiqueta
de cierre </body>.
Esto se vería así:
67
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-
TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<title>Pagina con bootstrap</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-

DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
Una vez que hemos hecho esto, ya podemos usar Bootstrap y sus plantilas.
PLANTILLAS
Dado que es uno de los framework más utilizados, podemos encontrar un amplio abanico
de marcos de trabajo pensados y diseñados a partir de los componentes y estilos que
presenta Bootstrap, de modo que existen variables y ejemplos listos para utilizar en
proyectos específicos.
https://themes.getbootstrap.com/official-themes/
68
PREGUNTAS DE APRENDIZAJE
1) ¿Qué significa el acrónimo HTML?:
a) Hyper Text Mask Language.

b) Hard Text Markup Language.
c) Hyper Text Markup Language.
d) Hard Text Mask Language.
2) HTML es un lenguaje:
a) De programación.
b) De marcado.
c) Hablado.
d) Ninguno de los anteriores.
3) La etiqueta que encierra todo el contenido de una página es:
a) <head></head>
b) <body></body>
c) !DOCTYPE
d) <html></html>
4) La etiqueta que es el contenedor de todo aquello que se va incluir en el html es:
a) <head></head>
b) <body></body>
c) !DOCTYPE
d) <html></html>
5) La etiqueta que encierra todo el contenido visible al usuario es:
a) <head></head>
b) <body></body>
c) !DOCTYPE
d) <html></html>
6) ¿Cuál de estos no es un atributo básico?
a) id
b) class
c) style
d) align
7) En relación a HTML cual de estas es verdadera:
a) Todas las etiquetas deben ir en minúsculas

b) Todas las etiquetes tienen apertura y cierre
c) HTML5 es la ultima versión de HTML
d) Ninguna es cierta
69
8) ¿Cuál es la etiqueta para indicar un salto de línea?
a) </br>
b) <breakLine>
c) <br>
d) <hr>
9) ¿Cuál es la etiqueta para poner texto en negrita?
a) <strong></strong>
b) <bold></bold>
c) <i></i>
d) <u></u>
10) ¿Qué etiqueta se usa para escribir una lista no ordenada?
a) <ol>
b) <ul>
c) <li>
d) <list>
11) ¿Qué etiqueta se usa para denominar cada fila en una tabla html?
a) <tr>
b) <td>
c) <th>
d) <li>
12) ¿Qué atributo debe ir siempre en la etiqueta <a>?
a) src
b) align
c) href
d) alt
13) ¿Qué significa CSS?
a) Cascading Style Sheets

b) Coded Style Sheets
c) Color Style Sheets
d) Carrot Soup Sauce
14) En que parte del HTML podemos agregar la hoja de estilos
a) <Body>
b) <Head>
c) <Footer>
d) <Nav>
70
15) La etiqueta para agregar el archivo CSS a el archivo HTML es:
a) <head>
b) <link>
c) <css>
d) <meta>
16) Para delimitar un bloque de CSS usamos:
a) Llaves {}
b) Parentesis ()
c) Comas ,,
d) Corchetes []
17) ¿Cual de estos no es un tipo de selector?
a) Selector de Clase
b) Selector de Etiqueta
c) Selector Universal
d) Selector de Cascada
18) En relación al atributo class cual es cierta:
a) No se puede repetir en dos elementos

b) Es reutilizable
c) Debe ir siempre
d) Ninguna es cierta
19) ¿Cuál de estas no es una unidad de medida en CSS?

a) Puntos
b) Pulgadas
c) Pies
d) Milimetros
20) ¿Cuál de estas no es una manera de especificar colores en CSS?

a) RGB
b) Binario
c) Nombre
d) Hexadecimal
21) ¿Cuál de estos atributos no es parte del modelo de caja?

a) Margen
b) Relleno
c) Borde
d) Longitud
71
EJERCICIOS DE APRENDIZAJE
Para la realización de los ejercicios que se describen a continuación, es necesario tener
instalado Visual Studio Code o alguna aplicación parecida. Si no lo tienen instalado aquí les
dejamos el link: Visual Studio Code.
Recomendamos también ir al apartado de bibliografía al final de la guía por si necesitamos

reforzar o queremos saber más sobre los temas vistos.
1. Crear un archivo HTML, que contenga un encabezado <h1> seguido de un párrafo y

un encabezado <h2> seguido de otro párrafo. Después, hacer que un párrafo se
muestre en negrita y el otro en itálica. Utilizar saltos de línea si los consideran
necesarios.
2. Ahora vamos a tener que centrar nuestros encabezados y nuestros párrafos

alinearlos a la izquierda. A continuación, después del ultimo párrafo vamos a tener
que crear una lista ordenada de lo que queramos. Tendremos que mostrar la lista
donde la enumeración sean letras del alfabeto. Sin usar CSS
3. Ahora crearemos otro archivo HTML en que crearemos una lista anidada de
enlaces, deberá verse así:
Cada buscador y red social que sale en la lista deben ser links a las respectivas
paginas.
4. Crear un nuevo archivo HTML en el que explicaremos la receta para hacer papas
fritas. La pagina debería verse así:
72
5. Ahora vamos a crear una pagina web de nuestra banda favorita, vamos a mostrar un
ejemplo con los Beatles:
La tabla tendrá bordes que se lo debemos agregar sin css. Investigar atributo
border.
6. Por ultimo vamos a crear un formulario para registrar un usuario que se vea de la
siguiente manera:
Es importante que en las casillas de sexo del usuario se puede clickear la/s
palabra/s hombre, mujer o prefiero no decir para seleccionar la opción.
Recordemos que eso lo podemos hacer con la etiqueta label.
73
7. Crear un archivo HTML y un archivo CSS, vamos a linkear el archivo CSS al archivo
HTML y vamos hacer lo mismo que el primer ejercicio, pero ahora la pagina va a
tener un color de fondo a elección, el encabezado H1 tiene que tener una fuente a
elección y estar centrado, lo mismo para el encabezado H2, y por ultimo los
párrafos deben tener un fuente a elección, deben tener un color a elección y deben
estar centrados a la izquierda.
8. Definir las reglas CSS que permiten mostrar los enlaces con los siguientes estilos:
• En su estado normal, los enlaces se muestran de color rojo #CC0000.

• Cuando el usuario pasa su ratón sobre el enlace, se muestra con un color de fondo
rojo #CC0000 y la letra de color blanco #FFF.
• Los enlaces visitados se muestran en color gris claro #CCC.
9. Para este apartado vamos a crear 2 listas:
1) Lista con viñetas con aspectos personalizados a elección.
2) Lista vertical con links a paginas a elección.
10. A partir del código HTML proporcionado, añadir las reglas CSS necesarias para que
la página resultante tenga el mismo aspecto que el de la siguiente imagen:
Nota: el código para este ejercicio se encuentra en el Drive.
11. Determinar las reglas CSS necesarias para mostrar la siguiente tabla con el aspecto
final mostrado en la imagen (modificar el código HTML que se considere necesario
añadiendo los atributos class oportunos).
Tabla original:
74
Tabla final:
Pasos a hacer:
1) Alinear el texto de las celdas, cabeceras y título. Definir los bordes de la tabla,
celdas y cabeceras (color gris oscuro #333).
2) Formatear las cabeceras de fila y columna con la imagen de fondo

correspondiente en cada caso
(fondo_gris.gif, euro.png, dolar.png, yen.png, libra.png). Modificar el tipo de letra
de la tabla y utilizar Arial. El color azul claro es #E6F3FF.
75
3) Mostrar un color alterno en las filas de datos (color amarillo claro #FFFFCC).
Nota: el código para este ejercicio se encuentra en el Drive.
12. Ahora vamos a utilizar Bootstrap. Deberemos crear una pagina que tenga un
encabezado H1 con un párrafo y un encabezado H2 con un párrafo. Tenemos que
lograr que se vean con los estilos de Bootstrap.
13. Usar Bootstrap para mostrar un tabla de productos así:
14. Una vez que tenemos esa tabla vamos a sumarle una columna más que se vea así:
Para esto investigar la clase button de Bootsrap para las etiquetas <a> e investigar
los colores de Bootstrap y como sumarlos.
15. Un formulario para que el usuario se pueda registrar en nuestra pagina usando
Bootstrap.
76
16. Además, haremos una landing page que contenga un navbar, investigar el navbar
en Bootstrap, con botones a todos las paginas previamente mencionadas.
Pueden también hacer que ese navbar salga en el resto de páginas.
17. Por último, le sumaremos una imagen a la landing page usando las clases para la
etiqueta <img> que nos provee Bootstrap. Ejemplo:
77
EJERCICIOS EXTRAS
Estos van a ser ejercicios para reforzar los conocimientos previamente vistos. Estos
pueden realizarse cuando hayas terminado la guía y tengas una buena base sobre lo que
venimos trabajando. Además, si ya terminaste la guía y te queda tiempo libre en las mesas,
podes continuar con estos ejercicios extra, recordando siempre que no es necesario que
los termines para continuar con el tema siguiente. Por ultimo, recordá que la prioridad es
ayudar a los compañeros de la mesa y que cuando tengas que ayudar, lo más valioso es
que puedas explicar el ejercicio con la intención de que tu compañero lo comprenda, y no
sólo mostrarlo. ¡Muchas gracias!
1. Siguiendo el ejercicio de Bootstrap, hacer un pagina para el detalle del producto. Una
pagina que muestre el nombre, el precio del producto y un botón para comprar y otro
para agregar al carrito. A esta pagina se accederá con el botón en al tabla de ver
detalle.
2. Sumarle a la landing cartas que muestren productos de esta manera:
78
Bibliografía
Información sacada de las paginas:
HTML:
- https://desarrolloweb.com/manuales/manual-html.html
- https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics
- https://www.arkaitzgarro.com/xhtml/capitulo-2.html#que-es-html
- https://www.geeksforgeeks.org/span-tag-html/
- https://www.geeksforgeeks.org/div-tag-html/
CSS:
- https://desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html
- https://uniwebsidad.com/libros/css/capitulo-1
- https://lenguajecss.com/css/modelo-de-cajas/unidades-css/
- https://developer.mozilla.org/es/docs/Learn/CSS/First_steps
- https://web.dev/learn/css/
79

HTML & Css

Cargado por

Copyright:

Formatos disponibles

HTML & Css

Cargado por

Información del documento

Título original

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

HTML & Css

Cargado por

Copyright:

Formatos disponibles

GUIA HTML & CSS

HTML LENGUAJE DE MARCADO

Por ejemplo, toma la siguiente línea de texto:

Mi gato es muy gruñon

<p> Mi gato es muy gruñon </p>

ANATOMIA DE UNA ETIQUETA HTML

Las partes principales de la etiqueta completa llamada elemento son:

1. La etiqueta de apertura: consiste en el nombre de la etiqueta (en este caso, p),

3. El contenido: este es el contenido de la etiqueta, que en este caso es sólo texto.

4. El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido

<p> Mi gato es <strong>muy</strong> gruñon </p>

<title>Mi pagina de prueba</title>

<p> Cooperacion Humana </p>

• <!DOCTYPE html>: el tipo de documento. Es un preámbulo requerido. Anteriormente,

• <html></html>: la etiqueta <html>. Esta etiqueta encierra todo el contenido de la página

• <head></head>: la etiqueta <head>. Esta etiqueta actúa como un contenedor de todo

• <meta charset="utf-8">: esta etiqueta establece el juego de caracteres que tu

• <body></body>: la etiqueta <body>. Encierra todo el contenido que deseas mostrar a

ELEMENTOS EN BLOQUE Y EN LÍNEA

HTML define un total de 91 etiquetas, de las cuales 10 se consideran obsoletas. Sin

Esta sería la estructura general de una línea de código en lenguaje HTML:

<etiqueta atributo1="valor1" atributo2="valor2">contenido</etiqueta>

<a href="http://www.enlace.com" target="_blank">Ejemplo de enlace</a>

• <a> es la etiqueta inicial y </a> la etiqueta de cierre.

• href y target son los atributos.

• http://www.enlace.com y _blank son las variables.

• Ejemplo de enlace es el contenido.

id="texto" Establece un indicador único a cada elemento

style="texto" Aplica de forma directa los estilos CSS de un elemento

title="texto" Establece el título del elemento (Mejora la accesibilidad)

Esto es una línea

Esto es otra línea

Esto en una pagina se vería así

La etiqueta BR no tiene su correspondiente cierre. Es un detalle que quizás te haya llamado

FORMATO DE PARRAFOS HTML

Así, si deseásemos introducir un texto alineado a la izquierda escribiríamos:

<p align="left">Texto alineado a la izquierda</p>

Para una justificación al centro:

<p align="center">Texto alineado al centro</p>

Para alinear a la derecha:

<p align="right">Texto alineado a la derecha</p>

Esto en una pagina se vería así:

<p><strong> Texto en negrita </strong> y texto normal</p>

<p><i> Texto en italica </i> y texto normal</p>

Esto en una pagina se vería así:

<p><u> Texto subrayado</u> y texto normal</p>

Esto en una pagina se vería así:

Hay varios tipos de encabezados, que se diferencian visualmente en el tamaño de la letra

Los encabezados se verán de esta manera en la página:

Podemos ver cómo se presentan algunos encabezados a continuación.

<h1> Encabezado de nivel 1 </h1>

<h2 align=”center”> Encabezado de nivel 2 </h2>

Podemos distinguir dos tipos de listas HTML:

<p>Países del mundo</p>

Esto en una pagina se vería así:

<ul type="tipo de viñeta">

Donde tipo de viñeta puede ser uno de los siguientes:

<p>Reglas de comportamiento en el trabajo</p>

<li>El jefe siempre tiene la razón </li>