Etiqueta Meta Charset: Acentos

Para que el lenguaje HTML 5 represente bien los acentos y otros caracteres debemos escribir la etiqueta:  <meta charset ="utf-8">   justo debajo de head. De este modo  el navegador conocerá la codificación de caracteres utilizada, antes de que comience a procesar nada.

Además, dentro de los símbolos de la etiqueta de apertura html debemos indicar los parámetros "lang" de "language" (idioma, en inglés) y "dir", de "direction" (refiriéndose a letras), como vemos en la siguiente imagen:

Haciendo esto nos aseguramos que la página se ve correctamente.
En HTML5 la codificación por defecto si no se especifica nada es UTF-8.

En HTML 4 la codificación utilizada por defecto es ISO-8859-1 (latin-1). Con esta codificación todos los caracteres que no aparezcan en el alfabeto latino deberán ser escritos como entidad HTML. Por ejemplo,

• &aacute; para la á,
• &ntilde; para la ñ.

Etiqueta SVG para dibujos vectoriales

Una de las principales actividades en programación gráfica es dibujar programando. Igual que el álgebra representa por escrito figuras geométricas, la programación permite hacer esto con otros idiomas que entienden los ordenadores.

Para ello podemos utilizar las etiquetas "svg" y "canvas".

Vamos a explicar la etiqueta "svg", siguiendo el siguiente tutorial. SVG son las siglas de Scalable Vector Graphics. Los vectores escalables, se recalculan en cada zoom o movimiento del ratón, por lo que siempre se verán nítidos, a diferencia de las imágenes ráster o de mapas de bits, cuya visualización depende de la resolución. Aquí se trata de vectores, funciones matemáticas y no pierden nitidez.

La etiqueta <svg> crea un espacio de dibujo, un lienzo, dentro de la página, y permite dibujar figuras vectoriales en HTML5. La escribimos dentro del Body. Entre las etiquetas de apertura y cierre de <svg> metemos otras etiquetas de las figuras que queremos representar, cada una con sus características, como vemos en la siguiente imagen:

que en el navegador se verá como sigue:

Elemento Ruta (svg Path)

El elemento <ruta> se utiliza para definir una trayectoria. Los comandos siguientes modifican la trayectoria:
M  = moveto
L   = lineto
H   = horizontal lineto
V   = line to verticales
C   = curveTo
S   =  curveTo suave
Q   =  curva cuadrática de Bézier
T   = suave curveTo cuadrática de Bézier
A   = arco elíptico.
Z   = closePath.

Por ejemplo:

Las curvas Bézier se utilizan para modelar curvas suaves que se pueden ampliar de forma indefinida. En general se seleccionan dos puntos extremos y uno o dos puntos de control. Si sólo hay un punto de control se llama curva "cuadrática" .
En la imagen siguiente vemos en azul una curva Bezier con A y C como puntos inicial y final y B punto de control.

Bases de programación

Podríamos asimilar la programación como un idioma, con varios lenguajes:

• lenguaje HTML: crea la estructura, los apartados, el sitio necesario para poner cosas ( < > )
• lenguaje CSS: crea la apariencia de lo que pongamos ( [  ] )
• lenguaje JavaScript (no confundir con Java): que crea la funcionalidad y el dinamismo de lo que pongamos ({ ;})

Para programar necesitamos crear un archivo. Lo haremos con cualquier programa como el "bloc de notas", el "notepad ++",  el "Visual Studio Code" entre otros. De estos tres el visual Studio Code es el más completo. Diferencia los elementos que escribamos con colores, automáticamente, facilitando la comprensión de la estructura. El archivo creado lo guardamos con el nombre deseado, seguido de la extensión ".html". Este archivo lo podemos abrir con el Visual Code por un lado, para editarlo y también podemos abrirlo con el navegador Internet Explorer, o Google Chrome, o Mozilla Firefox, para ver cómo se ve lo que programamos.

Lenguaje HTML:

Consiste en indicar al programa qué hacer, con comandos metidos dentro de "etiquetas", es decir, comandos escritos entre los símbolos "menor qué " y "mayor qué" (<  >). Toda etiqueta debe abrirse "<comando>" y cerrarse, es decir "</comando>", con la barra invertida antes del comando y dentro de los símbolos < >.

La estructura básica de un archivo vendrá dada por 3 etiquetas: html, head, body.
<html>
       <head>
       </head>
  
      <body>
      </body>
</html>

Algunas etiquetas de comandos fundamentales son:

• Antes de la etiqueta "html" se suele poner la etiqueta <!DOCTYPE html> que es sólo un comentario.
• <title>: Dentro de Head, nombre de la pestaña del navegador.
• <h1>: Dentro de Body, las etiquetas h1 a h7 son títulos y subtítulos dentro de la página del navegador.
• <p>: Incrementa el espaciado entre líneas, creando párrafos.
• <img src="imagen.ext">: Inserta una imagen de la misma carpeta donde esté el archivo. Esta etiqueta no necesita cierre. "src" signfica source, fuente.
• <a href=" ">: es un hipervínculo. Entre las comillas de la etiqueta de apertura del comando, ponemos la dirección http del enlace. Entre las etiquetas de apertura y cierre, ponemos la palabra que queremos que sea el hipervínculo: <a href=" "> hipervínculo </a>. Si queremos que el hipervínculo no sea una palabra, sino una imagen, basta sustituir la palabra entre las etiquetas, por la etiqueta de imagen <img src="imagen.png">.