Programación Web

Lcda. Diliannys Malavé

1
Mayo 2021 – Septiembre
Versión Mayo 2021
2021
 Introducción

La programación de los sitios web es una de las disciplinas dentro del mundo de Internet

que más se ha desarrollado y no deja de sorprender día a día con las posibilidades que abre y

genera. En principio, el gran desarrollo de Internet se fundamentó en la posibilidad de enlazar a

través de hipervículos diferentes páginas web lo que generó la enorme interconexión que es hoy

Internet. Esta base que inició esta red, fué desarrollada y generó el lenguaje ícono de las páginas

web que es HTML.

Pero, la creatividad humana no tiene límites y lejos de contentarse con el desarrollo del

lenguaje HTML, enriqueciéndolo en su sintaxis, aparecieron otros lenguajes, que a su vez

desataron una reacción en cadena con respecto a las operaciones que se podían lograr en un sitio

web.

De esta manera nació Java Script, que ha su vez incentivó a la creación de otros lenguajes

que apuntaron a el mimso objetivo como PHP, y así constantemente se están buscando mejoras y

nuevas alternativas, todas que apuntan a la interacción del usuario con el sitio.

Está demostrado que los sitios más visitados son los que brindan un servicio más

personalizado al usuario y esto se logra pura y exclusivamente a través de la programación web,

que a través de conocer los gustos y tendencias del usuario, utiliza estos datos para

proporcionarle al mismo información que más le interesa.

La materia de programación web le permitirá al estudiante tener otra visión mucho más

amplia para el desarrollo de sitios web.

El módulo está conformado por cinco (5) unidades, distribuidas de la siguiente manera:

Unidad I, HTML.

Unidad II, CSS.

2
Versión Mayo 2021
 Unidad III, JavaScript.

Unidad IV, servidores web.

Unidad V, PHP.

Realizados los estudios de las unidades didácticas de programación web, el estudiante es

competente en el aprendizaje de este módulo cuando pueda desarrollar sitios web dinámicos.

3
Versión Mayo 2021
 Semana I

Contenido

Lunes – Semana I ................................................................................................................ 6

Página Web ......................................................................................................................... 6

¿Para qué sirve una página Web?................................................................................ 6

Tipos de página Web................................................................................................... 7

Desarrollo web .................................................................................................................... 7

Martes – Semana I............................................................................................................... 8

HTML ................................................................................................................................. 8

El primer documento HTML. ..................................................................................... 9

Miércoles – Semana I ........................................................................................................ 13

Texto en HTML ................................................................................................................ 13

Estructurar. ................................................................................................................ 13

Marcado del texto...................................................................................................... 14

Enlaces en HTML ............................................................................................................. 15

Jueves – Semana I ............................................................................................................. 17

Listas en HTML ................................................................................................................ 17

Listas no ordenadas. .................................................................................................. 17

Listas ordenadas. ....................................................................................................... 18

Listas de definición. .................................................................................................. 19

4
Versión Mayo 2021
Imágenes en HTML .......................................................................................................... 20

Actividades – Semana I..................................................................................................... 22

Recursos – Semana I ......................................................................................................... 26

5
Versión Mayo 2021
 Lunes – Semana I

Página Web

Se conoce como página Web, página electrónica o página digital a un documento digital

de carácter multimediático (es decir, capaz de incluir audio, video, texto y sus combinaciones),

adaptado a los estándares de la World Wide Web (WWW) y a la que se puede acceder a través

de un navegador Web y una conexión activa a Internet. Se trata del formato básico de contenidos

en la red.

Las páginas Web se encuentran programadas en un formato HTML o XHTML, y se

caracterizan por su relación entre unas y otras a través de hipervínculos: enlaces hacia contenidos

diversos que permiten una lectura compleja, simultánea y diversa, muy distinta a la que podemos

hallar en los libros y revistas.

Es importante saber, no es lo mismo hablar de página Web (Webpage) y de sitio Web

(Website), ya que estos últimos contienen un número variable de las primeras.

¿Para qué sirve una página Web?

Las páginas Web cumplen básicamente con la tarea de brindar información de cualquier

índole y en cualquier estilo o grado de formalidad.

Algunas, al mismo tiempo, permiten distintos grados de interacción entre usuarios o con

alguna institución, como son las páginas de foros, servicios de citas o redes sociales, las páginas

de compra y venta de bienes, las páginas de consulta o de contacto con empresas,

instituciones gubernamentales o con ONG, e incluso las páginas de soporte técnico

especializado.

En principio, las funciones de una página Web son tan amplias como la demanda de

los usuarios y la oferta de sus creadores.

6
Versión Mayo 2021
 Tipos de página Web

Existen dos tipos de página Web, conforme al modo en que se genera su contenido:

Páginas web estáticas. Operan mediante la descarga de un fichero programado en código

HTML, en el que están todas las instrucciones para que el navegador reconstruya la página web,

accediendo a las ubicaciones de sus elementos y siguiendo un orden preconcebido, rígido, que no

permite la interacción con el usuario. Este tipo de páginas son meramente informativas,

documentales, no interactivas.

Páginas web dinámicas. A diferencia de las anteriores, las páginas web dinámicas se

generan en el momento mismo del acceso del usuario, empleando para ello algún lenguaje

interpretado (como el PHP), lo cual le permite recibir solicitudes del usuario, procesarlas

en bases de datos y ofrecer una respuesta acorde a sus requerimientos.

Desarrollo web

La mayoría de las personas se refieren al diseño web a la hora de hablar de la creación de

una página web, sin embargo, el diseño web se limita a eso, al diseño de la página web, como

mucho y según lo estrictos que seamos en los términos, estaríamos hablando del diseño y la

maquetación web, es decir, del aspecto visual de la página o la aplicación web en cuestión, sin

embargo, especialmente si estamos hablando de una página web creada a medida, estamos

hablando de desarrollo web, que incluye:

Diseño web y maquetación web responsive.

Programación front end, la parte visible de la web.

Programación back end, el panel de control desde el cual el administrador web gestiona

los contenidos y otras funciones de la página web.

Desarrollo de la base de datos.

7
Versión Mayo 2021
 Martes – Semana I

HTML

El lenguaje HTML (Hyper Text Markup Languaje) es un lenguaje que permite la

distribución de contenidos multimedia incluidos en documentos de hipertexto en el

WWW (Terán, 2010).

HTML es un lenguaje de etiquetas (también llamado lenguaje de marcado) y las páginas

web habituales están formadas por cientos o miles de pares de etiquetas. De hecho, las letras

"ML" de la sigla HTML significan "markup language", que es como se denominan en inglés a

los lenguajes de marcado.

La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y

escribir por parte de las personas y de los sistemas electrónicos. La principal desventaja es que

pueden aumentar mucho el tamaño del documento, por lo que en general se utilizan etiquetas con

nombres muy cortos.

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

denomina marcar (markup en inglés). Cada una de las palabras que se emplean para marcar el

inicio y el final de una sección se denominan etiquetas.

Aunque existen algunas excepciones, en general las etiquetas se indican por pares y se

forman de la siguiente manera:

Etiqueta de apertura: carácter <, seguido del nombre de la etiqueta (sin espacios en

blanco) y terminado con el carácter >

Etiqueta de cierre: carácter <, seguido del carácter /, seguido del nombre de la etiqueta

(sin espacios en blanco) y terminado con el carácter >

Así, la estructura típica de las etiquetas HTML es:

8
Versión Mayo 2021
 <nombre_etiqueta> ... </nombre_etiqueta>

El primer documento HTML.

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

información sobre la propia página, como por ejemplo su título y su idioma. El cuerpo de la

página incluye todos sus contenidos, como párrafos de texto e imágenes.

Figura 1. Esquema de las partes que forman un documento HTML. Fuente (Eguiluz)

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

cabecera (llamada head en inglés) contiene todo lo que no se ve (con la única excepción del

título de la página, que los navegadores muestran como título de sus ventanas).

A continuación se muestra el código HTML de una página web muy sencilla:

<html>
<head>
<title>Mi primera página HTML</title>
</head>
<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que
prácticamente se entiende sin estudiar el significado
de sus etiquetas principales.</p>
</body>
</html>
Es importante conocer las tres etiquetas principales de un documento HTML:

<html>: indica el comienzo y el final de un documento HTML. Ninguna etiqueta o

contenido puede colocarse antes o después de la etiqueta <html> (a excepción del Doctype). En

9
Versión Mayo 2021
el interior de la etiqueta <html> se definen la cabecera y el cuerpo del documento HTML y todo

lo que se coloque fuera de la etiqueta <html> se ignora.

<head>: delimita la parte de la cabecera del documento. La cabecera contiene

información sobre el propio documento HTML, como por ejemplo su título y el idioma de la

página. Los contenidos indicados en la cabecera no son visibles para el usuario, con la excepción

de la etiqueta <title>, que se utiliza para indicar el título del documento y que los navegadores lo

visualizan en la parte superior izquierda de la ventana del navegador.

<body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los

contenidos que se muestran al usuario (párrafos de texto, imágenes, tablas). En general,

el <body> de un documento contiene cientos de etiquetas HTML, mientras que el <head> no

contiene más que unas pocas.

Figura 2. Esquema de las etiquetas principales que contiene un documento HTML. Fuente: (Eguiluz)

Algunos elementos como las imágenes y los enlaces requieren cierta información

adicional para estar completamente definidos.

La etiqueta <a> por ejemplo se emplea para incluir un enlace en una página. Utilizando

sólo la etiqueta <a> no es posible establecer la dirección a la que apunta cada enlace. Como no es

viable crear una etiqueta por cada enlace diferente, la solución consiste en personalizar las

etiquetas HTML mediante cierta información adicional llamada atributos.

10
Versión Mayo 2021
 Aunque cada una de las etiquetas HTML define sus propios atributos, algunos de los

atributos son comunes a muchas o casi todas las etiquetas. De esta forma, es habitual explicar por

separado los atributos comunes de las etiquetas para no tener que volver a hacerlo cada vez que

se explica una nueva etiqueta.

Elementos HTML.

Además de etiquetas y atributos, HTML define el término elemento para referirse a las

partes que componen los documentos HTML.

Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en

realidad un elemento HTML es mucho más que una etiqueta, ya que está formado por:

Una etiqueta de apertura.

Cero o más atributos.

Texto encerrado por la etiqueta.

Una etiqueta de cierre.

El texto encerrado por la etiqueta es opcional, ya que algunas etiquetas de HTML no

pueden encerrar ningún texto. El siguiente esquema muestra un elemento HTML, formado por

una etiqueta <p>, atributos y contenidos de texto:

Figura 3. Esquema de las partes que componen un elemento HTML. (Terán, 2010)

Por otra parte, el lenguaje HTML clasifica a todos los elementos en dos grupos:

elementos en línea (inline elements en inglés) y elementos de bloque (block elements en inglés).

11
Versión Mayo 2021
 La principal diferencia entre los dos tipos de elementos es la forma en la que ocupan el

espacio disponible en la página. Los elementos de bloque siempre empiezan en una nueva línea y

ocupan todo el espacio disponible hasta el final de la línea, aunque sus contenidos no lleguen

hasta el final de la línea. Por su parte, los elementos en línea sólo ocupan el espacio necesario

para mostrar sus contenidos.

La mayoría de elementos de bloque pueden contener en su interior elementos en línea y

otros elementos de bloque. Los elementos en línea sólo pueden contener texto u otros elementos

en línea. En otras palabras, un elemento de bloque no puede aparecer dentro de un elemento en

línea. En cambio, un elemento en línea puede aparecer dentro de un elemento de bloque y dentro

de otro elemento en línea.

Los elementos en línea definidos por HTML son:

a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, lab

el, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.

Los elementos de bloque definidos por HTML son:

address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex,

menu, noframes, nos-cript, ol, p, pre, table, ul, dd, dt, frame-set, li, tbody, td, tfoot, th, thead, tr.

Los siguientes elementos pueden ser en línea y de bloque según las circunstancias:

button, del, iframe, ins, map, object, script.

12
Versión Mayo 2021
 Miércoles – Semana I

Texto en HTML

HTML define etiquetas para estructurar el contenido en secciones y párrafos y define

otras etiquetas para marcar elementos importantes dentro del texto.

Estructurar.

La forma más sencilla de estructurar un texto consiste en separarlo por párrafos. Además,

HTML permite incluir títulos que delimitan cada una de las secciones.

Párrafos.

Una de las etiquetas más utilizadas de HTML es la etiqueta <p>, que permite definir los

párrafos que forman el texto de una página. Para delimitar el texto de un párrafo, se encierra ese

texto con la etiqueta <p>, como muestra el siguiente ejemplo:

<body>
<p>Este es el texto que forma el primer párrafo de la página.
Los párrafos pueden ocupar varias líneas y el navegador se encarga
de ajustar su longitud al tamaño de la ventana.</p>

<p>El segundo párrafo de la página también se define encerrando

su texto con la etiqueta p. El navegador también se encarga de
separar automáticamente cada párrafo.</p>
</body>
Secciones.

Los títulos de sección se utilizan para delimitar el comienzo de cada sección de la página.

HTML permite crear secciones de hasta seis niveles de importancia. De esta forma, aunque una

página puede definir cualquier número de secciones, sólo puede incluir seis niveles jerárquicos.

Las etiquetas que definen los títulos de sección son <h1>, <h2>, <h3>, <h4>, <h5> y

<h6>. La etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los titulares

13
Versión Mayo 2021
de la página. La importancia del resto de etiquetas es descendiente, de forma que la

etiqueta <h6> es la que se utiliza para delimitar las secciones menos importantes de la página.

Los navegadores asignan de forma automáticamente el tamaño del título de cada sección

en función de su importancia. Así, los títulos de sección <h1> se muestran con el tamaño de letra

más grande, ya que son el nivel jerárquico superior, mientras que los títulos de sección <h6> se

visualizan con un tamaño de letra muy pequeño, adecuado para el nivel jerárquico de menor

importancia.

Para delimitar el texto de las secciones, se encierra ese texto con la etiqueta <h[nivel]>,

como muestra el siguiente ejemplo:

<body>
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>
</body>
Marcado del texto.

Una vez estructurado el texto en párrafos y secciones, el siguiente paso es el marcado de

los elementos que componen el texto. Los textos habituales están formados por elementos como

palabras en negrita o cursiva, anotaciones y correcciones, citas a otros documentos externos, etc.

HTML proporciona varias etiquetas para marcar cada uno de los diferentes tipos de texto. En la

siguiente tabla se muestra las etiquetas más utilizadas.

14
Versión Mayo 2021
 Tabla 1.
Etiquetas para el marcado del texto
Etiqueta Significado Ejemplo
<b> Negrita <b>Texto en negrita </b>
<i> Cursiva <i> Texto en cursiva </i>
<u> Subrayado <u> Texto subrayado </u>
<s> Tachado <s> Texto tachado </s>
<big> Agranda el texto <big> Texto grande </big>
<small> Disminuye el texto <small>Texto pequeño
</small>
<sup> Superíndice Potencia 2³
<sub> Subíndice H₂O
<em> Texto con énfasis <em> Texto con
énfasis</em>
<strong> Texto destacado <strong> Texto
destacado</strong>

Enlaces en HTML

El elemento principal del hipertexto es el "hiperenlace", también llamado "enlace web" o

simplemente "enlace".

Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayoría

de enlaces relacionan páginas web, también es posible enlazar otros recursos como imágenes,

documentos y archivos.

Los enlaces en HTML se crean mediante la etiqueta <a>.

El atributo más importante de la etiqueta <a> es href, que se utiliza para indicar la URL a

la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador se dirige a la

URL del recurso indicado mediante href.

Para crear un enlace que apunte a la página principal de Google solamente habría que

incluir lo siguiente en un documento HTML:

<a href="http://www.google.com">Página principal de Google</a>

15
Versión Mayo 2021
 Como el atributo href indica una URL, un enlace puede apuntar a cualquier tipo de

recurso al que pueda acceder el navegador. El siguiente enlace apunta a una imagen, que se

mostrará en el navegador cuando el usuario pinche sobre el enlace:

<a href="http://www.ejemplo.com/fondo_escritorio.jpg">Imagen interesante para un

fondo de escritorio</a>

De la misma forma, los enlaces pueden apuntar directamente a documentos PDF, Word,

etc.

<a href="http://www.ejemplo.com/informe.pdf">Descargar informe completo [PDF]</a>

<a href="http://www.ejemplo.com/informe.doc">Descargar informe completo

[DOC]</a>

También puedes crear enlaces a alguna parte específica del documento:

<a href="#id_del_elemennto">Enlace a un sitio especifico del documento</a>

16
Versión Mayo 2021
 Jueves – Semana I

Listas en HTML

En ocasiones, es posible agrupar determinadas palabras o frases en un conjunto de

elementos que tienen más significado de forma conjunta.

El lenguaje HTML define tres tipos diferentes de listas para agrupar los elementos: listas

no ordenadas (se trata de una colección simple de elementos en la que no importa su orden),

listas ordenadas (similar a la anterior, pero los elementos están numerados y, por tanto, importa

su orden) y listas de definición (un conjunto de términos y definiciones similar a un diccionario).

Listas no ordenadas.

Una lista no ordenada es un conjunto de elementos relacionados entre sí pero para los que

no se indica un orden o secuencia determinados. La etiqueta <ul> encierra todos los elementos

de la lista y la etiqueta <li> cada uno de sus elementos.

El siguiente código HTML muestra un ejemplo sencillo de lista no ordenada:

<html>
<head><title>Ejemplo de etiqueta UL</title></head>
<body>
<h1>Menú</h1>
<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Artículos</li>
<li>Contacto</li>
</ul>
</body>
</html>
El navegador por defecto muestra los elementos de la lista tabulados y con una pequeña

viñeta formada por un círculo negro. Pero si queremos definir nosotros mismo el símbolo del

punto, podemos gracias al atributo “type”.

17
Versión Mayo 2021
 Así podemos hacer que la lista esté definida por puntos negros (li type=”disc”), por

puntos con el fondo blanco (li type=”circle”) o por cuadrados (li type=”square”):

<ul>
<li type="circle">Esto es un tipo de punto.</li>
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>
</ul>
Listas ordenadas.

Las listas ordenadas son casi idénticas a las listas no ordenadas, salvo que en este caso los

elementos relacionados se muestran siguiendo un orden determinado. Se define mediante la

etiqueta <ol>. Los elementos de la lista se definen mediante la etiqueta <li>, la misma que se

utiliza en las listas no ordenadas.

El siguiente código HTML muestra un ejemplo sencillo de lista ordenada:

<html>
<head><title>Ejemplo de etiqueta OL</title></head>
<body>
<h1>Instrucciones</h1>
<ol>
<li>Enchufar correctamente</li>
<li>Comprobar conexiones</li>
<li>Encender el aparato</li>
</ol>
</body>
</html>
Gracias al atributo “type” definimos el ítem como se enumera, ejemplo: por números (li

type=”1”) este viene por defecto sino se especifica el tipo en los “li”, por números romanos

mayúsculas (li type=”I”), por números romanos minúsculas (li type=”i”), por letras mayúsculas

(li type=”A”) o letras minúsculas (li type=”a”).

<ul>
<li type="1"> Número decimal.</li>

18
Versión Mayo 2021
 <li type="I"> Número romano mayúscula.</li>
<li type="i"> Número romano minúscula.</li>
<li type="A"> Letra mayúscula.</li>
<li type="a"> Letra minúscula.</li>
</ul>
En las listas ordenadas podemos hacer que el primer punto comience con el número que

nosotros queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que

escribamos se generarán automáticamente por orden, partiendo de ese número.

Por ejemplo, si queremos que nuestra lista empiece por el número 20, sólo deberemos

escribir lo siguiente:

<ol>
<li value="20">Este será el número 20. </li>
<li>Este será el 21. </li>
<li> Este será el 22. Y así sucesivamente. </li>
</ol>
Listas de definición.

Su funcionamiento es similar al de un diccionario, ya que cada elemento de la lista está

formado por términos y definiciones. La etiqueta <dl> crea la lista de definición y las

etiquetas <dt> y <dd> definen respectivamente el término y la descripción de cada elemento de

la lista.

El siguiente código HTML muestra un ejemplo sencillo de lista de definición:

<html>
<head><title>Ejemplo de etiqueta DL</title></head>
<body>
<h1>Metalenguajes</h1>
<dl>
<dt>SGML</dt>
<dd>Metalenguaje para la definición de otros lenguajes de
marcado</dd>
<dt>XML</dt>
<dd>Lenguaje basado en SGML y que se emplea para describir

19
Versión Mayo 2021
 datos</dd>
<dt>RSS</dt>
<dt>GML</dt>
<dt>XHTML</dt>
<dt>SVG</dt>
<dt>XUL</dt>
<dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>
</dl>
</body>
</html>
Los navegadores formatean las listas de definición de forma similar a las otras listas,

tabulando la definición y alineando a la izquierda los términos. Aunque no es habitual, cada

término puede tener asociada más de una definición y cada definición puede tener asociada

varios términos.

Imágenes en HTML

Las imágenes son uno de los elementos más importantes de las páginas web. De hecho,

prácticamente todas las páginas web contienen alguna imagen y la mayoría incluyen decenas de

imágenes.

Las imágenes se incluyen directamente en el código HTML mediante la etiqueta <img>,

esta etiqueta tiene atributos propios:

src = "url" - Indica la URL de la imagen que se muestra.

alt = "texto" - Descripción corta de la imagen.

height = "unidad_de_medida" - Indica la altura con la que se debe mostrar la imagen.

width = "unidad_de_medida" - Indica la anchura con la que se debe mostrar la imagen.

Los dos atributos requeridos son src y alt. El atributo src es similar al atributo href de los

enlaces, ya que establece la URL de la imagen que se va a mostrar en la página. Las URL

indicadas pueden ser absolutas o relativas. El atributo alt permite describir el contenido de la

20
Versión Mayo 2021
imagen mediante un texto breve. Las descripciones deben tener una longitud inferior a 1024

caracteres y son útiles para las personas y dispositivos discapacitados que no pueden acceder a

las imágenes.

Ejemplo sencillo para incluir una imagen:

<img src="logotipo.gif" alt="Logotipo de Mi Sitio" />

Como <img> es una etiqueta vacía, no tiene etiqueta de cierre.

HTML no impone ninguna restricción sobre el formato gráfico que se puede utilizar en

las imágenes, por lo que en principio la etiqueta <img> puede incluir cualquier formato gráfico

existente. Sin embargo, si la imagen utiliza un formato poco habitual, todos o algunos

navegadores no serán capaces de mostrar esa imagen.

La recomendación es utilizar uno de los tres siguientes formatos gráficos que entienden

todos los navegadores modernos: GIF, JPG y PNG. El formato PNG presenta el inconveniente de

que los navegadores obsoletos como Internet Explorer 6 no muestran correctamente las imágenes

con transparencias de 24 bits.

21
Versión Mayo 2021
 Actividades – Semana I

Actividad 1

Realizar un mapa mental sobre páginas web.

Actividad 2

Realice un resumen (200 palabras mínimo) sobre programación web.

Actividad 3

Realizar una línea de tiempo sobre la historia de HTML.

Actividad 4

Realizar un mapa conceptual sobre HTML.

Actividad 5

Determinar el código HTML necesario para crear una página web como la siguiente:

El texto "Tim Berners-Lee" como encabezado de nivel 1.

El texto "Biografía" como encabezado de nivel 2.

Todas las siglas, como HTTP, W3C o MIT deben aparecer como texto destacado.

22
Versión Mayo 2021
 Los nombres de las instituciones o empresas, como Consorcio de la World Wide Web o

Universidad de Oxford, deben aparecer como texto enfatizado.

Código base

Tim Berners-Lee
Sir Timothy "Tim" John Berners-Lee (Londres, Reino Unido, 8 de junio de 1955) es un científico de la
computación británico, conocido por ser el padre de la Web. Estableció la primera comunicación entre un cliente y
un servidor usando el protocolo HTTP en noviembre de 1989. En octubre de 1994 fundó el Consorcio de la World
Wide Web (W3C) con sede en el MIT, para supervisar y estandarizar el desarrollo de las tecnologías sobre las que
se fundamenta la Web y que permiten el funcionamiento de Internet.
Biografía
Nació en el sudoeste de Londres en 1955. Sus padres eran matemáticos y formaron parte del equipo que
construyó el Manchester Mark I (una de las primeras computadoras). Durante el tiempo que estuvo en la
universidad, construyó una computadora con una soldadora, circuitos TTL, un procesador Motorola 68000 y un
televisor viejo. Se graduó en física en 1976 en el Queen's College de la Universidad de Oxford. Conoció a su
primera esposa en este periodo. En 1978, trabajó en D.G. Nash Limited (también en Poole) escribió un sistema
operativo.
Desarrollo de su carrera
Berners-Lee trabajó en el CERN desde junio hasta diciembre de 1980. Durante ese tiempo, propuso un
proyecto basado en el hipertexto para facilitar la forma de compartir y la puesta al día de la información entre
investigadores. En este periodo también construyó un programa llamado Enquire que no llegó a ver la luz.
Después de dejar el CERN, en 1980, se fue a trabajar a la empresa de John Poole Image Computer Systems
Ltd., pero regresó al CERN otra vez en 1984.
En 1989, el CERN era el nodo de Internet más grande de Europa y Berners-Lee vio la oportunidad de unir
Internet y el hipertexto (HTTP y HTML), de lo que surgiría la World Wide Web. Desarrolló su primera propuesta de
la Web en marzo de 1989, pero no tuvo mucho eco, por lo que en 1990 y con la ayuda de Robert Cailliau, hicieron
una revisión que fue aceptada por su gerente, Mike Sendall. Usó ideas similares a las que había usado en el sistema
Enquire para crear la World Wide Web, para esto diseñó y construyó el primer navegador (llamado WorldWideWeb
y desarrollado con NextStep) y el primer servidor web al que llamó httpd (HyperText Transfer Protocol daemon).

Actividad 6

Debes crear una página web que tenga el mismo aspecto que la siguiente imagen:

Los enlaces que aparecen en la página deben tener los siguientes destinos:

Tim Berners-Lee → http://es.wikipedia.org/wiki/Tim_Berners-Lee

Web → http://es.wikipedia.org/wiki/World_Wide_Web

HTML → https://es.wikipedia.org/wiki/HTML

23
Versión Mayo 2021
 HTTP → https://es.wikipedia.org/wiki/Protocolo_de_transferencia_de_hipertexto

URL → https://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme

Actividad 7

A partir del texto que se te proporciona, debes crear una página web que tenga el mismo

aspecto que la siguiente imagen:

Actividad 8

Crear una lista de definición para los términos: HTML, CSS, JavaScript y PHP.

Actividad 9

Corrige los errores que presenta el código base que se te proporciona:

<html>
<head>
<title>World Wide Web</title>
<body>
</head>
<h1>World Wide Web</h1>
<p>
En informática, la <strong><em>World Wide Web</strong></em> (WWW) o
Red informática mundial comúnmente conocida como la web, es un sistema

24
Versión Mayo 2021
 de distribución de documentos de hipertexto o hipermedios
interconectados y accesibles vía Internet. Con un navegador web, un
usuario visualiza sitios web compuestos de páginas web que pueden
contener texto, imágenes, vídeos u otros contenidos multimedia, y
navega a través de esas páginas usando hiperenlaces.
<h2>Historia</h2>
<p>
La web se desarrolló entre marzo de 1989 y diciembre de 1990 por el
inglés Tim Berners-Lee con la ayuda del belga Robert Cailliau mientras
trabajaban en el CERN en Ginebra, Suiza, y publicado en 1992.
</p>
<p>
Desde entonces, Berners-Lee ha jugado un papel activo guiando el
desarrollo de estándares web (como los lenguajes de marcado con los
que se crean las páginas web), y en los últimos años ha abogado por su
visión de una web semántica.
</html>
Actividad 10

Crear una página web que tenga el mismo aspecto que la siguiente imagen:

25
Versión Mayo 2021
 Recursos – Semana I

Vídeos

• 10 consejos para crear tu pagina web.

https://www.youtube.com/watch?v=N0lS3zhf318

• Etiquetas para Textos. https://www.youtube.com/watch?v=TNQleomUw6U

• Listas. https://www.youtube.com/watch?v=IRbEXqBBOCo

Presentaciones

• Páginas web. https://es.slideshare.net/LauraCatalinaBeltranDiaz/pginas-web-

72289810

• Diseño de páginas con HTML. https://slideplayer.es/slide/3486034/

• Lenguaje HTML introducción. https://www.slideserve.com/adelio/lenguaje-html-

introducci-n

Lecturas complementarias

• Introducción a la programación web. http://88.27.64.138/files/1538608962_web-

47.pdf

• Qué Es HTML. https://codigofacilito.com/articulos/que-es-html

• Tutorial básico de HTML: crea tu propio proyecto web.

https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/aprende-html-tutorial-

para-principiantes/

26
Versión Mayo 2021
 Semana II

Contenido

Lunes – Semana II............................................................................................................. 29

Tablas ................................................................................................................................ 29

Fusión de columnas. .................................................................................................. 30

Fusión de filas. .......................................................................................................... 31

Martes – Semana II ........................................................................................................... 33

Formularios ....................................................................................................................... 33

Elementos de formulario. .......................................................................................... 34

Miércoles – Semana II ...................................................................................................... 42

