SITUACIÓN DE APRENDIZAJE

En esta unidad vamos a introducir las bases para crear una aplicación Web. A lo largo de la situación de aprendizaje comprenderemos como funciona internet y sus principales lenguajes asociados HTML, CSS y JavaScrit. Una vez que controlemos estos conceptos pasaremos a trabajar sobre el proyecto final que consitirá en crear una página web que consuma los servicios web de The Movie Data Base.

1. Internet

1.1 ¿Qué es Internet?

Internet es una red mundial de ordenadores, descentralizada, que permite que multitud de ordenadores se conecten entre sí mediante una serie de protocolos de comunicación, mediante cables de cobre o fibra óptica y conexiones inalámbricas.

1.2 Un poco de historia....

Internet se inició como un proyecto de defensa de los Estados Unidos durante la Guerra Fría. A finales de los años 60, la ARPA (Agencia de Proyectos de Investigación Avanzados) del Departamento de Defensa definió el protocolo TCP/IP. Aunque parezca extraño, la idea era garantizar mediante este sistema, la comunicación entre lugares alejados en caso de ataque nuclear. Ahora el TCP/IP sirve para hacer posible la transmisión de los paquetes de información entre lugares remotos, siguiendo cualquier ruta disponible. 

En 1975, ARPAnet comenzó a funcionar como red, sirviendo como base para unir centros de investigación militares y universidades, y se trabajó en desarrollar protocolos más avanzados para diferentes tipos de ordenadores y cuestiones específicas. En 1983 se adoptó el protocolo TCP/IP como estándar principal para todas las comunicaciones, y en 1990 desapareció ARPAnet para dar paso junto a otras redes TCP/IP a Internet. Por aquel entonces también comenzaron a operar organizaciones privadas en la Red.

Poco a poco, todos los fabricantes de ordenadores personales y redes han incorporado el TCP/IP a sus sistemas operativos, de modo que en la actualidad cualquier equipo está listo para conectarse a Internet. Internet dio paso a lo que hoy conocemos como la sociedad de la información. 

No obstante, Internet se ha extendido globalmente de manera desigual. Floreció en gran parte de los hogares y empresas de países ricos, mientras que países y sectores desfavorecidos cuentan con baja penetración y velocidad promedio de Internet. La falta de igualdad del acceso a esta nueva tecnología es conocida como brecha digital. Afortunadamente, la brecha se va reduciendo poco a poco, gracias a que Internet va implementándose gradualmente en todas las naciones.

A continuación podemos ver un mapa mundial de la situación actual de Internet donde los distintos colores indican el número de conexiones de Internet (cuanto más oscuro, mayor cantidad de conexiones):

1.3 Estructura Física

La red está formada por miles de ordenadores diferentes que se conectan entre sí mediante enlaces muy diversos: líneas telefónicas convencionales, redes locales, líneas de fibra óptica, enlaces por radio, satélites, etc. Todos estos ordenadores se comunican mediante un protocolo denominado TCP/IP, que consiste en un sistema de identificación de las estaciones y un método para la transmisión de la información.

En la siguiente imagen podemos ver la actual estructura de cables submarinos que unen los diferentes continentes:

A continuación podemos ver un interesante video donde varios ingenieros nos cuentan la instalación de un nuevo cable submarino en las playas de Brasil:

2. Páginas web.

2.1 ¿Qué es una página web?

Esta pregunta puede parecer sencilla, pero no lo es en absoluto. Para responderla vamos a preguntarle a una gran fuente de información, Wikipedia.

"Una página web es un documento de la World Wide Web «con dirección propia». Las páginas web son entregadas por un servidor web al usuario y mostradas en un navegador web para que actúe como «unidad de recuperación» de la información almacenada en su interior. Un sitio web está formado por muchas páginas web enlazadas bajo un nombre de dominio común.​ El nombre «página web» es una metáfora de las páginas de papel encuadernadas en un libro." 

Probablemente esta definición solo te haya ayudado un poco a aclarar la pregunta. Veamos un video que probablemente te ayude un poco más a aclarar tus ideas. 

