guia

GUIA “ELEMENTOS SOFTWARE WEB”
Guía de trabajo
Objetivo de las sesiones de trabajo: Proporcionar una comprensión clara y práctica de los
elementos fundamentales del software web. Durante las sesiones, se abordarán conceptos clave
relacionados con el desarrollo, la estructura y el funcionamiento de aplicaciones web. Los estudiantes
adquirirán conocimientos sobre los componentes básicos de un sistema web, como la interfaz de
usuario, la lógica del servidor, bases de datos y la comunicación entre cliente y servidor.
Objetivo General: Ofrecer una referencia completa y didáctica sobre los principales elementos que
componen un software web. La guía está diseñada para ayudar a los estudiantes tecnológico a
comprender y aplicar los conceptos necesarios para diseñar, construir e implementar aplicaciones web
eficientes y seguras. La guía abarca temas como tecnologías frontend, lenguajes de programación,
marcos de trabajo, gestión de bases de datos, y protocolos de comunicación, entre otros.
Duración: 4 horas
1
Lenguajes de Hipertexto
¿Qué es un hipertexto?
Un hipertexto es un texto común, con la funcionalidad adicional de poder relacionarse

con otros documentos, a través de vínculos (en la terminología del web se le conoce
como hipervínculos); y de esta forma poder presentar organizadamente una colección
de información que sea fácil de examinar y usar.
¿Qué es el HTML?
HTML (del inglés, HyperText Markup Languaje) es un lenguaje para preparar

documentos de hipertexto; este lenguaje es el estándar para la distribución de
información en el web (de ahora en adelante, páginas web).
2
Elementos estructurales
Cabecera (head)
El <head> es una parte de la web donde colocamos todas aquellas etiquetas (que no se
van a visualizar), pero que sirven para indicar todas las características que el navegador
necesita. La etiqueta charset es una de las impriscindibles, ya que indica la codificación
que tendrá la página. Con un valor de utf-8 se mostrarán símbolos como la "ñ", "ç" o los
acentos correctamente.
3
El texto indicado dentro de la etiqueta <title> se mostrará en la pestaña del navegador.
Además, ser el que se muestre en las búsquedas de los diferentes buscadores y es un
elemento importante (a nivel de SEO) para el posicionamiento de la página.
Dentro del atributo content=" " escribiremos el texto que queremos que aparezca
como descripción de nuestra página cuando ésta aparezca dentro de los resultados de
búsqueda de los buscadores. No influye en el posicionamiento, pero si puede
condicionar a que los usuarios hagan clic y accedan en un mayor número a nuestra
página. La longitud idónea no debe ser superior a 156 carácteres, para que el buscador
no lo corte por donde más le convenga.
Dentro de estas etiquetas style ubicaremos el código CSS

que única y exclusivamente afectará a los elementos de este mismo fichero HTML
En el atributo href=" " indicaremos la ruta donde está ubicado al fichero CSS externo
(código que afectará a todos los elementos de todas las páginas HTML donde se
coloque esta etiqueta).
En el caso de que una página tenga estas dos últimas etiquetas se ejecutarán las dos. Si
tienen las mismas propiedades, tendrá más valor la que se indique en último lugar
4
Dentro de esta etiqueta script escribiremos el código de javaScript (en el caso de que
exista) que única y exclusivamente afectará y se ejecutará dentro este mismo fichero
HTML.
El valor viewport únicamente será leído por móviles, tablets y dispositivos conectados a
internet en general, en los que el tamaño de su navegador esté supeditado al tamaño
de la pantalla del dispositivo (osea todos). En este ejemplo (que está ampliado en el
tema: Responsive design) se indica que el ancho del contenido se adaptará al ancho de
la pantalla del dispositivo y que el zoom (tamaño) inicial del contenido será del 100%
(para que el contenido no tenga que ampliarse por el usuario nada más acceder a la
web y sea legible sin esfuerzo).
Cuerpo (body)
El <body> es donde se colocan todos los elementos que sí se van a mostrar y que
forman el contenido de la página. Habitualmente todo este contenido deberá estar
dentro de cajas.
5
Se dispone de esta misma caja genérica <div>, sin embargo, se tiene diferentes tipos de
cajas destinadas cada una a un tipo de contenido
<main>, <header>, <nav>, <section>, <article>, <aside> y <footer>. De esta manera el
navegador puede entender qué contiene cada una de estas cajas, sin necesidad de
tener que entender el idioma utilizado y sin tener que leer ni analizar el texto que
contiene.
<div>: es el tipo de caja genérica, que, aunque no identifica qué tipo de contenido
contiene, sigue siendo la más utilizada. No obstante, suele estar ubicada dentro de cajas
que sí tienen un significado semántico concreto como las siguientes
6
<main> es la caja que contiene todo el contenido principal de la página, con las
siguientes características:
 Sólo puede existir un único <main> por página.
 No puede estar dentro de ninguna otra caja.
 Dentro contendrá aquel contenido que no se repita en cada página
(conteniendo <div>, <section>, <article> o incluso <aside>), pero nunca cajas
como <header>, <nav> o <footer>).
Dentro de la caja <header> ubicamos el contenido que estaría destinado al encabezado

de la página. Normalmente contiene el logo y el nombre de la página y suele estar
ubicado al inicio.
La caja <footer> contiene la información que figura al pie de la página (normalmente es

la última caja de todas) y es donde se ubica el ©, e información como el mapa de la
página, autor, fecha y otros datos finales. Actualmente existe la tendencia de
hacer <footer> enormes donde figura todo lo que se puede encontrar en el sitio.
La caja <nav> contiene todos los enlaces de la página, ya sea a otras secciones de
nuestro mismo sitio web o a páginas externas. Por ello, en algunos casos pueden existir
varios <nav>, como por ejemplo el del principio de la página y otro final ubicado dentro
del <footer>
Las cajas <section> contienen el contenido genérico de la página.
7
 Se pueden utilizar varios <section> al mismo tiempo en la misma página.
 Pueden contener múltiples <div> y otras cajas relacionadas, como <article>.
 Normalmente se utilizan para grandes cantidades o secciones de información de
tipo similar.
Las cajas <article> también están destinadas a contener el contenido de la

página, aunque normalmente suelen utilizarse para mostrar información más
reducida y concreta y que puede ser independiente del resto.
Dentro de las cajas de tipo <aside> se ubican los contenidos que no tienen relación
directa con el contenido, como por ejemplo información sobre vacunas o pasaportes en
una web de viajes, calendario de eventos de una entidad, publicidad o la biografía del
autor de un blog.
Aunque <figure> no tiene las mismas funcionalidades ni características que el resto de

cajas, tiene como objetivo contener imágenes que opcionalmente pueden tener
vinculadas un pie de imágen (información más detallada en el tema figure y figcaption).
Ejemplo:
8
Ejemplo:
El ejemplo de este tema se basa en la resolución de estos puntos:
1. Crear un archivo HTML con formato UTF-8.

2. Debe llamarse index.html (en minúsculas y sin acentos ni espacios).
3. Debe tener un esqueleto HTML básico correcto.
4. Tiene que contener los bloques o cajas semánticas de HTML5 ya
preparadas: <header>, <nav>, <section>, <article> o <footer> como mínimo.
5. En cada una de estas cajas introducir cualquier texto 'falso' para tener algo de
contenido.
Solución:
9
 Etiquetas de inicio (no varían nunca)
 utf-8 para que la página muestre acentos.
 Dentro de <title> escribimos el título que tendrá la página y que se verá en la
pestaña del navegador.
 A partir del <body> empieza el contenido de la página.
 Dentro del <header> colocaremos el logo y el nombre de la empresa
 Dentro del <nav> van ubicados los enlaces a los diferentes apartados de la web.
 Dentro del <section> colocaremos el contenido principal.
 Colocamos un <div> sólo para el título de la sección, para poder maquetarlo
individualmente, que será 'Quiénes somos'.
 Cada apartado estará dentro de un <article>
 En este <article> estará el contenido del segundo apartado.
 Y aquí el último <article>.
 La última caja es el <footer> o pie de página, donde pondremos la fecha y la
firma.
10
Resultado:
Anatomía de un elemento
 La etiqueta de apertura: Consiste en el nombre del elemento (en este

ejemplo, p para el párrafo), envuelto en corchetes angulares de apertura y cierre.
Esta etiqueta de apertura marca dónde inicia o comienza a surtir efecto el
elemento. En este ejemplo, precede al inicio del texto del párrafo.
 El contenido: Este es el contenido del elemento. En este ejemplo, es el texto del
párrafo.
 La etiqueta de cierre: Esta es la misma que la etiqueta de apertura, excepto que
incluye una barra diagonal delante del nombre del elemento. Esto marca donde
termina el elemento. No incluir una etiqueta de cierre es un error común para
principiantes que puede producir resultados peculiares.
Anidando elementos
Los elementos se pueden colocar dentro de otros elementos. Esto se

