HTML5 – Un poco se sintaxis

Si ya habéis terminado de admirar la página que hicisteis en el tutorial anterior, quizás ha llegado el momento de conocer un poco mejor el HTML5

El lenguaje HTML5 esta formado por etiquetas que nos sirven para definir la información que contienen, o aportar mas información. Si bien, el lenguaje HTML no es sensible a mayúsculas y minúsculas, el w3c.org recomienda la utilización de minúsculas, y será la forma en que lo utilizaremos en este curso, y ademas, la forma que os recomendamos.

Las etiquetas

Las etiquetas pueden contener atributos, y pueden ser de tres tipos:

  • cerradas. Que tienen una etiqueta de inicio, y otra de fin <head></head>. Aunque muchas de estas etiquetas se consideran cerradas cuando se abre una nueva, durante este curso, vamos a mantener la total necesidad de cerrar todas las etiquetas que abramos. A la larga, esa costumbre mejora la compatibilidad entre navegadores….y muchos errores que nos va a costar encontrar.En las etiquetas cerradas, también tenemos que tener cuidado con el anidamiento de etiquetas, en el que deberemos ir cerrando las etiquetas exactamente, en el orden inverso al que se abrieron.
    Anidamiento erroneo Anidamiento Correcto
    <article>
    <h1>Noticias
    </article>
    </h1>
    <article>
    <h1>Noticias
    </h1>
    </article>
  • abiertas.Las etiquetas abiertas, son un objeto en si mismas,y no llevan etiqueta de cierre. Aunque no sea obligatorio, indicaremos al final la barra de cierre. Por ejemplo
    <br />

    Esta etiqueta que realiza un salto de linea es un objeto en si misma, por lo que no requiere etiqueta de cierre, sin embargo, le indicamos la “/” para indicar su cierre.

  • de comentarios. Este tipo especial, nos sirve para incorporar comentarios al código HTML, estos comentarios son ignorados por los navegadores, pero son de gran ayuda para que la persona que esta escribiendo el HTML o lo esta manteniendo, pueda seguir el código sin problemas. Siempre vamos a defender la necesidad de comentar correctamente un trabajo

Los atributos

Los atributos aparecen escritos dentro de la etiqueta de apertura; cada etiqueta puede tener o no, una lista de atributos especifica, por lo que es necesario conocer que atributos se pueden utilizar en que etiquetas

Aunque no sea obligatorio, los valores de los atributos los escribiremos siempre entre comillas (“”). Por ejemplo, si queremos añadir una imagen a la pagina, podemos hacer:

< img src=”ruta/a/la/imagen” />

La mayoría de comandos, se componen de pares nombre=valor, sin embargo, los atributos cuyos valores son booleanos (true,false), se pueden gestionar solo indicándolo cuando queremos su valor true, o ignorándolo si queremos el valor false; por ejemplo, si queremos que un campo de entrada aparezca como inactivo, podemos escribir

< input name=”cliente” disabled />

Mejorando nuestra pagina

A continuación, vamos a mejorar un poco la pagina que hicimos en el capitulo anterior .

Como primera medida vamos a declarar de forma explicita el idioma en que esta escrita la página, para ello, modificamos nuestra primera etiqueta (linea 2):

< html lang=”es”>

le hemos añadido el atributo “lang”, y le hemos asignado el idioma, aqui podéis encontrar la lista de iniciales para cualquier idioma, y aqui, teneis un “tocho” que creo que no vais a necesitar, pero…explica el funcionamiento del sistema de etiquetas de idiomas, y regiones

Nuestro head

En nuestro head,  hemos dicho que ademas del titulo, podemos indicar enlaces a nuestra hoja de estilos, o directivas para el navegador, pues eso:

charset=”utf8″ />

le indicamos al navegador como esta configurado nuestro fichero, para que se puedan interpretar directamente los caracteres especiales como ñ, ç, o acentos.

Tambien se pueden indicar otros “metas” orientados en principio a mejorar el posicionamiento en buscadores, aunque hoy es algo que no tiene ningún valor. Son del estilo:

name=”description” content=”la descripcion de la pagina” />

name=”keywords” content=”palabra1 palabra2…” />

otro valor del atributo “name”, nos sirve para pasar instrucciones a los buscadores

  • Mostrar en resultados y seguir los enlaces, o no se pone, o se indica:

name=”robots” content=”index, follow”/>

  • No mostrar en resultados y no seguir enlaces:

name=”robots” content=”noindex, nofollow”/>

Si queremos que la página que estamos mostrando se vuelva a cargar al cabo de unos minutos, o queremos hacer que se cargue otra, podriamos utilizar otro “meta”

content=”30, url=nuevaPagina.html”/>

Con este meta, al cabo de 30 segundos de estar mostrando esta pagina se cargaria la pagina “nuevaPagina.html”

Lo que si podemos hacer es crear una hoja de estilos, y establecer el enlace. Para ello, repetiremos los pasos que dimos para crear nuestro fichero index.html:

  • Click en el menú Archivo
  • Click en “Nuevo”
  • Boton derecho de ratón sobre “Sin titulo…” que ha aparecido, pulsamos en “Guardar, y tras comprobar que estamos en la carpeta “ejercicio1”, le ponemos como nombre de fichero “estilo.css”
  • Click en botón “Guardar”

Vamos a crear nuestra primera regla CSS, para ello, ahora que tenemos activo el fichero estilo.css, nos colocamos al lado del 1 que aparece, y escribimos:

html5-estilo

Si revisamos lo escrito, he utilizado el nombre de la etiqueta, osea que el estilo, se aplicará a la etiqueta “body” y sus descendientes, y las reglas son:

background-color: yellow; Aplicar color de fondo “yellow”
font-family: Arial, Helvetica, sans-serif; Tipo de fuente a utilizar , se indican varios por si uno no existe, se utilice el siguiente
color: black; Color a utilizar en los fuentes “black”

luego, vamos a index.html y allí, en la zona de head, le añadimos el enlace al fichero en donde hemos dejado nuestra regla:

<link rel=”stylesheet” href=”estilo.css”/>

Para eso, utilizo la etiqueta link, que me permite enlazar ficheros, le indico el uso, con el atributo “rel“, y por ultimo, en “href” le indico la ruta en donde se encuentra el fichero, y en este caso, por comodidad, lo hago relativa a la posición del fichero, como esta al lado mismo de index.html, solo tengo que indicar el nombre “estilo.css

2014-08-12_20h27_41

 

Si pulsais ahora el boton para ver la pagina en el navegador

2014-08-12_13h07_05vereis que, contra todo pronostico, habeis conseguido que la pagina se vea un poco peor que antes…mucho no la hemos mejorado.

De cualquier forma, os puedo adelantar que en donde hemos utilizado nombres de color, podemos utilizar notacion hexadecimal como #000000 para el negro, y #ffffff para el blanco, teniendo en cuenta que;

  • las dos primeras letras son para la cantidad de rojo
  • las dos segundas letras son para la cantidad de verde
  • las dos ultimas letras son para la cantidad de azul

y como son número hexadecimales de byte, solo pueden ir de oo a ff

Os ha gustado?, bueno, ahora en sencillo. Si queréis  crear cualquier color, lo podéis conseguir con una mezcla de rojo, verde y azul, y aquí la mezcla puede ir de o a 255, por lo que en vez del nombre de color, también podéis decir:

  • rgb(255,0,0) para conseguir un rojo puro
  • rgb(0,255,0) para conseguir un verde puro
  • rgb(o,o,255) para conseguir un azul puro
  • rgb(100,100,100) para conseguir un gris
  • rgb(0,0,0) para un negro
  • rgb(255,255,255) para un blanco

y cualquier combinación de valores intermedios para el resto de colores.

Ahora si que podéis empezar a conseguir una combinación de colores que os guste.

En el siguiente capítulo, empezaremos a trabajar con las etiquetas que establecen la diferencia en HTML5, las que definen el contenido y valor de los datos, las que nos van a permitir definir la estructura semántica.

 

Acerca de Miguel Garcia

Programador, Desarrollador web, Formador en distintas areas de informatica y director de equipos multidisciplinares.
Esta entrada fue publicada en Desarrollo Web, Formacion, HTML5 y etiquetada , . Guarda el enlace permanente.

Una respuesta a HTML5 – Un poco se sintaxis

  1. Pingback: HTML5 – Empezamos a codificar | Recursos para formacion

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.