Estoy seguro que tras ver el video, tienes mucho más claro qué es una página web. ¿Aún tienes dudas?.

Los equipos conectados a la web se dividen en clientes y servidores. 

Los clientes son los dispositivos de los usuarios, éstos emplean un navegador para acceder a la información (Firefox, Chrome, etc).

Por otro lado, los servidores son los ordenadores que almacenan sitios y aplicaciones web. Utilizan un software especial, que les permite escuchar las peticiones de los clientes, procesarlas y enviar una respuesta. Normalmente, los servidores se encuentran situados en centros de datos.

HTTP  (Protocolo de Transferencia de HiperTexto) es empleado en la comunicación entre clientes y servidores, y DNS (Sistema de Nombres de Dominios) se encarga de traducir nombres en direcciones IP.

2.2 ¿Cómo se forma un sitio web?

Un sitio web se compone de diferentes archivos. Unos archivos son código como los documentos html, las hojas de estilo y los programas javascript; otros archivos son recursos como imágenes o vídeos.

Cuando un dispositivo cliente quiere acceder a una página web, los archivos que componen el sitio web se descargan desde el servidor al cliente.

En ese momento, el navegador (Mozilla, Chrome, etc.) interpreta el código (html, css y js) y muestra la web al usuario. Estos archivos son troceados en paquetes para su envío.

Dividimos el desarrollo web en dos áreas diferenciadas (cliente y servidor).

CLIENTE

En el entorno cliente creamos las páginas web con las que interactúan los usuarios y  utilizamos principalmente los lenguajes: 

• HTML para estructurar y organizar los contenidos.

• CSS para conseguir una apariencia determinada.

• JavaScript  para controlar el comportamiento.

SERVIDOR

En el entorno servidor se crean páginas web dinámicas, normalmente insertando datos desde una base de datos dentro de plantillas HTML.  Para ello, solemos utilizar:

• Frameworks web escritos en lenguajes como python, php o javascript que hacen más fácil escribir y escalar aplicaciones web.

• Bases de datos SQL/NoSQL (almacenan datos en tablas / o bien mediante modelos más flexibles como pares clave-valor o colecciones). 

2.3 HTML, CSS y JAVASCRIPT

Estos son los tres lenguajes principales que se utilizan en el front-end de nuestra aplicación, es decir, se utilizan en el lado del cliente en el propio navegador. Pero ¿cuál es la diferencia entre ellos? ¿Son realmente todos lenguajes de programación?

Comparando cada uno de ellos ahora, podemos usar el cuerpo humano como una página web como ejemplo, de la siguiente manera:

HTML es el esqueleto, formado por los huesos que lo sostienen. CSS es la piel, el cabello y las ropas, creando la apariencia que realmente vemos cuando miramos a alguien. Y por fin, Javascript es el músculo que le da movimiento al cuerpo.

2. HTML

2.1 ¿Qué necesitamos para programar con HTML?

Para crear páginas Web y concretamente escribir código HTML necesitaremos los siguientes elementos:

• Entorno de programación Visual Studio Code: ve a Aplicaciones > Herramientas del sistema > Centro de Software de EducaAndOS e instala el programa.

• Un navegador web que nos servirá para visualizar el resultado de nuestro código HTML en la pantalla. El que tenemos instalado en el equipo de clase, nos servirá.

Cuando creamos un documento HTML debemos guardarlo con la extensión .html para que el navegador pueda ejecutarlo como tal.

Entonces te toca a ti ahora mismo hacer lo siguiente:

1. Abrir tu editor de código.

2. Crear un documento y guardarlo con la extensión .html, por ejemplo: proyecto.html en minúsculas.

3. Ahora que tienes guardado el documento, ábrelo con tu navegador web preferido, pero seguro que el navegador te muestra un documento en blanco, y es que aún no tenemos contenido, nada de código en nuestro archivo o documento HTML.

4. Ahora tenemos abierto nuestro documento HTML con el editor, y por otro lado ese mismo documento lo tenemos abierto con nuestro navegador web.

5. Empezamos a escribir código HTML en el documento que acabamos de crear.

¿Cómo indicamos mediante código HTML al navegador el tipo de elemento que constituye la página web?

Muy fácil, lo hace mediante elementos (etiquetas de apertura y etiquetas de cierre). Así pues, existen muchísimas etiquetas HTML para indicar qué elemento es, si es un título, un encabezado, un subtítulo, un párrafo, imagen o lo que sea.

Por ejemplo, para indicar un párrafo se utiliza el elemento p de la siguiente manera:

Este es el significado de cada una de las partes del elemento p anterior:

Siempre es esa forma: <etiqueta> contenido </etiqueta>

Como podemos ver la etiqueta de apertura se construye con los signos menor (<) y mayor (>) y la etiqueta de cierre también, pero además contiene un slash (/), seguido de la etiqueta y finalmente el cierre.

Siempre será en esa forma, aunque hay excepciones que veremos en su momento.

Las etiquetas ya están predefinidas y solo nos queda aprender su sintaxis y comprender qué efecto visual tienen en el navegador en cada caso.

En conclusión, si queremos hacer una página web, ¿cómo le dices a un navegador web que un determinado elemento se debe mostrar como un título o subtitulo o párrafo? ¿Cómo le dices que es una imagen y cuál es esa imagen? ¿Cómo le dices que este elemento es un formulario? ¿Cómo le dices al navegador web que este párrafo tiene que estar en negrita, cursiva, o ponerle un color o un tipo de letra? ¿Cómo le decimos al navegador web que este elemento es un enlace cuyo texto es «haz clic aquí»? ¿Y cómo le decimos a dónde tiene que apuntar ese enlace?

Bueno, todo eso y mucho más, se lo diremos con código HTML, mediante las etiquetas y atributos, ¡ya lo veremos!

¡Ah! Y por si fuera poco, HTML5 es una versión de HTML que nos permite agregar más elementos como audio, video, barras de progreso, formas geométricas, animaciones, etc. También lo veremos en su momento.

Así pues ¡ya sabes de qué va esto! Ahora nos toca empezar a desgranar cada uno de los elementos que forman HTML y qué aspecto tienen cuando los vemos en un navegador.

2.2 Estructura básica de un documento HTML

Un documento HTML posee una estructura básica que contiene una variedad de elementos que definen la estructura de la pagina resultante, dichos elementos deben estar adecuadamente estructurados para que la pagina funcione sin problemas.

Ahora que ya sabemos que es un elemento y para que sirve, es momento de construir nuestra estructura básica de HTML utilizando los elementos destinados para este fin.

Un último concepto que debes entender es que los elementos se anidan unos dentro de otros formando una estructura jerárquica en forma de árbol. La raíz de ese árbol SIEMPRE será el elemento html y a partir de ella se construirá toda una estructura de ramas y hojas.

Llamamos rama a un elemento del que cuelgan otro(s) elemento(s). Y llamamos hoja a aquellos elementos que no tienen descendientes.

De esta manera, nuestro código HTML estará organizado jerárquicamente por niveles. Así, un elemento que esté en un nivel más profundo que otro, se dirá que es descendiente de aquel. Los elementos que estén en el mismo nivel serán hermanos, los que estén un nivel por debajo serán hijos y los que estén dos niveles por debajo serán nietos. Aplicando estas relaciones de parentesco podemos hacer referencia a la posición que ocupan los elementos dentro de la jerarquía arbórea del documento.

2.3 Elemento HTML

El elemento html es la raíz del documento y sirve para indicárselo así al navegador, que lo interpretará como tal. Todo el contenido de nuestra página irá ordenadamente dentro de la etiqueta <html> y de hecho, es lo primero que debemos escribir en nuestro documento:

2.4 Elemento HEAD

