0 FPS

Creación de páginas web desde cero (3 Varias etiquetas)

08 de Noviembre del 2011 por Josep Antoni Bover, 0 visitas, 0 comentarios, 0 votos
Categorías : HTML.

La web está en segundo plano, animación en pausa.

Cargando animación...

En este tutorial vamos a ver varias etiquetas html de uso común para mostrar todo tipo de datos.

Entre otras cosas podéis ver como añadir imágenes y enlaces a vuestros documentos html, ya que cualquier documento html que se precie necesita tanto ilustraciones como enlaces para ser lo más rico posible en información.

También veremos algunas etiquetas descriptivas, que aunque no sirvan para un propósito especifico está muy bien utilizarlas para diferenciar ciertas partes del documento html.

En primer lugar explicare un poco lo que son las etiquetas descriptivas. Una etiqueta descriptiva en esencia no es más que un contenedor de datos, es decir puede tener etiquetas dentro con textos imágenes enlaces y demás. Lo importante de estas etiquetas aunque no se vea de cara al usuario final es que informan al navegador de que esa parte contiene un tipo específico de información.

Veamos algunas de las etiquetas descriptivas que mas utilizo : "article", "aside", "footer", "header", "section".

• La etiqueta "article" describe que la parte en cuestión forma parte de un artículo en concreto. Por ejemplo en la página principal de un blog donde se ven varios artículos utilizaríamos esta etiqueta para delimitar cada uno de los artículos mostrados.

• La etiqueta "aside" describe que la parte en cuestión forma de un menú lateral. Por ejemplo en mi web podéis ver a la derecha la sección "Enlaces más visitados", "Sigue devildrey33 en", "Enlaces más comentados" y "Pagina web escrita en HTML5!", estos cuatro recuadros están incluidos bajo una etiqueta aside que informa al navegador de que esa parte pertenece a un menú lateral.

  NOTA : esta etiqueta no tiene nada que ver en que el menú salga a la derecha o a la izquierda, como ya he comentado es únicamente informativa, y no por utilizarla nos saldrá esa parte en un lateral. Esto se hace utilizando estilos, y lo veremos en otro tutorial más adelante.

• La etiqueta "footer" describe que la parte en cuestión forma parte del pie de la pagina. Actualmente muchas páginas tienen una parte inferior donde se incluye un menú, o un texto informativo a cerca de su creación, licencia, etc...

• La etiqueta "header" cumple el mismo objetivo que la etiqueta footer, pero para la cabecera de la pagina, es decir para la parte superior.

• La etiqueta "section" quizás es de las mas indefinidas ya que engloba una sección. El termino sección es tan general que puede abarcar cualquier cosa, incluso se podría utilizar para la cabecera o el pie de página. También podemos utilizarla por ejemplo si tenemos una sección con enlaces a otras páginas, con una serie de imágenes / fotos, etc...

NOTA : Como ya he comentado las etiquetas descriptivas no cumplen ningún propósito concreto, y son más que nada para tener dividido el documento html en partes que el navegador pueda enumerar. A la hora de ver la página web no vamos a notar ninguna diferencia tanto si tiene etiquetas descriptivas como si no las tiene. Pero a mi modo de ver es mejor utilizarlas ya que en un futuro podrían ser utilizadas por buscadores para distinguir mejor la información.

Vistas algunas etiquetas descriptivas vamos a ver algunas etiquetas que permiten modificar el formato del texto : "b", "i", "s", "strong", "u".

• La etiqueta "b" viene del ingles bold, y lo que hace es poner en negrita el texto que se encuentre dentro.

  Texto en negrita

  1

  <p>Texto normal, <b>Texto en negrita</b>.</p>
  

  Texto normal, Texto en negrita.

• La etiqueta "i" viene del ingles italic, y lo que hace es poner en cursiva el texto que se encuentre dentro.

  Texto en cursiva

  1

  ERROR!! No se ha encontrado el comentario [FIN devildrey33.ID2]-

  Texto normal, Texto en cursiva.

• La etiqueta "s" viene del ingles strike, y lo que hace es tachar el texto que se encuentre dentro.

  Texto tachado

  1

  <p>Texto normal, <s>Texto tachado</s>.</p>
  

  Texto normal, Texto tachado.

• La etiqueta "strong" es en parte una etiqueta descriptiva pero que además aplica un estilo al texto, y lo que hace es poner en negrita el texto que se encuentre dentro. En los buscadores puede ser utilizada para buscar palabras clave.

  Texto en negrita 2

  1

  <p>Texto normal, <strong>Texto strong</strong>.</p>
  

  Texto normal, Texto strong.

  NOTA : personalmente esta etiqueta no la utilizo prácticamente nunca ya que es mas rápido escribir la etiqueta "b" de todas formas quizás es una mala costumbre. Tampoco hay que abusar de esta etiqueta o de lo contrario puede terminar siendo ignorada por el buscador.

• La etiqueta "u" viene del ingles underline, y lo que hace es subrayar el texto que se encuentre dentro.

  Texto subrayado

  1

  <p>Texto normal, <u>Texto subrayado</u>.</p>
  

  Texto normal, Texto subrayado.

  NOTA : personalmente esta etiqueta tampoco la utilizo, ya que los enlaces vienen subrayados por defecto, y esto puede confundir al usuario.

Ahora que hemos visto algunas etiquetas para modificar el formato del texto podemos pasar a las etiqueta "h1", "h2", "h3", "h4", "h5". Estas etiquetas se utilizan para mostrar títulos, y lo que hacen es mostrar el texto en un tamaño más grande.

La etiqueta "h1" mostrara el titulo con la fuente más grande por defecto, la etiqueta "h2" mostrara el titulo con una fuente algo más pequeña que la etiqueta "h1", y así hasta llegar a la etiqueta "h5". Veamos un ejemplo :

<h1>Titulo H1</h1>
<h2>Titulo H2</h2>
<h3>Titulo H3</h3>
<h4>Titulo H4</h4>
<h5>Titulo H5</h5>

Ahora que hemos visto las etiquetas para mostrar títulos podemos pasar a la etiqueta "img". Esta etiqueta se utiliza para incluir imágenes dentro del documento, y tiene varios atributos obligatorios : "src", "alt"

• El atributo "src" viene del ingles source y debe contener la ruta relativa de la imagen. Ojo tenéis que escribir el nombre exactamente igual con mayúsculas y minúsculas. Si el servidor que muestra la pagina web corre bajo windows no hay problema, pero si el servidor resulta que corre bajo linux, no es lo mismo poner "./MI IMAGEN.JPG" que poner "./Mi Imagen.jpg" ya que en linux podríamos tener esos dos archivos en el mismo directorio.

  NOTA : Si tenemos la imagen en el mismo directorio que el documento html podemos indicar directamente en el source "Mi Imagen.jpg", en cambio si por ejemplo la tenemos en un subdirectorio llamado "Graficos" debemos especificar la ruta de la siguiente forma "./Graficos/Mi Imagen.jpg". Fijaros en que el primer carácter es un punto, esto indica que la ruta relativa será el directorio donde se encuentra el documento html.

• El atributo "alt" viene del ingles alternative text, y su función es proveer un texto alternativo ya que pueden haber casos en que no sea posible mostrar la imagen, y de esta forma aunque no se pueda mostrar la imagen aparecerá el texto alternativo.

Veamos un ejemplo de la etiqueta "img" :

<img src='bender.jpg' alt='Bender bebiendo' />

Fijaros también en que esta etiqueta es una etiqueta completa, es decir se abre y se cierra en la misma etiqueta, por lo que no puede contener datos extras dentro de ella.

Otra cosa a remarcar es que podemos utilizar los atributos width y height para especificar el tamaño de la imagen, pero ES MUY POCO SALUDABLE, por qué? Pues el problema reside en que si especificamos que la imagen tenga otro tamaño del que realmente tiene, el navegador tiene que adaptarla, y no tiene porque salir bien. Además si por ejemplo la imagen hace 1000x1000, pero la reajustamos a 200x200 estaremos haciendo cargar al navegador muchos más datos de los que debería, ya que el archivo original pongamos ocupa 500KB pero si estuviera a 200x200 podría ocupar 20KB.

En definitiva utilizar los atributos width y height en una imagen si no se especifica su tamaño exacto es muy problemático, de todas formas debéis saber que para especificar el tamaño se puede hacer en pixeles, o en porcentaje, por ejemplo podemos poner width='200%' por lo que el navegador mostrara la imagen el doble de ancha de su tamaño original, o podemos poner width='100px' por lo que el navegador ajustara el ancho de la imagen a 100 pixeles.

Por último vamos a ver cómo podemos crear enlaces a otros documentos html. Para ello se utiliza la etiqueta "a" y tiene los siguientes atributos : "href", "target"

• El atributo "href" indica la dirección del enlace al que queremos conectar.

• El atributo "target" es opcional y indica donde queremos abrir el enlace. Puede que queramos abrir el enlace en la misma página donde nos encontramos, por lo que saltaríamos de nuestro documento al documento enlazado. O puede que queramos abrir el enlace en una nueva pestaña del navegador.

  Si no especificamos el atributo "target" por defecto el enlace se abrirá en la misma pestaña donde nos encontramos, pero si por el contrario queremos abrir el enlace en una pestaña nueva debemos especificar target='_blank'.

Veamos un ejemplo de la etiqueta "a" :

<p>Página oficial de <a href='http://www.comedycentral.com/shows/futurama/index.jhtml' target='_blank'>Futurama</a>.</p>

Página oficial de Futurama.

NOTA : Si por ejemplo queremos que al pulsar encima de una imagen nos envié a un enlace lo podemos hacer de la siguiente forma :

<a href='http://www.comedycentral.com/shows/futurama/index.jhtml' target='_blank'>
    <img src='bender.jpg' alt='Bender bebiendo' />
</a>

Y con esto terminamos la tercera parte del tutorial. Si lo deseáis podéis ver el ejemplo online o descargar el ejemplo para poder editarlo en vuestro ordenador.

Podéis seguir con el siguiente tutorial HTML5 : Creación de páginas web desde cero (4 Estilos).