En este nuevo apunte voy a estar ampliando algunos conceptos básicos del lenguaje HTML.
Ya es el segundo apunte que hago sobre esto desde que empecé a estudiar sobre el tema. El texto anterior se llama: “Los fundamentos de HTML: comprendiendo la estructura y los elementos esenciales”.
Con todo, existen problemas al escribir algo como esto.
Por ejemplo, la idea de “crear una lista ordenada de elementos en HTML”, una lista de items. ¿Sirve de algo saber eso? Bueno, es útil pero… si necesito conocer cómo hacer una lista, simplemente lo busco y trabajo terminado.
Para conseguir la información más completa posible voy a tratar de ese tipo de temas en lo que sigue. No siempre, pero a veces. La respuesta es que en algunas ocasiones no queda otra opción que revisar conceptos que tomados de forma aislada parecen aburridos, para tener al menos algo más de práctica en la construcción de sitios web.
Pero habiendo mencionado eso, lo que sigue es…
Me interesa todo esto de HTML… ¿Existe algún otro material algo mas formal para leer?
Si, existe algo más para leer. Bueno, realmente existen millones de cosas sobre este tema para leer y estudiar. Después de todo, no es un asunto precisamente nuevo.
Lo que quiero decir es que existe una documentación oficial de HTML. Esa documentación la mantiene una organización internacional llamada World Wide Web Consortium (W3C).
Se puede acceder a ese material siguiendo este enlace.
Ahora el asunto es, yo estoy intentando leer ese material. Podría citarlo todo el tiempo… pero solamente voy a conseguir que este texto se vuelva innecesariamente más largo.
Así que como siempre, si en algún momento mis apuntes se vuelve confuso o insuficientes, lo mejor es referirse a la documentación oficial. O a cualquier otro apunte realmente, este es solo un apunte impensado.
Entendiendo la forma del HTML
Según entiendo de todo esto, la idea es darle un sentido a todo lo que se encuentra en una la página web por medio de etiquetas.
Utilizando HTML le asigno etiquetas a las distintas partes de un sitio. Estas etiquetas le permiten a los navegadores y buscadores entender la página, pero también la vuelven legible para cualquier humano que revise este código.
Es por eso que también se dice que HTML es un “lenguaje estructurado”. Las etiquetas marcan la estructura que cumple cada elemento.
Luego de señalar cada parte con uno de estos tags, puedes agregarle estilo de diseño con CSS. Al final de la entrada voy a empezar a mencionar algo de CSS (“Hojas de estilo en cadena).
Agrupando los elementos del sitio
Todo este tópico aparece muchas veces mencionado por el nombre en inglés de “Common semantic grouping elements”. Esto es en castellano “Agrupación semántica de elementos comunes”.
En lo que a mi respecta, ni siquiera se que quiere decir “semántico”. En un rápido viaje al diccionario, al parecer quiere decir algo como “estudiar el significado de las palabras”.
Una vez más, lo más importante para recordar parece ser esto: Las etiquetas no “acomodan” las partes del sitio en su lugar ni les dan estilo, pero si les dan estructura. Enseña que es cada cosa.
Ya en el anterior texto revisé algunas características de las etiquetas. Algunas tienen que ser abiertas y cerradas, mientras que otras permanecen siempre abiertas.
Existen varias etiquetas, pero estas son unas de las más usadas:
La etiqueta “Header”
Según la documentación de (W3C):
The header element represents a group of introductory or navigational aids.
manual html w3c
Esto es que “el elemento header representa un grupo de ayudas introductorias o de navegación”.
La misma se encuentra de esta forma:
<header> </header>
En teoría puedo pensar que, al poder ser traducida la palabra “header” como una “cabecera”, esta etiqueta tiene que aparecer al principio de las distintas páginas de un sitio web.
Y la mayoría de las veces ocurre de esa forma, repitiéndose más o menos igual en cada página. Contiene cosas como el logo y los títulos, se supone que el header se ocupa de nuclear ese tipo de información introductoria para la navegación.
Sin embargo tengo que recordar que las etiquetas no se refieren a la posición de algo en el diseño. Puede existir más de un header en una determinada página, puede aparecer incluso usado dentro de otras etiquetas siempre que cumpla esa función de albergar datos introductorios.
Otra cosa que necesito tener en mente: aunque el nombre es similar, <head> y <header> no son lo mismo en el contexto del sito.
Dentro de la etiqueta <head> va información que no es contenido del documento, como por ejemplo metadatos. Pero lo que va dentro de <header> si es parte de lo que se enseña en la página.
La etiqueta “nav” aparece de esta forma
<nav> </nav>
En inglés se conoce por “”navigation bar” y es el menú de navegación de nuestra página.
Por lo general va dentro de la etiqueta “header”, y del mismo modo la mayoría de las veces se repite constante en toda la página web.
Siendo el menú de de navegación, contiene los links para ir saltando entre partes del sitio. Por ejemplo, la página de “información”, “contacto” y similares. Aunque esto depende de lo que necesitemos en cada caso, puede ser links a nuestro gusto.
<footer></footer>
Se trata del pie de página, siendo de esta forma por lo general va al final del sitio. Y de forma similar a “Header”, aparece casi igual en todas las partes del sitio.
Contiene cosas como links importantes, mapa del sitio, datos de contacto, metadata y ese tipo de cosas.
Main
La documentación dice:
The main element represents the dominant contents of the document.
manual w3c
Este elemento representa a los contenidos dominantes del documento.
Aparece de la siguiente forma:
<main> </main>
Y en “main” aparece el contenido principal del sitio, que es diferente en cada caso. Es único por cada página.
Para simplificarlo, dicho de otro modo es todo lo que no forma parte ni esta incluido en otras etiquetas como <header>, <nav> o <footer>.
La etiqueta “Article”
Aparece de esta forma:
<article></article>
Es una etiqueta que encierra contenido que tiene sentido por su propia cuenta, como por ejemplo todo el texto dentro de una publicación específica de un blog.
Y el manual dice:
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
manual w3c
Es una etiqueta que encierra contenido que tiene sentido por su propia cuenta, como por ejemplo todo el texto dentro de una publicación específica de un blog. Pero puede representar también algo como un widget en el sitio.
La etiqueta “Section”
<section> </section>
La etiqueta “section” (sección) agrupa contenido relacionado. ¿Dónde usarla? Por ejemplo en una parte secundaria de un página individual o para crear un “bloque de sentido”.
El manual dice:
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A web site’s home page could be split into sections for an introduction, news items, and contact information.
manual w3c
Esto es que un ejemplo de sección pueden ser los capítulos de un libro. O también pueden ser secciones las partes de la página de inicio de un sitio web.
Aside
<aside> </aside>
Esta etiqueta marca contenido que no es indispensable para el sitio.
Address
<address> </address>
Es una etiqueta que señala la información de contacto. Por lo general va en el <footer>.
La etiqueta Paragraph
Es la etiqueta “parrafo” y aparece de la siguiente forma:
<p> Esto es un párrafo.</p>
Puede tener texto o imágenes. Y es una etiqueta que se repite todas las veces que sea necesario, por cada párrafo en el sitio.
Etiqueta Headings en HTML
La etiqueta para los títulos. Puede aparecer por ejemplo de algunas de estas formas:
<h1> Primer titulo</h1>
<h2>Segundo subtitulo</h2>
Se trata de distintos niveles de subtítulos, ordenados en importancia decreciente desde el h1 hasta el h6.
No es lo mismo que el “font size” o el tamaño de la letra. No se utilizan para darle estilo a un texto, pero si para marcar la importancia de algo dentro de la estructura.
Se puede notar eso dentro de este mismo apunte por ejemplo, cada vez que me refiero a una nueva etiqueta uso un título de nivel “h3”.
Por ejemplo, este que sigue es un “heading nivel 3”:
Atributos de imagen en HTML
Las imágenes (Images) tienen una etiqueta y dos atributos.
Su etiqueta no tiene elemento de cierre, y es:
<img>
Los atributo son:
- -src: el camino (source) relativo o absoluto al directorio donde se encuentra la imagen.
- – alt: El texto alternativo que acompaña. Sirve por si la misma no llega a cargarse o para que pueda mencionarla un lector de pantalla.
Ejemplo:
<img src="lapiz.jpg" alt="un lapiz de dibujo">
Cómo crear Listas en HTML:
Se trata de una forma de ordenar la información. Pueden ser listas ordenadas o desordenadas.
Para una lista ordenada tengo las etiquetas <ol> y <li> de la siguiente manera:
<ol> <li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
Para armar una lista sin orden tengo las etiquetas <ul> y <li> de esta forma:
<ul> <li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
Texto preformateado
<pre> </pre>
También puede aparecer llamada como “preformated text”, sirve para preservar los espacios en blanco o evitar cualquier otro tipo de interpretación de texto enriquecido.
Yo por lo general uso esta etiqueta para marcar los ejemplos en el blog, de esta forma:
Esto es el ejemplo.
Etiquetas de énfasis
Estas etiquetas se utilizan para destacar palabras dentro de párrafos. Sirve para decirle al navegador si un texto es en itálica o en negrita.
Para itálica se utiliza la etiqueta <em>:
<em> </em>La etiqueta <strong> es para texto en negrita:
<strong> </strong>
Cómo agregar links en HTML
La etiqueta para marcar los links en un sitio web es:
<a> </a>.
Pero su utilización tiene algunas particularidades. Necesita del atributo “href” para poder funcionar.
<a href="http://www.sitioweb.com/">Hacer click en este texto</a>
El atributo href enseña el destino del link: puede tratarse de una URL absoluta, URL relativa o un anchor.
El atributo Target
Este atributo se desprende directamente de lo anterior. Señala si un link tiene que abrirse en una ventana nueva o en la ventana actual.
Si lo le agrego este atributo, el link se abre en la ventana actual. Para una nueva ventana utilizo “_blank” de esta forma:
<a href="http://www.sitioweb.com/" target="_blank">Hacer click en este texto</a>
Conclusión:
Con esto le doy un cierre al apunte sobre fundamentos de HTML, ampliando sobre conceptos básicos.
Es cierto que es solamente un muestrario de algunas etiquetas que se utilizan con mucha frecuencia en un sitio web. Se pueden probar por separado, pero ganan mayor valor cuando las vemos interactuando al mismo tiempo en un sitio.
La forma del texto puede ser aburrida, pero estas etiquetas aparecen una y otra vez en cualquier página web. Aparecen todo el tiempo en esta misma página del blog. Por eso reconocer esos tags tiene valor, ayuda a entender rápido el código de un sitio.
Cualquier error que encuentres en este texto, por favor avisame para que pueda corregirlo.
La seguimos en el siguiente apunte
Leave a Reply