¡Descarga HTML-CSS Características avanzadas y más Guías, Proyectos, Investigaciones en PDF de Diseño y Desarrollo Web solo en Docsity!
Características avanzadas de HTML y CSS
Características avanzadas
En esta etapa, que ya somos capaces de crear sin problemas un sitio web sencillo. Vamos a descubrir nuevas características de HTML y CSS, que pueden considerarse un poco más avanzadas (y por lo tanto más complejas).
Tablas
Esenciales para la organización de la información, las tablas son un poco difíciles de construir en HTML. En efecto, tendrás que incorporar nuevas etiquetas HTML en un orden específico.
Vamos a comenzar por la construcción de cuadros básicos, entonces los complicaremos con: fusión de celdas, división de celdas en varias secciones... También descubriremos las propiedades de CSS relacionadas con tablas, que nos permiten personalizar su apariencia.
La primera etiqueta es . Es esta etiqueta la que se usa para indicar el principio y el fin de una tabla. Esta etiqueta es de bloque, por lo que debe ser colocada fuera de un párrafo.
Código HTML
Este es un párrafo previo a la tabla.
Este es un párrafo al final de la tabla.
¿Y que se escribe dentro de la tabla?
Entonces prepárate para experimentar una avalancha de nuevas etiquetas. Para iniciarla sin problemas, hay dos nuevas etiquetas muy importantes:
: indica el comienzo y el final de una línea de la tabla; : indica el inicio y el final de los contenidos de una celda.
En HTML, un cuadro se construye línea por línea. En cada fila (), se muestra el contenido de las celdas individuales ().
Básicamente, una tabla se construye como en la siguiente figura:
Por ejemplo, si quiero hacer una tabla con dos filas, con tres celdas por línea (por lo tanto tres columnas), tendrías que escribir lo siguiente:
Código: HTML
Carmen 33 años España
Miguel 26 años Estados Unidos
El resultado sería el siguiente:
Carmen 33 Años España Miguel 26 Años Estados Unidos
Una tabla sin CSS parece vacía. Y sólo tienes que añadir los bordes, es muy simple, ya conoces el código CSS correspondiente.
Código CSS
td / * Todas las celdas de la tabla ... * / { border: 1px solid negro; / * tienen un borde de 1 píxel * / }
________________________________________________________________
Carmen 33 años España
Miguel 26 años Estados Unidos
El encabezado de la fila es muy fácil de reconocer por dos razones:
- las celdas etiquetadas con en lugar del usual;
- es la primera línea de la tabla (es una tontería, pero debe especificarse).
Como el nombre de las celdas es un poco diferente en la cabecera, en necesario pensar en el CSS para decirle que se aplica borde en las celdas normales y la cabecera.
Código CSS
table { border-collapse: collapse; } td, th /* Poner borde en td y th */ { border: 1px solid black; }
Como puedes ver en la figura siguiente, el navegador pone en negrita el texto de la celda de cabecera. Esto es lo que suelen hacer de forma general los navegadores, pero si lo deseas, puedes cambiar esto a golpe de CSS: cambiar el color de fondo de las celdas de cabecera, fuente, borde, etc.
________________________________________________________________
Normalmente, todas las tablas deben tener un título. El título permite al visitante saber rápidamente el contenido de la tabla. Nuestro ejemplo se compone de una lista de personas, sí, pero ¿y qué? ¿qué significa eso? Sin título, estamos un poco perdidos. Afortunadamente, existe la etiqueta .
Esta etiqueta se coloca al principio de la tabla, justo antes de la cabecera. Es ella quien tiene el título de la tabla (figura siguiente):
Código HTML
Pasajeros del vuelo Murcia-Madrid
Nombre Edad País
Carmen 33 años España
Miguel 26 años Estados Unidos
Ten en cuenta que puedes cambiar la posición del título con la propiedad CSS caption-side que puede tomar cuatro valores:
top: el título se coloca encima de la tabla (por defecto); botton: el título se coloca por debajo de la tabla.
Tablas estructuradas
Aprendimos a construir pequeñas tablas simples. Estas tablas pequeñas son suficientes en la mayoría de los casos, pero no sé qué necesidades tienes de hacer tablas más complejas. Vamos a explorar dos técnicas específicas:
Para tablas grandes, es posible dividirlas en tres partes:
Pasajeros del vuelo Madrid-Murcia
Nombre Edad País
Carmen 33 años España
Miguel 26 años Estados Unidos
Francisco 43 años Francia
Martina 34 años Francia
Jonathan 13 años Australia
Xu 19 años China
No es obligatorio el uso de estas tres etiquetas (, , ) en todas las tablas. De hecho, lo va a usar, especialmente si la tabla es lo suficientemente grande y es necesario para organizarla con mayor claridad. Para las "pequeñas" tablas, puedes mantener fácilmente
la organización más fácil de lo que vimos en principio.
Fusión en tablas
En algunas tablas complejas, tendrás que "fusionar" las celdas entre sí. ¿Un ejemplo de la fusión? Mira la tabla en la siguiente figura, que proporciona una lista de películas y programas e indica a quienes van dirigidas.
En la última película, se ve que las celdas se fusionan: se convierten en una. Este es exactamente el efecto buscado. Para fusionar, agregamos un atributo a . Debes saber que hay dos tipos de fusión:
- Fusión de columnas : esto es lo que he hecho en el ejemplo. La fusión se realiza horizontalmente. Usamos el atributo colspan.
- Fusión de líneas : dos líneas se agrupan. La fusión se llevará a cabo verticalmente. Usamos el atributo rowspan.
Como sabes, se ha de proporcionar un valor para el atributo (colspan o rowspan). Debes indicar el número de las celdas que se fusionan. En nuestro ejemplo, fusionamos dos celdas: de la columna "Edad” y de la "Nación". Por lo tanto, vas a escribir:
Código HTML
Código HTML que me permite lograr la fusión correspondiente a la tabla anterior:
Pasajeros del vuelo Murcia-Madrid
Nombre Edad
4 5
Resultando que las celdas se fusionan verticalmente
Resumen
● Una tabla se inserta con la etiqueta y la líneas se definen con la etiqueta .
● Cada línea contiene celdas (celdas normales) o celdas (encabezado).
● El título de la tabla se define con .
● Puedes agregar un borde a las celdas de la tabla con border. Para fusionar los bordes, se utiliza la propiedad CSS border-collapse.
● Una tabla puede ser dividida en tres secciones: (cabecera) (cuerpo) y (pie). El uso de estas etiquetas no es obligatorio.
● Puedes combinar celdas horizontalmente o verticalmente con colspan o rowspan.
● Debes indicar cuántas celdas deberán fusionarse.
________________________________________________________________
Formularios
Cualquier página HTML puede ser enriquecida con formularios interactivos que invitan a los visitantes a transmitir información: entrar texto, seleccionar entre opciones, confirmar con un botón... todo es posible.
Sin embargo, llegamos a los límites de HTML, ya que entonces es necesario analizar la información que el visitante aportó y esto no se puede hacer en HTML. Como veremos, los resultados del tratamiento se deben hacer en otro lenguaje, como PHP.
Mientras tanto, tenemos un gran número de nuevas etiquetas HTML para descubrir. Bienvenido al maravilloso mundo de la formularios, un mundo donde los botones, casillas de verificación y listas desplegables viven en armonía (bueno, casi).
Crear un formulario
Cuando tienes la súbita necesidad de insertar un formulario en tu página HTML, es necesario empezar a escribir las etiquetas . Esta es la etiqueta principal del formulario, permite indicar el principio y el fin.
Código HTML
Texto anterior al formulario
Texto en el interior del formulario
Texto posterior al formulario
Ten en cuenta que es obligatorio poner etiquetas de tipo bloque (como
) dentro del formulario si deseas incluir texto.
Para la estructura de base, debes prestar atención: tengo que decir que no es fácil porque estamos en el límite del código HTML.
Vamos a poner un ejemplo para aclarar las cosas. Supongamos que el visitante viene a escribir un comentario en un formulario, como por ejemplo un mensaje que te gustaría publicar en los foros. Este mensaje debe ser enviado al propietario de la web, y ser visualizado por los visitantes.
Estos son el problema, o problemas que se plantean:
________________________________________________________________
texto, botones y casillas de verificación en la página web. Esto es lo que vamos a ver ahora.
Campos de entrada básicos
De vuelta a lo concreto. Vamos a revisar las diferentes etiquetas HTML para ingresar texto en un formulario. Debes saber que hay dos cuadros de texto diferentes:
- Cuadro de texto de una sola línea: Como su nombre indica, no se puede escribir más que una sola línea. Se utiliza para introducir texto corto.
- Cuadro de texto multilínea: Este cuadro de texto permite escribir una gran cantidad de texto en varias líneas, por ejemplo un ensayo de la utilidad de HTML en los países en desarrollo del Asia Sudoriental (solo es sugerencia).
- Cuadro de texto de una sola línea
La siguiente figura muestra lo que parece ser un cuadro de texto de una sola línea.
Para insertar un cuadro de texto en una línea, vamos a utilizar la etiqueta . Encontraremos etiquetas varias veces más adelante en este capítulo. En cada caso, es el valor del atributo type el que cambiará.
Para crear un cuadro de texto a una línea, se debe escribir:
Código HTML
Todavía no es suficiente: tenemos que dar nombre al cuadro de texto. Este nombre no aparece en la página, pero será posteriormente necesario. De hecho, esto permitirá (por ejemplo PHP) reconocer de dónde viene la información: sabes el texto y el nombre del visitante, dicho texto es la contraseña que se eligió, etc.
Para dar un nombre a un elemento de formulario, se utiliza el atributo name. Aquí, vamos a suponer que se pide al visitante su nombre:
Código HTML
________________________________________________________________
Estamos tratando de crear un formulario muy básico con nuestro campo de texto:
Este cuadro de texto es muy bonito pero si el visitante se cae, no sabe qué escribir. Este es precisamente el papel de :
Código HTML
Vuestro nombre :
Este código da exactamente el resultado que hemos visto en la figura anterior. Pero esto no es suficiente. Es necesario vincular la etiqueta a la caja de texto. Para ello, tenemos que dar un nombre al cuadro de texto, no con el atributo name, pero si con el atributo id (que puede ser utilizado en todas las etiquetas).
Para vincular la etiqueta al campo, se le debe dar un atributo for que tiene el mismo valor que la id del campo. Se aprecia mejor en un ejemplo:
Código: HTML
Vuestro nombre :
Algunos atributos adicionales
Puedes agregar otros atributos al para personalizar su funcionamiento:
- Puedes ampliar el campo con size.
- Puedes limitar el número de caracteres que se pueden escribir con maxlength.
usar un label que explica lo que es.
Código : HTML
¿Cómo piensas mejorar tu sitio?
Por defecto la zona para escribir es un poco pequeña. Afortunadamente, puedes cambiar el tamaño con
Áreas de entrada enriquecida
HTML5 añade muchas nuevas características relacionadas con los formularios. Nuevos tipos de campos han aparecido con esta versión. Es suficiente dar el atributo type de la etiqueta uno de los nuevos valores disponibles. Vamos a hacer un resumen rápido.
________________________________________________________________
Todos los navegadores todavía no conocen las áreas de entrada enriquecida. En su lugar, las versiones antiguas de los navegadores mostrarán un cuadro sencillo de una sola línea de texto (como si hubiera escrito type = "text"). Los nuevos navegadores pueden disfrutar de las últimas funciones, mientras que los primeros parecen un reemplazo adecuado de cuadro de texto.
- E-mail
Puedes pedir que se introduzca un e-mail:
Código : HTML
El campo parece idéntico a priori pero el explorador sabe ahora que el usuario debe ingresar una dirección de correo electrónico. Puede mostrar una indicación si la dirección introducida no es un e-mail.
- Dirección URL
Con type URL, puedes pedir que se introduzca una dirección absoluta (que suele empezar con http://):
Código: HTML
Se supone que los visitantes introducen una dirección. En los navegadores móviles se muestra como un teclado adaptado.
- Número de teléfono
Este campo está dedicado a la captura de números de teléfono:
Código: HTML
- Cualquier número entero
Este campo permite introducir un número entero:
Código: HTML
datetime : para fecha y hora (considerando el desplazamiento horario); datetime-local : para fecha y hora (sin manejo del desplazamiento horario).
Ejemplo:
Código: HTML
Como puedes ver, hay una opción, pero en la actualidad, pocos navegadores soportan este tipo de campo, excepto Opera.
- Búsqueda
Se puede crear un cuadro de búsqueda de la siguiente manera:
Código: HTML
El navegador decide cómo mostrar el campo de búsqueda. Así, se puede añadir una pequeña lupa al campo para indicar que se trata de un campo de búsqueda y eventualmente permite el almacenamiento de las últimas búsquedas por parte del visitante.
- Elementos de opciones
HTML ofrece una serie de opciones para utilizar en el formulario. Estos son los elementos que requieren los visitantes para elegir de una lista de posibilidades. Vamos a revisarlas:
casillas de verificación; áreas de opciones; listas desplegables.
Casillas de verificación
¿Crear una casilla de verificación? Nada más fácil. Vamos a volver a utilizar la etiqueta , esta vez especificando el tipo checkbox :
Código: HTML
Agregar un bien ubicado, y eso es todo.
Código: HTML
Elige los alimentos que vas a consumir:
Fritas
Carne
Epinacas
Ostras
Recuerda que debes dar un nombre diferente a cada casilla, esto permitirá identificar las que marque el visitante.
Finalmente, recuerda que puedes hacer que una casilla esté activada por defecto con el atributo checked:
Código HTML
Normalmente, cada atributo tiene un valor. En este caso, sin embargo, agregar un valor no es necesario: la presencia del atributo es suficiente para hacer comprender al ordenador que la casilla debe ser revisada.
Áreas de opciones
Las áreas de opciones permiten seleccionar una (y sólo una) de entre una lista de posibilidades. Se asemejan algo a la casillas de verificación, pero hay un pequeño
________________________________________________________________