head es el elemento en la que irá la cabecera de nuestra página y va justo después de la etiqueta de apertura <html>. Este elemento contiene otros elementos que ayudarán a que nuestra página funcione correctamente y que, en su mayoría, no se verán en el navegador.

2.5 Elemento TITLE

El elemento title va dentro del elemento head en la cabecera, y contiene el título de la página que se mostrará en la pestaña de los navegadores, pero no aparecerá en el cuerpo de la página.

2.6 Elemento BODY

Después de la cabecera sigue el cuerpo de la página, que se indica mediante el elemento body, el cuerpo o body contiene prácticamente todos los elementos visuales de nuestra página. Aquí irán los textos de encabezado o títulos, subtítulos, párrafos, listas, tablas, formularios, multimedia, etc. Es decir el contenido de la página, todo lo que queremos que se vea en el navegador.

Sabiendo todo lo anterior, ya tenemos el esqueleto de una página web sencilla:

Como puedes ver, es una norma de estilo muy recomendable tabular aquellos elementos que están dentro de otros. Hacerlo así ayuda mucho a producir códigos más legibles y más sencillos de modificar.

Bien, tenemos la estructura de la página, es hora de empezar a meter contenido.

2.7 Elementos HTML más comunes

Existe una cantidad limitada de elementos en HTML, ya están establecidos y solo queda aprenderlos. Veamos algunos de los más comunes:

• h1, h2, h3, h4, h5, h6: elementos para encabezados. Cuanto más pequeño sea el número, más importante es el texto y en consecuencia más grande aparecerá en el navegador.

• p: crea párrafos que añaden un pequeño espacio antes y después de ellos.

• ul: para crear listas de elementos sin ordenar. La variante ol, crearía una lista ordenada.

• table: crea tablas.

• form: permite crear un formulario que recoge datos y los envía.

• a: para crear enlaces.

• img: para insertar imágenes.

Bueno, hay muchos más elementos y lo veremos poco a poco.

Ahora te toca practicar.

En la sección body escribiremos nuestro primer encabezado visible utilizando el elemento h1 y nuestro primer párrafo utilizando el elemento p, de la siguiente manera:

Ahora, si guardamos nuestro documento y actualizamos el navegador, veremos que el navegador ya nos muestra contenido en el cuerpo de nuestra página, nuestro encabezado y nuestros párrafos.

Observa el espacio que se ha creado entre los dos párrafos, porque esa es su principal utilidad: distribuir el texto para que aporten la semántica asociada a párrafos distintos de un mismo documento.

Veamos ahora, dos elementos HTML especiales que no usan una etiqueta de apertura y otra de cierre, sino ambas cosas en la misma etiqueta.

Elemento br

• <br/> o <br> indica un salto de línea, observa bien, no está mal escrito, es así como se escribe.

• Puede ir dentro de un párrafo, por ejemplo para hacer un salto de línea si es necesario.

• No tiene etiqueta de cierre.

Elemento hr

• <hr/> o <hr> es un elemento que crea una línea horizontal o separador.

• No tiene etiqueta de cierre.

2.8 Comentarios 

Los comentarios en HTML nos permiten añadir a nuestro documento, alguna nota, una pequeña descripción, o un simple recordatorio que nosotros entendamos.

Los comentarios no aparecerán en la página cuando la visiten los usuarios, solo será visible para el programador (pero no incluyas información sensible porque cualquier usuario puede leerlo utilizando las herramientas del propio navegador).

Un comentario en HTML se indica de la siguiente manera: <!– Aquí escribe tu comentario –>

Ejemplo:

2.8 Principales elementos de texto

Se trata de elementos que siempre indican texto.

En el caso del elemento p, ya sabemos cómo se usan.

En el caso de los encabezados, cuando más alto es el número, más pequeño aparecerá el texto, y menos importante será, pero SIEMPRE será más importante que cualquier otro elemento.

En el caso de span, no tiene ningún efecto por sí mismo sobre el texto que define, pero es muy útil cuando trabajemos con CSS y JavaScript, porque es una manera de marcar o seleccionar un texto al que aplicaremos alguna transformación.

