• Categoría de la entrada:Desarrollo Web

El lenguaje HTML se usa en programación y significa Hyper Text Language Markup, es decir Lenguaje de marcas de hipertexto. Su nombre se debe a que es un lenguaje de marcado. Esto es así porque se limita a marcar el contenido del documento, indicando al navegador como debe mostrar ese contenido.

Esas marcas se llaman etiquetas, y son un conjunto limitado de elementos que cada una tiene un significado propio para el navegador. La forma de diferenciar las etiquetas del resto de texto del documento es usando los corchetes < y >, cuando el navegador encuentra estos dos elementos lo interpreta como una etiqueta y no lo muestra en pantalla. Así, un ejemplo de etiqueta HTML para mostrar una imagen en el documento es <img>.

La mayoría de las etiquetas constan de dos elementos, la etiqueta de apertura y la etiqueta de cierre. La forma de indicar el cierre de una etiqueta es colocando una barra(/) delante del nombre de la etiqueta de cierre.De esta forma un ejemplo de etiqueta de HTML para indicar un enlace (o hipertexto) a otro documento sería <a>Texto del enlace</a>.

Fl origen del HTML fue el de crear un lenguaje que permitiese escribir documentos online de forma rápida. Estos servirían para ser compartidos entre investigadores, sus principales etiquetas hacen referencia a cómo presentar y organizar el texto de un documento. De este modo, tenemos etiquetas para indicar distintas cosas al navegador. Por ejemplo, que el texto marcado debe mostrarse como un párrafo, un título de diferente nivel jerárquico, o una lista de elementos entre otras.

Aprender programación

Ejemplo de etiquetas HTML

La etiqueta para indicar un párrafo de texto es la etiqueta <p></p>

Para indicar un encabezado en el documento se utilizan las etiquetas <h1></h1>. Estas etiquetas permiten generar diferentes niveles de encabezados. Solo hay que cambiar el número de la etiqueta usando h2 para encabezados de segundo nivel, h3 para encabezados de tercer nivel y así sucesivamente.

Otro elemento importante son las listas HTML que pueden ser ordenadas(ol) y sin ordenar(ul) . En ambos casos los elementos de la lista se marcan usando la etiqueta li. Ejemplo de lista sin ordenar:

Código

&lt;ul&gt;<br> &lt;li&gt;Elemento 1&lt;/li&gt;<br>&lt;li&gt;Elemento 2&lt;/li&gt;<br> &lt;li&gt;Elemento 3&lt;/li&gt;<br>&lt;/ul&gt;
Si en lugar de ul utilizo la etiqueta ol, tendré una lista numerada.

Este código genera en el navegador una lista con esta apariencia:

  • Elemento 1
  • Elemento 2
  • Elemento 3

Si usamos la etiqueta ol, el resultado es este:

  1. Elemento 1
  2. Elemento 2
  3. Elemento 3

Atributos de etiqueta HTML

Programación: en ocasiones la etiqueta HTML por sí misma no facilita al navegador la información necesaria para mostrar correctamente el elemento en la pantalla. Ahí usamos un atributo(o varios) que le indiquen al navegador la información que falta.

Los atributos siempre se escriben dentro de la etiqueta de apertura y tienen la forma de nombre_de_atributo=»valor». Es decir, primero se define el atributo y a continuación con un signo igual(=) y entre comillas se establece el valor del atributo.

Ejemplo: la etiqueta ‘img’ sirve para mostrar un archivo de imagen. Por si misma no hace referencia a esta, por lo que se hace necesario usar un atributo que indique dónde se encuentra. El atributo necesario para indicar qué archivo de imagen mostrar es src. Su valor es ser una ruta de archivo que apunte a la ubicación de la imagen. La etiqueta completa tendría este aspecto: <img src=»mi_imagen.jpg»>

También otro caso de atributo necesario para una etiqueta lo vemos en la etiqueta de enlace (a) . Esta etiqueta necesita siempre el atributo href que indique la dirección a la que debe apuntar el vínculo. Por ejemplo, un enlace con el texto «Ir a Google» que permita acceder a esa página tendría la siguiente forma:<a href=»https://www.google.es»>Ir a Google</a>

Estructura del documento HTML en programación

Para empezar, a nivel de estructura las etiquetas HTML se comportan de dos formas posibles: elementos de bloque y elementos en línea.
Por lo tanto,los elementos en bloque empiezan siempre en el principio de página (a la izquierda del todo), y siempre ocupan todo el ancho del documento. Se diría que su anchura es el 100% de la ventana del navegador. Por esto, un elemento de bloque no permite que a su lado se sitúe otro elemento HTML.
Los elementos en línea sí pueden empezar en cualquier parte de la página o pantalla, y también permiten que pueda colocarse otro elemento HTML. Además la anchura de un elemento en línea viene definida por su contenido. Ocupa tanto espacio, como letras tenga el texto que contiene el elemento, o como grande sea la imagen del elemento.

Programación :Ejemplos de etiquetas en bloque: la mayoría de etiquetas HTML que constan de apertura y cierre. Excepto aquellas que se refieren específicamente a tratar con partes de texto. Es decir, etiquetas como los encabezados (h1, h2…) , los párrafos (p) o las listas (ul, ol) y sus elementos (li) son ejemplos de bloque.

Por lo cual etiquetas en línea son las que no tienen cierre (img, br). También aquellas con cierre pensadas para delimitar parte del texto, como los enlaces (a) y resaltados (strong, em)

html, código

Elementos contenedores

En HTML, en programación, todos los elementos pueden ser considerados como contenedores. Se representan como «cajas» y que pueden contener a su vez a otros elementos. Tenemos dos etiquetas que sirven específicamente para contener o agrupar a otros elementos y que por si mismos no visualizan nada en la pantalla.

Como etiqueta agrupadora de bloque tenemos la etiqueta DIV. Se utiliza muchísimo para poder agrupar contenido y representarlo de forma conjunta, por ejemplo cuando queremos hacer un diseño basado en columnas.
Como contenedor en línea tenemos a la etiqueta SPAN, que permite seleccionar parte del contenido de otro elemento para aplicarle un estilo CSS específico.

La entrada HTML, inicio a la programación la publicó primero Huellas en el Espacio en el Blog de Huellas en el Espacio. No copies contenido, no dice nada bueno de ti a tus lectores.