Thor 15 de Abril de 2008 a las 13.52
   Imprimir artículo
elWebmaster.com

Taller de Adobe Dreamweaver: Etiquetas más usadas


Taller de Adobe Dreamweaver: Etiquetas más usadas¡Buenas! ¡Bienvenidos al Taller de Adobe Dreamweaver/HTML! ¿Cómo andan? ¿La pasaron bien el fin de semana? ¡Espero que sí! Pero bueno, el fin de semana pasó y ahora volvemos al estudio. ¡Espero que con ganas!

Hoy nos toca conocer las etiquetas (o tags) más comunes del HTML, las que se usan todo el tiempo en la creación de páginas web. Vamos a ir por partes para que no les quede ninguna duda. ¿Empezamos?

Las etiquetas más comunes en realidad son las que arman o distribuyen el espacio de la página, pero como esas las vamos a ver dentro de un par de clases, por lo pronto vamos a estudiar detenidamente las que se usan dentro del armado, por ejemplo, las de inserción de imágenes, escritura y formato de texto, y algunas otras más, con todas sus propiedades.

Etiquetas

La parte “HTMLesca”

¿Quién en una página no pone algo, aunque sea mínimo de texto?

Y bueno, entonces vamos a empezar por lo básico, las etiquetas para texto.

Vamos a ir por orden jerárquico, es decir, de importancia dentro de un texto, como si de un diario (periódico) se tratase.

h1: Esta etiqueta, se utiliza para tĂ­tulos y comienza con la apertura <h1> y termina con el cierre </h1>.

Es la de mayor jerarquía entre las etiquetas de texto, por lo tanto tiene mayor tamaño y grosor.

Si bien estas propiedades pueden cambiarse, no en vano están así.

Existen otras etiquetas “H”, que son las h2, h3, …, que van disminuyendo su tamaño proporcionalmente, junto con su grado de importancia. Estas se utilizan en subtítulos, copetes, etc.

Si sabemos que los tamaños de las letras se pueden cambiar y los grosores también ¿entonces qué diferencia hay?

Bueno, primero que nada que si nosotros le “seteamos” a nuestra etiqueta h1 un tamaño, letra y grosor por defecto, con estilos, en todos los lugares donde la pongamos saldrá igual (ya veremos cómo).

Esto nos ayuda a mantener una sincronĂ­a entre los tipos de cosas que pongamos en nuestro sitio.

Otra cuestión es también que los buscadores (como Google) le dan preponderancia a las palabras más importantes del sitio a la hora de agregar una página a su base de datos.

Entonces, cuando alguien busque por “X” palabra en Google, tendremos más posibilidades de aparecer más arriba en el buscador, si esta palabra se encontraba en el título, que si se encontraba en un párrafo.

(El tema de los buscadores es muy extenso y no sólo esto tiene que ver, tomen este comentario solo como una referencia de que por algo existen las etiquetas que existen, y no están porque sí).

Además recordemos que debemos mantener un orden semántico en nuestro texto, y sería desprolijo poner un título en un párrafo con un texto grande, y poner un párrafo en un <h1> con un texto chico.

¡Las cosas hay que hacerlas bien!

Siguiendo con otras etiquetas:

¿Quién no vio en su escuela primaria oraciones y párrafos?

…y acá la tenemos, la etiqueta de párrafo.

Esta etiqueta comienza con <p> y termina con </p>. Dentro de estas dos, podemos escribir todo el texto que queramos y tendrá la característica de pertenecer a este mismo párrafo (obviamente).

¿Y por que lo cuento? Más que nada para que sepan que todas las propiedades que le agreguen al párrafo se les agregarán a todas y cada una de las palabras en su interior (por ejemplo: color, negritas, itálicas, tamaño de letra, etc).

Otra etiqueta que casi la podemos ver en cualquier página y que se usa en cualquier editor de texto común que encontremos por ahí, es la etiqueta de negrita.

Esta etiqueta tiene como comienzo un <b> y como cierre un </b> (ya irán notando similitudes entre aperturas y cierres, por si no se las digo bajito pero no cuenten nada: “/”).

Otra etiqueta para poner negritas es la que está delimitada por <strong> </strong>, esta etiqueta, al igual que la anterior, nos pone todo el texto de su interior en una letra de mayor densidad (digo mayor densidad y no “más negra”, porque si la letra no fuera negra….ustedes me entienden :p , y si no ¡preguntan!).