llama anidamiento. Si quisiéramos decir que nuestro gato está muy gruñón, podríamos
envolver la palabra muy en un elemento <strong>, lo que significa que la palabra debe
tener un formato de texto fuerte:
<p>Mi gato es <strong>muy</strong> gruñón.</p>
11
Hay una forma correcta e incorrecta de anidar. En el ejemplo anterior, abrimos primero
el elemento p, luego abrimos el elemento strong. Para una anidación adecuada,
primero debemos cerrar el elemento strong, antes de cerrar p.
<p>Mi gato es <strong>muy gruñón.</p></strong>
Las etiquetas tienen que abrirse y cerrarse de manera que estén dentro o fuera la una
de la otra. Con el tipo de superposición en el ejemplo anterior, el navegador tiene que
adivinar tu intención. Este tipo de adivinanzas puede dar lugar a resultados
inesperados.
Etiquetas básicas
Al escribir código HTML existen algunas características, como pueden ser los saltos de
línea, las negritas, múltiples espacios seguidos, cursivas o sangrías que tienen que
indicarse expresamente utilizando diferentes etiquetas HTML.
Salto de línea <br>:
Cuando queremos añadir un ENTER o salto de línea para que el texto baje a la siguiente
línea utilizamos la etiqueta <br>. Así, en el caso del ejemplo anterior tendríamos que
haber añadido un <br> para partir la línea del subtítulo:
12
Párrafos <p> </p>:
Los párrafos se indican con la etiqueta <p>.

Si únicamente añadimos una etiqueta <p> se aplica un salto de línea algo más grande
que el <br> anterior. Pero si por el contario encerramos un párrafo entre las
etiquetas <p> al principio y </p> al final del párrafo, éste se separará del bloque
anterior y siguiente con un espacio doble (como es el caso de este párrafo).
Sangría <dd> </dd>:
Las sangrías son aquellos espacios en blanco (vacios) que se colocan al comienzo de
una línea o párrafo. Así, para crear sangrías tenemos diferentes etiquetas, aunque
posiblemente la que da mejores resultados y es más fácil y fiable son las
etiquetas <dd> y </dd>
Negritas y cursivas <b> </b> <i> </i>:
Si queremos colocar negritas o cursivas en el texto del ejemplo tenemos que utilizar las
etiquetas: <b>...</b> para negrita y/o <i>...<i> para cursivas.
Siguiendo con el ejemplo anterior, para colocar "Título" y "Subtítulo"
en negrita debemos encerrar estas palabras entre las etiquetas <b> y </b>.
13
Si además, queremos colocar "Fenomenología del espíritu" en cursiva debemos
encerrar esta palabra entre las etiquetas <i> e </i>
Encabezados <h1>, <h2>, <h3>, <h4>, <h5>, <h6>:
Los encabezados (<h1>, <h2>, <h3>, <h4>, <h5> y <h6>) tienen una gran importancia a
nivel de SEO, ya que ayudan a posicionar nuestra web. El objetivo es indicar a los
buscadores la estructura que tiene cada una de nuestras páginas, de qué va, qué
apartados y subapartados tienen y su relación de importancia.
Con <h1> especificamos el título de la página (no del sitio en general) y por lo tanto:
 Contra más concreto y conciso mejor.
 Debe definir de qué trata la página.
 Es importante que sólo exista un único <h1> por página.
 Que cada página tengo un <h1> diferente.
14
 Es conveniente colocarlo en la parte superior de la página (antes que los <h2> ).
Utilizamos <h2> para especificar los subtítulos o diferentes partes de cada página. Por
ello:
 Generalmente, su contenido tiene más longitud que los <h1>.
 Habitualmente existirán varios <h2> por página
 Se colocan al inicio de cada uno de los subapartados.
La etiqueta <h3> sirve para especificar las diferentes partes de cada uno de los
subapartados.
 Tiene mucha menos importancia a nivel de SEO.
 Su uso no es tan generalizado como las anteriores.
Las etiquetas <h4>, <h5> y <h6> son etiquetas casi ignoradas para los buscadores, por
lo que su uso es muy residual.
Ejemplo:
El ejemplo de este tema se basa en rellenar de contenido el archivo index.html creado

en el tema anterior:
1. Escribir el contenido de texto dentro de cada una de las cajas semánticas
(<title>, <header>, <nav>, <section>, <article>, <footer> entre otros).
2. Añadir saltos de página (<br>) y separaciones de párrafo (<p>).
3. Añadir encabezados (de <h1> a <h7>) para resaltar la relevancia del contenido.
Solución:
15
 Escribimos un título correcto (se mostrará en la pestaña del navegador).
 El <header> estará compuesto por una imagen (que colocaremos en el siguiente
tema) y un texto que provisionalmente está dentro de un <h1> para que se
muestre a un tamaño mayor.
 En los enlaces (de manera provisional) hemos añadido al final unos <br> para que
no aparezcan todos seguidos.
 Al titular de la página le añadimos un encabezado <h2> para resaltarlo.
 En cada uno de los 3 textos (3 <article>) hemos colocado encabezados <h3> para
resaltar los títulares de cada uno.
 <br> para que ambos textos estén separados.
16
 Hemos encerrado diferentes palabras dentro de etiquetas <b> (bold) para que se
muestren en negrita.
 Al <footer> le añadidos el encabezado <h5> para que se muestre a un tamaño
menor.
 El código © equivale al símbolo de copyright ©.
Resultado:
Imágenes, listas y enlaces
Imágenes
HTML5 acepta 4 formatos de imagen para nuestras páginas web (JPG, GIF, PNG y SVG)
17
18
Etiqueta <img>:
Para añadir una imagen basta con añadir el siguiente código:
src (source):
Es necesario y obligatorio especificar la ruta para que el navegador pueda encontrar la

