El HTML de una página web

Posted on:25 abril, 2017

Author:Andros Fenollosa Hurtado

Category:programación

Share: / /

 

Ya hemos introducido en otras entradas algunos fundamentos del HTML en las páginas web. En esta entrada vamos a intentar introducir adecuadamente este sistema. El texto estará orientado para todas aquellas personas que no tengan ni idea de HTML y puede servir como introducción al mundo del desarrollo web.

Las siglas HTML vienen del ingles HyperText Markup Language o lenguaje de marcas de hipertexto, define la estructura y contenido de un documento dejando de lado la presentación o la apariencia. Es un lenguaje de marcado basado en marcas, tags o etiquetas.

 

 

Cada etiqueta puede tener atributos que indican propiedades de la etiqueta, cada etiqueta puede contener ciertos atributos que son requeridos para su correcto funcionamiento. Cada documento HTML actualmente carga el archivo empezando por la etiqueta <!DOCTYPE html>, seguido por el contenido propio de la página que queramos diseñar.

 

Estructura

Existe un mínimo esquema que debe seguir cada documento HTML que tiene el siguiente aspecto:

 

 

La parte en verde o head contiene información acerca de la página como por ejemplo el titulo que va incorporado en una etiqueta separada llamada title, y que debe ser incluido. Además puede contener otro tipo de etiquetas como <base>, <meta>, <link>, <style>, <script> o <object>. La parte en azul englobada por la etiqueta body es el contenido de la página y la que muestra los distintos elementos relativos a textos, listas, links, multimedia, tablas o formularios.

Finalmente destacar la existencia de los comentarios que pueden aparecer en cualquier lugar de una página web. Los comentarios pueden estar compuestos por múltiples lineas y no son interpretados por el navegador.

<!-- Esto es un comentario -->

 

Elementos

Dentro del body empezaremos a estructurar la página web, para ello utilizaremos una serie de elementos o entidades HTML.

El primer elemento es simplemente el texto, cualquier texto que introduzcamos sera representado tal cual en el resultado final, obviando saltos de línea, tabulaciones y cualquier metodo para su organización.

 

Parrafos

Para utilizar saltos de linea utilizaremos la etiqueta <br> que se utiliza con texto libre pero que es mejor evitarla. Para estructurar diversos parrafos es mejor utilizar la etiqueta <p>,  es la mejor manera de estructuración y de introducir nuevas líneas

<p>Esto es un párrafo</p>

 

Encabezados

Representados por las etiquetas <h1>, <h2>, … <h6>, son útiles para utilizar en títulos ya que ayudan a estructurar el contenido. Su estilo viene dado por defecto pero se puede personalizar con CSS (los estilos de la página web).

<h1>Esto es un encabezado</h1>

 

Aparte de los encabezados, existen otras etiquetas que hacen que el texto sea representado de forma diferente, se puede dividir estas etiquetas en dos grupos. El primer grupo tiene como utilidad formatear texto, aunque esta desaconsejado ya que es mejor utilizar CSS. En este primer grupo encontramos etiquetas como <b>, <i>, <u> o <s>. El segundo tipo de texto es el semántico, estos elementos describen su contenido y el navegador los formatea de una determinada manera. Las etiquetas que encontramos en este grupo son entre otras: <em>, <strong>, <blockquote>, <abbr>, <code> o <address>.

 

Listas

La principal función de las listas es enumerar elementos. Hay que tener en cuenta que se pueden anidad unas listas dentro de otras y que existen tres tipos principales: las listas no ordenadas, las ordenadas y las definiciones de términos.

Listas no ordenadas:


<ul>
   <li>Item 1</li>
   <li>Item 2</li>
</ul>

Listas ordenadas:


<ol>
   <li>Item 1</li>
   <li>Item 2</li>
</ol

Definiciones de términos:


<dl>
   <dt>Termino 1</dt>
   <dd>Definicion 1</dd>
   <dt>Termino 2</dt>
   <dd>Definicion 2</dd>
</dl>

El resultado en el navegador es algo parecido a lo siguiente:

 

 

Links

Los links son los elementos cuyo contenido es un hiperenlace a otro lugar, es decir, al pulsar sobre el elemento (pude ser incluso una imagen) el navegador nos dirigirá al sitio que ha sido indicado en la etiqueta. La tag tiene la siguiente estructura

<a href="...">

El atributo href puede contener una URL absoluta o relativa. Una URL absoluta puede ser la dirección a otro sitio o contenido web diferente al nuestro y la URL relativa se toma como base la URL de la página web actual.

 

Tablas

Las tablas permiten mostrar información de manera tabular, es decir, con filas y columnas. Su uso general es para mostrar todo tipo de datos. Las tablas están compuestas de tres etiquetas principales. Las filas se estructuran mediante <tr>, las columnas o celdas mediante <th> y finalmente las cabeceras de cada columna deben incluir la etiqueta <td>. El número de columnas de cada fila debe coincidir.


<table>
   <tr><th>Cabecera 1</th><th>Cabecera 2</th></tr>
   <tr><td>fila 1, celda 1</td><td>fila 1, celda 2</td></tr>
   <tr><td>fila 2, celda 1</td><td>fila 2, celda 2</td></tr>
</table>

 

Finalmente quedaría hablar de posiblemente el elemento más importante, los formularios. Estos elementos constituyen una complejidad superior a los anteriores y valdría la pena hablar de ellos en una entrada futura. Los formularios son usados principalmente para obtener información por parte del usuario por lo que para construir una página web con contenido estático que simplemente queramos mostrar no son totalmente necesarios.

Leave a comment