Qué es una página web

Qué es una página web

Una página web es un documento de texto con marcas. Las marcas permiten modificar la presentación del documento, incluir elementos no contenidos en el texto (por ejemplo, imágenes), crear hiperenlaces, añadir significado al texto (todavía de forma limitada), etc. A las marcas se les llaman también etiquetas.

Las páginas web están pensadas para ser vistas mediante los programas llamados navegadores web. Los navegadores son capaces de interpretar las marcas y presentar el documento tal y como lo diseñó el autor.

Los navegadores no muestran en principio las marcas, aunque se puede pedir que las enseñen en una ventana o pestaña aparte. El atajo de teclado correspondiente suele ser Ctrl+u y las opciones de menú son:


Las marcas se escriben entre desigualdades (<p>, <h1>, <div>, etc.) y suelen ir por parejas, rodeando porciones de texto. La marca de apertura contiene como mínimo el nombre de la marca y la marca de cierre empieza por el carácter barra (/) y contiene únicamente el nombre de la marca (</p>, </h1>, </div>, etc.).

Código fuente de la página web

<p>Esto es un párrafo de texto.</p>

<p>Esto es otro párrafo.</p>

Cómo se ve en el navegador

Esto es un párrafo de texto.

Esto es otro párrafo.

Algunas marcas (imágenes, saltos de líneas, separadores, etc.) no necesitan marca de cierre y sólo es necesario escribir la marca de apertura. A estas marcas se las llama marcas vacías. En la sintaxis XHTML, en una marca vacía debe incluirse una barra al final de la etiqueta (<img />, <hr />, <br />, etc.) .

Código fuente de la página web

<p>Esto es un párrafo de texto.</p>

<hr />

<p>Esto es otro párrafo. Entre los dos párrafos hay una línea horizontal.</p>

Cómo se ve en el navegador

Esto es un párrafo de texto.


Esto es otro párrafo. Entre los dos párrafos hay una línea horizontal.


Las marcas pueden anidarse, aunque no de cualquier manera. Algunas marcas pueden estar contenidas por otras, pero no se puede insertar cualquier marca dentro de otra.

Código fuente de la página web

<div>
<p>Esto es un <strong>párrafo de texto</strong>.</p>

<p>Esto es <em>otro párrafo</em>.</p>
</div>

Cómo se ve en el navegador

Esto es un párrafo de texto.

Esto es otro párrafo.


En general, los navegadores modifican el aspecto visual del texto en función de las marcas existentes.

Código fuente de la página web

<p>Esto es un <strong>párrafo de texto</strong>.</p>

<p>Esto es <span>otro párrafo</span>.</p>

Cómo se ve en el navegador

Esto es un párrafo de texto.

Esto es otro párrafo.


Se puede modificar el aspecto visual de cualquier marca utilizando propiedades de estilo.

Código fuente de la página web

<p style="color: red">Este párrafo se verá de color rojo.</p>

Cómo se ve en el navegador

Este párrafo se verá de color rojo.

Nota: Aunque es posible utilizar propiedades de estilo en una página web, como en el ejemplo anterior, se recomienda hacerlo en hojas de estilo, como se explica en lecciones posteriores.


Las marcas de apertura pueden contener uno o varios atributos. Los atributos especifican alguna característica de la marca. Algunos atributos pueden incluirse en casi todas las marcas, pero otros son específicos de cada marca. Los atributos pueden a su vez tener valores (uno o varios valores, separados por espacios). <etiqueta atributo="valor_de_atributo" atributo2="valor_de_atributo">

Código fuente de la página web

<p title="'Sorpresa!">Esto es un párrafo de texto (ponga el cursor encima).</p>

<p style="color: red">Esto es otro párrafo.</p>

Cómo se ve en el navegador

Esto es un párrafo de texto (ponga el cursor encima).

Esto es otro párrafo.

Una página web puede contener comentarios, que el navegador no muestra (salvo cuando muestra el código fuente de la página). La etiqueta de comentario es <!-- .... -->.

<p>Esto es un párrafo <p> normal y corriente.
<!--Esto es un ejemplo de comentario--></p>

<p>En el párrafo anterior hay un
comentario que sólo puede
verse en el código fuente.</p>

<!--Esto es otro comentario-->

Esto es un párrafo <p> normal y corriente.

En el párrafo anterior hay un comentario que sólo puede verse en el código fuente.

Los comentarios pueden estar insertados en cualquier lugar de la página web. En el ejemplo pueden verse dos comentarios, uno incluido en una etiqueta (párrafo <p>) y otro no incluido en ninguna etiqueta.

Versión de HTML

A lo largo del tiempo ha habido varios tipos de HTML y dos tipos de sintaxis. Los tipos de HTML (HTML 3.2, HTML 4.01, HTML 5, etc) se distinguen por las etiquetas (y atributos y valores de los atributos) que se pueden utilizar. Las dos sintaxis, HTML y XHTML, se distinguen en que la primera no sigue la recomendación XML, mientras que la segunda sí.

En estos apuntes se utiliza el HTML más moderno, actualmente (septiembre de 2016), el HTML 5.

Con respecto a la sintaxis, en estos apuntes se utiliza la sintaxis XHTML (mientras sea compatible con el HTML 5). La sintaxis XHTML supone ser riguroso a la hora de escribir las etiquetas y sus atributos, lo que facilita la legibilidad y comprensibilidad del código fuente. Pero hay que tener en cuenta que no se está utilizando XHTML 5, sino sólo la sintaxis XHTML. Eso quiere decir que si se cometen errores de sintaxis, el navegador intentará representar la página lo más fielmente posible.

Nota: En la lección Ampliaciones se comenta con más detalle la diferencia entre las variedades HTML y XHTML.

Página web básica HTML 5 con sintaxis XHTML

El ejemplo siguiente muestra una página web básica HTML 5 escrita con sintaxis XHTML.

HTML 5, sintaxis XHTML, tipo MIME text/html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>HTML 5</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="estilo.css" />
  </head>

  <body>
    <p>Esta página es HTML 5 válido.</p>
  </body>
</html>

En este código se pueden reconocer algunos bloques anidados en el que cada bloque corresponde a una etiqueta:

   <!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>HTML 5</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link type="text/css" rel="stylesheet" href="estilo.css" />
</head>


<body>
  <p>Esta página es HTML 5 válido.</p>
</body>
</html>

Nota: En la lección Ampliaciones se muestran páginas básicas de otras versiones y variedades de HTML.