NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

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

08 de Noviembre del 2011 por Josep Antoni Bover, 9 visitas, 0 comentarios, 0 votos
Categorías : HTML.
La web está en segundo plano, animación en pausa.
Cargando animación...
Creación de páginas web desde cero (3 Varias etiquetas)

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".

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".

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 :

Etiquetas de titulo
1
2
3
4
5
<h1>Titulo H1</h1>
<h2>Titulo H2</h2>
<h3>Titulo H3</h3>
<h4>Titulo H4</h4>
<h5>Titulo H5</h5>

Titulo H1


Titulo H2


Titulo H3


Titulo H4


Titulo 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"

Veamos un ejemplo de la etiqueta "img" :

Bender bebiendo
Imagen
1
<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"

Veamos un ejemplo de la etiqueta "a" :

Enlace
1
<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 :

Enlace
1
2
3
<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.

Ver Ejemplo Descargar Ejemplo

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