HTML Tutorial

HTML es el lenguaje más utilizado para desarrollar páginas web. Fue creado por Berners-Lee a finales de 1999. Actualmente tenemos la versión HTML-5, que es una extensión de HTML 4.01, que se publicó en 2012.

Originalmente, el HTML se desarrolló con la intención de definir la estructura de documentos como encabezados, párrafos, listas, etc., y facilitar el intercambio de información.

HTML significa lenguaje de marcado de hipertexto, y es el lenguaje más utilizado para escribir páginas web.

El hipertexto se refiere a la forma en que las páginas web (documentos HTML) están vinculadas entre sí. Por lo tanto, el enlace disponible en una página web se llama hipertexto.

Como su nombre lo indica, HTML es un lenguaje de marcado, lo que significa que se usa HTML para simplemente "marcar" un documento de texto con etiquetas que le dicen a un navegador web cómo estructurarlo para mostrarlo.

Ahora, el HTML se está utilizando ampliamente para formatear páginas web con la ayuda de diferentes etiquetas disponibles en el lenguaje HTML.

Documento HTML básico

<!DOCTYPE html>
<html>

   <head>
      <title>This is document title</title>
   </head>

   <body>
      <h1>This is a heading</h1>
      <p>Document content goes here.....</p>
   </body>

</html>

Etiquetas HTML

Como se dijo anteriormente, el HTML es un lenguaje de marcado y hace uso de varias etiquetas para dar formato al contenido. Estas etiquetas están encerradas entre llaves <Nombre de etiqueta>. Excepto algunas etiquetas, la mayoría de las etiquetas tienen sus correspondientes etiquetas de cierre. Por ejemplo, <html> tiene su etiqueta de cierre </html> y la etiqueta <body> tiene su etiqueta de cierre </body>, etc.

El ejemplo anterior del documento HTML utiliza las siguientes etiquetas

Tag Descripción
<!DOCTYPE...>

Esta etiqueta define el tipo de documento y la versión HTML.

<html>

Esta etiqueta incluye el documento HTML completo y comprende principalmente el encabezado del documento que está representado por <head> ... </head> y el cuerpo del documento que está representado por las etiquetas <body> ... </body>.

<head>

Esta etiqueta representa el encabezado del documento que puede mantener otras etiquetas HTML como <title>, <link> etc.

<title>

La etiqueta <title> se usa dentro de la etiqueta <head> para mencionar el título del documento.

<body>

Esta etiqueta representa el cuerpo del documento que guarda otras etiquetas HTML como <h1>, <div>, <p> etc.

<h1>

Esta etiqueta representa el texto del encabezado.

<p>

Esta etiqueta representa un párrafo.

Para aprender HTML, deberá estudiar varias etiquetas y comprender cómo se comportan para formatear un documento de texto e imágenes y crear una hermosa página web.

Estructura del documento HTML

Un documento HTML típico tendrá la siguiente estructura

<html>

   <head>
      Document header related tags
   </head>

   <body>
      Document body related tags
   </body>

</html>

Estudiaremos todas las etiquetas de encabezado y cuerpo, pero por ahora veamos qué es la etiqueta de declaración de documento.

La Declaración de <! DOCTYPE>

El navegador web utiliza la etiqueta de declaración <! DOCTYPE> para comprender la versión del HTML utilizado en el documento. La versión actual de HTML es 5 y hace uso de la siguiente declaración

<!DOCTYPE html>

Hay muchos otros tipos de declaración que se pueden usar en un documento HTML dependiendo de qué versión de HTML se esté utilizando. Veremos más detalles al respecto mientras discutimos la etiqueta <! DOCTYPE ...> junto con otras etiquetas HTML.

Etiquetas de texto de encabezado

Cualquier documento comienza con un encabezado. Puedes usar diferentes tamaños para tus encabezados. HTML también tiene seis niveles de encabezados, que utilizan los elementos <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. Mientras se muestra cualquier encabezado, el navegador agrega una línea antes y una línea después de ese encabezado.

<!DOCTYPE html>
<html>

   <head>
      <title>Heading Example</title>
   </head>

   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
   </body>

</html>

Etiqueta de párrafo

La etiqueta <p> ofrece una forma de estructurar su texto en párrafos diferentes. Cada párrafo del texto debe ir entre una etiqueta de apertura <p> y una de cierre </p> como se muestra a continuación en el ejemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Paragraph Example</title>
   </head>

   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>

</html>

Etiqueta de salto de línea

Cada vez que use el elemento <br />, cualquier cosa que lo siga comienza desde la siguiente línea. Esta etiqueta es un ejemplo de un elemento vacío, donde no es necesario abrir y cerrar etiquetas, ya que no hay nada entre ellas.

La etiqueta <br /> tiene un espacio entre los caracteres br y la barra diagonal. Si omite este espacio, los navegadores más antiguos tendrán problemas para renderizar el salto de línea, mientras que si pierde el carácter de barra diagonal y solo lo utiliza, no es válido en XHTML.