La diferencia entre la etiqueta <b> y la etiqueta <strong> es más que nada de carácter semántico.

Mientras que la <b> se utiliza simplemente para resaltar un texto, la <strong> se utiliza para reforzar un texto.

Si bien las dos se ven iguales, lo correcto serĂ­a que usemos cada una para lo que corresponde (al igual que los <h*>).

Y siguiendo con los formateos de texto, nos encontramos con la etiqueta de itálicas, que tiene como apertura <i>, y como cierre </i> (¡¡Ya, díganme que entendieron lo de la barra!! Jaja)

Esta etiqueta al igual que en la mayorĂ­a de los editores de documentos, inclina el texto que contiene.

Su correspondiente en orden semántico, es la etiqueta <em> </em> que significa en inglĂ©s “emphasis” (Ă©nfasis) y se utiliza, bueno, para eso mismo.

¡Y acá nos encontramos con los caprichos semánticos del HTML, y vamos más allá!

Otra etiqueta que tiene el mismo efecto que las dos anteriores es la etiqueta <cita> </cita> que sirve para mostrar textos citados y que tiene el mismo efecto que las dos etiquetas anteriores, su Ăşnico cambio es el nombre, que coincide con el contenido a mostrar.

(Aclaración: por defecto estas etiquetas vienen con un tamaño, color, inclinación, grosor, y espaciado de letra específico. Pero recordemos que esto se puede cambiar mediante estilos, que ya veremos que son, y de esta manera nuestras etiquetas solo diferentes semánticamente, podrán ser diferentes también visualmente, y ahí sí tendremos además de el correcto uso de las etiquetas, la diferenciación específica-visual de cada una).

Y nos vamos a otra más linda. (Depende la chica/o que le pongamos adentro jeje).

¡La etiqueta de imagen!

Esta etiqueta tiene la particularidad de que empieza y termina en el mismo lugar.

Lo lĂłgico a pensar siguiendo lo que venimos diciendo en la clase, serĂ­a que esta etiqueta tendrĂ­a una composiciĂłn como esta: <imagen> </imagen>, pero no es asĂ­.

Esta etiqueta arranca con <img y cierra en Ă©l mismo, con la barra.

QuedarĂ­a de esta manera <img />.

Dentro de su interior pondremos el lugar de donde leerá la imagen y un texto alternativo a mostrar, en caso de que la imagen no este disponible, o que el navegador destino no soporte imagen (¿qué raro no?).

Vamos a mostrar los atributos de esta etiqueta para aprender todo lo necesario para usarla.

src

Este atributo es la que va a contener la url del lugar en donde tengamos la imagen, por ende es indispensable que esté.

alt

Este atributo va a contener un texto alternativo para que, en caso de que nuestra imagen no este disponible, no dejar el espacio en blanco y que la gente no sepa que es lo que iba ahĂ­.

width/height

Estas dos son otras de las propiedades de la etiqueta <img /> y son opcionales, ya que por defecto la etiqueta toma el tamaño real de la imagen.

Una etiqueta completa de imagen, con sus atributos necesarios y también con los opcionales quedaría de esta manera:

<img src=”http://página.com/lugardelaimagen/imagen.jpg” alt=”descripción” width=”100px” height=”100px” />

En caso de que tengamos la imagen en nuestro sitio, serĂ­a (y ya sin atributos opcionales)

<img src=”lugardelaimagen/imagen.jpg” alt=”descripción” />

Acá tenemos la etiqueta más clickeada del mundo!

¡Con ustedes…… tururururu, PA!

¡¡La etiqueta para crear enlaces!!

Esta etiqueta esta formada por su apertura <a> y su cierre </a>

Además de su apertura y cierre, tiene atributos indispensables sin los cuales no funcionaria como debe.

Antes que nada tenemos que pasarle un contenido, si no ¿¡a quien vamos a clickear!?

Este contenido puede ser un texto, o una imagen, o lo que tengamos ganas de que cuando sea clickeado nos lleve a algĂşn lado.

Los atributos de la etiqueta en sĂ­ son:

href

En este atributo deberemos ponerle lugar a donde queremos que nos lleve esta etiqueta cuando hagamos clic sobre ella.

title

Este atributo es el que nos abre el cuadradito amarillo famoso (tooltip) con el tĂ­tulo del enlace cuando le pasamos por encima.

target

En este atributo vamos a indicar si queremos que nuestro enlace abra una nueva ventana para su destino (“_blank”), si queremos que cargue la página en el mismo lugar en que estamos(“_self”), y (“_top”) y (“_parent”) que son similares a los anteriores pero se usan cuando utilizamos <frames> (cosa que no me gusta nada :p).