Áreas de texto (<textarea> ................................................................................................ 42

Listas deplegables (<select>) ............................................................................................ 42

Agrupando elementos del formulario................................................................................ 43

Etiqueta <label> ................................................................................................................ 44

Etiqueta HTML de audio .................................................................................................. 45

Formatos de audio soportados................................................................................... 45

Etiqueta HTML de video .................................................................................................. 45

Formatos de video soportados................................................................................... 46

div y span HTML .............................................................................................................. 46

Jueves – Semana II ............................................................................................................ 48

27
Versión Mayo 2021
Metainformación ............................................................................................................... 48

Estructura de la cabecera. .......................................................................................... 48

Metadatos. ................................................................................................................. 49

Actividades – Semana II ................................................................................................... 51

Recursos – Semana II ........................................................................................................ 55

28
Versión Mayo 2021
 Lunes – Semana II

Tablas

Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos

que los que se utilizan en cualquier otro entorno de publicación de documentos.

Figura 4. Partes que componen una tabla compleja. Fuente: (Eguiluz)

Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la

tabla, <tr> para crear cada fila y <td> para crear cada columna.

A continuación, se muestra el código HTML de una tabla sencilla:

<html>
<head><title>Ejemplo de tabla sencilla</title></head>
<body>
<h1>Listado de cursos</h1>
<table>
<tr>
<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td>
</tr>
<tr>
<td>CSS</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>

29
Versión Mayo 2021
 <tr>
<td>HTML</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>Dreamweaver</td>
<td>60</td>
<td>16:00 - 20:00</td>
</tr>
</table>
</body>
</html>
La etiqueta <table> encierra todas las filas y columnas de la tabla. Las etiquetas <tr> (del

inglés "table row") definen cada fila de la tabla y encierran todas las columnas. Por último, la

etiqueta <td> (del inglés "table data cell") define cada una de las columnas de las filas, aunque

realmente HTML no define columnas sino celdas de datos.

Al definir una tabla, se debe pensar en primer lugar en las filas que la forman y a

continuación en las columnas. El motivo es que HTML procesa primero las filas y por eso las

etiquetas <tr> aparecen antes que las etiquetas <td>.

Normalmente, algunas de las celdas de la tabla se utilizan como cabecera de las demás

celdas de la fila o de la columna. En este caso, HTML define la etiqueta <th> (del inglés "table

header cell") para indicar que una celda es cabecera de otras celdas.

Fusión de columnas.

Todas las filas de una tabla HTML deben tener el mismo número de columnas. Por lo

tanto, si se quieren mostrar menos columnas en una fila, se fusionan mediante el

atributo colspan, que indica el número de columnas simples que va a ocupar una determinada

celda.

30
Versión Mayo 2021
 Figura 5. Fusión de columnas. Fuente: (Eguiluz)

<table>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
La primera fila de la tabla está formada sólo por una columna, mientras que la segunda

fila está formada por dos columnas. En el ejemplo anterior, la celda de la primera fila debe

ocupar el espacio de dos columnas simples, por lo que el código HTML debe ser <td

colspan="2">A</td>.

Fusión de filas.

La fusión de filas debe indicarse de forma especial. Como las tablas HTML tienen que ser

regulares, todas las columnas deben tener el mismo número de filas. Se fusionan mediante el

atributo rowspan.

Figura 6. Fusión de filas. Fuente: (Eguiluz)

31
Versión Mayo 2021
 <table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>

Como la segunda columna de la tabla ocupa el espacio de las dos filas, el código HTML

debe indicar claramente que esa celda va a ocupar dos filas, de manera que todas las columnas de

la tabla cuenten con el mismo número de filas.

32
Versión Mayo 2021
 Martes – Semana II

Formularios

Un formulario es un conjunto de controles (botones, cajas de texto, casillas de

verificación, botones radio, etc) que permiten al usuario introducir datos y enviarlos al servidor

web para su procesamiento.

Los formularios más sencillos se pueden crear utilizando solamente dos

etiquetas: <form> y <input>.

La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros de

texto, listas desplegables) y la etiqueta <input> permite definir varios tipos diferentes de

elementos (botones y cuadros de texto).

La mayoría de formularios utilizan sólo los atributos action y method. El

atributo action indica la URL de la aplicación del servidor que se encarga de procesar los datos

introducidos por los usuarios. Esta aplicación también se encarga de generar la respuesta que

muestra el navegador.

El atributo method establece la forma en la que se envian los datos del formulario al

servidor. Este atributo hace referencia al método HTTP, por lo que no es algo propio de HTML.

Los dos valores que se utilizan en los formularios son GET y POST. De esta forma, casi todos

los formularios incluyen el atributo method="get" o el atributo method="post".

Al margen de otras diferencias técnicas, el método POST permite el envío de mucha más

información que el método GET. En general, el método GET admite como máximo el envío de

unos 500 bytes de información. La otra gran limitación del método GET es que no permite el

envío de archivos adjuntos con el formulario. Además, los datos enviados mediante GET se ven

33
Versión Mayo 2021
en la barra de direcciones del navegador (se añaden al final de la URL de la página), mientras

que los datos enviados mediante POST no se pueden ver tan fácilmente.

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.

Atributos.

type = "text | password | checkbox | radio | submit | reset | file | hidden | button |…" -

Indica el tipo de control que se incluye en el formulario.

name = "texto" - Asigna un nombre al control (es imprescindible para que el servidor

pueda procesar el formulario).

value = "texto" - Valor inicial del control.

size = "unidad_de_medida" - Tamaño inicial del control (para los campos de texto y de

password se refiere al número de caracteres, en el resto de controles se refiere a su tamaño en

píxel).

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.

34
Versión Mayo 2021
 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.

placeholder = "texto" - Útil para guiar al usuario sobre el tipo de contenido a rellenar en

el formulario.

Required - Establecer que un input de formulario sea de rellenado obligatorio.

Cuadro de texto.

Se trata del elemento más utilizado en los formularios. En el caso más sencillo, se

muestra un cuadro de texto vacío en el que el usuario puede escribir cualquier texto:

Figura 7. Ejemplo de etiqueta input (type=text). Fuente: elaboración propia (2020).

A continuación se muestra el código HTML correspondiente al ejemplo anterior:

Nombre <br/>

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

Cuadro de contraseña.

La única diferencia entre este control y el cuadro de texto normal es que el texto que el

usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su lugar, los navegadores

ocultan el texto utilizando asteriscos o círculos, por lo que es ideal para escribir contraseñas y

otros datos sensibles.

Figura 8. Ejemplo de etiqueta input (type=password). Fuente: elaboración propia (2020).

Contraseña <br/>

35
Versión Mayo 2021
 <input type="password" name="contrasena" value="" />

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.

Figura 9. Ejemplo de etiqueta input (type=checkbox) Fuente: elaboración propia (2020).

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.

36
Versión Mayo 2021
 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

Radiobutton.

Los controles de tipo radiobutton son similares a los controles de tipo checkbox, pero

presentan una diferencia muy importante: son mutuamente excluyentes. Los radiobutton se

utilizan cuando el usuario solamente puede escoger una opción entre las distintas opciones

relacionadas que se le presentan. Cada vez que se selecciona una opción, automáticamente se

deselecciona la otra opción que estaba seleccionaba.

Figura 10. Ejemplo de etiqueta input (type=radio). Fuente: elaboración propia (2020).

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.

37
Versión Mayo 2021
 Botón de envío de formulario.

La mayoría de formularios dispone de un botón para enviar al servidor los datos

introducidos por el usuario:

Figura 11. Ejemplo de etiqueta input (type=submit). Fuente: elaboración propia (2020).

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

El valor del atributo type para este control de formulario es submit. El navegador se

encarga de enviar automáticamente los datos cuando el usuario pincha sobre este tipo de botón.

El valor del atributo value es el texto que muestra el botón. Si no se establece el atributo value, el

navegador muestra el texto predefinido Enviar.

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:

Figura 12. Ejemplo de etiqueta input (type=reset). Fuente: elaboración propia (2020).

<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

38
Versión Mayo 2021
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.

Ficheros adjuntos.

Los formularios también permiten adjuntar archivos para subirlos al servidor. Aunque

desde el punto de vista de HTML y del navegador no existe ninguna limitación sobre el número,

tipo o tamaño total de los archivos que se pueden adjuntar, todos los servidores añaden

restricciones por motivos de seguridad.

Figura 13. Ejemplo de etiqueta input (type=file). Fuente: elaboración propia (2020).

Fichero adjunto

<input type="file" name="adjunto" />

El valor del atributo type para este control de formulario es file. El navegador se encarga

de mostrar un cuadro de texto donde aparece el nombre del archivo seleccionado y un botón que

permite navegar por los directorios y archivos del ordenador del usuario.

Si se incluye un control para adjuntar archivos, es obligatorio añadir el atributo

enctype en la etiqueta <form> del formulario. El valor del atributo enctype debe ser

multipart/form-data, por lo que la etiqueta <form> de los formularios que permiten adjuntar

archivos siempre es:

<form action="..." method="post" enctype="multipart/form-data">

39
Versión Mayo 2021
 ...

</form>

Campos ocultos.

Los campos ocultos se emplean para añadir información oculta en el formulario:

Figura 14. Ejemplo de etiqueta input (type=hidden). Fuente: elaboración propia (2020).

<input type="hidden" name="url_previa" value="/articulo/primero.html" />

El valor del atributo type para este control de formulario es hidden. Los campos ocultos

no se muestran por pantalla, de forma que el usuario desconoce que el formulario los incluye.

Normalmente los campos ocultos se utilizan para incluir información que necesita el servidor

pero que no es necesario o no es posible que la establezca el usuario.

Botón.

Algunos formularios complejos necesitan botones más avanzados que los de enviar datos

(type="submit") y resetear el formulario (type="reset"). Por ese motivo, el estándar

HTML/XHTML define un botón de tipo genérico:

Figura 15. Ejemplo de etiqueta input (type=button). Fuente: elaboración propia (2020).

<input type="button" name="guardar" value="Guardar Cambios" />

El valor del atributo type para este control de formulario es button. Si pruebas a pulsar un

botón de este tipo, verás que el navegador no hace nada: no envía los datos al servidor y no borra

los datos introducidos. Este tipo de botones sólo son útiles si se utilizan junto con el lenguaje de

40
Versión Mayo 2021
programación JavaScript. Si la página incluye código JavaScript, los botones de este tipo se

pueden programar para que realicen cualquier tarea compleja cuando se pulsa sobre ellos.

En HTML5 se introducen otros tipos más: datalist, keygen, output, number, range, tel,

email, color, search, url, date, datetime, datetime-local, month, time, week.

41
Versión Mayo 2021
 Miércoles – Semana II

Áreas de texto (<textarea>

Las áreas de texto son útiles cuando se debe introducir una gran cantidad de texto, ya que

es mucho más cómodo de introducir que en un campo de texto normal.

<form action="insertar_producto.php" method="post">

<label for="nombre">Nombre del producto</label> <br/>
<input type="text" id="nombre" name="nombre" value="" />
<label for="descripcion">Descripción del producto</label> <br/>
<textarea id="descripcion" name="descripcion" cols="40"
rows="5"></textarea>
</form>
Los atributos más utilizados en las etiquetas <textarea> son los que controlan su anchura

y altura. La anchura del área de texto se controla mediante el atributo cols, que indica

las columnas o número de caracteres que se podrán escribir como máximo en cada fila. La altura

del área de texto se controla mediante rows, que indica directamente las filas de texto que serán

visibles.

El principal inconveniente de los elementos <textarea> es que el lenguaje HTML no

permite limitar el número máximo de caracteres que se pueden introducir.

Listas deplegables (<select>)

La etiqueta <select> define la lista y encierra todas las opciones que muestra la lista.

Cada una de las opciones de la lista se define mediante una etiqueta <option>. El atributo value

de cada opción es obligatorio, ya que es el dato que se envía al servidor cuando el usuario envía

el formulario. Para seleccionar por defecto una opción al mostrar la lista, se añade el atributo

selected a la opción deseada.

La inmensa mayoría de listas desplegables que utilizan las aplicaciones web son simples,

por lo que el código HTML habitual de las listas desplegables es:

42
Versión Mayo 2021
 <label for="so">Sistema operativo</label> <br/>
<select id="so" name="so">
<option value="" selected="selected">- selecciona -</option>
<option value="windows">Windows</option>
<option value="mac">Mac</option>
<option value="linux">Linux</option>
<option value="otro">Otro</option>
</select>
Agrupando elementos del formulario

Utilizando solamente las etiquetas <form> y <input> es posible diseñar la mayoría de

formularios de las aplicaciones web. No obstante, HTML define algunos elementos adicionales

para mejorar la estructura de los formularios creados.

La siguiente imagen muestra un formulario que agrupa sus elementos y añade etiquetas a

cada campo para mejorar su estructura: la etiqueta <fieldset> agrupa campos del formulario y la

etiqueta <legend> asigna un nombre a cada grupo.

<form action="" method="post">

<fieldset>
<legend>Datos personales</legend>
Nombre <br/>
<input type="text" name="nombre" value="" />
<br/>
Apellidos <br/>
<input type="text" name="apellidos" value="" />
<br/>
Cédula <br/>
<input type="text" name="ced" value="" size="10" maxlength="10" />
</fieldset>

<fieldset>
<legend>Datos de conexión</legend>
Nombre de usuario<br/>
<input type="text" name="nombre" value="" maxlength="10" />
<br/>
Contraseña<br/>

43
Versión Mayo 2021
 <input type="password" name="password" value="" maxlength="10" />
<br/>
Repite la contraseña<br/>
<input type="password" name="password2" value="" maxlength="10" />
</fieldset>
</form>
La etiqueta <fieldset> agrupa todos los controles de formulario a los que encierra. El

navegador muestra por defecto un borde resaltado para cada agrupación. La etiqueta <legend> se

incluye dentro de cada etiqueta <fieldset> y establece el título que muestra el navegador para

cada agrupación de elementos.

Etiqueta <label>

Se emplea para definir el título o leyenda de los campos definidos en un formulario. El

único atributo que suele utilizarse con la etiqueta <label> es for, que indica el identificador

(atributo id) del campo de formulario para el que esta etiqueta hace de título.

<label for="nombre">Nombre</label> <br/>

<input type="text" id="nombre" name="nombre" value="" />
<label for="apellidos">Apellidos</label> <br/>
<input type="text" id="apellidos" name="apellidos" value="" />
<label for="dni">Cédula</label> <br/>
<input type="text" id="ced" name="ced" value="" size="10"
maxlength="10" />
La principal ventaja de utilizar <label> es que el código HTML está mejor estructurado y

se mejora su accesibilidad. Además, al pinchar sobre el texto del <label>, el puntero del ratón se

posiciona automáticamente para poder escribir sobre el campo de formulario asociado. Este

comportamiento es especialmente útil para los campos de tipo radiobutton y checkbox.

44
Versión Mayo 2021
Etiqueta HTML de audio

Es posible añadir archivos de audio a nuestras páginas web para colocar música, sonidos

o simplemente usar música como ambientación.

En este caso, utilizaremos la etiqueta <audio> que funciona exactamente igual

que <video>, pero con relación a archivos de audio.

La etiqueta <audio> tiene varios atributos:

src = url. Audio a reproducir. Obligatoria si actua como etiqueta contenedora.

preload = auto | metadata | none. Indica como realizar la precarga del audio.

autoplay. Comienza a reproducir el video automáticamente.

loop. Vuelve a iniciar el video cuando finaliza su reproducción (bucle).

muted. Establece el audio sin sonido (silenciado).

controls. Muestra los controles de reproducción. Por defecto no se muestran.

Un ejemplo básico para colocar un audio en nuestra página web:

<audio src="audio.mp3" controls ></audio>

Formatos de audio soportados.

Los archivos de audio estan codificados mediante un codec específico, y es importante

conocer estos detalles para saber que formatos están soportados por los diferentes navegadores.

A continuación un listado de los formatos/codecs de audio más conocidos y utilizados:

mp3, ogg, aac, opus, flac, wav.

Etiqueta HTML de video

En HTML5 se introduce la posibilidad de mostrar videos directamente desde nuestro

navegador. De hecho, si arrastramos un video a la ventana del navegador, veremos que comienza

a reproducirse en él. Para poder insertar videos en nuestras páginas HTML tenemos que utilizar

45
Versión Mayo 2021
la etiqueta <video>, que junto a la etiqueta <source> podremos utilizar estas capacidades

multimedia de HTML5.

La etiqueta <video> tiene varios atributos:

src = url. Video a reproducir. Obligatoria si actua como etiqueta contenedora.

poster = url. Muestra una imagen a modo de presentación.

preload = auto | metadata | none. Indica como realizar la precarga del video.

autoplay. Comienza a reproducir el video automáticamente.

loop. Vuelve a iniciar el video cuando finaliza su reproducción (bucle).

muted. Establece el video sin sonido (silenciado).

controls. Muestra los controles de reproducción. Por defecto no se muestran.

Un ejemplo básico para colocar un video en nuestra página web:

<video src="video.mp4" controls ></video>

Formatos de video soportados.

A continuación tenemos un listado de los formatos/codecs de video más conocidos y

utilizados: mp4, webm, ogv, mkv, avi, hecv.

Otros formatos como MOV, FLV, 3GP, MPG, RMVB o ASF (WMV) no se recomiendan

para su utilización en web ya que son anticuados, propietarios o poco eficientes.

div y span HTML

Los tags div y span no tienen ningún significado especial, sólo que la primera se define

como un elemento bloque y la segunda es un elemento de línea.

Cuando se utilizan actualmente en un documento web, se pueden utilizar para establecer

opciones de formato mediante hojas de estilo a bloques completos o elementos individuales del

documento.

46
Versión Mayo 2021
47
Versión Mayo 2021
 Jueves – Semana II

Metainformación

Las páginas y documentos HTML incluyen más información de la que los usuarios ven

en sus pantallas. Estos datos adicionales siempre están relacionados con la propia página, por lo

que se denominan metainformación o metadatos. La metainformación siempre se incluye en la

sección de la cabecera, es decir, dentro de la etiqueta <head>.

Aunque la metainformación más conocida y utilizada es el título de la propia página, se

puede incluir mucha otra información útil para los navegadores y para los buscadores.

Estructura de la cabecera.

Como ya se explicó anteriormente, las páginas HTML se dividen en dos partes

denominadas cabecera y cuerpo. La sección de la cabecera está formada por todas las etiquetas

encerradas por la etiqueta <head>.

La cabecera típica de una página HTML completa presenta la siguiente estructura:

<head>
<!-- Zona de etiquetas META -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- Zona de título -->

<title>El título del documento</title>

<!-- Zona de recursos enlazados (CSS, RSS, JavaScript) -->

<link rel="stylesheet" href="#" type="text/css" media="screen" />
<link rel="stylesheet" href="#" type="text/css" media="print" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0"
href="#" />
<script src="#" type="text/javascript"></script>
</head>

48
Versión Mayo 2021
 Etiqueta <title>.

<title>El título del documento</title>

La etiqueta <title> establece el título de la página. Los navegadores muestran este título

como título de la propia ventana del navegador. Los buscadores utilizan este título como título de

sus resultados de búsqueda.

Por tanto, el valor de <title> no sólo es importante para los usuarios, sino que también es

importante para que los usuarios encuentren las páginas a través de los buscadores. Cada página

debe mostrar un título corto, adecuado, único y que describa inequívocamente los contenidos de

la página.

Metadatos.

Una de las partes más importantes de la metainformación de la página son los metadatos,

que permiten incluir cualquier información relevante sobre la propia página.

La especificación oficial de HTML no define la lista de metadatos que se pueden incluir,

por lo que las páginas tienen libertad absoluta para definir los metadatos que consideren

adecuados. La etiqueta empleada para la definición de los metadatos es <meta>.

Atributos de la etiqueta <meta>.

name = "texto" - El nombre de la propiedad que se define (no existe una lista oficial de

propiedades).

content = "texto" - El valor de la propiedad definida (no existe una lista de valores

permitidos).

http-equiv = "texto" - En ocasiones, reemplaza al atributo “name” y lo emplean los

servidores para adaptar sus respuestas al documento.

scheme = "texto" - Indica el esquema que se debe emplear para interpretar el valor de la

propiedad.

49
Versión Mayo 2021
 Metadatos más utilizados

Aunque no existe una lista oficial con los metadatos que se pueden definir, algunos de

ellos se utilizan en tantas páginas que se han convertido prácticamente en un estándar. A

continuación se muestran los metadatos más utilizados:

Definir el autor del documento:

<meta name="author" content="Juan Pérez" />

Definir el programa con el que se ha creado el documento:

<meta name="generator" content="WordPress 2.8.4" />

Definir la codificación de caracteres del documento:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Definir el copyright del documento:

<meta name="copyright" content="ITECSUR" />

Definir el comportamiento de los buscadores:

<meta name="robots" content="index, follow" />

Definir las palabras clave que definen el contenido del documento:

<meta name="keywords" content="diseño, css, hojas de estilos, web, html" />

Definir una breve descripción del sitio:

<meta name="description" content="Artículos sobre diseño web, usabilidad y

accesibilidad" />

50
Versión Mayo 2021
 Actividades – Semana II

Actividad 1

Crear una página web que tenga el mismo aspecto que la siguiente imagen:

Actividad 2

Crear una página web que tenga el mismo aspecto que la siguiente imagen:

51
Versión Mayo 2021
Actividad 3

Crear una página web que tenga el mismo aspecto que la siguiente imagen:

Actividad 4

Crear una página web que tenga el mismo aspecto que la siguiente imagen:

52
Versión Mayo 2021
Actividad 5

Determinar el código HTML necesario para crear el formulario que se muestra en la

siguiente imagen:

Actividad 6

Determinar el código HTML necesario para crear el formulario que se muestra en la

siguiente imagen:

53
Versión Mayo 2021
Actividad 7

Cree una web donde se inserte un audio.

Actividad 8

Cree una web donde se inserte un video.

Actividad 9

Realice un mapa mental sobre metainformación de HTML.

Actividad 10.

Explique los metadatos más populares.

54
Versión Mayo 2021
 Recursos – Semana II

Vídeos

• Tablas. https://www.youtube.com/watch?v=LmSUS6MuSzk

• Formularios. https://www.youtube.com/watch?v=QDOfODwsfuQ

• Metadatos y otras etiquetas. https://www.youtube.com/watch?v=eCV_-IHs5xQ

Presentaciones

• Tablas HTML. https://es.slideshare.net/KarySandovalP/tablas-html-48772261

• HTML Forms. https://es.slideshare.net/ravi_LCET/html-forms-64770978

• Introducción a metadatos. https://es.slideshare.net/anansi/introduccin-a-metadatos

Lecturas complementarias

• Tablas en HTML. Https://www.htmlquick.com/es/tutorials/tables.html

• Elemento form. Https://www.htmlquick.com/es/reference/tags/form.html

• ¿Qué son los Metadatos y para qué sirven? https://www.wpdoctor.es/que-son-

metadatos-para-que-sirven/

55
Versión Mayo 2021
 Semana III

Contenido

Lunes – Semana III ........................................................................................................... 58

CSS.................................................................................................................................... 58

Cómo incluir CSS en un documento HTML. ........................................................... 58

Definir CSS en un archivo externo. .......................................................................... 59

Incluir CSS en los elementos HTML. ....................................................................... 60

Conceptos básicos en CSS. ....................................................................................... 61

Comentarios en CSS. ................................................................................................ 62

Martes – Semana III .......................................................................................................... 63

Selectores en CSS ............................................................................................................. 63

Selectores básicos...................................................................................................... 63

Selectores avanzados. ................................................................................................ 67

Unidades de medida y colores en CSS.............................................................................. 70

Unidades de medida. ................................................................................................. 70

Colores. ..................................................................................................................... 72

Miércoles – Semana III ..................................................................................................... 75

Modelo de cajas en CSS.................................................................................................... 75

Anchura y altura ........................................................................................................ 77

Margen y relleno. ...................................................................................................... 78

56
Versión Mayo 2021
Jueves – Semana III .......................................................................................................... 81

Bordes en CSS................................................................................................................... 81

Fondos en CSS .................................................................................................................. 82

background-color. ..................................................................................................... 82

background-image. .................................................................................................... 83

background-repeat. .................................................................................................... 83

background-position.................................................................................................. 83

background-attachment. ............................................................................................ 85

background. ............................................................................................................... 85

Actividades – Semana III .................................................................................................. 86

Recursos – Semana III ...................................................................................................... 93

57
Versión Mayo 2021
 Lunes – Semana III

CSS

CSS es el segundo lenguaje más básico y esencial para crear páginas web. El primero

sería HTML, con el que se define el contenido de la página.

Las siglas de CSS son “Cascade Style Sheet”, en español hojas de estilo en cascada.

CSSes un lenguaje que nos permite otorgar atributos a los elementos de los documentos

realizados en HTML (HiperText Markup Languaje, en español lenguaje de marcado de

hipertexto); CSS permite realizar una separación del diseño (formato y estilos) de los

contenidos de las páginas webs. Es importante resaltar que, hay características que ofrece

CSS y que también se pueden realizar con HTML, pero CSS tiene una mayor cantidad de

opciones para personalizar los elementos de una página web en general (Condor & Soria,

2015).

CSS es un lenguaje que consiste en una serie de elementos mediante los cuales se

declaran los estilos.

Cómo incluir CSS en un documento HTML.

Existen tres opciones para incluir CSS en un documento HTML.

Incluir CSS en el mismo documento HTML.

Los estilos se definen en una zona específica del propio documento HTML. Se emplea la

etiqueta <style> de HTML (solamente se debería incluir en la cabecera del documento, es decir

sólo dentro de la sección <head>).

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS en el propio documento</title>
<style type="text/css">

58
Versión Mayo 2021
 p { color: black; font-family: Verdana; }
</style>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Este método se emplea cuando se define un número pequeño de estilos o cuando se

quieren incluir estilos específicos en una determinada página HTML que completen los estilos

que se incluyen por defecto en todas las páginas del sitio web.

Definir CSS en un archivo externo.

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas

HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo

simple de texto cuya extensión es .css. Se pueden crear todos los archivos CSS que sean

necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite.

Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben

seguir los siguientes pasos:

1. Se crea un archivo y se le añade solamente el siguiente contenido:

p { color: black; font-family: Verdana; }

2. Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial

atención a que el archivo tenga extensión .css

3. En la página HTML se enlaza el archivo CSS externo mediante la etiqueta <link>:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css"
media="screen" />
</head>

59
Versión Mayo 2021
 <body>
<p>Un párrafo de texto.</p>
</body>
</html>
Cuando el navegador carga la página HTML anterior, antes de mostrar sus contenidos

también descarga los archivos CSS externos enlazados mediante la etiqueta <link> y aplica los

estilos a los contenidos de la página. De todas las formas de incluir CSS en las páginas HTML,

esta es la más utilizada.

La etiqueta <link>, generalmente incluye tres atributos cuando enlaza un archivo CSS:

• rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el

archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el

valor stylesheet.

• type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los

archivos CSS su valor siempre es text/css.

• href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede

ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.

Incluir CSS en los elementos HTML.

El último método para incluir estilos CSS en documentos HTML es el peor y el menos

utilizado.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>CSS en el propio documento</title>
</head>
<body>
<p style="color: black; font-family: Arial;">Un párrafo de texto.</p>
</body>
</html>

60
Versión Mayo 2021
 Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en

determinadas situaciones en las que se debe incluir un estilo muy específico para un solo

elemento concreto.

Conceptos básicos en CSS.

CSS define una serie de términos que permiten describir cada una de las partes que

componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS

muy básico:

Figura 16. Componentes de un estilo CSS básico. Fuente: (Eguiluz, Introducción a CSS)

Los diferentes términos se definen a continuación:

Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está

compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte

denominada "declaración" y por último, un símbolo de "llave de cierre" (}).

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

Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una

o más propiedades CSS.

Propiedad: característica que se modifica en el elemento seleccionado, como por ejemplo

su tamaño de letra, su color de fondo, etc.

Valor: establece el nuevo valor de la característica modificada en el elemento.

61
Versión Mayo 2021
 Un archivo CSS puede contener un número ilimitado de reglas CSS, cada regla se puede

aplicar a varios selectores diferentes y cada declaración puede incluir tantos pares

propiedad/valor como se desee.

Comentarios en CSS.

CSS permite incluir comentarios entre sus reglas y estilos. Los comentarios son

contenidos de texto que el diseñador incluye en el archivo CSS para su propia información y

utilidad. Los navegadores ignoran por completo cualquier comentario de los archivos CSS, por

lo que es común utilizarlos para estructurar de forma clara los archivos CSS complejos.

El comienzo de un comentario se indica mediante los caracteres /* y el final del

comentario se indica mediante */, tal y como se muestra en el siguiente ejemplo:

/* Este es un comentario en CSS */

Los comentarios pueden ocupar tantas líneas como sea necesario, pero no se puede incluir

un comentario dentro de otro comentario.

62
Versión Mayo 2021
 Martes – Semana III

Selectores en CSS

Los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una

página. Estos indican "a quién se hace el estilo". Para crear diseños web profesionales, es

imprescindible conocer y dominar los selectores de CSS.

Selectores básicos.

Selector universal.

Se utiliza para seleccionar todos los elementos de la página, se indica mediante un

asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo

estilo se pueda aplicar a todos los elementos de una página.

* {
…
}
Selector de tipo o etiqueta.

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor

del selector. El siguiente ejemplo selecciona todos los párrafos de la página:

p {
...
}
Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta

HTML (sin los caracteres < y >) correspondiente a los elementos que se quieren seleccionar.

Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los

selectores:

h1, h2, h3 {
color: #8A8E27;
font-family: Arial, Helvetica, sans-serif;
}

63
Versión Mayo 2021
 Selector descendente.

Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es

descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro

elemento.

El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que

se encuentren dentro de un elemento <p>:

p span { color: red; }

Si el código HTML de la página es el siguiente:

<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
El selector p span selecciona tanto texto1 como texto2. El motivo es que en el selector

descendente, un elemento no tiene que ser descendiente directo del otro. La única condición es

que un elemento debe estar dentro de otro elemento, sin importar el nivel de profundidad en el

que se encuentre.

La sintaxis formal del selector descendente se muestra a continuación:

selector1 selector2 selector3 ... selectorN

Los selectores descendentes siempre están formados por dos o más selectores separados

entre sí por espacios en blanco. El último selector indica el elemento sobre el que se aplican los

estilos y todos los selectores anteriores indican el lugar en el que se debe encontrar ese elemento.

Selector de clase.

Si se considera el siguiente código HTML de ejemplo:

<body>

64
Versión Mayo 2021
 <p>Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
Surge la pregunta de cómo se pueden aplicar estilos CSS sólo al primer párrafo, el

selector universal (*) no se puede utilizar porque selecciona todos los elementos de la página. El

selector de tipo o etiqueta (p) tampoco se puede utilizar porque seleccionaría todos los párrafos.

Por último, el selector descendente (body p) tampoco se puede utilizar porque todos los párrafos

se encuentran en el mismo sitio.

Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página

consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la

regla CSS que se le debe aplicar:

<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
A continuación, se crea en el archivo CSS una nueva regla llamada destacado con todos

los estilos que se van a aplicar al elemento. Para que el navegador no confunda este selector con

los otros tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y como

muestra el siguiente ejemplo:

.destacado { color: red; }

El selector .destacado se interpreta como "cualquier elemento de la página cuyo

atributo class sea igual a destacado", por lo que solamente el primer párrafo cumple esa

condición.

65
Versión Mayo 2021
 Este tipo de selectores se llaman selectores de clase y son los más utilizados junto con los

selectores de ID. La principal característica de este selector es que en una misma página HTML

varios elementos diferentes pueden utilizar el mismo valor en el atributo class:

<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et <a href="#" class="destacado">est
adipiscing</a> accumsan...</p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em>
litora...</p>
</body>
Selectores de ID.

En ocasiones, es necesario aplicar estilos CSS a un único elemento de la página. Aunque

puede utilizarse un selector de clase para aplicar estilos a un único elemento, existe otro selector

más eficiente en este caso.

El selector de ID permite seleccionar un elemento de la página a través del valor de su

atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del

atributo id no se puede repetir en dos elementos diferentes de una misma página.

La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo

que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la

regla CSS:

#destacado { color: red; }

<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>
En el ejemplo anterior, el selector #destacado solamente selecciona el segundo párrafo

(cuyo atributo id es igual a destacado).

66
Versión Mayo 2021
 La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con

HTML y no con CSS. Como se sabe, en una misma página, el valor del atributo id debe ser

único, de forma que dos elementos diferentes no pueden tener el mismo valor de id. Sin

embargo, el atributo class no es obligatorio que sea único, de forma que muchos elementos

HTML diferentes pueden compartir el mismo valor para su atributo class.

De esta forma, la recomendación general es la de utilizar el selector de ID cuando se

quiere aplicar un estilo a un solo elemento específico de la página y utilizar el selector de clase

cuando se quiere aplicar un estilo a varios elementos diferentes de la página HTML.

Selectores avanzados.

Selector de hijos.

Se trata de un selector similar al selector descendente, pero muy diferente en su

funcionamiento. Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se

indica mediante el "signo de mayor que" (>):

p > span { color: blue; }

<p><span>Texto1</span></p>
<p><a href="#"><span>Texto2</span></a></p>
En el ejemplo anterior, el selector p > span se interpreta como "cualquier elemento

<span> que sea hijo directo de un elemento <p>", por lo que el primer elemento <span> cumple

la condición del selector. Sin embargo, el segundo elemento <span> no la cumple porque es

descendiente pero no es hijo directo de un elemento <p>.

Selector adyacente.

El selector adyacente se emplea para seleccionar elementos que en el código HTML de la

página se encuentran justo a continuación de otros elementos. Su sintaxis emplea el signo + para

separar los dos elementos:

67
Versión Mayo 2021
 elemento1 + elemento2 { ... }
Si se considera el siguiente código HTML:

<body>
<h1>Titulo1</h1>
<h2>Subtítulo</h2>
...
<h2>Otro subtítulo</h2>
...
</body>
La página anterior dispone de dos elementos <h2>, pero sólo uno de ellos se encuentra

inmediatamente después del elemento <h1>. Si se quiere aplicar diferentes colores en función de

esta circunstancia, el selector adyacente es el más adecuado:

h2 { color: green; }
h1 + h2 { color: red }
Las reglas CSS anteriores hacen que todos los <h2> de la página se vean de color verde,

salvo aquellos <h2> que se encuentran inmediatamente después de cualquier elemento <h1> y

que se muestran de color rojo.

Técnicamente, los elementos que forman el selector adyacente deben cumplir las dos

siguientes condiciones:

• elemento1 y elemento2 deben ser elementos hermanos, por lo que su elemento padre

debe ser el mismo.

• elemento2 debe aparecer inmediatamente después de elemento1 en el código HTML

de la página.

Selector de atributos.

Permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos

atributos. Los cuatro tipos de selectores de atributos son:

68
Versión Mayo 2021
• [nombre_atributo], selecciona los elementos que tienen establecido el atributo

llamado nombre_atributo, independientemente de su valor.

• [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo

llamado nombre_atributo con un valor igual a valor.

• [nombre_atributo~=valor], selecciona los elementos que tienen establecido un

atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor.

• [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo

llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones,

pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de

tipo lang que indican el idioma del contenido del elemento.

A continuación se muestran algunos ejemplos de estos tipos de selectores:

/* Se muestran de color azul todos los enlaces que tengan

un atributo "class", independientemente de su valor */

a[class] { color: blue; }

/* Se muestran de color azul todos los enlaces que tengan

un atributo "class" con el valor "externo" */

a[class="externo"] { color: blue; }

/* Se muestran de color azul todos los enlaces que apunten

al sitio "http://www.ejemplo.com" */

a[href="http://www.ejemplo.com"] { color: blue; }

/* Se muestran de color azul todos los enlaces que tengan

un atributo "class" en el que al menos uno de sus valores

sea "externo" */

69
Versión Mayo 2021
 a[class~="externo"] { color: blue; }

/* Selecciona todos los elementos de la página cuyo atributo

"lang" sea igual a "en", es decir, todos los elementos en inglés */

*[lang=en] { ... }

/* Selecciona todos los elementos de la página cuyo atributo

"lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */

*[lang|="es"] { color : red }

Unidades de medida y colores en CSS

Unidades de medida.

Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de

los elementos y para establecer el tamaño de letra del texto. Todas las medidas se indican como

un valor numérico entero o decimal seguido de una unidad de medida (sin ningún espacio en

blanco entre el número y la unidad de medida).

CSS divide las unidades de medida en dos grupos: absolutas y relativas.

Unidades absolutas.

Una medida indicada mediante unidades absolutas está completamente definida, ya que

su valor no depende de otro valor de referencia:

in, pulgadas ("inches", en inglés). Una pulgada equivale a 2.54 centímetros.

cm, centímetros.

mm, milímetros.

pt, puntos. Un punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros.

pc, picas. Una pica equivale a 12 puntos, es decir, unos 4.23 milímetros.

70
Versión Mayo 2021
 La principal ventaja de las unidades absolutas es que su valor es directamente el valor que

se debe utilizar, sin necesidad de realizar cálculos intermedios. Su principal desventaja es que

son muy poco flexibles y no se adaptan fácilmente a los diferentes medios.

Unidades relativas.

Las unidades relativas, a diferencia de las absolutas, no están completamente definidas,

ya que su valor siempre está referenciado respecto a otro valor. A pesar de su aparente dificultad,

son las más utilizadas en el diseño web por la flexibilidad con la que se adaptan a los diferentes

medios.

A continuación se muestran las tres unidades de medida relativas definidas por CSS y la

referencia que toma cada una para determinar su valor real:

em, (no confundir con la etiqueta <em> de HTML) relativa respecto del tamaño de letra

del elemento.

ex, relativa respecto de la altura de la letra x ("equis minúscula") del tipo y tamaño de

letra del elemento.

px, (píxel) relativa respecto de la resolución de la pantalla del dispositivo en el que se

visualiza la página HTML.

Las unidades em y ex no han sido creadas por CSS, sino que llevan décadas utilizándose

en el campo de la tipografía. Aunque no es una definición exacta, la unidad 1em equivale a la

anchura de la letra M ("eme mayúscula") del tipo y tamaño de letra del elemento.

La unidad em hace referencia al tamaño en puntos de la letra que se está utilizando. Si se

utiliza una tipografía de 12 puntos, 1em equivale a 12 puntos. El valor de 1ex se puede

aproximar por 0.5 em.

71
Versión Mayo 2021
 Porcentajes.

El porcentaje también es una unidad de medida relativa. Un porcentaje está formado por

un valor numérico seguido del símbolo % y siempre está referenciado a otra medida. Cada una

de las propiedades de CSS que permiten indicar como valor un porcentaje, define el valor al que

hace referencia ese porcentaje.

h1 { font-size: 10%; }

Colores.

Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores

del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. Aunque el método más

habitual es el del RGB hexadecimal.

Palabras clave.

CSS define 17 palabras clave para referirse a los colores básicos. Las palabras se

corresponden con el nombre en inglés de cada color:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silv

er, teal, white, yellow.

RGB decimal.

En el campo del diseño gráfico, se han definido varios modelos para hacer referencia a

los colores. Los dos modelos más conocidos son RGB y CMYK.

En el modelo RGB un color se define indicando sus tres componentes R (rojo), G (verde)

y B (azul). Cada una de las componentes puede tomar un valor entre 0 y 255. De esta forma, el

color rojo puro en RGB se crea mediante el máximo valor de la componente R y un valor

de 0 para las componentes G y B.

72
Versión Mayo 2021
 Si todas las componentes valen 0, el color creado es el negro y si todas las componentes

toman su valor máximo, el color obtenido es el blanco.

La sintaxis que se utiliza para indicar los colores es rgb() y entre paréntesis se indican las

tres componentes RGB, en ese mismo orden y separadas por comas. El siguiente ejemplo

establece el color del texto de un párrafo:

p { color: rgb(71, 98, 176); }

RGB porcentual.

Las componentes RGB de un color también se pueden indicar mediante un porcentaje. El

funcionamiento y la sintaxis de este método es el mismo que el del RGB decimal. La única

diferencia es que en este caso el valor de las componentes RGB puede tomar valores

entre 0% y 100%. Por tanto, para transformar un valor RGB decimal en un valor RGB

porcentual, es preciso realizar una regla de tres considerando que 0 es igual a 0% y 255 es igual

a 100%.

El mismo color del ejemplo anterior se puede representar de forma porcentual:

p { color: rgb(27%, 38%, 69%); }

RGB hexadecimal.

Aunque es el método más complicado para indicar los colores, se trata del método más

utilizado con mucha diferencia. De hecho, prácticamente todos los sitios web reales utilizan

exclusivamente este método.

Definir un color en CSS con el método RGB hexadecimal requiere realizar los siguientes

pasos:

1. Determinar las componentes RGB decimales del color original, por ejemplo: R = 71,

G = 98, B = 176

73
Versión Mayo 2021
 2. Transformar el valor decimal de cada componente al sistema numérico

hexadecimal. Se trata de una operación exclusivamente matemática, por lo que

puedes utilizar una calculadora. En el ejemplo anterior, el valor hexadecimal de cada

componente es: R= 47, G = 62, B = B0

3. Para obtener el color completo en formato RGB hexadecimal, se concatenan los

valores hexadecimales de las componentes RGB en ese orden y se les añade el

prefijo #.

De esta forma, el color del ejemplo anterior es #4762B0 en formato RGB hexadecimal.

Siguiendo el mismo ejemplo de las secciones anteriores, el color del párrafo se indica de la

siguiente forma utilizando el formato RGB hexadecimal:

p { color: #4762B0; }

74
Versión Mayo 2021
 Miércoles – Semana III

Modelo de cajas en CSS

El modelo de cajas o "box model" es una de la característica más importante del lenguaje

de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de

cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se

representen mediante cajas rectangulares.

Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta

HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento. La

siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que

incluye la página:

Figura 17. Las cajas se crean automáticamente al definir cada elemento HTML. Fuente: (Eguiluz, Introducción a
CSS)

Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran

ningún color de fondo ni ningún borde.

Los navegadores crean y colocan las cajas de forma automática, pero CSS permite

modificar todas sus características. Cada una de las cajas está formada por seis partes, tal y como

muestra la siguiente imagen:

75
Versión Mayo 2021
 Figura 18. Representación tridimensional del box model de CSS. Fuente: (Eguiluz, Introducción a CSS)

Las partes que componen cada caja y su orden de visualización desde el punto de vista

del usuario son las siguientes:

• Contenido (content): se trata del contenido HTML del elemento (las palabras de un

párrafo, una imagen, el texto de una lista de elementos, etc.)

• Relleno (padding): espacio libre opcional existente entre el contenido y el borde.

• Borde (border): línea que encierra completamente el contenido y su relleno.

• Imagen de fondo (background image): imagen que se muestra por detrás del

contenido y el espacio de relleno.

• Color de fondo (background color): color que se muestra por detrás del contenido y el

espacio de relleno.

• Margen (margin): separación opcional existente entre la caja y el resto de cajas

adyacentes.

Si una caja define tanto un color como una imagen de fondo, la imagen tiene más

prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja

del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo.

76
Versión Mayo 2021
 Anchura y altura

Anchura.

La propiedad CSS que controla la anchura de la caja de los elementos se denomina width.

Se aplica a todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de

tabla y los grupos de filas de tabla. Los valores que puede tomar son:

width: unidad de medida | porcentaje | auto | inherit

La propiedad width no admite valores negativos y los valores en porcentaje se calculan a

partir de la anchura de su elemento padre. El valor inherit indica que la anchura del elemento se

hereda de su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma

explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la

anchura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.

El siguiente ejemplo establece el valor de la anchura del elemento <div> lateral:

#lateral { width: 200px; }

<div id="lateral">
...
</div>
Altura.

La propiedad CSS que controla la altura de los elementos se denomina height. Se aplica a

todos los elementos, salvo los elementos en línea que no sean imágenes, las columnas de tabla y

los grupos de columnas de tabla. Los valores que puede tomar son:

height: unidad de medida | porcentaje | auto | inherit

Al igual que sucede con width, la propiedad height no admite valores negativos. Si se

indica un porcentaje, se toma como referencia la altura del elemento padre. Si el elemento padre

no tiene una altura definida explícitamente, se asigna el valor auto a la altura.

77
Versión Mayo 2021
 El valor inherit indica que la altura del elemento se hereda de su elemento padre. El

valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad,

indica que el navegador debe calcular automáticamente la altura del elemento, teniendo en

cuenta sus contenidos y el sitio disponible en la página.

El siguiente ejemplo establece el valor de la altura del elemento <div> de cabecera:

#cabecera { height: 60px; }

<div id="cabecera">
...
</div>
Margen y relleno.

Margen.

CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y

verticales de un elemento: margin-top, margin-right, margin-bottom, margin-left.

Se aplica a todos los elementos, salvo margin-top y margin-bottom que sólo se aplican a

los elementos de bloque y a las imágenes. Los valores que puede tomar son: unidad de

medida | porcentaje | auto | inherit.

Cada una de las propiedades establece la separación entre el borde lateral de la caja y el

resto de cajas adyacentes:

Figura 19. Las cuatro propiedades relacionadas con los márgenes. Fuente: (Eguiluz, Introducción a CSS)

78
Versión Mayo 2021
 Además de las cuatro propiedades que controlan cada uno de los márgenes del elemento,

CSS define una propiedad especial que permite establecer los cuatro márgenes de forma

simultánea. La propiedad que permite definir de forma simultánea los cuatro márgenes se

denomina margin.

La propiedad margin admite entre uno y cuatro valores, con el siguiente significado:

• Si solo se indica un valor, todos los márgenes tienen ese valor.

• Si se indican dos valores, el primero se asigna al margen superior e inferior y el

segundo se asigna a los márgenes izquierdo y derecho.

• Si se indican tres valores, el primero se asigna al margen superior, el tercero se asigna

al margen inferior y el segundo valor se asigna los márgenes izquierdos y derecho.

• Si se indican los cuatro valores, el orden de asignación es: margen superior, margen

derecho, margen inferior y margen izquierdo.

El ejemplo anterior de márgenes se puede reescribir utilizando la propiedad margin:

Código CSS original:

div img {
margin-top: .5em;
margin-bottom: .5em;
margin-left: 1em;
margin-right: .5em;
}
Alternativa directa:

div img {
margin: .5em .5em .5m 1em;
}

79
Versión Mayo 2021
 Relleno.

CSS define cuatro propiedades para controlar cada uno de los espacios de relleno

horizontales y verticales de un elemento: padding-top, padding-right, padding-bottom, padding-

left.

Se aplica a todos los elementos excepto algunos elementos de tablas como grupos de

cabeceras y grupos de pies de tabla. Los valores que puede tomar son: unidad de

medida | porcentaje | inherit.

Cada una de estas propiedades establece la separación entre el contenido y los bordes

laterales de la caja del elemento:

Figura 20. Las cuatro propiedades relacionadas con los rellenos. Fuente: (Eguiluz, Introducción a CSS)

Como sucede con los márgenes, CSS también define una propiedad llamada padding para

establecer los cuatro rellenos de un elemento de forma simultánea. La propiedad padding admite

entre uno y cuatro valores, con el mismo significado que el de la propiedad margin. Ejemplo:

body {padding: 2em} /* Todos los rellenos valen 2em */

body {padding: 1em 2em} /* Superior e inferior = 1em, Izquierdo y
derecho = 2em */
body {padding: 1em 2em 3em} /* Superior = 1em, derecho = 2em, inferior
= 3em, izquierdo = 2em */
body {padding: 1em 2em 3em 4em} /* Superior = 1em, derecho = 2em,
inferior = 3em, izquierdo = 4em */

80
Versión Mayo 2021
 Jueves – Semana III

Bordes en CSS

CSS permite modificar el aspecto de cada uno de los cuatro bordes de la caja de un

elemento. Para cada borde se puede establecer su anchura o grosor, su color y su estilo.

El aspecto con el que los navegadores muestran los diferentes tipos de borde se muestra a

continuación:

Figura 21.Tipos de bordes definidos por CSS. Fuente: (Eguiluz, Introducción a CSS)

CSS define una serie de propiedades que permiten establecer todos los atributos de los

bordes de forma simultánea: border-top, border-right, border-bottom, border-left. Se aplica a

todos los elementos. Sus valores son: unidad de medida_borde || color_borde || estilo_borde:

81
Versión Mayo 2021
 div {
border-top: 1px solid #369;
border-bottom: 3px double #369;
}
CSS define una propiedad global para establecer el valor de todos los atributos de todos

los bordes de forma directa, border.

Las siguientes reglas CSS son equivalentes:

div {
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}

div { border: 1px solid red; }

Fondos en CSS

El fondo puede ser un color simple o una imagen. El fondo solamente se visualiza en el

área ocupada por el contenido y su relleno, ya que el color de los bordes se controla directamente

desde los bordes y las zonas de los márgenes siempre son transparentes.

CSS define cinco propiedades para establecer el fondo de cada elemento (background-

color, background-image, background-repeat, background-attachment, background-position) y

otra propiedad global (background).

background-color.

La propiedad background-color permite mostrar un color de fondo sólido en la caja de un

elemento. El siguiente ejemplo muestra una página web con un color gris claro de fondo:

body {
background-color: #F5F5F5;
}

82
Versión Mayo 2021
 background-image.

Para crear efectos gráficos avanzados, es necesario utilizar la propiedad background-

image, que permite mostrar una imagen como fondo de la caja de cualquier elemento. El

siguiente ejemplo muestra una imagen como fondo de toda la página:

body { background-image: url("imagenes/fondo.png") }

Las imágenes de fondo se indican a través de su URL, que puede ser absoluta o relativa.

background-repeat.

En ocasiones, no es conveniente que la imagen de fondo se repita horizontal y

verticalmente. Para ello, CSS introduce la propiedad background-repeat que permite controlar la

forma de repetición de las imágenes de fondo. Puede obtener valores: repeat | repeat-x | repeat-y |

no-repeat | inherit.

El valor repeat indica que la imagen se debe repetir en todas direcciones y por tanto, es el

comportamiento por defecto. El valor no-repeat muestra una sola vez la imagen y no se repite en

ninguna dirección. El valor repeat-x repite la imagen sólo horizontalmente y el valor repeat-

y repite la imagen solamente de forma vertical.

body { background-repeat: no-repeat; }

background-position.

Permite controlar la posición de la imagen dentro del fondo del elemento.

La propiedad background-position permite indicar la distancia que se desplaza la imagen

de fondo respecto de su posición original situada en la esquina superior izquierda.

Si se indican dos porcentajes o dos medidas, el primero indica el desplazamiento

horizontal y el segundo el desplazamiento vertical respecto del origen (situado en la esquina

superior izquierda). Si solamente se indica un porcentaje o una medida, se considera que es el

83
Versión Mayo 2021
desplazamiento horizontal y al desplazamiento vertical se le asigna automáticamente el valor de

50%.

Cuando se utilizan porcentajes, su interpretación no es intuitiva. Si el valor de la

propiedad background-position se indica mediante dos porcentajes x% y%, el navegador coloca

el punto (x%, y%) de la imagen de fondo en el punto (x%, y%) del elemento.

Las palabras clave permitidas son equivalentes a algunos porcentajes significativos: top =

0%, left = 0%, center = 50%, bottom = 100%, right = 100%.

CSS permite mezclar porcentajes y palabras clave, como por ejemplo 50% 2cm, center

2cm, center 10%.

Si se utilizan solamente palabras clave, el orden es indiferente y por tanto, es equivalente

indicar top left y left top.

El siguiente ejemplo muestra una misma imagen de fondo posicionada de tres formas

diferentes:

Figura 22. Ejemplo de propiedad background-position. Fuente: (Eguiluz, Introducción a CSS)

Las reglas CSS del ejemplo anterior se muestran a continuación:

#caja1 {
background-image: url("images/help.png");
background-repeat: no-repeat;
background-position: bottom left;

84
Versión Mayo 2021
 }
#caja2 {
background-image: url("images/help.png");
background-repeat: no-repeat;
background-position: right top;
}
#caja3 {
background-image: url("images/help.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}

<div id="caja1"><h1>bottom left</h1></div>

<div id="caja2"><h1>right top</h1></div>
<div id="caja3"><h1>50% 50%</h1></div>

background-attachment.

Se utiliza para indicar que el fondo permanezca fijo cuando la ventana del navegador se

desplaza mediante las barras de scroll. Se trata de un comportamiento que en general no es

deseable y que algunos navegadores no soportan correctamente.

Para hacer que una imagen de fondo se muestre fija al desplazar la ventana del

navegador, se debe añadir la propiedad background-attachment: fixed. Por defecto la propiedad

es establecida en scroll.

background.

Establece todas las propiedades del fondo de un elemento. Para establecer el valor se

indica: background-color || background-image || background-repeat || background-attachment ||

background-position. Puede tener uno o todos estos valores.

85
Versión Mayo 2021
 Actividades – Semana III

Actividad 1

Realice un mapa mental sobre CSS.

Actividad 2

Realice una presentación que explique como incluir CSS en HTML.

Actividad 3

Cada regla CSS incluye un comentario en el que se explica los elementos a los que debe

aplicarse.

<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
<style>
/* Todos los elementos de la pagina */
{
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
/* Todos los parrafos de la pagina */
{
color: #555;
}
/* Todos los párrafos contenidos en #primero */
{
color: #369;
}
/* Todos los enlaces la pagina */
{
color: #C30;
}
/* Los elementos <em> contenidos en #primero */
{
color: #0000BB;

86
Versión Mayo 2021
 background-color: #FFFFCC;
}
/* Todos los elementos <em> con la clase "especial" en toda la pagina
*/
{
color: #FFFF00;
background: #000000;
}
/* Todos los elementos <span> contenidos en la clase "normal" */
{
font-weight: bold;
}
</style>
</head>
Actividad 4

A partir de la página web que se te proporciona, debes escribir las reglas CSS necesarias

para lograr una página web que tenga el mismo aspecto que la siguiente imagen:

Puedes modificar el código HTML proporcionado para añadir los identificadores y clases

que necesites.

En la tabla se indican los nombres de los colores que debes emplear.

<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
</head>

87
Versión Mayo 2021
 <body>
<table border="1">
<tr><td>teal</td><td>teal</td><td>teal</td></tr>
<tr><td>red</td><td>red</td><td>red</td></tr>
<tr><td>blue</td><td>blue</td><td>blue</td></tr>
<tr><td>orange</td><td>orange</td><td>orange</td></tr>
<tr><td>purple</td><td>purple</td><td>purple</td></tr>
<tr><td>olive</td><td>olive</td><td>olive</td></tr>
<tr><td>fuchsia</td><td>fuchsia</td><td>fuchsia</td></tr>
<tr><td>green</td><td>green</td><td>green</td></tr>
</table>
</body>
</html>
Actividad 5

Realice un mapa mental sobre el modelo de caja de CSS.

Actividad 6

A partir del código HTML proporcionado, determinar las reglas CSS necesarias para

añadir los siguientes márgenes:

<html>
<head>
<meta charset="utf-8" />
<title>Actividad</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et
elit.
Vivamus placerat lorem. Maecenas sapien. Integer ut massa. Cras diam
ipsum,

88
Versión Mayo 2021
 laoreet non, tincidunt a, viverra sed, tortor.</p>
<p class="destacado">Vestibulum lectus diam, luctus vel, venenatis
ultrices,
cursus vel, tellus. Etiam placerat erat non sem. Nulla molestie odio
non
nisl tincidunt faucibus.</p>

<p>Aliquam euismod sapien eu libero. Ut tempor orci at nulla. Nam in

eros
egestas massa vehicula nonummy. Morbi posuere, nibh ultricies
consectetuer tincidunt,
risus turpis laoreet elit, ut tincidunt risus sem et nunc.</p>
</body>
</html>
Actividad 7

A partir de la página web que se te proporciona, debes escribir las reglas CSS necesarias

para lograr una página web que tenga el mismo aspecto que la siguiente imagen:

Los bordes que debes definir son:

Encabezado nivel 1: borde inferior con una anchura de 2px, sólido y de color azul (#00F).

Encabezado nivel 2: borde completo con una anchura de 2px, sólido y de color gris

(#AAA).

89
Versión Mayo 2021
 Lista con los datos del libro: borde superior e inferior con una anchura de 4px, punteado y

de color rojo (#F00).

Lista con el contenido del libro: borde completo con una anchura de 2px, con guiones y

de color verde (#0F0).

<html>
<head>
<meta charset="utf-8" />
<title>HTML &amp; CSS: Curso práctico avanzado</title>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul>
<li>Título: HTML &amp; CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>
<h2>Descripción del libro</h2>
<p>
Aunque los inicios de Internet se remontan a los años sesenta, no ha
sido hasta los años noventa cuando, gracias a la Web, se ha extendido
su uso por todo el mundo. En pocos años, la Web ha evolucionado
enormemente: se ha pasado de páginas sencillas, con pocas imágenes y
contenidos estáticos que eran visitadas por unos pocos usuarios a
páginas complejas, con contenidos dinámicos que provienen de bases de
datos y que son visitadas por miles de usuarios al mismo tiempo.
</p>
<p>
Todas las páginas están internamente construidas con la misma
tecnología, con el Lenguaje de marcas de hipertexto (Hypertext Markup
Language, HTML) y con las Hojas de estilo en cascada (Cascading Style

90
Versión Mayo 2021
Sheets, CSS).
</p>
<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a
desarrollar sus propias páginas web. No son necesarios conocimientos
previos para aprender con este libro, lo único que es necesario es
saber utilizar un ordenador y saber navegar por la Web.
</p>
<h2>Contenido del libro</h2>
<p>
El contenido de este libro se estructura en tres apartados bien
diferenciados:
</p>
<ul>
<li>En la primera parte del libro se trabajan conceptos generales que
son necesarios para poder desarrollar páginas web; se explican
conceptos de estructura física y estructura lógica (o estructura de
navegación) de un sitio web. Se detalla cómo influye la estructura
física en las URL o direcciones que se emplean a la hora de crear los
enlaces de un sitio web. Pasando por el concepto de "estándar web", un
término general que se emplea para refererirse a los estándares que
define su funcionamiento como HTML y CSS, empleados para el desarrollo
de las páginas web en el lado del cliente.</li>
<li>En la segunda parte se trabaja HTML. Partiendo de la estructura
básica de una página web, se explican las etiquetas de HTML que se
utilizan para definir el texto, los enlaces, las listas, las tablas,
los formularios y los elementos multimedia.</li>
<li>En la tercera y última parte se explica CSS, el lenguaje que se
emplea para definir el formato y la presentación de una página web. Se
explica cómo utilizar el color, cómo definir la presentación del
texto, de las tablas y de los formularios; cómo realizar
transformaciones y transiciones con el fin de diseñar una página
web.</li>
</ul>
</body>
</html>

91
Versión Mayo 2021
Actividad 8

Realice el código HTML y CSS necesario para obtener:

Actividad 9

Realice el código HTML y CSS necesario para obtener:

Actividad 10

Realice el código HTML y CSS necesario para obtener:

92
Versión Mayo 2021
 Recursos – Semana III

Videos

• Curso Basico de CSS - 2. Selectores.

https://www.youtube.com/watch?v=uqkj7HQ7ids

• Curso Basico de CSS - 5. Modelo de Caja.

https://www.youtube.com/watch?v=SKkKLi1wAos

• Imágenes de fondo CSS. https://www.youtube.com/watch?v=EJgim7MdPy4

Presentaciones

• Desarrollo CSS. https://slideplayer.es/slide/3421853/

• Selectores CSS. https://es.slideshare.net/mariazeballos/selectores-css-24618092

• Modelo de caja. https://es.slideshare.net/mariazeballos/modelo-de-caja

Lecturas complmentarias

• CSS. https://desarrolloweb.com/home/css

• Conceptos Básicos de CSS.

http://www.cs.us.es/blogs/bd2012/files/2012/09/ConceptosB%C3%A1sicosDeCSS.p

df

• El modelo de caja. http://lsi.vc.ehu.es/asignaturas/ISoft/tut-css/pdf/Leccion09.pdf

93
Versión Mayo 2021
 Semana IV

Contenido

Lunes – Semana IV ........................................................................................................... 96

Posicionamiento en CSS ................................................................................................... 96

Posicionamiento normal. ........................................................................................... 98

Posicionamiento relativo. .......................................................................................... 98

Posicionamiento absoluto........................................................................................ 101

Posicionamiento fijo................................................................................................ 103

Posicionamiento flotante. ........................................................................................ 104

Martes – Semana IV ........................................................................................................ 106

Visualización ................................................................................................................... 106

Propiedades display y visibility. ............................................................................. 106

Propiedad overflow. ................................................................................................ 109

Propiedad z-index.................................................................................................... 111

Miércoles - Semana IV.................................................................................................... 113

Texto con CSS................................................................................................................. 113

Tipografía. ............................................................................................................... 113

Apariencia del texto. ............................................................................................... 113

Jueves – Semana IV ........................................................................................................ 115

Enlaces ............................................................................................................................ 115

94
Versión Mayo 2021
 Pseudo-clases. ......................................................................................................... 115

Mostrar los enlaces como si fueran botones. .......................................................... 116

Listas ............................................................................................................................... 117

Menú vertical. ......................................................................................................... 118

Menú horizontal básico. .......................................................................................... 120

Actividad – Semana IV ................................................................................................... 123

Recursos – Semana IV ................................................................................................... 128

95
Versión Mayo 2021
 Lunes – Semana IV

Posicionamiento en CSS

Los navegadores crean y posicionan de forma automática todas las cajas que forman cada

página HTML. No obstante, CSS permite al diseñador modificar la posición en la que se muestra

cada caja.

Utilizando las propiedades que proporciona CSS para alterar la posición de las cajas es

posible realizar efectos muy avanzados y diseñar estructuras de páginas que de otra forma no

serían posibles.

El estándar de CSS define cinco modelos diferentes para posicionar una caja:

Posicionamiento normal o estático: se trata del posicionamiento que utilizan los

navegadores si no se indica lo contrario.

Posicionamiento relativo: variante del posicionamiento normal que consiste en posicionar

una caja según el posicionamiento normal y después desplazarla respecto de su posición original.

Posicionamiento absoluto: la posición de una caja se establece de forma absoluta respecto

de su elemento contenedor y el resto de elementos de la página ignoran la nueva posición del

elemento.

Posicionamiento fijo: variante del posicionamiento absoluto que convierte una caja en un

elemento inamovible, de forma que su posición en la pantalla siempre es la misma

independientemente del resto de elementos e independientemente de si el usuario sube o baja la

página en la ventana del navegador.

Posicionamiento flotante: se trata del modelo más especial de posicionamiento, ya que

desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la línea en la que se

encuentran.

96
Versión Mayo 2021
 El posicionamiento de una caja se establece mediante la propiedad position, la cual se

puede aplicar a cualquier elemento. Puede obtener valores static (que es la que viene por

defecto), relative, absolute o fixed.

El significado de cada uno de los posibles valores de la propiedad position es el siguiente:

• static: corresponde al posicionamiento normal o estático. Si se utiliza este valor, se

ignoran los valores de las propiedades top, right, bottom y left que se verán a

continuación.

• relative: corresponde al posicionamiento relativo. El desplazamiento de la caja se

controla con las propiedades top, right, bottom y left.

• absolute: corresponde al posicionamiento absoluto. El desplazamiento de la caja

también se controla con las propiedades top, right, bottom y left, pero su

interpretación es mucho más compleja, ya que el origen de coordenadas del

desplazamiento depende del posicionamiento de su elemento contenedor.

• fixed: corresponde al posicionamiento fijo. El desplazamiento se establece de la

misma forma que en el posicionamiento absoluto, pero en este caso el elemento

permanece inamovible en la pantalla.

La propiedad position no permite controlar el posicionamiento flotante, que se establece

con otra propiedad llamada float y que se explica más adelante. Además, la

propiedad position sólo indica cómo se posiciona una caja, pero no la desplaza.

Normalmente, cuando se posiciona una caja también es necesario desplazarla respecto de

su posición original o respecto de otro origen de coordenadas. CSS define cuatro propiedades

llamadas top, right, bottom y left para controlar el desplazamiento de las cajas posicionadas.

97
Versión Mayo 2021
 En el caso del posicionamiento relativo, cada una de estas propiedades indica el

desplazamiento del elemento desde la posición original de su borde

superior/derecho/inferior/izquierdo. Si el posicionamiento es absoluto, las propiedades indican el

desplazamiento del elemento respecto del borde superior/derecho/inferior/izquierdo de su primer

elemento padre posicionado.

En cualquiera de los dos casos, si el desplazamiento se indica en forma de porcentaje, se

refiere al porcentaje sobre la anchura (propiedades right y left) o altura

(propiedades top y bottom) del elemento.

Posicionamiento normal.

El posicionamiento normal o estático es el modelo que utilizan por defecto los

navegadores para mostrar los elementos de las páginas. En este modelo, sólo se tiene en cuenta si

el elemento es de bloque o en línea, sus propiedades width y height y su contenido.

Posicionamiento relativo.

El posicionamiento relativo desplaza una caja respecto de su posición original establecida

mediante el posicionamiento normal. El desplazamiento de la caja se controla con las

propiedades top, right, bottom y left.

El valor de la propiedad top se interpreta como el desplazamiento entre el borde superior

de la caja en su posición final y el borde superior de la misma caja en su posición original.

De la misma forma, el valor de las propiedades left, right y bottom indica

respectivamente el desplazamiento entre el borde izquierdo/derecho/inferior de la caja en su

posición final y el borde izquierdo/derecho/inferior de la caja original.

98
Versión Mayo 2021
 El desplazamiento relativo de una caja no afecta al resto de cajas adyacentes, que se

muestran en la misma posición que si la caja desplazada no se hubiera movido de su posición

original.

Figura 22. Ejemplo de posicionamiento relativo de un elemento. Fuente (Eguiluz, Introducción a CSS)

En la imagen anterior, la caja 2 se ha desplazado lateralmente hacia la derecha y

verticalmente de forma descendente. Como el resto de cajas de la página no modifican su

posición, se producen solapamientos entre los contenidos de las cajas.

Las cajas desplazadas de forma relativa no modifican su tamaño, por lo que los valores de

las propiedades left y right siempre cumplen que left = -right.

Si tanto left como right tienen un valor de auto (que es su valor por defecto) la caja no se

mueve de su posición original. Si sólo el valor de left es auto, su valor real es -right. Igualmente,

si sólo el valor de right es auto, su valor real es -left.

Si tanto left como right tienen valores distintos de auto, uno de los dos valores se tiene

que ignorar porque son mutuamente excluyentes. Para determinar la propiedad que se tiene en

cuenta, se considera el valor de la propiedad direction.

La propiedad direction permite establecer la dirección del texto de un contenido. Si el

valor de direction es ltr, el texto se muestra de izquierda a derecha, que es el método de escritura

habitual en la mayoría de países. Si el valor de direction es rtl, el método de escritura es de

derecha a izquierda, como el utilizado por los idiomas árabe y hebreo.

99
Versión Mayo 2021
 Si el valor de direction es ltr, y las propiedades left y right tienen valores distintos de

auto, se ignora la propiedad right y sólo se tiene en cuenta el valor de la propiedad left. De la

misma forma, si el valor de direction es rtl, se ignora el valor de left y sólo se tiene en cuenta el

valor de right.

El siguiente ejemplo muestra tres imágenes posicionadas de forma normal:

Figura 23. Elementos posicionados de forma normal. Fuente: elaboración propia (2020)

Aplicando el posicionamiento relativo, se desplaza la primera imagen de forma

descendente:

img.desplazada {
position: relative;
top: 12em;
}

<img class="desplazada" src="imagen.jpg" alt="Imagen genérica" />

<img src="imagen.jpg" alt="Imagen genérica" />
<img src="imagen.jpg" alt="Imagen genérica" />

El aspecto que muestran ahora las imágenes es el siguiente:

100
Versión Mayo 2021
 Figura 24. Elemento posicionado de forma relativa. Fuente: elaboración propia (2020)

El resto de imágenes no varían su posición y por tanto no ocupan el hueco dejado por la

primera imagen, ya que el posicionamiento relativo no influye en el resto de elementos de la

página. El principal problema de posicionar elementos de forma relativa es que se pueden

producir solapamientos con otros elementos de la página.

Posicionamiento absoluto.

El posicionamiento absoluto se emplea para establecer de forma exacta la posición en la

que se muestra la caja de un elemento. La nueva posición de la caja se indica mediante las

propiedades top, right, bottom y left. La interpretación de los valores de estas propiedades es

mucho más compleja que en el posicionamiento relativo, ya que en este caso dependen del

posicionamiento del elemento contenedor.

Cuando una caja se posiciona de forma absoluta, el resto de elementos de la página se ven

afectados y modifican su posición. Al igual que en el posicionamiento relativo, cuando se

posiciona de forma absoluta una caja es probable que se produzcan solapamientos con otras

cajas.

101
Versión Mayo 2021
 Figura 25. Elemento posicionado de forma relativa. Fuente: (Eguiluz, Introducción a CSS)

En la figura anterior, se puede ver que la caja 2 está posicionada de forma absoluta, lo

que provoca que el resto de elementos de la página modifiquen su posición. En concreto, la caja

3 deja su lugar original y pasa a ocupar el hueco dejado por la caja 2.

Por otra parte, el desplazamiento de una caja posicionada de forma absoluta se controla

mediante las propiedades top, right, bottom y left. A diferencia del posicionamiento relativo, la

interpretación de los valores de estas propiedades depende del elemento contenedor de la caja

posicionada.

Aplicando el posicionamiento absolute, se desplaza la primera imagen de forma

descendente:

img.desplazada {
position: absolute;
top: 12em;
}
El aspecto que muestran ahora las imágenes es el siguiente:

102
Versión Mayo 2021
 Figura 26. Elemento posicionado de forma absoluta. Fuente: elaboración propia (2020)

Como la imagen se posiciona de forma absoluta, el resto de elementos de la página se

mueven para ocupar el lugar libre dejado por la imagen.

Posicionamiento fijo.

El estándar CSS considera que el posicionamiento fijo es un caso particular del

posicionamiento absoluto, ya que sólo se diferencian en el comportamiento de las cajas

posicionadas.

Cuando una caja se posiciona de forma fija, la forma de obtener el origen de coordenadas

para interpretar su desplazamiento es idéntica al posicionamiento absoluto. De hecho, si el

usuario no mueve la página HTML en la ventana del navegador, no existe ninguna diferencia

entre estos dos modelos de posicionamiento.

103
Versión Mayo 2021
 La principal característica de una caja posicionada de forma fija es que su posición es

inamovible dentro de la ventana del navegador. El posicionamiento fijo hace que las cajas no

modifiquen su posición ni aunque el usuario suba o baje la página en la ventana de su navegador.

Posicionamiento flotante.

Cuando una caja se posiciona con el modelo de posicionamiento flotante,

automáticamente se convierte en una caja flotante, lo que significa que se desplaza hasta la zona

más a la izquierda o más a la derecha de la posición en la que originalmente se encontraba.

La siguiente imagen muestra el resultado de posicionar de forma flotante hacia la derecha

la caja 1:

Figura 27. Ejemplo de posicionamiento float de una caja. Fuente: (Eguiluz, Introducción a CSS)

Las cajas flotantes influyen en la disposición de todas las demás cajas. Los elementos en

línea hacen sitio a las cajas flotantes adaptando su anchura al espacio libre dejado por la caja

desplazada. Los elementos de bloque no les hacen sitio, pero sí que adaptan sus contenidos para

que no se solapen con las cajas flotantes.

La propiedad CSS que permite posicionar de forma flotante una caja se denomina float.

Si se indica un valor left, la caja se desplaza hasta el punto más a la izquierda posible en esa

104
Versión Mayo 2021
misma línea (si no existe sitio en esa línea, la caja baja una línea y se muestra lo más a la

izquierda posible en esa nueva línea). El resto de elementos adyacentes se adaptan

y fluyen alrededor de la caja flotante.

El valor right tiene un funcionamiento idéntico, salvo que en este caso, la caja se desplaza

hacia la derecha. El valor none permite anular el posicionamiento flotante de forma que el

elemento se muestre en su posición original.

105
Versión Mayo 2021
 Martes – Semana IV

Visualización

Además de las propiedades que controlan el posicionamiento de los elementos, CSS

define otras cuatro propiedades para controlar su visualización: display, visibility, overflow y z-

index.

Utilizando algunas de estas propiedades es posible ocultar y/o hacer invisibles las cajas

de los elementos, por lo que son imprescindibles para realizar efectos avanzados y animaciones.

Propiedades display y visibility.

Las propiedades display y visibility controlan la visualización de los elementos. Las dos

propiedades permiten ocultar cualquier elemento de la página. Habitualmente se utilizan junto

con JavaScript para crear efectos dinámicos como mostrar y ocultar determinados textos o

imágenes cuando el usuario pincha sobre ellos.

La propiedad display permite ocultar completamente un elemento haciendo que

desaparezca de la página. Como el elemento oculto no se muestra, el resto de elementos de la

página se mueven para ocupar su lugar.

Por otra parte, la propiedad visibility permite hacer invisible un elemento, lo que significa

que el navegador crea la caja del elemento pero no la muestra. En este caso, el resto de elementos

de la página no modifican su posición, ya que aunque la caja no se ve, sigue ocupando sitio.

La siguiente imagen muestra la diferencia entre ocultar la caja número 5 mediante la

propiedad display o hacerla invisible mediante la propiedad visibility:

106
Versión Mayo 2021
 Figura 28. Diferencias visuales entre las propiedades display y visibility. Fuente: (Eguiluz, Introducción a CSS)

En general, cuando se oculta un elemento no es deseable que siga ocupando sitio en la

página, por lo que la propiedad display se utiliza mucho más que la propiedad visibility.

Propiedad display.

Las posibilidades de la propiedad display son mucho más avanzadas que simplemente

ocultar elementos. En realidad, la propiedad display modifica la forma en la que se visualiza un

elemento.

Los valores más utilizados son inline, block y none. El valor block muestra un elemento

como si fuera un elemento de bloque, independientemente del tipo de elemento que se trate. El

valor inline visualiza un elemento en forma de elemento en línea, independientemente del tipo de

elemento que se trate.

El valor none oculta un elemento y hace que desaparezca de la página. El resto de

elementos de la página se visualizan como si no existiera el elemento oculto, es decir, pueden

ocupar el espacio en el que se debería visualizar el elemento.

107
Versión Mayo 2021
 El siguiente ejemplo muestra el uso de la propiedad display para mostrar un elemento de

bloque como si fuera un elemento en línea y para mostrar un elemento en línea como si fuera un

elemento de bloque:

Figura 29. Ejemplo de propiedad display. Fuente: (Eguiluz, Introducción a CSS)

Las reglas CSS del ejemplo anterior son las siguientes:

<div>DIV normal</div>
<div style="display:inline">DIV con display:inline</div>

<a href="#">Enlace normal</a>

<a href="#" style="display:block">Enlace con display:block</a>
Propiedad visibility.

Las posibilidades de la propiedad visibility son mucho más limitadas que las de la

propiedad display, ya que sólo permite hacer visibles o invisibles a los elementos de la página.

Inicialmente todas las cajas que componen la página son visibles. Empleando el

valor hidden es posible convertir una caja en invisible para que no muestre sus contenidos. El

resto de elementos de la página se muestran como si la caja todavía fuera visible, por lo que en el

lugar donde originalmente se mostraba la caja invisible, ahora se muestra un hueco vacío.

108
Versión Mayo 2021
 Por último, el valor collapse de la propiedad visibility sólo se puede utilizar en las filas,

grupos de filas, columnas y grupos de columnas de una tabla. Su efecto es similar al de la

propiedad display, ya que oculta completamente la fila y/o columna y se pueden mostrar otros

contenidos en ese lugar. Si se utiliza el valor collapse sobre cualquier otro tipo de elemento, su

efecto es idéntico al valor hidden.

Propiedad overflow.

Normalmente, los contenidos de un elemento se pueden mostrar en el espacio reservado

para ese elemento. Sin embargo, en algunas ocasiones el contenido de un elemento no cabe en el

espacio reservado para ese elemento y se desborda.

La situación más habitual en la que el contenido sobresale de su espacio reservado es

cuando se establece la anchura y/o altura de un elemento mediante la propiedad width y/o height.

Otra situación habitual es la de las líneas muy largas contenidas dentro de un elemento <pre>,

que hacen que la página entera sea demasiado ancha.

CSS define la propiedad overflow para controlar la forma en la que se visualizan los

contenidos que sobresalen de sus elementos.

Los valores de la propiedad overflow tienen el siguiente significado:

• visible: el contenido no se corta y se muestra sobresaliendo la zona reservada para

visualizar el elemento. Este es el comportamiento por defecto.

• hidden: el contenido sobrante se oculta y sólo se visualiza la parte del contenido que

cabe dentro de la zona reservada para el elemento.

• scroll: solamente se visualiza el contenido que cabe dentro de la zona reservada para

el elemento, pero también se muestran barras de scroll que permiten visualizar el resto

del contenido.

109
Versión Mayo 2021
 • auto: el comportamiento depende del navegador, aunque normalmente es el mismo

que la propiedad scroll.

La siguiente imagen muestra un ejemplo de los tres valores típicos de la

propiedad overflow:

Figura 30. Ejemplo de propiedad overflow. Fuente: (Eguiluz, Introducción a CSS)

El código HTML y CSS del ejemplo anterior se muestran a continuación:

div {
display: inline;
float: left;
margin: 1em;
padding: .3em;
border: 2px solid #555;
width: 100px;
height: 150px;
font: 1em Arial, Helvetica, sans-serif;
}

<div><h1>overflow: visible</h1> Lorem ipsum dolor sit amet,

consectetuer
adipiscing elit. Cras vitae dolor eu enim dignissim lacinia. Maecenas
blandit. Morbi mi.</div>

110
Versión Mayo 2021
 <div style="overflow:hidden"><h1>overflow: hidden</h1> Lorem ipsum
dolor
sit amet, consectetuer adipiscing elit. Cras vitae dolor eu enim
dignissim
lacinia. Maecenas blandit. Morbi mi.</div>

<div style="overflow:scroll"><h1>overflow: scroll</h1> Lorem ipsum

dolor sit
amet, consectetuer adipiscing elit. Cras vitae dolor eu enim dignissim
lacinia.
Maecenas blandit. Morbi mi.</div>
Propiedad z-index.

Además de posicionar una caja de forma horizontal y vertical, CSS permite controlar la

posición tridimensional de las cajas posicionadas. De esta forma, es posible indicar las cajas que

se muestran delante o detrás de otras cajas cuando se producen solapamientos.

La posición tridimensional de un elemento se establece sobre un tercer eje llamado Z y se

controla mediante la propiedad z-index. Utilizando esta propiedad es posible crear páginas

complejas con varios niveles o capas.

El valor más común de la propiedad z-index es un número entero. Aunque la

especificación oficial permite los números negativos, en general se considera el número 0 como

el nivel más bajo.

Cuanto más alto sea el valor numérico, más cerca del usuario se muestra la caja. Un

elemento con z-index: 10 se muestra por encima de los elementos con z-index: 8 o z-index: 9,

pero por debajo de elementos con z-index: 20 o z-index: 50.

La siguiente imagen muestra un ejemplo de uso de la propiedad z-index:

111
Versión Mayo 2021
 Figura 31. Ejemplo de propiedad z-index. Fuente: (Eguiluz, Introducción a CSS)

El código HTML y CSS del ejemplo anterior es el siguiente:

div { position: absolute; }

#caja1 { z-index: 5; top: 1em; left: 8em;}
#caja2 { z-index: 15; top: 5em; left: 5em;}
#caja3 { z-index: 25; top: 2em; left: 2em;}

<div id="caja1">Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 -

Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1
-
Caja 1 - Caja 1 - Caja 1 - Caja 1</div>

<div id="caja2">Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 -

Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2
-
Caja 2 - Caja 2 - Caja 2 - Caja 2</div>

<div id="caja3">Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 -

Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3
-
Caja 3 - Caja 3 - Caja 3 - Caja 3</div>
La propiedad z-index sólo tiene efecto en los elementos posicionados, por lo que es

obligatorio que la propiedad z-index vaya acompañada de la propiedad position. Si debes

posicionar un elemento pero no quieres moverlo de su posición original ni afectar al resto de

elementos de la página, puedes utilizar el posicionamiento relativo (position: relative).

112
Versión Mayo 2021
 Miércoles - Semana IV

Texto con CSS

Tipografía.

CSS define numerosas propiedades para modificar la apariencia del texto:

Tabla 2.
Propiedades para tipografía.
Propiedad Descripción
Color Establece el color de letra utilizado
para el texto
font-family Establece el tipo de letra utilizado
para el texto
font-size Establece el tamaño de letra utilizado
para el texto
font-weight Establece la anchura de la letra
utilizada para el texto
font-style Establece el estilo de la letra utilizada
para el texto
font-variant Establece el estilo alternativo de la
letra utilizada para el texto. La
propiedad font-variant no se suele
emplear habitualmente, ya que sólo
permite mostrar el texto con letra
versal (mayúsculas pequeñas).

Apariencia del texto.

Además de las propiedades relativas a la tipografía del texto, CSS define numerosas

propiedades que determinan la apariencia del texto en su conjunto.

113
Versión Mayo 2021
Tabla 3.
Propiedades para la apariencia del texto.
Propiedad Valores Descripción
text-align left | right | center | Establece la alineación del
justify contenido del elemento
line-height normal | numero Permite establecer la altura
| unidad de medida de línea de los elementos
text-decoration none | ( underline || Establece la decoración del
overline || line- texto (subrayado, tachado,
through || blink ) parpadeante, etc.)
text-transform capitalize | uppercase Transforma el texto
| lowercase | none original (lo transforma a
mayúsculas, a minúsculas,
etc.)
text-indent unidad de medida Tabula desde la izquierda
la primera línea del texto
original
letter-spacing normal | unidad de Permite establecer el
medida espacio entre las letras que
forman las palabras del
texto
word-spacing normal | unidad de Permite establecer el
medida espacio entre las palabras
que forman el texto
white-space normal | pre | nowrap Establece el tratamiento de
| pre-wrap | pre-line los espacios en blanco del
texto

114
Versión Mayo 2021
 Jueves – Semana IV

Enlaces

Los estilos más sencillos que se pueden aplicar a los enlaces son los que modifican su

tamaño de letra, su color y la decoración del texto del enlace.

Pseudo-clases.

CSS también permite aplicar diferentes estilos a un mismo enlace en función de su

estado. De esta forma, es posible cambiar el aspecto de un enlace cuando por ejemplo el usuario

pasa el ratón por encima o cuando el usuario pincha sobre ese enlace.

Como con los atributos id o class no es posible aplicar diferentes estilos a un mismo

elemento en función de su estado, CSS introduce un nuevo concepto llamado pseudo-clases. En

concreto, CSS define las siguientes cuatro pseudo-clases:

:link, aplica estilos a los enlaces que apuntan a páginas o recursos que aún no han sido

visitados por el usuario.

:visited, aplica estilos a los enlaces que apuntan a recursos que han sido visitados

anteriormente por el usuario. El historial de enlaces visitados se borra automáticamente cada

cierto tiempo y el usuario también puede borrarlo manualmente.

:hover, aplica estilos al enlace sobre el que el usuario ha posicionado el puntero del ratón.

:active, aplica estilos al enlace que está pinchando el usuario. Los estilos sólo se aplican

desde que el usuario pincha el botón del ratón hasta que lo suelta, por lo que suelen ser unas

pocas décimas de segundo.

Como se sabe, por defecto los navegadores muestran los enlaces no visitados de color

azul y subrayado y los enlaces visitados de color morado. Las pseudo-clases anteriores permiten

modificar completamente ese aspecto por defecto y por eso casi todas las páginas las utilizan.

115
Versión Mayo 2021
 El siguiente ejemplo muestra cómo ocultar el subrayado cuando el usuario pasa el ratón

por encima de cualquier enlace de la página:

a:hover { text-decoration: none; }

Aplicando las reglas anteriores, los navegadores ocultan el subrayado del enlace sobre el

que se posiciona el ratón:

Figura 32. Ocultando el subrayado de los enlaces al pasar el ratón por encima. Fuente: (Eguiluz, Introducción a
CSS)

Las pseudo-clases siempre incluyen dos puntos (:) por delante de su nombre y siempre se

añaden a continuación del elemento al que se aplican, sin dejar ningún espacio en blanco por

delante

Las pseudo-clases :link y :visited solamente están definidas para los enlaces, pero las

pseudo-clases :hover y :active se definen para todos los elementos HTML.

Mostrar los enlaces como si fueran botones.

Las propiedades definidas por CSS permiten mostrar los enlaces con el aspecto de un

botón, lo que puede ser útil en formularios en los que no se utilizan elementos específicos para

crear botones.

El siguiente ejemplo muestra un enlace simple formateado como un botón:

116
Versión Mayo 2021
 Figura 33. Mostrando un enlace como si fuera un botón. Fuente: (Eguiluz, Introducción a CSS)

Las reglas CSS utilizadas en el ejemplo anterior son las siguientes:

a { margin: 1em 0; float: left; clear: left; }

a.boton {
text-decoration: none;
background: #EEE;
color: #222;
border: 1px outset #CCC;
padding: .1em .5em;
}
a.boton:hover {
background: #CCB;
}
a.boton:active {
border: 1px inset #000;
}

<a class="boton" href="#">Guardar</a>

<a class="boton" href="#">Enviar</a>

Listas

CSS define una propiedad que permite establecer todas las propiedades de una lista de

forma directa. La propiedad se denomina list-style, los valores que se le puede colocar: ( list-

style-type || list-style-position || list-style-image ) | none.

El siguiente ejemplo indica que no se debe mostrar ni viñetas automáticas ni viñetas

personalizadas:

ul { list-style: none }

117
Versión Mayo 2021
 Menú vertical.

Los sitios web correctamente diseñados emplean las listas de elementos para crear todos

sus menús de navegación. Utilizando la etiqueta <ul> de HTML se agrupan todas las opciones

del menú y haciendo uso de CSS se modifica su aspecto para mostrar un menú horizontal o

vertical.

A continuación se muestra la transformación de una lista sencilla de enlaces en un menú

vertical de navegación.

Lista de enlaces original:

<ul>
<li><a href="#">Elemento 1</a></li>
<li><a href="#">Elemento 2</a></li>
<li><a href="#">Elemento 3</a></li>
<li><a href="#">Elemento 4</a></li>
<li><a href="#">Elemento 5</a></li>
<li><a href="#">Elemento 6</a></li>
</ul>
Aspecto final del menú vertical:

Figura 33. Menú vertical sencillo creado con CSS

El proceso de transformación de la lista en un menú requiere de los siguientes pasos:

1. Definir la anchura del menú:

ul.menu { width: 180px; }

118
Versión Mayo 2021
2. Eliminar las viñetas automáticas y todos los márgenes y espaciados aplicados por

defecto:

ul.menu {
list-style: none;
margin: 0;
padding: 0;
width: 180px;
}
3. Añadir un borde al menú de navegación y establecer el color de fondo y los bordes de

cada elemento del menú:

ul.menu {
border: 1px solid #7C7C7C;
border-bottom: none;
list-style: none;
margin: 0;
padding: 0;
width: 180px;
}
ul.menu li {
background: #F4F4F4;
border-bottom: 1px solid #7C7C7C;
border-top: 1px solid #FFF;
}
4. Aplicar estilos a los enlaces: mostrarlos como un elemento de bloque para que ocupen

todo el espacio de cada <li> del menú, añadir un espacio de relleno y modificar los

colores y la decoración por defecto:

ul.menu li a {
color: #333;
display: block;
padding: .2em 0 .2em .5em;
text-decoration: none;
}

119
Versión Mayo 2021
 Menú horizontal básico.

Partiendo de la misma lista de elementos del menú vertical, resulta muy sencillo crear un

menú de navegación horizontal. La clave reside en modificar el posicionamiento original de los

elementos de la lista.

Código HTML del menú horizontal:

<ul>
<li><a href="#">Elemento 1</a></li>
<li><a href="#">Elemento 2</a></li>
<li><a href="#">Elemento 3</a></li>
<li><a href="#">Elemento 4</a></li>
<li><a href="#">Elemento 5</a></li>
</ul>
Aspecto final del menú horizontal:

Figura 34. Menú horizontal creado con CSS

El proceso de creación del menú horizontal consta de los siguientes pasos:

1. Aplicar los estilos CSS básicos para establecer el estilo del menú (similares a los del

menú vertical anterior):

ul.menu {
background: #F4F4F4;
border: 1px solid #7C7C7C;
list-style: none;
margin: 0;
padding: 0;
}
ul.menu li a {
color: #333;
display: block;
padding: .3em;
text-decoration: none;
}

120
Versión Mayo 2021
 2. Establecer la anchura de los elementos del menú. Como el menú es de anchura

variable y contiene cinco elementos, se asigna una anchura del 20% a cada elemento.

Si se quiere tener un control más preciso sobre el aspecto de cada elemento, es

necesario asignar una anchura fija al menú.

Además, se posiciona de forma flotante los elementos de la lista mediante la

propiedad float. Esta es la clave de la transformación de una lista en un menú horizontal:

ul.menu li {
float: left;
width: 20%;
}
Después de posicionar de forma flotante a todos los elementos de la lista, el

elemento <ul> es un elemento vacío ya que en su interior no existe ningún elemento posicionado

de forma normal.

Como ya se explicó en las secciones anteriores, la solución de este problema consiste en

aplicar la propiedad overflow: hidden; al elemento <ul>, de forma que encierre a todos los

elementos posicionados de forma flotante:

ul.menu {
overflow: hidden;
}
3. Establecer los bordes de los elementos que forman el menú:

ul.menu li a {
border-left: 1px solid #FFF;
border-right: 1px solid #7C7C7C;
}
4. Por último, se elimina el borde derecho del último elemento de la lista, para evitar el

borde duplicado:

<ul>
<li><a href="#">Elemento 1</a></li>
<li><a href="#">Elemento 2</a></li>

121
Versión Mayo 2021
 <li><a href="#">Elemento 3</a></li>
<li><a href="#">Elemento 4</a></li>
<li><a href="#" style="border-right: none">Elemento 5</a></li>
</ul>

122
Versión Mayo 2021
 Actividad – Semana IV

Actividad 1

Realice un resumen (200 palabras minimo) sobre el posicionamiento y sus tipos en CSS.

Actividad 2

Utilizando los posicionamientos de CSS, cree una página como la siguiente:

Actividad 3

Explique la diferencia entre las propiedades display y visibility en CSS.

Actividad 4

Utilizando las propiedades display y visibility de CSS, cree una página como la siguiente:

123
Versión Mayo 2021
Actividad 5

A partir de la página web que se te proporciona, debes crear una página web que tenga el

mismo aspecto que la siguiente imagen:

Tienes que tener en cuenta los siguientes requisitos:

• El tipo de letra principal del texto debe ser Calibri. Como este tipo de letra no está en

todos los ordenadores, se debe definir como alternativa los tipos de letra Arial,

Helvetica y el tipo genérico sans-serif.

• El tipo de letra del encabezado de nivel 1 debe ser Cambria. El tipo alternativo debe

ser Times junto con el tipo genérico serif. El color del texto debe ser #1F497D y el

color del fondo #BFBFBF. El tamaño del texto debe ser 24 px. El espaciado entre

letras debe ser 0.5 em y el espaciado entre palabras 1.5 em. Además, el encabezado de

nivel 1 debe aparecer centrado y en mayúsculas.

• El tipo de letra del encabezado de nivel 2 es igual que el encabezado de nivel 1. El

color del texto debe ser #632423. El tamaño del texto debe ser 18 px. El espaciado

entre letras debe ser 0.5 em. Además, el encabezado de nivel 2 debe aparecer en

mayúsculas.

124
Versión Mayo 2021
• El contenido de las listas debe aparecer en cursiva y en negrita. Sin embargo, el

contenido etiquetado como <strong> no debe aparecer en negrita, pero debe aparecer

en versalitas.

• No puedes modificar el código HTML de la página, sólo puedes añadir las reglas CSS

necesarias para lograr la presentación deseada.

<html>
<head>
<meta charset="utf-8" />
<title>Curriculum Vitae de Bruce Wayne</title>
</head>
<body>
<h1>Curriculum Vitae de Bruce Wayne</h1>
<h2>Datos personales</h2>
<ul>
<li>Nombre completo: <strong>Bruce Wayne</strong></li>
<li>Fecha de nacimiento: <strong>1/5/1939</strong></li>
<li>Lugar de nacimiento: <strong>Gotham City</strong></li>
</ul>
<h2>Formación académica</h2>
<ul>
<li>1956-1961: <strong>Universidad del Espantapájaros</strong></li>
<li>1952-1956: <strong>Instituto de Dos Caras</strong></li>
<li>1944-1952: <strong>Escuela Primaria del Joker</strong></li>
</ul>
<h2>Experiencia laboral</h2>
<ul>
<li>1975-1985: <strong>En el paro</strong></li>
<li>1965-1975: <strong>Cazavillanos y demás chusma</strong></li>
<li>1962-1965: <strong>Aprendiz de superhéroe</strong></li>
</ul>
</body>
</html>

125
Versión Mayo 2021
Actividad 6

Definir las reglas CSS que permiten mostrar un texto como el siguiente:

Actividad 7

Definir las reglas CSS que permiten mostrar los enlaces con los siguientes estilos:

• En su estado normal, los enlaces se muestran de color rojo #CC0000.

• Cuando el usuario pasa su ratón sobre el enlace, se muestra con un color de fondo

rojo #CC0000 y la letra de color blanco #FFF.

• Los enlaces visitados se muestran en color gris claro #CCC.

Actividad 8

Definir las reglas CSS que permiten mostrar el enlace con un botón: color de fondo rojo,

letras blancas, relleno de 15px. Cuando el usuario pasa su ratón sobre el enlace, se muestra con

un color de fondo verde.

126
Versión Mayo 2021
Actividad 9

Realice el código HTML y CSS necesario para obtener un menú como el siguiente:

Actividad 10

Realice el código HTML y CSS necesario para obtener un menú como el siguiente:

127
Versión Mayo 2021
 Recursos – Semana IV

Videos

• Curso Basico de CSS - 7. Posicionamiento de cajas.

https://www.youtube.com/watch?v=JwyjHyGOgmg

• Cómo Formatear Texto con CSS - Curso de CSS

• https://www.youtube.com/watch?v=hAEfwmJqvmY

• Curso Basico de CSS - 9. Enlaces. https://www.youtube.com/watch?v=yc1bCB689bE

Presentaciones

• CSS Posicionamiento y Visualizacion. https://es.slideshare.net/michy19/css-

posicionamiento-y-visualizacion

• Formato del texto en css. https://es.slideshare.net/yahairafernandezsegura/formato-

del-texto-en-css

• Html - Tema 2: Enlaces, Imágenes y Listas.

https://es.slideshare.net/rennybatista/html-tema-2

Lecturas complementarias

• Posicionamiento CSS.

https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning

• Los estilos de texto.

https://developer.mozilla.org/es/docs/Web/CSS/Introducci%C3%B3n/Los:estilos_de_

texto

• CSS: Dando estilo a los enlaces (links o hipervinculos). https://www.dariobf.com/css-

dando-estilo-a-los-enlaces-links-o-hipervinculos/

128
Versión Mayo 2021
 Semana V

Contenido

Lunes – Semana V .......................................................................................................... 131

Tablas con CSS ............................................................................................................... 131

Propiedad border-collapse....................................................................................... 131

Propiedad border-spacing........................................................................................ 132

Propiedad empty-cells. ............................................................................................ 133

Propiedad caption-side. ........................................................................................... 133

Formularios ..................................................................................................................... 135

Mejoras en los campos de texto. ............................................................................. 135

Labels alineadas y formateadas. .............................................................................. 135

Martes – Semana V ......................................................................................................... 140

Layout ............................................................................................................................. 140

Diseño a 2 columnas con cabecera y pie de página. ............................................... 140

Diseño a 3 columnas con cabecera y pie de página. ............................................... 143

Miércoles – Semana V .................................................................................................... 146

JavaScript ........................................................................................................................ 146

Cómo incluir JavaScript en documentos HTML. ................................................... 146

Sintaxis. ................................................................................................................... 149

Jueves – Semana V.......................................................................................................... 151

129
Versión Mayo 2021
Variables en JavaScript ................................................................................................... 151

Tipos de variables. .................................................................................................. 152

Operadores en JavaScript ................................................................................................ 155

Asignación............................................................................................................... 155

Incremento y decremento ........................................................................................ 155

Lógicos. ................................................................................................................... 157

Matemáticos. ........................................................................................................... 159

Relacionales. ........................................................................................................... 160

Estructuras de control de flujo ........................................................................................ 162

Estructura if. ............................................................................................................ 162

Estructura if...else. ................................................................................................... 163

Estructura switch. .................................................................................................... 163

Estructura for........................................................................................................... 165

Estructura for...in..................................................................................................... 168

Estructura while. ..................................................................................................... 168

Estructura do...while. .............................................................................................. 169

Actividades – Semana V ................................................................................................. 171

Recursos Semana V......................................................................................................... 174

130
Versión Mayo 2021
 Lunes – Semana

Tablas con CSS

Propiedad border-collapse.

Define el mecanismo de fusión de los bordes de las celdas adyacentes de una tabla.

Valores: collapse | separate | inherit.

El modelo collapse fusiona de forma automática los bordes de las celdas adyacentes,

mientras que el modelo separate fuerza a que cada celda muestre sus cuatro bordes. Por defecto,

los navegadores utilizan el modelo separate, tal y como se puede comprobar en el ejemplo

anterior.

En general, los diseñadores prefieren el modelo collapse porque estéticamente resulta más

atractivo y más parecido a las tablas de datos tradicionales. El ejemplo anterior se puede rehacer

para mostrar la tabla con bordes sencillos y sin separación entre celdas:

Figura 35. Ejemplo de propiedad border-collapse

El código CSS completo del ejemplo anterior se muestra a continuación:

.normal {
width: 250px;
border: 1px solid #000;
border-collapse: collapse;
}
.normal th, .normal td {
border: 1px solid #000;
}

131
Versión Mayo 2021
 <table class="normal" summary="Tabla genérica">
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
<th scope="col">E</th>
</tr>
...
</table>
Propiedad border-spacing.

Establece la separación entre los bordes de las celdas adyacentes de una tabla. Si

solamente se indica como valor una medida, se asigna ese valor como separación horizontal y

vertical. Si se indican dos medidas, la primera es la separación horizontal y la segunda es la

separación vertical entre celdas.

La propiedad border-spacing sólo controla la separación entre celdas y por tanto, no se

puede utilizar para modificar el tipo de modelo de bordes que se utiliza. En concreto, si se

establece un valor igual a 0 para la separación entre los bordes de las celdas, el resultado es muy

diferente al modelo collapse:

Figura 36. Ejemplo de propiedad border-spacing

132
Versión Mayo 2021
 En la tabla del ejemplo anterior, se ha establecido la propiedad border-spacing: 0, por lo

que el navegador no introduce ninguna separación entre los bordes de las celdas. Además, como

no se ha establecido de forma explícita ningún modelo de bordes, el navegador utiliza el

modelo separate.

El resultado es que border-spacing: 0 muestra los bordes con una anchura doble, ya que

en realidad se trata de dos bordes iguales sin separación entre ellos. Por tanto, las diferencias

visuales con el modelo border-collapse: collapse son muy evidentes.

Propiedad empty-cells.

Define el mecanismo utilizado para el tratamiento de las celdas vacías de una tabla. El

valor hide indica que las celdas vacías no se deben mostrar. Una celda vacía es aquella que no

tiene ningún contenido, ni siquiera un espacio en blanco o un &nbsp;.

La siguiente imagen muestra las diferencias entre una tabla normal y una tabla con la

propiedad empty-cells: hide:

Figura 37. Ejemplo de propiedad empty-cells

Propiedad caption-side.

Establece la posición del título de la tabla. Puede tener valores: top | bottom | inherit.

133
Versión Mayo 2021
 El valor bottom indica que el título de la tabla se debe mostrar debajo de los contenidos

de la tabla. Si también se quiere modificar la alineación horizontal del título, debe utilizarse la

propiedad text-align.

A continuación se muestra el código HTML y CSS de un ejemplo sencillo de uso de la

propiedad caption-side:

.especial {
caption-side: bottom;
}

<table class="especial" summary="Tabla genérica">

<caption>Tabla 2.- Título especial</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
...
</table>
La siguiente imagen muestra el resultado de visualizar el ejemplo anterior en cualquier

navegador:

Figura 38. Ejemplo de propiedad caption-side

134
Versión Mayo 2021
Formularios

Mejoras en los campos de texto.

Por defecto, los campos de texto de los formularios no incluyen ningún espacio de

relleno, por lo que el texto introducido por el usuario aparece pegado a los bordes del cuadro de

texto.

Añadiendo un pequeño padding a cada elemento <input>, se mejora notablemente el

aspecto del formulario:

Figura 39. Mejorando el aspecto de los formularios gracias al padding

La regla CSS necesaria para mejorar el formulario es muy sencilla:

form.elegante input {
padding: .2em;
}
Labels alineadas y formateadas.

Los elementos <input> y <label> de los formularios son elementos en línea, por lo que el

aspecto que muestran los formularios por defecto, es similar al de la siguiente imagen:

135
Versión Mayo 2021
 Figura 40. Aspecto por defecto que muestran los formularios

El código HTML del ejemplo anterior es el siguiente:

<form>
<fieldset>
<legend>Alta en el servicio</legend>

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

<label for="apellidos">Apellidos</label>
<input type="text" id="apellidos" size="50" />

<label for="dni">DNI</label>
<input type="text" id="dni" size="10" maxlength="9" />

<label for="contrasena">Contraseña</label>
<input type="password" id="contrasena" />

<input class="btn" type="submit" value="Darme de alta" />

</fieldset>
</form>
Aprovechando los elementos <label>, se pueden aplicar unos estilos CSS sencillos que

permitan mostrar el formulario con el aspecto de la siguiente imagen:

136
Versión Mayo 2021
 Figura 41. Mostrando las etiquetas label encima de los campos del formulario

En primer lugar, se muestran los elementos <label> como elementos de bloque, para que

añadan una separación para cada campo del formulario. Además, se añade un margen superior

para no mostrar juntas todas las filas del formulario:

label {
display: block;
margin: .5em 0 0 0;
}
El botón del formulario también se muestra como un elemento de bloque y se le añade un

margen para darle el aspecto final deseado:

.btn {
display: block;
margin: 1em 0;
}
En ocasiones, es más útil mostrar todos los campos del formulario con

su <label> alineada a la izquierda y el campo del formulario a la derecha de cada <label>, como

muestra la siguiente imagen:

137
Versión Mayo 2021
 Figura 42. Mostrando las etiquetas label alineadas con los campos del formulario

Para mostrar un formulario tal y como aparece en la imagen anterior no es necesario crear

una tabla y controlar la anchura de sus columnas para conseguir una alineación perfecta. Sin

embargo, sí que es necesario añadir un nuevo elemento (por ejemplo un <div>) que encierre a

cada uno de los campos del formulario (<label> y <input>). El esquema de la solución propuesta

es el siguiente:

Figura 43. Esquema de la técnica de alineación de etiquetas label y campos de formulario

Por tanto, en el código HTML del formulario anterior se añaden los elementos <div>:

<form>
<fieldset>
<legend>Alta en el servicio</legend>

<div>
<label for="nombre">Nombre</label>
<input type="text" id="nombre" />
</div>

<div>

138
Versión Mayo 2021
 <label for="apellidos">Apellidos</label>
<input type="text" id="apellidos" size="35" />
</div>
...
</fieldset>
</form>
Y en el código CSS se añaden las reglas necesarias para alinear los campos del

formulario:

div {
margin: .4em 0;
}
div label {
width: 25%;
float: left;
}

139
Versión Mayo 2021
 Martes – Semana V

Layout

El diseño de las páginas web habituales se divide en bloques: cabecera, menú, contenidos

y pie de página. Visualmente, los bloques se disponen en varias filas y columnas.

Diseño a 2 columnas con cabecera y pie de página.

El objetivo de este diseño es definir una estructura de página con cabecera y pie, un menú

lateral de navegación y una zona de contenidos. La anchura de la página se fija en 700px, la

anchura del menú es de 150px y la anchura de los contenidos es de 550px:

Figura 44. Esquema del diseño a 2 columnas con cabecera y pie de página

La solución CSS se basa en el uso de la propiedad float para los elementos posicionados

como el menú y los contenidos y el uso de la propiedad clear en el pie de página para evitar los

solapamientos ocasionados por los elementos posicionados con float.

140
Versión Mayo 2021
 Figura 45. Propiedades CSS necesarias en el diseño a dos columnas con cabecera y pie de página

El código HTML y CSS mínimos para definir la estructura de la página sin aplicar ningún

estilo adicional son los siguientes:

#contenedor {
width: 700px;
}
#cabecera {
}
#menu {
float: left;
width: 150px;
}
#contenido {
float: left;
width: 550px;
}
#pie {
clear: both;
}

<body>
<div id="contenedor">
<div id="cabecera">

141
Versión Mayo 2021
 </div>

<div id="menu">
</div>

<div id="contenido">
</div>

<div id="pie">
</div>
</div>
</body>
En los estilos CSS anteriores se ha optado por desplazar tanto el menú como los

contenidos hacia la izquierda de la página (float: left). Sin embargo, en este caso también se

podría desplazar el menú hacia la izquierda (float:left) y los contenidos hacia la derecha (float:

right).

El diseño anterior es de anchura fija, lo que significa que no se adapta a la anchura de la

ventana del navegador. Para conseguir una página de anchura variable y que se adapte de forma

dinámica a la ventana del navegador, se deben aplicar las siguientes reglas CSS:

#contenedor {
}
#cabecera {
}
#menu {
float: left;
width: 15%;
}
#contenido {
float: left;
width: 85%;
}
#pie {
clear: both;
}

