HTML: fabricando páginas web

¡Bienvenidos un día más a un nuevo rootie queridos amigos! Esta semana voy on fire (así en inglés porque soy un poser de cuidao) y he decidido que aparte de hacer el post de Programación Orientada a Objetos iba a salirme un poco de mi tónica de hablar sobre sistemas y tecnologías de backend y marcándome un órdago (sea lo que sea, yo soy mas de guiñote y tute) hoy os vengo a hablar de el Lenguaje de Marcas por excelencia, HTML.

HTML son las siglas en inglés de Hypermark Text Markup Language (lenguaje de marcas de hypertexto) y es el standard para la construcción de páginas y aplicaciones web. Junto a CSS  Javascript son la piedra angular de las tecnologías de la World Wide Web (o como dirían algunos, la interné).

El internet

Si, pero… ¡como que internet esta hecho de HTML!

Espera, espera, espera… Te estarás preguntando que cómo que HTML es uno de los pilares básicos de internet, pues asī es, utilizando elementos HTML, imágenes, y algún que otro elemento es como vamos a construir nuestras páginas web. Cada archivo que creamos utilizando HTML será un documento estructurado, esto es un documento electrónico que contiene código incrustado y que siguiendo el standard, da sentido estructural al documento en si y a sus distintas partes, dotando además de semántica a los textos como títulos, cabeceras, párrafos, enlaces, y otros elementos.

Estos archivos son enviados por los servidores web hasta los exploradores  (Google Chrome, Firefox, Internet Explorer, etc) y estos renderizan el contenido multimedia de la página. Ademas cualquier documento HTML, puede incluir programas escritos en lenguajes de scripting como Javascript, que puede afectar al comportamiento de la página, así como CSS, que afecta al diseño.

De lo que se compone.

HTML como hemos mencionado, es un lenguaje de marcas, este se componen de varios componentes, entre ellos las etiquetas o tags y sus atributos, los tipos de datos basados en caracteres (string, int, boolean, etc), referencias de caracteres o referencia de entidades(un conjunto de letras y/o símbolos para representar caracteres especiales como & o amp para el &, etc).

Respecto a las etiquetas, que es lo que en un primer momento nos va a acercar al desarrollo de una página web, cabe destacar que estos suelen venir en parejas tal que así:

head-body-html-tags
El tatuaje de Susan…

La primera etiqueta, suele denominarse, etiqueta de inicio o apertura y la segunda etiqueta de fin o de cierre. Además también podemos encontrarnos elementos que representan un elemento vacío, y que no necesitan una etiqueta de fin, como puede ser la etiqueta de imagen.

Otro componente importante es la Declaración de tipo de documento que establece como una página HTML ha de renderizarse. 

Una página simple de HTML, se vería así:

En el ejemplo anterior, el texto que se encuentra entre las etiquetas <html> y </html> describen la pagina web, y el texto entre las etiquetas <body> y </body> es la parte visible de la página. Y por último<!DOCTYPE html> es la declaración para indicar que vamos a utilizar HTML5, si esta declaración no esta presente, la gran mayoría de los navegadores, es capaz de renderizar la página, siguiendo los estándares del W3C.

Elementos

Los documentos HTML, siguen una estructura de elementos anidados utilizando etiquetas. Generalmente el alcance de un elemento esta indicado por sus etiquetas de inicio y fin. Dentro de dichas etiquetas, se puede incluir una mezcla de texto y otras etiquetas, lo que como ya he mencionado, crea la estructura anidada. Esto se ve claramente en el anterior ejemplo en la linea 7, donde podemos observar el elemento <p> (párrafo) un texto y el elemento <a> (link) con su texto correspondiente.

Las etiquetas de inicio (nunca las de fin), también pueden incluir atributos. Estos se usan para diferentes propósitos, como identificar una sección en la web, enlazar un elemento con su estilo CSS y para algunas etiquetas, como <a> su atributo href indica donde debe redireccionarnos nuestro navegador. Los atributos normalmente son parejas de nombre – valor, separados con un = y usando comillas dobles o simples para indicar el valor del mismo.

Algunos elementos como el salto de linea <br>, no permite ningún tipo de contenido, es decir, es una etiqueta sin etiqueta de fin y que no puedes agregarle ningún texto o atributo.

nein-etiqueta-br

<br>&nbsp;</br>

Elementos básicos HTML.

La lista de etiquetas que conforman HTML es bastante, extensa y no voy a detallarla entera (porque, ademas, posiblemente no me sepa ni el 75% de memoria), así que os dejo una lista (que he copiado de la Wikipedia) y un link a W3School que tienen una guía de referencia muy completa.

  • <html>: define el inicio del documento HTML
  • <script>: incrusta un script en una web, o puede llamar a uno mediante src="url del script".
  • <head>: define la cabecera del documento HTML. Dentro de la cabecera podemos encontrar:
    • <title>: define el título de la página.
    • <link>: para vincular el sitio a hojas de estilo o iconos.
    • <style>: para colocar el estilo interno de la página; ya sea usando CSS u otros lenguajes similares.
    • <meta>: para metadatos como la autoría, el lenguaje o la codificación.
  • <body>: define el contenido principal o cuerpo del documento. Dentro podemos encontrar numerosas etiquetas como por ejemplo:
    • <h1> a <h6>: encabezados o títulos del documento con diferente relevancia.
    • <table>: define una tabla.
      • <tr>: fila de una tabla.
      • <td>: celda de una tabla (debe estar dentro de una fila).
    • <a>: hipervínculo o enlace.
    • <div>: división de la página.
    • <img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen.
    • <li><ol><ul>: etiquetas para listas.

Entonces… ¿Cómo podemos hacer una web?

Efectivamente, de hecho para hacer una página web, no necesitas mas que un editor de texto, mondo y lirondo, el famoso bloc de notas, es más que suficiente. Si por ejemplo en un nuevo documento del block de notas, pegas el ejemplo de página básica HTML que he puesto anteriormente, guardas el archivo con formato .html (o lo renombras después) y lo abres con tu navegador web, este te mostrará una bonita página web, y si te da pereza hacerlo, a ti mismo, pero has leido los articulos sobre Git, puedes encontrarlo en la carpeta html/index.html.

dilbert-html
Html siempre liándola basta…

Desde luego hay software especializado para ello, yo soy un gran fan de SublimeText y PHPStorm, pero la lista es mas bien extensa. Cualquier entorno de desarrollo moderno, incluye una ayuda contextual para escribir HTML así como un patrón para colorear el código mientras estas trabajando. Pero sobre esto hablaremos otro día.

Bueno y con esto nos despedimos, espero que este articulo os haya dado una buena vision sobre HTML y como empezar a descubrir este maravilloso lenguaje de marcas! Os esperamos futuras entregas de ohmyroot! que ahora mismo aun no tengo decididas, ¡pero podréis descubrirlo muy pronto! Para cualquier duda, pregunta, comentario, soborno o amenaza, podéis usar los comentarios o en nuestras redes sociales Facebook y Twitter.

2 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *