MÓDULO INTENSIFICACIÓN

LABORATORIO DE APLICACIONES

Introducción al diseño web

Qué es Internet y cómo funciona la web

Los comienzos de Internet se remontan a la puesta en marcha de la red ARPANET, en el año 1969
como parte de un experimento de la Agencia de Proyectos de Investigación Avanzada del Departamento de
Defensa de los EE.UU.
El objetivo de este proyecto era permitir que investigadores que se encontraban en lugares distantes
pudieran comunicarse mediante la red para compartir información y permitirles que colaboren mutuamente
en sus trabajos a pesar de las distancias.
Por esos años el acceso a ARPANET era sólo para militares, empresas y universidades vinculadas a trabajos de
defensa. Con el tiempo, distintas organizaciones científicas y educativas conectaron redes a ARPANET, esto
hizo que para finales de la década del 70 ya existiera una importante cantidad de redes interconectadas con
alcance nacional e internacional.
En 1983 una nueva red comienza a reemplazar a ARPANET, con la ventaja de no tener ningún tipo de
restricciones, asegurando el acceso totalmente público. Esta nueva red, llamada NSFNET, comienza a crecer
rápidamente en cantidad de computadoras conectadas. Para 1990 ARPANET deja de funcionar y se
desmantela.
Durante los años siguientes, la cantidad de computadoras que se agregaba a la red aumentó
vertiginosamente; redes de todas partes del mundo se sumaron a las redes existentes dándole forma a la que
conocemos actualmente como Internet o simplemente Web.

Internet es una red de redes. Miles de computadoras se encuentran interconectadas en todo el mundo
permitiendo el acceso a todo tipo de información. Todas estas computadoras se comunican entre ellos
mediante una serie de protocolos, destacando actualmente el http, que posibilita la transmisión de páginas
web. Otros protocolos son los de correo, transmisión de archivos (ftp), mensajería instantánea, etc.
Centrándonos en la web, ésta se compone de documentos que pueden enlazarse entre sí mediante
hiperenlaces. Estos documentos se basan en el formato HTML, y han experimentado muchas mejoras que
redundan en unos documentos más sofisticados y consistentes.
Estos documentos se almacenan en una computadora (servidor), que luego sirve a otras computadoras
(clientes). Una vez transferido el documento, éste se visualiza en un navegador web, como Chrome, Mozilla
Firefox, Safari, Opera, Microsoft Edge, Vivaldi, entre otros.
Digamos que si se quiere visitar el sitio Web del museo del Louvre. Primero se escribe la dirección o
URL del sitio web en el explorador de Web. Entonces el explorador de Web solicita la página Web del
servidor que alberga el sitio del Louvre. El servidor envía de vuelta los datos a su computadora a través de
Internet. El explorador de Web interpreta los datos, mostrándolos en la pantalla de la computadora.
El "pegamento" que mantiene cohesionada la Web se llama hipertexto e hipervínculos. Este elemento es el
que permite vincular los archivos electrónicos en la Web, de forma que pueda saltar fácilmente de unos a
otros, es decir, es un elemento de un documento electrónico que hace referencia a otro recurso, como por
ejemplo un punto específico de un documento o de otro documento. En la Web, se navega a través de
páginas de información – es lo comúnmente conocido como navegar – conforme a lo que interese en un
 determinado momento. Para acceder a la Web se necesita de un navegador Web.
Las páginas Web están escritas en un lenguaje llamado Lenguaje de Marcación de Hipertexto o HTML (del
inglés HyperText Markup Language), en la que se definen una serie de marcadores y propiedades. El
estándar HTML está delimitado por el W3C (World Wide Consortium).

Relación del desarrollo web con el diseño gráfico

El desarrollo web es un término amplio que define la creación de sitios web para la World Wide Web
(www).
La web se relaciona con el diseño gráfico desde el principio, ya que básicamente se trata de presentar
información de forma estructurada. No obstante, tiene algunas diferencias importantes:

•​ Es un medio más efímero que el impreso

•​ Todo el mundo no lo percibe igual (prueba una página en diferentes navegadores y plataformas para
comprobarlo...)
•​ Ofrece un acceso inmediato a la información
•​ Tiene posibilidades multimedia (vídeo, gráficos y sonido)
•​ Responde de forma dinámica a las acciones del visitante
•​ No permite aL desarrollador un control absoluto de la experiencia visual
La web es mejor cuanto más delgada y sencilla es. Si el objetivo es transmitir información, ¿para qué
complicar las cosas? lo mejor es que el visitante encuentre rápido lo que busca.
Al estudio de la facilidad de uso se lo conoce como "usabilidad", y a la estructuración de la información como
"arquitectura de la información". Son nombres que pueden sonar exagerados y artificiales, pero lo que hay
detrás son conceptos básicos en el buen diseño gráfico.
Por supuesto, también hay sitio para los artistas, para el diseño recargado y excesivo, para la
experimentación: pero como todo, eso es algo que debería hacerse una vez asumidas unas técnicas básicas
correctas, y en casos concretos de páginas de experimentación.

Algunas convenciones y limitaciones

A la hora de escribir páginas web, nos encontraremos con una serie de limitaciones. La primera son
los protocolos y los diferentes lenguajes (por ejemplo, XHTML o CSS).
Otra limitación importante es el ancho de banda, el caudal de datos disponible; esto es, no todas las personas
que se conectan a Internet lo hacen a la misma velocidad. Así que tenemos que hacer páginas lo más ligeras
posible, si no queremos que nuestras páginas demoren en visualizarse (si una página tarda en cargar, te
cansás y te vas a otro lado).
Las páginas web son archivos que deben ser visualizados en navegadores y no todos los navegadores
visualizan las páginas de la misma manera. A esto se añade que cada vez más usuarios se conectan a Internet
a través de otros dispositivos que no son computadoras (móviles, tablets, etc); Las páginas puede que no se
visualicen de la misma manera en estos dispositivos.

¿Y cómo se mejora esto?

•​ Escribiendo código limpio, que ocupe el mínimo espacio posible

•​ Utilizando CSS
•​ Empleando el mínimo de imágenes posibles, y lo más optimizadas que sea posible (que ocupen poco
espacio)

1
 •​ Páginas web responsive

Una web responsive permite detectar el ancho de la pantalla y, por consiguiente, redimensionar y colocar los
distintos elementos que conforman la web, con el objeto de ofrecer la mejor experiencia de usuario posible,
así como una visualización óptima.

El resto de las consideraciones son las mismas que en el diseño gráfico tradicional: estructurar bien el texto,
distribuir el contenido, es decir, situar la información o los accesos a ella en lugares fáciles de ver, usar bien
los colores, componer de forma interesante.
La estética de una página tiene que ver con la maquetación, los colores, la distribución de los elementos, tipo
de letra, etc. Todo esto debe estar en función de los contenidos, del tipo de usuario al que va dirigida la
página, del tipo de sitio web al que pertenece, etc. La página debe resultar atractiva para el usuario, de forma
que su diseño esté en concordancia con los contenidos.

La importancia de los estándares abiertos

En 1994 se creó el W3C (World Wíde Web Consortium) para desarrollar tecnologías para Internet de
forma conjunta, propiciando así la interoperabilidad de las páginas entre las diferentes plataformas y
navegadores. En este consorcio están presentes empresas como Adobe, Microsoft, Netscape o Macromedia,
representantes de instituciones académicas, etc.
No obstante, en la época de la "guerra de navegadores" entre Netscape Navigator contra Internet Explorer
(año 1997-2000), ninguno de éstos pesos pesados hacía mucho caso al W3C, resolviendo las necesidades de
presentación mediante tecnologías propietarias y cerradas que eran incompatibles entre sí. Se llegó a un
punto en el que los profesionales del diseño web tenían que elegir si programar para un navegador u otro, o
bien programar dos veces la misma página, una vez para cada navegador, con un perjuicio evidente para el
usuario de las páginas.
La progresiva adopción de las tecnologías estándar abiertas por parte de los fabricantes de navegadores ha
facilitado mucho la tarea de los desarrolladores web, pudiendo hacer una página que se vea correctamente
(o casi) en muchos navegadores y dispositivos distintos. Por eso es importante seguir los estándares: porque
hacen más fácil nuestro trabajo y nos permiten sacarle más partido.
Cuando un documento HTML cumple con el estándar del W3C, tanto en las etiquetas que usa como en que
éstas estén correctamente usadas, se dice que es un "documento bien formado". Dado que una página web
puede ser muy compleja, existen programas que automáticamente chequean que una página cumpla con el
estándar.

Los diferentes tipos de página

Todas las páginas web no sirven al mismo propósito, así, podemos dividir las páginas en tres grandes
grupos:
Las páginas institucionales tienen el deber de servir a un grupo de personas, por lo general, diverso y de
características variadas. Por ejemplo, las páginas de un Estado o de un municipio. En un país o en una ciudad
hay personas que utilizan diversas formas de acceder a internet, diversos navegadores... incluso, hay
navegadores para personas ciegas. De forma que hay que preparar muy bien la información para que lo
realmente importante llegue a todos los usuarios.
En el caso de las páginas comerciales o corporativas, la información es importante, pero la presentación
también: se trata de negocios que buscan vender productos o servicios, por lo que, al mismo tiempo que
presentan la información de forma clara, deben hacerlo de forma atractiva. Es en este entorno en el que
suelen usarse tecnologías de animación y multimedia para enriquecer el contenido. Para este tipo de sitios
también es muy importante conocer las preferencias del usuario al que está dirigido: no es lo mismo hacer un
sitio para adolescentes que para egresados de doctorados.
En cuanto a las páginas personales, hay una gran variedad ya que pueden pertenecer tanto a principiantes
como a auténticos expertos. Son una forma muy interesante de experimentar y mejorar ya que no están

2
sujetas a las presiones que tienen las páginas institucionales y las comerciales. Precisamente por esa
experimentación, las páginas personales dan vida a internet.

La separación de contenido y presentación

La distinción entre contenido y presentación es muy importante: por más que un sitio sea vistoso, no
tendrá visitantes si no tiene contenido y si este no es renovado periódicamente. A su vez, por más interesante
que sea nuestro contenido, si no está bien presentado, es engorroso de navegar y es difícil encontrar la
información que buscamos, será evitado por los navegantes.
El contenido es la información en forma de texto que alberga la página y que es la base de la misma. Esta
parte debe ser accesible con el más rudimentario de los sistemas de navegación por Internet, y para ello
usaremos el lenguaje HTML. Pueden considerarse también contenido las imágenes, siempre que acompañen
al texto y no sean un mero adorno.
La presentación debe basarse en las hojas de estilo en cascada CSS (Cascading Style Sheets). Durante la
segunda parte de los años noventa los diferentes fabricantes de navegadores incorporaron parches al
lenguaje HTML para presentar letras de diferentes colores, tamaños, tipografías... pero cargaban
excesivamente el código y daban problemas. Las hojas de estilo permiten un control más cómodo y sencillo
de la presentación, y son compatibles con los diferentes navegadores actuales.
Además de estos elementos, tenemos extensiones como javascript, perl, php, ... son diferentes formas de
añadir posibilidades a las páginas mediante pequeños programas que se ejecutan bien en la computadora del
visitante (javascript, …), bien en la computadora que sirve las páginas (perl, php...).
También están las extensiones multimedia, como Quicktime, Real, etc, que proporcionan vídeo, audio e
interactividad, pero al ser tecnologías propietarias requieren de entornos de desarrollo de pago, de forma
que serán usadas sobre todo en páginas corporativas.

Diferencia entre página web y sitio web

Página web: Es un documento electrónico digital que puede contener elementos de texto, imágenes, vídeos,
multimedia, enlaces, formularios, etc. Además una página web posee una URL o comúnmente llamado link.
Sitio web: Es un conjunto de páginas web, que están organizadas y estructuradas de tal manera que sea
navegable, usable y estético para los usuarios y/o los motores de búsqueda. Además un sitio web tiene un
nombre de dominio que es único en todo internet.

Actividad

1-​ Realizar una breve reseña de cómo y cuándo surge Internet.

2-​ ¿Qué es Internet y cómo se le suele llamar?
3-​ ¿Qué tipos de documentos componen la web?
4-​ ¿Qué es un hipervínculo?
5-​ ¿Cómo hace su navegador para distinguir entre páginas Web y otros tipos de datos que hay en
Internet?
6-​ Nombrar las limitaciones y convenciones de las páginas web.
7-​ ¿Qué es el W3C y cuál es su propósito?
8-​ ¿Qué es un sitio web responsive?
9- ¿Qué tipo de páginas web existen? Explicar cada tipo.
10- Indicar la diferencia entre página web y sitio web.

3
Introducción a HTML
Qué es HTML

El HTML (Hyper Text Markup Language o "Lenguaje para Marcado de Hipertexto") es el lenguaje con
el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir
texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada
elemento del documento.

●​ Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos,
etc., por lo que el resultado puede considerarse como un documento multimedia.
●​ Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los
navegadores web.
●​ Para crear un archivo HTML solo hace falta un editor de texto. Un archivo HTML está compuesto por
etiquetas. Las etiquetas le dicen al navegador (Ej: Firefox, Chrome, Opera, etc.) como mostrar la
página.
●​ Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los
usuarios las páginas web resultantes del código interpretado.

Los navegadores. Compatibilidad

Como hemos dicho, el navegador instalado en la computadora del usuario es el que interpreta el
código HTML de la página que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma
página de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del
mismo navegador.

Los navegadores tienen que ser compatibles con la última versión HTML para poder interpretar el mayor
número posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretendía
la etiqueta no queda reflejado en la página.

Para realizar las extensiones de estos navegadores se añaden nuevos atributos a las etiquetas ya existentes, o
se añaden nuevas etiquetas.

Como resultado a estas extensiones, habrá páginas cuyo código podrá ser interpretado completamente por
todos los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la última
versión de HTML, solo podrán ser interpretadas en su totalidad en los navegadores más actualizados.

En este último caso también puede ocurrir que alguna etiqueta de la página solamente pueda ser
interpretada por un navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo que
nunca sería visualizada en su totalidad por ningún navegador.

Uno de los retos de los diseñadores de páginas web es hacer las páginas más atractivas utilizando toda la
potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que el
mayor número de internautas vean sus páginas tal como las ha diseñado.

Etiquetas (en inglés: tags)

Las etiquetas o tags marcan y delimitan cada uno de los elementos que componen un documento
HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.

La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el identificador o
nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas
propiedades. Su sintaxis es:

4
<identificador atributo1 atributo2 ...>

Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor
propio del usuario, o valores HTML predefinidos.

La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el identificador o nombre
de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador>

Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su correspondiente
etiqueta de cierre, a excepción de algunos elementos que no necesitan etiqueta de cierre. También es posible
anidar etiquetas, es decir, insertar etiquetas entre otras

Reglas básicas

●​ Las etiquetas están encerradas entre los signos "<" y ">".

●​ Generalmente vienen en pares <p> y <⁄p>.
●​ La primera es de apertura y la segunda de cierre.
●​ El texto que se encuentra entre dos etiquetas es el contenido del elemento.
●​ Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea <b> es lo mismo que <B>.

HTML 5

HTML5 es la actualización de HTML, el lenguaje en el que está creada la web. HTML5 también es un
término de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y
nuevas capacidades de Javascript.

Estructura de una página web en HTML 5

<!DOCTYPE html>
<html>
<head>
​ ……..
</head>
<body>
​ ​ …….
</body>
</html>
Doctype
El Doctype o “Declaración del tipo de documento” es una instrucción especial que va al inicio de
nuestro documento HTML y que permite al navegador entender qué versión de HTML estamos utilizando. Esta
información determinará la manera en la que el navegador procesará el documento, un DOCTYPE distinto
podría implicar hasta una visualización diferente del sitio web dentro del mismo navegador.
En el caso de HTML5, el DOCTYPE a emplear es el siguiente: <!DOCTYPE html>
Este es más simple de recordar con respecto a los DOCTYPE de las versiones anteriores de HTML.

Seguidamente se encuentra la etiqueta <html> que especifica el principio y </html> el fin del
documento HTML, entre las etiquetas de principio y fin del documento se ubican las etiquetas
correspondientes al encabezado <head> y cuerpo del documento <body>
Entre las etiquetas <html> y </html> estará comprendido el resto del código HTML de la página.

Ejemplo 1
5
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Ejemplo 1</title>
</head>
<body>
<header>
Este es el encabezado del Ejemplo 1
</header>
<div id="main">
<p>Hola mundo</p>
</div>
<footer>
Este es el pie de página del Ejemplo 1
</footer>
</body>
</html>

Ejemplo 2

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Ejemplo 2</title>
</head>
< body>
<header>
Este es el encabezado del Ejemplo 2
</header>
<div id="main">
<p>Hola mundo</p>
</div>
<footer>
​ ​ ​ Este es el pie de página del Ejemplo 2
</footer>
</body>
</html>

Ambos documentos poseen los mismos elementos HTML; sin embargo, el elemento “header” y
“footer” pertenecen a HTML5, por lo cual en el primer ejemplo no generan ningún error. En el segundo
ejemplo, el DOCTYPE fue declarado para la versión 4 de HTML, por lo que no reconoce estos elementos y
genera errores.

En conclusión, la declaración del DOCTYPE es importante para indicar al navegador la versión de

HTML que está utilizando el sitio web. Por eso, siempre debemos escribirla al inicio de nuestros documentos
y de manera correcta.

6
Cabecera de la página <head>

La cabecera de la página se utiliza para agrupar información sobre ella, como puede ser el
título. Está formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la
etiqueta
<html>.

Por ejemplo:
<!DOCTYPE html>
<html>
<head>
…
</head>
<body>
…
</body>
</html>

Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y más se utilizan son:
<link>, <style>, <script> (estas etiquetas las veremos más adelante), <meta> y la etiqueta <title> que te
explicamos a continuación.

Título de la página <title>

El título de la página es el que aparecerá en la parte superior de la ventana del navegador (en la barra
de título), cuando la página esté cargada en él.
Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas <title> y
</title>. Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>.

Por ejemplo:

<!DOCTYPE html>
<head>
<title>
​ ​ ……..
</title>
</head>
...
</html>

Declarando el conjunto de caracteres con el <meta charset>

7
 Algo que se hace en una página web suele ser indicar el conjunto de caracteres que se va a utilizar.
Sintaxis:
<meta charset="UTF-8">
Se coloca después de su <head>, ya que algunos navegadores reinician el análisis de un documento HTML si
el conjunto de caracteres declarado es diferente de lo que habían previsto.

Codificación de caracteres… ¿Por qué usar charset UTF-8?

El español es un lenguaje que por suerte o por desgracia posee caracteres especiales tales como
tildes, ñ, diéresis (ü), etc... Esto en HTML es un problema, pues no hay forma de mostrarlo más que con
entidades HTML (códigos especiales que muestran estos caracteres).
Por ejemplo:
á​ &aacute;
é​ &eacute;
í​ &iacute;
ó​ &oacute;
ñ​ &ntilde

8
Una forma de "estandarizar" la visualización de este tipo de caracteres sin tener que escribir constantemente
las entidades HTML que las definen es utilizar una codificación de caracteres.
Se entiende por codificación de una página Web a la tabla de caracteres que es utilizada en ella. Una tabla de
caracteres es una lista de caracteres válidos; por ejemplo, una página en español necesita disponer de todas
las letras del abecedario (incluida la ñ) así como tildes, interrogaciones, exclamaciones y demás caracteres
característicos del idioma.
Al declarar una codificación en nuestra página web estamos, por decirlo de alguna manera, diciéndole al
navegador cómo debe interpretar estos caracteres especiales que componen el texto; por lo que
internamente el navegador hará las sustituciones de los caracteres especiales por las entidades HTML
correspondientes de forma automática.
En resumen, nos permite escribir con total normalidad en nuestro documento HTML sin preocuparnos de las
tildes, interrogaciones y demás caracteres especiales del lenguaje.

Cuerpo del documento <body>

El cuerpo del documento contiene la información propia del documento, es decir lo que queremos
que se visualice, el texto de la página, las imágenes, los formularios, etc. Todos estos elementos tienen que
encontrarse entre las etiquetas <body> y </body>, que van justo debajo de la cabecera.
Por ejemplo:

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>
Laboratorio de Aplicaciones – HTML
</title>
</head>
<body>
…....
</body>
</html>

Ejemplo 3 - ¡Realizar prueba en VS!

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title> Mi primera página Web en 4to año para Laboratorio de Aplicaciones </title>
</head>
<body>
Hola a todos.
</body>
</html>

Guardá el archivo como "pagina1.html" (las extensiones ".htm" o ".html" tienen el mismo significado y nos
indican que se trata de un archivo HTML).

9
Ejemplo 4 - ¡Realizar prueba en VS!

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Una página Web</title>
</head>
<body>
Hola a todos. <b>Este texto es en negrita</b>
</body>
</html>

Esta es una etiqueta HTML:​ <b>Este texto es en negrita.</b>

El elemento de HTML comienza con la etiqueta de apertura <b> (etiqueta que nos mostrará el texto en
negrita). El contenido de dicho elemento es: Este texto es en negrita. El fin del elemento HTML es con la
etiqueta de cierre </b>.

Actividad
1.​ Indicar la extensión que debe tener un documento HTML
2.​ ¿Cuál es la función del navegador?
3.​ ¿A qué se denomina etiqueta en HTML y cuál es su sintaxis?
4.​ Indicar las reglas básicas para el uso de etiquetas.
5.​ ¿A qué se denomina HTML 5?
6.​ Escribir la estructura básica de una página en HTML.
7.​ ¿A qué se denomina Doctype?
8.​ ¿Por qué usar charset UTF-8, dónde se declara y cuál es su sintaxis?
9.​ Abrir Visual Studio Code y escribir los ejemplos 1 y 2, guardar como Ejemplo1.html y Ejemplo2.html
respectivamente. Luego ejecutar.
10.​Escribir los ejemplos 3 y 4 en Visual Studio Code. Luego ejecutar.

10
Practica introductoria al HTML​

ETIQUETAS SEMÁNTICAS PARA TEXTO

• <a> Etiqueta utilizada para crear hipervínculos en el documento HTML </a>

• <strong> Etiqueta para definir una palabra o conjunto de ellas como importantes </strong>

• <small> Utilizada para dejar un comentario aparte, del tipo una nota de derechos de autoría </small>

•  Etiquetas utilizadas para representar un subíndice o superíndice 

• <mark> Usada para resaltar texto</mark>

•<b> Texto en negrita </b>

•<i> Texto en cursiva</i>

•<ins> Texto subrayado </ins>

•<del> Texto tachado </del>

• <br>Etiqueta utilizada para crear un salto de línea

ETIQUETAS PARA LA AGRUPACIÓN DE CONTENIDO

• <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
Son etiquetas HTML muy importantes, ya que son usadas para jerarquizar el contenido de la web. Las
etiquetas se usan para los títulos, subtítulos, etc.

• <p> Etiqueta usada para escribir párrafos de texto </p>

• <ol > Etiquetas para crear una lista ordenada </ol>

• <ul> Etiquetas para crear una lista des-ordenada </ul>

• <li> Etiquetas que recogen el contenido de un elemento de una lista, sea ordenada o n </li>

• <hr> Etiqueta utilizada para “romper” entre dos secciones de una web. Usada comúnmente como
separador.(Línea horizontal)

• <blockquote> Se usan para indicar que el contenido es texto citado</blockquote> (Sangria)

11
ETIQUETAS PARA INCRUSTAR CONTENIDO

• <img>
Etiqueta para agregar una imagen en la página web.

• <embed> Usada para integrar una aplicación o contenido interactivo externo que no suele ser HTML.

• <video> Se usa para reproducir video en la página web junto a sus archivos de audio. </video>

• <audio> Usada para cargar un archivo de audio o stream de audio </audio>

• <source> Permite a autores especificar recursos multimedia alternativos para las etiquetas de <video> o
<audio>

• <svg> Se usa para llamar a una imagen vectorizada. </svg>

Atributos en HTML

Los atributos son propiedades o características que se puede asignar a un objeto (elemento).
Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML.
●​ Los atributos siempre van con la estructura del tipo: nombre ="valor".
●​ Los atributos siempre van en la etiqueta de apertura.
●​ Los valores siempre hay que ponerlos entre comillas.

Estilos HTML

El atributo style de HTML se usa para agregar estilos a un elemento, como color, fuente, tamaño y más.
Ejemplo:​

Soy rojo, Soy azul, Soy grande

El atributo de estilo en HTML

La configuración del estilo de un elemento HTML se puede hacer con el atributo style.
El atributo style en HTML tiene la siguiente sintaxis: <nombre-etiqueta style="propiedad: valor;">
La propiedad es una propiedad o característica CSS que más adelante vamos a utilizar. El valor es un valor
propio del elemento en CSS.

Propiedades

Color de fondo: Background-color propiedad CSS que define el color de fondo de un elemento
HTML.
Ejercicio 1: Establecer el color de fondo de una página.​

<body style="background-color: powderblue;">

<h1>Este es un encabezado</h1>
<p>Este es un párrafo</p>
</body>

12
Ejercicio 2: Establecer el color de fondo para dos elementos diferentes.​

<body>
<h1 style="background-color:powderblue;">Este es un encabezado</h1>
<p style="background-color:tomato;">Este es un párrafo.</p>
</body>

Color de texto: La propiedad color define el color del texto de un elemento HTML.

Ejercicio 3:​

<h1 style="color:blue;">Este es un encabezado en color azul</h1>

<p style="color:red;">Este es un párrafo en color rojo.</p>

Fuentes: La propiedad font-family define la fuente que se utilizará para un elemento HTML:

Ejercicio 4:​

<h1 style="font-family:verdana;">Este es un encabezado con un tipo de fuente</h1>

<p style="font-family:courier;">Este es un párrafo con otro tipo de fuente.</p>

Tamaño del texto: La propiedad font-size define el tamaño del texto de un elemento HTML:

Ejercicio 5:​
<h1 style="font-size:300%;">Este es un encabezado</h1>
<p style="font-size:160%;">Este es un párrafo.</p>

Alineación del texto: La propiedad CSS text-align define la alineación horizontal del texto para
un elemento HTML:

Ejercicio 6:​
<h1 style="text-align:center;">Encabezado centrado</h1>
<p style="text-align:center; color: blue;">Párrafo centrado.</p> <!--párrafo con 2 estilos-->

Organizar texto de una página: Salto de línea con br

<body>
Esto debería ser una línea de texto.
Y esto debería ser otra.
</body>

El resultado desconcierta bastante, sobre todo cuando uno está acostumbrado a trabajar, por ejemplo,
con procesadores de texto, donde las líneas de texto se quedan (casi siempre) donde uno las coloca.
13
 Esto se debe a que los navegadores no reconocen un salto de línea o ENTER, a no ser que se lo
indiquemos. Para ello se usa la etiqueta <br>. Esta etiqueta no recibe ningún atributo. No existe </br>
ya que esta etiqueta ejecuta una acción puntual (el salto de línea).

Ejercicio 7: Vamos a modificar el código anterior:​

<body>
Esto debería ser una línea de texto.<br>
Y esto debería ser otra.
</body>

Si se necesita más líneas para separar el texto, se introducen más saltos de línea en el código. Ejemplo:
Esto debería ser una línea de texto.<br><br><br><br>
Y esto debería ser otra.
Como hemos visto, da lo mismo que pongamos el texto en una línea o en varias. Si no insertamos los
saltos de línea, todo el texto saldrá en la misma línea.

​ Formato de texto HTML: existen contiene varios elementos para definir texto con un
significado especial.

Elementos de formato HTML

Estos son solo algunos ejemplos de lo que podemos hacer con estos elementos. Para ello utilizamos las
siguientes etiquetas:
Código Resultado
<b>Texto en negrita</b> Texto en negrita Texto normal
<big>Texto más grande</big> Texto más grande Texto
<i>Texto en itálica</i> (cursiva) normal Texto en itálica Texto
<small>Texto más pequeño</small> normal
_{Texto subíndice} Texto más pequeño Texto
^{Texto superíndice} normal Texto subíndice
<ins>Texto subrayado</ins> Texto normal
<del>Texto tachado</del> Texto superíndice
Texto normal
Texto subrayado Texto
normal Texto tachado
Texto normal

14
Ejercicio 8: realizar los ejemplos en visual studio y buscar si existen todos estos ejemplos de estilo de
formato pero con el atributo style de CSS.

Sangría en el texto: <blockquote>

La sangría es una especie de margen que se establece a ambos lados del texto. Para que un texto aparezca
sangrado, se inserta entre las etiquetas <blockquote> y </blockquote>.
Esta etiqueta en un principio se definió para delimitar citas pero que como la mayoría de los navegadores
resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se ha generalizado.
El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva línea.
Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los márgenes sean
mayores.
Por ejemplo, para insertar el texto:

Queridos usuarios,
tengo el placer de comunicarles que hay una nueva sección. Escribimos:

Queridos usuarios,
<blockquote>
<blockquote>
tengo el placer de comunicarles que hay una nueva seccion
</blockquote>
</blockquote>

Ejercicio 9: dejar sangría en un texto como se muestra en la siguiente imagen:​

Comentarios en HTML
La etiqueta <!-- ... --> se utiliza para insertar un comentario dentro del código que estamos escribiendo. El
mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor
el código y son de gran ayuda en el momento que necesitemos editarlo.

<!-- Esto es un comentario. -->

* Nota: el signo de exclamación se coloca solo al principio del código.

Ejercicio 10: practicar varios conceptos y crear el siguiente sitio:

1)​ La página deberá contener el siguiente título: “Mi primer sitio web” e incluir tus datos personales,
hobbies, deportes, etc.
2)​ Debe contener un color de fondo a su gusto.
3)​ Debe contener encabezado tipo h1 para el título, centrado, en h2, por ejemplo, los subtítulos: “Datos
personales, Hobbies, Deportes, etc”.
4)​ Los datos personales deben estar agregados con párrafos <p> y alineados en forma diferente (derecha
centro e izquierda)
5)​ Agregar saltos de línea dobles entre cada dato personal o párrafo.
6)​ Todo el texto de la página deberá presentarse con una fuente distinta de la fuente por defecto. Por
ejemplo "Verdana".
7)​ Agregar una línea horizontal como la que se muestra abajo:

Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un
grosor determinado por nosotros. La etiqueta para crear esa línea es <hr>. Al contrario que muchas etiquetas
HTML, ésta no necesita ser cerrada. Sintaxis: <hr>. Algunos atributos de la línea horizontal:

Atributo Significado Posibles valores

size alto de la línea un valor numérico
width ancho de la línea un número acompañado de %
color color de la línea Nombre del color o su correspondiente hexadecimal
align alineación de la línea dentro de la página left (izquierda) // right (derecha) // center (centro)
noshade eliminar el sombreado de la línea no toma valores
 Colores en HTML: Los colores se especifican con nombres de colores predefinidos o con valores
RGB, HEX, HSL, RGBA o HSLA.

Nombres de colores

En HTML, se puede especificar un color mediante el uso de un nombre de color:

Tomate Tomato
Naranja Orange
Cian DodgerBlue
Verde Mar MediumSeaGreen
Gris Gray
Azul Pizarra SlateBlue
Violeta Violet
Gris claro LightGray

Color de fondo
Se puede establecer el color de fondo de los elementos HTML:
​
Ejercicio 11: aplicar color de fondo​

<h1 style="background-color:DodgerBlue;">Hola Mundo</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>

17
Color de texto
Se puede establecer el color del texto:

Ejercicio 12: aplicar color de texto​

<h1 style="color:Tomato;">Hola Mundo</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Hola Mundo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud ejercicio ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.

Color del borde

​

Se puede establecer el color de los bordes:

Ejercicio 13: aplicar color de borde​

<h1 style="border:2px solid Tomato;"> Hola Mundo </h1>

<h1 style="border:2px solid DodgerBlue;"> Hola Mundo </h1>
<h1 style="border:2px solid Violet;"> Hola Mundo </h1>

Hola Mundo

18
Valores de color
​

En HTML, los colores también se pueden especificar utilizando valores RGB, valores HEX, valores HSL (HSL significa
tono, saturación y luminosidad), valores RGBA y valores HSLA.

19
Ejercicio 14: Realizar cada una de las páginas web como las que se muestran abajo. Presta atención a los
detalles de cada una.​

A.​

B.​ Supongamos que estamos creando una página web de matemática. Es posible que se tenga que utilizar
algunos subíndices y superíndices para representar determinadas fórmulas como se muestra a
continuación.

20
Hipervínculos e Imágenes
HIPERVÍNCULOS O ENLACES EN HTML. ETIQUETA <A>

Los enlaces o hipervínculos, también llamados hipertextos son los textos o los objetos sobre los que
podemos hacer clic para que nos lleven a otra parte del documento, a otra página web en el mismo sitio o a
otra página de Internet, entre otras funciones.
Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en su navegador web, se abrirá
o se ejecutará, en función del tipo de destino. El destino es con frecuencia otra página web, pero también
puede ser una imagen, un archivo multimedia, un documento de Microsoft Office, un documento PDF, una
dirección de correo electrónico o un programa.
Por tanto, con los hipervínculos podemos establecer “saltos” desde una página a otra, incluso a puntos
concretos dentro de páginas con contenidos extensos. Los hipervínculos pueden asociarse a imágenes o a
textos de modo que haciendo clic sobre ellos con el botón izquierdo del ratón se accede automáticamente al
destino asociado a ellos.

HIPERVÍNCULOS EXTERNOS. ATRIBUTO HREF.

Un hipervínculo externo es un vínculo a otro sitio web en Internet (sitio externo). Es un vínculo a
cualquier otro lugar fuera del sitio actual. Cuando ponemos un vínculo externo, escribimos la dirección
completa de la página incluido http://www.... Estas rutas que incluyen http://... las denominamos rutas
absolutas. Por ejemplo, <a href="http://www.google.com">Acceder a la página web google.com</a>

En el hipervínculo distinguimos las siguientes partes:

- Las etiquetas de apertura y cierre del hipervínculo <a> y </a>

- El atributo href, con un valor que se indica con el símbolo igual y la URL a la que dirige el hipervínculo dentro
de las comillas.

- Texto que ve el usuario como link.

EL ATRIBUTO TITLE PARA HIPERVÍNCULOS

Debemos tener en cuenta que es muy aconsejable poner un atributo extra cada vez que pongamos un
hipervínculo en nuestras páginas. Este atributo es title y con el pondremos título a nuestro hipervínculo. Con
esto conseguiremos en la mayoría de los navegadores un efecto de ‘tool-tip’ que consiste en que cuando
ponemos el cursor encima del hipervínculo nos aparezca una información adicional que es la que hayamos
puesto en el atributo title

<html>​ ​
<head>​
<title>Ejemplo del uso de marcadores </title>​
</head>​
<body>
<a href=" http://www.google.com" title= " Esto es un tool.tip">Ir a Google.com</a>.
</body>​
</html>

21
DESTINO DEL HIPERVÍNCULO. ATRIBUTO TARGET

Cuando creamos un vínculo, por defecto el navegador abrirá la página web destino en la misma
ventana, pero podemos pedirle al navegador que la abra “aparte”, es decir, en otra ventana. Esto es útil por
ejemplo si queremos abrir una página externa a nuestro sitio, pero sin que el visitante pierda la nuestra. Para
ello utilizaremos el atributo target con alguna de las siguientes opciones.

Valores de target más habituales:

• _blank: Abre el documento vinculado en una ventana nueva del navegador.

• _self: Es la opción predeterminada o por defecto. Abre el documento vinculado en el mismo marco o
ventana que el vínculo.

Ejemplo:

<a href="http://www.google.com" target=" _blank">Ir a google.com en una nueva ventana</a>

Ejercicio 1-
a) Realizar un ejercicio que contenga el siguiente código:
<a href= http://www.google.com title= "Esto es un tool tip">Ir a Google.com</a>
<p style="text-align: center;">
<b><a href="http://www.youtube.com" target="_blank">Visita nuestro canal de Youtube. </a></b>
</p>

Con este código estarás insertando un enlace a www.youtube.com que será abierto en una nueva ventana
(target="_blank"). En este caso hemos utilizado una referencia absoluta.

HIPERVINCULOS PARA ENVIO DE MAIL: utilizamos la propiedad mailto para crear un vínculo para envió de
correo electrónico.

<a href="mailto: [email protected]"> Enviar Mail</a>

HIPERVÍNCULOS LOCALES, MARCADORES O ANCLAS.

Los hipervínculos locales o marcadores son enlaces dentro de la misma página. Es decir, al hacer clic en
uno de ellos nos llevará a una posición distinta dentro de la misma página que estamos visualizando.

Esta técnica hace que los usuarios accedan de una manera más rápida a la información.

Para crear este tipo de enlaces hay que hacer dos operaciones:

●​ Establecer marcadores (anclas) a lo largo de la página (son los lugares a los que queremos saltar con los
enlaces).

●​ Poner enlaces que salten a los marcadores.

22
Ejercicio 2- Enlaces internos. Supongamos una página que contiene tantos contenidos que no caben en la
pantalla, para lo cual se necesita usar la barra de desplazamiento, por lo general al llegar al final se encuentra
una frase con aspecto de enlace que permite volver al principio. De la misma forma, podrían existir otros
enlaces similares para desplazarnos, por ejemplo, a la mitad o al final de la página.

Copiar el siguiente código y ejecutarlo:

<html>
<head>
<title>Uso de enlaces</title>
</head>
<body >
<a id = "comienzo"><h1 style="color: aqua;" >Esto es el principio de la página. </h1></a>
<p>
Esto es un texto para rellenar.<br>
Esto es un texto para rellenar.<br>
Esto es un texto para rellenar.<br>
Esto es un texto para rellenar.<br>
Esto es un texto para rellenar.<br>
Esto es un texto para rellenar.<br>
Esto es un texto para rellenar.<br>
Esto es un texto para rellenar.<br>
Esto es un texto para rellenar.<br>
Esto es un texto para rellenar.<br>
Esto es un texto para rellenar.<br>
Esto es un texto para rellenar.<br>
Esto es un texto para rellenar. <br>
Esto es un texto para rellenar. <br>
Esto es un texto para rellenar. <br>
Esto es un texto para rellenar. <br>
Esto es un texto para rellenar.<br>
Esto es un texto para rellenar.<br>
</p>
<a href = "#comienzo">Volver al principio</a> ( Con # hace referencia o llama al id= comienzo)
</body>
</html>

Ejercicio 3- Confeccionar una página principal (index.html) con dos hipervínculos a las páginas pagina1.html y
pagina2.html. Luego en las dos páginas secundarias disponer hipervínculos a la página principal.

Página Index.html:

Esto es una prueba de hipervínculos

Ir a la primera página

Ir a la segunda página

23
Página Página1.html:

Esto es una prueba de hipervínculos

Esta es la primera página de contenidos

Volver a la página principal

Página Página2.html:

Esto es una prueba de hipervínculos

Esta es la segunda página de contenidos

Volver a la página principal

IMÁGENES EN HTML

Hasta ahora hemos visto lo que podemos hacer con texto en una página web.
Ahora vamos empezar con el uso de imágenes. Lo primero que necesitamos saber es qué tipos
de imágenes podemos emplear en Internet.
Atendiendo a la forma en que se ha creado una imagen, ésta puede ser vectorial o de mapa de
bits. Las imágenes vectoriales dan como resultado una mayor calidad, así como independencia de la
resolución del monitor en el que se visualizan. Son imágenes que se generan a partir del uso de
aplicaciones profesionales. Básicamente consisten en lo siguiente: si hay que dibujar, por ejemplo, una
línea recta, se toman como referencias los puntos de comienzo y final de la línea y, mediante el empleo
de fórmulas matemáticas, se traza la línea. Decimos, por lo tanto, que la característica más llamativa de
una imagen vectorial es que no pierde calidad al escalarla (técnicamente se dice que no se pixela).
Por el contrario, una imagen de mapa de bits es más fácil de elaborar. Se puede generar con
cualquier aplicación gráfica, por sencilla que ésta sea (algunas gratuitas, aunque muy rudimentarias).
Son, por ejemplo, las imágenes que obtenemos al digitalizar una fotografía con un escáner, o a partir de
cámaras digitales, o de teléfonos móviles. Las imágenes de mapa de bits se crean partiendo de la base de
una parrilla de píxeles en la pantalla. Cada uno de esos píxeles puede estar activado o desactivado, con
un determinado color. El problema de este tipo de imágenes es que pixelan al escalarlas. La ventaja que
tienen, aparte de ser más fáciles de crear, es que también se implementan con mayor facilidad en un
documento web.

Trazo vectorial​ Trazo de mapa de bits

A la hora de incluir imágenes en una página, se debe tener en cuenta una premisa básica. Las
imágenes se almacenan en archivos que deben publicarse en el servidor, igual que la página, y
permanecen físicamente allí. Cuando el usuario se conecta a su página, además de descargar el código
HTML que genera la página en su navegador, se descargan también las imágenes necesarias. Por lo
tanto, es importante optimizar estos archivos de imagen para obtener el menor tamaño final posible.

24
 Imágenes en el fondo de la página
Uno de los recursos más empleados en el diseño de páginas web es colocar una imagen de
fondo. Para ello se añade el atributo background al tag <body>, pasándole como valor el nombre del
archivo que contiene la imagen deseada. Supongamos que tenemos un archivo de imagen llamado
ejemplo1.gif. Lo primero que hay que comprobar es el peso de la imagen.

Ejercicio 4- Vamos a escribir el código, guardarlo como imagen_fondo.html y luego, ejecutar.

<html>
<head>
<title>Uso de imágenes</title>
</head>
<body style="background-image: url(Imagenes/colores.jpg);">

</body>
</html>

Ejercicio 5

<html>
<head>
<title>Uso de imágenes</title>
</head>
<body style=background-image:url(Imagenes/fondo.jpeg)>
<h1> Este es un texto</h1>
Este texto está sobre una imagen
de fondo M u y discreta y
adecuada. <br>
El resultado final es aceptable.
</body>
</html>

Imágenes contenidas en la página

Hemos visto cómo insertar una imagen como fondo de la página, ahora insertaremos imágenes
como contenido de nuestras páginas. Para esto se emplea la etiqueta <img >, esta etiqueta no tiene
cierre hace una llamada a un archivo de imagen, a través del atributo obligatorio src (source u origen en
castellano).

Ejercicio 6

<html>
<head>
​ <title>Uso de imágenes</title>
</head>
<body> A continuación, insertaremos una imagen en la
página<br>
<img src="Imagenes/images.jpg" /> <br>
</body> Encima de esto hay una imagen.
</html>

25
Tamaño de las imágenes: Ancho y Alto.

Sus valores están dados en pixeles o puntos de pantalla. Los atributos son: style= width y height,
que significan ancho y alto respectivamente (se declaran en la etiqueta img).
Bordes: La manera de controlar el borde es usar el atributo, BORDER, que debe ser usado dentro de la
etiqueta img con su tamaño, estilo y color. (style= border: 5px solid red)

Alineación de imágenes utilizando etiquetas antiguas:

<center></center>: imagen con alineación centrada.

Para las siguientes alineaciones de texto el mismo no debe estar dentro de
otras etiquetas como la de párrafo <p>.
align=” top”: Alineación superior del texto respecto de la imagen.
align=” middle”: Alineación del texto en el medio de la imagen.
align=” botton”: Alineación inferior del texto respecto de la imagen
align=” left”: la imagen se sitúa a la izquierda de la página.
align=” right”: la imagen se sitúa a la derecha de la página.

* Es importante entender bien el significado de estas etiquetas para usarlas adecuadamente, vamos a
explicar más detenidamente cómo reacciona un navegador cuando se encuentra una imagen alineada a
la izquierda o derecha entre un párrafo de texto: en primer lugar, se pasa a la siguiente línea y se inserta
la imagen, alineada, a la derecha o a la izquierda. Después si el navegador se encuentra con más texto y
queda sitio en la línea anterior a la imagen lo rellena con ese texto, cuando se acabe la línea seguirá
mostrando el texto en las líneas sucesivas, rodeando la imagen.

Como terminar el texto envolvente: Usando el atributo clear en la etiqueta br se puede terminar el texto
envolvente y seguir escribiendo debajo de la imagen. Ejemplo: <br clear=” left”> o <br clear=” right”>
Atributo alt: Es un atributo de la etiqueta img que permite especificar un texto alternativo que será
mostrado por algunos navegadores (ejemplo, Internet Explorer) en caso de que la imagen no pueda ser
visualizada. Ese texto será introducido entre comillas como valor del atributo alt.

Ejemplo 7- Escribir el siguiente código, guardar como “insertar_imagen2.html”, luego ejecutar.

<html>
<head>
<title>Uso de imágenes</title>
<head/>
<body>
<p>A continuación, insertaremos una imagen centrada en la página</p> <br >
<center><img src="Imagenes/images.jpg" style="width: 258px; height: 195px; border: 5px solid red;">
</center><br>
<p>Ahora colocamos una imagen alineada a la derecha.</p> <br >
<img src="Imagenes/images.jpg" align="right" style="width: 258px; height: 195px; border: 10px solid
blue;">
<br clear="right">
<p>Encima de este texto hay dos imágenes. </p> <br><br>
<img src="Imagenes/images.jpg" align="middle" style="width: 100px; height: 120px; border: 10px solid
blue;">
Alineación del texto en el medio de la imagen
<br clear="right">
</body>
</html>

26
IMÁGENES COMO ENLACES

Para poner una imagen como enlace basta con crear un enlace y añadir en su interior en lugar de texto,
una imagen. Veamos un ejemplo:

<a href="http://www.google.com">

<img src=”logo_google.jpg” alt="Ir a Google"> </a>

Ejercicio 8- Escribir el código HTML necesario para obtener un documento semejante al que se muestra en
la figura; las imágenes incrustadas deben actuar, además, como enlaces a otras páginas web.

Ejercicio 9- Realizar un sitio web para un club deportivo que contenga la sig. información:
El club
Noti
cias
Dep
orts
Instalaciones

Cada tema (a excepción de Contacto) debe ser un link a una página diferente que contenga un
encabezado e información acorde. Además, debe permitir volver a la página principal. La opción
Contacto debe contener un enlace para el envío de correo electrónico.

Utilizar los conceptos aprendidos (color, fuente, alineación, etc.) para la confección de cada una de las
páginas.

Guardar la página principal como index.html y las demás con un nombre que haga referencia al contenido.

27
Listas en HTML​

CREANDO LISTAS
Listas desordenadas (Unordered List):
Como se sabe toda lista mantiene un orden, ese orden no se expresa de manera unitaria, sino que se realiza
una mera enumeración de los distintos elementos de una lista.
Una lista desordenada se abre con la marca <ul> y debe cerrarse con la marca </ul>. Dentro de este listado,
cada elemento se indica con la marca <li> y no necesita cerrarse, salvo en casos especiales.
La marca <ul> admite el modificador TYPE que especifica el tipo de viñeta a utilizar:

Cuadrado: TYPE=”square”
Círculo: TYPE=”circle”
Disco: TYPE=” disc” (este es el valor por defecto).

Si el modificador TYPE lo colocamos en la etiqueta <ul> se aplicará a todos los elementos de la lista, pero
también puede aplicarse a algunos elementos particulares si lo colocamos en la etiqueta <li>
correspondiente. En ese caso se aplicará SOLAMENTE en el elemento especificado. Esto último no es muy
recomendable, ya que puedo crear listas incomprensibles, pero usado convenientemente nos puede ayudar
a crear jerarquías.

Listas Ordenadas (Ordered List)

Permiten enumerar sus elementos precedidas de algún tipo de ordinal. Tiene una sintaxis parecida a la lista
desordenada, solo que se inician con la etiqueta <ol> y se cierran con </ol>. En vez de seleccionar si
queremos disco, círculo o cuadrado, en este tipo de listas podemos seleccionar el tipo de viñeta que lleve la
cuenta:

Type=”1” números: 1, 2, 3, etc.

Type=”a” letras en minúscula: a, b, c, d, etc.
Type=”A” letras en mayúscula: A, B, C, D, etc.
Type=”I” números romanos en mayúscula: I, II, III, IV, etc.
Type=”i” números romanos en minúscula: i, ii, iii, iv, etc.

El modificador START=”número” se aplica a la etiqueta <ol>, e indica el número a partir del cual queremos
comenzar.
El modificador VALUE es un modificador de <li> e indica el número que tiene que tener un determinado
elemento, y a partir del cual se seguirá contando normalmente.
Los valores de Start y Value siempre serán numéricos, sin importar el tipo de viñeta que utilice la lista.

Lista de definiciones ordenada (Definition List)

La lista de definiciones (indicada por la etiqueta <dl>) no sigue la estructura de los tipos anteriores.
Cada elemento de la lista no utiliza la etiqueta <li> sino que se divide en dos partes, el elemento <dt>, y el
elemento <dd>. El uso de este tipo de listas se relaciona con la definición de palabras, aunque su mayor
utilidad se podría encontrar en dar una serie de vinculaciones a otras páginas o sitios junto a una breve
descripción de los mismos.
<dl> indica el comienzo de la lista y necesita cerrase con </dl>
<dt> “término de la definición” indica la o las palabras que serán descriptas, no se cierra.
<dd> “descripción de la definición” está asociada con la anterior, ya que es el texto descriptivo o explicativo de
lo definido en dt, no se cierra.

28
Ejercicio 1: Copiar el siguiente texto, guardarlo como Listas_1.html y ejecutarlo.
<html>
<head>
<title>Uso de listas</title>
</head>
<body>
<h1>Menú de la casa</h1>
<!-- A continuación comienza la lista -->
<ul>
<p> <li>Tabla de fiambres</li>
<li>Tabla de quesos</li>
<li>Tabla de mar</li> <br>

</p>
<p> <li>Bruscheta de queso, tomate y albahaca</li>
<li>Pizza de muzarella</li>
<li>Pizza especial</li> <br>

</p>

<li>Torta de chocolate</li>
<li>Helado</li>
</ul>
</body>
</html>

Ejercicio 2: Modificar el ejercicio anterior y cambiar el estilo de las viñetas. Guardarlo con el nombre
Lista_2.html.

Ejercicio 3: Obtener un menú como se muestra a continuación y guardar como Lista_numerada.html

29
Ejercicio 4: Copiar el siguiente texto, guardarlo como Listas_de_definición.html y ejecutarlo.

<html>
<head>
<title>Uso de listas</title>
</head>
<body>
<!-- Aquí comienza la lista de definiciones -->
<dl>Nombre de la lista
<dt>Término 1
<dd>Primera definición del término 1
<dd>Segunda definición del término 1
<dd>Tercera definición del término 1
<dt>Término 2
<dd>Primera definición del término 2
<dd>Segunda definición del término 2
<dd>Tercera definición del término 2
<dt>Término 3
<dd>Primera definición del término 3
<dd>Segunda definición del término 3
<dd>Tercera definición del término 3
</dl>
</body>
</html>

Ejercicio 5: Generar una página personal simple que tenga la siguiente estructura. Respetar las diferencias
entre tamaños de fuente e interlineado, guardar como Lintas_combinadas.html

30
Ejercicio 6 – REVISIÓN DE CONTENIDOS

Supongamos que tenemos que crear una página web que contenga un temario técnico, por ejemplo, de
Hardware y Software.

a)​ Diseñar una página utilizando listas que contenga los siguientes ítems y subitems y guardarlo como
Hard_Soft.html.
b)​ Elegir un tema a elección (por ejemplo, Hardware) y desarrollarlo creando hipervínculos a otras
páginas con información acorde.
c)​ Utilizar los conceptos aprendidos (formato de texto y párrafos, propiedades de página, hipervínculos)

Temario: Hardware y Software

Computadora

I.​ HARDWARE
a.​ Componentes electrónicos vitales
b.​ Componentes electrónicos funcionales
c.​ Componentes complementarios necesarios de una computadora
d.​ Unidad Central de Procesamiento: Componentes del Microprocesador
e.​ Memoria Primaria y Memoria Secundaria
f.​ Dispositivos de entrada, dispositivos de salida y dispositivos de entrada-salida

II.​ SOFTWARE
a.​ Programa. Definición
b.​ Clasificación del software
i.​ Software de Sistema: Sistema Operativo
ii.​ Software de Programación. Lenguajes de programación
iii.​ Software de Aplicación: Aplicaciones para el usuario

III.​ TIPOS DE COMPUTADORAS

a.​ Personales
b.​ Servidores y estaciones de trabajo
c.​ Minicomputadoras
d.​ Mainframes
e.​ Supercomputadoras

IV.​ UNIDADES DE MEDIDA

a.​ Almacenamiento
b.​ Frecuencia de ejecución de instrucciones
c.​ Velocidad de transmisión de datos

31
Tablas en HTML

Hoy en día la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar las
opciones de diseño.

Todos los objetos se alinean a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el
texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas
serían imposibles de realizar.
La tabla, además del uso habitual semejante al de este elemento en los procesadores de texto, se usa como
contenedor de las diferentes secciones de nuestra página.

Etiqueta <table>

Las tablas están formadas por celdas, que son los recuadros que se obtienen de la intersección entre una fila y
una columna.

Columna

Imagen y Texto

Fila Celda

Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar
las filas y columnas que formarán la tabla.

Etiqueta <tr> (tr acrónimo de table row o fila de la tabla)

Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas deberán insertarse
entre las etiquetas <table> y </table>.

Por ejemplo, para insertar una tabla con cuatro filas habría que escribir:
<table> <tr> . . . </tr>
<tr> . . . </tr>
<tr> . . . </tr>
<tr> . . . </tr>