imagen, siempre desde la carpeta donde se encuentra el fichero html, e indicando
obligatoriamente la extensión del archivo (jpg, gif, png o svg).
Texto alternativo:
Es importante añadir información de tipo textual a la imagen para que los buscadores (a
nivel de SEO) puedan saber qué muestra la imagen e indexar esta información, y los
dispositivos "lectores de pantalla" para personas invidentes, puedan describir la imagen
oralmente. Para ello utilizamos el parámetro alt, seguido de la "descripción de la
imagen".
Imágenes y CSS (responsive design):
Actualmente, donde ya no se concibe una web que no sea responsive, las imágenes
deben adaptarse (sin pixelarse ni deformarse) al tamaño de la caja donde estén
contenidas. Por ello, ya no se indican tamaños (width y mucho menos height) fijos o en
píxeles, sino que todo se especifica por porcentajes. Así, no puede faltar este bloque de
declaraciones CSS en cualquier de nuestros proyectos:
19
img{...} es un selector que afectará a todas las imágenes que tengamos (no tiene
delante del img ni el símbolo '.' ni '#'').
Por su parte, la propiedad max-width especifica que todas las imágenes se adaptarán al
100% del ancho de la caja que las contiene (de manera proporcional), pero
que nunca se ampliarán más de su tamaño original (para que no se vean pixeladas).
vertical-align sirve para que se elimine el espacio que queda debajo de cualquier
imagen (espacio que queda entre la parte inferior de la imagen y el borde inferior de la
caja). Su valor puede ser indistintamente top o bottom.
<figure> y <figcaption>:
<figure> es un nuevo tipo de caja de HTML5 con contenido semántico propio orientado
a contener imágenes, con la interesante posibilidad de añadir un pie de imágen
vinculada a ésta. De esta manera el navegador y cualquier robot que acceda a nuestra
20
página conocerá la naturaleza del contenido que contiene este tipo de bloque y su
información asociada.
Para añadir un pie de imagen, utilizamos la etiqueta <figcaption> seguida del texto que
se mostrará como pie vinculado a la imagen.
Para dar características al texto del figcaption (pie de imagen) con CSS, debemos utilizar
el selector:
Ejemplo:
21
El ejemplo de este tema se basa en añadir los vínculos a las imágenes de esta página
utilizando la etiqueta <img> (sin importar de momento su colocación) en los siguientes
casos:
1. Añadir la imagen del logo (dentro del <header>).
2. Añadir los iconos de los enlaces al resto de páginas del sitio (dentro del <nav>).
3. Añadir las imágenes del contenido donde sean necesarias.
4. Es conveniente establecer el tamaño final de la imagen modificando su tamaño
desde cualquier programa de edición de imagen (como Photoshop o similar).
5. Las imágenes que posteriormente queramos maquetar independientemente del
resto de elementos que la acompañen, podremos aprovechar para colocarlas
dentro de un <div>.
Solución:
22
 Se eliminó los encabezados <h1> y </h1> del <header> para poder alinear la
imagen del logo con el texto que lo sigue (los encabezados introducen un espacio
antes y después).
 En la etiqueta img, primero se indica el nombre de la carpeta 'img/' y
posteriormente el nombre de la imagen, indicando obligatoriamente el formato.
 El atributo align nos permite alinear la imagen con el texto que lo acompaña
(dentro de la misma caja), y <p> los separa verticalmente.
 Las imágenes de los 3 apartados las introducimos dentro de un <div> (una caja),
para posteriormente poderlas maquetar correctamente.
 En todos los casos es aconsejable dar a la imagen el tamaño final con Photoshop
(o programas similares).
 Pero si se quiere indicar el tamaño desde el propio código html, se debería añadir
al final de la etiqueta img (antes del > final) su tamaño en
píxeles: width="300" o height="300", ya se quiera indicar la anchura o la altura.
Se desaconseja utilizar ambas propiedades a la vez.
Resultado:
23
Listas
Las listas son muy útiles cuando queremos ofrecer una lista de elementos, palabras,
frases o enlaces uno debajo del otro. Si estos elementos van encabezados por una
bolita o un cuadrado son listas no ordenadas, si por el contrario van encabezados por
números (correlativos: 1, 2...), letras ordenadas alfabeticamente (A, B...) o números
romanos (I, II...) son listas ordenadas.
Así, para crear listas utilizamos dos etiquetas.
 <ul> y </ul> para listas no ordenadas (señaladas por bolitas o cuadrados).
 <ol> y </ol> para listas ordenadas (señaladas por números o letras).
En ambos casos, cada uno de los términos o elementos (ordenados o no) que van a
componer la lista se deben encerrar entre las etiquetas <li> y </li>.
Para mostrar algunos ejemplos vamos a utilizar la muy útil, interesante, actual, cónica y
boreal lista de los Reyes Godos recortada en versión remix.
24
Lista no ordenada:
De manera predefinida delante de cada línea de la lista se coloca

automáticamente como viñeta un pequeño círculo negro (llamado disc). Si
queremos otro tipo de viñeta podemos especificarlo en la
etiqueta <ul> añadiendo el atributo type, seguido de los valores circle para
utilizar círculos sin relleno o square para cuadrados.
Lista ordenada:
Por defecto, para numerar las listas ordenadas se utilizan números (que
empiezan por el 1). Para utilizar letras mayúsculas, minúsculas o números
romanos podemos añadir el atributo type, seguido de uno de los siguientes
valores:
 A: para letras mayúsculas.
 a: para letras minúsculas.
25
 I: para números romanos en mayúscula.
 i: para números romanos en minúscula.
Además, podemos indicar por qué número o letra tiene que empezar a "contar",
añadiendo el atributo start:
Por último, también es posible utilizar de manera conjunta los

atributos type y start:
26
Listas con imágenes en vez de viñetas
Tenemos la posibilidad de sustituir las viñetas predeterminadas (círculos o cuadros) por

imágenes (gif o png) añadiendo un poco de código CSS.
Vamos a añadir un icono de una flecha en formato PNG ( ) -que tenemos en la
carpeta img- delante de cada elemento de la siguiente lista:
Así, con list-style: none; eliminamos las viñetas, mientras que con list-style-
image especificamos qué imagen se debe utilizar.
27
Viñetas de colores:
Normalmente el texto y la viñeta (círculo o cuadrado) de cada elemento de la lista

comparten el mismo color, tipo y tamaño de la fuente, por lo que si queremos
independizar a estos dos elementos para darles a cada uno de ellos por separado un
estilo diferente, vamos a tener que encerrar al texto dentro de una etiqueta <span>,
para que de esta manera podamos hacer referencia a este tipo de etiqueta en el código
CSS sin influir en las características de la viñeta.
Vamos a hacer un ejemplo con una versión resumida de una lista de mis Reyes Godos
preferidos.
Vamos a hacer un ejemplo con una versión resumida de una lista de mis Reyes Godos
preferidos.
28
Con 'ul li' estamos haciendo referencia a cada uno de los elementos <li> de la lista <ul>,
osea a las viñetas (bolitas o cuadrados).
Con 'ul li span' agrupamos a todas las etiquetas de tipo <span>, que se encuentren
dentro de las etiquetas de tipo <li> y que a su vez éstas estén dentro de etiquetas <ul>.
En este caso se refiere a los textos de las viñetas, a los que se les aplica un color negro y
un tamaño de 15 píxeles.
Enlaces
Enlaces de texto:
Podemos encontrar 6 tipos de enlaces:

1. A páginas HTML externas propias hechas por nosotros.
2. A partes internas del mismo HTML.
3. A páginas HTML de terceros.
4. A un correo electrónico.
5. A ficheros pdf, jpg, gif, png, svg.
6. A ficheros comprimidos para ser descargados (zip).
29
En todos los casos utilizamos la misma etiqueta <a> para abrir y </a> para cerrar:
href sería el atributo donde se tiene que indicar el lugar donde accederá el usuario
cuando haga clic en dicho enlace.
fichero_a_abrir.html indica el fichero, dirección de correo electrónico o parte del mismo
documento donde se desea acceder.
Enlace sería el texto (o la imagen) sobre la que el usuario tendría que hacer clic para
acceder al destino indicado.
Enlazar con paginas HTML propias hechas por nosotros:
Como normalmente ubicaremos los distintos ficheros HTML en la misma carpeta, para
enlazar un HTML con otro, únicamente hay que especificar el archivo HTML al que se
desea enlazar (sin olvidar de indicar el formato .html).
En el siguiente ejemplo se crea un enlace de texto, que será "Galería de Imágenes", y
que -al hacer clic- comunicará con el archivo galeria.html (ubicados ambos ficheros en
la misma carpeta):
Enlazar una parte interna de nuestro HTML:
Es posible realizar un enlace que comunique con una parte en concreto de nuestro
HTML (ya sea del mismo documento o bien de otro), como por ejemplo los típicos
enlaces que te llevan al principio de la página.
Para ello hay que especificar a qué parte del documento HTML se desea acceder,
especificando el nombre id de un elemento ubicado en dicho lugar, anteponiendo el
símbolo '#' antes de dicho nombre. Es decir, es necesario que exista una etiqueta HTML
con el nombre id especificado (id="nombre"), y que además esté ubicado en el lugar del
HTML al que se desea acceder.
30
Por ejemplo, si queremos crear un enlace que comunique con el inicio del mismo
documento y en dicho lugar existe un <div> que tiene un id llamado inicio, utilizaríamos
el siguiente código:
Enlace dentro del mismo documento:
Enlace al mismo punto, pero desde fuera del mismo documento (desde otro
documento html distino):
Enlazar con páginas HTML de terceros:
Para enlazar con páginas web externas realizadas por otras personas, tendremos que
añadir el atributo target="_blank", para que dicha página no se abra en la misma
ventana del navegador (cerrando por lo tanto nuestra web) y que ésta se abra en una
nueva pestaña del navegador.
Otro de los puntos importantes es que la dirección de la web de destino tiene que
empezar obligatoriamente por http o https.
Enlazar con un correo electrónico:
Aunque el mejor método para poder enviar un correo electrónico es a través de un

formulario y utilizando un pequeño código de PHP, para salir del paso podemos utilizar
el prefijo mailto:, seguido de la dirección de correo electrónico.
El gran problema de este código es que al hacer clic sobre dicho enlace, se abrirá el
programa predeterminado de correo electrónico que esté instalado en el ordenador
31
utilizado, con el correo electrónico de destino ya escrito para que el usuario envie el
mail desde este programa de correo. Esto quiere decir que si no existe ningún programa
de correo configurado (como es el caso de un cibercafé, biblioteca o del aula de
informática de cualquier centro educativo) no será posible enviar ningún mail.
Enlazar con ficheros pdf, jpg, gif, png, svg:
El navegador puede abrir un gran número de extensión de ficheros. Así, si enlazamos

con un fichero pdf, una imagen o algunos formatos de archivo determinados, el
navegador los podrá mostrar sin ningún problema. Si no lo puede abrir se descargarán
en la carpeta de 'Descargas'.
Si dicho archivo está en la misma carpeta que el archivo HTML, se especificará
únicamente el nombre del archivo y su extensión sin más, mientras que si está en
Internet habrá que especificar la ruta entera (empezando con http o https).
Enlazar con ficheros comprimidos para descargar:
Para permitir que los usuarios se puedan descargar los ficheros que creamos
convenientes, es suficiente con comprimir todos los ficheros en un archivo comprimido
(zip o rar), colgarlo en nuestro servidor y enlazar directamente con dicho fichero.
Con este cógido el navegador descargará el archivo especificado y lo guardará en la
carpeta de descargas.
Imágenes como enlace:
32
Para que el enlace sea una imagen (y no un texto) es suficiente con sustituir el texto del
enlace por la etiqueta <img> (utilizada para mostrar imágenes y explicada en el
tema Imágenes).
CSS exclusivo para enlaces:
Si -por ejemplo- queremos tener el siguiente enlace de color naranja:
El siguiente código CSS sería totalmente erróneo:
Ya que el selector #enlaces cambiaría a color naranja todos los textos que hubiesen
dentro de la caja <nav> llamada "enlaces", pero como el enlace "Ir a Galería" no es un
texto, sino que es un enlace, lo que tenemos que utilizar es el selector a, en vez de
indicar el nombre de su caja:
O, si queremos que este color se aplique a todos los enlaces de la página podemos
generalizar, sin indicar la caja donde se encuentra el enlace:
33
Si además queremos que el enlace NO esté subrayado utilizaremos la propiedad text-
decoration, con un valor none, que también se tiene que aplicar al enlace (a) y no a la
caja donde esté el enlace:
Para que al pasar por encima del enlace éste se coloree de color rojo, utilizaremos la
pseudo-clase (o evento) :hover;
Por último, si queremos que:

1. Un enlace no funcione como enlace en un HTML en concreto (ya que ya estamos
en esa misma página) y por lo tanto al pulsar sobre el enlace se recargaría la
misma página en la que ya estamos.
2. Que dicho enlace en concreto tenga un aspecto diferente al resto de enlaces para
informar al usuario del apartado en el que encuentra en este momento.
3. Que cuando el usuario pase con el cursor por encima, el aspecto del cursor no
cambie y continue siendo el de la flecha blanca.
Tendremos que utilizar dos selectores CSS, uno para el aspecto de inicio y el otro para
indicar las características para cuando el cursor pase por encima.
34
Eliminando el atributo href de la etiqueta <a>, el enlace no funciona como enlace (no
enlaza con nada al hacer clic), pero sigue cambiando de color al colocar el cursor
encima. El problema es que el cursor que aparece al colocar el mouse encima es muy
poco apropiado (el de selección de texto: (coloca el cursor encima del siguiente enlace
para ver el cursor de 'selección de texto'): Ir a Galería).
Así, para especificar el color de inicio del enlace utilizamos el selector #enlace1 a,
mientras que dentro de #enlace1 a:hover especificamos el cursor (el habitual) que
aparecerá al colocar el mouse encima.
Introducción a CSS
35
¿Qué son los estilos CSS?
Los estilos CSS son un conjunto de normas que indican cómo el navegador debe
visualizar cada uno de los diferentes elementos que contiene una página web. Aunque
estas normas habitualmente están relacionadas con aspectos visuales y de
posicionamiento y colocación, con CSS3 cada vez existen más posibilidades
(animaciones, transiciones, rotaciones..).
Una de las utilidades más evidentes de CSS es la posibilidad de aplicar un estilo (un
conjunto de características) a múltiples páginas HTML, no teniendo que repetir los
mismos estilos cada vez que creamos un HTML nuevo. En este caso se podría utilizar un
único fichero CSS externo (con formato .css) que afectaría al mismo tiempo a múltiples
páginas HTML, o bien incluir el código CSS dentro del mismo fichero HTML (dentro
del <head>), o utilizar estas dos posibilidades conjuntamente.
Dos modos de utilización:

1. Utilizar un fichero CSS externo:
Esta es una de las opciones más comunes, ya que posteriormente es posible

utilizar el mismo fichero CSS para aplicar el mismo estilo a otras páginas HTML.
De esta manera, cualquier cambio realizado en el diseño afectaría al mismo
tiempo a todas las páginas HTML que utilicen dicho fichero CSS.
En este caso, tendríamos un fichero HTML y un fichero CSS (con extensión .css).
Para conectar a ambos utilizaremos la etiqueta <link>, que colocaríamos en el
fichero HTML dentro del <head>.
En el código anterior, el fichero CSS se llamaría estilos.css y estaría ubicado en

una carpeta llamada css, que estaría en la misma carpeta que el fichero HTML.
Dentro del fichero estilos.css tendríamos el siguiente contenido:
36
La estructura siempre es la misma:
 Primero se indica el selector (para saber a quién afecta el código), que en este
caso es body. La línea se finaliza la línea con una llave {.
 Posteriormente se indica la propiedad a modificar (en este caso background-
color para modificar el color de fondo y color para especificar el color del texto).
 Seguido a la propiedad se indica el nuevo valor (separados ambos por dos
puntos :).
 Para finalizar cada una de las sentencias CSS se utiliza obligatoriamente el
símbolo ; del punto y coma.
 Para acabar el bloque CSS utilizamos la llave de cierre }.
Incluir el código CSS dentro del HTML:
Si añadimos el código CSS dentro del mismo fichero HTML (dentro del <head>), como
aspecto positivo, podemos decir que no necesitamos tener 2 ficheros, ya que todo está
en el mismo fichero HTML.
Como punto negativo (o no en algunos casos) es que dicho estilo únicamente afectará
al fichero HTML en el que se coloque el código CSS. Lo cual implica que si tenemos
múltiples ficheros HTML que tienen que usar los mismos estilos, dicho código se tendría
que copiar y pegar en cada uno de los ficheros HTML de manera independiente.
Este código CSS se añade dentro del apartado <head>, y debe estar dentro de la
etiqueta style:
37
Siguiendo el ejemplo anterior, el código completo quedaría de la siguiente manera:
Las propiedades CSS más utilizadas:
Tipos de propiedades CSS:
Así como en la vida real existen propiedades (como el color de ojos, estatura o bebida
preferida) qué únicamente se pueden aplicar a las personas, o propiedades (como los
caballos de potencia, tipo de combustible o número de puertas) que sólo se pueden
aplicar a los vehículos, en el mundo de HTML y CSS pasa lo mismo, hay propiedades CSS
que sólo se pueden aplicar a un tipo concreto de etiquetas HTML.
Así, existen propiedades CSS que afectan sólo
 al texto
 a las cajas <div> que contienen elementos
 a los enlaces
Aunque, antes de hacer un repaso rápido a todas ellas es de obligado cumplimiento

tener bien claro el funcionamiento de los selectores CSS.
¿Qué son los Selectores CSS?
38
Los selectores CSS son una lista de uno o más elementos HTML (nombrándolos a través
de su id, class o tipo de etiqueta) que indican a quien van a afectar las sentencias CSS
que siguen al selector.
En este caso .botones" es el selector que sirve para modificar todos aquellos elementos
que tengan el class="botones".
Si en vez de utilizar un class hubiésemos utilizado un id, sustituiríamos el . (un punto)
por # (una almohadilla).
También es posible indicar múltiples selectores, bien utilizando , (la coma) para separar
los diferentes elementos o bien el espacio para construir una ruta al elemento indicado.
Por ejemplo...
En este ejemplo, las sentencias CSS afectarían a todas las etiquetas de tipo img (osea a
todas las imágenes), también afectarían al elemento con id="intro", y también
elemento con id="boton1" que está dentro de cualquier elemento
con class="botones".
En los siguientes ejemplos, el texto podría estar dentro de una caja <div> que podría
llamarse "intro" (como nombre de tipo id).
39
o bien podría estar ubicado dentro de un <span> que podría tener el mismo nombre. Al
tener el mismo nombre, el CSS sería el mismo:
Múltiples tipos de selectores
Ya sea con el código CSS3 ubicado en un fichero css externo o bien insertado dentro del
mismo html, la estructura que debe seguir es la misma.
El selector es quién indica a qué elemento del HTML se le van a asignar los atributos
que están indicados entre el '{' y el '}'.
Así, debido a su importancia, vamos a tratar los selectores más habituales:
@font-face{
Los selectores que empiezan por '@font-face' indican las fuentes personalizadas
(tipografías ligadas a ficheros *.ttf) que usará la página html.
Utilización de tipografías paso a paso: Con HTML5 es posible utilizar fuentes
(tipografías) poco comunes sin que el usuario las tenga que tener instaladas en su
disco duro y sin tener que convertirlas en imagen.
En este caso basta con incluir el fichero de la fuente a utilizar correspondiente en
una carpeta y crear la referencia a dicha fuente desde el código CSS3.
40
Vamos a ver cómo hacerlo paso a paso..
1. Decidimos el formato de fuente a utilizar: Como para todo, existen varios
formatos de fuentes y -como no- cada navegador tiene sus preferencias y sus
enemistades.
Vamos a ver qué hay y como intentar contentar a todos.
¿Cúal elegimos?
Si queremos abarcar el máximo número de navegadores sin vivir añadiéndo

formatos de fuentes indefinidamente podemos utilizar básicamente ttf (para
todos los navegadores normales) y eot (dos veces y poniéndolo el primero
para Internet Explorer).
2. Copiamos las fuentes que vayamos a utilizar (ficheros ttf/eot):
Copiamos cada una de las tipografías (los archivos con formato .ttf y .eot) y las
pegamos en la misma carpeta donde tenemos el fichero .CSS o el .HTML (si el
código CSS se encuentra dentro del HTML -práctica no muy recomendable-).
Para convertir una fuente ttf en eot puedes utilizar esta utilidad on-line de kirsle.
https://www.kirsle.net/wizards/ttf2eot.cgi
41
3. Referenciamos las fuentes con CSS3:
Como en este ejemplo vamos a añadir 2 tipografías distintas tenemos que

referenciar las dos:
El nombre que indicamos con el atributo 'font-family' (en el ejemplo superior:

'fuente_flor' y 'fuente_pigeon') es un nombre que le damos a la fuente, para
luego poder hacer referencia a ella, por lo tanto dicho nombre nos lo podemos
inventar.
Por el contrario, el nombre que viene indicado en 'src: url' (en el ejemplo:
'fleur.ttf' y 'pigeon.otf') es el nombre exacto del fichero ttf/otf/eot de la fuente
que hemos copiado, indicando siempre el formato.
 Si es eot el valor del atributo 'format' debe ser ('embedded-opentype').
 Si es ttf el valor del atributo 'format' debe ser ('truetype').
 Si es otf el valor del atributo 'format' debe ser ('opentype').
 Si es woff el valor del atributo 'format' debe ser ('woff').
Cabe recordar que si las fuentes las hemos colocado en la misma carpeta donde
se encuentra el fichero CSS no es necesario indicar el nombre o ruta de ninguna
carpeta.
4. Aplicamos la tipografía:
42
Cuando queramos que el texto contenido en un <div>, <span>, <p> o etiqueta
semántica utilice una de las fuentes referenciadas con @font-face utilizamos la
propiedad font-family para indicar qué tipografía de las referenciadas en el punto
anterior queremos utilizar.
En este caso todo el texto que contenga el <div>, <span>, <p> que tenga como id
"apartado_1' utilizará la fuente llamada 'fuente_pizza', con un tamaño de 38
píxeles y de color blanco, tal y como se puede apreciar en la siguiente muestra:
body{
section{
footer{ ...
Los selectores que empiezan directamente con el nombre de alguna de las

estructuras semánticas de HTML5 (header, section, article, aside, footer, nav..) o
apartados tradicionales (body, header) aplican los códigos CSS que se deseen
añadir a las secciones especificadas.
#div_1{
Aquellos selectores que empiezan con el símbolo '#' hacen referencia al id de los DIV,
SPAN o P ubicados en el html. Si existen varios DIV con el mismo id dentro del html el
estilo especificado se aplicará a todos los DIVs que compartan el mismo id.
.columnas_iniciales{
43
Los selectores que empiecen con un punto '.' señalan al DIV, SPAN o P que tenga el
nombre de clase indicado (por ejemplo: div class="columnas_iniciales"). Si existen
varios elementos con el mismo nombre de clase, el estilo se aplicará a todos ellos.
table {
table th{
table td{ ...
También podemos encontrar indicaciones a estructuras tradicionales de html en

extinción como 'table' que tienen sus propias características. En este ejemplo se pueden
aplicar estilos a las tablas en general, a los titulos de las tablas (table_th) o bien a las
celdas (table_td).
#div_1 a{
.clase_1 a{
section a{
Cuando un selector acaba en '(espacio) + a' (independientemente de cómo

empiece) los atributos que le sigen serán aplicados a todos los enlaces que estén
dentro de dicho DIV, SPAN o P (si el selector empieza con '#'), o clase (si empieza
con '.') o del apartado o sección indicado.
#div1 a:hover{
.clase_1 a:hover{
section a:hover{
Cuando un selector acaba en ' a:hover' (independientemente de cómo empiece)

los atributos que siguen serán aplicados a los enlaces cuando el cursor se coloque
encima. Si el selector empieza por '#' estos enlaces estarán dentro de un DIV,
SPAN o P, si empieza por '.' se estará haciendo referencia a un nombre de clase y
si no empieza con ninguna de estas, se estará indicando el nombre de algunas de
las etiquetas semánticas de HTML5.
@ keyframes animacion_final{
44
Cuando un selector empieza con '@' indica que las líneas de código que le siguen
pertenecen a la explicación de una animación. En ellas se explica paso a paso en
qué consiste y qué movimientos tiene que realizar dicha animación.
input{
Con input se identifican aquellos elementos de un formulario que permiten al

usuario introducir datos. De esta manera es posible aplicar estilos a los
elementos '<input type...'> propios de los formularios de HTML5 (forms 2.0).
[required]{
Aunque se explicará con mucho más detenimiento al final del tema 'Formularios',
este selector indica los atributos que tienen que aplicarse a los elementos de un
formulario que tengan la propiedad 'required' y que estén correctamente
rellenados.
Formularios:
Lo primero a tener en cuenta hace referencia a la estructura general. Así, todas

las etiquetas que vamos a utilizar para el formulario tienen que estar ubicadas
dentro de las etiquetas del formulario <form> y </form>.
En este caso, detrás de action hemos añadido la ruta del fichero .php que enviará los
datos introducidos en el formulario y al final con method indicamos el método "post",
que garantiza una mayor seguridad para los datos enviados.
Tu nombre (text):
Con type indicamos qué tipo de datos estamos pidiendo (en este caso 'texto normal').
Si queremos un campo de texto más largo o extenso podemos especificarlo con size.
Con title podemos incluir un texto adicional que aparecerá cuando el usuario coloque el
45
cursor encima.
name es importante ya que es la manera en la que se identificará este valor al enviar la
información.
En todo el formulario sólo puede haber un campo con autofocus, ya que este
parámetro señala qué campo del formulario estará inicialmente seleccionado por
defecto para que el usuario pueda escribir sin tener que seleccionarlo.
El parámetro required indica que este campo es obligatorio y que sino se rellena no se
podrá enviar la información.
Contraseña (password):
Al detectar que en type se especifica el valor 'password' lo que el usuario escribe se

enmascara con círculos de forma automática.
El required final nos indica que este campo también es obligatorio.
Correo electrónico (email):
Como en type se especifica 'email' la autovalidación de este dato incluirá la búsqueda

de una @ y un mínimo formato apropiado.
En este caso observamos el parámetro placeholder, que es el responsable de que
inicialmente aparezca ya escrito en gris flojo (usuario@dominio.com).
Automáticamente cuando el usuario escribe cualquier valor dicho texto se elimina,
igualmente si el usuario borra todo el contenido, el texto especificado
con placeholder vuelve a aparecer.
Fecha de nacimiento (date):
El valor 'date' dentro de type identifica que el valor a utilizar es una fecha y que por lo
tanto aparecerá el acceso a un calendario, que se puede ubicar directamente en una
46
fecha inicial utilizando el parámetro 'value'.
Así, value permite especificar la fecha inicial por defecto que aparecerá inicialmente en
el calendario. Sino se indica ningún valor aparecerá la fecha actual.
Range:
Al indicar en type el valor 'range' aparece una barra (slider) con la que el usuario puede
introducir un valor numérico arrastrando la barra hasta el valor que corresponda.
Con min y max se especifica el valor mínimo y máximo que el usuario podrá introducir.
Para especificar un valor inicial utilizamos el parámetro value.
Con step podemos especificar el valor de incremento (o decremento) de cada punto del
slider. Por ejemplo, un valor de "1" quiere decir que cada vez que el usuario mueve un
espacio del slider se aumenta o se disminuye el valor de 1 en 1, y que además no serán
válidos los decimales.
Color:
Al indicar en type el valor 'color' aparece un selector de colores en el que se

podrá escoger el color deseado de entre los que aparecen, o bien indicando el
código RGB del color.
Para especificar un color inicial por defecto utilizamos el
parámetro value indicando el código de color inicial en hexadecimal.
47
Number:
Con min y max se especifica el valor mínimo y máximo que serán tomados como
válidos.
Para especificar un valor inicial utilizamos el parámetro value.
Con step podemos especificar el intervalo o 'de cuánto en cuánto' aumentarán o
disminuirán los datos introducidos. Por ejemplo, un valor de "10" quiere decir que cada
vez que el usuario aumenta o reduce el valor éste se mueve de 10 en 10 y que además
únicamente serán válidos los datos que sigan este intervalo (100, 110, 120, 130, etc...)
Enviar:
Con type="submit" estamos añadiendo el típico botón "Enviar", en el que a través del
parámetro value podemos indicar el texto que se mostrará dentro del botón.
En este caso la acción de enviar la información se realizará de la manera automática,
enviando los datos a la dirección que se ha indicado en <form>.
Otras etiquetas o <inputs> existentes
button: Crea un botón 'vacío'. La acción que se ejecutará cuando el usuario haga clic
en él. La acción para ejecutar se tendrá que añadir posteriormente con JavaScript
indicando su nombre de id.
48
checkbox: Crea cuadros de selección en el que se puede seleccionar más de un valor.
Como es posible marcar múltiples checkbox, cada uno debe tener
un name diferente.
Además, si queremos que uno de los valores esté marcado inicialmente por defecto,
le añadiremos la propiedad checked (como es el caso de Kabul, -ideal en Agosto-).
¿Selecciona qué poblaciones visitarías en vacaciones?
 color: Permite introducir un color señalándolo a través de una paleta de

colores. (Desarrollado en el ejemplo superior)
 date: Permite introducir una fecha sobre un calendario. (Desarrollado en el
ejemplo superior)
 email: Permite introducir una dirección de correo electrónico
válida. (Desarrollado en el ejemplo superior)
 file: Permite que el usuario pueda seleccionar un fichero de su disco duro.
Además, es posible indicar un filtro para poder seleccionar únicamente un tipo de
fichero determinado. (Posteriormente para subirlo al servidor o realizar cualquier
otra acción con dicho fichero se tendrá que recurrir a JavaScript).
 hidden: Añadiendo 'hidden' a un elemento del formulario dicho elemento no se

visualiza inicialmente. (Para volver a visualizarlo se deberá recurrir a JavaScript).
 number: Permite introducir un número a través del teclado o bien utilizando los
botones "+" y "-" del propio elemento. (Desarrollado en el ejemplo superior)
 password: Permite introducir una contraseña (los valores introducidos aparecen
ocultos con círculos). (Desarrollado en el ejemplo superior)
49
 radio: Crea círculos de selección en el que únicamente se puede seleccionar uno
de ellos. Todos los radios button tienen que tener el mismo valor en name.
Si además queremos que un valor esté seleccionado inicialmente, añadiremos el
parámetro 'checked' a la opción deseada (como 'Mujer' en el siguiente ejemplo).
 range: Crea una barra (slider) en la que el usuario podrá introducir un valor
numérico arrastrando dicho slider a la cantidad deseada. (Desarrollado en el
ejemplo superior)
 search: Permite que el usuario pueda introducir un término de búsqueda, que
posteriormente se puede utilizar para que -por ejemplo- Google busque en tu
propio dominio.
 submit: Crea el botón de "Enviar". Al hacer clic enviará los datos del formulario a
la dirección indicada en el tag <form>. (Desarrollado en el ejemplo superior)
 tel: Introduce un número de teléfono. Aunque este type no tiene autovalidación
(se puede escribir lo que se desee) ofrece importante información al navegador
del tipo de información a introducir. Así, navegadores en iPhone4 (iOs 4.2) o
Android (HTC Desire) cuando reciben un type="tel" ofrecen un teclado numérico
especial para facilitar la introducción de este tipo de información.
50
 text: Permite introducir texto normal. (Desarrollado en el ejemplo superior).
 url: Permite introducir una dirección web de Internet válida. La autovalidación se
ajusta a detectar una mínima estructura de URL.
Resumen:
Los nuevos atributos para las etiquetas <input> más habituales e importantes
son:
 required: El campo es ogligatorio.

 autofocus: Inicialmente el campo está seleccionado (sólo puede haber uno por
formulario).
 placeholder: Se muestra un valor por defecto en gris que se elimina cuando el
usuario introduce algún valor.
 autocomplete: Permite el rellenado automático del <input> en base al texto que
vaya escribiendo el usuario, según los valores introducidos en ocasiones
anteriores.
Estilos CSS y autovalidación visual
Maquetación CSS:
Para maquetar y dar un estilo determinado al formulario podemos utilizar los selectores
referentes a cada uno de los elementos que componen el
formulario form, input, fieldset, legend, label.
form{
background-color:orange;
color:black;
}
input{
color:grey;
}
fieldset{
border-radius:5px;
border:1px dotted green;
51
}
Autovalidación gráfica:
Para que el formulario pueda resaltar visualmente qué campos obligatorios es

necesario rellenar, que campos son válidos o qué campos tienen valores incorrectos
utilizamos el selector: invalid{, mientras que el selector [required]{ señala aquellos
campos que son obligatorios y que los valores introducidos son correctos y :valid{ se
encarga de gestionar aquellos campos que son correctos.
Con este código CSS todos los campos con valores obligatorios (es decir, que
tengan el atributo required) y que tengan un valor correcto, tendrán el borde de
color verde y una sombra interna también verde. Aquellos campos que tienen
valores incorrectos o bien están sin rellenar, siendo obligatorios, tendrán un
borde y una sombra interna de 8 píxeles de color rojo y aquellos campos que
tengan un contenido válido, tendrán tanto el borde como la sombra de color azul.
:invalid{:
Aunque -juntamente con el selector anterior- también se explicará con mucha

más extensión al final del tema 'Formularios', este selector indica los atributos
que tienen que aplicarse a los elementos de un formulario que no hayan sido
correctamente introducidos o que siendo obligatorios no hayan sido rellenados.
CSS que afectan al texto
52
Los textos afectados por el código CSS de los siguientes ejemplos irán ubicados
dentro de un <div> o <span>, excepto en los casos en los que se indique lo
contrario (como por ejemplo utilizando 'text-align').
Color del texto:
Cambia el color del texto.

Se puede especificar con el código hexadecimal del color (utilizando el prefijo #) o
con el nombre de color (olive, gold, chocolate...).
color: #1162ac;
color: chocolate;
Tipografía
Utiliza una tipografía determinada. Si la fuente no es de sistema se debe añadir el

fichero ttf/otf y realizar una vinculación con la misma.
Tamaño del texto:
Define el tamaño del texto. Se puede definir con un tamaño fijo (expresado en
píxeles: px), o con un tamaño escalable (em), que indica la proporción respecto al
tamaño inicial de la fuente (2em equivale al doble del tamaño inicial).
Estilo 'negrita':
53
Define con CSS el estilo 'negrita' de un texto.
Aunque el estilo 'negrita' se puede especificar con código HTML a través de la
etiqueta <b>, con CSS también podemos utilizar esta propiedad de una manera
mucho más eficiente.
Sombra de un texto:
Define una sombra que afecta a un texto a través de 4 parámetros (separación

horizontal, separación vertical, suavidad y color).
El color se puede especificar con código hexadecimal o con el nombre del color
(olive, gold, silver...)
Alineación de un texto:
Para definir la alineación de un texto, este debe estar contenido dentro de una
caja (<div>, <section>...) Los valores pueden ser 'left', 'right', 'center' o ' justify'.
Centrado vertical:
Sirve para definir la altura de la línea donde se muestra un texto y por lo tanto
para centrarlo verticalmente.
El texto sólo puede ocupar una única línea y debe estar contenido dentro de un
<div>.
54
Espacio entre letras:
Define el espacio entre letras.

Un valor positivo las aleja entre ellas, mientras que un valor negativo las acerca.
Espacio entre palabras:
Define el espacio entre palabras.

Un valor positivo las aleja entre ellas, mientras que un valor negativo las acerca.
CSS que afecta a las cajas (<div>)
Color de fondo:
Define el color de fondo de una caja (o <div>)

Se puede indicar un color hexadecimal, nombre de color o rgb+a (alpha), donde
el 4º valor es la cantidad de transparencia (del 0 al 1).
55
Separación interna:
Define el espacio existente entre el contenido y el borde de la caja.

Si se especifica un solo valor será utilizado para la separación por los 4 lados. Si se
especifican 4 valores serán utilizados en orden (arriba, derecha, abajo e
izquierda) y se especifican 2 serán utilizados (arriba/abajo y derecha/izquierda).
Márgenes y separación:
Define el espacio existente entre cajas (<div>) o bien entre cajas y los márgenes
de la página.
Si se especifica un solo valor será utilizado para la separación por 4 lados. Si se
especifican 4 valores serán utilizados en orden (arriba, derecha, abajo e
izquierda) y se especifican 2 serán utilizados (arriba/abajo y derecha/izquierda).
56
Posicionamiento:
Para ubicar un (<div>) en una coordenada concreta antes se tiene que definir su
posicionamiento (position). Posteriormente, para indicar sus coordenadas se
puede utilizar left o right para alinearlo horizontalmente desde la izquierda o
derecha y/o top o bottom para alinearlo desde la parte superior o inferior.
57
Sombras:
Para definir una sombra a un (<div>) se deben indicar 4 valores. El primero y

segundo es la separación horizontal y vertical de la sombra (con un número
positivo se desplaza hacia derecha/abajo y con uno negativo hacia la
izquierda/arriba, mientras que con "0" se sitúa justo en la posición del texto). El
tercer valor hace referencia a la suavidad del borde de la sombra, mientras que el
último valor pertenece al color que tendrá la sombra.
Alinear (a la derecha):
Para poder colocar diferentes <div> alineados en la misma linea podemos

utilizar display:inline-block o float:left o right;.
En este último caso, deberemos también definir la anchura de cada caja.
Para evitar que el <div> que sigue en el HTML al último se coloque en el hueco
vacio dejado en la línea anterior utilizamos clear:both;
58
CSS que afecta a los enlaces:
Eliminar subrayado:
Elimina el subrayado que aparece por defecto en cualquier enlace.

Es necesario utilizar el selector a{. Utilizado sin indicar ningún elemento afectará
a todos los enlaces. Utilizando #div a{ afectará únicamente a los enlaces que se
encuentran dentro de la caja con id="div".
Colores:
Para definir el color que debe tener el enlace cuando el cursor pase por
encima es necesario utilizar el evento :hover, detrás del selector a.
Cursor:
Es posible definir un tipo de cursor (dentro de los existentes). Aunque los más
habituales son "pointer" (el que aparece por defecto al crear un enlace) o
59
"default" (el cursor habitual de la flecha), que en este caso aparece cuando el
cursor pasa por encima del siguiente enlace de ejemplo.
Ejemplo:
Modifica el formato de los enlaces
Este ejercicio hace referencia a la maquetación de los enlaces, que están dentro
de una lista no ordenada (<ul>).
Así, dentro del fichero estilos.css debes añadir el código CSS correspondiente
para:
1. Eliminar las viñetas (círculos) que aparecen por defecto delante de cada enlace.
2. Colocar todos los enlaces (<li>) en la misma línea.
3. Dejar espacio a los lados de cada enlace (para que respiren un poco).
4. Centrar horizontalmente cada enlace dentro de su espacio interno.
5. Eliminar la sangría o margen izquierdo que aparece por defecto al crear una lista.
Después de conseguir los puntos anteriores:
1. Cambiar el color por defecto de los enlaces (define un color, por ejemplo
naranja).
2. Eliminar el subrayado que aparece por defecto de los enlaces.
3. Definimos un tamaño algo mayor (20px).
4. Al pasar el cursor por encima el color de los enlaces cambia a blanco.
Por último, debes maquetar el primer elemento de la lista "¿Quiénes somos?"
para que no funcione como enlace (ya que el html que estamos
creando 'index.html' ya es el apartado de "¿Quiénes somos?), de tal manera que:
1. El color inicial de este primer elemento sea de un color diferente (por ejemplo
'silver').
2. El tamaño debe ser el mismo que los otros dos elementos (20px).
3. Al pasar el cursor por encima no debe aparece el cursor 'de la mano' (pointer).
Solución:
60
Lo primero que haremos con CSS es:
 Eliminar las viñetas (redondas) que hay delante de cada enlace.
 Poner todos los enlaces seguidos en la misma línea.
 Que quede espacio a los lados de cada enlace (para que no estén pegados).
 Centrar horizontalmente el enlace.
 Eliminar el margen (sangría) que hay por defecto a la izquierda de una lista.
Para entender el código hay que comprender perfectamente la estructura que

tenemos:
 Existen 3 elementos, cada uno de ellos es un <li>.

 Los 3 <li> están dentro de un <ul>.
 Y el <ul> está dentro de una caja de tipo <nav>
El selector 'nav li{' es el que indica que las propiedades que le siguen sólo
afectarán a los <li> que estén dentro de cualquier <nav>.
 list-style:none; elimina las viñetas (circulos negros) de cada uno de los
tres <li>.
 display:inline-block; lo que hace es poner todos los elementos <li> en la
misma línea (inline) pero al mismo tiempo los mantiene como bloques
(cajas).
 padding:4px 70px; sirve para dejar un espacio vacío dentro de la caja de
cada <li> de 4 píxeles por arriba y abajo y 70 por la derecha e izquierda.
 text-align:center; centra horizontalmente el texto del enlace.
 background-color:gray; Provisionalmente colocamos un fondo gris,
únicamente para poder visualizar el área de cada uno de los tres <li>.
61
Pero para eliminar la sangría (o espacio vacío) que por defecto deja cualquier lista
a su izquierda, tenemos que modificar el padding de la propia lista <ul> (no de
cada uno de los <li>).
Cambiar el color y el subrayado de los enlaces
Los enlaces por defecto son azules y están subrayados. Vamos a hacer que
tengan otro color y que no estén subrayados.
Como es una característica que tiene que afectar a todos los ficheros html que
iremos creando, este selector CSS lo vamos a crear en estilos.css.
a{ es el selector CSS que indica a QUÉ ELEMENTOS van a afectar las propiedades que
siguen. Así, en este caso a apunta a todos los enlaces que contenga la página.
 text-decoration:none; es una propiedad CSS que elimina el subrayado de los
enlaces y que por lo tanto únicamente funciona cuando va dentro de un
selector a{.
 olor:orange; es una propiedad CSS que cambia el color de los enlaces, en este
caso a naranja.
 font-size:20px; es una propiedad CSS que cambia el tamaño de la fuente de los
enlaces, en este caso a un tamaño de 20 píxeles.
62
Cambiar el color de los enlaces al pasar el cursor por encima
a:hover{ es el selector CSS que indica a qué elementos van a afectar las propiedades
que siguen, pero SÓLO cuando el cursor del ratón pase por encima de un
enlace (:hover).
En este caso, cuando el cursor pase por encima de un enlace, éste se coloreará de
blanco.
Modificar el primer 'enlace'
En realidad el primer <li> no es un enlace (ya que no está encerrado entre <a
href..> y </a>) y por lo tanto no le afectan las propiedades del selector a{.
Por ello el texto sigue teniendo el color negro habitual y un tamaño más pequeño.
Vamos a poner el primer elemento de color gris/plata y del mismo tamaño que los otros
dos enlaces.
63
El selector 'nav{' afecta al texto que contenga la caja <nav>. En este caso, el único
texto que hay es '¿Quiénes somos?, ya que 'Servicios' y 'Contacto' son enlaces (no
textos).
Modificar el cursor del 'enlace no activo'
Cuando el usuario pasa con el cursor sobre '¿Quiénes somos?', como NO es un enlace,
el cursor se transforma en el de 'seleccionar texto'.
Vamos a cambiar este cursor por el habitual; el de la flecha blanca.
 nav:hover{ afecta al contenido de la caja <nav>, mientras que <:hover> indica

qué únicamente se aplicará el CSS cuando el cursor se sitúe encima.
 cursor:default; cambia el tipo de cursor por el habitual.
Resultado:
https://www.html6.es/final7e.html
Ejemplo:
1. Todo el contenido propio de la página (excluyendo <header>, <nav> y <footer>)

deben estar centrados en la página.
2. Los apartados <header>, <nav> y <footer> no se deben ver afectados.
Solución:
En vez de configurar nuestro body{ añadiéndole con CSS una anchura (width) y un
margen horizontal centrado, vamos a dejarlo en blanco y vamos a configurar una
64
caja (div/section/article...) que va a contener todo el contenido que queremos
centrar en la página.
En nuestro ejemplo esta gran caja contenedora es un <section> que tenemos

entre el </nav> y el <footer>, por lo que lo único que tenemos que hacer es
ponerle como nombre (de id) contenido.
Como puedes ver, el <section...> se abre justo después de cerrar el </nav> (que
es justamente donde empieza el contenido propio de la página)...
Se cierra </section> (casi al final de la página), justo antes de abrir el <footer>,

osea cuando acaba el contenido.
Ahora que la caja ya existe, tenemos que maquetar esta gran caja para que tenga
una anchura determinada y se centre horizontalmente en la anchura de la
página. Para ello añadiremos este selector CSS, en el fichero externo estilos.css.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Quiénes somos</title>
<link rel=stylesheet href="css/estilos.css" type="text/css"/>
<style type="text/css">
</style>
</head>
<body>
<header>
<img src="img/logo.png" align="center">
65
Aprende jugando, S.L.
</header>
<nav>
<ul>
<li><img src="img/icono1.png" align="top"><p>
Quiénes somos</li>
<a href="servicios.html">Servicios</a></li>
<a href="contacto.html">Contacto/a></li>
</ul>
</nav>
<section id="contenido">
<div>
<h2>Quiénes somos</h2>
</div>
<article>
<div>
<img src="img/imagen1.png">
</div>
<h3>Con vocación educativa</h3>
Somos una empresa compuesta por <b>maestros, pedagogos,
guionistas y especialistas en las nuevas tecnologías</b>
aplicadas a la educación para ofrecerle los mejores
servicios.
<p>
Anteponemos la educación a la tecnología.
</article>
<article>
<div>
</div>
<h3>Con larga experiencia</h3>
Llevamos <b>desde 1998</b> ofreciendo propuestas
66
diferentes y acciones educativas concretas a escenarios
diversos.
<p>
Diseñamos una solución educativa creativa a su problema
cotidiano.
</article>
<article>
<div>
</div>
<h3>Con entusiasmo y motivación</h3>
La <b>motivación</b> y el <b>entusiasmo personal</b>
mueve montañas y es lo que nos hace diferentes. El
disfrutar por lo que hacemos nos distingue.
<p>
Pruébenos una vez y se convencerá para siempre.
</article>
</section>
<footer>
<h5>
©2015. Aprende jugando, S.L.<br>
c/ del Álamo rojo, 1, local. Barcelona.
</h5>
</footer>
</body>
</html>
Resultado:
https://www.html6.es/final8.html
Creación de un favicon
67
Un favicon es el icono que se muestra en la pestaña del navegador o bien en las
búsquedas de Internet.
Existen dos maneras de utilizar un favicon:
 Un icono que identifica a todas las webs que contiene un dominio.

 Un icono que identifica a algunas páginas web en concreto.
Pero en ambos casos, lo primero que hay que hacer es crear el icono.
Crear el icono:
Para la creación de un favicon se deben tener en cuenta 2 requisitos básicos:

 El tamaño del icono tiene que ser de 16x16 píxeles.
 Debe tener un máximo de 256 colores.
Para conseguir estas dos características lo más conveniente es crear un fichero

con Photoshop con un lienzo de 16x16 píxeles (a 72ppp) y grabar el fichero con
formato GIF o con PNG-8 para que restringa los colores a un máximo de 256
colores.
Para convertir este fichero a formato .ico podemos utilizar un servicio gratuito de
la web favicon.cc https://www.favicon.cc/ siguiendo estos tres pasos:
68
Si se quiere utilizar para todas las páginas del servidor no hace falta utilizar
ningún código, basta con colocar el fichero .ico en la carpeta raíz del servidor.
Si por el contrario se quiere utilizar el icono en una sola página, ir variando,
utilizando diferentes iconos o bien si el icono no se llama 'favicon.ico' o está
ubicado en otra carpeta se debe añadir un código dentro del <head>
En el texto que está coloreado de color rojo se debe indicar la ruta donde se
encuentra el icono, partiendo siempre desde la carpeta donde está ubicado el
html que contiene este código.
Bordes redondeados(CSS3)
Líneas separadoras horizontales
Existen dos formas para crear una línea separadora horizontal y una única forma
para crear una línea separadora vertical.
Para crear una línea horizontal la forma fácil y rápida es utilizar la etiqueta <hr>,
que no se cierra y que crea una línea horizontal simple.
<hr>:
69
Esta etiqueta admite algunas características CSS como el grosor de la línea
(border-width), la anchura (width), el color (border-color) o el tipo de línea
(border-style).
Para representar la línea azul punteada que hay sobre este párrafo es necesario
tanto la etiqueta html como las declaraciones CSS:
En este ejemplo el selector CSS (hr{) hace referencia a todas las líneas (<hr>) de la
página. En el caso de querer hacer referencia únicamente a una, la etiqueta <hr>
tendría que tener un id para poder identificarla (<hr id="linea1">) y el selector
CSS sería: #linea1 hr{
Líneas separadoras verticales
Para crear líneas verticales tenemos que definir uno de los 4 bordes que tiene
una caja (<div>), utilizando una (o varias) de estas propiedades:
Bordes simples
Para poder indicar un borde determinado con un color y un grosor concreto para
un <div>, dentro del código CSS, utilizamos la propiedad 'border', que utiliza el
siguiente formato:
70
En este ejemplo, el valor '2px establece el grosor del borde en 2 píxeles, el valor
'solid' especifica el tipo de borde, mientras que finalmente se indica el color, ya
sea utilizando el nombre de color, o bien el código de color en hexadecimal
(anteponiendo el símbolo #).
En lo referente a los tipos de bordes existen las siguientes posibilidades:
Bordes redondeados
Con la propiedad border-radius tenemos la posibilidad de crear <div> con las

esquinas con bordes redondeados, pudiendo especificar la suavidad de las
esquinas de manera conjunta o cada una de las esquinas por separado.
Para poder visualizar una esquina con borde redondeado, además de la

propiedad border-radius, tenemos que definir un borde normal (con border) y/o
indicar un color de fondo (con background-color).
71
Con estas dos líneas de código CSS practicamente no podemos apreciar ninguna
esquina redondeada, ya que como el div no tiene contenido y no hemos definido
la altura del <div id="apartado1"> el navegador establece una altura de 0 píxeles.
Para solucionarlo, vamos a añadir las dimensiones que tendrá este <div> para
poder apreciar los bordes redondeados:
Con 'width' y 'height' definimos el tamaño del <div> que tiene como id el nombre
"apartado1". En este ejemplo se ha definido una anchura de 300 píxeles por 100
px de alto (el tamaño se podría especificar también en porcentaje, sustituyendo
'px' por '%').
Utilizando 'border' indicamos un borde de un grosor de 3 píxeles, con una línea
contínua sólida de color marrón [brown] (el color también podría especificarse en
código hexadecimal).
Por último, con 'border-radius' especificamos que la suavidad de las 4 esquinas
sea de 22 píxeles (el valor 0 correspondería a una esquina totalmente recta).
Si queremos indicar diferentes valores para cada una de las esquinas, tendríamos
que especificar los 4 valores en el siguiente orden:
 1º: esquina superior/izquierda
 2º: superior/derecha
 3º: inferior/derecha
 4º: inferior/izquierda.
72
Si únicamente queremos establecer la suavidad de una sola esquina tenemos la
posibilidad de definir por separado la suavidad de cada una de las esquinas, utilizando
uno de los siguientes propiedades:
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
Ejemplo:
Sigue las siguientes instrucciones, utilizando el archivo 'estilos.css':

1. Los tres <article> tienen que utilizar el mismo selector CSS (tendrás que añadir el
mismo nombre de clase a cada uno de los <article>).
2. Modifica la anchura general de cada uno de los <article>.
3. Las imágenes tendrán que tener un id y un class independiente para poder
girarlas en el próximo módulo.
4. Añade un borde y un borde redondeado que cubra tanto la imagen como el texto
que lo acompaña.
5. Crea una línea horizontal sencilla que los separe.
6. Centra el texto.
7. Aplica una separación (interna) entre el texto y el borde que acabas de crear.
Solución:
Creación de cajas con bordes y bordes redondeados:
Vamos a configurar los 3 <article> para que tengan un aspecto como el del
ejemplo:
 Los bordes externos son ligeramente curvos en sus 4 esquinas.
 Este mismo perímetro tiene un borde gris.
73
 Debajo de 'Con entusiasmo y motivación ' incluímos una línea horizontal (<hr>).
Para hacer estos cambios a los 3 <article> a la vez vamos a ponerles el mismo
nombre de clase (class) para que el selector CSS afecte a todos y un nombre id
sólo al <article> central (ya que en el temas posteriores le daremos unas
propiedades particulares).
Con este cambio todavía no podemos apreciar ningún cambio ya que nos falta el
CSS correspondiente.
Vamos a configurar las cajas de tipo <article>, que para mayor seguridad les
hemos dado un nombre de clase (class="cuadros").
El selector '.cuadros{ ' incluye a todas las cajas que tiene un class="cuadros", que
en este caso son tres.
width:240px; limita la anchura de cada uno de los cuadros, de tal manera que los
3 <article> puedan posteriormente caber (ya que todavía no se alinearán).
border:1px lightgray solid crea una línea que rodea cada <article> de 1 píxel de
grosor, de color gris suave y de tipo sólido.
border-radius:3px; indica la curvatura de las 4 esquinas exteriores a 3 píxeles.
background-color:white; coloca un fondo de color blanco.
text-align=center; centra todo el contenido (incluyendo la imagen).
padding:5px 5px 22px 5px; deja un margen interno de píxeles de 5 píxeles
(excepto para la parte inferior, que es de 22 píxeles).
74
Resultado:
https://www.html6.es/final9.html
75

guia

Cargado por

Copyright:

Formatos disponibles

guia

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

guia

Cargado por

Copyright:

Formatos disponibles

GUIA “ELEMENTOS SOFTWARE WEB”

Un hipertexto es un texto común, con la funcionalidad adicional de poder relacionarse

HTML (del inglés, HyperText Markup Languaje) es un lenguaje para preparar

Dentro de estas etiquetas style ubicaremos el código CSS

Dentro de la caja <header> ubicamos el contenido que estaría destinado al encabezado

La caja <footer> contiene la información que figura al pie de la página (normalmente es

Las cajas <section> contienen el contenido genérico de la página.

Las cajas <article> también están destinadas a contener el contenido de la

Aunque <figure> no tiene las mismas funcionalidades ni características que el resto de

El ejemplo de este tema se basa en la resolución de estos puntos:

1. Crear un archivo HTML con formato UTF-8.

 La etiqueta de apertura: Consiste en el nombre del elemento (en este

Los elementos se pueden colocar dentro de otros elementos. Esto se

<p>Mi gato es <strong>muy</strong> gruñón.</p>

<p>Mi gato es <strong>muy gruñón.</p></strong>

Salto de línea <br>:

Los párrafos se indican con la etiqueta <p>.

Sangría <dd> </dd>:

Negritas y cursivas <b> </b> <i> </i>:

Encabezados <h1>, <h2>, <h3>, <h4>, <h5>, <h6>:

El ejemplo de este tema se basa en rellenar de contenido el archivo index.html creado

Imágenes, listas y enlaces

Para añadir una imagen basta con añadir el siguiente código:

Es necesario y obligatorio especificar la ruta para que el navegador pueda encontrar la

Imágenes y CSS (responsive design):

De manera predefinida delante de cada línea de la lista se coloca

Por último, también es posible utilizar de manera conjunta los

Tenemos la posibilidad de sustituir las viñetas predeterminadas (círculos o cuadros) por

Normalmente el texto y la viñeta (círculo o cuadrado) de cada elemento de la lista

Podemos encontrar 6 tipos de enlaces:

Enlazar con paginas HTML propias hechas por nosotros:

Enlazar una parte interna de nuestro HTML:

Enlazar con páginas HTML de terceros:

Enlazar con un correo electrónico:

Aunque el mejor método para poder enviar un correo electrónico es a través de un

Enlazar con ficheros pdf, jpg, gif, png, svg:

El navegador puede abrir un gran número de extensión de ficheros. Así, si enlazamos

Enlazar con ficheros comprimidos para descargar:

Imágenes como enlace:

CSS exclusivo para enlaces:

Si -por ejemplo- queremos tener el siguiente enlace de color naranja:

El siguiente código CSS sería totalmente erróneo:

Por último, si queremos que:

Dos modos de utilización:

Esta es una de las opciones más comunes, ya que posteriormente es posible

En el código anterior, el fichero CSS se llamaría estilos.css y estaría ubicado en

Dentro del fichero estilos.css tendríamos el siguiente contenido:

Incluir el código CSS dentro del HTML:

Las propiedades CSS más utilizadas:

Tipos de propiedades CSS:

Aunque, antes de hacer un repaso rápido a todas ellas es de obligado cumplimiento

¿Qué son los Selectores CSS?

Múltiples tipos de selectores

Si queremos abarcar el máximo número de navegadores sin vivir añadiéndo

2. Copiamos las fuentes que vayamos a utilizar (ficheros ttf/eot):

Como en este ejemplo vamos a añadir 2 tipografías distintas tenemos que

El nombre que indicamos con el atributo 'font-family' (en el ejemplo superior:

Los selectores que empiezan directamente con el nombre de alguna de las

También podemos encontrar indicaciones a estructuras tradicionales de html en

Cuando un selector acaba en '(espacio) + a' (independientemente de cómo