142
Versión Mayo 2021
 Si se indican las anchuras de los bloques que forman la página en porcentajes, el diseño

final es dinámico. Para crear diseños de anchura fija, basta con establecer las anchuras de los

bloques en píxel.

Diseño a 3 columnas con cabecera y pie de página.

Además del diseño a dos columnas, el diseño más utilizado es el de tres columnas con

cabecera y pie de página. En este caso, los contenidos se dividen en dos zonas diferenciadas:

zona principal de contenidos y zona lateral de contenidos auxiliares:

Figura 46. Esquema del diseño a tres columnas con cabecera y pie de página

La solución CSS emplea la misma estrategia del diseño a dos columnas y se basa en

utilizar las propiedades float y clear:

143
Versión Mayo 2021
 Figura 47. Propiedades CSS necesarias en el diseño a 3 columnas con cabecera y pie de página

El código HTML y CSS mínimos para definir la estructura de la página sin aplicar ningún

estilo adicional son los siguientes:

#contenedor {
}
#cabecera {
}
#menu {
float: left;
width: 15%;
}
#contenido {
float: left;
width: 85%;
}
#contenido #principal {
float: left;
width: 80%;
}
#contenido #secundario {
float: left;
width: 20%;
}

144
Versión Mayo 2021
 #pie {