Por, ejemplo, esta pieza de código:

2.9 Atributos

Los atributos en HTML van siempre dentro de la etiqueta de apertura y sirven para modificar o agregar alguna característica al contenido de ese elemento.

Un atributo se escribe de la siguiente manera: atributo=“valor”, el nombre del atributo seguido del signo igual (=) y entre comillas el valor, todo esto siempre dentro de la etiqueta de apertura del elemento al que se le aplica el atributo.

Por lo tanto el atributo escrito en un elemento (por ejemplo párrafo) se ve así:

<p atributo=”valor”>Este es un párrafo al que hemos añadido un atributo</p>

Veamos algunos de los atributos más usados:

id: lo usamos para identificar un elemento único, su valor no se debe repetir.

• class: identifica un conjunto de elementos con alguna característica en común.

• href: define la URL de destino que utiliza el elemento.

• src: define la localización del recurso que utiliza el elemento.

• title: define el título del elemento.

• alt: define el texto que aparecerá cuando la imagen no pueda mostrarse.

• style: define los estilos que se aplican al elemento (supone una muy mala práctica, sólo deberías usar este atributo en casos muy excepcionales).

• data: conjunto de atributos que podemos personalizar para procesar datos con un lenguaje de programación.

Por ejemplo:

<p id="especial" class="oscuro">Un parrafo cualquiera.</p> 

Este párrafo tiene aplicados dos atributos, el id con valor especial; y el class con valor oscuro. En esta página no debería haber ningún otro elemento con id=”especial”, pero si muchos otros elementos con class=”oscuro”.

2.9 Enlaces

Colocar enlaces (o hipervínculos) en HTML es una tarea muy fácil y a la vez muy útil para mejorar la usabilidad de una página, ya que nos da el poder de dirigir a los usuarios a otras direcciones URL.

Para definir enlaces utilizaremos el elemento a de la siguiente manera:

<a>texto del enlace</a> 

Sin embargo, se trata de un enlace muy poco útil, puesto que no hemos indicado a dónde debe apuntar dicho enlace, es decir, a dónde llevará al usuario cuando pinche sobre él. Para ello haremos uso de sus atributos:

<a href="https://sites.google.com/view/rortic/2%C2%BA-bach-pyc/sa-3-desarrollo-web" target="_blank">Ir a los apuntes</a> 

Este otro enlace, ya sí que es mucho más útil, veamos por qué:

• Incluye en su contenido información útil para el usuario «Ir a los apuntes».

• Incluye el atributo href que indica qué URL de destino se abrirá cuando se pulse sobre el enlace.

• Incluye el atributo target que cuando tiene como valor _blank significa que se abrirá una nueva pestaña para cargar esa web de destino. Si no lo pusiéramos la página en la que está el enlace se sustituiría por la página de destino.

2.10 Imágenes

Para insertar una imagen en HTML simplemente debemos indicar que el elemento es una imagen mediante la etiqueta <img> (estamos en uno de esos casos especiales donde no hay etiqueta de cierre) y cuál es la ubicación del archivo de imagen.

En este caso, podemos observar que se utilizan cuatro atributos:

• src: la URL donde se encuentra la imagen.

• alt: una descripción textual de lo que puede verse en la imagen (sólo sale en el navegador cuando no es posible cargar la imagen).

• title: un pequeño texto que aparece cuando situamos el ratón sobre la imagen.

• width: establece el ancho -en píxeles- en el que se visualizará la imagen.

¿Qué sentido tiene escribir una descripción tan detallada de lo que contiene una imagen? 

Es una utilidad tremendamente importante, por tres motivos principales:

• Si por el motivo que sea la imagen no puede cargarse en el navegador, aparecerá esa descripción para que el usuario pueda leer de qué se trataba esa imagen.

• Si el usuario que visita la web tiene dificultades visuales y tiene activado un lector de pantalla, el navegador le «leerá» tu descripción para que entienda qué está apareciendo ahí.