De esta manera un enlace completo podrĂ­a ser:

<a href=”http://www.elwebmaster.com” alt=”página de elwebmaster” target=”_blank”>Click aquí para ir a la página de elwebmaster.com</a>

Este enlace, se mostraría en la página de esta manera:

“Clic aquí para ir a la página de elwebamster.com”

Y si lo clickearamos nos abriría una ventana nueva del navegador (o pestaña en caso de que usemos Firefox, en la que cargaría la página de elwebmaster.

También, por el texto alt, si pasáramos sobre el link, sin clickearlo, nos mostraría la leyenda “página de elwebmaster”.

Otra manera y empezando a combinar, podrĂ­a ser:

<a href=”http://www.elwebmaster.com” alt=”página de elwebmaster” target=”_blank”>

<img src=”logodeelwebmaster.jpg” alt=”elwebmaster.com” />

</a>

De esta manera, tendríamos la imagen del logo de elwebmaster que cuando la clickeemos nos llevará a verla en una nueva ventana.

Otro de los usos que le podemos dar a la etiqueta de enlaces (en realidad se llama “anchor”, en español “ancla”), es justamente el de punto de ancla.

Habrán visto en alguna página que clickean un enlace y no van a otra página, sino que los lleva a una parte de esta misma.

Generalmente se ve en índices o, en finales de las páginas, la leyenda “Volver arriba”.

Este tipo de etiquetas es ni más ni menos que un <a> utilizado de otra manera.

En el enlace que queremos que al clickear nos lleve a otra parte de nuestra página debemos poner:

<a href=”#lugar”>Ir hacia el lugar</a>

Y en el lugar que queremos que sea el destino cuando clickeemos el <a> anterior, debemos poner:

<a name=”lugar”>Llegué a este lugar</a>

Entonces cuando clickeemos en “Ir hacia el lugar” la página se correrá hacia arriba o hacia abajo, hasta que lleguemos al enlace con el nombre indicado (en este caso “lugar”).

Si no entienden algo me preguntan por comentario, no sólo de esto, sino de cualquier cosa ¡recuerden!

Y por Ăşltimo, vamos a ver la etiqueta de comentario, la etiqueta “de cierre” del dĂ­a de hoy, que justamente no cierra con la “/” :p .

Esta etiqueta inicia con <!– , y finaliza con –>.

Todo lo que escribamos entre estas dos etiquetas no saldrá en pantalla cuando mostremos la página.

Sirve a los creadores de páginas web, para anotarnos cosas a modo de recordatorio, o para cuando trabajamos en grupo, que otra persona sepa qué es lo que vamos haciendo paso a paso.

Es buena práctica comentar nuestro código, ya que cuando se hace muy extenso, puede ser complicado de entender y nos evita tener que leernos todo para poder darnos cuenta.

Ojo, también es bueno borrar los comentarios en la página final que vamos a tener subida a nuestro hosting, porque los comentarios pesan igual que cualquier otro caracter, por ende, hacen más grande nuestro HTML (y tarda más su carga).

La parte “Dreamweaveresca”

Como este taller es un conjunto entre HTML y Dreamweaver, vamos a mostrar algunas maneras de hacer las etiquetas aprovechando las herramientas que el programa nos da.

Ejemplo de etiqueta A:

Taller de Adobe Dreamweaver: Etiquetas más usadas

Seleccionamos el texto que queremos que sea un enlace, pulsamos el botĂłn de Hyperlink (clase de barra Insert numero 1) y se nos abre la caja para completar con los datos necesarios.

A mi parecer, una vez que nos acostumbremos al código, es más fácil escribirlo a mano que hacerlo en la caja. Pero bueno, de esta manera uno no se olvida los campos que tiene que completar.

Ejemplo etiqueta B:

Taller de Adobe Dreamweaver: Etiquetas más usadas

Como ven, seleccionamos el texto a poner en negrita, y luego apretando el botón “B” nos pondrá ese texto entre, CURIOSAMENTE, la etiqueta <strong>.

El tag que deberĂ­a poner en realidad serĂ­a el <b> </b> o bien el botĂłn del Dw llamarse STRONG.

Estas cosas son las que menos me gustan de Dw, que hace cosas por convenciĂłn sin respetar los criterios reales de cada etiqueta.

Pero bueno, también hay que saber que la W3C (ver primeras clases) esta por sacar del estándar los tags <i> y <b> para dejar solo los <strong> y <em>, así que talvez lo hayan hecho así, para que en un futuro, los tags que insertan los botones no queden desactualizados.

¡¡Por esta vez te perdonamos Dreamweaver!!

ConclusiĂłn

Bueno, llegamos al final.

En esta clase vimos algunas de las etiquetas más usadas, dentro de lo que es el contenido de las páginas web.

En clases siguientes veremos algunas más y luego otras, exclusivas para el armado, como las tablas y los divisores.

Espero que les haya gustado la clase y que la hayan leĂ­do toda, porque saliĂł bastante larguita :p .

Nos vemos la semana que viene con más Taller de Dreamweaver/HTML.

¡Hasta luego!

<< CLASE ANTERIOR  

CLASE SIGUIENTE >>


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

Comentarios (19)

  1. Diego Rodriguez dice:

    Exelente su curso de dreamweaver, cuando empeso de inmediato e pregunte, O.o como van a hacer un curso de dreamweaver, explicar html y css !? O.o
    Pues veo que de a poco lo logran ^^
    Un saludo Y extremadamente recomenadable su curso.

    pd: hay un error en la parte donde muestran la imagen ^^

    deberia ser: img src=”http://página.com/lugardelaimagen/imagen.jpg” alt=”descripción” width=”100” height=”100”

  2. Thor dice:

    Gracias por la buena onda diego, espero seguir viéndote por acá aunque sea para acomodarme las faltas de ortografía jeje.

    Es un hecho que siempre le erro al width (por widht) y al height (por heigth) cuando escribo rápido.
    En realidad, le erro a muchas cosas más, por suerte tengo a Juan Manuel, mi editor personal :D que me corrige todos los “horrores” de ortografĂ­a.

    ¡Saludos!

  3. kendrick dice:

    Hola, tengo dudas en cĂłmo insertar un comentario y que este aparezca en una direcciĂłn de correo para ser valorado antes de publicarlo.

  4. Thor dice:

    ¡Hola, kendrick!

    ÂżComo va todo por ahĂ­?

    Qué bueno, que la gente se interese por el taller.

    Con respecto a tu pregunta, no estoy del todo seguro a quĂ© te refieres, pero te respondo lo que “creo” que me preguntaste :p

    Para que alguien introduzca un comentario en tu página, y sea enviado a un e-mail para poder… hacer lo que quieras con Ă©l :p … necesitas más que HTML y Dw.

    Necesitas un lenguaje de programaciĂłn como PHP y un servidor de mailing.

    Si te interesa, en esta misma página, hay un taller de PHP que se dicta a la par de este, entre otros, y que de seguro va a tocar este tema de mandar mails y newsletters.

    ¡Es muy recomendable!

    Saludos!
    Thor.

  5. kendrick dice:

    Muchísimas gracias Thor esa es mi duda preguntare en el otro curso. Yo sigo el tuyo que está muy bueno sobre todo para varios niveles. Saludos.

  6. kendrick dice:

    Saludos para todos, me mandaron un css para los link que lo encuentro buenísimo, yo lo hacía de otra manera: tenía que declarar todo por cada estilo y esto me lo ahorra, pero quisiera saber cómo escribir un estilo en la misma página que no tome las características de un link, sino características de un cuerpo de texto. Aquí está lo que me dieron. Muchas gracias.

    a:link,
    a:visited { color: #5e811a; text-decoration:none;border:none;}
    a:hover { color: #ff5400; text-decoration: none;border:none;}
    a:active { color: #ff5400; text-decoration: none;border:none;}

    .style1 {color: #D7EAF6; font-size: 13px;}

  7. Julian dice:

    tengo una cosulta. quiero hacer una etiqueta que cuando haga click vaya para abajo en la misma pagina que esta la etiqueta. lei la guia pero no logro que me salga nose que pasa. si me podrias hayudar. graciasss

  8. Paola dice:

    Hola!! Como estan todos? Me gustaria saber si dentro del taller va a haber alguna parte practica, es decir ejercicios, por que veo que muchos ya arrancaron haciendo algo y yo todavia no me animo, o que alguien me tire alguna idea :p
    Saludos!!!

  9. DĂ©bora dice:

    Hola soy Debora de la ciudad de mar de plata, encontre este taller de casualidad y la verdad…GRACIASSSSSSSSSS!!!! sos muy metodologico al momento de explicar, y haces las cosas tan sencillas que da gusto aprender!!!
    gracias nuevamente!!!!

  10. DĂ©bora dice:

    yo de nuevo, consulta: como hago para restringir el alto de la tabla desde el codigo y que me lo tome?… porque yo hago lo siguiente:
    entro al codigo

    (agrego la etiqueta) height=”600″ pero no me lo toma … que es lo q hago mal y como puedo modificarlo? gracias!!!

  11. Jose Luis dice:

    Âżcomo puedo hacer para que los enlaces que meto en una web no sean mostrados en la barra inferior del explorador de internet? me explico, cuando situamos el raton sobre un enlace, en el explorador, abajo a la izquierda, aparece la direccion a la que corresponde el enlace y quisiera que no apareciera. Âżhay algun modo de hacerlo?
    muchisimas gracias

  12. Thor dice:

    ¡Hola Jose Luis!

    Para hacer lo que dices necesitas usar “javascript”.
    DeberĂ­as quitar la url de la etiqueta de enlace y llamar a la funciĂłn “window.location”, enviandolo a la página que corresponda.

    En esta nota hay un ejemplo igual al que tienes que usar:
    http://www.elwebmaster.com/articulos/javascript-llamando-eventos-inline

    Esta muy claro y es fácil de hacer.

    Cualquier problema no dudes en preguntar.

    ¡Saludos!

  13. whillow dice:

    Hola, hoy mismo acabo de encontrar esta página para aprender HTML y estoy viendo que es fantástica, muchísimas gracias por tu aportación a la enseñanza, estoy muy ilusionada y pienso seguir. Por ahora no tengo preguntas porque acabo de empezar y quiero estudiar bien los enlaces, imágenes etc,etc, pero sinceramente te animo a que sigas enseñando así..
    Saludetes.

  14. MONICA RUIZ ALCANTARAZ dice:

    HOLA QUISIERA SABER COMO HACER UNOS BOTONES EN HTML CAMBIANDOLES EL ESTADO.

    GRACIAS

  15. Alfredo Pulido dice:

    Excelente, gracias por el contenido!!

  16. Maria Fernanda Arocena dice:

    Hola Thor!!
    Estoy re contenta!!!..hace pocos meses que estoy en esto..y aprendiendo sola, y hoy buscando info encontre esta pagina y uffff!!! buenisima toda la info que fui leyendo..agradezco que te tomes el tiempo de hacer esto. Por parte no tengo tiempo de ir a hacer cursos, y bueno…aca estoy aprendiendo por mi cuenta.
    Justo estaba buscando como lograr que un enlance me lleve a oyto lugar en la misma pagina, solo que lo pruebo y no me funciona. Quiero desde la palabra PORTFOLIO me lleve a DISEĂ‘O GRAFICO, y donde inserto exactamente los codigos.
    Te agradeceria muchisimo tu ayuda!
    Besos..Fer

  17. Ferrante dice:

    Primero que todo, MUCHAS GRACIAS por hacer este curso. Me siento como llevado de la mano por el camino del aprendizaje; muy práctico y comprensible.
    Encontré lo siguiente y no aguante comentarlo a ver sus opiniones al respecto:
    En el siguiente cĂłdigo que pusiste
    Click aquí para ir a la página de elwebmaster.com
    El atributo alt no muestra lo que deberĂ­a mostrar (el tooltip con la leyenda “página de elwebmaster”). Creo que se te fue en vez del Title. ;)

  18. Ferrante dice:

    Repito el comentario anterior porque no sabĂ­a que la caja de texto leĂ­a html y no mostrĂł el cĂłdigo sino que lo interpretĂł :$

    Primero que todo, MUCHAS GRACIAS por hacer este curso. Me siento como llevado de la mano por el camino del aprendizaje; muy práctico y comprensible.
    Encontré lo siguiente y no aguante comentarlo a ver sus opiniones al respecto:
    En el siguiente cĂłdigo que pusiste
    a href=”http://www.elwebmaster.com” alt=”página de elwebmaster” target=”_blank”
    El atributo alt no muestra lo que debería mostrar (el tooltip con la leyenda “página de elwebmaster”). Creo que se te fue en vez del Title.

  19. Juan Manuel dice:

    Hola!.. siendo 12 de marzo de 2012 les comento que he estado leyendo las clases y me ha dado una idea de lo que es en si HTML y como lo puedo usar de manera Ăłptima.. Muy Agradecido!!

Deja tu opinión

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