clear: both;
}

<body>
<div id="contenedor">
<div id="cabecera">
</div>

<div id="menu">
</div>

<div id="contenido">
<div id="principal">
</div>

<div id="secundario">
</div>
</div>

<div id="pie">
</div>
</div>
</body>
El código anterior crea una página con anchura variable que se adapta a la ventana del

navegador. Para definir una página con anchura fija, solamente es necesario sustituir las anchuras

en porcentajes por anchuras en píxel.

Al igual que sucedía en el diseño a dos columnas, se puede optar por posicionar todos los

elementos mediante float: left o se puede utilizar float: left para el menú y la zona principal de

contenidos y float: right para el contenedor de los contenidos y la zona secundaria de contenidos.

145
Versión Mayo 2021
 Miércoles – Semana V

JavaScript

“JavaScript, comumente abreviado como JS, es un lenguaje de programación del tipo

interpretado” (Luna, 2019).

JavaScript es un lenguaje de programación que se utiliza principalmente para crear

páginas web dinámicas. Los programas escritos con JavaScript se pueden probar directamente en

cualquier navegador sin necesidad de procesos intermedios.

Cómo incluir JavaScript en documentos HTML.

Incluir JavaScript en el mismo documento XHTML.

El código JavaScript se encierra entre etiquetas <script> y se incluye en cualquier parte

del documento. Aunque es correcto incluir cualquier bloque de código en cualquier zona de la

página, se recomienda definir el código JavaScript al final del documento:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</html>
Para que la página HTML resultante sea válida, es necesario añadir el atributo type a la

etiqueta <script>. Los valores que se incluyen en el atributo type están estandarizados y para el

caso de JavaScript, el valor correcto es text/javascript.

146
Versión Mayo 2021
 Este método se emplea cuando se define un bloque pequeño de código o cuando se

quieren incluir instrucciones específicas en un determinado documento HTML que completen las

instrucciones y funciones que se incluyen por defecto en todos los documentos del sitio web.

El principal inconveniente es que si se quiere hacer una modificación en el bloque de

código, es necesario modificar todas las páginas que incluyen ese mismo bloque de código

JavaScript.

Definir JavaScript en un archivo externo.

Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript

que los documentos XHTML enlazan mediante la etiqueta <script>. Se pueden crear todos los

archivos JavaScript que sean necesarios y cada documento XHTML puede enlazar tantos

archivos JavaScript como necesite.

Ejemplo:

Archivo codigo.js

alert("Un mensaje de prueba");

Documento XHTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
<script type="text/javascript" src="/js/codigo.js"></script>
</html>
Además del atributo type, este método requiere definir el atributo src, que es el que indica

la URL correspondiente al archivo JavaScript que se quiere enlazar. Cada etiqueta <script>

147
Versión Mayo 2021
solamente puede enlazar un único archivo, pero en una misma página se pueden incluir tantas

etiquetas <script> como sean necesarias.

Los archivos de tipo JavaScript son documentos normales de texto con la extensión .js,

que se pueden crear con cualquier editor de texto como Notepad, Wordpad, EmEditor, UltraEdit,

Vi, etc.

La principal ventaja de enlazar un archivo JavaScript externo es que se simplifica el

código XHTML de la página, que se puede reutilizar el mismo código JavaScript en todas las