• Aporta mucha semántica a Google para que entienda el contenido que estás ofreciendo, y sepa en consecuencia, posicionarte correctamente en los resultados de las búsquedas relacionadas.

Cuando estamos programando una página web, debemos tener cuidado siempre que insertemos una imagen en nuestras páginas.

En el ejemplo anterior, la imagen no estaba alojada en el mismo sitio que nuestra web, y esto podría ser un problema. ¿Qué ocurriría si el propietario de la web donde está alojada esa imagen decide cambiarla de sitio o directamente borrarla? Pues si, nuestra página dejaría de mostrar esa imagen y estropearía su apariencia.

Por eso, siempre es mejor que las imágenes que utilicemos en nuestras webs, estén alojadas en el mismo sitio que nuestras páginas.

Dicho esto, debes entender un concepto importante sobre el enlazado de archivos. Si la imagen paisaje.jpg está en el mismo directorio que nuestra página, podemos escribir directamente:

<img src="./paisaje.jpg" 

     alt="Panorámica de un lago helado rodeado de montañas"

     title="Entorno natural de la ciudad noruega de Oslo"> 

Observa que la ruta comienza por ./ eso significa que la imagen está en el mismo directorio que la página.

Pero si esa imagen está en un directorio llamado imagenes que a su vez está dentro del directorio donde está nuestra página, deberemos indicarlo así:

<img src="./imagenes/paisaje.jpg" 

     alt="Panorámica de un lago helado rodeado de montañas"

     title="Entorno natural de la ciudad noruega de Oslo"> 

Y si esa carpeta imágenes estuviera fuera del directorio donde está alojada nuestra página, debemos indicar su localización correcta utilizando o bien rutas absolutas o bien rutas relativas.

Por ejemplo, supongamos que mi web tiene esta estructura de archivos:

Si mi archivo HTML está en la carpeta PÁGINAS y la imagen en la carpeta IMÁGENES, para acceder a la imagen usando rutas relativas (una ruta que se indica partiendo del lugar en el que estamos actualmente) accederíamos a la imagen escribiendo:

<img src="../../IMÁGENES/paisaje.jpg"> 

Ya que ../ significa subir un nivel en el árbol de directorios.

Y si quisiéramos utilizar rutas absolutas (una ruta que se indica partiendo de la raíz de la web), escribiríamos:

<img src="/IMÁGENES/paisaje.jpg"> 

Ya que la / inicial representa la raíz del árbol de directorios.

2.11 Listas

Existen dos tipos de listas HTML, en general: listas ordenadas y listas sin ordenar, a continuación veamos como se implementa cada uno y sus diferencias.

2.11.1 Listas desordenadas

Una lista no ordenada en HTML es aquella en la que los elementos no están enumerados ni marcados por algún carácter que designe orden. Los elementos están simplemente listados con alguna viñeta predeterminada como puede ser un punto u otro tipo como veremos más adelante.

Elemento ul

Una etiqueta <ul> contiene a todos los elementos de la lista y dentro de ella irán los atributos que afectan a toda la lista en bloque.

Elemento li

Los elementos de la lista propiamente dichos, se especifican en una etiqueta <li>, de tal manera que cada elemento es independiente de otro elemento.

Como ejemplo demostrativo veamos una lista sin ordenar de las estaciones del año:

2.11.2 Listas ordenadas

Una lista ordenada en HTML es aquella en la que los elementos están enumerados o marcado con algún signo alfanumérico que indique el orden de los elementos.

Elemento ol

Se utiliza la etiqueta HTML <ol> para crear listas ordenadas, entre la etiqueta de apertura y cierre irán los elementos de la lista -es decir, una secuencia de elementos li.

Veamos un ejemplo con los días de la semana:

Por supuesto, estas dos variantes de listas -ordenadas y desordenadas- las podemos combinar, para construir listas más complejas, anidadas unas dentro de otras, como por ejemplo así:

2.12 Tablas

Para crear tablas en HTML debemos saber que, una tabla es una estructura formada por filas y columnas, las filas son las distribuciones horizontales y las columnas son las distribuciones verticales.