</table>

Etiqueta <td> (td acrónimo de table data o dato de la tabla)

Una celda es el resultado de la intersección entre una fila y una columna, por lo que podemos especificar
el número de celdas por fila, que equivale a especificar el número de columnas.

Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas
de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre <tr> y </tr>.

32
Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas. Por ejemplo,
para insertar la siguiente tabla:

Lunes Martes
Laboratorio de Aplicaciones Laboratorio de Programación
Laboratorio de Hardware Laboratorio de Sistemas Operativos

Habría que escribir:

<table border = ”1”>

<tr>
<td>Lunes</td>
<td>Martes</td>
</tr>
<tr>
<td> Laboratorio de Aplicaciones </td>
<td> Laboratorio de Programación </td>
</tr>
<tr>
<td> Laboratorio de Hardware </td>
<td> Laboratorio de Sistemas Operativos </td>
</tr>

Título de la tabla

Es posible establecer un título para la tabla mediante las etiquetas <caption> y </caption>. Estas etiquetas han
de ir después de la etiqueta <table>, y puede especificarse el valor de los atributos align (con los valores
botton, center, left, right y top) y valign (con los valores botton y top).

Por ejemplo, si escribiéramos el siguiente código:

<table>
<caption>Título de la tabla</caption>
<tr>
... <td>Lunes</td>
</tr>

</table>

Título de la tabla
Lunes Martes
Laboratorio de Aplicaciones Laboratorio de Programación
Laboratorio de Hardware Laboratorio de Sistemas Operativos

Combinar celdas

Para las etiquetas <td> existen los atributos colspan y rowspan, que se utilizan para combinar celdas.

33
A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y através
del atributo rowspan se especifica el número de filas por las que se extenderá la celda.
<TD COLSPAN=2> Celda sobre 2 columnas </TD>
<TD ROWSPAN=2> Celda junto a 2 filas </TD>

Para que quede más clarovamos a ver un ejemplo. Para insertar la siguiente tabla:

DIFERENCIAS ETRE EL PERRO Y EL HOMBRE

PERRO
DIFERENCIAS PEQUEÑO GRANDE HOMBRE
Duración crecimiento 10 meses 18 a 24 meses 16 años
Tiempo de gestación 58 a 63 días 9 meses
Duración de vida del pelo/cabello 1 año 2 a 7 años

<body>
<table border="2">
<tr>
<th colspan = "4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th>
</tr>
<tr>
<td rowspan="2">DIFERENCIAS</td>
<td colspan="2">PERRO</td>
<td rowspan="2" valign="bottom">HOMBRE</td>
</tr>
<tr>
<td>Pequeño</td>
<td>Grande</td>
</tr>
<tr>
<td>Duracion crecimiento</td>
<td>10 meses</td>
<td>18 a 24 meses</td>
<td>16 años</td>
</tr>
<tr>
<td>Tiempo de gestacion</td>
<td colspan = "2">58 a 63 días</td>
<td>9 meses</td>
</tr>
<tr>
<td>Duaracion de vida del pelo/cabello</td>
<td colspan = "2">1 año</td>
<td>2 a 7 año</td
</tr>
</table>
</body

34
 Entre los tags <td> y </td> se incluye el contenido que queremos que aparezca en la celda. HTML no
permite crear celdas vacías en una tabla, así que, cuando se quiere que una celda aparezca sin contenidos, se
debe incluir dentro de ella un espacio en blanco, utilizando la secuencia &nbsp;.
El uso de los atributos colspan y rowspan puede resultar algo complicado al principio. Es cuestión de práctica.

Cuidando lapresentación de la Tabla

●​ Grosor de los bordes

<table border=”5”>

●​ Celdasde cabecera. Etiqueta <th>(th esel acrónimo de table heading o encabezado de la tabla)
<tr>
<th>Columna 1</th> <th>Columna 2</th> <th>Columna 3</th>
</tr>
(Nota: Las cabeceras por defecto están centradas)

●​ Alineación dentro de las celdas:

o​ Alineación en sentido vertical
<TD VALIGN=TOP> Arriba </TD>
<TD VALIGN=BOTTOM> Abajo </TD>
o​ Alineación en sentido horizontal
<TD ALIGN=CENTER> Al centro </TD>
<TD ALIGN=RIGHT> A la derecha </TD>
<TH ALIGN=LEFT> Cabecera a la izquierda </TH>

●​ Color de fondo en tablas y celdas

<table border bgcolor="#00FF00">
<td bgcolor="#FF0000">

●​ Imágenes de fondo en tablas y celdas

<table border background="nubes.jpg">
<td background="nubes.jpg>

●​ Separación entre las celdas

<tableborder cellspacing=20>

●​ Separación entre el borde y el contenido de las celdas

<table border cellpadding=20>

●​ Celdas que abarcan a otras

<TD COLSPAN=2> Celda sobre 2 columnas </TD>
<TD ROWSPAN=2> Celda junto a 2 filas </TD>

35
TRABAJO PRÁCTICO – TABLAS EN HTML

1)​ Crear la página del primer punto e ir completando los siguientes puntos en el mismo archivo. Guardar
el archivo como Tabla1.html y visualizar los resultados con el navegador.
Tabla sencilla

Tablas con desigual número de celdas

Contenido de las celdas

36
2)​ Crear un archivo con el nombre tabla2.html. La tabla debe contener como encabezado la palabra TABLA.
Utilizar el siguiente código para definir una tabla de 2 filas y 2 columnas (Observar los atributos utilizados
en la etiqueta table)
<table width="50%" border="4" align="center" >
<tr>
<td>Celda 1</td>
<td>Celda2</td>
</tr>
<tr>
<td>Celda3</td>
<td>Celda4</td>
</tr>
</table>

3)​ Generar el código HTML correspondiente a la siguiente tabla:

Restaurantes

Gastronomía Parrillas y asadores

Bodegas de vino
Productos típicos
Escuelas de hotelería
Cultura Bibliotecas
Museos
Congresos
Ferias de muestras
Ocio Entretenimiento y diversión
Ocio cultural
Excursiones y deportes

4)​ Crear una página que contenga una tabla de borde 3 y de dimensiones 3 x 2. Insertar en la celda de la
primera fila y segunda columna otra tabla de dimensiones 2x2. Antes de comprobar los resultados
introducir un breve texto en cada celda.

37
Formularios en HTML

Un formulario es un elemento que permite recopilar datos introducidos por el usuario. La entrada del
usuario se envía con mayor frecuencia a un servidor para su procesamiento.
Los formularios se utilizan para conocer opiniones, dudas, y otra serie de datos sobre los usuarios, para
introducir pedidos a través de la red, tienen multitud de aplicaciones.

Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables y
botones.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se
consigue mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su
apariencia.

<!-- Un formulario siempre empieza con la etiqueta <form> -->

<form>
<label for="nombre">Nombre:</label><br>
<input type="text" id="nombre" name="nombre"><br>
<label for="apellido">Apellido:</label><br>
<input type="text" id="apellido" name="apellido"><br>
<input type="submit" value="Enviar">
</form>
<!-- Un formulario siempre acaba con la etiqueta </form> -->

Formulario: etiqueta <form>

Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá que insertar
diferentes objetos que formarán el formulario. La etiqueta <form> tiene los siguientes atributos:

​ El atributo id establece el nombre del formulario. A cada formulario se le da un nombre que lo identifique.

​ El atributo action indica una dirección de correo electrónico a la que mandar el formulario, o la dirección
del programa que se encargará de procesar el contenido del formulario.
​ El atributo enctype indica el modo en que será cifrada la información para su envío. Por defecto tiene el
valor application/x-www-form-urlencoded. El valor “text/plain” hace que el formulario se envíe como un
simple texto sin formato.
​ El atributo method indica el método mediante el cual se transferirán las variables del formulario. Su valor
puede ser get o post.

✔​ El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no
sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan
consultas sobre una base de datos.
✔​ El valor post se utiliza cuando si se van a producir cambios, como ocurre cuando el usuario manda
datos que deben ser almacenados en una base de datos. Se recomienda utilizar el valor post.

38
Elementos de formulario
Los elementos de formulario como botones y cuadros de texto también se denominan "campos de
formulario" y "controles de formulario". La mayoría de controles se crean con la etiqueta <input>, por lo
que su definición formal y su lista de atributos es muy extensa:

Etiqueta: <label>
Este elemento se utiliza para establecer el título de cada campo del formulario, es la forma formal de definir
una etiqueta para un control de un formulario HTML.

​ Ejemplo de sintaxis de la etiqueta label:

<label for="nombre">Nombre:</label>
<input type="text" id=" nombre " name=" nombre_usuario">

Nota: for = "id_de_elemento" - Indica el ID del campo del formulario para el que este elemento es su título, en este
ejemplo se asocia con el campo nombre de la etiqueta input.

Etiqueta: <input>
Descripción: Se emplea para insertar un campo o control en un formulario

Atributos propios:

​ type = "text | password | email | checkbox | radio | submit | reset | file | hidden | image | date
| time" - Indica el tipo de control que se incluye en el formulario
​ name = "texto" - Asigna un nombre al control (es imprescindible para que el servidor pueda
procesar el formulario)
​ value = "texto" - Valor inicial del control

​ size = "unidad_de_medida" - Tamaño inicial del control (para los campos de texto y de
password se refiere al número de caracteres, en el resto de controles se refiere a su tamaño
en píxel)
​ maxlength = "numero" - Máximo número de caracteres para los controles de texto y de
password.
​ checked = "checked" - Para los controles checkbox y radiobutton permite indicar qué opción
aparece preseleccionada
​ disabled = "disabled" - El control aparece deshabilitado y su valor no se envía al servidor junto
con el resto de datos.
​ readonly = "readonly" - El contenido del control no se puede modificar.

​ src = "url" - Para el control que permite crear botones con imágenes, indica la URL de la
imagen que se emplea como botón de formulario.
​ alt = "texto" - Descripción del control.
39
 ​ required: Determina si el input tiene que ser rellenado obligatoriamente (required=”required”).

Ejemplos para los controles que se pueden crear con la

etiqueta <input>.
Cuadro de texto
Se trata del elemento más utilizado en los formularios. En el caso más sencillo, se muestra un cuadro de
texto vacío en el que el usuario puede escribir cualquier texto.

​ Ejemplo de etiqueta input (type=”text”)

Código HTML correspondiente al ejemplo anterior:

Nombre <br/>

<input type="text" name="nombre" value="" />

El atributo type diferencia a cada uno de los diez controles que se pueden crear con la etiqueta <input>. Para
los cuadros de texto, su valor es text. El atributo name es el más importante en los campos del formulario. De
hecho, si un campo no incluye el atributo name, sus datos no se envían al servidor. El valor que se indica en el
atributo name es el nombre que utiliza la aplicación del servidor para obtener el valor de este campo de
formulario.
Cuando el usuario pulsa el botón de envío del formulario, el navegador envía los datos a una aplicación del
servidor para que procese la información y genere una respuesta adecuada. En el servidor, la aplicación que
procesa los datos debe obtener en primer lugar toda la información introducida por el usuario. Para ello,
utiliza el valor del atributo name para obtener los datos de cada control del formulario.

Como el valor del atributo name se utiliza en aplicaciones programadas, es esencial no modificar su valor
sin modificar la aplicación y no se deben utilizar caracteres problemáticos en programación (espacios en
blanco, acentos y caracteres como ñ o ç).

El atributo value se emplea para establecer el valor inicial del cuadro de texto. Si se crea un formulario para
insertar datos, los cuadros de texto deberían estar vacíos. Por lo tanto, o no se añade el atributo value o se
incluye con un valor vacío value="". Si por el contrario se crea un formulario para modificar datos, lo lógico es
que se muestren inicialmente los datos guardados en el sistema. En este caso, el atributo value incluirá el
valor que se desea mostrar: <input type="text" name="nombre" value="Juan Pérez" />

Si no se especifica un tamaño, el navegador muestra el cuadro de texto con un tamaño predeterminado. El

atributo size permite establecer el tamaño, en caracteres, con el que se muestra el cuadro de texto. Su uso
es imprescindible en muchos formularios, en los que algunos campos como la dirección deben mostrar más
caracteres de lo normal (<input size="100" ...) y otros campos como el código postal deben mostrar menos
caracteres de lo normal (<input size="4"...).

40
Además de controlar el tamaño con el que se muestra un cuadro de texto, también se puede limitar el
tamaño del texto introducido. El atributo maxlength permite establecer el máximo número de caracteres
que el usuario puede introducir en un cuadro de texto. Su uso es imprescindible para campos como el
código postal, el número de documento y cualquier otro dato con formato predefinido y limitado.

Por último, el atributo readonly permite que el usuario pueda ver los contenidos del cuadro de texto pero
no pueda modificarlos y el atributo disabled deshabilita un cuadro de texto de forma que el usuario no
pueda modificarlo y además, el navegador no envía sus datos al servidor.

Cuadro de contraseña
La única diferencia entre este control y el cuadro de texto normal es que el texto que el usuario escribe en
un cuadro de contraseña no se ve en la pantalla. En su lugar, los navegadores ocultan el texto utilizando
asteriscos o círculos, por lo que es ideal para escribir contraseñas y otros datos sensibles.

​ Ejemplo de etiqueta input (type=password)

Contraseña <br/>

<input type="password" name="contrasena" value="" />

Cambiando el valor del atributo type por password se transforma el cuadro de texto normal en un cuadro
de contraseña. Todos los demás atributos se utilizan de la misma forma y tienen el mismo significado.

