Aprendiendo HTML, etiquetas

lunes, marzo 21, 2011
COMPARTE EL POST

html

Sigo publicando un pequeño curso sobre HTML en su forma más básica, sin programas que nos generan código de más, ni nada por el estilo, sólo código fuente.

En esta ocasión vamos a ver las etiquetas más importantes y las que más peso tienen hoy en día en los sitios web, así como las que ya no son útiles por el poco entendimiento con el diseño web, o la carencia de utilidad.

¿Cómo se forman las etiquetas?

Ya vimos en previos posts que una etiqueta generalmente se inicia con una “<”, seguido de un nombre o clave, y cerrado con un “>” o un “/>” en caso de que la etiqueta no sea un contenedor; pero en caso de que si se sigue lo siguiente:

<tag>contenido</tag>

Las propiedades de las etiquetas

Así como podemos definir una etiqueta <body> también podemos definir una etiqueta de imagen, que muestre un grafico con <img /> pero por si sola no puede mostrar el grafico sin una dirección y tamaño, por eso existen las propiedades de etiqueta, las propiedades que permiten especificar aspectos de un elemento que estamos creando.

Por ejemplo, si nos regresamos a la etiqueta de imagen <img />, ésta tiene una propiedad llamada “src” (de source) que nos permite especificar una dirección donde la imagen está alojada. Pero bueno, hasta este punto podemos especificar dos tipos de direcciones, las locales, las cuales indican una dirección dentro de nuestra computadora si la página web no está en internet y que empiezan con “C:/”; y las web, o las que que comúnmente usamos y usaremos para direcciones, identificándolas con el “http://”

De cualquier forma tenemos que para definir la dirección de una imagen escribimos:

<img src=”direccion_imagen.formato” />

Y si quisiéramos agregar una anchura y altura usamos “width” y “height”

<img src=”direccion_imagen.formato” width=”cantidad” height=”cantidad” />

Entonces, resumiendo podemos decir que una etiqueta por si sola no siempre suele servir, necesitamos propiedades para especificar aspectos de la etiqueta, estos se definen dentro de la misma y son asignadas colocando un signo “=” y comillas dentro de las cuales colocamos el parámetro.

Las etiquetas más importantes

Ahora si, ya que sabemos un poco sobre las propiedades de etiquetas, podemos empezar a definir algunas de las más usuales, cada una con un ejemplo para ver su funcionamiento, así que empecemos.

Imagen <img />

Propiedades:

src: dirección de la imagen
width: ancho
height: altura
class: clase que se asigna al elemento
id: nombre de identificación

Hipervínculo <a></a>

Propiedades

src: dirección web o referencia a ancla “#”
target: modo de vinculación, _blank para abrir en una nueva ventana, _self,_top para frames
class: clase que se asigna al elemento
id: nombre de identificación

Tablas <table></table>

Propiedades

border: borde de la tabla
cellpadding: espacio dentro de la celda
cellspacing: espacio entre celdas

<tr></tr><td></td>: tr se usa para definir filas, td para columnas

class: clase que se asigna al elemento
id: nombre de identificación

Formularios <form></form> <input />

Propiedades

type: tipo de campo, puede ser button, text, password
value: valor que se muestra en el tipo de campo
class: clase que se asigna al elemento
id: nombre de identificación

Capas <div></div> Saltos de párrafo <p></p> Etiquetas <span></span>

Propiedades

class: clase que se asigna al elemento
id: nombre de identificación

El número de etiquetas que podemos utilizar son muchas, yo les pongo estas porque son las que más se usan para crear una página web, pero así como hay etiquetas que son usadas, hay otras que ya no se usan o no se recomiendan usar.

Etiquetas inservibles

<font>: se usa para definir color de texto, tamaño de fuente y tipo de fuente; se ha reemplazado por <span> y CSS ya que es un estándar más definido y reconocido por los navegadores web.

<frameset><frame>: es quizá la etiqueta que más ya no se usa en internet, los sitios actuales ya no usan frames o marcos para maquetar sitios web, eso ha pasado de moda y lo que se usa son capas y javascript para simular efectos de carga y de movimiento, sin la necesidad de crear páginas inservibles para rellenar con un frame.

<b></b>: si quisiéramos aplicarle a un fragmento de texto un color más negrito, usaríamos esta etiqueta, sin embargo la indexación por parte de Google no reconoce del todo la etiqueta, así que si quieres que los buscadores encuentren y usen tus palabras clave, es mejor usar <strong></strong>

<marquee>: esta etiqueta nos permite crear una pequeña animación lineal de un texto que se mueve de derecha a izquierda, o de izquierda a derecha. La razón por la cual no es útil es porque hoy en día no se necesitas animaciones de texto permanentes, es decir, las animaciones se usan como un efecto cuando se quiere interactuar, y no sólo para ver contenido moviéndose de un lado a otro.

<legend></legend>: en formularios usamos esta etiqueta para poder crear una agrupación, por así decirlo, de campos y botones, sin embargo, a menos que tu quieras tener una línea fea rodeando tu formulario, y que a parte no se vea en todos los navegadores, deberías pensarlo muy bien para insertar la etiqueta.

<dl></dl><dt></dt><dd></dd>: Ya vimos que las tablas se comportan de una forma muy estructurada, y que sólo deben usarse para poner datos, y no poner contenido, no es un contenedor aunque lo parezca. Bueno, tiene entre sus etiquetas derivadas algunas que nos facilitan el trabajo de estilización de la tabla, pero por el hecho de que se puede hacer con las básicas, y por el poco soporte que tienen, no nos sirven de nada más que para crear una tabla muy estructurada y difícil de hacer.

¡Síguenos en Twitter!


Deja tu comentario