DISEÑO WEB: HTML59 min read

Aunque al principio pueda dar miedo, programar puede ser muy sencillo. Al final es un idioma más que tenemos que aprender, y de igual manera que una persona que aprende inglés tiene más fácil aprender un nuevo idioma, nosotros vamos a aprender HTML5 y CSS3, lo que nos dará más facilidad para aprender en el futuro PHP, Javascript u otro lenguaje de programación que queramos. Vamos entonces a conocer qué es eso de los lenguajes de programación y más concretamente los lenguajes de marcado.

LENGUAJES DE MARCADO. A principios de los ’90, el físico nuclear Tim Berners-Lee del CERN definió el lenguaje HTML (Hypertext Markup Language, “Lenguaje de marcas hipertextuales”) como un subconjunto de SGML y creó algo más: el  World Wide Web,  también conocido como la Web, que es un sistema de documentos de hipertexto y/o hipermedios enlazados entre si y accesibles desde internet.

¿Qué son las abreviaturas con «ML»? Casi todas las siglas en la web que tienen un «ML» se trata de un «lenguaje de marcado o de marcas.» Los lenguajes de marcado son los lenguajes que conforman la web.
Hay muchos lenguajes de marcas diferentes. Nosotros vamos a centrarnos en el HTML pero hay muchos más. Tres son los que se deben tener en cuenta si estás haciendo el diseño de una página web o desarrollo: HTML, XML y XHTML. Pero todo evoluciona y se ha simplificado en HTML5. Vamos a verlo.

¿Qué es un lenguaje de marcas?

 Un lenguaje de marcas es un lenguaje que anota el texto de modo que el ordenador puede manipularlo.  La mayoría de los lenguajes de marcas son legibles debido a que las anotaciones están escritas de forma tal que se puedan distinguir de los textos. Por ejemplo, con HTML las etiquetas de formato son  <  y  > . El texto que aparece dentro de uno de esos delimitadores se considera parte del lenguaje de marcado y no parte del texto anotado. Por ejemplo:

<p>Este es un párrafo escrito en HTML</p>

El marcado se convierte en un lenguaje cuando las reglas están codificadas en torno a cómo escribir y usar el marcado.  Ejemplo estudiante.  Pero la mayoría de los lenguajes de marcas se definen por una autoridad externa (World Wide Web Consortium) para permitir su uso por muchas personas diferentes.

HTML o HyperText Markup Language es el lenguaje de la web. Casi todas las páginas web están escritas en HTML. Él define la forma en que las imágenes, multimedia y texto se muestran en los navegadores web. Incluye elementos para conectar los documentos (hipertexto) y hacer que los documentos web sean interactivos.

ESTRUCTURA Y CONTENIDO

Después de la introducción vamos a empezar a ver cómo es un archivo HTML5 por dentro. Lo primero que tiene es una indicación que le dice al navegador qué documento es. Así le decimos al navegador (Chrome, Mozilla, Opera, Safari, Explorer, etc.) que es un documento en lenguaje HTML nivel 5, con lo que estará preparado para reproducir cada etiqueta y orden que se le mande: <!DOCTYPE html></html>

Justo después, le sigue una cabeza y un cuerpo, llamados<head> y <body>. Aquí entramos ya en la estructura pura del documento. Este es su esquema básico:

<!DOCTYPE html>
<head>
</head>
<body>
</body>
</html>

El <head> es necesario para meter la  meta información  de la página web, es decir  información que el usuario normal no ve, pero es esencial para su funcionamiento.  También aquí suelen enlazarse los archivos de hojas de estilo o de javascript.

En el <body> va la estructura de toda la página, todos los elementos que el usuario ve y que contienen la información.

Para crear un archivo html que reproduzca bien el navegador, vamos a volver a recordar de nuevo el concepto de cajas dentro de cajas.
La caja principal es la etiqueta <html>Aquí dentro va metida toda la web. Cualquier elemento que quede fuera,</html>no sirve ni se verá.

