Paso 03: Estructura de una Página Web

Estructura de una Pagina Web

Estructura básica de un documento HTML

Una página web mantiene siempre la misma estructura, consistente principalmente en dos partes:

Cabecera

La cabecera de la página, donde se definen algunos datos que no se representan cuando se ve la página, como información sobre el título de la página, el autor de la página, editor con el que se ha creado la página, juego de caracteres que debe usar para representar la página, etc. Por ejemplo:

Todo lo definido entre las etiquetas <HEAD> …. </HEAD> conforma la cabecera del documento.

Entre los elementos de la cabecera hay que destacar el elemento <TITLE>, que es obligatorio, e indica el título de la página. Este título es utilizado por los navegadores visuales para dar nombre a la ventana en la que se está viendo la página.

Cuerpo

El cuerpo del documento, donde se define el contenido visible de la página web.

Al igual que para la cabecera, todo lo definido entra las etiquetas <BODY> … </BODY> constituye el cuerpo de la página.

Además, existe otra etiqueta (<HTML>) que sirve para indicar donde comienza y termina la página web. De esta forma, la estructura completa de la página web sería:

<HTML>

<HEAD>

.........

</HEAD> <BODY>

.........

</BODY>

</HTML>

A partir de aquí veremos los elementos básicos que podemos poner en una página web, con las características que se pueden definir sobre cada uno de ellos, así como la forma en que se especifican estas características.

Etiquetas del HTML más relevantes

<link> y <style>: ambas van dentro del <head>, y sirven para aplicar estilos CSS a nuestro documento. Con <link> vinculamos de forma externa un archivo.css, y con <style> podemos escribir directamente código CSS dentro del head.

<title>:  también va dentro del <head> y sirve para definir el titulo de una página. Importantisimo para el SEO.

<h1>, <h2>, <h3>….<h6>: encabezados, numerados del 1 al 6 por orden de RELEVANCIA. El uso de estos encabezados es determinante para el SEO, porque es la mejor forma que tienen Google de entender la estructura de nuestro contenido y poder saber qué es lo relevante.

📎 Un pequeño tip: no se te ocurra, meter dos o más encabezados <h1>. Lo mejor, es poner sólo uno y que contenta tu keyword, y luego estructurar el contenido de forma coherente con <h2> y <h3>, incluyendo en ello la keyword y variantes, no siempre la misma exactamente.

<table>, <tr> y <td>: son las tablas, las filas y las celdas. Están un poco obsoletas aunque a veces me han sacado de un apuro.

<div>: es un elemento “contendedor” de otras cosas. Realmente es lo que más se usa. Sabiendo manejar un <div style=”loquenecesites”>contenido</div> puedes hacer casi todo. Podrás ver un ejemplo práctico al final del post.

<a>: para añadir enlaces. Dentro de ella tendremos dos atributos importantes, que son: href=”indica_la_URL_o_RUTA” y target=”self o _blank”, según quieras que el enlace se abra en la misma página o en una pestaña nueva.

<img> es la etiqueta con la que se insertan las imágenes. Este es uno de los pocos casos que no necesita etiqueta de cierre, sino que vale con: <img src=”rutadelaimagen” alt=”textoalternativo” />, sin poner </img>

<li>, <ol>, <ul>: son las etiquetas que controlan las listas ordenadas y desordenadas. Ejemplo:

  • Estos circulos son de listas desordenadas, usando la etiqueta <ul>
  1. Este número sale porque utilizo una lista ordenada, con <ol>
  2. Cada elemento o item de una u otra lista, se controla medianta <li>

<b>: convierte el texto a negrita. Tambien os podéis encontrar con el antiguo <strong> que hace lo mismo.

<i>: lo mismo pero para aplicar cursiva al formato de un texto. Ejemplos: esto irá en <b>negrita</b> y este otro texto en <i>cursiva</i>

<p>: con esta etiqueta determinamos un texto de párrafo. Se le aplican estilos como a todas, el dato relevante de esta etiqueta sería explicar el hecho de que añade un salto de línea y otro más al cerrarla con </p>, como si diéramos dos veces al “intro”, para que me entiendas.

<br />: esta otra etiqueta sin embargo, hace un salto de línea simple. Es decir, lo que venga después de esto irá justo en la linea siguiente, pero sin dar otro espacio más.

Documentos con Frames: Con los frames es posible dividir la ventana del navegador en varias subregiones (frames), permitiendo mostrar una URL distinta en cada una de ellas.

Elementos Multimedia: Existen una serie de etiquetas y atributos que permiten el uso de elementos multimedia, pero no es estándar y se puede asegurar que no será posible verlos en máquinas distintas a los PC con Windows, ni en navegadores distintos a este.

FORMULARIOS: Los formularios son plantillas que permiten la creación de documentos HTML con periciones de datos. La principal utilidad de los formularios esla posibilidad de crear cuestionarios, encuestas, páginas de comentarios o cualquier documento en la que se desee una iteracción por parte del usuario.

Doctype XHTML (tipo de documentos): El doctype es la declaración de tipo de documento. En otras palabras, el doctype nos sirve para indicar que nuestro documento está escrito siguiendo la estructura determinada

📎 IMPORTANTE: todas estas etiquetas html puedes verlas al esribir un post en la pestaña de “TEXTO”, no es la de “VISUAL”. Si lo haces en visual, se escribe la etiqueta como un texto normal (tal y como estoy haciendo yo en este post), pero si quieres modificarlas debe ser en la pestaña texto, donde luego no aparecen en visual pero sí están cumpliendo su función.

¿Necesitas más información acerca de la estructura de una Web? Contáctame o deja tu duda en los comentarios.

5 (100%) 2 votes

Deja un comentario