páginas del sitio web y que cualquier modificación realizada en el archivo JavaScript se ve

reflejada inmediatamente en todas las páginas HTML que lo enlazan.

Incluir JavaScript en los elementos HTML.

Este último método es el menos utilizado, ya que consiste en incluir trozos de JavaScript

dentro del código XHTML de la página:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
</head>
<body>
<p onclick="alert('Un mensaje de prueba')">Un párrafo de texto.</p>
</body>
</html>
El mayor inconveniente de este método es que ensucia innecesariamente el código

XHTML de la página y complica el mantenimiento del código JavaScript. En general, este

método sólo se utiliza para definir algunos eventos y en algunos otros casos especiales.

148
Versión Mayo 2021
 Sintaxis.

La sintaxis de un lenguaje de programación se define como el conjunto de reglas que

deben seguirse al escribir el código fuente de los programas para considerarse como correctos

para ese lenguaje de programación.

La sintaxis de JavaScript es muy similar a la de otros lenguajes de programación como

Java y C. Las normas básicas que definen la sintaxis de JavaScript son las siguientes:

• No se tienen en cuenta los espacios en blanco y las nuevas líneas: como sucede

con XHTML, el intérprete de JavaScript ignora cualquier espacio en blanco

sobrante, por lo que el código se puede ordenar de forma adecuada para

entenderlo mejor (tabulando las líneas, añadiendo espacios, creando nuevas líneas,

etc.)

• Se distinguen las mayúsculas y minúsculas: al igual que sucede con la sintaxis de

las etiquetas y elementos XHTML. Sin embargo, si en una página XHTML se

utilizan indistintamente mayúsculas y minúsculas, la página se visualiza

correctamente, siendo el único problema la no validación de la página. En cambio,

si en JavaScript se intercambian mayúsculas y minúsculas el script no funciona.

• No se define el tipo de las variables: al crear una variable, no es necesario indicar

el tipo de dato que almacenará. De esta forma, una misma variable puede

almacenar diferentes tipos de datos durante la ejecución del script.

• No es necesario terminar cada sentencia con el carácter de punto y coma (;): en la

mayoría de lenguajes de programación, es obligatorio terminar cada sentencia con

el carácter ;. Aunque JavaScript no obliga a hacerlo, es conveniente seguir la

tradición de terminar cada sentencia con el carácter del punto y coma (;).

149
Versión Mayo 2021
 • Se pueden incluir comentarios: los comentarios se utilizan para añadir

información en el código fuente del programa. Aunque el contenido de los

comentarios no se visualiza por pantalla, si que se envía al navegador del usuario

junto con el resto del script, por lo que es necesario extremar las precauciones

sobre la información incluida en los comentarios.

JavaScript define dos tipos de comentarios: los de una sola línea y los que ocupan varias

líneas.

Ejemplo de comentario de una sola línea:

// a continuación se muestra un mensaje

alert("mensaje de prueba");
Los comentarios de una sola línea se definen añadiendo dos barras oblicuas (//) al

principio de la línea.

Ejemplo de comentario de varias líneas:

/* Los comentarios de varias líneas son muy útiles

cuando se necesita incluir bastante información
en los comentarios */
alert("mensaje de prueba");
Los comentarios multilínea se definen encerrando el texto del comentario entre los

símbolos /* y */.

150
Versión Mayo 2021
 Jueves – Semana V

Variables en JavaScript

Las variables en los lenguajes de programación siguen una lógica similar a las variables

utilizadas en otros ámbitos como las matemáticas. Una variable es un elemento que se emplea

para almacenar y hacer referencia a otro valor.

Las variables en JavaScript se crean mediante la palabra reservada var. De esta forma, el

ejemplo anterior se puede realizar en JavaScript de la siguiente manera:

var numero_1 = 3;
var numero_2 = 1;
var resultado = numero_1 + numero_2;
La palabra reservada var solamente se debe indicar al definir por primera vez la variable,

lo que se denomina declarar una variable. Cuando se utilizan las variables en el resto de

instrucciones del script, solamente es necesario indicar su nombre.

Si cuando se declara una variable se le asigna también un valor, se dice que la variable ha

sido inicializada. En JavaScript no es obligatorio inicializar las variables, ya que se pueden

declarar por una parte y asignarles un valor posteriormente. Por tanto, el ejemplo anterior se

puede rehacer de la siguiente manera:

var numero_1;
var numero_2;
numero_1 = 3;
numero_2 = 1;
var resultado = numero_1 + numero_2;
Una de las características más sorprendentes de JavaSript para los programadores

habituados a otros lenguajes de programación es que tampoco es necesario declarar las variables.

En otras palabras, se pueden utilizar variables que no se han definido anteriormente mediante la

palabra reservada var. El ejemplo anterior también es correcto en JavaScript de la siguiente

forma:

151
Versión Mayo 2021
 var numero_1 = 3;

var numero_2 = 1;

resultado = numero_1 + numero_2;

La variable “resultado” no está declarada, por lo que JavaScript crea una variable global

(más adelante se verán las diferencias entre variables locales y globales) y le asigna el valor

correspondiente. De la misma forma, también sería correcto el siguiente código:

numero_1 = 3;

numero_2 = 1;

resultado = numero_1 + numero_2;

En cualquier caso, se recomienda declarar todas las variables que se vayan a utilizar.

El nombre de una variable también se conoce como identificador y debe cumplir las

siguientes normas:

• Sólo puede estar formado por letras, números y los símbolos $ (dólar) y _ (guión

bajo).

• El primer carácter no puede ser un número.

Tipos de variables.

Aunque todas las variables de JavaScript se crean de la misma forma (mediante la palabra

reservada var), la forma en la que se les asigna un valor depende del tipo de valor que se quiere

almacenar (números, textos, etc.)

Numéricas.

Se utilizan para almacenar valores numéricos enteros (llamados integer en inglés) o

decimales (llamados float en inglés). En este caso, el valor se asigna indicando directamente el

152
Versión Mayo 2021
número entero o decimal. Los números decimales utilizan el carácter . (punto) en vez de , (coma)

para separar la parte entera y la parte decimal:

var iva = 16; // variable tipo entero

var total = 234.65; // variable tipo decimal
Cadenas de texto.

Se utilizan para almacenar caracteres, palabras y/o frases de texto. Para asignar el valor a

la variable, se encierra el valor entre comillas dobles o simples, para delimitar su comienzo y su

final:

var mensaje = "Bienvenido a nuestro sitio web";

var nombreProducto = 'Producto ABC';
var letraSeleccionada = 'c';
Arrays.

En ocasiones, a los arrays se les llama vectores, matrices e incluso arreglos. No obstante,

el término array es el más utilizado y es una palabra comúnmente aceptada en el entorno de la

programación.

Un array es una colección de variables, que pueden ser todas del mismo tipo o cada una

de un tipo diferente. Su utilidad se comprende mejor con un ejemplo sencillo: si una aplicación

necesita manejar los días de la semana, se podrían crear siete variables de tipo texto:

var dia1 = "Lunes";

var dia2 = "Martes";
...
var dia7 = "Domingo";
Aunque el código anterior no es incorrecto, sí que es poco eficiente y complica en exceso

la programación. Si en vez de los días de la semana se tuviera que guardar el nombre de los

meses del año, el nombre de todos los países del mundo o las mediciones diarias de temperatura

de los últimos 100 años, se tendrían que crear decenas o cientos de variables.

153
Versión Mayo 2021
 En este tipo de casos, se pueden agrupar todas las variables relacionadas en una colección

de variables o array. El ejemplo anterior se puede rehacer de la siguiente forma:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes",

"Sábado", "Domingo"];
Ahora, una única variable llamada dias almacena todos los valores relacionados entre sí,

en este caso los días de la semana. Para definir un array, se utilizan los caracteres [ y ] para

delimitar su comienzo y su final y se utiliza el carácter , (coma) para separar sus elementos:

var nombre_array = [valor1, valor2, ..., valorN];

Una vez definido un array, es muy sencillo acceder a cada uno de sus elementos. Cada

elemento se accede indicando su posición dentro del array. La única complicación, que es

responsable de muchos errores cuando se empieza a programar, es que las posiciones de los

elementos empiezan a contarse en el 0 y no en el 1:

var diaSeleccionado = dias[0]; // diaSeleccionado = "Lunes"

var otroDia = dias[5]; // otroDia = "Sábado"
En el ejemplo anterior, la primera instrucción quiere obtener el primer elemento del array.

Para ello, se indica el nombre del array y entre corchetes la posición del elemento dentro del

array. Como se ha comentado, las posiciones se empiezan a contar en el 0, por lo que el primer

elemento ocupa la posición 0 y se accede a el mediante dias[0].

El valor dias[5] hace referencia al elemento que ocupa la sexta posición dentro del

array dias. Como las posiciones empiezan a contarse en 0, la posición 5 hace referencia al sexto

elemento, en este caso, el valor Sábado.

Booleanos.

Las variables de tipo boolean o booleano también se conocen con el nombre de variables

de tipo lógico. Una variable de tipo boolean almacena un tipo especial de valor que solamente

154
Versión Mayo 2021
puede tomar dos valores: true (verdadero) o false (falso). No se puede utilizar para almacenar

números y tampoco permite guardar cadenas de texto.

Los únicos valores que pueden almacenar estas variables son true y false, por lo que no

pueden utilizarse los valores verdadero y falso. A continuación se muestra un par de variables de

tipo booleano:

var clienteRegistrado = false;

var ivaIncluido = true;
Operadores en JavaScript

Los operadores permiten manipular el valor de las variables, realizar operaciones

matemáticas con sus valores y comparar diferentes variables. De esta forma, los operadores

permiten a los programas realizar cálculos complejos y tomar decisiones lógicas en función de

comparaciones y otros tipos de condiciones.

Asignación.

El operador de asignación es el más utilizado y el más sencillo. Este operador se utiliza

para guardar un valor específico en una variable. El símbolo utilizado es =:

var numero1 = 3;
A la izquierda del operador, siempre debe indicarse el nombre de una variable. A la

derecha del operador, se pueden indicar variables, valores, condiciones lógicas, etc:

var numero1 = 3;
var numero2 = 4;
Incremento y decremento

Estos dos operadores solamente son válidos para las variables numéricas y se utilizan

para incrementar o decrementar en una unidad el valor de una variable.

var numero = 5;
++numero;
alert(numero); // numero = 6

155
Versión Mayo 2021
 El operador de incremento se indica mediante el prefijo ++ en el nombre de la variable.

El resultado es que el valor de esa variable se incrementa en una unidad. Por tanto, el anterior

ejemplo es equivalente a:

var numero = 5;
numero = numero + 1;
alert(numero); // numero = 6
De forma equivalente, el operador decremento (indicado como un prefijo -- en el nombre

de la variable) se utiliza para decrementar el valor de la variable:

var numero = 5;
--numero;
alert(numero); // numero = 4
El anterior ejemplo es equivalente a:

var numero = 5;
numero = numero - 1;
alert(numero); // numero = 4
Los operadores de incremento y decremento no solamente se pueden indicar como prefijo

del nombre de la variable, sino que también es posible utilizarlos como sufijo. En este caso, su

comportamiento es similar pero muy diferente. En el siguiente ejemplo:

var numero = 5;
numero++;
alert(numero); // numero = 6
El resultado de ejecutar el script anterior es el mismo que cuando se utiliza el

operador ++numero, por lo que puede parecer que es equivalente indicar el operador ++ delante

o detrás del identificador de la variable. Sin embargo, el siguiente ejemplo muestra sus

diferencias:

var numero1 = 5;
var numero2 = 2;
numero3 = numero1++ + numero2;
// numero3 = 7, numero1 = 6

156
Versión Mayo 2021
 var numero1 = 5;
var numero2 = 2;
numero3 = ++numero1 + numero2;
// numero3 = 8, numero1 = 6
Si el operador ++ se indica como prefijo del identificador de la variable, su valor se

incrementa antes de realizar cualquier otra operación. Si el operador ++ se indica como sufijo del

identificador de la variable, su valor se incrementa después de ejecutar la sentencia en la que

aparece.

Por tanto, en la instrucción numero3 = numero1++ + numero2;, el valor de numero1 se

incrementa después de realizar la operación (primero se suma y numero3 vale 7, después se

incrementa el valor de numero1 y vale 6). Sin embargo, en la instrucción numero3 = ++numero1

+ numero2;, en primer lugar se incrementa el valor de numero1 y después se realiza la suma

(primero se incrementa numero1 y vale 6, después se realiza la suma y numero3 vale 8).

Lógicos.

Los operadores lógicos son imprescindibles para realizar aplicaciones complejas, ya que

se utilizan para tomar decisiones sobre las instrucciones que debería ejecutar el programa en

función de ciertas condiciones.

El resultado de cualquier operación que utilice operadores lógicos siempre es un valor

lógico o booleano.

Negación.

Uno de los operadores lógicos más utilizados es el de la negación. Se utiliza para obtener

el valor contrario al valor de la variable:

var visible = true;

alert(!visible); // Muestra "false" y no "true"
La negación lógica se obtiene prefijando el símbolo ! al identificador de la variable.

157
Versión Mayo 2021
 Si la variable original es de tipo booleano, es muy sencillo obtener su negación. Sin

embargo, ¿qué sucede cuando la variable es un número o una cadena de texto? Para obtener la

negación en este tipo de variables, se realiza en primer lugar su conversión a un valor booleano:

Si la variable contiene un número, se transforma en false si vale 0 y en true para cualquier

otro número (positivo o negativo, decimal o entero).

Si la variable contiene una cadena de texto, se transforma en false si la cadena es vacía

("") y en true en cualquier otro caso.

var cantidad = 0;
vacio = !cantidad; // vacio = true

cantidad = 2;
vacio = !cantidad; // vacio = false

var mensaje = "";

mensajeVacio = !mensaje; // mensajeVacio = true

mensaje = "Bienvenido";
mensajeVacio = !mensaje; // mensajeVacio = false
AND.

La operación lógica AND obtiene su resultado combinando dos valores booleanos. El

operador se indica mediante el símbolo && y su resultado solamente es true si los dos operandos

son true.

var valor1 = true;

var valor2 = false;
resultado = valor1 && valor2; // resultado = false

valor1 = true;
valor2 = true;
resultado = valor1 && valor2; // resultado = true

158
Versión Mayo 2021
 OR.

La operación lógica OR también combina dos valores booleanos. El operador se indica

mediante el símbolo || y su resultado es true si alguno de los dos operandos es true.

var valor1 = true;

var valor2 = false;
resultado = valor1 || valor2; // resultado = true

valor1 = false;
valor2 = false;
resultado = valor1 || valor2; // resultado = false
Matemáticos.

JavaScript permite realizar manipulaciones matemáticas sobre el valor de las variables

numéricas. Los operadores definidos son: suma (+), resta (-), multiplicación (*) y división (/).

Ejemplo:

var numero1 = 10;

var numero2 = 5;

resultado = numero1 / numero2; // resultado = 2

resultado = 3 + numero1; // resultado = 13
resultado = numero2 – 4; // resultado = 1
resultado = numero1 * numero 2; // resultado = 50
Además de los cuatro operadores básicos, JavaScript define otro operador matemático

que no es sencillo de entender cuando se estudia por primera vez, pero que es muy útil en

algunas ocasiones.

Se trata del operador "módulo", que calcula el resto de la división entera de dos números.

Si se divide por ejemplo 10 y 5, la división es exacta y da un resultado de 2. El resto de esa

división es 0, por lo que módulo de 10 y 5 es igual a 0.

Sin embargo, si se divide 9 y 5, la división no es exacta, el resultado es 1 y el resto 4, por

lo que módulo de 9 y 5 es igual a 4.

159
Versión Mayo 2021
 El operador módulo en JavaScript se indica mediante el símbolo %, que no debe

confundirse con el cálculo del porcentaje:

var numero1 = 10;

var numero2 = 5;
resultado = numero1 % numero2; // resultado = 0

numero1 = 9;
numero2 = 5;
resultado = numero1 % numero2; // resultado = 4
Los operadores matemáticos también se pueden combinar con el operador de asignación

para abreviar su notación:

var numero1 = 5;
numero1 += 3; // numero1 = numero1 + 3 = 8
numero1 -= 1; // numero1 = numero1 - 1 = 4
numero1 *= 2; // numero1 = numero1 * 2 = 10
numero1 /= 5; // numero1 = numero1 / 5 = 1
numero1 %= 4; // numero1 = numero1 % 4 = 1
Relacionales.

Los operadores relacionales definidos por JavaScript son idénticos a los que definen las

matemáticas: mayor que (>), menor que (<), mayor o igual (>=), menor o igual (<=), igual que

(==) y distinto de (!=).

Los operadores que relacionan variables son imprescindibles para realizar cualquier

aplicación compleja, como se verá en el siguiente capítulo de programación avanzada. El

resultado de todos estos operadores siempre es un valor booleano:

var numero1 = 3;
var numero2 = 5;
resultado = numero1 > numero2; // resultado = false
resultado = numero1 < numero2; // resultado = true

numero1 = 5;
numero2 = 5;

160
Versión Mayo 2021
 resultado = numero1 >= numero2; // resultado = true
resultado = numero1 <= numero2; // resultado = true
resultado = numero1 == numero2; // resultado = true
resultado = numero1 != numero2; // resultado = false
Se debe tener especial cuidado con el operador de igualdad (==), ya que es el origen de la

mayoría de errores de programación, incluso para los usuarios que ya tienen cierta experiencia

desarrollando scripts. El operador == se utiliza para comparar el valor de dos variables, por lo

que es muy diferente del operador =, que se utiliza para asignar un valor a una variable:

// El operador "=" asigna valores

var numero1 = 5;
resultado = numero1 = 3; // numero1 = 3 y resultado = 3

// El operador "==" compara variables

var numero1 = 5;
resultado = numero1 == 3; // numero1 = 5 y resultado = false
Los operadores relacionales también se pueden utilizar con variables de tipo cadena de

texto:

var texto1 = "hola";

var texto2 = "hola";
var texto3 = "adios";

resultado = texto1 == texto3; // resultado = false

resultado = texto1 != texto2; // resultado = false
resultado = texto3 >= texto2; // resultado = false
Cuando se utilizan cadenas de texto, los operadores "mayor que" (>) y "menor que" (<)

siguen un razonamiento no intuitivo: se compara letra a letra comenzando desde la izquierda

hasta que se encuentre una diferencia entre las dos cadenas de texto. Para determinar si una letra

es mayor o menor que otra, las mayúsculas se consideran menores que las minúsculas y las

primeras letras del alfabeto son menores que las últimas (a es menor que b, b es menor

que c, A es menor que a, etc.).

161
Versión Mayo 2021
Estructuras de control de flujo

Las estructuras de control de flujo, que son instrucciones del tipo "si se cumple esta

condición, hazlo; si no se cumple, haz esto otro". También existen instrucciones del tipo "repite

esto mientras se cumpla esta condición".

Si se utilizan estructuras de control de flujo, los programas dejan de ser una sucesión

lineal de instrucciones para convertirse en programas inteligentes que pueden tomar decisiones

en función del valor de las variables.

Estructura if.

La estructura más utilizada en JavaScript y en la mayoría de lenguajes de programación

es la estructura if. Se emplea para tomar decisiones en función de una condición. Su definición

formal es:

if(condicion) {
...
}
Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones

que se encuentran dentro de {...}. Si la condición no se cumple (es decir, si su valor es false) no

se ejecuta ninguna instrucción contenida en {...} y el programa continúa ejecutando el resto de

instrucciones del script.

Ejemplo:

var mostrarMensaje = true;

if(mostrarMensaje) {
alert("Hola Mundo");
}

162
Versión Mayo 2021
 Estructura if...else.

En ocasiones, las decisiones que se deben realizar no son del tipo "si se cumple la

condición, hazlo; si no se cumple, no hagas nada". Normalmente las condiciones suelen ser del

tipo "si se cumple esta condición, hazlo; si no se cumple, haz esto otro".

Para este segundo tipo de decisiones, existe una variante de la

estructura if llamada if...else. Su definición formal es la siguiente:

if(condicion) {
...
}
else {
...
}
Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones

que se encuentran dentro del if(). Si la condición no se cumple (es decir, si su valor es false) se

ejecutan todas las instrucciones contenidas en else { }. Ejemplo:

var edad = 18;

if(edad >= 18) {

alert("Eres mayor de edad");
}
else {
alert("Todavía eres menor de edad");
}
Estructura switch.

La estructura if...else se puede utilizar para realizar comprobaciones múltiples y tomar

decisiones complejas. Sin embargo, si todas las condiciones dependen siempre de la misma

variable, el código JavaScript resultante es demasiado redundante:

if(numero == 5) {
...
}

163
Versión Mayo 2021
 else if(numero == 8) {
...
}
else if(numero == 20) {
...
}
else {
...
}
En estos casos, la estructura switch es la más eficiente, ya que está especialmente

diseñada para manejar de forma sencilla múltiples condiciones sobre la misma variable. Su

definición formal puede parecer compleja, aunque su uso es muy sencillo:

switch(variable) {
case valor_1:
...
break;
case valor_2:
...
break;
...
case valor_n:
...
break;
default:
...
break;
}
El anterior ejemplo realizado con if...else se puede rehacer mediante switch:

switch(numero) {
case 5:
...
break;
case 8:
...
break;

164
Versión Mayo 2021
 case 20:
...
break;
default:
...
break;
}
La estructura switch se define mediante la palabra reservada switch seguida, entre

paréntesis, del nombre de la variable que se va a utilizar en las comparaciones. Como es habitual,

las instrucciones que forman parte del switch se encierran entre las llaves { y }.

Dentro del switch se definen todas las comparaciones que se quieren realizar sobre el

valor de la variable. Cada comparación se indica mediante la palabra reservada case seguida del

valor con el que se realiza la comparación. Si el valor de la variable utilizada por switch coincide

con el valor indicado por case, se ejecutan las instrucciones definidas dentro de ese case.

Normalmente, después de las instrucciones de cada case se incluye la

sentencia break para terminar la ejecución del switch, aunque no es obligatorio. Las

comparaciones se realizan por orden, desde el primer case hasta el último, por lo que es muy

importante el orden en el que se definen los case.

¿Qué sucede si ningún valor de la variable del switch coincide con los valores definidos

en los case? En este caso, se utiliza el valor default para indicar las instrucciones que se ejecutan

en el caso en el que ningún case se cumpla para la variable indicada.

Aunque default es opcional, las estructuras switch suelen incluirlo para definir al menos

un valor por defecto para alguna variable o para mostrar algún mensaje por pantalla.

Estructura for.

Las estructuras if y if...else no son muy eficientes cuando se desea ejecutar de forma

repetitiva una instrucción.

165
Versión Mayo 2021
 La estructura for permite realizar este tipo de repeticiones (también llamadas bucles) de

una forma muy sencilla. No obstante, su definición formal no es tan sencilla como la de if():

for(inicializacion; condicion; actualizacion) {

...
}
La idea del funcionamiento de un bucle for es la siguiente: "mientras la condición

indicada se siga cumpliendo, repite la ejecución de las instrucciones definidas dentro del for.

Además, después de cada repetición, actualiza el valor de las variables que se utilizan en la

condición".

La "inicialización" es la zona en la que se establece los valores iniciales de las variables

que controlan la repetición.

La "condición" es el único elemento que decide si continua o se detiene la repetición.

La "actualización" es el nuevo valor que se asigna después de cada repetición a las

variables que controlan la repetición.

var mensaje = "Hola, estoy dentro de un bucle";

for(var i = 0; i < 5; i++) {

alert(mensaje);
}
La parte de la inicialización del bucle consiste en:

var i = 0;
Por tanto, en primer lugar se crea la variable i y se le asigna el valor de 0. Esta zona de

inicialización solamente se tiene en consideración justo antes de comenzar a ejecutar el bucle.

Las siguientes repeticiones no tienen en cuenta esta parte de inicialización.

La zona de condición del bucle es:

i < 5

166
Versión Mayo 2021
 Los bucles se siguen ejecutando mientras se cumplan las condiciones y se dejan de

ejecutar justo después de comprobar que la condición no se cumple. En este caso, mientras la

variable i valga menos de 5 el bucle se ejecuta indefinidamente.

Como la variable i se ha inicializado a un valor de 0 y la condición para salir del bucle es

que i sea menor que 5, si no se modifica el valor de i de alguna forma, el bucle se repetiría

indefinidamente.

Por ese motivo, es imprescindible indicar la zona de actualización, en la que se modifica

el valor de las variables que controlan el bucle:

i++
En este caso, el valor de la variable i se incrementa en una unidad después de cada

repetición. La zona de actualización se ejecuta después de la ejecución de las instrucciones que

incluye el for.

Así, durante la ejecución de la quinta repetición el valor de i será 4. Después de la quinta

ejecución, se actualiza el valor de i, que ahora valdrá 5. Como la condición es que i sea menor

que 5, la condición ya no se cumple y las instrucciones del for no se ejecutan una sexta vez.

Normalmente, la variable que controla los bucles for se llama i, ya que recuerda a la

palabra índice y su nombre tan corto ahorra mucho tiempo y espacio.

El ejemplo anterior que mostraba los días de la semana contenidos en un array se puede

rehacer de forma más sencilla utilizando la estructura for:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes",

"Sábado", "Domingo"];

for(var i=0; i<7; i++) {

alert(dias[i]);
}

167
Versión Mayo 2021
 Estructura for...in.

Una estructura de control derivada de for es la estructura for...in. Su definición exacta

implica el uso de objetos, que es un elemento de programación avanzada que no se va a estudiar.

Por tanto, solamente se va a presentar la estructura for...in adaptada a su uso en arrays. Su

definición formal adaptada a los arrays es:

for(indice in array) {
...
}
Si se quieren recorrer todos los elementos que forman un array, la estructura for...in es la

forma más eficiente de hacerlo, como se muestra en el siguiente ejemplo:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes",

"Sábado", "Domingo"];

for(i in dias) {
alert(dias[i]);
}
La variable que se indica como indice es la que se puede utilizar dentro del

bucle for...in para acceder a los elementos del array. De esta forma, en la primera repetición del

bucle la variable i vale 0 y en la última vale 6.

Esta estructura de control es la más adecuada para recorrer arrays (y objetos), ya que evita

tener que indicar la inicialización y las condiciones del bucle for simple y funciona

correctamente cualquiera que sea la longitud del array. De hecho, sigue funcionando igual

aunque varíe el número de elementos del array.

Estructura while.

La estructura while permite crear bucles que se ejecutan ninguna o más veces,

dependiendo de la condición indicada. Su definición formal es:

while(condicion) {

168
Versión Mayo 2021
 ...
}
El funcionamiento del bucle while se resume en: "mientras se cumpla la condición

indicada, repite indefinidamente las instrucciones incluidas dentro del bucle".

Si la condición no se cumple ni siquiera la primera vez, el bucle no se ejecuta. Si la

condición se cumple, se ejecutan las instrucciones una vez y se vuelve a comprobar la condición.

Si se sigue cumpliendo la condición, se vuelve a ejecutar el bucle y así se continúa hasta que la

condición no se cumpla.

Evidentemente, las variables que controlan la condición deben modificarse dentro del

propio bucle, ya que de otra forma, la condición se cumpliría siempre y el bucle while se

repetiría indefinidamente.

El siguiente ejemplo utiliza el bucle while para sumar todos los números menores o

iguales que otro número:

var resultado = 0;
var numero = 100;
var i = 0;

while(i <= numero) {

resultado += i;
i++;
}

alert(resultado);
Estructura do...while.

El bucle de tipo do...while es muy similar al bucle while, salvo que en este

caso siempre se ejecutan las instrucciones del bucle al menos la primera vez. Su definición

formal es:

do {
...

169
Versión Mayo 2021
 } while(condicion);
De esta forma, como la condición se comprueba después de cada repetición, la primera

vez siempre se ejecutan las instrucciones del bucle. Es importante no olvidar que después

del while() se debe añadir el carácter ; (al contrario de lo que sucede con el bucle while simple).

Utilizando este bucle se puede calcular fácilmente el factorial de un número:

var resultado = 1;
var numero = 5;

do {
resultado *= numero; // resultado = resultado * numero
numero--;
} while(numero > 0);

alert(resultado);

170
Versión Mayo 2021
 Actividades – Semana V

Actividad 1

Realice el código HTML y CSS necesario para obtener una tabla como el siguiente:

Actividad 2

Realice el código HTML y CSS necesario para obtener una tabla como el siguiente:

Actividad 3

Determinar el código HTML y CSS necesario para crear la siguiente imagen:

171
Versión Mayo 2021
Actividad 4

Realice el código HTML y CSS necesario para obtener algo parecido:

Actividad 5

Realice un mapa mental sobre JavaScript.

Actividad 6

Explique como agregar código JS en HTML.

Actividad 7

Realice una tabla con los operadores existentes en JS.

172
Versión Mayo 2021
Actividad 8

Crear un array llamado meses y que almacene el nombre de los doce meses del año.

Mostrar por pantalla los doce nombres utilizando la función alert().

Actividad 9

A partir del siguiente array que se proporciona: var valores = [true, 5, false, "hola",

"adios", 2];

• Determinar cual de los dos elementos de texto es mayor.

• Utilizando exclusivamente los dos valores booleanos del array, determinar los

operadores necesarios para obtener un resultado true y otro resultado false.

• Determinar el resultado de las cinco operaciones matemáticas realizadas con los

dos elementos numéricos.

Actividad 10

El factorial de un número entero n es una operación matemática que consiste en

multiplicar todos los factores n x (n-1) x (n-2) x ... x 1. Así, el factorial de 5 (escrito como 5!) es

igual a: 5! = 5 x 4 x 3 x 2 x 1 = 120. Utilizando la estructura for, crear un script que calcule el

factorial de un número entero.

173
Versión Mayo 2021
 Recursos Semana V

Videos

• Diseño de tablas con CSS. https://www.youtube.com/watch?v=5XsSN4vTFK8

• Curso Básico de CSS - 14. Layout, estructura básica.

https://www.youtube.com/watch?v=HDqJS5puXs4

• Tutorial Básico de JavaScript – Variables.

https://www.youtube.com/watch?v=Rtk8Z_hObyY

Presentaciones

• Modulo 4 - Formularios, CSS, etc. https://es.slideshare.net/ralfaro_pinto/modulo-4-

formularios-css-etc

• Layout with CSS. https://es.slideshare.net/mikecrabb/layout-with-css

• Control de flujo condicional if-else. https://es.slideshare.net/dimit28/control-de-flujo-

condicional-ifelse

Lecturas complementarias

• Estilos de tablas. https://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html

• Diseño de layouts. https://interfacesweb.github.io/unidades/02-estilos/02-02-

layout.html

• Estructuras de control JS. https://www.arkaitzgarro.com/javascript/capitulo-

5.html

174
Versión Mayo 2021
 Semana VI

Contenido

Lunes – Semana VI ......................................................................................................... 177

Funciones ........................................................................................................................ 177

Martes – Semana VI ........................................................................................................ 179

DOM (Document Object Model) .................................................................................... 179

Árbol de nodos. ....................................................................................................... 179

Tipos de nodos más habitules. ................................................................................ 182

Acceso directo a los nodos. ..................................................................................... 183

Acceso directo a los atributos HTML. .................................................................... 185

Miércoles – Semana VI ................................................................................................... 187

Eventos en Javascript ...................................................................................................... 187

Tipos de eventos...................................................................................................... 187

¿Para qué sirve un servidor web? ............................................................................ 189

Servidores web más utilizados. ............................................................................... 190

Tipos de servidores. ................................................................................................ 191

Hosting. ................................................................................................................... 192

Dominios. ................................................................................................................ 194

Servidores locales más populares............................................................................ 197

Instalación de XAMPP .................................................................................................... 199

175
Versión Mayo 2021
 Panel de control XAMPP. ....................................................................................... 202

Actividades – Semana VI ................................................................................................ 205

Recursos – Semana VI .................................................................................................... 209

176
Versión Mayo 2021
 Lunes – Semana VI

Funciones

Cuando se desarrolla una aplicación compleja, es muy habitual utilizar una y otra vez las

mismas instrucciones. Las funciones son la solución a todos estos problemas, tanto en JavaScript

como en el resto de lenguajes de programación. “Una función es un conjunto de instrucciones

que se agrupan para realizar una tarea concreta y que se pueden reutilizar fácilmente” (Eguiluz,

Introducción a JavaScript).

Las funciones en JavaScript se definen mediante la palabra reservada function, seguida

del nombre de la función. Su definición formal es la siguiente:

function nombre_funcion() {
...
}
El nombre de la función se utiliza para llamar a esa función cuando sea necesario. El

concepto es el mismo que con las variables, a las que se les asigna un nombre único para poder

utilizarlas dentro del código. Después del nombre de la función, se incluyen dos paréntesis y se

estable los parámetros, si es que recibe parámetros. Por último, los símbolos { y } se utilizan

para encerrar todas las instrucciones que pertenecen a la función.

Ejemplo, se crea una función llamada suma_y_muestra de la siguiente forma:

function suma_y_muestra(numero1, numero2) {

var resultado = numero1 + numero2;
alert("El resultado es " + resultado);
}
Una vez creada la función, desde cualquier punto del código se puede llamar a la función

para que se ejecuten sus instrucciones (además de "llamar a la función", también se suele utilizar

la expresión "invocar a la función").

177
Versión Mayo 2021
 La llamada a la función se realiza simplemente indicando su nombre, incluyendo los

paréntesis del final y el carácter ; para terminar la instrucción:

function suma_y_muestra(numero1, numero2) {

var resultado = numero1 + numero2;
alert("El resultado es " + resultado);
}

suma_y_muestra(4,3);

178
Versión Mayo 2021
 Martes – Semana VI

DOM (Document Object Model)

El Modelo de Objetos del Documento (DOM) es un API para documentos HTML y

XML. Proporciona una representación estructural del documento, permitiendo la

modificación de su contenido o su presentación visual. Esencialmente, comunica las

páginas web con los scripts o los lenguajes de programación (MDN Web Docs, 2020).

Una de las tareas habituales en la programación de aplicaciones web con JavaScript

consiste en la manipulación de las páginas web. De esta forma, es habitual obtener el valor

almacenado por algunos elementos (por ejemplo los elementos de un formulario), crear un

elemento (párrafos, <div>, etc.) de forma dinámica y añadirlo a la página, aplicar una animación

a un elemento (que aparezca/desaparezca, que se desplace, etc.).

Todas estas tareas habituales son muy sencillas de realizar gracias a DOM.

Árbol de nodos.

DOM transforma todos los documentos HTML en un conjunto de elementos llamados

nodos, que están interconectados y que representan los contenidos de las páginas web y las

relaciones entre ellos. Por su aspecto, la unión de todos los nodos se llama "árbol de nodos".

La siguiente página HTML sencilla:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Página sencilla</title>
</head>

<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>

179
Versión Mayo 2021
 Se transforma en el siguiente árbol de nodos:

Figura 48. Árbol de nodos generado automáticamente por DOM a partir del código HTML de la página. Fuente:
(Eguiluz, Introducción a JavaScript)