Cuadro de búsqueda
​ Ejemplo de etiqueta input (type=search)

Buscar: <input type="search" name="busqueda">

Ingreso de archivos
​ Ejemplo de etiqueta input (type=file)

Cargar archivo: <input type="file" name="archivos">

Cuadro de email
Con solo 2 atributos tenemos colocado en nuestro formulario una etiqueta para email.
​ Ejemplo de etiqueta input (type=email)

Correo Electrónico: <input type="email" name="email">

Si el email introducido no cumple la sintaxis básica de una dirección de correo electrónico saldrán mensajes
automáticos como el siguiente:

41
Comentarios
​ Ejemplo de etiqueta input (type=textarea)

Comentario: <input type="textarea" name="comentario">

Checkbox
Los checkbox o "casillas de verificación" son controles de formulario que permiten al usuario seleccionar y
deseleccionar opciones individualmente. Aunque en ocasiones se muestran varios checkbox juntos, cada
uno de ellos es completamente independiente del resto. Por este motivo, se utilizan cuando el usuario
puede activar y desactivar varias opciones relacionadas pero no excluyentes.

​ Ejemplo de etiqueta input (type=checkbox)

Puestos de trabajo buscados <br/>

<input name="puesto_directivo" type="checkbox" value="direccion"/> Dirección

<input name="puesto_tecnico" type="checkbox" value="tecnico"/> Técnico

<input name="puesto_empleado" type="checkbox" value="empleado"/> Empleado

El valor del atributo type para estos controles de formulario es checkbox. Como se muestra en el ejemplo
anterior, el texto que se encuentra al lado de cada checkbox no se puede establecer mediante ningún
atributo, por lo que es necesario añadirlo manualmente fuera del control del formulario. Si no se añade un
texto al lado de la etiqueta <input /> del checkbox, el usuario sólo ve un pequeño cuadrado sin ninguna
información relativa a la finalidad de ese checkbox.

El valor del atributo value, junto con el valor del atributo name, es la información que llega al servidor
cuando el usuario envía el formulario.

Si se quiere mostrar un checkbox seleccionado por defecto, se utiliza el atributo checked. Si el valor del
atributo es checked, el checkbox se muestra seleccionado. En cualquier otro caso, el checkbox permanece
sin seleccionar. Aunque resulta redundante que el nombre y el valor del atributo sean idénticos, es
obligatorio indicarlo de esta forma porque los atributos en XHTML no pueden tener valores vacíos:

<input type="checkbox" checked="checked" ... /> Checkbox seleccionado por defecto

42
Radio button
Los controles de tipo radiobutton son similares a los controles de tipo checkbox, pero presentan una
diferencia muy importante: son mutuamente excluyentes. Los radiobutton se utilizan cuando el usuario
solamente puede escoger una opción entre las distintas opciones relacionadas que se le presentan. Cada
vez que se selecciona una opción, automáticamente se deselecciona la otra opción que estaba
seleccionaba.

​ Ejemplo de etiqueta input (type=radio)

Sexo <br/>

<input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre

<input type="radio" name="sexo" value="mujer" /> Mujer

El valor del atributo type para estos controles de formulario es radio. El atributo name se emplea para
indicar los radiobutton que están relacionados. Por lo tanto, cuando varios radiobutton tienen el mismo
valor en su atributo name, el navegador sabe que están relacionados y puede deseleccionar una opción del
grupo de radiobutton cuando se seleccione otra opción.

Campos de Selección
Los campos de selección se utilizan para insertar menús y listas desplegables. Para insertar uno de estos
menús o listas es necesario insertar las etiquetas <select> y </select> en un formulario.

El atributo name indica el nombre del menú o lista; será el nombre de la variable que contendrá el
valor seleccionado.

El atributo size indica el número de elementos de la lista que pueden ser visualizados al mismo tiempo,
determina el alto de la lista.

La aparición del atributo multiple indica que el usuario podrá seleccionar varios elementos de la lista al
mismo tiempo, ayudándose de la tecla Ctrl. Este atributo no toma valores.

La aparición del atributo disabled indica que la lista estará desactivada, por lo que el usuario no podrá
seleccionar sus elementos. Este atributo tampoco toma valores.

Cada uno de los elementos de la lista ha de insertarse entre las etiquetas <option> y </option>.

El atributo value indica el valor a enviar si se selecciona el elemento. Si no se especifica este atributo, se
enviará el texto de la opción, que se encuentra entre las etiquetas <option> y </option>.

La aparición del atributo selected indica que el elemento aparecerá seleccionado. Este atributo no toma
valores.
43
 ​ Ejemplo de etiqueta select

Para insertar el menú habría que escribir:

<select name="mascota">

<option selected>— Elige animal —</option>

<option>Perro</option>

<option>Gato</option>

</select>

Otro ejemplo:

<select name="animal” size="3" multiple>

<option selected>—Elige animales—</option>

<option value= "ave">Loro</optíon>

<option >Perro</optíon>

<option >Gato</optíon>

<option >Pez</optíon>

</select>

Datalist:
Nos sirve para autocompletar una selección de datos a partir de una lista. A diferencia del selector (select/)
igualmente se puede escribir lo que uno quiera.

44
Botón de envío de formulario
La mayoría de formularios dispone de un botón para enviar al servidor los datos introducidos por el
usuario:

​ Ejemplo de etiqueta input (type=submit)

<input type="submit" name="buscar" value="Buscar" />

El valor del atributo type para este control de formulario es submit. El navegador se encarga de enviar
automáticamente los datos cuando el usuario hace clic sobre este tipo de botón. El valor del
atributo value es el texto que muestra el botón. Si no se establece el atributo value, el navegador muestra
el texto predefinido: Enviar consulta.

Botón de reseteo del formulario

Aunque su uso era muy popular hace unos años, la mayoría de formularios modernos ya no utilizan este
tipo de botón. Se trata de un botón especial que borra todos los datos introducidos por el usuario y
devuelve el formulario a su estado original:

​ Ejemplo de etiqueta input (type=”reset”)

<input type="reset" name="limpiar" value="Borrar datos del formulario" />

El valor del atributo type para este control de formulario es reset. Cuando el usuario pulsa este botón, el
navegador borra toda la información introducida y muestra el formulario en su estado original. Si el
formulario no contenía originalmente ningún valor, el botón de reset lo vuelve a mostrar vacío. Si el
formulario contenía información, el botón reset vuelve a mostrar la misma información original.

Como es habitual en los botones de formulario, el atributo value permite establecer el texto que muestra el
botón. Si no es utiliza este atributo, el navegador muestra el texto predefinido del botón, que en este caso
es: Restablecer.

45
 Ejemplo de etiqueta date:

Fecha nacimiento: <input type="date" name="cumpleanios" step="1" min="2018-01-01"

max="2018-12- 31" value="2018-01-01">

Explicación el ejemplo:

▪​ ‘min‘: Para que la fecha mínima sea el 1 de enero 2018.

▪​ ‘max‘: Para que la fecha máxima sea el 31 de diciembre 2018.
▪​ ‘value‘: Fecha por defecto el 1 de enero 2018.
▪​ ‘step‘: Para que el avance de los días sea de 1 en 1.

Fecha y hora: <input type="datetime-local" name="fechayhora">

Hora: <input type="time"name="hora">

Actividad
1)​ Abrir Visual Studio Code e ir introduciendo y visualizando en el navegador los diferentes elementos pedidos.
Guardar en una carpeta llamada TP_Formularios el archivo como Ejer1.html.
a)​ Formulario simple

<html>
<head>
<title>Uso de formularios</title>
</head>
<body>
<h1>Pagina con un formulario</h1>​ <br />
<!-- Un formulario siempre empieza con el tag <form> -->
<form id="formulario" action="mailto:[email protected]" method="post">
Teclee su nombre:
<input type="text" name="nombreUsuario" size="20" maxlength="50" />
<br />
<input type="submit" name="botonAceptar" value="Aceptar" />
<input type="reset" id="botonBorrar" value="Borrar" />
</form>
<!-- Un formulario siempre acaba con el tag </form> -->
</body>

46
</html>

b)​ Password: añadir un campo de tipo contraseña

Nota: podrán ser visualizados 8 caracteres en el campo de texto y podrán ser insertados un máximo de 12
caracteres.

c)​ Insertar dentro del formulario el siguiente código correspondiente a un texto multilínea o área de
texto:
Introduzca sus sugerencias o comentarios:
<textarea name="comentarios" rows="6" cols="40">
</textarea>

d)​ Menús: insertar dentro del formulario un elemento que contenga las siguientes opciones:

e)​ Insertar un elemento Checkbox, que se visualice de la siguiente forma:

f)​ Insertar en el formulario el elemento Radio button como se indica:

¿Cuál es su sistema operativo preferido?
<br>
<input type="radio" name="sistemaoperativo" value="W10" checked>Windows 10
<input type="radio" name="sistemaoperativo" value="Mac">Mac
<input type="radio" name="sistemaoperativo" value="Linux">Linux

2)​ Crear el formulario que se muestra a continuación. Guardar con el nombre informacion.html.

47
Funcionamiento de las hojas de estilo en cascada (CSS)

CSS (cuyas siglas significan “Cascading Style Sheets” (Hojas de estilo en cascada) es un lenguaje que se usa
para describir la apariencia y el formato de tu HTML.
Las hojas de estilo CSS son un conjunto reglas, en un archivo .css, que enumeran y que
describen el aspecto que deben tener los diferentes elementos HTML de una página.
Lo interesante es que funcionan con una filosofía de patrones o plantillas, es decir, no es necesario
especificar cada uno de los elementos, sino que se pueden definir, por ejemplo, reglas como estas:
●​ “Los títulos de nivel 1 y 2 (h1 y h2) deben ser de color negro y un tamaño de fuente de 16 y 14 pixeles
respetivamente.”
●​ “El texto de los párrafos (p) están alineados a la izquierda, tienen un tamaño de fuente de 12
pixeles y color gris oscuro.”

Ejemplo de cómo se expresarían las reglas anteriores en el lenguaje de las CSS:

h1, h2 {
color:
black;
font-size: 16px;
}
h2 {
font-size: 14px;
}
p{
color:
rgb(32,32,32);
text-align: left;
}
La intención de HTML no fue la de contener etiquetas para dar formato a una página web. Fue
creadopara describir su contenido, como:
<h1> Este es un encabezado </h1>
<p> Este es un párrafo </p>
Cuando se agregaron etiquetas como <font> y atributos de color a la especificación HTML 3.2, se inició
una pesadilla para los desarrolladores web. El desarrollo de grandes sitios web, donde se agregaban fuentes
e información de color a cada página, se convirtió en un proceso largo y costoso. Para resolver este
problema, el World Wide Web Consortium (W3C) creó CSS.
CSS eliminó el formato de estilo de las páginas web HTML.

Sintaxis CSS
Un conjunto de reglas CSS consta de un selector seguido de un bloque de declaración:

Selector​ Declaración

Propiedad Valor​ Propiedad​ Valor

El selector apunta al elemento HTML al que se desea aplicar un estilo.

El bloque de declaración contiene una o más declaraciones separadas por punto y coma.
Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
Varias declaraciones de CSS se separan con punto y coma y los bloques de declaración están rodeados por
llaves.

48
Ejemplo: todos los elementos <p> estarán alineados al centro, con un color de texto rojo:
p {
color: red;
text-align: center;
}

●​ p es un selector en CSS que apunta al elemento HTML al que desea aplicar estilo: <p>.
●​ color es una propiedad y red es el valor de la propiedad
●​ text-align es una propiedad y center es el valor de la propiedad

Selectores CSS
Los selectores CSS se utilizan para "buscar" (o seleccionar) los elementos HTML a los que se desea
aplicarun estilo. Los selectores más comunes son aquellos basados en el nombre, identificación o clase del
elemento HTML.

✔​ El selector de elementos CSS: selecciona elementos HTML según el nombre del mismo.

Ejemplo: Aquí, todos los elementos <p> de la página estarán alineados al centro, con un color de texto rojo:
p {
text-align: center;
color: red;
}

✔​ El selector de id de CSS: utiliza el atributo id de un elemento HTML para seleccionar un elemento

específico. La identificación (id) de un elemento es única dentro de una página, por lo que el selector
de identificación se utiliza para seleccionar un elemento único.
Para seleccionar un elemento con una identificación específica, debe escribirse el carácter #, seguido
de la identificación del elemento.

Ejemplo: La siguiente regla CSS se aplicará al elemento HTML que tenga id = "encabezado1":

#encabezado1 {
text-align: center;
color: red;
}

✔​ El selector de clases CSS: selecciona elementos HTML con un atributo de clase específico. Para
seleccionar elementos con una clase específica, debe escribirse un punto (.), Seguido del
nombrede la clase.

Ejemplo: La siguiente regla CSS se aplicará a todos los elementos HTML con class = "center”:
.center {
text-align: center;
color: red;
}

✔​ El selector universal de CSS: Este selector (*) selecciona todos los elementos HTML de la
página.Ejemplo: La siguiente regla CSS afectará a todos los elementos HTML de la página:
* {
text-align: center;
color: blue;
}
49
✔​ El selector de agrupación CSS: Este selector selecciona todos los elementos HTML con las mismas
definiciones de estilo.

En el siguiente código CSS, los elementos h1, h2 y p tienen las mismas definiciones de estilo:

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}

Lo mejor es agrupar los selectores para minimizar el código. Para agrupar selectores, se separa cada selector
con una coma.

Ejemplo: simplemente se han agrupado los selectores del código anterior:

h1, h2, p {
text-align: center;
color: red;
}

