Desarrollo

Introducción a HTML

Desarrollo HTML

Dejamos un poco la programación como tal y empezamos a adentrarnos en la construcción de una página web con esta introducción a HTML. Gracias a él, empezaremos a crear la estructura de nuestras páginas web para ir introduciendo el código PHP en ellas.

En primer lugar, recordemos que podemos acceder al índice de contenidos para ver el listado de artículos publicados. Habiendo finalizado la primera parte con lo más básico de PHP, empezaremos ahora en esta introducción a HTML a ver cómo integrar lo aprendido y dar un paso más allá.

¿Qué es HTML?

No, HTML no es un lenguaje de programación, aunque mucha gente piense así. Realmente, es un lenguaje de marcado que nos servirá para estructurar nuestras páginas web, pero no para programar como tal. Como su nombre indica, HTML es el acrónimo de HyperText Markup Language, es decir, lenguaje de marcas de hipertexto. Actualmente, el estándar sobre el que se trabaja es el HTML5.

Simplificando, podemos decir que estamos construyendo una casa y HTML es la estructura de la propia casa, sus paredes, sus puertas, sus escaleras, sus techos, sus cimientos, su terraza, su sótano… Más adelante ya hablaremos de CSS, que en este ejemplo sería la pintura de la casa, el mobiliario, las cortinas, el diseño… Y, por último, tendríamos PHP que serían los electrodomésticos, el sistema de cañerías, el aparato eléctrico…, y el uso que hacemos tanto de ellos como de todas las partes de la casa. Pero una casa (HTML) sin más sería algo fea y poco útil. Si tuviéramos una casa (HTML) bonita (CSS) ya no sería tan fea pero también sería poco útil. Finalmente, una casa (HTML) bonita (CSS) y funcional (PHP) nos permitiría vivir realmente en ella.

¿De qué se compone HTML?

Básicamente, y más en una introducción a HTML, podemos decir que se compone de etiquetas que engloban a una serie de elementos. Estos elementos pueden ser más etiquetas o el propio contenido y, con las etiquetas, estamos definiendo el inicio y el final del elemento o bloque.

Por ejemplo, tenemos el texto Programación Básica y queremos que aparezca en una línea independiente de las demás. Para ello, usamos la etiqueta <p> de la siguiente forma:

<p>Programación Básica</p>

La etiqueta <p> es la etiqueta que define un párrafo en HTML. Como vemos en el ejemplo, para definir nuestro elemento tenemos que utilizar la etiqueta de apertura que se compone de los caracteres < y > junto con el nombre de la etiqueta, en este caso una simple p. A continuación, colocamos el contenido y, para terminar, cerramos con la etiqueta de cierre de la misma forma que la de apertura pero con esa barra invertida / para indicar que cierra la inmediatamente anterior (importante esto) etiqueta de apertura de párrafo.

Anidar etiquetas

Podemos colocar elementos dentro de otros, o lo que es lo mismo, anidar etiquetas. Por ejemplo, vamos a modificar el ejemplo anterior porque queremos que la palabra Básica esté en negrita. Existe una etiqueta en HTML para este cometido, la cual es <strong> (también hace la misma función <b>). El texto que tengamos dentro de esta etiqueta pasará a estar en negrita. Veámoslo.

<p>Programación <strong>Básica</strong></p>

Hay que tener cuidado con esto, pues una etiqueta debe cerrarse antes de la etiqueta que lo contiene. Es decir, la última etiqueta que hemos abierto ha sido <strong>, por tanto, esa etiqueta debe cerrarse antes que el cierre de <p>. Hacerlo de la siguiente forma es incorrecto.

<p>Programación <strong>Básica</p></strong>

Tipos de elementos

Pese a que con HTML5 se redistribuyeron los elementos en distintas categorías más específicas, simplificando podemos distinguir dos tipos importantes de elementos. Los que ocupan “un bloque” y los que ocupan “una línea”.

Los de bloque son elementos tipo los párrafos que comentábamos anteriormente, mientras que los de línea son tipo los de negrita. No tiene mucho sentido que pusiéramos un elemento de tipo línea y, dentro de él, un elemento de tipo bloque. Más abajo veremos las etiquetas más utilizadas y sus usos que nos servirán para una primera introducción a HTML.