En el esquema anterior, cada rectángulo representa un nodo DOM y las flechas indican

las relaciones entre nodos. Dentro de cada nodo, se ha incluido su tipo (que se verá más adelante)

y su contenido.

La raíz del árbol de nodos de cualquier página XHTML siempre es la misma: un nodo de

tipo especial denominado "Documento".

A partir de ese nodo raíz, cada etiqueta XHTML se transforma en un nodo de

tipo "Elemento". La conversión de etiquetas en nodos se realiza de forma jerárquica. De esta

forma, del nodo raíz solamente pueden derivar los nodos HEAD y BODY. A partir de esta

derivación inicial, cada etiqueta XHTML se transforma en un nodo que deriva del nodo

correspondiente a su "etiqueta padre".

180
Versión Mayo 2021
 La transformación de las etiquetas HTML habituales genera dos nodos: el primero es el

nodo de tipo "Elemento" (correspondiente a la propia etiqueta HTML) y el segundo es un nodo

de tipo "Texto" que contiene el texto encerrado por esa etiqueta HTML.

Así, la siguiente etiqueta HTML:

<title>Página sencilla</title>

Genera los siguientes dos nodos:

Figura 49. Nodos generados automáticamente por DOM para una etiqueta HTML sencilla. Fuente: (Eguiluz,
Introducción a JavaScript)

De la misma forma, la siguiente etiqueta HTML:

<p>Esta página es <strong>muy sencilla</strong></p>

Genera los siguientes nodos:

• Nodo de tipo "Elemento" correspondiente a la etiqueta <p>.

• Nodo de tipo "Texto" con el contenido textual de la etiqueta <p>.

• Como el contenido de <p> incluye en su interior otra etiqueta HTML, la etiqueta

interior se transforma en un nodo de tipo "Elemento" que representa la

etiqueta <strong> y que deriva del nodo anterior.

• El contenido de la etiqueta <strong> genera a su vez otro nodo de tipo "Texto" que

deriva del nodo generado por <strong>.

181
Versión Mayo 2021
Figura 50. Nodos generados automáticamente por DOM para una etiqueta XHTML con otras etiquetas XHTML en
su interior. Fuente: (Eguiluz, Introducción a JavaScript)

La transformación automática de la página en un árbol de nodos siempre sigue las

mismas reglas:

• Las etiquetas XHTML se transforman en dos nodos: el primero es la propia etiqueta y

el segundo nodo es hijo del primero y consiste en el contenido textual de la etiqueta.

• Si una etiqueta XHTML se encuentra dentro de otra, se sigue el mismo procedimiento

anterior, pero los nodos generados serán nodos hijo de su etiqueta padre.

Tipos de nodos más habitules.

La especificación completa de DOM define 12 tipos de nodos, aunque las páginas HTML

habituales se pueden manipular manejando solamente cuatro o cinco tipos de nodos:

• Document, nodo raíz del que derivan todos los demás nodos del árbol.

• Element, representa cada una de las etiquetas XHTML. Se trata del único nodo que

puede contener atributos y el único del que pueden derivar otros nodos.

• Attr, se define un nodo de este tipo para representar cada uno de los atributos de las

etiquetas XHTML, es decir, uno por cada par atributo=valor.

• Text, nodo que contiene el texto encerrado por una etiqueta XHTML.

182
Versión Mayo 2021
 • Comment, representa los comentarios incluidos en la página XHTML.

Acceso directo a los nodos.

Una vez construido automáticamente el árbol completo de nodos DOM, ya es posible

utilizar las funciones DOM para acceder de forma directa a cualquier nodo del árbol. Como

acceder a un nodo del árbol es equivalente a acceder a "un trozo" de la página, una vez

construido el árbol, ya es posible manipular de forma sencilla la página: acceder al valor de un

elemento, establecer el valor de un elemento, mover un elemento de la página, crear y añadir

nuevos elementos, etc.

getElementsByTagName().

Como sucede con todas las funciones que proporciona DOM, la función

getElementsByTagName() tiene un nombre muy largo, pero que lo hace autoexplicativo.

La función getElementsByTagName(nombreEtiqueta) obtiene todos los elementos de la

página HTML cuya etiqueta sea igual que el parámetro que se le pasa a la función.

El siguiente ejemplo muestra cómo obtener todos los párrafos de una página HTML:

var parrafos = document.getElementsByTagName("p");

El valor que se indica delante del nombre de la función (en este caso, document) es el

nodo a partir del cual se realiza la búsqueda de los elementos. En este caso, como se quieren

obtener todos los párrafos de la página, se utiliza el valor document como punto de partida de la

búsqueda.

El valor que devuelve la función es un array con todos los nodos que cumplen la

condición de que su etiqueta coincide con el parámetro proporcionado. El valor devuelto es un

array de nodos DOM, no un array de cadenas de texto o un array de objetos normales. Por lo

tanto, se debe procesar cada valor del array de la forma que se muestra en las siguientes

secciones.

183
Versión Mayo 2021
 De este modo, se puede obtener el primer párrafo de la página de la siguiente manera:

var primerParrafo = parrafos[0];

De la misma forma, se podrían recorrer todos los párrafos de la página con el siguiente

código:

for(var i=0; i<parrafos.length; i++) {

var parrafo = parrafos[i];
}
La función getElementsByTagName() se puede aplicar de forma recursiva sobre cada uno

de los nodos devueltos por la función. En el siguiente ejemplo, se obtienen todos los enlaces del

primer párrafo de la página:

var parrafos = document.getElementsByTagName("p");

var primerParrafo = parrafos[0];
var enlaces = primerParrafo.getElementsByTagName("a");
getElementsByName().

La función getElementsByName() es similar a la anterior, pero en este caso se buscan los

elementos cuyo atributo name sea igual al parámetro proporcionado. En el siguiente ejemplo, se

obtiene directamente el único párrafo con el nombre indicado:

var parrafoEspecial = document.getElementsByName("especial");

<p name="prueba">...</p>
<p name="especial">...</p>
<p>...</p>
Normalmente el atributo name es único para los elementos HTML que lo definen, por lo

que es un método muy práctico para acceder directamente al nodo deseado. En el caso de los

elementos HTML radiobutton, el atributo name es común a todos los radiobutton que están

relacionados, por lo que la función devuelve una colección de elementos.

184
Versión Mayo 2021
 getElementById().

La función getElementById() es la más utilizada cuando se desarrollan aplicaciones web

dinámicas. Se trata de la función preferida para acceder directamente a un nodo y poder leer o

modificar sus propiedades.

La función getElementById() devuelve el elemento HTML cuyo atributo id coincide con

el parámetro indicado en la función. Como el atributo id debe ser único para cada elemento de

una misma página, la función devuelve únicamente el nodo deseado.

var cabecera = document.getElementById("cabecera");

<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
La función getElementById() es tan importante y tan utilizada en todas las aplicaciones

web, que casi todos los ejemplos y ejercicios que siguen la utilizan constantemente.

Acceso directo a los atributos HTML.

Una vez que se ha accedido a un nodo, el siguiente paso natural consiste en acceder y/o

modificar sus atributos y propiedades. Mediante DOM, es posible acceder de forma sencilla a

todos los atributos HTML y todas las propiedades CSS de cualquier elemento de la página.

Los atributos HTML de los elementos de la página se transforman automáticamente en

propiedades de los nodos. Para acceder a su valor, simplemente se indica el nombre del atributo

HTML detrás del nombre del nodo.

El siguiente ejemplo obtiene de forma directa la dirección a la que enlaza el enlace:

var enlace = document.getElementById("enlace");

alert(enlace.href); // muestra http://www...com

<a id="enlace" href="http://www...com">Enlace</a>

185
Versión Mayo 2021
 En el ejemplo anterior, se obtiene el nodo DOM que representa el enlace mediante la

función document.getElementById(). A continuación, se obtiene el atributo href del enlace

mediante enlace.href. Para obtener por ejemplo el atributo id, se utilizaría enlace.id.

Las propiedades CSS no son tan fáciles de obtener como los atributos HTML. Para

obtener el valor de cualquier propiedad CSS del nodo, se debe utilizar el atributo style. El

siguiente ejemplo obtiene el valor de la propiedad margin de la imagen:

var imagen = document.getElementById("imagen");

alert(imagen.style.margin);

<img id="imagen" style="margin:0; border:0;" src="logo.png" />

Si el nombre de una propiedad CSS es compuesto, se accede a su valor modificando

ligeramente su nombre:

var parrafo = document.getElementById("parrafo");

alert(parrafo.style.fontWeight); // muestra "bold"

<p id="parrafo" style="font-weight: bold;">...</p>

La transformación del nombre de las propiedades CSS compuestas consiste en eliminar

todos los guiones medios (-) y escribir en mayúscula la letra siguiente a cada guión medio. A

continuación se muestran algunos ejemplos:

font-weight se transforma en fontWeight

line-height se transforma en lineHeight
border-top-style se transforma en borderTopStyle
list-style-image se transforma en listStyleImage
El único atributo HTML que no tiene el mismo nombre en HTML y en las propiedades

DOM es el atributo class. Como la palabra class está reservada por JavaScript, no es posible

utilizarla para acceder al atributo class del elemento HTML. En su lugar, DOM utiliza el

nombre className para acceder al atributo class de HTML:

var parrafo = document.getElementById("parrafo");

alert(parrafo.className); //"normal" si <p class="normal">...</p>

186
Versión Mayo 2021
 Miércoles – Semana VI

Eventos en Javascript

Hasta ahora, todas las aplicaciones y scripts que se han creado tienen algo en común: se

ejecutan desde la primera instrucción hasta la última de forma secuencial. Gracias a las

estructuras de control de flujo (if, for, while) es posible modificar ligeramente este

comportamiento y repetir algunos trozos del script y saltarse otros trozos en función de algunas

condiciones.

Este tipo de aplicaciones son poco útiles, ya que no interactúan con los usuarios y no

pueden responder a los diferentes eventos que se producen durante la ejecución de una

aplicación. Afortunadamente, las aplicaciones web creadas con el lenguaje JavaScript pueden

utilizar el modelo de programación basada en eventos.

Los eventos hacen posible que los usuarios transmitan información a los programas.

JavaScript define numerosos eventos que permiten una interacción completa entre el usuario y

las páginas/aplicaciones web.

Tipos de eventos

En este modelo, cada elemento o etiqueta HTML define su propia lista de posibles

eventos que se le pueden asignar. En la siguiente tabla se obtiene el Modelo básico de eventos.

Tabla 3.
Modelo básico de eventos
Evento Descripción Elementos para los
que está definido
onblur Deseleccionar el elemento <button>, <input>,
<label>, <select>,
<textarea>, <body>
onchange Deseleccionar un elemento <input>, <select>,
que se ha modificado <textarea>
onclick Pinchar y soltar el ratón Todos los elementos
ondblclick Pinchar dos veces seguidas Todos los elementos
con el ratón

187
Versión Mayo 2021
onfocus Seleccionar un elemento <button>, <input>,
<label>, <select>,
<textarea>, <body>
onkeydown Pulsar una tecla (sin soltar) Elementos de
formulario y <body>
onkeypress Pulsar una tecla Elementos de
formulario y <body>
onkeyup Soltar una tecla pulsada Elementos de
formulario y <body>
onload La página se ha cargado <body>
completamente
onmousedown Pulsar (sin soltar) un botón Todos los elementos
del ratón
onmousemove Mover el ratón Todos los elementos
onmouseout El ratón "sale" del Todos los elementos
elemento (pasa por encima
de otro elemento)
onmouseover El ratón "entra" en el Todos los elementos
elemento (pasa por encima
del elemento)
onmouseup Soltar el botón que estaba Todos los elementos
pulsado en el ratón
onreset Inicializar el formulario <form>
(borrar todos sus datos)
onresize Se ha modificado el <body>
tamaño de la ventana del
navegador
onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>
onunload Se abandona la página (por <body>
ejemplo al cerrar el
navegador)

188
Versión Mayo 2021
 Jueves – Semana VI

Servidores web

En informática, un servidor web o Servidor HTTP es una pieza de software de

comunicaciones que intermedia entre el servidor en el que están alojados los datos solicitados y

el computador del cliente, permitiendo conexiones bidireccionales o unidireccionales, síncronas

o asíncronas, con cualquier aplicación del cliente, incluso con los navegadores que traducen un

código traducible (renderizable) a una página web determinada. O sea, se trata de programas que

median entre el usuario de Internet y el servidor en donde está la información que solicita.

Los servidores web son programas de uso cotidiano en Internet, que emplean para

comunicarse diversos protocolos de datos, siendo el más común y de alguna manera estándar el

HTTP (HyperText Transfer Protocol). Sin embargo, es posible también usar el término para

referirse al computador en el que están guardados los archivos que componen un sitio web, junto

al software necesario para cumplir con la conexión de datos web.

¿Para qué sirve un servidor web?

Figura 53. Funcionamiento servidor web.

189
Versión Mayo 2021
 Como se ha dicho, la función de los servidores web es la de mediar entre las solicitudes

de los usuarios y los archivos que contienen la información solicitada, en el computador en el

que están almacenados. Por ende, se necesita uno para publicar un sitio web, y también para

tener acceso a los datos que componen una página web cualquiera. Este proceso ocurre de la

siguiente manera:

▪ El usuario introduce una dirección web (URL) en su navegador y éste envía una

solicitud al servidor web.

▪ El servidor web (software) busca los archivos pertinentes ya sea en el propio servidor

(hardware) o en un servicio de hosting en el que están siempre disponibles y en línea.

▪ Los archivos entonces son procesados según lo solicitado y enviados de acuerdo al

protocolo de transferencia, es decir, conforme a un conjunto de reglas que regulan

la comunicación entre los computadores.

▪ El navegador recibe los archivos y ensambla el contenido de la página web que se

muestra al usuario.

Servidores web más utilizados.

Entre los servidores web más utilizados del mundo podemos encontrar algunos como:

Apache fue, durante casi 2 décadas, el webserver más utilizado del mundo, aunque en los

últimos años ha perdido bastante terreno frente a rivales como Nginx o IIS. Aun así, sigue siendo

un servidor web sólido, seguro, eficaz y fácil de configurar, sin mencionar que sigue siendo la

opción predefinida para los servidores que corren cPanel, el panel de control más popular del

mercado.

Nginx es un webserver que ha tenido un crecimiento increíble en cuestión de unos pocos

años, al punto de que actualmente está por delante de Apache. Considerado por muchos como el

190
Versión Mayo 2021
web server más rápido hoy en día, su alta capacidad para despachar contenido, su seguridad y

solidez lo convierten en la opción número 1 de muchos administradores de sistemas.

LiteSpeed es otro de los grandes webservers que podemos encontrar en el mercado. Si

bien se trata de un software de pago, este servidor web ha demostrado que tiene un gran

potencial. Combinando las reglas y flexibilidad de Apache y la velocidad y seguridad de Nginx,

LiteSpeed se está abriendo camino como una alternativa muy sólida, rápida y segura. Su

compatibilidad con cPanel también hace que sea popular entre servidores que utilizan dicho

panel y que necesitan un mejor rendimiento que el brindado por Apache.

IIS se ha convertido en poco tiempo en el webserver más utilizado del mundo.

Desarrollado por Microsoft, IIS es el servidor web que viene integrado por defecto en servidores

que corren Windows Server. Si bien es muy diferente a sus rivales de Linux, no deja de ser un

webserver seguro, rápido y fácil de manejar.

Tipos de servidores.

Existen dos tipos de servidores: locales y remotos.

Un servidor local se instala por medio de un programa para permitirnos probar y navegar

la página web que vayamos a crear desde nuestro equipo personal. Las páginas se acceden

siempre mediante una dirección o url, el acceso para navegar en nuestro equipo se conoce

como localhost. Éste es un nombre reservado que tienen todas las computadoras, router o

dispositivo que disponga de una tarjeta de red ethernet para referirse a sí mismo. El

nombre localhost es traducido como la dirección IP 127.0.0.1.

Servidor de acceso remoto (Remote Access Server/Services) es una combinación de

hardware y software que permite el acceso remoto a herramientas o información que

generalmente residen en una red de dispositivos. Hablando de un servidor como un equipo, son

191
Versión Mayo 2021
las computadoras que se usan para tener a su vez programas servidores. Son mucho más grandes

y poseen mayores caraterísticas que los equipos normales. Éstos equipos son los que nos dan un

espacio para almacenar nuestro sitio web, es decir, nos permiten tener lo que llamamos

un Hosting, además de éste se necesita un nombre para el sitio web; es decir, un Dominio, por

medio del cual cualquier persona podrá acceder a nuestro sitio web a través de la red.

Hosting.

El hosting es un servicio en línea que te permite publicar un sitio o aplicación web en

Internet. Cuando te registras en un servicio de hosting, básicamente alquilas un espacio en un

servidor donde puedes almacenar todos los archivos y datos necesarios para que tu sitio web

funcione correctamente.

Un servidor es una computadora física que funciona ininterrumpidamente para que tu

sitio web esté disponible todo el tiempo para cualquier persona que quiera verlo. Tu proveedor

de hosting es el responsable de mantener el servidor en funcionamiento, protegerlo de ataques

maliciosos y transferir tu contenido (texto, imágenes, archivos) desde el servidor a los

navegadores de tus visitantes.

Diferentes tipos de hosting.

La mayoría de los proveedores de hosting ofrecen diferentes tipos de hosting web para

poder satisfacer las necesidades de diferentes clientes. Los tipos de hosting más comunes son:

Hosting Compartido.

El hosting o alojamiento compartido es el tipo más común de hosting web y es una

excelente solución para la mayoría de las pequeñas empresas y blogs. Cuando escuchas la

palabra «hosting web», quien está hablando generalmente se refiere al hosting compartido. Con

el hosting compartido, compartes un servidor con otros clientes de tu proveedor de hosting. Los

192
Versión Mayo 2021
sitios web alojados en el mismo servidor comparten todos sus recursos, como memoria, potencia

de cómputo, espacio en disco y otros.

Hosting VPS.

Con el hosting VPS (servidor privado virtual), aún compartes un servidor con otros

usuarios, sin embargo, el proveedor te asigna una partición separada en el servidor. Esto significa

que obtienes un espacio de servidor dedicado y una cantidad reservada de potencia de cómputo y

memoria. De hecho, el hosting VPS puede ser ideal para empresas medianas con sitios web en

rápido crecimiento.

Hosting en la nube (Cloud Hosting).

El hosting en la nube o Cloud Hosting es actualmente la solución más confiable en el

mercado, ya que no tiene tiempos de inactividad (downtime). Con el hosting en la nube, tu

proveedor te da un clúster de servidores. Tus archivos y recursos se replican en cada servidor.

Cuando uno de los servidores en la nube está ocupado o tiene algún problema, tu tráfico se dirige

automáticamente a otro servidor del clúster.

Hosting WordPress.

El hosting para WordPress es una forma específica de hosting compartido, creada para los

propietarios de sitios de WordPress. Tu servidor está configurado específicamente para

WordPress y tu sitio viene con plugins preinstalados para cosas cruciales como el

almacenamiento en caché y la seguridad. Debido a la configuración altamente optimizada, tu

sitio carga mucho más rápido y funciona con menos problemas. Los planes de hosting para

WordPress suelen incluir características adicionales relacionadas con WordPress, como plantillas

de WordPress prediseñadas, creadores de páginas con herramientas de arrastrar y soltar, y

herramientas específicas para desarrolladores.

193
Versión Mayo 2021
 Servidor dedicado.

Hosting con servidor dedicado significa que tienes tu propio servidor físico dedicado

exclusivamente para tu sitio. Por lo tanto, el hosting dedicado te brinda una flexibilidad increíble.

Puedes configurar tu servidor como quieras, elegir el sistema operativo y el software que quieres

utilizar, y configurar todo el entorno de hosting según tus propias necesidades.

Dominios.

El dominio es la dirección de tu sitio; por ejemplo, google.com. Cuando los usuarios

quieran visitar un sitio, escribirán el nombre del dominio en la barra de direcciones de su

navegador y el servidor transferirá el contenido solicitado.

Un dominio web está determinado por dos secciones: un dominio de primer nivel (TLD)

o extensión, y un dominio de segundo nivel (SLD) o nombre de dominio.

Figura 54. Partes de un dominio web.

Dentro de las extensiones de dominio puedes identificar dos principales: las genéricas de

nivel superior, o gTLD, y las de código de país, o ccTLD.

Dominios genéricos de primer nivel (gTLD).

Como su nombre lo indica, las extensiones genéricas son las que se usan de manera

general y cualquier persona que desee comprar un dominio para su sitio web las puede solicitar

en su registro.

194
Versión Mayo 2021
 Las tres gTLD más populares son:

.com (comercial). Es la extensión más común de internet y, por ende, la que inspira más

confianza.

.net (network, red). Aunque originalmente estaba destinada a sitios relacionados con

tecnologías de la información, los usuarios acuden a esta extensión como alternativa al .com

cuando el nombre de dominio ya está ocupado.

.org (organizaciones). Es la extensión más utilizada por organizaciones no

gubernamentales o sin fines de lucro. Igualmente se utiliza por empresas con actividades sociales

o de difusión cultural o científica.

A estas se añaden otras gTLD muy conocidas como:

.biz (negocios)

.info (información)

.name (nombre)

El .gob y el .edu, son exclusivas de instituciones gubernamentales y educativas,

respectivamente, y para cuyo registro se deben cumplir requisitos más estrictos por tratarse de

dos importantes sectores de la sociedad.

Nuevos gTLD.

En el 2013, la Corporación de Internet para Nombres y Números Asignados (ICANN),

organización responsable de coordinar y supervisar los dominios de sitios web, lanzó más de

1,000 nuevos dominios genéricos con el fin de diversificar los nombres de dominio, y que

industrias y empresas emergentes tuvieran mayor oportunidad de ser visibles en la red.

Estas nuevas extensiones se dividen en tres grupos:

195
Versión Mayo 2021
• Cerradas o de marca: Se utilizan para que las empresas puedan usar su propio nombre

y que ningún otro sitio pueda tenerla. Los casos más representativos son: .amazon, del

gigante del comercio electrónico; .ford, de la automotriz estadounidense,

y .mcdonalds de la famosa cadena de comida rápida.

• De temas o sectores: Se utilizan para especificar el giro o ramo al que pertenece el

sitio web. Como ejemplos tenemos:

o Industria: .estate (bienes raíces); .travel (turismo); .news (periodismo), etc.

o Deporte: .bike, .futbol, .golf, etc.

o Actividad: .photography (fotografía); .attorney (abogados); .accountant (conta

dores), etc.

o Regionales o globales: .africa, .international, .world, etc.

• Geográficas o de ciudad: Son todas aquellas extensiones relacionadas con lugares

específicos, como .barcelona, .paris o .london.

Figura 55. Desglose de nuevos gTLD, agosto 2019. Fuente: nTLDStats

196
Versión Mayo 2021
 Dominios por país (ccTLD).

Además de las extensiones genéricas, las de código de país o ccTLD se utilizan

principalmente para identificar la zona geográfica de un sitio web.

Estas extensiones se forman con las dos letras representativas del país de origen del

sitio. Ejemplo:.ec – Ecuador, .ve – Venezuela, .es – España.

Los códigos de país son regulados por operadores nacionales (conocidos como Network

Information Centres, o NIC) quienes, además de administrar los dominios bajo su extensión,

establecen los requisitos para obtener y mantener el registro.

Servidores locales más populares.

Un servidor web local (instalado en nuestro propio equipo) suele ser una solución ideal

para realizar pruebas y/o tareas de administración, instalación o desarrollo. De esta forma,

podemos probar, configurar o programar nuestra aplicación web sin miedo a estropear la

aplicación web oficial o el servidor en producción.

La configuración e instalación de cada uno de los componentes necesarios para hacer

funcionar una aplicación web en todas sus capas (servidor web, servidor de bases de datos,

lenguaje de programación, etc...) suele ser costoso, tanto en tiempo como en complejidad.

Existen packs de software llamados «stacks» que contienen todo lo necesario para hacer

funcionar una aplicación web.

XAMPP.

Uno de los más conocidos es XAMPP. Incorpora un servidor Apache, un sistema gestor

de bases de datos MySQL y lenguajes como PHP y Perl. Además, ofrece soporte para gestionar

cuentas FTP, acceso a bases de datos mediante PHPMyAdmin, bases de datos SQLite y varias

otras características.

197
Versión Mayo 2021
 También incluye un servidor de correos Mercury para el envío de emails, un servidor

Tomcat para servlets JSP, y un servidor FTP FileZilla.

WAMPServer.

WampServer (o simplemente WAMP), se trata de un conjunto Apache + MySQL + PHP

para Windows, en el que además se incluye PHPMyAdmin para gestionar las bases de datos

y webgrind como profiler para analizar el rendimiento de aplicaciones PHP5 en nuestro servidor.

MAMP.

MAMP es el análogo para el sistema operativo de Apple (Mac + Apache + MySQL +

PHP).

Laragon.

Laragon es una suite de desarrollo para PHP que funciona sobre Windows diseñado

especialmente para trabajar con Laravel. Similar a otras herramientas como Xampp o

Wampp, Laragon nos permite crear un entorno de desarrollo con estas características: Cmder

(Consola para Windows) Git.

EasyPHP.

EasyPHP es un WAMP orientado a desarrolladores PHP. La aplicación es muy sencilla y

minimalista, ya que sólo muestra el control de los servidores y un registro de sucesos (log). Sin

embargo, en la página local principal, ofrece varias cosas interesantes, como un panel de

opciones de cada servidor, cambiar credenciales, avisos de actualizaciones o incluso un

intérprete para pruebas PHP.

198
Versión Mayo 2021
 BitNami.

Probablemente, una de las opciones más cómodas e interesantes sea BitNami. Se trata de

una colección de aplicaciones web comunes, donde puedes encontrar algunas

como Wordpress, Drupal, Ghost, Django, Moodle y tantas otras.

Cada paquete viene preparado independientemente, por lo que sólo tienes que descargarlo

e instalarlo. Fácil y rápido. También está preparado para instalar en entornos virtualizados o en

servidores basados en la nube, como Amazon o Azure.

Instalación de XAMPP

Pasos para su instalación:

1. Ir a su pagina web y descargar el archivo de instalación

https://www.apachefriends.org/es/index.html

2. Una vez obtenido el archivo de instalación de XAMPP, hay que hacer doble clic

sobre él para ejecutarlo.

3. A continuación se inicia el asistente de instalación. Para continuar, haga clic en el

botón "Next".

Figura 56. Asistente de instalación.

199
Versión Mayo 2021
4. Los componentes mínimos que instala XAMPP son el servidor Apache y el

lenguaje PHP, pero XAMPP también instala otros elementos. En la pantalla de selección

de componentes puede elegir la instalación o no de estos componentes.

Figura 57. Componentes mínimos que instala XAMPP.

5. En la siguiente pantalla puede elegir la carpeta de instalación de XAMPP. La carpeta

de instalación predeterminada es C:\xampp. Si quiere cambiarla, haga clic en el icono

de carpeta y seleccione la carpeta donde quiere instalar XAMPP. Para continuar la

configuración de la instalación, haga clic en el botón "Next".

Figura 58. Carpeta de instalación XAMPP.

200
Versión Mayo 2021
6. La siguiente pantalla ofrece información sobre los instaladores de aplicaciones para

XAMPP creados por Bitnami. Haga clic en el botón "Next" para continuar. Si deja

marcada la casilla, se abrirá una página web de Bitnami en el navegador.

Figura 59. Información sobre los instaladores de aplicaciones para XAMPP.

7. Una vez elegidas las opciones de instalación en las pantallas anteriores, esta pantalla

es la pantalla de confirmación de la instalación. Haga clic en el botón "Next" para

comenzar la instalación en el disco duro.

Figura 60. Confirmación de la instalación XAMPP.

201
Versión Mayo 2021
 El proceso de copia de archivos puede durar unos minutos.

8. Una vez terminada la copia de archivos, la pantalla final confirma que XAMPP ha

sido instalado. Si se deja marcada la casilla, se abrirá el panel de control de XAMPP.

Para cerrar el programa de instalación, haga clic en el botón "Finish".

Figura 61. Pantalla final confirma que XAMPP

Panel de control XAMPP.

Al panel de control de XAMPP se puede acceder mediante el menú de inicio "Todos los

programas > XAMPP > XAMPP Control Panel" o, si ya está iniciado, mediante el icono del área

de notificación.

La primera vez que se abre el panel de control de XAMPP, se muestra una ventana de

selección de idioma que permite elegir entre inglés y alemán.

Figura 62. Ventana de selección de idioma XAMPP

202
Versión Mayo 2021
 El panel de control de XAMPP se divide en tres zonas:

• La zona de módulos, que indica para cada uno de los módulos de XAMPP: si está

instalado como servicio, su nombre, el identificador de proceso, el puerto utilizado e

incluye unos botones para iniciar y detener los procesos, administrarlos, editar los

archivos de configuración y abrir los archivos de registro de actividad.

• La zona de notificación, en la que XAMPP informa del éxito o fracaso de las acciones

realizadas.

• La zona de utilidades, para acceder rápidamente.

Figura 63. Zonas del panel de control de XAMPP

Iniciar servidores.

Para poner en funcionamiento Apache (u otro servidor), hay que hacer clic en el botón

"Start" correspondiente:

203
Versión Mayo 2021
 Figura 64. Iniciar servidores de XAMPP

Si el arranque de Apache tiene éxito, el panel de control mostrará el nombre del módulo

con fondo verde, su identificador de proceso, los puertos abiertos (http y https), el botón "Start"

se convertirá en un botón "Stop" y en la zona de notificación se verá el resultado de las

operaciones realizadas.

Figura 65. Servidores de XAMPP iniciados

Para detener Apache (u otro servidor), hay que hacer clic en el botón "Stop"

correspondiente a Apache.

204
Versión Mayo 2021
 Actividades – Semana VI

Actividad 1

Realiza un script con una función que cuente el número de vocales que tiene un texto

dado.

Actividad 2

Realiza un script con una función que reciba una cadena de texto y la devuelva al revés.

Es decir, si tecleo “hola que tal” deberá mostrar “lat euq aloh”.

Actividad 3

Cree el árbol de nodos del siguiente código HTML

<html>
<head>
</head>
<body>
<p align="justify"><b>Desarrollo web</b> Desarrollo web significa
construir y mantener
sitios web; es el trabajo que tiene lugar en un segundo plano y que
permite que una web tenga
una apariencia impecable, un funcionamiento rápido y un buen desempeño
para permitir la
mejor experiencia de usuario. Los desarrolladores web son como duendes
con poderes: nunca
los ves, pero son los que hacen que todo esté bien y funcione de
manera rápida y
eficiente.</p>
</body>
</html>
Actividad 4

A partir de la página web proporcionada y utilizando las funciones DOM, mostrar por

pantalla la siguiente información:

• Número de enlaces de la página

205
Versión Mayo 2021
 • Dirección a la que enlaza el penúltimo enlace

• Numero de enlaces que enlazan a http://prueba

• Número de enlaces del tercer párrafo

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
<title>DOM </title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer
adipiscing elit</a>. Sed mattis enim vitae orci. Phasellus libero.
Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies,
turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at,
pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices
porttitor, pede. Nullam sit amet nisl elementum elit convallis
malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non,
mi. <a href="http://prueba2">Fusce porta</a>. Duis pellentesque, felis
eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante
quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend
vitae, venenatis ac, felis. Donec arcu. Nam sed tortor nec ipsum
aliquam ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim.
Integer lacus. Vestibulum venenatis erat eu odio. Praesent id
metus.</p>
<p>Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Proin consequat auctor diam. <a href="http://prueba">Ut
bibendum blandit est</a>. Curabitur vestibulum. Nunc malesuada
porttitor sapien. Aenean a lacus et metus venenatis porta. Suspendisse
cursus, sem non dapibus tincidunt, lorem magna porttitor felis, id
sodales dolor dolor sed urna. Sed rutrum nulla vitae tellus. Sed quis
eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet
dictum. Etiam <a href="http://prueba3">consequat sem quis massa</a>.
Donec aliquam euismod diam. In magna massa, mattis id, pellentesque
sit amet, porta sit amet, lectus. Curabitur posuere. Aliquam in elit.
Fusce condimentum, arcu in scelerisque lobortis, ante arcu scelerisque

206
Versión Mayo 2021
 mi, at cursus mi risus sed tellus.</p>
<p>Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat
massa, at sollicitudin justo tellus vitae justo. Vestibulum aliquet,
nulla sit amet imperdiet suscipit, nunc erat laoreet est, a <a
href="http://prueba">aliquam leo odio sed sem</a>. Quisque eget eros
vehicula diam euismod tristique. Ut dui. Donec in metus sed risus
laoreet sollicitudin. Proin et nisi non arcu sodales hendrerit. In
sem. Cras id augue eu lorem dictum interdum. Donec pretium. Proin <a
href="http://prueba4">egestas</a> adipiscing ligula. Duis iaculis
laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit,
eros quis malesuada tristique, ipsum odio euismod tortor, a vestibulum
nisl mi at odio. <a href="http://prueba5">Sed non lectus non est
pellentesque</a> auctor.</p>
<script src="https://ajax.cloudflare.com/cdn-
cgi/scripts/7089c43e/cloudflare-static/rocket-loader.min.js" data-cf-
settings="2edb08f66df0f5e127120689-|49" defer=""></script></body>
</html>
Actividad 5

A partir de la página web proporcionada, completar el código JavaScript para que:

• Cuando se pinche sobre el enlace, se oculte su sección relacionada.

• Cuando se vuelva a pinchar sobre el mismo enlace, se muestre otra vez esa sección de

contenidos.

• Cuando una sección se oculte, debe cambiar el mensaje del enlace asociado.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
<title>DOM </title>
</head>
<body>
<p id="contenidos_1">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed mattis enim vitae orci.
Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec,
commodo ultricies, turpis. Quisque

207
Versión Mayo 2021
 sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque
massa ante, ornare id, aliquam vitae, ultrices
porttitor, pede. Nullam sit amet nisl elementum elit convallis
malesuada. Phasellus magna sem, semper quis,
faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing
ullamcorper, odio urna consequat arcu, at
posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Duis scelerisque.</p>
<a id="enlace_1" href="#">Ocultar contenidos</a>
</body>
</html>
Actividad 6

Realice un input donde se introduce la cedula de una persona, valide que el campo solo

acepte campos numéricos.

Actividad 7

Realice un mapa mental sobre servidores web.

Actividad 8

Realice un organizador grafico sobre los hosting y dominio y sus tipos.

Actividad 9

Realice una tabla comparativa entre XAMPP, WAMPP, MAMPP, laragon.

Actividad 10

Realice una presentación sobre XAMPP.

208
Versión Mayo 2021
 Recursos – Semana VI

Videos

• Tutorial Básico de Funciones en JavaScript.

https://www.youtube.com/watch?v=UVGIZm6SOUo

• Curso Básico de Javascript 20.- Eventos del DOM.

https://www.youtube.com/watch?v=P44XEaO35O4

• Tipos de servidores web y su funcionalidad.