Cascada: herencia, sobreescritura y conflictos de estilos

El nombre de hojas de estilo en “cascada” no es casual, expresa que los estilos que especifican con reglas se
pueden heredar de una manera jerárquica.

Por ejemplo, veamos esta regla:

body {
font-family: Arial;
}

Aquí estamos diciendo que la etiqueta <body> que es la que envuelve el contenido de cualquier página web
tenga un tipo de letra “Arial”. Esto no tendría mucho sentido si no fuera porque gracias a la capacidad de
herencia de las reglas, cualquier elemento hijo como un título o un párrafo va a “heredar” ese estilo, salvo
que especifique lo contrario como, por ejemplo, en esta regla:

p{
font-family: Verdana;
}

En esta última regla aplica el principio de “especificidad”. En principio, se plantearía un conflicto entre la
regla general de <body> con lo que dice la regla de <p>, pero se resuelve fácilmente puesto que se aplica la
regla más específica y referirse a un párrafo es más específico que referirse a “los elementos hijos que
pueden haber dentro de <body>”.

50
Propiedades básicas de CSS
1.​Maquetación básica
●​ width: Ancho de un elemento. (px , %)
●​ height: Alto de un elemento. (px, %)
●​ vertical-align: Alineación vertical dentro de un elemento.
●​ margin: Espacio que se añade entre el elemento y sus vecinos. Se puede diferencia por lado (arriba,
abajo, izquierda, derecha).
●​ padding: establece el espacio de relleno requerido por todos los lados de un elemento.
●​ float: Mueve el elemento todo lo posible hacia el lado indicado. posiciona un elemento moviéndolo
todo lo posible a la izquierda o derecha de su posición original. Los tres valores de esta propiedad se
interpretan de la siguiente manera: left, right o none.

2.​Fuentes y texto
●​ font-family: Tipo de letra
●​ font-size: Tamaño de letra
●​ font-style: Estilo (normal, cursiva, …)
●​ text-decoration: “Decoraciones” como subrayado, tachado, etc.
●​ text-align: Alineación del texto (izquierda, derecha, etc.)
●​ Font-weight: texto en negrita.
●​ Links: text-decoration: none, quita el subrayado, a:hover {} se utiliza para realizar cambios cuando se
pasa el cursor sobre el mismo.

3.​Color y fondos
●​ color: Color del elemento. Se puede especificar en diferentes formatos como palabras predefinidas
(red, green, etc.) RGB o como valor hexadecimal.
●​ background-color: Color del fondo del elemento.
●​ background-image: Permite especificar una imagen de fondo.
●​ background-repeat: Permite usar una imagen a modo de mosaico en diferentes modalidades.
●​ box-shadow: Crear un efecto de sombra para un elemento. [ (px horizontal) (px vertical ]

4.​Listas
●​ list-style-image: Usar la imagen especificada como viñeta para la lista. list-style-image: url(imagen.jpg);
●​ list-style-type: Diferentes estilos de viñetas y estilos de numeración para elementos de lista.

5.​Bordes
●​ border: Añade un borde a un elemento y establece algunas propiedades (grosor, estilo de línea, etc.)
●​ border-color: Color del borde.
●​ border-style: Diferentes estilos para el borde (sólido, puntos, etc.)
●​ border-radius: Permite crear esquinas redondeadas para un elemento. % o px

Comentarios en CSS: La sintaxis de comentarios /* */ es la usada para una o múltiples líneas.

Vincular los estilos CSS a páginas HTML

Existen diversas maneras de vincular nuestro archivo .CSS con nuestro .HTML. Pero la mas utilizada es la de
hojas de estilo CSS externas: consiste en crear uno o varios archivos con extensión “.css” en los cuales se
declaran las reglas CSS.
La manera de vincular estas reglas a una página HTML consiste en hacer referencia al archivo .css desde esa
página. De este modo se puede crear un archivo global para una web entera y usarlo en todas las páginas
que se quiera.
En este caso, la declaración se incluye dentro del elemento <head> y tiene el siguiente aspecto:

<link rel="stylesheet" "href="estilos.css">

51
Actividad CSS

Instrucciones: Para realizar este TP ayúdate con la teoría que se encuentra arriba. En cada uno de los
siguientes ejercicios, crea un archivo HTML y aplica estilos CSS para lograr el resultado deseado. Asegúrate de
entender cada propiedad CSS utilizada y cómo afecta al diseño.

Ejercicio 1: Cambio de color de fondo. Crea una página con un párrafo de texto. Cambia el color de fondo del
párrafo a un tono diferente al predeterminado.

Ejercicio 2: Cambio de fuente. Crea una página con varios párrafos de texto. Cambia las fuentes, para que sean
todas diferentes.

Ejercicio 3: Crea una página con un párrafo de texto. Cámbialo para que este en negrita, cursiva, legible y
contrastante con el color de fondo.

Ejercicio 4: Alineación de texto. Crea una página con varios párrafos de texto y cambia sus alineaciones (left,
right, center y justificado)

Ejercicio 5: Estilización de encabezados. Crea una página con varios niveles de encabezados (h1, h2, h3, etc.).
Aplica estilos diferentes a cada nivel de encabezado, como color, decoraciones y margen.

Ejercicio 6: imágenes con bordes y sombras. Crea una página con una imagen. Agrega un borde redondeado a la
imagen y una sombra para resaltarla. Cambiar tamaño a la imagen.

Ejercicio 7: Creación de lista con viñetas personalizadas. Crea una lista desordenada con viñetas personalizadas.
Utiliza una imagen pequeña como viñeta en lugar del marcador estándar.

Ejercicio 8: Estilización de enlaces. Crea una página con enlaces. Cambia el color y la decoración de los enlaces
para que se vean diferentes. Cambiarle el cursor y el color cuando se pase sobre ellos. También quitarles el
subrayado.

Ejercicio 9: Diseño de botón. Crea un botón utilizando un elemento de botón y utilizarlo como un enlace a
google. Estiliza el botón para que tenga un aspecto atractivo y también que cambie su aspecto cuando se pasa el
cursor sobre él.

Ejercicio 10: Diseño de Tabla Crea una tabla con contenido y utiliza CSS para cambiar el estilo de las celdas,
bordes y fondo de la tabla.

Ejercicio 11: Diseño de Formulario. Crea un formulario con varios tipos de campos (texto, selección, check boxs,
radio button, etc.) y estiliza los campos y botones utilizando CSS.

Ejercicio 12: Maquetación Básica Crea una estructura de maquetación simple con encabezado, contenido y pie
de página. Utiliza CSS para establecer anchos, alturas y márgenes de los elementos.

52
Box Model

Contenedores (Cajas)

Etiqueta <div>
La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle
diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.
El uso de la etiqueta div es sencillo. Observemos este ejemplo:
<div>

Se ha empleado esta etiqueta para crear un bloque, que hará las veces de índice de contenidos. Visualmente la
etiqueta no provoca ningún cambio, pero en la estructura interna del documento se ha aplicado una división
muy importante.

Etiqueta <span>
La etiqueta <span> se utiliza para añadir estructura a una parte de un texto. Esta etiqueta se usa
comúnmente para añadir un estilo determinado dentro de una sección del texto.

Ejemplo:

53
Etiqueta <header>
El lenguaje (o "markup") HTML5 incorpora algunas etiquetas nuevas pensadas para hacer que la estructura de la
página web sea más lógica y funcional. Antes de HTML5, la estructura de una página dependía fuertemente de
las etiquetas <div>, generalmente asociadas a una clase CSS o un ID. Por ejemplo, en HTML 4.0 es una práctica
comúnmente aceptada definir la cabecera de una página web de esta forma:
<div id="header" > Esta es la cabecera </div>

En este caso, el código destacado en color rojo es el ID de CSS que sirve para definir la anchura y altura de la
cabecera así como su color de fondo. En el código CSS podríamos tener algo así:
#header {
width:960px;
height:100px;
background-color:gray;
}

En la especificación HTML5 existe ya una etiqueta llamada <header> que viene a sustituir al elemento <div> de
forma que la sintaxis es mucho más lógica y coherente:
<header> Esta es la cabecera </header>

En este ejemplo ya podemos añadir directamente las propiedades de estilo (ancho, alto, color de fondo, etc.) en
una regla para el nuevo elemento header de CSS:
header {
width:960px;
height:100px;
background-color:g
ray;
}