Atributos

Las etiquetas, en HTML, pueden tener atributos. Un atributo es un contenedor de información extra para la etiqueta, como por ejemplo un identificador, un enlace o un título. Todo atributo debe tener, en general, su nombre seguido de un signo = y, entre comillas, el valor del atributo. Y todo ello debe ir dentro de la etiqueta de apertura como se ve a continuación.

<p title="Mi título">Programación Básica</p>

Sin embargo, también podemos encontrar atributos sin valores, los cuales son atributos booleanos e indican si ese atributo existe o no. En el siguiente ejemplo vemos que el atributo disabled no tiene valor (aunque también es válido colocar disabled=”disabled”).

<input type="text" disabled>

Elementos vacíos

Pese a ello, no todas las etiquetas tienen etiquetas de cierre, pues en ocasiones únicamente con el valor de los atributos es suficiente para tener toda la información que necesitamos. Por ejemplo, si queremos mostrar una imagen necesitamos la etiqueta <img>, la cual no necesita etiqueta de cierre pero debe tener, obligatoriamente, un atributo que, en su caso, es src. Por tanto, veamos un ejemplo.

<img src="https://programacionbasica.es/wp-content/uploads/2020/01/cropped-logo-negro-transparente-sin_texto-2.png">

En este ejemplo mostramos una imagen que viene definida en el atributo src, el cual espera la URL en la que estará la imagen a mostrar. Como podemos ver, no necesitamos etiqueta de cierre. En algunas ocasiones veremos que también se puede expresar el final con una barra invertida de esta forma /> para cerrar la etiqueta. Ya hemos visto alguna etiqueta sencilla sin cierre, como por ejemplo <br> para imprimir un salto de línea.

Listado de las principales etiquetas

Para una primera aproximación muy sencilla de lo que es HTML, nos vale con conocer lo que son las etiquetas, sus atributos y cómo se utilizan. Iremos profundizando más en los próximos artículos conforme vayamos necesitando más etiquetas.

Vamos a ver, en este artículo, las principales etiquetas que se utilizan en una página HTML:

  • PRINCIPAL
    • <html>: se utiliza al inicio y final del documento HTML. Es el bloque principal donde se definen las demás etiquetas
  • METADATOS Y ESTILOS
    • <head>: contendrá las cabeceras de nuestra página. En ellas se definirán las rutas a los documentos de estilo, a los scripts y otros metadatos que pueda utilizar la página
    • <link>: utilizado para enlazar recursos externos como los documentos de estilo y scripts. Se utiliza dentro de la etiqueta <head>
    • <meta>: sirve para aportar información de metadatos del documento
    • <style>: etiqueta la cual el contenido de la misma será utilizado para definir los estilos de la página. Una página realizada correctamente no la suele usar, pues define los estilos en un documento aparte
    • <title>: define el título de la página, el que se muestra en la pestaña del navegador
  • BLOQUE GENERAL
    • <body>: traducido como “cuerpo”, contedrá los elementos de nuestra página web. Es la estructura básica sobre la que introducir las etiquetas con el contenido
  • SECCIONAMIENTO
    • <article>: con esta etiqueta definimos una sección global que podríamos definir como un artículo o parte importante de nuestra página
    • <footer>: define la sección utilizada para el pie de página
    • <header>: con ella definimos la sección utilizada para la cabecera de la página
    • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: definen los títulos de cada bloque dentro de una página, de mayor a menor importancia
    • <nav>: con ella se define la sección utilizada para definir un menú de navegación
    • <section>: representa una sección en general
  • CONTENIDO
    • <div>: etiqueta general de contenido, la cual engloba una parte de nuestra página
    • <ul>: utilizado para definir el bloque donde se creará una lista no ordenada
    • <ol>: en este caso, la lista que define este bloque será una lista ordenada
    • <li>: define un elemento de las listas que se crean en las dos etiquetas anteriores
    • <p>: se utiliza para definir párrafos
  • TEXTO EN LÍNEA
    • <a>: se utiliza para crear un enlace a otra página
    • <b>: equivalente a <strong>, se utiliza para remarcar un texto en negrita
    • <br>: representa un salto de línea. Ya habíamos visto y utilizado esta etiqueta en artículos anteriores. No tiene etiqueta de cierre y también lo podemos ver como </br>
    • <i>: define un texto en cursiva
    • <span>: se utiliza para englobar a un texto simple
    • <strong>: equivalente a <b>, se utiliza para remarcar un texto en negrita
  • IMAGEN
    • <img>: se utiliza para mostrar una imagen con el atributo obligatorio src que espera un enlace adonde esté la imagen. No tiene etiqueta de cierre
  • TABLAS
    • <table>: utilizada para definir el bloque de una tabla
    • <thead>: define la fila que contendrá las cabeceras de una tabla. Se utiliza dentro de <table>
    • <tbody>: contendrá las filas comunes de una tabla. Se utiliza dentro de <table>
    • <tfoot>: define la fila que contedrán el pie de una tabla. Se utiliza dentro de <table>
    • <tr>: para definir una fila de la tabla. Se utiliza dentro de <thead>, <tbody> o <tfoot>
    • <th>: define una celda con contenido de cabecera. Se utiliza dentro de la etiqueta <tr> que está dentro de <thead>
    • <td>: en este caso se define una celda simple. Se utiliza dentro de la etiqueta <tr> que está dentro de <tbody> o <tfoot>
  • FORMULARIOS
    • <button>: para representar un botón
    • <form>: repesenta a una sección que contendrá un formulario para solicitar datos al usuario
    • <input>: se utiliza para solicitar datos al usuario. El tipo de dato variará según los atributos indicados. Se utiliza dentro de <form> y no tiene etiqueta de cierre
    • <label>: normalmente colocada antes de un <input>, se utiliza para definir la etiqueta/cabecera de ese <input>
    • <select>: utilizada para definir un desplegable de opciones. Se utiliza dentro de la etiqueta <form>
    • <option>: para definir cada una de las opciones utilizadas dentro de <select>
    • <textarea>: se podría decir que es un input de tipo texto pero representado en varias líneas

