Selector de etiquetas: HTML
Editando la página
Es un diseño muy simple y en esta ocasión vamos a escribir todo el código HTML completo, es decir, vamos a colocar los elementos (div, button, span, ...) con los atributos class que sean necesarios.
Si al escribir el script lo vemos necesario añadiríamos argumentos nuevos.
Con el boceto de la página en la mano comenzamos a escribir los bloques que creamos conveniente, recuerda con sus clases.
El esquema de la página lo puedes tener almacenado en una especia de plantilla para no tener que escribirlo cada vez. Es más práctico.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Selector de etiquetas</title>
</head>
<body>
</body>
</html>
Vamos a colocar en un contenedor la imagen, barras de etiquetas y botón. Como ves en el boceto es una distribución en una columna
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Selector de etiquetas</title>
</head>
<body>
<section class="contenedor">
<div class="imagen">
<img src="muestra.png" alt="muestra">
</div>
<div class="tagsAsig">
</div>
<div class="tagsDisp" >
<span>tag1</span>
<span>tag2</span>
<span>tag3</span>
<span>tag4</span>
</div>
<button class="btnEnviar">Enviar</button>
</section>
</body>
</html>
La aplicación va dentro de una section a la que asignamos la clase contenedor
El primer elemento será un bloque para colocar la imagen, también requiere su clase, queremos la imagen centrada, esta clase es imagen
A continuación vemos un bloque para las etiquetas asignadas a la imagen, le asignamos la clase tagsAsig. Este bloque alojará a las etiquetas y necesitará un estilo y también deberá ser usado por Javascript.
El bloque con lass tagsAsig inicialmente está vacío, la imagen no tiene etiquetas asignadas
El siguiente bloque va a ser el de las etiquetas disponibles, como también necesita un estilo y será usado por el escript, le asginadmos una clase tagsDisp.
El bloque de etiquetas disponibles contiene las etiquetas que podemos asignar dentro de sendos span. A estos span podríamos asignarles una clase, pero vamos a seleccionarlos a partir del bloque padre.
Finalmente colocamos el botón para el envio de los datos recogidos. Le colocamos su clase, porque necesita un estilo y debe ser usado por el script
Una última cuestión los bloques de etiquetas asignadas contienen dos partes: texto de la etiqueta y botón de eliminación
<div>
<span>Tag4</span>
<button>x</button>
</div>
El botón de eliminar etiqueta puede ser un icono en lugar de la letra x, he colocado la letra por simplicidad.
No olvides linkar el archivo de estilos en la sección head y el archivo de script (tags.js) justo antes del cierre de la etiqueta body.
<link href="tags.css" rel="stylesheet" type="text/css">
. . .
. . .
<script src="tags.js"></script>
</body>
Comentarios
En esta sección hemos completado la parte HTML del proyecto.
Escribe el código en tu editor y guárdalo con el nombre tags.html
Si lo abres con el navegador te encontrarás con una página que no se parece en nada a la que queremos construir
Solo vas a ver el contenido,. no la parte de diseño que debemos construir con los estilos CSS.