Currículo: este documento contiene la parte práctica que complementa los saberes básicos desarrollados en el Tema 5. La Web correspondiente a 2º Bachillerato.
Tabla de contenidos
- 1. ¿Qué necesitamos para programar con HTML?
- 2. Estructura básica de un documento HTML
- 3. Elementos HTML más comunes
- 4. Atributos
- 5. Enlaces
- 6. Imágenes
- 7. Listas
- 8. Tablas
- 9. Formularios
Habíamos mencionado que las páginas web se escriben con código HTML y es muy cierto; este código es interpretado por el navegador web para finalmente mostrar un contenido entendible para cualquier persona.
Visualizar el código HTML de una página web es tan simple como dar clic derecho del ratón sobre cualquier página y seleccionar la opción “Ver código fuente de la página” o también se puede ver accediendo a la opción “inspeccionar” que aparece debajo de la opción anterior. De esa manera podemos ver que detrás de cada elemento existe un código HTML.
El código HTML puede ser escrito en un editor de texto cualquiera -como Google Docs, Microsoft Word o LibreOffice Writer-, sin embargo, tiene muchas ventajas hacerlo en un editor de código -como Sublime Text o Microsoft Visual Studio Code-.
Una vez escrito, se guarda y para que puedan estar permanentemente accesibles desde Internet se almacenan en un servidor.
No olvides que un servidor es una máquina o un programa que está permanentemente conectado a Internet, que recibe peticiones y devuelve respuestas. Si una petición es «dame la esta página web», su respuesta será enviar a tu navegador el contenido de esa página.
Un usuario cualquiera puede realizar una petición a un servidor usando un navegador web, el servidor rápidamente accede al documento e interpreta dicho código para, finalmente, enviarle al navegador la respuesta en forma de página con contenido entendible como textos, imágenes, listas, enlaces, o cualquier elemento que haya sido establecido en el documento previamente.
1. ¿Qué necesitamos para programar con HTML?
Para empezar a escribir código HTML necesitamos un editor de código. En nuestro caso usaremos Visual Studio Code. Así que, como siempre, ve a Aplicaciones > Herramientas del sistema > Centro de Software de EducaAndOS e instala el programa.
Por otro lado necesitamos 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:
- Abrir tu editor de código.
- Crear un documento y guardarlo con la extensión .html, por ejemplo: proyecto.html en minúsculas.
- 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.
- Ahora tenemos abierto nuestro documento HTML con el editor, y por otro lado ese mismo documento lo tenemos abierto con nuestro navegador web.
- 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:
<p>MI PRIMER PÁRRAFO</p>Este es el significado de cada una de las partes del elemento p anterior:
| <p> | Etiqueta de apertura |
| MI PRIMER PÁRRAFO | Contenido del elemento |
| </p> | Etiqueta de cierre |
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.
Otro ejemplo: para indicar que un elemento es un subtítulo se utiliza el elemento h2:
<h2>Este es un subtítulo</h2>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. 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.1. Elemento HTML
El elemento html es la raíz del documento y sirve para indicarselo 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:
<html>
...contenido...
</html>2.2. 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.
<html>
<head>
...elementos de la cabecera...
</head>
</html>2.3. 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.
<html>
<head>
<title>Mi primer titulo</title>
</head>
</html>Este sería el resultado de visualizar en el navegador la página anterior:
Como ves, el contenido del elemento title se ve reflejado en la pestaña del navegador.
2.4. 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:
<html>
<head>
<title>Mi primer titulo</title>
</head>
<body>
Cuerpo de la página, aquí irán todos los elementos visibles.
</body>
</html>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.
3. 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:
<html>
<head>
<title>Mi primer titulo</title>
</head>
<body>
<h1>Encabezado o título principal</h1>
<p>Este es nuestro primer párrafo de texto con un contenido cualquiera para probar cómo se comportan los espacios antes y después de ellos.</p>
<p>Este es nuestro segunso párrafo de texto con un contenido cualquiera para probar cómo se comportan los espacios antes y después de ellos.</p>
</body>
</html>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.
Por ejemplo:
<html>
<head>
<title>Mi primer titulo</title>
</head>
<body>
<h1>Uso del salto de línea</h1>
<p>Esta es la primera línea <br> Esta es la segunda <br> Esta es la tercera <br> Esto es el resto del texto del párrafo con un contenido cualquiera para probar cómo se comportan los saltos de línea.</p>
<hr>
<p>Este es nuestro segundo párrafo de texto con un contenido cualquiera para probar cómo se relaciona con otro párrafo que contiene saltos de línea.</p>
<hr>
</body>
</html>Veamos el resultado:
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:
<h1>Página de contacto</h1>
<!-- Importante: no olvidar las restricciones de entrada de datos -->Principales elementos de texto: p, h y span
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:
<body>
<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>
<p>Un parrafo para comprobar como el <span>tercer elemento</span> no tiene ningún efecto visual.</p>
</body>Se vería así en el navegador:
4. 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”.
5. 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.
Pero antes de saber cómo se programa, debemos asegurarnos de que sabes qué es una URL:
Seguimos.
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://lopegonzalez.es/" 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.
Además, hay otro interesante uso para los enlaces: poder navegar dentro de un mismo documento. Observa este ejemplo:
<a href="https://lopegonzalez.es/eso-y-bachillerato/tic-ii-2o-bachillerato/tema-5-la-web/#52-introduccion-a-html-y-css">Ir al apartado 5.2 de los apuntes</a>Si te fijas, al final de la URL hemos añadido #52-introduccion-a-html-y-css, esto quiere decir, que no sólo queremos ir a la web de Lope González, sino que una vez allí queremos que lo primero que nos aparezca sea el elemento HTML identificado como 52-introduccion-a-html-y-css (en la web de Lope González habrá un elemento con id=”52-introduccion-a-html-y-css”).
6. 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.
<img src="https://shorturl.at/gruxX"
alt="Dragón con las alas extendidas arrasando una población"
title="Significado de ¡Dracarys!"
width="400">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.
7. 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.
7.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:
<ul>
<li>Primavera</li>
<li>Verano</li>
<li>Otoño</li>
<li>Invierno</li>
</ul>
7.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:
<ol>
<li>Lunes</li>
<li>Martes</li>
<li>Miércoles</li>
<li>Jueves</li>
<li>Viernes</li>
<li>Sábado</li>
<li>Domingo</li>
</ol>
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í:
<ul>
<li>América</li>
<ol>
<li>América central</li>
<li>América del sur</li>
<li>América del norte</li>
</ol>
<li>África</li>
<ol>
<li>África septentrional</li>
<li>África occidental</li>
<li>África central</li>
<li>África oriental</li>
<li>África meridional</li>
</ol>
<li>Antártida</li>
<ul>
<li>Antártida oriental</li>
<li>Antártida occidental</li>
</ul>
<li>Asia</li>
<li>Europa</li>
<li>Oceanía</li>
</ul>
8. 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.
<table>
<!-- Aquí meteremos las filas y columnas -->
</table>Para indicar que queremos pintar una fila tenemos que escribir las etiquetas <tr> y </tr>, y dentro de ellas tantas etiquetas <td></td> como columnas queramos que tenga esa fila.
<table>
<tr>
<td>Fila 1 - Columna 1</td>
<td>Fila 1 - Columna 2</td>
<td>Fila 1 - Columna 3</td>
</tr>
<tr>
<td>Fila 2 - Columna 1</td>
<td>Fila 2 - Columna 2</td>
<td>Fila 2 - Columna 3</td>
</tr>
</table>Así se vería en el navegador:
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.
<table border="1px">
...
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.
<table border="1px">
<tr>
<th>Título Columna 1</th>
<th>Título Columna 2</th>
<th>Título Columna 3</th>
</tr>
<tr>
<td>Fila 1 - Columna 1</td>
<td>Fila 1 - Columna 2</td>
<td>Fila 1 - Columna 3</td>
</tr>
<tr>
<td>Fila 2 - Columna 1</td>
<td>Fila 2 - Columna 2</td>
<td>Fila 2 - Columna 3</td>
</tr>
</table>
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.
9. 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.
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:
- name: el nombre del formulario, ya que podemos tener varios formularios en la misma página, y necesitamos identificar a cada uno de ellos.
- action: la URL de destino a donde se enviarán los datos del formulario.
- 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.
<form name="inicioSesion"
action="http://miweb.es/gestionaSesión.php"
method="GET">
<!-- Aquí irían los campos del formulario -->
</form>El formulario anterior se llama inicioSesion y se envía por GET a la URL indicada para que lo procese.
Elemento input
Crear los campos en el formulario es tan sencillo como utilizar la etiqueta <input> antecedida de lo que deseas obtener. Por ejemplo:
<form name="inicioSesion"
action="http://miweb.es/gestionaSesión.php"
method="GET">
Nombre: <input type="text" name="inputNombre">
Apellidos: <input type="text" name="inputApellidos">
</form>
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.
<form name="inicioSesion"
action="http://miweb.es/gestionaSesión.php"
method="GET">
Nombre: <input type="text" name="inputNombre"><br>
Apellidos: <input type="text" name="inputApellidos"><br>
Contraseña: <input type="password" name="inputPassword"><br>
Casilla de verificación: <input type="checkbox" name="checkboxVerificacion"><br>
Casilla de selección: <input type="radio" name="radioSeleccion"><br>
Selección de archivo: <input type="file" name="fileSubirArchivo"><br>
Botón de envio: <input type="submit" name="submitFormulario" value="Enviar">
</form>
Ya conocemos un buen puñado de controles de formularios, pero nos faltan todavía unos cuantos muy útiles y muy usados a diario, que no funcionan con la etiqueta input.
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.
Elemento option
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.
<form name="inicioSesion" action="http://miweb.es/gestionaSesión.php" method="GET">
Elige un color:
<select name="selectColor" id="idSelectColor">
<option value="rojo">Rojo</option>
<option value="verde">Verde</option>
<option value="azul">Azul</option>
<option value="naranja">Naranja</option>
<option value="rosa">Rosa</option>
</select>
</form>
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:
<form name="inicioSesion" action="http://miweb.es/gestionaSesión.php" method="GET">
Elige un color:
<select name="selectColor" id="idSelectColor">
<option value="rojo">Rojo</option>
<option value="verde">Verde</option>
<option value="azul">Azul</option>
<option value="naranja">Naranja</option>
<option value="rosa">Rosa</option>
</select>
<textarea name="textareaComentarios" id="idTextareaComentarios" cols="30" rows="10"></textarea><br>
<input type="submit" name="submitComentarios" id="idSubmitComentarios" value="Comentar">
</form>
Como puedes ver, el textarea es un control más grande que un input, donde podemos escribir varias líneas de texto y además podemos redimensionarlo con el ratón desde la esquina inferior derecha.