Aprendiendo a programar programando

    cabecera

terepebernal.com

HTML. Lo más básico

HTML (HyperText Markup Language – Lenguaje de Marcado de Hipertexto) es un lenguaje de marcado, no de programación. Se basa en etiquetas y es el lenguaje que interpretan los navegadores. Sin HTML no hay página web. Es lo primero que se necesita aprender en Desarrollo Web. Se utiliza para dar estructura al contenido del sitio web. La versión actual es HTML5.


Si quieres estar al tanto de las novedades y publicaciones de esta página web

Suscríbete

Para crear un documento HTML se necesita un editor de código. Yo utilizo el Visual Studio Code, pero hay otros muchos, esto es como los colores, el que más te guste a ti para trabajar. Si quisieras, podrías incluso utilizar un editor de texto sencillo, como el Bloc de notas. Lo importante es que el archivo tenga extensión .html o .htm. Después para que el código se ejecute y puedas ver el resultado necesitas un navegador web, también hay muchos, y también se puede escoger el que uno quiera. A mí me gustan Chrome de Google o Firefox Developer Edition de Mozilla.

Sintaxis de una etiqueta HTML

Cada etiqueta (tag) tiene una función determinada, a través de ellas se van definiendo los elementos del documento. La sintaxis de una etiqueta es la siguiente:

<etiqueta atributo="valor">Contenido de la etiqueta</etiqueta>

Con <etiqueta> se abre la etiqueta y a partir de ahí se escribe el contenido y con </etiqueta> se cierra la etiqueta. Las etiquetas pueden tener atributos, obligatorios u opcionales y que tienen valores determinados, que le dan a la etiqueta un cierto comportamiento. También existen atributos globales, esto es, que pueden utilizarse con casi todos los elementos, como por ejemplo el atributo id, que nos permite asignar un identificador único a alguna zona de la página. Lo veremos en alguno de los ejemplos que se muestran a continuación.

Estructura básica de un documento HTML

La estructura básica de un documento HTML es la siguiente

<!DOCTYPE html>
<html>
   <head>
      ....
   </head>

   <body>
      ....
   </body>
</html>

Con la etiqueta <!DOCTYPE html> el navegador interpreta que es un documento de la versión HTML5. Con <html> y </html> se abre y se cierra el documento, entre estas dos etiquetas va incluido todo el documento HTML. Entre <head> y </head> van los metadatos del documento, es la cabecera del documento y no se muestra cuando el navegador interpreta el documento. Y entre <body> y </body> es donde va todo el contenido de la página, lo que se ve a través del navegador, es el cuerpo del documento.

Etiquetas de cabecera

Dentro de la cabecera del documento para escribir los metadatos se utiliza la etiqueta <meta>. Esta etiqueta no tiene cierre, en la siguiente tabla puedes ver algunos de sus atributos más importantes para esta etiqueta:

Etiquetas de cabecera de HTML
Atributo name
VALORDESCRIPCIÓN
charsetCodificación del documento para los caracteres
authorAutor de la página web
viewportNecesario para que pueda verse bien en todos los dispositivos
descriptionDescripción de la página web que podría aparecer en los buscadores
keywordsPalabras claves para los motores de búsquedas
robotsIndica si la página debe ser indexada por los buscadores y si los enlaces deben ser rastreados

El atributo name indica el nombre del metadato y va siempre junto a content que incluye el valor del metadato.

Otra etiqueta es <title>, esta si tiene cierre. Esta etiqueta define el título del documento, que es el que se muestra en la pestaña de la página del navegador, el que se añade cuando lo marcas como favorito para añadirlo a los marcadores y también el que se muestra en los resultados de los motores de búsqueda.

La etiqueta <link>, que tampoco tiene etiqueta de cierre, sirve para enlazar con un recurso externo al documento. Por ejemplo, el icono del logo que se muestra en la pestaña del navegador o un archivo css que de estilo al documento. Algunos de sus atributos son los siguientes:

Etiquetas para metadatos de HTML
ATRIBUTODESCRIPCIÓN
relTipo de relación
typeFormato del archivo
hrefRuta del enlace

Un ejemplo de estas etiquetas podría ser el siguiente:

<!DOCTYPE html>
<html>
   <head>
      <meta name="charset" content="UTF-8" >
      <meta name="author" content="@terepebernal" >
      <meta name="viewport" content="width=device-width, initial-scale=1.0" >
      <meta name="description" content="Blog de programación y desarrollo web" >
      <meta name="keywords" content="Desarrollo web, HTML, CSS, JavaScript" >
      <meta name="robots" content="Index, Follow" >

      <title>Página web de ejemplo</title>

      <link rel="stylesheet" type="text/css" href="css/style.css" >
      <link rel="icon" type="image/x-icon" href="../favicon.ico" >
   </head>

   <body>
      ....
   </body>
</html>

Etiquetas de enlaces

Los enlaces se definen mediante las etiquetas <a> y </a>, y algunos de sus atributos se muestran en la tabla siguiente:

Etiquetas de enlace de HTML
ATRIBUTODESCRIPCIÓN
hrefRuta del enlace
targetDestino en el que se va abrir el enlace
downloadNombre del archivo que se va a descargar

Vemos un ejemplo de lo anterior. En él se coloca un enlace de la página de Google, que se abrirá en una pestaña nueva:

   <body>
       <a target="_blank" href="https://www.google.es">Ir a Google</a>
   </body>

Etiquetas de agrupación

Estas etiquetas agrupan un conjunto de información, se utilizan para darle un orden a la información y ya van incluidas dentro del body. En la siguiente tabla te las muestro:

Etiquetas de agrupación de HTML
ETIQUETADESCRIPCIÓN
<p></p>Agrupación de un párrafo de texto
<span></span>Agrupación de un fragmento de línea
<div></div>Agrupación de la división de un bloque

Un ejemplo de estas etiquetas:

   <body>
       <div id="zona1">
          <p id="parrafo1">
             <span id="linea1">Esta línea está identificada como 'linea1'</span>,
                que está incluida en el párrafo identificado como 'parrafo1', que a su vez,
                se incluye en una división identificada como 'zona1'.
          </p>
       </div>
   </body>

Etiquetas de texto

Algunas de las etiquetas para definir el tipo de texto que va a ir entre ellas:

Etiquetas de texto de HTML
ETIQUETADESCRIPCIÓN
<em></em>Texto enfatizado
<strong></strong>Texto importante
<sub></sub>Subíndice
<sup></sup>Superíndice
<br />Salto de línea

Un ejemplo de estas etiquetas:

   <body>
       <p>
          <em>Este es un texto enfatizado</em>. <strong>Este es un texto importante</strong>.<br />
          1000 es igual a 10<sup>3</sup>. Un ejemplo de subíndice es 1<sub>b</sub>.
       </p>
   </body>

Ejemplo texto en HTML

 

Bueno, hasta aquí un buen puñado de etiquetas, hay muchas más, pero las dejamos para una segunda parte.

Si quieres estar al tanto de las novedades y publicaciones de esta página web

Suscríbete

    A V I S O

    Hola, si sueles venir por aquí sabrás que desde el 2 de marzo de 2020 no he parado de responder a peticiones de ayuda para ejercicios de algoritmos en PSeint. Tengo que parar de hacerlo, al menos de momento, terminó el confinamiento por el Covid-19 y no me da la vida; he vuelto a trabajar y tengo que recuperar lo no trabajado, y además tengo un proyecto entre manos que no quiero desatender.

    Aquí tienes un montón de ejemplos que te pueden servir de ayuda para resolver tu ejercicio. Si pulsas CTRL+F (buscar) y añades las palabras adecuadas puedes moverte por la página y encontrar lo que buscas.

    Aún me queda por responder algunos comentarios y lo haré. Pero a partir de hoy (14 de Junio de 2020) desactivo los comentarios temporalmente, porque no voy a poder atenderlos, y tampoco contestaré a peticiones de ayuda que me lleguen al correo electrónico o redes sociales y que consistan en realizar ejercicios, no me importará ponerte un enlace a algún ejercicio que ya esté hecho y que crea que es similar y pueda ayudarte, pero poco más.

    Lo siento, yo también estoy aprendiendo e intento ganarme la vida con esto.

    El que aprende y aprende y no practica lo que sabe, es como el que ara y ara y no siembra.- (Platón)

    Si quieres apoyar el blog, puedes hacerlo a través de Ko-fi