La diferencia entre estos dos ejemplos anteriores puede que sea difícil de entender si no estás familiarizado con
CSS. En el primer caso se utiliza un selector (#header) que refiere a un atributo ID de CSS. En el segundo caso
utilizamos un selector (header) que es una etiqueta de HTML5 y permite aplicar un estilo al elemento
directamente.

Etiqueta <footer>, <nav>, <section>, <aside>, y <article>

HTML5 dispone de unos cuantos elementos nuevos aparte de éste, como <footer>, <nav>, <section>, <aside>, y
<article>. Estos nombres se basan en los que se vienen utilizando habitualmente para distinguir secciones dentro
de las páginas web que vemos a diario (div id="footer", div id="nav", etc.).

El objetivo de los nuevos elementos HTML5 no es otro que evitar una excesiva dependencia de las etiquetas
<div> y sustituirlas por una estructura de página más consistente y legible. Como se puede ver, HTML5 no
sustituye ningún elemento de sintaxis de HTML; simplemente añade nuevos elementos de vocabulario a la lista
existente.

Dicho de otra forma, podemos seguir utilizando la etiqueta <div>, pero esta etiqueta ya no necesariamente tiene
que ser la viga maestra que soporte el diseño visual de toda una página web.

54
 <footer>: pie de página

A diferencia de la cabecera, el pie de página es generalmente en la parte inferior del documento. Contiene
información tal como enlaces de contacto, el nombre del autor, etc.

<footer>
<- Colocar aquí el contenido de pie de página ->
</ footer>

<nav>: Enlaces de navegación principales

La etiqueta <nav> debe consolidar todos los enlaces primarios de navegación en el sitio. Por ejemplo para
colocar el menú principal de la página web.

En general, el menú está diseñado como una lista con viñetas o botones en el interior de la etiqueta
<nav>

<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre Nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>

<section>: una sección de la página

La etiqueta <section> se utiliza para agrupar el contenido en función de su tema. Por lo general,
comprende una porción de contenido en el centro de la página.

<section>
<h1>Mi sección de la página</h1>
<p>Bla bla bla bla</p>
</section>

<aside>: información adicional

La etiqueta <aside> está diseñado para contener información adicional al documento que se visualiza. Esta
información se coloca generalmente en el costado (aunque esto no es un requisito).

<aside>
<!-- -Colocar aquí información complementaria->
</aside>

55
<article>: un artículo independiente

La etiqueta se usa para abarcar una porción <article> generalmente autónoma de la página. Esta es parte de la
página que podría por lo tanto reanudarse en otro sitio. Este es el caso por ejemplo de noticias (artículos de
periódicos o blogs).

<article>
<h1>Mi artículo</h1>
<p>Bla bla bla bla</p>
</article>

Resumen Visual:

56
Un ejemplo concreto de la utilización de etiquetas

Trata de usar las etiquetas que hemos descubierto para estructurar nuestro sitio web. El código siguiente
muestra todas las etiquetas que hemos visto en una página web completa:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Página web de Rafael Barzanallana</title>
</head>
<body>
<header>
<h1>Universidad de Murcia</h1>
<h2>Apuntes de las asignaturas que imparto</h2>
</header>
<nav>
<ul> <li><a
href="#">DAWeb</a></li>
<li><a href="#">IAT</a></li>
<li><a href="#">Master
</ul> Informática II</a></li>
</nav>

<section>
<aside>
<h1>Algo sobre mi<h1>
<p>Profesor de la Universidad de Murcia</p>
</aside>
<article>
<h1>Yo soy un gran escéptico</h1>
<p>Soy contrario a todo tipo de creencias</p>
</article>
</section>
<footer>
<p>Bajo licencia Creative Commons<br />
<a href="#">Contacto</a></p>
</footer>
</body>
</html>

57
 En resumen:
Se introdujeron varias etiquetas con HTML5 para delimitar las diferentes áreas que conforman la página web:

<header>: cabecera;
<footer>: pie de página;
<nav>: enlaces principales de navegación;
<section>: sección de la página;
<aside>: la información;
<article>: artículo independiente.

Estas etiquetas se pueden anidar unas dentro de otras. Así, una sección puede tener su propio encabezado.

Para los posicionamientos en principio vamos a utilizar las siguientes propiedades:

Float La propiedad float en CSS se utiliza para posicionar un
elemento a la izquierda o derecha dentro de su

contenedor, permitiendo que el contenido de texto y otros elementos fluyan a su alrededor.

●​ none: Valor por defecto. El elemento no flota y se posiciona según el flujo normal del documento.
●​ left: El elemento flota a la izquierda del contenedor y el contenido siguiente se ajusta a su derecha.
●​ right: El elemento flota a la derecha del contenedor y el contenido siguiente se ajusta a su izquierda.

Uso Común

✔​ Crear diseños de varias columnas.

✔​ Posicionar imágenes y otros elementos visuales dentro del texto.
Ejemplo
.img-float-left {
float: left;
margin: 10px; }

Margin
La propiedad margin en CSS se utiliza para crear espacio alrededor de los elementos, fuera de sus bordes.
Define el espacio exterior de un elemento.

Valores Comunes
●​ auto: Centra el elemento horizontalmente dentro de su contenedor (comúnmente utilizado en
elementos con un ancho fijo).
●​ px, em, %: Unidades de medida para especificar la cantidad de margen. Por ejemplo, 10px, 1em, 5%.
●​ margin-top, margin-right, margin-bottom (inferior), margin-left: Propiedades específicas para cada lado
del margen.
Uso Común

✔​ Separar elementos entre sí.

✔​ Añadir espacio alrededor de los elementos para mejorar el diseño visual.
Ejemplo
.box {
margin: 20px;
margin-top:
10px;
margin-bottom: 10px;

58
Padding
La propiedad padding en CSS se utiliza para crear espacio dentro de un elemento, entre su contenido y su
borde. Define el espacio interior de un elemento.

Valores Comunes

●​ px, em, %: Unidades de medida para especificar la cantidad de padding. Por ejemplo, 10px, 1em, 5%.
●​ padding-top, padding-right, padding-bottom, padding-left: Propiedades específicas para cada lado del
padding.
Uso Común

✔​ Añadir espacio dentro de un elemento para mejorar la legibilidad del contenido.

✔​ Aumentar el área de clic en botones y enlaces.

Ejemplo
.container {
padding:
20px;
padding-left:
10px;
padding-right:
10px;
}

Resumen Visual

Float: Posiciona elementos a la izquierda o derecha dentro de su contenedor.

Margin: Espacio exterior de un elemento (crea separación con otros elementos).
Padding: Espacio interior de un elemento (crea separación entre el contenido y el borde del elemento).
Ejemplo Combinado

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teoría de Float, Margin y Padding</title>
<style>
.float-example {
float: left;
width:
200px;
height:
100px;
background-color:
lightblue; margin: 20px;
padding: 10px;
}
</style>
</head>
<body>
<div class="float-example">
Este es un ejemplo de un div flotante con margen y padding.
</div>
<p>El texto de esta página fluirá alrededor del div flotante.</p>
</body>
</html>
59
En este ejemplo, el div con la clase .float-example flota a la izquierda, tiene un margen exterior de 20px para
separarse de otros elementos, y un padding interior de 10px para crear espacio dentro del div entre su contenido y
su borde.

ACTIVIDAD

Realizar el siguiente boceto de página web:

A. Header. B. Nav. C. Section. D. Article. E. Aside. F. Footer.

Flexbox en HTML y CSS

Introducción a Flexbox
Flexbox (Flexible Box Layout) es un sistema de diseño en CSS que permite crear diseños flexibles y responsivos
mediante el alineamiento y distribución de elementos en un contenedor. Esto simplifica la creación de diseños
complejos y la alineación de elementos en diferentes tamaños de pantalla y dispositivos. No solo puedes posicionar
elementos vertical y horizontalmente, sino que puedes establecer cómo se distribuirán, el orden que tendrán e
incluso el tamaño que tendrán en proporción a otros elementos.

Propiedades Principales de Flexbox

Contenedor Flex (Flex Container): Para habilitar el modelo de diseño flexible, se debe convertir un elemento
contenedor en un contenedor flex. Esto se logra estableciendo la propiedad display: flex o display: inline-flex en el
contenedor.
60
Ejes Principales y Cruzados:
●​ Eje Principal (Main Axis): Es la dirección principal en la que se alinearán los elementos flexibles.
Puede ser horizontal o vertical, dependiendo de la orientación del contenedor flex.

●​ Eje Cruzado (Cross Axis): Es el eje perpendicular al eje principal. En caso de un contenedor
horizontal, el eje cruzado es vertical, y viceversa.

Ejercicio 1: Objetivo: Alinear los elementos en el eje principal (horizontalmente) utilizando

justify-content.

HTML:

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Flexbox Ejercicio 1</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="container">

<div class="item">1</div>

<div class="item">2</div>

<div class="item">3</div>

</div>

</body>

</html>

CSS:

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

font-family: Arial, sans-serif;

61
}

.container {

display: flex;

border: 2px solid #000;

width: 80%;

padding: 10px;

.item {

background-color: #f0a500;

padding: 20px;

margin: 10px;

border-radius: 5px;

text-align: center;

flex: 1;

Experimentar con diferentes valores para justify-content

.container {

justify-content: center; /* otros valores: flex-start, flex-end,

space-between, space-around, space-evenly */

Ejercicio 2: Alineación de Elementos en el Eje Cruzado

Objetivo: Alinear los elementos en el eje cruzado (verticalmente) utilizando align-items.

HTML:

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Flexbox Ejercicio 2</title>

<link rel="stylesheet" href="styles.css">

</head>
62
<body>

<div class="container">

<div class="item">1</div>

<div class="item">2</div>

<div class="item">3</div>

</div>

</body>

</html>

CSS:

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

font-family: Arial, sans-serif;

.container {

display: flex;

flex-direction: column; /* Cambia la dirección de los elementos a columna

*/

border: 2px solid #000;

height: 80%;

width: 200px;

padding: 10px;

.item {

background-color: #f0a500;

padding: 20px;

margin: 10px;

border-radius: 5px;

text-align: center;

63
 flex: 1;

/* Aquí puedes experimentar con diferentes valores para align-items */

.container {

align-items: center; /* otros valores: flex-start, flex-end, stretch,

baseline */

Alineación y Justificación:
●​ justify-content: Alinea los elementos a lo largo del eje principal.

●​ align-items: Nos permite posicionar / distribuir elementos verticalmente. (solo para una linea de
elementos)

align-items: flex-start | flex-end | center | stretch | baseline;

●​ align-self: Permite ajustar la alineación de un elemento individual en el eje cruzado.

align-self: flex-start | flex-end | center | stretch | baseline ;

●​ justify-self: Nos permite decidir la posición de nuestros elementos y la distribución que tendrán.

justify-content: flex-end | flex-start | center | space-around | space-between ;

Ejercicio 3: Alineación Individual de Elementos

Objetivo: Alinear elementos individualmente utilizando align-self.

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Ejercicio 3</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item" style="align-self: flex-start;">1</div>
<div class="item" style="align-self: center;">2</div>
<div class="item" style="align-self: flex-end;">3</div>
</div>
</body>
</html>

64
CSS:

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}

.container {
display: flex;
border: 2px solid #000;
height: 80%;
width: 200px;
padding: 10px;
flex-direction: column; /* Cambia la dirección de los elementos a columna
*/
}

.item {
background-color: #f0a500;
padding: 20px;
margin: 10px;
border-radius: 5px;
text-align: center;
flex: 1;
}

Estos ejercicios te permitirán practicar la alineación de elementos en el eje principal y cruzado utilizando Flexbox.
Puedes cambiar los valores de justify-content, align-items y align-self para ver cómo afectan la
disposición de los elementos.

Ordenamiento de Elementos:
●​ order: Cambia el orden en que los elementos flexibles aparecen dentro del contenedor.

Ejercicio 4 : Ordenamiento de Elementos con order

Objetivo: Cambiar el orden de los elementos utilizando la propiedad order.

HTML:

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

65
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Flexbox Ejercicio 4</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="container">

<div class="item item-1">1</div>

<div class="item item-2">2</div>

<div class="item item-3">3</div>

<div class="item item-4">4</div>

<div class="item item-5">5</div>

</div>

</body>

</html>

CSS:

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

font-family: Arial, sans-serif; }

.container {

display: flex;

border: 2px solid #000;

width: 80%;

padding: 10px;

.item {

background-color: #f0a500;

padding: 20px;

margin: 10px;
66
 border-radius: 5px;

text-align: center;

flex: 1;

/* Aquí puedes cambiar el orden de los elementos */

.item-1 {

order: 3;

.item-2 {

order: 1;

.item-3 {

order: 5;

.item-4 {

order: 2;

.item-5 {

order: 4;

En este ejercicio, los elementos se ordenan de la siguiente manera:

●​ item-1 tiene order: 3, por lo que aparecerá en la tercera posición.

●​ item-2 tiene order: 1, por lo que aparecerá en la primera posición.
●​ item-3 tiene order: 5, por lo que aparecerá en la quinta posición.
●​ item-4 tiene order: 2, por lo que aparecerá en la segunda posición.
●​ item-5 tiene order: 4, por lo que aparecerá en la cuarta posición.

Puedes cambiar los valores de order para ver cómo afecta la disposición de los elementos dentro del contenedor
Flexbox. Esta propiedad es útil cuando necesitas reorganizar elementos visualmente sin cambiar su orden en el
HTML.

Espacio entre Elementos:

●​ flex-direction: Define el eje principal y establece la dirección en la que se acomodaran nuestros
elementos.

flex-direction: row | column | row-reverse | column-reverse ;

67
 ●​ flex-wrap: Podemos indicar si todos los elementos estarán en linea con su máximo ancho posible o
establecido o si queremos que respete el ancho y los elementos se posicionen en varias líneas de
elementos.

​ ​ flex-wrap: no-wrap | wrap | wrap-reverse;

​

●​ gap (o row-gap y column-gap): Establece el espacio entre elementos flexibles

●​ Flex Flow

Es un atajo entre flex-direction y flex-wrap.

​ ​
​ flex-flow: row wrap;

​ /* Primer valor es el valor que le daríamos a ​ flex-direction */

​
​ /* Segundo valor es el valor que le daríamos a flex-wrap */
​
Ejercicio 5: Espacio entre Elementos con Flexbox

Objetivo: Utilizar flex-direction, flex-wrap, gap, y flex-flow para gestionar la disposición y el

espacio entre los elementos.

HTML:

Copiar código
<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Flexbox Ejercicio 5</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="container">

<div class="item">1</div>

<div class="item">2</div>

<div class="item">3</div>

<div class="item">4</div>

<div class="item">5</div>

<div class="item">6</div>

<div class="item">7</div>

68
 <div class="item">8</div>

</div>

</body>

</html>

CSS:

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

font-family: Arial, sans-serif;

.container {

display: flex;

flex-direction: row; /* Cambia la dirección a columna con 'column' */

flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente

línea */

gap: 10px; /* Espacio entre los elementos */

border: 2px solid #000;

width: 80%;

padding: 10px;

box-sizing: border-box; /* Para incluir el padding y border dentro del

width */

.item {

background-color: #f0a500;

padding: 20px;

margin: 5px;

border-radius: 5px;

text-align: center;

flex: 1 1 100px; /* flex-grow, flex-shrink, flex-basis */ }

69
CSS con flex-flow:

.container {

display: flex;

flex-flow: row wrap; /* Dirección en fila y permite envolver los elementos

*/

gap: 10px; /* Espacio entre los elementos */

border: 2px solid #000;

width: 80%;

padding: 10px;

box-sizing: border-box; /* Para incluir el padding y border dentro del

width */

Puedes experimentar cambiando los valores de flex-direction, flex-wrap, y gap para ver cómo
afectan la disposición y el espacio entre los elementos dentro del contenedor Flexbox. También puedes utilizar la
propiedad flex-flow para simplificar la escritura de las propiedades combinadas.

Alineación Individual:

●​ align-content: Nos permite posicionar / distribuir elementos verticalmente, igual que align-items, solo que
align-content solo funciona para lineas de elementos, por ejemplo cuando tenemos establecido
un flex-wrap:wrap; y los elementos se posicionan en varias lineas.

align-content: flex-start | flex-end | center | stretch | space-between | space-around ;

Propiedades para los elementos hijos:

●​ Flex Basis: Establecemos el tamaño que tendrá un elemento.

​
​ flex-basis:;

●​ Flex Grow: Establecemos la proporción de crecimiento que tendrá un elemento a comparacion con los
demás.

​ flex-grow:1;

●​ Flex Shrink: Establecemos la proporción de encogimiento que tendrá un elemento a comparacion con los
demás.

​ flex-shrink:1;

●​ Flex: Atajo entre flex-grow, flex-shrink, flex-basis

flex:1 1 50%;

70
Ejercicio 6: Propiedades para los Elementos Hijos con Flexbox

Objetivo: Utilizar flex-basis, flex-grow, flex-shrink, y flex para controlar el tamaño y el

comportamiento de los elementos hijos dentro de un contenedor Flexbox.

HTML:

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Flexbox Ejercicio 6</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="container">

<div class="item">1</div>

<div class="item">2</div>

<div class="item">3</div>

<div class="item">4</div>

<div class="item">5</div>

<div class="item">6</div>

<div class="item">7</div>

<div class="item">8</div>

</div>

</body>

</html>

CSS:

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;
71
 font-family: Arial, sans-serif;

.container {

display: flex;

flex-wrap: wrap;

gap: 10px;

border: 2px solid #000;

width: 80%;

padding: 10px;

box-sizing: border-box;

.item {

background-color: #f0a500;

padding: 20px;

margin: 5px;

border-radius: 5px;

text-align: center;

flex-basis: 100px; /* Toma el espacio base de 100px */

flex-grow: 1; /* Crece para llenar el espacio disponible */

flex-shrink: 1; /* Se encoge si es necesario */

Experimenta con estos valores individuales:

flex-basis: Especifica el tamaño inicial del elemento antes de distribuir el

espacio restante

.item-1 {

flex-basis: 150px;

flex-grow: Permite que el elemento crezca para llenar el espacio disponible

.item-2 {

flex-grow: 2;

72
flex-shrink: Permite que el elemento se encoge si es necesario

.item-3 {

flex-shrink: 0; /* No se encogerá */

flex: Abreviatura para flex-grow, flex-shrink, y flex-basis */

.item-4 {

flex: 2 1 200px; /* flex-grow: 2, flex-shrink: 1, flex-basis: 200px */

Experimenta cambiando los valores de flex-basis, flex-grow, flex-shrink, y flex para

ver cómo afectan el tamaño y el comportamiento de los elementos dentro del contenedor Flexbox.

73