Thor 22 de abril de 2008 a las 15.51
   Imprimir artículo
elWebmaster.com

Taller de Adobe Dreamweaver: Etiquetas más usadas


Taller de Adobe Dreamweaver: Etiquetas más usadas¡Hola! ¿Qué tal? ¿Listos para otra clase de Dw/HTML? ¡Así me gusta, siempre dispuestos! Hoy vamos a ver más tags HTML que seguramente les serán de utilidad en algún momento de su vida como webmasters.

Es importante conocer cada tipo de etiqueta, si bien hoy día mucho se maneja con CSS (tema aparte), no por eso son menos válidas y los que no sepan manejar estilos estarán agradecidos de contar con estos aliados.

Conociendo otras etiquetas

Para empezar, vamos a ver uno que nos quedo colgado de la clase anterior, que es el de subrayado.

Como su nombre lo dice, subraya, y se aplica a las palabras que estén en el interior de su etiqueta <u> (esto esta subrayado) </u> .

Este tipo de tags (tags o etiquetas tómenlos como sinónimos en este taller), como también el <center> (este texto esta centrado) </center>, están BASTANTE fuera de moda, pero los pueden sacar de un apuro.

¿Por qué fuera de moda? Bueno, ya lo he nombrado con anterioridad: Hoy por hoy los desarrolladores han limitado el HTML a usar el lenguaje sólo para la ubicación de los elementos que componen una página. La, literalmente, “maquetación” de la página.

Todo el resto, como colores, formateo de texto, fondos, etc. Se ha dejado para los “estilos”.

Pero bueno, como dije arriba, está bueno saberlo, de todos modos, y si a medida que siguen el curso están haciendo algo, van a poder usarlos hasta que aprendan estilos.

Volviendo a los tags:

Otros de mucha utilidad son los tags <br /> y <hr />.

Como ven, su cierre es en sí mismas (tienen la barra al final del mismo tag de inicio).

La etiqueta <br /> lo que hace es insertar un salto de línea.

Por ejemplo si escribimos un texto, y queremos que parte de él se vea debajo, podemos insertar un <br /> que nos dejará un salto entre ambos.

En sí, para que lo entiendan “gráficamente”, es como dar un ENTER en un editor de texto como Word (recuerden que en HTML los “enters” no contaban como saltos).

Por otro lado, la etiqueta <hr /> hace algo similar:

Produce el mismo efecto del <br />, pero a su vez agrega un línea divisoria entre ambos elementos separados.

Ahora cuando terminemos de explicar estos tags HTML, vamos a verlos en funcionamiento en imágenes de Dw para que se entiendan 100% :)

Si no, recuerden: ¡dejen sus comentarios!

Seguimos:

<blockquote>texto</blockquote>

Este tag, nos acomoda el texto que escribamos dentro, en una especie de “caja” que tendrá un margen a la izquierda.

Cada uno le podrá encontrar su utilidad dependiendo las necesidades.

Ahora veremos como funciona en Dw:

<span>texto</span>

Este tag, no hace nada, se utiliza para introducirlo dentro de otros tags, o por sí sólo, para darle un formato diferente al texto de su interior mediante estilos.

Supongamos que tenemos un párrafo, al cual le dimos color azul, y queremos que sólo una palabra tenga color rojo, subrayado, negrita, mayor tamaño y otra fuente (letra).

Si lo hiciésemos mediante HTML puro, necesitaríamos meter este texto que queremos cambiar entre muchos tags (piénsenlo).

Ahora mediante la etiqueta span, nosotros podremos “asignarle” a esta etiqueta todos los formatos juntos y luego el texto en su interior tendrá todas esas propiedades de una sola vez (¿ya van viendo por qué se usan los estilos aparte y HTML sólo para maquetado?).

De a poquito nos vamos a ir dando cuenta de cuánto mejor es.

Bueno, vamos a ver estos ejemplos en Dw. Si podemos todos en una imagen:

Taller de Adobe Dreamweaver: Etiquetas más usadas

El dibujo está un poco complicado, porque las etiquetas, están mezcladas entre sí dentro del código HTML.

Esto lo hice a propósito para que tengan que analizar lo que ven abajo (en lo que sería la salida de la página en el navegador), con el código real, y se den cuenta de cómo funciona cada uno.

Eso sí, si no entienden por favor pregunten así sacamos todas las dudas para seguir con cosas más interesantes y que ¡¡¡ya entren al siguiente nivel!!!

Conclusión

Bueno, aquí terminamos con la parte de tags “básicos”, espero que les haya gustado y que lleven el taller al día.

Ya dentro de poco vamos a aprender elementos que nos ayudarán a ir maquetando nuestra primera página de verdad, visual y con imágenes, para poder ir viendo el fruto de nuestras horas de estudio.

¡Nos vemos la próxima!

¡Hasta luego!

<< CLASE ANTERIOR  

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (5)

  1. Geraldo dice:

    Ya haz impartido clases en algún lugar Guillermo? Así te llamas verdad? /(El autor de esta web) Se ve que nadie se aburriría en tu clase! A excepto de algunos como siempre!

    A me me está encantando todo esto. Si, soy novato! Pero quiero saber siempre más y maaaaas! Muchas gracias por este curso!

    Mi meta es hacer mi página en modo código porque la que tengo es a puro diseño y la vdd está chafita.

    Buenas noches me duermo porque es la 1:20 a.m.

  2. Geraldo dice:

    Hice la práctica que viene en la parte de arriba y me resalta cuatro códigos no válidos. ¿Por que? jeje porque yo no se!

  3. Anne Laure dice:

    Me encanta tu blog! Muy bonito post! Todavía puede hacer muchas cosas para mejorarlo.

  4. Ana dice:

    Hola, tengo una clase en la universidad donde aprendemos con dreamweaver, me agrada como mostraste lo del span, que era una duda que tenia desde comienzos del curso, creo que seguire estudiando, mi examen es manana, saludos

  5. Alejandra dice:

    Excelente tutorial !! verás como pasan los años y seguimos aprendiendo con él. Gracias

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder