Comentarios en HTML
Conforme vamos escribiendo nuestro código HTML puede ocurrir que queramos anotar alguna puntualización, alguna advertencia, para posteriores revisiones del documento, bien para nosotros mismos, o bien para otros porque el documento lo compartimos con otras personas que también lo pueden editar.
Estos comentarios que queremos hacer, no van a ser visibles en la parte externa del documento.
Para ello emplearemos los caracteres <!-- de apertura y --> de cierre
<!-- Esto es un comentario -->
<!-- Si el comentario tiene varias líneas, es mejor escribir el símbolo de apertura en una línea única al principio, y el de cierre también en una línea única al final. De esta forma se facilita la lectura. -->
Comentarios en la hoja CSS
Del mismo modo, podemos considerar hacer comentarios que nos ayuden a futuras correcciones o comprensión del código empleado en la hoja de estilos.
En este caso, la sintaxis es diferente.
Empezaremos el comentario con una barra inclinada / luego un asterisco *, el comentario y, para cerrarlo, emplearemos el asterisco y la barra */.
/* Esto es un comentario */
/* Si el comentario tiene varias líneas, podemos escribirlo así. */
Ahora que ya conocemos el tema, podemos ver el código empleado en la actividad realizada en la página anterior con algún comentario para que veas el resultado.
En Internet no podemos poner documentos de texto (.txt) sin editar, que es lo que hubiera deseado. Hay un problema con los caracteres. Así que lo he convertido en pdf para poderlo visualizar correctamente.
Primero vemos la página web editada con miestilo.css
Acceso al documento pdf con el código comentado de la página html
Acceso al documento pdf con el código comentado de la hoja de estilos
Si en un documento declaramos un CSS interno, podemos hacer comentarios también dentro del estilo interno pero, en ese caso empleando los símbolos de los comentarios CSS.
Por ejemplo, veamos en un mismo documento HTML los dos tipos de comentarios:
<!DOCTYPE html>
<html lang = "es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/nuestro-estilo.css">
<title>HTML 5 y CSS 3</title>
<style>
/* Esto es un comentario en el CSS interno */
h1 {
font-family: cursive;
}
</style>
</head>
<body>
<!-- Esto es un comentario en el HTML -->
<h1>HTML 5 y CSS 3</h1>
...
</body>
</html>
Otra utilidad muy importante de los comentarios es que sirven para ocultar un fragmento de código según nos interese. Por ejemplo, la página nos da un error y no encontramos el punto en el que se produce dicho error, podemos ocultar un fragmento de código e ir haciendo pruebas de ensayo y error para dar con el fragmento conflictivo.
<body> <!-- El siguiente comentario oculta el código entre las etiquetas <p> y </p> --> <!-- <p>Texto para mostrar como se ocultaría este párrafo empleando las etiquetas correspondientes de los comentarios. Se puede emplear para cualquier fragmento de código con uno o varios elementos html. Los diseñadores web y los programadores lo emplean muy a menudo.</p> --> <p>Este párrafo ya no estaría oculto</p> </body> </html>
Validación del documento HTML
Ya hemos ido comentando en los vídeos, la herramienta Validator del W3C para para comprobar la corrección de nuestra escritura del código html. También hemos comentado, las tres formas de acceder a dicha corrección.
- A través de la URL. Primera pestaña: Validate by URI
- A través de la carga del archivo .html. Segunda pestaña: Validate by File Upload
- A través de pegar todo el código en el espacio proporcionado. Tercera pestaña: Validate by direct input
De esta forma tenemos la presencia continua de un "profesor" que va a corregir inmediatamente nuestra actividad.
Validación del documento CSS
El mismo servicio tenemos para la corrección de nuestra hoja de estilos. En esta ocasión, la página está disponible en español.
También en tres posibilidades:
- A través de la URL. Primera pestaña: Validar mediante URI
- Validar mediante Carga de un Archivo. Segunda pestaña
- Introduciendo el código CSS. Tercera pestaña: Validar mediante entrada directa
Redireccionamiento de una URL
Cuando empecé con el diseño de este curso, creé en mi ordenador una carpeta denominada cuaderno. Allí guardé la primera página a la que llamé index.html y lo subí a mi servidor.
Es una buena idea el llamar al primer documento index.html. De esta forma, no es necesario escribir el nombre del documento para que se abra. Bastará llegar con la URL hasta el nombre de la carpeta. El navegador ya sabe que si se llama index.html hay que empezar por ahí.
De esta forma, mi página inicial se encontraba en esta ruta: https://angelpuente.es/cuaderno
Con el paso del tiempo, he creído conveniente, modificar la URL, cambiar el directorio cuaderno por otro que dijese algo respecto del contenido que se iba a mostrar. Y, elegí, no sé si muy acertadamente, el nombre http5css3. Por un lado creo que está bien pero, por otro, igual es un poco largo... y poco amigable...
Ahora este curso se encuentra en esta URL:
https://angelpuente.es/html5css3
El caso es que tuve que cambiar la información que proporcionaba en algunos sitios web (por ejemplo en la descripción de los vídeos en Youtube) y tenía que hacer algo para que los visitantes que habían almacenado en sus favoritos la primera URL llegaran con facilidad a la segunda.
Esto es supersencillo.
Se hace con la meta etiqueta refresh que se coloca en la cabeza del documento, en el <head>. Con esta sintaxis:
<meta http-equiv="refresh" content="5; url=https://angelpuente.es/html5css3">
El dígito 5 hace referencia a los segundos de espera hasta que la URL se cambia. Si se pone 0 el cambio es inmediato. De todas formas, creo que está bien dejar un tiempo para que el visitante lea el mensaje de advertencia y se dé cuenta de lo que está pasando.
De momento, no he borrado ni el contenido de la antigua página inicial, ni las otras páginas que cuelgan de ella. Pero cuando pase un tiempo, borraré todos los archivos obsoletos y cambiaré la primera página vieja por una con el único contenido del mensaje y de la redirección.
Crear un favicon
El favicon es un pequeño logo que algunos sitios web muestran en las pestañas de los navegadores.
Hay muchos sitios web que proporcionan ayuda para crear este tipo de pequeños logos. Muchos programas gráficos permiten guardar cualquier imagen con la extensión .ico que es una de las formas de hacer que la imagen se muestre como deseamos. El tamaño tiene que ser muy pequeño (recomendable 32 x 32 píxeles) y la forma cuadrada. En el caso de este sitio, hemos subido al servidor una imagen denominada favicon.ico. La hemos guardado en la carpeta imag.
Este es el código a colocar en el <head> del documento.
<link rel="icon" type="image/x-icon" href="imag/favicon.ico">
Crear un código QR
Puede ser muy interesante publicitar nuestro sitio web con un código QR que permita pasar de una pantalla a otra. O del papel a un dispositivo electrónico sin necesidad de teclear ninguna URL.
Yo he creado uno para este sitio.
Con la herramienta https://qr.io
Es gratuito. Ofrece un montón de opciones de diseño. Solo hay que proporcionar la dirección de correo electrónico para poder empezar a usar el servicio.