https://www.youtube.com/watch?v=xFzkqGLy9Qg

Presentaciones

• Presentacion javascript. https://es.slideshare.net/williamlldm/presentacion-javascript-

62837056

• Apuntes: manejo de eventos en javascript. https://es.slideshare.net/fjarce2000/apuntes-

manejo-de-eventos-en-javascript

• Servidor web. https://es.slideshare.net/josegregoriob/servidor-web-8451426

Lecturas complementarias

• Funciones. https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones

• Eventos JS. https://www.arkaitzgarro.com/javascript/capitulo-15.html

• Servidor web. https://blog.infranetworking.com/servidor-web/

209
Versión Mayo 2021
 Semana VII

Contenido

Lunes – Semana VII ........................................................................................................ 212

PHP ................................................................................................................................. 212

Caracteristicas de PHP. ........................................................................................... 212

¿Dónde escribir código PHP? ................................................................................. 213

Apertura y cierre en PHP. ....................................................................................... 213

Como se comenta el código. ................................................................................... 214

Impresión en pantalla. ............................................................................................. 214

Variables y tipos de datos básicos. .......................................................................... 214

Tipos de datos. ........................................................................................................ 215

Operadores. ............................................................................................................. 218

HTML y PHP en un mismo archivo. ...................................................................... 219

Martes – Semana VII ...................................................................................................... 220

Estructuras de Control en PHP........................................................................................ 220

Condicionales if, else y else if................................................................................. 220

Estructura de control Switch. .................................................................................. 220

Estructura While...................................................................................................... 221

Estructura Do…While............................................................................................. 222

Estructura for........................................................................................................... 222

210
Versión Mayo 2021
Matrices en PHP.............................................................................................................. 222

Imprimir en pantalla con print_r. ............................................................................ 223

Acceso a los ítems de un array. ............................................................................... 223

Modificando elementos. .......................................................................................... 223

Agregar elementos. ................................................................................................. 223

Estructura foreach. .................................................................................................. 224

Miércoles – Semana VII.................................................................................................. 226

Funciones definidas por el usuario .................................................................................. 226

Llamando a una función. ......................................................................................... 227

Funciones nativas PHP .................................................................................................... 227

Jueves – Semana VII ....................................................................................................... 229

Variables superglobales GET, POST y REQUEST en PHP ........................................... 229

Variable $_GET. ..................................................................................................... 229

Variable $_POST. ................................................................................................... 231

Variabe $_REQUEST. ............................................................................................ 232

Actividades – Semana VII .............................................................................................. 233

Recursos – Semana VII ................................................................................................... 235

211
Versión Mayo 2021
 Lunes – Semana VII

PHP

PHP es el lenguaje de scripting más popular para el desarrollo web. Es gratis, de código

abierto y del nivel de servidor.

PHP (acronimo de Hypertext Preprocessor) es un lenguaje “del lado del servidor” (esto

significa que PHP funciona en un servidor remoto que procesa la página Web antes de

que sea abierta por el navegador del usuario) especialmente creado para el desarrollo de

paginas Web dinamicas. Puede ser incluido con facilidad dentro del codigo HTML, y

permite una serie de funcionalidades tan extraordinarias que se ha convertido en el

favorito de millones de programadores en todo el mundo. Combinado con la base de

datos MySQL, es el lenguaje estandar a la hora de crear sitios de comercio electrónico o

páginas Web dinamicas (Gallego, 2003).

Caracteristicas de PHP.

Entre sus caracteristicas fundamentales estan:

• Gratuito. A1 tratarse de softwure libre, puede descargarse y utilizarse en cualquier

aplicacion, personal o profesional, de manera completamente libre.

• Gran popularidad. Existe una gran comunidad de desarrolladores y programadores

que continuamente implementan mejoras en su codigo, y que en muchos casos estaran

encantados de ayudar.

• Enorme eficiencia. Con escaso mantenimiento y un servidor gratuito (en nuestro caso,

Apache), puede soportar sin problema millones de visitas diarias. Sencilla integracion

con multiples bases de datos. Esencial para una pagina Web verdaderamente

dinamica, es una correcta integracion con base de datos. Aunque MySQL es la base

212
Versión Mayo 2021
 de datos que mejor trabaja con PHP (y la que, por tanto, estudiaremos en nuestra

guia), puede conectarse tambien a PostgreSQL, Oracle, SQLserver o cualquier otra

base de datos compatible con ODBC (Open Database Connectivity Standard).

• Versatilidad. PHP puede usarse con la mayoria de sistemas operativos, ya sea basados

en UNIX (Linux, Solares, FreeBSD), como con Windows, el sistema operativo de

Microsoft.

• Gran numero de funciones predefinidas. A diferencia de otros lenguajes de

programacion, PHP fue disefiado especialmente para el desarrollo de páginas web

dinamicas. Por ello, esta dotado de un gran numero de funciones que nos

simplificaran enormemente tareas habituales como descargar documentos, enviar

correos, trabajar con cookies y sesiones, etc.

¿Dónde escribir código PHP?

A la kora de programar con PHP, emplee un editor web compatible o en su defecto, el

bloc de notas. Procesadores de texto como Word no sirven.

Algunos editores web recomendados: SublimeText, Visual Studio Code, Dreamweaver,

Brackets.

Todos 1os scripts (páginas) en PHPdeben guardarse con la extension .php para que

funcionen correctamente.

Apertura y cierre en PHP.

<?php
…
?>
Los caracteres a1 inicio (<?php) y a1 final de la linea (?>) indican donde empieza y

donde acaba el codigo PHP. Es imprescindible colocar estos caracteres de apertura y cierre a1

213
Versión Mayo 2021
principio y final de la parte del script escrita en PHP para que el navegador sea capaz de

distinguir e interpretar la parte escrita en HTML de la escrita en PHP.

Como se comenta el código.

La forma más comun, que sera muy familiar a 1os usuarios, consiste en incluirdos barras

( // ) a1 final de la linea y, a continuacion, el comentario que deseemos hacer para comentarios de

una línea. Para comentarios multilineas se incluye barra asterisco (/*) para abrir el comentario, y

asterisco barra (*/) para cerrar.

<?php
//comentario de una sola línea
/* comentario
De mas de una linea
*/
?>
Recuerde que los comentarios son notas que se deja por los programadores, estas no son

interpretadas.

Impresión en pantalla.

En PHP, existen varias funciones para imprimir contenido en pantalla. Las dos funciones

básicas son echo y print. Nosotros utilizaremos echo.

<?php
echo “Hola Mundo”;
?>
Imprime Hola Mundo en pantalla.

Variables y tipos de datos básicos.

Una variable es elemento destinado a almacenar datos. Ésta, puede almacenar datos

numéricos (enteros o flotantes), cadenes de texto, booleano (verdadero [true] o falso [false]), etc.

Una variable se define (es decir, se crea), se le asigna un valor (es decir, se almacenan datos),

puede modificarse (cambiar de valor) y eliminarse.

214
Versión Mayo 2021
 Las variables en PHP se definen anteponiendo el sigo dólar ($) seguido del nombre que

se le quiera dar a esta:

$nombrevariable;
El nombre de éstas, debe guardar ciertas reglas:

• Solo pueden comenzar por carácter alfabético o guión bajo (_)

• El nombre puede estar conformado por mayúsculas, minúsculas, guiones bajos (_)

y números

Asignación de valores.

Para asignar valor a una variable, se coloca el sigo igual (=) segudio del valor:

$nombrevariable = valor;
Tipos de datos.

En PHP podemos tener datos tipos numéricos, booleanos o cadena de caracteres.

Cuando el valor de una variable, es una cadena de texto, éste, debe escribirse entre

comillas dobles ("), aunque también entre comillas simples ('). Tanto los valores numéricos (ya

sean éstos, números enteros o de coma flotante) y los booleanos, no requieren ser entre-

comillados.

<?php
$codigo_de_producto = 1284;
$nombre_producto = "Agua Mineral Manantial x 500 ml";
$precio = 3.75;
$vence = False;
$hay_stock = True;
$stock_en_deposito_1 = 20;
$stock_en_deposito_27 = 5;
$stock_en_deposito_73A = 54;
?>

215
Versión Mayo 2021
 En PHP, es posible concatenar variables mediante el operador de concatenación "punto"

(.):

<?php
$nombre_de_producto_por_defecto = "Producto";
$nombre_producto = $nombre_de_producto_por_defecto . " en oferta";
echo $nombre_producto; // imprime: Producto en oferta
?>
También es posible, insertar el valor de una variable, dentro de una cadena de texto

(siempre que utilice comillas dobles):

<?php
$nombre_de_producto_por_defecto = "Producto";
$nombre_producto = "$nombre_de_producto_por_defecto en oferta";
echo $nombre_producto; // imprime: Producto en oferta
?>
No solo es posible modificar el valor de una variable. También es posible:

Vaciarla manteniendo su tipo:

<?php
$producto = "Coca-Cola x 1,5 Lts.";
$producto = "";
?>
Vaciarla sin conservar su tipo:

<?php
$producto = "Coca-Cola x 1,5 Lts.";
$producto = NULL;
?>
o, eliminarla (destruirla) por completo:

<?php
$producto = "Coca-Cola x 1,5 Lts.";
unset($producto);
?>

216
Versión Mayo 2021
 Algunas funciones básicas.

var_dump() y gettype().

var_dump() imprimirá los resultados en pantalla (tipo y valor de una variable), pero

también, es posible conocer el tipo de una variable (no su valor), sin imprimirlo en pantalla, con

gettype():

<?php
$producto = "Coca-Cola x 1,5 Lts.";
var_dump($producto); //salida: string(20) "Coca-Cola x 1,5 Lts."
$a = 25;
$tipo_a = gettype($a);
echo $tipo_a; //imprimirá integer
?>
isset().

Es muy útil además, saber si una variable ha sido definida (y no se ha destruido con

unset()) y tiene un tipo asignado (es decir, no es NULL). Para ello, dispones de la función isset().

Esta función, devolverá True si ha sido definida y no es NULL, de lo contrario, retornará False:

<?php
$producto = "Coca-Cola x 1,5 Lts.";
echo isset($producto);
// retorna True
$producto = "";
echo isset($producto);
// retorna True
$producto = NULL;
echo isset($producto);
// retorna False
unset($producto);
echo isset($producto);
// retorna False
?>

217
Versión Mayo 2021
 Operadores.

Artimeticos

Tabla 4.
Operadores artimeticos
Operador Nombre
+ Suma
- Resta
* Multiplicacion
/ División
% Modulo o resto de la división
-$variable Negacion
++ Incremento
-- Decremento

Relacionales

Tabla 5.
Operadores relacionales
Operador Nombre
== Igual
=== Identicos
!= | <> Diferente
!== No idéntico
> Mayor que
< Menor que
>= Mayor igual que
<= Menor igual que

La diferencia principal entre igualdad (==) e idéntico (===), es que el primero convierte

ambos elementos al mismo tipo (anulando así, la comparación de tipos, y arrojando que 10 será

igual que "10"), mientras que el segundo, compara además si ambos elementos pertenecen al

mismo tipo.

Lo mismo aplica a != y !==. Ejemplo:

$a = 10;
$b = "10";
$a == $b // retorna True
$a === $b //retorna False

218
Versión Mayo 2021
 $a != $b // retorna False
$a !== $b // retorna True
Lógicos

Tabla 6.
Operadores lógicos
Operador Nombre
!$variable No (not)
&& Y (and)
|| O (or)

HTML y PHP en un mismo archivo.

Como se comentó, es posible "mezclar" código HTML con PHP, sin necesidad de

imprimir etiquetas HTML mediante PHP. Es decir, conservar la independencia de ambos

lenguajes en el mismo archivo.

<?php
$alicuota_iva = 21;
$codigo_de_producto = 1284;
$nombre_producto = "Agua Mineral Manantial x 500 ml";
$precio_bruto = 3.75;
$iva = 3.75 * 21 / 100;
$precio_neto = $precio_bruto + $iva;
?>
<html>
<head>
<title>Detalles del producto <?php echo $nombre_producto;
?></title>
</head>
<body>
<p><b>Producto:</b> (<?php echo $codigo_de_producto; ?>)
<?php echo $nombre_producto; ?><br/>
<b>Precio:</b> USD <?php echo $precio_neto; ?>.- (IVA
incluido)</p>
</body>
</html>

219
Versión Mayo 2021
 Martes – Semana VII

Estructuras de Control en PHP

Una estructura de control es un bloque de código que permite tomar decisiones de manera

dinámica, sobre código existente.

Condicionales if, else y else if.

La sintaxis básica para los condicionales en PHP:

if (condición A)
{
// algoritmo si se cumple condición A
} else if (condición B)
{
// algoritmo si se cumple condición B
} else
{
// algoritmo si no se cumplen las condiciones anteriores
}
Ejemplo:

$a = 15;
if ($a == 10) {
echo "$a es igual a 10";
} else if ($a == 12) {
echo "$a es igual a 12";
} else if ($a == 15) {
echo "$a es igual a 15";
} else {
echo "$a NO es ni 10 ni 12 ni 15";
}
Estructura de control Switch.

La sintaxis básica en PHP:

switch ($variable) {
case "posible valor 1":
// algoritmo a ejecutar si $variable == "posible valor 1"

220
Versión Mayo 2021
 break;
case "posible valor 2":
// algoritmo a ejecutar si $variable == "posible valor 2"
break;
default:
// algoritmo a ejecutar si valor no ha sido contemplado en ningúno de
los «case» anteriores
}
Ejemplo:

$a = 15;
switch ($a) {
case 10:
echo "$a es igual a 10";
break;
case 12:
echo "$a es igual a 12";
break;
case 15:
echo "$a es igual a 15";
break;
default:
echo "$a NO es ni 10 ni 12 ni 15";
}
Estructura While.

La sintaxis básica en PHP:

while (expresión) {
// algoritmo a ejecutar hasta expresión retorne False
}
Ejemplo:

$n=1;
while ($n<=10) {
echo $n;
$n++;
}

221
Versión Mayo 2021
 Estructura Do…While.

La sintaxis básica en PHP:

do{
// algoritmo a ejecutar hasta expresión retorne False
}while (expresión);
Ejemplo:

$n=1;
do{
echo $n;
$n++;
} while ($n<=10);
Estructura for.

La sintaxis básica en PHP:

for (expresion1; expresion2; expresion3) {

// algoritmo que se ejecuta cuando expresion2 es verdadera
}
Ejemplo:

for ($i = 0; $i <= 10; $i++) {

echo $i;
}
Matrices en PHP

Una matriz (array) es un mapa de datos ordenado que asocia "claves" a sus valores

correspondientes. Es así, que estas matrices, nos son de gran utilidad para crear desde

diccionarios de datos hasta árboles de múltiples diccionarios.

La sintaxis básica se compone de:

array(clave => valor, );

Donde clave, puede ser un entero:

$nombres_de_mujer = array(0=>'Ana',1=>'Gabriela',2 =>'Cecilia');

O una cadena de texto:

$telefonos = array('Juan' => '15017-2530','Javier' => '4921 – 1200',);

222
Versión Mayo 2021
 Y valor, cualquier tipo de dato:

$datos_de_juan = array('apellido' => 'Pérez',

'Fecha de nacimiento' => '23-11-1970',
'Teléfonos' => array('Casa' => '4310-9030')
Si no le asignamos la clave, se le asigna valores numéricos desde 0.

$nombres_de_mujer = array('Ana','Gabriela','Cecilia');
La forma para declarar un array, es simplemente asignarlo a una variable, teniendo en

cuenta, que un array, puede estar inicialmente vacío:

$mi_array = array();
Imprimir en pantalla con print_r.

Para imprimir una matriz completa en pantalla, se puede utilizar la función

print_r($array):

$array = array(0 => 'Ana', 1 => 'Gabriela', 2 => 'Noelia',);

print_r($array);
//retorna Array ( [0] => Ana [1] => Gabriela [2] => Noelia )
Acceso a los ítems de un array.

Para acceder a un item del array, se puede realizar haciendo una llamada a su clave, o por

su número de índice (número de almacenamiento interno), siendo 0 (cero) el primero:

$apellidos = array('Ana' => 'Rodriguez', 'Marcos' => 'Gómez');

echo $apellidos['Ana']; // imprime Rodriguez
$apellidos = array('Rodriguez','Gómez');
echo $apellidos[1]; // imprime Gómez
Modificando elementos.

Para modificar un elemento, basta con acceder a éste y asignare un nuevo valor:

$array_frutas = array('Pera', 'Manzana', 'Uva', 'Durazno');

echo $array_frutas[2]; // imprimirá Uva
$array_frutas[2] = 'Piña';
echo $array_frutas[2]; // imprimirá Piña
Agregar elementos.

Para agregar un valor a un array existente, se asigna éste a un índice vacío:

223
Versión Mayo 2021
 $array_frutas = array('Pera', 'Manzana', 'Uva', 'Durazno');
$array_frutas[]='Naranja';
print_r($array_frutas);
/*imprimirá Array ( [0] => Pera [1] => Manzana [2] => Uva [3] =>
Durazno [4] => Naranja )*/
Pero si se desea asociar dicho valor a una clave, ésta debe indicarse:

$telefonos = array('Juan' => '15 4017-2530', 'Javier' => '4921 –

1200',);
$telefonos ['Luis'] = '4321-5012';
Estructura foreach.

Foreach es un constructor nativo de PHP, que permite realizar operaciones iterativas

(cíclicas) con matrices, recorriendo uno a uno los elementos de una matriz, comenzando por el

primer elemento.

Sintaxis básica:

foreach($array as $valor_del_elemento) {
// algoritmo a realizar con cada uno de los elementos
}
Dónde $array será el nombre de la matriz a ser iterada y $valor_del_elemento, un nombre

que utilizaremos como identificador del elemento, el cual retornará su valor:

$array_frutas = array('Pera', 'Manzana', 'Uva', 'Durazno');

$array_frutas[]='Naranja';
foreach ($array_frutas as $fruta) {
echo $fruta."<br>";
}
/*Salida
Pera
Manzana
Uva
Durazno
Naranja
*/

224
Versión Mayo 2021
 Es posible también, iterar obteniendo las claves de cada elemento, además de su valor.

Para ello, se utiliza la siguiente sintaxis:

foreach($array as $clave => $valor) {

// algoritmo a ejecutar en cada iteración
}
Ejemplo:

$apellidos = array('Ana' => 'Rodriguez', 'Marcos' => 'Gómez','Diana'

=> 'Martinez');
foreach ($apellidos as $nombre => $apellido) {
echo "Nombre y Apellido: ".$nombre." ".$apellido."<br>";
}
/*Salida
Nombre y Apellido: Ana Rodriguez
Nombre y Apellido: Marcos Gómez
Nombre y Apellido: Diana Martinez
*/

225
Versión Mayo 2021
 Miércoles – Semana VII

Funciones definidas por el usuario

Una función, es una forma de agrupar expresiones y sentencias (algoritmos) que realicen

determinadas acciones, pero que éstas, solo se ejecuten cuando son llamadas (al igual que

las funciones nativas de PHP) (Gallego, 2003).

La sintaxis básica de una función:

function nombre_de_la_funcion(parametros) {
// algoritmo
}
Un parámetro es un valor, que la función espera a fin de ejecutar acciones en base al

mismo. Una función puede esperar uno o más parámetros (que irán separados por una coma) o

ninguno.

function nombre_de_la_funcion(parametro1, parametro2) {

// algoritmo
}
function otra_funcion() {
// algoritmo
}
Los parámetros, se indican entre los paréntesis, a modo de variables, a fin de poder

utilizarlos como tal, dentro de la misma función:

function nombre_de_la_funcion($parametro1, $parametro2) {

// algoritmo
}
Además, a cada parámetro, se le puede asignar un valor por defecto de cualquier tipo:

function nombre_de_la_funcion($nombre, $edad=25, $sexo='F') {

// algoritmo
}

226
Versión Mayo 2021
 Llamando a una función.

Para llamar a una función, simplemente debe especificarse su nombre, en el lugar preciso

donde se desea que ésta se ejecute. Siempre deben incluirse los paréntesis en las llamadas,

incluso aunque no requieran que un parámetro les sea pasado:

<?php
function hola_mundo() {
echo "Hola Mundo!";
}
hola_mundo();
?>
Las funciones también pueden incluir un return para retornar valores.

function sumar_dos_numeros($a, $b) {

return $a + $b;
}
$resultado = sumar_dos_numeros(5,3);
echo $resultado;
Funciones nativas PHP

A continuación, se mostrarán las funciones de uso más frecuente:

Tabla 7.
Funciones nativas de PHP
Nombre Descripción
strtolower($cadena) Convertir toda una cadena a minúsculas

lcfirst ($cadena) Convertir a minúscula, el primer carácter

strtoupper ($cadena) Convertir toda una cadena a mayúsculas

ucfirst ($cadena) Convertir solo el primer carácter la cadena a

mayúsculas
ucwords ($cadena) Convertir el primer carácter de cada palabra

strlen ($cadena) Contar la cantidad de caracteres

number_format($numero, Formatear un valor numérico

$decimales,
$separador_decimales,
$separador_miles)

227
Versión Mayo 2021
hash($algoritmo_cifrado, $cadena) Encriptación de cadenas
getdate() Información relativa a la fecha y hora actual
date() Fecha y hora actual con formato en una cadena
de texto
https://www.php.net/manual/es/function.date.php

checkdate($mes, $dia, $año) Validar una fecha

pow($base, $potencia) Obtener un número elevado a la potencia

max($valores) - min($valores) Obtener el número más alto y el número más

bajo
round($numero, $decimales) Redondear un número

floor($numero)

ceil($numero)
rand($min, $max); Obtener un número entero aleatorio

count($array); Contar la cantidad de elementos de un array

228
Versión Mayo 2021
 Jueves – Semana VII

Variables superglobales GET, POST y REQUEST en PHP

Se llaman variables superglobales ya que son variables internas que están disponibles

siempre en todos los ámbitos. Por lo general son array asociativos.

Lasa variables GET, POST y REQUEST son generalmente usadas para trabajar y

capturar datos de los formularios de HTML. Cuando un usuario pulsa el botón enviar de un

formulario, la información que contenían sus campos es enviada a una dirección URL desde

donde tendremos que recuperarla para tratarla de alguna manera. La información del formulario

“viaja” almacenada en variables que podremos recuperar y utilizar mediante PHP.

Existen dos métodos con los que el navegador puede enviar información al servidor:

• Método HTTP GET. Información se envía de forma visible

• Método HTTP POST. Información se envía de forma no visible

Antes de que el navegador envíe la información proporcionada, la codifica mediante URL

encoding, dando como resultado un Query String. Esta codificación es un esquema

de keys y values separados por un ampersand &:

key1=value1&key2=value2&key3=value3...

Los espacios y otros caracteres no alfanuméricos se sustituyen. Una vez que la

información es codificada, se envía al servidor.

Variable $_GET.

GET lleva los datos de forma "visible" al cliente (navegador web). El medio de envío es

la URL. Para recoger los datos que llegan en la url se usa $_GET.

Los datos son visibles por la URL, por ejemplo:

www.sitioweb.com/ action.php?nombre=pedro&apellidos1= gomez

229
Versión Mayo 2021
Formulario con método GET.

Capturar.php

<html>
<head>
<title>Formulario con GET</title>
</head>
<body>
<form action="mostrar.php" method="GET">
<label>Nombre:</label>
<input type="text" name="nombre" placeholder="Ingrese nombre">
<input type="submit" name="enviar">
</form>
</body>
</html>
Obtiene un resultado en el navegaor:

Y la url algo como esto:

Al ingresar el nombre y pulsar enviar, los datos se envian a mostrar.php (action del form).

Mostrar.php

<?php
$nombre = $_GET['nombre'];
echo "El nombre ingresado fue: ".$nombre;
?>
Obtiene un resultado en el navegaor:

230
Versión Mayo 2021
 Variable $_POST.

POST consiste en datos "ocultos" (porque el cliente no los ve) enviados por un formulario

cuyo método de envío es post. Es ideal para formularios. Para recoger los datos que llegan por

este método se usa $_POST.

La ventaja de usar POST es que estos datos no son visibles al usuario de la web. En el

caso de usar get, el propio usuario podría modificar la URL escribiendo diferentes parámetros a

los reales en su navegador, dando lugar a que la información tratada no sea la prevista.

Formulario con método POST.

Capturar.php

<html>
<head>
<title>Formulario con POST</title>
</head>
<body>
<form action="mostrar.php" action="POST">
<label>Nombre:</label>
<input type="text" name="nombre" placeholder="Ingrese nombre">
<input type="submit" name="enviar">
</form>
</body>
</html>
Obtiene un resultado en el navegaor:

Y la url algo como esto:

Al ingresar el nombre y pulsar enviar, los datos se envian a mostrar.php (action del form).

231
Versión Mayo 2021
 Mostrar.php

<?php
$nombre = $_POST['nombre'];
echo "El nombre ingresado fue: ".$nombre;
?>
Obtiene un resultado en el navegaor:

Variabe $_REQUEST.

No es un método de envío propiamente dicho, es decir, no podemos poner en un

formulario HTML que el method sea REQUEST. Con la variable $_REQUEST recuperaremos

los datos de los formularios enviados tanto por GET como por POST.

La ventaja principal de esta forma de recuperar los datos de un formulario es que no

tenemos que saber con cual método fue enviado. La desventaja principal, es que no podremos

diferenciar una variable enviada por GET o por POST.

$_REQUEST da prioridad a los valores enviados por POST antes que a los enviados por

GET.

232
Versión Mayo 2021
 Actividades – Semana VII

Actividad 1

Realice un mapa mental sobre PHP.

Actividad 2

Explique cómo se definen variables, los tipos de datos básicos y los operadores en PHP.

Actividad 3

En código PHP, declare las variables

x=10, y=50, z= -15 y muestre el valor por pantalla de las siguientes expresiones:

x>3 o x>z

x*y== -30 o x*z != 30

x+z+y==20 o x * z / y + z != 50 y x>y o z<x

Actividad 4

En PHP, utilizando un while calcule el factorial de 6.

Actividad 5

Almacene en un array los 10 primeros números pares. Imprímalos cada uno en una línea.

Actividad 6

Imprima los valores del array asociativo siguientes, usando la estructura de control

foreach:

V[1]=90

V[30]=7

V[‘e’]=99

V[‘hola’]=43

233
Versión Mayo 2021
Actividad 7

Cree una función que reciba cinco números enteros como parámetros y devuelva el

resultado de sumar los cinco números. Asigna el resultado de una invocación a la función a una

variable de nombre $tmp y muestra por pantalla el valor de la variable.

Actividad 8

Generar un valor aleatorio entre 1 y 5. Luego imprimir el número en letras (Ej. Si se

genera el 3 mostrar en la página “tres”).

Actividad 9

Confeccionar un formulario que solicite la carga de un nombre de persona y su edad,

luego mostrar en otra pagina si es mayor de edad (si la edad es mayor o igual a 18). Utilice el

método GET para el envío de formulario.

Actividad 10

Solicitar que se ingrese por teclado el nombre de una persona y disponer tres controles de

tipo radio que nos permitan seleccionar si la persona: 1) no tiene estudios 2) estudios primarios

3) estudios secundarios En la pagina que procesa el formulario mostrar el nombre de la persona y

un mensaje indicando el tipo de estudios que posee. Utilice el método POST para el envío de

formulario.

234
Versión Mayo 2021
 Recursos – Semana VII

Videos

• 4.- Curso PHP 7 – Variables.

https://www.youtube.com/watch?v=Or6UY0luwp8&list=PLpOqH6AE0tNiU09SztxZ

Xz1zuoyvqeLMH&index=4

• Curso de PHP y MySql [25.- Funciones predefinidas y funciones propias].

https://www.youtube.com/watch?v=3RHcJ9-vHEU

• Cómo trabajar con variables GET y POST en PHP.

https://www.youtube.com/watch?v=J3zrbJPhN3Y

Presentaciones

• PHP: todo sobre PHP. https://slideplayer.es/slide/3616820/

• Funciones PHP. https://es.slideshare.net/upresentaciones/funciones-42655736

• Get & post. https://es.slideshare.net/abrahamfernandez1422/get-post

Lecturas complementarias

• Conceptos básicos. https://www.php.net/manual/es/language.variables.basics.php

• Estructuras de control. https://www.mclibre.org/consultar/php/lecciones/php-

estructuras-control.html

• Listado de Funciones y Métodos.

https://www.php.net/manual/es/indexes.functions.php

• GET y POST en PHP. https://diego.com.es/get-y-post-en-php

235
Versión Mayo 2021
 Semana VIII

Contenido

Lunes – Semana VIII ...................................................................................................... 237

Introducción a MySQL ................................................................................................... 237

phpMyAdmin. ......................................................................................................... 237

SQL ................................................................................................................................. 243

Tipos de datos más comunes. .................................................................................. 243

Sintáxis básica de las sentencias SQL. .................................................................... 244

Martes – Semana VIII ..................................................................................................... 247

MySQL desde PHP ......................................................................................................... 247

Conectar a una Base de Datos MySQL desde PHP. ............................................... 247

Enviar una consulta MySQL. .................................................................................. 248

Cerrar la conexión con la base de datos. ................................................................. 250

Miercoles – Semana VIII ................................................................................................ 251

Insertar datos en MySQL con PHP ................................................................................. 251

Modificar datos en MySQL con PHP ............................................................................. 255

Eliminar datos en MySQL con PHP ............................................................................... 258

Actividades – Semana VIII ............................................................................................. 261

Recursos – Semana VIII.................................................................................................. 262

236
Versión Mayo 2021
 Lunes – Semana VIII

Introducción a MySQL

MySQL es un sistema gestor de bases de datos que emplea el modelo relacional.

“MySQL es un servidor de Bases de Datos SQL (Structured Query Language) que se

distribuye en dos versiones: una versión GPL (Software Libre) y otra versión privativa, llamada

MySQL AB” (Bahit, 2012).

En nuestro caso, utilizaremos XAMPP para conectarnos con el gestor, por lo cual

debemos iniciar no solo los servicios de Apache sino también de MySQL.

Para trabajar con el gestor se usara PHPMyAdmin, solo para la creación de tablas.

phpMyAdmin.

phpMyAdmin, es un cliente de MySQL muy popular que se ofrece en muchos sitios web

de alojamiento (hosting).

Para poder crear nuestra base de datos vamos a la siguiente dirección:

http//localhost/phpmyadmin/
Y tendremos una interfaz como la siguiente (puede variar de acuerdo a la versión de

XAMPP):

Figura 66. phpMyAdmin. Fuente: elaboración propia (2020)

237
Versión Mayo 2021
 En el lado izquierdo aparece todas las bases de datos que se han creado, si queremos crear

una nueva presionamos “Nueva”:

Figura 67. Crear nueva base de datos phpMyAdmin. Fuente: elaboración propia (2020)

Se nos abre una ventana para indicar el nombre de la base de datos (escribir en

minúsculas y sin espacios en balncos) y el cotejamiento (el juego de caracteres que

almacenaremos, para textos en español se recomienda el utf8_unicode_ci o utf8_spanish_ci):

Figura 68. Nombre y cotejamiento de la nueva base de datos phpMyAdmin. Fuente: elaboración propia (2020)

Finalmente, pulsamos el botón “Crear” y, a continuación, el nombre de la base recién

creada aparecerá en la columna de la izquierda.

238
Versión Mayo 2021
 Crear una tabla en phpMyAdmin.

Cuando terminamos de crear nuestra base de datos, se nos abre una ventana para indiciar

la o las tablas que tendrá. Se nos pide un nombre y el número de columnas (cantidad de campos):

Figura 69.Crear tabla. Fuente: elaboración propia (2020)

Recomendación: en las bases de datos siempre se utilizara un campo extra, cuyo valor

debe ser único en cada registro, siempre diferente, constituyéndose en un codigo que permitirá

identificar cada registro de forma inequivoca e irrepetible. A este campo extra se lo suele

denominar id (ya que cumple la función de identificador de cada registro) y será

autoincremental.

Luego de pulsar el botón “Continuar”, aparecerá la siguiente pantalla, en la que

tendremos que escribir los nombres de cada uno de los cuatro campos o columnas que tendrá

nuestra tabla:

Figura 70.Campos de tabla. Fuente: elaboración propia (2020)

239
Versión Mayo 2021
 En el primer campo de texto, justo debajo del titulo que dice "Nombre", escribiremos

el nombre de cada campo (id, cedula, nombres, fecha_nac, telefono, email), en ese orden, uno

debajo de otro, todos en la primera columna:

Figura 71 Columna Nombre en la creación de tabla. Fuente: elaboración propia (2020)

En la segunda columna, denominada “Tipo”, elegiremos el tipo de dato que podrá

almacenar cada uno de estos campos. Los tipos de datos normalmente mas utilizados

son INT (integer, es decir, números enteros, sin decimales, como los que precisa el campo

id), VARCHAR (variable carácter o caracteres variables, que almacena letras y números, hasta

un máximo de 255 caracteres, como los necesarios para los campos nombre y

email), TEXT (para textos mayores de 255 caracteres, como los de nuestro campo mensaje) y

DATE (para las fechas en formato AAA/MM/DD). Así que elegiremos estos tipos de datos en

la columna "Tipo":

240
Versión Mayo 2021
 Figura 72. Columna Tipo en la creación de tabla. Fuente: elaboración propia (2020)

Si notan, tanto el campo cedula y teléfono los coloque como varchar y no como numero,

esto es para evitar problemas a la hora que estos campos empiecen con cero.

En tercera columna, definiremos la cantidad máxima de caracteres que almacenara cada

campo:

Figura 73. Columna Longitud/Valores en la creación de tabla. Fuente: elaboración propia (2020)

241
Versión Mayo 2021
 Ahora nos desplazamos hacia la derecha de pantalla. En la columna Nulo, si dejamos de

sin marcar la casilla de selección, haremos que es campo sea NOT NULL; es decir, será

obligatorio que le completemos algún valor cuando agreguemos un registro.

Si no queremos que esto sea obligatorio y que se pueda dejar vacio y que se añada igual

el registro completo con el resto de campos que si se hubieran completado, entonces marcamos

esa casilla de selección, lo que equivale a definir ese campo como potencialmente NULL, osea

que pueda ser nulo o vacio.

Por ahora, determinamos todos los campos como NOT NULL, es decir, no se permitirá

valores nulos (vacios) en ninguno de los campos cuando pretendamos insertar un nuevo registro.

Para eso, no tenemos nada que hacer, ya que por defecto las casillas están desmarcadas:

Figura 74. Columna Nulo, Indice y A_I en la creación de tabla. Fuente: elaboración propia (2020)

Ahora, exclusivamente en el reglon que pertenece al campo id (el primero) deberemos

elegir en la columna “Indice” la opción “Primary”, tal como vamos en la imagen anterior, lo que

indica que ese campo será el que identificara cada registro de forma única será su clave primaria.

Además de lado del menú de selección, marcaremos la casilla con la abreviatura A_I

(Auto Increment), que hace que el contenido o "valor" de este campo id, sea completado