En definitiva podríamos decir que, con estas etiquetas, tenemos más que suficientes como introducción a HTML, pues todavía existen un buen puñado más de etiquetas más específicas cuyo uso no es tan común. A pesar de ello, iremos recordando y viendo ejemplos de todas estas etiquetas poco a poco mientras vayamos avanzando.

Atributos

A continuación del listado de etiquetas, podríamos también mostrar un listado de atributos. Sin embargo, creo que no merece la pena en este artículo porque, además, la mayoría de atributos se definen y actúan en un tipo de etiqueta concreto.

Conforme vayamos viendo las etiquetas en nuestros artículos sobre programación en PHP y vayamos, por tanto, necesitándolas para crear nuestros programas y páginas web, también iremos viendo las etiquetas.

Por ahora, en esta introducción a HTML podemos conformarnos con conocer etiquetas básicas y muy usadas como action para indicar la URL a la que se le envía un formulario con etiqueta <form>, href para indicar la URL a la que debe dirigirse un enlace con etiqueta <a>, name que nos servirá para nombrar los datos que se envían en un formulario desde <input>, src que ya hemos visto que nos indica el contenido para una imagen <img> y algunas otras etiquetas multimedia y class e id para definir identificadores que podemos usar a la hora de añadir estilos o trabajar con scripts de JavaScript y que pueden integrarse en cualquier etiqueta.

Resumen

En resumen, como por ahora no queremos apartarnos todavía demasiado de los conceptos de programación, dejaremos aparcado el desarrollo más completo de HTML. Con lo que hemos visto en esta introducción a HTML y los ejemplos que vendrán en próximos artículos, tendremos suficiente para ir comenzando con este mundo.

Finalmente, en próximos artículos empezaremos a ver cómo utilizar las etiquetas para formularios. Gracias a ello, comenzaremos a pedir datos al usuario que nos servirán para utilizar en nuestros programas. Serán unos cuantos artículos importantes, pues trataremos la recogida de datos, la validación de los mismos, cómo mostrar los datos y también algo sobre seguridad a la hora de recogerlos. Por tanto, serán aspectos muy importantes para poder seguir, después, avanzando con aspectos de un mayor nivel en la programación.

Deja un comentario