Diferencias entre una página web y un sitio web

Una página web es un único documento electrónico que se puede visualizar en un navegador y que está codificado en lenguaje HTML. Cada página web tiene una dirección web (una “URL”) única.

Por ejemplo:

https://www.hostingatope.com/mejores-herramientas-para-webmasters-internet/

En cambio, un sitio web es el conjunto de páginas web pertenecientes a un mismo dominio.

Por ejemplo, en el caso de este blog:

Hosting a Tope es el sitio web y éste a su vez se compone todas las páginas web que se ubican en el dominio hostingatope.com, incluida la del ejemplo anterior. Cada una de ellas tendrá una URL diferenciada que pertenece al dominio hostingatope.com.

Por otra parte, lo que ves en el domino hostingatope.com es a su vez una página, la que corresponde precisamente a la URL que en este caso es el domino sin más. Es la página principal del sitio, también conocida como portada o home page, según la terminología que prefiera usar cada uno.

Para que tu página web se vea finalmente en Internet, necesitas un dominio y un servidor conectado a Internet. Esto lo puedes conseguir con servicios gratuitos como, por ejemplo, Blogger o WordPress.com, todos ellos, muy limitados o contratando un hosting:

Qué es el HTML (HyperText Markup Language)

HTML son las siglas de “HyperText Markup Language”, lo que se puede traducir en español a “Lenguaje de marcado de hipertexto (texto con enlaces)”.

Eso quiere decir que permite “marcar” el texto mediante unas etiquetas especiales que le añaden semántica.

Por ejemplo:

<h1>Cómo hacer una página web con HTML</h1>

¿Qué ha pasado aquí? Pues que simplemente añadiendo la etiqueta <h1> le hemos añadido una información semántica muy útil a la frase que indica que esto no es una frase cualquiera sino un título (fíjate en la “h” de “header” en inglés) de nivel 1.

Esto es muy útil porque, por ejemplo, le sirve al navegador web para aplicar ciertas pautas de diseño que faciliten la lectura como diferentes tamaños de letra a los títulos según su nivel jerárquico, de modo que destaquen en la lectura.

Otro ejemplo es el buscador de Google. Si alguien busca, por ejemplo, “cómo hacer una página web”, al ver que son palabras que coinciden con el título principal de la página, esto le indicará a Google que esa página tiene que ver probablemente mucho con lo que el usuario está buscando.

Como ves con estos dos simples ejemplos, el marcado que proporciona HTML permite hacer muchas más cosas con estos contenidos que con un texto normal y corriente sin marcado. Ese es el propósito básico del HTML, aparte de permitir enlazar las páginas entre sí y crear así la “web” de Internet.

Conceptos HTML fundamentales: Etiquetas, elementos y atributos HTML

A lo largo del tiempo se han desarrollado diferentes versiones de HTML siendo la más usada la versión HTML 4.01. Poco a poco está siendo relevada por la versión HTML 5 que introduce nuevas etiquetas que amplían las posibilidades que tenía HTML 4.01.

Pero en este punto, lo mejor es que ya empecemos a meternos en harina en ver el código HTML de una página web.

Por ejemplo: una versión extremadamente simplificada de este post, tendría un código HTML como el siguiente:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Cómo hacer una página web con HTML</title>
  </head>
  <body>
    <h1>Cómo hacer una página web con HTML</h1>
    <p> En el post de hoy voy a enseñarte <strong>cómo hacer una página web con HTML</strong>, pero antes …</p>
    <h2>Conceptos básicos sobre páginas web</h2>
    <p>¿Cuál es entonces la diferencia entre una página web y un sitio web?…</p>
    <h3>Diferencias entre una página web y un sitio web</h3>
    <p>Una <a href=”https://es.wikipedia.org/wiki/P%C3%A1gina_web”>página web</a> es un <strong>único documento electrónico</strong> que…</p>
  </body>
</html>

El ejemplo empieza con una etiqueta especial que es <!DOCTYPE HTML>, es simplemente una etiqueta especial que tiene que ir al principio de todo fichero HTML e identifica al fichero como un documento en formato HTML.

Lo que sigue son etiquetas anidadas que forman una estructura jerárquica (excepto la línea del DOCTYPE). Fíjate que siempre hay una etiqueta de apertura y una etiqueta de cierre que es la misma etiqueta, pero con una barra invertida delante del nombre de la etiqueta.

Estas etiquetas, junto con el contenido que envuelven, forman lo que se conoce como un elemento HTML.

En el ejemplo podrás observar que hay una estructura básica compuesta por las etiquetas <html>, <head> y <body>. Esto es la estructura básica de cualquier página web.

<html> es el elemento raíz de la página, es simplemente el elemento del que tienen que “colgar” todos los demás, no tiene más función que esa. <head> es la cabecera de la página, una sección con información descriptiva de la página, etc. que no se visualiza como tal en la página, eso le corresponde a la etiqueta <body>. En <body> irán los elementos que vemos realmente dentro del navegador como tales.

Fíjate también en cómo se abren y cierran las etiquetas, por ejemplo, la etiqueta “<title>” (etiqueta de apertura) y “</title>” (etiqueta de cierre). A su vez, estas etiquetas pueden contener a otras etiquetas, como es el caso de <head> que es la que encierra a la etiqueta o elemento “title”.

Si seguimos, verás que varios niveles de títulos con etiquetas <h1> hasta <h3>. Esto sería lo equivalente, por ejemplo, a los estilos de títulos “Título 1”, “Título 2” y “Título 3” en Microsoft Word. En HTML dispones de un total de 6 niveles, de h1 a h6.

Por otra parte, puedes ver varias etiquetas <p>, éstas corresponden a los párrafos que vienen a continuación de los títulos y para las cuales hemos puesto solamente un pequeño extracto de texto como ejemplo.

Fíjate especialmente en las etiquetas tipo <a> que son los enlaces. Ésta es, si cabe, la etiqueta por excelencia del HTML, la que permite crear los hiperenlaces que son lo que hace de la web la web.

Con esto puedo introducir, además, otro concepto fundamental del HTML: los atributos.

Si echas un vistazo con atención, en el caso de la etiqueta <a>, antes del corchete de cierre vienen dos palabras: “href” y “target”. Estas palabras son dos atributos y sirven para especificar parámetros adicionales en una etiqueta. De esta manera le podemos dar mucho más juego a las etiquetas.

En ejemplo concreto el atributo “href” indica la URL de la página enlazada y con el atributo “target” indicamos que, además, queremos que cuando el usuario haga clic en él, la página correspondiente se abra en otra pestaña del navegador.

DISEÑO WEB

Buscar este blog