<!DOCTYPE html>
<html>

   <head>
      <title>Line Break  Example</title>
   </head>

   <body>
      <p>Hello<br />
         You delivered your assignment ontime.<br />
         Thanks<br />
         Mahnaz</p>
   </body>

</html>

Contenido Centrado

Puede usar la etiqueta <center> para poner cualquier contenido en el centro de la página o en cualquier celda de la tabla.

<!DOCTYPE html>
<html>

   <head>
      <title>Centring Content Example</title>
   </head>

   <body>
      <p>This text is not in the center.</p>

      <center>
         <p>This text is in the center.</p>
      </center>
   </body>

</html>

Lineas horizontales

Las líneas horizontales se utilizan para dividir visualmente las secciones de un documento. La etiqueta <hr> crea una línea desde la posición actual en el documento al margen derecho y rompe la línea en consecuencia.

Por ejemplo, puede querer dar una línea entre dos párrafos como en el siguiente ejemplo

<!DOCTYPE html>
<html>

   <head>
      <title>Horizontal Line Example</title>
   </head>

   <body>
      <p>This is paragraph on top</p>
<hr />
<p>This is paragraph at bottom</p> </body> </html>

De nuevo, la etiqueta <hr /> es un ejemplo del elemento vacío, donde no es necesario abrir y cerrar etiquetas, ya que no hay nada entre ellas.

El elemento <hr /> tiene un espacio entre los caracteres hr y la barra diagonal. Si omite este espacio, los navegadores antiguos tendrán problemas para renderizar la línea horizontal, mientras que si omite el carácter de barra diagonal y solo usa <hr>, no es válido en XHTML

Conservar formato

A veces, desea que su texto siga el formato exacto en que está escrito en el documento HTML. En estos casos, puede utilizar la etiqueta preformateada <pre>.

Cualquier texto entre la etiqueta de apertura <pre> y la etiqueta de cierre </pre> mantendrá el formato del documento de origen.

<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>

   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>

</html>

Etiqueta HTML vs. Elemento

Un elemento HTML está definido por una etiqueta de inicio. Si el elemento contiene otro contenido, termina con una etiqueta de cierre.

Por ejemplo, <p> es la etiqueta de inicio de un párrafo y </p> está cerrando la etiqueta del mismo párrafo, pero <p> Este es el párrafo </p> es un elemento de párrafo.

<!DOCTYPE html>
<html>

   <head>
      <title>Nested Elements Example</title>
   </head>

   <body>
      <h1>This is <i>italic</i> heading</h1>
      <p>This is <u>underlined</u> paragraph</p>
   </body>

</html>

Hemos visto pocas etiquetas HTML y su uso como etiquetas de título <h1>, <h2>, etiqueta de párrafo <p> y otras etiquetas. Los hemos usado hasta ahora en su forma más simple, pero la mayoría de las etiquetas HTML también pueden tener atributos, que son bits de información adicionales.

Un atributo se utiliza para definir las características de un elemento HTML y se coloca dentro de la etiqueta de apertura del elemento. Todos los atributos se componen de dos partes: un nombre y un valor

El nombre es la propiedad que desea establecer. Por ejemplo, el elemento párrafo <p> en el ejemplo lleva un atributo cuyo nombre es alinear, que puede usar para indicar la alineación del párrafo en la página.

El valor es lo que desea que el valor de la propiedad se establezca y siempre se ponga dentro de las cotizaciones. El siguiente ejemplo muestra tres valores posibles de atributo de alineación: izquierda, centro y derecha.

<!DOCTYPE html> 
<html>

   <head> 
      <title>Align Attribute  Example</title> 
   </head>

   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>

</html>

Atributos básicos

Los cuatro atributos principales que se pueden usar en la mayoría de los elementos HTML (aunque no todos) son

  • Id
  • Title
  • Class
  • Style

El atributo Id

El atributo id de una etiqueta HTML se puede usar para identificar de forma única cualquier elemento dentro de una página HTML. Existen dos razones principales por las que podría querer usar un atributo de identificación en un elemento

  • Si un elemento lleva un atributo de identificación como un identificador único, es posible identificar solo ese elemento y su contenido.
  • Si tiene dos elementos con el mismo nombre dentro de una página web (o hoja de estilo), puede usar el atributo id para distinguir entre los elementos que tienen el mismo nombre.
<p id = "html">This para explains what is HTML</p>
<p id = "css">This is Cascading Style Sheet</p>

 

El atributo del título

El atributo de título da un título sugerido para el elemento. La sintaxis del atributo de título es similar a la explicada para el atributo id.

El comportamiento de este atributo dependerá del elemento que lo transporta, aunque a menudo se muestra como información  cuando el cursor se encuentra sobre el elemento o mientras el elemento se está cargando.

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>

   <body>
      <h3 title = "Hello HTML!">Example</h3>
   </body>

</html>

 

El atributo de clase

El atributo de clase se usa para asociar un elemento con una hoja de estilo, y especifica la clase de elemento.

El valor del atributo también puede ser una lista de nombres de clase separados por espacios. Por ejemplo

class = "className1 className2 className3"
Compartir:


◀ Volver