242
Versión Mayo 2021
automáticamente cada vez que agreguemos un registro, con números que se iran incrementando

de uno en uno, sin repetirse nunca.

Eso es todo lo que modificaremos, los otros valores quedan por defecto. Pulsamos el

botón “Guardar” y ya tenemos nuestra tabla completamente lista para usar.

Figura 75. Guardar tabla. Fuente: elaboración propia (2020)

SQL

SQL -siglas de Structured Query Language-, es el lenguaje de consultas a bases de datos,

que nos permitirá crear, modificar, consultar y eliminar tanto bases de datos como sus

tablas y registros, desde el shell interactivo de MySQL y también desde PHP (Bahit,

2012).

Abordaremos los conceptos básicos sobre SQL que nos permitan desarrollar aplicaciones

de media complejidad, sin profundizar en el lenguaje en sí, sino solo en aquellos aspectos

mínimamente necesarios relacionados con MySQL.

Tipos de datos más comunes.

La siguiente tabla, muestra los tipos de datos más comunes, aceptados por versiones la

versión 5.0.3 o superior, de MySQL.

243
Versión Mayo 2021
 Tabla
Tipos de datos de MySQL
Tipo de dato Denominación Ejemplo

INT(N) Entero INT(5)

DECIMAL(N, D) Número decimal

BOOL Booleano

DATE Fecha

DATETIME Fecha y hora

TIMESTAMP Fecha y hora automática

TIME Hora

YEAR(D) Año

VARCHAR(N) Cadena de longitud variable

Sintáxis básica de las sentencias SQL.

“Una sentencia SQL (denominada “query” en la jerga informática), es una instrucción

escrita en lenguaje SQL” (Bahit, 2012).

Veremos las sentencias más habitulaes:

Insertar datos en una tabla.

INSERT INTO nombre_de_la_tabla(campo1, campo2, campo10..) VALUES

(dato1, dato2, dato10...);
Ejemplo:

INSERT INTO datos_personales(cedula,nombres,fecha_nac,telefono,email)

VALUES(‘1700000000’, ‘Juanito Perez’, ‘1971/10/10’,’0999999999’,
‘[email protected]’);
Seleccionar registros.

SELECT campo1, campo2, campo10 FROM tabla;

244
Versión Mayo 2021
 Ejemplo:

SELECT cedula, nombres FROM datos_personales;

Modificar registros

UPDATE tabla SET campo1 = valor, campo2 = valor, campo10 = valor;

Ejemplo:

UPDATE datos_personales SET cedula = ‘1700000010’, email =

‘[email protected]’;
Eliminar registros

DELETE FROM tabla;

Ejemplo:

DELETE FROM datos_personales;

La cláusula WHERE.

Las sentencias en SQL, se componen de cláusulas. Y WHERE es una de ellas. La

cláusula WHERE nos permite filtrar registros en una sentencia SQL. Esta cláusula, funciona de

forma similar a la comparación de expresiones en PHP, utilizando los siguientes operadores de

comparación:

> mayor que

< menor que

= igual que

<> distinto que

>= mayor o igual que

<= menor o igual que

BETWEEN n1 AND n2 entre n1 y n2

IS NULL|TRUE|FALSE es nulo | es verdadero | es falso

IN(valor1, valor2, va...) contiene

Por supuesto, tambien admite operadores lógicos: AND (y) NOT (negación) OR (o).

245
Versión Mayo 2021
Ejemplos:

SELECT nombres, telefono FROM personas WHERE cedula = '1700000010';

UPDATE datos_personales SET cedula = ‘1700000010’, email =
‘[email protected]’ WHERE nombres = ‘Juanito Perez’
DELETE FROM personas WHERE id=1;

246
Versión Mayo 2021
 Martes – Semana VIII

MySQL desde PHP

No crearemos tablas ni bases de datos desde nuestros archivos PHP, sino que lo haremos

desde el administrador de MySQL.

PHP cuenta con dos tipos de conectores MySQL: mysql y mysqli, disponible desde la

versión 5.

Conectar a una Base de Datos MySQL desde PHP.

Lo primero que vamos a hacer es crear las variables para almacenar los datos de la base

de datos que utilizaremos más adelante (podemos hacerlo directamente sin utilizar variables pero

personalmente creo que mucho mejor).

<?php
$servidor = "localhost"; //servidor que estamos utilizando.
$usuario = "root"; // usuario de la BD.
$contrasena = ""; //contraseña del usuario de la BD.
$basededatos = "estudiantes";
?>
Crear la conexión con el servidor de base de datos con mysqli_connect()

Ahora vamos a crear la conexión con el servidor de la base de datos mediante la

función mysqli_connect() y los datos o variables que hemos creado hace un momento. Para ello

crearemos una variable $conexion que contendrá la conexión:

$conexion = mysqli_connect( $servidor, $usuario, $contrasena );

A la función mysqli_connect(), debemos indicarle el servidor, el usuario de la base de

datos y la contraseña de ese usuario.

Si ejecutamos el código que tenemos hasta ahora vemos nada y eso es bueno porque no

estará dando ningún error.

247
Versión Mayo 2021
 Pero como no podemos estar seguros de que la conexión con el servidor de la base de

datos sea correcta, vamos a añadir para que muestre un mensaje en el caso de que la conexión

con la base de datos no se haya podido realizar. De esta forma:

$conexion = mysqli_connect( $servidor, $usuario, $contrasena ) or die

("No se ha podido conectar al servidor de Base de datos");
Conexión a la base de datos

Tenemos que seleccionar la base de datos que vamos a utilizar. Para seleccionar la base

de datos a utilizar, usaremos la función mysqli_select_db() a la que le indicaremos 2 parámetros:

el objeto de conexión a la base de datos que hemos creado hace un momento ($conexion) y el

nombre de la base de datos ($basededatos) .

Por lo tanto:

$db = mysqli_select_db( $conexion, $basededatos );

Vamos a añadir también aquí la opción para que nos devuelva un mensaje de error en el

caso de que algo salga mal:

$db = mysqli_select_db( $conexion, $basededatos ) or die ( "No se ha

podido conectar a la base de datos" );

La conexión a la base de datos y la selección de la tabla también podemos hacerla en la

misma instrucción de conexión, pasando 4 parametrs a la función mysqli_connect():

$conexion=mysqli_connect($servidor,$usuario,$contrasena, $basededatos)
or die('Error de conexión: ' . mysqli_connect_error());
Enviar una consulta MySQL.

Para realizar una consulta utilizaremos la función mysqli_query() en la que indicaremos

la consulta que queremos hacer.

Para hacerlo un poco más limpio y ordenado vamos a guardar la consulta en una variable

y así la podremos reutilizar sin problemas.

$consulta = "SELECT * FROM datos_personales";

248
Versión Mayo 2021
 La consulta anterior nos devolverá todos los registros de la tabla “datos_personales”.

Pero aún no hemos realizado la consulta, ahora debemos utilizar la función

mysqli_query():

$resultado = mysqli_query( $conexion, $consulta );

Como hemos venido haciendo, vamos a añadir un poco más de código a lo anterior para

que nos muestre un mensaje de error si algo ha ido mal:

$resultado = mysqli_query( $conexion, $consulta ) or die ( "Algo ha

ido mal en la consulta a la base de datos");
Para SELECT y otras sentencias que retornan un conjunto de resultados, devuelve

un resource en caso de éxito, o FALSE en caso de error.

Para otros tipos de sentencias SQL, tales como INSERT, UPDATE, DELETE, DROP,

etc, devuelve TRUE en caso de éxito o FALSE en caso de error.

Valores devueltos mysql_query.

Para manejar los valores de la consulta realizada tenemos las siguientes funciones:

mysqli_fetch_assoc: obtener una fila de resultado como un array asociativo.

while ($fila = $resultado->fetch_assoc()) {

printf ("%s (%s)\n", $fila["nombres"], $fila["telefono"]);
}
mysql_fetch_row: obtener una fila de resultados como un array enumerado.

while ($fila = $resultado->fetch_row()) {

printf ("%s (%s)\n", $fila[2], $fila[4]);
}
mysqli_fetch_array: obtiene una fila de resultados como un array asociativo, numérico, o

ambos.

while ($fila = $resultado->fetch_row()) {

printf ("%s (%s)\n", $fila[“nombres”], $fila[4]);
}

249
Versión Mayo 2021
 mysqli_num_rows: obtener el número de filas de un conjunto de resultados.

$número_filas = mysql_num_rows($resultado);
echo "$número_filas Filas\n";
mysqli_affected_rows: obtiene el número de filas afectadas en la anterior operación de

MySQL.

$consulta = "DELETE FROM datos_personales WHERE id < 5";

$resultado = mysqli_query( $conexion, $consulta ) or die ( "Algo ha
ido mal en la consulta a la base de datos");
echo “Registros borrados: ".mysql_affected_rows($conexion);
Cerrar la conexión con la base de datos.

Como ya hemos terminado y no vamos a necesitar más la conexión a la base de datos, se

debe cerrar esta conexión y liberarla.

Para cerrar la conexión a la base de datos utilizamos la función mysqli_close() y le

pasaremos el parámetro de la conexión ($conexion) así:

mysqli_close( $conexion );

250
Versión Mayo 2021
 Miercoles – Semana VIII

Insertar datos en MySQL con PHP

Para insertar datos, utilizaremos la función mysql_query(), la cual envía la consulta a

base de datos.

Simplemente creamos la variable con la consulta de inserción y la enviamos:

$consulta = "INSERT INTO

datos_personales(cedula,nombres,fecha_nac,telefono,email)
VALUES(‘1700000000’, ‘Juanito Perez’, ‘1971/10/10’,’0999999999’,
‘[email protected]’);
$resultado = mysqli_query( $conexion, $consulta ) or die ( "Algo ha
ido mal en la consulta a la base de datos");
Si todo esta bien deberíamos tener en nuestra base de datos el registro agregado:

Ahora bien, cuando realizamos inserción a base de datos, los datos que se alamacenan

generalmente son proporcionado por los usuarios, es decir son datos variables.

Para ello debemos tener un formulario que capture esos datos y los envie al servidor.

Ejemplo, creamos el archivo formulario_ingreso.php:

<!DOCTYPE html>

<html>

<head>

<title>Formulario de Ingreso</title>

<style type="text/css">

label {

display: block;

margin: .5em 0 0 0;

.btn {

251
Versión Mayo 2021
 display: block;

margin: 1em 0;

</style>

</head>

<body>

<form action="registrar_datos.php" method="POST">

<label for="cedula">Cedula</label>

<input type="text" name="cedula" id="cedula" size="10"

maxlength="10" />

<label for="nombres">Nombre</label>

<input type="text" name="nombres" id="nombres" size="50" />

<label for="fecha">Fecha Nacimiento</label>

<input type="date" name="fecha" id="fecha" size="50" />

<label for="telefono">Telefono</label>

<input type="tel" name="telefono" id="telefono" size="10"

maxlength="10" />

<label for="email">Email</label>

<input type="text" name="email" id="email" size="50" />

<input class="btn" type="submit" />

</form>

</body>

</html>

En el form establecemos el atributo action indicando la pagina que recibirá los datos y el

método que utilizaremos para el envio. En nuestro caso enviaremos a registrar_datos.php a través

del método POST.

252
Versión Mayo 2021
Creamos el archivo registrar_datos.php:

<?php
//variables para la conexion
$servidor = "localhost"; //servidor que estamos utilizando.
$usuario = "root"; // usuario de la BD.
$contrasena = ""; //contraseña del usuario de la BD.
$basededatos = "estudiantes";

//conexion a BD
$conexion=mysqli_connect($servidor,$usuario,$contrasena, $basededatos)
or die('Error de conexión: ' . mysqli_connect_error());

//obtenemos los datos del formulario usando la variable superglobal

$_POST
$cedula = $_POST['cedula'];
$nombres = $_POST['nombres'];
$fecha = $_POST['fecha'];
$telefono = $_POST['telefono'];
$email = $_POST['email'];

//realizamos la consulta
$sql = "INSERT INTO
datos_personales(cedula,nombres,fecha_nac,telefono,email) VALUES
('$cedula',$nombres','$fecha','$telefono','$email')";
$query = mysqli_query($conexion,$sql);

//enviamos mensaje al usuario de acuerdo al resultado de la consulta

if($query){
echo "Datos almacenados";
}
else{
echo "Datos no almacenados";
}
//cerramos la conexion
mysqli_close($conexion);
?>

253
Versión Mayo 2021
Para probar, llenamos el formulario:

Al enviar, si todo va bien, obtenemos:

Si verificamos en nuestra base de datos, vemos el otro campo ingresado:

254
Versión Mayo 2021
 Jueves – Semana VIII

Modificar datos en MySQL con PHP

Para modificar datos creamos la consulta con mysql_query(), en nuestro caso tenemos

que ver primero cuales son los datos que vamos a modificar.

Primero se debe conocer cual son los datos que se desea modificar, para ellos se crea un

campo que capture un dato único, se hace la búsqueda en base de datos y se construye el

formulario de modificación:

<?php
if(isset($_GET['buscar'])) //si presionaron el botón de buscar
{
//variables para la conexion
$servidor = "localhost"; //servidor que estamos utilizando.
$usuario = "root"; // usuario de la BD.
$contrasena = ""; //contraseña del usuario de la BD.
$basededatos = "estudiantes";

//conexion a BD
$conexion=mysqli_connect($servidor,$usuario,$contrasena,
$basededatos) or die('Error de conexión: ' . mysqli_connect_error());

//capturamos el dato
$cedula = $_GET['dato'];

//buscamos los datos de la cedula suministrada

$sql = "SELECT * FROM datos_personales WHERE cedula = '$cedula'";
$query = mysqli_query($conexion,$sql) or die('Error de conexión:
');
if(mysqli_num_rows($query)>=1){ //si la consulta devolvió datos
$row = mysqli_fetch_array($query); //se cargan los datos
}
else{
echo "<script>alert('Registro no encontrado');</script>";
}
mysqli_close($conexion);

255
Versión Mayo 2021
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Formulario de Actualizacion</title>
<style type="text/css">
label {
display: block;
margin: .5em 0 0 0;
}
.btn {
display: block;
margin: 1em 0;
}
</style>
</head>
<body>
<form action="" method="GET">
<label for="dato">Cedula</label>
<input type="text" name="dato" id="dato" size="10"
maxlength="10"/>
<input class="btn" type="submit" name="buscar" value="BUSCAR" />
</form>

<?php if(isset($row)){ //si se cargaron los datos ?>

<form action="modificar_datos.php" method="POST">
<input type="hidden" name="id" id="id" value="<?php echo
$row['id'] ?>">
<label for="cedula">Cedula</label>
<input type="text" name="cedula" id="cedula" size="10"
maxlength="10" value="<?php echo $row['cedula'] ?>" />

<label for="nombres">Nombre</label>
<input type="text" name="nombres" id="nombres" size="50"
value="<?php echo $row['nombres'] ?>"/>

<label for="fecha">Fecha Nacimiento</label>

256
Versión Mayo 2021
 <input type="date" name="fecha" id="fecha" size="50" value="<?php
echo $row['fecha_nac'] ?>"/>

<label for="telefono">Telefono</label>
<input type="tel" name="telefono" id="telefono" size="10"
maxlength="10" value="<?php echo $row['telefono'] ?>"/>

<label for="email">Email</label>
<input type="text" name="email" id="email" size="50" value="<?php
echo $row['email'] ?>"/>

<input class="btn" type="submit" />

</form>
<?php } ?>
</body>
</html>
Para probar, buscamos los datos:

Al pulsar el botón de “BUSCAR”, obtenmos la información del dato:

257
Versión Mayo 2021
 Cambiamos los datos necesarios, y pulsamos “Enviar”. Si todo esta bien, veremos un

mensaje como el siguiente:

Si verificamos en nuestra base de datos, vemos el otro campo actualizado:

Eliminar datos en MySQL con PHP

Para modificar datos creamos la consulta con mysql_query(), en nuestro caso tenemos

que ver primero cuales son los datos que vamos a eliminar.

Primero se debe conocer cual son los datos que se desea eliminar, para ellos se crea un

campo que capture un dato único, se hace la búsqueda en base de datos y se procede a eliminar

los datos:

<?php
if(isset($_GET['buscar']))
{
//variables para la conexion
$servidor = "localhost"; //servidor que estamos utilizando.
$usuario = "root"; // usuario de la BD.
$contrasena = ""; //contraseña del usuario de la BD.
$basededatos = "estudiantes";

//conexion a BD
$conexion=mysqli_connect($servidor,$usuario,$contrasena,
$basededatos) or die('Error de conexión: ' . mysqli_connect_error());

258
Versión Mayo 2021
 //capturamos el dato
$cedula = $_GET['dato'];

//eliminamos los datos de la cedula suministrada

$sql = "DELETE FROM datos_personales WHERE cedula = '$cedula'";
$query = mysqli_query($conexion,$sql) or die('Error de conexión:
');
if(mysqli_affected_rows($conexion)>=1){
echo "<script>alert('Registro eliminado');</script>";
}
else{
echo "<script>alert('Registro no encontrado');</script>";
}
mysqli_close($conexion);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Formulario de Eliminacion</title>
<style type="text/css">
label {
display: block;
margin: .5em 0 0 0;
}
.btn {
display: block;
margin: 1em 0;
}
</style>
</head>
<body>
<form action="" method="GET">
<label for="dato">Cedula</label>
<input type="text" name="dato" id="dato" size="10"
maxlength="10"/>
<input class="btn" type="submit" name="buscar" value="BUSCAR" />
</form>

259
Versión Mayo 2021
 </body>
</html>
Para probar, buscamos el registro:

Si todo sale bien veremos:

Si verificamos en nuestra base de datos, vemos el otro campo actualizado:

260
Versión Mayo 2021
 Actividades – Semana VIII

Actividad 1

Realice un mapa conceptual sobre los gestores de base de datos.

Actividad 2

Realice un cuadro comparativo sobre 3 gestores de base de datos que podemos conectar

con PHP (características, ventajas y desventajas de cada uno).

Actividad 3

Cree la tabla libros con los campos id, nombre, autor, editorial, precio a través de

phpMyAdmin.

Actividad 4

Cree el archivo conexión para la tabla libros, a través de php.

Actividad 5

Cree un archivo formulario de registro de libros, utilice HTML y CSS necesario.

Actividad 6

Cree el archivo php, para realizar el registro en base de datos.

Actividad 7

Cree el formulario de actualización de datos de los libros, utilice HTML y CSS necesario.

Actividad 8

Cree el archivo php, para realizar la actualización en base de datos.

Actividad 9

Cree la funcionalidad de eliminar libros de la base de datos.

Actividad 10

Cree la tabla usuarios con los datos id, cedula, nombre, email y password.

261
Versión Mayo 2021
 Recursos – Semana VIII

Videos

• Insertar datos en MySQL mediante PHP.

https://www.youtube.com/watch?v=f0yJDiKdsJc

• Cómo Modificar Registros en una Base de Datos en PHP.

https://www.youtube.com/watch?v=jPt8GTu2O7Y&feature=emb_logo

• Eliminar Registros de Base de Datos en PHP.

https://www.youtube.com/watch?v=1lpPGno6nVw

Presentaciones

• Bases de datos MySQL. https://slideplayer.es/slide/5397673/

• MYSQL. https://es.slideshare.net/anfelon/mysql-1503822

• Desarrollo de sitios web con PHP y MySQL.

https://www.powershow.com/view/3ccbf5-

OWRlO/Desarrollo_de_sitios_web_con_PHP_y_MySQL_powerpoint_ppt_presentati

on

Lectura complementaria

• Cómo conectar PHP con MySQL. https://www.hostinger.es/tutoriales/conectar-php-

mysql/

• Cómo usar PHP para insertar datos en MySQL.

https://www.hostinger.es/tutoriales/como-usar-php-para-insertar-datos-en-mysql/

• Actualizar registros de Base de Datos MySQL en PHP 7. http://tutorialphp.net/bases-

de-datos-mysql-en-php-7/actualizar-registros-de-base-de-datos-mysql-en-php-7/

262
Versión Mayo 2021
 Semana IX

Contenido

Lunes – Semana IX ......................................................................................................... 264

Mostrar datos de MySQL en tabla HTML con PHP ....................................................... 264

Martes – Semana IV ........................................................................................................ 267

Cookies y Sesiones de usuario ........................................................................................ 267

Cookie. .................................................................................................................... 267

Sesiones de usuario. ................................................................................................ 267

Miércoles – Semana IX ................................................................................................... 273

Inclusión de archivos en PHP ......................................................................................... 273

Sintaxis. ................................................................................................................... 273

Include y require "_once"........................................................................................ 274

Ejemplo de uso. ....................................................................................................... 274

Actividades – Semana IX ................................................................................................ 276

Recursos – Semana IX .................................................................................................... 277

263
Versión Mayo 2021
 Lunes – Semana IX

Mostrar datos de MySQL en tabla HTML con PHP

Vamos a crear una tabla en HTML que se llenara con los datos cargados en una consulta

MySQL:

<?php
//se hace un consulta a base de datos de todos los datos registrados

//variables para la conexion

$servidor = "localhost"; //servidor que estamos utilizando.
$usuario = "root"; // usuario de la BD.
$contrasena = ""; //contraseña del usuario de la BD.
$basededatos = "estudiantes";

//conexion a BD
$conexion=mysqli_connect($servidor,$usuario,$contrasena,
$basededatos) or die('Error de conexión: ' . mysqli_connect_error());

//realizamos la consulta
$sql = "SELECT * FROM datos_personales";
$query = mysqli_query($conexion,$sql) or die('Error de conexión:
');

mysqli_close($conexion);

//A continuacion se crea la tabla en HTML

?>
<!DOCTYPE html>
<html>
<head>
<title>Datos de Estudiantes</title>
<style type="text/css">
.normal {
width: 250px;
border: 1px solid #000;

264
Versión Mayo 2021
 border-collapse: collapse;
}
.normal th, .normal td {
border: 1px solid #000;
}
</style>
</head>
<body>
<table class="normal">
<tr>
<th>ID</th>
<th>Cedula</th>
<th>Nombres</th>
<th>Telefono</th>
<th>Email</th>
</tr>
<?php while($row = mysqli_fetch_array($query)){ //mientras
hayas datos que mostrar ?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo$row['cedula']; ?></td>
<td><?php echo$row['nombres']; ?></td>
<td><?php echo$row['telefono']; ?></td>
<td><?php echo$row['email']; ?></td>
</tr>
<?php } ?>
</table>

</body>
</html>
Obtenmos:

Podemos agregar una columna con botones para modificar y eliminar datos.

265
Versión Mayo 2021
 Para que los botones tengan funcionalidad, mandamos el id del campo que se quiere

modificar o eliminar a través de la url y se captura a través de $_GET, luego se procede a

modificar o eliminar como vimos anteriormente:

<a href="actualizar.php?id=<?php echo $row['id'];

?>"><button>MODIFICAR</button></a>

Al eliminar podemos verificar si realmente queremos eliminar el dato, para ello al

presionar un botón se llama a la función verificar y se le pasa el id:

<button onclick="verificar(<?php echo $row['id'];

?>)">ELIMINAR</button>
En la funicon javascript se confirma que quiere eliminar:

<script type="text/javascript">
function verificar(id) {
if (confirm('Esta seguro que quiere eliminar?')) {
window.open(eliminar.php?id='+id)
}

}
</script>

Si pulsamos aceptar se llama al proceso de eliminacion, caso contrario no pasa nada.

266
Versión Mayo 2021
 Martes – Semana IV

Cookies y Sesiones de usuario

Cookie.

Una cookie es un archivo de texto plano, que se almacena remotamente -en la máquina

del cliente- a través del navegador. Cada cookie -archivo- es un conjunto de datos que

provienen del mismo servidor -más precisamente, del mismo dominio-. Básicamente,

cada cookie tendrá asociado a ella, un nombre que la identifique y un valor (Bahit, 2012).

Los datos que se almacenan remotamente en el ordenador del cliente, pueden ser de

cualquier tipo y el objetivo de estos, es:

• Almacenar información relativa al usuario.

• Acceder a esa información, para realizar seguimientos y acciones personalizadas con

respecto a cada usuario en particular.

De esta forma, podríamos pedirle a un usuario, que ingrese su nombre, almacenar ese

dato en una cookie, y así, cada vez que el usuario ingrese a nuestra aplicación o Sitio Web,

buscaríamos esa cookie, accederíamos a ella, leeríamos los datos y finalmente, podríamos

mostrarle al usuario, un mensaje personalizado, que diga “Hola NOMBREUSUARIO!”.

Sesiones de usuario.

Las sesiones de usuario, al igual que las cookies, son una forma de almacenar

información relativa al usuario, que permiten que dicha información se propague y mantenga

activa, con cada acción del usuario sobre nuestra App o Sitio Web. Las sesiones, también son

almacenadas remotamente mediante cookies, pero a la vez son retenidas localmente en memoria.

A diferencia de las cookies, las sesiones expiran pasado un período de tiempo prestablecido, de

inactividad por parte del usuario.

267
Versión Mayo 2021
 ¿Qué es una sesión PHP?

Cuando trabaja con una aplicación, la abre, realiza algunos cambios y luego la

cierra. Esto es muy parecido a una sesión. La computadora sabe quién eres. Sabe cuándo inicia la

aplicación y cuándo finaliza. Pero en Internet hay un problema: el servidor web no sabe quién es

o qué hace, porque la dirección HTTP no mantiene el estado.

Las variables de sesión resuelven este problema almacenando la información del usuario

que se utilizará en varias páginas (por ejemplo, nombre de usuario, color favorito, etc.). Por

defecto, las variables de sesión duran hasta que el usuario cierra el navegador.

Entonces; Las variables de sesión contienen información sobre un solo usuario y están

disponibles para todas las páginas en una aplicación.

Sesión PHP.

PHP nos provee de la función session_start(), la cual debe ser llamada siempre, antes de

realizar cualquier otra operación relacionada con sesiones:

session_start();
Las variables de sesión se establecen con la variable global PHP: $ _SESSION.

Mediante el array superglobal $_SESSION, podemos crear, leer y modificar sesiones, de

manera simple y directa.

Para eliminar todas las variables de sesión global y destruir la sesión,

use session_unset() y session_destroy().

Ejemplo practico.

Supongamos que ya tenemos una tabla de usuario donde hemos registrado nombre, email

y password.

268
Versión Mayo 2021
 Vamos a crear sesiones en PHP a través de formulario de inicio de sesión el cual envía

una petición al servidor y este responde de acuerdo de acuerdo a cada petición enviada por cada

usuario.

Tenemos un formulario de acceso en donde el usuario rellena los campos necesarios y

cuando pulsa sobre el botón de inicio de sesión, una sesión se creará en el servidor y se enviara a

la pagina de inicio:

<!DOCTYPE html>
<html>
<head>
<title>Iniciar Sesion</title>
<style type="text/css">
label {
display: block;
margin: .5em 0 0 0;
}
.btn {
display: block;
margin: 1em 0;
}
</style>
</head>
<body>
<form action="" method="POST">

<label for="email">Ingrese Email</label>

<input type="text" name="email" id="email" size="50" />

<label for="password">Ingrese Password</label>

<input type=" password" name="password" id="password" size="50" />

<input class="btn" type="submit" value="Iniciar Sesion" />

</form>
</body>
</html>

269
Versión Mayo 2021
<?php
if (isset($_POST['enviar'])) {
//variables para la conexion
$servidor = "localhost"; //servidor que estamos utilizando.
$usuario = "root"; // usuario de la BD.
$contrasena = ""; //contraseña del usuario de la BD.
$basededatos = "estudiantes";

//conexion a BD
$conexion=mysqli_connect($servidor,$usuario,$contrasena,
$basededatos) or die('Error de conexión: ' . mysqli_connect_error());

//capturamos el dato
$email = $_POST['email'];
$password = $_POST['password'];

//buscamos los datos de la cedula suministrada

$sql = "SELECT * FROM usuarios WHERE email = '$email' AND password
= '$password'";
$query = mysqli_query($conexion,$sql) or die('Error de conexión:
');
if(mysqli_num_rows($query)>=1){
$row = mysqli_fetch_array($query);
session_start(); //se crea la session

//se crean las variables session necesarias

$_SESSION['nombres'] = $row['nombres'];

//abrimos la pagina de inicio

header('Location:inicio.php');
}
else{
echo "<script>alert('Registro no encontrado');</script>";
}
mysqli_close($conexion);
}
?>

270
Versión Mayo 2021
En la página de inicio se abre la sesión y se muestra el nombre del usuario que ingreso:

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>INICIO</title>
</head>
<body>
<h1>BIENVENIDO</h1>
<p><?php echo $_SESSION['nombres'] ?></p>
<br>
<a href="logout.php">Cerrar Sesion</a>
</body>
</html>
Para cerrar sesión, se destruye las variables de sesión y la sesión creada:

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>

<?php
// eliminar todas las variabls de session
session_unset();

// destruye la session
session_destroy();
?>

//redireccion a inicio de session

header('Location:iniciar_sesion.php');

</body>
</html>

271
Versión Mayo 2021
Probando el codigo.

Ingresamos datos de usuario:

Obtenemos la vista con el nombre del usuario que inicio session:

Al cerrar session nos envia a la vista de inicio de session:

272
Versión Mayo 2021
 Miércoles – Semana IX

Inclusión de archivos en PHP

PHP nos permite insertar cualquier tipo de archivos con formato de texto, dentro de un

archivo PHP. Entre los tipos de archivos que podemos insertar dentro de un fichero .php, se

encuentran aquellos con las siguientes extensiones: .php, .txt, .htm, .html, entre otros con

formato de texto.

Es posible insertar el contenido de un archivo PHP en otro archivo PHP (antes de que el

servidor lo ejecute), con la instrucción include o require. Las declaraciones de incluir y exigir

son idénticas, excepto en caso de falla:

• require producirá un error fatal (E_COMPILE_ERROR) y detendrá el script

• include solo generará una advertencia (E_WARNING) y el script continuará

Entonces, si desea que la ejecución continúe y muestre a los usuarios la salida, incluso si

falta el archivo de inclusión, use la instrucción de inclusión.

Utilice siempre la instrucción require para incluir un archivo clave en el flujo de

ejecución. Esto ayudará a evitar comprometer la seguridad y la integridad de su aplicación, en

caso de que falte accidentalmente un archivo de clave.

Incluir archivos ahorra mucho trabajo. Esto significa que puede crear un encabezado, pie

de página o archivo de menú estándar para todas sus páginas web. Luego, cuando se necesita

actualizar el encabezado, solo puede actualizar el archivo de inclusión del encabezado.

Sintaxis.

include ('filename.ext');
or
require ('filename.ext');

273
Versión Mayo 2021
 Include y require "_once".

Existe también las funciones include_once() y require_once(). La única diferencia que

existe entre include e include_once y require y require_once, es que si el archivo indicado con

"_once" ya ha sido incluido no volverá a importarse.

Ejemplo de uso.

Creamos un archivo conexión.php y los incluimos en el archivo de eliminar.php:

<?php
//variables para la conexion
$servidor = "localhost"; //servidor que estamos utilizando.
$usuario = "root"; // usuario de la BD.
$contrasena = ""; //contraseña del usuario de la BD.
$basededatos = "estudiantes";

//conexion a BD
$conexion=mysqli_connect($servidor,$usuario,$contrasena,
$basededatos) or die('Error de conexión: ' . mysqli_connect_error());

?>

<?php
if(isset($_GET['buscar']))
{
include('conexion.php');
//capturamos el dato
$cedula = $_GET['dato'];

//eliminamos los datos de la cedula suministrada

$sql = "DELETE FROM datos_personales WHERE cedula = '$cedula'";
$query = mysqli_query($conexion,$sql) or die('Error de conexión:
');
if(mysqli_affected_rows($conexion)>=1){
echo "<script>alert('Registro eliminado');</script>";
}
else{

274
Versión Mayo 2021
 echo "<script>alert('Registro no encontrado');</script>";
}
mysqli_close($conexion);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Formulario de Eliminacion</title>
<style type="text/css">
label {
display: block;
margin: .5em 0 0 0;
}
.btn {
display: block;
margin: 1em 0;
}
</style>
</head>
<body>
<form action="" method="GET">
<label for="dato">Cedula</label>
<input type="text" name="dato" id="dato" size="10"
maxlength="10"/>
<input class="btn" type="submit" name="buscar" value="BUSCAR" />
</form>

</body>
</html>

275
Versión Mayo 2021
 Actividades – Semana IX

Actividad 1

Muestre, en una tabla HTML, los datos alamacenados en la tabla libros.

Actividad 2

Agregue las opciones de modificar y eliminar. Confirme antes de eliminar un libro.

Actividad 3

Cree el formulario para el registro de usuarios.

Actividad 4

Cree el formulario para el inicio de sesión de usuarios.

Actividad 5

Realice un mapa mental sobre las sesiones de usuarios en PHP.

Actividad 6

Realice un resumen (200 palabras minimo) sobre las funciones include y requiere y su

diferencia.

276
Versión Mayo 2021
 Recursos – Semana IX

Videos

• Mostrar datos de mysql en tabla html con php.

https://www.youtube.com/watch?v=nPAp-gT5gPI

• Sistema de login completo usando sesiones | Curso PHP y MySQL #36.

https://www.youtube.com/watch?v=Tb-_cEAsp4s

• Tutorial php: Incluir archivos php con 'include'.

https://www.youtube.com/watch?v=0e0eSTZeE-A

Lecturas complementarias

• Llevando datos de la base MySQL a las páginas PHP.

https://disenowebakus.net/llevando-datos-de-la-base-mysql-a-las-paginas-php.php

• Sistema de usuarios y sesiones en PHP y MySQL 1: Login, sesiones y logout.

https://codigosdeprogramacion.com/2016/12/20/sistema-de-usuarios-y-sesiones-en-

php-y-mysql-1-login-sesiones-y-logout/

• PHP Include Files. https://www.w3schools.com/php/php_includes.asp

277
Versión Mayo 2021
 Referencias

Bahit, E. (2012). Programador PHP. Buenos Aires, Argentina: Safe Creative.

Condor, E., & Soria, I. (2015). Programación Web con CSS, JavaScript, PHP y AJAX.

Andahuaylas, Perú: Universidad Nacional José María Arguedas.

Eguiluz, J. (s.f.). Introducción a CSS. Obtenido de uniwebsidad:

https://uniwebsidad.com/libros/css

Eguiluz, J. (s.f.). Introducción a JavaScript. Obtenido de uniwebsidad:

https://uniwebsidad.com/libros/javascript

Eguiluz, J. (s.f.). Introducción a XHTML. Obtenido de uniwebsidad:

https://uniwebsidad.com/libros/xhtml

Gallego, J. (2003). Desarrollo Web con PHP y MySQL. Madrid: Anaya Multimedia.

Luna, F. (2019). JavaScript / Aprende a programar en el lenguaje de la web. Ciudad Autónoma

de Buenos Aires: Six Ediciones.

Terán, J. (2010). Manaul Introducción al lenguaje HTML. Madrid: CEP, S.L.

278
Versión Mayo 2021