Para construir una tabla crearemos dichas filas y columnas mediante distintos elementos que veremos a continuación.

Por ejemplo, en la siguiente imagen podemos observar una tabla con 4 filas y 3 columnas:

En HTML, la estructura de una tabla tiene que ver con etiquetas, una etiqueta <table> indica que ahí empieza una tabla, y una etiqueta </table> significa que ahí termina la tabla, por tanto, todo lo que haya dentro serán las filas y las columnas de la tabla.

Para indicar que queremos pintar una fila tenemos que escribir las etiquetas <tr></tr>, y dentro de ellas tantas etiquetas <td></td> como columnas queramos que tenga esa fila.

Como ves, si lo dejamos así, no veremos el contorno de la tabla, por eso, para poder ver hasta dónde llega cada celda, añadimos el atributo border=”1px” en el elemento table.

Además, como en todas las tablas, podemos colocar un encabezado en cada columna. Para ello, en la primera fila usaremos los elementos th en lugar de td.

El único efecto que tienen los elemento th, desde el punto de vista visual, es que ponen la letra en negrita. Sin embargo, para los motores de búsqueda sí que es importante, porque les ayuda a entender mejor cuál es el contenido de la tabla.

2.13 Formularios

Los formularios son elementos de gran importancia y utilidad en las páginas web, ya que son los elementos que recogen la información aportada por nuestros usuarios.

Crear un formulario en HTML implica construir los campos de datos que van a recoger la información. Estos pueden ser: campos de texto, de número, selectores, desplegables, casillas de verificación y muchos otros.

Como ya es sabido, en HTML se emplean etiquetas para crear los diversos elementos existentes, y el caso de los formularios no es una excepción. Para crear los componentes del formulario HTML haremos uso de una gran variedad de etiquetas y atributos, veamos los más importantes.

2.13.1 Elemento Form

Utilizaremos la etiqueta <form> para indicar al navegador que el elemento será un formulario.

<form> se emplea para cualquier tipo de formulario HTML, ya sea uno de contacto, suscripción, registro, login, encuesta, etc.

Es decir, todo lo que se encuentre entre las etiquetas <form> y </form> formará parte del formulario.

Además, los formularios son útiles precisamente porque al clicar en el botón de enviar, los datos viajan por internet hasta una aplicación destino que recibe los datos, los procesa y realiza la acción que en cada momento interese

Para hacer todo lo anterior necesitamos incluir en la etiqueta <form> tres atributos:

1. name: el nombre del formulario, ya que podemos tener varios formularios en la misma página, y necesitamos identificar a cada uno de ellos.

2. action: la URL de destino a donde se enviarán los datos del formulario.

3. method: la manera en la que los datos van a enviarse.

• GET: los datos del formulario son visibles en la barra de direcciones del navegador.

• POST: los datos del formulario no son visibles en la barra de direcciones del navegador.

2.13.2 Elemento Input

Crear los campos en el formulario es tan sencillo como utilizar la etiqueta <input> antecedida de lo que deseas obtener. Por ejemplo:

Si te fijas, aparte del atributo name (que como ya sabemos sirve para identificar un elemento), aparece el atributo type. Esto es así, porque hay muchos tipos de controles disponibles en HTML para formularios. Por ejemplo:

• text: para campos de texto simple.

• password: para campos de contraseña (los caracteres aparecen ocultos).

• checkbox: para casillas de verificación.

• radio: para casillas de selección.

• submit: para botones de envío.

• reset: para botones de resetear (limpia el formulario).

• file: para campos de selección de archivo.

2.13.2 Elemento select

Utilizaremos la etiqueta <select> para crear un campo desplegable. Este tipo de campos en HTML permiten seleccionar una opción del desplegable y además son muy útiles en esas ocasiones en las que buscamos buena presentación de espacio en el formulario.

Utilizaremos la etiqueta <option> dentro de la etiqueta <select>. <option> contiene una opción del desplegable y podemos implementar la cantidad de opciones que deseemos.