Dentro de la sección del cuerpo (<body> ... </body>) utilizaremos etiquetas para crear el contenido visual de la web. Estas etiquetas nos permitirán ir añadiendo textos, imágenes, encabezados, tablas, etc. para componer el diseño de la web. En primer lugar veremos las etiquetas más básicas que se suelen utilizar, estas son:

  • <h1></h1> a <h6></h6>: encabezados o títulos del documento con diferente relevancia, siendo<h1> la cabecera de mayor nivel.
  • <p></p>: definición de un párrafo.
  • <br/>: salto de línea.
  • <b></b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta <strong></strong>).
  • <i></i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta <em></em>).
  • <s></s>: texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta <del></del>).
  • <u></u>: texto subrayado.
  • <center></center>: texto centrado.
  • <pre></pre>: texto preformateado, respeta los espacios y saltos de línea.
  • <sup></sup>: Superíndice.
  • <sub></sub>: Subíndice.
  • <blockquote></blockquote>: Indica una cita textual, se representa como un párrafo indexado con respecto al margen.
  • <hr/>: Línea horizontal, usada, por ejemplo, para separar diferentes secciones.
  • <!-- comentario -->: Comentarios en HTML. El texto del comentario no será visible en el navegador.
  • <span></span>: Esta etiqueta no aplica ningún formato por si misma, sino que provee una forma de definir un estilo o formato a un trozo de texto. Se utiliza junto con una hoja de estilo. Por ejemplo, lo podemos utilizar para marcar palabras en algún color o con algún formato especial.

Ahora ya podemos hacer el primer ejercicio, que consiste en insertar este código de manera manual, para ver y entender cómo funciona. Para ello, vamos a trabajar con el software gratuito Atom. Descargadlo aquí.

Este es el texto que debéis copiar tal cual. Además, debéis guardar el archivo con el nombre «index.html» para que funcione y el programa os haga sugerencias sobre el código:

El resultado final debe ser este: 🙌✊👐💪🚀… 😭

Una vez hecho esto, vamos a insertar una imagen y un hipervínculo para completar el ejercicio.

  • <img>: es la etiqueta de imagen, pero no puede ir sola, porque así no mostraría nada. Debe ir con la siguiente estructura: <img src="imagen.jpg" width="636" height="354">
    Así sí nos mostraría la imagen llamada «imagen.jpg» con las medidas de 636 píxeles de ancho (width en inglés) y 354 píxeles de alto (height en inglés). Las siglas src se refieren a source (origen, en inglés).

Un dato muy importante es  la ruta.  La ruta es como le indicamos al navegador dónde está nuestra imagen. Por ejemplo, podemos tener nuestra foto en el ordenador, así que lo hacemos así:
<img src="documentos/fotos/imagen.jpg" width="636" height="354">
La secuencia documentos/fotos/imagen.jpg, indica que nuestra foto está en una carpeta que se llama fotos, dentro de otra que se llama documentos. Eso es la ruta.

Por otro lado, podemos indicar una ruta remota, como puede ser la siguiente:
<img src="http://www.avesypajaros.com/Imagenes/cabeza-de-un-agaporni.jpg" width="636" height="354">
Así, hemos incluido una foto en nuestra web sin necesidad de tenerla en nuestro servidor u ordenador.

  • Los hipervínculos son enlaces a otras páginas, puntos de una página (diferentes alturas), descarga de archivos, etc. Es decir, es la respuesta a un click en un elemento concreto de la web. Para insertarlos en nuestra página debemos ponerlo entre las etiquetas <a></a>. Para definir un texto de enlace y un destino: <a href="http://www.web-de-destino.com">Este es el texto que veremos en pantalla</a>

METAdatoS

Ya hemos visto antes que utilizamos un metadato para que nuestra web tenga todos los caracteres especiales del alfabeto latino, que es el <meta charset=UTF-8>. Vale, pues ahora vamos a añadir algunos que harán que la web tenga mejor presencia cuando la busquemos por ejemplo en Google, y sobre todo mejor posicionamiento. No necesariamente más arriba, pero sí en ordenada en su sector. Aquí tenéis más info.

Para ello vamos a descargar estos dos archivos y usarlos en todas nuestras páginas siempre que empecéis un ejercicio o trabajo:

Aquí un PDF con varias páginas describiendo sentencias de HTML, CSS y más opciones muy útiles. Este archivo forma parte del curso de Doméstika de Introducción al Diseño Web impartido por Javier Usobiaga Ferrer que os recomiendo hacer si podéis:

Pero no podemos diseñar páginas web en HTML5 sin más. Es imprescindible conocer nuestro segundo idioma para hablarle al navegador, y en este caso, para decorar/diseñar nuestra web gracias al CSS3.

Fuentes: um.es / blog.utp.edu.co / ajgallego.gitbooks.io / deteresa.com / 40defiebre.com / deteresa.com/etiquetas-meta/

Este sitio web utiliza cookies para tengas la mejor experiencia de usuario. Si continúas navegando estás aceptándolas y también nuestra política de cookies. Más info aquí.

ACEPTAR

Aviso de cookies