2.13.2 Elemento textarea

La etiqueta <textarea> se utiliza para crear un área de texto de varias líneas, puede servirnos por ejemplo para un campo de mensaje, comentarios, observaciones y utilidades similares. Veamos un ejemplo concreto:

3. CSS

3.1. ¿Cómo funcionan las hojas de estilo?

Las hojas de estilo CSS son un conjunto reglas que enumeran en un fichero .css las propiedades que describen el aspecto que deben tener los diferentes elementos HTML de una página.

Lo interesante de esto es que funcionan con una filosofía de patrones o plantillas, es decir, no es necesario especificar cada uno de los elementos, sino que se pueden definir reglas como estas dos:

• “Los títulos de nivel 1 y 2 han de ser de color negro y un tamaño de fuente de 16 y 14 pixeles respectivamente.”

• “El texto de los párrafos están alineados a la izquierda, tienen un tamaño de fuente de 12 pixeles y un color gris oscuro.”

3.2. ¿Cómo se añaden estilos a nuestras páginas?

Para añadir estilos a nuestras páginas web podemos decantarnos por una de estas tres opciones, aunque la más recomendada siempre será la tercera.

• Estilos en atributos.

• Estilos en las páginas.

• Estilos en ficheros.

Esta tercera forma genera un código muy limpio, eficiente y mantenible, por lo que es la mejor opción.

Se trata de colocar todos los estilos de todas nuestras páginas en un fichero aparte, un fichero .css. De esta manera, para que los estilos se apliquen en nuestras páginas sólo tenemos que incluir el fichero en nuestra página HTML.

Primero creamos nuestro fichero estilos.css:

Y seguidamente, en nuestra página HTML, incluir el fichero CSS desde la sección head usando el elemento link:

Esta es la forma recomendada de incluir los estilos en nuestras páginas HTML.

3.3 Estructura y sintaxis de CSS

El funcionamiento de CSS consiste en definir unas reglas de presentación que se van a aplicar a un número indeterminado de elementos del documento HTML, al que están vinculadas. Por lo tanto, se necesitan dos herramientas básicas para crear y aplicar un estilo:

1. SELECTORES: son las herramientas que permiten seleccionar el elemento o elementos sobre los que aplicar las reglas.

2. DECLARACIONES: son las indicaciones para asignar, mediante claves propiedad : valor, el aspecto deseado a los elementos determinados por el selector.

Los selectores y las declaraciones se agrupan en reglas.

En el siguiente ejemplo se muestra una regla compuesta por los distintos elementos:

• Selector body. El contenido se aplica a todos los elementos que se encuentren dentro del elemento body en la página HTML.

• Las declaraciones que asignan valor a las propiedades text-align, font-family, background-color y color, que afectarán respectivamente a la alineación del texto, el tipo de letra, el color de fondo y el color del elemento body y de todos los elementos contenidos en este, siempre que las propiedades sean aplicables a dichos elementos.

3.3 Selectores CSS

Los selectores determinan sobre qué elemento(s) se debe aplicar un estilo. Es un sistema muy elaborado y capaz de conseguir un alto nivel de precisión a la hora de determinar sobre qué propiedades de qué elementos se van a aplicar los valores deseados.

Los selectores tienen un nivel de especificidad dispar, desde muy generales hasta muy específicos. Lo mismo ocurre con el nivel de complejidad; hay selectores muy sencillos y fáciles de comprender y otros más elaborados y complejos.

Los selectores más sencillos de entender y de uso más habitual. Se detallan en la siguiente tabla:

EJEMPLO

3.4 Propiedades CSS

Ya sabes a qué elementos afectan las propiedades que establecemos con todos los selectores que hemos añadido a lo largo de toda esta sección. Pero todavía no hemos estudiado las diferentes propiedades que podemos aplicarle a los elementos HTML para cambiar su aspecto.

A continuación os dejo un tutorial a CSS por si teneís curiosidad en conocerlo a más profundidad. 

TUTORIAL CSS